diff --git a/.gitignore b/.gitignore
index 9c60438..5fdac2c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -46,3 +46,6 @@ src-tauri/WixTools/
 *.swp
 *.swo
 .idea/
+
+# Machine-list exports (contain real hostnames)
+eldrun-machines.json
diff --git a/AGENTS.md b/AGENTS.md
index 50a92c2..6a6d967 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -2,11 +2,29 @@
 
 ## Purpose
 
-ProjectEldrun, or Eldrun, is a Tauri desktop workspace for AI-assisted
+ProjectEldrun, or Eldrun, is a Tauri 2 desktop workspace for AI-assisted
 development. It manages a root control terminal, one terminal per active
-project, a bottom project switcher, a right-side project file browser, global
-app launching, file opening, time tracking, and optional workspace backend
-integration.
+project, a bottom project switcher, a right-side project file viewer, global
+app launching, file opening, time tracking, and optional workspace/backend
+integration in one window.
+
+The product thesis is project-scoped desktop context: opening a project should
+swap the relevant terminals, files, apps, downloads/default-app behavior, and
+time tracking together.
+
+## Load-Bearing Docs
+
+- Root project context: `CLAUDE.md`.
+- Frontend file map: `src/CLAUDE.md`.
+- Backend file map: `src-tauri/CLAUDE.md`.
+- Architecture/user documentation: `DOCUMENTATION.md`.
+- Work plan and grouped TODO conventions: `TODO.md` and `todo/`.
+- Remote/multi-host plan: `docs/multi_host_remote_plan.md`.
+- Remote lockstep case matrix: `docs/git_lockstep_case_matrix.md`.
+- Container plan: `docs/docker_projects_plan.md`.
+
+Read the relevant map before editing unfamiliar code. The maps intentionally
+list only load-bearing files; the tree is still the source of truth.
 
 ## Current Architecture
 
@@ -18,8 +36,10 @@ integration.
 - Terminal UI lives in `src/components/terminal/TerminalView.tsx`; terminal
   backend commands live in `src-tauri/src/commands/terminal.rs` and
   `src-tauri/src/terminal/`.
-- File browsing UI lives in `src/components/files/`; filesystem commands live
-  mostly in `src-tauri/src/commands/projects.rs`.
+- File browsing/viewing UI lives in `src/components/files/` and is shared by
+  the right panel, Files tabs, and per-subwindow file sidebars.
+- Filesystem commands live mostly in `src-tauri/src/commands/projects.rs` and
+  `src-tauri/src/commands/fs.rs`.
 - External app launching and tracked windows live in
   `src-tauri/src/commands/apps.rs`.
 - Settings and persisted schema types live in `src/stores/`, `src/types/`, and
@@ -33,68 +53,198 @@ integration.
 - Managed projects normally live under `~/eldrun/projects/<sanitized-name>/`.
   The root terminal uses `~/eldrun/root/`.
 - Global state lives in `~/.local/share/eldrun/`, especially `projects.json`,
-  `settings.json`, `default_apps.json`, `time_log.json`, and
-  `active_session.json`.
-- Project-local state lives in each project's `project.json`; current open-app
-  metadata is stored in `project.json["open_apps"]`.
+  `settings.json`, `default_apps.json`, `time_log.json`,
+  `active_session.json`, and `usage_stats.json`.
+- Usage stats are local-only rolling hour/day counters behind the daily recap.
+  Do not mix them with time (`time_summary.json`), network bytes
+  (`net_usage.json`), or git stats, which are read from their own sources.
+- Project-local state lives in each project's `project.json`. This includes
+  `open_apps`, `tab_layout`, `tab_groups`, remote specs, runtime/container
+  settings, and per-project file-viewer settings.
 - New/imported projects are scaffolded with `AGENTS.md`, `CLAUDE.md`,
   `GEMINI.md`, `.claude/settings.json`, `.gitignore`, `TODO.md`, `ROADMAP.md`,
-  `STATUS.md`, and `DOCUMENTATION.md`.
+  `STATUS.md`, and `README.md` when missing.
+- Box agent docs contain generated link blocks between
+  `<!-- eldrun:box-links:start -->` and `<!-- eldrun:box-links:end -->`; preserve
+  user edits outside those blocks.
 - `TODO.md` uses grouped IDs such as `G1.1`. When adding a TODO, place it in
   the matching group, create a new group if no current group fits, or merge
   groups if the TODO depends on distinct areas that should be tracked together.
 - Avoid unrelated rewrites in docs, generated state, built assets, project
   metadata, `dist/`, `target/`, and backup files.
 
-## Development Workflow
+## Runtime Safety
 
-- Prefer small, focused changes that match the existing React/TypeScript and
-  Rust/Tauri style.
-- Use `rg` for code search.
 - Do not launch Eldrun from an agent terminal for verification. Opening a
-  second Eldrun instance can corrupt workspace state; ask the user to run or
-  restart the existing instance when runtime validation is needed.
+  second Eldrun instance can corrupt workspace state.
 - Do not run `npm run tauri`, `npm run dev`, `cargo tauri dev`, or
   `./start-eldrun-tauri.sh` unless the user explicitly asks and confirms it is
   safe to launch a new instance.
+- Frontend (`src/`) changes hot-reload in the running instance, so do not ask
+  the user to restart just to see TSX/CSS edits.
+- Backend (`src-tauri/`) changes require the user to rebuild/restart the
+  existing instance for runtime validation. Ask for that only when runtime QA is
+  needed.
+- Runtime launch commands are human-only by default.
+
+## Development Workflow
+
+- Use `rtk` before shell commands, per the included RTK instructions.
+- Prefer small, focused changes that match the existing React/TypeScript and
+  Rust/Tauri style.
+- Use `rg` for code search.
 - When changing frontend behavior, prefer local component state and existing
   Zustand stores over adding new global state.
 - When changing backend commands, keep Tauri command payload names compatible
   with the camelCase keys used by the frontend.
 - Preserve Python-era JSON shapes where the Rust schema already supports them;
   existing user state should round-trip cleanly.
+- Keep service modules `AppHandle`-free and unit-testable where that is the
+  established boundary.
+- Git commit authors for this public-bound repo must use the GitHub noreply
+  email, never the user's real address.
+
+## Remote, Sync, And Runtime Model
+
+- Remote SSH projects are mount-free. Agent/terminal tabs run on the host over
+  SSH, file browsing/I/O goes over SFTP, and git runs on the host over SSH, all
+  using pooled ControlMaster/SFTP sessions in `services::remote`.
+- Remoteness is explicit: use `services::remote::remote_target_for{,_dir}` and
+  host-aware variants. Do not infer it from path conventions.
+- A remote project's `remote` is the primary host. Extra `compute_hosts` are
+  worker machines for experiments; each has its own pool entry, connection lamp,
+  and tab locality (`host:<id>`).
+- Worker sync is one-way code fan-out from the mirror to the worker for tracked
+  files only. It uses git bundle/reset, never `git clean`, and avoids the
+  bidirectional divergence/local-loss path.
+- Shared-filesystem workers are the default in the add-machine UI. They see the
+  primary folder at their own `remote_path`; do not run git init/reset/fan-out on
+  them. Tabs simply `cd` into the shared folder.
+- Git lockstep owns git-tracked files and moves commits/refs semantically via
+  bundles. Byte-sync owns everything else and moves raw bytes. Keep the
+  `drop_tracked` split intact so the two transports never race for one file.
+- With lockstep on, a saved edit to a tracked file reaches the peer only after
+  it is committed. Do not "fix" this back into continuous byte mirroring.
+- Byte-sync is opt-in per path from the explicit manifest. It does not read
+  `.gitignore`; preview and confirm large scopes before pulling big host trees.
+- Local-loss warnings are file-backed, not events. Destructive background git or
+  sync moves must record through `services::local_loss` so losses surface after
+  relaunch.
+- Passwords are never persisted by default. Saved SSH/OpenVPN credentials are
+  keyed by host/config target, not project id; a blank password can mean "use
+  saved credential".
+- Remote auto-connect and VPN auto-connect must never prompt. Check the
+  silent-connect predicates before attempting them.
+- OpenVPN tunnels are machine-wide. The header `VpnIndicator` owns visibility
+  and lifecycle across projects; project UI must not imply the tunnel is
+  project-scoped.
+- Never elevate for a connect that cannot succeed silently. `pkexec` prompts
+  before OpenVPN validates config/credentials.
+- Containerized projects use one session-lived Docker container per local
+  project and bind-mount the project at the identical absolute path. File
+  viewers/git/usage watchers keep reading host bytes. The toggle is local-only
+  and hidden/refused on unsupported platforms.
+
+## Tabs, Agents, And Restore
+
+- Shell/files tabs restore on relaunch. Claude and Codex agent tabs with a
+  `sessionId` are resumable and restored; Gemini and Vibe restore behavior is
+  more limited unless the relevant code explicitly says otherwise.
+- Eldrun installs Claude/Codex session hooks and also has hook-free Codex
+  binding. Codex user hooks may need one-time trust via `/hooks`.
+- Agent authority has three axes: project container sandbox, tab location
+  (local/primary/worker), and optional Plan/Auto agent mode.
+- `components/tabs/agentModes.ts` is a capability table. Add an agent there only
+  if it has an absolute mode flag and a working resume path for the respawn that
+  mode switching causes.
+- Plan/Auto is a launch flag, persisted per tab, and re-applied when args are
+  rebuilt from layout state. Do not persist raw args as the source of truth.
+
+## Frontend Notes
+
+- The right panel and Files (Project) tab share `ProjectFilesView`; keep file
+  viewer features in the shared component so surfaces do not drift.
+- `ProjectFilesPane` owns the tree/sort/source mechanics; panel/tab hosts own
+  only identity, active state, browsed folder, and chrome slots.
+- Remote/SFTP/git probes must be gated when disconnected; synchronous Tauri
+  commands against a dead session can freeze the window.
+- GPU UI reports whole-device memory and optional sensors from `gpustat`, not
+  only Ollama model memory. Omit missing sensor readings; do not render fake
+  zeroes.
+- File viewer parsers such as YAML and table editing are text-preserving views.
+  Keep edits surgical so comments, delimiters, quoting, and line endings survive.
+- Python Run/Debug opens a terminal tab and asks the backend for interpreter
+  precedence. Do not duplicate interpreter-ranking logic in the frontend.
+- Experimental features should use `useExperimental`; unset flags fall back to
+  debug mode.
+
+## Backend Notes
+
+- `commands/` expose Tauri command handlers; `services/` hold reusable runtime
+  logic; `schema/` mirrors persisted JSON.
+- `services::remote` is the source of truth for SSH/SFTP pooling and host-aware
+  remote resolution.
+- `services::worker_sync` is push-only source-to-worker code sync. Shared-FS
+  workers must be skipped defensively even if a command reaches the service.
+- `services::git_peer` owns lockstep and must preserve the tracked/untracked
+  boundary with byte-sync.
+- `services::openvpn` tracks both headless tunnels and interactive terminal
+  tunnels armed with Eldrun-owned pid files.
+- `services::sandbox` owns Docker runtime lifecycle. Tab close must reap
+  in-container processes via the existing wrapper/pidfile mechanism.
+- Terminal `kill`/`kill_all` must reap the child process subtree, not just the
+  shell leader.
+- Remote GPU snapshots are parsed through the same local `gpustat` parsers so
+  host readings match local readings field-for-field.
 
 ## Verification
 
-Before handing off code changes, run the checks that apply to the files you
-changed:
+Run checks that apply to the files changed before handing off:
 
 ```bash
-npm run build
+rtk npm run build
 ```
 
 ```bash
-cd src-tauri && cargo test
+rtk cargo test --manifest-path src-tauri/Cargo.toml
 ```
 
-If `cargo` is unavailable in the environment, state that clearly in the final
-handoff. For whitespace checks, also run:
+For whitespace checks, also run:
 
 ```bash
-git diff --check
+rtk git diff --check
+```
+
+For frontend-only risky changes, also consider targeted Vitest/TypeScript
+checks if faster than a full build. If `cargo` or another tool is unavailable,
+state that clearly in the final handoff.
+
+Before every push, run the privacy/secret scan on staged changes and stop if it
+reports anything real:
+
+```bash
+rtk git add -A
+rtk scripts/privacy-check.sh
 ```
 
 Every push to GitHub should generate a new packaged artifact from
-`.github/workflows/ci-cd.yml`; the local equivalent is `npm run package`,
-which installs the packaged AppImage outside the checkout so branch switches
-do not affect the running app. GitHub Releases are only published for
-`v0.<minor>.0` tags, so patch-only bumps like `0.1.1 -> 0.1.2` do not create
-new releases.
+`.github/workflows/ci-cd.yml`. The local equivalent is `npm run package`, which
+installs the packaged AppImage outside the checkout so branch switches do not
+affect the running app.
+
+Version bumping is automatic on push when `.githooks/` is enabled with
+`git config core.hooksPath .githooks`: the pre-push hook patch-bumps
+`package.json`, `src-tauri/Cargo.toml`, and `src-tauri/tauri.conf.json`, commits
+that bump, and re-pushes. To bump minor/major, run
+`scripts/bump-version.sh minor|major` and commit before pushing.
+
+GitHub Releases are cut manually only when a `v*` tag is pushed; ordinary branch
+pushes do not publish releases.
 
 ## Running Locally
 
-Human-only by default. Agents must not run these commands while an Eldrun
-instance may already be active.
+Human-only by default. Agents must not run these while an Eldrun instance may
+already be active.
 
 Preferred Tauri launcher:
 
@@ -107,3 +257,6 @@ Development run:
 ```bash
 npm run tauri dev
 ```
+
+Useful keys: `F11` toggles fullscreen; `Super` toggles panels while Eldrun is
+focused.
diff --git a/CLAUDE.md b/CLAUDE.md
index 8e7881b..3dbd825 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -94,6 +94,20 @@ Both list only the load-bearing files; the tree is the source of truth.
   **different notions of scope**, so marking a folder auto-sync is the one click
   that can haul a multi-GB tree into the mirror; the file tree prices the host
   subtree first (`sync_auto_preview`) and confirms when it is large.
+- **Passwords are never persisted by default**, and the opt-in that persists them is
+  the same in every remote menu — the Connect modal *and* the new-project /
+  extend-to-remote dialogs (`useRemoteSession`, rendered by `RemoteProjectSection`).
+  It can be, because the keychain is keyed by **host target** (`ssh:user@host:port`)
+  and **config path**, never by project id: there is one saved credential per host and
+  per tunnel, whichever menu saved it. Hence the toggle is *pre-ticked* when the target
+  already has one (an untick is an explicit delete, so connecting with it unticked
+  would clear another project's saved password), and a blank password field means "use
+  the saved one", not "authenticate with nothing". The credential a create/extend
+  dialog authenticated with is also handed to that project's **first pooled connect**
+  (`stashRemotePassword`, single-use, never written to disk): connecting it
+  password-less would work — it rides the ControlMaster the dialog left up — but the
+  backend reads "no password given, none saved" as *key* auth and would record
+  `key_auth: true` on a password host, which auto-connect later believes.
 - A remote project connects **on demand** (the pill's connection lamp opens the
   `RemoteConnectDialog`) — *unless* it opts into `remote.auto_connect`, which
   connects it on launch and on activation and **never prompts**. The toggle is only
@@ -112,7 +126,14 @@ Both list only the load-bearing files; the tree is the source of truth.
   a holder refcount — `releaseVpn` means a project logging out never pulls a tunnel out
   from under another project) and surfaced in the header by `VpnIndicator`, which is
   always present, lists every stored `.ovpn`, and can bring a tunnel **up or down with
-  no project behind it**. Every UI that can start a tunnel says so before it does.
+  no project behind it**. Every UI that can start a tunnel says so before it does —
+  and none of them offers a *second* one: while a tunnel is up machine-wide, every
+  project-scoped OpenVPN block (the Connect modal, and the SSH section the
+  new-project and extend-to-remote dialogs share) collapses to a one-line
+  "tunnel already up" notice pointing at the header, via the shared
+  `useVpnSectionVisible` gate + `VpnTunnelUpNotice`. The exception the gate keeps:
+  a tunnel *that* dialog itself brought up stays expanded, so its log and its
+  Disconnect remain where the user started it.
   Interactive (non-headless) tunnels are *armed* at command-build time —
   `interactive_connect_command` appends a `--writepid` Eldrun owns and registers it —
   so a tunnel typed into a terminal tab is as visible and as killable as a headless
@@ -152,6 +173,77 @@ Both list only the load-bearing files; the tree is the source of truth.
   and the backend injects `codex resume <live-id>`. **Codex caveat:** user-level
   Codex hooks need a one-time trust (`/hooks` in Codex) before they run. Gemini
   and Vibe are still dropped (TODO 39d).
+- **A remote project can reach N machines, not one** (`docs/multi_host_remote_plan.md`,
+  `services::worker_sync`). The project's `remote` is the **primary** — it still owns
+  files, git, the mirror, and full bidirectional sync, unchanged. Extra **worker**
+  hosts (`Project.compute_hosts`, mirrored into `projects.json`'s
+  `extra["compute_hosts"]`) are experiment machines: their code is kept **one-way** in
+  sync from the mirror (source→worker, tracked files only, `reset --hard`, **never
+  `git clean`**), their files are read-only, and their experiment **outputs** (untracked
+  paths) stay on the worker until a user-initiated, size-confirmed **Pull outputs** — the
+  only worker→local byte path. Because worker sync is push-only it dodges the entire
+  divergence/conflict/local-loss half of lockstep. Each host has its own pool entry
+  (`remote::conn_key`, keyed `(project, host)`), its own pill lamp, and its own tab
+  locality (`host:<id>`); the primary is the implicit `"primary"` id, so every existing
+  file/git/sync caller keeps meaning "the primary" with no change. A tab runs on a host
+  via its `host:<id>` location → `PtyOptions.remote_host_id`. Managed from the pill's
+  "Remote machines…" (`RemoteMachinesWindow`).
+  - **A worker can instead SHARE the primary's folder over a shared filesystem — and
+    this is now the DEFAULT for a newly added machine** (`ComputeHost.shared_fs`,
+    schema default `false` for back-compat but the "Add machine" form ticks it on;
+    untick "Sync a copy" ⇒ shared). A shared-fs worker sees the primary's project
+    folder at its own `remote_path` (an HPC compute node on a shared home), so Eldrun
+    copies **nothing** and **never runs git on it** — a tab just `cd`s into that folder
+    and runs there (`wrap_pty_options` already uses `spec.remote_path`, so tab spawn is
+    unchanged). This is load-bearing for safety: the code path that would `git init` +
+    `reset --hard` a synced worker's tree must **never** fire on a shared-fs host, or it
+    corrupts the primary's real working tree. Three guards enforce it — `remote_connect`
+    skips `on_worker_connect`, `worker_sync::fan_out` skips via `wants_code_fanout`
+    (`!shared_fs && sync_code`), and `sync_worker` itself early-returns a no-op skip for a
+    shared-fs host so even a stray `worker_sync_now` is harmless. "Sync code now" / "Pull
+    outputs" / "Auto-sync code" are hidden for a shared-fs worker (its outputs are already
+    in the primary's folder, moved by the primary's own sync).
+- **A shell/script tab runs inside a tmux session so a long run survives** (#85,
+  `docs/tmux_remote_plan.md`) — decoupled from the disposable channel, the tab
+  **reattaches** on relaunch. It covers **two axes**:
+  - **Remote** (on the SSH host): survives an SSH drop, a laptop sleep, a VPN drop,
+    or Eldrun quitting. **Default ON** per remote project
+    (`RemoteSpec.persist_sessions !== false`; opt out via the pill's "Persistent
+    sessions (tmux)"). `ssh_exec::wrap_pty_options` nests the existing `exec …`
+    inside `tmux new-session -A -D -s <name>`.
+  - **Local** (on this machine, Unix only — no tmux on Windows): survives an
+    **Eldrun crash** (the tmux server is a daemon; the PTY only holds a client).
+    **Default ON** via `settings.persist_local_sessions`. `services::tmux_local`
+    rewrites the local spawn's `{cmd,args}` into a `tmux` argv in
+    `commands::terminal::pty_spawn`, *after* the ssh/docker branch so only a
+    genuinely local tab is wrapped.
+  Scoped to **shell tabs** (Python runs open one; a command runs inside the
+  session's login shell, which outlives it → the run reattaches, not re-runs) and
+  never the root scope — **agent tabs are excluded** (they resume via their own
+  session). The session name is a **uuid the frontend mints once per shell tab and
+  persists** (`TabEntry.tmuxSession`) — *not* derived from the PTY id, which
+  `loadFromLayout` regenerates on restore (a derived name would fork a second
+  session on relaunch instead of reattaching); `tmux_attach` overrides it for a
+  Sessions-view attach. **Kill vs. detach**: closing a tab **always detaches** —
+  `lib/closeRemoteTab.ts`'s `closeTabWithConfirm` just `removeTab`s, killing only the
+  ssh/PTY client, so the session lives on under its tmux daemon; an app-exit,
+  disconnect, crash, or respawn likewise **leave the session alive**. Two explicit
+  actions terminate a session — a session's **×** (kill) in the Sessions view
+  (`remote_tmux_kill`/`local_tmux_kill`), and an **active disconnect** of the whole
+  host, which ends *every* session on it at once (`remote_kill_all_jobs`: `tmux
+  kill-server` over the host, best-effort). The active disconnect is the "Disconnect"
+  on a **global machine** (`MachinesIndicator`, + `ssh_close_master` to drop any
+  shared master) and the "Disconnect & end jobs" beside a project host's plain
+  Disconnect (`RemoteConnectDialog`, then the ordinary `remote_disconnect` teardown).
+  Both are **explicit-click only** — `remote_kill_all_jobs` must never run on
+  deactivation or relaunch, or persistent sessions would stop surviving a restart.
+  Because a session outlives its tab, a host
+  can hold runs no tab points at; the **Sessions view** (`☰` toggle in
+  `ProjectFilesView`, mirrors the Orange view) makes them discoverable —
+  **multi-host** (aggregated across the primary and every connected worker via
+  `remote_tmux_list`, each row host-tagged), click a row to attach, per-row **×**
+  (kill) and **Rename** (`remote_tmux_rename`, updates the owning tab's persisted
+  name). tmux-absent falls back to today's plain `exec` + a notice.
 - **A project can run in a container** (#38, `services::sandbox`,
   `docs/docker_projects_plan.md`): with the pill's "Run this project in a
   container" toggle on, every shell/agent tab `docker exec`s into ONE
@@ -170,14 +262,17 @@ Both list only the load-bearing files; the tree is the source of truth.
 - **Agent authority has three axes**, and they compose: the project container
   `sandbox` (OS containment), the tab's `location` (where the process runs), and — behind the
   experimental `agent_mode_toggle` setting, default off — its `agentMode`: **Plan**
-  (`--permission-mode plan`) vs **Auto** (`acceptEdits`). The mode is a *launch
-  flag*, so flipping it rewrites the tab's `args`, which respawns the PTY
-  (`TerminalView`'s spawn effect keys on them) — non-destructive only because the
-  backend rewrites `--session-id` → `--resume` and the conversation comes back.
-  That is exactly why `components/tabs/agentModes.ts` is a **capability table, not
-  a universal field**: an agent belongs in it only if it has both an absolute mode
-  flag *and* a working resume. Claude has both; Gemini has the flag but no resume
-  (a toggle would destroy the chat), Codex resumes but has no plan mode. The mode
+  vs **Auto** (Claude `--permission-mode plan`/`acceptEdits`; Gemini
+  `--approval-mode plan`/`auto_edit`). The mode is a *launch flag*, so flipping it
+  rewrites the tab's `args`, which respawns the PTY (`TerminalView`'s spawn effect
+  keys on them) — non-destructive only because the tab resumes its conversation on
+  respawn. That is exactly why `components/tabs/agentModes.ts` is a **capability
+  table, not a universal field**: an agent belongs in it only if it has both an
+  absolute mode flag *and* a working resume. Claude (resume-by-id) and Gemini
+  (continue-last) both qualify; Codex resumes but has no plan mode. Gemini's
+  continue-last resume carries one accepted caveat — with two Gemini tabs in a
+  project a respawn reattaches to the project's latest session, not necessarily
+  this tab's (the same ambiguity their ordinary restore already has). The mode
   is persisted per tab, and re-applied onto the rebuilt args in `loadFromLayout` —
   args are NOT persisted, so without that the split would silently die on restart.
 - New/imported projects receive `AGENTS.md`, `CLAUDE.md`, `GEMINI.md`,
diff --git a/Cargo.lock b/Cargo.lock
index 94a4d1c..9d76107 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1129,7 +1129,7 @@ checksum = "d0881ea181b1df73ff77ffaaf9c7544ecc11e82fba9b5f27b262a3c73a332555"
 
 [[package]]
 name = "eldrun"
-version = "0.1.21"
+version = "0.1.31"
 dependencies = [
  "arboard",
  "base64 0.22.1",
diff --git a/README.md b/README.md
index 78a2e14..3c60b7c 100644
--- a/README.md
+++ b/README.md
@@ -13,7 +13,9 @@
 
 > **You don't open applications — you open projects.**
 > Eldrun is a project-centric desktop layer that swaps your whole working
-> context as one unit, with AI agent terminals and in-app file viewers built in.
+> context as one unit, with AI agent terminals and in-app file viewers built in
+> — and it runs that work on remote machines and HPC clusters, not just your
+> laptop.
 
 Eldrun is a **project-centric desktop layer**, not just an app that launches or
 embeds other apps: projects own their windows and desktop context, and selecting
@@ -24,6 +26,11 @@ on top, living *inside* a project once its desktop is restored. Built with
 native workspace, app-launch, default-app, and download integration today; macOS
 runs as a shell with a no-op workspace backend (on the roadmap).
 
+Eldrun is also **strong at working across machines**: it manages a fleet of
+remote hosts, runs agents, shells, and jobs on them over SSH, and drives HPC /
+SLURM clusters — all from the same project cockpit. See
+[Remote machines & HPC clusters](#remote-machines--hpc-clusters).
+
 ---
 
 ## Why Eldrun
@@ -263,6 +270,37 @@ update-desktop-database ~/.local/share/applications/
   pointer hover and disappear when the pointer leaves, keeping the center
   terminal unobstructed; the right panel can also be pinned permanently open.
 
+### Remote machines & HPC clusters
+
+Eldrun treats remote hosts as first-class: it **manages a fleet of machines** and
+**runs your work on them**, from a single SSH box to a full HPC cluster.
+
+- **Machine hub**: register SSH hosts once (independent of any project) in the
+  header's machines indicator — see a live CPU/GPU usage bar per machine,
+  connect/disconnect, arm silent auto-connect on launch, and drag a machine onto
+  a project to attach it as a compute host.
+- **Run on the remote host**: a project can point at a host and run its agent,
+  shell, and Python tabs *on that host* over SSH, with the file tree, Git, and
+  in-app viewers all reading the remote tree. VPN-gated hosts bring up an OpenVPN
+  tunnel first.
+- **Many machines per project**: beyond the primary host, add extra *worker*
+  machines — their code is kept in sync from the project (one-way, tracked files
+  only) and their experiment outputs are pulled back on demand. A worker on a
+  **shared filesystem** (e.g. an HPC compute node on a shared home) is used in
+  place, with nothing copied and no Git run on it.
+- **Persistent sessions**: a long run lives in a tmux session per shell tab, so
+  a job survives an SSH drop, a laptop sleep, a VPN drop, or Eldrun quitting, and
+  the tab reattaches on relaunch. A **Sessions view** lists every running session
+  across all connected machines, with per-row attach/rename/kill.
+- **Remote system monitor**: a host's CPU, memory, and GPUs (AMD + NVIDIA,
+  including per-process GPU memory) are sampled over the same SSH connection and
+  shown alongside the local machine's.
+- **HPC / SLURM** *(built, but untested pending real-cluster QA)*: submit a batch
+  script with `sbatch`, watch its live log, list and cancel your queued jobs, and
+  open an interactive compute-node shell via `srun` — without memorizing the
+  commands. A guided **HPC pipeline wizard** walks a cluster newcomer through
+  login → project → data upload → job → watch.
+
 ### In-app file viewers
 
 Drag a file from the tree onto a subwindow's tab bar to open it in a tab; the
@@ -271,11 +309,13 @@ app until they land.
 
 | Viewer | Extensions | Status | Notes |
 | ------ | ---------- | ------ | ----- |
-| **Text / code** | `.txt` `.json` `.py` `.rs` `.ts` `.bib` + many more, plus extensionless files like `Dockerfile` | ✅ Shipping | Editable editor: line-number gutter, syntax highlighting, Tab/Shift+Tab indent, undo/redo (`Ctrl+Z`/`Ctrl+Shift+Z`), find (`Ctrl+F`) and find-and-replace (`Ctrl+R`) with match nav + case toggle, save (`Ctrl+S`); unsaved lines marked; non-destructive auto-reload banner; opt-in local autocomplete and grammar check. |
+| **Text / code** | `.txt` `.toml` `.py` `.rs` `.ts` `.bib` + many more, plus extensionless files like `Dockerfile` | ✅ Shipping | Editable editor: line-number gutter, syntax highlighting, Tab/Shift+Tab indent, undo/redo (`Ctrl+Z`/`Ctrl+Shift+Z`), find (`Ctrl+F`) and find-and-replace (`Ctrl+R`) with match nav + case toggle, save (`Ctrl+S`); unsaved lines marked; non-destructive auto-reload banner; opt-in local autocomplete and grammar check. |
 | **Markdown** | `.md` `.markdown` `.mdx` | ✅ Shipping | Rendered preview with an Edit/Preview toggle; links to local files are clickable. |
+| **YAML / JSON** | `.yaml` `.yml` `.json` | ✅ Shipping | Editable structure tree with a Tree/Source toggle: retype a value, rename a key, add a key or list item (with a type picker), reorder, delete. Both of YAML's syntaxes are first-class — block (`key:`) and flow (`{a: 1}`, which is exactly JSON, on one line or spread over many) — and each keeps the style it is written in. The tree edits the file's own text, so comments, quoting and layout survive an edit; it withholds the affordance rather than botch a construct it can't rewrite (anchors, merge keys). Source is the full code editor. |
 | **LaTeX** | `.tex` | ✅ Shipping | Code editor + compile (when a TeX engine is on `PATH`, shell-escape stripped); follows `\input{…}`/`\includegraphics{…}`, `\ref`/`\cite` completion from `\label` keys and `.bib` entries; parsed compile errors jump to the line; bidirectional SyncTeX sync across tiled or detached panes. |
 | **PDF** | `.pdf` | ✅ Shipping | Rendered with a themed zoom toolbar. |
-| **Images** | `.png` `.jpg` `.gif` `.webp` … | ✅ Shipping | Zoom-to-cursor / pan; draggable out as an OS drop source. |
+| **Images** | `.png` `.jpg` `.bmp` `.webp` … | ✅ Shipping | Zoom-to-cursor / pan; draggable out as an OS drop source. |
+| **Animated GIF** | `.gif` | ✅ Shipping | Frame-level transport on top of the image viewer's zoom/pan: play/pause, frame stepping, scrubber, playback speed, loop toggle, frame/delay readout. Decoded in-app (pure LZW decoder), so it works over SFTP too; a GIF the decoder can't handle degrades to the native animated `<img>`. |
 | **Table / CSV** | `.csv` `.tsv` | ✅ Shipping | Read-only grid (RFC 4180-style parse); large files are windowed to keep the webview responsive. |
 | **Jupyter notebook** | `.ipynb` | ✅ Shipping | Read-only render of cells top-to-bottom — markdown cells, Python-highlighted code cells, and their classified outputs. |
 | **Diff / patch** | `.diff` `.patch` | ✅ Shipping | Color-coded add/del rendering that reads in light and dark themes. |
diff --git a/docs/Features.md b/docs/Features.md
index d9f26ae..0231490 100644
--- a/docs/Features.md
+++ b/docs/Features.md
@@ -61,7 +61,7 @@ only `src-tauri/` changes need a rebuild/restart.
 | Feature | Done | Partial | Issue | Notes |
 |---------|:----:|:-------:|:-----:|-------|
 | SSH hardening (#28c) | | | | two **Critical**: remote cmd injection in `ssh_list_dir`/`ssh_default_dir`; remote `--resume` ordering bug |
-| Agent resume generalization (#39d) | | | | Gemini + Vibe still dropped |
+| Agent resume generalization (#39d) | ✅ | | | Claude/Codex resume-by-id; Gemini (`--resume latest`) + Mistral/vibe (`--continue`) via continue-last |
 | KDE Wayland backend (#18) | | | | show/hide are explicit no-ops (KWin scripting pending) |
 | Windows backend | | | | stub (`platform/windows.rs`) |
 | Boxes phases 3–4 (#41) | | | | merged file tree + relation graph deferred |
diff --git a/docs/multi_host_remote_plan.md b/docs/multi_host_remote_plan.md
new file mode 100644
index 0000000..88158e1
--- /dev/null
+++ b/docs/multi_host_remote_plan.md
@@ -0,0 +1,418 @@
+# Multi-Host Remote Projects — Plan (experiment-worker model)
+
+**Goal.** Let one remote project reach **N** remote machines, not just one, so the
+**same code** can be run as experiments across several hosts (e.g. different GPU
+boxes). A tab's `local / remote` toggle becomes a **list**:
+`local | primary | gpu-2 | gpu-3 …`.
+
+**Model (decided).**
+- **One primary host, N extra "worker" hosts.** The primary stays exactly as
+  today: it owns files, git, the local mirror, and full bidirectional sync. Extra
+  hosts are **experiment workers**.
+- **Extra hosts stay in sync with the canonical code — one-way.** Code (git-tracked
+  files) is pushed *source → each extra*; it is never pulled back. So all machines
+  run the same commit.
+- **Files on extra hosts are read-only.** You never *edit* on a worker; the UI
+  offers no write there, and a re-sync overwrites any drift. This is precisely what
+  lets the sync be one-way: with no edits on the workers, there is **no merge
+  conflict, no divergence, and no destructive local-loss** — the entire scary half
+  of the existing lockstep machinery is dodged.
+- **Experiments still write their outputs.** "Read-only" means *code* is read-only,
+  **not** the filesystem. A run writes checkpoints / logs / metrics freely; the sync
+  never touches untracked/gitignored paths (it does `fetch + reset --hard` but
+  **never** `git clean`), so outputs survive every sync.
+- **Outputs stay on each worker, pulled on demand** (recommended default; §4.4).
+  Auto-pulling multi-GB checkpoints from N machines is the byte-sync-scope footgun
+  CLAUDE.md already warns about, so it is opt-in per machine.
+- **Per-host lamps, on-demand connect.** Each host has its own connection lamp in
+  the pill. Auto-connect is an opt-in per host.
+
+**Two load-bearing insights.**
+1. **The bidirectional subsystem is untouched.** Everything that owns the primary's
+   files/git/sync — `services/git_peer.rs` (~200 KB), `remote_sync.rs`,
+   `sync_auto.rs`, all of `commands/fs.rs` + `commands/git.rs` + `commands/sync.rs`
+   — resolves *the* host through `remote_target_for(project_id)` /
+   `remote_target_for_dir(project_dir)`, both reading the single `extra["remote"]`.
+   Store extra hosts under a **separate** key (`extra["compute_hosts"]`) and that
+   whole subsystem keeps meaning "the primary" with zero change.
+2. **Worker sync is push-only, so it inherits none of the hard parts.** The
+   existing lockstep is bidirectional (pull, divergence, conflict, local-loss
+   auditing). The worker fan-out reuses only the *outbound* primitives —
+   bundle-create + apply — and never the inbound half. It is a new, deliberately
+   thin push-only path, not a second full lockstep.
+
+---
+
+## 1. Data model
+
+### 1.1 Backend — `schema/project.rs`
+
+An extra host is a `RemoteSpec` + a stable id + a display label. Reusing
+`RemoteSpec` verbatim means every existing execution helper (`ssh_exec`, `sftp`,
+`remote_usage`, monitor/disk/gpu/python) works unchanged — they already take
+`&RemoteSpec`.
+
+```rust
+/// An additional SSH machine a project runs experiments on. Its code is kept in
+/// one-way sync from the canonical source (the local mirror); its files are
+/// read-only (edits forbidden). It never owns git/sync/mirror state of its own —
+/// the primary `remote` does. `id` is stable (referenced by tab locations + the
+/// pool key + the fan-out state); `label` is the pill/tab display name.
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct ComputeHost {
+    pub id: String,                 // stable, e.g. "h1"; primary is implicit "primary"
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub label: Option<String>,      // "gpu-2"; falls back to host
+    /// Keep this worker's tracked tree synced to the source HEAD (default true).
+    #[serde(default = "default_true")]
+    pub sync_code: bool,
+    /// Pull this worker's experiment OUTPUTS back on demand only, never
+    /// automatically (default false — outputs stay on the worker).
+    #[serde(default)]
+    pub pull_outputs: bool,
+    #[serde(flatten)]
+    pub spec: RemoteSpec,           // user/host/port/remote_path/openvpn/auto_connect/key_auth
+}
+```
+
+Add to `Project`:
+
+```rust
+#[serde(default, skip_serializing_if = "Vec::is_empty")]
+pub compute_hosts: Vec<ComputeHost>,
+```
+
+**Migration: none.** Existing projects have no `compute_hosts`; `#[serde(default)]`
+yields `[]`. The primary is still `Project.remote`, unchanged.
+
+### 1.2 Mirroring into `projects.json` — `commands/projects.rs`
+
+`project_extra(...)` (~`:2352`) mirrors `remote` + `mirror` into the always-local
+`projects.json` entry so resolvers stay synchronous. Add a mirror of
+`compute_hosts` under `extra["compute_hosts"]` (array). That is the only place
+workers need to reach the local `projects.json`; every resolver below reads it.
+
+New host CRUD commands (mirror the existing `patch_remote_spec` at `:851`):
+- `add_compute_host(project_id, ComputeHost)` — append + write `project.json`
+  **and** `extra["compute_hosts"]`, minting `id` if absent.
+- `remove_compute_host(project_id, host_id)` — disconnect it, stop its fan-out,
+  then drop it.
+- `patch_compute_host(project_id, host_id, patch)` — for `auto_connect` /
+  `key_auth` / `openvpn` / `sync_code` / `pull_outputs`.
+
+### 1.3 Frontend — `types/index.ts`
+
+```ts
+export interface ComputeHost extends RemoteSpec { id: string; label?: string; sync_code?: boolean; pull_outputs?: boolean; }
+export interface ProjectEntry { /* … */ remote?: RemoteSpec; compute_hosts?: ComputeHost[]; }
+```
+
+---
+
+## 2. Worker code sync — one-way, code-only (the heart of this change)
+
+**Canonical source = the local mirror.** It is already lockstep-paired with the
+primary (`git_peer`), so the local mirror always holds the project's current
+committed code. The workers are fed **from the mirror**, one-way. (Feeding from the
+mirror, not primary→worker directly, means Eldrun — which already holds SSH to both
+legs — is the courier; it assumes no primary↔worker network path or shared keys.)
+
+**Direction & grain.**
+- Source → worker only. A worker's tree is **never** read back into the mirror
+  (that is what makes it conflict-free).
+- Tracked files only. The push makes the worker's tracked tree equal the source
+  HEAD; untracked/gitignored paths (experiment outputs, datasets staged on the
+  worker) are left alone.
+
+**Mechanism (reuses `git_peer` outbound primitives; a new push-only mode).**
+Per worker, first sync bootstraps a bare-ish working clone at `worker:remote_path`
+(git init + fetch, or clone from a bundle Eldrun ships over SFTP — same
+`remote_bundle_path` + apply primitives lockstep uses local↔primary). Each
+subsequent sync:
+1. On the mirror, `git bundle` the current HEAD (or an incremental bundle since the
+   worker's last-known head).
+2. Ship the bundle to `worker:remote_path/.git/eldrun-worker.bundle` over SFTP.
+3. On the worker: `git fetch` the bundle, then `git checkout -f <HEAD>` /
+   `reset --hard <HEAD>` — **tracked files only**.
+4. **Never `git clean`.** Untracked outputs survive by construction. (Contrast: the
+   primary's lockstep *does* clean in some refused-FF cases and audits the loss;
+   the worker path deliberately never does, because a worker holds irreplaceable
+   run outputs, not a recoverable mirror.)
+
+**Per-worker state.** A tiny `worker_sync.json` under the worker's slot in the
+project state dir records its `last_head` (the commit last pushed) so an
+incremental bundle is cheap. No manifest, no byte-walk — code is git, and git
+already knows what changed.
+
+**Triggers.**
+- On worker **connect** (bring it up to the current HEAD).
+- On a new **commit** to the mirror/primary (the same signal `git_peer` already
+  watches via the `.git` watcher) → fan out to every connected, `sync_code`
+  worker.
+- Manual **"Push code to machines"** action in the pill.
+
+Because the primary already commits-then-syncs (lockstep is commit-gated), a worker
+receives an edit at the same moment the primary does: **on commit**, not on save.
+This is the identical mental model the primary already has (CLAUDE.md,
+`git_lockstep_case_matrix.md` #5/#7) — extended to N workers.
+
+**Reusing infrastructure vs. new code.** New: a `WorkerSyncRegistry` (per
+`(project, host)`), the push-only fan-out loop, `worker_sync.json`,
+`fetch + reset` (no clean) on the worker. Reused unchanged: bundle create/ship
+primitives in `git_peer`, the `.git` commit watcher, `run_git_remote` /
+`run_remote_script` over the worker's ControlMaster.
+
+---
+
+## 3. Connection layer
+
+### 3.1 Already N-host-safe (no change)
+
+- **ControlMaster sockets** are `cm-%C`, hashed per user/host/port
+  (`ssh_exec.rs:63-70`, `ssh_common.rs:88`). Two hosts → two sockets, free.
+- **Keychain credentials** keyed by host target `ssh:user@host:port`
+  (`remote_credentials.rs:28`) — each worker saves its own password, no collision.
+- **VPN** machine-wide, config-keyed, holder-refcounted (`vpnStatus.ts`,
+  `openvpn.rs`). A worker on a different tunnel just adds a holder/config.
+
+### 3.2 Pool — `services/remote.rs`
+
+Re-key `RemotePool.conns` from `HashMap<project_id, _>` to a composite key:
+
+```rust
+fn conn_key(project_id: &str, host_id: &str) -> String { format!("{project_id}\u{1}{host_id}") }
+```
+
+- `connect(pool, project_id, host_id, password)` — resolve the spec: `"primary"` →
+  `remote_target_for` (unchanged), else the `compute_hosts` entry. **Only the
+  primary touches the mirror** (`mirror_dir` at `:166` stays behind the primary
+  branch).
+- `disconnect` / `is_connected` / `pooled_sftp` thread `host_id`. File/git/sync
+  callers pass the constant `"primary"` (they *are* the primary subsystem).
+- `connected_ids` → `connected_targets -> Vec<(project_id, host_id)>`.
+
+### 3.3 Connect / disconnect commands — `commands/remote.rs`
+
+- `remote_connect(…, project_id, host_id: Option<String>, password)` (default
+  `"primary"`). Primary connect keeps wiring `git_peer` + `sync_auto` (`:73-90`).
+  A **worker** connect instead kicks the **worker code-sync** fan-out (§2) and
+  skips byte-sync/lockstep.
+- `remote_disconnect(…, project_id, host_id)` — primary stops git_peer + sync_auto;
+  a worker stops only its fan-out + pool entry.
+
+### 3.4 Traffic accounting — `services/net_usage.rs` (phase 3, optional)
+
+Sum all of a project's hosts under the project bucket initially (keeps the existing
+per-project shape); per-`(project,host)` buckets can come later.
+
+---
+
+## 4. Frontend
+
+### 4.1 Tab location — `stores/tabs.ts`
+
+```ts
+export type TabLocation = "local" | "remote" | `host:${string}`;  // local | primary | worker id
+```
+
+- `remoteHostIdOf(loc)` → `"primary"` for `"remote"`, the id for `"host:<id>"`,
+  `null` for `"local"`.
+- `defaultLocationForKind` (`:3596`) unchanged; `localTabCwd` (`:3627`) unchanged
+  (only `"local"` uses the mirror; a worker locality returns `fallback`).
+- `SavedTabEntry.location` (`:368`) is already a string → new values round-trip. A
+  location naming a deleted host falls back to `"remote"` on load.
+
+### 4.2 PTY spawn — backend
+
+- `PtyOptions` (`terminal/mod.rs:36`): add
+  `#[serde(default)] pub remote_host_id: Option<String>`.
+- `wrap_pty_options` (`ssh_exec.rs:472`): resolve the spec by host id — primary via
+  `remote_target_for` (unchanged), else the worker spec; `remote_dir =
+  spec.remote_path`; `ssh_pty_args(&spec, cmd)` as today.
+- `commands/terminal.rs:141` passes `opts.remote_host_id`; `TerminalView.tsx:29`
+  passes it from `remoteHostIdOf(tab location)`.
+
+### 4.3 Connection state + pill — `stores/remoteStatus.ts`, `RemoteConnMenu.tsx`
+
+- `byProject: Record<projectId, Record<hostId, { ssh; vpn }>>`; `setSsh/​setVpn`
+  gain `hostId`; add `sshOf(projectId, "primary")` so untouched readers change in
+  one line. `clear(projectId)` wipes all hosts; add `clearHost`.
+- Pill shows **one lamp per host** (primary + each worker). Clicking a lamp opens
+  the connect flow for that host. `connectDialog` opens with `{ projectId, hostId }`
+  (default `"primary"`); `RemoteConnectDialog` / `useRemoteReconnect` parametrize by
+  `hostId` (their `liveTerms`, `pendingRemotePassword`, lamp reads become
+  `(projectId, hostId)`-keyed).
+
+### 4.4 Managing workers + outputs — pill
+
+A "Remote machines…" section lists hosts with **Add machine** (reuses
+`RemoteProjectSection` / `useRemoteSession` to collect user/host/port/remote_path +
+optional VPN → `add_compute_host`) and per-worker controls:
+- **Sync code now** (manual fan-out trigger) and a "last synced: <commit>" line.
+- **Pull outputs…** — a one-shot, on-demand pull of the worker's *untracked* output
+  paths into a local `outputs/<host-label>/` folder (never automatic). This is the
+  one place worker→local bytes ever move, and it is user-initiated. The
+  `sync_auto_preview`-style size-confirm applies (a checkpoint dir can be huge).
+- Toggles: `sync_code` (default on), `pull_outputs`-on-demand-only (default), and
+  auto-connect.
+
+### 4.5 Tab UI
+
+- **TabBar badge** (`TabBar.tsx:1156`): the 2-state `local↔remote` toggle becomes a
+  small menu (`Local`, `Primary (host)`, each worker label) → `setTabLocation`.
+- **Hold gate** (`CenterPanel.tsx:976`): read the lamp of *the tab's* host
+  (`remoteHostIdOf`), not the single project lamp — a pane on gpu-2 holds iff gpu-2
+  is down, independent of the primary. `remoteHost` label = that host's label.
+- **TabHoverCard** / **RemotePaneHold** show the target host's label.
+
+### 4.6 Read-only enforcement on workers
+
+Workers never expose an editing surface:
+- No worker file tree/git/source-switch (the file UI stays `Local | Remote(primary)`
+  — §6). If a *read-only* worker file browser is ever wanted, it is a later,
+  separate SFTP-read view; not in scope here.
+- Any code drift on a worker is silently overwritten by the next `reset --hard`
+  (§2) — which is safe *because* editing is forbidden, so drift can only be
+  accidental, and outputs (untracked) are never in `reset`'s path.
+
+---
+
+## 5. Monitoring per worker
+
+`system_monitor_snapshot` (`monitor.rs:25`), `disk_usage_scan` (`disk_usage.rs:66`),
+the remote GPU snapshot (`sysstat::REMOTE_SNAPSHOT_SCRIPT`), and the python probe
+(`python.rs:389`) each already resolve *a* spec from `project_id`; add an optional
+`host_id` that selects the worker (primary when absent). The monitor / disk panes
+gain a host selector; a run tab on gpu-2 probes gpu-2's interpreter.
+
+---
+
+## 6. Explicitly NOT changing
+
+- `remote_target_for` / `remote_target_for_dir` / `RemoteTarget` stay
+  **primary-only**. All file/git/sync keeps calling them.
+- `git_peer.rs` (bidirectional lockstep), `remote_sync.rs`, `sync_auto.rs`,
+  `local_loss.rs`, the mirror, `commands/fs.rs` / `git.rs` / `sync.rs` — the
+  primary path is **untouched**. The worker fan-out (§2) is *new, additive,
+  push-only* code that reuses their bundle primitives.
+- File tree / file-source switch / `fileSourcePref` stay `Local | Remote(primary)`.
+
+---
+
+## 7. Phasing & tests
+
+**Phase 1 — connect to N workers + run tabs on them.**
+Schema `ComputeHost` + `compute_hosts` + `projects.json` mirror + CRUD (§1); pool
+composite key (§3.2); `TabLocation` `host:<id>` + `PtyOptions.remote_host_id` +
+`wrap_pty_options` resolve + TerminalView (§4.1-4.2); `remoteStatus` re-key +
+per-host lamps + connect-dialog `hostId` + TabBar badge menu (§4.3-4.5).
+Rust tests: two hosts one project — independent connect/disconnect/`is_connected`;
+`conn_key` uniqueness; `wrap_pty_options` builds `ssh` args to a worker; primary
+path unchanged (extend `remote.rs` tests at `:315`).
+
+**Phase 2 — worker code sync (§2).**
+Push-only fan-out (bundle → ship → `fetch`+`reset --hard`, no clean),
+`worker_sync.json`, commit-watch + connect + manual triggers, "last synced" UI.
+Rust tests (drive like `examples/lockstep_drv.rs`): a commit on the mirror reaches
+the worker's tracked tree; an untracked output file on the worker **survives** a
+sync; a worker-side code edit is overwritten; sync is never triggered
+worker→mirror.
+
+**Phase 3 — outputs + monitoring + polish.**
+On-demand **Pull outputs** with size-confirm (§4.4); per-worker monitoring (§5);
+per-worker auto-connect; per-host net_usage; stale-host-id fallback.
+
+**Live QA (hand to user — I can't launch Eldrun):** add gpu-2; connect it while the
+primary stays down; open a shell + a Claude tab on gpu-2, confirm `hostname`;
+commit on the primary and confirm the change appears on gpu-2's tracked tree;
+create an output file on gpu-2, sync again, confirm it survives; try to edit a
+tracked file on gpu-2 and confirm the next sync reverts it; confirm the primary's
+file tree / git / sync are visibly unaffected; disconnect gpu-2 and confirm only
+its panes hold.
+
+## 8. Risks / edge cases
+
+- **"Read-only" ≠ read-only filesystem.** The single most important invariant:
+  the worker sync must **never `git clean`** and never touch untracked paths, or it
+  eats experiment output. Enforced in §2 step 4 and tested in Phase 2.
+- **Output pull-back is the only worker→local byte path** and is user-initiated +
+  size-confirmed (§4.4) — never a background pass.
+- **Uncommitted local edits don't reach workers.** Same commit-gated model as the
+  primary (a worker gets code on commit, not on save). Document, as CLAUDE.md does
+  for the primary.
+- **Tab location naming a deleted worker** → fall back to primary (§4.1).
+- **VPN**: a worker sharing the primary's config is free (refcount); a worker
+  needing a *different* `redirect-gateway` config is a machine-wide routing
+  conflict the existing `VpnIndicator` already surfaces — note it in the add-host
+  UI, no new mechanism.
+- **Agent resume on a worker** works (spec-agnostic `ssh -tt` + `ELDRUN_TAB_UID`),
+  but moving a tab worker→primary respawns it on the primary as a fresh
+  conversation — the same caveat the current local↔remote switch has. Document.
+- **First-worker connectivity assumption**: Eldrun couriers code mirror→worker, so
+  it needs SSH to the worker (it already does, to run tabs) but **no** primary↔worker
+  path — deliberately, since workers are often on isolated cluster networks.
+
+---
+
+## 8b. Shared-filesystem workers (added 2026-07-19, now the default)
+
+Many clusters give the login node (primary) and every compute node a **shared
+filesystem** — the same project folder is visible on all of them at one path. Copying
+the code to each worker and one-way syncing it is then pure waste: the worker already
+*is* looking at the primary's tree. So a worker gains a `shared_fs` flag
+(`schema::project::ComputeHost.shared_fs`), and **a newly added machine defaults to it**
+(the schema default stays `false` for back-compat — existing synced workers are
+untouched on load — but the "Add machine" form ticks it on; "Sync a copy" is the opt-out
+into the §2 synced-copy worker, for hosts that don't share storage).
+
+- **What it does.** Nothing is copied and **git never runs on the host**. A tab on a
+  shared-fs worker just `cd`s into `spec.remote_path` (the project folder as visible on
+  that machine) and runs there — the process executes *on the worker*, reading/writing the
+  shared tree. `wrap_pty_options` already resolves the spec by host id and uses
+  `spec.remote_path`, so tab spawn needed **no** change.
+- **The load-bearing safety invariant.** The §2 push (`git init` + `fetch` +
+  `reset --hard`) must **never** fire on a shared-fs host — that path IS the primary's
+  real working tree, and a `reset --hard` there would clobber the primary's state. Three
+  guards enforce it: (1) `remote_connect` skips `on_worker_connect` for a shared host;
+  (2) `fan_out` filters through the pure `wants_code_fanout(host) = !shared_fs && sync_code`
+  (unit-tested); (3) `sync_worker` itself early-returns a no-op skip for a shared host, so
+  even a stray manual `worker_sync_now` is harmless.
+- **No Sync / Pull outputs.** A shared-fs worker's outputs land in the primary's own
+  folder (moved by the primary's ordinary sync), so "Sync code now" / "Pull outputs" /
+  "Auto-sync code" are hidden for it in `RemoteMachinesWindow`; the row carries a "Shared
+  filesystem" badge instead of a "last synced" line.
+
+## 9. Implementation status (2026-07-19)
+
+**Phases 1 & 2 fully implemented; Phase 3 implemented except per-worker monitoring.**
+All `cargo test` (853) + `vitest` (1703) green; live QA (§7) still owed (I can't launch
+Eldrun).
+
+**Backend.** `schema::project::ComputeHost` + `Project.compute_hosts` (§1.1);
+`projects.rs` mirror into `extra["compute_hosts"]` + CRUD `add_/remove_/patch_compute_host`
+(§1.2). `services::remote` re-keyed to a composite `conn_key(project, host)` with
+`PRIMARY_HOST` wrappers keeping every file/git/sync caller unchanged; `connect_host`/
+`disconnect_host`/`disconnect_project`/`is_connected_host`/`pooled_sftp_host`/
+`connected_targets`/`remote_target_for_host`/`compute_hosts_for` (§3.2). `commands::remote`
+threads `host_id` (default primary) through `remote_connect`/`remote_disconnect`, adds
+`remote_disconnect_all_hosts`, `remote_connected_targets`, `worker_sync_now`,
+`worker_outputs_preview`, `worker_pull_outputs` (§3.3). `PtyOptions.remote_host_id` +
+`wrap_pty_options` resolve-by-host (§4.2). `services::worker_sync` = the whole §2 push-only
+fan-out + §4.4 output pull; wired into `git_peer::start`/`poll_loop` so a mirror commit
+fans out to connected workers.
+
+**Frontend.** `TabLocation` gains `` `host:${string}` `` + `remoteHostIdOf` (§4.1);
+`remoteStatus` split primary(`byProject`)/workers(`byHost`) with `sshOf`/`vpnOf` (§4.3);
+`TerminalView.remoteHostId` from `TabPane` (§4.2); per-host pill lamps (`RemoteConnMenu`) +
+`connectDialog.hostId` + `useRemoteReconnect(project, host?)` + `RemoteConnectDialog`
+host-aware (§4.3); TabBar locality badge → Local/Primary/worker **menu** (§4.5);
+`CenterPanel` hold gate per-host (§4.5); `RemoteMachinesWindow` = the §4.4 pill section
+(add machine, connect, sync-now, pull-outputs w/ size-confirm, toggles); deactivation
+disconnects all hosts; `AppShell` lamp-reconcile uses `remote_connected_targets`.
+
+**Deferred (documented).** Per-worker **monitoring** host selector (§5) — `SystemMonitorPane`
+is mid-refactor by another working copy (pre-existing tsc errors), so not touched; the
+backend monitor commands still take only `project_id`. Per-`(project,host)` **net_usage**
+buckets (§3.4) — `connected_ids` sums a project's hosts under one bucket as the plan
+allows. Per-worker **auto-connect on launch** — the toggle persists via `patch_compute_host`,
+but `autoConnectRemote` (`stores/projects`) still probes the primary only.
diff --git a/docs/tmux_remote_plan.md b/docs/tmux_remote_plan.md
new file mode 100644
index 0000000..0034f85
--- /dev/null
+++ b/docs/tmux_remote_plan.md
@@ -0,0 +1,317 @@
+# Persistent Remote Sessions (tmux) — Implementation Plan (TODO #85)
+
+Status: **implemented** (Phases 0–4; live-QA on a real host still pending — Done ≠ Tested).
+
+**What shipped vs. this plan.** Two deliberate changes from the design below:
+
+1. **Default ON**, not opt-in behind the experimental flag (per the user).
+   `RemoteSpec.persist_sessions` means "default on unless explicitly `false`", the
+   pill's "Persistent sessions (tmux)" item is the opt-**out**, and the per-spawn
+   decision is `PtyOptions.tmux_session` (set only for remote `shell` tabs — Python
+   runs open a shell tab — never agents).
+
+2. **The session name is a frontend-minted uuid persisted on the tab**
+   (`TabEntry.tmuxSession`, `newTmuxSessionName`), *not* derived from the tab id
+   (§Data model option 1). The reason: `loadFromLayout` regenerates a tab's key on
+   every restart, so a name derived from the PTY id (`<scope>:<tab-key>`) would
+   change on relaunch and **fork a second session instead of reattaching** — the
+   opposite of the goal. `ELDRUN_TAB_UID` (the plan's suggested source) only exists
+   for agent tabs anyway. Minting once and persisting it makes the name stable
+   across a relaunch, which is what makes restart-reattach work.
+
+Key symbols: backend `ssh_exec::{TmuxWrap, tmux_wrap_exec,
+tmux_kill_session_script, tmux_rename_session_script, tmux_ls_script,
+parse_tmux_ls, TmuxSession, valid_tmux_session_name}` + `services::tmux_local` +
+`PtyOptions.{tmux_session,tmux_attach}`, commands
+`remote_tmux_{list,kill,rename}`/`local_tmux_{list,kill,rename}`/`set_project_persist_sessions`;
+frontend `lib/tmuxSession.ts` (mint + gate), `lib/closeRemoteTab.ts`, the persisted
+`TabEntry.tmuxSession`/`tmuxAttach`, and the Sessions view in `ProjectFilesView.tsx`.
+
+### Post-v1 additions (this pass)
+
+- **Local persistence (Unix)** — the plan below scoped tmux to *remote* tabs, calling
+  local "impossible on Windows and low-value elsewhere." Shipped anyway (per the
+  user): a **local** project's shell/script tab is wrapped in a tmux session on the
+  machine so a run survives an **Eldrun crash** and reattaches on restart. Works
+  because the tmux server is a daemon the PTY-held client is separate from; **Unix
+  only** (no tmux on Windows → `services::tmux_local` no-ops), **default ON** via
+  `settings.persist_local_sessions`. The wrap is an argv rewrite in `pty_spawn`
+  (not a `$SHELL -c` string like the remote path), applied only when ssh/docker
+  wrapping did **not** fire.
+- **Worker-host sessions** — the Sessions view now aggregates across the primary
+  **and every connected worker** (`docs/multi_host_remote_plan.md`), each row
+  host-tagged; attach/kill/rename act on the row's host. The wrap itself was already
+  host-agnostic (it runs per-host via `remote_host_id`), so only the view changed.
+- **Rename** — per-row Rename in the Sessions view (`remote_tmux_rename` /
+  `local_tmux_rename`, gated on `valid_tmux_session_name`) also updates the owning
+  tab's persisted `tmuxSession`/`tmuxAttach` so it reattaches to the new name after a
+  restart (the live client stays attached — tmux rename never drops it).
+- **Resumable command tabs** — largely already satisfied: a script/command runs in a
+  persistent shell tab (the `lib/pythonRun.ts` pattern — a login shell that outlives
+  the command), so it restores and reattaches to the *completed* run rather than
+  re-running. For a directly-`cmd`'d local command tab, `local_tmux_args` keeps a
+  login shell **after** the command for the same guarantee.
+
+## The problem, in one sentence
+
+A remote shell or script is a child of the `ssh -tt` channel, so it dies —
+silently, with `SIGHUP` — the instant that channel breaks: a network blip, a
+laptop sleep, a VPN drop, or Eldrun quitting. For a long Python training run
+that is the worst possible outcome, and it is exactly the case Eldrun cannot
+survive today.
+
+The fix is to run the remote shell/script **inside a tmux server on the host**,
+decoupled from the SSH channel. The SSH client becomes a disposable viewer; the
+work lives on the server. Reconnect — or relaunch Eldrun — and the same command
+reattaches to the still-running session, output and all.
+
+## Why this is server-side, and what that means for Windows/macOS
+
+tmux runs on the **remote host** (a Linux box — essentially always, for a
+compute/experiment host). The local machine only ever runs the `ssh` client. So
+a Windows or macOS Eldrun connecting to that host gets **identical**
+persistence: the feature is entirely server-side and is *not* obsolete on those
+platforms — it is the whole point that the run is decoupled from your laptop's
+OS, network, and Eldrun process. The only local-OS wrinkle is cosmetic and
+already handled elsewhere (Windows skips ControlMaster, `ssh_exec.rs:187`); the
+tmux path is untouched by it.
+
+**Scope is therefore remote projects only.** Local (non-remote) tabs are a
+weaker, harder story — the process is Eldrun's own child, not decoupled by SSH,
+so surviving an Eldrun restart would need tmux/dtach *locally* too, which is
+impossible on Windows and low-value elsewhere. Out of scope for this item.
+
+## The one seam
+
+Every remote tab's command is built by **`remote_command`** (`ssh_exec.rs:117`),
+called from **`wrap_pty_options`** (`ssh_exec.rs:500`). Today it emits:
+
+```
+cd <remote_path> && export K=<v> … && exec "${SHELL:-/bin/bash}" -l          # shell tab
+cd <remote_path> && export K=<v> … && exec "${SHELL:-/bin/bash}" -lc '<cmd>' # command/agent tab
+```
+
+The tmux wrap replaces only the final `exec …` with a tmux launch. Everything
+before it — the `cd`, the sorted env exports, the `remote_agents` bootstrap
+prelude (`ssh_exec.rs:159`) — is preserved verbatim, nested *inside* tmux:
+
+```
+cd <remote_path> && export … && exec tmux new-session -A -D -s eldrun-<name> -- \
+    "${SHELL:-/bin/bash}" -l                          # shell tab
+cd <remote_path> && export … && exec tmux new-session -A -D -s eldrun-<name> -- \
+    "${SHELL:-/bin/bash}" -lc '<cmd>'                 # command/agent tab
+```
+
+Flags, each load-bearing:
+
+- **`-A`** — attach if the session exists, create it if not. This single command
+  is *both* "start" and "resume": on first spawn it creates and runs the target;
+  on a reconnect/relaunch it reattaches and the target arg is ignored (the
+  process is already running). This is what makes restart-resume free.
+- **`-D`** — on attach, detach any *other* client first. Stops a stale ssh
+  client (ControlPersist can outlive a reload) or a second Eldrun window from
+  mirror-sharing the pane and fighting over its size.
+- **`-s eldrun-<name>`** — a **stable per-tab session name**. The one piece of
+  new persisted state (see Data model). If it is not stable across restarts,
+  reattach silently creates a *second* session instead of resuming.
+
+`ssh_pty_args` (`ssh_exec.rs:176`) is unchanged: it still forces `-tt`, and it
+deliberately omits `BatchMode`, so a first-run interactive prompt (host key,
+passphrase) still works through the terminal even with tmux in the middle.
+
+## Data model — one field, no migration
+
+A per-tab boolean plus a derived session name. Two options:
+
+1. **Reuse the existing tab identity.** The frontend already mints
+   `ELDRUN_TAB_UID` (persisted, and already exported to the host). Derive
+   `eldrun-<uid>` in `wrap_pty_options` — no schema change at all, and the name
+   is automatically stable across restarts because the uid is.
+2. **Explicit `tmuxSession` on the tab**, mirrored like `sessionId`
+   (`tabs.ts:372`), if we ever want a human-named session decoupled from the
+   tab. Not needed for v1.
+
+A tab that **attaches** to an arbitrary named session (from the Sessions view,
+below) carries that name explicitly — `tmuxAttach: Option<String>` on the tab —
+so `wrap_pty_options` builds an attach rather than a fresh spawn, and the tab
+restores/reattaches to *that* session across a restart. This is the one case
+where the session name is not derived from the tab uid (the session predates the
+tab), so it must be persisted on the tab.
+
+Go with (1) for tabs Eldrun starts. The opt-in is a per-project toggle
+(`RemoteSpec` gains
+`persist_sessions: Option<bool>`, mirrored into `projects.json` `extra` and the
+`types/index.ts` mirror, defaulting to unset ⇒ off) so it upgrades every
+existing remote project in place with no migration — same pattern as the sandbox
+toggle. Gate the whole thing behind the experimental flag
+(`lib/experimental.ts`) until live-QA'd.
+
+## Restart-resume — most of the machinery already exists
+
+The reattach path is already there; tmux just makes it *mean something* for
+remote work.
+
+- A remote **shell** tab is *already* restorable — `isRestorableKind`
+  (`tabs.ts:3416`) is true for shell/files kinds, so on relaunch Eldrun already
+  respawns its ssh command. Today that respawn gets a *fresh* shell (the prior
+  run is gone). With tmux, the respawned command is
+  `tmux new-session -A -s eldrun-<uid>` → it **reattaches** to the session that
+  kept running. No new restore code for shells — the wrap alone delivers it.
+- **Scripts** run *inside* a shell/command tab (this is already true —
+  `lib/pythonRun.ts` opens a terminal tab and types the command, precisely so it
+  inherits tab locality). So a persistent shell tab carries a running Python
+  process through a restart for free. A dedicated resumable *command* tab (like
+  `RESUMABLE_AGENTS`, `tabs.ts:3452`) is a possible follow-up but not required
+  for v1.
+
+## Kill vs. detach — the one genuinely new decision
+
+Today closing a tab reaps the whole remote subtree (backend `CLAUDE.md`,
+`terminal/mod.rs` `kill`). With tmux, closing the ssh client must **not** kill
+the session — that would defeat the entire feature. Split the intent:
+
+- **Close tab** (an explicit user action) → kill the session:
+  `tmux kill-session -t eldrun-<uid>`, fired as a one-shot over the pooled
+  ControlMaster via **`run_remote_script`** (`ssh_exec.rs:300`) — the transport
+  already exists, no new plumbing. The local ssh child is reaped as today.
+- **Eldrun quit / disconnect / connection drop** → leave the session alive on
+  the host. This is the whole point.
+
+The seam: the tab-close path (`kill`) needs to know whether the tab was a
+persistent remote tab, and if so run the kill-session one-shot *before* reaping
+the ssh child. App-exit (`kill_all`) and remote-disconnect must **not**.
+
+## tmux presence & fallback
+
+Detect and degrade gracefully, reusing the `remote_agents.rs::bootstrap_prelude`
+pattern (`command -v tmux >/dev/null || …`):
+
+- **Present** → wrap as above.
+- **Absent** → run the plain `exec` (today's behavior) and surface a one-line
+  notice that persistence is off because tmux is missing. Note tmux is *usually*
+  preinstalled on compute/HPC hosts, but userspace-installing it (no sudo) is
+  harder than an npm-installable agent CLI, so the realistic fallback is
+  "run without persistence + tell the user," **not** auto-install.
+
+## UX cost — the honest trade
+
+tmux intercepts scrollback (its own copy-mode) and draws a status bar, which can
+make an xterm.js pane feel less native. Mitigations, shipped as session options:
+
+- `set -g status off` — reclaim the status line; Eldrun already provides tabs and
+  layout, so tmux's status bar is redundant chrome.
+- `set -g mouse on` — wheel scrolls tmux history so scrollback still feels normal.
+
+**Alternative worth weighing: `dtach`/`abduco`.** These give pure detach/attach
+with *no* status bar, no windows, and no scrollback interception — a strictly
+more transparent fit for Eldrun's model, since we already own tabs and layout.
+The trade is availability: tmux is far more likely to be preinstalled on a
+random compute host. Recommendation: **build on tmux** (what the user asked for,
+and the common denominator), but keep the wrap behind a tiny "session backend"
+indirection so a `dtach` backend can be added later without touching the seam.
+
+## Composition with the other axes
+
+- **Docker containers** are mutually exclusive with ssh wrapping
+  (`terminal.rs:116`) — a container project is local. No interaction.
+- **Worker hosts** (multi-host) each get their own pool entry and could each run
+  their own tmux session (`eldrun-<uid>` is already unique per tab, and tab
+  locality is `host:<id>`); the wrap is host-agnostic. v1 can apply it to the
+  primary only and extend to workers trivially later.
+- **Agent tabs** — the `remote_agents` bootstrap prelude nests *inside* the tmux
+  target command untouched. A remote Claude/Codex tab could run inside tmux too,
+  but agent *conversation* resume is already handled by `RESUMABLE_AGENTS`; the
+  tmux value there is narrower (surviving a mid-response disconnect). v1 can
+  scope tmux to shell/command tabs and leave agent tabs as-is.
+
+## Surfacing "your run is still alive" — the Sessions view
+
+Because a persistent session outlives the tab that started it, the host can hold
+sessions no open tab points at: a run from a crashed/relaunched Eldrun, a
+different machine, or one the user started by hand in a plain ssh terminal. Those
+must be **discoverable and reattachable**, or the persistence is a trap. This is
+the primary UI surface for the feature.
+
+**A "Sessions" view in the file viewer**, alongside Files / Git / Search / Apps /
+Orange (`ProjectFilesView.tsx:33,607`). It is the exact analog of the **Orange
+(diverged)** view (`ProjectFilesView.tsx:619-632`): a toolbar toggle gated on
+`project?.remote && projectId`, badged with a live count, that swaps the tree for
+a backend-fed list. Because `ProjectFilesView` renders *twice* (RightPanel and
+the Files (Project) tab), the view — and its click-to-open — appears in **both**
+the right-side files panel and the Files tab with no extra wiring, exactly as the
+Orange view does.
+
+- **Toolbar button:** `☰ N` (session count), remote-only, next to the `±` orange
+  toggle. Toggles `view === "sessions"`.
+- **List rows:** one per host tmux session. Each row shows the session **name**,
+  window/pane count, created/idle time, and an **attached** dot (another client
+  is on it right now). Rows Eldrun created (`eldrun-<uid>` prefix) are labelled
+  with the originating project/tab when known; foreign sessions show their raw
+  name — both are first-class.
+- **Click a row → open the running session.** Opens a shell tab whose remote
+  command is an **attach**, not a fresh shell: `tmux new-session -A -D -s <name>`
+  with no target command (idempotent: attaches the existing session; `-D`
+  detaches any other client so keystrokes aren't mirrored). The tab carries the
+  session name so it restores and reattaches like any persistent tab. This is why
+  attach must accept an **arbitrary** name, not just `eldrun-<uid>` — a
+  hand-started `train` session opens the same way.
+- **Per-row actions:** **Kill** (`tmux kill-session -t <name>`, confirmed) and,
+  for an already-open session, "reveal the tab that owns it". Both ride the same
+  one-shot transport.
+
+**Backend:** one new pure-ish command `remote_tmux_list(project_id, host_id)` →
+`tmux ls -F '#{session_name}\t#{session_windows}\t#{session_created}\t#{session_attached}'`
+over `run_remote_script` (`ssh_exec.rs:300`), parsed into a `Vec<TmuxSession>`
+(empty, not an error, when tmux is absent or no server is running — `tmux ls`
+exits non-zero with "no server running", which the parser treats as zero
+sessions). Polled on the same cadence as the orange/status poll, so the count
+badge stays live. The attach path reuses the existing `wrap_pty_options` seam —
+the tab just declares "attach to session `<name>`" instead of "run `<cmd>`".
+
+**Close confirm.** On **close** of a persistent remote tab, confirm ("This will
+terminate the remote session `eldrun-<uid>` and any process running in it") — the
+mirror of the container toggle's non-resumable-conversation confirm, and in the
+spirit of `LocalLossDialog`: the tab is a window onto a live process, and closing
+it (vs. detaching) is destructive.
+
+## Phases
+
+- **Phase 0 — wrap + flag.** `remote_command` grows a `persist: bool` param;
+  `wrap_pty_options` passes the project's `persist_sessions` (gated on the
+  experimental flag). Pure, unit-testable: assert the exact tmux argv for
+  shell/command tabs, and that env/`cd`/bootstrap-prelude nesting is unchanged
+  when off. **No runtime behavior change until the flag/toggle is on.**
+- **Phase 1 — kill semantics.** Thread "is a persistent remote tab" into the
+  `kill` path; fire `tmux kill-session` via `run_remote_script` on explicit
+  close only. App-exit and disconnect leave sessions alive. Unit-test the
+  branch selection (kill-session fired vs. not) without a real host.
+- **Phase 2 — presence + transparency.** tmux-detect fallback prelude; ship the
+  `status off` / `mouse on` options; the missing-tmux notice.
+- **Phase 3 — UI: the toggle + close-confirm.** The per-project persistence
+  toggle in the remote menu; the close-confirm on a persistent tab.
+- **Phase 4 — the Sessions view.** `remote_tmux_list` command + `TmuxSession`
+  type; the `☰ N` toolbar toggle and list view in `ProjectFilesView` (mirrors
+  the Orange view); click-to-attach opening a shell tab via the attach seam;
+  per-row kill/reveal. This is the item's headline surface, not a stretch goal.
+- **Phase 5 (deferred).** `dtach` backend behind the session-backend
+  indirection; worker-host sessions; resumable remote *command* tabs.
+
+## Tests
+
+- **Automated (mine):** argv builders in `ssh_exec.rs` (tmux wrap on/off, both
+  tab kinds, nesting preserved, session name stable from uid; **attach** argv for
+  an arbitrary session name); `tmux ls` output parsing (normal list, "no server
+  running" → zero, tmux-absent → zero); kill-path branch selection; frontend
+  toggle/persistence (tsc + a `tabs` restore test proving both a persistent
+  remote shell tab and an *attach* tab restore to the same session name).
+- **Manual (the user's — Done ≠ Tested; I can't launch Eldrun or reach a host):**
+  1. Remote project, toggle on, start `python -u long_run.py` in a shell tab;
+     kill the network / sleep the laptop → reconnect → same output continues.
+  2. Quit Eldrun mid-run → relaunch → the shell tab reattaches, run still going.
+  3. **Explicitly close** the tab → confirm the session is gone on the host
+     (`tmux ls` shows no `eldrun-<uid>`).
+  4. Host without tmux → tab still works, notice shown, no persistence.
+  5. Two Eldrun windows / a stale client → `-D` detaches the other, no mirror.
+  6. **Sessions view:** start a `tmux` session by hand on the host in a plain
+     terminal → it appears in the `☰` list → click it → a tab attaches and shows
+     the live process → per-row Kill removes it and it drops from the list.
diff --git a/index.html b/index.html
index 2296a86..e3afdc4 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,21 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Eldrun</title>
+    <script>
+      // Apply the theme BEFORE first paint. Settings arrive over an async
+      // Tauri invoke, so without this the page renders ~1s with the CSS
+      // :root default (fancy_dark) and then snaps to the real theme.
+      // stores/settings.ts keeps this cache in sync on every theme change;
+      // fancy_dark mirrors the backend default (schema::settings).
+      try {
+        document.documentElement.setAttribute(
+          "data-theme",
+          localStorage.getItem("eldrun-theme") || "fancy_dark",
+        );
+      } catch (_) {
+        document.documentElement.setAttribute("data-theme", "fancy_dark");
+      }
+    </script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/package-lock.json b/package-lock.json
index aea5f33..cb8bd9f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,17 +1,19 @@
 {
   "name": "eldrun",
-  "version": "0.1.21",
+  "version": "0.1.26",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "eldrun",
-      "version": "0.1.21",
+      "version": "0.1.26",
       "license": "MIT OR Apache-2.0",
       "dependencies": {
         "@crabnebula/tauri-plugin-drag": "^2.1.0",
         "@dnd-kit/core": "^6",
         "@dnd-kit/sortable": "^8",
+        "@fontsource-variable/inter": "^5.2.8",
+        "@fontsource-variable/jetbrains-mono": "^5.2.8",
         "@tauri-apps/api": "^2",
         "@tauri-apps/plugin-dialog": "^2.7.1",
         "@tauri-apps/plugin-notification": "^2.3.3",
@@ -903,6 +905,23 @@
         "node": ">=12"
       }
     },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.1.tgz",
+      "integrity": "sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@esbuild/netbsd-x64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
@@ -919,6 +938,23 @@
         "node": ">=12"
       }
     },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.1.tgz",
+      "integrity": "sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@esbuild/openbsd-x64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
@@ -935,6 +971,23 @@
         "node": ">=12"
       }
     },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.1.tgz",
+      "integrity": "sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@esbuild/sunos-x64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
@@ -1016,6 +1069,22 @@
         }
       }
     },
+    "node_modules/@fontsource-variable/inter": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.2.8.tgz",
+      "integrity": "sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource-variable/jetbrains-mono": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz",
+      "integrity": "sha512-WBA9elru6Jdp5df2mES55wuOO0WIrn3kpXnI4+W2ek5u3ZgLS9XS4gmIlcQhiZOWEKl95meYdvK7xI+ETLCq/Q==",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@iconify/types": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
@@ -5614,6 +5683,397 @@
         }
       }
     },
+    "node_modules/vitest/node_modules/@esbuild/aix-ppc64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.1.tgz",
+      "integrity": "sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/android-arm": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.1.tgz",
+      "integrity": "sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/android-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.1.tgz",
+      "integrity": "sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/android-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.1.tgz",
+      "integrity": "sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/darwin-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.1.tgz",
+      "integrity": "sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/darwin-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.1.tgz",
+      "integrity": "sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.1.tgz",
+      "integrity": "sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/freebsd-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.1.tgz",
+      "integrity": "sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/linux-arm": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.1.tgz",
+      "integrity": "sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/linux-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.1.tgz",
+      "integrity": "sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/linux-ia32": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.1.tgz",
+      "integrity": "sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/linux-loong64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.1.tgz",
+      "integrity": "sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/linux-mips64el": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.1.tgz",
+      "integrity": "sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/linux-ppc64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.1.tgz",
+      "integrity": "sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/linux-riscv64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.1.tgz",
+      "integrity": "sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/linux-s390x": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.1.tgz",
+      "integrity": "sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/linux-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.1.tgz",
+      "integrity": "sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/netbsd-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.1.tgz",
+      "integrity": "sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/openbsd-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.1.tgz",
+      "integrity": "sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/sunos-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.1.tgz",
+      "integrity": "sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/win32-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.1.tgz",
+      "integrity": "sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/win32-ia32": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.1.tgz",
+      "integrity": "sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vitest/node_modules/@esbuild/win32-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.1.tgz",
+      "integrity": "sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/vitest/node_modules/@vitest/mocker": {
       "version": "4.1.8",
       "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.8.tgz",
@@ -5640,6 +6100,49 @@
         }
       }
     },
+    "node_modules/vitest/node_modules/esbuild": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.1.tgz",
+      "integrity": "sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.28.1",
+        "@esbuild/android-arm": "0.28.1",
+        "@esbuild/android-arm64": "0.28.1",
+        "@esbuild/android-x64": "0.28.1",
+        "@esbuild/darwin-arm64": "0.28.1",
+        "@esbuild/darwin-x64": "0.28.1",
+        "@esbuild/freebsd-arm64": "0.28.1",
+        "@esbuild/freebsd-x64": "0.28.1",
+        "@esbuild/linux-arm": "0.28.1",
+        "@esbuild/linux-arm64": "0.28.1",
+        "@esbuild/linux-ia32": "0.28.1",
+        "@esbuild/linux-loong64": "0.28.1",
+        "@esbuild/linux-mips64el": "0.28.1",
+        "@esbuild/linux-ppc64": "0.28.1",
+        "@esbuild/linux-riscv64": "0.28.1",
+        "@esbuild/linux-s390x": "0.28.1",
+        "@esbuild/linux-x64": "0.28.1",
+        "@esbuild/netbsd-arm64": "0.28.1",
+        "@esbuild/netbsd-x64": "0.28.1",
+        "@esbuild/openbsd-arm64": "0.28.1",
+        "@esbuild/openbsd-x64": "0.28.1",
+        "@esbuild/openharmony-arm64": "0.28.1",
+        "@esbuild/sunos-x64": "0.28.1",
+        "@esbuild/win32-arm64": "0.28.1",
+        "@esbuild/win32-ia32": "0.28.1",
+        "@esbuild/win32-x64": "0.28.1"
+      }
+    },
     "node_modules/vitest/node_modules/picomatch": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
diff --git a/package.json b/package.json
index 26b4f98..a3727b3 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "eldrun",
   "private": true,
-  "version": "0.1.22",
+  "version": "0.1.32",
   "license": "MIT OR Apache-2.0",
   "type": "module",
   "scripts": {
@@ -21,6 +21,8 @@
     "@crabnebula/tauri-plugin-drag": "^2.1.0",
     "@dnd-kit/core": "^6",
     "@dnd-kit/sortable": "^8",
+    "@fontsource-variable/inter": "^5.2.8",
+    "@fontsource-variable/jetbrains-mono": "^5.2.8",
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-dialog": "^2.7.1",
     "@tauri-apps/plugin-notification": "^2.3.3",
diff --git a/src-tauri/CLAUDE.md b/src-tauri/CLAUDE.md
index dce9949..6c2bae2 100644
--- a/src-tauri/CLAUDE.md
+++ b/src-tauri/CLAUDE.md
@@ -12,6 +12,7 @@ workflow); see `src/CLAUDE.md` for the frontend file map.
 | `storage.rs` | JSON persistence helpers (read/write state files). |
 | `paths.rs` | Canonical Eldrun directory paths. |
 | `sysstat.rs` | Per-process CPU sampling via `/proc` (`descendant_pids`). |
+| `gpustat.rs` | Whole-**device** GPU memory (the header row, the monitor pane, the model menu's headroom line) — Ollama's `/api/ps` figure is now one line of its breakdown, not the reading. Reports a GPU's **two** pools separately because on an APU only one is real: the dedicated VRAM carve-out (~512 MB — the framebuffer, permanently ~full, so it alone says nothing) and the shared pool mapped out of system RAM (amdgpu's GTT, where a model actually lands); callers sum them, and on a discrete card the shared half is 0 so the sum collapses to plain VRAM. Sources: **DRM sysfs** (`mem_info_*` + `gpu_busy_percent` — no tool, no root) and **`nvidia-smi`** (the only portable NVIDIA read; a process spawn, so its *absence* is remembered rather than re-paid every poll). A card is only reported when it states a `vram_total` — Intel's `i915` exposes none, and a zero is not a measurement. One ~1 s cache serves all three surfaces. Each `GpuSample` also carries the card's **sensors** — temperature, power (draw + cap), core/mem clocks, fan %, PCIe link, driver version — read from the *same* cheap sysfs (a card's `hwmon` subdir + `pp_dpm_*`/`current_link_*`) / `nvidia-smi` pass, so every surface gets them free; each is `None` when the driver won't say (never a fake zero). **Per-process** GPU memory is deliberately separate (`process_snapshot` → `gpu_process_snapshot`, monitor pane only, *not* cached into the shared snapshot): a heavier read (a `/proc` `fdinfo` walk deduped by `drm-client-id` for amdgpu, an `nvidia-smi --query-compute-apps` spawn) the always-visible header must not pay for. A **remote** project samples its host's GPUs too: `sysstat::REMOTE_SNAPSHOT_SCRIPT` ships the host's DRM sysfs files (`AMD\t…` lines) and raw `nvidia-smi` CSV (`NVSMI`/`NVPROC`) over the one SSH round-trip, and `parse_remote_snapshot` runs them through these *same* `parse_drm_card`/`parse_nvidia_smi`/`parse_nvidia_apps` parsers — so a host GPU reads field-for-field like a local one. Remote per-process is NVIDIA-only (the AMD `fdinfo` walk is too heavy to run per remote poll). |
 
 **Commands (`commands/`)** — Tauri command handlers exposed to the frontend.
 
@@ -22,12 +23,12 @@ workflow); see `src/CLAUDE.md` for the frontend file map.
 | `fs_watch.rs` | Filesystem watch start/stop + change events. |
 | `git.rs` | Git status/history/commit/push. |
 | `git_publish.rs` | Publish a project's repo to GitHub (`gh`) or GitLab (`glab`). |
-| `terminal.rs` | Terminal/PTY command surface (delegates to `terminal/mod.rs`). |
+| `terminal.rs` | Terminal/PTY command surface (delegates to `terminal/mod.rs`). Also the **local** tmux-session commands (TODO #85): `local_tmux_{list,kill,rename}`, and the `pty_spawn` local-tmux wrap (`services::tmux_local`). |
 | `apps.rs` | App launching, `run_script_detached`, `open_file`, external window tracking. |
 | `default_apps.rs` | Per-file-type default-app mapping. |
 | `downloads.rs` | Per-project download routing. |
-| `ssh.rs` | SSH commands for remote projects (`ssh_connect`, `ssh_default_dir`, `ssh_list_dir`, `ssh_tooling_status`). |
-| `remote.rs` | Pooled SSH/SFTP connection lifecycle (`remote_connect`/`remote_disconnect`) for the active remote project. |
+| `ssh.rs` | SSH commands for remote projects (`ssh_connect`, `ssh_default_dir`, `ssh_list_dir`, `ssh_tooling_status`). Also the **active-disconnect** pair (explicit-click only, never on relaunch): `remote_kill_all_jobs` (`tmux kill-server` on a host — ends *every* running session/job, best-effort, rides a live master or authenticates ad-hoc like `global_machine_monitor_snapshot`) and `ssh_close_master` (`ssh -O exit` on the shared `cm-%C` socket, for a project-free global machine that pools nothing; a project host tears its pool down via `remote_disconnect` instead). |
+| `remote.rs` | Pooled SSH/SFTP connection lifecycle (`remote_connect`/`remote_disconnect`) for the active remote project. Also `remote_upload_file` (HPC wizard "Load data" step, `docs/quirky-knitting-umbrella`): streams a local file to `<remote_path>/<dest_rel>` over the pooled SFTP (`upload_file_streaming_on`), primary host, dest_rel sanitized to stay inside the root. Also the tmux-session commands (TODO #85): `remote_tmux_list` (Sessions view, `tmux ls` → `Vec<TmuxSession>`; called per-host so the view aggregates every connected worker), `remote_tmux_kill` (explicit-close / per-row kill), and `remote_tmux_rename` (per-row rename), all over the pooled ControlMaster. |
 | `openvpn.rs` | OpenVPN tunnel connect/store-config commands. |
 | `ollama.rs` | Ollama model list/pull/delete + local autocomplete. |
 | `tex.rs` | TeX compile + SyncTeX (shell-escape defense). |
@@ -39,6 +40,8 @@ workflow); see `src/CLAUDE.md` for the frontend file map.
 | `workspace.rs` | KDE/X11 workspace switch commands. |
 | `settings.rs` | Settings read/update. |
 | `project_runtime.rs` | Project-switch runtime command wrapper (off-UI-thread). |
+| `slurm.rs` | **SLURM run/watch core for HPC projects** (`docs/quirky-knitting-umbrella` plan): `slurm_available`/`slurm_submit`/`slurm_queue`/`slurm_job_out`/`slurm_cancel`. Mirrors `python.rs`'s dispatch — resolves `project_dir` (+ optional `host_id`, primary default) to a remote target and runs a POSIX-`sh` script over the pooled ControlMaster (`run_remote_script`), or a local shell for a login node that itself has SLURM. **Security**: the script is embedded verbatim, so every path is `shell_quote`d (the shared `ssh_exec` helper) and a job id is validated numeric before it touches `scontrol`/`scancel`. `slurm_submit` chains `sbatch --parsable` → `scontrol show job` in ONE round trip (the id comes from sbatch, so nothing user-controlled is interpolated) and returns the SLURM-resolved absolute out/err/work paths. Pure parsers (`parse_submit_jobid`, `parse_scontrol_paths`, `parse_squeue`, `split_script_rel` — which preserves absolute paths so the frontend can pass a file's absolute path and skip any remote-vs-local rel computation) are unit-tested. |
+| `python.rs` | Which Python the viewer's Run/Debug run (#87), and the **single** source of that precedence — the frontend asks, it never re-derives. A project's pinned `python_interpreter` always wins (and costs no probing); otherwise auto-detect ranks in-tree venv → poetry → active `VIRTUAL_ENV`/`CONDA_PREFIX` → pyenv → system. A **named conda env is offered but never auto-picked**: choosing one of N unrelated envs on the user's behalf is a guess, and a wrong one here is indistinguishable from a bug. Remote projects probe the **host** (one constant `sh` script over `run_remote_script`) — the interpreter that matters is the one on the machine the run tab runs on. |
 | `pdf_clip.rs` | In-memory transfer slot for dragged/copied PDF *pages*. Two Eldrun windows are separate WebViews with separate JS heaps, so the bytes must cross the process boundary; events carry only the token. |
 | `crash.rs` | Receives frontend renderer crash reports. |
 | `debug.rs` | Debug-mode helpers. |
@@ -48,15 +51,17 @@ workflow); see `src/CLAUDE.md` for the frontend file map.
 | File | Purpose |
 |------|---------|
 | `ssh_common.rs` | Shared SSH argv + validation helpers (`validate_arg`, `ssh_*_base_args`, `ssh_target`, `sshpass_available`). |
-| `remote.rs` | Explicit remoteness resolver (`remote_target_for`/`_for_dir`) + pooled `Sftp`/ControlMaster registry (mount-free remote). |
+| `remote.rs` | Explicit remoteness resolver (`remote_target_for`/`_for_dir`) + pooled `Sftp`/ControlMaster registry (mount-free remote). **Multi-host**: the pool is keyed by a composite `(project, host)` [`conn_key`], so a project's primary and each extra worker connect independently; the primary path is the `PRIMARY_HOST` (`"primary"`) constant and every file/git/sync caller (which *is* the primary subsystem) keeps its old single-arg signature via thin wrappers. `remote_target_for_host` / `compute_hosts_for` resolve a worker's spec from `projects.json`'s `extra["compute_hosts"]`. |
 | `sftp.rs` | Native SFTP session: list + read/write/create/delete/rename/mkdir/download (pooled `*_on` + one-shot). |
-| `ssh_exec.rs` | Remote command execution over SSH (PTY tabs, git-over-ssh, remote `mkdir`; ControlMaster). |
+| `ssh_exec.rs` | Remote command execution over SSH (PTY tabs, git-over-ssh, remote `mkdir`; ControlMaster). **Persistent sessions (tmux, TODO #85):** when `PtyOptions.tmux_session`/`tmux_attach` is set, `wrap_pty_options` nests the final `exec …` inside `tmux new-session -A -D -s <name>` (`TmuxWrap::{Session,Attach}` → `tmux_wrap_exec`), preserving the `cd`/env/agent-prelude prefix verbatim — so the run is decoupled from the disposable ssh channel and reattaches on reconnect/relaunch. `-A` = start-or-resume, `-D` = evict a stale client, `-s <name>` = the **frontend-minted, persisted** per-tab session name (a uuid — stable across a relaunch, unlike the regenerated PTY id, which is what makes reattach work). tmux-absent falls back to today's plain `exec` + a notice; `set -g status off`/`mouse on` reclaim the status line. `tmux_kill_session_script` (explicit close only), `tmux_ls_script`+`parse_tmux_ls`+`TmuxSession` (Sessions view) ride `run_remote_script`. |
 | `remote_agents.rs` | Remote agent bootstrap/resume for SSH projects. |
 | `remote_sync.rs` | Selective byte-sync core for remote projects: mirror paths, manifest, host/mirror walks, divergence + push/pull primitives. |
 | `sync_auto.rs` | Auto-sync engine on top of `remote_sync` (watcher + interval trigger, safe-direction policy). Skips the git-tracked set when lockstep owns it. |
 | `git_peer.rs` | Git lockstep: keeps the local mirror and host repo in step **semantically** (commits/refs via `git bundle`, never `.git` bytes). **Lockstep owns the git-tracked tree; byte-sync owns everything else** — the invariant that keeps the two transports from racing for the same file (#28p). One consequence worth knowing: enabling lockstep converts a **tracked** file from a continuous byte mirror to commit-gated — a saved edit no longer reaches the peer until it's committed (`docs/git_lockstep_case_matrix.md` #5/#7). |
+| `worker_sync.rs` | **Multi-host remote** (`docs/multi_host_remote_plan.md`): the push-only, code-only fan-out that keeps each extra "worker" host's tracked tree at the primary's HEAD. Reuses `git_peer`'s bundle primitives (`bundle_create_args`, `Peer`) but only the OUTBOUND half — source(mirror)→worker only, so it inherits none of lockstep's divergence/conflict/local-loss machinery. `git init`→`fetch bundle`→`reset --hard FETCH_HEAD`, **never `git clean`** (untracked experiment outputs survive by construction — the one load-bearing invariant, tested). Triggers: worker connect, a `.git` commit on the mirror (via `git_peer::poll_loop`'s watcher branch, which calls `fan_out`), and the manual `worker_sync_now`. `worker_sync.json` records each worker's `last_head` for incremental bundles. **Output pull-back** (`preview_outputs`/`pull_outputs`) is the ONE worker→local byte path — user-initiated, size-confirmed, `git ls-files --others` → per-file SFTP download into `outputs/<label>/`. **Shared-filesystem workers** (`ComputeHost.shared_fs`, the **default** for a newly added machine) get NONE of this: they see the primary's folder over a shared FS, so no copy/bundle/git ever touches them — the fan-out gate `wants_code_fanout` (`!shared_fs && sync_code`) and a defensive early skip in `sync_worker` keep git off what is the primary's real working tree (a tab just `cd`s into `spec.remote_path`). |
 | `local_loss.rs` | The record of what lockstep/sync **destroyed in the local mirror** (#28q): a per-project append-only log, written by the destructive sites in `git_peer` (`audit_local_head_move`) and `commands::sync`, raised by `LocalLossDialog`. A file, not an event — the services are `AppHandle`-free and a background pass can delete with no window listening. |
 | `openvpn.rs` | OpenVPN process lifecycle (askpass file, teardown). Two registries, both keyed by config path: headless tunnels Eldrun spawned, and *interactive* ones typed into a terminal tab — the latter armed with a `--writepid` Eldrun owns, so they are visible (`is_connected`/`active_configs`) and killable (`disconnect`/`disconnect_all`) rather than outliving the app with the machine's routing changed. Windows adds a third registry: headless connects go through the **OpenVPN Interactive Service** (named-pipe IPC, `\\.\pipe\openvpn\service`) so Eldrun stays unelevated; the direct `openvpn.exe` spawn (needs elevated Eldrun) is only the no-service fallback. |
+| `tmux_local.rs` | Persistent **local** (tmux) sessions (TODO #85): wraps a LOCAL shell/script tab's `PtyOptions.{cmd,args}` into a `tmux new-session -A -D` argv so a run survives an Eldrun **crash** (the tmux server is a daemon the PTY-held client is separate from) and reattaches on restart. **Unix only** — `tmux_available()` is `false` on Windows, making every entry point a no-op. Pure argv builders (`local_tmux_{args,kill_args,rename_args,ls_args}`); the wrap runs in `commands::terminal::pty_spawn` only when ssh/docker wrapping did NOT fire. |
 | `agent_session.rs` | Agent-session resolvers (`resolve_{claude,codex}_session`), SessionStart hook installer, live-session records, Codex hook-trust state. |
 | `codex_bind.rs` | Hook-free Codex session binding: follows `~/.codex/sessions` rollouts so Codex tabs resume even when its hook is untrusted. |
 | `sandbox.rs` | Project containers (#38): ONE session-lived, capability-dropped Docker container per toggled project (`eldrun-<id>`); every shell/agent tab `docker exec`s into it. Identical-path mount of the project dir (+ minimal agent auth/state mounts) keeps resume/git/viewers reading host bytes. Lifecycle: idempotent `up` (spec-fingerprint label detects staleness) / `down` on deactivate (skipped while tabs live) / `down_all` at exit / `sweep_orphans` at startup. Tab close TERMs the in-container process via a pidfile kill-wrapper — docker never kills an exec when its client dies. Local projects only; Windows refused at spawn. Plan: `docs/docker_projects_plan.md`. |
@@ -96,4 +101,4 @@ workflow); see `src/CLAUDE.md` for the frontend file map.
 
 | File | Purpose |
 |------|---------|
-| `mod.rs` | PTY lifecycle. (Agent-session resolution happens in `commands::terminal::pty_spawn`, before ssh/docker wrapping.) |
+| `mod.rs` | PTY lifecycle. (Agent-session resolution happens in `commands::terminal::pty_spawn`, before ssh/docker wrapping.) **Closing a tab (`kill`) — or the app (`kill_all`, wired into `RunEvent::Exit`) — reaps the child's whole process *subtree*, not just the shell leader**: `portable_pty::Child::kill()` signals only the leader, so a long-running descendant (dev server, build, training run) would otherwise be orphaned. The subtree is walked (`sysstat::descendant_pids`) *before* the leader dies (its children reparent to init once it's gone), then signalled — SIGTERM→SIGKILL-after-grace on tab close, immediate SIGKILL at exit (a delayed escalation thread would die with the process). |
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 346effe..e1c5304 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "eldrun"
-version = "0.1.22"
+version = "0.1.32"
 edition = "2021"
 license = "MIT OR Apache-2.0"
 
@@ -105,13 +105,14 @@ windows = { version = "0.61", features = [
     "Win32_System_Diagnostics_Debug",
     "Win32_System_IO",
     "Win32_System_Kernel",
-    # Unelevated OpenVPN connects through the interactive service: message-mode
-    # reads + PeekNamedPipe liveness probe on its control pipe (`services/openvpn.rs`).
-    "Win32_System_Pipes",
     # Per-process CPU/memory sampling + process-tree walk for the project resource
     # readout (the Windows analogue of Linux's `/proc` parsing in `sysstat.rs`).
     "Win32_System_Diagnostics_ToolHelp",
     "Win32_System_ProcessStatus",
+    # Named-pipe IPC with the OpenVPN Interactive Service (`PeekNamedPipe`,
+    # `SetNamedPipeHandleState`) so headless VPN connects stay unelevated
+    # (`services/openvpn.rs`).
+    "Win32_System_Pipes",
     # Whole-system monitor sample (`GetSystemTimes`, `GlobalMemoryStatusEx`,
     # `GetSystemInfo`, `GetTickCount64`) in `sysstat.rs`.
     "Win32_System_SystemInformation",
diff --git a/src-tauri/src/commands/agents.rs b/src-tauri/src/commands/agents.rs
index 23bc62c..8c6d5ac 100644
--- a/src-tauri/src/commands/agents.rs
+++ b/src-tauri/src/commands/agents.rs
@@ -236,6 +236,23 @@ pub async fn npm_is_installed() -> bool {
     crate::paths::binary_on_path("npm")
 }
 
+/// Probe arbitrary commands (user-defined custom agents, which aren't in the
+/// built-in `AGENTS` registry) for install status, returning the subset present.
+/// A bare name is looked up on `PATH`; a value containing a path separator is
+/// checked as a file path so a custom agent pointed at a full path resolves too.
+#[tauri::command]
+pub async fn probe_binaries(bins: Vec<String>) -> Vec<String> {
+    bins.into_iter()
+        .filter(|b| {
+            if b.contains('/') || b.contains('\\') {
+                std::path::Path::new(b).exists()
+            } else {
+                crate::paths::binary_on_path(b)
+            }
+        })
+        .collect()
+}
+
 /// Sync install probe for callers outside the agent registry (e.g. the local-
 /// model drivers in `commands::ollama`). Looks `bin` up in the registry first so
 /// it reuses the known user install locations; falls back to a bare PATH lookup
diff --git a/src-tauri/src/commands/apps.rs b/src-tauri/src/commands/apps.rs
index 6865c8d..d87c0ec 100644
--- a/src-tauri/src/commands/apps.rs
+++ b/src-tauri/src/commands/apps.rs
@@ -58,14 +58,38 @@ pub struct TrackedWindow {
     pub origin: String,
 }
 
+/// A detached popout's last on-screen geometry in PHYSICAL desktop px (#42).
+///
+/// Captured by the project-switch path just BEFORE it hides an inactive
+/// project's popout, and re-applied right after it re-shows it on switch-back —
+/// `hide()`/`show()` lets the WM re-place the window (typically onto the primary
+/// monitor), so switch-back must put it back explicitly or a multi-monitor
+/// popout jumps to the wrong screen. Physical px are scale-invariant for
+/// placement, so no per-monitor scale conversion is needed on re-apply.
+/// Transient (not persisted): the *restart* path restores popouts from the
+/// frontend's saved bounds instead.
+#[derive(Debug, Clone, Copy)]
+pub struct DetachedBounds {
+    pub x: i32,
+    pub y: i32,
+    pub w: u32,
+    pub h: u32,
+}
+
 #[derive(Default)]
 pub struct WindowRegistry {
     pub windows: HashMap<String, TrackedWindow>,
     /// Detached-subwindow display numbers, keyed by the window's stable label.
     /// Assigned in `detach_subwindow` (lowest free positive int) so each popout's
-    /// OS title reads "Eldrun win-N", and freed in `attach_subwindow` on
-    /// dock-back/close so numbers stay small and reuse freed slots.
+    /// OS title reads "Eldrun win-N", and freed on dock-back/close
+    /// (`attach_subwindow`) and on any other window destruction (the
+    /// `WindowEvent::Destroyed` hook in `lib.rs`) so numbers stay small and
+    /// reuse freed slots — a lone popout is always "win-1".
     pub detached_seqs: HashMap<String, u32>,
+    /// Last on-screen geometry of each detached popout, keyed by its stable label
+    /// (see [`DetachedBounds`]). Written just before a switch-away hides the
+    /// popout; read just after switch-back re-shows it, to restore its monitor.
+    pub detached_bounds: HashMap<String, DetachedBounds>,
 }
 
 pub type WindowRegistryState = Arc<Mutex<WindowRegistry>>;
@@ -618,6 +642,170 @@ pub fn drag_preview_icon() -> String {
     format!("data:image/png;base64,{b64}")
 }
 
+#[cfg(target_os = "linux")]
+thread_local! {
+    /// The in-flight GTK drag, so `cancel_file_drag` can abort it when the
+    /// cursor comes back into the window. GTK/GDK objects are not `Send`, and
+    /// every access is on the GTK main thread (sync Tauri commands and GTK
+    /// signal handlers both run there), so a thread-local is the right home.
+    static ACTIVE_DRAG: std::cell::RefCell<Option<gtk::gdk::DragContext>> =
+        const { std::cell::RefCell::new(None) };
+    /// Set by `cancel_file_drag` so the `cancel` signal it provokes is
+    /// recognised as OURS: the gesture is being handed back to the in-app drag
+    /// and is NOT over, so it must not emit `FILE_DRAG_ENDED`.
+    static CANCEL_REQUESTED: std::cell::Cell<bool> = const { std::cell::Cell::new(false) };
+}
+
+/// Emitted when a native drag reaches its true end (dropped, failed, or
+/// cancelled by the user/WM). The frontend keeps a gesture alive across the
+/// handoff, so it needs to hear the end from the OS: once GTK owns the pointer,
+/// the webview never sees the `pointerup` that would otherwise end it.
+#[cfg(target_os = "linux")]
+pub const FILE_DRAG_ENDED: &str = "eldrun:file-drag-ended";
+
+/// Start a native OS drag-out of `paths` from the calling window (Linux/GTK).
+///
+/// Replaces `tauri-plugin-drag`'s GTK path for the Ctrl-drag file export. That
+/// path LOOKS right (OS drag icon, drop animation) but delivers an empty
+/// payload to external targets: it disconnects its `drag-data-get` handler on
+/// `drop-performed` — emitted at the instant of the drop, BEFORE the target
+/// asynchronously requests the `text/uri-list` selection — so a browser's or
+/// file manager's data request finds no provider and the drop silently does
+/// nothing. It also builds `file://{path}` with no percent-encoding (a space
+/// in the name yields an invalid URI strict consumers discard) and passes
+/// `GDK_BUTTON1_MASK` (256) where GTK expects the button NUMBER (1).
+///
+/// Here URIs are encoded canonically (`glib::filename_to_uri`) and teardown is
+/// deferred to `dnd-finished` (the target has read the data), with `cancel` /
+/// `drag-failed` covering the abort paths. Windows/macOS keep the plugin
+/// (their OLE/NSDragging backends are sound).
+///
+/// Deliberately a SYNC command: Tauri dispatches those on the main (GTK)
+/// thread, which is exactly where every call below must run.
+#[cfg(target_os = "linux")]
+#[tauri::command]
+pub fn start_file_drag(window: tauri::Window, paths: Vec<String>) -> Result<(), String> {
+    use gtk::{gdk, glib, prelude::*};
+    use std::cell::RefCell;
+    use std::rc::Rc;
+
+    if paths.is_empty() {
+        return Err("start_file_drag: no paths".into());
+    }
+    let uris: Vec<String> = paths
+        .iter()
+        .map(|p| {
+            glib::filename_to_uri(p, None)
+                .map(|u| u.to_string())
+                .map_err(|e| format!("start_file_drag: invalid path {p:?}: {e}"))
+        })
+        .collect::<Result<_, _>>()?;
+
+    let win = window.gtk_window().map_err(|e| e.to_string())?;
+    win.drag_source_set(gdk::ModifierType::BUTTON1_MASK, &[], gdk::DragAction::COPY);
+    win.drag_source_add_uri_targets();
+
+    // Window-level signal handlers live until an end-of-drag signal fires;
+    // the drag-data-get one MUST survive past the drop itself (see above).
+    let handler_ids: Rc<RefCell<Vec<glib::SignalHandlerId>>> = Rc::new(RefCell::new(Vec::new()));
+    {
+        let uris = uris.clone();
+        handler_ids
+            .borrow_mut()
+            .push(win.connect_drag_data_get(move |_, _, data, _, _| {
+                let refs: Vec<&str> = uris.iter().map(String::as_str).collect();
+                data.set_uris(&refs);
+            }));
+    }
+
+    let target_list = win
+        .drag_source_get_target_list()
+        .ok_or("start_file_drag: empty target list")?;
+    let context = win
+        .drag_begin_with_coordinates(&target_list, gdk::DragAction::COPY, 1, None, -1, -1)
+        .ok_or("start_file_drag: drag_begin refused (no pointer grab?)")?;
+    ACTIVE_DRAG.with(|c| *c.borrow_mut() = Some(context.clone()));
+
+    // Idempotent teardown shared by every end-of-drag signal — a cancelled drag
+    // can raise more than one of them for the same gesture. `ours` marks the
+    // cancel WE asked for (handing the gesture back to the in-app drag): the
+    // GTK drag is over, but the user's gesture is not, so no end event.
+    let cleanup = {
+        let win = win.clone();
+        let window = window.clone();
+        let handler_ids = handler_ids.clone();
+        move || {
+            for id in handler_ids.borrow_mut().drain(..) {
+                win.disconnect(id);
+            }
+            win.drag_source_unset();
+            ACTIVE_DRAG.with(|c| *c.borrow_mut() = None);
+            let ours = CANCEL_REQUESTED.with(|f| f.replace(false));
+            if !ours {
+                use tauri::Emitter;
+                let _ = window.emit(FILE_DRAG_ENDED, ());
+            }
+        }
+    };
+    {
+        let cleanup = cleanup.clone();
+        context.connect_dnd_finished(move |_| cleanup());
+    }
+    {
+        let cleanup = cleanup.clone();
+        context.connect_cancel(move |_, _| cleanup());
+    }
+    {
+        let cleanup = cleanup.clone();
+        let id = win.connect_drag_failed(move |_, _, _| {
+            cleanup();
+            // Proceed keeps GTK's snap-back animation for the failed drop.
+            glib::Propagation::Proceed
+        });
+        handler_ids.borrow_mut().push(id);
+    }
+
+    // Same OS drag icon the plugin path used (the app icon).
+    const ICON_PNG: &[u8] = include_bytes!("../../icons/128x128.png");
+    let loader = gtk::gdk_pixbuf::PixbufLoader::new();
+    if loader.write(ICON_PNG).and_then(|_| loader.close()).is_ok() {
+        if let Some(pixbuf) = loader.pixbuf() {
+            context.drag_set_icon_pixbuf(&pixbuf, 0, 0);
+        }
+    }
+    Ok(())
+}
+
+/// Abort the in-flight native drag, handing the still-held button back to the
+/// in-app pointer drag (the cursor re-entered the Eldrun window, so the ghost
+/// and hover take over again from the OS drag icon). A no-op when no native
+/// drag is running, so the frontend can call it unconditionally.
+#[cfg(target_os = "linux")]
+#[tauri::command]
+pub fn cancel_file_drag() {
+    use gtk::prelude::DragContextExtManual;
+    let Some(context) = ACTIVE_DRAG.with(|c| c.borrow().clone()) else {
+        return;
+    };
+    // Read back in `cleanup` (via the `cancel` signal this raises) to tell our
+    // own abort apart from a real one.
+    CANCEL_REQUESTED.with(|f| f.set(true));
+    context.drag_cancel();
+}
+
+#[cfg(not(target_os = "linux"))]
+#[tauri::command]
+pub fn cancel_file_drag() {}
+
+/// Non-Linux stub so the command registers everywhere; the frontend only
+/// routes to it on Linux (Windows/macOS stay on `tauri-plugin-drag`).
+#[cfg(not(target_os = "linux"))]
+#[tauri::command]
+pub fn start_file_drag(paths: Vec<String>) -> Result<(), String> {
+    let _ = paths;
+    Err("start_file_drag is Linux-only; use tauri-plugin-drag".into())
+}
+
 #[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct EmbedCapability {
     /// OS can host an embedded frameless window (X11 backend, not XWayland).
diff --git a/src-tauri/src/commands/debug.rs b/src-tauri/src/commands/debug.rs
index 400e5f9..10b3926 100644
--- a/src-tauri/src/commands/debug.rs
+++ b/src-tauri/src/commands/debug.rs
@@ -1,3 +1,4 @@
+use crate::gpustat::GpuSample;
 use serde::Serialize;
 
 #[derive(Debug, Clone, Serialize)]
@@ -7,8 +8,13 @@ pub struct AppResourceUsage {
     pub process_count: usize,
     /// VRAM (bytes) in use by local models loaded in Ollama's memory. `0` when
     /// the Ollama server is down or no model is resident on the GPU. This is
-    /// system-wide GPU usage by Ollama, not part of Eldrun's own process tree.
+    /// Ollama's *share* of the GPU — one line of the readout's breakdown, and
+    /// the whole readout only on a machine whose GPU we cannot read (`gpus`
+    /// empty). It is not part of Eldrun's own process tree.
     pub vram_bytes: u64,
+    /// Every GPU in the machine and its memory, Ollama's models or not. Empty
+    /// when no GPU can be read; see [`crate::gpustat`].
+    pub gpus: Vec<GpuSample>,
 }
 
 /// Debug-only live resource usage for Eldrun's own process tree.
@@ -36,6 +42,7 @@ pub async fn debug_app_resource_usage() -> Result<AppResourceUsage, String> {
         rss_bytes,
         process_count: pids.len(),
         vram_bytes: crate::commands::ollama::total_vram_in_use(),
+        gpus: crate::gpustat::snapshot(),
     })
 }
 
diff --git a/src-tauri/src/commands/fs.rs b/src-tauri/src/commands/fs.rs
index 1eb4b4f..6302cf4 100644
--- a/src-tauri/src/commands/fs.rs
+++ b/src-tauri/src/commands/fs.rs
@@ -238,6 +238,7 @@ async fn list_dir_remote(
 pub async fn dir_size(
     project_dir: String,
     rel_path: String,
+    excluded: Option<Vec<String>>,
     pool: tauri::State<'_, crate::services::remote::RemotePoolState>,
 ) -> Result<u64, String> {
     let _ = &pool; // remote path uses SSH exec, not the SFTP pool; keep the arg for symmetry
@@ -250,14 +251,15 @@ pub async fn dir_size(
         .await
         .map_err(|e| e.to_string())?;
     }
-    tokio::task::spawn_blocking(move || dir_size_local(&project_dir, &rel_path))
+    let excluded = excluded.unwrap_or_default();
+    tokio::task::spawn_blocking(move || dir_size_local(&project_dir, &rel_path, &excluded))
         .await
         .map_err(|e| e.to_string())?
 }
 
 /// Local-fs recursive directory size (bytes). Confinement-checked like the local
 /// lister, then a symlink-skipping walk (so a symlink cycle can't loop forever).
-pub fn dir_size_local(project_dir: &str, rel_path: &str) -> Result<u64, String> {
+pub fn dir_size_local(project_dir: &str, rel_path: &str, excluded: &[String]) -> Result<u64, String> {
     let root = canonical(project_dir)?;
     let target = if rel_path.is_empty() {
         root.clone()
@@ -265,13 +267,36 @@ pub fn dir_size_local(project_dir: &str, rel_path: &str) -> Result<u64, String>
         canonical(&root.join(rel_path).to_string_lossy().to_string())?
     };
     enforce_confinement(&root, &target)?;
-    Ok(walk_dir_size(&target))
+    // The walk builds rel paths from `rel_path` down, so the exclusion list —
+    // which is project-root-relative — matches at any depth under the folder.
+    Ok(walk_dir_size(&target, rel_path.trim_matches('/'), &excluded_rel_set(excluded)))
+}
+
+/// Normalise the caller's scan-exclusion list into the same project-relative,
+/// forward-slash spelling the walks build as they descend.
+///
+/// The list is the user's own (`scan_excluded_paths` in `project.json`, set from
+/// the file tree's "Exclude from scans"), so it is whatever they clicked plus
+/// whatever survived a hand edit: tolerate `./x`, `/x`, `x/`, and Windows
+/// separators rather than silently failing to match one of them.
+pub fn excluded_rel_set(excluded: &[String]) -> HashSet<String> {
+    excluded
+        .iter()
+        .map(|raw| raw.replace('\\', "/"))
+        .map(|rel| rel.trim().trim_matches('/').trim_start_matches("./").to_string())
+        .filter(|rel| !rel.is_empty())
+        .collect()
 }
 
 /// Sum file sizes under `dir`, recursing into subdirectories. Symlinks are never
 /// followed (avoids cycles and double-counting); unreadable dirs/entries are
 /// skipped, so the result is a best-effort total.
-fn walk_dir_size(dir: &Path) -> u64 {
+///
+/// `excluded` prunes whole subtrees the user has excluded from scans. It is a
+/// *prune*, not a filter: the point is not to leave those bytes out of the total
+/// but to never descend into them at all — this walk is what made opening a
+/// project with a 50 GB virtualenv peg a core for minutes.
+fn walk_dir_size(dir: &Path, rel_prefix: &str, excluded: &HashSet<String>) -> u64 {
     let mut total = 0u64;
     let Ok(rd) = fs::read_dir(dir) else {
         return 0;
@@ -281,8 +306,13 @@ fn walk_dir_size(dir: &Path) -> u64 {
         if ft.is_symlink() {
             continue;
         }
+        let name = entry.file_name().to_string_lossy().into_owned();
+        let child_rel = if rel_prefix.is_empty() { name } else { format!("{rel_prefix}/{name}") };
+        if excluded.contains(&child_rel) {
+            continue;
+        }
         if ft.is_dir() {
-            total = total.saturating_add(walk_dir_size(&entry.path()));
+            total = total.saturating_add(walk_dir_size(&entry.path(), &child_rel, excluded));
         } else if ft.is_file() {
             if let Ok(m) = entry.metadata() {
                 total = total.saturating_add(m.len());
@@ -292,6 +322,148 @@ fn walk_dir_size(dir: &Path) -> u64 {
     total
 }
 
+#[derive(Debug, Serialize)]
+pub struct DirSizeBreakdown {
+    pub total: u64,
+    pub ignored: u64,
+}
+
+/// Recursive byte size of a folder split into git-ignored vs
+/// tracked/untracked content, so a mixed folder (e.g. source alongside a
+/// build output dir) can show how much of its weight is ignored content.
+/// Local projects only: splitting by ignore status needs a `git status`
+/// process, and there is no cheap way to run one against a remote host's
+/// index without a dedicated round trip per lazily-shown folder — a remote
+/// folder (or one with no `.git`) just gets `ignored: 0`, same best-effort
+/// fallback as [`dir_size`] on failure.
+#[tauri::command]
+pub async fn dir_size_breakdown(
+    project_dir: String,
+    rel_path: String,
+    excluded: Option<Vec<String>>,
+) -> Result<DirSizeBreakdown, String> {
+    let excluded = excluded.unwrap_or_default();
+    tokio::task::spawn_blocking(move || dir_size_breakdown_local(&project_dir, &rel_path, &excluded))
+        .await
+        .map_err(|e| e.to_string())?
+}
+
+fn dir_size_breakdown_local(
+    project_dir: &str,
+    rel_path: &str,
+    excluded: &[String],
+) -> Result<DirSizeBreakdown, String> {
+    // A remote project's `project_dir` is a local per-project STATE dir (holds
+    // project.json/sync.json/git_peer.json, never the tree itself) — canonicalizing
+    // it and walking `<state_dir>/<rel_path>` as done below always found nothing and
+    // silently reported 0 bytes for every folder, the "shows 0B" bug. Fixed the same
+    // way `dir_size` already handles it: `du` the real path on the host over SSH.
+    // Deliberately does NOT fall back to a local mirror even when one exists — a
+    // "Remote" view must reflect the host's actual tree (e.g. a folder covered
+    // entirely by `.gitignore`, which lockstep never pushes, must show as absent
+    // there, not silently stand in with the mirror's copy). That substitution
+    // already belongs to the frontend's own Local/Remote toggle: selecting "Local"
+    // routes `list_dir`/`dir_size`/`dir_size_breakdown` straight at the mirror path
+    // before this command is ever called with a remote `project_dir`.
+    if let Some(target) = crate::services::remote::remote_target_for_dir(project_dir) {
+        let remote_dir = join_remote_dir(&target.spec.remote_path, rel_path);
+        let total = crate::services::ssh_exec::remote_dir_size(&target.spec, &remote_dir)?;
+        return Ok(DirSizeBreakdown { total, ignored: 0 });
+    }
+
+    let root = canonical(project_dir)?;
+    let target = if rel_path.is_empty() {
+        root.clone()
+    } else {
+        canonical(&root.join(rel_path).to_string_lossy().to_string())?
+    };
+    enforce_confinement(&root, &target)?;
+
+    let prefix = rel_path.trim_matches('/');
+    let excluded = excluded_rel_set(excluded);
+    if !root.join(".git").exists() {
+        return Ok(DirSizeBreakdown { total: walk_dir_size(&target, prefix, &excluded), ignored: 0 });
+    }
+
+    let ignored = ignored_paths_under(&root, rel_path);
+    let (total, ignored_bytes) = walk_dir_size_breakdown(&target, prefix, &ignored, &excluded);
+    Ok(DirSizeBreakdown { total, ignored: ignored_bytes })
+}
+
+/// The set of repo-root-relative paths (matching git's own porcelain output)
+/// that `git status` reports as ignored (`!!`) anywhere under `rel_path`.
+/// `--untracked-files=all` is what makes this useful: without it, git
+/// collapses a wholly-ignored directory to one line for the directory itself
+/// rather than recursing into it (see `commands::git::git_file_statuses`'s
+/// `wholly_ignored` handling for the same quirk) — here we want every
+/// individual ignored file, at any depth, so [`walk_dir_size_breakdown`] can
+/// classify each file it visits by simple set membership. A failed/absent
+/// `git` yields an empty set, so the breakdown degrades to "0 ignored"
+/// rather than erroring.
+fn ignored_paths_under(root: &Path, rel_path: &str) -> HashSet<String> {
+    let mut args = vec!["status", "--porcelain", "--ignored", "--untracked-files=all"];
+    if !rel_path.is_empty() {
+        args.push("--");
+        args.push(rel_path);
+    }
+    let Ok(out) = crate::paths::command_no_window("git").args(&args).current_dir(root).output() else {
+        return HashSet::new();
+    };
+    let text = String::from_utf8_lossy(&out.stdout);
+    text.lines()
+        .filter_map(|line| {
+            if line.len() < 4 || &line[..2] != "!!" {
+                return None;
+            }
+            Some(line[3..].trim_matches('"').to_string())
+        })
+        .collect()
+}
+
+/// Like [`walk_dir_size`], but also sums the subset of bytes whose
+/// repo-root-relative path (`rel_prefix` + entry name, built up as recursion
+/// descends) is in `ignored`. Directories themselves never appear in
+/// `ignored` (git only reports leaf files under `--untracked-files=all`), so
+/// this always recurses rather than short-circuiting on a directory match —
+/// the leaf files inside eventually match individually regardless of depth.
+fn walk_dir_size_breakdown(
+    dir: &Path,
+    rel_prefix: &str,
+    ignored: &HashSet<String>,
+    excluded: &HashSet<String>,
+) -> (u64, u64) {
+    let mut total = 0u64;
+    let mut ignored_total = 0u64;
+    let Ok(rd) = fs::read_dir(dir) else {
+        return (0, 0);
+    };
+    for entry in rd.flatten() {
+        let Ok(ft) = entry.file_type() else { continue };
+        if ft.is_symlink() {
+            continue;
+        }
+        let name = entry.file_name().to_string_lossy().into_owned();
+        let child_rel = if rel_prefix.is_empty() { name } else { format!("{rel_prefix}/{name}") };
+        if excluded.contains(&child_rel) {
+            continue;
+        }
+        if ft.is_dir() {
+            let (t, i) = walk_dir_size_breakdown(&entry.path(), &child_rel, ignored, excluded);
+            total = total.saturating_add(t);
+            ignored_total = ignored_total.saturating_add(i);
+        } else if ft.is_file() {
+            if let Ok(m) = entry.metadata() {
+                let bytes = m.len();
+                total = total.saturating_add(bytes);
+                if ignored.contains(&child_rel) {
+                    ignored_total = ignored_total.saturating_add(bytes);
+                }
+            }
+        }
+    }
+    (total, ignored_total)
+}
+
 /// Join a remote project root (`remote_path`) with a project-relative path,
 /// mirroring `ssh_exec::remote_subdir`-style joining: trim a trailing '/', then
 /// append the non-empty rel. Pure, so it is unit-tested without a live host.
@@ -1798,6 +1970,67 @@ mod tests {
         );
     }
 
+    // ── dir_size_breakdown ──────────────────────────────────────────────────
+
+    fn git_available() -> bool {
+        crate::paths::command_no_window("git")
+            .arg("--version")
+            .output()
+            .map(|o| o.status.success())
+            .unwrap_or(false)
+    }
+
+    fn init_repo(dir: &Path) {
+        let run = |args: &[&str]| {
+            assert!(
+                crate::paths::command_no_window("git")
+                    .args(args)
+                    .current_dir(dir)
+                    .output()
+                    .expect("git command should run")
+                    .status
+                    .success(),
+                "git {args:?} failed"
+            );
+        };
+        run(&["init"]);
+        run(&["config", "user.email", "test@example.com"]);
+        run(&["config", "user.name", "Test User"]);
+    }
+
+    #[test]
+    fn dir_size_breakdown_splits_ignored_from_tracked() {
+        if !git_available() {
+            eprintln!("git not on PATH — skipping dir_size_breakdown_splits_ignored_from_tracked");
+            return;
+        }
+        let tmp = tempfile::tempdir().unwrap();
+        let dir = tmp.path();
+        init_repo(dir);
+
+        std::fs::write(dir.join(".gitignore"), "whole/\n").unwrap();
+        std::fs::create_dir(dir.join("src")).unwrap();
+        std::fs::write(dir.join("src/main.rs"), "12345").unwrap(); // 5 bytes, tracked/untracked
+        std::fs::create_dir_all(dir.join("src/whole/sub")).unwrap();
+        std::fs::write(dir.join("src/whole/a.txt"), "1234567890").unwrap(); // 10 bytes, ignored
+        std::fs::write(dir.join("src/whole/sub/b.txt"), "12345678901234567890").unwrap(); // 20 bytes, ignored
+
+        let breakdown = dir_size_breakdown_local(&dir.to_string_lossy(), "src", &[]).expect("breakdown");
+        assert_eq!(breakdown.total, 35);
+        assert_eq!(breakdown.ignored, 30);
+    }
+
+    #[test]
+    fn dir_size_breakdown_no_git_yields_zero_ignored() {
+        let tmp = tempfile::tempdir().unwrap();
+        let dir = tmp.path();
+        std::fs::write(dir.join("a.txt"), "hello").unwrap();
+
+        let breakdown = dir_size_breakdown_local(&dir.to_string_lossy(), "", &[]).expect("breakdown");
+        assert_eq!(breakdown.total, 5);
+        assert_eq!(breakdown.ignored, 0);
+    }
+
     // ── copy_path / move_path ──────────────────────────────────────────────
 
     #[test]
@@ -2322,6 +2555,51 @@ mod tests {
         assert_eq!(display_path(Path::new(p)), p);
     }
 
+    #[test]
+    fn excluded_rel_set_normalises_every_spelling_to_one() {
+        let set = excluded_rel_set(&[
+            "venv".into(),
+            "./data/raw".into(),
+            "/results/".into(),
+            "a\\b".into(),
+            "  spaced  ".into(),
+            String::new(),
+            "/".into(),
+        ]);
+        assert!(set.contains("venv"));
+        assert!(set.contains("data/raw"));
+        assert!(set.contains("results"));
+        assert!(set.contains("a/b"));
+        assert!(set.contains("spaced"));
+        // Empty and separator-only entries are dropped rather than becoming an
+        // empty-string key, which would match the project root and prune the lot.
+        assert_eq!(set.len(), 5);
+    }
+
+    #[test]
+    fn dir_size_skips_an_excluded_subtree() {
+        let tmp = std::env::temp_dir().join(format!("eldrun-excl-{}", std::process::id()));
+        let _ = fs::remove_dir_all(&tmp);
+        fs::create_dir_all(tmp.join("keep")).unwrap();
+        fs::create_dir_all(tmp.join("venv/lib")).unwrap();
+        fs::write(tmp.join("keep/a.txt"), vec![b'x'; 100]).unwrap();
+        fs::write(tmp.join("venv/lib/big.bin"), vec![b'x'; 5000]).unwrap();
+        let root = tmp.to_string_lossy().to_string();
+
+        let all = dir_size_local(&root, "", &[]).unwrap();
+        assert_eq!(all, 5100, "baseline walks everything");
+
+        let pruned = dir_size_local(&root, "", &["venv".into()]).unwrap();
+        assert_eq!(pruned, 100, "the excluded subtree contributes nothing");
+
+        // Exclusions are project-root-relative, so they still bite when the walk
+        // starts deeper — here the walk root IS the excluded folder's parent.
+        let nested = dir_size_local(&root, "venv", &["venv/lib".into()]).unwrap();
+        assert_eq!(nested, 0);
+
+        let _ = fs::remove_dir_all(&tmp);
+    }
+
     #[test]
     #[cfg(target_os = "windows")]
     fn display_path_strips_windows_verbatim_prefixes() {
diff --git a/src-tauri/src/commands/fs_watch.rs b/src-tauri/src/commands/fs_watch.rs
index 893df4d..6a12414 100644
--- a/src-tauri/src/commands/fs_watch.rs
+++ b/src-tauri/src/commands/fs_watch.rs
@@ -54,24 +54,39 @@ pub fn watch_dir(
     }
 
     let emit_path = canonical.to_string_lossy().to_string();
-    // Trailing-edge debounce: each raw event bumps a shared generation and schedules
-    // an emit `DEBOUNCE` later that only fires if no newer event arrived in the
-    // meantime. A burst of raw events thus collapses into a single `fs-change`.
+    // Trailing-edge debounce: each raw event bumps a shared generation, and ONE
+    // long-lived thread waits out `DEBOUNCE` and emits only if no newer event
+    // arrived meanwhile. A burst of raw events thus collapses into a single
+    // `fs-change`.
+    //
+    // The generation counter used to be paired with a `std::thread::spawn` *per
+    // raw event*. That is fine at a handful of events and pathological at a burst:
+    // an unpacking install or a recursive size walk in the watched directory turns
+    // into thousands of thread spawns a second, each one only to sleep 200ms and
+    // find itself outdated. One parked thread does the same job at a fixed cost.
     let generation = Arc::new(AtomicU64::new(0));
+    let (tx, rx) = std::sync::mpsc::channel::<u64>();
+    {
+        let generation = Arc::clone(&generation);
+        std::thread::spawn(move || {
+            // Ends when the watcher (and with it the sender) is dropped.
+            while let Ok(seen) = rx.recv() {
+                std::thread::sleep(DEBOUNCE);
+                // Only the last event of a burst still matches — the rest have been
+                // superseded, and their queued messages are drained by this same
+                // check on the next iterations.
+                if generation.load(Ordering::SeqCst) == seen {
+                    let _ = app.emit("fs-change", &emit_path);
+                }
+            }
+        });
+    }
     let mut watcher = recommended_watcher(move |res: notify::Result<notify::Event>| {
         if res.is_err() {
             return;
         }
         let my_gen = generation.fetch_add(1, Ordering::SeqCst) + 1;
-        let app = app.clone();
-        let emit_path = emit_path.clone();
-        let generation = Arc::clone(&generation);
-        std::thread::spawn(move || {
-            std::thread::sleep(DEBOUNCE);
-            if generation.load(Ordering::SeqCst) == my_gen {
-                let _ = app.emit("fs-change", &emit_path);
-            }
-        });
+        let _ = tx.send(my_gen);
     })
     .map_err(|e| e.to_string())?;
 
diff --git a/src-tauri/src/commands/git.rs b/src-tauri/src/commands/git.rs
index 4b8b51b..b9ffada 100644
--- a/src-tauri/src/commands/git.rs
+++ b/src-tauri/src/commands/git.rs
@@ -277,7 +277,32 @@ fn git_file_statuses_blocking(
         return Ok(HashMap::new());
     }
 
-    let out = run_git(target.as_ref(), &project_dir, &["status", "--porcelain", "--ignored"])?;
+    // A directory that is itself wholly ignored is collapsed by git into a
+    // single `!! rel_path/` line at every ancestor listing under the default
+    // `--untracked-files=normal` — so listing `rel_path` itself would come
+    // back with zero lines under its prefix, and its children would silently
+    // lose their "ignored" marker (rather than the folder just being empty of
+    // git-reportable changes, which is the far more common reason this map
+    // comes back empty). Detect that case up front via `check-ignore` and add
+    // `--untracked-files=all`, which makes git recurse into an ignored
+    // directory and report every file underneath individually instead of
+    // collapsing it, scoped to `rel_path` so this stays cheap even inside a
+    // huge folder like `node_modules`. Left off for the common case: it's a
+    // more expensive walk, and combined with the anti-bubble rule below it
+    // would actually stop a normal (non-wholly-ignored-ancestor) ignored
+    // subfolder from being recognized, since a deep file line like
+    // `sub/leaf.js` never equals its containing folder's own name.
+    let wholly_ignored = !rel_path.is_empty()
+        && run_git(target.as_ref(), &project_dir, &["check-ignore", "-q", "--", &rel_path])
+            .map(|out| out.status.success())
+            .unwrap_or(false);
+
+    let status_args: Vec<&str> = if wholly_ignored {
+        vec!["status", "--porcelain", "--ignored", "--untracked-files=all", "--", &rel_path]
+    } else {
+        vec!["status", "--porcelain", "--ignored"]
+    };
+    let out = run_git(target.as_ref(), &project_dir, &status_args)?;
     let porcelain = String::from_utf8_lossy(&out.stdout).into_owned();
 
     // prefix used to filter entries under rel_path
@@ -321,7 +346,12 @@ fn git_file_statuses_blocking(
         // top-level entry ignored when the ignored path IS that entry — else a
         // single ignored child would drag the whole folder into the gitignored
         // section. Other statuses still bubble up so a dir reflects its changes.
-        if status == "ignored" && rel.trim_end_matches('/') != top {
+        // Skipped when `rel_path` itself is already known to be wholly
+        // ignored: every line here is one of its descendants, so there is no
+        // "is this ONE child ignored or is the whole folder" ambiguity to
+        // guard against, and a deep file's top-level parent must still be
+        // marked ignored even though the two paths never match exactly.
+        if status == "ignored" && !wholly_ignored && rel.trim_end_matches('/') != top {
             return;
         }
 
@@ -546,6 +576,15 @@ fn git_unpushed_commits_blocking(project_dir: String) -> Result<Vec<String>, Str
     Ok(text.lines().filter(|l| !l.is_empty()).map(|l| l.to_string()).collect())
 }
 
+/// Ephemeral inline credential helper that answers an https challenge with the
+/// effective token. The token is read from the child's env INSIDE the snippet, so
+/// it never lands in argv or on disk. Always passed after a leading empty
+/// `credential.helper=`, which clears any system helper (e.g. GCM) so only ours
+/// runs. Harmless for SSH remotes — git won't call an http helper. Shared by
+/// `git_push` and `git_clone`.
+const TOKEN_CREDENTIAL_HELPER: &str =
+    "credential.helper=!f() { test \"$1\" = get && echo username=x-access-token && echo \"password=$ELDRUN_GIT_TOKEN\"; }; f";
+
 #[tauri::command]
 pub async fn git_push(project_dir: String, project_id: Option<String>) -> Result<String, String> {
     run_off_thread(move || git_push_blocking(project_dir, project_id)).await
@@ -566,18 +605,9 @@ fn git_push_blocking(project_dir: String, project_id: Option<String>) -> Result<
         let mut cmd = crate::paths::command_no_window("git");
         cmd.current_dir(&project_dir);
         if let Some(tok) = token.as_deref() {
-            // Authenticate an https push with the effective token via an ephemeral
-            // inline credential helper. The token is read from the child's env INSIDE
-            // the helper snippet, so it never lands in argv or on disk. The leading
-            // empty `credential.helper=` clears any system helper (e.g. GCM) so only
-            // ours runs. Harmless for SSH remotes — git won't call an http helper.
-            cmd.args([
-                "-c",
-                "credential.helper=",
-                "-c",
-                "credential.helper=!f() { test \"$1\" = get && echo username=x-access-token && echo \"password=$ELDRUN_GIT_TOKEN\"; }; f",
-                "push",
-            ]);
+            // Authenticate an https push with the effective token (see
+            // TOKEN_CREDENTIAL_HELPER).
+            cmd.args(["-c", "credential.helper=", "-c", TOKEN_CREDENTIAL_HELPER, "push"]);
             cmd.env("ELDRUN_GIT_TOKEN", tok);
             cmd.env("GIT_TERMINAL_PROMPT", "0");
         } else {
@@ -593,6 +623,142 @@ fn git_push_blocking(project_dir: String, project_id: Option<String>) -> Result<
     Ok(if stdout.is_empty() { stderr } else { stdout })
 }
 
+// ── Clone (import from GitHub/GitLab) ───────────────────────────────────────
+
+/// Accept only the clone URL forms we actually mean to support: https/http,
+/// `ssh://`, `git://`, and the scp-like `[user@]host:path`. This is a whitelist
+/// on purpose — git also understands `ext::<command>` (which *runs* the command)
+/// and local paths, and neither belongs behind a "paste a repo URL" field.
+pub(crate) fn validate_clone_url(url: &str) -> Result<(), String> {
+    let url = url.trim();
+    let reject = || {
+        Err(format!(
+            "'{url}' is not a supported repository URL (expected https://…, ssh://… or git@host:owner/repo.git)"
+        ))
+    };
+    if url.is_empty() {
+        return Err("Repository URL is empty".to_string());
+    }
+
+    let lower = url.to_ascii_lowercase();
+    if let Some(scheme_end) = lower.find("://") {
+        // An explicit scheme must be one we support. `file://` is not a remote,
+        // and anything else is a transport we did not mean to expose.
+        return if ["https", "http", "ssh", "git"].contains(&&lower[..scheme_end]) {
+            Ok(())
+        } else {
+            reject()
+        };
+    }
+
+    // scp-like: `[user@]host:path`. The host part carries no slash (that would be
+    // a local path) and no colon of its own — `transport::address` is git's
+    // transport-helper form, and `ext::<command>` *runs* the command.
+    let Some(colon) = url.find(':') else {
+        return reject();
+    };
+    let (host, path) = (&url[..colon], &url[colon + 1..]);
+    if host.is_empty()
+        || host.contains('/')
+        || host.starts_with('-')
+        || path.is_empty()
+        || path.starts_with(':')
+    {
+        return reject();
+    }
+    Ok(())
+}
+
+/// Turn git's own auth failure into the one sentence that tells the user what to
+/// do about it. A private https repo with no token stored reads as "could not
+/// read Username" / "Authentication failed", which explains nothing on its own.
+fn clone_error(stderr: &str, had_token: bool, https: bool) -> String {
+    let lower = stderr.to_ascii_lowercase();
+    let auth_failed = lower.contains("could not read username")
+        || lower.contains("authentication failed")
+        || lower.contains("terminal prompts disabled")
+        || lower.contains("repository not found");
+    if auth_failed && https {
+        let hint = if had_token {
+            "The stored access token was rejected (or has no access to this repository) — check it in Settings → Git Hosting."
+        } else {
+            "For a private repository, add an access token in Settings → Git Hosting, or use an SSH URL."
+        };
+        return format!("{}\n\n{hint}", stderr.trim());
+    }
+    if auth_failed {
+        return format!(
+            "{}\n\nSSH authentication failed — make sure your key is loaded (ssh-agent) and the host is known.",
+            stderr.trim()
+        );
+    }
+    stderr.trim().to_string()
+}
+
+/// Clone `url` into `dest` and return `dest`. Used by the import dialog's
+/// "Clone from GitHub/GitLab" source: the clone lands first, then the regular
+/// `import_project` registers the resulting directory in place ("keep" mode).
+///
+/// Auth: an https URL rides the global access token from Settings → Git Hosting
+/// (via the same inline credential helper as `git_push`) when one is stored; an
+/// SSH URL uses the user's own keys. Every interactive prompt git could raise is
+/// disabled (`GIT_TERMINAL_PROMPT=0`, ssh `BatchMode=yes`) — Eldrun has no console
+/// attached, so a prompt would be an invisible hang rather than a question.
+#[tauri::command]
+pub async fn git_clone(url: String, dest: String) -> Result<String, String> {
+    run_off_thread(move || git_clone_blocking(url, dest)).await
+}
+
+fn git_clone_blocking(url: String, dest: String) -> Result<String, String> {
+    let url = url.trim().to_string();
+    validate_clone_url(&url)?;
+
+    let dest_path = PathBuf::from(&dest);
+    if dest_path.exists() {
+        let empty = std::fs::read_dir(&dest_path)
+            .map(|mut entries| entries.next().is_none())
+            .unwrap_or(false);
+        if !empty {
+            return Err(format!("Destination '{dest}' already exists and is not empty"));
+        }
+    }
+    if let Some(parent) = dest_path.parent() {
+        std::fs::create_dir_all(parent).map_err(|e| e.to_string())?;
+    }
+
+    let token = crate::commands::git_hosting::global_git_token();
+    let https = {
+        let lower = url.to_ascii_lowercase();
+        lower.starts_with("https://") || lower.starts_with("http://")
+    };
+
+    let mut cmd = crate::paths::command_no_window("git");
+    cmd.env("GIT_TERMINAL_PROMPT", "0");
+    cmd.env("GIT_SSH_COMMAND", "ssh -o BatchMode=yes");
+    if https {
+        if let Some(tok) = token.as_deref() {
+            cmd.args(["-c", "credential.helper=", "-c", TOKEN_CREDENTIAL_HELPER]);
+            cmd.env("ELDRUN_GIT_TOKEN", tok);
+        }
+    }
+    // `--` so a URL can never be read as an option.
+    cmd.args(["clone", "--", &url, &dest]);
+
+    let out = cmd.output().map_err(|e| e.to_string())?;
+    if !out.status.success() {
+        let stderr = String::from_utf8_lossy(&out.stderr).to_string();
+        let stdout = String::from_utf8_lossy(&out.stdout).to_string();
+        let raw = if stderr.trim().is_empty() { stdout } else { stderr };
+        // A failed clone can still leave a partial directory behind; drop it so a
+        // retry isn't blocked by its own debris.
+        if dest_path.exists() {
+            let _ = std::fs::remove_dir_all(&dest_path);
+        }
+        return Err(clone_error(&raw, token.is_some(), https));
+    }
+    Ok(dest)
+}
+
 // ── Git history & branches ──────────────────────────────────────────────────
 
 #[derive(serde::Serialize)]
@@ -1504,6 +1670,19 @@ filename note.txt
             "whole/ should be ignored (got {:?})",
             statuses.get("whole")
         );
+
+        // Navigating INTO the wholly-ignored folder must still report its own
+        // children as ignored, not silently come back empty (the bug this
+        // test guards: plain `--ignored` collapses `whole/` to one line and
+        // never descends into it).
+        let inner = git_file_statuses_blocking(dir.to_string_lossy().to_string(), "whole".to_string())
+            .expect("git_file_statuses on whole/ should succeed");
+        assert_eq!(
+            inner.get("a.txt").map(String::as_str),
+            Some("ignored"),
+            "whole/a.txt should be reported as ignored when listing whole/ (got {:?})",
+            inner.get("a.txt")
+        );
     }
 
     #[test]
@@ -1641,4 +1820,60 @@ filename note.txt
             None
         );
     }
+
+    // ── validate_clone_url ─────────────────────────────────────────────────
+
+    #[test]
+    fn validate_clone_url_accepts_supported_forms() {
+        for url in &[
+            "https://github.com/owner/repo.git",
+            "https://gitlab.com/group/sub/repo",
+            "http://git.internal/owner/repo.git",
+            "ssh://git@github.com:22/owner/repo.git",
+            "git://git.internal/repo.git",
+            "git@github.com:owner/repo.git",
+            "gitlab.com:group/repo.git",
+        ] {
+            assert!(validate_clone_url(url).is_ok(), "should accept: {url}");
+        }
+        // Surrounding whitespace (a pasted URL) is tolerated.
+        assert!(validate_clone_url("  https://github.com/o/r.git  ").is_ok());
+    }
+
+    #[test]
+    fn validate_clone_url_rejects_unsupported_forms() {
+        for url in &[
+            "",
+            "   ",
+            // `ext::` runs a command — never behind a URL field.
+            "ext::sh -c 'touch /tmp/pwned'",
+            "file:///etc",
+            "/etc/passwd",
+            "../repo",
+            "just-a-name",
+            // Option injection, with and without the scp-like colon.
+            "--upload-pack=touch /tmp/pwned",
+            "--upload-pack=x:y",
+        ] {
+            assert!(validate_clone_url(url).is_err(), "should reject: {url}");
+        }
+    }
+
+    #[test]
+    fn clone_error_explains_missing_token_for_https() {
+        let msg = clone_error("fatal: could not read Username for 'https://github.com'", false, true);
+        assert!(msg.contains("Settings → Git Hosting"), "{msg}");
+
+        // A token IS stored but was rejected → point at the token, not at adding one.
+        let msg = clone_error("remote: Repository not found.", true, true);
+        assert!(msg.contains("was rejected"), "{msg}");
+
+        // SSH auth failure gets the key/agent hint instead.
+        let msg = clone_error("git@github.com: Permission denied (publickey).\nfatal: Authentication failed", false, false);
+        assert!(msg.contains("ssh-agent"), "{msg}");
+
+        // A non-auth failure is passed through unchanged (no misleading hint).
+        let msg = clone_error("fatal: destination path exists", false, true);
+        assert_eq!(msg, "fatal: destination path exists");
+    }
 }
diff --git a/src-tauri/src/commands/git_hosting.rs b/src-tauri/src/commands/git_hosting.rs
index 63cc112..d1389b9 100644
--- a/src-tauri/src/commands/git_hosting.rs
+++ b/src-tauri/src/commands/git_hosting.rs
@@ -136,6 +136,15 @@ pub fn effective_git_creds(project_id: &str) -> (Option<String>, Option<String>)
     (profile_url, token)
 }
 
+/// The global access token from Settings → Git Hosting, if one is stored. For
+/// work that has no project to key a per-project override off yet — `git_clone`
+/// runs *before* the project exists — so only the global connection applies.
+pub fn global_git_token() -> Option<String> {
+    read_settings()
+        .and_then(|s| s.git_token)
+        .filter(|t| !t.trim().is_empty())
+}
+
 fn read_settings() -> Option<Settings> {
     let path = storage::state_dir().join("settings.json");
     if path.exists() {
diff --git a/src-tauri/src/commands/git_peer.rs b/src-tauri/src/commands/git_peer.rs
index c800019..b4d6e6d 100644
--- a/src-tauri/src/commands/git_peer.rs
+++ b/src-tauri/src/commands/git_peer.rs
@@ -31,6 +31,7 @@ pub async fn git_peer_set_enabled(
     manifest: State<'_, SyncManifestState>,
     auto: State<'_, AutoSyncState>,
     reg: State<'_, GitPeerRegistry>,
+    worker_sync: State<'_, crate::services::worker_sync::WorkerSyncState>,
     project_id: String,
     enabled: bool,
 ) -> Result<GitPeerState, String> {
@@ -50,6 +51,7 @@ pub async fn git_peer_set_enabled(
             manifest.inner().clone(),
             auto.inner().clone(),
             reg.inner(),
+            worker_sync.inner().clone(),
             &project_id,
         )
         .await;
diff --git a/src-tauri/src/commands/global_machines.rs b/src-tauri/src/commands/global_machines.rs
new file mode 100644
index 0000000..23066fc
--- /dev/null
+++ b/src-tauri/src/commands/global_machines.rs
@@ -0,0 +1,429 @@
+//! Global worker-machine registry (project-free, mirrors the VPN tunnel
+//! registry's "machine-wide, not project-scoped" pattern).
+//!
+//! A [`GlobalMachine`] is authenticated once via the ordinary login mechanism
+//! (`commands::ssh::ssh_connect`) with no `remote_path` — the caller does that
+//! *before* calling [`global_machine_add`], which only persists the identity.
+//! No connect/disconnect commands live here: `ssh_connect`/`ssh_probe` are
+//! already project-free and host-identity keyed, so the frontend calls them
+//! directly with a machine's `user`/`host`/`port`.
+
+use crate::schema::GlobalMachine;
+use crate::storage;
+use serde::{Deserialize, Serialize};
+
+fn global_machines_path() -> std::path::PathBuf {
+    storage::state_dir().join("global_machines.json")
+}
+
+/// One machine as it crosses the import/export boundary. Deliberately a **subset**
+/// of [`GlobalMachine`]: it carries the connection *address* (host/port) and the
+/// display `label`, but **no `id`, no `auto_connect`, and — on export — no
+/// `user`**. The export omits the username on purpose so the resulting file is
+/// shareable between people who each log in as themselves (import supplies one
+/// common username + password). `user` is still an *accepted* field on import so
+/// a hand-authored file can pin a per-machine login; a file Eldrun wrote never
+/// has it. Passwords are never written to or read from this file — the whole
+/// point of the "one common password at import" flow.
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct MachineIo {
+    pub host: String,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub port: Option<u16>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub label: Option<String>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub user: Option<String>,
+}
+
+/// The on-disk shape of an exported machines file: a versioned wrapper around the
+/// list, so a future format change can be detected rather than mis-parsed. Import
+/// also tolerates a bare `[MachineIo]` array (a hand-written file), so the wrapper
+/// is a convenience, not a requirement.
+#[derive(Debug, Serialize, Deserialize)]
+pub struct MachineExportFile {
+    pub version: u32,
+    pub machines: Vec<MachineIo>,
+}
+
+fn load_all() -> Vec<GlobalMachine> {
+    storage::read_json(&global_machines_path()).unwrap_or_default()
+}
+
+fn save_all(list: &[GlobalMachine]) -> Result<(), String> {
+    storage::write_json(&global_machines_path(), &list.to_vec()).map_err(|e| e.to_string())
+}
+
+/// Every globally connected machine, for the header's Machines indicator.
+#[tauri::command]
+pub fn global_machines_list() -> Vec<GlobalMachine> {
+    load_all()
+}
+
+/// Register a machine in the global list. The CALLER has already authenticated
+/// it via `ssh_connect` — this command does no auth of its own, it only
+/// persists the identity (mirrors how `RemoteMachinesWindow` already separates
+/// "log in" from "add" for a project worker).
+#[tauri::command]
+pub fn global_machine_add(
+    user: Option<String>,
+    host: String,
+    port: Option<u16>,
+    label: Option<String>,
+) -> Result<GlobalMachine, String> {
+    let host = host.trim().to_string();
+    if host.is_empty() {
+        return Err("host must not be empty".to_string());
+    }
+    crate::services::ssh_common::validate_arg("host", &host)?;
+    let user = user
+        .map(|u| u.trim().to_string())
+        .filter(|u| !u.is_empty());
+    if let Some(u) = &user {
+        crate::services::ssh_common::validate_arg("user", u)?;
+    }
+    let label = label
+        .map(|l| l.trim().to_string())
+        .filter(|l| !l.is_empty());
+    let mut list = load_all();
+    // Idempotent by target: a machine *is* its `(user, host, port)` identity, so a
+    // second registration of the same host — the HPC-wizard login surfacing a
+    // cluster the user may already have added by hand, or a repeat wizard run —
+    // returns the existing row rather than stacking a duplicate. The caller has
+    // just authenticated the same target, so nothing new needs persisting.
+    if let Some(existing) = list
+        .iter()
+        .find(|m| m.user == user && m.host == host && m.port == port)
+    {
+        return Ok(existing.clone());
+    }
+    let machine = GlobalMachine {
+        id: crate::commands::projects::uuid_v4(),
+        user,
+        host,
+        port,
+        label,
+        auto_connect: None,
+    };
+    list.push(machine.clone());
+    save_all(&list)?;
+    Ok(machine)
+}
+
+/// Edit an existing machine's connection identity — `user`/`host`/`port`/`label`.
+/// **Only the identity**: the SSH password is never held here (it lives in the OS
+/// keychain, keyed by host target), so a password change is applied by the caller
+/// re-running `ssh_connect` with the new target, not by this command. Validates
+/// host/user exactly as [`global_machine_add`], and refuses a change that would
+/// collide the machine onto another row's `(user, host, port)` target (which
+/// `global_machine_add`'s idempotency would otherwise silently merge). Returns the
+/// full updated list, like [`global_machine_remove`]/[`global_machine_reorder`].
+///
+/// Note the keychain consequence of changing the target: the saved password (if
+/// any) was stored under the *old* `ssh_account` key and does not follow the
+/// machine to a new user/host/port. The caller re-authenticates the new target.
+#[tauri::command]
+pub fn global_machine_update(
+    id: String,
+    user: Option<String>,
+    host: String,
+    port: Option<u16>,
+    label: Option<String>,
+) -> Result<Vec<GlobalMachine>, String> {
+    let host = host.trim().to_string();
+    if host.is_empty() {
+        return Err("host must not be empty".to_string());
+    }
+    crate::services::ssh_common::validate_arg("host", &host)?;
+    let user = user.map(|u| u.trim().to_string()).filter(|u| !u.is_empty());
+    if let Some(u) = &user {
+        crate::services::ssh_common::validate_arg("user", u)?;
+    }
+    let label = label.map(|l| l.trim().to_string()).filter(|l| !l.is_empty());
+    let mut list = load_all();
+    if !list.iter().any(|m| m.id == id) {
+        return Err("machine not found".to_string());
+    }
+    // A machine *is* its `(user, host, port)` identity — refuse to point two rows
+    // at the same target (rather than silently fold them, which `global_machine_add`
+    // would do on a re-add but is surprising as the result of an edit).
+    if list
+        .iter()
+        .any(|m| m.id != id && m.user == user && m.host == host && m.port == port)
+    {
+        return Err("another machine already uses that address".to_string());
+    }
+    for m in list.iter_mut() {
+        if m.id == id {
+            m.user = user.clone();
+            m.host = host.clone();
+            m.port = port;
+            m.label = label.clone();
+        }
+    }
+    save_all(&list)?;
+    Ok(list)
+}
+
+/// Arm (or disarm) a machine for silent auto-connect on launch / VPN-up. Stores
+/// `Some(true)` when enabled and drops the field entirely when disabled, so a
+/// disarmed machine looks exactly like one from before the field existed. The
+/// promise is kept on the *frontend* auto path (it probes before it connects, so
+/// it never prompts); this only persists the opt-in.
+#[tauri::command]
+pub fn global_machine_set_auto_connect(
+    id: String,
+    enabled: bool,
+) -> Result<Vec<GlobalMachine>, String> {
+    let mut list = load_all();
+    for m in list.iter_mut() {
+        if m.id == id {
+            m.auto_connect = if enabled { Some(true) } else { None };
+        }
+    }
+    save_all(&list)?;
+    Ok(list)
+}
+
+/// Drop a machine from the global list. Never touches the OS keychain — the
+/// saved SSH credential (if any) is keyed by host identity
+/// (`remote_credentials::ssh_account`), shared with any project that reaches
+/// the same target, not by this registry. Never touches any project's
+/// `compute_hosts` either: a `ComputeHost` is a value copy of the connection
+/// info made at drop time, not a reference back here.
+#[tauri::command]
+pub fn global_machine_remove(id: String) -> Result<Vec<GlobalMachine>, String> {
+    let mut list = load_all();
+    list.retain(|m| m.id != id);
+    save_all(&list)?;
+    Ok(list)
+}
+
+/// Persist a new display order for the global machines list — the frontend
+/// (drag-and-drop in `MachinesIndicator`) computes the reordered id sequence
+/// client-side (splice, mirrors `stores::projects`' `reorderProjects`) and this
+/// only rewrites the file to match it. There's no separate position field:
+/// array order in `global_machines.json` **is** the order. Any id missing from
+/// `ids` (a stale snapshot racing a concurrent add/remove) keeps its original
+/// relative place, appended after the given ones, so a reorder can never
+/// silently drop a machine.
+#[tauri::command]
+pub fn global_machine_reorder(ids: Vec<String>) -> Result<Vec<GlobalMachine>, String> {
+    let list = load_all();
+    let mut reordered: Vec<GlobalMachine> = ids
+        .iter()
+        .filter_map(|id| list.iter().find(|m| &m.id == id).cloned())
+        .collect();
+    for m in &list {
+        if !reordered.iter().any(|r| r.id == m.id) {
+            reordered.push(m.clone());
+        }
+    }
+    save_all(&reordered)?;
+    Ok(reordered)
+}
+
+/// Write the selected machines to a shareable JSON file at `path`. `ids` is the
+/// caller's selection **in display order**; the file preserves that order. Only
+/// host/port/label cross — never the username (so the file works for whoever
+/// imports it) and never a password (secrets live in the OS keychain, keyed by
+/// host, and are never serialized). The path comes from a native save dialog on
+/// the frontend, so it can be anywhere the user chose.
+#[tauri::command]
+pub fn global_machines_export(ids: Vec<String>, path: String) -> Result<(), String> {
+    let list = load_all();
+    let by_id: std::collections::HashMap<&str, &GlobalMachine> =
+        list.iter().map(|m| (m.id.as_str(), m)).collect();
+    let machines: Vec<MachineIo> = ids
+        .iter()
+        .filter_map(|id| by_id.get(id.as_str()).copied())
+        .map(|m| MachineIo {
+            host: m.host.clone(),
+            port: m.port,
+            label: m.label.clone(),
+            user: None, // deliberately dropped — see `MachineIo`.
+        })
+        .collect();
+    if machines.is_empty() {
+        return Err("no machines selected to export".to_string());
+    }
+    let file = MachineExportFile { version: 1, machines };
+    let json = serde_json::to_string_pretty(&file).map_err(|e| e.to_string())?;
+    std::fs::write(&path, json).map_err(|e| format!("failed to write {path}: {e}"))?;
+    Ok(())
+}
+
+/// Read and validate a machines file at `path`, returning the importable entries
+/// **without** connecting or persisting anything — the frontend previews them,
+/// collects one shared username + password, then connects+adds each via the
+/// ordinary `ssh_connect` + `global_machine_add` pair (so status lamps and the
+/// idempotent-by-target de-dup both apply). Accepts either the
+/// [`MachineExportFile`] wrapper Eldrun writes or a bare `[MachineIo]` array.
+/// Entries are trimmed; those with an empty or shell-unsafe host/user are dropped
+/// (the same `validate_arg` gate `global_machine_add` applies), so a malformed
+/// file yields fewer rows rather than an unsafe add later.
+#[tauri::command]
+pub fn global_machines_import_read(path: String) -> Result<Vec<MachineIo>, String> {
+    let content =
+        std::fs::read_to_string(&path).map_err(|e| format!("failed to read {path}: {e}"))?;
+    let raw = match serde_json::from_str::<MachineExportFile>(&content) {
+        Ok(f) => f.machines,
+        // Fall back to a bare array (a hand-written file) before giving up.
+        Err(_) => serde_json::from_str::<Vec<MachineIo>>(&content)
+            .map_err(|_| "not a machines export file (expected {version, machines} or a JSON array)".to_string())?,
+    };
+    let mut out = Vec::new();
+    for m in raw {
+        let host = m.host.trim().to_string();
+        if host.is_empty() || crate::services::ssh_common::validate_arg("host", &host).is_err() {
+            continue;
+        }
+        let user = m
+            .user
+            .map(|u| u.trim().to_string())
+            .filter(|u| !u.is_empty());
+        if let Some(u) = &user {
+            if crate::services::ssh_common::validate_arg("user", u).is_err() {
+                continue;
+            }
+        }
+        let label = m
+            .label
+            .map(|l| l.trim().to_string())
+            .filter(|l| !l.is_empty());
+        out.push(MachineIo {
+            host,
+            port: m.port,
+            label,
+            user,
+        });
+    }
+    if out.is_empty() {
+        return Err("no valid machines found in file".to_string());
+    }
+    Ok(out)
+}
+
+/// Full system-monitor snapshot for one global machine — the header's Machines
+/// menu opens `GlobalMachineMonitorDialog` (`components/monitoring/
+/// SystemMonitorPane` in its ad-hoc `globalMachine` mode) on this, in place of
+/// the old small per-row usage bar. The direct analog of
+/// `commands::monitor::system_monitor_snapshot` for a project-free host: a
+/// global machine has no `project_id` to resolve through
+/// `remote_target_for_host`, so this authenticates **ad-hoc** instead —
+/// `run_ssh_auth`'s saved-password/key-agent branching (the same one
+/// `ssh_connect`/`ssh_probe` use), no pooled ControlMaster — then runs the same
+/// whole-`/proc` `REMOTE_SNAPSHOT_SCRIPT` / `parse_remote_snapshot` pair
+/// `system_monitor_snapshot` uses for a project's remote host, so the two
+/// surfaces read identically field-for-field. One SSH round trip, heavier than
+/// a pooled poll, so the frontend should only sample this while the dialog is
+/// open.
+#[tauri::command]
+pub async fn global_machine_monitor_snapshot(
+    user: Option<String>,
+    host: String,
+    port: Option<u16>,
+) -> Result<crate::sysstat::SystemSnapshot, String> {
+    tokio::task::spawn_blocking(move || {
+        use crate::services::remote_credentials as creds;
+        let account = creds::ssh_account(&user, &host, port);
+        let password = creds::get(&account);
+        let stdout = crate::commands::ssh::run_ssh_auth(
+            &user,
+            &host,
+            port,
+            password.as_deref(),
+            &[crate::sysstat::REMOTE_SNAPSHOT_SCRIPT],
+        )?;
+        if stdout.trim().is_empty() {
+            return Err("system monitor probe returned no output".to_string());
+        }
+        Ok(crate::sysstat::parse_remote_snapshot(&stdout))
+    })
+    .await
+    .map_err(|e| format!("system monitor probe task failed: {e}"))?
+}
+
+/// The tmux sessions running on one global machine — the "is someone actually
+/// working here?" probe behind the **busy** (pulsing green) lamp in the header
+/// Machines menu, the project pill and the Remote-machines hub. A connected lamp
+/// only says the host authenticates; this says a run is alive on it.
+///
+/// The project-scoped twin is `commands::remote::remote_tmux_list`, which
+/// resolves a `project_id`/`host_id` and rides that project's pooled
+/// ControlMaster. A global machine has no project to resolve through, so this
+/// authenticates **ad-hoc** via `run_ssh_auth` — exactly as
+/// `global_machine_monitor_snapshot` and `global_machine_usage_check` do — and
+/// then runs the *same* `tmux_ls_script` through the *same* `parse_tmux_ls`, so
+/// a global machine's busy state and a project host's are the same reading.
+///
+/// An absent tmux, or a host with no server running, yields an **empty** list
+/// rather than an error (`tmux_ls_script` ends in `|| true`): "no sessions" and
+/// "no tmux" both mean *not busy*, and neither should redden a lamp.
+///
+/// One SSH round trip per call, so the frontend fires it only while the menu or
+/// hub that shows the lamp is open — never on a background poll.
+#[tauri::command]
+pub async fn global_machine_tmux_list(
+    user: Option<String>,
+    host: String,
+    port: Option<u16>,
+) -> Result<Vec<crate::services::ssh_exec::TmuxSession>, String> {
+    tokio::task::spawn_blocking(move || {
+        use crate::services::remote_credentials as creds;
+        let account = creds::ssh_account(&user, &host, port);
+        let password = creds::get(&account);
+        let stdout = crate::commands::ssh::run_ssh_auth(
+            &user,
+            &host,
+            port,
+            password.as_deref(),
+            &[crate::services::ssh_exec::tmux_ls_script()],
+        )?;
+        Ok(crate::services::ssh_exec::parse_tmux_ls(&stdout))
+    })
+    .await
+    .map_err(|e| format!("tmux probe task failed: {e}"))?
+}
+
+/// Usage report (who's logged in, CPU/load/memory/GPU, top processes) for one
+/// global machine — what the header Machines menu's on-demand "Remote host
+/// usage…" dialog shows for every machine in the list, in list order.
+///
+/// The project-scoped twin is `commands::remote::remote_usage_check`, which
+/// resolves a `project_id`/`host_id` to a spec and rides that project's pooled
+/// ControlMaster. A global machine has no project to resolve through and pools
+/// nothing, so this authenticates **ad-hoc** via `run_ssh_auth`'s saved-password
+/// /key-agent branching — exactly as `global_machine_monitor_snapshot` does —
+/// and then runs the *same* `remote_usage::probe_script` through the *same*
+/// `parse_report`, so a global machine's section and a project host's section of
+/// that dialog read identically field-for-field.
+///
+/// One SSH round trip per call, so the frontend only fires it when the dialog is
+/// opened or its "Recheck" is pressed — never on a poll.
+#[tauri::command]
+pub async fn global_machine_usage_check(
+    user: Option<String>,
+    host: String,
+    port: Option<u16>,
+) -> Result<crate::services::remote_usage::RemoteUsageReport, String> {
+    tokio::task::spawn_blocking(move || {
+        use crate::services::remote_credentials as creds;
+        let account = creds::ssh_account(&user, &host, port);
+        let password = creds::get(&account);
+        let script = crate::services::remote_usage::probe_script();
+        let stdout = crate::commands::ssh::run_ssh_auth(
+            &user,
+            &host,
+            port,
+            password.as_deref(),
+            &[script.as_str()],
+        )?;
+        if stdout.trim().is_empty() {
+            return Err("usage probe returned no output".to_string());
+        }
+        Ok(crate::services::remote_usage::parse_report(&stdout))
+    })
+    .await
+    .map_err(|e| format!("usage probe task failed: {e}"))?
+}
diff --git a/src-tauri/src/commands/mod.rs b/src-tauri/src/commands/mod.rs
index 29af4c7..b53dcfa 100644
--- a/src-tauri/src/commands/mod.rs
+++ b/src-tauri/src/commands/mod.rs
@@ -14,6 +14,7 @@ pub mod git;
 pub mod git_hosting;
 pub mod git_peer;
 pub mod git_publish;
+pub mod global_machines;
 pub mod local_loss;
 pub mod monitor;
 pub mod net_usage;
@@ -23,12 +24,14 @@ pub mod pdf_clip;
 pub mod power;
 pub mod openvpn;
 pub mod project_runtime;
+pub mod python;
 pub mod projects;
 pub mod remote;
 pub mod screenshot;
 pub mod search;
 pub mod settings;
 pub mod sheets;
+pub mod slurm;
 pub mod sqlite;
 pub mod ssh;
 pub mod subwindow;
diff --git a/src-tauri/src/commands/monitor.rs b/src-tauri/src/commands/monitor.rs
index 3feb587..029374a 100644
--- a/src-tauri/src/commands/monitor.rs
+++ b/src-tauri/src/commands/monitor.rs
@@ -7,11 +7,64 @@
 //! shared sampler state to race between panes. Sampling itself lives in
 //! [`crate::sysstat`]; this is just the Tauri surface.
 
+use crate::gpustat::{self, GpuProc, GpuSample};
 use crate::sysstat::{self, SystemSnapshot};
 
 /// One whole-system sample. `supported` is `false` on non-Linux targets, where
 /// the pane shows a "Linux only" placeholder instead of an empty table.
+///
+/// `project_id` selects the machine, mirroring `disk_usage_scan`: when it names a
+/// project with a `remote` spec, the sample is taken on the **host** — its `/proc`
+/// read over the shared ControlMaster (`REMOTE_SNAPSHOT_SCRIPT`) and assembled by
+/// the same pure parsers — inside `spawn_blocking` so the SSH round-trip never
+/// runs on the UI thread. Any other value (a local project, `None`, or a project
+/// with no remote) samples this machine. `host_id` picks which of the project's
+/// hosts to sample (primary or a `compute_hosts` worker); defaults to the primary
+/// (`remote::PRIMARY_HOST`), mirroring every other multi-host command. The pane
+/// passes `project_id` only while its source toggle points at a host; a
+/// disconnected host is gated out on the frontend, so a dead pool is never dialed
+/// here.
 #[tauri::command]
-pub async fn system_monitor_snapshot() -> Result<SystemSnapshot, String> {
+pub async fn system_monitor_snapshot(
+    project_id: Option<String>,
+    host_id: Option<String>,
+) -> Result<SystemSnapshot, String> {
+    let host_id = host_id.unwrap_or_else(|| crate::services::remote::PRIMARY_HOST.to_string());
+    if let Some(target) = project_id
+        .as_deref()
+        .and_then(|pid| crate::services::remote::remote_target_for_host(pid, &host_id))
+    {
+        let spec = target.spec.clone();
+        return tokio::task::spawn_blocking(move || {
+            let out = crate::services::ssh_exec::run_remote_script(
+                &spec,
+                sysstat::REMOTE_SNAPSHOT_SCRIPT,
+            )?;
+            Ok::<_, String>(sysstat::parse_remote_snapshot(&String::from_utf8_lossy(
+                &out.stdout,
+            )))
+        })
+        .await
+        .map_err(|e| e.to_string())?;
+    }
     Ok(sysstat::system_snapshot())
 }
+
+/// GPU memory alone, for callers that want the device's memory without paying
+/// for a whole process table (the local-model menu, which asks "what headroom is
+/// left before I load this?"). Reads the same [`gpustat`] cache the snapshot
+/// does. An empty list means no GPU could be read, not that there is no GPU.
+#[tauri::command]
+pub async fn gpu_memory_snapshot() -> Result<Vec<GpuSample>, String> {
+    Ok(gpustat::snapshot())
+}
+
+/// Per-process GPU memory for the monitor pane's process breakdown. A separate,
+/// heavier read (a `/proc` `fdinfo` walk for amdgpu, a `nvidia-smi` spawn for
+/// compute clients) than the whole-device snapshot, so only the pane calls it —
+/// the always-visible header readout never pays for it. Local-only and best-effort:
+/// an empty list means "no per-process data available", not "no GPU processes".
+#[tauri::command]
+pub async fn gpu_process_snapshot() -> Result<Vec<GpuProc>, String> {
+    Ok(gpustat::process_snapshot())
+}
diff --git a/src-tauri/src/commands/openvpn.rs b/src-tauri/src/commands/openvpn.rs
index 5ebefd8..846163f 100644
--- a/src-tauri/src/commands/openvpn.rs
+++ b/src-tauri/src/commands/openvpn.rs
@@ -204,6 +204,31 @@ pub async fn openvpn_disconnect(config: String) -> Result<(), String> {
     openvpn::disconnect(&config)
 }
 
+/// Tear down **every** registered tunnel on the **app-close path**, reporting whether
+/// they all went down. This is the checked twin of the exit-time `disconnect_all`: it
+/// touches the same set of tunnels, so that once it succeeds nothing is left for
+/// `RunEvent::Exit` to kill — which is what used to raise the polkit prompt *after* the
+/// window had already vanished. A refused prompt is an error here and leaves the tunnel
+/// registered, so the frontend can keep the window open and tell the user to close the
+/// tunnel first, instead of quitting with the machine's routing still rewritten.
+///
+/// It enumerates the backend registries directly rather than taking a config from the
+/// frontend's `openvpn_active`: `active_configs` filters by a liveness probe, so a
+/// tunnel whose probe reads false would be skipped here yet still killed (and prompted
+/// for) by the exit-time `disconnect_all`. On Linux this raises the `pkexec` password
+/// prompt while the window is still on screen (the whole point); elsewhere it is the
+/// ordinary best-effort teardown.
+#[tauri::command]
+pub async fn openvpn_disconnect_all_on_quit() -> Result<(), String> {
+    // Offload for the same reason `openvpn_connect` does: the teardown is fully
+    // synchronous and blocks for as long as `pkexec` sits on the polkit prompt —
+    // i.e. until the user types a password. Awaiting that directly on the async
+    // runtime starves a worker while the window is still on screen and waiting.
+    tokio::task::spawn_blocking(openvpn::disconnect_all_checked)
+        .await
+        .map_err(|e| format!("openvpn teardown task failed: {e}"))?
+}
+
 /// Whether the OpenVPN tunnel for `config` is currently up.
 #[tauri::command]
 pub async fn openvpn_status(config: String) -> Result<bool, String> {
@@ -234,3 +259,15 @@ pub async fn openvpn_store_config(config: String) -> Result<String, String> {
 pub async fn openvpn_list_configs() -> Result<Vec<openvpn::StoredConfig>, String> {
     Ok(openvpn::list_configs())
 }
+
+/// Remove a stored `.ovpn` config from Eldrun's store, and with it every
+/// credential saved for it — a keychain entry keyed by a config that no longer
+/// exists is exactly the stale half `vpn_forget_password` exists to prevent.
+/// Order matters: the removal is the guarded step (must be a stored path, tunnel
+/// must be down), so it goes first — a refused removal leaves the credentials
+/// alone. Deletes Eldrun's copy only, never the user's original file.
+#[tauri::command]
+pub fn openvpn_remove_config(config: String) -> Result<(), String> {
+    openvpn::remove_config(&config)?;
+    vpn_forget_password(config)
+}
diff --git a/src-tauri/src/commands/projects.rs b/src-tauri/src/commands/projects.rs
index 14cdf9d..471b5da 100644
--- a/src-tauri/src/commands/projects.rs
+++ b/src-tauri/src/commands/projects.rs
@@ -5,9 +5,12 @@ use std::path::{Path, PathBuf};
 use serde::{Deserialize, Serialize};
 use serde_json::Value;
 
+use tauri::State;
+
 use crate::paths;
-use crate::schema::project::{OpenVpnSpec, Project, RemoteSpec, SandboxSpec};
+use crate::schema::project::{ComputeHost, OpenVpnSpec, Project, RemoteSpec, SandboxSpec};
 use crate::schema::projects::{ProjectEntry, ProjectsList};
+use crate::services::remote_sync::SyncManifestState;
 use crate::storage;
 
 /// Local per-project state directory for a **remote** project:
@@ -20,6 +23,36 @@ fn remote_project_state_dir(id: &str) -> std::path::PathBuf {
     storage::state_dir().join("remote-projects").join(id)
 }
 
+/// Drop the per-project state that is bound to **one specific host**: the byte-sync
+/// manifest (`sync.json`) and the lockstep state (`git_peer.json`). Both are meaningless
+/// — worse, actively wrong — once a project is pointed at a *different* host, or at none.
+///
+/// The manifest is the dangerous one, and it is why detach→re-extend needs this at all.
+/// Its entries carry `last_pull_ts`/`last_push_ts`, so against a fresh, empty host
+/// `push_decision` sees `ever_synced = true` plus a missing file and returns `Stale` — it
+/// **refuses to push**. Meanwhile `divergence` maps the failed host stat to "couldn't
+/// check → don't flag", so the file tree paints the very same file **green**. Net: a
+/// re-extended project whose auto-synced data silently never crosses, reported as fully
+/// in sync. The classic false green.
+///
+/// The state dir is keyed by project **id**, which a detach preserves — so a re-extend
+/// lands back on the same directory and inherits whatever the detach left behind.
+/// `remove_dir` (as detach used to call) only removes an *empty* dir, and this one never
+/// is, so every one of these files survived.
+///
+/// Evicting the in-memory cache is not optional: `ensure_loaded` is `or_insert_with`, so
+/// a manifest already loaded this session is never re-read from disk — deleting the file
+/// alone would just get the stale copy re-saved on the next pass.
+///
+/// `local_loss.json` deliberately **survives**: it records what was destroyed in the
+/// *local mirror*, the user may not have acknowledged it yet, and it is a fact about this
+/// machine rather than about any host.
+async fn clear_host_bound_state(project_id: &str, manifest: &SyncManifestState) {
+    let _ = fs::remove_file(crate::services::remote_sync::manifest_path(project_id));
+    let _ = fs::remove_file(crate::services::git_peer::state_path(project_id));
+    manifest.lock().await.remove(project_id);
+}
+
 /// Compute a `<name>` leaf under `parent` for a remote (SSH) project's local
 /// mirror. `sanitize_name` keeps the folder readable; the `id` disambiguates a
 /// name-based path already taken by another remote project, so two hosts' `~/work`
@@ -863,6 +896,40 @@ pub fn set_project_auto_connect(project_id: String, enabled: bool) -> Result<boo
     Ok(enabled)
 }
 
+/// Opt a **remote** project in/out of persistent (tmux) sessions (TODO #85). The
+/// feature is **default ON** for a remote project, so the field is only written
+/// when the user opts *out* (`Some(false)`); turning it back on clears the field
+/// (`None`) to restore the default. Returns the resulting enabled state. Applies
+/// to shell/script tabs spawned after the change (each spawn reads it via the
+/// frontend's per-tab `tmux_session` name).
+#[tauri::command]
+pub fn set_project_persist_sessions(project_id: String, enabled: bool) -> Result<bool, String> {
+    patch_remote_spec(&project_id, |remote| {
+        remote.persist_sessions = if enabled { None } else { Some(false) };
+    })?;
+    Ok(enabled)
+}
+
+/// Set (or clear) the display name for a **remote** project's primary machine —
+/// the counterpart of `patch_compute_host`'s `label` for a worker. Distinct from
+/// the project name: this labels the host `Project.remote.host` reaches, shown
+/// wherever a project's hosts are listed side by side (System Monitor's source
+/// picker, the pill's connection lamps). A blank/whitespace-only string clears it,
+/// falling back to the bare host. Returns the resulting label (`None` when cleared).
+#[tauri::command]
+pub fn set_project_remote_label(
+    project_id: String,
+    label: Option<String>,
+) -> Result<Option<String>, String> {
+    let normalized = label
+        .as_deref()
+        .map(str::trim)
+        .filter(|t| !t.is_empty())
+        .map(str::to_string);
+    patch_remote_spec(&project_id, |remote| remote.label = normalized.clone())?;
+    Ok(normalized)
+}
+
 /// Record how a remote project's host authenticated on its last successful connect
 /// (`key_auth` = no password was used at all — key/agent auth). Called by
 /// `remote_connect`; this is the only way the UI can know a passwordless host is
@@ -877,6 +944,147 @@ pub fn record_remote_key_auth(project_id: &str, key_auth: bool) -> Result<(), St
     patch_remote_spec(project_id, |remote| remote.key_auth = Some(key_auth))
 }
 
+/// The worker twin of `record_remote_key_auth`: record how an extra "worker" host
+/// authenticated on its last successful connect (`key_auth` = no password at all —
+/// key/agent auth). Called by `remote_connect` on a worker connect. Without it a
+/// passwordless worker could never be marked auto-connect-eligible — it has nothing
+/// in the keychain to check — so the Connect dialog's Auto-connect toggle would
+/// stay permanently disabled for it. A no-op when unchanged, so an ordinary connect
+/// costs no write.
+pub fn record_worker_key_auth(
+    project_id: &str,
+    host_id: &str,
+    key_auth: bool,
+) -> Result<(), String> {
+    let current = crate::services::remote::compute_hosts_for(project_id)
+        .into_iter()
+        .find(|h| h.id == host_id)
+        .and_then(|h| h.spec.key_auth);
+    if current == Some(key_auth) {
+        return Ok(());
+    }
+    patch_compute_hosts(project_id, |hosts| {
+        if let Some(h) = hosts.iter_mut().find(|h| h.id == host_id) {
+            h.spec.key_auth = Some(key_auth);
+        }
+    })?;
+    Ok(())
+}
+
+/// Apply `patch` to a **remote** project's extra worker hosts (`compute_hosts`,
+/// `docs/multi_host_remote_plan.md`) in both places they are stored: the
+/// `projects.json` entry's flattened `extra["compute_hosts"]` (the always-local
+/// source of truth `services::remote::compute_hosts_for` reads) and the project's
+/// own `project.json` (best effort — a remote project's copy may be unreachable).
+/// Errors if the project is unknown. The list is created when absent, so this works
+/// on a project that has no workers yet.
+fn patch_compute_hosts(
+    project_id: &str,
+    patch: impl Fn(&mut Vec<ComputeHost>),
+) -> Result<Vec<ComputeHost>, String> {
+    let list_path = storage::state_dir().join("projects.json");
+    let mut list: ProjectsList = if list_path.exists() {
+        storage::read_json(&list_path).map_err(|e| e.to_string())?
+    } else {
+        Vec::new()
+    };
+    let entry = list
+        .iter_mut()
+        .find(|p| p.id == project_id)
+        .ok_or_else(|| format!("project '{project_id}' not found"))?;
+    let mut hosts: Vec<ComputeHost> = entry
+        .extra
+        .get("compute_hosts")
+        .and_then(|v| serde_json::from_value(v.clone()).ok())
+        .unwrap_or_default();
+    patch(&mut hosts);
+    let value = serde_json::to_value(&hosts).map_err(|e| e.to_string())?;
+    if hosts.is_empty() {
+        entry.extra.remove("compute_hosts");
+    } else {
+        entry.extra.insert("compute_hosts".to_string(), value);
+    }
+    let local_file = entry.local_file.clone();
+    storage::write_json(&list_path, &list).map_err(|e| e.to_string())?;
+
+    let proj_path = PathBuf::from(&local_file);
+    if proj_path.exists() {
+        if let Ok(mut project) = storage::read_json::<Project>(&proj_path) {
+            patch(&mut project.compute_hosts);
+            storage::write_json(&proj_path, &project).map_err(|e| e.to_string())?;
+        }
+    }
+    Ok(hosts)
+}
+
+/// Add an extra "worker" host to a remote project (the pill's "Add machine").
+/// Mints a stable `id` when the incoming spec has none, then appends it. Returns
+/// the full updated host list. The primary (`Project.remote`) is untouched.
+#[tauri::command]
+pub fn add_compute_host(
+    project_id: String,
+    mut host: ComputeHost,
+) -> Result<Vec<ComputeHost>, String> {
+    if host.id.trim().is_empty() {
+        host.id = uuid_v4();
+    }
+    patch_compute_hosts(&project_id, |hosts| {
+        // Replace in place when the id already exists (idempotent re-add), else push.
+        if let Some(existing) = hosts.iter_mut().find(|h| h.id == host.id) {
+            *existing = host.clone();
+        } else {
+            hosts.push(host.clone());
+        }
+    })
+}
+
+/// Remove a worker host from a remote project. The caller disconnects it and stops
+/// its fan-out first (frontend); this only drops the persisted entry. Returns the
+/// remaining host list.
+#[tauri::command]
+pub fn remove_compute_host(
+    project_id: String,
+    host_id: String,
+) -> Result<Vec<ComputeHost>, String> {
+    patch_compute_hosts(&project_id, |hosts| hosts.retain(|h| h.id != host_id))
+}
+
+/// Patch a worker host's toggles (`sync_code` / `pull_outputs` / `auto_connect` /
+/// `shared_fs` / `label`). Each argument is applied only when `Some`, so a caller
+/// can flip one flag without restating the others. Unknown `host_id` is a silent
+/// no-op (returns the unchanged list).
+#[tauri::command]
+pub fn patch_compute_host(
+    project_id: String,
+    host_id: String,
+    sync_code: Option<bool>,
+    pull_outputs: Option<bool>,
+    auto_connect: Option<bool>,
+    shared_fs: Option<bool>,
+    label: Option<String>,
+) -> Result<Vec<ComputeHost>, String> {
+    patch_compute_hosts(&project_id, |hosts| {
+        if let Some(h) = hosts.iter_mut().find(|h| h.id == host_id) {
+            if let Some(v) = shared_fs {
+                h.shared_fs = v;
+            }
+            if let Some(v) = sync_code {
+                h.sync_code = v;
+            }
+            if let Some(v) = pull_outputs {
+                h.pull_outputs = v;
+            }
+            if let Some(v) = auto_connect {
+                h.spec.auto_connect = v.then_some(true);
+            }
+            if let Some(v) = &label {
+                let t = v.trim();
+                h.spec.label = if t.is_empty() { None } else { Some(t.to_string()) };
+            }
+        }
+    })
+}
+
 /// Normalize a list of category tags: trim each, drop blanks, and de-duplicate
 /// case-insensitively (first spelling wins), preserving order. Mirrors the
 /// frontend `cleanCategories` so storage stays canonical regardless of caller.
@@ -1056,14 +1264,25 @@ pub fn save_project(local_file: String, project: Project) -> Result<(), String>
 }
 
 /// Save only the tab layout — writes to both project.json and the session file.
+///
+/// `allow_clear` licenses an EMPTY `tabs` to erase the saved layout. The frontend
+/// sets it only for a scope it has actually hydrated and that genuinely holds no
+/// tabs; every other empty save is a no-op. See `terminal_service`.
 #[tauri::command]
 pub fn save_tab_layout(
     local_file: String,
     tabs: Vec<crate::schema::project::TabEntry>,
     groups: Option<Value>,
     sessions: Option<Value>,
+    allow_clear: bool,
 ) -> Result<(), String> {
-    crate::services::terminal_service::save_tab_layout(&local_file, &tabs, groups, sessions)
+    crate::services::terminal_service::save_tab_layout(
+        &local_file,
+        &tabs,
+        groups,
+        sessions,
+        allow_clear,
+    )
 }
 
 #[tauri::command]
@@ -2018,7 +2237,10 @@ pub struct ExtendProjectRemoteRequest {
 /// becomes a local state dir holding `project.json`. The user pushes files to the
 /// (empty) host later via the existing manual sync UI.
 #[tauri::command]
-pub fn extend_project_to_remote(req: ExtendProjectRemoteRequest) -> Result<ProjectEntry, String> {
+pub async fn extend_project_to_remote(
+    req: ExtendProjectRemoteRequest,
+    manifest: State<'_, SyncManifestState>,
+) -> Result<ProjectEntry, String> {
     let list_path = storage::state_dir().join("projects.json");
     let mut list: ProjectsList = if list_path.exists() {
         storage::read_json(&list_path).map_err(|e| e.to_string())?
@@ -2072,6 +2294,15 @@ pub fn extend_project_to_remote(req: ExtendProjectRemoteRequest) -> Result<Proje
     std::fs::create_dir_all(&state_dir).map_err(|e| e.to_string())?;
     let new_directory = state_dir.to_string_lossy().to_string();
 
+    // This project may have been remote before (detached, and now pointed at a different
+    // host — the ordinary way to correct a wrong path). The state dir is keyed by id, so
+    // any host-bound state from that earlier life is sitting right here. Clear it before
+    // we write the new pairing: a manifest describing the OLD host makes byte-sync refuse
+    // to push to the new one while the file tree reports green. Detach clears it too; this
+    // is the belt-and-braces that also rescues a project detached by an older build, which
+    // could not clear it (`remove_dir` cannot empty a non-empty directory).
+    clear_host_bound_state(&req.project_id, manifest.inner()).await;
+
     // Move project.json from the old (now mirror) tree into the state dir, tagging
     // it remote. Read the existing one so tabs/time/created_at/etc. survive.
     let old_project_file = old_path.join("project.json");
@@ -2152,7 +2383,10 @@ pub fn extend_project_to_remote(req: ExtendProjectRemoteRequest) -> Result<Proje
 ///
 /// Errors if the project isn't remote, or has no local mirror to fall back to.
 #[tauri::command]
-pub fn detach_project_from_remote(project_id: String) -> Result<ProjectEntry, String> {
+pub async fn detach_project_from_remote(
+    project_id: String,
+    manifest: State<'_, SyncManifestState>,
+) -> Result<ProjectEntry, String> {
     let list_path = storage::state_dir().join("projects.json");
     let mut list: ProjectsList = if list_path.exists() {
         storage::read_json(&list_path).map_err(|e| e.to_string())?
@@ -2196,13 +2430,77 @@ pub fn detach_project_from_remote(project_id: String) -> Result<ProjectEntry, St
     project.directory = mirror.clone();
     project.remote = None;
     project.mirror = None;
+
+    // Re-point the carried tabs at the mirror. While the project was remote its
+    // `directory` WAS the state dir, so that is what every tab holds as its cwd —
+    // harmless then (the frontend rewrote it at render time, gated on the project
+    // being remote), a dangling path the moment it isn't. Left alone, a restored
+    // agent relaunches inside the state dir this detach is about to delete, and
+    // Claude — which keys its session history by cwd — finds no conversation to
+    // `--resume`. The frontend fixes the LIVE tabs (`detachScopeFromRemote`); this
+    // fixes the ones on disk, which is what a restart restores from.
+    let state_dir = remote_project_state_dir(&project_id);
+    let state_dir_s = state_dir.to_string_lossy().to_string();
+    if let Some(tabs) = project.tab_layout.as_mut() {
+        for tab in tabs.iter_mut() {
+            if tab.cwd == state_dir_s {
+                tab.cwd = mirror.clone();
+            } else if let Some(rest) = tab.cwd.strip_prefix(&format!("{state_dir_s}/")) {
+                tab.cwd = format!("{mirror}/{rest}");
+            }
+        }
+    }
+
     let new_project_file = mirror_path.join("project.json");
     storage::write_json(&new_project_file, &project).map_err(|e| e.to_string())?;
 
-    // Remove the old state-dir project.json + the (now empty) state dir. Best
-    // effort — leftovers are harmless.
+    // The tabs are in project.json now — but that is not where they are READ from.
+    // `load_terminal_session` prefers `.eldrun/sessions/terminals.json` and only falls
+    // back to project.json, and the mirror has its OWN session file, left over from
+    // before this project was ever extended to a host. Preserving `tab_layout` while
+    // that stale file still sits there restores the pre-extend tabs and silently drops
+    // everything the project gained while it was remote. Rewrite it from what we carried
+    // (or drop it, when the project genuinely ended up with no tabs — project.json is the
+    // record, and a leftover session file must not resurrect tabs from before the extend).
+    let new_local_file = new_project_file.to_string_lossy().to_string();
+    match project.tab_layout.as_deref() {
+        Some(tabs) if !tabs.is_empty() => {
+            let _ = crate::services::terminal_service::save_tab_layout(
+                &new_local_file,
+                tabs,
+                project.tab_groups.clone(),
+                None,
+                false,
+            );
+        }
+        _ => {
+            if let Some(dir) = crate::services::terminal_service::eldrun_sessions_dir(&new_local_file)
+            {
+                let _ = std::fs::remove_file(dir.join("terminals.json"));
+            }
+        }
+    }
+
+    // Drop everything that was bound to the host we are detaching from. Not merely
+    // hygiene: the project keeps its id, so a later "extend to remote" — the whole point
+    // of detaching, when the old path was wrong — lands on this same state dir and would
+    // otherwise inherit a byte-sync manifest whose bases describe the OLD host. See
+    // `clear_host_bound_state` for what that silently does to the new one.
+    clear_host_bound_state(&project_id, manifest.inner()).await;
+
+    // Remove the old state-dir project.json, its session mirror, and then the state dir.
+    // `.eldrun/` is why the dir used to survive every detach: `remove_dir` is
+    // non-recursive, so it failed on a dir that still held the session mirror, and the
+    // project's id was left lying around under `remote-projects/` forever.
+    //
+    // The final `remove_dir` stays non-recursive ON PURPOSE — `local_loss.json`
+    // deliberately outlives a detach (it records what was destroyed in the *local*
+    // mirror, and the user may not have seen it yet). A dir that still holds it must
+    // survive; `remove_dir` succeeds only once the dir is genuinely empty, which is
+    // exactly that distinction.
     let _ = std::fs::remove_file(&state_local_file);
-    let _ = std::fs::remove_dir(remote_project_state_dir(&project_id));
+    let _ = std::fs::remove_dir_all(state_dir.join(".eldrun"));
+    let _ = std::fs::remove_dir(&state_dir);
 
     // Update the projects.json entry in place, preserving every other extra key
     // (categories, git_provider, git_type, description, sandbox, …).
diff --git a/src-tauri/src/commands/python.rs b/src-tauri/src/commands/python.rs
new file mode 100644
index 0000000..fa8b322
--- /dev/null
+++ b/src-tauri/src/commands/python.rs
@@ -0,0 +1,644 @@
+//! Which Python runs the code viewer's Run/Debug buttons (#87).
+//!
+//! Naming the interpreter is the whole problem. Running a project's script with a
+//! bare `python3` when its dependencies live in a venv fails with
+//! `ModuleNotFoundError`, and that reads to the user as "Eldrun's Run button is
+//! broken" rather than "wrong interpreter" — so getting this right is what makes
+//! Run trustworthy at all.
+//!
+//! Two layers, in this order:
+//!
+//! 1. **The project's explicit choice** (`Project::python_interpreter`), set in the
+//!    pill's "Python interpreter…" dialog. Always wins, and once set costs nothing
+//!    to honour — no probing at all.
+//! 2. **Auto-detect**, which is what an unconfigured project gets. It probes the
+//!    environment managers people actually use, because a `.venv/` scan alone
+//!    silently mis-fires on every conda/Poetry project.
+//!
+//! Auto-detect deliberately only *auto-selects* an environment that is
+//! unambiguously this project's: an in-tree venv, this project's Poetry env, the
+//! shell's active `VIRTUAL_ENV`/`CONDA_PREFIX`, a pyenv version pinned by
+//! `.python-version`. Named conda envs are **listed** for the dialog but never
+//! auto-picked — choosing one of the user's N unrelated envs on their behalf would
+//! be a guess, and a wrong guess here is indistinguishable from a bug.
+//!
+//! A project can hold **more than one** venv (a top-level `.venv` plus a
+//! per-subproject one), so the in-tree scan walks the tree for `pyvenv.cfg`
+//! markers rather than checking only the root — the dialog lists them all, and the
+//! shallowest (a root `.venv`) is the one auto-detect prefers.
+//!
+//! Remote projects probe **the host**, over the pooled ControlMaster, with a single
+//! constant `sh` script (`run_remote_script`) — the interpreter that matters is the
+//! one on the machine the run tab will actually run on.
+
+use serde::{Deserialize, Serialize};
+use std::path::{Path, PathBuf};
+
+use crate::schema::project::Project;
+use crate::schema::projects::ProjectsList;
+use crate::storage;
+
+/// One interpreter the user could pick, as offered by the dialog.
+#[derive(Debug, Clone, Serialize, Deserialize, PartialEq)]
+pub struct PyInterpreter {
+    /// Where it came from: `venv` | `poetry` | `conda` | `pyenv` | `active` | `system`.
+    /// Drives the dialog's grouping and the auto-select precedence below.
+    pub kind: String,
+    /// The command Run/Debug executes. Relative (`.venv/bin/python`) for an in-tree
+    /// venv — the run tab's cwd is the project root — absolute otherwise.
+    pub path: String,
+    /// Human label for the dropdown, e.g. `conda: ml-env`.
+    pub label: String,
+}
+
+/// Precedence for auto-detect. Lower sorts first, and the first entry wins.
+/// A `conda` (named, not active) env never auto-wins — see the module note.
+fn auto_rank(kind: &str) -> u8 {
+    match kind {
+        "venv" => 0,    // in the project tree: unambiguous
+        "poetry" => 1,  // this project's env, per poetry itself
+        "active" => 2,  // the shell Eldrun was launched from
+        "pyenv" => 3,   // usually pinned by an in-tree .python-version
+        "system" => 5,
+        _ => 4, // "conda" (named): offered, never auto-selected
+    }
+}
+
+/// True when auto-detect may select this kind on its own.
+fn auto_selectable(kind: &str) -> bool {
+    matches!(kind, "venv" | "poetry" | "active" | "pyenv" | "system")
+}
+
+const WINDOWS: bool = cfg!(windows);
+
+fn default_interpreter() -> String {
+    if WINDOWS { "python".into() } else { "python3".into() }
+}
+
+/// The venv directory names we look for in the project root, in preference order.
+const VENV_DIRS: [&str; 3] = [".venv", "venv", "env"];
+
+/// How deep the tree scan hunts for venvs below the project root. A project may
+/// carry more than one (a top-level `.venv` plus a per-subproject one), so a
+/// root-only scan misses the rest; the cap keeps a deep tree from being walked in
+/// full for one dialog.
+const VENV_SCAN_MAX_DEPTH: usize = 4;
+
+/// Directory names never descended into while hunting for venvs: heavy or
+/// irrelevant subtrees (a venv's own `pyvenv.cfg` sits at its root, so we never
+/// need to walk *into* one, and `node_modules`/`.git` never hold a project venv).
+fn prunes_venv_scan(name: &str) -> bool {
+    matches!(
+        name,
+        ".git"
+            | "node_modules"
+            | "__pycache__"
+            | ".mypy_cache"
+            | ".pytest_cache"
+            | ".ruff_cache"
+            | ".tox"
+            | ".idea"
+            | ".vscode"
+            | "site-packages"
+    )
+}
+
+/// The interpreter inside a venv root, relative to it.
+fn venv_python_rel() -> &'static str {
+    if WINDOWS { "Scripts\\python.exe" } else { "bin/python" }
+}
+
+/// True when `dir` is a venv root: it carries a `pyvenv.cfg` (PEP 405, the
+/// canonical marker every `python -m venv`/`virtualenv` writes) *and* the
+/// interpreter. Requiring the marker is what keeps the recursive scan from
+/// mistaking a stray `env/bin/python` for an environment.
+fn is_venv_root(dir: &Path) -> bool {
+    dir.join("pyvenv.cfg").is_file() && dir.join(venv_python_rel()).is_file()
+}
+
+/// The label for a discovered in-tree venv: leads with its path relative to the
+/// project root, so two venvs in one project are told apart (`.venv` vs
+/// `services/api/.venv`).
+fn venv_label(rel: &Path) -> String {
+    format!("{} (in this project)", rel.to_string_lossy())
+}
+
+/// Every venv *anywhere* under the project root (bounded by `VENV_SCAN_MAX_DEPTH`),
+/// each as a project-relative interpreter path — the run tab's cwd is the project
+/// root, so a relative path keeps working when the project moves. A venv is never
+/// descended into (its `pyvenv.cfg` is at its root), and heavy dirs are pruned.
+/// Sorted shallowest-first so a top-level `.venv` sorts ahead of a nested one and
+/// wins auto-select.
+fn find_venvs(root: &Path) -> Vec<PyInterpreter> {
+    let mut roots: Vec<PathBuf> = Vec::new();
+    let mut stack: Vec<(PathBuf, usize)> = vec![(root.to_path_buf(), 0)];
+    while let Some((dir, depth)) = stack.pop() {
+        let Ok(entries) = std::fs::read_dir(&dir) else {
+            continue;
+        };
+        for child in entries.flatten().map(|e| e.path()).filter(|p| p.is_dir()) {
+            if is_venv_root(&child) {
+                roots.push(child); // a venv root — record it, don't walk into it
+                continue;
+            }
+            let name = child.file_name().and_then(|s| s.to_str()).unwrap_or("");
+            if depth < VENV_SCAN_MAX_DEPTH && !prunes_venv_scan(name) {
+                stack.push((child, depth + 1));
+            }
+        }
+    }
+    // Shallowest first, then lexicographic — a stable, sensible dropdown order that
+    // also puts the top-level venv (the auto-detect winner) ahead of nested ones.
+    roots.sort_by(|a, b| {
+        a.components()
+            .count()
+            .cmp(&b.components().count())
+            .then_with(|| a.cmp(b))
+    });
+    roots
+        .into_iter()
+        .filter_map(|d| {
+            let rel = d.strip_prefix(root).ok()?.to_path_buf();
+            Some(PyInterpreter {
+                kind: "venv".into(),
+                path: rel.join(venv_python_rel()).to_string_lossy().into_owned(),
+                label: venv_label(&rel),
+            })
+        })
+        .collect()
+}
+
+// ── Local discovery ──────────────────────────────────────────────────────────
+
+/// Run a helper program and return its trimmed stdout, or None if it isn't
+/// installed / failed. Every probe here is *optional* by design: a machine with no
+/// conda must not make interpreter discovery fail, it must simply offer no conda.
+fn probe(dir: &Path, program: &str, args: &[&str]) -> Option<String> {
+    let out = crate::paths::command_no_window(program)
+        .args(args)
+        .current_dir(dir)
+        .output()
+        .ok()?;
+    if !out.status.success() {
+        return None;
+    }
+    let s = String::from_utf8_lossy(&out.stdout).trim().to_string();
+    if s.is_empty() { None } else { Some(s) }
+}
+
+/// Interpreters visible from a LOCAL project directory.
+///
+/// Done natively rather than by shelling out a script because it must also work on
+/// Windows, where there is no `sh` and the interpreter sits at `Scripts\python.exe`.
+pub fn discover_local(dir: &Path) -> Vec<PyInterpreter> {
+    let mut out: Vec<PyInterpreter> = Vec::new();
+
+    // 1. venvs in the project tree — ALL of them, not just the root's, since a
+    //    project can carry several. `find_venvs` walks the tree for `pyvenv.cfg`
+    //    markers; the classic root names catch a venv that predates the marker.
+    out.extend(find_venvs(dir));
+    for name in VENV_DIRS {
+        let py = dir.join(name).join(venv_python_rel());
+        if py.is_file() {
+            out.push(PyInterpreter {
+                kind: "venv".into(),
+                // Relative: the run tab's cwd IS the project root, and a relative
+                // path keeps working if the project is moved. Native separators —
+                // `cmd.exe` will not exec `.venv/Scripts/python.exe`.
+                path: PathBuf::from(name)
+                    .join(venv_python_rel())
+                    .to_string_lossy()
+                    .into_owned(),
+                label: format!("{name} (in this project)"),
+            });
+        }
+    }
+
+    // 2. Poetry — the env lives outside the tree, so nothing else can find it.
+    if let Some(p) = probe(dir, "poetry", &["env", "info", "-p"]) {
+        let py = PathBuf::from(&p).join(venv_python_rel());
+        if py.is_file() {
+            out.push(PyInterpreter {
+                kind: "poetry".into(),
+                path: py.to_string_lossy().into_owned(),
+                label: format!("poetry ({})", basename_of(&p)),
+            });
+        }
+    }
+
+    // 3. The environment Eldrun itself was launched inside.
+    for (var, kind) in [("VIRTUAL_ENV", "active"), ("CONDA_PREFIX", "active")] {
+        if let Ok(root) = std::env::var(var) {
+            if root.is_empty() {
+                continue;
+            }
+            let py = PathBuf::from(&root).join(venv_python_rel());
+            if py.is_file() {
+                out.push(PyInterpreter {
+                    kind: kind.into(),
+                    path: py.to_string_lossy().into_owned(),
+                    label: format!("active ${var} ({})", basename_of(&root)),
+                });
+            }
+        }
+    }
+
+    // 4. Named conda envs — offered, never auto-picked.
+    if let Some(list) = probe(dir, "conda", &["env", "list"]) {
+        for env in parse_conda_envs(&list) {
+            let py = PathBuf::from(&env.1).join(venv_python_rel());
+            if py.is_file() {
+                out.push(PyInterpreter {
+                    kind: "conda".into(),
+                    path: py.to_string_lossy().into_owned(),
+                    label: format!("conda: {}", env.0),
+                });
+            }
+        }
+    }
+
+    // 5. pyenv — honours an in-tree `.python-version`, since we probe from `dir`.
+    if let Some(p) = probe(dir, "pyenv", &["which", "python"]) {
+        if Path::new(&p).is_file() {
+            out.push(PyInterpreter {
+                kind: "pyenv".into(),
+                path: p.clone(),
+                label: format!("pyenv ({})", basename_of(&p)),
+            });
+        }
+    }
+
+    // 6. The system interpreter — always last, always present as a fallback.
+    out.push(PyInterpreter {
+        kind: "system".into(),
+        path: default_interpreter(),
+        label: format!("system ({})", default_interpreter()),
+    });
+
+    dedupe_and_rank(out)
+}
+
+/// `conda env list` → `(name, prefix)` pairs. Its output is columns with a `*`
+/// marking the active env:
+/// ```text
+/// # conda environments:
+/// #
+/// base                  *  /home/u/miniconda3
+/// ml-env                   /home/u/miniconda3/envs/ml-env
+/// ```
+pub fn parse_conda_envs(stdout: &str) -> Vec<(String, String)> {
+    let mut out = Vec::new();
+    for line in stdout.lines() {
+        let line = line.trim();
+        if line.is_empty() || line.starts_with('#') {
+            continue;
+        }
+        let fields: Vec<&str> = line.split_whitespace().collect();
+        // Name first, prefix last; the optional `*` sits between them.
+        if fields.len() < 2 {
+            continue;
+        }
+        let name = fields[0];
+        let prefix = fields[fields.len() - 1];
+        if name == "*" || !prefix.starts_with('/') && !prefix.contains(":\\") {
+            continue;
+        }
+        out.push((name.to_string(), prefix.to_string()));
+    }
+    out
+}
+
+fn basename_of(p: &str) -> String {
+    p.rsplit(['/', '\\']).next().unwrap_or(p).to_string()
+}
+
+/// Drop duplicate interpreter paths (a poetry env can also be the active one) and
+/// order by auto-detect precedence, so `first()` IS the auto-detected choice.
+fn dedupe_and_rank(mut list: Vec<PyInterpreter>) -> Vec<PyInterpreter> {
+    list.sort_by_key(|i| auto_rank(&i.kind));
+    let mut seen = std::collections::HashSet::new();
+    list.retain(|i| seen.insert(i.path.clone()));
+    list
+}
+
+// ── Remote discovery ─────────────────────────────────────────────────────────
+
+/// The host-side probe. A **constant** POSIX-`sh` script (the `run_remote_script`
+/// contract: nothing may be interpolated into it), run with the project's remote
+/// dir as cwd so `poetry`/`pyenv` resolve *this* project's environment. Emits one
+/// `kind\tpath\tlabel` line per interpreter — collapsing what would otherwise be
+/// six SSH round trips into one.
+const REMOTE_PROBE: &str = r#"
+emit() { printf '%s\t%s\t%s\n' "$1" "$2" "$3"; }
+for d in .venv venv env; do
+  [ -x "$d/bin/python" ] && emit venv "$d/bin/python" "$d (in this project)"
+done
+find . -maxdepth 4 \( -name node_modules -o -name .git -o -name site-packages \) -prune \
+  -o -name pyvenv.cfg -type f -print 2>/dev/null | while read -r cfg; do
+  d=${cfg%/pyvenv.cfg}; d=${d#./}
+  [ -x "$d/bin/python" ] && emit venv "$d/bin/python" "$d (in this project)"
+done
+if command -v poetry >/dev/null 2>&1; then
+  p=$(poetry env info -p 2>/dev/null)
+  [ -n "$p" ] && [ -x "$p/bin/python" ] && emit poetry "$p/bin/python" "poetry ($(basename "$p"))"
+fi
+[ -n "$VIRTUAL_ENV" ] && [ -x "$VIRTUAL_ENV/bin/python" ] && \
+  emit active "$VIRTUAL_ENV/bin/python" "active \$VIRTUAL_ENV ($(basename "$VIRTUAL_ENV"))"
+[ -n "$CONDA_PREFIX" ] && [ -x "$CONDA_PREFIX/bin/python" ] && \
+  emit active "$CONDA_PREFIX/bin/python" "active \$CONDA_PREFIX ($(basename "$CONDA_PREFIX"))"
+if command -v conda >/dev/null 2>&1; then
+  conda env list 2>/dev/null | awk '!/^#/ && NF >= 2 { print $1, $NF }' | while read -r n p; do
+    [ -x "$p/bin/python" ] && emit conda "$p/bin/python" "conda: $n"
+  done
+fi
+if command -v pyenv >/dev/null 2>&1; then
+  p=$(pyenv which python 2>/dev/null)
+  [ -n "$p" ] && [ -x "$p" ] && emit pyenv "$p" "pyenv ($(basename "$p"))"
+fi
+p=$(command -v python3 || command -v python)
+[ -n "$p" ] && emit system "$p" "system ($p)"
+exit 0
+"#;
+
+/// Parse the `kind\tpath\tlabel` lines the remote probe emits.
+pub fn parse_remote_probe(stdout: &str) -> Vec<PyInterpreter> {
+    let mut out = Vec::new();
+    for line in stdout.lines() {
+        let mut f = line.splitn(3, '\t');
+        let (Some(kind), Some(path), Some(label)) = (f.next(), f.next(), f.next()) else {
+            continue;
+        };
+        if kind.is_empty() || path.is_empty() {
+            continue;
+        }
+        out.push(PyInterpreter {
+            kind: kind.to_string(),
+            path: path.to_string(),
+            label: label.to_string(),
+        });
+    }
+    dedupe_and_rank(out)
+}
+
+// ── Commands ─────────────────────────────────────────────────────────────────
+
+/// Every interpreter offered for `project_dir` — the dialog's dropdown. Probes the
+/// **host** for a remote project (that is where its run tab will run).
+#[tauri::command]
+pub fn python_interpreters(project_dir: String) -> Result<Vec<PyInterpreter>, String> {
+    if let Some(target) = crate::services::remote::remote_target_for_dir(&project_dir) {
+        let out = crate::services::ssh_exec::run_remote_script(&target.spec, REMOTE_PROBE)?;
+        return Ok(parse_remote_probe(&String::from_utf8_lossy(&out.stdout)));
+    }
+    Ok(discover_local(Path::new(&project_dir)))
+}
+
+/// The interpreter Run/Debug should use *right now*: the project's explicit choice
+/// if it has one (no probing), else the best auto-detected candidate, else the
+/// system default. This is the only thing `lib/pythonRun.ts` needs to ask.
+#[tauri::command]
+pub fn python_interpreter_for(
+    project_id: Option<String>,
+    project_dir: String,
+) -> Result<String, String> {
+    if let Some(pinned) = project_id.as_deref().and_then(project_python) {
+        return Ok(pinned);
+    }
+    let found = python_interpreters(project_dir).unwrap_or_default();
+    Ok(found
+        .into_iter()
+        .find(|i| auto_selectable(&i.kind))
+        .map(|i| i.path)
+        .unwrap_or_else(default_interpreter))
+}
+
+/// A project's pinned interpreter, read from the always-local `projects.json`
+/// mirror (falling back to `project.json` for entries predating the mirror) — the
+/// same two-store read as the sandbox spec.
+fn project_python(project_id: &str) -> Option<String> {
+    let list_path = storage::state_dir().join("projects.json");
+    let list: ProjectsList = storage::read_json(&list_path).ok()?;
+    let entry = list.iter().find(|p| p.id == project_id)?;
+    entry
+        .extra
+        .get("python_interpreter")
+        .and_then(|v| v.as_str())
+        .map(str::to_string)
+        .or_else(|| {
+            storage::read_json::<Project>(&PathBuf::from(&entry.local_file))
+                .ok()?
+                .python_interpreter
+        })
+        .filter(|s| !s.trim().is_empty())
+}
+
+/// Pin (or clear, with `None`/blank) the project's interpreter. Written to both
+/// stores, like the sandbox spec: the `projects.json` mirror is what the run path
+/// reads, `project.json` keeps it with the project.
+#[tauri::command]
+pub fn set_project_python(
+    project_id: String,
+    interpreter: Option<String>,
+) -> Result<Option<String>, String> {
+    let value = interpreter
+        .map(|s| s.trim().to_string())
+        .filter(|s| !s.is_empty());
+
+    let list_path = storage::state_dir().join("projects.json");
+    let mut list: ProjectsList = if list_path.exists() {
+        storage::read_json(&list_path).map_err(|e| e.to_string())?
+    } else {
+        Vec::new()
+    };
+    let entry = list
+        .iter_mut()
+        .find(|p| p.id == project_id)
+        .ok_or_else(|| format!("project '{project_id}' not found"))?;
+
+    match &value {
+        Some(v) => {
+            entry
+                .extra
+                .insert("python_interpreter".into(), serde_json::Value::String(v.clone()));
+        }
+        None => {
+            entry.extra.remove("python_interpreter");
+        }
+    }
+    let local_file = entry.local_file.clone();
+    storage::write_json(&list_path, &list).map_err(|e| e.to_string())?;
+
+    let proj_path = PathBuf::from(&local_file);
+    if proj_path.exists() {
+        if let Ok(mut project) = storage::read_json::<Project>(&proj_path) {
+            project.python_interpreter = value.clone();
+            storage::write_json(&proj_path, &project).map_err(|e| e.to_string())?;
+        }
+    }
+    Ok(value)
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn conda_env_list_is_parsed_name_and_prefix() {
+        let out = "# conda environments:\n#\nbase                  *  /home/u/miniconda3\nml-env                   /home/u/miniconda3/envs/ml-env\n";
+        assert_eq!(
+            parse_conda_envs(out),
+            vec![
+                ("base".to_string(), "/home/u/miniconda3".to_string()),
+                (
+                    "ml-env".to_string(),
+                    "/home/u/miniconda3/envs/ml-env".to_string()
+                ),
+            ]
+        );
+    }
+
+    #[test]
+    fn conda_comments_and_short_lines_are_skipped() {
+        assert!(parse_conda_envs("# nothing\n\ngarbage\n").is_empty());
+    }
+
+    #[test]
+    fn remote_probe_lines_are_parsed() {
+        let out = "venv\t.venv/bin/python\t.venv (in this project)\nsystem\t/usr/bin/python3\tsystem (/usr/bin/python3)\n";
+        let got = parse_remote_probe(out);
+        assert_eq!(got.len(), 2);
+        assert_eq!(got[0].kind, "venv");
+        assert_eq!(got[0].path, ".venv/bin/python");
+        assert_eq!(got[1].kind, "system");
+    }
+
+    #[test]
+    fn malformed_probe_lines_are_dropped_not_fatal() {
+        assert!(parse_remote_probe("garbage\nalso\tgarbage\n").is_empty());
+    }
+
+    #[test]
+    fn ranking_puts_an_in_tree_venv_first_and_system_last() {
+        let list = parse_remote_probe(
+            "system\t/usr/bin/python3\tsystem\nconda\t/c/envs/x/bin/python\tconda: x\nvenv\t.venv/bin/python\t.venv\n",
+        );
+        assert_eq!(list[0].kind, "venv");
+        assert_eq!(list.last().unwrap().kind, "system");
+    }
+
+    #[test]
+    fn a_named_conda_env_is_offered_but_never_auto_selected() {
+        // The dialog lists it; auto-detect must not pick one of N unrelated envs.
+        assert!(!auto_selectable("conda"));
+        assert!(auto_selectable("venv"));
+        assert!(auto_selectable("poetry"));
+        assert!(auto_selectable("system"));
+    }
+
+    #[test]
+    fn duplicate_paths_collapse_to_the_higher_ranked_kind() {
+        // A poetry env that is ALSO the active VIRTUAL_ENV must appear once.
+        let list = parse_remote_probe(
+            "active\t/e/x/bin/python\tactive\npoetry\t/e/x/bin/python\tpoetry (x)\n",
+        );
+        assert_eq!(list.len(), 1);
+        assert_eq!(list[0].kind, "poetry"); // ranked above "active"
+    }
+
+    #[test]
+    fn local_discovery_finds_an_in_tree_venv_as_a_relative_path() {
+        let tmp = std::env::temp_dir().join(format!("eldrun-py-{}", std::process::id()));
+        let bin = tmp.join(".venv").join(if WINDOWS { "Scripts" } else { "bin" });
+        std::fs::create_dir_all(&bin).unwrap();
+        let py = bin.join(if WINDOWS { "python.exe" } else { "python" });
+        std::fs::write(&py, b"#!/bin/sh\n").unwrap();
+        #[cfg(unix)]
+        {
+            use std::os::unix::fs::PermissionsExt;
+            std::fs::set_permissions(&py, std::fs::Permissions::from_mode(0o755)).unwrap();
+        }
+
+        let found = discover_local(&tmp);
+        // Relative, because the run tab's cwd is the project root.
+        assert_eq!(found[0].kind, "venv");
+        let expected = PathBuf::from(".venv")
+            .join(venv_python_rel())
+            .to_string_lossy()
+            .into_owned();
+        assert_eq!(found[0].path, expected);
+        // The system interpreter is always offered as the last resort.
+        assert!(found.iter().any(|i| i.kind == "system"));
+
+        std::fs::remove_dir_all(&tmp).ok();
+    }
+
+    /// Build a fake venv (interpreter + `pyvenv.cfg`) at `root/rel`.
+    #[cfg(test)]
+    fn make_fake_venv(root: &Path, rel: &str) {
+        let venv = root.join(rel);
+        let bin = venv.join(if WINDOWS { "Scripts" } else { "bin" });
+        std::fs::create_dir_all(&bin).unwrap();
+        let py = bin.join(if WINDOWS { "python.exe" } else { "python" });
+        std::fs::write(&py, b"#!/bin/sh\n").unwrap();
+        std::fs::write(venv.join("pyvenv.cfg"), b"home = /usr\n").unwrap();
+        #[cfg(unix)]
+        {
+            use std::os::unix::fs::PermissionsExt;
+            std::fs::set_permissions(&py, std::fs::Permissions::from_mode(0o755)).unwrap();
+        }
+    }
+
+    #[test]
+    fn local_discovery_finds_every_venv_in_the_tree_not_only_the_root() {
+        let tmp = std::env::temp_dir().join(format!("eldrun-py-multi-{}", std::process::id()));
+        std::fs::create_dir_all(&tmp).unwrap();
+        make_fake_venv(&tmp, ".venv");
+        make_fake_venv(&tmp, "services/api/.venv");
+
+        let found = discover_local(&tmp);
+        let venvs: Vec<&str> = found
+            .iter()
+            .filter(|i| i.kind == "venv")
+            .map(|i| i.path.as_str())
+            .collect();
+        let root_py = PathBuf::from(".venv").join(venv_python_rel());
+        // Build from components, not a "services/api/.venv" literal: discovery emits
+        // the relative path with the OS separator (backslash on Windows), so a
+        // forward-slash literal would fail the string compare there.
+        let nested_py = PathBuf::from("services")
+            .join("api")
+            .join(".venv")
+            .join(venv_python_rel());
+        assert!(venvs.contains(&root_py.to_string_lossy().as_ref()), "root venv missing: {venvs:?}");
+        assert!(
+            venvs.contains(&nested_py.to_string_lossy().as_ref()),
+            "nested venv missing: {venvs:?}"
+        );
+        // The top-level venv sorts first, so it stays the auto-detect winner.
+        assert_eq!(found[0].path, root_py.to_string_lossy());
+
+        std::fs::remove_dir_all(&tmp).ok();
+    }
+
+    #[test]
+    fn venv_scan_prunes_heavy_dirs() {
+        // A venv buried inside node_modules is not the project's — don't offer it,
+        // and don't pay to walk that subtree.
+        let tmp = std::env::temp_dir().join(format!("eldrun-py-prune-{}", std::process::id()));
+        std::fs::create_dir_all(&tmp).unwrap();
+        make_fake_venv(&tmp, "node_modules/pkg/.venv");
+        let found = find_venvs(&tmp);
+        assert!(found.is_empty(), "should not descend into node_modules: {found:?}");
+        std::fs::remove_dir_all(&tmp).ok();
+    }
+
+    #[test]
+    fn local_discovery_with_no_venv_still_offers_the_system_interpreter() {
+        let tmp = std::env::temp_dir().join(format!("eldrun-py-none-{}", std::process::id()));
+        std::fs::create_dir_all(&tmp).unwrap();
+        let found = discover_local(&tmp);
+        assert!(found.iter().any(|i| i.kind == "system"));
+        assert!(!found.iter().any(|i| i.kind == "venv"));
+        std::fs::remove_dir_all(&tmp).ok();
+    }
+}
diff --git a/src-tauri/src/commands/remote.rs b/src-tauri/src/commands/remote.rs
index a0ff1b3..e294f13 100644
--- a/src-tauri/src/commands/remote.rs
+++ b/src-tauri/src/commands/remote.rs
@@ -29,10 +29,87 @@ pub async fn remote_connect(
     manifest: State<'_, SyncManifestState>,
     auto: State<'_, AutoSyncState>,
     git_peer_reg: State<'_, GitPeerRegistry>,
+    worker_sync: State<'_, crate::services::worker_sync::WorkerSyncState>,
     project_id: String,
+    host_id: Option<String>,
     password: Option<String>,
 ) -> Result<(), String> {
-    remote::connect(pool.inner(), &project_id, password.as_deref()).await?;
+    let host_id = host_id.unwrap_or_else(|| remote::PRIMARY_HOST.to_string());
+    remote::connect_host(pool.inner(), &project_id, &host_id, password.as_deref()).await?;
+
+    // Best-effort "is this host already busy?" check, off the connect critical
+    // path: it runs one extra SSH round trip (riding the same ControlMaster this
+    // connect just opened), so it is spawned rather than awaited — a slow or
+    // failing probe must never delay activation. Fires for ANY host (primary or a
+    // multi-host `compute_hosts` worker) that just connected — the frontend's
+    // warning dialog groups every connected host's report by `host_id` into one
+    // combined view instead of only ever showing the primary's.
+    if let Some(target) = remote::remote_target_for_host(&project_id, &host_id) {
+        let app_for_usage = app.clone();
+        let usage_spec = target.spec.clone();
+        let usage_project_id = project_id.clone();
+        let usage_host_id = host_id.clone();
+        tauri::async_runtime::spawn(async move {
+            let result = tauri::async_runtime::spawn_blocking(move || {
+                crate::services::remote_usage::check_usage(&usage_spec)
+            })
+            .await;
+            if let Ok(Ok(report)) = result {
+                crate::services::remote_usage::emit_usage_report(
+                    &app_for_usage,
+                    &usage_project_id,
+                    &usage_host_id,
+                    &report,
+                );
+            }
+        });
+    }
+
+    // A WORKER connect skips the bidirectional primary machinery (git lockstep +
+    // byte-sync own the primary only) and instead kicks the push-only code fan-out
+    // that brings the worker's tracked tree up to the source HEAD (plan §2/§3.3).
+    // Exception: a SHARED-FILESYSTEM worker has no copy of its own — its tabs `cd`
+    // straight into the primary's shared folder — so there is nothing to sync and
+    // git must never run against that tree. Just leave the pool open.
+    if host_id != remote::PRIMARY_HOST {
+        let hosts = remote::compute_hosts_for(&project_id);
+        let worker = hosts.iter().find(|h| h.id == host_id);
+        let shared = worker.map(|h| h.shared_fs).unwrap_or(false);
+        // Record whether this worker authenticated with no password at all
+        // (key/agent auth) — the worker twin of the primary's key_auth recording
+        // below. It is the only way the Connect dialog can mark a passwordless
+        // worker auto-connect-eligible (it has nothing in the keychain to check),
+        // so without it a shared-fs HPC worker's Auto-connect toggle never enables.
+        if let Some(w) = worker {
+            let saved = crate::services::remote_credentials::has(
+                &crate::services::remote_credentials::ssh_account(
+                    &w.spec.user,
+                    &w.spec.host,
+                    w.spec.port,
+                ),
+            );
+            let key_auth = password.is_none() && !saved;
+            if let Err(e) = crate::commands::projects::record_worker_key_auth(
+                &project_id,
+                &host_id,
+                key_auth,
+            ) {
+                eprintln!("record worker auth mode for '{project_id}/{host_id}' failed: {e}");
+            }
+        }
+        if !shared {
+            crate::services::worker_sync::on_worker_connect(
+                app.clone(),
+                pool.inner().clone(),
+                worker_sync.inner().clone(),
+                &project_id,
+                &host_id,
+            )
+            .await;
+        }
+        return Ok(());
+    }
+
     // The connect succeeded; record whether it needed a password at all. No password
     // passed *and* none in the keychain means the host authenticated via key/agent —
     // the only way the UI can tell a passwordless host is auto-connect-eligible,
@@ -63,24 +140,243 @@ pub async fn remote_connect(
         manifest.inner().clone(),
         auto.inner().clone(),
         git_peer_reg.inner(),
+        worker_sync.inner().clone(),
         &project_id,
     )
     .await;
     Ok(())
 }
 
-/// Close and drop the pooled connection for a remote project (on deactivation).
-/// Stops the auto-sync task first (cancel + unwatch), then tears down the pool.
-/// No-op if nothing is pooled for it.
+/// The ids of every project whose pooled SSH connection is currently live —
+/// the authoritative backend truth `remote::is_connected` already computes for
+/// `network_ssh_link_snapshot`. Lets the frontend periodically reconcile
+/// `useRemoteStatusStore` (which only ever moves on an explicit connect/
+/// disconnect result) against reality: a pooled ssh child that exits on its own
+/// — a network drop, a keepalive eviction, a VPN tunnel getting replaced out
+/// from under it — is only ever noticed lazily, the next time some other
+/// command happens to touch that project's pool entry. Until then the lamp and
+/// the Connect dialog both keep reporting "connected" from stale frontend
+/// state while every read that actually asks the pool (like the network-
+/// traffic pane) correctly reports disconnected.
+#[tauri::command]
+pub async fn remote_connected_ids(pool: State<'_, RemotePoolState>) -> Result<Vec<String>, ()> {
+    Ok(remote::connected_ids(pool.inner()).await)
+}
+
+/// Close and drop the pooled connection for a remote project host (on
+/// deactivation, or a per-host lamp toggle). `host_id` defaults to the primary.
+/// For the **primary**, stops the auto-sync + git-lockstep tasks first (cancel +
+/// unwatch), then tears down the pool; a **worker** disconnect only drops its pool
+/// entry (it owns no lockstep/sync). No-op if nothing is pooled for it.
 #[tauri::command]
 pub async fn remote_disconnect(
     pool: State<'_, RemotePoolState>,
     auto: State<'_, AutoSyncState>,
     git_peer_reg: State<'_, GitPeerRegistry>,
     project_id: String,
+    host_id: Option<String>,
+) -> Result<(), String> {
+    let host_id = host_id.unwrap_or_else(|| remote::PRIMARY_HOST.to_string());
+    if host_id == remote::PRIMARY_HOST {
+        git_peer::stop(git_peer_reg.inner(), &project_id).await;
+        sync_auto::stop(auto.inner(), &project_id).await;
+    }
+    remote::disconnect_host(pool.inner(), &project_id, &host_id).await;
+    Ok(())
+}
+
+/// Disconnect **every** host of a remote project — primary and all workers — on
+/// project deactivation. Stops the primary's lockstep/auto-sync, then tears down
+/// all pooled entries for the project.
+#[tauri::command]
+pub async fn remote_disconnect_all_hosts(
+    pool: State<'_, RemotePoolState>,
+    auto: State<'_, AutoSyncState>,
+    git_peer_reg: State<'_, GitPeerRegistry>,
+    project_id: String,
 ) -> Result<(), String> {
     git_peer::stop(git_peer_reg.inner(), &project_id).await;
     sync_auto::stop(auto.inner(), &project_id).await;
-    remote::disconnect(pool.inner(), &project_id).await;
+    remote::disconnect_project(pool.inner(), &project_id).await;
     Ok(())
 }
+
+/// The `(project_id, host_id)` pairs whose pooled SSH connection is currently live
+/// — the per-host granular form of [`remote_connected_ids`], for the frontend to
+/// reconcile each host lamp against reality (see that command's rationale).
+#[tauri::command]
+pub async fn remote_connected_targets(
+    pool: State<'_, RemotePoolState>,
+) -> Result<Vec<(String, String)>, ()> {
+    Ok(remote::connected_targets(pool.inner()).await)
+}
+
+/// Manually push the mirror's current HEAD to a remote project's worker host (the
+/// pill's "Sync code now"). `force` re-pushes even when the worker is recorded as
+/// already at HEAD. Emits a `worker-sync-report` and returns the same report.
+#[tauri::command]
+pub async fn worker_sync_now(
+    pool: State<'_, RemotePoolState>,
+    project_id: String,
+    host_id: String,
+) -> Result<crate::services::worker_sync::WorkerSyncReport, String> {
+    let report =
+        crate::services::worker_sync::sync_worker(pool.inner(), &project_id, &host_id, true).await;
+    Ok(report)
+}
+
+/// Preview the size of a worker's pullable experiment outputs (its untracked
+/// files) so the frontend can confirm before a large transfer (plan §4.4).
+#[tauri::command]
+pub async fn worker_outputs_preview(
+    project_id: String,
+    host_id: String,
+) -> Result<crate::services::worker_sync::WorkerOutputsPreview, String> {
+    crate::services::worker_sync::preview_outputs(&project_id, &host_id).await
+}
+
+/// Pull a worker's untracked outputs into a local `outputs/<label>/` folder — the
+/// one, user-initiated worker→local byte path (plan §4.4/§8).
+#[tauri::command]
+pub async fn worker_pull_outputs(
+    pool: State<'_, RemotePoolState>,
+    project_id: String,
+    host_id: String,
+) -> Result<crate::services::worker_sync::WorkerPullReport, String> {
+    crate::services::worker_sync::pull_outputs(pool.inner(), &project_id, &host_id).await
+}
+
+/// Upload a LOCAL file to a remote project's tree over the pooled SFTP, streaming
+/// it in bounded chunks (so a large dataset never buffers whole). `dest_rel` is a
+/// project-relative destination path (its parent dirs are created); the file lands
+/// at `<remote_path>/<dest_rel>`. Used by the HPC pipeline wizard's "Load data"
+/// step (`docs/quirky-knitting-umbrella` plan). Primary host only; the project must
+/// already be connected (a cold pool errors rather than opening a second master).
+///
+/// `dest_rel` is sanitized to stay inside the project root: a leading `/` is
+/// dropped and a `..` component is refused, so an upload can never escape the tree.
+#[tauri::command]
+pub async fn remote_upload_file(
+    pool: State<'_, RemotePoolState>,
+    project_id: String,
+    local_path: String,
+    dest_rel: String,
+) -> Result<String, String> {
+    let target = remote::remote_target_for(&project_id)
+        .ok_or_else(|| "not a remote project".to_string())?;
+    let rel = dest_rel.trim().trim_start_matches('/');
+    if rel.is_empty() {
+        return Err("no destination given".to_string());
+    }
+    if rel.split('/').any(|c| c == ".." || c == ".") {
+        return Err(format!("invalid destination path '{dest_rel}'"));
+    }
+    let root = target.spec.remote_path.trim_end_matches('/');
+    let dest = format!("{root}/{rel}");
+    let sftp = remote::pooled_sftp(pool.inner(), &project_id)
+        .await
+        .ok_or_else(|| "remote project is not connected".to_string())?;
+    crate::services::sftp::upload_file_streaming_on(&sftp, std::path::Path::new(&local_path), &dest)
+        .await?;
+    Ok(dest)
+}
+
+/// List the tmux sessions running on a remote project host (TODO #85), for the
+/// Sessions view. Runs `tmux ls` over the pooled ControlMaster; an absent tmux or
+/// a not-running server yields an **empty** list, never an error (see
+/// `ssh_exec::parse_tmux_ls`). `host_id` defaults to the primary.
+#[tauri::command]
+pub async fn remote_tmux_list(
+    project_id: String,
+    host_id: Option<String>,
+) -> Result<Vec<crate::services::ssh_exec::TmuxSession>, String> {
+    let host_id = host_id.unwrap_or_else(|| remote::PRIMARY_HOST.to_string());
+    let target = remote::remote_target_for_host(&project_id, &host_id)
+        .ok_or_else(|| "not a remote project host".to_string())?;
+    tauri::async_runtime::spawn_blocking(move || {
+        let out = crate::services::ssh_exec::run_remote_script(
+            &target.spec,
+            crate::services::ssh_exec::tmux_ls_script(),
+        )?;
+        Ok(crate::services::ssh_exec::parse_tmux_ls(
+            &String::from_utf8_lossy(&out.stdout),
+        ))
+    })
+    .await
+    .map_err(|e| e.to_string())?
+}
+
+/// Kill a tmux session on a remote project host (TODO #85) — the destructive
+/// intent behind an **explicit** tab close of a persistent remote tab, and the
+/// Sessions view's per-row Kill. Fired only on explicit close (an app-exit /
+/// disconnect / respawn deliberately leaves the session alive). `host_id`
+/// defaults to the primary; `session` is `shell_quote`d inside the script.
+#[tauri::command]
+pub async fn remote_tmux_kill(
+    project_id: String,
+    host_id: Option<String>,
+    session: String,
+) -> Result<(), String> {
+    let host_id = host_id.unwrap_or_else(|| remote::PRIMARY_HOST.to_string());
+    let target = remote::remote_target_for_host(&project_id, &host_id)
+        .ok_or_else(|| "not a remote project host".to_string())?;
+    tauri::async_runtime::spawn_blocking(move || {
+        crate::services::ssh_exec::run_remote_script(
+            &target.spec,
+            &crate::services::ssh_exec::tmux_kill_session_script(&session),
+        )
+        .map(|_| ())
+    })
+    .await
+    .map_err(|e| e.to_string())?
+}
+
+/// Rename a tmux session on a remote project host (TODO #85) — the Sessions
+/// view's per-row Rename. `new_name` must be a safe tmux name
+/// (`ssh_exec::valid_tmux_session_name`); the (possibly foreign) `session` source
+/// name is only quoted. `host_id` defaults to the primary.
+#[tauri::command]
+pub async fn remote_tmux_rename(
+    project_id: String,
+    host_id: Option<String>,
+    session: String,
+    new_name: String,
+) -> Result<(), String> {
+    if !crate::services::ssh_exec::valid_tmux_session_name(&new_name) {
+        return Err(
+            "a session name may only contain letters, digits, '-' and '_'".to_string(),
+        );
+    }
+    let host_id = host_id.unwrap_or_else(|| remote::PRIMARY_HOST.to_string());
+    let target = remote::remote_target_for_host(&project_id, &host_id)
+        .ok_or_else(|| "not a remote project host".to_string())?;
+    tauri::async_runtime::spawn_blocking(move || {
+        crate::services::ssh_exec::run_remote_script(
+            &target.spec,
+            &crate::services::ssh_exec::tmux_rename_session_script(&session, &new_name),
+        )
+        .map(|_| ())
+    })
+    .await
+    .map_err(|e| e.to_string())?
+}
+
+/// On-demand resource check for an already-connected remote project (the
+/// warning dialog's "Recheck" action). Unlike the fire-and-forget check
+/// `remote_connect` runs on connect, this one is awaited and its result
+/// returned directly rather than pushed as an event. `host_id` defaults to the
+/// primary; the combined usage dialog rechecks each host it currently shows.
+#[tauri::command]
+pub async fn remote_usage_check(
+    project_id: String,
+    host_id: Option<String>,
+) -> Result<crate::services::remote_usage::RemoteUsageReport, String> {
+    let host_id = host_id.unwrap_or_else(|| remote::PRIMARY_HOST.to_string());
+    let target = remote::remote_target_for_host(&project_id, &host_id)
+        .ok_or_else(|| "not a remote project host".to_string())?;
+    tauri::async_runtime::spawn_blocking(move || {
+        crate::services::remote_usage::check_usage(&target.spec)
+    })
+    .await
+    .map_err(|e| e.to_string())?
+}
diff --git a/src-tauri/src/commands/slurm.rs b/src-tauri/src/commands/slurm.rs
new file mode 100644
index 0000000..04b5d39
--- /dev/null
+++ b/src-tauri/src/commands/slurm.rs
@@ -0,0 +1,407 @@
+//! SLURM run/watch core for HPC projects (`docs/quirky-knitting-umbrella` plan).
+//!
+//! A SLURM cluster forbids real computation on the login node — everything heavy
+//! goes through the scheduler (`sbatch`/`srun`). Eldrun already connects to such a
+//! host as a remote project;
+//! this module lets the user submit/query/cancel jobs without memorizing the
+//! commands, and the frontend turns the resulting log files and interactive shells
+//! into ordinary terminal tabs (`lib/slurm.ts`).
+//!
+//! Structure mirrors `commands::python`: each command resolves `project_dir` to a
+//! remote target with `remote_target_for_dir` (threading a specific worker host via
+//! `remote_target_for_host`) and runs a POSIX-`sh` script over the pooled
+//! ControlMaster (`run_remote_script`), or the same script through a local shell for
+//! a local project (a login node that itself has SLURM).
+//!
+//! **Security.** `run_remote_script` embeds its script *verbatim* — nothing may be
+//! interpolated into it that a user controls without quoting. So every path is
+//! `shell_quote`d (the same helper `git_peer`/`ssh_exec` use) and a job id is
+//! validated numeric (`^\d+$`) before it can touch `scontrol`/`scancel`. The pure
+//! parsers (`parse_submit_jobid`, `parse_scontrol_paths`, `parse_squeue`) are
+//! unit-tested against captured sample output.
+
+use serde::{Deserialize, Serialize};
+
+use crate::services::remote::{remote_target_for_dir, remote_target_for_host, PRIMARY_HOST};
+use crate::services::ssh_exec::{run_remote_script, shell_quote};
+
+/// Whether SLURM is usable for a project's host, and its version banner.
+#[derive(Debug, Clone, Serialize, Deserialize, PartialEq)]
+pub struct SlurmInfo {
+    pub available: bool,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub version: Option<String>,
+}
+
+/// The result of a submit: the parsed job id plus the real output paths SLURM
+/// resolved (absolute, `%j`/`%x`-expanded), so the frontend can tail the right file.
+#[derive(Debug, Clone, Serialize, Deserialize, PartialEq)]
+pub struct SlurmSubmit {
+    pub job_id: String,
+    pub out_file: String,
+    pub err_file: String,
+    pub work_dir: String,
+}
+
+/// One row of `squeue`, for the Jobs view.
+#[derive(Debug, Clone, Serialize, Deserialize, PartialEq)]
+pub struct SlurmJob {
+    pub id: String,
+    pub name: String,
+    pub state: String,
+    pub time: String,
+    pub nodes: String,
+    pub reason: String,
+}
+
+/// Paths lifted out of `scontrol show job` output.
+#[derive(Debug, Clone, Default, PartialEq)]
+pub struct ScontrolPaths {
+    pub out_file: String,
+    pub err_file: String,
+    pub work_dir: String,
+}
+
+// ── Dispatch ─────────────────────────────────────────────────────────────────
+
+/// Run `script` for `project_dir` on `host_id` and return its stdout. Remote
+/// projects run it over the pooled ControlMaster (the primary, or a named worker);
+/// a local project (a login node with SLURM) runs it through the local shell with
+/// the project dir as cwd. `host_id` defaults to the primary.
+fn run_slurm_script(project_dir: &str, host_id: &str, script: &str) -> Result<String, String> {
+    if let Some(primary) = remote_target_for_dir(project_dir) {
+        let target = if host_id == PRIMARY_HOST {
+            primary
+        } else {
+            remote_target_for_host(&primary.project_id, host_id)
+                .ok_or_else(|| format!("unknown remote host '{host_id}'"))?
+        };
+        let out = run_remote_script(&target.spec, script)?;
+        if !out.status.success() && out.stdout.is_empty() {
+            return Err(String::from_utf8_lossy(&out.stderr).trim().to_string());
+        }
+        return Ok(String::from_utf8_lossy(&out.stdout).into_owned());
+    }
+    // Local project: run the same POSIX-sh script with the project dir as cwd.
+    let out = crate::paths::command_no_window("sh")
+        .arg("-c")
+        .arg(script)
+        .current_dir(project_dir)
+        .output()
+        .map_err(|e| format!("failed to run slurm command locally: {e}"))?;
+    if !out.status.success() && out.stdout.is_empty() {
+        return Err(String::from_utf8_lossy(&out.stderr).trim().to_string());
+    }
+    Ok(String::from_utf8_lossy(&out.stdout).into_owned())
+}
+
+// ── Pure parsers ─────────────────────────────────────────────────────────────
+
+/// `sbatch --parsable` prints `<jobid>` or `<jobid>;<cluster>` on its first line.
+/// Returns the numeric id, or `None` if the first non-empty line isn't one (an
+/// error message, an empty submit). Validating numeric here is also the injection
+/// guard: only a `^\d+$` id is ever spliced into `scontrol`/`scancel`.
+pub fn parse_submit_jobid(stdout: &str) -> Option<String> {
+    let line = stdout.lines().map(str::trim).find(|l| !l.is_empty())?;
+    let id = line.split(';').next().unwrap_or(line).trim();
+    if !id.is_empty() && id.bytes().all(|b| b.is_ascii_digit()) {
+        Some(id.to_string())
+    } else {
+        None
+    }
+}
+
+/// `scontrol show job <id>` emits whitespace-separated `Key=Value` tokens across
+/// several lines; we want `StdOut=`, `StdErr=`, `WorkDir=` (absolute, already
+/// `%j`/`%x`-expanded by SLURM). A value can itself contain no whitespace in
+/// practice for these path keys, so a plain token split is correct.
+pub fn parse_scontrol_paths(stdout: &str) -> ScontrolPaths {
+    let mut paths = ScontrolPaths::default();
+    for tok in stdout.split_whitespace() {
+        if let Some(v) = tok.strip_prefix("StdOut=") {
+            paths.out_file = v.to_string();
+        } else if let Some(v) = tok.strip_prefix("StdErr=") {
+            paths.err_file = v.to_string();
+        } else if let Some(v) = tok.strip_prefix("WorkDir=") {
+            paths.work_dir = v.to_string();
+        }
+    }
+    paths
+}
+
+/// Parse `squeue … -o '%i|%j|%T|%M|%D|%R'` output — one job per line, six
+/// pipe-separated fields (`%R`, the reason, may itself contain spaces but never a
+/// pipe, so `splitn(6, '|')` is safe). Blank lines are skipped.
+pub fn parse_squeue(stdout: &str) -> Vec<SlurmJob> {
+    let mut out = Vec::new();
+    for line in stdout.lines() {
+        let line = line.trim_end();
+        if line.trim().is_empty() {
+            continue;
+        }
+        let f: Vec<&str> = line.splitn(6, '|').collect();
+        if f.len() < 6 {
+            continue;
+        }
+        out.push(SlurmJob {
+            id: f[0].trim().to_string(),
+            name: f[1].trim().to_string(),
+            state: f[2].trim().to_string(),
+            time: f[3].trim().to_string(),
+            nodes: f[4].trim().to_string(),
+            reason: f[5].trim().to_string(),
+        });
+    }
+    out
+}
+
+/// Split a script path into `(dir, base)`, both empty-safe. `dir` is the parent
+/// (empty when the path is a bare file name); `base` the file name. **Absolute
+/// paths are preserved** — the frontend passes the file's absolute host/local path
+/// so the same command works for a remote project (where the viewer path is the
+/// host-absolute path) and a local one, without either side computing a rel path.
+/// Uses forward slashes (the host is POSIX). A leading `/` therefore makes `dir`
+/// absolute (`/home/a/p`), so the `cd` lands correctly regardless of cwd.
+fn split_script_rel(script_rel: &str) -> (String, String) {
+    let s = script_rel.trim().trim_end_matches('/');
+    match s.rfind('/') {
+        // Keep a lone leading slash (root file `/x`): dir = "/".
+        Some(0) => ("/".to_string(), s[1..].to_string()),
+        Some(i) => (s[..i].to_string(), s[i + 1..].to_string()),
+        None => (String::new(), s.to_string()),
+    }
+}
+
+/// The default `sbatch` output file when `scontrol` couldn't be consulted:
+/// `<work_dir>/slurm-<jobid>.out`, SLURM's own default pattern.
+fn default_out_file(work_dir: &str, job_id: &str) -> String {
+    if work_dir.is_empty() {
+        format!("slurm-{job_id}.out")
+    } else {
+        format!("{}/slurm-{job_id}.out", work_dir.trim_end_matches('/'))
+    }
+}
+
+// ── Commands ─────────────────────────────────────────────────────────────────
+
+/// Is SLURM available on the project's host? Lets the UI hide itself off-HPC.
+#[tauri::command]
+pub fn slurm_available(
+    project_dir: String,
+    host_id: Option<String>,
+) -> Result<SlurmInfo, String> {
+    let host = host_id.as_deref().unwrap_or(PRIMARY_HOST);
+    // Constant script — nothing interpolated.
+    let script = "command -v sbatch >/dev/null 2>&1 || exit 0\n\
+                  sbatch --version 2>/dev/null | head -n1";
+    let out = run_slurm_script(&project_dir, host, script).unwrap_or_default();
+    let version = out.lines().next().map(str::trim).filter(|s| !s.is_empty());
+    Ok(SlurmInfo {
+        available: version.is_some(),
+        version: version.map(str::to_string),
+    })
+}
+
+/// Submit `script_rel` (project-relative) with `sbatch`, then resolve its real
+/// output paths via `scontrol` — in one round trip: the numeric job id comes from
+/// `sbatch`'s own output, so chaining `scontrol` on it injects nothing.
+#[tauri::command]
+pub fn slurm_submit(
+    project_dir: String,
+    script_rel: String,
+    host_id: Option<String>,
+) -> Result<SlurmSubmit, String> {
+    let host = host_id.as_deref().unwrap_or(PRIMARY_HOST);
+    let (dir, base) = split_script_rel(&script_rel);
+    if base.is_empty() {
+        return Err("no script file given".into());
+    }
+    // cd into the script's own directory so the job's default WorkDir is where the
+    // script lives; sbatch --parsable prints the job id; scontrol (fed sbatch's own
+    // id) resolves the absolute out/err/work paths. `${jid%%;*}` strips a
+    // `;<cluster>` suffix for the scontrol lookup.
+    let cd = if dir.is_empty() {
+        String::new()
+    } else {
+        format!("cd {} && ", shell_quote(&dir))
+    };
+    let script = format!(
+        "{cd}jid=$(sbatch --parsable {base}) || exit 1\n\
+         printf '%s\\n' \"$jid\"\n\
+         scontrol show job \"${{jid%%;*}}\" 2>/dev/null",
+        base = shell_quote(&base),
+    );
+    let stdout = run_slurm_script(&project_dir, host, &script)?;
+
+    let mut lines = stdout.lines();
+    let first = lines.next().unwrap_or("").trim();
+    let job_id = parse_submit_jobid(first)
+        .ok_or_else(|| format!("sbatch did not return a job id:\n{}", stdout.trim()))?;
+    let rest: String = lines.collect::<Vec<_>>().join("\n");
+    let paths = parse_scontrol_paths(&rest);
+
+    let out_file = if paths.out_file.is_empty() {
+        default_out_file(&paths.work_dir, &job_id)
+    } else {
+        paths.out_file
+    };
+    Ok(SlurmSubmit {
+        job_id,
+        out_file,
+        err_file: paths.err_file,
+        work_dir: paths.work_dir,
+    })
+}
+
+/// The current user's jobs on the host. `--me` (newer SLURM) with a `-u "$USER"`
+/// fallback for sites where it isn't supported. Constant script.
+#[tauri::command]
+pub fn slurm_queue(
+    project_dir: String,
+    host_id: Option<String>,
+) -> Result<Vec<SlurmJob>, String> {
+    let host = host_id.as_deref().unwrap_or(PRIMARY_HOST);
+    let fmt = "%i|%j|%T|%M|%D|%R";
+    let script = format!(
+        "squeue --me --noheader -o '{fmt}' 2>/dev/null || \
+         squeue -u \"$USER\" --noheader -o '{fmt}'"
+    );
+    let stdout = run_slurm_script(&project_dir, host, &script)?;
+    Ok(parse_squeue(&stdout))
+}
+
+/// Resolve a job's stdout path via `scontrol` — for **Watch** on a job Eldrun did
+/// not submit this session (so the session store has no path for it). Returns the
+/// absolute `StdOut`, or a `slurm-<id>.out` fallback in `WorkDir` when scontrol is
+/// silent (a job that already finished). The id is validated numeric.
+#[tauri::command]
+pub fn slurm_job_out(
+    project_dir: String,
+    job_id: String,
+    host_id: Option<String>,
+) -> Result<String, String> {
+    let host = host_id.as_deref().unwrap_or(PRIMARY_HOST);
+    if job_id.is_empty() || !job_id.bytes().all(|b| b.is_ascii_digit()) {
+        return Err(format!("invalid job id '{job_id}'"));
+    }
+    let stdout = run_slurm_script(&project_dir, host, &format!("scontrol show job {job_id}"))?;
+    let paths = parse_scontrol_paths(&stdout);
+    if !paths.out_file.is_empty() {
+        Ok(paths.out_file)
+    } else {
+        Ok(default_out_file(&paths.work_dir, &job_id))
+    }
+}
+
+/// Cancel a job. The id is validated numeric before it touches the command.
+#[tauri::command]
+pub fn slurm_cancel(
+    project_dir: String,
+    job_id: String,
+    host_id: Option<String>,
+) -> Result<(), String> {
+    let host = host_id.as_deref().unwrap_or(PRIMARY_HOST);
+    if job_id.is_empty() || !job_id.bytes().all(|b| b.is_ascii_digit()) {
+        return Err(format!("invalid job id '{job_id}'"));
+    }
+    run_slurm_script(&project_dir, host, &format!("scancel {job_id}"))?;
+    Ok(())
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn submit_jobid_plain_and_with_cluster_suffix() {
+        assert_eq!(parse_submit_jobid("1234567\n").as_deref(), Some("1234567"));
+        assert_eq!(
+            parse_submit_jobid("1234567;cluster\n").as_deref(),
+            Some("1234567")
+        );
+    }
+
+    #[test]
+    fn submit_jobid_rejects_error_text() {
+        assert!(parse_submit_jobid("sbatch: error: Batch job submission failed").is_none());
+        assert!(parse_submit_jobid("").is_none());
+        assert!(parse_submit_jobid("\n\n").is_none());
+    }
+
+    #[test]
+    fn scontrol_paths_are_lifted_from_tokens() {
+        let out = "JobId=1234567 JobName=train\n   \
+                   UserId=alice(1000) GroupId=alice(1000)\n   \
+                   WorkDir=/home/alice/proj StdOut=/home/alice/proj/slurm-1234567.out \
+                   StdErr=/home/alice/proj/slurm-1234567.err\n";
+        let p = parse_scontrol_paths(out);
+        assert_eq!(p.work_dir, "/home/alice/proj");
+        assert_eq!(p.out_file, "/home/alice/proj/slurm-1234567.out");
+        assert_eq!(p.err_file, "/home/alice/proj/slurm-1234567.err");
+    }
+
+    #[test]
+    fn scontrol_paths_empty_when_absent() {
+        assert_eq!(parse_scontrol_paths("JobId=1 JobName=x"), ScontrolPaths::default());
+    }
+
+    #[test]
+    fn squeue_rows_are_parsed() {
+        let out = "42|train.slurm|RUNNING|1:23|2|(None)\n\
+                   43|prep|PENDING|0:00|1|(Priority)\n\n";
+        let jobs = parse_squeue(out);
+        assert_eq!(jobs.len(), 2);
+        assert_eq!(jobs[0].id, "42");
+        assert_eq!(jobs[0].name, "train.slurm");
+        assert_eq!(jobs[0].state, "RUNNING");
+        assert_eq!(jobs[0].nodes, "2");
+        assert_eq!(jobs[0].reason, "(None)");
+        assert_eq!(jobs[1].state, "PENDING");
+        assert_eq!(jobs[1].reason, "(Priority)");
+    }
+
+    #[test]
+    fn squeue_reason_with_spaces_survives() {
+        // %R can be a multi-word reason; splitn(6) keeps it whole.
+        let jobs = parse_squeue("7|j|PENDING|0:00|1|(Resources not available)\n");
+        assert_eq!(jobs[0].reason, "(Resources not available)");
+    }
+
+    #[test]
+    fn squeue_short_lines_skipped() {
+        assert!(parse_squeue("garbage\n1|2|3\n").is_empty());
+    }
+
+    #[test]
+    fn split_script_rel_variants() {
+        assert_eq!(split_script_rel("train.slurm"), ("".into(), "train.slurm".into()));
+        assert_eq!(
+            split_script_rel("jobs/train.slurm"),
+            ("jobs".into(), "train.slurm".into())
+        );
+        assert_eq!(
+            split_script_rel("a/b/c.slurm"),
+            ("a/b".into(), "c.slurm".into())
+        );
+    }
+
+    #[test]
+    fn split_script_rel_keeps_absolute_paths() {
+        // The frontend passes the file's absolute path; the leading slash must
+        // survive so the `cd` is absolute (host-agnostic between remote/local).
+        assert_eq!(
+            split_script_rel("/home/alice/proj/train.slurm"),
+            ("/home/alice/proj".into(), "train.slurm".into())
+        );
+        assert_eq!(split_script_rel("/train.slurm"), ("/".into(), "train.slurm".into()));
+    }
+
+    #[test]
+    fn default_out_file_follows_slurm_pattern() {
+        assert_eq!(
+            default_out_file("/home/alice/proj", "42"),
+            "/home/alice/proj/slurm-42.out"
+        );
+        assert_eq!(default_out_file("", "42"), "slurm-42.out");
+    }
+}
diff --git a/src-tauri/src/commands/ssh.rs b/src-tauri/src/commands/ssh.rs
index 2e41f46..a5d7034 100644
--- a/src-tauri/src/commands/ssh.rs
+++ b/src-tauri/src/commands/ssh.rs
@@ -152,6 +152,55 @@ pub fn remote_remember_path(host: String, path: String) -> Result<(), String> {
     crate::storage::write_json(&remote_paths_path(), &store).map_err(|e| e.to_string())
 }
 
+/// File backing the per-host **standard** remote paths set from Settings'
+/// "Remote Connections" panel — a `HashMap<host, path>`, keyed case-
+/// insensitively like `remote_paths.json`. Distinct from that file: this one
+/// holds one explicit, user-chosen default per host, not an auto-remembered
+/// recents list.
+fn remote_host_defaults_path() -> std::path::PathBuf {
+    crate::storage::state_dir().join("remote_host_defaults.json")
+}
+
+/// All per-host standard paths configured from Settings, for the "Remote
+/// Connections" panel to list and edit.
+#[tauri::command]
+pub fn remote_list_default_paths() -> std::collections::HashMap<String, String> {
+    crate::storage::read_json(&remote_host_defaults_path()).unwrap_or_default()
+}
+
+/// The configured standard remote path for `host`, if any. Consulted when a
+/// connect/browse flow would otherwise fall back to `ssh_default_dir`'s SSH
+/// home-directory guess, so a host with a preferred working directory starts
+/// there instead every time.
+#[tauri::command]
+pub fn remote_get_default_path(host: String) -> Option<String> {
+    let store: std::collections::HashMap<String, String> =
+        crate::storage::read_json(&remote_host_defaults_path()).unwrap_or_default();
+    store.get(&host.to_lowercase()).cloned()
+}
+
+/// Set (or, with a blank `path`, clear) the standard remote path for `host`.
+/// Trims and validates a non-empty path the same way `remote_remember_path`
+/// does, so it can't smuggle in an `ssh`/`sftp`-option-looking value or
+/// control characters.
+#[tauri::command]
+pub fn remote_set_default_path(host: String, path: String) -> Result<(), String> {
+    let key = host.trim().to_lowercase();
+    if key.is_empty() {
+        return Err("empty host".to_string());
+    }
+    let mut store: std::collections::HashMap<String, String> =
+        crate::storage::read_json(&remote_host_defaults_path()).unwrap_or_default();
+    let trimmed = path.trim();
+    if trimmed.is_empty() {
+        store.remove(&key);
+    } else {
+        crate::services::ssh_common::validate_arg("remote path", trimmed)?;
+        store.insert(key, trimmed.to_string());
+    }
+    crate::storage::write_json(&remote_host_defaults_path(), &store).map_err(|e| e.to_string())
+}
+
 /// Open a web URL in the user's default browser. Refuses anything that is not an
 /// `http(s)` URL so it cannot be turned into a launcher for arbitrary local files
 /// or schemes.
@@ -193,7 +242,12 @@ fn capture(mut cmd: Command, what: &str) -> Result<String, String> {
 ///     supports `SSH_ASKPASS_REQUIRE`, with `sshpass -e` as the legacy fallback.
 ///   - otherwise → key/agent auth in `BatchMode=yes` (the original v1 flow).
 /// Returns ssh stdout on success or the trimmed stderr on failure.
-fn run_ssh_auth(
+///
+/// `pub(crate)`: also called by
+/// `commands::global_machines::global_machine_monitor_snapshot`, which needs
+/// this exact password-vs-key branching for a project-free host (no pooled
+/// ControlMaster to ride, unlike `remote_usage::check_usage`).
+pub(crate) fn run_ssh_auth(
     user: &Option<String>,
     host: &str,
     port: Option<u16>,
@@ -408,6 +462,81 @@ pub fn remote_forget_password(
     crate::services::remote_credentials::set(&account, None)
 }
 
+/// Kill every tmux session on a remote host — the "end all my running jobs" half
+/// of an **active** disconnect. Rides a live multiplexing master if one exists (a
+/// project/HPC host with a pooled connection), otherwise authenticates ad-hoc
+/// with the saved credential (a global machine, which pools nothing) — the same
+/// `run_ssh_auth` branching `global_machine_monitor_snapshot` uses.
+///
+/// EXPLICIT-ACTION ONLY. Persistent tmux sessions are meant to outlive a tab
+/// close, an app quit and a relaunch (the whole point of #85); this is the one
+/// deliberate path that ends them, and it must never fire on deactivation or
+/// restart. `tmux kill-server` reporting "no server running" is success (there
+/// was nothing to kill), so the whole command is best-effort past reachability.
+#[tauri::command]
+pub async fn remote_kill_all_jobs(
+    user: Option<String>,
+    host: String,
+    port: Option<u16>,
+) -> Result<(), String> {
+    tokio::task::spawn_blocking(move || {
+        use crate::services::remote_credentials as creds;
+        let password = creds::get(&creds::ssh_account(&user, &host, port));
+        run_ssh_auth(
+            &user,
+            &host,
+            port,
+            password.as_deref(),
+            &["tmux kill-server 2>/dev/null; true"],
+        )
+        .map(|_| ())
+    })
+    .await
+    .map_err(|e| format!("kill-jobs task failed: {e}"))?
+}
+
+/// Close the shared multiplexing master for a host (`ssh -O exit`) so an active
+/// disconnect really severs the SSH connection, not just the lamp. Best-effort:
+/// a host with no live master — a pure global machine never opens one
+/// (`ControlMaster=no`, see `ssh_common::control_reuse_opts`) — yields a harmless
+/// no-op. A **project** host tears its pool down through `remote_disconnect`
+/// instead (which also stops its lockstep/auto-sync); this is for the project-
+/// free **global machines**, which pool nothing of their own.
+#[tauri::command]
+pub async fn ssh_close_master(
+    user: Option<String>,
+    host: String,
+    port: Option<u16>,
+) -> Result<(), String> {
+    tokio::task::spawn_blocking(move || {
+        close_control_master(&user, &host, port);
+        Ok(())
+    })
+    .await
+    .map_err(|e| format!("close-master task failed: {e}"))?
+}
+
+/// Ask a live ControlMaster for this host to exit, over the shared `cm-%C`
+/// socket. Unix-only — Windows OpenSSH has no control socket (see `ssh_pty_args`).
+#[cfg(not(target_os = "windows"))]
+fn close_control_master(user: &Option<String>, host: &str, port: Option<u16>) {
+    let Ok(target) = crate::services::ssh_common::ssh_target(user, host) else {
+        return;
+    };
+    let control_path = crate::services::ssh_exec::control_dir().join("cm-%C");
+    let mut cmd = crate::paths::command_no_window("ssh");
+    cmd.arg("-o")
+        .arg(format!("ControlPath={}", control_path.to_string_lossy()));
+    if let Some(port) = port {
+        cmd.arg("-p").arg(port.to_string());
+    }
+    cmd.arg("-O").arg("exit").arg(&target);
+    let _ = cmd.output();
+}
+
+#[cfg(target_os = "windows")]
+fn close_control_master(_user: &Option<String>, _host: &str, _port: Option<u16>) {}
+
 /// Return the remote default (home) directory as the browser's start location.
 /// Resolved over SFTP (REALPATH of `.`), so no remote shell runs.
 #[tauri::command]
diff --git a/src-tauri/src/commands/subwindow.rs b/src-tauri/src/commands/subwindow.rs
index 4608853..dd4bce5 100644
--- a/src-tauri/src/commands/subwindow.rs
+++ b/src-tauri/src/commands/subwindow.rs
@@ -20,7 +20,9 @@ use tauri::{
     WebviewWindowBuilder, WebviewUrl,
 };
 
-use crate::commands::apps::{TrackedWindow, WindowRegistryState, ORIGIN_DETACHED_SUBWINDOW};
+use crate::commands::apps::{
+    TrackedWindow, WindowRegistry, WindowRegistryState, ORIGIN_DETACHED_SUBWINDOW,
+};
 use crate::commands::workspace::WorkspaceStateArc;
 
 /// Stable Tauri window label for a detached group. One window per (project,
@@ -48,6 +50,31 @@ pub fn detached_decorations(os: crate::paths::OsKind) -> bool {
     os == crate::paths::OsKind::Macos
 }
 
+/// Reserve the lowest free display number for `label` (the N in "Eldrun
+/// win-N"). Must run under the registry lock so a concurrent detach (or a
+/// restart batch respawning several popouts) can't pick the same one.
+pub fn reserve_detached_seq(reg: &mut WindowRegistry, label: &str) -> u32 {
+    let used: std::collections::HashSet<u32> = reg.detached_seqs.values().copied().collect();
+    let n = (1u32..).find(|n| !used.contains(n)).expect("a free u32 always exists");
+    reg.detached_seqs.insert(label.to_string(), n);
+    n
+}
+
+/// Drop a detached window's registry footprint: its display number (so the
+/// next detach can reuse it — "the second window is always win-1") and its
+/// `TrackedWindow`. Returns the native window id (if one was resolved) so the
+/// caller can unset the parkable override. Idempotent: a label with no
+/// footprint is a no-op returning `None`, which is what makes it safe to call
+/// from BOTH `attach_subwindow` and the `WindowEvent::Destroyed` hook — the
+/// dock-back path fires it twice.
+pub fn release_detached_entry(reg: &mut WindowRegistry, label: &str) -> Option<u64> {
+    reg.detached_seqs.remove(label);
+    // Drop any captured switch-back geometry too, so a docked/closed label never
+    // leaves a stale bounds entry a reused label could later pick up (#42).
+    reg.detached_bounds.remove(label);
+    reg.windows.remove(label).and_then(|w| w.window_id)
+}
+
 /// PHYSICAL-pixel position to apply to a freshly-built detached window from the
 /// optional restore-geometry args, or `None` to let the WM place it.
 ///
@@ -116,18 +143,14 @@ pub async fn detach_subwindow(
         return Ok(label);
     }
 
-    // Reserve the lowest free display number under the registry lock so a
-    // concurrent detach (or a restart batch respawning several popouts) can't
-    // pick the same one. The number becomes the OS title "Eldrun win-N" and, on
-    // X11, the resolver key — hence it must be unique per live window. It's freed
-    // in `attach_subwindow` on dock-back/close, so freed numbers get reused.
-    let seq = {
-        let mut reg = win_registry.lock().unwrap();
-        let used: std::collections::HashSet<u32> = reg.detached_seqs.values().copied().collect();
-        let n = (1u32..).find(|n| !used.contains(n)).expect("a free u32 always exists");
-        reg.detached_seqs.insert(label.clone(), n);
-        n
-    };
+    // Reserve the lowest free display number. It becomes the OS title
+    // "Eldrun win-N" and, on X11, the resolver key — hence it must be unique per
+    // live window. It's freed on dock-back/close (`attach_subwindow`) AND on any
+    // other destruction via the `WindowEvent::Destroyed` hook in `lib.rs` (the
+    // popout self-destroys on seed timeout, last-tab close and the WM-close
+    // safety net without ever calling attach), so freed numbers get reused and a
+    // lone popout is always "win-1".
+    let seq = reserve_detached_seq(&mut win_registry.lock().unwrap(), &label);
     let title = detached_title(seq);
 
     let mut builder = WebviewWindowBuilder::new(
@@ -160,7 +183,7 @@ pub async fn detach_subwindow(
         Err(e) => {
             // Release the reserved number so a rare failed build doesn't
             // permanently skip a slot.
-            win_registry.lock().unwrap().detached_seqs.remove(&label);
+            release_detached_entry(&mut win_registry.lock().unwrap(), &label);
             return Err(format!("build detached window: {e}"));
         }
     };
@@ -277,15 +300,9 @@ pub fn attach_subwindow(
 ) -> Result<(), String> {
     // Drop the parkable override first so a stray park can't target a closing id.
     // Free the display number in the same critical section so it can be reused.
-    let removed = {
-        let mut reg = win_registry.lock().unwrap();
-        reg.detached_seqs.remove(&registry_id);
-        reg.windows.remove(&registry_id)
-    };
-    if let Some(win) = removed {
-        if let Some(wid) = win.window_id {
-            workspace.lock().unwrap().backend.unset_parkable(wid);
-        }
+    let wid = release_detached_entry(&mut win_registry.lock().unwrap(), &registry_id);
+    if let Some(wid) = wid {
+        workspace.lock().unwrap().backend.unset_parkable(wid);
     }
     if let Some(window) = app.get_webview_window(&registry_id) {
         // `destroy()` (not `close()`) so the removal is immediate: `close()` fires
@@ -425,6 +442,64 @@ mod tests {
         }
     }
 
+    fn tracked(label: &str, window_id: Option<u64>) -> TrackedWindow {
+        TrackedWindow {
+            id: label.to_string(),
+            exec: "eldrun-detached".to_string(),
+            file: None,
+            pid: 1,
+            project_id: Some("p1".to_string()),
+            role: Some("g-1".to_string()),
+            opened_at: 0.0,
+            window_id,
+            origin: ORIGIN_DETACHED_SUBWINDOW.to_string(),
+        }
+    }
+
+    #[test]
+    fn released_numbers_are_reused_lowest_first() {
+        // The user-visible guarantee: a lone popout is always "win-1". Reserve
+        // three, release the first two (whichever way their windows died), and
+        // the next detach must take 1 — not climb to 4.
+        let mut reg = WindowRegistry::default();
+        assert_eq!(reserve_detached_seq(&mut reg, "detached-p1-g-1"), 1);
+        assert_eq!(reserve_detached_seq(&mut reg, "detached-p1-g-2"), 2);
+        assert_eq!(reserve_detached_seq(&mut reg, "detached-p1-g-3"), 3);
+        release_detached_entry(&mut reg, "detached-p1-g-1");
+        release_detached_entry(&mut reg, "detached-p1-g-2");
+        assert_eq!(reserve_detached_seq(&mut reg, "detached-p1-g-4"), 1);
+        // 3 is still live, so the one after takes 2, never a duplicate 3.
+        assert_eq!(reserve_detached_seq(&mut reg, "detached-p1-g-5"), 2);
+    }
+
+    #[test]
+    fn release_is_idempotent_and_returns_the_native_id() {
+        // The Destroyed hook fires after `attach_subwindow` already freed the
+        // entry, so a second release of the same label must be a clean no-op.
+        let mut reg = WindowRegistry::default();
+        let label = "detached-p1-g-1";
+        reserve_detached_seq(&mut reg, label);
+        reg.windows.insert(label.to_string(), tracked(label, Some(42)));
+        assert_eq!(release_detached_entry(&mut reg, label), Some(42));
+        assert!(reg.detached_seqs.is_empty());
+        assert!(reg.windows.is_empty());
+        // Second release (and a never-registered label): no-op, no id.
+        assert_eq!(release_detached_entry(&mut reg, label), None);
+        assert_eq!(release_detached_entry(&mut reg, "detached-p1-g-9"), None);
+    }
+
+    #[test]
+    fn release_without_native_id_still_frees_the_number() {
+        // A popout whose native id never resolved (e.g. macOS) must still give
+        // its display number back.
+        let mut reg = WindowRegistry::default();
+        let label = "detached-p1-g-1";
+        reserve_detached_seq(&mut reg, label);
+        reg.windows.insert(label.to_string(), tracked(label, None));
+        assert_eq!(release_detached_entry(&mut reg, label), None);
+        assert_eq!(reserve_detached_seq(&mut reg, "detached-p1-g-2"), 1);
+    }
+
     #[test]
     fn missing_or_invalid_geometry_keeps_the_default() {
         // A partial position is ignored (WM places the window).
diff --git a/src-tauri/src/commands/sync.rs b/src-tauri/src/commands/sync.rs
index a636129..66d0578 100644
--- a/src-tauri/src/commands/sync.rs
+++ b/src-tauri/src/commands/sync.rs
@@ -33,6 +33,58 @@ use crate::services::sftp;
 /// so a large selection can't flood it.
 const STAT_CONCURRENCY: usize = 16;
 
+/// Size cutoff for content-verifying an amber verdict during a `sync_status`
+/// refresh. Size+mtime is only a *heuristic* for divergence — a re-save with the
+/// same bytes, or a bare `touch`, moves the mtime while the content is unchanged,
+/// so the file paints amber with nothing actually to resolve. For files at or
+/// below this size we confirm the amber against the actual bytes and downgrade a
+/// byte-identical pair to green (re-recording the base so it *stays* green). Files
+/// ABOVE this keep the pure metadata heuristic — reading them over SFTP on every
+/// refresh is exactly the cost the heuristic exists to avoid.
+const CONTENT_VERIFY_MAX_BYTES: u64 = 1024 * 1024; // 1 MiB
+
+/// A rebase captured when an amber file proves byte-identical: the host + local
+/// `(size, mtime)` to stamp as the new sync base so the file goes (and stays)
+/// green instead of re-reading its bytes on every refresh.
+struct ContentRebase {
+    rel: String,
+    host_size: u64,
+    host_mtime: Option<u64>,
+    local_size: u64,
+    local_mtime: Option<u64>,
+}
+
+/// Confirm an amber verdict against the actual bytes, for a file small enough to
+/// be worth reading. Returns `Some(rebase)` only when both sides exist, are the
+/// same size, sit within [`CONTENT_VERIFY_MAX_BYTES`], and hold identical bytes —
+/// i.e. the divergence was metadata-only. Returns `None` (stay amber) otherwise,
+/// including on any read error: an unreadable side keeps the conservative amber.
+async fn verify_amber_identical(
+    sftp: &Sftp,
+    host_abs: &str,
+    mirror_path: &std::path::Path,
+    rel: &str,
+    host: (u64, Option<u64>),
+    local: (u64, Option<u64>),
+) -> Option<ContentRebase> {
+    let (host_size, host_mtime) = host;
+    let (local_size, local_mtime) = local;
+    // Gate the read on the pure heuristic-vs-content policy (both sides present,
+    // same size, within the cutoff — large files keep the metadata heuristic).
+    if !remote_sync::content_verify_worth_it(host, local, CONTENT_VERIFY_MAX_BYTES) {
+        return None;
+    }
+    let host_bytes = sftp::read_file_on(sftp, host_abs).await.ok()?;
+    let local_bytes = std::fs::read(mirror_path).ok()?;
+    (host_bytes == local_bytes).then_some(ContentRebase {
+        rel: rel.to_string(),
+        host_size,
+        host_mtime,
+        local_size,
+        local_mtime,
+    })
+}
+
 /// One row of sync status for the file-tree overlay.
 #[derive(Debug, Clone, Serialize)]
 pub struct SyncStatusEntry {
@@ -333,23 +385,61 @@ pub async fn sync_status(
                 let (size, mtime) = remote_sync::stat_or_zero(&sftp, &host_abs).await;
                 // Also re-stat the local mirror so a local-only edit flips to amber
                 // (symmetric divergence — the host may be unchanged).
-                let local = std::fs::metadata(mirror_local_path(&project_id, &rel))
-                    .ok()
-                    .map(|m| local_meta(&m));
-                let state = remote_sync::compute_state(&entry, Some((size, mtime)), local);
-                SyncStatusEntry {
-                    rel_path: rel,
-                    is_dir: false,
-                    selected: true,
-                    state,
-                    auto_sync: auto,
+                let mirror_path = mirror_local_path(&project_id, &rel);
+                let local = std::fs::metadata(&mirror_path).ok().map(|m| local_meta(&m));
+                let mut state = remote_sync::compute_state(&entry, Some((size, mtime)), local);
+                // A metadata-only amber (same bytes, drifted mtime/size-vs-base) is a
+                // false positive: for a small file, confirm against the actual bytes
+                // and downgrade an identical pair to green, capturing the rebase so it
+                // is re-recorded and stays green. Large files keep the heuristic.
+                let mut rebase = None;
+                if state == SyncState::Amber {
+                    if let Some(local_vals) = local {
+                        if let Some(rb) = verify_amber_identical(
+                            &sftp, &host_abs, &mirror_path, &rel, (size, mtime), local_vals,
+                        )
+                        .await
+                        {
+                            state = SyncState::Green;
+                            rebase = Some(rb);
+                        }
+                    }
                 }
+                (
+                    SyncStatusEntry {
+                        rel_path: rel,
+                        is_dir: false,
+                        selected: true,
+                        state,
+                        auto_sync: auto,
+                    },
+                    rebase,
+                )
             }
         }))
         .buffer_unordered(STAT_CONCURRENCY)
         .collect::<Vec<_>>()
         .await;
-        out.extend(statted);
+        // Split the rows from the content-verified rebases: the rows go straight to
+        // the response, the rebases are stamped into the manifest under the single-
+        // writer lock and persisted once (only when at least one file self-healed).
+        let mut rebases = Vec::new();
+        for (row, rb) in statted {
+            if let Some(rb) = rb {
+                rebases.push(rb);
+            }
+            out.push(row);
+        }
+        if !rebases.is_empty() {
+            let mut guard = manifest.lock().await;
+            let m = ensure_loaded(&mut guard, &project_id);
+            for rb in &rebases {
+                remote_sync::record_pull(
+                    m, &rb.rel, rb.host_size, rb.host_mtime, rb.local_size, rb.local_mtime,
+                );
+            }
+            let _ = remote_sync::save_manifest(&project_id, m);
+        }
     }
     Ok(out)
 }
@@ -412,6 +502,55 @@ pub async fn sync_file_meta(
     Ok(SyncFileMeta { rel_path, local, host, base_size, base_mtime })
 }
 
+/// Byte-for-byte check for one diverged (amber) file, run when the three-way
+/// merge viewer opens it. If the local mirror and the current host copy hold
+/// **identical bytes**, the divergence was metadata-only (a re-save with the same
+/// content, a bare `touch`, or a stale base): re-record the sync base from both
+/// sides' fresh `(size, mtime)` so the file clears amber → green — no transfer,
+/// since the bytes already match — and return `true`. Returns `false` when the
+/// sides genuinely differ, or when either side is missing/unreadable (a real
+/// divergence the viewer must resolve). Requires a live pooled connection to read
+/// the host over SFTP; a cold pool errors via `resolve`.
+///
+/// This is the same "amber is size+mtime, not content" self-heal that
+/// [`verify_amber_identical`] applies during a `sync_status` refresh, but WITHOUT
+/// that path's size cutoff: the user explicitly opened the viewer for this one
+/// file, so reading it once — however large — is a decision, not the per-refresh
+/// cost the heuristic exists to avoid.
+#[tauri::command]
+pub async fn sync_resolve_if_identical(
+    project_id: String,
+    rel_path: String,
+    pool: State<'_, RemotePoolState>,
+    manifest: State<'_, SyncManifestState>,
+) -> Result<bool, String> {
+    let (target, sftp) = resolve(&project_id, pool.inner()).await?;
+    let host_abs = join_remote(&target.spec.remote_path, &rel_path);
+    // Read both sides fully. A side that can't be read (deleted on the host, never
+    // pulled locally) is not "identical" — leave it amber for the merge viewer.
+    let Ok(host_bytes) = sftp::read_file_on(&sftp, &host_abs).await else {
+        return Ok(false);
+    };
+    let mirror_path = mirror_local_path(&project_id, &rel_path);
+    let Ok(local_bytes) = std::fs::read(&mirror_path) else {
+        return Ok(false);
+    };
+    if host_bytes != local_bytes {
+        return Ok(false);
+    }
+    // Identical: stamp a fresh base from each side's current metadata so the file
+    // goes (and stays) green without any byte transfer.
+    let (host_size, host_mtime) = sftp::metadata_on(&sftp, &host_abs)
+        .await
+        .unwrap_or((host_bytes.len() as u64, None));
+    let (ls, lm) = local_size_mtime(std::fs::metadata(&mirror_path).ok());
+    let mut guard = manifest.lock().await;
+    let m = ensure_loaded(&mut guard, &project_id);
+    remote_sync::record_pull(m, &rel_path, host_size, host_mtime, ls, lm);
+    remote_sync::save_manifest(&project_id, m)?;
+    Ok(true)
+}
+
 /// Result of a local→remote push: how many files were written, and which
 /// project-relative paths were blocked by a stale host base (only populated when
 /// `force` is false — the frontend prompts per conflict and re-calls with the
diff --git a/src-tauri/src/commands/terminal.rs b/src-tauri/src/commands/terminal.rs
index dd3f7f7..cbe3730 100644
--- a/src-tauri/src/commands/terminal.rs
+++ b/src-tauri/src/commands/terminal.rs
@@ -142,6 +142,17 @@ pub async fn pty_spawn(
         crate::services::ssh_exec::wrap_pty_options(&mut opts)?;
     }
 
+    // Persistent LOCAL (tmux) sessions (TODO #85): a tab that resolved to a LOCAL
+    // spawn — i.e. ssh/docker wrapping did NOT rewrite it — and carries a
+    // `tmux_session` name is wrapped in a tmux session on this machine, so the run
+    // survives an Eldrun crash and the tab reattaches on restart. A remote tab is
+    // now `cmd == "ssh"` (its tmux is inside the remote command) and a container tab
+    // is `cmd == "docker"`, so both are skipped. No-op on Windows / without tmux.
+    #[cfg(unix)]
+    if opts.tmux_session.is_some() && opts.cmd != "ssh" && opts.cmd != "docker" {
+        crate::services::tmux_local::wrap_pty_options_local(&mut opts);
+    }
+
     // Crash-loop guard.
     {
         let mut reg = registry.lock().unwrap();
@@ -156,6 +167,60 @@ pub async fn pty_spawn(
     crate::terminal::spawn_pty(app, registry.inner().clone(), opts)
 }
 
+/// List the tmux sessions running on the **local** machine (TODO #85), for a local
+/// project's Sessions view. Empty on Windows / without tmux / no server.
+#[tauri::command]
+pub async fn local_tmux_list() -> Result<Vec<crate::services::ssh_exec::TmuxSession>, String> {
+    if !crate::services::tmux_local::tmux_available() {
+        return Ok(Vec::new());
+    }
+    tauri::async_runtime::spawn_blocking(|| {
+        let out = crate::paths::command_no_window("tmux")
+            .args(crate::services::tmux_local::local_tmux_ls_args())
+            .output();
+        match out {
+            Ok(o) => crate::services::ssh_exec::parse_tmux_ls(&String::from_utf8_lossy(&o.stdout)),
+            Err(_) => Vec::new(),
+        }
+    })
+    .await
+    .map_err(|e| e.to_string())
+}
+
+/// Kill a **local** tmux session (TODO #85) — the explicit-close / Sessions-view
+/// kill of a local persistent tab. No-op on Windows / without tmux.
+#[tauri::command]
+pub async fn local_tmux_kill(session: String) -> Result<(), String> {
+    if !crate::services::tmux_local::tmux_available() {
+        return Ok(());
+    }
+    tauri::async_runtime::spawn_blocking(move || {
+        let _ = crate::paths::command_no_window("tmux")
+            .args(crate::services::tmux_local::local_tmux_kill_args(&session))
+            .output();
+    })
+    .await
+    .map_err(|e| e.to_string())
+}
+
+/// Rename a **local** tmux session (TODO #85). `new_name` must be a safe tmux name.
+#[tauri::command]
+pub async fn local_tmux_rename(session: String, new_name: String) -> Result<(), String> {
+    if !crate::services::ssh_exec::valid_tmux_session_name(&new_name) {
+        return Err("a session name may only contain letters, digits, '-' and '_'".to_string());
+    }
+    if !crate::services::tmux_local::tmux_available() {
+        return Ok(());
+    }
+    tauri::async_runtime::spawn_blocking(move || {
+        let _ = crate::paths::command_no_window("tmux")
+            .args(crate::services::tmux_local::local_tmux_rename_args(&session, &new_name))
+            .output();
+    })
+    .await
+    .map_err(|e| e.to_string())
+}
+
 #[tauri::command]
 pub async fn pty_write(
     registry: State<'_, RegistryState>,
diff --git a/src-tauri/src/gpustat.rs b/src-tauri/src/gpustat.rs
new file mode 100644
index 0000000..7e4e434
--- /dev/null
+++ b/src-tauri/src/gpustat.rs
@@ -0,0 +1,1007 @@
+//! Whole-system GPU memory sampling for the GPU readouts (header, system
+//! monitor, local-model menu).
+//!
+//! This is the *device's* memory, not one process's share of it: the number that
+//! answers "how much GPU memory is left before I load a model?". Ollama's own
+//! `/api/ps` figure (`commands::ollama::total_vram_in_use`) remains a line in the
+//! breakdown, no longer the whole reading.
+//!
+//! A GPU's memory comes in **two pools** and both are reported, because on an
+//! integrated GPU only one of them is real: the dedicated **VRAM** carve-out
+//! (typically 512 MB on an APU — the framebuffer, and permanently ~full, so
+//! reading it alone says nothing) and the **shared** pool the driver maps out of
+//! system RAM (`GTT` on amdgpu — where a model actually lands). On a discrete
+//! card the shared pool is ~0 and the combined figure collapses to plain device
+//! VRAM. Callers sum the two; this module keeps them apart so the UI can show the
+//! split.
+//!
+//! Sources, in the order they are tried:
+//! - **DRM sysfs** (Linux): `/sys/class/drm/card*/device/mem_info_*` +
+//!   `gpu_busy_percent`. Plain file reads — no tool, no root, cheap enough to
+//!   poll. Exposed by `amdgpu`; Intel's `i915` does not expose it (its memory
+//!   accounting lives behind root-only debugfs), so an Intel-only box reports no
+//!   GPU memory rather than a wrong one.
+//! - **`nvidia-smi`** (Linux + Windows): the only portable read of NVIDIA memory.
+//!   A process spawn, so its absence is remembered ([`NVIDIA_RETRY`]) instead of
+//!   being paid for on every poll.
+//! - Anything else (macOS, unknown drivers) samples nothing and the UI falls back
+//!   to the Ollama figure.
+
+use serde::Serialize;
+use std::collections::HashMap;
+use std::sync::Mutex;
+use std::time::{Duration, Instant};
+
+/// One GPU's memory (and utilization, when the driver reports it).
+///
+/// `vram_*` is dedicated device memory; `shared_*` is system memory mapped for
+/// the GPU (amdgpu's GTT), which is `0` on a discrete card. `busy_percent` is
+/// `None` when the driver won't say — distinct from `Some(0.0)`, an idle GPU.
+///
+/// The trailing scalars are the *sensor* readings — temperature, power, clocks,
+/// fan, PCIe link and driver version — each `None` when the driver or platform
+/// won't report it (an APU exposes no `power1_cap`, a laptop's `nvidia-smi`
+/// answers `[N/A]` in power-saving). They come from the *same* cheap sysfs /
+/// `nvidia-smi` read as the memory figures, so every surface that already samples
+/// a GPU gets them for free. Per-**process** GPU usage is deliberately *not* here:
+/// it is a separate, heavier walk ([`process_snapshot`]) only the monitor pane pays
+/// for, so the always-visible header readout stays cheap.
+#[derive(Serialize, Clone, Debug, Default, PartialEq)]
+pub struct GpuSample {
+    pub name: String,
+    pub driver: String,
+    pub vram_used: u64,
+    pub vram_total: u64,
+    pub shared_used: u64,
+    pub shared_total: u64,
+    pub busy_percent: Option<f64>,
+    /// Edge/core temperature, °C.
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub temp_c: Option<f64>,
+    /// Instantaneous board power draw, watts.
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub power_w: Option<f64>,
+    /// Board power limit/cap, watts — the ceiling `power_w` is measured against.
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub power_cap_w: Option<f64>,
+    /// Core (shader) clock, MHz.
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub sclk_mhz: Option<u64>,
+    /// Memory clock, MHz.
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub mclk_mhz: Option<u64>,
+    /// Fan speed as 0–100% of its range (not RPM).
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub fan_percent: Option<f64>,
+    /// Kernel/driver version string (`nvidia-smi` only; amdgpu exposes none per-card).
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub driver_version: Option<String>,
+    /// Current PCIe link generation (1–5) and lane width (e.g. 16).
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub pcie_gen: Option<u32>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub pcie_width: Option<u32>,
+}
+
+/// One process's share of GPU memory, for the monitor pane's per-process list.
+///
+/// A *gauge* (bytes resident on the GPU right now), not a cumulative counter, so
+/// it needs no delta between samples — unlike engine-time utilization, which is
+/// why this carries memory only. `name` is the process's `comm` (Linux) or the
+/// `process_name` `nvidia-smi` reports.
+#[derive(Serialize, Clone, Debug, Default, PartialEq)]
+pub struct GpuProc {
+    pub pid: u32,
+    pub name: String,
+    pub mem_bytes: u64,
+}
+
+/// Upper bound on cache reuse. Three surfaces poll this independently (header,
+/// monitor pane, model menu); without the cache a `nvidia-smi` spawn would be
+/// paid three times over per tick.
+const CACHE_TTL: Duration = Duration::from_millis(1000);
+
+/// How long a missing `nvidia-smi` is believed. Long enough that the common case
+/// (no NVIDIA GPU) costs one failed spawn rather than one per poll, short enough
+/// that installing the driver doesn't require an app restart to be noticed.
+const NVIDIA_RETRY: Duration = Duration::from_secs(60);
+
+static CACHE: Mutex<Option<(Instant, Vec<GpuSample>)>> = Mutex::new(None);
+static NVIDIA_MISSING_UNTIL: Mutex<Option<Instant>> = Mutex::new(None);
+
+/// Every GPU this machine will talk about, memoized for [`CACHE_TTL`]. Returns an
+/// empty vec (never an error) on a platform or driver we can't read, so callers
+/// treat "no GPU information" as a display fallback rather than a failure.
+pub fn snapshot() -> Vec<GpuSample> {
+    if let Some((at, gpus)) = CACHE.lock().ok().and_then(|c| c.clone()) {
+        if at.elapsed() < CACHE_TTL {
+            return gpus;
+        }
+    }
+
+    let gpus = sample();
+    if let Ok(mut cache) = CACHE.lock() {
+        *cache = Some((Instant::now(), gpus.clone()));
+    }
+    gpus
+}
+
+/// The two sources are disjoint by construction, so there is nothing to
+/// de-duplicate: [`drm_sample`] only keeps cards that expose `mem_info_*` (i.e.
+/// `amdgpu`), and the proprietary NVIDIA driver exposes none — its cards come
+/// from `nvidia-smi` alone.
+fn sample() -> Vec<GpuSample> {
+    let mut gpus = drm_sample();
+    gpus.extend(nvidia_sample());
+    gpus
+}
+
+// ── DRM sysfs (Linux) ────────────────────────────────────────────────────────
+
+/// The sysfs files backing one DRM card, read as strings. Split out from the
+/// filesystem walk so [`parse_drm_card`] stays pure and testable on a machine
+/// with no such GPU (i.e. CI).
+/// The sysfs files backing one DRM card, read as strings. `pub(crate)` — the
+/// remote-snapshot parser in [`crate::sysstat`] rebuilds one of these from the
+/// host's files (shipped over SSH) and runs it through the same [`parse_drm_card`],
+/// so the local and host AMD readings share one code path.
+#[derive(Default)]
+pub(crate) struct DrmFiles {
+    driver: String,
+    vendor: String,
+    device: String,
+    vram_used: Option<String>,
+    vram_total: Option<String>,
+    gtt_used: Option<String>,
+    gtt_total: Option<String>,
+    busy: Option<String>,
+    // Sensor reads. `temp`/`power`/`power_cap` come from the card's hwmon subdir
+    // (millidegrees / microwatts); `pwm`/`pwm_max` give a fan percent; `sclk`/`mclk`
+    // are the `pp_dpm_*` clock tables (the active state is flagged `*`); the two
+    // `link_*` files describe the current PCIe link.
+    temp: Option<String>,
+    power: Option<String>,
+    power_cap: Option<String>,
+    pwm: Option<String>,
+    pwm_max: Option<String>,
+    sclk: Option<String>,
+    mclk: Option<String>,
+    link_speed: Option<String>,
+    link_width: Option<String>,
+}
+
+fn parse_u64(s: Option<&String>) -> u64 {
+    s.and_then(|v| v.trim().parse::<u64>().ok()).unwrap_or(0)
+}
+
+/// A hwmon millidegree/milliunit reading (`temp1_input` is °C×1000) as its base unit.
+fn parse_milli(s: Option<&String>) -> Option<f64> {
+    s.and_then(|v| v.trim().parse::<f64>().ok())
+        .map(|m| m / 1000.0)
+}
+
+/// A hwmon micro-unit reading (`power1_average` is watts×1e6) as its base unit.
+fn parse_micro(s: Option<&String>) -> Option<f64> {
+    s.and_then(|v| v.trim().parse::<f64>().ok())
+        .map(|m| m / 1_000_000.0)
+}
+
+/// Fan speed as 0–100% from a raw `pwm1` (0–`pwm1_max`, default 255) reading.
+fn parse_pwm_percent(pwm: Option<&String>, max: Option<&String>) -> Option<f64> {
+    let pwm = pwm.and_then(|v| v.trim().parse::<f64>().ok())?;
+    let max = max
+        .and_then(|m| m.trim().parse::<f64>().ok())
+        .filter(|m| *m > 0.0)
+        .unwrap_or(255.0);
+    Some((pwm / max * 100.0).clamp(0.0, 100.0))
+}
+
+/// amdgpu's `pp_dpm_sclk`/`pp_dpm_mclk` list every DPM state, one per line
+/// (`1: 1000Mhz *`), with the **active** one flagged `*`. Returns its MHz.
+fn parse_active_clock_mhz(s: Option<&String>) -> Option<u64> {
+    let line = s?.lines().find(|l| l.contains('*'))?;
+    line.split_whitespace().find_map(|tok| {
+        tok.to_ascii_lowercase()
+            .strip_suffix("mhz")
+            .and_then(|n| n.parse::<u64>().ok())
+    })
+}
+
+/// PCIe generation from a `current_link_speed` string (`"16.0 GT/s PCIe"`),
+/// mapping the transfer rate to the gen that introduced it.
+fn pcie_gen_from_speed(s: Option<&String>) -> Option<u32> {
+    let gts = s?.split_whitespace().next()?.parse::<f64>().ok()?;
+    Some(if gts >= 32.0 {
+        5
+    } else if gts >= 16.0 {
+        4
+    } else if gts >= 8.0 {
+        3
+    } else if gts >= 5.0 {
+        2
+    } else {
+        1
+    })
+}
+
+/// A card is only reported when it states a **VRAM total**: that is the marker
+/// that this driver does memory accounting at all. Without it (Intel `i915`, the
+/// NVIDIA blob) every byte figure would be a zero pretending to be a measurement.
+/// Set one [`DrmFiles`] field by its sysfs basename, for the remote parser that
+/// receives the host's files as `key`/`value` pairs. An empty `value` (a file the
+/// host didn't have) is the caller's cue to skip, so this is only handed real ones.
+pub(crate) fn set_drm_field(files: &mut DrmFiles, key: &str, value: &str) {
+    let owned = || Some(value.to_string());
+    match key {
+        "driver" => files.driver = value.to_string(),
+        "vendor" => files.vendor = value.to_string(),
+        "device" => files.device = value.to_string(),
+        "vram_used" => files.vram_used = owned(),
+        "vram_total" => files.vram_total = owned(),
+        "gtt_used" => files.gtt_used = owned(),
+        "gtt_total" => files.gtt_total = owned(),
+        "busy" => files.busy = owned(),
+        "temp" => files.temp = owned(),
+        "power" => files.power = owned(),
+        "power_cap" => files.power_cap = owned(),
+        "pwm" => files.pwm = owned(),
+        "pwm_max" => files.pwm_max = owned(),
+        "sclk" => files.sclk = owned(),
+        "mclk" => files.mclk = owned(),
+        "link_speed" => files.link_speed = owned(),
+        "link_width" => files.link_width = owned(),
+        _ => {}
+    }
+}
+
+pub(crate) fn parse_drm_card(index: u32, files: &DrmFiles) -> Option<GpuSample> {
+    let vram_total = parse_u64(files.vram_total.as_ref());
+    if vram_total == 0 {
+        return None;
+    }
+
+    Some(GpuSample {
+        name: gpu_name(&files.vendor, &files.device, index),
+        driver: files.driver.clone(),
+        vram_used: parse_u64(files.vram_used.as_ref()),
+        vram_total,
+        shared_used: parse_u64(files.gtt_used.as_ref()),
+        shared_total: parse_u64(files.gtt_total.as_ref()),
+        busy_percent: files
+            .busy
+            .as_ref()
+            .and_then(|b| b.trim().parse::<f64>().ok()),
+        temp_c: parse_milli(files.temp.as_ref()),
+        power_w: parse_micro(files.power.as_ref()),
+        power_cap_w: parse_micro(files.power_cap.as_ref()),
+        sclk_mhz: parse_active_clock_mhz(files.sclk.as_ref()),
+        mclk_mhz: parse_active_clock_mhz(files.mclk.as_ref()),
+        fan_percent: parse_pwm_percent(files.pwm.as_ref(), files.pwm_max.as_ref()),
+        // amdgpu exposes no clean per-card driver version in sysfs; leave it unset
+        // rather than surface the kernel release, which isn't the GPU driver.
+        driver_version: None,
+        pcie_gen: pcie_gen_from_speed(files.link_speed.as_ref()),
+        pcie_width: files
+            .link_width
+            .as_ref()
+            .and_then(|w| w.trim().parse::<u32>().ok()),
+    })
+}
+
+#[cfg(target_os = "linux")]
+fn drm_sample() -> Vec<GpuSample> {
+    use std::fs;
+
+    let Ok(entries) = fs::read_dir("/sys/class/drm") else {
+        return Vec::new();
+    };
+
+    let mut cards: Vec<(u32, GpuSample)> = Vec::new();
+    for entry in entries.flatten() {
+        // Only whole cards ("card1"), not their connectors ("card1-DP-1").
+        let name = entry.file_name();
+        let Some(index) = name
+            .to_str()
+            .and_then(|n| n.strip_prefix("card"))
+            .and_then(|n| n.parse::<u32>().ok())
+        else {
+            continue;
+        };
+
+        let dev = entry.path().join("device");
+        let read = |file: &str| fs::read_to_string(dev.join(file)).ok();
+        // Temperature/power/fan live under the card's hwmon instance, whose index
+        // isn't stable (`hwmon/hwmonN`), so take the first one the card exposes.
+        let hwmon = fs::read_dir(dev.join("hwmon")).ok().and_then(|it| {
+            it.flatten()
+                .map(|e| e.path())
+                .find(|p| {
+                    p.file_name()
+                        .and_then(|n| n.to_str())
+                        .is_some_and(|n| n.starts_with("hwmon"))
+                })
+        });
+        let hread = |file: &str| {
+            hwmon
+                .as_ref()
+                .and_then(|h| fs::read_to_string(h.join(file)).ok())
+        };
+        let files = DrmFiles {
+            driver: read("uevent")
+                .and_then(|u| {
+                    u.lines()
+                        .find_map(|l| l.strip_prefix("DRIVER=").map(str::to_string))
+                })
+                .unwrap_or_default(),
+            vendor: read("vendor").unwrap_or_default().trim().to_string(),
+            device: read("device").unwrap_or_default().trim().to_string(),
+            vram_used: read("mem_info_vram_used"),
+            vram_total: read("mem_info_vram_total"),
+            gtt_used: read("mem_info_gtt_used"),
+            gtt_total: read("mem_info_gtt_total"),
+            busy: read("gpu_busy_percent"),
+            // `power1_average` is the smoothed draw; some cards only expose the
+            // instantaneous `power1_input`, so fall back to it.
+            temp: hread("temp1_input"),
+            power: hread("power1_average").or_else(|| hread("power1_input")),
+            power_cap: hread("power1_cap"),
+            pwm: hread("pwm1"),
+            pwm_max: hread("pwm1_max"),
+            sclk: read("pp_dpm_sclk"),
+            mclk: read("pp_dpm_mclk"),
+            link_speed: read("current_link_speed"),
+            link_width: read("current_link_width"),
+        };
+
+        if let Some(sample) = parse_drm_card(index, &files) {
+            cards.push((index, sample));
+        }
+    }
+
+    cards.sort_by_key(|(index, _)| *index);
+    cards.into_iter().map(|(_, sample)| sample).collect()
+}
+
+#[cfg(not(target_os = "linux"))]
+fn drm_sample() -> Vec<GpuSample> {
+    Vec::new()
+}
+
+// ── Card naming ──────────────────────────────────────────────────────────────
+
+/// Memo for [`gpu_name`], keyed `"vendor:device"`. `pci.ids` is ~1.5 MB; without
+/// this it would be re-scanned on every cache miss, i.e. once a second.
+static NAME_CACHE: Mutex<Option<HashMap<String, String>>> = Mutex::new(None);
+
+/// Where a Linux system keeps the PCI vendor/device name database. Sysfs carries
+/// only the numeric ids, so this is the only way to say "Radeon 890M" rather than
+/// "AMD GPU 1" — and it is a nicety, so its absence is not an error.
+const PCI_IDS_PATHS: [&str; 3] = [
+    "/usr/share/hwdata/pci.ids",
+    "/usr/share/misc/pci.ids",
+    "/usr/share/pci.ids",
+];
+
+/// A human name for a card: its marketing name from `pci.ids` when that database
+/// is installed, otherwise the vendor plus the DRM card index.
+fn gpu_name(vendor: &str, device: &str, index: u32) -> String {
+    let vendor_id = strip_hex(vendor);
+    let device_id = strip_hex(device);
+    let fallback = || match vendor_label(&vendor_id) {
+        Some(vendor) => format!("{vendor} GPU {index}"),
+        None => format!("GPU {index}"),
+    };
+
+    if vendor_id.is_empty() || device_id.is_empty() {
+        return fallback();
+    }
+
+    let key = format!("{vendor_id}:{device_id}");
+    let Ok(mut cache) = NAME_CACHE.lock() else {
+        return fallback();
+    };
+    let names = cache.get_or_insert_with(HashMap::new);
+    if let Some(hit) = names.get(&key) {
+        return hit.clone();
+    }
+
+    let name = PCI_IDS_PATHS
+        .iter()
+        .find_map(|path| std::fs::read_to_string(path).ok())
+        .and_then(|db| pci_ids_lookup(&db, &vendor_id, &device_id))
+        .unwrap_or_else(fallback);
+    names.insert(key, name.clone());
+    name
+}
+
+/// Sysfs writes ids as `0x1002`; `pci.ids` indexes them as `1002`.
+fn strip_hex(id: &str) -> String {
+    id.trim()
+        .trim_start_matches("0x")
+        .to_ascii_lowercase()
+        .to_string()
+}
+
+fn vendor_label(vendor_id: &str) -> Option<&'static str> {
+    match vendor_id {
+        "1002" => Some("AMD"),
+        "10de" => Some("NVIDIA"),
+        "8086" => Some("Intel"),
+        _ => None,
+    }
+}
+
+/// Find a device's name in a `pci.ids` database. The format is indentation-scoped:
+/// a vendor at column 0, its devices one tab in, their subsystems two tabs in —
+/// so a device line only means anything *under* the right vendor, and the
+/// two-tab lines must be skipped rather than matched.
+fn pci_ids_lookup(db: &str, vendor_id: &str, device_id: &str) -> Option<String> {
+    let mut in_vendor = false;
+    for line in db.lines() {
+        if line.starts_with('#') || line.trim().is_empty() {
+            continue;
+        }
+        if !line.starts_with('\t') {
+            if in_vendor {
+                return None; // Left our vendor's block without a match.
+            }
+            in_vendor = line
+                .split_whitespace()
+                .next()
+                .is_some_and(|id| id.eq_ignore_ascii_case(vendor_id));
+            continue;
+        }
+        if !in_vendor || line.starts_with("\t\t") {
+            continue; // Another vendor's device, or a subsystem line.
+        }
+        let mut parts = line.trim_start().splitn(2, char::is_whitespace);
+        if parts
+            .next()
+            .is_some_and(|id| id.eq_ignore_ascii_case(device_id))
+        {
+            let name = parts.next().unwrap_or_default().trim();
+            if !name.is_empty() {
+                return Some(name.to_string());
+            }
+        }
+    }
+    None
+}
+
+// ── nvidia-smi (Linux + Windows) ─────────────────────────────────────────────
+
+fn nvidia_sample() -> Vec<GpuSample> {
+    if let Ok(missing_until) = NVIDIA_MISSING_UNTIL.lock() {
+        if missing_until.is_some_and(|until| Instant::now() < until) {
+            return Vec::new();
+        }
+    }
+
+    let output = crate::paths::command_no_window("nvidia-smi")
+        .args([
+            "--query-gpu=name,memory.used,memory.total,utilization.gpu,\
+temperature.gpu,power.draw,power.limit,clocks.sm,clocks.mem,fan.speed,\
+driver_version,pcie.link.gen.current,pcie.link.width.current",
+            "--format=csv,noheader,nounits",
+        ])
+        .output();
+
+    match output {
+        Ok(out) if out.status.success() => {
+            parse_nvidia_smi(&String::from_utf8_lossy(&out.stdout))
+        }
+        _ => {
+            if let Ok(mut missing_until) = NVIDIA_MISSING_UNTIL.lock() {
+                *missing_until = Some(Instant::now() + NVIDIA_RETRY);
+            }
+            Vec::new()
+        }
+    }
+}
+
+/// A `nvidia-smi` CSV field, or `None` when it is absent/blank or the `[N/A]` the
+/// tool prints for a value the driver won't answer (a laptop GPU in power-saving,
+/// a passthrough VM) — so an unreadable sensor is *unknown*, never a zero.
+fn nv_field<'a>(fields: &[&'a str], i: usize) -> Option<&'a str> {
+    fields
+        .get(i)
+        .map(|s| s.trim())
+        .filter(|s| !s.is_empty() && !s.starts_with("[N/A") && *s != "N/A")
+}
+
+/// Parse the `nvidia-smi --query-gpu=…` line (see the query in [`nvidia_sample`]):
+/// one comma-separated record per GPU, memory in **MiB**, clocks in MHz, power in
+/// W, temperature in °C, fan and utilization in %. Column order is fixed by the
+/// query; a driver too old for a trailing column simply omits it, so every field
+/// past the memory triple is read defensively by index.
+pub(crate) fn parse_nvidia_smi(stdout: &str) -> Vec<GpuSample> {
+    const MIB: u64 = 1024 * 1024;
+
+    stdout
+        .lines()
+        .filter_map(|line| {
+            let fields: Vec<&str> = line.split(',').map(str::trim).collect();
+            if fields.len() < 3 {
+                return None;
+            }
+            let vram_total = fields[2].parse::<u64>().ok()? * MIB;
+            let f64_at = |i| nv_field(&fields, i).and_then(|s| s.parse::<f64>().ok());
+            let u64_at = |i| nv_field(&fields, i).and_then(|s| s.parse::<u64>().ok());
+            let u32_at = |i| nv_field(&fields, i).and_then(|s| s.parse::<u32>().ok());
+            Some(GpuSample {
+                name: fields[0].to_string(),
+                driver: "nvidia".to_string(),
+                vram_used: fields[1].parse::<u64>().unwrap_or(0) * MIB,
+                vram_total,
+                shared_used: 0,
+                shared_total: 0,
+                busy_percent: f64_at(3),
+                temp_c: f64_at(4),
+                power_w: f64_at(5),
+                power_cap_w: f64_at(6),
+                sclk_mhz: u64_at(7),
+                mclk_mhz: u64_at(8),
+                fan_percent: f64_at(9),
+                driver_version: nv_field(&fields, 10).map(str::to_string),
+                pcie_gen: u32_at(11),
+                pcie_width: u32_at(12),
+            })
+        })
+        .collect()
+}
+
+// ── Per-process GPU memory (monitor pane only) ───────────────────────────────
+
+/// Per-process GPU memory, cached for [`CACHE_TTL`] so the pane's poll and any
+/// repeat caller share one walk. Deliberately *not* folded into [`snapshot`]: the
+/// work here (all of `/proc`'s `fdinfo`, or a `nvidia-smi` spawn) is heavier than
+/// the whole-device read, and only the monitor pane asks for it.
+static PROC_CACHE: Mutex<Option<(Instant, Vec<GpuProc>)>> = Mutex::new(None);
+
+/// Every process currently holding GPU memory, biggest first. Empty (never an
+/// error) when nothing can be read — a driver that reports no per-process data,
+/// or a non-Linux/no-`nvidia-smi` box — so the UI treats it as "not available".
+pub fn process_snapshot() -> Vec<GpuProc> {
+    if let Some((at, procs)) = PROC_CACHE.lock().ok().and_then(|c| c.clone()) {
+        if at.elapsed() < CACHE_TTL {
+            return procs;
+        }
+    }
+
+    let mut procs = amd_fdinfo_procs();
+    procs.extend(nvidia_proc_sample());
+    procs.sort_by(|a, b| b.mem_bytes.cmp(&a.mem_bytes));
+
+    if let Ok(mut cache) = PROC_CACHE.lock() {
+        *cache = Some((Instant::now(), procs.clone()));
+    }
+    procs
+}
+
+/// NVIDIA's compute clients (`--query-compute-apps`), memory in **MiB**. Only the
+/// compute context is listed — a pure-graphics process won't appear — which is the
+/// portable, driver-agnostic read; the fuller `pmon` needs elevated access.
+fn nvidia_proc_sample() -> Vec<GpuProc> {
+    if let Ok(missing_until) = NVIDIA_MISSING_UNTIL.lock() {
+        if missing_until.is_some_and(|until| Instant::now() < until) {
+            return Vec::new();
+        }
+    }
+
+    let output = crate::paths::command_no_window("nvidia-smi")
+        .args([
+            "--query-compute-apps=pid,process_name,used_memory",
+            "--format=csv,noheader,nounits",
+        ])
+        .output();
+
+    match output {
+        Ok(out) if out.status.success() => parse_nvidia_apps(&String::from_utf8_lossy(&out.stdout)),
+        _ => Vec::new(),
+    }
+}
+
+/// Parse `nvidia-smi --query-compute-apps=pid,process_name,used_memory
+/// --format=csv,noheader,nounits`: one `pid, name, MiB` line per client.
+pub(crate) fn parse_nvidia_apps(stdout: &str) -> Vec<GpuProc> {
+    const MIB: u64 = 1024 * 1024;
+
+    stdout
+        .lines()
+        .filter_map(|line| {
+            let f: Vec<&str> = line.split(',').map(str::trim).collect();
+            if f.len() < 3 {
+                return None;
+            }
+            let pid = f[0].parse::<u32>().ok()?;
+            let mem = nv_field(&f, 2)
+                .and_then(|s| s.parse::<u64>().ok())
+                .unwrap_or(0)
+                * MIB;
+            Some(GpuProc {
+                pid,
+                name: f[1].to_string(),
+                mem_bytes: mem,
+            })
+        })
+        .collect()
+}
+
+/// One amdgpu `fdinfo` file's relevant fields. A process opens the card through
+/// many fds, but the fds of one rendering context share a `drm-client-id`, so the
+/// caller dedups on it to avoid counting the same memory once per fd.
+#[derive(Default)]
+struct FdInfo {
+    driver: String,
+    client_id: Option<u64>,
+    vram_kib: u64,
+    gtt_kib: u64,
+}
+
+/// Parse a `/proc/<pid>/fdinfo/<fd>` file. Returns `None` for a non-DRM fd (a
+/// socket, a plain file) — one with no `drm-driver` line.
+fn parse_fdinfo(text: &str) -> Option<FdInfo> {
+    let mut info = FdInfo::default();
+    for line in text.lines() {
+        if let Some(v) = line.strip_prefix("drm-driver:") {
+            info.driver = v.trim().to_string();
+        } else if let Some(v) = line.strip_prefix("drm-client-id:") {
+            info.client_id = v.trim().parse::<u64>().ok();
+        } else if let Some(v) = line.strip_prefix("drm-memory-vram:") {
+            info.vram_kib = parse_kib(v);
+        } else if let Some(v) = line.strip_prefix("drm-memory-gtt:") {
+            info.gtt_kib = parse_kib(v);
+        }
+    }
+    if info.driver.is_empty() {
+        return None;
+    }
+    Some(info)
+}
+
+/// A `drm-memory-*` value, e.g. `"\t12345 KiB"`, as KiB.
+fn parse_kib(v: &str) -> u64 {
+    v.split_whitespace()
+        .next()
+        .and_then(|n| n.parse::<u64>().ok())
+        .unwrap_or(0)
+}
+
+#[cfg(target_os = "linux")]
+fn amd_fdinfo_procs() -> Vec<GpuProc> {
+    use std::collections::HashSet;
+    use std::fs;
+
+    let Ok(entries) = fs::read_dir("/proc") else {
+        return Vec::new();
+    };
+
+    let mut by_pid: HashMap<u32, u64> = HashMap::new();
+    let mut names: HashMap<u32, String> = HashMap::new();
+    // Dedup a context's memory across its many fds, machine-wide.
+    let mut seen: HashSet<(u32, u64)> = HashSet::new();
+
+    for entry in entries.flatten() {
+        let Some(pid) = entry
+            .file_name()
+            .to_str()
+            .and_then(|n| n.parse::<u32>().ok())
+        else {
+            continue;
+        };
+        let Ok(fds) = fs::read_dir(entry.path().join("fdinfo")) else {
+            continue;
+        };
+
+        let mut pid_bytes: u64 = 0;
+        let mut matched = false;
+        for fd in fds.flatten() {
+            let Ok(text) = fs::read_to_string(fd.path()) else {
+                continue;
+            };
+            let Some(info) = parse_fdinfo(&text) else {
+                continue;
+            };
+            if info.driver != "amdgpu" {
+                continue;
+            }
+            matched = true;
+            // A fd with no client-id (rare on modern amdgpu) dedups per-pid, i.e.
+            // is counted once — undercounting is the safer error than double.
+            if !seen.insert((pid, info.client_id.unwrap_or(u64::MAX))) {
+                continue;
+            }
+            pid_bytes += (info.vram_kib + info.gtt_kib) * 1024;
+        }
+
+        if matched && pid_bytes > 0 {
+            by_pid.insert(pid, pid_bytes);
+            names.insert(pid, proc_comm(pid));
+        }
+    }
+
+    by_pid
+        .into_iter()
+        .map(|(pid, mem_bytes)| GpuProc {
+            pid,
+            name: names.remove(&pid).unwrap_or_default(),
+            mem_bytes,
+        })
+        .collect()
+}
+
+#[cfg(not(target_os = "linux"))]
+fn amd_fdinfo_procs() -> Vec<GpuProc> {
+    Vec::new()
+}
+
+#[cfg(target_os = "linux")]
+fn proc_comm(pid: u32) -> String {
+    std::fs::read_to_string(format!("/proc/{pid}/comm"))
+        .map(|s| s.trim().to_string())
+        .unwrap_or_default()
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    fn files(pairs: &[(&str, &str)]) -> DrmFiles {
+        let get = |key: &str| {
+            pairs
+                .iter()
+                .find(|(k, _)| *k == key)
+                .map(|(_, v)| v.to_string())
+        };
+        DrmFiles {
+            driver: get("driver").unwrap_or_default(),
+            vendor: get("vendor").unwrap_or_default(),
+            device: get("device").unwrap_or_default(),
+            vram_used: get("vram_used"),
+            vram_total: get("vram_total"),
+            gtt_used: get("gtt_used"),
+            gtt_total: get("gtt_total"),
+            busy: get("busy"),
+            temp: get("temp"),
+            power: get("power"),
+            power_cap: get("power_cap"),
+            pwm: get("pwm"),
+            pwm_max: get("pwm_max"),
+            sclk: get("sclk"),
+            mclk: get("mclk"),
+            link_speed: get("link_speed"),
+            link_width: get("link_width"),
+        }
+    }
+
+    #[test]
+    fn amdgpu_apu_reports_both_pools() {
+        let sample = parse_drm_card(
+            1,
+            &files(&[
+                ("driver", "amdgpu"),
+                ("vendor", "0x1002"),
+                ("device", "0x150e"),
+                ("vram_used", "440770560\n"),
+                ("vram_total", "536870912\n"),
+                ("gtt_used", "18052190208\n"),
+                ("gtt_total", "65855619072\n"),
+                ("busy", "95\n"),
+            ]),
+        )
+        .expect("a card exposing mem_info_vram_total is reported");
+
+        assert_eq!(sample.driver, "amdgpu");
+        assert_eq!(sample.vram_used, 440_770_560);
+        assert_eq!(sample.vram_total, 536_870_912);
+        assert_eq!(sample.shared_used, 18_052_190_208);
+        assert_eq!(sample.shared_total, 65_855_619_072);
+        assert_eq!(sample.busy_percent, Some(95.0));
+    }
+
+    #[test]
+    fn card_without_memory_accounting_is_skipped() {
+        // Intel i915 / the NVIDIA blob: a DRM card with no `mem_info_*` at all.
+        // Reporting it would mean showing 0 B of 0 B as if it were a measurement.
+        assert!(parse_drm_card(0, &files(&[("driver", "i915"), ("vendor", "0x8086")])).is_none());
+    }
+
+    #[test]
+    fn drm_busy_absent_is_none_not_zero() {
+        let sample = parse_drm_card(
+            0,
+            &files(&[
+                ("driver", "amdgpu"),
+                ("vram_used", "1024"),
+                ("vram_total", "2048"),
+            ]),
+        )
+        .expect("memory alone is enough to report a card");
+        assert_eq!(sample.busy_percent, None, "unknown utilization is not idle");
+        assert_eq!(sample.shared_total, 0, "a card with no GTT files has none");
+    }
+
+    #[test]
+    fn nvidia_dgpu_has_no_shared_pool() {
+        let gpus = parse_nvidia_smi("NVIDIA GeForce RTX 4090, 1234, 24564, 37\n");
+        assert_eq!(gpus.len(), 1);
+        assert_eq!(gpus[0].name, "NVIDIA GeForce RTX 4090");
+        assert_eq!(gpus[0].driver, "nvidia");
+        assert_eq!(gpus[0].vram_used, 1234 * 1024 * 1024);
+        assert_eq!(gpus[0].vram_total, 24564 * 1024 * 1024);
+        assert_eq!(gpus[0].shared_used, 0);
+        assert_eq!(gpus[0].shared_total, 0);
+        assert_eq!(gpus[0].busy_percent, Some(37.0));
+    }
+
+    #[test]
+    fn nvidia_multi_gpu_and_unavailable_fields() {
+        let gpus = parse_nvidia_smi(
+            "NVIDIA A100, 0, 40960, [N/A]\nNVIDIA A100, 8192, 40960, 100\n\n",
+        );
+        assert_eq!(gpus.len(), 2, "blank lines are not GPUs");
+        assert_eq!(gpus[0].busy_percent, None, "[N/A] utilization is unknown");
+        assert_eq!(gpus[1].busy_percent, Some(100.0));
+    }
+
+    #[test]
+    fn nvidia_garbage_is_ignored() {
+        assert!(parse_nvidia_smi("Failed to initialize NVML: Driver/library version mismatch\n")
+            .is_empty());
+    }
+
+    #[test]
+    fn pci_ids_finds_device_under_its_own_vendor() {
+        let db = "\
+# Comment
+1002  Advanced Micro Devices, Inc. [AMD/ATI]
+\t150e  Strix [Radeon 880M / 890M]
+\t\t1d05 5006  Some Laptop
+\t164e  Raphael
+10de  NVIDIA Corporation
+\t150e  Not our card
+";
+        assert_eq!(
+            pci_ids_lookup(db, "1002", "150e").as_deref(),
+            Some("Strix [Radeon 880M / 890M]")
+        );
+        assert_eq!(
+            pci_ids_lookup(db, "10de", "150e").as_deref(),
+            Some("Not our card"),
+            "a device id is only meaningful under its vendor"
+        );
+        assert_eq!(pci_ids_lookup(db, "1002", "9999"), None);
+        assert_eq!(pci_ids_lookup(db, "8086", "150e"), None);
+    }
+
+    #[test]
+    fn gpu_name_falls_back_to_vendor_and_index() {
+        // No ids at all → cannot consult pci.ids, so the label must still be
+        // recognizable rather than empty.
+        assert_eq!(gpu_name("", "", 1), "GPU 1");
+        assert_eq!(gpu_name("0x10de", "", 0), "NVIDIA GPU 0");
+        assert_eq!(gpu_name("0x8086", "", 2), "Intel GPU 2");
+    }
+
+    #[test]
+    fn amd_sensors_are_converted_to_base_units() {
+        let sample = parse_drm_card(
+            1,
+            &files(&[
+                ("driver", "amdgpu"),
+                ("vram_used", "1024"),
+                ("vram_total", "2048"),
+                ("temp", "58000\n"),        // 58.000 °C
+                ("power", "34560000\n"),    // 34.56 W
+                ("power_cap", "65000000\n"),
+                ("pwm", "128"),             // ~50% of 255
+                ("sclk", "0: 200Mhz\n1: 1000Mhz\n2: 2900Mhz *\n"),
+                ("mclk", "0: 96Mhz *\n1: 1200Mhz\n"),
+                ("link_speed", "16.0 GT/s PCIe"),
+                ("link_width", "16"),
+            ]),
+        )
+        .expect("a card exposing vram_total is reported");
+
+        assert_eq!(sample.temp_c, Some(58.0));
+        assert_eq!(sample.power_w, Some(34.56));
+        assert_eq!(sample.power_cap_w, Some(65.0));
+        assert_eq!(sample.sclk_mhz, Some(2900), "the DPM state flagged * is active");
+        assert_eq!(sample.mclk_mhz, Some(96));
+        assert_eq!(sample.pcie_gen, Some(4), "16 GT/s is PCIe 4.0");
+        assert_eq!(sample.pcie_width, Some(16));
+        assert_eq!(sample.driver_version, None);
+        let fan = sample.fan_percent.expect("pwm1 gives a fan percent");
+        assert!((fan - 50.2).abs() < 0.2, "128/255 ≈ 50%, got {fan}");
+    }
+
+    #[test]
+    fn amd_missing_sensors_stay_unknown_not_zero() {
+        // A card with memory but no hwmon/clock/pcie files: every sensor is None,
+        // never a fabricated 0 that would read as "0 °C / idle fan".
+        let sample = parse_drm_card(
+            0,
+            &files(&[("driver", "amdgpu"), ("vram_used", "1"), ("vram_total", "2")]),
+        )
+        .unwrap();
+        assert_eq!(sample.temp_c, None);
+        assert_eq!(sample.power_w, None);
+        assert_eq!(sample.sclk_mhz, None);
+        assert_eq!(sample.fan_percent, None);
+        assert_eq!(sample.pcie_gen, None);
+    }
+
+    #[test]
+    fn pcie_gen_maps_transfer_rate_to_generation() {
+        let g = |s: &str| pcie_gen_from_speed(Some(&s.to_string()));
+        assert_eq!(g("2.5 GT/s PCIe"), Some(1));
+        assert_eq!(g("5.0 GT/s PCIe"), Some(2));
+        assert_eq!(g("8.0 GT/s PCIe"), Some(3));
+        assert_eq!(g("16.0 GT/s PCIe"), Some(4));
+        assert_eq!(g("32.0 GT/s PCIe"), Some(5));
+        assert_eq!(pcie_gen_from_speed(None), None);
+    }
+
+    #[test]
+    fn nvidia_smi_reads_the_full_sensor_row() {
+        let gpus = parse_nvidia_smi(
+            "NVIDIA GeForce RTX 4090, 1234, 24564, 37, 61, 210.5, 450, 2520, 10501, 41, 550.107.02, 4, 16\n",
+        );
+        assert_eq!(gpus.len(), 1);
+        let g = &gpus[0];
+        assert_eq!(g.busy_percent, Some(37.0));
+        assert_eq!(g.temp_c, Some(61.0));
+        assert_eq!(g.power_w, Some(210.5));
+        assert_eq!(g.power_cap_w, Some(450.0));
+        assert_eq!(g.sclk_mhz, Some(2520));
+        assert_eq!(g.mclk_mhz, Some(10501));
+        assert_eq!(g.fan_percent, Some(41.0));
+        assert_eq!(g.driver_version.as_deref(), Some("550.107.02"));
+        assert_eq!(g.pcie_gen, Some(4));
+        assert_eq!(g.pcie_width, Some(16));
+    }
+
+    #[test]
+    fn nvidia_smi_na_sensors_are_unknown_and_short_rows_still_parse() {
+        // A laptop dGPU in power-saving answers [N/A] for power/clocks; an older
+        // driver simply omits the trailing pcie columns.
+        let gpus = parse_nvidia_smi("NVIDIA A2000, 512, 8192, [N/A], 45, [N/A], [N/A]\n");
+        assert_eq!(gpus.len(), 1);
+        let g = &gpus[0];
+        assert_eq!(g.vram_total, 8192 * 1024 * 1024);
+        assert_eq!(g.busy_percent, None);
+        assert_eq!(g.temp_c, Some(45.0));
+        assert_eq!(g.power_w, None);
+        assert_eq!(g.sclk_mhz, None, "an absent column is unknown, not zero");
+        assert_eq!(g.pcie_gen, None);
+    }
+
+    #[test]
+    fn nvidia_compute_apps_parse_to_bytes() {
+        let procs = parse_nvidia_apps("1234, python, 512\n9, ollama, 4096\n\n");
+        assert_eq!(procs.len(), 2, "blank lines are not processes");
+        assert_eq!(procs[0].pid, 1234);
+        assert_eq!(procs[0].name, "python");
+        assert_eq!(procs[0].mem_bytes, 512 * 1024 * 1024);
+        assert_eq!(procs[1].mem_bytes, 4096 * 1024 * 1024);
+    }
+
+    #[test]
+    fn fdinfo_reads_amdgpu_memory_and_client_id() {
+        let info = parse_fdinfo(
+            "pos:\t0\ndrm-driver:\tamdgpu\ndrm-client-id:\t42\n\
+drm-memory-vram:\t131072 KiB\ndrm-memory-gtt:\t8192 KiB\n",
+        )
+        .expect("a DRM fd is recognized");
+        assert_eq!(info.driver, "amdgpu");
+        assert_eq!(info.client_id, Some(42));
+        assert_eq!(info.vram_kib, 131072);
+        assert_eq!(info.gtt_kib, 8192);
+    }
+
+    #[test]
+    fn fdinfo_ignores_non_drm_fds() {
+        // A socket / regular file has no drm-driver line and must not be counted.
+        assert!(parse_fdinfo("pos:\t0\nflags:\t02\nmnt_id:\t9\n").is_none());
+    }
+}
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index f05cb82..8aeb19a 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -1,5 +1,6 @@
 pub mod commands;
 pub mod duscan;
+pub mod gpustat;
 pub mod paths;
 pub mod platform;
 pub mod schema;
@@ -438,6 +439,10 @@ pub fn run() {
     // on remote_connect when enabled, stopped on disconnect / exit). See
     // `services::git_peer` (TODO #28n).
     let git_peer = services::git_peer::new_registry();
+    // Registry of per-(project,worker) code-sync fan-outs (multi-host remote,
+    // `docs/multi_host_remote_plan.md`). Kicked on a worker connect / commit /
+    // manual "Push code to machines". See `services::worker_sync`.
+    let worker_sync = services::worker_sync::new_state();
     // Cancel flags for in-flight disk-usage scans, one per scanning pane. See
     // `commands::disk_usage`.
     let disk_scans = commands::disk_usage::new_state();
@@ -457,6 +462,7 @@ pub fn run() {
         .manage(sync_manifest)
         .manage(auto_sync)
         .manage(git_peer)
+        .manage(worker_sync)
         .manage(disk_scans)
         .manage(usage_watch.clone())
         .setup(|_app| {
@@ -531,6 +537,15 @@ pub fn run() {
             // skips the exit teardown) and the staged config copies. Off-thread:
             // docker may be slow or absent, and neither may block startup.
             std::thread::spawn(services::sandbox::sweep_orphans);
+            // Re-adopt OpenVPN tunnels a previous run left running (a crash, an OOM
+            // kill, a refused quit-time prompt): the daemon runs as root and outlives
+            // the app, still rerouting the machine, but the live-tunnel registries are
+            // in-memory and start empty — so without this the VPN lamp reads grey while
+            // the machines are in fact reachable through the still-up tunnel. Off-thread
+            // (a few pidfile stats); additive and idempotent, so racing the frontend's
+            // first `openvpn_active` refresh is benign.
+            #[cfg(any(target_os = "linux", target_os = "windows", target_os = "macos"))]
+            std::thread::spawn(services::openvpn::adopt_orphans);
             // Start the background per-project SSH-link traffic sampler so each
             // remote project's daily/monthly/overall usage accrues even when its
             // Network Traffic tab is closed (see services::net_usage). No-op on
@@ -571,8 +586,21 @@ pub fn run() {
             commands::projects::set_project_sandbox,
             commands::projects::set_project_sandbox_spec,
             commands::projects::sandbox_preflight,
+            commands::python::python_interpreters,
+            commands::python::python_interpreter_for,
+            commands::python::set_project_python,
+            commands::slurm::slurm_available,
+            commands::slurm::slurm_submit,
+            commands::slurm::slurm_queue,
+            commands::slurm::slurm_job_out,
+            commands::slurm::slurm_cancel,
             commands::projects::set_project_openvpn,
             commands::projects::set_project_auto_connect,
+            commands::projects::set_project_persist_sessions,
+            commands::projects::set_project_remote_label,
+            commands::projects::add_compute_host,
+            commands::projects::remove_compute_host,
+            commands::projects::patch_compute_host,
             commands::projects::set_project_categories,
             commands::projects::set_project_git_disabled,
             commands::projects::save_tab_layout,
@@ -627,6 +655,8 @@ pub fn run() {
             commands::ssh::ssh_probe,
             commands::ssh::remote_has_saved_password,
             commands::ssh::remote_forget_password,
+            commands::ssh::remote_kill_all_jobs,
+            commands::ssh::ssh_close_master,
             commands::ssh::remote_login_command,
             commands::ssh::ssh_default_dir,
             commands::ssh::ssh_list_dir,
@@ -634,6 +664,29 @@ pub fn run() {
             // Pooled SSH/SFTP connection lifecycle (mount-free remote, Phase 0)
             commands::remote::remote_connect,
             commands::remote::remote_disconnect,
+            commands::remote::remote_disconnect_all_hosts,
+            commands::remote::remote_connected_ids,
+            commands::remote::remote_connected_targets,
+            commands::remote::worker_sync_now,
+            commands::remote::worker_outputs_preview,
+            commands::remote::worker_pull_outputs,
+            commands::remote::remote_upload_file,
+            commands::remote::remote_usage_check,
+            // Global machines (cross-project compute host registry)
+            commands::global_machines::global_machines_list,
+            commands::global_machines::global_machine_add,
+            commands::global_machines::global_machine_update,
+            commands::global_machines::global_machine_set_auto_connect,
+            commands::global_machines::global_machine_remove,
+            commands::global_machines::global_machine_reorder,
+            commands::global_machines::global_machine_monitor_snapshot,
+            commands::global_machines::global_machine_usage_check,
+            commands::global_machines::global_machine_tmux_list,
+            commands::global_machines::global_machines_export,
+            commands::global_machines::global_machines_import_read,
+            commands::remote::remote_tmux_list,
+            commands::remote::remote_tmux_kill,
+            commands::remote::remote_tmux_rename,
             // Read-only local/remote host + SSH transport monitoring.
             commands::network::network_host_snapshot,
             commands::network::network_ssh_link_snapshot,
@@ -644,6 +697,8 @@ pub fn run() {
             commands::usage_stats::usage_watch_project,
             commands::usage_stats::usage_git_stats,
             commands::monitor::system_monitor_snapshot,
+            commands::monitor::gpu_memory_snapshot,
+            commands::monitor::gpu_process_snapshot,
             // AC-vs-battery detection for Energy Saver mode.
             commands::power::get_power_state,
             // SSH-sync (Phase 1): selective local↔remote mirror sync.
@@ -656,12 +711,16 @@ pub fn run() {
             commands::sync::sync_auto_preview,
             commands::sync::sync_status,
             commands::sync::sync_file_meta,
+            commands::sync::sync_resolve_if_identical,
             commands::sync::sync_diff,
             commands::ssh::ssh_tooling_status,
             commands::ssh::ssh_list_addresses,
             commands::ssh::ssh_remember_address,
             commands::ssh::remote_list_paths,
             commands::ssh::remote_remember_path,
+            commands::ssh::remote_list_default_paths,
+            commands::ssh::remote_get_default_path,
+            commands::ssh::remote_set_default_path,
             commands::ssh::open_external_url,
             // OpenVPN tunnels for VPN-gated remote projects
             commands::openvpn::openvpn_connect,
@@ -671,10 +730,12 @@ pub fn run() {
             commands::openvpn::vpn_forget_password,
             commands::openvpn::openvpn_login_command,
             commands::openvpn::openvpn_disconnect,
+            commands::openvpn::openvpn_disconnect_all_on_quit,
             commands::openvpn::openvpn_status,
             commands::openvpn::openvpn_active,
             commands::openvpn::openvpn_store_config,
             commands::openvpn::openvpn_list_configs,
+            commands::openvpn::openvpn_remove_config,
             // Git hosting (GitHub / GitLab) publishing
             commands::git_publish::publish_project,
             commands::git_publish::unpublish_project,
@@ -691,6 +752,7 @@ pub fn run() {
             commands::fs::list_dir,
             commands::fs::list_recent_downloads,
             commands::fs::dir_size,
+            commands::fs::dir_size_breakdown,
             commands::fs::list_dirs,
             commands::fs::list_project_endings,
             commands::fs::list_project_paths,
@@ -739,6 +801,9 @@ pub fn run() {
             commands::terminal::pty_write,
             commands::terminal::pty_resize,
             commands::terminal::pty_kill,
+            commands::terminal::local_tmux_list,
+            commands::terminal::local_tmux_kill,
+            commands::terminal::local_tmux_rename,
             commands::terminal::project_cpu_percent,
             // External apps / window tracking
             commands::apps::launch_app,
@@ -750,6 +815,8 @@ pub fn run() {
             commands::apps::restore_open_apps,
             commands::apps::run_script_detached,
             commands::apps::drag_preview_icon,
+            commands::apps::start_file_drag,
+            commands::apps::cancel_file_drag,
             commands::apps::embed_capability,
             commands::apps::list_installed_apps,
             // Workspace / network
@@ -777,6 +844,7 @@ pub fn run() {
             commands::git::git_generate_commit_message,
             commands::git::git_commit,
             commands::git::git_push,
+            commands::git::git_clone,
             commands::git::git_file_statuses,
             commands::git::git_unpushed_commits,
             commands::git::git_change_stats,
@@ -834,6 +902,7 @@ pub fn run() {
             commands::ollama::vibe_install_strategy,
             commands::agents::agent_is_installed,
             commands::agents::npm_is_installed,
+            commands::agents::probe_binaries,
             commands::agents::list_agents,
             commands::agents::codex_hook_status,
             commands::agents::install_agent,
@@ -864,7 +933,47 @@ pub fn run() {
         .build(tauri::generate_context!())
         .expect("error while building tauri application")
         .run(|_app, event| {
+            // A detached popout can die WITHOUT going through `attach_subwindow`
+            // (seed-timeout self-destroy, last-tab close, the WM-close safety
+            // net in DetachedApp). Free its registry footprint — display number
+            // ("Eldrun win-N"), TrackedWindow, parkable override — here, the one
+            // choke point every destruction passes, so freed numbers get reused
+            // and a lone popout is always "win-1". The dock-back path fires this
+            // after `attach_subwindow` already freed; the release is idempotent.
+            if let tauri::RunEvent::WindowEvent {
+                label,
+                event: tauri::WindowEvent::Destroyed,
+                ..
+            } = &event
+            {
+                if label.starts_with("detached-") {
+                    use tauri::Manager;
+                    // Guard against a same-label window already re-created
+                    // (rapid destroy → re-detach): only clean up when no live
+                    // window holds the label, else we'd free the NEW window's
+                    // number while it is still on screen.
+                    if _app.get_webview_window(label).is_none() {
+                        let reg = _app.state::<WindowRegistryState>();
+                        let wid = commands::subwindow::release_detached_entry(
+                            &mut reg.lock().unwrap(),
+                            label,
+                        );
+                        if let Some(wid) = wid {
+                            let ws = _app.state::<commands::workspace::WorkspaceStateArc>();
+                            ws.lock().unwrap().backend.unset_parkable(wid);
+                        }
+                    }
+                }
+            }
             if let tauri::RunEvent::Exit = event {
+                use tauri::Manager;
+                // Abort every terminal's process subtree so no inner process (a
+                // dev server, a build, a training run) outlives Eldrun. Runs
+                // before the container teardown below, since a containerized
+                // tab's in-container process is TERMed via its still-live
+                // container. Dropping the registry alone would kill only the
+                // shell leaders and orphan everything they spawned.
+                _app.state::<RegistryState>().lock().unwrap().kill_all();
                 // Tear down any OpenVPN tunnels brought up for VPN-gated
                 // remote projects so no privileged tunnel outlives the app.
                 services::openvpn::disconnect_all();
@@ -873,7 +982,6 @@ pub fn run() {
                 services::sandbox::down_all();
                 // Tear down pooled SSH/SFTP connections so no ssh ControlMaster
                 // child (and the master socket it owns) outlives Eldrun.
-                use tauri::Manager;
                 // Stop every auto-sync task first (cancel loops + drop watchers)
                 // so none races the pool teardown below.
                 let auto = _app
diff --git a/src-tauri/src/schema/global_machine.rs b/src-tauri/src/schema/global_machine.rs
new file mode 100644
index 0000000..24e6229
--- /dev/null
+++ b/src-tauri/src/schema/global_machine.rs
@@ -0,0 +1,35 @@
+use serde::{Deserialize, Serialize};
+
+/// A globally connected worker machine: authenticated once via the ordinary
+/// login mechanism (`commands::ssh::ssh_connect`) with **no** `remote_path` set —
+/// project-free by construction, unlike [`super::project::RemoteSpec`]. Later
+/// drag-and-dropped onto an SSH project to become a `shared_fs`
+/// [`super::project::ComputeHost`] there (a value COPY of this identity, not a
+/// reference — removing it from a project never touches this registry).
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct GlobalMachine {
+    /// Stable id, minted on add.
+    pub id: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub user: Option<String>,
+    pub host: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub port: Option<u16>,
+    /// Display name; falls back to `host` wherever shown.
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub label: Option<String>,
+    /// Opt-in to a *silent* connect on launch and whenever a VPN tunnel comes up
+    /// (the machine-wide twin of a project's `RemoteSpec::auto_connect`). Like it,
+    /// the auto path never prompts: it probes first and connects only when the host
+    /// is reachable with no user input, so a stale opt-in degrades to "stay off".
+    /// `#[serde(default)]` so a `global_machines.json` written before this field
+    /// existed still loads.
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub auto_connect: Option<bool>,
+}
+
+impl GlobalMachine {
+    pub fn display_label(&self) -> &str {
+        self.label.as_deref().unwrap_or(&self.host)
+    }
+}
diff --git a/src-tauri/src/schema/mod.rs b/src-tauri/src/schema/mod.rs
index 9db9a86..9f91f8b 100644
--- a/src-tauri/src/schema/mod.rs
+++ b/src-tauri/src/schema/mod.rs
@@ -2,6 +2,7 @@ pub mod active_session;
 pub mod boxes;
 pub mod calendar;
 pub mod default_apps;
+pub mod global_machine;
 pub mod net_usage;
 pub mod project;
 pub mod projects;
@@ -14,6 +15,7 @@ pub use active_session::ActiveSession;
 pub use boxes::{BoxRelation, BoxesList, ProjectBox};
 pub use calendar::{Calendar, CalendarData, CalendarEvent, CalendarFile, CalendarTask};
 pub use default_apps::DefaultApps;
+pub use global_machine::GlobalMachine;
 pub use project::Project;
 pub use projects::ProjectEntry;
 pub use session::{FileTabSession, LayoutSession, ProjectState, TerminalSession, WindowSession};
diff --git a/src-tauri/src/schema/project.rs b/src-tauri/src/schema/project.rs
index 04419df..4765726 100644
--- a/src-tauri/src/schema/project.rs
+++ b/src-tauri/src/schema/project.rs
@@ -109,10 +109,78 @@ pub struct RemoteSpec {
     /// keychain to check). Written by `remote_connect`.
     #[serde(skip_serializing_if = "Option::is_none")]
     pub key_auth: Option<bool>,
+    /// Run this project's remote shell/script tabs inside a **tmux** session on
+    /// the host (TODO #85), so a long run survives an SSH drop, a laptop sleep, or
+    /// Eldrun quitting — the session keeps running and the tab reattaches on
+    /// reconnect/relaunch. **Default ON** for a remote project: `None` and
+    /// `Some(true)` both mean enabled; only an explicit `Some(false)` opts out (the
+    /// pill's toggle). Agent tabs are excluded regardless — they resume via their
+    /// own session. The frontend reads this to set each spawn's `tmux_session`
+    /// name; the backend wraps in `ssh_exec::wrap_pty_options`. Mirrored into the
+    /// `projects.json` entry's `extra["remote"]`.
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub persist_sessions: Option<bool>,
+    /// Display name for this machine, e.g. "gpu-2"; falls back to `host`. Shown
+    /// wherever a project's hosts are listed side by side (the System Monitor's
+    /// source picker, the pill's connection lamps, `hostsForProject`) so a host is
+    /// identifiable by more than its raw address. Distinct from the *project*
+    /// name: this labels the machine `host` reaches, not the project itself — the
+    /// primary (`Project.remote.label`) and every `ComputeHost` (flattened into
+    /// its `spec`, so the JSON key stays the same one worker labels already used)
+    /// share this one field.
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub label: Option<String>,
     #[serde(flatten)]
     pub extra: HashMap<String, Value>,
 }
 
+fn default_true() -> bool {
+    true
+}
+
+/// An additional SSH machine a project runs experiments on (`docs/multi_host_remote_plan.md`).
+/// Its code is kept in one-way sync from the canonical source (the local mirror);
+/// its files are read-only (edits forbidden). It never owns git/sync/mirror state
+/// of its own — the primary [`RemoteSpec`] (`Project.remote`) does. `id` is stable
+/// (referenced by tab locations + the pool key + the fan-out state); `label` is the
+/// pill/tab display name. Reusing `RemoteSpec` verbatim (flattened) means every
+/// existing execution helper (`ssh_exec`, `sftp`, monitor/disk/gpu/python) works
+/// unchanged — they already take `&RemoteSpec`.
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct ComputeHost {
+    /// Stable id, e.g. "h1"; the primary is the implicit "primary".
+    pub id: String,
+    /// Keep this worker's tracked tree synced to the source HEAD (default true).
+    /// Ignored when [`shared_fs`](Self::shared_fs) is set (there is no copy to sync).
+    #[serde(default = "default_true")]
+    pub sync_code: bool,
+    /// Pull this worker's experiment OUTPUTS back on demand only, never
+    /// automatically (default false — outputs stay on the worker).
+    #[serde(default)]
+    pub pull_outputs: bool,
+    /// This machine reaches the project over a **shared filesystem**: it already
+    /// sees the primary's project folder at `spec.remote_path`, so Eldrun copies
+    /// **no** code to it and **never runs git on it** — shells just `cd` into the
+    /// shared tree and run there (`docs/multi_host_remote_plan.md`, shared-fs mode).
+    /// Mutually exclusive with the whole one-way sync path: when set, connect does
+    /// no bootstrap, commits do no fan-out, and "Sync code"/"Pull outputs" are
+    /// meaningless (the folder *is* the primary's, kept in step by the primary's
+    /// own sync). Default false — a machine is a synced-copy worker unless it opts
+    /// into sharing.
+    #[serde(default)]
+    pub shared_fs: bool,
+    /// user/host/port/remote_path/openvpn/auto_connect/key_auth.
+    #[serde(flatten)]
+    pub spec: RemoteSpec,
+}
+
+impl ComputeHost {
+    /// The display label for this worker (its `spec.label`, or the bare host).
+    pub fn display_label(&self) -> &str {
+        self.spec.label.as_deref().unwrap_or(&self.spec.host)
+    }
+}
+
 /// Optional OpenVPN tunnel for reaching a remote project's host. The client
 /// config path and (for `auth-user-pass` configs) the auth username are
 /// persisted; the password/passphrase is prompted each time the tunnel is
@@ -243,6 +311,12 @@ pub struct Project {
     pub open_tab_sessions: Option<serde_json::Value>,
     #[serde(skip_serializing_if = "Option::is_none")]
     pub remote: Option<RemoteSpec>,
+    /// Extra SSH machines this project runs experiments on (`docs/multi_host_remote_plan.md`).
+    /// The primary is still `remote`; these are one-way, read-only "workers". Mirrored
+    /// into the `projects.json` entry's `extra["compute_hosts"]`. Migration-free
+    /// (`#[serde(default)]` → `[]` for existing projects).
+    #[serde(default, skip_serializing_if = "Vec::is_empty")]
+    pub compute_hosts: Vec<ComputeHost>,
     /// For a remote (SSH) project, the local mirror root — the paired local
     /// working copy synced from the host. Chosen at import (defaults to a
     /// `<name>` subfolder of the top-level `eldrun/projects-ssh/` root) and relocatable via the
@@ -256,6 +330,15 @@ pub struct Project {
     /// Docker sandbox config for agent tabs. Absent = run agents on the host.
     #[serde(skip_serializing_if = "Option::is_none")]
     pub sandbox: Option<SandboxSpec>,
+    /// The interpreter the code viewer's Run/Debug buttons use for this project
+    /// (#87). Absent = **auto-detect** (see `commands::python`), which is what the
+    /// overwhelming majority of projects want; this pins it for the ones auto-detect
+    /// cannot see — a conda env, a Poetry venv outside the tree, a second venv.
+    /// Stored as the command/path verbatim (relative paths resolve against the
+    /// project root, which is the run tab's cwd). Mirrored into the `projects.json`
+    /// entry's `extra["python_interpreter"]`.
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub python_interpreter: Option<String>,
     #[serde(flatten)]
     pub extra: HashMap<String, Value>,
 }
diff --git a/src-tauri/src/schema/settings.rs b/src-tauri/src/schema/settings.rs
index 7cf1230..e1fa06f 100644
--- a/src-tauri/src/schema/settings.rs
+++ b/src-tauri/src/schema/settings.rs
@@ -27,6 +27,10 @@ pub struct Settings {
     pub git_token: Option<String>,
     #[serde(skip_serializing_if = "Option::is_none")]
     pub color_scheme: Option<String>,
+    /// UI language for Eldrun's interface (`en`/`de`/`es`/`fr`/`it`). Frontend
+    /// logic only (`lib/i18n`); the backend just round-trips the value.
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub language: Option<String>,
     /// Global UI zoom factor for the whole interface (helps on high-DPI/4K
     /// monitors). `1.0` (or unset) is 100% — the current default look. Applied
     /// frontend-side as a CSS `zoom`; the backend only round-trips the value.
@@ -96,6 +100,22 @@ pub struct Settings {
     /// other launch arg, so nothing in the spawn path reads this.
     #[serde(skip_serializing_if = "Option::is_none")]
     pub agent_mode_toggle: Option<bool>,
+    /// EXPERIMENTAL, default OFF. When true, a Python file in the native code
+    /// viewer gets the Run/Debug buttons and the breakpoint gutter (#87). Purely a
+    /// frontend gate, and off by default because Run *executes the file*: the
+    /// button is one click from an editor, so it is opt-in rather than something a
+    /// user discovers by mis-clicking. Go-to-definition is not gated — it reads,
+    /// it never runs anything. Nothing in the backend reads this: Run/Debug open an
+    /// ordinary terminal tab, which reaches `pty_spawn` like any other.
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub python_run_debug: Option<bool>,
+    /// Persistent LOCAL (tmux) sessions (TODO #85): when true (the default on Unix),
+    /// a local project's shell/script tabs run inside a tmux session on the machine,
+    /// so a long run survives an Eldrun crash and the tab reattaches on restart.
+    /// `None`/`Some(true)` = on; `Some(false)` = off. No effect on Windows (no tmux):
+    /// `services::tmux_local` no-ops there. Read via `persist_local_sessions()`.
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub persist_local_sessions: Option<bool>,
     /// When true (the default), remote SSH/OpenVPN connections are made headlessly
     /// in the background, with Eldrun handling the password transiently (sshpass /
     /// askpass). When false, those connections are launched as interactive
@@ -253,7 +273,7 @@ pub struct ViewerPref {
 
 impl Settings {
     pub fn color_scheme(&self) -> &str {
-        self.color_scheme.as_deref().unwrap_or("light_lavender")
+        self.color_scheme.as_deref().unwrap_or("fancy_dark")
     }
 
     /// Whether Claude agent tabs should be spawned with `--remote-control`.
@@ -268,11 +288,35 @@ impl Settings {
         self.daily_stats_recap.unwrap_or(true)
     }
 
+    /// The rule every experimental flag follows (mirrors `src/lib/experimental.ts`):
+    /// unset means **debug mode decides**, so someone building Eldrun gets each new
+    /// experiment without re-ticking a list, and everyone else gets none of them. An
+    /// explicit value always wins, in both directions — otherwise "turn this off"
+    /// would silently fail for exactly the people most likely to hit a broken one.
+    fn experimental(&self, flag: Option<bool>) -> bool {
+        flag.unwrap_or_else(|| self.debug.unwrap_or(false))
+    }
+
     /// Whether the experimental per-tab Plan/Auto agent-mode badge is offered.
-    /// Defaults OFF when unset: it is opt-in, and switching a mode restarts the
-    /// agent, so nobody gets that behaviour without asking for it.
+    /// Switching a mode restarts the agent, so nobody outside debug mode gets that
+    /// behaviour without asking for it.
     pub fn agent_mode_toggle(&self) -> bool {
-        self.agent_mode_toggle.unwrap_or(false)
+        self.experimental(self.agent_mode_toggle)
+    }
+
+    /// Whether the experimental Python Run/Debug buttons and breakpoint gutter are
+    /// offered in the code viewer. Run *executes the file*, so outside debug mode it
+    /// is opt-in.
+    pub fn python_run_debug(&self) -> bool {
+        self.experimental(self.python_run_debug)
+    }
+
+    /// Whether LOCAL shell/script tabs are wrapped in a persistent tmux session
+    /// (TODO #85). Default ON when unset; only an explicit `Some(false)` opts out.
+    /// The caller still gates on `tmux_local::tmux_available()` (no tmux / Windows →
+    /// no wrap regardless), so this is a preference, not a guarantee.
+    pub fn persist_local_sessions(&self) -> bool {
+        self.persist_local_sessions.unwrap_or(true)
     }
 
     /// Whether remote SSH/OpenVPN connections are made headlessly (Eldrun handles
@@ -282,3 +326,38 @@ impl Settings {
         self.connections_headless.unwrap_or(true)
     }
 }
+
+#[cfg(test)]
+mod tests {
+    use super::Settings;
+
+    /// The experimental rule, backend side (the frontend twin lives in
+    /// `src/__tests__/Experimental.test.ts`): unset defers to debug mode, and an
+    /// explicit value wins in BOTH directions.
+    #[test]
+    fn experimental_flags_default_to_debug_mode() {
+        let off = Settings::default();
+        assert!(!off.python_run_debug());
+        assert!(!off.agent_mode_toggle());
+
+        let debug = Settings {
+            debug: Some(true),
+            ..Default::default()
+        };
+        assert!(debug.python_run_debug());
+        assert!(debug.agent_mode_toggle());
+
+        let debug_but_off = Settings {
+            debug: Some(true),
+            python_run_debug: Some(false),
+            ..Default::default()
+        };
+        assert!(!debug_but_off.python_run_debug());
+
+        let opted_in = Settings {
+            python_run_debug: Some(true),
+            ..Default::default()
+        };
+        assert!(opted_in.python_run_debug());
+    }
+}
diff --git a/src-tauri/src/services/agent_session.rs b/src-tauri/src/services/agent_session.rs
index d6a51a0..a999d4c 100644
--- a/src-tauri/src/services/agent_session.rs
+++ b/src-tauri/src/services/agent_session.rs
@@ -631,6 +631,9 @@ mod tests {
             local_only: false,
             sandbox: false,
             project_id: None,
+            remote_host_id: None,
+            tmux_session: None,
+            tmux_attach: None,
         }
     }
 
diff --git a/src-tauri/src/services/git_peer.rs b/src-tauri/src/services/git_peer.rs
index 08af07f..3568ef3 100644
--- a/src-tauri/src/services/git_peer.rs
+++ b/src-tauri/src/services/git_peer.rs
@@ -58,6 +58,7 @@ use tauri::{AppHandle, Emitter};
 use tokio::sync::{mpsc, Mutex, Notify};
 use tokio::time::MissedTickBehavior;
 
+use crate::schema::net_usage;
 use crate::schema::project::RemoteSpec;
 use crate::services::local_loss;
 use crate::services::remote::{remote_target_for, RemotePoolState};
@@ -286,11 +287,21 @@ pub fn parse_refs(stdout: &str) -> Vec<RefEntry> {
 }
 
 /// Combine `git symbolic-ref --quiet --short HEAD` (branch, empty when detached)
-/// and `git rev-parse HEAD` (sha, fails on an unborn HEAD) into a [`HeadRef`].
+/// and `git rev-parse --verify --quiet HEAD` (sha, empty on an unborn HEAD) into a
+/// [`HeadRef`].
+///
+/// The sha must be a real object name or the head is [`HeadRef::Unborn`] — "not
+/// empty" is NOT enough. A plain `git rev-parse HEAD` on an unborn repo prints the
+/// literal string `HEAD` to **stdout** (and fails only via its exit status), so a
+/// caller that forgets to check that status hands us `("master", "HEAD")`. Trusting
+/// it built `Branch { name: "master", sha: "HEAD" }` — a branch that exists nowhere,
+/// at a sha that is not a sha — which read as a legitimately-checked-out peer and so
+/// masked the one state that actually needed repairing: a `git init`ed host that was
+/// never checked out. Whatever the probe does, an unborn HEAD parses as unborn.
 pub fn parse_head(symbolic: &str, rev: &str) -> HeadRef {
     let branch = symbolic.trim();
     let sha = rev.trim();
-    if sha.is_empty() {
+    if !is_hex_sha(sha) {
         HeadRef::Unborn
     } else if branch.is_empty() {
         HeadRef::Detached {
@@ -401,6 +412,36 @@ pub fn changed_tracked_paths(name_status: &str) -> Vec<TrackedChange> {
         .collect()
 }
 
+/// The distinct tracked files a set of applied branch moves changed on `dest`,
+/// unioned across moves. Each move is `(old_tip, new_tip)`; a `None` old tip is
+/// a fresh branch create, whose *whole* tree (`ls-tree -r`) is new. This feeds
+/// the "files synced" metric (`net_usage`) so a lockstep transfer is counted
+/// like a byte-sync one — without it the metric only ever reflected byte-sync
+/// and read 0 after a lockstep seed (e.g. extend-to-remote). Tags are excluded
+/// by the caller: their file content is already counted via the branch that
+/// carries the commit. Best-effort — a git failure for one move contributes
+/// nothing rather than aborting the count.
+fn files_changed_by_moves(dest: &Peer, moves: &[(Option<String>, String)]) -> usize {
+    let mut paths: HashSet<String> = HashSet::new();
+    for (old, new) in moves {
+        let out = match old {
+            Some(old) => dest.run(&["diff", "--name-only", old, new]),
+            None => dest.run(&["ls-tree", "-r", "--name-only", new]),
+        };
+        if let Ok(o) = out {
+            if o.status.success() {
+                for line in String::from_utf8_lossy(&o.stdout).lines() {
+                    let p = line.trim();
+                    if !p.is_empty() {
+                        paths.insert(p.to_string());
+                    }
+                }
+            }
+        }
+    }
+    paths.len()
+}
+
 /// A timestamped safety-ref name for a to-be-overwritten branch (Phase 2 uses it to
 /// back up the losing side before a reset; Phase 1 only names it).
 pub fn backup_ref_name(branch_short: &str, now_secs: u64) -> String {
@@ -551,15 +592,24 @@ pub fn blocked_detail(branch: &str, stderr: &str) -> String {
 /// Contains no interpolation: it is a constant, so there is nothing here to inject
 /// into (the only variable — the project's remote path — is `shell_quote`d by
 /// [`ssh_exec::run_remote_script`], which `cd`s to it).
+/// The batched host probe. Its **output** is its answer; its **exit status** means only
+/// "the probe ran" — hence the trailing `|| true`. An unborn repo makes the final
+/// `git log HEAD` exit 128, and letting that escape would make a legitimately-empty side
+/// indistinguishable from a probe that could not run at all — the one confusion that must
+/// never happen here, since "could not run" is what withholds a `reset --hard`.
+///
+/// Every `rev-parse` inside must likewise report an unborn HEAD by *printing nothing*
+/// (`--verify --quiet`), not by exiting non-zero: a bare `git rev-parse HEAD` prints the
+/// literal `HEAD` to stdout and fails only in its status, which this script discards.
 const PROBE_SCRIPT: &str = "\
 if git rev-parse --is-inside-work-tree >/dev/null 2>&1; then \
 printf 'repo\\036'; \
 git symbolic-ref --quiet --short HEAD 2>/dev/null; printf '\\036'; \
-git rev-parse HEAD 2>/dev/null; printf '\\036'; \
+git rev-parse --verify --quiet HEAD 2>/dev/null; printf '\\036'; \
 git for-each-ref --format='%(objectname) %(refname:short)' refs/heads 2>/dev/null; printf '\\036'; \
 git for-each-ref --format='%(objectname) %(refname:short)' refs/tags 2>/dev/null; printf '\\036'; \
 git status --porcelain 2>/dev/null; printf '\\036'; \
-git log -1 --format=%s HEAD 2>/dev/null; \
+git log -1 --format=%s HEAD 2>/dev/null || true; \
 else printf 'norepo'; fi";
 
 /// Parse [`PROBE_SCRIPT`]'s output into a snapshot. `None` means the output was not
@@ -684,19 +734,66 @@ pub fn head_mismatch(local: &PeerSnapshot, remote: &PeerSnapshot) -> Option<Stri
     }
 }
 
+/// Whether a side is **seeded**: a repo whose HEAD is *born* — some commit is actually
+/// checked out. A bare `git init` is a repo but is NOT seeded: nothing has ever been
+/// written to its working tree.
+///
+/// This, not [`PeerSnapshot::is_repo`], is what initial pairing keys on, because
+/// `git init` is pairing's own *first step*. A seed that dies after it (a link that
+/// drops mid-bundle) leaves a dest that is a repo, holds no commit, and has an empty
+/// working tree. Under an `is_repo` gate that state is unrepairable: "exactly one side
+/// is a repo" never fires again, and the steady-state path only ever moves refs
+/// (`update-ref`) — it never positions HEAD or checks anything out, since that is
+/// [`init_pairing`]'s exclusive job. Refs and objects land, the tree stays empty, and
+/// the pill reports an eternal head mismatch against a branch nobody has. Keying on
+/// "has a commit checked out" makes a half-seeded side simply *unpaired*, so the next
+/// pass finishes what the dropped one started. Pure.
+pub fn is_seeded(snap: &PeerSnapshot) -> bool {
+    snap.is_repo
+        && matches!(
+            snap.head,
+            Some(HeadRef::Branch { .. }) | Some(HeadRef::Detached { .. })
+        )
+}
+
+/// What a pass should do with the two sides — the gate `reconcile` runs on. Pure.
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
+pub enum PairPlan {
+    /// Both sides seeded → the ordinary bidirectional transfer.
+    Sync,
+    /// Exactly one side seeded → initialize the other from it. `source_is_local` names
+    /// the authority; the *other* side is the one `git init` + `reset --hard` touches.
+    Pair { source_is_local: bool },
+    /// Neither side holds a commit → there is nothing to move in either direction.
+    Nothing,
+}
+
+/// Decide the pass from the two snapshots. Pure.
+pub fn pair_plan(local: &PeerSnapshot, remote: &PeerSnapshot) -> PairPlan {
+    match (is_seeded(local), is_seeded(remote)) {
+        (true, true) => PairPlan::Sync,
+        (true, false) => PairPlan::Pair { source_is_local: true },
+        (false, true) => PairPlan::Pair { source_is_local: false },
+        (false, false) => PairPlan::Nothing,
+    }
+}
+
 /// Whether a pass may be skipped entirely (#28p D5). Deliberately narrow: only a
 /// **green** project whose two ref signatures are both unchanged early-outs. Any
 /// non-green state re-runs in full, so a manual Retry after the user clears a blocker
 /// (deleting an untracked collision moves no ref) is never answered from cache. Pure.
+///
+/// `both_seeded` — not "both are repos": a half-seeded side must never be able to
+/// early-out of the pass that would repair it.
 pub fn can_early_out(
     prior: &GitPeerState,
     local_sig: &str,
     remote_sig: &str,
-    both_repos: bool,
+    both_seeded: bool,
     forced: bool,
 ) -> bool {
     !forced
-        && both_repos
+        && both_seeded
         && prior.status == SyncStatus::Synchronized
         && prior.local_sig.as_deref() == Some(local_sig)
         && prior.remote_sig.as_deref() == Some(remote_sig)
@@ -945,8 +1042,11 @@ fn probe_per_command(peer: &Peer) -> PeerSnapshot {
         .run(&["symbolic-ref", "--quiet", "--short", "HEAD"])
         .map(|o| String::from_utf8_lossy(&o.stdout).to_string())
         .unwrap_or_default();
+    // `--verify --quiet` so an unborn HEAD yields *empty stdout* rather than the
+    // literal `HEAD` that a bare `rev-parse HEAD` prints — the two probes must agree
+    // on what unborn looks like, whichever one a peer happens to take.
     let rev = peer
-        .run(&["rev-parse", "HEAD"])
+        .run(&["rev-parse", "--verify", "--quiet", "HEAD"])
         .ok()
         .filter(|o| o.status.success())
         .map(|o| String::from_utf8_lossy(&o.stdout).to_string())
@@ -1178,8 +1278,13 @@ async fn transfer_and_apply(
         .zip(flags)
         .collect();
 
+    // Every branch tip that actually moved on the dest this pass, as
+    // `(old_tip, new_tip)` — unioned into a "files synced" count at the end so a
+    // lockstep transfer registers in `net_usage` like a byte-sync one.
+    let mut applied_moves: Vec<(Option<String>, String)> = Vec::new();
     for src_ref in &source.branches {
         let dst_sha = sha_of(dest, RefKind::Head, &src_ref.name);
+        let applied_before = result.applied;
         let (fwd, back) = ancestry
             .get(src_ref.name.as_str())
             .copied()
@@ -1308,6 +1413,13 @@ async fn transfer_and_apply(
                 }
             }
         }
+        // If any arm above moved this branch's tip on the dest (`result.applied`
+        // rose), record the move so its file delta is counted below. `dst_sha`
+        // is `None` for a fresh create — its whole tree is the delta.
+        if result.applied > applied_before {
+            applied_moves.push((dst_sha.map(str::to_string), src_ref.sha.clone()));
+        }
+
         // Park (or clear) the peer's tip so a divergence can be resolved with plain git
         // in a terminal rather than only by picking a winner (#28p D8).
         let peer_ref = peer_ref_name(&src_ref.name);
@@ -1370,6 +1482,23 @@ async fn transfer_and_apply(
     cleanup_incoming(&dst_peer);
     cleanup_bundles(pool, project_id, spec, &src_peer, &dst_peer, to_remote).await;
 
+    // 7. Count the tracked files these applied moves carried into the "files
+    //    synced" metric. Lockstep moves the whole tracked tree as one bundle, so
+    //    without this the metric only reflected byte-sync and read 0 after a
+    //    lockstep seed (e.g. extend-to-remote). Direction follows the transfer:
+    //    `to_remote` is an upload, a pull is a download. Runs on the dest (the
+    //    side whose refs just moved), after apply, so the diffs resolve.
+    if !applied_moves.is_empty() {
+        let files = files_changed_by_moves(&dst_peer, &applied_moves) as u64;
+        if files > 0 {
+            if to_remote {
+                net_usage::record_files(project_id, 0, files);
+            } else {
+                net_usage::record_files(project_id, files, 0);
+            }
+        }
+    }
+
     Ok(result)
 }
 
@@ -1766,6 +1895,7 @@ async fn init_pairing(
     } else {
         (Peer::Local(mirror_dir(project_id)), false)
     };
+    let dest_label = if source_is_local { "remote host" } else { "local mirror" };
     if let Peer::Local(dir) = &dest_peer {
         let _ = std::fs::create_dir_all(dir);
     }
@@ -1784,35 +1914,74 @@ async fn init_pairing(
         }
     }
 
-    // `git init` the empty side (idempotent on an existing repo, but we only reach
-    // here when the dest is not yet a repo).
+    // The host root must exist before any remote git can run: every remote command is
+    // `cd '<remote_path>' && git …`, so a missing directory fails ALL of them — including
+    // the `git init` below. Eldrun only `mkdir -p`s the root at create/extend time, which
+    // leaves a host whose directory is later removed (or whose creation was refused back
+    // then — it is best-effort there) permanently unpairable. Idempotent, so re-pairing an
+    // existing host costs one cheap round trip.
+    if source_is_local {
+        crate::services::ssh_exec::remote_mkdir_p(spec)
+            .map_err(|e| format!("could not create '{}' on the host: {e}", spec.remote_path))?;
+    }
+
+    // `git init` the empty side. Idempotent, and deliberately so: the dest may already be
+    // a repo here — a bare, never-checked-out one left behind by an earlier seed that died
+    // after this very step. Re-running init on it is a no-op and the pairing carries on.
     let out = dest_peer.run(&["init"])?;
     if !out.status.success() {
         return Err(format!(
-            "git init on {} failed: {}",
-            if source_is_local { "remote host" } else { "local mirror" },
+            "git init on {dest_label} failed: {}",
             String::from_utf8_lossy(&out.stderr).trim()
         ));
     }
 
     // Transfer every ref from the authority into the freshly-init'd (empty) dest;
     // with no dest shas this is a full bundle and every branch/tag is a create.
+    //
+    // A failure here is fatal to the pairing and must NOT fall through to the checkout
+    // below: `reset --hard` would be aimed at a sha whose objects never arrived, and the
+    // `git init` above has *already run* — so swallowing this (as `let _ =` used to) left
+    // a dest that is a repo, holds no commit, and has an empty working tree, while
+    // reporting `Ok`. That is precisely the half-seeded state `is_seeded` now exists to
+    // recognize; reporting it means the user sees why, and the next pass retries the seed
+    // instead of settling into a permanent head mismatch.
     let dest = probe(&dest_peer);
-    let _ =
-        transfer_and_apply(pool, manifest, project_id, spec, to_remote, source, &dest, false).await;
+    transfer_and_apply(pool, manifest, project_id, spec, to_remote, source, &dest, false).await?;
 
     // Position HEAD + populate the working tree to match the source's HEAD. The
     // `reset --hard` here is only reached once `pairing_conflicts` has confirmed that
     // nothing it would clobber differs from what it is about to write (#28p D3).
+    //
+    // This is the ONLY place lockstep writes a dest's working tree at pairing time, so a
+    // silent failure here is the difference between a seeded peer and an empty directory
+    // with a `.git` in it. Checked, not swallowed.
+    let checked = |what: &str, out: Output| -> Result<(), String> {
+        if out.status.success() {
+            return Ok(());
+        }
+        Err(format!(
+            "{what} on the {dest_label} failed: {}",
+            String::from_utf8_lossy(&out.stderr).trim()
+        ))
+    };
     match &source.head {
         Some(HeadRef::Branch { name, sha }) => {
-            let _ = dest_peer.run(&["symbolic-ref", "HEAD", &format!("refs/heads/{name}")]);
-            let _ = dest_peer.run(&["reset", "--hard", sha]);
+            checked(
+                &format!("pointing HEAD at '{name}'"),
+                dest_peer.run(&["symbolic-ref", "HEAD", &format!("refs/heads/{name}")])?,
+            )?;
+            checked(
+                &format!("checking out '{name}'"),
+                dest_peer.run(&["reset", "--hard", sha])?,
+            )?;
         }
         Some(HeadRef::Detached { sha }) => {
-            let _ = dest_peer.run(&["checkout", sha]);
+            checked("checking out the detached HEAD", dest_peer.run(&["checkout", sha])?)?;
         }
         // Unborn/None source → nothing committed yet; leave the empty repo unborn too.
+        // Unreachable via `pair_plan` (an unseeded side is never the source), kept as a
+        // total match rather than a panic.
         _ => {}
     }
 
@@ -2056,6 +2225,7 @@ async fn reconcile_with(
     let local = probe(&Peer::Local(mirror_dir(project_id)));
     let remote = probe(&Peer::Remote(spec.clone()));
     let (local_sig, remote_sig) = (refs_signature(&local), refs_signature(&remote));
+    let plan = pair_plan(&local, &remote);
 
     // #28p D5: nothing moved on either side and we were green → re-emit, skipping the
     // bundle round trip entirely. This is what stops a bare `git add` (which trips the
@@ -2064,7 +2234,7 @@ async fn reconcile_with(
         &prior,
         &local_sig,
         &remote_sig,
-        local.is_repo && remote.is_repo,
+        matches!(plan, PairPlan::Sync),
         opts.forced,
     ) {
         return persist(
@@ -2084,7 +2254,7 @@ async fn reconcile_with(
     let mut pairing_blocked: Option<String> = None;
     let mut pairing_conflict: Option<PairingConflict> = None;
 
-    if local.is_repo && remote.is_repo {
+    if matches!(plan, PairPlan::Sync) {
         // Local → remote, then remote → local (each catches the side that is ahead).
         // A leg that *errors* (bundle unreadable, SFTP transfer died) must not be
         // discarded: dropping it leaves `diverged`/`blocked` empty, which computes to
@@ -2114,9 +2284,11 @@ async fn reconcile_with(
             }
             Err(e) => blocked = blocked.or(Some(format!("Sync from the host failed: {e}"))),
         }
-    } else if local.is_repo != remote.is_repo {
-        // Exactly one side is a repo → initialize the other from it (initial pairing).
-        let source_is_local = local.is_repo;
+    } else if let PairPlan::Pair { source_is_local } = plan {
+        // Exactly one side holds a commit → initialize the other from it (initial
+        // pairing). NB "holds a commit", not "is a repo": a host left as a bare
+        // `git init` by a seed that died mid-way is an unpaired dest, not a peer, and
+        // this is the branch that finishes it (see `is_seeded`).
         // The dest is the side we would `git init` + `reset --hard`. If *its* probe
         // errored (the tree is there, but git couldn't confirm what it is), refuse: a
         // transient git/network failure must never license a wipe of a real repo. This
@@ -2164,18 +2336,22 @@ async fn reconcile_with(
                 });
             } else {
                 let source = if source_is_local { &local } else { &remote };
-                if init_pairing(pool, manifest, project_id, spec, source_is_local, source)
-                    .await
-                    .is_ok()
+                match init_pairing(pool, manifest, project_id, spec, source_is_local, source).await
                 {
-                    // Pairing just materialized both sides to the same HEAD, so every
-                    // tracked file is byte-identical across host and mirror. Seed the
-                    // selective-sync manifest for them so the file tree shows them green
-                    // (in sync) rather than red (untracked by SFTP sync) — there is
-                    // nothing to transfer. This branch only fires at the pairing moment
-                    // (exactly one side a repo), so it runs once and never re-selects a
-                    // file the user later deselects.
-                    seed_manifest_after_pairing(pool, manifest, project_id, spec).await;
+                    Ok(()) => {
+                        // Pairing just materialized both sides to the same HEAD, so every
+                        // tracked file is byte-identical across host and mirror. Seed the
+                        // selective-sync manifest for them so the file tree shows them green
+                        // (in sync) rather than red (untracked by SFTP sync) — there is
+                        // nothing to transfer. This branch only fires at the pairing moment
+                        // (exactly one side seeded), so it runs once and never re-selects a
+                        // file the user later deselects.
+                        seed_manifest_after_pairing(pool, manifest, project_id, spec).await;
+                    }
+                    // A seed that failed part-way leaves the dest a bare, unseeded repo.
+                    // Say so: it used to report `Ok` and settle into a permanent, baffling
+                    // head mismatch. The dest stays unseeded, so the next pass retries.
+                    Err(e) => pairing_blocked = Some(format!("Initial pairing failed: {e}")),
                 }
             }
         }
@@ -2824,6 +3000,7 @@ pub async fn start(
     manifest: SyncManifestState,
     auto: AutoSyncState,
     reg: &GitPeerRegistry,
+    worker_sync: crate::services::worker_sync::WorkerSyncState,
     project_id: &str,
 ) {
     let Some(target) = remote_target_for(project_id) else {
@@ -2863,6 +3040,7 @@ pub async fn start(
         pool,
         manifest,
         auto,
+        worker_sync,
         target.spec,
         project_id.to_string(),
         rx,
@@ -2902,6 +3080,7 @@ async fn poll_loop(
     pool: RemotePoolState,
     manifest: SyncManifestState,
     auto: AutoSyncState,
+    worker_sync: crate::services::worker_sync::WorkerSyncState,
     spec: RemoteSpec,
     project_id: String,
     mut rx: mpsc::UnboundedReceiver<()>,
@@ -2920,6 +3099,10 @@ async fn poll_loop(
     )
     .await;
     emit_status(&app, &project_id, &s);
+    // The primary now holds the current committed code; push it to any already-
+    // connected workers (multi-host, `docs/multi_host_remote_plan.md` §2). Cheap
+    // when they are already at HEAD (a mirror-head read, no network).
+    crate::services::worker_sync::fan_out(&app, &pool, &worker_sync, &project_id, false).await;
 
     let mut interval = tokio::time::interval(GIT_POLL_INTERVAL);
     interval.set_missed_tick_behavior(MissedTickBehavior::Delay);
@@ -2947,6 +3130,12 @@ async fn poll_loop(
                 )
                 .await;
                 emit_status(&app, &project_id, &s);
+                // A `.git` change on the mirror = a new commit/ref move; fan the
+                // committed code out to every connected worker (plan §2 trigger).
+                crate::services::worker_sync::fan_out(
+                    &app, &pool, &worker_sync, &project_id, false,
+                )
+                .await;
             }
         }
     }
@@ -4182,4 +4371,201 @@ mod tests {
         assert_eq!(s.status, SyncStatus::Synchronized);
         assert!(s.pairing_conflict.is_none() && s.local_sig.is_none());
     }
+
+    // ── The half-seeded host: `git init` ran, the checkout never did ─────────
+    //
+    // Live failure (SimpleGNN, extend-local-to-remote): the host ended up holding a
+    // `.git` and an empty working tree, permanently, and the pill blamed a branch that
+    // existed on neither side ("the mirror is on 'transfer-learning', the host is on
+    // 'master'"). Three bugs in series; one test each, plus the gate that repairs it.
+
+    /// Bug 1. `git rev-parse HEAD` on an unborn repo prints the literal `HEAD` to
+    /// **stdout** and reports the failure only in its exit status. `PROBE_SCRIPT`
+    /// discarded that status, so `parse_head` was handed `("master", "HEAD")` and built
+    /// `Branch { name: "master", sha: "HEAD" }` — a branch nobody has, at a sha that is
+    /// not a sha. `parse_head` now demands a real object name, so no probe, however
+    /// broken, can fabricate a checked-out branch again.
+    #[test]
+    fn parse_head_never_invents_a_branch_from_a_non_sha() {
+        assert_eq!(parse_head("master", "HEAD"), HeadRef::Unborn);
+        assert_eq!(parse_head("", "HEAD"), HeadRef::Unborn);
+        assert_eq!(parse_head("main", ""), HeadRef::Unborn);
+        assert_eq!(parse_head("main", "not-a-sha"), HeadRef::Unborn);
+        // …while a real head still parses exactly as before.
+        assert_eq!(
+            parse_head("main", "abc123"),
+            HeadRef::Branch { name: "main".into(), sha: "abc123".into() }
+        );
+        assert_eq!(parse_head("", "abc123"), HeadRef::Detached { sha: "abc123".into() });
+    }
+
+    /// Bug 1, at the level that actually shipped. `parse_probe_block_tolerates_empty_
+    /// sections_and_a_non_repo` already asserted "unborn → `HeadRef::Unborn`", and passed
+    /// throughout — because it *synthesized* the block by hand with an empty sha section,
+    /// encoding the very assumption that was false. So: drive the real `PROBE_SCRIPT`
+    /// through a real `sh` against a real `git init`ed repo, and read what git actually
+    /// prints. This is the test that would have caught it.
+    #[cfg(unix)]
+    #[test]
+    fn probe_script_reports_a_real_unborn_repo_as_unborn() {
+        if !git_available() {
+            eprintln!("git not on PATH — skipping probe_script_reports_a_real_unborn_repo");
+            return;
+        }
+        let tmp = tempfile::tempdir().expect("tempdir");
+        let dir = tmp.path();
+        crate::paths::command_no_window("git")
+            .args(["init", "-q", "-b", "master", "."])
+            .current_dir(dir)
+            .output()
+            .expect("git init");
+
+        let snap = parse_probe_block(&run_sh(dir, PROBE_SCRIPT)).expect("parses");
+        assert!(snap.is_repo, "a bare `git init` IS a repo…");
+        assert_eq!(
+            snap.head,
+            Some(HeadRef::Unborn),
+            "…but its HEAD is unborn — NOT `Branch {{ name: \"master\", sha: \"HEAD\" }}`"
+        );
+        assert!(snap.branches.is_empty() && snap.head_subject.is_none());
+        // The batched remote probe and the per-command local one must agree about what
+        // unborn looks like, or the bug simply moves to whichever path a peer takes.
+        assert_eq!(snap.head, probe_per_command(&Peer::Local(dir.to_path_buf())).head);
+        // And the whole point: this side is not seeded, so it is still pairable.
+        assert!(!is_seeded(&snap));
+    }
+
+    /// Bug 2. The pairing gate keyed on `is_repo`, but `git init` is pairing's own first
+    /// step — so a seed that died after it flipped the gate shut behind itself. The dest
+    /// was a repo forever after, "exactly one side is a repo" never fired again, and the
+    /// steady-state path only ever moves refs (`update-ref`); it never positions HEAD or
+    /// checks out. Hence: objects and refs on the host, empty tree, forever.
+    #[test]
+    fn a_bare_git_init_is_not_seeded_and_stays_pairable() {
+        let unborn = PeerSnapshot { is_repo: true, head: Some(HeadRef::Unborn), ..Default::default() };
+        let seeded = PeerSnapshot {
+            is_repo: true,
+            head: Some(HeadRef::Branch { name: "transfer-learning".into(), sha: "a5b535d".into() }),
+            branches: vec![RefEntry { name: "transfer-learning".into(), sha: "a5b535d".into() }],
+            ..Default::default()
+        };
+        let absent = PeerSnapshot::default();
+
+        assert!(!is_seeded(&absent), "not a repo");
+        assert!(!is_seeded(&unborn), "a repo, but nothing is checked out");
+        assert!(is_seeded(&seeded));
+        assert!(is_seeded(&PeerSnapshot {
+            is_repo: true,
+            head: Some(HeadRef::Detached { sha: "abc123".into() }),
+            ..Default::default()
+        }));
+
+        // The live case: mirror seeded, host `git init`ed and never checked out.
+        assert_eq!(
+            pair_plan(&seeded, &unborn),
+            PairPlan::Pair { source_is_local: true },
+            "the half-seeded host must be re-paired, not treated as a peer"
+        );
+        // Under the old `is_repo` gate this was `Sync` — which moved refs and never a
+        // single file, which is exactly how it wedged.
+        assert!(seeded.is_repo && unborn.is_repo, "…and both ARE repos, which is the trap");
+
+        assert_eq!(pair_plan(&seeded, &absent), PairPlan::Pair { source_is_local: true });
+        assert_eq!(pair_plan(&absent, &seeded), PairPlan::Pair { source_is_local: false });
+        assert_eq!(pair_plan(&seeded, &seeded), PairPlan::Sync);
+        assert_eq!(pair_plan(&absent, &absent), PairPlan::Nothing);
+        assert_eq!(pair_plan(&unborn, &unborn), PairPlan::Nothing, "nothing to move either way");
+    }
+
+    /// The nastiest shape of bug 2: the refs DID land (the steady-state pass creates them
+    /// with `update-ref`), so the host looks populated by every measure except the only
+    /// one that matters — whether anything is checked out. A gate that looked at branches
+    /// rather than HEAD would call this seeded and wedge exactly as before.
+    #[test]
+    fn a_host_with_refs_but_no_checkout_is_still_unseeded() {
+        let mirror = PeerSnapshot {
+            is_repo: true,
+            head: Some(HeadRef::Branch { name: "transfer-learning".into(), sha: "a5b535d".into() }),
+            branches: vec![RefEntry { name: "transfer-learning".into(), sha: "a5b535d".into() }],
+            ..Default::default()
+        };
+        // Every ref arrived; HEAD is still unborn. Empty working tree.
+        let host = PeerSnapshot {
+            is_repo: true,
+            head: Some(HeadRef::Unborn),
+            branches: vec![
+                RefEntry { name: "transfer-learning".into(), sha: "a5b535d".into() },
+                RefEntry { name: "main".into(), sha: "64bd1c3".into() },
+            ],
+            ..Default::default()
+        };
+        assert!(!is_seeded(&host), "refs are not a checkout");
+        assert_eq!(pair_plan(&mirror, &host), PairPlan::Pair { source_is_local: true });
+    }
+
+    /// Bug 3's other half: a half-seeded side must never be able to *early-out* of the
+    /// very pass that would repair it. `can_early_out` now gates on both sides being
+    /// seeded, not on both being repos.
+    #[test]
+    fn early_out_never_skips_a_half_seeded_side() {
+        let prior = GitPeerState {
+            status: SyncStatus::Synchronized,
+            local_sig: Some("sig".into()),
+            remote_sig: Some("sig".into()),
+            ..Default::default()
+        };
+        assert!(
+            can_early_out(&prior, "sig", "sig", true, false),
+            "both seeded + green + unmoved → skip, as before"
+        );
+        assert!(
+            !can_early_out(&prior, "sig", "sig", false, false),
+            "a side that was never checked out must always be re-examined"
+        );
+    }
+
+    /// The constraint on the repair: it must never cost the user a local file. When the
+    /// mirror is the unseeded side, pairing writes *it* — so the D3 collision guard is
+    /// what stands between `reset --hard` and the user's untracked work, and it must fail
+    /// CLOSED. A dest file that cannot be proven byte-identical to what the source would
+    /// write over it (`hash: None` — the hash could not be computed) is a conflict, which
+    /// blocks the pairing and raises the prompt instead of clobbering.
+    #[test]
+    fn pairing_into_the_mirror_refuses_to_clobber_unproven_local_files() {
+        let source: HashMap<String, Fingerprint> = [
+            ("README.md".to_string(), Fingerprint { size: 10, hash: Some("aaa".into()) }),
+            ("src/a.rs".to_string(), Fingerprint { size: 20, hash: Some("bbb".into()) }),
+        ]
+        .into_iter()
+        .collect();
+
+        // Same path, same size, but the hash could not be established → NOT provably
+        // identical → refused rather than overwritten.
+        let unproven: HashMap<String, Fingerprint> =
+            [("README.md".to_string(), Fingerprint { size: 10, hash: None })].into_iter().collect();
+        assert_eq!(pairing_collisions(&source, &unproven), vec!["README.md".to_string()]);
+
+        // Differing content → refused.
+        let differs: HashMap<String, Fingerprint> =
+            [("src/a.rs".to_string(), Fingerprint { size: 20, hash: Some("zzz".into()) })]
+                .into_iter()
+                .collect();
+        assert_eq!(pairing_collisions(&source, &differs), vec!["src/a.rs".to_string()]);
+
+        // Byte-identical → adopting it is a no-op, so pairing proceeds (the intended
+        // "the mirror already holds these files" path).
+        let identical: HashMap<String, Fingerprint> =
+            [("README.md".to_string(), Fingerprint { size: 10, hash: Some("aaa".into()) })]
+                .into_iter()
+                .collect();
+        assert!(pairing_collisions(&source, &identical).is_empty());
+
+        // A local file the source does not track is not a collision at all — and
+        // `reset --hard` never removes untracked paths, so it survives the pairing.
+        let untracked: HashMap<String, Fingerprint> =
+            [("data/big.npz".to_string(), Fingerprint { size: 999, hash: None })]
+                .into_iter()
+                .collect();
+        assert!(pairing_collisions(&source, &untracked).is_empty());
+    }
 }
diff --git a/src-tauri/src/services/mod.rs b/src-tauri/src/services/mod.rs
index 1fb38d8..cfdf2c0 100644
--- a/src-tauri/src/services/mod.rs
+++ b/src-tauri/src/services/mod.rs
@@ -10,6 +10,7 @@ pub mod remote;
 pub mod remote_agents;
 pub mod remote_credentials;
 pub mod remote_sync;
+pub mod remote_usage;
 pub mod restore_service;
 // The project container bind-mounts host paths straight into a Linux container
 // and maps the host uid/gid, so it is Unix-only today *at runtime*: Windows
@@ -23,6 +24,8 @@ pub mod ssh_common;
 pub mod ssh_exec;
 pub mod sync_auto;
 pub mod terminal_service;
+pub mod tmux_local;
 pub mod usage_stats;
 pub mod window_service;
+pub mod worker_sync;
 pub mod window_state;
diff --git a/src-tauri/src/services/net_usage.rs b/src-tauri/src/services/net_usage.rs
index fd4733b..84dad58 100644
--- a/src-tauri/src/services/net_usage.rs
+++ b/src-tauri/src/services/net_usage.rs
@@ -13,8 +13,22 @@
 //!
 //! Reset handling mirrors the pane's client-side `rateFromSamples`: when a
 //! project's ControlMaster restarts (its `connection_id` changes) or its
-//! counters run backwards, we re-baseline and record nothing for that step, so a
-//! fresh master's whole-lifetime counter is never booked as one spike.
+//! counters run backwards, we re-baseline for the diff.
+//!
+//! First-sight booking: a ControlMaster's `bytes_*` counters start at ~0 when it
+//! comes up, so the *first* time we see a given `connection_id` its whole
+//! cumulative value is real traffic for this project that nothing has booked yet
+//! — we book it, then diff from there. This is what captures a burst that
+//! completes *before* the sampler's first tick, most visibly the seed transfer a
+//! fresh remote project pushes right after connecting (extend-to-remote). We must
+//! not do this on *every* re-baseline, though: a transient `ss` failure drops our
+//! baseline for a master we already track, and re-booking its cumulative would
+//! double-count everything since it came up. So the booking is gated on the
+//! `connection_id` being one we have *never* tracked this process — the PID in it
+//! makes a genuinely new master distinguishable from one we simply lost sight of.
+//! (A master that survives a crash and is re-attached within `ControlPersist` is
+//! the one residual case where its pre-crash bytes book once; a rare, bounded
+//! over-count, versus silently losing every seed.)
 //!
 //! Linux-only: the counters come from `ss`, matching `commands::network`. On
 //! other platforms [`start`] is a no-op.
@@ -63,8 +77,44 @@ mod linux {
         tx: u64,
     }
 
+    /// What one sample contributes, given the previous baseline and whether this
+    /// master's `connection_id` has been tracked before this process.
+    #[derive(Debug, PartialEq)]
+    enum Booking {
+        /// Same master, counters advanced → the per-interval delta.
+        Delta(u64, u64),
+        /// A master never tracked before → book its cumulative counter from zero
+        /// (its counters started at ~0 when it came up; captures a pre-first-sample
+        /// burst such as the extend-to-remote seed). Caller marks it tracked.
+        Fresh(u64, u64),
+        /// A master we *have* tracked but whose baseline we lost (a transient `ss`
+        /// failure) → book nothing; re-booking the cumulative would double-count.
+        Rebaseline,
+    }
+
+    /// Pure booking decision (see the module doc). `cid_known` is whether this
+    /// master's `connection_id` is already in the process's tracked set.
+    fn decide_booking(prev: Option<&Baseline>, cur: &Baseline, cid_known: bool) -> Booking {
+        match prev {
+            Some(p)
+                if p.connection_id == cur.connection_id && cur.rx >= p.rx && cur.tx >= p.tx =>
+            {
+                Booking::Delta(cur.rx - p.rx, cur.tx - p.tx)
+            }
+            // First sight, a restarted master (new connection_id), or a backwards
+            // counter. Book from zero only when the connection_id is genuinely new.
+            _ if cid_known => Booking::Rebaseline,
+            _ => Booking::Fresh(cur.rx, cur.tx),
+        }
+    }
+
     pub(super) async fn run(pool: RemotePoolState) {
         let mut baselines: HashMap<String, Baseline> = HashMap::new();
+        // Every `connection_id` we have ever booked a baseline for this process.
+        // A `connection_id` absent here is a master we have never tracked, so its
+        // cumulative counter is bookable-from-zero (see the module doc); one we
+        // have tracked but lost (an `ss` hiccup) must re-baseline silently.
+        let mut known_conns: std::collections::HashSet<String> = std::collections::HashSet::new();
         let mut pending: HashMap<String, ByteCounts> = HashMap::new();
         let mut tick: u64 = 0;
 
@@ -86,7 +136,14 @@ mod linux {
                 .cloned()
                 .collect();
             for id in gone {
-                baselines.remove(&id);
+                // Forget the master's connection_id too: a reconnect brings up a
+                // fresh master (counter from ~0), which should book-from-zero, and
+                // this keeps `known_conns` bounded by the *live* master count.
+                if let Some(prev) = baselines.remove(&id) {
+                    if let Some(cid) = prev.connection_id {
+                        known_conns.remove(&cid);
+                    }
+                }
                 disconnected = true;
             }
 
@@ -110,23 +167,23 @@ mod linux {
                     rx: snap.rx_bytes,
                     tx: snap.tx_bytes,
                 };
+                // Guaranteed `Some` — the `is_none()` guard above `continue`d.
+                let cid = snap.connection_id.clone().unwrap_or_default();
 
-                match baselines.get(id) {
-                    // New project, restarted master, or counters ran backwards:
-                    // re-baseline, record nothing this step.
-                    None => {}
-                    Some(prev)
-                        if prev.connection_id != cur.connection_id
-                            || cur.rx < prev.rx
-                            || cur.tx < prev.tx => {}
-                    Some(prev) => {
-                        let d_rx = cur.rx - prev.rx;
-                        let d_tx = cur.tx - prev.tx;
-                        if d_rx != 0 || d_tx != 0 {
-                            let acc = pending.entry(id.clone()).or_default();
-                            acc.rx = acc.rx.saturating_add(d_rx);
-                            acc.tx = acc.tx.saturating_add(d_tx);
-                        }
+                let booked = match decide_booking(baselines.get(id), &cur, known_conns.contains(&cid))
+                {
+                    Booking::Delta(d_rx, d_tx) => Some((d_rx, d_tx)),
+                    Booking::Fresh(d_rx, d_tx) => {
+                        known_conns.insert(cid);
+                        Some((d_rx, d_tx))
+                    }
+                    Booking::Rebaseline => None,
+                };
+                if let Some((d_rx, d_tx)) = booked {
+                    if d_rx != 0 || d_tx != 0 {
+                        let acc = pending.entry(id.clone()).or_default();
+                        acc.rx = acc.rx.saturating_add(d_rx);
+                        acc.tx = acc.tx.saturating_add(d_tx);
                     }
                 }
                 baselines.insert(id.clone(), cur);
@@ -165,6 +222,57 @@ mod linux {
         })
         .await;
     }
+
+    #[cfg(test)]
+    mod tests {
+        use super::{decide_booking, Baseline, Booking};
+
+        fn base(cid: &str, rx: u64, tx: u64) -> Baseline {
+            Baseline { connection_id: Some(cid.to_string()), rx, tx }
+        }
+
+        #[test]
+        fn same_master_advancing_books_the_delta() {
+            let prev = base("pid1:a:b", 100, 40);
+            let cur = base("pid1:a:b", 175, 55);
+            assert_eq!(decide_booking(Some(&prev), &cur, true), Booking::Delta(75, 15));
+        }
+
+        #[test]
+        fn first_sight_of_a_new_master_books_from_zero() {
+            // No baseline yet and a connection_id never tracked → the whole
+            // cumulative counter is the seed that landed before the first sample.
+            let cur = base("pid1:a:b", 9000, 4000);
+            assert_eq!(decide_booking(None, &cur, false), Booking::Fresh(9000, 4000));
+        }
+
+        #[test]
+        fn restart_to_a_new_master_books_its_cumulative() {
+            // Master restarted (new pid → new connection_id, counter reset). The new
+            // id is unknown, so its from-zero counter is booked, not discarded.
+            let prev = base("pid1:a:b", 9000, 4000);
+            let cur = base("pid2:a:b", 120, 30);
+            assert_eq!(decide_booking(Some(&prev), &cur, false), Booking::Fresh(120, 30));
+        }
+
+        #[test]
+        fn lost_baseline_for_a_known_master_rebaselines_silently() {
+            // A transient `ss` failure dropped our baseline (prev is None) but the
+            // connection_id is still one we tracked → booking the cumulative again
+            // would double-count, so book nothing.
+            let cur = base("pid1:a:b", 9000, 4000);
+            assert_eq!(decide_booking(None, &cur, true), Booking::Rebaseline);
+        }
+
+        #[test]
+        fn backwards_counter_on_known_id_rebaselines() {
+            // Same id but the counter regressed (should not happen for a cumulative
+            // counter, but never book a negative) → re-baseline, no booking.
+            let prev = base("pid1:a:b", 9000, 4000);
+            let cur = base("pid1:a:b", 100, 30);
+            assert_eq!(decide_booking(Some(&prev), &cur, true), Booking::Rebaseline);
+        }
+    }
 }
 
 #[cfg(target_os = "linux")]
diff --git a/src-tauri/src/services/openvpn.rs b/src-tauri/src/services/openvpn.rs
index 2a2683c..515b95d 100644
--- a/src-tauri/src/services/openvpn.rs
+++ b/src-tauri/src/services/openvpn.rs
@@ -176,15 +176,59 @@ fn disconnect_interactive(config: &str) {
     }
 }
 
+/// Root pids we have already delivered a TERM to. **This is what keeps the app-close
+/// path to a single password prompt.** Killing an OpenVPN daemon is elevated
+/// (`pkexec kill`), and polkit authenticates *per invocation* — so a second elevated
+/// kill aimed at the same daemon costs the user a second password, even though the
+/// first one already did the job. Two things make that second kill happen: the quit
+/// path tears tunnels down twice by design (the checked teardown while the window is
+/// still on screen, then `RunEvent::Exit`'s best-effort `disconnect_all`), and TERM is
+/// asynchronous — the daemon is still alive for a moment after the first kill returns,
+/// so a liveness probe alone cannot tell "already handled" from "still needs killing".
+///
+/// Remembering the pid does. A pid in here has been asked to die and needs no second
+/// elevated ask; anything *not* in here is still killed exactly as before, so no tunnel
+/// can be silently left up. Pids are unique for the app's lifetime in practice (the set
+/// only ever holds the handful of tunnels one run brought up).
+#[cfg(any(unix, target_os = "windows"))]
+fn signalled_pids() -> &'static Mutex<std::collections::HashSet<i32>> {
+    static PIDS: OnceLock<Mutex<std::collections::HashSet<i32>>> = OnceLock::new();
+    PIDS.get_or_init(|| Mutex::new(std::collections::HashSet::new()))
+}
+
+/// Whether an elevated kill of `pid` can be skipped as already-done: we have signalled
+/// it before, or it is simply gone. Skipping reports *success* to the caller — the
+/// tunnel is down or on its way down either way, and the whole point is to not spend a
+/// password prompt re-confirming it.
+#[cfg(any(unix, target_os = "windows"))]
+fn kill_already_handled(pid: i32) -> bool {
+    if signalled_pids().lock().unwrap().contains(&pid) {
+        return true;
+    }
+    !pid_alive(pid)
+}
+
+/// Record that `pid` has been sent a TERM, so no later teardown pass re-elevates for it.
+#[cfg(any(unix, target_os = "windows"))]
+fn mark_signalled(pid: i32) {
+    signalled_pids().lock().unwrap().insert(pid);
+}
+
 /// `kill -TERM` a **root-owned** pid, escalating the same way the platform's
 /// connect does (a plain kill would get EPERM).
 #[cfg(target_os = "linux")]
 fn kill_root_pid(pid: i32) {
-    let _ = Command::new("pkexec")
+    if kill_already_handled(pid) {
+        return;
+    }
+    let status = Command::new("pkexec")
         .arg("kill")
         .arg("-TERM")
         .arg(pid.to_string())
         .status();
+    if matches!(status, Ok(s) if s.success()) {
+        mark_signalled(pid);
+    }
 }
 
 #[cfg(target_os = "macos")]
@@ -297,6 +341,29 @@ pub fn list_configs() -> Vec<StoredConfig> {
     items.into_iter().map(|(_, c)| c).collect()
 }
 
+/// Remove a stored `.ovpn` config from Eldrun's store. Deletes only Eldrun's
+/// copy — the path must be inside [`configs_dir`], so the user's original file
+/// is never touched. Refused while the config's tunnel is up: the row offering
+/// removal should be a dead tunnel's, and a live one must be disconnected
+/// first, not have its config pulled out from under it. Removing an
+/// already-gone file succeeds — the goal state is "not stored".
+pub fn remove_config(config: &str) -> Result<(), String> {
+    let config = config.trim();
+    validate_arg("OpenVPN config", config)?;
+    let path = Path::new(config);
+    if !path.starts_with(configs_dir()) {
+        return Err("not a stored OpenVPN config".to_string());
+    }
+    if is_connected(config) {
+        return Err("this tunnel is up — disconnect it before removing its config".to_string());
+    }
+    match std::fs::remove_file(path) {
+        Ok(()) => Ok(()),
+        Err(e) if e.kind() == std::io::ErrorKind::NotFound => Ok(()),
+        Err(e) => Err(format!("remove config: {e}")),
+    }
+}
+
 /// Recover an `.ovpn` config's display name from its stored file name. Stored
 /// as `{stem}__{original_name}`; `rsplit_once` keeps the last segment as the
 /// name (the stem can itself contain `__` since non-alnums collapse to `_`,
@@ -872,6 +939,79 @@ pub fn active_configs() -> Vec<String> {
     keys.into_iter().filter(|c| is_connected(c)).collect()
 }
 
+/// Re-adopt tunnels a **previous run of Eldrun** (or a crash) left running, so the
+/// VPN lamp reflects the machine's *actual* routing at launch instead of a blank
+/// slate.
+///
+/// Every live-tunnel registry — [`registry`] (headless), [`interactive_registry`],
+/// and macOS's `mac_registry` — is **in-memory only**. Nothing rebuilds them from
+/// disk. So after a full restart Eldrun has no record of a tunnel it started before,
+/// yet the OpenVPN daemon runs as **root** and survives the app dying (a renderer
+/// SIGBUS that takes the process down, an OOM kill, a refused polkit prompt at quit,
+/// a plain crash): it is reparented to init and keeps rerouting the whole machine.
+/// The machines then still connect over SSH — exactly the "lamp is grey but the
+/// machines are up" symptom — because the routing the tunnel installed is genuinely
+/// still there; only Eldrun's memory of it is gone.
+///
+/// This closes that gap. For every **stored** config it looks for the pidfiles
+/// Eldrun writes to [`runtime_dir`] — `{stem}.pid` (headless) and
+/// `{stem}.interactive.pid` (interactive) — and, when the recorded pid is still
+/// alive, re-registers the tunnel; a pidfile whose pid is dead is a stale leftover
+/// and is removed. Recovered tunnels are seated in [`interactive_registry`]
+/// regardless of which flavour wrote the pidfile: after a restart there is no
+/// [`Child`] handle to reconstruct, so a bare pid + [`pid_alive`] + [`kill_root_pid`]
+/// is the only liveness/teardown model available — which is precisely the interactive
+/// one, and it makes the recovered tunnel visible ([`is_connected`]/[`active_configs`])
+/// and killable ([`disconnect`]/[`disconnect_all`]) just like any other.
+///
+/// Only tunnels for configs Eldrun *stored* are recoverable: a tunnel brought up
+/// entirely outside Eldrun (NetworkManager, systemd, a manual `sudo openvpn`) has no
+/// Eldrun-owned pidfile to map back to a config, so it is out of scope here.
+#[cfg(any(target_os = "linux", target_os = "windows", target_os = "macos"))]
+pub fn adopt_orphans() {
+    for cfg in list_configs() {
+        adopt_config(&cfg.path);
+    }
+}
+
+/// Re-adopt one config's orphaned tunnel if its pidfile records a live root daemon.
+/// Returns `true` when a tunnel was (re-)seated. The per-config core of
+/// [`adopt_orphans`], split out so the recovery logic is unit-testable against a
+/// throwaway config path without touching the real config store.
+#[cfg(any(target_os = "linux", target_os = "windows", target_os = "macos"))]
+fn adopt_config(config: &str) -> bool {
+    // Already tracked by a live registry entry (this can run after another path
+    // seated the tunnel) — leave it be.
+    if is_connected(config) {
+        return false;
+    }
+    let stem = safe_stem(config);
+    // Prefer the headless pidfile, then the interactive one; either records the
+    // root daemon's pid, which is all a post-restart adopt can act on.
+    let candidates = [
+        runtime_dir().join(format!("{stem}.pid")),
+        interactive_pidfile(config),
+    ];
+    for pidfile in candidates {
+        match pidfile_pid(&pidfile) {
+            Some(pid) if pid_alive(pid) => {
+                interactive_registry()
+                    .lock()
+                    .unwrap()
+                    .insert(config.to_string(), pidfile);
+                return true;
+            }
+            // Pid recorded but gone: a stale file from a tunnel that has since
+            // died. Drop it so a later connect can't mistake it for a live one.
+            Some(_) => {
+                let _ = std::fs::remove_file(&pidfile);
+            }
+            None => {}
+        }
+    }
+    false
+}
+
 /// Bring up the OpenVPN tunnel for `config`, authenticating with `password` (and
 /// `key_passphrase` for a config that *also* has an encrypted private key — see
 /// [`write_credfiles`]). No-op (returns `Ok`) if already connected. Blocks until
@@ -1073,28 +1213,136 @@ pub fn disconnect(config: &str) -> Result<(), String> {
     let Some(mut proc) = proc else {
         return Ok(());
     };
-    kill_pidfile(&proc.pidfile);
+    let _ = kill_pidfile(&proc.pidfile);
     let _ = proc.child.kill();
     let _ = proc.child.wait();
     let _ = std::fs::remove_file(&proc.pidfile);
     Ok(())
 }
 
-/// `pkexec kill` the pid recorded in `pidfile` (the root OpenVPN process).
+/// Interactive-tunnel teardown that reports whether the tunnel is down afterwards.
+/// Mirrors [`disconnect_interactive`] but keeps the registry claim when the elevated
+/// kill is refused, so a cancelled polkit prompt leaves the tunnel visible and
+/// killable rather than forgotten-but-alive.
 #[cfg(target_os = "linux")]
-fn kill_pidfile(pidfile: &Path) {
-    let Ok(contents) = std::fs::read_to_string(pidfile) else {
-        return;
+fn disconnect_interactive_checked(config: &str) -> bool {
+    match interactive_state(config) {
+        Interactive::Alive(pid) => {
+            if !kill_root_pid_checked(pid) {
+                return false;
+            }
+            if let Some(pidfile) = interactive_registry().lock().unwrap().remove(config) {
+                let _ = std::fs::remove_file(&pidfile);
+            }
+            true
+        }
+        // Never authenticated — nothing root-owned to kill; drop the stale claim.
+        Interactive::Pending => {
+            interactive_registry().lock().unwrap().remove(config);
+            true
+        }
+        Interactive::None => true,
+    }
+}
+
+/// `pkexec kill -TERM` a root-owned pid, reporting whether it was delivered (vs. a
+/// refused polkit prompt). The checked twin of [`kill_root_pid`].
+#[cfg(target_os = "linux")]
+fn kill_root_pid_checked(pid: i32) -> bool {
+    // Already TERMed (or already gone) — the tunnel is down or going down, and a
+    // second `pkexec` would only cost the user a second password. See `signalled_pids`.
+    if kill_already_handled(pid) {
+        return true;
+    }
+    let ok = Command::new("pkexec")
+        .arg("kill")
+        .arg("-TERM")
+        .arg(pid.to_string())
+        .status()
+        .map(|s| s.success())
+        .unwrap_or(false);
+    if ok {
+        mark_signalled(pid);
+    }
+    ok
+}
+
+/// Like [`disconnect`], but reports whether the tunnel actually went down.
+///
+/// The app-close path needs this. `disconnect` is best-effort — it drops the
+/// registry entry and ignores whether the elevated `pkexec kill` succeeded — which
+/// is right for exit-time cleanup but wrong for a quit that must be *cancelled* when
+/// the user dismisses the polkit prompt: the tunnel (and the machine-wide routing it
+/// installed) is still up, and silently forgetting it would strand that routing with
+/// nothing left to undo it. On failure the registry entry is preserved so the tunnel
+/// stays visible (`active_configs`) and killable.
+#[cfg(target_os = "linux")]
+pub fn disconnect_checked(config: &str) -> Result<(), String> {
+    // Interactive tunnel (terminal-started) first — its own elevated kill.
+    if !disconnect_interactive_checked(config) {
+        return Err("openvpn teardown was not authorized".into());
+    }
+    // Headless tunnel: peek the pidfile without removing, so a refused kill leaves
+    // the entry in place.
+    let pidfile = registry()
+        .lock()
+        .unwrap()
+        .get(config)
+        .map(|p| p.pidfile.clone());
+    let Some(pidfile) = pidfile else {
+        return Ok(());
     };
-    let pid = contents.trim();
-    if pid.is_empty() || !pid.chars().all(|c| c.is_ascii_digit()) {
-        return;
+    if !kill_pidfile(&pidfile) {
+        return Err("openvpn teardown was not authorized".into());
+    }
+    // TERM delivered — now reap our child and forget it.
+    if let Some(mut proc) = registry().lock().unwrap().remove(config) {
+        let _ = proc.child.kill();
+        let _ = proc.child.wait();
+        let _ = std::fs::remove_file(&proc.pidfile);
+    }
+    Ok(())
+}
+
+/// Non-Linux: no polkit prompt to cancel (Windows brings tunnels up through the
+/// unelevated interactive service; macOS raises an `osascript` admin prompt whose
+/// cancellation is a smaller, separate gap), so the app-close path falls back to the
+/// best-effort teardown.
+#[cfg(not(target_os = "linux"))]
+pub fn disconnect_checked(config: &str) -> Result<(), String> {
+    disconnect(config)
+}
+
+/// `pkexec kill` the pid recorded in `pidfile` (the root OpenVPN process). Returns
+/// whether the tunnel can be considered down afterwards: `true` if the TERM was
+/// delivered (or there was no pid to kill), `false` if the elevated kill was refused
+/// — a cancelled polkit prompt, which leaves the tunnel (and the machine's routing)
+/// up. Best-effort callers ignore the bool; the app-close path (`disconnect_checked`)
+/// reads it to decide whether the quit can proceed.
+#[cfg(target_os = "linux")]
+fn kill_pidfile(pidfile: &Path) -> bool {
+    // No pid on disk (or an unusable one) — nothing to kill, and nothing that may
+    // reach `kill` unvalidated. `pidfile_pid` is the one place that parse lives.
+    let Some(pid) = pidfile_pid(pidfile) else {
+        return true;
+    };
+    // Already TERMed (or already gone): report success without re-elevating, so the
+    // exit-time `disconnect_all` never re-prompts for a tunnel the on-quit teardown
+    // already took down. See `signalled_pids`.
+    if kill_already_handled(pid) {
+        return true;
     }
-    let _ = Command::new("pkexec")
+    let ok = Command::new("pkexec")
         .arg("kill")
         .arg("-TERM")
-        .arg(pid)
-        .status();
+        .arg(pid.to_string())
+        .status()
+        .map(|s| s.success())
+        .unwrap_or(false);
+    if ok {
+        mark_signalled(pid);
+    }
+    ok
 }
 
 /// Tear down every live tunnel. Used at app exit; errors are swallowed so
@@ -1119,6 +1367,34 @@ pub fn disconnect_all() {
     }
 }
 
+/// The **checked twin of [`disconnect_all`]** used on the app-close path. It tears
+/// down the *same* set of registered tunnels — every key `disconnect_all` would touch,
+/// unfiltered by liveness — so that after it succeeds there is nothing left for the
+/// exit-time `disconnect_all` to kill (and therefore no polkit prompt raised after the
+/// window is already gone). But it stops at the first refused teardown and reports it,
+/// so a dismissed prompt aborts the quit instead of quitting with the machine's routing
+/// still rewritten. Enumerating the registries directly — rather than the frontend
+/// filtering `active_configs` — is the point: `active_configs` hides a tunnel whose
+/// liveness probe reads false, which is exactly a tunnel `disconnect_all` would still
+/// prompt to kill.
+#[cfg(any(target_os = "linux", target_os = "windows"))]
+pub fn disconnect_all_checked() -> Result<(), String> {
+    let keys: Vec<String> = {
+        let reg = registry().lock().unwrap();
+        let interactive = interactive_registry().lock().unwrap();
+        #[cfg(target_os = "windows")]
+        let svc = svc_registry().lock().unwrap();
+        let keys = reg.keys().chain(interactive.keys());
+        #[cfg(target_os = "windows")]
+        let keys = keys.chain(svc.keys());
+        keys.cloned().collect()
+    };
+    for k in keys {
+        disconnect_checked(&k)?;
+    }
+    Ok(())
+}
+
 // --- Windows: interactive-service-first tunnel management --------------------
 //
 // Windows has no `pkexec`/polkit, but it has something better suited: the
@@ -1965,6 +2241,20 @@ pub fn disconnect_all() {
     }
 }
 
+/// macOS twin of [`disconnect_all_checked`] (its tunnels live in [`mac_registry`]).
+#[cfg(target_os = "macos")]
+pub fn disconnect_all_checked() -> Result<(), String> {
+    let keys: Vec<String> = {
+        let reg = mac_registry().lock().unwrap();
+        let interactive = interactive_registry().lock().unwrap();
+        reg.keys().chain(interactive.keys()).cloned().collect()
+    };
+    for k in keys {
+        disconnect_checked(&k)?;
+    }
+    Ok(())
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;
@@ -2086,6 +2376,67 @@ mod tests {
         forget_interactive(cfg);
     }
 
+    /// The bug this fixes: a tunnel a *previous* run started is up (its root daemon
+    /// survived, pidfile on disk) but every registry is empty at launch, so the lamp
+    /// reads grey while the machine is still routed through it. `adopt_config` recovers
+    /// it from the headless `{stem}.pid`, making it visible again.
+    #[cfg(unix)]
+    #[test]
+    fn adopt_recovers_a_surviving_headless_tunnel() {
+        let cfg = "/store/test-adopt-headless.ovpn";
+        forget_interactive(cfg);
+        let pidfile = runtime_dir().join(format!("{}.pid", safe_stem(cfg)));
+        let _ = std::fs::create_dir_all(runtime_dir());
+        // Our own pid stands in for the still-alive root daemon.
+        std::fs::write(&pidfile, format!("{}\n", std::process::id())).unwrap();
+        assert!(!is_connected(cfg)); // nothing tracks it yet
+
+        assert!(adopt_config(cfg));
+        assert!(is_connected(cfg));
+        assert!(active_configs().contains(&cfg.to_string()));
+
+        forget_interactive(cfg);
+        let _ = std::fs::remove_file(&pidfile);
+    }
+
+    /// The interactive flavour's pidfile is recovered too.
+    #[cfg(unix)]
+    #[test]
+    fn adopt_recovers_a_surviving_interactive_tunnel() {
+        let cfg = "/store/test-adopt-interactive.ovpn";
+        forget_interactive(cfg);
+        let pidfile = interactive_pidfile(cfg);
+        let _ = std::fs::create_dir_all(runtime_dir());
+        std::fs::write(&pidfile, format!("{}\n", std::process::id())).unwrap();
+
+        assert!(adopt_config(cfg));
+        assert!(is_connected(cfg));
+
+        forget_interactive(cfg);
+        let _ = std::fs::remove_file(&pidfile);
+    }
+
+    /// A pidfile whose recorded process is gone is not a live tunnel: adopt reports
+    /// nothing recovered and cleans the stale file, so a later connect can't mistake
+    /// it for one that is up.
+    #[cfg(unix)]
+    #[test]
+    fn adopt_reaps_a_stale_pidfile_and_recovers_nothing() {
+        let cfg = "/store/test-adopt-stale.ovpn";
+        forget_interactive(cfg);
+        let pidfile = runtime_dir().join(format!("{}.pid", safe_stem(cfg)));
+        let _ = std::fs::create_dir_all(runtime_dir());
+        // A pid that is certainly dead: spawn a process and reap it.
+        let mut child = std::process::Command::new("true").spawn().unwrap();
+        let dead = child.id();
+        child.wait().unwrap();
+        std::fs::write(&pidfile, format!("{dead}\n")).unwrap();
+
+        assert!(!adopt_config(cfg));
+        assert!(!is_connected(cfg));
+        assert!(!pidfile.exists()); // stale file cleaned up
+    }
+
     #[cfg(target_os = "linux")]
     #[test]
     fn interactive_connect_command_linux_shape() {
@@ -2443,6 +2794,25 @@ mod tests {
         let _ = std::fs::remove_dir_all(&dir);
     }
 
+    #[test]
+    fn remove_config_refuses_paths_outside_the_store() {
+        // It deletes Eldrun's copy only — pointed at anything else (the user's
+        // original .ovpn, or worse), it must refuse before touching the fs.
+        let err = remove_config("/home/u/office.ovpn").unwrap_err();
+        assert!(err.contains("not a stored"), "{err}");
+        let err = remove_config("/etc/passwd").unwrap_err();
+        assert!(err.contains("not a stored"), "{err}");
+    }
+
+    #[test]
+    fn remove_config_of_missing_stored_file_is_ok() {
+        // The goal state is "not stored": a file already gone is success, not an
+        // error the UI has to explain.
+        let path = configs_dir().join("nope__gone.ovpn");
+        assert!(!path.exists());
+        assert_eq!(remove_config(path.to_str().unwrap()), Ok(()));
+    }
+
     #[test]
     fn safe_stem_is_filesystem_safe_and_distinct() {
         let a = safe_stem("/home/u/a.ovpn");
@@ -2497,6 +2867,32 @@ mod tests {
         assert!(cmd.contains(r#"a\"b.ovpn"#));
     }
 
+    /// The app-close path tears tunnels down twice by design (the checked teardown
+    /// while the window is up, then `RunEvent::Exit`). The second pass must not
+    /// re-elevate for a daemon the first one already TERMed, or the user pays a
+    /// second polkit password prompt for one tunnel.
+    #[test]
+    #[cfg(any(unix, target_os = "windows"))]
+    fn a_signalled_pid_is_never_killed_a_second_time() {
+        // A pid this run has never signalled and that is alive (our own process)
+        // still needs its elevated kill.
+        let live = std::process::id() as i32;
+        assert!(!kill_already_handled(live));
+        // Once TERMed, a second teardown pass skips it — no second prompt.
+        mark_signalled(live);
+        assert!(kill_already_handled(live));
+        // A pid that is simply gone needs no kill either. Spawn-and-reap gives a pid
+        // that is definitively dead (pid 0 would NOT: `kill(0, 0)` signals the
+        // caller's own process group and so reads as alive).
+        let mut child = std::process::Command::new(if cfg!(windows) { "cmd" } else { "true" })
+            .args(if cfg!(windows) { vec!["/C", "exit"] } else { vec![] })
+            .spawn()
+            .expect("spawn a trivial child");
+        let dead = child.id() as i32;
+        child.wait().expect("reap it");
+        assert!(kill_already_handled(dead));
+    }
+
     #[test]
     fn pidfile_pid_accepts_digits_only() {
         let dir = std::env::temp_dir().join(format!("eldrun-pidfile-test-{}", std::process::id()));
diff --git a/src-tauri/src/services/project_runtime.rs b/src-tauri/src/services/project_runtime.rs
index 5d50836..e41d791 100644
--- a/src-tauri/src/services/project_runtime.rs
+++ b/src-tauri/src/services/project_runtime.rs
@@ -158,6 +158,23 @@ pub fn switch(
         };
         for label in &prev_labels {
             if let Some(win) = app.get_webview_window(label) {
+                // Capture the popout's real on-screen geometry (PHYSICAL px, so
+                // it is scale-invariant and re-applies onto the SAME monitor)
+                // BEFORE hiding it. hide()/show() lets the WM re-place the window
+                // — typically onto the primary monitor — so switch-back must put
+                // it back explicitly (step 8b), or a multi-monitor popout lands on
+                // the wrong screen (#42).
+                if let (Ok(pos), Ok(size)) = (win.outer_position(), win.inner_size()) {
+                    win_registry.lock().unwrap().detached_bounds.insert(
+                        label.clone(),
+                        crate::commands::apps::DetachedBounds {
+                            x: pos.x,
+                            y: pos.y,
+                            w: size.width,
+                            h: size.height,
+                        },
+                    );
+                }
                 let _ = win.hide();
             }
         }
@@ -200,6 +217,31 @@ pub fn switch(
             if let Some(win) = app.get_webview_window(label) {
                 let _ = win.unminimize();
                 let _ = win.show();
+                // Put the popout back where it was before it was parked: the
+                // show() above lets the WM move it (often onto the wrong
+                // monitor), so re-apply the geometry captured at hide-time (step
+                // 5b), validated against the currently-connected monitors so an
+                // unplugged display can't strand it off-screen. Size before
+                // position so a resize can't shift the placement. PHYSICAL px →
+                // correct monitor regardless of per-monitor scaling (#42).
+                let saved = win_registry.lock().unwrap().detached_bounds.get(label).copied();
+                if let Some(b) = saved {
+                    let monitors = window_service::monitor_rects(&win);
+                    let fitted = crate::services::window_state::resolve_detached_geometry(
+                        crate::schema::settings::WindowState {
+                            x: b.x,
+                            y: b.y,
+                            w: b.w,
+                            h: b.h,
+                            maximized: false,
+                        },
+                        &monitors,
+                    );
+                    if let Some(g) = fitted {
+                        let _ = win.set_size(tauri::PhysicalSize::new(g.w, g.h));
+                        let _ = win.set_position(tauri::PhysicalPosition::new(g.x, g.y));
+                    }
+                }
             }
         }
     }
diff --git a/src-tauri/src/services/remote.rs b/src-tauri/src/services/remote.rs
index ec7a518..875e6ea 100644
--- a/src-tauri/src/services/remote.rs
+++ b/src-tauri/src/services/remote.rs
@@ -30,9 +30,27 @@ use openssh_sftp_client::Sftp;
 use tokio::process::Child;
 use tokio::sync::Mutex;
 
-use crate::schema::project::RemoteSpec;
+use crate::schema::project::{ComputeHost, RemoteSpec};
 use crate::schema::projects::{ProjectEntry, ProjectsList};
 
+/// The implicit host id of a project's **primary** remote (`Project.remote`).
+/// Extra "worker" hosts (`docs/multi_host_remote_plan.md`) carry their own stable
+/// ids; the primary's is this constant so file/git/sync callers — which *are* the
+/// primary subsystem — resolve it without threading an id.
+pub const PRIMARY_HOST: &str = "primary";
+
+/// Pool key for a `(project, host)` pair. Two hosts of one project → two entries,
+/// so a worker connects/disconnects independently of the primary. The `\u{1}`
+/// separator can't appear in a project or host id.
+fn conn_key(project_id: &str, host_id: &str) -> String {
+    format!("{project_id}\u{1}{host_id}")
+}
+
+/// The project id embedded in a [`conn_key`] (everything before the separator).
+fn project_of_key(key: &str) -> &str {
+    key.split('\u{1}').next().unwrap_or(key)
+}
+
 /// A resolved remote project: its [`RemoteSpec`] plus the owning project id.
 /// The explicit replacement for inferring remoteness from a mountpoint path.
 #[derive(Debug, Clone)]
@@ -114,6 +132,46 @@ fn spec_from_entry(entry: &ProjectEntry) -> Option<RemoteSpec> {
     serde_json::from_value(value.clone()).ok()
 }
 
+/// The extra "worker" hosts mirrored into a `projects.json` entry's flattened
+/// `extra["compute_hosts"]`, or `[]` when absent/unparseable. Pure, so the
+/// resolver is testable without the real state dir.
+fn compute_hosts_from_entry(entry: &ProjectEntry) -> Vec<ComputeHost> {
+    entry
+        .extra
+        .get("compute_hosts")
+        .and_then(|v| serde_json::from_value(v.clone()).ok())
+        .unwrap_or_default()
+}
+
+/// The extra worker hosts declared for `project_id`, read from the always-local
+/// `projects.json` (mirrored there by `commands::projects`). `[]` for a local or
+/// single-host project.
+pub fn compute_hosts_for(project_id: &str) -> Vec<ComputeHost> {
+    read_projects_list()
+        .and_then(|list| {
+            list.iter()
+                .find(|e| e.id == project_id)
+                .map(compute_hosts_from_entry)
+        })
+        .unwrap_or_default()
+}
+
+/// Resolve `(project_id, host_id)` to a [`RemoteTarget`]: the primary spec
+/// ([`remote_target_for`]) for [`PRIMARY_HOST`], else the matching worker's spec.
+/// `None` for a local project, an unknown host id, or a read failure.
+pub fn remote_target_for_host(project_id: &str, host_id: &str) -> Option<RemoteTarget> {
+    if host_id == PRIMARY_HOST {
+        return remote_target_for(project_id);
+    }
+    compute_hosts_for(project_id)
+        .into_iter()
+        .find(|h| h.id == host_id)
+        .map(|h| RemoteTarget {
+            spec: h.spec,
+            project_id: project_id.to_string(),
+        })
+}
+
 // ── Pooled connection ──────────────────────────────────────────────────────
 
 /// One pooled remote connection: the live SFTP session (shared via `Arc` so file
@@ -126,7 +184,9 @@ struct PooledRemote {
     child: Child,
 }
 
-/// Tauri-managed pool of live remote connections, keyed by project id.
+/// Tauri-managed pool of live remote connections, keyed by [`conn_key`]
+/// (`project\u{1}host`) so a project's primary and its extra worker hosts each
+/// hold an independent connection.
 #[derive(Default)]
 pub struct RemotePool {
     conns: HashMap<String, PooledRemote>,
@@ -156,15 +216,31 @@ pub async fn connect(
     project_id: &str,
     password: Option<&str>,
 ) -> Result<(), String> {
-    let Some(target) = remote_target_for(project_id) else {
-        return Ok(()); // local project — nothing to pool
+    connect_host(pool, project_id, PRIMARY_HOST, password).await
+}
+
+/// Open (idempotently) the pooled connection for a specific `(project, host)`.
+/// [`PRIMARY_HOST`] is the project's primary remote (and mints the local mirror);
+/// any other id is an extra worker host resolved from `compute_hosts`. A no-op for
+/// a local project, an unknown host id, or one already connected. See [`connect`]
+/// for the password/auth contract.
+pub async fn connect_host(
+    pool: &RemotePoolState,
+    project_id: &str,
+    host_id: &str,
+    password: Option<&str>,
+) -> Result<(), String> {
+    let Some(target) = remote_target_for_host(project_id, host_id) else {
+        return Ok(()); // local project or unknown host — nothing to pool
     };
-    // SSH-sync Phase 1: ensure the local mirror twin exists for any connected
+    // SSH-sync Phase 1: ensure the local mirror twin exists for a connected
     // remote project (covers projects created before the mirror was minted at
-    // create time), so the "Local" source view and local-on-remote tabs have a
-    // real, empty directory to read/cwd into rather than erroring.
-    let _ = std::fs::create_dir_all(crate::services::remote_sync::mirror_dir(project_id));
-    if pool.lock().await.conns.contains_key(project_id) {
+    // create time). Only the PRIMARY owns the mirror — a worker never does.
+    if host_id == PRIMARY_HOST {
+        let _ = std::fs::create_dir_all(crate::services::remote_sync::mirror_dir(project_id));
+    }
+    let key = conn_key(project_id, host_id);
+    if pool.lock().await.conns.contains_key(&key) {
         return Ok(()); // already connected
     }
 
@@ -195,13 +271,13 @@ pub async fn connect(
     let mut guard = pool.lock().await;
     // A concurrent connect may have won the race while we were handshaking. If so
     // keep theirs and tear ours down rather than leaking a second ssh child.
-    if guard.conns.contains_key(project_id) {
+    if guard.conns.contains_key(&key) {
         drop(guard);
         teardown_session(sftp, child).await;
         return Ok(());
     }
     guard.conns.insert(
-        project_id.to_string(),
+        key,
         PooledRemote {
             sftp: Arc::new(sftp),
             child,
@@ -210,14 +286,37 @@ pub async fn connect(
     Ok(())
 }
 
-/// Close and remove the pooled connection for `project_id` (no-op if none).
+/// Close and remove the pooled PRIMARY connection for `project_id` (no-op if none).
 pub async fn disconnect(pool: &RemotePoolState, project_id: &str) {
-    let removed = pool.lock().await.conns.remove(project_id);
+    disconnect_host(pool, project_id, PRIMARY_HOST).await;
+}
+
+/// Close and remove the pooled connection for a specific `(project, host)`.
+pub async fn disconnect_host(pool: &RemotePoolState, project_id: &str, host_id: &str) {
+    let removed = pool.lock().await.conns.remove(&conn_key(project_id, host_id));
     if let Some(conn) = removed {
         teardown_pooled(conn).await;
     }
 }
 
+/// Close and remove **every** pooled connection for `project_id` — its primary and
+/// all worker hosts. Used on project deactivation so no host outlives the view.
+pub async fn disconnect_project(pool: &RemotePoolState, project_id: &str) {
+    let removed: Vec<PooledRemote> = {
+        let mut guard = pool.lock().await;
+        let keys: Vec<String> = guard
+            .conns
+            .keys()
+            .filter(|k| project_of_key(k) == project_id)
+            .cloned()
+            .collect();
+        keys.into_iter().filter_map(|k| guard.conns.remove(&k)).collect()
+    };
+    for conn in removed {
+        teardown_pooled(conn).await;
+    }
+}
+
 /// Tear down every pooled connection. Used at app exit so no ssh ControlMaster
 /// child outlives Eldrun.
 pub async fn disconnect_all(pool: &RemotePoolState) {
@@ -237,8 +336,18 @@ pub async fn disconnect_all(pool: &RemotePoolState) {
 /// "disconnected" state rather than hanging.
 #[allow(dead_code)] // consumed by Phase 2/3 (remote file browse + I/O)
 pub async fn pooled_sftp(pool: &RemotePoolState, project_id: &str) -> Option<Arc<Sftp>> {
+    pooled_sftp_host(pool, project_id, PRIMARY_HOST).await
+}
+
+/// Clone the pooled SFTP session for a specific `(project, host)`, if connected.
+pub async fn pooled_sftp_host(
+    pool: &RemotePoolState,
+    project_id: &str,
+    host_id: &str,
+) -> Option<Arc<Sftp>> {
+    let key = conn_key(project_id, host_id);
     let mut guard = pool.lock().await;
-    let conn = guard.conns.get_mut(project_id)?;
+    let conn = guard.conns.get_mut(&key)?;
     // If the ssh child has already exited — the keepalive killed it after a
     // network drop (ServerAliveInterval/CountMax), or the remote closed the
     // connection — the pooled session is dead and every SFTP op on it would fail
@@ -246,47 +355,90 @@ pub async fn pooled_sftp(pool: &RemotePoolState, project_id: &str) -> Option<Arc
     // one-shot session (which can ride a still-live master, or surface a clean
     // disconnected state) instead of looping on the dead entry forever.
     if matches!(conn.child.try_wait(), Ok(Some(_))) {
-        guard.conns.remove(project_id);
+        guard.conns.remove(&key);
         return None;
     }
     Some(Arc::clone(&conn.sftp))
 }
 
-/// The ids of every project whose pooled SSH connection is currently live.
-/// Evicts any whose ssh child has already exited (same corpse-reaping as
-/// [`is_connected`]) so the background traffic sampler never samples a dead
-/// ControlMaster. Order is unspecified.
+/// The **distinct project ids** with any pooled SSH connection currently live
+/// (primary or any worker host). Evicts any whose ssh child has already exited
+/// (same corpse-reaping as [`is_connected`]) so the background traffic sampler
+/// never samples a dead ControlMaster. Order is unspecified. Traffic accounting
+/// sums a project's hosts under one project bucket (plan §3.4), so this collapses
+/// the composite keys back to project ids.
 pub async fn connected_ids(pool: &RemotePoolState) -> Vec<String> {
     let mut guard = pool.lock().await;
     let dead: Vec<String> = guard
         .conns
         .iter_mut()
-        .filter_map(|(id, conn)| match conn.child.try_wait() {
-            Ok(Some(_)) => Some(id.clone()),
+        .filter_map(|(key, conn)| match conn.child.try_wait() {
+            Ok(Some(_)) => Some(key.clone()),
             _ => None,
         })
         .collect();
-    for id in &dead {
-        guard.conns.remove(id);
+    for key in &dead {
+        guard.conns.remove(key);
     }
-    guard.conns.keys().cloned().collect()
+    let mut ids: Vec<String> = guard
+        .conns
+        .keys()
+        .map(|k| project_of_key(k).to_string())
+        .collect();
+    ids.sort();
+    ids.dedup();
+    ids
 }
 
-/// Whether a project's pooled SSH connection is live. Like [`pooled_sftp`], this
-/// evicts a child that has already exited so read-only observers never launch a
-/// fallback connection merely to discover that the project is offline.
+/// Whether a project's PRIMARY pooled SSH connection is live.
 pub async fn is_connected(pool: &RemotePoolState, project_id: &str) -> bool {
+    is_connected_host(pool, project_id, PRIMARY_HOST).await
+}
+
+/// Whether a specific `(project, host)` pooled SSH connection is live. Like
+/// [`pooled_sftp`], this evicts a child that has already exited so read-only
+/// observers never launch a fallback connection merely to discover it is offline.
+pub async fn is_connected_host(pool: &RemotePoolState, project_id: &str, host_id: &str) -> bool {
+    let key = conn_key(project_id, host_id);
     let mut guard = pool.lock().await;
-    let Some(conn) = guard.conns.get_mut(project_id) else {
+    let Some(conn) = guard.conns.get_mut(&key) else {
         return false;
     };
     if matches!(conn.child.try_wait(), Ok(Some(_))) {
-        guard.conns.remove(project_id);
+        guard.conns.remove(&key);
         return false;
     }
     true
 }
 
+/// The `(project_id, host_id)` pairs whose pooled SSH connection is currently live.
+/// The per-host granular form of [`connected_ids`], for the frontend to reconcile
+/// each lamp against reality. Evicts dead children like the others.
+pub async fn connected_targets(pool: &RemotePoolState) -> Vec<(String, String)> {
+    let mut guard = pool.lock().await;
+    let dead: Vec<String> = guard
+        .conns
+        .iter_mut()
+        .filter_map(|(key, conn)| match conn.child.try_wait() {
+            Ok(Some(_)) => Some(key.clone()),
+            _ => None,
+        })
+        .collect();
+    for key in &dead {
+        guard.conns.remove(key);
+    }
+    guard
+        .conns
+        .keys()
+        .filter_map(|k| {
+            let mut parts = k.split('\u{1}');
+            let pid = parts.next()?;
+            let hid = parts.next().unwrap_or(PRIMARY_HOST);
+            Some((pid.to_string(), hid.to_string()))
+        })
+        .collect()
+}
+
 /// Tear down a pooled connection: gracefully close the SFTP session (sends
 /// `SSH_FXP_CLOSE`, matching [`teardown_session`]) when we hold its only
 /// reference, then kill the `ssh` child, which collapses the channel and the
@@ -326,6 +478,8 @@ mod tests {
             openvpn: None,
             auto_connect: None,
             key_auth: None,
+            persist_sessions: None,
+            label: None,
             extra: HashMap::new(),
         }
     }
@@ -375,6 +529,69 @@ mod tests {
         assert_eq!(entry_directory(&e2), None);
     }
 
+    fn compute_host(id: &str, host: &str) -> ComputeHost {
+        ComputeHost {
+            id: id.to_string(),
+            sync_code: true,
+            pull_outputs: false,
+            shared_fs: false,
+            spec: RemoteSpec {
+                user: Some("alice".to_string()),
+                host: host.to_string(),
+                port: None,
+                remote_path: "/srv/worker".to_string(),
+                openvpn: None,
+                auto_connect: None,
+                key_auth: None,
+                persist_sessions: None,
+                label: None,
+                extra: HashMap::new(),
+            },
+        }
+    }
+
+    #[test]
+    fn conn_key_is_unique_per_host() {
+        let a = conn_key("p1", PRIMARY_HOST);
+        let b = conn_key("p1", "h1");
+        let c = conn_key("p2", "h1");
+        assert_ne!(a, b);
+        assert_ne!(b, c);
+        assert_ne!(a, c);
+        // The project id is recoverable from the composite key.
+        assert_eq!(project_of_key(&a), "p1");
+        assert_eq!(project_of_key(&b), "p1");
+        assert_eq!(project_of_key(&c), "p2");
+    }
+
+    #[test]
+    fn compute_hosts_from_entry_parses_mirror() {
+        let mut e = entry("p1", Some("/state/p1"), Some(spec()));
+        e.extra.insert(
+            "compute_hosts".to_string(),
+            serde_json::to_value(vec![compute_host("h1", "gpu-2.example")]).unwrap(),
+        );
+        let hosts = compute_hosts_from_entry(&e);
+        assert_eq!(hosts.len(), 1);
+        assert_eq!(hosts[0].id, "h1");
+        assert_eq!(hosts[0].spec.host, "gpu-2.example");
+        assert!(hosts[0].sync_code); // serde default_true survives a round trip
+    }
+
+    #[test]
+    fn compute_hosts_from_entry_empty_when_absent() {
+        let e = entry("p1", Some("/state/p1"), Some(spec()));
+        assert!(compute_hosts_from_entry(&e).is_empty());
+    }
+
+    #[test]
+    fn display_label_falls_back_to_host() {
+        let mut h = compute_host("h1", "gpu-2.example");
+        assert_eq!(h.display_label(), "gpu-2.example");
+        h.spec.label = Some("trainer".to_string());
+        assert_eq!(h.display_label(), "trainer");
+    }
+
     #[test]
     fn new_pool_starts_empty() {
         let pool = new_pool();
diff --git a/src-tauri/src/services/remote_sync.rs b/src-tauri/src/services/remote_sync.rs
index 2d8ee13..cb9a20e 100644
--- a/src-tauri/src/services/remote_sync.rs
+++ b/src-tauri/src/services/remote_sync.rs
@@ -254,6 +254,28 @@ pub fn divergence(
     (host_diverged, local_diverged)
 }
 
+/// Whether an amber verdict is worth confirming against the actual bytes rather
+/// than trusting the size+mtime heuristic. Size+mtime only *approximates*
+/// divergence: a re-save with identical bytes (or a bare `touch`) moves the mtime
+/// while the content is unchanged, so the file paints amber with nothing to
+/// resolve. We read to disprove that only when it could pay off: both sides exist
+/// (a present mtime), they are the SAME size (different sizes can't be identical —
+/// don't read), and they sit at or below `cutoff`. Large files keep the heuristic —
+/// reading them over SFTP on every status refresh is exactly its reason to exist.
+/// Pure, unit-tested; the byte read + compare itself lives in `commands::sync`.
+pub fn content_verify_worth_it(
+    host: (u64, Option<u64>),
+    local: (u64, Option<u64>),
+    cutoff: u64,
+) -> bool {
+    let (host_size, host_mtime) = host;
+    let (local_size, local_mtime) = local;
+    host_mtime.is_some()
+        && local_mtime.is_some()
+        && host_size == local_size
+        && host_size <= cutoff
+}
+
 /// Whether `rel` auto-syncs, by **nearest explicit marker wins**. A marker is an
 /// entry carrying `auto_sync` (on) or `auto_off` (excluded). We consult, closest
 /// first: the path's own entry, then each ancestor **directory** marker, ending at
@@ -999,6 +1021,24 @@ mod tests {
         assert_eq!(divergence(&e, None, Some((10, Some(50)))), (false, false));
     }
 
+    #[test]
+    fn content_verify_gate() {
+        let cutoff = 1024;
+        // Same size, both present, within cutoff → worth reading to disprove amber.
+        assert!(content_verify_worth_it((10, Some(100)), (10, Some(50)), cutoff));
+        // Different sizes can't be byte-identical → never read.
+        assert!(!content_verify_worth_it((10, Some(100)), (12, Some(50)), cutoff));
+        // A missing side (no mtime) is a real divergence → don't downgrade, don't read.
+        assert!(!content_verify_worth_it((10, None), (10, Some(50)), cutoff));
+        assert!(!content_verify_worth_it((10, Some(100)), (10, None), cutoff));
+        // Above the cutoff → large files keep the pure metadata heuristic.
+        assert!(!content_verify_worth_it((2048, Some(100)), (2048, Some(50)), cutoff));
+        // Exactly at the cutoff is still verified (boundary is inclusive).
+        assert!(content_verify_worth_it((1024, Some(100)), (1024, Some(50)), cutoff));
+        // Two empty files (size 0, both present) → trivially worth it (and equal).
+        assert!(content_verify_worth_it((0, Some(100)), (0, Some(50)), cutoff));
+    }
+
     #[test]
     fn is_auto_follows_own_entry_and_ancestor_folder_markers() {
         let mut m = Manifest::new();
@@ -1079,4 +1119,60 @@ mod tests {
         assert!(!is_auto(&m, "README.md"));
         assert!(is_auto(&m, "vendor/keep/x.rs")); // explicit ON still wins
     }
+
+    /// Why `commands::projects::clear_host_bound_state` must exist.
+    ///
+    /// A manifest entry is a claim about **one specific host**. Point the project at a
+    /// different one — detach, then extend to a corrected path, which is the normal way to
+    /// fix a wrong `remote_path` — and every base in it becomes a lie. The state dir is
+    /// keyed by project *id*, which detach preserves, so without an explicit purge the new
+    /// pairing inherits the old host's manifest wholesale.
+    ///
+    /// The two pure functions below then disagree about the same file in the worst
+    /// possible way, and this test pins both halves so the purge can never be quietly
+    /// dropped:
+    ///   * `push_decision` sees `ever_synced` + a missing host file and calls it `Stale` —
+    ///     a deletion to be resolved, not a file to send. So it **refuses to push**.
+    ///   * `divergence` maps the same failed host stat to "couldn't check → don't flag",
+    ///     so with the mirror untouched the file reads `(false, false)` — **green**.
+    ///
+    /// A file the tree reports as fully in sync, on a host that has never had it, which
+    /// byte-sync will never send. It would look like the sync simply worked.
+    #[test]
+    fn a_stale_manifest_against_a_fresh_host_is_a_false_green() {
+        // Synced against the OLD host, and untouched locally since.
+        let stale = SyncEntry {
+            selected: true,
+            auto_sync: true,
+            host_size: 10,
+            host_mtime: Some(100),
+            local_size: 10,
+            local_mtime: Some(100),
+            last_pull_ts: Some(1),
+            ..Default::default()
+        };
+        let local_unchanged = Some((10u64, Some(100u64)));
+
+        // The new host has never heard of this file.
+        assert_eq!(
+            push_decision(&stale, None),
+            PushDecision::Stale,
+            "refuses to push: it reads the absence as a host-side DELETION, not a new host"
+        );
+        assert_eq!(
+            divergence(&stale, None, local_unchanged),
+            (false, false),
+            "…and paints it green while doing so"
+        );
+
+        // Cleared (as a fresh pairing must be), the very same file behaves correctly: it
+        // is simply a local file the host lacks, so it gets created there.
+        let fresh = SyncEntry { selected: true, auto_sync: true, ..Default::default() };
+        assert_eq!(push_decision(&fresh, None), PushDecision::Safe);
+        assert_eq!(
+            divergence(&fresh, None, local_unchanged),
+            (false, true),
+            "local-only change → push, which is exactly the seed a new host needs"
+        );
+    }
 }
diff --git a/src-tauri/src/services/remote_usage.rs b/src-tauri/src/services/remote_usage.rs
new file mode 100644
index 0000000..8adcd92
--- /dev/null
+++ b/src-tauri/src/services/remote_usage.rs
@@ -0,0 +1,598 @@
+//! Remote-host resource check, run right after a project's pooled SSH
+//! connection comes up.
+//!
+//! `check_usage` runs one constant, non-interactive probe script over the
+//! shared ControlMaster (`ssh_exec::run_remote_shell`) and parses `who`,
+//! `uptime`, `nproc`, `free -m`, a two-sample `/proc/stat` CPU reading, a
+//! top-CPU `ps` snapshot, and (when `nvidia-smi` exists on the host) GPU
+//! utilization + memory into a [`RemoteUsageReport`]. [`emit_usage_report`]
+//! hands that to the frontend as a `remote-usage-report` event so
+//! `remote_connect` (`commands::remote`) can fire it fire-and-forget after
+//! every connect — manual or silent auto-connect alike — without delaying
+//! activation on a failed probe.
+//!
+//! **CPU is measured, not estimated from load average.** `/proc/stat` is
+//! read twice ~300ms apart (all inside the one remote script, so it costs no
+//! extra SSH round trip) and the busy/total tick delta over that window gives
+//! an instantaneous percentage — a load average conflates *this instant*
+//! with the last 1/5/15 minutes, which is exactly wrong for "is someone using
+//! it *right now*". A host without `/proc/stat` (non-Linux) falls back to
+//! `load1 / cpu_count`.
+//!
+//! **GPU is opportunistic, NVIDIA-only.** `nvidia-smi` is the only portable
+//! read across vendors/drivers without shelling into sysfs paths that differ
+//! per card (see `gpustat.rs`'s doc comment for why the *local* reader needs
+//! both DRM sysfs and `nvidia-smi` to cover AMD/Intel/NVIDIA) — replicating
+//! that over SSH for an arbitrary unknown host isn't worth it here, so a host
+//! with no `nvidia-smi` on `PATH` (or no GPU at all) simply reports an empty
+//! GPU list rather than a guess.
+//!
+//! The report flags `busy` when the host looks like someone (or something)
+//! else is already using it: high CPU, high memory, a busy GPU, or any other
+//! logged-in session. That last signal is best-effort, not exact — an Eldrun
+//! terminal tab connected to the same host allocates a remote PTY (`ssh -tt`)
+//! and shows up in `who` exactly like a human login, so a project with its
+//! own open terminal to that host will also read as "in use". There's no
+//! reliable way to tell the two apart from `who`'s output alone, so this is
+//! accepted rather than chased.
+
+use std::collections::HashMap;
+
+use serde::Serialize;
+use tauri::{AppHandle, Emitter};
+
+use crate::schema::project::RemoteSpec;
+use crate::services::ssh_exec::run_remote_shell;
+
+/// A single line of `who` output.
+#[derive(Debug, Clone, PartialEq, Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct UserSession {
+    pub user: String,
+    pub tty: String,
+    /// Everything after the tty column, verbatim (login time, `(from-host)`).
+    pub detail: String,
+}
+
+/// A single row of the top-CPU `ps` snapshot.
+#[derive(Debug, Clone, PartialEq, Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct ProcInfo {
+    pub user: String,
+    pub pid: String,
+    pub cpu_pct: f64,
+    pub mem_pct: f64,
+    pub command: String,
+}
+
+/// One NVIDIA GPU's utilization + memory, from `nvidia-smi`.
+#[derive(Debug, Clone, PartialEq, Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct GpuUsage {
+    pub name: String,
+    pub util_pct: f64,
+    pub mem_used_mb: u64,
+    pub mem_total_mb: u64,
+}
+
+/// A CPU / memory / GPU / login-session snapshot of a remote host, plus a
+/// `busy` verdict a frontend warning dialog can gate on.
+#[derive(Debug, Clone, PartialEq, Serialize, Default)]
+#[serde(rename_all = "camelCase")]
+pub struct RemoteUsageReport {
+    pub users: Vec<UserSession>,
+    /// Instantaneous CPU usage (0-100), from a two-sample `/proc/stat` delta;
+    /// falls back to a load-average estimate when `/proc/stat` is unreadable.
+    pub cpu_pct: f64,
+    pub load1: f64,
+    pub load5: f64,
+    pub load15: f64,
+    pub cpu_count: u32,
+    pub mem_total_mb: u64,
+    pub mem_used_mb: u64,
+    /// NVIDIA GPUs only (see module doc) — empty on a GPU-less host, an
+    /// AMD/Intel-only host, or one with no `nvidia-smi` on `PATH`.
+    pub gpus: Vec<GpuUsage>,
+    pub top_procs: Vec<ProcInfo>,
+    /// Whether the host looks already in use — see the module doc for the
+    /// heuristic and its one known false-positive.
+    pub busy: bool,
+    /// Human-readable reasons `busy` was set, for the warning dialog to list.
+    pub reasons: Vec<String>,
+}
+
+/// CPU is "busy" once usage exceeds this percentage.
+const CPU_BUSY_PCT: f64 = 80.0;
+/// Memory is "busy" once used/total exceeds this percentage.
+const MEM_BUSY_PCT: f64 = 85.0;
+/// A GPU is "busy" once its utilization exceeds this percentage.
+const GPU_BUSY_PCT: f64 = 50.0;
+/// Gap between the two `/proc/stat` samples the CPU-percentage reading is
+/// computed from. Long enough that tick-counter rounding doesn't dominate the
+/// delta, short enough that one extra SSH round trip's latency budget covers
+/// it comfortably.
+const CPU_SAMPLE_GAP: &str = "0.3";
+
+const MARK_WHO: &str = "WHO";
+const MARK_UPTIME: &str = "UPTIME";
+const MARK_NPROC: &str = "NPROC";
+const MARK_FREE: &str = "FREE";
+const MARK_CPU1: &str = "CPU1";
+const MARK_CPU2: &str = "CPU2";
+const MARK_PROCS: &str = "PROCS";
+const MARK_GPU: &str = "GPU";
+
+/// Constant probe script — no interpolation, so it needs no quoting (see
+/// `ssh_exec::run_remote_shell`'s contract). Each section is bounded by a
+/// `##NAME##` marker line so the output can be split back apart without
+/// depending on any tool's exact formatting beyond what's parsed below.
+///
+/// `pub(crate)`: also used by `services::remote_usage::check_usage` for a
+/// project's connect-time usage warning, the only other caller of
+/// [`parse_report`] below.
+pub(crate) fn probe_script() -> String {
+    format!(
+        "echo '##{MARK_WHO}##'\n\
+         who 2>/dev/null\n\
+         echo '##{MARK_UPTIME}##'\n\
+         uptime 2>/dev/null\n\
+         echo '##{MARK_NPROC}##'\n\
+         nproc 2>/dev/null || getconf _NPROCESSORS_ONLN 2>/dev/null || echo 1\n\
+         echo '##{MARK_FREE}##'\n\
+         free -m 2>/dev/null\n\
+         echo '##{MARK_CPU1}##'\n\
+         head -n1 /proc/stat 2>/dev/null\n\
+         sleep {CPU_SAMPLE_GAP} 2>/dev/null\n\
+         echo '##{MARK_CPU2}##'\n\
+         head -n1 /proc/stat 2>/dev/null\n\
+         echo '##{MARK_PROCS}##'\n\
+         ps -eo user,pid,pcpu,pmem,comm --sort=-pcpu 2>/dev/null | head -n 9\n\
+         echo '##{MARK_GPU}##'\n\
+         command -v nvidia-smi >/dev/null 2>&1 && \
+         nvidia-smi --query-gpu=name,utilization.gpu,memory.used,memory.total \
+         --format=csv,noheader,nounits 2>/dev/null\n"
+    )
+}
+
+/// Run the probe script on `spec`'s host (riding the shared ControlMaster)
+/// and parse it into a [`RemoteUsageReport`]. Synchronous (shells out via
+/// `std::process`), so callers on an async runtime should run it inside
+/// `spawn_blocking`.
+pub fn check_usage(spec: &RemoteSpec) -> Result<RemoteUsageReport, String> {
+    let out = run_remote_shell(spec, &probe_script())?;
+    let stdout = String::from_utf8_lossy(&out.stdout);
+    if stdout.trim().is_empty() {
+        return Err(format!(
+            "remote usage probe returned no output: {}",
+            String::from_utf8_lossy(&out.stderr)
+        ));
+    }
+    Ok(parse_report(&stdout))
+}
+
+/// Emit `report` as a `remote-usage-report` event (`{ projectId, hostId, report }`,
+/// camelCase) for the frontend's warning dialog. `host_id` names which of the
+/// project's hosts (primary or a `compute_hosts` worker) this report is for, so
+/// the dialog can show a section per connected host rather than only the
+/// primary's. Best-effort — a closed window / no listener is not an error.
+pub fn emit_usage_report(
+    app: &AppHandle,
+    project_id: &str,
+    host_id: &str,
+    report: &RemoteUsageReport,
+) {
+    #[derive(Serialize, Clone)]
+    #[serde(rename_all = "camelCase")]
+    struct Event<'a> {
+        project_id: &'a str,
+        host_id: &'a str,
+        report: &'a RemoteUsageReport,
+    }
+    let _ = app.emit(
+        "remote-usage-report",
+        Event {
+            project_id,
+            host_id,
+            report,
+        },
+    );
+}
+
+/// Split `output` into its `##MARK##`-delimited sections, keyed by marker
+/// name with the `##` stripped. Lines before the first marker are dropped.
+fn split_sections(output: &str) -> HashMap<&str, Vec<&str>> {
+    let mut sections: HashMap<&str, Vec<&str>> = HashMap::new();
+    let mut current: Option<&str> = None;
+    for line in output.lines() {
+        let trimmed = line.trim();
+        if let Some(name) = trimmed
+            .strip_prefix("##")
+            .and_then(|s| s.strip_suffix("##"))
+            .filter(|s| !s.is_empty())
+        {
+            current = Some(name);
+            sections.entry(name).or_default();
+            continue;
+        }
+        if let Some(name) = current {
+            sections.get_mut(name).unwrap().push(line);
+        }
+    }
+    sections
+}
+
+fn parse_who(lines: &[&str]) -> Vec<UserSession> {
+    lines
+        .iter()
+        .filter(|l| !l.trim().is_empty())
+        .filter_map(|l| {
+            let mut parts = l.split_whitespace();
+            let user = parts.next()?.to_string();
+            let tty = parts.next().unwrap_or("").to_string();
+            let detail = parts.collect::<Vec<_>>().join(" ");
+            Some(UserSession { user, tty, detail })
+        })
+        .collect()
+}
+
+/// Parses the three comma-separated floats after `load average:` in
+/// `uptime`'s output. `(0.0, 0.0, 0.0)` if the line is missing or malformed
+/// (a host whose `uptime` doesn't support `-p`-less BSD-style output, say) —
+/// the caller can't distinguish "idle" from "unreadable" here, and idle is
+/// the safe default for a warning gate.
+fn parse_load_average(lines: &[&str]) -> (f64, f64, f64) {
+    let line = lines.iter().find(|l| l.contains("load average"));
+    let Some(line) = line else {
+        return (0.0, 0.0, 0.0);
+    };
+    let Some(tail) = line.split("load average").nth(1) else {
+        return (0.0, 0.0, 0.0);
+    };
+    let tail = tail.trim_start_matches(':').trim_start_matches(',');
+    let nums: Vec<f64> = tail
+        .split(',')
+        .filter_map(|s| s.trim().parse::<f64>().ok())
+        .collect();
+    (
+        nums.first().copied().unwrap_or(0.0),
+        nums.get(1).copied().unwrap_or(0.0),
+        nums.get(2).copied().unwrap_or(0.0),
+    )
+}
+
+fn parse_cpu_count(lines: &[&str]) -> u32 {
+    lines
+        .iter()
+        .find_map(|l| l.trim().parse::<u32>().ok())
+        .unwrap_or(1)
+        .max(1)
+}
+
+/// Reads the `Mem:` row of `free -m` (`total`, `used` are its 2nd/3rd
+/// whitespace-separated fields). `(0, 0)` if the row is missing.
+fn parse_mem(lines: &[&str]) -> (u64, u64) {
+    let Some(line) = lines.iter().find(|l| l.trim_start().starts_with("Mem:")) else {
+        return (0, 0);
+    };
+    let fields: Vec<&str> = line.split_whitespace().collect();
+    let total = fields.get(1).and_then(|s| s.parse::<u64>().ok()).unwrap_or(0);
+    let used = fields.get(2).and_then(|s| s.parse::<u64>().ok()).unwrap_or(0);
+    (total, used)
+}
+
+/// Reads `/proc/stat`'s `cpu ` summary line (the aggregate over all cores,
+/// distinct from the per-core `cpu0`/`cpu1`/... lines) into `(idle, total)`
+/// tick counts — `idle` = idle + iowait, `total` = the sum of every field.
+/// `None` if the line is missing (a non-Linux host) or too short to trust.
+fn parse_proc_stat(lines: &[&str]) -> Option<(u64, u64)> {
+    let line = lines
+        .iter()
+        .find(|l| l.split_whitespace().next() == Some("cpu"))?;
+    let nums: Vec<u64> = line
+        .split_whitespace()
+        .skip(1)
+        .filter_map(|s| s.parse::<u64>().ok())
+        .collect();
+    if nums.len() < 4 {
+        return None;
+    }
+    let idle = nums[3] + nums.get(4).copied().unwrap_or(0);
+    let total = nums.iter().sum();
+    Some((idle, total))
+}
+
+/// Instantaneous CPU usage (0-100) from two `/proc/stat` samples taken
+/// `CPU_SAMPLE_GAP` seconds apart. Falls back to `load1 / cpu_count` (still
+/// clamped to 0-100) when either sample is missing, e.g. a non-Linux host.
+fn compute_cpu_pct(
+    sample1: Option<(u64, u64)>,
+    sample2: Option<(u64, u64)>,
+    load1: f64,
+    cpu_count: u32,
+) -> f64 {
+    if let (Some((idle1, total1)), Some((idle2, total2))) = (sample1, sample2) {
+        let dt = total2.saturating_sub(total1);
+        if dt > 0 {
+            let d_idle = idle2.saturating_sub(idle1);
+            return ((1.0 - d_idle as f64 / dt as f64) * 100.0).clamp(0.0, 100.0);
+        }
+    }
+    (load1 / cpu_count.max(1) as f64 * 100.0).clamp(0.0, 100.0)
+}
+
+/// Parses `nvidia-smi --query-gpu=name,utilization.gpu,memory.used,memory.total
+/// --format=csv,noheader,nounits` rows (plain CSV, no header since
+/// `noheader`). Empty when `nvidia-smi` isn't on the host's `PATH` at all —
+/// the probe script's `command -v` guard then produces no output here rather
+/// than an error.
+fn parse_gpus(lines: &[&str]) -> Vec<GpuUsage> {
+    lines
+        .iter()
+        .filter(|l| !l.trim().is_empty())
+        .filter_map(|l| {
+            let fields: Vec<&str> = l.split(',').map(str::trim).collect();
+            if fields.len() < 4 {
+                return None;
+            }
+            Some(GpuUsage {
+                name: fields[0].to_string(),
+                util_pct: fields[1].parse().unwrap_or(0.0),
+                mem_used_mb: fields[2].parse().unwrap_or(0),
+                mem_total_mb: fields[3].parse().unwrap_or(0),
+            })
+        })
+        .collect()
+}
+
+/// Parses `ps -eo user,pid,pcpu,pmem,comm` rows, skipping the header line.
+/// `comm` is a single token (unlike `args`), so five whitespace fields is
+/// always right even for a command containing spaces in its full path.
+fn parse_procs(lines: &[&str]) -> Vec<ProcInfo> {
+    lines
+        .iter()
+        .filter(|l| !l.trim().is_empty())
+        .skip(1) // header: "USER PID %CPU %MEM COMMAND"
+        .filter_map(|l| {
+            let fields: Vec<&str> = l.split_whitespace().collect();
+            if fields.len() < 5 {
+                return None;
+            }
+            Some(ProcInfo {
+                user: fields[0].to_string(),
+                pid: fields[1].to_string(),
+                cpu_pct: fields[2].parse().unwrap_or(0.0),
+                mem_pct: fields[3].parse().unwrap_or(0.0),
+                command: fields[4..].join(" "),
+            })
+        })
+        .collect()
+}
+
+pub(crate) fn parse_report(output: &str) -> RemoteUsageReport {
+    let sections = split_sections(output);
+    let empty: Vec<&str> = Vec::new();
+    let users = parse_who(sections.get(MARK_WHO).unwrap_or(&empty));
+    let (load1, load5, load15) = parse_load_average(sections.get(MARK_UPTIME).unwrap_or(&empty));
+    let cpu_count = parse_cpu_count(sections.get(MARK_NPROC).unwrap_or(&empty));
+    let (mem_total_mb, mem_used_mb) = parse_mem(sections.get(MARK_FREE).unwrap_or(&empty));
+    let cpu1 = parse_proc_stat(sections.get(MARK_CPU1).unwrap_or(&empty));
+    let cpu2 = parse_proc_stat(sections.get(MARK_CPU2).unwrap_or(&empty));
+    let cpu_pct = compute_cpu_pct(cpu1, cpu2, load1, cpu_count);
+    let top_procs = parse_procs(sections.get(MARK_PROCS).unwrap_or(&empty));
+    let gpus = parse_gpus(sections.get(MARK_GPU).unwrap_or(&empty));
+
+    let mut reasons = Vec::new();
+    if cpu_pct > CPU_BUSY_PCT {
+        reasons.push(format!(
+            "CPU usage is high ({cpu_pct:.0}% across {cpu_count} core(s))"
+        ));
+    }
+    let mem_pct = if mem_total_mb > 0 {
+        mem_used_mb as f64 / mem_total_mb as f64 * 100.0
+    } else {
+        0.0
+    };
+    if mem_pct > MEM_BUSY_PCT {
+        reasons.push(format!(
+            "Memory usage is high ({mem_pct:.0}% of {mem_total_mb} MB used)"
+        ));
+    }
+    for gpu in &gpus {
+        if gpu.util_pct > GPU_BUSY_PCT {
+            reasons.push(format!("GPU \"{}\" is busy ({:.0}%)", gpu.name, gpu.util_pct));
+        }
+    }
+    if !users.is_empty() {
+        reasons.push(format!(
+            "{} other session{} logged in",
+            users.len(),
+            if users.len() == 1 { "" } else { "s" }
+        ));
+    }
+    let busy = !reasons.is_empty();
+
+    RemoteUsageReport {
+        users,
+        cpu_pct,
+        load1,
+        load5,
+        load15,
+        cpu_count,
+        mem_total_mb,
+        mem_used_mb,
+        gpus,
+        top_procs,
+        busy,
+        reasons,
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    const SAMPLE: &str = "\
+##WHO##
+alice    pts/0        2026-07-18 09:12 (203.0.113.5)
+bob      tty1         2026-07-17 22:03
+##UPTIME##
+ 14:32:01 up 10 days,  3:22,  2 users,  load average: 3.21, 2.98, 2.50
+##NPROC##
+4
+##FREE##
+              total        used        free      shared  buff/cache   available
+Mem:          15974       14200         500         100        1274         900
+Swap:          2047           0        2047
+##CPU1##
+cpu  1000 0 500 8000 0 0 0 0 0 0
+##CPU2##
+cpu  1085 0 500 8015 0 0 0 0 0 0
+##PROCS##
+USER       PID  %CPU %MEM COMMAND
+bob      12345  88.0 40.1 python3
+alice     6789  10.5  2.0 node
+##GPU##
+NVIDIA GeForce RTX 3090, 92, 20000, 24576
+";
+
+    #[test]
+    fn parses_who_sessions() {
+        let sections = split_sections(SAMPLE);
+        let users = parse_who(sections.get(MARK_WHO).unwrap());
+        assert_eq!(users.len(), 2);
+        assert_eq!(users[0].user, "alice");
+        assert_eq!(users[0].tty, "pts/0");
+        assert!(users[0].detail.contains("203.0.113.5"));
+        assert_eq!(users[1].user, "bob");
+        assert_eq!(users[1].tty, "tty1");
+    }
+
+    #[test]
+    fn parses_load_average() {
+        let sections = split_sections(SAMPLE);
+        let (l1, l5, l15) = parse_load_average(sections.get(MARK_UPTIME).unwrap());
+        assert_eq!(l1, 3.21);
+        assert_eq!(l5, 2.98);
+        assert_eq!(l15, 2.50);
+    }
+
+    #[test]
+    fn load_average_missing_defaults_to_zero() {
+        let (l1, l5, l15) = parse_load_average(&["no load info here"]);
+        assert_eq!((l1, l5, l15), (0.0, 0.0, 0.0));
+    }
+
+    #[test]
+    fn parses_cpu_count() {
+        let sections = split_sections(SAMPLE);
+        assert_eq!(parse_cpu_count(sections.get(MARK_NPROC).unwrap()), 4);
+    }
+
+    #[test]
+    fn parses_mem() {
+        let sections = split_sections(SAMPLE);
+        let (total, used) = parse_mem(sections.get(MARK_FREE).unwrap());
+        assert_eq!(total, 15974);
+        assert_eq!(used, 14200);
+    }
+
+    #[test]
+    fn parses_top_procs_skipping_header() {
+        let sections = split_sections(SAMPLE);
+        let procs = parse_procs(sections.get(MARK_PROCS).unwrap());
+        assert_eq!(procs.len(), 2);
+        assert_eq!(procs[0].user, "bob");
+        assert_eq!(procs[0].command, "python3");
+        assert_eq!(procs[0].cpu_pct, 88.0);
+    }
+
+    #[test]
+    fn busy_host_flags_all_reasons() {
+        let report = parse_report(SAMPLE);
+        assert!(report.busy);
+        // (100-15)/100... i.e. 1 - 15/100 = 85% > 80%
+        assert_eq!(report.cpu_pct, 85.0);
+        assert!(report.reasons.iter().any(|r| r.contains("CPU usage")));
+        // 14200/15974 = 88.9% > 85%
+        assert!(report.reasons.iter().any(|r| r.contains("Memory usage")));
+        assert!(report.reasons.iter().any(|r| r.contains("GPU") && r.contains("92")));
+        assert!(report.reasons.iter().any(|r| r.contains("other session")));
+        assert_eq!(report.gpus.len(), 1);
+        assert_eq!(report.gpus[0].name, "NVIDIA GeForce RTX 3090");
+        assert_eq!(report.gpus[0].mem_used_mb, 20000);
+    }
+
+    #[test]
+    fn cpu_pct_falls_back_to_load_average_without_proc_stat() {
+        // No CPU1/CPU2 sections at all — a non-Linux host.
+        let no_proc_stat = "\
+##UPTIME##
+load average: 4.0, 4.0, 4.0
+##NPROC##
+8
+";
+        let report = parse_report(no_proc_stat);
+        // 4.0 / 8 * 100 = 50%
+        assert_eq!(report.cpu_pct, 50.0);
+    }
+
+    #[test]
+    fn no_gpu_tool_reports_empty_gpu_list() {
+        let no_gpu = "\
+##WHO##
+##UPTIME##
+load average: 0.1, 0.1, 0.1
+##NPROC##
+4
+##FREE##
+Mem: 8000 1000 7000
+##GPU##
+";
+        let report = parse_report(no_gpu);
+        assert!(report.gpus.is_empty());
+        assert!(!report.reasons.iter().any(|r| r.contains("GPU")));
+    }
+
+    #[test]
+    fn idle_host_is_not_busy() {
+        let idle = "\
+##WHO##
+##UPTIME##
+ 14:32:01 up 10 days,  3:22,  0 users,  load average: 0.05, 0.10, 0.08
+##NPROC##
+8
+##FREE##
+              total        used        free      shared  buff/cache   available
+Mem:          32000        2000       28000         100        2000       29000
+##PROCS##
+USER       PID  %CPU %MEM COMMAND
+root         1   0.0  0.1 systemd
+";
+        let report = parse_report(idle);
+        assert!(!report.busy);
+        assert!(report.reasons.is_empty());
+        assert!(report.users.is_empty());
+    }
+
+    #[test]
+    fn singular_session_wording() {
+        let one_user = "\
+##WHO##
+alice    pts/0        2026-07-18 09:12
+##UPTIME##
+load average: 0.1, 0.1, 0.1
+##NPROC##
+4
+##FREE##
+Mem: 8000 1000 7000
+##PROCS##
+USER PID %CPU %MEM COMMAND
+";
+        let report = parse_report(one_user);
+        assert!(report.busy);
+        assert!(report
+            .reasons
+            .iter()
+            .any(|r| r == "1 other session logged in"));
+    }
+}
diff --git a/src-tauri/src/services/sandbox.rs b/src-tauri/src/services/sandbox.rs
index d5ed43d..62adb1d 100644
--- a/src-tauri/src/services/sandbox.rs
+++ b/src-tauri/src/services/sandbox.rs
@@ -1399,6 +1399,9 @@ mod tests {
             local_only: false,
             sandbox: false,
             project_id: None,
+            remote_host_id: None,
+            tmux_session: None,
+            tmux_attach: None,
         };
         wrap_pty_options_docker(&mut opts).unwrap();
         assert_eq!(opts.cmd, "claude");
diff --git a/src-tauri/src/services/ssh_exec.rs b/src-tauri/src/services/ssh_exec.rs
index d0ed886..8c844e1 100644
--- a/src-tauri/src/services/ssh_exec.rs
+++ b/src-tauri/src/services/ssh_exec.rs
@@ -24,7 +24,6 @@ use std::collections::HashMap;
 use std::path::PathBuf;
 
 use crate::schema::project::RemoteSpec;
-use crate::services::remote::remote_target_for;
 use crate::services::remote_agents;
 use crate::services::ssh_common::{ssh_base_args, ssh_target, validate_arg};
 use crate::storage;
@@ -71,8 +70,10 @@ pub(crate) fn control_dir() -> PathBuf {
 
 /// Single-quote `s` for a POSIX shell, escaping embedded single quotes as
 /// `'\''`. The result parses back to exactly `s` regardless of spaces, `$`,
-/// quotes, or other metacharacters.
-fn shell_quote(s: &str) -> String {
+/// quotes, or other metacharacters. `pub(crate)` so command modules that build
+/// their own host scripts (e.g. `commands::slurm`) share this one implementation
+/// rather than reinventing shell quoting.
+pub(crate) fn shell_quote(s: &str) -> String {
     let mut out = String::with_capacity(s.len() + 2);
     out.push('\'');
     for ch in s.chars() {
@@ -101,6 +102,60 @@ fn is_valid_env_key(k: &str) -> bool {
     chars.all(|c| c.is_ascii_alphanumeric() || c == '_')
 }
 
+/// How a remote tab is wrapped in a **tmux** session on the host (TODO #85), so
+/// the work is decoupled from the disposable ssh channel and survives a drop /
+/// laptop sleep / Eldrun relaunch.
+#[derive(Debug, Clone)]
+pub enum TmuxWrap {
+    /// Start-or-attach a per-tab session (`tmux new-session -A`) that runs this
+    /// tab's target command. On first spawn it creates and runs the command; on a
+    /// reconnect/relaunch it reattaches and the target is ignored (the process is
+    /// already running) — one command that is both "start" and "resume".
+    Session(String),
+    /// Attach to an **arbitrary named** session that already exists on the host
+    /// (opened from the Sessions view, or a hand-started `tmux` session). No
+    /// target command — `new-session -A` attaches the running session, or creates
+    /// a bare login shell if the name is somehow gone.
+    Attach(String),
+}
+
+/// Wrap a resolved `exec …` line in a tmux launch (see [`TmuxWrap`]). Emitted as
+/// a POSIX-sh `if command -v tmux …` so a host **without** tmux degrades to the
+/// plain exec (today's behavior) plus a one-line notice, instead of failing —
+/// tmux is usually preinstalled on a compute/HPC host but cannot be assumed. The
+/// session gets `status off` (Eldrun already draws tabs/layout, so tmux's status
+/// bar is redundant chrome) and `mouse on` (wheel scrolls tmux history, so
+/// scrollback still feels native), chained as extra tmux commands after a literal
+/// `;` argv separator.
+fn tmux_wrap_exec(exec_line: &str, wrap: &TmuxWrap) -> String {
+    // `status off`/`mouse on` are passed as separate tmux commands: a standalone
+    // `;` token (quoted so the remote shell hands it to tmux literally, not as a
+    // shell separator) splits tmux's argv into successive commands.
+    let opts = "';' set -g status off ';' set -g mouse on";
+    match wrap {
+        TmuxWrap::Session(name) => {
+            let q = shell_quote(name);
+            // tmux runs its command argument via `sh -c`, so the (quoted) exec
+            // line — `exec "${SHELL:-/bin/bash}" -l…` — is executed exactly as it
+            // would be directly, only now inside the persistent session.
+            let target = shell_quote(exec_line);
+            format!(
+                "if command -v tmux >/dev/null 2>&1; then \
+                 exec tmux new-session -A -D -s {q} {target} {opts}; \
+                 else printf 'eldrun: tmux not found on the remote host; session persistence is OFF (install tmux to enable it)\\n' >&2; {exec_line}; fi"
+            )
+        }
+        TmuxWrap::Attach(name) => {
+            let q = shell_quote(name);
+            format!(
+                "if command -v tmux >/dev/null 2>&1; then \
+                 exec tmux new-session -A -D -s {q} {opts}; \
+                 else printf 'eldrun: tmux not found on the remote host; cannot attach session %s\\n' {q} >&2; exec \"${{SHELL:-/bin/bash}}\" -l; fi"
+            )
+        }
+    }
+}
+
 /// Build the remote command string that `ssh` hands to the remote `$SHELL -c`.
 ///
 /// Shape: `cd <dir> && export K=<v> … && exec <CMD>`. For a shell tab
@@ -115,11 +170,19 @@ fn is_valid_env_key(k: &str) -> bool {
 /// `TERM`/`COLORTERM` are skipped — ssh forwards `TERM` to the remote PTY
 /// already — as are agent-auth vars (`AGENT_AUTH_ENV`), so a local key cannot
 /// clobber the remote agent's own stored login.
+///
+/// `tmux`, when `Some`, wraps the final `exec …` in a persistent tmux session
+/// (TODO #85). Everything before it — the `cd`, the sorted env exports, the
+/// agent bootstrap prelude — is preserved verbatim and nested *inside* the
+/// session, so the wrap changes only where the target runs, not what it is. A
+/// [`TmuxWrap::Attach`] ignores `local_cmd`/`local_args` (it attaches an existing
+/// session, running no fresh target).
 pub fn remote_command(
     local_cmd: &str,
     local_args: &[String],
     env: &HashMap<String, String>,
     remote_dir: &str,
+    tmux: Option<&TmuxWrap>,
 ) -> String {
     let mut parts: Vec<String> = Vec::new();
     parts.push(format!("cd {}", shell_quote(remote_dir)));
@@ -164,9 +227,104 @@ pub fn remote_command(
         format!("exec \"${{SHELL:-/bin/bash}}\" -lc {}", shell_quote(&inner))
     };
 
+    // The tmux wrap replaces only the final `exec …`; the `cd`/exports prefix is
+    // untouched, so the session opens in the project dir with the same env.
+    let exec = match tmux {
+        Some(wrap) => tmux_wrap_exec(&exec, wrap),
+        None => exec,
+    };
+
     format!("{} && {}", parts.join(" && "), exec)
 }
 
+/// The tmux **kill-session** one-shot script fired on an *explicit* tab close of
+/// a persistent remote tab (TODO #85). Closing the tab is the destructive intent
+/// that ends the run; an app-exit / disconnect / respawn must instead leave the
+/// session alive, which is the whole point of persistence. Run over the pooled
+/// ControlMaster via [`run_remote_script`]. The session name is `shell_quote`d
+/// (it may be an arbitrary name from the Sessions view). `|| true` keeps the
+/// exit status clean when the session is already gone.
+pub fn tmux_kill_session_script(session: &str) -> String {
+    format!("tmux kill-session -t {} 2>/dev/null || true", shell_quote(session))
+}
+
+/// Whether `name` is a safe tmux session name to rename **to** (TODO #85): tmux
+/// treats `:` and `.` specially, and a name with whitespace/control chars is a
+/// footgun, so a rename target must be a non-empty run of `[A-Za-z0-9_-]`. (The
+/// *source* name is not validated this way — a foreign/hand-started session may be
+/// anything — only quoted.)
+pub fn valid_tmux_session_name(name: &str) -> bool {
+    !name.is_empty()
+        && name
+            .chars()
+            .all(|c| c.is_ascii_alphanumeric() || c == '_' || c == '-')
+}
+
+/// The tmux **rename-session** one-shot (TODO #85): `tmux rename-session -t <old>
+/// <new>`. Both names are `shell_quote`d (the `old` may be an arbitrary foreign
+/// name); the caller MUST have checked `new` with [`valid_tmux_session_name`].
+pub fn tmux_rename_session_script(old: &str, new: &str) -> String {
+    format!(
+        "tmux rename-session -t {} {}",
+        shell_quote(old),
+        shell_quote(new)
+    )
+}
+
+/// The `tmux ls` one-shot that backs the Sessions view (TODO #85): one tab-
+/// separated row per session — name, window count, created epoch, attached flag.
+/// `2>/dev/null || true` makes an absent tmux or a not-running server (`tmux ls`
+/// exits non-zero with "no server running") a clean **empty** list rather than an
+/// error (see [`parse_tmux_ls`]).
+pub fn tmux_ls_script() -> &'static str {
+    "tmux ls -F '#{session_name}\t#{session_windows}\t#{session_created}\t#{session_attached}' 2>/dev/null || true"
+}
+
+/// One host tmux session, as surfaced by the Sessions view (TODO #85).
+#[derive(Debug, Clone, serde::Serialize, PartialEq)]
+pub struct TmuxSession {
+    /// Session name (`eldrun-<uid>` for one Eldrun started, else a foreign name).
+    pub name: String,
+    /// Number of windows in the session.
+    pub windows: u32,
+    /// Creation time, seconds since the Unix epoch (host clock).
+    pub created: u64,
+    /// Whether another client is currently attached to it.
+    pub attached: bool,
+}
+
+/// Parse the tab-separated output of [`tmux_ls_script`] into [`TmuxSession`]s.
+/// Empty/`no server running` output → an empty list (never an error). A row that
+/// does not have the four expected fields is skipped rather than failing the whole
+/// parse (forward-compatible with an unexpected `tmux ls` build).
+pub fn parse_tmux_ls(output: &str) -> Vec<TmuxSession> {
+    output
+        .lines()
+        .filter_map(|line| {
+            let line = line.trim_end_matches('\r');
+            if line.is_empty() {
+                return None;
+            }
+            let mut f = line.split('\t');
+            let name = f.next()?.to_string();
+            if name.is_empty() {
+                return None;
+            }
+            let windows = f.next()?.trim().parse().ok()?;
+            let created = f.next()?.trim().parse().ok()?;
+            // tmux prints `session_attached` as a count of attached clients; any
+            // positive count means at least one client is on it.
+            let attached = f.next()?.trim().parse::<u32>().ok()? > 0;
+            Some(TmuxSession {
+                name,
+                windows,
+                created,
+                attached,
+            })
+        })
+        .collect()
+}
+
 /// Build the full `ssh` argv for an interactive remote PTY session running
 /// `remote_command`. Returned as `Vec<String>` so it is unit-testable without
 /// actually connecting.
@@ -308,17 +466,29 @@ pub fn run_remote_script(spec: &RemoteSpec, script: &str) -> Result<std::process
 
 /// Best-effort recursive byte size of a directory on the host, over SSH.
 ///
-/// Runs `du` on the host (riding the shared ControlMaster) for the given
-/// absolute remote dir. `du -sk` reports the total in 1024-byte units, which is
-/// portable across GNU and BSD/macOS `du` (unlike GNU-only `-b`); we multiply
-/// back to bytes so the frontend's byte-based formatter matches file sizes. The
-/// path is validated + single-quoted; a `du` error (e.g. unreadable dir) yields
-/// 0 rather than failing the whole listing.
+/// Reports **apparent** size — the sum of each file's `st_size` — to match every
+/// other size figure in the app: the local walk ([`crate::commands::fs`]'s
+/// `walk_dir_size`) and the per-file SFTP listing sizes both use `st_size`. Plain
+/// `du` instead reports **disk-block allocation** (each file rounded up to a 4 KB
+/// block), which made an identical folder read *larger* over SSH than its local
+/// mirror — e.g. 452 KB vs 377 KB for 31 small files, purely from block rounding.
+///
+/// `du -sb` gives exact apparent bytes on GNU coreutils (the usual Linux dev
+/// host). BSD/macOS `du` has no `-b`, so when it produces nothing we fall back to
+/// `du -sk` (1024-byte *block* units) × 1024 — approximate there, but no worse
+/// than the previous behavior. The shell always emits **bytes**, so the parse
+/// below never rescales. The path is validated + single-quoted; a `du` error
+/// (e.g. unreadable dir) yields 0 rather than failing the whole listing.
 pub fn remote_dir_size(spec: &RemoteSpec, remote_dir: &str) -> Result<u64, String> {
     validate_arg("remote path", remote_dir)?;
-    let cmd = format!("du -sk {} 2>/dev/null | cut -f1", shell_quote(remote_dir));
+    let q = shell_quote(remote_dir);
+    let cmd = format!(
+        "s=$(du -sb {q} 2>/dev/null | cut -f1); \
+         if [ -n \"$s\" ]; then echo \"$s\"; \
+         else du -sk {q} 2>/dev/null | cut -f1 | awk '{{print $1*1024}}'; fi"
+    );
     let out = run_remote_shell(spec, &cmd)?;
-    let kb: u64 = String::from_utf8_lossy(&out.stdout)
+    let bytes: u64 = String::from_utf8_lossy(&out.stdout)
         .trim()
         .lines()
         .next()
@@ -326,7 +496,7 @@ pub fn remote_dir_size(spec: &RemoteSpec, remote_dir: &str) -> Result<u64, Strin
         .trim()
         .parse()
         .unwrap_or(0);
-    Ok(kb.saturating_mul(1024))
+    Ok(bytes)
 }
 
 /// Full recursive size tree of a directory on the host, for the Disk Usage
@@ -458,10 +628,22 @@ pub fn interactive_login_command(
 /// `opts.cwd` a stable local directory (the ssh client's local cwd is
 /// irrelevant). Validation/connection failures surface as `Err`.
 pub fn wrap_pty_options(opts: &mut PtyOptions) -> Result<(), String> {
+    let host_id = opts
+        .remote_host_id
+        .as_deref()
+        .unwrap_or(crate::services::remote::PRIMARY_HOST);
+    use crate::services::remote::{remote_target_for, remote_target_for_host, PRIMARY_HOST};
     let target = match &opts.project_id {
-        Some(id) => match remote_target_for(id) {
+        Some(id) => match remote_target_for_host(id, host_id) {
             Some(t) => t,
-            None => return Ok(()), // local project → leave as-is
+            // A worker id that no longer resolves (the machine was removed while a
+            // tab still pointed at it) falls back to the PRIMARY on a remote project
+            // rather than silently running local in the remote cwd (plan §8). A
+            // genuinely local project still resolves to nothing → left as-is.
+            None => match remote_target_for(id).filter(|_| host_id != PRIMARY_HOST) {
+                Some(t) => t,
+                None => return Ok(()),
+            },
         },
         None => return Ok(()), // untagged spawn (root/connection/local_only) → local
     };
@@ -474,7 +656,19 @@ pub fn wrap_pty_options(opts: &mut PtyOptions) -> Result<(), String> {
     // Ensure the control-socket directory exists before ssh tries to bind it.
     let _ = std::fs::create_dir_all(control_dir());
 
-    let cmd_string = remote_command(&opts.cmd, &opts.args, &opts.env, &remote_dir);
+    // Persistent-session (tmux) wrap, TODO #85. An explicit attach (Sessions view /
+    // restored attach tab) wins; otherwise a per-tab `tmux_session` name — minted
+    // and persisted by the frontend for shell/script tabs of a persist-enabled
+    // remote project (so it is stable across a relaunch, unlike the PTY id) — spawns
+    // or reattaches that session. Absent (agent tabs, persistence off, local) →
+    // today's plain exec.
+    let tmux = match (&opts.tmux_attach, &opts.tmux_session) {
+        (Some(name), _) => Some(TmuxWrap::Attach(name.clone())),
+        (None, Some(name)) => Some(TmuxWrap::Session(name.clone())),
+        (None, None) => None,
+    };
+
+    let cmd_string = remote_command(&opts.cmd, &opts.args, &opts.env, &remote_dir, tmux.as_ref());
     let args = ssh_pty_args(&target.spec, &cmd_string)?;
 
     opts.cmd = "ssh".to_string();
@@ -500,6 +694,8 @@ mod tests {
             openvpn: None,
             auto_connect: None,
             key_auth: None,
+            persist_sessions: None,
+            label: None,
             extra: HashMap::new(),
         }
     }
@@ -519,7 +715,7 @@ mod tests {
 
     #[test]
     fn remote_command_shell_uses_login_shell() {
-        let cmd = remote_command("", &[], &HashMap::new(), "/srv/p");
+        let cmd = remote_command("", &[], &HashMap::new(), "/srv/p", None);
         assert_eq!(cmd, "cd '/srv/p' && exec \"${SHELL:-/bin/bash}\" -l");
     }
 
@@ -535,6 +731,7 @@ mod tests {
             &["--foo".to_string(), "bar baz".to_string()],
             &HashMap::new(),
             "/srv/p",
+            None,
         );
         assert_eq!(
             cmd,
@@ -545,7 +742,7 @@ mod tests {
 
     #[test]
     fn remote_command_agent_bootstraps_known_cli() {
-        let cmd = remote_command("claude", &[], &HashMap::new(), "/srv/p");
+        let cmd = remote_command("claude", &[], &HashMap::new(), "/srv/p", None);
         // Runs inside a login shell …
         assert!(cmd.starts_with("cd '/srv/p' && exec \"${SHELL:-/bin/bash}\" -lc "));
         // … with a detect-and-install prelude for the known CLI …
@@ -563,7 +760,7 @@ mod tests {
         env.insert("COLORTERM".to_string(), "truecolor".to_string());
         env.insert("B_VAR".to_string(), "2".to_string());
         env.insert("A_VAR".to_string(), "x y".to_string());
-        let cmd = remote_command("sh", &[], &env, "/srv/p");
+        let cmd = remote_command("sh", &[], &env, "/srv/p", None);
         assert_eq!(
             cmd,
             "cd '/srv/p' && export A_VAR='x y' && export B_VAR='2' && \
@@ -577,7 +774,7 @@ mod tests {
         env.insert("ANTHROPIC_API_KEY".to_string(), "sk-local".to_string());
         env.insert("OPENAI_API_KEY".to_string(), "sk-oai".to_string());
         env.insert("KEEP_ME".to_string(), "1".to_string());
-        let cmd = remote_command("sh", &[], &env, "/srv/p");
+        let cmd = remote_command("sh", &[], &env, "/srv/p", None);
         // Auth vars (and their values) are never exported to the remote …
         assert!(!cmd.contains("ANTHROPIC_API_KEY"));
         assert!(!cmd.contains("OPENAI_API_KEY"));
@@ -595,12 +792,100 @@ mod tests {
         let mut env = HashMap::new();
         env.insert("A; touch /tmp/pwned #".to_string(), "v".to_string());
         env.insert("GOOD_VAR".to_string(), "1".to_string());
-        let cmd = remote_command("sh", &[], &env, "/srv/p");
+        let cmd = remote_command("sh", &[], &env, "/srv/p", None);
         assert!(!cmd.contains("touch /tmp/pwned"));
         assert!(!cmd.contains("export A;"));
         assert!(cmd.contains("export GOOD_VAR='1'"));
     }
 
+    // ── tmux wrap (TODO #85) ───────────────────────────────────────────────
+
+    #[test]
+    fn remote_command_off_is_unchanged() {
+        // With no tmux wrap the output is byte-for-byte the pre-#85 command: the
+        // cd/exports/exec nesting is untouched.
+        let mut env = HashMap::new();
+        env.insert("K".to_string(), "v".to_string());
+        assert_eq!(
+            remote_command("", &[], &env, "/srv/p", None),
+            "cd '/srv/p' && export K='v' && exec \"${SHELL:-/bin/bash}\" -l"
+        );
+    }
+
+    #[test]
+    fn remote_command_tmux_wraps_shell_tab() {
+        let wrap = TmuxWrap::Session("eldrun-p1_shell-1".to_string());
+        let cmd = remote_command("", &[], &HashMap::new(), "/srv/p", Some(&wrap));
+        // cd prefix is preserved verbatim…
+        assert!(cmd.starts_with("cd '/srv/p' && "));
+        // …and the exec is a new-session -A -D on the derived name, with the login
+        // shell exec nested as tmux's (quoted) command argument.
+        assert!(cmd.contains("command -v tmux >/dev/null 2>&1"));
+        assert!(cmd.contains("exec tmux new-session -A -D -s 'eldrun-p1_shell-1' "));
+        assert!(cmd.contains("'exec \"${SHELL:-/bin/bash}\" -l'"));
+        // status/mouse options are chained as separate tmux commands.
+        assert!(cmd.contains("';' set -g status off ';' set -g mouse on"));
+        // Fallback: a host without tmux still runs the plain exec.
+        assert!(cmd.contains("session persistence is OFF"));
+        assert!(cmd.contains("; exec \"${SHELL:-/bin/bash}\" -l; fi"));
+    }
+
+    #[test]
+    fn remote_command_tmux_wraps_command_tab_preserving_prelude() {
+        let wrap = TmuxWrap::Session("eldrun-p1_a1".to_string());
+        let cmd = remote_command("claude", &[], &HashMap::new(), "/srv/p", Some(&wrap));
+        // The agent bootstrap prelude is nested INSIDE the tmux target unchanged…
+        assert!(cmd.contains("command -v claude >/dev/null 2>&1"));
+        assert!(cmd.contains("npm install -g @anthropic-ai/claude-code"));
+        // …and the whole `$SHELL -lc '<prelude; exec claude>'` line is tmux's
+        // (quoted) command argument on the persistent session.
+        assert!(cmd.contains("exec tmux new-session -A -D -s 'eldrun-p1_a1' "));
+    }
+
+    #[test]
+    fn remote_command_tmux_attach_ignores_target() {
+        let wrap = TmuxWrap::Attach("train".to_string());
+        // Even with a target command, an attach ignores it and just reattaches the
+        // named (possibly hand-started) session.
+        let cmd = remote_command("python", &["run.py".to_string()], &HashMap::new(), "/srv/p", Some(&wrap));
+        assert!(cmd.contains("exec tmux new-session -A -D -s 'train' "));
+        // No fresh target is exec'd inside the attach (the session already runs).
+        assert!(!cmd.contains("run.py"));
+    }
+
+    #[test]
+    fn tmux_kill_session_script_quotes_name() {
+        assert_eq!(
+            tmux_kill_session_script("eldrun-p1_shell-1"),
+            "tmux kill-session -t 'eldrun-p1_shell-1' 2>/dev/null || true"
+        );
+        // An arbitrary/foreign name is single-quoted so it can't break out.
+        assert!(tmux_kill_session_script("a'b").contains("'a'\\''b'"));
+    }
+
+    #[test]
+    fn parse_tmux_ls_reads_rows_and_tolerates_empty() {
+        let out = "eldrun-p1_shell-1\t2\t1700000000\t1\ntrain\t1\t1700000500\t0\n";
+        let v = parse_tmux_ls(out);
+        assert_eq!(v.len(), 2);
+        assert_eq!(v[0], TmuxSession { name: "eldrun-p1_shell-1".into(), windows: 2, created: 1_700_000_000, attached: true });
+        assert_eq!(v[1], TmuxSession { name: "train".into(), windows: 1, created: 1_700_000_500, attached: false });
+        // "no server running" / absent tmux → empty output → zero sessions.
+        assert!(parse_tmux_ls("").is_empty());
+        assert!(parse_tmux_ls("\n").is_empty());
+        // A malformed row is skipped, not fatal.
+        assert!(parse_tmux_ls("onlyname\n").is_empty());
+    }
+
+    #[test]
+    fn tmux_ls_script_tolerates_no_server() {
+        let s = tmux_ls_script();
+        assert!(s.contains("tmux ls -F"));
+        // "no server running" (non-zero exit) and absent tmux both collapse to
+        // empty output rather than an error.
+        assert!(s.contains("2>/dev/null || true"));
+    }
+
     #[test]
     fn is_valid_env_key_matches_posix_identifiers() {
         assert!(is_valid_env_key("ELDRUN_TAB_UID"));
@@ -711,6 +996,9 @@ mod tests {
             local_only: false,
             sandbox: false,
             project_id: project_id.map(str::to_string),
+            remote_host_id: None,
+            tmux_session: None,
+            tmux_attach: None,
         }
     }
 
diff --git a/src-tauri/src/services/sync_auto.rs b/src-tauri/src/services/sync_auto.rs
index f79da5e..61b8db3 100644
--- a/src-tauri/src/services/sync_auto.rs
+++ b/src-tauri/src/services/sync_auto.rs
@@ -61,8 +61,6 @@ pub struct AutoSyncTask {
     /// `git_peer` re-stamps the file-sync bases before clearing this, so the next
     /// pass reads the rewritten tracked files as green rather than as local edits.
     paused: Arc<AtomicBool>,
-    /// Kept alive for the task's lifetime; dropped on `stop` → unwatch.
-    _watcher: notify::RecommendedWatcher,
 }
 
 /// Tauri-managed registry of per-project auto-sync tasks, keyed by project id.
@@ -106,20 +104,12 @@ pub async fn start(
     // Mirror watcher → mpsc into the loop (debounced there). The mirror must
     // exist for the recursive watch to attach (connect() already creates it, but
     // be defensive for a first-ever run).
+    //
+    // The watcher itself is attached by the loop, not here, and only once the
+    // manifest actually marks something for auto-sync — see `attach_watcher`.
     let mirror = mirror_dir(project_id);
     let _ = std::fs::create_dir_all(&mirror);
     let (tx, rx) = mpsc::unbounded_channel::<()>();
-    let mut watcher = match notify::recommended_watcher(move |res: notify::Result<notify::Event>| {
-        if res.is_ok() {
-            let _ = tx.send(());
-        }
-    }) {
-        Ok(w) => w,
-        Err(_) => return, // no watcher → skip auto-sync for this project
-    };
-    if watcher.watch(&mirror, RecursiveMode::Recursive).is_err() {
-        return;
-    }
 
     let cancel = Arc::new(Notify::new());
     let paused = Arc::new(AtomicBool::new(false));
@@ -129,6 +119,8 @@ pub async fn start(
         manifest,
         target,
         project_id.to_string(),
+        mirror,
+        tx,
         rx,
         cancel.clone(),
         paused.clone(),
@@ -139,7 +131,6 @@ pub async fn start(
             cancel,
             join,
             paused,
-            _watcher: watcher,
         },
     );
 }
@@ -182,6 +173,51 @@ pub async fn stop_all(state: &AutoSyncState) {
     }
 }
 
+/// Attach the mirror watcher, but only once the manifest marks *something* for
+/// auto-sync. No-op if already attached, or if there is still nothing marked.
+///
+/// Byte-sync scope is opt-in per path (no marker ⇒ nothing crosses), so a remote
+/// project that has never marked anything — the common case — used to pay for a
+/// recursive watch it could not act on: `reconcile_pass` collects the `auto_sync`
+/// entries and returns immediately when there are none, but the watch had already
+/// cost one inotify watch per directory in the mirror (8017 on a measured project
+/// with two virtualenvs), each event waking a thread to send on a channel whose
+/// consumer would bail. Deferring the attach makes that cost follow the feature.
+///
+/// Re-checked on every interval tick rather than wired into `sync_set_auto`, which
+/// deliberately transfers nothing and leaves the engine to act on its next pass —
+/// so the marker and the watcher stay decoupled, and a manifest edited by any
+/// route (command, import, hand-edited file) is picked up the same way.
+async fn ensure_watcher(
+    slot: &mut Option<notify::RecommendedWatcher>,
+    manifest: &SyncManifestState,
+    project_id: &str,
+    mirror: &std::path::Path,
+    tx: &mpsc::UnboundedSender<()>,
+) {
+    if slot.is_some() {
+        return;
+    }
+    {
+        let mut g = manifest.lock().await;
+        let m = ensure_loaded(&mut g, project_id);
+        if !m.values().any(|e| e.auto_sync) {
+            return;
+        }
+    }
+    let tx = tx.clone();
+    let Ok(mut w) = notify::recommended_watcher(move |res: notify::Result<notify::Event>| {
+        if res.is_ok() {
+            let _ = tx.send(());
+        }
+    }) else {
+        return; // no watcher → interval passes still run, just less promptly
+    };
+    if w.watch(mirror, RecursiveMode::Recursive).is_ok() {
+        *slot = Some(w);
+    }
+}
+
 /// The per-project loop: reconcile on a fixed interval (host changes) and shortly
 /// after any mirror write (local changes), until cancelled. A single task ⇒ passes
 /// are serialized and never overlap.
@@ -191,17 +227,26 @@ async fn run_loop(
     manifest: SyncManifestState,
     target: RemoteTarget,
     project_id: String,
+    mirror: std::path::PathBuf,
+    tx: mpsc::UnboundedSender<()>,
     mut rx: mpsc::UnboundedReceiver<()>,
     cancel: Arc<Notify>,
     paused: Arc<AtomicBool>,
 ) {
     let mut interval = tokio::time::interval(AUTO_INTERVAL);
     interval.set_missed_tick_behavior(MissedTickBehavior::Delay);
+    // Dropped with the task (cancel/stop) → unwatch, exactly as the old field on
+    // `AutoSyncTask` did. `None` until the manifest marks something; see below.
+    let mut watcher: Option<notify::RecommendedWatcher> = None;
+    ensure_watcher(&mut watcher, &manifest, &project_id, &mirror, &tx).await;
     loop {
         tokio::select! {
             _ = cancel.notified() => break,
             _ = interval.tick() => {
                 if paused.load(Ordering::SeqCst) { continue; }
+                // Cheap once attached; this is what picks up a `sync_set_auto` that
+                // marked the first path after the task was already running.
+                ensure_watcher(&mut watcher, &manifest, &project_id, &mirror, &tx).await;
                 reconcile_pass(Some(&app), &pool, &manifest, &target, &project_id).await;
             }
             res = rx.recv() => {
diff --git a/src-tauri/src/services/terminal_service.rs b/src-tauri/src/services/terminal_service.rs
index 6af6f34..c904a10 100644
--- a/src-tauri/src/services/terminal_service.rs
+++ b/src-tauri/src/services/terminal_service.rs
@@ -11,13 +11,19 @@ use crate::storage;
 /// `groups` is the opaque split/group layout tree (None clears it).
 /// `sessions` is the opaque list of open agent-session UUIDs: `Some([])` clears
 /// it, `Some(list)` replaces it, and `None` leaves the stored value untouched.
+///
+/// `allow_clear` is what makes an EMPTY `tabs` mean "the user closed every tab"
+/// rather than "the caller had nothing loaded". Only the frontend can tell those
+/// apart, and it only knows for a scope it actually hydrated — see the guard in
+/// `write_terminal_session`.
 pub fn save_tab_layout(
     local_file: &str,
     tabs: &[TabEntry],
     groups: Option<Value>,
     sessions: Option<Value>,
+    allow_clear: bool,
 ) -> Result<(), String> {
-    write_terminal_session(local_file, tabs, 0, groups, sessions)
+    write_terminal_session(local_file, tabs, 0, groups, sessions, allow_clear)
 }
 
 /// Save tab layout with the active tab index.
@@ -31,7 +37,10 @@ pub fn save_terminal_session(
 ) -> Result<(), String> {
     // The project-switch snapshot carries no session list; leave the persisted
     // UUIDs untouched (the active project's debounced save_tab_layout owns them).
-    write_terminal_session(local_file, tabs, active_tab_index, groups, None)
+    // It also never clears: a snapshot is a picture of what was in memory, and an
+    // empty one is far more likely to mean "this scope was never loaded" than
+    // "the user closed everything" — the debounced save owns that intent.
+    write_terminal_session(local_file, tabs, active_tab_index, groups, None, false)
 }
 
 fn write_terminal_session(
@@ -40,7 +49,27 @@ fn write_terminal_session(
     active_tab_index: usize,
     groups: Option<Value>,
     sessions: Option<Value>,
+    allow_clear: bool,
 ) -> Result<(), String> {
+    // An empty layout is DESTRUCTIVE — it drops `tab_layout`/`tab_groups` from
+    // project.json *and* overwrites the `.eldrun` mirror with an empty one, in a
+    // single call. The two are written from the same array, so the mirror is not a
+    // backup: one empty save takes both copies, and a persisted agent tab's
+    // `sessionId` is the only handle on its conversation.
+    //
+    // That is fine when the user really did close every tab, and catastrophic
+    // otherwise — and "otherwise" is reachable, which is how SimpleGNN lost four
+    // tabs on detach: the frontend's debounced autosave persists the tab store's
+    // CURRENT scope into the ACTIVE project's `local_file`, two values it tracks
+    // independently. Detach swaps `local_file` (state dir → promoted mirror) under
+    // a store whose scope has not caught up, the per-scope tab filter correctly
+    // refuses to write another project's tabs into this file, and what lands is an
+    // empty list that reads exactly like a deliberate close-all.
+    //
+    // So an empty layout only clears when the caller states it means one.
+    if tabs.is_empty() && !allow_clear {
+        return Ok(());
+    }
     let path = PathBuf::from(local_file);
     let mut project: crate::schema::project::Project =
         storage::read_json(&path).unwrap_or_default();
diff --git a/src-tauri/src/services/tmux_local.rs b/src-tauri/src/services/tmux_local.rs
new file mode 100644
index 0000000..0c095be
--- /dev/null
+++ b/src-tauri/src/services/tmux_local.rs
@@ -0,0 +1,209 @@
+//! Persistent **local** (tmux) sessions (TODO #85 extension).
+//!
+//! The remote half of persistent sessions runs tmux on the SSH host; this runs it
+//! on the **local machine** so a local project's shell/script tab (a Python run, a
+//! long build) keeps going if Eldrun **crashes** — and reattaches on restart —
+//! instead of dying with the PTY. It works because the tmux **server** is a
+//! daemon: the PTY only holds a tmux *client*, so when Eldrun (and the client)
+//! goes away the session and its processes live on under the server, and a
+//! respawn's `tmux new-session -A` reattaches them.
+//!
+//! **Unix only.** There is no tmux on Windows, so every entry point here no-ops
+//! there (guarded by [`tmux_available`], which is `false` on Windows), leaving the
+//! tab to spawn exactly as before.
+//!
+//! Unlike the remote wrap (which emits a `$SHELL -c` *string* for ssh), the local
+//! wrap rewrites `PtyOptions.{cmd,args}` into a direct `tmux` **argv** — the PTY
+//! spawns `tmux` itself, and `cwd`/`env` set on the client are inherited by a
+//! freshly-created session.
+
+use crate::terminal::PtyOptions;
+
+/// Single-quote `s` for a POSIX shell (mirrors `ssh_exec::shell_quote`). Used only
+/// to fold a command tab's `cmd`+`args` into the single command string tmux hands
+/// to `sh -c`.
+fn shell_quote(s: &str) -> String {
+    let mut out = String::with_capacity(s.len() + 2);
+    out.push('\'');
+    for ch in s.chars() {
+        if ch == '\'' {
+            out.push_str("'\\''");
+        } else {
+            out.push(ch);
+        }
+    }
+    out.push('\'');
+    out
+}
+
+/// Whether a usable `tmux` is on `PATH`. Cached after the first probe (the answer
+/// cannot change within a run). Always `false` on Windows, which is what makes
+/// every wrap here a no-op there.
+#[cfg(unix)]
+pub fn tmux_available() -> bool {
+    use std::sync::OnceLock;
+    static AVAILABLE: OnceLock<bool> = OnceLock::new();
+    *AVAILABLE.get_or_init(|| {
+        crate::paths::command_no_window("tmux")
+            .arg("-V")
+            .output()
+            .map(|o| o.status.success())
+            .unwrap_or(false)
+    })
+}
+
+#[cfg(not(unix))]
+pub fn tmux_available() -> bool {
+    false
+}
+
+/// Build the `tmux` argv (the value of `PtyOptions.args`, with `cmd` = `"tmux"`)
+/// that spawns-or-attaches the session named `session`. Pure + unit-testable.
+///
+/// `target_cmd` empty ⇒ a bare `new-session` whose command is tmux's default
+/// (the login shell) — the shell-tab / typed-command case (e.g. a Python run typed
+/// into the shell), where the shell **outlives** the command so the session
+/// survives its completion. `target_cmd` set (a command tab) ⇒ tmux runs
+/// `<cmd> <args>; exec "$SHELL" -l`, i.e. the command, then a login shell, so the
+/// session likewise persists after the command exits (reattach shows the result
+/// rather than re-running it — the resumable-command-tab guarantee).
+///
+/// `-A` = attach if it exists / create otherwise (one command that is both start
+/// and resume); `-D` = detach any other client (a stale one from before a
+/// crash/reload); `status off` / `mouse on` are chained as separate tmux commands
+/// after a literal `;` argv item (tmux splits its argv on a standalone `;`).
+pub fn local_tmux_args(session: &str, target_cmd: &str, target_args: &[String]) -> Vec<String> {
+    let mut args: Vec<String> = vec![
+        "new-session".into(),
+        "-A".into(),
+        "-D".into(),
+        "-s".into(),
+        session.to_string(),
+    ];
+    if !target_cmd.is_empty() {
+        // One positional arg = the command line tmux runs via `sh -c`. Keeping a
+        // login shell after it is what makes a finished run reattachable.
+        let mut line = shell_quote(target_cmd);
+        for a in target_args {
+            line.push(' ');
+            line.push_str(&shell_quote(a));
+        }
+        line.push_str("; exec \"${SHELL:-/bin/bash}\" -l");
+        args.push(line);
+    }
+    // Session options as trailing tmux commands (standalone ';' tokens split argv).
+    for tok in [";", "set", "-g", "status", "off", ";", "set", "-g", "mouse", "on"] {
+        args.push(tok.to_string());
+    }
+    args
+}
+
+/// `tmux kill-session -t <session>` argv, for the explicit-close / Sessions-view
+/// kill of a local persistent tab. `|| true` is unnecessary here (a missing
+/// session just exits non-zero, which the fire-and-forget caller ignores).
+pub fn local_tmux_kill_args(session: &str) -> Vec<String> {
+    vec!["kill-session".into(), "-t".into(), session.to_string()]
+}
+
+/// `tmux rename-session -t <old> <new>` argv.
+pub fn local_tmux_rename_args(old: &str, new: &str) -> Vec<String> {
+    vec![
+        "rename-session".into(),
+        "-t".into(),
+        old.to_string(),
+        new.to_string(),
+    ]
+}
+
+/// `tmux ls -F …` argv for listing local sessions (same format the remote path
+/// parses via `ssh_exec::parse_tmux_ls`).
+pub fn local_tmux_ls_args() -> Vec<String> {
+    vec![
+        "ls".into(),
+        "-F".into(),
+        "#{session_name}\t#{session_windows}\t#{session_created}\t#{session_attached}".into(),
+    ]
+}
+
+/// Rewrite `opts` to spawn the tab inside a **local** tmux session when it carries
+/// a `tmux_session` name and tmux is available. No-op otherwise (no name, or no
+/// tmux — including all of Windows), leaving the tab to spawn exactly as before.
+///
+/// Only the resolved local command is rewritten; `cwd`/`env` are left for
+/// `build_command` to apply to the `tmux` client, so a freshly-created session
+/// inherits them. Callers must ensure this runs only for a **local** spawn (not an
+/// `ssh`/`docker`-wrapped one) — see `commands::terminal::pty_spawn`.
+pub fn wrap_pty_options_local(opts: &mut PtyOptions) {
+    if !tmux_available() {
+        return;
+    }
+    let Some(session) = opts.tmux_session.clone() else {
+        return;
+    };
+    let args = local_tmux_args(&session, &opts.cmd, &opts.args);
+    opts.cmd = "tmux".to_string();
+    opts.args = args;
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn shell_tab_uses_default_login_shell_and_options() {
+        // No target command → bare new-session (tmux's default login shell) so the
+        // shell survives a typed command's completion; options chained after `;`.
+        let args = local_tmux_args("eldrun-abc", "", &[]);
+        assert_eq!(
+            args,
+            vec![
+                "new-session", "-A", "-D", "-s", "eldrun-abc",
+                ";", "set", "-g", "status", "off",
+                ";", "set", "-g", "mouse", "on",
+            ]
+        );
+    }
+
+    #[test]
+    fn command_tab_runs_command_then_keeps_a_shell() {
+        // A command tab keeps a login shell AFTER the command so the finished run
+        // reattaches (resumable-command-tab guarantee) instead of re-running.
+        let args = local_tmux_args("eldrun-x", "python", &["train.py".into()]);
+        assert_eq!(args[0], "new-session");
+        assert!(args.iter().any(|a| a == "eldrun-x"));
+        let target = &args[5];
+        assert_eq!(target, "'python' 'train.py'; exec \"${SHELL:-/bin/bash}\" -l");
+        // Options still trail.
+        assert!(args.windows(2).any(|w| w == [";".to_string(), "set".to_string()]));
+    }
+
+    #[test]
+    fn kill_and_rename_argv() {
+        assert_eq!(local_tmux_kill_args("s"), vec!["kill-session", "-t", "s"]);
+        assert_eq!(
+            local_tmux_rename_args("old", "new"),
+            vec!["rename-session", "-t", "old", "new"]
+        );
+    }
+
+    #[test]
+    fn wrap_no_session_is_noop() {
+        let mut opts = PtyOptions {
+            id: "t".into(),
+            cmd: "bash".into(),
+            args: vec![],
+            env: Default::default(),
+            cwd: "/p".into(),
+            cols: 80,
+            rows: 24,
+            local_only: false,
+            sandbox: false,
+            project_id: Some("p".into()),
+            remote_host_id: None,
+            tmux_session: None,
+            tmux_attach: None,
+        };
+        wrap_pty_options_local(&mut opts);
+        assert_eq!(opts.cmd, "bash");
+    }
+}
diff --git a/src-tauri/src/services/usage_stats.rs b/src-tauri/src/services/usage_stats.rs
index 5ba992a..4c66146 100644
--- a/src-tauri/src/services/usage_stats.rs
+++ b/src-tauri/src/services/usage_stats.rs
@@ -63,6 +63,24 @@ const IGNORED_DIRS: &[&str] = &[
 /// Suffixes of editor scratch/lock files — churn that represents no real edit.
 const IGNORED_SUFFIXES: &[&str] = &[".swp", ".swx", ".tmp", ".lock", "~"];
 
+/// Whether a single directory NAME names an ignored subtree.
+///
+/// Exact matching against [`IGNORED_DIRS`] is not enough for virtualenvs, which
+/// are named by their owner rather than by convention: `venv` and `.venv` are in
+/// the list, but a second environment beside them is routinely `venv-rocm`,
+/// `venv313`, `.venv-cuda`… Those are thousands of directories each, and missing
+/// one does not merely cost watch churn — every write inside it is counted as
+/// work the user did, so the recap's file-churn figure reports a `pip install`
+/// as a day's editing. Hence the venv rule is a *shape* (a `venv`/`.venv` stem,
+/// or a `-venv`/`_venv` suffix), not a fixed list.
+pub fn is_ignored_dir_name(name: &str) -> bool {
+    if IGNORED_DIRS.contains(&name) {
+        return true;
+    }
+    let stem = name.strip_prefix('.').unwrap_or(name);
+    stem.starts_with("venv") || name.ends_with("-venv") || name.ends_with("_venv")
+}
+
 /// Whether a path should never contribute to file-churn counts.
 ///
 /// Pure, so every rule below is unit-tested without touching a filesystem.
@@ -71,7 +89,7 @@ pub fn is_ignored(path: &Path) -> bool {
         let Some(name) = component.as_os_str().to_str() else {
             continue;
         };
-        if IGNORED_DIRS.contains(&name) {
+        if is_ignored_dir_name(name) {
             return true;
         }
     }
@@ -205,6 +223,88 @@ pub fn watch_root_for(project_id: &str) -> Option<PathBuf> {
     path.is_dir().then_some(path)
 }
 
+/// Attach the watch to `root`'s tree, descending it ourselves so that an ignored
+/// subtree is never watched in the first place.
+///
+/// `RecursiveMode::Recursive` on the root would be one line, and was — but it asks
+/// the kernel for one inotify watch per directory *including* the ones
+/// [`is_ignored`] exists to throw away. On a real project that is not a rounding
+/// error: a tree with two virtualenvs measured 8017 watches, of which ~85% were
+/// venv internals whose every event was queued, delivered, woken a thread for, and
+/// then discarded. Pruning here makes the kernel stop reporting what we were only
+/// going to drop.
+///
+/// The trade-off is deliberate: a directory created *after* this pass is not
+/// watched (its own creation is still seen, since its parent is). Re-watching
+/// happens on the next project switch, and the payload is a usage counter — a
+/// newly-created folder's churn going uncounted until then is worth the ~98%
+/// reduction in watch load.
+/// `excluded` additionally drops the subtrees the user excluded by hand (the file
+/// tree's "Exclude from scans"), so one list governs every scan rather than the
+/// size walk and the churn watcher each having their own notion of "skip this".
+fn watch_pruned(
+    watcher: &mut notify::RecommendedWatcher,
+    root: &Path,
+    excluded: &std::collections::HashSet<String>,
+) {
+    // (dir, project-relative path) — the rel is what the exclusion list speaks.
+    let mut stack = vec![(root.to_path_buf(), String::new())];
+    while let Some((dir, rel)) = stack.pop() {
+        // NonRecursive: every directory gets its own watch, so files anywhere in
+        // the surviving tree are still reported — only the ignored subtrees are
+        // absent, which a recursive watch could not express.
+        if watcher.watch(&dir, RecursiveMode::NonRecursive).is_err() {
+            continue; // vanished mid-walk, or the watch limit is exhausted
+        }
+        let Ok(entries) = std::fs::read_dir(&dir) else {
+            continue;
+        };
+        for entry in entries.flatten() {
+            // Never follow a symlink: a link pointing up the tree would loop, and
+            // one pointing out of the project would watch someone else's files.
+            if !entry.file_type().is_ok_and(|t| t.is_dir()) {
+                continue;
+            }
+            let name = entry.file_name();
+            let Some(name) = name.to_str() else { continue };
+            if is_ignored_dir_name(name) {
+                continue;
+            }
+            let child_rel = if rel.is_empty() { name.to_string() } else { format!("{rel}/{name}") };
+            if excluded.contains(&child_rel) {
+                continue;
+            }
+            stack.push((entry.path(), child_rel));
+        }
+    }
+}
+
+/// The user's own scan-exclusion list for `project_id` — `scan_excluded_paths` in
+/// the project's `project.json`, the same list the file tree writes and the size
+/// walk reads (`commands::fs::excluded_rel_set`).
+///
+/// Read from the project's *state* directory, which is where `project.json` lives
+/// for a local and a remote project alike — the remote one's watch root is its
+/// mirror, a different path entirely, so resolving the list from the watch root
+/// would find nothing.
+fn user_excluded_dirs(project_id: &str) -> std::collections::HashSet<String> {
+    let Some(dir) = crate::services::remote::project_directory(project_id) else {
+        return Default::default();
+    };
+    let Ok(raw) = std::fs::read_to_string(PathBuf::from(dir).join("project.json")) else {
+        return Default::default();
+    };
+    let Ok(json) = serde_json::from_str::<serde_json::Value>(&raw) else {
+        return Default::default();
+    };
+    let list: Vec<String> = json
+        .get("scan_excluded_paths")
+        .and_then(|v| v.as_array())
+        .map(|a| a.iter().filter_map(|v| v.as_str().map(str::to_string)).collect())
+        .unwrap_or_default();
+    crate::commands::fs::excluded_rel_set(&list)
+}
+
 /// Watch `project_id`'s tree (recursively), replacing any previous watch. An
 /// empty id — or a project with nothing watchable — just stops watching.
 ///
@@ -247,9 +347,7 @@ pub fn watch_project(state: &UsageWatchState, project_id: &str) -> Result<(), St
     })
     .map_err(|e| e.to_string())?;
 
-    watcher
-        .watch(&canonical, RecursiveMode::Recursive)
-        .map_err(|e| e.to_string())?;
+    watch_pruned(&mut watcher, &canonical, &user_excluded_dirs(project_id));
 
     // Replacing the stored watcher drops the previous one, unwatching it.
     *guard = Some(Active {
@@ -319,6 +417,25 @@ mod tests {
         assert!(is_ignored(&p("/a/node_modules/b/node_modules/c.js")));
     }
 
+    #[test]
+    fn virtualenvs_are_ignored_by_shape_not_by_exact_name() {
+        // A venv is named by its owner, so an exact-name list only ever catches the
+        // first one. A measured project carried `venv` AND `venv-rocm` side by side:
+        // the second slipped through, and every `pip install` inside it was counted
+        // as the user's own file churn.
+        assert!(is_ignored(&p("/home/me/proj/venv/lib/python3.12/site.py")));
+        assert!(is_ignored(&p("/home/me/proj/venv-rocm/lib/python3.12/site.py")));
+        assert!(is_ignored(&p("/home/me/proj/.venv-cuda/bin/python")));
+        assert!(is_ignored(&p("/home/me/proj/venv313/bin/python")));
+        assert!(is_ignored(&p("/home/me/proj/project_venv/bin/python")));
+        assert!(is_ignored(&p("/home/me/proj/api-venv/bin/python")));
+        // …but the shape must not swallow ordinary source directories that merely
+        // start with the same letters.
+        assert!(!is_ignored(&p("/home/me/proj/vendored_ui/main.ts")));
+        assert!(!is_ignored(&p("/home/me/proj/environments/prod.yaml")));
+        assert!(!is_ignored(&p("/home/me/proj/ven/notes.md")));
+    }
+
     #[test]
     fn a_file_merely_named_like_an_ignored_dir_is_not_ignored() {
         // "target" as a *file* is source, not a build directory.
diff --git a/src-tauri/src/services/window_service.rs b/src-tauri/src/services/window_service.rs
index a1deb7d..26fd7fa 100644
--- a/src-tauri/src/services/window_service.rs
+++ b/src-tauri/src/services/window_service.rs
@@ -9,6 +9,24 @@ use crate::schema::session::WindowSession;
 use crate::services::terminal_service::eldrun_sessions_dir;
 use crate::storage;
 
+/// Physical monitor rects as reported by a live window (#42), for validating a
+/// detached popout's restore geometry on switch-back. Mirrors the mapping
+/// `lib.rs` uses at startup for the main window.
+pub fn monitor_rects(
+    win: &tauri::WebviewWindow,
+) -> Vec<crate::services::window_state::MonitorRect> {
+    win.available_monitors()
+        .unwrap_or_default()
+        .iter()
+        .map(|m| crate::services::window_state::MonitorRect {
+            x: m.position().x,
+            y: m.position().y,
+            w: m.size().width,
+            h: m.size().height,
+        })
+        .collect()
+}
+
 pub fn hide_windows(backend: &dyn WorkspaceBackend, window_ids: &[u64]) {
     for &wid in window_ids {
         if let Err(e) = backend.hide_window(wid) {
diff --git a/src-tauri/src/services/window_state.rs b/src-tauri/src/services/window_state.rs
index d50dbca..9969eb3 100644
--- a/src-tauri/src/services/window_state.rs
+++ b/src-tauri/src/services/window_state.rs
@@ -91,6 +91,59 @@ pub fn resolve_startup_geometry(
     })
 }
 
+/// Geometry to re-apply to a DETACHED popout on project switch-back (#42).
+///
+/// The switch path hides an inactive project's popouts and re-shows them on
+/// switch-back; `hide()`/`show()` lets the WM move the window — typically onto
+/// the primary monitor — so the geometry captured just before hiding must be
+/// re-applied, or a multi-monitor popout lands on the wrong screen. This
+/// validates that captured rect against the CURRENTLY connected monitors (the
+/// same monitor-fit the main window uses at startup) so a monitor unplugged
+/// while the project was inactive can't strand the popout off-screen.
+///
+/// Two things differ from [`resolve_startup_geometry`]:
+///   * An **empty** monitor list re-applies the captured rect unchanged rather
+///     than giving up — mid-session the rect is known-good (the popout was just
+///     visible there) and a transient empty read is no reason to leave it
+///     WM-misplaced.
+///   * It imposes **no minimum size**. A borderless popout has no configured
+///     `minWidth`/`minHeight` (the main window does), so growing it to 800×600
+///     would silently resize a deliberately small popout.
+///
+/// Returns `None` only when the captured rect is degenerate, or when it no
+/// longer meaningfully overlaps any connected monitor (the display it lived on
+/// was unplugged) — in which case the caller leaves the WM's placement rather
+/// than flinging the window off-screen.
+pub fn resolve_detached_geometry(
+    saved: WindowState,
+    monitors: &[MonitorRect],
+) -> Option<WindowState> {
+    if saved.w == 0 || saved.h == 0 {
+        return None;
+    }
+    if monitors.is_empty() {
+        return Some(saved);
+    }
+
+    let best = monitors
+        .iter()
+        .max_by_key(|m| overlap_area(&saved, m))
+        .copied()?;
+
+    let (ow, oh) = overlap_dims(&saved, &best);
+    if ow < MIN_VISIBLE_W || oh < MIN_VISIBLE_H {
+        return None;
+    }
+
+    // Fit to the monitor WITHOUT a minimum-size floor: never larger than the
+    // screen, then slid back inside if it hangs off an edge.
+    let w = saved.w.min(best.w);
+    let h = saved.h.min(best.h);
+    let x = saved.x.clamp(best.x, best.x + best.w as i32 - w as i32);
+    let y = saved.y.clamp(best.y, best.y + best.h as i32 - h as i32);
+    Some(WindowState { x, y, w, h, maximized: false })
+}
+
 /// Width/height of the intersection between a saved window rect and a monitor, in
 /// physical px. `i64` because `x + w` on two `i32`s can overflow in principle and
 /// these feed a comparison, not a coordinate.
@@ -229,4 +282,59 @@ mod tests {
         assert_eq!(got.x, 1920, "slid right, flush with DP-7's left edge");
         assert_eq!(got.w, 1400, "not resized — it fits DP-7 fine");
     }
+
+    // ── resolve_detached_geometry (#42 switch-back popout restore) ──────────
+
+    #[test]
+    fn detached_popout_on_the_secondary_monitor_is_restored_there() {
+        // THE bug: switching back must land the popout on DP-7, not DP-6.
+        let saved = ws(2200, 150, 900, 640);
+        assert_eq!(
+            resolve_detached_geometry(saved, &two_monitors()),
+            Some(saved),
+        );
+    }
+
+    #[test]
+    fn detached_empty_monitor_list_reapplies_the_captured_rect() {
+        // Mid-session the captured rect was valid moments ago; a transient empty
+        // monitor read is no reason to leave the popout WM-misplaced. Unlike the
+        // startup resolver, which returns None here.
+        let saved = ws(2200, 150, 900, 640);
+        assert_eq!(resolve_detached_geometry(saved, &[]), Some(saved));
+    }
+
+    #[test]
+    fn detached_small_popout_is_not_grown_to_a_minimum() {
+        // A borderless popout has no configured minimum size — a deliberately
+        // small one must come back the same size, not grown to 800×600 the way
+        // the main-window resolver would.
+        let saved = ws(300, 300, 420, 320);
+        let got = resolve_detached_geometry(saved, &only_primary()).unwrap();
+        assert_eq!((got.w, got.h), (420, 320), "kept its small size");
+        assert_eq!((got.x, got.y), (300, 300));
+    }
+
+    #[test]
+    fn detached_popout_on_an_unplugged_monitor_falls_back_to_wm_placement() {
+        // The display it lived on is gone → None, so the caller leaves the WM's
+        // placement rather than flinging it off-screen.
+        let saved = ws(2200, 150, 900, 640);
+        assert_eq!(resolve_detached_geometry(saved, &only_primary()), None);
+    }
+
+    #[test]
+    fn detached_popout_hanging_off_an_edge_is_slid_back_inside() {
+        let saved = ws(1600, 800, 900, 640);
+        let got = resolve_detached_geometry(saved, &only_primary()).unwrap();
+        assert_eq!(got.w, 900, "size fine, only origin was off");
+        assert_eq!(got.x, 1020, "flush against the monitor's right edge");
+        assert_eq!(got.y, 440, "flush against its bottom edge");
+    }
+
+    #[test]
+    fn detached_degenerate_rect_is_ignored() {
+        assert_eq!(resolve_detached_geometry(ws(0, 0, 0, 640), &only_primary()), None);
+        assert_eq!(resolve_detached_geometry(ws(0, 0, 900, 0), &only_primary()), None);
+    }
 }
diff --git a/src-tauri/src/services/worker_sync.rs b/src-tauri/src/services/worker_sync.rs
new file mode 100644
index 0000000..0aadb5d
--- /dev/null
+++ b/src-tauri/src/services/worker_sync.rs
@@ -0,0 +1,688 @@
+//! Worker code sync — one-way, code-only push fan-out (`docs/multi_host_remote_plan.md` §2).
+//!
+//! The canonical source is the **local mirror** — already lockstep-paired with the
+//! primary (`git_peer`), so it always holds the project's current committed code.
+//! Each extra "worker" host (`schema::project::ComputeHost`) is fed *from the
+//! mirror*, one-way, tracked files only:
+//!
+//! 1. On the mirror, `git bundle` the current HEAD (incremental `--not <last_head>`
+//!    when we know what the worker already has).
+//! 2. Ship the bundle to `worker:<remote_path>/.eldrun-worker.bundle` over the
+//!    worker's pooled SFTP session.
+//! 3. On the worker: `git init` (idempotent), `git fetch` the bundle, then
+//!    `git reset --hard FETCH_HEAD` — **tracked files only, never `git clean`**.
+//!
+//! This inherits none of the hard parts of the primary's bidirectional lockstep:
+//! a worker tree is never read back, so there is no divergence, no conflict, and no
+//! destructive local-loss to audit. The single load-bearing invariant is that the
+//! worker sync **must never `git clean`** — untracked experiment outputs survive
+//! every sync by construction (plan §8).
+
+use std::collections::HashSet;
+use std::path::{Path, PathBuf};
+use std::sync::Arc;
+
+use serde::{Deserialize, Serialize};
+use tauri::{AppHandle, Emitter};
+use tokio::sync::Mutex;
+
+use crate::services::git_peer::{bundle_create_args, Peer};
+use crate::services::remote::{self, RemotePoolState, PRIMARY_HOST};
+use crate::services::remote_sync::mirror_dir;
+use crate::services::{sftp, ssh_exec};
+use crate::storage;
+
+/// The bundle filename shipped into a worker's `remote_path`. A relative name, so
+/// the worker-side script (which runs `cd <remote_path> && …`) never has to
+/// interpolate a path.
+const WORKER_BUNDLE: &str = ".eldrun-worker.bundle";
+
+/// In-memory fan-out registry: the `(project, host)` keys currently syncing, used
+/// as a crude in-flight lock so a commit-triggered and a connect-triggered push to
+/// the same worker never race to write its bundle file. The durable per-worker
+/// `last_head` lives on disk (see [`worker_state_path`]).
+#[derive(Default)]
+pub struct WorkerSyncRegistry {
+    in_flight: HashSet<String>,
+}
+
+/// Managed-state handle to the worker-sync registry.
+pub type WorkerSyncState = Arc<Mutex<WorkerSyncRegistry>>;
+
+/// Build a fresh, empty worker-sync registry for `tauri::Builder::manage`.
+pub fn new_state() -> WorkerSyncState {
+    Arc::new(Mutex::new(WorkerSyncRegistry::default()))
+}
+
+/// Durable per-worker state (`worker_sync.json`): the commit last successfully
+/// pushed to this worker, so the next push can be an incremental bundle.
+#[derive(Default, Serialize, Deserialize)]
+struct WorkerRecord {
+    #[serde(skip_serializing_if = "Option::is_none")]
+    last_head: Option<String>,
+}
+
+/// The outcome of one worker fan-out, emitted to the frontend as a
+/// `worker-sync-report` event so the "Remote machines…" section can show a
+/// "last synced: <commit>" line.
+#[derive(Clone, Serialize)]
+pub struct WorkerSyncReport {
+    pub project_id: String,
+    pub host_id: String,
+    /// The commit now on the worker's tracked tree (short sha), when known.
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub head: Option<String>,
+    pub ok: bool,
+    /// Nothing to do — the worker is already at HEAD, or the mirror has no commit.
+    pub skipped: bool,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub error: Option<String>,
+}
+
+/// Where a worker's durable `worker_sync.json` lives: under the project's slot in
+/// the local state dir, per host. Independent of the mirror so it survives a mirror
+/// relocation.
+fn worker_state_path(project_id: &str, host_id: &str) -> PathBuf {
+    storage::state_dir()
+        .join("remote-projects")
+        .join(project_id)
+        .join("workers")
+        .join(format!("{host_id}.json"))
+}
+
+/// The local scratch path for a worker's outbound bundle (beside its state file).
+fn local_bundle_path(project_id: &str, host_id: &str) -> PathBuf {
+    storage::state_dir()
+        .join("remote-projects")
+        .join(project_id)
+        .join("workers")
+        .join(format!("{host_id}.bundle"))
+}
+
+fn read_record(project_id: &str, host_id: &str) -> WorkerRecord {
+    let path = worker_state_path(project_id, host_id);
+    if path.exists() {
+        storage::read_json(&path).unwrap_or_default()
+    } else {
+        WorkerRecord::default()
+    }
+}
+
+fn write_record(project_id: &str, host_id: &str, rec: &WorkerRecord) {
+    let path = worker_state_path(project_id, host_id);
+    if let Some(parent) = path.parent() {
+        let _ = std::fs::create_dir_all(parent);
+    }
+    let _ = storage::write_json(&path, rec);
+}
+
+/// The mirror's current HEAD commit sha, or `None` when the mirror has no commit
+/// yet (unborn HEAD) or is unreadable.
+fn mirror_head(mirror: &Path) -> Option<String> {
+    let out = Peer::Local(mirror.to_path_buf())
+        .run(&["rev-parse", "--verify", "--quiet", "HEAD"])
+        .ok()?;
+    if !out.status.success() {
+        return None;
+    }
+    let sha = String::from_utf8_lossy(&out.stdout).trim().to_string();
+    if sha.is_empty() {
+        None
+    } else {
+        Some(sha)
+    }
+}
+
+/// Build the outbound bundle on the mirror. `exclude` (the worker's `last_head`)
+/// makes it a thin incremental bundle when the worker already has that commit.
+/// Returns `Ok(true)` for git's "Refusing to create empty bundle" — i.e. nothing to
+/// send — and `Ok(false)` when a bundle was written. Any other failure is `Err`.
+fn build_bundle(mirror: &Path, bundle_path: &Path, exclude: Option<&str>) -> Result<bool, String> {
+    if let Some(parent) = bundle_path.parent() {
+        let _ = std::fs::create_dir_all(parent);
+    }
+    let excludes: Vec<String> = exclude.map(|s| vec![s.to_string()]).unwrap_or_default();
+    let path_str = bundle_path.to_string_lossy().to_string();
+    // Positive is `HEAD` (a ref, not a raw sha — `git bundle` needs a ref name);
+    // excludes are rev-list args and may be raw shas.
+    let args = bundle_create_args(&path_str, &["HEAD"], &excludes);
+    let arg_refs: Vec<&str> = args.iter().map(String::as_str).collect();
+    let out = Peer::Local(mirror.to_path_buf()).run(&arg_refs)?;
+    if out.status.success() {
+        return Ok(false);
+    }
+    let stderr = String::from_utf8_lossy(&out.stderr);
+    if stderr.contains("Refusing to create empty bundle") {
+        return Ok(true); // worker already has HEAD — nothing to send
+    }
+    Err(format!("git bundle create failed: {}", stderr.trim()))
+}
+
+/// The constant worker-side script: init (idempotent), fetch the shipped bundle,
+/// then move the **tracked** tree to it. It **never** `git clean`s, so untracked
+/// experiment outputs survive; the bundle is removed after applying. Constant text
+/// (no interpolation), so it is safe to hand to `run_remote_script`.
+fn worker_apply_script() -> String {
+    format!(
+        "git init -q && \
+         git fetch -q --no-tags {bundle} && \
+         git -c advice.detachedHead=false reset -q --hard FETCH_HEAD && \
+         rm -f {bundle}",
+        bundle = WORKER_BUNDLE
+    )
+}
+
+/// Push the mirror's current HEAD to one worker's tracked tree (plan §2). `force`
+/// bypasses the "already at last_head" short-circuit (the manual "Sync code now").
+///
+/// Returns a [`WorkerSyncReport`]; it does **not** emit the event (the caller may
+/// batch a fan-out). Blocking git + async SFTP are interleaved, so this awaits.
+pub async fn sync_worker(
+    pool: &RemotePoolState,
+    project_id: &str,
+    host_id: &str,
+    force: bool,
+) -> WorkerSyncReport {
+    let report_err = |msg: String| WorkerSyncReport {
+        project_id: project_id.to_string(),
+        host_id: host_id.to_string(),
+        head: None,
+        ok: false,
+        skipped: false,
+        error: Some(msg),
+    };
+
+    if host_id == PRIMARY_HOST {
+        return report_err("primary is not a worker".to_string());
+    }
+    // A SHARED-FILESYSTEM worker sees the primary's project folder directly, so
+    // there is nothing to copy — and running git here would operate inside the
+    // primary's real working tree. Never sync it; report a no-op skip. This is a
+    // defensive guard (the connect path and `fan_out` already skip shared hosts),
+    // so even a stray `worker_sync_now` on one can do no harm.
+    if remote::compute_hosts_for(project_id)
+        .into_iter()
+        .any(|h| h.id == host_id && h.shared_fs)
+    {
+        return WorkerSyncReport {
+            project_id: project_id.to_string(),
+            host_id: host_id.to_string(),
+            head: None,
+            ok: true,
+            skipped: true,
+            error: None,
+        };
+    }
+    let Some(target) = remote::remote_target_for_host(project_id, host_id) else {
+        return report_err("unknown worker host".to_string());
+    };
+    let spec = target.spec;
+
+    let mirror = mirror_dir(project_id);
+    let Some(head) = mirror_head(&mirror) else {
+        // Nothing committed yet — a worker legitimately has no code to receive.
+        return WorkerSyncReport {
+            project_id: project_id.to_string(),
+            host_id: host_id.to_string(),
+            head: None,
+            ok: true,
+            skipped: true,
+            error: None,
+        };
+    };
+
+    let last_head = read_record(project_id, host_id).last_head;
+    if !force && last_head.as_deref() == Some(head.as_str()) {
+        return WorkerSyncReport {
+            project_id: project_id.to_string(),
+            host_id: host_id.to_string(),
+            head: Some(short_sha(&head)),
+            ok: true,
+            skipped: true,
+            error: None,
+        };
+    }
+
+    // Attempt an incremental bundle first (excluding the worker's last_head); on any
+    // apply failure — most likely a missing prerequisite because the worker's tree
+    // drifted from what we recorded — retry with a full bundle, which is always
+    // correct (merely larger).
+    let mut attempts: Vec<Option<String>> = Vec::new();
+    if let Some(last) = last_head.clone() {
+        attempts.push(Some(last));
+    }
+    attempts.push(None); // full bundle fallback (and first attempt when no last_head)
+
+    let mut last_err: Option<String> = None;
+    for exclude in attempts {
+        match push_once(pool, project_id, host_id, &spec, &mirror, exclude.as_deref()).await {
+            Ok(true) => {
+                // Empty bundle — worker already at HEAD. Record and finish.
+                write_record(project_id, host_id, &WorkerRecord { last_head: Some(head.clone()) });
+                return WorkerSyncReport {
+                    project_id: project_id.to_string(),
+                    host_id: host_id.to_string(),
+                    head: Some(short_sha(&head)),
+                    ok: true,
+                    skipped: true,
+                    error: None,
+                };
+            }
+            Ok(false) => {
+                write_record(project_id, host_id, &WorkerRecord { last_head: Some(head.clone()) });
+                return WorkerSyncReport {
+                    project_id: project_id.to_string(),
+                    host_id: host_id.to_string(),
+                    head: Some(short_sha(&head)),
+                    ok: true,
+                    skipped: false,
+                    error: None,
+                };
+            }
+            Err(e) => last_err = Some(e),
+        }
+    }
+    report_err(last_err.unwrap_or_else(|| "worker sync failed".to_string()))
+}
+
+/// One push attempt with a given `exclude`. `Ok(true)` = nothing to send (empty
+/// bundle); `Ok(false)` = applied on the worker; `Err` = build/ship/apply failure.
+async fn push_once(
+    pool: &RemotePoolState,
+    project_id: &str,
+    host_id: &str,
+    spec: &crate::schema::project::RemoteSpec,
+    mirror: &Path,
+    exclude: Option<&str>,
+) -> Result<bool, String> {
+    let bundle_path = local_bundle_path(project_id, host_id);
+
+    // 1. Build the bundle on the mirror (blocking git).
+    let mirror_owned = mirror.to_path_buf();
+    let bundle_owned = bundle_path.clone();
+    let exclude_owned = exclude.map(str::to_string);
+    let empty = tauri::async_runtime::spawn_blocking(move || {
+        build_bundle(&mirror_owned, &bundle_owned, exclude_owned.as_deref())
+    })
+    .await
+    .map_err(|e| e.to_string())??;
+    if empty {
+        return Ok(true);
+    }
+
+    // 2. Ensure the worker root exists and ship the bundle over its pooled SFTP.
+    let spec_for_mkdir = spec.clone();
+    tauri::async_runtime::spawn_blocking(move || ssh_exec::remote_mkdir_p(&spec_for_mkdir))
+        .await
+        .map_err(|e| e.to_string())?
+        .map_err(|e| format!("could not create worker dir: {e}"))?;
+
+    let remote_bundle = format!("{}/{}", spec.remote_path.trim_end_matches('/'), WORKER_BUNDLE);
+    let sftp = remote::pooled_sftp_host(pool, project_id, host_id)
+        .await
+        .ok_or_else(|| "worker not connected".to_string())?;
+    sftp::upload_file_streaming_on(&sftp, &bundle_path, &remote_bundle).await?;
+    let _ = std::fs::remove_file(&bundle_path);
+
+    // 3. Apply on the worker (blocking ssh). Tracked files only — never git clean.
+    let spec_for_apply = spec.clone();
+    let out = tauri::async_runtime::spawn_blocking(move || {
+        ssh_exec::run_remote_script(&spec_for_apply, &worker_apply_script())
+    })
+    .await
+    .map_err(|e| e.to_string())??;
+    if !out.status.success() {
+        return Err(format!(
+            "worker apply failed: {}",
+            String::from_utf8_lossy(&out.stderr).trim()
+        ));
+    }
+    Ok(false)
+}
+
+/// A short (7-char) sha for display, unchanged when already shorter.
+fn short_sha(sha: &str) -> String {
+    sha.chars().take(7).collect()
+}
+
+/// Whether a worker should receive the commit-triggered code fan-out. A
+/// **shared-filesystem** worker never does — it has no copy of its own (its tree IS
+/// the primary's, moved by the primary's own sync), and running git on it would
+/// operate inside the primary's real working tree. A **synced-copy** worker does,
+/// unless `sync_code` is unticked (manual-sync only). Pure, so it is unit-tested.
+fn wants_code_fanout(host: &crate::schema::project::ComputeHost) -> bool {
+    !host.shared_fs && host.sync_code
+}
+
+/// Fan out the current mirror HEAD to **every connected, `sync_code`** worker of a
+/// project, emitting a `worker-sync-report` per worker. The commit-trigger and
+/// manual "Push code to machines" entry point (plan §2 triggers). Best-effort per
+/// worker — one worker failing never blocks the others.
+pub async fn fan_out(
+    app: &AppHandle,
+    pool: &RemotePoolState,
+    state: &WorkerSyncState,
+    project_id: &str,
+    force: bool,
+) {
+    for host in remote::compute_hosts_for(project_id) {
+        if !wants_code_fanout(&host) {
+            continue;
+        }
+        if !remote::is_connected_host(pool, project_id, &host.id).await {
+            continue;
+        }
+        sync_worker_guarded(app, pool, state, project_id, &host.id, force).await;
+    }
+}
+
+/// One worker's fan-out with the in-flight lock + event emit. Skips silently if a
+/// sync to the same worker is already running.
+async fn sync_worker_guarded(
+    app: &AppHandle,
+    pool: &RemotePoolState,
+    state: &WorkerSyncState,
+    project_id: &str,
+    host_id: &str,
+    force: bool,
+) {
+    let key = format!("{project_id}\u{1}{host_id}");
+    {
+        let mut guard = state.lock().await;
+        if !guard.in_flight.insert(key.clone()) {
+            return; // already syncing this worker
+        }
+    }
+    let report = sync_worker(pool, project_id, host_id, force).await;
+    {
+        let mut guard = state.lock().await;
+        guard.in_flight.remove(&key);
+    }
+    let _ = app.emit("worker-sync-report", &report);
+}
+
+// ── Output pull-back (§4.4) — the ONLY worker→local byte path, user-initiated ──
+
+/// One untracked worker file (an experiment output): its byte size + repo-relative
+/// path. Parsed from the worker-side `ls-files --others` listing.
+#[derive(Clone, Serialize)]
+pub struct WorkerOutput {
+    pub rel: String,
+    pub bytes: u64,
+}
+
+/// A size preview of what a "Pull outputs" would fetch (plan §4.4 size-confirm): a
+/// worker's untracked (output) files never touched by the code sync.
+#[derive(Clone, Serialize)]
+pub struct WorkerOutputsPreview {
+    pub files: usize,
+    pub bytes: u64,
+}
+
+/// The result of a completed output pull: how many files landed, total bytes, the
+/// local destination folder, and any per-file errors (best-effort).
+#[derive(Clone, Serialize)]
+pub struct WorkerPullReport {
+    pub pulled: usize,
+    pub bytes: u64,
+    pub dest: String,
+    pub errors: Vec<String>,
+}
+
+/// The constant worker-side script listing untracked (output) files with sizes:
+/// `<bytes>\t<relpath>` per line. `git clean` is never run — this only *reads*.
+/// (A path containing a newline would split; experiment outputs effectively never
+/// do, and the tradeoff buys a one-round-trip listing.)
+fn outputs_list_script() -> &'static str {
+    "git ls-files --others --exclude-standard | while IFS= read -r f; do \
+       sz=$(stat -c %s \"$f\" 2>/dev/null || echo 0); \
+       printf '%s\\t%s\\n' \"$sz\" \"$f\"; \
+     done"
+}
+
+/// Parse the `<bytes>\t<relpath>` listing into [`WorkerOutput`]s. Pure. Skips
+/// blank/malformed lines and anything with a `..` segment or an absolute path (a
+/// download-target traversal guard).
+pub fn parse_outputs_listing(stdout: &str) -> Vec<WorkerOutput> {
+    stdout
+        .lines()
+        .filter_map(|line| {
+            let (size, rel) = line.split_once('\t')?;
+            let rel = rel.trim_end_matches('\r');
+            if rel.is_empty() || rel.starts_with('/') {
+                return None;
+            }
+            if rel.split(['/', '\\']).any(|seg| seg == "..") {
+                return None;
+            }
+            let bytes: u64 = size.trim().parse().ok()?;
+            Some(WorkerOutput { rel: rel.to_string(), bytes })
+        })
+        .collect()
+}
+
+/// The local folder a worker's pulled outputs land in: `outputs/<label>/` under the
+/// project's state slot. Deliberately NOT inside the git mirror (untracked bytes
+/// there would fall to byte-sync and could reach the primary).
+fn outputs_dest(project_id: &str, label: &str) -> PathBuf {
+    let safe: String = label
+        .chars()
+        .map(|c| if c.is_ascii_alphanumeric() || c == '-' || c == '_' { c } else { '-' })
+        .collect();
+    let safe = if safe.trim_matches('-').is_empty() { "worker".to_string() } else { safe };
+    storage::state_dir()
+        .join("remote-projects")
+        .join(project_id)
+        .join("outputs")
+        .join(safe)
+}
+
+/// List a worker's untracked output files (blocking ssh).
+async fn list_outputs(spec: &crate::schema::project::RemoteSpec) -> Result<Vec<WorkerOutput>, String> {
+    let spec = spec.clone();
+    let out = tauri::async_runtime::spawn_blocking(move || {
+        ssh_exec::run_remote_script(&spec, outputs_list_script())
+    })
+    .await
+    .map_err(|e| e.to_string())??;
+    if !out.status.success() {
+        return Err(format!(
+            "listing worker outputs failed: {}",
+            String::from_utf8_lossy(&out.stderr).trim()
+        ));
+    }
+    Ok(parse_outputs_listing(&String::from_utf8_lossy(&out.stdout)))
+}
+
+/// Preview the size of a worker's pullable outputs (plan §4.4 size-confirm).
+pub async fn preview_outputs(
+    project_id: &str,
+    host_id: &str,
+) -> Result<WorkerOutputsPreview, String> {
+    let target = remote::remote_target_for_host(project_id, host_id)
+        .ok_or_else(|| "unknown worker host".to_string())?;
+    let files = list_outputs(&target.spec).await?;
+    Ok(WorkerOutputsPreview {
+        files: files.len(),
+        bytes: files.iter().map(|f| f.bytes).sum(),
+    })
+}
+
+/// Pull a worker's untracked outputs into `outputs/<label>/` (plan §4.4). The one
+/// place worker→local bytes ever move, and only on this explicit call. Best-effort
+/// per file — one download failing never aborts the rest.
+pub async fn pull_outputs(
+    pool: &RemotePoolState,
+    project_id: &str,
+    host_id: &str,
+) -> Result<WorkerPullReport, String> {
+    let target = remote::remote_target_for_host(project_id, host_id)
+        .ok_or_else(|| "unknown worker host".to_string())?;
+    let spec = target.spec;
+    let label = remote::compute_hosts_for(project_id)
+        .into_iter()
+        .find(|h| h.id == host_id)
+        .map(|h| h.display_label().to_string())
+        .unwrap_or_else(|| host_id.to_string());
+
+    let files = list_outputs(&spec).await?;
+    let dest = outputs_dest(project_id, &label);
+    let _ = std::fs::create_dir_all(&dest);
+
+    let sftp = remote::pooled_sftp_host(pool, project_id, host_id)
+        .await
+        .ok_or_else(|| "worker not connected".to_string())?;
+    let root = spec.remote_path.trim_end_matches('/');
+
+    let mut pulled = 0usize;
+    let mut bytes = 0u64;
+    let mut errors = Vec::new();
+    for f in &files {
+        let remote_path = format!("{root}/{}", f.rel);
+        let local_path = dest.join(&f.rel);
+        match sftp::download_file_streaming_on(&sftp, &remote_path, &local_path).await {
+            Ok(()) => {
+                pulled += 1;
+                bytes += f.bytes;
+            }
+            Err(e) => errors.push(format!("{}: {e}", f.rel)),
+        }
+    }
+    Ok(WorkerPullReport {
+        pulled,
+        bytes,
+        dest: dest.to_string_lossy().into_owned(),
+        errors,
+    })
+}
+
+/// Kicked by `remote_connect` when a **worker** host connects: bring its tracked
+/// tree up to the current HEAD. Fire-and-forget from the connect path.
+pub async fn on_worker_connect(
+    app: AppHandle,
+    pool: RemotePoolState,
+    state: WorkerSyncState,
+    project_id: &str,
+    host_id: &str,
+) {
+    sync_worker_guarded(&app, &pool, &state, project_id, host_id, false).await;
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn worker_apply_script_never_cleans_and_resets_tracked() {
+        let s = worker_apply_script();
+        // The single load-bearing invariant (plan §8): the worker sync must NEVER
+        // `git clean` — that is what lets untracked experiment outputs survive.
+        assert!(!s.contains("clean"), "worker script must never git clean: {s}");
+        // It moves the TRACKED tree via reset --hard to the fetched HEAD.
+        assert!(s.contains("reset -q --hard FETCH_HEAD"));
+        assert!(s.contains("git fetch"));
+        assert!(s.contains("git init"));
+        // The bundle is a relative name (the script runs `cd <remote_path> && …`).
+        assert!(s.contains(WORKER_BUNDLE));
+        assert!(!WORKER_BUNDLE.starts_with('/'));
+    }
+
+    #[test]
+    fn parse_outputs_listing_skips_traversal_and_bad_lines() {
+        let stdout = "1024\tcheckpoints/model.bin\n\
+                      0\tlogs/run.log\n\
+                      \n\
+                      512\t../escape.txt\n\
+                      99\t/abs/path\n\
+                      notanumber\tfoo\n\
+                      2048\tnested/dir/weights.pt\r";
+        let out = parse_outputs_listing(stdout);
+        let rels: Vec<&str> = out.iter().map(|o| o.rel.as_str()).collect();
+        assert_eq!(rels, ["checkpoints/model.bin", "logs/run.log", "nested/dir/weights.pt"]);
+        assert_eq!(out[0].bytes, 1024);
+        assert_eq!(out[2].bytes, 2048); // trailing \r stripped from the path
+    }
+
+    #[test]
+    fn outputs_dest_sanitizes_label() {
+        let p = outputs_dest("proj1", "gpu-2/../etc");
+        // No traversal (or path separator) survives the label sanitizer, so the
+        // dest can never climb out of the project's outputs folder.
+        let s = p.to_string_lossy();
+        assert!(!s.contains(".."));
+        assert!(s.ends_with("gpu-2----etc"));
+        // An all-junk label falls back to "worker" rather than an empty segment.
+        assert!(outputs_dest("p", "///").to_string_lossy().ends_with("worker"));
+    }
+
+    #[test]
+    fn shared_fs_worker_is_never_fanned_out() {
+        use crate::schema::project::{ComputeHost, RemoteSpec};
+        let mk = |shared_fs: bool, sync_code: bool| ComputeHost {
+            id: "h1".into(),
+            sync_code,
+            pull_outputs: false,
+            shared_fs,
+            spec: RemoteSpec {
+                user: None,
+                host: "gpu-2".into(),
+                port: None,
+                remote_path: "/home/me/project".into(),
+                openvpn: None,
+                auto_connect: None,
+                key_auth: None,
+                persist_sessions: None,
+                label: None,
+                extra: Default::default(),
+            },
+        };
+        // A shared-filesystem host is NEVER synced — the load-bearing guard that
+        // keeps git off the primary's real working tree — regardless of sync_code.
+        assert!(!wants_code_fanout(&mk(true, true)));
+        assert!(!wants_code_fanout(&mk(true, false)));
+        // A synced-copy host is synced iff sync_code is on.
+        assert!(wants_code_fanout(&mk(false, true)));
+        assert!(!wants_code_fanout(&mk(false, false)));
+    }
+
+    #[test]
+    fn short_sha_truncates() {
+        assert_eq!(short_sha("0123456789abcdef"), "0123456");
+        assert_eq!(short_sha("abc"), "abc");
+    }
+
+    #[test]
+    fn build_bundle_makes_incremental_and_survives_untracked() {
+        // Drive a real mirror repo (like examples/lockstep_drv.rs): a commit, an
+        // untracked output file, then a bundle of HEAD. This proves `build_bundle`
+        // reports a non-empty bundle and that the untracked file is irrelevant to it
+        // (git bundle carries objects + HEAD only, never the worktree's untracked
+        // bytes — the read half of the "outputs survive" guarantee).
+        let tmp = std::env::temp_dir().join(format!("eldrun-ws-{}", std::process::id()));
+        let _ = std::fs::remove_dir_all(&tmp);
+        std::fs::create_dir_all(&tmp).unwrap();
+        let git = |args: &[&str]| {
+            Peer::Local(tmp.clone()).run(args).unwrap()
+        };
+        assert!(git(&["init", "-q"]).status.success());
+        let _ = git(&["config", "user.email", "t@e"]);
+        let _ = git(&["config", "user.name", "t"]);
+        std::fs::write(tmp.join("code.txt"), b"v1").unwrap();
+        assert!(git(&["add", "code.txt"]).status.success());
+        assert!(git(&["commit", "-q", "-m", "c1"]).status.success());
+        // An untracked experiment output — must never appear in the bundle.
+        std::fs::write(tmp.join("checkpoint.bin"), b"weights").unwrap();
+
+        let head = mirror_head(&tmp).expect("committed HEAD");
+        assert!(!head.is_empty());
+        let bundle = tmp.join("out.bundle");
+        let empty = build_bundle(&tmp, &bundle, None).expect("bundle builds");
+        assert!(!empty, "a fresh commit is not an empty bundle");
+        assert!(bundle.exists());
+        // A re-bundle excluding HEAD itself is empty ("nothing new to send").
+        let empty2 = build_bundle(&tmp, &tmp.join("out2.bundle"), Some(&head)).expect("ok");
+        assert!(empty2, "excluding HEAD yields an empty (already-synced) bundle");
+
+        let _ = std::fs::remove_dir_all(&tmp);
+    }
+}
diff --git a/src-tauri/src/sysstat.rs b/src-tauri/src/sysstat.rs
index 70aba8d..93eb44a 100644
--- a/src-tauri/src/sysstat.rs
+++ b/src-tauri/src/sysstat.rs
@@ -46,6 +46,27 @@ pub struct ProcSample {
     pub rss_kib: u64,
     pub cpu_jiffies: u64,
     pub threads: u32,
+    /// Owning user's name, resolved from the machine's own passwd database
+    /// (`/etc/passwd` locally, `getent passwd` on a remote host) so the pane can
+    /// group the process table by user — the same per-user "who's loading the
+    /// host" statistic the connect-time usage dialog shows. Empty when the
+    /// backend can't resolve an owner (Windows/macOS, an unmapped uid), which the
+    /// frontend reads as "no per-user data" and hides the section. An unmapped
+    /// uid falls back to `#<uid>` rather than an empty string.
+    #[serde(default)]
+    pub user: String,
+}
+
+/// One interactive login session on the sampled host, from `who`. Mirrors the
+/// connect-time remote-usage dialog's `UserSession`: `user` is the login name,
+/// `tty` the terminal, `detail` the rest of the `who` line verbatim (login time,
+/// origin `(host)`). Populated **only on the remote path** — the local pane never
+/// shows the "Logged in" panel, since local sampling is always just this user.
+#[derive(Serialize, Clone, Default)]
+pub struct LoginSession {
+    pub user: String,
+    pub tty: String,
+    pub detail: String,
 }
 
 /// A single whole-system sample backing the htop-like monitor pane. Everything
@@ -67,6 +88,33 @@ pub struct SystemSnapshot {
     pub load_avg: [f64; 3],
     pub uptime_secs: f64,
     pub processes: Vec<ProcSample>,
+    /// Every GPU the machine will report memory for; empty when none can be read
+    /// (macOS, an Intel-only box, no `nvidia-smi`). See [`crate::gpustat`].
+    pub gpus: Vec<crate::gpustat::GpuSample>,
+    /// Per-process GPU memory. Populated only on the **remote** path (sampled on
+    /// the host alongside the snapshot); the local pane fills it from the dedicated
+    /// `gpu_process_snapshot` command instead, so this stays empty locally.
+    #[serde(default)]
+    pub gpu_procs: Vec<crate::gpustat::GpuProc>,
+    /// Whole-package CPU temperature in °C, when a CPU hwmon sensor exposes one
+    /// (`coretemp` on Intel, `k10temp`/`zenpower` on AMD Zen). `None` when no such
+    /// sensor is present, or on a backend that can't read one (Windows/macOS/other)
+    /// — never a fake zero, matching the GPU sensors.
+    #[serde(default)]
+    pub cpu_temp_c: Option<f64>,
+    /// Hottest DIMM temperature in °C, when the board exposes an on-module thermal
+    /// sensor (`jc42` on DDR3/DDR4, `spd5118` on DDR5). The *max* across modules, so
+    /// it reads as "how hot is memory". `None` when no such sensor is present (most
+    /// desktops don't wire one) or the backend can't read one — never a fake zero.
+    #[serde(default)]
+    pub mem_temp_c: Option<f64>,
+    /// Interactive login sessions on the host (from `who`), backing the pane's
+    /// "Logged in" panel — the same per-user session view the connect-time
+    /// remote-usage dialog shows. Populated only on the **remote** path; empty
+    /// locally (the panel is remote-only, since local sampling is always just this
+    /// user, so it would be a single trivial row).
+    #[serde(default)]
+    pub sessions: Vec<LoginSession>,
 }
 
 /// Generation counter bumped whenever a PTY is spawned or dies (see
@@ -202,17 +250,25 @@ pub fn cmdline(pid: u32) -> Option<String> {
 /// A whole-system sample (all processes + per-core CPU + memory/load) for the
 /// htop-like monitor pane. Delegates to the per-OS backend; non-`/proc` targets
 /// return `SystemSnapshot { supported: false, .. }`.
+///
+/// The GPUs are stapled on here rather than inside each backend: they are read
+/// from a different place entirely ([`crate::gpustat`] — DRM sysfs or
+/// `nvidia-smi`, both of which have their own per-OS story) and an empty list is
+/// a legitimate answer on every platform, including a supported one.
 pub fn system_snapshot() -> SystemSnapshot {
-    platform::system_snapshot()
+    let mut snapshot = platform::system_snapshot();
+    snapshot.gpus = crate::gpustat::snapshot();
+    snapshot
 }
 
-// ── Pure `/proc` parsers (Linux; compiled under test on any OS) ──────────────
+// ── Pure `/proc` parsers ─────────────────────────────────────────────────────
 // Factored out of the Linux backend so they can be unit-tested from string
-// fixtures without a live `/proc`.
+// fixtures without a live `/proc`. Compiled on *every* host OS (not just Linux)
+// because `parse_remote_snapshot` reuses them to parse a remote Linux host's
+// `/proc` fetched over SSH — the host is Linux even when this machine is not.
 
 /// Parse one `cpu`/`cpuN` line of `/proc/stat` into cumulative busy/total ticks.
 /// `total` is the sum of every column; `busy = total − idle − iowait`.
-#[cfg(any(target_os = "linux", test))]
 fn parse_cpu_line(line: &str) -> Option<CpuTimes> {
     let mut it = line.split_whitespace();
     it.next()?; // "cpu" / "cpuN" label
@@ -231,7 +287,6 @@ fn parse_cpu_line(line: &str) -> Option<CpuTimes> {
 
 /// Parse `/proc/stat` into (aggregate, per-core) cumulative CPU times. The
 /// aggregate is the `cpu ` line; each `cpuN` line is one core, in order.
-#[cfg(any(target_os = "linux", test))]
 fn parse_cpu_stat(content: &str) -> (CpuTimes, Vec<CpuTimes>) {
     let mut agg = CpuTimes::default();
     let mut per_core = Vec::new();
@@ -258,7 +313,6 @@ fn parse_cpu_stat(content: &str) -> (CpuTimes, Vec<CpuTimes>) {
 
 /// Extract (MemTotal, MemAvailable, SwapTotal, SwapFree) from `/proc/meminfo`,
 /// all in KiB. Missing keys default to 0.
-#[cfg(any(target_os = "linux", test))]
 fn parse_meminfo(content: &str) -> (u64, u64, u64, u64) {
     let get = |key: &str| -> u64 {
         content
@@ -277,7 +331,6 @@ fn parse_meminfo(content: &str) -> (u64, u64, u64, u64) {
 }
 
 /// First three floats of `/proc/loadavg` (1/5/15-minute load averages).
-#[cfg(any(target_os = "linux", test))]
 fn parse_loadavg(content: &str) -> [f64; 3] {
     let mut it = content.split_whitespace();
     let mut next = || it.next().and_then(|v| v.parse::<f64>().ok()).unwrap_or(0.0);
@@ -289,7 +342,6 @@ fn parse_loadavg(content: &str) -> [f64; 3] {
 /// contain spaces/parens, so fields are indexed *after* the last `)`:
 /// index 0 = state (field 3), 1 = ppid (field 4), 11 = utime (14),
 /// 12 = stime (15), 17 = num_threads (20).
-#[cfg(any(target_os = "linux", test))]
 fn parse_pid_stat(content: &str) -> Option<(String, String, u32, u64, u32)> {
     let open = content.find('(')?;
     let close = content.rfind(')')?;
@@ -303,6 +355,477 @@ fn parse_pid_stat(content: &str) -> Option<(String, String, u32, u64, u32)> {
     Some((comm, state, ppid, utime + stime, threads))
 }
 
+/// Parse `getent passwd` / `/etc/passwd` content into a uid → username map. Each
+/// line is `name:passwd:uid:gid:gecos:home:shell`; only `name` (field 0) and
+/// `uid` (field 2) are read, malformed lines skipped. The *first* name wins when
+/// two entries share a uid (a deliberate alias), so the mapping is stable.
+fn parse_passwd(content: &str) -> HashMap<u32, String> {
+    let mut map: HashMap<u32, String> = HashMap::new();
+    for line in content.lines() {
+        let mut it = line.split(':');
+        let name = it.next().unwrap_or("");
+        let _passwd = it.next();
+        let Some(uid) = it.next().and_then(|s| s.trim().parse::<u32>().ok()) else {
+            continue;
+        };
+        if !name.is_empty() {
+            map.entry(uid).or_insert_with(|| name.to_string());
+        }
+    }
+    map
+}
+
+/// Resolve a numeric uid to a display name via a passwd map, falling back to
+/// `#<uid>` for a uid the map doesn't cover (an NSS-only account the file walk
+/// missed, or a process whose owner was removed) rather than an empty string.
+fn username_for(uid: u32, map: &HashMap<u32, String>) -> String {
+    map.get(&uid)
+        .cloned()
+        .unwrap_or_else(|| format!("#{uid}"))
+}
+
+/// Parse `who` output into one [`LoginSession`] per non-blank line. Each line is
+/// `user  tty  <login-time> (<origin>)`; the first two whitespace fields are the
+/// user and tty, everything after is kept verbatim as `detail`. Matches
+/// `services::remote_usage::parse_who` so the pane's "Logged in" panel reads
+/// identically to the connect-time dialog's.
+fn parse_who(content: &str) -> Vec<LoginSession> {
+    content
+        .lines()
+        .filter(|l| !l.trim().is_empty())
+        .filter_map(|l| {
+            let mut parts = l.split_whitespace();
+            let user = parts.next()?.to_string();
+            let tty = parts.next().unwrap_or("").to_string();
+            let detail = parts.collect::<Vec<_>>().join(" ");
+            Some(LoginSession { user, tty, detail })
+        })
+        .collect()
+}
+
+/// hwmon `name` values that identify a CPU **package** temperature sensor: Intel
+/// exposes `coretemp`, AMD Zen `k10temp` (or the out-of-tree `zenpower`), some
+/// ARM/embedded boards `cpu_thermal`. Anything else (a GPU's `amdgpu`, a
+/// mainboard SuperIO chip, an NVMe drive) is deliberately excluded — a wrong
+/// sensor reported as "CPU" is worse than reporting none.
+fn is_cpu_hwmon(name: &str) -> bool {
+    matches!(name.trim(), "coretemp" | "k10temp" | "zenpower" | "cpu_thermal")
+}
+
+/// hwmon `name` values that identify an on-DIMM **memory** temperature sensor:
+/// `jc42` (the JEDEC JC42.4 sensor on DDR3/DDR4 modules) and `spd5118` (the DDR5
+/// SPD-hub temperature sensor). One hwmon appears per populated module that has
+/// one, so the reader takes the *hottest*. Anything else is excluded — a
+/// mainboard/SuperIO channel mislabelled as memory would be worse than none.
+fn is_mem_hwmon(name: &str) -> bool {
+    matches!(name.trim(), "jc42" | "spd5118")
+}
+
+/// Choose the reading that best represents the whole CPU package from one hwmon's
+/// temperature channels, each a `(label, milli_celsius)` pair. Prefers an explicit
+/// package/control label — `Package id 0` (Intel `coretemp`), `Tctl`/`Tdie` (AMD
+/// `k10temp`) — over a per-core channel; failing that, the first channel
+/// (`temp1_input`), which is the package on a single-channel sensor. Returns °C
+/// (millidegrees ÷ 1000), or `None` when there are no channels.
+fn pick_cpu_temp(channels: &[(Option<String>, f64)]) -> Option<f64> {
+    let preferred = channels.iter().find(|(label, _)| {
+        label.as_deref().is_some_and(|l| {
+            let l = l.trim();
+            l.starts_with("Package") || l == "Tctl" || l == "Tdie"
+        })
+    });
+    preferred
+        .or_else(|| channels.first())
+        .map(|(_, milli)| milli / 1000.0)
+}
+
+// ── Remote (`ssh`) whole-system snapshot ────────────────────────────────────
+// A remote project's System Monitor reads the *host's* `/proc` over the shared
+// ControlMaster, exactly as the Disk Usage pane reads the host's `du`. The
+// snapshot shape is identical to the local one, so the frontend pane needs no
+// per-source branch — only the pure parsers above, fed the host's `/proc` bytes.
+
+/// POSIX-`sh` script run on the host (via `services::ssh_exec::run_remote_script`)
+/// to capture one whole-system sample from its `/proc`.
+///
+/// **Constant** — `run_remote_script` embeds it verbatim (no quoting), so nothing
+/// may be interpolated in; the only variable in that call is the `cd`-target
+/// `remote_path`, which it quotes and which this script ignores. Output is
+/// line-oriented and consumed by [`parse_remote_snapshot`]: a `CLK` line, then the
+/// `@SECTION@` blocks carrying the raw kernel files verbatim. `@GPU@` carries the
+/// host's GPUs — `NVSMI`/`NVPROC` lines are the `nvidia-smi` CSV verbatim (reusing
+/// the same parsers as the local read), and `AMD\t<card>\t<key>\t<value>` lines
+/// ship one DRM sysfs file each so `parse_drm_card` runs unchanged on them. The
+/// `@WHO@` block carries the host's `who` output verbatim for the pane's "Logged
+/// in" panel ([`parse_who`]). The
+/// `@PASSWD@` block ships the host's `getent passwd` (or `/etc/passwd`) verbatim so
+/// [`parse_passwd`] can map each process's owner uid to a name on the *host's*
+/// account database, not this machine's. Under `@PROCS@` comes one `S`/`U`/`R`/`C`
+/// quad per process (the raw `/proc/<pid>/stat` line, its owner uid from
+/// `/proc/<pid>/status`, its `VmRSS` in KiB, and its NUL-flattened cmdline).
+/// cmdline NULs become spaces so every field stays on one line, which is what lets
+/// the parser split on line prefixes alone.
+pub const REMOTE_SNAPSHOT_SCRIPT: &str = r#"
+printf 'CLK\t%s\n' "$(getconf CLK_TCK 2>/dev/null || echo 100)"
+printf '@STAT@\n'; cat /proc/stat 2>/dev/null
+printf '@MEM@\n'; cat /proc/meminfo 2>/dev/null
+printf '@LOAD@\n'; cat /proc/loadavg 2>/dev/null
+printf '@UP@\n'; cat /proc/uptime 2>/dev/null
+printf '@WHO@\n'; who 2>/dev/null
+printf '@GPU@\n'
+if command -v nvidia-smi >/dev/null 2>&1; then
+  nvidia-smi --query-gpu=name,memory.used,memory.total,utilization.gpu,temperature.gpu,power.draw,power.limit,clocks.sm,clocks.mem,fan.speed,driver_version,pcie.link.gen.current,pcie.link.width.current --format=csv,noheader,nounits 2>/dev/null | sed 's/^/NVSMI\t/'
+  nvidia-smi --query-compute-apps=pid,process_name,used_memory --format=csv,noheader,nounits 2>/dev/null | sed 's/^/NVPROC\t/'
+fi
+for c in /sys/class/drm/card[0-9]*; do
+  d="$c/device"
+  [ -r "$d/mem_info_vram_total" ] || continue
+  i=${c##*/}; i=${i#card}
+  h=$(ls -d "$d"/hwmon/hwmon* 2>/dev/null | head -n1)
+  printf 'AMD\t%s\tdriver\t%s\n' "$i" "$(sed -n 's/^DRIVER=//p' "$d/uevent" 2>/dev/null)"
+  printf 'AMD\t%s\tvendor\t%s\n' "$i" "$(cat "$d/vendor" 2>/dev/null)"
+  printf 'AMD\t%s\tdevice\t%s\n' "$i" "$(cat "$d/device" 2>/dev/null)"
+  printf 'AMD\t%s\tvram_used\t%s\n' "$i" "$(cat "$d/mem_info_vram_used" 2>/dev/null)"
+  printf 'AMD\t%s\tvram_total\t%s\n' "$i" "$(cat "$d/mem_info_vram_total" 2>/dev/null)"
+  printf 'AMD\t%s\tgtt_used\t%s\n' "$i" "$(cat "$d/mem_info_gtt_used" 2>/dev/null)"
+  printf 'AMD\t%s\tgtt_total\t%s\n' "$i" "$(cat "$d/mem_info_gtt_total" 2>/dev/null)"
+  printf 'AMD\t%s\tbusy\t%s\n' "$i" "$(cat "$d/gpu_busy_percent" 2>/dev/null)"
+  printf 'AMD\t%s\tsclk\t%s\n' "$i" "$(grep '\*' "$d/pp_dpm_sclk" 2>/dev/null | head -n1)"
+  printf 'AMD\t%s\tmclk\t%s\n' "$i" "$(grep '\*' "$d/pp_dpm_mclk" 2>/dev/null | head -n1)"
+  printf 'AMD\t%s\tlink_speed\t%s\n' "$i" "$(cat "$d/current_link_speed" 2>/dev/null)"
+  printf 'AMD\t%s\tlink_width\t%s\n' "$i" "$(cat "$d/current_link_width" 2>/dev/null)"
+  printf 'AMD\t%s\ttemp\t%s\n' "$i" "$(cat "$h/temp1_input" 2>/dev/null)"
+  printf 'AMD\t%s\tpower\t%s\n' "$i" "$(cat "$h/power1_average" 2>/dev/null || cat "$h/power1_input" 2>/dev/null)"
+  printf 'AMD\t%s\tpower_cap\t%s\n' "$i" "$(cat "$h/power1_cap" 2>/dev/null)"
+  printf 'AMD\t%s\tpwm\t%s\n' "$i" "$(cat "$h/pwm1" 2>/dev/null)"
+  printf 'AMD\t%s\tpwm_max\t%s\n' "$i" "$(cat "$h/pwm1_max" 2>/dev/null)"
+done
+printf '@CPUTEMP@\n'
+for h in /sys/class/hwmon/hwmon*; do
+  n=$(cat "$h/name" 2>/dev/null)
+  case "$n" in coretemp|k10temp|zenpower|cpu_thermal) ;; *) continue ;; esac
+  for t in "$h"/temp*_input; do
+    [ -r "$t" ] || continue
+    printf 'T\t%s\t%s\n' "$(cat "${t%_input}_label" 2>/dev/null)" "$(cat "$t" 2>/dev/null)"
+  done
+done
+printf '@MEMTEMP@\n'
+for h in /sys/class/hwmon/hwmon*; do
+  n=$(cat "$h/name" 2>/dev/null)
+  case "$n" in jc42|spd5118) ;; *) continue ;; esac
+  printf 'M\t%s\n' "$(cat "$h/temp1_input" 2>/dev/null)"
+done
+printf '@PASSWD@\n'; getent passwd 2>/dev/null || cat /etc/passwd 2>/dev/null
+printf '@PROCS@\n'
+for d in /proc/[0-9]*; do
+  [ -r "$d/stat" ] || continue
+  s=$(cat "$d/stat" 2>/dev/null) || continue
+  [ -n "$s" ] || continue
+  ru=$(awk '/^Uid:/{u=$2} /^VmRSS:/{r=$2} END{print (u==""?0:u)" "(r==""?0:r)}' "$d/status" 2>/dev/null)
+  u=${ru%% *}; r=${ru##* }
+  c=$(tr '\0' ' ' < "$d/cmdline" 2>/dev/null)
+  printf 'S\t%s\n' "$s"
+  printf 'U\t%s\n' "${u:-0}"
+  printf 'R\t%s\n' "${r:-0}"
+  printf 'C\t%s\n' "$c"
+done
+"#;
+
+/// Assemble a [`SystemSnapshot`] from the output of [`REMOTE_SNAPSHOT_SCRIPT`],
+/// reusing the same pure `/proc` parsers the local Linux backend uses. `supported`
+/// is always `true` (the host is assumed Linux; a host with no `/proc` simply
+/// yields zeroed CPU/memory and an empty process table). The `@GPU@` block is fed
+/// through the very same `gpustat` parsers as the local read, so a host GPU shows
+/// with the same memory/sensor detail; `gpu_procs` carries the host's per-process
+/// GPU memory (NVIDIA only — the AMD `fdinfo` walk is local-only, too heavy to run
+/// per remote poll).
+pub fn parse_remote_snapshot(raw: &str) -> SystemSnapshot {
+    use std::collections::BTreeMap;
+    enum Sec {
+        None,
+        Stat,
+        Mem,
+        Load,
+        Up,
+        Who,
+        Gpu,
+        CpuTemp,
+        MemTemp,
+        Passwd,
+        Procs,
+    }
+    let mut sec = Sec::None;
+    let mut clk: u64 = 100;
+    let mut stat_buf = String::new();
+    let mut mem_buf = String::new();
+    let mut load_buf = String::new();
+    let mut up_buf = String::new();
+    let mut who_buf = String::new();
+    // The host's passwd db (shipped under @PASSWD@), accumulated then parsed into a
+    // uid → name map the instant @PROCS@ starts — fully built before any process
+    // line, so `flush` can resolve each owner immediately.
+    let mut passwd_buf = String::new();
+    let mut uid_to_name: HashMap<u32, String> = HashMap::new();
+    let mut processes: Vec<ProcSample> = Vec::new();
+    // GPU accumulators: the `nvidia-smi` CSV rebuilt line-by-line for its parsers,
+    // and one `DrmFiles` per AMD card index assembled from its shipped sysfs files.
+    let mut nvsmi = String::new();
+    let mut nvproc = String::new();
+    let mut amd_cards: BTreeMap<u32, crate::gpustat::DrmFiles> = BTreeMap::new();
+    // CPU hwmon channels shipped as `T\t<label>\t<milli_celsius>` under @CPUTEMP@.
+    let mut cpu_temp_channels: Vec<(Option<String>, f64)> = Vec::new();
+    // Hottest DIMM temp in °C, from `M\t<milli>` lines under @MEMTEMP@ (one per module).
+    let mut mem_temp_c: Option<f64> = None;
+
+    // A process is assembled from its consecutive S/U/R/C lines; `flush` finalizes
+    // the pending one when the next `S` arrives (or at end of input).
+    let mut p_stat: Option<String> = None;
+    let mut p_uid: Option<u32> = None;
+    let mut p_rss: u64 = 0;
+    let mut p_cmd: Option<String> = None;
+
+    fn flush(
+        processes: &mut Vec<ProcSample>,
+        p_stat: &mut Option<String>,
+        p_uid: &mut Option<u32>,
+        p_rss: &mut u64,
+        p_cmd: &mut Option<String>,
+        uid_to_name: &HashMap<u32, String>,
+    ) {
+        if let Some(line) = p_stat.take() {
+            if let Some((comm, state, ppid, cpu_jiffies, threads)) = parse_pid_stat(&line) {
+                // The pid is field 1 of the stat line, before `(comm)`.
+                let pid = line
+                    .trim_start()
+                    .split('(')
+                    .next()
+                    .and_then(|p| p.trim().parse::<u32>().ok())
+                    .unwrap_or(0);
+                let cmdline = p_cmd
+                    .take()
+                    .filter(|c| !c.trim().is_empty())
+                    .unwrap_or_else(|| format!("[{comm}]"));
+                // An owner uid the host didn't report (unreadable status) leaves the
+                // user empty rather than mislabelling it `#0` (root).
+                let user = p_uid
+                    .take()
+                    .map(|uid| username_for(uid, uid_to_name))
+                    .unwrap_or_default();
+                processes.push(ProcSample {
+                    pid,
+                    ppid,
+                    comm,
+                    cmdline,
+                    state,
+                    rss_kib: *p_rss,
+                    cpu_jiffies,
+                    threads,
+                    user,
+                });
+            }
+        }
+        *p_uid = None;
+        *p_rss = 0;
+        *p_cmd = None;
+    }
+
+    for line in raw.lines() {
+        match line {
+            "@STAT@" => {
+                sec = Sec::Stat;
+                continue;
+            }
+            "@MEM@" => {
+                sec = Sec::Mem;
+                continue;
+            }
+            "@LOAD@" => {
+                sec = Sec::Load;
+                continue;
+            }
+            "@UP@" => {
+                sec = Sec::Up;
+                continue;
+            }
+            "@WHO@" => {
+                sec = Sec::Who;
+                continue;
+            }
+            "@GPU@" => {
+                sec = Sec::Gpu;
+                continue;
+            }
+            "@CPUTEMP@" => {
+                sec = Sec::CpuTemp;
+                continue;
+            }
+            "@MEMTEMP@" => {
+                sec = Sec::MemTemp;
+                continue;
+            }
+            "@PASSWD@" => {
+                sec = Sec::Passwd;
+                continue;
+            }
+            "@PROCS@" => {
+                // @PASSWD@ has fully arrived by now (it precedes @PROCS@), so parse
+                // it into the uid → name map before the first process line.
+                uid_to_name = parse_passwd(&passwd_buf);
+                sec = Sec::Procs;
+                continue;
+            }
+            _ => {}
+        }
+        if let Some(rest) = line.strip_prefix("CLK\t") {
+            if let Ok(v) = rest.trim().parse::<u64>() {
+                if v > 0 {
+                    clk = v;
+                }
+            }
+            continue;
+        }
+        match sec {
+            Sec::Stat => {
+                stat_buf.push_str(line);
+                stat_buf.push('\n');
+            }
+            Sec::Mem => {
+                mem_buf.push_str(line);
+                mem_buf.push('\n');
+            }
+            Sec::Load => {
+                load_buf.push_str(line);
+                load_buf.push('\n');
+            }
+            Sec::Up => {
+                up_buf.push_str(line);
+                up_buf.push('\n');
+            }
+            Sec::Who => {
+                who_buf.push_str(line);
+                who_buf.push('\n');
+            }
+            Sec::Gpu => {
+                if let Some(rest) = line.strip_prefix("NVSMI\t") {
+                    nvsmi.push_str(rest);
+                    nvsmi.push('\n');
+                } else if let Some(rest) = line.strip_prefix("NVPROC\t") {
+                    nvproc.push_str(rest);
+                    nvproc.push('\n');
+                } else if let Some(rest) = line.strip_prefix("AMD\t") {
+                    // `<index>\t<key>\t<value>`; an empty value = a file the host
+                    // didn't expose, so skip it rather than store a blank.
+                    let mut it = rest.splitn(3, '\t');
+                    if let (Some(idx), Some(key), Some(val)) = (it.next(), it.next(), it.next()) {
+                        if !val.is_empty() {
+                            if let Ok(idx) = idx.parse::<u32>() {
+                                crate::gpustat::set_drm_field(
+                                    amd_cards.entry(idx).or_default(),
+                                    key,
+                                    val,
+                                );
+                            }
+                        }
+                    }
+                }
+            }
+            Sec::CpuTemp => {
+                // `T\t<label>\t<milli>`; an empty label ⇒ no `tempN_label` file,
+                // an empty/garbage value ⇒ a channel the host couldn't read (skip).
+                if let Some(rest) = line.strip_prefix("T\t") {
+                    let mut it = rest.splitn(2, '\t');
+                    let label = it.next().unwrap_or("").trim();
+                    if let Some(milli) = it.next().and_then(|v| v.trim().parse::<f64>().ok()) {
+                        let label = (!label.is_empty()).then(|| label.to_string());
+                        cpu_temp_channels.push((label, milli));
+                    }
+                }
+            }
+            Sec::MemTemp => {
+                // `M\t<milli>`; keep the hottest module, skipping blanks/garbage.
+                if let Some(rest) = line.strip_prefix("M\t") {
+                    if let Ok(milli) = rest.trim().parse::<f64>() {
+                        let c = milli / 1000.0;
+                        mem_temp_c = Some(mem_temp_c.map_or(c, |h| h.max(c)));
+                    }
+                }
+            }
+            Sec::Passwd => {
+                passwd_buf.push_str(line);
+                passwd_buf.push('\n');
+            }
+            Sec::Procs => {
+                if let Some(rest) = line.strip_prefix("S\t") {
+                    flush(
+                        &mut processes,
+                        &mut p_stat,
+                        &mut p_uid,
+                        &mut p_rss,
+                        &mut p_cmd,
+                        &uid_to_name,
+                    );
+                    p_stat = Some(rest.to_string());
+                } else if let Some(rest) = line.strip_prefix("U\t") {
+                    p_uid = rest.trim().parse().ok();
+                } else if let Some(rest) = line.strip_prefix("R\t") {
+                    p_rss = rest.trim().parse().unwrap_or(0);
+                } else if let Some(rest) = line.strip_prefix("C\t") {
+                    p_cmd = Some(rest.to_string());
+                }
+            }
+            Sec::None => {}
+        }
+    }
+    flush(
+        &mut processes,
+        &mut p_stat,
+        &mut p_uid,
+        &mut p_rss,
+        &mut p_cmd,
+        &uid_to_name,
+    );
+
+    let (cpu, per_core) = parse_cpu_stat(&stat_buf);
+    let (mem_total_kib, mem_available_kib, swap_total_kib, swap_free_kib) = parse_meminfo(&mem_buf);
+    let load_avg = parse_loadavg(&load_buf);
+    let uptime_secs = up_buf
+        .split_whitespace()
+        .next()
+        .and_then(|v| v.parse::<f64>().ok())
+        .unwrap_or(0.0);
+
+    // AMD cards (via the shared `parse_drm_card`) then NVIDIA (via the shared
+    // `parse_nvidia_smi`), so the host reading matches the local one field-for-field.
+    let mut gpus: Vec<crate::gpustat::GpuSample> = amd_cards
+        .into_iter()
+        .filter_map(|(idx, files)| crate::gpustat::parse_drm_card(idx, &files))
+        .collect();
+    gpus.extend(crate::gpustat::parse_nvidia_smi(&nvsmi));
+    let gpu_procs = crate::gpustat::parse_nvidia_apps(&nvproc);
+    let cpu_temp_c = pick_cpu_temp(&cpu_temp_channels);
+    let sessions = parse_who(&who_buf);
+
+    SystemSnapshot {
+        supported: true,
+        clk_tck: clk,
+        num_cores: per_core.len() as u32,
+        cpu,
+        per_core,
+        mem_total_kib,
+        mem_available_kib,
+        swap_total_kib,
+        swap_free_kib,
+        load_avg,
+        uptime_secs,
+        processes,
+        gpus,
+        gpu_procs,
+        cpu_temp_c,
+        mem_temp_c,
+        sessions,
+    }
+}
+
 // ── Pure Windows decoders (compiled under test on any OS) ───────────────────
 // Factored out of the Windows backend so they can be unit-tested from byte
 // fixtures without a live Win32 (pattern: the `/proc` parsers above).
@@ -480,11 +1003,74 @@ mod platform {
         }
     }
 
+    /// Whole-package CPU temperature in °C from the first CPU hwmon that exposes
+    /// one, or `None`. Scans `/sys/class/hwmon/hwmon*`, matches the sensor by its
+    /// `name` ([`super::is_cpu_hwmon`]), reads every `tempN_input` with its optional
+    /// `tempN_label`, and lets [`super::pick_cpu_temp`] choose the package channel.
+    /// No tool spawn and no root — the same cheap sysfs read the GPU sensors use.
+    pub fn cpu_temp_c() -> Option<f64> {
+        for entry in fs::read_dir("/sys/class/hwmon").ok()?.flatten() {
+            let base = entry.path();
+            let name = fs::read_to_string(base.join("name")).unwrap_or_default();
+            if !super::is_cpu_hwmon(&name) {
+                continue;
+            }
+            let mut channels: Vec<(Option<String>, f64)> = Vec::new();
+            for i in 1..=32u32 {
+                let Ok(raw) = fs::read_to_string(base.join(format!("temp{i}_input"))) else {
+                    continue;
+                };
+                let Ok(milli) = raw.trim().parse::<f64>() else {
+                    continue;
+                };
+                let label = fs::read_to_string(base.join(format!("temp{i}_label")))
+                    .ok()
+                    .map(|s| s.trim().to_string());
+                channels.push((label, milli));
+            }
+            if let Some(t) = super::pick_cpu_temp(&channels) {
+                return Some(t);
+            }
+        }
+        None
+    }
+
+    /// Hottest DIMM temperature in °C across every on-module memory sensor
+    /// (`jc42`/`spd5118`, one hwmon per populated module), or `None` when the board
+    /// exposes none. `temp1_input` is the module's only channel. Same cheap sysfs
+    /// read the CPU/GPU sensors use — no tool spawn, no root.
+    pub fn mem_temp_c() -> Option<f64> {
+        let mut hottest: Option<f64> = None;
+        for entry in fs::read_dir("/sys/class/hwmon").ok()?.flatten() {
+            let base = entry.path();
+            let name = fs::read_to_string(base.join("name")).unwrap_or_default();
+            if !super::is_mem_hwmon(&name) {
+                continue;
+            }
+            let Ok(raw) = fs::read_to_string(base.join("temp1_input")) else {
+                continue;
+            };
+            let Ok(milli) = raw.trim().parse::<f64>() else {
+                continue;
+            };
+            let c = milli / 1000.0;
+            hottest = Some(hottest.map_or(c, |h| h.max(c)));
+        }
+        hottest
+    }
+
     /// Whole-system sample from `/proc`: aggregate + per-core CPU, memory/swap,
     /// load, uptime, and every process (one `/proc/<pid>/{stat,status,cmdline}`
     /// read each). Kernel threads (empty `cmdline`) fall back to `[comm]`.
     pub fn system_snapshot() -> super::SystemSnapshot {
         use super::{ProcSample, SystemSnapshot};
+        use std::os::unix::fs::MetadataExt;
+
+        // Resolve each process's owner uid to a name via the machine's own
+        // `/etc/passwd`, read once. NSS-only accounts (LDAP/SSSD) the file walk
+        // misses fall back to `#<uid>` in `username_for` — the remote path uses
+        // `getent`, which is NSS-aware, so this file read is the local-only gap.
+        let passwd = super::parse_passwd(&fs::read_to_string("/etc/passwd").unwrap_or_default());
 
         let (cpu, per_core) =
             super::parse_cpu_stat(&fs::read_to_string("/proc/stat").unwrap_or_default());
@@ -512,6 +1098,10 @@ mod platform {
                     continue;
                 };
                 let cmdline = cmdline(pid).unwrap_or_else(|| format!("[{comm}]"));
+                // The process's owner is the uid owning its `/proc/<pid>` dir.
+                let user = fs::metadata(format!("/proc/{pid}"))
+                    .map(|m| super::username_for(m.uid(), &passwd))
+                    .unwrap_or_default();
                 processes.push(ProcSample {
                     pid,
                     ppid,
@@ -521,6 +1111,7 @@ mod platform {
                     rss_kib: rss_kib(pid).unwrap_or(0),
                     cpu_jiffies,
                     threads,
+                    user,
                 });
             }
         }
@@ -538,6 +1129,11 @@ mod platform {
             load_avg,
             uptime_secs,
             processes,
+            gpus: Vec::new(), // filled by `system_snapshot()`, not by this backend
+            gpu_procs: Vec::new(),
+            cpu_temp_c: cpu_temp_c(),
+            mem_temp_c: mem_temp_c(),
+            sessions: Vec::new(), // remote-only (the pane's "Logged in" panel)
         }
     }
 }
@@ -774,6 +1370,9 @@ mod platform {
                             rss_kib: rss_kib(pid).unwrap_or(0),
                             cpu_jiffies: proc_ticks(pid).unwrap_or(0),
                             threads: entry.cntThreads,
+                            // No cheap per-process owner lookup here; the pane hides
+                            // the per-user section when no process reports one.
+                            user: String::new(),
                         });
                         if Process32Next(snapshot, &mut entry).is_err() {
                             break;
@@ -797,6 +1396,11 @@ mod platform {
             load_avg: [0.0; 3],
             uptime_secs,
             processes,
+            gpus: Vec::new(), // filled by `system_snapshot()`, not by this backend
+            gpu_procs: Vec::new(),
+            cpu_temp_c: None, // no cheap CPU thermal read on this backend
+            mem_temp_c: None, // nor a memory thermal read
+            sessions: Vec::new(), // remote-only (the pane's "Logged in" panel)
         }
     }
 }
@@ -1113,6 +1717,10 @@ mod platform {
                 rss_kib: task.pti_resident_size / 1024,
                 cpu_jiffies: task.pti_total_user.wrapping_add(task.pti_total_system),
                 threads: task.pti_threadnum.max(0) as u32,
+                // Owner name isn't resolved here (only the calling user's processes
+                // are visible anyway); the pane hides the per-user section when no
+                // process reports one.
+                user: String::new(),
             });
         }
 
@@ -1129,6 +1737,11 @@ mod platform {
             load_avg,
             uptime_secs,
             processes,
+            gpus: Vec::new(), // filled by `system_snapshot()`, not by this backend
+            gpu_procs: Vec::new(),
+            cpu_temp_c: None, // no cheap CPU thermal read on this backend
+            mem_temp_c: None, // nor a memory thermal read
+            sessions: Vec::new(), // remote-only (the pane's "Logged in" panel)
         }
     }
 }
@@ -1187,6 +1800,88 @@ mod tests {
         assert!(clk_tck() > 0, "ticks-per-second must be positive");
     }
 
+    #[test]
+    fn is_cpu_hwmon_matches_only_cpu_sensors() {
+        assert!(is_cpu_hwmon("coretemp"));
+        assert!(is_cpu_hwmon("k10temp"));
+        assert!(is_cpu_hwmon("zenpower"));
+        assert!(is_cpu_hwmon("cpu_thermal\n"), "trailing newline is trimmed");
+        assert!(!is_cpu_hwmon("amdgpu"), "a GPU sensor is not the CPU");
+        assert!(!is_cpu_hwmon("nvme"));
+        assert!(!is_cpu_hwmon(""));
+    }
+
+    #[test]
+    fn pick_cpu_temp_prefers_package_channel() {
+        // Intel coretemp: `Package id 0` wins over the per-core channels.
+        let intel = vec![
+            (Some("Core 0".to_string()), 45000.0),
+            (Some("Package id 0".to_string()), 52000.0),
+            (Some("Core 1".to_string()), 47000.0),
+        ];
+        assert_eq!(pick_cpu_temp(&intel), Some(52.0));
+
+        // AMD k10temp: `Tctl` wins over `Tccd1`.
+        let amd = vec![
+            (Some("Tccd1".to_string()), 58000.0),
+            (Some("Tctl".to_string()), 61000.0),
+        ];
+        assert_eq!(pick_cpu_temp(&amd), Some(61.0));
+
+        // No labels at all: fall back to the first channel (temp1_input).
+        let bare = vec![(None, 40000.0), (None, 99000.0)];
+        assert_eq!(pick_cpu_temp(&bare), Some(40.0));
+
+        // No channels: unknown, never a fake zero.
+        assert_eq!(pick_cpu_temp(&[]), None);
+    }
+
+    #[test]
+    fn remote_snapshot_reads_cpu_temp() {
+        let raw = "\
+CLK\t100
+@STAT@
+cpu  1 2 3 4 5 6 7 8
+@CPUTEMP@
+T\tCore 0\t45000
+T\tPackage id 0\t53000
+@PROCS@
+";
+        let snap = parse_remote_snapshot(raw);
+        assert_eq!(snap.cpu_temp_c, Some(53.0), "host package temp is surfaced");
+    }
+
+    #[test]
+    fn is_mem_hwmon_matches_only_dimm_sensors() {
+        assert!(is_mem_hwmon("jc42"), "DDR3/DDR4 on-module sensor");
+        assert!(is_mem_hwmon("spd5118\n"), "DDR5 SPD hub, newline trimmed");
+        assert!(!is_mem_hwmon("coretemp"), "a CPU sensor is not memory");
+        assert!(!is_mem_hwmon("amdgpu"));
+        assert!(!is_mem_hwmon(""));
+    }
+
+    #[test]
+    fn remote_snapshot_reads_hottest_dimm_temp() {
+        let raw = "\
+CLK\t100
+@STAT@
+cpu  1 2 3 4 5 6 7 8
+@MEMTEMP@
+M\t41000
+M\t46500
+M\t44000
+@PROCS@
+";
+        let snap = parse_remote_snapshot(raw);
+        assert_eq!(snap.mem_temp_c, Some(46.5), "hottest module wins");
+    }
+
+    #[test]
+    fn remote_snapshot_has_no_mem_temp_when_section_empty() {
+        let raw = "CLK\t100\n@STAT@\ncpu  1 2 3 4 5 6 7 8\n@MEMTEMP@\n@PROCS@\n";
+        assert_eq!(parse_remote_snapshot(raw).mem_temp_c, None);
+    }
+
     #[test]
     fn descendant_pids_includes_its_own_root() {
         let _guard = CACHE_TEST_LOCK.lock().unwrap();
@@ -1419,4 +2114,173 @@ SwapFree:        2000000 kB
         assert_eq!(cpu, 4200 + 1300); // utime + stime
         assert_eq!(threads, 27);
     }
+
+    #[test]
+    fn parse_remote_snapshot_assembles_from_script_output() {
+        // A minimal but complete capture in the wire format REMOTE_SNAPSHOT_SCRIPT
+        // emits: a CLK line, `@SECTION@` blocks of raw kernel files (incl. `who`),
+        // then S/R/C triples per process. One core, 8 GiB RAM, two processes — one
+        // with a real cmdline, one kernel thread (empty cmdline → `[comm]` fallback).
+        let raw = "CLK\t100\n\
+@STAT@\n\
+cpu  100 0 50 800 0 0 0 0 0 0\n\
+cpu0 100 0 50 800 0 0 0 0 0 0\n\
+intr 12345\n\
+@MEM@\n\
+MemTotal:        8192000 kB\n\
+MemAvailable:    4096000 kB\n\
+SwapTotal:       2048000 kB\n\
+SwapFree:        2048000 kB\n\
+@LOAD@\n\
+0.50 0.40 0.30 1/234 5678\n\
+@UP@\n\
+123456.78 987654.32\n\
+@WHO@\n\
+alice    pts/0        2026-07-18 09:12 (203.0.113.5)\n\
+alice    pts/1        2026-07-18 09:20 (203.0.113.5)\n\
+bob      tty1         2026-07-17 22:03\n\
+@PROCS@\n\
+S\t42 (bash) S 1 42 42 0 -1 4194304 100 0 0 0 12 8 0 0 20 0 3 0 999 0 0\n\
+R\t2048\n\
+C\t/usr/bin/bash -i\n\
+S\t7 (kworker/0:1) I 2 0 0 0 -1 69238880 0 0 0 0 5 2 0 0 20 0 1 0 50 0 0\n\
+R\t0\n\
+C\t\n";
+
+        let snap = parse_remote_snapshot(raw);
+        assert!(snap.supported);
+        assert_eq!(snap.clk_tck, 100);
+        assert_eq!(snap.num_cores, 1);
+        assert_eq!(snap.per_core.len(), 1);
+        // total = sum of all columns; busy = total − idle − iowait (800 idle here).
+        assert_eq!(snap.cpu.total, 100 + 50 + 800);
+        assert_eq!(snap.cpu.busy, 150);
+        assert_eq!(snap.mem_total_kib, 8_192_000);
+        assert_eq!(snap.mem_available_kib, 4_096_000);
+        assert_eq!(snap.swap_total_kib, 2_048_000);
+        assert_eq!(snap.load_avg, [0.50, 0.40, 0.30]);
+        assert_eq!(snap.uptime_secs as u64, 123_456);
+        assert!(snap.gpus.is_empty());
+
+        assert_eq!(snap.processes.len(), 2);
+        let bash = &snap.processes[0];
+        assert_eq!(bash.pid, 42);
+        assert_eq!(bash.ppid, 1);
+        assert_eq!(bash.comm, "bash");
+        assert_eq!(bash.state, "S");
+        assert_eq!(bash.rss_kib, 2048);
+        assert_eq!(bash.cpu_jiffies, 12 + 8);
+        assert_eq!(bash.threads, 3);
+        assert_eq!(bash.cmdline, "/usr/bin/bash -i");
+        // Kernel thread: empty cmdline falls back to `[comm]`.
+        let kworker = &snap.processes[1];
+        assert_eq!(kworker.pid, 7);
+        assert_eq!(kworker.rss_kib, 0);
+        assert_eq!(kworker.cmdline, "[kworker/0:1]");
+
+        // `who` → login sessions for the "Logged in" panel: three sessions across
+        // two users, the tail of each line kept verbatim as `detail`.
+        assert_eq!(snap.sessions.len(), 3);
+        assert_eq!(snap.sessions[0].user, "alice");
+        assert_eq!(snap.sessions[0].tty, "pts/0");
+        assert!(snap.sessions[0].detail.contains("203.0.113.5"));
+        assert_eq!(snap.sessions[2].user, "bob");
+        assert_eq!(snap.sessions[2].tty, "tty1");
+    }
+
+    #[test]
+    fn parse_passwd_maps_uid_to_name() {
+        let content = "\
+root:x:0:0:root:/root:/bin/bash
+alice:x:1000:1000:Alice:/home/alice:/bin/bash
+bob:x:1001:1001::/home/bob:/bin/zsh
+# a comment line is skipped
+malformed-no-uid
+daemon:x:1:1:daemon:/usr/sbin:/usr/sbin/nologin
+";
+        let map = parse_passwd(content);
+        assert_eq!(map.get(&0).map(String::as_str), Some("root"));
+        assert_eq!(map.get(&1000).map(String::as_str), Some("alice"));
+        assert_eq!(map.get(&1001).map(String::as_str), Some("bob"));
+        assert_eq!(map.get(&1).map(String::as_str), Some("daemon"));
+        // A known uid resolves to its name; an unknown one falls back to `#<uid>`.
+        assert_eq!(username_for(1000, &map), "alice");
+        assert_eq!(username_for(4242, &map), "#4242");
+    }
+
+    #[test]
+    fn parse_remote_snapshot_resolves_process_owner() {
+        // The @PASSWD@ block feeds the uid→name map; each process's `U` line names
+        // its owner uid, resolved against that map (an unmapped uid → `#<uid>`).
+        let raw = "CLK\t100\n\
+@PASSWD@\n\
+root:x:0:0:root:/root:/bin/bash\n\
+alice:x:1000:1000:Alice:/home/alice:/bin/bash\n\
+@PROCS@\n\
+S\t42 (bash) S 1 42 42 0 -1 4194304 100 0 0 0 12 8 0 0 20 0 3 0 999 0 0\n\
+U\t1000\n\
+R\t2048\n\
+C\t/usr/bin/bash -i\n\
+S\t1 (systemd) S 0 1 1 0 -1 4194560 200 0 0 0 5 5 0 0 20 0 1 0 5 0 0\n\
+U\t0\n\
+R\t4096\n\
+C\t/sbin/init\n\
+S\t99 (weird) S 1 99 99 0 -1 4194304 1 0 0 0 1 1 0 0 20 0 1 0 100 0 0\n\
+U\t7777\n\
+R\t128\n\
+C\tweird\n";
+
+        let snap = parse_remote_snapshot(raw);
+        assert_eq!(snap.processes.len(), 3);
+        assert_eq!(snap.processes[0].user, "alice");
+        assert_eq!(snap.processes[1].user, "root");
+        // An owner uid with no passwd entry falls back to `#<uid>`.
+        assert_eq!(snap.processes[2].user, "#7777");
+    }
+
+    #[test]
+    fn parse_remote_snapshot_reads_the_gpu_section() {
+        // The `@GPU@` wire format: an AMD card shipped file-by-file, an NVIDIA card
+        // as raw nvidia-smi CSV, and one NVIDIA compute process. A blank AMD value
+        // (a file the host didn't expose) must be skipped, not stored.
+        let raw = "CLK\t100\n\
+@GPU@\n\
+NVSMI\tNVIDIA RTX A4000, 2048, 16376, 55, 63, 90.0, 140, 1800, 7000, 44, 550.90.07, 4, 16\n\
+NVPROC\t4321, python, 1536\n\
+AMD\t1\tdriver\tamdgpu\n\
+AMD\t1\tvendor\t0x1002\n\
+AMD\t1\tvram_used\t440770560\n\
+AMD\t1\tvram_total\t536870912\n\
+AMD\t1\tgtt_used\t18052190208\n\
+AMD\t1\tgtt_total\t65855619072\n\
+AMD\t1\tbusy\t72\n\
+AMD\t1\ttemp\t58000\n\
+AMD\t1\tsclk\t2: 2900Mhz *\n\
+AMD\t1\tlink_speed\t\n\
+@PROCS@\n";
+
+        let snap = parse_remote_snapshot(raw);
+        assert_eq!(snap.gpus.len(), 2, "one AMD card + one NVIDIA card");
+
+        // AMD card comes first (built from the shipped sysfs files).
+        let amd = &snap.gpus[0];
+        assert_eq!(amd.driver, "amdgpu");
+        assert_eq!(amd.vram_total, 536_870_912);
+        assert_eq!(amd.shared_total, 65_855_619_072);
+        assert_eq!(amd.busy_percent, Some(72.0));
+        assert_eq!(amd.temp_c, Some(58.0));
+        assert_eq!(amd.sclk_mhz, Some(2900));
+        assert_eq!(amd.pcie_gen, None, "a blank link_speed line was skipped");
+
+        // NVIDIA card, parsed by the same CSV reader as the local path.
+        let nv = &snap.gpus[1];
+        assert_eq!(nv.driver, "nvidia");
+        assert_eq!(nv.temp_c, Some(63.0));
+        assert_eq!(nv.power_w, Some(90.0));
+        assert_eq!(nv.driver_version.as_deref(), Some("550.90.07"));
+
+        assert_eq!(snap.gpu_procs.len(), 1);
+        assert_eq!(snap.gpu_procs[0].pid, 4321);
+        assert_eq!(snap.gpu_procs[0].mem_bytes, 1536 * 1024 * 1024);
+    }
 }
diff --git a/src-tauri/src/terminal/mod.rs b/src-tauri/src/terminal/mod.rs
index 2fde3a1..9458d4c 100644
--- a/src-tauri/src/terminal/mod.rs
+++ b/src-tauri/src/terminal/mod.rs
@@ -62,6 +62,30 @@ pub struct PtyOptions {
     /// still applies. Harmless for local projects — they resolve to no remote.
     #[serde(default)]
     pub project_id: Option<String>,
+    /// Which of the project's remote hosts this tab runs on
+    /// (`docs/multi_host_remote_plan.md`): `None`/`"primary"` = the primary remote
+    /// (`Project.remote`), any other id = an extra "worker" host from
+    /// `compute_hosts`. Set by the frontend from the tab's `host:<id>` location.
+    /// Ignored for a local project (resolves to no remote).
+    #[serde(default)]
+    pub remote_host_id: Option<String>,
+    /// Persistent remote session (TODO #85): the **stable tmux session name** to
+    /// spawn-or-attach on the host, wrapping the spawn in `tmux new-session -A` so
+    /// the run survives an SSH drop / laptop sleep / Eldrun relaunch. The frontend
+    /// mints it once per shell tab and **persists it** (`TabEntry.tmuxSession`), so
+    /// it is stable across a relaunch even though the tab's PTY id (`scope:key`) is
+    /// regenerated on restore — that stability is what makes reattach work. Set
+    /// only for remote shell/script tabs of a persist-enabled project (agent tabs
+    /// are excluded — they resume via their own session). `None`/local → no wrap.
+    #[serde(default)]
+    pub tmux_session: Option<String>,
+    /// Attach this tab to an **existing named** tmux session on the host instead
+    /// of spawning a fresh one (TODO #85): set when a tab is opened from the
+    /// Sessions view onto a running (possibly hand-started) session, and persisted
+    /// so the tab reattaches to that same session across a restart. Takes
+    /// precedence over `tmux_session` when set. No-op for a local project.
+    #[serde(default)]
+    pub tmux_attach: Option<String>,
 }
 
 #[derive(Debug, Clone, Serialize)]
@@ -99,6 +123,84 @@ fn invalidate_proc_tree_cache() {
     crate::sysstat::invalidate_descendant_cache();
 }
 
+/// How aggressively [`reap_child_subtree`] signals a doomed process subtree.
+enum ReapMode {
+    /// SIGTERM now, then SIGKILL any survivors after a short grace period on a
+    /// detached thread. Used on tab close / respawn, where the app stays alive
+    /// long enough to deliver the escalation.
+    Graceful,
+    /// SIGKILL immediately. Used at app exit, where a delayed escalation thread
+    /// would be torn down with the process before it could fire.
+    Immediate,
+}
+
+/// Best-effort abort of a PTY child's **entire process subtree**.
+///
+/// `portable_pty`'s [`Child::kill`] signals only the shell leader; anything it
+/// spawned (a dev server, a build, a training run) is otherwise orphaned and
+/// keeps running after its tab — or the whole app — is gone. So we walk the
+/// subtree rooted at the leader and signal every pid. The walk must happen
+/// *before* the leader is killed: once it dies its children reparent to init and
+/// the tree rooted at its pid is no longer reachable.
+///
+/// The leader pid is included in the returned set; re-signalling a leader the
+/// caller also `Child::kill`s is a harmless no-op (a dead pid yields ESRCH).
+fn reap_child_subtree(leader_pid: u32, mode: ReapMode) {
+    // Force a fresh process-tree walk rather than reusing a cached CPU sample
+    // that may predate a just-spawned child.
+    crate::sysstat::invalidate_descendant_cache();
+    let subtree = crate::sysstat::descendant_pids(&[leader_pid]);
+    reap_pids(subtree, mode);
+}
+
+/// Signal a set of pids best-effort. Every pid came from a live process walk
+/// moments earlier, so a stale one is expected and ignored (ESRCH on Unix, a
+/// failed `OpenProcess` on Windows).
+#[cfg(unix)]
+fn reap_pids(pids: Vec<u32>, mode: ReapMode) {
+    if pids.is_empty() {
+        return;
+    }
+    // SAFETY: `libc::kill` takes no pointers and a real signal number; a stale
+    // pid returns ESRCH, which we ignore.
+    let signal = |pids: &[u32], sig: libc::c_int| unsafe {
+        for &pid in pids {
+            libc::kill(pid as libc::pid_t, sig);
+        }
+    };
+    match mode {
+        ReapMode::Immediate => signal(&pids, libc::SIGKILL),
+        ReapMode::Graceful => {
+            signal(&pids, libc::SIGTERM);
+            std::thread::spawn(move || {
+                std::thread::sleep(Duration::from_secs(2));
+                signal(&pids, libc::SIGKILL);
+            });
+        }
+    }
+}
+
+/// Windows has no SIGTERM/SIGKILL split — `TerminateProcess` is the only per-pid
+/// primitive — so both modes reap immediately.
+#[cfg(windows)]
+fn reap_pids(pids: Vec<u32>, _mode: ReapMode) {
+    use windows::Win32::Foundation::CloseHandle;
+    use windows::Win32::System::Threading::{OpenProcess, TerminateProcess, PROCESS_TERMINATE};
+    for pid in pids {
+        // SAFETY: the handle is closed before the next iteration; a failed open
+        // (the pid already exited) is ignored.
+        unsafe {
+            if let Ok(handle) = OpenProcess(PROCESS_TERMINATE, false, pid) {
+                let _ = TerminateProcess(handle, 1);
+                let _ = CloseHandle(handle);
+            }
+        }
+    }
+}
+
+#[cfg(not(any(unix, windows)))]
+fn reap_pids(_pids: Vec<u32>, _mode: ReapMode) {}
+
 // ── PtyRegistry ───────────────────────────────────────────────────────────
 
 #[derive(Default)]
@@ -126,6 +228,12 @@ impl PtyRegistry {
         let crash_times = match self.entries.remove(&id) {
             Some(mut old) => {
                 old.dead.store(true, Ordering::SeqCst);
+                // A respawn under the same id replaces the old child; reap its
+                // whole subtree, not just the leader, so a process it spawned
+                // does not survive the tab it belonged to.
+                if let Some(pid) = old.child.process_id() {
+                    reap_child_subtree(pid, ReapMode::Graceful);
+                }
                 let _ = old.child.kill();
                 old.crash_times
             }
@@ -156,6 +264,15 @@ impl PtyRegistry {
     pub fn kill(&mut self, id: &str) {
         if let Some(mut e) = self.entries.remove(id) {
             e.dead.store(true, Ordering::SeqCst);
+            // Abort the child's whole process subtree, not just the shell leader.
+            // `child.kill()` below reaps only the leader, so a long-running
+            // descendant (a dev server, a build, a training run) started in the
+            // tab would otherwise be orphaned and keep running after the tab
+            // closes. Gather the subtree first — it is unreachable once the
+            // leader dies and its children reparent to init.
+            if let Some(pid) = e.child.process_id() {
+                reap_child_subtree(pid, ReapMode::Graceful);
+            }
             let _ = e.child.kill();
             // The tree shrank; drop the cached descendant-pid set.
             invalidate_proc_tree_cache();
@@ -168,6 +285,33 @@ impl PtyRegistry {
         }
     }
 
+    /// Abort every live PTY and its process subtree. Called once at app exit so
+    /// no terminal's inner process (a dev server, a build, a training run)
+    /// outlives Eldrun — dropping the registry alone kills only the shell
+    /// leaders and orphans everything they spawned. Uses [`ReapMode::Immediate`]
+    /// because a delayed escalation thread would die with the exiting process.
+    pub fn kill_all(&mut self) {
+        // One process-tree walk over all leaders (their subtrees include the
+        // leader pids themselves, which `child.kill()` below re-kills harmlessly).
+        let leaders: Vec<u32> = self
+            .entries
+            .values()
+            .filter_map(|e| e.child.process_id())
+            .collect();
+        crate::sysstat::invalidate_descendant_cache();
+        let subtree = crate::sysstat::descendant_pids(&leaders);
+
+        for (id, mut e) in self.entries.drain() {
+            e.dead.store(true, Ordering::SeqCst);
+            let _ = e.child.kill();
+            // Containerized tab: also TERM the in-container process (the docker
+            // exec client we just killed is not it).
+            crate::services::sandbox::kill_tab_process(&id);
+        }
+        reap_pids(subtree, ReapMode::Immediate);
+        invalidate_proc_tree_cache();
+    }
+
     /// True when any live (not-yet-dead) PTY belongs to `scope`. PTY ids are
     /// `<scope>:<tab-key>` (CenterPanel), so a prefix match is authoritative.
     /// Used by the project-container teardown to keep a deactivated project's
@@ -493,4 +637,65 @@ mod tests {
 
         registry.lock().unwrap().kill("test");
     }
+
+    /// Closing a tab must abort the process **inside** it, not just the shell
+    /// leader: a `sh` whose child is a long-running `sleep` must leave no live
+    /// `sleep` behind once the PTY is killed.
+    #[test]
+    fn kill_reaps_the_child_subtree() {
+        let pty_system = NativePtySystem::default();
+        let pair = pty_system
+            .openpty(PtySize { rows: 24, cols: 80, pixel_width: 0, pixel_height: 0 })
+            .expect("openpty");
+
+        // The trailing `; true` defeats the shell's exec-optimization so `sleep`
+        // is a genuine *child* of `sh` (the leader), not the leader itself.
+        let mut cmd = CommandBuilder::new("sh");
+        cmd.arg("-c");
+        cmd.arg("sleep 300; true");
+        let child = pair.slave.spawn_command(cmd).expect("spawn sh");
+        let leader = child.process_id().expect("leader pid");
+        let writer = pair.master.take_writer().expect("take writer");
+        let master = pair.master;
+
+        let registry = Arc::new(Mutex::new(PtyRegistry::default()));
+        let dead = Arc::new(AtomicBool::new(false));
+        registry
+            .lock()
+            .unwrap()
+            .insert("test".to_string(), master, writer, child, dead);
+
+        // SAFETY: kill(pid, 0) probes existence without signalling; no pointers.
+        let alive = |pid: u32| unsafe { libc::kill(pid as libc::pid_t, 0) == 0 };
+
+        // Wait for the `sleep` child to appear as a descendant of the leader.
+        let mut sleep_pid = None;
+        for _ in 0..100 {
+            crate::sysstat::invalidate_descendant_cache();
+            if let Some(&pid) = crate::sysstat::descendant_pids(&[leader])
+                .iter()
+                .find(|&&p| p != leader)
+            {
+                sleep_pid = Some(pid);
+                break;
+            }
+            std::thread::sleep(Duration::from_millis(20));
+        }
+        let sleep_pid = sleep_pid.expect("sleep child should have spawned");
+        assert!(alive(sleep_pid), "sleep child should be running before kill");
+
+        registry.lock().unwrap().kill("test");
+
+        // The graceful SIGTERM terminates `sleep` (default disposition); init
+        // then reaps the reparented zombie. Poll until the pid is truly gone.
+        let mut gone = false;
+        for _ in 0..250 {
+            if !alive(sleep_pid) {
+                gone = true;
+                break;
+            }
+            std::thread::sleep(Duration::from_millis(20));
+        }
+        assert!(gone, "the inner process must be aborted when the tab is closed");
+    }
 }
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 28c0739..a72d31e 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,6 +1,6 @@
 {
   "productName": "Eldrun",
-  "version": "0.1.22",
+  "version": "0.1.32",
   "identifier": "io.github.fseiffarth.eldrun",
   "build": {
     "frontendDist": "../dist",
diff --git a/src-tauri/tests/projects_commands.rs b/src-tauri/tests/projects_commands.rs
index 853c127..f227f96 100644
--- a/src-tauri/tests/projects_commands.rs
+++ b/src-tauri/tests/projects_commands.rs
@@ -221,6 +221,8 @@ fn create_remote_project_enables_lockstep_when_git_backed() {
                 openvpn: None,
                 auto_connect: None,
                 key_auth: None,
+                persist_sessions: None,
+                label: None,
                 extra: Default::default(),
             }),
             mirror_parent: Some(mirror_parent.path().to_string_lossy().to_string()),
@@ -256,6 +258,8 @@ fn create_remote_project_leaves_lockstep_off_without_git() {
                 openvpn: None,
                 auto_connect: None,
                 key_auth: None,
+                persist_sessions: None,
+                label: None,
                 extra: Default::default(),
             }),
             mirror_parent: Some(mirror_parent.path().to_string_lossy().to_string()),
@@ -293,6 +297,8 @@ fn create_remote_project_scaffolds_the_local_mirror() {
                 openvpn: None,
                 auto_connect: None,
                 key_auth: None,
+                persist_sessions: None,
+                label: None,
                 extra: Default::default(),
             }),
             mirror_parent: Some(mirror_parent.path().to_string_lossy().to_string()),
@@ -738,6 +744,8 @@ fn set_project_auto_connect_writes_both_copies_and_clears() {
                 openvpn: None,
                 auto_connect: None,
                 key_auth: None,
+                persist_sessions: None,
+                label: None,
                 extra: Default::default(),
             }),
             mirror_parent: Some(mirror_parent.path().to_string_lossy().to_string()),
diff --git a/src-tauri/tests/schema_edge_cases.rs b/src-tauri/tests/schema_edge_cases.rs
index edc70eb..0212291 100644
--- a/src-tauri/tests/schema_edge_cases.rs
+++ b/src-tauri/tests/schema_edge_cases.rs
@@ -24,9 +24,9 @@ fn parse<T: serde::de::DeserializeOwned>(json: &str) -> T {
 // ── Settings ───────────────────────────────────────────────────────────────
 
 #[test]
-fn settings_default_color_scheme_is_light_lavender() {
+fn settings_default_color_scheme_is_fancy_dark() {
     let s = Settings::default();
-    assert_eq!(s.color_scheme(), "light_lavender");
+    assert_eq!(s.color_scheme(), "fancy_dark");
 }
 
 #[test]
diff --git a/src-tauri/tests/services_tests.rs b/src-tauri/tests/services_tests.rs
index b95b86e..7c27dcd 100644
--- a/src-tauri/tests/services_tests.rs
+++ b/src-tauri/tests/services_tests.rs
@@ -229,7 +229,7 @@ fn save_and_load_tab_layout_roundtrip() {
         },
     ];
 
-    terminal_service::save_tab_layout(&local_file_str, &tabs, None, None).unwrap();
+    terminal_service::save_tab_layout(&local_file_str, &tabs, None, None, true).unwrap();
     let loaded = terminal_service::load_tab_layout(&local_file_str);
 
     assert_eq!(loaded.len(), 2);
@@ -269,7 +269,7 @@ fn save_tab_layout_round_trips_agent_session_id() {
         },
     ];
 
-    terminal_service::save_tab_layout(&local_file_str, &tabs, None, None).unwrap();
+    terminal_service::save_tab_layout(&local_file_str, &tabs, None, None, true).unwrap();
     let loaded = terminal_service::load_tab_layout(&local_file_str);
 
     assert_eq!(loaded.len(), 2);
@@ -313,7 +313,7 @@ fn save_tab_layout_preserves_other_project_fields() {
         session_id: None,
         extra: Default::default(),
     }];
-    terminal_service::save_tab_layout(&local_file_str, &tabs, None, None).unwrap();
+    terminal_service::save_tab_layout(&local_file_str, &tabs, None, None, true).unwrap();
 
     let reloaded: Project = eldrun_lib::storage::read_json(&local_file).unwrap();
     assert_eq!(reloaded.id, "preserve-me");
@@ -336,7 +336,7 @@ fn save_tab_layout_persists_open_session_uuids() {
     let sessions = serde_json::json!([
         { "sessionId": "11111111-1111-4111-8111-111111111111", "cmd": "claude", "label": "Claude" }
     ]);
-    terminal_service::save_tab_layout(&path_str, &[], None, Some(sessions.clone())).unwrap();
+    terminal_service::save_tab_layout(&path_str, &[], None, Some(sessions.clone()), true).unwrap();
 
     let reloaded: Project = eldrun_lib::storage::read_json(&local_file).unwrap();
     assert_eq!(reloaded.open_tab_sessions, Some(sessions));
@@ -347,7 +347,7 @@ fn save_tab_layout_persists_open_session_uuids() {
     let reloaded: Project = eldrun_lib::storage::read_json(&local_file).unwrap();
     assert!(reloaded.open_tab_sessions.is_some());
 
-    terminal_service::save_tab_layout(&path_str, &[], None, Some(serde_json::json!([]))).unwrap();
+    terminal_service::save_tab_layout(&path_str, &[], None, Some(serde_json::json!([])), true).unwrap();
     let reloaded: Project = eldrun_lib::storage::read_json(&local_file).unwrap();
     assert_eq!(reloaded.open_tab_sessions, None);
 }
@@ -372,9 +372,8 @@ fn load_open_apps_returns_empty_when_none_saved() {
     assert!(loaded.is_empty());
 }
 
-#[test]
-fn save_empty_tabs_clears_layout_field() {
-    let tmp = TempDir::new().unwrap();
+/// A project holding one saved tab, for the two empty-save tests below.
+fn project_with_one_tab(tmp: &TempDir) -> String {
     let project = Project {
         id: "p".to_string(),
         name: "P".to_string(),
@@ -384,20 +383,65 @@ fn save_empty_tabs_clears_layout_field() {
             label: "Old".to_string(),
             cmd: "bash".to_string(),
             cwd: "/tmp".to_string(),
-            session_id: None,
+            session_id: Some("11111111-1111-4111-8111-111111111111".to_string()),
             extra: Default::default(),
         }]),
         ..Default::default()
     };
-    let local_file = write_project_json(tmp.path(), &project);
-    let path_str = local_file.to_string_lossy().to_string();
+    write_project_json(tmp.path(), &project)
+        .to_string_lossy()
+        .to_string()
+}
 
-    terminal_service::save_tab_layout(&path_str, &[], None, None).unwrap();
+#[test]
+fn save_empty_tabs_clears_layout_field_when_clearing_is_allowed() {
+    let tmp = TempDir::new().unwrap();
+    let path_str = project_with_one_tab(&tmp);
+
+    // The user really did close every tab.
+    terminal_service::save_tab_layout(&path_str, &[], None, None, true).unwrap();
 
     let loaded = terminal_service::load_tab_layout(&path_str);
     assert!(loaded.is_empty());
 }
 
+/// The SimpleGNN regression: an empty layout arriving from a caller that cannot
+/// vouch for it must NOT erase the saved one.
+///
+/// Detach swaps a project's `local_file` (remote state dir → promoted mirror) while
+/// the tab store's scope has not caught up; the debounced autosave then persists the
+/// wrong scope's tabs into that file, the per-scope filter drops every one of them as
+/// foreign, and what arrives is `[]` — indistinguishable from a close-all, and fatal.
+/// It took `tab_layout`, `tab_groups` and the `.eldrun` session mirror in one call,
+/// and with them the `sessionId`s that were the only handle on three live Claude
+/// conversations. Empty now clears only when the caller says it means one.
+#[test]
+fn save_empty_tabs_preserves_layout_when_clearing_is_not_allowed() {
+    let tmp = TempDir::new().unwrap();
+    let path_str = project_with_one_tab(&tmp);
+
+    terminal_service::save_tab_layout(&path_str, &[], None, None, false).unwrap();
+
+    let loaded = terminal_service::load_tab_layout(&path_str);
+    assert_eq!(loaded.len(), 1, "an unvouched empty save must not erase tabs");
+    assert_eq!(loaded[0].key, "old");
+    assert_eq!(
+        loaded[0].session_id.as_deref(),
+        Some("11111111-1111-4111-8111-111111111111"),
+        "the agent's session id is the handle on its conversation"
+    );
+
+    // …and it must not have emptied the `.eldrun` mirror either — that file WINS on
+    // load, so clobbering it would lose the tabs even with project.json intact.
+    let sessions_dir = terminal_service::eldrun_sessions_dir(&path_str).unwrap();
+    let mirror = sessions_dir.join("terminals.json");
+    if mirror.exists() {
+        let session: eldrun_lib::schema::session::TerminalSession =
+            eldrun_lib::storage::read_json(&mirror).unwrap();
+        assert_eq!(session.tab_layout.len(), 1);
+    }
+}
+
 // ── terminal_service: .eldrun/sessions/ ───────────────────────────────────
 
 #[test]
diff --git a/src/CLAUDE.md b/src/CLAUDE.md
index a2dd0a9..24f1146 100644
--- a/src/CLAUDE.md
+++ b/src/CLAUDE.md
@@ -26,9 +26,9 @@ workflow); see `src-tauri/CLAUDE.md` for the backend file map.
 | `DetachedApp.tsx` | Root component for a popped-out/detached subwindow (#42). |
 | `ProjectSwitcher.tsx` | Thin composition root: pill strip + search/dialog/settings wiring. Re-exports scaffold helpers. |
 | `ProjectSearch.tsx` *(in `projects/`)* | Inactive-project/box search box + results popover. |
-| `ProjectDialog.tsx` *(in `projects/`)* | New/Import project dialog incl. SSH + OpenVPN + scaffold-fill sub-flows. |
+| `ProjectDialog.tsx` *(in `projects/`)* | New/Import project dialog incl. SSH + OpenVPN + scaffold-fill sub-flows. An import's source is a local folder **or** a GitHub/GitLab clone (`git_clone` lands the tree, then the ordinary import registers it in place). |
 | `SettingsPanel.tsx` | Settings dialog + sub-panels (theme/git/layout, global apps, file-type apps, Ollama, shortcuts, help). |
-| `RightPanel.tsx` | File-tree overlay panel (git status/history). |
+| `RightPanel.tsx` | File-tree overlay panel. A thin host: its whole file *viewer* is the shared `files/ProjectFilesView` (same component the Files (Project) tab renders). It owns only what is panel-specific — the active-project identity it forwards, the browsed-folder in the projects store, and the three window-chrome fragments it injects as slots (📌 pin, the resize border, the "Hidden subwindows" list). |
 | `VpnPasswordPrompt.tsx` | Modal prompting for an OpenVPN password on activation. |
 | `LogoIcon.tsx` | Inline SVG logo. |
 
@@ -36,7 +36,11 @@ workflow); see `src-tauri/CLAUDE.md` for the backend file map.
 
 | File | Purpose |
 |------|---------|
-| `projects/ProjectPill.tsx` | Individual project pill (click/close/drag-reorder/group). |
+| `projects/ProjectPill.tsx` | Individual project pill (click/close/drag-reorder/group). Its "Remote machines…" Runtime item opens `RemoteMachinesWindow`. |
+| `projects/HpcPipelineWizard.tsx` | **The guided HPC/SLURM pipeline wizard** (`docs/quirky-knitting-umbrella` plan Phase B), launched from the project-switcher **+** menu ("HPC pipeline…"). A 5-step stepper that **composes existing flows** rather than reimplementing them: **Login** (`RemoteProjectSection` + `useRemoteSession`) → **Project** (name + local-mirror location → `create_project`, git-backed remote ⇒ lockstep on) → **Load data** (skippable; picks local files → `remote_upload_file` streams them to the host over the pooled SFTP) → **Run job** (edits a starter `.slurm`'s `#SBATCH` via the Phase-A splice helpers, writes it to the host, and Phase-A `submitSlurmJob`) → **Watch** (the log tab is already tailing; points at the Jobs view). `HpcPipelineWizardHost` is mounted once in `AppShell`, driven by `stores/hpcPipeline`. Untested. |
+| `projects/RemoteMachinesWindow.tsx` | **The one unified remote hub** (`docs/multi_host_remote_plan.md` §4.4): one entry per host — the **primary** first (it owns files/git/mirror; Connect/Manage only, no sync/pull/remove), then each extra "worker" machine — plus **Add a machine**. Every host's Connect/Manage opens the shared per-host `RemoteConnectDialog` (primary → `"primary"`, worker → its id), which renders on an *elevated* backdrop (`.modal-backdrop-elevated`) so the detail sits above this hub. Workers also get "Sync code now", "Pull outputs…" (size-confirmed), and the shared-fs/`sync_code` toggles. The Add-machine form's remote path can be **typed or browsed** — a **connect-then-browse** picker that runs on the SHARED login mechanism (`useRemoteBrowse` hook + `RemoteFolderBrowser` component, the exact same connect/list/mkdir machinery the new/extend-project flow uses), so there is one implementation of "log in to a host and browse it", not a worker-specific copy. Only the fields around it are this dialog's own. It connects with a transient, unsaved password (key-auth if blank) and browses to the folder: the existing shared folder for a shared-fs worker, or the (creatable) destination for a synced copy. Standard `modal-backdrop`+`project-dialog` chrome (worker cards = `.remote-machine-*` in themes.css). Mounted once as `RemoteMachinesDialogHost` in AppShell, driven by `stores/remoteMachines`; opened from **any of the pill's connection lamps** (`header/RemoteConnMenu` — every lamp now opens this hub, not a per-host connect), the pill's Runtime item, and the file viewer's **SSH (remote) type tag** right-click (`ProjectFilesView`, now a single "Remote machines…" item). Workers are one-way read-only experiment machines; the primary stays the project's `remote`. |
+| `projects/useRemoteBrowse.ts` | **The** shared "log in to a host + browse its filesystem over SFTP" state machine — the ONE implementation of *how* a remote connect + folder browse works, so the primary machine and further (worker) machines never carry two copies. A live session is a FROZEN `(conn, password)` pair (a credential edit means `reset`+reconnect); the listing auto-refreshes on path/conn change. `connect` (ssh_connect + remember + open start dir), `openSession` (freeze a session another path already authenticated, e.g. a non-headless login terminal's ControlMaster), `enter`/`goUp`/`jump`/`mkdir`/`reset`. Used by `useRemoteSession` (new/extend-project) and `RemoteMachinesWindow` (add-worker); each keeps its own fields/steps/VPN around it. |
+| `projects/RemoteFolderBrowser.tsx` | **The** remote folder-picker UI (`.remote-browser` chrome: breadcrumb, go-up, recently-used jump, inline new-folder, listing, footer), rendered by both the new/extend-project flow (`RemoteProjectSection`) and the add-worker flow (`RemoteMachinesWindow`) so the browse step is one component, not two. Owns only the new-folder input text; everything else is the caller's (fed from `useRemoteBrowse`). Exports `remoteEntryExt` (file-type icon helper). |
 | `projects/BoxPill.tsx` | Project-box pill (meta-grouping, #13/#41). |
 | `projects/ActivityCalendar.tsx` | Per-project activity calendar heatmap (unrelated to the calendar tab). |
 | `projects/scaffold.ts` | Pure helpers: name sanitize, SSH-address parse, scaffold/description fill prompts. |
@@ -49,24 +53,37 @@ workflow); see `src-tauri/CLAUDE.md` for the backend file map.
 | `calendar/AlarmPopup.tsx` | In-app reminder popup (snooze/dismiss); mounted in `AppShell`. |
 | `header/Clock.tsx` | Header clock. |
 | `header/AppTimerDisplay.tsx` | Active-project time-tracking readout. |
-| `header/AppResourceDisplay.tsx` | Per-project CPU/resource readout. |
+| `header/AppResourceDisplay.tsx` | CPU/RAM/GPU readout. The GPU row is the **device's** memory + utilization (`gpustat`), not Ollama's models — those are one line of its tooltip, and the whole reading only on a machine whose GPU can't be read, where it falls back to the old Ollama-only figure rather than showing a zero. |
 | `header/ConnTypeIcon.tsx` | Local/remote (SSH) connection-type icon. |
+| `header/MachinesIndicator.tsx` | Machine-wide **global machines** (SSH hosts no project owns): the VPN indicator's pattern applied to SSH — authenticated once, with no project or path attached, then connected/monitored/reordered from the header. A machine reaches a project **only** through a row's "add to a project" picker (`⇥`), which lists the *open* projects and names the outcome for each: a **remote** project gains it as a `shared_fs` compute host (`stores/remoteMachines`'s `pendingDrop` → `RemoteMachinesWindow`), a **local** one is offered "Extend to remote" with it as the primary (`requestExtend` → the target's `ProjectPill`, which owns that dialog). Attaching is deliberately **not** a drag: a native HTML5 drag out of a hover-menu is unworkable under WebKitGTK (the menu closes or hangs mid-drag, and a drop that misses its target never fires, leaving the row stuck in a dimmed drag state nothing can clear) — and its target lives outside this list anyway. Rows *do* **reorder by dragging their grip**, on **pointer** events (the same choice `TabBar`/`YamlTree` made), with a keyboard ↑/↓ equivalent on the focused grip: the DOM order is frozen for the gesture and the other rows merely `transform` aside to open the landing slot, so the rects measured at pointerdown never shift under the cursor they're compared to. **Removing a machine actively disconnects it first** when it is live (`stores/globalMachines`' `remove` → `disconnect`) — dropping the row otherwise strands an SSH master, and any tmux job under it, with no handle left in the UI. Also the one entry point to **"Remote host usage…"** (`common/RemoteUsageWarningDialog` via `stores/remoteUsage`'s `open`): that report used to put itself on screen after every remote connect; it is on demand only now, and its subject is **this list** — a section per global machine in this menu's order, then the active project's own hosts not already in it (matched by SSH target, never by id) — each read afresh as the dialog opens. Two probe commands sit behind that one list: a global machine authenticates ad-hoc (`global_machine_usage_check`, the twin of `global_machine_monitor_snapshot`), a project host rides its pooled ControlMaster (`remote_usage_check`); same script, same parser, so the sections read alike. |
 | `header/VpnIndicator.tsx` | Machine-wide OpenVPN control: always present, lists stored `.ovpn`s, connects/disconnects a tunnel with or without a project behind it, names its holders, and arms one to connect on launch. |
 | `header/WindowControls.tsx` | Minimize/maximize/close window buttons. |
 | `tabs/TabBar.tsx` | Per-subwindow tab strip (add/rename/close, pointer-based DnD). |
-| `tabs/Subwindow.tsx` | A single tiled subwindow (tab group). |
-| `tabs/agentModes.ts` | Planner/doer capability table: which agents can be launched into a Plan/Auto mode **and** resume on the respawn that costs (Claude only), plus the idempotent arg rewrite. |
+| `tabs/Subwindow.tsx` | A single tiled subwindow (tab group). Its body is a row: the measured pane region + (when the group's `filesOpen` is set) the docked per-subwindow file viewer. |
+| `tabs/agentModes.ts` | Planner/doer capability table: which agents can be launched into a Plan/Auto mode **and** resume on the respawn that costs (Claude + Gemini), plus the idempotent arg rewrite. |
 | `tabs/commitDrop.ts` / `tabs/commitFileDrop.ts` | Apply a tab/file drag-drop into the layout tree. |
 | `tabs/dragGeometry.ts` | Drop-zone/split geometry math for tab drags. |
 | `terminal/TerminalView.tsx` | xterm.js terminal wrapper + PTY I/O. |
-| `files/FileTree.tsx` | Project file tree with git markers, fs-watch refresh. |
-| `files/FileBrowser.tsx` | File browser pane. |
+| `files/FileTreeSearch.tsx` | The flat result list `FileTree` shows in place of the browsed listing while its search box holds a query. Two modes: **name** (literal case-insensitive substring match on paths from `list_project_paths`, basename hits ranked first — deliberately NOT a fuzzy subsequence, which matches nearly everything) and **content** (literal line search via `project_search`, the same backend the right panel's Search view uses). Every result does both **jump-to-path** (reveal + select in the tree, via `FileTree`'s `revealPath`) and **open** (content hits open at the matched line). Confined to the browsed folder by default (`scopeRel`) with a **root** toggle for the whole project — content search walks only the scope; filename results filter to it. Local-source only — both backends walk the canonical local path — so `FileTree` only shows the box for a non-remote-source tree. |
+| `files/FileTree.tsx` | Project file tree with git markers, fs-watch refresh. Hosts the in-tree search box + `FileTreeSearch` results and owns `revealPath` (jump-to-path: navigate to a rel path's folder, select + scroll the row). Owns the file drag-and-drop: pointer-drag a file onto a tab bar (→ embed/split/popout, via `stores/drag` + `commitFileDrop`), onto a folder row to move it, ctrl+drag to export it to the OS. Its "Open in a new tab" is a *host* callback (`onOpenFolderTab`), not a store call — a tree with no way to own a tab (a box root, a popout running on a streamed copy of the tabs) simply doesn't pass one, instead of offering an action that would go nowhere. |
+| `files/ProjectFilesPane.tsx` | **The** project file view — tree, sort row, remote sync row, Downloads — rendered *twice*: by `RightPanel` and by the Files (Project) tab. One component, so the panel and the tab can never drift into two different file views of the same project (the bargain `PageStrip` strikes between the print preview and the PDF rail). What each host still owns is exactly what must differ: the browsed folder (two views of one project must not yank each other around), the sort (the panel unmounts the pane for Git/Search and the order has to survive the trip back), and where the Remote/Local switch sits. Also home to `useFileSource` (defaults to whichever side is *usable* — a disconnected remote opens on the mirror, not on a Connect prompt) and `useRemoteBlocked` (the gate every SFTP/git probe needs: they are synchronous Tauri commands, so dispatching one at a dead session freezes the window). |
+| `files/ProjectFilesView.tsx` | **The** whole file *viewer* — view switcher (Files / Git / Search / Apps / Orange), inline git action bar + `GitHistory`, `SearchPanel`, tracked-windows list, diverged-files (orange) list, type tags, hover card, SSH logout, import / open-in-OS / downloads / settings — wrapped around `ProjectFilesPane`. Rendered *twice*, by `RightPanel` and by the Files (Project) tab, so the panel and the tab can never drift into two different file *viewers* (the same bargain `ProjectFilesPane` strikes for the tree). Each host owns only what must differ: identity (panel = active project, tab = its own scope), the browsed folder, the `useFileSource` hook, and the panel-only window chrome — injected via the `resizeHandle`/`pin`/`hidden` ReactNode slots, so a tab (which has none) simply passes none. `active` gates git/windows probes + the pill dirty-dot write (a closed panel / background tab never churns); `mountTree` keeps the tree + fs-watch alive (a background tab keeps its tree even when not probing). |
+| `files/ProjectFilesTab.tsx` | The Files (Project) tab: a thin host that renders `ProjectFilesView` (so it has *exactly* the panel's features). It resolves the project from its own `scope` and keeps the browsed folder on the *tab* (`TabEntry.folder`, persisted), which is what makes "Open in a new tab" on a folder mean anything after a restart. Passes no window-chrome slots. Also exports `openProjectFilesTab` (kept here to avoid a `ProjectFilesView`↔tab import cycle). |
+| `files/SubwindowFilesSidebar.tsx` | The per-subwindow right file viewer (◫ on every tab bar, main window and popouts): a resizable column docked on a subwindow's right edge, hosting the SAME `ProjectFilesTab` host the Files (Project) tab is — so all viewer surfaces stay one component. State (`filesOpen`/`filesWidth`/`filesFolder` — open flag, column width, and the browsed folder) lives on the layout tree's `GroupNode`, so it persists with the layout, travels with a detach, reaches a popout via the streamed `files` detached edit, and is freed when the subwindow (group) is dropped; the sidebar renders BESIDE the measured pane region, which is what keeps the main window's flat pane layer from painting over it. |
+| `files/importDrop.tsx` | OS-file drop → copy into the project, with the collision prompt (`useImportDrop`). Shared by the panel and the tab so an import behaves the same wherever it lands. WebKitGTK withholds dropped paths from HTML5 drops and only leaks one via `text/html`, which is why the picker (`⬇`) — not the drop — is the reliable multi-file route. |
+| `files/ProjectFilesSettings.tsx` | The tree's hide-these-endings lists (read from / written to the project's own `project.json`, hence shared by both file views) + the Project Settings dialog that edits them. |
+| `files/FileBrowser.tsx` | The *other* files tab: a two-pane explorer (list/icons, columns, history). Deliberately not the tree — no drag-and-drop, no git markers; both are offered. |
 | `files/GitHistory.tsx` | Commit history / commit / push UI. |
 | `files/SetDefaultAppDialog.tsx` | Pick the default app for a file type. |
 | `embed/EmbedPane.tsx` | Hosts an embedded external app window. |
 | `embed/FileViewerPane.tsx` | In-app viewers (image, markdown, code, TeX/SyncTeX) + shared viewer plumbing. |
-| `embed/pdf/PdfViewer.tsx` | The PDF viewer: pdf.js canvas stack, zoom/find/print toolbar, SyncTeX, page rail. Renders an *arrangement* (`pageModel`), not the file — so reorder/delete/turn/merge are array ops, and nothing is written until Save. |
+| `embed/YamlTree.tsx` | The YAML/JSON structure tree: the editable half of the viewer, the way the rendered preview is markdown's. It renders *rows*, but it edits *text* — every action splices the draft `TextView` already owns, so Tree and Source need no conversion between them and a tree edit is an ordinary dirty/undoable/saveable change. A flow (JSON) container is badged as such, because that is the style its edits will keep. A key wears its `#` comment on its **hover** and a `#` marker when it has one (a config file's comments are the half worth reading, so they are not hidden behind a hover — only their text is). Reordering is a **pointer** drag from the row's grip (HTML5 DnD does not work under WebKitGTK, and mid-gesture listeners get dropped, so every handler is bound to the grip up front); it lives in `YamlRows` because a node can only be reordered **among its siblings** — dragging a key into another mapping is a re-parent, not a reorder. Every entry also has a **copy** button feeding an app-wide buffer (plus the system clipboard as text) and a click-placed **paste cursor**: the cursor only lands where the entry *fits* (`canPasteAfter` — mapping entry into a map, item into a list, block/flow never mixed), so a paste can never tear the file. |
+| `embed/YamlGrid.tsx` | The YAML/JSON **card view** — an *optional* view for structured YAML/JSON, beside Tree (the default) and Source (#yaml-grid; the toggle reads "Cards"). A **drill navigation, not an infinite nest**: one card is "main" at a time; the grid shows a breadcrumb from the document down to it, the main card's *level* (its siblings, so you can step sideways without going up first), and the main card's *children* as the next level below. A card shows only its own **scalar fields** — its nested collections are reached by clicking its title (or its "N groups" footer), which opens it as the new main and reveals them as the next level; a card with no nested collection gets a static (non-clickable) title. With nothing focused the grid is the top overview: a root map is one `document` card, a root list is a card per item. A list item's card is titled by its name-ish field (`name`/`id`/…) or `Item N`, never `#0`. **Cards reorder by dragging** among their siblings — pointer-based from a grip (HTML5 DnD is dropped by WebKitGTK) — committed as one `moveNodeTo` splice, exactly as `YamlRows` does. Like `YamlTree` it renders controls but edits *text* — every action splices the same draft via `lib/viewers/yaml`'s ops (`setValue`; `addChild` for `+ field`/`+ card`/`+ value`; `deleteNode`; `duplicateNode`; `moveNodeTo`), so a card edit is an ordinary dirty/undoable/saveable change and Cards/Tree/Source are three views on one text. A value it can't safely rewrite is shown, not offered (`source only`). `TextView` opens YAML in **Tree** by default; the Cards toggle appears only for a file that nests something to card (no `hasCards` ⇒ hidden), and the card view still needs work. |
+| `embed/TableView.tsx` | The CSV/TSV table (and, read-only, the `.xlsx` sheet). Like `YamlTree`, it renders *rows* but edits *text* — a cell edit splices the draft `useEditableFile` owns, so it is an ordinary dirty/undoable/saveable change and every cell nobody touched keeps its bytes. Hence sort and filter carry each row's **source** index (`RowRef`): a splice must address the row a cell came *from*, not the row it sits on. The separator is a **guess the reader can overrule** — sniffed, then offered in the header (Auto/comma/semicolon/tab/pipe/custom); an override persists per tab, Auto does not. Columns hide by name from `ColumnsMenu` (click to hide, click again to show; multi-select, so it stays open), which is why the row filter searches only the **visible** columns and why hiding is dropped when the delimiter changes — a hidden column is an *index*, and another separator cuts the row into different ones. Only the visible rows render, which is why the column widths are measured over the whole file up front: sized to what is on screen, every column would resize as you scrolled. |
+| `embed/GifView.tsx` | The animated-GIF viewer (#gifviewer): the plain image viewer already *animates* a GIF (the webview animates `<img>` natively) but offers no control, so this one decodes the frames itself (`lib/viewers/gif.ts`) onto a `<canvas>` and adds the transport — play/pause, frame stepping, scrubber, speed, loop, frame/delay readout — over the image viewer's exact zoom/pan (shared exported pieces: `zoomOffset`/`clampScale`/`useNonPassiveWheel`). Playback is a rAF timestamp accumulator, so per-frame delays are honored without drift; authored sub-20ms delays play at the 100ms browser convention. A GIF the decoder can't handle degrades to the native animated `<img>` — never worse than before the viewer existed. No Annotate: flattening to PNG would silently destroy the animation. |
+| `embed/pdf/PdfViewer.tsx` | The PDF viewer: pdf.js canvas stack, zoom/find/print toolbar, SyncTeX, page rail, and the **contents** sidebar (chapters, ☰ at the toolbar's far left). Renders an *arrangement* (`pageModel`), not the file — so reorder/delete/turn/merge are array ops, and nothing is written until Save. |
 | `embed/pdf/pdfDoc.ts` | The open source documents an arrangement draws from, and `buildPdf` — the ONLY place a PDF is written (pdf-lib, on save). |
+| `embed/pdf/outline.ts` | The contents/chapters model (#pdf-outline), pure. `loadOutline` resolves the PDF's **embedded** outline (bookmarks) to 1-based file pages (named + explicit dests); `detectHeadings` is the **font-size fallback** used only when there's no embedded outline — it infers a heading tree from the text's typography (body-size mode, line grouping, running-header drop, nest-by-size). Jumps map a file page to whichever sheet shows it, so they survive page rearrangement. Tested in `src/__tests__/PdfOutline.test.ts`. |
 | `common/PageStrip.tsx` | **The** page-thumbnail strip: drag-reorder, shift-select, turn, delete, right-click. Used twice — horizontally by the print preview, vertically as the PDF viewer's page rail. |
 | `common/mountPageStrip.tsx` | `createRoot` adapter letting the imperative print modal host `PageStrip`. |
 | `common/Dropdown.tsx`, `common/OrbitSpinner.tsx` | Shared primitives. |
@@ -89,6 +106,8 @@ workflow); see `src-tauri/CLAUDE.md` for the backend file map.
 | `activity.ts` | PTY-output activity outside React (`lastOutputByPty`). |
 | `timer.ts` | Per-project time-tracking state. |
 | `usage.ts` | Usage counters: in-memory accumulator (`bumpUsage`) flushed in batches to `usage_bump`, + the recap's read store. |
+| `hpcPipeline.ts` | Open/closed state for the guided HPC pipeline wizard (`docs/quirky-knitting-umbrella` Phase B) — one boolean + open/close, so the **+** menu launches `HpcPipelineWizardHost` (mounted in `AppShell`) without prop-drilling. Mirrors `remoteMachines`. |
+| `hpcJobs.ts` | SLURM jobs this session submitted, per project (`docs/quirky-knitting-umbrella` plan) — so the Jobs view shows a just-submitted job (and can re-open its log) before the next `squeue` poll, and can resolve a job id back to its out-file. `squeue` on the host is the source of truth; this is only the small in-memory memory of "what did I launch, and where's its log" (no persistence — out-paths are re-derivable via `scontrol`). |
 | `calendar.ts` | Global calendars/events/tasks store (one `calendar.json` across all scopes). |
 | `alarms.ts` | Reminder ticker: fires an OS notification + the in-app popup, exactly once each. |
 | `linkRouting.ts` | Routing of clicked links/URIs to viewers or external apps. |
@@ -96,7 +115,7 @@ workflow); see `src-tauri/CLAUDE.md` for the backend file map.
 | `pdfDrag.ts` | Dragging PDF pages between page strips, incl. across two Eldrun windows: strip registry + the `PDF_DRAG_*`/`PDF_DROP_ACK` protocol (OS-cursor stream in physical desktop px; bytes ride the backend `pdf_clip` slot, never the event payload). |
 | `editorJump.ts` | Cross-pane jump-to-location requests. |
 | `vpnPrompt.ts` | State backing `VpnPasswordPrompt`. |
-| `remoteStatus.ts` | Per-project live SSH/VPN connection state for the header lamps. |
+| `remoteStatus.ts` | Live SSH/VPN connection state for the header lamps. `byProject` holds the PRIMARY host (unchanged — the ~300 file/git readers only ever want the primary); **multi-host** worker hosts (`docs/multi_host_remote_plan.md`) live in `byHost[projectId][hostId]`, read via `sshOf`/`vpnOf`/`hostStateOf` which route `"primary"` to `byProject`. `setSsh`/`setVpn` take an optional `hostId`. |
 | `localLoss.ts` | The active project's local-loss log (#28q). Pulled from the backend's on-disk record — not pushed as an event — so a deletion during a background pass, or while the app was closed, still surfaces. |
 | `vpnStatus.ts` | **Machine-level** OpenVPN state, keyed by config path: the tunnel reroutes the whole OS, so it outlives the project view and is shared between projects. Owns the holder refcount (`releaseVpn`) and the `markVpn*` helpers. |
 | `hooks/useKeyboard.ts` | Global keyboard-shortcut hook. |
@@ -104,9 +123,22 @@ workflow); see `src-tauri/CLAUDE.md` for the backend file map.
 | `lib/codexHooks.ts` | Codex hook-trust state + the one-click "open Codex on `/hooks`" fix. |
 | `lib/vpnConnect.ts` | The silent-connect gate: ask `vpn_can_connect_silently` **before** connecting, because `pkexec` prompts the user before OpenVPN validates anything — a doomed attempt costs a polkit dialog, and the modal after it costs a second. Store-free, so `stores/projects` can use it. |
 | `lib/vpnAutoConnect.ts` | "Connect on launch", armed per `.ovpn` (`settings.vpn_auto_connect`): the machine-level twin of a project's `remote.auto_connect`, and like it, never prompts — re-checked at launch, so a stale opt-in leaves the tunnel down. |
+| `lib/i18n.ts` | **The** internationalization module — the ONE place every UI language lives (`en`/`de`/`es`/`fr`/`it`), so adding a string or a language is a single edit here, never a hunt through the tree. Dependency-free: a flat `lang → (key → text)` map with **English as the source of truth** (it holds every key; other languages fall back to English then the raw key, so a half-translated language degrades gracefully). The live language is a tiny zustand store (`useI18nStore`) seeded from a `localStorage` cache (first-paint before settings load) and driven by `applyLanguage`; **switching is instant** — `useT()` subscribers re-render in place, no reload. Persistence rides `Settings.language` (`stores/settings` `setLanguage` + `applyLanguage` on load; broadcast to popouts via `LANGUAGE_CHANGED_EVENT`, mirroring the theme path). Currently wired through the Settings dialog's main panel; extend coverage by routing more strings through `t()`. Tested in `src/__tests__/i18n.test.ts`. |
+| `lib/machineSync.ts` | Keeps a **global machine** (header "Machines") and the **project host** it also is (a project's primary `remote`, or a `compute_hosts` worker) in step. The two are never linked by id — dropping a machine onto a project copies it by *value* — so the only bridge is the **SSH target** (`user@host:port`), which `sameTarget` owns (host case-insensitive, default port 22, empty user ≡ absent; a different login on the same host is a *different* connection). The physical connection genuinely is shared (one ControlMaster per target), so this mostly reconciles two status stores rather than opening a second socket. Two asymmetric rules keep it from looping or lying. **Global → project** is driven *imperatively* from the global store's explicit connect/disconnect actions — never from `probeAll`, whose "connected" only means *reachable*, so mirroring it would paint projects green with no pooled session behind it; for the **active** project it opens/tears the real pool (`remote_connect`/`remote_disconnect` + `remote_kill_all_jobs`), for a loaded-but-inactive one it only mirrors the lamp (its pool opens on activation as always). **Project → global** is a *subscription* (`initMachineSync`, installed once in `AppShell`) that only ever **upgrades** a matching machine to `connected` — `off` is deliberately never propagated upward, because a project deactivating *clears* its lamps and would otherwise knock an independently-connected machine offline. No loop is possible: the global store's `setStatus` never writes `remoteStatus`, so the subscription can't re-enter the imperative path. |
 | `lib/viewers/{fileUtils,markdown,highlight,tex}.ts` | Pure viewer logic (XSS-safe markdown/highlight, TeX, file utils). |
+| `lib/viewers/python.ts` | Python editor intelligence (#87), all pure — every fs touch is injected. Two halves: **breakpoints** (pdb refuses blank/comment lines, so a gutter click *snaps* to the next executable one; a line number re-points at the wrong statement when you type above it, so every edit *remaps* them) and **go-to-definition** (a *lexical* import-graph walk — relative levels, aliases, `__init__` re-exports, src-layout — not a type inferencer). Only names it can actually follow are underlined, so the ctrl+click affordance never lies. |
+| `lib/slurm.ts` | **SLURM run/watch glue for HPC projects** (`docs/quirky-knitting-umbrella` plan), modeled on `pythonRun.ts`. Two halves: (1) **pure text helpers** — `isSlurmScript` (has a `#SBATCH` line), `parseSbatchDirectives`/`directiveValue`/`spliceDirective` (the render-rows/edit-text bargain the YAML/table viewers use: the directive form edits the script's `#SBATCH` lines by **splicing**, never re-serializing, so comments/untouched lines/the flag spelling all survive and each edit is an ordinary dirty/undoable change; short flags fold into their long key); (2) **tab glue** — the **log window** (`tail -n +1 -F <out>`, follows-by-name so it waits out the queue) and the **interactive shell** (`srun --pty … bash -l`, lands on a compute node — the compliant path) are just terminal tabs, exactly as a Python run is, so they inherit host locality + tmux persistence for free. `submitSlurmJob` invokes `slurm_submit`, opens the log tab, and records the job in `stores/hpcJobs`. Passes the file's **absolute** path as the script id so one command works remote or local. Untested until cluster QA. |
+| `lib/pythonRun.ts` | Run/Debug a Python file (#87) by opening a **terminal tab** — not a bespoke exec path. That is what makes it inherit remote-host and container locality for free (the *tab* carries both) and stay a real interactive terminal (`input()`, `Ctrl+C`, output survives exit). Debug is pdb pre-loaded with the gutter's breakpoints (`-c "b f:N" … -c continue`). **Which** Python it runs is asked of the backend (`python_interpreter_for`), never re-derived here: two interpreter rankings that can disagree is a bug waiting to happen, and only the backend can see conda/poetry at all. |
+| `lib/experimental.ts` | The experimental-flag gate: **off for everyone, on in debug mode** (unset ≠ false — it falls back to `settings.debug`, so a flag still moving is invisible to someone *using* Eldrun and present by default for someone *building* it). Read a flag via `useExperimental`, never `settings.<flag> ?? false` — that spelling is what makes a flag miss the debug default. Gates `agent_mode_toggle` and `python_run_debug`. |
+| `lib/tmuxSession.ts` | Persistent remote sessions (TODO #85), the frontend mint + decision helpers. `newTmuxSessionName()` mints the stable `eldrun-<uuid>` a shell tab persists as `TabEntry.tmuxSession` (minted once at creation — the tab's PTY id is *not* stable, `loadFromLayout` regenerates the key, so a derived name would fork a second session on relaunch instead of reattaching). `persistSessionsEnabled` encodes **default ON** (`persist_sessions !== false`); `shouldPersistTab` = a **shell** tab (Python runs open one) on a **remote host** of a persist-enabled project; `shouldPersistLocalTab` = a shell tab running **locally** (a local project, or a remote project's mirror tab) with `persist_local_sessions` on (Unix) — for surviving an Eldrun crash. Never agents, never root. The actual tmux wrap is the backend's; this only mints the name + picks *which* tabs get it. |
+| `lib/closeRemoteTab.ts` | The tab-close (detach) path for a persistent tab (TODO #85). Closing a tab is **non-destructive**: `closeTabWithConfirm` just `removeTab`s, which unmounts the pane and kills only the ssh/PTY *client*, so the tmux session lives on under its daemon and stays reattachable from the Sessions view — a quit/disconnect/crash/respawn all leave it alive too. The *only* way to terminate a session is its **×** (kill) in the Sessions view (`remote_tmux_kill`/`local_tmux_kill`). `persistentSessionOf`/`localPersistentSessionOf` classify which session a tab owns (the Sessions view marks owned rows). Reads the tabs/projects/settings stores, so it lives here — `stores/projects` already imports `stores/tabs`, so a store-level import back would be a cycle. |
+| `lib/viewers/yaml.ts` | The YAML/JSON tree model + its edit ops, all pure. The tree is a **view on the text**: every edit is a surgical splice, never a re-serialization of the parsed model — the only way a config file's **comments** survive an edit, and what lets Tree and Source share one draft. **Both** YAML syntaxes are first-class: *block* (indentation) and *flow* (`{a: 1}` — i.e. **JSON**, inline or spread over lines). Which one a node is written in decides how it is edited (block → line splice, flow → span splice) and the tree keeps the author's choice, so `[a, b]` grows to `[a, b, c]` and is never quietly rewritten into block. `strict` (a `.json` file) is the only dialect knob: no plain scalars, so keys and strings are quoted. **Comments are a node's own, not scenery** — a `#` is the only place YAML documents a key, so each node reads the one behind its value *and* the run directly above it at its own indent, and `setComment` writes back wherever the author already wrote (a new one goes behind, which adds no line). The consequence is in the edits: a comment **travels with its node**, so deleting or reordering a key takes its description along rather than leaving it to re-attach itself to whichever key slid into that place. `moveNodeTo` is the one reorder op (the ↑/↓ buttons are `to = at ± 1`): a drag across five rows is **one** splice, not five swaps — every splice invalidates the offsets after it. A construct it could not rewrite without botching it (anchor, alias, merge key, plain scalar continued across lines) still *renders* but comes back `editable: false`; a line it can't classify at all fails the parse and defers to Source. |
+| `lib/viewers/yamlGrid.ts` | The YAML/JSON **card grid** helpers (#yaml-grid), all pure. `hasCards` is the toggle gate (true when a collection nests another); `isContainer`/`cellKind`/`nestedLabel` classify a node so the card view never offers a control it can't honour — every EDIT is still delegated back to `yaml.ts`'s splice ops (the view-on-text bargain: comments/quoting/untouched bytes survive). Also keeps the **tabular** model (`gridModelFor`/`gridCandidates`/`hasGrid`): the flat rows × columns view of a single list/map-of-records — the card view doesn't render it, but it stays a tested, reusable "is this region a table?" helper. Tested in `src/__tests__/YamlGrid.test.ts`. |
+| `lib/viewers/table.ts` | The CSV/TSV model + its edit ops, all pure. Two things it exists to say. **The separator is guessed, not known** — `.csv` never states which character separates the columns, so assuming comma from the extension is exactly what renders a `;`-delimited export as one tall column; `sniffDelimiter` scores each candidate by parsing a sample *with* it (a comma inside a quoted field cannot fool the `;` reading) and asking how rectangular the result is, rejecting any character that never splits a row however consistently it fails to appear. And **the table is a view on the text**: `parseTable` hands back each cell's source span, so `replaceCell`/`insertRowAfter`/`deleteRow` are surgical splices — the only way editing one cell leaves every other field's quoting, the file's line endings and its delimiter byte-for-byte alone. Same bargain `yaml.ts` strikes for comments. |
+| `lib/viewers/gif.ts` | The GIF decoder, all pure — takes a `Uint8Array`, never touches the fs (WebKitGTK has no `ImageDecoder` API, so frame control means decoding LZW + interlace + disposal 0–3 ourselves; GIF89a is frozen, so no maintenance tail). Two ideas: **every frame composites to a full-canvas RGBA buffer** (GIF has no keyframes — frame N is a patch on N−1's state, so upfront full frames are what make scrubbing O(1); memory is bounded by `maxPixelBytes`, beyond which the result says `truncated`), and **delays are stored as authored, played by convention** (`effectiveDelayMs`: <20ms means "browser default" = 100ms — files were authored against that clamp). Disposal 2 clears to *transparent*, not the spec's background color, because that is what every browser does. Corruption after ≥1 good frame returns the clean prefix + `truncated`; before it, throws. |
 | `lib/viewers/pageModel.ts` | **The** page-arrangement model (`PageRef{id,src,page,rot}` list) shared by the print preview and the PDF page rail: move/delete/rotate/duplicate/insert, all pure. |
 | `lib/usageRollup.ts` | Folds UTC day/hour buckets into today/week/month windows. Generic over the payload — shared by `NetworkTrafficPane` (bytes) and the recap (counters). |
+| `lib/gpu.ts` | The GPU-memory arithmetic shared by its three surfaces (header row, system monitor, local-model menu), pure; sampling is the backend's `gpustat`. The one idea: **GPU memory is the two pools summed** — the dedicated VRAM carve-out *and* the shared pool mapped from system RAM — because on an APU the carve-out is only the framebuffer (~86% full forever, meaningless) while a model actually lands in the shared half; on a discrete card the shared half is 0 and the sum is plain VRAM. Hence `gpuTone` tones by **ratio**: the old row's absolute 1 GB/2 GB thresholds suited a figure counting only Ollama's models and would peg a device-wide one at "hot" permanently. Also home to the **sensor** formatters (`formatTempC`/`formatWatts`/`formatMhz`/`formatFan`/`gpuLinkLabel`) and the `GpuProc` type: each formatter returns `null` for an unreported reading so the UI omits it rather than print a fake zero, and `gpuAdapterTooltip` appends only the sensors the driver actually gave. The system-monitor pane renders these as a per-adapter GPU card (VRAM + Util meters, sensor strip) plus a once-only per-process GPU-memory list (locally from `gpu_process_snapshot`; for a remote source, from the host-sampled `SystemSnapshot.gpu_procs` in the same poll). |
 | `lib/usageMetrics.ts` | The metric keys (mirrors `schema::usage_stats::metric`) + how a tab maps to an agent or a local model. |
 | `lib/promptCount.ts` | "Enter with content pending = one submit" — the prompt/command heuristic, fed from `TerminalView`'s `onData`. |
 | `lib/calendarTime.ts` | Calendar date math: local wall-clock stamps, exclusive ends, overlap layout. |
diff --git a/src/__tests__/AgentMode.test.ts b/src/__tests__/AgentMode.test.ts
index 9ae509e..b2b404f 100644
--- a/src/__tests__/AgentMode.test.ts
+++ b/src/__tests__/AgentMode.test.ts
@@ -32,10 +32,10 @@ function resetStore() {
 }
 
 describe("agent-mode capability gate", () => {
-  it("is Claude-only: it alone has both an absolute mode flag and a working resume", () => {
+  it("admits Claude and Gemini — both have an absolute mode flag and a working resume", () => {
     expect(supportsAgentMode("claude")).toBe(true);
-    // Gemini has --approval-mode but no resume — a respawn would destroy the chat.
-    expect(supportsAgentMode("gemini")).toBe(false);
+    // Gemini has --approval-mode (absolute) AND resumes (continue-last).
+    expect(supportsAgentMode("gemini")).toBe(true);
     // Codex resumes, but has no plan mode (only a read-only sandbox).
     expect(supportsAgentMode("codex")).toBe(false);
     expect(supportsAgentMode("vibe")).toBe(false);
@@ -54,6 +54,20 @@ describe("withAgentMode", () => {
     expect(withAgentMode("claude", [], "auto")).toEqual(["--permission-mode", "acceptEdits"]);
   });
 
+  it("maps Gemini plan → plan and auto → auto_edit (NOT yolo)", () => {
+    expect(withAgentMode("gemini", [], "plan")).toEqual(["--approval-mode", "plan"]);
+    expect(withAgentMode("gemini", [], "auto")).toEqual(["--approval-mode", "auto_edit"]);
+    // "auto" must never reach the auto-approve-ALL level.
+    expect(withAgentMode("gemini", [], "auto")).not.toContain("yolo");
+  });
+
+  it("is idempotent for Gemini too, and re-applies onto its continue-last resume args", () => {
+    let args = withAgentMode("gemini", ["--resume", "latest"], "plan");
+    args = withAgentMode("gemini", args, "auto");
+    expect(args).toEqual(["--resume", "latest", "--approval-mode", "auto_edit"]);
+    expect(args.filter((a) => a === "--approval-mode")).toHaveLength(1);
+  });
+
   it("is idempotent: repeated toggling never stacks the flag", () => {
     let args = withAgentMode("claude", [], "plan");
     args = withAgentMode("claude", args, "auto");
diff --git a/src/__tests__/AppShellClose.test.tsx b/src/__tests__/AppShellClose.test.tsx
index 65ad7f8..95d97d3 100644
--- a/src/__tests__/AppShellClose.test.tsx
+++ b/src/__tests__/AppShellClose.test.tsx
@@ -34,20 +34,26 @@ vi.mock("@tauri-apps/api/event", () => ({ listen: vi.fn().mockResolvedValue(() =
 
 // Paths below are relative to this test file (src/__tests__/), matching the
 // resolved module IDs that AppShell uses (src/stores/ and src/components/layout/).
-vi.mock("../stores/projects", () => ({
-  useProjectsStore: vi.fn((sel: (s: object) => unknown) =>
-    sel({
-      load: vi.fn(),
-      loaded: true,
-      activeId: null,
-      switchToast: null,
-      clearSwitchToast: vi.fn(),
-      projects: [],
-    }),
-  ),
-  // AppShell subscribes to runtime-switch events on mount; provide a no-op.
-  listenProjectRuntimeSwitched: vi.fn().mockResolvedValue(() => {}),
-}));
+vi.mock("../stores/projects", () => {
+  const state = {
+    load: vi.fn(),
+    loaded: true,
+    activeId: null,
+    switchToast: null,
+    clearSwitchToast: vi.fn(),
+    projects: [],
+  };
+  return {
+    // The close handler reads the store imperatively (getState) to flush the
+    // active scope's tab layout, so the mock must carry it alongside the hook.
+    useProjectsStore: Object.assign(
+      vi.fn((sel: (s: object) => unknown) => sel(state)),
+      { getState: () => state },
+    ),
+    // AppShell subscribes to runtime-switch events on mount; provide a no-op.
+    listenProjectRuntimeSwitched: vi.fn().mockResolvedValue(() => {}),
+  };
+});
 vi.mock("../stores/settings", () => ({
   useSettingsStore: vi.fn((sel: (s: object) => unknown) =>
     sel({ load: vi.fn() }),
diff --git a/src/__tests__/CenterPanelSessionRestore.test.tsx b/src/__tests__/CenterPanelSessionRestore.test.tsx
index 4b9defb..ce00360 100644
--- a/src/__tests__/CenterPanelSessionRestore.test.tsx
+++ b/src/__tests__/CenterPanelSessionRestore.test.tsx
@@ -318,13 +318,39 @@ describe("loadFromLayout — resume args", () => {
     expect(tab.sessionId).toBeUndefined();
   });
 
-  it("non-resumable agent (gemini) with a sessionId gets no resume args", () => {
+  it("continue-last agent (gemini) restores with --resume latest and carries sessionId", () => {
     const layout = [
       { key: "agent-1", label: "gemini", cmd: "gemini", cwd: "/stale", kind: "agent" as const, sessionId: "abc" },
     ];
 
     useTabsStore.getState().loadFromLayout(layout, "/project-r-dir", "project-r");
 
+    const tab = useTabsStore.getState().tabsByScope["project-r"]![0];
+    // Gemini's `--resume` continues the project's most-recent session ("latest"),
+    // since its `--resume` takes latest/index, not the launch uuid.
+    expect(tab.args).toEqual(["--resume", "latest"]);
+    expect(tab.sessionId).toBe("abc");
+  });
+
+  it("continue-last agent (Mistral/vibe) restores with --continue and carries sessionId", () => {
+    const layout = [
+      { key: "agent-1", label: "vibe", cmd: "vibe", cwd: "/stale", kind: "agent" as const, sessionId: "vibe-key-1" },
+    ];
+
+    useTabsStore.getState().loadFromLayout(layout, "/project-r-dir", "project-r");
+
+    const tab = useTabsStore.getState().tabsByScope["project-r"]![0];
+    expect(tab.args).toEqual(["--continue"]);
+    expect(tab.sessionId).toBe("vibe-key-1");
+  });
+
+  it("agent with no wired resume (aider) with a sessionId gets no resume args", () => {
+    const layout = [
+      { key: "agent-1", label: "aider", cmd: "aider", cwd: "/stale", kind: "agent" as const, sessionId: "abc" },
+    ];
+
+    useTabsStore.getState().loadFromLayout(layout, "/project-r-dir", "project-r");
+
     const tab = useTabsStore.getState().tabsByScope["project-r"]![0];
     expect(tab.args).toEqual([]);
     // sessionId is still carried through (durable), but no resume launch.
diff --git a/src/__tests__/CloneImport.test.ts b/src/__tests__/CloneImport.test.ts
new file mode 100644
index 0000000..d62541f
--- /dev/null
+++ b/src/__tests__/CloneImport.test.ts
@@ -0,0 +1,61 @@
+import { describe, expect, it } from "vitest";
+import { isCloneUrl, repoNameFromCloneUrl, sanitizeName } from "../components/projects/scaffold";
+
+// The import dialog's "GitHub / GitLab repository (clone)" source. `isCloneUrl`
+// gates the Import button; the backend's `validate_clone_url` is the real guard
+// and these cases are kept in step with its Rust tests.
+describe("clone URL validation", () => {
+  it("accepts the supported URL forms", () => {
+    for (const url of [
+      "https://github.com/owner/repo.git",
+      "https://gitlab.com/group/sub/repo",
+      "http://git.internal/owner/repo.git",
+      "ssh://git@github.com:22/owner/repo.git",
+      "git://git.internal/repo.git",
+      "git@github.com:owner/repo.git",
+      "gitlab.com:group/repo.git",
+      "  https://github.com/owner/repo.git  ",
+    ]) {
+      expect(isCloneUrl(url), url).toBe(true);
+    }
+  });
+
+  it("rejects everything else", () => {
+    for (const url of [
+      "",
+      "   ",
+      // git's transport-helper form: `ext::<command>` RUNS the command.
+      "ext::sh -c 'touch /tmp/pwned'",
+      "file:///etc",
+      "/etc/passwd",
+      "../repo",
+      "github.com/owner/repo",
+      "--upload-pack=x:y",
+    ]) {
+      expect(isCloneUrl(url), url).toBe(false);
+    }
+  });
+});
+
+describe("project name from a clone URL", () => {
+  it("takes the repository's own name, without .git", () => {
+    expect(repoNameFromCloneUrl("https://github.com/owner/my-repo.git")).toBe("my-repo");
+    expect(repoNameFromCloneUrl("https://gitlab.com/group/sub/my-repo")).toBe("my-repo");
+    expect(repoNameFromCloneUrl("git@github.com:owner/my-repo.git")).toBe("my-repo");
+    // A trailing slash (copied from the browser's address bar) is not a segment.
+    expect(repoNameFromCloneUrl("https://github.com/owner/my-repo/")).toBe("my-repo");
+    // scp-like with no path separator: the repo is the whole path.
+    expect(repoNameFromCloneUrl("git@host:repo.git")).toBe("repo");
+  });
+
+  it("yields nothing name-like for an empty URL", () => {
+    expect(repoNameFromCloneUrl("")).toBe("");
+    expect(repoNameFromCloneUrl("   ")).toBe("");
+  });
+
+  it("survives sanitizing into the destination folder name", () => {
+    // The clone lands at `<location>/<sanitizeName(name)>`, so a repo name with
+    // characters the project-name sanitizer strips must still yield a folder.
+    expect(sanitizeName(repoNameFromCloneUrl("https://github.com/owner/My.Repo.git"))).toBe("my-repo");
+  });
+});
diff --git a/src/__tests__/CustomAgents.test.ts b/src/__tests__/CustomAgents.test.ts
new file mode 100644
index 0000000..b6dd20f
--- /dev/null
+++ b/src/__tests__/CustomAgents.test.ts
@@ -0,0 +1,93 @@
+/**
+ * Custom agents (Settings.custom_agents): a user-defined CLI offered in the
+ * add-tab menu's Agents group. These tests lock in the two pure helpers that
+ * make a custom agent behave like a built-in one — `buildStaticTabSpec` (the
+ * launch-spec builder, including the resume-flag → restart-resumable promotion)
+ * and `agentMenuEntries` (the shared Agents-group row builder).
+ */
+import { describe, it, expect } from "vitest";
+
+import {
+  agentMenuEntries,
+  buildStaticTabSpec,
+  customAgentToItem,
+} from "../components/tabs/newTabItems";
+import { isResumableAgentTab } from "../stores/tabs";
+import type { CustomAgent } from "../types";
+
+describe("buildStaticTabSpec — custom agents", () => {
+  it("launches a bare custom agent as a launch-only agent tab", () => {
+    const ca: CustomAgent = { id: "1", label: "Mine", cmd: "my-agent" };
+    const spec = buildStaticTabSpec(customAgentToItem(ca), "/proj", "Proj");
+    expect(spec.kind).toBe("agent");
+    expect(spec.cmd).toBe("my-agent");
+    expect(spec.args).toEqual([]);
+    // No resume flag → not restart-resumable → no minted session id / tab uid.
+    expect(spec.resumeArgs).toBeUndefined();
+    expect(spec.sessionId).toBeUndefined();
+    expect(spec.env?.ELDRUN_TAB_UID).toBeUndefined();
+    expect(isResumableAgentTab({ ...spec })).toBe(false);
+  });
+
+  it("prepends the custom agent's own args", () => {
+    const ca: CustomAgent = {
+      id: "1",
+      label: "Mine",
+      cmd: "my-agent",
+      args: ["--model", "x"],
+    };
+    const spec = buildStaticTabSpec(customAgentToItem(ca), "/proj", "Proj");
+    expect(spec.args).toEqual(["--model", "x"]);
+  });
+
+  it("promotes a custom agent with a resume flag to restart-resumable", () => {
+    const ca: CustomAgent = {
+      id: "1",
+      label: "Mine",
+      cmd: "my-agent",
+      resumeArgs: ["--continue"],
+    };
+    const spec = buildStaticTabSpec(customAgentToItem(ca), "/proj", "Proj");
+    expect(spec.resumeArgs).toEqual(["--continue"]);
+    // A session id is minted so the tab satisfies the persistence gate, and the
+    // tab is tagged with the ELDRUN_TAB_UID env var like the built-in resumables.
+    expect(typeof spec.sessionId).toBe("string");
+    expect(spec.env?.ELDRUN_TAB_UID).toBe(spec.sessionId);
+    expect(isResumableAgentTab({ ...spec })).toBe(true);
+  });
+});
+
+describe("agentMenuEntries", () => {
+  const custom: CustomAgent[] = [
+    { id: "a", label: "Present", cmd: "here" },
+    { id: "b", label: "Absent", cmd: "gone" },
+  ];
+
+  it("lists installed built-ins, then custom agents, then the add row", () => {
+    const entries = agentMenuEntries({
+      installedBuiltins: new Set(["claude"]),
+      installedCmds: new Set(["here"]),
+      customAgents: custom,
+      pick: () => {},
+      onAddCustom: () => {},
+    });
+    const labels = entries.map((e) => e.label);
+    expect(labels).toEqual(["Claude", "Present", "Absent (not found)", "Add agent…"]);
+    // The known-missing custom agent is greyed out; the present one is pickable.
+    const present = entries.find((e) => e.key === "custom:a");
+    const absent = entries.find((e) => e.key === "custom:b");
+    expect(present?.disabled).toBeFalsy();
+    expect(absent?.disabled).toBe(true);
+  });
+
+  it("hides built-ins until their probe resolves, but the add row is always present", () => {
+    const entries = agentMenuEntries({
+      installedBuiltins: null,
+      installedCmds: null,
+      customAgents: [],
+      pick: () => {},
+      onAddCustom: () => {},
+    });
+    expect(entries.map((e) => e.key)).toEqual(["__add_custom_agent__"]);
+  });
+});
diff --git a/src/__tests__/DefaultAppExecMatch.test.ts b/src/__tests__/DefaultAppExecMatch.test.ts
new file mode 100644
index 0000000..7132da9
--- /dev/null
+++ b/src/__tests__/DefaultAppExecMatch.test.ts
@@ -0,0 +1,52 @@
+import { describe, expect, it } from "vitest";
+import { execMatchesApp } from "../components/files/SetDefaultAppDialog";
+
+describe("execMatchesApp", () => {
+  it("matches an exact single-word exec", () => {
+    expect(execMatchesApp("gimp-3.2", "gimp-3.2")).toBe(true);
+    expect(execMatchesApp("vim", "gimp-3.2")).toBe(false);
+  });
+
+  it("matches when the saved exec is the app's command plus trailing args", () => {
+    // sharun AppImage: the saved exec carries the `kicad` binary selector the
+    // `.desktop` Exec lacks — re-selecting KiCad must still count as a match.
+    expect(
+      execMatchesApp(
+        "/opt/kicad-10.0.3-x86_64.AppImage kicad",
+        "/opt/kicad-10.0.3-x86_64.AppImage",
+      ),
+    ).toBe(true);
+  });
+
+  it("matches a full multi-word launcher line exactly (Flatpak)", () => {
+    const line =
+      "/usr/bin/flatpak run --branch=stable com.prusa3d.PrusaSlicer";
+    expect(execMatchesApp(line, line)).toBe(true);
+  });
+
+  it("does not match when the app command is longer than the saved exec", () => {
+    expect(
+      execMatchesApp(
+        "/opt/kicad-10.0.3-x86_64.AppImage",
+        "/opt/kicad-10.0.3-x86_64.AppImage kicad",
+      ),
+    ).toBe(false);
+  });
+
+  it("does not match a different program", () => {
+    expect(
+      execMatchesApp("/opt/kicad-10.0.3-x86_64.AppImage kicad", "/usr/bin/gimp"),
+    ).toBe(false);
+  });
+
+  it("treats an empty saved exec as no match", () => {
+    expect(execMatchesApp("", "gimp-3.2")).toBe(false);
+    expect(execMatchesApp("   ", "gimp-3.2")).toBe(false);
+  });
+
+  it("ignores surrounding and repeated whitespace", () => {
+    expect(
+      execMatchesApp("  /opt/app.AppImage   kicad ", "/opt/app.AppImage"),
+    ).toBe(true);
+  });
+});
diff --git a/src/__tests__/DetachFromRemote.test.ts b/src/__tests__/DetachFromRemote.test.ts
new file mode 100644
index 0000000..abdf486
--- /dev/null
+++ b/src/__tests__/DetachFromRemote.test.ts
@@ -0,0 +1,141 @@
+/**
+ * Detaching a project from its SSH host must re-point its tabs.
+ *
+ * The live bug this pins (SimpleGNN): while a project is remote its `directory` is the
+ * state dir `~/.local/share/eldrun/remote-projects/<id>/`, and `loadFromLayout` stores
+ * exactly that as every tab's `cwd`. Nothing ever noticed, because `localTabCwd` rewrote
+ * it at render time to the real mirror — an override gated on `isRemoteProject`.
+ *
+ * Detach flips that gate to false. The override stops firing, every tab falls back to the
+ * stored cwd it should never have had, and agents relaunch inside the state dir — which
+ * detach has just emptied. Claude keys its session history by cwd, so `--resume` then finds
+ * no conversation (it lives under the mirror's path) and the agent starts asking for
+ * permissions under `.local/share/eldrun/remote-projects/…`.
+ *
+ * So: the fallback path is real, it is reachable, and `detachScopeFromRemote` is what keeps
+ * it from being taken.
+ */
+import { describe, it, expect, beforeEach, vi } from "vitest";
+
+import { invoke } from "@tauri-apps/api/core";
+
+vi.mock("@tauri-apps/api/core", () => ({ invoke: vi.fn(() => Promise.resolve()) }));
+
+import { localTabCwd, useTabsStore, type TabEntry } from "../stores/tabs";
+
+const STATE_DIR = "/home/u/.local/share/eldrun/remote-projects/pid";
+const MIRROR = "/home/u/Documents/CodeProjectsGit/SimpleGNN";
+
+function tab(over: Partial<TabEntry>): TabEntry {
+  return {
+    key: "agent-1",
+    label: "Claude",
+    cmd: "claude",
+    args: [],
+    env: {},
+    cwd: STATE_DIR,
+    kind: "agent",
+    scope: "pid",
+    ...over,
+  } as TabEntry;
+}
+
+function seed(tabs: TabEntry[]) {
+  useTabsStore.setState({
+    scope: "pid",
+    tabsByScope: { pid: tabs },
+    layoutByScope: { pid: null },
+    focusedGroupByScope: { pid: null },
+    tabs,
+    layout: null,
+    focusedGroupId: null,
+    activeKey: null,
+  });
+}
+
+beforeEach(() => {
+  vi.mocked(invoke).mockClear();
+});
+
+describe("localTabCwd — why detach breaks tabs", () => {
+  it("hides the bad cwd while remote, and exposes it the instant the project is local", () => {
+    const t = { kind: "agent" as const, location: "local" as const };
+
+    // Remote: the stored state-dir cwd is overridden by the mirror. Looks fine.
+    expect(
+      localTabCwd(t, {
+        isRemoteProject: true,
+        projectDirectory: STATE_DIR,
+        fallback: STATE_DIR,
+        mirror: MIRROR,
+      }),
+    ).toBe(MIRROR);
+
+    // Detached: no override — the tab falls straight back to the cwd it was storing all
+    // along. THIS is the `.local/share/eldrun/remote-projects/…` the agent ends up in.
+    expect(
+      localTabCwd(t, {
+        isRemoteProject: false,
+        projectDirectory: MIRROR,
+        fallback: STATE_DIR,
+        mirror: null,
+      }),
+    ).toBe(STATE_DIR);
+  });
+});
+
+describe("detachScopeFromRemote", () => {
+  it("moves every tab's cwd out of the state dir and into the promoted mirror", () => {
+    seed([
+      tab({ key: "agent-1", cwd: STATE_DIR, location: "local" }),
+      tab({ key: "agent-2", cwd: `${STATE_DIR}/sub`, location: "local", label: "Claude 2" }),
+    ]);
+
+    useTabsStore.getState().detachScopeFromRemote("pid", STATE_DIR, MIRROR);
+
+    const tabs = useTabsStore.getState().tabsByScope.pid;
+    expect(tabs[0].cwd).toBe(MIRROR);
+    // A cwd *under* the old dir keeps its suffix rather than being flattened.
+    expect(tabs[1].cwd).toBe(`${MIRROR}/sub`);
+    // And the resolver now agrees, because the fallback is finally correct.
+    expect(
+      localTabCwd(tabs[0], {
+        isRemoteProject: false,
+        projectDirectory: MIRROR,
+        fallback: tabs[0].cwd,
+        mirror: null,
+      }),
+    ).toBe(MIRROR);
+  });
+
+  it("brings host-located tabs home — their cwd is a path on a machine we no longer have", () => {
+    seed([
+      tab({ key: "shell-1", kind: "shell", cmd: "bash", cwd: "/home/remote/Code/simplegnn", location: "remote" }),
+    ]);
+
+    useTabsStore.getState().detachScopeFromRemote("pid", STATE_DIR, MIRROR);
+
+    const t = useTabsStore.getState().tabsByScope.pid[0];
+    expect(t.cwd).toBe(MIRROR);
+    expect(t.location).toBeUndefined(); // back to the kind's default (local)
+  });
+
+  it("leaves a tab already sitting in the mirror alone", () => {
+    seed([tab({ key: "shell-1", kind: "shell", cmd: "bash", cwd: `${MIRROR}/src`, location: "local" })]);
+
+    useTabsStore.getState().detachScopeFromRemote("pid", STATE_DIR, MIRROR);
+
+    expect(useTabsStore.getState().tabsByScope.pid[0].cwd).toBe(`${MIRROR}/src`);
+  });
+
+  it("is a no-op when there is nothing to move", () => {
+    seed([tab({ key: "agent-1", cwd: MIRROR, location: "local" })]);
+    const before = useTabsStore.getState().tabsByScope.pid;
+
+    useTabsStore.getState().detachScopeFromRemote("pid", STATE_DIR, MIRROR);
+    useTabsStore.getState().detachScopeFromRemote("pid", MIRROR, MIRROR); // same dir
+    useTabsStore.getState().detachScopeFromRemote("pid", "", MIRROR); // no old dir
+
+    expect(useTabsStore.getState().tabsByScope.pid).toBe(before);
+  });
+});
diff --git a/src/__tests__/DetachedHost.test.ts b/src/__tests__/DetachedHost.test.ts
index b54c736..1e6f37b 100644
--- a/src/__tests__/DetachedHost.test.ts
+++ b/src/__tests__/DetachedHost.test.ts
@@ -61,6 +61,7 @@ import {
   DETACHED_EDIT,
   DETACHED_DOCK,
   DETACHED_CLOSE,
+  DETACHED_HIDE,
   detachedSeedEvent,
   type DetachedSeed,
 } from "../stores/detached";
@@ -79,6 +80,7 @@ function reset() {
     layoutByScope: {},
     focusedGroupByScope: {},
     detachedGroupsByScope: {},
+    hiddenGroupsByScope: {},
     tabs: [],
     layout: null,
     focusedGroupId: null,
@@ -110,6 +112,7 @@ describe("detached host (#42)", () => {
     expect(handlers.has(DETACHED_EDIT)).toBe(true);
     expect(handlers.has(DETACHED_DOCK)).toBe(true);
     expect(handlers.has(DETACHED_CLOSE)).toBe(true);
+    expect(handlers.has(DETACHED_HIDE)).toBe(true);
   });
 
   it("a seed request emits the group's tabs + subtree to the requesting label", async () => {
@@ -175,6 +178,43 @@ describe("detached host (#42)", () => {
     expect(payloadSeed.tabs.map((t) => t.key)).toEqual([bKey, newKey]);
   });
 
+  it("an 'add' edit with a side edge carves a NEW pane in the popout (a file dropped on a body edge)", async () => {
+    const { groupId, label, bKey } = detachSecond();
+    await listenDetachedHost();
+    emitted.length = 0;
+
+    handlers.get(DETACHED_EDIT)!({
+      payload: {
+        scope: "p",
+        groupId,
+        edit: {
+          kind: "add",
+          targetGroupId: groupId,
+          edge: "right",
+          tab: { label: "readme.md", cmd: "", cwd: "/p", kind: "embed", embedPath: "/p/readme.md" },
+        },
+      },
+    });
+
+    // The popout's subtree is now a split: the original group + a NEW group
+    // holding the dropped file's embed tab (the target's own tab is untouched).
+    const rec = useTabsStore.getState().detachedGroupsByScope["p"]![0];
+    const sub = rec.subtree as { type: string; children: GroupNode[] };
+    expect(sub.type).toBe("split");
+    expect(sub.children).toHaveLength(2);
+    const original = sub.children.find((g) => g.tabKeys.includes(bKey))!;
+    const carved = sub.children.find((g) => !g.tabKeys.includes(bKey))!;
+    expect(original.tabKeys).toEqual([bKey]);
+    expect(carved.tabKeys).toHaveLength(1);
+    const newKey = carved.tabKeys[0];
+    // The embed payload lives in the main store (its pane mounts + owns anything).
+    const payload = useTabsStore.getState().tabsByScope["p"]!.find((t) => t.key === newKey);
+    expect(payload).toMatchObject({ kind: "embed", embedPath: "/p/readme.md", scope: "p" });
+    // The popout is re-seeded with the landed key so it renders the new pane.
+    const seed = emitted.find((e) => e.event === detachedSeedEvent(label));
+    expect((seed!.payload as DetachedSeed & { landedKey?: string }).landedKey).toBe(newKey);
+  });
+
   it("an active-scope dock re-docks the group and closes the OS window", async () => {
     const { groupId, label } = detachSecond();
     await listenDetachedHost();
@@ -199,6 +239,45 @@ describe("detached host (#42)", () => {
     expect(invokeMock).toHaveBeenCalledWith("attach_subwindow", { registryId: label });
   });
 
+  it("a hide parks the group in the scope's Hidden list, keeps its tabs, and closes the window", async () => {
+    const { groupId, label, bKey } = detachSecond();
+    await listenDetachedHost();
+    invokeMock.mockClear();
+
+    handlers.get(DETACHED_HIDE)!({ payload: { scope: "p", groupId } });
+
+    // Moved out of the detached record and into the scope's hidden list…
+    expect(useTabsStore.getState().detachedGroupsByScope["p"]).toHaveLength(0);
+    const hidden = useTabsStore.getState().hiddenGroupsByScope["p"];
+    expect(hidden).toHaveLength(1);
+    expect(hidden![0].id).toBe(groupId);
+    // …with its tab payload intact (PTY stays mounted, unlike a WM-close)…
+    expect(useTabsStore.getState().tabsByScope["p"]?.some((t) => t.key === bKey)).toBe(true);
+    expect(invokeMock).not.toHaveBeenCalledWith("pty_kill", expect.anything());
+    // …and the OS window closed (registry entry dropped).
+    expect(invokeMock).toHaveBeenCalledWith("attach_subwindow", { registryId: label });
+  });
+
+  it("a hide persists the (parked) scope so it restores as hidden, not detached", async () => {
+    const { groupId } = detachSecond();
+    useTabsStore.setState({ scope: "other" });
+    useProjectsStore.setState({
+      projects: [{ id: "p", name: "p", local_file: "/p/project.json" } as never],
+    });
+    await listenDetachedHost();
+    invokeMock.mockClear();
+
+    handlers.get(DETACHED_HIDE)!({ payload: { scope: "p", groupId } });
+
+    // The record still moved to hidden even for an inactive scope…
+    expect(useTabsStore.getState().hiddenGroupsByScope["p"]).toHaveLength(1);
+    // …and the scope is persisted so disk agrees (saved as hidden).
+    expect(invokeMock).toHaveBeenCalledWith(
+      "save_tab_layout",
+      expect.objectContaining({ localFile: "/p/project.json" }),
+    );
+  });
+
   it("a WM-close drops the group's tabs (no dock-back), kills their PTYs, and closes the window", async () => {
     const { groupId, label, bKey } = detachSecond();
     await listenDetachedHost();
diff --git a/src/__tests__/DetachedPaneDock.test.ts b/src/__tests__/DetachedPaneDock.test.ts
new file mode 100644
index 0000000..6ac8391
--- /dev/null
+++ b/src/__tests__/DetachedPaneDock.test.ts
@@ -0,0 +1,223 @@
+/**
+ * #42: dragging ONE PANE (inner group) out of a MULTI-pane detached popout.
+ *
+ * Regression for the "pane drop docked EVERY subwindow" bug: the pane's bar grip
+ * used to start a whole-popout drag, so releasing it over the main window ran
+ * `attachGroup(popoutId)` and re-injected the popout's ENTIRE subtree — every
+ * sibling pane — into the main layout. The pane path must move ONLY the dragged
+ * group and leave the siblings floating.
+ *
+ * Covers: the pure `decideDetachedPaneDrop` ladder, `attachDetachedPane`
+ * (multi-pane extraction, sibling survival, lone-pane delegation to the
+ * whole-group dock), and `detachPaneToNewWindow` (free-space release; lone-pane
+ * refusal).
+ */
+import { describe, it, expect, beforeEach, vi } from "vitest";
+
+const { invokeMock } = vi.hoisted(() => ({
+  invokeMock: vi.fn((..._a: unknown[]) => Promise.resolve(undefined)),
+}));
+vi.mock("@tauri-apps/api/core", () => ({ invoke: (...a: unknown[]) => invokeMock(...a) }));
+
+import { decideDetachedPaneDrop } from "../stores/detached";
+import {
+  useTabsStore,
+  allGroups,
+  orderedTabKeys,
+  type GroupNode,
+  type SplitNode,
+} from "../stores/tabs";
+
+const base = {
+  cancelled: false,
+  shift: false,
+  inMain: false,
+  overPopoutId: null as string | null,
+  srcGroupId: "src",
+};
+
+describe("decideDetachedPaneDrop", () => {
+  it("cancelled → none, winning over everything else", () => {
+    expect(decideDetachedPaneDrop({ ...base, cancelled: true }).kind).toBe("none");
+    expect(
+      decideDetachedPaneDrop({
+        ...base,
+        cancelled: true,
+        shift: true,
+        inMain: true,
+        overPopoutId: "b",
+      }).kind,
+    ).toBe("none");
+  });
+
+  it("Shift → newWindow, overriding main and popouts", () => {
+    expect(decideDetachedPaneDrop({ ...base, shift: true }).kind).toBe("newWindow");
+    expect(decideDetachedPaneDrop({ ...base, shift: true, inMain: true }).kind).toBe("newWindow");
+    expect(decideDetachedPaneDrop({ ...base, shift: true, overPopoutId: "b" }).kind).toBe(
+      "newWindow",
+    );
+  });
+
+  it("over a SIBLING popout → none (no pane→popout merge), even over main", () => {
+    expect(decideDetachedPaneDrop({ ...base, overPopoutId: "b" }).kind).toBe("none");
+    expect(decideDetachedPaneDrop({ ...base, overPopoutId: "b", inMain: true }).kind).toBe("none");
+  });
+
+  it("the SOURCE popout doesn't count as a sibling — inMain still docks", () => {
+    expect(decideDetachedPaneDrop({ ...base, overPopoutId: "src", inMain: true }).kind).toBe(
+      "dockMain",
+    );
+  });
+
+  it("over the main window → dockMain; free space → newWindow", () => {
+    expect(decideDetachedPaneDrop({ ...base, inMain: true }).kind).toBe("dockMain");
+    expect(decideDetachedPaneDrop({ ...base }).kind).toBe("newWindow");
+  });
+});
+
+function tab(label: string) {
+  return { label, cmd: "bash", cwd: "/p", kind: "shell" as const };
+}
+
+function reset() {
+  invokeMock.mockClear();
+  useTabsStore.setState({
+    scope: "p",
+    tabsByScope: {},
+    layoutByScope: {},
+    focusedGroupByScope: {},
+    detachedGroupsByScope: {},
+    pendingRespawnByScope: {},
+    tabs: [],
+    layout: null,
+    focusedGroupId: null,
+    activeKey: null,
+  });
+}
+
+/**
+ * Build the bug's exact shape: a main layout of [a] plus a detached TWO-pane
+ * popout holding [b] and [c] (detach a two-tab group, then split it inside the
+ * popout). Returns the popout id + the two inner pane groups.
+ */
+function twoPanePopout() {
+  const store = useTabsStore.getState();
+  const a = store.addTab(tab("a"));
+  const b = store.addTab(tab("b"));
+  const c = store.addTab(tab("c"));
+  const rootGid = (useTabsStore.getState().layout as GroupNode).id;
+  // Move b+c into their own group to the right, then detach that group.
+  useTabsStore.getState().splitWithTab(b.key, rootGid, "right");
+  const right = (useTabsStore.getState().layout as SplitNode).children[1] as GroupNode;
+  useTabsStore.getState().moveTab(c.key, right.id);
+  const label = useTabsStore.getState().detachGroup(right.id)!;
+  expect(label).toBeTruthy();
+  const popoutId = right.id;
+  // Split inside the popout: [b] | [c].
+  useTabsStore.getState().splitDetachedGroup("p", popoutId, c.key, popoutId, "right");
+  const entry = useTabsStore.getState().detachedGroupsByScope.p.find((d) => d.id === popoutId)!;
+  const panes = allGroups(entry.subtree);
+  expect(panes).toHaveLength(2);
+  const paneB = panes.find((g) => g.tabKeys.includes(b.key))!;
+  const paneC = panes.find((g) => g.tabKeys.includes(c.key))!;
+  return { a, b, c, popoutId, paneB, paneC };
+}
+
+describe("tabs store — attachDetachedPane (#42)", () => {
+  beforeEach(reset);
+
+  it("docks ONLY the dragged pane; the sibling pane stays floating (the regression)", () => {
+    const { a, b, c, popoutId, paneC } = twoPanePopout();
+    invokeMock.mockClear();
+
+    useTabsStore.getState().attachDetachedPane("p", popoutId, paneC.id);
+
+    // Main layout gained exactly c — never b (the old bug docked the whole subtree).
+    const mainKeys = orderedTabKeys(useTabsStore.getState().layout);
+    expect(mainKeys).toContain(a.key);
+    expect(mainKeys).toContain(c.key);
+    expect(mainKeys).not.toContain(b.key);
+    // The popout survives, holding just the remaining pane.
+    const entry = useTabsStore.getState().detachedGroupsByScope.p.find((d) => d.id === popoutId)!;
+    expect(entry).toBeTruthy();
+    expect(orderedTabKeys(entry.subtree)).toEqual([b.key]);
+    // Its OS window must NOT close.
+    expect(invokeMock).not.toHaveBeenCalledWith("attach_subwindow", expect.anything());
+    // No payload lost or duplicated.
+    expect(useTabsStore.getState().tabsByScope.p).toHaveLength(3);
+  });
+
+  it("merges into a center target group instead of splitting when asked", () => {
+    const { a, c, popoutId, paneC } = twoPanePopout();
+    const mainGroup = allGroups(useTabsStore.getState().layout)[0];
+    useTabsStore
+      .getState()
+      .attachDetachedPane("p", popoutId, paneC.id, { targetGroupId: mainGroup.id, edge: "center" });
+    const groups = allGroups(useTabsStore.getState().layout);
+    const merged = groups.find((g) => g.id === mainGroup.id)!;
+    expect(merged.tabKeys).toEqual([a.key, c.key]);
+    expect(merged.activeKey).toBe(c.key);
+  });
+
+  it("the popout's ONLY pane delegates to the whole-group dock (window closes)", () => {
+    const { b, c, popoutId, paneB, paneC } = twoPanePopout();
+    useTabsStore.getState().attachDetachedPane("p", popoutId, paneC.id);
+    invokeMock.mockClear();
+    // Now the popout is single-pane; its subtree root collapsed to paneB's group.
+    useTabsStore.getState().attachDetachedPane("p", popoutId, paneB.id);
+    const mainKeys = orderedTabKeys(useTabsStore.getState().layout);
+    expect(mainKeys).toContain(b.key);
+    expect(mainKeys).toContain(c.key);
+    expect(useTabsStore.getState().detachedGroupsByScope.p).toHaveLength(0);
+    expect(invokeMock).toHaveBeenCalledWith("attach_subwindow", expect.anything());
+  });
+
+  it("no-ops when the popout or pane is gone", () => {
+    const { popoutId, paneC } = twoPanePopout();
+    const before = useTabsStore.getState();
+    useTabsStore.getState().attachDetachedPane("p", "nope", paneC.id);
+    useTabsStore.getState().attachDetachedPane("p", popoutId, "nope");
+    expect(useTabsStore.getState().layout).toBe(before.layout);
+    expect(useTabsStore.getState().detachedGroupsByScope).toBe(before.detachedGroupsByScope);
+  });
+});
+
+describe("tabs store — detachPaneToNewWindow (#42)", () => {
+  beforeEach(reset);
+
+  it("pops the pane into its own popout, leaving the sibling in the source", () => {
+    const { b, c, popoutId, paneC } = twoPanePopout();
+    invokeMock.mockClear();
+    const bounds = { x: 10, y: 20, w: 900, h: 640 };
+
+    const label = useTabsStore.getState().detachPaneToNewWindow("p", popoutId, paneC.id, bounds);
+
+    expect(label).toBeTruthy();
+    const entries = useTabsStore.getState().detachedGroupsByScope.p;
+    expect(entries).toHaveLength(2);
+    const src = entries.find((d) => d.id === popoutId)!;
+    const fresh = entries.find((d) => d.label === label)!;
+    expect(orderedTabKeys(src.subtree)).toEqual([b.key]);
+    expect(orderedTabKeys(fresh.subtree)).toEqual([c.key]);
+    expect(fresh.bounds).toEqual(bounds);
+    expect(invokeMock).toHaveBeenCalledWith("detach_subwindow", expect.objectContaining({
+      projectId: "p",
+      x: 10,
+      y: 20,
+    }));
+  });
+
+  it("refuses the popout's only pane — it already IS that pane's window", () => {
+    const { popoutId, paneC } = twoPanePopout();
+    useTabsStore.getState().attachDetachedPane("p", popoutId, paneC.id);
+    const entry = useTabsStore.getState().detachedGroupsByScope.p[0];
+    const lone = allGroups(entry.subtree)[0];
+    invokeMock.mockClear();
+    const label = useTabsStore
+      .getState()
+      .detachPaneToNewWindow("p", popoutId, lone.id, { x: 0, y: 0, w: 100, h: 100 });
+    expect(label).toBeNull();
+    expect(useTabsStore.getState().detachedGroupsByScope.p).toHaveLength(1);
+    expect(invokeMock).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/__tests__/Experimental.test.ts b/src/__tests__/Experimental.test.ts
new file mode 100644
index 0000000..3dde60c
--- /dev/null
+++ b/src/__tests__/Experimental.test.ts
@@ -0,0 +1,45 @@
+/**
+ * The experimental-flag rule (`lib/experimental.ts`): a flag is a tri-state, and
+ * *unset* means "whatever debug mode says". Explicit always wins — in both
+ * directions, which is the half that is easy to get wrong.
+ */
+import { describe, it, expect } from "vitest";
+import { experimentalEnabled, EXPERIMENTAL_FLAGS } from "../lib/experimental";
+import type { Settings } from "../types";
+
+const s = (o: Partial<Settings>): Settings => o as Settings;
+
+describe("experimentalEnabled", () => {
+  it("is off when the flag is unset and debug mode is off", () => {
+    expect(experimentalEnabled(s({}), "python_run_debug")).toBe(false);
+    expect(experimentalEnabled(s({ debug: false }), "python_run_debug")).toBe(false);
+  });
+
+  it("is on when the flag is unset and debug mode is on", () => {
+    // The point of the gate: a new experiment reaches a debug build with no toggle.
+    expect(experimentalEnabled(s({ debug: true }), "python_run_debug")).toBe(true);
+    expect(experimentalEnabled(s({ debug: true }), "agent_mode_toggle")).toBe(true);
+  });
+
+  it("lets an explicit value win over debug mode, both ways", () => {
+    // Off while in debug mode — "turn this off" must work for the people most
+    // likely to hit a broken experiment.
+    expect(experimentalEnabled(s({ debug: true, python_run_debug: false }), "python_run_debug"))
+      .toBe(false);
+    // On without debug mode — an ordinary user can opt into one experiment.
+    expect(experimentalEnabled(s({ python_run_debug: true }), "python_run_debug")).toBe(true);
+  });
+
+  it("treats settings that have not loaded yet as off", () => {
+    expect(experimentalEnabled(null, "python_run_debug")).toBe(false);
+    expect(experimentalEnabled(undefined, "agent_mode_toggle")).toBe(false);
+  });
+
+  it("applies the same rule to every flag in the list", () => {
+    for (const flag of EXPERIMENTAL_FLAGS) {
+      expect(experimentalEnabled(s({}), flag)).toBe(false);
+      expect(experimentalEnabled(s({ debug: true }), flag)).toBe(true);
+      expect(experimentalEnabled(s({ debug: true, [flag]: false }), flag)).toBe(false);
+    }
+  });
+});
diff --git a/src/__tests__/FileTreeDirSize.test.tsx b/src/__tests__/FileTreeDirSize.test.tsx
new file mode 100644
index 0000000..0d2fa00
--- /dev/null
+++ b/src/__tests__/FileTreeDirSize.test.tsx
@@ -0,0 +1,155 @@
+/**
+ * Regression test for the folder-size holes in the right-panel file tree.
+ *
+ * `load()` sets rawEntries, which fires the size-fetch effects, and only THEN
+ * awaits `git_file_statuses` — whose result changes `sections`' identity. When
+ * the effects cancelled on that (a `cancelled` flag in their cleanup), every
+ * size call still walking at that moment had its bytes thrown away, while the
+ * `requestedSizes` guard kept the folder from ever being re-requested. Small
+ * folders won the race and showed a size; a big one — `results/` in a training
+ * project, exactly what the feature is for — never did.
+ *
+ * So: resolve `dir_size_breakdown` only AFTER `git_file_statuses` has landed,
+ * and assert the size still renders.
+ */
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, act } from "@testing-library/react";
+
+const { mockInvoke } = vi.hoisted(() => ({ mockInvoke: vi.fn() }));
+
+vi.mock("@tauri-apps/api/core", () => ({ invoke: mockInvoke }));
+vi.mock("../stores/projects", () => ({ useProjectsStore: vi.fn() }));
+vi.mock("../stores/windows", () => ({
+  useWindowsStore: () => ({ windows: [], refresh: vi.fn(), untrack: vi.fn() }),
+}));
+vi.mock("../stores/settings", () => ({ useSettingsStore: () => null }));
+
+import { useProjectsStore } from "../stores/projects";
+import { RightPanel } from "../components/layout/RightPanel";
+
+const mockUseProjectsStore = vi.mocked(useProjectsStore);
+
+const ACTIVE_PROJECT = {
+  id: "proj-1",
+  name: "simplegnn",
+  status: "active",
+  position: 0,
+  local_file: "/tmp/simplegnn/project.json",
+};
+
+function dirEntry(name: string) {
+  return {
+    name,
+    path: `/tmp/simplegnn/${name}`,
+    is_dir: true,
+    size: 0,
+    extension: null,
+    mime: null,
+  };
+}
+
+describe("file tree folder sizes", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    const state = {
+      projects: [ACTIVE_PROJECT],
+      activeId: "proj-1",
+      rightPanelFolderByProject: {},
+      setRightPanelFolder: vi.fn(),
+    } as unknown as ReturnType<typeof useProjectsStore>;
+    mockUseProjectsStore.mockImplementation(((selector?: (s: typeof state) => unknown) =>
+      selector ? selector(state) : state) as typeof useProjectsStore);
+  });
+
+  it("shows a folder's size even when the walk outlives the git-status round-trip", async () => {
+    // Two round-trips held open by hand. They must land in this order, and each
+    // in its OWN render — that is the whole bug. Resolving them both eagerly lets
+    // React batch `setRawEntries` and `setGitStatuses` into one render, the size
+    // effect never sees the intermediate state, and the race can't happen at all.
+    const deferred = <T,>() => {
+      let release!: (v: T) => void;
+      const promise = new Promise<T>((res) => { release = res; });
+      return { promise, release };
+    };
+    const statuses = deferred<Record<string, string>>();
+    const size = deferred<{ total: number; ignored: number }>();
+
+    mockInvoke.mockImplementation((cmd: string) => {
+      if (cmd === "list_dir") return Promise.resolve([dirEntry("results")]);
+      // New object identity when it lands → `sections` recomputes → the effects'
+      // old cleanup fired and cancelled the size call still in flight.
+      if (cmd === "git_file_statuses") return statuses.promise;
+      if (cmd === "dir_size_breakdown") return size.promise; // the slow walk
+      if (cmd === "dir_size") return Promise.resolve(0);
+      if (cmd === "git_status")
+        return Promise.resolve({ staged: 0, unstaged: 0, untracked: 0, has_remote: false, is_repo: false });
+      if (cmd === "git_unpushed_commits") return Promise.resolve([]);
+      if (cmd === "load_project") return Promise.resolve({});
+      if (cmd === "list_project_endings") return Promise.resolve([]);
+      return Promise.resolve(null);
+    });
+
+    // 1. The listing lands and renders; the size effect dispatches the walk.
+    await act(async () => {
+      render(<RightPanel open={true} />);
+    });
+    expect(await screen.findByText("results")).toBeTruthy();
+    expect(mockInvoke).toHaveBeenCalledWith(
+      "dir_size_breakdown",
+      expect.objectContaining({ relPath: "results" }),
+    );
+
+    // 2. Git statuses land while the walk is still running.
+    await act(async () => {
+      statuses.release({});
+      await statuses.promise;
+    });
+
+    // 3. Only now does the walk finish: 2 GiB.
+    await act(async () => {
+      size.release({ total: 2 * 1024 * 1024 * 1024, ignored: 0 });
+      await size.promise;
+    });
+
+    // Scoped to the row: the section-total line shows the same figure.
+    const row = screen.getByText("results").closest(".file-entry");
+    expect(row?.querySelector(".file-size")?.textContent).toBe("2.0 GB");
+  });
+
+  it("never walks a folder excluded from scans", async () => {
+    // The point of the feature is the *absence* of the call: a 50 GB virtualenv
+    // is not made cheap by discarding its result, only by never descending it.
+    mockInvoke.mockImplementation((cmd: string) => {
+      if (cmd === "list_dir") return Promise.resolve([dirEntry("venv"), dirEntry("src")]);
+      if (cmd === "git_file_statuses") return Promise.resolve({});
+      if (cmd === "dir_size_breakdown") return Promise.resolve({ total: 10, ignored: 0 });
+      if (cmd === "dir_size") return Promise.resolve(10);
+      if (cmd === "git_status")
+        return Promise.resolve({ staged: 0, unstaged: 0, untracked: 0, has_remote: false, is_repo: false });
+      if (cmd === "git_unpushed_commits") return Promise.resolve([]);
+      // The project's saved exclusion list — `venv` is out, `src` is not.
+      if (cmd === "load_project") return Promise.resolve({ scan_excluded_paths: ["venv"] });
+      if (cmd === "list_project_endings") return Promise.resolve([]);
+      return Promise.resolve(null);
+    });
+
+    await act(async () => {
+      render(<RightPanel open={true} />);
+    });
+    expect(await screen.findByText("venv")).toBeTruthy();
+
+    const walked = (relPath: string) =>
+      mockInvoke.mock.calls.some(
+        ([cmd, args]) =>
+          (cmd === "dir_size" || cmd === "dir_size_breakdown") &&
+          (args as { relPath?: string } | undefined)?.relPath === relPath,
+      );
+    expect(walked("venv")).toBe(false);
+    expect(walked("src")).toBe(true);
+
+    // The row still lists — the exclusion has to stay reversible from the row it
+    // applies to — but says so instead of showing a stale or absent size.
+    const row = screen.getByText("venv").closest(".file-entry");
+    expect(row?.querySelector(".file-size")?.textContent).toBe("not scanned");
+  });
+});
diff --git a/src/__tests__/FileTreeNav.test.tsx b/src/__tests__/FileTreeNav.test.tsx
index bb96b5a..b92697d 100644
--- a/src/__tests__/FileTreeNav.test.tsx
+++ b/src/__tests__/FileTreeNav.test.tsx
@@ -1,7 +1,8 @@
 /**
  * Render tests for the right-panel file tree navigation:
- * - #2 (Group D.1): a file's `.file-name` span carries a native `title` with the
- *   full name so long names are readable on hover (CSS ellipsis aside).
+ * - #2 (Group D.1): a file's full name is readable on hover via the existing
+ *   custom `.file-tooltip` popup (not a native `title` attribute — that used
+ *   to render as an unthemed OS tooltip instead of the app's own hover UI).
  * - #3 (Group D.1): entering a subfolder renders a breadcrumb (↑, ⌂ root crumb,
  *   and a crumb per path segment); clicking the root crumb navigates back.
  */
@@ -88,11 +89,16 @@ describe("file tree navigation", () => {
       selector ? selector(state) : state) as typeof useProjectsStore);
   });
 
-  it("#2 shows the full file name in a title attribute", async () => {
+  it("#2 shows the full file name in the hover tooltip, not a title attribute", async () => {
     await renderPanel();
     const nameSpan = await screen.findByText(LONG_NAME);
     expect(nameSpan.classList.contains("file-name")).toBe(true);
-    expect(nameSpan.getAttribute("title")).toBe(LONG_NAME);
+    expect(nameSpan.getAttribute("title")).toBeNull();
+
+    const row = nameSpan.closest(".file-entry");
+    expect(row).toBeTruthy();
+    fireEvent.mouseEnter(row!);
+    expect(await screen.findByText(LONG_NAME, { selector: ".file-tooltip-name" })).toBeTruthy();
   });
 
   it("#3 builds a breadcrumb on entering a subfolder and the root crumb goes back", async () => {
diff --git a/src/__tests__/FileViewNoTabsLoop.test.tsx b/src/__tests__/FileViewNoTabsLoop.test.tsx
new file mode 100644
index 0000000..edea13e
--- /dev/null
+++ b/src/__tests__/FileViewNoTabsLoop.test.tsx
@@ -0,0 +1,63 @@
+/**
+ * Regression: the shared file viewer (`ProjectFilesView`, rendered by the right
+ * panel and the Files tab) must not infinite-loop when the active scope has no
+ * registered tabs.
+ *
+ * The Sessions feature added `useTabsStore((s) => s.tabsByScope[scope] ?? [])`.
+ * A Zustand selector that returns a FRESH `[]` when the scope is absent yields a
+ * new snapshot on every render, so `useSyncExternalStore` re-renders forever
+ * ("The result of getSnapshot should be cached" → "Maximum update depth
+ * exceeded"). With no error boundary in the tree, that thrown loop unmounts the
+ * WHOLE app — which is why the symptom was "the project pills vanished": the
+ * header's pill strip is a sibling that React tears down along with everything
+ * else. The fix coalesces to a stable empty array OUTSIDE the selector.
+ */
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, act } from "@testing-library/react";
+import type { ProjectEntry } from "../types";
+
+vi.mock("@tauri-apps/api/core", () => ({
+  invoke: vi.fn((cmd: string) => Promise.resolve(cmd === "git_repo_root" ? null : [])),
+}));
+vi.mock("@tauri-apps/api/event", () => ({ listen: vi.fn().mockResolvedValue(() => {}) }));
+
+import { RightPanel } from "../components/layout/RightPanel";
+import { useProjectsStore } from "../stores/projects";
+import { useBoxesStore } from "../stores/boxes";
+import { useTabsStore } from "../stores/tabs";
+
+function proj(id: string): ProjectEntry {
+  return { id, name: id, status: "active", position: 10, local_file: `/p/${id}/project.json` };
+}
+
+beforeEach(() => {
+  useProjectsStore.setState({ projects: [], activeId: null, loaded: true });
+  useBoxesStore.setState({ boxes: [], loaded: true });
+  // The key precondition: the active scope has NO entry in tabsByScope.
+  useTabsStore.setState({ scope: "p1", tabsByScope: {} });
+});
+
+describe("ProjectFilesView with no tabs for the scope", () => {
+  it("renders without an infinite update loop", async () => {
+    useProjectsStore.setState({ projects: [proj("p1")], activeId: "p1", loaded: true });
+    useTabsStore.setState({ scope: "p1", tabsByScope: {} });
+
+    // Before the fix this render threw "Maximum update depth exceeded" from the
+    // unstable `tabsByScope[scope] ?? []` selector; the mount should now be quiet.
+    let container!: HTMLElement;
+    await act(async () => {
+      ({ container } = render(<RightPanel open={true} />));
+    });
+
+    expect(container.querySelector(".project-files-view, .file-tree, .project-files")).toBeTruthy();
+  });
+
+  it("selecting the scope's tabs returns a stable reference across calls", () => {
+    // The selector must hand back the SAME array object when the scope is absent,
+    // or useSyncExternalStore treats every render as a store change.
+    const sel = (s: { tabsByScope: Record<string, unknown[]> }) => s.tabsByScope["missing"];
+    const a = useTabsStore.getState().tabsByScope["missing"];
+    const b = sel(useTabsStore.getState());
+    expect(a).toBe(b); // both undefined — a stable reference, not a fresh []
+  });
+});
diff --git a/src/__tests__/Gif.test.ts b/src/__tests__/Gif.test.ts
new file mode 100644
index 0000000..2459959
--- /dev/null
+++ b/src/__tests__/Gif.test.ts
@@ -0,0 +1,460 @@
+import { describe, it, expect } from "vitest";
+import {
+  decodeGif,
+  openGif,
+  effectiveDelayMs,
+  GifDecodeError,
+  type GifData,
+} from "../lib/viewers/gif";
+
+// ── Test-side GIF builder ─────────────────────────────────────────────────────
+// A minimal GIF encoder so each case reads as "this picture, these frames"
+// instead of a hex dump. The LZW half only ever emits literal codes, but it
+// must mirror the decoder's dictionary growth exactly: the decoder adds an
+// entry per code (after the first since a clear) whether or not the encoder
+// uses them, and the CODE WIDTH grows when the dictionary fills it — so the
+// encoder tracks the same counters to write each code at the width the decoder
+// will read it.
+
+function lzwEncodeLiterals(
+  minCodeSize: number,
+  indices: number[],
+  clearEvery?: number,
+): Uint8Array {
+  const clear = 1 << minCodeSize;
+  const eoi = clear + 1;
+  let codeSize = minCodeSize + 1;
+  let dictSize = eoi + 1;
+  let sinceClear = 0;
+  const out: number[] = [];
+  let acc = 0;
+  let nbits = 0;
+  const emit = (code: number) => {
+    acc |= code << nbits;
+    nbits += codeSize;
+    while (nbits >= 8) {
+      out.push(acc & 0xff);
+      acc >>= 8;
+      nbits -= 8;
+    }
+  };
+  emit(clear);
+  for (const index of indices) {
+    if (clearEvery && sinceClear === clearEvery) {
+      emit(clear);
+      codeSize = minCodeSize + 1;
+      dictSize = eoi + 1;
+      sinceClear = 0;
+    }
+    emit(index);
+    // The decoder adds a dictionary entry for every code after the first since
+    // the last clear, growing the code width when the dictionary fills it.
+    if (sinceClear > 0 && dictSize < 4096) {
+      dictSize++;
+      if (dictSize === 1 << codeSize && codeSize < 12) codeSize++;
+    }
+    sinceClear++;
+  }
+  emit(eoi);
+  if (nbits > 0) out.push(acc & 0xff);
+  return Uint8Array.from(out);
+}
+
+type Rgb = [number, number, number];
+
+interface TestFrame {
+  /** [left, top, w, h]; defaults to the full logical screen. */
+  rect?: [number, number, number, number];
+  /** Palette indices in row-major FILE order (pre-interlace when `interlace`). */
+  indices: number[];
+  /** Local color table (overrides the global for this frame). */
+  lct?: Rgb[];
+  /** Graphic Control Extension; omitted = no GCE (delay 0, disposal 0). */
+  gce?: { delay?: number; transparent?: number; disposal?: number };
+  interlace?: boolean;
+  /** Raw pre-encoded LZW payload (minCodeSize + data), for hand-built streams. */
+  rawLzw?: { minCodeSize: number; data: number[] };
+  clearEvery?: number;
+}
+
+function colorTable(colors: Rgb[]): { bytes: number[]; sizeField: number } {
+  // Table length must be a power of two with at least 2 entries.
+  let size = 2;
+  while (size < colors.length) size *= 2;
+  const bytes: number[] = [];
+  for (let i = 0; i < size; i++) {
+    const [r, g, b] = colors[i] ?? [0, 0, 0];
+    bytes.push(r, g, b);
+  }
+  return { bytes, sizeField: Math.log2(size) - 1 };
+}
+
+function subBlocks(data: Uint8Array): number[] {
+  const out: number[] = [];
+  for (let i = 0; i < data.length; i += 255) {
+    const chunk = data.subarray(i, i + 255);
+    out.push(chunk.length, ...chunk);
+  }
+  out.push(0);
+  return out;
+}
+
+function buildGif({
+  width,
+  height,
+  gct,
+  frames,
+  netscapeLoops,
+  version = "GIF89a",
+  trailer = true,
+}: {
+  width: number;
+  height: number;
+  gct?: Rgb[];
+  frames: TestFrame[];
+  /** Netscape iteration count (0 = forever). */
+  netscapeLoops?: number;
+  version?: string;
+  trailer?: boolean;
+}): Uint8Array {
+  const out: number[] = [...version].map((ch) => ch.charCodeAt(0));
+  out.push(width & 0xff, width >> 8, height & 0xff, height >> 8);
+  if (gct) {
+    const t = colorTable(gct);
+    out.push(0x80 | t.sizeField, 0, 0, ...t.bytes);
+  } else {
+    out.push(0, 0, 0);
+  }
+  if (netscapeLoops !== undefined) {
+    out.push(0x21, 0xff, 11, ...[..."NETSCAPE2.0"].map((ch) => ch.charCodeAt(0)));
+    out.push(3, 1, netscapeLoops & 0xff, netscapeLoops >> 8, 0);
+  }
+  for (const f of frames) {
+    if (f.gce) {
+      const disposal = f.gce.disposal ?? 0;
+      const flags = (disposal << 2) | (f.gce.transparent !== undefined ? 1 : 0);
+      const delay = f.gce.delay ?? 0;
+      out.push(0x21, 0xf9, 4, flags, delay & 0xff, delay >> 8, f.gce.transparent ?? 0, 0);
+    }
+    const [left, top, w, h] = f.rect ?? [0, 0, width, height];
+    let dFlags = f.interlace ? 0x40 : 0;
+    let lctBytes: number[] = [];
+    if (f.lct) {
+      const t = colorTable(f.lct);
+      dFlags |= 0x80 | t.sizeField;
+      lctBytes = t.bytes;
+    }
+    out.push(0x2c, left & 0xff, left >> 8, top & 0xff, top >> 8, w & 0xff, w >> 8, h & 0xff, h >> 8, dFlags, ...lctBytes);
+    if (f.rawLzw) {
+      out.push(f.rawLzw.minCodeSize, ...subBlocks(Uint8Array.from(f.rawLzw.data)));
+    } else {
+      const tableLen = (f.lct ?? gct ?? []).length;
+      const minCodeSize = Math.max(2, Math.ceil(Math.log2(Math.max(tableLen, 2))));
+      out.push(minCodeSize, ...subBlocks(lzwEncodeLiterals(minCodeSize, f.indices, f.clearEvery)));
+    }
+  }
+  if (trailer) out.push(0x3b);
+  return Uint8Array.from(out);
+}
+
+// ── Pixel helpers ─────────────────────────────────────────────────────────────
+
+const RED: Rgb = [255, 0, 0];
+const GREEN: Rgb = [0, 255, 0];
+const BLUE: Rgb = [0, 0, 255];
+const WHITE: Rgb = [255, 255, 255];
+
+function px(gif: GifData, frame: number, x: number, y: number): number[] {
+  const p = (y * gif.width + x) * 4;
+  return Array.from(gif.frames[frame].pixels.subarray(p, p + 4));
+}
+
+const opaque = (c: Rgb) => [...c, 255];
+const CLEAR = [0, 0, 0, 0];
+
+// ── Tests ─────────────────────────────────────────────────────────────────────
+
+describe("decodeGif basics", () => {
+  it("decodes a 2×2 single-frame GIF87a", () => {
+    const gif = decodeGif(
+      buildGif({
+        width: 2,
+        height: 2,
+        gct: [RED, GREEN, BLUE, WHITE],
+        frames: [{ indices: [0, 1, 2, 3] }],
+        version: "GIF87a",
+      }),
+    );
+    expect(gif.width).toBe(2);
+    expect(gif.height).toBe(2);
+    expect(gif.frames).toHaveLength(1);
+    expect(gif.loopCount).toBe(1); // no Netscape extension = play once
+    expect(gif.truncated).toBe(false);
+    expect(gif.frames[0].delayMs).toBe(0); // GIF87a has no GCE
+    expect(px(gif, 0, 0, 0)).toEqual(opaque(RED));
+    expect(px(gif, 0, 1, 0)).toEqual(opaque(GREEN));
+    expect(px(gif, 0, 0, 1)).toEqual(opaque(BLUE));
+    expect(px(gif, 0, 1, 1)).toEqual(opaque(WHITE));
+  });
+
+  it("carries the authored delay (hundredths × 10) and the Netscape loop count", () => {
+    const gif = decodeGif(
+      buildGif({
+        width: 1,
+        height: 1,
+        gct: [RED, GREEN],
+        netscapeLoops: 0, // loop forever
+        frames: [
+          { indices: [0], gce: { delay: 5 } },
+          { indices: [1], gce: { delay: 200 } },
+        ],
+      }),
+    );
+    expect(gif.loopCount).toBe(0);
+    expect(gif.frames[0].delayMs).toBe(50);
+    expect(gif.frames[1].delayMs).toBe(2000);
+  });
+
+  it("rejects a non-GIF header", () => {
+    expect(() => decodeGif(Uint8Array.from([1, 2, 3, 4, 5, 6, 7, 8]))).toThrow(GifDecodeError);
+    expect(() => decodeGif(new TextEncoder().encode("PNG89a xxxxxxxx"))).toThrow(/not a GIF/);
+  });
+
+  it("decodes the canonical 1×1 transparent GIF", () => {
+    const bytes = Uint8Array.from(
+      atob("R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"),
+      (ch) => ch.charCodeAt(0),
+    );
+    const gif = decodeGif(bytes);
+    expect(gif.width).toBe(1);
+    expect(gif.height).toBe(1);
+    expect(gif.frames).toHaveLength(1);
+    expect(px(gif, 0, 0, 0)).toEqual(CLEAR); // transparent index left the canvas clear
+  });
+});
+
+describe("compositing and disposal", () => {
+  it("disposal 1 (keep): the next frame composites over this one", () => {
+    const gif = decodeGif(
+      buildGif({
+        width: 2,
+        height: 2,
+        gct: [RED, GREEN, BLUE, WHITE],
+        frames: [
+          { indices: [0, 0, 0, 0], gce: { disposal: 1 } },
+          // Right column only.
+          { rect: [1, 0, 1, 2], indices: [2, 2] },
+        ],
+      }),
+    );
+    expect(px(gif, 1, 0, 0)).toEqual(opaque(RED)); // left column survives
+    expect(px(gif, 1, 1, 0)).toEqual(opaque(BLUE));
+    expect(px(gif, 1, 1, 1)).toEqual(opaque(BLUE));
+  });
+
+  it("the transparent index leaves the underlying pixel", () => {
+    const gif = decodeGif(
+      buildGif({
+        width: 2,
+        height: 1,
+        gct: [RED, GREEN, BLUE, WHITE],
+        frames: [
+          { indices: [0, 1], gce: { disposal: 1 } },
+          // Index 3 is transparent: only the second pixel changes.
+          { indices: [3, 2], gce: { transparent: 3 } },
+        ],
+      }),
+    );
+    expect(px(gif, 1, 0, 0)).toEqual(opaque(RED));
+    expect(px(gif, 1, 1, 0)).toEqual(opaque(BLUE));
+  });
+
+  it("disposal 2 clears the frame's rect to TRANSPARENT (browser behavior, not spec background)", () => {
+    const gif = decodeGif(
+      buildGif({
+        width: 2,
+        height: 2,
+        gct: [RED, GREEN, BLUE, WHITE],
+        frames: [
+          { indices: [0, 0, 0, 0], gce: { disposal: 2 } },
+          { rect: [0, 0, 1, 1], indices: [2] },
+        ],
+      }),
+    );
+    // Frame 1 itself shows normally…
+    expect(px(gif, 0, 0, 0)).toEqual(opaque(RED));
+    // …but frame 2 starts from a cleared canvas: only its own pixel is set.
+    expect(px(gif, 1, 0, 0)).toEqual(opaque(BLUE));
+    expect(px(gif, 1, 1, 0)).toEqual(CLEAR);
+    expect(px(gif, 1, 0, 1)).toEqual(CLEAR);
+    expect(px(gif, 1, 1, 1)).toEqual(CLEAR);
+  });
+
+  it("disposal 3 restores the canvas from before the frame drew", () => {
+    const gif = decodeGif(
+      buildGif({
+        width: 2,
+        height: 1,
+        gct: [RED, GREEN, BLUE, WHITE],
+        frames: [
+          { indices: [0, 0], gce: { disposal: 1 } },
+          { indices: [2, 2], gce: { disposal: 3 } }, // full blue, then restore
+          { rect: [0, 0, 1, 1], indices: [1] },
+        ],
+      }),
+    );
+    expect(px(gif, 1, 0, 0)).toEqual(opaque(BLUE)); // frame 2 shows its own draw
+    expect(px(gif, 2, 0, 0)).toEqual(opaque(GREEN)); // frame 3's own pixel
+    expect(px(gif, 2, 1, 0)).toEqual(opaque(RED)); // restored, not blue
+  });
+
+  it("a local color table overrides the global one", () => {
+    const gif = decodeGif(
+      buildGif({
+        width: 1,
+        height: 1,
+        gct: [RED, GREEN],
+        frames: [{ indices: [0], lct: [BLUE, WHITE] }],
+      }),
+    );
+    expect(px(gif, 0, 0, 0)).toEqual(opaque(BLUE));
+  });
+
+  it("reorders interlaced rows into display order", () => {
+    // 1×8: file rows land on display rows 0,4,2,6,1,3,5,7 (the 4-pass scheme).
+    const shades: Rgb[] = Array.from({ length: 8 }, (_, i) => [i * 30, i * 30, i * 30]);
+    const gif = decodeGif(
+      buildGif({
+        width: 1,
+        height: 8,
+        gct: shades,
+        frames: [{ indices: [0, 1, 2, 3, 4, 5, 6, 7], interlace: true }],
+      }),
+    );
+    const fileOrderOfRow = [0, 4, 2, 5, 1, 6, 3, 7]; // inverse of [0,4,2,6,1,3,5,7]
+    for (let y = 0; y < 8; y++) {
+      expect(px(gif, 0, 0, y)).toEqual(opaque(shades[fileOrderOfRow[y]]));
+    }
+  });
+});
+
+describe("LZW", () => {
+  it("round-trips a stream long enough to grow the code width", () => {
+    const w = 10;
+    const h = 10;
+    const indices = Array.from({ length: w * h }, (_, i) => (i * 7) % 16);
+    const palette: Rgb[] = Array.from({ length: 16 }, (_, i) => [i * 16, 255 - i * 16, i]);
+    const gif = decodeGif(buildGif({ width: w, height: h, gct: palette, frames: [{ indices }] }));
+    for (let i = 0; i < indices.length; i++) {
+      expect(px(gif, 0, i % w, Math.floor(i / w))).toEqual(opaque(palette[indices[i]]));
+    }
+  });
+
+  it("handles mid-stream clear codes", () => {
+    const indices = Array.from({ length: 64 }, (_, i) => i % 4);
+    const gif = decodeGif(
+      buildGif({
+        width: 8,
+        height: 8,
+        gct: [RED, GREEN, BLUE, WHITE],
+        frames: [{ indices, clearEvery: 7 }],
+      }),
+    );
+    expect(px(gif, 0, 0, 0)).toEqual(opaque(RED));
+    expect(px(gif, 0, 5, 3)).toEqual(opaque(GREEN)); // index (3*8+5)%4 = 1
+    expect(px(gif, 0, 7, 7)).toEqual(opaque(WHITE));
+  });
+
+  it("decodes the KwKwK case (a code that IS the next dictionary slot)", () => {
+    // Hand-packed stream for "aaaa" with minCodeSize 2:
+    // clear(4), 0, 6 ← the KwKwK code, 0, eoi(5) — widths 3,3,3,3,4 bits.
+    const gif = decodeGif(
+      buildGif({
+        width: 2,
+        height: 2,
+        gct: [RED, GREEN, BLUE, WHITE],
+        frames: [{ indices: [], rawLzw: { minCodeSize: 2, data: [0x84, 0x51] } }],
+      }),
+    );
+    for (const [x, y] of [[0, 0], [1, 0], [0, 1], [1, 1]] as const) {
+      expect(px(gif, 0, x, y)).toEqual(opaque(RED));
+    }
+  });
+});
+
+describe("truncation and caps", () => {
+  it("returns the complete frames of a truncated file with truncated: true", () => {
+    const whole = buildGif({
+      width: 2,
+      height: 2,
+      gct: [RED, GREEN, BLUE, WHITE],
+      frames: [
+        { indices: [0, 0, 0, 0], gce: { delay: 10 } },
+        { indices: [1, 1, 1, 1], gce: { delay: 10 } },
+      ],
+    });
+    // Cut into frame 2's data (also drops the trailer).
+    const gif = decodeGif(whole.subarray(0, whole.length - 4));
+    expect(gif.frames).toHaveLength(1);
+    expect(gif.truncated).toBe(true);
+    expect(px(gif, 0, 0, 0)).toEqual(opaque(RED));
+  });
+
+  it("throws when not even one frame decodes", () => {
+    const whole = buildGif({
+      width: 2,
+      height: 2,
+      gct: [RED, GREEN],
+      frames: [{ indices: [0, 0, 0, 0] }],
+    });
+    expect(() => decodeGif(whole.subarray(0, 20))).toThrow(GifDecodeError);
+  });
+
+  it("stops at maxPixelBytes and marks the result truncated", () => {
+    const bytes = buildGif({
+      width: 2,
+      height: 2,
+      gct: [RED, GREEN],
+      frames: [
+        { indices: [0, 0, 0, 0] },
+        { indices: [1, 1, 1, 1] },
+      ],
+    });
+    // One 2×2 RGBA frame = 16 bytes: the cap admits exactly one frame.
+    const gif = decodeGif(bytes, { maxPixelBytes: 16 });
+    expect(gif.frames).toHaveLength(1);
+    expect(gif.truncated).toBe(true);
+    // Untouched, both frames decode.
+    expect(decodeGif(bytes).frames).toHaveLength(2);
+  });
+
+  it("streams frames one at a time via openGif", () => {
+    const stream = openGif(
+      buildGif({
+        width: 1,
+        height: 1,
+        gct: [RED, GREEN],
+        frames: [{ indices: [0] }, { indices: [1] }],
+      }),
+    );
+    expect(stream.width).toBe(1);
+    const f1 = stream.nextFrame();
+    const f2 = stream.nextFrame();
+    expect(f1).not.toBeNull();
+    expect(f2).not.toBeNull();
+    expect(stream.nextFrame()).toBeNull();
+    expect(stream.nextFrame()).toBeNull(); // stays done
+    expect(stream.truncated).toBe(false);
+  });
+});
+
+describe("effectiveDelayMs", () => {
+  it("bumps sub-20ms authored delays to the 100ms browser convention", () => {
+    expect(effectiveDelayMs(0)).toBe(100);
+    expect(effectiveDelayMs(10)).toBe(100);
+  });
+  it("honors 20ms and above exactly", () => {
+    expect(effectiveDelayMs(20)).toBe(20);
+    expect(effectiveDelayMs(500)).toBe(500);
+  });
+});
diff --git a/src/__tests__/GifView.test.tsx b/src/__tests__/GifView.test.tsx
new file mode 100644
index 0000000..b9cce88
--- /dev/null
+++ b/src/__tests__/GifView.test.tsx
@@ -0,0 +1,158 @@
+/**
+ * Tests for the animated-GIF viewer (#gifviewer): the REAL decoder runs over a
+ * hand-built two-frame GIF served through the mocked `read_file_bytes`, and the
+ * transport (frame counter, play/pause, stepping) drives a stubbed canvas
+ * context (jsdom has none). Auto-reload parity with the image viewer (#68) is
+ * covered by the mtime-advance case.
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, act, waitFor, fireEvent, screen } from "@testing-library/react";
+
+const { mockInvoke } = vi.hoisted(() => ({ mockInvoke: vi.fn() }));
+vi.mock("@tauri-apps/api/core", () => ({ invoke: mockInvoke }));
+vi.mock("../stores/windows", () => ({
+  useWindowsStore: { getState: () => ({ openFile: () => Promise.resolve() }) },
+}));
+vi.mock("../stores/settings", () => ({
+  useSettingsStore: (sel: (s: unknown) => unknown) =>
+    sel({ settings: { viewer_prefs: {} } }),
+}));
+
+// A real 1×1 two-frame GIF89a (2-entry palette: red, green), each frame with an
+// authored 10s delay so autoplay can't advance mid-assertion. Byte-for-byte:
+// header + LSD + GCT, then per frame a GCE (delay 1000 hundredths) + descriptor
+// + a literal LZW stream (clear, index, EOI), then the trailer.
+// prettier-ignore
+const TWO_FRAME_GIF = [
+  0x47, 0x49, 0x46, 0x38, 0x39, 0x61,             // "GIF89a"
+  0x01, 0x00, 0x01, 0x00, 0x80, 0x00, 0x00,       // 1×1, global color table (2)
+  0xff, 0x00, 0x00,  0x00, 0xff, 0x00,            // palette: red, green
+  0x21, 0xf9, 0x04, 0x00, 0xe8, 0x03, 0x00, 0x00, // GCE: delay 1000 (10 s)
+  0x2c, 0, 0, 0, 0, 0x01, 0x00, 0x01, 0x00, 0x00, // frame 1 descriptor
+  0x02, 0x02, 0x44, 0x01, 0x00,                   // LZW: clear, 0, EOI
+  0x21, 0xf9, 0x04, 0x00, 0xe8, 0x03, 0x00, 0x00, // GCE: delay 1000 (10 s)
+  0x2c, 0, 0, 0, 0, 0x01, 0x00, 0x01, 0x00, 0x00, // frame 2 descriptor
+  0x02, 0x02, 0x4c, 0x01, 0x00,                   // LZW: clear, 1, EOI
+  0x3b,                                           // trailer
+];
+
+let diskMtime = 1000;
+
+function countReadBytes() {
+  return mockInvoke.mock.calls.filter((c) => c[0] === "read_file_bytes").length;
+}
+
+const putImageData = vi.fn();
+
+async function renderGifView() {
+  vi.resetModules();
+  const { FileViewerPane } = await import("../components/embed/FileViewerPane");
+  await act(async () => {
+    render(<FileViewerPane viewer="gif" path="/p/anim.gif" projectId="proj" />);
+  });
+}
+
+describe("GifView", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    diskMtime = 1000;
+    // jsdom has no canvas backend: getContext returns null and would leave the
+    // draw effect dead. A putImageData spy is all the viewer itself needs, but
+    // this prototype override is global, so it also answers every canvas the
+    // FileViewerPane chrome mounts alongside it — including PresentationOverlay's
+    // marker/laser canvases, which need a full no-op 2D context or they throw.
+    HTMLCanvasElement.prototype.getContext = vi.fn(
+      () =>
+        ({
+          putImageData,
+          clearRect: vi.fn(),
+          save: vi.fn(),
+          restore: vi.fn(),
+          beginPath: vi.fn(),
+          moveTo: vi.fn(),
+          lineTo: vi.fn(),
+          arc: vi.fn(),
+          stroke: vi.fn(),
+          fill: vi.fn(),
+        }) as unknown as CanvasRenderingContext2D,
+    ) as unknown as typeof HTMLCanvasElement.prototype.getContext;
+    // This jsdom build exposes no ImageData global; the viewer only ever hands
+    // it to the (stubbed) putImageData, so a data/width/height shell suffices.
+    globalThis.ImageData ??= class {
+      constructor(
+        public data: Uint8ClampedArray,
+        public width: number,
+        public height: number,
+      ) {}
+    } as unknown as typeof ImageData;
+    // jsdom may lack rAF depending on visual pretence; the playback loop only
+    // needs it to exist (the 10 s frame delay keeps it from ever advancing).
+    globalThis.requestAnimationFrame ??= (cb) =>
+      setTimeout(() => cb(performance.now()), 16) as unknown as number;
+    globalThis.cancelAnimationFrame ??= (id) => clearTimeout(id);
+    globalThis.URL.createObjectURL ??= vi.fn(() => "blob:mock");
+    globalThis.URL.revokeObjectURL ??= vi.fn();
+    mockInvoke.mockImplementation((cmd: string) => {
+      if (cmd === "read_file_bytes") return Promise.resolve([...TWO_FRAME_GIF]);
+      if (cmd === "file_mtime") return Promise.resolve(diskMtime);
+      return Promise.resolve(null);
+    });
+  });
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("decodes the frames, autoplays, and steps/pauses via the transport", async () => {
+    await renderGifView();
+
+    // The real decoder ran over the mock bytes: 2 frames, frame 1 on screen.
+    await waitFor(() => expect(screen.getByText(/1 \/ 2/)).toBeTruthy());
+    expect(putImageData).toHaveBeenCalled();
+    const draws = putImageData.mock.calls.length;
+
+    // Autoplay is on (matches the old <img> behavior), so the toggle says Pause.
+    expect(screen.getByRole("button", { name: "Pause" })).toBeTruthy();
+
+    // Stepping pauses and advances the counter + redraws the canvas.
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: "Next frame" }));
+    });
+    expect(screen.getByText(/2 \/ 2/)).toBeTruthy();
+    expect(putImageData.mock.calls.length).toBeGreaterThan(draws);
+    expect(screen.getByRole("button", { name: "Play" })).toBeTruthy();
+
+    // Prev wraps back to frame 1.
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: "Previous frame" }));
+    });
+    expect(screen.getByText(/1 \/ 2/)).toBeTruthy();
+
+    // The readout shows the authored 10 s delay verbatim (≥20ms is honored).
+    expect(screen.getByText(/10000 ms/)).toBeTruthy();
+  });
+
+  it("re-reads and re-decodes when the file's mtime advances on disk (#68)", async () => {
+    await renderGifView();
+    await waitFor(() => expect(countReadBytes()).toBe(1));
+
+    diskMtime = 2000;
+    await waitFor(() => expect(countReadBytes()).toBe(2), { timeout: 12000 });
+
+    // No further change → no further read.
+    await new Promise((r) => setTimeout(r, 1800));
+    expect(countReadBytes()).toBe(2);
+  });
+
+  it("degrades to native <img> playback when the bytes aren't a decodable GIF", async () => {
+    mockInvoke.mockImplementation((cmd: string) => {
+      if (cmd === "read_file_bytes") return Promise.resolve([1, 2, 3, 4, 5, 6, 7, 8]);
+      if (cmd === "file_mtime") return Promise.resolve(diskMtime);
+      return Promise.resolve(null);
+    });
+    await renderGifView();
+    await waitFor(() => expect(screen.getByText(/native playback/)).toBeTruthy());
+    // The fallback <img> is up; the transport is not.
+    expect(document.querySelector(".gif-fallback img")).toBeTruthy();
+    expect(screen.queryByRole("button", { name: "Next frame" })).toBeNull();
+  });
+});
diff --git a/src/__tests__/HeadlessSshConnect.test.ts b/src/__tests__/HeadlessSshConnect.test.ts
index 03f9189..db59f01 100644
--- a/src/__tests__/HeadlessSshConnect.test.ts
+++ b/src/__tests__/HeadlessSshConnect.test.ts
@@ -76,7 +76,7 @@ describe("headless SSH connect", () => {
     // …but the pooled session is what actually opens the master, so it needs the
     // password too. Passing `null` here is the bug: it silently downgrades to
     // key/agent auth and only worked when a password happened to be saved.
-    expect(argsOf("remote_connect")).toEqual({ projectId: "p1", password: "s3cret" });
+    expect(argsOf("remote_connect")).toEqual({ projectId: "p1", hostId: "primary", password: "s3cret" });
 
     await waitFor(() => expect(result.current.sshStatus).toBe("connected"));
   });
@@ -98,7 +98,7 @@ describe("headless SSH connect", () => {
     });
 
     expect(argsOf("ssh_connect")).toMatchObject({ password: null });
-    expect(argsOf("remote_connect")).toEqual({ projectId: "p1", password: null });
+    expect(argsOf("remote_connect")).toEqual({ projectId: "p1", hostId: "primary", password: null });
   });
 
   it("surfaces a failed pooled connect as an error, not a green lamp", async () => {
diff --git a/src/__tests__/InternalViewer.test.ts b/src/__tests__/InternalViewer.test.ts
index 4349ee8..10b3f08 100644
--- a/src/__tests__/InternalViewer.test.ts
+++ b/src/__tests__/InternalViewer.test.ts
@@ -22,8 +22,23 @@ describe("internalViewerFor", () => {
 
   it("maps common text/code extensions to the text viewer", () => {
     expect(internalViewerFor(file("main.rs", ".rs"))).toBe("text");
-    expect(internalViewerFor(file("data.json", ".json"))).toBe("text");
     expect(internalViewerFor(file("notes.txt", ".txt"))).toBe("text");
+    expect(internalViewerFor(file("Cargo.toml", ".toml"))).toBe("text");
+  });
+
+  it("maps YAML and JSON to the structure tree (#yaml)", () => {
+    // JSON is YAML's flow syntax, so both open in the same tree — with Source as
+    // the same code editor they used to open in.
+    expect(internalViewerFor(file("config.yaml", ".yaml"))).toBe("yaml");
+    expect(internalViewerFor(file("config.yml", ".yml"))).toBe("yaml");
+    expect(internalViewerFor(file("data.json", ".json"))).toBe("yaml");
+  });
+
+  it("falls back to the plain editor when the tree is opted out (#48)", () => {
+    // Turning off the tree is a vote against the tree, not against editing YAML
+    // in Eldrun — so it drops back to the code editor, not to an external app.
+    expect(internalViewerFor(file("data.json", ".json"), new Set(["yaml"] as const))).toBe("text");
+    expect(internalViewerFor(file("c.yaml", ".yaml"), new Set(["yaml", "text"] as const))).toBeNull();
   });
 
   it("maps well-known extensionless filenames to the text viewer", () => {
@@ -35,7 +50,19 @@ describe("internalViewerFor", () => {
     expect(internalViewerFor(file("photo.png", ".png"))).toBe("image");
     expect(internalViewerFor(file("photo.jpg", ".jpg"))).toBe("image");
     expect(internalViewerFor(file("photo.jpeg", ".jpeg"))).toBe("image");
-    expect(internalViewerFor(file("anim.gif", ".gif"))).toBe("image");
+  });
+
+  it("maps .gif to the animated-GIF viewer (wins over the generic image viewer)", () => {
+    expect(internalViewerFor(file("anim.gif", ".gif"))).toBe("gif");
+    // Opting the transport out (#48) degrades to the image viewer — the webview
+    // still animates <img> GIFs natively, it just loses frame control.
+    expect(internalViewerFor(file("anim.gif", ".gif"), new Set(["gif"] as const))).toBe("image");
+    expect(
+      internalViewerFor(file("anim.gif", ".gif"), new Set(["gif", "image"] as const)),
+    ).toBeNull();
+    const disabled = disabledViewers({ gif: { enabled: false } });
+    expect(disabled.has("gif")).toBe(true);
+    expect(internalViewerFor(file("anim.gif", ".gif"), disabled)).toBe("image");
   });
 
   it("maps .html/.htm/.svg to the rendered-preview viewer (wins over text)", () => {
diff --git a/src/__tests__/Lessons.test.ts b/src/__tests__/Lessons.test.ts
index 3baeace..1e9a434 100644
--- a/src/__tests__/Lessons.test.ts
+++ b/src/__tests__/Lessons.test.ts
@@ -14,6 +14,12 @@ describe("LESSONS catalog", () => {
       "add-tab",
       "native-viewer",
       "arrange-tabs",
+      "yaml-viewer",
+      "pdf-viewer",
+      "run-python",
+      "file-search",
+      "calendar",
+      "usage-recap",
       // Agents & models
       "install-agent",
       "local-model",
@@ -23,7 +29,11 @@ describe("LESSONS catalog", () => {
       "docker-sandbox",
       "add-ssh-project",
       "ssh-via-openvpn",
+      "vpn-tunnel",
       "extend-to-remote",
+      "compute-machines",
+      "persistent-sessions",
+      "hpc-pipeline",
     ]);
   });
 
diff --git a/src/__tests__/PdfOutline.test.ts b/src/__tests__/PdfOutline.test.ts
new file mode 100644
index 0000000..a1f5ccc
--- /dev/null
+++ b/src/__tests__/PdfOutline.test.ts
@@ -0,0 +1,203 @@
+/**
+ * The PDF outline model (#pdf-outline) — the pure resolver that turns pdf.js's
+ * raw bookmark tree into a jump-ready chapter tree.
+ *
+ * The load-bearing properties pinned here: destinations resolve to 1-based FILE
+ * pages (named strings and explicit arrays alike); an unresolvable destination
+ * degrades to a null page rather than failing the whole load; nesting and ids are
+ * preserved; and a document with no outline yields an empty list.
+ */
+import { describe, it, expect } from "vitest";
+import type { PDFDocumentProxy } from "pdfjs-dist";
+import {
+  loadOutline,
+  detectHeadings,
+  flattenOutline,
+  type OutlineNode,
+  type HeadingRun,
+} from "../components/embed/pdf/outline";
+
+/**
+ * A minimal fake pdf.js document: `getOutline` returns the given raw tree,
+ * `getPageIndex` maps a fake `{num}` ref to a 0-based index (num → num), and
+ * `getDestination` resolves a named string to an explicit dest array.
+ */
+function fakeDoc(
+  outline: unknown,
+  named: Record<string, unknown[]> = {},
+): PDFDocumentProxy {
+  return {
+    getOutline: async () => outline,
+    getDestination: async (name: string) => named[name] ?? null,
+    getPageIndex: async (ref: { num?: number }) => {
+      if (ref && typeof ref.num === "number") return ref.num;
+      throw new Error("bad ref");
+    },
+  } as unknown as PDFDocumentProxy;
+}
+
+describe("loadOutline", () => {
+  it("returns [] for a document with no outline", async () => {
+    expect(await loadOutline(fakeDoc(null))).toEqual([]);
+    expect(await loadOutline(fakeDoc([]))).toEqual([]);
+  });
+
+  it("resolves an explicit destination array to a 1-based page", async () => {
+    const doc = fakeDoc([
+      { title: "Chapter 1", dest: [{ num: 0 }, { name: "XYZ" }], items: [] },
+      { title: "Chapter 2", dest: [{ num: 4 }, { name: "XYZ" }], items: [] },
+    ]);
+    const nodes = await loadOutline(doc);
+    expect(nodes.map((n) => [n.title, n.page])).toEqual([
+      ["Chapter 1", 1],
+      ["Chapter 2", 5],
+    ]);
+  });
+
+  it("resolves a named destination via getDestination", async () => {
+    const doc = fakeDoc(
+      [{ title: "Intro", dest: "intro-anchor", items: [] }],
+      { "intro-anchor": [{ num: 2 }, { name: "Fit" }] },
+    );
+    const [node] = await loadOutline(doc);
+    expect(node.page).toBe(3);
+  });
+
+  it("accepts a numeric page index in slot 0", async () => {
+    const doc = fakeDoc([{ title: "Cover", dest: [3], items: [] }]);
+    const [node] = await loadOutline(doc);
+    expect(node.page).toBe(4);
+  });
+
+  it("keeps a node whose destination cannot resolve, with a null page", async () => {
+    const doc = fakeDoc([
+      { title: "Broken", dest: [{}, { name: "XYZ" }], items: [] },
+      { title: "Missing name", dest: "not-in-map", items: [] },
+      { title: "No dest", dest: null, items: [] },
+    ]);
+    const nodes = await loadOutline(doc);
+    expect(nodes.map((n) => n.page)).toEqual([null, null, null]);
+    expect(nodes.map((n) => n.title)).toEqual(["Broken", "Missing name", "No dest"]);
+  });
+
+  it("preserves nesting and assigns path-derived ids", async () => {
+    const doc = fakeDoc([
+      {
+        title: "Part I",
+        dest: [{ num: 0 }],
+        items: [
+          { title: "Section A", dest: [{ num: 1 }], items: [] },
+          { title: "Section B", dest: [{ num: 2 }], items: [] },
+        ],
+      },
+    ]);
+    const [part] = await loadOutline(doc);
+    expect(part.id).toBe("0");
+    expect(part.children.map((c) => c.id)).toEqual(["0.0", "0.1"]);
+    expect(part.children.map((c) => c.page)).toEqual([2, 3]);
+  });
+
+  it("falls back to 'Untitled' for a blank title", async () => {
+    const doc = fakeDoc([{ title: "", dest: [{ num: 0 }], items: [] }]);
+    const [node] = await loadOutline(doc);
+    expect(node.title).toBe("Untitled");
+  });
+});
+
+describe("detectHeadings (font-size fallback)", () => {
+  // A page of body text at size 10, one run per line.
+  const body = (page: number, lines: number, startY = 100): HeadingRun[] =>
+    Array.from({ length: lines }, (_, i) => ({
+      str: "the quick brown fox jumps over the lazy dog and runs on",
+      size: 10,
+      page,
+      x: 50,
+      y: startY + i * 12,
+    }));
+
+  const heading = (str: string, size: number, page: number, y: number): HeadingRun => ({
+    str,
+    size,
+    page,
+    x: 50,
+    y,
+  });
+
+  it("returns [] with no runs, or when nothing beats body size", () => {
+    expect(detectHeadings([])).toEqual([]);
+    expect(detectHeadings(body(1, 20))).toEqual([]);
+  });
+
+  it("picks out a run set distinctly larger than body text", () => {
+    const runs = [
+      heading("Chapter One", 20, 1, 40),
+      ...body(1, 20),
+      heading("Chapter Two", 20, 5, 40),
+      ...body(5, 20),
+    ];
+    const nodes = detectHeadings(runs);
+    expect(nodes.map((n) => [n.title, n.page])).toEqual([
+      ["Chapter One", 1],
+      ["Chapter Two", 5],
+    ]);
+  });
+
+  it("nests smaller headings under larger ones by size", () => {
+    const runs = [
+      heading("Part I", 22, 1, 40),
+      heading("Section A", 16, 1, 80),
+      heading("Section B", 16, 2, 40),
+      heading("Part II", 22, 5, 40),
+      ...body(1, 15),
+      ...body(2, 15),
+      ...body(5, 15),
+    ];
+    const nodes = detectHeadings(runs);
+    expect(nodes.map((n) => n.title)).toEqual(["Part I", "Part II"]);
+    expect(nodes[0].children.map((c) => [c.title, c.page])).toEqual([
+      ["Section A", 1],
+      ["Section B", 2],
+    ]);
+  });
+
+  it("groups runs on the same line into one heading", () => {
+    const runs = [
+      heading("Chapter ", 20, 1, 40),
+      { ...heading("One", 20, 1, 40), x: 140 },
+      ...body(1, 20),
+    ];
+    expect(detectHeadings(runs).map((n) => n.title)).toEqual(["Chapter One"]);
+  });
+
+  it("drops running headers (same big text repeated across many pages)", () => {
+    const runs: HeadingRun[] = [];
+    // A running header appearing at the top of 8 pages, plus real body text.
+    for (let p = 1; p <= 8; p++) {
+      runs.push(heading("A Very Long Book Title", 14, p, 20));
+      runs.push(...body(p, 20));
+    }
+    // One genuine chapter heading, on a single page.
+    runs.push(heading("Real Chapter", 20, 3, 60));
+    const nodes = detectHeadings(runs);
+    expect(nodes.map((n) => n.title)).toEqual(["Real Chapter"]);
+  });
+});
+
+describe("flattenOutline", () => {
+  it("flattens in visit order with depths", () => {
+    const tree: OutlineNode[] = [
+      {
+        id: "0",
+        title: "A",
+        page: 1,
+        children: [{ id: "0.0", title: "A.1", page: 2, children: [] }],
+      },
+      { id: "1", title: "B", page: 5, children: [] },
+    ];
+    expect(flattenOutline(tree).map((e) => [e.node.title, e.depth])).toEqual([
+      ["A", 0],
+      ["A.1", 1],
+      ["B", 0],
+    ]);
+  });
+});
diff --git a/src/__tests__/PillRunningIndicator.test.ts b/src/__tests__/PillRunningIndicator.test.ts
index 601e7f7..8a5b13e 100644
--- a/src/__tests__/PillRunningIndicator.test.ts
+++ b/src/__tests__/PillRunningIndicator.test.ts
@@ -342,6 +342,48 @@ describe("activity store attention state", () => {
     expect(useActivityStore.getState().attentionByTab["proj-a:agent-1"]).toBeUndefined();
   });
 
+  it("keeps flagging a decision on the tab the user IS looking at", () => {
+    // A blocked agent stays blocked while you look at it — the flag is about the
+    // agent's state, not about unread output. (Contrast the "done" case above:
+    // that one IS about unread output, so viewing the tab retires it.)
+    useTabsStore.setState({ scope: "proj-a" }); // agent-1 is now the visible tab
+    runThenPrompt("proj-a:agent-1");
+    useActivityStore.getState().recompute();
+    expect(useActivityStore.getState().attentionByTab["proj-a:agent-1"]).toBe("decision");
+
+    // And it holds tick after tick: looking at a prompt does not answer it.
+    vi.advanceTimersByTime(5000);
+    useActivityStore.getState().recompute();
+    expect(useActivityStore.getState().attentionByTab["proj-a:agent-1"]).toBe("decision");
+    expect(useActivityStore.getState().attentionByScope["proj-a"]).toBe("decision");
+  });
+
+  it("retires a watched decision when it is answered", () => {
+    // Input is what clears it — the keystroke that picks an option drops the tail
+    // the prompt was matched from (noteUserInput), so the answered menu can't be
+    // matched again as a live one even before the agent's reply arrives.
+    useTabsStore.setState({ scope: "proj-a" });
+    runThenPrompt("proj-a:agent-1");
+    useActivityStore.getState().recompute();
+    expect(useActivityStore.getState().attentionByTab["proj-a:agent-1"]).toBe("decision");
+
+    noteUserInput("proj-a:agent-1"); // the human picks an option
+    useActivityStore.getState().recompute();
+    expect(useActivityStore.getState().attentionByTab["proj-a:agent-1"]).toBeUndefined();
+  });
+
+  it("does not clear a live decision when the tab is merely viewed", () => {
+    // Switching TO the tab marks its output read (clearAttention), which must not
+    // knock the lamp out for one tick just for `recompute` to raise it right back.
+    runThenPrompt("proj-a:agent-1");
+    useActivityStore.getState().recompute();
+    expect(useActivityStore.getState().attentionByTab["proj-a:agent-1"]).toBe("decision");
+
+    useActivityStore.getState().clearAttention("proj-a:agent-1");
+    expect(useActivityStore.getState().attentionByTab["proj-a:agent-1"]).toBe("decision");
+    expect(useActivityStore.getState().attentionByScope["proj-a"]).toBe("decision");
+  });
+
   it("clears the flag (and scope rollup) once the tab is viewed, for good", () => {
     runThenFinish("proj-a:agent-1");
     useActivityStore.getState().recompute();
@@ -444,6 +486,33 @@ describe("activity store per-scope status counts (pill status bars)", () => {
     });
   });
 
+  it("counts the tabs of the SELECTED project too, including the visible one", () => {
+    // The strip answers "is anything still running in there?" — a question the
+    // project you are currently in has just as much right to answer. Selecting a
+    // project used to empty its bars, which read as "nothing running".
+    useTabsStore.setState({ scope: "proj-a" }); // agent-1 is the visible tab
+    sustainAll(["proj-a:agent-1", "proj-a:agent-2"]);
+    useActivityStore.getState().recompute();
+    expect(useActivityStore.getState().statusCountsByScope["proj-a"]).toEqual({
+      working: 2,
+      decision: 0,
+      done: 0,
+    });
+  });
+
+  it("keeps a decision bar for the selected project's visible tab", () => {
+    useTabsStore.setState({ scope: "proj-a" }); // agent-1 is the visible tab
+    runThenPrompt("proj-a:agent-1");
+    vi.advanceTimersByTime(200); // let the prompt's own output age out of the busy
+    // window (800ms), so the tab reads as blocked rather than still writing
+    useActivityStore.getState().recompute();
+    expect(useActivityStore.getState().statusCountsByScope["proj-a"]).toEqual({
+      working: 0,
+      decision: 1,
+      done: 0,
+    });
+  });
+
   it("drops the scope entirely once its tabs go idle with nothing to report", () => {
     sustainOutput("proj-a:agent-1");
     useActivityStore.getState().recompute();
diff --git a/src/__tests__/ProjectFilesTab.test.ts b/src/__tests__/ProjectFilesTab.test.ts
new file mode 100644
index 0000000..128cb28
--- /dev/null
+++ b/src/__tests__/ProjectFilesTab.test.ts
@@ -0,0 +1,108 @@
+/**
+ * The "Files (Project)" tab kind — the right panel's file view hosted in a tab.
+ * Two things must hold for it, and neither is visible from the pane itself:
+ * the tab is recovered from its bare command on restore (a persisted layout
+ * stores `cmd`, and a kind Eldrun can't recover would come back a shell), and
+ * the folder it was opened on is part of what survives — the whole point of
+ * "Open in a new tab" on a folder is that the tab IS that folder.
+ */
+import { describe, it, expect, beforeEach, vi } from "vitest";
+
+import { invoke } from "@tauri-apps/api/core";
+
+vi.mock("@tauri-apps/api/core", () => ({ invoke: vi.fn(() => Promise.resolve()) }));
+
+import {
+  PROJECT_FILES_TAB_CMD,
+  cmdToKind,
+  isRestorableKind,
+  isRestorableTab,
+  useTabsStore,
+  type GroupNode,
+} from "../stores/tabs";
+
+const invokeMock = vi.mocked(invoke);
+
+describe("projectfiles tab kind", () => {
+  it("recovers its kind from the bare command", () => {
+    expect(cmdToKind(PROJECT_FILES_TAB_CMD)).toBe("projectfiles");
+    // The separate FileBrowser tab keeps its own command and kind.
+    expect(cmdToKind("__eldrun_files__")).toBe("files");
+  });
+
+  it("survives a restart (a pure frontend pane, like the files tab)", () => {
+    expect(isRestorableKind("projectfiles")).toBe(true);
+    expect(
+      isRestorableTab({ kind: "projectfiles", cmd: PROJECT_FILES_TAB_CMD }),
+    ).toBe(true);
+  });
+});
+
+describe("a projectfiles tab's browsed folder", () => {
+  beforeEach(() => {
+    invokeMock.mockClear();
+    useTabsStore.setState({
+      scope: "p1",
+      tabs: [
+        {
+          key: "f1",
+          scope: "p1",
+          label: "src",
+          cmd: PROJECT_FILES_TAB_CMD,
+          cwd: "/p/p1",
+          kind: "projectfiles",
+          folder: "src",
+        },
+      ],
+      activeKey: "f1",
+      layout: { type: "group", id: "g1", tabKeys: ["f1"], activeKey: "f1" } as GroupNode,
+      focusedGroupId: "g1",
+      tabsByScope: {
+        p1: [
+          {
+            key: "f1",
+            scope: "p1",
+            label: "src",
+            cmd: PROJECT_FILES_TAB_CMD,
+            cwd: "/p/p1",
+            kind: "projectfiles",
+            folder: "src",
+          },
+        ],
+      },
+      layoutByScope: {
+        p1: { type: "group", id: "g1", tabKeys: ["f1"], activeKey: "f1" } as GroupNode,
+      },
+      focusedGroupByScope: { p1: "g1" },
+    });
+  });
+
+  it("setTabFolder records a navigation, and is a no-op when unchanged", () => {
+    const before = useTabsStore.getState().tabs;
+    useTabsStore.getState().setTabFolder("f1", "src");
+    // Unchanged → the tabs array is not churned (which would wake saveLayout).
+    expect(useTabsStore.getState().tabs).toBe(before);
+
+    useTabsStore.getState().setTabFolder("f1", "src/components");
+    expect(useTabsStore.getState().tabs[0].folder).toBe("src/components");
+  });
+
+  it("persists the folder, and restores the tab on it", async () => {
+    await useTabsStore.getState().saveLayout("/p/p1/project.json");
+    const saved = invokeMock.mock.calls.find(([cmd]) => cmd === "save_tab_layout");
+    expect(saved).toBeTruthy();
+    const layout = (saved![1] as { tabs: Array<Record<string, unknown>> }).tabs;
+    expect(layout).toHaveLength(1);
+    expect(layout[0]).toMatchObject({ kind: "projectfiles", folder: "src" });
+
+    useTabsStore.getState().loadFromLayout(
+      layout as never,
+      "/p/p1",
+      "p1",
+      { type: "group", id: "g1", tabKeys: [String(layout[0].key)], activeKey: String(layout[0].key) } as never,
+    );
+    const restored = useTabsStore.getState().tabs[0];
+    expect(restored.kind).toBe("projectfiles");
+    expect(restored.folder).toBe("src");
+  });
+});
diff --git a/src/__tests__/ProjectPillsRender.test.tsx b/src/__tests__/ProjectPillsRender.test.tsx
new file mode 100644
index 0000000..fbc6303
--- /dev/null
+++ b/src/__tests__/ProjectPillsRender.test.tsx
@@ -0,0 +1,102 @@
+/**
+ * Regression: the project switcher must render one pill per active project.
+ * A crash or bad filter in the pill strip made the pills vanish entirely — a
+ * severe bug, since the switcher is the primary way to move between projects.
+ */
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, act } from "@testing-library/react";
+
+vi.mock("@tauri-apps/api/core", () => ({ invoke: vi.fn().mockResolvedValue(null) }));
+vi.mock("@tauri-apps/api/event", () => ({ listen: vi.fn().mockResolvedValue(() => {}) }));
+vi.mock("@tauri-apps/api/window", () => ({
+  getCurrentWindow: () => ({ startDragging: () => Promise.resolve() }),
+}));
+vi.mock("@tauri-apps/plugin-dialog", () => ({
+  open: vi.fn().mockResolvedValue(null),
+  confirm: vi.fn().mockResolvedValue(false),
+  message: vi.fn().mockResolvedValue(null),
+}));
+
+import { ProjectSwitcher } from "../components/layout/ProjectSwitcher";
+import { useProjectsStore } from "../stores/projects";
+import { useBoxesStore } from "../stores/boxes";
+import type { ProjectEntry } from "../types";
+
+function proj(id: string, position: number, extra: Partial<ProjectEntry> = {}): ProjectEntry {
+  return {
+    id,
+    name: `Project ${id}`,
+    status: "active",
+    position,
+    local_file: `/tmp/${id}/project.json`,
+    directory: `/tmp/${id}`,
+    ...extra,
+  };
+}
+
+describe("project switcher pill rendering", () => {
+  beforeEach(() => {
+    useBoxesStore.setState({ boxes: [] });
+    useProjectsStore.setState({ projects: [], activeId: null, loaded: true });
+  });
+
+  it("renders one pill per active project", async () => {
+    useProjectsStore.setState({
+      projects: [proj("a", 0), proj("b", 1), proj("c", 2)],
+      activeId: "a",
+      loaded: true,
+    });
+
+    let container: HTMLElement;
+    await act(async () => {
+      ({ container } = render(<ProjectSwitcher open />));
+    });
+
+    const pills = container!.querySelectorAll(".project-pill");
+    expect(pills.length).toBe(3);
+  });
+
+  it("renders a pill for a remote project (matches real on-disk shape)", async () => {
+    useProjectsStore.setState({
+      projects: [
+        proj("a", 0),
+        proj("ssh", 1, {
+          name: "SSH Git Test",
+          git_type: "local",
+          remote: {
+            auto_connect: true,
+            host: "example.host",
+            key_auth: false,
+            openvpn: { config: "/x/y.ovpn", username: "u" },
+            remote_path: "/home/u/proj",
+            user: "u",
+          },
+        } as Partial<ProjectEntry>),
+      ],
+      activeId: "a",
+      loaded: true,
+    });
+
+    let container: HTMLElement;
+    await act(async () => {
+      ({ container } = render(<ProjectSwitcher open />));
+    });
+
+    expect(container!.querySelectorAll(".project-pill").length).toBe(2);
+  });
+
+  it("hides inactive projects but keeps the active ones", async () => {
+    useProjectsStore.setState({
+      projects: [proj("a", 0), proj("b", 1, { status: "inactive" }), proj("c", 2)],
+      activeId: "a",
+      loaded: true,
+    });
+
+    let container: HTMLElement;
+    await act(async () => {
+      ({ container } = render(<ProjectSwitcher open />));
+    });
+
+    expect(container!.querySelectorAll(".project-pill").length).toBe(2);
+  });
+});
diff --git a/src/__tests__/PythonIntel.test.ts b/src/__tests__/PythonIntel.test.ts
new file mode 100644
index 0000000..eebd40d
--- /dev/null
+++ b/src/__tests__/PythonIntel.test.ts
@@ -0,0 +1,445 @@
+import { describe, it, expect } from "vitest";
+import {
+  findDef,
+  findPythonDefs,
+  isExecutableLine,
+  isPythonMainScript,
+  isPythonPath,
+  modulePathCandidates,
+  parsePythonImports,
+  pythonLinkRanges,
+  pythonRefAt,
+  pythonTokens,
+  remapBreakpoints,
+  resolvePythonDefinition,
+  snapBreakpointLine,
+} from "../lib/viewers/python";
+
+describe("isPythonPath", () => {
+  it("accepts python sources and rejects everything else", () => {
+    expect(isPythonPath("/a/b/main.py")).toBe(true);
+    expect(isPythonPath("/a/b/stub.pyi")).toBe(true);
+    expect(isPythonPath("/a/b/MAIN.PY")).toBe(true);
+    expect(isPythonPath("/a/b/notes.md")).toBe(false);
+    expect(isPythonPath("/a/pyproject.toml")).toBe(false);
+  });
+});
+
+describe("isPythonMainScript", () => {
+  it("accepts the standard module-level guard, either quote style", () => {
+    expect(isPythonMainScript('if __name__ == "__main__":\n    main()\n')).toBe(true);
+    expect(isPythonMainScript("if __name__ == '__main__':\n    main()\n")).toBe(true);
+  });
+
+  it("tolerates extra spacing around the guard", () => {
+    expect(isPythonMainScript('if __name__   ==   "__main__" :\n    main()\n')).toBe(true);
+  });
+
+  it("rejects a plain module with no entrypoint guard", () => {
+    expect(isPythonMainScript("def helper():\n    return 1\n")).toBe(false);
+  });
+
+  it("rejects an indented guard (inside a function/class, not module level)", () => {
+    expect(isPythonMainScript('def f():\n    if __name__ == "__main__":\n        pass\n')).toBe(false);
+  });
+
+  it("rejects mismatched quotes", () => {
+    expect(isPythonMainScript("if __name__ == \"__main__':\n    main()\n")).toBe(false);
+  });
+});
+
+// ── Breakpoints ──────────────────────────────────────────────────────────────
+
+describe("isExecutableLine", () => {
+  it("rejects the lines pdb refuses to break on", () => {
+    expect(isExecutableLine("x = 1")).toBe(true);
+    expect(isExecutableLine("    return x")).toBe(true);
+    expect(isExecutableLine("")).toBe(false);
+    expect(isExecutableLine("   ")).toBe(false);
+    expect(isExecutableLine("# a comment")).toBe(false);
+    // A decorator runs at definition time, not at the call — breaking there
+    // fires on import, which is never what the click meant.
+    expect(isExecutableLine("@lru_cache")).toBe(false);
+  });
+});
+
+describe("snapBreakpointLine", () => {
+  const src = ["# header", "", "import os", "", "", "def f():", "    return 1"].join("\n");
+
+  it("keeps an already-executable line", () => {
+    expect(snapBreakpointLine(src, 3)).toBe(3);
+    expect(snapBreakpointLine(src, 7)).toBe(7);
+  });
+
+  it("snaps a blank or comment line down to the next executable one", () => {
+    expect(snapBreakpointLine(src, 1)).toBe(3); // comment → import
+    expect(snapBreakpointLine(src, 4)).toBe(6); // blank → def
+  });
+
+  it("returns null when nothing below is executable", () => {
+    expect(snapBreakpointLine("x = 1\n\n\n", 2)).toBeNull();
+  });
+});
+
+describe("remapBreakpoints", () => {
+  const src = ["import os", "", "def f():", "    return 1", "", "def g():", "    return 2"].join(
+    "\n",
+  );
+
+  it("is a no-op when the text is unchanged", () => {
+    expect(remapBreakpoints(src, src, [4, 7])).toEqual([4, 7]);
+  });
+
+  it("shifts breakpoints below an insertion", () => {
+    const next = ["import os", "import sys", "", "def f():", "    return 1", "", "def g():", "    return 2"].join("\n");
+    // Both defs moved down one line; the dots must follow them.
+    expect(remapBreakpoints(src, next, [4, 7])).toEqual([5, 8]);
+  });
+
+  it("shifts breakpoints up when lines above are deleted", () => {
+    const next = ["def f():", "    return 1", "", "def g():", "    return 2"].join("\n");
+    expect(remapBreakpoints(src, next, [4, 7])).toEqual([2, 5]);
+  });
+
+  it("leaves breakpoints above an edit alone", () => {
+    const next = src.replace("    return 2", "    return 99");
+    expect(remapBreakpoints(src, next, [4])).toEqual([4]);
+  });
+
+  it("drops a breakpoint whose own line was replaced", () => {
+    // Line 4 (`return 1`) is the edited span — the statement it named is gone,
+    // so the dot goes with it rather than silently pointing at something else.
+    const next = src.replace("    return 1", "    return 1 + 1\n    print('x')");
+    expect(remapBreakpoints(src, next, [4, 7])).toEqual([8]);
+  });
+
+  it("keeps the result sorted and deduplicated", () => {
+    const next = ["def f():", "    return 1", "", "def g():", "    return 2"].join("\n");
+    expect(remapBreakpoints(src, next, [7, 4])).toEqual([2, 5]);
+  });
+});
+
+// ── Lexing ───────────────────────────────────────────────────────────────────
+
+describe("pythonTokens", () => {
+  it("skips comments and string bodies", () => {
+    const names = pythonTokens(`x = "import os"  # import sys\ny = 1`).map((t) => t.name);
+    expect(names).toEqual(["x", "y"]);
+  });
+
+  it("skips triple-quoted docstrings", () => {
+    const src = `"""\nmodule docstring mentioning helper\n"""\nimport helper`;
+    const names = pythonTokens(src).map((t) => t.name);
+    expect(names).toEqual(["import", "helper"]);
+  });
+
+  it("treats an f-string prefix as part of the literal", () => {
+    const names = pythonTokens(`msg = f"hello {name}"`).map((t) => t.name);
+    // `f` is a prefix, not a name; the literal body (incl. the interpolation) is
+    // skipped wholesale.
+    expect(names).toEqual(["msg"]);
+  });
+
+  it("records the qualifier of a dotted access", () => {
+    const toks = pythonTokens("os.path.join(a)");
+    expect(toks.map((t) => [t.name, t.qualifier])).toEqual([
+      ["os", null],
+      ["path", "os"],
+      ["join", "path"],
+      ["a", null],
+    ]);
+  });
+
+  it("does not carry a qualifier across an unrelated token", () => {
+    const toks = pythonTokens("foo(bar)");
+    expect(toks.find((t) => t.name === "bar")?.qualifier).toBeNull();
+  });
+});
+
+describe("pythonRefAt", () => {
+  const src = "import os\nos.getcwd()\n";
+  it("finds the name under the caret with its qualifier", () => {
+    const ref = pythonRefAt(src, src.indexOf("getcwd") + 2);
+    expect(ref?.name).toBe("getcwd");
+    expect(ref?.qualifier).toBe("os");
+  });
+  it("matches a caret resting just after a name", () => {
+    expect(pythonRefAt("x = 1", 1)?.name).toBe("x");
+  });
+  it("returns null off a name", () => {
+    expect(pythonRefAt("x = 1", 3)).toBeNull(); // in the whitespace after `=`
+    expect(pythonRefAt("     ", 3)).toBeNull();
+  });
+});
+
+// ── Definitions ──────────────────────────────────────────────────────────────
+
+describe("findPythonDefs", () => {
+  it("finds defs, async defs, classes and module-level bindings", () => {
+    const src = [
+      "TIMEOUT = 30",
+      "class Client:",
+      "    def send(self):",
+      "        pass",
+      "async def fetch(url):",
+      "    pass",
+    ].join("\n");
+    expect(findPythonDefs(src)).toEqual([
+      { name: "TIMEOUT", line: 1, column: 0, kind: "var" },
+      { name: "Client", line: 2, column: 6, kind: "class" },
+      { name: "send", line: 3, column: 8, kind: "def" },
+      { name: "fetch", line: 5, column: 10, kind: "def" },
+    ]);
+  });
+
+  it("does not mistake an equality test for a binding", () => {
+    expect(findPythonDefs("x == 1")).toEqual([]);
+  });
+
+  it("prefers a def over a bare assignment of the same name", () => {
+    const src = "def f():\n    pass\nf = None";
+    expect(findDef(src, "f")).toMatchObject({ line: 1, kind: "def" });
+  });
+});
+
+// ── Imports ──────────────────────────────────────────────────────────────────
+
+describe("parsePythonImports", () => {
+  it("parses plain imports, including dotted and aliased", () => {
+    expect(parsePythonImports("import os")).toEqual([
+      { local: "os", module: "os", level: 0, symbol: "" },
+    ]);
+    // `import a.b` binds the ROOT name `a`, not `b`.
+    expect(parsePythonImports("import pkg.sub")).toEqual([
+      { local: "pkg", module: "pkg.sub", level: 0, symbol: "" },
+    ]);
+    expect(parsePythonImports("import numpy as np")).toEqual([
+      { local: "np", module: "numpy", level: 0, symbol: "" },
+    ]);
+  });
+
+  it("parses from-imports, relative levels and aliases", () => {
+    expect(parsePythonImports("from .util import helper")).toEqual([
+      { local: "helper", module: "util", level: 1, symbol: "helper" },
+    ]);
+    expect(parsePythonImports("from ..pkg.mod import a, b as c")).toEqual([
+      { local: "a", module: "pkg.mod", level: 2, symbol: "a" },
+      { local: "c", module: "pkg.mod", level: 2, symbol: "b" },
+    ]);
+    expect(parsePythonImports("from . import sibling")).toEqual([
+      { local: "sibling", module: "", level: 1, symbol: "sibling" },
+    ]);
+  });
+
+  it("folds a parenthesised multi-line import list", () => {
+    const src = "from .models import (\n    User,\n    Order as Purchase,\n)";
+    expect(parsePythonImports(src)).toEqual([
+      { local: "User", module: "models", level: 1, symbol: "User" },
+      { local: "Purchase", module: "models", level: 1, symbol: "Order" },
+    ]);
+  });
+
+  it("ignores the word 'import' inside a docstring or comment", () => {
+    expect(parsePythonImports(`"""\nfrom fake import nothing\n"""`)).toEqual([]);
+    expect(parsePythonImports("# from fake import nothing")).toEqual([]);
+  });
+
+  it("skips a star import rather than binding a bogus name", () => {
+    expect(parsePythonImports("from os import *")).toEqual([]);
+  });
+});
+
+// ── Module resolution ────────────────────────────────────────────────────────
+
+describe("modulePathCandidates", () => {
+  it("anchors a relative import at the importing file's directory", () => {
+    expect(
+      modulePathCandidates({ module: "util", level: 1 }, "/proj/pkg/main.py", "/proj"),
+    ).toEqual(["/proj/pkg/util.py", "/proj/pkg/util/__init__.py"]);
+  });
+
+  it("climbs one directory per extra dot", () => {
+    expect(
+      modulePathCandidates({ module: "shared", level: 2 }, "/proj/pkg/sub/main.py", "/proj"),
+    ).toEqual(["/proj/pkg/shared.py", "/proj/pkg/shared/__init__.py"]);
+  });
+
+  it("probes project root, src-layout and the file's own dir for an absolute import", () => {
+    expect(
+      modulePathCandidates({ module: "pkg.mod", level: 0 }, "/proj/app/main.py", "/proj"),
+    ).toEqual([
+      "/proj/pkg/mod.py",
+      "/proj/pkg/mod/__init__.py",
+      "/proj/src/pkg/mod.py",
+      "/proj/src/pkg/mod/__init__.py",
+      "/proj/app/pkg/mod.py",
+      "/proj/app/pkg/mod/__init__.py",
+    ]);
+  });
+
+  it("names the package directory itself for a bare `from . import x`", () => {
+    expect(modulePathCandidates({ module: "", level: 1 }, "/proj/pkg/main.py", "/proj")).toEqual([
+      "/proj/pkg/__init__.py",
+    ]);
+  });
+});
+
+// ── Go-to-definition ─────────────────────────────────────────────────────────
+
+/** A fake project tree: the injected reader is the only filesystem the resolver
+ *  ever sees, which is what keeps it testable without a host. */
+function reader(files: Record<string, string>) {
+  return async (p: string) => files[p] ?? null;
+}
+
+describe("resolvePythonDefinition", () => {
+  const MAIN = "/proj/main.py";
+
+  it("resolves a symbol imported from a sibling module", async () => {
+    const main = "from .util import helper\n\nhelper()\n";
+    const files = {
+      "/proj/util.py": "import os\n\n\ndef helper(x):\n    return x\n",
+    };
+    const loc = await resolvePythonDefinition(
+      main,
+      main.lastIndexOf("helper") + 1,
+      MAIN,
+      "/proj",
+      reader(files),
+    );
+    expect(loc).toEqual({ path: "/proj/util.py", line: 4, column: 4 });
+  });
+
+  it("resolves an attribute of an imported module", async () => {
+    const main = "import util\n\nutil.helper()\n";
+    const files = { "/proj/util.py": "def helper():\n    pass\n" };
+    const loc = await resolvePythonDefinition(
+      main,
+      main.indexOf("util.helper") + 6,
+      MAIN,
+      "/proj",
+      reader(files),
+    );
+    expect(loc).toEqual({ path: "/proj/util.py", line: 1, column: 4 });
+  });
+
+  it("resolves a name defined in the same file", async () => {
+    const main = "def local():\n    pass\n\nlocal()\n";
+    const loc = await resolvePythonDefinition(
+      main,
+      main.lastIndexOf("local") + 1,
+      MAIN,
+      "/proj",
+      reader({}),
+    );
+    expect(loc).toEqual({ path: MAIN, line: 1, column: 4 });
+  });
+
+  it("resolves self.method to the method in this file", async () => {
+    const main = ["class C:", "    def run(self):", "        self.step()", "    def step(self):", "        pass"].join("\n");
+    const loc = await resolvePythonDefinition(
+      main,
+      main.indexOf("self.step") + 6,
+      MAIN,
+      "/proj",
+      reader({}),
+    );
+    expect(loc).toEqual({ path: MAIN, line: 4, column: 8 });
+  });
+
+  it("follows a re-export through a package __init__", async () => {
+    const main = "from .pkg import thing\n\nthing()\n";
+    const files = {
+      "/proj/pkg/__init__.py": "from .impl import thing\n",
+      "/proj/pkg/impl.py": "\ndef thing():\n    pass\n",
+    };
+    const loc = await resolvePythonDefinition(
+      main,
+      main.lastIndexOf("thing") + 1,
+      MAIN,
+      "/proj",
+      reader(files),
+    );
+    expect(loc).toEqual({ path: "/proj/pkg/impl.py", line: 2, column: 4 });
+  });
+
+  it("opens the module itself when the import names a submodule, not a symbol", async () => {
+    const main = "from pkg import mod\n\nmod.f()\n";
+    const files = { "/proj/pkg/mod.py": "def f():\n    pass\n" };
+    // Clicking `mod` — it is not a def inside pkg, it IS pkg/mod.py.
+    const loc = await resolvePythonDefinition(
+      main,
+      main.indexOf("import mod") + 8,
+      MAIN,
+      "/proj",
+      reader(files),
+    );
+    expect(loc).toEqual({ path: "/proj/pkg/mod.py", line: 1, column: 0 });
+  });
+
+  it("returns null for an unresolvable name rather than guessing", async () => {
+    const main = "import os\n\nos.getcwd()\nmystery()\n";
+    expect(
+      await resolvePythonDefinition(main, main.indexOf("mystery") + 1, MAIN, "/proj", reader({})),
+    ).toBeNull();
+    // A stdlib module that isn't in the project tree also has no local file.
+    expect(
+      await resolvePythonDefinition(main, main.indexOf("getcwd") + 1, MAIN, "/proj", reader({})),
+    ).toBeNull();
+  });
+
+  it("terminates on a circular re-export instead of hanging", async () => {
+    const main = "from .a import thing\n";
+    const files = {
+      // a re-exports from b, b re-exports back from a — legal, and it happens.
+      "/proj/a.py": "from .b import thing\n",
+      "/proj/b.py": "from .a import thing\n",
+    };
+    const loc = await resolvePythonDefinition(
+      main,
+      main.indexOf("thing") + 1,
+      MAIN,
+      "/proj",
+      reader(files),
+    );
+    expect(loc).toBeNull();
+  });
+});
+
+// ── Link ranges (what ctrl+click underlines) ─────────────────────────────────
+
+describe("pythonLinkRanges", () => {
+  const rangesOf = (src: string) =>
+    pythonLinkRanges(src).map((r) => src.slice(r.start, r.end));
+
+  it("underlines uses of imported names and local defs", () => {
+    const src = "from .util import helper\n\ndef run():\n    helper()\n\nrun()\n";
+    expect(rangesOf(src)).toEqual(["helper", "helper", "run"]);
+  });
+
+  it("underlines an attribute of an imported module, and the module itself", () => {
+    const src = "import util\n\nutil.helper()\n";
+    // `util` at the import site + at the use site, and the attribute.
+    expect(rangesOf(src)).toEqual(["util", "util", "helper"]);
+  });
+
+  it("does not underline a definition site — jumping to it would be a no-op", () => {
+    const src = "def solo():\n    pass\n";
+    expect(rangesOf(src)).toEqual([]);
+  });
+
+  it("does not underline an unresolvable name, so the affordance never lies", () => {
+    const src = "mystery()\nobj.method()\n";
+    expect(rangesOf(src)).toEqual([]);
+  });
+
+  it("does not underline keywords or names inside strings", () => {
+    const src = "from .util import helper\n\nreturn_value = 'helper'\n";
+    expect(rangesOf(src)).toEqual(["helper"]);
+  });
+
+  it("underlines self.method only when the method exists in this file", () => {
+    const src = ["class C:", "    def run(self):", "        self.step()", "        self.absent()", "    def step(self):", "        pass"].join("\n");
+    expect(rangesOf(src)).toEqual(["step"]);
+  });
+});
diff --git a/src/__tests__/PythonRun.test.ts b/src/__tests__/PythonRun.test.ts
new file mode 100644
index 0000000..5ed6981
--- /dev/null
+++ b/src/__tests__/PythonRun.test.ts
@@ -0,0 +1,112 @@
+import { describe, it, expect } from "vitest";
+import {
+  buildDebugCommand,
+  buildRunCommand,
+  pyTabLabel,
+  runCwd,
+  shellQuote,
+  systemInterpreter,
+} from "../lib/pythonRun";
+
+describe("shellQuote", () => {
+  it("single-quotes on unix and escapes an embedded quote", () => {
+    expect(shellQuote("/a/b c.py", "unix")).toBe("'/a/b c.py'");
+    expect(shellQuote("it's.py", "unix")).toBe(`'it'\\''s.py'`);
+  });
+
+  it("double-quotes on windows (cmd.exe has no single-quote syntax)", () => {
+    expect(shellQuote("C:\\a b\\x.py", "windows")).toBe('"C:\\a b\\x.py"');
+    expect(shellQuote('a"b', "windows")).toBe('"a""b"');
+  });
+});
+
+describe("systemInterpreter", () => {
+  // Interpreter *selection* (venv/poetry/conda/pyenv precedence) lives in the
+  // backend (`commands::python`) and is tested there — one ranking, one place.
+  // What the frontend still owns is the last-resort fallback when the backend
+  // can't be reached at all, so Run degrades instead of refusing.
+  it("is the platform's system python", () => {
+    expect(systemInterpreter("unix")).toBe("python3");
+    expect(systemInterpreter("windows")).toBe("python");
+  });
+});
+
+describe("buildRunCommand", () => {
+  it("quotes both the interpreter and the file", () => {
+    expect(buildRunCommand(".venv/bin/python", "/proj/a b/main.py", "unix")).toBe(
+      "'.venv/bin/python' '/proj/a b/main.py'",
+    );
+  });
+
+  it("appends the user's arguments verbatim after the file", () => {
+    // The args are a raw shell string the host shell parses, not one quoted
+    // token — so `--epochs 5 "out dir"` reaches the program as three arguments.
+    expect(
+      buildRunCommand("python3", "/proj/main.py", "unix", '--epochs 5 "out dir"'),
+    ).toBe(`'python3' '/proj/main.py' --epochs 5 "out dir"`);
+  });
+
+  it("adds nothing for empty or whitespace-only args", () => {
+    expect(buildRunCommand("python3", "/proj/main.py", "unix", "")).toBe(
+      "'python3' '/proj/main.py'",
+    );
+    expect(buildRunCommand("python3", "/proj/main.py", "unix", "   ")).toBe(
+      "'python3' '/proj/main.py'",
+    );
+  });
+});
+
+describe("buildDebugCommand", () => {
+  const FILE = "/proj/main.py";
+
+  it("pre-loads the breakpoints and runs straight to the first one", () => {
+    expect(buildDebugCommand("python3", FILE, [12, 4], "unix")).toBe(
+      "'python3' -m pdb -c 'b /proj/main.py:4' -c 'b /proj/main.py:12' -c 'continue' '/proj/main.py'",
+    );
+  });
+
+  it("omits `continue` with no breakpoints, so pdb stops at the first line", () => {
+    // With a trailing `continue` and nothing to break on, pdb would run the
+    // program to completion — "debug" would be indistinguishable from "run".
+    expect(buildDebugCommand("python3", FILE, [], "unix")).toBe(
+      "'python3' -m pdb '/proj/main.py'",
+    );
+  });
+
+  it("sorts and deduplicates the breakpoint lines", () => {
+    const cmd = buildDebugCommand("python3", FILE, [9, 3, 9], "unix");
+    expect(cmd.match(/-c 'b [^']+'/g)).toEqual([
+      "-c 'b /proj/main.py:3'",
+      "-c 'b /proj/main.py:9'",
+    ]);
+  });
+
+  it("quotes a windows path (whose drive colon must survive pdb's file:line split)", () => {
+    expect(buildDebugCommand("python", "C:\\p\\main.py", [7], "windows")).toBe(
+      '"python" -m pdb -c "b C:\\p\\main.py:7" -c "continue" "C:\\p\\main.py"',
+    );
+  });
+
+  it("passes the script's arguments after the file, as pdb expects", () => {
+    expect(buildDebugCommand("python3", FILE, [12], "unix", "--verbose in.txt")).toBe(
+      "'python3' -m pdb -c 'b /proj/main.py:12' -c 'continue' '/proj/main.py' --verbose in.txt",
+    );
+  });
+});
+
+describe("pyTabLabel", () => {
+  it("names the tab after the file, marked by mode", () => {
+    expect(pyTabLabel("run", "/proj/pkg/main.py")).toBe("▶ main.py");
+    expect(pyTabLabel("debug", "/proj/pkg/main.py")).toBe("🐞 main.py");
+  });
+});
+
+describe("runCwd", () => {
+  it("runs from the project root when there is one", () => {
+    expect(runCwd("/proj", "/proj/pkg/main.py")).toBe("/proj");
+  });
+  it("falls back to the file's own directory outside a project", () => {
+    expect(runCwd(null, "/tmp/scratch/main.py")).toBe("/tmp/scratch");
+    expect(runCwd("", "/tmp/scratch/main.py")).toBe("/tmp/scratch");
+  });
+});
diff --git a/src/__tests__/PythonRunArgs.test.ts b/src/__tests__/PythonRunArgs.test.ts
new file mode 100644
index 0000000..2e43c46
--- /dev/null
+++ b/src/__tests__/PythonRunArgs.test.ts
@@ -0,0 +1,57 @@
+/**
+ * Python Run/Debug arguments (#py) are kept PER FILE — keyed by absolute path in
+ * global settings — not per tab, so every viewer of the same script shares one
+ * set of args and they survive an Eldrun restart (settings.json). These tests
+ * lock the store action that owns that map: set, share-by-path, and clear-prunes.
+ */
+import { describe, it, expect, beforeEach, vi } from "vitest";
+
+import { invoke } from "@tauri-apps/api/core";
+
+vi.mock("@tauri-apps/api/core", () => ({ invoke: vi.fn(() => Promise.resolve()) }));
+
+import { useSettingsStore } from "../stores/settings";
+
+const invokeMock = vi.mocked(invoke);
+
+function reset() {
+  invokeMock.mockClear();
+  useSettingsStore.setState({ settings: {}, loaded: true });
+}
+
+describe("setPythonRunArgs (per-file run args)", () => {
+  beforeEach(reset);
+
+  it("stores args keyed by the file's absolute path", async () => {
+    await useSettingsStore.getState().setPythonRunArgs("/p/main.py", "--epochs 5 data.csv");
+    expect(useSettingsStore.getState().settings?.python_run_args).toEqual({
+      "/p/main.py": "--epochs 5 data.csv",
+    });
+    // Persisted through the ordinary settings write (settings.json, round-tripped
+    // via the backend's `extra` catch-all — no bespoke command).
+    const saved = invokeMock.mock.calls.find((c) => c[0] === "save_settings");
+    expect(saved).toBeTruthy();
+  });
+
+  it("trims and keeps distinct files independent (shared only within one path)", async () => {
+    await useSettingsStore.getState().setPythonRunArgs("/p/a.py", "  --x 1  ");
+    await useSettingsStore.getState().setPythonRunArgs("/p/b.py", "--y 2");
+    expect(useSettingsStore.getState().settings?.python_run_args).toEqual({
+      "/p/a.py": "--x 1",
+      "/p/b.py": "--y 2",
+    });
+  });
+
+  it("clears an entry (empty string) by pruning it, not storing ''", async () => {
+    await useSettingsStore.getState().setPythonRunArgs("/p/main.py", "--epochs 5");
+    await useSettingsStore.getState().setPythonRunArgs("/p/main.py", "");
+    expect(useSettingsStore.getState().settings?.python_run_args).toEqual({});
+  });
+
+  it("is a no-op when the args are unchanged (no redundant settings write)", async () => {
+    await useSettingsStore.getState().setPythonRunArgs("/p/main.py", "--epochs 5");
+    invokeMock.mockClear();
+    await useSettingsStore.getState().setPythonRunArgs("/p/main.py", "--epochs 5");
+    expect(invokeMock.mock.calls.some((c) => c[0] === "save_settings")).toBe(false);
+  });
+});
diff --git a/src/__tests__/PythonViewer.test.tsx b/src/__tests__/PythonViewer.test.tsx
new file mode 100644
index 0000000..dd42dbc
--- /dev/null
+++ b/src/__tests__/PythonViewer.test.tsx
@@ -0,0 +1,354 @@
+/**
+ * Python features in the native code viewer (#py), driven through the real UI:
+ *  - Run/Debug open a terminal tab in the file's OWN project scope, running the
+ *    venv interpreter when the project has one.
+ *  - The gutter sets breakpoints (snapping off blank/comment lines), and Debug
+ *    hands them to pdb.
+ *  - Ctrl+Click on an imported name opens the defining file at its `def`.
+ *  - None of it appears for a non-Python file.
+ */
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, act, waitFor, fireEvent } from "@testing-library/react";
+
+const { mockInvoke } = vi.hoisted(() => ({ mockInvoke: vi.fn() }));
+vi.mock("@tauri-apps/api/core", () => ({ invoke: mockInvoke }));
+vi.mock("@tauri-apps/api/event", () => ({
+  emit: vi.fn(() => Promise.resolve()),
+  listen: vi.fn(() => Promise.resolve(() => {})),
+}));
+vi.mock("../stores/windows", () => ({
+  useWindowsStore: { getState: () => ({ openFile: () => Promise.resolve() }) },
+}));
+// Run/Debug + the gutter are behind the experimental `python_run_debug` setting;
+// the tests below turn it on, and the last block asserts what is left with it off.
+const { settingsState } = vi.hoisted(() => ({
+  settingsState: {
+    settings: { autosave: false, viewer_prefs: {}, python_run_debug: true } as Record<
+      string,
+      unknown
+    >,
+  },
+}));
+vi.mock("../stores/settings", () => ({
+  useSettingsStore: Object.assign((sel: (s: unknown) => unknown) => sel(settingsState), {
+    getState: () => settingsState,
+  }),
+}));
+vi.mock("../stores/projects", () => {
+  const state = {
+    projects: [{ id: "proj", directory: "/p", local_file: "/p/project.json" }],
+    activeId: "proj",
+  };
+  const useProjectsStore = Object.assign(
+    (sel?: (s: typeof state) => unknown) => (sel ? sel(state) : state),
+    { getState: () => state },
+  );
+  return { useProjectsStore };
+});
+
+// The tabs store is mocked so the test can assert on exactly what Run/Debug and
+// go-to-definition ask it to open, without standing up a layout tree.
+const { addTabToScope, addTab, setActive, removeTab, setViewerState } = vi.hoisted(() => ({
+  addTabToScope: vi.fn((_scope: string, tab: Record<string, unknown>) => ({ ...tab, key: "t1" })),
+  addTab: vi.fn((tab: Record<string, unknown>) => ({ ...tab, key: "t2" })),
+  setActive: vi.fn(),
+  removeTab: vi.fn(),
+  setViewerState: vi.fn(),
+}));
+vi.mock("../stores/tabs", () => {
+  const state = {
+    tabs: [] as Record<string, unknown>[],
+    layout: null,
+    addTabToScope,
+    addTab,
+    setActive,
+    removeTab,
+    setViewerState,
+    splitWithNewTab: vi.fn(() => null),
+  };
+  const useTabsStore = Object.assign(
+    (sel?: (s: typeof state) => unknown) => (sel ? sel(state) : state),
+    { getState: () => state },
+  );
+  return {
+    useTabsStore,
+    findGroupOfTab: () => null,
+    getDetachedViewerState: () => undefined,
+  };
+});
+
+// Run/Debug only show for a "main" script (a module-level `__main__` guard),
+// so the fixture needs one — kept on line 3 so the blank-line-2-snaps-to-3
+// breakpoint tests below still land where they expect.
+const MAIN = 'from .util import helper\n\nif __name__ == "__main__":\n    helper()\n';
+const UTIL = "import os\n\n\ndef helper(x):\n    return x\n";
+
+/** What the backend's interpreter resolver hands back (#87): the project's pinned
+ *  choice, else the best auto-detected environment. The *precedence* is the
+ *  backend's business (`commands::python`, tested there); here it is simply the
+ *  answer Run/Debug are obliged to use. */
+let interpreter = "python3";
+
+function setup() {
+  interpreter = "python3";
+  settingsState.settings.python_run_debug = true;
+  mockInvoke.mockImplementation((cmd: string, args: Record<string, unknown> = {}) => {
+    if (cmd === "read_file_text") {
+      const path = args.path as string;
+      if (path === "/p/main.py") return Promise.resolve(MAIN);
+      if (path === "/p/util.py") return Promise.resolve(UTIL);
+      if (path === "/p/notes.txt") return Promise.resolve("plain text\n");
+      return Promise.reject(new Error("no such file"));
+    }
+    if (cmd === "file_mtime") return Promise.resolve(1000);
+    if (cmd === "python_interpreter_for") return Promise.resolve(interpreter);
+    return Promise.resolve(null);
+  });
+}
+
+async function renderViewer(path = "/p/main.py") {
+  vi.resetModules();
+  const { FileViewerPane } = await import("../components/embed/FileViewerPane");
+  await act(async () => {
+    render(<FileViewerPane viewer="text" path={path} projectId="proj" />);
+  });
+  const textarea = (await screen.findByRole("textbox")) as HTMLTextAreaElement;
+  await waitFor(() => expect(textarea.value.length).toBeGreaterThan(0));
+  return textarea;
+}
+
+/** The tab Run/Debug opened. */
+function launchedTab() {
+  expect(addTabToScope).toHaveBeenCalledTimes(1);
+  const [scope, tab] = addTabToScope.mock.calls[0] as [string, Record<string, unknown>];
+  return { scope, tab };
+}
+
+describe("python run/debug (#py)", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    setup();
+  });
+
+  it("Run opens a shell tab in the file's project scope, running the file", async () => {
+    await renderViewer();
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText("Run file"));
+    });
+
+    const { scope, tab } = launchedTab();
+    // The file's OWN project, not whichever is globally active.
+    expect(scope).toBe("proj");
+    expect(tab.kind).toBe("shell");
+    expect(tab.cwd).toBe("/p");
+    expect(tab.initialInput).toBe("'python3' '/p/main.py'");
+    expect(setActive).toHaveBeenCalledWith("t1");
+  });
+
+  it("Run uses the interpreter the backend resolved, not a bare python3", async () => {
+    await renderViewer();
+    // The project's venv (or conda env, or a pinned interpreter) — running with
+    // the system python3 would ModuleNotFoundError on the project's own deps.
+    interpreter = ".venv/bin/python";
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText("Run file"));
+    });
+    expect(launchedTab().tab.initialInput).toBe("'.venv/bin/python' '/p/main.py'");
+  });
+
+  it("Debug runs pdb under that same interpreter", async () => {
+    await renderViewer();
+    interpreter = "/opt/conda/envs/ml/bin/python";
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText("Debug file"));
+    });
+    expect(launchedTab().tab.initialInput).toBe(
+      "'/opt/conda/envs/ml/bin/python' -m pdb '/p/main.py'",
+    );
+  });
+
+  it("Debug with no breakpoints runs pdb, which stops at the first line", async () => {
+    await renderViewer();
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText("Debug file"));
+    });
+    expect(launchedTab().tab.initialInput).toBe("'python3' -m pdb '/p/main.py'");
+  });
+
+  it("a gutter click sets a breakpoint, and Debug hands it to pdb", async () => {
+    await renderViewer();
+    // Line 3 is the `if __name__ == "__main__":` guard.
+    const line3 = screen.getByLabelText("Break on line 3");
+    expect(line3.getAttribute("aria-pressed")).toBe("false");
+    await act(async () => {
+      fireEvent.click(line3);
+    });
+    expect(
+      screen.getByLabelText("Remove breakpoint on line 3").getAttribute("aria-pressed"),
+    ).toBe("true");
+
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText("Debug file"));
+    });
+    expect(launchedTab().tab.initialInput).toBe(
+      "'python3' -m pdb -c 'b /p/main.py:3' -c 'continue' '/p/main.py'",
+    );
+  });
+
+  it("a click on a blank line snaps down to the next executable line", async () => {
+    await renderViewer();
+    // Line 2 is blank — pdb refuses to break there, so the dot lands on line 3.
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText("Break on line 2"));
+    });
+    expect(screen.queryByLabelText("Remove breakpoint on line 2")).toBeNull();
+    expect(screen.queryByLabelText("Remove breakpoint on line 3")).not.toBeNull();
+  });
+
+  it("clicking a set breakpoint clears it", async () => {
+    await renderViewer();
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText("Break on line 3"));
+    });
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText("Remove breakpoint on line 3"));
+    });
+    expect(screen.getByLabelText("Break on line 3").getAttribute("aria-pressed")).toBe("false");
+  });
+
+  it("re-running replaces the previous run tab for the same file", async () => {
+    // A live run tab for this file, marked by the env vars openPythonTab writes.
+    const { useTabsStore } = await import("../stores/tabs");
+    const state = useTabsStore.getState() as unknown as { tabs: Record<string, unknown>[] };
+    state.tabs = [
+      {
+        key: "old",
+        kind: "shell",
+        env: { ELDRUN_PY_TARGET: "/p/main.py", ELDRUN_PY_MODE: "run" },
+      },
+    ];
+    await renderViewer();
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText("Run file"));
+    });
+    // Killed rather than re-typed into: the old PTY may still be busy.
+    expect(removeTab).toHaveBeenCalledWith("old");
+    expect(addTabToScope).toHaveBeenCalledTimes(1);
+    state.tabs = [];
+  });
+});
+
+describe("python go-to-definition (#py)", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    setup();
+  });
+
+  it("Ctrl+Click on an imported name opens the defining file at its def", async () => {
+    const textarea = await renderViewer();
+    // Caret inside the `helper()` call on line 3.
+    const caret = MAIN.lastIndexOf("helper") + 2;
+    textarea.selectionStart = textarea.selectionEnd = caret;
+
+    await act(async () => {
+      fireEvent.click(textarea, { ctrlKey: true });
+    });
+
+    // The sibling module was resolved and opened as its own viewer tab.
+    await waitFor(() => expect(addTab).toHaveBeenCalled());
+    const opened = addTab.mock.calls[0][0] as Record<string, unknown>;
+    expect(opened.embedPath).toBe("/p/util.py");
+    expect(opened.kind).toBe("embed");
+  });
+
+  it("a plain click (no modifier) never navigates", async () => {
+    const textarea = await renderViewer();
+    textarea.selectionStart = textarea.selectionEnd = MAIN.lastIndexOf("helper") + 2;
+    await act(async () => {
+      fireEvent.click(textarea);
+    });
+    expect(addTab).not.toHaveBeenCalled();
+  });
+
+  it("Ctrl+Click on an unresolvable name does nothing", async () => {
+    const textarea = await renderViewer();
+    // `os` is imported by util.py, not by this file, and is not in the tree.
+    textarea.selectionStart = textarea.selectionEnd = MAIN.indexOf("from") + 1;
+    await act(async () => {
+      fireEvent.click(textarea, { ctrlKey: true });
+    });
+    expect(addTab).not.toHaveBeenCalled();
+  });
+});
+
+describe("a plain module (no __main__ guard) keeps no Run/Debug", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    setup();
+  });
+
+  it("hides Run/Debug on a Python file with nothing to execute", async () => {
+    await renderViewer("/p/util.py");
+    expect(screen.queryByLabelText("Run file")).toBeNull();
+    expect(screen.queryByLabelText("Debug file")).toBeNull();
+  });
+});
+
+describe("non-Python files keep the plain editor", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    setup();
+  });
+
+  it("shows no Run/Debug buttons and no breakpoint gutter", async () => {
+    await renderViewer("/p/notes.txt");
+    expect(screen.queryByLabelText("Run file")).toBeNull();
+    expect(screen.queryByLabelText("Debug file")).toBeNull();
+    expect(screen.queryByLabelText("Break on line 1")).toBeNull();
+  });
+});
+
+describe("the experimental gate (`python_run_debug`, default off)", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    setup();
+    delete settingsState.settings.python_run_debug; // unset, not false
+  });
+
+  it("hides Debug and the breakpoint gutter on a Python file, but keeps Run", async () => {
+    await renderViewer();
+    // Run is deliberately ungated: it opens a plain terminal tab, nothing
+    // experimental about it. Only Debug (pdb) and the gutter that feeds it
+    // sit behind the flag.
+    expect(screen.queryByLabelText("Run file")).not.toBeNull();
+    expect(screen.queryByLabelText("Debug file")).toBeNull();
+    // The gutter exists only to feed Debug, so it goes with it.
+    expect(screen.queryByLabelText("Break on line 3")).toBeNull();
+  });
+
+  it("debug mode turns it on with no toggle to tick", async () => {
+    settingsState.settings.debug = true;
+    await renderViewer();
+    expect(screen.queryByLabelText("Run file")).not.toBeNull();
+    expect(screen.queryByLabelText("Break on line 3")).not.toBeNull();
+    delete settingsState.settings.debug;
+  });
+
+  it("an explicit off still wins inside debug mode", async () => {
+    settingsState.settings.debug = true;
+    settingsState.settings.python_run_debug = false;
+    await renderViewer();
+    expect(screen.queryByLabelText("Debug file")).toBeNull();
+    delete settingsState.settings.debug;
+  });
+
+  it("still follows Ctrl+Click to a definition — reading is not running", async () => {
+    const textarea = await renderViewer();
+    textarea.selectionStart = textarea.selectionEnd = MAIN.lastIndexOf("helper") + 2;
+    await act(async () => {
+      fireEvent.click(textarea, { ctrlKey: true });
+    });
+    await waitFor(() => expect(addTab).toHaveBeenCalled());
+    expect((addTab.mock.calls[0][0] as Record<string, unknown>).embedPath).toBe("/p/util.py");
+  });
+});
diff --git a/src/__tests__/RemoteCreateCredentials.test.tsx b/src/__tests__/RemoteCreateCredentials.test.tsx
new file mode 100644
index 0000000..db334bc
--- /dev/null
+++ b/src/__tests__/RemoteCreateCredentials.test.tsx
@@ -0,0 +1,207 @@
+/**
+ * The create/extend dialogs save credentials the same way the Connect modal does —
+ * and hand the one they just used to the connection that follows.
+ *
+ * Two gaps this pins shut:
+ *
+ *  1. **No "Save password" in the create/extend flow.** The keychain is keyed by
+ *     *host target* (and by config path for a tunnel), not by project — so there was
+ *     never a reason the toggle couldn't live here too. Without it, a project set up
+ *     with a typed password asked for it again on the very next activation, and
+ *     auto-connect could not be offered at all.
+ *  2. **The first pooled connect went out password-less.** It only worked because the
+ *     dialog's ControlMaster was still up — and the backend reads "no password given,
+ *     none saved" as *key* auth, so it recorded `key_auth: true` on a password host.
+ *     The project then claimed to be auto-connect-eligible and failed on next launch.
+ */
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { invoke } from "@tauri-apps/api/core";
+
+vi.mock("@tauri-apps/api/core", () => ({ invoke: vi.fn(() => Promise.resolve()) }));
+vi.mock("@tauri-apps/api/event", () => ({ listen: vi.fn(() => Promise.resolve(() => {})) }));
+vi.mock("@tauri-apps/plugin-dialog", () => ({ open: vi.fn() }));
+vi.mock("../components/terminal/TerminalView", () => ({ TerminalView: () => null }));
+
+import { ExtendToRemoteDialog } from "../components/projects/ExtendToRemoteDialog";
+import { useProjectsStore } from "../stores/projects";
+import { useRemoteStatusStore } from "../stores/remoteStatus";
+import { useSettingsStore } from "../stores/settings";
+import { useVpnStatusStore } from "../stores/vpnStatus";
+import type { ProjectEntry } from "../types";
+
+const invokeMock = vi.mocked(invoke);
+
+const PROJECT = {
+  id: "p1",
+  name: "sshtest",
+  directory: "/home/u/eldrun/projects/sshtest",
+  position: 0,
+  status: "active",
+} as unknown as ProjectEntry;
+
+/** Args of the last call to `cmd` (or undefined if it was never called). */
+const lastArgs = (cmd: string) => {
+  const calls = invokeMock.mock.calls.filter(([name]) => name === cmd);
+  return calls[calls.length - 1]?.[1] as Record<string, unknown> | undefined;
+};
+
+/** Whether a password is already in the keychain for the host we type below. */
+let sshPasswordSaved = false;
+
+beforeEach(() => {
+  // The VPN connect renders the live handshake log, which scrolls itself into view.
+  // jsdom has no layout, hence no scrollIntoView.
+  HTMLElement.prototype.scrollIntoView = vi.fn();
+  sshPasswordSaved = false;
+  invokeMock.mockReset();
+  invokeMock.mockImplementation((cmd: string) => {
+    if (cmd === "remote_has_saved_password") return Promise.resolve(sshPasswordSaved);
+    if (cmd === "vpn_has_saved_password") return Promise.resolve(false);
+    if (cmd === "openvpn_list_configs") return Promise.resolve([]);
+    if (cmd === "ssh_list_addresses" || cmd === "remote_list_paths") return Promise.resolve([]);
+    if (cmd === "ssh_tooling_status") {
+      return Promise.resolve({ password_auth: true, openvpn: true });
+    }
+    if (cmd === "ssh_default_dir") return Promise.resolve("/home/alice");
+    if (cmd === "ssh_list_dir") return Promise.resolve([]);
+    return Promise.resolve();
+  });
+
+  useSettingsStore.setState({ settings: { connections_headless: true } as never });
+  useProjectsStore.setState({
+    projects: [PROJECT],
+    extendProjectToRemote: vi.fn(() => Promise.resolve()),
+  } as never);
+  useRemoteStatusStore.setState({ byProject: {} } as never);
+  useVpnStatusStore.setState({ byConfig: {}, holders: {} });
+});
+
+/** Fill in the SSH address + password of the connect step. */
+async function fillSsh(password: string) {
+  await userEvent.type(await screen.findByPlaceholderText(/user@host/i), "alice@host.example");
+  if (password) {
+    await userEvent.type(screen.getByPlaceholderText(/leave empty for key/i), password);
+  }
+}
+
+describe("the create/extend dialog can save the SSH password", () => {
+  it("passes the ticked checkbox to the connect, so the working password is stored", async () => {
+    render(<ExtendToRemoteDialog project={PROJECT} onClose={() => {}} />);
+    await fillSsh("hunter2");
+
+    await userEvent.click(screen.getByRole("checkbox", { name: /save password/i }));
+    await userEvent.click(screen.getByRole("button", { name: /^connect$/i }));
+
+    await waitFor(() =>
+      expect(lastArgs("ssh_connect")).toMatchObject({ password: "hunter2", remember: true }),
+    );
+  });
+
+  it("leaves it unticked by default — nothing is stored unless asked for", async () => {
+    render(<ExtendToRemoteDialog project={PROJECT} onClose={() => {}} />);
+    await fillSsh("hunter2");
+
+    await userEvent.click(screen.getByRole("button", { name: /^connect$/i }));
+
+    await waitFor(() => expect(lastArgs("ssh_connect")).toMatchObject({ remember: false }));
+  });
+
+  it("pre-ticks for a host that already has a saved password, and unticking deletes it", async () => {
+    // Pre-ticked matters for more than looks: `remember: false` is an explicit
+    // untick, so connecting with the box unticked would *clear* the credential
+    // another project saved for this same host.
+    sshPasswordSaved = true;
+    render(<ExtendToRemoteDialog project={PROJECT} onClose={() => {}} />);
+    await fillSsh("");
+
+    const save = await screen.findByRole<HTMLInputElement>("checkbox", { name: /save password/i });
+    await waitFor(() => expect(save.checked).toBe(true));
+    // And the field says the saved one will be used — it can't be pre-filled.
+    expect(screen.getByPlaceholderText(/using saved password/i)).toBeTruthy();
+
+    await userEvent.click(save);
+    await waitFor(() =>
+      expect(lastArgs("remote_forget_password")).toMatchObject({ host: "host.example" }),
+    );
+    expect(save.checked).toBe(false);
+  });
+});
+
+describe("the create/extend dialog can save the VPN passphrase", () => {
+  const VPN_CONFIG = "/store/office.ovpn";
+
+  it("passes the ticked checkbox to the tunnel's connect", async () => {
+    invokeMock.mockImplementation((cmd: string) => {
+      if (cmd === "openvpn_list_configs") {
+        return Promise.resolve([{ path: VPN_CONFIG, name: "office.ovpn" }]);
+      }
+      if (cmd === "remote_has_saved_password" || cmd === "vpn_has_saved_password") {
+        return Promise.resolve(false);
+      }
+      if (cmd === "ssh_list_addresses" || cmd === "remote_list_paths") return Promise.resolve([]);
+      if (cmd === "ssh_tooling_status") {
+        return Promise.resolve({ password_auth: true, openvpn: true });
+      }
+      if (cmd === "openvpn_auth_needs") {
+        return Promise.resolve({ username: false, keyPassphrase: false });
+      }
+      return Promise.resolve();
+    });
+
+    render(<ExtendToRemoteDialog project={PROJECT} onClose={() => {}} />);
+
+    await userEvent.click(
+      await screen.findByRole("checkbox", { name: /connect via openvpn/i }),
+    );
+    // Pick the stored config from the recents dropdown.
+    await userEvent.click(await screen.findByTitle(/reuse a previously-used openvpn config/i));
+    await userEvent.click(await screen.findByRole("option", { name: /office\.ovpn/i }));
+
+    await userEvent.type(await screen.findByPlaceholderText(/vpn passphrase/i), "s3cret");
+    await userEvent.click(await screen.findByRole("checkbox", { name: /save passphrase/i }));
+    await userEvent.click(screen.getByRole("button", { name: /connect vpn/i }));
+
+    await waitFor(() =>
+      expect(lastArgs("openvpn_connect")).toMatchObject({
+        config: VPN_CONFIG,
+        password: "s3cret",
+        remember: true,
+      }),
+    );
+  });
+});
+
+describe("the credential the dialog used is the one the project connects with", () => {
+  it("hands the typed password to the pooled connect after extending", async () => {
+    render(<ExtendToRemoteDialog project={PROJECT} onClose={() => {}} />);
+    await fillSsh("hunter2");
+    await userEvent.click(screen.getByRole("button", { name: /^connect$/i }));
+
+    // Connected → the browse step opens on the remote home dir; take it as-is.
+    await userEvent.click(await screen.findByRole("button", { name: /use this folder/i }));
+    await userEvent.click(await screen.findByRole("button", { name: /extend to remote/i }));
+
+    await waitFor(() =>
+      expect(lastArgs("remote_connect")).toEqual({ projectId: "p1", password: "hunter2" }),
+    );
+    // A password-less connect here would have been recorded as key auth (it rides the
+    // master the dialog left up), which is what made auto-connect lie.
+    expect(useProjectsStore.getState().extendProjectToRemote).toHaveBeenCalled();
+  });
+
+  it("sends no password for a key-auth host — there is nothing to hand over", async () => {
+    render(<ExtendToRemoteDialog project={PROJECT} onClose={() => {}} />);
+    await fillSsh("");
+    await userEvent.click(screen.getByRole("button", { name: /^connect$/i }));
+
+    await userEvent.click(await screen.findByRole("button", { name: /use this folder/i }));
+    await userEvent.click(await screen.findByRole("button", { name: /extend to remote/i }));
+
+    await waitFor(() =>
+      expect(lastArgs("remote_connect")).toEqual({ projectId: "p1", password: null }),
+    );
+  });
+});
diff --git a/src/__tests__/RemoteVpnDisconnect.test.tsx b/src/__tests__/RemoteVpnDisconnect.test.tsx
index c72b1dc..4ed8d01 100644
--- a/src/__tests__/RemoteVpnDisconnect.test.tsx
+++ b/src/__tests__/RemoteVpnDisconnect.test.tsx
@@ -90,7 +90,12 @@ describe("VPN-only disconnect (tunnel up, SSH down)", () => {
     expect(toggle.checked).toBe(true);
   });
 
-  it("opens the VPN section when the matching tunnel was started globally", async () => {
+  it("collapses to the already-up notice when a matching tunnel was started globally, not by this project", async () => {
+    // A tunnel that matches this project's stored config but was brought up by the
+    // header (or another project) is not this project's own — it must not be
+    // silently adopted as a holder here (see `useRemoteReconnect`), or logging out
+    // of *this* project could later drop the tunnel out from under whoever actually
+    // started it. It gets the same collapsed notice every other dialog shows.
     useRemoteStatusStore.setState({ byProject: { p1: { ssh: "off", vpn: "off" } } } as never);
     useVpnStatusStore.setState({
       byConfig: { [VPN_CONFIG]: "connected" },
@@ -99,14 +104,10 @@ describe("VPN-only disconnect (tunnel up, SSH down)", () => {
 
     render(<RemoteConnectDialog />);
 
-    const toggle = await screen.findByRole<HTMLInputElement>("checkbox", {
-      name: /connect via openvpn/i,
-    });
-    await waitFor(() => expect(toggle.checked).toBe(true));
-    expect(useRemoteStatusStore.getState().byProject.p1?.vpn).toBe("connected");
-    expect(useVpnStatusStore.getState().holders[VPN_CONFIG]).toEqual(["p1"]);
-    expect(screen.queryByRole("button", { name: /^connect vpn$/i })).toBeNull();
-    expect(screen.getByRole("button", { name: /disconnect vpn/i })).toBeTruthy();
+    expect(await screen.findByText(/openvpn tunnel already up/i)).toBeTruthy();
+    expect(screen.queryByRole("checkbox", { name: /connect via openvpn/i })).toBeNull();
+    expect(useRemoteStatusStore.getState().byProject.p1?.vpn).toBe("off");
+    expect(useVpnStatusStore.getState().holders[VPN_CONFIG] ?? []).toEqual([]);
   });
 
   it("offers a VPN disconnect while connected, and drops only the tunnel", async () => {
diff --git a/src/__tests__/RightPanelBox.test.tsx b/src/__tests__/RightPanelBox.test.tsx
index e959880..8d7e027 100644
--- a/src/__tests__/RightPanelBox.test.tsx
+++ b/src/__tests__/RightPanelBox.test.tsx
@@ -7,7 +7,11 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, act } from "@testing-library/react";
 import type { ProjectBox, ProjectEntry } from "../types";
 
-vi.mock("@tauri-apps/api/core", () => ({ invoke: vi.fn().mockResolvedValue([]) }));
+vi.mock("@tauri-apps/api/core", () => ({
+  // Listing commands resolve to []; git_repo_root returns a path string or null,
+  // so the blanket [] would leak a non-string into ProjectFilesView's norm().
+  invoke: vi.fn((cmd: string) => Promise.resolve(cmd === "git_repo_root" ? null : [])),
+}));
 vi.mock("@tauri-apps/api/event", () => ({ listen: vi.fn().mockResolvedValue(() => {}) }));
 
 import { RightPanel } from "../components/layout/RightPanel";
diff --git a/src/__tests__/RunFilePulse.test.ts b/src/__tests__/RunFilePulse.test.ts
new file mode 100644
index 0000000..c0c722f
--- /dev/null
+++ b/src/__tests__/RunFilePulse.test.ts
@@ -0,0 +1,97 @@
+/**
+ * The green-pulse run-button state: a run-launched terminal tab (Python
+ * Run/Debug or a foreground shell run) is tagged with `TabEntry.runFile`, and
+ * while it produces sustained output the activity store lists that file in
+ * `runningRunFiles` — which drives the ▶ run button's green pulse in the file
+ * tree. Busy-gated (commanded + sustained past the onset), and dropped the
+ * moment the tab closes or goes quiet, mirroring `busyByTab`.
+ */
+import { describe, it, expect, beforeEach, vi, afterEach } from "vitest";
+import {
+  useActivityStore,
+  notePtyOutput,
+  noteUserInput,
+  _clearPtyActivityForTest,
+} from "../stores/activity";
+import { useTabsStore } from "../stores/tabs";
+
+const RUN_PATH = "/proj/run_me.py";
+
+function seedRunTab() {
+  useTabsStore.setState({
+    tabsByScope: {
+      "proj-a": [
+        {
+          key: "shell-1",
+          label: "▶ run_me.py",
+          cmd: "",
+          cwd: "/proj",
+          kind: "shell",
+          runFile: RUN_PATH,
+        },
+      ],
+    },
+    scope: "proj-a",
+    layoutByScope: {
+      "proj-a": { type: "group", id: "g-a", tabKeys: ["shell-1"], activeKey: "shell-1" },
+    },
+    detachedGroupsByScope: {},
+  });
+}
+
+// Commanded (noteUserInput) + sustained output past WORK_ONSET_MS (1500), the
+// shape the store requires before a tab counts as "working".
+function sustain(id: string, totalMs = 1600) {
+  noteUserInput(id);
+  notePtyOutput(id, "running…\n");
+  for (let elapsed = 0; elapsed < totalMs; elapsed += 400) {
+    vi.advanceTimersByTime(400);
+    notePtyOutput(id, "running…\n");
+  }
+}
+
+describe("activity store runningRunFiles (run-button pulse)", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    _clearPtyActivityForTest();
+    useActivityStore.setState({ runningRunFiles: new Set() });
+    seedRunTab();
+  });
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("lists a busy run tab's file, and clears it once output goes quiet", () => {
+    sustain("proj-a:shell-1");
+    useActivityStore.getState().recompute();
+    expect(useActivityStore.getState().runningRunFiles.has(RUN_PATH)).toBe(true);
+
+    // Output goes stale (> BUSY_WINDOW_MS = 800): the tab is no longer busy, so
+    // its file drops out of the set.
+    vi.advanceTimersByTime(1000);
+    useActivityStore.getState().recompute();
+    expect(useActivityStore.getState().runningRunFiles.has(RUN_PATH)).toBe(false);
+  });
+
+  it("drops the file when the run tab is removed mid-run", () => {
+    sustain("proj-a:shell-1");
+    useActivityStore.getState().recompute();
+    expect(useActivityStore.getState().runningRunFiles.has(RUN_PATH)).toBe(true);
+
+    useTabsStore.setState({ tabsByScope: {}, layoutByScope: {} });
+    useActivityStore.getState().recompute();
+    expect(useActivityStore.getState().runningRunFiles.has(RUN_PATH)).toBe(false);
+  });
+
+  it("never lights up a restored, uncommanded run tab (resume replay)", () => {
+    // Same sustained output, but WITHOUT noteUserInput — a restored tab replaying
+    // banner text nobody asked for. Busy-gating must keep it dark.
+    notePtyOutput("proj-a:shell-1", "restored\n");
+    for (let elapsed = 0; elapsed < 1600; elapsed += 400) {
+      vi.advanceTimersByTime(400);
+      notePtyOutput("proj-a:shell-1", "restored\n");
+    }
+    useActivityStore.getState().recompute();
+    expect(useActivityStore.getState().runningRunFiles.has(RUN_PATH)).toBe(false);
+  });
+});
diff --git a/src/__tests__/ShellScriptRun.test.ts b/src/__tests__/ShellScriptRun.test.ts
new file mode 100644
index 0000000..6ea5006
--- /dev/null
+++ b/src/__tests__/ShellScriptRun.test.ts
@@ -0,0 +1,65 @@
+import { describe, expect, it } from "vitest";
+import { shellScriptRunPlan } from "../lib/shellScriptRun";
+import type { ProjectEntry } from "../types";
+
+const remoteProject: ProjectEntry = {
+  id: "simplegnn",
+  name: "simplegnn",
+  status: "active",
+  position: 0,
+  local_file: "/state/simplegnn/project.json",
+  directory: "/state/simplegnn",
+  remote: {
+    user: "alice",
+    host: "gpu",
+    remote_path: "/home/alice/simplegnn",
+  },
+};
+
+describe("shell script run planning", () => {
+  it("runs a remote-source script relative to the host project root", () => {
+    const plan = shellScriptRunPlan({
+      project: remoteProject,
+      treeRoot: "/state/simplegnn",
+      syncSource: "remote",
+      scriptPath: "/home/alice/simplegnn/install.sh",
+      interp: "bash",
+    });
+
+    expect(plan).toMatchObject({
+      cwd: "/home/alice/simplegnn",
+      scriptRel: "install.sh",
+      initialInput: "bash 'install.sh'",
+      location: "remote",
+    });
+  });
+
+  it("runs a local-source script relative to the mirror and pins local locality", () => {
+    const plan = shellScriptRunPlan({
+      project: remoteProject,
+      treeRoot: "/state/simplegnn/mirror",
+      syncSource: "local",
+      scriptPath: "/state/simplegnn/mirror/install.sh",
+      interp: "bash",
+    });
+
+    expect(plan).toMatchObject({
+      cwd: "/state/simplegnn/mirror",
+      scriptRel: "install.sh",
+      initialInput: "bash 'install.sh'",
+      location: "local",
+    });
+  });
+
+  it("refuses to build bash with an empty script path", () => {
+    expect(
+      shellScriptRunPlan({
+        project: remoteProject,
+        treeRoot: "/state/simplegnn",
+        syncSource: "remote",
+        scriptPath: "/tmp/install.sh",
+        interp: "bash",
+      }),
+    ).toBeNull();
+  });
+});
diff --git a/src/__tests__/Slurm.test.ts b/src/__tests__/Slurm.test.ts
new file mode 100644
index 0000000..8c5043e
--- /dev/null
+++ b/src/__tests__/Slurm.test.ts
@@ -0,0 +1,121 @@
+/**
+ * The SLURM (HPC) text helpers (`lib/slurm.ts`), all pure — the directive form is
+ * a *view on the text*, exactly like the YAML/table viewers: every edit splices the
+ * script's `#SBATCH` lines rather than re-serializing, so unrelated lines, comments
+ * and the flag spelling the author used all survive. These tests pin that bargain
+ * plus the command builders for the log tail and the interactive `srun` shell.
+ */
+import { describe, it, expect } from "vitest";
+import {
+  isSlurmScript,
+  parseSbatchDirectives,
+  directiveValue,
+  spliceDirective,
+  buildInteractiveCommand,
+  buildTailCommand,
+} from "../lib/slurm";
+
+const SCRIPT = `#!/bin/bash
+#SBATCH --job-name=train
+#SBATCH --time=01:00:00
+#SBATCH -c 4
+# a normal comment
+module load python
+srun python train.py
+`;
+
+describe("isSlurmScript", () => {
+  it("is true only when a #SBATCH directive is present", () => {
+    expect(isSlurmScript(SCRIPT)).toBe(true);
+    expect(isSlurmScript("#!/bin/bash\necho hi\n")).toBe(false);
+    // A bare `#SBATCH` comment with no flag is not a directive.
+    expect(isSlurmScript("#SBATCH\n")).toBe(false);
+  });
+});
+
+describe("parseSbatchDirectives", () => {
+  it("normalizes short flags to their long key", () => {
+    const fields = parseSbatchDirectives(SCRIPT);
+    expect(directiveValue(fields, "job-name")).toBe("train");
+    expect(directiveValue(fields, "time")).toBe("01:00:00");
+    // `-c 4` folds into `cpus-per-task`.
+    expect(directiveValue(fields, "cpus-per-task")).toBe("4");
+  });
+
+  it("returns empty for an absent key", () => {
+    expect(directiveValue(parseSbatchDirectives(SCRIPT), "mem")).toBe("");
+  });
+
+  it("folds the `-A` short flag into `account`", () => {
+    const fields = parseSbatchDirectives("#!/bin/bash\n#SBATCH -A ag-foo\n");
+    expect(directiveValue(fields, "account")).toBe("ag-foo");
+  });
+});
+
+describe("spliceDirective", () => {
+  it("rewrites an existing directive in place, keeping the flag spelling", () => {
+    const next = spliceDirective(SCRIPT, "time", "02:30:00");
+    expect(next).toContain("#SBATCH --time=02:30:00");
+    expect(next).not.toContain("01:00:00");
+    // The short-flag directive keeps its short form when edited by long key.
+    const next2 = spliceDirective(SCRIPT, "cpus-per-task", "8");
+    expect(next2).toContain("#SBATCH -c 8");
+  });
+
+  it("leaves every other line byte-identical", () => {
+    const next = spliceDirective(SCRIPT, "time", "02:30:00");
+    // Only the one directive line changed; the comment, module load and srun stay.
+    expect(next).toContain("# a normal comment");
+    expect(next).toContain("module load python");
+    expect(next).toContain("srun python train.py");
+    expect(next.split("\n").length).toBe(SCRIPT.split("\n").length);
+  });
+
+  it("inserts a new directive after the last existing one", () => {
+    const next = spliceDirective(SCRIPT, "mem", "16G");
+    const lines = next.split("\n");
+    const memIdx = lines.findIndex((l) => l.includes("--mem=16G"));
+    const cIdx = lines.findIndex((l) => l.includes("-c 4"));
+    expect(memIdx).toBeGreaterThan(-1);
+    // Grouped with the other directives (right after the last one), not at the end.
+    expect(memIdx).toBe(cIdx + 1);
+  });
+
+  it("inserts after a shebang when there are no directives yet", () => {
+    const next = spliceDirective("#!/bin/bash\necho hi\n", "time", "00:10:00");
+    const lines = next.split("\n");
+    expect(lines[0]).toBe("#!/bin/bash");
+    expect(lines[1]).toBe("#SBATCH --time=00:10:00");
+  });
+
+  it("removes the directive when the value is cleared", () => {
+    const next = spliceDirective(SCRIPT, "time", "");
+    expect(next).not.toContain("--time");
+    // The others remain.
+    expect(next).toContain("--job-name=train");
+  });
+});
+
+describe("command builders", () => {
+  it("tails the log by name with retry", () => {
+    expect(buildTailCommand("/home/a/p/slurm-42.out")).toBe(
+      "tail -n +1 -F '/home/a/p/slurm-42.out'",
+    );
+  });
+
+  it("builds an srun --pty command from the set resources only", () => {
+    expect(
+      buildInteractiveCommand({ time: "01:00:00", cpus: "4", mem: "8G", gpus: "1" }),
+    ).toBe("srun --pty --time=01:00:00 --cpus-per-task=4 --mem=8G --gpus=1 bash -l");
+    // Empty fields are omitted; a bare session still lands on bash -l.
+    expect(buildInteractiveCommand({})).toBe("srun --pty bash -l");
+  });
+
+  it("emits --account first, before the other resources", () => {
+    // --account is mandatory on group-allocated clusters; an interactive srun
+    // without it is rejected.
+    expect(
+      buildInteractiveCommand({ account: "ag-foo", partition: "mlgpu", gpus: "2" }),
+    ).toBe("srun --pty --account=ag-foo --partition=mlgpu --gpus=2 bash -l");
+  });
+});
diff --git a/src/__tests__/SplitLayout.test.ts b/src/__tests__/SplitLayout.test.ts
index f50131e..80875f2 100644
--- a/src/__tests__/SplitLayout.test.ts
+++ b/src/__tests__/SplitLayout.test.ts
@@ -402,14 +402,14 @@ describe("tabs store — split layout", () => {
       useTabsStore.getState().loadFromLayout(
         [
           { key: "a1", label: "claude", cmd: "claude", cwd: "/x", kind: "agent" },
-          { key: "a2", label: "gemini", cmd: "gemini", cwd: "/x", kind: "agent", sessionId: "g" },
+          { key: "a2", label: "aider", cmd: "aider", cwd: "/x", kind: "agent", sessionId: "g" },
         ],
         "/proj",
         "p",
       );
       const tabs = useTabsStore.getState().tabs;
       expect(tabs[0].args).toEqual([]); // claude, no sessionId
-      expect(tabs[1].args).toEqual([]); // gemini not in RESUMABLE_AGENTS
+      expect(tabs[1].args).toEqual([]); // aider not in RESUMABLE_AGENTS
     });
   });
 
diff --git a/src/__tests__/SubwindowFilesSidebar.test.ts b/src/__tests__/SubwindowFilesSidebar.test.ts
new file mode 100644
index 0000000..514dd94
--- /dev/null
+++ b/src/__tests__/SubwindowFilesSidebar.test.ts
@@ -0,0 +1,205 @@
+/**
+ * Per-subwindow right file viewer (◫): the open flag + column width live on the
+ * group NODE (GroupNode.filesOpen/filesWidth), so they must (1) flip via the
+ * store actions, (2) survive serialize → prune → restore (a restart), (3) travel
+ * with a detach (pop-out), and (4) be reachable from a popout via the streamed
+ * "files" detached edit.
+ */
+import { describe, it, expect, beforeEach, vi } from "vitest";
+
+vi.mock("@tauri-apps/api/core", () => ({ invoke: vi.fn() }));
+
+import {
+  useTabsStore,
+  serializeTree,
+  pruneSavedTree,
+  findGroup,
+  allGroups,
+  type GroupNode,
+  type LayoutNode,
+} from "../stores/tabs";
+import { applyEditToSubtree } from "../stores/detached";
+import {
+  clampFilesWidth,
+  MIN_GROUP_FILES_WIDTH,
+  MAX_GROUP_FILES_WIDTH,
+} from "../components/files/SubwindowFilesSidebar";
+
+function tab(label: string) {
+  return { label, cmd: "bash", cwd: "/p", kind: "shell" as const };
+}
+
+/** Build a single-group scope holding a,b and select it. */
+function seed() {
+  useTabsStore.setState({
+    scope: "p",
+    tabsByScope: {},
+    layoutByScope: {},
+    focusedGroupByScope: {},
+    detachedGroupsByScope: {},
+    hiddenGroupsByScope: {},
+    tabs: [],
+    layout: null,
+    focusedGroupId: null,
+    activeKey: null,
+  });
+  for (const k of ["a", "b"]) useTabsStore.getState().addTab(tab(k));
+}
+
+function group(): GroupNode {
+  return useTabsStore.getState().layout as GroupNode;
+}
+
+describe("tabs store — per-subwindow file viewer (setGroupFiles/setGroupFilesWidth)", () => {
+  beforeEach(seed);
+
+  it("toggles filesOpen on the group node and mirrors it into the scope layout", () => {
+    expect(group().filesOpen).toBeUndefined();
+    useTabsStore.getState().setGroupFiles(group().id, true);
+    expect(group().filesOpen).toBe(true);
+    const stored = useTabsStore.getState().layoutByScope["p"] as GroupNode;
+    expect(stored.filesOpen).toBe(true);
+    useTabsStore.getState().setGroupFiles(group().id, false);
+    expect(group().filesOpen).toBe(false);
+  });
+
+  it("stores the column width", () => {
+    useTabsStore.getState().setGroupFilesWidth(group().id, 420);
+    expect(group().filesWidth).toBe(420);
+  });
+
+  it("stores the browsed folder and no-ops on an unchanged one", () => {
+    useTabsStore.getState().setGroupFilesFolder(group().id, "src/lib");
+    expect(group().filesFolder).toBe("src/lib");
+    // Unchanged → same layout object (no churn / debounce wake), like setTabFolder.
+    const before = useTabsStore.getState().layout;
+    useTabsStore.getState().setGroupFilesFolder(group().id, "src/lib");
+    expect(useTabsStore.getState().layout).toBe(before);
+  });
+
+  it("is a no-op for a group that isn't in the live layout", () => {
+    const before = useTabsStore.getState().layout;
+    useTabsStore.getState().setGroupFiles("nope", true);
+    expect(useTabsStore.getState().layout).toBe(before);
+  });
+});
+
+describe("per-subwindow file viewer — persistence round-trip", () => {
+  beforeEach(seed);
+
+  it("serializeTree carries filesOpen/filesWidth/filesFolder, and pruneSavedTree keeps them", () => {
+    useTabsStore.getState().setGroupFiles(group().id, true);
+    useTabsStore.getState().setGroupFilesWidth(group().id, 350);
+    useTabsStore.getState().setGroupFilesFolder(group().id, "src/lib");
+    const saved = serializeTree(useTabsStore.getState().layout)!;
+    expect(saved).toMatchObject({
+      type: "group",
+      filesOpen: true,
+      filesWidth: 350,
+      filesFolder: "src/lib",
+    });
+    const keep = new Set(group().tabKeys);
+    const pruned = pruneSavedTree(saved, keep)!;
+    expect(pruned).toMatchObject({ filesOpen: true, filesWidth: 350, filesFolder: "src/lib" });
+  });
+
+  it("a closed viewer serializes with no filesOpen/filesFolder key at all", () => {
+    const saved = serializeTree(useTabsStore.getState().layout)!;
+    expect("filesOpen" in saved).toBe(false);
+    expect("filesWidth" in saved).toBe(false);
+    expect("filesFolder" in saved).toBe(false);
+  });
+
+  it("loadFromLayout restores the flag + width + folder onto the rebuilt group", () => {
+    useTabsStore.getState().setGroupFiles(group().id, true);
+    useTabsStore.getState().setGroupFilesWidth(group().id, 350);
+    useTabsStore.getState().setGroupFilesFolder(group().id, "src/lib");
+    const savedTabs = useTabsStore.getState().tabs.map((t) => ({ ...t }));
+    const savedTree = serializeTree(useTabsStore.getState().layout);
+    useTabsStore.getState().loadFromLayout(savedTabs as never, "/p", "p", savedTree as never);
+    const restored = useTabsStore.getState().layout as GroupNode;
+    expect(restored.filesOpen).toBe(true);
+    expect(restored.filesWidth).toBe(350);
+    expect(restored.filesFolder).toBe("src/lib");
+  });
+});
+
+describe("per-subwindow file viewer — detach + popout edits", () => {
+  beforeEach(seed);
+
+  it("detachGroup carries the flag into the detached record", () => {
+    // A second group so the detach isn't refused (can't detach the lone group).
+    const gid = group().id;
+    useTabsStore.getState().setGroupFiles(gid, true);
+    const b = useTabsStore.getState().tabs[1];
+    useTabsStore.getState().splitWithTab(b.key, gid, "right");
+    expect(allGroups(useTabsStore.getState().layout).length).toBe(2);
+    const label = useTabsStore.getState().detachGroup(gid, { skipBackend: true });
+    expect(label).toBeTruthy();
+    const rec = useTabsStore.getState().detachedGroupsByScope["p"][0];
+    expect(findGroup(rec.subtree, gid)?.filesOpen).toBe(true);
+  });
+
+  it('applyEditToSubtree("files") flips the flag / sets the width on the target group', () => {
+    const sub: LayoutNode = {
+      type: "group",
+      id: "g1",
+      tabKeys: ["t1"],
+      activeKey: "t1",
+    };
+    const opened = applyEditToSubtree(sub, { kind: "files", groupId: "g1", open: true })!;
+    expect((opened as GroupNode).filesOpen).toBe(true);
+    const resized = applyEditToSubtree(opened, { kind: "files", groupId: "g1", width: 400 })!;
+    expect((resized as GroupNode).filesWidth).toBe(400);
+    // The open flag survives a width-only edit.
+    expect((resized as GroupNode).filesOpen).toBe(true);
+    const browsed = applyEditToSubtree(resized, {
+      kind: "files",
+      groupId: "g1",
+      folder: "docs",
+    })!;
+    expect((browsed as GroupNode).filesFolder).toBe("docs");
+    // The open flag + width survive a folder-only edit.
+    expect((browsed as GroupNode).filesOpen).toBe(true);
+    expect((browsed as GroupNode).filesWidth).toBe(400);
+    // An edit for an unknown group leaves the subtree unchanged.
+    const noop = applyEditToSubtree(resized, { kind: "files", groupId: "gX", open: false })!;
+    expect((noop as GroupNode).filesOpen).toBe(true);
+  });
+
+  it('applyDetachedEdit("files") updates the main-side detached record', () => {
+    useTabsStore.setState({
+      detachedGroupsByScope: {
+        p: [
+          {
+            id: "d1",
+            label: "detached-p-d1",
+            subtree: { type: "group", id: "gd", tabKeys: ["x"], activeKey: "x" },
+          },
+        ],
+      },
+    });
+    useTabsStore
+      .getState()
+      .applyDetachedEdit("p", "d1", {
+        kind: "files",
+        groupId: "gd",
+        open: true,
+        width: 280,
+        folder: "src",
+      });
+    const rec = useTabsStore.getState().detachedGroupsByScope["p"][0];
+    const g = findGroup(rec.subtree, "gd")!;
+    expect(g.filesOpen).toBe(true);
+    expect(g.filesWidth).toBe(280);
+    expect(g.filesFolder).toBe("src");
+  });
+});
+
+describe("clampFilesWidth", () => {
+  it("clamps into the sidebar's min/max range", () => {
+    expect(clampFilesWidth(10)).toBe(MIN_GROUP_FILES_WIDTH);
+    expect(clampFilesWidth(10_000)).toBe(MAX_GROUP_FILES_WIDTH);
+    expect(clampFilesWidth(333.4)).toBe(333);
+  });
+});
diff --git a/src/__tests__/TabPersistClearGuard.test.ts b/src/__tests__/TabPersistClearGuard.test.ts
new file mode 100644
index 0000000..e67f70e
--- /dev/null
+++ b/src/__tests__/TabPersistClearGuard.test.ts
@@ -0,0 +1,118 @@
+/**
+ * An empty layout must not be able to erase a saved one.
+ *
+ * Saving empty is destructive on the backend: it drops `tab_layout` + `tab_groups`
+ * from project.json AND overwrites the `.eldrun` session mirror, both from the same
+ * array in the same call — so the mirror is no backup, and a resumable agent tab's
+ * `sessionId` (the only handle on its conversation) goes with them.
+ *
+ * The live bug (SimpleGNN, four tabs incl. three Claude conversations): the debounced
+ * autosave persisted the tab store's CURRENT scope into the ACTIVE project's
+ * `local_file`, two independently tracked values. Detach swaps `local_file` (remote
+ * state dir → promoted mirror) under a store whose scope hasn't caught up; the
+ * per-scope filter then correctly refuses to write the other scope's tabs into that
+ * file, and what reaches the backend is `[]` — indistinguishable from a deliberate
+ * close-all, and fatal.
+ *
+ * So the frontend must now VOUCH for an empty save (`allowClear`), and it can only do
+ * that for a scope it actually hydrated which genuinely holds no tabs. These tests
+ * lock that down; `save_empty_tabs_preserves_layout_when_clearing_is_not_allowed`
+ * (services_tests.rs) locks down the backend honouring it.
+ */
+import { describe, it, expect, beforeEach, vi } from "vitest";
+
+import { invoke } from "@tauri-apps/api/core";
+
+vi.mock("@tauri-apps/api/core", () => ({ invoke: vi.fn(() => Promise.resolve()) }));
+
+import { useTabsStore, type TabEntry } from "../stores/tabs";
+
+const invokeMock = vi.mocked(invoke);
+const LOCAL_FILE = "/p/project.json";
+
+function agentTab(over: Partial<TabEntry> = {}): TabEntry {
+  return {
+    key: "agent-2",
+    label: "Claude",
+    cmd: "claude",
+    args: [],
+    env: {},
+    cwd: "/p",
+    kind: "agent",
+    scope: "pid",
+    sessionId: "6252990e-a459-46c6-8c43-f1d2f68dc4b3",
+    ...over,
+  } as TabEntry;
+}
+
+/** Seed the store, optionally leaving the scope entirely UN-hydrated. */
+function seed(tabs: TabEntry[] | undefined) {
+  useTabsStore.setState({
+    scope: "pid",
+    tabsByScope: tabs === undefined ? {} : { pid: tabs },
+    layoutByScope: { pid: null },
+    focusedGroupByScope: { pid: null },
+    detachedGroupsByScope: {},
+    tabs: tabs ?? [],
+    layout: null,
+    focusedGroupId: null,
+    activeKey: null,
+  });
+}
+
+/** The `allowClear` flag on the save_tab_layout invoke, plus the tabs it sent. */
+function lastSave() {
+  const call = invokeMock.mock.calls.find((c) => c[0] === "save_tab_layout");
+  if (!call) return null;
+  const arg = call[1] as { tabs: unknown[]; allowClear: boolean };
+  return { tabs: arg.tabs, allowClear: arg.allowClear };
+}
+
+beforeEach(() => {
+  invokeMock.mockClear();
+});
+
+describe("persistScope — an empty layout only clears when it is meant", () => {
+  it("vouches for the empty save when a hydrated scope genuinely holds no tabs", async () => {
+    // The user closed the last tab. This is a real close-all and must persist.
+    seed([]);
+    await useTabsStore.getState().persistScope("pid", LOCAL_FILE);
+
+    expect(lastSave()).toEqual({ tabs: [], allowClear: true });
+  });
+
+  it("refuses to vouch for a scope it never hydrated", async () => {
+    // Nothing was ever restored for `pid` — its emptiness is ignorance, not intent.
+    // (A project whose restore finds no restorable tabs never creates the scope key.)
+    seed(undefined);
+    await useTabsStore.getState().persistScope("pid", LOCAL_FILE);
+
+    expect(lastSave()).toEqual({ tabs: [], allowClear: false });
+  });
+
+  it("refuses to vouch when the scope holds tabs that all get filtered out", async () => {
+    // THE SimpleGNN CASE. The scope holds tabs, but every one of them belongs to a
+    // different scope — the pairing drifted — so the keep-filter drops them all and
+    // the persisted layout comes out empty. It looks exactly like a close-all. It is
+    // not one, and it must never erase the three Claude conversations on disk.
+    seed([agentTab({ scope: "a-different-project" })]);
+    await useTabsStore.getState().persistScope("pid", LOCAL_FILE);
+
+    const save = lastSave();
+    expect(save?.tabs).toEqual([]);
+    expect(save?.allowClear).toBe(false);
+  });
+
+  it("still persists a real layout, and carries the agent's sessionId", async () => {
+    seed([agentTab()]);
+    await useTabsStore.getState().persistScope("pid", LOCAL_FILE);
+
+    const save = lastSave();
+    expect(save?.tabs).toHaveLength(1);
+    expect((save?.tabs[0] as { sessionId?: string }).sessionId).toBe(
+      "6252990e-a459-46c6-8c43-f1d2f68dc4b3",
+    );
+    // Non-empty saves are unaffected by the guard either way.
+    expect(save?.allowClear).toBe(false);
+  });
+});
diff --git a/src/__tests__/TabPersistFilter.test.ts b/src/__tests__/TabPersistFilter.test.ts
index 8e17b13..377aeff 100644
--- a/src/__tests__/TabPersistFilter.test.ts
+++ b/src/__tests__/TabPersistFilter.test.ts
@@ -1,8 +1,9 @@
 /**
  * Save-side tab persistence filtering. Shell/files tabs always survive a
- * restart. Resumable agent tabs (Claude or Codex with a sessionId) now survive
- * too and carry their sessionId; an agent tab without a sessionId, or a
- * not-yet-wired agent (Gemini/Vibe), is still dropped. These tests lock in
+ * restart. Resumable agent tabs (Claude, Codex, Gemini, Mistral/vibe and the
+ * other continue-last agents, each with a sessionId) now survive too and carry
+ * their sessionId; an agent tab without a sessionId, or an agent with no wired
+ * resume (Aider), is still dropped. These tests lock in
  * saveLayout's keep-filter and the shared pruneSavedTree / isRestorableKind /
  * isResumableAgentTab / isRestorableTab helpers.
  */
@@ -34,8 +35,8 @@ describe("isRestorableKind", () => {
 });
 
 describe("isResumableAgentTab / isRestorableTab", () => {
-  it("treats a Claude or Codex agent tab with a sessionId as resumable", () => {
-    for (const cmd of ["claude", "codex"]) {
+  it("treats a resumable agent tab (Claude, Codex, Gemini, vibe) with a sessionId as resumable", () => {
+    for (const cmd of ["claude", "codex", "gemini", "vibe"]) {
       const tab = { kind: "agent" as const, cmd, sessionId: "abc-123" };
       expect(isResumableAgentTab(tab)).toBe(true);
       expect(isRestorableTab(tab)).toBe(true);
@@ -43,21 +44,38 @@ describe("isResumableAgentTab / isRestorableTab", () => {
   });
 
   it("drops a resumable-agent tab without a sessionId", () => {
-    for (const cmd of ["claude", "codex"]) {
+    for (const cmd of ["claude", "codex", "gemini", "vibe"]) {
       const tab = { kind: "agent" as const, cmd };
       expect(isResumableAgentTab(tab)).toBe(false);
       expect(isRestorableTab(tab)).toBe(false);
     }
   });
 
-  it("drops a not-yet-wired agent even with a sessionId", () => {
-    for (const cmd of ["gemini", "vibe"]) {
+  it("drops an agent with no wired resume even with a sessionId", () => {
+    for (const cmd of ["aider"]) {
       const tab = { kind: "agent" as const, cmd, sessionId: "abc-123" };
       expect(isResumableAgentTab(tab)).toBe(false);
       expect(isRestorableTab(tab)).toBe(false);
     }
   });
 
+  it("treats a custom agent with resumeArgs + a sessionId as resumable", () => {
+    const tab = {
+      kind: "agent" as const,
+      cmd: "my-agent",
+      sessionId: "abc-123",
+      resumeArgs: ["--continue"],
+    };
+    expect(isResumableAgentTab(tab)).toBe(true);
+    expect(isRestorableTab(tab)).toBe(true);
+  });
+
+  it("drops a launch-only custom agent (unknown cmd, no resumeArgs)", () => {
+    const tab = { kind: "agent" as const, cmd: "my-agent", sessionId: "abc-123" };
+    expect(isResumableAgentTab(tab)).toBe(false);
+    expect(isRestorableTab(tab)).toBe(false);
+  });
+
   it("keeps shell/files tabs via kind regardless of sessionId", () => {
     expect(isRestorableTab({ kind: "shell", cmd: "bash" })).toBe(true);
     expect(isRestorableTab({ kind: "files", cmd: "__eldrun_files__" })).toBe(true);
@@ -163,7 +181,7 @@ describe("saveLayout — persists restorable tabs (incl. resumable agents)", ()
     expect(codex?.sessionId).toBe("codex-key-1");
   });
 
-  it("drops a not-yet-wired agent even with a sessionId", async () => {
+  it("persists a continue-last agent (gemini) with its sessionId", async () => {
     const store = useTabsStore.getState();
     store.setScope("p");
     store.addTab({
@@ -177,6 +195,28 @@ describe("saveLayout — persists restorable tabs (incl. resumable agents)", ()
 
     await useTabsStore.getState().saveLayout("/p/project.json");
 
+    const call = invokeMock.mock.calls.find((c) => c[0] === "save_tab_layout");
+    const arg = call![1] as {
+      tabs: { kind: string; cmd: string; sessionId?: string }[];
+    };
+    const gemini = arg.tabs.find((t) => t.cmd === "gemini");
+    expect(gemini?.sessionId).toBe("abc-123");
+  });
+
+  it("drops an agent with no wired resume (aider) even with a sessionId", async () => {
+    const store = useTabsStore.getState();
+    store.setScope("p");
+    store.addTab({
+      label: "aider",
+      cmd: "aider",
+      cwd: "/p",
+      kind: "agent",
+      sessionId: "abc-123",
+    });
+    store.addTab({ label: "bash", cmd: "bash", cwd: "/p", kind: "shell" });
+
+    await useTabsStore.getState().saveLayout("/p/project.json");
+
     const call = invokeMock.mock.calls.find((c) => c[0] === "save_tab_layout");
     const arg = call![1] as { tabs: { kind: string }[]; groups: SavedLayoutTree | null };
     expect(arg.tabs.map((t) => t.kind)).toEqual(["shell"]);
diff --git a/src/__tests__/TerminalAttachOnly.test.tsx b/src/__tests__/TerminalAttachOnly.test.tsx
index c6c5e9e..b446f36 100644
--- a/src/__tests__/TerminalAttachOnly.test.tsx
+++ b/src/__tests__/TerminalAttachOnly.test.tsx
@@ -40,12 +40,14 @@ vi.mock("@xterm/xterm", () => ({
     onResize() {}
     onBell() {}
     onTitleChange() {}
+    onSelectionChange() {}
     buffer = { active: { length: 0, getLine: () => null } };
     attachCustomKeyEventHandler() {}
     getSelection() { return ""; }
     focus() {}
     dispose() {}
     options = {};
+    parser = { registerOscHandler: () => ({ dispose() {} }) };
   },
 }));
 vi.mock("@xterm/addon-fit", () => ({
diff --git a/src/__tests__/TerminalControl.test.ts b/src/__tests__/TerminalControl.test.ts
new file mode 100644
index 0000000..254c029
--- /dev/null
+++ b/src/__tests__/TerminalControl.test.ts
@@ -0,0 +1,36 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import {
+  claimInitialInput,
+  clearClaimedInitialInputsForTest,
+  initialInputForPty,
+  isTerminalIdentityResponse,
+} from "../lib/terminalControl";
+
+describe("terminal control helpers", () => {
+  beforeEach(() => {
+    clearClaimedInitialInputsForTest();
+  });
+
+  it("detects xterm identity replies that must not become shell input", () => {
+    expect(isTerminalIdentityResponse("\x1b[>0;276;0c")).toBe(true);
+    expect(isTerminalIdentityResponse("\x1b[?1;2c")).toBe(true);
+    expect(isTerminalIdentityResponse("\x1b[>0;276;0c\x1b[?1;2c")).toBe(true);
+  });
+
+  it("does not classify ordinary command text as a terminal identity reply", () => {
+    expect(isTerminalIdentityResponse("PATH=/usr/bin:$PATH bash 'install.sh'")).toBe(false);
+    expect(isTerminalIdentityResponse("0;276;0cPATH=/usr/bin:$PATH bash 'install.sh'")).toBe(false);
+  });
+
+  it("clears shell readline before auto-typing commands", () => {
+    expect(initialInputForPty("bash 'install.sh'", "shell")).toBe("\x15bash 'install.sh'");
+    expect(initialInputForPty("/hooks", "agent")).toBe("/hooks");
+  });
+
+  it("claims a given initial input only once per PTY id", () => {
+    expect(claimInitialInput("p:shell-1", "bash 'install.sh'")).toBe(true);
+    expect(claimInitialInput("p:shell-1", "bash 'install.sh'")).toBe(false);
+    expect(claimInitialInput("p:shell-2", "bash 'install.sh'")).toBe(true);
+    expect(claimInitialInput("p:shell-1", "bash 'other.sh'")).toBe(true);
+  });
+});
diff --git a/src/__tests__/TmuxSessions.test.ts b/src/__tests__/TmuxSessions.test.ts
new file mode 100644
index 0000000..1bb463e
--- /dev/null
+++ b/src/__tests__/TmuxSessions.test.ts
@@ -0,0 +1,144 @@
+/**
+ * Persistent remote sessions (TODO #85) — the frontend half.
+ *
+ * Covers the pure decision/derivation helpers (session-name derivation MUST
+ * mirror the backend `ssh_exec::tmux_session_name`; the default-ON gate; the
+ * shell-only/remote-only persistence rule) and the restore round-trip that proves
+ * a Sessions-view **attach** tab reattaches to the same named session after a
+ * restart (its `tmuxAttach` survives save→load).
+ */
+import { describe, it, expect, beforeEach, vi } from "vitest";
+
+vi.mock("@tauri-apps/api/core", () => ({ invoke: vi.fn(() => Promise.resolve()) }));
+
+import {
+  newTmuxSessionName,
+  persistSessionsEnabled,
+  shouldPersistTab,
+  shouldPersistLocalTab,
+} from "../lib/tmuxSession";
+import { useTabsStore } from "../stores/tabs";
+import type { RemoteSpec } from "../types";
+
+const remote = (over: Partial<RemoteSpec> = {}): RemoteSpec => ({
+  host: "gpu.example",
+  remote_path: "/home/me/proj",
+  ...over,
+});
+
+describe("newTmuxSessionName", () => {
+  it("mints a tmux-safe (uuid-based) name — no `:`/`.` that tmux treats specially", () => {
+    const name = newTmuxSessionName();
+    expect(name.startsWith("eldrun-")).toBe(true);
+    expect(name).not.toMatch(/[:.\s]/);
+    // Distinct per call, so each shell tab owns its own host session.
+    expect(newTmuxSessionName()).not.toBe(name);
+  });
+});
+
+describe("persistSessionsEnabled — default ON", () => {
+  it("is on for a remote project unless explicitly opted out", () => {
+    expect(persistSessionsEnabled(remote())).toBe(true); // undefined ⇒ on
+    expect(persistSessionsEnabled(remote({ persist_sessions: true }))).toBe(true);
+    expect(persistSessionsEnabled(remote({ persist_sessions: false }))).toBe(false);
+    // No remote project ⇒ nothing to persist.
+    expect(persistSessionsEnabled(undefined)).toBe(false);
+    expect(persistSessionsEnabled(null)).toBe(false);
+  });
+});
+
+describe("shouldPersistTab — shell + remote host + enabled", () => {
+  it("persists a remote shell tab, but never an agent, a local tab, or an opted-out project", () => {
+    expect(shouldPersistTab("shell", "primary", remote())).toBe(true);
+    expect(shouldPersistTab("shell", "h1", remote())).toBe(true); // a worker host too
+    // Agent tabs resume via their own session — excluded.
+    expect(shouldPersistTab("agent", "primary", remote())).toBe(false);
+    expect(shouldPersistTab("local_agent", "primary", remote())).toBe(false);
+    // A local-running tab (hostId null) has no host session.
+    expect(shouldPersistTab("shell", null, remote())).toBe(false);
+    // Opted out.
+    expect(shouldPersistTab("shell", "primary", remote({ persist_sessions: false }))).toBe(false);
+  });
+});
+
+describe("shouldPersistLocalTab — local shell tabs on Unix", () => {
+  it("persists a local project shell tab (non-root) when enabled; excludes agents/root/disabled", () => {
+    expect(shouldPersistLocalTab("shell", "p1", true, true)).toBe(true);
+    // A remote project's local (mirror) tab counts too (localRunning=true).
+    expect(shouldPersistLocalTab("shell", "p1", true, true)).toBe(true);
+    // Agents never persist locally either.
+    expect(shouldPersistLocalTab("agent", "p1", true, true)).toBe(false);
+    // The root control terminal is excluded.
+    expect(shouldPersistLocalTab("shell", "root", true, true)).toBe(false);
+    // A tab actually running on a remote host is not a local session.
+    expect(shouldPersistLocalTab("shell", "p1", false, true)).toBe(false);
+    // Disabled (setting off, or Windows folded into localEnabled) → off.
+    expect(shouldPersistLocalTab("shell", "p1", true, false)).toBe(false);
+  });
+});
+
+describe("attach tab restore", () => {
+  beforeEach(() => {
+    useTabsStore.setState({
+      tabsByScope: {},
+      layoutByScope: {},
+      focusedGroupByScope: {},
+      scope: "p",
+    } as never);
+  });
+
+  it("preserves tmuxAttach onto the rebuilt shell tab so it reattaches to the same session", () => {
+    useTabsStore.getState().loadFromLayout(
+      [
+        {
+          key: "shell-7",
+          label: "train",
+          cmd: "",
+          cwd: "/p",
+          kind: "shell",
+          location: "remote",
+          tmuxAttach: "train",
+        },
+      ],
+      "/p",
+      "p",
+    );
+    const tabs = useTabsStore.getState().tabsByScope["p"];
+    expect(tabs).toHaveLength(1);
+    expect(tabs[0].tmuxAttach).toBe("train");
+    expect(tabs[0].kind).toBe("shell");
+  });
+
+  it("keeps the SAME tmuxSession across a restart even though the key is regenerated (reattach, not fork)", () => {
+    useTabsStore.getState().loadFromLayout(
+      [
+        {
+          key: "shell-3", // saved key — regenerated on restore
+          label: "run",
+          cmd: "",
+          cwd: "/p",
+          kind: "shell",
+          location: "remote",
+          tmuxSession: "eldrun-fixed-uuid",
+        },
+      ],
+      "/p",
+      "p",
+    );
+    const tab = useTabsStore.getState().tabsByScope["p"][0];
+    // The key changed (fresh mint) but the session name is stable → the tab
+    // reattaches to the SAME host session rather than spawning a second one.
+    expect(tab.key).not.toBe("shell-3");
+    expect(tab.tmuxSession).toBe("eldrun-fixed-uuid");
+  });
+
+  it("mints a stable tmuxSession for a shell tab persisted before the feature existed", () => {
+    useTabsStore.getState().loadFromLayout(
+      [{ key: "shell-1", label: "sh", cmd: "", cwd: "/p", kind: "shell" }],
+      "/p",
+      "p",
+    );
+    const tab = useTabsStore.getState().tabsByScope["p"][0];
+    expect(tab.tmuxSession).toMatch(/^eldrun-/);
+  });
+});
diff --git a/src/__tests__/VpnAlreadyUpSections.test.tsx b/src/__tests__/VpnAlreadyUpSections.test.tsx
new file mode 100644
index 0000000..81204aa
--- /dev/null
+++ b/src/__tests__/VpnAlreadyUpSections.test.tsx
@@ -0,0 +1,140 @@
+/**
+ * One rule for every remote menu that can start a tunnel: **if a tunnel is already
+ * up machine-wide, don't offer another one.**
+ *
+ * A tunnel reroutes the whole computer, so it is not the project's to own twice. The
+ * Connect modal already collapsed its OpenVPN block to a one-line notice in that
+ * state; the section the new-project and extend-to-remote dialogs share still asked
+ * "Connect via OpenVPN" — for routing that was already in place. Both now go through
+ * `useVpnSectionVisible` / `VpnTunnelUpNotice`, and this pins that they agree.
+ *
+ * The exception the gate must preserve: a tunnel *this* dialog brought up keeps its
+ * controls (handshake log, Stop/Disconnect) where the user started it.
+ */
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+
+import { invoke } from "@tauri-apps/api/core";
+
+vi.mock("@tauri-apps/api/core", () => ({ invoke: vi.fn(() => Promise.resolve()) }));
+vi.mock("@tauri-apps/api/event", () => ({ listen: vi.fn(() => Promise.resolve(() => {})) }));
+vi.mock("@tauri-apps/plugin-dialog", () => ({ open: vi.fn() }));
+// Neither dialog mounts a terminal on the headless path, but the import drags xterm
+// into jsdom — stub it.
+vi.mock("../components/terminal/TerminalView", () => ({ TerminalView: () => null }));
+
+import { ExtendToRemoteDialog } from "../components/projects/ExtendToRemoteDialog";
+import { RemoteConnectDialog } from "../components/projects/RemoteConnectDialog";
+import { useProjectsStore } from "../stores/projects";
+import { useConnectDialogStore } from "../stores/connectDialog";
+import { useRemoteStatusStore } from "../stores/remoteStatus";
+import { useSettingsStore } from "../stores/settings";
+import { useVpnStatusStore } from "../stores/vpnStatus";
+import type { ProjectEntry } from "../types";
+
+const invokeMock = vi.mocked(invoke);
+
+/** The tunnel someone else (the header, another project, connect-on-launch) put up. */
+const OTHER_CONFIG = "/store/office.ovpn";
+
+const LOCAL_PROJECT = {
+  id: "p1",
+  name: "sshtest",
+  directory: "/home/u/eldrun/projects/sshtest",
+  position: 0,
+  status: "active",
+} as unknown as ProjectEntry;
+
+const REMOTE_PROJECT = {
+  ...LOCAL_PROJECT,
+  remote: { user: "alice", host: "host.example", remote_path: "/srv/work" },
+} as unknown as ProjectEntry;
+
+const vpnToggle = () => screen.queryByRole("checkbox", { name: /connect via openvpn/i });
+const upNotice = () => screen.queryByText(/openvpn tunnel already up/i);
+
+beforeEach(() => {
+  invokeMock.mockReset();
+  invokeMock.mockImplementation((cmd: string) => {
+    if (cmd === "remote_has_saved_password" || cmd === "vpn_has_saved_password") {
+      return Promise.resolve(false);
+    }
+    if (cmd === "openvpn_list_configs") return Promise.resolve([]);
+    if (cmd === "ssh_list_addresses" || cmd === "remote_list_paths") return Promise.resolve([]);
+    if (cmd === "ssh_tooling_status") {
+      return Promise.resolve({ password_auth: true, openvpn: true });
+    }
+    if (cmd === "openvpn_auth_needs") {
+      return Promise.resolve({ username: false, keyPassphrase: false });
+    }
+    return Promise.resolve();
+  });
+
+  useSettingsStore.setState({ settings: { connections_headless: true } as never });
+  useProjectsStore.setState({ projects: [REMOTE_PROJECT] } as never);
+  useConnectDialogStore.setState({ projectId: REMOTE_PROJECT.id } as never);
+  useRemoteStatusStore.setState({ byProject: {} } as never);
+  useVpnStatusStore.setState({ byConfig: {}, holders: {} });
+});
+
+describe("extend-to-remote: the OpenVPN block yields to a live tunnel", () => {
+  it("offers the tunnel when none is up", async () => {
+    render(<ExtendToRemoteDialog project={LOCAL_PROJECT} onClose={() => {}} />);
+
+    expect(await screen.findByRole("checkbox", { name: /connect via openvpn/i })).toBeTruthy();
+    expect(upNotice()).toBeNull();
+  });
+
+  it("collapses to the already-up notice when a tunnel is live machine-wide", async () => {
+    useVpnStatusStore.setState({ byConfig: { [OTHER_CONFIG]: "connected" }, holders: {} });
+
+    render(<ExtendToRemoteDialog project={LOCAL_PROJECT} onClose={() => {}} />);
+
+    // The SSH step still renders — it is only the redundant VPN offer that goes.
+    expect(await screen.findByPlaceholderText(/user@host/i)).toBeTruthy();
+    expect(upNotice()).toBeTruthy();
+    expect(vpnToggle()).toBeNull();
+  });
+
+  it("still collapses while a tunnel is only coming up", async () => {
+    useVpnStatusStore.setState({ byConfig: { [OTHER_CONFIG]: "connecting" }, holders: {} });
+
+    render(<ExtendToRemoteDialog project={LOCAL_PROJECT} onClose={() => {}} />);
+
+    expect(await screen.findByText(/openvpn tunnel already up/i)).toBeTruthy();
+    expect(vpnToggle()).toBeNull();
+  });
+});
+
+describe("the Connect modal answers the same question the same way", () => {
+  it("collapses when another config's tunnel is up", async () => {
+    useVpnStatusStore.setState({ byConfig: { [OTHER_CONFIG]: "connected" }, holders: {} });
+
+    render(<RemoteConnectDialog />);
+
+    expect(await screen.findByText(/openvpn tunnel already up/i)).toBeTruthy();
+    expect(vpnToggle()).toBeNull();
+  });
+
+  it("keeps the section when the live tunnel is this project's own", async () => {
+    // Its log and its Disconnect live here — hiding them would strand the tunnel the
+    // user started from this very dialog.
+    useProjectsStore.setState({
+      projects: [
+        {
+          ...REMOTE_PROJECT,
+          remote: { ...REMOTE_PROJECT.remote, openvpn: { config: OTHER_CONFIG } },
+        },
+      ],
+    } as never);
+    useRemoteStatusStore.setState({
+      byProject: { p1: { ssh: "off", vpn: "connected" } },
+    } as never);
+    useVpnStatusStore.setState({ byConfig: { [OTHER_CONFIG]: "connected" }, holders: { [OTHER_CONFIG]: ["p1"] } });
+
+    render(<RemoteConnectDialog />);
+
+    expect(await screen.findByRole("button", { name: /disconnect vpn/i })).toBeTruthy();
+    expect(upNotice()).toBeNull();
+  });
+});
diff --git a/src/__tests__/VpnMachineScope.test.tsx b/src/__tests__/VpnMachineScope.test.tsx
index 97500f6..61d953e 100644
--- a/src/__tests__/VpnMachineScope.test.tsx
+++ b/src/__tests__/VpnMachineScope.test.tsx
@@ -30,6 +30,7 @@ import { useProjectsStore, logoutRemote } from "../stores/projects";
 import { useRemoteStatusStore } from "../stores/remoteStatus";
 import { markVpnConnected, useVpnStatusStore } from "../stores/vpnStatus";
 import { useVpnPromptStore } from "../stores/vpnPrompt";
+import { useSettingsStore } from "../stores/settings";
 import type { ProjectEntry } from "../types";
 
 const invokeMock = vi.mocked(invoke);
@@ -274,10 +275,10 @@ describe("the header can bring a tunnel up, with no project behind it", () => {
   });
 
   /**
-   * The store is add-only and a VPN need not belong to a project, so switching to a
-   * different `.ovpn` can't require opening some project's Connect dialog. Even with
-   * configs already listed, a "Browse for a config…" action adds/switches through the
-   * same browse→store→connect path.
+   * A VPN need not belong to a project, so switching to a different `.ovpn` can't
+   * require opening some project's Connect dialog. Even with configs already listed,
+   * a "Browse for a config…" action adds/switches through the same
+   * browse→store→connect path.
    */
   it("with configs stored, Browse adds a different .ovpn and connects it", async () => {
     const OTHER_STORED = "/store/other.ovpn";
@@ -318,3 +319,96 @@ describe("the header can bring a tunnel up, with no project behind it", () => {
     expect(screen.getByRole("button", { name: /openvpn/i })).toBeTruthy();
   });
 });
+
+describe("a stored config can be removed, not only connected", () => {
+  // Removal takes the saved credentials with it (they are keyed by the config
+  // path and would otherwise be a stale half in the keychain), and *those* can't
+  // be brought back by re-browsing the file — so it is a two-click action.
+  const STORED = [{ path: CONFIG, name: "office.ovpn" }];
+
+  const removals = () =>
+    invokeMock.mock.calls.filter(([name]) => name === "openvpn_remove_config");
+
+  const withStored = () =>
+    invokeMock.mockImplementation((cmd: string) => {
+      if (cmd === "openvpn_active") return Promise.resolve([]);
+      if (cmd === "openvpn_list_configs") return Promise.resolve(STORED);
+      return Promise.resolve();
+    });
+
+  it("asks once more, then removes the config and its row", async () => {
+    withStored();
+    render(<VpnIndicator />);
+
+    await userEvent.hover(screen.getByRole("button", { name: /openvpn/i }));
+    await userEvent.click(await screen.findByRole("button", { name: /^remove$/i }));
+
+    // Armed, not done: nothing has been removed yet.
+    expect(removals()).toHaveLength(0);
+    expect(screen.getByText(/forgets its saved credentials/i)).toBeTruthy();
+
+    await userEvent.click(screen.getByRole("button", { name: /^remove config$/i }));
+    await waitFor(() =>
+      expect(removals()).toEqual([["openvpn_remove_config", { config: CONFIG }]]),
+    );
+    // The row is gone without a re-list round-trip.
+    await waitFor(() => expect(screen.queryByText("office.ovpn")).toBeNull());
+  });
+
+  it("Keep cancels the armed removal", async () => {
+    withStored();
+    render(<VpnIndicator />);
+
+    await userEvent.hover(screen.getByRole("button", { name: /openvpn/i }));
+    await userEvent.click(await screen.findByRole("button", { name: /^remove$/i }));
+    await userEvent.click(screen.getByRole("button", { name: /^keep$/i }));
+
+    expect(removals()).toHaveLength(0);
+    expect(screen.getByText("office.ovpn")).toBeTruthy();
+    expect(screen.getByRole("button", { name: /^connect$/i })).toBeTruthy();
+  });
+
+  it("names the projects that use the config before removing it", async () => {
+    // Both fixture projects ride CONFIG — the warning must say so, since their
+    // next connect will have to ask for a config again.
+    withStored();
+    render(<VpnIndicator />);
+
+    await userEvent.hover(screen.getByRole("button", { name: /openvpn/i }));
+    await userEvent.click(await screen.findByRole("button", { name: /^remove$/i }));
+    expect(screen.getByText(/alpha, beta/)).toBeTruthy();
+  });
+
+  it("disarms connect-on-launch when the armed config is removed", async () => {
+    // An armed path with no file behind it would silently fail at every startup.
+    withStored();
+    useSettingsStore.setState({ settings: { vpn_auto_connect: CONFIG } as never });
+    render(<VpnIndicator />);
+
+    await userEvent.hover(screen.getByRole("button", { name: /openvpn/i }));
+    await userEvent.click(await screen.findByRole("button", { name: /^remove$/i }));
+    await userEvent.click(screen.getByRole("button", { name: /^remove config$/i }));
+
+    await waitFor(() =>
+      expect(useSettingsStore.getState().settings?.vpn_auto_connect).toBeNull(),
+    );
+  });
+
+  it("a refused removal keeps the row and shows the reason", async () => {
+    invokeMock.mockImplementation((cmd: string) => {
+      if (cmd === "openvpn_active") return Promise.resolve([]);
+      if (cmd === "openvpn_list_configs") return Promise.resolve(STORED);
+      if (cmd === "openvpn_remove_config")
+        return Promise.reject(new Error("this tunnel is up — disconnect it first"));
+      return Promise.resolve();
+    });
+    render(<VpnIndicator />);
+
+    await userEvent.hover(screen.getByRole("button", { name: /openvpn/i }));
+    await userEvent.click(await screen.findByRole("button", { name: /^remove$/i }));
+    await userEvent.click(screen.getByRole("button", { name: /^remove config$/i }));
+
+    await waitFor(() => expect(screen.getByText(/disconnect it first/i)).toBeTruthy());
+    expect(screen.getByText("office.ovpn")).toBeTruthy();
+  });
+});
diff --git a/src/__tests__/YamlGrid.test.ts b/src/__tests__/YamlGrid.test.ts
new file mode 100644
index 0000000..c0876f1
--- /dev/null
+++ b/src/__tests__/YamlGrid.test.ts
@@ -0,0 +1,186 @@
+/**
+ * The YAML grid model (#yaml-grid) — the pure detection + layout that turns a
+ * collection of like-shaped records into rows × columns.
+ *
+ * The load-bearing properties pinned here: a grid is only offered for genuinely
+ * tabular data (a flat config map is not a grid); columns are the union of the
+ * records' keys; a missing key is an editable empty cell, not a hidden one; and —
+ * because the grid is a view on the text like the tree — every edit it delegates
+ * to `lib/viewers/yaml` leaves the file's comments and untouched bytes intact.
+ */
+import { describe, it, expect } from "vitest";
+import { parseYaml, setValue, addChild, deleteNode, literalFor } from "../lib/viewers/yaml";
+import {
+  parseGridDoc,
+  gridModelFor,
+  gridCandidates,
+  hasGrid,
+  hasCards,
+  isContainer,
+  cellKind,
+  nestedLabel,
+} from "../lib/viewers/yamlGrid";
+
+const LIST_OF_MAPS = `# services
+- name: web
+  port: 8080
+  enabled: true
+- name: db
+  port: 5432
+- name: cache
+  port: 6379
+  enabled: false
+`;
+
+const MAP_OF_MAPS = `hosts:
+  alpha:
+    ip: 10.0.0.1
+    role: primary
+  beta:
+    ip: 10.0.0.2
+    role: replica
+`;
+
+const FLAT_CONFIG = `name: my-app
+version: 1.2.3
+debug: false
+port: 8080
+`;
+
+describe("grid detection", () => {
+  it("finds a list of mappings and unions its keys as columns", () => {
+    const { candidates } = parseGridDoc(LIST_OF_MAPS);
+    expect(candidates).toHaveLength(1);
+    const model = gridModelFor(candidates[0]);
+    expect(model.shape).toBe("seq");
+    // First-seen order across all rows: name, port, enabled.
+    expect(model.columns).toEqual(["name", "port", "enabled"]);
+    expect(model.rows).toHaveLength(3);
+    expect(model.rows.map((r) => r.header)).toEqual(["0", "1", "2"]);
+  });
+
+  it("aligns cells to columns, leaving a missing key null", () => {
+    const model = gridModelFor(parseGridDoc(LIST_OF_MAPS).candidates[0]);
+    const db = model.rows[1]; // { name: db, port: 5432 } — no `enabled`
+    expect(db.cells[0]?.value).toBe("db");
+    expect(db.cells[1]?.value).toBe("5432");
+    expect(db.cells[2]).toBeNull(); // missing → empty cell
+  });
+
+  it("finds a map of mappings, headed by the outer key", () => {
+    const { candidates } = parseGridDoc(MAP_OF_MAPS);
+    const model = gridModelFor(candidates[0]);
+    expect(model.shape).toBe("map");
+    expect(model.label).toBe("hosts");
+    expect(model.columns).toEqual(["ip", "role"]);
+    expect(model.rows.map((r) => r.header)).toEqual(["alpha", "beta"]);
+  });
+
+  it("does NOT treat a flat config map as a grid", () => {
+    expect(hasGrid(FLAT_CONFIG)).toBe(false);
+    expect(gridCandidates(parseYaml(FLAT_CONFIG))).toHaveLength(0);
+  });
+
+  it("ranks multiple tabular regions largest first", () => {
+    const text = `small:
+  a: {x: 1, y: 2}
+  b: {x: 3, y: 4}
+big:
+  - id: 1
+    a: 1
+    b: 2
+    c: 3
+  - id: 2
+    a: 4
+    b: 5
+    c: 6
+  - id: 3
+    a: 7
+    b: 8
+    c: 9
+`;
+    const cands = gridCandidates(parseYaml(text));
+    expect(cands.length).toBeGreaterThanOrEqual(2);
+    // `big` (3×4) outranks `small` (2×2).
+    expect(gridModelFor(cands[0]).label).toBe("big");
+  });
+
+  it("reports no candidates for an unparseable file", () => {
+    expect(hasGrid("\tbad: indent")).toBe(false);
+  });
+});
+
+describe("card view gate (hasCards)", () => {
+  it("shows cards when a collection nests another", () => {
+    expect(hasCards(LIST_OF_MAPS)).toBe(true); // list of mappings
+    expect(hasCards(MAP_OF_MAPS)).toBe(true); // map of mappings
+    expect(hasCards("root:\n  child:\n    leaf: 1\n")).toBe(true); // deep nesting
+  });
+
+  it("hides cards for a wholly flat file", () => {
+    expect(hasCards(FLAT_CONFIG)).toBe(false); // map of scalars
+    expect(hasCards("- a\n- b\n- c\n")).toBe(false); // list of scalars
+  });
+
+  it("hides cards for an unparseable file", () => {
+    expect(hasCards("\tbad: indent")).toBe(false);
+  });
+
+  it("isContainer distinguishes collections from scalars", () => {
+    const doc = parseYaml(MAP_OF_MAPS);
+    const hosts = doc.docs[0].children[0]; // hosts: {…}
+    expect(isContainer(hosts)).toBe(true);
+    const ip = hosts.children[0].children[0]; // alpha.ip
+    expect(isContainer(ip)).toBe(false);
+  });
+});
+
+describe("cell kinds", () => {
+  it("classifies scalar, empty, nested and locked cells", () => {
+    const text = `- name: web
+  meta: {a: 1}
+- name: db
+`;
+    const model = gridModelFor(parseGridDoc(text).candidates[0]);
+    // columns: name, meta
+    const web = model.rows[0];
+    const db = model.rows[1];
+    expect(cellKind(web.cells[0], web.map)).toBe("scalar"); // name: web
+    expect(cellKind(web.cells[1], web.map)).toBe("nested"); // meta: {a: 1}
+    expect(cellKind(db.cells[1], db.map)).toBe("empty"); // db has no meta
+    expect(nestedLabel(web.cells[1]!)).toBe("{ 1 }");
+  });
+});
+
+describe("grid edits are text splices (view on the text)", () => {
+  it("edits a scalar cell, keeping the file's comment and other bytes", () => {
+    const doc = parseYaml(LIST_OF_MAPS);
+    const model = gridModelFor(gridCandidates(doc)[0]);
+    const portCell = model.rows[0].cells[1]!; // web.port = 8080
+    const next = setValue(LIST_OF_MAPS, doc, portCell, "9090");
+    expect(next).toContain("port: 9090");
+    expect(next).toContain("# services"); // the comment survives
+    expect(next).toContain("name: db"); // untouched rows survive
+    expect(next).not.toContain("port: 8080");
+  });
+
+  it("fills a missing cell by adding the key to that row's mapping", () => {
+    const doc = parseYaml(LIST_OF_MAPS);
+    const model = gridModelFor(gridCandidates(doc)[0]);
+    const db = model.rows[1]; // no `enabled`
+    const next = addChild(LIST_OF_MAPS, doc, db.map!, "key", "enabled", literalFor("text", "true", false));
+    const reparsed = gridModelFor(gridCandidates(parseYaml(next))[0]);
+    expect(reparsed.rows[1].cells[2]?.value).toBe("true");
+    // The other rows are unchanged.
+    expect(reparsed.rows[0].cells[2]?.value).toBe("true");
+    expect(reparsed.rows[2].cells[2]?.value).toBe("false");
+  });
+
+  it("deletes a whole row", () => {
+    const doc = parseYaml(LIST_OF_MAPS);
+    const model = gridModelFor(gridCandidates(doc)[0]);
+    const next = deleteNode(LIST_OF_MAPS, model.rows[1].map!); // drop `db`
+    const reparsed = gridModelFor(gridCandidates(parseYaml(next))[0]);
+    expect(reparsed.rows.map((r) => r.cells[0]?.value)).toEqual(["web", "cache"]);
+  });
+});
diff --git a/src/__tests__/YamlModel.test.ts b/src/__tests__/YamlModel.test.ts
new file mode 100644
index 0000000..22c0ed7
--- /dev/null
+++ b/src/__tests__/YamlModel.test.ts
@@ -0,0 +1,885 @@
+import { describe, it, expect } from "vitest";
+import {
+  parseYaml,
+  setValue as setValueRaw,
+  renameKey as renameKeyRaw,
+  deleteNode,
+  addChild,
+  addRootEntry,
+  duplicateNode,
+  moveNode,
+  moveNodeTo,
+  setComment,
+  commentOf,
+  canComment,
+  canAddChild,
+  canPasteAfter,
+  copyNode,
+  pasteAfter,
+  isEmptyPlaceholder,
+  isFlow,
+  literalFor,
+  scalarType,
+  isYamlPath,
+  isJsonPath,
+  isTreePath,
+  type YamlNode,
+} from "../lib/viewers/yaml";
+
+// The edits take the parsed doc (it carries the dialect and the indent step); in
+// the tests the doc is always the one the node came from, so bind it here.
+const setValue = (text: string, node: YamlNode, next: string, strict = false) =>
+  setValueRaw(text, parseYaml(text, { strict }), node, next);
+const renameKey = (text: string, node: YamlNode, next: string, strict = false) =>
+  renameKeyRaw(text, parseYaml(text, { strict }), node, next);
+
+/** The node at `path` (keys and indices), from the first document. */
+function at(text: string, path: (string | number)[], strict = false): YamlNode {
+  const doc = parseYaml(text, { strict });
+  expect(doc.error).toBeNull();
+  let node = doc.docs[0];
+  for (const step of path) {
+    const next =
+      typeof step === "number"
+        ? node.children[step]
+        : node.children.find((c) => c.key === step);
+    if (!next) throw new Error(`no node at ${path.join("/")} (missing ${String(step)})`);
+    node = next;
+  }
+  return node;
+}
+
+const CONFIG = `# Server configuration
+server:
+  host: 0.0.0.0   # bind address
+  port: 8080
+  tags:
+    - web
+    - prod
+debug: false
+`;
+
+// A sequence whose items are themselves sequences, written on the dash line.
+const MATRIX = `matrix:
+  - - 1
+    - 2
+  - - 3
+`;
+
+describe("parseYaml", () => {
+  it("reads mappings, sequences and scalar types", () => {
+    const doc = parseYaml(CONFIG);
+    expect(doc.error).toBeNull();
+    expect(doc.docs).toHaveLength(1);
+
+    const root = doc.docs[0];
+    expect(root.kind).toBe("map");
+    expect(root.children.map((c) => c.key)).toEqual(["server", "debug"]);
+
+    const server = at(CONFIG, ["server"]);
+    expect(server.kind).toBe("map");
+    expect(server.children.map((c) => c.key)).toEqual(["host", "port", "tags"]);
+
+    expect(at(CONFIG, ["server", "port"]).value).toBe("8080");
+    expect(scalarType(at(CONFIG, ["server", "port"]))).toBe("number");
+    expect(scalarType(at(CONFIG, ["debug"]))).toBe("boolean");
+
+    const tags = at(CONFIG, ["server", "tags"]);
+    expect(tags.kind).toBe("seq");
+    expect(tags.children.map((c) => c.value)).toEqual(["web", "prod"]);
+    expect(tags.children[0].key).toBeNull();
+  });
+
+  it("keeps a trailing comment out of the value", () => {
+    expect(at(CONFIG, ["server", "host"]).value).toBe("0.0.0.0");
+  });
+
+  it("decodes quoted scalars and remembers their style", () => {
+    const text = `a: "hi \\"there\\""\nb: 'it''s fine'\n`;
+    expect(at(text, ["a"]).value).toBe('hi "there"');
+    expect(at(text, ["a"]).style).toBe("double");
+    expect(at(text, ["b"]).value).toBe("it's fine");
+    expect(at(text, ["b"]).style).toBe("single");
+  });
+
+  it("reads a block scalar's body", () => {
+    const text = `script: |\n  echo one\n  echo two\nafter: 1\n`;
+    const script = at(text, ["script"]);
+    expect(script.style).toBe("block");
+    expect(script.value).toBe("echo one\necho two");
+    expect(script.endLine).toBe(2);
+    expect(at(text, ["after"]).value).toBe("1");
+  });
+
+  it("reads a sequence of mappings written on the dash line", () => {
+    const text = `services:\n  - name: api\n    port: 80\n  - name: web\n    port: 443\n`;
+    const services = at(text, ["services"]);
+    expect(services.children).toHaveLength(2);
+    const first = services.children[0];
+    expect(first.kind).toBe("map");
+    expect(first.children.map((c) => c.key)).toEqual(["name", "port"]);
+    expect(first.children[0].value).toBe("api");
+    // The `name` key shares the dash's line — flagged, so every whole-line edit
+    // splices around the dash instead of taking the line.
+    expect(first.children[0].onDash).toBe(true);
+    expect(first.children[0].deletable).toBe(true);
+    expect(first.children[1].onDash).toBeUndefined();
+  });
+
+  it("reads a sequence nested inline on the dash line", () => {
+    const matrix = at(MATRIX, ["matrix"]);
+    expect(matrix.children).toHaveLength(2);
+
+    const row = matrix.children[0];
+    expect(row.kind).toBe("seq");
+    expect(row.children.map((c) => c.value)).toEqual(["1", "2"]);
+    // The first entry shares the outer dash's line — flagged, so every
+    // whole-line edit splices around the dash instead of taking the line.
+    expect(row.children[0].onDash).toBe(true);
+    expect(row.children[0].deletable).toBe(true);
+    expect(row.children[1].onDash).toBeUndefined();
+
+    expect(at(MATRIX, ["matrix", 1]).children.map((c) => c.value)).toEqual(["3"]);
+  });
+
+  it("nests inline sequences to any depth, and mixes them with mappings", () => {
+    const deep = at("- - - x\n", [0, 0]);
+    expect(deep.kind).toBe("seq");
+    expect(deep.children[0].value).toBe("x");
+
+    const mapped = at("- - name: api\n    port: 80\n", [0, 0]);
+    expect(mapped.kind).toBe("map");
+    expect(mapped.children.map((c) => c.key)).toEqual(["name", "port"]);
+  });
+
+  it("reads a block sequence written at its key's own column", () => {
+    // Valid YAML: a sequence needn't indent past its key. The items sit at the
+    // SAME column as `values:`, and the mapping continues (`cutoff:`) after them.
+    const text = `props:\n  values:\n  - 1\n  - 2\n  - 3\n  cutoff: 1\n`;
+    const doc = parseYaml(text);
+    expect(doc.error).toBeNull();
+    const values = at(text, ["props", "values"]);
+    expect(values.kind).toBe("seq");
+    expect(values.children.map((c) => c.value)).toEqual(["1", "2", "3"]);
+    // The mapping resumes after the same-indent sequence.
+    expect(at(text, ["props", "cutoff"]).value).toBe("1");
+  });
+
+  it("reads a same-column sequence of scalars followed by more keys (the ZINC shape)", () => {
+    const text = `labels:\n  label_type:\n  - induced_cycles\n  - primary\n  min_cycle_length: 6\n`;
+    const lt = at(text, ["labels", "label_type"]);
+    expect(lt.kind).toBe("seq");
+    expect(lt.children.map((c) => c.value)).toEqual(["induced_cycles", "primary"]);
+    expect(at(text, ["labels", "min_cycle_length"]).value).toBe("6");
+  });
+
+  it("keeps a top-level same-column list as the key's value, not a second document", () => {
+    // `models:` then a nested list at column 0 is ONE document (a map whose
+    // `models` is a list of lists), not a map plus an orphaned sequence.
+    const text = `models:\n- - a: 1\n  - b: 2\n`;
+    const doc = parseYaml(text);
+    expect(doc.error).toBeNull();
+    expect(doc.docs).toHaveLength(1);
+    const models = at(text, ["models"]);
+    expect(models.kind).toBe("seq");
+    expect(models.children).toHaveLength(1);
+    expect(models.children[0].kind).toBe("seq");
+    expect(models.children[0].children).toHaveLength(2);
+  });
+
+  it("adds an item to a same-column sequence at that same column", () => {
+    const text = `props:\n  values:\n  - 1\n  - 2\n  cutoff: 1\n`;
+    const doc = parseYaml(text);
+    const values = at(text, ["props", "values"]);
+    const next = addChild(text, doc, values, "item", "", "3");
+    expect(next).toBe(`props:\n  values:\n  - 1\n  - 2\n  - 3\n  cutoff: 1\n`);
+  });
+
+  it("splits multiple documents", () => {
+    const doc = parseYaml(`a: 1\n---\nb: 2\n`);
+    expect(doc.docs).toHaveLength(2);
+    expect(doc.docs[0].children[0].key).toBe("a");
+    expect(doc.docs[1].children[0].key).toBe("b");
+  });
+
+  it("renders anchors and merge keys but refuses to rewrite them", () => {
+    const text = `base: &base\n  a: 1\nchild:\n  <<: *base\n  b: 2\n`;
+    const doc = parseYaml(text);
+    expect(doc.error).toBeNull();
+    const merge = at(text, ["child"]).children[0];
+    expect(merge.key).toBe("<<");
+    expect(merge.editable).toBe(false);
+    // The anchored mapping still parses into real children.
+    expect(at(text, ["base"]).children.map((c) => c.key)).toEqual(["a"]);
+  });
+
+  it("refuses a construct it cannot classify instead of guessing", () => {
+    expect(parseYaml("\tkey: 1\n").error?.message).toMatch(/tabs/i);
+    expect(parseYaml("? complex\n: value\n").error).not.toBeNull();
+  });
+
+  it("infers the file's own indent step", () => {
+    expect(parseYaml(CONFIG).indentStep).toBe(2);
+    expect(parseYaml("a:\n    b: 1\n").indentStep).toBe(4);
+  });
+});
+
+describe("setValue", () => {
+  it("rewrites a scalar in place, keeping its comment and the rest of the file", () => {
+    const node = at(CONFIG, ["server", "host"]);
+    const next = setValue(CONFIG, node, "127.0.0.1");
+    expect(next).toContain("  host: 127.0.0.1   # bind address");
+    expect(next).toContain("# Server configuration");
+    expect(next).toContain("    - prod");
+  });
+
+  it("keeps the author's quoting style", () => {
+    const text = `a: "x"\nb: 'y'\nc: z\n`;
+    expect(setValue(text, at(text, ["a"]), "q")).toBe(`a: "q"\nb: 'y'\nc: z\n`);
+    expect(setValue(text, at(text, ["b"]), "q")).toBe(`a: "x"\nb: 'q'\nc: z\n`);
+    expect(setValue(text, at(text, ["c"]), "q")).toBe(`a: "x"\nb: 'y'\nc: q\n`);
+  });
+
+  it("quotes a plain value that would otherwise change the structure", () => {
+    const text = `a: z\n`;
+    expect(setValue(text, at(text, ["a"]), "key: val")).toBe(`a: "key: val"\n`);
+    expect(setValue(text, at(text, ["a"]), "")).toBe(`a: ""\n`);
+    expect(setValue(text, at(text, ["a"]), "# not a comment")).toBe(`a: "# not a comment"\n`);
+  });
+
+  it("writes a first value into an empty key", () => {
+    const text = `a:\nb: 2\n`;
+    expect(setValue(text, at(text, ["a"]), "1")).toBe(`a: 1\nb: 2\n`);
+  });
+
+  it("rewrites a block scalar's body at its own indent", () => {
+    const text = `script: |\n  echo one\n  echo two\nafter: 1\n`;
+    const next = setValue(text, at(text, ["script"]), "echo three\necho four");
+    expect(next).toBe(`script: |\n  echo three\n  echo four\nafter: 1\n`);
+  });
+
+  it("edits a sequence item", () => {
+    const next = setValue(CONFIG, at(CONFIG, ["server", "tags", 0]), "api");
+    expect(next).toContain("    - api\n    - prod");
+  });
+
+  it("does nothing to a node it cannot rewrite", () => {
+    const text = `child:\n  <<: *base\n`;
+    const merge = at(text, ["child"]).children[0];
+    expect(setValue(text, merge, "nope")).toBe(text);
+  });
+
+  it("edits an item of an inline nested sequence, dash line included", () => {
+    expect(setValue(MATRIX, at(MATRIX, ["matrix", 0, 0]), "9")).toBe(
+      "matrix:\n  - - 9\n    - 2\n  - - 3\n",
+    );
+    expect(setValue(MATRIX, at(MATRIX, ["matrix", 0, 1]), "9")).toBe(
+      "matrix:\n  - - 1\n    - 9\n  - - 3\n",
+    );
+  });
+});
+
+describe("renameKey", () => {
+  it("renames in place and leaves the value alone", () => {
+    const next = renameKey(CONFIG, at(CONFIG, ["server", "port"]), "listen_port");
+    expect(next).toContain("  listen_port: 8080");
+    expect(next).toContain("  host: 0.0.0.0   # bind address");
+  });
+
+  it("quotes a key that needs it", () => {
+    const text = `a: 1\n`;
+    expect(renameKey(text, at(text, ["a"]), "we: ird")).toBe(`"we: ird": 1\n`);
+  });
+});
+
+describe("deleteNode", () => {
+  it("removes a key with its whole nested block, and the comment describing it", () => {
+    // The comment above `server` is `server`'s. Left behind, it would come to sit
+    // above `debug` and describe that instead.
+    const next = deleteNode(CONFIG, at(CONFIG, ["server"]));
+    expect(next).toBe("debug: false\n");
+  });
+
+  it("removes one list item", () => {
+    const next = deleteNode(CONFIG, at(CONFIG, ["server", "tags", 0]));
+    expect(next).toContain("  tags:\n    - prod\n");
+  });
+
+  it("deletes a key that shares its list item's line, pulling the next key up", () => {
+    const text = `services:\n  - name: api\n    port: 80\n`;
+    const name = at(text, ["services", 0]).children[0];
+    // The dash is the item's, not the entry's: `port` climbs onto it.
+    expect(deleteNode(text, name)).toBe("services:\n  - port: 80\n");
+    // The item itself deletes fine, block and all.
+    expect(deleteNode(text, at(text, ["services", 0]))).toBe("services:\n");
+  });
+
+  it("leaves a bare dash when the deleted dash-line entry has nothing to pull up", () => {
+    // The only entry: the item stays, empty.
+    expect(deleteNode("- name: a\n", at("- name: a\n", [0]).children[0])).toBe("-\n");
+    // A comment-led sibling keeps its lead run above its own line — pulling the
+    // line up would drag the comment onto the dash.
+    const led = `- name: a\n  # docs\n  port: 1\n`;
+    expect(deleteNode(led, at(led, [0]).children[0])).toBe("-\n  # docs\n  port: 1\n");
+  });
+
+  it("deletes the entry that shares its nested list's dash line", () => {
+    expect(deleteNode(MATRIX, at(MATRIX, ["matrix", 0, 0]))).toBe(
+      "matrix:\n  - - 2\n  - - 3\n",
+    );
+    // Its sibling goes on its own, and the whole row goes with the dash line.
+    expect(deleteNode(MATRIX, at(MATRIX, ["matrix", 0, 1]))).toBe(
+      "matrix:\n  - - 1\n  - - 3\n",
+    );
+    expect(deleteNode(MATRIX, at(MATRIX, ["matrix", 0]))).toBe("matrix:\n  - - 3\n");
+  });
+});
+
+describe("addChild", () => {
+  const add = (text: string, node: YamlNode, kind: "key" | "item", key: string, lit: string) =>
+    addChild(text, parseYaml(text), node, kind, key, lit);
+
+  it("appends a key at the siblings' own indent", () => {
+    const next = add(CONFIG, at(CONFIG, ["server"]), "key", "workers", "4");
+    expect(next).toContain("  tags:\n    - web\n    - prod\n  workers: 4\ndebug: false");
+  });
+
+  it("appends a list item", () => {
+    const next = add(CONFIG, at(CONFIG, ["server", "tags"]), "item", "", '"eu-west"');
+    expect(next).toContain("    - prod\n    - \"eu-west\"\ndebug: false");
+  });
+
+  it("appends to an inline nested sequence at its own items' column", () => {
+    const next = add(MATRIX, at(MATRIX, ["matrix", 0]), "item", "", "3");
+    expect(next).toBe("matrix:\n  - - 1\n    - 2\n    - 3\n  - - 3\n");
+  });
+
+  it("grows the first child of an empty key, replacing the placeholder", () => {
+    const text = `server:\ndebug: false\n`;
+    expect(add(text, at(text, ["server"]), "key", "port", "80"))
+      .toBe("server:\n  port: 80\ndebug: false\n");
+
+    const nullish = `server: null\n`;
+    expect(add(nullish, at(nullish, ["server"]), "key", "port", "80"))
+      .toBe("server:\n  port: 80\n");
+
+    // An empty `[]`/`{}` is a real (flow) collection, not a placeholder: it grows
+    // children in the style it is written in, rather than being rewritten to block.
+    const emptyList = `tags: []\n`;
+    expect(add(emptyList, at(emptyList, ["tags"]), "item", "", "web"))
+      .toBe("tags: [web]\n");
+
+    const emptyMap = `server: {}\n`;
+    expect(add(emptyMap, at(emptyMap, ["server"]), "key", "host", "local"))
+      .toBe("server: {host: local}\n");
+  });
+
+  it("matches the file's indent step", () => {
+    const text = `a:\n    b:\n`;
+    const next = add(text, at(text, ["a", "b"]), "key", "c", "2");
+    expect(next).toBe("a:\n    b:\n        c: 2\n");
+  });
+
+  it("refuses to hang a child off a key that already holds a value", () => {
+    const text = `a: 1\n`;
+    expect(add(text, at(text, ["a"]), "key", "b", "2")).toBe(text);
+  });
+
+  it("only offers the children a node can actually take", () => {
+    expect(canAddChild(at(CONFIG, ["server"]), "key")).toBe(true);
+    expect(canAddChild(at(CONFIG, ["server"]), "item")).toBe(false);
+    expect(canAddChild(at(CONFIG, ["server", "tags"]), "item")).toBe(true);
+    // A key that already holds a value is not a place to hang children.
+    expect(canAddChild(at(CONFIG, ["server", "port"]), "key")).toBe(false);
+    expect(isEmptyPlaceholder(at("a:\n", ["a"]))).toBe(true);
+    expect(isEmptyPlaceholder(at("a: 1\n", ["a"]))).toBe(false);
+  });
+
+  it("grows a placeholder inside flow into a flow collection, in place", () => {
+    // The bug this guards: a flow node has no column (`indent` is -1), so growing it
+    // as a block spliced a line at column -1 into the middle of the brackets and tore
+    // the collection open. Every `null` in a JSON file is one of these.
+    const flowNull = `service: {name: null}\n`;
+    expect(add(flowNull, at(flowNull, ["service", "name"]), "item", "", "x"))
+      .toBe("service: {name: [x]}\n");
+    expect(add(flowNull, at(flowNull, ["service", "name"]), "key", "first", "api"))
+      .toBe("service: {name: {first: api}}\n");
+
+    // An empty value has no token to replace — the collection splices in after the `:`.
+    const flowEmpty = `service: {name: , port: 1}\n`;
+    expect(add(flowEmpty, at(flowEmpty, ["service", "name"]), "item", "", "x"))
+      .toBe("service: {name: [x], port: 1}\n");
+
+    const flowSeq = `hosts: [a, null]\n`;
+    expect(add(flowSeq, at(flowSeq, ["hosts", 1]), "item", "", "x")).toBe("hosts: [a, [x]]\n");
+  });
+
+  it("adds a mapping ITEM when a list is given a key", () => {
+    // A list of mappings is grown by adding a key to the list — not by adding an
+    // empty container and then filling it.
+    const text = `services:\n  - name: api\n    port: 80\n`;
+    expect(add(text, at(text, ["services"]), "key", "name", "web"))
+      .toBe("services:\n  - name: api\n    port: 80\n  - name: web\n");
+    expect(canAddChild(at(text, ["services"]), "key")).toBe(true);
+
+    // In flow, the same thing in the collection's own style.
+    const flow = `services: [{name: api}]\n`;
+    expect(add(flow, at(flow, ["services"]), "key", "name", "web"))
+      .toBe("services: [{name: api}, {name: web}]\n");
+  });
+
+  it("seeds an empty file", () => {
+    expect(addRootEntry("", "key", "name", '"eldrun"')).toBe('name: "eldrun"\n');
+    expect(addRootEntry("# just a comment\n", "item", "", "first")).toBe(
+      "# just a comment\n- first\n",
+    );
+  });
+});
+
+describe("literalFor", () => {
+  it("writes the type the user picked", () => {
+    expect(literalFor("text", "hello")).toBe("hello");
+    // A string that would read back as a number/bool/null gets quoted — that is
+    // what makes "no" the string "no".
+    expect(literalFor("text", "no")).toBe('"no"');
+    expect(literalFor("text", "8080")).toBe('"8080"');
+    expect(literalFor("number", "8080")).toBe("8080");
+    expect(literalFor("boolean", "true")).toBe("true");
+    expect(literalFor("null", "")).toBe("null");
+    expect(literalFor("map", "")).toBe("{}");
+    expect(literalFor("seq", "")).toBe("[]");
+  });
+});
+
+describe("moveNode", () => {
+  it("reorders list items, block and all", () => {
+    const text = `services:\n  - name: api\n    port: 80\n  - name: web\n    port: 443\n`;
+    const services = at(text, ["services"]);
+    const next = moveNode(text, services.children, services.children[1], -1);
+    expect(next).toBe(
+      "services:\n  - name: web\n    port: 443\n  - name: api\n    port: 80\n",
+    );
+  });
+
+  it("reorders mapping keys, and a comment travels with the key it describes", () => {
+    // `# about b` sits directly above `b`, so it is b's — reordering must carry it,
+    // or the two keys would swap descriptions behind the author's back.
+    const text = `# about a\na: 1\n# about b\nb: 2\n`;
+    const root = parseYaml(text).docs[0];
+    expect(moveNode(text, root.children, root.children[0], 1)).toBe(
+      "# about b\nb: 2\n# about a\na: 1\n",
+    );
+  });
+
+  it("moves a node straight to a distant sibling, in one edit", () => {
+    const text = `a: 1\nb: 2\nc: 3\nd: 4\n`;
+    const root = parseYaml(text).docs[0];
+    expect(moveNodeTo(text, root.children, root.children[3], 0)).toBe("d: 4\na: 1\nb: 2\nc: 3\n");
+    expect(moveNodeTo(text, root.children, root.children[0], 2)).toBe("b: 2\nc: 3\na: 1\nd: 4\n");
+    // Dropping a node on itself is not an edit.
+    expect(moveNodeTo(text, root.children, root.children[1], 1)).toBe(text);
+  });
+
+  it("does nothing at the ends", () => {
+    const root = parseYaml(CONFIG).docs[0];
+    expect(moveNode(CONFIG, root.children, root.children[0], -1)).toBe(CONFIG);
+    expect(moveNode(CONFIG, root.children, root.children[1], 1)).toBe(CONFIG);
+  });
+
+  it("hands the dash over when first place changes hands", () => {
+    // In `- name: a`, `name` shares the item's dash line; a reorder into or out
+    // of first place moves the entry and re-homes the `- ` prefix.
+    const text = `- name: a\n  port: 1\n  host: x\n`;
+    const item = at(text, [0]);
+    // `host` (index 2) dropped onto `name` (index 0): host takes the dash.
+    expect(moveNodeTo(text, item.children, item.children[2], 0)).toBe(
+      `- host: x\n  name: a\n  port: 1\n`,
+    );
+    // `name` moved off the dash line: `port` takes the dash.
+    expect(moveNodeTo(text, item.children, item.children[0], 1)).toBe(
+      `- port: 1\n  name: a\n  host: x\n`,
+    );
+    // Dropping onto `port` (index 1) leaves the dash line alone.
+    expect(moveNodeTo(text, item.children, item.children[2], 1)).toBe(
+      `- name: a\n  host: x\n  port: 1\n`,
+    );
+  });
+
+  it("keeps a trailing comment with the dash-line entry it moves, and a lead above the dash", () => {
+    // The moved entry's own `#` travels with it off the dash line…
+    const noted = `- name: a  # who\n  port: 1\n`;
+    expect(moveNodeTo(noted, at(noted, [0]).children, at(noted, [0]).children[0], 1)).toBe(
+      `- port: 1\n  name: a  # who\n`,
+    );
+    // …and an entry moved ONTO the dash line keeps its lead run above it — the
+    // placement an item's prose already uses.
+    const led = `- name: a\n  # p docs\n  port: 1\n`;
+    expect(moveNodeTo(led, at(led, [0]).children, at(led, [0]).children[1], 0)).toBe(
+      `  # p docs\n- port: 1\n  name: a\n`,
+    );
+  });
+
+  it("hands the outer dash over inside a nested sequence", () => {
+    expect(
+      moveNodeTo(MATRIX, at(MATRIX, ["matrix", 0]).children, at(MATRIX, ["matrix", 0, 1]), 0),
+    ).toBe("matrix:\n  - - 2\n    - 1\n  - - 3\n");
+  });
+});
+
+describe("duplicateNode", () => {
+  it("appends a verbatim copy of a block list item", () => {
+    const text = `tags:\n  - web\n  - prod\n`;
+    const last = at(text, ["tags", 1]);
+    expect(duplicateNode(text, last)).toBe(`tags:\n  - web\n  - prod\n  - prod\n`);
+  });
+
+  it("copies a whole mapping item, nested block and all", () => {
+    const text = `items:\n  - name: a\n    port: 1\n  - name: b\n    port: 2\n`;
+    const last = at(text, ["items", 1]);
+    expect(duplicateNode(text, last)).toBe(
+      `items:\n  - name: a\n    port: 1\n  - name: b\n    port: 2\n  - name: b\n    port: 2\n`,
+    );
+  });
+
+  it("duplicates a dash-line entry below it, without the dash", () => {
+    // The `- ` prefix is the item's, not the entry's — the copy gets spaces.
+    expect(duplicateNode("- - a\n", at("- - a\n", [0, 0]))).toBe("- - a\n  - a\n");
+  });
+});
+
+describe("comments", () => {
+  const comment = (text: string, node: YamlNode, next: string, strict = false) =>
+    setComment(text, parseYaml(text, { strict }), node, next);
+
+  it("reads a comment written behind the value, and one written above the key", () => {
+    expect(commentOf(at(CONFIG, ["server", "host"]))).toBe("bind address");
+    expect(commentOf(at(CONFIG, ["server"]))).toBe("Server configuration");
+    expect(commentOf(at(CONFIG, ["debug"]))).toBe("");
+  });
+
+  it("only claims the prose that is unambiguously about it", () => {
+    // A blank line, or a comment at another indent, ends the run — so a key does not
+    // adopt the section header two entries up.
+    const text = `# section\n\na: 1\nb:\n  # about c\n  c: 2\n`;
+    expect(commentOf(at(text, ["a"]))).toBe("");
+    expect(commentOf(at(text, ["b", "c"]))).toBe("about c");
+    // A multi-line run above a key is all of it.
+    const run = `# one\n# two\na: 1\n`;
+    expect(commentOf(at(run, ["a"]))).toBe("one\ntwo");
+  });
+
+  it("writes where the author already wrote, and behind the value when there is none", () => {
+    // Behind stays behind.
+    expect(comment(CONFIG, at(CONFIG, ["server", "host"]), "the address to bind"))
+      .toContain("  host: 0.0.0.0   # the address to bind\n");
+    // Above stays above, at the key's own indent.
+    expect(comment(CONFIG, at(CONFIG, ["server"]), "How the server listens"))
+      .toBe(CONFIG.replace("# Server configuration", "# How the server listens"));
+    // A key with no comment gets one behind — it adds no line, so it disturbs nothing.
+    expect(comment(CONFIG, at(CONFIG, ["debug"]), "verbose logs"))
+      .toContain("debug: false  # verbose logs\n");
+  });
+
+  it("comments a container, a list item and a nested list", () => {
+    expect(comment(CONFIG, at(CONFIG, ["server", "tags"]), "where it runs"))
+      .toContain("  tags:  # where it runs\n");
+    expect(comment(CONFIG, at(CONFIG, ["server", "tags", 0]), "public"))
+      .toContain("    - web  # public\n");
+    expect(comment(MATRIX, at(MATRIX, ["matrix", 0, 1]), "second"))
+      .toBe("matrix:\n  - - 1\n    - 2  # second\n  - - 3\n");
+  });
+
+  it("comments a mapping list item above its dash line, not behind the first key", () => {
+    // `- name: api` — a comment behind the dash line would belong to `name`, so
+    // the whole item is documented on the line above it instead.
+    const text = `services:\n  - name: api\n    port: 80\n  - name: web\n    port: 443\n`;
+    const item = at(text, ["services", 0]);
+    expect(canAddChild(item, "key")).toBe(true); // it's a mapping item
+    const commented = comment(text, item, "the API service");
+    expect(commented).toBe(
+      `services:\n  # the API service\n  - name: api\n    port: 80\n  - name: web\n    port: 443\n`,
+    );
+    // It reads back as the item's own comment, and clears back to the original.
+    const item2 = at(commented, ["services", 0]);
+    expect(commentOf(item2)).toBe("the API service");
+    expect(comment(commented, item2, "")).toBe(text);
+  });
+
+  it("comments a nested-sequence list item above its dash line", () => {
+    // `- - 1` — the outer item is a sequence written on the dash line.
+    const item = at(MATRIX, ["matrix", 0]);
+    expect(comment(MATRIX, item, "first row")).toBe(
+      "matrix:\n  # first row\n  - - 1\n    - 2\n  - - 3\n",
+    );
+  });
+
+  it("clears a comment without leaving the whitespace behind it", () => {
+    expect(comment(CONFIG, at(CONFIG, ["server", "host"]), "")).toContain("  host: 0.0.0.0\n");
+    expect(comment(CONFIG, at(CONFIG, ["server"]), "")).toBe(
+      CONFIG.replace("# Server configuration\n", ""),
+    );
+  });
+
+  it("refuses where a comment cannot go: JSON, and inside a flow collection", () => {
+    const json = `{"a": 1}\n`;
+    const doc = parseYaml(json, { strict: true });
+    expect(canComment(doc, at(json, ["a"], true))).toBe(false);
+    expect(comment(json, at(json, ["a"], true), "nope", true)).toBe(json);
+
+    // A `#` inside `{…}` would swallow the closing bracket and everything up to it.
+    const flow = `service: { name: api }\n`;
+    expect(canComment(parseYaml(flow), at(flow, ["service", "name"]))).toBe(false);
+    expect(comment(flow, at(flow, ["service", "name"]), "nope")).toBe(flow);
+    // The collection itself sits on a block line, so it can take one — behind the `}`.
+    expect(comment(flow, at(flow, ["service"]), "the api")).toBe(
+      "service: { name: api }  # the api\n",
+    );
+  });
+});
+
+describe("round-trip", () => {
+  it("leaves everything it did not touch byte-identical", () => {
+    const text = CONFIG;
+    // An edit deep in the file must not reformat the comment, the blank-line
+    // free layout, the quoting, or the trailing newline.
+    const edited = setValue(text, at(text, ["debug"]), "true");
+    expect(edited).toBe(text.replace("debug: false", "debug: true"));
+  });
+
+  it("preserves CRLF line endings", () => {
+    const text = "a: 1\r\nb: 2\r\n";
+    const next = addChild(text, parseYaml(text), parseYaml(text).docs[0], "key", "c", "3");
+    expect(next).toBe("a: 1\r\nb: 2\r\nc: 3\r\n");
+  });
+
+  it("does not add a trailing newline the file did not have", () => {
+    const text = "a: 1";
+    expect(setValue(text, at(text, ["a"]), "2")).toBe("a: 2");
+  });
+});
+
+describe("paths", () => {
+  it("routes .yaml/.yml/.json to the tree, and nothing else", () => {
+    expect(isYamlPath("/p/config.yaml")).toBe(true);
+    expect(isYamlPath("/p/config.yml")).toBe(true);
+    expect(isYamlPath("/p/config.json")).toBe(false);
+    expect(isJsonPath("/p/config.json")).toBe(true);
+    expect(isTreePath("/p/config.json")).toBe(true);
+    expect(isTreePath("/p/config.yml")).toBe(true);
+    expect(isTreePath("/p/main.rs")).toBe(false);
+    expect(isTreePath("/p/yaml")).toBe(false);
+  });
+});
+
+// ── Flow (JSON) syntax ──────────────────────────────────────────────────────
+// The bug this whole layer exists for: a flow collection used to parse as one
+// opaque scalar, so a JSON-formatted file showed a single row reading "{".
+
+const FLOW = `# app
+service: { name: api, port: 8080 }
+hosts: [a, b]
+`;
+
+const SPREAD = `service: {
+  name: api,
+  port: 8080
+}
+`;
+
+describe("flow collections", () => {
+  it("parses an inline flow map and list as real trees", () => {
+    const svc = at(FLOW, ["service"]);
+    expect(svc.kind).toBe("map");
+    expect(isFlow(svc)).toBe(true);
+    expect(svc.children.map((c) => c.key)).toEqual(["name", "port"]);
+    expect(svc.children[1].value).toBe("8080");
+    expect(scalarType(svc.children[1])).toBe("number");
+
+    const hosts = at(FLOW, ["hosts"]);
+    expect(hosts.kind).toBe("seq");
+    expect(hosts.children.map((c) => c.value)).toEqual(["a", "b"]);
+  });
+
+  it("parses a flow collection that spans lines", () => {
+    const svc = at(SPREAD, ["service"]);
+    expect(svc.children.map((c) => c.key)).toEqual(["name", "port"]);
+    expect(svc.endLine).toBe(3);
+  });
+
+  it("parses nested flow, and flow inside a block list", () => {
+    const text = `items:\n  - {id: 1, tags: [x, y]}\n  - {id: 2, tags: []}\n`;
+    const first = at(text, ["items", 0]);
+    expect(first.children.map((c) => c.key)).toEqual(["id", "tags"]);
+    const tags = first.children[1];
+    expect(tags.kind).toBe("seq");
+    expect(tags.children.map((c) => c.value)).toEqual(["x", "y"]);
+    expect(at(text, ["items", 1]).children[1].children).toHaveLength(0);
+  });
+
+  it("edits a value inside flow without disturbing the collection", () => {
+    const next = setValue(FLOW, at(FLOW, ["service", "port"]), "9090");
+    expect(next).toBe(FLOW.replace("port: 8080", "port: 9090"));
+    expect(next).toContain("# app");
+  });
+
+  it("adds inline when the collection is inline, on its own line when it is not", () => {
+    const inline = addChild(FLOW, parseYaml(FLOW), at(FLOW, ["hosts"]), "item", "", "c");
+    expect(inline).toContain("hosts: [a, b, c]");
+
+    const spread = addChild(SPREAD, parseYaml(SPREAD), at(SPREAD, ["service"]), "key", "tls", "true");
+    expect(spread).toBe("service: {\n  name: api,\n  port: 8080,\n  tls: true\n}\n");
+  });
+
+  it("deletes a flow entry with its comma, not leaving a hole", () => {
+    expect(deleteNode(FLOW, at(FLOW, ["hosts", 0]))).toContain("hosts: [b]");
+    expect(deleteNode(FLOW, at(FLOW, ["hosts", 1]))).toContain("hosts: [a]");
+    expect(deleteNode(FLOW, at(FLOW, ["service", "name"]))).toContain("service: { port: 8080 }");
+  });
+
+  it("deletes a whole flow value with its key, lines and all", () => {
+    expect(deleteNode(SPREAD, at(SPREAD, ["service"]))).toBe("");
+  });
+
+  it("reorders flow entries by swapping their spans", () => {
+    const hosts = at(FLOW, ["hosts"]);
+    expect(moveNode(FLOW, hosts.children, hosts.children[1], -1)).toContain("hosts: [b, a]");
+  });
+
+  it("refuses an unclosed collection rather than showing half a tree", () => {
+    expect(parseYaml("a: {b: 1\n").error?.message).toMatch(/never closed/);
+  });
+});
+
+describe("JSON (strict) files", () => {
+  const PKG = `{
+  "name": "app",
+  "version": "1.0.0",
+  "scripts": {"build": "vite"},
+  "keywords": []
+}
+`;
+
+  it("parses a whole JSON document as the tree", () => {
+    const doc = parseYaml(PKG, { strict: true });
+    expect(doc.error).toBeNull();
+    const root = doc.docs[0];
+    expect(root.kind).toBe("map");
+    expect(root.children.map((c) => c.key)).toEqual(["name", "version", "scripts", "keywords"]);
+    expect(at(PKG, ["scripts", "build"], true).value).toBe("vite");
+  });
+
+  it("writes strings and keys quoted, and bare literals bare", () => {
+    const version = at(PKG, ["version"], true);
+    expect(setValue(PKG, version, "2.0.0", true)).toContain('"version": "2.0.0"');
+
+    const doc = parseYaml(PKG, { strict: true });
+    const next = addChild(PKG, doc, at(PKG, ["keywords"], true), "item", "", literalFor("text", "cli", true));
+    expect(next).toContain('"keywords": ["cli"]');
+
+    const withPort = addChild(PKG, doc, doc.docs[0], "key", "port", literalFor("number", "3000", true));
+    expect(withPort).toContain('"keywords": [],\n  "port": 3000\n}');
+
+    expect(renameKey(PKG, at(PKG, ["name"], true), "title", true)).toContain('"title": "app"');
+  });
+
+  it("seeds an empty JSON file with the collection itself", () => {
+    expect(addRootEntry("", "key", "name", literalFor("text", "app", true), true)).toBe(
+      '{"name": "app"}\n',
+    );
+  });
+});
+
+describe("copy & paste (#yaml copy button + paste cursor)", () => {
+  it("captures a map entry dedented, with its trailing comment", () => {
+    const clip = copyNode(CONFIG, at(CONFIG, ["server", "host"]));
+    expect(clip).not.toBeNull();
+    expect(clip!.text).toBe("host: 0.0.0.0   # bind address");
+    expect(clip!.isMapEntry).toBe(true);
+    expect(clip!.inFlow).toBe(false);
+  });
+
+  it("captures a container with its whole block, dedented to column 0", () => {
+    const clip = copyNode(CONFIG, at(CONFIG, ["server", "tags"]));
+    expect(clip!.lines).toEqual(["tags:", "  - web", "  - prod"]);
+    expect(clip!.text).toBe("tags:\n  - web\n  - prod");
+  });
+
+  it("captures a list item as an item, not a mapping entry", () => {
+    const clip = copyNode(CONFIG, at(CONFIG, ["server", "tags", 0]));
+    expect(clip!.text).toBe("- web");
+    expect(clip!.isMapEntry).toBe(false);
+  });
+
+  it("captures the key that shares its item's dash line, without the dash", () => {
+    const LIST = "list:\n  - name: a\n    port: 1\n";
+    const clip = copyNode(LIST, at(LIST, ["list", 0, "name"]))!;
+    // The `- ` prefix is the item's, not the entry's — the clip starts at the key.
+    expect(clip.text).toBe("name: a");
+    expect(clip.isMapEntry).toBe(true);
+  });
+
+  it("gates the paste to containers the entry fits", () => {
+    const entry = copyNode(CONFIG, at(CONFIG, ["server", "port"]))!; // key: value
+    const item = copyNode(CONFIG, at(CONFIG, ["server", "tags", 0]))!; // - web
+
+    // A mapping entry goes after another mapping entry, never after a list item.
+    expect(canPasteAfter(entry, at(CONFIG, ["debug"]), "map")).toBe(true);
+    expect(canPasteAfter(entry, at(CONFIG, ["server", "tags", 1]), "seq")).toBe(false);
+    // A list item goes after another list item, never into a mapping.
+    expect(canPasteAfter(item, at(CONFIG, ["server", "tags", 1]), "seq")).toBe(true);
+    expect(canPasteAfter(item, at(CONFIG, ["debug"]), "map")).toBe(false);
+
+    // Block and flow never mix: a block entry has no place inside `{...}`.
+    const FLOW = "obj: {a: 1, b: 2}\n";
+    expect(canPasteAfter(entry, at(FLOW, ["obj", "b"]), "map")).toBe(false);
+    const flowEntry = copyNode(FLOW, at(FLOW, ["obj", "a"]))!;
+    expect(canPasteAfter(flowEntry, at(CONFIG, ["debug"]), "map")).toBe(false);
+  });
+
+  it("pastes a map entry after another key, re-indented to its column", () => {
+    // From indent 2 (inside server) to indent 0 (top level): the copy lands at
+    // the anchor's column, and every other line stays byte-identical.
+    const clip = copyNode(CONFIG, at(CONFIG, ["server", "port"]))!;
+    const next = pasteAfter(CONFIG, at(CONFIG, ["debug"]), clip);
+    expect(next).toBe(CONFIG.replace("debug: false\n", "debug: false\nport: 8080\n"));
+    expect(parseYaml(next).error).toBeNull();
+  });
+
+  it("pastes a whole container after a deeper key, indenting its block", () => {
+    const clip = copyNode(CONFIG, at(CONFIG, ["server", "tags"]))!;
+    const next = pasteAfter(CONFIG, at(CONFIG, ["server", "host"]), clip);
+    expect(next).toContain(
+      "  host: 0.0.0.0   # bind address\n  tags:\n    - web\n    - prod\n  port: 8080",
+    );
+    expect(parseYaml(next).error).toBeNull();
+  });
+
+  it("pastes a list item into another list, as the anchor's next sibling", () => {
+    const TWO = "a:\n  - one\nb:\n  - two\n";
+    const clip = copyNode(TWO, at(TWO, ["a", 0]))!;
+    const next = pasteAfter(TWO, at(TWO, ["b", 0]), clip);
+    expect(next).toBe("a:\n  - one\nb:\n  - two\n  - one\n");
+  });
+
+  it("pastes into an inline flow collection between commas", () => {
+    const FLOW = "list: [1, 2]\n";
+    const clip = copyNode(FLOW, at(FLOW, ["list", 0]))!;
+    expect(pasteAfter(FLOW, at(FLOW, ["list", 1]), clip)).toBe("list: [1, 2, 1]\n");
+  });
+
+  it("pastes onto its own line in a spread flow (JSON) collection", () => {
+    const PKG = '{\n  "a": 1,\n  "b": 2\n}\n';
+    const clip = copyNode(PKG, at(PKG, ["a"], true))!;
+    const next = pasteAfter(PKG, at(PKG, ["b"], true), clip);
+    expect(next).toBe('{\n  "a": 1,\n  "b": 2,\n  "a": 1\n}\n');
+    expect(parseYaml(next, { strict: true }).error).toBeNull();
+  });
+
+  it("refuses a cross-style paste outright", () => {
+    const FLOW = "obj: {a: 1}\n";
+    const blockClip = copyNode(CONFIG, at(CONFIG, ["server", "port"]))!;
+    expect(pasteAfter(FLOW, at(FLOW, ["obj", "a"]), blockClip)).toBe(FLOW);
+    const flowClip = copyNode(FLOW, at(FLOW, ["obj", "a"]))!;
+    expect(pasteAfter(CONFIG, at(CONFIG, ["debug"]), flowClip)).toBe(CONFIG);
+  });
+});
diff --git a/src/__tests__/YamlViewer.test.tsx b/src/__tests__/YamlViewer.test.tsx
new file mode 100644
index 0000000..112ba20
--- /dev/null
+++ b/src/__tests__/YamlViewer.test.tsx
@@ -0,0 +1,729 @@
+/**
+ * The YAML viewer (#yaml), driven through the real UI: a `.yaml` file opens in the
+ * structure tree, and every tree action writes back into the SAME draft the Source
+ * tab edits and Ctrl+S saves.
+ *
+ * The load-bearing property these tests pin is that the tree edits the file's text
+ * rather than a model of it: an edit made in the tree leaves the file's comments,
+ * quoting and untouched lines byte-identical, and lands in the editor as an
+ * ordinary (dirty, undoable, saveable) change. A tree that re-serialized a parsed
+ * model would pass none of this.
+ */
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, act, waitFor, fireEvent } from "@testing-library/react";
+
+const { mockInvoke } = vi.hoisted(() => ({ mockInvoke: vi.fn() }));
+vi.mock("@tauri-apps/api/core", () => ({ invoke: mockInvoke }));
+vi.mock("@tauri-apps/api/event", () => ({
+  emit: vi.fn(() => Promise.resolve()),
+  listen: vi.fn(() => Promise.resolve(() => {})),
+}));
+vi.mock("../stores/windows", () => ({
+  useWindowsStore: { getState: () => ({ openFile: () => Promise.resolve() }) },
+}));
+const { settingsState } = vi.hoisted(() => ({
+  // Autosave off, so a save is an explicit click the test can point at.
+  settingsState: { settings: { autosave: false, viewer_prefs: {} } as Record<string, unknown> },
+}));
+vi.mock("../stores/settings", () => ({
+  useSettingsStore: Object.assign((sel: (s: unknown) => unknown) => sel(settingsState), {
+    getState: () => settingsState,
+  }),
+}));
+vi.mock("../stores/projects", () => {
+  const state = {
+    projects: [{ id: "proj", directory: "/p", local_file: "/p/project.json" }],
+    activeId: "proj",
+  };
+  const useProjectsStore = Object.assign(
+    (sel?: (s: typeof state) => unknown) => (sel ? sel(state) : state),
+    { getState: () => state },
+  );
+  return { useProjectsStore };
+});
+vi.mock("../stores/tabs", () => {
+  const state = {
+    tabs: [] as Record<string, unknown>[],
+    layout: null,
+    addTabToScope: vi.fn(),
+    addTab: vi.fn(),
+    setActive: vi.fn(),
+    removeTab: vi.fn(),
+    setViewerState: vi.fn(),
+    splitWithNewTab: vi.fn(() => null),
+  };
+  const useTabsStore = Object.assign(
+    (sel?: (s: typeof state) => unknown) => (sel ? sel(state) : state),
+    { getState: () => state },
+  );
+  return { useTabsStore, findGroupOfTab: () => null, getDetachedViewerState: () => undefined };
+});
+
+// `tags` is a scalar-only list → the tree shows it as ONE editable comma line.
+// `mounts` is not (an item carries a comment a comma line couldn't keep) → it
+// stays per-item rows, which is what the item-row tests below drive.
+const CONFIG = `# Server configuration
+server:
+  host: 0.0.0.0   # bind address
+  port: 8080
+  tags:
+    - web
+    - prod
+  mounts:
+    - /data  # scratch
+    - /home
+debug: false
+`;
+
+let onDisk = CONFIG;
+
+function setup() {
+  onDisk = CONFIG;
+  mockInvoke.mockImplementation((cmd: string, args: Record<string, unknown> = {}) => {
+    if (cmd === "read_file_text") return Promise.resolve(onDisk);
+    if (cmd === "file_mtime") return Promise.resolve(1000);
+    if (cmd === "write_file_text") {
+      onDisk = args.content as string;
+      return Promise.resolve(null);
+    }
+    // check_syntax: the file is valid, so no validation banner.
+    return Promise.resolve(null);
+  });
+}
+
+/** YAML opens in the Tree view by default; clicking Tree is a harmless no-op that
+ *  also guards these tests against a future default change. */
+async function toTree() {
+  await act(async () => {
+    fireEvent.click(await screen.findByRole("button", { name: "Tree" }));
+  });
+}
+
+async function renderYaml() {
+  vi.resetModules();
+  const { FileViewerPane } = await import("../components/embed/FileViewerPane");
+  await act(async () => {
+    render(<FileViewerPane viewer="yaml" path="/p/config.yaml" projectId="proj" />);
+  });
+  await toTree();
+  await screen.findByRole("button", { name: "Collapse server" });
+}
+
+/** The row element an entry's key/index button sits in. */
+function rowOf(el: HTMLElement): HTMLElement {
+  const row = el.closest(".yaml-row") as HTMLElement | null;
+  expect(row).not.toBeNull();
+  return row!;
+}
+
+/** Save, and return the text that reached the disk. */
+async function saveAndRead(): Promise<string> {
+  await act(async () => {
+    fireEvent.click(screen.getByLabelText("Save"));
+  });
+  await waitFor(() =>
+    expect(mockInvoke).toHaveBeenCalledWith("write_file_text", expect.anything()),
+  );
+  return onDisk;
+}
+
+describe("yaml tree viewer (#yaml)", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    setup();
+  });
+
+  it("opens a .yaml file in the tree, not in the editor", async () => {
+    await renderYaml();
+    // Structure, not source: keys are rows, values are inputs.
+    expect(screen.getByRole("button", { name: "Collapse server" })).toBeTruthy();
+    expect((screen.getByLabelText("Value of port") as HTMLInputElement).value).toBe("8080");
+    expect((screen.getByLabelText("Value of host") as HTMLInputElement).value).toBe("0.0.0.0");
+    // The scalar-only list is one comma line; the commented one renders its
+    // items, indexed.
+    expect((screen.getByLabelText("Value of tags") as HTMLInputElement).value).toBe("web, prod");
+    expect((screen.getByLabelText("Value of item 0") as HTMLInputElement).value).toBe("/data");
+  });
+
+  it("edits a value and saves it, leaving the comments and the rest of the file alone", async () => {
+    await renderYaml();
+    const port = screen.getByLabelText("Value of port") as HTMLInputElement;
+    await act(async () => {
+      fireEvent.change(port, { target: { value: "9090" } });
+      fireEvent.keyDown(port, { key: "Enter" });
+    });
+
+    expect(await saveAndRead()).toBe(CONFIG.replace("port: 8080", "port: 9090"));
+  });
+
+  it("adds a key with the type the user picked", async () => {
+    await renderYaml();
+    // "+ key" on the `server` mapping (the other one is the document's own, at
+    // the foot of the tree).
+    await act(async () => {
+      fireEvent.click(screen.getAllByTitle("Add a key under this entry")[0]);
+    });
+    await act(async () => {
+      fireEvent.change(screen.getByLabelText("New key"), { target: { value: "workers" } });
+      fireEvent.change(screen.getByLabelText("Value type"), { target: { value: "number" } });
+      fireEvent.change(screen.getByLabelText("New value"), { target: { value: "4" } });
+      fireEvent.click(screen.getByRole("button", { name: "Add" }));
+    });
+
+    const saved = await saveAndRead();
+    expect(saved).toContain("    - /home\n  workers: 4\ndebug: false");
+    expect(saved).toContain("# Server configuration");
+  });
+
+  it("adds a list item", async () => {
+    await renderYaml();
+    await act(async () => {
+      fireEvent.click(screen.getByTitle("Add an item to this list"));
+    });
+    await act(async () => {
+      fireEvent.change(screen.getByLabelText("New value"), { target: { value: "/srv" } });
+      fireEvent.click(screen.getByRole("button", { name: "Add" }));
+    });
+
+    expect(await saveAndRead()).toContain("    - /home\n    - /srv\n");
+  });
+
+  it("adds a copy of the last list item when Copy last is chosen", async () => {
+    await renderYaml();
+    await act(async () => {
+      fireEvent.click(screen.getByTitle("Add an item to this list"));
+    });
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: "Copy last" }));
+    });
+    // The last mount (`/home`) is duplicated verbatim, at the list's own indent.
+    expect(await saveAndRead()).toContain("    - /data  # scratch\n    - /home\n    - /home\n");
+  });
+
+  it("shows a scalar-only list as one editable comma line, not as item rows", async () => {
+    await renderYaml();
+    const tags = screen.getByLabelText("Value of tags") as HTMLInputElement;
+    expect(tags.value).toBe("web, prod");
+    // The line IS the list: no count on its row, no per-item rows of its own
+    // (the only item rows on screen are `mounts`', which stays rows).
+    expect(tags.closest(".yaml-row")!.querySelector(".yaml-count")).toBeNull();
+    expect(screen.queryByLabelText("Value of item 2")).toBeNull();
+
+    // Editing the line edits the list — items land as ordinary block lines.
+    await act(async () => {
+      fireEvent.change(tags, { target: { value: "web, staging, prod" } });
+      fireEvent.keyDown(tags, { key: "Enter" });
+    });
+    expect(await saveAndRead()).toContain("  tags:\n    - web\n    - staging\n    - prod\n");
+  });
+
+  it("edits a flow list on its comma line, keeping its style and its quoting", async () => {
+    onDisk = 'tags: ["web", prod]  # labels\n';
+    vi.resetModules();
+    const { FileViewerPane } = await import("../components/embed/FileViewerPane");
+    await act(async () => {
+      render(<FileViewerPane viewer="yaml" path="/p/flowlist.yaml" projectId="proj" />);
+    });
+    await toTree();
+
+    const tags = (await screen.findByLabelText("Value of tags")) as HTMLInputElement;
+    expect(tags.value).toBe("web, prod");
+    await act(async () => {
+      fireEvent.change(tags, { target: { value: "prod, web, extra" } });
+      fireEvent.keyDown(tags, { key: "Enter" });
+    });
+
+    // Stays flow; `web` keeps the quotes it was written with, the new value is
+    // written as typed, and the comment behind the bracket survives.
+    expect(await saveAndRead()).toBe('tags: [prod, "web", extra]  # labels\n');
+  });
+
+  it("gives an open list a persistent add row at its end, not just a hover action", async () => {
+    await renderYaml();
+    const addItem = screen.getByTitle("Add an item to this list");
+    // It lives in the always-visible add row at the end of the list's children,
+    // not in the header row's hover-only actions.
+    expect(addItem.closest(".yaml-row-add")).not.toBeNull();
+    expect(addItem.closest(".yaml-actions")).toBeNull();
+  });
+
+  it("renames a key without touching its value or its comment", async () => {
+    await renderYaml();
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: /^host/ }));
+    });
+    const input = screen.getByLabelText("Rename key host") as HTMLInputElement;
+    await act(async () => {
+      fireEvent.change(input, { target: { value: "bind" } });
+      fireEvent.keyDown(input, { key: "Enter" });
+    });
+
+    expect(await saveAndRead()).toContain("  bind: 0.0.0.0   # bind address");
+  });
+
+  it("shows a key's comment on the key, and writes an edited one back", async () => {
+    await renderYaml();
+    // Hovering the key is what surfaces it — on the key itself, both ways round: the
+    // comment behind `host`, and the one written above `server`.
+    expect(screen.getByRole("button", { name: /^host/ }).title).toBe("# bind address");
+    expect(screen.getByRole("button", { name: /^server/ }).title).toBe("# Server configuration");
+    // `port` has none, so it keeps the rename hint.
+    expect(screen.getByRole("button", { name: /^port/ }).title).toBe("Click to rename this key");
+
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText("Comment on port"));
+    });
+    const input = screen.getByLabelText("Comment on port") as HTMLInputElement;
+    await act(async () => {
+      fireEvent.change(input, { target: { value: "the port to listen on" } });
+      fireEvent.keyDown(input, { key: "Enter" });
+    });
+
+    const saved = await saveAndRead();
+    expect(saved).toContain("  port: 8080  # the port to listen on\n");
+    // Written behind the value, so nothing else on the file moved.
+    expect(saved).toContain("  host: 0.0.0.0   # bind address\n");
+  });
+
+  it("adds a mapping item when a list is given a key", async () => {
+    await renderYaml();
+    await act(async () => {
+      fireEvent.click(screen.getByTitle("Add an item that is a mapping (- key: value)"));
+    });
+    await act(async () => {
+      fireEvent.change(screen.getByLabelText("New key"), { target: { value: "name" } });
+      fireEvent.change(screen.getByLabelText("New value"), { target: { value: "eu" } });
+      fireEvent.click(screen.getByRole("button", { name: "Add" }));
+    });
+
+    expect(await saveAndRead()).toContain("    - /home\n    - name: eu\ndebug: false");
+  });
+
+  it("reorders siblings by dragging one onto another", async () => {
+    await renderYaml();
+    // Drag `item 0` (/data) down onto `item 1` (/home). The rows report no geometry
+    // in jsdom, so the drop lands on the last row whose top the pointer has passed —
+    // which with every rect at 0 is the last sibling, i.e. exactly this move.
+    const grip = screen.getByLabelText("Reorder item 0");
+    await act(async () => {
+      fireEvent.pointerDown(grip, { pointerId: 1 });
+      fireEvent.pointerMove(grip, { pointerId: 1, clientY: 200 });
+      fireEvent.pointerUp(grip, { pointerId: 1 });
+    });
+
+    // The item's comment travels with it.
+    expect(await saveAndRead()).toContain("  mounts:\n    - /home\n    - /data  # scratch\n");
+  });
+
+  it("deletes an entry with everything under it, comment included", async () => {
+    await renderYaml();
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText("Delete server"));
+    });
+
+    // "# Server configuration" is `server`'s comment — left behind, it would end up
+    // sitting above `debug` and describing that instead.
+    expect(await saveAndRead()).toBe("debug: false\n");
+  });
+
+  it("reorders list items", async () => {
+    await renderYaml();
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText("Move item 1 up"));
+    });
+
+    expect(await saveAndRead()).toContain("  mounts:\n    - /home\n    - /data  # scratch\n");
+  });
+
+  it("shows the same text in Source, and a tree edit is an ordinary undo step", async () => {
+    await renderYaml();
+    const port = screen.getByLabelText("Value of port") as HTMLInputElement;
+    await act(async () => {
+      fireEvent.change(port, { target: { value: "9090" } });
+      fireEvent.keyDown(port, { key: "Enter" });
+    });
+
+    // Source shows the tree's edit — one draft, two views.
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: "Source" }));
+    });
+    const textarea = (await screen.findByRole("textbox")) as HTMLTextAreaElement;
+    expect(textarea.value).toContain("port: 9090");
+
+    // And the edit undoes like a typed one.
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText("Undo"));
+    });
+    expect((screen.getByRole("textbox") as HTMLTextAreaElement).value).toContain("port: 8080");
+  });
+
+  it("renders a JSON-formatted .yml as a tree, not as one opaque `{` row", async () => {
+    // The regression this whole flow layer exists for: a flow collection spread
+    // over lines used to parse as a single un-editable scalar whose text was the
+    // opening brace.
+    onDisk = "# app\nservice: {\n  name: api,\n  port: 8080\n}\n";
+    vi.resetModules();
+    const { FileViewerPane } = await import("../components/embed/FileViewerPane");
+    await act(async () => {
+      render(<FileViewerPane viewer="yaml" path="/p/flow.yaml" projectId="proj" />);
+    });
+    await toTree();
+
+    const port = (await screen.findByLabelText("Value of port")) as HTMLInputElement;
+    expect(port.value).toBe("8080");
+    await act(async () => {
+      fireEvent.change(port, { target: { value: "9090" } });
+      fireEvent.keyDown(port, { key: "Enter" });
+    });
+
+    // The edit lands inside the flow collection; the layout and comment survive.
+    expect(await saveAndRead()).toBe("# app\nservice: {\n  name: api,\n  port: 9090\n}\n");
+  });
+
+  it("edits a .json file in the same tree, writing the strict dialect", async () => {
+    onDisk = '{\n  "name": "app",\n  "keywords": []\n}\n';
+    vi.resetModules();
+    const { FileViewerPane } = await import("../components/embed/FileViewerPane");
+    await act(async () => {
+      render(<FileViewerPane viewer="yaml" path="/p/package.json" projectId="proj" />);
+    });
+    await toTree();
+
+    // A list item added to a JSON file comes out quoted — JSON has no plain scalars.
+    await act(async () => {
+      fireEvent.click(await screen.findByTitle("Add an item to this list"));
+    });
+    await act(async () => {
+      fireEvent.change(screen.getByLabelText("New value"), { target: { value: "cli" } });
+      fireEvent.click(screen.getByRole("button", { name: "Add" }));
+    });
+
+    expect(await saveAndRead()).toBe('{\n  "name": "app",\n  "keywords": ["cli"]\n}\n');
+  });
+
+  it("marks a container's whole substructure while its row is hovered", async () => {
+    await renderYaml();
+    const serverRow = rowOf(screen.getByRole("button", { name: /^server/ }));
+    await act(async () => {
+      fireEvent.mouseOver(serverRow);
+    });
+    // Every descendant row is marked, to full depth (mounts' items are two down)…
+    expect(rowOf(screen.getByLabelText("Value of port")).className).toContain("yaml-row-marked");
+    expect(rowOf(screen.getByLabelText("Value of item 0")).className).toContain(
+      "yaml-row-marked",
+    );
+    // …and a sibling outside the block is not.
+    expect(rowOf(screen.getByRole("button", { name: /^debug/ })).className).not.toContain(
+      "yaml-row-marked",
+    );
+
+    await act(async () => {
+      fireEvent.mouseOut(serverRow);
+    });
+    expect(rowOf(screen.getByLabelText("Value of port")).className).not.toContain(
+      "yaml-row-marked",
+    );
+  });
+
+  it("tints the substructure in danger while a container's delete is hovered", async () => {
+    await renderYaml();
+    await act(async () => {
+      fireEvent.mouseOver(screen.getByLabelText("Delete server"));
+    });
+    // Everything tinted is what the × will take.
+    expect(rowOf(screen.getByLabelText("Value of port")).className).toContain(
+      "yaml-row-marked-del",
+    );
+    expect(rowOf(screen.getByLabelText("Value of item 0")).className).toContain(
+      "yaml-row-marked-del",
+    );
+  });
+
+  it("tints the substructure with the accent while a container's copy is hovered", async () => {
+    await renderYaml();
+    await act(async () => {
+      fireEvent.mouseOver(screen.getByLabelText("Copy server"));
+    });
+    // Everything tinted is what the ⧉ will capture — the whole entry, not one row.
+    expect(rowOf(screen.getByLabelText("Value of port")).className).toContain(
+      "yaml-row-marked-act",
+    );
+    expect(rowOf(screen.getByLabelText("Value of item 0")).className).toContain(
+      "yaml-row-marked-act",
+    );
+  });
+
+  it("colors the comma line's entries as their own rows would", async () => {
+    onDisk = 'mix: ["8080", 9090, true, web]\n';
+    vi.resetModules();
+    const { FileViewerPane } = await import("../components/embed/FileViewerPane");
+    await act(async () => {
+      render(<FileViewerPane viewer="yaml" path="/p/mix.yaml" projectId="proj" />);
+    });
+    await toTree();
+
+    const input = (await screen.findByLabelText("Value of mix")) as HTMLInputElement;
+    const mirror = input.closest(".yaml-list-field")!.querySelector(".yaml-list-mirror")!;
+    const tone = (cls: string) =>
+      Array.from(mirror.querySelectorAll(`.yaml-val-${cls}`)).map((s) => s.textContent?.trim());
+    // The quoted "8080" is toned by its NODE — a string, exactly as its row
+    // would show it — while the bare 9090 is a number.
+    expect(tone("string")).toEqual(["8080", "web"]);
+    expect(tone("number")).toEqual(["9090"]);
+    expect(tone("boolean")).toEqual(["true"]);
+
+    // Typing recolors live: a new bare number reads as one.
+    await act(async () => {
+      fireEvent.change(input, { target: { value: "8080, 9090, true, web, 7" } });
+    });
+    expect(tone("number")).toEqual(["9090", "7"]);
+  });
+
+  it("offers chevrons that glide an overflowing comma line while hovered", async () => {
+    await renderYaml();
+    const tags = screen.getByLabelText("Value of tags") as HTMLInputElement;
+    // No overflow, no chevrons.
+    expect(screen.queryByLabelText("Scroll tags right")).toBeNull();
+
+    // jsdom reports no geometry, so give the input some: content wider than the
+    // field. The scroll listener re-measures and the chevrons appear.
+    Object.defineProperty(tags, "scrollWidth", { value: 400, configurable: true });
+    Object.defineProperty(tags, "clientWidth", { value: 100, configurable: true });
+    await act(async () => {
+      fireEvent.scroll(tags);
+    });
+
+    // At the left edge only the right chevron is live.
+    expect((screen.getByLabelText("Scroll tags left") as HTMLButtonElement).disabled).toBe(true);
+    const right = screen.getByLabelText("Scroll tags right") as HTMLButtonElement;
+    expect(right.disabled).toBe(false);
+
+    // Hovering it glides the content; leaving stops the glide.
+    await act(async () => {
+      fireEvent.mouseOver(right);
+      await new Promise((r) => setTimeout(r, 120));
+      fireEvent.mouseOut(right);
+    });
+    const moved = tags.scrollLeft;
+    expect(moved).toBeGreaterThan(0);
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 60));
+    });
+    expect(tags.scrollLeft).toBe(moved);
+  });
+
+  it("keeps a construct it cannot rewrite out of reach instead of offering a bad edit", async () => {
+    onDisk = "base: &base\n  a: 1\nchild:\n  <<: *base\n";
+    vi.resetModules();
+    const { FileViewerPane } = await import("../components/embed/FileViewerPane");
+    await act(async () => {
+      render(<FileViewerPane viewer="yaml" path="/p/anchors.yaml" projectId="proj" />);
+    });
+    await toTree();
+
+    // The anchored mapping and the merge key both render, but as text with no
+    // input behind them.
+    expect(await screen.findAllByText("source only")).toHaveLength(2);
+    expect(screen.queryByLabelText("Value of <<")).toBeNull();
+  });
+});
+
+describe("copy & paste cursor (#yaml)", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    setup();
+  });
+
+  it("copies an entry to the buffer and the system clipboard, and says so", async () => {
+    const writeText = vi.fn(() => Promise.resolve());
+    Object.defineProperty(navigator, "clipboard", { value: { writeText }, configurable: true });
+    await renderYaml();
+
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText("Copy port"));
+    });
+
+    // The buffer drives the banner; the clipboard gets the entry as text.
+    expect(screen.getByText(/Copied/)).toBeTruthy();
+    expect(writeText).toHaveBeenCalledWith("port: 8080");
+  });
+
+  it("places the cursor on a compatible row and pastes there", async () => {
+    await renderYaml();
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText("Copy port"));
+    });
+
+    // Click the `debug` row itself (not one of its controls): the cursor line and
+    // its paste button appear right after it.
+    await act(async () => {
+      fireEvent.click(rowOf(screen.getByRole("button", { name: /^debug/ })));
+    });
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: "paste port here" }));
+    });
+
+    // Pasted as `debug`'s next sibling at its column; nothing else moved.
+    expect(await saveAndRead()).toBe(CONFIG.replace("debug: false\n", "debug: false\nport: 8080\n"));
+  });
+
+  it("pastes a copied list item after another list item", async () => {
+    await renderYaml();
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText("Copy item 0"));
+    });
+    await act(async () => {
+      fireEvent.click(rowOf(screen.getByLabelText("Value of item 1")));
+    });
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: "paste item 0 here" }));
+    });
+
+    expect(await saveAndRead()).toContain(
+      "    - /data  # scratch\n    - /home\n    - /data  # scratch\n",
+    );
+  });
+
+  it("refuses the cursor where the entry does not fit", async () => {
+    await renderYaml();
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText("Copy port")); // a `key: value` entry
+    });
+
+    // A list item's row can't take a mapping entry: no cursor, no paste button.
+    const itemRow = rowOf(screen.getByLabelText("Value of item 0"));
+    expect(itemRow.className).not.toContain("yaml-row-pastable");
+    await act(async () => {
+      fireEvent.click(itemRow);
+    });
+    expect(screen.queryByRole("button", { name: /^paste/ })).toBeNull();
+  });
+
+  it("Escape clears the cursor and then the buffer", async () => {
+    await renderYaml();
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText("Copy port"));
+    });
+    await act(async () => {
+      fireEvent.click(rowOf(screen.getByRole("button", { name: /^debug/ })));
+    });
+    expect(screen.getByRole("button", { name: "paste port here" })).toBeTruthy();
+
+    await act(async () => {
+      fireEvent.keyDown(window, { key: "Escape" });
+    });
+    expect(screen.queryByRole("button", { name: "paste port here" })).toBeNull();
+    expect(screen.queryByText(/Copied/)).toBeNull();
+  });
+});
+
+describe("card view (#yaml-grid)", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    setup();
+  });
+
+  async function renderCards() {
+    vi.resetModules();
+    const { FileViewerPane } = await import("../components/embed/FileViewerPane");
+    await act(async () => {
+      render(<FileViewerPane viewer="yaml" path="/p/config.yaml" projectId="proj" />);
+    });
+    // YAML opens in Tree now — switch to Cards first. The grid is a drill
+    // navigation, not a recursive nest: the overview shows only the root
+    // "document" card. Open it to reach `server`'s own level, which renders
+    // `server`'s scalar fields (host, port) inline.
+    await act(async () => {
+      fireEvent.click(await screen.findByRole("button", { name: "Cards" }));
+    });
+    await act(async () => {
+      fireEvent.click(await screen.findByRole("button", { name: "Open document" }));
+    });
+    await screen.findByLabelText("Value of port");
+  }
+
+  it("opens a structured .yaml file in the tree view by default", async () => {
+    vi.resetModules();
+    const { FileViewerPane } = await import("../components/embed/FileViewerPane");
+    await act(async () => {
+      render(<FileViewerPane viewer="yaml" path="/p/config.yaml" projectId="proj" />);
+    });
+    // Tree is the default: tree rows render, no cards, and the Cards toggle is
+    // present (the file nests something to card) but not active.
+    await screen.findByRole("button", { name: "Collapse server" });
+    expect((screen.getByRole("button", { name: "Tree" }) as HTMLButtonElement).getAttribute("aria-pressed")).toBe("true");
+    expect((screen.getByRole("button", { name: "Cards" }) as HTMLButtonElement).getAttribute("aria-pressed")).toBe("false");
+    expect(document.querySelector(".yaml-row")).not.toBeNull();
+    expect(document.querySelector(".yaml-card")).toBeNull();
+  });
+
+  it("switches to the card view, drilling into records", async () => {
+    await renderCards();
+    // The Cards toggle is now active, and cards (not tree rows) render.
+    expect((screen.getByRole("button", { name: "Cards" }) as HTMLButtonElement).getAttribute("aria-pressed")).toBe("true");
+    expect(document.querySelector(".yaml-card")).not.toBeNull();
+    expect(document.querySelector(".yaml-row")).toBeNull();
+    // A nested collection is a subcard, a scalar is an editable field.
+    expect(screen.getByRole("button", { name: "Open server" })).toBeTruthy();
+    expect((screen.getByLabelText("Value of port") as HTMLInputElement).value).toBe("8080");
+  });
+
+  it("edits a card field back into the file, comments intact", async () => {
+    await renderCards();
+    const port = screen.getByLabelText("Value of port") as HTMLInputElement;
+    await act(async () => {
+      fireEvent.change(port, { target: { value: "9090" } });
+      fireEvent.keyDown(port, { key: "Enter" });
+    });
+    const saved = await saveAndRead();
+    expect(saved).toContain("port: 9090");
+    expect(saved).toContain("# Server configuration");
+  });
+
+  it("reorders sibling cards by dragging one onto another", async () => {
+    await renderCards();
+    // `server` holds subcards `tags` then `mounts` — drill into `server` to reach
+    // them as its own level. Drag `mounts` onto `tags`: with every rect at 0 in
+    // jsdom the pointer lands on the first sibling, so mounts moves up before tags.
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: "Open server" }));
+    });
+    const grip = await screen.findByLabelText("Reorder mounts");
+    await act(async () => {
+      fireEvent.pointerDown(grip, { pointerId: 1 });
+      fireEvent.pointerMove(grip, { pointerId: 1, clientX: 0, clientY: 0 });
+      fireEvent.pointerUp(grip, { pointerId: 1 });
+    });
+    // mounts (with its item comment) now precedes tags; nothing else moved.
+    expect(await saveAndRead()).toContain(
+      "  port: 8080\n  mounts:\n    - /data  # scratch\n    - /home\n  tags:\n    - web\n    - prod\n",
+    );
+  });
+
+  it("names a list item card by its name-ish field, not #0", async () => {
+    // Root is a map (one key, `services`), so reaching the two service items
+    // means drilling document → services.
+    onDisk = "services:\n  - name: web\n    port: 8080\n  - name: db\n    port: 5432\n";
+    vi.resetModules();
+    const { FileViewerPane } = await import("../components/embed/FileViewerPane");
+    await act(async () => {
+      render(<FileViewerPane viewer="yaml" path="/p/svc.yaml" projectId="proj" />);
+    });
+    // YAML opens in Tree — switch to Cards first.
+    await act(async () => {
+      fireEvent.click(await screen.findByRole("button", { name: "Cards" }));
+    });
+    await act(async () => {
+      fireEvent.click(await screen.findByRole("button", { name: "Open document" }));
+    });
+    await act(async () => {
+      fireEvent.click(await screen.findByRole("button", { name: "Open services" }));
+    });
+    // Cards titled by their `name` field, not `Item N`/`#0`. Neither item has a
+    // nested collection, so its title is static text, not a drill button.
+    expect(await screen.findByText("web")).toBeTruthy();
+    expect(screen.getByText("db")).toBeTruthy();
+    expect(screen.queryByText("Item 1")).toBeNull();
+    expect(screen.queryByText("#0")).toBeNull();
+  });
+});
diff --git a/src/__tests__/gpu.test.ts b/src/__tests__/gpu.test.ts
new file mode 100644
index 0000000..0d8527c
--- /dev/null
+++ b/src/__tests__/gpu.test.ts
@@ -0,0 +1,162 @@
+import { describe, expect, it } from "vitest";
+import {
+  formatBytes,
+  formatFan,
+  formatMhz,
+  formatTempC,
+  formatWatts,
+  gpuAdapterTooltip,
+  gpuBusy,
+  gpuLinkLabel,
+  gpuPercent,
+  gpuTone,
+  gpuTooltip,
+  gpuTotals,
+  type GpuSample,
+} from "../lib/gpu";
+
+/** The machine this was built on: a Strix APU — a 512 MB carve-out + a 61 GB GTT pool. */
+const apu: GpuSample = {
+  name: "Strix [Radeon 880M / 890M]",
+  driver: "amdgpu",
+  vram_used: 440_770_560,
+  vram_total: 536_870_912,
+  shared_used: 18_052_190_208,
+  shared_total: 65_855_619_072,
+  busy_percent: 95,
+};
+
+/** A discrete card: all its memory is its own, and there is no shared pool. */
+const dgpu: GpuSample = {
+  name: "NVIDIA GeForce RTX 4090",
+  driver: "nvidia",
+  vram_used: 8 * 1024 ** 3,
+  vram_total: 24 * 1024 ** 3,
+  shared_used: 0,
+  shared_total: 0,
+  busy_percent: 37,
+};
+
+describe("gpuTotals", () => {
+  it("sums both pools, which is the only figure an APU can answer 'will it fit?' with", () => {
+    const { used, total } = gpuTotals([apu]);
+    expect(used).toBe(apu.vram_used + apu.shared_used);
+    expect(total).toBe(apu.vram_total + apu.shared_total);
+    // The dedicated pool alone would read 82% full and never move.
+    expect(gpuPercent(apu.vram_used, apu.vram_total)).toBeGreaterThan(80);
+    expect(gpuPercent(used, total)).toBeLessThan(30);
+  });
+
+  it("collapses to plain device VRAM on a discrete card", () => {
+    expect(gpuTotals([dgpu])).toEqual({ used: 8 * 1024 ** 3, total: 24 * 1024 ** 3 });
+  });
+
+  it("sums across adapters, and is zero for none", () => {
+    expect(gpuTotals([apu, dgpu]).total).toBe(
+      apu.vram_total + apu.shared_total + dgpu.vram_total,
+    );
+    expect(gpuTotals([])).toEqual({ used: 0, total: 0 });
+  });
+});
+
+describe("gpuTone", () => {
+  it("tones by ratio, so a big-but-empty GPU is not 'hot'", () => {
+    // 8 GB in use — the old absolute thresholds (hot at 2 GB) called this high.
+    expect(gpuTone(8 * 1024 ** 3, 24 * 1024 ** 3)).toBe("low");
+    expect(gpuTone(15 * 1024 ** 3, 24 * 1024 ** 3)).toBe("medium");
+    expect(gpuTone(23 * 1024 ** 3, 24 * 1024 ** 3)).toBe("high");
+  });
+
+  it("does not divide by a total it does not have", () => {
+    expect(gpuTone(0, 0)).toBe("low");
+    expect(gpuPercent(1024, 0)).toBe(0);
+  });
+});
+
+describe("gpuBusy", () => {
+  it("takes the busiest adapter, and distinguishes unknown from idle", () => {
+    expect(gpuBusy([apu, dgpu])).toBe(95);
+    expect(gpuBusy([{ ...dgpu, busy_percent: null }])).toBeNull();
+    expect(gpuBusy([{ ...dgpu, busy_percent: 0 }])).toBe(0);
+    expect(gpuBusy([])).toBeNull();
+  });
+});
+
+describe("gpuTooltip", () => {
+  it("keeps the pools apart and names Ollama's share", () => {
+    const tip = gpuTooltip([apu], 3 * 1024 ** 3);
+    expect(tip).toContain("Strix [Radeon 880M / 890M] — 95% busy");
+    expect(tip).toContain("VRAM    420 MB / 512 MB");
+    expect(tip).toContain("Shared  16.8 GB / 61.3 GB");
+    expect(tip).toContain("Ollama models: 3.0 GB");
+  });
+
+  it("omits the shared line for a card that has no shared pool", () => {
+    expect(gpuTooltip([dgpu], 0)).not.toContain("Shared");
+  });
+});
+
+describe("formatBytes", () => {
+  it("reads MB below a GiB and GB above it", () => {
+    expect(formatBytes(0)).toBe("0 B");
+    expect(formatBytes(536_870_912)).toBe("512 MB");
+    expect(formatBytes(18_052_190_208)).toBe("16.8 GB");
+  });
+});
+
+describe("sensor formatters", () => {
+  it("returns null for an unknown reading rather than a fake zero", () => {
+    expect(formatTempC(null)).toBeNull();
+    expect(formatTempC(undefined)).toBeNull();
+    expect(formatWatts(null)).toBeNull();
+    expect(formatMhz(null)).toBeNull();
+    expect(formatFan(undefined)).toBeNull();
+    // A real zero is a value, not "unknown".
+    expect(formatFan(0)).toBe("0%");
+    expect(formatTempC(0)).toBe("0 °C");
+  });
+
+  it("formats each unit, and power against its cap when known", () => {
+    expect(formatTempC(58.4)).toBe("58 °C");
+    expect(formatWatts(210.5)).toBe("211 W");
+    expect(formatWatts(210.5, 450)).toBe("211 / 450 W");
+    expect(formatMhz(2520)).toBe("2.52 GHz");
+    expect(formatMhz(96)).toBe("96 MHz");
+    expect(formatFan(41)).toBe("41%");
+  });
+});
+
+describe("gpuLinkLabel", () => {
+  it("joins gen and width, and drops whichever half is unknown", () => {
+    expect(gpuLinkLabel({ ...dgpu, pcie_gen: 4, pcie_width: 16 })).toBe("PCIe 4.0 ×16");
+    expect(gpuLinkLabel({ ...dgpu, pcie_gen: 3, pcie_width: null })).toBe("PCIe 3.0");
+    expect(gpuLinkLabel({ ...dgpu, pcie_gen: null, pcie_width: 8 })).toBe("×8");
+    expect(gpuLinkLabel(dgpu)).toBeNull();
+  });
+});
+
+describe("gpuAdapterTooltip sensors", () => {
+  it("appends only the sensors the driver reported", () => {
+    const tip = gpuAdapterTooltip({
+      ...dgpu,
+      temp_c: 61,
+      power_w: 210,
+      power_cap_w: 450,
+      sclk_mhz: 2520,
+      mclk_mhz: 10501,
+      pcie_gen: 4,
+      pcie_width: 16,
+    });
+    expect(tip).toContain("Temp    61 °C");
+    expect(tip).toContain("Power   210 / 450 W");
+    expect(tip).toContain("Clocks  2.52 GHz / 10.50 GHz");
+    expect(tip).toContain("Link    PCIe 4.0 ×16");
+  });
+
+  it("reads exactly as before for a card that exposes no sensors", () => {
+    // The APU/dGPU fixtures carry no sensor fields — the tooltip must not sprout
+    // empty sensor rows.
+    expect(gpuAdapterTooltip(dgpu)).not.toContain("Temp");
+    expect(gpuAdapterTooltip(dgpu)).not.toContain("Link");
+  });
+});
diff --git a/src/__tests__/i18n.test.ts b/src/__tests__/i18n.test.ts
new file mode 100644
index 0000000..73bb696
--- /dev/null
+++ b/src/__tests__/i18n.test.ts
@@ -0,0 +1,44 @@
+import { describe, it, expect } from "vitest";
+import { translate, normalizeLang, LANGUAGES } from "../lib/i18n";
+
+describe("i18n", () => {
+  it("translates a known key per language", () => {
+    expect(translate("en", "settings.title")).toBe("Settings");
+    expect(translate("de", "settings.title")).toBe("Einstellungen");
+    expect(translate("es", "settings.title")).toBe("Configuración");
+    expect(translate("fr", "settings.title")).toBe("Paramètres");
+    expect(translate("it", "settings.title")).toBe("Impostazioni");
+  });
+
+  it("falls back to English when a language lacks a key", () => {
+    // `translate` with a made-up key returns the raw key (last-resort fallback),
+    // and every real key present in `en` resolves in every language via fallback.
+    // Spot-check the fallback path by asking a language for the base value: even
+    // if a future key is added to `en` only, non-English still renders English,
+    // never a blank.
+    const enTitle = translate("en", "settings.title");
+    for (const { value } of LANGUAGES) {
+      expect(translate(value, "settings.title").length).toBeGreaterThan(0);
+    }
+    expect(enTitle).toBe("Settings");
+  });
+
+  it("substitutes {name} placeholders", () => {
+    // No parameterized keys ship yet, but the substitution contract is public.
+    expect(
+      translate("en", "settings.title", { unused: "x" }),
+    ).toBe("Settings");
+  });
+
+  it("normalizes unknown/empty language codes to English", () => {
+    expect(normalizeLang("de")).toBe("de");
+    expect(normalizeLang("xx")).toBe("en");
+    expect(normalizeLang("")).toBe("en");
+    expect(normalizeLang(null)).toBe("en");
+    expect(normalizeLang(undefined)).toBe("en");
+  });
+
+  it("offers exactly the five supported languages", () => {
+    expect(LANGUAGES.map((l) => l.value)).toEqual(["en", "de", "es", "fr", "it"]);
+  });
+});
diff --git a/src/__tests__/table.test.ts b/src/__tests__/table.test.ts
index 5c92e17..ded2cde 100644
--- a/src/__tests__/table.test.ts
+++ b/src/__tests__/table.test.ts
@@ -1,5 +1,21 @@
 import { describe, it, expect } from "vitest";
-import { parseDelimited, sortRows, delimiterForPath } from "../lib/viewers/table";
+import {
+  parseDelimited,
+  parseTable,
+  sortRows,
+  sortRefs,
+  sortRefsByIndex,
+  bodyRefs,
+  filterRefs,
+  delimiterForPath,
+  sniffDelimiter,
+  resolveDelimiter,
+  encodeCell,
+  replaceCell,
+  insertRowAfter,
+  deleteRow,
+  columnWidths,
+} from "../lib/viewers/table";
 
 describe("parseDelimited — basics", () => {
   it("parses a simple comma-separated grid", () => {
@@ -170,3 +186,271 @@ describe("sortRows", () => {
     ]);
   });
 });
+
+describe("sniffDelimiter", () => {
+  it("finds the semicolon in a European-style CSV", () => {
+    expect(sniffDelimiter("name;age;city\nada;36;london\nalan;41;wilmslow")).toBe(";");
+  });
+
+  it("finds the pipe in a pipe-delimited dump", () => {
+    expect(sniffDelimiter("a|b|c\n1|2|3\n4|5|6")).toBe("|");
+  });
+
+  it("finds the tab in a TSV", () => {
+    expect(sniffDelimiter("a\tb\n1\t2\n3\t4")).toBe("\t");
+  });
+
+  it("still finds the comma in an ordinary CSV", () => {
+    expect(sniffDelimiter("a,b,c\n1,2,3")).toBe(",");
+  });
+
+  it("is not fooled by a comma inside a quoted semicolon-delimited field", () => {
+    const text = 'name;note\nada;"london, england"\nalan;"wilmslow, cheshire"';
+    expect(sniffDelimiter(text)).toBe(";");
+  });
+
+  it("prefers the delimiter that yields consistent row widths", () => {
+    // Commas appear, but only inside the prose of one column; the ; is the grid.
+    const text = "id;title\n1;a, b, c\n2;d, e\n3;f";
+    expect(sniffDelimiter(text)).toBe(";");
+  });
+
+  it("falls back when nothing splits the file (a single column)", () => {
+    expect(sniffDelimiter("alpha\nbeta\ngamma", ",")).toBe(",");
+    expect(sniffDelimiter("alpha\nbeta\ngamma", "\t")).toBe("\t");
+  });
+
+  it("falls back on an empty file", () => {
+    expect(sniffDelimiter("", ";")).toBe(";");
+  });
+});
+
+describe("resolveDelimiter", () => {
+  it("prefers the sniffed separator over the extension's guess", () => {
+    // A .csv that is really semicolon-delimited — the case that rendered as one column.
+    expect(resolveDelimiter("/x/data.csv", "a;b\n1;2")).toBe(";");
+  });
+
+  it("falls back to the extension when the content is inconclusive", () => {
+    expect(resolveDelimiter("/x/data.tsv", "onlyonecolumn\nvalue")).toBe("\t");
+    expect(resolveDelimiter("/x/data.csv", "onlyonecolumn\nvalue")).toBe(",");
+  });
+});
+
+describe("parseTable — spans", () => {
+  it("spans address each field's raw source text", () => {
+    const text = "a,b\n1,2";
+    const t = parseTable(text, ",");
+    const raw = (r: number, c: number) =>
+      text.slice(t.cells[r][c].start, t.cells[r][c].end);
+    expect(raw(0, 0)).toBe("a");
+    expect(raw(0, 1)).toBe("b");
+    expect(raw(1, 0)).toBe("1");
+    expect(raw(1, 1)).toBe("2");
+  });
+
+  it("a quoted field's span includes its quotes", () => {
+    const text = 'x,"a,b"';
+    const t = parseTable(text, ",");
+    expect(text.slice(t.cells[0][1].start, t.cells[0][1].end)).toBe('"a,b"');
+    expect(t.rows[0][1]).toBe("a,b");
+  });
+
+  it("keeps offsets absolute across a BOM, so a span splices back correctly", () => {
+    const text = "a,b";
+    const t = parseTable(text, ",");
+    expect(text.slice(t.cells[0][0].start, t.cells[0][0].end)).toBe("a");
+    expect(t.rows[0]).toEqual(["a", "b"]);
+  });
+
+  it("row spans exclude the terminator but `next` steps over it", () => {
+    const text = "a,b\r\n1,2\n";
+    const t = parseTable(text, ",");
+    expect(text.slice(t.rowSpans[0].start, t.rowSpans[0].end)).toBe("a,b");
+    expect(t.rowSpans[0].next).toBe(5); // past the CRLF
+    expect(text.slice(t.rowSpans[1].start, t.rowSpans[1].end)).toBe("1,2");
+  });
+
+  it("marks an unterminated final row by `next === end`", () => {
+    const t = parseTable("a,b\n1,2", ",");
+    expect(t.rowSpans[0].next).toBeGreaterThan(t.rowSpans[0].end); // terminated
+    expect(t.rowSpans[1].next).toBe(t.rowSpans[1].end); // ends with the file
+  });
+
+  it("reports the file's dominant newline", () => {
+    expect(parseTable("a\r\nb", ",").newline).toBe("\r\n");
+    expect(parseTable("a\nb", ",").newline).toBe("\n");
+  });
+});
+
+describe("encodeCell", () => {
+  it("leaves an unambiguous value bare", () => {
+    expect(encodeCell("plain", ",")).toBe("plain");
+  });
+
+  it("quotes a value containing the delimiter", () => {
+    expect(encodeCell("a,b", ",")).toBe('"a,b"');
+    expect(encodeCell("a,b", ";")).toBe("a,b"); // not the delimiter here
+    expect(encodeCell("a;b", ";")).toBe('"a;b"');
+  });
+
+  it("doubles embedded quotes", () => {
+    expect(encodeCell('say "hi"', ",")).toBe('"say ""hi"""');
+  });
+
+  it("quotes newlines and edge whitespace, which a reader could otherwise trim", () => {
+    expect(encodeCell("a\nb", ",")).toBe('"a\nb"');
+    expect(encodeCell(" pad ", ",")).toBe('" pad "');
+  });
+});
+
+describe("replaceCell", () => {
+  const edit = (text: string, r: number, c: number, v: string, d = ",") =>
+    replaceCell(text, parseTable(text, d), r, c, v, d);
+
+  it("rewrites only the target field's bytes", () => {
+    expect(edit("a,b\n1,2", 1, 0, "9")).toBe("a,b\n9,2");
+  });
+
+  it("leaves every other cell's quoting style untouched", () => {
+    // "b" is quoted although it needn't be; editing `a` must not re-serialise it.
+    expect(edit('a,"b"\n1,2', 0, 0, "z")).toBe('z,"b"\n1,2');
+  });
+
+  it("quotes the new value only when it needs it", () => {
+    expect(edit("a,b\n1,2", 1, 1, "x,y")).toBe('a,b\n1,"x,y"');
+  });
+
+  it("preserves CRLF line endings around the edit", () => {
+    expect(edit("a,b\r\n1,2\r\n", 1, 1, "9")).toBe("a,b\r\n1,9\r\n");
+  });
+
+  it("edits through a non-comma delimiter", () => {
+    expect(edit("a;b\n1;2", 1, 1, "9", ";")).toBe("a;b\n1;9");
+  });
+
+  it("pads a ragged row out to the column being typed into", () => {
+    // Row 1 has one field; the viewer shows it padded to 3 columns, so writing
+    // into the third must land in the third — not append to the first.
+    expect(edit("a,b,c\nx", 1, 2, "z")).toBe("a,b,c\nx,,z");
+  });
+
+  it("is a no-op for a row that does not exist", () => {
+    expect(edit("a,b", 9, 0, "z")).toBe("a,b");
+  });
+});
+
+describe("insertRowAfter / deleteRow", () => {
+  it("inserts a blank row after a terminated row", () => {
+    const text = "a,b\n1,2\n";
+    expect(insertRowAfter(text, parseTable(text, ","), 0, 2, ",")).toBe("a,b\n,\n1,2\n");
+  });
+
+  it("appends after an unterminated final row without adding a trailing blank", () => {
+    const text = "a,b\n1,2";
+    const out = insertRowAfter(text, parseTable(text, ","), 1, 2, ",");
+    expect(out).toBe("a,b\n1,2\n,");
+    // The appended row is real, and no phantom row follows it.
+    expect(parseDelimited(out, ",")).toEqual([
+      ["a", "b"],
+      ["1", "2"],
+      ["", ""],
+    ]);
+  });
+
+  it("uses the file's own newline", () => {
+    const text = "a,b\r\n1,2\r\n";
+    expect(insertRowAfter(text, parseTable(text, ","), 1, 2, ",")).toBe(
+      "a,b\r\n1,2\r\n,\r\n",
+    );
+  });
+
+  it("deletes a row with its terminator", () => {
+    const text = "a,b\n1,2\n3,4\n";
+    expect(deleteRow(text, parseTable(text, ","), 1)).toBe("a,b\n3,4\n");
+  });
+
+  it("deleting an unterminated final row takes the preceding newline instead", () => {
+    const text = "a,b\n1,2";
+    const out = deleteRow(text, parseTable(text, ","), 1);
+    expect(out).toBe("a,b");
+    expect(parseDelimited(out, ",")).toEqual([["a", "b"]]);
+  });
+});
+
+describe("filterRefs", () => {
+  const refs = bodyRefs([
+    ["name", "city"],
+    ["ada", "London"],
+    ["alan", "Wilmslow"],
+  ]);
+
+  it("keeps each row's source index, so an edit still lands on the right row", () => {
+    expect(refs.map((r) => r.index)).toEqual([1, 2]);
+    expect(filterRefs(refs, "alan")[0].index).toBe(2);
+  });
+
+  it("matches any cell, case-insensitively", () => {
+    expect(filterRefs(refs, "london").map((r) => r.cells[0])).toEqual(["ada"]);
+  });
+
+  it("a blank query matches everything", () => {
+    expect(filterRefs(refs, "   ")).toHaveLength(2);
+  });
+
+  it("returns nothing when nothing matches", () => {
+    expect(filterRefs(refs, "zzz")).toEqual([]);
+  });
+
+  it("searches only the given columns, so a hidden one cannot match", () => {
+    // Column 1 (city) is hidden: "london" must no longer pull ada's row in, or the
+    // row would appear with nothing visible on it explaining the match.
+    expect(filterRefs(refs, "london", [0])).toEqual([]);
+    expect(filterRefs(refs, "ada", [0]).map((r) => r.index)).toEqual([1]);
+  });
+
+  it("still matches on a visible column when others are hidden", () => {
+    expect(filterRefs(refs, "wilmslow", [1]).map((r) => r.index)).toEqual([2]);
+  });
+});
+
+describe("sortRefs", () => {
+  it("carries the source index through the sort", () => {
+    const refs = bodyRefs([
+      ["n"],
+      ["10"],
+      ["2"],
+    ]);
+    expect(sortRefs(refs, 0, "asc").map((r) => r.index)).toEqual([2, 1]);
+  });
+});
+
+describe("sortRefsByIndex", () => {
+  it("asc restores the file's row order after a column sort reordered it", () => {
+    const refs = bodyRefs([["n"], ["10"], ["2"], ["7"]]);
+    const byValue = sortRefs(refs, 0, "asc"); // 2, 7, 10 → indices [2, 3, 1]
+    expect(byValue.map((r) => r.index)).toEqual([2, 3, 1]);
+    expect(sortRefsByIndex(byValue, "asc").map((r) => r.index)).toEqual([1, 2, 3]);
+  });
+
+  it("desc reverses the file's row order", () => {
+    const refs = bodyRefs([["n"], ["a"], ["b"], ["c"]]);
+    expect(sortRefsByIndex(refs, "desc").map((r) => r.index)).toEqual([3, 2, 1]);
+  });
+
+  it("does not mutate its input", () => {
+    const refs = bodyRefs([["n"], ["a"], ["b"]]);
+    sortRefsByIndex(refs, "desc");
+    expect(refs.map((r) => r.index)).toEqual([1, 2]);
+  });
+});
+
+describe("columnWidths", () => {
+  it("sizes each column to its widest cell, header included", () => {
+    expect(columnWidths([["id", "description"], ["1", "short"]], 2)).toEqual([4, 11]);
+  });
+
+  it("clamps a very wide column so one essay cell can't run the table off screen", () => {
+    expect(columnWidths([["x"], ["y".repeat(500)]], 1)).toEqual([48]);
+  });
+});
diff --git a/src/components/calendar/EventDialog.tsx b/src/components/calendar/EventDialog.tsx
index 5403993..5b9f2d6 100644
--- a/src/components/calendar/EventDialog.tsx
+++ b/src/components/calendar/EventDialog.tsx
@@ -265,7 +265,7 @@ export function EventDialog({
           <h2>{creating ? "New event" : "Edit event"}</h2>
           <button type="button" className="dialog-close-btn" onClick={onClose}>×</button>
         </div>
-
+        <div className="dialog-scroll">
         {scopeAsk ? (
           /* The this-one-or-all question. It replaces the form rather than
              stacking a second modal on top of it — one decision, in place. */
@@ -581,6 +581,7 @@ export function EventDialog({
             </div>
           </div>
         )}
+        </div>
       </div>
     </div>,
     document.body,
diff --git a/src/components/common/ConnLamp.tsx b/src/components/common/ConnLamp.tsx
index 1808efe..1ac7a1a 100644
--- a/src/components/common/ConnLamp.tsx
+++ b/src/components/common/ConnLamp.tsx
@@ -8,14 +8,33 @@ import type { ConnState } from "../../stores/remoteStatus";
  *  - error      → red
  * Used both in the project dialog (next to the SSH / OpenVPN controls) and in
  * the header (the active remote project's live SSH / VPN state).
+ *
+ * `busy` is a second, **orthogonal** axis, not a fifth state: a connected host
+ * with live work on it (≥1 tmux session — see `stores/hostBusy`) pulses its
+ * green rather than sitting steady. It exists because with a fleet held open all
+ * day "connected" is the resting state and stops distinguishing anything; the
+ * pulse restores the at-a-glance answer to "where am I actually running
+ * something?". It is only honoured for `connected` — a pulsing red or orange
+ * would read as a state of the *connection*, which is what the colour already
+ * says, and `connecting` has its own (orange) pulse to stay distinct from it.
  */
-export function ConnLamp({ status, label }: { status: ConnState; label: string }) {
+export function ConnLamp({
+  status,
+  label,
+  busy,
+}: {
+  status: ConnState;
+  label: string;
+  busy?: boolean;
+}) {
+  const isBusy = busy && status === "connected";
+  const title = isBusy ? `${label}: connected, working` : `${label}: ${status}`;
   return (
     <span
-      className={`conn-lamp conn-lamp-${status}`}
+      className={`conn-lamp conn-lamp-${status}${isBusy ? " conn-lamp-busy" : ""}`}
       role="img"
-      aria-label={`${label}: ${status}`}
-      title={`${label}: ${status}`}
+      aria-label={title}
+      title={title}
     />
   );
 }
diff --git a/src/components/common/LocalLossDialog.tsx b/src/components/common/LocalLossDialog.tsx
index 90e6b9d..5f74043 100644
--- a/src/components/common/LocalLossDialog.tsx
+++ b/src/components/common/LocalLossDialog.tsx
@@ -125,8 +125,8 @@ export function LocalLossDialog() {
             <LossEntry key={`${e.ts}-${i}`} loss={e} />
           ))}
         </div>
-        <div className="local-loss-actions">
-          <button type="button" className="primary" onClick={() => void ack(activeId)}>
+        <div className="project-dialog-actions">
+          <button type="button" onClick={() => void ack(activeId)}>
             Got it
           </button>
         </div>
diff --git a/src/components/common/RemoteUsageWarningDialog.tsx b/src/components/common/RemoteUsageWarningDialog.tsx
new file mode 100644
index 0000000..e987fc5
--- /dev/null
+++ b/src/components/common/RemoteUsageWarningDialog.tsx
@@ -0,0 +1,360 @@
+import { useEffect, useMemo, useState } from "react";
+import { listen } from "@tauri-apps/api/event";
+import { useProjectsStore } from "../../stores/projects";
+import { useGlobalMachinesStore } from "../../stores/globalMachines";
+import {
+  machineKey,
+  projectHostKey,
+  useRemoteUsageStore,
+  type RemoteUsageReport,
+  type UsageTarget,
+} from "../../stores/remoteUsage";
+import { hostsForProject } from "../../lib/remoteHosts";
+import { sameTarget } from "../../lib/machineSync";
+import { PRIMARY_HOST } from "../../stores/remoteStatus";
+
+/**
+ * Host usage — CPU/load, memory, GPU, logged-in sessions and top processes (see
+ * `services::remote_usage` for the probe). It is **not** a verdict:
+ * `report.busy`/`report.reasons` are surfaced as extra context (a "may be in
+ * use" hint) but never gate anything. Note the one known false positive the hint
+ * carries: an Eldrun terminal tab already open to the same host shows up in
+ * `who` exactly like a human login.
+ *
+ * **On demand only.** It used to pop up by itself after every connect, which
+ * put a modal in front of a user who had just asked for something else. Now the
+ * *only* thing that opens it is the header Machines menu's "Remote host usage…"
+ * button (`useRemoteUsageStore.open`), and opening it rechecks every host so
+ * what's on screen is current rather than however stale the last connect's
+ * report had become.
+ *
+ * **Its subject is the machine list, not a project.** It opens from the Machines
+ * menu, so it shows a section for **every global machine, in that menu's exact
+ * order** (`stores/globalMachines`), then the active project's own hosts — the
+ * primary and any `compute_hosts` worker — that aren't already in the list. The
+ * two are matched by SSH target (`lib/machineSync`'s `sameTarget`), never by id:
+ * dropping a machine onto a project copies it by value, so `user@host:port` is
+ * the only bridge, and without that dedupe one machine would appear twice.
+ *
+ * Mounted once at the shell, like `LocalLossDialog`. Advisory, not a record of
+ * something already destroyed, so a backdrop click closes it same as any
+ * ordinary modal.
+ *
+ * The connect-time probe still runs (the backend emits a `remote-usage-report`
+ * event per project host after `remote_connect`) and this still listens for it
+ * globally, so a just-connected project's report is already cached when the
+ * button is pressed — but receiving one no longer shows anything.
+ */
+
+interface UsageReportEvent {
+  projectId: string;
+  hostId: string;
+  report: RemoteUsageReport;
+}
+
+function fmtPct(used: number, total: number): string {
+  if (total <= 0) return "?";
+  return `${Math.round((used / total) * 100)}%`;
+}
+
+/**
+ * Traffic-light tone for a CPU/GPU utilization percentage: green when the host
+ * is effectively idle (≤5%), orange up to 40%, red above — so a glance at the
+ * connect report says whether the machine is free to work on.
+ */
+type UsageTone = "green" | "orange" | "red";
+function usageTone(pct: number): UsageTone {
+  if (pct <= 5) return "green";
+  if (pct <= 40) return "orange";
+  return "red";
+}
+
+interface UserGroup {
+  user: string;
+  sessions: RemoteUsageReport["users"];
+  /** Sum of this user's `ps` `%CPU`/`%MEM` across the top-processes sample — a
+   *  login count says nothing about load (one idle `bash` vs. one `python`
+   *  pinning a core both read as "1 session"), so this is compute, not session
+   *  share. */
+  cpuPct: number;
+  memPct: number;
+}
+
+/** Collapse `who`'s per-session rows into one row per user, each carrying its
+ *  summed CPU%/MEM% from `report.topProcs` instead of a session tally. Sorted
+ *  by CPU%, busiest first — the point of the panel is spotting who's loading
+ *  the host, not roll-call order. Only the top-N processes are sampled (same
+ *  data the "Top processes" section shows), so a user's true total can be
+ *  higher than what's attributed here if their load falls outside that
+ *  sample. */
+function groupSessionsByUser(report: RemoteUsageReport): UserGroup[] {
+  const order: string[] = [];
+  const byUser = new Map<string, RemoteUsageReport["users"]>();
+  for (const s of report.users) {
+    if (!byUser.has(s.user)) {
+      order.push(s.user);
+      byUser.set(s.user, []);
+    }
+    byUser.get(s.user)!.push(s);
+  }
+  const cpuByUser = new Map<string, number>();
+  const memByUser = new Map<string, number>();
+  for (const p of report.topProcs) {
+    cpuByUser.set(p.user, (cpuByUser.get(p.user) ?? 0) + p.cpuPct);
+    memByUser.set(p.user, (memByUser.get(p.user) ?? 0) + p.memPct);
+  }
+  return order
+    .map((user) => ({
+      user,
+      sessions: byUser.get(user)!,
+      cpuPct: cpuByUser.get(user) ?? 0,
+      memPct: memByUser.get(user) ?? 0,
+    }))
+    .sort((a, b) => b.cpuPct - a.cpuPct);
+}
+
+function UsageLight({ pct }: { pct: number }) {
+  const tone = usageTone(pct);
+  return (
+    <span
+      className={`remote-usage-light is-${tone}`}
+      aria-label={`utilization ${tone}`}
+    />
+  );
+}
+
+/** One host's usage: reasons, CPU/load/memory/GPU stats, the per-user "Logged
+ *  in" table, and top processes — repeated per connected host in the combined
+ *  dialog (it used to be the dialog's whole body, back when only the primary
+ *  was ever probed). */
+function HostUsageSection({ label, report }: { label: string; report: RemoteUsageReport }) {
+  return (
+    <div className="remote-usage-host">
+      <div className="remote-usage-host-title">{label}</div>
+      {report.reasons.length > 0 && (
+        <ul className="remote-usage-reasons">
+          {report.reasons.map((r) => (
+            <li key={r}>{r}</li>
+          ))}
+        </ul>
+      )}
+      <div className="remote-usage-stats">
+        <div className="remote-usage-stat">
+          <span className="remote-usage-stat-label">CPU</span>
+          <span className="remote-usage-stat-value">
+            <UsageLight pct={report.cpuPct} />
+            {report.cpuPct.toFixed(0)}%{" "}
+            <span className="remote-usage-stat-sub">
+              ({report.cpuCount} core{report.cpuCount === 1 ? "" : "s"})
+            </span>
+          </span>
+        </div>
+        <div className="remote-usage-stat">
+          <span className="remote-usage-stat-label">Load average</span>
+          <span className="remote-usage-stat-value">
+            {report.load1.toFixed(2)}, {report.load5.toFixed(2)}, {report.load15.toFixed(2)}
+          </span>
+        </div>
+        <div className="remote-usage-stat">
+          <span className="remote-usage-stat-label">Memory</span>
+          <span className="remote-usage-stat-value">
+            {report.memUsedMb} / {report.memTotalMb} MB{" "}
+            <span className="remote-usage-stat-sub">
+              ({fmtPct(report.memUsedMb, report.memTotalMb)})
+            </span>
+          </span>
+        </div>
+        {report.gpus.map((g, i) => (
+          <div className="remote-usage-stat" key={`${g.name}-${i}`}>
+            <span className="remote-usage-stat-label">GPU{report.gpus.length > 1 ? ` ${i}` : ""}</span>
+            <span className="remote-usage-stat-value">
+              <UsageLight pct={g.utilPct} />
+              {g.utilPct.toFixed(0)}%{" "}
+              <span className="remote-usage-stat-sub">
+                ({g.memUsedMb} / {g.memTotalMb} MB · {g.name})
+              </span>
+            </span>
+          </div>
+        ))}
+      </div>
+      {/* Shown for **every** host, even with no sessions: `who` on a host reached
+          only over the pooled (non-PTY) master has no utmp entry of its own, so a
+          compute node with no interactive login is legitimately empty. The empty
+          note makes that explicit rather than dropping the section, which read as
+          "only the primary host reports logins". */}
+      <div className="remote-usage-section">
+        <div className="remote-usage-section-title">
+          Logged in{" "}
+          <span className="remote-usage-stat-sub">
+            ({report.users.length} session{report.users.length === 1 ? "" : "s"})
+          </span>
+        </div>
+        {report.users.length > 0 ? (
+          <ul className="remote-usage-users">
+            <li className="remote-usage-users-head" aria-hidden="true">
+              <span>User</span>
+              <span>CPU</span>
+              <span>Sessions</span>
+              <span>Mem</span>
+            </li>
+            {groupSessionsByUser(report).map((g) => (
+              <li key={g.user}>
+                <span className="remote-usage-user">{g.user}</span>
+                <span className="remote-usage-user-cpu">
+                  <UsageLight pct={g.cpuPct} />
+                  {g.cpuPct.toFixed(0)}%
+                </span>
+                <span className="remote-usage-user-sessions">{g.sessions.length}</span>
+                <span className="remote-usage-user-mem">{g.memPct.toFixed(0)}%</span>
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <div className="remote-usage-empty">No interactive logins on this host.</div>
+        )}
+      </div>
+      {report.topProcs.length > 0 && (
+        <div className="remote-usage-section">
+          <div className="remote-usage-section-title">Top processes</div>
+          <ul className="remote-usage-procs">
+            {report.topProcs.map((p, i) => (
+              <li key={`${p.pid}-${i}`}>
+                <span className="remote-usage-proc-cmd">{p.command}</span>
+                <span className="remote-usage-proc-user">{p.user}</span>
+                <span className="remote-usage-proc-pct">{p.cpuPct.toFixed(1)}% cpu</span>
+                <span className="remote-usage-proc-pct">{p.memPct.toFixed(1)}% mem</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function RemoteUsageWarningDialog() {
+  const activeId = useProjectsStore((s) => s.activeId);
+  const project = useProjectsStore((s) => s.projects.find((p) => p.id === activeId));
+  const machines = useGlobalMachinesStore((s) => s.machines);
+  const setReport = useRemoteUsageStore((s) => s.setReport);
+  const close = useRemoteUsageStore((s) => s.close);
+  const recheck = useRemoteUsageStore((s) => s.recheck);
+  const reports = useRemoteUsageStore((s) => s.reports);
+  const isOpen = useRemoteUsageStore((s) => s.isOpen);
+  const [rechecking, setRechecking] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    let unlisten: (() => void) | undefined;
+    void listen<UsageReportEvent>("remote-usage-report", (event) => {
+      setReport(
+        projectHostKey(event.payload.projectId, event.payload.hostId),
+        event.payload.report,
+      );
+    }).then((u) => (cancelled ? u() : (unlisten = u)));
+    return () => {
+      cancelled = true;
+      unlisten?.();
+    };
+  }, [setReport]);
+
+  // Every global machine first, in the Machines menu's own order — this dialog
+  // opens from that menu, so its list must be that list. Then the active
+  // project's own hosts (primary, then `compute_hosts` in project order, the
+  // same order the System Monitor's host picker uses), minus any whose SSH
+  // target is already a machine above: the two lists are related by
+  // `user@host:port` and nothing else, since attaching a machine to a project
+  // copies it by value rather than linking ids.
+  const targets = useMemo<UsageTarget[]>(() => {
+    const list: UsageTarget[] = machines.map((m) => ({
+      kind: "machine",
+      key: machineKey(m.id),
+      label: m.label || m.host,
+      user: m.user,
+      host: m.host,
+      port: m.port,
+    }));
+    if (project?.remote) {
+      const hostLabels = hostsForProject(project);
+      const specs = [
+        { id: PRIMARY_HOST, spec: project.remote },
+        ...(project.compute_hosts ?? []).map((w) => ({ id: w.id, spec: w })),
+      ];
+      for (const { id, spec } of specs) {
+        if (machines.some((m) => sameTarget(m, spec))) continue;
+        const label = hostLabels.find((h) => h.id === id)?.label ?? spec.host;
+        list.push({
+          kind: "projectHost",
+          key: projectHostKey(project.id, id),
+          label: `${label} — ${project.name}`,
+          projectId: project.id,
+          hostId: id,
+        });
+      }
+    }
+    return list;
+  }, [machines, project]);
+
+  // Opening is itself the request for a reading: whatever the last connect left
+  // cached is however old the session is, so every host is rechecked as the
+  // dialog appears (its sections fill in as the probes land).
+  const targetKey = targets.map((t) => t.key).join("|");
+  const runRecheck = useMemo(
+    () => () => {
+      if (targets.length === 0) return;
+      setRechecking(true);
+      void Promise.all(targets.map((t) => recheck(t))).finally(() => setRechecking(false));
+    },
+    // `targetKey` stands in for `targets` (a fresh array each render).
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [targetKey, recheck],
+  );
+  useEffect(() => {
+    if (isOpen) runRecheck();
+  }, [isOpen, runRecheck]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="modal-backdrop" onMouseDown={close}>
+      <div
+        className="project-dialog dialog-framed remote-usage-dialog"
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        <div className="settings-title-row">
+          <h2>Current remote host usage</h2>
+          <button type="button" className="dialog-close-btn" onClick={close}>×</button>
+        </div>
+        <div className="dialog-scroll">
+          <p className="remote-usage-lede">
+            {targets.length === 0
+              ? "No machines to check — add one in the Machines menu, or open a remote project."
+              : `Load, memory and logged-in sessions on ${
+                  targets.length === 1 ? "1 host" : `${targets.length} hosts`
+                }, ${rechecking ? "being read now" : "as last read"} — here's what's running right now.`}
+          </p>
+          {targets.map((t) =>
+            reports[t.key] ? (
+              <HostUsageSection key={t.key} label={t.label} report={reports[t.key]} />
+            ) : (
+              <div className="remote-usage-host" key={t.key}>
+                <div className="remote-usage-host-title">{t.label}</div>
+                <div className="remote-usage-empty">
+                  {rechecking ? "Checking…" : "No reading — the host may be unreachable."}
+                </div>
+              </div>
+            ),
+          )}
+          <div className="project-dialog-actions">
+            <button type="button" onClick={runRecheck} disabled={rechecking}>
+              {rechecking ? "Rechecking…" : "Recheck"}
+            </button>
+            <button type="button" onClick={close}>
+              Got it
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/common/UntestedTag.tsx b/src/components/common/UntestedTag.tsx
new file mode 100644
index 0000000..9d3f38d
--- /dev/null
+++ b/src/components/common/UntestedTag.tsx
@@ -0,0 +1,20 @@
+/**
+ * A small "untested" tag for menu items and controls whose feature has been
+ * built but not yet live-verified in the running app. It is deliberately loud
+ * (warning-tinted) and stays put until that specific feature is confirmed
+ * working — a tag is removed per-item only when the user explicitly says that
+ * feature has been tested. Add it to every new, unverified feature.
+ *
+ * Inside a `.context-menu` button, also put `className="untested"` on the
+ * button so the label and the tag lay out in a row (the tag floats right).
+ */
+export function UntestedTag() {
+  return (
+    <span
+      className="untested-tag"
+      title="This feature is implemented but not yet live-tested"
+    >
+      untested
+    </span>
+  );
+}
diff --git a/src/components/common/VpnTunnelUpNotice.tsx b/src/components/common/VpnTunnelUpNotice.tsx
new file mode 100644
index 0000000..4cdd3db
--- /dev/null
+++ b/src/components/common/VpnTunnelUpNotice.tsx
@@ -0,0 +1,23 @@
+import { ConnLamp } from "./ConnLamp";
+
+/**
+ * What a remote dialog shows in place of its "Connect via OpenVPN" section once a
+ * tunnel is already up machine-wide (the gate is `useVpnSectionVisible`): a
+ * project-scoped VPN control has nothing left to do — the computer is already
+ * routing through a tunnel — and the header's `VpnIndicator` is where a
+ * machine-wide tunnel is managed.
+ */
+export function VpnTunnelUpNotice() {
+  return (
+    <div className="vpn-up-card" role="group" aria-label="OpenVPN tunnel">
+      <span className="toggle-card-title">
+        <ConnLamp status="connected" label="OpenVPN" />
+        OpenVPN tunnel already up
+      </span>
+      <span className="toggle-card-desc">
+        This computer already routes through a tunnel, so this project needs no
+        second one. Manage tunnels from the VPN control in the header.
+      </span>
+    </div>
+  );
+}
diff --git a/src/components/embed/CompareView.tsx b/src/components/embed/CompareView.tsx
index a6a775c..04d70dd 100644
--- a/src/components/embed/CompareView.tsx
+++ b/src/components/embed/CompareView.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { invoke } from "@tauri-apps/api/core";
 import { Dropdown } from "../common/Dropdown";
+import { UntestedTag } from "../common/UntestedTag";
 import { useProjectsStore } from "../../stores/projects";
 import { resolveProjectDirectory } from "../../types";
 import { isPathWithin } from "../../lib/paths";
@@ -12,6 +13,7 @@ import {
   buildMerged,
   applyBlockToggle,
   canToggle,
+  locateBlock,
   type AlignRow,
   type ChangeBlock,
   type Decision,
@@ -33,6 +35,10 @@ interface GitCommit {
 // Reuse the diff viewer's low-alpha add/del tints so it reads in both themes.
 const ADD_BG = "rgba(63, 185, 80, 0.15)";
 const DEL_BG = "rgba(248, 81, 73, 0.15)";
+// Sync-merge tints: the two sides are local (green) vs remote (amber), so the
+// changed lines take the locality-tag colors instead of add/del red-green.
+const LOCAL_BG = "color-mix(in srgb, var(--success) 15%, transparent)";
+const REMOTE_BG = "color-mix(in srgb, var(--warning) 15%, transparent)";
 
 /** Resolve the owning project directory for `path` exactly like `useBlame`:
  *  the longest project dir that contains the path, else the active project. */
@@ -51,7 +57,13 @@ function projectDirFor(path: string): string {
 }
 
 /** A read-only column (old or new) rendered line-by-line with per-line tinting
- *  and reused syntax highlighting. Only lines present on that side are shown. */
+ *  and reused syntax highlighting. Only lines present on that side are shown.
+ *
+ *  When merge props are supplied it also draws a per-change **take arrow** at the
+ *  first line of every change block: on the left column a "→" that pulls the left
+ *  side into the result (decision `reject`), on the right column a "←" that pulls
+ *  the right side in (decision `accept`). The arrow lights up when its side is the
+ *  one currently chosen, so each hunk shows which way it resolved at a glance. */
 function SideColumn({
   title,
   rows,
@@ -59,6 +71,12 @@ function SideColumn({
   path,
   scrollRef,
   onScroll,
+  blocks,
+  isActive,
+  onTake,
+  enabledOf,
+  onJump,
+  syncMode,
 }: {
   title: string;
   rows: AlignRow[];
@@ -66,52 +84,170 @@ function SideColumn({
   path: string;
   scrollRef: React.RefObject<HTMLDivElement>;
   onScroll: (e: React.UIEvent<HTMLDivElement>) => void;
+  /** Change blocks to anchor take-arrows against; omit to draw a plain column. */
+  blocks?: ChangeBlock[];
+  /** Sync merge: tint changed lines by locality (green local / amber remote). */
+  syncMode?: boolean;
+  /** Whether this side is the block's currently-chosen decision. */
+  isActive?: (b: ChangeBlock) => boolean;
+  /** Resolve this block to this side. */
+  onTake?: (b: ChangeBlock) => void;
+  /** Whether the block can still be (re)assigned (false once hand-edited off-anchor). */
+  enabledOf?: (b: ChangeBlock) => boolean;
+  /** Snap all panes to a block (from a ruler-bar click). */
+  onJump?: (b: ChangeBlock) => void;
 }) {
   const lang = useMemo(() => languageForPath(path), [path]);
   const lines = useMemo(() => {
-    const out: { text: string; tint: string | undefined; no: number }[] = [];
+    const out: { text: string; tint: string | undefined; no: number; ri: number }[] = [];
     let no = 0;
-    for (const r of rows) {
+    rows.forEach((r, ri) => {
       const text = side === "left" ? r.left : r.right;
-      if (text == null) continue; // absent on this side
+      if (text == null) return; // absent on this side
       no++;
-      const tint =
-        r.kind === "change"
+      const changed =
+        r.kind === "change" ||
+        (r.kind === "del" && side === "left") ||
+        (r.kind === "add" && side === "right");
+      const tint = !changed
+        ? undefined
+        : syncMode
           ? side === "left"
+            ? LOCAL_BG
+            : REMOTE_BG
+          : side === "left"
             ? DEL_BG
-            : ADD_BG
-          : r.kind === "del" && side === "left"
-            ? DEL_BG
-            : r.kind === "add" && side === "right"
-              ? ADD_BG
-              : undefined;
-      out.push({ text, tint, no });
-    }
+            : ADD_BG;
+      out.push({ text, tint, no, ri });
+    });
     return out;
-  }, [rows, side]);
+  }, [rows, side, syncMode]);
+
+  // Anchor each block's take-arrow to the first rendered line at/after its start
+  // row (clamped to the last line when this side has no line inside the block —
+  // e.g. a pure addition on the other side), keyed by line index for O(1) lookup.
+  const anchors = useMemo(() => {
+    const m = new Map<number, ChangeBlock>();
+    if (!blocks) return m;
+    for (const b of blocks) {
+      let k = lines.findIndex((l) => l.ri >= b.startRow);
+      if (k < 0) k = lines.length - 1;
+      if (k >= 0 && !m.has(k)) m.set(k, b);
+    }
+    return m;
+  }, [blocks, lines]);
+
+  // Take-arrows live in an overlay layer positioned in pixels and synced to the
+  // body's vertical scroll — NOT inline in each line, which would let a long
+  // (horizontally scrolling) line carry the arrow off-screen. LINE_H mirrors the
+  // CSS (font-size 12 × line-height 1.5). The overlay is scrolled by translating
+  // an inner layer via a ref in the scroll handler — NOT by React state, which
+  // would re-render every line on every scroll frame and make scrolling stutter.
+  const LINE_H = 18;
+  const takeScrollRef = useRef<HTMLDivElement>(null);
+  const label = side === "left" ? "Take ▶" : "◀ Take";
 
   return (
     <div className="file-viewer-compare-col">
       <div className="file-viewer-compare-col-head">{title}</div>
-      <div className="file-viewer-compare-col-body" ref={scrollRef} onScroll={onScroll}>
-        {lines.map((l, i) => {
-          const html = highlight(l.text, lang);
-          return (
-            <div className="file-viewer-compare-line" style={{ background: l.tint }} key={i}>
-              <span className="file-viewer-compare-lno">{l.no}</span>
-              {html != null ? (
-                <span className="file-viewer-compare-code" dangerouslySetInnerHTML={{ __html: html }} />
-              ) : (
-                <span className="file-viewer-compare-code">{l.text}</span>
-              )}
+      <div className="file-viewer-compare-col-body-wrap">
+        <DiffRuler blocks={blocks} totalRows={rows.length} side={side} onJump={onJump} />
+        <div
+          className="file-viewer-compare-col-body"
+          ref={scrollRef}
+          onScroll={(e) => {
+            if (takeScrollRef.current) {
+              takeScrollRef.current.style.transform = `translateY(${-e.currentTarget.scrollTop}px)`;
+            }
+            onScroll(e);
+          }}
+        >
+          {lines.map((l, i) => {
+            const html = highlight(l.text, lang);
+            const blockStart = anchors.has(i);
+            return (
+              <div
+                className={`file-viewer-compare-line${blockStart ? " is-block-start" : ""}`}
+                style={{ background: l.tint }}
+                key={i}
+              >
+                <span className="file-viewer-compare-lno">{l.no}</span>
+                {html != null ? (
+                  <span className="file-viewer-compare-code" dangerouslySetInnerHTML={{ __html: html }} />
+                ) : (
+                  <span className="file-viewer-compare-code">{l.text}</span>
+                )}
+              </div>
+            );
+          })}
+        </div>
+        {onTake && anchors.size > 0 && (
+          <div className={`file-viewer-compare-take-layer ${side}`}>
+            <div className="file-viewer-compare-take-scroll" ref={takeScrollRef}>
+              {[...anchors.entries()].map(([i, b]) => {
+                const enabled = enabledOf ? enabledOf(b) : true;
+                const active = !!isActive?.(b);
+                return (
+                  <button
+                    className={`file-viewer-compare-take ${side}${active ? " active" : ""}${enabled ? "" : " disabled"}`}
+                    key={b.id}
+                    style={{ top: i * LINE_H }}
+                    title={
+                      enabled
+                        ? side === "left"
+                          ? "Take this change from the left"
+                          : "Take this change from the right"
+                        : "Edited manually — can no longer be reassigned"
+                    }
+                    onClick={() => enabled && onTake(b)}
+                  >
+                    {label}
+                  </button>
+                );
+              })}
             </div>
-          );
-        })}
+          </div>
+        )}
       </div>
     </div>
   );
 }
 
+/** An overview ruler painted over a column's scrollbar edge: one bar per change
+ *  block, positioned by its fractional row span so the diffs are visible at a
+ *  glance across the whole file, not just the scrolled-in slice. Row-fraction
+ *  (not pixel) placement keeps the bars aligned across the three columns. Each
+ *  bar is clickable — it snaps all three panes to that resolve position. */
+function DiffRuler({
+  blocks,
+  totalRows,
+  side,
+  onJump,
+}: {
+  blocks?: ChangeBlock[];
+  totalRows: number;
+  side: "left" | "right" | "mid";
+  onJump?: (b: ChangeBlock) => void;
+}) {
+  if (!blocks || blocks.length === 0 || totalRows === 0) return null;
+  return (
+    <div className="file-viewer-compare-ruler">
+      {blocks.map((b) => (
+        <div
+          className={`file-viewer-compare-ruler-mark ${side}${onJump ? " clickable" : ""}`}
+          key={b.id}
+          title={onJump ? "Jump to this change" : undefined}
+          onClick={onJump ? () => onJump(b) : undefined}
+          style={{
+            top: `${(b.startRow / totalRows) * 100}%`,
+            height: `${Math.max(((b.endRow - b.startRow) / totalRows) * 100, 0.8)}%`,
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+
 /**
  * Three-column compare/merge view for the in-app text editors. Left is the file
  * at a chosen commit (its own history, via `git_file_log`), right is the live
@@ -126,24 +262,39 @@ export function CompareView({
   rightText,
   onApply,
   onClose,
+  left,
+  rightTitle,
+  applyLabel,
 }: {
   path: string;
   /** The live editor content (the "new" side). */
   rightText: string;
   onApply: (merged: string) => void;
   onClose: () => void;
+  /** When provided, the left ("old") side is a fixed text rather than a commit
+   *  picked from this file's git history — this is the "sync merge" mode where
+   *  the left side is the local mirror. In that mode the commit dropdown is
+   *  hidden and no git history is fetched. Absent → the git-compare behaviour. */
+  left?: { text: string; title: string };
+  /** Header for the right column. Defaults to "Current (editor)". */
+  rightTitle?: string;
+  /** Label for the apply button. Defaults to "Apply to file". */
+  applyLabel?: string;
 }) {
+  const syncMode = left != null;
   const projectDir = useMemo(() => projectDirFor(path), [path]);
   const relPath = useMemo(() => relFromAbs(projectDir, path), [projectDir, path]);
 
   const [history, setHistory] = useState<GitCommit[]>([]);
   const [rev, setRev] = useState<string>("");
-  const [oldText, setOldText] = useState<string | null>(null);
+  const [gitOldText, setGitOldText] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
 
   // Load this file's commit history and default to its most recent commit (the
-  // "previous version" relative to the working copy).
+  // "previous version" relative to the working copy). Skipped in sync mode —
+  // there the left side is a caller-supplied fixed text, not a git revision.
   useEffect(() => {
+    if (syncMode) return;
     let cancelled = false;
     setError(null);
     invoke<GitCommit[]>("git_file_log", { projectDir, relPath, limit: 100 })
@@ -158,19 +309,20 @@ export function CompareView({
     return () => {
       cancelled = true;
     };
-  }, [projectDir, relPath]);
+  }, [syncMode, projectDir, relPath]);
 
-  // Fetch the file at the selected revision (the "old" side).
+  // Fetch the file at the selected revision (the "old" side). Skipped in sync
+  // mode (the left text is provided directly).
   useEffect(() => {
-    if (!rev) {
-      setOldText(null);
+    if (syncMode || !rev) {
+      setGitOldText(null);
       return;
     }
     let cancelled = false;
-    setOldText(null);
+    setGitOldText(null);
     invoke<string>("git_file_at_rev", { projectDir, relPath, rev })
       .then((text) => {
-        if (!cancelled) setOldText(text);
+        if (!cancelled) setGitOldText(text);
       })
       .catch((e) => {
         if (!cancelled) setError(String(e));
@@ -178,7 +330,11 @@ export function CompareView({
     return () => {
       cancelled = true;
     };
-  }, [projectDir, relPath, rev]);
+  }, [syncMode, projectDir, relPath, rev]);
+
+  // The left/"old" side: the caller's fixed text in sync mode, else the fetched
+  // git revision.
+  const oldText = syncMode ? left!.text : gitOldText;
 
   const rows = useMemo(() => diffLines(oldText ?? "", rightText), [oldText, rightText]);
   const blocks = useMemo(() => groupChanges(rows), [rows]);
@@ -223,29 +379,89 @@ export function CompareView({
     setResultText(buildMerged(rows, blocks, next));
   };
 
+  // Force a block to a specific side (used by the per-hunk take arrows). Since a
+  // decision is binary, forcing the value it isn't already at is exactly a toggle;
+  // when it already holds `d` this is a no-op, so re-clicking the lit arrow does
+  // nothing rather than flipping the hunk back.
+  const setDecision = (b: ChangeBlock, d: Decision) => {
+    if (decisionOf(b) !== d) toggle(b);
+  };
+
   const toggleEnabled = (b: ChangeBlock): boolean =>
     !manual || canToggle(resultText, b, decisionOf(b));
 
+  // Syntax-highlight the editable result so the middle column reads like the two
+  // side columns instead of flat monochrome text. The highlighted lines paint a
+  // backdrop that the transparent-text textarea sits on top of (its caret and
+  // selection stay live); scroll is mirrored from the textarea in its onScroll.
+  const lang = useMemo(() => languageForPath(path), [path]);
+  const resultLines = useMemo(() => resultText.split("\n"), [resultText]);
+
+  // Which result lines currently belong to a change block — used to tint the
+  // changed regions in the middle backdrop (the same blue as the mid ruler bars).
+  // Located by context against the live buffer so it survives hand-edits and the
+  // per-hunk toggles; a block that can't be uniquely located just isn't marked.
+  const changedLines = useMemo(() => {
+    const s = new Set<number>();
+    for (const b of blocks) {
+      const loc = locateBlock(resultLines, b, decisionOf(b));
+      if (loc) for (let k = 0; k < loc.len; k++) s.add(loc.start + k);
+    }
+    return s;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [blocks, resultLines, decisions]);
+
   // Proportional scroll-sync across the three panes (content heights differ, so
-  // this is by ratio, not line-for-line). A guard flag avoids feedback loops.
+  // this is by ratio, not line-for-line). Feedback is suppressed by *echo
+  // matching*, not a time-based guard: assigning `scrollTop` fires the target's
+  // own `scroll` event on a LATER frame, so an rAF-cleared "syncing" flag has
+  // usually already reset by the time that echo lands — and if the echo hits a
+  // short pane sitting near its top, its ratio reads ~0 and slams every pane back
+  // to the top (the "jumps to top" bug). Instead we remember the exact scrollTop
+  // we drove each pane to; when that pane reports a scroll matching it (±1px for
+  // the browser's integer rounding), we know it's our own echo and ignore it.
   const leftRef = useRef<HTMLDivElement>(null);
   const rightRef = useRef<HTMLDivElement>(null);
   const midRef = useRef<HTMLTextAreaElement>(null);
-  const syncing = useRef(false);
+  const midHlRef = useRef<HTMLDivElement>(null);
+  const echo = useRef(new Map<HTMLElement, number>());
   const syncFrom = (src: HTMLElement) => {
-    if (syncing.current) return;
-    syncing.current = true;
-    const ratio = src.scrollHeight - src.clientHeight > 0
-      ? src.scrollTop / (src.scrollHeight - src.clientHeight)
-      : 0;
+    const expected = echo.current.get(src);
+    if (expected != null && Math.abs(src.scrollTop - expected) <= 1) {
+      // Our own programmatic scroll bouncing back — consume it, drive nothing.
+      echo.current.delete(src);
+      return;
+    }
+    const denom = src.scrollHeight - src.clientHeight;
+    const ratio = denom > 0 ? src.scrollTop / denom : 0;
     for (const el of [leftRef.current, rightRef.current, midRef.current]) {
       if (!el || el === src) continue;
       const max = el.scrollHeight - el.clientHeight;
-      if (max > 0) el.scrollTop = ratio * max;
+      if (max <= 0) continue;
+      const target = ratio * max;
+      echo.current.set(el, target);
+      el.scrollTop = target;
+    }
+  };
+
+  // Snap every pane to a change block: place its start row a few lines below the
+  // top so there is a little leading context. Row-fraction based, matching the
+  // ruler and the proportional scroll-sync, and driven instantly (echo-matched)
+  // so it doesn't fight the sync loop.
+  const scrollToBlock = (b: ChangeBlock) => {
+    const total = rows.length || 1;
+    const ratio = Math.max(0, b.startRow - 2) / total;
+    for (const el of [leftRef.current, rightRef.current, midRef.current]) {
+      if (!el) continue;
+      const max = el.scrollHeight - el.clientHeight;
+      if (max <= 0) continue;
+      const target = ratio * max;
+      echo.current.set(el, target);
+      el.scrollTop = target;
+    }
+    if (midHlRef.current && midRef.current) {
+      midHlRef.current.scrollTop = midRef.current.scrollTop;
     }
-    requestAnimationFrame(() => {
-      syncing.current = false;
-    });
   };
 
   const revLabel = (c: GitCommit) => `${c.short}${c.is_head ? " (HEAD)" : ""} · ${c.subject}`;
@@ -257,41 +473,78 @@ export function CompareView({
   const loading = rev !== "" && oldText == null && error == null;
 
   return (
-    <div className="file-viewer-compare">
+    <div className={`file-viewer-compare${syncMode ? " sync" : ""}`}>
       <div className="file-viewer-compare-bar">
-        <span className="file-viewer-compare-label">Compare against</span>
-        <Dropdown
-          value={rev}
-          options={options}
-          onChange={setRev}
-          className="file-viewer-compare-rev"
-          title="Pick a commit from this file's history"
-          placeholder="Select a commit"
-        />
-        {selected && <span className="file-viewer-compare-date">{selected.date}</span>}
+        {syncMode ? (
+          // Sync merge: left/right are fixed (local mirror vs remote host), so
+          // there is no commit to pick — just name the two sides.
+          <span className="file-viewer-compare-label">
+            {left!.title} ⇄ {rightTitle ?? "Current"}
+          </span>
+        ) : (
+          <>
+            <span className="file-viewer-compare-label">Compare against</span>
+            <Dropdown
+              value={rev}
+              options={options}
+              onChange={setRev}
+              className="file-viewer-compare-rev"
+              title="Pick a commit from this file's history"
+              placeholder="Select a commit"
+            />
+            {selected && <span className="file-viewer-compare-date">{selected.date}</span>}
+          </>
+        )}
+        {syncMode && <UntestedTag />}
         <div className="file-viewer-compare-bar-gap" />
-        <button
-          className="file-viewer-format-btn"
-          onClick={() => setAll("accept")}
-          disabled={blocks.length === 0}
-          title="Keep the current (new) version for every change"
-        >
-          Accept all
-        </button>
-        <button
-          className="file-viewer-format-btn"
-          onClick={() => setAll("reject")}
-          disabled={blocks.length === 0}
-          title="Revert every change to the old version"
-        >
-          Reject all
-        </button>
+        {syncMode ? (
+          // Sync merge: name the two sides by what they are (local mirror vs
+          // remote host), and order the buttons left→right to match the columns
+          // — left column (Local) first, right column (Remote) second.
+          <>
+            <button
+              className="file-viewer-format-btn file-viewer-compare-take-all local"
+              onClick={() => setAll("reject")}
+              disabled={blocks.length === 0}
+              title="Take the local (mirror) side for every change"
+            >
+              Take all local
+            </button>
+            <button
+              className="file-viewer-format-btn file-viewer-compare-take-all remote"
+              onClick={() => setAll("accept")}
+              disabled={blocks.length === 0}
+              title="Take the remote (host) side for every change"
+            >
+              Take all remote
+            </button>
+          </>
+        ) : (
+          <>
+            <button
+              className="file-viewer-format-btn"
+              onClick={() => setAll("accept")}
+              disabled={blocks.length === 0}
+              title="Keep the current (new) version for every change"
+            >
+              Accept all
+            </button>
+            <button
+              className="file-viewer-format-btn"
+              onClick={() => setAll("reject")}
+              disabled={blocks.length === 0}
+              title="Revert every change to the old version"
+            >
+              Reject all
+            </button>
+          </>
+        )}
         <button
           className="file-viewer-format-btn file-viewer-compare-apply"
           onClick={() => onApply(resultText)}
-          title="Write the merged result into the editor"
+          title={syncMode ? "Save the merged result to both sides" : "Write the merged result into the editor"}
         >
-          Apply to file
+          {applyLabel ?? "Apply to file"}
         </button>
         <button className="file-viewer-format-btn" onClick={onClose} title="Close compare">
           Close
@@ -305,12 +558,18 @@ export function CompareView({
       ) : (
         <div className="file-viewer-compare-cols">
           <SideColumn
-            title={selected ? `Old — ${selected.short}` : "Old"}
+            title={syncMode ? left!.title : selected ? `Old — ${selected.short}` : "Old"}
             rows={rows}
             side="left"
             path={path}
             scrollRef={leftRef}
             onScroll={(e) => syncFrom(e.currentTarget)}
+            blocks={blocks}
+            isActive={(b) => decisionOf(b) === "reject"}
+            onTake={(b) => setDecision(b, "reject")}
+            enabledOf={toggleEnabled}
+            onJump={scrollToBlock}
+            syncMode={syncMode}
           />
 
           <div className="file-viewer-compare-col file-viewer-compare-col-mid">
@@ -332,7 +591,10 @@ export function CompareView({
                               : "Change reverted (old). Click to keep new."
                             : "Edited manually — toggle unavailable"
                         }
-                        onClick={() => enabled && toggle(b)}
+                        onClick={() => {
+                          scrollToBlock(b);
+                          if (enabled) toggle(b);
+                        }}
                       >
                         {dec === "accept" ? "✓" : "↩"} {i + 1}
                       </span>
@@ -341,26 +603,59 @@ export function CompareView({
                 </div>
               )}
             </div>
-            <textarea
-              ref={midRef}
-              className="file-viewer-compare-result"
-              value={resultText}
-              spellCheck={false}
-              onChange={(e) => {
-                setResultText(e.target.value);
-                setManual(true);
-              }}
-              onScroll={(e) => syncFrom(e.currentTarget)}
-            />
+            <div className="file-viewer-compare-result-wrap">
+              <DiffRuler blocks={blocks} totalRows={rows.length} side="mid" onJump={scrollToBlock} />
+              <div className="file-viewer-compare-result-hl" ref={midHlRef} aria-hidden="true">
+                {resultLines.map((line, i) => {
+                  const html = highlight(line, lang);
+                  const cls = `file-viewer-compare-hl-line${changedLines.has(i) ? " changed" : ""}`;
+                  return html != null ? (
+                    <div
+                      className={cls}
+                      key={i}
+                      dangerouslySetInnerHTML={{ __html: html || "​" }}
+                    />
+                  ) : (
+                    <div className={cls} key={i}>
+                      {line || "​"}
+                    </div>
+                  );
+                })}
+              </div>
+              <textarea
+                ref={midRef}
+                className="file-viewer-compare-result"
+                value={resultText}
+                spellCheck={false}
+                onChange={(e) => {
+                  setResultText(e.target.value);
+                  setManual(true);
+                }}
+                onScroll={(e) => {
+                  const ta = e.currentTarget;
+                  if (midHlRef.current) {
+                    midHlRef.current.scrollTop = ta.scrollTop;
+                    midHlRef.current.scrollLeft = ta.scrollLeft;
+                  }
+                  syncFrom(ta);
+                }}
+              />
+            </div>
           </div>
 
           <SideColumn
-            title="Current (editor)"
+            title={rightTitle ?? "Current (editor)"}
             rows={rows}
             side="right"
             path={path}
             scrollRef={rightRef}
             onScroll={(e) => syncFrom(e.currentTarget)}
+            blocks={blocks}
+            isActive={(b) => decisionOf(b) === "accept"}
+            onTake={(b) => setDecision(b, "accept")}
+            enabledOf={toggleEnabled}
+            onJump={scrollToBlock}
+            syncMode={syncMode}
           />
         </div>
       )}
diff --git a/src/components/embed/FileViewerPane.tsx b/src/components/embed/FileViewerPane.tsx
index 08eb9cd..5fb47da 100644
--- a/src/components/embed/FileViewerPane.tsx
+++ b/src/components/embed/FileViewerPane.tsx
@@ -9,9 +9,10 @@ import {
   type ViewerState,
 } from "../../stores/tabs";
 import { useSettingsStore } from "../../stores/settings";
+import { useExperimental } from "../../lib/experimental";
 import { useProjectsStore } from "../../stores/projects";
 import { useRemoteStatusStore } from "../../stores/remoteStatus";
-import { useConnectDialogStore } from "../../stores/connectDialog";
+import { useRemoteMachinesStore } from "../../stores/remoteMachines";
 import { RemotePaneHold } from "../projects/RemotePaneHold";
 import { useLinkRoutingStore } from "../../stores/linkRouting";
 import {
@@ -25,6 +26,7 @@ import { useScrollSync } from "../../stores/scrollSync";
 import { parseDetachedParam } from "../../stores/detached";
 import { Dropdown } from "../common/Dropdown";
 import { CompareView } from "./CompareView";
+import { PresentationOverlay } from "./PresentationOverlay";
 import { renderMarkdown } from "../../lib/viewers/markdown";
 import { enrichMarkdownDom } from "../../lib/viewers/markdownEnrich";
 import { highlight, languageForPath, escapeHtml } from "../../lib/viewers/highlight";
@@ -53,6 +55,30 @@ import {
   type EditResult,
 } from "../../lib/viewers/markdownEdit";
 import { internalViewerFor, disabledViewers, relFromAbs, type InternalViewer, type FileEntry } from "../../lib/viewers/fileUtils";
+import {
+  isPythonPath,
+  isPythonMainScript,
+  pythonLinkRanges,
+  remapBreakpoints,
+  resolvePythonDefinition,
+  snapBreakpointLine,
+} from "../../lib/viewers/python";
+import { debugPythonFile, runCwd, runPythonFile, placeForFocused } from "../../lib/pythonRun";
+import {
+  isSlurmScript,
+  parseSbatchDirectives,
+  directiveValue,
+  spliceDirective,
+  slurmAvailable,
+  submitSlurmJob,
+  openInteractiveJob,
+  COMMON_SBATCH_KEYS,
+  type SlurmInfo,
+  type InteractiveResources,
+} from "../../lib/slurm";
+import { FileDropContext } from "../files/fileDropContext";
+import { UntestedTag } from "../common/UntestedTag";
+import { FileSourceSwitch } from "../files/ProjectFilesPane";
 import {
   basename,
   dirname,
@@ -82,12 +108,15 @@ import {
   readFileBytes,
   writeFileText,
   fileMtime,
+  describeFileError,
 } from "./fileAccess";
 import { TableView } from "./TableView";
 import { NotebookView } from "./NotebookView";
 import { DiffView } from "./DiffView";
+import { SyncMergeView } from "./SyncMergeView";
 import { OdtView } from "./OdtView";
 import { MediaView } from "./MediaView";
+import { GifView } from "./GifView";
 import { SqliteView } from "./SqliteView";
 import { ImageAnnotator } from "./ImageAnnotator";
 import {
@@ -115,6 +144,10 @@ import {
   phraseAt,
 } from "../../lib/viewers/tex";
 import { PdfView } from "./pdf/PdfViewer";
+import { YamlTree } from "./YamlTree";
+import { YamlGrid } from "./YamlGrid";
+import { isTreePath, isJsonPath } from "../../lib/viewers/yaml";
+import { hasCards } from "../../lib/viewers/yamlGrid";
 
 /**
  * Persisted reader-position plumbing for an in-app viewer. Snapshots the tab's
@@ -246,6 +279,12 @@ interface Props {
  *                  to disk (Python, Rust, JSON, config files, …).
  *   - "markdown" → rendered HTML via renderMarkdown, with an Edit/Preview toggle
  *                  that lets you edit the source and save it back to disk.
+ *   - "yaml"     → YAML **and JSON** (which is YAML's flow syntax): the same
+ *                  editor with a Tree/Source toggle, where the tree is an editable
+ *                  structure view (rename a key, retype a value, add a key or a
+ *                  list item, reorder, delete). It splices the file's own text, so
+ *                  comments and layout survive, each collection keeps the style it
+ *                  is written in (block or flow), and both modes share one draft.
  *   - "image"    → the bytes wrapped in a Blob URL, shown in a zoomable/pannable
  *                  <img> (wheel to zoom at cursor, drag to pan, Fit / 1:1).
  *   - "pdf"      → rendered with pdf.js into a scrolling stack of page canvases
@@ -275,18 +314,52 @@ export function FileViewerPane({ viewer, path, projectId, tabKey, groupId }: Pro
       .then((s) => {
         if (cancelled) return;
         setSource(s);
-        if (tabKey) useFileSourcesStore.getState().setSource(tabKey, s);
       })
       .catch(() => {
         if (cancelled) return;
         setSource("none");
-        if (tabKey) useFileSourcesStore.getState().setSource(tabKey, "none");
       });
     return () => {
       cancelled = true;
+    };
+  }, [path, projectId]);
+
+  const project = useProjectsStore((s) => s.projects.find((p) => p.id === projectId));
+
+  // A viewer tab is opened against one fixed absolute path (mirror OR host). For
+  // a remote project this manual override lets the SAME tab show the other side
+  // instead — same rel path, root swapped — without touching the tab's
+  // persisted path. Session-only: resets to "no override" when the tab is
+  // retargeted to a different file, so `effectiveSource` falls back to the file's
+  // OWN resolved side (`source`, from `fileSource(path)`) — i.e. the side the
+  // path already points at. That is the load-bearing default: `openFileEntry`
+  // hands the viewer a *host* path when the tree that opened it was on Remote and
+  // a *mirror* path when it was on Local, so trusting the path is what makes
+  // "opened from a Remote listing ⇒ shown over SFTP" hold. Seeding instead from a
+  // shared per-project pref (the old behaviour) let a stale/other-surface value
+  // silently rewrite a host path back to the mirror — the Files-tab / subwindow
+  // sidebar use an *independent* source that never writes that pref, so a file
+  // opened there on Remote was read locally. `null` = follow the path.
+  const [sideOverride, setSideOverride] = useState<"local" | "remote" | null>(null);
+  useEffect(() => {
+    setSideOverride(null);
+  }, [path, projectId]);
+  const rel = useMemo(() => autoSyncRel(project, path), [project, path]);
+  const mirrorRoot = useMemo(() => localMirrorRootFor(project), [project]);
+  const effectiveSource: FileSource = sideOverride ?? source ?? "none";
+  const effectivePath = useMemo(() => {
+    if (!project?.remote || !rel) return path;
+    if (effectiveSource === "remote") return resolvePath(project.remote.remote_path, rel);
+    if (effectiveSource === "local" && mirrorRoot) return resolvePath(mirrorRoot, rel);
+    return path;
+  }, [project, rel, effectiveSource, mirrorRoot, path]);
+
+  useEffect(() => {
+    if (tabKey) useFileSourcesStore.getState().setSource(tabKey, effectiveSource);
+    return () => {
       if (tabKey) useFileSourcesStore.getState().clearSource(tabKey);
     };
-  }, [path, projectId, tabKey]);
+  }, [tabKey, effectiveSource]);
 
   // Disconnected remote project: reading a remote-native (SFTP) file would block
   // on the dead pool and each nested viewer would flash its own red read error.
@@ -294,15 +367,56 @@ export function FileViewerPane({ viewer, path, projectId, tabKey, groupId }: Pro
   // the message is unified across terminal and file tabs. Local-mirror files
   // (source "local") and local projects ("none") work offline and render as
   // usual; while the source is still unknown on a disconnected remote we hold.
-  const project = useProjectsStore((s) => s.projects.find((p) => p.id === projectId));
+  // Gated on the EFFECTIVE side, not the tab's opened side, so flipping the
+  // switch to Remote while offline surfaces the same Connect prompt a
+  // remote-native tab would — the toggle itself stays put (matches
+  // ProjectFilesPane's `useFileSource`).
   const sshState = useRemoteStatusStore((s) => (projectId ? s.byProject[projectId]?.ssh : undefined));
-  const openConnectDialog = useConnectDialogStore((s) => s.open);
+  const openRemoteMachines = useRemoteMachinesStore((s) => s.open);
   const remoteDisconnected = !!project?.remote && sshState !== "connected";
-  if (remoteDisconnected && source !== "local" && source !== "none") {
+
+  // Does this file exist on the host? A local-only file (never synced) has no
+  // host counterpart, so flipping the Local/Remote switch to Remote would only
+  // strand the viewer on an SFTP read error — disable that segment instead. Only
+  // knowable on a live pool; disconnected / not-yet-probed leaves it enabled (the
+  // disconnected gate above owns that case). One cheap SFTP stat per remote tab.
+  const [remoteMissing, setRemoteMissing] = useState(false);
+  const remoteRoot = project?.remote?.remote_path;
+  useEffect(() => {
+    setRemoteMissing(false);
+    if (!remoteRoot || !rel || sshState !== "connected") return;
+    let cancelled = false;
+    fileMtime(resolvePath(remoteRoot, rel), projectId)
+      .then(() => { if (!cancelled) setRemoteMissing(false); })
+      .catch(() => { if (!cancelled) setRemoteMissing(true); });
+    return () => { cancelled = true; };
+  }, [remoteRoot, rel, sshState, projectId]);
+  // Mirror the Local/Remote switch out to the tab strip so its file-source badge
+  // is a clickable toggle (not just a glyph): switching applies only when this
+  // remote project's file has a counterpart on the other side (`rel`). Cleared
+  // when it doesn't, and on unmount. Owns no state — `setSideOverride` stays here.
+  useEffect(() => {
+    if (!tabKey) return;
+    const store = useFileSourcesStore.getState();
+    if (project?.remote && rel) {
+      store.setControls(tabKey, {
+        current: effectiveSource === "remote" ? "remote" : "local",
+        set: setSideOverride,
+        remoteDisabled: remoteMissing,
+      });
+    } else {
+      store.clearControls(tabKey);
+    }
+    return () => {
+      if (tabKey) useFileSourcesStore.getState().clearControls(tabKey);
+    };
+  }, [tabKey, project?.remote, rel, effectiveSource, remoteMissing]);
+
+  if (remoteDisconnected && effectiveSource !== "local" && effectiveSource !== "none") {
     return (
       <RemotePaneHold
         host={project?.remote?.host ?? ""}
-        onConnect={() => { if (projectId) openConnectDialog(projectId); }}
+        onConnect={() => { if (projectId) openRemoteMachines(projectId); }}
       />
     );
   }
@@ -310,58 +424,107 @@ export function FileViewerPane({ viewer, path, projectId, tabKey, groupId }: Pro
   const openExternally = () => {
     useWindowsStore
       .getState()
-      .openFile(path, undefined, projectId, "right_file_tree")
+      .openFile(effectivePath, undefined, projectId, "right_file_tree")
       .catch((e) => console.error(e));
   };
 
   // Pick the concrete viewer, then publish this pane's owning project as the file
   // scope so every nested viewer/hook confines its file commands to this project
   // (and its box siblings) regardless of which project is globally current.
+  // Every viewer below reads `effectivePath` — the tab's own opened path unless
+  // the Local/Remote switch has retargeted it to the same rel path's other root
+  // — EXCEPT "diff"/"syncdiff", which already compare both sides directly and
+  // whose single `path` prop means something else in that mode.
   let view: React.ReactNode;
-  if (viewer === "image") {
-    view = <ImageView path={path} fileName={fileName} onOpenExternally={openExternally} tabKey={tabKey} />;
+  if (viewer === "gif") {
+    // Animated GIFs get the frame-transport viewer (#gifviewer); the plain
+    // image viewer remains its opt-out fallback (VIEWER_FALLBACK).
+    view = <GifView path={effectivePath} fileName={fileName} onOpenExternally={openExternally} tabKey={tabKey} />;
+  } else if (viewer === "image") {
+    view = <ImageView path={effectivePath} fileName={fileName} onOpenExternally={openExternally} tabKey={tabKey} />;
   } else if (viewer === "pdf") {
-    view = <PdfView path={path} onOpenExternally={openExternally} tabKey={tabKey} groupId={groupId} />;
+    view = <PdfView path={effectivePath} onOpenExternally={openExternally} tabKey={tabKey} groupId={groupId} />;
   } else if (viewer === "markdown") {
-    view = <MarkdownView path={path} onOpenExternally={openExternally} tabKey={tabKey} groupId={groupId} />;
+    view = <MarkdownView path={effectivePath} onOpenExternally={openExternally} tabKey={tabKey} groupId={groupId} />;
   } else if (viewer === "tex") {
-    view = <TexView path={path} onOpenExternally={openExternally} tabKey={tabKey} />;
+    view = <TexView path={effectivePath} onOpenExternally={openExternally} tabKey={tabKey} />;
   } else if (viewer === "table") {
-    view = <TableView path={path} onOpenExternally={openExternally} tabKey={tabKey} />;
+    view = <TableView path={effectivePath} onOpenExternally={openExternally} tabKey={tabKey} />;
   } else if (viewer === "notebook") {
-    view = <NotebookView path={path} onOpenExternally={openExternally} tabKey={tabKey} />;
+    view = <NotebookView path={effectivePath} onOpenExternally={openExternally} tabKey={tabKey} />;
   } else if (viewer === "diff") {
     view = <DiffView path={path} projectId={projectId} onOpenExternally={openExternally} tabKey={tabKey} />;
   } else if (viewer === "syncdiff") {
     view = <DiffView path={path} projectId={projectId} mode="sync" onOpenExternally={openExternally} tabKey={tabKey} />;
+  } else if (viewer === "syncmerge") {
+    view = <SyncMergeView path={path} projectId={projectId} tabKey={tabKey} />;
   } else if (viewer === "odt") {
-    view = <OdtView path={path} onOpenExternally={openExternally} tabKey={tabKey} />;
+    view = <OdtView path={effectivePath} onOpenExternally={openExternally} tabKey={tabKey} />;
   } else if (viewer === "media") {
-    view = <MediaView path={path} onOpenExternally={openExternally} tabKey={tabKey} />;
+    view = <MediaView path={effectivePath} onOpenExternally={openExternally} tabKey={tabKey} />;
   } else if (viewer === "html") {
     // HTML is now the editable base editor with a sandboxed live preview, keyed
     // to its own per-type prefs.
-    view = <TextView path={path} onOpenExternally={openExternally} tabKey={tabKey} type="html" groupId={groupId} />;
+    view = <TextView path={effectivePath} onOpenExternally={openExternally} tabKey={tabKey} type="html" groupId={groupId} />;
   } else if (viewer === "sqlite") {
-    view = <SqliteView path={path} onOpenExternally={openExternally} tabKey={tabKey} />;
+    view = <SqliteView path={effectivePath} onOpenExternally={openExternally} tabKey={tabKey} />;
+  } else if (viewer === "yaml") {
+    // YAML is the same base editor, with the structure tree as its "preview" half
+    // (#yaml) and its own per-type prefs.
+    view = <TextView path={effectivePath} onOpenExternally={openExternally} tabKey={tabKey} type="yaml" groupId={groupId} />;
   } else {
-    view = <TextView path={path} onOpenExternally={openExternally} tabKey={tabKey} groupId={groupId} />;
+    view = <TextView path={effectivePath} onOpenExternally={openExternally} tabKey={tabKey} groupId={groupId} />;
   }
+  const sourceSwitch =
+    project?.remote && rel
+      ? {
+          current: (effectiveSource === "remote" ? "remote" : "local") as "local" | "remote",
+          onChange: setSideOverride,
+          remoteDisabled: remoteMissing,
+        }
+      : null;
   return (
     <FileScopeContext.Provider value={projectId}>
-      <ViewerHeaderInfoContext.Provider value={{ path, projectId }}>
-        {view}
+      <ViewerHeaderInfoContext.Provider value={{ path: effectivePath, projectId, sourceSwitch }}>
+        {/* A single relative host so the marker/laser presentation overlay can
+            sit over ANY viewer without each one wiring it in (see
+            PresentationOverlay). `.presentation-host` is height:100% so the
+            existing `.file-viewer` (also 100%) fills it unchanged. */}
+        <div className="presentation-host">
+          {view}
+          <PresentationOverlay />
+        </div>
       </ViewerHeaderInfoContext.Provider>
     </FileScopeContext.Provider>
   );
 }
 
 /** The file identity a `ViewerHeader` needs to offer file-scoped actions (the
- *  auto-sync toggle) without every sub-viewer threading these props through. Set
- *  by `FileViewerPane`; `null` outside a viewer pane. */
-const ViewerHeaderInfoContext = createContext<{ path: string; projectId: string | null } | null>(
-  null,
-);
+ *  auto-sync toggle, the Local/Remote source switch) without every sub-viewer
+ *  threading these props through. Set by `FileViewerPane`; `null` outside a
+ *  viewer pane. `sourceSwitch` is `null` unless the open file resolves to a rel
+ *  path under a remote project's mirror or host root (i.e. the other side could
+ *  exist too). */
+const ViewerHeaderInfoContext = createContext<{
+  path: string;
+  projectId: string | null;
+  sourceSwitch?: {
+    current: "local" | "remote";
+    onChange: (s: "local" | "remote") => void;
+    remoteDisabled?: boolean;
+  } | null;
+} | null>(null);
+
+/** A remote project's local-mirror root, or `null` for a local project / one
+ *  with no resolvable mirror. Shared by `autoSyncRel` and the Local/Remote
+ *  switch's path-building — both need the exact same root. */
+function localMirrorRootFor(
+  project: ReturnType<typeof useProjectsStore.getState>["projects"][number] | undefined,
+): string | null {
+  if (!project?.remote) return null;
+  const projectDir = resolveProjectDirectory(project);
+  return resolveLocalMirror(project) ?? (projectDir ? `${projectDir}/mirror` : null);
+}
 
 /**
  * Resolve `absPath` to the project-relative path the sync backend keys on, for a
@@ -375,8 +538,7 @@ function autoSyncRel(
   absPath: string,
 ): string | null {
   if (!project?.remote) return null;
-  const projectDir = resolveProjectDirectory(project);
-  const mirrorRoot = resolveLocalMirror(project) ?? (projectDir ? `${projectDir}/mirror` : null);
+  const mirrorRoot = localMirrorRootFor(project);
   if (mirrorRoot) {
     const r = relFromAbs(mirrorRoot, absPath);
     if (r) return r;
@@ -422,6 +584,44 @@ function AutoSyncHeaderToggle({ path, projectId }: { path: string; projectId: st
   );
 }
 
+/**
+ * "Resolve divergence" button for the viewer header, shown only when the open
+ * file is currently **diverged (amber)** for a remote project. Opens the exact
+ * same three-way merge resolver (`syncmerge` → `SyncMergeView`/`CompareView`) the
+ * orange list opens, so the user can reconcile local mirror ⇄ host from the file
+ * they are already looking at instead of hunting it down in the Orange view.
+ *
+ * The resolver keys on the **mirror-side** path (`mirrorRoot/rel`), exactly as the
+ * orange list builds it, regardless of which side this viewer is currently showing.
+ */
+function SyncResolveHeaderButton({ path, projectId }: { path: string; projectId: string | null }) {
+  const project = useProjectsStore((s) => s.projects.find((p) => p.id === projectId));
+  const rel = useMemo(() => autoSyncRel(project, path), [project, path]);
+  const mirrorRoot = useMemo(() => localMirrorRootFor(project), [project]);
+  const amber = useSyncStore((s) =>
+    projectId && rel ? s.byProject[projectId]?.[rel]?.state === "amber" : false,
+  );
+  if (!project?.remote || !rel || !projectId || !mirrorRoot || !amber) return null;
+  const mirrorPath = resolvePath(mirrorRoot, rel);
+  return (
+    <button
+      type="button"
+      className="file-viewer-resolve"
+      title="This file diverged (local ⇄ host) — open the three-way resolver"
+      aria-label="Resolve divergence"
+      onClick={() =>
+        openLinkedFile(undefined, dirname(mirrorPath), {
+          path: mirrorPath,
+          viewer: "syncmerge",
+          label: basename(mirrorPath),
+        })
+      }
+    >
+      ±
+    </button>
+  );
+}
+
 /**
  * Open `resolved` (a linked file) following the #50 routing rules: prefer a
  * session-only drag-set override group, else the SAME subwindow/group as the
@@ -631,12 +831,21 @@ export function ViewerHeader({
   // and the open-externally icon pushed to the trailing edge. The remote/local
   // source badge no longer lives here — it rides on the tab itself (see
   // TabBar's tab-source badge), so it costs no header row. The auto-sync toggle
-  // (remote projects only) rides in from context so no sub-viewer has to pass it.
+  // and the Local/Remote source switch (both remote projects only) ride in from
+  // context so no sub-viewer has to pass them.
   const info = useContext(ViewerHeaderInfoContext);
   return (
     <div className="file-viewer-header">
       <div className="file-viewer-header-spacer" aria-hidden="true" />
       {children}
+      {info?.sourceSwitch && (
+        <FileSourceSwitch
+          source={info.sourceSwitch.current}
+          onChange={info.sourceSwitch.onChange}
+          remoteDisabled={info.sourceSwitch.remoteDisabled}
+        />
+      )}
+      {info && <SyncResolveHeaderButton path={info.path} projectId={info.projectId} />}
       {info && <AutoSyncHeaderToggle path={info.path} projectId={info.projectId} />}
       <button
         className="file-viewer-open-external"
@@ -786,10 +995,12 @@ function useEditHistory(initial: string) {
 const RELOAD_POLL_MS = 1500;
 
 /**
- * Editable-file state shared by the code and markdown editors: loads `path`,
- * keeps a `draft` against the last-known-on-disk `baseline` (so "dirty" is just
- * draft !== baseline), and writes the draft back via write_file_text — re-seeding
- * the baseline on success so the dirty flag clears without re-reading the file.
+ * Editable-file state shared by the editable viewers — the code and markdown
+ * editors, and the table viewer, whose cell edits are splices into this same
+ * text draft (see `lib/viewers/table.ts`): loads `path`, keeps a `draft` against
+ * the last-known-on-disk `baseline` (so "dirty" is just draft !== baseline), and
+ * writes the draft back via write_file_text — re-seeding the baseline on success
+ * so the dirty flag clears without re-reading the file.
  *
  * Adds (Group M):
  *  - #46 undo/redo: the draft is backed by `useEditHistory`; `undo`/`redo` are
@@ -800,7 +1011,7 @@ const RELOAD_POLL_MS = 1500;
  *    silently re-reads into a clean buffer, or surfaces a non-destructive banner
  *    when the buffer is dirty (Reload / Keep mine) — never clobbering edits.
  */
-function useEditableFile(path: string) {
+export function useEditableFile(path: string) {
   const scope = useFileScope();
   const [content, setContent] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
@@ -850,7 +1061,7 @@ function useEditableFile(path: string) {
         if (cancelled) return;
         seedFromDisk(text);
       })
-      .catch((e) => { if (!cancelled) setError(String(e)); });
+      .catch((e) => { if (!cancelled) setError(describeFileError(e)); });
     fileMtime(path, scope)
       .then((m) => { if (!cancelled) lastMtime.current = m; })
       .catch(() => {});
@@ -935,7 +1146,7 @@ function useEditableFile(path: string) {
 }
 
 /** The non-destructive external-change banner (#43). */
-function ExternalChangeBanner({
+export function ExternalChangeBanner({
   onReload,
   onKeep,
 }: {
@@ -1039,7 +1250,7 @@ export function useReadonlyFile(path: string) {
     lastMtime.current = null;
     readFileText(path, scope)
       .then((text) => { if (!cancelled) setContent(text); })
-      .catch((e) => { if (!cancelled) setError(String(e)); });
+      .catch((e) => { if (!cancelled) setError(describeFileError(e)); });
     fileMtime(path, scope)
       .then((m) => { if (!cancelled) lastMtime.current = m; })
       .catch(() => {});
@@ -1551,6 +1762,8 @@ function CodeEditor({
   editorApiRef,
   showBlame,
   blame,
+  breakpoints,
+  onToggleBreakpoint,
   initialScrollTop,
   onScrollPersist,
   groupId,
@@ -1622,6 +1835,13 @@ function CodeEditor({
    *  hovercard. `blame` maps 1-based line numbers to their attribution. */
   showBlame?: boolean;
   blame?: Map<number, BlameLine>;
+  /** Debug breakpoints (#py), as 1-based line numbers. When `onToggleBreakpoint`
+   *  is wired the gutter becomes interactive: each line number is a click target
+   *  that toggles a breakpoint, and a breakpointed line paints a red dot. Only the
+   *  Python editor supplies these; every other file type gets the inert,
+   *  aria-hidden gutter it had before. */
+  breakpoints?: ReadonlySet<number>;
+  onToggleBreakpoint?: (line: number) => void;
   /** Persisted vertical scroll (px) to restore once the file loads, so reopening
    *  it (or an Eldrun restart) lands the reader where they left off (#viewerpos).
    *  Applied once on first load; user scrolling thereafter reports via
@@ -3095,22 +3315,52 @@ function CodeEditor({
       {/* Line-number gutter. Fixed-height rows normally; in wrap mode (the LaTeX
           viewer) a logical line can span several visual rows, so each cell is
           sized to its measured wrapped height (`lineHeights`). Lines holding a
-          search match are marked, the current match brightest (#67). */}
-      <div className="file-viewer-gutter" aria-hidden="true">
+          search match are marked, the current match brightest (#67).
+
+          When `onToggleBreakpoint` is wired (the Python editor, #py) the cells
+          become real buttons that set/clear a debug breakpoint, so the gutter
+          stops being decoration and the whole column drops its `aria-hidden` —
+          hiding a control from the accessibility tree would make the feature
+          unreachable without a mouse. */}
+      <div className="file-viewer-gutter" aria-hidden={onToggleBreakpoint ? undefined : "true"}>
         <div className="file-viewer-gutter-inner" ref={gutterInnerRef}>
           {Array.from({ length: lineCount }, (_, i) => {
             const n = i + 1;
             const h = wrap ? lineHeights[i] : undefined;
+            const broken = breakpoints?.has(n) ?? false;
             const cls =
-              n === currentMatchLine
+              (n === currentMatchLine
                 ? "file-viewer-gutter-line current-match"
                 : matchLineSet.has(n)
                   ? "file-viewer-gutter-line has-match"
-                  : "file-viewer-gutter-line";
+                  : "file-viewer-gutter-line") +
+              (onToggleBreakpoint ? " is-breakable" : "") +
+              (broken ? " has-breakpoint" : "");
+            const style = h != null ? { height: h } : undefined;
+
+            if (!onToggleBreakpoint) {
+              return (
+                <div key={i} className={cls} style={style}>
+                  {n}
+                </div>
+              );
+            }
             return (
-              <div key={i} className={cls} style={h != null ? { height: h } : undefined}>
+              <button
+                key={i}
+                type="button"
+                className={cls}
+                style={style}
+                // Keep the caret where it is: clicking the gutter sets a
+                // breakpoint, it does not move the cursor or steal focus.
+                onMouseDown={(e) => e.preventDefault()}
+                onClick={() => onToggleBreakpoint(n)}
+                title={broken ? `Remove breakpoint on line ${n}` : `Break on line ${n}`}
+                aria-pressed={broken}
+                aria-label={broken ? `Remove breakpoint on line ${n}` : `Break on line ${n}`}
+              >
                 {n}
-              </div>
+              </button>
             );
           })}
         </div>
@@ -3452,7 +3702,7 @@ function CodeEditor({
  * than text: a spinner while saving, a filled disk with a dot when there are
  * unsaved edits, and a check when clean. `aria-label="Save"` keeps it findable.
  */
-function SaveButton({
+export function SaveButton({
   isDirty,
   saving,
   save,
@@ -3508,7 +3758,7 @@ function PrintButton({
 }
 
 /** Undo/redo toolbar buttons shared by the editable viewers (#46). */
-function UndoRedoButtons({
+export function UndoRedoButtons({
   undo,
   redo,
   canUndo,
@@ -4011,7 +4261,7 @@ function onCtrlWheelFont(
  *  `{ passive: false }` lets `preventDefault()` cancel the scroll, so Ctrl+wheel
  *  zooms immediately and never scrolls. The callback ref re-binds cleanly across
  *  mount/unmount (e.g. conditionally-rendered viewports). */
-function useNonPassiveWheel(handler: (e: WheelEvent) => void) {
+export function useNonPassiveWheel(handler: (e: WheelEvent) => void) {
   const cb = useRef(handler);
   cb.current = handler;
   const detach = useRef<(() => void) | null>(null);
@@ -4240,6 +4490,420 @@ function BlameButton({ active, toggle }: { active: boolean; toggle: () => void }
   );
 }
 
+/**
+ * The editor's debug breakpoints (#py) — the gutter's red dots.
+ *
+ * Two things make this more than a `Set<number>`:
+ *
+ *  - **They must survive edits.** A breakpoint names a line, so typing a new
+ *    import at the top of the file silently re-points every dot below it at the
+ *    wrong statement. Each draft change is therefore diffed against the previous
+ *    one and the lines are remapped (`remapBreakpoints`).
+ *  - **They must be settable only where pdb can break.** Clicking a blank line or
+ *    a comment snaps down to the next executable line rather than setting a
+ *    breakpoint pdb would reject at startup (`snapBreakpointLine`).
+ *
+ * They persist in the tab's `ViewerState`, so they survive closing the file and
+ * an Eldrun restart — the same plumbing (and the same `project.json` write) as the
+ * reader's scroll position.
+ */
+function useBreakpoints(
+  enabled: boolean,
+  draft: string,
+  loaded: boolean,
+  viewPos: ReturnType<typeof useViewerState>,
+) {
+  const [lines, setLines] = useState<number[]>(() =>
+    enabled ? (viewPos.initial?.breakpoints ?? []) : [],
+  );
+  const draftRef = useRef(draft);
+  draftRef.current = draft;
+
+  // The draft the current lines were resolved against. Seeded on first load: the
+  // editor's ""→content transition is not an edit, and diffing across it would
+  // look like "every line was replaced" and drop every restored breakpoint.
+  const prevDraft = useRef<string | null>(null);
+  useEffect(() => {
+    if (!enabled || !loaded) return;
+    const before = prevDraft.current;
+    prevDraft.current = draft;
+    if (before === null || before === draft) return;
+    setLines((cur) => {
+      if (cur.length === 0) return cur;
+      const next = remapBreakpoints(before, draft, cur);
+      // Keep the identity stable when nothing moved, so the gutter doesn't
+      // re-render on every keystroke.
+      return next.length === cur.length && next.every((l, i) => l === cur[i]) ? cur : next;
+    });
+  }, [enabled, loaded, draft]);
+
+  // Persist on change only — never on mount, which would rewrite the tab with the
+  // value we just read out of it.
+  const persistedKey = useRef<string | null>(null);
+  useEffect(() => {
+    if (!enabled) return;
+    const key = lines.join(",");
+    if (persistedKey.current === null) {
+      persistedKey.current = key;
+      return;
+    }
+    if (persistedKey.current === key) return;
+    persistedKey.current = key;
+    viewPos.persist({ breakpoints: lines });
+  }, [enabled, lines, viewPos]);
+
+  const toggle = useCallback((line: number) => {
+    setLines((cur) => {
+      if (cur.includes(line)) return cur.filter((l) => l !== line);
+      const snapped = snapBreakpointLine(draftRef.current, line);
+      if (snapped == null) return cur; // nothing executable below — no-op
+      if (cur.includes(snapped)) return cur.filter((l) => l !== snapped);
+      return [...cur, snapped].sort((a, b) => a - b);
+    });
+  }, []);
+
+  const set = useMemo(() => new Set(lines), [lines]);
+  return { lines, set, toggle };
+}
+
+/** Run / Debug (#py). Run executes the file in a fresh terminal tab; Debug does
+ *  the same under `pdb`, pre-loaded with the gutter's breakpoints.
+ *
+ *  Right-clicking Run opens a small popover to type **arguments** (`sys.argv`) —
+ *  appended to the command line and reused by every subsequent Run/Debug, so a
+ *  plain left-click re-runs with them (the tooltip shows what they are). */
+function RunDebugButtons({
+  breakpointCount,
+  busy,
+  showDebug,
+  args,
+  setArgs,
+  onRun,
+  onDebug,
+}: {
+  breakpointCount: number;
+  busy: boolean;
+  /** Debug (pdb + breakpoint gutter) is behind the experimental gate; Run isn't. */
+  showDebug: boolean;
+  /** The current argument string, and its setter (right-click popover edits it). */
+  args: string;
+  setArgs: (v: string) => void;
+  onRun: () => void;
+  onDebug: () => void;
+}) {
+  const [argsOpen, setArgsOpen] = useState(false);
+  // Hovering the Run/Debug buttons shows the saved args in an in-DOM popover — the
+  // native `title` tooltip is unreliable under WebKitGTK, so it can't be the only
+  // place the args are shown.
+  const [hovering, setHovering] = useState(false);
+  // Local draft so typing doesn't rebuild the run command on every keystroke; it
+  // is committed to the shared `args` on Run or when the popover closes.
+  const [draft, setDraft] = useState(args);
+  const wrapRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const open = useCallback(() => {
+    setDraft(args);
+    setArgsOpen(true);
+  }, [args]);
+  const commit = useCallback(() => {
+    setArgs(draft.trim());
+    setArgsOpen(false);
+  }, [draft, setArgs]);
+
+  // Focus the field when the popover opens, and close it on an outside click or Esc.
+  useEffect(() => {
+    if (!argsOpen) return;
+    inputRef.current?.focus();
+    inputRef.current?.select();
+    const onDown = (e: MouseEvent) => {
+      if (wrapRef.current && !wrapRef.current.contains(e.target as Node)) commit();
+    };
+    document.addEventListener("mousedown", onDown, true);
+    return () => document.removeEventListener("mousedown", onDown, true);
+  }, [argsOpen, commit]);
+
+  return (
+    <div
+      className="file-viewer-run-controls"
+      ref={wrapRef}
+      onMouseEnter={() => setHovering(true)}
+      onMouseLeave={() => setHovering(false)}
+    >
+      <button
+        className="file-viewer-format-btn"
+        // Right-click opens the args popover. We act on mousedown, not the
+        // contextmenu event: preventing the button's default focus-steal (needed
+        // to keep the editor caret) suppresses `contextmenu` under WebKitGTK, so
+        // that event never arrives. Left-click still runs via onClick.
+        onMouseDown={(e) => {
+          e.preventDefault();
+          if (e.button === 2) open();
+        }}
+        onClick={onRun}
+        onContextMenu={(e) => e.preventDefault()}
+        disabled={busy}
+        title="Run this file in a terminal tab\nRight-click to set arguments"
+        aria-label="Run file"
+      >
+        ▶ Run{args ? " *" : ""}
+      </button>
+      {showDebug && (
+      <button
+        className="file-viewer-format-btn"
+        onMouseDown={(e) => {
+          e.preventDefault();
+          if (e.button === 2) open();
+        }}
+        onClick={onDebug}
+        onContextMenu={(e) => e.preventDefault()}
+        disabled={busy}
+        title={
+          (breakpointCount > 0
+            ? `Debug under pdb, breaking on ${breakpointCount} line${
+                breakpointCount === 1 ? "" : "s"
+              } (click the gutter to set more)`
+            : "Debug under pdb — stops at the first line. Click a line number to set a breakpoint.") +
+          "\nRight-click to set arguments"
+        }
+        aria-label="Debug file"
+      >
+        🐞 Debug
+      </button>
+      )}
+      {/* Saved-args hover hint. Shown only while hovering, only when args are set,
+          and never over the editor popover (which shows them already). */}
+      {hovering && args && !argsOpen && (
+        <div className="file-viewer-run-argshint" role="tooltip">
+          <span className="file-viewer-run-argshint-label">args:</span>
+          <span className="file-viewer-run-argshint-val">{args}</span>
+        </div>
+      )}
+      {argsOpen && (
+        <div className="file-viewer-run-args" role="dialog" aria-label="Run arguments">
+          <label className="file-viewer-run-args-label">Arguments (sys.argv)</label>
+          <input
+            ref={inputRef}
+            className="file-viewer-run-args-input"
+            value={draft}
+            spellCheck={false}
+            placeholder="--epochs 5 data.csv"
+            onChange={(e) => setDraft(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                setArgs(draft.trim());
+                setArgsOpen(false);
+                onRun();
+              } else if (e.key === "Escape") {
+                e.preventDefault();
+                setArgsOpen(false);
+              }
+            }}
+          />
+          <div className="file-viewer-run-args-row">
+            <button
+              type="button"
+              className="file-viewer-format-btn"
+              onMouseDown={(e) => e.preventDefault()}
+              onClick={() => {
+                setArgs(draft.trim());
+                setArgsOpen(false);
+                onRun();
+              }}
+            >
+              ▶ Run
+            </button>
+            <button
+              type="button"
+              className="file-viewer-format-btn"
+              onMouseDown={(e) => e.preventDefault()}
+              onClick={() => {
+                setDraft("");
+                setArgs("");
+              }}
+              disabled={!draft}
+              title="Clear arguments"
+            >
+              Clear
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Human labels for the `#SBATCH` keys the directive form surfaces. */
+const SBATCH_FIELD_LABELS: Record<string, string> = {
+  "job-name": "Job name",
+  account: "Account",
+  partition: "Partition",
+  time: "Time",
+  nodes: "Nodes",
+  ntasks: "Tasks",
+  "cpus-per-task": "CPUs/task",
+  mem: "Memory",
+  gres: "GRES",
+  output: "Output",
+};
+
+/** Placeholder hints per key, so an empty field still teaches the format. */
+const SBATCH_FIELD_HINTS: Record<string, string> = {
+  "job-name": "myjob",
+  account: "your-group",
+  partition: "gpu",
+  time: "01:00:00",
+  nodes: "1",
+  ntasks: "1",
+  "cpus-per-task": "4",
+  mem: "8G",
+  gres: "gpu:1",
+  output: "slurm-%j.out",
+};
+
+/**
+ * The SLURM control bar (HPC), shown beside the Python Run bar for a `#SBATCH`
+ * script on a host that has SLURM. **Submit job** submits it and opens a log tab;
+ * **Variables** toggles the `#SBATCH` directive form (render rows, edit text — each
+ * edit splices the draft, an ordinary undoable change); **Interactive session…**
+ * opens a resource mini-form that launches an `srun --pty` shell on a compute node.
+ * Carries an `UntestedTag` until QA'd on a real cluster.
+ */
+function SlurmBar({
+  busy,
+  fields,
+  onField,
+  onSubmit,
+  onInteractive,
+}: {
+  busy: boolean;
+  fields: { key: string; value: string }[];
+  onField: (key: string, value: string) => void;
+  onSubmit: () => void;
+  onInteractive: (res: InteractiveResources) => void;
+}) {
+  const [varsOpen, setVarsOpen] = useState(false);
+  const [interOpen, setInterOpen] = useState(false);
+  // Per-field typed drafts, so a splice (and its undo step) happens on commit
+  // (blur/Enter), not on every keystroke.
+  const [edits, setEdits] = useState<Record<string, string>>({});
+  const [inter, setInter] = useState<InteractiveResources>({
+    time: "01:00:00",
+    cpus: "4",
+    mem: "8G",
+    gpus: "",
+    partition: "",
+    account: "",
+  });
+
+  const valueFor = (key: string) =>
+    edits[key] ?? directiveValue(fields, key);
+  const commit = (key: string) => {
+    const v = edits[key];
+    if (v === undefined) return;
+    onField(key, v);
+  };
+
+  return (
+    <div className="file-viewer-run-controls">
+      <button
+        className="file-viewer-format-btn"
+        onMouseDown={(e) => e.preventDefault()}
+        onClick={onSubmit}
+        disabled={busy}
+        title="Submit this job to SLURM (sbatch) and open a log tab"
+        aria-label="Submit SLURM job"
+      >
+        ⏫ Submit job
+      </button>
+      <button
+        className={`file-viewer-format-btn${varsOpen ? " active" : ""}`}
+        onMouseDown={(e) => e.preventDefault()}
+        onClick={() => { setVarsOpen((v) => !v); setInterOpen(false); }}
+        title="Edit #SBATCH directives (resources)"
+        aria-pressed={varsOpen}
+      >
+        Variables
+      </button>
+      <button
+        className={`file-viewer-format-btn${interOpen ? " active" : ""}`}
+        onMouseDown={(e) => e.preventDefault()}
+        onClick={() => { setInterOpen((v) => !v); setVarsOpen(false); }}
+        title="Open an interactive shell on a compute node (srun --pty)"
+        aria-pressed={interOpen}
+      >
+        ⚡ Interactive session…
+      </button>
+      <UntestedTag />
+
+      {varsOpen && (
+        <div className="file-viewer-run-args" role="dialog" aria-label="SBATCH variables">
+          <label className="file-viewer-run-args-label">#SBATCH directives</label>
+          <div className="slurm-directive-grid">
+            {COMMON_SBATCH_KEYS.map((key) => (
+              <label key={key} className="slurm-directive-field">
+                <span className="slurm-directive-key">{SBATCH_FIELD_LABELS[key] ?? key}</span>
+                <input
+                  className="file-viewer-run-args-input"
+                  value={valueFor(key)}
+                  spellCheck={false}
+                  placeholder={SBATCH_FIELD_HINTS[key] ?? ""}
+                  onChange={(e) => setEdits((m) => ({ ...m, [key]: e.target.value }))}
+                  onBlur={() => commit(key)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      e.preventDefault();
+                      commit(key);
+                    }
+                  }}
+                />
+              </label>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {interOpen && (
+        <div className="file-viewer-run-args" role="dialog" aria-label="Interactive session">
+          <label className="file-viewer-run-args-label">Interactive session (srun --pty)</label>
+          <div className="slurm-directive-grid">
+            {([
+              ["account", "Account", "your-group"],
+              ["partition", "Partition", "gpu"],
+              ["time", "Time", "01:00:00"],
+              ["cpus", "CPUs/task", "4"],
+              ["mem", "Memory", "8G"],
+              ["gpus", "GPUs", "1"],
+            ] as const).map(([k, label, hint]) => (
+              <label key={k} className="slurm-directive-field">
+                <span className="slurm-directive-key">{label}</span>
+                <input
+                  className="file-viewer-run-args-input"
+                  value={inter[k] ?? ""}
+                  spellCheck={false}
+                  placeholder={hint}
+                  onChange={(e) => setInter((s) => ({ ...s, [k]: e.target.value }))}
+                />
+              </label>
+            ))}
+          </div>
+          <div className="file-viewer-run-args-row">
+            <button
+              type="button"
+              className="file-viewer-format-btn"
+              onMouseDown={(e) => e.preventDefault()}
+              onClick={() => { setInterOpen(false); onInteractive(inter); }}
+            >
+              ⚡ Start
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
 /** "Compare" toolbar toggle. When active the editor body is replaced by the
  *  three-column compare/merge view (old commit ⇄ live content ⇄ editable result). */
 function CompareButton({ active, toggle }: { active: boolean; toggle: () => void }) {
@@ -4295,18 +4959,208 @@ function TextView({
   const blame = useBlame(path, showBlame);
   const [compareOpen, setCompareOpen] = useState(false);
   const viewPos = useViewerState(tabKey);
+  // Live scroll offsets for the two views this pane toggles between: the Source
+  // code editor (`scrollTop`) and the YAML Tree (`yamlScrollTop`). Held in refs,
+  // not only persisted, because the pane stays mounted across the Tree↔Source
+  // toggle but each inner view REMOUNTS — and would otherwise seed from
+  // `viewPos.initial` (the stale open-time snapshot) and jump there. The ref
+  // carries the live position so a switch back lands where the view was left.
+  const srcScroll = useRef(viewPos.initial?.scrollTop ?? 0);
+  const yamlScroll = useRef(viewPos.initial?.yamlScrollTop ?? 0);
   const persistScroll = useCallback(
-    (scrollTop: number) => viewPos.persist({ scrollTop }),
+    (scrollTop: number) => {
+      srcScroll.current = scrollTop;
+      viewPos.persist({ scrollTop });
+    },
     [viewPos],
   );
 
+  // ── Python (#py): run/debug + breakpoints + go-to-definition ──────────────
+  // Run is available only for a "main" script — one with a module-level
+  // `if __name__ == "__main__":` guard — not for every importable .py module,
+  // which has nothing useful to execute. Debug (pdb) and the breakpoint gutter
+  // that only exists to feed it sit behind the experimental `python_run_debug`
+  // flag — off by default, on in debug mode (`lib/experimental.ts`).
+  // Go-to-definition is deliberately NOT gated: it reads, it never runs anything.
+  const isPy = useMemo(() => isPythonPath(path), [path]);
+  const pyDebugEnabled = useExperimental("python_run_debug");
+  const isMainScript = useMemo(
+    () => isPy && loaded && isPythonMainScript(draft),
+    [isPy, loaded, draft],
+  );
+  const pyRun = isMainScript;
+  const pyDebug = isMainScript && pyDebugEnabled;
+  const projectId = useFileScope();
+  const project = useProjectsStore((s) => s.projects.find((p) => p.id === projectId));
+  const projectDir = project ? resolveProjectDirectory(project) : "";
+  const bp = useBreakpoints(pyDebug, draft, loaded, viewPos);
+  const [launching, setLaunching] = useState(false);
+  // Arguments typed into the Run button's right-click popover, appended to the
+  // command line (see pythonRun.buildRunCommand). Kept PER FILE (keyed by absolute
+  // path in global settings), not per tab, so every viewer of the same script
+  // shares one set of args — edit them in one tab and the others follow live,
+  // because both read this same store selector — and so they survive closing the
+  // viewer and an Eldrun restart, and show in the Run button's hover tooltip.
+  const pyArgs = useSettingsStore((s) => s.settings?.python_run_args?.[path] ?? "");
+  const setPyArgs = useCallback(
+    (v: string) => {
+      void useSettingsStore.getState().setPythonRunArgs(path, v);
+    },
+    [path],
+  );
+  // Non-null inside a detached popout → the run terminal must stream into THIS
+  // window, not the main tab store (see placeForFocused).
+  const fileDrop = useContext(FileDropContext);
+
+  // The tab runs in the project's own scope, not whichever project happens to be
+  // active — a viewer keeps working after you switch projects (see FileScopeContext),
+  // and its Run button must not fire a terminal into a different project's layout.
+  const scope = projectId ?? "root";
+  const cwd = runCwd(projectDir, path);
+
+  const launch = useCallback(
+    async (go: () => Promise<void>) => {
+      setLaunching(true);
+      try {
+        await go();
+      } finally {
+        setLaunching(false);
+      }
+    },
+    [],
+  );
+
+  // Open the run/debug terminal in the focused subwindow of this project — where
+  // the user is looking — rather than beside this tab's group.
+  const onRun = useCallback(
+    () =>
+      void launch(() =>
+        runPythonFile({
+          file: path,
+          projectDir: cwd,
+          scope,
+          projectId,
+          args: pyArgs,
+          place: placeForFocused(fileDrop),
+        }),
+      ),
+    [launch, path, cwd, scope, projectId, pyArgs, fileDrop],
+  );
+  const onDebug = useCallback(
+    () =>
+      void launch(() =>
+        debugPythonFile({
+          file: path,
+          projectDir: cwd,
+          scope,
+          projectId,
+          breakpoints: bp.lines,
+          args: pyArgs,
+          place: placeForFocused(fileDrop),
+        }),
+      ),
+    [launch, path, cwd, scope, projectId, bp.lines, pyArgs, fileDrop],
+  );
+
+  // ── SLURM (HPC): submit / interactive on a batch script ───────────────────
+  // A `.slurm`-style file (one carrying a `#SBATCH` directive) gets a submit bar
+  // beside the Python one — but only when the project's host actually has SLURM
+  // (`slurm_available`), so the affordance never appears off-HPC. Everything here
+  // rides the same terminal-tab machinery Run uses (`lib/slurm.ts`).
+  const isSlurm = useMemo(() => loaded && isSlurmScript(draft), [loaded, draft]);
+  const [slurmInfo, setSlurmInfo] = useState<SlurmInfo | null>(null);
+  useEffect(() => {
+    if (!isSlurm || !projectDir) {
+      setSlurmInfo(null);
+      return;
+    }
+    let cancelled = false;
+    slurmAvailable(projectDir)
+      .then((info) => { if (!cancelled) setSlurmInfo(info); })
+      .catch(() => { if (!cancelled) setSlurmInfo(null); });
+    return () => { cancelled = true; };
+  }, [isSlurm, projectDir]);
+  const showSlurm = isSlurm && !!slurmInfo?.available;
+  const isRemoteProject = !!project?.remote;
+
+  const onSlurmSubmit = useCallback(
+    () =>
+      void launch(async () => {
+        if (!projectId) return;
+        await submitSlurmJob({
+          file: path,
+          projectDir,
+          cwd,
+          projectId,
+          scope,
+          isRemote: isRemoteProject,
+          place: placeForFocused(fileDrop),
+        });
+      }),
+    [launch, path, projectDir, cwd, projectId, scope, isRemoteProject, fileDrop],
+  );
+  const onSlurmInteractive = useCallback(
+    (res: InteractiveResources) => {
+      openInteractiveJob({
+        scope,
+        cwd,
+        res,
+        hostId: "primary",
+        isRemote: isRemoteProject,
+        place: placeForFocused(fileDrop),
+      });
+    },
+    [scope, cwd, isRemoteProject, fileDrop],
+  );
+
+  // Ctrl/Cmd+Click a name to open its `def`/`class` — in this file or in the
+  // module it was imported from. `jumpToSource` handles both: it re-uses an open
+  // editor when there is one (including the same file, and across a detached
+  // window) and otherwise opens the target in this tab's subwindow.
+  const followPython = useCallback(
+    async (caret: number) => {
+      const loc = await resolvePythonDefinition(draft, caret, path, projectDir, async (p) => {
+        try {
+          return await readFileText(p, projectId);
+        } catch {
+          return null; // doesn't exist / unreadable — just not this candidate
+        }
+      });
+      if (loc) jumpToSource(loc.path, loc.line, loc.column);
+    },
+    [draft, path, projectDir, projectId],
+  );
+
   const fmt = useFormatter(path, draft, setDraft);
   const issue = useSyntaxCheck(path, draft, loaded);
   const previewKind = useMemo(() => previewKindForPath(path), [path]);
-  // HTML/SVG open in preview; CSS opens in the editor (its preview is a sample).
-  const [mode, setMode] = useState<"preview" | "edit">(
-    previewKind === "html" || previewKind === "svg" ? "preview" : "edit",
+  // #yaml: for YAML and JSON the "preview" is an editable structure tree rather
+  // than a rendered document — it writes back into this very draft (see YamlTree),
+  // which is what lets Tree and Source be two views on one text and keeps
+  // save/undo/format/validation working across both without either mode knowing
+  // about the other. JSON is YAML's flow syntax, so it is the same tree, written
+  // back in the stricter dialect (`strict`).
+  const isYaml = useMemo(() => isTreePath(path), [path]);
+  const jsonStrict = useMemo(() => isJsonPath(path), [path]);
+  // #yaml-grid: the CARD view for structured YAML/JSON — a recursive grid of nested
+  // cards, editing the same draft by splice (see YamlGrid). Offered only when the
+  // file actually nests a collection worth carding, so the Cards toggle appears
+  // exactly where it does something (the tree's honesty rule).
+  const gridAvailable = useMemo(
+    () => (isYaml && loaded ? hasCards(draft, jsonStrict) : false),
+    [isYaml, loaded, draft, jsonStrict],
   );
+  // YAML/JSON opens in the TREE view by default ("preview"); HTML/SVG in preview; CSS
+  // in the editor. The card view stays available (via the toggle, when the file nests
+  // something to card) but is no longer the default — it still needs work.
+  const [mode, setMode] = useState<"preview" | "grid" | "edit">(
+    isYaml ? "preview" : previewKind === "html" || previewKind === "svg" ? "preview" : "edit",
+  );
+  // A flat file (or a card edit that removes all nesting) has no card view — retire
+  // the mode rather than strand it on a toggle with no button, dropping to the tree.
+  useEffect(() => {
+    if (mode === "grid" && !gridAvailable && loaded) setMode("preview");
+  }, [mode, gridAvailable, loaded]);
   const fileName = basename(path);
   const jumpToLine = useCallback(
     (line: number, column: number) =>
@@ -4314,11 +5168,56 @@ function TextView({
     [path],
   );
 
-  const showEditor = !previewKind || mode === "edit";
+  const showEditor = (!previewKind && !isYaml) || mode === "edit";
   const wheelRef = useNonPassiveWheel((e) => {
-    if (showEditor) onCtrlWheelFont(e, font.inc, font.dec);
+    onCtrlWheelFont(e, font.inc, font.dec);
   });
 
+  // The Tree (and preview) scrolls `.file-viewer-body` itself; the Source editor
+  // scrolls its own inner viewport instead (see CodeEditor). Keep a ref to the
+  // body alongside the wheel-font ref so the tree's scroll can be persisted and
+  // restored on the switch back from Source.
+  const bodyEl = useRef<HTMLDivElement | null>(null);
+  const bodyRef = useCallback(
+    (el: HTMLDivElement | null) => {
+      bodyEl.current = el;
+      wheelRef(el);
+    },
+    [wheelRef],
+  );
+  // Only the TREE persists/restores the body's scroll (the grid scrolls its own
+  // inner table container, the editor its own viewport).
+  const treeScrolls = isYaml && mode === "preview";
+  const showGrid = isYaml && mode === "grid" && gridAvailable;
+  const scrollRaf = useRef<number | null>(null);
+  const onBodyScroll = useCallback(() => {
+    if (!treeScrolls) return;
+    const el = bodyEl.current;
+    if (!el) return;
+    yamlScroll.current = el.scrollTop;
+    // Coalesce the store write to one per frame — a flick of the wheel must not
+    // churn the tabs array (and its debounced disk save) every scroll event.
+    if (scrollRaf.current == null) {
+      scrollRaf.current = requestAnimationFrame(() => {
+        scrollRaf.current = null;
+        viewPos.persist({ yamlScrollTop: yamlScroll.current });
+      });
+    }
+  }, [treeScrolls, viewPos]);
+  useEffect(
+    () => () => {
+      if (scrollRaf.current != null) cancelAnimationFrame(scrollRaf.current);
+    },
+    [],
+  );
+  // Restore the tree's scroll when it (re)mounts — on load, and on switching back
+  // from Source. Layout effect so it lands before paint, with no visible jump.
+  useLayoutEffect(() => {
+    if (treeScrolls && loaded && bodyEl.current) {
+      bodyEl.current.scrollTop = yamlScroll.current;
+    }
+  }, [treeScrolls, loaded]);
+
   // Print: HTML/SVG/CSS print their rendered preview document; plain text and
   // source print as a wrapped monospace block.
   const handlePrint = useCallback(() => {
@@ -4336,17 +5235,44 @@ function TextView({
   return (
     <div className="file-viewer">
       <ViewerHeader onOpenExternally={onOpenExternally}>
-        {previewKind && (
+        {(previewKind || isYaml) && (
           <ModeToggle
             value={mode}
             onChange={setMode}
             options={[
-              { value: "preview", label: "Preview" },
-              { value: "edit", label: previewKind === "svg" ? "Source" : "Edit" },
+              { value: "preview", label: isYaml ? "Tree" : "Preview" },
+              // The card view leads no longer — Tree is the default. It is still
+              // offered, but only for a file with nesting to card (the tree's
+              // honesty rule).
+              ...(gridAvailable ? [{ value: "grid" as const, label: "Cards" }] : []),
+              {
+                value: "edit",
+                label: isYaml || previewKind === "svg" ? "Source" : "Edit",
+              },
             ]}
           />
         )}
         <FontSizeControls fontSize={font.fontSize} inc={font.inc} dec={font.dec} reset={font.reset} />
+        {showEditor && pyRun && (
+          <RunDebugButtons
+            breakpointCount={bp.lines.length}
+            busy={launching}
+            showDebug={pyDebug}
+            args={pyArgs}
+            setArgs={setPyArgs}
+            onRun={onRun}
+            onDebug={onDebug}
+          />
+        )}
+        {showEditor && showSlurm && (
+          <SlurmBar
+            busy={launching}
+            fields={parseSbatchDirectives(draft)}
+            onField={(key, value) => setDraft(spliceDirective(draft, key, value))}
+            onSubmit={onSlurmSubmit}
+            onInteractive={onSlurmInteractive}
+          />
+        )}
         {showEditor && <EditorAiControls ai={ai} />}
         {showEditor && fmt.enabled && (
           <FormatButton available={fmt.available} busy={fmt.busy} run={() => void fmt.run()} />
@@ -4357,7 +5283,9 @@ function TextView({
         {showEditor && (
           <CompareButton active={compareOpen} toggle={() => setCompareOpen((v) => !v)} />
         )}
-        {showEditor && (
+        {/* The YAML tree edits the text, so its edits are ordinary undo steps —
+            the buttons stay live in Tree mode, unlike a read-only preview. */}
+        {(showEditor || isYaml) && (
           <UndoRedoButtons undo={undo} redo={redo} canUndo={canUndo} canRedo={canRedo} />
         )}
         <PrintButton onPrint={handlePrint} disabled={!loaded} />
@@ -4366,19 +5294,41 @@ function TextView({
       {externalChange && <ExternalChangeBanner onReload={reloadFromDisk} onKeep={keepMine} />}
       {saveError && <div className="file-viewer-error">{saveError}</div>}
       {fmt.status && <div className="file-viewer-status-line">{fmt.status}</div>}
-      {showEditor && <ValidationBanner issue={issue} onJump={jumpToLine} />}
+      {(showEditor || isYaml) && <ValidationBanner issue={issue} onJump={jumpToLine} />}
       <div
         className={`file-viewer-body${showEditor ? " file-viewer-code-body" : ""}`}
-        ref={wheelRef}
+        ref={bodyRef}
+        onScroll={onBodyScroll}
       >
-        {!showEditor && previewKind ? (
+        {!showEditor && (previewKind || isYaml) ? (
           error != null ? (
             <div className="file-viewer-error">{error}</div>
           ) : !loaded ? (
             <div className="file-viewer-loading">Loading…</div>
+          ) : showGrid ? (
+            // The grid edits the same draft by splice, just like the tree — a cell
+            // edit is dirty, undoable and saveable exactly like a typed one.
+            <YamlGrid
+              text={draft}
+              onChange={setDraft}
+              tabKey={tabKey}
+              fontSize={font.isCustom ? font.fontSize : undefined}
+              strict={jsonStrict}
+            />
+          ) : isYaml ? (
+            // The tree edits the draft in place — the same draft Source shows and
+            // Ctrl+S writes, so an edit made here is dirty, undoable and saveable
+            // exactly like a typed one.
+            <YamlTree
+              text={draft}
+              onChange={setDraft}
+              tabKey={tabKey}
+              fontSize={font.isCustom ? font.fontSize : undefined}
+              strict={jsonStrict}
+            />
           ) : (
             // Preview reflects the live draft, so it tracks unsaved edits.
-            <RenderedPreview kind={previewKind} content={draft} fileName={fileName} />
+            <RenderedPreview kind={previewKind!} content={draft} fileName={fileName} />
           )
         ) : compareOpen ? (
           <CompareView
@@ -4412,7 +5362,14 @@ function TextView({
             onGotoApplied={jump.onGotoApplied}
             showBlame={showBlame}
             blame={blame}
-            initialScrollTop={viewPos.initial?.scrollTop}
+            breakpoints={pyDebug ? bp.set : undefined}
+            onToggleBreakpoint={pyDebug ? bp.toggle : undefined}
+            onFollowLink={isPy ? followPython : undefined}
+            linkRanges={isPy ? pythonLinkRanges : undefined}
+            // The LIVE offset (not `viewPos.initial`), so re-showing Source after
+            // a trip through Tree restores where the editor was, not the stale
+            // open-time snapshot.
+            initialScrollTop={srcScroll.current}
             onScrollPersist={persistScroll}
             groupId={groupId}
           />
@@ -4704,7 +5661,7 @@ function useBlobUrl(path: string, type: string) {
         setUrl(objectUrl);
         if (prev) URL.revokeObjectURL(prev);
       })
-      .catch((e) => { if (!cancelled) setError(String(e)); });
+      .catch((e) => { if (!cancelled) setError(describeFileError(e)); });
     return () => { cancelled = true; };
   }, [path, type, diskVersion, scope]);
 
@@ -5309,11 +6266,13 @@ function TexView({
   );
 }
 
-const MIN_SCALE = 0.05;
-const MAX_SCALE = 40;
-const ZOOM_STEP = 1.2;
+// Exported so GifView shares the exact zoom behavior (steps, bounds) with the
+// image viewer.
+export const MIN_SCALE = 0.05;
+export const MAX_SCALE = 40;
+export const ZOOM_STEP = 1.2;
 
-const clampScale = (s: number) => Math.min(MAX_SCALE, Math.max(MIN_SCALE, s));
+export const clampScale = (s: number) => Math.min(MAX_SCALE, Math.max(MIN_SCALE, s));
 
 /**
  * Zoomable/pannable image viewer. The image is drawn at its natural pixel size
diff --git a/src/components/embed/GifView.tsx b/src/components/embed/GifView.tsx
new file mode 100644
index 0000000..fe598f1
--- /dev/null
+++ b/src/components/embed/GifView.tsx
@@ -0,0 +1,619 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  ViewerHeader,
+  useViewerState,
+  useNonPassiveWheel,
+  zoomOffset,
+  clampScale,
+  MIN_SCALE,
+  MAX_SCALE,
+  ZOOM_STEP,
+} from "./FileViewerPane";
+import { useFileScope, readFileBytes, fileMtime } from "./fileAccess";
+import { openGif, effectiveDelayMs } from "../../lib/viewers/gif";
+import { Dropdown } from "../common/Dropdown";
+
+/**
+ * Animated-GIF viewer with frame-level transport (#gifviewer). The plain image
+ * viewer already *animates* a GIF — the webview animates <img> natively — but
+ * offers no control over the animation. This viewer decodes the frames itself
+ * (`lib/viewers/gif.ts`; WebKitGTK has no ImageDecoder API) and plays them on a
+ * <canvas>, which is what makes pause, frame stepping, scrubbing, speed and
+ * loop control possible at all.
+ *
+ * Playback honors each frame's own delay through a timestamp accumulator (a
+ * fixed-interval timer would drift and ignore per-frame timing); authored
+ * sub-20ms delays play at the 100ms browser convention (`effectiveDelayMs`).
+ * Zoom/pan mirrors the image viewer exactly, sharing its exported pure pieces
+ * (`zoomOffset`/`clampScale`/`useNonPassiveWheel`) and persisting the view per
+ * tab the same way.
+ *
+ * Decoding runs on the main thread but yields to the event loop every few
+ * frames — no Web Worker: typical GIFs decode in single-digit ms, and shipping
+ * hundreds of MB of frame buffers through structured clone would cost more
+ * than it saves. A GIF the decoder can't handle degrades to the plain <img>
+ * (which still animates natively) rather than a wall — a decoder gap must
+ * never render worse than before this viewer existed.
+ *
+ * No Annotate button: the annotator flattens to a single PNG, which would
+ * silently destroy the animation on save. (A possible future affordance is
+ * "annotate the CURRENT frame → PNG copy".)
+ */
+
+/** Mirrors FileViewerPane's RELOAD_POLL_MS (#68 auto-reload). */
+const RELOAD_POLL_MS = 1500;
+
+/** Bound the accumulator so a long-hidden tab (rAF suspended) fast-forwards at
+ *  most this much wall-clock time instead of spinning the advance loop. */
+const MAX_CARRY_MS = 60_000;
+
+const SPEED_OPTIONS = [0.25, 0.5, 1, 1.5, 2, 4].map((s) => ({
+  value: String(s),
+  label: `${s}×`,
+}));
+
+/**
+ * Load `path`'s raw bytes (the decoder wants bytes, not a blob URL) and re-read
+ * them when the file changes on disk — the byte-level twin of FileViewerPane's
+ * `useBlobUrl`. A same-path reload keeps the current bytes up until the fresh
+ * ones arrive, so the animation doesn't flash to a loading state.
+ */
+function useGifBytes(path: string) {
+  const scope = useFileScope();
+  const [bytes, setBytes] = useState<Uint8Array<ArrayBuffer> | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const lastMtime = useRef<number | null>(null);
+  // Bumped whenever the file's mtime advances on disk, forcing a byte reload.
+  const [diskVersion, setDiskVersion] = useState(0);
+
+  // Reset to the loading state only on a genuine file switch.
+  useEffect(() => {
+    setBytes(null);
+    setError(null);
+    lastMtime.current = null;
+  }, [path]);
+
+  useEffect(() => {
+    let cancelled = false;
+    readFileBytes(path, scope)
+      .then((b) => {
+        if (!cancelled) setBytes(Uint8Array.from(b));
+      })
+      .catch((e) => {
+        if (!cancelled) setError(String(e));
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [path, scope, diskVersion]);
+
+  // Poll mtime; on an external advance, bump diskVersion to re-read fresh bytes.
+  useEffect(() => {
+    let cancelled = false;
+    fileMtime(path, scope)
+      .then((m) => {
+        if (!cancelled) lastMtime.current = m;
+      })
+      .catch(() => {});
+    const id = setInterval(() => {
+      fileMtime(path, scope)
+        .then((m) => {
+          if (cancelled || lastMtime.current == null || m <= lastMtime.current) return;
+          lastMtime.current = m;
+          setDiskVersion((v) => v + 1);
+        })
+        .catch(() => {});
+    }, RELOAD_POLL_MS);
+    return () => {
+      cancelled = true;
+      clearInterval(id);
+    };
+  }, [path, scope]);
+
+  return { bytes, error };
+}
+
+/** Decoded frames with their ImageData built once (zero-copy wrap of the
+ *  decoder's RGBA buffers), so drawing a frame is a single putImageData. */
+interface DecodedGif {
+  width: number;
+  height: number;
+  frames: { image: ImageData; delayMs: number }[];
+  truncated: boolean;
+}
+
+export function GifView({
+  path,
+  fileName,
+  onOpenExternally,
+  tabKey,
+}: {
+  path: string;
+  fileName: string;
+  onOpenExternally: () => void;
+  tabKey?: string;
+}) {
+  const viewPos = useViewerState(tabKey);
+  const { bytes, error } = useGifBytes(path);
+
+  // ── Decode ──────────────────────────────────────────────────────────────────
+  const [decoded, setDecoded] = useState<DecodedGif | null>(null);
+  const [decodeError, setDecodeError] = useState<string | null>(null);
+
+  // A genuine file switch drops the previous animation; a same-path disk reload
+  // (bytes swap) keeps it up until the fresh decode lands.
+  useEffect(() => {
+    setDecoded(null);
+    setDecodeError(null);
+  }, [path]);
+
+  useEffect(() => {
+    if (!bytes) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const stream = openGif(bytes);
+        const frames: DecodedGif["frames"] = [];
+        for (let f = stream.nextFrame(); f !== null; f = stream.nextFrame()) {
+          frames.push({
+            image: new ImageData(f.pixels, stream.width, stream.height),
+            delayMs: f.delayMs,
+          });
+          // Yield to the event loop every few frames so a huge GIF can't jank
+          // the whole window while it decodes.
+          if (frames.length % 10 === 0) {
+            await new Promise((r) => setTimeout(r));
+            if (cancelled) return;
+          }
+        }
+        if (frames.length === 0) throw new Error("GIF contains no image frames");
+        if (!cancelled) {
+          setDecoded({
+            width: stream.width,
+            height: stream.height,
+            frames,
+            truncated: stream.truncated,
+          });
+          setDecodeError(null);
+        }
+      } catch (e) {
+        if (!cancelled) setDecodeError(String(e));
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [bytes]);
+
+  const frameCount = decoded?.frames.length ?? 0;
+
+  // ── Transport state ─────────────────────────────────────────────────────────
+  // Autoplay by default: that's exactly what the old <img> rendering did.
+  const [playing, setPlaying] = useState(true);
+  const [frameIndex, setFrameIndex] = useState(0);
+  const [speed, setSpeed] = useState(1);
+  const [loop, setLoop] = useState(true);
+  // Mirrors frameIndex for the playback loop, which advances between renders.
+  const frameIndexRef = useRef(0);
+  frameIndexRef.current = frameIndex;
+
+  // Reset the transport on a file switch (not on a same-path reload — but if a
+  // reload shrank the file, clamp so the index stays addressable).
+  useEffect(() => {
+    setPlaying(true);
+    setFrameIndex(0);
+    frameIndexRef.current = 0;
+  }, [path]);
+  useEffect(() => {
+    if (decoded && frameIndexRef.current >= decoded.frames.length) {
+      setFrameIndex(decoded.frames.length - 1);
+    }
+  }, [decoded]);
+
+  // The playback loop: a rAF-driven timestamp accumulator. Each tick banks the
+  // elapsed wall-clock time (× speed) and advances as many frames as it pays
+  // for — possibly several per tick at high speed — so playback never drifts
+  // and per-frame delays are honored exactly.
+  useEffect(() => {
+    if (!playing || !decoded || decoded.frames.length < 2) return;
+    let raf = 0;
+    let lastTs: number | null = null;
+    let carry = 0;
+    const tick = (ts: number) => {
+      if (lastTs != null) {
+        carry = Math.min(carry + (ts - lastTs) * speed, MAX_CARRY_MS);
+        let i = frameIndexRef.current;
+        let advanced = false;
+        let ended = false;
+        let delay = effectiveDelayMs(decoded.frames[i].delayMs);
+        while (carry >= delay) {
+          carry -= delay;
+          if (i === decoded.frames.length - 1) {
+            if (!loop) {
+              ended = true;
+              break;
+            }
+            i = 0;
+          } else {
+            i++;
+          }
+          advanced = true;
+          delay = effectiveDelayMs(decoded.frames[i].delayMs);
+        }
+        if (advanced) {
+          frameIndexRef.current = i;
+          setFrameIndex(i);
+        }
+        if (ended) {
+          setPlaying(false);
+          return; // effect teardown cancels; don't schedule another tick
+        }
+      }
+      lastTs = ts;
+      raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [playing, decoded, speed, loop]);
+
+  // ── Canvas ──────────────────────────────────────────────────────────────────
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  useEffect(() => {
+    if (!decoded) return;
+    const ctx = canvasRef.current?.getContext("2d");
+    if (!ctx) return;
+    const frame = decoded.frames[Math.min(frameIndex, decoded.frames.length - 1)];
+    ctx.putImageData(frame.image, 0, 0);
+  }, [decoded, frameIndex]);
+
+  // ── Zoom / pan (mirrors ImageView) ──────────────────────────────────────────
+  const viewportRef = useRef<HTMLDivElement | null>(null);
+  const [scale, setScale] = useState(1);
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+  const fittedRef = useRef(true);
+  const dimsRef = useRef<{ w: number; h: number } | null>(null);
+
+  const viewportSize = () => {
+    const el = viewportRef.current;
+    return el ? { w: el.clientWidth, h: el.clientHeight } : { w: 0, h: 0 };
+  };
+
+  // Fit scale — never upscales past 1:1, so small GIFs stay crisp.
+  const fitScaleFor = useCallback((nat: { w: number; h: number }, vp: { w: number; h: number }) => {
+    if (nat.w === 0 || nat.h === 0 || vp.w === 0 || vp.h === 0) return 1;
+    return Math.min(vp.w / nat.w, vp.h / nat.h, 1);
+  }, []);
+
+  const fit = useCallback(() => {
+    const nat = dimsRef.current;
+    if (!nat) return;
+    const vp = viewportSize();
+    const s = fitScaleFor(nat, vp);
+    setScale(s);
+    setOffset({ x: (vp.w - nat.w * s) / 2, y: (vp.h - nat.h * s) / 2 });
+    fittedRef.current = true;
+  }, [fitScaleFor]);
+
+  const zoomTo = useCallback((target: number, anchor?: { x: number; y: number }) => {
+    const vp = viewportSize();
+    const a = anchor ?? { x: vp.w / 2, y: vp.h / 2 };
+    setScale((prev) => {
+      const next = clampScale(target);
+      setOffset((o) => zoomOffset(prev, next, o, a));
+      return next;
+    });
+    fittedRef.current = false;
+  }, []);
+
+  // First decode: restore the session-persisted zoom/pan (#viewerpos) or fit.
+  // A re-decode with different dimensions (file replaced on disk) re-fits; a
+  // same-size content update keeps the user's view.
+  useEffect(() => {
+    if (!decoded) return;
+    const nat = { w: decoded.width, h: decoded.height };
+    const prev = dimsRef.current;
+    dimsRef.current = nat;
+    if (!prev) {
+      const init = viewPos.initial;
+      if (init?.scale != null) {
+        setScale(init.scale);
+        setOffset({ x: init.offsetX ?? 0, y: init.offsetY ?? 0 });
+        fittedRef.current = false;
+        return;
+      }
+      fit();
+      return;
+    }
+    if (prev.w !== nat.w || prev.h !== nat.h) fit();
+  }, [decoded, fit, viewPos]);
+  useEffect(() => {
+    dimsRef.current = null; // a file switch re-fits from scratch
+  }, [path]);
+
+  // #viewerpos: persist zoom + pan (throttled, trailing-edge).
+  const persistTimer = useRef<number | null>(null);
+  useEffect(() => {
+    if (!decoded) return;
+    const s = scale;
+    const ox = offset.x;
+    const oy = offset.y;
+    if (persistTimer.current != null) window.clearTimeout(persistTimer.current);
+    persistTimer.current = window.setTimeout(
+      () => viewPos.persist({ scale: s, offsetX: ox, offsetY: oy }),
+      200,
+    );
+    return () => {
+      if (persistTimer.current != null) window.clearTimeout(persistTimer.current);
+    };
+  }, [scale, offset, decoded, viewPos]);
+
+  // Re-fit on viewport resize while still in the fitted baseline state.
+  useEffect(() => {
+    const el = viewportRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => {
+      if (fittedRef.current) fit();
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [fit, decoded]);
+
+  const wheelRef = useNonPassiveWheel((e) => {
+    if (!decoded) return;
+    e.preventDefault();
+    const rect = viewportRef.current?.getBoundingClientRect();
+    const anchor = rect ? { x: e.clientX - rect.left, y: e.clientY - rect.top } : undefined;
+    const factor = e.deltaY < 0 ? ZOOM_STEP : 1 / ZOOM_STEP;
+    zoomTo(scale * factor, anchor);
+  });
+  const setViewport = useCallback(
+    (el: HTMLDivElement | null) => {
+      viewportRef.current = el;
+      wheelRef(el);
+    },
+    [wheelRef],
+  );
+
+  // Pointer-drag panning.
+  const dragRef = useRef<{ id: number; startX: number; startY: number; ox: number; oy: number } | null>(null);
+  const [dragging, setDragging] = useState(false);
+  const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (!decoded || e.button !== 0) return;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    dragRef.current = { id: e.pointerId, startX: e.clientX, startY: e.clientY, ox: offset.x, oy: offset.y };
+    setDragging(true);
+  };
+  const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
+    const d = dragRef.current;
+    if (!d || d.id !== e.pointerId) return;
+    setOffset({ x: d.ox + (e.clientX - d.startX), y: d.oy + (e.clientY - d.startY) });
+    fittedRef.current = false;
+  };
+  const endDrag = (e: React.PointerEvent<HTMLDivElement>) => {
+    const d = dragRef.current;
+    if (!d || d.id !== e.pointerId) return;
+    dragRef.current = null;
+    setDragging(false);
+  };
+  const onDoubleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    const nat = dimsRef.current;
+    if (!nat) return;
+    const atFit = Math.abs(scale - fitScaleFor(nat, viewportSize())) < 0.001;
+    if (atFit) {
+      const rect = viewportRef.current?.getBoundingClientRect();
+      const anchor = rect ? { x: e.clientX - rect.left, y: e.clientY - rect.top } : undefined;
+      zoomTo(1, anchor);
+    } else {
+      fit();
+    }
+  };
+
+  // ── Transport handlers ──────────────────────────────────────────────────────
+  // Stepping/scrubbing pauses: you asked for a specific frame, hold it.
+  const stepTo = (i: number) => {
+    setPlaying(false);
+    setFrameIndex(i);
+  };
+  const prevFrame = () => stepTo(frameIndex === 0 ? frameCount - 1 : frameIndex - 1);
+  const nextFrame = () => stepTo((frameIndex + 1) % frameCount);
+  // The scrubber pauses while dragging and resumes only if it was playing.
+  const scrubWasPlaying = useRef(false);
+  const onScrubDown = () => {
+    scrubWasPlaying.current = playing;
+    setPlaying(false);
+  };
+  const onScrubUp = () => {
+    if (scrubWasPlaying.current) setPlaying(true);
+    scrubWasPlaying.current = false;
+  };
+
+  // Decode failure → degrade to the webview's native <img> animation.
+  const fallbackUrl = useMemo(() => {
+    if (decodeError == null || bytes == null) return null;
+    return URL.createObjectURL(new Blob([bytes]));
+  }, [decodeError, bytes]);
+  useEffect(
+    () => () => {
+      if (fallbackUrl) URL.revokeObjectURL(fallbackUrl);
+    },
+    [fallbackUrl],
+  );
+
+  const percent = Math.round(scale * 100);
+  const currentDelay = decoded ? decoded.frames[Math.min(frameIndex, frameCount - 1)].delayMs : 0;
+  const shownDelay = effectiveDelayMs(currentDelay);
+
+  return (
+    <div className="file-viewer">
+      <ViewerHeader onOpenExternally={onOpenExternally}>
+        {decoded != null && (
+          <div className="file-viewer-zoom gif-transport" role="group" aria-label="Playback controls">
+            <button
+              className="file-viewer-zoom-btn"
+              onClick={prevFrame}
+              disabled={frameCount < 2}
+              title="Previous frame"
+              aria-label="Previous frame"
+            >
+              ⏮
+            </button>
+            <button
+              className="file-viewer-zoom-btn"
+              onClick={() => setPlaying((p) => !p)}
+              disabled={frameCount < 2}
+              title={playing ? "Pause" : "Play"}
+              aria-label={playing ? "Pause" : "Play"}
+            >
+              {playing ? "⏸" : "▶"}
+            </button>
+            <button
+              className="file-viewer-zoom-btn"
+              onClick={nextFrame}
+              disabled={frameCount < 2}
+              title="Next frame"
+              aria-label="Next frame"
+            >
+              ⏭
+            </button>
+            <input
+              type="range"
+              className="gif-scrubber"
+              min={0}
+              max={Math.max(frameCount - 1, 0)}
+              value={Math.min(frameIndex, frameCount - 1)}
+              disabled={frameCount < 2}
+              onPointerDown={onScrubDown}
+              onPointerUp={onScrubUp}
+              onChange={(e) => setFrameIndex(Number(e.target.value))}
+              title="Scrub frames"
+              aria-label="Frame scrubber"
+            />
+            <Dropdown
+              className="gif-speed"
+              value={String(speed)}
+              options={SPEED_OPTIONS}
+              onChange={(v) => setSpeed(Number(v))}
+              title="Playback speed"
+            />
+            <button
+              className="file-viewer-zoom-btn"
+              onClick={() => setLoop((l) => !l)}
+              title={loop ? "Looping — click to play once" : "Play once — click to loop"}
+              aria-label="Loop"
+              aria-pressed={loop}
+              style={loop ? undefined : { opacity: 0.45 }}
+            >
+              🔁
+            </button>
+            <span
+              className="file-viewer-zoom-level"
+              // The readout shows the delay the frame PLAYS at; when the authored
+              // value was bumped by the 100ms convention, the tooltip says so.
+              title={
+                shownDelay !== currentDelay
+                  ? `Authored ${currentDelay} ms; played at the ${shownDelay} ms browser convention`
+                  : "Frame / total · frame delay"
+              }
+            >
+              {Math.min(frameIndex + 1, frameCount)} / {frameCount} · {shownDelay} ms
+            </span>
+          </div>
+        )}
+        <div className="file-viewer-zoom" role="group" aria-label="Zoom controls">
+          <button
+            className="file-viewer-zoom-btn"
+            onClick={() => zoomTo(scale / ZOOM_STEP)}
+            disabled={!decoded || scale <= MIN_SCALE}
+            title="Zoom out"
+            aria-label="Zoom out"
+          >
+            −
+          </button>
+          <span className="file-viewer-zoom-level" title="Current zoom">{percent}%</span>
+          <button
+            className="file-viewer-zoom-btn"
+            onClick={() => zoomTo(scale * ZOOM_STEP)}
+            disabled={!decoded || scale >= MAX_SCALE}
+            title="Zoom in"
+            aria-label="Zoom in"
+          >
+            +
+          </button>
+          <button
+            className="file-viewer-zoom-btn file-viewer-zoom-text"
+            onClick={() => fit()}
+            disabled={!decoded}
+            title="Fit to window"
+          >
+            Fit
+          </button>
+          <button
+            className="file-viewer-zoom-btn file-viewer-zoom-text"
+            onClick={() => zoomTo(1)}
+            disabled={!decoded}
+            title="Actual size (100%)"
+          >
+            1:1
+          </button>
+        </div>
+      </ViewerHeader>
+      <div className="file-viewer-body file-viewer-image-body">
+        {error != null ? (
+          <div className="file-viewer-error">{error}</div>
+        ) : decodeError != null ? (
+          // Degrade, don't wall: the webview still animates the <img> natively,
+          // so a decoder gap only loses the transport, never the picture.
+          <div className="gif-fallback" style={{ display: "flex", flexDirection: "column", width: "100%", height: "100%" }}>
+            <div className="file-viewer-loading" style={{ padding: "4px 8px" }}>
+              Couldn't decode this GIF for frame control — showing native playback.
+              Try opening it externally if it looks wrong.
+            </div>
+            {fallbackUrl != null && (
+              <div style={{ flex: 1, minHeight: 0, display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden" }}>
+                <img
+                  src={fallbackUrl}
+                  alt={fileName}
+                  style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain" }}
+                />
+              </div>
+            )}
+          </div>
+        ) : decoded == null ? (
+          <div className="file-viewer-loading">{bytes == null ? "Loading…" : "Decoding…"}</div>
+        ) : (
+          <div style={{ display: "flex", flexDirection: "column", width: "100%", height: "100%" }}>
+            {decoded.truncated && (
+              <div className="file-viewer-loading" style={{ padding: "4px 8px" }}>
+                Showing the first {frameCount} frame{frameCount === 1 ? "" : "s"} — the file is
+                truncated or exceeds the decode memory cap.
+              </div>
+            )}
+            <div
+              ref={setViewport}
+              className={`file-viewer-image-viewport${dragging ? " dragging" : ""}`}
+              style={{ flex: 1, minHeight: 0 }}
+              onPointerDown={onPointerDown}
+              onPointerMove={onPointerMove}
+              onPointerUp={endDrag}
+              onPointerCancel={endDrag}
+              onDoubleClick={onDoubleClick}
+            >
+              <canvas
+                ref={canvasRef}
+                className="file-viewer-image"
+                width={decoded.width}
+                height={decoded.height}
+                aria-label={fileName}
+                style={{
+                  transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})`,
+                  transformOrigin: "0 0",
+                  imageRendering: scale > 2 ? "pixelated" : "auto",
+                }}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/embed/ImageAnnotator.css b/src/components/embed/ImageAnnotator.css
index b64f855..78ccc45 100644
--- a/src/components/embed/ImageAnnotator.css
+++ b/src/components/embed/ImageAnnotator.css
@@ -53,7 +53,7 @@
   border: 1px solid var(--border-color, #3a3a3c);
   background: transparent;
   color: var(--text-primary, #f2f2f7);
-  border-radius: 6px;
+  border-radius: var(--radius);
   padding: 4px 8px;
   min-width: 28px;
   height: 28px;
@@ -110,7 +110,7 @@
   height: 28px;
   padding: 0;
   border: 1px solid var(--border-color, #3a3a3c);
-  border-radius: 6px;
+  border-radius: var(--radius);
   background: transparent;
   cursor: pointer;
 }
@@ -149,7 +149,7 @@
   max-width: 100%;
   max-height: 100%;
   line-height: 0;
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--shadow-3);
 }
 
 .image-annotator__canvas {
diff --git a/src/components/embed/PresentationOverlay.tsx b/src/components/embed/PresentationOverlay.tsx
new file mode 100644
index 0000000..5f77b98
--- /dev/null
+++ b/src/components/embed/PresentationOverlay.tsx
@@ -0,0 +1,540 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { UntestedTag } from "../common/UntestedTag";
+
+/**
+ * A presentation / walkthrough aid layered over EVERY native viewer (image,
+ * PDF, markdown, code, table, …). It gives two ephemeral, non-persisted tools:
+ *
+ *  - **Marker** — a highlighter pen. Drag to lay down a translucent colored
+ *    stroke (six highlighter colors); undo the last stroke or clear them all.
+ *    Strokes live on a `<canvas>` in NORMALIZED (0..1) pane coordinates, so they
+ *    rescale when the pane is resized rather than drifting off the content.
+ *  - **Laser** — a glowing dot that follows the cursor with a short fading
+ *    trail, drawn on its own transient canvas driven by rAF. Nothing it draws
+ *    is kept; it exists only while the pointer moves.
+ *
+ * It is mounted ONCE by `FileViewerPane` over the chosen viewer, so no
+ * per-viewer wiring is needed. When no tool is active the whole overlay is
+ * `pointer-events: none` and every click falls straight through to the viewer;
+ * only the small floating toolbar keeps pointer events so it can be reopened.
+ * Marker strokes are session-only (component state) — a presentation aid, not a
+ * saved annotation — and reset when the viewer tab closes.
+ */
+
+type Tool = "off" | "marker" | "laser";
+
+/** One completed marker stroke: it carries the color, width and opacity it was
+ *  drawn WITH, so changing the menu never restyles marks already on the page. */
+interface Stroke {
+  color: string;
+  /** Stroke width in CSS px at device-pixel-ratio 1. */
+  width: number;
+  /** Ink opacity, 0..1. */
+  alpha: number;
+  /** Points as [x,y] fractions of the pane's width/height (0..1). */
+  pts: Array<[number, number]>;
+}
+
+/** Highlighter palette — translucent, so overlapping strokes read as ink. */
+const PALETTE: Array<{ name: string; value: string }> = [
+  { name: "Yellow", value: "#ffe14d" },
+  { name: "Green", value: "#7cf06a" },
+  { name: "Pink", value: "#ff6ec7" },
+  { name: "Blue", value: "#5cc8ff" },
+  { name: "Orange", value: "#ffa63d" },
+  { name: "Red", value: "#ff5252" },
+];
+
+/** Default highlighter stroke width, in CSS px, at device-pixel-ratio 1. */
+const MARKER_WIDTH = 16;
+const MIN_WIDTH = 4;
+const MAX_WIDTH = 48;
+/** Default ink opacity (0..1) and its adjustable range. */
+const MARKER_ALPHA = 0.38;
+const MIN_ALPHA = 0.1;
+const MAX_ALPHA = 1;
+/** How long a laser trail point lives, in ms. */
+const LASER_LIFETIME = 420;
+
+export function PresentationOverlay() {
+  const [tool, setTool] = useState<Tool>("off");
+  const [open, setOpen] = useState(false);
+  const [color, setColor] = useState(PALETTE[0].value);
+  const [width, setWidth] = useState(MARKER_WIDTH);
+  const [alpha, setAlpha] = useState(MARKER_ALPHA);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [strokes, setStrokes] = useState<Stroke[]>([]);
+
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const markerRef = useRef<HTMLCanvasElement | null>(null);
+  const laserRef = useRef<HTMLCanvasElement | null>(null);
+  const captureRef = useRef<HTMLDivElement | null>(null);
+
+  // The in-progress marker stroke (mutated during a drag; committed on release).
+  const drawing = useRef<Stroke | null>(null);
+  // Transient laser trail: recent pointer samples with a birth timestamp.
+  const trail = useRef<Array<{ x: number; y: number; t: number }>>([]);
+  // The laser's current resting position (pane-local px). Kept separate from the
+  // fading trail so the dot stays lit while the pointer is STILL; null once the
+  // cursor leaves the pane.
+  const laserPos = useRef<{ x: number; y: number } | null>(null);
+  const rafRef = useRef<number | null>(null);
+  // Latest tool/strokes/color/width/alpha for callbacks that close over stale state.
+  const toolRef = useRef(tool);
+  toolRef.current = tool;
+  const strokesRef = useRef(strokes);
+  strokesRef.current = strokes;
+  const colorRef = useRef(color);
+  colorRef.current = color;
+  const widthRef = useRef(width);
+  widthRef.current = width;
+  const alphaRef = useRef(alpha);
+  alphaRef.current = alpha;
+
+  const active = tool !== "off";
+
+  // ── Canvas sizing ─────────────────────────────────────────────────────────
+  // Keep both canvases matched to the pane's pixel size (× DPR for crispness);
+  // redraw the marker layer whenever the box changes so normalized strokes
+  // re-lay out at the new size.
+  const sizeCanvases = useCallback(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const w = root.clientWidth;
+    const h = root.clientHeight;
+    const dpr = window.devicePixelRatio || 1;
+    for (const c of [markerRef.current, laserRef.current]) {
+      if (!c) continue;
+      const pw = Math.max(1, Math.round(w * dpr));
+      const ph = Math.max(1, Math.round(h * dpr));
+      if (c.width !== pw || c.height !== ph) {
+        c.width = pw;
+        c.height = ph;
+      }
+    }
+  }, []);
+
+  const drawMarker = useCallback(() => {
+    const c = markerRef.current;
+    if (!c) return;
+    const ctx = c.getContext("2d");
+    if (!ctx) return;
+    const dpr = window.devicePixelRatio || 1;
+    ctx.clearRect(0, 0, c.width, c.height);
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    const paint = (s: Stroke) => {
+      if (s.pts.length === 0) return;
+      ctx.strokeStyle = s.color;
+      ctx.globalAlpha = s.alpha;
+      ctx.lineWidth = s.width * dpr;
+      ctx.beginPath();
+      const [x0, y0] = s.pts[0];
+      ctx.moveTo(x0 * c.width, y0 * c.height);
+      if (s.pts.length === 1) {
+        // A tap: draw a dot so a single click still marks something.
+        ctx.lineTo(x0 * c.width + 0.01, y0 * c.height);
+      }
+      for (let i = 1; i < s.pts.length; i++) {
+        ctx.lineTo(s.pts[i][0] * c.width, s.pts[i][1] * c.height);
+      }
+      ctx.stroke();
+    };
+    for (const s of strokesRef.current) paint(s);
+    if (drawing.current) paint(drawing.current);
+    ctx.globalAlpha = 1;
+  }, []);
+
+  useLayoutEffect(() => {
+    sizeCanvases();
+    drawMarker();
+    const root = rootRef.current;
+    if (!root || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => {
+      sizeCanvases();
+      drawMarker();
+    });
+    ro.observe(root);
+    return () => ro.disconnect();
+  }, [sizeCanvases, drawMarker]);
+
+  // Redraw the committed strokes whenever they change.
+  useEffect(() => {
+    drawMarker();
+  }, [strokes, drawMarker]);
+
+  // ── Laser animation ───────────────────────────────────────────────────────
+  useEffect(() => {
+    if (tool !== "laser") {
+      trail.current = [];
+      laserPos.current = null;
+      if (rafRef.current != null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+      const c = laserRef.current;
+      const ctx = c?.getContext("2d");
+      if (c && ctx) ctx.clearRect(0, 0, c.width, c.height);
+      return;
+    }
+    const tick = () => {
+      const c = laserRef.current;
+      const ctx = c?.getContext("2d");
+      if (c && ctx) {
+        const dpr = window.devicePixelRatio || 1;
+        const now = performance.now();
+        trail.current = trail.current.filter((p) => now - p.t < LASER_LIFETIME);
+        ctx.clearRect(0, 0, c.width, c.height);
+        ctx.save();
+        for (const p of trail.current) {
+          const age = (now - p.t) / LASER_LIFETIME; // 0 fresh → 1 gone
+          const a = 1 - age;
+          const r = (4 + 6 * a) * dpr;
+          ctx.globalAlpha = a * 0.5;
+          ctx.fillStyle = colorRef.current;
+          ctx.beginPath();
+          ctx.arc(p.x * dpr, p.y * dpr, r, 0, Math.PI * 2);
+          ctx.fill();
+        }
+        // The dot rests at the last known position, not the newest trail point,
+        // so it stays lit while the pointer is motionless (the trail fades out
+        // behind it but the head does not vanish).
+        const head = laserPos.current ?? trail.current[trail.current.length - 1];
+        if (head) {
+          // Bright glowing core.
+          ctx.globalAlpha = 1;
+          ctx.shadowColor = colorRef.current;
+          ctx.shadowBlur = 18 * dpr;
+          ctx.fillStyle = colorRef.current;
+          ctx.beginPath();
+          ctx.arc(head.x * dpr, head.y * dpr, 7 * dpr, 0, Math.PI * 2);
+          ctx.fill();
+          ctx.shadowBlur = 0;
+          ctx.fillStyle = "#ffffff";
+          ctx.globalAlpha = 0.9;
+          ctx.beginPath();
+          ctx.arc(head.x * dpr, head.y * dpr, 2.5 * dpr, 0, Math.PI * 2);
+          ctx.fill();
+        }
+        ctx.restore();
+      }
+      rafRef.current = requestAnimationFrame(tick);
+    };
+    rafRef.current = requestAnimationFrame(tick);
+    return () => {
+      if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    };
+  }, [tool]);
+
+  // ── Pointer handling on the capture surface ───────────────────────────────
+  const relPoint = (e: React.PointerEvent): [number, number] => {
+    const root = rootRef.current;
+    if (!root) return [0, 0];
+    const r = root.getBoundingClientRect();
+    return [(e.clientX - r.left) / r.width, (e.clientY - r.top) / r.height];
+  };
+
+  const pushLaser = (e: React.PointerEvent) => {
+    const r = rootRef.current!.getBoundingClientRect();
+    const p = { x: e.clientX - r.left, y: e.clientY - r.top };
+    laserPos.current = p;
+    trail.current.push({ ...p, t: performance.now() });
+  };
+
+  const onPointerDown = (e: React.PointerEvent) => {
+    if (toolRef.current === "off") return;
+    (e.target as HTMLElement).setPointerCapture?.(e.pointerId);
+    if (toolRef.current === "marker") {
+      drawing.current = {
+        color: colorRef.current,
+        width: widthRef.current,
+        alpha: alphaRef.current,
+        pts: [relPoint(e)],
+      };
+      drawMarker();
+    } else if (toolRef.current === "laser") {
+      pushLaser(e);
+    }
+  };
+
+  const onPointerMove = (e: React.PointerEvent) => {
+    if (toolRef.current === "marker") {
+      if (!drawing.current) return;
+      drawing.current.pts.push(relPoint(e));
+      drawMarker();
+    } else if (toolRef.current === "laser") {
+      pushLaser(e);
+    }
+  };
+
+  const onPointerUp = () => {
+    if (toolRef.current === "marker" && drawing.current) {
+      const s = drawing.current;
+      drawing.current = null;
+      if (s.pts.length > 0) setStrokes((prev) => [...prev, s]);
+    }
+  };
+
+  // Cursor left the pane: drop the resting laser dot so it doesn't hover over
+  // whatever the mouse moved on to.
+  const onPointerLeave = () => {
+    laserPos.current = null;
+  };
+
+  // The capture surface sits over the whole pane to receive marker/laser drags,
+  // but that same `pointer-events: auto` swallows the wheel — so a viewer no
+  // longer scrolls while a tool is armed. Forward the wheel through to whatever
+  // scrollable element is under the cursor: momentarily make the surface
+  // transparent to hit-testing, find the element beneath, scroll its nearest
+  // scrollable ancestor ourselves. Native + non-passive so `preventDefault`
+  // takes. (Marker strokes stay screen-anchored, which is expected for a
+  // presentation aid — you scroll to new content, then keep marking.)
+  useEffect(() => {
+    const cap = captureRef.current;
+    if (!cap || !active) return;
+    const onWheel = (e: WheelEvent) => {
+      const prev = cap.style.pointerEvents;
+      cap.style.pointerEvents = "none";
+      const under = document.elementFromPoint(e.clientX, e.clientY);
+      cap.style.pointerEvents = prev;
+      const scroller = findScrollable(under, e.deltaX, e.deltaY);
+      if (scroller) {
+        scroller.scrollBy({ left: e.deltaX, top: e.deltaY });
+        e.preventDefault();
+      }
+    };
+    cap.addEventListener("wheel", onWheel, { passive: false });
+    return () => cap.removeEventListener("wheel", onWheel);
+  }, [active]);
+
+  // Esc leaves the active tool (back to click-through) without closing the bar.
+  useEffect(() => {
+    if (!active) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setTool("off");
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [active]);
+
+  const undo = () => setStrokes((prev) => prev.slice(0, -1));
+  const clear = () => setStrokes([]);
+
+  const showSwatches = open && (tool === "marker" || tool === "laser");
+
+  return (
+    <div
+      ref={rootRef}
+      className={`presentation-overlay${active ? " active" : ""}`}
+      // The whole layer is inert unless a tool is active; only the toolbar
+      // (which re-enables pointer events on itself) stays clickable.
+      style={{ pointerEvents: "none" }}
+    >
+      <canvas ref={markerRef} className="presentation-canvas" />
+      <canvas ref={laserRef} className="presentation-canvas" />
+      {active && (
+        <div
+          ref={captureRef}
+          className="presentation-capture"
+          onPointerDown={onPointerDown}
+          onPointerMove={onPointerMove}
+          onPointerUp={onPointerUp}
+          onPointerCancel={onPointerUp}
+          onPointerLeave={onPointerLeave}
+          style={{ cursor: tool === "laser" ? "none" : "crosshair" }}
+        />
+      )}
+
+      <div className="presentation-toolbar" style={{ pointerEvents: "auto" }}>
+        {!open ? (
+          <button
+            className="presentation-fab"
+            title="Presentation tools (marker & laser)"
+            aria-label="Presentation tools"
+            onClick={() => setOpen(true)}
+          >
+            <PenIcon />
+          </button>
+        ) : (
+          <div className="presentation-tools" role="toolbar" aria-label="Presentation tools">
+            <button
+              className={`presentation-tool${tool === "marker" ? " on" : ""}`}
+              title="Marker (highlight)"
+              aria-pressed={tool === "marker"}
+              onClick={() => setTool((t) => (t === "marker" ? "off" : "marker"))}
+            >
+              <MarkerIcon />
+            </button>
+            <button
+              className={`presentation-tool${tool === "laser" ? " on" : ""}`}
+              title="Laser pointer"
+              aria-pressed={tool === "laser"}
+              onClick={() => setTool((t) => (t === "laser" ? "off" : "laser"))}
+            >
+              <LaserIcon />
+            </button>
+
+            {showSwatches && (
+              <div className="presentation-swatches">
+                {PALETTE.map((c) => (
+                  <button
+                    key={c.value}
+                    className={`presentation-swatch${color === c.value ? " on" : ""}`}
+                    style={{ background: c.value }}
+                    title={c.name}
+                    aria-label={c.name}
+                    aria-pressed={color === c.value}
+                    onClick={() => setColor(c.value)}
+                  />
+                ))}
+              </div>
+            )}
+
+            {tool === "marker" && (
+              <div className="presentation-settings-wrap">
+                <button
+                  className={`presentation-tool${settingsOpen ? " on" : ""}`}
+                  title="Thickness & opacity"
+                  aria-label="Thickness & opacity"
+                  aria-pressed={settingsOpen}
+                  onClick={() => setSettingsOpen((o) => !o)}
+                >
+                  <SlidersIcon />
+                </button>
+                {settingsOpen && (
+                  <div className="presentation-settings" role="group" aria-label="Marker settings">
+                    <label className="presentation-slider">
+                      <span className="presentation-slider-label">
+                        Thickness <b>{width}px</b>
+                      </span>
+                      <input
+                        type="range"
+                        min={MIN_WIDTH}
+                        max={MAX_WIDTH}
+                        step={1}
+                        value={width}
+                        onChange={(e) => setWidth(Number(e.target.value))}
+                      />
+                    </label>
+                    <label className="presentation-slider">
+                      <span className="presentation-slider-label">
+                        Opacity <b>{Math.round(alpha * 100)}%</b>
+                      </span>
+                      <input
+                        type="range"
+                        min={Math.round(MIN_ALPHA * 100)}
+                        max={Math.round(MAX_ALPHA * 100)}
+                        step={5}
+                        value={Math.round(alpha * 100)}
+                        onChange={(e) => setAlpha(Number(e.target.value) / 100)}
+                      />
+                    </label>
+                    <div
+                      className="presentation-preview"
+                      style={{ background: color, opacity: alpha, height: `${Math.max(4, Math.min(width, MAX_WIDTH))}px` }}
+                      aria-hidden="true"
+                    />
+                  </div>
+                )}
+              </div>
+            )}
+
+            <span className="presentation-sep" aria-hidden="true" />
+            <button
+              className="presentation-tool"
+              title="Undo last mark"
+              aria-label="Undo last mark"
+              disabled={strokes.length === 0}
+              onClick={undo}
+            >
+              ↶
+            </button>
+            <button
+              className="presentation-tool"
+              title="Clear all marks"
+              aria-label="Clear all marks"
+              disabled={strokes.length === 0}
+              onClick={clear}
+            >
+              🗑
+            </button>
+            <button
+              className="presentation-tool"
+              title="Close presentation tools"
+              aria-label="Close presentation tools"
+              onClick={() => {
+                setTool("off");
+                setOpen(false);
+              }}
+            >
+              ✕
+            </button>
+            <UntestedTag />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/** Nearest ancestor of `el` that can actually scroll in the wheel's direction,
+ *  so a wheel forwarded through the capture surface moves the right container. */
+function findScrollable(el: Element | null, dx: number, dy: number): Element | null {
+  let node: Element | null = el;
+  while (node && node !== document.body && node !== document.documentElement) {
+    const st = getComputedStyle(node);
+    const scrollableY =
+      (st.overflowY === "auto" || st.overflowY === "scroll" || st.overflowY === "overlay") &&
+      node.scrollHeight > node.clientHeight;
+    const scrollableX =
+      (st.overflowX === "auto" || st.overflowX === "scroll" || st.overflowX === "overlay") &&
+      node.scrollWidth > node.clientWidth;
+    if ((dy !== 0 && scrollableY) || (dx !== 0 && scrollableX)) return node;
+    node = node.parentElement;
+  }
+  return null;
+}
+
+// ── Icons (inline SVG so no icon dependency is pulled in) ─────────────────────
+
+function PenIcon() {
+  return (
+    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M12 19l7-7 3 3-7 7-3-3z" />
+      <path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z" />
+      <path d="M2 2l7.586 7.586" />
+      <circle cx="11" cy="11" r="2" />
+    </svg>
+  );
+}
+
+function MarkerIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M9 11l-6 6v3h3l6-6" />
+      <path d="M12 8l3 3" />
+      <path d="M17 3l4 4-8 8-4-4z" />
+    </svg>
+  );
+}
+
+function SlidersIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0" />
+      <circle cx="15" cy="6" r="2" fill="currentColor" />
+      <circle cx="9" cy="12" r="2" fill="currentColor" />
+      <circle cx="17" cy="18" r="2" fill="currentColor" />
+    </svg>
+  );
+}
+
+function LaserIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="12" r="3" fill="currentColor" stroke="none" />
+      <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9L17 7M7 17l-2.1 2.1" />
+    </svg>
+  );
+}
diff --git a/src/components/embed/SyncMergeView.tsx b/src/components/embed/SyncMergeView.tsx
new file mode 100644
index 0000000..b492e5c
--- /dev/null
+++ b/src/components/embed/SyncMergeView.tsx
@@ -0,0 +1,196 @@
+import { useEffect, useMemo, useState } from "react";
+import { invoke } from "@tauri-apps/api/core";
+import { CompareView } from "./CompareView";
+import { useProjectsStore } from "../../stores/projects";
+import { useSyncStore } from "../../stores/sync";
+import { useTabsStore } from "../../stores/tabs";
+import { resolveProjectDirectory, resolveLocalMirror } from "../../types";
+import { relFromAbs } from "../../lib/viewers/fileUtils";
+
+/** Join a remote directory and a project-relative path with a single `/`
+ *  (POSIX — the host is always Unix here), tolerating a trailing slash on the
+ *  root and a leading one on the rel. */
+function joinRemote(root: string, rel: string): string {
+  return `${root.replace(/\/+$/, "")}/${rel.replace(/^\/+/, "")}`;
+}
+
+/**
+ * Three-way merge for a diverged (amber) file of a remote project — the PyCharm-
+ * style resolve view opened from the orange list. The left column is the local
+ * mirror copy, the right column is the current host copy, and the editable
+ * middle is the merged result with per-block take-left/right. "Resolve" writes
+ * the merged text to the mirror and force-pushes it to the host, so both sides
+ * converge and the file clears amber → green.
+ *
+ * `path` is the mirror-side absolute path (`mirrorRoot/rel`), exactly as the
+ * orange list builds it; the host path is derived from the project's
+ * `remote_path` and the same rel.
+ */
+export function SyncMergeView({
+  path,
+  projectId,
+  tabKey,
+}: {
+  path: string;
+  projectId: string | null;
+  tabKey?: string;
+}) {
+  const project = useProjectsStore((s) => s.projects.find((p) => p.id === projectId));
+
+  // Resolve the mirror root the same way FileViewerPane does, so `rel` keys the
+  // sync backend exactly like the orange list's own pull/push calls.
+  const { rel, hostPath } = useMemo(() => {
+    const projectDir = resolveProjectDirectory(project);
+    const mirrorRoot = resolveLocalMirror(project) ?? (projectDir ? `${projectDir}/mirror` : null);
+    const r = mirrorRoot ? relFromAbs(mirrorRoot, path) : null;
+    const remotePath = project?.remote?.remote_path;
+    return {
+      rel: r,
+      hostPath: r && remotePath ? joinRemote(remotePath, r) : null,
+    };
+  }, [project, path]);
+
+  const [localText, setLocalText] = useState<string | null>(null);
+  const [hostText, setHostText] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [applying, setApplying] = useState(false);
+  // Set when the on-open byte-for-byte test proved the two sides identical and
+  // self-resolved the divergence (re-recorded the base, cleared amber → green).
+  // The merge UI has nothing to merge in that case — we say so instead.
+  const [autoResolved, setAutoResolved] = useState(false);
+
+  // On open, run a byte-for-byte test on the backend (where the bytes live): an
+  // amber verdict is size+mtime-based, so a re-save with the same content or a
+  // bare `touch` flags a file whose bytes never diverged. `sync_resolve_if_identical`
+  // reads both sides, and if they match it re-records the base (no transfer) and
+  // returns true — the file clears amber → green with no user action. Only when it
+  // returns false (a genuine divergence) do we fall through to the three-way merge.
+  useEffect(() => {
+    if (!projectId || !rel) return;
+    let cancelled = false;
+    invoke<boolean>("sync_resolve_if_identical", { projectId, relPath: rel })
+      .then((resolved) => {
+        if (cancelled || !resolved) return;
+        setAutoResolved(true);
+        void useSyncStore.getState().refreshStatus(projectId);
+      })
+      .catch(() => {
+        // Best-effort: a cold pool / read error just leaves the merge viewer to
+        // handle the divergence the ordinary way.
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [projectId, rel]);
+
+  // Load both sides: the mirror over the local fs, the host over SFTP (both via
+  // `read_file_text`, which routes by whether the path is under the mirror).
+  useEffect(() => {
+    if (!hostPath) {
+      setError("This file is not part of a remote project's mirror.");
+      return;
+    }
+    let cancelled = false;
+    setError(null);
+    setLocalText(null);
+    setHostText(null);
+    Promise.all([
+      invoke<string>("read_file_text", { path, projectId }).catch(() => ""),
+      invoke<string>("read_file_text", { path: hostPath, projectId }),
+    ])
+      .then(([local, host]) => {
+        if (cancelled) return;
+        setLocalText(local);
+        setHostText(host);
+      })
+      .catch((e) => {
+        if (!cancelled) setError(String(e));
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [path, hostPath, projectId]);
+
+  const closeTab = () => {
+    if (tabKey) useTabsStore.getState().removeTab(tabKey);
+  };
+
+  const apply = (merged: string) => {
+    if (!projectId || !rel || applying) return;
+    setApplying(true);
+    setError(null);
+    // Write the merged result to the mirror, then force-push it to the host so
+    // both sides converge (the file clears amber). `push` refreshes sync status.
+    (async () => {
+      await invoke("write_file_text", { path, content: merged, projectId });
+      await useSyncStore.getState().push(projectId, rel, true);
+    })()
+      .then(() => closeTab())
+      .catch((e) => {
+        setError(String(e));
+        setApplying(false);
+      });
+  };
+
+  const loaded = localText != null && hostText != null;
+  // Divergence is judged on size+mtime vs the recorded base, never content, so an
+  // amber file can hold byte-identical sides (re-saved same content, touched, or a
+  // stale base). The authoritative signal is `autoResolved` — the backend's
+  // byte-for-byte test, which already cleared the amber marker. `identical` (a text
+  // compare) is the fallback for display before that test returns or if the pool is
+  // cold; either way, say so explicitly, else the empty diff reads as a broken viewer.
+  const identical = autoResolved || (loaded && localText === hostText);
+
+  if (error != null && !loaded) {
+    return (
+      <div style={{ position: "absolute", inset: 0 }}>
+        <div className="file-viewer-error" style={{ padding: "1rem" }}>{error}</div>
+      </div>
+    );
+  }
+  if (!loaded) {
+    return (
+      <div style={{ position: "absolute", inset: 0 }}>
+        <div className="file-viewer-loading" style={{ padding: "1rem" }}>Loading both sides…</div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column" }}>
+      {error != null && (
+        <div className="file-viewer-error" style={{ padding: "4px 8px", flex: "0 0 auto" }}>{error}</div>
+      )}
+      {identical && (
+        <div
+          className="file-viewer-loading"
+          style={{
+            flex: "0 0 auto",
+            padding: "6px 10px",
+            fontSize: "11px",
+            borderBottom: "1px solid var(--border-color)",
+            background: "var(--bg-elevated, rgba(255,255,255,0.04))",
+          }}
+        >
+          The mirror and host bytes are <strong>identical</strong> — this file was
+          flagged diverged only because its size/modified-time drifted from the
+          recorded sync base, not its content.{" "}
+          {autoResolved
+            ? "The divergence has been resolved automatically (the base was re-recorded and the amber marker cleared)."
+            : "“Resolve” just re-records the base and clears the amber marker."}
+        </div>
+      )}
+      <div style={{ flex: "1 1 auto", minHeight: 0, position: "relative" }}>
+        <CompareView
+          path={path}
+          left={{ text: localText, title: "Local (mirror)" }}
+          rightText={hostText}
+          rightTitle="Remote (host)"
+          applyLabel={applying ? "Resolving…" : "Resolve"}
+          onApply={apply}
+          onClose={closeTab}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/embed/TableView.tsx b/src/components/embed/TableView.tsx
index be3928a..a855f2d 100644
--- a/src/components/embed/TableView.tsx
+++ b/src/components/embed/TableView.tsx
@@ -1,8 +1,28 @@
-import { useMemo, useState, useRef, useEffect } from "react";
+import { useMemo, useState, useRef, useEffect, useCallback } from "react";
 import { invoke } from "@tauri-apps/api/core";
-import { ViewerHeader, useViewerState, useReadonlyFile } from "./FileViewerPane";
+import {
+  ViewerHeader,
+  useViewerState,
+  useEditableFile,
+  SaveButton,
+  UndoRedoButtons,
+  ExternalChangeBanner,
+} from "./FileViewerPane";
 import { Dropdown } from "../common/Dropdown";
-import { parseDelimited, sortRows, delimiterForPath } from "../../lib/viewers/table";
+import {
+  parseTable,
+  resolveDelimiter,
+  bodyRefs,
+  filterRefs,
+  sortRefs,
+  sortRefsByIndex,
+  replaceCell,
+  insertRowAfter,
+  deleteRow,
+  columnWidths,
+  DELIMITER_CANDIDATES,
+  type ParsedTable,
+} from "../../lib/viewers/table";
 
 /** Backend `read_spreadsheet` result (Dev G). Mirrors the Rust `SheetData`. */
 interface SheetData {
@@ -12,26 +32,110 @@ interface SheetData {
 }
 
 /** Spreadsheet workbooks (xlsx/xls/xlsm) load via the backend `calamine` reader
- *  instead of the CSV text path. */
+ *  instead of the CSV text path — and are read-only: they arrive already parsed,
+ *  with no source text for an edit to splice itself back into. */
 const SHEET_RE = /\.(xlsx|xls|xlsm)$/i;
 
-/** Above this many body rows we window the render to a leading slice to keep a
- *  huge CSV from freezing the webview; a notice tells the reader the rest is
- *  hidden (open externally for the full file). Dependency-free, v1-simple. */
-const MAX_RENDER_ROWS = 2000;
+/** Fallback row height, in px, until a rendered row is measured (see `rowH`). */
+const DEFAULT_ROW_H = 26;
+/** Rows rendered beyond the viewport on each side, so a fast scroll stays fed. */
+const OVERSCAN = 8;
+/** Width of the row-number gutter, in px. */
+const GUTTER_W = 56;
+/** Horizontal padding of a body cell, in px — part of each column's box. */
+const CELL_PAD_X = 20;
+/** Smallest a column can be dragged to, in px — narrow enough to tuck a column
+ *  away, wide enough to keep its resize handle grabbable. */
+const MIN_COL_W = 32;
+/** The zebra tint for odd body rows: the panel's own text mixed a hair into the
+ *  panel, so it darkens on a light theme and lightens on a dark one, and stays
+ *  opaque (the sticky gutter must not let body cells bleed through — and an opaque
+ *  mix sidesteps the WebKitGTK translucent-color-mix caveat). */
+const STRIPE_BG = "color-mix(in srgb, var(--text-primary) 5%, var(--bg-panel))";
+/** The row-number gutter's own tint — a heavier mix than the zebra stripe so the
+ *  sticky column reads as chrome, distinct from the body cells that scroll under
+ *  it. Opaque, for the same sticky-bleed reason `STRIPE_BG` is. Paired with a
+ *  2px right border (`GUTTER_BORDER`) that stays visible during a horizontal
+ *  scroll. */
+const GUTTER_BG = "color-mix(in srgb, var(--text-primary) 12%, var(--bg-panel))";
+/** The gutter's right edge and the header's bottom edge: a heavier rule than the
+ *  1px cell grid, so the sticky chrome stays legible against the scrolling body. */
+const GUTTER_BORDER = "2px solid var(--border-color)";
+/** The header row's own background. It is the SOLID header tone, never the raw
+ *  `--bg-header` — that is a *gradient* in the fancy themes, so every `<th>`
+ *  would repaint the whole 3-stop ramp across its own width (a striped header),
+ *  and the sorted column's `color-mix` over it would be an invalid value, i.e.
+ *  a fully transparent header the scrolling body shows through. Sticky chrome
+ *  must be opaque. */
+const HEADER_BG = "var(--bg-header-solid, var(--bg-panel))";
+/** The active sort column reads as a distinct vertical band, not just a tinted
+ *  header — a strong accent header, an accent-tinted column body (kept light
+ *  enough that the zebra stripe still shows through it, so the two tints stack),
+ *  and 2px accent edge-lines drawn with an inset box-shadow so the band gains no
+ *  width and header/body stay column-aligned. Matches the system monitor's table
+ *  (`.sysmon-table th.sorted` / `td.sorted`). */
+const SORTED_HEADER_BG = "color-mix(in srgb, var(--accent) 30%, var(--bg-header-solid))";
+const SORTED_CELL_BG = "color-mix(in srgb, var(--accent) 8%, var(--bg-panel))";
+const SORTED_CELL_BG_STRIPE = "color-mix(in srgb, var(--accent) 15%, var(--bg-panel))";
+/** The accent edge-lines bracketing the sorted column, as an inset shadow so they
+ *  cost no layout width (a real border would desync the measured column widths). */
+const SORTED_EDGE = "inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent)";
+/** Sentinel `SortSpec.col` for the row-number gutter: it sorts on each row's
+ *  source index, not a cell value, so it needs a column id no real column has. */
+const GUTTER_SORT_COL = -1;
+
+/** The separator names offered in the header, keyed by the character itself. */
+const DELIMITER_LABELS: Record<string, string> = {
+  ",": "Comma",
+  ";": "Semicolon",
+  "\t": "Tab",
+  "|": "Pipe",
+};
+
+const KNOWN_DELIMITERS = new Set<string>(DELIMITER_CANDIDATES);
+
+/** How a separator reads in a menu — a tab has no glyph, so it needs a name. */
+function delimiterLabel(ch: string): string {
+  return DELIMITER_LABELS[ch] ?? `"${ch}"`;
+}
 
 interface SortSpec {
   col: number;
   dir: "asc" | "desc";
 }
 
+interface EditSpec {
+  /** Index into the parsed rows — `0` is the header row. */
+  row: number;
+  col: number;
+}
+
+const EMPTY_TABLE: ParsedTable = { rows: [], cells: [], rowSpans: [], newline: "\n" };
+
 /**
- * In-app CSV/TSV table viewer (#40). Read-only for v1: loads the file via the
- * shared `useReadonlyFile` hook (auto-reloads on disk change), parses it RFC
- * 4180-style with `parseDelimited` (delimiter chosen by extension), and renders a
- * scrollable grid. Row 0 is the header; clicking a header cell toggles a sort on
- * that column (asc → desc → asc) applied to the body rows only. Ragged rows are
- * padded to the header width. Very large files render a capped slice with a note.
+ * In-app table viewer for delimited text (#40), and read-only for spreadsheet
+ * workbooks. Three things shape it:
+ *
+ *  - **The separator is a guess the reader can overrule.** `.csv` does not say
+ *    which character separates the columns, so it is sniffed from the content
+ *    (`resolveDelimiter`) and offered in the header — where a semicolon or pipe
+ *    file the sniffer misread gets corrected. An explicit choice is persisted per
+ *    tab; "Auto" is not, leaving the sniffer free to do better on the next open.
+ *
+ *  - **An edit is a splice, not a re-write.** Cell edits go through
+ *    `replaceCell`/`insertRowAfter`/`deleteRow` into the *text* draft that
+ *    `useEditableFile` already owns — the same draft the code editor would show.
+ *    So a table edit is an ordinary dirty/undoable/autosaved/Ctrl+S change, and
+ *    the cells nobody touched keep their bytes exactly (see `lib/viewers/table.ts`).
+ *    It is also why sorting and filtering carry each row's *source* index: what a
+ *    splice must address is the row a cell really came from, not the row it
+ *    happens to occupy on screen.
+ *
+ *  - **Only the visible rows are rendered.** A million-row CSV would otherwise
+ *    freeze the webview, so the body is windowed against the scroll position —
+ *    which is in turn why the column widths are measured over the whole file up
+ *    front: sizing them to what is on screen would resize every column as the
+ *    reader scrolled.
  */
 export function TableView({
   path,
@@ -44,16 +148,30 @@ export function TableView({
 }) {
   const isSheet = useMemo(() => SHEET_RE.test(path), [path]);
 
-  // CSV/TSV text path (unchanged). For spreadsheets we don't read the raw file;
-  // the hook still runs (hooks can't be conditional) but its content is ignored.
-  const file = useReadonlyFile(path);
+  // The text draft behind a CSV/TSV. For a spreadsheet we don't edit the file at
+  // all; the hook still runs (hooks can't be conditional) but its content is
+  // ignored in favour of the backend's parsed rows.
+  const file = useEditableFile(path);
+  const {
+    content,
+    draft,
+    setDraft,
+    save,
+    isDirty,
+    saving,
+    saveError,
+    undo,
+    redo,
+    canUndo,
+    canRedo,
+    externalChange,
+    reloadFromDisk,
+    keepMine,
+  } = file;
+
   const viewPos = useViewerState(tabKey);
-  const [sort, setSort] = useState<SortSpec | null>(null);
-  const scrollRef = useRef<HTMLDivElement | null>(null);
-  const restored = useRef(false);
-  const persistTimer = useRef<number | null>(null);
 
-  // Spreadsheet state: backend-loaded rows + sheet list + selected sheet.
+  // ── Spreadsheet path: rows arrive pre-parsed from the backend ──────────────
   const [sheetData, setSheetData] = useState<SheetData | null>(null);
   const [sheetError, setSheetError] = useState<string | null>(null);
   const [sheetLoaded, setSheetLoaded] = useState(false);
@@ -82,68 +200,458 @@ export function TableView({
     };
   }, [isSheet, path, selectedSheet]);
 
-  // Unify the two sources into the loading/error/content the render pipeline uses.
-  const content = isSheet ? null : file.content;
   const error = isSheet ? sheetError : file.error;
   const loaded = isSheet ? sheetLoaded : file.loaded;
+  /** Spreadsheets have no source text to splice into, so they stay read-only. */
+  const editable = !isSheet && loaded && error == null;
 
-  const delimiter = useMemo(() => delimiterForPath(path), [path]);
-
-  const { header, body, width } = useMemo(() => {
-    // Spreadsheets arrive as already-parsed string[][] from the backend.
-    const rows = isSheet
-      ? sheetData?.rows ?? null
-      : content == null
-        ? null
-        : parseDelimited(content, delimiter);
-    if (rows == null) return { header: [] as string[], body: [] as string[][], width: 0 };
-    if (rows.length === 0) return { header: [] as string[], body: [] as string[][], width: 0 };
-    const head = rows[0];
-    const bod = rows.slice(1);
-    // Width is the widest row so ragged rows pad rather than truncate.
-    const w = rows.reduce((m, r) => Math.max(m, r.length), 0);
-    return { header: head, body: bod, width: w };
-  }, [isSheet, sheetData, content, delimiter]);
-
-  const sortedBody = useMemo(() => {
-    if (!sort) return body;
-    return sortRows(body, sort.col, sort.dir);
-  }, [body, sort]);
-
-  const truncated = sortedBody.length > MAX_RENDER_ROWS;
-  const visibleRows = truncated ? sortedBody.slice(0, MAX_RENDER_ROWS) : sortedBody;
+  // ── The separator ─────────────────────────────────────────────────────────
+  // Sniffed from what is on disk, not from the draft: re-sniffing mid-edit could
+  // change the delimiter under the reader as they type (blanking a row can flip
+  // the modal column count), and re-cut every column with it.
+  const sniffed = useMemo(
+    () => (content == null ? "," : resolveDelimiter(path, content)),
+    [path, content],
+  );
 
-  const toggleSort = (col: number) => {
-    setSort((cur) => {
-      if (!cur || cur.col !== col) return { col, dir: "asc" };
-      return { col, dir: cur.dir === "asc" ? "desc" : "asc" };
+  // `null` = auto. An override is seeded from the tab's persisted state, so the
+  // correction a reader made to a mis-sniffed file survives reopen and restart.
+  const [override, setOverride] = useState<string | null>(
+    () => viewPos.initial?.delimiter ?? null,
+  );
+  // Held apart from `override` so that a custom character which happens to be one
+  // of the offered ones doesn't silently snap the menu back off "Custom…".
+  const [customMode, setCustomMode] = useState<boolean>(() => {
+    const seed = viewPos.initial?.delimiter;
+    return seed != null && !KNOWN_DELIMITERS.has(seed);
+  });
+
+  const delimiter = override ?? sniffed;
+
+  // Persist the override, and only the override — "Auto" writes nothing, so the
+  // sniffer stays free to read the file better next time.
+  useEffect(() => {
+    viewPos.persist({ delimiter: override ?? undefined });
+  }, [override, viewPos]);
+
+  const onPickDelimiter = (choice: string) => {
+    if (choice === "auto") {
+      setCustomMode(false);
+      setOverride(null);
+    } else if (choice === "custom") {
+      setCustomMode(true);
+      setOverride(delimiter); // start from whatever is in force, so nothing jumps
+    } else {
+      setCustomMode(false);
+      setOverride(choice);
+    }
+  };
+
+  // ── The table ─────────────────────────────────────────────────────────────
+  const table = useMemo(
+    () => (isSheet ? EMPTY_TABLE : parseTable(draft, delimiter)),
+    [isSheet, draft, delimiter],
+  );
+  const rows = isSheet ? (sheetData?.rows ?? []) : table.rows;
+
+  const header = rows.length > 0 ? rows[0] : [];
+  // Width is the widest row, so ragged rows pad rather than truncate.
+  const width = useMemo(() => rows.reduce((m, r) => Math.max(m, r.length), 0), [rows]);
+  const widths = useMemo(() => columnWidths(rows, width), [rows, width]);
+
+  const [query, setQuery] = useState("");
+  const [sort, setSort] = useState<SortSpec | null>(null);
+
+  // ── Hidden columns ────────────────────────────────────────────────────────
+  const [hidden, setHidden] = useState<Set<number>>(
+    () => new Set(viewPos.initial?.hiddenColumns ?? []),
+  );
+
+  useEffect(() => {
+    viewPos.persist({
+      hiddenColumns: hidden.size > 0 ? [...hidden].sort((a, b) => a - b) : undefined,
+    });
+  }, [hidden, viewPos]);
+
+  // A hidden column is an *index*, and only the separator that produced it gives
+  // that index a meaning. Re-cut the row with a different one and index 3 is a
+  // different column — so a delimiter change drops the hiding rather than
+  // silently hiding whatever now lands there. The first delimiter seen after the
+  // file loads is not a change: it is the sniffer arriving, and it must not wipe
+  // the set the tab was restored with.
+  const settledDelimiter = useRef<string | null>(null);
+  useEffect(() => {
+    if (!loaded) return;
+    if (settledDelimiter.current == null) {
+      settledDelimiter.current = delimiter;
+      return;
+    }
+    if (settledDelimiter.current === delimiter) return;
+    settledDelimiter.current = delimiter;
+    setHidden(new Set());
+    setColWidths({});
+  }, [loaded, delimiter]);
+
+  const toggleColumn = (col: number) => {
+    setHidden((cur) => {
+      const next = new Set(cur);
+      if (next.has(col)) next.delete(col);
+      else next.add(col);
+      return next;
     });
   };
 
-  // Restore the saved scroll position once the body renders, then persist as the
-  // reader scrolls (throttled, trailing-edge) — mirrors the other viewers.
+  // ── Drag-resized column widths ──────────────────────────────────────────────
+  // A per-column pixel override, keyed by parsed-column index. Absent ⇒ the
+  // column keeps its measured `ch` width. Persisted per tab (like the hidden set)
+  // and, for the same reason, dropped when the delimiter changes below: the index
+  // means a different column once the row is cut with a different separator.
+  const [colWidths, setColWidths] = useState<Record<number, number>>(
+    () => viewPos.initial?.columnWidths ?? {},
+  );
+
+  useEffect(() => {
+    const has = Object.keys(colWidths).length > 0;
+    viewPos.persist({ columnWidths: has ? colWidths : undefined });
+  }, [colWidths, viewPos]);
+
+  // The live drag: which column, where the pointer started, and the width the
+  // column had then — measured off the real `<th>` so a first drag of an
+  // un-overridden (ch-sized) column starts from its rendered pixel width.
+  const resizing = useRef<{ col: number; startX: number; startW: number } | null>(null);
+
+  const startResize = (e: React.PointerEvent, col: number) => {
+    e.preventDefault();
+    e.stopPropagation(); // don't let the header read this as a sort click
+    const handle = e.currentTarget as HTMLElement;
+    const th = handle.parentElement as HTMLElement | null;
+    const startW = th?.offsetWidth ?? colWidths[col] ?? MIN_COL_W;
+    resizing.current = { col, startX: e.clientX, startW };
+    handle.setPointerCapture(e.pointerId);
+  };
+
+  const onResizeMove = (e: React.PointerEvent) => {
+    const r = resizing.current;
+    if (!r) return;
+    const next = Math.max(MIN_COL_W, Math.round(r.startW + (e.clientX - r.startX)));
+    setColWidths((cur) => (cur[r.col] === next ? cur : { ...cur, [r.col]: next }));
+  };
+
+  const endResize = (e: React.PointerEvent) => {
+    if (!resizing.current) return;
+    resizing.current = null;
+    try {
+      (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
+    } catch {
+      /* pointer already released */
+    }
+  };
+
+  // Double-click the handle to drop the override and return the column to its
+  // measured (auto-fit) width.
+  const resetWidth = (col: number) => {
+    setColWidths((cur) => {
+      if (cur[col] == null) return cur;
+      const next = { ...cur };
+      delete next[col];
+      return next;
+    });
+  };
+
+  /** The columns actually rendered, as indices into the *parsed* row — never
+   *  re-numbered, so an edit still addresses the column the cell came from. */
+  const cols = useMemo(
+    () => Array.from({ length: width }, (_, i) => i).filter((c) => !hidden.has(c)),
+    [width, hidden],
+  );
+
+  // ── Flash rows gained on a disk reload ──────────────────────────────────────
+  // `content` changes only on a (re)load from disk, never on an in-app keystroke
+  // (edits move `draft`, not `content`) — so a CSV appended to underneath the
+  // viewer re-reads here, and we briefly highlight whichever body rows weren't
+  // there before. The comparison keys on `content` alone: sorting, filtering and
+  // delimiter changes all leave it untouched, so none of them flash. The first
+  // load (and every path switch, when `content` resets to null) only seeds the
+  // baseline. Rows are matched by value as a multiset, so an unchanged row that
+  // merely slid down when an earlier row was inserted is not counted as new.
+  const [flashRows, setFlashRows] = useState<Set<number>>(new Set());
+  const prevSigsRef = useRef<Map<string, number> | null>(null);
+  const flashTimers = useRef<number[]>([]);
+  const rowsRef = useRef(rows);
+  rowsRef.current = rows;
+
+  useEffect(() => {
+    if (isSheet) return;
+    if (content == null) {
+      prevSigsRef.current = null;
+      return;
+    }
+    const bodyRows = rowsRef.current.slice(1);
+    const counts = new Map<string, number>();
+    for (const cells of bodyRows) {
+      const sig = JSON.stringify(cells);
+      counts.set(sig, (counts.get(sig) ?? 0) + 1);
+    }
+    const prev = prevSigsRef.current;
+    prevSigsRef.current = counts;
+    if (prev == null) return; // first settled content: seed only, don't flash
+
+    const remaining = new Map(prev);
+    const added = new Set<number>();
+    bodyRows.forEach((cells, i) => {
+      const sig = JSON.stringify(cells);
+      const left = remaining.get(sig) ?? 0;
+      if (left > 0) remaining.set(sig, left - 1);
+      else added.add(i + 1); // +1: source index, past the header at 0
+    });
+    if (added.size === 0) return;
+
+    setFlashRows((cur) => new Set([...cur, ...added]));
+    const timer = window.setTimeout(() => {
+      setFlashRows((cur) => {
+        const next = new Set(cur);
+        for (const idx of added) next.delete(idx);
+        return next;
+      });
+    }, 3000);
+    flashTimers.current.push(timer);
+  }, [content, isSheet]);
+
+  useEffect(() => () => flashTimers.current.forEach((t) => clearTimeout(t)), []);
+
+  const body = useMemo(() => bodyRefs(rows), [rows]);
+  // Filtering follows the eye: a row matched on a hidden column would show up with
+  // nothing on it to explain why.
+  const filtered = useMemo(() => filterRefs(body, query, cols), [body, query, cols]);
+  const visible = useMemo(() => {
+    if (!sort) return filtered;
+    if (sort.col === GUTTER_SORT_COL) return sortRefsByIndex(filtered, sort.dir);
+    return sortRefs(filtered, sort.col, sort.dir);
+  }, [filtered, sort]);
+
+  // ── Windowing ─────────────────────────────────────────────────────────────
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [viewportH, setViewportH] = useState(600);
+  const [rowH, setRowH] = useState(DEFAULT_ROW_H);
+  const restored = useRef(false);
+  const persistTimer = useRef<number | null>(null);
+  const scrollFrame = useRef<number | null>(null);
+
+  // Measure a rendered row rather than trusting the CSS to add up: the window's
+  // arithmetic is only right if this height is the one actually on screen.
+  const measureRow = useCallback(
+    (el: HTMLTableRowElement | null) => {
+      if (!el) return;
+      const h = el.offsetHeight;
+      if (h > 0 && h !== rowH) setRowH(h);
+    },
+    [rowH],
+  );
+
+  const total = visible.length;
+  const firstRow = Math.max(0, Math.floor(scrollTop / rowH) - OVERSCAN);
+  const lastRow = Math.min(total, Math.ceil((scrollTop + viewportH) / rowH) + OVERSCAN);
+  const rendered = visible.slice(firstRow, lastRow);
+  const padTop = firstRow * rowH;
+  const padBottom = Math.max(0, (total - lastRow) * rowH);
+
   const onScroll = () => {
     const el = scrollRef.current;
-    if (!el || !restored.current) return;
+    if (!el) return;
     const top = el.scrollTop;
-    if (persistTimer.current != null) window.clearTimeout(persistTimer.current);
+    // Coalesce to a frame: scroll fires far faster than we can usefully re-window.
+    if (scrollFrame.current == null) {
+      scrollFrame.current = requestAnimationFrame(() => {
+        scrollFrame.current = null;
+        setScrollTop(scrollRef.current?.scrollTop ?? top);
+      });
+    }
+    if (!restored.current) return;
+    if (persistTimer.current != null) clearTimeout(persistTimer.current);
     persistTimer.current = window.setTimeout(() => viewPos.persist({ scrollTop: top }), 200);
   };
 
   const onScrollRef = (el: HTMLDivElement | null) => {
     scrollRef.current = el;
-    if (el && !restored.current && loaded) {
+    if (!el) return;
+    if (!restored.current && loaded) {
       restored.current = true;
       const top = viewPos.initial?.scrollTop;
-      if (top && top > 0) el.scrollTop = top;
+      if (top && top > 0) {
+        el.scrollTop = top;
+        setScrollTop(top);
+      }
+    }
+  };
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => setViewportH(el.clientHeight));
+    ro.observe(el);
+    setViewportH(el.clientHeight);
+    return () => ro.disconnect();
+  }, [loaded]);
+
+  useEffect(
+    () => () => {
+      if (scrollFrame.current != null) cancelAnimationFrame(scrollFrame.current);
+      if (persistTimer.current != null) clearTimeout(persistTimer.current);
+    },
+    [],
+  );
+
+  // ── Editing ───────────────────────────────────────────────────────────────
+  const [editing, setEditing] = useState<EditSpec | null>(null);
+  const [editValue, setEditValue] = useState("");
+
+  const beginEdit = (row: number, col: number) => {
+    if (!editable) return;
+    setEditing({ row, col });
+    setEditValue(rows[row]?.[col] ?? "");
+  };
+
+  const commitEdit = (next?: "right") => {
+    if (!editing) return;
+    const { row, col } = editing;
+    if (editValue !== (rows[row]?.[col] ?? "")) {
+      setDraft(replaceCell(draft, table, row, col, editValue, delimiter));
+    }
+    // Tab walks to the next *visible* column — a hidden one has no cell on screen
+    // to put the cursor in. Its value is untouched by the splice just made, so it
+    // can be read from the current parse without waiting for the re-parse.
+    if (next === "right") {
+      const right = cols[cols.indexOf(col) + 1];
+      if (right != null) {
+        setEditing({ row, col: right });
+        setEditValue(rows[row]?.[right] ?? "");
+        return;
+      }
     }
+    setEditing(null);
   };
 
-  // Column index range for padding ragged rows out to the header width.
-  const cols = useMemo(() => Array.from({ length: width }, (_, i) => i), [width]);
+  const onEditKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      commitEdit();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      setEditing(null);
+    } else if (e.key === "Tab") {
+      e.preventDefault();
+      commitEdit("right");
+    }
+  };
+
+  const addRow = () => {
+    if (!editable || rows.length === 0) return;
+    setDraft(insertRowAfter(draft, table, rows.length - 1, width, delimiter));
+  };
+
+  const removeRow = (row: number) => {
+    if (!editable) return;
+    setEditing(null);
+    setDraft(deleteRow(draft, table, row));
+  };
+
+  // A single click on a header sorts, a double click renames it — so when the file
+  // is editable the sort waits long enough to find out which it was. A read-only
+  // sheet has no second meaning to disambiguate, so it sorts immediately.
+  const sortClick = useRef<number | null>(null);
+
+  // asc → desc → default: the third click clears the sort, which is the only
+  // way back to the file's own row order once a column has been sorted.
+  const toggleSort = (col: number) => {
+    setSort((cur) => {
+      if (!cur || cur.col !== col) return { col, dir: "asc" };
+      if (cur.dir === "asc") return { col, dir: "desc" };
+      return null;
+    });
+  };
+
+  // The gutter has no second meaning to disambiguate (no rename, no double-click),
+  // so it sorts immediately — asc restores the file's row order, desc reverses it.
+  const onGutterClick = () => toggleSort(GUTTER_SORT_COL);
+
+  const onHeaderClick = (col: number) => {
+    if (!editable) {
+      toggleSort(col);
+      return;
+    }
+    if (sortClick.current != null) return;
+    sortClick.current = window.setTimeout(() => {
+      sortClick.current = null;
+      toggleSort(col);
+    }, 200);
+  };
+
+  const onHeaderDoubleClick = (col: number) => {
+    if (sortClick.current != null) {
+      clearTimeout(sortClick.current);
+      sortClick.current = null;
+    }
+    beginEdit(0, col);
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    if (!editable) return;
+    const mod = e.ctrlKey || e.metaKey;
+    if (!mod) return;
+    const key = e.key.toLowerCase();
+    if (key === "s") {
+      e.preventDefault();
+      void save();
+    } else if (editing == null && key === "z") {
+      // While a cell input is open, ctrl+z belongs to that input's own text.
+      e.preventDefault();
+      if (e.shiftKey) redo();
+      else undo();
+    } else if (editing == null && key === "y") {
+      e.preventDefault();
+      redo();
+    }
+  };
+
+  const gutterSorted = sort?.col === GUTTER_SORT_COL;
+
+  // A column's CSS width: its drag override in px when it has one, else its
+  // measured `ch` count plus the cell padding.
+  const colWidthStyle = (c: number) =>
+    colWidths[c] != null ? `${colWidths[c]}px` : `calc(${widths[c]}ch + ${CELL_PAD_X}px)`;
+
+  // The table's total width mixes the two unit systems: sum the overridden
+  // columns' px straight, and the rest as `ch` + their padding.
+  const naturalCh = cols.reduce((sum, c) => (colWidths[c] != null ? sum : sum + widths[c]), 0);
+  const overridePx = cols.reduce(
+    (sum, c) => sum + (colWidths[c] != null ? colWidths[c] : CELL_PAD_X),
+    GUTTER_W,
+  );
+  const tableWidth = `calc(${naturalCh}ch + ${overridePx}px)`;
+
+  /** The names shown in the columns menu — a column with a blank header still
+   *  needs something to click on. */
+  const columnNames = useMemo(
+    () =>
+      Array.from({ length: width }, (_, c) => {
+        const name = header[c] ?? "";
+        return name.trim() === "" ? `Column ${c + 1}` : name;
+      }),
+    [width, header],
+  );
+
+  const countLabel =
+    query.trim() !== ""
+      ? `${visible.length} of ${body.length} rows`
+      : `${body.length} ${body.length === 1 ? "row" : "rows"}`;
 
   return (
-    <div className="file-viewer" style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+    <div
+      className="file-viewer"
+      style={{ display: "flex", flexDirection: "column", height: "100%" }}
+      onKeyDown={onKeyDown}
+    >
       <ViewerHeader onOpenExternally={onOpenExternally}>
         {isSheet && sheetData && sheetData.sheet_names.length > 1 && (
           <Dropdown
@@ -153,6 +661,68 @@ export function TableView({
             options={sheetData.sheet_names.map((name) => ({ value: name, label: name }))}
           />
         )}
+        {!isSheet && loaded && !error && (
+          <>
+            <Dropdown
+              value={customMode ? "custom" : (override ?? "auto")}
+              onChange={onPickDelimiter}
+              title="Column separator"
+              options={[
+                { value: "auto", label: `Auto (${delimiterLabel(sniffed)})` },
+                ...DELIMITER_CANDIDATES.map((d) => ({ value: d, label: delimiterLabel(d) })),
+                { value: "custom", label: "Custom…" },
+              ]}
+            />
+            {customMode && (
+              <input
+                value={override ?? ""}
+                onChange={(e) => {
+                  // Take the last character typed, so typing over a filled box
+                  // swaps the separator instead of being swallowed.
+                  const ch = e.target.value.slice(-1);
+                  if (ch) setOverride(ch);
+                }}
+                title="Separator character"
+                aria-label="Separator character"
+                style={{
+                  width: 28,
+                  textAlign: "center",
+                  padding: "2px 4px",
+                  background: "var(--bg-input, var(--bg-panel))",
+                  color: "var(--text-primary)",
+                  border: "1px solid var(--border-color)",
+                  borderRadius: "var(--radius-sm)",
+                  fontFamily: "var(--font-mono, monospace)",
+                }}
+              />
+            )}
+          </>
+        )}
+        {loaded && !error && width > 0 && (
+          <ColumnsMenu
+            names={columnNames}
+            hidden={hidden}
+            onToggle={toggleColumn}
+            onShowAll={() => setHidden(new Set())}
+            onHideAll={() => setHidden(new Set(Array.from({ length: width }, (_, i) => i)))}
+          />
+        )}
+        {loaded && !error && (
+          <input
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Filter rows…"
+            aria-label="Filter rows"
+            style={{
+              width: 140,
+              padding: "2px 6px",
+              background: "var(--bg-input, var(--bg-panel))",
+              color: "var(--text-primary)",
+              border: "1px solid var(--border-color)",
+              borderRadius: "var(--radius-sm)",
+            }}
+          />
+        )}
         {loaded && !error && (
           <span
             style={{
@@ -163,11 +733,35 @@ export function TableView({
               whiteSpace: "nowrap",
             }}
           >
-            {body.length} {body.length === 1 ? "row" : "rows"}
-            {truncated ? ` (showing first ${MAX_RENDER_ROWS})` : ""}
+            {countLabel}
           </span>
         )}
+        {editable && (
+          <button
+            onClick={addRow}
+            title="Append a row"
+            style={{
+              all: "unset",
+              cursor: "pointer",
+              padding: "2px 8px",
+              borderRadius: "var(--radius-sm)",
+              fontSize: 12,
+              color: "var(--text-primary)",
+              border: "1px solid var(--border-color)",
+            }}
+          >
+            + Row
+          </button>
+        )}
+        {editable && (
+          <UndoRedoButtons undo={undo} redo={redo} canUndo={canUndo} canRedo={canRedo} />
+        )}
+        {editable && <SaveButton isDirty={isDirty} saving={saving} save={() => void save()} />}
       </ViewerHeader>
+      {!isSheet && externalChange && (
+        <ExternalChangeBanner onReload={reloadFromDisk} onKeep={keepMine} />
+      )}
+      {!isSheet && saveError && <div className="file-viewer-error">{saveError}</div>}
       {error != null ? (
         <div className="file-viewer-error">{error}</div>
       ) : !loaded ? (
@@ -178,10 +772,12 @@ export function TableView({
         <div
           ref={onScrollRef}
           onScroll={onScroll}
+          tabIndex={0}
           style={{
             flex: 1,
             minHeight: 0,
             overflow: "auto",
+            outline: "none",
             background: "var(--bg-panel)",
             color: "var(--text-primary)",
           }}
@@ -189,16 +785,72 @@ export function TableView({
           <table
             style={{
               borderCollapse: "collapse",
+              tableLayout: "fixed",
               fontSize: 13,
               fontFamily: "var(--font-mono, monospace)",
-              width: "max-content",
+              width: tableWidth,
               minWidth: "100%",
             }}
           >
+            <colgroup>
+              <col style={{ width: GUTTER_W }} />
+              {cols.map((c) => (
+                <col key={c} style={{ width: colWidthStyle(c) }} />
+              ))}
+            </colgroup>
             <thead>
               <tr>
+                {/* The gutter's header holds the corner while both the header row
+                    and the gutter column are stuck to their edges — and it sorts
+                    by row order: click to restore the file's order, again to
+                    reverse it. */}
+                <th
+                  style={{
+                    position: "sticky",
+                    top: 0,
+                    left: 0,
+                    zIndex: 2,
+                    background: gutterSorted ? SORTED_HEADER_BG : HEADER_BG,
+                    borderBottom: "1px solid var(--border-color)",
+                    borderRight: GUTTER_BORDER,
+                    padding: 0,
+                  }}
+                >
+                  <button
+                    onClick={onGutterClick}
+                    title={
+                      gutterSorted
+                        ? "Row order — click to reverse, again to clear"
+                        : "Sort by row order (restore the file's order)"
+                    }
+                    aria-label="Sort by row order"
+                    style={{
+                      all: "unset",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      gap: 3,
+                      width: "100%",
+                      boxSizing: "border-box",
+                      padding: "5px 6px",
+                      cursor: "pointer",
+                      userSelect: "none",
+                      fontSize: 11,
+                      fontWeight: gutterSorted ? 700 : 600,
+                      color: gutterSorted ? "var(--text-primary)" : "var(--text-secondary)",
+                    }}
+                  >
+                    <span aria-hidden="true">#</span>
+                    {gutterSorted && (
+                      <span style={{ color: "var(--accent)", fontWeight: 700 }}>
+                        {sort!.dir === "asc" ? "▲" : "▼"}
+                      </span>
+                    )}
+                  </button>
+                </th>
                 {cols.map((c) => {
                   const active = sort?.col === c;
+                  const isEditing = editing?.row === 0 && editing.col === c;
                   return (
                     <th
                       key={c}
@@ -206,72 +858,214 @@ export function TableView({
                         position: "sticky",
                         top: 0,
                         zIndex: 1,
-                        background: "var(--bg-panel)",
-                        borderBottom: "2px solid var(--border-color)",
+                        background: active ? SORTED_HEADER_BG : HEADER_BG,
+                        boxShadow: active ? SORTED_EDGE : undefined,
+                        borderBottom: "1px solid var(--border-color)",
                         borderRight: "1px solid var(--border-color)",
                         padding: 0,
                         textAlign: "left",
                         whiteSpace: "nowrap",
                       }}
                     >
-                      <button
-                        onClick={() => toggleSort(c)}
-                        title="Sort by this column"
+                      {isEditing ? (
+                        <CellInput
+                          value={editValue}
+                          onChange={setEditValue}
+                          onKeyDown={onEditKeyDown}
+                          onBlur={() => commitEdit()}
+                        />
+                      ) : (
+                        <button
+                          onClick={() => onHeaderClick(c)}
+                          onDoubleClick={() => onHeaderDoubleClick(c)}
+                          title={
+                            editable
+                              ? "Sort by this column — double-click to rename"
+                              : "Sort by this column"
+                          }
+                          style={{
+                            all: "unset",
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 4,
+                            width: "100%",
+                            boxSizing: "border-box",
+                            padding: "5px 10px",
+                            cursor: "pointer",
+                            userSelect: "none",
+                            fontWeight: active ? 700 : 600,
+                            color: active ? "var(--text-primary)" : "var(--text-secondary)",
+                          }}
+                        >
+                          <span
+                            style={{
+                              overflow: "hidden",
+                              textOverflow: "ellipsis",
+                              whiteSpace: "nowrap",
+                            }}
+                          >
+                            {header[c] ?? ""}
+                            {active && (
+                              <span style={{ color: "var(--accent)", fontWeight: 700 }}>
+                                {sort!.dir === "asc" ? " ▲" : " ▼"}
+                              </span>
+                            )}
+                          </span>
+                        </button>
+                      )}
+                      {/* The drag-to-resize grip on the column's right edge. It sits
+                          over the sort button (which is why its pointer handlers
+                          stop propagation), captures the pointer so the drag keeps
+                          tracking past the thin grip, and double-clicks back to the
+                          measured width. */}
+                      <div
+                        onPointerDown={(e) => startResize(e, c)}
+                        onPointerMove={onResizeMove}
+                        onPointerUp={endResize}
+                        onDoubleClick={(e) => {
+                          e.stopPropagation();
+                          resetWidth(c);
+                        }}
+                        title="Drag to resize · double-click to auto-fit"
+                        aria-hidden="true"
                         style={{
-                          all: "unset",
-                          display: "flex",
-                          alignItems: "center",
-                          gap: 4,
-                          width: "100%",
-                          boxSizing: "border-box",
-                          padding: "6px 10px",
-                          cursor: "pointer",
-                          fontWeight: 600,
-                          color: "var(--text-primary)",
+                          position: "absolute",
+                          top: 0,
+                          right: 0,
+                          width: 7,
+                          height: "100%",
+                          cursor: "col-resize",
+                          zIndex: 3,
+                          touchAction: "none",
+                          userSelect: "none",
                         }}
-                      >
-                        <span>{header[c] ?? ""}</span>
-                        <span style={{ opacity: active ? 0.9 : 0.25, fontSize: 11 }}>
-                          {active ? (sort!.dir === "asc" ? "↑" : "↓") : "↕"}
-                        </span>
-                      </button>
+                      />
                     </th>
                   );
                 })}
               </tr>
             </thead>
             <tbody>
-              {visibleRows.map((row, ri) => (
-                <tr key={ri}>
-                  {cols.map((c) => (
-                    <td
-                      key={c}
-                      style={{
-                        borderBottom: "1px solid var(--border-color)",
-                        borderRight: "1px solid var(--border-color)",
-                        padding: "4px 10px",
-                        whiteSpace: "pre",
-                        verticalAlign: "top",
-                      }}
-                    >
-                      {row[c] ?? ""}
-                    </td>
-                  ))}
+              {padTop > 0 && (
+                <tr style={{ height: padTop }} aria-hidden="true">
+                  <td colSpan={cols.length + 1} style={{ padding: 0, border: "none" }} />
                 </tr>
-              ))}
+              )}
+              {rendered.map((row, i) => {
+                // Zebra stripe by on-screen position (not source index), so rows
+                // stay alternating after a sort or filter reorders them.
+                const stripeBg = (firstRow + i) % 2 === 1 ? STRIPE_BG : undefined;
+                return (
+                <tr
+                  key={row.index}
+                  ref={i === 0 ? measureRow : undefined}
+                  className={flashRows.has(row.index) ? "csv-row-flash" : undefined}
+                  style={{ height: rowH }}
+                >
+                  <td
+                    style={{
+                      position: "sticky",
+                      left: 0,
+                      zIndex: 1,
+                      // Its own chrome tint, not the zebra stripe, so the sticky
+                      // column stays distinct from the body scrolling under it.
+                      background: GUTTER_BG,
+                      borderBottom: "1px solid var(--border-color)",
+                      borderRight: GUTTER_BORDER,
+                      padding: "4px 8px",
+                      textAlign: "right",
+                      whiteSpace: "nowrap",
+                      fontSize: 11,
+                      // Opacity dims only the number, not the cell — a translucent
+                      // sticky gutter would let the scrolling body cells bleed
+                      // through it. The background stays solid.
+                      color: "var(--text-secondary, var(--text-primary))",
+                    }}
+                  >
+                    {/* The source row number, not the position on screen: it is the
+                        row a sort or filter came from, and the row an edit lands in. */}
+                    {editable ? (
+                      <span style={{ display: "flex", gap: 6, justifyContent: "flex-end" }}>
+                        <span>{row.index}</span>
+                        <button
+                          onClick={() => removeRow(row.index)}
+                          title={`Delete row ${row.index}`}
+                          aria-label={`Delete row ${row.index}`}
+                          style={{
+                            all: "unset",
+                            cursor: "pointer",
+                            padding: "0 2px",
+                            color: "var(--text-primary)",
+                          }}
+                        >
+                          ×
+                        </button>
+                      </span>
+                    ) : (
+                      row.index
+                    )}
+                  </td>
+                  {cols.map((c) => {
+                    const isEditing = editing?.row === row.index && editing.col === c;
+                    const value = row.cells[c] ?? "";
+                    // The sorted column carries its own accent tint (stacked over
+                    // the zebra stripe) and the accent edge-lines, so it reads as
+                    // one continuous band down the table, not just a tinted header.
+                    const sortedCol = sort?.col === c;
+                    const cellBg = sortedCol
+                      ? stripeBg
+                        ? SORTED_CELL_BG_STRIPE
+                        : SORTED_CELL_BG
+                      : stripeBg;
+                    return (
+                      <td
+                        key={c}
+                        onDoubleClick={() => beginEdit(row.index, c)}
+                        // A column clips at its measured width, so the full value
+                        // has to stay reachable somewhere.
+                        title={isEditing ? undefined : value}
+                        style={{
+                          background: cellBg,
+                          boxShadow: sortedCol ? SORTED_EDGE : undefined,
+                          borderBottom: "1px solid var(--border-color)",
+                          borderRight: "1px solid var(--border-color)",
+                          padding: isEditing ? 0 : "4px 10px",
+                          // `pre`, not `nowrap`: a padded field's spaces are part
+                          // of its value. It still clips-with-ellipsis, since that
+                          // only needs overflow hidden and no wrapping.
+                          whiteSpace: "pre",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          verticalAlign: "middle",
+                          cursor: editable ? "text" : "default",
+                        }}
+                      >
+                        {isEditing ? (
+                          <CellInput
+                            value={editValue}
+                            onChange={setEditValue}
+                            onKeyDown={onEditKeyDown}
+                            onBlur={() => commitEdit()}
+                          />
+                        ) : (
+                          value
+                        )}
+                      </td>
+                    );
+                  })}
+                </tr>
+                );
+              })}
+              {padBottom > 0 && (
+                <tr style={{ height: padBottom }} aria-hidden="true">
+                  <td colSpan={cols.length + 1} style={{ padding: 0, border: "none" }} />
+                </tr>
+              )}
             </tbody>
           </table>
-          {truncated && (
-            <div
-              style={{
-                padding: "8px 10px",
-                fontSize: 12,
-                opacity: 0.7,
-                borderTop: "1px solid var(--border-color)",
-              }}
-            >
-              Showing first {MAX_RENDER_ROWS} of {sortedBody.length} rows. Open
-              externally to view the entire file.
+          {total === 0 && body.length > 0 && (
+            <div style={{ padding: "8px 10px", fontSize: 12, opacity: 0.7 }}>
+              No rows match “{query}”.
             </div>
           )}
         </div>
@@ -279,3 +1073,146 @@ export function TableView({
     </div>
   );
 }
+
+/**
+ * The column list: every column by name, click to hide, click again to show.
+ *
+ * Built on the same chrome as {@link Dropdown} (whose native `<select>` WebKitGTK
+ * refuses to theme) but it is a *multi*-select, so it does NOT close on a click —
+ * hiding six of twenty columns is one visit to the menu, not six. A hidden column
+ * stays listed, struck through: the list is the only way back, so a column that
+ * vanished from it would be a column you could not get back.
+ */
+function ColumnsMenu({
+  names,
+  hidden,
+  onToggle,
+  onShowAll,
+  onHideAll,
+}: {
+  names: string[];
+  hidden: Set<number>;
+  onToggle: (col: number) => void;
+  onShowAll: () => void;
+  onHideAll: () => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDocPointer = (e: PointerEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("pointerdown", onDocPointer);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("pointerdown", onDocPointer);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  const shown = names.length - hidden.size;
+
+  return (
+    <div className="dropdown" ref={ref} onMouseDown={(e) => e.stopPropagation()}>
+      <button
+        type="button"
+        className="dropdown-trigger"
+        onClick={() => setOpen((v) => !v)}
+        title="Show or hide columns"
+        aria-haspopup="listbox"
+        aria-expanded={open}
+      >
+        {hidden.size > 0 ? `Columns ${shown}/${names.length}` : "Columns"}
+        <span className="dropdown-caret">▾</span>
+      </button>
+      {open && (
+        <div className="context-menu dropdown-menu" role="listbox" aria-multiselectable>
+          {/* Whole-set toggle: with all columns shown it deselects everything —
+              picking three of twenty is "deselect all, click three", not
+              seventeen hides — and once anything is hidden it selects all. */}
+          <button
+            type="button"
+            onClick={hidden.size > 0 ? onShowAll : onHideAll}
+            style={{ borderBottom: "1px solid var(--border-color)" }}
+          >
+            <span aria-hidden="true" style={{ display: "inline-block", width: 16, opacity: 0.9 }}>
+              {hidden.size > 0 ? "✓" : "–"}
+            </span>
+            {hidden.size > 0 ? "Select all" : "Deselect all"}
+          </button>
+          {names.map((name, c) => {
+            const isHidden = hidden.has(c);
+            return (
+              <button
+                key={c}
+                type="button"
+                role="option"
+                aria-selected={!isHidden}
+                onClick={() => onToggle(c)}
+                title={isHidden ? "Click to show this column" : "Click to hide this column"}
+              >
+                <span
+                  aria-hidden="true"
+                  style={{
+                    display: "inline-block",
+                    width: 16,
+                    opacity: isHidden ? 0.45 : 0.9,
+                  }}
+                >
+                  {isHidden ? "–" : "✓"}
+                </span>
+                <span
+                  style={{
+                    textDecoration: isHidden ? "line-through" : "none",
+                    opacity: isHidden ? 0.55 : 1,
+                  }}
+                >
+                  {name}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** The in-cell editor: one input, sized to the cell it stands in for. */
+function CellInput({
+  value,
+  onChange,
+  onKeyDown,
+  onBlur,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  onBlur: () => void;
+}) {
+  return (
+    <input
+      autoFocus
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      onKeyDown={onKeyDown}
+      onBlur={onBlur}
+      style={{
+        width: "100%",
+        boxSizing: "border-box",
+        padding: "4px 10px",
+        border: "none",
+        outline: "2px solid var(--accent-color, #6ab)",
+        outlineOffset: -2,
+        background: "var(--bg-input, var(--bg-panel))",
+        color: "var(--text-primary)",
+        font: "inherit",
+      }}
+    />
+  );
+}
diff --git a/src/components/embed/YamlGrid.tsx b/src/components/embed/YamlGrid.tsx
new file mode 100644
index 0000000..2b18920
--- /dev/null
+++ b/src/components/embed/YamlGrid.tsx
@@ -0,0 +1,780 @@
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+} from "react";
+import { useViewerState } from "./FileViewerPane";
+import { UntestedTag } from "../common/UntestedTag";
+import {
+  addChild,
+  deleteNode,
+  duplicateNode,
+  isFlow,
+  literalFor,
+  moveNodeTo,
+  parseYaml,
+  scalarType,
+  setValue,
+  type YamlDoc,
+  type YamlNode,
+} from "../../lib/viewers/yaml";
+import { cellKind, isContainer } from "../../lib/viewers/yamlGrid";
+
+/**
+ * The YAML/JSON **card grid** (#yaml-grid) — the third view on the file, beside the
+ * tree and Source, for reading structured data as cards.
+ *
+ * It is a **drill navigation**, not an infinite nest. At any moment one card is the
+ * "main" one, and the grid shows:
+ *   - a **breadcrumb** of the path from the document down to it,
+ *   - the main card's **level** — a grid of its siblings, the main one highlighted —
+ *     so you can step sideways between records without going up first,
+ *   - the main card's **children** as the next level below, to drill deeper.
+ * Clicking any card opens it as the new main; clicking a breadcrumb crumb (or the
+ * ⌂ overview) walks back up. With nothing focused the grid is the top overview: the
+ * document's own top-level cards.
+ *
+ * A card shows only its **scalar fields**; its nested collections are the next
+ * level, reached by clicking — so a card never grows unbounded. Every card in one
+ * level is given the SAME height (measured to the tallest, capped), and a card with
+ * more fields than fit **scrolls inside itself** rather than stretching the row.
+ *
+ * Cards **reorder by dragging** among their siblings (pointer-based from a grip, as
+ * WebKitGTK drops HTML5 DnD), one `moveNodeTo` splice per move. Like the tree, the
+ * cards EDIT THE FILE TEXT: every action splices `text` via `lib/viewers/yaml`'s ops
+ * (`setValue`/`addChild`/`deleteNode`/`duplicateNode`/`moveNodeTo`), so a card edit
+ * is an ordinary dirty/undoable/saveable change on the draft the tree and Source
+ * share, and comments/quoting/untouched bytes survive it. A value it can't safely
+ * rewrite is shown, not offered (`source only`) — the tree's honesty rule.
+ */
+export function YamlGrid({
+  text,
+  onChange,
+  tabKey,
+  fontSize,
+  strict,
+}: {
+  text: string;
+  onChange: (next: string) => void;
+  tabKey?: string;
+  fontSize?: number;
+  /** JSON dialect (a `.json` file): keys/strings added here are quoted. */
+  strict?: boolean;
+}) {
+  const doc = useMemo(() => parseYaml(text, { strict }), [text, strict]);
+
+  // The focused ("main") card rides with the tab, like the tree's collapse — the
+  // drill position stays across a reopen and a restart. A stale id (the file
+  // changed shape) is simply not found, and the grid falls back to the overview.
+  const viewPos = useViewerState(tabKey);
+  const [focusId, setFocusIdState] = useState<string | null>(() => viewPos.initial?.gridFocus ?? null);
+  const setFocus = useCallback(
+    (id: string | null) => {
+      setFocusIdState(id);
+      viewPos.persist({ gridFocus: id ?? undefined });
+    },
+    [viewPos],
+  );
+
+  // id → {node, parent}, so a focused card's ancestors and siblings are one lookup
+  // away without threading parents through the render.
+  const index = useMemo(() => buildIndex(doc), [doc]);
+
+  const ctx: Ctx = useMemo(
+    () => ({ doc, text, onChange, strict: !!strict }),
+    [doc, text, onChange, strict],
+  );
+
+  if (doc.error) {
+    return (
+      <div className="yaml-tree-notice">
+        <p>
+          The cards can't read this file: {doc.error.message} (line {doc.error.line})
+        </p>
+        <p className="yaml-tree-notice-hint">
+          Switch to <strong>Source</strong> to edit it as text — nothing here has been changed.
+        </p>
+      </div>
+    );
+  }
+
+  const top = topCards(doc);
+  if (!top.length) {
+    return (
+      <div className="yaml-cards">
+        <div className="yaml-cards-bar">
+          <span className="yaml-cards-bar-spacer" />
+          <UntestedTag />
+        </div>
+        <div className="yaml-tree-notice">
+          <p>This file has no entries yet.</p>
+        </div>
+      </div>
+    );
+  }
+
+  // The single root seq is the top level's parent (so its cards reorder); a single
+  // root map has no reorderable siblings at the top (its ONE card is `document`).
+  const topParent = doc.docs.length === 1 && doc.docs[0].kind === "seq" ? doc.docs[0] : null;
+  const focused = focusId && index.has(focusId) ? focusId : null;
+  const levels = buildLevels(top, topParent, focused, index);
+  const crumbs = levels.map((l) => l.selectedId).filter((x): x is string => !!x).map((id) => index.get(id)!.node);
+
+  return (
+    <div className="yaml-cards" style={fontSize ? { fontSize: `${fontSize}px` } : undefined}>
+      <div className="yaml-cards-bar">
+        <nav className="yaml-grid-breadcrumb" aria-label="Card path">
+          <button
+            className={`yaml-crumb${crumbs.length === 0 ? " on" : ""}`}
+            onClick={() => setFocus(null)}
+            title="Back to the top overview"
+          >
+            ⌂ overview
+          </button>
+          {crumbs.map((node, i) => (
+            <span key={node.id} className="yaml-crumb-wrap">
+              <span className="yaml-crumb-sep" aria-hidden="true">
+                ›
+              </span>
+              <button
+                className={`yaml-crumb${i === crumbs.length - 1 ? " on" : ""}`}
+                onClick={() => setFocus(node.id)}
+                title={crumbTitle(node, index)}
+              >
+                {crumbTitle(node, index)}
+              </button>
+            </span>
+          ))}
+        </nav>
+        <span className="yaml-cards-bar-spacer" />
+        <UntestedTag />
+      </div>
+
+      {levels.map((level, i) => (
+        <LevelGrid
+          key={level.parent ? level.parent.id : `top-${i}`}
+          level={level}
+          text={text}
+          ctx={ctx}
+          onFocus={setFocus}
+        />
+      ))}
+    </div>
+  );
+}
+
+/** The bundle every card needs, passed once instead of threaded field by field. */
+interface Ctx {
+  doc: YamlDoc;
+  text: string;
+  onChange: (next: string) => void;
+  strict: boolean;
+}
+
+/** One rendered level: the cards shown, their common parent (whose child list a
+ *  reorder addresses; `null` = not reorderable, e.g. a lone root map), and which
+ *  card is on the path to the focus (highlighted as the "main" card). */
+interface Level {
+  cards: YamlNode[];
+  parent: YamlNode | null;
+  selectedId: string | null;
+}
+
+/** Keys that name a record, tried in order to title a list item's card. */
+const TITLE_KEYS = ["name", "id", "title", "label", "key", "host", "type", "kind"];
+
+/** A friendly title for a list member. A mapping is named by its first name-ish
+ *  field's value; anything else falls back to a 1-based `Item N`. Never `#0`. */
+function itemTitle(node: YamlNode, index: number): string {
+  if (node.kind === "map") {
+    for (const k of TITLE_KEYS) {
+      const field = node.children.find(
+        (c) => c.key === k && c.kind === "scalar" && c.value.trim() !== "",
+      );
+      if (field) return field.value;
+    }
+  }
+  return `Item ${index + 1}`;
+}
+
+/** The document's top-level cards: a root map is one `document` card; a root list
+ *  is a card per item; multiple documents flatten into one top row. */
+function topCards(doc: YamlDoc): YamlNode[] {
+  return doc.docs.flatMap((root) => (root.kind === "seq" ? root.children : [root]));
+}
+
+/** A card's children that are themselves cards — its nested collections. Scalars
+ *  are fields shown ON the card, not cards in the next level. */
+function subcardsOf(node: YamlNode): YamlNode[] {
+  return node.children.filter(isContainer);
+}
+
+/** id → {node, parent} for the whole document, so ancestors/siblings are a lookup. */
+function buildIndex(doc: YamlDoc): Map<string, { node: YamlNode; parent: YamlNode | null }> {
+  const m = new Map<string, { node: YamlNode; parent: YamlNode | null }>();
+  const walk = (node: YamlNode, parent: YamlNode | null) => {
+    m.set(node.id, { node, parent });
+    for (const c of node.children) walk(c, node);
+  };
+  for (const r of doc.docs) walk(r, null);
+  return m;
+}
+
+/** Whether `ancestorId` is a (strict) ancestor of `targetId` in the doc tree. */
+function isAncestorOf(
+  ancestorId: string,
+  targetId: string,
+  index: Map<string, { node: YamlNode; parent: YamlNode | null }>,
+): boolean {
+  let cur = index.get(targetId)?.parent ?? null;
+  while (cur) {
+    if (cur.id === ancestorId) return true;
+    cur = index.get(cur.id)?.parent ?? null;
+  }
+  return false;
+}
+
+/** Walk the drill from the top row down to the focused card, one level per step:
+ *  each level highlights the card on the path, and the next level is that card's
+ *  children — ending with the focused card's own children (nothing highlighted). */
+function buildLevels(
+  top: YamlNode[],
+  topParent: YamlNode | null,
+  focusId: string | null,
+  index: Map<string, { node: YamlNode; parent: YamlNode | null }>,
+): Level[] {
+  const levels: Level[] = [];
+  let cards = top;
+  let parent = topParent;
+  // Guard against a pathological cycle (ids are unique, but be safe).
+  for (let guard = 0; guard < 64; guard++) {
+    const selected = focusId
+      ? cards.find((c) => c.id === focusId || isAncestorOf(c.id, focusId, index)) ?? null
+      : null;
+    levels.push({ cards, parent, selectedId: selected?.id ?? null });
+    if (!selected) break;
+    const kids = subcardsOf(selected);
+    if (selected.id === focusId) {
+      if (kids.length) levels.push({ cards: kids, parent: selected, selectedId: null });
+      break;
+    }
+    if (!kids.length) break;
+    cards = kids;
+    parent = selected;
+  }
+  return levels;
+}
+
+/** A card's display title, given its parent (a mapping keeps its key; a list member
+ *  gets its name-ish field, else `Item N`; a lone root map is `document`). */
+function titleFor(
+  node: YamlNode,
+  parent: YamlNode | null,
+  indexInParent: number,
+): string {
+  if (!parent) return node.path.length === 0 && node.kind === "map" ? "document" : itemTitle(node, indexInParent);
+  if (parent.kind === "map") return node.key ?? itemTitle(node, indexInParent);
+  return itemTitle(node, indexInParent);
+}
+
+/** A breadcrumb crumb's short label — the same title the card wears in its level. */
+function crumbTitle(
+  node: YamlNode,
+  index: Map<string, { node: YamlNode; parent: YamlNode | null }>,
+): string {
+  const parent = index.get(node.id)?.parent ?? null;
+  const i = parent ? parent.children.indexOf(node) : 0;
+  return titleFor(node, parent, i);
+}
+
+/** How tall a level's cards may grow before their fields scroll inside them. */
+const LEVEL_MAX_HEIGHT = 320;
+
+/**
+ * One level of the drill: a grid of sibling cards, all forced to the SAME height
+ * (measured to the tallest, capped at {@link LEVEL_MAX_HEIGHT}; a card with more
+ * fields scrolls inside itself). Owns the pointer-drag reorder among its cards —
+ * `siblings` is the parent's full child list (what `moveNodeTo` addresses); a drop
+ * maps a card's grid position back to its real index there.
+ */
+function LevelGrid({
+  level,
+  text,
+  ctx,
+  onFocus,
+}: {
+  level: Level;
+  text: string;
+  ctx: Ctx;
+  onFocus: (id: string | null) => void;
+}) {
+  const { cards, parent, selectedId } = level;
+  const siblings = parent?.children ?? cards;
+
+  // One ref array, shared by the drag hit-test and the equal-height measurement.
+  const els = useRef<(HTMLDivElement | null)[]>([]);
+  const live = useRef<{ from: number; to: number } | null>(null);
+  const [drag, setDrag] = useState<{ from: number; to: number } | null>(null);
+
+  // ── Equal height ──────────────────────────────────────────────────────────
+  // Re-measure whenever the level's shape or the file text changes (an edit can
+  // add/remove a field). `null` renders the cards at natural height so the tallest
+  // can be read; the effect then pins every card to it.
+  const [height, setHeight] = useState<number | null>(null);
+  const sig = useMemo(() => cards.map((c) => c.id).join("|") + "#" + text.length, [cards, text]);
+  useLayoutEffect(() => {
+    setHeight(null);
+  }, [sig]);
+  useLayoutEffect(() => {
+    if (height !== null) return;
+    let max = 0;
+    for (const el of els.current) if (el) max = Math.max(max, el.offsetHeight);
+    if (max > 0) setHeight(Math.min(max, LEVEL_MAX_HEIGHT));
+  });
+
+  // ── Drag reorder ──────────────────────────────────────────────────────────
+  const indexAt = (x: number, y: number): number => {
+    let best = live.current?.from ?? 0;
+    let bestDist = Infinity;
+    for (let i = 0; i < cards.length; i++) {
+      const el = els.current[i];
+      if (!el) continue;
+      const r = el.getBoundingClientRect();
+      if (x >= r.left && x <= r.right && y >= r.top && y <= r.bottom) return i;
+      const cx = r.left + r.width / 2;
+      const cy = r.top + r.height / 2;
+      const d = (x - cx) ** 2 + (y - cy) ** 2;
+      if (d < bestDist) {
+        bestDist = d;
+        best = i;
+      }
+    }
+    return best;
+  };
+  const start = (i: number) => {
+    live.current = { from: i, to: i };
+    setDrag(live.current);
+  };
+  const over = (x: number, y: number) => {
+    const d = live.current;
+    if (!d) return;
+    const to = indexAt(x, y);
+    if (to !== d.to) {
+      live.current = { from: d.from, to };
+      setDrag(live.current);
+    }
+  };
+  const drop = () => {
+    const d = live.current;
+    live.current = null;
+    setDrag(null);
+    if (!d || d.to === d.from) return;
+    const node = cards[d.from];
+    const target = cards[d.to];
+    if (!node.deletable || !target.deletable) return;
+    const to = siblings.findIndex((s) => s.id === target.id);
+    if (to >= 0) ctx.onChange(moveNodeTo(ctx.text, siblings, node, to));
+  };
+
+  return (
+    <div className="yaml-level">
+      <div className="yaml-level-grid">
+        {cards.map((node, i) => {
+          const movable = !!parent && node.deletable && cards.length > 1;
+          const cardDrag: CardDrag = {
+            rowRef: (el) => {
+              els.current[i] = el;
+            },
+            dragging: drag?.from === i,
+            dropTarget: drag != null && drag.to === i && drag.to !== drag.from,
+            blocked: drag != null && !node.deletable,
+            grip: movable
+              ? {
+                  onPointerDown: (e) => {
+                    e.preventDefault();
+                    e.currentTarget.setPointerCapture?.(e.pointerId);
+                    start(i);
+                  },
+                  onPointerMove: (e) => over(e.clientX, e.clientY),
+                  onPointerUp: (e) => {
+                    e.currentTarget.releasePointerCapture?.(e.pointerId);
+                    drop();
+                  },
+                  onPointerCancel: drop,
+                }
+              : null,
+          };
+          return (
+            <LevelCard
+              key={node.id}
+              node={node}
+              title={titleFor(node, parent, siblings.indexOf(node))}
+              selected={node.id === selectedId}
+              height={height}
+              onFocus={onFocus}
+              ctx={ctx}
+              drag={cardDrag}
+            />
+          );
+        })}
+      </div>
+      {parent && <AddBar node={parent} ctx={ctx} />}
+    </div>
+  );
+}
+
+/** A card's slot in its level's drag — the grip handlers, its live drag flags, and
+ *  the ref the level measures + hit-tests it by. `null` grip = not draggable. */
+interface CardDrag {
+  rowRef: (el: HTMLDivElement | null) => void;
+  dragging: boolean;
+  dropTarget: boolean;
+  blocked: boolean;
+  grip: {
+    onPointerDown: (e: React.PointerEvent) => void;
+    onPointerMove: (e: React.PointerEvent) => void;
+    onPointerUp: (e: React.PointerEvent) => void;
+    onPointerCancel: () => void;
+  } | null;
+}
+
+/** The classes a card wears while a drag is in flight — shared by every card. */
+function cardDragClass(drag: CardDrag | null): string {
+  if (!drag) return "";
+  return [
+    drag.dragging ? "yaml-card-dragging" : "",
+    drag.dropTarget ? "yaml-card-drop" : "",
+    drag.blocked ? "yaml-card-blocked" : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+}
+
+function CardGrip({ drag, title }: { drag: CardDrag | null; title: string }) {
+  if (!drag?.grip) return null;
+  return (
+    <button
+      className="yaml-grip yaml-card-grip"
+      title="Drag to reorder"
+      aria-label={`Reorder ${title}`}
+      {...drag.grip}
+    >
+      ⠿
+    </button>
+  );
+}
+
+/**
+ * One card in a level: its scalar children are editable fields (scrolling inside
+ * the fixed card height when there are many); its nested collections are NOT shown
+ * inline — a "N groups" footer (and the title) opens the card as the new main,
+ * revealing them as the next level. A bare scalar list item is a value-only card.
+ */
+function LevelCard({
+  node,
+  title,
+  selected,
+  height,
+  onFocus,
+  ctx,
+  drag,
+}: {
+  node: YamlNode;
+  title: string;
+  selected: boolean;
+  height: number | null;
+  onFocus: (id: string | null) => void;
+  ctx: Ctx;
+  drag: CardDrag | null;
+}) {
+  const scalar = !isContainer(node);
+  const entries = node.children.map((child, i) => ({ child, i }));
+  const scalars = entries.filter((e) => e.child.kind === "scalar");
+  const subs = scalar ? [] : subcardsOf(node);
+  const n = node.children.length;
+  const badge = scalar
+    ? ""
+    : node.kind === "seq"
+      ? `${n} item${n === 1 ? "" : "s"}`
+      : `${n} key${n === 1 ? "" : "s"}`;
+  const canDrill = subs.length > 0;
+  const style: CSSProperties | undefined = height != null ? { height: `${height}px` } : undefined;
+
+  return (
+    <div
+      className={`yaml-card yaml-level-card${selected ? " yaml-card-main" : ""} ${cardDragClass(drag)}`.trimEnd()}
+      style={style}
+      ref={drag?.rowRef}
+    >
+      <div className="yaml-card-head">
+        <CardGrip drag={drag} title={title} />
+        {canDrill ? (
+          <button
+            className="yaml-card-toggle"
+            onClick={() => onFocus(node.id)}
+            title={`Open ${title}`}
+            aria-label={`Open ${title}`}
+          >
+            <span className="yaml-card-title">{title}</span>
+          </button>
+        ) : (
+          <span className="yaml-card-title yaml-card-title-static">{title}</span>
+        )}
+        {!scalar && isFlow(node) && (
+          <span className="yaml-flow-tag" title="Written in flow (JSON) style">
+            {node.kind === "seq" ? "[ ]" : "{ }"}
+          </span>
+        )}
+        {badge && <span className="yaml-card-badge">{badge}</span>}
+        {node.deletable && (
+          <button
+            className="yaml-act yaml-act-del yaml-card-del"
+            title="Delete this card"
+            aria-label={`Delete ${title}`}
+            onClick={() => {
+              // Deleting the main card (or an ancestor of it) drops the focus back
+              // to safety — the level rebuilds and a stale focus would vanish.
+              if (selected) onFocus(null);
+              ctx.onChange(deleteNode(ctx.text, node));
+            }}
+          >
+            ×
+          </button>
+        )}
+      </div>
+
+      <div className="yaml-card-scroll">
+        {scalar ? (
+          <div className="yaml-card-field yaml-card-field-scalar">
+            {cellKind(node, null) === "scalar" ? (
+              <CommitInput
+                className={`yaml-value-input yaml-val-${scalarType(node)}`}
+                initial={node.value}
+                ariaLabel={`Value of ${title}`}
+                onCommit={(next) => ctx.onChange(setValue(ctx.text, ctx.doc, node, next))}
+              />
+            ) : (
+              <span className="yaml-value-locked" title={node.raw}>
+                {node.raw || node.value}
+              </span>
+            )}
+          </div>
+        ) : scalars.length > 0 ? (
+          <div className="yaml-card-fields">
+            {scalars.map(({ child, i }) => (
+              <FieldRow key={child.id} entry={child} parentKind={node.kind} index={i} ctx={ctx} />
+            ))}
+          </div>
+        ) : (
+          <div className="yaml-card-empty">no fields</div>
+        )}
+      </div>
+
+      {!scalar && <AddBar node={node} ctx={ctx} />}
+      {canDrill && (
+        <button
+          className="yaml-card-drill"
+          onClick={() => onFocus(node.id)}
+          title={`Open ${subs.length} nested group${subs.length === 1 ? "" : "s"}`}
+        >
+          {subs.length} group{subs.length === 1 ? "" : "s"} <span aria-hidden="true">▸</span>
+        </button>
+      )}
+    </div>
+  );
+}
+
+/** One scalar field inside a card: a label (key, or list index) and its value —
+ *  edit-in-place when the tree can rewrite it, read-only (`source only`) when not. */
+function FieldRow({
+  entry,
+  parentKind,
+  index,
+  ctx,
+}: {
+  entry: YamlNode;
+  parentKind: string;
+  index: number;
+  ctx: Ctx;
+}) {
+  const inSeq = parentKind === "seq";
+  const label = inSeq ? "–" : entry.key ?? "";
+  const kind = cellKind(entry, null);
+
+  return (
+    <div className="yaml-card-field">
+      <span
+        className={`yaml-card-key${inSeq ? " yaml-card-bullet" : ""}`}
+        title={inSeq ? `item ${index + 1}` : label}
+      >
+        {label}
+      </span>
+      {kind === "scalar" ? (
+        <CommitInput
+          className={`yaml-value-input yaml-val-${scalarType(entry)}`}
+          initial={entry.value}
+          ariaLabel={`Value of ${label}`}
+          placeholder={entry.style === "empty" ? "null" : undefined}
+          onCommit={(next) => ctx.onChange(setValue(ctx.text, ctx.doc, entry, next))}
+        />
+      ) : (
+        <span
+          className="yaml-value-locked"
+          title={entry.raw || "The tree can't rewrite this — edit it in Source."}
+        >
+          {entry.raw || entry.value}
+        </span>
+      )}
+      {entry.deletable && (
+        <button
+          className="yaml-act yaml-act-del yaml-card-field-del"
+          title="Delete this field"
+          aria-label={`Delete ${label}`}
+          onClick={() => ctx.onChange(deleteNode(ctx.text, entry))}
+        >
+          ×
+        </button>
+      )}
+    </div>
+  );
+}
+
+/** The add affordances at the foot of a card: a mapping grows a field, a sequence a
+ *  card or a value (and can copy its last item — fastest for like-shaped records). */
+function AddBar({ node, ctx }: { node: YamlNode; ctx: Ctx }) {
+  const [adding, setAdding] = useState(false);
+  if (node.kind !== "map" && node.kind !== "seq") return null;
+  const lastChild = node.children[node.children.length - 1];
+  const canCopy = node.kind === "seq" && lastChild && lastChild.deletable;
+
+  if (node.kind === "map") {
+    return (
+      <div className="yaml-card-add">
+        {adding ? (
+          <CommitInput
+            className="yaml-key-input"
+            initial=""
+            placeholder="new field"
+            ariaLabel="New field key"
+            autoFocus
+            onCommit={(next) => {
+              setAdding(false);
+              const key = next.trim();
+              if (key) {
+                ctx.onChange(
+                  addChild(ctx.text, ctx.doc, node, "key", key, literalFor("text", "", ctx.strict)),
+                );
+              }
+            }}
+            onCancel={() => setAdding(false)}
+          />
+        ) : (
+          <button className="yaml-add" onClick={() => setAdding(true)}>
+            + field
+          </button>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="yaml-card-add">
+      <button
+        className="yaml-add"
+        title="Add a card (an empty mapping item)"
+        onClick={() => ctx.onChange(addChild(ctx.text, ctx.doc, node, "item", "", "{}"))}
+      >
+        + card
+      </button>
+      <button
+        className="yaml-add"
+        title="Add a plain value item"
+        onClick={() =>
+          ctx.onChange(
+            addChild(ctx.text, ctx.doc, node, "item", "", literalFor("text", "", ctx.strict)),
+          )
+        }
+      >
+        + value
+      </button>
+      {canCopy && (
+        <button
+          className="yaml-add"
+          title="Add a copy of the last item, to edit in place"
+          onClick={() => ctx.onChange(duplicateNode(ctx.text, lastChild))}
+        >
+          Copy last
+        </button>
+      )}
+    </div>
+  );
+}
+
+/**
+ * A single-line input that commits on Enter/blur and reverts on Escape. It holds
+ * its own buffer rather than driving `onChange` per keystroke: a commit re-encodes
+ * the value into the file (quoting when it must), and doing that per keypress would
+ * rewrite the text under the caret.
+ */
+function CommitInput({
+  initial,
+  className,
+  ariaLabel,
+  placeholder,
+  autoFocus,
+  onCommit,
+  onCancel,
+}: {
+  initial: string;
+  className: string;
+  ariaLabel: string;
+  placeholder?: string;
+  autoFocus?: boolean;
+  onCommit: (next: string) => void;
+  onCancel?: () => void;
+}) {
+  const [buf, setBuf] = useState(initial);
+  const dirty = useRef(false);
+  useEffect(() => {
+    if (!dirty.current) setBuf(initial);
+  }, [initial]);
+
+  return (
+    <input
+      className={className}
+      value={buf}
+      placeholder={placeholder}
+      aria-label={ariaLabel}
+      autoFocus={autoFocus}
+      style={fullWidth}
+      onChange={(e) => {
+        dirty.current = true;
+        setBuf(e.target.value);
+      }}
+      onBlur={() => {
+        dirty.current = false;
+        if (buf !== initial) onCommit(buf);
+        else onCancel?.();
+      }}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          dirty.current = false;
+          if (buf !== initial) onCommit(buf);
+          else onCancel?.();
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          dirty.current = false;
+          setBuf(initial);
+          onCancel?.();
+        }
+      }}
+    />
+  );
+}
+
+const fullWidth: CSSProperties = { width: "100%" };
diff --git a/src/components/embed/YamlTree.tsx b/src/components/embed/YamlTree.tsx
new file mode 100644
index 0000000..b498238
--- /dev/null
+++ b/src/components/embed/YamlTree.tsx
@@ -0,0 +1,1474 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  type CSSProperties,
+} from "react";
+import { useViewerState } from "./FileViewerPane";
+import {
+  parseYaml,
+  setValue,
+  renameKey,
+  deleteNode,
+  addChild,
+  addRootEntry,
+  duplicateNode,
+  moveNode,
+  moveNodeTo,
+  canAddChild,
+  canComment,
+  canPasteAfter,
+  commentOf,
+  copyNode,
+  inlineListValues,
+  setListItems,
+  pasteAfter,
+  setComment,
+  isFlow,
+  literalFor,
+  scalarType,
+  type YamlClip,
+  type YamlDoc,
+  type YamlNode,
+  type YamlValueType,
+} from "../../lib/viewers/yaml";
+
+/**
+ * The YAML/JSON tree editor (#yaml) — the structured half of the viewer, the way
+ * the rendered preview is the structured half of the markdown viewer.
+ *
+ * It edits the FILE TEXT, not a model of it: every action here is a splice back
+ * into `text` (see `lib/viewers/yaml`), and the result goes straight to the same
+ * draft the Source tab shows. That is the whole design — the two modes never
+ * convert between representations, so comments and formatting survive an edit,
+ * and Ctrl+S / undo / redo / format / validation all keep working on the text
+ * underneath without knowing the tree exists.
+ *
+ * Both syntaxes render as one tree, and each keeps its own: a block collection
+ * grows by lines, a flow one (`{a: 1}` — i.e. JSON) grows inside its brackets.
+ * `strict` is set for a `.json` file, where every key and string is quoted.
+ *
+ * What the tree offers, it can do: a node the parser cannot rewrite safely (an
+ * anchor, an alias, a merge key, a plain scalar continued across lines) renders
+ * with its edit affordances withheld rather than a control that would corrupt the
+ * file.
+ */
+
+// ── The copy buffer ─────────────────────────────────────────────────────────
+// Module-level, not component state: copying in one tab and pasting in another
+// (or after the viewer remounts) is the point of a clipboard. The system
+// clipboard receives the same text, but the paste cursor works from THIS one —
+// it carries the structure (block/flow, mapping entry/item) a raw string no
+// longer has, which is what lets the cursor refuse a spot the paste would tear.
+let clipCurrent: YamlClip | null = null;
+const clipSubs = new Set<() => void>();
+
+function setClip(next: YamlClip | null) {
+  clipCurrent = next;
+  for (const fn of clipSubs) fn();
+}
+
+function useClip(): YamlClip | null {
+  return useSyncExternalStore(
+    (cb) => {
+      clipSubs.add(cb);
+      return () => clipSubs.delete(cb);
+    },
+    () => clipCurrent,
+  );
+}
+
+export function YamlTree({
+  text,
+  onChange,
+  tabKey,
+  fontSize,
+  strict,
+}: {
+  text: string;
+  onChange: (next: string) => void;
+  tabKey?: string;
+  fontSize?: number;
+  /** JSON dialect (a `.json` file): keys and strings are always quoted. */
+  strict?: boolean;
+}) {
+  const doc = useMemo(() => parseYaml(text, { strict }), [text, strict]);
+
+  // Collapse state rides with the tab (like the reader's scroll position), so
+  // folding a big config stays folded across a reopen and a restart.
+  const viewPos = useViewerState(tabKey);
+  const [collapsed, setCollapsed] = useState<Set<string>>(
+    () => new Set(viewPos.initial?.yamlCollapsed ?? []),
+  );
+  const toggle = useCallback(
+    (id: string) => {
+      setCollapsed((cur) => {
+        const next = new Set(cur);
+        if (next.has(id)) next.delete(id);
+        else next.add(id);
+        viewPos.persist({ yamlCollapsed: [...next] });
+        return next;
+      });
+    },
+    [viewPos],
+  );
+
+  // The row currently showing its "add entry" form, as `${parentId}:${kind}`.
+  const [adding, setAdding] = useState<string | null>(null);
+
+  // Copy → paste: the app-wide buffer, and where THIS tree's paste cursor sits
+  // (the id of the entry the paste would follow). The buffer is shared so a copy
+  // travels between tabs; the cursor is per tree — two views of two files must
+  // not fight over one insertion point.
+  const clip = useClip();
+  const [cursorId, setCursorId] = useState<string | null>(null);
+
+  // Esc cancels the whole paste mode — cursor and buffer both — but never while
+  // typing in one of the tree's inputs, whose own Escape means "revert this
+  // field". A buffer cleared elsewhere (another tab's Esc, the banner's ×) takes
+  // this tree's cursor with it.
+  useEffect(() => {
+    if (!clip) {
+      setCursorId(null);
+      return;
+    }
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== "Escape") return;
+      const t = e.target as HTMLElement | null;
+      if (t && /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName)) return;
+      setCursorId(null);
+      setClip(null);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [clip]);
+
+  if (doc.error) {
+    return (
+      <div className="yaml-tree-notice">
+        <p>
+          The tree can't read this file: {doc.error.message} (line {doc.error.line})
+        </p>
+        <p className="yaml-tree-notice-hint">
+          Switch to <strong>Source</strong> to edit it as text — nothing here has been changed.
+        </p>
+      </div>
+    );
+  }
+
+  if (!doc.docs.length) {
+    return (
+      <div className="yaml-tree" style={fontSize ? { fontSize: `${fontSize}px` } : undefined}>
+        <div className="yaml-tree-notice">
+          <p>This file has no entries yet.</p>
+        </div>
+        {adding ? (
+          <AddRow
+            depth={0}
+            kind={adding === "root:item" ? "item" : "key"}
+            onCancel={() => setAdding(null)}
+            onAdd={(kind, key, type, value) => {
+              onChange(
+                addRootEntry(text, kind, key, literalFor(type, value, doc.strict), doc.strict),
+              );
+              setAdding(null);
+            }}
+          />
+        ) : (
+          <div className="yaml-row yaml-row-add">
+            <button className="yaml-add" onClick={() => setAdding("root:key")}>
+              + key
+            </button>
+            <button className="yaml-add" onClick={() => setAdding("root:item")}>
+              + item
+            </button>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="yaml-tree" style={fontSize ? { fontSize: `${fontSize}px` } : undefined}>
+      {/* What the copy button captured, and how to use or drop it — the banner is
+          also the one cancel affordance a mouse-only user has. */}
+      {clip && (
+        <div className="yaml-clip-banner">
+          <span>
+            Copied <strong>{clip.label}</strong> — click an entry to place the paste cursor after
+            it
+          </span>
+          <button
+            className="yaml-act"
+            onClick={() => {
+              setCursorId(null);
+              setClip(null);
+            }}
+            title="Forget the copied entry (Esc)"
+            aria-label="Forget the copied entry"
+          >
+            ×
+          </button>
+        </div>
+      )}
+      {doc.docs.map((root, i) => (
+        <div className="yaml-doc" key={root.id}>
+          {doc.docs.length > 1 && <div className="yaml-doc-sep">document {i + 1}</div>}
+          <YamlRows
+            nodes={root.children}
+            parent={root}
+            depth={0}
+            text={text}
+            doc={doc}
+            onChange={onChange}
+            collapsed={collapsed}
+            toggle={toggle}
+            adding={adding}
+            setAdding={setAdding}
+            cursorId={cursorId}
+            setCursor={setCursorId}
+          />
+          {adding?.startsWith(`${root.id}:`) ? (
+            <AddRow
+              depth={0}
+              kind={adding.endsWith(":item") ? "item" : "key"}
+              onCancel={() => setAdding(null)}
+              onAdd={(kind, key, type, value) => {
+                onChange(
+                  addChild(text, doc, root, kind, key, literalFor(type, value, doc.strict)),
+                );
+                setAdding(null);
+              }}
+              onCopyLast={copyLastAction(root, text, onChange, () => setAdding(null))}
+            />
+          ) : (
+            <AddControls node={root} adding={adding} setAdding={setAdding} />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * One level of siblings. Split out so a row's children re-render on their own — and
+ * because it is the natural home for the drag: a node can only be reordered AMONG
+ * ITS SIBLINGS (there is no such thing as dragging a key into a different mapping —
+ * that is a re-parent, not a reorder), so the list that owns them owns the gesture.
+ *
+ * The drag is pointer-based, not HTML5 drag-and-drop, which does not work under
+ * WebKitGTK; and every pointer handler is bound to the grip up front rather than
+ * added to the window mid-gesture, because listeners registered once a gesture is
+ * already under way are the ones WebKitGTK drops.
+ */
+/** How an ancestor's hover marks the rows beneath it: the plain substructure
+ *  highlight, the accent tint of a hovered whole-entry action (copy, move,
+ *  comment), the accent-plus-pull of the drag grip (the block shifts a few px
+ *  out, showing it is what the handle moves), or the danger tint of a hovered
+ *  delete. */
+type SubtreeMark = "row" | "act" | "grab" | "del" | null;
+
+/** The row class a mark paints. Shared by the entry rows AND the add/form rows
+ *  inside a container's block, so a marked area colors contiguously instead of
+ *  leaving its `+ key` / `+ item` rows white holes. */
+const markClass = (m: SubtreeMark): string =>
+  m === "del"
+    ? "yaml-row-marked-del"
+    : m === "grab"
+      ? "yaml-row-marked-act yaml-row-pulled"
+      : m === "act"
+        ? "yaml-row-marked-act"
+        : m
+          ? "yaml-row-marked"
+          : "";
+
+/** Width of the fixed action gutter every row reserves on its LEFT, where the
+ *  entry's hover buttons (⠿ # ⧉ ↑ ↓ ×) live — a stable column in front of the
+ *  tree, instead of a target that drifts right with the panel's width. Sized to
+ *  the full slot set; mirrored by `.yaml-gutter` in themes.css. */
+const GUTTER = 130;
+
+/** How many per-level guide colors themes.css defines (`--yaml-guide-N`). */
+const GUIDE_COLORS = 4;
+
+/** Every row's left padding — the action gutter, then the tree indent — plus
+ *  one vertical guide line per ancestor level (colors cycling by depth), so the
+ *  tree's structure reads at a glance. The guides are a background IMAGE, which
+ *  is what lets them coexist with the hover/marked background COLORS: those are
+ *  stylesheet shorthands, and the inline image wins the image slot alone. */
+const rowPad = (depth: number): CSSProperties => {
+  const style: CSSProperties = { paddingLeft: `${GUTTER + depth * 14 + 4}px` };
+  if (depth > 0) {
+    const stops = Array.from({ length: depth }, (_, k) => {
+      // Under each ancestor level's caret column.
+      const x = GUTTER + 4 + k * 14 + 5;
+      const c = `var(--yaml-guide-${k % GUIDE_COLORS})`;
+      return `transparent ${x}px, ${c} ${x}px, ${c} ${x + 1}px, transparent ${x + 1}px`;
+    }).join(", ");
+    style.backgroundImage = `linear-gradient(to right, ${stops})`;
+  }
+  return style;
+};
+
+function YamlRows({
+  nodes,
+  parent,
+  depth,
+  text,
+  doc,
+  onChange,
+  collapsed,
+  toggle,
+  adding,
+  setAdding,
+  cursorId,
+  setCursor,
+  marked = null,
+}: {
+  nodes: YamlNode[];
+  parent: YamlNode;
+  depth: number;
+  text: string;
+  doc: YamlDoc;
+  onChange: (next: string) => void;
+  collapsed: Set<string>;
+  toggle: (id: string) => void;
+  adding: string | null;
+  setAdding: (v: string | null) => void;
+  cursorId: string | null;
+  setCursor: (v: string | null) => void;
+  /** A hovered ancestor marks every row under it (see {@link SubtreeMark}). */
+  marked?: SubtreeMark;
+}) {
+  const rows = useRef<(HTMLDivElement | null)[]>([]);
+  // The live gesture is a ref (the pointer handlers read it without re-binding) and
+  // state (the drop line has to render).
+  const live = useRef<{ from: number; to: number } | null>(null);
+  const [drag, setDrag] = useState<{ from: number; to: number } | null>(null);
+
+  // Several keys at one level pad to one column, so their values start on a
+  // shared left edge (the tree is monospace, so `ch` is exact). The widest key
+  // sets the column — capped, so one novella of a key can't shove every sibling's
+  // value off screen. A lone key needs no column.
+  const keyWidth = useMemo(() => {
+    const keyed = nodes.filter((n) => n.key != null);
+    if (keyed.length < 2) return null;
+    return Math.min(40, Math.max(...keyed.map((n) => n.key!.length)));
+  }, [nodes]);
+
+  // Which sibling the pointer is over. A sibling's band runs from its own row down
+  // to the next sibling's — so pointing anywhere inside a container's subtree lands
+  // on the container, which is the only thing at this depth that the pointer could
+  // mean.
+  const indexAt = (y: number) => {
+    let k = 0;
+    for (let i = 0; i < nodes.length; i++) {
+      const el = rows.current[i];
+      if (el && y >= el.getBoundingClientRect().top) k = i;
+    }
+    return k;
+  };
+
+  const start = (i: number) => {
+    live.current = { from: i, to: i };
+    setDrag(live.current);
+  };
+  const over = (y: number) => {
+    const d = live.current;
+    if (!d) return;
+    const to = indexAt(y);
+    if (to !== d.to) {
+      live.current = { from: d.from, to };
+      setDrag(live.current);
+    }
+  };
+  const drop = () => {
+    const d = live.current;
+    live.current = null;
+    setDrag(null);
+    // Only commit onto a removable target (moveNodeTo also guards this, but
+    // checking here keeps a drop onto such a slot from firing a no-op onChange).
+    // A dash-line entry IS a real target: moveNodeTo hands the item's `- ` to
+    // whichever entry ends up first.
+    if (d && d.to !== d.from && nodes[d.to]?.deletable) {
+      onChange(moveNodeTo(text, nodes, nodes[d.from], d.to));
+    }
+  };
+
+  return (
+    <>
+      {nodes.map((node, i) => (
+        <YamlRow
+          key={node.id}
+          node={node}
+          index={i}
+          siblings={nodes}
+          parentKind={parent.kind}
+          depth={depth}
+          text={text}
+          doc={doc}
+          onChange={onChange}
+          collapsed={collapsed}
+          toggle={toggle}
+          adding={adding}
+          setAdding={setAdding}
+          cursorId={cursorId}
+          setCursor={setCursor}
+          marked={marked}
+          keyWidth={keyWidth}
+          rowRef={(el) => {
+            rows.current[i] = el;
+          }}
+          dragging={drag?.from === i}
+          // The drop line goes on the row the node would land at, on the side it
+          // would come to rest — so the gesture shows where the text will end up.
+          // Only a removable row gets a line; an unremovable one is blended out
+          // instead (see `blocked`).
+          dropSide={
+            drag && drag.to === i && drag.to !== drag.from && node.deletable
+              ? drag.to < drag.from
+                ? "before"
+                : "after"
+              : null
+          }
+          // While a drag is in flight, an entry that can't be a drop target is
+          // dimmed to show the reorder won't land there.
+          blocked={drag != null && !node.deletable}
+          onDragStart={start}
+          onDragOver={over}
+          onDragEnd={drop}
+        />
+      ))}
+    </>
+  );
+}
+
+function YamlRow({
+  node,
+  index,
+  siblings,
+  parentKind,
+  depth,
+  text,
+  doc,
+  onChange,
+  collapsed,
+  toggle,
+  adding,
+  setAdding,
+  cursorId,
+  setCursor,
+  marked,
+  keyWidth,
+  rowRef,
+  dragging,
+  dropSide,
+  blocked,
+  onDragStart,
+  onDragOver,
+  onDragEnd,
+}: {
+  node: YamlNode;
+  index: number;
+  siblings: YamlNode[];
+  parentKind: string;
+  depth: number;
+  text: string;
+  doc: YamlDoc;
+  onChange: (next: string) => void;
+  collapsed: Set<string>;
+  toggle: (id: string) => void;
+  adding: string | null;
+  setAdding: (v: string | null) => void;
+  cursorId: string | null;
+  setCursor: (v: string | null) => void;
+  marked: SubtreeMark;
+  /** The sibling group's key column, in ch — null when this key stands alone. */
+  keyWidth: number | null;
+  rowRef: (el: HTMLDivElement | null) => void;
+  dragging: boolean;
+  dropSide: "before" | "after" | null;
+  blocked: boolean;
+  onDragStart: (index: number) => void;
+  onDragOver: (clientY: number) => void;
+  onDragEnd: () => void;
+}) {
+  const [renaming, setRenaming] = useState(false);
+  const [noting, setNoting] = useState(false);
+  // This row's own hover, handed down to its children: a container's row names
+  // the whole block beneath it, so pointing at the row marks the block — and
+  // pointing at its delete marks the block in danger, since that is what the ×
+  // will take.
+  const [mark, setMark] = useState<SubtreeMark>(null);
+  const isContainer = node.kind !== "scalar";
+  const isOpen = !collapsed.has(node.id);
+  const inSeq = parentKind === "seq";
+
+  // While the copy buffer holds an entry, a row the paste FITS after (a mapping
+  // entry after a mapping entry, an item after an item — see canPasteAfter) is a
+  // click target for the paste cursor; every other row stays an ordinary row.
+  const clip = useClip();
+  const pastable = clip != null && canPasteAfter(clip, node, parentKind);
+  // Hovering a pastable row previews the landing point (see the preview row).
+  const [pasteHover, setPasteHover] = useState(false);
+
+  // What this row is called in an action's label. A list item has no key, and
+  // "Delete item" would name every sibling equally — to a screen reader and to a
+  // test alike — so it is named by its index.
+  const label = inSeq ? `item ${index}` : (node.key ?? "");
+  // A list of plain values reads — and edits — better as the values themselves:
+  // `web, prod` in one input, where typing a comma adds an item and deleting one
+  // removes it. Such a list renders as this ONE line, no item rows: the line IS
+  // the list. Only when every item can ride a comma line (see inlineListValues) —
+  // a list of mappings, or an item carrying its own comment, stays rows.
+  const inlineList = node.kind === "seq" ? inlineListValues(node) : null;
+  const count = isContainer
+    ? node.kind === "seq"
+      ? `${node.children.length} item${node.children.length === 1 ? "" : "s"}`
+      : `${node.children.length} key${node.children.length === 1 ? "" : "s"}`
+    : null;
+
+  const movable = node.deletable && siblings.length > 1;
+  // Whether hovering this row has a substructure to mark: an open container with
+  // visible child rows (an inline comma list has none — the line is the list).
+  const marksSubtree = isContainer && isOpen && !inlineList && node.children.length > 0;
+  // A whole-entry action (grip, copy, move, comment) hands the accent tint down
+  // the substructure the same way the × hands down danger: everything tinted is
+  // what the button will act on — the entry is its block, not its one line.
+  const actMark = marksSubtree
+    ? { onMouseEnter: () => setMark("act"), onMouseLeave: () => setMark("row") }
+    : {};
+  // The grip's own mark: the same accent, plus the block "pulling out" a few px —
+  // the affordance that this handle is what moves it.
+  const grabMark = marksSubtree
+    ? { onMouseEnter: () => setMark("grab"), onMouseLeave: () => setMark("row") }
+    : {};
+  // What this row's block content (child rows, its add/form rows) is marked
+  // with. A row being DRAGGED keeps the grab mark for the whole gesture — the
+  // grip's hover mark would die the moment the pointer moves off it.
+  const childMark: SubtreeMark = dragging ? "grab" : (mark ?? marked);
+  const note = commentOf(node);
+  // What the key says about itself on hover: its comment if it has one, since that
+  // is the only place a YAML file documents a key.
+  const keyTitle = note ? `# ${note}` : "Click to rename this key";
+
+  return (
+    <>
+      <div
+        ref={rowRef}
+        className={[
+          "yaml-row",
+          dragging ? "yaml-row-dragging" : "",
+          dropSide ? `yaml-row-drop-${dropSide}` : "",
+          blocked ? "yaml-row-blocked" : "",
+          pastable ? "yaml-row-pastable" : "",
+          markClass(marked),
+        ]
+          .filter(Boolean)
+          .join(" ")}
+        style={rowPad(depth)}
+        onMouseEnter={() => {
+          if (marksSubtree) setMark("row");
+          if (pastable) setPasteHover(true);
+        }}
+        onMouseLeave={() => {
+          if (marksSubtree) setMark(null);
+          setPasteHover(false);
+        }}
+        // Placing the paste cursor is a click on the row itself — its background
+        // and gaps — never on one of its controls, which keep their own meaning
+        // (rename, edit, collapse) while a copy is held.
+        onClick={
+          pastable
+            ? (e) => {
+                const t = e.target as HTMLElement;
+                if (t.closest("button, input, textarea, select")) return;
+                setCursor(cursorId === node.id ? null : node.id);
+              }
+            : undefined
+        }
+      >
+        {/* The entry's own actions, in the fixed gutter on the row's LEFT — one
+            stable column for every row, whatever its depth. Shown on the row's
+            hover, like the old right-edge cluster. */}
+        {/* SIX FIXED SLOTS (⠿ # ⧉ ↑ ↓ ×), an action the row doesn't offer
+            rendered as an empty slot — so every button keeps its column on
+            every row, and the pointer never has to chase a shifting target. */}
+        <span className="yaml-actions yaml-gutter">
+          {movable ? (
+            <button
+              className="yaml-grip"
+              title="Drag to reorder"
+              aria-label={`Reorder ${label}`}
+              {...grabMark}
+              onPointerDown={(e) => {
+                // Pointer capture keeps every later event on the grip, so the gesture
+                // survives the pointer leaving the row (which is the whole point of it).
+                // Optional because it is the one part of this not every environment
+                // implements — jsdom has no pointer capture, and the drag is still the
+                // drag without it.
+                e.preventDefault();
+                e.currentTarget.setPointerCapture?.(e.pointerId);
+                onDragStart(index);
+              }}
+              onPointerMove={(e) => onDragOver(e.clientY)}
+              onPointerUp={(e) => {
+                e.currentTarget.releasePointerCapture?.(e.pointerId);
+                onDragEnd();
+              }}
+              onPointerCancel={onDragEnd}
+            >
+              ⠿
+            </button>
+          ) : (
+            <span className="yaml-slot yaml-slot-grip" aria-hidden="true" />
+          )}
+          {!note && !noting && canComment(doc, node) ? (
+            <button
+              className="yaml-act"
+              onClick={() => setNoting(true)}
+              title="Add a comment"
+              aria-label={`Comment on ${label}`}
+              {...actMark}
+            >
+              #
+            </button>
+          ) : (
+            <span className="yaml-slot" aria-hidden="true" />
+          )}
+          {/* Copy the entry into the paste buffer (and, as text, onto the system
+              clipboard). */}
+          {node.deletable ? (
+            <button
+              className="yaml-act"
+              onClick={() => {
+                const c = copyNode(text, node, label);
+                if (!c) return;
+                setClip(c);
+                navigator.clipboard?.writeText(c.text).catch(() => {});
+              }}
+              title="Copy this entry — then click an entry to paste after it"
+              aria-label={`Copy ${label}`}
+              {...actMark}
+            >
+              ⧉
+            </button>
+          ) : (
+            <span className="yaml-slot" aria-hidden="true" />
+          )}
+          {movable ? (
+            <>
+              <button
+                className="yaml-act"
+                disabled={index === 0}
+                onClick={() => onChange(moveNode(text, siblings, node, -1))}
+                title="Move up"
+                aria-label={`Move ${label} up`}
+                {...actMark}
+              >
+                ↑
+              </button>
+              <button
+                className="yaml-act"
+                disabled={index === siblings.length - 1}
+                onClick={() => onChange(moveNode(text, siblings, node, 1))}
+                title="Move down"
+                aria-label={`Move ${label} down`}
+                {...actMark}
+              >
+                ↓
+              </button>
+            </>
+          ) : (
+            <>
+              <span className="yaml-slot" aria-hidden="true" />
+              <span className="yaml-slot" aria-hidden="true" />
+            </>
+          )}
+          {node.deletable ? (
+            <button
+              className="yaml-act yaml-act-del"
+              onClick={() => onChange(deleteNode(text, node))}
+              // Hovering a container's × tints its whole substructure in danger:
+              // everything marked is what the click will take.
+              onMouseEnter={marksSubtree ? () => setMark("del") : undefined}
+              onMouseLeave={marksSubtree ? () => setMark("row") : undefined}
+              title={isContainer ? "Delete this entry and everything under it" : "Delete this entry"}
+              aria-label={`Delete ${label}`}
+            >
+              ×
+            </button>
+          ) : (
+            <span className="yaml-slot" aria-hidden="true" />
+          )}
+        </span>
+
+        {isContainer && node.children.length > 0 && !inlineList ? (
+          <button
+            className="yaml-caret"
+            onClick={() => toggle(node.id)}
+            aria-expanded={isOpen}
+            aria-label={isOpen ? `Collapse ${label}` : `Expand ${label}`}
+          >
+            {isOpen ? "▾" : "▸"}
+          </button>
+        ) : (
+          <span className="yaml-caret yaml-caret-empty" aria-hidden="true" />
+        )}
+
+        {inSeq ? (
+          <span className="yaml-index" title={note ? `# ${note}` : undefined}>
+            {index}
+          </span>
+        ) : renaming ? (
+          <TextCommit
+            initial={node.key ?? ""}
+            className="yaml-key-input"
+            ariaLabel={`Rename key ${node.key ?? ""}`}
+            onCommit={(next) => {
+              setRenaming(false);
+              if (next && next !== node.key) onChange(renameKey(text, doc, node, next));
+            }}
+            onCancel={() => setRenaming(false)}
+          />
+        ) : (
+          <button
+            className="yaml-key"
+            // +1 for the colon the button also holds; the padding is uniform
+            // across siblings, so the values land on one left edge.
+            style={keyWidth != null ? { minWidth: `${keyWidth + 1}ch` } : undefined}
+            onClick={() => setRenaming(true)}
+            title={keyTitle}
+          >
+            {node.key}
+            <span className="yaml-colon">:</span>
+          </button>
+        )}
+
+        {node.kind === "scalar" ? (
+          <ValueCell
+            node={node}
+            label={label}
+            onCommit={(next) => onChange(setValue(text, doc, node, next))}
+          />
+        ) : inlineList ? (
+          <>
+            {isFlow(node) && (
+              <span className="yaml-count">
+                <span className="yaml-flow-tag" title="Written in flow (JSON) style">
+                  [ ]
+                </span>
+              </span>
+            )}
+            <InlineListCell
+              node={node}
+              values={inlineList}
+              label={label}
+              onCommit={(vals) => onChange(setListItems(text, doc, node, vals))}
+            />
+          </>
+        ) : (
+          <span className="yaml-count">
+            {/* Flow (JSON) style is visible, because it is what the row's edits
+                will keep: adding here splices into the brackets, not new lines. */}
+            {isFlow(node) && (
+              <span className="yaml-flow-tag" title="Written in flow (JSON) style">
+                {node.kind === "seq" ? "[ ]" : "{ }"}
+              </span>
+            )}
+            {count}
+          </span>
+        )}
+
+        {/* The comment editor takes the row while it is open, since it is prose about
+            the whole entry rather than one more field on it. */}
+        {noting && (
+          <TextCommit
+            initial={note}
+            className="yaml-comment-input"
+            ariaLabel={`Comment on ${label}`}
+            placeholder="comment"
+            onCommit={(next) => {
+              setNoting(false);
+              if (next !== note) onChange(setComment(text, doc, node, next));
+            }}
+            onCancel={() => setNoting(false)}
+          />
+        )}
+
+        {/* A row that HAS a comment says so without being hovered — a config file's
+            comments are the half of it worth reading, and hiding them behind a hover
+            would be hiding the documentation. The text itself stays on the hover. */}
+        {note && !noting && canComment(doc, node) && (
+          <button
+            className="yaml-note"
+            title={`# ${note}`}
+            aria-label={`Comment on ${label}`}
+            onClick={() => setNoting(true)}
+            {...actMark}
+          >
+            #
+          </button>
+        )}
+
+        {/* An empty key (`key:`, `key: null`, `key: []`) offers both — its first
+            child is what decides whether it becomes a mapping or a list. A LIST
+            offers both too: "+ key" on it adds an item that IS a mapping.
+            An OPEN container shows its add affordance as the persistent row at
+            the end of its children instead, so the inline hover buttons here are
+            only for a collapsed container (whose children aren't shown) or an
+            empty placeholder (which has no child rows to host the add row).
+            They stay IN the row, next to what they grow — the gutter is for
+            actions on the entry itself. */}
+        {!(isContainer && isOpen) &&
+          !inlineList &&
+          (canAddChild(node, "key") || canAddChild(node, "item")) && (
+            <span className="yaml-actions yaml-actions-row">
+              <AddControls node={node} adding={adding} setAdding={setAdding} inline />
+            </span>
+          )}
+        {!node.editable && (
+          <span
+            className="yaml-locked"
+            title="The tree can't rewrite this safely (an anchor, a merge key, or a multi-line value) — edit it in Source."
+          >
+            source only
+          </span>
+        )}
+      </div>
+
+      {isContainer && isOpen && !inlineList && (
+        <YamlRows
+          nodes={node.children}
+          parent={node}
+          depth={depth + 1}
+          text={text}
+          doc={doc}
+          onChange={onChange}
+          collapsed={collapsed}
+          toggle={toggle}
+          adding={adding}
+          setAdding={setAdding}
+          cursorId={cursorId}
+          setCursor={setCursor}
+          // This row's own hover outranks an ancestor's: the innermost pointed-at
+          // container is the one whose block the pointer means.
+          marked={childMark}
+        />
+      )}
+
+      {/* The add form opens as the last child of the row it belongs to; when it
+          isn't open, an OPEN container shows a persistent add row in its place, so
+          every list / mapping carries a visible "+ item" / "+ key" at the point a
+          new entry lands — not only the hover buttons on its (often far-off)
+          header row. A collapsed container keeps just the header's hover buttons
+          (the form still opens from them, below the hidden children). */}
+      {adding?.startsWith(`${node.id}:`) ? (
+        <AddRow
+          depth={depth + 1}
+          kind={adding.endsWith(":item") ? "item" : "key"}
+          marked={childMark}
+          onCancel={() => setAdding(null)}
+          onAdd={(kind, key, type, value) => {
+            onChange(addChild(text, doc, node, kind, key, literalFor(type, value, doc.strict)));
+            setAdding(null);
+          }}
+          onCopyLast={copyLastAction(node, text, onChange, () => setAdding(null))}
+        />
+      ) : (
+        isContainer &&
+        isOpen &&
+        !inlineList && (
+          <AddControls
+            node={node}
+            depth={depth + 1}
+            adding={adding}
+            setAdding={setAdding}
+            // The add row is part of this block: it carries the block's mark, so
+            // a marked area colors contiguously instead of leaving it a white gap.
+            marked={childMark}
+          />
+        )
+      )}
+
+      {/* While a copy is held, HOVERING a row it can follow previews the landing
+          point: the same accent line the placed cursor row draws, right after
+          this entry's whole block — so the click's outcome is visible before
+          the click. Zero-height, so nothing below it shifts. */}
+      {pastable && pasteHover && cursorId !== node.id && clip && (
+        <div className="yaml-row yaml-paste-preview" style={rowPad(depth)} aria-hidden="true">
+          <span className="yaml-paste-preview-line" />
+        </div>
+      )}
+
+      {/* The paste cursor: a horizontal line at the very point the copied entry
+          would land — right AFTER this entry's whole block, as its next sibling
+          (the same spot duplicateNode inserts at) — with the button that lands
+          it. The buffer survives the paste, so one copy can be put down more
+          than once. */}
+      {pastable && cursorId === node.id && clip && (
+        <div className="yaml-row yaml-cursor-row" style={rowPad(depth)}>
+          <span className="yaml-caret yaml-caret-empty" aria-hidden="true" />
+          <button
+            className="yaml-add yaml-paste-here"
+            onClick={() => {
+              onChange(pasteAfter(text, node, clip));
+              setCursor(null);
+            }}
+          >
+            paste {clip.label} here
+          </button>
+          <button
+            className="yaml-act"
+            onClick={() => setCursor(null)}
+            title="Remove the paste cursor"
+            aria-label="Remove the paste cursor"
+          >
+            ×
+          </button>
+        </div>
+      )}
+    </>
+  );
+}
+
+/** The `+ key` / `+ item` buttons a node offers, given what it can actually take.
+ *  `inline` renders them into a row's hover actions; otherwise it is a standalone,
+ *  always-visible add row indented to `depth` (the children's level). */
+function AddControls({
+  node,
+  adding,
+  setAdding,
+  inline,
+  depth = 0,
+  marked = null,
+}: {
+  node: YamlNode;
+  adding: string | null;
+  setAdding: (v: string | null) => void;
+  inline?: boolean;
+  depth?: number;
+  /** The surrounding block's mark — the add row is part of the block. */
+  marked?: SubtreeMark;
+}) {
+  const open = adding?.startsWith(`${node.id}:`);
+  return (
+    <span
+      className={
+        inline
+          ? "yaml-add-inline"
+          : ["yaml-row", "yaml-row-add", markClass(marked)].filter(Boolean).join(" ")
+      }
+      style={inline ? undefined : rowPad(depth)}
+    >
+      {/* Stand in for the grip + caret columns every entry row leads with, so the
+          add buttons line up under the existing keys/items, not 32px to their
+          left. Inline (hover-action) controls need no alignment. */}
+      {!inline && (
+        <>
+          <span className="yaml-caret yaml-caret-empty" aria-hidden="true" />
+        </>
+      )}
+      {canAddChild(node, "key") && (
+        <button
+          className="yaml-add"
+          onClick={() => setAdding(open ? null : `${node.id}:key`)}
+          // On a list a key is not a key but an item that is a mapping — the shape a
+          // list of mappings is actually grown by (`- name: api`).
+          title={
+            node.kind === "seq"
+              ? "Add an item that is a mapping (- key: value)"
+              : "Add a key under this entry"
+          }
+        >
+          + key
+        </button>
+      )}
+      {canAddChild(node, "item") && (
+        <button
+          className="yaml-add"
+          onClick={() => setAdding(open ? null : `${node.id}:item`)}
+          title="Add an item to this list"
+        >
+          + item
+        </button>
+      )}
+    </span>
+  );
+}
+
+/** The tone a comma-line token would carry as its own row. An existing item is
+ *  toned by its NODE (so a quoted "8080" stays a string, exactly as its row
+ *  would show it); a token the file doesn't hold yet — mid-edit — is toned by
+ *  its text, which is what it will parse as when committed plain. */
+type ValTone = "string" | "number" | "boolean" | "null";
+
+function tokenTone(t: string, known: Map<string, ValTone>): ValTone {
+  const k = known.get(t);
+  if (k) return k;
+  if (t === "" || t === "null" || t === "~") return "null";
+  if (/^-?(\d+|\d*\.\d+)([eE][+-]?\d+)?$/.test(t) || /^0[xob][0-9a-fA-F_]+$/.test(t)) {
+    return "number";
+  }
+  if (/^(true|false|yes|no|on|off)$/i.test(t)) return "boolean";
+  return "string";
+}
+
+/**
+ * The comma-line editor for a scalar-only list, with overflow chevrons: when the
+ * joined values outgrow the field, ‹ › appear beside it and HOVERING one glides
+ * the content that way — the whole list is reachable without grabbing the caret
+ * or a scrollbar an input doesn't have. The glide stops on leave, and at the
+ * edge (whose chevron then reads disabled).
+ *
+ * The entries keep the value colors their own rows would give them. An input
+ * cannot color parts of itself, so the input's text is transparent (caret kept)
+ * and a pointer-blind MIRROR on top renders the same buffer token by token,
+ * scroll-synced — the classic highlighted-input overlay.
+ */
+function InlineListCell({
+  node,
+  values,
+  label,
+  onCommit,
+}: {
+  node: YamlNode;
+  values: string[];
+  label: string;
+  onCommit: (vals: string[]) => void;
+}) {
+  const ref = useRef<HTMLInputElement | null>(null);
+  const mirrorRef = useRef<HTMLSpanElement | null>(null);
+  const raf = useRef<number | null>(null);
+  const [can, setCan] = useState({ left: false, right: false });
+
+  // The draft buffer, exactly TextCommit's contract: commit on Enter/blur,
+  // revert on Escape — owned here because the mirror has to color it live.
+  const initial = values.join(", ");
+  const [buf, setBuf] = useState(initial);
+  const dirty = useRef(false);
+  useEffect(() => {
+    if (!dirty.current) setBuf(initial);
+  }, [initial]);
+  const commit = () => {
+    dirty.current = false;
+    if (buf !== initial) {
+      onCommit(buf.split(",").map((v) => v.trim()).filter((v) => v !== ""));
+    }
+  };
+
+  // Each existing item's tone, by its node — the same call its row would make.
+  const known = useMemo(() => {
+    const m = new Map<string, ValTone>();
+    for (const c of node.children) if (!m.has(c.value)) m.set(c.value, scalarType(c));
+    return m;
+  }, [node]);
+
+  const measure = useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    // The mirror rides the input's scroll, or the colors would drift off the text.
+    if (mirrorRef.current) mirrorRef.current.scrollLeft = el.scrollLeft;
+    const max = el.scrollWidth - el.clientWidth;
+    const next = { left: el.scrollLeft > 0, right: el.scrollLeft < max - 1 };
+    setCan((cur) => (cur.left === next.left && cur.right === next.right ? cur : next));
+  }, []);
+
+  // Re-measure on everything that can move the overflow: typing (the buffer),
+  // a re-parse changing the values, scrolling, and the pane resizing.
+  useEffect(measure, [buf, measure]);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.addEventListener("scroll", measure);
+    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(measure) : null;
+    ro?.observe(el);
+    return () => {
+      el.removeEventListener("scroll", measure);
+      ro?.disconnect();
+    };
+  }, [measure]);
+
+  const stop = useCallback(() => {
+    if (raf.current != null) cancelAnimationFrame(raf.current);
+    raf.current = null;
+  }, []);
+  useEffect(() => stop, [stop]);
+
+  const glide = (dir: -1 | 1) => {
+    stop();
+    const step = () => {
+      const el = ref.current;
+      if (!el) return;
+      const before = el.scrollLeft;
+      el.scrollLeft = before + dir * 4;
+      measure();
+      // The edge: a disabled chevron swallows the mouseleave that would end the
+      // glide, so the glide ends itself when the scroll stops moving.
+      if (el.scrollLeft === before) return;
+      raf.current = requestAnimationFrame(step);
+    };
+    raf.current = requestAnimationFrame(step);
+  };
+
+  // The buffer, cut into pieces the mirror renders 1:1 — values keep their own
+  // spacing (the mirror must match the input to the character), commas stay
+  // muted like the tree's other punctuation.
+  const pieces = buf.match(/[^,]+|,/g) ?? [];
+
+  const shown = can.left || can.right;
+  return (
+    <span className="yaml-list-wrap">
+      {shown && (
+        <button
+          className="yaml-list-chevron"
+          disabled={!can.left}
+          onMouseEnter={() => glide(-1)}
+          onMouseLeave={stop}
+          tabIndex={-1}
+          aria-label={`Scroll ${label} left`}
+        >
+          ‹
+        </button>
+      )}
+      <span className="yaml-list-field">
+        <input
+          ref={ref}
+          className="yaml-value-input yaml-list-input"
+          value={buf}
+          aria-label={`Value of ${label}`}
+          onChange={(e) => {
+            dirty.current = true;
+            setBuf(e.target.value);
+          }}
+          onBlur={commit}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              commit();
+            } else if (e.key === "Escape") {
+              e.preventDefault();
+              dirty.current = false;
+              setBuf(initial);
+            }
+          }}
+        />
+        <span className="yaml-list-mirror" aria-hidden="true" ref={mirrorRef}>
+          {pieces.map((p, i) =>
+            p === "," ? (
+              <span key={i} className="yaml-colon">
+                ,
+              </span>
+            ) : (
+              <span key={i} className={`yaml-val-${tokenTone(p.trim(), known)}`}>
+                {p}
+              </span>
+            ),
+          )}
+        </span>
+      </span>
+      {shown && (
+        <button
+          className="yaml-list-chevron"
+          disabled={!can.right}
+          onMouseEnter={() => glide(1)}
+          onMouseLeave={stop}
+          tabIndex={-1}
+          aria-label={`Scroll ${label} right`}
+        >
+          ›
+        </button>
+      )}
+    </span>
+  );
+}
+
+/** The "copy the last item" action for a container, or undefined when there's
+ *  nothing to copy (not a list, empty, or the last entry owns a shared dash line
+ *  and so can't be duplicated on its own). */
+function copyLastAction(
+  container: YamlNode,
+  text: string,
+  onChange: (next: string) => void,
+  done: () => void,
+): (() => void) | undefined {
+  if (container.kind !== "seq") return undefined;
+  const last = container.children[container.children.length - 1];
+  if (!last || !last.deletable) return undefined;
+  return () => {
+    onChange(duplicateNode(text, last));
+    done();
+  };
+}
+
+/** The inline form a new entry is composed in: key (mappings only), type, value.
+ *  When adding an item to a non-empty list, `onCopyLast` offers the alternative of
+ *  duplicating the last entry (handy for a list of like-shaped mappings). */
+function AddRow({
+  depth,
+  kind,
+  onAdd,
+  onCancel,
+  onCopyLast,
+  marked = null,
+}: {
+  depth: number;
+  kind: "key" | "item";
+  onAdd: (kind: "key" | "item", key: string, type: YamlValueType, value: string) => void;
+  onCancel: () => void;
+  onCopyLast?: () => void;
+  /** The surrounding block's mark — the form row is part of the block. */
+  marked?: SubtreeMark;
+}) {
+  const [key, setKey] = useState("");
+  const [type, setType] = useState<YamlValueType>("text");
+  const [value, setValue] = useState("");
+  const first = useRef<HTMLInputElement | null>(null);
+  useEffect(() => {
+    first.current?.focus();
+  }, []);
+
+  // A container's value is its children, and null has no value to type.
+  const valueless = type === "map" || type === "seq" || type === "null";
+  const canAdd = kind === "item" || key.trim() !== "";
+  const submit = () => {
+    if (canAdd) onAdd(kind, key.trim(), type, value);
+  };
+
+  return (
+    <div
+      className={["yaml-row", "yaml-row-form", markClass(marked)].filter(Boolean).join(" ")}
+      style={rowPad(depth)}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          submit();
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          onCancel();
+        }
+      }}
+    >
+      <span className="yaml-caret yaml-caret-empty" aria-hidden="true" />
+      {/* Adding to a non-empty list: offer copying the last entry as the other
+          way to add one — for a list of like-shaped items (e.g. per-head configs)
+          it's far quicker to duplicate and tweak than to rebuild from scratch. */}
+      {kind === "item" && onCopyLast && (
+        <button
+          className="yaml-add yaml-add-copy"
+          onClick={onCopyLast}
+          title="Add a copy of the last item, to edit in place"
+        >
+          Copy last
+        </button>
+      )}
+      {kind === "key" ? (
+        <input
+          ref={first}
+          className="yaml-key-input"
+          value={key}
+          placeholder="key"
+          aria-label="New key"
+          onChange={(e) => setKey(e.target.value)}
+        />
+      ) : (
+        <span className="yaml-index">–</span>
+      )}
+      <select
+        className="yaml-type"
+        value={type}
+        aria-label="Value type"
+        onChange={(e) => setType(e.target.value as YamlValueType)}
+      >
+        <option value="text">text</option>
+        <option value="number">number</option>
+        <option value="boolean">boolean</option>
+        <option value="null">null</option>
+        <option value="map">map</option>
+        <option value="seq">list</option>
+      </select>
+      {type === "boolean" ? (
+        <select
+          className="yaml-type"
+          value={value || "true"}
+          aria-label="New value"
+          onChange={(e) => setValue(e.target.value)}
+        >
+          <option value="true">true</option>
+          <option value="false">false</option>
+        </select>
+      ) : (
+        !valueless && (
+          <input
+            ref={kind === "item" ? first : undefined}
+            className="yaml-value-input"
+            value={value}
+            placeholder="value"
+            aria-label="New value"
+            onChange={(e) => setValue(e.target.value)}
+          />
+        )
+      )}
+      <button className="yaml-add" onClick={submit} disabled={!canAdd}>
+        Add
+      </button>
+      <button className="yaml-act" onClick={onCancel} aria-label="Cancel">
+        ×
+      </button>
+    </div>
+  );
+}
+
+/** A scalar's value: an input (a textarea for a block scalar) that commits on
+ *  Enter/blur, or plain text when the node is one the tree won't rewrite. */
+function ValueCell({
+  node,
+  label,
+  onCommit,
+}: {
+  node: YamlNode;
+  label: string;
+  onCommit: (next: string) => void;
+}) {
+  if (!node.editable) {
+    return (
+      <span className="yaml-value yaml-value-locked" title={node.raw}>
+        {node.raw || node.value}
+      </span>
+    );
+  }
+  if (node.style === "block") {
+    return (
+      <BlockCell
+        key={node.id}
+        initial={node.value}
+        tag={node.raw}
+        ariaLabel={`Value of ${label}`}
+        onCommit={onCommit}
+      />
+    );
+  }
+  return (
+    <TextCommit
+      initial={node.value}
+      className={`yaml-value-input yaml-val-${scalarType(node)}`}
+      ariaLabel={`Value of ${label}`}
+      placeholder={node.style === "empty" ? "null" : undefined}
+      onCommit={onCommit}
+    />
+  );
+}
+
+/** A multi-line block scalar (`|`/`>`): committed on blur or Ctrl+Enter, since
+ *  plain Enter has to keep inserting newlines. */
+function BlockCell({
+  initial,
+  tag,
+  ariaLabel,
+  onCommit,
+}: {
+  initial: string;
+  /** The block header as written (`|`, `>-`, …), shown so the style is visible. */
+  tag: string;
+  ariaLabel: string;
+  onCommit: (next: string) => void;
+}) {
+  const [buf, setBuf] = useState(initial);
+  const dirty = useRef(false);
+  useEffect(() => {
+    if (!dirty.current) setBuf(initial);
+  }, [initial]);
+
+  return (
+    <span className="yaml-block">
+      <span className="yaml-block-tag">{tag}</span>
+      <textarea
+        className="yaml-block-input"
+        value={buf}
+        rows={Math.min(12, Math.max(2, buf.split("\n").length))}
+        aria-label={ariaLabel}
+        onChange={(e) => {
+          dirty.current = true;
+          setBuf(e.target.value);
+        }}
+        onBlur={() => {
+          dirty.current = false;
+          if (buf !== initial) onCommit(buf);
+        }}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+            e.preventDefault();
+            e.currentTarget.blur();
+          } else if (e.key === "Escape") {
+            e.preventDefault();
+            dirty.current = false;
+            setBuf(initial);
+          }
+        }}
+      />
+    </span>
+  );
+}
+
+/**
+ * A single-line input that commits on Enter/blur and reverts on Escape. It holds
+ * its own buffer rather than driving `onChange` per keystroke: every commit
+ * re-encodes the value into the file (quoting it when it must), and doing that on
+ * each keypress would rewrite the text — and move the caret — under the typist.
+ */
+function TextCommit({
+  initial,
+  className,
+  ariaLabel,
+  placeholder,
+  onCommit,
+  onCancel,
+}: {
+  initial: string;
+  className: string;
+  ariaLabel: string;
+  placeholder?: string;
+  onCommit: (next: string) => void;
+  onCancel?: () => void;
+}) {
+  const [buf, setBuf] = useState(initial);
+  const dirty = useRef(false);
+  useEffect(() => {
+    if (!dirty.current) setBuf(initial);
+  }, [initial]);
+
+  return (
+    <input
+      className={className}
+      value={buf}
+      placeholder={placeholder}
+      aria-label={ariaLabel}
+      autoFocus={!!onCancel}
+      onChange={(e) => {
+        dirty.current = true;
+        setBuf(e.target.value);
+      }}
+      onBlur={() => {
+        dirty.current = false;
+        if (buf !== initial) onCommit(buf);
+        else onCancel?.();
+      }}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          dirty.current = false;
+          if (buf !== initial) onCommit(buf);
+          else onCancel?.();
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          dirty.current = false;
+          setBuf(initial);
+          onCancel?.();
+        }
+      }}
+    />
+  );
+}
diff --git a/src/components/embed/fileAccess.ts b/src/components/embed/fileAccess.ts
index a6d6f1b..1575bb1 100644
--- a/src/components/embed/fileAccess.ts
+++ b/src/components/embed/fileAccess.ts
@@ -82,3 +82,36 @@ export function fileMtime(path: string, projectId: string | null): Promise<numbe
 export function detectMime(path: string, projectId: string | null): Promise<string> {
   return invoke<string>("detect_mime", { path, projectId });
 }
+
+/**
+ * Turn a raw file-read/stat failure into a sentence a user can act on.
+ *
+ * The backend surfaces low-level text — `sftp metadata failed: …`,
+ * `sftp read failed: …`, an OS `No such file or directory` — which means nothing
+ * to someone who just clicked a file. The single most common cause on a remote
+ * project is opening a file that only exists in the local mirror while the viewer
+ * is reading the host over SFTP (never synced): say that, and point at the fix.
+ * Falls back to a plain "couldn't open" rather than dumping the raw string.
+ */
+export function describeFileError(e: unknown): string {
+  const raw = String(e);
+  const remote = /sftp/i.test(raw);
+  if (/permission|denied|eacces/i.test(raw)) {
+    return "Permission denied — you don't have access to this file.";
+  }
+  // A remote stat/metadata failure means the host doesn't have this path — on a
+  // remote project that's overwhelmingly a local-only file (never synced), which
+  // is the actionable thing to say. An explicit "no such file" says the same.
+  if (
+    /no such file|not found|does not exist|enoent/i.test(raw) ||
+    (remote && /metadata|stat/i.test(raw))
+  ) {
+    return remote
+      ? "This file isn't on the remote host — it may be local-only (never synced). Switch the viewer to Local to open it."
+      : "This file no longer exists.";
+  }
+  if (remote) {
+    return "Couldn't read this file from the remote host. Check the connection and try again.";
+  }
+  return "Couldn't open this file.";
+}
diff --git a/src/components/embed/pdf/PdfViewer.tsx b/src/components/embed/pdf/PdfViewer.tsx
index bbcf6ff..d5ccc98 100644
--- a/src/components/embed/pdf/PdfViewer.tsx
+++ b/src/components/embed/pdf/PdfViewer.tsx
@@ -33,7 +33,15 @@ import {
   type PageList,
 } from "../../../lib/viewers/pageModel";
 import { openSource, newSourceId, buildPdf, type PdfSources } from "./pdfDoc";
+import {
+  loadOutline,
+  detectHeadings,
+  flattenOutline,
+  type OutlineNode,
+  type HeadingRun,
+} from "./outline";
 import { PageStrip } from "../../common/PageStrip";
+import { UntestedTag } from "../../common/UntestedTag";
 import type { PageTransfer } from "../../../stores/pdfDrag";
 import { ContextFilePicker } from "../ContextFilePicker";
 import { useProjectsStore } from "../../../stores/projects";
@@ -381,6 +389,262 @@ function PdfPageCanvas({
   );
 }
 
+/**
+ * One row of the contents sidebar, plus its children. A node with a resolved page
+ * is a jump button; one without (an unresolvable destination) is inert text. A
+ * node with children carries a ▸/▾ disclosure that toggles its subtree.
+ */
+/** The leading sign for a leaf row, one per level: a dot for the top tiers, a
+ *  dash deeper down — the disclosure caret (a triangle) stands in for it on a row
+ *  that has children, so a branch reads as ▸/▾, a mid leaf as •, a deep leaf as –. */
+const leafSign = (depth: number) => (depth >= 2 ? "–" : "•");
+
+function OutlineRow({
+  node,
+  depth,
+  collapsed,
+  currentId,
+  onToggle,
+  onJump,
+  onHover,
+}: {
+  node: OutlineNode;
+  depth: number;
+  collapsed: Set<string>;
+  currentId: string | null;
+  onToggle: (id: string) => void;
+  onJump: (page: number) => void;
+  onHover: (page: number | null, rect: DOMRect | null) => void;
+}) {
+  const hasKids = node.children.length > 0;
+  const isCollapsed = collapsed.has(node.id);
+  return (
+    <>
+      <div
+        className={`file-viewer-pdf-outline-row${node.id === currentId ? " current" : ""}${node.page == null ? " inert" : ""}`}
+        style={{ paddingLeft: 6 + depth * 14 }}
+      >
+        {hasKids ? (
+          <button
+            className="file-viewer-pdf-outline-caret"
+            onClick={() => onToggle(node.id)}
+            aria-label={isCollapsed ? "Expand" : "Collapse"}
+            title={isCollapsed ? "Expand" : "Collapse"}
+          >
+            {isCollapsed ? "▸" : "▾"}
+          </button>
+        ) : (
+          <span className="file-viewer-pdf-outline-caret is-sign" aria-hidden="true">
+            {leafSign(depth)}
+          </span>
+        )}
+        <button
+          className={`file-viewer-pdf-outline-title depth-${Math.min(depth, 3)}`}
+          onClick={() => node.page != null && onJump(node.page)}
+          onMouseEnter={(e) =>
+            node.page != null && onHover(node.page, e.currentTarget.getBoundingClientRect())
+          }
+          onMouseLeave={() => onHover(null, null)}
+          disabled={node.page == null}
+          title={node.page != null ? `${node.title} — page ${node.page}` : node.title}
+        >
+          {node.title}
+        </button>
+      </div>
+      {hasKids &&
+        !isCollapsed &&
+        node.children.map((c) => (
+          <OutlineRow
+            key={c.id}
+            node={c}
+            depth={depth + 1}
+            collapsed={collapsed}
+            currentId={currentId}
+            onToggle={onToggle}
+            onJump={onJump}
+            onHover={onHover}
+          />
+        ))}
+    </>
+  );
+}
+
+/** Preview card width in CSS px; the thumbnail's height follows the page aspect. */
+const OUTLINE_PREVIEW_W = 220;
+
+/**
+ * A floating thumbnail of a contents entry's page, shown while its row is
+ * hovered. Renders the page once at preview width and memoises it in the shared
+ * `cache` (keyed by file page), so re-hovering the same chapter is instant and a
+ * long document only rasterises the pages actually pointed at.
+ */
+function OutlinePreview({
+  doc,
+  page,
+  top,
+  left,
+  cache,
+}: {
+  doc: PDFDocumentProxy;
+  page: number;
+  top: number;
+  left: number;
+  cache: Map<number, string>;
+}) {
+  const [url, setUrl] = useState<string | null>(() => cache.get(page) ?? null);
+  useEffect(() => {
+    const hit = cache.get(page);
+    if (hit) {
+      setUrl(hit);
+      return;
+    }
+    setUrl(null);
+    let cancelled = false;
+    void (async () => {
+      try {
+        const p = await doc.getPage(page);
+        if (cancelled) return;
+        const base = p.getViewport({ scale: 1, rotation: p.rotate });
+        const dpr = window.devicePixelRatio || 1;
+        const scale = (OUTLINE_PREVIEW_W / (base.width || 1)) * dpr;
+        const viewport = p.getViewport({ scale, rotation: p.rotate });
+        const canvas = document.createElement("canvas");
+        canvas.width = Math.max(1, Math.floor(viewport.width));
+        canvas.height = Math.max(1, Math.floor(viewport.height));
+        const ctx = canvas.getContext("2d");
+        if (!ctx) return;
+        await p.render({ canvasContext: ctx, viewport }).promise;
+        if (cancelled) return;
+        const data = canvas.toDataURL("image/png");
+        cache.set(page, data);
+        setUrl(data);
+      } catch {
+        /* leave the card in its loading state on a render failure */
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [doc, page, cache]);
+
+  return (
+    <div className="file-viewer-pdf-outline-preview" style={{ top, left, width: OUTLINE_PREVIEW_W }}>
+      {url ? (
+        <img src={url} alt="" draggable={false} />
+      ) : (
+        <div className="file-viewer-pdf-outline-preview-loading">Rendering page {page}…</div>
+      )}
+      <div className="file-viewer-pdf-outline-preview-cap">Page {page}</div>
+    </div>
+  );
+}
+
+/**
+ * The contents sidebar: the PDF's embedded outline (chapters/sections) as a
+ * collapsible tree. Clicking an entry jumps the reader to its page; the entry
+ * whose page is currently in view is highlighted; hovering an entry shows a
+ * thumbnail of its page. A PDF with no outline shows a short notice.
+ */
+function OutlinePane({
+  doc,
+  nodes,
+  placeholder,
+  derived,
+  currentId,
+  onJump,
+}: {
+  /** The file's own document, for rendering hover previews (null while loading). */
+  doc: PDFDocumentProxy | null;
+  /** The chapters to show, or null while they're still being loaded/scanned. */
+  nodes: OutlineNode[] | null;
+  /** The message to show when there is nothing to render (loading or empty). */
+  placeholder: string | null;
+  /** True when `nodes` came from the font-size fallback, not an embedded outline. */
+  derived: boolean;
+  currentId: string | null;
+  onJump: (page: number) => void;
+}) {
+  const [collapsed, setCollapsed] = useState<Set<string>>(() => new Set());
+  const toggle = useCallback((id: string) => {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+
+  // Hover preview: a small debounce keeps a quick pass down the list from
+  // rasterising every page it crosses; the card is placed just right of the pane
+  // at the hovered row's height (clamped to stay on screen).
+  const paneRef = useRef<HTMLDivElement>(null);
+  const previewCache = useRef<Map<number, string>>(new Map());
+  const [preview, setPreview] = useState<{ page: number; top: number; left: number } | null>(null);
+  const hoverTimer = useRef<number | null>(null);
+  const onHover = useCallback((page: number | null, rect: DOMRect | null) => {
+    if (hoverTimer.current != null) window.clearTimeout(hoverTimer.current);
+    if (page == null || !rect) {
+      setPreview(null);
+      return;
+    }
+    hoverTimer.current = window.setTimeout(() => {
+      const pane = paneRef.current?.getBoundingClientRect();
+      const left = (pane?.right ?? rect.right) + 8;
+      // Keep the card on screen: assume up to ~320px tall and nudge up if the row
+      // sits near the bottom edge.
+      const top = Math.max(8, Math.min(rect.top, window.innerHeight - 328));
+      setPreview({ page, top, left });
+    }, 140);
+  }, []);
+  useEffect(
+    () => () => { if (hoverTimer.current != null) window.clearTimeout(hoverTimer.current); },
+    [],
+  );
+
+  return (
+    <div className="file-viewer-pdf-outline" ref={paneRef}>
+      <div className="file-viewer-pdf-outline-head">
+        <span>Contents</span>
+        <UntestedTag />
+      </div>
+      {derived && nodes && nodes.length > 0 && (
+        <div className="file-viewer-pdf-outline-note" title="This document has no embedded table of contents; these headings were inferred from the text's font sizes.">
+          Inferred from text
+        </div>
+      )}
+      <div
+        className="file-viewer-pdf-outline-body"
+        // A stale row rect after a scroll would misplace the card, so drop it.
+        onScroll={() => setPreview(null)}
+      >
+        {placeholder != null ? (
+          <div className="file-viewer-pdf-outline-empty">{placeholder}</div>
+        ) : (
+          nodes!.map((n) => (
+            <OutlineRow
+              key={n.id}
+              node={n}
+              depth={0}
+              collapsed={collapsed}
+              currentId={currentId}
+              onToggle={toggle}
+              onJump={onJump}
+              onHover={onHover}
+            />
+          ))
+        )}
+      </div>
+      {preview && doc && (
+        <OutlinePreview
+          doc={doc}
+          page={preview.page}
+          top={preview.top}
+          left={preview.left}
+          cache={previewCache.current}
+        />
+      )}
+    </div>
+  );
+}
+
 /**
  * Reusable pdf.js-backed PDF view: a zoom toolbar over a scrolling stack of page
  * canvases. Unlike the old native `<iframe>`, every surface here is ours, so the
@@ -426,6 +690,10 @@ function PdfCanvas({
   // rather than closing over a stale snapshot.
   const pagesRef = useRef<PageList>([]);
   pagesRef.current = pages;
+  // "Page X / N" toolbar readout: the page occupying the viewport. Declared here
+  // (rather than beside `updateVisiblePage` below) so the go-to-page control,
+  // which seeds its input from the current value, can read it too.
+  const [visiblePage, setVisiblePage] = useState(1);
   // Undo/redo: the arrangement is a small immutable list, so history is just a
   // stack of them.
   const [past, setPast] = useState<PageList[]>([]);
@@ -434,6 +702,13 @@ function PdfCanvas({
   const [editError, setEditError] = useState<string | null>(null);
   /** The page rail (the thumbnail strip you arrange pages in) is showing. */
   const [railOpen, setRailOpen] = useState(false);
+  /** The contents sidebar (the PDF's chapters/outline) is showing. */
+  const [outlineOpen, setOutlineOpen] = useState(false);
+  /** The document's resolved outline: null = not loaded yet, [] = none. */
+  const [outline, setOutline] = useState<OutlineNode[] | null>(null);
+  /** The font-size heading fallback, used only when `outline` is empty: null =
+   *  not scanned yet, [] = none found. */
+  const [headings, setHeadings] = useState<OutlineNode[] | null>(null);
   /** The rail's current selection, so an insert lands where the reader is looking. */
   const [selection, setSelection] = useState<Set<string>>(new Set());
   /** The "Insert PDF…" picker is open. */
@@ -866,8 +1141,42 @@ function PdfCanvas({
     scrollRef.current?.focus();
   }, []);
 
-  // Ctrl/Cmd+F opens the find bar; Esc closes it. Bound on the host so it fires
-  // wherever focus sits within the PDF pane (the scroll area is focusable).
+  // ── Go to page (Ctrl+G) ───────────────────────────────────────────────────
+  // Jumps by ARRANGEMENT position — the same "X / N" the toolbar readout and
+  // `visiblePage` already count in — so it lands right even after pages have
+  // been reordered/merged/deleted, without having to resolve a file page first.
+  const [pageJumpOpen, setPageJumpOpen] = useState(false);
+  const [pageJumpValue, setPageJumpValue] = useState("");
+  const pageJumpInputRef = useRef<HTMLInputElement>(null);
+  const jumpToArrangementIndex = useCallback((pos: number) => {
+    const count = pagesRef.current.length;
+    if (count === 0) return;
+    const idx = Math.min(Math.max(Math.trunc(pos), 1), count) - 1;
+    const wrap = contentRef.current?.children[idx] as HTMLElement | undefined;
+    wrap?.scrollIntoView({ block: "start", inline: "nearest" });
+  }, []);
+  const openPageJump = useCallback(() => {
+    if (pages.length === 0) return;
+    setPageJumpValue(String(visiblePage));
+    setPageJumpOpen(true);
+    requestAnimationFrame(() => {
+      pageJumpInputRef.current?.focus();
+      pageJumpInputRef.current?.select();
+    });
+  }, [pages.length, visiblePage]);
+  const closePageJump = useCallback(() => {
+    setPageJumpOpen(false);
+    scrollRef.current?.focus();
+  }, []);
+  const commitPageJump = useCallback(() => {
+    const n = parseInt(pageJumpValue, 10);
+    if (Number.isFinite(n)) jumpToArrangementIndex(n);
+    closePageJump();
+  }, [pageJumpValue, jumpToArrangementIndex, closePageJump]);
+
+  // Ctrl/Cmd+F opens the find bar, Ctrl/Cmd+G opens go-to-page; Esc closes
+  // whichever is open. Bound on the host so it fires wherever focus sits within
+  // the PDF pane (the scroll area is focusable).
   const onHostKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLDivElement>) => {
       const mod = e.ctrlKey || e.metaKey;
@@ -875,6 +1184,9 @@ function PdfCanvas({
       if (mod && key === "f") {
         e.preventDefault();
         openFind();
+      } else if (mod && key === "g") {
+        e.preventDefault();
+        openPageJump();
       } else if (mod && key === "s") {
         e.preventDefault();
         void handleSave();
@@ -884,12 +1196,15 @@ function PdfCanvas({
       } else if (mod && (key === "y" || (key === "z" && e.shiftKey))) {
         e.preventDefault();
         redo();
+      } else if (e.key === "Escape" && pageJumpOpen) {
+        e.preventDefault();
+        closePageJump();
       } else if (e.key === "Escape" && findOpen) {
         e.preventDefault();
         closeFind();
       }
     },
-    [openFind, closeFind, findOpen, handleSave, undo, redo],
+    [openFind, closeFind, findOpen, openPageJump, closePageJump, pageJumpOpen, handleSave, undo, redo],
   );
   const onFindKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Enter") {
@@ -1114,7 +1429,6 @@ function PdfCanvas({
   // is a third of the way down the viewport (typical PDF-viewer feel); the page
   // wraps are always all mounted, so a linear scan over their live rects stays
   // correct across zoom, resize, and mixed page heights.
-  const [visiblePage, setVisiblePage] = useState(1);
   const updateVisiblePage = useCallback(() => {
     const el = scrollRef.current;
     const content = contentRef.current;
@@ -1134,6 +1448,99 @@ function PdfCanvas({
     if (doc) updateVisiblePage();
   }, [doc, updateVisiblePage]);
 
+  // ── Contents / outline (#pdf-outline) ────────────────────────────────────
+  // Load the PDF's embedded outline (its chapters) when a document loads. Reset
+  // to "not loaded" first so a file switch never shows the prior file's chapters.
+  useEffect(() => {
+    setOutline(null);
+    setHeadings(null);
+    if (!doc) return;
+    let cancelled = false;
+    void (async () => {
+      try {
+        const nodes = await loadOutline(doc);
+        if (!cancelled) setOutline(nodes);
+      } catch {
+        if (!cancelled) setOutline([]); // treat an unreadable outline as none
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [doc]);
+
+  // Font-size heading fallback: when the PDF ships NO embedded outline, infer
+  // chapters from the text's typography (`detectHeadings`). Run it lazily — only
+  // once the contents pane is opened on an outline-less document — because it
+  // reads every page's text content, which is far heavier than `getOutline`.
+  useEffect(() => {
+    if (!outlineOpen || !doc) return;
+    if (outline == null || outline.length > 0) return; // embedded outline present/pending
+    if (headings != null) return; // already scanned
+    let cancelled = false;
+    void (async () => {
+      const runs: HeadingRun[] = [];
+      // Sequential (not Promise.all): a 500-page document would otherwise fire
+      // 500 concurrent text extractions at the pdf.js worker at once.
+      for (let p = 1; p <= doc.numPages; p++) {
+        if (cancelled) return;
+        try {
+          const page = await doc.getPage(p);
+          const viewport = page.getViewport({ scale: 1 });
+          const content = await page.getTextContent();
+          for (const it of content.items) {
+            if (!("str" in it) || typeof it.str !== "string" || !it.str.trim()) continue;
+            const tx = pdfjs.Util.transform(viewport.transform, it.transform);
+            const size = Math.hypot(tx[2], tx[3]);
+            runs.push({ str: it.str, size, page: p, x: tx[4], y: tx[5] - size });
+          }
+        } catch {
+          /* skip an unreadable page */
+        }
+      }
+      if (!cancelled) setHeadings(detectHeadings(runs));
+    })();
+    return () => { cancelled = true; };
+  }, [outlineOpen, doc, outline, headings]);
+
+  // The chapters actually shown: the embedded outline if the PDF has one, else
+  // the inferred headings. `activeOutline` is null while its source is still
+  // loading/scanning; `outlineDerived` says the fallback is in use.
+  const outlineDerived = outline != null && outline.length === 0;
+  const activeOutline: OutlineNode[] | null =
+    outline == null ? null : outline.length > 0 ? outline : headings;
+  const outlinePlaceholder =
+    activeOutline && activeOutline.length > 0
+      ? null
+      : outline == null
+        ? "Reading outline…"
+        : outlineDerived && headings == null
+          ? "Scanning for headings…"
+          : "No chapters in this document.";
+
+  // Jump the reader to a 1-based FILE page from the contents sidebar. The reader
+  // shows an arrangement, so resolve the file page to whichever sheet is showing
+  // it now (a moved/merged page still lands right; a deleted one is a no-op).
+  const jumpToPage = useCallback((filePage: number) => {
+    const idx = pagesRef.current.findIndex((r) => r.src === SELF && r.page === filePage);
+    if (idx < 0) return;
+    const wrap = contentRef.current?.children[idx] as HTMLElement | undefined;
+    wrap?.scrollIntoView({ block: "start", inline: "nearest" });
+  }, []);
+
+  // The outline entry to highlight: the last chapter (in document order) whose
+  // page is at or before the page currently in view. Recomputed from the flat
+  // outline as the reader scrolls (`visiblePage`) — but keyed off the *file* page
+  // the visible SHEET shows, so it stays right after pages are rearranged.
+  const currentOutlineId = useMemo(() => {
+    if (!activeOutline || activeOutline.length === 0) return null;
+    const sheet = pages[visiblePage - 1];
+    const filePage = sheet && sheet.src === SELF ? sheet.page : visiblePage;
+    let best: string | null = null;
+    for (const { node } of flattenOutline(activeOutline)) {
+      if (node.page != null && node.page <= filePage) best = node.id;
+    }
+    return best;
+  }, [activeOutline, visiblePage, pages]);
+
   // #viewerpos: persist the scroll position as the reader scrolls (throttled,
   // trailing-edge). Ignored while a programmatic restore is still settling so we
   // don't overwrite the saved target with an intermediate frame.
@@ -1231,6 +1638,19 @@ function PdfCanvas({
   return (
     <div className="file-viewer-pdf-host" onKeyDown={onHostKeyDown}>
       <div className="file-viewer-pdf-toolbar" role="group" aria-label="PDF zoom controls">
+        {/* Contents (chapters) sits at the far left — it opens the navigation
+            column on the same side, so the button lines up over it. */}
+        <button
+          className={`file-viewer-zoom-btn${outlineOpen ? " active" : ""}`}
+          onClick={() => setOutlineOpen((v) => !v)}
+          disabled={!doc}
+          title="Contents (chapters)"
+          aria-label="Contents"
+          aria-pressed={outlineOpen}
+        >
+          ☰
+        </button>
+        <span className="file-viewer-pdf-toolbar-sep" aria-hidden="true" />
         <button
           className="file-viewer-zoom-btn"
           onClick={() => {
@@ -1265,9 +1685,37 @@ function PdfCanvas({
           Fit width
         </button>
         {doc && (
-          <span className="file-viewer-pdf-pagenum" title="Page">
-            {visiblePage} / {pages.length}
-          </span>
+          pageJumpOpen ? (
+            <input
+              ref={pageJumpInputRef}
+              className="file-viewer-pdf-pagejump-input"
+              type="number"
+              min={1}
+              max={pages.length}
+              value={pageJumpValue}
+              aria-label="Go to page"
+              onChange={(e) => setPageJumpValue(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  commitPageJump();
+                } else if (e.key === "Escape") {
+                  e.preventDefault();
+                  closePageJump();
+                }
+              }}
+              onBlur={closePageJump}
+            />
+          ) : (
+            <button
+              className="file-viewer-zoom-btn file-viewer-pdf-pagenum"
+              onClick={openPageJump}
+              title="Go to page (Ctrl+G)"
+              aria-label="Go to page"
+            >
+              {visiblePage} / {pages.length}
+            </button>
+          )
         )}
         <button
           className={`file-viewer-zoom-btn${findOpen ? " active" : ""}`}
@@ -1434,6 +1882,16 @@ function PdfCanvas({
         </div>
       )}
       <div className="file-viewer-pdf-scroll-wrap">
+        {outlineOpen && doc && (
+          <OutlinePane
+            doc={doc}
+            nodes={activeOutline}
+            placeholder={outlinePlaceholder}
+            derived={outlineDerived}
+            currentId={currentOutlineId}
+            onJump={jumpToPage}
+          />
+        )}
         {railOpen && doc && (
           // The page rail: the SAME <PageStrip> the print preview uses, stood on its
           // side. Drag to reorder, shift-click for a range, right-click for the rest.
diff --git a/src/components/embed/pdf/outline.ts b/src/components/embed/pdf/outline.ts
new file mode 100644
index 0000000..0ea2c73
--- /dev/null
+++ b/src/components/embed/pdf/outline.ts
@@ -0,0 +1,240 @@
+/**
+ * The PDF's embedded outline (its bookmarks / table of contents) resolved to a
+ * jump-ready tree — the "chapters" the contents sidebar renders.
+ *
+ * A PDF author ships the outline as a tree of items, each pointing at a
+ * *destination* rather than a plain page number: a named string, or an explicit
+ * array whose first element is a page reference. `loadOutline` walks that tree
+ * and resolves every destination to a 1-based **file** page (the same numbering
+ * `PageRef.page` uses), so the viewer can map it to whichever sheet is currently
+ * showing that page — even after pages are reordered, deleted or merged.
+ *
+ * Pure and best-effort: an item whose destination can't be resolved keeps a
+ * `page` of `null` (rendered but not clickable) rather than failing the load, and
+ * a document with no outline simply yields an empty list.
+ */
+import type { PDFDocumentProxy } from "pdfjs-dist";
+
+/** One resolved outline entry (a chapter/section/subsection). */
+export interface OutlineNode {
+  /** Stable id for React keys and collapse state (its path through the tree). */
+  id: string;
+  title: string;
+  /** 1-based file page this entry jumps to, or null if it couldn't resolve. */
+  page: number | null;
+  children: OutlineNode[];
+}
+
+/** The raw shape pdf.js hands back from `getOutline()` (the fields we use). */
+interface RawOutlineItem {
+  title: string;
+  dest: string | unknown[] | null;
+  items?: RawOutlineItem[];
+}
+
+/**
+ * Resolve one outline destination to a 1-based page number.
+ *
+ * A named destination (a string) is looked up first; an explicit array carries
+ * the page reference in slot 0 — usually a `{num, gen}` ref (resolved via
+ * `getPageIndex`), occasionally already a 0-based page index.
+ */
+async function destToPage(
+  doc: PDFDocumentProxy,
+  dest: string | unknown[] | null,
+): Promise<number | null> {
+  let explicit: unknown = dest;
+  if (typeof dest === "string") {
+    explicit = await doc.getDestination(dest);
+  }
+  if (!Array.isArray(explicit) || explicit.length === 0) return null;
+  const ref = explicit[0];
+  if (typeof ref === "number") return ref + 1; // already a 0-based page index
+  try {
+    const idx = await doc.getPageIndex(ref as Parameters<PDFDocumentProxy["getPageIndex"]>[0]);
+    return idx + 1;
+  } catch {
+    return null;
+  }
+}
+
+/** Resolve one raw item and its descendants into an {@link OutlineNode}. */
+async function resolveItem(
+  doc: PDFDocumentProxy,
+  raw: RawOutlineItem,
+  id: string,
+): Promise<OutlineNode> {
+  const [page, children] = await Promise.all([
+    destToPage(doc, raw.dest ?? null),
+    resolveItems(doc, raw.items ?? [], id),
+  ]);
+  return { id, title: raw.title || "Untitled", page, children };
+}
+
+/** Resolve a sibling list, giving each child a path-derived id. */
+async function resolveItems(
+  doc: PDFDocumentProxy,
+  items: RawOutlineItem[],
+  parentId: string,
+): Promise<OutlineNode[]> {
+  return Promise.all(
+    items.map((it, i) => resolveItem(doc, it, parentId ? `${parentId}.${i}` : String(i))),
+  );
+}
+
+/**
+ * Load the document's outline as a resolved, jump-ready tree. Returns `[]` when
+ * the PDF carries no outline (many scanned or exported PDFs don't).
+ */
+export async function loadOutline(doc: PDFDocumentProxy): Promise<OutlineNode[]> {
+  const raw = (await doc.getOutline()) as RawOutlineItem[] | null;
+  if (!raw || raw.length === 0) return [];
+  return resolveItems(doc, raw, "");
+}
+
+/**
+ * One positioned text run pulled from a page, for the heading fallback. `size` is
+ * the run's font size (em) in big points; `y` is its top in a top-left viewport,
+ * so smaller `y` is higher on the page (reading order). Page is 1-based.
+ */
+export interface HeadingRun {
+  str: string;
+  size: number;
+  page: number;
+  x: number;
+  y: number;
+}
+
+/** Round a font size to the nearest 0.5 so float jitter doesn't split a size. */
+const roundSize = (n: number) => Math.round(n * 2) / 2;
+
+/**
+ * Best-effort "chapters" for a PDF that ships **no** embedded outline: infer a
+ * heading tree from the text's own typography.
+ *
+ * The idea is that a heading is set distinctly larger than body text. So: find
+ * the **body** size (the size covering the most characters), group runs into
+ * lines, keep the lines set clearly larger than body, drop **running headers**
+ * (the same text repeated across many pages), and nest what's left by size
+ * (largest size = top level). It is a heuristic, not the author's intent — so it
+ * is only ever used when {@link loadOutline} came back empty, and the sidebar
+ * labels it as derived.
+ */
+export function detectHeadings(runs: HeadingRun[]): OutlineNode[] {
+  const clean = runs.filter((r) => r.str && r.str.trim().length > 0);
+  if (clean.length === 0) return [];
+
+  // Body size = the size covering the most characters (a char-weighted mode).
+  const charBySize = new Map<number, number>();
+  for (const r of clean) {
+    const s = roundSize(r.size);
+    charBySize.set(s, (charBySize.get(s) ?? 0) + r.str.trim().length);
+  }
+  let body = 0;
+  let bodyChars = -1;
+  for (const [s, c] of charBySize) {
+    if (c > bodyChars) {
+      bodyChars = c;
+      body = s;
+    }
+  }
+  if (body <= 0) return [];
+
+  // Group runs into lines (same page, near-equal baseline) in reading order.
+  const sorted = [...clean].sort((a, b) => a.page - b.page || a.y - b.y || a.x - b.x);
+  interface Line {
+    page: number;
+    y: number;
+    text: string;
+    size: number;
+  }
+  const lines: Line[] = [];
+  let cur: { page: number; y: number; parts: HeadingRun[] } | null = null;
+  const flush = () => {
+    if (!cur) return;
+    const parts = [...cur.parts].sort((a, b) => a.x - b.x);
+    const text = parts
+      .map((p) => p.str)
+      .join("")
+      .replace(/\s+/g, " ")
+      .trim();
+    // Dominant size on the line = the size covering the most of its characters.
+    const bySize = new Map<number, number>();
+    for (const p of parts) {
+      const s = roundSize(p.size);
+      bySize.set(s, (bySize.get(s) ?? 0) + p.str.trim().length);
+    }
+    let size = body;
+    let best = -1;
+    for (const [s, c] of bySize) {
+      if (c > best) {
+        best = c;
+        size = s;
+      }
+    }
+    if (text) lines.push({ page: cur.page, y: cur.y, text, size });
+    cur = null;
+  };
+  for (const r of sorted) {
+    const tol = Math.max(2, roundSize(r.size) * 0.4);
+    if (cur && r.page === cur.page && Math.abs(r.y - cur.y) <= tol) {
+      cur.parts.push(r);
+    } else {
+      flush();
+      cur = { page: r.page, y: r.y, parts: [r] };
+    }
+  }
+  flush();
+
+  // Candidates: distinctly larger than body, real letters, not a whole paragraph.
+  const threshold = body * 1.2;
+  const candidates = lines.filter(
+    (l) => l.size >= threshold && l.text.length >= 2 && l.text.length <= 160 && /\p{L}/u.test(l.text),
+  );
+  if (candidates.length === 0) return [];
+
+  // Drop running headers/footers: the same heading text on more than 3 pages is
+  // page furniture (a chapter title repeated in the header), not a chapter mark.
+  const norm = (t: string) => t.toLowerCase().replace(/\s+/g, " ").trim();
+  const pagesByText = new Map<string, Set<number>>();
+  for (const l of candidates) {
+    const k = norm(l.text);
+    let set = pagesByText.get(k);
+    if (!set) pagesByText.set(k, (set = new Set()));
+    set.add(l.page);
+  }
+  const headings = candidates.filter((l) => (pagesByText.get(norm(l.text))?.size ?? 0) <= 3);
+  if (headings.length === 0) return [];
+
+  // Level by size: the largest distinct heading size is the top level.
+  const sizes = [...new Set(headings.map((h) => h.size))].sort((a, b) => b - a);
+  const levelOf = (s: number) => sizes.indexOf(s);
+
+  // Nest by level with a stack, in document order.
+  const roots: OutlineNode[] = [];
+  const stack: { node: OutlineNode; level: number }[] = [];
+  let seq = 0;
+  for (const h of headings) {
+    const node: OutlineNode = { id: `h${seq++}`, title: h.text, page: h.page, children: [] };
+    const level = levelOf(h.size);
+    while (stack.length && stack[stack.length - 1].level >= level) stack.pop();
+    if (stack.length) stack[stack.length - 1].node.children.push(node);
+    else roots.push(node);
+    stack.push({ node, level });
+  }
+  return roots;
+}
+
+/**
+ * Flatten a resolved outline into visit order, tagging each node with its depth
+ * — used to decide which entry is "current" (the deepest one whose page is at or
+ * before the page in view). Nodes with no resolved page are skipped.
+ */
+export function flattenOutline(nodes: OutlineNode[], depth = 0): { node: OutlineNode; depth: number }[] {
+  const out: { node: OutlineNode; depth: number }[] = [];
+  for (const node of nodes) {
+    out.push({ node, depth });
+    if (node.children.length) out.push(...flattenOutline(node.children, depth + 1));
+  }
+  return out;
+}
diff --git a/src/components/files/FileBrowser.tsx b/src/components/files/FileBrowser.tsx
index 9a7e12c..7f162b2 100644
--- a/src/components/files/FileBrowser.tsx
+++ b/src/components/files/FileBrowser.tsx
@@ -3,11 +3,13 @@ import { invoke } from "@tauri-apps/api/core";
 import { Toggle } from "../common/Toggle";
 import { useWindowsStore } from "../../stores/windows";
 import { useProjectsStore } from "../../stores/projects";
+import { useSettingsStore } from "../../stores/settings";
 import { Dropdown } from "../common/Dropdown";
 import {
   type FileEntry,
   type SortKey,
   STANDARD_PROJECT_FILES,
+  disabledViewers,
   fileIcon,
   folderIcon,
   fmtModified,
@@ -19,6 +21,7 @@ import {
 } from "../../lib/viewers/fileUtils";
 import { basename, dirname, isAbsolute } from "../../lib/paths";
 import { closeTabsForDeletedPath, retargetTabsForRenamedPath } from "./fileTabSync";
+import { openFileEntry } from "./openFileEntry";
 
 type ProjectJson = Record<string, unknown>;
 
@@ -49,6 +52,8 @@ interface Props {
 export function FileBrowser({ projectDir, projectId, active }: Props) {
   const { openFile } = useWindowsStore();
   const projects = useProjectsStore((s) => s.projects);
+  const viewerPrefs = useSettingsStore((s) => s.settings?.viewer_prefs);
+  const disabledViewerSet = useMemo(() => disabledViewers(viewerPrefs), [viewerPrefs]);
   const [relPath, setRelPath] = useState("");
   const [entries, setEntries] = useState<FileEntry[]>([]);
   const [selected, setSelected] = useState<Set<string>>(new Set());
@@ -165,14 +170,23 @@ export function FileBrowser({ projectDir, projectId, active }: Props) {
     load(next, { replace: true });
   }
 
-  function activate(entry: FileEntry) {
+  // Open on double-click. A folder navigates in; a file with a native in-app
+  // viewer opens in the project's focused subwindow, while a type with no native
+  // viewer — or a Shift+double-click — opens in the OS default app. The single
+  // open-a-file policy shared with the FileTree (see `openFileEntry`).
+  function activate(entry: FileEntry, ev?: React.MouseEvent) {
     if (entry.is_dir) {
       load(joinRel(relPath, entry.name));
-    } else {
-      openFile(entry.path, undefined, projectId, "middle_file_browser").catch((e) =>
-        setError(String(e)),
-      );
+      return;
     }
+    openFileEntry({
+      entry,
+      projectDir,
+      projectId,
+      origin: "middle_file_browser",
+      external: ev?.shiftKey ?? false,
+      disabled: disabledViewerSet,
+    });
   }
 
   function toggleSelected(entry: FileEntry, additive: boolean) {
@@ -314,8 +328,21 @@ export function FileBrowser({ projectDir, projectId, active }: Props) {
 
   const canMutate = selected.size > 0;
 
+  // Delete key removes the current selection — the keyboard twin of the Delete
+  // button / context-menu action. Ignored while a text field (path/search/rename
+  // prompt) has focus so it never eats a keystroke there.
+  function handleKeyDown(ev: React.KeyboardEvent) {
+    if (ev.key !== "Delete" || selected.size === 0) return;
+    const target = ev.target as HTMLElement | null;
+    if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable)) {
+      return;
+    }
+    ev.preventDefault();
+    void deleteSelected();
+  }
+
   return (
-    <section className={`file-browser ${active ? "active" : ""}`}>
+    <section className={`file-browser ${active ? "active" : ""}`} tabIndex={0} onKeyDown={handleKeyDown}>
       <div className="file-browser-toolbar">
         <button onClick={goBack} disabled={history.length === 0} title="Back">‹</button>
         <button onClick={goForward} disabled={future.length === 0} title="Forward">›</button>
@@ -382,7 +409,7 @@ export function FileBrowser({ projectDir, projectId, active }: Props) {
                   key={entry.path}
                   className={`file-browser-row${selected.has(entry.path) ? " selected" : ""}${isScaffold ? " scaffold" : ""}`}
                   onClick={(e) => toggleSelected(entry, e.ctrlKey || e.metaKey)}
-                  onDoubleClick={() => activate(entry)}
+                  onDoubleClick={(e) => activate(entry, e)}
                   onContextMenu={(e) => showEntryContextMenu(e, entry)}
                 >
                   <span><b>{entry.is_dir ? folderIcon() : fileIcon(entry.extension)}</b>{entry.name}</span>
@@ -399,7 +426,7 @@ export function FileBrowser({ projectDir, projectId, active }: Props) {
                   key={entry.path}
                   className={`file-browser-tile${selected.has(entry.path) ? " selected" : ""}${isScaffold ? " scaffold" : ""}`}
                   onClick={(e) => toggleSelected(entry, e.ctrlKey || e.metaKey)}
-                  onDoubleClick={() => activate(entry)}
+                  onDoubleClick={(e) => activate(entry, e)}
                   onContextMenu={(e) => showEntryContextMenu(e, entry)}
                 >
                   <span>{entry.is_dir ? folderIcon() : fileIcon(entry.extension)}</span>
diff --git a/src/components/files/FileTree.tsx b/src/components/files/FileTree.tsx
index 8e6ff28..a563f69 100644
--- a/src/components/files/FileTree.tsx
+++ b/src/components/files/FileTree.tsx
@@ -1,27 +1,46 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { Toggle } from "../common/Toggle";
 import { invoke } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
 import { startDrag } from "@crabnebula/tauri-plugin-drag";
-import { useWindowsStore } from "../../stores/windows";
 import { useTabsStore } from "../../stores/tabs";
 import { useDragStore, type EmbedCap, type FileDragItem } from "../../stores/drag";
 import { commitFileDrop, fileDropGoesToNewWindow } from "../tabs/commitFileDrop";
 import { startDetachedDropSession } from "../tabs/detachedDropTargets";
+import { FileDropContext } from "./fileDropContext";
+import { openFileEntry } from "./openFileEntry";
 import { closeTabsForDeletedPath, retargetTabsForRenamedPath } from "./fileTabSync";
-import { startCursorPoll, desktopCursor, type PhysPoint } from "../../lib/coords";
-import { bindDragRelease, dragPlatform } from "../../lib/dragPlatform";
+import {
+  startCursorPoll,
+  desktopCursor,
+  snapshotFrame,
+  physToClient,
+  type PhysPoint,
+  type WindowFrame,
+} from "../../lib/coords";
+import { bindDragRelease, dragPlatform, PLATFORM } from "../../lib/dragPlatform";
 import { useSettingsStore } from "../../stores/settings";
 import { useProjectsStore } from "../../stores/projects";
 import { useRemoteStatusStore } from "../../stores/remoteStatus";
-import { useSyncStore, type SyncFileMeta } from "../../stores/sync";
+import { useSyncStore, type SyncFileState } from "../../stores/sync";
 import { useActivityStore } from "../../stores/activity";
 import { useFileClipboardStore } from "../../stores/fileClipboard";
-import { type FileEntry, type InternalViewer, type SortKey, fileIcon, folderIcon, fmtSize, fmtModified, relFromAbs, visibleEntries, internalViewerFor, disabledViewers, fileEntriesEqual, stringMapsEqual, nextSelection, STANDARD_PROJECT_FILES } from "../../lib/viewers/fileUtils";
+import { type FileEntry, type InternalViewer, type SortKey, fileIcon, folderIcon, fmtSize, fmtModified, visibleEntries, internalViewerFor, disabledViewers, fileEntriesEqual, stringMapsEqual, nextSelection, STANDARD_PROJECT_FILES } from "../../lib/viewers/fileUtils";
 import { type TexCapability, type TexCompileResult, getTexCapability, lastLogLine } from "../../lib/viewers/tex";
-import { basename } from "../../lib/paths";
+import { basename, dirname, relativePathWithin, resolvePath } from "../../lib/paths";
+import { resolveLocalMirror, resolveProjectDirectory } from "../../types";
+import { isPythonPath, isPythonMainScript } from "../../lib/viewers/python";
+import { runPythonFile, runCwd, placeForFocused } from "../../lib/pythonRun";
+import {
+  shellRunnerFor,
+  shellScriptRunPlan,
+  type ScriptShell,
+} from "../../lib/shellScriptRun";
+import { readFileText } from "../embed/fileAccess";
 import { SetDefaultAppDialog } from "./SetDefaultAppDialog";
+import { normalizeScanPath } from "./ProjectFilesSettings";
+import { FileTreeSearch } from "./FileTreeSearch";
 import { useClampToViewport } from "../../hooks/useClampToViewport";
 
 // Persist whether the collapsed "gitignored" files section is expanded, so the
@@ -29,6 +48,12 @@ import { useClampToViewport } from "../../hooks/useClampToViewport";
 // time the panel reopens). Mirrors GitHistory's localStorage view pref.
 const GITIGNORED_EXPANDED_KEY = "eldrun.fileTree.gitignoredExpanded";
 
+// A stable empty-object fallback for the `python_run_args` selector below — a
+// fresh `{}` literal on every render would change the snapshot's reference
+// identity each time, which `useSyncExternalStore` (what the store hook is
+// built on) reads as "changed" and re-renders forever.
+const EMPTY_PY_ARGS: Record<string, string> = {};
+
 function sizeCategory(bytes: number): string {
   if (bytes < 10 * 1024) return "size-small";
   if (bytes < 500 * 1024) return "size-medium";
@@ -36,6 +61,12 @@ function sizeCategory(bytes: number): string {
   return "size-huge";
 }
 
+/** Hover title for a non-ignored size figure: the total + ignored split when
+ *  there's ignored content to split out, else the plain fallback wording. */
+function sizeTitle(shown: number, ignored: number, fallback: string): string {
+  return ignored > 0 ? `${fmtSize(shown + ignored)} total — ${fmtSize(ignored)} git-ignored` : fallback;
+}
+
 interface Props {
   projectDir: string;
   projectId: string | null;
@@ -46,13 +77,30 @@ interface Props {
   hiddenEndings?: string[];
   hiddenPaths?: string[];
   shownPaths?: string[];
+  /** Folders excluded from every recursive scan (`scan_excluded_paths` in
+   *  project.json). They still LIST — only their size walk is skipped — so the
+   *  exclusion stays visible and reversible on the row it applies to. */
+  scanExcluded?: string[];
+  /** When given, folder rows offer "Exclude from scans" / "Include in scans". */
+  onToggleScanExcluded?: (relPath: string, excluded: boolean) => void;
   initialRelPath?: string | null;
   onRelPathChange?: (relPath: string) => void;
+  /** When given, the context menu offers "Open in a new tab" — on a folder, and
+   *  on the background for the folder currently browsed. The host decides what
+   *  that tab is (a Files (Project) tab) and which scope it lands in; a tree with
+   *  no way to own a tab (a box root, a detached window) simply omits this. */
+  onOpenFolderTab?: (relPath: string) => void;
   /** SSH-sync Phase 1: which side of a remote project this tree shows. `"remote"`
    *  = the host source with the sync overlay + select-to-sync affordance; `"local"`
    *  = the local mirror (browsed/watched as a plain local tree). Absent = a normal
    *  local/remote project tree (no sync UI). */
   syncSource?: "remote" | "local";
+  /** For a remote project's LOCAL-mirror view: the project's remote state dir
+   *  (the one `list_dir` resolves to the host over SFTP — i.e. the pane's own
+   *  `projectDir`, the parent of `mirror/`). Lets the mirror tree cheaply readdir
+   *  the host for the browsed folder and flag which local-only child folders don't
+   *  exist on the remote yet. Absent for a local project / the remote-source view. */
+  remoteProbeDir?: string | null;
 }
 
 type GitStatusMap = Record<string, string>;
@@ -142,10 +190,6 @@ function warmDragIcon(): Promise<string> {
   return dragIconPromise;
 }
 
-function shellQuote(value: string): string {
-  return `'${value.replace(/'/g, `'\\''`)}'`;
-}
-
 // TEMPORARY (Windows drag QA — remove together with every dragDbg call): mirror
 // the drag/selection gesture lifecycle into crash.log via report_frontend_error
 // so a failing gesture can be read back without devtools open.
@@ -157,6 +201,25 @@ function dragDbg(message: string) {
   }
 }
 
+/** Turn a raw `list_dir` failure into a sentence a user can act on. The common
+ *  case, by far, is switching a remote project's file view to "Remote" while
+ *  sitting in a folder that only exists in the local mirror (never synced to the
+ *  host): the backend's SFTP `open_dir` fails deep in ssh2 with text like
+ *  "sftp open_dir failed: …", which means nothing to a user. Say what actually
+ *  happened and what to do about it instead. */
+function describeListError(e: unknown, remoteSource: boolean): string {
+  const raw = String(e);
+  if (remoteSource) {
+    // A missing/denied directory on the host. ssh2/libssh surface this as
+    // "no such file", "No such file", "failure", or a bare open_dir error.
+    if (/open_dir|read_dir|no such file|not found|failure|permission/i.test(raw)) {
+      return "This folder isn't on the remote host — it may be local-only (never synced). Switch to Local to view it.";
+    }
+    return "Couldn't list this folder on the remote host. Check the connection and try again.";
+  }
+  return "Couldn't open this folder.";
+}
+
 export function FileTree({
   projectDir,
   projectId,
@@ -165,21 +228,68 @@ export function FileTree({
   descending = false,
   hiddenEndings = [],
   hiddenPaths = [],
+  scanExcluded,
+  onToggleScanExcluded,
   shownPaths = [],
   initialRelPath = "",
   onRelPathChange,
+  onOpenFolderTab,
   syncSource,
+  remoteProbeDir,
 }: Props) {
+  // Non-null inside a detached popout: replaces the main window's CenterPanel
+  // drop authority (which this window can't reach) for a file dragged onto a
+  // pane. See fileDropContext.
+  const fileDrop = useContext(FileDropContext);
   const [rawEntries, setRawEntries] = useState<FileEntry[]>([]);
   // Recursive folder sizes (bytes), keyed by absolute folder path. Filled in
-  // lazily by a per-folder backend `dir_size` call so a big subtree never blocks
-  // the listing — the tree renders immediately and each folder's size appears
+  // lazily by a per-folder backend call so a big subtree never blocks the
+  // listing — the tree renders immediately and each folder's size appears
   // once it resolves. `requestedSizes` guards against re-dispatching the same
   // folder while it's in flight (or after it failed), so fs-watch churn doesn't
   // trigger a request storm; both reset in `load()` (navigation / refresh) so a
-  // re-listed folder recomputes.
+  // re-listed folder recomputes. Shared between the two size-fetch effects
+  // below (plain `dir_size` for the gitignored section, `dir_size_breakdown`
+  // for everything else) so the same folder is never fetched by both — besides
+  // being wasted work, two independent walks of the same folder can disagree
+  // if it's being actively written to, which would make the ignored split
+  // exceed the total from the other call.
   const [dirSizes, setDirSizes] = useState<Record<string, number>>({});
   const requestedSizes = useRef<Set<string>>(new Set());
+  // Which listing the in-flight size calls belong to. Bumped by `load()`, the
+  // only thing that invalidates the cache — so a result is stale ONLY if the
+  // folder was re-listed under it, never merely because the tree re-rendered.
+  // This is load-bearing: the effects below key on `sections`, whose identity
+  // changes on any re-render (`load()` itself sets rawEntries and THEN, a
+  // round-trip later, gitStatuses), and cancelling on that would drop every
+  // size call still in flight — permanently, since `requestedSizes` keeps it
+  // from being re-dispatched. Small folders resolved inside the gap and showed
+  // a size; a big one (the whole point of the feature) never did.
+  const sizeGeneration = useRef(0);
+  // Scan exclusions, normalised once per change into the one spelling the backend
+  // matches on. `scanExcludedList` is what the walk commands receive (it prunes
+  // excluded subtrees *nested inside* a folder being sized); `isScanExcluded`
+  // additionally stops us dispatching a walk for an excluded folder at all.
+  const scanExcludedList = useMemo(
+    () => (scanExcluded ?? []).map(normalizeScanPath).filter(Boolean),
+    [scanExcluded],
+  );
+  const scanExcludedSet = useMemo(() => new Set(scanExcludedList), [scanExcludedList]);
+  const isScanExcluded = useCallback(
+    (rel: string) => scanExcludedSet.has(normalizeScanPath(rel)),
+    [scanExcludedSet],
+  );
+  // The rel path of the most recent `load` call — lets the async remote-boundary
+  // probe bail if navigation has moved on since the listing it was probing failed.
+  const loadTargetRef = useRef<string>("");
+  // Bytes of a folder's recursive size that are git-ignored, for folders that
+  // are NOT themselves ignored (they sit in the regular/standard section) but
+  // contain ignored content — e.g. a source folder with a build output dir
+  // inside. Filled from the same `dir_size_breakdown` call that fills
+  // `dirSizes` for these folders (one walk, both numbers), so the split can
+  // never exceed the total it was measured against. A folder with no ignored
+  // content is simply absent from this map (nothing to annotate).
+  const [dirIgnoredBytes, setDirIgnoredBytes] = useState<Record<string, number>>({});
   // Which files can be embedded as a frameless in-tab app (Group K #40). Keyed
   // by extension (default-app resolution is per-mime/extension), so we only
   // query the backend once per distinct extension. Only embeddable files get the
@@ -202,6 +312,12 @@ export function FileTree({
   const anchorRef = useRef<string | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  // When a remote listing fails because the folder isn't on the host, this holds
+  // the crumb index (into the path segments) of the FIRST segment that doesn't
+  // exist on the host — everything from here on is local-only. null when the
+  // whole path exists (the normal case) or the source is local. The breadcrumb
+  // tints the on-host prefix and strikes through the local-only tail from it.
+  const [missingCrumbDepth, setMissingCrumbDepth] = useState<number | null>(null);
   const [gitStatuses, setGitStatuses] = useState<GitStatusMap>({});
   const [isDragOver, setIsDragOver] = useState(false);
   const [separateScaffold, setSeparateScaffold] = useState(true);
@@ -222,6 +338,26 @@ export function FileTree({
   // when Ctrl is pressed/released.
   const [ctrlHeld, setCtrlHeld] = useState(false);
   const [tooltip, setTooltip] = useState<{ rect: DOMRect; entry: FileEntry } | null>(null);
+  // In-tree search: while `search` is non-empty the tree body is replaced by a
+  // flat result list (FileTreeSearch). `searchMode` picks filename vs. content
+  // search; `searchCase` only applies to content search (name search is fuzzy).
+  // Both backends walk the canonical LOCAL path, so the search box is only shown
+  // for a non-remote-source tree (see `remoteListing` below).
+  // Right-click on the breadcrumb turns the path into an editable field (holding
+  // the current folder's absolute path) so a path can be typed/pasted to jump —
+  // and copies that absolute path to the clipboard. `null` = not editing.
+  const [pathEdit, setPathEdit] = useState<string | null>(null);
+  const pathEditRef = useRef<HTMLInputElement | null>(null);
+  const [search, setSearch] = useState("");
+  const [searchMode, setSearchMode] = useState<"name" | "content">("name");
+  const [searchCase, setSearchCase] = useState(false);
+  // Search scope: false (default) confines the search to the browsed folder
+  // (`relPath`); true searches from the project root. Only meaningful in a
+  // subfolder — at the root the two are identical.
+  const [searchRoot, setSearchRoot] = useState(false);
+  // A pending "reveal in tree" (jump-to-path) request from a search result: the
+  // parent folder to navigate to and the entry name to select once it lists.
+  const [pendingReveal, setPendingReveal] = useState<{ parent: string; name: string } | null>(null);
   // Drag-to-move: the rel path of the folder / breadcrumb under the cursor while
   // a file is being dragged (null = none). The ref carries the live value into
   // the drag's window-bound release handler (which captured an earlier closure);
@@ -231,6 +367,11 @@ export function FileTree({
   const [moveTargetRel, setMoveTargetRel] = useState<string | null>(null);
   const [contextMenu, setContextMenu] = useState<EntryContextMenu>(null);
   const contextMenuRef = useRef<HTMLDivElement | null>(null);
+  // The focusable tree root. File rows preventDefault on pointerdown to arm the
+  // drag, which suppresses the browser's default focus-the-ancestor — so we move
+  // focus here explicitly on selection, or the tree's key handlers (Enter/Delete/
+  // Escape) would only fire after a manual Tab-in (notably in the docked sidebar).
+  const treeRootRef = useRef<HTMLDivElement | null>(null);
   useClampToViewport(contextMenuRef, contextMenu, setContextMenu);
   const [deleteConfirm, setDeleteConfirm] = useState<DeleteConfirm>(null);
   const [autoConfirm, setAutoConfirm] = useState<AutoConfirm>(null);
@@ -242,18 +383,6 @@ export function FileTree({
   // first is shown in the conflict modal; resolving advances the queue.
   const [pushConflicts, setPushConflicts] = useState<string[]>([]);
   const [pushBusy, setPushBusy] = useState(false);
-  // SSH-sync: the amber "resolve" popup for a diverged file — its local+host
-  // metadata, the git diff when one is available (null until loaded, "" = none),
-  // and the take-local/take-remote busy flag.
-  const [syncResolve, setSyncResolve] = useState<{
-    entry: FileEntry;
-    rel: string;
-    meta: SyncFileMeta | null;
-    diff: string | null;
-    loading: boolean;
-    busy: boolean;
-    error: string | null;
-  } | null>(null);
   // Whether the system clipboard holds an image when the context menu opened
   // (probed async on right-click), gating the "Paste screenshot" option.
   const [clipboardImage, setClipboardImage] = useState(false);
@@ -267,12 +396,35 @@ export function FileTree({
   // currently compiling, for the inline build spinner.
   const [texCap, setTexCap] = useState<TexCapability | null>(null);
   const [compiling, setCompiling] = useState<Set<string>>(new Set());
-  const { openFile } = useWindowsStore();
-  const addTab = useTabsStore((s) => s.addTab);
+  // Per-file arguments for the ▶ Run button, remembered so a re-run reuses them.
+  // Set via the right-click popover (`argsPopover`, positioned at the cursor).
+  // Same shared, persisted map the open-editor's Run/Debug toolbar reads/writes
+  // (`FileViewerPane.tsx`'s `pyArgs`/`setPyArgs`) — keyed by absolute path in
+  // global settings, not local component state, so it survives this tree
+  // unmounting (right-panel hide/close) and an Eldrun restart.
+  const pyArgsByPath = useSettingsStore((s) => s.settings?.python_run_args ?? EMPTY_PY_ARGS);
+  const setPyArgs = useCallback((path: string, v: string) => {
+    void useSettingsStore.getState().setPythonRunArgs(path, v);
+  }, []);
+  const [argsPopover, setArgsPopover] = useState<{
+    entry: FileEntry;
+    x: number;
+    y: number;
+    draft: string;
+  } | null>(null);
+  const argsPopoverRef = useRef<HTMLDivElement | null>(null);
+  const argsInputRef = useRef<HTMLInputElement | null>(null);
+  useClampToViewport(argsPopoverRef, argsPopover, setArgsPopover);
+  useEffect(() => {
+    if (!argsPopover) return;
+    argsInputRef.current?.focus();
+    argsInputRef.current?.select();
+  }, [argsPopover?.entry.path]);
   const runInBackground = useSettingsStore((s) => s.settings?.run_scripts_in_background ?? true);
   const viewerPrefs = useSettingsStore((s) => s.settings?.viewer_prefs);
   const disabledViewerSet = useMemo(() => disabledViewers(viewerPrefs), [viewerPrefs]);
   const runningScripts = useActivityStore((s) => s.runningScripts);
+  const runningRunFiles = useActivityStore((s) => s.runningRunFiles);
   const runScript = useActivityStore((s) => s.runScript);
   // Mount-free remote (Phase 2): a remote project lists over SFTP and has no
   // local inotify watcher, so we skip the fs-watch wiring and offer a manual
@@ -280,6 +432,19 @@ export function FileTree({
   const isRemote = useProjectsStore(
     (s) => !!s.projects.find((p) => p.id === projectId)?.remote,
   );
+  // The local mirror root for a remote project, resolved the same way
+  // `ProjectFilesPane`/`ProjectFilesView` do (persisted override, else the default
+  // `<state_dir>/mirror`). Used to build the mirror-side absolute path the
+  // three-way merge viewer (`SyncMergeView`) opens a diverged file at — the ± diff
+  // button below routes through it. Null for a local (non-remote) project.
+  const project = useProjectsStore((s) => s.projects.find((p) => p.id === projectId));
+  const mirrorRoot = useMemo(() => {
+    if (!project?.remote) return null;
+    return (
+      resolveLocalMirror(project) ??
+      `${resolveProjectDirectory(project).replace(/[/\\]+$/, "")}/mirror`
+    );
+  }, [project]);
   // SSH-sync Phase 1: the local mirror source (`syncSource === "local"`) is a
   // plain LOCAL tree even though its project is remote — it lists/​watches the
   // local mirror dir and is never gated on the SSH pool. Only a remote-SOURCE
@@ -290,11 +455,36 @@ export function FileTree({
   // SSH-sync overlay state for the remote source: per-path green/amber/none + the
   // in-flight transfer progress. Only consulted in the remote-source view.
   const syncStatus = useSyncStore((s) => (projectId ? s.byProject[projectId] : undefined));
+  // Aggregated sync state for FOLDERS that have no manifest entry of their own.
+  // The manifest tracks files (a directory only gets an entry when it is
+  // explicitly folder-selected / folder-auto-synced); files pulled individually
+  // leave every ancestor folder absent, so a folder row's own-path lookup
+  // defaults to "none" and paints a red "push to host" button even when every
+  // file inside it is green/in-sync. This rolls each tracked file's state up onto
+  // all of its ancestor directories: `any` = the folder contains a tracked file,
+  // `allGreen` = they are all green. A folder with its own entry still uses that
+  // (handled at the lookup site); this only rescues the entry-less ones. Keyed by
+  // project-relative directory path.
+  const dirSyncAgg = useMemo(() => {
+    const agg: Record<string, { any: boolean; allGreen: boolean }> = {};
+    if (!syncStatus) return agg;
+    for (const [p, s] of Object.entries(syncStatus)) {
+      if (s.isDir) continue; // dir entries are authoritative on their own row
+      const parts = p.split("/");
+      for (let i = 1; i < parts.length; i++) {
+        const dir = parts.slice(0, i).join("/");
+        const cur = agg[dir] ?? { any: false, allGreen: true };
+        cur.any = true;
+        if (s.state !== "green") cur.allGreen = false;
+        agg[dir] = cur;
+      }
+    }
+    return agg;
+  }, [syncStatus]);
   const syncProgress = useSyncStore((s) => (projectId ? s.progressByProject[projectId] : undefined));
   const refreshSyncStatus = useSyncStore((s) => s.refreshStatus);
   const syncPull = useSyncStore((s) => s.pull);
   const syncPush = useSyncStore((s) => s.push);
-  const syncFileMeta = useSyncStore((s) => s.fileMeta);
   const syncMarkSelected = useSyncStore((s) => s.markSelected);
   const syncSetAuto = useSyncStore((s) => s.setAuto);
   const syncAutoPreview = useSyncStore((s) => s.autoPreview);
@@ -309,6 +499,15 @@ export function FileTree({
     projectId ? s.byProject[projectId]?.ssh : undefined,
   );
   const remoteBlocked = remoteListing && remoteSshState !== "connected";
+  // Local-mirror view of a remote project: the NAMES of the browsed folder's
+  // immediate children that exist on the host, from one SFTP readdir per
+  // navigation (only while the pool is live — a host readdir is a main-thread
+  // command that would freeze on a dead session, like every other remote call).
+  // A local child folder absent from this set is local-only — it has never
+  // reached the host — and the tree flags it so "Local" mode doesn't quietly
+  // imply the whole mirror is on the remote. `null` = unknown (not this view, or
+  // disconnected): flag nothing rather than guess.
+  const [hostChildNames, setHostChildNames] = useState<Set<string> | null>(null);
 
   // Dotfiles always render inline here — there's no separate "hidden" section;
   // any that are actually gitignored get pulled into the gitignored section
@@ -327,6 +526,39 @@ export function FileTree({
     [rawEntries, sortKey, descending, hiddenEndings, relPath, hiddenPaths, shownPaths],
   );
 
+  // Whether a visible Python file is a "main" script (has a module-level
+  // `if __name__ == "__main__":` guard) — the Run ▶ button only shows for
+  // those, not for every importable module. Resolved lazily per file since it
+  // needs the file's content, which the tree listing doesn't carry. Keyed by
+  // path + size + mtime so an on-disk edit (picked up by the fs watcher's
+  // `entries` change) gets rechecked instead of trusting a stale verdict.
+  const [pyMainByPath, setPyMainByPath] = useState<Record<string, boolean>>({});
+  const pyMainChecked = useRef<Set<string>>(new Set());
+  useEffect(() => {
+    // A remote-source listing's `readFileText` is an SFTP round trip — doing
+    // one per visible .py file just to place the Run button would visibly
+    // stall the tree. Remote falls back to the old any-.py-file behavior
+    // instead (see `canPyRun` below).
+    if (remoteListing) return;
+    const pending = entries.filter(
+      (e) => !e.is_dir && isPythonPath(e.path)
+        && !pyMainChecked.current.has(`${e.path}#${e.size}#${e.modified_secs ?? 0}`),
+    );
+    if (pending.length === 0) return;
+    pending.forEach((e) => pyMainChecked.current.add(`${e.path}#${e.size}#${e.modified_secs ?? 0}`));
+    let cancelled = false;
+    (async () => {
+      for (const e of pending) {
+        const text = await readFileText(e.path, projectId).catch(() => null);
+        if (cancelled) return;
+        setPyMainByPath((m) => ({ ...m, [e.path]: text != null && isPythonMainScript(text) }));
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [entries, remoteListing, projectId]);
+
   // The three on-screen sections in render order (regular, then the collapsible
   // scaffold + gitignored groups). Shared by the renderer and the selection
   // click handler so a shift-range spans exactly what the user sees. Mirrors the
@@ -417,40 +649,101 @@ export function FileTree({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [entries]);
 
-  // Lazily compute the recursive size of each visible folder. Fires one backend
-  // call per not-yet-requested folder (concurrently — they're independent) and
-  // fills `dirSizes` as each resolves. A failed call is left unresolved; the
-  // `requestedSizes` guard keeps it (and steady-state re-renders / fs-watch
-  // reloads) from re-dispatching.
+  // Lazily compute the recursive size of each visible gitignored-section
+  // folder. Fires one backend call per not-yet-requested folder (concurrently
+  // — they're independent) and fills `dirSizes` as each resolves. A failed
+  // call is left unresolved; the `requestedSizes` guard keeps it (and
+  // steady-state re-renders / fs-watch reloads) from re-dispatching. Plain
+  // `dir_size` is enough here — the whole folder is ignored by definition, so
+  // there's no split to compute, unlike the regular/standard effect below.
   useEffect(() => {
-    const pending = entries.filter((e) => e.is_dir && !requestedSizes.current.has(e.path));
+    const pending = sections.gitignored.filter(
+      (e) => e.is_dir && !requestedSizes.current.has(e.path) && !isScanExcluded(relForEntry(e)),
+    );
     if (pending.length === 0) return;
     pending.forEach((e) => requestedSizes.current.add(e.path));
-    let cancelled = false;
+    const gen = sizeGeneration.current;
     for (const e of pending) {
-      invoke<number>("dir_size", { projectDir, relPath: relForEntry(e) })
+      invoke<number>("dir_size", { projectDir, relPath: relForEntry(e), excluded: scanExcludedList })
         .then((bytes) => {
-          if (!cancelled) setDirSizes((m) => ({ ...m, [e.path]: bytes }));
+          if (sizeGeneration.current === gen) setDirSizes((m) => ({ ...m, [e.path]: bytes }));
         })
         .catch(() => {
           /* best-effort display aid — leave unresolved on failure */
         });
     }
-    return () => { cancelled = true; };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [entries]);
+  }, [sections.gitignored]);
+
+  // Lazily compute the recursive size of each visible regular/standard-section
+  // folder, split into ignored vs. non-ignored bytes in the SAME backend walk
+  // that produces the total — so a folder with e.g. a build output dir mixed
+  // in with source can show that split, and the ignored figure can never
+  // exceed the total it was measured against (two independent walks of the
+  // same folder can disagree if it's being actively written to, which is
+  // exactly the kind of folder — build/output dirs — this feature targets).
+  // Fills both `dirSizes` and `dirIgnoredBytes` from one response, sharing
+  // `requestedSizes` with the effect above so no folder is fetched twice.
+  useEffect(() => {
+    const candidates = [...sections.regular, ...sections.standard];
+    const pending = candidates.filter(
+      (e) => e.is_dir && !requestedSizes.current.has(e.path) && !isScanExcluded(relForEntry(e)),
+    );
+    if (pending.length === 0) return;
+    pending.forEach((e) => requestedSizes.current.add(e.path));
+    const gen = sizeGeneration.current;
+    for (const e of pending) {
+      invoke<{ total: number; ignored: number }>("dir_size_breakdown", {
+        projectDir,
+        relPath: relForEntry(e),
+        excluded: scanExcludedList,
+      })
+        .then(({ total, ignored }) => {
+          if (sizeGeneration.current !== gen) return;
+          setDirSizes((m) => ({ ...m, [e.path]: total }));
+          if (ignored > 0) setDirIgnoredBytes((m) => ({ ...m, [e.path]: ignored }));
+        })
+        .catch(() => {
+          // Fall back to the plain total rather than showing no size at all —
+          // `dir_size_breakdown` can fail for reasons `dir_size` wouldn't (a
+          // backend that hasn't picked up this new command yet, no `git` on
+          // PATH), and a folder's size is more important than its ignored split.
+          invoke<number>("dir_size", { projectDir, relPath: relForEntry(e), excluded: scanExcludedList })
+            .then((bytes) => {
+              if (sizeGeneration.current === gen) setDirSizes((m) => ({ ...m, [e.path]: bytes }));
+            })
+            .catch(() => {
+              /* best-effort display aid — leave unresolved on failure */
+            });
+        });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sections.regular, sections.standard]);
 
   // Total bytes contained in each section, kept separate rather than merged
   // into one figure — the point of splitting scaffold/gitignored out visually
   // is that their weight (e.g. a huge gitignored build dir) shouldn't hide
   // inside the "real" content total. Sums whatever `dirSizes`/`e.size` already
   // know; unresolved subfolder sizes count as 0 until their `dir_size` call
-  // lands, same best-effort as the per-row display above.
+  // lands, same best-effort as the per-row display above. `regular`/`standard`
+  // are non-ignored-only (mirroring the per-row headline number), with the
+  // ignored portion pulled out separately so callers can put it on hover —
+  // `gitignored` needs no such split, it's ignored content in its entirety.
   const groupSizes = useMemo(() => {
     const total = (list: FileEntry[]) =>
       list.reduce((sum, e) => sum + (e.is_dir ? (dirSizes[e.path] ?? 0) : e.size), 0);
-    return { regular: total(sections.regular), standard: total(sections.standard), gitignored: total(sections.gitignored) };
-  }, [sections, dirSizes]);
+    const ignored = (list: FileEntry[]) =>
+      list.reduce((sum, e) => sum + (e.is_dir ? (dirIgnoredBytes[e.path] ?? 0) : 0), 0);
+    const regularIgnored = ignored(sections.regular);
+    const standardIgnored = ignored(sections.standard);
+    return {
+      regular: total(sections.regular) - regularIgnored,
+      regularIgnored,
+      standard: total(sections.standard) - standardIgnored,
+      standardIgnored,
+      gitignored: total(sections.gitignored),
+    };
+  }, [sections, dirSizes, dirIgnoredBytes]);
 
   const isEmbeddable = (e: FileEntry): boolean =>
     !e.is_dir && embedByExt[e.extension ?? ""] === true;
@@ -478,8 +771,9 @@ export function FileTree({
   // in native-drag mode.
   useEffect(() => {
     // Warm the native drag-out preview icon so its path is ready (sync-readable)
-    // by the time the user starts a Ctrl-drag.
-    void warmDragIcon();
+    // by the time the user starts a Ctrl-drag. Only the plugin path (Win/mac)
+    // needs it — the Linux `start_file_drag` embeds the icon backend-side.
+    if (PLATFORM !== "linux") void warmDragIcon();
     let lastCtrl = false; // TEMPORARY drag QA: log transitions only, not every repeat
     const sync = (e: KeyboardEvent) => {
       if (e.ctrlKey !== lastCtrl) {
@@ -547,6 +841,31 @@ export function FileTree({
     };
   }, [isRemote, projectId, remoteSshState, refreshSyncStatus]);
 
+  // Local-mirror view: readdir the HOST for the browsed folder so folders that
+  // live only in the local mirror can be flagged (see `hostChildNames`). One
+  // cheap SFTP readdir per navigation, gated on a live pool. If the folder ITSELF
+  // isn't on the host (readdir fails), every local child here is off-host too, so
+  // an empty set is the right answer — it flags them all.
+  useEffect(() => {
+    if (!treatLocal || !isRemote || !remoteProbeDir || remoteSshState !== "connected") {
+      setHostChildNames(null);
+      return;
+    }
+    let cancelled = false;
+    const target = relPath;
+    invoke<FileEntry[]>("list_dir", { projectDir: remoteProbeDir, relPath: target })
+      .then((entries) => {
+        if (!cancelled) setHostChildNames(new Set(entries.map((x) => x.name)));
+      })
+      .catch(() => {
+        if (!cancelled) setHostChildNames(new Set());
+      });
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [treatLocal, isRemote, remoteProbeDir, remoteSshState, relPath]);
+
   // Live updates: watch the currently-displayed directory on the backend and
   // re-fetch when it changes, so files created/removed by terminals, agents, or
   // other processes appear without manual navigation. Re-points to the new
@@ -584,18 +903,23 @@ export function FileTree({
     // Never issue the (synchronous, main-thread) remote listing commands while the
     // pool is down — they would freeze the window. See `remoteBlocked`.
     if (remoteBlocked) return;
+    loadTargetRef.current = rel;
     setLoading(true);
     setError(null);
+    setMissingCrumbDepth(null);
     // Navigating into a different folder abandons the current selection (its
     // paths aren't on screen anymore). The quiet fs-watch `refresh()` deliberately
     // does NOT clear — a background re-list must not wipe an in-progress selection.
     clearSelection();
     // Re-listing (navigation or an explicit refresh) recomputes folder sizes:
-    // drop the cache + in-flight guard so the effect re-requests them fresh. The
-    // quiet fs-watch `refresh()` deliberately does NOT do this — folder sizes
-    // stay put through watch churn.
+    // drop the cache + in-flight guard so the effect re-requests them fresh, and
+    // bump the generation so a call still walking the OLD folder can't land its
+    // bytes on the new listing. The quiet fs-watch `refresh()` deliberately does
+    // NOT do this — folder sizes stay put through watch churn.
+    sizeGeneration.current += 1;
     requestedSizes.current.clear();
     setDirSizes({});
+    setDirIgnoredBytes({});
     try {
       const result = await invoke<FileEntry[]>("list_dir", {
         projectDir,
@@ -610,12 +934,76 @@ export function FileTree({
       }).catch(() => ({}));
       setGitStatuses(statuses);
     } catch (e) {
-      setError(String(e));
+      // The listing failed — most often because "Remote" was selected in a
+      // folder that only exists in the local mirror. Drop the previous listing
+      // (which would otherwise leave the LOCAL files on screen under a Remote
+      // header, falsely implying they're on the host) and show a readable
+      // reason. Keep `relPath` so the breadcrumb / Local switch still work.
+      setRawEntries([]);
+      setGitStatuses({});
+      setRelPath(rel);
+      onRelPathChange?.(rel);
+      setError(describeListError(e, remoteListing));
+      // Remote source: find where the path stops existing on the host so the
+      // breadcrumb can show the boundary (on-host prefix vs local-only tail).
+      // Only on a remote failure, walking up from the deepest ancestor — a
+      // handful of cheap SFTP stats over the already-live pool.
+      if (remoteListing) void probeRemoteBoundary(rel);
     } finally {
       setLoading(false);
     }
   }
 
+  // Walk up the failed path to the deepest ancestor that DOES list on the host,
+  // and mark the first segment past it as the start of the local-only tail. Root
+  // ("") is assumed present, so a path whose very first segment is absent marks
+  // depth 0. Best-effort and self-cancelling: a newer `load` clears the state.
+  async function probeRemoteBoundary(rel: string) {
+    const parts = rel.split("/").filter(Boolean);
+    if (parts.length === 0) return;
+    let depth = 0; // default: first segment already missing
+    for (let k = parts.length - 1; k >= 1; k--) {
+      const prefix = parts.slice(0, k).join("/");
+      try {
+        await invoke<FileEntry[]>("list_dir", { projectDir, relPath: prefix });
+        depth = k;
+        break;
+      } catch {
+        // keep walking up
+      }
+    }
+    // Guard against a race: only apply if we're still on the same failed path.
+    if (loadTargetRef.current === rel) setMissingCrumbDepth(depth);
+  }
+
+  // Right-click the breadcrumb: copy the current folder's absolute path to the
+  // clipboard and open the inline path editor pre-filled with it.
+  function startPathEdit() {
+    const abs = resolvePath(projectDir, relPath);
+    navigator.clipboard?.writeText(abs).catch(() => {});
+    setPathEdit(abs);
+  }
+
+  // Commit the edited path: accept either an absolute path or a project-relative
+  // one, resolve it against the project root, and navigate there when it stays
+  // inside the project. A path outside the project is rejected (the tree is
+  // project-scoped) — the field just closes without navigating.
+  function commitPathEdit() {
+    const raw = pathEdit?.trim() ?? "";
+    setPathEdit(null);
+    if (!raw) return;
+    const abs = resolvePath(projectDir, raw);
+    const rel = relativePathWithin(projectDir, abs);
+    if (rel === null) return;
+    if (rel !== relPath) void load(rel);
+  }
+
+  // Focus + select the path field when it opens so the copied path can be
+  // replaced or edited immediately.
+  useEffect(() => {
+    if (pathEdit !== null) pathEditRef.current?.select();
+  }, [pathEdit !== null]); // eslint-disable-line react-hooks/exhaustive-deps
+
   // Quiet reload for the fs watcher: re-fetch the current directory without the
   // loading flash, and only swap state in when the result actually changed.
   // Replacing rawEntries/gitStatuses on every event (a single write emits a
@@ -636,6 +1024,55 @@ export function FileTree({
     setGitStatuses((prev) => (stringMapsEqual(prev, statuses) ? prev : statuses));
   }
 
+  // Jump-to-path: reveal a project-relative path in the tree. A folder navigates
+  // into it; a file navigates to its parent folder and selects+scrolls it. Leaves
+  // search mode so the tree (with the target selected) is what's shown. Used by
+  // every search result (both name and content hits).
+  function revealPath(rel: string, isDir: boolean) {
+    setSearch("");
+    if (isDir) {
+      load(rel);
+      return;
+    }
+    const parts = rel.split("/").filter(Boolean);
+    const name = parts[parts.length - 1] ?? "";
+    const parent = parts.slice(0, -1).join("/");
+    // Expand the collapsible sections so the row is rendered wherever it lives
+    // (a scaffold or gitignored file would otherwise be hidden). The subsequent
+    // effect selects and scrolls once the folder has listed.
+    setScaffoldExpanded(true);
+    setGitignoredExpanded(true);
+    setPendingReveal({ parent, name });
+    if (parent !== relPath) load(parent);
+  }
+
+  // Resolve a pending reveal once the target folder is listed: select the entry
+  // and scroll its row into view, then clear the request. Gives up (clears) if
+  // the entry isn't in the listing — e.g. hidden by a filter.
+  useEffect(() => {
+    if (!pendingReveal) return;
+    if (pendingReveal.parent !== relPath) return; // still navigating
+    const entry = entries.find((e) => e.name === pendingReveal.name);
+    if (!entry) {
+      setPendingReveal(null);
+      return;
+    }
+    anchorRef.current = entry.path;
+    setSelected(new Set([entry.path]));
+    const path = entry.path;
+    requestAnimationFrame(() => {
+      try {
+        document
+          .querySelector(`[data-entry-path="${CSS.escape(path)}"]`)
+          ?.scrollIntoView({ block: "center" });
+      } catch {
+        /* best-effort scroll */
+      }
+    });
+    setPendingReveal(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [entries, pendingReveal, relPath]);
+
   function handleClick(entry: FileEntry) {
     if (entry.is_dir) {
       const rel = relPath ? `${relPath}/${entry.name}` : entry.name;
@@ -645,10 +1082,28 @@ export function FileTree({
       // navigating into it — rather than handing the archive to an external app.
       void extractArchive(entry);
     } else {
-      openFile(entry.path, undefined, projectId, "right_file_tree").catch(console.error);
+      openEntry(entry, false);
     }
   }
 
+  // Open one file entry: a native-viewer type lands as an embed tab in the
+  // project's focused subwindow (or streams into a popout via `fileDrop`); a
+  // type with no native viewer, or an explicit external open (Shift), opens in
+  // the OS default app. The single open-a-file policy — see `openFileEntry`.
+  function openEntry(entry: FileEntry, external: boolean) {
+    openFileEntry({
+      entry,
+      projectDir,
+      projectId,
+      origin: "right_file_tree",
+      external,
+      disabled: disabledViewerSet,
+      // In a detached popout, stream the viewer tab into that window rather than
+      // writing the popout's non-authoritative local tab store.
+      placeTab: fileDrop ? fileDrop.openTab : undefined,
+    });
+  }
+
   // Single-click routing. A plain click on a folder navigates into it (and
   // drops any selection); every other click — a file, or a modifier-click on a
   // folder — drives the multi-selection instead (shift = range, ctrl/cmd =
@@ -662,40 +1117,57 @@ export function FileTree({
       return;
     }
     selectFromClick(entry, ev);
+    // Take keyboard focus so Delete/Enter/Escape act on this selection without a
+    // manual Tab-in (the row's pointerdown preventDefault suppresses auto-focus).
+    treeRootRef.current?.focus({ preventScroll: true });
   }
 
-  // Open a file on double-click. If it belongs to a multi-selection, open EVERY
-  // selected file (each in its own tab); otherwise just this one. Folders keep
-  // navigating via handleClick.
-  function handleOpen(entry: FileEntry) {
+  // Open a file on double-click. A native-viewer type opens in the focused
+  // subwindow; a type with no native viewer — or a Shift+double-click — opens in
+  // the OS default app (see `openEntry`). If the entry belongs to a
+  // multi-selection, open EVERY selected file this way; otherwise just this one.
+  // Folders keep navigating via handleClick.
+  function handleOpen(entry: FileEntry, ev?: React.MouseEvent) {
     if (entry.is_dir) {
       handleClick(entry);
       return;
     }
+    const external = ev?.shiftKey ?? false;
     const targets =
       selected.has(entry.path) && selected.size > 1
         ? entries.filter((e) => !e.is_dir && selected.has(e.path))
         : [entry];
     for (const t of targets) {
       if (t.extension === ".zip") void extractArchive(t);
-      else openFile(t.path, undefined, projectId, "right_file_tree").catch(console.error);
+      else openEntry(t, external);
     }
   }
 
   // Keyboard on the focused tree: Enter opens every selected file, Escape drops
-  // the selection. Only acts while something is selected so it never steals keys
-  // from the rest of the panel.
+  // the selection, Delete removes it (the right-click Delete's keyboard twin).
+  // Only acts while something is selected so it never steals keys from the rest
+  // of the panel.
   function handleTreeKeyDown(ev: React.KeyboardEvent) {
     if (selected.size === 0) return;
+    // Never hijack Delete/Enter from the in-tree search box or a rename field.
+    const target = ev.target as HTMLElement | null;
+    if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable)) {
+      return;
+    }
     if (ev.key === "Escape") {
       ev.stopPropagation();
       clearSelection();
     } else if (ev.key === "Enter") {
       ev.preventDefault();
+      // Enter mirrors a double-click; Shift+Enter forces the external app.
       for (const t of entries.filter((e) => !e.is_dir && selected.has(e.path))) {
         if (t.extension === ".zip") void extractArchive(t);
-        else openFile(t.path, undefined, projectId, "right_file_tree").catch(console.error);
+        else openEntry(t, ev.shiftKey);
       }
+    } else if (ev.key === "Delete") {
+      ev.preventDefault();
+      // Mirror the context menu's bulk target set (files and folders alike).
+      promptDelete(entries.filter((e) => selected.has(e.path)));
     }
   }
 
@@ -723,39 +1195,37 @@ export function FileTree({
   }
 
   function handleEntryMouseEnter(e: React.MouseEvent<HTMLDivElement>, entry: FileEntry) {
-    if (entry.modified_secs || entry.created_secs) {
-      setTooltip({ rect: e.currentTarget.getBoundingClientRect(), entry });
-    }
+    // Always shows the name (the row can truncate it); Created/Modified/Ignored
+    // lines below are conditional on the entry actually having that data.
+    setTooltip({ rect: e.currentTarget.getBoundingClientRect(), entry });
   }
 
-  function handleEntryDragStart(e: React.DragEvent<HTMLDivElement>, entry: FileEntry) {
-    // WebKitGTK's HTML5 drag-out renders no drag image outside the window and
-    // doesn't reliably export the file to other apps, so suppress it and hand
-    // off to the native OS drag (tauri-plugin-drag): real OLE/NSDragging/GTK
-    // drag, with an OS-rendered icon that crosses into Signal / a browser / a
-    // file manager / the desktop. `mode: "copy"` so the file is never MOVED out
-    // of the project. The preview icon path was warmed at mount (warmDragIcon).
-    // Reaching this handler at all depends on the `.file-entry.file
-    // [draggable="true"]` re-arm rule in themes.css: Chromium (WebView2)
-    // resolves drag sources from computed -webkit-user-drag alone, so the
-    // blanket `none` on file rows would otherwise swallow dragstart entirely.
-    e.preventDefault();
-    dragDbg(`dragstart fired ${entry.name} iconWarm=${!!dragIconDataUrl}`); // TEMPORARY drag QA
-    // A drag on a row that belongs to a >1 multi-selection exports the WHOLE
-    // selection (files and folders alike — the OS payload is just paths),
-    // mirroring the pointer drag's multi-drag rule in onEntryPointerDown.
-    const paths =
-      selected.has(entry.path) && selected.size > 1
-        ? entries.filter((en) => selected.has(en.path)).map((en) => en.path)
-        : [entry.path];
+  // Start the native OS drag-out (EXPORT/COPY to another app: a browser, Signal,
+  // a file manager, the desktop). Real OLE/NSDragging/GTK drag with an
+  // OS-rendered icon; copy semantics, so files are never MOVED out of the
+  // project. Reached two ways: a dir's HTML5 dragstart (handleEntryDragStart),
+  // and the mid-drag Ctrl handoff inside onEntryPointerDown.
+  function beginNativeFileDrag(paths: string[]) {
+    // Linux uses our own GTK drag (`start_file_drag`): tauri-plugin-drag's GTK
+    // backend hands external targets an EMPTY payload — it tears down its
+    // drag-data-get handler at drop-performed, before the target requests the
+    // text/uri-list data — so a drop into a browser silently did nothing (it
+    // also ships unencoded file:// URIs, which strict consumers discard).
+    if (PLATFORM === "linux") {
+      void invoke("start_file_drag", { paths }).catch((err) =>
+        // Surfaces the most common failure: the backend wasn't rebuilt, so the
+        // command doesn't exist yet — the drag silently no-ops otherwise.
+        console.error("[eldrun] native file drag-out failed:", err),
+      );
+      return;
+    }
     const begin = (icon: string) =>
       startDrag({ item: paths, icon, mode: "copy" })
         .then(() => dragDbg("startDrag resolved")) // TEMPORARY drag QA
         .catch((err) => {
           dragDbg(`startDrag FAILED: ${String(err)}`); // TEMPORARY drag QA
-          // Surfaces the most common failure: the backend wasn't rebuilt, so the
-          // `plugin:drag|start_drag` command (and `drag_preview_icon`) don't exist
-          // yet — the drag silently no-ops. Log it so the cause is visible.
+          // Same visibility for the plugin path (`plugin:drag|start_drag` and
+          // `drag_preview_icon` only exist after a backend rebuild).
           console.error("[eldrun] native file drag-out failed:", err);
         });
     // The icon data URL is normally warm by drag time; if not, resolve first.
@@ -763,6 +1233,21 @@ export function FileTree({
     else void warmDragIcon().then(begin);
   }
 
+  function handleEntryDragStart(e: React.DragEvent<HTMLDivElement>, entry: FileEntry) {
+    // WebKitGTK's HTML5 drag-out renders no drag image outside the window and
+    // doesn't reliably export the file to other apps, so suppress it and hand
+    // off to the native OS drag.
+    e.preventDefault();
+    dragDbg(`dragstart fired ${entry.name} iconWarm=${!!dragIconDataUrl}`); // TEMPORARY drag QA
+    // Dragging a row that belongs to a >1 selection exports the whole
+    // selection, mirroring the pointer drag-to-tab's multi-drag.
+    const paths =
+      selected.has(entry.path) && selected.size > 1
+        ? entries.filter((en) => selected.has(en.path)).map((en) => en.path)
+        : [entry.path];
+    beginNativeFileDrag(paths);
+  }
+
   // Start a pointer-based drag from a file row, mirroring TabBar.onTabPointerDown.
   // HTML5 native DnD is unreliable on WebKitGTK (it hijacks the pointer stream
   // and fires pointercancel), so once the pointer crosses a 5px threshold we
@@ -836,6 +1321,67 @@ export function FileTree({
     let lastPhys: PhysPoint | null = null;
     let stopPoll: (() => void) | null = null;
 
+    // Mid-drag Ctrl → arms the native OS EXPORT drag (copy the file(s) out to
+    // whatever app the cursor ends up over). Ctrl *before* the press is the
+    // multi-select toggle, so export is armed by pressing Ctrl AFTER the drag
+    // is underway — symmetric with Shift, which modifies the drop while
+    // already dragging (see DragGhost's modifier highlight). Mirrors that:
+    // holding Ctrl only MARKS the ghost's "copy out" option; the in-app hover
+    // (ghost, folder highlight, popout hover) keeps running unchanged.
+    //
+    // The gesture then switches between two modes at the WINDOW BOUNDARY, and
+    // can switch back and forth as often as the user likes:
+    //  - leaving the window with Ctrl held → the OS drag takes over the still-
+    //    held button (GTK can only BEGIN a drag while the button is physically
+    //    down, so the crossing is the last moment this is possible), and a
+    //    release out there drops into the external app.
+    //  - coming back INTO the window → the OS drag is cancelled and the in-app
+    //    ghost/hover resumes, so re-entering never leaves the user staring at
+    //    an OS drag icon over Eldrun's own window.
+    // While the OS owns the drag the webview sees no pointer events at all, so
+    // the boundary test runs off the OS-cursor poll (physical px → this
+    // window's client px via the frame snapshot), which keeps ticking
+    // regardless of who holds the pointer grab.
+    let nativeActive = false;
+    let frame: WindowFrame | null = null;
+    // The `eldrun:file-drag-ended` subscription (registered below, once the
+    // gesture is real) and whether the gesture has already ended — `listen` is
+    // async, so it can resolve after cleanup and must then unsubscribe at once.
+    let unlistenEnded: (() => void) | null = null;
+    let gestureOver = false;
+    const inWindow = (c: { x: number; y: number }) =>
+      c.x >= 0 && c.y >= 0 && c.x < window.innerWidth && c.y < window.innerHeight;
+    const toNativeDrag = () => {
+      if (!dragging || nativeActive) return;
+      nativeActive = true;
+      // The in-app drop targets are meaningless while the OS owns the drag.
+      setMoveTarget(null);
+      detached.hover(null, { x: 0, y: 0 }, entry.name);
+      beginNativeFileDrag(dragEntries.map((en) => en.path));
+    };
+    const backToInAppDrag = () => {
+      if (!nativeActive) return;
+      nativeActive = false;
+      void invoke("cancel_file_drag").catch(() => {});
+    };
+    // Ctrl, tracked as gesture state rather than read off each pointer event.
+    // Cancelling the GTK drag hands the pointer back, but NOT the implicit grab
+    // the original pointerdown had: the webview then sees plain mousemove while
+    // the cursor is over the window and NOTHING once it leaves. So after one
+    // handoff, `PointerEvent.ctrlKey` stops arriving exactly where the next
+    // handoff would need it — hence a flag the key events maintain, plus the
+    // cursor poll below as the position source. (The keydown arm also covers
+    // Ctrl pressed while the cursor already sits outside the window.)
+    let ctrlDown = false;
+    const onKeyDown = (ev: KeyboardEvent) => {
+      if (ev.key !== "Control") return;
+      ctrlDown = true;
+      if (dragging && !inWindow(lastClient)) toNativeDrag();
+    };
+    const onKeyUp = (ev: KeyboardEvent) => {
+      if (ev.key === "Control") ctrlDown = false;
+    };
+
     const onMove = (ev: PointerEvent) => {
       if (!dragging) {
         if (Math.hypot(ev.clientX - startX, ev.clientY - startY) < 5) return;
@@ -872,13 +1418,44 @@ export function FileTree({
             /* capture is best-effort; the OS-cursor poll does not depend on it */
           }
         }
+        // This window's geometry, for mapping the polled OS cursor back into
+        // client px while the OS drag owns the pointer (see `nativeActive`).
+        void snapshotFrame()
+          .then((f) => {
+            frame = f;
+          })
+          .catch(() => {});
         // Poll the OS cursor (physical desktop px) to drive the popout hover past
         // the main viewport — DOM pointermove may not cross the OS window boundary.
         stopPoll = startCursorPoll((p) => {
           lastPhys = p;
+          // The poll is the SOLE arbiter of the window boundary, in BOTH
+          // directions. DOM pointer events can't be: once the OS drag has run
+          // even once, the implicit grab is gone, so they stop at the window
+          // edge — exactly where the crossing has to be detected.
+          const c = frame ? physToClient(frame, p) : null;
+          if (nativeActive) {
+            if (!c) return;
+            // The OS owns the pointer: this poll is also the only position
+            // source, so keep the ghost tracking the cursor for the moment it
+            // comes back in — whereupon the OS drag is cancelled and the
+            // in-app hover takes over again.
+            lastClient = c;
+            useDragStore.getState().move(c.x, c.y);
+            if (inWindow(c)) backToInAppDrag();
+            return;
+          }
+          if (c && ctrlDown && !inWindow(c)) {
+            toNativeDrag();
+            return;
+          }
           detached.hover(detached.at(p), p, entry.name);
         });
       }
+      // While the OS drag owns the pointer, a stray DOM move must not fight the
+      // poll for the ghost position or revive the in-app drop targets.
+      if (nativeActive) return;
+      ctrlDown = ev.ctrlKey;
       lastClient = { x: ev.clientX, y: ev.clientY };
       useDragStore.getState().move(ev.clientX, ev.clientY);
       // Drag-to-move: highlight the folder row / breadcrumb / up button under the
@@ -889,14 +1466,24 @@ export function FileTree({
       const moveEl = overEl?.closest<HTMLElement>("[data-move-rel]") ?? null;
       const moveRel = moveEl?.getAttribute("data-move-rel") ?? null;
       setMoveTarget(moveRel != null && moveRel !== relPath ? moveRel : null);
+      // Inside a detached popout, CenterPanel's window-wide drop authority isn't
+      // there to resolve the pane under the cursor — do it here so the popout's
+      // split/merge preview lights up and the release has a target to commit to.
+      // (In the main window CenterPanel owns this; `fileDrop` is null there.)
+      if (fileDrop) fileDrop.resolveTarget(ev.clientX, ev.clientY);
     };
 
     // Tear down the move listener, poll, popout highlight, and pointer capture —
     // however the gesture resolves.
     const cleanup = () => {
+      gestureOver = true;
       window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("keyup", onKeyUp);
       setMoveTarget(null);
       stopPoll?.();
+      unlistenEnded?.();
+      unlistenEnded = null;
       // Clear the popout highlight + tear down the panes listener. `targetAt`
       // still hit-tests the cached pane geometry for the commit below.
       detached.dispose();
@@ -910,6 +1497,11 @@ export function FileTree({
     };
 
     const commitRelease = async (shiftKey: boolean) => {
+      // The OS owns the drag: it is dropping into an external app, and the
+      // in-app drop targets don't apply. `eldrun:file-drag-ended` ends the
+      // gesture instead (a stray pointerup here must not ALSO spawn a tab or a
+      // window on top of the export).
+      if (nativeActive) return;
       // Read the drop-target folder BEFORE cleanup() runs — cleanup calls
       // setMoveTarget(null), which nulls moveTargetRef.current, so reading it
       // afterwards always saw null and silently dropped every drag-to-move (the
@@ -946,6 +1538,16 @@ export function FileTree({
         useDragStore.getState().end();
         return;
       }
+      // Inside a detached popout: commit against the pane resolved above by the
+      // injected controller (a new embed tab into that pane, streamed to the main
+      // window as an `add` edit). The main window's cross-window branches below —
+      // dock into ANOTHER popout, spawn a new standalone window — don't apply
+      // here (a popout can't own the main tab store), so this is the whole commit.
+      if (fileDrop) {
+        fileDrop.commit(d, projectDir);
+        useDragStore.getState().end();
+        return;
+      }
       // Final physical cursor at release (a fresh read; falls back to the last
       // poll reading if the IPC fails). This is the canonical cross-window space.
       const phys = (await desktopCursor().catch(() => null)) ?? lastPhys;
@@ -1021,7 +1623,24 @@ export function FileTree({
     };
 
     window.addEventListener("pointermove", onMove);
-    bindDragRelease({ onCommit: (shiftKey) => void commitRelease(shiftKey), onAbort });
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener("keyup", onKeyUp);
+    const unbindRelease = bindDragRelease({
+      onCommit: (shiftKey) => void commitRelease(shiftKey),
+      onAbort,
+    });
+    // Once the OS drag owns the pointer, the webview never sees the release, so
+    // the backend reports the drop (or the user's abort) that ends the whole
+    // gesture. NOT fired by the cancel we ourselves issue on re-entry — that
+    // hands control back to the in-app drag, which is still very much alive.
+    void listen("eldrun:file-drag-ended", () => {
+      unbindRelease();
+      onAbort();
+    }).then((un) => {
+      // `listen` is async: the gesture can already be over when it resolves.
+      if (gestureOver) un();
+      else unlistenEnded = un;
+    });
   }
 
   function relForEntry(entry: FileEntry): string {
@@ -1128,53 +1747,41 @@ export function FileTree({
     });
   }
 
-  /** SSH-sync: open the amber "resolve" popup for a diverged file. Shows the
-   *  local vs host metadata (size/mtime) and, when the host copy yields a text
-   *  diff, the git diff itself; otherwise (binary / one side missing / no diff)
-   *  it just offers take-local / take-remote. Uses `relForEntry` for the correct
-   *  project-relative key — the old diff *tab* recomputed the rel from an
-   *  absolute path via the DiffView, which came out empty on the remote view
-   *  (the host path isn't under the local project dir) and made `sync_diff`
-   *  point at the mirror ROOT ("git could not access …/.tmpXXX"). */
-  function openSyncResolve(entry: FileEntry) {
+  /** SSH-sync: open a diverged (amber) file in the three-way merge viewer — the
+   *  same PyCharm-style resolve view the orange list opens (local mirror ⇄ merged
+   *  ⇄ remote host, per-block take-left/right) — instead of the old
+   *  take-local/take-host popup. On open the viewer runs a byte-for-byte test and
+   *  self-resolves a metadata-only divergence (identical bytes).
+   *
+   *  `SyncMergeView` keys off the mirror-side absolute path (`mirrorRoot/rel`), so
+   *  build that here from `relForEntry` regardless of which side the tree is
+   *  currently listing (the host path is not under the mirror). */
+  function openSyncMerge(entry: FileEntry) {
     setContextMenu(null);
-    if (!projectId) return;
+    if (!projectId || !mirrorRoot) return;
     const rel = relForEntry(entry);
-    setSyncResolve({ entry, rel, meta: null, diff: null, loading: true, busy: false, error: null });
-    // Fetch metadata and the git diff together; either may fail independently
-    // (a cold pool fails both; a binary/identical file just yields no diff).
-    void Promise.allSettled([
-      syncFileMeta(projectId, rel),
-      invoke<string>("sync_diff", { projectId, relPath: rel }),
-    ]).then(([metaR, diffR]) => {
-      setSyncResolve((s) => {
-        if (!s || s.rel !== rel) return s; // superseded by another open
-        return {
-          ...s,
-          loading: false,
-          meta: metaR.status === "fulfilled" ? metaR.value : null,
-          diff: diffR.status === "fulfilled" ? diffR.value : "",
-          error: metaR.status === "rejected" ? String(metaR.reason) : null,
-        };
-      });
-    });
-  }
-
-  /** Resolve the amber divergence: "remote" pulls the host copy over the mirror,
-   *  "local" force-pushes the mirror over the host. Both clear amber → green. */
-  async function resolveSyncDivergence(action: "local" | "remote") {
-    if (!syncResolve || !projectId) return;
-    const rel = syncResolve.rel;
-    setSyncResolve((s) => (s ? { ...s, busy: true, error: null } : s));
-    try {
-      if (action === "remote") await syncPull(projectId, rel);
-      else await syncPush(projectId, rel, true);
-      await refreshSyncStatus(projectId);
-      await load(relPath);
-      setSyncResolve(null);
-    } catch (err) {
-      setSyncResolve((s) => (s ? { ...s, busy: false, error: String(err) } : s));
+    const abs = `${mirrorRoot.replace(/[/\\]+$/, "")}/${rel}`;
+    const tab = {
+      label: basename(abs) || entry.name,
+      cmd: "",
+      cwd: dirname(abs),
+      kind: "embed" as const,
+      embedPath: abs,
+      viewer: "syncmerge" as const,
+    };
+    // In a detached popout, stream the tab into that window (its store is
+    // authoritative); otherwise reuse an already-open merge tab for this exact
+    // file, else add a fresh one to the focused subwindow.
+    if (fileDrop) {
+      fileDrop.openTab(tab);
+      return;
     }
+    const store = useTabsStore.getState();
+    const prior = store.tabs.find(
+      (t) => t.kind === "embed" && t.viewer === "syncmerge" && t.embedPath === abs,
+    );
+    if (prior) store.setActive(prior.key);
+    else store.setActive(store.addTab(tab).key);
   }
 
   // SSH-sync Phase 1: pull this file/folder into the local mirror (and mark it
@@ -1528,21 +2135,66 @@ export function FileTree({
   function runShellScript(event: React.MouseEvent<HTMLButtonElement>, entry: FileEntry) {
     event.preventDefault();
     event.stopPropagation();
-    if (runInBackground) {
+    const remoteForegroundOnly = remoteListing;
+    if (runInBackground && !remoteForegroundOnly) {
       // Detached spawn: no tab, no captured output. The activity store tracks
       // the run (and the app-lifetime `script-finished` listener clears it) so
       // the spinner survives right-panel hide/show — see TODO group R #34.
       runScript(entry.path, projectDir);
       return;
     }
-    const scriptRel = relFromAbs(projectDir, entry.path);
-    addTab({
-      label: entry.name,
-      cmd: "bash",
-      cwd: projectDir,
-      kind: "shell",
-      initialInput: `bash ${shellQuote(scriptRel)}`,
+    const interp = shellRunnerFor(entry.extension, PLATFORM) as ScriptShell | null;
+    if (!interp) return; // not a shell type we know how to run
+    const plan = shellScriptRunPlan({
+      project,
+      treeRoot: projectDir,
+      syncSource,
+      scriptPath: entry.path,
+      interp,
     });
+    if (!plan) {
+      setError(`Run failed: ${entry.path} is outside the current project tree`);
+      return;
+    }
+    const tab = {
+      label: `▶ ${entry.name}`,
+      cmd: interp,
+      cwd: plan.cwd,
+      kind: "shell" as const,
+      initialInput: plan.initialInput,
+      runFile: entry.path,
+      location: plan.location,
+    };
+    // Same placement policy as the Python Run: stream into a detached popout when
+    // we're in one, else the focused subwindow of this project.
+    if (fileDrop) fileDrop.openTab(tab);
+    else useTabsStore.getState().addTabToScope(projectId ?? "root", tab);
+  }
+
+  /** Run a Python file: open a terminal tab in the project's scope running the
+   *  project's interpreter on it. Same mechanism as the viewer's Run button
+   *  (`lib/pythonRun`), so it inherits remote-host/container locality and picks
+   *  up the project's pinned/auto-detected interpreter. */
+  function runPythonScript(event: React.MouseEvent<HTMLButtonElement>, entry: FileEntry) {
+    event.preventDefault();
+    event.stopPropagation();
+    launchPython(entry, pyArgsByPath[entry.path]);
+  }
+
+  /** Open a run terminal for `entry`, appending `args` to the command line (see
+   *  `lib/pythonRun`). Same placement as the viewer's Run; failures surface into
+   *  the tree's error banner. */
+  function launchPython(entry: FileEntry, args?: string) {
+    runPythonFile({
+      file: entry.path,
+      projectDir: runCwd(projectDir, entry.path),
+      scope: projectId ?? "root",
+      projectId,
+      args,
+      // In a detached popout `fileDrop` is set → the tab streams into that window;
+      // in the main window it lands in the project's focused subwindow.
+      place: placeForFocused(fileDrop),
+    }).catch((err) => setError(`Run failed: ${String(err)}`));
   }
 
   /** Open (or refresh) the in-app PDF viewer tab for a freshly compiled PDF.
@@ -1652,8 +2304,18 @@ export function FileTree({
     );
   }
 
+  // Whether the search results replace the browsed listing. The search box is
+  // only offered on a local-source tree (its backends walk the local path).
+  const canSearch = !remoteListing;
+  const searching = canSearch && search.trim().length > 0;
+  // Folder the search is confined to: the browsed folder by default, the whole
+  // project when "root" is chosen (or when already at the root).
+  const searchScope = searchRoot ? "" : relPath;
+  const scopeLabel = relPath ? basename(relPath) || relPath : "";
+
   return (
     <div
+      ref={treeRootRef}
       className={`file-tree${isDragOver ? " drag-over" : ""}`}
       tabIndex={0}
       onDragOver={handleDragOver}
@@ -1663,6 +2325,14 @@ export function FileTree({
       onMouseDown={() => setContextMenu(null)}
       onContextMenu={showRootContextMenu}
     >
+      {/* Sticky header: the remote/refresh bar, the in-tree search box and the
+          breadcrumb path line stay pinned while the tree body scrolls (the sort
+          row lives above the scroll container and is already fixed). They share
+          ONE sticky wrapper so they stack instead of each pinning to top:0 and
+          colliding — which is what hid the path line behind the search box.
+          Shared by the right panel and the Files (Project) tab (both render
+          FileTree), so both get the fixed path line. */}
+      <div className="file-tree-head">
       {remoteListing && (
         <div className="file-tree-remote-bar" title="Remote project — live updates are off; refresh to re-list">
           <button
@@ -1682,13 +2352,135 @@ export function FileTree({
           )}
         </div>
       )}
-      {relPath && (() => {
+      {canSearch && (
+        <div className="file-tree-search">
+          <div className="file-tree-search-row">
+            <input
+              type="text"
+              className="file-tree-search-input"
+              value={search}
+              placeholder={
+                searchMode === "name"
+                  ? searchScope
+                    ? `Find files in ${scopeLabel}…`
+                    : "Find files…"
+                  : searchScope
+                    ? `Search in ${scopeLabel}…`
+                    : "Search in files…"
+              }
+              spellCheck={false}
+              autoComplete="off"
+              onChange={(e) => setSearch(e.target.value)}
+              onKeyDown={(e) => {
+                // Keep the tree's Enter/Escape handler out of the input.
+                e.stopPropagation();
+                if (e.key === "Escape") setSearch("");
+              }}
+            />
+            {search && (
+              <button
+                type="button"
+                className="file-tree-search-clear"
+                title="Clear search"
+                aria-label="Clear search"
+                onClick={() => setSearch("")}
+              >
+                ×
+              </button>
+            )}
+          </div>
+          <div className="file-tree-search-modes">
+            <button
+              type="button"
+              className={`file-tree-search-mode${searchMode === "name" ? " active" : ""}`}
+              aria-pressed={searchMode === "name"}
+              onClick={() => setSearchMode("name")}
+              title="Search file and folder names"
+            >
+              Name
+            </button>
+            <button
+              type="button"
+              className={`file-tree-search-mode${searchMode === "content" ? " active" : ""}`}
+              aria-pressed={searchMode === "content"}
+              onClick={() => setSearchMode("content")}
+              title="Search inside file contents"
+            >
+              Content
+            </button>
+            {searchMode === "content" && (
+              <button
+                type="button"
+                className={`file-tree-search-mode${searchCase ? " active" : ""}`}
+                aria-pressed={searchCase}
+                onClick={() => setSearchCase((v) => !v)}
+                title="Case sensitive"
+              >
+                Aa
+              </button>
+            )}
+            {/* Scope: search under the browsed folder (default) or the whole
+                project. Only shown in a subfolder — at the root they're the same. */}
+            {relPath && (
+              <span className="file-tree-search-scope">
+                <button
+                  type="button"
+                  className={`file-tree-search-mode file-tree-search-scope-folder${!searchRoot ? " active" : ""}`}
+                  aria-pressed={!searchRoot}
+                  onClick={() => setSearchRoot(false)}
+                  title={`Search under ${relPath}`}
+                >
+                  {scopeLabel}
+                </button>
+                <button
+                  type="button"
+                  className={`file-tree-search-mode${searchRoot ? " active" : ""}`}
+                  aria-pressed={searchRoot}
+                  onClick={() => setSearchRoot(true)}
+                  title="Search the whole project"
+                >
+                  root
+                </button>
+              </span>
+            )}
+          </div>
+        </div>
+      )}
+      {!searching && pathEdit !== null && (
+        <div className="file-tree-breadcrumb file-tree-path-edit">
+          <input
+            ref={pathEditRef}
+            className="file-tree-path-input"
+            value={pathEdit}
+            spellCheck={false}
+            onChange={(e) => setPathEdit(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                commitPathEdit();
+              } else if (e.key === "Escape") {
+                e.preventDefault();
+                setPathEdit(null);
+              }
+            }}
+            onBlur={() => setPathEdit(null)}
+          />
+        </div>
+      )}
+      {!searching && pathEdit === null && relPath && (() => {
         // Parent of the current folder — the up button doubles as a drag-to-move
         // target ("move into the parent dir"). The breadcrumb crumbs cover the
         // other ancestors (and ⌂ the project root).
         const parentRel = relPath.split("/").filter(Boolean).slice(0, -1).join("/");
         return (
-        <div className="file-tree-breadcrumb">
+        <div
+          className="file-tree-breadcrumb"
+          onContextMenu={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            startPathEdit();
+          }}
+        >
           <button
             className={`file-tree-up${moveTargetRel === parentRel ? " move-drop-target" : ""}`}
             data-move-rel={parentRel}
@@ -1708,38 +2500,70 @@ export function FileTree({
           {relPath.split("/").filter(Boolean).map((seg, i, arr) => {
             const target = arr.slice(0, i + 1).join("/");
             const isLast = i === arr.length - 1;
+            // When a remote listing failed, `missingCrumbDepth` marks where the
+            // path leaves the host tree: segments before it exist on the host
+            // (on-host), segments from it on are local-only (missing). The cue is
+            // shape first — strike-through + a ⊘ badge for missing — with a colour
+            // tint only as reinforcement, so it reads without relying on colour.
+            const missing = missingCrumbDepth !== null && i >= missingCrumbDepth;
+            const onHost = missingCrumbDepth !== null && i < missingCrumbDepth;
             return (
               <React.Fragment key={target}>
                 <span className="file-tree-crumb-sep">/</span>
                 <button
-                  className={`file-tree-crumb${isLast ? " current" : ""}${moveTargetRel === target ? " move-drop-target" : ""}`}
+                  className={`file-tree-crumb${isLast ? " current" : ""}${moveTargetRel === target ? " move-drop-target" : ""}${missing ? " crumb-missing" : ""}${onHost ? " crumb-on-host" : ""}`}
                   data-move-rel={target}
                   onClick={() => { if (!isLast) load(target); }}
-                  title={target}
+                  title={missing ? `${target}\nNot on the remote host — local-only` : onHost ? `${target}\nOn the remote host` : target}
                 >
                   {seg}
                 </button>
               </React.Fragment>
             );
           })}
-          <span className="file-tree-path-total" title="Total size of the files shown here">
+          <span
+            className="file-tree-path-total"
+            title={sizeTitle(groupSizes.regular, groupSizes.regularIgnored, "Total size of the files shown here")}
+          >
             {fmtSize(groupSizes.regular)}
           </span>
         </div>
         );
       })()}
+      </div>
       {loading && <div className="file-tree-loading">Loading…</div>}
       {error && <div className="file-tree-error">{error}</div>}
-      {!relPath && (
-        <label className="file-tree-scaffold-toggle">
+      {!searching && pathEdit === null && !relPath && (
+        <label
+          className="file-tree-scaffold-toggle"
+          onContextMenu={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            startPathEdit();
+          }}
+        >
           <Toggle size="sm" checked={separateScaffold} onChange={(e) => setSeparateScaffold(e.target.checked)} />
           Separate scaffold
-          <span className="file-tree-path-total" title="Total size of the files shown here">
+          <span
+            className="file-tree-path-total"
+            title={sizeTitle(groupSizes.regular, groupSizes.regularIgnored, "Total size of the files shown here")}
+          >
             {fmtSize(groupSizes.regular)}
           </span>
         </label>
       )}
-      {(() => {
+      {searching && (
+        <FileTreeSearch
+          projectDir={projectDir}
+          projectId={projectId}
+          query={search}
+          mode={searchMode}
+          caseSensitive={searchCase}
+          scopeRel={searchScope}
+          onReveal={revealPath}
+        />
+      )}
+      {!searching && (() => {
         // Sections (regular / collapsible scaffold / collapsible gitignored) are
         // computed once in the `sections` memo above and shared with the
         // selection click handler so a shift-range spans exactly these rows.
@@ -1748,8 +2572,34 @@ export function FileTree({
         function renderEntry(e: FileEntry, isScaffold = false, isGitignored = false) {
           const status = isGitignored ? undefined : gitStatuses[e.name];
           const sizeClass = !e.is_dir ? sizeCategory(e.size) : "";
-          const canRun = !e.is_dir && e.extension === ".sh";
-          const isRunning = runningScripts.has(e.path);
+          // A folder's headline number is its non-ignored weight — the part
+          // that's actually "yours" — with the full total + ignored split
+          // available on hover; the gitignored section shows a folder's whole
+          // size plainly since there nothing but ignored content is left.
+          // A folder in the gitignored section never subtracts: it may still
+          // carry a `dirIgnoredBytes` entry (the breakdown is dispatched from
+          // the first render, when `git_file_statuses` hasn't landed yet and
+          // every folder still looks regular), and there the ignored figure is
+          // the folder's WHOLE size — subtracting it would show a plain 0 B.
+          const dirTotal = e.is_dir ? dirSizes[e.path] : undefined;
+          const dirIgnored = e.is_dir && !isGitignored ? dirIgnoredBytes[e.path] : undefined;
+          const dirShown = dirTotal !== undefined ? dirTotal - (dirIgnored ?? 0) : undefined;
+          const canShRun = !e.is_dir && shellRunnerFor(e.extension, PLATFORM) !== null;
+          // Run only for a Python "main" script (see the `pyMainByPath` effect
+          // above) — a remote-source listing can't cheaply check content, so it
+          // keeps the old any-.py-file behavior instead of hiding Run entirely.
+          const canPyRun = !e.is_dir && isPythonPath(e.path)
+            && (remoteListing || (pyMainByPath[e.path] ?? false));
+          const canRun = canShRun || canPyRun;
+          // "Running" drives the green pulse + title/aria and unions both run
+          // paths: a detached `.sh` tracked by real process liveness
+          // (`runningScripts`), and a tab-backed run (Python / foreground shell)
+          // whose tab is producing output (`runningRunFiles`, busy-gated).
+          const isRunning = runningScripts.has(e.path) || runningRunFiles.has(e.path);
+          // But only the detached path LOCKS the button: it has no tab to watch
+          // and a second click would double-spawn. A tab-backed run stays
+          // clickable so a re-run can replace the tab mid-session.
+          const runLocked = runningScripts.has(e.path);
           const isCompiling = compiling.has(e.path);
           const dragTarget = draggableToTab(e);
           const isMoveTarget = e.is_dir && moveTargetRel === relForEntry(e);
@@ -1761,16 +2611,39 @@ export function FileTree({
           // nothing.
           const syncTracked = remoteListing || treatLocal;
           const rel = syncTracked ? relForEntry(e) : "";
-          const syncState = syncTracked ? syncStatus?.[rel]?.state ?? "none" : "none";
+          // A folder with no manifest entry of its own falls back to the rolled-up
+          // state of its tracked descendants (`dirSyncAgg`): green when it contains
+          // tracked files and they are all green (so no misleading red push button),
+          // else `none`. Files, and folders that DO have an own entry, keep the
+          // direct lookup. `none` remains the default when nothing is known.
+          const syncState: SyncFileState = !syncTracked
+            ? "none"
+            : syncStatus?.[rel]?.state ??
+              (e.is_dir && dirSyncAgg[rel]?.any
+                ? dirSyncAgg[rel].allGreen
+                  ? "green"
+                  : "none"
+                : "none");
           // Auto-sync glyph: shown on both the remote and local trees when this
           // path (or an ancestor auto folder) is set to auto-sync. Coexists with
           // the amber ± button — an auto path that went orange is exactly what the
           // user must resolve manually.
           const autoSync = syncTracked ? !!syncStatus?.[rel]?.auto : false;
+          // Local-mirror view only: a folder that exists in the mirror but not on
+          // the host (its name is absent from the host readdir, `hostChildNames`).
+          // Dimmed + tagged so "Local" mode never implies the whole tree is on the
+          // remote. `hostChildNames === null` (unknown / disconnected) flags nothing.
+          const notOnRemote =
+            e.is_dir &&
+            treatLocal &&
+            hostChildNames !== null &&
+            !hostChildNames.has(e.name);
           return (
             <div
               key={e.path}
-              className={`file-entry ${e.is_dir ? "dir" : "file"}${dragTarget ? " embeddable" : ""}${isScaffold || isGitignored ? " scaffold" : ""}${isMoveTarget ? " move-drop-target" : ""}${selected.has(e.path) ? " selected" : ""}`}
+              className={`file-entry ${e.is_dir ? "dir" : "file"}${dragTarget ? " embeddable" : ""}${isScaffold || isGitignored ? " scaffold" : ""}${isMoveTarget ? " move-drop-target" : ""}${selected.has(e.path) ? " selected" : ""}${notOnRemote ? " not-on-remote" : ""}`}
+              // Row key for jump-to-path reveal scroll (search results).
+              data-entry-path={e.path}
               // Folders are drag-to-move destinations: dropping a dragged file
               // here relocates it (hit-tested by data-move-rel in the drag).
               data-move-rel={e.is_dir ? relForEntry(e) : undefined}
@@ -1783,7 +2656,7 @@ export function FileTree({
               // out into an embedded browser / external target like Signal (the
               // pointer drag-to-tab bails on Ctrl, see onEntryPointerDown).
               onClick={(ev) => handleRowClick(ev, e)}
-              onDoubleClick={e.is_dir ? undefined : () => handleOpen(e)}
+              onDoubleClick={e.is_dir ? undefined : (ev) => handleOpen(e, ev)}
               onContextMenu={(ev) => showEntryContextMenu(ev, e)}
               draggable={e.is_dir || ctrlHeld}
               onDragStart={
@@ -1834,7 +2707,7 @@ export function FileTree({
                       onClick={(ev) => {
                         ev.preventDefault();
                         ev.stopPropagation();
-                        openSyncResolve(e);
+                        openSyncMerge(e);
                       }}
                     >
                       ±
@@ -1858,12 +2731,32 @@ export function FileTree({
                 <button
                   type="button"
                   className={`file-run-btn${isRunning ? " running" : ""}`}
-                  title={isRunning ? `Running ${e.name}…` : `Run ${e.name}`}
+                  // No native `title` here on purpose: hovering this button sits
+                  // inside the row, which already has the row's own portaled
+                  // tooltip open (below) — a browser title tooltip on top of it
+                  // would be a second, uncontrolled hover. Everything it would
+                  // have said (run/args/right-click hint) lives in that tooltip
+                  // instead.
                   aria-label={isRunning ? `Running ${e.name}` : `Run ${e.name}`}
-                  onClick={(ev) => runShellScript(ev, e)}
-                  disabled={isRunning}
+                  onClick={(ev) => (canPyRun ? runPythonScript(ev, e) : runShellScript(ev, e))}
+                  // Right-click a Python Run button → set arguments (sys.argv). For a
+                  // shell script there's nothing to offer, so just swallow it so it
+                  // doesn't fall through to the row's file context menu.
+                  onContextMenu={(ev) => {
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    if (canPyRun) {
+                      setArgsPopover({
+                        entry: e,
+                        x: ev.clientX,
+                        y: ev.clientY,
+                        draft: pyArgsByPath[e.path] ?? "",
+                      });
+                    }
+                  }}
+                  disabled={runLocked}
                 >
-                  {isRunning ? <span className="file-run-spinner" /> : "▶"}
+                  ▶
                 </button>
               )}
               {isCompiling && (
@@ -1876,14 +2769,34 @@ export function FileTree({
                 </span>
               )}
               <span className="file-icon">{e.is_dir ? folderIcon() : fileIcon(e.extension)}</span>
-              <span className="file-name" title={e.name}>{e.name}</span>
-              {e.is_dir
-                ? dirSizes[e.path] !== undefined && (
-                    <span className={`file-size ${sizeCategory(dirSizes[e.path])}`}>
-                      {fmtSize(dirSizes[e.path])}
-                    </span>
-                  )
-                : <span className={`file-size ${sizeClass}`}>{fmtSize(e.size)}</span>}
+              <span className="file-name">{e.name}</span>
+              {notOnRemote && (
+                <span
+                  className="file-offhost-tag"
+                  title="This folder exists only in the local mirror — it isn't on the remote host yet."
+                  aria-label="Local only — not on the remote host"
+                >
+                  local only
+                </span>
+              )}
+              {e.is_dir && isScanExcluded(relForEntry(e)) ? (
+                // Stands in for the size rather than sitting beside it: there is no
+                // size to show, and saying why is more use than an empty column.
+                <span
+                  className="file-size file-size-excluded"
+                  title="Excluded from scans — its size isn't computed and its file activity isn't counted. Right-click to include it again."
+                >
+                  not scanned
+                </span>
+              ) : e.is_dir ? (
+                dirShown !== undefined && (
+                  <span className={`file-size ${sizeCategory(dirShown)}`}>
+                    {fmtSize(dirShown)}
+                  </span>
+                )
+              ) : (
+                <span className={`file-size ${sizeClass}`}>{fmtSize(e.size)}</span>
+              )}
             </div>
           );
         }
@@ -1902,7 +2815,10 @@ export function FileTree({
                 >
                   <span className="file-tree-hidden-caret">{scaffoldExpanded ? "▾" : "▸"}</span>
                   scaffold ({standard.length})
-                  <span className="file-tree-path-total" title="Total size of the scaffold group">
+                  <span
+                    className="file-tree-path-total"
+                    title={sizeTitle(groupSizes.standard, groupSizes.standardIgnored, "Total size of the scaffold group")}
+                  >
                     {fmtSize(groupSizes.standard)}
                   </span>
                 </button>
@@ -1947,6 +2863,72 @@ export function FileTree({
         />,
         document.body,
       )}
+      {argsPopover &&
+        createPortal(
+          <div className="file-run-args-backdrop" onMouseDown={() => setArgsPopover(null)}>
+            <div
+              ref={argsPopoverRef}
+              className="file-run-args"
+              style={{ left: argsPopover.x, top: argsPopover.y }}
+              onMouseDown={(ev) => ev.stopPropagation()}
+              role="dialog"
+              aria-label={`Run arguments for ${argsPopover.entry.name}`}
+            >
+              <label className="file-run-args-label">
+                Arguments (sys.argv) — {argsPopover.entry.name}
+              </label>
+              <input
+                ref={argsInputRef}
+                className="file-run-args-input"
+                value={argsPopover.draft}
+                spellCheck={false}
+                placeholder="--epochs 5 data.csv"
+                onChange={(ev) =>
+                  setArgsPopover((p) => (p ? { ...p, draft: ev.target.value } : p))
+                }
+                onKeyDown={(ev) => {
+                  if (ev.key === "Enter") {
+                    ev.preventDefault();
+                    const a = argsPopover.draft.trim();
+                    setPyArgs(argsPopover.entry.path, a);
+                    launchPython(argsPopover.entry, a);
+                    setArgsPopover(null);
+                  } else if (ev.key === "Escape") {
+                    ev.preventDefault();
+                    setArgsPopover(null);
+                  }
+                }}
+              />
+              <div className="file-run-args-row">
+                <button
+                  type="button"
+                  className="file-run-args-btn"
+                  onClick={() => {
+                    const a = argsPopover.draft.trim();
+                    setPyArgs(argsPopover.entry.path, a);
+                    launchPython(argsPopover.entry, a);
+                    setArgsPopover(null);
+                  }}
+                >
+                  ▶ Run
+                </button>
+                <button
+                  type="button"
+                  className="file-run-args-btn"
+                  onClick={() => {
+                    const a = argsPopover.draft.trim();
+                    setPyArgs(argsPopover.entry.path, a);
+                    setArgsPopover(null);
+                  }}
+                  title="Remember these arguments without running now"
+                >
+                  Save
+                </button>
+              </div>
+            </div>
+          </div>,
+          document.body,
+        )}
       {contextMenu && createPortal(
         <div
           ref={contextMenuRef}
@@ -1956,6 +2938,19 @@ export function FileTree({
         >
           {!contextMenu.entry && (
             <>
+              {onOpenFolderTab && (
+                <>
+                  <button
+                    onClick={() => {
+                      setContextMenu(null);
+                      onOpenFolderTab(relPath);
+                    }}
+                  >
+                    Open this view in a new tab
+                  </button>
+                  <hr />
+                </>
+              )}
               <button onClick={() => createEntry("file")}>
                 New File
               </button>
@@ -2013,6 +3008,55 @@ export function FileTree({
             const autoOn = syncTracked ? !!syncStatus?.[entryRel]?.auto : false;
             return (
               <>
+                {onOpenFolderTab && entry.is_dir && (
+                  <>
+                    <button
+                      onClick={() => {
+                        setContextMenu(null);
+                        onOpenFolderTab(entryRel);
+                      }}
+                    >
+                      Open in a new tab
+                    </button>
+                    <hr />
+                  </>
+                )}
+                {/* Local trees only: the exclusion governs the LOCAL walks (the
+                    size walk and the churn watcher). A remote folder's size comes
+                    from `du` on the host, which this list has no say over. */}
+                {onToggleScanExcluded && entry.is_dir && !remoteListing && (
+                  <>
+                    <button
+                      onClick={() => {
+                        setContextMenu(null);
+                        const now = isScanExcluded(entryRel);
+                        onToggleScanExcluded(entryRel, !now);
+                        // Drop any size already shown for the folder: leaving the
+                        // old number up would claim a figure we've stopped keeping
+                        // current. Re-including re-requests it via `requestedSizes`.
+                        requestedSizes.current.delete(entry.path);
+                        setDirSizes((m) => {
+                          const next = { ...m };
+                          delete next[entry.path];
+                          return next;
+                        });
+                        setDirIgnoredBytes((m) => {
+                          const next = { ...m };
+                          delete next[entry.path];
+                          return next;
+                        });
+                      }}
+                      title={
+                        isScanExcluded(entryRel)
+                          ? "Resume computing this folder's size and counting its file activity"
+                          : "Never walk this folder: no size calculation, no file-activity counting"
+                      }
+                    >
+                      {isScanExcluded(entryRel) ? "Include in scans" : "Exclude from scans"}
+                    </button>
+                    <hr />
+                  </>
+                )}
                 {remoteListing && (
                   <>
                     <button onClick={() => syncEntryToLocal(entry)}>
@@ -2213,111 +3257,6 @@ export function FileTree({
         </div>,
         document.body,
       )}
-      {syncResolve && createPortal(
-        <div className="modal-backdrop" onMouseDown={() => !syncResolve.busy && setSyncResolve(null)}>
-          <div
-            className="file-delete-dialog"
-            style={{ maxWidth: 560, width: "min(560px, 92vw)" }}
-            onMouseDown={(e) => e.stopPropagation()}
-          >
-            <h2>Local and host differ</h2>
-            <div className="file-delete-path">{syncResolve.rel}</div>
-            {syncResolve.loading ? (
-              <p style={{ color: "var(--text-muted)" }}>Comparing local mirror and host…</p>
-            ) : syncResolve.meta ? (
-              (() => {
-                const { local, host } = syncResolve.meta!;
-                const sizeDiff = local.size !== host.size;
-                const timeDiff = (local.mtime ?? null) !== (host.mtime ?? null);
-                const cell = (present: boolean, text: string, diff: boolean) => (
-                  <td style={{ padding: "3px 10px", color: !present ? "var(--text-muted)" : diff ? "var(--warning, #d29922)" : "var(--text-primary)" }}>
-                    {present ? text : "—"}
-                  </td>
-                );
-                return (
-                  <table style={{ borderCollapse: "collapse", margin: "6px 0", fontSize: 12 }}>
-                    <thead>
-                      <tr style={{ color: "var(--text-muted)" }}>
-                        <th style={{ textAlign: "left", padding: "3px 10px", fontWeight: 500 }} />
-                        <th style={{ textAlign: "left", padding: "3px 10px", fontWeight: 600 }}>Local</th>
-                        <th style={{ textAlign: "left", padding: "3px 10px", fontWeight: 600 }}>Host (remote)</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr>
-                        <td style={{ padding: "3px 10px", color: "var(--text-muted)" }}>Present</td>
-                        {cell(true, local.exists ? "yes" : "no", local.exists !== host.exists)}
-                        {cell(true, host.exists ? "yes" : "no", local.exists !== host.exists)}
-                      </tr>
-                      <tr>
-                        <td style={{ padding: "3px 10px", color: "var(--text-muted)" }}>Size</td>
-                        {cell(local.exists, fmtSize(local.size), sizeDiff)}
-                        {cell(host.exists, fmtSize(host.size), sizeDiff)}
-                      </tr>
-                      <tr>
-                        <td style={{ padding: "3px 10px", color: "var(--text-muted)" }}>Modified</td>
-                        {cell(local.exists, fmtModified(local.mtime) || "—", timeDiff)}
-                        {cell(host.exists, fmtModified(host.mtime) || "—", timeDiff)}
-                      </tr>
-                    </tbody>
-                  </table>
-                );
-              })()
-            ) : (
-              <p style={{ color: "var(--danger, #f85149)" }}>
-                {syncResolve.error ?? "Could not read file metadata."}
-              </p>
-            )}
-            {/* Git diff when one is available; otherwise a note pointing at the
-                take-local / take-remote choice below. */}
-            {!syncResolve.loading && (syncResolve.diff ? (
-              <pre
-                style={{
-                  maxHeight: 240, overflow: "auto", margin: "4px 0 0",
-                  padding: 8, fontSize: 11, lineHeight: 1.4,
-                  background: "var(--bg-inset, rgba(0,0,0,0.25))", borderRadius: 4,
-                  whiteSpace: "pre", fontFamily: "var(--font-mono, monospace)",
-                }}
-              >
-                {syncResolve.diff}
-              </pre>
-            ) : syncResolve.meta ? (
-              <p style={{ fontSize: 11, color: "var(--text-muted)", margin: "4px 0 0" }}>
-                No line diff available (binary, identical text, or one side missing).
-                Choose which copy to keep.
-              </p>
-            ) : null)}
-            {syncResolve.meta && syncResolve.error && (
-              <p style={{ fontSize: 11, color: "var(--danger, #f85149)", margin: "4px 0 0" }}>
-                {syncResolve.error}
-              </p>
-            )}
-            <div className="file-delete-actions">
-              <button type="button" disabled={syncResolve.busy} onClick={() => setSyncResolve(null)}>
-                Cancel
-              </button>
-              <button
-                type="button"
-                disabled={syncResolve.busy || syncResolve.loading}
-                title="Pull the host copy over your local mirror"
-                onClick={() => void resolveSyncDivergence("remote")}
-              >
-                Take remote
-              </button>
-              <button
-                type="button"
-                className="danger"
-                disabled={syncResolve.busy || syncResolve.loading}
-                title="Force-push your local copy over the host"
-                onClick={() => void resolveSyncDivergence("local")}
-              >
-                Take local
-              </button>
-            </div>
-          </div>
-        </div>,
-        document.body,
-      )}
       {pastePrompt && createPortal(
         <div className="modal-backdrop" onMouseDown={() => !pasteBusy && setPastePrompt(null)}>
           <div className="file-delete-dialog" onMouseDown={(e) => e.stopPropagation()}>
@@ -2354,7 +3293,7 @@ export function FileTree({
                 background: "var(--bg-panel)",
                 color: "var(--text-primary)",
                 border: "1px solid var(--border-color)",
-                borderRadius: 3,
+                borderRadius: "var(--radius-sm)",
                 padding: "4px 6px",
                 fontFamily: "inherit",
               }}
@@ -2385,14 +3324,55 @@ export function FileTree({
       {tooltip && createPortal(
         <div
           className="file-tooltip"
-          style={{ right: window.innerWidth - tooltip.rect.left + 8, top: tooltip.rect.top }}
+          // Anchor on whichever side of the row has more room, so the tooltip pops
+          // *away* from the panel edge: docked right → opens left (the default),
+          // docked left → the row sits near x:0 and it opens right instead. Keyed
+          // off the row's own rect, so it does the right thing in a centred tab too.
+          style={
+            window.innerWidth - tooltip.rect.right > tooltip.rect.left
+              ? { left: tooltip.rect.right + 8, top: tooltip.rect.top }
+              : { right: window.innerWidth - tooltip.rect.left + 8, top: tooltip.rect.top }
+          }
         >
+          <div className="file-tooltip-name">{tooltip.entry.name}</div>
           {tooltip.entry.created_secs && (
             <div><span className="file-tooltip-label">Created </span>{fmtModified(tooltip.entry.created_secs)}</div>
           )}
           {tooltip.entry.modified_secs && (
             <div><span className="file-tooltip-label">Modified</span>{fmtModified(tooltip.entry.modified_secs)}</div>
           )}
+          {/* Same rule as the row: no ignored/total split for a folder that is
+              itself ignored — "412 MB of 412 MB ignored" says nothing. */}
+          {tooltip.entry.is_dir
+            && gitStatuses[tooltip.entry.name] !== "ignored"
+            && dirIgnoredBytes[tooltip.entry.path] !== undefined && (
+            <div>
+              <span className="file-tooltip-label">Ignored </span>
+              {fmtSize(dirIgnoredBytes[tooltip.entry.path])}
+              {dirSizes[tooltip.entry.path] !== undefined && ` of ${fmtSize(dirSizes[tooltip.entry.path])} total`}
+            </div>
+          )}
+          {!tooltip.entry.is_dir && isPythonPath(tooltip.entry.path) && (
+            (remoteListing || pyMainByPath[tooltip.entry.path] || pyArgsByPath[tooltip.entry.path])
+          ) && (
+            <>
+              {(remoteListing || pyMainByPath[tooltip.entry.path]) && (
+                <div>
+                  <span className="file-tooltip-label">Run </span>
+                  Right-click ▶ to set arguments
+                </div>
+              )}
+              {/* Nested under Run, not a top-level "Run args" row — and shown
+                  even when the file above lost its Run button (no `__main__`
+                  guard), so args set earlier don't just look lost. */}
+              {pyArgsByPath[tooltip.entry.path] && (
+                <div className="file-tooltip-sub">
+                  <span className="file-tooltip-label">args </span>
+                  {pyArgsByPath[tooltip.entry.path]}
+                </div>
+              )}
+            </>
+          )}
         </div>,
         document.body
       )}
diff --git a/src/components/files/FileTreeSearch.tsx b/src/components/files/FileTreeSearch.tsx
new file mode 100644
index 0000000..9390c66
--- /dev/null
+++ b/src/components/files/FileTreeSearch.tsx
@@ -0,0 +1,351 @@
+/**
+ * In-tree search results for `FileTree` — the flat result list shown in place of
+ * the browsed listing whenever the tree's search box holds a query. Two modes,
+ * both local-only (their backends walk the canonical local path, so `FileTree`
+ * only mounts this for a non-remote-source tree):
+ *
+ *  - **name**: fuzzy filename/path search over the whole project tree
+ *    (`list_project_paths`, ranked by the shared `fuzzy.ts`). Fetched lazily on
+ *    the first keystroke and cached per project dir.
+ *  - **content**: literal line search inside files (`project_search`, the same
+ *    backend the right panel's Search view uses), debounced.
+ *
+ * Every result offers BOTH of the actions the feature asks for: **jump to this
+ * path** (reveal + select the entry in the tree, via `onReveal`) and **open**
+ * the file in a viewer tab (content hits open at the matched line). Which one is
+ * the row's primary click depends on the mode — a filename hit reveals, a
+ * content hit opens at its line — and the other is a trailing button.
+ */
+import { useEffect, useMemo, useRef, useState } from "react";
+import { invoke } from "@tauri-apps/api/core";
+import { useWindowsStore } from "../../stores/windows";
+import { useEditorJumpStore } from "../../stores/editorJump";
+import { basename, resolvePath } from "../../lib/paths";
+import { fileIcon, folderIcon } from "../../lib/viewers/fileUtils";
+
+/** The `.ext` (lowercased, dot-included) of a path's basename, matching the
+ *  shape `fileIcon` and `FileEntry.extension` use; "" when there is none. */
+function extensionOf(path: string): string {
+  const name = basename(path);
+  const dot = name.lastIndexOf(".");
+  return dot > 0 ? name.slice(dot).toLowerCase() : "";
+}
+
+interface PathEntry {
+  path: string;
+  is_dir: boolean;
+}
+
+/** Mirror of the Rust `SearchMatch` struct from `commands::search`. */
+interface SearchMatch {
+  path: string;
+  rel: string;
+  line: number;
+  col: number;
+  text: string;
+}
+
+const MAX_NAME_RESULTS = 200;
+const MAX_CONTENT_RESULTS = 500;
+const MIN_CONTENT_LEN = 2;
+const DEBOUNCE_MS = 220;
+
+/** Highlight the literal (case-insensitive) substring match in a path. */
+function HighlightedPath({ text, query }: { text: string; query: string }) {
+  const parts = contentParts(text, query, false);
+  if (!parts) return <>{text}</>;
+  return (
+    <>
+      {parts.before}
+      <mark className="file-search-hl">{parts.hit}</mark>
+      {parts.after}
+    </>
+  );
+}
+
+/** Split a content line around the literal match so the hit can be marked. */
+function contentParts(
+  text: string,
+  query: string,
+  caseSensitive: boolean,
+): { before: string; hit: string; after: string } | null {
+  if (!query) return null;
+  const hay = caseSensitive ? text : text.toLowerCase();
+  const needle = caseSensitive ? query : query.toLowerCase();
+  const idx = hay.indexOf(needle);
+  if (idx < 0) return null;
+  return { before: text.slice(0, idx), hit: text.slice(idx, idx + query.length), after: text.slice(idx + query.length) };
+}
+
+export function FileTreeSearch({
+  projectDir,
+  projectId,
+  query,
+  mode,
+  caseSensitive,
+  scopeRel,
+  onReveal,
+}: {
+  projectDir: string;
+  projectId: string | null;
+  query: string;
+  mode: "name" | "content";
+  caseSensitive: boolean;
+  /** Project-relative folder to confine the search to ("" = whole project).
+   *  Filenames are filtered to this subtree; content search walks only it. */
+  scopeRel: string;
+  onReveal: (rel: string, isDir: boolean) => void;
+}) {
+  const openFile = useWindowsStore((s) => s.openFile);
+
+  // The absolute directory the search is confined to (content search walks it;
+  // name results are filtered to it). Rel-path bookkeeping stays project-rooted:
+  // a content hit's project-relative path is `scopeRel` + the backend's `rel`.
+  const scopeDir = scopeRel ? resolvePath(projectDir, scopeRel) : projectDir;
+
+  // Name-mode source: the whole project path list, fetched lazily on first use
+  // and cached for this projectDir (cleared when the dir changes).
+  const [paths, setPaths] = useState<PathEntry[]>([]);
+  const [namesLoaded, setNamesLoaded] = useState(false);
+  const pathsFor = useRef<string | null>(null);
+
+  const [content, setContent] = useState<SearchMatch[]>([]);
+  const [contentSearched, setContentSearched] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const reqId = useRef(0);
+
+  const trimmed = query.trim();
+
+  // Fetch the project path list once per projectDir, only when name search is
+  // actually used (a query in name mode). The fetch is keyed to the *directory*,
+  // not the query — every keystroke re-runs this effect (via `trimmed`), so it
+  // must NOT abort the in-flight fetch on a query change: the once-per-dir guard
+  // (`pathsFor.current === projectDir`) would then skip re-fetching and the
+  // results would never load ("Searching…" forever). Instead we tag the request
+  // with the dir it was for and drop only results whose dir is no longer current
+  // — so a second keystroke can never strand the first (and only) fetch.
+  useEffect(() => {
+    if (mode !== "name" || !projectDir || !trimmed) return;
+    if (pathsFor.current === projectDir) return; // already fetched/fetching this dir
+    pathsFor.current = projectDir;
+    setNamesLoaded(false);
+    setPaths([]);
+    const forDir = projectDir;
+    invoke<PathEntry[]>("list_project_paths", { projectDir })
+      .then((entries) => {
+        if (pathsFor.current !== forDir) return; // dir changed since; stale result
+        setPaths(entries);
+        setNamesLoaded(true);
+      })
+      .catch(() => {
+        if (pathsFor.current !== forDir) return;
+        pathsFor.current = null; // let a retry re-fetch
+        setPaths([]);
+        setNamesLoaded(true);
+      });
+  }, [mode, projectDir, trimmed]);
+
+  // A dir change needs no separate reset effect: the fetch above already keys on
+  // `projectDir`, so a genuine switch re-runs it (`pathsFor.current !== new dir`)
+  // and it clears + re-fetches for the new dir. With an empty query the stale
+  // `paths` are never shown either — `nameResults` guards on `!trimmed`. A second
+  // effect resetting `pathsFor` here would only race and strand that fetch.
+
+  const nameResults = useMemo(() => {
+    if (mode !== "name" || !trimmed) return [];
+    // Literal (case-insensitive) substring match on the path — NOT a fuzzy
+    // subsequence, which for a whole project matches almost everything. Rank a
+    // hit in the basename above one only in an ancestor folder, then a basename
+    // prefix highest, then shorter paths.
+    const q = trimmed.toLowerCase();
+    const scoped = scopeRel ? paths.filter((e) => e.path.startsWith(`${scopeRel}/`)) : paths;
+    const matched: { e: PathEntry; rank: number }[] = [];
+    for (const e of scoped) {
+      if (!e.path.toLowerCase().includes(q)) continue;
+      const base = basename(e.path).toLowerCase();
+      const rank = base.startsWith(q) ? 0 : base.includes(q) ? 1 : 2;
+      matched.push({ e, rank });
+    }
+    matched.sort((a, b) =>
+      a.rank !== b.rank
+        ? a.rank - b.rank
+        : a.e.path.length !== b.e.path.length
+          ? a.e.path.length - b.e.path.length
+          : a.e.path.localeCompare(b.e.path),
+    );
+    return matched.slice(0, MAX_NAME_RESULTS).map((m) => m.e);
+  }, [mode, trimmed, paths, scopeRel]);
+
+  // Content search: debounced call into the shared literal search backend,
+  // confined to `scopeDir`.
+  useEffect(() => {
+    if (mode !== "content" || !scopeDir) return;
+    if (trimmed.length < MIN_CONTENT_LEN) {
+      setContent([]);
+      setContentSearched(false);
+      setError(null);
+      setLoading(false);
+      return;
+    }
+    const id = ++reqId.current;
+    setLoading(true);
+    const timer = setTimeout(() => {
+      invoke<SearchMatch[]>("project_search", {
+        projectDir: scopeDir,
+        query: trimmed,
+        caseSensitive,
+        maxResults: MAX_CONTENT_RESULTS,
+      })
+        .then((matches) => {
+          if (reqId.current !== id) return;
+          setContent(matches);
+          setContentSearched(true);
+          setError(null);
+          setLoading(false);
+        })
+        .catch((e) => {
+          if (reqId.current !== id) return;
+          setContent([]);
+          setContentSearched(true);
+          setError(String(e));
+          setLoading(false);
+        });
+    }, DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+  }, [mode, scopeDir, trimmed, caseSensitive]);
+
+  function openEntry(rel: string, isDir: boolean, line?: number, col?: number) {
+    if (isDir) {
+      onReveal(rel, true);
+      return;
+    }
+    const abs = resolvePath(projectDir, rel);
+    openFile(abs, undefined, projectId, "right_file_tree").catch(console.error);
+    if (line != null) useEditorJumpStore.getState().requestJump(abs, line, col ?? 0);
+  }
+
+  if (mode === "content" && trimmed.length > 0 && trimmed.length < MIN_CONTENT_LEN) {
+    return <div className="file-tree-empty">Type at least {MIN_CONTENT_LEN} characters</div>;
+  }
+
+  if (mode === "name") {
+    if (!namesLoaded && paths.length === 0) {
+      return <div className="file-tree-empty">Searching…</div>;
+    }
+    if (nameResults.length === 0) {
+      return <div className="file-tree-empty">No matching files</div>;
+    }
+    return (
+      <div className="file-search-results">
+        <div className="file-search-count">
+          {nameResults.length}
+          {nameResults.length >= MAX_NAME_RESULTS ? "+" : ""} file
+          {nameResults.length === 1 ? "" : "s"}
+        </div>
+        {nameResults.map((e) => {
+          // Display the path relative to the browsed scope; reveal/open stay
+          // project-rooted (`e.path`).
+          const displayPath = scopeRel ? e.path.slice(scopeRel.length + 1) : e.path;
+          return (
+          <div
+            key={e.path}
+            className={`file-entry file-search-row ${e.is_dir ? "dir" : "file"}`}
+            title={`${e.path} — click to reveal in tree`}
+            onClick={() => onReveal(e.path, e.is_dir)}
+            onDoubleClick={() => openEntry(e.path, e.is_dir)}
+          >
+            <span className="file-icon">{e.is_dir ? folderIcon() : fileIcon(extensionOf(e.path))}</span>
+            <span className="file-name file-search-path">
+              <HighlightedPath text={displayPath} query={trimmed} />
+            </span>
+            {!e.is_dir && (
+              <button
+                type="button"
+                className="file-search-act"
+                title="Open in a viewer tab"
+                aria-label="Open file"
+                onClick={(ev) => {
+                  ev.stopPropagation();
+                  openEntry(e.path, false);
+                }}
+              >
+                ↗
+              </button>
+            )}
+          </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  // content mode
+  if (error) {
+    return (
+      <div className="file-tree-error" style={{ padding: "6px 8px", wordBreak: "break-all" }}>
+        {error}
+      </div>
+    );
+  }
+  if (loading && content.length === 0) {
+    return <div className="file-tree-empty">Searching…</div>;
+  }
+  if (contentSearched && content.length === 0) {
+    return <div className="file-tree-empty">No results</div>;
+  }
+  return (
+    <div className="file-search-results">
+      {content.length > 0 && (
+        <div className="file-search-count">
+          {content.length}
+          {content.length >= MAX_CONTENT_RESULTS ? "+" : ""} match
+          {content.length === 1 ? "" : "es"}
+        </div>
+      )}
+      {content.map((m, i) => {
+        const parts = contentParts(m.text, trimmed, caseSensitive);
+        // The backend's `rel` is relative to `scopeDir`; re-root it at the
+        // project so reveal/open address the same path the tree uses.
+        const projectRel = scopeRel ? `${scopeRel}/${m.rel}` : m.rel;
+        return (
+          <div
+            key={`${projectRel}:${m.line}:${m.col}:${i}`}
+            className="file-entry file-search-row file-search-content"
+            title={`${projectRel}:${m.line} — click to open`}
+            onClick={() => openEntry(projectRel, false, m.line, m.col)}
+          >
+            <div className="file-search-content-body">
+              <span className="file-search-loc">
+                {m.rel}:{m.line}
+              </span>
+              <span className="file-search-line">
+                {parts ? (
+                  <>
+                    {parts.before}
+                    <mark className="file-search-hl">{parts.hit}</mark>
+                    {parts.after}
+                  </>
+                ) : (
+                  m.text
+                )}
+              </span>
+            </div>
+            <button
+              type="button"
+              className="file-search-act"
+              title="Reveal in tree"
+              aria-label="Reveal in tree"
+              onClick={(ev) => {
+                ev.stopPropagation();
+                onReveal(projectRel, false);
+              }}
+            >
+              ◎
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/components/files/GitChangeTree.tsx b/src/components/files/GitChangeTree.tsx
index bd4fd55..3b4a0ab 100644
--- a/src/components/files/GitChangeTree.tsx
+++ b/src/components/files/GitChangeTree.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { invoke } from "@tauri-apps/api/core";
 
 export interface FileChange {
@@ -143,6 +143,13 @@ export function GitChangeTree({ projectDir, scope }: Props) {
   const [changes, setChanges] = useState<FileChange[] | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
+  // The flyout is CSS-anchored to the action bar's right edge and grows left, so
+  // when the file viewer is docked on the LEFT of the window it runs off the left
+  // screen border. Measure the rendered box and shift it back on-screen (either
+  // edge). We measure the box with its own shift cleared, so the correction is a
+  // fixed reference and converges in one pass instead of chasing its transform.
+  const treeRef = useRef<HTMLDivElement>(null);
+  const [shiftX, setShiftX] = useState(0);
 
   useEffect(() => {
     let live = true;
@@ -158,6 +165,28 @@ export function GitChangeTree({ projectDir, scope }: Props) {
 
   const tree = useMemo(() => (changes ? buildTree(changes) : null), [changes]);
 
+  useLayoutEffect(() => {
+    const el = treeRef.current;
+    if (!el) return;
+    // Measure the NATURAL box with any prior shift removed, so the correction is
+    // computed from a fixed reference and can't chase its own transform. (A real
+    // browser folds the applied translateX into rect.left, so `rect − shiftX`
+    // would also converge — but an env that does NOT reflect the transform into
+    // layout, e.g. jsdom under test, makes that subtraction drift by `margin`
+    // every render into an infinite loop. Clearing the transform first is stable
+    // in both.)
+    const prev = el.style.transform;
+    el.style.transform = "none";
+    const rect = el.getBoundingClientRect();
+    el.style.transform = prev;
+    const margin = 8;
+    let dx = 0;
+    if (rect.left < margin) dx = margin - rect.left; // clips left → push right
+    else if (rect.right > window.innerWidth - margin)
+      dx = window.innerWidth - margin - rect.right; // clips right → push left
+    if (dx !== shiftX) setShiftX(dx);
+  }, [tree, error, shiftX]);
+
   const toggle = (path: string) =>
     setCollapsed((prev) => {
       const next = new Set(prev);
@@ -166,7 +195,13 @@ export function GitChangeTree({ projectDir, scope }: Props) {
     });
 
   return (
-    <div className="git-change-tree" data-testid="git-change-tree" onClick={(e) => e.stopPropagation()}>
+    <div
+      ref={treeRef}
+      className="git-change-tree"
+      data-testid="git-change-tree"
+      style={shiftX ? { transform: `translateX(${shiftX}px)` } : undefined}
+      onClick={(e) => e.stopPropagation()}
+    >
       {error && <div className="git-change-empty">{error}</div>}
       {!error && !tree && <div className="git-change-empty">Loading…</div>}
       {tree && tree.children.length === 0 && <div className="git-change-empty">No changes</div>}
diff --git a/src/components/files/GitHistory.tsx b/src/components/files/GitHistory.tsx
index a281e03..c19db13 100644
--- a/src/components/files/GitHistory.tsx
+++ b/src/components/files/GitHistory.tsx
@@ -636,7 +636,7 @@ export function GitHistory({ projectDir, projectId, remote, onChanged }: Props)
                 title={lockstep.detail ?? undefined}
                 style={{
                   padding: "1px 6px",
-                  borderRadius: 8,
+                  borderRadius: "var(--radius)",
                   color: "#fff",
                   background:
                     lockstep.status === "synchronized"
diff --git a/src/components/files/ProjectFilesPane.tsx b/src/components/files/ProjectFilesPane.tsx
new file mode 100644
index 0000000..e89a5e2
--- /dev/null
+++ b/src/components/files/ProjectFilesPane.tsx
@@ -0,0 +1,471 @@
+import { useEffect, useMemo, useState } from "react";
+import { FileTree } from "./FileTree";
+import { DownloadsSection } from "./DownloadsSection";
+import { useProjectsStore } from "../../stores/projects";
+import { useRemoteStatusStore } from "../../stores/remoteStatus";
+import { useSyncStore } from "../../stores/sync";
+import { useRemoteMachinesStore } from "../../stores/remoteMachines";
+import { useFileSourcePrefStore } from "../../stores/fileSourcePref";
+import { BOX_SCOPE_PREFIX, boxScopeId, useBoxesStore } from "../../stores/boxes";
+import { resolveLocalMirror, resolveProjectDirectory } from "../../types";
+import type { ProjectBox, ProjectEntry } from "../../types";
+import type { SortKey } from "../../lib/viewers/fileUtils";
+
+/**
+ * THE project file view — the tree, its sort row, the remote sync row and the
+ * Downloads section. Rendered twice: by the right panel, and by the "Files
+ * (Project)" tab (`ProjectFilesTab`). One component, so the two can never drift
+ * into two different file views of the same project.
+ *
+ * What each host still owns is what must differ between them: the browsed
+ * folder (two views of one project must not yank each other around), the
+ * remote/local source switch's placement, and the chrome around the tree.
+ */
+
+/** Whether a remote project's SSH pool is down. Git/endings/SFTP probes are
+ *  SYNCHRONOUS Tauri commands (main thread), so dispatching one at a dead
+ *  session freezes the window — every caller gates on this. Local projects are
+ *  never blocked. */
+export function useRemoteBlocked(projectId: string | null, isRemote: boolean) {
+  const remoteSshState = useRemoteStatusStore((s) =>
+    projectId ? s.byProject[projectId]?.ssh : undefined,
+  );
+  return { remoteSshState, remoteBlocked: isRemote && remoteSshState !== "connected" };
+}
+
+/**
+ * Which side of a remote project a file view shows. Defaults to whichever side
+ * is actually usable when the project changes: connected → Remote (the host
+ * tree), disconnected → Local (the mirror, so the view doesn't open on a Connect
+ * prompt). Only resets on a project switch — it never fights a mid-session
+ * manual toggle (flip to Remote, then lose the connection: the Connect
+ * placeholder takes over, but the toggle stays put).
+ *
+ * Backed by `useFileSourcePrefStore` (keyed by project id), not local state, so
+ * a freshly opened subwindow file viewer (`FileViewerPane`) can default to
+ * whichever side this tree is CURRENTLY showing for the project.
+ */
+export function useFileSource(projectId: string | null, isRemote: boolean) {
+  const stored = useFileSourcePrefStore((s) => (projectId ? s.byProject[projectId] : undefined));
+  const { remoteSshState } = useRemoteBlocked(projectId, isRemote);
+  // `isRemote` (not just `projectId`) in the deps: a project can flip local → remote
+  // ("Extend to remote") while this view is already mounted on the same id, and
+  // without re-seeding here it keeps whatever the store already held — typically
+  // nothing for a project that was never remote, which falls through to the
+  // "remote" default below and points every file op at an SFTP host that may not
+  // have finished its first lockstep sync yet. `isRemote` itself only moves on an
+  // extend/detach, never on a mere connect/disconnect, so this can't fight a
+  // mid-session manual toggle the way resetting on `remoteSshState` would.
+  useEffect(() => {
+    if (projectId && isRemote) {
+      useFileSourcePrefStore.getState().set(projectId, remoteSshState === "connected" ? "remote" : "local");
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [projectId, isRemote]);
+  const setSource = (s: "remote" | "local") => {
+    if (projectId) useFileSourcePrefStore.getState().set(projectId, s);
+  };
+  return [stored ?? "remote", setSource] as const;
+}
+
+/**
+ * Like `useFileSource`, but for a viewer that must NOT keep mirroring the
+ * shared per-project preference forever — only take it as a starting point.
+ * Every `ProjectFilesTab` instance (the standalone Files (Project) tab, and
+ * every per-subwindow ◫ sidebar) used to share `useFileSourcePrefStore`
+ * with the right panel, so flipping Local/Remote *anywhere* flipped it
+ * *everywhere* for that project — one shared toggle wearing many faces
+ * instead of each viewer owning its own. This seeds from the right panel's
+ * current value on mount (and again if the underlying project's identity or
+ * remote-ness changes, matching `useFileSource`'s own reseed), then keeps the
+ * choice in plain component state: this viewer's later toggles never write
+ * back to the shared store, and the shared store's later changes never read
+ * back into this viewer.
+ */
+export function useIndependentFileSource(projectId: string | null, isRemote: boolean) {
+  const { remoteSshState } = useRemoteBlocked(projectId, isRemote);
+  const [source, setSource] = useState<"remote" | "local">("remote");
+  useEffect(() => {
+    if (!projectId || !isRemote) return;
+    const shared = useFileSourcePrefStore.getState().byProject[projectId];
+    setSource(shared ?? (remoteSshState === "connected" ? "remote" : "local"));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [projectId, isRemote]);
+  return [source, setSource] as const;
+}
+
+/** The Remote/Local file-source switch (remote SSH projects only). A live
+ *  segmented control — NOT a tag — that flips the tree between the host tree
+ *  over SFTP ("Remote") and the synced mirror ("Local"). */
+export function FileSourceSwitch({
+  source,
+  onChange,
+  remoteDisabled = false,
+  remoteDisabledTitle,
+}: {
+  source: "remote" | "local";
+  onChange: (s: "remote" | "local") => void;
+  /** Disable the Remote segment — used when the open file has no counterpart on
+   *  the host (a local-only file), so the switch can't strand the viewer on a
+   *  read error. Ignored while the Remote side is the active one. */
+  remoteDisabled?: boolean;
+  remoteDisabledTitle?: string;
+}) {
+  // Never disable the segment that's currently active — that would leave the
+  // switch with no lit button. (A remote-native tab whose file is missing shows
+  // its own read error; the escape hatch there is switching TO Local.)
+  const disableRemote = remoteDisabled && source !== "remote";
+  return (
+    <span className="right-panel-source-switch" role="group" aria-label="File source">
+      <button
+        type="button"
+        className={`source-seg${source === "local" ? " active" : ""}`}
+        aria-pressed={source === "local"}
+        onClick={() => onChange("local")}
+        title="Show the local synced mirror copy."
+      >
+        Local
+      </button>
+      <button
+        type="button"
+        className={`source-seg${source === "remote" ? " active" : ""}`}
+        aria-pressed={source === "remote"}
+        disabled={disableRemote}
+        onClick={() => onChange("remote")}
+        title={
+          disableRemote
+            ? remoteDisabledTitle ?? "This file isn't on the remote host (local-only)."
+            : "Show the host tree over SFTP (remote)."
+        }
+      >
+        Remote
+      </button>
+    </span>
+  );
+}
+
+export interface BoxRoot {
+  rootId: string;
+  label: string;
+  icon: string;
+  dir: string;
+  localFile?: string;
+  variant: "box" | "member";
+}
+
+/** A box scope has no single root: the file view shows the box folder plus every
+ *  member project's root. Resolved from the scope id, not the active project. */
+export function useBoxRoots(scope: string): { activeBox: ProjectBox | null; boxRoots: BoxRoot[] } {
+  const projects = useProjectsStore((s) => s.projects);
+  const boxes = useBoxesStore((s) => s.boxes);
+  const activeBox = useMemo(
+    () =>
+      scope.startsWith(BOX_SCOPE_PREFIX)
+        ? boxes.find((b) => boxScopeId(b.id) === scope) ?? null
+        : null,
+    [scope, boxes],
+  );
+  const boxRoots = useMemo(() => {
+    if (!activeBox) return [];
+    const roots: BoxRoot[] = [];
+    if (activeBox.folder) {
+      roots.push({ rootId: scope, label: activeBox.name, icon: "▣", dir: activeBox.folder, variant: "box" });
+    }
+    for (const id of activeBox.member_ids) {
+      const p = projects.find((m) => m.id === id);
+      if (!p) continue;
+      const dir = resolveProjectDirectory(p);
+      if (!dir) continue;
+      roots.push({ rootId: p.id, label: p.name, icon: "📁", dir, localFile: p.local_file, variant: "member" });
+    }
+    return roots;
+  }, [activeBox, projects, scope]);
+  return { activeBox, boxRoots };
+}
+
+/** One collapsible root inside the box multi-root file view. Reuses `FileTree`
+ *  as-is for a single directory; per-root navigation persists via the projects
+ *  store's `rightPanelFolderByProject` map keyed by the root's id. */
+function BoxRootSection({
+  rootId,
+  label,
+  icon,
+  dir,
+  localFile,
+  variant,
+  sortKey,
+  descending,
+}: BoxRoot & { sortKey: SortKey; descending: boolean }) {
+  const [collapsed, setCollapsed] = useState(false);
+  const rel = useProjectsStore((s) => s.rightPanelFolderByProject[rootId] ?? "");
+  const setRightPanelFolder = useProjectsStore((s) => s.setRightPanelFolder);
+  return (
+    <div className={`file-root file-root--${variant}${collapsed ? " is-collapsed" : ""}`}>
+      <button
+        type="button"
+        className="file-root-header"
+        onClick={() => setCollapsed((c) => !c)}
+        title={dir}
+      >
+        <span className="file-root-caret" aria-hidden>
+          {collapsed ? "▸" : "▾"}
+        </span>
+        <span className="file-root-icon" aria-hidden>
+          {icon}
+        </span>
+        <span className="file-root-name">{label}</span>
+        <span className="file-root-kind">{variant === "box" ? "box" : "project"}</span>
+      </button>
+      {!collapsed && (
+        <div className="file-root-body">
+          <FileTree
+            projectDir={dir}
+            projectId={rootId}
+            localFile={localFile}
+            sortKey={sortKey}
+            descending={descending}
+            hiddenEndings={[]}
+            hiddenPaths={[]}
+            shownPaths={[]}
+            initialRelPath={rel}
+            onRelPathChange={(folder) => setRightPanelFolder(rootId, folder)}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface Props {
+  /** Tab scope this view belongs to: a project id, a `box:<id>` scope, or "root". */
+  scope: string;
+  /** The project the tree shows, or null in the root scope / a box scope. */
+  project: ProjectEntry | null;
+  /** The tree's root directory (the project dir, or the tab's cwd at root). */
+  projectDir: string;
+  /** Project-relative folder currently browsed, owned by the host. */
+  folder: string;
+  onFolderChange: (folder: string) => void;
+  /** Which side of a remote project to show (see useFileSource). */
+  source: "remote" | "local";
+  hiddenEndings: string[];
+  hiddenPaths: string[];
+  shownPaths: string[];
+  /** Folders excluded from recursive scans, and the toggle that maintains the
+   *  list. Omitted by hosts with no project.json to write to (a box's multi-root
+   *  view), which simply don't offer the action. */
+  scanExcluded?: string[];
+  onToggleScanExcluded?: (relPath: string, excluded: boolean) => void;
+  /** Sort is the host's, not the pane's: the right panel unmounts this pane when
+   *  it shows Git/Search, and a sort order that reset itself on the way back
+   *  would be a worse view than the one the user chose. */
+  sortKey: SortKey;
+  descending: boolean;
+  onSortChange: (sortKey: SortKey, descending: boolean) => void;
+  showDownloads: boolean;
+  onCloseDownloads: () => void;
+  /** Offers the tree's "Open in a new tab" action (see FileTree). Omitted where
+   *  the host can't own a tab — a box's multi-root view, a detached window. */
+  onOpenFolderTab?: (relPath: string) => void;
+  /** False keeps the tree unmounted (the right panel does this while closed, so
+   *  a hidden panel costs no fs-watch). */
+  mountTree?: boolean;
+  /** Compact (docked subwindow) mode: hide the remote-sync row and the sort row
+   *  so the tree's find-files search box is the topmost element. */
+  compact?: boolean;
+}
+
+export function ProjectFilesPane({
+  scope,
+  project,
+  projectDir,
+  folder,
+  onFolderChange,
+  source,
+  hiddenEndings,
+  hiddenPaths,
+  shownPaths,
+  scanExcluded,
+  onToggleScanExcluded,
+  sortKey,
+  descending,
+  onSortChange,
+  showDownloads,
+  onCloseDownloads,
+  onOpenFolderTab,
+  mountTree = true,
+  compact,
+}: Props) {
+  const { activeBox, boxRoots } = useBoxRoots(scope);
+  const projectId = project?.id ?? null;
+  const isRemoteProject = !!project?.remote;
+  const { remoteSshState, remoteBlocked } = useRemoteBlocked(projectId, isRemoteProject);
+  const syncMap = useSyncStore((s) => (projectId ? s.byProject[projectId] : undefined));
+
+  return (
+    <>
+      {/* The whole-tree sync action for the active source: Remote → pull the host
+          tree into the mirror; Local → push the mirror back to the host (skipping
+          host-diverged/orange files). Both need a live connection, so the row is
+          gated on !remoteBlocked. */}
+      {!compact && !activeBox && isRemoteProject && projectId && !remoteBlocked && (
+        <div className="right-panel-source">
+          {/* Project-wide auto-sync toggle: the root "" marker. When on, the
+              whole tree bidirectionally auto-syncs; individual files/folders
+              can still be carved out (or opted in) from their own context
+              menu, which overrides this. */}
+          {(() => {
+            const autoAll = !!syncMap?.[""]?.auto;
+            return (
+              <button
+                className="tab-add-btn"
+                style={{
+                  fontSize: 10,
+                  padding: "1px 6px",
+                  height: 20,
+                  ...(autoAll
+                    ? { color: "var(--accent)", borderColor: "var(--accent)" }
+                    : {}),
+                }}
+                onClick={() =>
+                  void useSyncStore.getState().setAuto(projectId, [""], !autoAll, true)
+                }
+                title={
+                  autoAll
+                    ? "Auto-syncing the whole project (⟳). Click to stop. Individual files/folders can still be excluded or included from their right-click menu."
+                    : "Auto-sync the whole project bidirectionally (host ⇄ local mirror). Diverged files are left for manual resolution; per-file/folder toggles override this."
+                }
+              >
+                {autoAll ? "⟳ Auto-sync: all" : "Auto-sync all"}
+              </button>
+            );
+          })()}
+          {source === "remote" ? (
+            <button
+              className="tab-add-btn"
+              style={{ fontSize: 10, padding: "1px 6px", height: 20, marginLeft: "auto" }}
+              onClick={() => void useSyncStore.getState().syncWholeProject(projectId)}
+              title="Sync the whole project tree into the local mirror (remote → local)"
+            >
+              Sync all
+            </button>
+          ) : (
+            <button
+              className="tab-add-btn"
+              style={{ fontSize: 10, padding: "1px 6px", height: 20, marginLeft: "auto" }}
+              onClick={() => void useSyncStore.getState().pushWholeProject(projectId)}
+              title="Push the whole local mirror to the host (local → remote). Files that diverged on the host (orange) are skipped, never overwritten."
+            >
+              Sync all
+            </button>
+          )}
+        </div>
+      )}
+      {!compact && (
+      <div className="right-panel-sort">
+        {(["name", "size", "type", "created", "modified"] as SortKey[]).map((key) => (
+          <button
+            key={key}
+            className={`sort-key-btn${sortKey === key ? " active" : ""}`}
+            onClick={() =>
+              sortKey === key
+                ? onSortChange(key, !descending)
+                : onSortChange(key, descending)
+            }
+            title={sortKey === key ? (descending ? "Descending — click to reverse" : "Ascending — click to reverse") : `Sort by ${key}`}
+          >
+            {key}{sortKey === key ? (descending ? " ↓" : " ↑") : ""}
+          </button>
+        ))}
+      </div>
+      )}
+      <div className="right-panel-scroll" style={{ flex: 1, overflowY: "auto" }}>
+        {mountTree && activeBox ? (
+          boxRoots.length === 0 ? (
+            <div className="file-tree-empty">No member project folders</div>
+          ) : (
+            boxRoots.map((r) => (
+              <BoxRootSection
+                key={r.rootId}
+                {...r}
+                sortKey={sortKey}
+                descending={descending}
+              />
+            ))
+          )
+        ) : (
+          mountTree && (() => {
+            // A remote project's "Local" source points the tree at the local
+            // mirror dir (browsed as a plain local tree); "Remote" keeps the host
+            // (SFTP) tree with the sync overlay. A local project ignores it.
+            //
+            // Disconnected remote source: don't mount the SFTP-backed tree (its
+            // main-thread list_dir would freeze the window). Keep the view looking
+            // the same — the Remote/Local switch stays up — but show a Connect
+            // prompt in the tree area. Selecting "Local" still browses the offline
+            // mirror.
+            if (isRemoteProject && source === "remote" && remoteBlocked) {
+              return (
+                <div className="file-tree-empty" style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
+                  <div>
+                    {remoteSshState === "connecting"
+                      ? "Connecting to the remote host…"
+                      : "Disconnected — connect to browse the remote tree."}
+                  </div>
+                  {remoteSshState !== "connecting" && projectId && (
+                    <button
+                      type="button"
+                      className="dialog-connect-btn"
+                      onClick={() => useRemoteMachinesStore.getState().open(projectId)}
+                    >
+                      Connect
+                    </button>
+                  )}
+                </div>
+              );
+            }
+            // The relocatable mirror override (projects.json `extra["mirror"]`,
+            // updated by `move_remote_mirror`) is authoritative; fall back to the
+            // default `<state_dir>/mirror` only for legacy projects that never
+            // persisted one. Computing `${projectDir}/mirror` unconditionally
+            // pointed the Local tree at the pre-move location after a relocate.
+            const mirrorDir =
+              resolveLocalMirror(project) ??
+              (projectDir
+                ? `${projectDir.replace(/[/\\]+$/, "")}/mirror`
+                : projectDir);
+            const treeDir = isRemoteProject && source === "local" ? mirrorDir : projectDir;
+            return (
+              <FileTree
+                projectDir={treeDir}
+                projectId={projectId}
+                localFile={project?.local_file}
+                sortKey={sortKey}
+                descending={descending}
+                hiddenEndings={hiddenEndings}
+                hiddenPaths={hiddenPaths}
+                shownPaths={shownPaths}
+                scanExcluded={scanExcluded}
+                onToggleScanExcluded={onToggleScanExcluded}
+                initialRelPath={folder}
+                onRelPathChange={onFolderChange}
+                onOpenFolderTab={onOpenFolderTab}
+                syncSource={isRemoteProject ? source : undefined}
+                remoteProbeDir={isRemoteProject ? projectDir : undefined}
+              />
+            );
+          })()
+        )}
+      </div>
+      {showDownloads && !activeBox && projectDir && (
+        <DownloadsSection
+          projectDir={projectDir}
+          projectId={projectId}
+          targetFolder={folder}
+          isRemote={isRemoteProject}
+          onClose={onCloseDownloads}
+        />
+      )}
+    </>
+  );
+}
diff --git a/src/components/files/ProjectFilesSettings.tsx b/src/components/files/ProjectFilesSettings.tsx
new file mode 100644
index 0000000..9ec88e2
--- /dev/null
+++ b/src/components/files/ProjectFilesSettings.tsx
@@ -0,0 +1,392 @@
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { invoke } from "@tauri-apps/api/core";
+import { Toggle } from "../common/Toggle";
+import { Dropdown } from "../common/Dropdown";
+import { useSettingsStore } from "../../stores/settings";
+import { VIEWER_PREF_TYPES } from "../../lib/viewers/fileUtils";
+import { PythonInterpreterWindow } from "../projects/PythonInterpreterWindow";
+import type { ProjectEntry, ViewerPref } from "../../types";
+
+/**
+ * The file-view filters (which endings/paths a project's tree hides) and the
+ * Project Settings dialog that edits them. Shared by the right panel and the
+ * "Files (Project)" tab so the two views hide the same files: the lists live in
+ * the project's own `project.json`, not in either host's state.
+ */
+
+type ProjectJson = Record<string, unknown>;
+
+const PANEL_HIDDEN_ENDINGS_KEY = "panel_hidden_endings";
+const PANEL_HIDDEN_PATHS_KEY = "panel_hidden_paths";
+const PANEL_SHOWN_PATHS_KEY = "panel_shown_paths";
+/** Folders excluded from every recursive scan. Read by the backend too — keep the
+ *  spelling in step with `commands::fs::excluded_rel_set`. */
+const SCAN_EXCLUDED_PATHS_KEY = "scan_excluded_paths";
+
+/** The one spelling of a scan-exclusion path: project-relative, forward slashes,
+ *  no leading/trailing separator. Mirrors the backend's `excluded_rel_set`, so a
+ *  path written here matches the one the walk builds as it descends. */
+export function normalizeScanPath(rel: string): string {
+  return rel.replace(/\\/g, "/").trim().replace(/^\.\//, "").replace(/^\/+|\/+$/g, "");
+}
+
+/** File endings that mark a project as holding Python — gates the interpreter
+ *  picker, mirroring the pill's `PYTHON_ENDINGS`. */
+const PYTHON_ENDINGS = new Set([".py", ".pyw", ".pyi"]);
+
+function readStringList(project: ProjectJson | null, key: string): string[] {
+  const raw = project?.[key];
+  if (!Array.isArray(raw)) return [];
+  return raw.filter((item): item is string => typeof item === "string");
+}
+
+function mergeEndings(...groups: string[][]): string[] {
+  const endings = new Map<string, string>();
+  for (const group of groups) {
+    for (const ending of group) {
+      const trimmed = ending.trim();
+      if (!trimmed) continue;
+      endings.set(trimmed.toLowerCase(), trimmed);
+    }
+  }
+  return [...endings.values()].sort((a, b) => a.localeCompare(b));
+}
+
+export interface ProjectFileFilters {
+  hiddenEndings: string[];
+  hiddenPaths: string[];
+  shownPaths: string[];
+  availableEndings: string[];
+  /** Folders the user excluded from recursive scans (see `toggleScanExcluded`). */
+  scanExcluded: string[];
+  error: string | null;
+  toggleHiddenEnding: (ending: string, checked: boolean) => void;
+  /**
+   * Exclude/include a folder from every recursive scan: the size walk
+   * (`dir_size`/`dir_size_breakdown`) and the file-churn watcher
+   * (`services::usage_stats`), which both read this same list.
+   *
+   * Deliberately NOT the same list as `hiddenPaths`. "I don't want to look at
+   * this" and "never traverse this" are different intents — a folder can be
+   * hidden but still worth weighing, and one that is excluded stays visible so
+   * the exclusion is discoverable and reversible from the row it applies to.
+   */
+  toggleScanExcluded: (relPath: string, excluded: boolean) => void;
+}
+
+/**
+ * Load a project's tree-hiding lists from its `project.json`, and save endings
+ * back to it. `remoteBlocked` suppresses the ending SCAN only: it walks the
+ * project dir over SFTP for a remote project and would freeze the main thread
+ * while the pool is down — `load_project` reads the local file and is always safe.
+ */
+export function useProjectFileFilters(opts: {
+  localFile?: string;
+  projectDir: string;
+  remoteBlocked: boolean;
+}): ProjectFileFilters {
+  const { localFile, projectDir, remoteBlocked } = opts;
+  const [project, setProject] = useState<ProjectJson | null>(null);
+  const [hiddenEndings, setHiddenEndings] = useState<string[]>([]);
+  const [availableEndings, setAvailableEndings] = useState<string[]>([]);
+  const [hiddenPaths, setHiddenPaths] = useState<string[]>([]);
+  const [shownPaths, setShownPaths] = useState<string[]>([]);
+  const [scanExcluded, setScanExcluded] = useState<string[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setError(null);
+    if (!localFile || !projectDir) {
+      setProject(null);
+      setHiddenEndings([]);
+      setAvailableEndings([]);
+      setHiddenPaths([]);
+      setShownPaths([]);
+      setScanExcluded([]);
+      return;
+    }
+    Promise.all([
+      invoke<ProjectJson>("load_project", { localFile }),
+      remoteBlocked
+        ? Promise.resolve<string[]>([])
+        : invoke<string[]>("list_project_endings", { projectDir }).catch(() => []),
+    ])
+      .then(([loaded, endings]) => {
+        const savedHiddenEndings = readStringList(loaded, PANEL_HIDDEN_ENDINGS_KEY);
+        setProject(loaded);
+        setHiddenEndings(savedHiddenEndings);
+        setAvailableEndings(mergeEndings(endings, savedHiddenEndings));
+        setHiddenPaths(readStringList(loaded, PANEL_HIDDEN_PATHS_KEY));
+        setShownPaths(readStringList(loaded, PANEL_SHOWN_PATHS_KEY));
+        setScanExcluded(readStringList(loaded, SCAN_EXCLUDED_PATHS_KEY).map(normalizeScanPath).filter(Boolean));
+      })
+      .catch((e) => {
+        setProject(null);
+        setHiddenEndings([]);
+        setAvailableEndings([]);
+        setHiddenPaths([]);
+        setShownPaths([]);
+        setScanExcluded([]);
+        setError(String(e));
+      });
+  }, [localFile, projectDir, remoteBlocked]);
+
+  const saveHiddenEndings = async (nextEndings: string[]) => {
+    if (!localFile || !project) return;
+    const nextProject = {
+      ...project,
+      [PANEL_HIDDEN_ENDINGS_KEY]: nextEndings,
+      [PANEL_HIDDEN_PATHS_KEY]: hiddenPaths,
+      [PANEL_SHOWN_PATHS_KEY]: shownPaths,
+    };
+    setHiddenEndings(nextEndings);
+    setProject(nextProject);
+    setError(null);
+    try {
+      await invoke("save_project", { localFile, project: nextProject });
+    } catch (e) {
+      setError(String(e));
+    }
+  };
+
+  const toggleHiddenEnding = (ending: string, checked: boolean) => {
+    const existing = new Set(hiddenEndings.map((item) => item.toLowerCase()));
+    const nextEndings = checked
+      ? existing.has(ending.toLowerCase())
+        ? hiddenEndings
+        : [...hiddenEndings, ending]
+      : hiddenEndings.filter((item) => item.toLowerCase() !== ending.toLowerCase());
+    void saveHiddenEndings(nextEndings);
+  };
+
+  const toggleScanExcluded = (relPath: string, excluded: boolean) => {
+    const rel = normalizeScanPath(relPath);
+    if (!rel || !localFile || !project) return;
+    const next = excluded
+      ? scanExcluded.includes(rel)
+        ? scanExcluded
+        : [...scanExcluded, rel]
+      : scanExcluded.filter((item) => normalizeScanPath(item) !== rel);
+    // Optimistic: the tree re-requests sizes off this list, and a failed write
+    // surfaces in `error` — the alternative (await, then update) leaves the row
+    // showing a size the user just asked us to stop computing.
+    setScanExcluded(next);
+    const nextProject = { ...project, [SCAN_EXCLUDED_PATHS_KEY]: next };
+    setProject(nextProject);
+    setError(null);
+    invoke("save_project", { localFile, project: nextProject }).catch((e) => setError(String(e)));
+  };
+
+  return {
+    hiddenEndings,
+    hiddenPaths,
+    shownPaths,
+    availableEndings,
+    scanExcluded,
+    error,
+    toggleHiddenEnding,
+    toggleScanExcluded,
+  };
+}
+
+/** Project Settings: which file endings the tree hides, plus the (global)
+ *  native-viewer preferences. Portaled, so it opens the same from the panel's
+ *  gear and the Files (Project) tab's. */
+export function ProjectFilesSettingsDialog({
+  localFile,
+  project,
+  filters,
+  onClose,
+}: {
+  localFile: string;
+  /** The project this gear belongs to — used to offer the Python interpreter
+   *  picker (the same one the project pill opens). Null in root/box scope. */
+  project: ProjectEntry | null;
+  filters: ProjectFileFilters;
+  onClose: () => void;
+}) {
+  const settings = useSettingsStore((s) => s.settings);
+  const updateSettings = useSettingsStore((s) => s.updateSettings);
+  const { availableEndings, hiddenEndings, error, toggleHiddenEnding } = filters;
+  const [showPython, setShowPython] = useState(false);
+
+  // Offer the Python interpreter picker on the same terms the pill does: the
+  // project holds Python files (a probed ending), or it's remote (probed on the
+  // host, which may hold Python the local mirror doesn't).
+  const hasPython =
+    !!project &&
+    (!!project.remote ||
+      availableEndings.some((e) => PYTHON_ENDINGS.has(e.toLowerCase())));
+
+  return createPortal(
+    <div className="modal-backdrop how-to-start-backdrop" onMouseDown={onClose}>
+      <div className="settings-dialog project-settings-dialog" onMouseDown={(e) => e.stopPropagation()}>
+        <div className="settings-title-row">
+          <h2>Project Settings</h2>
+          <button type="button" className="dialog-close-btn" onClick={onClose}>×</button>
+        </div>
+
+        <div className="settings-section-title">File Hiding</div>
+        <p className="settings-help">
+          Click an ending to hide matching files in the project file views. Dimmed endings are hidden.
+        </p>
+        {availableEndings.length === 0 ? (
+          <div className="settings-empty">No file endings found in this project.</div>
+        ) : (
+          <div className="settings-list project-ending-list">
+            {availableEndings.map((ending) => {
+              const checked = hiddenEndings.some((item) => item.toLowerCase() === ending.toLowerCase());
+              return (
+                <button
+                  type="button"
+                  className={`project-ending-toggle${checked ? " is-hidden" : ""}`}
+                  key={ending}
+                  aria-pressed={checked}
+                  onClick={() => toggleHiddenEnding(ending, !checked)}
+                  title={checked ? `Show ${ending} files` : `Hide ${ending} files`}
+                >
+                  {ending}
+                </button>
+              );
+            })}
+          </div>
+        )}
+        {error && <div className="settings-error">{error}</div>}
+
+        {hasPython && project && (
+          <>
+            <div className="settings-section-title">Python</div>
+            <p className="settings-help">
+              Which interpreter the code viewer's Run and Debug buttons use.
+              Auto-detect by default; pin a venv or other environment when
+              Eldrun can't infer it.
+            </p>
+            <button
+              className="tab-add-btn"
+              style={{ fontSize: 11, padding: "2px 8px" }}
+              onClick={() => setShowPython(true)}
+            >
+              {project.python_interpreter ? "✓ " : ""}Python interpreter…
+            </button>
+          </>
+        )}
+
+        {/* #48 per-file-type native-viewer settings (global, not per-project).
+            Toggles opt-in local autocomplete (#45) per type, plus the global
+            autosave (#47). */}
+        <div className="settings-section-title">Native Viewers</div>
+        <p className="settings-help">
+          Eldrun renders these file types in-app. Disable a type to open its
+          files in your external default app instead. Autocomplete is
+          local-only (Ollama) and opt-in.
+        </p>
+        <label className="viewer-pref-toggle" style={{ marginBottom: 6 }}>
+          <Toggle
+            size="sm"
+            checked={settings?.autosave !== false}
+            onChange={(e) => void updateSettings({ autosave: e.target.checked })}
+          />
+          <span>Autosave edits</span>
+        </label>
+        <label className="viewer-pref-toggle" style={{ marginBottom: 6 }}>
+          <Toggle
+            size="sm"
+            checked={settings?.change_tint !== false}
+            onChange={(e) => void updateSettings({ change_tint: e.target.checked })}
+          />
+          <span>Highlight recent edits (new→old colour trail)</span>
+        </label>
+        <div className="viewer-prefs-list">
+          {VIEWER_PREF_TYPES.map((t) => {
+            const pref: ViewerPref = settings?.viewer_prefs?.[t.id] ?? {};
+            const enabled = pref.enabled !== false;
+            const patch = (next: ViewerPref) =>
+              void updateSettings({
+                viewer_prefs: {
+                  ...(settings?.viewer_prefs ?? {}),
+                  [t.id]: { ...pref, ...next },
+                },
+              });
+            return (
+              <div className="viewer-pref-row" key={t.id}>
+                <span className="viewer-pref-name">{t.label}</span>
+                <span className="viewer-pref-exts">{t.extensions.join(" ")}</span>
+                <label className="viewer-pref-toggle">
+                  <Toggle
+                    size="sm"
+                    checked={enabled}
+                    onChange={(e) => patch({ enabled: e.target.checked })}
+                  />
+                  <span>Enabled</span>
+                </label>
+                {t.autocomplete && (
+                  <>
+                    <label className="viewer-pref-toggle">
+                      <Toggle
+                        size="sm"
+                        checked={pref.autocomplete === true}
+                        disabled={!enabled}
+                        onChange={(e) => patch({ autocomplete: e.target.checked })}
+                      />
+                      <span>Autocomplete</span>
+                    </label>
+                    {/* #45 default completion-length mode; toggled live
+                        in-editor with Shift+Tab while a suggestion shows. */}
+                    <Dropdown
+                      className="viewer-pref-mode"
+                      value={pref.autocomplete_mode ?? "sentence"}
+                      disabled={!enabled || pref.autocomplete !== true}
+                      title="Default completion length (toggle live with Shift+Tab)"
+                      onChange={(v) =>
+                        patch({ autocomplete_mode: v as ViewerPref["autocomplete_mode"] })
+                      }
+                      options={[
+                        { value: "sentence", label: "Sentence" },
+                        { value: "block", label: "Block" },
+                        { value: "scope", label: "Scope" },
+                      ]}
+                    />
+                    {/* Local-model grammar/spelling check — underlines typos
+                        (red), grammar (blue), style (green) in the editor. */}
+                    <label className="viewer-pref-toggle">
+                      <Toggle
+                        size="sm"
+                        checked={pref.grammar_check === true}
+                        disabled={!enabled}
+                        onChange={(e) => patch({ grammar_check: e.target.checked })}
+                      />
+                      <span>Grammar</span>
+                    </label>
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+
+        {settings?.debug && (
+          <>
+            <div className="settings-section-title">Debug</div>
+            <button
+              className="tab-add-btn"
+              style={{ fontSize: 11, padding: "2px 8px", width: "100%", color: "var(--danger, #f85149)" }}
+              onClick={() => {
+                invoke("clear_project_session", { localFile }).then(() => {
+                  window.location.reload();
+                }).catch(console.error);
+              }}
+            >
+              Clear session storage
+            </button>
+          </>
+        )}
+      </div>
+
+      {showPython && project && (
+        <PythonInterpreterWindow project={project} onClose={() => setShowPython(false)} />
+      )}
+    </div>,
+    document.body,
+  );
+}
diff --git a/src/components/files/ProjectFilesTab.tsx b/src/components/files/ProjectFilesTab.tsx
new file mode 100644
index 0000000..78f1c20
--- /dev/null
+++ b/src/components/files/ProjectFilesTab.tsx
@@ -0,0 +1,122 @@
+import { useEffect, useState } from "react";
+import { ProjectFilesView } from "./ProjectFilesView";
+import { useIndependentFileSource } from "./ProjectFilesPane";
+import { useProjectsStore } from "../../stores/projects";
+import { PROJECT_FILES_TAB_CMD, useTabsStore } from "../../stores/tabs";
+import { resolveProjectDirectory } from "../../types";
+
+/**
+ * Open a Files (Project) tab on a folder — what the file tree's "Open in a new
+ * tab" does, from the right panel and from another Files (Project) tab alike.
+ * The tab lands in the store's current scope, i.e. the project the tree belongs
+ * to. Always labelled "Files (Project)" so it reads as this tab kind (not the
+ * plain "Files" explorer) at a glance; the browsed folder shows in the tab's
+ * own header instead (see `ProjectFilesView`'s header).
+ */
+export function openProjectFilesTab(cwd: string, folder: string) {
+  useTabsStore.getState().addTab({
+    label: "Files (Project)",
+    cmd: PROJECT_FILES_TAB_CMD,
+    args: [],
+    env: {},
+    cwd,
+    kind: "projectfiles",
+    folder,
+  });
+}
+
+/**
+ * The "Files (Project)" tab: the right panel's file viewer, hosted in a tab.
+ * Everything visible — the view switcher, git bar + history, search, apps,
+ * orange list, tree, drag-and-drop, sync overlay, type tags, source switch and
+ * settings — comes from the shared `ProjectFilesView`, the same component
+ * `RightPanel` renders, so the tab can never drift from the panel. This host
+ * owns only what must differ: it resolves the project from its own `scope`
+ * (rather than the active project) and keeps the browsed folder on the *tab*
+ * (`TabEntry.folder`, persisted), which is what makes "Open in a new tab" on a
+ * folder mean anything after a restart. It passes none of the panel-only window
+ * chrome (pin, resize border, hidden-subwindows) — a tab has none.
+ */
+interface Props {
+  /** The tab's scope: a project id, a `box:<id>` scope, or "root". */
+  scope: string;
+  /** The tab's cwd — the tree root when the scope has no project (root scope). */
+  cwd: string;
+  /** This tab's key, so its browsed folder persists onto the tab. */
+  tabKey?: string;
+  /** The folder the tab was opened on / last left at. */
+  folder?: string;
+  /** Override where a folder change is persisted. The docked subwindow viewer
+   *  passes this to route the browsed folder onto its group NODE
+   *  (`GroupNode.filesFolder`) instead of a tab; when omitted, a folder change
+   *  persists onto `tabKey`'s `TabEntry.folder` as before. */
+  persistFolder?: (folder: string) => void;
+  /** Whether this window owns the tab store (the main window does; a popout runs
+   *  on a streamed copy). Gates the tree's "Open in a new tab" action. */
+  canOpenTabs?: boolean;
+  /** Whether this tab is the visible one in its group. Gates the git/windows
+   *  probes so a background tab doesn't churn — its tree stays mounted regardless. */
+  visible?: boolean;
+  /** Compact mode: strip the header + view-switcher toolbar + sync/sort rows so
+   *  the find-files search is topmost. Set by the docked subwindow viewer only. */
+  compact?: boolean;
+}
+
+export function ProjectFilesTab({
+  scope,
+  cwd,
+  tabKey,
+  folder: initialFolder,
+  canOpenTabs,
+  visible,
+  compact,
+  persistFolder,
+}: Props) {
+  const projects = useProjectsStore((s) => s.projects);
+  const project = projects.find((p) => p.id === scope) ?? null;
+  const projectDir = project ? resolveProjectDirectory(project) : cwd;
+
+  const [folder, setFolder] = useState(initialFolder ?? "");
+  const [source, setSource] = useIndependentFileSource(project?.id ?? null, !!project?.remote);
+
+  // Re-seed when the persisted folder changes out from under us — a restart
+  // restore or a popout's streamed `files` edit hands a new browsed folder that
+  // must win over local state. In steady state the persisted value tracks
+  // `folder`, so this is a no-op except on those external updates.
+  useEffect(() => {
+    setFolder(initialFolder ?? "");
+  }, [initialFolder]);
+
+  const onFolderChange = (next: string) => {
+    setFolder(next);
+    // Persist so it reopens where it was left (debounced by the store's own
+    // saveLayout): the docked viewer routes onto its group node (persistFolder),
+    // a tab onto its own TabEntry.folder.
+    if (persistFolder) persistFolder(next);
+    else if (tabKey) useTabsStore.getState().setTabFolder(tabKey, next);
+  };
+
+  if (!projectDir) {
+    return <div className="file-tree-empty">No project selected</div>;
+  }
+
+  return (
+    <ProjectFilesView
+      scope={scope}
+      projectId={project?.id ?? null}
+      project={project}
+      projectDir={projectDir}
+      folder={folder}
+      onFolderChange={onFolderChange}
+      source={source}
+      setSource={setSource}
+      // The tab keeps its tree (and fs-watch) mounted even in the background, but
+      // must not run git/windows probes off-screen.
+      active={visible ?? true}
+      mountTree
+      onOpenFolderTab={canOpenTabs ? (rel) => openProjectFilesTab(projectDir, rel) : undefined}
+      containerClassName="project-files-tab"
+      compact={compact}
+    />
+  );
+}
diff --git a/src/components/files/ProjectFilesView.tsx b/src/components/files/ProjectFilesView.tsx
new file mode 100644
index 0000000..aabef9b
--- /dev/null
+++ b/src/components/files/ProjectFilesView.tsx
@@ -0,0 +1,1446 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { invoke } from "@tauri-apps/api/core";
+import { GitHistory } from "./GitHistory";
+import { GitChangeTree, type ChangeScope } from "./GitChangeTree";
+import { SearchPanel } from "./SearchPanel";
+import {
+  FileSourceSwitch,
+  ProjectFilesPane,
+  useBoxRoots,
+  useRemoteBlocked,
+} from "./ProjectFilesPane";
+import { RunHostPicker } from "../tabs/TabLocalityBadges";
+import { runHostPickerApplies } from "../../stores/runHostPref";
+import { ProjectFilesSettingsDialog, useProjectFileFilters } from "./ProjectFilesSettings";
+import { useImportDrop } from "./importDrop";
+import { logoutRemote } from "../../stores/projects";
+import { useSyncStore, amberPaths } from "../../stores/sync";
+import { openLinkedFile } from "../embed/FileViewerPane";
+import { useWindowsStore } from "../../stores/windows";
+import { useGitDirtyStore, gitDirtyState } from "../../stores/gitDirty";
+import { resolveLocalMirror, type ProjectEntry } from "../../types";
+import type { SortKey } from "../../lib/viewers/fileUtils";
+import { basename, dirname } from "../../lib/paths";
+import { projectTypeTags } from "../projects/projectTypeTags";
+import { ProjectHoverCard, useProjectHoverCard } from "../projects/ProjectHoverCard";
+import { useRemoteMachinesStore } from "../../stores/remoteMachines";
+import { UntestedTag } from "../common/UntestedTag";
+import { useTabsStore, type TabEntry } from "../../stores/tabs";
+import { persistentSessionOf } from "../../lib/closeRemoteTab";
+import { useRemoteStatusStore, sshOf } from "../../stores/remoteStatus";
+import {
+  slurmAvailable,
+  slurmQueue,
+  slurmCancel,
+  slurmJobOut,
+  openLogTab,
+  type SlurmJob,
+} from "../../lib/slurm";
+import { useHpcJobsStore } from "../../stores/hpcJobs";
+
+/** One host tmux session (TODO #85), mirroring the backend `TmuxSession`. */
+interface TmuxSession {
+  name: string;
+  windows: number;
+  /** Creation time, seconds since the Unix epoch (host clock). */
+  created: number;
+  attached: boolean;
+}
+
+/** A session row in the (multi-host) Sessions view: the session plus which host
+ *  it runs on (the primary or a worker). */
+interface SessionRow {
+  hostId: string;
+  hostLabel: string;
+  session: TmuxSession;
+}
+
+/** Coarse "created N ago" for a Unix-epoch-seconds timestamp. The host clock may
+ *  differ slightly from the local one; a near-now or future value reads "just now"
+ *  rather than a negative age. */
+function relativeAge(epochSecs: number): string {
+  const secs = Math.max(0, Math.floor(Date.now() / 1000) - epochSecs);
+  if (secs < 60) return "just now";
+  const mins = Math.floor(secs / 60);
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h ago`;
+  return `${Math.floor(hrs / 24)}d ago`;
+}
+
+interface GitStatus {
+  staged: number;
+  unstaged: number;
+  untracked: number;
+  has_remote: boolean;
+  is_repo: boolean;
+}
+
+type View = "files" | "windows" | "git" | "search" | "orange" | "sessions" | "jobs";
+
+// A single shared empty array for scopes with no registered tabs. Must be a
+// stable reference — a Zustand selector that returned a fresh `[]` here would
+// make `useSyncExternalStore` see a new snapshot every render and loop forever.
+const EMPTY_SCOPE_TABS: TabEntry[] = [];
+
+/**
+ * The shared file view rendered by BOTH the right panel (`RightPanel`) and the
+ * Files (Project) tab (`ProjectFilesTab`) — the view switcher (Files / Git /
+ * Search / Apps / Orange), the inline git action bar, the git history, search,
+ * the tracked-windows list, the diverged (orange) list, the type tags, hover
+ * card and SSH logout, plus the settings dialog. One component, so the panel and
+ * the tab can never drift into two different file *viewers* of the same project
+ * — exactly as `ProjectFilesPane` already unifies the tree itself.
+ *
+ * What each host still owns is what must differ: identity (the panel keys off the
+ * active project, a tab off its own scope), the browsed folder (the panel's lives
+ * in the projects store, a tab's on its `TabEntry`), where the Remote/Local
+ * switch's `useFileSource` hook lives, and the panel-only window chrome (pin,
+ * resize border, the "Hidden subwindows" list) which comes in through the
+ * `resizeHandle` / `pin` / `hidden` ReactNode slots — meaningless in a tab, so a
+ * tab simply passes none.
+ */
+export interface ProjectFilesViewProps {
+  /** The scope: a project id, a `box:<id>` scope, or "root". */
+  scope: string;
+  /** The project's id (was `activeId` in the panel); null in root scope. */
+  projectId: string | null;
+  /** The project (was `activeProject`); null in root/box scope. */
+  project: ProjectEntry | null;
+  /** The tree root. */
+  projectDir: string;
+
+  /** The browsed folder (host-owned so two views of one project don't yank each
+   *  other around). */
+  folder: string;
+  onFolderChange: (folder: string) => void;
+
+  /** Which side of a remote project the files view shows — the host over SFTP
+   *  ("Remote") or the synced mirror ("Local"). The host owns `useFileSource`. */
+  source: "remote" | "local";
+  setSource: (s: "remote" | "local") => void;
+
+  /** Whether this view is live/visible. Gates git + windows probes and the pill
+   *  dirty-dot write, so a closed panel / background tab never churns them. */
+  active: boolean;
+  /** Whether the tree (and its fs-watch) is mounted. Forwarded to
+   *  `ProjectFilesPane`. */
+  mountTree: boolean;
+
+  /** Compact mode: strip everything above the tree's find-files search box — the
+   *  project-name header, the view-switcher toolbar (Files/Git/Search/Apps/±),
+   *  and the sync + sort rows (`ProjectFilesPane`) — so the search is topmost.
+   *  Set only by the docked subwindow viewer (`SubwindowFilesSidebar`); the right
+   *  panel and the Files (Project) tab leave it unset and keep the full chrome. */
+  compact?: boolean;
+
+  /** Host callback for the tree's "Open in a new tab"; omitted where a tab can't
+   *  be owned (a box root, a popout on a streamed tab copy). */
+  onOpenFolderTab?: (relPath: string) => void;
+
+  /** The host controls the outer container's own identity (slide-in panel vs.
+   *  flex tab, width, resize transitions, hover-reveal handlers); this component
+   *  appends the drop classes and spreads the import-drop handlers onto it. */
+  containerClassName: string;
+  containerStyle?: React.CSSProperties;
+  containerProps?: React.HTMLAttributes<HTMLDivElement>;
+
+  /** Panel-only fragments interleaved with the shared DOM (undefined in a tab). */
+  resizeHandle?: React.ReactNode;
+  pin?: React.ReactNode;
+  hidden?: React.ReactNode;
+}
+
+export function ProjectFilesView({
+  scope,
+  projectId,
+  project,
+  projectDir,
+  folder,
+  onFolderChange,
+  source,
+  setSource,
+  active,
+  mountTree,
+  onOpenFolderTab,
+  containerClassName,
+  containerStyle,
+  containerProps,
+  resizeHandle,
+  pin,
+  hidden,
+  compact,
+}: ProjectFilesViewProps) {
+  const { windows, refresh, untrack } = useWindowsStore();
+  const [view, setView] = useState<View>("files");
+  const [showSettings, setShowSettings] = useState(false);
+  // Toggles the Downloads section stacked below the file tree (fast-copy of
+  // recent downloads into the project). Toolbar ⬇⬇ button; files view only.
+  const [showDownloads, setShowDownloads] = useState(false);
+  // Kept here (not in the pane): the pane unmounts while the view shows Git or
+  // Search, and the chosen sort must survive the trip back to Files.
+  const [sortKey, setSortKey] = useState<SortKey>("name");
+  const [descending, setDescending] = useState(false);
+
+  const [gitStatus, setGitStatus] = useState<GitStatus | null>(null);
+  const [unpushedCommits, setUnpushedCommits] = useState<string[]>([]);
+  const [openTree, setOpenTree] = useState<"add" | "commit" | "push" | null>(null);
+  const [commitMsg, setCommitMsg] = useState<string | null>(null);
+  const [gitBusy, setGitBusy] = useState(false);
+  const [gitError, setGitError] = useState<string | null>(null);
+  // Whether the project is missing scaffold files — drives the "no scaffold"
+  // type tag shown beside its name, mirroring ProjectPill's hover tags.
+  const [scaffoldMissing, setScaffoldMissing] = useState(false);
+  // Nested-repo detection: when the browsed folder lives in a git repo distinct
+  // from the project's own repo, `nestedRoot` holds that repo's root and the git
+  // section re-roots at it. `preferProjectRepo` is the manual toggle override
+  // back to the project repo.
+  const [nestedRoot, setNestedRoot] = useState<string | null>(null);
+  const [preferProjectRepo, setPreferProjectRepo] = useState(false);
+  const commitRef = useRef<HTMLTextAreaElement>(null);
+  const actionBarRef = useRef<HTMLDivElement>(null);
+  const refreshGitTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const localFile = project?.local_file;
+  // Remote git/endings probes dispatch over SSH/SFTP via SYNCHRONOUS Tauri
+  // commands (run on the main thread). Calling them while the pool is down blocks
+  // on the dead session and freezes the window, so suppress them until the remote
+  // project is connected. Local projects are never blocked.
+  const { remoteSshState, remoteBlocked } = useRemoteBlocked(projectId, !!project?.remote);
+  // Which endings/paths the tree hides, from the project's own project.json —
+  // shared with the right panel, so both views hide the same files.
+  const filters = useProjectFileFilters({ localFile, projectDir, remoteBlocked });
+
+  // Run both git probes concurrently (Eff #9): they hit independent
+  // subprocesses, so `Promise.all` collapses two serially-awaited chains into
+  // one round of parallel work. Each result still applies independently.
+  const runRefreshGit = (dir: string) => {
+    void Promise.all([
+      invoke<GitStatus>("git_status", { projectDir: dir }).catch(() => null),
+      invoke<string[]>("git_unpushed_commits", { projectDir: dir }).catch(() => [] as string[]),
+    ]).then(([status, unpushed]) => {
+      setGitStatus(status);
+      setUnpushedCommits(unpushed);
+      // Keep the project's pill dot in sync from the data we just fetched (no
+      // extra git subprocesses), so edits/commits/pushes reflect immediately
+      // instead of waiting for the switcher's periodic poll.
+      // Don't let a nested repo's status pollute the project pill's dirty dot —
+      // that dot tracks the project repo (the switcher's poll recomputes it).
+      // Gate on `active` so a background tab never churns the shared store.
+      if (active && projectId && status && !onNestedRepo) {
+        useGitDirtyStore.getState().set(projectId, gitDirtyState(status, unpushed.length));
+      }
+    });
+  };
+
+  // Debounced entry point (Eff #9): bursts of git-affecting actions (add →
+  // commit → push, or rapid fs changes) coalesce into a single refresh instead
+  // of spawning a fresh trio of subprocesses per call.
+  const refreshGit = (dir: string) => {
+    if (refreshGitTimer.current) clearTimeout(refreshGitTimer.current);
+    refreshGitTimer.current = setTimeout(() => {
+      refreshGitTimer.current = null;
+      runRefreshGit(dir);
+    }, 120);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (refreshGitTimer.current) clearTimeout(refreshGitTimer.current);
+    };
+  }, []);
+
+  // The change tree is click-opened and persistent; close it on Escape or a
+  // click anywhere outside the action bar (which contains both the toggles and
+  // the tree itself).
+  useEffect(() => {
+    if (!openTree) return;
+    const onDown = (e: MouseEvent) => {
+      if (!actionBarRef.current?.contains(e.target as Node)) setOpenTree(null);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpenTree(null);
+    };
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [openTree]);
+
+  const treeScope: ChangeScope | null =
+    openTree === "add" ? "unstaged" : openTree === "commit" ? "staged" : openTree === "push" ? "unpushed" : null;
+
+  // Detect a nested git repo: if the folder currently browsed in the file tree
+  // lives inside a git repo distinct from the project's own repo, re-root the
+  // git section at it (auto-switch). Local projects only — the backend returns
+  // null for remote ones, so `nestedRoot` stays null and behavior is unchanged.
+  useEffect(() => {
+    if (!projectDir || project?.remote) {
+      setNestedRoot(null);
+      return;
+    }
+    let cancelled = false;
+    void Promise.all([
+      invoke<string | null>("git_repo_root", { projectDir, relPath: "" }).catch(() => null),
+      invoke<string | null>("git_repo_root", { projectDir, relPath: folder }).catch(() => null),
+    ]).then(([projRoot, folderRoot]) => {
+      if (cancelled) return;
+      const norm = (p: string | null) => (p ? p.replace(/[/\\]+$/, "") : null);
+      const pr = norm(projRoot);
+      const fr = norm(folderRoot);
+      setNestedRoot(fr && fr !== pr ? fr : null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [projectDir, folder, project?.remote]);
+
+  // Default to auto-switch: reset the manual override on a project switch or
+  // whenever we leave the nested repo, so entering one always shows it first.
+  useEffect(() => {
+    setPreferProjectRepo(false);
+  }, [projectId]);
+  useEffect(() => {
+    if (!nestedRoot) setPreferProjectRepo(false);
+  }, [nestedRoot]);
+
+  // The repo root the whole git section (status, commit, push, history) operates
+  // on: the nested repo when detected and not overridden, else the project repo.
+  const effectiveGitRoot = nestedRoot && !preferProjectRepo ? nestedRoot : projectDir;
+  const onNestedRepo = !!nestedRoot && effectiveGitRoot !== projectDir;
+
+  // Diverged (amber/orange) files for a remote project, from the cached sync
+  // status — backs the toolbar count badge and the "Orange" list view. These are
+  // exactly the files auto-sync refuses to touch (both sides changed), so they
+  // need a human to pick a side.
+  const syncMap = useSyncStore((s) => (projectId ? s.byProject[projectId] : undefined));
+  const orangeFiles = useMemo(() => amberPaths(syncMap), [syncMap]);
+  // The local mirror root, to open an amber file's mirror copy for inspection.
+  const mirrorRoot = resolveLocalMirror(project) ?? (projectDir ? `${projectDir}/mirror` : null);
+
+  // Persistent (tmux) sessions on the project's hosts (TODO #85): a session
+  // outlives the tab that started it, so a host can hold runs no open tab points at
+  // (a crashed/relaunched Eldrun, another machine, a hand-started `tmux`). This list
+  // makes them discoverable and reattachable — the primary UI surface for the
+  // feature. **Multi-host**: aggregated across the primary AND every connected
+  // worker, each row tagged with its host; polled while this view is active (rides
+  // each host's pooled ControlMaster). An absent tmux / no server yields nothing.
+  const sessionHosts = useMemo(() => {
+    if (!project?.remote) return [] as { id: string; label: string }[];
+    const list = [{ id: "primary", label: project.remote.host }];
+    for (const w of project.compute_hosts ?? [])
+      list.push({ id: w.id, label: w.label || w.host || w.id });
+    return list;
+  }, [project?.remote, project?.compute_hosts]);
+  // A connectivity signature so the poll re-runs the moment a host connects.
+  const connSig = useRemoteStatusStore((s) =>
+    sessionHosts.map((h) => `${h.id}:${sshOf(s, projectId ?? "", h.id)}`).join("|"),
+  );
+  const [sessionRows, setSessionRows] = useState<SessionRow[]>([]);
+  useEffect(() => {
+    if (!active || !projectId || !project?.remote) {
+      setSessionRows([]);
+      return;
+    }
+    let cancelled = false;
+    const poll = async () => {
+      const st = useRemoteStatusStore.getState();
+      const connected = sessionHosts.filter((h) => sshOf(st, projectId, h.id) === "connected");
+      if (connected.length === 0) {
+        if (!cancelled) setSessionRows([]);
+        return;
+      }
+      const lists = await Promise.all(
+        connected.map((h) =>
+          invoke<TmuxSession[]>("remote_tmux_list", { projectId, hostId: h.id })
+            .then((ss) => ss.map((session) => ({ hostId: h.id, hostLabel: h.label, session })))
+            .catch(() => [] as SessionRow[]),
+        ),
+      );
+      if (!cancelled) setSessionRows(lists.flat());
+    };
+    void poll();
+    const iv = setInterval(() => void poll(), 7000);
+    return () => {
+      cancelled = true;
+      clearInterval(iv);
+    };
+  }, [active, projectId, project?.remote, connSig, sessionHosts]);
+
+  // The (host, session) each open shell tab of this scope owns, so a Sessions row
+  // can reveal the tab that runs it instead of opening a second attach.
+  // Coalesce to the shared empty array OUTSIDE the selector: a selector that
+  // returns a fresh `[]` when this scope has no tabs yields a new snapshot on
+  // every render, which makes `useSyncExternalStore` loop forever ("getSnapshot
+  // should be cached" → Maximum update depth). Returning the stored array (stable)
+  // or `undefined` (stable) from the selector, then defaulting here, is loop-safe.
+  const scopeTabs = useTabsStore((s) => s.tabsByScope[scope]) ?? EMPTY_SCOPE_TABS;
+  const sessionOwners = useMemo(() => {
+    const m = new Map<string, string>(); // `${hostId}\0${name}` → owning tab key
+    for (const t of scopeTabs) {
+      const info = persistentSessionOf(scope, t);
+      if (info) m.set(`${info.hostId} ${info.session}`, t.key);
+    }
+    return m;
+  }, [scopeTabs, scope]);
+
+  // Open a host session in a tab: reveal the owning tab if one exists, else add a
+  // shell tab on THAT host that ATTACHES to the named session (idempotent; `-D`
+  // detaches any other client). The tab carries the name so it reattaches across a
+  // restart, and its locality is the row's host.
+  const openSession = (hostId: string, name: string) => {
+    if (!projectId) return;
+    const ownerKey = sessionOwners.get(`${hostId} ${name}`);
+    if (ownerKey) {
+      useTabsStore.getState().setActive(ownerKey);
+      return;
+    }
+    useTabsStore.getState().addTabToScope(projectId, {
+      label: name.startsWith("eldrun-") ? "session" : name,
+      cmd: "",
+      args: [],
+      cwd: projectDir,
+      kind: "shell",
+      location: hostId === "primary" ? "remote" : `host:${hostId}`,
+      tmuxAttach: name,
+    });
+  };
+
+  // Kill a host session (per-row, confirmed). Drops the row optimistically; the
+  // poll reconciles. Unlike a tab close (which merely detaches), a kill terminates
+  // the session, so the tab that owns it — now attached to a dead session — is
+  // closed too rather than left showing a defunct terminal.
+  const killSession = (hostId: string, name: string) => {
+    if (!projectId) return;
+    if (
+      !window.confirm(
+        `Kill the session “${name}” and any process running in it (e.g. a training run)?`,
+      )
+    )
+      return;
+    const ownerKey = sessionOwners.get(`${hostId} ${name}`);
+    invoke("remote_tmux_kill", { projectId, hostId, session: name })
+      .then(() => {
+        setSessionRows((rs) => rs.filter((r) => !(r.hostId === hostId && r.session.name === name)));
+        if (ownerKey) useTabsStore.getState().removeTab(ownerKey);
+      })
+      .catch(() => {});
+  };
+
+  // Rename a host session (per-row). The name must be tmux-safe; on success the
+  // owning tab's persisted name is updated too, so it reattaches to the renamed
+  // session after a restart (the live client stays attached — rename never drops it).
+  const renameSession = (hostId: string, oldName: string) => {
+    if (!projectId) return;
+    const proposed = window.prompt("Rename session to:", oldName);
+    if (proposed === null) return;
+    const next = proposed.trim();
+    if (!next || next === oldName) return;
+    if (!/^[A-Za-z0-9_-]+$/.test(next)) {
+      window.alert("A session name may only contain letters, digits, '-' and '_'.");
+      return;
+    }
+    invoke("remote_tmux_rename", { projectId, hostId, session: oldName, newName: next })
+      .then(() => {
+        const ownerKey = sessionOwners.get(`${hostId} ${oldName}`);
+        if (ownerKey) useTabsStore.getState().setTabTmuxName(scope, ownerKey, next);
+        setSessionRows((rs) =>
+          rs.map((r) =>
+            r.hostId === hostId && r.session.name === oldName
+              ? { ...r, session: { ...r.session, name: next } }
+              : r,
+          ),
+        );
+      })
+      .catch((e) => window.alert(`Rename failed: ${e}`));
+  };
+
+  // ── SLURM jobs (HPC) ──────────────────────────────────────────────────────
+  // A Jobs view, primary-only to start: whether the primary host has SLURM, and
+  // this user's live queue on it. Rides the primary's pooled ControlMaster; polled
+  // only while the view is active (like Sessions). A local project with SLURM (a
+  // login node) also gets it. The session store carries just-submitted jobs so a
+  // Watch can resolve their log path without a fresh scontrol.
+  const [slurmSupported, setSlurmSupported] = useState(false);
+  const [jobRows, setJobRows] = useState<SlurmJob[]>([]);
+  const sessionJobs = useHpcJobsStore((s) =>
+    projectId ? s.byProject[projectId] : undefined,
+  );
+  // Primary connectivity, so probes/polls re-run the moment it connects.
+  const primaryConn = useRemoteStatusStore((s) => sshOf(s, projectId ?? "", "primary"));
+  const primaryReady = !project?.remote || primaryConn === "connected";
+  useEffect(() => {
+    if (!active || !projectDir || !primaryReady) {
+      setSlurmSupported(false);
+      return;
+    }
+    let cancelled = false;
+    slurmAvailable(projectDir)
+      .then((info) => { if (!cancelled) setSlurmSupported(info.available); })
+      .catch(() => { if (!cancelled) setSlurmSupported(false); });
+    return () => { cancelled = true; };
+  }, [active, projectDir, primaryReady]);
+  useEffect(() => {
+    if (!active || view !== "jobs" || !slurmSupported || !projectDir) return;
+    let cancelled = false;
+    const poll = async () => {
+      try {
+        const jobs = await slurmQueue(projectDir);
+        if (!cancelled) setJobRows(jobs);
+      } catch {
+        if (!cancelled) setJobRows([]);
+      }
+    };
+    void poll();
+    const iv = setInterval(() => void poll(), 7000);
+    return () => { cancelled = true; clearInterval(iv); };
+  }, [active, view, slurmSupported, projectDir]);
+
+  // Watch a job: open a log tab tailing its stdout. Use the session store's path
+  // if we submitted it this session, else resolve via scontrol.
+  const watchJob = async (jobId: string, name: string) => {
+    if (!projectDir) return;
+    try {
+      const known = sessionJobs?.find((j) => j.jobId === jobId);
+      const outFile = known?.outFile ?? (await slurmJobOut(projectDir, jobId));
+      openLogTab({
+        scope,
+        projectDir,
+        outFile,
+        jobLabel: `${jobId} ${name}`,
+        hostId: "primary",
+        isRemote: !!project?.remote,
+      });
+    } catch (e) {
+      window.alert(`Could not resolve the log file for job ${jobId}: ${e}`);
+    }
+  };
+
+  // Cancel a job (confirmed). Drops the row optimistically; the poll reconciles.
+  const cancelJob = (jobId: string, name: string) => {
+    if (!projectDir) return;
+    if (!window.confirm(`Cancel job ${jobId}${name ? ` (${name})` : ""}?`)) return;
+    slurmCancel(projectDir, jobId)
+      .then(() => {
+        setJobRows((rs) => rs.filter((r) => r.id !== jobId));
+        if (projectId) useHpcJobsStore.getState().remove(projectId, jobId, "primary");
+      })
+      .catch((e) => window.alert(`Cancel failed: ${e}`));
+  };
+
+  // Resolve the scaffold-missing flag whenever the project changes. Failures
+  // fall back to "present" so a probe error doesn't flash the tag.
+  useEffect(() => {
+    if (!projectId) {
+      setScaffoldMissing(false);
+      return;
+    }
+    let cancelled = false;
+    invoke<boolean>("project_scaffold_missing", { projectId })
+      .then((v) => { if (!cancelled) setScaffoldMissing(v); })
+      .catch(() => { if (!cancelled) setScaffoldMissing(false); });
+    return () => { cancelled = true; };
+  }, [projectId]);
+
+  const typeTags = project ? projectTypeTags(project, scaffoldMissing) : [];
+
+  // Right-click menu on the SSH (remote) tag: open the one unified "Remote machines"
+  // hub, which connects/manages every host and adds workers
+  // (docs/multi_host_remote_plan.md).
+  const openRemoteMachines = useRemoteMachinesStore((s) => s.open);
+  const [sshTagMenu, setSshTagMenu] = useState<{ x: number; y: number } | null>(null);
+
+  // Import button's Files.../Folder... menu — same portal+backdrop pattern as
+  // the SSH tag's context menu above.
+  const [importMenu, setImportMenu] = useState<{ x: number; y: number } | null>(null);
+
+  // Same hover card as the project pill, shown when hovering the project name
+  // here — minus the type tags, which already sit beside the name below.
+  const nameHover = useProjectHoverCard(project ?? undefined);
+
+  // A box scope shows a multi-root file view (the box folder + every member
+  // project's root) instead of one project tree; the pane renders it.
+  const { activeBox } = useBoxRoots(scope);
+
+  const openInOsBrowser = () => {
+    if (!projectDir) return;
+    const sub = folder.replace(/^\/+|\/+$/g, "");
+    const path = sub ? `${projectDir.replace(/\/+$/, "")}/${sub}` : projectDir;
+    invoke("open_in_file_manager", { path }).catch((e) => console.error("open_in_file_manager", e));
+  };
+
+  // OS file drop → copy into the project, prompting on collisions. Confined to a
+  // single project (a box scope has no single destination root). The whole
+  // container is the drop zone, so a drop outside the files view lands at the
+  // project root; inside it, on the browsed folder.
+  const importDrop = useImportDrop({
+    projectDir,
+    enabled: !activeBox,
+    destRel: view === "files" ? folder : "",
+    // The tree auto-reloads via its fs-watch; refresh git so new untracked files
+    // show in the status counts immediately.
+    onImported: () => refreshGit(effectiveGitRoot),
+  });
+
+  useEffect(() => {
+    if (active && projectId) {
+      refresh(projectId);
+    }
+  }, [active, projectId]);
+
+  useEffect(() => {
+    if (active && effectiveGitRoot && !remoteBlocked) {
+      refreshGit(effectiveGitRoot);
+    } else {
+      setGitStatus(null);
+    }
+  }, [active, effectiveGitRoot, remoteBlocked]);
+
+  // The gear dialog belongs to the project it was opened on; a project switch
+  // reloads the filters under it, so close it rather than let it re-target.
+  useEffect(() => {
+    setShowSettings(false);
+  }, [localFile, projectDir]);
+
+  const handleAdd = async () => {
+    if (!effectiveGitRoot) return;
+    setGitBusy(true);
+    setGitError(null);
+    try {
+      await invoke("git_add_all", { projectDir: effectiveGitRoot });
+      refreshGit(effectiveGitRoot);
+    } catch (e) {
+      setGitError(String(e));
+    } finally {
+      setGitBusy(false);
+    }
+  };
+
+  const handleCommitOpen = async () => {
+    if (!effectiveGitRoot) return;
+    setGitBusy(true);
+    setGitError(null);
+    try {
+      const msg = await invoke<string>("git_generate_commit_message", { projectDir: effectiveGitRoot });
+      setCommitMsg(msg);
+      setTimeout(() => commitRef.current?.focus(), 50);
+    } catch (e) {
+      setGitError(String(e));
+    } finally {
+      setGitBusy(false);
+    }
+  };
+
+  const handleCommitConfirm = async () => {
+    if (!effectiveGitRoot || commitMsg === null) return;
+    setGitBusy(true);
+    setGitError(null);
+    try {
+      await invoke("git_commit", { projectDir: effectiveGitRoot, message: commitMsg });
+      setCommitMsg(null);
+      refreshGit(effectiveGitRoot);
+    } catch (e) {
+      setGitError(String(e));
+    } finally {
+      setGitBusy(false);
+    }
+  };
+
+  const handlePush = async () => {
+    if (!effectiveGitRoot) return;
+    setGitBusy(true);
+    setGitError(null);
+    try {
+      // On a nested repo, push to its own configured remote (no project id →
+      // plain `git push`), not the project's GitHub/GitLab provider flow.
+      await invoke("git_push", {
+        projectDir: effectiveGitRoot,
+        projectId: onNestedRepo ? null : projectId ?? null,
+      });
+      refreshGit(effectiveGitRoot);
+    } catch (e) {
+      setGitError(String(e));
+    } finally {
+      setGitBusy(false);
+    }
+  };
+
+  return (
+    <div
+      className={`${containerClassName}${importDrop.dropActive ? " drop-active" : ""}${importDrop.dropFlash ? " drop-flash" : ""}`}
+      style={containerStyle}
+      {...containerProps}
+      {...importDrop.handlers}
+    >
+      {resizeHandle}
+      {importDrop.conflictModal}
+      {/* Compact (docked subwindow) viewer: everything from here down to the git
+          commit block is above the tree's find-files search, so it's stripped —
+          leaving the search box topmost. The right panel / Files (Project) tab
+          render with `compact` unset and keep the full chrome. */}
+      {!compact && (
+        <>
+      <div className="right-panel-header">
+        {pin}
+        <span
+          style={{
+            flexShrink: 1,
+            minWidth: 0,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            cursor: !activeBox && project ? "default" : undefined,
+          }}
+          onMouseEnter={
+            !activeBox && project
+              ? (e) => void nameHover.open(e.currentTarget.getBoundingClientRect())
+              : undefined
+          }
+          onMouseLeave={!activeBox && project ? () => nameHover.close() : undefined}
+        >
+          {activeBox ? `▣ ${activeBox.name}` : project ? project.name : "Files"}
+        </span>
+        {!activeBox && project && (
+          <ProjectHoverCard project={project} state={nameHover} showTags={false} />
+        )}
+        {/* Static project type tags (git / provider / SSH / scaffold). These are
+            labels only — no interactivity — so they deliberately look nothing
+            like the source switch below. */}
+        {!activeBox && typeTags.length > 0 && (
+          <span className="right-panel-type-tags">
+            {typeTags.map((t) => {
+              // The SSH tag carries a right-click menu (connect / manage · remote
+              // machines); the rest stay pure labels.
+              const isSsh = t.key === "ssh" && !!project?.remote && !!projectId;
+              return (
+                <span
+                  key={t.key}
+                  className="pill-popup-tag"
+                  title={isSsh ? `${t.title}\nRight-click for connection / machines` : t.title}
+                  style={{
+                    color: t.color,
+                    borderColor: t.color,
+                    background: `${t.color}22`,
+                    cursor: isSsh ? "context-menu" : undefined,
+                  }}
+                  onContextMenu={
+                    isSsh
+                      ? (e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          setSshTagMenu({ x: e.clientX, y: e.clientY });
+                        }
+                      : undefined
+                  }
+                >
+                  {t.label}
+                </span>
+              );
+            })}
+          </span>
+        )}
+        {sshTagMenu && projectId && createPortal(
+          <>
+            <div
+              style={{ position: "fixed", inset: 0, zIndex: 200 }}
+              onPointerDown={() => setSshTagMenu(null)}
+              onContextMenu={(e) => {
+                e.preventDefault();
+                setSshTagMenu(null);
+              }}
+            />
+            <div
+              className="context-menu"
+              style={{ left: sshTagMenu.x, top: sshTagMenu.y, zIndex: 201 }}
+              onPointerDown={(e) => e.stopPropagation()}
+            >
+              <div className="context-menu-group">
+                <div className="context-menu-group-label">{project?.remote?.host ?? "Remote"}</div>
+                {/* One unified hub: connect/manage every host (primary + workers)
+                    and add a machine, all from "Remote machines…". */}
+                <button
+                  className="untested"
+                  onClick={() => {
+                    openRemoteMachines(projectId);
+                    setSshTagMenu(null);
+                  }}
+                >
+                  Remote machines…
+                  <UntestedTag />
+                </button>
+              </div>
+            </div>
+          </>,
+          document.body,
+        )}
+        {/* Remote/Local file-source switch (remote SSH projects only). A live
+            segmented control — NOT a tag — that flips the files view between the
+            host tree over SFTP ("Remote") and the synced mirror ("Local"). It's
+            right-aligned and styled as a switch so it never reads as one of the
+            static tags above. */}
+        {!activeBox && project?.remote && projectId && (
+          <>
+          {/* Breaker: drop the switch onto its own row so it left-aligns with the
+              pin/name (header padding edge) instead of trailing the tags. */}
+          <span style={{ flexBasis: "100%", width: 0, height: 0 }} />
+          <FileSourceSwitch source={source} onChange={setSource} />
+          {/* Run-host picker — which machine scripts/shells launched from this
+              project run on (primary or a worker), distinct from the source
+              switch's read side. Shown only while the switch is on Remote (no
+              machine axis on Local), and hidden once a worker keeps its own synced
+              code copy — then the run target is the tab's picked locality. */}
+          {source === "remote" && runHostPickerApplies(project.compute_hosts) && (
+            <RunHostPicker
+              projectId={projectId}
+              primaryHost={project.remote.label || project.remote.host}
+              computeHosts={project.compute_hosts}
+            />
+          )}
+          {/* One-click SSH logout, shown while connected. Lives here (not on the
+              project pill) so the pill stays status-only; the danger tint only
+              appears on hover. */}
+          {remoteSshState === "connected" && (
+            <button
+              type="button"
+              className="right-panel-conn-logout"
+              aria-label={`Log out of ${project.remote.host} — disconnect this remote project`}
+              title={`Log out of ${project.remote.host}\nDrops the SSH connection${project.remote.openvpn ? " and the VPN tunnel" : ""}. Open tabs stay, their sessions go dead until you reconnect.`}
+              onClick={() => logoutRemote(project)}
+            >
+              <span aria-hidden="true">⏻</span> Logout
+            </button>
+          )}
+          </>
+        )}
+        {/* Git status/action buttons drop to their own row below the project name
+            (forced by the flex-basis breaker) instead of crowding it. Only
+            rendered when there's something to do (or we're mid-commit) — an
+            empty strip with no actions just wastes space. */}
+        {!activeBox && gitStatus?.is_repo &&
+          (commitMsg !== null ||
+            gitStatus.unstaged + gitStatus.untracked > 0 ||
+            gitStatus.staged > 0 ||
+            unpushedCommits.length > 0) && (
+          <>
+            <span style={{ flexBasis: "100%", width: 0, height: 0 }} />
+            <div ref={actionBarRef} className="git-action-bar git-action-bar--inline" style={{ position: "relative" }}>
+            {commitMsg !== null ? (
+              <>
+                <button
+                  className="git-action-btn git-action-btn--commit"
+                  disabled={gitBusy}
+                  onClick={handleCommitConfirm}
+                  title="Confirm commit"
+                >
+                  <span data-testid="commit-bar" style={{ width: 7, height: 7, borderRadius: "50%", marginRight: 5, flexShrink: 0, background: "#e3b341" }} />
+                  <span>↵</span>
+                  <span className="git-btn-label">Confirm</span>
+                </button>
+                <button
+                  className="git-action-btn git-action-btn--back"
+                  disabled={gitBusy}
+                  onClick={() => setCommitMsg(null)}
+                  title="Go back"
+                >
+                  <span>←</span>
+                  <span className="git-btn-label">Back</span>
+                </button>
+              </>
+            ) : (
+              <>
+                {/* Each action only appears when it has work to do: Add when there
+                    are unstaged/untracked changes, Commit when something is staged,
+                    Push when commits are ahead of the remote. A clean, pushed repo
+                    shows no buttons. The caret beside each action opens a
+                    navigable folder tree of the files it touches, with line
+                    stats. */}
+                {gitStatus.unstaged + gitStatus.untracked > 0 && (
+                  <div className="git-action git-action--add">
+                    <button
+                      className="git-action-btn git-action-btn--add"
+                      disabled={gitBusy}
+                      onClick={handleAdd}
+                      title={`Stage all changes (${gitStatus.unstaged + gitStatus.untracked} unstaged)`}
+                    >
+                      <span data-testid="add-bar" style={{ width: 7, height: 7, borderRadius: "50%", marginRight: 5, flexShrink: 0, background: "#f85149" }} />
+                      <span>⊕</span>
+                      <span className="git-btn-label">Add ({gitStatus.unstaged + gitStatus.untracked})</span>
+                    </button>
+                    <button
+                      className="git-action-toggle"
+                      disabled={gitBusy}
+                      aria-label="Show changed files"
+                      aria-expanded={openTree === "add"}
+                      title="Show changed files"
+                      onClick={() => setOpenTree((t) => (t === "add" ? null : "add"))}
+                    >
+                      {openTree === "add" ? "▴" : "▾"}
+                    </button>
+                  </div>
+                )}
+                {gitStatus.staged > 0 && (
+                  <div className="git-action git-action--commit">
+                    <button
+                      className="git-action-btn git-action-btn--commit"
+                      disabled={gitBusy}
+                      onClick={handleCommitOpen}
+                      title={`Commit ${gitStatus.staged} staged`}
+                    >
+                      <span data-testid="commit-bar" style={{ width: 7, height: 7, borderRadius: "50%", marginRight: 5, flexShrink: 0, background: "#e3b341" }} />
+                      <span>✔</span>
+                      <span className="git-btn-label">Commit ({gitStatus.staged})</span>
+                    </button>
+                    <button
+                      className="git-action-toggle"
+                      disabled={gitBusy}
+                      aria-label="Show staged files"
+                      aria-expanded={openTree === "commit"}
+                      title="Show staged files"
+                      onClick={() => setOpenTree((t) => (t === "commit" ? null : "commit"))}
+                    >
+                      {openTree === "commit" ? "▴" : "▾"}
+                    </button>
+                  </div>
+                )}
+                {unpushedCommits.length > 0 && (
+                  <div className="git-action git-action--push">
+                    <button
+                      className="git-action-btn git-action-btn--push"
+                      disabled={gitBusy}
+                      onClick={handlePush}
+                      title={`Push ${unpushedCommits.length} commit${unpushedCommits.length === 1 ? "" : "s"} to remote`}
+                    >
+                      <span data-testid="push-bar" style={{ width: 7, height: 7, borderRadius: "50%", marginRight: 5, flexShrink: 0, background: "#3fb950" }} />
+                      <span>⬆</span>
+                      <span className="git-btn-label">Push ({unpushedCommits.length})</span>
+                    </button>
+                    <button
+                      className="git-action-toggle"
+                      disabled={gitBusy}
+                      aria-label="Show files in unpushed commits"
+                      aria-expanded={openTree === "push"}
+                      title="Show files in unpushed commits"
+                      onClick={() => setOpenTree((t) => (t === "push" ? null : "push"))}
+                    >
+                      {openTree === "push" ? "▴" : "▾"}
+                    </button>
+                  </div>
+                )}
+                {treeScope && projectDir && (
+                  <GitChangeTree projectDir={projectDir} scope={treeScope} />
+                )}
+              </>
+            )}
+          </div>
+          </>
+          )}
+      </div>
+
+      {hidden}
+
+      <div className="right-panel-toolbar">
+        {(["files", "git", "search", "windows"] as View[]).map((v) => (
+          <button
+            key={v}
+            className={`tab-add-btn${view === v ? " active" : ""}`}
+            style={{ fontSize: 10, padding: "1px 6px", height: 20, marginLeft: v === "files" ? 0 : 2 }}
+            aria-pressed={view === v}
+            onClick={() => setView(v)}
+          >
+            {v === "files" ? "Files" : v === "git" ? "Git" : v === "search" ? "Search" : "Apps"}
+          </button>
+        ))}
+        {/* Orange (diverged) files: a dedicated toggle for remote projects,
+            badged with the count so conflicts are visible at a glance. Auto-sync
+            never touches these, so this is where they get resolved. */}
+        {!activeBox && project?.remote && projectId && (
+          <button
+            className={`tab-add-btn right-panel-orange-btn${view === "orange" ? " active" : ""}`}
+            style={{ fontSize: 10, padding: "1px 6px", height: 20, marginLeft: 2 }}
+            aria-pressed={view === "orange"}
+            onClick={() => setView((v) => (v === "orange" ? "files" : "orange"))}
+            title={`Diverged (orange) files: ${orangeFiles.length}`}
+          >
+            ± {orangeFiles.length > 0 && <span className="right-panel-orange-count">{orangeFiles.length}</span>}
+          </button>
+        )}
+        {/* Persistent (tmux) sessions on the host (TODO #85): remote-only, badged
+            with the live session count, so a run left alive on the host is one
+            click from being reattached. */}
+        {!activeBox && project?.remote && projectId && (
+          <button
+            className={`tab-add-btn right-panel-orange-btn${view === "sessions" ? " active" : ""}`}
+            style={{ fontSize: 10, padding: "1px 6px", height: 20, marginLeft: 2 }}
+            aria-pressed={view === "sessions"}
+            onClick={() => setView((v) => (v === "sessions" ? "files" : "sessions"))}
+            title={`Persistent host sessions (tmux): ${sessionRows.length}`}
+          >
+            ☰ {sessionRows.length > 0 && <span className="right-panel-orange-count">{sessionRows.length}</span>}
+          </button>
+        )}
+        {/* SLURM jobs (HPC): shown only when the host actually has SLURM, so the
+            toggle never appears off-cluster. Badged with the live queue count. */}
+        {!activeBox && slurmSupported && projectId && (
+          <button
+            className={`tab-add-btn right-panel-orange-btn${view === "jobs" ? " active" : ""}`}
+            style={{ fontSize: 10, padding: "1px 6px", height: 20, marginLeft: 2 }}
+            aria-pressed={view === "jobs"}
+            onClick={() => setView((v) => (v === "jobs" ? "files" : "jobs"))}
+            title={`SLURM jobs: ${jobRows.length}`}
+          >
+            ⚙ {jobRows.length > 0 && <span className="right-panel-orange-count">{jobRows.length}</span>}
+          </button>
+        )}
+        {importDrop.canImport && (
+          <button
+            className="tab-add-btn"
+            style={{ fontSize: 10, padding: "1px 6px", height: 20, marginLeft: 2 }}
+            onClick={(e) => {
+              const r = e.currentTarget.getBoundingClientRect();
+              setImportMenu({ x: r.left, y: r.bottom + 2 });
+            }}
+            title="Import files or a folder into this project"
+          >
+            ⬇
+          </button>
+        )}
+        {importMenu && createPortal(
+          <>
+            <div
+              style={{ position: "fixed", inset: 0, zIndex: 200 }}
+              onPointerDown={() => setImportMenu(null)}
+            />
+            <div
+              className="context-menu"
+              style={{ left: importMenu.x, top: importMenu.y, zIndex: 201 }}
+              onPointerDown={(e) => e.stopPropagation()}
+            >
+              <button
+                onClick={() => {
+                  setImportMenu(null);
+                  void importDrop.importViaDialog();
+                }}
+              >
+                Import files…
+              </button>
+              <button
+                onClick={() => {
+                  setImportMenu(null);
+                  void importDrop.importFolderViaDialog();
+                }}
+              >
+                Import folder (copy)…
+              </button>
+            </div>
+          </>,
+          document.body,
+        )}
+        {projectDir && (
+          <button
+            className="tab-add-btn"
+            style={{ fontSize: 10, padding: "1px 6px", height: 20, marginLeft: 2 }}
+            onClick={openInOsBrowser}
+            title="Open folder in file manager"
+          >
+            ⧉
+          </button>
+        )}
+        {!activeBox && projectDir && (
+          <button
+            className={`tab-add-btn${showDownloads ? " active" : ""}`}
+            style={{ fontSize: 10, padding: "1px 6px", height: 20, marginLeft: 2 }}
+            aria-pressed={showDownloads}
+            onClick={() => {
+              setShowDownloads((v) => !v);
+              // The section lives in the files view; jump there when revealing it.
+              if (!showDownloads) setView("files");
+            }}
+            title="Show recent downloads (copy into this project)"
+          >
+            📥
+          </button>
+        )}
+        {projectId && (
+          <button
+            className="tab-add-btn"
+            style={{ fontSize: 10, padding: "1px 6px", height: 20, marginLeft: 2 }}
+            onClick={() => setShowSettings(true)}
+            title="Project settings"
+          >
+            ⚙
+          </button>
+        )}
+      </div>
+
+      {!activeBox && gitStatus?.is_repo && (
+        <>
+          {commitMsg !== null && (
+            <div style={{ padding: "4px 6px", borderBottom: "1px solid var(--border-color)" }}>
+              <textarea
+                ref={commitRef}
+                value={commitMsg}
+                onChange={(e) => setCommitMsg(e.target.value)}
+                rows={3}
+                style={{
+                  width: "100%",
+                  fontSize: 11,
+                  background: "var(--bg-panel)",
+                  color: "var(--text-primary)",
+                  border: "1px solid var(--border-color)",
+                  borderRadius: "var(--radius-sm)",
+                  padding: "3px 5px",
+                  resize: "vertical",
+                  boxSizing: "border-box",
+                  fontFamily: "inherit",
+                }}
+              />
+            </div>
+          )}
+          {gitError && (
+            <div style={{ fontSize: 10, color: "var(--danger, #f85149)", wordBreak: "break-all", padding: "2px 6px 4px", borderBottom: "1px solid var(--border-color)" }}>
+              {gitError}
+            </div>
+          )}
+        </>
+      )}
+        </>
+      )}
+
+      {view === "git" && (
+        <div className="right-panel-scroll" style={{ flex: 1, overflowY: "auto" }}>
+          {nestedRoot && (
+            <div className="nested-repo-toggle" role="group" aria-label="Git repository">
+              <button
+                type="button"
+                className={`nested-repo-pill${!onNestedRepo ? " active" : ""}`}
+                title={projectDir}
+                onClick={() => setPreferProjectRepo(true)}
+              >
+                {project?.name || "Project"}
+              </button>
+              <button
+                type="button"
+                className={`nested-repo-pill${onNestedRepo ? " active" : ""}`}
+                title={nestedRoot}
+                onClick={() => setPreferProjectRepo(false)}
+              >
+                {basename(nestedRoot) || nestedRoot}
+              </button>
+            </div>
+          )}
+          <GitHistory
+            projectDir={effectiveGitRoot}
+            projectId={onNestedRepo ? undefined : project?.remote ? projectId ?? undefined : undefined}
+            remote={!onNestedRepo && !!project?.remote}
+            onChanged={() => effectiveGitRoot && refreshGit(effectiveGitRoot)}
+          />
+        </div>
+      )}
+
+      {view === "search" && (
+        <SearchPanel projectDir={projectDir} linkingTabKey={undefined} />
+      )}
+
+      {view === "orange" && (
+        <div className="right-panel-scroll right-panel-orange" style={{ flex: 1, overflowY: "auto" }}>
+          {orangeFiles.length === 0 ? (
+            <div className="right-panel-orange-empty">No diverged files</div>
+          ) : (
+            <>
+              {/* Bulk "…for all" resolution: take one side for every diverged
+                  file at once. Both are destructive to the losing side, so each
+                  confirms first (with the file count). */}
+              <div className="orange-bulk-bar">
+                <span className="orange-bulk-count">
+                  {orangeFiles.length} diverged
+                </span>
+                <div className="orange-file-actions">
+                  <button
+                    type="button"
+                    className="orange-file-act"
+                    title="Take the host copy for every diverged file (overwrite the local mirror)"
+                    disabled={remoteBlocked}
+                    onClick={() => {
+                      if (!projectId) return;
+                      if (
+                        !window.confirm(
+                          `Take the host copy for all ${orangeFiles.length} diverged files? This overwrites your local mirror edits.`,
+                        )
+                      )
+                        return;
+                      void useSyncStore
+                        .getState()
+                        .resolveAll(projectId, orangeFiles, "host");
+                    }}
+                  >
+                    Take host for all
+                  </button>
+                  <button
+                    type="button"
+                    className="orange-file-act"
+                    title="Keep the local copy for every diverged file (force-push over the host)"
+                    disabled={remoteBlocked}
+                    onClick={() => {
+                      if (!projectId) return;
+                      if (
+                        !window.confirm(
+                          `Keep the local copy for all ${orangeFiles.length} diverged files? This overwrites the host copies.`,
+                        )
+                      )
+                        return;
+                      void useSyncStore
+                        .getState()
+                        .resolveAll(projectId, orangeFiles, "local");
+                    }}
+                  >
+                    Keep local for all
+                  </button>
+                </div>
+              </div>
+              {orangeFiles.map((rel) => (
+              <div key={rel} className="orange-file-row" title={rel}>
+                <button
+                  type="button"
+                  className="orange-file-name"
+                  disabled={!mirrorRoot}
+                  title={mirrorRoot ? `Open ${rel}` : rel}
+                  onClick={() => {
+                    if (!mirrorRoot) return;
+                    const abs = `${mirrorRoot}/${rel}`;
+                    // Open the diverged file in the three-way merge viewer
+                    // (local mirror ⇄ merged ⇄ remote host, PyCharm-style), so
+                    // the user can take changes from either side per block and
+                    // resolve the divergence in one place.
+                    openLinkedFile(undefined, dirname(abs), {
+                      path: abs,
+                      viewer: "syncmerge",
+                      label: basename(abs),
+                    });
+                  }}
+                >
+                  <span className="orange-file-dot" aria-hidden="true">±</span>
+                  {rel}
+                </button>
+                <div className="orange-file-actions">
+                  <button
+                    type="button"
+                    className="orange-file-act"
+                    title="Take the host copy (overwrite the local mirror)"
+                    disabled={remoteBlocked}
+                    onClick={() => projectId && void useSyncStore.getState().pull(projectId, rel)}
+                  >
+                    Take host
+                  </button>
+                  <button
+                    type="button"
+                    className="orange-file-act"
+                    title="Keep the local copy (force-push over the host)"
+                    disabled={remoteBlocked}
+                    onClick={() => projectId && void useSyncStore.getState().push(projectId, rel, true)}
+                  >
+                    Keep local
+                  </button>
+                </div>
+              </div>
+              ))}
+            </>
+          )}
+        </div>
+      )}
+
+      {view === "sessions" && (
+        <div className="right-panel-scroll right-panel-orange" style={{ flex: 1, overflowY: "auto" }}>
+          {sessionRows.length === 0 ? (
+            <div className="right-panel-orange-empty">
+              {remoteBlocked ? "Connect to list host sessions" : "No persistent sessions on the host(s)"}
+            </div>
+          ) : (
+            sessionRows.map(({ hostId, hostLabel, session: s }) => {
+              const owned = sessionOwners.has(`${hostId} ${s.name}`);
+              // Show the host tag only when the project spans more than one host.
+              const showHost = sessionHosts.length > 1;
+              return (
+                <div key={`${hostId} ${s.name}`} className="orange-file-row" title={s.name}>
+                  <button
+                    type="button"
+                    className="orange-file-name"
+                    title={owned ? `Reveal the tab running “${s.name}”` : `Attach to “${s.name}”`}
+                    onClick={() => openSession(hostId, s.name)}
+                  >
+                    <span className="orange-file-dot" aria-hidden="true">
+                      {s.attached ? "●" : "○"}
+                    </span>
+                    {s.name}
+                    <span className="tmux-session-meta">
+                      {showHost ? `${hostLabel} · ` : ""}
+                      {s.windows} win · {relativeAge(s.created)}
+                      {owned ? " · open" : ""}
+                    </span>
+                  </button>
+                  <div className="orange-file-actions">
+                    <button
+                      type="button"
+                      className="orange-file-act"
+                      title="Rename this session"
+                      onClick={() => renameSession(hostId, s.name)}
+                    >
+                      Rename
+                    </button>
+                    <button
+                      type="button"
+                      className="orange-file-act"
+                      title="Kill this session and everything running in it"
+                      aria-label={`Kill session ${s.name}`}
+                      onClick={() => killSession(hostId, s.name)}
+                    >
+                      ×
+                    </button>
+                  </div>
+                </div>
+              );
+            })
+          )}
+        </div>
+      )}
+
+      {view === "jobs" && (
+        <div className="right-panel-scroll right-panel-orange" style={{ flex: 1, overflowY: "auto" }}>
+          <div className="right-panel-jobs-head">
+            <UntestedTag />
+          </div>
+          {jobRows.length === 0 ? (
+            <div className="right-panel-orange-empty">
+              {remoteBlocked
+                ? "Connect to list SLURM jobs"
+                : "No queued or running jobs (squeue)"}
+            </div>
+          ) : (
+            jobRows.map((j) => (
+              <div key={j.id} className="orange-file-row" title={`${j.id} ${j.name}`}>
+                <button
+                  type="button"
+                  className="orange-file-name"
+                  title={`Watch job ${j.id} — tail its output log`}
+                  onClick={() => void watchJob(j.id, j.name)}
+                >
+                  <span className="orange-file-dot" aria-hidden="true">
+                    {j.state === "RUNNING" ? "●" : "○"}
+                  </span>
+                  {j.name || j.id}
+                  <span className="tmux-session-meta">
+                    {j.id} · {j.state}
+                    {j.time ? ` · ${j.time}` : ""}
+                    {j.nodes ? ` · ${j.nodes} node${j.nodes === "1" ? "" : "s"}` : ""}
+                    {j.reason && j.reason !== "(None)" ? ` · ${j.reason}` : ""}
+                  </span>
+                </button>
+                <div className="orange-file-actions">
+                  <button
+                    type="button"
+                    className="orange-file-act"
+                    title="Watch this job's output log"
+                    onClick={() => void watchJob(j.id, j.name)}
+                  >
+                    Watch
+                  </button>
+                  <button
+                    type="button"
+                    className="orange-file-act"
+                    title="Cancel this job (scancel)"
+                    aria-label={`Cancel job ${j.id}`}
+                    onClick={() => cancelJob(j.id, j.name)}
+                  >
+                    ×
+                  </button>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      )}
+
+      {/* Compact (docked subwindow) viewer strips the whole header above, which
+          is where the Remote/Local source switch normally lives — but a remote
+          project still needs it here to flip the tree between host and mirror.
+          Give it its own row directly above the tree's find-files search box,
+          so it's the topmost element the compact viewer shows. */}
+      {compact && view === "files" && !activeBox && project?.remote && projectId && (
+        <div className="right-panel-source right-panel-source--compact">
+          <FileSourceSwitch source={source} onChange={setSource} />
+          {source === "remote" && runHostPickerApplies(project.compute_hosts) && (
+            <RunHostPicker
+              projectId={projectId}
+              primaryHost={project.remote.label || project.remote.host}
+              computeHosts={project.compute_hosts}
+            />
+          )}
+        </div>
+      )}
+      {view === "files" && (
+        <ProjectFilesPane
+          scope={scope}
+          project={project}
+          projectDir={projectDir}
+          folder={folder}
+          onFolderChange={onFolderChange}
+          source={source}
+          hiddenEndings={filters.hiddenEndings}
+          hiddenPaths={filters.hiddenPaths}
+          shownPaths={filters.shownPaths}
+          scanExcluded={filters.scanExcluded}
+          onToggleScanExcluded={filters.toggleScanExcluded}
+          sortKey={sortKey}
+          descending={descending}
+          onSortChange={(key, desc) => {
+            setSortKey(key);
+            setDescending(desc);
+          }}
+          showDownloads={showDownloads}
+          onCloseDownloads={() => setShowDownloads(false)}
+          // Right-click → "Open in a new tab": the same file view, on that
+          // folder, as a Files (Project) tab in this project's scope.
+          onOpenFolderTab={onOpenFolderTab}
+          // A closed panel keeps no tree mounted (and so no fs-watch).
+          mountTree={mountTree}
+          compact={compact}
+        />
+      )}
+
+      {view === "windows" && (
+        <div className="right-panel-scroll" style={{ flex: 1, overflowY: "auto", padding: 4 }}>
+          {windows.length === 0 ? (
+            <div className="file-tree-empty">No opened windows</div>
+          ) : (
+            windows.map((w) => (
+              <div key={w.id} className="file-entry">
+                <span className="file-icon">🪟</span>
+                <span className="file-name" title={w.exec}>
+                  {basename(w.exec) || w.exec}
+                  {w.file && <span style={{ color: "var(--text-muted)" }}> {basename(w.file)}</span>}
+                </span>
+                <button
+                  className="tab-close"
+                  onClick={() => untrack(w.id)}
+                  title="Untrack"
+                >
+                  ×
+                </button>
+              </div>
+            ))
+          )}
+        </div>
+      )}
+      {showSettings && project && localFile && (
+        <ProjectFilesSettingsDialog
+          localFile={localFile}
+          project={project}
+          filters={filters}
+          onClose={() => setShowSettings(false)}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/components/files/QuickOpen.css b/src/components/files/QuickOpen.css
index 29cbabc..a68a277 100644
--- a/src/components/files/QuickOpen.css
+++ b/src/components/files/QuickOpen.css
@@ -21,8 +21,8 @@
   background: var(--bg-panel, #1e1e1e);
   color: var(--text-primary, #e6e6e6);
   border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
-  border-radius: 8px;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-3);
   overflow: hidden;
 }
 
@@ -101,7 +101,7 @@
   border: 1px solid var(--accent, #79b8ff);
   /* Bold accent cap along the top edge. */
   border-top: 4px solid var(--accent, #79b8ff);
-  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
+  box-shadow: var(--shadow-3);
 }
 
 /* Solid accent header strip with contrasting text — the "coloured" part. */
diff --git a/src/components/files/SearchPanel.tsx b/src/components/files/SearchPanel.tsx
index 0ae0b3d..d053b2b 100644
--- a/src/components/files/SearchPanel.tsx
+++ b/src/components/files/SearchPanel.tsx
@@ -131,7 +131,7 @@ export function SearchPanel({
             background: "var(--bg-panel)",
             color: "var(--text-primary)",
             border: "1px solid var(--border-color)",
-            borderRadius: 3,
+            borderRadius: "var(--radius-sm)",
             padding: "4px 6px",
             boxSizing: "border-box",
           }}
diff --git a/src/components/files/SetDefaultAppDialog.tsx b/src/components/files/SetDefaultAppDialog.tsx
index eb98d9f..812720d 100644
--- a/src/components/files/SetDefaultAppDialog.tsx
+++ b/src/components/files/SetDefaultAppDialog.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { invoke } from "@tauri-apps/api/core";
 import { open } from "@tauri-apps/plugin-dialog";
@@ -22,6 +22,21 @@ interface Props {
   onClose: () => void;
 }
 
+/**
+ * Whether an installed-app row corresponds to the current exec: true when the
+ * exec is exactly the app's command, or that command followed by extra args — a
+ * multi-word invocation such as a sharun AppImage's binary selector
+ * (`/opt/…AppImage kicad <file>`) or a Flatpak launcher line. Keeps such a
+ * working exec highlighted, and lets a re-select preserve its trailing args
+ * instead of stripping them back to the bare `.desktop` value.
+ */
+export function execMatchesApp(exec: string, appExec: string): boolean {
+  const e = exec.trim().split(/\s+/).filter(Boolean);
+  const a = appExec.trim().split(/\s+/).filter(Boolean);
+  if (a.length === 0 || a.length > e.length) return false;
+  return a.every((token, i) => token === e[i]);
+}
+
 function readDefaultApps(project: ProjectJson | null): Record<string, string> {
   const raw = project?.default_apps;
   if (!raw || typeof raw !== "object") return {};
@@ -50,6 +65,8 @@ export function SetDefaultAppDialog({ ext, fileName, localFile, onClose }: Props
   const [projectJson, setProjectJson] = useState<ProjectJson | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [busy, setBusy] = useState(false);
+  // Once the user picks a scope radio themselves, stop auto-selecting it.
+  const userPickedScope = useRef(false);
 
   useEffect(() => {
     invoke<InstalledApp[]>("list_installed_apps")
@@ -71,6 +88,17 @@ export function SetDefaultAppDialog({ ext, fileName, localFile, onClose }: Props
     }
   }, [localFile]);
 
+  // Open in whichever scope already maps this extension, so reopening the dialog
+  // surfaces the saved value instead of an empty project-scope field (a mapping
+  // saved Global would otherwise be invisible while the default scope is
+  // "project"). Project wins over global, matching the resolution precedence.
+  // Deferred to the maps loading, and disabled once the user picks a scope.
+  useEffect(() => {
+    if (userPickedScope.current) return;
+    if (localFile && projectApps[ext]) setScope("project");
+    else if (globalApps[ext]) setScope("global");
+  }, [ext, localFile, projectApps, globalApps]);
+
   // Seed the exec field with whatever the chosen scope currently maps this
   // extension to, so the dialog opens showing the present value.
   useEffect(() => {
@@ -119,6 +147,13 @@ export function SetDefaultAppDialog({ ext, fileName, localFile, onClose }: Props
     if (typeof picked === "string") setExec(picked);
   };
 
+  // Select an installed app. Preserve a working multi-word exec when the user
+  // re-selects the same app it already resolves to — clicking KiCad must not
+  // strip the `kicad` binary selector its sharun AppImage needs to open a file.
+  const pickApp = (appExec: string) => {
+    setExec((prev) => (execMatchesApp(prev, appExec) ? prev : appExec));
+  };
+
   const save = async (nextExec: string | null) => {
     setBusy(true);
     setError(null);
@@ -164,7 +199,10 @@ export function SetDefaultAppDialog({ ext, fileName, localFile, onClose }: Props
               name="default-app-scope"
               checked={scope === "project"}
               disabled={!localFile}
-              onChange={() => setScope("project")}
+              onChange={() => {
+                userPickedScope.current = true;
+                setScope("project");
+              }}
             />
             This project only
           </label>
@@ -173,7 +211,10 @@ export function SetDefaultAppDialog({ ext, fileName, localFile, onClose }: Props
               type="radio"
               name="default-app-scope"
               checked={scope === "global"}
-              onChange={() => setScope("global")}
+              onChange={() => {
+                userPickedScope.current = true;
+                setScope("global");
+              }}
             />
             Global (all projects)
           </label>
@@ -199,8 +240,8 @@ export function SetDefaultAppDialog({ ext, fileName, localFile, onClose }: Props
               <button
                 type="button"
                 key={`${a.exec}:${a.name}`}
-                className={`set-default-app-row${exec === a.exec ? " selected" : ""}`}
-                onClick={() => setExec(a.exec)}
+                className={`set-default-app-row${execMatchesApp(exec, a.exec) ? " selected" : ""}`}
+                onClick={() => pickApp(a.exec)}
                 title={a.exec}
               >
                 {iconDataUrls[a.exec] ? (
diff --git a/src/components/files/SubwindowFilesSidebar.tsx b/src/components/files/SubwindowFilesSidebar.tsx
new file mode 100644
index 0000000..f2f0697
--- /dev/null
+++ b/src/components/files/SubwindowFilesSidebar.tsx
@@ -0,0 +1,107 @@
+import { useEffect, useState } from "react";
+import { ProjectFilesTab } from "./ProjectFilesTab";
+
+/** Default/clamp bounds for the per-subwindow file-viewer column (px). */
+export const DEFAULT_GROUP_FILES_WIDTH = 300;
+export const MIN_GROUP_FILES_WIDTH = 200;
+export const MAX_GROUP_FILES_WIDTH = 640;
+
+export function clampFilesWidth(w: number): number {
+  return Math.min(MAX_GROUP_FILES_WIDTH, Math.max(MIN_GROUP_FILES_WIDTH, Math.round(w)));
+}
+
+interface Props {
+  /** The owning scope (project id / "box:<id>" / "root") — identity for the viewer. */
+  scope: string;
+  /** Fallback tree root when the scope has no project (root scope / popout). */
+  cwd: string;
+  /** Persisted column width; unset → DEFAULT_GROUP_FILES_WIDTH. */
+  width?: number;
+  /** Commit a width after a resize drag ends (persisted onto the group node). */
+  onWidthChange: (width: number) => void;
+  /** The folder the viewer last browsed to, persisted on the group node. */
+  folder?: string;
+  /** Persist a folder change onto the group node (main) / stream it (popout). */
+  onFolderChange?: (folder: string) => void;
+  /** Whether this window owns the tab store (main window). Gates "Open in a new tab". */
+  canOpenTabs?: boolean;
+  /** Hide the docked viewer (double-click the resize edge). Same close path the
+   *  ◫ tab-bar button uses. */
+  onHide?: () => void;
+}
+
+/**
+ * The per-subwindow right file viewer (a docked column on a subwindow's right
+ * edge), toggled by the ◫ button in the subwindow's tab bar. The viewer itself
+ * is the SAME `ProjectFilesTab` host the Files (Project) tab renders — and
+ * therefore the same `ProjectFilesView` the right panel renders — so all three
+ * surfaces can never drift apart. This wrapper owns only what a docked column
+ * adds: the fixed width, and the left-edge resize handle.
+ *
+ * Width is LIVE-local during the drag (no store churn per pointer move) and
+ * committed once on release via `onWidthChange` — the main window persists it
+ * onto the group node; a popout streams a `files` edit back to the main window.
+ */
+export function SubwindowFilesSidebar({
+  scope,
+  cwd,
+  width,
+  onWidthChange,
+  folder,
+  onFolderChange,
+  canOpenTabs,
+  onHide,
+}: Props) {
+  const committed = clampFilesWidth(width ?? DEFAULT_GROUP_FILES_WIDTH);
+  // Live width during a resize drag; null when idle (render the committed one).
+  const [liveWidth, setLiveWidth] = useState<number | null>(null);
+
+  // A width persisted elsewhere (another window, restore) wins when idle.
+  useEffect(() => {
+    setLiveWidth(null);
+  }, [committed]);
+
+  const startResize = (e: React.PointerEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    (e.target as HTMLElement).setPointerCapture?.(e.pointerId);
+    const startX = e.clientX;
+    const startW = committed;
+    let last = startW;
+    const onMove = (ev: PointerEvent) => {
+      // The handle sits on the column's LEFT edge: dragging left grows it.
+      last = clampFilesWidth(startW + (startX - ev.clientX));
+      setLiveWidth(last);
+    };
+    const onUp = () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      setLiveWidth(null);
+      if (last !== startW) onWidthChange(last);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+  };
+
+  return (
+    <div className="subwindow-files" style={{ width: liveWidth ?? committed }}>
+      <div
+        className="subwindow-files-resize"
+        title="Drag to resize · double-click to hide"
+        onPointerDown={startResize}
+        onDoubleClick={onHide}
+      />
+      {/* Compact: the docked column strips the header + view-switcher toolbar +
+          sync/sort rows so the tree's find-files search box sits at the top. */}
+      <ProjectFilesTab
+        scope={scope}
+        cwd={cwd}
+        canOpenTabs={canOpenTabs}
+        folder={folder}
+        persistFolder={onFolderChange}
+        visible
+        compact
+      />
+    </div>
+  );
+}
diff --git a/src/components/files/fileDropContext.ts b/src/components/files/fileDropContext.ts
new file mode 100644
index 0000000..5eb726f
--- /dev/null
+++ b/src/components/files/fileDropContext.ts
@@ -0,0 +1,34 @@
+import { createContext } from "react";
+import type { TabDrag } from "../../stores/drag";
+import type { TabEntry } from "../../stores/tabs";
+
+/**
+ * How a file dragged out of the file tree is resolved and committed — the seam
+ * that lets the SAME `FileTree` gesture work in the main window and inside a
+ * detached popout.
+ *
+ * In the main window this is absent (null): `CenterPanel` owns a window-wide
+ * pointer-drag authority that resolves the pane target and `FileTree` commits
+ * through `commitFileDrop` into the main tab store. A detached window has
+ * neither — it can't reach that authority (its panes are in another webview) nor
+ * mutate the store (the main window owns tab creation + the PTY) — so
+ * `DetachedCenterPanel` provides this controller: `resolveTarget` writes the
+ * hovered pane into the popout's own drag store (so the split/merge preview
+ * lights up), and `commit` streams the drop to the main window as a detached
+ * `add` edit instead of a local store write.
+ */
+export interface FileDropController {
+  /** Resolve the pane under the cursor into the drag store (overGroup/edge or
+   *  reorderGroup/reorderIndex), driving the live split/merge preview. Called on
+   *  every pointer move of a file drag. */
+  resolveTarget: (clientX: number, clientY: number) => void;
+  /** Commit a released file drag against the last resolved target. */
+  commit: (d: TabDrag, projectCwd: string) => void;
+  /** Open a tab INSIDE this popout (its focused group), streamed to the main
+   *  window like the "+" button and file drops. Used by the Python ▶ Run so the
+   *  terminal appears in the detached window, not the main window's tab store. */
+  openTab: (tab: Omit<TabEntry, "key">) => void;
+}
+
+/** Non-null only inside a detached window. See {@link FileDropController}. */
+export const FileDropContext = createContext<FileDropController | null>(null);
diff --git a/src/components/files/importDrop.tsx b/src/components/files/importDrop.tsx
new file mode 100644
index 0000000..53351b5
--- /dev/null
+++ b/src/components/files/importDrop.tsx
@@ -0,0 +1,255 @@
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { invoke } from "@tauri-apps/api/core";
+import { open as openDialog } from "@tauri-apps/plugin-dialog";
+import { Toggle } from "../common/Toggle";
+import { basename, fromFileUri } from "../../lib/paths";
+
+/**
+ * Importing OS files into a project by dropping them onto a file view — shared
+ * by the right panel and the "Files (Project)" tab, which must import
+ * identically (same collision prompt, same destination folder rule).
+ */
+
+type ConflictChoice = "replace" | "rename" | "skip";
+
+/** Heuristic: is this drag an external OS file drag (vs. an internal pill/text
+ *  drag)? `dragDropEnabled` stays false so HTML5 DnD keeps working for the
+ *  app's pointer/HTML drags; an OS file drag advertises Files/uri-list/html
+ *  (WebKitGTK uses text/html here). During dragover WebKit may hide the type
+ *  list, so an empty list is treated as a file drag too. */
+export function isExternalFileDrag(dt: DataTransfer): boolean {
+  const types = Array.from(dt.types ?? []);
+  if (types.length === 0) return true;
+  return (
+    types.includes("Files") ||
+    types.includes("text/uri-list") ||
+    types.includes("text/html")
+  );
+}
+
+/** Extract absolute local paths from an OS HTML5 file drop. WebKitGTK withholds
+ *  `Files`/`text/uri-list` data here but leaks the `file://` URL inside
+ *  `text/html`, so scan every text payload for `file://` URIs and dedupe.
+ *  NOTE: this drag path is best-effort — some file managers only expose ONE
+ *  file this way. Use the Import button for reliable multi-file selection. */
+export function parseDroppedFilePaths(dataTransfer: DataTransfer): string[] {
+  const sources = [
+    dataTransfer.getData("text/uri-list"),
+    dataTransfer.getData("text/plain"),
+    dataTransfer.getData("text/html"),
+  ];
+  const FILE_URI = /file:\/\/[^\s"'<>]+/g;
+  const seen = new Set<string>();
+  const paths: string[] = [];
+  for (const raw of sources) {
+    if (!raw) continue;
+    for (const match of raw.match(FILE_URI) ?? []) {
+      const p = fromFileUri(match);
+      if (p && !seen.has(p)) {
+        seen.add(p);
+        paths.push(p);
+      }
+    }
+  }
+  return paths;
+}
+
+interface Options {
+  /** Destination project root. Empty disables the drop. */
+  projectDir: string;
+  /** False for a box scope: several roots, so no single destination. */
+  enabled: boolean;
+  /** Project-relative folder the files land in, read at drop time. */
+  destRel: string;
+  /** Fired once the whole batch has been copied (e.g. to refresh git). */
+  onImported?: () => void;
+}
+
+/**
+ * OS file drop → copy into the project, prompting on name collisions. Returns
+ * the drag handlers to spread onto the drop zone, the classes that paint it,
+ * the conflict modal to render, and the file-picker fallback (WebKitGTK only
+ * leaks one path per drag, so the picker is the reliable multi-file route).
+ */
+export function useImportDrop({ projectDir, enabled, destRel, onImported }: Options) {
+  const [dropActive, setDropActive] = useState(false);
+  const [dropFlash, setDropFlash] = useState(false);
+  const [conflict, setConflict] = useState<
+    { name: string; remaining: number; resolve: (r: { choice: ConflictChoice; all: boolean }) => void } | null
+  >(null);
+  const [conflictAll, setConflictAll] = useState(false);
+  const dropFlashTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const canImport = enabled && !!projectDir;
+
+  // The import runs asynchronously across a batch, so read the destination and
+  // the completion callback from refs — a folder change mid-import must not
+  // strand the loop on a stale closure.
+  const destRelRef = useRef(destRel);
+  destRelRef.current = destRel;
+  const onImportedRef = useRef(onImported);
+  onImportedRef.current = onImported;
+
+  useEffect(() => {
+    return () => {
+      if (dropFlashTimer.current) clearTimeout(dropFlashTimer.current);
+    };
+  }, []);
+
+  const flashDrop = () => {
+    if (dropFlashTimer.current) clearTimeout(dropFlashTimer.current);
+    setDropFlash(false);
+    requestAnimationFrame(() => setDropFlash(true));
+    dropFlashTimer.current = setTimeout(() => setDropFlash(false), 500);
+  };
+
+  // Ask the user how to resolve a name collision; resolves via the modal's
+  // buttons. Returns the choice plus whether to apply it to all remaining.
+  const askConflict = (name: string, remaining: number) =>
+    new Promise<{ choice: ConflictChoice; all: boolean }>((resolve) => {
+      setConflictAll(false);
+      setConflict({ name, remaining, resolve });
+    });
+
+  // Copy each absolute source path into the project, prompting on collisions.
+  const importPaths = (paths: string[]) => {
+    if (!canImport || !projectDir || paths.length === 0) return;
+    flashDrop();
+    const destRelAtDrop = destRelRef.current;
+    void (async () => {
+      let blanket: ConflictChoice | null = null;
+      for (let i = 0; i < paths.length; i++) {
+        const sourcePath = paths[i];
+        const name = basename(sourcePath) || sourcePath;
+        const rel = destRelAtDrop ? `${destRelAtDrop}/${name}` : name;
+        let choice: ConflictChoice = "rename";
+        const exists = await invoke<boolean>("project_path_exists", { projectDir, relPath: rel }).catch(() => false);
+        if (exists) {
+          if (blanket) {
+            choice = blanket;
+          } else {
+            const res = await askConflict(name, paths.length - 1 - i);
+            setConflict(null);
+            choice = res.choice;
+            if (res.all) blanket = res.choice;
+          }
+        }
+        if (choice === "skip") continue;
+        try {
+          await invoke("import_external_file", {
+            projectDir,
+            sourcePath,
+            destRel: destRelAtDrop,
+            replace: choice === "replace",
+          });
+        } catch (err) {
+          console.error("import_external_file", sourcePath, err);
+        }
+      }
+      // The tree auto-reloads via its fs-watch; the host may still want to
+      // refresh anything derived from the files (e.g. git status counts).
+      onImportedRef.current?.();
+    })();
+  };
+
+  // HTML5 drag-and-drop (dragDropEnabled stays false so pointer drags — tabs,
+  // splits, pills — keep working). Best-effort: WebKitGTK only leaks file paths
+  // via text/html and sometimes just one; the Import button is the reliable
+  // multi-file path.
+  const onDragOver = (e: React.DragEvent) => {
+    if (!canImport || !isExternalFileDrag(e.dataTransfer)) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "copy";
+    if (!dropActive) setDropActive(true);
+  };
+
+  const onDragLeave = (e: React.DragEvent) => {
+    if (e.currentTarget.contains(e.relatedTarget as Node)) return;
+    setDropActive(false);
+  };
+
+  const onDrop = (e: React.DragEvent) => {
+    setDropActive(false);
+    if (!canImport || !isExternalFileDrag(e.dataTransfer)) return;
+    e.preventDefault();
+    importPaths(parseDroppedFilePaths(e.dataTransfer));
+  };
+
+  // Reliable multi-file import: native OS file picker → same copy+conflict flow.
+  const importViaDialog = async () => {
+    if (!canImport) return;
+    const picked = await openDialog({ multiple: true, directory: false }).catch(() => null);
+    if (!picked) return;
+    importPaths(Array.isArray(picked) ? picked : [picked]);
+  };
+
+  // Same flow, but for whole folders: the backend's copy already recurses
+  // (`import_external_file` → `copy_recursive`), so this is just a directory
+  // picker feeding the same importPaths pipeline.
+  const importFolderViaDialog = async () => {
+    if (!canImport) return;
+    const picked = await openDialog({ multiple: true, directory: true }).catch(() => null);
+    if (!picked) return;
+    importPaths(Array.isArray(picked) ? picked : [picked]);
+  };
+
+  const conflictModal = conflict
+    ? createPortal(
+        <div
+          className="modal-backdrop"
+          onMouseDown={() => conflict.resolve({ choice: "skip", all: conflictAll })}
+        >
+          <div className="settings-dialog" style={{ maxWidth: 380 }} onMouseDown={(e) => e.stopPropagation()}>
+            <div className="settings-title-row">
+              <h2>File already exists</h2>
+            </div>
+            <p className="settings-help" style={{ wordBreak: "break-all" }}>
+              <code>{conflict.name}</code> already exists in this folder. Replace it, or keep both (the new copy is renamed)?
+            </p>
+            {conflict.remaining > 0 && (
+              <label className="viewer-pref-toggle" style={{ marginBottom: 8 }}>
+                <Toggle
+                  size="sm"
+                  checked={conflictAll}
+                  onChange={(e) => setConflictAll(e.target.checked)}
+                />
+                <span>Apply to the {conflict.remaining} remaining file{conflict.remaining > 1 ? "s" : ""}</span>
+              </label>
+            )}
+            <div style={{ display: "flex", gap: 6, justifyContent: "flex-end" }}>
+              <button className="tab-add-btn" onClick={() => conflict.resolve({ choice: "skip", all: conflictAll })}>
+                Skip
+              </button>
+              <button className="tab-add-btn" onClick={() => conflict.resolve({ choice: "rename", all: conflictAll })}>
+                Keep both
+              </button>
+              <button
+                className="tab-add-btn"
+                style={{ color: "var(--danger, #f85149)" }}
+                onClick={() => conflict.resolve({ choice: "replace", all: conflictAll })}
+              >
+                Replace
+              </button>
+            </div>
+          </div>
+        </div>,
+        document.body,
+      )
+    : null;
+
+  return {
+    canImport,
+    dropActive,
+    dropFlash,
+    importViaDialog,
+    importFolderViaDialog,
+    conflictModal,
+    handlers: {
+      onDragEnter: onDragOver,
+      onDragOver,
+      onDragLeave,
+      onDrop,
+    },
+  };
+}
diff --git a/src/components/files/openFileEntry.ts b/src/components/files/openFileEntry.ts
new file mode 100644
index 0000000..de18d7a
--- /dev/null
+++ b/src/components/files/openFileEntry.ts
@@ -0,0 +1,75 @@
+import {
+  internalViewerFor,
+  type FileEntry,
+  type InternalViewer,
+} from "../../lib/viewers/fileUtils";
+import { useTabsStore, type TabEntry } from "../../stores/tabs";
+import { useWindowsStore } from "../../stores/windows";
+
+/**
+ * The single open-a-file policy shared by every file listing (the FileTree in
+ * the right panel / subwindow sidebar / Files tab, and the FileBrowser). It is
+ * the seam that makes a double-click mean the same thing everywhere:
+ *
+ *  - A file with a **native in-app viewer** (`internalViewerFor`) opens as an
+ *    embed tab in the project's **focused subwindow** — reusing an already-open
+ *    viewer tab for that exact file rather than stacking duplicates. In a
+ *    detached popout the caller passes `placeTab` so the tab streams into that
+ *    window (like the Python ▶ Run) instead of the main window's tab store.
+ *  - A file with **no native viewer**, or an explicit `external` open
+ *    (Shift+double-click), opens in the OS default app via `open_file`.
+ *
+ * `disabled` honours the per-type viewer opt-out (#48); omit it to treat every
+ * viewer as enabled.
+ */
+export function openFileEntry(opts: {
+  entry: FileEntry;
+  /** Project root, used as the embed tab's cwd. */
+  projectDir: string;
+  /** Owning project id, forwarded to `open_file` for window tracking. */
+  projectId: string | null;
+  /** Telemetry origin passed to `open_file` (e.g. "right_file_tree"). */
+  origin: string;
+  /** Force the OS-default-app path regardless of any native viewer (Shift). */
+  external: boolean;
+  /** Native viewers the user opted out of (#48); omit = all enabled. */
+  disabled?: ReadonlySet<InternalViewer>;
+  /** Detached-popout placement override: stream the tab into that window
+   *  instead of writing the (non-authoritative) local tab store. */
+  placeTab?: (tab: Omit<TabEntry, "key">) => void;
+}): void {
+  const { entry, projectDir, projectId, origin, external, disabled, placeTab } = opts;
+  if (entry.is_dir) return;
+
+  const viewer = internalViewerFor(entry, disabled);
+  if (external || !viewer) {
+    useWindowsStore
+      .getState()
+      .openFile(entry.path, undefined, projectId, origin)
+      .catch((e) => console.error(e));
+    return;
+  }
+
+  const tab: Omit<TabEntry, "key"> = {
+    label: entry.name,
+    cmd: "",
+    cwd: projectDir,
+    kind: "embed",
+    embedPath: entry.path,
+    viewer,
+  };
+
+  if (placeTab) {
+    placeTab(tab);
+    return;
+  }
+
+  // Main window: focus an existing viewer tab for this exact file if one is
+  // open (same path + viewer), else add a fresh one to the focused subwindow.
+  const store = useTabsStore.getState();
+  const prior = store.tabs.find(
+    (t) => t.kind === "embed" && t.viewer === viewer && t.embedPath === entry.path,
+  );
+  if (prior) store.setActive(prior.key);
+  else store.addTab(tab);
+}
diff --git a/src/components/header/AppResourceDisplay.tsx b/src/components/header/AppResourceDisplay.tsx
index a5f0622..49162c4 100644
--- a/src/components/header/AppResourceDisplay.tsx
+++ b/src/components/header/AppResourceDisplay.tsx
@@ -2,24 +2,28 @@ import { useEffect, useState } from "react";
 import { invoke } from "@tauri-apps/api/core";
 import { useSettingsStore } from "../../stores/settings";
 import { useEnergySaver, saverInterval } from "../../stores/power";
+import {
+  formatBytes,
+  gpuBusy,
+  gpuTone,
+  gpuTooltip,
+  gpuTotals,
+  type GpuSample,
+} from "../../lib/gpu";
 
 interface AppResourceUsage {
   cpu_percent: number;
   rss_bytes: number;
   process_count: number;
-  /** VRAM bytes in use by Ollama models; 0 when no model is resident on GPU. */
+  /** Ollama's *share* of the GPU: 0 when no model is resident. */
   vram_bytes: number;
+  /** Every GPU in the machine; empty when none can be read (see `lib/gpu`). */
+  gpus: GpuSample[];
 }
 
-function formatBytes(bytes: number): string {
-  if (!Number.isFinite(bytes) || bytes <= 0) return "0 MB";
-  const mib = bytes / 1024 / 1024;
-  if (mib < 1024) return `${Math.round(mib)} MB`;
-  return `${(mib / 1024).toFixed(1)} GB`;
-}
-
-function usageTone(kind: "cpu" | "ram" | "gpu", value: number): "low" | "medium" | "high" {
-  // CPU is a percentage; RAM/GPU are byte counts with their own thresholds.
+function usageTone(kind: "cpu" | "ram", value: number): "low" | "medium" | "high" {
+  // CPU is a percentage; RAM is a byte count with its own thresholds. The GPU
+  // row tones by ratio instead (`gpuTone`) — its figure is the whole device's.
   const warn = kind === "cpu" ? 35 : 1024 * 1024 * 1024;
   const hot = kind === "cpu" ? 75 : 2 * 1024 * 1024 * 1024;
   if (value >= hot) return "high";
@@ -77,15 +81,45 @@ export function AppResourceDisplay() {
           <span>{formatBytes(usage.rss_bytes)}</span>
         </span>
       )}
-      {showGpu && (
-        <span
-          className={`app-resource-row ${usageTone("gpu", usage.vram_bytes)}`}
-          title="GPU VRAM in use by local models (Ollama)"
-        >
-          <span className="app-resource-symbol" aria-hidden>GPU</span>
-          <span>{usage.vram_bytes > 0 ? formatBytes(usage.vram_bytes) : "—"}</span>
-        </span>
-      )}
+      {showGpu && <GpuRow gpus={usage.gpus} ollamaBytes={usage.vram_bytes} />}
     </div>
   );
 }
+
+/**
+ * The whole device's memory (both pools, every adapter) plus its utilization —
+ * not just what Ollama holds, which is what this row used to show and now shows
+ * as one line of its tooltip.
+ */
+function GpuRow({ gpus, ollamaBytes }: { gpus: GpuSample[]; ollamaBytes: number }) {
+  // No GPU we can read (macOS, an Intel-only box, no `nvidia-smi`): fall back to
+  // exactly what this row did before — Ollama's models, and "—" when none are
+  // loaded. Better a narrow reading than a zero pretending to be a measurement.
+  if (gpus.length === 0) {
+    return (
+      <span
+        className={`app-resource-row ${usageTone("ram", ollamaBytes)}`}
+        title="GPU memory in use by local models (Ollama) — this machine's GPU reports no memory of its own"
+      >
+        <span className="app-resource-symbol" aria-hidden>GPU</span>
+        <span>{ollamaBytes > 0 ? formatBytes(ollamaBytes) : "—"}</span>
+      </span>
+    );
+  }
+
+  const { used, total } = gpuTotals(gpus);
+  const busy = gpuBusy(gpus);
+
+  return (
+    <span
+      className={`app-resource-row ${gpuTone(used, total)}`}
+      title={gpuTooltip(gpus, ollamaBytes)}
+    >
+      <span className="app-resource-symbol" aria-hidden>GPU</span>
+      <span>
+        {busy != null ? `${Math.round(busy)}% · ` : ""}
+        {formatBytes(used)} / {formatBytes(total)}
+      </span>
+    </span>
+  );
+}
diff --git a/src/components/header/MachinesIndicator.tsx b/src/components/header/MachinesIndicator.tsx
new file mode 100644
index 0000000..c7e1e5b
--- /dev/null
+++ b/src/components/header/MachinesIndicator.tsx
@@ -0,0 +1,1316 @@
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { invoke } from "@tauri-apps/api/core";
+import { open as openDialog, save as saveDialog } from "@tauri-apps/plugin-dialog";
+import { ConnLamp } from "../common/ConnLamp";
+import { Toggle } from "../common/Toggle";
+import { PasswordInput } from "../common/PasswordInput";
+import { UntestedTag } from "../common/UntestedTag";
+import { useGlobalMachinesStore, type ImportResult } from "../../stores/globalMachines";
+import { useGlobalMachineMonitorStore } from "../../stores/globalMachineMonitor";
+import { useProjectsStore } from "../../stores/projects";
+import { useRemoteMachinesStore } from "../../stores/remoteMachines";
+import { useRemoteUsageStore } from "../../stores/remoteUsage";
+import { useHostBusyStore, busyReading, busyLabel } from "../../stores/hostBusy";
+import { parseSshAddress } from "../projects/scaffold";
+import type { ConnState } from "../../stores/remoteStatus";
+import type { GlobalMachine, MachineImportEntry, ProjectEntry } from "../../types";
+
+/** Lamp order — most-relevant state first, so a fleet with any error/connecting
+ *  machine surfaces that colour ahead of the steady-state green/grey. Mirrors
+ *  `RemoteConnMenu`'s per-project host lamps. */
+const STATUS_ORDER: ConnState[] = ["error", "connecting", "connected", "off"];
+
+const STATUS_WORD: Record<ConnState, string> = {
+  error: "error",
+  connecting: "connecting",
+  connected: "connected",
+  off: "off",
+};
+
+export function targetLabel(m: { user?: string; host: string; port?: number }): string {
+  return `${m.user ? `${m.user}@` : ""}${m.host}${m.port ? `:${m.port}` : ""}`;
+}
+
+/**
+ * Global worker machines, in the header — the VPN indicator's pattern applied
+ * to SSH hosts a project doesn't own. Authenticated once via the ordinary
+ * login mechanism, with no project/path attached, then handed to a project from
+ * a row's "add to a project" picker: a remote project gains a `shared_fs`
+ * compute host, a local one is offered "Extend to remote" with that machine as
+ * its primary — deliberately a menu, not a drag: a machine's target lives
+ * outside this list, and no drag can reach it (see below). Rows DO reorder by
+ * dragging their grip, but on POINTER events, which is the difference that
+ * makes it work — a native HTML5 drag out of a hover-menu is unworkable under
+ * WebKitGTK (the menu closes or hangs mid-drag, and a drop that misses its
+ * target never fires, stranding the row in its dimmed drag state).
+ * Detaching a machine from a project never touches this list — see
+ * `stores/globalMachines.ts` / `commands::global_machines`.
+ */
+export function MachinesIndicator() {
+  const machines = useGlobalMachinesStore((s) => s.machines);
+  const status = useGlobalMachinesStore((s) => s.status);
+  const load = useGlobalMachinesStore((s) => s.load);
+  const probeAll = useGlobalMachinesStore((s) => s.probeAll);
+  const connect = useGlobalMachinesStore((s) => s.connect);
+  const disconnect = useGlobalMachinesStore((s) => s.disconnect);
+  const retryAll = useGlobalMachinesStore((s) => s.retryAll);
+  // Busy readings are keyed by SSH target, so this one subscription lights both
+  // the aggregate strip and every row.
+  const readings = useHostBusyStore((s) => s.readings);
+  const disconnectAll = useGlobalMachinesStore((s) => s.disconnectAll);
+  const remove = useGlobalMachinesStore((s) => s.remove);
+  const add = useGlobalMachinesStore((s) => s.add);
+  const update = useGlobalMachinesStore((s) => s.update);
+  const setAutoConnect = useGlobalMachinesStore((s) => s.setAutoConnect);
+  const reorder = useGlobalMachinesStore((s) => s.reorder);
+  const exportMachines = useGlobalMachinesStore((s) => s.exportMachines);
+  const importMachines = useGlobalMachinesStore((s) => s.importMachines);
+  const openMonitor = useGlobalMachineMonitorStore((s) => s.open);
+  // The projects a machine can be added to: the ACTIVE ones only — exactly the
+  // set `ProjectSwitcher` renders as pills (`status !== "inactive"`), which is
+  // both what the old drag gesture could reach and what the handoff needs, since
+  // `requestExtend` is picked up by the target's mounted `ProjectPill`.
+  const projects = useProjectsStore((s) => s.projects).filter((p) => p.status !== "inactive");
+  const openUsage = useRemoteUsageStore((s) => s.open);
+  const openRemoteMachines = useRemoteMachinesStore((s) => s.open);
+  const requestExtend = useRemoteMachinesStore((s) => s.requestExtend);
+
+  /** Hand this machine to a project: a remote project gets it as a (shared-fs)
+   *  compute host via the Remote machines window; a local-only one gets it as
+   *  its primary host via the extend-to-remote flow. The same two branches the
+   *  pill's drop target used to pick between. */
+  const attachToProject = (p: ProjectEntry, m: { id: string; host: string; user?: string; port?: number; label?: string }) => {
+    const machine = { id: m.id, host: m.host, user: m.user, port: m.port, label: m.label };
+    if (p.remote) openRemoteMachines(p.id, machine);
+    else requestExtend(p.id, machine);
+  };
+
+  const [open, setOpen] = useState(false);
+  const closeTimer = useRef<number | undefined>(undefined);
+  // While an import/export panel is up — or a native file dialog is open, which
+  // moves the pointer off the trigger and would otherwise fire mouseleave — the
+  // menu must NOT auto-close under the user mid-flow. A ref (read synchronously
+  // by `scheduleClose`) rather than state, so the guard is live the instant a
+  // dialog opens, before any re-render.
+  const keepOpenRef = useRef(false);
+  // Per-row DOM nodes (keyed by machine id) + their last-measured positions,
+  // for the FLIP slide animation when the list reorders.
+  const rowRefs = useRef<Map<string, HTMLDivElement>>(new Map());
+  const prevRects = useRef<Map<string, number>>(new Map());
+  // Which row's "Add to a project" picker is open, if any. This is the ONLY way
+  // a global machine reaches a project — the drag-onto-a-pill gesture it
+  // replaced could not be made to work (see the component doc), and a picker
+  // says which of the two ways the machine would join, which a drop could only
+  // imply.
+  const [attachId, setAttachId] = useState<string | null>(null);
+
+  // Reorder-by-drag, on POINTER events — not HTML5 DnD, which is what broke the
+  // first attempt (a native drag out of a hover-menu hangs under WebKitGTK, and
+  // a drop outside a target never fires, stranding the row mid-drag). Same
+  // choice `tabs/TabBar` and `embed/YamlTree` already made. The gesture starts
+  // on the row's grip only, so the row's buttons stay clickable; the grip takes
+  // a pointer capture, so `pointerup`/`pointercancel` are guaranteed to arrive
+  // there and end the drag — there is no state a missed event can strand.
+  //
+  // `to` is the slot the dragged row would land in, as an index into the list
+  // WITHOUT it. The other rows part to open that slot — but they part by
+  // `transform` only, which changes no layout, so the rects measured at
+  // pointerdown stay true for the whole gesture. Re-measuring a moved row
+  // against the cursor that moved it is the feedback loop this avoids.
+  const [reorderDrag, setReorderDrag] = useState<
+    { id: string; dy: number; to: number } | null
+  >(null);
+  const dragRects = useRef<{ id: string; top: number; height: number }[]>([]);
+  const dragStartY = useRef(0);
+  const reorderDragRef = useRef(false);
+
+  /** Where the dragged row would land, from the pointer's Y: the number of OTHER
+   *  rows whose midpoint the cursor has passed — i.e. an index into the list
+   *  without the dragged row, which is exactly what `commitMove` splices at. */
+  const dropSlot = (id: string, clientY: number) => {
+    const rest = dragRects.current.filter((r) => r.id !== id);
+    return rest.filter((r) => clientY > r.top + r.height / 2).length;
+  };
+
+  const [removeArm, setRemoveArm] = useState<string | null>(null);
+  const [disconnectArm, setDisconnectArm] = useState<string | null>(null);
+  // Fleet-wide actions (retry all / disconnect all). `disconnectAllArm` gates the
+  // destructive one behind a confirm, exactly as the per-row `disconnectArm` does.
+  const [retryAllBusy, setRetryAllBusy] = useState(false);
+  const [disconnectAllArm, setDisconnectAllArm] = useState(false);
+  const [retryId, setRetryId] = useState<string | null>(null);
+  const [retryPassword, setRetryPassword] = useState("");
+  // Rows render compact by default (lamp + label + actions only) — target
+  // address, usage meters and the auto-connect toggle are behind a per-row
+  // expand so a long machine list stays scannable.
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
+  const toggleExpanded = (id: string) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const [adding, setAdding] = useState(false);
+  const [address, setAddress] = useState("");
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [label, setLabel] = useState("");
+  const [savePassword, setSavePassword] = useState(false);
+  // Arm the new machine for the launch / VPN-up sweep straight from the add form,
+  // so a machine you connect once can silently reconnect on relaunch without
+  // opening its row to flip the per-row toggle. Off by default: arming is opt-in
+  // (matches a fresh machine's `auto_connect`), and safe either way — the sweep
+  // probes first, so an armed host that can't connect silently just stays dark.
+  const [addAuto, setAddAuto] = useState(false);
+  const [addError, setAddError] = useState("");
+  const [addBusy, setAddBusy] = useState(false);
+
+  // Per-row inline edit of an existing machine's connection identity. `editId`
+  // is the row being edited; the fields are prefilled from it in `startEdit`.
+  // The password field is blank ("keep the saved credential") unless the user
+  // wants to change it — see `submitEdit`.
+  const [editId, setEditId] = useState<string | null>(null);
+  const [editAddress, setEditAddress] = useState("");
+  const [editUser, setEditUser] = useState("");
+  const [editPassword, setEditPassword] = useState("");
+  const [editLabel, setEditLabel] = useState("");
+  const [editSave, setEditSave] = useState(false);
+  const [editError, setEditError] = useState("");
+  const [editBusy, setEditBusy] = useState(false);
+
+  // Import / export sub-flows. `ioMode` picks which panel replaces the normal
+  // machine list + add-form; both are one-off modal flows within the menu.
+  const [ioMode, setIoMode] = useState<"idle" | "export" | "import">("idle");
+  // Export: which machines (by id) go into the file — all ticked by default.
+  const [exportSel, setExportSel] = useState<Set<string>>(new Set());
+  const [ioBusy, setIoBusy] = useState(false);
+  const [ioError, setIoError] = useState("");
+  // Import: the entries read from the picked file, plus the ONE shared
+  // credential the whole batch connects with (a file carries no username/
+  // password by design). `importResult` holds the per-host outcome once the run
+  // finishes, so the panel switches from form to summary.
+  const [importEntries, setImportEntries] = useState<MachineImportEntry[]>([]);
+  const [importUser, setImportUser] = useState("");
+  const [importPassword, setImportPassword] = useState("");
+  const [importSave, setImportSave] = useState(false);
+  // Arm every imported machine for the launch / VPN-up sweep. Default ON: an
+  // imported fleet is one the user wants available, and arming can't misfire —
+  // `autoConnect` probes before it connects, so a row that can't come up
+  // silently stays dark rather than prompting. Untick to import them inert.
+  const [importAuto, setImportAuto] = useState(true);
+  const [importResult, setImportResult] = useState<ImportResult[] | null>(null);
+
+  const closeIo = () => {
+    keepOpenRef.current = false;
+    setIoMode("idle");
+    setIoBusy(false);
+    setIoError("");
+    setImportEntries([]);
+    setImportUser("");
+    setImportPassword("");
+    setImportSave(false);
+    setImportResult(null);
+  };
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  useEffect(() => {
+    if (!open) {
+      // A genuinely-closed menu (keepOpenRef already gates a mid-flow close)
+      // drops any half-finished import/export so it can't reappear on reopen.
+      closeIo();
+      return;
+    }
+    setRemoveArm(null);
+    setDisconnectArm(null);
+    setDisconnectAllArm(false);
+    setEditId(null);
+    setAttachId(null);
+    // Reachability first, then the busy sweep over whatever came back connected
+    // — a machine that isn't up has nothing to ask about, and asking would cost
+    // a doomed SSH round trip per host. On-open only: the busy reading is never
+    // polled (see `stores/hostBusy`), so a fleet of sixteen costs sixteen cheap
+    // `tmux ls`es when you look at it and nothing at all when you don't.
+    void probeAll().then(() => {
+      const gm = useGlobalMachinesStore.getState();
+      const probeBusy = useHostBusyStore.getState().probeGlobal;
+      for (const m of gm.machines) {
+        if ((gm.status[m.id] ?? "off") === "connected") void probeBusy(m);
+      }
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, probeAll]);
+
+  const orderKey = machines.map((m) => m.id).join("|");
+
+  /** Commit a reorder: pull `id` out of the list and splice it back in at `to`
+   *  (an index into the list WITHOUT it). The FLIP pass below animates the
+   *  result, so both the drop and the keyboard nudge read as movement. */
+  const commitMove = (id: string, to: number) => {
+    const ids = machines.map((m) => m.id);
+    const from = ids.indexOf(id);
+    if (from < 0 || to < 0 || to > ids.length - 1) return;
+    if (to === from) return;
+    ids.splice(from, 1);
+    ids.splice(to, 0, id);
+    void reorder(ids);
+  };
+
+  // Keyboard equivalent of the drag, on the focused grip: a reorder must not be
+  // pointer-only.
+  const nudgeMachine = (id: string, delta: number) =>
+    commitMove(id, machines.findIndex((m) => m.id === id) + delta);
+
+  const startReorderDrag = (id: string, e: React.PointerEvent<HTMLElement>) => {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    e.stopPropagation();
+    e.currentTarget.setPointerCapture(e.pointerId);
+    dragStartY.current = e.clientY;
+    // Measure every row ONCE, up front: the DOM order is frozen for the duration
+    // of the drag precisely so these stay true.
+    dragRects.current = machines.map((mm) => {
+      const rect = rowRefs.current.get(mm.id)?.getBoundingClientRect();
+      return { id: mm.id, top: rect?.top ?? 0, height: rect?.height ?? 0 };
+    });
+    reorderDragRef.current = true;
+    setReorderDrag({ id, dy: 0, to: dropSlot(id, e.clientY) });
+  };
+
+  const moveReorderDrag = (e: React.PointerEvent<HTMLElement>) => {
+    if (!reorderDrag) return;
+    const dy = e.clientY - dragStartY.current;
+    const to = dropSlot(reorderDrag.id, e.clientY);
+    if (dy !== reorderDrag.dy || to !== reorderDrag.to) setReorderDrag({ ...reorderDrag, dy, to });
+  };
+
+  const endReorderDrag = (e: React.PointerEvent<HTMLElement>, commit: boolean) => {
+    if (!reorderDrag) return;
+    const { id } = reorderDrag;
+    reorderDragRef.current = false;
+    setReorderDrag(null);
+    if (commit) commitMove(id, dropSlot(id, e.clientY));
+  };
+
+  // FLIP: after the reordered rows paint, translate each card from where it was
+  // to where it now is (0ms), then release the transform on the next frame so it
+  // slides into place. WebKitGTK animates `transform` cheaply, and comparing top
+  // offsets tolerates the rows' variable height (an expanded row is taller).
+  useLayoutEffect(() => {
+    const next = new Map<string, number>();
+    rowRefs.current.forEach((el, id) => {
+      const top = el.getBoundingClientRect().top;
+      next.set(id, top);
+      const prev = prevRects.current.get(id);
+      if (prev !== undefined) {
+        const dy = prev - top;
+        if (Math.abs(dy) > 0.5) {
+          el.style.transition = "none";
+          el.style.transform = `translateY(${dy}px)`;
+          // Force a reflow so the pre-slide transform is committed before release.
+          void el.offsetHeight;
+          requestAnimationFrame(() => {
+            el.style.transition = "transform 160ms ease";
+            el.style.transform = "";
+          });
+        }
+      }
+    });
+    prevRects.current = next;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [orderKey]);
+
+  const reveal = () => {
+    window.clearTimeout(closeTimer.current);
+    setOpen(true);
+  };
+  const scheduleClose = () => {
+    // A reorder drag can carry the pointer off the menu's bounds (the grip holds
+    // a pointer capture, so the gesture continues regardless) — closing under it
+    // would unmount the rows mid-drag. Read from a ref, not `reorderDrag`, so
+    // the guard is live in the same tick the gesture starts.
+    if (keepOpenRef.current || reorderDragRef.current) return;
+    window.clearTimeout(closeTimer.current);
+    closeTimer.current = window.setTimeout(() => setOpen(false), 180);
+  };
+
+  // Group the machines by SSH state so each colour is drawn once, with a count —
+  // exactly like a project pill's `RemoteConnMenu` aggregates its hosts. No
+  // machines at all still shows one grey "off" lamp so the indicator is never
+  // blank.
+  //
+  // Busy is folded into the EXISTING green lamp — it never adds one. The header
+  // strip is a fixed, tiny budget of dots (one per state present) and splitting
+  // "connected" into working/idle would grow it exactly when the fleet is most
+  // active. So the one green lamp pulses when ANY connected machine is working,
+  // and its tooltip carries the count and the names. The per-machine answer
+  // belongs one level down, on the rows, where each lamp is its own host.
+  const lampGroups = (() => {
+    const grouped = STATUS_ORDER.map((st) => {
+      const inState = machines.filter((m) => (status[m.id] ?? "off") === st);
+      const working =
+        st === "connected" ? inState.filter((m) => busyReading({ readings }, m) !== null) : [];
+      return { st, machines: inState, working };
+    }).filter((g) => g.machines.length > 0);
+    return grouped.length > 0
+      ? grouped
+      : [{ st: "off" as ConnState, machines: [] as GlobalMachine[], working: [] as GlobalMachine[] }];
+  })();
+
+  const startRetry = (id: string) => {
+    setRetryId(id);
+    setRetryPassword("");
+  };
+  const submitRetry = async (id: string) => {
+    await connect(id, retryPassword || undefined);
+    setRetryId(null);
+    setRetryPassword("");
+  };
+
+  const connectedCount = machines.filter((m) => (status[m.id] ?? "off") === "connected").length;
+  const runRetryAll = async () => {
+    setRetryAllBusy(true);
+    try {
+      await retryAll();
+    } finally {
+      setRetryAllBusy(false);
+    }
+  };
+
+  const submitAdd = async () => {
+    const parsed = parseSshAddress(address);
+    if (!parsed) {
+      setAddError("Enter a host as [user@]host[:port]");
+      return;
+    }
+    setAddBusy(true);
+    setAddError("");
+    try {
+      const machine = await add({
+        user: parsed.user ?? (username.trim() || undefined),
+        host: parsed.host,
+        port: parsed.port ?? undefined,
+        label: label.trim() || undefined,
+        password: password || undefined,
+        remember: savePassword,
+      });
+      // Arm the launch/VPN-up sweep in the same step if the user asked — the add
+      // already connected it now; this only persists the future intent.
+      if (addAuto) await setAutoConnect(machine.id, true);
+      setAddress("");
+      setUsername("");
+      setPassword("");
+      setLabel("");
+      setSavePassword(false);
+      setAddAuto(false);
+      setAdding(false);
+    } catch (e) {
+      setAddError(String(e));
+    } finally {
+      setAddBusy(false);
+    }
+  };
+
+  const startEdit = (m: (typeof machines)[number]) => {
+    setEditId(m.id);
+    setEditAddress(`${m.host}${m.port ? `:${m.port}` : ""}`);
+    setEditUser(m.user ?? "");
+    setEditPassword("");
+    setEditLabel(m.label ?? "");
+    setEditSave(false);
+    setEditError("");
+  };
+  const submitEdit = async (id: string) => {
+    const orig = machines.find((m) => m.id === id);
+    const parsed = parseSshAddress(editAddress);
+    if (!parsed) {
+      setEditError("Enter a host as [user@]host[:port]");
+      return;
+    }
+    const user = parsed.user ?? (editUser.trim() || undefined);
+    const port = parsed.port ?? undefined;
+    // Reconnect only when a connection-relevant field changed, or the user typed
+    // a new password / asked to (re)save it — a label-only edit must not force an
+    // SSH round trip (which could prompt or be slow).
+    const targetChanged =
+      user !== (orig?.user ?? undefined) ||
+      parsed.host !== orig?.host ||
+      port !== (orig?.port ?? undefined);
+    const doConnect = targetChanged || !!editPassword || editSave;
+    setEditBusy(true);
+    setEditError("");
+    try {
+      await update(
+        id,
+        { user, host: parsed.host, port, label: editLabel.trim() || undefined },
+        { password: editPassword || undefined, remember: editSave, connect: doConnect },
+      );
+      setEditId(null);
+      setEditPassword("");
+    } catch (e) {
+      setEditError(String(e));
+    } finally {
+      setEditBusy(false);
+    }
+  };
+
+  const startExport = () => {
+    setAdding(false);
+    setIoError("");
+    setExportSel(new Set(machines.map((m) => m.id))); // all ticked by default
+    keepOpenRef.current = true;
+    setIoMode("export");
+  };
+  const toggleExportSel = (id: string) => {
+    setExportSel((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+  // Select-all/none for the export list: one toggle instead of N unticks when
+  // the user wants to share a single machine out of a large fleet. "All ticked"
+  // is the checked state, so the first click always *clears* — which is the
+  // direction that's tedious by hand, since opening the panel ticks everything.
+  const allExportSelected = machines.length > 0 && exportSel.size === machines.length;
+  const toggleExportSelAll = () => {
+    setExportSel(allExportSelected ? new Set() : new Set(machines.map((m) => m.id)));
+  };
+  const doExport = async () => {
+    const ids = machines.map((m) => m.id).filter((id) => exportSel.has(id));
+    if (ids.length === 0) return;
+    setIoBusy(true);
+    setIoError("");
+    try {
+      // The dialog moves the pointer off the menu; `keepOpenRef` (already set)
+      // keeps it from closing while the native picker is up.
+      const path = await saveDialog({
+        title: "Export machines",
+        defaultPath: "eldrun-machines.json",
+        filters: [{ name: "Machines JSON", extensions: ["json"] }],
+      });
+      if (!path) {
+        setIoBusy(false);
+        return; // cancelled — stay on the export panel
+      }
+      await exportMachines(ids, path);
+      closeIo();
+    } catch (e) {
+      setIoError(String(e));
+      setIoBusy(false);
+    }
+  };
+
+  const startImport = async () => {
+    setAdding(false);
+    setIoError("");
+    keepOpenRef.current = true;
+    setIoMode("import");
+    setIoBusy(true);
+    try {
+      const picked = await openDialog({
+        title: "Import machines",
+        multiple: false,
+        directory: false,
+        filters: [{ name: "Machines JSON", extensions: ["json"] }],
+      });
+      const path = Array.isArray(picked) ? picked[0] : picked;
+      if (!path) {
+        closeIo(); // nothing picked — leave the menu as it was
+        return;
+      }
+      const entries = await invoke<MachineImportEntry[]>("global_machines_import_read", {
+        path,
+      });
+      setImportEntries(entries);
+      setImportResult(null);
+    } catch (e) {
+      setIoError(String(e));
+    } finally {
+      setIoBusy(false);
+    }
+  };
+  const doImport = async () => {
+    if (importEntries.length === 0) return;
+    setIoBusy(true);
+    setIoError("");
+    try {
+      const result = await importMachines(importEntries, {
+        user: importUser.trim() || undefined,
+        password: importPassword || undefined,
+        remember: importSave,
+        autoConnect: importAuto,
+      });
+      setImportResult(result);
+    } catch (e) {
+      setIoError(String(e));
+    } finally {
+      setIoBusy(false);
+    }
+  };
+
+  return (
+    <div className="global-apps-menu no-drag" onMouseEnter={reveal} onMouseLeave={scheduleClose}>
+      <button
+        type="button"
+        className="global-apps-menu-btn machines-indicator-btn"
+        aria-label="Global machines — connect or drag onto a project"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        title="Global worker machines — connect once, then drag onto any SSH project to add it there."
+        onClick={reveal}
+        onFocus={reveal}
+      >
+        <span className="header-conn-lamps">
+          {lampGroups.map((g) => (
+            <span key={g.st} className="conn-lamp-count">
+              <ConnLamp
+                status={g.st}
+                busy={g.working.length > 0}
+                label={
+                  g.machines.length > 0
+                    ? `${g.machines.length} ${STATUS_WORD[g.st]} — ${g.machines.map((m) => m.label || m.host).join(", ")}` +
+                      (g.working.length > 0
+                        ? `\n${g.working.length} working: ${g.working.map((m) => m.label || m.host).join(", ")}`
+                        : "")
+                    : "Machines"
+                }
+              />
+              {g.machines.length > 1 && (
+                <span className="conn-lamp-count-num">{g.machines.length}</span>
+              )}
+            </span>
+          ))}
+        </span>
+        <span className="vpn-indicator-label">Machines</span>
+      </button>
+      {open && (
+        <div className="tab-new-menu vpn-indicator-menu machines-indicator-menu" role="menu">
+          {/* Pinned title: stays put while the region below it scrolls, so the
+              scrollbar starts beneath the header (unified `.menu-scroll-region`
+              shape). Keeping it OUT of the scroller also spares the accent rail /
+              rounded top from the native scrollbar running over them. */}
+          <div className="tab-new-menu-group-label">Global machines</div>
+          <div className="menu-scroll-region">
+          {ioMode === "export" ? (
+            <div className="vpn-indicator-row menu-form machines-io-panel">
+              <div className="vpn-indicator-note">
+                Choose which machines to write to a shareable JSON file. Only the
+                host, port and label are saved — never a username or password.
+                <UntestedTag />
+              </div>
+              {machines.length === 0 ? (
+                <div className="vpn-indicator-empty">No machines to export.</div>
+              ) : (
+                <>
+                <label
+                  className="vpn-indicator-auto machines-io-pick machines-io-pick-all"
+                  title={allExportSelected ? "Deselect every machine" : "Select every machine"}
+                >
+                  <Toggle checked={allExportSelected} onChange={toggleExportSelAll} size="sm" />
+                  <span>{allExportSelected ? "Deselect all" : "Select all"}</span>
+                </label>
+                {machines.map((m) => (
+                  <label
+                    key={m.id}
+                    className="vpn-indicator-auto machines-io-pick"
+                    title={targetLabel(m)}
+                  >
+                    <Toggle
+                      checked={exportSel.has(m.id)}
+                      onChange={() => toggleExportSel(m.id)}
+                      size="sm"
+                    />
+                    <span>
+                      {m.label || m.host}
+                      <span className="machines-io-addr">
+                        {`${m.host}${m.port ? `:${m.port}` : ""}`}
+                      </span>
+                    </span>
+                  </label>
+                ))}
+                </>
+              )}
+              {ioError && <div className="vpn-indicator-error">{ioError}</div>}
+              <div className="vpn-indicator-actions">
+                <button
+                  type="button"
+                  className="vpn-indicator-connect"
+                  disabled={ioBusy || exportSel.size === 0}
+                  onClick={() => void doExport()}
+                >
+                  {ioBusy ? "Saving…" : `Export ${exportSel.size}…`}
+                </button>
+                <button type="button" className="vpn-indicator-remove" onClick={closeIo}>
+                  Cancel
+                </button>
+              </div>
+            </div>
+          ) : ioMode === "import" ? (
+            <div className="vpn-indicator-row menu-form machines-io-panel">
+              {importResult ? (
+                <>
+                  <div className="vpn-indicator-note">
+                    Added {importResult.length} machine
+                    {importResult.length === 1 ? "" : "s"}.{" "}
+                    {importResult.filter((r) => r.ok).length} connected,{" "}
+                    {importResult.filter((r) => !r.ok).length} need attention.
+                  </div>
+                  <div className="machines-io-results">
+                    {importResult.map((r, i) => (
+                      <div key={`${r.host}-${i}`} className="machines-io-result-row">
+                        <ConnLamp status={r.ok ? "connected" : "error"} label={r.host} />
+                        <span>{r.label || r.host}</span>
+                      </div>
+                    ))}
+                  </div>
+                  <div className="vpn-indicator-actions">
+                    <button type="button" className="vpn-indicator-connect" onClick={closeIo}>
+                      Done
+                    </button>
+                  </div>
+                </>
+              ) : (
+                <>
+                  <div className="vpn-indicator-note">
+                    {ioBusy && importEntries.length === 0
+                      ? "Reading file…"
+                      : `${importEntries.length} machine${importEntries.length === 1 ? "" : "s"} from the file. They'll all be connected with the one username & password below, then added to your list.`}
+                    <UntestedTag />
+                  </div>
+                  {importEntries.length > 0 && (
+                    <div className="machines-io-preview">
+                      {importEntries.map((e, i) => (
+                        <div key={`${e.host}-${i}`} className="machines-io-addr">
+                          {`${e.user ? `${e.user}@` : ""}${e.host}${e.port ? `:${e.port}` : ""}`}
+                          {e.label ? ` — ${e.label}` : ""}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                  <label>
+                    Username
+                    <input
+                      placeholder="Shared SSH user for all imported machines"
+                      value={importUser}
+                      onChange={(e) => setImportUser(e.target.value)}
+                      autoComplete="off"
+                      spellCheck={false}
+                    />
+                  </label>
+                  <label>
+                    Password
+                    <PasswordInput
+                      placeholder="Shared SSH password — leave blank for key auth"
+                      value={importPassword}
+                      autoComplete="off"
+                      onChange={(e) => setImportPassword(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") void doImport();
+                      }}
+                    />
+                  </label>
+                  <label className="vpn-indicator-auto">
+                    <Toggle
+                      checked={importSave}
+                      onChange={(e) => setImportSave(e.target.checked)}
+                      size="sm"
+                    />
+                    <span>
+                      Save password
+                      <UntestedTag />
+                    </span>
+                  </label>
+                  <label
+                    className="vpn-indicator-auto"
+                    title="Silently connect every imported machine on Eldrun launch and whenever a VPN tunnel comes up. Never prompts — each host is probed first, so one that needs a password you didn't save simply stays off."
+                  >
+                    <Toggle
+                      checked={importAuto}
+                      onChange={(e) => setImportAuto(e.target.checked)}
+                      size="sm"
+                    />
+                    <span>
+                      Connect on launch &amp; VPN-up
+                      <UntestedTag />
+                    </span>
+                  </label>
+                  {ioError && <div className="vpn-indicator-error">{ioError}</div>}
+                  <div className="vpn-indicator-actions">
+                    <button
+                      type="button"
+                      className="vpn-indicator-connect"
+                      disabled={ioBusy || importEntries.length === 0}
+                      onClick={() => void doImport()}
+                    >
+                      {ioBusy ? "Connecting…" : "Connect & import"}
+                    </button>
+                    <button type="button" className="vpn-indicator-remove" onClick={closeIo}>
+                      Cancel
+                    </button>
+                  </div>
+                </>
+              )}
+            </div>
+          ) : (
+            <>
+          <div className="vpn-indicator-note">
+            <strong>Drag a machine onto a project</strong> to add it as a shared-folder
+            worker. Drag a row onto another to reorder.
+            <UntestedTag />
+          </div>
+
+          {machines.length > 0 && disconnectAllArm ? (
+            <div className="vpn-indicator-row machines-fleet-actions">
+              <div className="vpn-indicator-hint">
+                Ends <strong>all tmux jobs</strong> on every connected machine and
+                disconnects them. Can't be undone.
+                <UntestedTag />
+              </div>
+              <div className="vpn-indicator-actions">
+                <button
+                  type="button"
+                  className="vpn-indicator-remove"
+                  onClick={() => {
+                    setDisconnectAllArm(false);
+                    void disconnectAll();
+                  }}
+                >
+                  Disconnect all &amp; end jobs
+                </button>
+                <button
+                  type="button"
+                  className="vpn-indicator-connect"
+                  onClick={() => setDisconnectAllArm(false)}
+                >
+                  Keep
+                </button>
+              </div>
+            </div>
+          ) : (
+            /* One icon bar for every fleet-wide action, in the same glyph
+               vocabulary a machine row uses for the same verbs (↻ retry, ⏻
+               disconnect) — so "all machines" reads as the row action applied
+               to the list, not as a different feature with its own wording.
+               The usage report joins it (▥, the system-monitor glyph): it used
+               to open itself after every remote connect, putting a modal in
+               front of someone who had asked for something else. It is on
+               demand now, and this is the only thing that opens it. Its subject
+               is THIS list — a section per machine, in this menu's order — plus
+               the active project's own hosts that aren't in it
+               (`RemoteUsageWarningDialog`); each is read afresh as the dialog
+               appears. */
+            <div className="vpn-indicator-row vpn-indicator-actions machines-fleet-actions machines-fleet-icons">
+              {machines.length > 0 && (
+                <button
+                  type="button"
+                  className="machines-row-action is-accent"
+                  disabled={retryAllBusy}
+                  aria-label="Retry all"
+                  title="Retry all — connect every machine that isn't already connected. A host that needs a password we don't have stays red to retry on its own row."
+                  onClick={() => void runRetryAll()}
+                >
+                  {retryAllBusy ? "⋯" : "↻"}
+                </button>
+              )}
+              {machines.length > 0 && connectedCount > 0 && (
+                <button
+                  type="button"
+                  className="machines-row-action is-danger"
+                  aria-label="Disconnect all"
+                  title="Disconnect all — actively disconnect every connected machine: end all their tmux jobs and close each SSH connection. Jobs are killed only on this click — never on an Eldrun restart."
+                  onClick={() => setDisconnectAllArm(true)}
+                >
+                  ⏻
+                </button>
+              )}
+              <button
+                type="button"
+                className="machines-row-action"
+                aria-label="Remote host usage"
+                title="Remote host usage — check who's logged in and what's running on every machine here: CPU, memory, GPU and top processes, read right now."
+                onClick={() => {
+                  setOpen(false);
+                  openUsage();
+                }}
+              >
+                ▥
+              </button>
+              <UntestedTag />
+            </div>
+          )}
+
+          {machines.length === 0 && (
+            <div className="vpn-indicator-row">
+              <div className="vpn-indicator-empty">No global machines yet.</div>
+            </div>
+          )}
+          {/* While a row is dragged, the others PART to open its landing slot: a
+              row the dragged one has passed slides back by exactly the dragged
+              row's height (removing it from above lifts them; inserting it above
+              drops them — the same distance either way, whatever their own
+              heights). It is a `transform`, so no layout moves and the rects
+              measured at pointerdown stay valid. */}
+          {machines.map((m, idx) => {
+            const st = status[m.id] ?? "off";
+            // Only a connected machine pulses: a reading taken before it dropped
+            // says nothing about it now.
+            const busy = st === "connected" ? busyReading({ readings }, m) : null;
+            const dragH = reorderDrag
+              ? (dragRects.current.find((r) => r.id === reorderDrag.id)?.height ?? 0)
+              : 0;
+            const dragFrom = reorderDrag ? machines.findIndex((mm) => mm.id === reorderDrag.id) : -1;
+            const shift =
+              !reorderDrag || idx === dragFrom
+                ? 0
+                : idx > dragFrom && idx <= reorderDrag.to
+                  ? -dragH
+                  : idx < dragFrom && idx >= reorderDrag.to
+                    ? dragH
+                    : 0;
+            // A row shows its icon actions only while nothing has taken the row
+            // over: an armed confirm (remove/disconnect), the retry password
+            // field, or the edit form each replace them with worded buttons.
+            const rowFormOpen =
+              retryId === m.id ||
+              removeArm === m.id ||
+              disconnectArm === m.id ||
+              editId === m.id ||
+              attachId === m.id;
+            return (
+              <div
+                key={m.id}
+                ref={(el) => {
+                  if (el) rowRefs.current.set(m.id, el);
+                  else rowRefs.current.delete(m.id);
+                }}
+                className={`vpn-indicator-row machines-indicator-row${
+                  reorderDrag?.id === m.id ? " reorder-dragging" : reorderDrag ? " reorder-parting" : ""
+                }`}
+                style={
+                  reorderDrag?.id === m.id
+                    ? { transform: `translateY(${reorderDrag.dy}px)` }
+                    : shift
+                      ? { transform: `translateY(${shift}px)` }
+                      : undefined
+                }
+              >
+                <div className="vpn-indicator-head">
+                  <button
+                    type="button"
+                    className="machines-row-grip"
+                    aria-label="Reorder machine"
+                    title="Drag to reorder this machine — or focus it and use ↑/↓."
+                    onPointerDown={(e) => startReorderDrag(m.id, e)}
+                    onPointerMove={moveReorderDrag}
+                    onPointerUp={(e) => endReorderDrag(e, true)}
+                    onPointerCancel={(e) => endReorderDrag(e, false)}
+                    onKeyDown={(e) => {
+                      if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
+                      e.preventDefault();
+                      nudgeMachine(m.id, e.key === "ArrowUp" ? -1 : 1);
+                    }}
+                  >
+                    ⠿
+                  </button>
+                  <ConnLamp
+                    status={st}
+                    busy={busy !== null}
+                    label={busy ? `${m.label || m.host} — ${busyLabel(busy)}` : m.label || m.host}
+                  />
+                  <span className="vpn-indicator-config" title={targetLabel(m)}>
+                    {m.label || m.host}
+                  </span>
+                  {!rowFormOpen && (
+                    <div className="machines-row-actions">
+                      <button
+                        type="button"
+                        className="machines-row-action is-accent"
+                        aria-label={st === "connected" ? "Reconnect" : st === "error" ? "Retry" : "Connect"}
+                        title={
+                          st === "connected"
+                            ? "Reconnect"
+                            : st === "error"
+                              ? "Retry — re-enter the SSH password"
+                              : "Connect"
+                        }
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          if (st === "error") startRetry(m.id);
+                          else void connect(m.id);
+                        }}
+                        disabled={st === "connecting"}
+                      >
+                        {st === "connected" || st === "error" ? "↻" : "▷"}
+                      </button>
+                      {st === "connected" && (
+                        <button
+                          type="button"
+                          className="machines-row-action is-danger"
+                          aria-label="Disconnect"
+                          title="Actively disconnect: end every running tmux job on this host and close the SSH connection. Jobs are killed only on this click — never on an Eldrun restart."
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setDisconnectArm(m.id);
+                          }}
+                        >
+                          ⏻
+                        </button>
+                      )}
+                      <button
+                        type="button"
+                        className="machines-row-action"
+                        aria-label="Add this machine to a project"
+                        title="Add this machine to one of the open projects — as a compute host on a remote project, or as the primary host of a local one."
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setAttachId(m.id);
+                        }}
+                      >
+                        ⇥
+                      </button>
+                      <button
+                        type="button"
+                        className="machines-row-action"
+                        aria-label="Edit machine"
+                        title="Edit this machine's host, username, password or label."
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          startEdit(m);
+                        }}
+                      >
+                        ✎
+                      </button>
+                      <button
+                        type="button"
+                        className="machines-row-action is-danger"
+                        aria-label="Remove machine"
+                        title="Remove this machine from the list — actively disconnecting it (and ending its tmux jobs) first if it is connected."
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setRemoveArm(m.id);
+                        }}
+                      >
+                        ✕
+                      </button>
+                    </div>
+                  )}
+                  <button
+                    type="button"
+                    className="machines-row-expand-btn"
+                    aria-label={expandedIds.has(m.id) ? "Hide details" : "Show details"}
+                    aria-expanded={expandedIds.has(m.id)}
+                    title={expandedIds.has(m.id) ? "Hide address, usage & auto-connect" : "Show address, usage & auto-connect"}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      toggleExpanded(m.id);
+                    }}
+                  >
+                    {expandedIds.has(m.id) ? "▾" : "▸"}
+                  </button>
+                </div>
+                {expandedIds.has(m.id) && (
+                  <>
+                    <div className="vpn-indicator-holders">{targetLabel(m)}</div>
+                    <button
+                      type="button"
+                      className="vpn-indicator-connect machines-monitor-btn"
+                      title="Open the full system monitor (CPU, memory, GPU, processes) for this machine."
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        openMonitor({ id: m.id, user: m.user, host: m.host, port: m.port, label: m.label });
+                      }}
+                    >
+                      System monitor…
+                    </button>
+                    <label className="vpn-indicator-auto" title="Silently connect this machine on Eldrun launch and whenever a VPN tunnel comes up. Never prompts — it only connects when the host is reachable without a password.">
+                      <Toggle
+                        checked={m.auto_connect === true}
+                        onChange={(e) => void setAutoConnect(m.id, e.target.checked)}
+                        size="sm"
+                      />
+                      <span>
+                        Connect on launch &amp; VPN-up
+                        <UntestedTag />
+                      </span>
+                    </label>
+                  </>
+                )}
+                {attachId === m.id ? (
+                  <div className="vpn-indicator-row menu-form machines-attach-form">
+                    <div className="vpn-indicator-hint">
+                      Add <strong>{m.label || m.host}</strong> to which project?
+                      <UntestedTag />
+                    </div>
+                    {projects.length === 0 && (
+                      <div className="vpn-indicator-empty">No active project.</div>
+                    )}
+                    {projects.map((p) => (
+                      <button
+                        key={p.id}
+                        type="button"
+                        className="vpn-indicator-connect machines-attach-project"
+                        title={
+                          p.remote
+                            ? "Add it as a compute host on this remote project."
+                            : "Make it this local project's primary remote host (extend to remote)."
+                        }
+                        onClick={() => {
+                          setAttachId(null);
+                          setOpen(false);
+                          attachToProject(p, m);
+                        }}
+                      >
+                        {p.name}
+                        <span className="machines-attach-kind">
+                          {p.remote ? "compute host" : "extend to remote"}
+                        </span>
+                      </button>
+                    ))}
+                    <button type="button" className="vpn-indicator-remove" onClick={() => setAttachId(null)}>
+                      Cancel
+                    </button>
+                  </div>
+                ) : retryId === m.id ? (
+                  <div className="vpn-indicator-actions menu-form">
+                    <PasswordInput
+                      placeholder="SSH password"
+                      value={retryPassword}
+                      autoComplete="off"
+                      onChange={(e) => setRetryPassword(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") void submitRetry(m.id);
+                      }}
+                    />
+                    <button type="button" className="vpn-indicator-connect" onClick={() => void submitRetry(m.id)}>
+                      Retry
+                    </button>
+                    <button type="button" className="vpn-indicator-remove" onClick={() => setRetryId(null)}>
+                      Cancel
+                    </button>
+                  </div>
+                ) : removeArm === m.id ? (
+                  <div className="vpn-indicator-actions">
+                    <div className="vpn-indicator-hint">
+                      {(status[m.id] ?? "off") === "connected" || (status[m.id] ?? "off") === "connecting" ? (
+                        <>
+                          Disconnects it first — ending <strong>all tmux jobs</strong> here — then
+                          removes it from the list. Projects it was added to keep their own copy.
+                          <UntestedTag />
+                        </>
+                      ) : (
+                        "Removes this machine from the list. Projects it was added to keep their own copy."
+                      )}
+                    </div>
+                    <button type="button" className="vpn-indicator-remove" onClick={() => void remove(m.id)}>
+                      Remove
+                    </button>
+                    <button type="button" className="vpn-indicator-connect" onClick={() => setRemoveArm(null)}>
+                      Keep
+                    </button>
+                  </div>
+                ) : disconnectArm === m.id ? (
+                  <div className="vpn-indicator-actions">
+                    <div className="vpn-indicator-hint">
+                      Ends <strong>all tmux jobs</strong> here and disconnects. Can't be undone.
+                      <UntestedTag />
+                    </div>
+                    <button
+                      type="button"
+                      className="vpn-indicator-remove"
+                      onClick={() => {
+                        setDisconnectArm(null);
+                        void disconnect(m.id);
+                      }}
+                    >
+                      Disconnect &amp; end jobs
+                    </button>
+                    <button type="button" className="vpn-indicator-connect" onClick={() => setDisconnectArm(null)}>
+                      Keep
+                    </button>
+                  </div>
+                ) : editId === m.id ? (
+                  <div className="vpn-indicator-row menu-form machines-edit-form">
+                    <label>
+                      SSH address
+                      <input
+                        placeholder="[user@]host[:port]"
+                        value={editAddress}
+                        onChange={(e) => setEditAddress(e.target.value)}
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter") void submitEdit(m.id);
+                        }}
+                        spellCheck={false}
+                        autoFocus
+                      />
+                    </label>
+                    <label>
+                      Username
+                      <input
+                        placeholder="SSH login user — or include as user@ above"
+                        value={editUser}
+                        onChange={(e) => setEditUser(e.target.value)}
+                        autoComplete="off"
+                        spellCheck={false}
+                      />
+                    </label>
+                    <label>
+                      Password
+                      <PasswordInput
+                        placeholder="Leave blank to keep the saved password"
+                        value={editPassword}
+                        autoComplete="off"
+                        onChange={(e) => setEditPassword(e.target.value)}
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter") void submitEdit(m.id);
+                        }}
+                      />
+                    </label>
+                    <label className="vpn-indicator-auto">
+                      <Toggle checked={editSave} onChange={(e) => setEditSave(e.target.checked)} size="sm" />
+                      <span>
+                        Save password
+                        <UntestedTag />
+                      </span>
+                    </label>
+                    <label>
+                      Label (optional)
+                      <input
+                        placeholder="e.g. gpu-2"
+                        value={editLabel}
+                        onChange={(e) => setEditLabel(e.target.value)}
+                        spellCheck={false}
+                      />
+                    </label>
+                    {editError && <div className="vpn-indicator-error">{editError}</div>}
+                    <div className="vpn-indicator-actions">
+                      <button
+                        type="button"
+                        className="vpn-indicator-connect"
+                        disabled={editBusy}
+                        onClick={() => void submitEdit(m.id)}
+                      >
+                        {editBusy ? "Saving…" : "Save changes"}
+                      </button>
+                      <button type="button" className="vpn-indicator-remove" onClick={() => setEditId(null)}>
+                        Cancel
+                      </button>
+                    </div>
+                  </div>
+                ) : null}
+              </div>
+            );
+          })}
+
+          <div className="tab-new-menu-group-label">Add a machine</div>
+          {adding ? (
+            <div className="vpn-indicator-row menu-form">
+              <label>
+                SSH address
+                <input
+                  placeholder="[user@]host[:port]"
+                  value={address}
+                  onChange={(e) => setAddress(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") void submitAdd();
+                  }}
+                  spellCheck={false}
+                  autoFocus
+                />
+              </label>
+              <label>
+                Username
+                <input
+                  placeholder="SSH login user — or include as user@ above"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  autoComplete="off"
+                  spellCheck={false}
+                />
+              </label>
+              <label>
+                Password
+                <PasswordInput
+                  placeholder="SSH password — leave blank for key auth"
+                  value={password}
+                  autoComplete="off"
+                  onChange={(e) => setPassword(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") void submitAdd();
+                  }}
+                />
+              </label>
+              <label className="vpn-indicator-auto">
+                <Toggle checked={savePassword} onChange={(e) => setSavePassword(e.target.checked)} size="sm" />
+                <span>
+                  Save password
+                  <UntestedTag />
+                </span>
+              </label>
+              <label
+                className="vpn-indicator-auto"
+                title="Silently connect this machine on Eldrun launch and whenever a VPN tunnel comes up. Never prompts — it only connects when the host is reachable without a password, so an armed machine that can't connect silently simply stays off."
+              >
+                <Toggle checked={addAuto} onChange={(e) => setAddAuto(e.target.checked)} size="sm" />
+                <span>
+                  Connect on launch &amp; VPN-up
+                  <UntestedTag />
+                </span>
+              </label>
+              <label>
+                Label (optional)
+                <input
+                  placeholder="e.g. gpu-2"
+                  value={label}
+                  onChange={(e) => setLabel(e.target.value)}
+                  spellCheck={false}
+                />
+              </label>
+              {addError && <div className="vpn-indicator-error">{addError}</div>}
+              <div className="vpn-indicator-actions">
+                <button type="button" className="vpn-indicator-connect" disabled={addBusy} onClick={() => void submitAdd()}>
+                  {addBusy ? "Connecting…" : "Connect & add"}
+                </button>
+                <button type="button" className="vpn-indicator-remove" onClick={() => setAdding(false)}>
+                  Cancel
+                </button>
+              </div>
+            </div>
+          ) : (
+            <div className="vpn-indicator-row vpn-indicator-browse machines-io-buttons">
+              <button type="button" className="vpn-indicator-connect" onClick={() => setAdding(true)}>
+                Add machine…
+              </button>
+              <button
+                type="button"
+                className="vpn-indicator-connect"
+                title="Import machines from a JSON file — connect them all with one shared username & password, then add them to this list."
+                onClick={() => void startImport()}
+              >
+                Import…
+              </button>
+              <button
+                type="button"
+                className="vpn-indicator-connect"
+                disabled={machines.length === 0}
+                title="Write selected machines to a shareable JSON file (host, port & label only — no credentials)."
+                onClick={startExport}
+              >
+                Export…
+              </button>
+            </div>
+          )}
+            </>
+          )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/header/RemoteConnMenu.tsx b/src/components/header/RemoteConnMenu.tsx
index 3494652..c4798d3 100644
--- a/src/components/header/RemoteConnMenu.tsx
+++ b/src/components/header/RemoteConnMenu.tsx
@@ -1,32 +1,103 @@
 import { ConnLamp } from "../common/ConnLamp";
 import { useRemoteStatusStore } from "../../stores/remoteStatus";
-import { useConnectDialogStore } from "../../stores/connectDialog";
+import { useRemoteMachinesStore } from "../../stores/remoteMachines";
+import { useHostBusyStore, isBusy } from "../../stores/hostBusy";
+import type { ConnState } from "../../stores/remoteStatus";
 import type { ProjectEntry } from "../../types";
 
 /**
  * A remote project's live SSH status, rendered on the project's pill.
  *
- * OpenVPN is machine-wide, not project-scoped, so its lamp lives only in the
- * header's `VpnIndicator` — this menu tracks SSH alone. Clicking opens the
- * centered Connect modal (`RemoteConnectDialog`) for this project — the single
- * place to (re)connect or disconnect its pooled SSH/SFTP connection.
+ * A project can reach many hosts (the primary plus extra "worker" machines,
+ * multi-host remote, `docs/multi_host_remote_plan.md`). Rather than one lamp
+ * per host — a long row of near-identical dots once a project has several
+ * machines — the hosts are **aggregated by status**: one lamp per distinct
+ * state (connected / connecting / error / off), each carrying the count of
+ * hosts in that state, and a state with no hosts shows no lamp. So four
+ * connected machines read as a single green lamp badged "4", and a mixed fleet
+ * reads as one lamp per colour that is actually present. The count badge is
+ * shown only when a group holds more than one host, so the common
+ * single-primary project still shows a plain lamp.
  *
- * One-click logout deliberately does NOT live here — it sits beside the
- * Remote/Local switch in the right file panel (`RightPanel`), keeping the pill
- * to status + open-modal only (the modal keeps a Disconnect for the
- * connecting/error states, where an in-flight attempt still has to be
- * abandoned).
+ * OpenVPN is machine-wide, not project-scoped, so its lamp lives only in the
+ * header's `VpnIndicator` — this menu tracks SSH alone. Clicking opens the one
+ * unified "Remote machines" hub (`RemoteMachinesWindow`), which lists every
+ * host with an entry apiece plus Add-a-machine; the per-host Connect/Manage
+ * there opens the centered Connect detail (`RemoteConnectDialog`). The pill
+ * stays status + open-hub only.
  *
  * Remote projects start DISCONNECTED — they are not auto-connected on launch or
  * switch (that raced the tab restore and hung). Local tabs still restore and
  * work on the mirror while disconnected; only remote panes wait for the pool,
  * which the modal brings up.
  */
+
+/** Lamp order — most-relevant state first, so a fleet with any error/connecting
+ *  host surfaces that colour ahead of the steady-state green/grey. */
+const STATUS_ORDER: ConnState[] = ["error", "connecting", "connected", "off"];
+
+const STATUS_WORD: Record<ConnState, string> = {
+  error: "error",
+  connecting: "connecting",
+  connected: "connected",
+  off: "off",
+};
+
 export function RemoteConnMenu({ project, compact }: { project: ProjectEntry; compact?: boolean }) {
   const status = useRemoteStatusStore((s) => s.byProject[project.id]);
-  const openDialog = useConnectDialogStore((s) => s.open);
-  const ssh = status?.ssh ?? "off";
+  const byHost = useRemoteStatusStore((s) => s.byHost[project.id]);
+  const openHub = useRemoteMachinesStore((s) => s.open);
+  const readings = useHostBusyStore((s) => s.readings);
+  const primarySsh = status?.ssh ?? "off";
   const host = project.remote?.host ?? "";
+  const hostLabel = project.remote?.label || host;
+  const workers = project.compute_hosts ?? [];
+
+  // Every host this project reaches, tagged with its live SSH state and whether
+  // it is **working** (≥1 tmux session, `stores/hostBusy`) — the primary first,
+  // then each worker.
+  //
+  // The busy half is read from the cache and never probed here: these lamps are
+  // always on screen, so probing from them would be a background poll of every
+  // host of every open project — exactly the traffic the busy reading is
+  // designed not to cost. The sweeps live in the surfaces you deliberately open
+  // (the header Machines menu, the Remote-machines hub this button opens), and a
+  // reading goes stale rather than lying.
+  const hosts: { label: string; ssh: ConnState; busy: boolean }[] = [
+    {
+      label: hostLabel,
+      ssh: primarySsh,
+      busy: isBusy({ readings }, project.remote, primarySsh === "connected"),
+    },
+    ...workers.map((w) => {
+      const ssh = byHost?.[w.id]?.ssh ?? ("off" as ConnState);
+      return {
+        label: w.label || w.host || w.id,
+        ssh,
+        busy: isBusy({ readings }, w, ssh === "connected"),
+      };
+    }),
+  ];
+
+  // Group the hosts by state so each colour is drawn once, with a count. Busy
+  // folds into the existing green lamp rather than adding a second one — the
+  // pill's lamp strip is the tightest space in the UI and must not grow with the
+  // fleet. The count of working hosts rides the tooltip; the per-host answer is
+  // in the hub this button opens.
+  const groups = STATUS_ORDER.map((st) => {
+    const inState = hosts.filter((h) => h.ssh === st);
+    return { st, hosts: inState, working: inState.filter((h) => h.busy) };
+  }).filter((g) => g.hosts.length > 0);
+
+  const title = groups
+    .map(
+      (g) =>
+        `${g.hosts.length} ${STATUS_WORD[g.st]}: ${g.hosts.map((h) => h.label).join(", ")}` +
+        (g.working.length > 0
+          ? `\n${g.working.length} working: ${g.working.map((h) => h.label).join(", ")}`
+          : ""),
+    )
+    .join("\n");
 
   return (
     <div
@@ -36,14 +107,28 @@ export function RemoteConnMenu({ project, compact }: { project: ProjectEntry; co
       <button
         type="button"
         className="header-conn-lamps no-drag"
-        aria-label="Remote connection — click to manage (connect / disconnect)"
-        title={`SSH · ${host} — ${ssh}`}
+        aria-label="Remote machines — click to connect / manage this project's hosts"
+        title={title}
         onClick={(e) => {
           e.stopPropagation();
-          openDialog(project.id);
+          openHub(project.id);
         }}
       >
-        <ConnLamp status={ssh} label={`SSH · ${host}`} />
+        {groups.map((g) => (
+          <span key={g.st} className="conn-lamp-count">
+            <ConnLamp
+              status={g.st}
+              busy={g.working.length > 0}
+              label={
+                `${g.hosts.length} ${STATUS_WORD[g.st]} — ${g.hosts.map((h) => h.label).join(", ")}` +
+                (g.working.length > 0 ? ` (${g.working.length} working)` : "")
+              }
+            />
+            {g.hosts.length > 1 && (
+              <span className="conn-lamp-count-num">{g.hosts.length}</span>
+            )}
+          </span>
+        ))}
       </button>
     </div>
   );
diff --git a/src/components/header/VpnIndicator.tsx b/src/components/header/VpnIndicator.tsx
index d1b78d3..6e59dd2 100644
--- a/src/components/header/VpnIndicator.tsx
+++ b/src/components/header/VpnIndicator.tsx
@@ -45,6 +45,10 @@ export function VpnIndicator() {
   // to connect on launch, since auto-connect promises never to prompt. Refreshed each
   // time the menu opens — the credentials can be saved or forgotten between openings.
   const [silent, setSilent] = useState<Record<string, boolean>>({});
+  // Config path whose Remove is awaiting its second, confirming click. Removal
+  // also forgets the config's saved credentials, and those are not recoverable
+  // by re-browsing the file — hence armed, not single-click.
+  const [removeArm, setRemoveArm] = useState<string | null>(null);
   const closeTimer = useRef<number | undefined>(undefined);
 
   // Seat from the backend on mount, and re-seat when the window regains focus: a
@@ -61,6 +65,7 @@ export function VpnIndicator() {
   // of those configs could connect with no prompt (the gate on arming auto-connect).
   useEffect(() => {
     if (!open) return;
+    setRemoveArm(null);
     let cancelled = false;
     void invoke<StoredVpnConfig[]>("openvpn_list_configs")
       .then(async (list) => {
@@ -162,6 +167,30 @@ export function VpnIndicator() {
     await connect(stored);
   }, [connect]);
 
+  /**
+   * Remove a stored config: delete Eldrun's copy and forget its saved
+   * credentials (the backend does both, in that order — a refused removal
+   * leaves the credentials alone). Only offered on idle rows; a live tunnel's
+   * config can't be removed, only disconnected first. A removed config can't
+   * stay armed to connect on launch — an armed path with no file behind it
+   * would silently fail at every startup.
+   */
+  const remove = useCallback(
+    async (config: string) => {
+      setError("");
+      try {
+        await invoke("openvpn_remove_config", { config });
+      } catch (e) {
+        setError(String(e));
+        return;
+      }
+      if (armed === config) void setVpnAutoConnect(config, false);
+      setConfigs((prev) => prev.filter((c) => c.path !== config));
+      setRemoveArm(null);
+    },
+    [armed],
+  );
+
   const live = Object.entries(byConfig).filter(
     ([, state]) => state === "connected" || state === "connecting",
   );
@@ -247,7 +276,10 @@ export function VpnIndicator() {
       </button>
       {open && (
         <div className="tab-new-menu vpn-indicator-menu" role="menu">
+          {/* Pinned title; the region below it scrolls so the scrollbar starts
+              beneath the header (unified `.menu-scroll-region` shape). */}
           <div className="tab-new-menu-group-label">OpenVPN</div>
+          <div className="menu-scroll-region">
           <div className="vpn-indicator-note">
             A tunnel routes <strong>this whole computer's</strong> traffic, not just
             Eldrun's — including your browser — for as long as it is up.
@@ -286,25 +318,75 @@ export function VpnIndicator() {
           {idle.length > 0 && (
             <>
               <div className="tab-new-menu-group-label">Connect</div>
-              {idle.map((c) => (
-                <div key={c.path} className="vpn-indicator-row">
-                  <div className="vpn-indicator-head">
-                    <ConnLamp status="off" label={`OpenVPN · ${c.name}`} />
-                    <span className="vpn-indicator-config" title={c.path}>
-                      {c.name}
-                    </span>
+              {idle.map((c) => {
+                const usedBy = projects
+                  .filter((p) => p.remote?.openvpn?.config === c.path)
+                  .map((p) => p.name);
+                return (
+                  <div key={c.path} className="vpn-indicator-row">
+                    <div className="vpn-indicator-head">
+                      <ConnLamp status="off" label={`OpenVPN · ${c.name}`} />
+                      <span className="vpn-indicator-config" title={c.path}>
+                        {c.name}
+                      </span>
+                    </div>
+                    {removeArm === c.path ? (
+                      // Armed remove: the second click is destructive (the saved
+                      // credentials go with the config and can't be re-browsed
+                      // back), so it is spelled out and separately cancellable.
+                      <>
+                        <div className="vpn-indicator-hint">
+                          Removes this config from Eldrun and forgets its saved
+                          credentials.
+                          {usedBy.length > 0 && (
+                            <>
+                              {" "}
+                              Used by <b>{usedBy.join(", ")}</b> — connecting that
+                              project will ask for a config again.
+                            </>
+                          )}
+                        </div>
+                        <div className="vpn-indicator-actions">
+                          <button
+                            type="button"
+                            className="vpn-indicator-remove"
+                            onClick={() => void remove(c.path)}
+                          >
+                            Remove config
+                          </button>
+                          <button
+                            type="button"
+                            className="vpn-indicator-connect"
+                            onClick={() => setRemoveArm(null)}
+                          >
+                            Keep
+                          </button>
+                        </div>
+                      </>
+                    ) : (
+                      <div className="vpn-indicator-actions">
+                        <button
+                          type="button"
+                          className="vpn-indicator-connect"
+                          title="Bring this tunnel up. It will route this computer's traffic — not only Eldrun's."
+                          onClick={() => void connect(c.path)}
+                        >
+                          Connect
+                        </button>
+                        <button
+                          type="button"
+                          className="vpn-indicator-remove"
+                          title="Remove this stored config from Eldrun and forget its saved credentials. Asks once more before doing it."
+                          onClick={() => setRemoveArm(c.path)}
+                        >
+                          Remove
+                        </button>
+                      </div>
+                    )}
+                    {autoConnectRow(c.path)}
                   </div>
-                  <button
-                    type="button"
-                    className="vpn-indicator-connect"
-                    title="Bring this tunnel up. It will route this computer's traffic — not only Eldrun's."
-                    onClick={() => void connect(c.path)}
-                  >
-                    Connect
-                  </button>
-                  {autoConnectRow(c.path)}
-                </div>
-              ))}
+                );
+              })}
             </>
           )}
 
@@ -324,10 +406,10 @@ export function VpnIndicator() {
               </button>
             </div>
           ) : (
-            // Configs already exist, but you may want a different one — the store is
-            // add-only, so browsing here adds/switches without going through a
-            // project's Connect dialog. Same browse→store→connect path as the empty
-            // state; a cancelled browse changes nothing.
+            // Configs already exist, but you may want a different one — browsing
+            // here adds/switches without going through a project's Connect dialog.
+            // Same browse→store→connect path as the empty state; a cancelled
+            // browse changes nothing.
             <div className="vpn-indicator-row vpn-indicator-browse">
               <button
                 type="button"
@@ -340,6 +422,7 @@ export function VpnIndicator() {
             </div>
           )}
           {error && <div className="vpn-indicator-error">{error}</div>}
+          </div>
         </div>
       )}
     </div>
diff --git a/src/components/layout/AppShell.tsx b/src/components/layout/AppShell.tsx
index e077382..66409f4 100644
--- a/src/components/layout/AppShell.tsx
+++ b/src/components/layout/AppShell.tsx
@@ -7,6 +7,7 @@ import {
   type MutableRefObject,
 } from "react";
 import { getCurrentWindow } from "@tauri-apps/api/window";
+import { message } from "@tauri-apps/plugin-dialog";
 import { invoke } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
 import { PLATFORM } from "../../lib/dragPlatform";
@@ -19,7 +20,11 @@ import { RightPanel } from "./RightPanel";
 import { VpnPasswordPrompt } from "./VpnPasswordPrompt";
 import { AlarmPopup } from "../calendar/AlarmPopup";
 import { RemoteConnectDialog } from "../projects/RemoteConnectDialog";
+import { RemoteMachinesDialogHost } from "../projects/RemoteMachinesWindow";
+import { GlobalMachineMonitorDialogHost } from "../monitoring/GlobalMachineMonitorDialog";
+import { HpcPipelineWizardHost } from "../projects/HpcPipelineWizard";
 import { LocalLossDialog } from "../common/LocalLossDialog";
+import { RemoteUsageWarningDialog } from "../common/RemoteUsageWarningDialog";
 import { QuickOpen } from "../files/QuickOpen";
 import { HintHost } from "./HintHost";
 import { TourHost } from "./TourHost";
@@ -28,10 +33,14 @@ import { HowToStart } from "./HowToStart";
 import { LessonsMenu } from "./LessonsMenu";
 import { useHintsStore } from "../../stores/hints";
 import { useProjectsStore, listenProjectRuntimeSwitched } from "../../stores/projects";
+import { useRemoteStatusStore } from "../../stores/remoteStatus";
+import { disconnectAllTunnelsOnQuit } from "../../stores/vpnStatus";
 import { listenDetachedHost, shutdownDetachedWindows } from "../../stores/detached";
 import { listenPdfReveal } from "../../stores/pdfSync";
 import { listenSyncProgress } from "../../stores/sync";
 import { autoConnectVpnOnLaunch } from "../../lib/vpnAutoConnect";
+import { initRemoteAutoReconnect } from "../../lib/remoteAutoReconnect";
+import { initMachineSync } from "../../lib/machineSync";
 import { listenEditorJump } from "../../stores/editorJump";
 import { listenSourceJump } from "../embed/FileViewerPane";
 import { BOX_SCOPE_PREFIX, useBoxesStore } from "../../stores/boxes";
@@ -95,6 +104,7 @@ export function AppShell() {
   const settingsLoaded = useSettingsStore((s) => s.loaded);
   const pinnedSetting = useSettingsStore((s) => s.settings?.right_panel_pinned ?? false);
   const widthSetting = useSettingsStore((s) => s.settings?.right_panel_width ?? RIGHT_PANEL_DEFAULT);
+  const panelSide = useSettingsStore((s) => s.settings?.right_panel_side ?? "right");
   const updateSettings = useSettingsStore((s) => s.updateSettings);
   const loadProjects = useProjectsStore((s) => s.load);
   const projectsLoaded = useProjectsStore((s) => s.loaded);
@@ -276,6 +286,14 @@ export function AppShell() {
     if (settingsLoaded && projectsLoaded) void autoConnectVpnOnLaunch();
   }, [settingsLoaded, projectsLoaded]);
 
+  // Install the tunnel-up → reconnect subscription (and the launch-time global-
+  // machine sweep) once, on first mount — before the VPN launch effect above can
+  // bring a tunnel up, so its `→ connected` transition is already being watched.
+  useEffect(() => {
+    initRemoteAutoReconnect();
+    initMachineSync();
+  }, []);
+
   const togglePin = () => {
     setRightPinned((v) => {
       const next = !v;
@@ -284,6 +302,13 @@ export function AppShell() {
     });
   };
 
+  // Flip the panel to the opposite edge. Persisted only — the layout (docked
+  // inset, slide direction, resize math, reveal edge) reads `panelSide`, so no
+  // local mirror state is needed.
+  const toggleSide = () => {
+    void updateSettings({ right_panel_side: panelSide === "left" ? "right" : "left" });
+  };
+
   // Drag the panel's left border to resize. The panel is absolutely positioned
   // at right:0, so its width is just `innerWidth - cursorX`. We update local
   // state live (driving both the panel width and the docked body inset) and
@@ -301,7 +326,10 @@ export function AppShell() {
 
   const onResizeMove = (e: ReactPointerEvent<HTMLDivElement>) => {
     if (!resizingRight) return;
-    const w = clampRightWidth(window.innerWidth - e.clientX);
+    // The grip straddles the panel's inner edge — on the right that's the left
+    // border (width = innerWidth - cursorX); flipped to the left it's the right
+    // border (width = cursorX).
+    const w = clampRightWidth(panelSide === "left" ? e.clientX : window.innerWidth - e.clientX);
     latestRightWidth.current = w;
     setRightWidth(w);
   };
@@ -400,6 +428,22 @@ export function AppShell() {
     const win = getCurrentWindow();
     win.onCloseRequested(async (event) => {
       event.preventDefault();
+      // Tear down any live OpenVPN tunnel *before* anything else and before the window
+      // goes away. The backend also does this in RunEvent::Exit, but that runs only
+      // after destroy(), so its elevated pkexec kill raised the polkit password prompt
+      // against an already-gone window. Awaiting it here keeps Eldrun on screen until
+      // the prompt is answered. If the user dismisses the prompt the tunnel is still up
+      // (it reroutes the whole machine), so abort the quit and say so — running the
+      // save/detached-shutdown steps first would have needlessly torn state down.
+      const tunnelsDown = await disconnectAllTunnelsOnQuit().catch(() => true);
+      if (!tunnelsDown) {
+        await message(
+          "The OpenVPN tunnel is still up and reroutes this whole machine. " +
+            "Close the tunnel first (VPN control in the header), then quit Eldrun.",
+          { title: "VPN tunnel still active", kind: "warning" },
+        ).catch(() => {});
+        return;
+      }
       await flushTimer().catch(() => {});
       // Counters accrued since the last interval flush would otherwise be lost on
       // quit — including everything done in the final minutes of a session.
@@ -407,6 +451,18 @@ export function AppShell() {
       // Capture the window's final geometry before it goes away — a quit inside
       // the 300ms save debounce would otherwise drop the user's last move.
       await saveWindowGeometry().catch(() => {});
+      // Flush the active scope's tab layout for the same reason: CenterPanel
+      // debounces its persistScope by 300ms, so a quit right after navigating a
+      // Files (Project) tab into a subfolder (or any tab/split change) would drop
+      // it and the tab would reopen at the project root. The right-panel folder
+      // is saved eagerly and needs no flush; only the tab layout is debounced.
+      const { activeId, projects } = useProjectsStore.getState();
+      const localFile = activeId
+        ? projects.find((p) => p.id === activeId)?.local_file
+        : undefined;
+      if (localFile) {
+        await useTabsStore.getState().saveLayout(localFile).catch(() => {});
+      }
       // Close any popped-out subwindows so they don't strand on screen; they
       // persist + re-open at their saved bounds next launch (see the helper).
       await shutdownDetachedWindows().catch(() => {});
@@ -444,6 +500,50 @@ export function AppShell() {
     return () => clearInterval(id);
   }, []);
 
+  // Reconcile the SSH lamp/Connect-dialog status against the backend's actual
+  // pool, which is the only side that ever notices a pooled connection dying on
+  // its own (network drop, keepalive eviction, a VPN tunnel getting replaced
+  // out from under it) — and only lazily, the next time some command happens to
+  // touch that project's pool entry. `useRemoteStatusStore` otherwise only ever
+  // moves on an explicit connect/disconnect result, so without this a project
+  // whose pooled session died keeps showing "connected" (green lamp, the
+  // Connect dialog claiming it's already up) indefinitely, while anything that
+  // actually asks the pool — e.g. the network-traffic pane's own poll —
+  // correctly reports disconnected. A project the store still marks
+  // "connected" that the backend no longer lists gets corrected to "error" so
+  // the lamp goes red and the Connect dialog offers a real reconnect.
+  useEffect(() => {
+    const id = setInterval(() => {
+      const { byProject, byHost, setSsh } = useRemoteStatusStore.getState();
+      // Every (project, host) the store believes is connected — the primary
+      // (byProject) plus every worker host (byHost, multi-host remote).
+      const stillConnected: Array<[string, string]> = [];
+      for (const [projectId, s] of Object.entries(byProject)) {
+        if (s.ssh === "connected") stillConnected.push([projectId, "primary"]);
+      }
+      for (const [projectId, hosts] of Object.entries(byHost)) {
+        for (const [hostId, s] of Object.entries(hosts)) {
+          if (s.ssh === "connected") stillConnected.push([projectId, hostId]);
+        }
+      }
+      if (stillConnected.length === 0) return;
+      // Per-host truth from the pool (`remote_connected_targets`); anything the
+      // store marks connected that the backend no longer lists is corrected to
+      // "error" so its lamp goes red and the Connect dialog offers a reconnect.
+      void invoke<Array<[string, string]>>("remote_connected_targets")
+        .then((targets) => {
+          const live = new Set(targets.map(([p, h]) => `${p}
${h}`));
+          for (const [projectId, hostId] of stillConnected) {
+            if (!live.has(`${projectId}
${hostId}`)) {
+              setSsh(projectId, "error", hostId);
+            }
+          }
+        })
+        .catch(() => {});
+    }, 15_000);
+    return () => clearInterval(id);
+  }, []);
+
   // Point the file-churn watcher at the active project, so the recap's
   // created/modified/deleted counts follow whatever the user is working on. The
   // backend resolves which directory that is (a remote project is watched through
@@ -547,7 +647,11 @@ export function AppShell() {
 
   const handleBodyMouseMove = (event: ReactMouseEvent<HTMLDivElement>) => {
     if (!panelTarget || panelsHidden || rightOpen) return;
-    if (window.innerWidth - event.clientX <= REVEAL_EDGE_PX) {
+    const nearEdge =
+      panelSide === "left"
+        ? event.clientX <= REVEAL_EDGE_PX
+        : window.innerWidth - event.clientX <= REVEAL_EDGE_PX;
+    if (nearEdge) {
       useHintsStore.getState().markSeen("file-tree");
       reveal(rightCloseTimer, setRightOpen);
     }
@@ -566,8 +670,14 @@ export function AppShell() {
         <div key={connToast} className="project-switch-toast conn-toast">{connToast}</div>
       )}
       <div
-        className={`app-body${revealRight && rightPinned ? " right-docked" : ""}${resizingRight ? " resizing" : ""}`}
-        style={revealRight && rightPinned ? { paddingRight: rightWidth } : undefined}
+        className={`app-body${revealRight && rightPinned ? (panelSide === "left" ? " left-docked" : " right-docked") : ""}${resizingRight ? " resizing" : ""}`}
+        style={
+          revealRight && rightPinned
+            ? panelSide === "left"
+              ? { paddingLeft: rightWidth }
+              : { paddingRight: rightWidth }
+            : undefined
+        }
         onMouseMove={handleBodyMouseMove}
       >
         <CenterPanel />
@@ -575,20 +685,27 @@ export function AppShell() {
           <RightPanel
             open={revealRight}
             pinned={rightPinned}
+            side={panelSide}
             width={rightWidth}
             resizing={resizingRight}
             onResizeStart={onResizeStart}
             onResizeMove={onResizeMove}
             onResizeEnd={onResizeEnd}
             onTogglePin={togglePin}
+            onToggleSide={toggleSide}
             onMouseEnter={() => reveal(rightCloseTimer, setRightOpen)}
             onMouseLeave={() => !rightPinned && scheduleClose(rightCloseTimer, setRightOpen)}
           />
         )}
-        {/* Invisible marker at the right-edge reveal band so the guided tour has
-            a stable element to spotlight for the "find your files" step. */}
+        {/* Invisible marker at the reveal band so the guided tour has a stable
+            element to spotlight for the "find your files" step. Follows the panel
+            to whichever edge it docks against. */}
         {panelTarget && !panelsHidden && (
-          <div className="tour-edge-marker" data-hint-anchor="file-tree-edge" aria-hidden />
+          <div
+            className={`tour-edge-marker${panelSide === "left" ? " left" : ""}`}
+            data-hint-anchor="file-tree-edge"
+            aria-hidden
+          />
         )}
         {/* Always-visible CLICK affordance to open the (closed, unpinned) file
             panel. The hover-only right-edge reveal (handleBodyMouseMove) depends
@@ -601,22 +718,33 @@ export function AppShell() {
         {panelTarget && !panelsHidden && !revealRight && (
           <button
             type="button"
-            className="right-panel-reveal-handle"
+            className={`right-panel-reveal-handle${panelSide === "left" ? " left" : ""}`}
             aria-label="Show files panel"
             title="Show files panel"
             onClick={() => reveal(rightCloseTimer, setRightOpen)}
             onMouseEnter={() => reveal(rightCloseTimer, setRightOpen)}
           >
-            <span aria-hidden="true">‹</span>
+            <span aria-hidden="true">{panelSide === "left" ? "›" : "‹"}</span>
           </button>
         )}
       </div>
       <VpnPasswordPrompt />
       <RemoteConnectDialog />
+      {/* Multi-host remote: the "Remote machines" manager, opened from a pill's
+          Runtime menu or a right-click on its remote lamp. */}
+      <RemoteMachinesDialogHost />
+      {/* The header Machines menu's "System monitor…" button, per global machine. */}
+      <GlobalMachineMonitorDialogHost />
+      {/* The guided HPC/SLURM pipeline wizard (login → create → load → run → watch),
+          launched from the project-switcher + menu (docs/quirky-knitting-umbrella). */}
+      <HpcPipelineWizardHost />
       {/* Same reason as the alarm below: lockstep/sync can delete a file from the local
           mirror during a background pass, and the user must hear about it wherever they
           are — including when the file panel it happened in is closed (#28q). */}
       <LocalLossDialog />
+      {/* Fires once per connect (manual or silent auto-connect): warns that the
+          host's load/memory/logged-in sessions suggest it's already in use. */}
+      <RemoteUsageWarningDialog />
       {/* Calendar reminders live at the shell, not in the calendar pane: an alarm
           must reach the user whatever tab they are on — and even if they have
           never opened a calendar tab this session. */}
diff --git a/src/components/layout/CenterPanel.tsx b/src/components/layout/CenterPanel.tsx
index 66e5a66..a1073f8 100644
--- a/src/components/layout/CenterPanel.tsx
+++ b/src/components/layout/CenterPanel.tsx
@@ -8,20 +8,13 @@ import {
   DETACHED_DRAG_MOVE,
   DETACHED_DRAG_START,
   decideDetachedGroupDrop,
+  decideDetachedPaneDrop,
   decideDetachedTabDrop,
   type DetachedDragEnd,
   type DetachedDragMove,
   type DetachedDragStart,
 } from "../../stores/detached";
-import { TerminalView } from "../terminal/TerminalView";
-import { FileBrowser } from "../files/FileBrowser";
-import { EmbedPane } from "../embed/EmbedPane";
-import { FileViewerPane } from "../embed/FileViewerPane";
-import { ProjectBlobPane } from "../common/ProjectBlobPane";
-import { NetworkTrafficPane } from "../monitoring/NetworkTrafficPane";
-import { SystemMonitorPane } from "../monitoring/SystemMonitorPane";
-import { DiskUsagePane } from "../monitoring/DiskUsagePane";
-import { CalendarPane } from "../calendar/CalendarPane";
+import { TabPane } from "../tabs/TabPane";
 import { Subwindow } from "../tabs/Subwindow";
 import { pickEdge, previewInset } from "../tabs/dragGeometry";
 import { dragPreviewLayout } from "../tabs/dragPreview";
@@ -33,9 +26,11 @@ import {
   allGroups,
   cmdToKind,
   effectiveTabLocation,
+  findGroup,
   isRestorableTab,
   isPtyTabKind,
   localTabCwd,
+  remoteHostIdOf,
   useTabsStore,
   type LayoutNode,
   type SavedLayoutTree,
@@ -44,10 +39,12 @@ import {
 import { useSettingsStore } from "../../stores/settings";
 import { useDragStore } from "../../stores/drag";
 import { useSubwindowNavStore } from "../../stores/subwindowNav";
+import { useWindowFocused } from "../../hooks/useWindowFocused";
 import { useScrollSyncStore } from "../../stores/scrollSync";
 import { useWindowMoveStore } from "../../stores/windowMove";
 import { useDetachAnimStore } from "../../stores/detachAnim";
 import { useTabLandStore } from "../../stores/tabLand";
+import { TAB_ACCENT } from "../tabs/newTabItems";
 import { commitDrop } from "../tabs/commitDrop";
 import {
   startDetachedDropSession,
@@ -60,9 +57,10 @@ import {
   type WindowFrame,
 } from "../../lib/coords";
 import { dragPlatform } from "../../lib/dragPlatform";
+import { shouldPersistTab, shouldPersistLocalTab } from "../../lib/tmuxSession";
+import { IS_WINDOWS } from "../../lib/platform";
 import { useProjectsStore } from "../../stores/projects";
-import { useConnectDialogStore } from "../../stores/connectDialog";
-import { RemotePaneHold } from "../projects/RemotePaneHold";
+import { useRemoteMachinesStore } from "../../stores/remoteMachines";
 import { useRemoteStatusStore } from "../../stores/remoteStatus";
 import { resolveLocalMirror, resolveProjectDirectory } from "../../types";
 
@@ -82,13 +80,19 @@ export function CenterPanel() {
   const setScope = useTabsStore((s) => s.setScope);
   const loadFromLayout = useTabsStore((s) => s.loadFromLayout);
   const resizeSplit = useTabsStore((s) => s.resizeSplit);
+  const mergeGroups = useTabsStore((s) => s.mergeGroups);
   const tabs = useTabsStore((s) => s.tabs);
   // #42: the current scope's detached popouts. Subscribed here so the debounced
   // save below re-fires when a popout is moved/resized (setDetachedBounds swaps
   // this array's identity) — otherwise bounds drags wouldn't reach project.json
   // until the next tab/layout change or app quit.
   const detachedGroups = useTabsStore((s) => s.detachedGroupsByScope[s.scope]);
-  const saveLayout = useTabsStore((s) => s.saveLayout);
+  // `persistScope`, not `saveLayout`: the latter persists the tab store's CURRENT
+  // scope into whatever `localFile` it is handed, and those are two independently
+  // tracked values. `activeId` and `localFile` both come from `activeProject` here,
+  // so passing the scope explicitly makes it impossible to write one project's tabs
+  // (or, worse, an empty layout standing in for them) into another project's file.
+  const persistScope = useTabsStore((s) => s.persistScope);
   const updateTabEnv = useTabsStore((s) => s.updateTabEnv);
   // #42: popouts to re-open for the current scope (restored docked, then detached).
   const pendingRespawn = useTabsStore((s) => s.pendingRespawnByScope[s.scope]);
@@ -122,6 +126,9 @@ export function CenterPanel() {
   // layer positions each active pane over its group's body so PTYs never
   // unmount on scope switch / re-tile.
   const [groupRects, setGroupRects] = useState<Record<string, Rect>>({});
+  // Whole-subwindow rects (tab bar + body), used by the focus frame so it wraps
+  // the current subwindow's tab header too — not just its pane region.
+  const [groupFrameRects, setGroupFrameRects] = useState<Record<string, Rect>>({});
   const panelRef = useRef<HTMLDivElement>(null);
   const groupBodyRefs = useRef<Map<string, HTMLDivElement>>(new Map());
 
@@ -139,7 +146,29 @@ export function CenterPanel() {
   // by the PANE's own scope — panes stay mounted across scope switches, so
   // holding must not track only the active project's state.
   const remoteSshByProject = useRemoteStatusStore((s) => s.byProject);
-  const openConnectDialog = useConnectDialogStore((s) => s.open);
+  // Worker-host lamps (multi-host remote): a pane on a worker holds iff THAT
+  // worker is down, independent of the primary (plan §4.5).
+  const remoteSshByHost = useRemoteStatusStore((s) => s.byHost);
+  // Persistent LOCAL (tmux) sessions (TODO #85): default ON on Unix (no tmux on
+  // Windows). Folded here so the per-pane decision below is a cheap boolean AND.
+  const localPersistEnabled = useSettingsStore(
+    (s) => !IS_WINDOWS && s.settings?.persist_local_sessions !== false,
+  );
+  // Stable per-scope connect handler. TabPane is memoized, so the pane layer only
+  // stays cheap to re-render (e.g. every frame of a divider drag) if its props are
+  // referentially stable — a fresh `() => openRemoteMachines(scopeKey)` arrow every
+  // render would break the memo for every pane. Cached by scope; reads the store
+  // action lazily so the cache never needs invalidating. Opens the unified "Remote
+  // machines" hub (scopeKey is the project id), matching the pill and file view.
+  const connectHandlers = useRef<Map<string, () => void>>(new Map());
+  const getConnect = useCallback((scopeKey: string) => {
+    let h = connectHandlers.current.get(scopeKey);
+    if (!h) {
+      h = () => useRemoteMachinesStore.getState().open(scopeKey);
+      connectHandlers.current.set(scopeKey, h);
+    }
+    return h;
+  }, []);
 
   // The layout to RENDER: normally the store layout, but while dragging a
   // subwindow's lone tab it's that layout with the (about-to-empty) source
@@ -246,10 +275,10 @@ export function CenterPanel() {
   useEffect(() => {
     if (!activeId || !localFile) return;
     const timer = window.setTimeout(() => {
-      saveLayout(localFile).catch(() => {});
+      persistScope(activeId, localFile).catch(() => {});
     }, 300);
     return () => window.clearTimeout(timer);
-  }, [activeId, localFile, tabs, layout, detachedGroups, saveLayout]);
+  }, [activeId, localFile, tabs, layout, detachedGroups, persistScope]);
 
   // #42: re-open popouts that were detached when this scope was last saved. The
   // groups were restored DOCKED (above) so their panes mount and spawn their
@@ -263,7 +292,7 @@ export function CenterPanel() {
       // allowLastGroup: a restored popout may be the scope's only group (its
       // in-window siblings held only non-restorable tabs and were dropped); it
       // must still re-detach into its own window rather than stay docked.
-      detachGroup(t.id, { bounds: t.bounds, allowLastGroup: true });
+      detachGroup(t.id, { bounds: t.bounds, zoom: t.zoom, allowLastGroup: true });
     }
   }, [scope, pendingRespawn, consumePendingRespawn, detachGroup]);
 
@@ -276,6 +305,7 @@ export function CenterPanel() {
     if (!panel) return;
     const base = panel.getBoundingClientRect();
     const next: Record<string, Rect> = {};
+    const frames: Record<string, Rect> = {};
     for (const [id, el] of groupBodyRefs.current) {
       if (!el.isConnected) continue;
       const r = el.getBoundingClientRect();
@@ -285,24 +315,39 @@ export function CenterPanel() {
         width: r.width,
         height: r.height,
       };
+      // The enclosing subwindow box spans the tab header bar + body, so the
+      // focus frame drawn from it wraps the current tab strip too. Clamp the
+      // right edge to the pane region's right (`r`) so a docked files sidebar —
+      // which lives in the same body, to the right of the pane — is excluded.
+      const sub = el.closest(".subwindow");
+      if (sub) {
+        const sr = sub.getBoundingClientRect();
+        frames[id] = {
+          left: sr.left - base.left,
+          top: sr.top - base.top,
+          width: r.right - sr.left,
+          height: sr.height,
+        };
+      }
     }
-    setGroupRects((prev) => {
-      // Avoid pointless state churn (which would re-render every pane).
-      const keys = Object.keys(next);
-      if (keys.length === Object.keys(prev).length) {
-        let same = true;
-        for (const k of keys) {
-          const a = next[k];
-          const b = prev[k];
-          if (!b || a.left !== b.left || a.top !== b.top || a.width !== b.width || a.height !== b.height) {
-            same = false;
-            break;
-          }
+    // Skip state writes when a map is unchanged (a write re-renders every pane).
+    const sameRects = (
+      a: Record<string, Rect>,
+      b: Record<string, Rect>,
+    ): boolean => {
+      const keys = Object.keys(a);
+      if (keys.length !== Object.keys(b).length) return false;
+      for (const k of keys) {
+        const x = a[k];
+        const y = b[k];
+        if (!y || x.left !== y.left || x.top !== y.top || x.width !== y.width || x.height !== y.height) {
+          return false;
         }
-        if (same) return prev;
       }
-      return next;
-    });
+      return true;
+    };
+    setGroupRects((prev) => (sameRects(next, prev) ? prev : next));
+    setGroupFrameRects((prev) => (sameRects(frames, prev) ? prev : frames));
   }, []);
 
   // Re-measure when the rendered layout tree changes — including the live drag
@@ -560,7 +605,8 @@ export function CenterPanel() {
 
     reg(
       listen<DetachedDragStart>(DETACHED_DRAG_START, (ev) => {
-        const { scope: dScope, groupId, label, cursorPhysX, cursorPhysY, tabKey } = ev.payload;
+        const { scope: dScope, groupId, label, cursorPhysX, cursorPhysY, tabKey, paneId } =
+          ev.payload;
         // Open a popout drop session for THIS gesture so sibling popouts of the
         // scope become live drop targets (highlight on MOVE, dock on END) — the
         // same machinery `TabBar` uses for main→popout drags.
@@ -581,6 +627,7 @@ export function CenterPanel() {
           detachedScope: dScope,
           detachedGroupId: groupId,
           detachedTabKey: tabKey,
+          detachedPaneId: paneId,
         });
         resolveTargetRef.current(seed.x, seed.y);
         void refreshFrame().then(() => {
@@ -709,6 +756,60 @@ export function CenterPanel() {
           return;
         }
 
+        // ── One pane of a multi-pane popout: dock JUST that pane, or pop it into
+        // its own window — NEVER the whole popout (a pane drop must not haul its
+        // sibling panes into the main window). ────────────────────────────────
+        if (f?.kind === "detached" && f.detachedScope && f.detachedGroupId && f.detachedPaneId) {
+          const scope = f.detachedScope;
+          const srcGroup = f.detachedGroupId;
+          const paneId = f.detachedPaneId;
+          const decision = decideDetachedPaneDrop({
+            cancelled: ev.payload.cancelled,
+            shift: ev.payload.shift ?? false,
+            inMain,
+            overPopoutId,
+            srcGroupId: srcGroup,
+          });
+          switch (decision.kind) {
+            case "dockMain": {
+              // Dock only the dragged pane at the resolved target (bar → merge;
+              // body edge → split; else its own pane). Targets only apply when
+              // the popout's scope IS the active one.
+              const sameScope = store.scope === scope;
+              const target =
+                sameScope && f.reorderGroup
+                  ? { targetGroupId: f.reorderGroup, edge: "center" as const }
+                  : sameScope && f.overGroup && f.edge
+                    ? { targetGroupId: f.overGroup, edge: f.edge }
+                    : undefined;
+              store.attachDetachedPane(scope, srcGroup, paneId, target);
+              reseedDetached(scope, srcGroup);
+              break;
+            }
+            case "newWindow": {
+              // Shift, or a free-space release: the pane becomes its own popout
+              // at the physical cursor. A lone-pane source is refused downstream
+              // (null) → clean no-op.
+              if (phys) {
+                const bounds = {
+                  x: Math.round(phys.x - 80),
+                  y: Math.round(phys.y - 8),
+                  w: 900,
+                  h: 640,
+                };
+                const newLabel = store.detachPaneToNewWindow(scope, srcGroup, paneId, bounds);
+                if (newLabel) reseedDetached(scope, srcGroup);
+              }
+              break;
+            }
+            case "none":
+              // Cancelled / released over the source or a sibling popout — stay put.
+              break;
+          }
+          done();
+          return;
+        }
+
         // ── Whole group: dock into main, or stay floating ───────────────────────
         if (f?.kind === "detached" && f.detachedGroupId && f.detachedScope) {
           const decision = decideDetachedGroupDrop({
@@ -821,6 +922,7 @@ export function CenterPanel() {
           node={renderLayout}
           projectCwd={projectCwd}
           resizeSplit={resizeSplit}
+          mergeGroups={mergeGroups}
           panelRef={panelRef}
           registerGroupBody={registerGroupBody}
           onResized={measure}
@@ -891,13 +993,89 @@ export function CenterPanel() {
           const paneRemoteProj = !!paneProject?.remote;
           const paneDisconnected =
             paneRemoteProj && remoteSshByProject[scopeKey]?.ssh !== "connected";
-          // A terminal pane is "remote" when its effective locality is remote
-          // (default shells; agents/shells toggled remote). Held while the pool
-          // is down: spawning `ssh -tt` now would block on the dead pool.
+          // A terminal pane runs on a remote host when its effective locality
+          // resolves to one (primary or a worker). Held while THAT host's pool is
+          // down: spawning `ssh -tt` now would block on the dead pool. Multi-host:
+          // a pane on gpu-2 holds iff gpu-2 is down, independent of the primary
+          // (plan §4.5).
+          const rawHostId = remoteHostIdOf(effectiveTabLocation(tab));
+          // A tab naming a worker that no longer exists (machine removed) falls
+          // back to the primary — matching the backend's wrap_pty_options (plan §8).
+          const paneHostId =
+            rawHostId && rawHostId !== "primary" &&
+            !paneProject?.compute_hosts?.some((h) => h.id === rawHostId)
+              ? "primary"
+              : rawHostId;
+          const paneHostSsh =
+            paneHostId === "primary"
+              ? remoteSshByProject[scopeKey]?.ssh
+              : paneHostId
+                ? remoteSshByHost[scopeKey]?.[paneHostId]?.ssh
+                : undefined;
           const holdRemoteTerminal =
-            paneDisconnected &&
+            paneRemoteProj &&
             isPtyTabKind(tab.kind) &&
-            effectiveTabLocation(tab) === "remote";
+            paneHostId !== null &&
+            paneHostSsh !== "connected";
+          // The label of the host this pane runs on (primary host, or the worker's
+          // label), for the hold placeholder + hover card.
+          const paneHostLabel =
+            paneHostId === "primary" || paneHostId === null
+              ? (paneProject?.remote?.host ?? "")
+              : (() => {
+                  const w = paneProject?.compute_hosts?.find((h) => h.id === paneHostId);
+                  return w?.label || w?.host || paneHostId;
+                })();
+          // The Files-tab browse dir: while a remote project is disconnected the
+          // SFTP tree can't be listed (it would freeze the main thread), so browse
+          // the local mirror instead — the same synced working copy the local tabs
+          // use. FileBrowser re-lists on `projectDir` change, so it swaps back to
+          // the remote tree once the pool connects. (Resolved here, not inside
+          // TabPane, because the popout has no projects store to resolve it.)
+          const filesProjectDir = paneDisconnected
+            ? localTabCwd(
+                { kind: "files" },
+                {
+                  isRemoteProject: true,
+                  projectDirectory: resolveProjectDirectory(paneProject),
+                  mirror: resolveLocalMirror(paneProject),
+                  fallback: tab.cwd,
+                },
+              )
+            : tab.cwd;
+          // SSH-sync Phase 0: a local-on-remote tab runs in the project's local
+          // mirror (state dir), not the remote tree it can't reach.
+          const terminalCwd = localTabCwd(tab, {
+            isRemoteProject: !!paneProject?.remote,
+            projectDirectory: resolveProjectDirectory(paneProject),
+            mirror: resolveLocalMirror(paneProject),
+            fallback: tab.cwd,
+          });
+          // Run this tab inside the project's session container when the toggle is
+          // on: every PTY tab except `local_agent` (host-bound) execs into the one
+          // shared container. Local projects only. Derived here so restored tabs
+          // are covered too. NOTE: this flag is in TerminalView's spawn deps —
+          // flipping the toggle respawns every live tab (ProjectPill confirms when
+          // that would destroy a non-resumable agent conversation).
+          const sandbox =
+            (tab.kind === "agent" || tab.kind === "shell") &&
+            scopeKey !== "root" &&
+            !!paneProject?.sandbox?.enabled &&
+            !paneProject?.remote;
+          // Persistent sessions (TODO #85): the stable, persisted session name to
+          // wrap a shell/script tab in a tmux session, so a long run survives — for a
+          // REMOTE tab an SSH drop / relaunch (default ON per project, opt out via
+          // the pill toggle), for a LOCAL tab an Eldrun crash (default ON on Unix via
+          // `persist_local_sessions`). Shell tabs only (Python runs open a shell tab),
+          // never agents; never the root scope. In TerminalView's spawn deps, so
+          // toggling respawns the tab. Undefined ⇒ no tmux wrap.
+          const localRunning =
+            !paneProject?.remote || effectiveTabLocation(tab) === "local";
+          const tmuxSession =
+            shouldPersistTab(tab.kind, paneHostId, paneProject?.remote) ||
+            shouldPersistLocalTab(tab.kind, scopeKey, localRunning, localPersistEnabled)
+              ? tab.tmuxSession
+              : undefined;
           return (
             <div
               key={`${scopeKey}/${tab.key}`}
@@ -918,134 +1096,25 @@ export function CenterPanel() {
               }}
               style={style}
             >
-              {tab.kind === "projects3d" ? (
-                <ProjectBlobPane />
-              ) : tab.kind === "calendar" ? (
-                <CalendarPane visible={visible} />
-              ) : tab.kind === "network" ? (
-                <NetworkTrafficPane
-                  projectId={scopeKey}
-                  visible={visible}
-                  onConnect={() => openConnectDialog(scopeKey)}
-                />
-              ) : tab.kind === "monitor" ? (
-                <SystemMonitorPane visible={visible} />
-              ) : tab.kind === "diskusage" ? (
-                <DiskUsagePane
-                  projectId={scopeKey === "root" ? null : scopeKey}
-                  projectCwd={tab.cwd}
-                  // Lets the pane retitle its own tab after the folder it scans.
-                  // Several Disk Usage tabs can be open at once, so "Disk Usage"
-                  // three times over would tell the user nothing.
-                  tabKey={tab.key}
-                  visible={visible}
-                />
-              ) : tab.kind === "files" ? (
-                <FileBrowser
-                  // While a remote project is disconnected the SFTP tree can't be
-                  // listed (it would freeze the main thread), so browse the local
-                  // mirror instead — the same synced working copy the local tabs
-                  // use. `list_dir` routes the mirror path locally; FileBrowser
-                  // re-lists when `projectDir` changes, so it swaps back to the
-                  // remote tree automatically once the pool is connected.
-                  projectDir={
-                    paneDisconnected
-                      ? localTabCwd(
-                          { kind: "files" },
-                          {
-                            isRemoteProject: true,
-                            projectDirectory: resolveProjectDirectory(paneProject),
-                            mirror: resolveLocalMirror(paneProject),
-                            fallback: tab.cwd,
-                          },
-                        )
-                      : tab.cwd
-                  }
-                  projectId={scopeKey === "root" ? null : scopeKey}
-                  active={visible}
-                />
-              ) : tab.kind === "embed" ? (
-                tab.viewer ? (
-                  <FileViewerPane
-                    viewer={tab.viewer}
-                    path={tab.embedPath ?? ""}
-                    projectId={scopeKey === "root" ? null : scopeKey}
-                    tabKey={tab.key}
-                    visible={visible}
-                    groupId={groupId}
-                  />
-                ) : (
-                  <EmbedPane
-                    path={tab.embedPath ?? ""}
-                    exec={tab.embedExec}
-                    projectId={scopeKey === "root" ? null : scopeKey}
-                    visible={visible}
-                  />
-                )
-              ) : holdRemoteTerminal ? (
-                // Remote terminal pane while the pool is down: don't mount
-                // TerminalView (it would spawn `ssh -tt` and block on the dead
-                // pool). Show a Connect placeholder; when the project connects
-                // this pane re-renders, mounts TerminalView, and spawns — a
-                // resumable agent resumes via its saved args.
-                <RemotePaneHold
-                  host={paneProject?.remote?.host ?? ""}
-                  onConnect={() => openConnectDialog(scopeKey)}
-                />
-              ) : (
-                <TerminalView
-                  // PTY ids must include the scope: tab keys alone can collide
-                  // across projects (restored layouts), which would attach two
-                  // projects' terminals to the same PTY stream.
-                  id={`${scopeKey}:${tab.key}`}
-                  cmd={tab.cmd}
-                  args={tab.args ?? []}
-                  env={tab.env ?? {}}
-                  initialInput={tab.initialInput}
-                  // SSH-sync Phase 0: a local-on-remote tab runs in the project's
-                  // local mirror (state dir), not the remote tree it can't reach.
-                  cwd={localTabCwd(tab, {
-                    isRemoteProject: !!projects.find((p) => p.id === scopeKey)?.remote,
-                    projectDirectory: resolveProjectDirectory(
-                      projects.find((p) => p.id === scopeKey),
-                    ),
-                    mirror: resolveLocalMirror(
-                      projects.find((p) => p.id === scopeKey),
-                    ),
-                    fallback: tab.cwd,
-                  })}
-                  // SSH-sync Phase 0: agents default LOCAL on a remote project,
-                  // shells default REMOTE; the per-tab toggle overrides. local_agent
-                  // stays fixed-local (effectiveTabLocation handles it).
-                  localOnly={effectiveTabLocation(tab) === "local"}
-                  // The owning project's id (null for the root scope), so the
-                  // backend spawn detects remoteness explicitly instead of
-                  // sniffing the cwd. Harmless for local projects.
-                  projectId={scopeKey === "root" ? null : scopeKey}
-                  // Run this tab inside the project's session container when
-                  // the container toggle is on: every PTY tab except
-                  // `local_agent` (host-bound by definition) execs into the one
-                  // shared container. Local projects only (a remote project is
-                  // ssh-wrapped instead). Derived here, not at tab creation, so
-                  // restored tabs are covered too. NOTE: this flag is in
-                  // TerminalView's spawn deps — flipping the toggle respawns
-                  // every live tab (ProjectPill confirms when that would
-                  // destroy a non-resumable agent conversation).
-                  sandbox={
-                    (tab.kind === "agent" || tab.kind === "shell") &&
-                    scopeKey !== "root" &&
-                    (() => {
-                      const proj = projects.find((p) => p.id === scopeKey);
-                      return !!proj?.sandbox?.enabled && !proj?.remote;
-                    })()
-                  }
-                  // Agent panes are font-zoomable (Ctrl+wheel / Ctrl +/-/0);
-                  // plain shells keep the fixed default size.
-                  zoomable={tab.kind === "agent" || tab.kind === "local_agent"}
-                  visible={visible}
-                  focused={visible}
-                />
-              )}
+              {/* The shared per-tab render switch (`components/tabs/TabPane`), the
+                  SAME one every detached popout renders. The main window owns the
+                  tab store (`ownsTabs`) and the projects store, so it resolves the
+                  mirror/sandbox/hold props the popout can't. New pane kinds/props
+                  go in TabPane so they reach both windows at once. */}
+              <TabPane
+                tab={tab}
+                scope={scopeKey}
+                visible={visible}
+                groupId={groupId}
+                ownsTabs
+                onConnect={getConnect(scopeKey)}
+                holdRemoteTerminal={holdRemoteTerminal}
+                remoteHost={paneHostLabel}
+                filesProjectDir={filesProjectDir}
+                terminalCwd={terminalCwd}
+                sandbox={sandbox}
+                tmuxSession={tmuxSession}
+              />
             </div>
           );
         })}
@@ -1062,6 +1131,7 @@ export function CenterPanel() {
           opaque panes (z-index:2) would otherwise cover an in-body frame. */}
       <FocusFrameOverlay
         groupRects={groupRects}
+        frameRects={groupFrameRects}
         orderedIds={allGroups(layoutByScope[scope] ?? null).map((g) => g.id)}
       />
 
@@ -1145,23 +1215,44 @@ export function SplitPreviewOverlay({ groupRects }: { groupRects: Record<string,
  */
 export function FocusFrameOverlay({
   groupRects,
+  frameRects,
   orderedIds,
 }: {
   groupRects: Record<string, Rect>;
+  frameRects: Record<string, Rect>;
   orderedIds: string[];
 }) {
   const focusedGroupId = useTabsStore((s) => s.focusedGroupId);
   const navActive = useSubwindowNavStore((s) => s.active);
   const previewGroupId = useSubwindowNavStore((s) => s.previewGroupId);
+  // Only the OS-focused window draws its focus frame, so a blurred main window
+  // doesn't show an active subwindow alongside a focused popout (#42).
+  const windowFocused = useWindowFocused();
 
   const frameId = navActive && previewGroupId ? previewGroupId : focusedGroupId;
-  const frameRect = frameId ? groupRects[frameId] : undefined;
+  // Prefer the whole-subwindow rect (tab bar + body); fall back to the pane
+  // region if a subwindow box wasn't measured (e.g. the empty-scope slot).
+  const frameRect = frameId
+    ? (frameRects[frameId] ?? groupRects[frameId])
+    : undefined;
   const n = orderedIds.length;
   const f = frameId ? orderedIds.indexOf(frameId) : -1;
 
+  // Colour the focus frame with the focused subwindow's active-tab group colour
+  // (the same TAB_ACCENT that paints that tab's stripe), so the frame and the
+  // current tab read as one continuous accent. Falls back to the CSS default
+  // (var(--accent)) when the kind can't be resolved.
+  const layout = useTabsStore((s) => s.layoutByScope[s.scope] ?? null);
+  const tabEntries = useTabsStore((s) => s.tabsByScope[s.scope]);
+  const activeTabKey = frameId ? findGroup(layout, frameId)?.activeKey : null;
+  const activeKind = activeTabKey
+    ? tabEntries?.find((t) => t.key === activeTabKey)?.kind
+    : undefined;
+  const frameColor = activeKind ? TAB_ACCENT[activeKind] : undefined;
+
   return (
     <>
-      {frameRect && (
+      {windowFocused && frameRect && (
         <div
           className="focus-frame"
           style={{
@@ -1169,6 +1260,7 @@ export function FocusFrameOverlay({
             top: frameRect.top,
             width: frameRect.width,
             height: frameRect.height,
+            outlineColor: frameColor,
           }}
         />
       )}
@@ -1223,19 +1315,26 @@ export function DragGhost() {
   const srcH = useDragStore((s) => s.drag?.previewH ?? 0);
   const thumbRef = useRef<HTMLDivElement>(null);
 
-  // Track Shift live so the options legend can highlight "force new window"
-  // while the file drag is in flight (Shift can toggle without a pointer move,
-  // which wouldn't otherwise re-render the ghost).
+  // Track Shift/Ctrl live so the options legend can highlight "force new
+  // window" / "copy out to another app" while the file drag is in flight (a
+  // modifier can toggle without a pointer move, which wouldn't otherwise
+  // re-render the ghost). Ctrl only marks the option here — FileTree's own
+  // drag gesture decides when to actually hand off to the native OS drag.
   const [shiftHeld, setShiftHeld] = useState(false);
+  const [ctrlHeld, setCtrlHeld] = useState(false);
   useEffect(() => {
     if (!isFileDrag) return;
-    const sync = (e: KeyboardEvent) => setShiftHeld(e.shiftKey);
+    const sync = (e: KeyboardEvent) => {
+      setShiftHeld(e.shiftKey);
+      setCtrlHeld(e.ctrlKey);
+    };
     window.addEventListener("keydown", sync);
     window.addEventListener("keyup", sync);
     return () => {
       window.removeEventListener("keydown", sync);
       window.removeEventListener("keyup", sync);
       setShiftHeld(false);
+      setCtrlHeld(false);
     };
   }, [isFileDrag]);
 
@@ -1261,14 +1360,21 @@ export function DragGhost() {
       <div className="tab-drag-ghost-label">{label}</div>
       {isFileDrag ? (
         <div className="tab-drag-ghost-opts">
+          {/* Exactly ONE option is marked at a time — it is what THIS release
+              would do. Ctrl (copy out) wins over Shift (force a new window),
+              matching the drag itself: once the cursor leaves the window with
+              Ctrl held, the OS drag owns the drop and the in-app targets are
+              out of the picture. */}
           <div className="tab-drag-ghost-opt">Drop on a folder → move file there</div>
-          <div className={`tab-drag-ghost-opt${shiftHeld ? "" : " active"}`}>
+          <div className={`tab-drag-ghost-opt${!shiftHeld && !ctrlHeld ? " active" : ""}`}>
             Drop → open in new window / dock into popout
           </div>
-          <div className={`tab-drag-ghost-opt${shiftHeld ? " active" : ""}`}>
+          <div className={`tab-drag-ghost-opt${shiftHeld && !ctrlHeld ? " active" : ""}`}>
             ⇧ Shift → force a new window
           </div>
-          <div className="tab-drag-ghost-opt">⌃ Ctrl-drag → copy to Signal / browser</div>
+          <div className={`tab-drag-ghost-opt${ctrlHeld ? " active" : ""}`}>
+            ⌃ Ctrl → copy out to another app
+          </div>
         </div>
       ) : null}
       {node ? (
@@ -1329,6 +1435,9 @@ interface TreeProps {
   node: LayoutNode;
   projectCwd: string;
   resizeSplit: (splitId: string, dividerIndex: number, fraction: number) => void;
+  /** Merge the two groups adjacent to a divider (double-click). Wired only when
+   *  both sides are leaf groups — see the divider's `onDoubleClick`. */
+  mergeGroups: (targetGroupId: string, sourceGroupId: string) => void;
   panelRef: React.RefObject<HTMLDivElement>;
   registerGroupBody: (id: string) => (el: HTMLDivElement | null) => void;
   onResized: () => void;
@@ -1353,6 +1462,25 @@ function LayoutTree(props: TreeProps) {
 function SplitView(props: TreeProps & { node: Extract<LayoutNode, { type: "split" }> }) {
   const { node } = props;
   const containerRef = useRef<HTMLDivElement>(null);
+  // Live DOM handles to each `.split-child`, so a divider drag can resize its two
+  // neighbours by writing `flex` directly — no store write per frame.
+  const childRefs = useRef<Map<number, HTMLDivElement>>(new Map());
+  // While a divider is dragging, the in-progress per-child flex sizes. Held in a
+  // ref (not state) so the drag never re-renders this subtree; applied to the DOM
+  // imperatively. Re-applied after every render (the layout effect below) so a
+  // re-render triggered by pane re-measurement (setGroupRects) can't clobber the
+  // drag back to the committed store sizes. `null` when no drag is in flight.
+  const dragSizesRef = useRef<number[] | null>(null);
+  const applyDragSizes = () => {
+    const sizes = dragSizesRef.current;
+    if (!sizes) return;
+    for (const [i, el] of childRefs.current) {
+      if (sizes[i] != null) el.style.flex = `${sizes[i]} 1 0`;
+    }
+  };
+  // Runs after every render: if a drag is live, re-assert its sizes over whatever
+  // flex React just wrote from the (still-stale) store `node.sizes`.
+  useLayoutEffect(applyDragSizes);
   // Minimum subwindow size (px) a divider drag may shrink a pane to, per axis,
   // from global settings (falling back to the built-in default).
   const minWidth = useSettingsStore((s) => s.settings?.min_subwindow_width) ?? DEFAULT_MIN_SUBWINDOW_PX;
@@ -1387,13 +1515,29 @@ function SplitView(props: TreeProps & { node: Extract<LayoutNode, { type: "split
       const minPx = isRow ? minWidth : minHeight;
       const minFrac = Math.min(minPx / total, pair / 2);
       const clamped = Math.min(Math.max(leftSize, minFrac), pair - minFrac);
-      props.resizeSplit(node.id, dividerIndex, clamped);
+      // Resize the two neighbours on the DOM (mirrors applyResize: only these two
+      // change, the pair sum is preserved) instead of writing the store every
+      // frame — the store write rebuilt the whole layout tree and re-rendered the
+      // entire pane layer on each move. The store is committed once on release.
+      const sizes = [...node.sizes];
+      sizes[dividerIndex] = clamped;
+      sizes[dividerIndex + 1] = pair - clamped;
+      dragSizesRef.current = sizes;
+      applyDragSizes();
+      // Panes live in CenterPanel's flat overlay, sized to measured rects — they
+      // don't reflow with the flex box, so re-measure to reposition them.
       props.onResized();
     };
     const onUp = (ev: PointerEvent) => {
       (e.target as HTMLElement).releasePointerCapture?.(ev.pointerId);
       window.removeEventListener("pointermove", onMove);
       window.removeEventListener("pointerup", onUp);
+      // Commit the final position to the store ONCE. The next render writes these
+      // same sizes via `node.sizes`, matching the DOM, so there's no visual jump;
+      // clear the override first so the layout effect stops re-asserting it.
+      const sizes = dragSizesRef.current;
+      dragSizesRef.current = null;
+      if (sizes) props.resizeSplit(node.id, dividerIndex, sizes[dividerIndex]);
       props.onResized();
     };
     window.addEventListener("pointermove", onMove);
@@ -1410,6 +1554,12 @@ function SplitView(props: TreeProps & { node: Extract<LayoutNode, { type: "split
         <Fragment key={child.id}>
           <div
             className="split-child"
+            // Registered so a divider drag can resize this child's flex directly
+            // on the DOM (see startDrag); the map self-heals on unmount.
+            ref={(el) => {
+              if (el) childRefs.current.set(i, el);
+              else childRefs.current.delete(i);
+            }}
             // flex-basis carries the size fraction; grow/shrink let dividers
             // claim their fixed pixels without distorting the ratio noticeably.
             style={{ flex: `${node.sizes[i] ?? 1} 1 0` }}
@@ -1420,6 +1570,18 @@ function SplitView(props: TreeProps & { node: Extract<LayoutNode, { type: "split
             <div
               className={`split-divider split-divider-${node.dir}`}
               onPointerDown={startDrag(i)}
+              // Double-click merges the two adjacent subwindows into one — but
+              // only when both sides are leaf groups (mirroring the ScrollLink
+              // guard below); next to a nested split it's a no-op. Survivor is
+              // the left/top child; the divider drag uses onPointerDown, so the
+              // two gestures don't collide.
+              onDoubleClick={() => {
+                const a = node.children[i];
+                const b = node.children[i + 1];
+                if (a.type === "group" && b.type === "group") {
+                  props.mergeGroups(a.id, b.id);
+                }
+              }}
             >
               {/* Scroll-link toggle: only between two adjacent leaf subwindows
                   whose active tabs are both syncable viewers (text/markdown/PDF). */}
diff --git a/src/components/layout/DetachedApp.tsx b/src/components/layout/DetachedApp.tsx
index 36235a7..7644b74 100644
--- a/src/components/layout/DetachedApp.tsx
+++ b/src/components/layout/DetachedApp.tsx
@@ -1,17 +1,30 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { emit, listen } from "@tauri-apps/api/event";
 import { getCurrentWindow } from "@tauri-apps/api/window";
-import { useSettingsStore } from "../../stores/settings";
+import {
+  useSettingsStore,
+  applyTheme,
+  applyZoom,
+  clampZoom,
+  stepZoom,
+  THEME_CHANGED_EVENT,
+  LANGUAGE_CHANGED_EVENT,
+} from "../../stores/settings";
+import { applyLanguage } from "../../lib/i18n";
 import {
   DETACHED_BOUNDS,
   DETACHED_CLOSE,
+  DETACHED_HIDE,
   DETACHED_EDIT,
   DETACHED_REQUEST_SEED,
+  DETACHED_ZOOM,
   applyEditToSubtree,
   applyRenameToTabs,
+  applyLocationToTabs,
   detachedSeedEvent,
   type DetachedEdit,
   type DetachedParam,
+  type DetachedRemoteInfo,
   type DetachedSeed,
 } from "../../stores/detached";
 import {
@@ -57,12 +70,86 @@ export function DetachedApp({ param }: Props) {
   // once split-in-popout (multi-pane) lands in the renderer (Phase 2).
   const [group, setGroup] = useState<LayoutNode | null>(null);
   const [tabs, setTabs] = useState<TabEntry[]>([]);
+  // The owning project's remoteness, streamed in the seed (this window is inert to
+  // the projects store). Drives the tab strip's locality badge/menu + machine
+  // names; undefined for a local project (no locality axis).
+  const [remoteInfo, setRemoteInfo] = useState<DetachedRemoteInfo | undefined>(undefined);
+
+  // This popout's OWN per-window zoom. Restored from the first seed (persisted on
+  // the main window's detached entry), then owned locally — Ctrl +/- adjusts it
+  // and streams the change back for persistence. Held in a ref so the keydown
+  // listener binds once. `zoomSeeded` guards apply-on-seed to the FIRST seed, so a
+  // later re-seed (an edit, a tab docked in) can't revert the live zoom.
+  const zoomRef = useRef(1);
+  const zoomSeeded = useRef(false);
 
   // Theme injection (same as the main shell), but nothing project-switch-aware.
+  // `skipZoom` so we DON'T inherit the main window's `ui_zoom` — a popout owns its
+  // own zoom (applied from its seed below), which is what makes zoom per-window.
   useEffect(() => {
-    void loadSettings();
+    void loadSettings({ skipZoom: true });
   }, [loadSettings]);
 
+  // Per-window zoom via Ctrl +/- / Ctrl+0, handled before any editable-target
+  // guard (like F11) so it works from a focused terminal too — the browser-zoom
+  // convention. Scales THIS window's webview only and streams the new value back
+  // to the main window so it persists on this popout's detached entry.
+  useEffect(() => {
+    const applyAndPersist = (z: number) => {
+      const next = clampZoom(z);
+      zoomRef.current = next;
+      applyZoom(next);
+      void emit(DETACHED_ZOOM, { scope: param.scope, groupId: param.groupId, zoom: next });
+    };
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (!(e.ctrlKey || e.metaKey) || e.shiftKey || e.altKey) return;
+      // Agent panes consume Ctrl +/- for their own font zoom and stopPropagation,
+      // so those never reach here — this only fires for the rest of the window.
+      if (e.code === "Equal") {
+        e.preventDefault();
+        applyAndPersist(stepZoom(zoomRef.current, 1));
+      } else if (e.code === "Minus") {
+        e.preventDefault();
+        applyAndPersist(stepZoom(zoomRef.current, -1));
+      } else if (e.code === "Digit0") {
+        e.preventDefault();
+        applyAndPersist(1);
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [param.scope, param.groupId]);
+
+  // This window is its own JS runtime with its own `document` and its own copy
+  // of the settings store — a theme change made in the main window's Settings
+  // dialog only ever touches ITS document, so without this a popout keeps
+  // whatever theme it had at open time. Re-apply live via the cross-window
+  // broadcast (see THEME_CHANGED_EVENT in stores/settings).
+  useEffect(() => {
+    let unlisten: (() => void) | undefined;
+    let cancelled = false;
+    listen<string>(THEME_CHANGED_EVENT, (e) => {
+      applyTheme(e.payload);
+    })
+      .then((fn) => { if (cancelled) fn(); else unlisten = fn; })
+      .catch(() => {});
+    return () => { cancelled = true; unlisten?.(); };
+  }, []);
+
+  // Same story for the UI language: this popout holds its own i18n store, so a
+  // language switch in the main window's Settings only re-renders that window
+  // without the cross-window broadcast. Re-apply live (see LANGUAGE_CHANGED_EVENT).
+  useEffect(() => {
+    let unlisten: (() => void) | undefined;
+    let cancelled = false;
+    listen<string>(LANGUAGE_CHANGED_EVENT, (e) => {
+      applyLanguage(e.payload);
+    })
+      .then((fn) => { if (cancelled) fn(); else unlisten = fn; })
+      .catch(() => {});
+    return () => { cancelled = true; unlisten?.(); };
+  }, []);
+
   // #42: when a PDF tab is popped out into THIS window, a SyncTeX forward search
   // from a TeX editor in the main (or another) window reaches us only over a
   // cross-window broadcast. Register the listener so the PDF here reveals/flashes
@@ -188,6 +275,17 @@ export function DetachedApp({ param }: Props) {
     listen<DetachedSeed>(detachedSeedEvent(label), (ev) => {
       seeded = true;
       if (timer) clearTimeout(timer);
+      // Restore this popout's own zoom on the FIRST seed only (later re-seeds must
+      // not clobber a live zoom the user has since changed). A popout that has its
+      // OWN persisted zoom uses it; a brand-new popout with none inherits the main
+      // window's current `ui_zoom` at birth (so a 4K user's popouts aren't tiny)
+      // and then diverges the moment it's adjusted. Undefined on both ⇒ 100%.
+      if (!zoomSeeded.current) {
+        zoomSeeded.current = true;
+        const mainZoom = useSettingsStore.getState().settings?.ui_zoom;
+        zoomRef.current = clampZoom(ev.payload.zoom ?? mainZoom);
+        applyZoom(zoomRef.current);
+      }
       // Register each seeded tab's viewerState BEFORE rendering, so a viewer pane
       // mounting this frame recovers its per-tab scroll/zoom + #45 autocomplete/
       // grammar overrides (our tabs never enter `useTabsStore`, where the viewer
@@ -195,6 +293,7 @@ export function DetachedApp({ param }: Props) {
       for (const t of ev.payload.tabs) setDetachedViewerState(t.key, t.viewerState);
       setGroup(ev.payload.subtree);
       setTabs(ev.payload.tabs);
+      setRemoteInfo(ev.payload.remote);
       // A tab docked INTO this popout from another window arrives on a seed
       // tagged with its key — play the same drop-in landing as an in-popout
       // merge as it mounts in its destination bar (batched with the state sets
@@ -244,6 +343,10 @@ export function DetachedApp({ param }: Props) {
     setGroup((g) => (g ? applyEditToSubtree(g, edit) : g));
     if (edit.kind === "rename") {
       setTabs((ts) => applyRenameToTabs(ts, edit.key, edit.label));
+    } else if (edit.kind === "setLocation") {
+      // Optimistic: flip the badge now; the main window respawns the pane on the
+      // new host and re-derives the same payload.
+      setTabs((ts) => applyLocationToTabs(ts, edit.key, edit.location));
     }
     void emit(DETACHED_EDIT, { scope: param.scope, groupId: param.groupId, edit });
   };
@@ -264,6 +367,17 @@ export function DetachedApp({ param }: Props) {
     pushEdit({ kind: "close", key });
   };
 
+  // Hide the WHOLE popout into the main window's right-panel "Hidden subwindows"
+  // list. Like handleClose it closes THIS OS window, but the main window PARKS the
+  // group (tabs stay mounted, PTYs alive) instead of discarding it — restorable
+  // from the panel. Hides the whole window (every pane of a multi-pane popout) as
+  // one hidden entry; destroy() bypasses our onCloseRequested so it won't also
+  // emit DETACHED_CLOSE (which would drop the tabs).
+  const handleHideWindow = () => {
+    void emit(DETACHED_HIDE, { scope: param.scope, groupId: param.groupId });
+    void getCurrentWindow().destroy();
+  };
+
   // Close-on-close: closing this OS window via the WM/title-bar CLOSES the
   // group's tabs for good — they are not docked back and do not restore on next
   // launch (dock-back is done by Ctrl+dragging the tab bar onto the main window,
@@ -305,8 +419,11 @@ export function DetachedApp({ param }: Props) {
       popoutId={param.groupId}
       tree={group}
       tabs={tabs}
+      remoteInfo={remoteInfo}
       onActivate={(key) => pushEdit({ kind: "activate", key })}
       onClose={handleClose}
+      onHideWindow={handleHideWindow}
+      onSetLocation={(key, location) => pushEdit({ kind: "setLocation", key, location })}
       onReorder={(tabKeys) => pushEdit({ kind: "reorder", tabKeys })}
       onSplit={(key, targetGroupId, edge) =>
         pushEdit({ kind: "split", key, targetGroupId, edge })
@@ -317,7 +434,10 @@ export function DetachedApp({ param }: Props) {
       onMove={(key, targetGroupId, index) =>
         pushEdit({ kind: "move", key, targetGroupId, index })
       }
-      onAddTab={(tab, targetGroupId) => pushEdit({ kind: "add", tab, targetGroupId })}
+      onAddTab={(tab, targetGroupId, edge) =>
+        pushEdit({ kind: "add", tab, targetGroupId, edge })
+      }
+      onFiles={(groupId, patch) => pushEdit({ kind: "files", groupId, ...patch })}
     />
   );
 }
diff --git a/src/components/layout/DetachedCenterPanel.tsx b/src/components/layout/DetachedCenterPanel.tsx
index bbefee5..904c5b0 100644
--- a/src/components/layout/DetachedCenterPanel.tsx
+++ b/src/components/layout/DetachedCenterPanel.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { emit, listen } from "@tauri-apps/api/event";
 import { cursorPosition, getCurrentWindow } from "@tauri-apps/api/window";
 import { PhysicalPosition } from "@tauri-apps/api/dpi";
@@ -26,33 +26,51 @@ import {
   type DetachedPanesRequest,
   type PaneRect,
 } from "../../stores/detached";
-import { TerminalView } from "../terminal/TerminalView";
-import { FileBrowser } from "../files/FileBrowser";
-import { EmbedPane } from "../embed/EmbedPane";
-import { FileViewerPane } from "../embed/FileViewerPane";
-import { NetworkTrafficPane } from "../monitoring/NetworkTrafficPane";
-import { SystemMonitorPane } from "../monitoring/SystemMonitorPane";
-import { DiskUsagePane } from "../monitoring/DiskUsagePane";
-import { CalendarPane } from "../calendar/CalendarPane";
+import { FileDropContext, type FileDropController } from "../files/fileDropContext";
+import { fileDropPayloads } from "../tabs/commitFileDrop";
+import { TabPane } from "../tabs/TabPane";
+import {
+  clampFilesWidth,
+  DEFAULT_GROUP_FILES_WIDTH,
+  SubwindowFilesSidebar,
+} from "../files/SubwindowFilesSidebar";
+import { useWindowFocused } from "../../hooks/useWindowFocused";
+import { TabHoverCard } from "../tabs/TabHoverCard";
 import { WindowControls } from "../header/WindowControls";
 import { DragGhost, SplitPreviewOverlay } from "./CenterPanel";
 import { TabDropPlaceholder } from "../tabs/TabDropPlaceholder";
 import { NewTabMenu } from "../tabs/NewTabMenu";
+import { CustomAgentDialog } from "../tabs/CustomAgentDialog";
 import { pickEdge } from "../tabs/dragGeometry";
+import {
+  chordMatches,
+  resolveChord,
+  type ShortcutAction,
+  type ShortcutMap,
+} from "../../lib/shortcuts";
+import { isEditableTarget } from "../../hooks/useKeyboard";
 import { useDragStore } from "../../stores/drag";
 import { useTabLandStore } from "../../stores/tabLand";
 import { useSettingsStore } from "../../stores/settings";
 import {
   DEFAULT_MIN_SUBWINDOW_PX,
   allGroups,
-  effectiveTabLocation,
   findGroup,
   type DropEdge,
   type GroupNode,
   type LayoutNode,
   type SplitNode,
   type TabEntry,
+  type TabLocation,
 } from "../../stores/tabs";
+import type { DetachedRemoteInfo } from "../../stores/detached";
+import {
+  TabSourceBadge,
+  TabLocalityBadge,
+  LocalityMenu,
+  tabLocation,
+  type LocalityMenuState,
+} from "../tabs/TabLocalityBadges";
 
 /** Pixel coordinates of a group body, relative to the detached center panel. */
 interface Rect {
@@ -62,6 +80,142 @@ interface Rect {
   height: number;
 }
 
+/**
+ * The horizontally-scrolling tab strip + flanking chevrons — the SAME overflow
+ * behaviour as the main window's `TabBar` (click-scroll, continuous hover-scroll,
+ * wheel-to-horizontal, chevrons that appear only on overflow). Extracted as its
+ * own component so each group's bar in a (possibly multi-pane) popout gets its
+ * own strip ref + scroll state, exactly as each main-window `TabBar` instance
+ * does. The bar div, its detach-drag handler, and the per-group `barRefs`
+ * registration stay in `renderGroup`; this only owns the scroll chrome.
+ */
+function DetachedTabStrip({
+  children,
+  revision,
+}: {
+  children: React.ReactNode;
+  /** Changes whenever the group's tab set (or its drop placeholder) changes, so
+   *  overflow is re-evaluated — adding/removing tabs alters the strip's
+   *  scrollWidth without resizing its own box, which the ResizeObserver misses. */
+  revision: string;
+}) {
+  const stripRef = useRef<HTMLDivElement>(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+
+  const updateScrollState = useCallback(() => {
+    const el = stripRef.current;
+    if (!el) {
+      setCanScrollLeft(false);
+      setCanScrollRight(false);
+      return;
+    }
+    setCanScrollLeft(el.scrollLeft > 1);
+    setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+  }, []);
+
+  // Track overflow so the chevrons toggle with the strip's size/content (mirrors
+  // the main-window `TabBar`): Resize catches the strip shrinking, the revision
+  // effect below catches scrollWidth changes from adding/removing tabs.
+  useEffect(() => {
+    const el = stripRef.current;
+    if (!el) return;
+    updateScrollState();
+    const onScroll = () => updateScrollState();
+    el.addEventListener("scroll", onScroll, { passive: true });
+    const ro = new ResizeObserver(() => updateScrollState());
+    ro.observe(el);
+    return () => {
+      el.removeEventListener("scroll", onScroll);
+      ro.disconnect();
+    };
+  }, [updateScrollState]);
+  useEffect(() => {
+    updateScrollState();
+  }, [revision, updateScrollState]);
+
+  // Scroll one chevron-press worth (most of the visible width) toward `dir`.
+  const scrollStrip = useCallback((dir: number) => {
+    const el = stripRef.current;
+    if (!el) return;
+    el.scrollBy({ left: dir * Math.max(120, el.clientWidth * 0.7), behavior: "smooth" });
+  }, []);
+
+  // Continuous scroll while a chevron is hovered: rAF loop nudges the strip each
+  // frame until the pointer leaves (mirrors the main window's chevrons).
+  const hoverScrollRef = useRef<number | null>(null);
+  const stopHoverScroll = useCallback(() => {
+    if (hoverScrollRef.current !== null) {
+      cancelAnimationFrame(hoverScrollRef.current);
+      hoverScrollRef.current = null;
+    }
+  }, []);
+  const startHoverScroll = useCallback((dir: number) => {
+    stopHoverScroll();
+    const step = () => {
+      const el = stripRef.current;
+      if (!el) return;
+      el.scrollLeft += dir * 6;
+      // The chevrons unmount at the edges (canScroll*), so onMouseLeave may never
+      // fire — stop once we can't scroll further in `dir` rather than spin forever.
+      const atEdge =
+        dir < 0
+          ? el.scrollLeft <= 0
+          : el.scrollLeft + el.clientWidth >= el.scrollWidth - 1;
+      if (atEdge) {
+        hoverScrollRef.current = null;
+        return;
+      }
+      hoverScrollRef.current = requestAnimationFrame(step);
+    };
+    hoverScrollRef.current = requestAnimationFrame(step);
+  }, [stopHoverScroll]);
+  useEffect(() => stopHoverScroll, [stopHoverScroll]);
+
+  // Translate a vertical wheel into horizontal strip scrolling so the tabs can be
+  // panned while hovering anywhere over them, not just via the (hidden) scrollbar.
+  const onStripWheel = useCallback((e: React.WheelEvent) => {
+    const el = stripRef.current;
+    if (!el || el.scrollWidth <= el.clientWidth) return;
+    const delta = e.deltaY !== 0 ? e.deltaY : e.deltaX;
+    if (delta === 0) return;
+    el.scrollLeft += delta;
+  }, []);
+
+  return (
+    <>
+      {canScrollLeft && (
+        <button
+          className="tab-scroll-btn left"
+          title="Scroll tabs left"
+          // Keep the chevron out of the bar's window-move/dock drag flow.
+          onPointerDown={(e) => e.stopPropagation()}
+          onMouseEnter={() => startHoverScroll(-1)}
+          onMouseLeave={stopHoverScroll}
+          onClick={() => scrollStrip(-1)}
+        >
+          ‹
+        </button>
+      )}
+      <div className="tab-strip" ref={stripRef} onWheel={onStripWheel}>
+        {children}
+      </div>
+      {canScrollRight && (
+        <button
+          className="tab-scroll-btn right"
+          title="Scroll tabs right"
+          onPointerDown={(e) => e.stopPropagation()}
+          onMouseEnter={() => startHoverScroll(1)}
+          onMouseLeave={stopHoverScroll}
+          onClick={() => scrollStrip(1)}
+        >
+          ›
+        </button>
+      )}
+    </>
+  );
+}
+
 interface Props {
   scope: string;
   /** The detached popout's identity (the main store's detached record id). Used
@@ -72,8 +226,20 @@ interface Props {
   tree: LayoutNode;
   /** All of the popout's tab payloads (across every group in the tree). */
   tabs: TabEntry[];
+  /** The owning project's remoteness (machines + primary host name), streamed in
+   *  the seed. Drives the per-tab locality badge/menu; undefined = local project
+   *  (no locality axis, no badge — parity with a local main-window strip). */
+  remoteInfo?: DetachedRemoteInfo;
   onActivate: (key: string) => void;
   onClose: (key: string) => void;
+  /** Hide the WHOLE popout into the main window's right-panel "Hidden subwindows"
+   *  list (the detached twin of a main-window subwindow's "–" hide). Closes this
+   *  OS window; the group is parked with its tabs mounted and restored from there.
+   *  Undefined ⇒ no hide affordance. */
+  onHideWindow?: () => void;
+  /** Multi-host: change where a locatable tab runs (streamed to the main window,
+   *  which owns the PTY and respawns the pane on the chosen host). */
+  onSetLocation: (key: string, location: TabLocation) => void;
   /** Reorder a bar's tabs (a tab dragged + dropped back onto its own bar). The
    *  main store resolves WHICH group from the key set. */
   onReorder: (tabKeys: string[]) => void;
@@ -86,10 +252,16 @@ interface Props {
   /** Merge `key` into `targetGroupId` (at `index`, else append) — a tab dragged
    *  onto ANOTHER group's bar (or body center) inside a split popout. */
   onMove: (key: string, targetGroupId: string, index?: number) => void;
-  /** Create a new tab (from the popout's own "+" menu) in `targetGroupId`. The
-   *  detached window can't mint the key/own the PTY, so it streams the resolved
-   *  payload to the main window, which creates the tab and re-seeds. */
-  onAddTab: (tab: Omit<TabEntry, "key">, targetGroupId: string) => void;
+  /** Create a new tab in `targetGroupId` — the popout's own "+" menu, or a file
+   *  dropped onto a pane inside the popout. The detached window can't mint the
+   *  key/own the PTY, so it streams the resolved payload to the main window, which
+   *  creates the tab and re-seeds. A side `edge` carves a NEW pane at that edge (a
+   *  file dropped on a body edge); omitted/"center" appends to the group. */
+  onAddTab: (tab: Omit<TabEntry, "key">, targetGroupId: string, edge?: DropEdge) => void;
+  /** Toggle/resize a group's docked file-viewer column (the per-subwindow right
+   *  file viewer): applied optimistically popout-side and streamed to the main
+   *  window so the flag persists (and survives a dock-back). */
+  onFiles: (groupId: string, patch: { open?: boolean; width?: number; folder?: string }) => void;
 }
 
 /**
@@ -105,16 +277,30 @@ export function DetachedCenterPanel({
   popoutId,
   tree,
   tabs,
+  remoteInfo,
   onActivate,
   onClose,
+  onHideWindow,
+  onSetLocation,
   onReorder,
   onSplit,
   onResize,
   onMove,
   onAddTab,
+  onFiles,
 }: Props) {
   // The popout's "+" add-tab menu: which group opened it + where to anchor it.
   const [addMenu, setAddMenu] = useState<{ groupId: string; x: number; y: number } | null>(null);
+  const [agentDialogOpen, setAgentDialogOpen] = useState(false);
+  // Tab hover card anchor (the hovered tab's bottom-centre), mirroring the main
+  // window's TabBar — the popout has its own tab strip, so it renders its own.
+  const [hoverTab, setHoverTab] = useState<{ key: string; x: number; y: number } | null>(null);
+  // Multi-host locality menu (shared with TabBar). Machine names + the primary
+  // host come from the streamed `remoteInfo`; undefined ⇒ local project, no badge.
+  const [localityMenu, setLocalityMenu] = useState<LocalityMenuState | null>(null);
+  const isRemote = !!remoteInfo;
+  const primaryHost = remoteInfo?.primaryHost;
+  const computeHosts = remoteInfo?.computeHosts;
   // One bar element per group, so a per-tab drag can hit-test the bar it's over.
   const barRefs = useRef<Map<string, HTMLDivElement>>(new Map());
   // One body element per group, for resolving an edge-split drop target.
@@ -125,6 +311,10 @@ export function DetachedCenterPanel({
   // overlay, which must paint ABOVE the per-group panes (opaque terminals) — so,
   // like the main window, it lives at the panel level rather than in a body.
   const [groupRects, setGroupRects] = useState<Record<string, Rect>>({});
+  // Whole-subwindow rects (tab bar + pane region, sidebar excluded), used by the
+  // focus frame so it wraps the current subwindow's tab header too — mirrors the
+  // main window's `groupFrameRects`.
+  const [groupFrameRects, setGroupFrameRects] = useState<Record<string, Rect>>({});
   // Minimum subwindow size (px) a divider drag may shrink a pane to, per axis.
   const minWidth = useSettingsStore((s) => s.settings?.min_subwindow_width) ?? DEFAULT_MIN_SUBWINDOW_PX;
   const minHeight = useSettingsStore((s) => s.settings?.min_subwindow_height) ?? DEFAULT_MIN_SUBWINDOW_PX;
@@ -164,6 +354,9 @@ export function DetachedCenterPanel({
   // detached window is inert to the main tabs store (separate JS heap, layout
   // streamed via props), so focus is tracked locally here.
   const [focusedGroupId, setFocusedGroupId] = useState<string | null>(null);
+  // Only paint this popout's active subwindow while the popout itself owns OS
+  // focus, so it and the main window never both highlight one at once (#42).
+  const windowFocused = useWindowFocused();
   // Keep focus on a group that still exists as the tree changes (split added /
   // removed / docked back); default to the first group.
   useEffect(() => {
@@ -171,6 +364,111 @@ export function DetachedCenterPanel({
     setFocusedGroupId((cur) => (cur && ids.includes(cur) ? cur : (ids[0] ?? null)));
   }, [tree]);
 
+  // ── Keyboard shortcuts (parity with the main window) ──────────────────────
+  // The popout is a separate JS heap, inert to the tabs store, so the main
+  // window's `useKeyboard` (which drives `useTabsStore`) can't run here. Instead
+  // we handle the WINDOW-LOCAL chords against THIS popout's own layout + edit
+  // protocol, resolving each chord through the SAME `shortcuts.ts` map (incl. the
+  // user's overrides) so a rebound key behaves identically in both windows.
+  //
+  // Only the actions with a popout equivalent are wired: close tab, prev/next/
+  // cycle tab, cycle subwindow focus, and F11 OS-fullscreen. The rest are
+  // deliberately absent because the popout has no matching concept:
+  // app-internal fullscreen, hide/close-subwindow (no such edit), and
+  // cycle-project (a popout owns no project switcher). Live values are read
+  // through a ref so the window listener binds once and never churns on the
+  // per-render identity of the edit callbacks.
+  const kbRef = useRef({ tree, focusedGroupId, onActivate, onClose, onFiles });
+  kbRef.current = { tree, focusedGroupId, onActivate, onClose, onFiles };
+  useEffect(() => {
+    const win = getCurrentWindow();
+    const onKeyDown = async (e: KeyboardEvent) => {
+      // F11 — OS fullscreen (Windows: maximize toggle, matching the main window,
+      // since real fullscreen strips the styles native dragging relies on).
+      // Handled before the editable-target guard so it works from a terminal too.
+      if (e.key === "F11") {
+        e.preventDefault();
+        if (PLATFORM === "windows") {
+          if (await win.isMaximized()) void win.unmaximize();
+          else void win.maximize();
+        } else {
+          const isFs = await win.isFullscreen();
+          void win.setFullscreen(!isFs);
+        }
+        return;
+      }
+      // Never steal keys from a focused text field / xterm textarea (same rule
+      // the main window applies) — otherwise typing in a terminal would trip the
+      // nav chords.
+      if (isEditableTarget(e.target)) return;
+
+      const overrides = useSettingsStore.getState().settings
+        ?.keyboard_shortcuts as ShortcutMap | undefined;
+      const is = (action: ShortcutAction) =>
+        chordMatches(resolveChord(action, overrides), e);
+      const {
+        tree: t,
+        focusedGroupId: fid,
+        onActivate: activate,
+        onClose: close,
+        onFiles: files,
+      } = kbRef.current;
+      const focused = (fid && findGroup(t, fid)) || allGroups(t)[0] || null;
+
+      // Toggle the focused subwindow's docked file viewer (streams a files edit
+      // back to the main window, same as the ◫ button / resize-edge double-click).
+      if (is("toggleSubwindowFiles")) {
+        if (focused) {
+          e.preventDefault();
+          files(focused.id, { open: !focused.filesOpen });
+        }
+        return;
+      }
+
+      // Close the active tab of the focused subwindow. DetachedApp's handleClose
+      // closes the whole window when it was the last tab.
+      if (is("closeTab")) {
+        if (focused?.activeKey) {
+          e.preventDefault();
+          close(focused.activeKey);
+        }
+        return;
+      }
+
+      // Previous / next / cycle tab within the focused subwindow.
+      const prev = is("prevTab");
+      if (prev || is("nextTab") || is("cycleTabs")) {
+        if (focused && focused.tabKeys.length > 1) {
+          e.preventDefault();
+          const len = focused.tabKeys.length;
+          const cur = focused.activeKey ? focused.tabKeys.indexOf(focused.activeKey) : 0;
+          const next = focused.tabKeys[(cur + (prev ? -1 : 1) + len) % len];
+          activate(next);
+        }
+        return;
+      }
+
+      // Cycle which subwindow is focused (only meaningful once the popout is
+      // split into several panes). A direct move — the popout has a focus frame
+      // but not the main window's numbered Shift-preview nav.
+      const down = is("subwindowDown");
+      if (down || is("subwindowUp")) {
+        const ids = allGroups(t).map((g) => g.id);
+        if (ids.length >= 2) {
+          e.preventDefault();
+          const from = fid ? ids.indexOf(fid) : -1;
+          const base = from >= 0 ? from : 0;
+          setFocusedGroupId(ids[(base + (down ? 1 : -1) + ids.length) % ids.length]);
+        }
+        return;
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+    // Bind once: live state is read via kbRef; the resolver reads settings live.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   // ── Pane-region measurement (for the split-preview overlay) ───────────────
   // Recompute every group body's rect (relative to the panel) so the overlay can
   // paint the half/whole a split drop would carve out. Mirrors CenterPanel.measure.
@@ -179,27 +477,42 @@ export function DetachedCenterPanel({
     if (!panel) return;
     const base = panel.getBoundingClientRect();
     const next: Record<string, Rect> = {};
+    const frames: Record<string, Rect> = {};
     for (const [id, el] of bodyRefs.current) {
       if (!el.isConnected) continue;
       const r = el.getBoundingClientRect();
       next[id] = { left: r.left - base.left, top: r.top - base.top, width: r.width, height: r.height };
+      // The enclosing subwindow box spans the tab header bar + body; clamp the
+      // right edge to the pane region's right (`r`, the measured element here)
+      // so a docked files sidebar in the same body is excluded from the frame.
+      const sub = el.closest(".subwindow");
+      if (sub) {
+        const sr = sub.getBoundingClientRect();
+        frames[id] = {
+          left: sr.left - base.left,
+          top: sr.top - base.top,
+          width: r.right - sr.left,
+          height: sr.height,
+        };
+      }
     }
-    setGroupRects((prev) => {
-      const keys = Object.keys(next);
-      if (keys.length === Object.keys(prev).length) {
-        let same = true;
-        for (const k of keys) {
-          const a = next[k];
-          const b = prev[k];
-          if (!b || a.left !== b.left || a.top !== b.top || a.width !== b.width || a.height !== b.height) {
-            same = false;
-            break;
-          }
+    const sameRects = (
+      a: Record<string, Rect>,
+      b: Record<string, Rect>,
+    ): boolean => {
+      const keys = Object.keys(a);
+      if (keys.length !== Object.keys(b).length) return false;
+      for (const k of keys) {
+        const x = a[k];
+        const y = b[k];
+        if (!y || x.left !== y.left || x.top !== y.top || x.width !== y.width || x.height !== y.height) {
+          return false;
         }
-        if (same) return prev;
       }
-      return next;
-    });
+      return true;
+    };
+    setGroupRects((prev) => (sameRects(next, prev) ? prev : next));
+    setGroupFrameRects((prev) => (sameRects(frames, prev) ? prev : frames));
   }, []);
 
   // Re-measure when the popout's tree changes (split added/removed/resized).
@@ -369,7 +682,7 @@ export function DetachedCenterPanel({
   // it to this popout's drag store: a tab BAR → within-bar reorder slot; a group
   // BODY → edge split of that group. Mirrors CenterPanel.resolveTarget, but scans
   // this popout's own per-group bar/body refs (it may have several once split).
-  const resolveLocalTarget = (clientX: number, clientY: number) => {
+  const resolveLocalTarget = useCallback((clientX: number, clientY: number) => {
     const setTarget = useDragStore.getState().setTarget;
     const clear = () =>
       setTarget({ overGroup: null, edge: null, reorderGroup: null, reorderIndex: null });
@@ -403,7 +716,45 @@ export function DetachedCenterPanel({
       return;
     }
     clear();
-  };
+  }, []);
+
+  // #42: a FILE dragged out of the file tree (a Files (Project) tab) onto a pane
+  // inside THIS popout. The main window's `commitFileDrop` can't run here (the
+  // popout doesn't own the tab store), so commit the resolved target as a
+  // detached `add` edit: a bar / pane-centre → append; a body side edge → carve a
+  // new pane. Provided to the tree via `FileDropContext`, with `resolveLocalTarget`
+  // as its per-move target resolver so the split/merge preview lights up.
+  const fileDrop = useMemo<FileDropController>(
+    () => ({
+      resolveTarget: resolveLocalTarget,
+      commit: (d, projectCwd) => {
+        const drag = useDragStore.getState().drag;
+        if (!drag) return;
+        const payloads = fileDropPayloads(d, projectCwd);
+        if (payloads.length === 0) return;
+        // Body side edge → the first file carves a new pane at that edge; any
+        // further files (a multi-selection) append to the target group, since the
+        // popout can't reference the pane the main window is about to mint.
+        if (drag.overGroup && drag.edge && drag.edge !== "center") {
+          onAddTab(payloads[0], drag.overGroup, drag.edge);
+          for (const p of payloads.slice(1)) onAddTab(p, drag.overGroup);
+          return;
+        }
+        // A pane centre/body, or a tab bar → append to that group. No pane under
+        // the cursor (released over empty space) → nothing (never leak a file out).
+        const target = drag.overGroup ?? drag.reorderGroup;
+        if (!target) return;
+        for (const p of payloads) onAddTab(p, target);
+      },
+      // No drag involved (a button click): drop the tab into the popout's focused
+      // group, else its first group, streamed to the main window via onAddTab.
+      openTab: (tab) => {
+        const target = focusedGroupId ?? allGroups(tree)[0]?.id;
+        if (target) onAddTab(tab, target);
+      },
+    }),
+    [resolveLocalTarget, onAddTab, focusedGroupId, tree],
+  );
 
   // A per-tab drag released over THIS popout: commit the LAST resolved target
   // (set by resolveLocalTarget during the drag) — a bar slot reorders, a body
@@ -488,8 +839,12 @@ export function DetachedCenterPanel({
     // The source group of a per-tab drag (for local ghost/reorder visuals).
     sourceGroup?: GroupNode;
     tabKey?: string;
+    // ONE pane (inner group) of a multi-pane popout dragged by its bar grip: the
+    // host docks just this group (attachDetachedPane) — never the whole popout.
+    paneGroupId?: string;
   }) => {
-    const { pointerId, captureEl, label: dragLabel, moveWindow, tabKey, sourceGroup } = args;
+    const { pointerId, captureEl, label: dragLabel, moveWindow, tabKey, sourceGroup, paneGroupId } =
+      args;
     // Per-tab drags pass `captureEl: null` (no stable element under the pointer);
     // on engines that need capture to deliver the terminal event, fall back to a
     // stable element (the panel root, else document.body). Without this, dragging a
@@ -647,6 +1002,7 @@ export function DetachedCenterPanel({
           cursorPhysX: seed.x,
           cursorPhysY: seed.y,
           tabKey,
+          paneId: paneGroupId,
         } satisfies DetachedDragStart);
         startPoll();
       })
@@ -702,6 +1058,19 @@ export function DetachedCenterPanel({
         finish(handledLocally, shift);
         return;
       }
+      // A PANE drag released over its own popout stays put: the window doesn't
+      // follow the cursor (moveWindow=false), and the popout usually floats
+      // ABOVE the main window — the host's inMain test alone would read a
+      // release-in-place as "dock into main". Cancel so the host no-ops.
+      if (!shift && paneGroupId != null && popoutFrame) {
+        const c = physToClient(popoutFrame, last);
+        const overSelf =
+          c.x >= 0 && c.y >= 0 && c.x <= window.innerWidth && c.y <= window.innerHeight;
+        if (overSelf) {
+          finish(true, shift);
+          return;
+        }
+      }
       finish(false, shift);
     };
     // bindDragRelease applies the engine-correct policy (WebKitGTK: pointercancel
@@ -713,24 +1082,19 @@ export function DetachedCenterPanel({
     });
   };
 
-  // #42: grab a group's empty bar area to move/dock the WHOLE popout window.
-  const onGroupBarPointerDown = (e: React.PointerEvent, group: GroupNode) => {
+  // Grab a group's bar grip → MOVE the whole popout window natively (option B:
+  // move-only). This replaces the old streamed move+dock gesture (`beginDockDrag`)
+  // whose cross-window protocol is what painted a dock/split preview in the main
+  // window while you were merely repositioning a popout. A popout no longer docks
+  // back — nor separates a pane — by dragging; those are part of a re-docking
+  // redesign still to come. Only the explicit `.tab-drag-grip` starts the move;
+  // grabbing empty bar space does not.
+  const onGroupBarPointerDown = (e: React.PointerEvent, _group: GroupNode) => {
     if (e.button !== 0) return;
     const target = e.target as HTMLElement;
-    // Only the explicit `.tab-drag-grip` moves/docks the popout from the tab bar —
-    // grabbing empty bar space no longer does (the titlebar remains a move handle).
     if (!target.closest(".tab-drag-grip")) return;
     e.preventDefault();
-    const activeLabel =
-      group.tabKeys
-        .map((k) => byKey.get(k))
-        .find((t) => t?.key === group.activeKey)?.label ?? "Subwindow";
-    beginDockDrag({
-      pointerId: e.pointerId,
-      captureEl: e.currentTarget as HTMLElement,
-      label: activeLabel,
-      moveWindow: true,
-    });
+    beginNativeWindowMove();
   };
 
   // #42 (Windows): show the cheap move placeholder for the duration of a NATIVE
@@ -776,6 +1140,20 @@ export function DetachedCenterPanel({
       .catch(() => {});
   };
 
+  // Move-only, most-native window reposition. Hands the drag straight to the OS
+  // (`startDragging`) instead of the streamed poll+setPosition dock gesture
+  // (`beginDockDrag`) — so it emits NO cross-window dock protocol and therefore
+  // no other window ever paints a dock/split preview for it. This is the whole-
+  // subwindow behaviour: a popout's grip and titlebar only REPOSITION the window;
+  // re-docking back into another window by dragging is deliberately gone (a
+  // separate re-docking design is planned). On Windows the move placeholder keeps
+  // the frame aligned during the OS modal move loop (WebView2 can't repaint the
+  // terminals fast enough); other engines don't need it.
+  const beginNativeWindowMove = () => {
+    if (PLATFORM === "windows") beginWindowMove();
+    void getCurrentWindow().startDragging().catch(() => {});
+  };
+
   // #42: grab the popout's outer title bar to move/dock the WHOLE window. Mirrors
   // the group-bar handle, but anchored to the always-full-width title strip so it
   // works the same whether or not the content is split. The window controls carry
@@ -785,32 +1163,10 @@ export function DetachedCenterPanel({
     const target = e.target as HTMLElement;
     if (target.closest(".detached-titlebar-controls, button, .no-drag")) return;
     e.preventDefault();
-    // Windows: move the borderless popout with the NATIVE OS window drag, the same
-    // mechanism the main window's HeaderBar uses. The custom poll+setPosition dock
-    // gesture (`beginDockDrag`) can't move the window on Windows — window-follow is
-    // disabled there (`followWindowOnDockDrag=false`), AND the focus loss when the
-    // main window paints its dock ghost trips the `blur` backstop in
-    // `bindDragRelease` (armed because `needsPointerCapture` is true on Windows),
-    // which aborts the gesture with `cancelled=true` and so SKIPS the on-release
-    // `setPosition`. The popout was therefore frozen during the drag and never
-    // jumped on release. `startDragging` hands the move to the OS: live, DPI-correct,
-    // and correct across monitors. Dock-back-into-main stays available via the group
-    // tab-bar handle (`onGroupBarPointerDown`). Other platforms keep the unified
-    // move+dock gesture, where window-follow already works — untouched.
-    if (PLATFORM === "windows") {
-      beginWindowMove();
-      void getCurrentWindow().startDragging().catch(() => {});
-      return;
-    }
-    const first = allGroups(tree)[0];
-    const activeLabel =
-      (first ? tabs.find((t) => t.key === first.activeKey)?.label : undefined) ?? "Subwindow";
-    beginDockDrag({
-      pointerId: e.pointerId,
-      captureEl: e.currentTarget as HTMLElement,
-      label: activeLabel,
-      moveWindow: true,
-    });
+    // Move the whole popout window natively on every platform (see
+    // `beginNativeWindowMove`) — no streamed dock gesture, so dragging the
+    // titlebar never makes another window flash a dock/split preview.
+    beginNativeWindowMove();
   };
 
   // #42: dragging a SINGLE tab out of `group`. Activate on press, then once the
@@ -865,7 +1221,7 @@ export function DetachedCenterPanel({
     const localReorder = reorderGroupId === group.id ? reorderIndex : null;
     const isDropTarget = localReorder != null;
     const dropPlaceholder = <TabDropPlaceholder label={dragLabel} />;
-    const isFocused = group.id === focusedGroupId;
+    const isFocused = windowFocused && group.id === focusedGroupId;
     return (
       <div
         className={`subwindow${isFocused ? " focused" : ""}`}
@@ -898,6 +1254,13 @@ export function DetachedCenterPanel({
           >
             ⠿
           </div>
+          {/* The tabs live in their own horizontally-scrolling strip; chevrons
+              flank it and appear only on overflow — the same behaviour as the
+              main-window `TabBar`. `revision` re-checks overflow when the tab set
+              (or its drop placeholder) changes. */}
+          <DetachedTabStrip
+            revision={`${orderedTabs.map((t) => t.key).join(",")}|${isDropTarget}|${localReorder}`}
+          >
           {/* Empty bar that's a drop target: the placeholder is the only slot. */}
           {isDropTarget && orderedTabs.length === 0 && (
             <Fragment key="drop-marker">{dropPlaceholder}</Fragment>
@@ -916,6 +1279,15 @@ export function DetachedCenterPanel({
                 <div
                   className={`tab ${isActive ? "active" : ""}${isDragging ? " dragging" : ""}${landing ? " landing" : ""}`}
                   onPointerDown={(e) => onTabPointerDown(e, group, tab)}
+                  // Styled hover card (same one the main window's TabBar shows —
+                  // this strip is bespoke, so it anchors the shared card itself).
+                  onMouseEnter={(e) => {
+                    const r = e.currentTarget.getBoundingClientRect();
+                    setHoverTab({ key: tab.key, x: r.left + r.width / 2, y: r.bottom });
+                  }}
+                  onMouseLeave={() =>
+                    setHoverTab((h) => (h?.key === tab.key ? null : h))
+                  }
                   // Clear the landing once it finishes so the class doesn't linger
                   // (guard on currentTarget so a child's animationend never clears
                   // it early). Mirrors the main-window `TabBar`.
@@ -928,6 +1300,26 @@ export function DetachedCenterPanel({
                   }
                 >
                   <span className="tab-label">{tab.label}</span>
+                  {/* Local/remote badges — parity with the main-window TabBar,
+                      via the shared TabLocalityBadges. The source badge reads THIS
+                      window's fileSources store; the locality badge/menu use the
+                      streamed host list and route changes through onSetLocation. */}
+                  <TabSourceBadge tabKey={tab.key} />
+                  {isRemote && (
+                    <TabLocalityBadge
+                      tab={tab}
+                      primaryHost={primaryHost}
+                      computeHosts={computeHosts}
+                      onOpen={(r, startOnMachines) =>
+                        setLocalityMenu({
+                          key: tab.key,
+                          x: r.left,
+                          y: r.bottom + 2,
+                          view: startOnMachines ? "machines" : "root",
+                        })
+                      }
+                    />
+                  )}
                   <button
                     className="tab-close"
                     onClick={(e) => {
@@ -969,14 +1361,66 @@ export function DetachedCenterPanel({
               +
             </button>
           </div>
+          </DetachedTabStrip>
+          {/* Per-subwindow right file viewer, same ◫ toggle as the main window's
+              TabBar. Applied optimistically + streamed to the main window. When
+              the viewer is docked below, the control reserves its width (like
+              the main window's `.tab-controls`) so it stays pinned above the
+              viewer and the strip stops at the pane edge. */}
+          <div
+            className="tab-controls"
+            style={
+              group.filesOpen
+                ? { width: clampFilesWidth(group.filesWidth ?? DEFAULT_GROUP_FILES_WIDTH) }
+                : undefined
+            }
+          >
+            <button
+              className={`subwindow-files-toggle${group.filesOpen ? " open" : ""}`}
+              title={
+                group.filesOpen
+                  ? "Close this subwindow's file viewer"
+                  : "Open a file viewer in this subwindow"
+              }
+              onPointerDown={(e) => e.stopPropagation()}
+              onClick={(e) => {
+                e.stopPropagation();
+                onFiles(group.id, { open: !group.filesOpen });
+              }}
+            >
+              ◫
+            </button>
+            {/* Hide the WHOLE popout into the main window's right-panel Hidden
+                list — the detached twin of the main-window bar's "–". Rendered
+                per bar (like ◫); for a multi-pane popout every bar's "–" hides
+                the whole window as one hidden entry. stopPropagation keeps the
+                press off the bar's window-move/dock drag. */}
+            {onHideWindow && (
+              <button
+                className="subwindow-hide"
+                title="Hide this window into the right panel (bring it back from there)"
+                onPointerDown={(e) => e.stopPropagation()}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onHideWindow();
+                }}
+              >
+                –
+              </button>
+            )}
+          </div>
         </div>
-        <div
-          className="subwindow-body"
-          ref={(el) => {
-            if (el) bodyRefs.current.set(group.id, el);
-            else bodyRefs.current.delete(group.id);
-          }}
-        >
+        <div className="subwindow-body">
+          {/* The measured/drop-target body is the PANE REGION, not the whole
+              flex row — so edge-split drops and the split preview never target
+              the file-viewer column. */}
+          <div
+            className="subwindow-pane-region"
+            ref={(el) => {
+              if (el) bodyRefs.current.set(group.id, el);
+              else bodyRefs.current.delete(group.id);
+            }}
+          >
           <div className="pane-layer">
             {orderedTabs.map((tab) => {
               const visible = tab.key === group.activeKey;
@@ -985,65 +1429,44 @@ export function DetachedCenterPanel({
                 : { display: "none" };
               return (
                 <div key={tab.key} className="center-pane" data-tab-key={tab.key} style={style}>
-                  {tab.kind === "network" ? (
-                    <NetworkTrafficPane projectId={scope} visible={visible} />
-                  ) : tab.kind === "calendar" ? (
-                    <CalendarPane visible={visible} />
-                  ) : tab.kind === "monitor" ? (
-                    <SystemMonitorPane visible={visible} />
-                  ) : tab.kind === "diskusage" ? (
-                    <DiskUsagePane
-                      projectId={scope === "root" ? null : scope}
-                      projectCwd={tab.cwd}
-                      // No `tabKey` on purpose: a popout runs on a streamed COPY of
-                      // the tab payloads in its own JS heap, with no rename channel
-                      // back to the main window — renaming here would silently
-                      // diverge. A detached tab keeps the label it was given.
-                      visible={visible}
-                    />
-                  ) : tab.kind === "files" ? (
-                    <FileBrowser
-                      projectDir={tab.cwd}
-                      projectId={scope === "root" ? null : scope}
-                      active={visible}
-                    />
-                  ) : tab.kind === "embed" ? (
-                    tab.viewer ? (
-                      <FileViewerPane
-                        viewer={tab.viewer}
-                        path={tab.embedPath ?? ""}
-                        projectId={scope === "root" ? null : scope}
-                        tabKey={tab.key}
-                        visible={visible}
-                      />
-                    ) : (
-                      <EmbedPane
-                        path={tab.embedPath ?? ""}
-                        exec={tab.embedExec}
-                        projectId={scope === "root" ? null : scope}
-                        visible={visible}
-                      />
-                    )
-                  ) : (
-                    <TerminalView
-                      id={`${scope}:${tab.key}`}
-                      cmd={tab.cmd}
-                      args={tab.args ?? []}
-                      env={tab.env ?? {}}
-                      cwd={tab.cwd}
-                      // attachOnly: the main window owns the spawn, so localOnly is
-                      // cosmetic here — kept aligned with CenterPanel's locality.
-                      localOnly={effectiveTabLocation(tab) === "local"}
-                      zoomable={tab.kind === "agent" || tab.kind === "local_agent"}
-                      visible={visible}
-                      focused={visible}
-                      attachOnly
-                    />
-                  )}
+                  {/* The shared per-tab render switch (`components/tabs/TabPane`),
+                      the SAME one the main window uses. A popout is attach-only (the
+                      main window owns the PTY) and doesn't own the tab store, so it
+                      passes no `ownsTabs`/`onConnect`/mirror props — the cwd is just
+                      the tab's, since the projects store the mirror-swap needs isn't
+                      here. See TabPane for why each prop differs between windows. */}
+                  <TabPane
+                    tab={tab}
+                    scope={scope}
+                    visible={visible}
+                    attachOnly
+                    filesProjectDir={tab.cwd}
+                    terminalCwd={tab.cwd}
+                  />
                 </div>
               );
             })}
           </div>
+          </div>
+          {/* Per-subwindow right file viewer. The popout has no projects store,
+              so the viewer resolves its root from the group's tab cwd (same
+              fallback a Files (Project) tab uses here); no open-in-new-tab (a
+              popout can't own tabs). Width edits stream back like the toggle. */}
+          {group.filesOpen && (
+            <SubwindowFilesSidebar
+              scope={scope}
+              cwd={
+                byKey.get(group.activeKey ?? group.tabKeys[0] ?? "")?.cwd ??
+                group.tabKeys.map((k) => byKey.get(k)?.cwd).find(Boolean) ??
+                ""
+              }
+              width={group.filesWidth}
+              onWidthChange={(w) => onFiles(group.id, { width: w })}
+              folder={group.filesFolder}
+              onFolderChange={(f) => onFiles(group.id, { folder: f })}
+              onHide={() => onFiles(group.id, { open: false })}
+            />
+          )}
         </div>
       </div>
     );
@@ -1083,6 +1506,18 @@ export function DetachedCenterPanel({
               <div
                 className={`split-divider split-divider-${node.dir}`}
                 onPointerDown={onDividerPointerDown(node, i)}
+                // Double-click merges the two adjacent subwindows (both must be
+                // leaf groups). No `merge` edit exists, so replay it as one
+                // `move` per source tab into the left/top survivor — the main
+                // window applies each via moveKeyInTree (which collapses the
+                // emptied source) and streams the result back.
+                onDoubleClick={() => {
+                  const a = node.children[i];
+                  const b = node.children[i + 1];
+                  if (a.type === "group" && b.type === "group") {
+                    for (const key of b.tabKeys) onMove(key, a.id);
+                  }
+                }}
               />
             )}
           </Fragment>
@@ -1099,6 +1534,7 @@ export function DetachedCenterPanel({
     "Subwindow";
 
   return (
+    <FileDropContext.Provider value={fileDrop}>
     <div className={`detached-center center-panel${windowDragging ? " moving" : ""}`}>
       {/* #42: the popout's own title bar — a full-width strip ABOVE the tab layout
           that always hosts the min/max/close controls top-right. They used to live
@@ -1119,21 +1555,22 @@ export function DetachedCenterPanel({
         {/* Split preview: the translucent half/whole a split drop would carve out,
             drawn above the per-group panes (mirrors the main window). */}
         <SplitPreviewOverlay groupRects={groupRects} />
-        {/* Focus frame: the accent outline around the current group's pane rect,
-            drawn here (above the opaque panes) for the same reason as the split
-            preview — an in-body frame would be hidden. Mirrors the main window's
-            `FocusFrameOverlay` (minus Shift+↑/↓ nav, which isn't wired here). */}
-        {focusedGroupId && groupRects[focusedGroupId] && (
-          <div
-            className="focus-frame"
-            style={{
-              left: groupRects[focusedGroupId].left,
-              top: groupRects[focusedGroupId].top,
-              width: groupRects[focusedGroupId].width,
-              height: groupRects[focusedGroupId].height,
-            }}
-          />
-        )}
+        {/* Focus frame: the accent outline around the current subwindow (tab bar
+            + pane region, sidebar excluded), drawn here (above the opaque panes)
+            for the same reason as the split preview — an in-body frame would be
+            hidden. Mirrors the main window's `FocusFrameOverlay` (minus Shift+↑/↓
+            nav, which isn't wired here). Falls back to the pane rect if the
+            whole-subwindow box wasn't measured. */}
+        {windowFocused &&
+          focusedGroupId &&
+          (groupFrameRects[focusedGroupId] ?? groupRects[focusedGroupId]) && (
+            <div
+              className="focus-frame"
+              style={
+                groupFrameRects[focusedGroupId] ?? groupRects[focusedGroupId]
+              }
+            />
+          )}
         {/* #42 (Windows): the move placeholder. While shown, `.detached-center.moving`
             hides the heavy pane content so this trivial surface is all WebView2 has to
             composite during the native drag — keeping the content aligned with the
@@ -1165,10 +1602,48 @@ export function DetachedCenterPanel({
               anchor={{ x: addMenu.x, y: addMenu.y }}
               onPick={(tab) => onAddTab(tab, addMenu.groupId)}
               onClose={() => setAddMenu(null)}
+              onManageAgents={() => setAgentDialogOpen(true)}
             />
           );
         })()}
+      {agentDialogOpen && (
+        <CustomAgentDialog onClose={() => setAgentDialogOpen(false)} />
+      )}
+      {/* Multi-host locality menu — parity with the main-window TabBar, routed
+          through onSetLocation (the main window owns the PTY + respawns it). */}
+      {localityMenu && (
+        <LocalityMenu
+          menu={localityMenu}
+          current={tabLocation(byKey.get(localityMenu.key))}
+          primaryHost={primaryHost}
+          computeHosts={computeHosts}
+          onClose={() => setLocalityMenu(null)}
+          onChangeView={(view) => setLocalityMenu((m) => (m ? { ...m, view } : m))}
+          onChoose={(key, loc) => onSetLocation(key, loc)}
+        />
+      )}
+      {/* Styled tab hover card — parity with the main window's TabBar.
+          Suppressed mid-drag (local or streamed-in: both set the drag store)
+          and while the "+" menu is open so it never overlaps them. The card
+          reads THIS window's stores; the machine names come from the streamed
+          `remoteInfo` (the projects store is absent here). */}
+      {hoverTab && dragKey === null && !addMenu && (() => {
+        const tab = byKey.get(hoverTab.key);
+        if (!tab) return null;
+        return (
+          <TabHoverCard
+            tab={tab}
+            scope={scope}
+            isRemote={isRemote}
+            primaryHost={primaryHost}
+            computeHosts={computeHosts}
+            anchorX={hoverTab.x}
+            anchorY={hoverTab.y}
+          />
+        );
+      })()}
       <DragGhost />
     </div>
+    </FileDropContext.Provider>
   );
 }
diff --git a/src/components/layout/HeaderBar.tsx b/src/components/layout/HeaderBar.tsx
index 1d0e445..c223e57 100644
--- a/src/components/layout/HeaderBar.tsx
+++ b/src/components/layout/HeaderBar.tsx
@@ -11,6 +11,7 @@ import { Clock } from "../header/Clock";
 import { useEnergySaver, saverInterval } from "../../stores/power";
 import { ConnTypeIcon } from "../header/ConnTypeIcon";
 import { VpnIndicator } from "../header/VpnIndicator";
+import { MachinesIndicator } from "../header/MachinesIndicator";
 import { WindowControls } from "../header/WindowControls";
 import { ProjectSwitcher } from "./ProjectSwitcher";
 import { GlobalAppMenu } from "./GlobalAppMenu";
@@ -138,6 +139,7 @@ export function HeaderBar() {
       </div>
       <div className="header-right no-drag">
         <VpnIndicator />
+        <MachinesIndicator />
         <AppResourceDisplay />
         <AppTimerDisplay />
         <Clock />
diff --git a/src/components/layout/LocalModelMenu.tsx b/src/components/layout/LocalModelMenu.tsx
index 5a29b52..de45241 100644
--- a/src/components/layout/LocalModelMenu.tsx
+++ b/src/components/layout/LocalModelMenu.tsx
@@ -3,6 +3,13 @@ import { invoke } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
 import { useSettingsStore } from "../../stores/settings";
 import { useEnergySaver, saverInterval } from "../../stores/power";
+import {
+  formatBytes,
+  gpuAdapterTooltip,
+  gpuTone,
+  gpuTotals,
+  type GpuSample,
+} from "../../lib/gpu";
 
 /** Subset of the backend `OllamaModelInfo` the menu needs (installed models). */
 interface LocalModelInfo {
@@ -34,11 +41,6 @@ const MODEL_ROLES: Array<{ key: string; label: string }> = [
   { key: "tabs", label: "Tabs" },
 ];
 
-function fmtBytes(n: number): string {
-  if (n === 0) return "0 B";
-  if (n < 1024 * 1024 * 1024) return (n / (1024 * 1024)).toFixed(0) + " MB";
-  return (n / (1024 * 1024 * 1024)).toFixed(1) + " GB";
-}
 
 /**
  * Header button (left of the global-apps button) for the local (Ollama) models.
@@ -65,6 +67,8 @@ export function LocalModelMenu() {
   // Every installed model (from list_ollama_models_detailed). Resident ones are
   // selectable as the active local model; the rest can be loaded into memory.
   const [models, setModels] = useState<LocalModelInfo[]>([]);
+  /** The machine's GPUs; empty when none can be read, and then no headroom line. */
+  const [gpus, setGpus] = useState<GpuSample[]>([]);
   // Installed agent CLIs (from list_agents), shown in the Agents section so the
   // ones already available are visible without opening "Manage agents".
   const [agents, setAgents] = useState<AgentInfo[]>([]);
@@ -181,6 +185,26 @@ export function LocalModelMenu() {
     };
   }, [installed, energySaver]);
 
+  // The GPU's own memory, polled only while the menu is open: the question this
+  // menu raises is "will the next model fit?", which each model's `size_vram`
+  // (its own share) cannot answer — only the free headroom on the device can.
+  useEffect(() => {
+    if (!open) return;
+    let cancelled = false;
+    const check = () =>
+      invoke<GpuSample[]>("gpu_memory_snapshot")
+        .then((g) => {
+          if (!cancelled) setGpus(g);
+        })
+        .catch(() => {});
+    void check();
+    const id = window.setInterval(check, saverInterval(2000, energySaver));
+    return () => {
+      cancelled = true;
+      window.clearInterval(id);
+    };
+  }, [open, energySaver]);
+
   // Read the full installed-model list (resident + on-disk). Used on hover and
   // re-run after a load completes so a freshly-resident model moves up.
   const fetchModels = () => {
@@ -343,6 +367,7 @@ export function LocalModelMenu() {
   // Resident models are selectable; the rest are offered as "load into memory".
   const running = models.filter((m) => m.running);
   const available = models.filter((m) => !m.running);
+  const { used: gpuUsed, total: gpuTotal } = gpuTotals(gpus);
 
   return (
     <div className="global-apps-menu no-drag" onMouseEnter={reveal} onMouseLeave={scheduleClose}>
@@ -428,6 +453,20 @@ export function LocalModelMenu() {
               ))}
             </div>
           )}
+          {/* The device's memory, not any model's share of it: what is free here
+              is what the next model has to fit into. Absent when no GPU can be
+              read (macOS, an Intel-only box) — a zero would read as "no room". */}
+          {gpus.length > 0 && (
+            <div
+              className={`tab-new-menu-hint local-model-gpu ${gpuTone(gpuUsed, gpuTotal)}`}
+              title={gpus.map(gpuAdapterTooltip).join("\n")}
+            >
+              <span>
+                GPU {formatBytes(gpuUsed)} / {formatBytes(gpuTotal)}
+              </span>
+              <span>{formatBytes(Math.max(0, gpuTotal - gpuUsed))} free</span>
+            </div>
+          )}
           {!installed ? (
             <div className="tab-new-menu-hint">Ollama not installed</div>
           ) : loading && models.length === 0 ? (
@@ -465,7 +504,7 @@ export function LocalModelMenu() {
                         {m.parameter_size && <span>{m.parameter_size}</span>}
                         {m.quantization && <span>{m.quantization}</span>}
                         <span className={m.size_vram > 0 ? "gpu" : "cpu"}>
-                          {m.size_vram > 0 ? `GPU ${fmtBytes(m.size_vram)}` : "CPU"}
+                          {m.size_vram > 0 ? `GPU ${formatBytes(m.size_vram)}` : "CPU"}
                         </span>
                       </span>
                     </button>
diff --git a/src/components/layout/ProjectSwitcher.tsx b/src/components/layout/ProjectSwitcher.tsx
index e695366..d4f83fa 100644
--- a/src/components/layout/ProjectSwitcher.tsx
+++ b/src/components/layout/ProjectSwitcher.tsx
@@ -6,6 +6,8 @@ import { BoxPill } from "../projects/BoxPill";
 import { ProjectSearch } from "../projects/ProjectSearch";
 import { ProjectDialog } from "../projects/ProjectDialog";
 import { SettingsDialog, type SettingsPanelKind } from "./SettingsPanel";
+import { UntestedTag } from "../common/UntestedTag";
+import { useHpcPipelineStore } from "../../stores/hpcPipeline";
 import { useProjectsStore } from "../../stores/projects";
 import { useBoxesStore } from "../../stores/boxes";
 import { useTabsStore } from "../../stores/tabs";
@@ -31,6 +33,7 @@ export function ProjectSwitcher({ open = true }: { open?: boolean }) {
   const deleteBox = useBoxesStore((s) => s.deleteBox);
   const assignToBox = useBoxesStore((s) => s.assignToBox);
   const openBox = useBoxesStore((s) => s.openBox);
+  const openHpcWizard = useHpcPipelineStore((s) => s.openWizard);
   // The currently-displayed scope is the single source of truth for which pill
   // is highlighted (BoxPill keys off it too). Opening a box moves the scope but
   // not `activeId`, so highlighting on `activeId` would leave the previously
@@ -40,7 +43,9 @@ export function ProjectSwitcher({ open = true }: { open?: boolean }) {
   const [showSettingsMenu, setShowSettingsMenu] = useState(false);
   const [settingsPanel, setSettingsPanel] = useState<SettingsPanelKind>("main");
   const [showAddMenu, setShowAddMenu] = useState(false);
-  const [dialog, setDialog] = useState<"new" | "import" | null>(null);
+  // "clone" is the import dialog opened straight onto its GitHub/GitLab source —
+  // the same dialog, so the source can still be switched back inside it.
+  const [dialog, setDialog] = useState<"new" | "import" | "clone" | null>(null);
   const settingsMenuRef = useRef<HTMLDivElement>(null);
   const addMenuRef = useRef<HTMLDivElement>(null);
   // Hover-opened, like the header's sibling menus (GlobalAppMenu, LocalModelMenu,
@@ -343,9 +348,10 @@ export function ProjectSwitcher({ open = true }: { open?: boolean }) {
         />,
         document.body,
       )}
-      {dialog === "import" && createPortal(
+      {(dialog === "import" || dialog === "clone") && createPortal(
         <ProjectDialog
           kind="import"
+          initialImportSource={dialog === "clone" ? "git" : "folder"}
           onClose={() => setDialog(null)}
           onProject={(project) => addProject(project)}
         />,
@@ -525,12 +531,25 @@ export function ProjectSwitcher({ open = true }: { open?: boolean }) {
                 Import Project
               </button>
               <button
+                className="untested"
+                onClick={() => { setShowAddMenu(false); setDialog("clone"); }}
+              >
+                Import from GitHub/GitLab <UntestedTag />
+              </button>
+              <button
+                className="untested"
+                onClick={() => { setShowAddMenu(false); openHpcWizard(); }}
+              >
+                HPC pipeline… <UntestedTag />
+              </button>
+              <button
+                className="untested"
                 onClick={() => {
                   setShowAddMenu(false);
                   void createBox("New Box");
                 }}
               >
-                New Box
+                New Box <UntestedTag />
               </button>
             </div>
           )}
diff --git a/src/components/layout/RightPanel.tsx b/src/components/layout/RightPanel.tsx
index 6b8fc61..c615322 100644
--- a/src/components/layout/RightPanel.tsx
+++ b/src/components/layout/RightPanel.tsx
@@ -1,42 +1,18 @@
-import { useEffect, useMemo, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import { Toggle } from "../common/Toggle";
-import { invoke } from "@tauri-apps/api/core";
-import { open as openDialog } from "@tauri-apps/plugin-dialog";
-import { FileTree } from "../files/FileTree";
-import { DownloadsSection } from "../files/DownloadsSection";
-import { GitHistory } from "../files/GitHistory";
-import { GitChangeTree, type ChangeScope } from "../files/GitChangeTree";
-import { SearchPanel } from "../files/SearchPanel";
-import { Dropdown } from "../common/Dropdown";
-import { useProjectsStore, logoutRemote } from "../../stores/projects";
-import { useRemoteStatusStore } from "../../stores/remoteStatus";
-import { useSyncStore, amberPaths } from "../../stores/sync";
-import { openLinkedFile } from "../embed/FileViewerPane";
-import { useConnectDialogStore } from "../../stores/connectDialog";
-import { useWindowsStore } from "../../stores/windows";
-import { useSettingsStore } from "../../stores/settings";
-import { useTabsStore, orderedTabKeys } from "../../stores/tabs";
-import { BOX_SCOPE_PREFIX, boxScopeId, useBoxesStore } from "../../stores/boxes";
-import { resolveLocalMirror, resolveProjectDirectory } from "../../types";
-import { useGitDirtyStore, gitDirtyState } from "../../stores/gitDirty";
-import { type SortKey, VIEWER_PREF_TYPES } from "../../lib/viewers/fileUtils";
-import { basename, dirname, fromFileUri } from "../../lib/paths";
-import type { ViewerPref } from "../../types";
-import { projectTypeTags } from "../projects/projectTypeTags";
-import { ProjectHoverCard, useProjectHoverCard } from "../projects/ProjectHoverCard";
-
-interface GitStatus {
-  staged: number;
-  unstaged: number;
-  untracked: number;
-  has_remote: boolean;
-  is_repo: boolean;
-}
+import { useMemo, useState } from "react";
+import { ProjectFilesView } from "../files/ProjectFilesView";
+import { useFileSource } from "../files/ProjectFilesPane";
+import { openProjectFilesTab } from "../files/ProjectFilesTab";
+import { useProjectsStore } from "../../stores/projects";
+import { useTabsStore, orderedTabKeys, isPtyTabKind, type TabEntry } from "../../stores/tabs";
+import { useActivityStore, type AttentionKind } from "../../stores/activity";
+import { resolveProjectDirectory } from "../../types";
 
 interface Props {
   open: boolean;
   pinned?: boolean;
+  /** Which edge the panel docks against; drives the mirrored slide/border/resize
+   *  layout via the `.left` class. Defaults to "right". */
+  side?: "left" | "right";
   /** Current panel width in px (driven by the left-border resize drag). */
   width?: number;
   /** True while a resize drag is in progress — suppresses width/transform
@@ -46,379 +22,81 @@ interface Props {
   onResizeMove?: (e: React.PointerEvent<HTMLDivElement>) => void;
   onResizeEnd?: (e: React.PointerEvent<HTMLDivElement>) => void;
   onTogglePin?: () => void;
+  onToggleSide?: () => void;
   onMouseEnter?: () => void;
   onMouseLeave?: () => void;
 }
 
-type View = "files" | "windows" | "git" | "search" | "orange";
-type ProjectJson = Record<string, unknown>;
-
-const PANEL_HIDDEN_ENDINGS_KEY = "panel_hidden_endings";
-const PANEL_HIDDEN_PATHS_KEY = "panel_hidden_paths";
-const PANEL_SHOWN_PATHS_KEY = "panel_shown_paths";
-
-function readHiddenEndings(project: ProjectJson | null): string[] {
-  return readStringList(project, PANEL_HIDDEN_ENDINGS_KEY);
-}
-
-function readHiddenPaths(project: ProjectJson | null): string[] {
-  return readStringList(project, PANEL_HIDDEN_PATHS_KEY);
-}
-
-function readShownPaths(project: ProjectJson | null): string[] {
-  return readStringList(project, PANEL_SHOWN_PATHS_KEY);
-}
-
-function readStringList(project: ProjectJson | null, key: string): string[] {
-  const raw = project?.[key];
-  if (!Array.isArray(raw)) return [];
-  return raw.filter((item): item is string => typeof item === "string");
-}
-
-type ConflictChoice = "replace" | "rename" | "skip";
-
-/** Heuristic: is this drag an external OS file drag (vs. an internal pill/text
- *  drag)? `dragDropEnabled` stays false so HTML5 DnD keeps working for the
- *  app's pointer/HTML drags; an OS file drag advertises Files/uri-list/html
- *  (WebKitGTK uses text/html here). During dragover WebKit may hide the type
- *  list, so an empty list is treated as a file drag too. */
-function isExternalFileDrag(dt: DataTransfer): boolean {
-  const types = Array.from(dt.types ?? []);
-  if (types.length === 0) return true;
-  return (
-    types.includes("Files") ||
-    types.includes("text/uri-list") ||
-    types.includes("text/html")
-  );
-}
-
-/** Convert one `file://` URI to an absolute local path (decoding `%20` etc.).
- * Delegates to the shared OS-aware helper, including UNC authorities. */
-function fileUriToPath(uri: string): string | null {
-  return fromFileUri(uri);
-}
-
-/** Extract absolute local paths from an OS HTML5 file drop. WebKitGTK withholds
- *  `Files`/`text/uri-list` data here but leaks the `file://` URL inside
- *  `text/html`, so scan every text payload for `file://` URIs and dedupe.
- *  NOTE: this drag path is best-effort — some file managers only expose ONE
- *  file this way. Use the Import button for reliable multi-file selection. */
-function parseDroppedFilePaths(dataTransfer: DataTransfer): string[] {
-  const sources = [
-    dataTransfer.getData("text/uri-list"),
-    dataTransfer.getData("text/plain"),
-    dataTransfer.getData("text/html"),
-  ];
-  const FILE_URI = /file:\/\/[^\s"'<>]+/g;
-  const seen = new Set<string>();
-  const paths: string[] = [];
-  for (const raw of sources) {
-    if (!raw) continue;
-    for (const match of raw.match(FILE_URI) ?? []) {
-      const p = fileUriToPath(match);
-      if (p && !seen.has(p)) {
-        seen.add(p);
-        paths.push(p);
-      }
-    }
+/** A hidden subwindow's tab is invisible to the tab bar, so it can't paint its
+ *  own glow — this is the same working/needs-decision/finished precedence
+ *  `TabBar` uses for the live tab glow, applied here to a hidden group's tab
+ *  chips (and rolled up for the group's row) so a hidden pane doesn't go dark
+ *  just because it's parked. */
+function hiddenTabStatus(
+  kind: TabEntry["kind"] | undefined,
+  ptyId: string,
+  busyByTab: Record<string, boolean>,
+  attentionByTab: Record<string, AttentionKind>,
+): "working" | "needs-decision" | "finished" | null {
+  if (!kind) return null;
+  if (isPtyTabKind(kind) && busyByTab[ptyId]) return "working";
+  if (kind === "agent" || kind === "local_agent") {
+    const attn = attentionByTab[ptyId];
+    if (attn === "decision") return "needs-decision";
+    if (attn === "done") return "finished";
   }
-  return paths;
+  return null;
 }
 
-function mergeEndings(...groups: string[][]): string[] {
-  const endings = new Map<string, string>();
-  for (const group of groups) {
-    for (const ending of group) {
-      const trimmed = ending.trim();
-      if (!trimmed) continue;
-      endings.set(trimmed.toLowerCase(), trimmed);
-    }
-  }
-  return [...endings.values()].sort((a, b) => a.localeCompare(b));
-}
-
-/** One collapsible root inside the box multi-root file view. Reuses `FileTree`
- *  as-is for a single directory; per-root navigation persists via the projects
- *  store's `rightPanelFolderByProject` map keyed by the root's id. */
-function BoxRootSection({
-  rootId,
-  label,
-  icon,
-  dir,
-  localFile,
-  variant,
-  sortKey,
-  descending,
-}: {
-  rootId: string;
-  label: string;
-  icon: string;
-  dir: string;
-  localFile?: string;
-  variant: "box" | "member";
-  sortKey: SortKey;
-  descending: boolean;
-}) {
-  const [collapsed, setCollapsed] = useState(false);
-  const rel = useProjectsStore((s) => s.rightPanelFolderByProject[rootId] ?? "");
-  const setRightPanelFolder = useProjectsStore((s) => s.setRightPanelFolder);
-  return (
-    <div className={`file-root file-root--${variant}${collapsed ? " is-collapsed" : ""}`}>
-      <button
-        type="button"
-        className="file-root-header"
-        onClick={() => setCollapsed((c) => !c)}
-        title={dir}
-      >
-        <span className="file-root-caret" aria-hidden>
-          {collapsed ? "▸" : "▾"}
-        </span>
-        <span className="file-root-icon" aria-hidden>
-          {icon}
-        </span>
-        <span className="file-root-name">{label}</span>
-        <span className="file-root-kind">{variant === "box" ? "box" : "project"}</span>
-      </button>
-      {!collapsed && (
-        <div className="file-root-body">
-          <FileTree
-            projectDir={dir}
-            projectId={rootId}
-            localFile={localFile}
-            sortKey={sortKey}
-            descending={descending}
-            hiddenEndings={[]}
-            hiddenPaths={[]}
-            shownPaths={[]}
-            initialRelPath={rel}
-            onRelPathChange={(folder) => setRightPanelFolder(rootId, folder)}
-          />
-        </div>
-      )}
-    </div>
-  );
+/** Roll several tab statuses up into one, most urgent first — a decision still
+ *  waiting on the user outranks a tab merely working, which outranks one that's
+ *  just finished unseen. Mirrors `attentionByScope`'s decision-over-done
+ *  precedence, extended with `working` for the row-level dot. */
+function rollUpStatus(
+  statuses: Array<"working" | "needs-decision" | "finished" | null>,
+): "working" | "needs-decision" | "finished" | null {
+  if (statuses.includes("needs-decision")) return "needs-decision";
+  if (statuses.includes("working")) return "working";
+  if (statuses.includes("finished")) return "finished";
+  return null;
 }
 
+/**
+ * The file-tree overlay panel. Its file *viewer* — the view switcher, git bar +
+ * history, search, apps, orange list, type tags, source switch and settings — is
+ * the shared `ProjectFilesView`, the same component the Files (Project) tab
+ * renders, so the two can never drift. This host owns only what is panel-specific:
+ * the active-project identity it forwards, the browsed-folder in the projects
+ * store, and the three window-chrome fragments (pin, resize border, the "Hidden
+ * subwindows" list) it injects as slots — none of which a tab has.
+ */
 export function RightPanel({
   open,
   pinned,
+  side = "right",
   width,
   resizing,
   onResizeStart,
   onResizeMove,
   onResizeEnd,
   onTogglePin,
+  onToggleSide,
   onMouseEnter,
   onMouseLeave,
 }: Props) {
   const { projects, activeId } = useProjectsStore();
   const rightPanelFolderByProject = useProjectsStore((s) => s.rightPanelFolderByProject);
   const setRightPanelFolder = useProjectsStore((s) => s.setRightPanelFolder);
-  const { windows, refresh, untrack } = useWindowsStore();
-  const settings = useSettingsStore((s) => s.settings);
-  const updateSettings = useSettingsStore((s) => s.updateSettings);
-  const [view, setView] = useState<View>("files");
-  // SSH-sync Phase 1: which side of a remote project the files view shows — the
-  // host (remote, SFTP-listed, with the sync overlay) or the local mirror.
-  const [fileSource, setFileSource] = useState<"remote" | "local">("remote");
-  const [dropActive, setDropActive] = useState(false);
-  const [dropFlash, setDropFlash] = useState(false);
-  const [conflict, setConflict] = useState<
-    { name: string; remaining: number; resolve: (r: { choice: ConflictChoice; all: boolean }) => void } | null
-  >(null);
-  const [conflictAll, setConflictAll] = useState(false);
-  const dropFlashTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const [showSettings, setShowSettings] = useState(false);
-  // Toggles the Downloads section stacked below the file tree (fast-copy of
-  // recent downloads into the project). Toolbar ⬇⬇ button; files view only.
-  const [showDownloads, setShowDownloads] = useState(false);
-  const [sortKey, setSortKey] = useState<SortKey>("name");
-  const [descending, setDescending] = useState(false);
-  const [localProjectSettings, setLocalProjectSettings] = useState<ProjectJson | null>(null);
-  const [hiddenEndings, setHiddenEndings] = useState<string[]>([]);
-  const [availableEndings, setAvailableEndings] = useState<string[]>([]);
-  const [hiddenPaths, setHiddenPaths] = useState<string[]>([]);
-  const [shownPaths, setShownPaths] = useState<string[]>([]);
-  const [settingsError, setSettingsError] = useState<string | null>(null);
-
-  const [gitStatus, setGitStatus] = useState<GitStatus | null>(null);
-  const [unpushedCommits, setUnpushedCommits] = useState<string[]>([]);
-  const [openTree, setOpenTree] = useState<"add" | "commit" | "push" | null>(null);
-  const [commitMsg, setCommitMsg] = useState<string | null>(null);
-  const [gitBusy, setGitBusy] = useState(false);
-  const [gitError, setGitError] = useState<string | null>(null);
-  // Whether the active project is missing scaffold files — drives the "no
-  // scaffold" type tag shown beside its name, mirroring ProjectPill's hover tags.
-  const [scaffoldMissing, setScaffoldMissing] = useState(false);
-  // Nested-repo detection: when the browsed folder lives in a git repo distinct
-  // from the project's own repo, `nestedRoot` holds that repo's root and the git
-  // section re-roots at it. `preferProjectRepo` is the manual toggle override
-  // back to the project repo.
-  const [nestedRoot, setNestedRoot] = useState<string | null>(null);
-  const [preferProjectRepo, setPreferProjectRepo] = useState(false);
-  const commitRef = useRef<HTMLTextAreaElement>(null);
-  const actionBarRef = useRef<HTMLDivElement>(null);
-  const refreshGitTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  // Run both git probes concurrently (Eff #9): they hit independent
-  // subprocesses, so `Promise.all` collapses two serially-awaited chains into
-  // one round of parallel work. Each result still applies independently.
-  const runRefreshGit = (dir: string) => {
-    void Promise.all([
-      invoke<GitStatus>("git_status", { projectDir: dir }).catch(() => null),
-      invoke<string[]>("git_unpushed_commits", { projectDir: dir }).catch(() => [] as string[]),
-    ]).then(([status, unpushed]) => {
-      setGitStatus(status);
-      setUnpushedCommits(unpushed);
-      // Keep the active project's pill dot in sync from the data we just fetched
-      // (no extra git subprocesses), so edits/commits/pushes reflect immediately
-      // instead of waiting for the switcher's periodic poll.
-      // Don't let a nested repo's status pollute the project pill's dirty dot —
-      // that dot tracks the project repo (the switcher's poll recomputes it).
-      if (activeId && status && !onNestedRepo) {
-        useGitDirtyStore.getState().set(activeId, gitDirtyState(status, unpushed.length));
-      }
-    });
-  };
-
-  // Debounced entry point (Eff #9): bursts of git-affecting actions (add →
-  // commit → push, or rapid fs changes) coalesce into a single refresh instead
-  // of spawning a fresh trio of subprocesses per call.
-  const refreshGit = (dir: string) => {
-    if (refreshGitTimer.current) clearTimeout(refreshGitTimer.current);
-    refreshGitTimer.current = setTimeout(() => {
-      refreshGitTimer.current = null;
-      runRefreshGit(dir);
-    }, 120);
-  };
-
-  useEffect(() => {
-    return () => {
-      if (refreshGitTimer.current) clearTimeout(refreshGitTimer.current);
-      if (dropFlashTimer.current) clearTimeout(dropFlashTimer.current);
-    };
-  }, []);
-
-  // The change tree is click-opened and persistent; close it on Escape or a
-  // click anywhere outside the action bar (which contains both the toggles and
-  // the tree itself).
-  useEffect(() => {
-    if (!openTree) return;
-    const onDown = (e: MouseEvent) => {
-      if (!actionBarRef.current?.contains(e.target as Node)) setOpenTree(null);
-    };
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") setOpenTree(null);
-    };
-    document.addEventListener("mousedown", onDown);
-    document.addEventListener("keydown", onKey);
-    return () => {
-      document.removeEventListener("mousedown", onDown);
-      document.removeEventListener("keydown", onKey);
-    };
-  }, [openTree]);
-
-  const treeScope: ChangeScope | null =
-    openTree === "add" ? "unstaged" : openTree === "commit" ? "staged" : openTree === "push" ? "unpushed" : null;
-
-  const activeProject = projects.find((p) => p.id === activeId);
+  const activeProject = projects.find((p) => p.id === activeId) ?? null;
   const projectDir = resolveProjectDirectory(activeProject);
-  const localFile = activeProject?.local_file;
-  // Remote git/endings probes dispatch over SSH/SFTP via SYNCHRONOUS Tauri
-  // commands (run on the main thread). Calling them while the pool is down blocks
-  // on the dead session and freezes the window, so suppress them until the remote
-  // project is connected. Local projects are never blocked.
-  const remoteSshState = useRemoteStatusStore((s) =>
-    activeId ? s.byProject[activeId]?.ssh : undefined,
-  );
-  const remoteBlocked = !!activeProject?.remote && remoteSshState !== "connected";
+  // SSH-sync Phase 1: which side of a remote project the files view shows — the
+  // host (remote, SFTP-listed, with the sync overlay) or the local mirror.
+  const [fileSource, setFileSource] = useFileSource(activeId, !!activeProject?.remote);
   const rightPanelFolder = activeId ? rightPanelFolderByProject[activeId] ?? "" : "";
 
-  // Detect a nested git repo: if the folder currently browsed in the file tree
-  // lives inside a git repo distinct from the project's own repo, re-root the
-  // git section at it (auto-switch). Local projects only — the backend returns
-  // null for remote ones, so `nestedRoot` stays null and behavior is unchanged.
-  useEffect(() => {
-    if (!projectDir || activeProject?.remote) {
-      setNestedRoot(null);
-      return;
-    }
-    let cancelled = false;
-    void Promise.all([
-      invoke<string | null>("git_repo_root", { projectDir, relPath: "" }).catch(() => null),
-      invoke<string | null>("git_repo_root", { projectDir, relPath: rightPanelFolder }).catch(() => null),
-    ]).then(([projRoot, folderRoot]) => {
-      if (cancelled) return;
-      const norm = (p: string | null) => (p ? p.replace(/[/\\]+$/, "") : null);
-      const pr = norm(projRoot);
-      const fr = norm(folderRoot);
-      setNestedRoot(fr && fr !== pr ? fr : null);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [projectDir, rightPanelFolder, activeProject?.remote]);
-
-  // Default to auto-switch: reset the manual override on a project switch or
-  // whenever we leave the nested repo, so entering one always shows it first.
-  useEffect(() => {
-    setPreferProjectRepo(false);
-  }, [activeId]);
-  useEffect(() => {
-    if (!nestedRoot) setPreferProjectRepo(false);
-  }, [nestedRoot]);
-
-  // The repo root the whole git section (status, commit, push, history) operates
-  // on: the nested repo when detected and not overridden, else the project repo.
-  const effectiveGitRoot = nestedRoot && !preferProjectRepo ? nestedRoot : projectDir;
-  const onNestedRepo = !!nestedRoot && effectiveGitRoot !== projectDir;
-
-  // Diverged (amber/orange) files for the active remote project, from the cached
-  // sync status — backs the toolbar count badge and the "Orange" list view. These
-  // are exactly the files auto-sync refuses to touch (both sides changed), so they
-  // need a human to pick a side.
-  const syncMap = useSyncStore((s) => (activeId ? s.byProject[activeId] : undefined));
-  const orangeFiles = useMemo(() => amberPaths(syncMap), [syncMap]);
-  // The local mirror root, to open an amber file's mirror copy for inspection.
-  const mirrorRoot =
-    resolveLocalMirror(activeProject) ?? (projectDir ? `${projectDir}/mirror` : null);
-
-  // Default the file source to whichever side is actually usable when a remote
-  // project becomes active: connected → Remote (the host tree), disconnected →
-  // Local (the mirror, so the panel doesn't open on a Connect prompt). Only
-  // resets on a project switch — it never fights a mid-session manual toggle
-  // (e.g. the user flips to Remote, then the connection drops: the Connect
-  // placeholder below takes over, but the toggle stays put).
-  useEffect(() => {
-    if (activeId && activeProject?.remote) {
-      setFileSource(remoteSshState === "connected" ? "remote" : "local");
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activeId]);
-
-  // Resolve the scaffold-missing flag whenever the active project changes.
-  // Failures fall back to "present" so a probe error doesn't flash the tag.
-  useEffect(() => {
-    if (!activeId) {
-      setScaffoldMissing(false);
-      return;
-    }
-    let cancelled = false;
-    invoke<boolean>("project_scaffold_missing", { projectId: activeId })
-      .then((v) => { if (!cancelled) setScaffoldMissing(v); })
-      .catch(() => { if (!cancelled) setScaffoldMissing(false); });
-    return () => { cancelled = true; };
-  }, [activeId]);
-
-  const typeTags = activeProject ? projectTypeTags(activeProject, scaffoldMissing) : [];
-
-  // Same hover card as the project pill, shown when hovering the project name
-  // here — minus the type tags, which already sit beside the name below.
-  const nameHover = useProjectHoverCard(activeProject);
-
-  // When a box scope is open, the panel shows a multi-root file view: the box
-  // folder plus every member project's root. Detected from the current tab scope
-  // (disjoint `box:<id>` prefix) rather than the project store's activeId.
+  // When a box scope is open, the shared view shows a multi-root file view. It
+  // derives that from the current tab scope, which the panel forwards.
   const scope = useTabsStore((s) => s.scope);
   // Subwindows the user has hidden in the current scope, surfaced as an
   // auto-pinned section above the toolbar. Their tabs still live in
@@ -426,347 +104,62 @@ export function RightPanel({
   // from there. `unhideGroup`/`closeHiddenGroup` restore or discard them.
   const hiddenGroups = useTabsStore((s) => s.hiddenGroupsByScope[s.scope]);
   const scopeTabs = useTabsStore((s) => s.tabsByScope[s.scope]);
+  // Same working/decision/finished glow the tab bar draws for a live tab — a
+  // hidden subwindow's tabs are still running underneath the pane, so they keep
+  // reporting status even while parked.
+  const busyByTab = useActivityStore((s) => s.busyByTab);
+  const attentionByTab = useActivityStore((s) => s.attentionByTab);
+  // One status per hidden group's tab, rolled up per group and overall, so the
+  // Hidden section still says "something's running in there" without needing
+  // the group unhidden and its tab bar drawn.
+  const hiddenStatus = useMemo(() => {
+    const rows = (hiddenGroups ?? []).map((h) => {
+      const tabStatuses = orderedTabKeys(h.subtree).map((k) =>
+        hiddenTabStatus(
+          scopeTabs?.find((t) => t.key === k)?.kind,
+          `${scope}:${k}`,
+          busyByTab,
+          attentionByTab,
+        ),
+      );
+      return { id: h.id, status: rollUpStatus(tabStatuses), tabStatuses };
+    });
+    return { rows, overall: rollUpStatus(rows.map((r) => r.status)) };
+  }, [hiddenGroups, scopeTabs, scope, busyByTab, attentionByTab]);
   const unhideGroup = useTabsStore((s) => s.unhideGroup);
   const closeHiddenGroup = useTabsStore((s) => s.closeHiddenGroup);
   const [hiddenCollapsed, setHiddenCollapsed] = useState(false);
-  const boxes = useBoxesStore((s) => s.boxes);
-  const activeBox = useMemo(
-    () =>
-      scope.startsWith(BOX_SCOPE_PREFIX)
-        ? boxes.find((b) => boxScopeId(b.id) === scope) ?? null
-        : null,
-    [scope, boxes],
-  );
-  const boxRoots = useMemo(() => {
-    if (!activeBox) return [];
-    const roots: {
-      rootId: string;
-      label: string;
-      icon: string;
-      dir: string;
-      localFile?: string;
-      variant: "box" | "member";
-    }[] = [];
-    if (activeBox.folder) {
-      roots.push({ rootId: scope, label: activeBox.name, icon: "▣", dir: activeBox.folder, variant: "box" });
-    }
-    for (const id of activeBox.member_ids) {
-      const p = projects.find((m) => m.id === id);
-      if (!p) continue;
-      const dir = resolveProjectDirectory(p);
-      if (!dir) continue;
-      roots.push({ rootId: p.id, label: p.name, icon: "📁", dir, localFile: p.local_file, variant: "member" });
-    }
-    return roots;
-  }, [activeBox, projects, scope]);
-
-  const openInOsBrowser = () => {
-    if (!projectDir) return;
-    const sub = rightPanelFolder.replace(/^\/+|\/+$/g, "");
-    const path = sub ? `${projectDir.replace(/\/+$/, "")}/${sub}` : projectDir;
-    invoke("open_in_file_manager", { path }).catch((e) => console.error("open_in_file_manager", e));
-  };
-
-  // OS file drop → copy into the project. Confined to a single active project
-  // (a box scope has no single destination root). Driven by Tauri's NATIVE
-  // drag-drop event (dragDropEnabled=true) because WebKitGTK withholds the file
-  // paths from HTML5 drops; the native event hands us every dropped path.
-  const canImportDrop = !!projectDir && !activeBox;
-
-  const flashDrop = () => {
-    if (dropFlashTimer.current) clearTimeout(dropFlashTimer.current);
-    setDropFlash(false);
-    requestAnimationFrame(() => setDropFlash(true));
-    dropFlashTimer.current = setTimeout(() => setDropFlash(false), 500);
-  };
-
-  // Ask the user how to resolve a name collision; resolves via the modal's
-  // buttons. Returns the choice plus whether to apply it to all remaining.
-  const askConflict = (name: string, remaining: number) =>
-    new Promise<{ choice: ConflictChoice; all: boolean }>((resolve) => {
-      setConflictAll(false);
-      setConflict({ name, remaining, resolve });
-    });
-
-  // Copy each absolute source path into the project, prompting on collisions.
-  const importPaths = (paths: string[]) => {
-    if (!canImportDrop || !projectDir || paths.length === 0) return;
-    flashDrop();
-    const destRel = view === "files" ? rightPanelFolder : "";
-    void (async () => {
-      let blanket: ConflictChoice | null = null;
-      for (let i = 0; i < paths.length; i++) {
-        const sourcePath = paths[i];
-        const name = basename(sourcePath) || sourcePath;
-        const rel = destRel ? `${destRel}/${name}` : name;
-        let choice: ConflictChoice = "rename";
-        const exists = await invoke<boolean>("project_path_exists", { projectDir, relPath: rel }).catch(() => false);
-        if (exists) {
-          if (blanket) {
-            choice = blanket;
-          } else {
-            const res = await askConflict(name, paths.length - 1 - i);
-            setConflict(null);
-            choice = res.choice;
-            if (res.all) blanket = res.choice;
-          }
-        }
-        if (choice === "skip") continue;
-        try {
-          await invoke("import_external_file", { projectDir, sourcePath, destRel, replace: choice === "replace" });
-        } catch (err) {
-          console.error("import_external_file", sourcePath, err);
-        }
-      }
-      // FileTree auto-reloads via its fs-watch; refresh git so new untracked
-      // files show in the status counts immediately.
-      refreshGit(effectiveGitRoot);
-    })();
-  };
-
-  // HTML5 drag-and-drop (dragDropEnabled stays false so pointer drags — tabs,
-  // splits, pills — keep working). Best-effort: WebKitGTK only leaks file paths
-  // via text/html and sometimes just one; the Import button is the reliable
-  // multi-file path.
-  const handleImportDragOver = (e: React.DragEvent) => {
-    if (!canImportDrop || !isExternalFileDrag(e.dataTransfer)) return;
-    e.preventDefault();
-    e.dataTransfer.dropEffect = "copy";
-    if (!dropActive) setDropActive(true);
-  };
-
-  const handleImportDragLeave = (e: React.DragEvent) => {
-    if (e.currentTarget.contains(e.relatedTarget as Node)) return;
-    setDropActive(false);
-  };
 
-  const handleImportDrop = (e: React.DragEvent) => {
-    setDropActive(false);
-    if (!canImportDrop || !isExternalFileDrag(e.dataTransfer)) return;
-    e.preventDefault();
-    importPaths(parseDroppedFilePaths(e.dataTransfer));
-  };
-
-  // Reliable multi-file import: native OS file picker → same copy+conflict flow.
-  const importViaDialog = async () => {
-    if (!canImportDrop) return;
-    const picked = await openDialog({ multiple: true, directory: false }).catch(() => null);
-    if (!picked) return;
-    importPaths(Array.isArray(picked) ? picked : [picked]);
-  };
-
-  useEffect(() => {
-    if (open && activeId) {
-      refresh(activeId);
-    }
-  }, [open, activeId]);
-
-  useEffect(() => {
-    if (open && effectiveGitRoot && !remoteBlocked) {
-      refreshGit(effectiveGitRoot);
-    } else {
-      setGitStatus(null);
-    }
-  }, [open, effectiveGitRoot, remoteBlocked]);
-
-  useEffect(() => {
-    setShowSettings(false);
-    setSettingsError(null);
-    if (!localFile || !projectDir) {
-      setLocalProjectSettings(null);
-      setHiddenEndings([]);
-      setAvailableEndings([]);
-      setHiddenPaths([]);
-      setShownPaths([]);
-      return;
-    }
-    // `list_project_endings` scans the project dir over SFTP for a remote project —
-    // skip it while disconnected (would freeze the main thread). `load_project`
-    // reads the LOCAL project.json, so it's always safe to run.
-    Promise.all([
-      invoke<ProjectJson>("load_project", { localFile }),
-      remoteBlocked
-        ? Promise.resolve<string[]>([])
-        : invoke<string[]>("list_project_endings", { projectDir }).catch(() => []),
-    ])
-      .then(([project, endings]) => {
-        const savedHiddenEndings = readHiddenEndings(project);
-        const savedHiddenPaths = readHiddenPaths(project);
-        const savedShownPaths = readShownPaths(project);
-        const allEndings = mergeEndings(endings, savedHiddenEndings);
-        setLocalProjectSettings(project);
-        setHiddenEndings(savedHiddenEndings);
-        setAvailableEndings(allEndings);
-        setHiddenPaths(savedHiddenPaths);
-        setShownPaths(savedShownPaths);
-      })
-      .catch((error) => {
-        setLocalProjectSettings(null);
-        setHiddenEndings([]);
-        setAvailableEndings([]);
-        setHiddenPaths([]);
-        setShownPaths([]);
-        setSettingsError(String(error));
-      });
-  }, [localFile, projectDir, remoteBlocked]);
-
-  const handleAdd = async () => {
-    if (!effectiveGitRoot) return;
-    setGitBusy(true);
-    setGitError(null);
-    try {
-      await invoke("git_add_all", { projectDir: effectiveGitRoot });
-      refreshGit(effectiveGitRoot);
-    } catch (e) {
-      setGitError(String(e));
-    } finally {
-      setGitBusy(false);
-    }
-  };
-
-  const handleCommitOpen = async () => {
-    if (!effectiveGitRoot) return;
-    setGitBusy(true);
-    setGitError(null);
-    try {
-      const msg = await invoke<string>("git_generate_commit_message", { projectDir: effectiveGitRoot });
-      setCommitMsg(msg);
-      setTimeout(() => commitRef.current?.focus(), 50);
-    } catch (e) {
-      setGitError(String(e));
-    } finally {
-      setGitBusy(false);
-    }
-  };
-
-  const handleCommitConfirm = async () => {
-    if (!effectiveGitRoot || commitMsg === null) return;
-    setGitBusy(true);
-    setGitError(null);
-    try {
-      await invoke("git_commit", { projectDir: effectiveGitRoot, message: commitMsg });
-      setCommitMsg(null);
-      refreshGit(effectiveGitRoot);
-    } catch (e) {
-      setGitError(String(e));
-    } finally {
-      setGitBusy(false);
-    }
-  };
-
-  const handlePush = async () => {
-    if (!effectiveGitRoot) return;
-    setGitBusy(true);
-    setGitError(null);
-    try {
-      // On a nested repo, push to its own configured remote (no project id →
-      // plain `git push`), not the project's GitHub/GitLab provider flow.
-      await invoke("git_push", {
-        projectDir: effectiveGitRoot,
-        projectId: onNestedRepo ? null : activeId ?? null,
-      });
-      refreshGit(effectiveGitRoot);
-    } catch (e) {
-      setGitError(String(e));
-    } finally {
-      setGitBusy(false);
-    }
-  };
-
-  const saveHiddenEndings = async (nextEndings: string[]) => {
-    if (!localFile || !localProjectSettings) return;
-    const nextProject = {
-      ...localProjectSettings,
-      [PANEL_HIDDEN_ENDINGS_KEY]: nextEndings,
-      [PANEL_HIDDEN_PATHS_KEY]: hiddenPaths,
-      [PANEL_SHOWN_PATHS_KEY]: shownPaths,
-    };
-    setHiddenEndings(nextEndings);
-    setLocalProjectSettings(nextProject);
-    setSettingsError(null);
-    try {
-      await invoke("save_project", { localFile, project: nextProject });
-    } catch (e) {
-      setSettingsError(String(e));
-    }
-  };
-
-  const toggleHiddenEnding = (ending: string, checked: boolean) => {
-    const existing = new Set(hiddenEndings.map((item) => item.toLowerCase()));
-    const nextEndings = checked
-      ? existing.has(ending.toLowerCase())
-        ? hiddenEndings
-        : [...hiddenEndings, ending]
-      : hiddenEndings.filter((item) => item.toLowerCase() !== ending.toLowerCase());
-    void saveHiddenEndings(nextEndings);
-  };
-
-  return (
+  // Drag the left border to resize the panel; width persists in settings.
+  // Pointer capture (set in onResizeStart) keeps the drag alive once the cursor
+  // leaves this thin strip.
+  const resizeHandle = onResizeStart ? (
     <div
-      className={`right-panel ${open ? "open" : ""}${dropActive ? " drop-active" : ""}${dropFlash ? " drop-flash" : ""}${resizing ? " resizing" : ""}`}
-      style={width ? { width } : undefined}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-      onDragEnter={handleImportDragOver}
-      onDragOver={handleImportDragOver}
-      onDragLeave={handleImportDragLeave}
-      onDrop={handleImportDrop}
-    >
-      {/* Drag the left border to resize the panel; width persists in settings.
-          Pointer capture (set in onResizeStart) keeps the drag alive once the
-          cursor leaves this thin strip. */}
-      {onResizeStart && (
-        <div
-          className="right-panel-resize"
-          onPointerDown={onResizeStart}
-          onPointerMove={onResizeMove}
-          onPointerUp={onResizeEnd}
-          title="Drag to resize panel"
-          aria-hidden
-        />
-      )}
-      {conflict && createPortal(
-        <div
-          className="modal-backdrop"
-          onMouseDown={() => conflict.resolve({ choice: "skip", all: conflictAll })}
-        >
-          <div className="settings-dialog" style={{ maxWidth: 380 }} onMouseDown={(e) => e.stopPropagation()}>
-            <div className="settings-title-row">
-              <h2>File already exists</h2>
-            </div>
-            <p className="settings-help" style={{ wordBreak: "break-all" }}>
-              <code>{conflict.name}</code> already exists in this folder. Replace it, or keep both (the new copy is renamed)?
-            </p>
-            {conflict.remaining > 0 && (
-              <label className="viewer-pref-toggle" style={{ marginBottom: 8 }}>
-                <Toggle
-                  size="sm"
-                  checked={conflictAll}
-                  onChange={(e) => setConflictAll(e.target.checked)}
-                />
-                <span>Apply to the {conflict.remaining} remaining file{conflict.remaining > 1 ? "s" : ""}</span>
-              </label>
-            )}
-            <div style={{ display: "flex", gap: 6, justifyContent: "flex-end" }}>
-              <button className="tab-add-btn" onClick={() => conflict.resolve({ choice: "skip", all: conflictAll })}>
-                Skip
-              </button>
-              <button className="tab-add-btn" onClick={() => conflict.resolve({ choice: "rename", all: conflictAll })}>
-                Keep both
-              </button>
-              <button
-                className="tab-add-btn"
-                style={{ color: "var(--danger, #f85149)" }}
-                onClick={() => conflict.resolve({ choice: "replace", all: conflictAll })}
-              >
-                Replace
-              </button>
-            </div>
-          </div>
-        </div>,
-        document.body,
-      )}
-      <div className="right-panel-header">
+      className="right-panel-resize"
+      onPointerDown={onResizeStart}
+      onPointerMove={onResizeMove}
+      onPointerUp={onResizeEnd}
+      title="Drag to resize panel"
+      aria-hidden
+    />
+  ) : null;
+
+  // The panel header's left-edge chrome: a side-flip toggle and the pin. Both ride
+  // the single `pin` slot ProjectFilesView exposes (a tab passes neither), so no
+  // extra slot is threaded through the shared viewer.
+  const chrome =
+    onTogglePin || onToggleSide ? (
+      <>
+        {onToggleSide && (
+          <button
+            className="right-panel-pin right-panel-flip"
+            onClick={onToggleSide}
+            title={side === "left" ? "Move panel to the right edge" : "Move panel to the left edge"}
+            aria-label={side === "left" ? "Move panel to the right edge" : "Move panel to the left edge"}
+          >
+            ⇄
+          </button>
+        )}
         {onTogglePin && (
           <button
             className={`right-panel-pin${pinned ? " pinned" : ""}`}
@@ -777,805 +170,107 @@ export function RightPanel({
             📌
           </button>
         )}
-        <span
-          style={{
-            flexShrink: 1,
-            minWidth: 0,
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap",
-            cursor: !activeBox && activeProject ? "default" : undefined,
-          }}
-          onMouseEnter={
-            !activeBox && activeProject
-              ? (e) => void nameHover.open(e.currentTarget.getBoundingClientRect())
-              : undefined
-          }
-          onMouseLeave={!activeBox && activeProject ? () => nameHover.close() : undefined}
+      </>
+    ) : null;
+
+  const hidden =
+    hiddenGroups && hiddenGroups.length > 0 ? (
+      <div className="hidden-subwindows">
+        <button
+          type="button"
+          className="hidden-sw-header"
+          onClick={() => setHiddenCollapsed((c) => !c)}
+          title={hiddenCollapsed ? "Show hidden subwindows" : "Collapse"}
         >
-          {activeBox ? `▣ ${activeBox.name}` : activeProject ? activeProject.name : "Files"}
-        </span>
-        {!activeBox && activeProject && (
-          <ProjectHoverCard project={activeProject} state={nameHover} showTags={false} />
-        )}
-        {/* Static project type tags (git / provider / SSH / scaffold). These are
-            labels only — no interactivity — so they deliberately look nothing
-            like the source switch below. */}
-        {!activeBox && typeTags.length > 0 && (
-          <span className="right-panel-type-tags">
-            {typeTags.map((t) => (
-              <span
-                key={t.key}
-                className="pill-popup-tag"
-                title={t.title}
-                style={{ color: t.color, borderColor: t.color, background: `${t.color}22` }}
-              >
-                {t.label}
-              </span>
-            ))}
-          </span>
-        )}
-        {/* Remote/Local file-source switch (remote SSH projects only). A live
-            segmented control — NOT a tag — that flips the files view between the
-            host tree over SFTP ("Remote") and the synced mirror ("Local"). It's
-            right-aligned and styled as a switch so it never reads as one of the
-            static tags above. */}
-        {!activeBox && activeProject?.remote && activeId && (
-          <>
-          {/* Breaker: drop the switch onto its own row so it left-aligns with the
-              pin/name (header padding edge) instead of trailing the tags. */}
-          <span style={{ flexBasis: "100%", width: 0, height: 0 }} />
-          <span className="right-panel-source-switch" role="group" aria-label="File source">
-            <button
-              type="button"
-              className={`source-seg${fileSource === "local" ? " active" : ""}`}
-              aria-pressed={fileSource === "local"}
-              onClick={() => setFileSource("local")}
-              title="Show the local synced mirror copy."
-            >
-              Local
-            </button>
-            <button
-              type="button"
-              className={`source-seg${fileSource === "remote" ? " active" : ""}`}
-              aria-pressed={fileSource === "remote"}
-              onClick={() => setFileSource("remote")}
-              title="Show the host tree over SFTP (remote)."
-            >
-              Remote
-            </button>
-          </span>
-          {/* One-click SSH logout, shown while connected. Lives here (not on the
-              project pill) so the pill stays status-only; the danger tint only
-              appears on hover. */}
-          {remoteSshState === "connected" && (
-            <button
-              type="button"
-              className="right-panel-conn-logout"
-              aria-label={`Log out of ${activeProject.remote.host} — disconnect this remote project`}
-              title={`Log out of ${activeProject.remote.host}\nDrops the SSH connection${activeProject.remote.openvpn ? " and the VPN tunnel" : ""}. Open tabs stay, their sessions go dead until you reconnect.`}
-              onClick={() => logoutRemote(activeProject)}
-            >
-              <span aria-hidden="true">⏻</span> Logout
-            </button>
-          )}
-          </>
-        )}
-        {/* Git status/action buttons drop to their own row below the project name
-            (forced by the flex-basis breaker) instead of crowding it. Only
-            rendered when there's something to do (or we're mid-commit) — an
-            empty strip with no actions just wastes space. */}
-        {!activeBox && gitStatus?.is_repo &&
-          (commitMsg !== null ||
-            gitStatus.unstaged + gitStatus.untracked > 0 ||
-            gitStatus.staged > 0 ||
-            (gitStatus.has_remote && unpushedCommits.length > 0)) && (
-          <>
-            <span style={{ flexBasis: "100%", width: 0, height: 0 }} />
-            <div ref={actionBarRef} className="git-action-bar git-action-bar--inline" style={{ position: "relative" }}>
-            {commitMsg !== null ? (
-              <>
-                <button
-                  className="git-action-btn git-action-btn--commit"
-                  disabled={gitBusy}
-                  onClick={handleCommitConfirm}
-                  title="Confirm commit"
-                >
-                  <span data-testid="commit-bar" style={{ width: 7, height: 7, borderRadius: "50%", marginRight: 5, flexShrink: 0, background: "#e3b341" }} />
-                  <span>↵</span>
-                  <span className="git-btn-label">Confirm</span>
-                </button>
-                <button
-                  className="git-action-btn git-action-btn--back"
-                  disabled={gitBusy}
-                  onClick={() => setCommitMsg(null)}
-                  title="Go back"
-                >
-                  <span>←</span>
-                  <span className="git-btn-label">Back</span>
-                </button>
-              </>
-            ) : (
-              <>
-                {/* Each action only appears when it has work to do: Add when there
-                    are unstaged/untracked changes, Commit when something is staged,
-                    Push when commits are ahead of the remote. A clean, pushed repo
-                    shows no buttons. The caret beside each action opens a
-                    navigable folder tree of the files it touches, with line
-                    stats. */}
-                {gitStatus.unstaged + gitStatus.untracked > 0 && (
-                  <div className="git-action git-action--add">
-                    <button
-                      className="git-action-btn git-action-btn--add"
-                      disabled={gitBusy}
-                      onClick={handleAdd}
-                      title={`Stage all changes (${gitStatus.unstaged + gitStatus.untracked} unstaged)`}
-                    >
-                      <span data-testid="add-bar" style={{ width: 7, height: 7, borderRadius: "50%", marginRight: 5, flexShrink: 0, background: "#f85149" }} />
-                      <span>⊕</span>
-                      <span className="git-btn-label">Add ({gitStatus.unstaged + gitStatus.untracked})</span>
-                    </button>
-                    <button
-                      className="git-action-toggle"
-                      disabled={gitBusy}
-                      aria-label="Show changed files"
-                      aria-expanded={openTree === "add"}
-                      title="Show changed files"
-                      onClick={() => setOpenTree((t) => (t === "add" ? null : "add"))}
-                    >
-                      {openTree === "add" ? "▴" : "▾"}
-                    </button>
-                  </div>
-                )}
-                {gitStatus.staged > 0 && (
-                  <div className="git-action git-action--commit">
-                    <button
-                      className="git-action-btn git-action-btn--commit"
-                      disabled={gitBusy}
-                      onClick={handleCommitOpen}
-                      title={`Commit ${gitStatus.staged} staged`}
-                    >
-                      <span data-testid="commit-bar" style={{ width: 7, height: 7, borderRadius: "50%", marginRight: 5, flexShrink: 0, background: "#e3b341" }} />
-                      <span>✔</span>
-                      <span className="git-btn-label">Commit ({gitStatus.staged})</span>
-                    </button>
-                    <button
-                      className="git-action-toggle"
-                      disabled={gitBusy}
-                      aria-label="Show staged files"
-                      aria-expanded={openTree === "commit"}
-                      title="Show staged files"
-                      onClick={() => setOpenTree((t) => (t === "commit" ? null : "commit"))}
-                    >
-                      {openTree === "commit" ? "▴" : "▾"}
-                    </button>
-                  </div>
-                )}
-                {gitStatus.has_remote && unpushedCommits.length > 0 && (
-                  <div className="git-action git-action--push">
-                    <button
-                      className="git-action-btn git-action-btn--push"
-                      disabled={gitBusy}
-                      onClick={handlePush}
-                      title={`Push ${unpushedCommits.length} commit${unpushedCommits.length === 1 ? "" : "s"} to remote`}
-                    >
-                      <span data-testid="push-bar" style={{ width: 7, height: 7, borderRadius: "50%", marginRight: 5, flexShrink: 0, background: "#3fb950" }} />
-                      <span>⬆</span>
-                      <span className="git-btn-label">Push ({unpushedCommits.length})</span>
-                    </button>
-                    <button
-                      className="git-action-toggle"
-                      disabled={gitBusy}
-                      aria-label="Show files in unpushed commits"
-                      aria-expanded={openTree === "push"}
-                      title="Show files in unpushed commits"
-                      onClick={() => setOpenTree((t) => (t === "push" ? null : "push"))}
-                    >
-                      {openTree === "push" ? "▴" : "▾"}
-                    </button>
-                  </div>
-                )}
-                {treeScope && projectDir && (
-                  <GitChangeTree projectDir={projectDir} scope={treeScope} />
-                )}
-              </>
-            )}
-          </div>
-          </>
+          <span className="hidden-sw-caret">{hiddenCollapsed ? "▸" : "▾"}</span>
+          Hidden ({hiddenGroups.length})
+          {hiddenStatus.overall && (
+            <span
+              className={`hidden-sw-status-dot ${hiddenStatus.overall}`}
+              title={
+                hiddenStatus.overall === "needs-decision"
+                  ? "A hidden subwindow is waiting on you"
+                  : hiddenStatus.overall === "working"
+                    ? "A hidden subwindow is working"
+                    : "A hidden subwindow finished, unseen"
+              }
+            />
           )}
-      </div>
-
-      {hiddenGroups && hiddenGroups.length > 0 && (
-        <div className="hidden-subwindows">
-          <button
-            type="button"
-            className="hidden-sw-header"
-            onClick={() => setHiddenCollapsed((c) => !c)}
-            title={hiddenCollapsed ? "Show hidden subwindows" : "Collapse"}
-          >
-            <span className="hidden-sw-caret">{hiddenCollapsed ? "▸" : "▾"}</span>
-            Hidden ({hiddenGroups.length})
-          </button>
-          {!hiddenCollapsed && (
-            <div className="hidden-sw-list">
-              {hiddenGroups.map((h) => {
-                const keys = orderedTabKeys(h.subtree);
-                return (
-                  <div key={h.id} className="hidden-sw-row">
-                    <span className="hidden-sw-icon">⊞</span>
-                    <div className="hidden-sw-chips">
-                      {keys.map((k) => {
-                        const label = scopeTabs?.find((t) => t.key === k)?.label ?? k;
-                        return (
-                          <button
-                            key={k}
-                            type="button"
-                            className="hidden-sw-chip"
-                            title={`Restore focused on “${label}”`}
-                            onClick={() => unhideGroup(h.id, { activeKey: k })}
-                          >
-                            {label}
-                          </button>
-                        );
-                      })}
-                    </div>
-                    <button
-                      type="button"
-                      className="hidden-sw-btn"
-                      title="Restore subwindow"
-                      onClick={() => unhideGroup(h.id)}
-                    >
-                      ↩
-                    </button>
-                    <button
-                      type="button"
-                      className="hidden-sw-btn hidden-sw-close"
-                      title="Close subwindow (discard its tabs)"
-                      onClick={() => closeHiddenGroup(h.id)}
-                    >
-                      ×
-                    </button>
+        </button>
+        {!hiddenCollapsed && (
+          <div className="hidden-sw-list">
+            {hiddenGroups.map((h, hi) => {
+              const keys = orderedTabKeys(h.subtree);
+              const { status: rowStatus, tabStatuses } = hiddenStatus.rows[hi];
+              return (
+                <div key={h.id} className="hidden-sw-row">
+                  <span className={`hidden-sw-icon${rowStatus ? ` ${rowStatus}` : ""}`}>⊞</span>
+                  <div className="hidden-sw-chips">
+                    {keys.map((k, ki) => {
+                      const label = scopeTabs?.find((t) => t.key === k)?.label ?? k;
+                      const status = tabStatuses[ki];
+                      return (
+                        <button
+                          key={k}
+                          type="button"
+                          className={`hidden-sw-chip${status ? ` ${status}` : ""}`}
+                          title={`Restore focused on “${label}”`}
+                          onClick={() => unhideGroup(h.id, { activeKey: k })}
+                        >
+                          {label}
+                        </button>
+                      );
+                    })}
                   </div>
-                );
-              })}
-            </div>
-          )}
-        </div>
-      )}
-
-      <div className="right-panel-toolbar">
-        {(["files", "git", "search", "windows"] as View[]).map((v) => (
-          <button
-            key={v}
-            className={`tab-add-btn${view === v ? " active" : ""}`}
-            style={{ fontSize: 10, padding: "1px 6px", height: 20, marginLeft: v === "files" ? 0 : 2 }}
-            aria-pressed={view === v}
-            onClick={() => setView(v)}
-          >
-            {v === "files" ? "Files" : v === "git" ? "Git" : v === "search" ? "Search" : "Apps"}
-          </button>
-        ))}
-        {/* Orange (diverged) files: a dedicated toggle for remote projects,
-            badged with the count so conflicts are visible at a glance. Auto-sync
-            never touches these, so this is where they get resolved. */}
-        {!activeBox && activeProject?.remote && activeId && (
-          <button
-            className={`tab-add-btn right-panel-orange-btn${view === "orange" ? " active" : ""}`}
-            style={{ fontSize: 10, padding: "1px 6px", height: 20, marginLeft: 2 }}
-            aria-pressed={view === "orange"}
-            onClick={() => setView((v) => (v === "orange" ? "files" : "orange"))}
-            title={`Diverged (orange) files: ${orangeFiles.length}`}
-          >
-            ± {orangeFiles.length > 0 && <span className="right-panel-orange-count">{orangeFiles.length}</span>}
-          </button>
-        )}
-        {canImportDrop && (
-          <button
-            className="tab-add-btn"
-            style={{ fontSize: 10, padding: "1px 6px", height: 20, marginLeft: 2 }}
-            onClick={() => void importViaDialog()}
-            title="Import files into this folder"
-          >
-            ⬇
-          </button>
-        )}
-        {projectDir && (
-          <button
-            className="tab-add-btn"
-            style={{ fontSize: 10, padding: "1px 6px", height: 20, marginLeft: 2 }}
-            onClick={openInOsBrowser}
-            title="Open folder in file manager"
-          >
-            ⧉
-          </button>
-        )}
-        {!activeBox && projectDir && (
-          <button
-            className={`tab-add-btn${showDownloads ? " active" : ""}`}
-            style={{ fontSize: 10, padding: "1px 6px", height: 20, marginLeft: 2 }}
-            aria-pressed={showDownloads}
-            onClick={() => {
-              setShowDownloads((v) => !v);
-              // The section lives in the files view; jump there when revealing it.
-              if (!showDownloads) setView("files");
-            }}
-            title="Show recent downloads (copy into this project)"
-          >
-            📥
-          </button>
-        )}
-        {activeId && (
-          <button
-            className="tab-add-btn"
-            style={{ fontSize: 10, padding: "1px 6px", height: 20, marginLeft: 2 }}
-            onClick={() => setShowSettings(true)}
-            title="Project settings"
-          >
-            ⚙
-          </button>
-        )}
-      </div>
-
-      {!activeBox && gitStatus?.is_repo && (
-        <>
-          {commitMsg !== null && (
-            <div style={{ padding: "4px 6px", borderBottom: "1px solid var(--border-color)" }}>
-              <textarea
-                ref={commitRef}
-                value={commitMsg}
-                onChange={(e) => setCommitMsg(e.target.value)}
-                rows={3}
-                style={{
-                  width: "100%",
-                  fontSize: 11,
-                  background: "var(--bg-panel)",
-                  color: "var(--text-primary)",
-                  border: "1px solid var(--border-color)",
-                  borderRadius: 3,
-                  padding: "3px 5px",
-                  resize: "vertical",
-                  boxSizing: "border-box",
-                  fontFamily: "inherit",
-                }}
-              />
-            </div>
-          )}
-          {gitError && (
-            <div style={{ fontSize: 10, color: "var(--danger, #f85149)", wordBreak: "break-all", padding: "2px 6px 4px", borderBottom: "1px solid var(--border-color)" }}>
-              {gitError}
-            </div>
-          )}
-        </>
-      )}
-
-      {view === "git" && (
-        <div className="right-panel-scroll" style={{ flex: 1, overflowY: "auto" }}>
-          {nestedRoot && (
-            <div className="nested-repo-toggle" role="group" aria-label="Git repository">
-              <button
-                type="button"
-                className={`nested-repo-pill${!onNestedRepo ? " active" : ""}`}
-                title={projectDir}
-                onClick={() => setPreferProjectRepo(true)}
-              >
-                {activeProject?.name || "Project"}
-              </button>
-              <button
-                type="button"
-                className={`nested-repo-pill${onNestedRepo ? " active" : ""}`}
-                title={nestedRoot}
-                onClick={() => setPreferProjectRepo(false)}
-              >
-                {basename(nestedRoot) || nestedRoot}
-              </button>
-            </div>
-          )}
-          <GitHistory
-            projectDir={effectiveGitRoot}
-            projectId={onNestedRepo ? undefined : activeProject?.remote ? activeId ?? undefined : undefined}
-            remote={!onNestedRepo && !!activeProject?.remote}
-            onChanged={() => effectiveGitRoot && refreshGit(effectiveGitRoot)}
-          />
-        </div>
-      )}
-
-      {view === "search" && (
-        <SearchPanel projectDir={projectDir} linkingTabKey={undefined} />
-      )}
-
-      {view === "orange" && (
-        <div className="right-panel-scroll right-panel-orange" style={{ flex: 1, overflowY: "auto" }}>
-          {orangeFiles.length === 0 ? (
-            <div className="right-panel-orange-empty">No diverged files</div>
-          ) : (
-            orangeFiles.map((rel) => (
-              <div key={rel} className="orange-file-row" title={rel}>
-                <button
-                  type="button"
-                  className="orange-file-name"
-                  disabled={!mirrorRoot}
-                  title={mirrorRoot ? `Open ${rel}` : rel}
-                  onClick={() => {
-                    if (!mirrorRoot) return;
-                    const abs = `${mirrorRoot}/${rel}`;
-                    // Open the diverged file as a host-vs-mirror sync diff so the
-                    // user sees exactly what differs before picking a side.
-                    openLinkedFile(undefined, dirname(abs), {
-                      path: abs,
-                      viewer: "syncdiff",
-                      label: basename(abs),
-                    });
-                  }}
-                >
-                  <span className="orange-file-dot" aria-hidden="true">±</span>
-                  {rel}
-                </button>
-                <div className="orange-file-actions">
                   <button
                     type="button"
-                    className="orange-file-act"
-                    title="Take the host copy (overwrite the local mirror)"
-                    disabled={remoteBlocked}
-                    onClick={() => activeId && void useSyncStore.getState().pull(activeId, rel)}
+                    className="hidden-sw-btn"
+                    title="Restore subwindow"
+                    onClick={() => unhideGroup(h.id)}
                   >
-                    Take host
+                    ↩
                   </button>
                   <button
                     type="button"
-                    className="orange-file-act"
-                    title="Keep the local copy (force-push over the host)"
-                    disabled={remoteBlocked}
-                    onClick={() => activeId && void useSyncStore.getState().push(activeId, rel, true)}
+                    className="hidden-sw-btn hidden-sw-close"
+                    title="Close subwindow (discard its tabs)"
+                    onClick={() => closeHiddenGroup(h.id)}
                   >
-                    Keep local
+                    ×
                   </button>
                 </div>
-              </div>
-            ))
-          )}
-        </div>
-      )}
-
-      {view === "files" && (
-        <>
-          {/* The Remote/Local toggle now lives in the header (right of the project
-              name); this row carries the whole-tree sync action for the active
-              source: Remote → pull the host tree into the mirror; Local → push the
-              mirror back to the host (skipping host-diverged/orange files). Both
-              need a live connection, so the row is gated on !remoteBlocked. */}
-          {!activeBox && activeProject?.remote && activeId && !remoteBlocked && (
-            <div className="right-panel-source">
-              {/* Project-wide auto-sync toggle: the root "" marker. When on, the
-                  whole tree bidirectionally auto-syncs; individual files/folders
-                  can still be carved out (or opted in) from their own context
-                  menu, which overrides this. */}
-              {(() => {
-                const autoAll = !!syncMap?.[""]?.auto;
-                return (
-                  <button
-                    className="tab-add-btn"
-                    style={{
-                      fontSize: 10,
-                      padding: "1px 6px",
-                      height: 20,
-                      ...(autoAll
-                        ? { color: "var(--accent)", borderColor: "var(--accent)" }
-                        : {}),
-                    }}
-                    onClick={() =>
-                      void useSyncStore.getState().setAuto(activeId, [""], !autoAll, true)
-                    }
-                    title={
-                      autoAll
-                        ? "Auto-syncing the whole project (⟳). Click to stop. Individual files/folders can still be excluded or included from their right-click menu."
-                        : "Auto-sync the whole project bidirectionally (host ⇄ local mirror). Diverged files are left for manual resolution; per-file/folder toggles override this."
-                    }
-                  >
-                    {autoAll ? "⟳ Auto-sync: all" : "Auto-sync all"}
-                  </button>
-                );
-              })()}
-              {fileSource === "remote" ? (
-                <button
-                  className="tab-add-btn"
-                  style={{ fontSize: 10, padding: "1px 6px", height: 20, marginLeft: "auto" }}
-                  onClick={() => void useSyncStore.getState().syncWholeProject(activeId)}
-                  title="Sync the whole project tree into the local mirror (remote → local)"
-                >
-                  Sync all
-                </button>
-              ) : (
-                <button
-                  className="tab-add-btn"
-                  style={{ fontSize: 10, padding: "1px 6px", height: 20, marginLeft: "auto" }}
-                  onClick={() => void useSyncStore.getState().pushWholeProject(activeId)}
-                  title="Push the whole local mirror to the host (local → remote). Files that diverged on the host (orange) are skipped, never overwritten."
-                >
-                  Sync all
-                </button>
-              )}
-            </div>
-          )}
-          <div className="right-panel-sort">
-            {(["name", "size", "type", "created", "modified"] as SortKey[]).map((key) => (
-              <button
-                key={key}
-                className={`sort-key-btn${sortKey === key ? " active" : ""}`}
-                onClick={() => sortKey === key ? setDescending((d) => !d) : setSortKey(key)}
-                title={sortKey === key ? (descending ? "Descending — click to reverse" : "Ascending — click to reverse") : `Sort by ${key}`}
-              >
-                {key}{sortKey === key ? (descending ? " ↓" : " ↑") : ""}
-              </button>
-            ))}
+              );
+            })}
           </div>
-          <div className="right-panel-scroll" style={{ flex: 1, overflowY: "auto" }}>
-            {open && activeBox ? (
-              boxRoots.length === 0 ? (
-                <div className="file-tree-empty">No member project folders</div>
-              ) : (
-                boxRoots.map((r) => (
-                  <BoxRootSection
-                    key={r.rootId}
-                    rootId={r.rootId}
-                    label={r.label}
-                    icon={r.icon}
-                    dir={r.dir}
-                    localFile={r.localFile}
-                    variant={r.variant}
-                    sortKey={sortKey}
-                    descending={descending}
-                  />
-                ))
-              )
-            ) : (
-              open && (() => {
-                // SSH-sync Phase 1: a remote project's "Local" source points the
-                // tree at the local mirror dir (browsed as a plain local tree);
-                // "Remote" keeps the host (SFTP) tree with the sync overlay. A
-                // local project ignores the toggle entirely.
-                const isRemoteProject = !!activeProject?.remote;
-                // Disconnected remote source: don't mount the SFTP-backed tree
-                // (its main-thread list_dir would freeze the window). Keep the
-                // panel looking the same — the Remote/Local toggle stays up — but
-                // show a Connect prompt in the tree area. Selecting "Local" still
-                // browses the offline mirror. The whole-window freeze rationale
-                // lives on `remoteBlocked` above.
-                if (isRemoteProject && fileSource === "remote" && remoteBlocked) {
-                  return (
-                    <div className="file-tree-empty" style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
-                      <div>
-                        {remoteSshState === "connecting"
-                          ? "Connecting to the remote host…"
-                          : "Disconnected — connect to browse the remote tree."}
-                      </div>
-                      {remoteSshState !== "connecting" && activeId && (
-                        <button
-                          type="button"
-                          className="dialog-connect-btn"
-                          onClick={() => useConnectDialogStore.getState().open(activeId)}
-                        >
-                          Connect
-                        </button>
-                      )}
-                    </div>
-                  );
-                }
-                // The relocatable mirror override (projects.json `extra["mirror"]`,
-                // updated by `move_remote_mirror`) is authoritative; fall back to the
-                // default `<state_dir>/mirror` only for legacy projects that never
-                // persisted one. Computing `${projectDir}/mirror` unconditionally
-                // pointed the Local tree at the pre-move location after a relocate.
-                const mirrorDir =
-                  resolveLocalMirror(activeProject) ??
-                  (projectDir
-                    ? `${projectDir.replace(/[/\\]+$/, "")}/mirror`
-                    : projectDir);
-                const treeDir =
-                  isRemoteProject && fileSource === "local" ? mirrorDir : projectDir;
-                return (
-                  <FileTree
-                    projectDir={treeDir}
-                    projectId={activeId}
-                    localFile={localFile}
-                    sortKey={sortKey}
-                    descending={descending}
-                    hiddenEndings={hiddenEndings}
-                    hiddenPaths={hiddenPaths}
-                    shownPaths={shownPaths}
-                    initialRelPath={rightPanelFolder}
-                    onRelPathChange={(folder) => {
-                      if (activeId) setRightPanelFolder(activeId, folder);
-                    }}
-                    syncSource={isRemoteProject ? fileSource : undefined}
-                  />
-                );
-              })()
-            )}
-          </div>
-          {showDownloads && !activeBox && projectDir && (
-            <DownloadsSection
-              projectDir={projectDir}
-              projectId={activeId}
-              targetFolder={rightPanelFolder}
-              isRemote={!!activeProject?.remote}
-              onClose={() => setShowDownloads(false)}
-            />
-          )}
-        </>
-      )}
-
-      {view === "windows" && (
-        <div className="right-panel-scroll" style={{ flex: 1, overflowY: "auto", padding: 4 }}>
-          {windows.length === 0 ? (
-            <div className="file-tree-empty">No opened windows</div>
-          ) : (
-            windows.map((w) => (
-              <div key={w.id} className="file-entry">
-                <span className="file-icon">🪟</span>
-                <span className="file-name" title={w.exec}>
-                  {basename(w.exec) || w.exec}
-                  {w.file && <span style={{ color: "var(--text-muted)" }}> {basename(w.file)}</span>}
-                </span>
-                <button
-                  className="tab-close"
-                  onClick={() => untrack(w.id)}
-                  title="Untrack"
-                >
-                  ×
-                </button>
-              </div>
-            ))
-          )}
-        </div>
-      )}
-      {showSettings && activeProject && localFile && createPortal(
-        <div className="modal-backdrop how-to-start-backdrop" onMouseDown={() => setShowSettings(false)}>
-          <div className="settings-dialog project-settings-dialog" onMouseDown={(e) => e.stopPropagation()}>
-            <div className="settings-title-row">
-              <h2>Project Settings</h2>
-              <button type="button" className="dialog-close-btn" onClick={() => setShowSettings(false)}>×</button>
-            </div>
-
-            <div className="settings-section-title">Panel File Hiding</div>
-            <p className="settings-help">
-              Click an ending to hide matching files in the right panel. Dimmed endings are hidden.
-            </p>
-            {availableEndings.length === 0 ? (
-              <div className="settings-empty">No file endings found in this project.</div>
-            ) : (
-              <div className="settings-list project-ending-list">
-                {availableEndings.map((ending) => {
-                  const checked = hiddenEndings.some((item) => item.toLowerCase() === ending.toLowerCase());
-                  return (
-                    <button
-                      type="button"
-                      className={`project-ending-toggle${checked ? " is-hidden" : ""}`}
-                      key={ending}
-                      aria-pressed={checked}
-                      onClick={() => toggleHiddenEnding(ending, !checked)}
-                      title={checked ? `Show ${ending} files` : `Hide ${ending} files`}
-                    >
-                      {ending}
-                    </button>
-                  );
-                })}
-              </div>
-            )}
-            {settingsError && <div className="settings-error">{settingsError}</div>}
-
-            {/* #48 per-file-type native-viewer settings (global, not per-project).
-                Toggles opt-in local autocomplete (#45) per type, plus the global
-                autosave (#47). */}
-            <div className="settings-section-title">Native Viewers</div>
-            <p className="settings-help">
-              Eldrun renders these file types in-app. Disable a type to open its
-              files in your external default app instead. Autocomplete is
-              local-only (Ollama) and opt-in.
-            </p>
-            <label className="viewer-pref-toggle" style={{ marginBottom: 6 }}>
-              <Toggle
-                size="sm"
-                checked={settings?.autosave !== false}
-                onChange={(e) => void updateSettings({ autosave: e.target.checked })}
-              />
-              <span>Autosave edits</span>
-            </label>
-            <label className="viewer-pref-toggle" style={{ marginBottom: 6 }}>
-              <Toggle
-                size="sm"
-                checked={settings?.change_tint !== false}
-                onChange={(e) => void updateSettings({ change_tint: e.target.checked })}
-              />
-              <span>Highlight recent edits (new→old colour trail)</span>
-            </label>
-            <div className="viewer-prefs-list">
-              {VIEWER_PREF_TYPES.map((t) => {
-                const pref: ViewerPref = settings?.viewer_prefs?.[t.id] ?? {};
-                const enabled = pref.enabled !== false;
-                const patch = (next: ViewerPref) =>
-                  void updateSettings({
-                    viewer_prefs: {
-                      ...(settings?.viewer_prefs ?? {}),
-                      [t.id]: { ...pref, ...next },
-                    },
-                  });
-                return (
-                  <div className="viewer-pref-row" key={t.id}>
-                    <span className="viewer-pref-name">{t.label}</span>
-                    <span className="viewer-pref-exts">{t.extensions.join(" ")}</span>
-                    <label className="viewer-pref-toggle">
-                      <Toggle
-                        size="sm"
-                        checked={enabled}
-                        onChange={(e) => patch({ enabled: e.target.checked })}
-                      />
-                      <span>Enabled</span>
-                    </label>
-                    {t.autocomplete && (
-                      <>
-                        <label className="viewer-pref-toggle">
-                          <Toggle
-                            size="sm"
-                            checked={pref.autocomplete === true}
-                            disabled={!enabled}
-                            onChange={(e) => patch({ autocomplete: e.target.checked })}
-                          />
-                          <span>Autocomplete</span>
-                        </label>
-                        {/* #45 default completion-length mode; toggled live
-                            in-editor with Shift+Tab while a suggestion shows. */}
-                        <Dropdown
-                          className="viewer-pref-mode"
-                          value={pref.autocomplete_mode ?? "sentence"}
-                          disabled={!enabled || pref.autocomplete !== true}
-                          title="Default completion length (toggle live with Shift+Tab)"
-                          onChange={(v) =>
-                            patch({ autocomplete_mode: v as ViewerPref["autocomplete_mode"] })
-                          }
-                          options={[
-                            { value: "sentence", label: "Sentence" },
-                            { value: "block", label: "Block" },
-                            { value: "scope", label: "Scope" },
-                          ]}
-                        />
-                        {/* Local-model grammar/spelling check — underlines typos
-                            (red), grammar (blue), style (green) in the editor. */}
-                        <label className="viewer-pref-toggle">
-                          <Toggle
-                            size="sm"
-                            checked={pref.grammar_check === true}
-                            disabled={!enabled}
-                            onChange={(e) => patch({ grammar_check: e.target.checked })}
-                          />
-                          <span>Grammar</span>
-                        </label>
-                      </>
-                    )}
-                  </div>
-                );
-              })}
-            </div>
+        )}
+      </div>
+    ) : null;
 
-            {settings?.debug && (
-              <>
-                <div className="settings-section-title">Debug</div>
-                <button
-                  className="tab-add-btn"
-                  style={{ fontSize: 11, padding: "2px 8px", width: "100%", color: "var(--danger, #f85149)" }}
-                  onClick={() => {
-                    invoke("clear_project_session", { localFile }).then(() => {
-                      window.location.reload();
-                    }).catch(console.error);
-                  }}
-                >
-                  Clear session storage
-                </button>
-              </>
-            )}
-          </div>
-        </div>,
-        document.body,
-      )}
-    </div>
+  return (
+    <ProjectFilesView
+      scope={scope}
+      projectId={activeId ?? null}
+      project={activeProject}
+      projectDir={projectDir}
+      folder={rightPanelFolder}
+      onFolderChange={(folder) => {
+        if (activeId) setRightPanelFolder(activeId, folder);
+      }}
+      source={fileSource}
+      setSource={setFileSource}
+      // A closed panel runs no probes and keeps no tree mounted (and so no
+      // fs-watch).
+      active={open}
+      mountTree={open}
+      // Right-click → "Open in a new tab": the same file view, on that folder,
+      // as a Files (Project) tab in this project's scope.
+      onOpenFolderTab={(rel) => openProjectFilesTab(projectDir, rel)}
+      containerClassName={`right-panel${side === "left" ? " left" : ""} ${open ? "open" : ""}${resizing ? " resizing" : ""}`}
+      containerStyle={width ? { width } : undefined}
+      containerProps={{ onMouseEnter, onMouseLeave }}
+      resizeHandle={resizeHandle}
+      pin={chrome}
+      hidden={hidden}
+    />
   );
 }
diff --git a/src/components/layout/SettingsPanel.tsx b/src/components/layout/SettingsPanel.tsx
index cc3dfc2..56ef6a0 100644
--- a/src/components/layout/SettingsPanel.tsx
+++ b/src/components/layout/SettingsPanel.tsx
@@ -1,7 +1,15 @@
 import { useEffect, useRef, useState, type ChangeEventHandler, type ReactNode } from "react";
 import { invoke } from "@tauri-apps/api/core";
 import { open as openDialog } from "@tauri-apps/plugin-dialog";
-import { useSettingsStore, clampZoom, MIN_UI_ZOOM, MAX_UI_ZOOM } from "../../stores/settings";
+import {
+  useSettingsStore,
+  clampZoom,
+  MIN_UI_ZOOM,
+  MAX_UI_ZOOM,
+  ZOOM_STEPS,
+} from "../../stores/settings";
+import { UntestedTag } from "../common/UntestedTag";
+import { experimentalEnabled } from "../../lib/experimental";
 import { usePowerStore, useEnergySaver } from "../../stores/power";
 import { useProjectsStore } from "../../stores/projects";
 import { DEFAULT_MIN_SUBWINDOW_PX } from "../../stores/tabs";
@@ -25,11 +33,21 @@ import {
   type ShortcutAction,
   type ShortcutMap,
 } from "../../lib/shortcuts";
-import { AgentsPanel, FileTypeSettings, GlobalAppsSettings, OllamaPanel } from "./SettingsSubPanels";
+import {
+  AgentsPanel,
+  FileTypeSettings,
+  GlobalAppsSettings,
+  OllamaPanel,
+  RemoteHostsSettings,
+} from "./SettingsSubPanels";
 import { Dropdown } from "../common/Dropdown";
 import { PasswordInput } from "../common/PasswordInput";
+import { useT, LANGUAGES, type Language, type TranslationKey } from "../../lib/i18n";
 import { IS_MAC, IS_WINDOWS } from "../../lib/platform";
 import { useHintsStore } from "../../stores/hints";
+import { canConnectVpnSilently } from "../../lib/vpnConnect";
+import { setVpnAutoConnect, vpnUsernameFor } from "../../lib/vpnAutoConnect";
+import type { StoredVpnConfig } from "../../types";
 
 // The workspace-layout help text. On Linux a lone Super toggles the panels; on
 // Windows it's F9 (the lone Win key is OS-reserved — Start opens on release, see
@@ -266,6 +284,92 @@ function GitHostingSettings({ onBack }: { onBack: () => void }) {
   );
 }
 
+/**
+ * Same setting the header's VPN menu arms per config (`settings.vpn_auto_connect`,
+ * see `lib/vpnAutoConnect.ts`) — surfaced here too since the header menu only shows
+ * up once a tunnel exists, which makes this opt-in easy to miss.
+ */
+function VpnAutoConnectSettings({ onBack }: { onBack: () => void }) {
+  const { settings } = useSettingsStore();
+  const armed = settings?.vpn_auto_connect ?? null;
+  const headless = settings?.connections_headless ?? true;
+  const [configs, setConfigs] = useState<StoredVpnConfig[] | null>(null);
+  const [silent, setSilent] = useState<Record<string, boolean>>({});
+
+  useEffect(() => {
+    let cancelled = false;
+    void invoke<StoredVpnConfig[]>("openvpn_list_configs")
+      .then(async (list) => {
+        const stored = Array.isArray(list) ? list : [];
+        if (cancelled) return;
+        setConfigs(stored);
+        const checks = await Promise.all(
+          stored.map(async (c) => [c.path, await canConnectVpnSilently(c.path, vpnUsernameFor(c.path))] as const),
+        );
+        if (!cancelled) setSilent(Object.fromEntries(checks));
+      })
+      .catch(() => {
+        if (!cancelled) setConfigs([]);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return (
+    <>
+      <div className="settings-title-row">
+        <h2>VPN Auto-Connect</h2>
+        <button type="button" onClick={onBack}>Back</button>
+      </div>
+      <p className="settings-help">
+        Arm one stored OpenVPN tunnel to come up automatically when Eldrun starts.
+        It reroutes this computer's traffic — not just Eldrun's — for as long as it
+        is up, so only one config can be armed at a time; arming another disarms the
+        first. Stored configs are added from a remote project's Connect dialog or the
+        VPN menu in the header.
+      </p>
+      {configs === null ? (
+        <p className="settings-help">Loading…</p>
+      ) : configs.length === 0 ? (
+        <div className="settings-empty">
+          No OpenVPN config stored yet. Add one from a remote project's Connect dialog.
+        </div>
+      ) : (
+        <div className="settings-list">
+          {configs.map((c) => {
+            const on = armed === c.path;
+            const eligible = !headless || silent[c.path] === true;
+            return (
+              <div key={c.path} className="settings-toggle-card">
+                <label className="settings-toggle-card-row">
+                  <span title={c.path}>{c.name}</span>
+                  <Toggle
+                    checked={on}
+                    disabled={!eligible && !on}
+                    onChange={(e) => void setVpnAutoConnect(c.path, e.target.checked)}
+                  />
+                </label>
+                {!eligible && !on && (
+                  <p className="settings-help">
+                    Connect once with <b>Save passphrase</b> ticked to enable this —
+                    auto-connect never prompts.
+                  </p>
+                )}
+                {on && (
+                  <p className="settings-help">
+                    Starts with Eldrun{headless ? "" : " (waits in the root terminal)"}.
+                  </p>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </>
+  );
+}
+
 function ArchivedProjectsPanel({ onBack }: { onBack: () => void }) {
   const [items, setItems] = useState<ArchivedProject[] | null>(null);
   const [busyId, setBusyId] = useState<string | null>(null);
@@ -575,23 +679,22 @@ function HelpPanel({ onBack }: { onBack: () => void }) {
   );
 }
 
-export type SettingsPanelKind = "main" | "global" | "filetypes" | "ollama" | "agents" | "shortcuts" | "git" | "archive" | "scaffoldRepair" | "help";
+export type SettingsPanelKind = "main" | "global" | "filetypes" | "ollama" | "agents" | "shortcuts" | "git" | "vpn" | "remoteHosts" | "archive" | "scaffoldRepair" | "help";
 
 /** Sub-panel navigation shown as a card menu at the foot of the main settings
- *  panel (styled like the Lessons / How-to-start menus). */
-const SETTINGS_NAV: {
-  panel: Exclude<SettingsPanelKind, "main" | "ollama">;
-  title: string;
-  blurb: string;
-}[] = [
-  { panel: "git", title: "Git Hosting", blurb: "Hosting profile, access token, and publishing." },
-  { panel: "global", title: "Global Apps", blurb: "Toolbar launchers shown across every project." },
-  { panel: "filetypes", title: "File Type Apps", blurb: "Choose which app opens each file type." },
-  { panel: "agents", title: "Manage Agents", blurb: "Install or update the agent CLIs." },
-  { panel: "shortcuts", title: "Keyboard Shortcuts", blurb: "Rebind the navigation chords." },
-  { panel: "archive", title: "Archived Projects", blurb: "Restore or permanently delete archived projects." },
-  { panel: "scaffoldRepair", title: "Repair Project Scaffold", blurb: "Regenerate missing scaffold files." },
-  { panel: "help", title: "Feature Guide", blurb: "Full glossary of Eldrun's features." },
+ *  panel (styled like the Lessons / How-to-start menus). Titles/blurbs are
+ *  resolved at render via i18n (`nav.<panel>.title` / `.blurb`). */
+const SETTINGS_NAV: Exclude<SettingsPanelKind, "main" | "ollama">[] = [
+  "git",
+  "vpn",
+  "remoteHosts",
+  "global",
+  "filetypes",
+  "agents",
+  "shortcuts",
+  "archive",
+  "scaffoldRepair",
+  "help",
 ];
 
 export function SettingsDialog({
@@ -601,10 +704,12 @@ export function SettingsDialog({
   onClose: () => void;
   initialPanel?: SettingsPanelKind;
 }) {
-  const { settings, setTheme, updateSettings } = useSettingsStore();
+  const { settings, setTheme, setLanguage, updateSettings } = useSettingsStore();
   const [panel, setPanel] = useState<SettingsPanelKind>(initialPanel);
+  const t = useT();
 
-  const currentTheme = (settings?.color_scheme ?? "light_lavender") as Theme;
+  const currentTheme = (settings?.color_scheme ?? "fancy_dark") as Theme;
+  const currentLang = (settings?.language ?? "en") as Language;
 
   // Live power state for the Energy Saver help line.
   const energyMode = settings?.energy_saver ?? "battery";
@@ -628,15 +733,16 @@ export function SettingsDialog({
   return (
     <div className="modal-backdrop how-to-start-backdrop" onMouseDown={onClose}>
       <div className="settings-dialog" onMouseDown={(e) => e.stopPropagation()}>
+       <div className="dialog-scroll">
         {panel === "main" && (
           <>
             <div className="settings-title-row">
-              <h2>Settings</h2>
+              <h2>{t("settings.title")}</h2>
               <button type="button" className="dialog-close-btn" onClick={onClose}>×</button>
             </div>
 
             <div className="settings-row">
-              <label>Theme</label>
+              <label>{t("settings.theme")}</label>
               <Dropdown
                 value={currentTheme}
                 onChange={(v) => void setTheme(v as Theme)}
@@ -644,14 +750,26 @@ export function SettingsDialog({
               />
             </div>
 
+            <div className="settings-row">
+              <label>
+                {t("settings.language")} <UntestedTag />
+              </label>
+              <Dropdown
+                value={currentLang}
+                onChange={(v) => void setLanguage(v as Language)}
+                options={LANGUAGES.map((l) => ({ value: l.value, label: l.label }))}
+              />
+            </div>
+            <p className="settings-help">{t("settings.language.help")}</p>
+
             <ToggleCard
-              label="Run scripts in background"
+              label={t("settings.runScriptsBg")}
               checked={settings?.run_scripts_in_background ?? true}
               onChange={(e) => void updateSettings({ run_scripts_in_background: e.target.checked })}
             />
 
             <ToggleCard
-              label="Claude remote control"
+              label={t("settings.claudeRemote")}
               checked={settings?.agent_remote_control ?? true}
               onChange={(e) => void updateSettings({ agent_remote_control: e.target.checked })}
               help={
@@ -664,24 +782,7 @@ export function SettingsDialog({
             />
 
             <ToggleCard
-              label="Plan/Auto toggle on agent tabs (experimental)"
-              checked={settings?.agent_mode_toggle ?? false}
-              onChange={(e) => void updateSettings({ agent_mode_toggle: e.target.checked })}
-              help={
-                <>
-                  Puts a badge on each agent tab that switches it between <b>Plan</b> (reads
-                  and proposes, never edits) and <b>Auto</b> (auto-accepts edits; shell and
-                  network commands still ask) — so one tab can plan while another does the
-                  work, and each comes back in its mode after a restart. Switching restarts
-                  the agent: the conversation is resumed, but the terminal's scrollback is
-                  lost. Only Claude supports it — it is the one agent that can both be
-                  launched into a mode and resume its conversation on restart.
-                </>
-              }
-            />
-
-            <ToggleCard
-              label="Headless remote connections"
+              label={t("settings.headlessRemote")}
               checked={settings?.connections_headless ?? true}
               onChange={(e) => void updateSettings({ connections_headless: e.target.checked })}
               help={
@@ -695,15 +796,31 @@ export function SettingsDialog({
               }
             />
 
+            {!IS_WINDOWS && (
+              <ToggleCard
+                label={t("settings.persistLocal")}
+                checked={settings?.persist_local_sessions ?? true}
+                onChange={(e) => void updateSettings({ persist_local_sessions: e.target.checked })}
+                help={
+                  <>
+                    When on (default), a local project's shell and Python/script tabs run
+                    inside a tmux session on this machine, so a long run keeps going if
+                    Eldrun crashes and the tab reattaches on restart. Closing a tab still
+                    ends its session. Requires <code>tmux</code>; agent tabs are unaffected.
+                  </>
+                }
+              />
+            )}
+
             <div className="settings-row">
-              <label>Energy saver</label>
+              <label>{t("settings.energySaver")}</label>
               <Dropdown
                 value={energyMode}
                 onChange={(v) => void updateSettings({ energy_saver: v as "off" | "battery" | "always" })}
                 options={[
-                  { value: "off", label: "Off" },
-                  { value: "battery", label: "On battery" },
-                  { value: "always", label: "Always" },
+                  { value: "off", label: t("energy.off") },
+                  { value: "battery", label: t("energy.battery") },
+                  { value: "always", label: t("energy.always") },
                 ]}
               />
             </div>
@@ -715,29 +832,72 @@ export function SettingsDialog({
             </p>
 
             <ToggleCard
-              label="Debug mode"
+              label={t("settings.debug")}
               checked={settings?.debug ?? false}
               onChange={(e) => void updateSettings({ debug: e.target.checked })}
             />
 
-            <div className="settings-section-title">Resource monitor</div>
+            <div className="settings-section-title">{t("settings.experimental")}</div>
+            <p className="settings-help">
+              Features that are still moving. Each is off by default and{" "}
+              <b>on by default in Debug mode</b> — so building Eldrun means seeing them
+              without re-ticking this list every time a new one lands. A switch here
+              always wins, in either direction: you can take one on without Debug mode,
+              or turn one off while in it.
+            </p>
+
+            <ToggleCard
+              label={t("settings.agentModeToggle")}
+              checked={experimentalEnabled(settings, "agent_mode_toggle")}
+              onChange={(e) => void updateSettings({ agent_mode_toggle: e.target.checked })}
+              help={
+                <>
+                  Puts a badge on each agent tab that switches it between <b>Plan</b> (reads
+                  and proposes, never edits) and <b>Auto</b> (auto-accepts edits; shell and
+                  network commands still ask) — so one tab can plan while another does the
+                  work, and each comes back in its mode after a restart. Switching restarts
+                  the agent: the conversation is resumed, but the terminal's scrollback is
+                  lost. Only Claude supports it — it is the one agent that can both be
+                  launched into a mode and resume its conversation on restart.
+                </>
+              }
+            />
+
+            <ToggleCard
+              label={t("settings.pythonRunDebug")}
+              checked={experimentalEnabled(settings, "python_run_debug")}
+              onChange={(e) => void updateSettings({ python_run_debug: e.target.checked })}
+              help={
+                <>
+                  Gives a <code>.py</code> file open in the editor a <b>▶ Run</b> and a{" "}
+                  <b>🐞 Debug</b> button, and turns its line numbers into a breakpoint
+                  gutter. Both open a terminal tab in the project — so they run on the host
+                  of a remote project and inside the container of a containerised one — and
+                  use the project's own interpreter. Debug is <code>pdb</code>, pre-loaded
+                  with the gutter's breakpoints. Off by default because Run executes the
+                  file. Ctrl+Click to a definition is not gated: it only reads.
+                </>
+              }
+            />
+
+            <div className="settings-section-title">{t("settings.resourceMonitor")}</div>
             <div className="settings-toggle-card">
               <label className="settings-toggle-card-row">
-                <span>Show CPU usage</span>
+                <span>{t("settings.showCpu")}</span>
                 <Toggle
                   checked={settings?.show_cpu_usage ?? true}
                   onChange={(e) => void updateSettings({ show_cpu_usage: e.target.checked })}
                 />
               </label>
               <label className="settings-toggle-card-row">
-                <span>Show RAM usage</span>
+                <span>{t("settings.showRam")}</span>
                 <Toggle
                   checked={settings?.show_ram_usage ?? true}
                   onChange={(e) => void updateSettings({ show_ram_usage: e.target.checked })}
                 />
               </label>
               <label className="settings-toggle-card-row">
-                <span>Show GPU usage</span>
+                <span>{t("settings.showGpu")}</span>
                 <Toggle
                   checked={settings?.show_gpu_usage ?? true}
                   onChange={(e) => void updateSettings({ show_gpu_usage: e.target.checked })}
@@ -750,44 +910,44 @@ export function SettingsDialog({
               </p>
             </div>
 
-            <div className="settings-section-title">Calendar</div>
+            <div className="settings-section-title">{t("settings.calendar")}</div>
             <div className="settings-row">
-              <label>Week starts on</label>
+              <label>{t("settings.weekStartsOn")}</label>
               <Dropdown
                 value={String(settings?.calendar_week_start ?? 0)}
                 onChange={(v) =>
                   void updateSettings({ calendar_week_start: Number(v) === 1 ? 1 : 0 })
                 }
                 options={[
-                  { value: "0", label: "Sunday" },
-                  { value: "1", label: "Monday" },
+                  { value: "0", label: t("day.sunday") },
+                  { value: "1", label: t("day.monday") },
                 ]}
               />
             </div>
             <div className="settings-row">
-              <label>Default view</label>
+              <label>{t("settings.defaultView")}</label>
               <Dropdown
                 value={settings?.calendar_default_view ?? "month"}
                 onChange={(v) =>
                   void updateSettings({ calendar_default_view: v as CalendarViewKind })
                 }
                 options={[
-                  { value: "day", label: "Day" },
-                  { value: "week", label: "Week" },
-                  { value: "multiweek", label: "Multiweek" },
-                  { value: "month", label: "Month" },
-                  { value: "agenda", label: "Agenda" },
-                  { value: "tasks", label: "Tasks" },
+                  { value: "day", label: t("view.day") },
+                  { value: "week", label: t("view.week") },
+                  { value: "multiweek", label: t("view.multiweek") },
+                  { value: "month", label: t("view.month") },
+                  { value: "agenda", label: t("view.agenda") },
+                  { value: "tasks", label: t("view.tasks") },
                 ]}
               />
             </div>
             <ToggleCard
-              label="24-hour clock"
+              label={t("settings.clock24")}
               checked={settings?.calendar_time_format_24h ?? false}
               onChange={(e) => void updateSettings({ calendar_time_format_24h: e.target.checked })}
             />
             <div className="settings-row">
-              <label>Day grid starts at</label>
+              <label>{t("settings.dayGridStart")}</label>
               <Dropdown
                 value={String(settings?.calendar_day_start_hour ?? 8)}
                 onChange={(v) => void updateSettings({ calendar_day_start_hour: Number(v) })}
@@ -798,19 +958,19 @@ export function SettingsDialog({
               />
             </div>
             <div className="settings-row">
-              <label>Default reminder</label>
+              <label>{t("settings.defaultReminder")}</label>
               <Dropdown
                 value={String(settings?.calendar_default_reminder_minutes ?? 0)}
                 onChange={(v) =>
                   void updateSettings({ calendar_default_reminder_minutes: Number(v) })
                 }
                 options={[
-                  { value: "0", label: "None" },
-                  { value: "5", label: "5 minutes before" },
-                  { value: "15", label: "15 minutes before" },
-                  { value: "30", label: "30 minutes before" },
-                  { value: "60", label: "1 hour before" },
-                  { value: "1440", label: "1 day before" },
+                  { value: "0", label: t("reminder.none") },
+                  { value: "5", label: t("reminder.5") },
+                  { value: "15", label: t("reminder.15") },
+                  { value: "30", label: t("reminder.30") },
+                  { value: "60", label: t("reminder.60") },
+                  { value: "1440", label: t("reminder.1440") },
                 ]}
               />
             </div>
@@ -820,9 +980,9 @@ export function SettingsDialog({
               scroll to — earlier events are still there, just above the fold.
             </p>
 
-            <div className="settings-section-title">Hints & onboarding</div>
+            <div className="settings-section-title">{t("settings.hintsOnboarding")}</div>
             <ToggleCard
-              label="Show contextual hints"
+              label={t("settings.showHints")}
               checked={settings?.hints_enabled ?? true}
               onChange={(e) => void updateSettings({ hints_enabled: e.target.checked })}
             />
@@ -834,7 +994,7 @@ export function SettingsDialog({
                   window.dispatchEvent(new Event("eldrun:open-how-to-start"));
                 }}
               >
-                How to start...
+                {t("settings.howToStart")}
               </button>
               <button
                 type="button"
@@ -843,7 +1003,7 @@ export function SettingsDialog({
                   window.dispatchEvent(new Event("eldrun:start-tour"));
                 }}
               >
-                Take a tour
+                {t("settings.takeTour")}
               </button>
               <button
                 type="button"
@@ -852,20 +1012,23 @@ export function SettingsDialog({
                   window.dispatchEvent(new Event("eldrun:open-lessons"));
                 }}
               >
-                Lessons
+                {t("settings.lessons")}
               </button>
               <button type="button" onClick={() => useHintsStore.getState().reset()}>
-                Reset hints
+                {t("settings.resetHints")}
               </button>
             </div>
 
-            <div className="settings-section-title">Layout</div>
+            <div className="settings-section-title">{t("settings.layout")}</div>
             <p className="settings-help">
-              Global zoom scales the entire Eldrun interface — handy on 4K /
-              high-DPI monitors. 100% is the default.
+              Window zoom scales the entire Eldrun interface — handy on 4K /
+              high-DPI monitors. 100% is the default. Zoom is <strong>per
+              window</strong>: this sets the main window, and each popped-out
+              subwindow keeps its own. Ctrl&nbsp;+ / Ctrl&nbsp;− zoom the focused
+              window and Ctrl&nbsp;0 resets it. <UntestedTag />
             </p>
             <div className="settings-row">
-              <label>Global zoom</label>
+              <label>{t("settings.windowZoom")}</label>
               <Dropdown
                 value={String(clampZoom(settings?.ui_zoom))}
                 onChange={(v) => {
@@ -874,12 +1037,12 @@ export function SettingsDialog({
                     ui_zoom: z === 1 ? undefined : clampZoom(z),
                   });
                 }}
-                options={[0.5, 0.75, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2, 2.5, 3]
-                  .filter((z) => z >= MIN_UI_ZOOM && z <= MAX_UI_ZOOM)
-                  .map((z) => ({
-                    value: String(z),
-                    label: `${Math.round(z * 100)}%${z === 1 ? " (default)" : ""}`,
-                  }))}
+                options={ZOOM_STEPS.filter(
+                  (z) => z >= MIN_UI_ZOOM && z <= MAX_UI_ZOOM,
+                ).map((z) => ({
+                  value: String(z),
+                  label: `${Math.round(z * 100)}%${z === 1 ? ` (${t("common.default")})` : ""}`,
+                }))}
               />
             </div>
             <p className="settings-help">
@@ -887,7 +1050,7 @@ export function SettingsDialog({
               Defaults to {DEFAULT_MIN_SUBWINDOW_PX}px when left blank.
             </p>
             <div className="settings-row">
-              <label htmlFor="min-subwindow-width">Min subwindow width (px)</label>
+              <label htmlFor="min-subwindow-width">{t("settings.minSubWidth")}</label>
               <input
                 id="min-subwindow-width"
                 type="number"
@@ -904,7 +1067,7 @@ export function SettingsDialog({
               />
             </div>
             <div className="settings-row">
-              <label htmlFor="min-subwindow-height">Min subwindow height (px)</label>
+              <label htmlFor="min-subwindow-height">{t("settings.minSubHeight")}</label>
               <input
                 id="min-subwindow-height"
                 type="number"
@@ -921,7 +1084,7 @@ export function SettingsDialog({
               />
             </div>
 
-            <div className="settings-section-title">Downloads</div>
+            <div className="settings-section-title">{t("settings.downloads")}</div>
             <p className="settings-help">
               Folders scanned by the right-panel Downloads section (the 📥 toggle),
               for quickly copying freshly downloaded files into a project. Read-only
@@ -931,7 +1094,7 @@ export function SettingsDialog({
             <div className="settings-list">
               {(settings?.download_sources ?? []).length === 0 ? (
                 <div className="settings-empty">
-                  No folders added — the system Downloads folder is used.
+                  {t("settings.noDownloadFolders")}
                 </div>
               ) : (
                 (settings?.download_sources ?? []).map((dir) => (
@@ -959,7 +1122,7 @@ export function SettingsDialog({
                       }
                       title="Remove this folder"
                     >
-                      Remove
+                      {t("common.remove")}
                     </button>
                   </div>
                 ))
@@ -981,13 +1144,13 @@ export function SettingsDialog({
                   })();
                 }}
               >
-                Add download folder...
+                {t("settings.addDownloadFolder")}
               </button>
             </div>
 
-            <div className="settings-section-title">Usage stats</div>
+            <div className="settings-section-title">{t("settings.usageStats")}</div>
             <ToggleCard
-              label="Show the recap at the start of each day"
+              label={t("settings.dailyRecap")}
               checked={settings?.daily_stats_recap ?? true}
               onChange={(e) => void updateSettings({ daily_stats_recap: e.target.checked })}
               help={
@@ -1006,20 +1169,24 @@ export function SettingsDialog({
                 window.dispatchEvent(new CustomEvent(OPEN_STATS_EVENT));
               }}
             >
-              Open usage stats
+              {t("settings.openUsageStats")}
             </button>
 
-            <div className="settings-section-title">More settings</div>
+            <div className="settings-section-title">{t("settings.moreSettings")}</div>
             <div className="settings-nav-list">
-              {SETTINGS_NAV.map((item) => (
+              {SETTINGS_NAV.map((panelKind) => (
                 <button
-                  key={item.panel}
+                  key={panelKind}
                   type="button"
                   className="settings-nav-item"
-                  onClick={() => setPanel(item.panel)}
+                  onClick={() => setPanel(panelKind)}
                 >
-                  <span className="settings-nav-item-title">{item.title}</span>
-                  <span className="settings-nav-item-blurb">{item.blurb}</span>
+                  <span className="settings-nav-item-title">
+                    {t(`nav.${panelKind}.title` as TranslationKey)}
+                  </span>
+                  <span className="settings-nav-item-blurb">
+                    {t(`nav.${panelKind}.blurb` as TranslationKey)}
+                  </span>
                 </button>
               ))}
             </div>
@@ -1031,9 +1198,12 @@ export function SettingsDialog({
         {panel === "agents" && <AgentsPanel onBack={() => setPanel("main")} />}
         {panel === "shortcuts" && <ShortcutsSettings onBack={() => setPanel("main")} />}
         {panel === "git" && <GitHostingSettings onBack={() => setPanel("main")} />}
+        {panel === "vpn" && <VpnAutoConnectSettings onBack={() => setPanel("main")} />}
+        {panel === "remoteHosts" && <RemoteHostsSettings onBack={() => setPanel("main")} />}
         {panel === "archive" && <ArchivedProjectsPanel onBack={() => setPanel("main")} />}
         {panel === "scaffoldRepair" && <ScaffoldRepairPanel onBack={() => setPanel("main")} />}
         {panel === "help" && <HelpPanel onBack={() => setPanel("main")} />}
+       </div>
       </div>
     </div>
   );
diff --git a/src/components/layout/SettingsSubPanels.tsx b/src/components/layout/SettingsSubPanels.tsx
index db1b802..5c26a4e 100644
--- a/src/components/layout/SettingsSubPanels.tsx
+++ b/src/components/layout/SettingsSubPanels.tsx
@@ -14,6 +14,8 @@ import {
   type CodexHookState,
 } from "../../lib/codexHooks";
 import type { GlobalAppEntry } from "../../types";
+import { parseSshAddress } from "../projects/scaffold";
+import { useProjectsStore } from "../../stores/projects";
 
 interface OllamaModelInfo {
   name: string;
@@ -246,6 +248,139 @@ export function FileTypeSettings({ onBack }: { onBack: () => void }) {
   );
 }
 
+/**
+ * "Remote Connections" settings panel: a standard/default remote path per SSH
+ * host, set once here instead of re-browsing it every time. Consulted by
+ * `useRemoteSession`'s `resolveStartDir` whenever a connect/browse flow would
+ * otherwise fall back to the SSH-reported home directory — so a host with a
+ * preferred working directory (e.g. a projects folder that isn't `$HOME`)
+ * opens there every time, for both new remote projects and reconnects.
+ *
+ * Distinct from the auto-remembered "recently used paths" dropdown in the New
+ * Project dialog (`remote_paths.json`): that list grows on its own from every
+ * folder you browse to, while this is one explicit choice per host, edited
+ * only here.
+ */
+export function RemoteHostsSettings({ onBack }: { onBack: () => void }) {
+  const [defaults, setDefaults] = useState<Record<string, string> | null>(null);
+  const [draftHost, setDraftHost] = useState("");
+  const [draftPath, setDraftPath] = useState("");
+  const [error, setError] = useState("");
+
+  const refresh = () => {
+    invoke<Record<string, string>>("remote_list_default_paths")
+      .then(setDefaults)
+      .catch((e) => setError(String(e)));
+  };
+  useEffect(refresh, []);
+
+  // Hosts seen before (recent SSH addresses + any active remote project),
+  // offered as suggestions when adding a new entry — typing the exact host is
+  // still required (paths are host-specific and a typo would silently do
+  // nothing), this just saves re-typing one you've already connected to.
+  const knownHosts = useProjectsStore((s) => s.projects);
+  const [hostSuggestions, setHostSuggestions] = useState<string[]>([]);
+  useEffect(() => {
+    invoke<string[]>("ssh_list_addresses")
+      .then((addrs) => {
+        const fromAddrs = addrs.map((a) => parseSshAddress(a)?.host).filter((h): h is string => !!h);
+        const fromProjects = knownHosts.map((p) => p.remote?.host).filter((h): h is string => !!h);
+        const seen = new Set<string>();
+        const out: string[] = [];
+        for (const h of [...fromAddrs, ...fromProjects]) {
+          const key = h.toLowerCase();
+          if (seen.has(key)) continue;
+          seen.add(key);
+          out.push(h);
+        }
+        setHostSuggestions(out);
+      })
+      .catch(() => setHostSuggestions([]));
+  }, [knownHosts]);
+
+  const savePath = (host: string, path: string) => {
+    setError("");
+    invoke<void>("remote_set_default_path", { host, path })
+      .then(refresh)
+      .catch((e) => setError(String(e)));
+  };
+
+  const removeHost = (host: string) => savePath(host, "");
+
+  const addEntry = () => {
+    const host = draftHost.trim();
+    const path = draftPath.trim();
+    if (!host || !path) return;
+    savePath(host, path);
+    setDraftHost("");
+    setDraftPath("");
+  };
+
+  const entries = defaults ? Object.entries(defaults).sort(([a], [b]) => a.localeCompare(b)) : [];
+
+  return (
+    <>
+      <div className="settings-title-row">
+        <h2>Remote Connections</h2>
+        <button type="button" onClick={onBack}>Back</button>
+      </div>
+      <p className="settings-help">
+        The folder a connect or browse opens in for a given SSH host, instead of
+        the host's home directory. Set once here and it applies the next time you
+        connect to that host — for a new remote project's folder browser and for
+        reconnecting an existing one.
+      </p>
+      {error && <div className="project-dialog-error">{error}</div>}
+      {defaults === null ? (
+        <p className="settings-help">Loading…</p>
+      ) : entries.length === 0 ? (
+        <div className="settings-empty">No standard paths set — hosts default to their home directory.</div>
+      ) : (
+        <div className="settings-list">
+          {entries.map(([host, path]) => (
+            <div className="remote-host-settings-row" key={host}>
+              <span className="settings-role-label" title={host}>{host}</span>
+              <input
+                value={path}
+                onChange={(e) => setDefaults((d) => (d ? { ...d, [host]: e.target.value } : d))}
+                onBlur={(e) => savePath(host, e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") savePath(host, e.currentTarget.value);
+                }}
+              />
+              <button type="button" onClick={() => removeHost(host)} title="Remove">
+                ×
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+      <div className="remote-host-settings-row remote-host-settings-add">
+        <input
+          list="remote-host-suggestions"
+          value={draftHost}
+          placeholder="host"
+          onChange={(e) => setDraftHost(e.target.value)}
+        />
+        <datalist id="remote-host-suggestions">
+          {hostSuggestions.map((h) => (
+            <option key={h} value={h} />
+          ))}
+        </datalist>
+        <input
+          value={draftPath}
+          placeholder="/path/on/host"
+          onChange={(e) => setDraftPath(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") addEntry();
+          }}
+        />
+        <button type="button" onClick={addEntry}>Add</button>
+      </div>
+    </>
+  );
+}
+
 function fmtBytes(n: number): string {
   if (n === 0) return "0 B";
   if (n < 1024 * 1024 * 1024) return (n / (1024 * 1024)).toFixed(0) + " MB";
diff --git a/src/components/monitoring/GlobalMachineMonitorDialog.tsx b/src/components/monitoring/GlobalMachineMonitorDialog.tsx
new file mode 100644
index 0000000..b393f77
--- /dev/null
+++ b/src/components/monitoring/GlobalMachineMonitorDialog.tsx
@@ -0,0 +1,50 @@
+import { createPortal } from "react-dom";
+import { useGlobalMachineMonitorStore } from "../../stores/globalMachineMonitor";
+import { SystemMonitorPane } from "./SystemMonitorPane";
+
+/**
+ * Mounted once (AppShell). Renders the full system-monitor dialog for whichever
+ * global machine `useGlobalMachineMonitorStore` points at — opened from the
+ * header's Machines menu (`MachinesIndicator`), replacing the old inline small
+ * CPU/GPU usage bars with the same htop-like view a project's "System Monitor"
+ * tab shows, via `SystemMonitorPane`'s ad-hoc `globalMachine` mode. Mirrors
+ * `RemoteMachinesDialogHost`'s mount-once/store-driven pattern.
+ */
+export function GlobalMachineMonitorDialogHost() {
+  const machine = useGlobalMachineMonitorStore((s) => s.machine);
+  const close = useGlobalMachineMonitorStore((s) => s.close);
+  if (!machine) return null;
+  return <GlobalMachineMonitorDialog key={machine.id} machine={machine} onClose={close} />;
+}
+
+function GlobalMachineMonitorDialog({
+  machine,
+  onClose,
+}: {
+  machine: { id: string; user?: string; host: string; port?: number; label?: string };
+  onClose: () => void;
+}) {
+  return createPortal(
+    <div className="modal-backdrop" onMouseDown={onClose}>
+      <div
+        className="project-dialog dialog-framed sysmon-dialog"
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        <div className="settings-title-row">
+          <h2>System monitor — {machine.label || machine.host}</h2>
+          <button type="button" className="dialog-close-btn" onClick={onClose}>
+            ×
+          </button>
+        </div>
+        <div className="sysmon-dialog-body">
+          <SystemMonitorPane
+            projectId={null}
+            visible
+            globalMachine={{ user: machine.user, host: machine.host, port: machine.port }}
+          />
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}
diff --git a/src/components/monitoring/SystemMonitorPane.tsx b/src/components/monitoring/SystemMonitorPane.tsx
index f34bb63..a6db03d 100644
--- a/src/components/monitoring/SystemMonitorPane.tsx
+++ b/src/components/monitoring/SystemMonitorPane.tsx
@@ -1,5 +1,23 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { invoke } from "@tauri-apps/api/core";
+import {
+  formatBytes,
+  formatFan,
+  formatMhz,
+  formatTempC,
+  formatWatts,
+  gpuAdapterTooltip,
+  gpuLinkLabel,
+  gpuPercent,
+  gpuTotals,
+  type GpuProc,
+  type GpuSample,
+} from "../../lib/gpu";
+import { useProjectsStore } from "../../stores/projects";
+import { ConnLamp } from "../common/ConnLamp";
+import { UntestedTag } from "../common/UntestedTag";
+import { hostsForProject } from "../../lib/remoteHosts";
+import { PRIMARY_HOST, sshOf, useRemoteStatusStore } from "../../stores/remoteStatus";
 
 // ── Backend snapshot shape (mirrors sysstat::SystemSnapshot, snake_case) ──────
 
@@ -17,6 +35,20 @@ export interface ProcSample {
   rss_kib: number;
   cpu_jiffies: number;
   threads: number;
+  /** Owning user's name (resolved on the sampled machine's passwd db). Empty when
+   *  the backend can't resolve an owner (Windows/macOS) — the per-user section is
+   *  hidden then. An unmapped uid reads as `#<uid>`. */
+  user: string;
+}
+
+/** One interactive login session on the sampled host (a `who` row). Populated
+ *  only on the **remote** path — the local pane never shows the "Logged in"
+ *  panel, since local sampling is always just this user. */
+export interface LoginSession {
+  user: string;
+  tty: string;
+  /** The rest of the `who` line verbatim — login time and `(origin)`. */
+  detail: string;
 }
 
 export interface SystemSnapshot {
@@ -32,14 +64,47 @@ export interface SystemSnapshot {
   load_avg: [number, number, number];
   uptime_secs: number;
   processes: ProcSample[];
+  /** Every GPU whose memory the machine reports; empty when none (see `lib/gpu`). */
+  gpus: GpuSample[];
+  /** Per-process GPU memory — populated only on the remote path (sampled on the
+   *  host); locally the pane fetches `gpu_process_snapshot` instead. */
+  gpu_procs?: GpuProc[];
+  /** Whole-package CPU temperature in °C, or null/undefined when no CPU hwmon
+   *  sensor is present (or on Windows/macOS, which don't read one). */
+  cpu_temp_c?: number | null;
+  /** Hottest DIMM temperature in °C, or null/undefined when the board exposes no
+   *  on-module sensor (`jc42`/`spd5118`) — most desktops don't wire one. */
+  mem_temp_c?: number | null;
+  /** Interactive login sessions on the host (from `who`), backing the "Logged in"
+   *  panel — the same per-user session view the connect-time remote-usage dialog
+   *  shows. Populated only on the remote path; empty locally. */
+  sessions?: LoginSession[];
 }
 
 interface Props {
-  /** Whole-machine view — no project scope. */
+  /** Owning project, or `null` in the root scope. A remote (SSH) project unlocks
+   *  a source toggle so the pane can sample the **host** instead of this machine.
+   *  Ignored when `globalMachine` is set. */
+  projectId: string | null;
   visible: boolean;
+  /** When set, the pane skips the project/host machinery entirely and samples
+   *  this ad-hoc global machine (`stores/globalMachines.ts` — no project, no
+   *  pooled ControlMaster) via `global_machine_monitor_snapshot`, opened by
+   *  `GlobalMachineMonitorDialog` from the header's Machines menu in place of
+   *  its old small inline usage bars. Always treated as a remote source (no
+   *  "This machine" toggle — there is only the one machine to show). */
+  globalMachine?: { user?: string; host: string; port?: number };
 }
 
+/** Which machine the pane samples: this one, or a connected remote project's host.
+ *  A hostId of `PRIMARY_HOST` selects the project's own remote; any other id
+ *  selects a `compute_hosts` worker (`docs/multi_host_remote_plan.md`). */
+type Source = "local" | { hostId: string };
+
 const POLL_MS = 1500;
+/** The host sample is one SSH round-trip reading its whole `/proc`, so it polls
+ *  more gently than the local `/proc` read to keep host load and traffic down. */
+const REMOTE_POLL_MS = 3000;
 
 // ── Pure delta helpers (unit-tested in SystemMonitorSampling.test.ts) ─────────
 
@@ -116,6 +181,26 @@ function toneFor(pct: number): string {
   return "var(--success)";
 }
 
+/** Traffic-light tone for a utilization percentage, matching the remote-usage
+ *  connect dialog exactly: green when effectively idle (≤5%), orange up to 40%,
+ *  red above — so the per-user "By user" panel reads identically to the session
+ *  stats there. */
+type UsageTone = "green" | "orange" | "red";
+function usageTone(pct: number): UsageTone {
+  if (pct <= 5) return "green";
+  if (pct <= 40) return "orange";
+  return "red";
+}
+
+/** The same green/orange/red dot the remote-usage dialog puts next to a user's
+ *  CPU share (`.remote-usage-light`), reused here so the two panels match. */
+function UsageLight({ pct }: { pct: number }) {
+  const tone = usageTone(pct);
+  return (
+    <span className={`remote-usage-light is-${tone}`} aria-label={`utilization ${tone}`} />
+  );
+}
+
 // ── Derived rows ──────────────────────────────────────────────────────────────
 
 interface ProcRow extends ProcSample {
@@ -145,11 +230,84 @@ function sortRows(rows: ProcRow[], key: SortKey, asc: boolean): ProcRow[] {
   });
 }
 
+/** One user's share of the machine: their summed CPU%/MEM% across every process
+ *  they own, and how many processes that is. This is the same "who's loading the
+ *  host" statistic the connect-time usage dialog shows, but derived from the full
+ *  process table rather than a top-N `ps` sample — so it's exact, not a sample. */
+interface UserRow {
+  user: string;
+  cpu: number;
+  mem: number;
+  count: number;
+}
+
+/** Collapse the process rows into one row per owning user, summing CPU%/MEM% and
+ *  counting processes. Sorted by CPU%, busiest first — the point is spotting who's
+ *  loading the machine. Processes with no resolved owner are ignored (the section
+ *  itself is hidden when *no* process reports one). */
+function groupByUser(rows: ProcRow[]): UserRow[] {
+  const byUser = new Map<string, UserRow>();
+  for (const r of rows) {
+    if (!r.user) continue;
+    const cur = byUser.get(r.user) ?? { user: r.user, cpu: 0, mem: 0, count: 0 };
+    cur.cpu += r.cpu;
+    cur.mem += r.mem;
+    cur.count += 1;
+    byUser.set(r.user, cur);
+  }
+  return [...byUser.values()].sort((a, b) => b.cpu - a.cpu);
+}
+
+/** One logged-in user: how many interactive sessions they hold, plus their summed
+ *  CPU%/MEM% from the full process table. Same look as the connect-time
+ *  remote-usage dialog's "Logged in" row. */
+interface SessionRow {
+  user: string;
+  sessions: number;
+  cpu: number;
+  mem: number;
+}
+
+/** Collapse `who`'s login sessions into one row per user — a session count plus
+ *  that user's CPU%/MEM% looked up from the full-table `byUser` breakdown, so the
+ *  compute figures are exact rather than a `ps` sample (which is what the connect
+ *  dialog has to settle for). Sorted by CPU%, busiest first. Unlike "By user"
+ *  (every process owner, including system daemons), this lists only users with an
+ *  actual interactive login — the "who else is on this shared machine?" view. */
+function groupLoginSessions(
+  sessions: LoginSession[],
+  byUser: Map<string, UserRow>,
+): SessionRow[] {
+  const counts = new Map<string, number>();
+  const order: string[] = [];
+  for (const s of sessions) {
+    if (!counts.has(s.user)) order.push(s.user);
+    counts.set(s.user, (counts.get(s.user) ?? 0) + 1);
+  }
+  return order
+    .map((user) => {
+      const u = byUser.get(user);
+      return { user, sessions: counts.get(user) ?? 0, cpu: u?.cpu ?? 0, mem: u?.mem ?? 0 };
+    })
+    .sort((a, b) => b.cpu - a.cpu);
+}
+
 // ── Small presentational bits ─────────────────────────────────────────────────
 
-function Meter({ label, pct, caption }: { label: string; pct: number; caption?: string }) {
+function Meter({
+  label,
+  pct,
+  caption,
+  title,
+}: {
+  label: string;
+  pct: number;
+  caption?: string;
+  /** Hover detail — the GPU meters use it to name the adapter and split its pools. */
+  title?: string;
+}) {
   return (
-    <div className="sysmon-meter">
+    <div className="sysmon-meter" title={title}>
       <span className="sysmon-meter-label">{label}</span>
       <span className="sysmon-meter-bar">
         <span
@@ -162,56 +320,246 @@ function Meter({ label, pct, caption }: { label: string; pct: number; caption?:
   );
 }
 
-export function SystemMonitorPane({ visible }: Props) {
+/** One GPU's detail card: identity, memory + utilization meters, live sensors. */
+function GpuSection({ gpu }: { gpu: GpuSample }) {
+  const { used, total } = gpuTotals([gpu]);
+  const link = gpuLinkLabel(gpu);
+  const tip = gpuAdapterTooltip(gpu);
+
+  // A fixed set of sensor slots in a fixed order, always rendered from the first
+  // frame on. A driver that momentarily (or never) answers a sensor shows `n/a`
+  // in its slot rather than dropping the chip — a disappearing chip reflows every
+  // chip to its right, which is the flicker (an idle NVIDIA card blanks
+  // `power.draw` as `[N/A]`). Keeping the slots stable trades a permanent `n/a`
+  // for a sensor a card lacks against a strip that never jumps.
+  const sensors = [
+    { label: "temp", value: formatTempC(gpu.temp_c) },
+    { label: "power", value: formatWatts(gpu.power_w, gpu.power_cap_w) },
+    { label: "core", value: formatMhz(gpu.sclk_mhz) },
+    { label: "mem", value: formatMhz(gpu.mclk_mhz) },
+    { label: "fan", value: formatFan(gpu.fan_percent) },
+  ].map((s) => ({ label: s.label, value: s.value ?? "n/a", present: s.value != null }));
+
+  return (
+    <div className="sysmon-gpu">
+      <div className="sysmon-gpu-head">
+        <span className="sysmon-gpu-name" title={tip}>
+          {gpu.name}
+        </span>
+        <span className="sysmon-gpu-meta">
+          {gpu.driver}
+          {gpu.driver_version ? ` ${gpu.driver_version}` : ""}
+          {link ? ` · ${link}` : ""}
+        </span>
+      </div>
+      <div className="sysmon-gpu-meters">
+        {/* Both memory pools summed — on an APU the dedicated carve-out alone is
+            just the framebuffer (see lib/gpu). */}
+        <Meter
+          label="VRAM"
+          pct={gpuPercent(used, total)}
+          caption={`${formatBytes(used)} / ${formatBytes(total)}`}
+          title={tip}
+        />
+        {/* `busy_percent` is null when the driver won't report it — omit the meter
+            rather than show a misleading 0%. */}
+        {gpu.busy_percent != null && <Meter label="Util" pct={gpu.busy_percent} />}
+      </div>
+      {sensors.length > 0 && (
+        <div className="sysmon-stats sysmon-gpu-sensors">
+          {sensors.map((s) => (
+            <span key={s.label}>
+              {s.label}{" "}
+              <b className={s.present ? undefined : "sysmon-sensor-na"}>{s.value}</b>
+            </span>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Top processes by GPU memory. Empty (renders nothing) when the driver reports
+ *  no per-process data — best-effort, so its absence is silent, not an error. */
+function GpuProcList({ procs }: { procs: GpuProc[] }) {
+  const top = procs.filter((p) => p.mem_bytes > 0).slice(0, 8);
+  if (top.length === 0) return null;
+  return (
+    <div className="sysmon-gpu-procs">
+      <div className="sysmon-gpu-procs-head">GPU memory by process</div>
+      {top.map((p) => (
+        <div className="sysmon-gpu-proc" key={p.pid}>
+          <span className="sysmon-gpu-proc-mem">{formatBytes(p.mem_bytes)}</span>
+          <span className="sysmon-gpu-proc-pid">{p.pid}</span>
+          <span className="sysmon-gpu-proc-name" title={p.name}>
+            {p.name || "?"}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function SystemMonitorPane({ projectId, visible, globalMachine }: Props) {
   const [pair, setPair] = useState<{ snap: SystemSnapshot; prev: SystemSnapshot | null } | null>(
     null,
   );
   const [error, setError] = useState<string | null>(null);
+  // Per-process GPU memory, local machine only (the remote /proc script doesn't
+  // sample it). Its own command, so the always-visible header never pays for it.
+  const [gpuProcs, setGpuProcs] = useState<GpuProc[]>([]);
   const [sortKey, setSortKey] = useState<SortKey>("cpu");
   const [asc, setAsc] = useState(false);
   const [filter, setFilter] = useState("");
+  // The detailed process table is collapsible so the CPU/GPU vitals can own the
+  // pane; expanded by default (the monitor's main content).
+  const [procOpen, setProcOpen] = useState(true);
+  // The per-user breakdown is collapsible too, expanded by default when present.
+  const [usersOpen, setUsersOpen] = useState(true);
+  // The logged-in-sessions panel (remote hosts only), likewise collapsible.
+  const [sessionsOpen, setSessionsOpen] = useState(true);
   const prevRef = useRef<SystemSnapshot | null>(null);
 
-  // Poll only while visible; the pane stays mounted across scope switches, so
-  // pausing here stops a hidden monitor from sampling in the background (mirrors
-  // AppResourceDisplay / NetworkTrafficPane).
+  // A remote (SSH) project can sample its primary host, and — multi-host
+  // (`docs/multi_host_remote_plan.md`) — any connected `compute_hosts` worker
+  // too. Same store reads the Disk Usage pane uses to reach a host over the
+  // shared pool.
+  const project = useProjectsStore((s) => s.projects.find((p) => p.id === projectId));
+  const byProject = useRemoteStatusStore((s) => s.byProject);
+  const byHostAll = useRemoteStatusStore((s) => s.byHost);
+  const isRemoteProject = !!project?.remote;
+
+  const hosts = useMemo(() => hostsForProject(project), [project]);
+
+  function connState(hostId: string) {
+    if (!projectId) return "off" as const;
+    return sshOf({ byProject, byHost: byHostAll }, projectId, hostId);
+  }
+  const primaryConnected = isRemoteProject && connState(PRIMARY_HOST) === "connected";
+
+  const [source, setSource] = useState<Source>("local");
+  // Auto-follow the primary host: point at it once it is connected, "local"
+  // otherwise — until the user picks a side explicitly (any host or "local"),
+  // which pins the choice.
+  const pinnedRef = useRef(false);
+  useEffect(() => {
+    if (!pinnedRef.current) setSource(primaryConnected ? { hostId: PRIMARY_HOST } : "local");
+  }, [primaryConnected]);
+  function pickSource(next: Source) {
+    pinnedRef.current = true;
+    setSource(next);
+  }
+
+  // A global machine has no project/host machinery at all — it is always
+  // treated as "on a remote host" (the sessions/by-user panels, the remote poll
+  // cadence) but skips the source toggle and the pooled-connection gate: it
+  // authenticates ad-hoc on every poll, same as the dialog's old small usage bar.
+  const onHost = !!globalMachine || source !== "local";
+  const selectedHostId = !globalMachine && onHost ? (source as { hostId: string }).hostId : null;
+  const hostConnected = globalMachine
+    ? true
+    : onHost && selectedHostId != null && connState(selectedHostId) === "connected";
+  const remoteHost = onHost
+    ? (globalMachine
+        ? "this machine"
+        : (hosts.find((h) => h.id === selectedHostId)?.label ?? "the host"))
+    : "the host";
+  // Whether the pane is actually sampling (and so the table/meters below apply).
+  const sampling = visible && !(onHost && !hostConnected);
+
+  // Poll only while visible and (for the host) while it is connected; the pane
+  // stays mounted across scope switches, so pausing here stops a hidden monitor
+  // from sampling in the background (mirrors AppResourceDisplay /
+  // NetworkTrafficPane). CPU/MEM percentages are diffs of successive samples, so
+  // switching machine drops the stale previous sample — a delta across two
+  // different machines is meaningless.
   useEffect(() => {
-    if (!visible) return;
+    prevRef.current = null;
+    setPair(null);
+    setError(null);
+    setGpuProcs([]);
+    if (!sampling) return;
     let cancelled = false;
     async function poll() {
       try {
-        const next = await invoke<SystemSnapshot>("system_monitor_snapshot");
+        const next = globalMachine
+          ? await invoke<SystemSnapshot>("global_machine_monitor_snapshot", {
+              user: globalMachine.user,
+              host: globalMachine.host,
+              port: globalMachine.port,
+            })
+          : await invoke<SystemSnapshot>("system_monitor_snapshot", {
+              projectId: onHost ? projectId : null,
+              hostId: onHost ? selectedHostId : null,
+            });
         if (cancelled) return;
         const prev = prevRef.current;
         prevRef.current = next;
         setPair({ snap: next, prev });
         setError(null);
+        // The host samples its own per-process GPU memory into the snapshot; the
+        // local machine has a dedicated command for it (kept off the shared,
+        // always-polled snapshot). Best-effort either way — an empty list means
+        // "no per-process data", not an error.
+        if (onHost) {
+          if (!cancelled) setGpuProcs(next.gpu_procs ?? []);
+        } else {
+          try {
+            const procs = await invoke<GpuProc[]>("gpu_process_snapshot");
+            if (!cancelled) setGpuProcs(procs);
+          } catch {
+            if (!cancelled) setGpuProcs([]);
+          }
+        }
       } catch (e) {
         if (!cancelled) setError(String(e));
       }
     }
     void poll();
-    const id = window.setInterval(poll, POLL_MS);
+    const id = window.setInterval(poll, onHost ? REMOTE_POLL_MS : POLL_MS);
     return () => {
       cancelled = true;
       window.clearInterval(id);
     };
-  }, [visible]);
+  }, [
+    sampling,
+    onHost,
+    projectId,
+    selectedHostId,
+    globalMachine?.user,
+    globalMachine?.host,
+    globalMachine?.port,
+  ]);
+
+  // Every process, before the table's text filter — the per-user breakdown sums
+  // over the whole machine, not just what the filter happens to show.
+  const allRows = useMemo(() => (pair ? buildRows(pair.snap, pair.prev) : []), [pair]);
 
   const rows = useMemo(() => {
-    if (!pair) return [];
-    const built = buildRows(pair.snap, pair.prev);
     const q = filter.trim().toLowerCase();
     const filtered = q
-      ? built.filter(
+      ? allRows.filter(
           (r) =>
             r.comm.toLowerCase().includes(q) ||
             r.cmdline.toLowerCase().includes(q) ||
             String(r.pid) === q,
         )
-      : built;
+      : allRows;
     return sortRows(filtered, sortKey, asc);
-  }, [pair, filter, sortKey, asc]);
+  }, [allRows, filter, sortKey, asc]);
+
+  const userRows = useMemo(() => groupByUser(allRows), [allRows]);
+  const hasUserData = userRows.length > 0;
+
+  // Logged-in sessions (from the host's `who`), attributed CPU/MEM from the
+  // full-table per-user sums. Remote-only — a local snapshot carries no sessions.
+  const sessionRows = useMemo(() => {
+    const sessions = pair?.snap.sessions;
+    if (!sessions || sessions.length === 0) return [];
+    const byUser = new Map(userRows.map((u) => [u.user, u]));
+    return groupLoginSessions(sessions, byUser);
+  }, [pair, userRows]);
+  const hasSessions = sessionRows.length > 0;
 
   function toggleSort(key: SortKey) {
     if (key === sortKey) {
@@ -238,64 +586,308 @@ export function SystemMonitorPane({ visible }: Props) {
   );
 
   const arrow = (key: SortKey) => (key === sortKey ? (asc ? " ▲" : " ▼") : "");
+  /** Marks the active sort column's header AND its body cells (`.sysmon-table
+   *  th.sorted` / `td.sorted`) so the whole column reads as one accent band. */
+  const sortedCls = (key: SortKey) => (key === sortKey ? "sorted" : undefined);
 
   return (
     <div className="sysmon-root">
       <style>{SYSMON_CSS}</style>
 
-      {snap && !snap.supported ? (
+      {isRemoteProject && (
+        <div className="sysmon-source" role="tablist" aria-label="Monitor source">
+          <button
+            className={source === "local" ? "sysmon-source-btn active" : "sysmon-source-btn"}
+            onClick={() => pickSource("local")}
+            role="tab"
+            aria-selected={source === "local"}
+          >
+            This machine
+          </button>
+          {/* One button per connected machine — the primary and every multi-host
+              `compute_hosts` worker — each carrying its own live SSH traffic light
+              (the same `ConnLamp` the Remote machines window shows per row), so a
+              worker's status is visible right where its usage would be sampled. */}
+          {hosts.map((h) => {
+            const state = connState(h.id);
+            const connected = state === "connected";
+            const active = onHost && selectedHostId === h.id;
+            return (
+              <button
+                key={h.id}
+                className={active ? "sysmon-source-btn active" : "sysmon-source-btn"}
+                onClick={() => pickSource({ hostId: h.id })}
+                role="tab"
+                aria-selected={active}
+                title={connected ? `System monitor on ${h.label}` : `${h.label}: ${state}`}
+              >
+                <ConnLamp status={state} label={h.label} />
+                {h.label}
+              </button>
+            );
+          })}
+        </div>
+      )}
+
+      {onHost && !hostConnected ? (
+        <div className="sysmon-placeholder">
+          Connect this project to view {remoteHost}&rsquo;s system monitor.
+        </div>
+      ) : snap && !snap.supported ? (
         <div className="sysmon-placeholder">
           The system monitor is currently available on Linux only.
         </div>
       ) : !snap ? (
         <div className="sysmon-placeholder">{error ?? "Sampling…"}</div>
       ) : (
-        <>
-          <div className="sysmon-header">
-            <div className="sysmon-cores">
-              {coreUsages.length > 0 ? (
-                coreUsages.map((pct, i) => <Meter key={i} label={`${i}`} pct={pct} />)
-              ) : (
-                <Meter label="CPU" pct={aggregateUsage} />
-              )}
+        // One scroll region for the whole body (a single scrollbar): the vitals and
+        // the process table scroll together, the table's sticky thead pinning to this
+        // scroller.
+        <div className="sysmon-scroll">
+          {/* Hardware vitals as two columns: CPU over Memory on the left, the GPU
+              cards on the right (when the machine has one) — separated by a divider —
+              so the GPU's VRAM + Util meters and sensor strip sit beside the CPU. */}
+          <div className="sysmon-vitals">
+            <div className="sysmon-vitals-left">
+              <div className="sysmon-cpu-group">
+                <div className="sysmon-group-title">
+                  CPU
+                  <span className="sysmon-group-sub">{snap.num_cores} cores</span>
+                </div>
+                <div className="sysmon-cores">
+                  {coreUsages.length > 0 ? (
+                    coreUsages.map((pct, i) => <Meter key={i} label={`${i}`} pct={pct} />)
+                  ) : (
+                    <Meter label="all" pct={aggregateUsage} />
+                  )}
+                </div>
+                {/* System-load stats belong with the CPU: load average, task count,
+                    uptime, and CPU package temperature (when a hwmon sensor exposes
+                    one — omitted rather than shown as a fake zero). */}
+                <div className="sysmon-stats">
+                  <span>
+                    load <b>{snap.load_avg.map((n) => n.toFixed(2)).join(" ")}</b>
+                  </span>
+                  <span>
+                    tasks <b>{snap.processes.length}</b>
+                  </span>
+                  <span>
+                    up <b>{formatUptime(snap.uptime_secs)}</b>
+                  </span>
+                  {snap.cpu_temp_c != null && (
+                    <span>
+                      cpu temp <b>{formatTempC(snap.cpu_temp_c)}</b>
+                    </span>
+                  )}
+                </div>
+              </div>
+              <div className="sysmon-mem-group">
+                <div className="sysmon-group-title">Memory</div>
+                <Meter
+                  label="Mem"
+                  pct={memPercent(snap.mem_total_kib - snap.mem_available_kib, snap.mem_total_kib)}
+                  caption={`${formatKib(snap.mem_total_kib - snap.mem_available_kib)} / ${formatKib(
+                    snap.mem_total_kib,
+                  )}`}
+                />
+                <Meter
+                  label="Swp"
+                  pct={
+                    snap.swap_total_kib > 0
+                      ? memPercent(snap.swap_total_kib - snap.swap_free_kib, snap.swap_total_kib)
+                      : 0
+                  }
+                  caption={
+                    snap.swap_total_kib > 0
+                      ? `${formatKib(snap.swap_total_kib - snap.swap_free_kib)} / ${formatKib(
+                          snap.swap_total_kib,
+                        )}`
+                      : "none"
+                  }
+                />
+                <div className="sysmon-stats">
+                  <span>
+                    avail <b>{formatKib(snap.mem_available_kib)}</b>
+                  </span>
+                  <span>
+                    used{" "}
+                    <b>
+                      {memPercent(
+                        snap.mem_total_kib - snap.mem_available_kib,
+                        snap.mem_total_kib,
+                      ).toFixed(0)}
+                      %
+                    </b>
+                  </span>
+                  {snap.swap_total_kib > 0 && (
+                    <span>
+                      swap free <b>{formatKib(snap.swap_free_kib)}</b>
+                    </span>
+                  )}
+                  {/* Hottest DIMM temperature, when the board wires an on-module
+                      sensor (jc42/spd5118); omitted otherwise — most desktops have none. */}
+                  {snap.mem_temp_c != null && (
+                    <span>
+                      mem temp <b>{formatTempC(snap.mem_temp_c)}</b>
+                    </span>
+                  )}
+                </div>
+              </div>
             </div>
-            <div className="sysmon-gauges">
-              <Meter
-                label="Mem"
-                pct={memPercent(snap.mem_total_kib - snap.mem_available_kib, snap.mem_total_kib)}
-                caption={`${formatKib(snap.mem_total_kib - snap.mem_available_kib)} / ${formatKib(
-                  snap.mem_total_kib,
-                )}`}
-              />
-              <Meter
-                label="Swp"
-                pct={
-                  snap.swap_total_kib > 0
-                    ? memPercent(snap.swap_total_kib - snap.swap_free_kib, snap.swap_total_kib)
-                    : 0
-                }
-                caption={
-                  snap.swap_total_kib > 0
-                    ? `${formatKib(snap.swap_total_kib - snap.swap_free_kib)} / ${formatKib(
-                        snap.swap_total_kib,
-                      )}`
-                    : "none"
-                }
-              />
-              <div className="sysmon-stats">
-                <span>
-                  load <b>{snap.load_avg.map((n) => n.toFixed(2)).join(" ")}</b>
-                </span>
-                <span>
-                  tasks <b>{snap.processes.length}</b>
+
+            {/* The GPU detail column: one card per adapter — VRAM + utilization
+                meters and its live sensors — then (local only) the processes using
+                GPU memory, listed once since the sources don't attribute them per
+                card. Rendered only when the machine reports a GPU. */}
+            {(snap.gpus ?? []).length > 0 && (
+              <div className="sysmon-vitals-right">
+                <div className="sysmon-group-title">
+                  GPU
+                  <span className="sysmon-group-sub">
+                    {(snap.gpus ?? []).length}{" "}
+                    {(snap.gpus ?? []).length === 1 ? "adapter" : "adapters"}
+                  </span>
+                </div>
+                {(snap.gpus ?? []).map((gpu, i) => (
+                  <GpuSection key={`${gpu.name}-${i}`} gpu={gpu} />
+                ))}
+                <GpuProcList procs={gpuProcs} />
+              </div>
+            )}
+          </div>
+
+          {/* Logged-in sessions: who is actually logged in on this shared host
+              right now (from `who`), grouped by user with a session count — the
+              same "Logged in" panel the connect-time remote-usage dialog shows,
+              rendered in its exact look. Remote-host only (a local snapshot carries
+              no sessions), and distinct from "By user" below: this lists only users
+              with an interactive login, that one every process owner. Shown for
+              **every** connected host, even when empty — a compute node reached only
+              over the pooled (non-PTY) master has no utmp entry of its own, so `who`
+              is legitimately empty there; the empty note makes that explicit rather
+              than silently dropping the section (which read as "only the primary
+              has this panel"). */}
+          {onHost && (
+            <>
+              <div className="sysmon-proc-head">
+                <button
+                  type="button"
+                  className="sysmon-proc-toggle"
+                  onClick={() => setSessionsOpen((v) => !v)}
+                  aria-expanded={sessionsOpen}
+                  title={sessionsOpen ? "Collapse logged-in sessions" : "Expand logged-in sessions"}
+                >
+                  <span className="sysmon-proc-caret">{sessionsOpen ? "▾" : "▸"}</span>
+                  <span className="sysmon-group-title">Logged in</span>
+                  <UntestedTag />
+                </button>
+                <span className="sysmon-count">
+                  {sessionRows.length} {sessionRows.length === 1 ? "user" : "users"}
                 </span>
-                <span>
-                  up <b>{formatUptime(snap.uptime_secs)}</b>
+              </div>
+              {sessionsOpen &&
+                (hasSessions ? (
+                  <div className="sysmon-users">
+                    <ul className="remote-usage-users">
+                      <li className="remote-usage-users-head" aria-hidden="true">
+                        <span>User</span>
+                        <span>CPU</span>
+                        <span>Sessions</span>
+                        <span>Mem</span>
+                      </li>
+                      {sessionRows.map((s) => (
+                        <li key={s.user}>
+                          <span className="remote-usage-user">{s.user}</span>
+                          <span className="remote-usage-user-cpu">
+                            <UsageLight pct={s.cpu} />
+                            {s.cpu.toFixed(0)}%
+                          </span>
+                          <span className="remote-usage-user-sessions">{s.sessions}</span>
+                          <span className="remote-usage-user-mem">{s.mem.toFixed(0)}%</span>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                ) : (
+                  <div className="sysmon-users sysmon-users-empty">
+                    No interactive logins on this host.
+                  </div>
+                ))}
+            </>
+          )}
+
+          {/* Per-user breakdown: who is loading the machine, summed over the whole
+              process table. Shown for a **remote host only** — it exists to answer
+              "who else is on this shared machine?", the same question the
+              connect-time usage dialog's session stats answer, and it is rendered
+              in that dialog's exact look (the `.remote-usage-users` grid + its
+              traffic-light dot). Local sampling is always just this user, so the
+              panel would be a single trivial row — hidden there. Still gated on the
+              host resolving process owners (Linux only; never Windows/macOS). */}
+          {onHost && hasUserData && (
+            <>
+              <div className="sysmon-proc-head">
+                <button
+                  type="button"
+                  className="sysmon-proc-toggle"
+                  onClick={() => setUsersOpen((v) => !v)}
+                  aria-expanded={usersOpen}
+                  title={usersOpen ? "Collapse per-user usage" : "Expand per-user usage"}
+                >
+                  <span className="sysmon-proc-caret">{usersOpen ? "▾" : "▸"}</span>
+                  <span className="sysmon-group-title">By user</span>
+                  <UntestedTag />
+                </button>
+                <span className="sysmon-count">
+                  {userRows.length} {userRows.length === 1 ? "user" : "users"}
                 </span>
               </div>
-            </div>
+              {usersOpen && (
+                <div className="sysmon-users">
+                  <ul className="remote-usage-users">
+                    <li className="remote-usage-users-head" aria-hidden="true">
+                      <span>User</span>
+                      <span>CPU</span>
+                      <span>Procs</span>
+                      <span>Mem</span>
+                    </li>
+                    {userRows.map((u) => (
+                      <li key={u.user}>
+                        <span className="remote-usage-user">{u.user}</span>
+                        <span className="remote-usage-user-cpu">
+                          <UsageLight pct={u.cpu} />
+                          {u.cpu.toFixed(0)}%
+                        </span>
+                        <span className="remote-usage-user-sessions">{u.count}</span>
+                        <span className="remote-usage-user-mem">{u.mem.toFixed(0)}%</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+            </>
+          )}
+
+          {/* The Processes group: its own titled header, collapsible via the caret
+              so the vitals above can own the pane when the table isn't needed. */}
+          <div className="sysmon-proc-head">
+            <button
+              type="button"
+              className="sysmon-proc-toggle"
+              onClick={() => setProcOpen((v) => !v)}
+              aria-expanded={procOpen}
+              title={procOpen ? "Collapse process list" : "Expand process list"}
+            >
+              <span className="sysmon-proc-caret">{procOpen ? "▾" : "▸"}</span>
+              <span className="sysmon-group-title">Processes</span>
+            </button>
+            <span className="sysmon-count">
+              {rows.length} {rows.length === 1 ? "process" : "processes"}
+            </span>
           </div>
 
+          {procOpen && (
+            <>
           <div className="sysmon-toolbar">
             <input
               className="sysmon-filter"
@@ -304,32 +896,35 @@ export function SystemMonitorPane({ visible }: Props) {
               onChange={(e) => setFilter(e.target.value)}
               spellCheck={false}
             />
-            <span className="sysmon-count">
-              {rows.length} {rows.length === 1 ? "process" : "processes"}
-            </span>
           </div>
 
           <div className="sysmon-table-wrap">
             <table className="sysmon-table">
               <thead>
                 <tr>
-                  <th className="num" onClick={() => toggleSort("pid")}>
+                  <th className={`num ${sortedCls("pid") ?? ""}`} onClick={() => toggleSort("pid")}>
                     PID{arrow("pid")}
                   </th>
-                  <th className="num" onClick={() => toggleSort("cpu")}>
+                  <th className={`num ${sortedCls("cpu") ?? ""}`} onClick={() => toggleSort("cpu")}>
                     CPU%{arrow("cpu")}
                   </th>
-                  <th className="num" onClick={() => toggleSort("mem")}>
+                  <th className={`num ${sortedCls("mem") ?? ""}`} onClick={() => toggleSort("mem")}>
                     MEM%{arrow("mem")}
                   </th>
-                  <th className="num" onClick={() => toggleSort("rss_kib")}>
+                  <th
+                    className={`num ${sortedCls("rss_kib") ?? ""}`}
+                    onClick={() => toggleSort("rss_kib")}
+                  >
                     RSS{arrow("rss_kib")}
                   </th>
-                  <th className="num" onClick={() => toggleSort("threads")}>
+                  <th
+                    className={`num ${sortedCls("threads") ?? ""}`}
+                    onClick={() => toggleSort("threads")}
+                  >
                     THR{arrow("threads")}
                   </th>
                   <th className="st">S</th>
-                  <th className="cmd" onClick={() => toggleSort("comm")}>
+                  <th className={`cmd ${sortedCls("comm") ?? ""}`} onClick={() => toggleSort("comm")}>
                     Command{arrow("comm")}
                   </th>
                 </tr>
@@ -337,17 +932,23 @@ export function SystemMonitorPane({ visible }: Props) {
               <tbody>
                 {rows.map((r) => (
                   <tr key={r.pid}>
-                    <td className="num">{r.pid}</td>
-                    <td className="num" style={{ color: toneFor(Math.min(100, r.cpu)) }}>
+                    <td className={`num ${sortedCls("pid") ?? ""}`}>{r.pid}</td>
+                    <td
+                      className={`num ${sortedCls("cpu") ?? ""}`}
+                      style={{ color: toneFor(Math.min(100, r.cpu)) }}
+                    >
                       {r.cpu.toFixed(1)}
                     </td>
-                    <td className="num" style={{ color: toneFor(r.mem) }}>
+                    <td
+                      className={`num ${sortedCls("mem") ?? ""}`}
+                      style={{ color: toneFor(r.mem) }}
+                    >
                       {r.mem.toFixed(1)}
                     </td>
-                    <td className="num">{formatKib(r.rss_kib)}</td>
-                    <td className="num">{r.threads}</td>
+                    <td className={`num ${sortedCls("rss_kib") ?? ""}`}>{formatKib(r.rss_kib)}</td>
+                    <td className={`num ${sortedCls("threads") ?? ""}`}>{r.threads}</td>
                     <td className="st">{r.state}</td>
-                    <td className="cmd" title={r.cmdline}>
+                    <td className={`cmd ${sortedCls("comm") ?? ""}`} title={r.cmdline}>
                       {r.cmdline}
                     </td>
                   </tr>
@@ -355,7 +956,9 @@ export function SystemMonitorPane({ visible }: Props) {
               </tbody>
             </table>
           </div>
-        </>
+            </>
+          )}
+        </div>
       )}
     </div>
   );
@@ -378,26 +981,105 @@ const SYSMON_CSS = `
   padding: 24px;
   text-align: center;
 }
-.sysmon-header {
+.sysmon-source {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--border-color);
+  flex: 0 0 auto;
+}
+.sysmon-source-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--control-bg);
+  border: 1px solid var(--control-border);
+  border-radius: var(--radius, 4px);
+  color: var(--text-secondary);
+  padding: 3px 12px;
+  font-size: 12px;
+  cursor: pointer;
+  max-width: 320px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sysmon-source-btn:hover {
+  background: var(--control-hover-bg);
+}
+.sysmon-source-btn.active {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--accent-contrast, #fff);
+}
+/* The single scroll region: the vitals and the process table scroll together under
+   ONE scrollbar. The table's sticky thead pins to this scroller. */
+.sysmon-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+/* The vitals region: a left column (CPU over Memory) and a right column (GPU),
+   sitting above the process table. */
+.sysmon-vitals {
   display: flex;
   gap: 18px;
   padding: 10px 12px;
   border-bottom: 1px solid var(--border-color);
   flex-wrap: wrap;
+  align-items: flex-start;
 }
-.sysmon-cores {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-  gap: 2px 12px;
-  flex: 1 1 320px;
-  min-width: 220px;
+.sysmon-vitals-left {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  flex: 1 1 340px;
+  min-width: 240px;
+}
+/* The GPU column, divided from the CPU/Memory column. The border reads as a
+   horizontal rule between them when the pane is narrow enough to wrap the GPU
+   below, and as a leading edge beside them when they sit side by side. */
+.sysmon-vitals-right {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  flex: 1 1 300px;
+  min-width: 260px;
+  border-top: 1px solid var(--border-color);
+  padding-top: 10px;
 }
-.sysmon-gauges {
+/* CPU, Memory, and GPU each read as a titled block so the domains are never
+   mistaken for one undifferentiated wall of meters. */
+.sysmon-group-title {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+}
+.sysmon-group-sub {
+  font-size: 10px;
+  font-weight: 400;
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--text-muted);
+}
+/* CPU + Memory stack vertically inside the left column, so neither carries a
+   horizontal flex basis — they take the column's full width. */
+.sysmon-cpu-group,
+.sysmon-mem-group {
   display: flex;
   flex-direction: column;
   gap: 4px;
-  min-width: 220px;
-  flex: 1 1 220px;
+}
+.sysmon-cores {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 2px 12px;
 }
 .sysmon-meter {
   display: flex;
@@ -439,12 +1121,115 @@ const SYSMON_CSS = `
   color: var(--text-primary);
   font-weight: 600;
 }
+/* One card per adapter, stacked full-width down the right column. */
+.sysmon-gpu {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  flex: 0 0 auto;
+  padding: 8px 10px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius, 4px);
+  background: color-mix(in srgb, var(--text-primary) 3%, transparent);
+}
+.sysmon-gpu-head {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.sysmon-gpu-name {
+  font-weight: 600;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sysmon-gpu-meta {
+  color: var(--text-muted);
+  font-size: 11px;
+}
+.sysmon-gpu-meters {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.sysmon-gpu-sensors {
+  margin-top: 0;
+  gap: 12px;
+}
+.sysmon-sensor-na {
+  color: var(--text-muted);
+  font-weight: 400;
+}
+.sysmon-gpu-procs {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 0 0 auto;
+  padding: 8px 10px;
+}
+.sysmon-gpu-procs-head {
+  color: var(--text-secondary);
+  font-weight: 600;
+  margin-bottom: 3px;
+}
+.sysmon-gpu-proc {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  font-variant-numeric: tabular-nums;
+}
+.sysmon-gpu-proc-mem {
+  min-width: 62px;
+  text-align: right;
+  color: var(--text-primary);
+  font-weight: 600;
+}
+.sysmon-gpu-proc-pid {
+  min-width: 52px;
+  text-align: right;
+  color: var(--text-muted);
+}
+.sysmon-gpu-proc-name {
+  color: var(--text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* The Processes group header: caret toggle + title on the left, count on the right. */
+.sysmon-proc-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 8px 12px;
+}
+.sysmon-proc-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: inherit;
+}
+.sysmon-proc-caret {
+  color: var(--text-muted);
+  font-size: 10px;
+  width: 12px;
+  text-align: center;
+}
+.sysmon-proc-toggle:hover .sysmon-group-title,
+.sysmon-proc-toggle:hover .sysmon-proc-caret {
+  color: var(--text-primary);
+}
 .sysmon-toolbar {
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 6px 12px;
-  border-bottom: 1px solid var(--border-color);
+  padding: 0 12px 6px;
+  flex: 0 0 auto;
 }
 .sysmon-filter {
   flex: 1;
@@ -465,8 +1250,8 @@ const SYSMON_CSS = `
   font-variant-numeric: tabular-nums;
 }
 .sysmon-table-wrap {
-  flex: 1;
-  overflow: auto;
+  /* Natural height — the whole body scrolls in the shared .sysmon-scroll region,
+     and the table's sticky thead pins to that scroller. */
 }
 .sysmon-table {
   width: 100%;
@@ -477,7 +1262,10 @@ const SYSMON_CSS = `
   position: sticky;
   top: 0;
   z-index: 1;
-  background: var(--bg-header);
+  /* The SOLID header tone, not --bg-header: that is a gradient in the fancy
+     themes, so each th would repaint the whole ramp and the .sorted color-mix
+     below would be invalid — i.e. a transparent sticky header. */
+  background: var(--bg-header-solid, var(--bg-panel));
   color: var(--text-secondary);
   text-align: left;
   font-weight: 600;
@@ -487,6 +1275,20 @@ const SYSMON_CSS = `
   border-bottom: 1px solid var(--border-color);
   user-select: none;
 }
+/* The active sort column reads as a distinct vertical band, not just a tinted
+   header: a strong accent header and an accent-tinted column body, both bracketed
+   by 2px accent edge-lines drawn with an inset box-shadow (so the band gains no
+   width and the columns stay aligned). */
+.sysmon-table th.sorted {
+  background: color-mix(in srgb, var(--accent) 30%, var(--bg-header-solid));
+  color: var(--text-primary);
+  font-weight: 700;
+  box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent);
+}
+.sysmon-table td.sorted {
+  background: color-mix(in srgb, var(--accent) 9%, var(--bg-panel));
+  box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent);
+}
 .sysmon-table th.num,
 .sysmon-table td.num {
   text-align: right;
@@ -512,4 +1314,14 @@ const SYSMON_CSS = `
 .sysmon-table tbody tr:hover {
   background: var(--control-hover-bg);
 }
+/* The per-user breakdown borrows the remote-usage dialog's .remote-usage-users
+   grid wholesale (defined in themes.css), so this only positions that panel —
+   an indented block below the vitals, not the full-width process scroller. */
+.sysmon-users {
+  padding: 0 12px 8px;
+}
+.sysmon-users-empty {
+  color: var(--text-muted);
+  font-style: italic;
+}
 `;
diff --git a/src/components/projects/CategoryEditor.tsx b/src/components/projects/CategoryEditor.tsx
index 228d079..3440c63 100644
--- a/src/components/projects/CategoryEditor.tsx
+++ b/src/components/projects/CategoryEditor.tsx
@@ -73,13 +73,14 @@ export function CategoryEditor({
   return createPortal(
     <div className="modal-backdrop" onMouseDown={onClose}>
       <div
-        className="project-dialog category-editor"
+        className="project-dialog dialog-framed category-editor"
         onMouseDown={(e) => e.stopPropagation()}
       >
         <div className="settings-title-row">
           <h2>{project.name} — Categories</h2>
           <button type="button" className="dialog-close-btn" onClick={onClose}>×</button>
         </div>
+        <div className="dialog-scroll">
         <div className="project-dialog-path">
           Tag this project to color and group it in the project cloud and the pill
           bar. A project can carry several categories; the first is its primary color.
@@ -134,6 +135,7 @@ export function CategoryEditor({
             {saving ? "Saving…" : "Save"}
           </button>
         </div>
+        </div>
       </div>
     </div>,
     document.body,
diff --git a/src/components/projects/ExtendToRemoteDialog.tsx b/src/components/projects/ExtendToRemoteDialog.tsx
index 6c68005..7bea1c2 100644
--- a/src/components/projects/ExtendToRemoteDialog.tsx
+++ b/src/components/projects/ExtendToRemoteDialog.tsx
@@ -6,6 +6,8 @@ import { useRemoteStatusStore } from "../../stores/remoteStatus";
 import { joinRemotePath, sanitizeName } from "./scaffold";
 import { useRemoteSession, type RemoteStep } from "./useRemoteSession";
 import { RemoteProjectSection } from "./RemoteProjectSection";
+import { targetLabel } from "../header/MachinesIndicator";
+import type { DroppedGlobalMachine } from "../../stores/remoteMachines";
 
 /**
  * "Extend to remote…" modal for an existing **local** project. It attaches a
@@ -18,12 +20,22 @@ import { RemoteProjectSection } from "./RemoteProjectSection";
  * uses — `useRemoteSession` (state/effects) + `RemoteProjectSection` (the SSH /
  * OpenVPN / folder-browser UI) — so there's no duplicated remote logic here. The
  * project name is fixed, so the "details" step is just a confirm summary.
+ *
+ * `initialMachine` seeds the SSH address from a global machine
+ * (`MachinesIndicator`) dropped onto this (local-only) project's pill — this
+ * dialog becomes the "make this machine the project's primary" flow. It only
+ * prefills the address field; the user still authenticates here (the global
+ * machine's own connection is a separate pooled session keyed by its own id,
+ * not by this project), though a saved password for that host target is
+ * picked up automatically since the keychain is keyed by host, not project.
  */
 export function ExtendToRemoteDialog({
   project,
+  initialMachine,
   onClose,
 }: {
   project: ProjectEntry;
+  initialMachine?: DroppedGlobalMachine;
   onClose: () => void;
 }) {
   // The remote path leaf and local-mirror-relative name both use the project's
@@ -43,6 +55,8 @@ export function ExtendToRemoteDialog({
     setRemoteChosenPath,
     remoteChosenPath,
     remoteReady,
+    remotePassword,
+    onSshAddressChange,
     buildRemoteSpec,
   } = remote;
 
@@ -70,8 +84,11 @@ export function ExtendToRemoteDialog({
 
   // This dialog is always remote — enable remote mode on mount so the tooling
   // probe + recent addresses/configs load and RemoteProjectSection renders.
+  // Dropped from a global machine: also seed the address field so the user
+  // only has to authenticate, not re-type the host.
   useEffect(() => {
     if (!isRemoteProject) toggleRemoteProject(true);
+    if (initialMachine) onSshAddressChange(targetLabel(initialMachine));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -93,19 +110,39 @@ export function ExtendToRemoteDialog({
     try {
       await extendProjectToRemote(project.id, spec);
       // Reaching this step required a live, authenticated SSH session (the flow
-      // browsed/created the remote folder over it), so the host's ControlMaster
-      // is already up. Carry that straight over to the now-remote project rather
-      // than dropping it to a "Connect" prompt: open its pooled SSH/SFTP channel
-      // (rides the existing master, password-less) and light the SSH lamp green.
-      // Fire-and-forget — the lamp reflects connecting → connected as it resolves.
+      // browsed/created the remote folder over it). Carry that straight over to the
+      // now-remote project rather than dropping it to a "Connect" prompt: open its
+      // pooled SSH/SFTP channel and light the SSH lamp green. Fire-and-forget — the
+      // lamp reflects connecting → connected as it resolves.
+      //
+      // Hand it the credential the dialog authenticated with (empty for a key-auth
+      // host). Riding the still-live ControlMaster password-less would connect too,
+      // but the backend reads a password-less connect with nothing in the keychain as
+      // *key* auth and records `key_auth: true` — on a password host that is a lie the
+      // project keeps, and auto-connect later believes.
+      // A single attempt right after `remote_mkdir_p` can lose to a host session
+      // that hasn't finished settling yet — mirrors `ensureRemotePool`'s retry
+      // cadence (used on ordinary project activation) instead of parking the lamp
+      // on "error" forever after one transient hiccup, with the live ControlMaster
+      // underneath never actually going away.
       const status = useRemoteStatusStore.getState();
       status.setSsh(project.id, "connecting");
-      void invoke("remote_connect", { projectId: project.id, password: null })
-        .then(() => useRemoteStatusStore.getState().setSsh(project.id, "connected"))
-        .catch((err) => {
-          console.warn("remote_connect after extend failed", err);
-          useRemoteStatusStore.getState().setSsh(project.id, "error");
-        });
+      const connectPassword = remotePassword || null;
+      let connectAttempts = 0;
+      const maxConnectAttempts = 6;
+      const tryConnect = () => {
+        void invoke("remote_connect", { projectId: project.id, password: connectPassword })
+          .then(() => useRemoteStatusStore.getState().setSsh(project.id, "connected"))
+          .catch((err) => {
+            if (++connectAttempts >= maxConnectAttempts) {
+              console.warn("remote_connect after extend failed", err);
+              useRemoteStatusStore.getState().setSsh(project.id, "error");
+              return;
+            }
+            setTimeout(tryConnect, 4000);
+          });
+      };
+      tryConnect();
       onClose();
     } catch (e) {
       setError(String(e));
@@ -119,12 +156,25 @@ export function ExtendToRemoteDialog({
 
   return (
     <div className="modal-backdrop" onMouseDown={onClose}>
-      <div className="project-dialog" onMouseDown={(e) => e.stopPropagation()}>
-        <h2>Extend “{project.name}” to remote</h2>
+      <div className="project-dialog dialog-framed" onMouseDown={(e) => e.stopPropagation()}>
+        <div className="settings-title-row">
+          <h2>Extend “{project.name}” to remote</h2>
+          <button type="button" className="dialog-close-btn" onClick={onClose}>×</button>
+        </div>
+        <div className="dialog-scroll">
         <p className="ssh-optional-hint">
-          Attach a remote SSH host to this project. The empty remote folder is
-          created on the host; your existing local files become the synced working
-          copy and stay put. Nothing is uploaded until you push it manually.
+          {initialMachine ? (
+            <>
+              Attach <strong>{initialMachine.label || initialMachine.host}</strong> to this
+              project as its primary remote host. The empty remote folder is created on the
+              host; your existing local files become the synced working copy and stay put.
+              Nothing is uploaded until you push it manually.
+            </>
+          ) : (
+            "Attach a remote SSH host to this project. The empty remote folder is " +
+            "created on the host; your existing local files become the synced working " +
+            "copy and stay put. Nothing is uploaded until you push it manually."
+          )}
         </p>
 
         <RemoteProjectSection
@@ -179,6 +229,7 @@ export function ExtendToRemoteDialog({
             </button>
           )}
         </div>
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/projects/HpcPipelineWizard.tsx b/src/components/projects/HpcPipelineWizard.tsx
new file mode 100644
index 0000000..a5d2735
--- /dev/null
+++ b/src/components/projects/HpcPipelineWizard.tsx
@@ -0,0 +1,465 @@
+/**
+ * The guided **HPC pipeline wizard** (`docs/quirky-knitting-umbrella` plan Phase B).
+ *
+ * A newcomer to a SLURM cluster has to log in, create a project on the host, get
+ * their data there, write a batch script, submit it, and tail the log — a lot of
+ * steps, each easy to get subtly wrong. This stepper walks the whole path **by
+ * composing the existing flows** rather than reimplementing them:
+ *
+ *  1. **Login** — `RemoteProjectSection` + `useRemoteSession` (SSH connect + optional
+ *     OpenVPN + the live remote folder browser).
+ *  2. **Project** — a name + local-mirror location → `create_project` (git-backed
+ *     remote ⇒ lockstep on by default) → the project is created and activated.
+ *  3. **Load data** (skippable) — pick local files → stream them to the host over
+ *     the pooled SFTP (`remote_upload_file`).
+ *  4. **Run job** — edit a starter `.slurm`'s `#SBATCH` directives (the Phase-A
+ *     splice helpers), write it to the host, and **Submit** it (Phase-A
+ *     `submitSlurmJob`, which opens a log tab).
+ *  5. **Watch** — the log tab is already tailing; point at the Jobs view (⚙) and
+ *     finish.
+ *
+ * Everything new is `untested` until QA'd on a real cluster.
+ */
+
+import { useEffect, useMemo, useState } from "react";
+import { invoke } from "@tauri-apps/api/core";
+import { open } from "@tauri-apps/plugin-dialog";
+import { RemoteProjectSection } from "./RemoteProjectSection";
+import { useRemoteSession } from "./useRemoteSession";
+import { useHpcPipelineStore } from "../../stores/hpcPipeline";
+import { useProjectsStore, stashRemotePassword } from "../../stores/projects";
+import { useGlobalMachinesStore } from "../../stores/globalMachines";
+import { resolveProjectDirectory, type ProjectEntry } from "../../types";
+import { basename } from "../../lib/paths";
+import { writeFileText } from "../embed/fileAccess";
+import { UntestedTag } from "../common/UntestedTag";
+import {
+  parseSbatchDirectives,
+  directiveValue,
+  spliceDirective,
+  submitSlurmJob,
+  COMMON_SBATCH_KEYS,
+} from "../../lib/slurm";
+
+type Step = "login" | "project" | "data" | "run" | "watch";
+
+/** Human labels for the `#SBATCH` keys the run step surfaces. */
+const SBATCH_LABELS: Record<string, string> = {
+  "job-name": "Job name",
+  partition: "Partition",
+  time: "Time",
+  nodes: "Nodes",
+  ntasks: "Tasks",
+  "cpus-per-task": "CPUs/task",
+  mem: "Memory",
+  gres: "GRES",
+  output: "Output",
+};
+
+/** A sensible starter batch script. Edit the `#SBATCH` directives to match your
+ *  cluster's partitions/limits and your job's needs. */
+const STARTER_SLURM = `#!/bin/bash
+#SBATCH --job-name=myjob
+#SBATCH --account=<account>
+#SBATCH --partition=<partition>
+#SBATCH --time=01:00:00
+#SBATCH --nodes=1
+#SBATCH --ntasks=1
+#SBATCH --cpus-per-task=4
+#SBATCH --mem=8G
+#SBATCH --output=slurm-%j.out
+
+# Runs on a compute node via SLURM — never the login node.
+# Set --account to your working group's allocation: many clusters reject a job
+# with no account. Match --partition and the module name below to
+# your cluster; check its usage policy (e.g. any acknowledgement it asks for).
+
+module load Python
+python --version
+echo "Replace this with your job."
+`;
+
+const STARTER_NAME = "job.slurm";
+
+/** Mounted once in AppShell; renders the wizard when the store says it's open. */
+export function HpcPipelineWizardHost() {
+  const open = useHpcPipelineStore((s) => s.open);
+  const close = useHpcPipelineStore((s) => s.close);
+  if (!open) return null;
+  return <HpcPipelineWizard onClose={close} />;
+}
+
+function HpcPipelineWizard({ onClose }: { onClose: () => void }) {
+  const addProject = useProjectsStore((s) => s.addProject);
+  const registerGlobalMachine = useGlobalMachinesStore((s) => s.register);
+  const remote = useRemoteSession({ kind: "new" });
+  const {
+    isRemoteProject,
+    isRemote,
+    remoteConn,
+    toggleRemoteProject,
+    remoteBrowsePath,
+    remoteChosenPath,
+    setRemoteChosenPath,
+    rememberChosenPath,
+    remotePassword,
+    buildRemoteSpec,
+  } = remote;
+
+  // Once the cluster login goes live, surface that host in the header's global
+  // machines list too — it's now a project-free, already-authenticated
+  // connection the user can reuse across projects (or drag onto one as a
+  // compute host). Registration is idempotent by target and best-effort, so it
+  // never blocks the wizard.
+  useEffect(() => {
+    if (!isRemote || !remoteConn) return;
+    void registerGlobalMachine({
+      user: remoteConn.user ?? undefined,
+      host: remoteConn.host,
+      port: remoteConn.port ?? undefined,
+    });
+  }, [isRemote, remoteConn, registerGlobalMachine]);
+
+  const [step, setStep] = useState<Step>("login");
+  const [projectsRoot, setProjectsRoot] = useState("");
+  const [mirrorParent, setMirrorParent] = useState("");
+  const [name, setName] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const [created, setCreated] = useState<ProjectEntry | null>(null);
+
+  // Force remote on for the whole wizard — an HPC project is remote by definition.
+  useEffect(() => {
+    if (!isRemoteProject) toggleRemoteProject(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Seed the local roots from the backend defaults (mirror of ProjectDialog).
+  useEffect(() => {
+    invoke<string>("projects_root_dir").then(setProjectsRoot).catch(() => {});
+    invoke<string>("remote_mirror_root_dir")
+      .then((dir) => setMirrorParent((cur) => cur || dir.replace(/\/+$/, "")))
+      .catch(() => {});
+  }, []);
+
+  const safeName = useMemo(
+    () => name.trim().toLowerCase().replace(/[^a-z0-9_-]+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, ""),
+    [name],
+  );
+
+  // Commit the browsed remote folder and advance — mirrors ProjectDialog's
+  // `useThisRemoteFolder`.
+  const useThisFolder = () => {
+    const chosen = remoteBrowsePath || "/";
+    setRemoteChosenPath(chosen);
+    rememberChosenPath(chosen);
+    setStep("project");
+  };
+
+  const chooseMirror = async () => {
+    const picked = await open({ directory: true, multiple: false, defaultPath: mirrorParent || undefined });
+    if (typeof picked === "string") setMirrorParent(picked.replace(/\/+$/, ""));
+  };
+
+  const canCreate = Boolean(name.trim() && safeName && remoteChosenPath && mirrorParent.trim());
+
+  const createProject = async () => {
+    setError("");
+    setBusy(true);
+    try {
+      const remoteSpec = buildRemoteSpec(safeName);
+      const targetDir = projectsRoot ? `${projectsRoot}/${safeName}` : "";
+      const project = await invoke<ProjectEntry>("create_project", {
+        req: {
+          name,
+          directory: targetDir,
+          description: "",
+          gitType: "local",
+          skipScaffold: false,
+          remote: remoteSpec,
+          mirrorParent,
+        },
+      });
+      // Hand the just-authenticated credential to the project's first pooled
+      // connect (single-use, never persisted — see stashRemotePassword).
+      if (remotePassword) stashRemotePassword(project.id, remotePassword);
+      rememberChosenPath();
+      await addProject(project); // adds + activates (which connects)
+      setCreated(project);
+      setStep("data");
+    } catch (err) {
+      setError(String(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="modal-backdrop" onMouseDown={onClose}>
+      <div className="project-dialog dialog-framed hpc-wizard" onMouseDown={(e) => e.stopPropagation()}>
+        <div className="settings-title-row">
+          <h2>
+            HPC pipeline <UntestedTag />
+          </h2>
+          <button type="button" className="dialog-close-btn" onClick={onClose}>×</button>
+        </div>
+        <div className="dialog-scroll">
+        <StepTrail step={step} />
+        {error && <div className="project-dialog-error">{error}</div>}
+
+        {step === "login" && (
+          <>
+            <p className="ssh-optional-hint">
+              Log in to your cluster. If it's only reachable through your
+              institution's VPN, bring up the OpenVPN tunnel first (in the SSH
+              section below).
+            </p>
+            <RemoteProjectSection
+              kind="new"
+              safeName={safeName}
+              onClose={onClose}
+              onUseThisFolder={useThisFolder}
+              remote={remote}
+            />
+          </>
+        )}
+
+        {step === "project" && (
+          <>
+            <label>
+              Project name
+              <input
+                autoFocus
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="my-experiment"
+              />
+            </label>
+            <label>
+              Local location (synced mirror)
+              <div className="folder-picker-row">
+                <span title={mirrorParent}>{mirrorParent || "No folder selected"}</span>
+                <button type="button" onClick={chooseMirror}>Browse...</button>
+              </div>
+              <span className="ssh-optional-hint">
+                On the host: {remoteChosenPath}/{safeName || "<name>"}
+              </span>
+            </label>
+            <div className="project-dialog-actions">
+              <button type="button" onClick={() => setStep("login")}>Back</button>
+              <button type="button" disabled={!canCreate || busy} onClick={() => void createProject()}>
+                {busy ? "Creating…" : "Create project"}
+              </button>
+            </div>
+          </>
+        )}
+
+        {step === "data" && created && (
+          <DataStep
+            project={created}
+            onBack={() => setStep("project")}
+            onNext={() => setStep("run")}
+          />
+        )}
+
+        {step === "run" && created && (
+          <RunStep
+            project={created}
+            onBack={() => setStep("data")}
+            onSubmitted={() => setStep("watch")}
+          />
+        )}
+
+        {step === "watch" && (
+          <>
+            <p>
+              Your job was submitted and a log tab is now tailing its output. Open the
+              Jobs view (the <strong>⚙</strong> toggle in the file panel) to see it
+              queue, run, and finish — with per-job <em>Watch</em> and <em>Cancel</em>.
+            </p>
+            <div className="project-dialog-actions">
+              <button type="button" onClick={onClose}>Done</button>
+            </div>
+          </>
+        )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** The step breadcrumb across the top of the wizard. */
+function StepTrail({ step }: { step: Step }) {
+  const steps: { id: Step; label: string }[] = [
+    { id: "login", label: "Login" },
+    { id: "project", label: "Project" },
+    { id: "data", label: "Load data" },
+    { id: "run", label: "Run job" },
+    { id: "watch", label: "Watch" },
+  ];
+  const idx = steps.findIndex((s) => s.id === step);
+  return (
+    <div className="hpc-wizard-trail">
+      {steps.map((s, i) => (
+        <span
+          key={s.id}
+          className={`hpc-wizard-trail-step${i === idx ? " active" : ""}${i < idx ? " done" : ""}`}
+        >
+          {i + 1}. {s.label}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+/** Step 3: upload local files to the host over the pooled SFTP. Skippable. */
+function DataStep({
+  project,
+  onBack,
+  onNext,
+}: {
+  project: ProjectEntry;
+  onBack: () => void;
+  onNext: () => void;
+}) {
+  const [uploaded, setUploaded] = useState<string[]>([]);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+
+  const addFiles = async () => {
+    setError("");
+    const picked = await open({ multiple: true, directory: false });
+    const paths = Array.isArray(picked) ? picked : picked ? [picked] : [];
+    if (paths.length === 0) return;
+    setBusy(true);
+    try {
+      for (const p of paths) {
+        const name = basename(p);
+        await invoke("remote_upload_file", {
+          projectId: project.id,
+          localPath: p,
+          destRel: name,
+        });
+        setUploaded((u) => [...u, name]);
+      }
+    } catch (err) {
+      setError(String(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <>
+      <p className="ssh-optional-hint">
+        Optionally upload input files to the project on the host. Large trees are
+        better marked auto-sync in the file panel; this is for a few files.
+      </p>
+      {error && <div className="project-dialog-error">{error}</div>}
+      <div className="folder-picker-row">
+        <button type="button" disabled={busy} onClick={() => void addFiles()}>
+          {busy ? "Uploading…" : "Add files…"}
+        </button>
+      </div>
+      {uploaded.length > 0 && (
+        <ul className="hpc-wizard-uploaded">
+          {uploaded.map((f) => (
+            <li key={f}>✓ {f}</li>
+          ))}
+        </ul>
+      )}
+      <div className="project-dialog-actions">
+        <button type="button" onClick={onBack}>Back</button>
+        <button type="button" onClick={onNext}>
+          {uploaded.length ? "Next" : "Skip"}
+        </button>
+      </div>
+    </>
+  );
+}
+
+/** Step 4: edit a starter `.slurm`'s directives, write it to the host, submit. */
+function RunStep({
+  project,
+  onBack,
+  onSubmitted,
+}: {
+  project: ProjectEntry;
+  onBack: () => void;
+  onSubmitted: () => void;
+}) {
+  const [script, setScript] = useState(STARTER_SLURM);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const fields = useMemo(() => parseSbatchDirectives(script), [script]);
+  const [edits, setEdits] = useState<Record<string, string>>({});
+
+  const remoteRoot = project.remote?.remote_path ?? "";
+  const scriptPath = `${remoteRoot.replace(/\/+$/, "")}/${STARTER_NAME}`;
+  const projectDir = resolveProjectDirectory(project);
+
+  const valueFor = (key: string) => edits[key] ?? directiveValue(fields, key);
+  const commit = (key: string) => {
+    const v = edits[key];
+    if (v === undefined) return;
+    setScript((s) => spliceDirective(s, key, v));
+  };
+
+  const submit = async () => {
+    setError("");
+    setBusy(true);
+    try {
+      // Write the (possibly edited) script to the host, then submit it.
+      await writeFileText(scriptPath, script, project.id);
+      await submitSlurmJob({
+        file: scriptPath,
+        projectDir,
+        cwd: projectDir,
+        projectId: project.id,
+        scope: project.id,
+        isRemote: true,
+      });
+      onSubmitted();
+    } catch (err) {
+      setError(String(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <>
+      <p className="ssh-optional-hint">
+        A starter batch script (<code>{STARTER_NAME}</code>) will be written to the
+        project. Adjust its resources, then submit — it runs on a compute node.
+      </p>
+      {error && <div className="project-dialog-error">{error}</div>}
+      <div className="slurm-directive-grid">
+        {COMMON_SBATCH_KEYS.map((key) => (
+          <label key={key} className="slurm-directive-field">
+            <span className="slurm-directive-key">{SBATCH_LABELS[key] ?? key}</span>
+            <input
+              className="file-viewer-run-args-input"
+              value={valueFor(key)}
+              spellCheck={false}
+              onChange={(e) => setEdits((m) => ({ ...m, [key]: e.target.value }))}
+              onBlur={() => commit(key)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  commit(key);
+                }
+              }}
+            />
+          </label>
+        ))}
+      </div>
+      <div className="project-dialog-actions">
+        <button type="button" onClick={onBack}>Back</button>
+        <button type="button" disabled={busy} onClick={() => void submit()}>
+          {busy ? "Submitting…" : "⏫ Submit job"}
+        </button>
+      </div>
+    </>
+  );
+}
diff --git a/src/components/projects/ProjectDialog.tsx b/src/components/projects/ProjectDialog.tsx
index e9c5a70..3c77348 100644
--- a/src/components/projects/ProjectDialog.tsx
+++ b/src/components/projects/ProjectDialog.tsx
@@ -15,20 +15,29 @@ import {
   buildDescriptionFillPrompt,
   buildScaffoldFillPrompt,
   collectScaffoldAgentFills,
+  isCloneUrl,
   joinRemotePath,
+  repoNameFromCloneUrl,
   sanitizeName,
   type ScaffoldPreviewItem,
 } from "./scaffold";
 import { useRemoteSession, type RemoteStep } from "./useRemoteSession";
 import { RemoteProjectSection } from "./RemoteProjectSection";
+import { stashRemotePassword } from "../../stores/projects";
 import { Dropdown } from "../common/Dropdown";
 
+/** Where an import's files come from: a folder already on this machine, or a
+ *  repository cloned from GitHub/GitLab (any git URL). */
+export type ImportSource = "folder" | "git";
+
 export function ProjectDialog({
   kind,
+  initialImportSource = "folder",
   onClose,
   onProject,
 }: {
   kind: "new" | "import";
+  initialImportSource?: ImportSource;
   onClose: () => void;
   onProject: (project: ProjectEntry) => void | Promise<void>;
 }) {
@@ -51,6 +60,10 @@ export function ProjectDialog({
   const [mode, setMode] = useState("keep");
   const [skipScaffold, setSkipScaffold] = useState(false);
   const [sourceDir, setSourceDir] = useState("");
+  // Import source: an existing local folder, or a clone from GitHub/GitLab.
+  const [importSource, setImportSource] = useState<ImportSource>(initialImportSource);
+  const [repoUrl, setRepoUrl] = useState("");
+  const [cloning, setCloning] = useState(false);
   const [scaffoldPreview, setScaffoldPreview] = useState<ScaffoldPreviewItem[]>([]);
   const [scaffoldFillModes, setScaffoldFillModes] = useState<Record<string, string>>({});
   const [scaffoldError, setScaffoldError] = useState("");
@@ -70,6 +83,7 @@ export function ProjectDialog({
     remoteChosenPath,
     setRemoteChosenPath,
     rememberChosenPath,
+    remotePassword,
     toggleRemoteProject,
     buildRemoteSpec,
   } = remote;
@@ -95,12 +109,36 @@ export function ProjectDialog({
         : false;
   const safeName = sanitizeName(name);
   const targetDir = safeName && projectsRoot ? `${projectsRoot}/${safeName}` : "";
+  // Cloning from a hosting service. A remote (SSH) project's tree lives on the
+  // host and is never cloned locally, so the two are mutually exclusive.
+  const isCloneImport = kind === "import" && !isRemoteProject && importSource === "git";
   // "Push to GitHub/GitLab" was chosen, but no Eldrun connection is set up yet.
   // Here "remote" is the git push target (a hosting service), distinct from the
   // SSH host the files may live on — see the git-hosting hint below.
   const wantsRemoteGit = gitType === "remote-private" || gitType === "remote-public";
   const gitConnected = gitToken.trim() !== "";
-  const needsGitConnection = wantsRemoteGit && !gitConnected;
+  // A clone is exempt: the gate exists because publishing a *new* repo needs a
+  // token, and a cloned repo is already hosted — it has an origin to push back
+  // to. (The clone itself only needs the token when the repo is private, which
+  // the URL field's own hint covers.)
+  const needsGitConnection = wantsRemoteGit && !gitConnected && !isCloneImport;
+
+  // Switching the import source resets the git-hosting default to the one that
+  // fits it: a clone comes from a host, a plain folder does not. Both remain
+  // freely overridable in the dropdown below.
+  const changeImportSource = (next: ImportSource) => {
+    setImportSource(next);
+    setGitType(next === "git" ? "remote-private" : "local");
+  };
+
+  const setRepoUrlAndName = (url: string) => {
+    setRepoUrl(url);
+    // Pre-fill the project name from the repo's own name, but only while the
+    // user hasn't typed one of their own (and only while it still matches what
+    // the previous URL suggested, so backspacing the URL keeps updating it).
+    const suggested = repoNameFromCloneUrl(url);
+    setName((cur) => (cur === "" || cur === repoNameFromCloneUrl(repoUrl) ? suggested : cur));
+  };
 
   // Send the user to Settings → Git Hosting to establish the GitHub/GitLab
   // connection. The project dialog stays open (so the half-filled form isn't
@@ -276,6 +314,22 @@ export function ProjectDialog({
           : new Map<string, string[]>();
       const descriptionAgent = selectedDescriptionAgent();
       const remoteSpec = buildRemoteSpec(safeName);
+      // Clone first, then import the resulting directory in place: the clone owns
+      // getting the files onto the disk, `import_project` owns registering them.
+      // A failed clone throws here, so nothing is registered for a tree that
+      // isn't there.
+      let clonedDir = "";
+      if (isCloneImport) {
+        setCloning(true);
+        try {
+          clonedDir = await invoke<string>("git_clone", {
+            url: repoUrl.trim(),
+            dest: targetDir,
+          });
+        } finally {
+          setCloning(false);
+        }
+      }
       const project =
         kind === "new"
           ? await invoke<ProjectEntry>("create_project", {
@@ -293,12 +347,17 @@ export function ProjectDialog({
           : await invoke<ProjectEntry>("import_project", {
               req: {
                 // Backend ignores sourceDir for remote but the field is required;
-                // pass the (browsed or typed) remote path as a stand-in.
-                sourceDir: isRemoteProject ? remoteChosenPath : sourceDir,
+                // pass the (browsed or typed) remote path as a stand-in. A clone
+                // registers the directory it just landed in.
+                sourceDir: isRemoteProject
+                  ? remoteChosenPath
+                  : isCloneImport
+                    ? clonedDir
+                    : sourceDir,
                 name,
                 description,
                 gitType,
-                mode: isRemoteProject ? "keep" : mode,
+                mode: isRemoteProject || isCloneImport ? "keep" : mode,
                 scaffoldFillModes,
                 manualValidationConfirmed,
                 skipScaffold,
@@ -307,7 +366,15 @@ export function ProjectDialog({
                 mirrorParent: isRemoteProject ? mirrorParent : undefined,
               },
             });
-      if (isRemoteProject) rememberChosenPath();
+      if (isRemoteProject) {
+        rememberChosenPath();
+        // The new project's pooled connect happens on activation, inside `onProject`
+        // below — hand it the credential this dialog authenticated with, so that leg
+        // doesn't have to ride the master we happen to have left up (and so a
+        // password host isn't recorded as key-auth). Single-use; not persisted —
+        // persisting is what the "Save password" toggle is for.
+        stashRemotePassword(project.id, remotePassword);
+      }
       await onProject(project);
       await openScaffoldAgentTabs(project, scaffoldAgentFills);
       await openDescriptionAgentTab(project, descriptionAgent);
@@ -333,12 +400,16 @@ export function ProjectDialog({
           : Boolean(name.trim() && remoteChosenPath && mirrorParent.trim())
       : kind === "new"
         ? Boolean(name.trim() && targetDir && safeName)
-        : Boolean(
-            name.trim() &&
-            sourceDir &&
-            (mode === "keep" || safeName) &&
-            (mode === "keep" || manualValidationConfirmed),
-          ));
+        : isCloneImport
+          ? // A clone needs a plausible URL and somewhere to land; it has no
+            // source folder and no copy/move decision to validate.
+            Boolean(name.trim() && safeName && targetDir && isCloneUrl(repoUrl))
+          : Boolean(
+              name.trim() &&
+              sourceDir &&
+              (mode === "keep" || safeName) &&
+              (mode === "keep" || manualValidationConfirmed),
+            ));
 
   const missingFillableScaffoldCount = scaffoldPreview.filter((item) => !item.exists && item.kind === "file").length;
 
@@ -365,7 +436,9 @@ export function ProjectDialog({
     <label>
       Project name
       <input
-        autoFocus
+        // A clone starts at the URL field (which pre-fills this one), so the
+        // focus belongs there — two autoFocus inputs would fight over it.
+        autoFocus={!isCloneImport}
         value={name}
         placeholder="my-project"
         onChange={(e) => setName(e.target.value)}
@@ -409,8 +482,12 @@ export function ProjectDialog({
 
   return (
     <div className="modal-backdrop" onMouseDown={onClose}>
-      <div className="project-dialog" onMouseDown={(e) => e.stopPropagation()}>
-        <h2>{kind === "new" ? "New Project" : "Import Project"}</h2>
+      <div className="project-dialog dialog-framed" onMouseDown={(e) => e.stopPropagation()}>
+        <div className="settings-title-row">
+          <h2>{kind === "new" ? "New Project" : "Import Project"}</h2>
+          <button type="button" className="dialog-close-btn" onClick={onClose}>×</button>
+        </div>
+        <div className="dialog-scroll">
 
         <label className={`toggle-card${isRemoteProject ? " is-on" : ""}`}>
           <span className="toggle-card-body">
@@ -463,6 +540,21 @@ export function ProjectDialog({
         {showDetails && (
         <>
         {kind === "import" && !isRemoteProject && (
+          <label>
+            Import from
+            <Dropdown
+              className="dropdown-block"
+              value={importSource}
+              onChange={(v) => changeImportSource(v as ImportSource)}
+              options={[
+                { value: "folder", label: "Folder on this machine" },
+                { value: "git", label: "GitHub / GitLab repository (clone)" },
+              ]}
+            />
+          </label>
+        )}
+
+        {kind === "import" && !isRemoteProject && importSource === "folder" && (
           <label>
             Source folder
             <div className="folder-picker-row">
@@ -472,13 +564,39 @@ export function ProjectDialog({
           </label>
         )}
 
-        {kind === "new" && !isRemoteProject && (
+        {isCloneImport && (
+          <label>
+            Repository URL
+            <input
+              autoFocus
+              value={repoUrl}
+              placeholder="https://github.com/owner/repo.git"
+              onChange={(e) => setRepoUrlAndName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && canSubmit && !busy) void submit();
+                if (e.key === "Escape") onClose();
+              }}
+            />
+            <span className="ssh-optional-hint">
+              {gitConnected
+                ? "A private repository is cloned with the access token from Settings → Git Hosting. An SSH URL (git@…) uses your own SSH keys instead."
+                : "Public repositories clone as-is. For a private one, add an access token in Settings → Git Hosting, or use an SSH URL (git@…) to authenticate with your SSH keys."}
+            </span>
+          </label>
+        )}
+
+        {(kind === "new" || isCloneImport) && !isRemoteProject && (
           <label>
             Location
             <div className="folder-picker-row">
               <span title={projectsRoot}>{projectsRoot || "No folder selected"}</span>
               <button type="button" onClick={chooseLocation}>Browse...</button>
             </div>
+            {isCloneImport && (
+              <span className="ssh-optional-hint">
+                The repository is cloned into {safeName || "<name>"} here.
+              </span>
+            )}
           </label>
         )}
 
@@ -520,7 +638,7 @@ export function ProjectDialog({
           </div>
         )}
 
-        {kind === "import" && !isRemoteProject && (
+        {kind === "import" && !isRemoteProject && importSource === "folder" && (
           <label>
             Import mode
             <Dropdown
@@ -551,7 +669,11 @@ export function ProjectDialog({
           Skip scaffolding (do not generate any scaffold files)
         </label>
 
-        {kind === "import" && !isRemoteProject && !skipScaffold && (
+        {/* The scaffold preview reads the source folder off the disk, so it only
+            applies to a folder import — a clone's tree doesn't exist yet. Missing
+            scaffold files are still written after the clone (unless skipped);
+            they just can't be previewed or agent-filled from here. */}
+        {kind === "import" && !isRemoteProject && importSource === "folder" && !skipScaffold && (
           <div className="scaffold-popover" role="group" aria-label="Import scaffold guidance">
             <div className="scaffold-popover-title">Import guidance</div>
             <ol className="scaffold-steps">
@@ -651,7 +773,7 @@ export function ProjectDialog({
             ) : (
               ""
             )
-          ) : kind === "new" || mode !== "keep" ? (
+          ) : kind === "new" || isCloneImport || mode !== "keep" ? (
             targetDir ? `Destination: ${targetDir}` : ""
           ) : sourceDir ? (
             `Location: ${sourceDir}`
@@ -676,10 +798,19 @@ export function ProjectDialog({
             </button>
           ) : (
             <button type="button" disabled={!canSubmit || busy} onClick={() => void submit()}>
-              {busy ? "Working..." : kind === "new" ? "Create" : "Import"}
+              {cloning
+                ? "Cloning..."
+                : busy
+                  ? "Working..."
+                  : kind === "new"
+                    ? "Create"
+                    : isCloneImport
+                      ? "Clone & Import"
+                      : "Import"}
             </button>
           )}
         </div>
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/projects/ProjectPill.tsx b/src/components/projects/ProjectPill.tsx
index 7e682d6..a83050d 100644
--- a/src/components/projects/ProjectPill.tsx
+++ b/src/components/projects/ProjectPill.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { Toggle } from "../common/Toggle";
+import { UntestedTag } from "../common/UntestedTag";
 import { invoke } from "@tauri-apps/api/core";
 import { confirm, open } from "@tauri-apps/plugin-dialog";
 import {
@@ -16,12 +17,14 @@ import { useProjectsStore } from "../../stores/projects";
 import { isResumableAgentTab, useTabsStore } from "../../stores/tabs";
 import { IS_WINDOWS } from "../../lib/platform";
 import { runInstallInTab } from "../../lib/installCommand";
+import { PythonInterpreterWindow } from "./PythonInterpreterWindow";
 import { useGitDirtyStore, type GitDirtyState } from "../../stores/gitDirty";
 import { providerName, gitTypeLabel } from "./projectTypeTags";
 import { ProjectHoverCard, projectDescription, useProjectHoverCard } from "./ProjectHoverCard";
 import { ActivityCalendar } from "./ActivityCalendar";
 import { CategoryEditor } from "./CategoryEditor";
 import { ExtendToRemoteDialog } from "./ExtendToRemoteDialog";
+import { useRemoteMachinesStore, type DroppedGlobalMachine } from "../../stores/remoteMachines";
 import { Dropdown } from "../common/Dropdown";
 import { PasswordInput } from "../common/PasswordInput";
 import { FolderPickerDialog } from "../common/FolderPickerDialog";
@@ -44,6 +47,11 @@ interface Props {
 
 export const PILL_DRAG_TYPE = "application/x-eldrun-project";
 
+/** File endings that mark a project as holding Python — the "Python interpreter…"
+ *  menu entry is offered only when one is present. Matched against
+ *  `list_project_endings` (lowercased). */
+const PYTHON_ENDINGS = new Set([".py", ".pyw", ".pyi"]);
+
 /** Folder-icon title/color per git state — mirrors the file-tree markers'
  *  priority (red ▸ orange ▸ green), plus a neutral "clean" default. */
 const GIT_ICON_TITLE: Record<GitDirtyState, string> = {
@@ -594,8 +602,16 @@ function ArchiveConfirmWindow({
   );
 }
 
-/** Simple confirm for detaching a remote (SSH) project back to local. The host's
- *  files are never touched — only the local mirror is promoted back in place. */
+/** Confirm for detaching a remote (SSH) project back to local. The host's files are never
+ *  touched — only the local mirror is promoted back in place.
+ *
+ *  Lives in the pill's **danger zone** despite destroying nothing on either side, because
+ *  what it drops is not a file but a *pairing*: `clear_host_bound_state` discards the
+ *  byte-sync manifest (every auto-sync marker the user set up for this host, and every
+ *  size/mtime base behind the file tree's green) along with the lockstep state. That purge
+ *  is mandatory — those records describe ONE host, and a project that keeps its id can be
+ *  re-extended to a different one — but it is not undoable, and re-attaching the very same
+ *  host means choosing the auto-sync scope again from scratch. Say so before, not after. */
 function DetachRemoteWindow({
   project,
   onConfirm,
@@ -632,7 +648,13 @@ function DetachRemoteWindow({
           This turns <strong>{project.name}</strong> back into a plain local
           project: its local working copy stays exactly where it is and becomes
           the project directory again. The files on the remote host are
-          {" "}<strong>not</strong> touched — this only drops the SSH link.
+          {" "}<strong>not</strong> touched, and nothing local is deleted.
+        </p>
+        <p className="settings-help">
+          What it does drop is the <strong>pairing</strong>: git lockstep stops, and the
+          auto-sync scope you chose for this host — which folders cross, and the record of
+          what was already in step — is discarded. Re-attaching the same host later means
+          picking that scope again from scratch.
         </p>
         {error && <div className="project-dialog-error">{error}</div>}
         <div className="project-dialog-actions">
@@ -1035,6 +1057,13 @@ export function ProjectPill({ project, active, onClick, onClose, onReorder, onGr
   const [showArchive, setShowArchive] = useState(false);
   const [editCategories, setEditCategories] = useState(false);
   const [extendRemote, setExtendRemote] = useState(false);
+  // Set instead of `extendRemote` alone when a global machine was handed to this
+  // (local-only) project from the header's Machines menu — seeds the "Extend to
+  // remote" dialog's SSH address with that machine, so the pick becomes "make
+  // this the project's primary".
+  const [extendRemoteMachine, setExtendRemoteMachine] = useState<DroppedGlobalMachine | null>(
+    null,
+  );
   // When set, the in-app "Move project…" folder browser is open, seeded at this
   // parent directory. `null` = closed.
   const [movePickerInitial, setMovePickerInitial] = useState<string | null>(null);
@@ -1049,14 +1078,15 @@ export function ProjectPill({ project, active, onClick, onClose, onReorder, onGr
   const catColor = primaryCategoryColor(categories);
 
   const timerPaused = useTimerStore((s) => s.paused);
-  // Whole-pill status glow, matching the tab lamps: working (green pulse) wins,
-  // else an agent in this project needs a decision (orange pulse) or has finished
-  // unseen (green steady). Attention rolls up from the project's background tabs.
   // One little bar per non-idle tab along the bottom edge of the pill, so a
   // glance at the switcher says how many tabs of each project are working
   // (green, pulsing), waiting on a decision (orange, pulsing) or finished unseen
   // (green, steady). This replaced a whole-pill tint that could only ever show
   // one state and said nothing about how many tabs were in it.
+  // The SELECTED project keeps its bars: the strip is a tally of what the project
+  // is doing, not a list of what still needs a glance, and the project you are in
+  // is the one whose agents you most need to see running. Only "finished unseen"
+  // is inherently about unread output, and it can't arise for a tab on screen.
   const statusCounts = useActivityStore((s) => s.statusCountsByScope[project.id]);
   const gitDirty = useGitDirtyStore((s) => s.byId[project.id]);
   const updateProjectDescription = useProjectsStore((s) => s.updateProjectDescription);
@@ -1064,6 +1094,28 @@ export function ProjectPill({ project, active, onClick, onClose, onReorder, onGr
   const moveRemoteMirror = useProjectsStore((s) => s.moveRemoteMirror);
   const setProjectSandbox = useProjectsStore((s) => s.setProjectSandbox);
   const [showContainerSettings, setShowContainerSettings] = useState(false);
+  const openRemoteMachines = useRemoteMachinesStore((s) => s.open);
+  // A global machine picked for THIS (local) project in the header's Machines
+  // menu: that menu can't own the extend dialog, so it parks the request here
+  // and the target's pill opens it. Cleared on pickup so it fires once.
+  const extendTarget = useRemoteMachinesStore((s) => s.extendTarget);
+  const clearExtend = useRemoteMachinesStore((s) => s.clearExtend);
+  useEffect(() => {
+    if (extendTarget?.projectId !== project.id) return;
+    setExtendRemoteMachine(extendTarget.machine);
+    setExtendRemote(true);
+    clearExtend();
+  }, [extendTarget, project.id, clearExtend]);
+  const [showPythonSettings, setShowPythonSettings] = useState(false);
+  // Whether this project actually contains Python files — the interpreter/venv
+  // setting is only worth offering then. Probed lazily when the context menu
+  // opens (see handleContextMenu), like the saved-password lookup, so no pill
+  // scans on render. `null` = not yet probed. A remote project's `directory` is
+  // its local state dir, not the host tree, so the local ending scan can't see
+  // its files: offer the setting for any remote project rather than hide it
+  // wrongly (the dialog probes the host for that project anyway).
+  const [hasPythonFiles, setHasPythonFiles] = useState<boolean | null>(null);
+  const showPython = project.remote ? true : hasPythonFiles === true;
 
   // Flip the project-container toggle. The flag is in every TerminalView's
   // spawn deps, so flipping respawns each live tab of this project —
@@ -1111,6 +1163,7 @@ export function ProjectPill({ project, active, onClick, onClose, onReorder, onGr
   }, [project.id, project.sandbox?.enabled, setProjectSandbox]);
 
   const setProjectAutoConnect = useProjectsStore((s) => s.setProjectAutoConnect);
+  const setProjectPersistSessions = useProjectsStore((s) => s.setProjectPersistSessions);
   // Auto-connect is only offered when the connect can complete with no prompt: a
   // key/agent-auth host (recorded by the backend on its last successful connect) or
   // a password in the keychain (looked up when the menu opens).
@@ -1229,6 +1282,24 @@ export function ProjectPill({ project, active, onClick, onClose, onReorder, onGr
         .then(setSshPasswordSaved)
         .catch(() => setSshPasswordSaved(false));
     }
+    // Does this project hold any Python files? Gates the "Python interpreter…"
+    // entry below. A cheap local ending scan (already the file tree's "hide these
+    // endings" source), skipped for remote projects whose files live on the host
+    // (showPython shows those regardless — see hasPythonFiles).
+    if (!project.remote) {
+      const dir = resolveProjectDirectory(project);
+      if (dir) {
+        void invoke<string[]>("list_project_endings", { projectDir: dir })
+          .then((endings) =>
+            setHasPythonFiles(
+              endings.some((e) => PYTHON_ENDINGS.has(e.toLowerCase())),
+            ),
+          )
+          .catch(() => setHasPythonFiles(false));
+      } else {
+        setHasPythonFiles(false);
+      }
+    }
     // Anchor to the pill's bottom-left corner so the menu opens downward, below
     // the bar, with its left edge flush to the pill's left border.
     const rect = pillRef.current?.getBoundingClientRect();
@@ -1289,6 +1360,7 @@ export function ProjectPill({ project, active, onClick, onClose, onReorder, onGr
             </button>
             {project.remote && (
               <button
+                className="untested"
                 onClick={() => {
                   setContextMenu(null);
                   void moveMirror();
@@ -1296,17 +1368,7 @@ export function ProjectPill({ project, active, onClick, onClose, onReorder, onGr
                 title="Move this project's local mirror (the connected working copy) to a new folder"
               >
                 Move project…
-              </button>
-            )}
-            {project.remote && (
-              <button
-                onClick={() => {
-                  setContextMenu(null);
-                  setShowDetach(true);
-                }}
-                title="Turn this back into a local project — the local working copy stays put; the remote host's files are untouched"
-              >
-                Detach SSH host…
+                <UntestedTag />
               </button>
             )}
             <button
@@ -1318,6 +1380,7 @@ export function ProjectPill({ project, active, onClick, onClose, onReorder, onGr
               Edit description
             </button>
             <button
+              className="untested"
               onClick={() => {
                 setContextMenu(null);
                 setEditCategories(true);
@@ -1325,8 +1388,10 @@ export function ProjectPill({ project, active, onClick, onClose, onReorder, onGr
               title="Tag this project to color and group it in the cloud and the pill bar"
             >
               Categories…
+              <UntestedTag />
             </button>
             <button
+              className="untested"
               onClick={() => {
                 setContextMenu(null);
                 void repairProjectScaffold(project.id);
@@ -1334,11 +1399,13 @@ export function ProjectPill({ project, active, onClick, onClose, onReorder, onGr
               title="Fill in any missing scaffold file, default .gitignore pattern, or .claude/settings.json — never overwrites existing content"
             >
               Repair scaffold files
+              <UntestedTag />
             </button>
             {!project.remote && (
               <button
                 onClick={() => {
                   setContextMenu(null);
+                  setExtendRemoteMachine(null);
                   setExtendRemote(true);
                 }}
                 title="Attach a remote SSH host to this local project — files stay put; push them up manually"
@@ -1354,6 +1421,7 @@ export function ProjectPill({ project, active, onClick, onClose, onReorder, onGr
             {project.git_type === "none" ? (
               !project.remote && (
                 <button
+                  className="untested"
                   onClick={() => {
                     setContextMenu(null);
                     void setProjectGitDisabled(project.id, false);
@@ -1361,12 +1429,14 @@ export function ProjectPill({ project, active, onClick, onClose, onReorder, onGr
                   title="Run git init to start version-controlling this project"
                 >
                   Enable git (git init)
+                  <UntestedTag />
                 </button>
               )
             ) : typeof project.git_type === "string" && project.git_type.startsWith("remote") ? (
               // Already published — offer in-place management, not another publish.
               <>
                 <button
+                  className="untested"
                   onClick={() => {
                     setContextMenu(null);
                     setShowVisibility(true);
@@ -1374,8 +1444,10 @@ export function ProjectPill({ project, active, onClick, onClose, onReorder, onGr
                   title="Flip the repository between public and private in place (gh/glab repo edit)"
                 >
                   {project.git_type === "remote-public" ? "Make private…" : "Make public…"}
+                  <UntestedTag />
                 </button>
                 <button
+                  className="untested"
                   onClick={() => {
                     setContextMenu(null);
                     setShowMigrate(true);
@@ -1383,8 +1455,10 @@ export function ProjectPill({ project, active, onClick, onClose, onReorder, onGr
                   title="Publish to the other provider and re-point origin; the old repo is left intact"
                 >
                   Move to {project.git_provider === "gitlab" ? "GitHub" : "GitLab"}…
+                  <UntestedTag />
                 </button>
                 <button
+                  className="untested"
                   onClick={() => {
                     setContextMenu(null);
                     setShowUnpublish(true);
@@ -1392,8 +1466,10 @@ export function ProjectPill({ project, active, onClick, onClose, onReorder, onGr
                   title="Remove the origin remote and go back to a local repo; the hosted repo and history are kept"
                 >
                   Unpublish (keep repo)…
+                  <UntestedTag />
                 </button>
                 <button
+                  className="untested"
                   onClick={() => {
                     setContextMenu(null);
                     setShowGitHosting(true);
@@ -1401,17 +1477,20 @@ export function ProjectPill({ project, active, onClick, onClose, onReorder, onGr
                   title="Override the global git hosting (profile URL + token) for this project only"
                 >
                   Git hosting…
+                  <UntestedTag />
                 </button>
               </>
             ) : (
               // Local git repo, not yet pushed anywhere.
               <button
+                className="untested"
                 onClick={() => {
                   setContextMenu(null);
                   setShowPublish(true);
                 }}
               >
                 Publish to GitHub / GitLab…
+                <UntestedTag />
               </button>
             )}
           </div>
@@ -1444,6 +1523,17 @@ export function ProjectPill({ project, active, onClick, onClose, onReorder, onGr
                 </button>
               </>
             )}
+            {showPython && (
+              <button
+                onClick={() => {
+                  setContextMenu(null);
+                  setShowPythonSettings(true);
+                }}
+                title="The Python environment this project's scripts run and debug in. Auto-detected by default (in-tree venv, poetry, conda, pyenv); pin one when your environment lives somewhere Eldrun can't infer."
+              >
+                {project.python_interpreter ? "✓ " : ""}Python interpreter…
+              </button>
+            )}
             {project.remote && (
               <button
                 disabled={!autoConnectEligible}
@@ -1460,6 +1550,40 @@ export function ProjectPill({ project, active, onClick, onClose, onReorder, onGr
                 {project.remote.auto_connect ? "✓ " : ""}Auto-connect on launch
               </button>
             )}
+            {/* Persistent remote sessions (TODO #85): shell/script tabs run inside a
+                tmux session on the host, so a long run survives an SSH drop, a
+                laptop sleep, or Eldrun quitting. Default ON — this opts out. */}
+            {project.remote && (
+              <button
+                onClick={() => {
+                  setContextMenu(null);
+                  void setProjectPersistSessions(
+                    project.id,
+                    project.remote?.persist_sessions === false,
+                  );
+                }}
+                title="Run this project's remote shell and Python/script tabs inside a tmux session on the host, so a long run keeps going through an SSH drop, a laptop sleep, or Eldrun quitting — the tab reattaches when you reconnect. Closing a tab still ends its session (with a confirm). Agent tabs are unaffected."
+              >
+                {project.remote.persist_sessions !== false ? "✓ " : ""}Persistent sessions (tmux)
+              </button>
+            )}
+            {/* Multi-host remote (docs/multi_host_remote_plan.md): manage the extra
+                "worker" machines this project runs experiments on. Remote only. */}
+            {project.remote && (
+              <button
+                className="untested"
+                onClick={() => {
+                  setContextMenu(null);
+                  openRemoteMachines(project.id);
+                }}
+                title="Add and manage extra machines this project runs on. They run the same code (kept in one-way sync) as read-only experiment workers; their outputs stay on each machine."
+              >
+                {project.compute_hosts?.length
+                  ? `Remote machines… (${project.compute_hosts.length})`
+                  : "Remote machines…"}
+                <UntestedTag />
+              </button>
+            )}
             <button
               onClick={() => {
                 setContextMenu(null);
@@ -1471,8 +1595,8 @@ export function ProjectPill({ project, active, onClick, onClose, onReorder, onGr
                   tabsStore.closeDetachedGroup(project.id, g.id);
                 }
                 // Clear this project's in-window tabs. For the ACTIVE project the
-                // debounced saveLayout effect persists the empty layout; for a
-                // non-active project nothing else writes it, so persist explicitly.
+                // debounced persist effect writes the empty layout; for a non-active
+                // project nothing else writes it, so persist explicitly.
                 tabsStore.closeAllTabs(project.id);
                 if (project.local_file) {
                   void invoke("save_tab_layout", {
@@ -1480,6 +1604,11 @@ export function ProjectPill({ project, active, onClick, onClose, onReorder, onGr
                     tabs: [],
                     groups: null,
                     sessions: [],
+                    // This is THE close-all: the one empty save that is meant, by a user
+                    // who clicked a button that says so. Everywhere else an empty layout
+                    // is refused, because it far more often means "the caller had nothing
+                    // loaded" than "erase four tabs and their agent conversations".
+                    allowClear: true,
                   }).catch(() => {});
                 }
               }}
@@ -1491,6 +1620,18 @@ export function ProjectPill({ project, active, onClick, onClose, onReorder, onGr
           {/* Danger zone — irreversible / destructive actions, fenced off */}
           <div className="context-menu-danger-zone">
             <div className="context-menu-group-label">Danger zone</div>
+            {project.remote && (
+              <button
+                className="danger"
+                onClick={() => {
+                  setContextMenu(null);
+                  setShowDetach(true);
+                }}
+                title="Turn this back into a local project. The local working copy stays put and the remote host's files are untouched — but the pairing is dropped: lockstep stops, and the auto-sync scope you set up for this host is discarded."
+              >
+                Detach SSH host…
+              </button>
+            )}
             {!project.remote && project.git_type !== "none" && (
               <button
                 className="danger"
@@ -1568,9 +1709,26 @@ export function ProjectPill({ project, active, onClick, onClose, onReorder, onGr
         />
       )}
 
-      {/* Extend a local project to remote (attach an SSH host) */}
+
+      {/* Which Python the viewer's Run/Debug buttons use (#87) */}
+      {showPythonSettings && (
+        <PythonInterpreterWindow
+          project={project}
+          onClose={() => setShowPythonSettings(false)}
+        />
+      )}
+
+      {/* Extend a local project to remote (attach an SSH host) — either from
+          the context menu, or a global machine dropped onto this pill. */}
       {extendRemote && (
-        <ExtendToRemoteDialog project={project} onClose={() => setExtendRemote(false)} />
+        <ExtendToRemoteDialog
+          project={project}
+          initialMachine={extendRemoteMachine ?? undefined}
+          onClose={() => {
+            setExtendRemote(false);
+            setExtendRemoteMachine(null);
+          }}
+        />
       )}
 
       {/* Detach a remote project back to local */}
diff --git a/src/components/projects/PythonInterpreterWindow.tsx b/src/components/projects/PythonInterpreterWindow.tsx
new file mode 100644
index 0000000..178bc6e
--- /dev/null
+++ b/src/components/projects/PythonInterpreterWindow.tsx
@@ -0,0 +1,156 @@
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { resolveProjectDirectory, type ProjectEntry } from "../../types";
+import { useProjectsStore } from "../../stores/projects";
+import { listInterpreters, type PyInterpreter } from "../../lib/pythonRun";
+
+/**
+ * Which Python the code viewer's Run/Debug buttons use for this project (#87).
+ *
+ * The default — and what almost every project should stay on — is **auto-detect**,
+ * so the dialog leads with it and *shows what it currently resolves to* rather than
+ * making the user trust an invisible decision. Pinning exists for the environments
+ * auto-detect cannot pick on the user's behalf: one of N unrelated conda envs, an
+ * interpreter outside the project tree, a second venv.
+ *
+ * The list is probed live (`python_interpreters`) — on a **remote** project that
+ * probe runs on the *host*, which is the machine the run tab will actually run on,
+ * so the paths offered here are the paths that will exist when Run is pressed.
+ *
+ * Shared: opened from the project pill's context menu and from the file viewer's
+ * gear (Project Settings), so both surfaces edit the one pinned interpreter.
+ */
+export function PythonInterpreterWindow({
+  project,
+  onClose,
+}: {
+  project: ProjectEntry;
+  onClose: () => void;
+}) {
+  const setProjectPython = useProjectsStore((s) => s.setProjectPython);
+  const dir = resolveProjectDirectory(project);
+  const AUTO = "";
+  const CUSTOM = "__custom__";
+
+  const [found, setFound] = useState<PyInterpreter[] | null>(null);
+  const [probeError, setProbeError] = useState("");
+  const pinned = project.python_interpreter ?? "";
+  // A pinned path that isn't in the probed list is still legitimate (a hand-typed
+  // one, or an env that has since gone away) — it opens as "Custom".
+  const [choice, setChoice] = useState<string>(pinned || AUTO);
+  const [custom, setCustom] = useState(pinned);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    let cancelled = false;
+    listInterpreters(dir)
+      .then((list) => {
+        if (cancelled) return;
+        setFound(list);
+        // Re-home a pinned value that the probe did find, so it selects its own row.
+        if (pinned && !list.some((i) => i.path === pinned)) setChoice(CUSTOM);
+      })
+      .catch((e) => {
+        if (cancelled) return;
+        setFound([]);
+        setProbeError(String(e));
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [dir, pinned]);
+
+  // What auto-detect would pick right now: the first entry the backend ranked as
+  // auto-selectable. Named conda envs are offered but never auto-picked.
+  const autoPick = found?.find((i) => i.kind !== "conda");
+
+  const save = async () => {
+    if (busy) return;
+    const value =
+      choice === AUTO ? null : choice === CUSTOM ? custom.trim() || null : choice;
+    setBusy(true);
+    setError("");
+    try {
+      await setProjectPython(project.id, value);
+      onClose();
+    } catch (err) {
+      setError(String(err));
+      setBusy(false);
+    }
+  };
+
+  return createPortal(
+    <div className="modal-backdrop" onMouseDown={onClose}>
+      <div className="project-dialog dialog-framed" onMouseDown={(e) => e.stopPropagation()}>
+        <div className="settings-title-row">
+          <h2>{project.name} — Python interpreter</h2>
+          <button type="button" className="dialog-close-btn" onClick={onClose}>×</button>
+        </div>
+        <div className="dialog-scroll">
+        <p className="settings-help">
+          Used by the code viewer's Run and Debug buttons. Auto-detect is right for
+          almost every project — pin one only when your environment lives somewhere
+          Eldrun can't infer.
+          {project.remote && " Probed on the host, since that is where this project runs."}
+        </p>
+
+        {found === null ? (
+          <div className="file-viewer-loading">Looking for interpreters…</div>
+        ) : (
+          <>
+            <label>
+              Interpreter
+              <select
+                value={choice}
+                onChange={(e) => setChoice(e.target.value)}
+                disabled={busy}
+              >
+                <option value={AUTO}>
+                  {autoPick
+                    ? `Auto-detect — ${autoPick.path}`
+                    : "Auto-detect"}
+                </option>
+                {found.map((i) => (
+                  <option key={i.path} value={i.path}>
+                    {i.label} — {i.path}
+                  </option>
+                ))}
+                <option value={CUSTOM}>Custom path…</option>
+              </select>
+            </label>
+            {choice === CUSTOM && (
+              <label>
+                Path to the interpreter
+                <input
+                  type="text"
+                  value={custom}
+                  placeholder="e.g. /opt/envs/ml/bin/python — relative paths resolve from the project root"
+                  onChange={(e) => setCustom(e.target.value)}
+                  spellCheck={false}
+                  disabled={busy}
+                />
+              </label>
+            )}
+            {probeError && (
+              <p className="settings-help">
+                Couldn't probe for interpreters ({probeError}). You can still set one
+                by hand.
+              </p>
+            )}
+          </>
+        )}
+
+        {error && <div className="project-dialog-error">{error}</div>}
+        <div className="project-dialog-actions">
+          <button type="button" onClick={onClose} disabled={busy}>Cancel</button>
+          <button type="button" onClick={() => void save()} disabled={busy || found === null}>
+            {busy ? "Saving…" : "Save"}
+          </button>
+        </div>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}
diff --git a/src/components/projects/RemoteConnectDialog.tsx b/src/components/projects/RemoteConnectDialog.tsx
index 45de483..63e4233 100644
--- a/src/components/projects/RemoteConnectDialog.tsx
+++ b/src/components/projects/RemoteConnectDialog.tsx
@@ -1,16 +1,19 @@
 import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
+import { invoke } from "@tauri-apps/api/core";
 import { TerminalView } from "../terminal/TerminalView";
 import { Toggle } from "../common/Toggle";
 import { ConnLamp } from "../common/ConnLamp";
 import { ConnectionLog } from "../common/ConnectionLog";
 import { Dropdown } from "../common/Dropdown";
 import { PasswordInput } from "../common/PasswordInput";
+import { UntestedTag } from "../common/UntestedTag";
 import { useRemoteReconnect } from "./useRemoteReconnect";
 import { useConnectDialogStore } from "../../stores/connectDialog";
 import { useProjectsStore, disconnectRemote } from "../../stores/projects";
 import { useSettingsStore } from "../../stores/settings";
-import { anyVpnLive, useVpnStatusStore } from "../../stores/vpnStatus";
+import { useVpnSectionVisible } from "../../stores/vpnStatus";
+import { VpnTunnelUpNotice } from "../common/VpnTunnelUpNotice";
 import { formatRemoteTarget, resolveLocalMirror, type ProjectEntry } from "../../types";
 
 /**
@@ -31,14 +34,29 @@ import { formatRemoteTarget, resolveLocalMirror, type ProjectEntry } from "../..
  */
 export function RemoteConnectDialog() {
   const projectId = useConnectDialogStore((s) => s.projectId);
+  const hostId = useConnectDialogStore((s) => s.hostId);
   const project = useProjectsStore((s) =>
     projectId ? s.projects.find((p) => p.id === projectId) : undefined,
   );
   if (!projectId || !project?.remote) return null;
-  return <RemoteConnectDialogInner key={project.id} project={project} />;
+  // Multi-host remote: the modal targets the primary or a worker host. Resolve the
+  // selected worker (if any) so its own spec drives the connect + lamp.
+  const worker =
+    hostId && hostId !== "primary"
+      ? project.compute_hosts?.find((h) => h.id === hostId)
+      : undefined;
+  return (
+    <RemoteConnectDialogInner key={`${project.id}:${hostId ?? "primary"}`} project={project} host={worker} />
+  );
 }
 
-function RemoteConnectDialogInner({ project }: { project: ProjectEntry }) {
+function RemoteConnectDialogInner({
+  project,
+  host,
+}: {
+  project: ProjectEntry;
+  host?: import("../../types").ComputeHost;
+}) {
   const close = useConnectDialogStore((s) => s.close);
   const headless = useSettingsStore((s) => s.settings?.connections_headless ?? true);
   const {
@@ -68,12 +86,63 @@ function RemoteConnectDialogInner({ project }: { project: ProjectEntry }) {
     autoConnect,
     autoConnectEligible,
     setAutoConnect,
+    setWorkerLabel,
     connectVpnHeadless,
     connectSshHeadless,
     forgetPasswords,
     forgetSshPassword,
     forgetVpnPassword,
-  } = useRemoteReconnect(project);
+  } = useRemoteReconnect(project, host);
+
+  // Editable name: for a worker its `label`, for the primary the project name.
+  // Seeded from the current value and re-synced when the store's copy changes (a
+  // rename commits into the store); committed on blur / Enter so a write fires once,
+  // not per keystroke. The two differ on blank: a worker label may be cleared (it
+  // then falls back to the host), but a project name may not — the backend rejects
+  // it, so we restore the field instead.
+  const currentName = host ? host.label ?? "" : project.name;
+  const [nameDraft, setNameDraft] = useState(currentName);
+  useEffect(() => setNameDraft(currentName), [currentName]);
+  const commitName = () => {
+    const next = nameDraft.trim();
+    if (next === currentName) return;
+    if (host) {
+      setWorkerLabel(next);
+    } else if (next) {
+      void useProjectsStore.getState().renameProject(project.id, next).catch(() => {});
+    } else {
+      setNameDraft(currentName); // project name can't be blank — undo the edit
+    }
+  };
+
+  // The primary's own machine name (`remote.label`) — distinct from the project
+  // name above: a project can be renamed without touching which name identifies
+  // its primary host across the multi-host surfaces (System Monitor's source
+  // picker, the pill's connection lamps). Worker-only equivalent is `host.label`,
+  // already covered by the "Name" field above since a worker has no project name
+  // of its own to conflict with it.
+  const currentMachineLabel = host ? "" : project.remote?.label ?? "";
+  const [machineDraft, setMachineDraft] = useState(currentMachineLabel);
+
+  // "Disconnect & end jobs": the *active* teardown — kills every running tmux
+  // session on this host before the ordinary disconnect, distinct from plain
+  // Disconnect which leaves them alive to reattach. Two-step confirm (this arms
+  // it) because killing jobs can't be undone. Target is the worker's own spec or
+  // the primary's `remote`.
+  const [killArm, setKillArm] = useState(false);
+  const killTarget = host
+    ? { user: host.user, host: host.host, port: host.port }
+    : {
+        user: project.remote?.user,
+        host: project.remote?.host ?? "",
+        port: project.remote?.port,
+      };
+  useEffect(() => setMachineDraft(currentMachineLabel), [currentMachineLabel]);
+  const commitMachineLabel = () => {
+    const next = machineDraft.trim();
+    if (next === currentMachineLabel) return;
+    setWorkerLabel(next);
+  };
 
   const [sshPassword, setSshPassword] = useState("");
   const [vpnPassword, setVpnPassword] = useState("");
@@ -133,31 +202,40 @@ function RemoteConnectDialogInner({ project }: { project: ProjectEntry }) {
   // this project's OpenVPN section to offer — except when it's THIS project's own
   // attempt that made it live, in which case its controls (log, Stop/Disconnect)
   // must stay reachable here. `vpnBusy` already mirrors that via the machine store.
-  const vpnGloballyLive = useVpnStatusStore((s) => anyVpnLive(s.byConfig));
-  const showVpnSection = !vpnGloballyLive || vpnBusy;
+  const showVpnSection = useVpnSectionVisible(vpnBusy);
   // One submit for the whole VPN form: the fields are separate prompts OpenVPN
   // raises, but they're answered in a single connect.
   const submitVpn = () => void connectVpnHeadless(vpnPassword, vpnKeyPassphrase, vpnRemember);
 
   return createPortal(
-    <div className="modal-backdrop" onMouseDown={close}>
+    <div className="modal-backdrop modal-backdrop-elevated" onMouseDown={close}>
       <div
-        className="project-dialog remote-connect-dialog"
+        className="project-dialog dialog-framed remote-connect-dialog"
         onMouseDown={(e) => e.stopPropagation()}
       >
         <div className="settings-title-row">
-          <h2>Connect remote project</h2>
+          <h2>
+            {host
+              ? `Connect worker · ${host.label || host.host}`
+              : "Connect remote project"}
+          </h2>
           <button type="button" className="dialog-close-btn" onClick={close}>×</button>
         </div>
 
+        <div className="dialog-scroll">
         <div className="remote-connect-target">
           <div className="remote-connect-location">
             <span className="remote-connect-location-label">Remote</span>
-            <span className="remote-connect-location-path" title={project.remote ? formatRemoteTarget(project.remote) : undefined}>
-              {project.remote && formatRemoteTarget(project.remote)}
+            <span
+              className="remote-connect-location-path"
+              title={host ? formatRemoteTarget(host) : project.remote ? formatRemoteTarget(project.remote) : undefined}
+            >
+              {host ? formatRemoteTarget(host) : project.remote && formatRemoteTarget(project.remote)}
             </span>
           </div>
-          {localMirror && (
+          {/* A worker is code-read-only (one-way sync, outputs stay on it) — it
+              has no local mirror to show; only the primary does. */}
+          {!host && localMirror && (
             <div className="remote-connect-location">
               <span className="remote-connect-location-label">Local</span>
               <span className="remote-connect-location-path" title={localMirror}>{localMirror}</span>
@@ -165,6 +243,64 @@ function RemoteConnectDialogInner({ project }: { project: ProjectEntry }) {
           )}
         </div>
 
+        {/* Rename here — a worker's name was only settable once (at add time), and the
+            primary's project name was only editable elsewhere. Blank clears a worker
+            label (it falls back to the host); a project name can't be blank. */}
+        <label className="remote-connect-field remote-worker-name">
+          <span className="remote-machine-add-label">
+            Name
+            <UntestedTag />
+          </span>
+          <input
+            type="text"
+            value={nameDraft}
+            placeholder={host ? host.host : "Project name"}
+            spellCheck={false}
+            autoComplete="off"
+            onChange={(e) => setNameDraft(e.target.value)}
+            onBlur={commitName}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") (e.target as HTMLInputElement).blur();
+            }}
+          />
+          <span className="ssh-optional-hint">
+            {host
+              ? "Shown on the pill and in “Remote machines”. Leave blank to use the host name."
+              : "The project name, shown on its pill and across Eldrun."}
+          </span>
+        </label>
+
+        {/* The primary's own machine name — worker rows already get this via the
+            "Name" field above (a worker has no project name to conflict with it);
+            the primary needs a second field since its "Name" above is the project
+            name. Optional: blank falls back to the bare host everywhere hosts are
+            listed side by side (System Monitor, pill lamps, "Remote machines"). */}
+        {!host && (
+          <label className="remote-connect-field remote-worker-name">
+            <span className="remote-machine-add-label">
+              Machine name
+              <UntestedTag />
+            </span>
+            <input
+              type="text"
+              value={machineDraft}
+              placeholder={project.remote?.host ?? ""}
+              spellCheck={false}
+              autoComplete="off"
+              onChange={(e) => setMachineDraft(e.target.value)}
+              onBlur={commitMachineLabel}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") (e.target as HTMLInputElement).blur();
+              }}
+            />
+            <span className="ssh-optional-hint">
+              Identifies this machine in the System Monitor and connection lamps
+              when the project has more than one host. Leave blank to use the host
+              name.
+            </span>
+          </label>
+        )}
+
         {/* ── OpenVPN (always offered; opt-in, default off) ─────────────────────
             Shown for every remote project, not only ones that stored a config at
             create time: a project made on a no-VPN network may need a tunnel when
@@ -174,14 +310,8 @@ function RemoteConnectDialogInner({ project }: { project: ProjectEntry }) {
             redundant — the routing this project needs is already there — so it
             collapses to a one-line status and the dialog goes straight to SSH. */}
         {!showVpnSection && (
-          <div className="remote-reconnect-section" role="group" aria-label="OpenVPN tunnel">
-            <div className="remote-field-label">
-              <ConnLamp status="connected" label="OpenVPN" />
-              OpenVPN tunnel already up
-            </div>
-            <span className="ssh-optional-hint">
-              Manage tunnels from the header's VPN control.
-            </span>
+          <div className="remote-reconnect-section">
+            <VpnTunnelUpNotice />
           </div>
         )}
         {showVpnSection && (
@@ -624,6 +754,37 @@ function RemoteConnectDialogInner({ project }: { project: ProjectEntry }) {
               Disconnect
             </button>
           )}
+          {/* Active teardown: end every running tmux job on this host, then
+              disconnect. Distinct from plain Disconnect (which detaches and
+              leaves sessions alive to reattach). Only when SSH is up — there are
+              no host jobs to end otherwise. Two-step: the first click arms it. */}
+          {sshStatus === "connected" &&
+            (killArm ? (
+              <button
+                type="button"
+                className="vpn-disconnect-btn"
+                title="Confirm: this kills every running tmux session on the host — it can't be undone."
+                onClick={() => {
+                  setKillArm(false);
+                  void invoke("remote_kill_all_jobs", killTarget).catch(() => {});
+                  stopSsh();
+                  if (vpnConfig) stopVpn();
+                  disconnectRemote(project.id);
+                  close();
+                }}
+              >
+                Confirm: end all jobs
+              </button>
+            ) : (
+              <button
+                type="button"
+                title="Actively disconnect: end every running tmux job on this host and close the connection. Jobs are killed only on this click — never on an Eldrun restart."
+                onClick={() => setKillArm(true)}
+              >
+                Disconnect &amp; end jobs
+                <UntestedTag />
+              </button>
+            ))}
           {/* Only offered when there is something to forget — the keychain state
               (queried on mount) is the source of truth, not the toggles. Stays
               open afterwards so the emptied "Save password" toggles are visible
@@ -639,6 +800,7 @@ function RemoteConnectDialogInner({ project }: { project: ProjectEntry }) {
           )}
           <button type="button" onClick={close}>Close</button>
         </div>
+        </div>
       </div>
     </div>,
     document.body,
diff --git a/src/components/projects/RemoteFolderBrowser.tsx b/src/components/projects/RemoteFolderBrowser.tsx
new file mode 100644
index 0000000..3afe575
--- /dev/null
+++ b/src/components/projects/RemoteFolderBrowser.tsx
@@ -0,0 +1,142 @@
+import { useState, type ReactNode } from "react";
+import { Dropdown } from "../common/Dropdown";
+import { fileIcon, folderIcon } from "../../lib/viewers/fileUtils";
+import type { RemoteEntry } from "../../types";
+
+/** Extension (".py", ".md", …) of a remote listing entry, for picking its
+ *  file-type icon the same way the right-hand file tree does. A leading-dot
+ *  name (e.g. ".gitignore") has no extension, so it falls back to the generic
+ *  file icon. Shared by every remote folder picker. */
+export function remoteEntryExt(name: string): string | null {
+  const dot = name.lastIndexOf(".");
+  return dot > 0 ? name.slice(dot) : null;
+}
+
+/**
+ * The live remote folder picker (`.remote-browser` chrome): a breadcrumb + go-up
+ * + recently-used jump, an inline "new folder" entry, the directory listing, and
+ * a footer. It owns only the new-folder input's transient text; every other bit
+ * of state (path, entries, busy/error) is the caller's, so the SAME browser
+ * serves the new/extend project flow (`RemoteProjectSection`, over
+ * `useRemoteSession`) and the add-worker-machine flow (`RemoteMachinesWindow`,
+ * over one-shot SFTP) with no duplicated markup.
+ */
+export function RemoteFolderBrowser({
+  path,
+  entries,
+  busy,
+  error,
+  recentPaths,
+  onGoUp,
+  onJumpPath,
+  onEnterFolder,
+  onUseFolder,
+  onCreateFolder,
+  footer,
+  useFolderLabel = "Use this folder",
+}: {
+  path: string;
+  entries: RemoteEntry[];
+  busy: boolean;
+  error: string;
+  recentPaths: string[];
+  onGoUp: () => void;
+  onJumpPath: (p: string) => void;
+  onEnterFolder: (entry: RemoteEntry) => void;
+  onUseFolder: () => void;
+  onCreateFolder: (name: string) => void;
+  /** The `.remote-chosen` footer line — a "Will create: …" summary in the
+   *  project flow, a plain hint in the add-machine flow. */
+  footer: ReactNode;
+  useFolderLabel?: string;
+}) {
+  const [newFolderName, setNewFolderName] = useState("");
+  const submitNewFolder = () => {
+    const name = newFolderName.trim();
+    if (!name) return;
+    onCreateFolder(name);
+    setNewFolderName("");
+  };
+
+  return (
+    <div className="remote-browser" role="group" aria-label="Remote folder browser">
+      <div className="remote-browser-header">
+        <button type="button" className="remote-up-btn" onClick={onGoUp} title="Go up">
+          ..
+        </button>
+        <span className="remote-breadcrumb" title={path}>
+          {path || "/"}
+        </span>
+        {recentPaths.length > 0 && (
+          <Dropdown
+            className="vpn-config-recent"
+            value=""
+            placeholder="Recently used…"
+            title="Jump to a previously-used remote path for this host"
+            onChange={(v) => {
+              if (v) onJumpPath(v);
+            }}
+            options={recentPaths.map((p) => ({ value: p, label: p }))}
+          />
+        )}
+        <button type="button" onClick={onUseFolder}>
+          {useFolderLabel}
+        </button>
+      </div>
+      <div className="remote-newfolder">
+        <input
+          type="text"
+          className="remote-newfolder-input"
+          placeholder="New folder name…"
+          value={newFolderName}
+          onChange={(e) => setNewFolderName(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              submitNewFolder();
+            }
+          }}
+          disabled={busy}
+        />
+        <button
+          type="button"
+          onClick={submitNewFolder}
+          disabled={busy || !newFolderName.trim()}
+          title="Create a new folder here"
+        >
+          + Add folder
+        </button>
+      </div>
+      <div className="remote-list">
+        {busy && <div className="scaffold-empty">Listing...</div>}
+        {!busy && error && <div className="project-dialog-error">{error}</div>}
+        {!busy && !error && entries.length === 0 && (
+          <div className="scaffold-empty">Empty folder.</div>
+        )}
+        {!busy &&
+          !error &&
+          entries.map((entry) => (
+            <div
+              key={entry.name}
+              className={`remote-entry ${entry.is_dir ? "is-dir" : "is-file"}`}
+              role={entry.is_dir ? "button" : undefined}
+              tabIndex={entry.is_dir ? 0 : undefined}
+              onClick={() => onEnterFolder(entry)}
+              onKeyDown={(e) => {
+                if (entry.is_dir && (e.key === "Enter" || e.key === " ")) {
+                  e.preventDefault();
+                  onEnterFolder(entry);
+                }
+              }}
+            >
+              <span className="remote-entry-icon file-icon">
+                {entry.is_dir ? folderIcon() : fileIcon(remoteEntryExt(entry.name))}
+              </span>
+              <span className="remote-entry-name">{entry.name}</span>
+            </div>
+          ))}
+      </div>
+      <div className="remote-chosen">{footer}</div>
+    </div>
+  );
+}
diff --git a/src/components/projects/RemoteMachinesWindow.tsx b/src/components/projects/RemoteMachinesWindow.tsx
new file mode 100644
index 0000000..cb38cd0
--- /dev/null
+++ b/src/components/projects/RemoteMachinesWindow.tsx
@@ -0,0 +1,826 @@
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { invoke } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
+import { parseSshAddress, type ParsedSshAddress } from "./scaffold";
+import { RemoteFolderBrowser } from "./RemoteFolderBrowser";
+import { useRemoteBrowse } from "./useRemoteBrowse";
+import { useConnectDialogStore } from "../../stores/connectDialog";
+import { useRemoteStatusStore, PRIMARY_HOST } from "../../stores/remoteStatus";
+import { useRemoteMachinesStore } from "../../stores/remoteMachines";
+import { useHostBusyStore, busyReading, busyLabel } from "../../stores/hostBusy";
+import { ConnLamp } from "../common/ConnLamp";
+import { Toggle } from "../common/Toggle";
+import { PasswordInput } from "../common/PasswordInput";
+import { UntestedTag } from "../common/UntestedTag";
+import { useProjectsStore } from "../../stores/projects";
+import { formatRemoteTarget, resolveLocalMirror } from "../../types";
+import type { ComputeHost, ProjectEntry } from "../../types";
+
+/**
+ * Mounted once (AppShell). Renders the "Remote machines" manager for whichever
+ * remote project the `useRemoteMachinesStore` points at — opened from the pill's
+ * Runtime menu item and from a right-click on the pill's remote lamp. Keyed by
+ * project id so it re-seeds when the target changes.
+ */
+export function RemoteMachinesDialogHost() {
+  const projectId = useRemoteMachinesStore((s) => s.projectId);
+  const close = useRemoteMachinesStore((s) => s.close);
+  const project = useProjectsStore((s) =>
+    projectId ? s.projects.find((p) => p.id === projectId) : undefined,
+  );
+  if (!projectId || !project?.remote) return null;
+  return <RemoteMachinesWindow key={project.id} project={project} onClose={close} />;
+}
+
+/** The `worker-sync-report` event the backend emits after a code fan-out. */
+interface WorkerSyncReport {
+  project_id: string;
+  host_id: string;
+  head?: string;
+  ok: boolean;
+  skipped: boolean;
+  error?: string;
+}
+
+/**
+ * The pill's "Remote machines…" manager (`docs/multi_host_remote_plan.md` §4.4):
+ * list the project's extra worker hosts, add a new one, connect each, push code,
+ * pull outputs, and toggle per-worker settings. The primary remote stays the
+ * project's own `remote` — this manages ONLY the workers, which are one-way,
+ * read-only experiment machines.
+ *
+ * A remote project only. Rendered as a centered modal like ContainerSettings.
+ */
+export function RemoteMachinesWindow({
+  project,
+  onClose,
+}: {
+  project: ProjectEntry;
+  onClose: () => void;
+}) {
+  const workers = project.compute_hosts ?? [];
+  const openConnect = useConnectDialogStore((s) => s.open);
+  const byHost = useRemoteStatusStore((s) => s.byHost[project.id]);
+  // The primary host's live SSH state (multi-host remote keeps the primary in
+  // `byProject`, workers in `byHost`) — drives the primary entry's lamp/action.
+  const primary = useRemoteStatusStore((s) => s.byProject[project.id]);
+  const readings = useHostBusyStore((s) => s.readings);
+
+  // Sweep every CONNECTED host for live tmux sessions when this hub opens, so
+  // each card's lamp says whether that machine is merely reachable or actually
+  // working (`stores/hostBusy`). On-open only, never polled — one SSH round trip
+  // per connected host, riding the pool that is already up. A disconnected host
+  // is skipped: it has nothing to ask, and asking would dial it just to fail.
+  const primarySsh = primary?.ssh ?? "off";
+  const connectedKey = [
+    primarySsh === "connected" ? "primary" : "",
+    ...workers.filter((w) => (byHost?.[w.id]?.ssh ?? "off") === "connected").map((w) => w.id),
+  ]
+    .filter(Boolean)
+    .join("|");
+  useEffect(() => {
+    const probe = useHostBusyStore.getState().probeProjectHost;
+    if (primarySsh === "connected" && project.remote) {
+      void probe(project.id, PRIMARY_HOST, project.remote);
+    }
+    for (const w of workers) {
+      if ((byHost?.[w.id]?.ssh ?? "off") === "connected") void probe(project.id, w.id, w);
+    }
+    // Re-sweeps when the set of connected hosts changes (one just connected), not
+    // on every unrelated re-render of this dialog.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [project.id, connectedKey]);
+
+  // Patch the project's `compute_hosts` in the store from a CRUD command's return
+  // value — cheaper and side-effect-free vs a full project reload.
+  const applyHosts = (hosts: ComputeHost[]) => {
+    useProjectsStore.setState((s) => ({
+      projects: s.projects.map((p) =>
+        p.id === project.id ? { ...p, compute_hosts: hosts } : p,
+      ),
+    }));
+  };
+
+  // ── Global machine handed to this project (from MachinesIndicator) ────────
+  // The header's Machines menu picked this project in its "add to a project"
+  // list, which opened this window pre-seeded with the machine. Only the shared
+  // path is asked — everything else came with the machine — and the result is
+  // always a shared-filesystem worker (no copy, no git), added and connected
+  // exactly like the manual "Add a machine" flow.
+  const pendingDrop = useRemoteMachinesStore((s) => s.pendingDrop);
+  const setPendingDrop = useRemoteMachinesStore((s) => s.setPendingDrop);
+  const [dropPath, setDropPath] = useState(project.remote?.remote_path ?? "");
+  const [dropBusy, setDropBusy] = useState(false);
+  const [dropError, setDropError] = useState("");
+
+  const addDroppedMachine = async () => {
+    if (!pendingDrop) return;
+    const path = dropPath.trim();
+    if (!path.startsWith("/")) {
+      setDropError("Enter an absolute remote path (e.g. /home/me/project)");
+      return;
+    }
+    setDropBusy(true);
+    setDropError("");
+    const beforeIds = new Set(workers.map((w) => w.id));
+    const host: ComputeHost = {
+      id: "",
+      label: pendingDrop.label,
+      user: pendingDrop.user,
+      host: pendingDrop.host,
+      port: pendingDrop.port,
+      remote_path: path,
+      shared_fs: true,
+      sync_code: false,
+      pull_outputs: false,
+    };
+    try {
+      const hosts = await invoke<ComputeHost[]>("add_compute_host", {
+        projectId: project.id,
+        host,
+      });
+      applyHosts(hosts);
+      const added = hosts.find((h) => !beforeIds.has(h.id));
+      // Best-effort: the global machine is already authenticated, so this rides
+      // the same saved keychain credential (or key/agent auth) with no prompt.
+      // Silent on failure — the new card's own Connect button still works.
+      if (added) void invoke("remote_connect", { projectId: project.id, hostId: added.id }).catch(() => {});
+      setPendingDrop(null);
+      setDropPath(project.remote?.remote_path ?? "");
+    } catch (e) {
+      setDropError(String(e));
+    } finally {
+      setDropBusy(false);
+    }
+  };
+
+  // Add-machine form. A new machine defaults to a SHARED-FILESYSTEM host (no copy,
+  // shells run in the primary's shared folder); tick "Sync a copy" to make it the
+  // synced-copy worker instead. The path defaults to the primary's own remote path,
+  // since on a shared filesystem the folder is usually at the same place.
+  const [address, setAddress] = useState("");
+  const [username, setUsername] = useState("");
+  const [remotePath, setRemotePath] = useState(project.remote?.remote_path ?? "");
+  const [label, setLabel] = useState("");
+  const [syncCopy, setSyncCopy] = useState(false);
+  const [addError, setAddError] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  // ── Connect-then-browse folder picker (same machinery as extend-to-remote) ──
+  // Rather than typing the path blind, the user can connect to the machine and
+  // browse its filesystem to the target folder — for a shared-fs worker that is
+  // the existing primary folder; for a synced copy it's where the copy should go
+  // (and can be created here). Uses the one-shot SFTP commands (`ssh_connect` to
+  // validate + warm the ControlMaster, then `ssh_list_dir`/`ssh_mkdir`), so it
+  // needs no pooled worker connection first. The password is transient — used
+  // only for this browse, never persisted (the worker's real connect, and its
+  // "Save password", live in the shared Connect modal opened later).
+  const [browsePassword, setBrowsePassword] = useState("");
+  // "Save password" opt-in (default off, matching the no-storage-by-default
+  // policy). When on, the login below persists the SSH password to the OS
+  // keychain via `ssh_connect`'s `remember` flag — keyed by host target, so the
+  // machine's own Connect modal (RemoteConnectDialog) finds it and never asks.
+  // `savedPw` reflects the keychain and pre-ticks the box so an untick is a
+  // deliberate delete, never an accidental clear of another menu's credential.
+  const [savePassword, setSavePassword] = useState(false);
+  const [savedPw, setSavedPw] = useState(false);
+  // The connect + browse mechanism is the SHARED one (`useRemoteBrowse`), the same
+  // the primary machine's new/extend flow uses — this dialog only wraps its own
+  // fields around it. `browsing` is a view flag on top (whether the folder panel is
+  // expanded), distinct from `browse.conn` (whether a live session exists).
+  const browse = useRemoteBrowse();
+  const [browsing, setBrowsing] = useState(false);
+  const [browseConnecting, setBrowseConnecting] = useState(false);
+  const [browsePaths, setBrowsePaths] = useState<string[]>([]);
+
+  // Editing the address after opening the browser invalidates the frozen
+  // connection it lists over — close it so a stale listing can't be trusted.
+  const onAddressChange = (v: string) => {
+    setAddress(v);
+    if (browsing) setBrowsing(false);
+    browse.reset();
+  };
+
+  // The login target: parse the address, then take the username from the
+  // dedicated field when the address didn't inline a `user@` (the inline form
+  // still wins, so a full `me@box` address keeps working).
+  const parseTarget = (): ParsedSshAddress | null => {
+    const parsed = parseSshAddress(address);
+    if (!parsed) return null;
+    return { ...parsed, user: parsed.user ?? (username.trim() || null) };
+  };
+
+  // Reflect the keychain: when the typed target already has a saved password,
+  // say so and pre-tick "Save password" (so the box mirrors reality and an
+  // untick reads as a deliberate delete). The credential is keyed by host
+  // target and shared across every remote menu.
+  useEffect(() => {
+    const parsed = parseTarget();
+    if (!parsed) {
+      setSavedPw(false);
+      setSavePassword(false);
+      return;
+    }
+    let cancelled = false;
+    invoke<boolean>("remote_has_saved_password", {
+      user: parsed.user,
+      host: parsed.host,
+      port: parsed.port,
+    })
+      .then((has) => {
+        if (cancelled) return;
+        setSavedPw(has);
+        setSavePassword(has);
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [address, username]);
+
+  const startBrowse = async () => {
+    const parsed = parseTarget();
+    if (!parsed) {
+      setAddError("Enter a host as [user@]host[:port] before browsing");
+      return;
+    }
+    setAddError("");
+    browse.setError("");
+    setBrowseConnecting(true);
+    const password = browsePassword ? browsePassword : null;
+    try {
+      // The shared connect: validate the credential + warm the ControlMaster (a
+      // key-auth host connects with a null password), remember the working password
+      // only on success (keyed by host target, so the machine's own Connect finds
+      // it), then open the start dir. Seed the browse at the current path field —
+      // which defaults to the primary machine's project path — so the picker opens
+      // there *on the new machine* (usually the same shared folder) rather than at
+      // this host's home; a synced-copy worker whose folder doesn't exist yet can
+      // navigate up from it. The listing refreshes itself.
+      await browse.connect({
+        target: parsed,
+        password,
+        remember: savePassword,
+        startPath: remotePath.trim() || null,
+      });
+      setSavedPw(savePassword);
+      setBrowsing(true);
+      invoke<string[]>("remote_list_paths", { host: parsed.host })
+        .then(setBrowsePaths)
+        .catch(() => setBrowsePaths([]));
+    } catch (e) {
+      browse.setError(String(e));
+    } finally {
+      setBrowseConnecting(false);
+    }
+  };
+
+  const useBrowsedFolder = () => {
+    setRemotePath(browse.path || "/");
+    setBrowsing(false);
+  };
+
+  // "Change…" after a successful login — drop the frozen connection so the
+  // address/password step comes back and a fresh login can be made.
+  const logout = () => {
+    setBrowsing(false);
+    browse.reset();
+    setRemotePath(project.remote?.remote_path ?? "");
+  };
+
+  // Last sync report per host (for the "last synced" line).
+  const [reports, setReports] = useState<Record<string, WorkerSyncReport>>({});
+  useEffect(() => {
+    let un: (() => void) | undefined;
+    let cancelled = false;
+    void listen<WorkerSyncReport>("worker-sync-report", (ev) => {
+      if (ev.payload.project_id !== project.id) return;
+      setReports((prev) => ({ ...prev, [ev.payload.host_id]: ev.payload }));
+    }).then((u) => {
+      if (cancelled) u();
+      else un = u;
+    });
+    return () => {
+      cancelled = true;
+      un?.();
+    };
+  }, [project.id]);
+
+  const addMachine = async () => {
+    const parsed = parseTarget();
+    if (!parsed) {
+      setAddError("Enter a host as [user@]host[:port]");
+      return;
+    }
+    const path = remotePath.trim();
+    if (!path.startsWith("/")) {
+      setAddError("Enter an absolute remote path (e.g. /home/me/project)");
+      return;
+    }
+    setBusy(true);
+    setAddError("");
+    const host: ComputeHost = {
+      id: "", // backend mints one
+      label: label.trim() || undefined,
+      user: parsed.user ?? undefined,
+      host: parsed.host,
+      port: parsed.port ?? undefined,
+      remote_path: path,
+      // Default: shared filesystem (no copy). "Sync a copy" opts into a synced
+      // worker that keeps its own tracked tree at the primary's HEAD.
+      shared_fs: !syncCopy,
+      sync_code: syncCopy,
+      pull_outputs: false,
+    };
+    try {
+      const hosts = await invoke<ComputeHost[]>("add_compute_host", {
+        projectId: project.id,
+        host,
+      });
+      applyHosts(hosts);
+      setAddress("");
+      setUsername("");
+      setRemotePath(project.remote?.remote_path ?? "");
+      setLabel("");
+      setSyncCopy(false);
+      setBrowsePassword("");
+      setBrowsing(false);
+      browse.reset();
+    } catch (e) {
+      setAddError(String(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const removeMachine = async (hostId: string) => {
+    // Disconnect it first (best effort), then drop it.
+    await invoke("remote_disconnect", { projectId: project.id, hostId }).catch(() => {});
+    useRemoteStatusStore.getState().clearHost(project.id, hostId);
+    const hosts = await invoke<ComputeHost[]>("remove_compute_host", {
+      projectId: project.id,
+      hostId,
+    }).catch(() => null);
+    if (hosts) applyHosts(hosts);
+  };
+
+  const patch = async (hostId: string, fields: Record<string, unknown>) => {
+    const hosts = await invoke<ComputeHost[]>("patch_compute_host", {
+      projectId: project.id,
+      hostId,
+      ...fields,
+    }).catch(() => null);
+    if (hosts) applyHosts(hosts);
+  };
+
+  // Pull outputs: preview the size first (a checkpoint dir can be huge), confirm,
+  // then fetch into a local outputs/<label>/ folder. The only worker→local path.
+  const [pulling, setPulling] = useState<string | null>(null);
+  const [pullNote, setPullNote] = useState<Record<string, string>>({});
+  const pullOutputs = async (hostId: string) => {
+    setPulling(hostId);
+    setPullNote((p) => ({ ...p, [hostId]: "" }));
+    try {
+      const preview = await invoke<{ files: number; bytes: number }>("worker_outputs_preview", {
+        projectId: project.id,
+        hostId,
+      });
+      if (preview.files === 0) {
+        setPullNote((p) => ({ ...p, [hostId]: "No output files to pull." }));
+        return;
+      }
+      const ok = window.confirm(
+        `Pull ${preview.files} output file(s) (${formatBytes(preview.bytes)}) from this machine to your computer?`,
+      );
+      if (!ok) return;
+      const rep = await invoke<{ pulled: number; bytes: number; dest: string; errors: string[] }>(
+        "worker_pull_outputs",
+        { projectId: project.id, hostId },
+      );
+      const errs = rep.errors.length ? ` (${rep.errors.length} failed)` : "";
+      setPullNote((p) => ({
+        ...p,
+        [hostId]: `Pulled ${rep.pulled} file(s) → ${rep.dest}${errs}`,
+      }));
+    } catch (e) {
+      setPullNote((p) => ({ ...p, [hostId]: `Pull failed: ${e}` }));
+    } finally {
+      setPulling(null);
+    }
+  };
+
+  const syncNow = async (hostId: string) => {
+    setReports((prev) => ({
+      ...prev,
+      [hostId]: { project_id: project.id, host_id: hostId, ok: false, skipped: false },
+    }));
+    const rep = await invoke<WorkerSyncReport>("worker_sync_now", {
+      projectId: project.id,
+      hostId,
+    }).catch((e) => ({
+      project_id: project.id,
+      host_id: hostId,
+      ok: false,
+      skipped: false,
+      error: String(e),
+    }));
+    setReports((prev) => ({ ...prev, [hostId]: rep }));
+  };
+
+  return createPortal(
+    <div className="modal-backdrop" onMouseDown={onClose}>
+      <div className="project-dialog dialog-framed remote-machines-dialog" onMouseDown={(e) => e.stopPropagation()}>
+        <div className="settings-title-row">
+          <h2>{project.name} — Remote machines</h2>
+          <button type="button" className="dialog-close-btn" onClick={onClose}>×</button>
+        </div>
+
+        <div className="dialog-scroll">
+        <p className="settings-help">
+          Every machine this project reaches, in one place — the <strong>primary</strong>{" "}
+          that owns its files and git, plus any extra worker machines that run its{" "}
+          <strong>same code</strong>. Connect or manage any of them here, or add a new
+          worker below. A new worker shares the primary's project folder by default (no
+          copy, no git); tick <strong>Sync a copy</strong> to give it its own
+          one-way-synced copy — for hosts that don't share storage with the primary.
+        </p>
+
+        {/* ── Primary host ────────────────────────────────────────────────────
+            The project's own `remote` — it owns files, git, and the local mirror,
+            with full two-way sync. Listed first so the one menu covers connecting
+            the primary too, not only the workers; its Connect/Manage opens the same
+            per-host detail (`RemoteConnectDialog`) a worker's does, targeting
+            `"primary"`. No sync/pull/remove: those are worker-only concepts. */}
+        {(() => {
+          const ssh = primary?.ssh ?? "off";
+          const pLabel = project.remote?.label || project.remote?.host || project.name;
+          const mirror = resolveLocalMirror(project);
+          const busy = ssh === "connected" ? busyReading({ readings }, project.remote) : null;
+          return (
+            <div className="remote-machine-card">
+              <div className="remote-machine-head">
+                <ConnLamp
+                  status={ssh}
+                  busy={busy !== null}
+                  label={busy ? `${pLabel} — ${busyLabel(busy)}` : pLabel}
+                />
+                <span className="remote-machine-name">{pLabel}</span>
+                <span
+                  className="remote-machine-tag"
+                  title="The primary machine owns this project's files, git and local mirror, with full two-way sync."
+                >
+                  Primary
+                </span>
+                <UntestedTag />
+                <span className="remote-machine-target">
+                  {project.remote && formatRemoteTarget(project.remote)}
+                </span>
+              </div>
+              <div className="remote-machine-status">
+                {ssh === "connected" ? "Connected." : "Not connected."}
+                {mirror ? ` Local mirror: ${mirror}` : ""}
+              </div>
+              <div className="remote-machine-actions">
+                <button onClick={() => openConnect(project.id, "primary")}>
+                  {ssh === "connected" ? "Manage…" : "Connect…"}
+                </button>
+              </div>
+            </div>
+          );
+        })()}
+
+        {/* A global machine picked for this project in the header's Machines
+            menu — confirm just the shared path, then add + connect it like any
+            other worker. */}
+        {pendingDrop && (
+          <div className="remote-machine-card remote-machine-drop-panel">
+            <div className="remote-machine-head">
+              <ConnLamp status="connected" label={pendingDrop.label || pendingDrop.host} />
+              <span className="remote-machine-name">
+                {pendingDrop.label || pendingDrop.host}
+              </span>
+              <span className="remote-machine-tag">Shared filesystem</span>
+              <span className="remote-machine-target">
+                {pendingDrop.user ? `${pendingDrop.user}@` : ""}
+                {pendingDrop.host}
+                {pendingDrop.port ? `:${pendingDrop.port}` : ""}
+              </span>
+            </div>
+            <p className="settings-help">
+              From your global machines. Give the shared path it sees this
+              project's folder at — everything else is already known.
+            </p>
+            <label>
+              <span className="remote-machine-add-label">Path on this machine</span>
+              <input
+                placeholder="Absolute path (e.g. /home/me/project)"
+                value={dropPath}
+                onChange={(e) => setDropPath(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") void addDroppedMachine();
+                }}
+                spellCheck={false}
+                autoFocus
+              />
+            </label>
+            {dropError && <div className="project-dialog-error">{dropError}</div>}
+            <div className="project-dialog-actions">
+              <button type="button" onClick={() => setPendingDrop(null)}>
+                Cancel
+              </button>
+              <button type="button" disabled={dropBusy} onClick={() => void addDroppedMachine()}>
+                {dropBusy ? "Adding…" : "Add machine"}
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Existing workers */}
+        <div className="remote-machine-worker-list">
+        {workers.length === 0 && (
+          <p className="settings-help">No worker machines yet.</p>
+        )}
+        {workers.map((w) => {
+          const ssh = byHost?.[w.id]?.ssh ?? "off";
+          const rep = reports[w.id];
+          const wLabel = w.label || w.host;
+          const wBusy = ssh === "connected" ? busyReading({ readings }, w) : null;
+          const shared = w.shared_fs === true;
+          const statusText = shared
+            ? "Runs in the primary's shared folder — no copy, no sync."
+            : rep?.error
+              ? `Sync failed: ${rep.error}`
+              : rep?.head
+                ? `Last synced: ${rep.head}${rep.skipped ? " (already current)" : ""}`
+                : rep && !rep.ok
+                  ? "Syncing…"
+                  : "Not synced yet";
+          return (
+            <div key={w.id} className="remote-machine-card">
+              <div className="remote-machine-head">
+                <ConnLamp
+                  status={ssh}
+                  busy={wBusy !== null}
+                  label={wBusy ? `${wLabel} — ${busyLabel(wBusy)}` : wLabel}
+                />
+                <span className="remote-machine-name">{wLabel}</span>
+                <span
+                  className="remote-machine-tag"
+                  title={
+                    shared
+                      ? "Shared filesystem: shells run in the primary's project folder on this machine. No code is copied and git is never run here."
+                      : "Synced copy: this machine keeps its own read-only copy of the code, one-way synced from the primary."
+                  }
+                >
+                  {shared ? "Shared filesystem" : "Synced copy"}
+                </span>
+                <span className="remote-machine-target">
+                  {w.user ? `${w.user}@` : ""}{w.host}{w.port ? `:${w.port}` : ""}:{w.remote_path}
+                </span>
+              </div>
+              <div className={`remote-machine-status${rep?.error && !shared ? " error" : ""}`}>
+                {statusText}
+              </div>
+              <div className="remote-machine-actions">
+                <button onClick={() => openConnect(project.id, w.id)}>
+                  {ssh === "connected" ? "Manage…" : "Connect…"}
+                </button>
+                {!shared && (
+                  <>
+                    <button disabled={ssh !== "connected"} onClick={() => void syncNow(w.id)}>
+                      Sync code now
+                    </button>
+                    <button
+                      disabled={ssh !== "connected" || pulling === w.id}
+                      onClick={() => void pullOutputs(w.id)}
+                      title="Fetch this machine's experiment outputs (untracked files) to your computer. Confirms the size first."
+                    >
+                      {pulling === w.id ? "Pulling…" : "Pull outputs…"}
+                    </button>
+                  </>
+                )}
+                <button
+                  className="danger"
+                  onClick={() => void removeMachine(w.id)}
+                  title="Remove this machine from the project (its files on the host are left untouched)."
+                >
+                  Remove
+                </button>
+              </div>
+              <label className="remote-machine-toggle" title="On: this machine keeps its own copy of the code, one-way synced from the primary. Off: it shares the primary's project folder over a shared filesystem (no copy, no git).">
+                <span>Sync a copy of the code to this machine</span>
+                <Toggle
+                  checked={!shared}
+                  onChange={(e) =>
+                    void patch(
+                      w.id,
+                      e.target.checked ? { sharedFs: false, syncCode: true } : { sharedFs: true },
+                    )
+                  }
+                  size="sm"
+                />
+              </label>
+              {!shared && (
+                <label className="remote-machine-toggle" title="Keep this machine's tracked code synced to the project HEAD on every commit.">
+                  <span>Auto-sync code on every commit</span>
+                  <Toggle
+                    checked={w.sync_code !== false}
+                    onChange={(e) => void patch(w.id, { syncCode: e.target.checked })}
+                    size="sm"
+                  />
+                </label>
+              )}
+              {pullNote[w.id] && <div className="settings-help">{pullNote[w.id]}</div>}
+            </div>
+          );
+        })}
+        </div>
+
+        {/* Add machine — two steps: log in first, then choose the folder. */}
+        <div className="remote-machine-add">
+          <div className="remote-machine-add-title">Add a machine</div>
+
+          {!browse.conn ? (
+            /* ── Step 1: log in ────────────────────────────────────────── */
+            <>
+              <label>
+                SSH address
+                <input
+                  placeholder="host[:port]  (e.g. gpu-2:22)"
+                  value={address}
+                  onChange={(e) => onAddressChange(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") void startBrowse();
+                  }}
+                  spellCheck={false}
+                />
+              </label>
+              <label>
+                <span className="remote-machine-add-label">
+                  Username
+                  <UntestedTag />
+                </span>
+                <input
+                  placeholder="SSH login user (e.g. me) — or include it as user@ above"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") void startBrowse();
+                  }}
+                  autoComplete="off"
+                  spellCheck={false}
+                />
+              </label>
+              <label>
+                Password
+                <PasswordInput
+                  placeholder={
+                    savedPw
+                      ? "Using saved password — leave blank"
+                      : "SSH password — leave blank for key auth"
+                  }
+                  value={browsePassword}
+                  autoComplete="off"
+                  onChange={(e) => setBrowsePassword(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") void startBrowse();
+                  }}
+                />
+              </label>
+              <label
+                className="container-settings-toggle"
+                title="Save this machine's SSH password in your OS keychain, keyed by host — the machine's own Connect menu then finds it and won't ask again. Off by default; an untick deletes a previously-saved one."
+              >
+                <span className="remote-machine-add-label">
+                  Save password
+                  <UntestedTag />
+                </span>
+                <Toggle
+                  checked={savePassword}
+                  onChange={(e) => setSavePassword(e.target.checked)}
+                  size="sm"
+                />
+              </label>
+              <div className="settings-help">
+                {savePassword
+                  ? savedPw
+                    ? "Saved in your OS keychain — this machine's Connect won't ask again. Turn off to delete it."
+                    : "Will be saved to your OS keychain so this machine's Connect won't ask again."
+                  : "Used only to log in — not saved. Turn on “Save password” to keep it."}
+              </div>
+              {browse.error && <div className="project-dialog-error">{browse.error}</div>}
+              {addError && <div className="project-dialog-error">{addError}</div>}
+              <div className="project-dialog-actions">
+                <button type="button" onClick={onClose}>Close</button>
+                <button
+                  type="button"
+                  disabled={browseConnecting}
+                  onClick={() => void startBrowse()}
+                >
+                  {browseConnecting ? "Logging in…" : "Log in"}
+                </button>
+              </div>
+            </>
+          ) : (
+            /* ── Step 2: logged in — choose the folder ─────────────────── */
+            <>
+              {(() => {
+                const loggedInAs = `${browse.conn!.user ? `${browse.conn!.user}@` : ""}${browse.conn!.host}${browse.conn!.port ? `:${browse.conn!.port}` : ""}`;
+                return (
+                  <div className="remote-machine-loggedin">
+                    <ConnLamp status="connected" label={loggedInAs} />
+                    <span>
+                      Logged in to <strong>{loggedInAs}</strong>
+                    </span>
+                    <button type="button" onClick={logout}>Change…</button>
+                  </div>
+                );
+              })()}
+
+              <label className="container-settings-toggle" title="Off (default): this machine shares the primary's project folder over a shared filesystem — no copy, no git. On: give it its own one-way-synced copy of the code (for hosts that don't share storage).">
+                <span>Sync a copy of the code to this machine</span>
+                <Toggle checked={syncCopy} onChange={(e) => setSyncCopy(e.target.checked)} size="sm" />
+              </label>
+              <p className="settings-help">
+                {syncCopy
+                  ? "This machine keeps its own copy of the code, one-way synced from the primary. Browse to (or create) the folder for that copy."
+                  : "This machine shares the primary's project folder over a shared filesystem — no copy, no git. Browse to that folder on this machine."}
+              </p>
+
+              <label>
+                <span className="remote-machine-add-label">
+                  {syncCopy ? "Remote path for this machine's copy" : "Path to the project on this machine"}
+                  <UntestedTag />
+                </span>
+                <div className="folder-picker-row">
+                  <input
+                    placeholder="Absolute path (e.g. /home/me/project)"
+                    value={remotePath}
+                    onChange={(e) => setRemotePath(e.target.value)}
+                    spellCheck={false}
+                  />
+                  <button
+                    type="button"
+                    disabled={browseConnecting}
+                    onClick={() => void startBrowse()}
+                  >
+                    {browseConnecting ? "Connecting…" : browsing ? "Reconnect" : "Browse…"}
+                  </button>
+                </div>
+              </label>
+
+              {browsing && browse.conn && (
+                <RemoteFolderBrowser
+                  path={browse.path}
+                  entries={browse.entries}
+                  busy={browse.busy}
+                  error={browse.error}
+                  recentPaths={browsePaths}
+                  onGoUp={browse.goUp}
+                  onJumpPath={browse.jump}
+                  onEnterFolder={browse.enter}
+                  onUseFolder={useBrowsedFolder}
+                  onCreateFolder={browse.mkdir}
+                  footer="Browse to a folder, then click “Use this folder”."
+                />
+              )}
+
+              <label>
+                Label (optional)
+                <input
+                  placeholder="e.g. gpu-2"
+                  value={label}
+                  onChange={(e) => setLabel(e.target.value)}
+                  spellCheck={false}
+                />
+              </label>
+              {addError && <div className="project-dialog-error">{addError}</div>}
+              <div className="project-dialog-actions">
+                <button type="button" onClick={onClose}>Close</button>
+                <button type="button" disabled={busy} onClick={() => void addMachine()}>
+                  {busy ? "Adding…" : "Add machine"}
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+function formatBytes(n: number): string {
+  if (n < 1024) return `${n} B`;
+  const units = ["KB", "MB", "GB", "TB"];
+  let v = n / 1024;
+  let i = 0;
+  while (v >= 1024 && i < units.length - 1) {
+    v /= 1024;
+    i++;
+  }
+  return `${v.toFixed(1)} ${units[i]}`;
+}
diff --git a/src/components/projects/RemoteProjectSection.tsx b/src/components/projects/RemoteProjectSection.tsx
index 47a0ece..3f490d3 100644
--- a/src/components/projects/RemoteProjectSection.tsx
+++ b/src/components/projects/RemoteProjectSection.tsx
@@ -1,25 +1,18 @@
-import { useState } from "react";
 import { joinRemotePath } from "./scaffold";
-import { fileIcon, folderIcon } from "../../lib/viewers/fileUtils";
+import { RemoteFolderBrowser } from "./RemoteFolderBrowser";
 import { TerminalView } from "../terminal/TerminalView";
 import { ConnectionLog } from "../common/ConnectionLog";
 import { ConnLamp } from "../common/ConnLamp";
 import { Dropdown } from "../common/Dropdown";
 import { PasswordInput } from "../common/PasswordInput";
+import { Toggle } from "../common/Toggle";
+import { VpnTunnelUpNotice } from "../common/VpnTunnelUpNotice";
+import { useVpnSectionVisible } from "../../stores/vpnStatus";
 import type { ConnState } from "../../stores/remoteStatus";
 import type { useRemoteSession } from "./useRemoteSession";
 
 type RemoteSession = ReturnType<typeof useRemoteSession>;
 
-/** Extension (".py", ".md", …) of a remote listing entry, for picking its
- *  file-type icon the same way the right-hand file tree does. A leading-dot
- *  name (e.g. ".gitignore") has no extension, so it falls back to the generic
- *  file icon. */
-function remoteEntryExt(name: string): string | null {
-  const dot = name.lastIndexOf(".");
-  return dot > 0 ? name.slice(dot) : null;
-}
-
 /** Map the dialog's connection status (`idle|connecting|connected|error`) to a
  *  lamp state (`off|connecting|connected|error`). */
 function lampOf(status: RemoteSession["sshStatus"]): ConnState {
@@ -83,6 +76,10 @@ export function RemoteProjectSection({
     sshPassword,
     sshStatus,
     sshError,
+    sshRemember,
+    setSshRemember,
+    sshSaved,
+    forgetSshPassword,
     remoteBrowsePath,
     remoteEntries,
     remoteListBusy,
@@ -107,6 +104,10 @@ export function RemoteProjectSection({
     vpnStatus,
     setVpnStatus,
     vpnError,
+    vpnRemember,
+    setVpnRemember,
+    vpnSaved,
+    forgetVpnPassword,
     vpnLog,
     vpnTerm,
     startVpnTerm,
@@ -124,14 +125,14 @@ export function RemoteProjectSection({
     createRemoteFolder,
   } = remote;
 
-  // Inline "new folder" entry within the remote browser (local to this view).
-  const [newFolderName, setNewFolderName] = useState("");
-  const submitNewFolder = () => {
-    const name = newFolderName.trim();
-    if (!name) return;
-    void createRemoteFolder(name);
-    setNewFolderName("");
-  };
+  // Same gate as the Connect modal: a tunnel is machine-wide, so once one is up
+  // (from the header, another project, or connect-on-launch) this dialog has no
+  // tunnel left to offer and collapses its OpenVPN block to a one-line notice —
+  // unless the live tunnel is the one *this* dialog just brought up, whose log and
+  // state belong here. The project simply stores no config in that case; the
+  // Connect modal can still attach one later.
+  const vpnBusy = vpnStatus === "connecting" || vpnStatus === "connected";
+  const showVpnSection = useVpnSectionVisible(vpnBusy);
 
   if (!isRemoteProject) return null;
 
@@ -192,7 +193,7 @@ export function RemoteProjectSection({
                   "Password auth needs OpenSSH 8.4+ or sshpass — update OpenSSH or install sshpass, or use SSH keys (leave the password blank).",
                 );
               }
-              if (vpnEnabled && vpnConfig && !sshTooling.openvpn) {
+              if (showVpnSection && vpnEnabled && vpnConfig && !sshTooling.openvpn) {
                 warnings.push(
                   "openvpn/pkexec not found — VPN-gated hosts can't connect. Install openvpn and polkit.",
                 );
@@ -208,6 +209,11 @@ export function RemoteProjectSection({
             })()}
 
           <div className="ssh-connect-fields" role="group" aria-label="OpenVPN tunnel">
+            {/* A tunnel that is already up machine-wide leaves this section nothing
+                to do — say so in one line and go straight to SSH. */}
+            {!showVpnSection && <VpnTunnelUpNotice />}
+            {showVpnSection && (
+              <>
             {/* OpenVPN is opt-in (default off): reaching the host directly needs
                 no tunnel when you're already on the right network. Flip the toggle
                 only for a VPN-gated host; the config + connect UI stays collapsed
@@ -288,12 +294,24 @@ export function RemoteProjectSection({
                     )}
                     <label>
                       {vpnNeeds.username ? "VPN password" : "VPN passphrase"}{" "}
-                      <span className="ssh-optional-hint">(not stored; asked again on activation)</span>
+                      <span className="ssh-optional-hint">
+                        {vpnSaved
+                          ? "(saved in your OS keychain)"
+                          : "(not stored unless you save it below)"}
+                      </span>
                       <div className="folder-picker-row">
                         <PasswordInput
                           className="ssh-password-input"
                           value={vpnPassword}
-                          placeholder={vpnNeeds.username ? "OpenVPN account password" : "VPN passphrase"}
+                          // A saved secret can't be pre-filled — it never leaves the
+                          // backend — so blank means "use the saved one".
+                          placeholder={
+                            vpnSaved
+                              ? "Using saved passphrase — leave blank"
+                              : vpnNeeds.username
+                                ? "OpenVPN account password"
+                                : "VPN passphrase"
+                          }
                           onChange={(e) => {
                             setVpnPassword(e.target.value);
                             if (vpnStatus !== "idle") setVpnStatus("idle");
@@ -307,12 +325,20 @@ export function RemoteProjectSection({
                     {vpnNeedsKeyPassphrase && (
                       <label>
                         Private key passphrase{" "}
-                        <span className="ssh-optional-hint">(not stored; asked again on activation)</span>
+                        <span className="ssh-optional-hint">
+                          {vpnSaved
+                            ? "(saved in your OS keychain)"
+                            : "(not stored unless you save it below)"}
+                        </span>
                         <div className="folder-picker-row">
                           <PasswordInput
                             className="ssh-password-input"
                             value={vpnKeyPassphrase}
-                            placeholder="Passphrase for the config's encrypted key"
+                            placeholder={
+                              vpnSaved
+                                ? "Using saved passphrase — leave blank"
+                                : "Passphrase for the config's encrypted key"
+                            }
                             onChange={(e) => {
                               setVpnKeyPassphrase(e.target.value);
                               if (vpnStatus !== "idle") setVpnStatus("idle");
@@ -322,6 +348,25 @@ export function RemoteProjectSection({
                         </div>
                       </label>
                     )}
+                    {/* Same opt-in as the Connect modal's, writing the same keychain
+                        entry (keyed by config path). Without it, a tunnel set up here
+                        asked for its passphrase again on the very next activation. */}
+                    <label className="remote-connect-remember">
+                      <Toggle
+                        size="sm"
+                        checked={vpnRemember}
+                        onChange={(e) => {
+                          setVpnRemember(e.target.checked);
+                          if (!e.target.checked && vpnSaved) void forgetVpnPassword();
+                        }}
+                      />
+                      {vpnNeedsKeyPassphrase ? "Save VPN credentials" : "Save passphrase"}
+                      <span className="ssh-optional-hint">
+                        {vpnSaved
+                          ? "saved in your OS keychain — turn off to delete it"
+                          : "stored securely in your OS keychain"}
+                      </span>
+                    </label>
                     {(vpnStatus === "connecting" || vpnLog.length > 0) && (
                       <ConnectionLog lines={vpnLog} busy={vpnStatus === "connecting"} />
                     )}
@@ -383,6 +428,8 @@ export function RemoteProjectSection({
                   </div>
                 )}
               </div>
+            )}
+              </>
             )}
             <label>
               <span className="remote-field-label">
@@ -422,13 +469,21 @@ export function RemoteProjectSection({
                 <label>
                   Password{" "}
                   <span className="ssh-optional-hint">
-                    (not stored; blank uses SSH key)
+                    {sshSaved
+                      ? "(saved in your OS keychain)"
+                      : "(not stored unless you save it below; blank uses SSH key)"}
                   </span>
                   <div className="folder-picker-row">
                     <PasswordInput
                       className="ssh-password-input"
                       value={sshPassword}
-                      placeholder="leave empty for key/agent auth"
+                      // A saved password never leaves the backend, so it can't be
+                      // pre-filled: blank + Connect authenticates with it.
+                      placeholder={
+                        sshSaved
+                          ? "Using saved password — leave blank"
+                          : "leave empty for key/agent auth"
+                      }
                       onChange={(e) => onSshPasswordChange(e.target.value)}
                       onKeyDown={(e) => {
                         if (e.key === "Enter" && sshAddress.trim() && sshStatus !== "connecting") {
@@ -451,6 +506,27 @@ export function RemoteProjectSection({
                     </button>
                   </div>
                 </label>
+                {/* The keychain is keyed by host target, not by project — so the
+                    password saved here is the one this project's later reconnects
+                    (and auto-connect) use, and a host already saved by another
+                    project shows up pre-ticked rather than being silently cleared. */}
+                <label className="remote-connect-remember">
+                  <Toggle
+                    size="sm"
+                    checked={sshRemember}
+                    onChange={(e) => {
+                      setSshRemember(e.target.checked);
+                      // Untick = delete it now, not at a next connect that may never come.
+                      if (!e.target.checked && sshSaved) void forgetSshPassword();
+                    }}
+                  />
+                  Save password
+                  <span className="ssh-optional-hint">
+                    {sshSaved
+                      ? "saved in your OS keychain — turn off to delete it"
+                      : "stored securely in your OS keychain"}
+                  </span>
+                </label>
                 {sshStatus === "error" && sshError && (
                   <div className="project-dialog-error">{sshError}</div>
                 )}
@@ -557,93 +633,25 @@ export function RemoteProjectSection({
       )}
 
       {step === "browse" && !winManual && (
-        <div className="remote-browser" role="group" aria-label="Remote folder browser">
-          <div className="remote-browser-header">
-            <button type="button" className="remote-up-btn" onClick={remoteGoUp} title="Go up">
-              ..
-            </button>
-            <span className="remote-breadcrumb" title={remoteBrowsePath}>
-              {remoteBrowsePath || "/"}
-            </span>
-            {remotePaths.length > 0 && (
-              <Dropdown
-                className="vpn-config-recent"
-                value=""
-                placeholder="Recently used…"
-                title="Jump to a previously-used remote path for this host"
-                onChange={(v) => {
-                  if (v) jumpToRemotePath(v);
-                }}
-                options={remotePaths.map((p) => ({ value: p, label: p }))}
-              />
-            )}
-            <button type="button" onClick={onUseThisFolder}>
-              Use this folder
-            </button>
-          </div>
-          <div className="remote-newfolder">
-            <input
-              type="text"
-              className="remote-newfolder-input"
-              placeholder="New folder name…"
-              value={newFolderName}
-              onChange={(e) => setNewFolderName(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") {
-                  e.preventDefault();
-                  submitNewFolder();
-                }
-              }}
-              disabled={remoteListBusy}
-            />
-            <button
-              type="button"
-              onClick={submitNewFolder}
-              disabled={remoteListBusy || !newFolderName.trim()}
-              title="Create a new folder here"
-            >
-              + Add folder
-            </button>
-          </div>
-          <div className="remote-list">
-            {remoteListBusy && <div className="scaffold-empty">Listing...</div>}
-            {!remoteListBusy && remoteListError && (
-              <div className="project-dialog-error">{remoteListError}</div>
-            )}
-            {!remoteListBusy && !remoteListError && remoteEntries.length === 0 && (
-              <div className="scaffold-empty">Empty folder.</div>
-            )}
-            {!remoteListBusy &&
-              !remoteListError &&
-              remoteEntries.map((entry) => (
-                <div
-                  key={entry.name}
-                  className={`remote-entry ${entry.is_dir ? "is-dir" : "is-file"}`}
-                  role={entry.is_dir ? "button" : undefined}
-                  tabIndex={entry.is_dir ? 0 : undefined}
-                  onClick={() => enterRemoteFolder(entry)}
-                  onKeyDown={(e) => {
-                    if (entry.is_dir && (e.key === "Enter" || e.key === " ")) {
-                      e.preventDefault();
-                      enterRemoteFolder(entry);
-                    }
-                  }}
-                >
-                  <span className="remote-entry-icon file-icon">
-                    {entry.is_dir ? folderIcon() : fileIcon(remoteEntryExt(entry.name))}
-                  </span>
-                  <span className="remote-entry-name">{entry.name}</span>
-                </div>
-              ))}
-          </div>
-          <div className="remote-chosen">
-            {remoteChosenPath
+        <RemoteFolderBrowser
+          path={remoteBrowsePath}
+          entries={remoteEntries}
+          busy={remoteListBusy}
+          error={remoteListError}
+          recentPaths={remotePaths}
+          onGoUp={remoteGoUp}
+          onJumpPath={jumpToRemotePath}
+          onEnterFolder={enterRemoteFolder}
+          onUseFolder={onUseThisFolder}
+          onCreateFolder={(name) => void createRemoteFolder(name)}
+          footer={
+            remoteChosenPath
               ? kind === "new"
                 ? `Will create: ${joinRemotePath(remoteChosenPath, safeName || "<name>")}`
                 : `Selected: ${remoteChosenPath}`
-              : "Browse to a folder, then click “Use this folder”."}
-          </div>
-        </div>
+              : "Browse to a folder, then click “Use this folder”."
+          }
+        />
       )}
     </>
   );
diff --git a/src/components/projects/scaffold.ts b/src/components/projects/scaffold.ts
index 3671bf2..b5d64fd 100644
--- a/src/components/projects/scaffold.ts
+++ b/src/components/projects/scaffold.ts
@@ -170,6 +170,47 @@ export function parseSshAddress(raw: string): ParsedSshAddress | null {
   return { user, host, port };
 }
 
+/**
+ * Frontend twin of the backend's clone-URL whitelist (`validate_clone_url` in
+ * `commands/git.rs`): https/http, `ssh://`, `git://`, or the scp-like
+ * `[user@]host:path`. It gates the Import button so a typo is caught before a
+ * `git clone` is spawned — the backend re-validates regardless, since that is
+ * where a hostile URL (`ext::<command>` runs the command) would actually bite.
+ */
+export function isCloneUrl(raw: string): boolean {
+  const url = raw.trim();
+  if (!url) return false;
+
+  const schemeEnd = url.toLowerCase().indexOf("://");
+  if (schemeEnd >= 0) {
+    return ["https", "http", "ssh", "git"].includes(url.slice(0, schemeEnd).toLowerCase());
+  }
+
+  const colon = url.indexOf(":");
+  if (colon < 0) return false;
+  const host = url.slice(0, colon);
+  const path = url.slice(colon + 1);
+  return (
+    host !== "" &&
+    !host.includes("/") &&
+    !host.startsWith("-") &&
+    path !== "" &&
+    !path.startsWith(":")
+  );
+}
+
+/**
+ * The repository's own name from a clone URL — last path segment, minus a
+ * trailing `.git`. Used to pre-fill the project name so the common case needs no
+ * typing. Returns "" when nothing name-like can be read out.
+ */
+export function repoNameFromCloneUrl(raw: string): string {
+  const url = raw.trim().replace(/[/]+$/, "");
+  if (!url) return "";
+  const last = url.split(/[/:]/).pop() ?? "";
+  return last.replace(/\.git$/i, "");
+}
+
 /** Join a remote directory path with a child segment using POSIX separators. */
 export function joinRemotePath(base: string, child: string): string {
   if (!base || base === "/") return `/${child}`;
diff --git a/src/components/projects/useRemoteBrowse.ts b/src/components/projects/useRemoteBrowse.ts
new file mode 100644
index 0000000..7e98595
--- /dev/null
+++ b/src/components/projects/useRemoteBrowse.ts
@@ -0,0 +1,181 @@
+import { useEffect, useState } from "react";
+import { invoke } from "@tauri-apps/api/core";
+import { joinRemotePath, type ParsedSshAddress } from "./scaffold";
+import { resolveRemoteStartDir } from "../../lib/remoteConnect";
+import type { RemoteEntry } from "../../types";
+
+/**
+ * The shared "log in to a host and browse its filesystem over SFTP" state
+ * machine — the ONE implementation of *how* a remote connect + folder browse
+ * works, so the primary machine and further (worker) machines never carry two
+ * copies of it. Used by the new/extend-project flow (`useRemoteSession`) and the
+ * add-worker-machine flow (`RemoteMachinesWindow`); each dialog keeps its own
+ * field layout ("the content"), this owns the mechanism ("the way to log in").
+ *
+ * A live session is a FROZEN `(conn, password)` pair: once `connect`/`openSession`
+ * commits it, edits to the dialog's address/password fields don't silently change
+ * which host the listing talks to — the caller must `reset` and reconnect. The
+ * listing refreshes automatically whenever the browse path (or the frozen
+ * connection) changes, always reusing the credential the connection was made with.
+ */
+export function useRemoteBrowse() {
+  // The connected host, frozen at connect time (null = no live session).
+  const [conn, setConn] = useState<ParsedSshAddress | null>(null);
+  // The credential the session authenticated with, frozen so every listing/mkdir
+  // reuses it. "" → null → rides the ControlMaster / key auth.
+  const [password, setPassword] = useState("");
+  const [path, setPath] = useState("");
+  const [entries, setEntries] = useState<RemoteEntry[]>([]);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+
+  // Refresh the listing whenever the browse path (or the frozen connection)
+  // changes. `password` is a dep so a re-`openSession` with a new credential
+  // re-lists, but callers freeze it at connect time so ordinary keystrokes don't.
+  useEffect(() => {
+    if (!conn) {
+      setEntries([]);
+      return;
+    }
+    let cancelled = false;
+    setBusy(true);
+    setError("");
+    invoke<RemoteEntry[]>("ssh_list_dir", {
+      user: conn.user,
+      host: conn.host,
+      port: conn.port,
+      password: password ? password : null,
+      path,
+    })
+      .then((e) => {
+        if (!cancelled) setEntries(e);
+      })
+      .catch((e) => {
+        if (cancelled) return;
+        setEntries([]);
+        setError(String(e));
+      })
+      .finally(() => {
+        if (!cancelled) setBusy(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [conn, password, path]);
+
+  // Freeze a session that some OTHER path already authenticated (e.g. a
+  // non-headless login terminal's ControlMaster) — no ssh_connect here. Sets
+  // `conn` last so the listing effect fires once with password + path ready.
+  const openSession = (target: ParsedSshAddress, sessionPassword: string, startPath: string) => {
+    setPassword(sessionPassword);
+    setPath(startPath || "");
+    setConn(target);
+  };
+
+  // Authenticate `target`, then open its start dir. `remember` persists the
+  // working password to the OS keychain (keyed by host target); null/undefined
+  // leaves the keychain untouched. `startPath` overrides where the browse opens
+  // (e.g. the add-machine flow starts at the primary's project path *on the new
+  // machine*, not that host's home); blank/omitted falls back to the configured
+  // default / SSH home. Throws on auth failure — the caller owns the
+  // connecting/error UI. On success the listing opens automatically.
+  const connect = async (opts: {
+    target: ParsedSshAddress;
+    password: string | null;
+    remember?: boolean | null;
+    startPath?: string | null;
+  }) => {
+    const pw = opts.password ? opts.password : null;
+    await invoke<void>("ssh_connect", {
+      user: opts.target.user,
+      host: opts.target.host,
+      port: opts.target.port,
+      password: pw,
+      remember: opts.remember ?? null,
+    });
+    const startDir =
+      opts.startPath && opts.startPath.trim()
+        ? opts.startPath.trim()
+        : await resolveRemoteStartDir(
+            opts.target.user,
+            opts.target.host,
+            opts.target.port,
+            pw,
+          );
+    openSession(opts.target, opts.password ?? "", startDir);
+  };
+
+  const enter = (entry: RemoteEntry) => {
+    if (entry.is_dir) setPath(joinRemotePath(path, entry.name));
+  };
+
+  // Jump straight to a previously-used path (a recents-dropdown pick) instead of
+  // navigating there entry by entry.
+  const jump = (p: string) => setPath(p);
+
+  const goUp = () => {
+    const p = path.replace(/\/+$/, "");
+    if (!p || p === "/") {
+      setPath("/");
+      return;
+    }
+    const idx = p.lastIndexOf("/");
+    setPath(idx <= 0 ? "/" : p.slice(0, idx));
+  };
+
+  // Create a child folder under the current path, then descend into it (the
+  // listing refreshes off the path). No-op without a live session.
+  const mkdir = async (rawName: string) => {
+    const name = rawName.trim();
+    if (!name || !conn) return;
+    // A single child of the current dir, not an arbitrary deep path.
+    if (name.includes("/")) {
+      setError("Folder name can't contain '/'.");
+      return;
+    }
+    const target = joinRemotePath(path || "/", name);
+    setBusy(true);
+    setError("");
+    try {
+      await invoke("ssh_mkdir", {
+        user: conn.user,
+        host: conn.host,
+        port: conn.port,
+        password: password ? password : null,
+        path: target,
+      });
+      setPath(target);
+    } catch (e) {
+      setError(String(e));
+      setBusy(false);
+    }
+  };
+
+  // Drop back to the disconnected state (a credential edit, an explicit
+  // "Change…", or a torn-down login).
+  const reset = () => {
+    setConn(null);
+    setPassword("");
+    setEntries([]);
+    setPath("");
+    setError("");
+  };
+
+  return {
+    conn,
+    password,
+    path,
+    setPath,
+    entries,
+    busy,
+    error,
+    setError,
+    connect,
+    openSession,
+    enter,
+    jump,
+    goUp,
+    mkdir,
+    reset,
+  };
+}
diff --git a/src/components/projects/useRemoteReconnect.ts b/src/components/projects/useRemoteReconnect.ts
index 0721c0e..cb49c0a 100644
--- a/src/components/projects/useRemoteReconnect.ts
+++ b/src/components/projects/useRemoteReconnect.ts
@@ -4,6 +4,7 @@ import { listen } from "@tauri-apps/api/event";
 import { open } from "@tauri-apps/plugin-dialog";
 import {
   needsSeparateKeyPassphrase,
+  type ComputeHost,
   type ProjectEntry,
   type StoredVpnConfig,
   type VpnAuthNeeds,
@@ -17,7 +18,6 @@ import {
   markVpnConnecting,
   markVpnError,
   releaseVpn,
-  useVpnStatusStore,
 } from "../../stores/vpnStatus";
 import type { LogLine } from "../common/ConnectionLog";
 
@@ -98,9 +98,15 @@ const adoptTerm = (term: LoginTerm | undefined): LoginTerm | null =>
  * Status is published to `useRemoteStatusStore` (keyed by project id) so the
  * header lamps and the restore gate observe the same state this panel drives.
  */
-export function useRemoteReconnect(project: ProjectEntry) {
+export function useRemoteReconnect(project: ProjectEntry, host?: ComputeHost) {
   const projectId = project.id;
-  const remote = project.remote;
+  // Multi-host remote (`docs/multi_host_remote_plan.md`): the dialog can target the
+  // primary remote or an extra "worker" host. `hostId` keys the pool + lamp state;
+  // `remote` is the spec to connect (the worker's own, or the primary's). A worker
+  // connect kicks its one-way code fan-out (backend `remote_connect`), never the
+  // primary's git-lockstep / byte-sync.
+  const hostId = host?.id ?? "primary";
+  const remote = host ?? project.remote;
   // The project's OpenVPN config path. Stateful (not just `remote.openvpn.config`)
   // because a project may have been created/extended on a no-VPN network with no
   // config, then need one attached here when reconnecting from a VPN-gated network
@@ -135,27 +141,27 @@ export function useRemoteReconnect(project: ProjectEntry) {
     };
   }, [vpnConfig]);
 
-  const status = useRemoteStatusStore((s) => s.byProject[projectId]);
+  const status = useRemoteStatusStore((s) =>
+    hostId === "primary" ? s.byProject[projectId] : s.byHost[projectId]?.[hostId],
+  );
   const sshStatus: ConnState = status?.ssh ?? "off";
   const vpnStatus: ConnState = status?.vpn ?? "off";
-  const machineVpnStatus = useVpnStatusStore((s) =>
-    vpnConfig ? s.byConfig[vpnConfig] : undefined,
-  );
   const setSsh = useRemoteStatusStore((s) => s.setSsh);
   const setVpn = useRemoteStatusStore((s) => s.setVpn);
 
-  // A tunnel can be brought up from the header/global VPN control, without this
-  // project initiating it. If it matches this project's stored config, surface it
-  // here too so the OpenVPN section opens as connected instead of offering a second
-  // connect path for a machine-wide tunnel that is already up.
-  useEffect(() => {
-    if (!vpnConfig) return;
-    if (machineVpnStatus === "connected" && vpnStatus !== "connected") {
-      markVpnConnected(projectId, vpnConfig);
-    } else if (machineVpnStatus === "connecting" && vpnStatus !== "connecting") {
-      markVpnConnecting(projectId, vpnConfig);
-    }
-  }, [machineVpnStatus, projectId, vpnConfig, vpnStatus]);
+  // Deliberately NOT mirroring a machine-wide tunnel that merely matches this
+  // project's stored config path into this project's own vpn status: that used to
+  // "surface it here too" by marking this project connected and acquiring it as a
+  // holder purely off a path match, even when the tunnel was actually brought up
+  // by the header or another project. Two things followed from that, both wrong:
+  // the OpenVPN section rendered its own "connected" card instead of collapsing to
+  // `VpnTunnelUpNotice` like every other remote dialog does for a tunnel that
+  // isn't its own (see `useVpnSectionVisible`) — and logging out of *this* project
+  // then called `releaseVpn` on a holder slot it never earned, which could drop
+  // the tunnel out from under whoever actually started it. `vpnStatus` is now only
+  // ever set by an action this hook itself took (`connectVpnHeadless`,
+  // `startVpnTerm`'s ready-marker watcher), so `showVpnSection`'s `ownTunnelBusy`
+  // means what it says.
 
   // Windows has no ssh ControlMaster socket, so an interactive login can't be
   // ridden for the pooled connection — fall back to the headline (key-auth)
@@ -205,14 +211,59 @@ export function useRemoteReconnect(project: ProjectEntry) {
   // moment a "Save password" connect succeeds, so the checkbox comes alive right
   // there without a reopen.
   const autoConnect = remote?.auto_connect ?? false;
-  const autoConnectEligible = sshSaved || remote?.key_auth === true;
+  // Key/agent auth (a passwordless connect) also makes auto-connect eligible, but a
+  // passwordless host has nothing in the keychain, so `key_auth` is recorded by the
+  // backend on a successful connect rather than known up front. Seed it from the
+  // stored spec and flip it live the moment a credential-less connect succeeds
+  // (mirroring how `sshSaved` comes alive), so the toggle un-greys right here
+  // without waiting for the project to reload. This is what a worker relied on:
+  // its `key_auth` was never recorded at all (the connect returned early), so its
+  // toggle stayed disabled forever — see `record_worker_key_auth`.
+  const [keyAuth, setKeyAuth] = useState(remote?.key_auth === true);
+  useEffect(() => setKeyAuth(remote?.key_auth === true), [remote?.key_auth]);
+  const autoConnectEligible = sshSaved || keyAuth;
+  // A worker's toggles/label live on its `compute_hosts` entry (not the project's
+  // primary remote). `patch_compute_host` returns the full updated list — apply it
+  // back to the store so anything derived from `host` (the auto-connect toggle, the
+  // dialog title's name) reflects the change at once; without this the UI wouldn't
+  // visibly stick until a reload.
+  const applyPatchedHosts = (hosts: ComputeHost[]) =>
+    useProjectsStore.setState((s) => ({
+      projects: s.projects.map((p) =>
+        p.id === projectId ? { ...p, compute_hosts: hosts } : p,
+      ),
+    }));
+
   const setAutoConnect = (enabled: boolean) => {
+    if (host) {
+      void invoke<ComputeHost[]>("patch_compute_host", { projectId, hostId, autoConnect: enabled })
+        .then(applyPatchedHosts)
+        .catch((e) => setSshError(String(e)));
+      return;
+    }
     void useProjectsStore
       .getState()
       .setProjectAutoConnect(projectId, enabled)
       .catch((e) => setSshError(String(e)));
   };
 
+  // Rename this host's machine label (worker `label`, or the primary's own
+  // `remote.label`) — distinct from the project name, which is edited elsewhere.
+  // A blank name clears the label, so the display falls back to the bare host
+  // (both backend commands trim and treat empty as "no label").
+  const setWorkerLabel = (label: string) => {
+    if (host) {
+      void invoke<ComputeHost[]>("patch_compute_host", { projectId, hostId, label })
+        .then(applyPatchedHosts)
+        .catch((e) => setSshError(String(e)));
+      return;
+    }
+    void useProjectsStore
+      .getState()
+      .setProjectRemoteLabel(projectId, label)
+      .catch((e) => setSshError(String(e)));
+  };
+
   // Load the recently-used OpenVPN configs so a project that carries none yet can
   // reuse one without re-browsing. Best-effort.
   const refreshVpnConfigs = () => {
@@ -375,7 +426,7 @@ export function useRemoteReconnect(project: ProjectEntry) {
       dropTerm(projectId, "vpn");
     }
     releaseVpn(projectId, vpnConfig);
-    setVpn(projectId, "off");
+    setVpn(projectId, "off", hostId);
     force();
   };
 
@@ -400,19 +451,23 @@ export function useRemoteReconnect(project: ProjectEntry) {
         clearSshPoll();
         // Master is up; bring the pool up so every later channel rides it.
         try {
-          await invoke("remote_connect", { projectId, password: null });
+          await invoke("remote_connect", { projectId, hostId, password: null });
           if (gen !== sshGen.current) return;
-          setSsh(projectId, "connected");
+          // Rode the ControlMaster with no password and no saved credential →
+          // key/agent auth, which the backend just recorded. Reflect it now so the
+          // Auto-connect toggle un-greys without a reload.
+          if (!sshSaved) setKeyAuth(true);
+          setSsh(projectId, "connected", hostId);
         } catch {
           if (gen !== sshGen.current) return;
-          setSsh(projectId, "error");
+          setSsh(projectId, "error", hostId);
         }
       })
       .catch(() => {
         if (gen !== sshGen.current) return; // stopped while the probe ran
         if (attempt + 1 >= maxAttempts) {
           clearSshPoll();
-          setSsh(projectId, "error");
+          setSsh(projectId, "error", hostId);
           return;
         }
         sshPollTimer.current = setTimeout(() => pollSshReady(attempt + 1, gen), 3000);
@@ -438,11 +493,11 @@ export function useRemoteReconnect(project: ProjectEntry) {
       sshTermRef.current = term;
       rememberTerm(projectId, "ssh", term);
       const gen = ++sshGen.current;
-      setSsh(projectId, "connecting");
+      setSsh(projectId, "connecting", hostId);
       force();
       pollSshReady(0, gen);
     } catch {
-      setSsh(projectId, "error");
+      setSsh(projectId, "error", hostId);
     }
   };
 
@@ -452,7 +507,7 @@ export function useRemoteReconnect(project: ProjectEntry) {
     if (!sshTermRef.current) return;
     clearSshPoll();
     const gen = ++sshGen.current;
-    setSsh(projectId, "connecting");
+    setSsh(projectId, "connecting", hostId);
     pollSshReady(0, gen);
   };
 
@@ -533,7 +588,7 @@ export function useRemoteReconnect(project: ProjectEntry) {
   const connectSshHeadless = async (password: string, remember?: boolean) => {
     if (!remote) return;
     const gen = ++sshGen.current;
-    setSsh(projectId, "connecting");
+    setSsh(projectId, "connecting", hostId);
     setSshError("");
     // A blank field means "use what's saved" (the secret itself never comes back to
     // the UI, so a saved password can't be pre-filled — the user just leaves it
@@ -559,14 +614,18 @@ export function useRemoteReconnect(project: ProjectEntry) {
       // master-owning pooled session, and with a null password it drops to
       // key/agent auth — which a password-auth host rejects. It falls back to a
       // *saved* password, so this only ever worked with "Save password" ticked.
-      await invoke("remote_connect", { projectId, password: secret });
+      await invoke("remote_connect", { projectId, hostId, password: secret });
       if (gen !== sshGen.current) return;
       // Only a checkbox-driven connect changed what's in the keychain.
       if (remember !== undefined) setSshSaved(remember);
-      setSsh(projectId, "connected");
+      // No password given, none saved, and the connect still succeeded → the host
+      // authenticated via key/agent auth (the backend records the same). Flip the
+      // eligibility flag so the Auto-connect toggle comes alive here, no reload.
+      if (secret === null && !sshSaved && !remember) setKeyAuth(true);
+      setSsh(projectId, "connected", hostId);
     } catch (e) {
       if (gen !== sshGen.current) return; // stopped — ignore the stale failure
-      setSsh(projectId, "error");
+      setSsh(projectId, "error", hostId);
       setSshError(String(e));
     }
   };
@@ -628,8 +687,8 @@ export function useRemoteReconnect(project: ProjectEntry) {
       sshTermRef.current = null;
       dropTerm(projectId, "ssh");
     }
-    void invoke("remote_disconnect", { projectId }).catch(() => {});
-    setSsh(projectId, "off");
+    void invoke("remote_disconnect", { projectId, hostId }).catch(() => {});
+    setSsh(projectId, "off", hostId);
     force();
   };
 
@@ -663,6 +722,7 @@ export function useRemoteReconnect(project: ProjectEntry) {
     autoConnect,
     autoConnectEligible,
     setAutoConnect,
+    setWorkerLabel,
     connectVpnHeadless,
     connectSshHeadless,
     forgetPasswords,
diff --git a/src/components/projects/useRemoteSession.ts b/src/components/projects/useRemoteSession.ts
index 4325a0b..6d50ea7 100644
--- a/src/components/projects/useRemoteSession.ts
+++ b/src/components/projects/useRemoteSession.ts
@@ -4,15 +4,19 @@ import { listen } from "@tauri-apps/api/event";
 import { open } from "@tauri-apps/plugin-dialog";
 import {
   needsSeparateKeyPassphrase,
-  type RemoteEntry,
   type SshTooling,
   type StoredVpnConfig,
   type VpnAuthNeeds,
 } from "../../types";
 import { joinRemotePath, parseSshAddress, type ParsedSshAddress } from "./scaffold";
+import { useRemoteBrowse } from "./useRemoteBrowse";
 import { useVpnStatusStore } from "../../stores/vpnStatus";
 import { IS_WINDOWS } from "../../lib/platform";
-import { forgetConnection, markConnectionOpened } from "../../lib/remoteConnect";
+import {
+  forgetConnection,
+  markConnectionOpened,
+  resolveRemoteStartDir,
+} from "../../lib/remoteConnect";
 import { useSettingsStore } from "../../stores/settings";
 import type { LogLine } from "../common/ConnectionLog";
 
@@ -38,6 +42,7 @@ export type RemoteStep = "connect" | "browse" | "details";
 // no ":" so it never collides with a tab PTY id (`<scope>:<key>`) or trips the
 // detached-PTY check. (Module scope so the counter survives re-renders.)
 let dialogTermSeq = 0;
+
 const nextDialogTermId = (kind: string) => `dialog-${kind}-${++dialogTermSeq}`;
 
 /**
@@ -69,16 +74,33 @@ export function useRemoteSession({ kind }: { kind: "new" | "import" }) {
   const [sshPassword, setSshPassword] = useState("");
   const [sshStatus, setSshStatus] = useState<ConnStatus>("idle");
   const [sshError, setSshError] = useState("");
+  // "Save password" opt-in (default OFF), identical in mechanism to the Connect
+  // modal's: the secret goes to the OS keychain **after** a successful auth, keyed
+  // by the *host target* — not by the project, which doesn't exist yet here. That
+  // is what lets the credential typed while creating/extending a project be the one
+  // its later reconnects (and auto-connect) authenticate with, instead of being
+  // thrown away the moment this dialog closes.
+  const [sshRemember, setSshRemember] = useState(false);
+  // Whether this host target already has a saved password. Queried, never received
+  // as a secret. Pre-checks the toggle, so connecting can't silently *clear* a
+  // credential the user saved elsewhere (`remember: false` is an explicit untick).
+  const [sshSaved, setSshSaved] = useState(false);
+  // The connect-and-browse mechanism (frozen (host, password) session + live SFTP
+  // listing + navigation) is the SHARED one every remote-login dialog uses — see
+  // `useRemoteBrowse`. This flow keeps its own fields/steps/VPN around it; the
+  // browser state below is just re-exposed under the names the rest of this hook
+  // and `RemoteProjectSection` already read.
+  const browse = useRemoteBrowse();
   // The SSH address that was successfully connected (frozen at connect time so
   // edits to the input don't silently change which host we browse/submit to).
-  const [remoteConn, setRemoteConn] = useState<ParsedSshAddress | null>(null);
+  const remoteConn = browse.conn;
   // The password that was used for the successful connect, frozen so the remote
   // listing always reuses the same credential the connection was made with.
-  const [remotePassword, setRemotePassword] = useState("");
-  const [remoteBrowsePath, setRemoteBrowsePath] = useState("");
-  const [remoteEntries, setRemoteEntries] = useState<RemoteEntry[]>([]);
-  const [remoteListBusy, setRemoteListBusy] = useState(false);
-  const [remoteListError, setRemoteListError] = useState("");
+  const remotePassword = browse.password;
+  const remoteBrowsePath = browse.path;
+  const remoteEntries = browse.entries;
+  const remoteListBusy = browse.busy;
+  const remoteListError = browse.error;
   // The remote folder the user committed to via "Use this folder".
   const [remoteChosenPath, setRemoteChosenPath] = useState("");
   // Previously-used remote paths for the current host (newest first), offered
@@ -111,6 +133,11 @@ export function useRemoteSession({ kind }: { kind: "new" | "import" }) {
   const [vpnKeyPassphrase, setVpnKeyPassphrase] = useState("");
   const [vpnStatus, setVpnStatus] = useState<ConnStatus>("idle");
   const [vpnError, setVpnError] = useState("");
+  // The VPN twin of `sshRemember`/`sshSaved`, keyed by config path. One toggle for
+  // the whole tunnel (password + key passphrase + username), as in the Connect
+  // modal — the backend saves or clears the set together.
+  const [vpnRemember, setVpnRemember] = useState(false);
+  const [vpnSaved, setVpnSaved] = useState(false);
   // Live OpenVPN handshake output for the headless connect, streamed from the
   // backend (`openvpn-progress`) and shown in a read-only log so the connect
   // isn't an opaque spinner. Reset at the start of each connect attempt.
@@ -178,12 +205,8 @@ export function useRemoteSession({ kind }: { kind: "new" | "import" }) {
     clearSshPoll();
     setSshStatus("idle");
     setSshError("");
-    setRemoteConn(null);
-    setRemotePassword("");
-    setRemoteEntries([]);
-    setRemoteBrowsePath("");
+    browse.reset();
     setRemoteChosenPath("");
-    setRemoteListError("");
     setStep("connect");
   };
 
@@ -246,6 +269,72 @@ export function useRemoteSession({ kind }: { kind: "new" | "import" }) {
     }
   }, [isRemoteProject]);
 
+  // ── Saved credentials (OS keychain) ─────────────────────────────────────────
+  // Both toggles mirror the Connect modal exactly, because they write the *same*
+  // entries: the keychain is keyed by host target / config path, so there is one
+  // saved credential per host and per tunnel, whichever menu put it there.
+
+  // Does this host target already have a saved password? Re-asked as the typed
+  // address changes, so the toggle always reflects the target being connected.
+  useEffect(() => {
+    const parsed = isRemoteProject ? parseSshAddress(sshAddress) : null;
+    if (!parsed) {
+      setSshSaved(false);
+      return;
+    }
+    let cancelled = false;
+    invoke<boolean>("remote_has_saved_password", {
+      user: parsed.user ?? null,
+      host: parsed.host,
+      port: parsed.port ?? null,
+    })
+      .then((saved) => !cancelled && setSshSaved(saved))
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, [isRemoteProject, sshAddress]);
+  useEffect(() => setSshRemember(sshSaved), [sshSaved]);
+
+  // Same question for the selected `.ovpn` (all of its secrets, so a config that
+  // needs two and has one saved reports "not saved" — a silent connect would fail).
+  useEffect(() => {
+    if (!vpnConfig) {
+      setVpnSaved(false);
+      return;
+    }
+    let cancelled = false;
+    invoke<boolean>("vpn_has_saved_password", { config: vpnConfig })
+      .then((saved) => !cancelled && setVpnSaved(saved))
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, [vpnConfig]);
+  useEffect(() => setVpnRemember(vpnSaved), [vpnSaved]);
+
+  // Unticking a *saved* toggle is a request to drop the secret now — not at the
+  // next connect, which may never come (the user may be about to abandon this
+  // dialog). Same semantics as the Connect modal's toggles.
+  const forgetSshPassword = async () => {
+    const parsed = parseSshAddress(sshAddress);
+    if (!parsed) return;
+    await invoke("remote_forget_password", {
+      user: parsed.user ?? null,
+      host: parsed.host,
+      port: parsed.port ?? null,
+    }).catch(() => {});
+    setSshSaved(false);
+    setSshRemember(false);
+  };
+
+  const forgetVpnPassword = async () => {
+    if (!vpnConfig) return;
+    await invoke("vpn_forget_password", { config: vpnConfig }).catch(() => {});
+    setVpnSaved(false);
+    setVpnRemember(false);
+  };
+
   // Load the recently-used remote paths for `host` (newest first). Best-effort;
   // an empty/unresolved host just clears the list.
   const refreshRemotePaths = (host: string) => {
@@ -379,10 +468,14 @@ export function useRemoteSession({ kind }: { kind: "new" | "import" }) {
       await invoke("openvpn_connect", {
         config: vpnConfig,
         username: vpnUsername || null,
+        // Blank + a saved credential = "use the saved one" (the backend falls back
+        // to the keychain), the same contract the Connect modal's blank field has.
         password: vpnPassword,
         keyPassphrase: vpnKeyPassphrase || null,
+        remember: vpnRemember,
       });
       setVpnStatus("connected");
+      setVpnSaved(vpnRemember);
       useVpnStatusStore.getState().setState(vpnConfig, "connected");
     } catch (e) {
       setVpnStatus("error");
@@ -472,16 +565,11 @@ export function useRemoteSession({ kind }: { kind: "new" | "import" }) {
     })
       .then(async () => {
         clearSshPoll();
-        const startDir = await invoke<string>("ssh_default_dir", {
-          user: parsed.user,
-          host: parsed.host,
-          port: parsed.port,
-          password: null,
-        }).catch(() => "");
-        setRemoteConn(parsed);
-        setRemotePassword(""); // empty → null → rides the master in the listing effect
+        const startDir = await resolveRemoteStartDir(parsed.user, parsed.host, parsed.port, null);
+        // Freeze the session the login terminal already authenticated — empty
+        // password → null → rides its ControlMaster in the listing effect.
+        browse.openSession(parsed, "", startDir);
         setSshStatus("connected");
-        setRemoteBrowsePath(startDir || "");
       })
       .catch(() => {
         if (attempt + 1 >= maxAttempts) {
@@ -550,7 +638,7 @@ export function useRemoteSession({ kind }: { kind: "new" | "import" }) {
     // readiness poll and return to the disconnected state.
     clearSshPoll();
     setSshStatus("idle");
-    setRemoteConn(null);
+    browse.reset();
     setStep("connect");
   };
 
@@ -577,121 +665,35 @@ export function useRemoteSession({ kind }: { kind: "new" | "import" }) {
       setSshError("Enter an address like user@host or host:2222");
       return;
     }
-    // Empty password → key/agent auth (Option<String> None on the backend).
+    // Empty password → the backend falls back to a saved one for this host, then to
+    // key/agent auth (Option<String> None). So a blank field is "use what you have",
+    // exactly as in the Connect modal — not "authenticate with nothing".
     const password = sshPassword ? sshPassword : null;
     setSshStatus("connecting");
     setSshError("");
     setRemoteChosenPath("");
     try {
-      await invoke<void>("ssh_connect", {
-        user: parsed.user,
-        host: parsed.host,
-        port: parsed.port,
-        password,
-      });
-      const startDir = await invoke<string>("ssh_default_dir", {
-        user: parsed.user,
-        host: parsed.host,
-        port: parsed.port,
-        password,
-      }).catch(() => "");
-      setRemoteConn(parsed);
-      setRemotePassword(sshPassword);
+      // The shared connect: ssh_connect (remembering the working password only on
+      // success, so a rejected credential is never stored) → freeze the session →
+      // open its start dir. The listing then refreshes itself.
+      await browse.connect({ target: parsed, password, remember: sshRemember });
       setSshStatus("connected");
-      setRemoteBrowsePath(startDir || "");
+      setSshSaved(sshRemember);
       // Connection succeeded — remember the address for the recents dropdown.
       rememberSshAddress(sshAddress);
     } catch (err) {
       setSshStatus("error");
       setSshError(String(err));
-      setRemoteConn(null);
-    }
-  };
-
-  // Refresh the remote folder listing whenever the browse path changes.
-  useEffect(() => {
-    if (sshStatus !== "connected" || !remoteConn) {
-      setRemoteEntries([]);
-      return;
-    }
-    let cancelled = false;
-    setRemoteListBusy(true);
-    setRemoteListError("");
-    invoke<RemoteEntry[]>("ssh_list_dir", {
-      user: remoteConn.user,
-      host: remoteConn.host,
-      port: remoteConn.port,
-      password: remotePassword ? remotePassword : null,
-      path: remoteBrowsePath,
-    })
-      .then((entries) => {
-        if (cancelled) return;
-        setRemoteEntries(entries);
-      })
-      .catch((err) => {
-        if (cancelled) return;
-        setRemoteEntries([]);
-        setRemoteListError(String(err));
-      })
-      .finally(() => {
-        if (!cancelled) setRemoteListBusy(false);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [sshStatus, remoteConn, remotePassword, remoteBrowsePath]);
-
-  const enterRemoteFolder = (entry: RemoteEntry) => {
-    if (!entry.is_dir) return;
-    setRemoteBrowsePath(joinRemotePath(remoteBrowsePath, entry.name));
-  };
-
-  // Jump the browser straight to a previously-used remote path (picked from the
-  // recents dropdown) instead of navigating there entry by entry.
-  const jumpToRemotePath = (path: string) => {
-    setRemoteBrowsePath(path);
-  };
-
-  const remoteGoUp = () => {
-    const path = remoteBrowsePath.replace(/\/+$/, "");
-    if (!path || path === "/") {
-      setRemoteBrowsePath("/");
-      return;
+      browse.reset();
     }
-    const idx = path.lastIndexOf("/");
-    setRemoteBrowsePath(idx <= 0 ? "/" : path.slice(0, idx));
   };
 
-  // Create a new folder under the current browse path, then descend into it so
-  // it becomes the selectable target. Reuses the frozen connect credential, like
-  // the listing. No-op without a live session (the SFTP browser only renders then).
-  const createRemoteFolder = async (rawName: string) => {
-    const name = rawName.trim();
-    if (!name || !remoteConn) return;
-    // Reject path separators — this creates a single child of the current dir,
-    // not an arbitrary deep path. The backend's mkdir -p still joins safely.
-    if (name.includes("/")) {
-      setRemoteListError("Folder name can't contain '/'.");
-      return;
-    }
-    const target = joinRemotePath(remoteBrowsePath || "/", name);
-    setRemoteListBusy(true);
-    setRemoteListError("");
-    try {
-      await invoke("ssh_mkdir", {
-        user: remoteConn.user,
-        host: remoteConn.host,
-        port: remoteConn.port,
-        password: remotePassword ? remotePassword : null,
-        path: target,
-      });
-      // Descend into the new folder; the listing effect refreshes off the path.
-      setRemoteBrowsePath(target);
-    } catch (err) {
-      setRemoteListError(String(err));
-      setRemoteListBusy(false);
-    }
-  };
+  // The live SFTP listing + folder navigation all come from the shared browser;
+  // re-exposed here under the names `RemoteProjectSection` already reads.
+  const enterRemoteFolder = browse.enter;
+  const jumpToRemotePath = browse.jump;
+  const remoteGoUp = browse.goUp;
+  const createRemoteFolder = browse.mkdir;
 
   // Build the `remote` spec for the create/import request, or undefined when this
   // isn't a usable remote project. NEW: name becomes a subdir under the chosen
@@ -746,6 +748,10 @@ export function useRemoteSession({ kind }: { kind: "new" | "import" }) {
   return {
     isRemoteProject,
     isRemote,
+    // The live-connected host, frozen at connect time (`{ user, host, port }`),
+    // so a caller can register it elsewhere — e.g. the HPC wizard surfacing the
+    // cluster in the header's global-machines list once the login goes live.
+    remoteConn,
     headless,
     winManual,
     remoteReady,
@@ -758,6 +764,14 @@ export function useRemoteSession({ kind }: { kind: "new" | "import" }) {
     sshPassword,
     sshStatus,
     sshError,
+    sshRemember,
+    setSshRemember,
+    sshSaved,
+    forgetSshPassword,
+    // The credential the live session actually authenticated with, so the caller can
+    // hand it to the project's first *pooled* connect (`remote_connect`) instead of
+    // letting that leg rely on the ControlMaster this dialog happens to have left up.
+    remotePassword,
     remoteBrowsePath,
     remoteEntries,
     remoteListBusy,
@@ -785,6 +799,10 @@ export function useRemoteSession({ kind }: { kind: "new" | "import" }) {
     setVpnStatus,
     vpnError,
     setVpnError,
+    vpnRemember,
+    setVpnRemember,
+    vpnSaved,
+    forgetVpnPassword,
     vpnLog,
     vpnTerm,
     startVpnTerm,
diff --git a/src/components/stats/StatsRecap.tsx b/src/components/stats/StatsRecap.tsx
index e42756d..91b7ac9 100644
--- a/src/components/stats/StatsRecap.tsx
+++ b/src/components/stats/StatsRecap.tsx
@@ -245,7 +245,7 @@ export function StatsRecap({ onClose, initialAnchorMs, showAutoToggle }: Props)
 
   return createPortal(
     <div className="modal-backdrop" onMouseDown={onClose}>
-      <div className="stats-dialog" onMouseDown={(e) => e.stopPropagation()}>
+      <div className="stats-dialog dialog-framed" onMouseDown={(e) => e.stopPropagation()}>
         <div className="settings-title-row">
           <h2>Your work in Eldrun</h2>
           <div className="stats-period-switch" role="group" aria-label="Period">
@@ -263,6 +263,7 @@ export function StatsRecap({ onClose, initialAnchorMs, showAutoToggle }: Props)
           <button type="button" className="dialog-close-btn" onClick={onClose}>×</button>
         </div>
 
+        <div className="dialog-scroll">
         <p className="settings-help stats-window-label">{label}</p>
 
         {empty ? (
@@ -364,6 +365,7 @@ export function StatsRecap({ onClose, initialAnchorMs, showAutoToggle }: Props)
             />
           </label>
         )}
+        </div>
       </div>
     </div>,
     document.body,
diff --git a/src/components/tabs/AddTabMenuList.tsx b/src/components/tabs/AddTabMenuList.tsx
new file mode 100644
index 0000000..574466a
--- /dev/null
+++ b/src/components/tabs/AddTabMenuList.tsx
@@ -0,0 +1,101 @@
+import { Fragment, useState } from "react";
+
+/** One pickable row in the add-tab menu. */
+export interface AddMenuEntry {
+  /** React key — unique within the entry's group. */
+  key: string;
+  label: string;
+  /** Dot glyph in front of the label (defaults to "●"). */
+  dot?: string;
+  /** Dot color (a TAB_ACCENT value or any CSS color). */
+  color: string;
+  disabled?: boolean;
+  onPick: () => void;
+}
+
+/** One labelled section of the add-tab menu. */
+export interface AddMenuGroup {
+  label: string;
+  entries: AddMenuEntry[];
+  /** Non-pickable explainer rendered when the group has no entries (only while
+   *  the search box is empty — a hint is not a search result). */
+  hint?: string;
+}
+
+/**
+ * The searchable body of the "+" add-tab menu, shared by the main-window
+ * `TabBar` and the detached popout's `NewTabMenu` so both filter identically.
+ * The search box is auto-focused, so "click + and type" filters immediately;
+ * a query narrows entries by label (a group-label match keeps its whole
+ * group, so "files" surfaces both file panes), Enter picks the first
+ * pickable match, and Escape clears the query before it closes the menu.
+ */
+export function AddTabMenuList({ groups }: { groups: AddMenuGroup[] }) {
+  const [query, setQuery] = useState("");
+  const q = query.trim().toLowerCase();
+
+  const visible = q
+    ? groups
+        .map((g) => ({
+          label: g.label,
+          hint: undefined,
+          entries: g.label.toLowerCase().includes(q)
+            ? g.entries
+            : g.entries.filter((e) => e.label.toLowerCase().includes(q)),
+        }))
+        .filter((g) => g.entries.length > 0)
+    : groups;
+
+  // The entry Enter would pick — highlighted so the shortcut is discoverable.
+  // Compared by identity below, so entry keys only need per-group uniqueness.
+  const first = q
+    ? visible.flatMap((g) => g.entries).find((e) => !e.disabled)
+    : undefined;
+
+  return (
+    <>
+      <input
+        className="tab-new-menu-search"
+        type="text"
+        placeholder="Search…"
+        value={query}
+        autoFocus
+        spellCheck={false}
+        onChange={(e) => setQuery(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && first) {
+            e.preventDefault();
+            first.onPick();
+          } else if (e.key === "Escape" && query) {
+            // First Escape clears the query; only an empty-query Escape is
+            // allowed to bubble on to the menu's document-level close handler.
+            e.stopPropagation();
+            setQuery("");
+          }
+        }}
+      />
+      {visible.length === 0 && <div className="tab-new-menu-hint">No matches</div>}
+      {visible.map((g) => (
+        <Fragment key={g.label}>
+          <div className="tab-new-menu-group-label">{g.label}</div>
+          {g.entries.map((e) => (
+            <button
+              key={e.key}
+              className={`tab-new-menu-item${e === first ? " enter-target" : ""}`}
+              disabled={e.disabled}
+              onClick={e.onPick}
+            >
+              <span className="tab-new-menu-dot" style={{ color: e.color }}>
+                {e.dot ?? "●"}
+              </span>
+              {e.label}
+            </button>
+          ))}
+          {g.entries.length === 0 && g.hint && (
+            <div className="tab-new-menu-hint">{g.hint}</div>
+          )}
+        </Fragment>
+      ))}
+    </>
+  );
+}
diff --git a/src/components/tabs/CustomAgentDialog.tsx b/src/components/tabs/CustomAgentDialog.tsx
new file mode 100644
index 0000000..bf30dc2
--- /dev/null
+++ b/src/components/tabs/CustomAgentDialog.tsx
@@ -0,0 +1,258 @@
+import { useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { invoke } from "@tauri-apps/api/core";
+import { useSettingsStore } from "../../stores/settings";
+import { runInstallInTab } from "../../lib/installCommand";
+import type { CustomAgent } from "../../types";
+
+interface Props {
+  onClose: () => void;
+}
+
+/** Split a whitespace-separated arg string into an argv, honoring simple
+ *  single/double quoting so a value with spaces stays one arg. Empty → []. */
+function parseArgs(raw: string): string[] {
+  const out: string[] = [];
+  const re = /"([^"]*)"|'([^']*)'|(\S+)/g;
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(raw)) !== null) {
+    out.push(m[1] ?? m[2] ?? m[3] ?? "");
+  }
+  return out;
+}
+
+/** A minted id that doesn't depend on crypto being present in every webview. */
+function mintId(): string {
+  if (typeof crypto !== "undefined" && crypto.randomUUID) return crypto.randomUUID();
+  return `ca-${Math.random().toString(36).slice(2)}${Date.now().toString(36)}`;
+}
+
+/**
+ * Manage the user's custom agents (Settings.custom_agents): list the existing
+ * ones with a delete button, and an add form (label, command, optional args,
+ * optional "continue last session" resume flag). Persisted globally via
+ * `updateSettings`, so a new agent shows up in every add-tab menu's Agents group.
+ *
+ * A custom agent is only a launch command — Eldrun spawns `cmd` (+ args/env) as
+ * an `agent` tab. The resume flag is the one extra capability: set it and the
+ * tab survives a restart (cwd-continue tier, like Qwen/OpenCode/Gemini); leave it
+ * blank and the tab is launch-only, dropped on restart like Aider.
+ */
+export function CustomAgentDialog({ onClose }: Props) {
+  const settings = useSettingsStore((s) => s.settings);
+  const updateSettings = useSettingsStore((s) => s.updateSettings);
+  const agents = useMemo(() => settings?.custom_agents ?? [], [settings]);
+
+  const [label, setLabel] = useState("");
+  const [cmd, setCmd] = useState("");
+  const [argsText, setArgsText] = useState("");
+  const [resumeText, setResumeText] = useState("");
+  const [installText, setInstallText] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Installed status of each agent's command, so a missing one can offer its
+  // one-click install. `null` until the probe resolves (rows render without a
+  // status hint rather than flashing "not installed").
+  const [installed, setInstalled] = useState<Set<string> | null>(null);
+  useEffect(() => {
+    const cmds = agents.map((a) => a.cmd);
+    if (cmds.length === 0) {
+      setInstalled(new Set());
+      return;
+    }
+    invoke<string[]>("probe_binaries", { bins: cmds })
+      .then((found) => setInstalled(new Set(found)))
+      .catch(() => setInstalled(new Set()));
+  }, [agents]);
+
+  const persist = async (next: CustomAgent[]) => {
+    setBusy(true);
+    setError(null);
+    try {
+      await updateSettings({ custom_agents: next });
+    } catch (e) {
+      setError(String(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const add = async () => {
+    const name = label.trim();
+    const command = cmd.trim();
+    if (!name || !command) {
+      setError("A label and a command are both required.");
+      return;
+    }
+    const args = parseArgs(argsText);
+    const resumeArgs = parseArgs(resumeText);
+    const install = installText.trim();
+    const agent: CustomAgent = {
+      id: mintId(),
+      label: name,
+      cmd: command,
+      ...(args.length ? { args } : {}),
+      ...(resumeArgs.length ? { resumeArgs } : {}),
+      ...(install ? { installCmd: install } : {}),
+    };
+    await persist([...agents, agent]);
+    setLabel("");
+    setCmd("");
+    setArgsText("");
+    setResumeText("");
+    setInstallText("");
+  };
+
+  const remove = (id: string) => void persist(agents.filter((a) => a.id !== id));
+
+  // Run an agent's install command in a fresh root terminal tab (Eldrun's
+  // install-via-tab policy). Closes the dialog so the terminal is in view.
+  const install = (a: CustomAgent) => {
+    if (!a.installCmd) return;
+    runInstallInTab(`Install ${a.label}`, a.installCmd, "default");
+    onClose();
+  };
+
+  return createPortal(
+    <div className="modal-backdrop" onMouseDown={onClose}>
+      <div
+        className="settings-dialog custom-agent-dialog"
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        <div className="settings-title-row">
+          <h2>Custom agents</h2>
+          <button type="button" className="dialog-close-btn" onClick={onClose}>×</button>
+        </div>
+        <div className="dialog-scroll">
+        <p className="settings-help">
+          Add any command-line agent so it appears in the <strong>Agents</strong>{" "}
+          section of the new-tab menu. Eldrun launches the command in the project
+          directory as an agent tab.
+        </p>
+
+        {agents.length > 0 && (
+          <div className="custom-agent-list">
+            {agents.map((a) => {
+              const missing = installed != null && !installed.has(a.cmd);
+              return (
+                <div className="custom-agent-row" key={a.id}>
+                  <span className="custom-agent-row-label">{a.label}</span>
+                  <code className="custom-agent-row-cmd">
+                    {[a.cmd, ...(a.args ?? [])].join(" ")}
+                  </code>
+                  {a.resumeArgs?.length ? (
+                    <span className="custom-agent-row-tag" title="Survives a restart">
+                      resumable
+                    </span>
+                  ) : null}
+                  {missing &&
+                    (a.installCmd ? (
+                      <button
+                        type="button"
+                        className="custom-agent-install"
+                        title={`Run: ${a.installCmd}`}
+                        onClick={() => install(a)}
+                      >
+                        Install
+                      </button>
+                    ) : (
+                      <span
+                        className="custom-agent-row-missing"
+                        title="Command not found on PATH"
+                      >
+                        not found
+                      </span>
+                    ))}
+                  <button
+                    type="button"
+                    className="custom-agent-remove"
+                    title="Remove this agent"
+                    disabled={busy}
+                    onClick={() => remove(a.id)}
+                  >
+                    ×
+                  </button>
+                </div>
+              );
+            })}
+          </div>
+        )}
+
+        <div className="custom-agent-form">
+          <label className="custom-agent-field">
+            <span>Label</span>
+            <input
+              value={label}
+              placeholder="e.g. My Agent"
+              autoFocus
+              onChange={(e) => setLabel(e.target.value)}
+            />
+          </label>
+          <label className="custom-agent-field">
+            <span>Command</span>
+            <input
+              value={cmd}
+              placeholder="e.g. my-agent  (binary name or full path)"
+              spellCheck={false}
+              onChange={(e) => setCmd(e.target.value)}
+            />
+          </label>
+          <label className="custom-agent-field">
+            <span>Arguments <em>(optional)</em></span>
+            <input
+              value={argsText}
+              placeholder="e.g. --model gpt-x"
+              spellCheck={false}
+              onChange={(e) => setArgsText(e.target.value)}
+            />
+          </label>
+          <label className="custom-agent-field">
+            <span>Resume flag <em>(optional)</em></span>
+            <input
+              value={resumeText}
+              placeholder="e.g. --continue  (keeps the tab across a restart)"
+              spellCheck={false}
+              onChange={(e) => setResumeText(e.target.value)}
+            />
+          </label>
+          <label className="custom-agent-field">
+            <span>Install command <em>(optional)</em></span>
+            <input
+              value={installText}
+              placeholder="e.g. npm install -g @scope/my-agent"
+              spellCheck={false}
+              onChange={(e) => setInstallText(e.target.value)}
+            />
+          </label>
+          <p className="settings-help">
+            An install command lets Eldrun install the agent for you: when its
+            binary isn&apos;t found, an <strong>Install</strong> button runs the
+            command in a new root terminal tab. Any one-liner works (npm, pipx,
+            curl&nbsp;| sh, …).
+          </p>
+          <p className="settings-help">
+            A resume flag lets Eldrun relaunch the agent on its most recent session
+            after a restart. Leave it blank if the agent has no such flag — the tab
+            will simply start fresh next time.
+          </p>
+        </div>
+
+        {error && <div className="settings-error">{error}</div>}
+
+        <div className="project-dialog-actions">
+          <button type="button" onClick={onClose}>Done</button>
+          <button
+            type="button"
+            disabled={busy || !label.trim() || !cmd.trim()}
+            onClick={() => void add()}
+          >
+            Add agent
+          </button>
+        </div>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}
diff --git a/src/components/tabs/NewTabMenu.tsx b/src/components/tabs/NewTabMenu.tsx
index bcbb097..a7e1e3b 100644
--- a/src/components/tabs/NewTabMenu.tsx
+++ b/src/components/tabs/NewTabMenu.tsx
@@ -9,12 +9,15 @@ import {
 } from "../../stores/tabs";
 import { useSettingsStore } from "../../stores/settings";
 import {
-  AGENT_ITEMS,
+  EMPTY_CUSTOM_AGENTS,
   SHELL_ITEMS,
   TAB_ACCENT,
+  agentMenuEntries,
   buildStaticTabSpec,
+  isFileTabKind,
   type StaticMenuItem,
 } from "./newTabItems";
+import { AddTabMenuList } from "./AddTabMenuList";
 
 interface Props {
   /** Scope (project id or "root") the new tab belongs to. Gates the project-only
@@ -33,6 +36,9 @@ interface Props {
    *  when the user picks an entry. The caller creates the tab. */
   onPick: (spec: Omit<TabEntry, "key">) => void;
   onClose: () => void;
+  /** Open the manage-custom-agents dialog. Hosted by the parent (this menu
+   *  unmounts on `onClose`, so it can't own the dialog itself). */
+  onManageAgents: () => void;
 }
 
 /**
@@ -42,18 +48,25 @@ interface Props {
  * `onPick`; the caller decides how to create the tab (the main window calls
  * `addTab`; the popout streams an "add" edit to the main window).
  */
-export function NewTabMenu({ scope, projectCwd, projectName, anchor, onPick, onClose }: Props) {
+export function NewTabMenu({ scope, projectCwd, projectName, anchor, onPick, onClose, onManageAgents }: Props) {
   const menuRef = useRef<HTMLDivElement>(null);
   const [pos, setPos] = useState(anchor);
 
   const localModel = useSettingsStore(
     (s) => s.settings?.ollama_roles?.tabs ?? s.settings?.ollama_model,
   );
+  const customAgents = useSettingsStore(
+    (s) => s.settings?.custom_agents ?? EMPTY_CUSTOM_AGENTS,
+  );
 
   // Installed agent CLIs (id == cmd); only offer ones actually present. `null`
   // until the probe resolves, so the Agents list renders nothing (not a flash of
   // all agents) until we know.
   const [installedAgents, setInstalledAgents] = useState<Set<string> | null>(null);
+  // Installed *custom*-agent commands, probed separately (they aren't in the
+  // built-in registry). `null` until resolved — custom agents render enabled
+  // until a probe proves one missing.
+  const [installedCustom, setInstalledCustom] = useState<Set<string> | null>(null);
   const [localDrivers, setLocalDrivers] = useState<
     { id: string; label: string; available: boolean }[]
   >([]);
@@ -65,6 +78,17 @@ export function NewTabMenu({ scope, projectCwd, projectName, anchor, onPick, onC
       .then(setLocalDrivers)
       .catch(() => {});
   }, []);
+  // Re-probe custom commands whenever the set changes (adding one in the dialog).
+  useEffect(() => {
+    const cmds = customAgents.map((a) => a.cmd);
+    if (cmds.length === 0) {
+      setInstalledCustom(new Set());
+      return;
+    }
+    invoke<string[]>("probe_binaries", { bins: cmds })
+      .then((found) => setInstalledCustom(new Set(found)))
+      .catch(() => setInstalledCustom(new Set()));
+  }, [customAgents]);
 
   // Outside-click / Escape closes the menu.
   useEffect(() => {
@@ -164,126 +188,116 @@ export function NewTabMenu({ scope, projectCwd, projectName, anchor, onPick, onC
       ref={menuRef}
       style={{ position: "fixed", left: pos.x, top: pos.y }}
     >
-      <div className="tab-new-menu-group-label">Agents</div>
-      {AGENT_ITEMS.filter((item) => installedAgents?.has(item.cmd)).map((item) => (
-        <button key={item.cmd} className="tab-new-menu-item" onClick={() => pickStatic(item)}>
-          <span className="tab-new-menu-dot" style={{ color: TAB_ACCENT[item.kind] }}>●</span>
-          {item.label}
-        </button>
-      ))}
-
-      <div className="tab-new-menu-group-label">
-        {localModel ? `Local Model · ${localModel}` : "Local Model"}
-      </div>
-      {localModel ? (
-        (() => {
-          const vibeInstalled = installedAgents?.has("vibe") ?? false;
-          const drivers = localDrivers.filter((d) => d.available);
-          if (!vibeInstalled && drivers.length === 0) {
-            return (
-              <div className="tab-new-menu-hint">
-                No local agent installed — install one in the 🧠 menu
-              </div>
-            );
-          }
-          return (
-            <>
-              {vibeInstalled && (
-                <button
-                  className="tab-new-menu-item"
-                  onClick={() => void pickOllamaModel(localModel)}
-                >
-                  <span className="tab-new-menu-dot" style={{ color: TAB_ACCENT["local_agent"] }}>●</span>
-                  Mistral
-                </button>
-              )}
-              {drivers.map((d) => (
-                <button
-                  key={d.id}
-                  className="tab-new-menu-item"
-                  onClick={() => void pickLocalLaunch(d.id, d.label, localModel)}
-                >
-                  <span className="tab-new-menu-dot" style={{ color: TAB_ACCENT["local_agent"] }}>●</span>
-                  {d.label}
-                </button>
-              ))}
-            </>
-          );
-        })()
-      ) : (
-        <div className="tab-new-menu-hint">No local model set — pick one in the app bar</div>
-      )}
-
-      <div className="tab-new-menu-group-label">Shell</div>
-      {SHELL_ITEMS.filter((i) => i.kind === "shell").map((item) => (
-        <button key={item.cmd} className="tab-new-menu-item" onClick={() => pickStatic(item)}>
-          <span className="tab-new-menu-dot" style={{ color: TAB_ACCENT[item.kind] }}>●</span>
-          {item.label}
-        </button>
-      ))}
-
-      <div className="tab-new-menu-group-label">Files</div>
-      {SHELL_ITEMS.filter((i) => i.kind === "files").map((item) => (
-        <button
-          key={item.cmd}
-          className="tab-new-menu-item"
-          disabled={!projectCwd}
-          onClick={() => pickStatic(item)}
-        >
-          <span className="tab-new-menu-dot" style={{ color: TAB_ACCENT[item.kind] }}>●</span>
-          {item.label}
-        </button>
-      ))}
-
-      {/* Disk Usage can scan anywhere, so it is offered in every scope; Network
-          Traffic is per-project (host/SSH link), so the root scope has none. */}
-      <div className="tab-new-menu-group-label">Monitoring</div>
-      <button
-        className="tab-new-menu-item"
-        onClick={() =>
-          pickFixed({
-            label: "Disk Usage",
-            cmd: DISKUSAGE_TAB_CMD,
-            cwd: projectCwd,
-            kind: "diskusage",
-          })
-        }
-      >
-        <span className="tab-new-menu-dot" style={{ color: TAB_ACCENT.diskusage }}>◕</span>
-        Disk Usage
-      </button>
-      {scope !== "root" && (
-        <button
-          className="tab-new-menu-item"
-          onClick={() =>
-            pickFixed({
-              label: "Network Traffic",
-              cmd: NETWORK_TAB_CMD,
-              cwd: projectCwd,
-              kind: "network",
-            })
-          }
-        >
-          <span className="tab-new-menu-dot" style={{ color: TAB_ACCENT.network }}>●</span>
-          Network Traffic
-        </button>
-      )}
-
-      <div className="tab-new-menu-group-label">Calendar</div>
-      <button
-        className="tab-new-menu-item"
-        onClick={() =>
-          pickFixed({
+      <AddTabMenuList
+        groups={[
+          {
+            label: "Agents",
+            entries: agentMenuEntries({
+              installedBuiltins: installedAgents,
+              installedCmds: installedCustom,
+              customAgents,
+              pick: pickStatic,
+              onAddCustom: () => {
+                onClose();
+                onManageAgents();
+              },
+            }),
+          },
+          {
+            label: localModel ? `Local Model · ${localModel}` : "Local Model",
+            entries: localModel
+              ? [
+                  ...(installedAgents?.has("vibe")
+                    ? [{
+                        key: "vibe",
+                        label: "Mistral",
+                        color: TAB_ACCENT["local_agent"],
+                        onPick: () => void pickOllamaModel(localModel),
+                      }]
+                    : []),
+                  ...localDrivers.filter((d) => d.available).map((d) => ({
+                    key: d.id,
+                    label: d.label,
+                    color: TAB_ACCENT["local_agent"],
+                    onPick: () => void pickLocalLaunch(d.id, d.label, localModel),
+                  })),
+                ]
+              : [],
+            hint: localModel
+              ? "No local agent installed — install one in the 🧠 menu"
+              : "No local model set — pick one in the app bar",
+          },
+          {
+            label: "Shell",
+            entries: SHELL_ITEMS.filter((i) => i.kind === "shell").map((item) => ({
+              key: item.cmd || "shell",
+              label: item.label,
+              color: TAB_ACCENT[item.kind],
+              onPick: () => pickStatic(item),
+            })),
+          },
+          {
+            label: "Files",
+            entries: SHELL_ITEMS.filter((i) => isFileTabKind(i.kind)).map((item) => ({
+              key: item.cmd,
+              label: item.label,
+              color: TAB_ACCENT[item.kind],
+              disabled: !projectCwd,
+              onPick: () => pickStatic(item),
+            })),
+          },
+          // Disk Usage can scan anywhere, so it is offered in every scope; Network
+          // Traffic is per-project (host/SSH link), so the root scope has none.
+          {
+            label: "Monitoring",
+            entries: [
+              {
+                key: "diskusage",
+                label: "Disk Usage",
+                dot: "◕",
+                color: TAB_ACCENT.diskusage,
+                onPick: () =>
+                  pickFixed({
+                    label: "Disk Usage",
+                    cmd: DISKUSAGE_TAB_CMD,
+                    cwd: projectCwd,
+                    kind: "diskusage",
+                  }),
+              },
+              ...(scope !== "root"
+                ? [{
+                    key: "network",
+                    label: "Network Traffic",
+                    color: TAB_ACCENT.network,
+                    onPick: () =>
+                      pickFixed({
+                        label: "Network Traffic",
+                        cmd: NETWORK_TAB_CMD,
+                        cwd: projectCwd,
+                        kind: "network",
+                      }),
+                  }]
+                : []),
+            ],
+          },
+          {
             label: "Calendar",
-            cmd: CALENDAR_TAB_CMD,
-            cwd: projectCwd,
-            kind: "calendar",
-          })
-        }
-      >
-        <span className="tab-new-menu-dot" style={{ color: TAB_ACCENT.calendar }}>◆</span>
-        Calendar
-      </button>
+            entries: [{
+              key: "calendar",
+              label: "Calendar",
+              dot: "◆",
+              color: TAB_ACCENT.calendar,
+              onPick: () =>
+                pickFixed({
+                  label: "Calendar",
+                  cmd: CALENDAR_TAB_CMD,
+                  cwd: projectCwd,
+                  kind: "calendar",
+                }),
+            }],
+          },
+        ]}
+      />
     </div>,
     document.body,
   );
diff --git a/src/components/tabs/Subwindow.tsx b/src/components/tabs/Subwindow.tsx
index c5b55e2..1d1297f 100644
--- a/src/components/tabs/Subwindow.tsx
+++ b/src/components/tabs/Subwindow.tsx
@@ -1,4 +1,10 @@
-import { allGroups, useTabsStore } from "../../stores/tabs";
+import { useWindowFocused } from "../../hooks/useWindowFocused";
+import { allGroups, useGroup, useTabsStore } from "../../stores/tabs";
+import {
+  clampFilesWidth,
+  DEFAULT_GROUP_FILES_WIDTH,
+  SubwindowFilesSidebar,
+} from "../files/SubwindowFilesSidebar";
 import { TabBar } from "./TabBar";
 
 interface Props {
@@ -14,15 +20,32 @@ interface Props {
  * while a tab is dragged over this group) and the drop itself are both owned by
  * CenterPanel — the preview must paint ABOVE the flat pane layer, which lives in
  * a separate stacking context outside this subtree.
+ *
+ * When the group's `filesOpen` flag is set, a docked file-viewer column
+ * (`SubwindowFilesSidebar`) renders on the body's right edge, NEXT TO the
+ * measured pane slot — the slot shrinks, so CenterPanel's flat pane layer
+ * (positioned over the slot's measured rect) never covers the sidebar. The tab
+ * bar reserves the same width on its right (see `filesWidth` on TabBar) so the
+ * scrolling tab strip stops at the pane's edge instead of running over the
+ * viewer, while the subwindow's close/hide/◫ controls stay pinned far-right.
  */
 export function Subwindow({ groupId, projectCwd, children }: Props) {
   const focusGroup = useTabsStore((s) => s.focusGroup);
   const focusedGroupId = useTabsStore((s) => s.focusedGroupId);
+  const scope = useTabsStore((s) => s.scope);
+  // The per-subwindow file viewer's persisted state lives on the group NODE.
+  const group = useGroup(groupId);
+  const setGroupFilesWidth = useTabsStore((s) => s.setGroupFilesWidth);
+  const setGroupFiles = useTabsStore((s) => s.setGroupFiles);
+  const setGroupFilesFolder = useTabsStore((s) => s.setGroupFilesFolder);
   // The per-subwindow close button only makes sense with >1 subwindow.
   const groupCount = useTabsStore((s) => allGroups(s.layout).length);
   const showClose = groupCount > 1;
 
-  const isFocused = focusedGroupId === groupId;
+  // Only the OS-focused window paints an active subwindow, so a popout and the
+  // main window never both highlight one at once (#42 ergonomics).
+  const windowFocused = useWindowFocused();
+  const isFocused = windowFocused && focusedGroupId === groupId;
 
   return (
     <div
@@ -31,8 +54,31 @@ export function Subwindow({ groupId, projectCwd, children }: Props) {
         if (!isFocused) focusGroup(groupId);
       }}
     >
-      <TabBar groupId={groupId} projectCwd={projectCwd} showGroupClose={showClose} />
-      <div className="subwindow-body">{children}</div>
+      <TabBar
+        groupId={groupId}
+        projectCwd={projectCwd}
+        showGroupClose={showClose}
+        filesReserveWidth={
+          group?.filesOpen
+            ? clampFilesWidth(group.filesWidth ?? DEFAULT_GROUP_FILES_WIDTH)
+            : undefined
+        }
+      />
+      <div className="subwindow-body">
+        <div className="subwindow-pane-region">{children}</div>
+        {group?.filesOpen && (
+          <SubwindowFilesSidebar
+            scope={scope}
+            cwd={projectCwd}
+            width={group.filesWidth}
+            onWidthChange={(w) => setGroupFilesWidth(groupId, w)}
+            folder={group.filesFolder}
+            onFolderChange={(f) => setGroupFilesFolder(groupId, f)}
+            onHide={() => setGroupFiles(groupId, false)}
+            canOpenTabs
+          />
+        )}
+      </div>
     </div>
   );
 }
diff --git a/src/components/tabs/TabBar.tsx b/src/components/tabs/TabBar.tsx
index 9630431..f15051e 100644
--- a/src/components/tabs/TabBar.tsx
+++ b/src/components/tabs/TabBar.tsx
@@ -8,8 +8,6 @@ import {
   NETWORK_TAB_CMD,
   MONITOR_TAB_CMD,
   EMPTY_GROUP_ID,
-  effectiveTabLocation,
-  isLocatableKind,
   isPtyTabKind,
   useTabsStore,
   useGroup,
@@ -21,23 +19,34 @@ import { useDetachAnimStore, flyVector } from "../../stores/detachAnim";
 import { commitDrop } from "./commitDrop";
 import { TabDropPlaceholder } from "./TabDropPlaceholder";
 import {
-  AGENT_ITEMS,
+  EMPTY_CUSTOM_AGENTS,
   SHELL_ITEMS,
   TAB_ACCENT,
+  agentMenuEntries,
   buildStaticTabSpec,
+  isFileTabKind,
   type StaticMenuItem,
 } from "./newTabItems";
+import { AddTabMenuList } from "./AddTabMenuList";
+import { CustomAgentDialog } from "./CustomAgentDialog";
 import { type AgentMode, supportsAgentMode } from "./agentModes";
 import { reseedDetached, startDetachedDropSession } from "./detachedDropTargets";
 import { TabHoverCard } from "./TabHoverCard";
+import {
+  TabSourceBadge,
+  TabLocalityBadge,
+  LocalityMenu,
+  tabLocation,
+  type LocalityMenuState,
+} from "./TabLocalityBadges";
 import { useClampToViewport } from "../../hooks/useClampToViewport";
 import { startCursorPoll, desktopCursor, type PhysPoint } from "../../lib/coords";
 import { bindDragRelease, dragPlatform } from "../../lib/dragPlatform";
 import { useProjectsStore } from "../../stores/projects";
 import { useSettingsStore } from "../../stores/settings";
+import { useExperimental } from "../../lib/experimental";
+import { closeTabWithConfirm } from "../../lib/closeRemoteTab";
 import { useActivityStore } from "../../stores/activity";
-import { useAgentTaskStore } from "../../stores/agentTask";
-import { useFileSourcesStore } from "../../stores/fileSources";
 
 /** Default fly-out card size when no live pane thumbnail is available (group
  *  detach via the bar drag carries no preview). */
@@ -72,9 +81,17 @@ interface Props {
   projectCwd: string;
   /** Show the per-subwindow close (×) button. Only when >1 subwindow exists. */
   showGroupClose: boolean;
+  /**
+   * Width (px) the docked file viewer occupies below this bar, when open. The
+   * bar reserves the same width on its right so the scrolling tab strip stops
+   * at the pane's edge (tabs never run over the viewer, and overflow-scroll
+   * engages there) while the ◫/hide/close controls stay pinned at the far
+   * right, above the viewer. Undefined when no viewer is docked.
+   */
+  filesReserveWidth?: number;
 }
 
-export function TabBar({ groupId, projectCwd, showGroupClose }: Props) {
+export function TabBar({ groupId, projectCwd, showGroupClose, filesReserveWidth }: Props) {
   // Fine-grained subscriptions (Eff #3/#4): this bar tracks ONLY its own group
   // node + that group's resolved tab payloads, so a tab change in another
   // subwindow no longer re-renders every bar, and the per-render Map-of-all-tabs
@@ -98,20 +115,27 @@ export function TabBar({ groupId, projectCwd, showGroupClose }: Props) {
   const removeTab = useTabsStore((s) => s.removeTab);
   const setTabLocation = useTabsStore((s) => s.setTabLocation);
   const setAgentMode = useTabsStore((s) => s.setAgentMode);
-  // Experimental, default OFF: the per-tab Plan/Auto (planner/doer) badge.
-  const agentModeToggle = useSettingsStore((s) => s.settings?.agent_mode_toggle ?? false);
+  // Experimental — off by default, on in debug mode: the Plan/Auto badge.
+  const agentModeToggle = useExperimental("agent_mode_toggle");
   // Timestamp of the last mode flip, for the respawn debounce in handleAgentMode.
   const lastModeToggle = useRef(0);
   const closeGroup = useTabsStore((s) => s.closeGroup);
   const hideGroup = useTabsStore((s) => s.hideGroup);
+  // Per-subwindow right file viewer: toggle state lives on the group node.
+  const filesOpen = !!group?.filesOpen;
+  const setGroupFiles = useTabsStore((s) => s.setGroupFiles);
   // SSH-sync Phase 0: the local/remote locality toggle is only meaningful for a
   // remote (SSH) project's agent/shell tabs. Subscribe to a single boolean so a
   // project edit elsewhere doesn't re-render every bar.
   const isRemoteScope = useProjectsStore((s) => !!s.projects.find((p) => p.id === scope)?.remote);
+  // The scope project's primary host + extra worker hosts (multi-host remote),
+  // for the tab locality menu (Local / Primary / each worker). Change rarely, so
+  // subscribing to the references is fine.
+  const primaryHost = useProjectsStore((s) => s.projects.find((p) => p.id === scope)?.remote?.host);
+  const computeHosts = useProjectsStore((s) => s.projects.find((p) => p.id === scope)?.compute_hosts);
   // Per-tab file source (remote-native vs local mirror), published by the file
   // viewers. Lets the Remote/Local badge ride on the viewer tab itself rather
   // than costing a whole viewer header row. Only meaningful on remote projects.
-  const fileSources = useFileSourcesStore((s) => s.byTab);
   const closeAllTabs = useTabsStore((s) => s.closeAllTabs);
   const detachGroup = useTabsStore((s) => s.detachGroup);
   const detachTab = useTabsStore((s) => s.detachTab);
@@ -144,9 +168,6 @@ export function TabBar({ groupId, projectCwd, showGroupClose }: Props) {
   // is waiting on a decision, while not being looked at pulses until it's viewed.
   const attentionByTab = useActivityStore((s) => s.attentionByTab);
   const clearAttention = useActivityStore((s) => s.clearAttention);
-  // Per-tab agent task summary (the terminal title an agent set, like a native
-  // terminal shows), surfaced in the tab hover card.
-  const titleByTab = useAgentTaskStore((s) => s.titleByTab);
   // Active project's name, used to name an agent's own session on launch.
   const projectName = useProjectsStore(
     (s) => s.projects.find((p) => p.id === s.activeId)?.name ?? "",
@@ -163,6 +184,10 @@ export function TabBar({ groupId, projectCwd, showGroupClose }: Props) {
   // the left / Close to the right / Rename). Shift+right-click bypasses it and
   // goes straight to inline rename (#56). Keyed to the clicked tab + its index so
   // the left/right-of splits resolve against this group's ordered `tabs`.
+  // Multi-host: the open tab-locality menu, keyed by tab. Two-level — `view`
+  // starts at "root" (Local ↔ Remote) and drills into "machines" (primary +
+  // each worker) when Remote is chosen. Positioned like the tab context menu.
+  const [localityMenu, setLocalityMenu] = useState<LocalityMenuState | null>(null);
   const [tabMenu, setTabMenu] = useState<
     { x: number; y: number; key: string; index: number } | null
   >(null);
@@ -200,6 +225,24 @@ export function TabBar({ groupId, projectCwd, showGroupClose }: Props) {
       )
       .catch(() => setInstalledAgents(new Set()));
   }, []);
+  // User-defined custom agents (Settings.custom_agents) + the manage-dialog it
+  // opens. Their commands aren't in the built-in registry, so they're probed
+  // separately (`probe_binaries`); `null` until resolved. See agentMenuEntries.
+  const customAgents = useSettingsStore(
+    (s) => s.settings?.custom_agents ?? EMPTY_CUSTOM_AGENTS,
+  );
+  const [installedCustom, setInstalledCustom] = useState<Set<string> | null>(null);
+  const [agentDialogOpen, setAgentDialogOpen] = useState(false);
+  useEffect(() => {
+    const cmds = customAgents.map((a) => a.cmd);
+    if (cmds.length === 0) {
+      setInstalledCustom(new Set());
+      return;
+    }
+    invoke<string[]>("probe_binaries", { bins: cmds })
+      .then((found) => setInstalledCustom(new Set(found)))
+      .catch(() => setInstalledCustom(new Set()));
+  }, [customAgents]);
   const addMenuRef = useRef<HTMLDivElement>(null);
   const addBtnRef = useRef<HTMLButtonElement>(null);
   // The tabs live in their own horizontally-scrolling strip; chevrons flank it
@@ -369,10 +412,15 @@ export function TabBar({ groupId, projectCwd, showGroupClose }: Props) {
   function handleAdd(item: StaticMenuItem) {
     // addTab/ensureTab insert into the focused group; focus this one first.
     focusGroup(groupId);
-    if (item.kind === "files") {
+    // Both file panes are one-per-cwd: a second identical view of the same
+    // project is never what the click meant, so re-picking focuses the open one.
+    // A Files (Project) tab opened ON A FOLDER (the tree's "Open in a new tab")
+    // is not that tab, though — it is its own view — so it never absorbs this
+    // click, which would otherwise leave no way to get the project root back.
+    if (isFileTabKind(item.kind)) {
       ensureTab(
         { label: item.label, cmd: item.cmd, cwd: projectCwd, kind: item.kind },
-        (tab) => tab.kind === "files" && tab.cwd === projectCwd,
+        (tab) => tab.kind === item.kind && tab.cwd === projectCwd && !tab.folder,
       );
       setMenuPos(null);
       return;
@@ -696,8 +744,14 @@ export function TabBar({ groupId, projectCwd, showGroupClose }: Props) {
     const onCommit = async (shiftKey: boolean) => {
       cleanup();
       if (!dragging) {
-        // Never dragged → this was a click: activate the tab.
-        setGroupActive(groupId, tab.key);
+        // Never dragged → this was a click. Clicking an inactive tab activates
+        // it; clicking the already-active tab enters inline rename (#56 flow).
+        if (tab.key === activeKey) {
+          focusGroup(groupId);
+          setEditingKey(tab.key);
+        } else {
+          setGroupActive(groupId, tab.key);
+        }
         return;
       }
       // Idempotency: if another committer already finished this drag (CenterPanel's
@@ -750,8 +804,22 @@ export function TabBar({ groupId, projectCwd, showGroupClose }: Props) {
       // new window). Hit-tested at the final physical cursor so it reflects exactly
       // where the cursor ended. The popout's panes attach-only to PTYs the main
       // keeps mounted, so the tab's terminal survives the move.
+      //
+      // But `detached.at()` is a PURE GEOMETRIC AABB against the popout's OUTER rect —
+      // it matches a popout even when it sits BEHIND the main window at the same screen
+      // coords (the press that started this drag raised the main window). Docking into
+      // a popout the user can't see — while the split preview showed in the visible
+      // main window — is exactly the reported bug. So confirm the popout is actually
+      // FRONTMOST under the cursor before docking; an occluded one falls through to the
+      // in-window integration below, so the visible main window always wins. Mirrors
+      // FileTree's file-drag path (`detached_window_frontmost`).
       const overDetached = phys ? detached.at(phys) : null;
-      if (overDetached && phys) {
+      const overFrontDetached =
+        overDetached &&
+        (await invoke<boolean>("detached_window_frontmost", {
+          registryId: overDetached.label,
+        }).catch(() => true));
+      if (overDetached && overFrontDetached && phys) {
         // Dock into the SPECIFIC pane under the cursor (a body edge splits, a bar
         // merges) — resolved synchronously at the release coords, so no stale
         // cross-window cache and never always-the-first-pane.
@@ -772,11 +840,13 @@ export function TabBar({ groupId, projectCwd, showGroupClose }: Props) {
         useDragStore.getState().end();
         return;
       }
-      // Released in FREE SPACE — outside the main window and not over a popout, so
-      // no Eldrun window is under the cursor (e.g. dragged onto the desktop or
-      // another monitor). Pop this tab into its own standalone OS window. Client
-      // coords falling outside [0,inner) is the outside-the-window signal (DOM
-      // clientX/Y is reliable CSS px on every engine).
+      // Released in FREE SPACE — outside the main window and not over a FRONT popout,
+      // so no visible Eldrun window is under the cursor (e.g. dragged onto the desktop
+      // or another monitor). Pop this tab into its own standalone OS window. Client
+      // coords outside [0,inner) is the outside-the-window signal (DOM clientX/Y is
+      // reliable CSS px on every engine). An OCCLUDED popout is deliberately NOT
+      // "outside" here: the main window is what's actually under the cursor, so the
+      // release falls through to the in-window integration below.
       const outside =
         lastClient.x < 0 ||
         lastClient.y < 0 ||
@@ -969,19 +1039,23 @@ export function TabBar({ groupId, projectCwd, showGroupClose }: Props) {
         const showMarkerBefore = isDropTarget && reorderIndex === index;
         // Whole-tab status glow (no dot, no width change):
         //  - working (green pulse): PTY producing sustained output.
-        //  - needs-decision (orange pulse): an agent you're not looking at went
-        //    quiet with a choice/permission prompt on its screen.
+        //  - needs-decision (orange pulse): an agent went quiet with a
+        //    choice/permission prompt on its screen.
         //  - finished (green steady): an agent you're not looking at went quiet
         //    with no prompt — its turn is done and its result is unread.
-        // Working wins. The pulses are an attention-getter for tabs you're not
-        // looking at, so none of them show on the viewed tab — you can already see
-        // what it's doing.
+        // Working wins. Working and finished are about output you HAVEN'T seen, so
+        // they never show on the viewed tab — its screen says it better. A pending
+        // decision is the exception: it's about an agent that is BLOCKED, and it
+        // stays blocked whether or not you're looking at it. The lamp holds until
+        // the prompt is answered, so a tab left on screen mid-prompt while you work
+        // elsewhere in the window still says so.
         const ptyId = `${scope}:${tab.key}`;
         const working = isPtyTabKind(tab.kind) && !isActive && !!busyByTab[ptyId];
-        const attn =
-          (tab.kind === "agent" || tab.kind === "local_agent") && !isActive
+        const rawAttn =
+          tab.kind === "agent" || tab.kind === "local_agent"
             ? attentionByTab[ptyId] ?? null
             : null;
+        const attn = !isActive || rawAttn === "decision" ? rawAttn : null;
         const stateClass = working
           ? " working"
           : attn === "decision"
@@ -1056,24 +1130,9 @@ export function TabBar({ groupId, projectCwd, showGroupClose }: Props) {
               <span className="tab-label">{tab.label}</span>
             )}
             {/* Viewer file-source badge — remote-native (host SFTP) vs local
-                mirror — published by FileViewerPane. Rides on the tab so it
-                costs no viewer header row; absent for local projects/tabs. */}
-            {(() => {
-              const src = fileSources[tab.key];
-              if (src !== "remote" && src !== "local") return null;
-              return (
-                <span
-                  className={`tab-source ${src}`}
-                  title={
-                    src === "remote"
-                      ? "Remote-native: read directly from the host over SFTP (no local copy)."
-                      : "Local mirror: read from this project's local synced copy of the host file."
-                  }
-                >
-                  {src === "remote" ? "☁" : "⌂"}
-                </span>
-              );
-            })()}
+                mirror, a clickable toggle when the file exists on both sides.
+                Shared with the detached strip (see TabLocalityBadges). */}
+            <TabSourceBadge tabKey={tab.key} />
             {/* Planner/doer badge (experimental, off by default) — click to switch
                 the agent between Plan and Auto. Only for agents that can actually
                 be launched into a mode AND resume on the respawn that costs (see
@@ -1100,32 +1159,28 @@ export function TabBar({ groupId, projectCwd, showGroupClose }: Props) {
                 </button>
               );
             })()}
-            {/* SSH-sync Phase 0: local/remote locality badge — click to toggle
-                whether this agent/shell tab runs in the local mirror or on the
-                host. Only shown for a remote project's locatable tabs. */}
-            {isRemoteScope && isLocatableKind(tab.kind) && (() => {
-              const loc = effectiveTabLocation(tab);
-              return (
-                <button
-                  className={`tab-locality ${loc}`}
-                  title={
-                    loc === "local"
-                      ? "Runs locally in the project mirror — click to run on the host"
-                      : "Runs on the host over SSH — click to run locally in the mirror"
-                  }
-                  onPointerDown={(e) => e.stopPropagation()}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setTabLocation(tab.key, loc === "local" ? "remote" : "local");
-                  }}
-                >
-                  {loc === "local" ? "⌂" : "☁"}
-                </button>
-              );
-            })()}
+            {/* Locality badge — click to choose where this agent/shell tab runs:
+                the local mirror, the primary host, or (multi-host remote,
+                docs/multi_host_remote_plan.md) any worker machine. Only shown for
+                a remote project's locatable tabs. Shared with the detached strip. */}
+            {isRemoteScope && (
+              <TabLocalityBadge
+                tab={tab}
+                primaryHost={primaryHost}
+                computeHosts={computeHosts}
+                onOpen={(r, startOnMachines) =>
+                  setLocalityMenu({
+                    key: tab.key,
+                    x: r.left,
+                    y: r.bottom + 2,
+                    view: startOnMachines ? "machines" : "root",
+                  })
+                }
+              />
+            )}
             <button
               className="tab-close"
-              onClick={(e) => { e.stopPropagation(); removeTab(tab.key); }}
+              onClick={(e) => { e.stopPropagation(); closeTabWithConfirm(tab.key); }}
               title="Close tab"
             >
               ×
@@ -1164,187 +1219,206 @@ export function TabBar({ groupId, projectCwd, showGroupClose }: Props) {
           ›
         </button>
       )}
-      {groupId !== EMPTY_GROUP_ID && (
-        <button
-          className="subwindow-hide"
-          title="Hide subwindow (bring it back from the right panel)"
-          // Same self-contained interaction discipline as the close button below:
-          // stop the bar's focusGroup mousedown and don't let the click bubble.
-          onMouseDown={(e) => e.stopPropagation()}
-          onClick={(e) => { e.stopPropagation(); hideGroup(groupId); }}
-        >
-          –
-        </button>
-      )}
-      {showGroupClose && (
-        <button
-          className="subwindow-close"
-          title="Close subwindow"
-          // Stop the bar's onMouseDown focusGroup from running first (it isn't
-          // harmful, but keeping the close interaction self-contained avoids any
-          // focus/state churn racing the click) and ensure the click itself
-          // isn't bubbled into a tab/pointer handler.
-          onMouseDown={(e) => e.stopPropagation()}
-          onClick={(e) => { e.stopPropagation(); closeGroup(groupId); }}
-        >
-          ×
-        </button>
-      )}
+      {/* The subwindow controls stay pinned at the far right of the bar. When a
+          file viewer is docked below, this cluster reserves the viewer's width
+          (`filesReserveWidth`) and right-aligns within it, so it sits directly
+          above the viewer while the scrolling tab strip stops at the pane edge. */}
+      <div
+        className="tab-controls"
+        style={filesReserveWidth != null ? { width: filesReserveWidth } : undefined}
+      >
+        {groupId !== EMPTY_GROUP_ID && (
+          <button
+            className={`subwindow-files-toggle${filesOpen ? " open" : ""}`}
+            title={filesOpen ? "Close this subwindow's file viewer" : "Open a file viewer in this subwindow"}
+            // Same self-contained interaction discipline as the hide/close buttons:
+            // stop the bar's focusGroup mousedown and don't let the click bubble.
+            onMouseDown={(e) => e.stopPropagation()}
+            onClick={(e) => { e.stopPropagation(); setGroupFiles(groupId, !filesOpen); }}
+          >
+            ◫
+          </button>
+        )}
+        {groupId !== EMPTY_GROUP_ID && (
+          <button
+            className="subwindow-hide"
+            title="Hide subwindow (bring it back from the right panel)"
+            // Same self-contained interaction discipline as the close button below:
+            // stop the bar's focusGroup mousedown and don't let the click bubble.
+            onMouseDown={(e) => e.stopPropagation()}
+            onClick={(e) => { e.stopPropagation(); hideGroup(groupId); }}
+          >
+            –
+          </button>
+        )}
+        {showGroupClose && (
+          <button
+            className="subwindow-close"
+            title="Close subwindow"
+            // Stop the bar's onMouseDown focusGroup from running first (it isn't
+            // harmful, but keeping the close interaction self-contained avoids any
+            // focus/state churn racing the click) and ensure the click itself
+            // isn't bubbled into a tab/pointer handler.
+            onMouseDown={(e) => e.stopPropagation()}
+            onClick={(e) => { e.stopPropagation(); closeGroup(groupId); }}
+          >
+            ×
+          </button>
+        )}
+      </div>
       {menuOpen && menuPos && createPortal(
         <div
           className="tab-new-menu"
           ref={addMenuRef}
           style={{ position: "fixed", left: menuPos.x, top: menuPos.y }}
         >
-          <div className="tab-new-menu-group-label">Agents</div>
-          {AGENT_ITEMS.filter((item) => installedAgents?.has(item.cmd)).map((item) => (
-            <button
-              key={item.cmd}
-              className="tab-new-menu-item"
-              onClick={() => handleAdd(item)}
-            >
-              <span className="tab-new-menu-dot" style={{ color: TAB_ACCENT[item.kind] }}>●</span>
-              {item.label}
-            </button>
-          ))}
-
-          <div className="tab-new-menu-group-label">
-            {localModel ? `Local Model · ${localModel}` : "Local Model"}
-          </div>
-          {localModel ? (
-            (() => {
+          <AddTabMenuList
+            groups={[
+              {
+                label: "Agents",
+                entries: agentMenuEntries({
+                  installedBuiltins: installedAgents,
+                  installedCmds: installedCustom,
+                  customAgents,
+                  pick: handleAdd,
+                  onAddCustom: () => {
+                    setMenuPos(null);
+                    setAgentDialogOpen(true);
+                  },
+                }),
+              },
               // Only offer agents whose binary is actually installed: Mistral/vibe
               // (checked against `installedAgents`) and the drivers the backend
               // already marks `available` (which now includes an installed check).
-              const vibeInstalled = installedAgents?.has("vibe") ?? false;
-              const drivers = localDrivers.filter((d) => d.available);
-              if (!vibeInstalled && drivers.length === 0) {
-                return (
-                  <div className="tab-new-menu-hint">
-                    No local agent installed — install one in the 🧠 menu
-                  </div>
-                );
-              }
-              return (
-                <>
-                  {/* Mistral/vibe keeps its bespoke per-model VIBE_HOME path. */}
-                  {vibeInstalled && (
-                    <button
-                      className="tab-new-menu-item"
-                      onClick={() => handleOllamaModel(localModel)}
-                    >
-                      <span className="tab-new-menu-dot" style={{ color: TAB_ACCENT["local_agent"] }}>●</span>
-                      Mistral
-                    </button>
-                  )}
-                  {/* Other agents drive the same model via `ollama launch` / fallback. */}
-                  {drivers.map((d) => (
-                    <button
-                      key={d.id}
-                      className="tab-new-menu-item"
-                      onClick={() => handleLocalLaunch(d.id, d.label, localModel)}
-                    >
-                      <span className="tab-new-menu-dot" style={{ color: TAB_ACCENT["local_agent"] }}>●</span>
-                      {d.label}
-                    </button>
-                  ))}
-                </>
-              );
-            })()
-          ) : (
-            <div className="tab-new-menu-hint">No local model set — pick one in the app bar</div>
-          )}
-
-          <div className="tab-new-menu-group-label">Shell</div>
-          {SHELL_ITEMS.filter((i) => i.kind === "shell").map((item) => (
-            <button
-              key={item.cmd}
-              className="tab-new-menu-item"
-              onClick={() => handleAdd(item)}
-            >
-              <span className="tab-new-menu-dot" style={{ color: TAB_ACCENT[item.kind] }}>●</span>
-              {item.label}
-            </button>
-          ))}
-
-          <div className="tab-new-menu-group-label">Files</div>
-          {SHELL_ITEMS.filter((i) => i.kind === "files").map((item) => (
-            <button
-              key={item.cmd}
-              className="tab-new-menu-item"
-              disabled={!projectCwd}
-              onClick={() => handleAdd(item)}
-            >
-              <span className="tab-new-menu-dot" style={{ color: TAB_ACCENT[item.kind] }}>●</span>
-              {item.label}
-            </button>
-          ))}
-
-          {/* System Monitor is whole-machine and Disk Usage picks its own scan
-              root, so both are offered in every scope; Network Traffic is
-              per-project (host/SSH link), so root has none. */}
-          <div className="tab-new-menu-group-label">Monitoring</div>
-          <button className="tab-new-menu-item" onClick={handleAddMonitor}>
-            <span
-              className="tab-new-menu-dot"
-              style={{ color: TAB_ACCENT.monitor }}
-            >
-              ●
-            </span>
-            System Monitor
-          </button>
-          <button className="tab-new-menu-item" onClick={handleAddDiskUsage}>
-            <span
-              className="tab-new-menu-dot"
-              style={{ color: TAB_ACCENT.diskusage }}
-            >
-              ◕
-            </span>
-            Disk Usage
-          </button>
-          {scope !== "root" && (
-            <button className="tab-new-menu-item" onClick={handleAddNetwork}>
-              <span
-                className="tab-new-menu-dot"
-                style={{ color: TAB_ACCENT.network }}
-              >
-                ●
-              </span>
-              Network Traffic
-            </button>
-          )}
-
-          {showBlobItem && (
-            <>
-              <div className="tab-new-menu-group-label">Workspace</div>
-              <button className="tab-new-menu-item" onClick={handleAddBlob}>
-                <span className="tab-new-menu-dot" style={{ color: TAB_ACCENT["projects3d"] }}>◍</span>
-                Projects (3D)
-              </button>
-            </>
-          )}
-
-          <div className="tab-new-menu-group-label">Calendar</div>
-          <button className="tab-new-menu-item" onClick={handleAddCalendar}>
-            <span className="tab-new-menu-dot" style={{ color: TAB_ACCENT.calendar }}>◆</span>
-            Calendar
-          </button>
-
-          <div className="tab-new-menu-group-label">Project</div>
-          <button
-            className="tab-new-menu-item"
-            disabled={!hasAnyTabs}
-            onClick={() => {
-              closeAllTabs();
-              setMenuPos(null);
-            }}
-          >
-            <span className="tab-new-menu-dot" style={{ color: "var(--danger, #d9534f)" }}>×</span>
-            Close all tabs
-          </button>
+              {
+                label: localModel ? `Local Model · ${localModel}` : "Local Model",
+                entries: localModel
+                  ? [
+                      // Mistral/vibe keeps its bespoke per-model VIBE_HOME path.
+                      ...(installedAgents?.has("vibe")
+                        ? [{
+                            key: "vibe",
+                            label: "Mistral",
+                            color: TAB_ACCENT["local_agent"],
+                            onPick: () => void handleOllamaModel(localModel),
+                          }]
+                        : []),
+                      // Other agents drive the same model via `ollama launch` / fallback.
+                      ...localDrivers.filter((d) => d.available).map((d) => ({
+                        key: d.id,
+                        label: d.label,
+                        color: TAB_ACCENT["local_agent"],
+                        onPick: () => void handleLocalLaunch(d.id, d.label, localModel),
+                      })),
+                    ]
+                  : [],
+                hint: localModel
+                  ? "No local agent installed — install one in the 🧠 menu"
+                  : "No local model set — pick one in the app bar",
+              },
+              {
+                label: "Shell",
+                entries: SHELL_ITEMS.filter((i) => i.kind === "shell").map((item) => ({
+                  key: item.cmd || "shell",
+                  label: item.label,
+                  color: TAB_ACCENT[item.kind],
+                  onPick: () => handleAdd(item),
+                })),
+              },
+              {
+                label: "Files",
+                entries: SHELL_ITEMS.filter((i) => isFileTabKind(i.kind)).map((item) => ({
+                  key: item.cmd,
+                  label: item.label,
+                  color: TAB_ACCENT[item.kind],
+                  disabled: !projectCwd,
+                  onPick: () => handleAdd(item),
+                })),
+              },
+              // System Monitor is whole-machine and Disk Usage picks its own scan
+              // root, so both are offered in every scope; Network Traffic is
+              // per-project (host/SSH link), so root has none.
+              {
+                label: "Monitoring",
+                entries: [
+                  {
+                    key: "monitor",
+                    label: "System Monitor",
+                    color: TAB_ACCENT.monitor,
+                    onPick: handleAddMonitor,
+                  },
+                  {
+                    key: "diskusage",
+                    label: "Disk Usage",
+                    dot: "◕",
+                    color: TAB_ACCENT.diskusage,
+                    onPick: handleAddDiskUsage,
+                  },
+                  ...(scope !== "root"
+                    ? [{
+                        key: "network",
+                        label: "Network Traffic",
+                        color: TAB_ACCENT.network,
+                        onPick: handleAddNetwork,
+                      }]
+                    : []),
+                ],
+              },
+              ...(showBlobItem
+                ? [{
+                    label: "Workspace",
+                    entries: [{
+                      key: "blob",
+                      label: "Projects (3D)",
+                      dot: "◍",
+                      color: TAB_ACCENT["projects3d"],
+                      onPick: handleAddBlob,
+                    }],
+                  }]
+                : []),
+              {
+                label: "Calendar",
+                entries: [{
+                  key: "calendar",
+                  label: "Calendar",
+                  dot: "◆",
+                  color: TAB_ACCENT.calendar,
+                  onPick: handleAddCalendar,
+                }],
+              },
+              {
+                label: "Project",
+                entries: [{
+                  key: "close-all",
+                  label: "Close all tabs",
+                  dot: "×",
+                  color: "var(--danger, #d9534f)",
+                  disabled: !hasAnyTabs,
+                  onPick: () => {
+                    closeAllTabs();
+                    setMenuPos(null);
+                  },
+                }],
+              },
+            ]}
+          />
         </div>,
         document.body,
       )}
+      {agentDialogOpen && (
+        <CustomAgentDialog onClose={() => setAgentDialogOpen(false)} />
+      )}
+      {localityMenu && (
+        <LocalityMenu
+          menu={localityMenu}
+          current={tabLocation(tabs.find((t) => t.key === localityMenu.key))}
+          primaryHost={primaryHost}
+          computeHosts={computeHosts}
+          onClose={() => setLocalityMenu(null)}
+          onChangeView={(view) => setLocalityMenu((m) => (m ? { ...m, view } : m))}
+          onChoose={(key, loc) => setTabLocation(key, loc)}
+        />
+      )}
       {tabMenu && createPortal(
         <div
           className="tab-new-menu"
@@ -1364,7 +1438,7 @@ export function TabBar({ groupId, projectCwd, showGroupClose }: Props) {
           <button
             className="tab-new-menu-item"
             onClick={() => {
-              removeTab(tabMenu.key);
+              closeTabWithConfirm(tabMenu.key);
               setTabMenu(null);
             }}
           >
@@ -1408,17 +1482,18 @@ export function TabBar({ groupId, projectCwd, showGroupClose }: Props) {
         document.body,
       )}
       {/* Styled tab hover card (matches the project pill popup). Suppressed
-          mid-drag and while a menu is open so it never overlaps them. */}
+          mid-drag and while a menu is open so it never overlaps them. The card
+          derives its own content from the tab + this window's stores. */}
       {hoverTab && dragKey === null && !menuOpen && !tabMenu && (() => {
         const tab = tabs.find((t) => t.key === hoverTab.key);
         if (!tab) return null;
         return (
           <TabHoverCard
-            label={tab.label}
-            kind={tab.kind}
-            cwd={tab.cwd}
-            sessionId={tab.sessionId}
-            summary={titleByTab[tab.key]}
+            tab={tab}
+            scope={scope}
+            isRemote={isRemoteScope}
+            primaryHost={primaryHost}
+            computeHosts={computeHosts}
             anchorX={hoverTab.x}
             anchorY={hoverTab.y}
           />
diff --git a/src/components/tabs/TabHoverCard.tsx b/src/components/tabs/TabHoverCard.tsx
index a9c7649..2beb184 100644
--- a/src/components/tabs/TabHoverCard.tsx
+++ b/src/components/tabs/TabHoverCard.tsx
@@ -1,6 +1,20 @@
-import { useLayoutEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import type { TabKind } from "../../stores/tabs";
+import {
+  effectiveTabLocation,
+  isLocatableKind,
+  isPtyTabKind,
+  isResumableAgentTab,
+  localityHostLabel,
+  remoteHostIdOf,
+  type LocalityHost,
+  type TabEntry,
+  type TabKind,
+} from "../../stores/tabs";
+import { lastPtyOutputAt, useActivityStore } from "../../stores/activity";
+import { useAgentTaskStore } from "../../stores/agentTask";
+import { useFileSourcesStore } from "../../stores/fileSources";
+import type { InternalViewer } from "../../lib/viewers/fileUtils";
 import { TAB_ACCENT } from "./newTabItems";
 
 /** Friendly, human-readable name for a tab kind, shown as the card's muted
@@ -10,6 +24,7 @@ const KIND_LABEL: Record<TabKind, string> = {
   local_agent: "Local agent",
   shell: "Shell",
   files: "Files",
+  projectfiles: "Files (Project)",
   embed: "Embedded app",
   projects3d: "Projects (3D)",
   network: "Network traffic",
@@ -18,14 +33,68 @@ const KIND_LABEL: Record<TabKind, string> = {
   calendar: "Calendar",
 };
 
+/** Which built-in viewer a file tab renders in — "Embedded app" says nothing
+ *  exactly where the card is most used, six viewer tabs deep. */
+const VIEWER_LABEL: Record<InternalViewer, string> = {
+  pdf: "PDF viewer",
+  image: "Image viewer",
+  gif: "GIF viewer",
+  markdown: "Markdown viewer",
+  text: "Text editor",
+  tex: "TeX editor",
+  table: "Table viewer",
+  notebook: "Notebook viewer",
+  diff: "Diff viewer",
+  syncdiff: "Sync diff",
+  syncmerge: "Sync merge",
+  odt: "Document viewer",
+  media: "Media player",
+  html: "HTML viewer",
+  sqlite: "SQLite browser",
+  yaml: "YAML/JSON editor",
+};
+
 /** Gap between the tab and the card, and the keep-inside-the-window margin. */
 const GAP = 6;
 const MARGIN = 8;
 
+/** "5 s" / "12 min" / "2 h 05 min" — the quiet-time readout. */
+function formatQuiet(ms: number): string {
+  const s = Math.max(0, Math.round(ms / 1000));
+  if (s < 60) return `${s} s`;
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m} min`;
+  return `${Math.floor(m / 60)} h ${String(m % 60).padStart(2, "0")} min`;
+}
+
+/**
+ * The folder shown on the card. A file tab's `cwd` is just the project root —
+ * the same for every file tab, so it says nothing; show the file's FOLDER
+ * relative to that root instead (the filename is already the card's title; a
+ * root-level file shows no path row at all). Falls back to the absolute folder
+ * for a file outside the root, e.g. a remote-native host path. Non-file tabs
+ * keep their cwd.
+ */
+function cardPath(tab: TabEntry): string {
+  if (tab.kind !== "embed" || !tab.embedPath) return tab.cwd;
+  const dirOf = (p: string) => {
+    const i = Math.max(p.lastIndexOf("/"), p.lastIndexOf("\\"));
+    return i >= 0 ? p.slice(0, i) : "";
+  };
+  const sep = tab.embedPath[tab.cwd.length];
+  return tab.embedPath.startsWith(tab.cwd) && (sep === "/" || sep === "\\")
+    ? dirOf(tab.embedPath.slice(tab.cwd.length + 1))
+    : dirOf(tab.embedPath);
+}
+
 /**
  * Hover card for a tab — the tab-bar counterpart to `ProjectHoverCard`. Reuses
- * the project popup's row classes so the two hovers look identical, and adds the
- * agent task summary (captured from the terminal title). Rendered into a portal.
+ * the project popup's row classes so the two hovers look identical. Rendered
+ * into a portal by BOTH tab strips (the main window's `TabBar` and the detached
+ * popout's `DetachedCenterPanel`), which is why it takes the whole `TabEntry`
+ * and derives everything itself — the stores it reads (agent task title, file
+ * source, activity) are per-window heaps, so each window's card shows what that
+ * window knows and nothing has to be threaded across.
  *
  * `anchorX` is the tab's horizontal centre and `anchorY` its bottom edge. The
  * card measures itself and clamps into the viewport (a tab near the right/left
@@ -33,20 +102,24 @@ const MARGIN = 8;
  * flips above the bar if it would overflow the bottom.
  */
 export function TabHoverCard({
-  label,
-  kind,
-  cwd,
-  sessionId,
-  summary,
+  tab,
+  scope,
+  /** Whether the owning project is a remote (SSH) one — gates the locality
+   *  line. The detached window is inert to the projects store and omits it. */
+  isRemote = false,
+  /** Primary host name + worker machines, so the locality line can name the
+   *  concrete machine ("Primary (gpu-1)", "gpu-2") not just "on host". Omitted by
+   *  the detached window (inert to the projects store) → falls back to "on host". */
+  primaryHost,
+  computeHosts,
   anchorX,
   anchorY,
 }: {
-  label: string;
-  kind: TabKind;
-  cwd: string;
-  sessionId?: string;
-  /** The agent task summary (terminal title); omitted when the tab set none. */
-  summary?: string;
+  tab: TabEntry;
+  scope: string;
+  isRemote?: boolean;
+  primaryHost?: string;
+  computeHosts?: LocalityHost[];
   anchorX: number;
   anchorY: number;
 }) {
@@ -55,6 +128,72 @@ export function TabHoverCard({
   // flash the card at the un-clamped position.
   const [pos, setPos] = useState<{ left: number; top: number } | null>(null);
 
+  const ptyId = `${scope}:${tab.key}`;
+  // The agent task summary (terminal title); absent when the tab set none.
+  const summary = useAgentTaskStore((s) => s.titleByTab[tab.key]);
+  // Viewer file-source (remote-native vs local mirror), published by the file
+  // viewers on remote projects; absent otherwise.
+  const fileSource = useFileSourcesStore((s) => s.byTab[tab.key]);
+  const busy = useActivityStore((s) => !!s.busyByTab[ptyId]);
+
+  // The "quiet for…" line ages while the card is up; tick it along so a card
+  // hovered for a while doesn't freeze at its mount-time reading.
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const id = window.setInterval(() => setNow(Date.now()), 10_000);
+    return () => window.clearInterval(id);
+  }, []);
+
+  const isAgent = tab.kind === "agent" || tab.kind === "local_agent";
+
+  // Muted kind line, enriched with what the tiny tab badges can only hint at:
+  // the concrete viewer, the agent's Plan/Auto mode, where the process runs
+  // (remote projects), and which side a viewed file came from.
+  const kindBits: string[] = [
+    tab.kind === "embed" && tab.viewer
+      ? (VIEWER_LABEL[tab.viewer] ?? KIND_LABEL.embed)
+      : (KIND_LABEL[tab.kind] ?? tab.kind),
+  ];
+  if (isAgent && tab.agentMode) {
+    kindBits.push(tab.agentMode === "plan" ? "Plan mode" : "Auto mode");
+  }
+  if (isRemote && isLocatableKind(tab.kind)) {
+    const loc = effectiveTabLocation(tab);
+    if (remoteHostIdOf(loc) === null) {
+      kindBits.push("local mirror");
+    } else {
+      // Name the concrete machine when known ("Primary (gpu-1)" / "gpu-2"); the
+      // detached window has no host list, so it degrades to a generic label.
+      const named = primaryHost || computeHosts ? localityHostLabel(loc, { primaryHost, computeHosts }) : null;
+      kindBits.push(named ? `on ${named}` : "on host (SSH)");
+    }
+  }
+  if (tab.kind === "embed" && fileSource === "remote") {
+    kindBits.push("remote-native (SFTP)");
+  } else if (tab.kind === "embed" && fileSource === "local") {
+    kindBits.push("local mirror");
+  }
+
+  // "working" / "quiet for N min" — only for tabs that own a process, and only
+  // once it produced output this session (a window that never saw the PTY —
+  // e.g. a fresh popout — has nothing truthful to say, so it says nothing).
+  const lastOut = isPtyTabKind(tab.kind) ? lastPtyOutputAt(ptyId) : undefined;
+  const activity = busy
+    ? "working — streaming output"
+    : lastOut !== undefined
+      ? `quiet for ${formatQuiet(now - lastOut)}`
+      : null;
+
+  // Whether the conversation survives an app restart — a real behavioral split
+  // between agents (see RESUMABLE_AGENTS) that nothing else surfaces.
+  const restart = isAgent
+    ? isResumableAgentTab(tab)
+      ? "conversation resumes on relaunch"
+      : "conversation is dropped on relaunch"
+    : null;
+
+  const path = cardPath(tab);
+
   useLayoutEffect(() => {
     const el = ref.current;
     if (!el) return;
@@ -68,7 +207,7 @@ export function TabHoverCard({
       top = Math.max(MARGIN, anchorY - height - GAP);
     }
     setPos({ left, top });
-  }, [anchorX, anchorY, label, kind, cwd, sessionId, summary]);
+  }, [anchorX, anchorY, tab, summary, fileSource, activity, restart, path]);
 
   return createPortal(
     <div
@@ -84,18 +223,30 @@ export function TabHoverCard({
       }}
     >
       <span className="tab-popup-header">
-        <span className="tab-popup-dot" style={{ color: TAB_ACCENT[kind] }}>
+        <span className="tab-popup-dot" style={{ color: TAB_ACCENT[tab.kind] }}>
           ●
         </span>
-        <span className="tab-popup-label">{label}</span>
+        <span className="tab-popup-label">{tab.label}</span>
       </span>
       {summary && <span className="pill-popup-description">{summary}</span>}
-      <span className="tab-popup-kind">{KIND_LABEL[kind] ?? kind}</span>
-      {cwd && <span className="pill-popup-path">{cwd}</span>}
-      {sessionId && (
+      <span className="tab-popup-kind">{kindBits.join(" · ")}</span>
+      {activity && (
+        <span className="pill-popup-path-row">
+          <span className="pill-popup-path-label">activity</span>
+          <span className={`tab-popup-meta${busy ? " working" : ""}`}>{activity}</span>
+        </span>
+      )}
+      {restart && (
+        <span className="pill-popup-path-row">
+          <span className="pill-popup-path-label">restart</span>
+          <span className="tab-popup-meta">{restart}</span>
+        </span>
+      )}
+      {path && <span className="pill-popup-path">{path}</span>}
+      {tab.sessionId && (
         <span className="pill-popup-path-row">
           <span className="pill-popup-path-label">session</span>
-          <span className="pill-popup-path">{sessionId}</span>
+          <span className="pill-popup-path">{tab.sessionId}</span>
         </span>
       )}
     </div>,
diff --git a/src/components/tabs/TabLocalityBadges.tsx b/src/components/tabs/TabLocalityBadges.tsx
new file mode 100644
index 0000000..d3012a5
--- /dev/null
+++ b/src/components/tabs/TabLocalityBadges.tsx
@@ -0,0 +1,293 @@
+import { useState } from "react";
+import { createPortal } from "react-dom";
+import {
+  effectiveTabLocation,
+  remoteHostIdOf,
+  isLocatableKind,
+  localityHostLabel,
+  workerRunnable,
+  type LocalityHost,
+  type TabEntry,
+  type TabLocation,
+} from "../../stores/tabs";
+import { useFileSourcesStore } from "../../stores/fileSources";
+import { useRunHostPrefStore } from "../../stores/runHostPref";
+import { UntestedTag } from "../common/UntestedTag";
+
+/**
+ * The two per-tab local/remote badges + the locality menu, factored out so the
+ * main-window `TabBar` and each detached popout's tab strip render the SAME
+ * controls (the user asked for parity, and drift between two copies is exactly
+ * what an extraction prevents). Everything here reads the tab payload + the
+ * streamed host list; WHERE a location change is applied is the caller's
+ * `onChoose` (the main store directly, or a streamed edit from a popout).
+ */
+
+/** The open locality-menu state a strip owns: which tab, where to anchor it, and
+ *  the two-level drill (`root` = Local↔Remote, `machines` = primary + workers). */
+export interface LocalityMenuState {
+  key: string;
+  x: number;
+  y: number;
+  view: "root" | "machines";
+}
+
+/** A tab's effective location, or `"local"` for a missing tab — the `current`
+ *  a `LocalityMenu` dots, without the caller importing the tabs helpers. */
+export function tabLocation(tab: TabEntry | undefined): TabLocation {
+  return tab ? effectiveTabLocation(tab) : "local";
+}
+
+/** The file-source badge on a viewer tab: a clickable Local/Remote toggle when
+ *  the viewer published a switch (the file exists on both sides of a remote
+ *  project), else the plain read-only glyph. Renders nothing on a local tab. */
+export function TabSourceBadge({ tabKey }: { tabKey: string }) {
+  const src = useFileSourcesStore((s) => s.byTab[tabKey]);
+  const ctl = useFileSourcesStore((s) => s.controlsByTab[tabKey]);
+  if (ctl) {
+    const onRemote = ctl.current === "remote";
+    const blocked = !onRemote && ctl.remoteDisabled;
+    return (
+      <button
+        className={`tab-source clickable ${onRemote ? "remote" : "local"}${blocked ? " disabled" : ""}`}
+        title={
+          blocked
+            ? "This file has no copy on the host — nothing to switch to."
+            : onRemote
+              ? "Reading from the host over SFTP — click to read the local mirror copy."
+              : "Reading the local mirror copy — click to read from the host over SFTP."
+        }
+        onPointerDown={(e) => e.stopPropagation()}
+        onClick={(e) => {
+          e.stopPropagation();
+          if (blocked) return;
+          ctl.set(onRemote ? "local" : "remote");
+        }}
+      >
+        {onRemote ? "☁" : "⌂"}
+      </button>
+    );
+  }
+  if (src !== "remote" && src !== "local") return null;
+  return (
+    <span
+      className={`tab-source ${src}`}
+      title={
+        src === "remote"
+          ? "Remote-native: read directly from the host over SFTP (no local copy)."
+          : "Local mirror: read from this project's local synced copy of the host file."
+      }
+    >
+      {src === "remote" ? "☁" : "⌂"}
+    </span>
+  );
+}
+
+/** The locality badge (⌂ local / ☁ remote) on an agent/shell tab of a remote
+ *  project — click to open the machine menu. Renders nothing for a non-locatable
+ *  tab kind. Callers gate on the project being remote before rendering it. */
+export function TabLocalityBadge({
+  tab,
+  primaryHost,
+  computeHosts,
+  onOpen,
+}: {
+  tab: TabEntry;
+  primaryHost?: string;
+  computeHosts?: LocalityHost[];
+  /** Open the menu anchored under the badge; `startOnMachines` jumps straight to
+   *  the machine list when the tab already runs remotely (one click closer to a
+   *  remote→remote reassignment). */
+  onOpen: (rect: DOMRect, startOnMachines: boolean) => void;
+}) {
+  if (!isLocatableKind(tab.kind)) return null;
+  const loc = effectiveTabLocation(tab);
+  const hostId = remoteHostIdOf(loc);
+  const label = localityHostLabel(loc, { primaryHost, computeHosts });
+  return (
+    <button
+      className={`tab-locality ${hostId === null ? "local" : "remote"}`}
+      title={`Runs on: ${label} — click to change where this tab runs`}
+      onPointerDown={(e) => e.stopPropagation()}
+      onClick={(e) => {
+        e.stopPropagation();
+        onOpen((e.currentTarget as HTMLElement).getBoundingClientRect(), hostId !== null);
+      }}
+    >
+      {hostId === null ? "⌂" : "☁"}
+    </button>
+  );
+}
+
+/** The two-level locality menu (Local ↔ Remote, then a machine sub-picker). A
+ *  worker that holds no code (not shared-fs, sync off) is offered disabled — sync
+ *  always stays with the primary; the worker only runs scripts. Rendered in a
+ *  portal with a click-away backdrop. */
+export function LocalityMenu({
+  menu,
+  current,
+  primaryHost,
+  computeHosts,
+  onClose,
+  onChangeView,
+  onChoose,
+}: {
+  menu: LocalityMenuState;
+  /** The location currently selected (dotted in the menu). A tab's
+   *  `effectiveTabLocation`, or a file viewer's run-host preference. */
+  current: TabLocation;
+  primaryHost?: string;
+  computeHosts?: LocalityHost[];
+  onClose: () => void;
+  onChangeView: (view: "root" | "machines") => void;
+  onChoose: (key: string, loc: TabLocation) => void;
+}) {
+  const cur = current;
+  const onRemoteNow = remoteHostIdOf(cur) !== null;
+  const choose = (loc: TabLocation) => {
+    onChoose(menu.key, loc);
+    onClose();
+  };
+  const machineItem = (
+    loc: TabLocation,
+    glyph: string,
+    text: string,
+    opts?: { disabled?: boolean; note?: string; title?: string },
+  ) => (
+    <button
+      key={loc}
+      className="tab-new-menu-item"
+      title={opts?.title}
+      disabled={opts?.disabled}
+      onClick={() => !opts?.disabled && choose(loc)}
+    >
+      <span className="tab-new-menu-dot" style={{ color: "var(--accent)" }}>
+        {cur === loc ? "●" : glyph}
+      </span>
+      {text}
+      {opts?.note && <span className="tab-menu-hint">{opts.note}</span>}
+    </button>
+  );
+  return createPortal(
+    <>
+      <div
+        style={{ position: "fixed", inset: 0, zIndex: 40 }}
+        onPointerDown={onClose}
+      />
+      <div
+        className="tab-new-menu"
+        style={{ position: "fixed", left: menu.x, top: menu.y, zIndex: 41 }}
+      >
+        {menu.view === "root" ? (
+          <>
+            {machineItem("local", "⌂", "Local (mirror)")}
+            <button
+              className="tab-new-menu-item"
+              onClick={() => onChangeView("machines")}
+            >
+              <span className="tab-new-menu-dot" style={{ color: "var(--accent)" }}>
+                {onRemoteNow ? "●" : "☁"}
+              </span>
+              Remote…
+              <span className="tab-menu-hint">choose machine ›</span>
+            </button>
+          </>
+        ) : (
+          <>
+            <button
+              className="tab-new-menu-item tab-menu-back"
+              onClick={() => onChangeView("root")}
+            >
+              <span className="tab-new-menu-dot">‹</span>
+              Run on machine
+              <UntestedTag />
+            </button>
+            {machineItem(
+              "remote",
+              "☁",
+              primaryHost ? `Primary (${primaryHost})` : "Primary",
+            )}
+            {(computeHosts ?? []).map((h) =>
+              machineItem(
+                `host:${h.id}`,
+                "☁",
+                h.label || h.host || h.id,
+                workerRunnable(h)
+                  ? undefined
+                  : {
+                      disabled: true,
+                      note: "sync off",
+                      title:
+                        "This machine holds no code — enable “Auto-sync code” or shared filesystem in Remote machines… to run scripts here. Sync stays with the primary.",
+                    },
+              ),
+            )}
+          </>
+        )}
+      </div>
+    </>,
+    document.body,
+  );
+}
+
+/**
+ * The file viewer's "run on machine" picker — a labelled control (beside the
+ * Remote/Local *source* switch) that chooses WHICH machine a Run/Debug or shell
+ * launched from this project runs on, distinct from which side its files are
+ * *read* from. Writes the per-project run-host preference (`useRunHostPrefStore`)
+ * that `lib/pythonRun` reads at launch. Reuses the same two-level `LocalityMenu`
+ * as the tab badge, so the machine list + worker eligibility stay identical.
+ * Shown only for remote projects (a local project has no machine axis).
+ */
+export function RunHostPicker({
+  projectId,
+  primaryHost,
+  computeHosts,
+}: {
+  projectId: string;
+  primaryHost?: string;
+  computeHosts?: LocalityHost[];
+}) {
+  const pref = useRunHostPrefStore((s) => s.byProject[projectId]);
+  const setPref = useRunHostPrefStore((s) => s.set);
+  const [menu, setMenu] = useState<LocalityMenuState | null>(null);
+  // Unset ⇒ the shell default (the primary host) — the same default pythonRun
+  // falls back to, so the label never lies about where a run would land.
+  const current: TabLocation = pref ?? "remote";
+  const label = localityHostLabel(current, { primaryHost, computeHosts });
+  const onRemote = remoteHostIdOf(current) !== null;
+  return (
+    <>
+      <button
+        type="button"
+        className="right-panel-run-host"
+        // The label ellipsizes in a narrow (docked subwindow) row, so the full
+        // machine name has to survive somewhere — the tooltip names it.
+        title={`Runs on: ${label}\nWhere Run/Debug and shells launched from this project run — the machine, not which side files are read from.`}
+        onClick={(e) => {
+          const r = (e.currentTarget as HTMLElement).getBoundingClientRect();
+          setMenu({
+            key: projectId,
+            x: r.left,
+            y: r.bottom + 2,
+            view: onRemote ? "machines" : "root",
+          });
+        }}
+      >
+        <span aria-hidden="true">{onRemote ? "☁" : "⌂"}</span>
+        <span className="run-host-label">Run: {label}</span>
+      </button>
+      {menu && (
+        <LocalityMenu
+          menu={menu}
+          current={current}
+          primaryHost={primaryHost}
+          computeHosts={computeHosts}
+          onClose={() => setMenu(null)}
+          onChangeView={(view) => setMenu((m) => (m ? { ...m, view } : m))}
+          onChoose={(_key, loc) => setPref(projectId, loc)}
+        />
+      )}
+    </>
+  );
+}
diff --git a/src/components/tabs/TabPane.tsx b/src/components/tabs/TabPane.tsx
new file mode 100644
index 0000000..72ea1c0
--- /dev/null
+++ b/src/components/tabs/TabPane.tsx
@@ -0,0 +1,183 @@
+import { memo } from "react";
+import { TerminalView } from "../terminal/TerminalView";
+import { FileBrowser } from "../files/FileBrowser";
+import { ProjectFilesTab } from "../files/ProjectFilesTab";
+import { EmbedPane } from "../embed/EmbedPane";
+import { FileViewerPane } from "../embed/FileViewerPane";
+import { ProjectBlobPane } from "../common/ProjectBlobPane";
+import { NetworkTrafficPane } from "../monitoring/NetworkTrafficPane";
+import { SystemMonitorPane } from "../monitoring/SystemMonitorPane";
+import { DiskUsagePane } from "../monitoring/DiskUsagePane";
+import { CalendarPane } from "../calendar/CalendarPane";
+import { RemotePaneHold } from "../projects/RemotePaneHold";
+import { effectiveTabLocation, remoteHostIdOf, type TabEntry } from "../../stores/tabs";
+
+/**
+ * The single per-tab `kind → pane` render switch, shared by the main window
+ * (`CenterPanel`) and every detached popout (`DetachedCenterPanel`). Both windows
+ * are separate React roots in separate JS heaps, so this used to be TWO
+ * hand-maintained switches that silently drifted — a new pane kind or prop added
+ * to one was routinely forgotten in the other (that is the whole class of "works
+ * in the main window, dead in a popout" bugs). Keeping it here means a new pane
+ * kind or prop lands in both windows at once.
+ *
+ * Everything that GENUINELY differs between the two windows is lifted into a
+ * prop the HOST computes, because a popout is inert to the `projects`/`tabs`
+ * stores and can't derive it:
+ *  - `attachOnly` — a popout's terminals attach to the main window's PTY, never
+ *    spawn (so all the terminal spawn inputs below are cosmetic there).
+ *  - `ownsTabs` — only the main window owns the tab store, so only it may let a
+ *    pane retitle its tab (`tabKey`) or open new tabs (`canOpenTabs`). A popout
+ *    runs on a streamed COPY with no write channel back, so it passes neither.
+ *  - `filesProjectDir` / `terminalCwd` / `sandbox` / `holdRemoteTerminal` /
+ *    `onConnect` — all resolved from the projects store, which the popout lacks.
+ *
+ * Values that are computed IDENTICALLY from the tab alone in both windows
+ * (`projectId` from the scope, `localOnly`, `zoomable`) are derived here rather
+ * than threaded as props.
+ */
+export interface TabPaneProps {
+  tab: TabEntry;
+  /** The owning scope key ("root" or a project id). Also names the PTY id. */
+  scope: string;
+  /** Laid out on screen (its group's active tab, and not hidden by fullscreen). */
+  visible: boolean;
+  /** The group this pane sits in (viewer scroll-sync). Undefined in a popout. */
+  groupId?: string;
+  /** Popout: attach to the main window's PTY instead of spawning one. */
+  attachOnly?: boolean;
+  /** Main window only: the host owns the tab store (retitle / open-tabs). */
+  ownsTabs?: boolean;
+  /** Open the connect dialog (network pane + a held remote terminal). */
+  onConnect?: () => void;
+  /** A remote terminal whose SSH pool is down — hold rather than spawn. */
+  holdRemoteTerminal?: boolean;
+  /** The held terminal's host label (only read when `holdRemoteTerminal`). */
+  remoteHost?: string;
+  /** The Files-tab browse dir (mirror-swapped while a remote is disconnected). */
+  filesProjectDir: string;
+  /** The terminal's cwd (the mirror path for a local-on-remote tab). */
+  terminalCwd: string;
+  /** Run this (agent/shell) tab inside the project's session container. */
+  sandbox?: boolean;
+  /** The stable tmux session name to spawn-or-attach this remote shell/script tab
+   *  into (TODO #85), or undefined when the tab doesn't run persistently. */
+  tmuxSession?: string;
+}
+
+function TabPaneImpl({
+  tab,
+  scope,
+  visible,
+  groupId,
+  attachOnly = false,
+  ownsTabs = false,
+  onConnect,
+  holdRemoteTerminal = false,
+  remoteHost = "",
+  filesProjectDir,
+  terminalCwd,
+  sandbox = false,
+  tmuxSession,
+}: TabPaneProps) {
+  // Identical in both windows: null for the root scope, else the scope id.
+  const projectId = scope === "root" ? null : scope;
+  const zoomable = tab.kind === "agent" || tab.kind === "local_agent";
+
+  switch (tab.kind) {
+    case "projects3d":
+      return <ProjectBlobPane />;
+    case "calendar":
+      return <CalendarPane visible={visible} />;
+    case "network":
+      return <NetworkTrafficPane projectId={scope} visible={visible} onConnect={onConnect} />;
+    case "monitor":
+      return <SystemMonitorPane projectId={projectId} visible={visible} />;
+    case "diskusage":
+      return (
+        <DiskUsagePane
+          projectId={projectId}
+          projectCwd={tab.cwd}
+          // A popout can't retitle its tab (no write channel back), so it gets no
+          // tabKey — its Disk Usage tab keeps the label it was given.
+          {...(ownsTabs ? { tabKey: tab.key } : {})}
+          visible={visible}
+        />
+      );
+    case "files":
+      return <FileBrowser projectDir={filesProjectDir} projectId={projectId} active={visible} />;
+    case "projectfiles":
+      return (
+        <ProjectFilesTab
+          scope={scope}
+          cwd={tab.cwd}
+          // Same as Disk Usage above: no write channel back from a popout, so no
+          // tabKey (browsed folder stays the popout's) and no open-in-new-tab.
+          {...(ownsTabs ? { tabKey: tab.key, canOpenTabs: true } : {})}
+          folder={tab.folder}
+          visible={visible}
+        />
+      );
+    case "embed":
+      return tab.viewer ? (
+        <FileViewerPane
+          viewer={tab.viewer}
+          path={tab.embedPath ?? ""}
+          projectId={projectId}
+          tabKey={tab.key}
+          visible={visible}
+          groupId={groupId}
+        />
+      ) : (
+        <EmbedPane
+          path={tab.embedPath ?? ""}
+          exec={tab.embedExec}
+          projectId={projectId}
+          visible={visible}
+        />
+      );
+    default:
+      // Remote terminal pane while the pool is down (main window only): show a
+      // Connect placeholder rather than mount TerminalView, which would spawn
+      // `ssh -tt` and block on the dead pool.
+      if (holdRemoteTerminal) {
+        return <RemotePaneHold host={remoteHost} onConnect={onConnect ?? (() => {})} />;
+      }
+      return (
+        <TerminalView
+          // PTY ids include the scope: tab keys alone collide across projects.
+          id={`${scope}:${tab.key}`}
+          cmd={tab.cmd}
+          args={tab.args ?? []}
+          env={tab.env ?? {}}
+          // A popout is attach-only and never spawns, and its `terminal-ready`
+          // never fires, so it takes no initialInput (matches its old behavior).
+          initialInput={attachOnly ? undefined : tab.initialInput}
+          cwd={terminalCwd}
+          localOnly={effectiveTabLocation(tab) === "local"}
+          projectId={projectId}
+          // Multi-host: the worker id (or "primary") this tab runs on, so the
+          // backend resolves the right host's RemoteSpec (null for a local tab).
+          remoteHostId={remoteHostIdOf(effectiveTabLocation(tab))}
+          sandbox={sandbox}
+          // Persistent remote session (TODO #85). An explicit attach (opened from
+          // the Sessions view) wins over the tab's own persistent session.
+          tmuxSession={tmuxSession ?? null}
+          tmuxAttach={tab.tmuxAttach ?? null}
+          zoomable={zoomable}
+          visible={visible}
+          focused={visible}
+          attachOnly={attachOnly}
+        />
+      );
+  }
+}
+
+/**
+ * Memoized so a `CenterPanel` re-render (e.g. a pane-rect update every frame of a
+ * divider drag) skips every pane whose props are unchanged, instead of
+ * reconciling every terminal/viewer across every scope. Relies on all props being
+ * referentially stable across such re-renders — notably `onConnect`, which the
+ * host passes as a per-scope stable callback (never an inline arrow).
+ */
+export const TabPane = memo(TabPaneImpl);
diff --git a/src/components/tabs/agentModes.ts b/src/components/tabs/agentModes.ts
index 52fca22..2a359cf 100644
--- a/src/components/tabs/agentModes.ts
+++ b/src/components/tabs/agentModes.ts
@@ -15,9 +15,17 @@
  *     `--session-id <uuid>` → `--resume <live-id>` once a session log exists, so
  *     a Claude tab killed and respawned comes back on the same conversation.
  *
- * Claude qualifies. Deliberately absent:
- *   - Gemini — has `--approval-mode`, but no wired resume (see RESUMABLE_AGENTS,
- *     TODO 39d). A toggle would silently destroy the conversation.
+ * Claude and Gemini qualify:
+ *   - Claude — `--permission-mode` (absolute) + resume-by-id.
+ *   - Gemini — `--approval-mode` (default/auto_edit/yolo/plan — absolute) +
+ *     resume (see RESUMABLE_AGENTS). Its resume is *continue-last*, not
+ *     resume-by-id, which carries one accepted caveat: a respawn brings back the
+ *     project's most-recent Gemini session, so with two Gemini tabs in one
+ *     project a mid-session mode toggle can reattach to the sibling's
+ *     conversation — the very same ambiguity their ordinary restore already has,
+ *     not a new failure the toggle introduces.
+ *
+ * Deliberately absent:
  *   - Codex — resumes fine, but has no plan mode: only a read-only sandbox that
  *     approximates one, and it is unverified whether `--sandbox`/`--full-auto`
  *     are accepted on `codex resume`.
@@ -28,19 +36,23 @@ export type AgentMode = "plan" | "auto";
 /**
  * `cmd` → the launch args that put the agent in a mode.
  *
- * "auto" is `acceptEdits`, NOT `bypassPermissions`: it is the mode Claude's own
- * shift+tab reaches ("⏵⏵ auto-accept edits on"), where file edits apply without
- * asking but bash/network still prompt. Mapping "auto" to bypassPermissions
- * would hide a strictly more dangerous authority level behind a familiar word.
+ * "auto" is edits-only auto-approval, NOT full auto-approve: for Claude that is
+ * `acceptEdits` (the mode its own shift+tab reaches — "⏵⏵ auto-accept edits on",
+ * where file edits apply without asking but bash/network still prompt); for
+ * Gemini it is `auto_edit` (auto-approve edit tools), NOT `yolo` (auto-approve
+ * ALL tools). Mapping "auto" to the bypass-everything level would hide a strictly
+ * more dangerous authority behind a familiar word.
  */
 export const AGENT_MODE_ARGS: Record<string, (mode: AgentMode) => string[]> = {
   claude: (mode) => ["--permission-mode", mode === "plan" ? "plan" : "acceptEdits"],
+  gemini: (mode) => ["--approval-mode", mode === "plan" ? "plan" : "auto_edit"],
 };
 
 /** The flags whose `<flag> <value>` pair a mode owns, per agent. Stripped before
  *  a new mode is applied so repeated toggling can never stack them. */
 const MODE_FLAGS: Record<string, string[]> = {
   claude: ["--permission-mode"],
+  gemini: ["--approval-mode"],
 };
 
 /** Whether this agent can be mode-switched at all (see the note above). */
diff --git a/src/components/tabs/commitFileDrop.ts b/src/components/tabs/commitFileDrop.ts
index 66b62e2..3a69a2a 100644
--- a/src/components/tabs/commitFileDrop.ts
+++ b/src/components/tabs/commitFileDrop.ts
@@ -5,11 +5,56 @@ import {
   useTabsStore,
   type DetachedDockTarget,
   type DropEdge,
+  type TabEntry,
   type WindowBounds,
 } from "../../stores/tabs";
 import { useWindowsStore } from "../../stores/windows";
 import { reseedDetached } from "./detachedDropTargets";
 
+/**
+ * The embed-tab payload a dropped file becomes. Shared by every file-drop path —
+ * the main window's `commitFileDrop`, the detached window's own drop (see
+ * DetachedCenterPanel) — so the tab a file turns into is identical wherever it
+ * lands. `f` is a multi-drag member (its own viewer, no capability probe) or
+ * `null` for the single primary file (which keeps its cap-resolved `embedExec`).
+ */
+export function fileEmbedPayload(
+  d: TabDrag,
+  f: FileDragItem | null,
+  projectCwd: string,
+): Omit<TabEntry, "key"> {
+  if (f) {
+    return {
+      label: f.name,
+      cmd: "",
+      cwd: projectCwd,
+      kind: "embed",
+      embedPath: f.path,
+      viewer: f.viewer,
+    };
+  }
+  const cap = d.embedCap;
+  return {
+    label: d.fileName ?? "",
+    cmd: "",
+    cwd: projectCwd,
+    kind: "embed",
+    embedPath: d.filePath ?? "",
+    // A built-in viewer (pdf/markdown/text) renders the file in-app and takes
+    // precedence over the external handler — so don't carry embedExec then.
+    embedExec: d.viewer ? undefined : (cap?.resolved_exec ?? d.fileExec),
+    viewer: d.viewer,
+  };
+}
+
+/** The ordered embed-tab payloads a file drag commits to — one per file (a
+ *  multi-selection), else the single primary. */
+export function fileDropPayloads(d: TabDrag, projectCwd: string): Array<Omit<TabEntry, "key">> {
+  const multi = d.files && d.files.length > 1 ? d.files : null;
+  const items: (FileDragItem | null)[] = multi ?? [null];
+  return items.map((f) => fileEmbedPayload(d, f, projectCwd));
+}
+
 /**
  * Should a released file drag open its OWN standalone window rather than land
  * in-window? True only when the user explicitly asked (Shift) or the release is
@@ -89,39 +134,15 @@ export function commitFileDrop(
   const overTabBar = d.reorderGroup != null && d.reorderIndex != null;
   const overSplit = d.overGroup != null && d.edge != null;
 
-  // Shared embed-tab payload for both the tab-bar and the new-subwindow paths.
-  const tabPayload = {
-    label: d.fileName,
-    cmd: "",
-    cwd: projectCwd,
-    kind: "embed" as const,
-    embedPath: d.filePath,
-    // A built-in viewer (pdf/markdown/text) renders the file in-app and takes
-    // precedence over the external handler — so don't carry embedExec then.
-    embedExec: d.viewer ? undefined : (cap?.resolved_exec ?? d.fileExec),
-    viewer: d.viewer,
-  };
-
   // Multi-file drag (a selection dragged from the FileTree): replay each drop
   // branch once per file. `items` is that list; a `null` sentinel means "the
-  // single primary file", which keeps the original single-file path on
-  // `tabPayload` (with its cap-resolved embedExec) byte-for-byte unchanged. A
-  // multi-file member has no per-file capability probe, so its tab carries no
-  // embedExec — EmbedPane opens a non-viewer file externally, matching the
-  // single-file fallback.
+  // single primary file", which keeps the original single-file path (with its
+  // cap-resolved embedExec) byte-for-byte unchanged. A multi-file member has no
+  // per-file capability probe, so its tab carries no embedExec — EmbedPane opens
+  // a non-viewer file externally, matching the single-file fallback.
   const multi = d.files && d.files.length > 1 ? d.files : null;
   const items: (FileDragItem | null)[] = multi ?? [null];
-  const payloadFor = (f: FileDragItem | null) =>
-    f
-      ? {
-          label: f.name,
-          cmd: "",
-          cwd: projectCwd,
-          kind: "embed" as const,
-          embedPath: f.path,
-          viewer: f.viewer,
-        }
-      : tabPayload;
+  const payloadFor = (f: FileDragItem | null) => fileEmbedPayload(d, f, projectCwd);
 
   // Released over an open popout → dock the file as a new embed tab INTO it. We
   // create the tab in this scope, then move it into the popout's subtree (the
diff --git a/src/components/tabs/detachedDropTargets.ts b/src/components/tabs/detachedDropTargets.ts
index 7276059..cc56b63 100644
--- a/src/components/tabs/detachedDropTargets.ts
+++ b/src/components/tabs/detachedDropTargets.ts
@@ -191,6 +191,7 @@ export function reseedDetached(scope: string, groupId: string, landedKey?: strin
     groupId,
     useTabsStore.getState().tabsByScope[scope] ?? [],
     entry.subtree,
+    entry.zoom,
   );
   void emit(detachedSeedEvent(entry.label), landedKey ? { ...seed, landedKey } : seed);
 }
diff --git a/src/components/tabs/newTabItems.ts b/src/components/tabs/newTabItems.ts
index a799808..cb638bf 100644
--- a/src/components/tabs/newTabItems.ts
+++ b/src/components/tabs/newTabItems.ts
@@ -1,4 +1,12 @@
-import { FILES_TAB_CMD, RESUMABLE_AGENTS, TabEntry, TabKind } from "../../stores/tabs";
+import {
+  FILES_TAB_CMD,
+  PROJECT_FILES_TAB_CMD,
+  RESUMABLE_AGENTS,
+  TabEntry,
+  TabKind,
+} from "../../stores/tabs";
+import type { CustomAgent } from "../../types";
+import type { AddMenuEntry } from "./AddTabMenuList";
 
 /**
  * A static entry in the "new tab" add menu. Shared by the main-window `TabBar`
@@ -8,7 +16,14 @@ export interface StaticMenuItem {
   label: string;
   cmd: string;
   kind: TabKind;
+  // Launch args, prepended before any session/resume args. Only custom agents
+  // set this today; the built-in AGENT_ITEMS take no leading args.
+  args?: string[];
   env?: Record<string, string>;
+  // For a custom agent whose spec supplied a "continue last session" flag: the
+  // args that make the tab restart-resumable (cwd-continue tier). Threaded onto
+  // the tab as `resumeArgs`; see buildStaticTabSpec / isResumableAgentTab.
+  resumeArgs?: string[];
   // Optional template for a command typed into the agent on launch to name its
   // own session after the project. Only set for agents with a known
   // session-rename command; others are skipped to avoid typing junk into them.
@@ -45,14 +60,22 @@ export const SHELL_ITEMS: StaticMenuItem[] = [
   // fails to spawn on Windows where bash isn't on PATH.
   { label: "Shell", cmd: "",              kind: "shell" },
   { label: "Files", cmd: FILES_TAB_CMD,   kind: "files" },
+  { label: "Files (Project)", cmd: PROJECT_FILES_TAB_CMD, kind: "projectfiles" },
 ];
 
+/** The pure-frontend file panes, offered together under the add menu's "Files"
+ *  group and each kept to one tab per cwd (see TabBar.handleAdd). */
+export function isFileTabKind(kind: TabKind): boolean {
+  return kind === "files" || kind === "projectfiles";
+}
+
 // Re-exported so both menus reference the same dot-accent palette.
 export const TAB_ACCENT: Record<TabKind, string> = {
   agent: "var(--accent)",
   local_agent: "var(--warning)",
   shell: "var(--success)",
   files: "var(--text-muted)",
+  projectfiles: "var(--text-muted)",
   embed: "var(--info, #4aa3df)",
   projects3d: "var(--accent-secondary)",
   network: "var(--info, #4aa3df)",
@@ -76,12 +99,19 @@ export function buildStaticTabSpec(
 ): Omit<TabEntry, "key"> {
   const initialInput =
     item.sessionRename && projectName ? item.sessionRename(projectName) : undefined;
-  const tracked = item.cmd in RESUMABLE_AGENTS;
-  const sessionId = tracked || item.sessionIdArgs ? crypto.randomUUID() : undefined;
-  const args = sessionId && item.sessionIdArgs ? item.sessionIdArgs(sessionId) : [];
+  // "Resumable" now spans a built-in in the static table AND a custom agent that
+  // brought its own resume flag — both mint a session UUID so they satisfy the
+  // tab-persistence gate (isResumableAgentTab requires a sessionId).
+  const resumable = item.cmd in RESUMABLE_AGENTS || !!item.resumeArgs?.length;
+  const sessionId =
+    resumable || item.sessionIdArgs ? crypto.randomUUID() : undefined;
+  const args = [
+    ...(item.args ?? []),
+    ...(sessionId && item.sessionIdArgs ? item.sessionIdArgs(sessionId) : []),
+  ];
   const env = {
     ...(item.env ?? {}),
-    ...(tracked && sessionId ? { ELDRUN_TAB_UID: sessionId } : {}),
+    ...(resumable && sessionId ? { ELDRUN_TAB_UID: sessionId } : {}),
   };
   return {
     label: item.label,
@@ -92,5 +122,75 @@ export function buildStaticTabSpec(
     kind: item.kind,
     initialInput,
     sessionId,
+    ...(item.resumeArgs?.length ? { resumeArgs: item.resumeArgs } : {}),
+  };
+}
+
+/** Stable empty custom-agent array, so a settings selector's `?? …` fallback
+ *  keeps a constant reference (a fresh `[]` each render would loop the probe
+ *  effect that depends on it). */
+export const EMPTY_CUSTOM_AGENTS: CustomAgent[] = [];
+
+/** Adapt a persisted {@link CustomAgent} into a menu item so it launches through
+ *  the same `buildStaticTabSpec` path as the built-in agents. */
+export function customAgentToItem(ca: CustomAgent): StaticMenuItem {
+  return {
+    label: ca.label,
+    cmd: ca.cmd,
+    kind: "agent",
+    args: ca.args,
+    env: ca.env,
+    resumeArgs: ca.resumeArgs,
   };
 }
+
+/**
+ * Build the "Agents" group's rows for the add-tab menu, shared by the main-window
+ * `TabBar` and the popout's `NewTabMenu` so both list agents identically:
+ *   1. built-in agents whose binary is installed (`installedBuiltins`),
+ *   2. every custom agent — greyed with a "(not found)" suffix when its command
+ *      is known-missing (`installedCmds` resolved and lacking it), since the user
+ *      added it deliberately and silently dropping it would be baffling,
+ *   3. the "＋ Add agent…" row that opens the manage-agents dialog.
+ *
+ * `installedBuiltins`/`installedCmds` are `null` until their probes resolve, so
+ * built-ins render nothing (no flash of all agents) while custom agents — which
+ * the user typed themselves — render enabled until a probe proves one missing.
+ */
+export function agentMenuEntries(opts: {
+  installedBuiltins: Set<string> | null;
+  installedCmds: Set<string> | null;
+  customAgents: CustomAgent[];
+  pick: (item: StaticMenuItem) => void;
+  onAddCustom: () => void;
+}): AddMenuEntry[] {
+  const builtins = AGENT_ITEMS.filter((item) =>
+    opts.installedBuiltins?.has(item.cmd),
+  ).map((item) => ({
+    key: item.cmd,
+    label: item.label,
+    color: TAB_ACCENT[item.kind],
+    onPick: () => opts.pick(item),
+  }));
+  const custom = opts.customAgents.map((ca) => {
+    const missing = opts.installedCmds != null && !opts.installedCmds.has(ca.cmd);
+    return {
+      key: `custom:${ca.id}`,
+      label: missing ? `${ca.label} (not found)` : ca.label,
+      color: TAB_ACCENT.agent,
+      disabled: missing,
+      onPick: () => opts.pick(customAgentToItem(ca)),
+    };
+  });
+  return [
+    ...builtins,
+    ...custom,
+    {
+      key: "__add_custom_agent__",
+      label: "Add agent…",
+      dot: "＋",
+      color: "var(--text-muted)",
+      onPick: opts.onAddCustom,
+    },
+  ];
+}
diff --git a/src/components/terminal/TerminalView.tsx b/src/components/terminal/TerminalView.tsx
index 128b63a..a6cd758 100644
--- a/src/components/terminal/TerminalView.tsx
+++ b/src/components/terminal/TerminalView.tsx
@@ -3,7 +3,6 @@ import { Terminal } from "@xterm/xterm";
 import { FitAddon } from "@xterm/addon-fit";
 import { WebLinksAddon } from "@xterm/addon-web-links";
 import { invoke } from "@tauri-apps/api/core";
-import { listen, Event } from "@tauri-apps/api/event";
 import { useSettingsStore } from "../../stores/settings";
 import { cmdToKind, isDetachedPtyId, type TabKind } from "../../stores/tabs";
 import { notePtySpawn, noteUserInput, splitPtyId, useActivityStore } from "../../stores/activity";
@@ -11,6 +10,8 @@ import { useAgentTaskStore } from "../../stores/agentTask";
 import { noteInput } from "../../lib/promptCount";
 import { METRIC, agentPromptLeaf, sub } from "../../lib/usageMetrics";
 import { ROOT_SCOPE, bumpUsage, markAgentActive } from "../../stores/usage";
+import { onTerminalExit, onTerminalOutput, onTerminalReady } from "../../lib/terminalBus";
+import { claimInitialInput, initialInputForPty, isTerminalIdentityResponse } from "../../lib/terminalControl";
 import "@xterm/xterm/css/xterm.css";
 
 // Hoisted to module scope: keystroke input fires this on every key, so we reuse
@@ -19,16 +20,6 @@ import "@xterm/xterm/css/xterm.css";
 // arrays to a `Vec<u8>` command directly), avoiding the per-key `Array.from`.
 const PTY_ENCODER = new TextEncoder();
 
-interface TerminalOutput {
-  id: string;
-  data: string;
-}
-
-interface TerminalExit {
-  id: string;
-  code: number | null;
-}
-
 interface Props {
   id: string;
   cmd: string;
@@ -47,6 +38,18 @@ interface Props {
   // detect remoteness explicitly (resolve the project's RemoteSpec) instead of
   // sniffing the cwd. Harmless for local projects — they resolve to no remote.
   projectId?: string | null;
+  // Which of the project's remote hosts this tab runs on (multi-host remote,
+  // `docs/multi_host_remote_plan.md`): "primary" / undefined for the primary
+  // remote, a worker id for a `host:<id>` locality. Forwarded to the backend so
+  // it resolves the right worker's RemoteSpec. Ignored for local projects/tabs.
+  remoteHostId?: string | null;
+  // Persistent remote sessions (TODO #85): the stable tmux session name to spawn-
+  // or-attach this remote spawn into, so the run survives an SSH drop / relaunch.
+  // Set only for remote shell/script tabs of a persist-enabled project. No-op locally.
+  tmuxSession?: string | null;
+  // Attach this tab to an existing named tmux session instead of spawning one
+  // (TODO #85 Sessions view). Takes precedence over `tmuxSession`. No-op locally.
+  tmuxAttach?: string | null;
   // Whether this pane is laid out on screen (single-mode active tab, or any
   // pane in grid mode). Drives display + xterm fit.
   visible: boolean;
@@ -187,7 +190,7 @@ function readAgentFontSize(): number {
   return DEFAULT_FONT_SIZE;
 }
 
-export function TerminalView({ id, cmd, args = [], env = {}, initialInput, cwd, localOnly = false, sandbox = false, projectId = null, visible, focused, attachOnly = false, zoomable = false, persistOnUnmount = false }: Props) {
+export function TerminalView({ id, cmd, args = [], env = {}, initialInput, cwd, localOnly = false, sandbox = false, projectId = null, remoteHostId = null, tmuxSession = null, tmuxAttach = null, visible, focused, attachOnly = false, zoomable = false, persistOnUnmount = false }: Props) {
   const colorScheme = useSettingsStore((s) => s.settings?.color_scheme);
   const containerRef = useRef<HTMLDivElement>(null);
   const termRef = useRef<Terminal | null>(null);
@@ -196,6 +199,7 @@ export function TerminalView({ id, cmd, args = [], env = {}, initialInput, cwd,
   const unlistenReady = useRef<(() => void) | null>(null);
   const unlistenExit = useRef<(() => void) | null>(null);
   const initialInputSent = useRef(false);
+  const initialInputPending = useRef(false);
   const initialEnterTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const openWatchTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const firstOutputAt = useRef<number | null>(null);
@@ -218,17 +222,21 @@ export function TerminalView({ id, cmd, args = [], env = {}, initialInput, cwd,
   useEffect(() => {
     if (!containerRef.current) return;
     let cancelled = false;
+    initialInputSent.current = false;
+    initialInputPending.current = !!initialInput;
 
     const term = new Terminal({
       scrollback: 5000,
       allowProposedApi: false,
       cursorBlink: true,
       fontSize: zoomable ? readAgentFontSize() : DEFAULT_FONT_SIZE,
-      // Consolas/Cascadia Mono are the guaranteed Windows monospace fonts; keep
-      // them ahead of the generic fallback so the terminal isn't a bitmap font on
-      // Windows when the preferred coding fonts aren't installed.
+      // 'JetBrains Mono Variable' is bundled (fontsource, imported in main.tsx)
+      // so it's always available; the rest of the stack is the fallback for a
+      // renderer that can't load it — Consolas/Cascadia Mono are the guaranteed
+      // Windows monospace fonts, kept ahead of the generic fallback so the
+      // terminal isn't a bitmap font there.
       fontFamily:
-        "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Cascadia Mono', Consolas, Menlo, monospace",
+        "'JetBrains Mono Variable', 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Cascadia Mono', Consolas, Menlo, monospace",
       theme: terminalTheme(colorScheme),
     });
 
@@ -296,6 +304,14 @@ export function TerminalView({ id, cmd, args = [], env = {}, initialInput, cwd,
     const localModel = env.ELDRUN_LOCAL_MODEL || env.VIBE_ACTIVE_MODEL;
     const kind: TabKind = localModel ? "local_agent" : cmdToKind(cmd);
     const agentLeaf = agentPromptLeaf({ kind, cmd, env });
+    // A shell tab can be RESUMED with no initialInput to type — a tmux reattach on
+    // reconnect/relaunch. tmux probes the outer terminal on attach (secondary DA,
+    // `ESC[>c`); xterm's reply arrives after tmux has handed the pane to the shell,
+    // so it lands in readline as `^[[>0;276;0c`. Open the same startup-suppression
+    // window (line 226 only opens it for an auto-run tab) for ANY shell tab, closed
+    // on the first real keystroke in onData below — so the reattach junk is eaten
+    // but a program the user later launches still gets its own identity replies.
+    if (kind === "shell") initialInputPending.current = true;
     const scope = splitPtyId(id)?.scope ?? ROOT_SCOPE;
 
     /** One thing asked: a prompt to an agent, or a command in a shell. */
@@ -317,6 +333,20 @@ export function TerminalView({ id, cmd, args = [], env = {}, initialInput, cwd,
     // so the usage recap's "you asked them N things" is counted here (see
     // lib/promptCount): Enter with content pending = one submit.
     term.onData((data) => {
+      if (initialInputPending.current && isTerminalIdentityResponse(data)) {
+        return; // swallow the startup / tmux-reattach identity reply (see above)
+      }
+      // A genuine user keystroke — a printable char or Enter, i.e. NOT an
+      // ESC-prefixed control — closes the identity-suppression window. Terminal
+      // auto-reports (cursor-position `\x1b[…R`, other DA replies) are ALSO delivered
+      // through onData and are ESC-prefixed; they must NOT lift the gate, or a late
+      // DA2 reply arriving on the tmux-attach probe burst right after one of them
+      // would leak to the shell prompt as `^[[>0;276;0c` (the resume bug). A program
+      // that needs DA detection is launched by keystrokes, which close the window
+      // first, so its own replies still flow through.
+      if (initialInputPending.current && data && !data.startsWith("\x1b")) {
+        initialInputPending.current = false;
+      }
       noteUserInput(id);
       if (noteInput(id, data) > 0) countSubmit();
       invoke("pty_write", { id, data: PTY_ENCODER.encode(data) }).catch(console.error);
@@ -336,6 +366,51 @@ export function TerminalView({ id, cmd, args = [], env = {}, initialInput, cwd,
       useActivityStore.getState().noteBell(id);
     });
 
+    // OSC 52 clipboard write: TUIs (Claude Code's own copy action among them)
+    // set the system clipboard by writing `ESC ] 52 ; c ; <base64> BEL/ST`
+    // rather than relying on a host-side mouse selection — the standard escape
+    // for "copy this over SSH/tmux where the program can't reach the clipboard
+    // itself". xterm parses OSC codes but performs no action on 52 without a
+    // handler, so the CLI reports success (it only confirms the write *reached
+    // the terminal*) while the OS clipboard silently keeps its old contents.
+    // `c` is the only target register Eldrun has one clipboard for; a `?`
+    // query (read-back) is intentionally left unhandled — implementing it would
+    // let any program read whatever the user last copied elsewhere.
+    const oscHandler = term.parser.registerOscHandler(52, (data) => {
+      const parts = data.split(";");
+      // Pc (parts[0]) names the target selection buffer(s) — "c" (clipboard),
+      // "" (spec default, also clipboard), or a combination like "cp"/"cs"
+      // that includes clipboard alongside primary/select. Anything without
+      // "c" (e.g. a primary-selection-only "p") isn't Eldrun's one clipboard.
+      if (parts.length < 2 || (parts[0] !== "" && !parts[0].includes("c")) || parts[1] === "?") return true;
+      try {
+        const binary = atob(parts[1]);
+        const bytes = new Uint8Array(binary.length);
+        for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+        const text = new TextDecoder("utf-8").decode(bytes);
+        navigator.clipboard?.writeText(text).catch(() => {});
+      } catch {
+        /* malformed OSC 52 payload — ignore rather than surface a write error */
+      }
+      return true;
+    });
+
+    // Copy-on-select: a mouse-made selection (drag, double/triple-click) copies
+    // itself to the clipboard with no chord needed, matching most native
+    // terminals. Debounced so a drag firing onSelectionChange on every cell it
+    // crosses doesn't issue a clipboard write per event — only once ~60ms after
+    // the selection settles. Ctrl+Shift+C below stays as the explicit fallback
+    // (e.g. a selection made without the mouse never fires this).
+    let selectionCopyTimer: ReturnType<typeof setTimeout> | null = null;
+    term.onSelectionChange(() => {
+      const sel = term.getSelection();
+      if (!sel) return;
+      if (selectionCopyTimer) clearTimeout(selectionCopyTimer);
+      selectionCopyTimer = setTimeout(() => {
+        navigator.clipboard?.writeText(sel).catch(() => {});
+      }, 60);
+    });
+
     // Agent CLIs set the terminal title (OSC 0/2) to a short summary of what
     // they're doing — the same signal a native terminal shows in its tab. Capture
     // it per tab so the tab hover card can surface it as the agent task summary.
@@ -374,12 +449,15 @@ export function TerminalView({ id, cmd, args = [], env = {}, initialInput, cwd,
     term.attachCustomKeyEventHandler((e) => {
       if (e.type !== "keydown") return true;
       // Ctrl +/-/0 zoom (agent panes only). preventDefault stops WebKit's own
-      // page-zoom; returning false stops xterm forwarding the chord to the PTY.
+      // page-zoom; returning false stops xterm forwarding the chord to the PTY;
+      // stopPropagation stops the WINDOW-level per-window zoom handler (useKeyboard
+      // / DetachedApp) from ALSO webview-zooming — an agent pane zooms its FONT, not
+      // the whole window.
       if (zoomable && (e.ctrlKey || e.metaKey) && !e.shiftKey && !e.altKey) {
         const cur = term.options.fontSize ?? DEFAULT_FONT_SIZE;
-        if (e.code === "Equal") { e.preventDefault(); applyFontSize(cur + 1, true); return false; }
-        if (e.code === "Minus") { e.preventDefault(); applyFontSize(cur - 1, true); return false; }
-        if (e.code === "Digit0") { e.preventDefault(); applyFontSize(DEFAULT_FONT_SIZE, true); return false; }
+        if (e.code === "Equal") { e.preventDefault(); e.stopPropagation(); applyFontSize(cur + 1, true); return false; }
+        if (e.code === "Minus") { e.preventDefault(); e.stopPropagation(); applyFontSize(cur - 1, true); return false; }
+        if (e.code === "Digit0") { e.preventDefault(); e.stopPropagation(); applyFontSize(DEFAULT_FONT_SIZE, true); return false; }
       }
       if (!e.ctrlKey || !e.shiftKey) return true;
       if (e.code === "KeyC") {
@@ -402,80 +480,74 @@ export function TerminalView({ id, cmd, args = [], env = {}, initialInput, cwd,
       return true;
     });
 
-    const setupAndSpawn = async () => {
-      const outputListener = await listen<TerminalOutput>(
-        "terminal-output",
-        (ev: Event<TerminalOutput>) => {
-          if (ev.payload.id === id) {
-            // Record when the spawned program first produces output — used to
-            // tell when an agent TUI has actually started so we don't type the
-            // initialInput before it can accept keystrokes (see below).
-            if (firstOutputAt.current === null) firstOutputAt.current = Date.now();
-            writeTerm(ev.payload.data);
-          }
-        },
-      );
+    // Subscribed by id through the shared bus (lib/terminalBus) rather than each
+    // pane calling `listen()` itself — the backend emits these window-wide, not
+    // scoped per PTY, so one `listen()` per mounted terminal meant every output
+    // chunk from every running PTY was dispatched to and filtered by every
+    // mounted terminal (CenterPanel keeps ALL tabs, ALL scopes, mounted forever).
+    // The bus does that dispatch once, in O(1) per id, no matter how many panes
+    // are mounted. Subscribing is synchronous, so these are wired up before
+    // `setupAndSpawn` below ever awaits `pty_spawn` — no output can arrive first.
+    unlistenOutput.current = onTerminalOutput(id, (data) => {
+      // Record when the spawned program first produces output — used to tell
+      // when an agent TUI has actually started so we don't type the
+      // initialInput before it can accept keystrokes (see below).
+      if (firstOutputAt.current === null) firstOutputAt.current = Date.now();
+      writeTerm(data);
+    });
 
-      const readyListener = await listen("terminal-ready", (ev: Event<{ id: string }>) => {
-        if (ev.payload.id === id) {
-          writeTerm("\r\n");
-          if (initialInput && !initialInputSent.current) {
-            initialInputSent.current = true;
-            // `terminal-ready` fires as soon as the PTY is spawned, but an agent
-            // TUI (Claude, etc.) needs a beat to boot before it reads stdin.
-            // Typing the command immediately means the keystrokes/Enter land
-            // before the input box is live, so the text appears but never
-            // submits. Wait until the program has produced output for a short
-            // cushion (boot done) — capped by a hard timeout — then type the
-            // text and submit it with a single Enter (CR) a beat later, as a
-            // separate write so a trailing newline isn't swallowed by the TUI's
-            // bracketed-paste/buffered input handling.
-            const READY_CUSHION_MS = 1200;
-            const MAX_WAIT_MS = 5000;
-            const scheduledAt = Date.now();
-            const typeWhenReady = () => {
-              if (cancelled) return;
-              const elapsed = Date.now() - scheduledAt;
-              const firstOut = firstOutputAt.current;
-              const ready =
-                firstOut !== null && Date.now() - firstOut >= READY_CUSHION_MS;
-              if (!ready && elapsed < MAX_WAIT_MS) {
-                initialEnterTimer.current = setTimeout(typeWhenReady, 100);
-                return;
-              }
-              // Typed on the user's behalf — they triggered the flow that
-              // opened this tab with a command, so its work counts as asked-for.
-              noteUserInput(id);
-              invoke("pty_write", { id, data: PTY_ENCODER.encode(initialInput) }).catch(console.error);
-              initialEnterTimer.current = setTimeout(() => {
-                invoke("pty_write", { id, data: new Uint8Array([0x0d]) }).catch(console.error);
-              }, 200);
-            };
-            typeWhenReady();
-          }
+    unlistenReady.current = onTerminalReady(id, () => {
+      writeTerm("\r\n");
+      if (initialInput && !initialInputSent.current) {
+        if (!claimInitialInput(id, initialInput)) {
+          initialInputSent.current = true;
+          initialInputPending.current = false;
+          return;
         }
-      });
-
-      const exitListener = await listen<TerminalExit>(
-        "terminal-exit",
-        (ev: Event<TerminalExit>) => {
-          if (ev.payload.id === id) {
-            writeTerm("\r\n\x1b[33m[process exited]\x1b[0m\r\n");
+        initialInputSent.current = true;
+        // `terminal-ready` fires as soon as the PTY is spawned, but an agent
+        // TUI (Claude, etc.) needs a beat to boot before it reads stdin.
+        // Typing the command immediately means the keystrokes/Enter land
+        // before the input box is live, so the text appears but never
+        // submits. Wait until the program has produced output for a short
+        // cushion (boot done) — capped by a hard timeout — then type the
+        // text and submit it with a single Enter (CR) a beat later, as a
+        // separate write so a trailing newline isn't swallowed by the TUI's
+        // bracketed-paste/buffered input handling.
+        const READY_CUSHION_MS = 1200;
+        const MAX_WAIT_MS = 5000;
+        const scheduledAt = Date.now();
+        const typeWhenReady = () => {
+          if (cancelled) return;
+          const elapsed = Date.now() - scheduledAt;
+          const firstOut = firstOutputAt.current;
+          const ready =
+            firstOut !== null && Date.now() - firstOut >= READY_CUSHION_MS;
+          if (!ready && elapsed < MAX_WAIT_MS) {
+            initialEnterTimer.current = setTimeout(typeWhenReady, 100);
+            return;
           }
-        },
-      );
-
-      if (cancelled) {
-        outputListener();
-        readyListener();
-        exitListener();
-        return;
+          // Typed on the user's behalf — they triggered the flow that
+          // opened this tab with a command, so its work counts as asked-for.
+          noteUserInput(id);
+          invoke("pty_write", {
+            id,
+            data: PTY_ENCODER.encode(initialInputForPty(initialInput, kind)),
+          }).catch(console.error);
+          initialEnterTimer.current = setTimeout(() => {
+            initialInputPending.current = false;
+            invoke("pty_write", { id, data: new Uint8Array([0x0d]) }).catch(console.error);
+          }, 200);
+        };
+        typeWhenReady();
       }
+    });
 
-      unlistenOutput.current = outputListener;
-      unlistenReady.current = readyListener;
-      unlistenExit.current = exitListener;
+    unlistenExit.current = onTerminalExit(id, () => {
+      writeTerm("\r\n\x1b[33m[process exited]\x1b[0m\r\n");
+    });
 
+    const setupAndSpawn = async () => {
       // #42: an attach-only terminal (detached window) must NEVER spawn the PTY.
       // The PTY already exists, spawned by the main window's pane; pty_spawn with
       // a duplicate id would kill+respawn it, destroying scrollback / the agent
@@ -488,7 +560,7 @@ export function TerminalView({ id, cmd, args = [], env = {}, initialInput, cwd,
       notePtySpawn(id);
       try {
         await invoke("pty_spawn", {
-          opts: { id, cmd, args, env, cwd, cols: term.cols, rows: term.rows, local_only: localOnly, sandbox, project_id: projectId ?? null },
+          opts: { id, cmd, args, env, cwd, cols: term.cols, rows: term.rows, local_only: localOnly, sandbox, project_id: projectId ?? null, remote_host_id: remoteHostId ?? null, tmux_session: tmuxSession ?? null, tmux_attach: tmuxAttach ?? null },
         });
       } catch (e) {
         if (!cancelled) {
@@ -573,6 +645,8 @@ export function TerminalView({ id, cmd, args = [], env = {}, initialInput, cwd,
       cancelled = true;
       if (initialEnterTimer.current) clearTimeout(initialEnterTimer.current);
       if (openWatchTimer.current) clearTimeout(openWatchTimer.current);
+      if (selectionCopyTimer) clearTimeout(selectionCopyTimer);
+      oscHandler.dispose();
       window.removeEventListener("resize", doFit);
       if (zoomable) {
         containerRef.current?.removeEventListener("wheel", onWheel);
@@ -602,7 +676,7 @@ export function TerminalView({ id, cmd, args = [], env = {}, initialInput, cwd,
       }
       term.dispose();
     };
-  }, [id, cmd, cwd, initialInput, argsKey, envKey, localOnly, sandbox, projectId, attachOnly, zoomable, persistOnUnmount]);
+  }, [id, cmd, cwd, initialInput, argsKey, envKey, localOnly, sandbox, projectId, remoteHostId, tmuxSession, tmuxAttach, attachOnly, zoomable, persistOnUnmount]);
 
   useEffect(() => {
     if (termRef.current) {
@@ -633,6 +707,10 @@ export function TerminalView({ id, cmd, args = [], env = {}, initialInput, cwd,
         position: "relative",
         display: "flex",
         flexDirection: "column",
+        // Agent panes get a touch more breathing room on the left and a bit less
+        // on the right (the viewport scrollbar already insets the right edge), so
+        // the text margins read as balanced. FitAddon accounts for this padding.
+        ...(zoomable ? { paddingLeft: 10, paddingRight: 4 } : null),
         background:
           colorScheme === "light_lavender"
             ? "#faf9fe"
diff --git a/src/hooks/useKeyboard.ts b/src/hooks/useKeyboard.ts
index e0c2241..20a3116 100644
--- a/src/hooks/useKeyboard.ts
+++ b/src/hooks/useKeyboard.ts
@@ -3,7 +3,7 @@ import { getCurrentWindow } from "@tauri-apps/api/window";
 import { PLATFORM } from "../lib/dragPlatform";
 import { allGroups, findGroup, useTabsStore } from "../stores/tabs";
 import { useProjectsStore } from "../stores/projects";
-import { useSettingsStore } from "../stores/settings";
+import { useSettingsStore, stepZoom } from "../stores/settings";
 import { useSubwindowNavStore } from "../stores/subwindowNav";
 import {
   chordMatches,
@@ -17,8 +17,10 @@ interface KeyboardOptions {
 }
 
 /** True when keystrokes belong to a text field (input/textarea/contenteditable)
- *  — we must not steal those for navigation chords. */
-function isEditableTarget(target: EventTarget | null): boolean {
+ *  — we must not steal those for navigation chords. Exported so the detached
+ *  popout's keyboard hook applies the exact same "don't shadow a focused text
+ *  field / xterm textarea" rule as the main window. */
+export function isEditableTarget(target: EventTarget | null): boolean {
   const el = target as HTMLElement | null;
   if (!el) return false;
   const tag = el.tagName;
@@ -97,6 +99,25 @@ export function useKeyboard({ onTogglePanels }: KeyboardOptions) {
         return;
       }
 
+      // Ctrl +/- / Ctrl+0 — per-window UI zoom (this is the MAIN window; a popout
+      // handles its own — see DetachedApp). Handled before the editable-target
+      // guard so it works from a focused terminal too (the browser-zoom
+      // convention). Agent panes consume these for font zoom and stopPropagation,
+      // so those never reach here. Persisted to `ui_zoom` (the main window's own
+      // value), which `updateSettings` also re-applies to this webview.
+      if ((e.ctrlKey || e.metaKey) && !e.shiftKey && !e.altKey) {
+        const cur = useSettingsStore.getState().settings?.ui_zoom;
+        const set1 = (z: number) => {
+          e.preventDefault();
+          void useSettingsStore
+            .getState()
+            .updateSettings({ ui_zoom: z === 1 ? undefined : z });
+        };
+        if (e.code === "Equal") return set1(stepZoom(cur, 1));
+        if (e.code === "Minus") return set1(stepZoom(cur, -1));
+        if (e.code === "Digit0") return set1(1);
+      }
+
       const tabs = useTabsStore.getState();
 
       // Escape exits app-internal fullscreen (when active). Only act if we're
@@ -158,6 +179,18 @@ export function useKeyboard({ onTogglePanels }: KeyboardOptions) {
         return;
       }
 
+      // Toggle the focused subwindow's docked file viewer (same flag the ◫
+      // button and the sidebar's resize-edge double-click write).
+      if (is("toggleSubwindowFiles")) {
+        const focused = tabs.focusedGroupId;
+        const group = focused ? findGroup(tabs.layout, focused) : null;
+        if (focused && group) {
+          e.preventDefault();
+          tabs.setGroupFiles(focused, !group.filesOpen);
+        }
+        return;
+      }
+
       // Close the active tab.
       if (is("closeTab")) {
         if (tabs.activeKey) {
diff --git a/src/hooks/useWindowFocused.ts b/src/hooks/useWindowFocused.ts
new file mode 100644
index 0000000..3482ed9
--- /dev/null
+++ b/src/hooks/useWindowFocused.ts
@@ -0,0 +1,46 @@
+import { useEffect, useState } from "react";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+
+/**
+ * Whether THIS OS window currently holds focus. Backs the "exactly one active
+ * subwindow across all windows" rule (#42 ergonomics): each window keeps its own
+ * focused-subwindow value, but only *paints* it as active while it owns OS focus,
+ * so a blurred main window and a focused popout never both show a highlight.
+ *
+ * Defaults to `true` and only updates on a real boolean: the main window then
+ * paints its active subwindow immediately on load (before the first event), and
+ * in a non-Tauri context (unit tests, where `getCurrentWindow` is inert) the
+ * value simply stays `true` — preserving the pre-gate behavior.
+ */
+export function useWindowFocused(): boolean {
+  const [focused, setFocused] = useState(true);
+  useEffect(() => {
+    let unlisten: (() => void) | undefined;
+    let cancelled = false;
+    try {
+      const win = getCurrentWindow();
+      win
+        .isFocused()
+        .then((f) => {
+          if (!cancelled && typeof f === "boolean") setFocused(f);
+        })
+        .catch(() => {});
+      win
+        .onFocusChanged(({ payload }) => {
+          if (typeof payload === "boolean") setFocused(payload);
+        })
+        .then((fn) => {
+          if (cancelled) fn();
+          else unlisten = fn;
+        })
+        .catch(() => {});
+    } catch {
+      // No Tauri window (tests): keep the single-window default.
+    }
+    return () => {
+      cancelled = true;
+      unlisten?.();
+    };
+  }, []);
+  return focused;
+}
diff --git a/src/lib/closeRemoteTab.ts b/src/lib/closeRemoteTab.ts
new file mode 100644
index 0000000..9d50968
--- /dev/null
+++ b/src/lib/closeRemoteTab.ts
@@ -0,0 +1,87 @@
+/**
+ * Close (detach) of a persistent tab (TODO #85), plus the helpers that classify
+ * which tmux session a tab owns.
+ *
+ * A shell/script tab can run inside a **tmux** session — remote (on the SSH host)
+ * or local (on this machine) — so the run survives an SSH drop / laptop sleep /
+ * Eldrun quit / crash. Closing a tab is therefore **non-destructive**: it detaches
+ * (unmounts the pane, killing only the ssh/PTY client) and leaves the session alive
+ * under its tmux daemon, reattachable from the Sessions view. The *only* way to
+ * terminate a session is its × (kill) in the Sessions view (`remote_tmux_kill` /
+ * `local_tmux_kill`); no tab close, quit, disconnect, or crash ends a run.
+ *
+ * `persistentSessionOf` / `localPersistentSessionOf` classify the tab (used by the
+ * Sessions view to mark which rows an open tab owns). They live outside the stores
+ * because they read BOTH the tabs and projects stores, and `stores/projects`
+ * already imports `stores/tabs` — a store-level import back would be a cycle.
+ */
+
+import {
+  useTabsStore,
+  effectiveTabLocation,
+  remoteHostIdOf,
+  type TabEntry,
+} from "../stores/tabs";
+import { useProjectsStore } from "../stores/projects";
+import { useSettingsStore } from "../stores/settings";
+import { shouldPersistTab } from "./tmuxSession";
+import { IS_WINDOWS } from "./platform";
+
+/**
+ * The persistent host tmux session a tab owns, or `null` if the tab is not a
+ * persistent remote session (a local tab, a non-shell tab, a persistence-off
+ * project). An **attach** tab (opened from the Sessions view) owns the named
+ * session it attached to; an ordinary persistent shell tab owns its stable minted
+ * `tmuxSession`. `hostId` is resolved like `CenterPanel` (a tab naming a removed
+ * worker falls back to the primary).
+ */
+export function persistentSessionOf(
+  scope: string,
+  tab: TabEntry,
+): { session: string; hostId: string } | null {
+  if (scope === "root") return null;
+  const project = useProjectsStore.getState().projects.find((p) => p.id === scope);
+  if (!project?.remote) return null;
+  const rawHostId = remoteHostIdOf(effectiveTabLocation(tab));
+  if (rawHostId === null) return null; // a local-running tab has no host session
+  const hostId =
+    rawHostId !== "primary" && !project.compute_hosts?.some((h) => h.id === rawHostId)
+      ? "primary"
+      : rawHostId;
+  // A Sessions-view attach tab owns exactly the (possibly foreign) name it attached to.
+  if (tab.tmuxAttach) return { session: tab.tmuxAttach, hostId };
+  if (!shouldPersistTab(tab.kind, hostId, project.remote) || !tab.tmuxSession) return null;
+  return { session: tab.tmuxSession, hostId };
+}
+
+/**
+ * The persistent **local** tmux session a tab owns, or `null`. Mirrors
+ * `shouldPersistLocalTab`: a shell tab in a project scope running on the local
+ * machine (a local project, or a remote project's local/mirror tab) with the
+ * `persist_local_sessions` setting on — and never on Windows (no tmux).
+ */
+export function localPersistentSessionOf(scope: string, tab: TabEntry): string | null {
+  if (scope === "root" || IS_WINDOWS) return null;
+  if (tab.kind !== "shell" || !tab.tmuxSession) return null;
+  const project = useProjectsStore.getState().projects.find((p) => p.id === scope);
+  const localRunning = !project?.remote || effectiveTabLocation(tab) === "local";
+  if (!localRunning) return null;
+  if (useSettingsStore.getState().settings?.persist_local_sessions === false) return null;
+  return tab.tmuxSession;
+}
+
+/**
+ * Close a tab from an explicit user action (the × button, the tab context menu).
+ *
+ * Closing a tab **detaches** — it never terminates the underlying tmux session.
+ * `removeTab` unmounts the pane (killing only the ssh/PTY *client*), so a persistent
+ * session — remote (on an SSH host) or local (on this machine) — keeps running under
+ * its tmux daemon and stays discoverable + reattachable in the Sessions view. The one
+ * way to actually terminate a session is its × (kill) in the Sessions view; a tab
+ * close, a quit, a disconnect, and a crash all leave it alive. (This function stays a
+ * seam — rather than inlining `removeTab` at the call sites — so a future confirm/hook
+ * has one home, and so `persistentSessionOf` keeps a co-located reader.)
+ */
+export function closeTabWithConfirm(key: string): void {
+  useTabsStore.getState().removeTab(key);
+}
diff --git a/src/lib/experimental.ts b/src/lib/experimental.ts
new file mode 100644
index 0000000..7cffe55
--- /dev/null
+++ b/src/lib/experimental.ts
@@ -0,0 +1,41 @@
+/**
+ * Experimental features and the one rule that governs them.
+ *
+ * An experimental feature is **off for everyone and on in debug mode**: the flag
+ * is a tri-state, and when it is unset the answer is `settings.debug`. That is the
+ * whole point of the gate — a feature that is still moving needs to be invisible
+ * to someone using Eldrun to work, and present *by default* for someone using
+ * Eldrun to build Eldrun, without them having to re-tick a list of toggles every
+ * time a new one lands.
+ *
+ * Unset is therefore NOT the same as false. An explicit value always wins, in both
+ * directions: a user can opt into one experiment without debug mode, and can switch
+ * one off while *in* debug mode — otherwise "turn this off" would silently fail for
+ * exactly the people most likely to hit a broken experiment.
+ *
+ * Adding an experiment: add its key to `Settings` (and to the Rust `Settings`, so
+ * it round-trips through `save_settings`), list it here, and read it through
+ * `useExperimental`. Never read `settings.<flag> ?? false` at the call site — that
+ * spelling is what makes a flag miss the debug default.
+ */
+
+import { useSettingsStore } from "../stores/settings";
+import type { Settings } from "../types";
+
+/** Every experimental flag. Keys of `Settings`, all `boolean | undefined`. */
+export const EXPERIMENTAL_FLAGS = ["agent_mode_toggle", "python_run_debug"] as const;
+
+export type ExperimentalFlag = (typeof EXPERIMENTAL_FLAGS)[number];
+
+/** Is `flag` live? Explicit setting if there is one, else debug mode, else off. */
+export function experimentalEnabled(
+  settings: Settings | null | undefined,
+  flag: ExperimentalFlag,
+): boolean {
+  return settings?.[flag] ?? settings?.debug ?? false;
+}
+
+/** `experimentalEnabled` as a store subscription — the call site for a component. */
+export function useExperimental(flag: ExperimentalFlag): boolean {
+  return useSettingsStore((s) => experimentalEnabled(s.settings, flag));
+}
diff --git a/src/lib/gpu.ts b/src/lib/gpu.ts
new file mode 100644
index 0000000..7a52642
--- /dev/null
+++ b/src/lib/gpu.ts
@@ -0,0 +1,166 @@
+/**
+ * The GPU-memory arithmetic, shared by the three surfaces that show it (the
+ * header readout, the system-monitor pane, the local-model menu). Pure — the
+ * sampling lives in the backend's `gpustat`.
+ *
+ * The one thing worth internalizing is what "GPU memory" *is*. A GPU has two
+ * pools and both are reported, because on an integrated GPU only one of them is
+ * real: the dedicated **VRAM** carve-out (typically 512 MB on an APU — the
+ * framebuffer, permanently ~full, so reading it alone says nothing useful) and
+ * the **shared** pool the driver maps out of system RAM (amdgpu's GTT — where a
+ * model actually lands). So the headline figure is the two summed: on a discrete
+ * card the shared pool is 0 and it collapses to plain device VRAM, and on an APU
+ * it becomes the number that answers "will this model fit?".
+ */
+
+/** One GPU, as sampled by the backend `gpustat::GpuSample`. */
+export interface GpuSample {
+  name: string;
+  driver: string;
+  /** Dedicated device memory. */
+  vram_used: number;
+  vram_total: number;
+  /** System memory mapped for the GPU (GTT); 0 on a discrete card. */
+  shared_used: number;
+  shared_total: number;
+  /** `null` when the driver won't report utilization — not the same as idle. */
+  busy_percent: number | null;
+  // Sensor readings. Each is `undefined`/`null` when the driver won't report it
+  // (the backend omits absent ones), which is distinct from a real zero — an
+  // unread temperature is unknown, not 0 °C. All optional so existing fixtures and
+  // the memory-only `gpu_memory_snapshot` callers keep type-checking.
+  /** GPU temperature, °C. */
+  temp_c?: number | null;
+  /** Board power draw, watts. */
+  power_w?: number | null;
+  /** Board power limit/cap, watts. */
+  power_cap_w?: number | null;
+  /** Core (shader) clock, MHz. */
+  sclk_mhz?: number | null;
+  /** Memory clock, MHz. */
+  mclk_mhz?: number | null;
+  /** Fan speed, 0–100% of range (not RPM). */
+  fan_percent?: number | null;
+  /** Driver version string (NVIDIA only). */
+  driver_version?: string | null;
+  /** Current PCIe link generation (1–5) and lane width. */
+  pcie_gen?: number | null;
+  pcie_width?: number | null;
+}
+
+/** One process's GPU memory, from the backend `gpustat::GpuProc`. */
+export interface GpuProc {
+  pid: number;
+  name: string;
+  mem_bytes: number;
+}
+
+/** Both pools of every adapter, summed: the machine's GPU memory. */
+export function gpuTotals(gpus: GpuSample[]): { used: number; total: number } {
+  return gpus.reduce(
+    (acc, g) => ({
+      used: acc.used + g.vram_used + g.shared_used,
+      total: acc.total + g.vram_total + g.shared_total,
+    }),
+    { used: 0, total: 0 },
+  );
+}
+
+/** Highest utilization across adapters; `null` when no driver reports any. */
+export function gpuBusy(gpus: GpuSample[]): number | null {
+  const busy = gpus.map((g) => g.busy_percent).filter((b): b is number => b != null);
+  return busy.length > 0 ? Math.max(...busy) : null;
+}
+
+export function gpuPercent(used: number, total: number): number {
+  if (!(total > 0)) return 0;
+  return Math.min(100, Math.max(0, (used / total) * 100));
+}
+
+/**
+ * Tone by **ratio**, not by absolute bytes. The old GPU row warned at 1 GB and
+ * went hot at 2 GB — thresholds that made sense for a figure counting only
+ * Ollama's models, and that a system-wide reading would trip permanently.
+ */
+export function gpuTone(used: number, total: number): "low" | "medium" | "high" {
+  const pct = gpuPercent(used, total);
+  if (pct >= 85) return "high";
+  if (pct >= 60) return "medium";
+  return "low";
+}
+
+/** Byte formatter shared by the GPU readouts (MB under a GiB, else GB). */
+export function formatBytes(bytes: number): string {
+  if (!Number.isFinite(bytes) || bytes <= 0) return "0 B";
+  const mib = bytes / 1024 / 1024;
+  if (mib < 1024) return `${Math.round(mib)} MB`;
+  return `${(mib / 1024).toFixed(1)} GB`;
+}
+
+/** Temperature as `NN °C`, or `null` when unknown. */
+export function formatTempC(c: number | null | undefined): string | null {
+  return c == null ? null : `${Math.round(c)} °C`;
+}
+
+/**
+ * Power as `NN W`, or `NN / MM W` when a cap is known — the draw against its
+ * ceiling. `null` when the draw itself is unknown.
+ */
+export function formatWatts(
+  draw: number | null | undefined,
+  cap?: number | null,
+): string | null {
+  if (draw == null) return null;
+  return cap != null ? `${Math.round(draw)} / ${Math.round(cap)} W` : `${Math.round(draw)} W`;
+}
+
+/** A clock as `N.NN GHz` (or `NNN MHz` below a GHz), or `null` when unknown. */
+export function formatMhz(mhz: number | null | undefined): string | null {
+  if (mhz == null) return null;
+  return mhz >= 1000 ? `${(mhz / 1000).toFixed(2)} GHz` : `${mhz} MHz`;
+}
+
+/** Fan speed as `NN%`, or `null` when unknown. */
+export function formatFan(pct: number | null | undefined): string | null {
+  return pct == null ? null : `${Math.round(pct)}%`;
+}
+
+/** PCIe link as `PCIe 4.0 ×16`, dropping whichever half is unknown; `null` for none. */
+export function gpuLinkLabel(gpu: GpuSample): string | null {
+  const gen = gpu.pcie_gen != null ? `PCIe ${gpu.pcie_gen}.0` : null;
+  const width = gpu.pcie_width != null ? `×${gpu.pcie_width}` : null;
+  const parts = [gen, width].filter((p): p is string => p != null);
+  return parts.length > 0 ? parts.join(" ") : null;
+}
+
+/** One adapter, named and split back into its two pools, then its live sensors. */
+export function gpuAdapterTooltip(gpu: GpuSample): string {
+  const head =
+    gpu.busy_percent != null ? `${gpu.name} — ${Math.round(gpu.busy_percent)}% busy` : gpu.name;
+  const vram = `  VRAM    ${formatBytes(gpu.vram_used)} / ${formatBytes(gpu.vram_total)}`;
+  const shared =
+    gpu.shared_total > 0
+      ? `\n  Shared  ${formatBytes(gpu.shared_used)} / ${formatBytes(gpu.shared_total)}`
+      : "";
+  // Append only the sensors the driver actually reported, so a card that exposes
+  // none reads exactly as it did before these fields existed.
+  const sensors: string[] = [];
+  const temp = formatTempC(gpu.temp_c);
+  const power = formatWatts(gpu.power_w, gpu.power_cap_w);
+  const clocks = [formatMhz(gpu.sclk_mhz), formatMhz(gpu.mclk_mhz)].filter(Boolean).join(" / ");
+  const link = gpuLinkLabel(gpu);
+  if (temp) sensors.push(`  Temp    ${temp}`);
+  if (power) sensors.push(`  Power   ${power}`);
+  if (clocks) sensors.push(`  Clocks  ${clocks}`);
+  if (link) sensors.push(`  Link    ${link}`);
+  const tail = sensors.length > 0 ? `\n${sensors.join("\n")}` : "";
+  return `${head}\n${vram}${shared}${tail}`;
+}
+
+/**
+ * The header's breakdown: every adapter's two pools, then Ollama's share of it
+ * all — the figure this readout used to consist of, now one line of context.
+ */
+export function gpuTooltip(gpus: GpuSample[], ollamaBytes: number): string {
+  return [...gpus.map(gpuAdapterTooltip), `Ollama models: ${formatBytes(ollamaBytes)}`].join("\n");
+}
diff --git a/src/lib/i18n.ts b/src/lib/i18n.ts
new file mode 100644
index 0000000..b62b1de
--- /dev/null
+++ b/src/lib/i18n.ts
@@ -0,0 +1,589 @@
+import { useMemo } from "react";
+import { create } from "zustand";
+
+/**
+ * Eldrun's in-house internationalization (i18n) — the ONE place every language
+ * lives, so adding a string or a whole language is a single edit here and never
+ * a hunt through the component tree.
+ *
+ * Design (kept deliberately dependency-free — no i18next, no network):
+ *  - `TRANSLATIONS` is a flat `lang → (key → text)` map. English (`en`) is the
+ *    source of truth and holds *every* key; the other languages provide what
+ *    they translate and fall back to English (then to the raw key) for anything
+ *    missing, so a half-translated language degrades gracefully instead of
+ *    rendering blanks.
+ *  - The current language is a tiny zustand store (`useI18nStore`). Switching is
+ *    **instant**: `setLangLocal` flips one field and every component reading
+ *    `useT()` re-renders in place — no reload, no restart. Persistence rides the
+ *    ordinary settings file (`Settings.language`); this store is only the live,
+ *    reactive mirror, seeded from a localStorage cache so the first paint after
+ *    launch already shows the chosen language before settings finish loading.
+ *
+ * To add a language: add its code to `Language`, a `{ value, label }` row to
+ * `LANGUAGES`, and a block to `TRANSLATIONS`. To add a string: add the key to
+ * the `en` block (and, ideally, the others) and call `t("your.key")`.
+ */
+export type Language = "en" | "de" | "es" | "fr" | "it";
+
+/** The languages offered in the switcher, labelled in their own tongue. */
+export const LANGUAGES: { value: Language; label: string }[] = [
+  { value: "en", label: "English" },
+  { value: "de", label: "Deutsch" },
+  { value: "es", label: "Español" },
+  { value: "fr", label: "Français" },
+  { value: "it", label: "Italiano" },
+];
+
+const LANG_CODES = new Set<string>(LANGUAGES.map((l) => l.value));
+
+/** Coerce an arbitrary string (settings value, cache) to a supported language. */
+export function normalizeLang(value: string | null | undefined): Language {
+  return value && LANG_CODES.has(value) ? (value as Language) : "en";
+}
+
+// English is the base: it defines the full key set. Other languages need only
+// override; anything absent falls through to English via `translate`.
+const en = {
+  // Common action words, shared across surfaces.
+  "common.back": "Back",
+  "common.cancel": "Cancel",
+  "common.remove": "Remove",
+  "common.loading": "Loading…",
+  "common.default": "default",
+
+  // Settings — main panel.
+  "settings.title": "Settings",
+  "settings.theme": "Theme",
+  "settings.language": "Language",
+  "settings.language.help":
+    "Sets the language of Eldrun's interface. Takes effect immediately — no restart needed.",
+  "settings.runScriptsBg": "Run scripts in background",
+  "settings.claudeRemote": "Claude remote control",
+  "settings.headlessRemote": "Headless remote connections",
+  "settings.persistLocal": "Persistent local sessions (tmux)",
+  "settings.energySaver": "Energy saver",
+  "energy.off": "Off",
+  "energy.battery": "On battery",
+  "energy.always": "Always",
+  "settings.debug": "Debug mode",
+  "settings.experimental": "Experimental",
+  "settings.agentModeToggle": "Plan/Auto toggle on agent tabs",
+  "settings.pythonRunDebug": "Python Run/Debug in the code viewer",
+  "settings.resourceMonitor": "Resource monitor",
+  "settings.showCpu": "Show CPU usage",
+  "settings.showRam": "Show RAM usage",
+  "settings.showGpu": "Show GPU usage",
+
+  // Settings — calendar.
+  "settings.calendar": "Calendar",
+  "settings.weekStartsOn": "Week starts on",
+  "day.sunday": "Sunday",
+  "day.monday": "Monday",
+  "settings.defaultView": "Default view",
+  "view.day": "Day",
+  "view.week": "Week",
+  "view.multiweek": "Multiweek",
+  "view.month": "Month",
+  "view.agenda": "Agenda",
+  "view.tasks": "Tasks",
+  "settings.clock24": "24-hour clock",
+  "settings.dayGridStart": "Day grid starts at",
+  "settings.defaultReminder": "Default reminder",
+  "reminder.none": "None",
+  "reminder.5": "5 minutes before",
+  "reminder.15": "15 minutes before",
+  "reminder.30": "30 minutes before",
+  "reminder.60": "1 hour before",
+  "reminder.1440": "1 day before",
+
+  // Settings — hints & onboarding.
+  "settings.hintsOnboarding": "Hints & onboarding",
+  "settings.showHints": "Show contextual hints",
+  "settings.howToStart": "How to start...",
+  "settings.takeTour": "Take a tour",
+  "settings.lessons": "Lessons",
+  "settings.resetHints": "Reset hints",
+
+  // Settings — layout.
+  "settings.layout": "Layout",
+  "settings.windowZoom": "Window zoom",
+  "settings.minSubWidth": "Min subwindow width (px)",
+  "settings.minSubHeight": "Min subwindow height (px)",
+
+  // Settings — downloads.
+  "settings.downloads": "Downloads",
+  "settings.noDownloadFolders": "No folders added — the system Downloads folder is used.",
+  "settings.addDownloadFolder": "Add download folder...",
+
+  // Settings — usage stats.
+  "settings.usageStats": "Usage stats",
+  "settings.dailyRecap": "Show the recap at the start of each day",
+  "settings.openUsageStats": "Open usage stats",
+
+  // Settings — sub-panel navigation ("More settings").
+  "settings.moreSettings": "More settings",
+  "nav.git.title": "Git Hosting",
+  "nav.git.blurb": "Hosting profile, access token, and publishing.",
+  "nav.vpn.title": "VPN Auto-Connect",
+  "nav.vpn.blurb": "Arm a stored tunnel to connect on launch.",
+  "nav.remoteHosts.title": "Remote Connections",
+  "nav.remoteHosts.blurb": "Set a standard path per SSH host.",
+  "nav.global.title": "Global Apps",
+  "nav.global.blurb": "Toolbar launchers shown across every project.",
+  "nav.filetypes.title": "File Type Apps",
+  "nav.filetypes.blurb": "Choose which app opens each file type.",
+  "nav.agents.title": "Manage Agents",
+  "nav.agents.blurb": "Install or update the agent CLIs.",
+  "nav.shortcuts.title": "Keyboard Shortcuts",
+  "nav.shortcuts.blurb": "Rebind the navigation chords.",
+  "nav.archive.title": "Archived Projects",
+  "nav.archive.blurb": "Restore or permanently delete archived projects.",
+  "nav.scaffoldRepair.title": "Repair Project Scaffold",
+  "nav.scaffoldRepair.blurb": "Regenerate missing scaffold files.",
+  "nav.help.title": "Feature Guide",
+  "nav.help.blurb": "Full glossary of Eldrun's features.",
+} as const;
+
+/** The key set every component is allowed to translate. */
+export type TranslationKey = keyof typeof en;
+
+type Dict = Partial<Record<TranslationKey, string>>;
+
+const de: Dict = {
+  "common.back": "Zurück",
+  "common.cancel": "Abbrechen",
+  "common.remove": "Entfernen",
+  "common.loading": "Wird geladen…",
+  "common.default": "Standard",
+
+  "settings.title": "Einstellungen",
+  "settings.theme": "Design",
+  "settings.language": "Sprache",
+  "settings.language.help":
+    "Legt die Sprache der Eldrun-Oberfläche fest. Wirkt sofort — kein Neustart nötig.",
+  "settings.runScriptsBg": "Skripte im Hintergrund ausführen",
+  "settings.claudeRemote": "Claude-Fernsteuerung",
+  "settings.headlessRemote": "Verbindungen im Hintergrund",
+  "settings.persistLocal": "Persistente lokale Sitzungen (tmux)",
+  "settings.energySaver": "Energiesparen",
+  "energy.off": "Aus",
+  "energy.battery": "Im Akkubetrieb",
+  "energy.always": "Immer",
+  "settings.debug": "Debug-Modus",
+  "settings.experimental": "Experimentell",
+  "settings.agentModeToggle": "Plan/Auto-Umschalter für Agenten-Tabs",
+  "settings.pythonRunDebug": "Python Ausführen/Debuggen im Code-Viewer",
+  "settings.resourceMonitor": "Ressourcenmonitor",
+  "settings.showCpu": "CPU-Auslastung anzeigen",
+  "settings.showRam": "RAM-Auslastung anzeigen",
+  "settings.showGpu": "GPU-Auslastung anzeigen",
+
+  "settings.calendar": "Kalender",
+  "settings.weekStartsOn": "Woche beginnt am",
+  "day.sunday": "Sonntag",
+  "day.monday": "Montag",
+  "settings.defaultView": "Standardansicht",
+  "view.day": "Tag",
+  "view.week": "Woche",
+  "view.multiweek": "Mehrere Wochen",
+  "view.month": "Monat",
+  "view.agenda": "Agenda",
+  "view.tasks": "Aufgaben",
+  "settings.clock24": "24-Stunden-Format",
+  "settings.dayGridStart": "Tagesraster beginnt um",
+  "settings.defaultReminder": "Standarderinnerung",
+  "reminder.none": "Keine",
+  "reminder.5": "5 Minuten vorher",
+  "reminder.15": "15 Minuten vorher",
+  "reminder.30": "30 Minuten vorher",
+  "reminder.60": "1 Stunde vorher",
+  "reminder.1440": "1 Tag vorher",
+
+  "settings.hintsOnboarding": "Hinweise & Einführung",
+  "settings.showHints": "Kontextbezogene Hinweise anzeigen",
+  "settings.howToStart": "Erste Schritte...",
+  "settings.takeTour": "Tour starten",
+  "settings.lessons": "Lektionen",
+  "settings.resetHints": "Hinweise zurücksetzen",
+
+  "settings.layout": "Layout",
+  "settings.windowZoom": "Fenster-Zoom",
+  "settings.minSubWidth": "Min. Breite des Unterfensters (px)",
+  "settings.minSubHeight": "Min. Höhe des Unterfensters (px)",
+
+  "settings.downloads": "Downloads",
+  "settings.noDownloadFolders":
+    "Keine Ordner hinzugefügt — der System-Download-Ordner wird verwendet.",
+  "settings.addDownloadFolder": "Download-Ordner hinzufügen...",
+
+  "settings.usageStats": "Nutzungsstatistik",
+  "settings.dailyRecap": "Zusammenfassung zu Beginn jedes Tages anzeigen",
+  "settings.openUsageStats": "Nutzungsstatistik öffnen",
+
+  "settings.moreSettings": "Weitere Einstellungen",
+  "nav.git.title": "Git-Hosting",
+  "nav.git.blurb": "Hosting-Profil, Zugriffstoken und Veröffentlichung.",
+  "nav.vpn.title": "VPN automatisch verbinden",
+  "nav.vpn.blurb": "Einen gespeicherten Tunnel beim Start verbinden.",
+  "nav.remoteHosts.title": "Remote-Verbindungen",
+  "nav.remoteHosts.blurb": "Einen Standardpfad je SSH-Host festlegen.",
+  "nav.global.title": "Globale Apps",
+  "nav.global.blurb": "Toolbar-Starter, die in jedem Projekt angezeigt werden.",
+  "nav.filetypes.title": "Apps nach Dateityp",
+  "nav.filetypes.blurb": "Wählen, welche App jeden Dateityp öffnet.",
+  "nav.agents.title": "Agenten verwalten",
+  "nav.agents.blurb": "Die Agenten-CLIs installieren oder aktualisieren.",
+  "nav.shortcuts.title": "Tastenkürzel",
+  "nav.shortcuts.blurb": "Die Navigationskürzel neu belegen.",
+  "nav.archive.title": "Archivierte Projekte",
+  "nav.archive.blurb": "Archivierte Projekte wiederherstellen oder endgültig löschen.",
+  "nav.scaffoldRepair.title": "Projektgerüst reparieren",
+  "nav.scaffoldRepair.blurb": "Fehlende Gerüstdateien neu erzeugen.",
+  "nav.help.title": "Funktionsübersicht",
+  "nav.help.blurb": "Vollständiges Glossar der Eldrun-Funktionen.",
+};
+
+const es: Dict = {
+  "common.back": "Atrás",
+  "common.cancel": "Cancelar",
+  "common.remove": "Quitar",
+  "common.loading": "Cargando…",
+  "common.default": "predeterminado",
+
+  "settings.title": "Configuración",
+  "settings.theme": "Tema",
+  "settings.language": "Idioma",
+  "settings.language.help":
+    "Establece el idioma de la interfaz de Eldrun. Se aplica al instante — sin reiniciar.",
+  "settings.runScriptsBg": "Ejecutar scripts en segundo plano",
+  "settings.claudeRemote": "Control remoto de Claude",
+  "settings.headlessRemote": "Conexiones remotas en segundo plano",
+  "settings.persistLocal": "Sesiones locales persistentes (tmux)",
+  "settings.energySaver": "Ahorro de energía",
+  "energy.off": "Desactivado",
+  "energy.battery": "Con batería",
+  "energy.always": "Siempre",
+  "settings.debug": "Modo de depuración",
+  "settings.experimental": "Experimental",
+  "settings.agentModeToggle": "Alternar Plan/Auto en pestañas de agente",
+  "settings.pythonRunDebug": "Ejecutar/Depurar Python en el visor de código",
+  "settings.resourceMonitor": "Monitor de recursos",
+  "settings.showCpu": "Mostrar uso de CPU",
+  "settings.showRam": "Mostrar uso de RAM",
+  "settings.showGpu": "Mostrar uso de GPU",
+
+  "settings.calendar": "Calendario",
+  "settings.weekStartsOn": "La semana empieza el",
+  "day.sunday": "Domingo",
+  "day.monday": "Lunes",
+  "settings.defaultView": "Vista predeterminada",
+  "view.day": "Día",
+  "view.week": "Semana",
+  "view.multiweek": "Varias semanas",
+  "view.month": "Mes",
+  "view.agenda": "Agenda",
+  "view.tasks": "Tareas",
+  "settings.clock24": "Reloj de 24 horas",
+  "settings.dayGridStart": "La cuadrícula del día empieza a las",
+  "settings.defaultReminder": "Recordatorio predeterminado",
+  "reminder.none": "Ninguno",
+  "reminder.5": "5 minutos antes",
+  "reminder.15": "15 minutos antes",
+  "reminder.30": "30 minutos antes",
+  "reminder.60": "1 hora antes",
+  "reminder.1440": "1 día antes",
+
+  "settings.hintsOnboarding": "Sugerencias e introducción",
+  "settings.showHints": "Mostrar sugerencias contextuales",
+  "settings.howToStart": "Cómo empezar...",
+  "settings.takeTour": "Hacer un recorrido",
+  "settings.lessons": "Lecciones",
+  "settings.resetHints": "Restablecer sugerencias",
+
+  "settings.layout": "Diseño",
+  "settings.windowZoom": "Zoom de ventana",
+  "settings.minSubWidth": "Ancho mín. de subventana (px)",
+  "settings.minSubHeight": "Alto mín. de subventana (px)",
+
+  "settings.downloads": "Descargas",
+  "settings.noDownloadFolders":
+    "No se han añadido carpetas — se usa la carpeta de Descargas del sistema.",
+  "settings.addDownloadFolder": "Añadir carpeta de descargas...",
+
+  "settings.usageStats": "Estadísticas de uso",
+  "settings.dailyRecap": "Mostrar el resumen al inicio de cada día",
+  "settings.openUsageStats": "Abrir estadísticas de uso",
+
+  "settings.moreSettings": "Más ajustes",
+  "nav.git.title": "Alojamiento Git",
+  "nav.git.blurb": "Perfil de alojamiento, token de acceso y publicación.",
+  "nav.vpn.title": "Conexión automática VPN",
+  "nav.vpn.blurb": "Activar un túnel guardado para conectar al arrancar.",
+  "nav.remoteHosts.title": "Conexiones remotas",
+  "nav.remoteHosts.blurb": "Definir una ruta estándar por host SSH.",
+  "nav.global.title": "Apps globales",
+  "nav.global.blurb": "Lanzadores de la barra mostrados en todos los proyectos.",
+  "nav.filetypes.title": "Apps por tipo de archivo",
+  "nav.filetypes.blurb": "Elegir qué app abre cada tipo de archivo.",
+  "nav.agents.title": "Gestionar agentes",
+  "nav.agents.blurb": "Instalar o actualizar las CLI de los agentes.",
+  "nav.shortcuts.title": "Atajos de teclado",
+  "nav.shortcuts.blurb": "Reasignar los atajos de navegación.",
+  "nav.archive.title": "Proyectos archivados",
+  "nav.archive.blurb": "Restaurar o eliminar permanentemente proyectos archivados.",
+  "nav.scaffoldRepair.title": "Reparar estructura del proyecto",
+  "nav.scaffoldRepair.blurb": "Regenerar archivos de estructura que falten.",
+  "nav.help.title": "Guía de funciones",
+  "nav.help.blurb": "Glosario completo de las funciones de Eldrun.",
+};
+
+const fr: Dict = {
+  "common.back": "Retour",
+  "common.cancel": "Annuler",
+  "common.remove": "Supprimer",
+  "common.loading": "Chargement…",
+  "common.default": "par défaut",
+
+  "settings.title": "Paramètres",
+  "settings.theme": "Thème",
+  "settings.language": "Langue",
+  "settings.language.help":
+    "Définit la langue de l'interface d'Eldrun. Effet immédiat — aucun redémarrage.",
+  "settings.runScriptsBg": "Exécuter les scripts en arrière-plan",
+  "settings.claudeRemote": "Contrôle à distance de Claude",
+  "settings.headlessRemote": "Connexions distantes sans interface",
+  "settings.persistLocal": "Sessions locales persistantes (tmux)",
+  "settings.energySaver": "Économiseur d'énergie",
+  "energy.off": "Désactivé",
+  "energy.battery": "Sur batterie",
+  "energy.always": "Toujours",
+  "settings.debug": "Mode débogage",
+  "settings.experimental": "Expérimental",
+  "settings.agentModeToggle": "Bascule Plan/Auto sur les onglets d'agent",
+  "settings.pythonRunDebug": "Exécuter/Déboguer Python dans la visionneuse de code",
+  "settings.resourceMonitor": "Moniteur de ressources",
+  "settings.showCpu": "Afficher l'utilisation du CPU",
+  "settings.showRam": "Afficher l'utilisation de la RAM",
+  "settings.showGpu": "Afficher l'utilisation du GPU",
+
+  "settings.calendar": "Calendrier",
+  "settings.weekStartsOn": "La semaine commence le",
+  "day.sunday": "Dimanche",
+  "day.monday": "Lundi",
+  "settings.defaultView": "Vue par défaut",
+  "view.day": "Jour",
+  "view.week": "Semaine",
+  "view.multiweek": "Multi-semaine",
+  "view.month": "Mois",
+  "view.agenda": "Agenda",
+  "view.tasks": "Tâches",
+  "settings.clock24": "Format 24 heures",
+  "settings.dayGridStart": "La grille du jour commence à",
+  "settings.defaultReminder": "Rappel par défaut",
+  "reminder.none": "Aucun",
+  "reminder.5": "5 minutes avant",
+  "reminder.15": "15 minutes avant",
+  "reminder.30": "30 minutes avant",
+  "reminder.60": "1 heure avant",
+  "reminder.1440": "1 jour avant",
+
+  "settings.hintsOnboarding": "Astuces et prise en main",
+  "settings.showHints": "Afficher les astuces contextuelles",
+  "settings.howToStart": "Comment démarrer...",
+  "settings.takeTour": "Faire une visite",
+  "settings.lessons": "Leçons",
+  "settings.resetHints": "Réinitialiser les astuces",
+
+  "settings.layout": "Disposition",
+  "settings.windowZoom": "Zoom de la fenêtre",
+  "settings.minSubWidth": "Largeur min. de la sous-fenêtre (px)",
+  "settings.minSubHeight": "Hauteur min. de la sous-fenêtre (px)",
+
+  "settings.downloads": "Téléchargements",
+  "settings.noDownloadFolders":
+    "Aucun dossier ajouté — le dossier Téléchargements du système est utilisé.",
+  "settings.addDownloadFolder": "Ajouter un dossier de téléchargement...",
+
+  "settings.usageStats": "Statistiques d'utilisation",
+  "settings.dailyRecap": "Afficher le récapitulatif au début de chaque journée",
+  "settings.openUsageStats": "Ouvrir les statistiques d'utilisation",
+
+  "settings.moreSettings": "Plus de paramètres",
+  "nav.git.title": "Hébergement Git",
+  "nav.git.blurb": "Profil d'hébergement, jeton d'accès et publication.",
+  "nav.vpn.title": "Connexion VPN automatique",
+  "nav.vpn.blurb": "Armer un tunnel enregistré pour se connecter au lancement.",
+  "nav.remoteHosts.title": "Connexions distantes",
+  "nav.remoteHosts.blurb": "Définir un chemin standard par hôte SSH.",
+  "nav.global.title": "Applications globales",
+  "nav.global.blurb": "Lanceurs de barre d'outils affichés dans tous les projets.",
+  "nav.filetypes.title": "Applications par type de fichier",
+  "nav.filetypes.blurb": "Choisir quelle application ouvre chaque type de fichier.",
+  "nav.agents.title": "Gérer les agents",
+  "nav.agents.blurb": "Installer ou mettre à jour les CLI des agents.",
+  "nav.shortcuts.title": "Raccourcis clavier",
+  "nav.shortcuts.blurb": "Réattribuer les raccourcis de navigation.",
+  "nav.archive.title": "Projets archivés",
+  "nav.archive.blurb": "Restaurer ou supprimer définitivement les projets archivés.",
+  "nav.scaffoldRepair.title": "Réparer la structure du projet",
+  "nav.scaffoldRepair.blurb": "Régénérer les fichiers de structure manquants.",
+  "nav.help.title": "Guide des fonctionnalités",
+  "nav.help.blurb": "Glossaire complet des fonctionnalités d'Eldrun.",
+};
+
+const it: Dict = {
+  "common.back": "Indietro",
+  "common.cancel": "Annulla",
+  "common.remove": "Rimuovi",
+  "common.loading": "Caricamento…",
+  "common.default": "predefinito",
+
+  "settings.title": "Impostazioni",
+  "settings.theme": "Tema",
+  "settings.language": "Lingua",
+  "settings.language.help":
+    "Imposta la lingua dell'interfaccia di Eldrun. Ha effetto immediato — nessun riavvio.",
+  "settings.runScriptsBg": "Esegui script in background",
+  "settings.claudeRemote": "Controllo remoto di Claude",
+  "settings.headlessRemote": "Connessioni remote headless",
+  "settings.persistLocal": "Sessioni locali persistenti (tmux)",
+  "settings.energySaver": "Risparmio energetico",
+  "energy.off": "Disattivato",
+  "energy.battery": "A batteria",
+  "energy.always": "Sempre",
+  "settings.debug": "Modalità debug",
+  "settings.experimental": "Sperimentale",
+  "settings.agentModeToggle": "Interruttore Plan/Auto sulle schede agente",
+  "settings.pythonRunDebug": "Esegui/Debug Python nel visualizzatore di codice",
+  "settings.resourceMonitor": "Monitoraggio risorse",
+  "settings.showCpu": "Mostra utilizzo CPU",
+  "settings.showRam": "Mostra utilizzo RAM",
+  "settings.showGpu": "Mostra utilizzo GPU",
+
+  "settings.calendar": "Calendario",
+  "settings.weekStartsOn": "La settimana inizia di",
+  "day.sunday": "Domenica",
+  "day.monday": "Lunedì",
+  "settings.defaultView": "Vista predefinita",
+  "view.day": "Giorno",
+  "view.week": "Settimana",
+  "view.multiweek": "Multisettimana",
+  "view.month": "Mese",
+  "view.agenda": "Agenda",
+  "view.tasks": "Attività",
+  "settings.clock24": "Formato 24 ore",
+  "settings.dayGridStart": "La griglia del giorno inizia alle",
+  "settings.defaultReminder": "Promemoria predefinito",
+  "reminder.none": "Nessuno",
+  "reminder.5": "5 minuti prima",
+  "reminder.15": "15 minuti prima",
+  "reminder.30": "30 minuti prima",
+  "reminder.60": "1 ora prima",
+  "reminder.1440": "1 giorno prima",
+
+  "settings.hintsOnboarding": "Suggerimenti e introduzione",
+  "settings.showHints": "Mostra suggerimenti contestuali",
+  "settings.howToStart": "Come iniziare...",
+  "settings.takeTour": "Fai un tour",
+  "settings.lessons": "Lezioni",
+  "settings.resetHints": "Reimposta suggerimenti",
+
+  "settings.layout": "Layout",
+  "settings.windowZoom": "Zoom finestra",
+  "settings.minSubWidth": "Larghezza min. sottofinestra (px)",
+  "settings.minSubHeight": "Altezza min. sottofinestra (px)",
+
+  "settings.downloads": "Download",
+  "settings.noDownloadFolders":
+    "Nessuna cartella aggiunta — viene usata la cartella Download di sistema.",
+  "settings.addDownloadFolder": "Aggiungi cartella download...",
+
+  "settings.usageStats": "Statistiche di utilizzo",
+  "settings.dailyRecap": "Mostra il riepilogo all'inizio di ogni giorno",
+  "settings.openUsageStats": "Apri statistiche di utilizzo",
+
+  "settings.moreSettings": "Altre impostazioni",
+  "nav.git.title": "Hosting Git",
+  "nav.git.blurb": "Profilo di hosting, token di accesso e pubblicazione.",
+  "nav.vpn.title": "Connessione automatica VPN",
+  "nav.vpn.blurb": "Attiva un tunnel salvato per connettersi all'avvio.",
+  "nav.remoteHosts.title": "Connessioni remote",
+  "nav.remoteHosts.blurb": "Imposta un percorso standard per host SSH.",
+  "nav.global.title": "App globali",
+  "nav.global.blurb": "Avvii della barra mostrati in ogni progetto.",
+  "nav.filetypes.title": "App per tipo di file",
+  "nav.filetypes.blurb": "Scegli quale app apre ogni tipo di file.",
+  "nav.agents.title": "Gestisci agenti",
+  "nav.agents.blurb": "Installa o aggiorna le CLI degli agenti.",
+  "nav.shortcuts.title": "Scorciatoie da tastiera",
+  "nav.shortcuts.blurb": "Riassegna le scorciatoie di navigazione.",
+  "nav.archive.title": "Progetti archiviati",
+  "nav.archive.blurb": "Ripristina o elimina definitivamente i progetti archiviati.",
+  "nav.scaffoldRepair.title": "Ripara struttura del progetto",
+  "nav.scaffoldRepair.blurb": "Rigenera i file di struttura mancanti.",
+  "nav.help.title": "Guida alle funzioni",
+  "nav.help.blurb": "Glossario completo delle funzioni di Eldrun.",
+};
+
+const TRANSLATIONS: Record<Language, Dict> = { en, de, es, fr, it };
+
+const LANG_CACHE_KEY = "eldrun-lang";
+
+function cachedLang(): Language {
+  try {
+    return normalizeLang(localStorage.getItem(LANG_CACHE_KEY));
+  } catch {
+    return "en";
+  }
+}
+
+interface I18nStore {
+  lang: Language;
+  /** Set the live language WITHOUT persisting (persistence rides settings.json).
+   *  Every `useT()` subscriber re-renders instantly. */
+  setLangLocal: (lang: Language) => void;
+}
+
+export const useI18nStore = create<I18nStore>((set) => ({
+  lang: cachedLang(),
+  setLangLocal: (lang) => set({ lang }),
+}));
+
+/** Apply a language app-wide: flips the reactive store and caches it so the next
+ *  launch paints this language before settings finish loading. Mirrors
+ *  `applyTheme` in `stores/settings`. */
+export function applyLanguage(value: string | null | undefined) {
+  const lang = normalizeLang(value);
+  useI18nStore.getState().setLangLocal(lang);
+  try {
+    localStorage.setItem(LANG_CACHE_KEY, lang);
+  } catch {
+    // localStorage unavailable — the switch still works this session.
+  }
+}
+
+/** Look up a key in `lang`, falling back to English then the raw key. `params`
+ *  substitutes `{name}` placeholders. */
+export function translate(
+  lang: Language,
+  key: TranslationKey,
+  params?: Record<string, string | number>,
+): string {
+  const raw = TRANSLATIONS[lang]?.[key] ?? en[key] ?? key;
+  if (!params) return raw;
+  return raw.replace(/\{(\w+)\}/g, (m, name) =>
+    name in params ? String(params[name]) : m,
+  );
+}
+
+/** The translator hook: `const t = useT(); t("settings.title")`. Re-renders the
+ *  component whenever the language changes, so switching is live. */
+export function useT() {
+  const lang = useI18nStore((s) => s.lang);
+  return useMemo(
+    () =>
+      (key: TranslationKey, params?: Record<string, string | number>) =>
+        translate(lang, key, params),
+    [lang],
+  );
+}
diff --git a/src/lib/lessons.ts b/src/lib/lessons.ts
index 1f8640e..3060577 100644
--- a/src/lib/lessons.ts
+++ b/src/lib/lessons.ts
@@ -160,14 +160,14 @@ export const LESSONS: Lesson[] = [
         anchor: null,
         placement: "bottom",
         title: "Pick what to open",
-        body: "The menu groups your choices: an Agents section (Claude, Codex, Gemini and any other installed CLIs), a Local Model section, plus Shell and Files.",
+        body: "The menu groups your choices: an Agents section (Claude, Codex, Gemini and any other installed CLIs), a Local Model section (your set on-device model), Shell and Files, a Monitoring section (Disk Usage, Network Traffic), and Calendar.",
       },
       {
         id: "shell-files",
         anchor: null,
         placement: "bottom",
-        title: "Shell & Files",
-        body: "Choose Shell for a plain terminal in the project folder, or Files for an in-app file browser. The new tab opens focused in this subwindow.",
+        title: "Shell, Files & more",
+        body: "Choose Shell for a plain terminal in the project folder, or Files for an in-app file browser. The same menu also opens a Disk Usage or Network Traffic monitor and a Calendar. The new tab opens focused in this subwindow.",
       },
       {
         id: "rename-close",
@@ -212,7 +212,7 @@ export const LESSONS: Lesson[] = [
         anchor: null,
         placement: "bottom",
         title: "It opens in-app",
-        body: "PDFs, images, markdown, code, notebooks, tables, diffs, audio/video, and TeX render in Eldrun's native viewer — no external app. The built-in viewer wins whenever one applies.",
+        body: "PDFs, images (and GIFs), markdown, code, notebooks, YAML/JSON, tables and spreadsheets, diffs, audio/video, and TeX render in Eldrun's native viewer — no external app. The built-in viewer wins whenever one applies.",
       },
       {
         id: "default-app",
@@ -281,6 +281,251 @@ export const LESSONS: Lesson[] = [
       },
     ],
   },
+  {
+    id: "yaml-viewer",
+    category: "Basics",
+    title: "Edit YAML & JSON visually",
+    blurb: "Open a config file as editable cards or a tree — comments and formatting survive every edit.",
+    steps: [
+      {
+        id: "open-yaml",
+        anchor: null,
+        placement: "bottom",
+        title: "Open a .yaml, .yml, or .json file",
+        body: "Double-click any YAML or JSON file in the tree. Instead of raw text, it opens in a structured viewer that understands the file's shape — while still being the exact same file underneath.",
+      },
+      {
+        id: "three-views",
+        anchor: null,
+        placement: "bottom",
+        title: "Cards, Tree, or Source",
+        body: "The toolbar offers three views of the same file. Cards (the default) shows one level of the structure at a time as navigable cards; Tree shows the whole thing as nested, indented rows; Source is the raw text. Switch freely — they're three windows onto one document.",
+      },
+      {
+        id: "drill-cards",
+        anchor: null,
+        placement: "bottom",
+        title: "Drill through Cards",
+        body: "In Cards, each card shows its own scalar fields; click a card's title (or its \"N groups\" footer) to open it and reveal its nested collections as the next level down. A breadcrumb tracks where you are, and the current level's siblings let you step sideways without going up first.",
+      },
+      {
+        id: "edit-safely",
+        anchor: null,
+        placement: "bottom",
+        title: "Edits keep your comments",
+        body: "Change a value, add or delete a field, or drag a card's grip to reorder among its siblings — every action splices just that span of text, so your # comments, quoting style, and untouched lines stay byte-for-byte. It's an ordinary dirty/undo/save edit, and a comment travels with the key it describes.",
+      },
+      {
+        id: "copy-paste",
+        anchor: null,
+        placement: "bottom",
+        title: "Copy entries around",
+        body: "Each entry has a copy button feeding an app-wide buffer; a click-placed paste cursor drops it back in — but only where it fits (a mapping entry into a map, an item into a list), so a paste can never tear the file. Anything the viewer can't safely rewrite is shown read-only, never mangled.",
+      },
+    ],
+  },
+  {
+    id: "pdf-viewer",
+    category: "Basics",
+    title: "Read and reshape PDFs",
+    blurb: "Jump by chapter, then reorder, rotate, delete, and merge pages — nothing is written until you save.",
+    steps: [
+      {
+        id: "open-pdf",
+        anchor: null,
+        placement: "bottom",
+        title: "Open a PDF in-app",
+        body: "Double-click a PDF and it renders in Eldrun's own viewer — no external app — with a zoom, find, and print toolbar along the top and a thumbnail page rail down the side.",
+      },
+      {
+        id: "contents",
+        anchor: null,
+        placement: "bottom",
+        title: "The Contents sidebar",
+        body: "Click the ☰ at the far left of the toolbar to open Contents: the document's chapters and bookmarks. If a PDF has no embedded outline, Eldrun infers a heading tree from the text's typography instead. Click any entry to jump straight there.",
+      },
+      {
+        id: "page-tools",
+        anchor: null,
+        placement: "bottom",
+        title: "Rearrange pages",
+        body: "In the page rail you can drag pages to reorder them, shift-select a range, rotate, delete, or duplicate — and even pull pages between two open PDFs. The viewer shows an arrangement, not the file, so these are just moves you're staging.",
+      },
+      {
+        id: "save-pdf",
+        anchor: null,
+        placement: "bottom",
+        title: "Save writes the new file",
+        body: "Nothing touches the PDF on disk until you Save — only then is the rearranged document written out. Until then, undo/redo covers every page move, exactly like editing text.",
+      },
+      {
+        id: "synctex",
+        anchor: null,
+        placement: "bottom",
+        title: "TeX authors: SyncTeX",
+        body: "For a PDF built from LaTeX, the viewer supports SyncTeX both ways — click in the PDF to jump to the source line, and jump from the source to the page. Find and print work as you'd expect from the toolbar.",
+      },
+    ],
+  },
+  {
+    id: "run-python",
+    category: "Basics",
+    title: "Run and debug Python",
+    blurb: "Run or debug a .py file straight from the viewer — breakpoints, pdb, and go-to-definition included.",
+    steps: [
+      {
+        id: "open-py",
+        anchor: null,
+        placement: "bottom",
+        title: "Open a Python file",
+        body: "Open any .py file in the viewer. A small run bar appears with Run file and Debug file — no launch config to write.",
+      },
+      {
+        id: "run-file",
+        anchor: null,
+        placement: "bottom",
+        title: "Run file",
+        body: "Click Run file and Eldrun opens a terminal tab that runs it. Because it's a real tab, it inherits the project's locality for free — a remote SSH host or a Docker container — and stays fully interactive: input(), Ctrl+C, and output that survives after the process exits.",
+      },
+      {
+        id: "breakpoints",
+        anchor: null,
+        placement: "bottom",
+        title: "Set breakpoints in the gutter",
+        body: "Click the line-number gutter to drop a breakpoint. It snaps to the next executable line (pdb refuses blank or comment lines), and if you type above it the marker re-points so it always sits on the right statement.",
+      },
+      {
+        id: "debug-file",
+        anchor: null,
+        placement: "bottom",
+        title: "Debug file",
+        body: "Debug file launches the same terminal tab under pdb, pre-loaded with your gutter breakpoints and run to the first one. Step, inspect, and continue right there in the tab. (Debugging is behind the experimental flag — on by default in debug mode.)",
+      },
+      {
+        id: "go-to-def",
+        anchor: null,
+        placement: "bottom",
+        title: "Jump to a definition",
+        body: "Ctrl+click a name to go to where it's defined — Eldrun walks the import graph (relative imports, aliases, __init__ re-exports, src-layout). Only names it can actually follow are underlined, so the affordance never lies.",
+      },
+    ],
+  },
+  {
+    id: "file-search",
+    category: "Basics",
+    title: "Search inside your project",
+    blurb: "Find files by name or search their contents from the tree — every hit jumps and opens.",
+    steps: [
+      {
+        id: "reveal-tree",
+        anchor: '[data-hint-anchor="file-tree-edge"]',
+        placement: "left",
+        title: "Open the file tree",
+        body: "Push your cursor to the right edge of the window to slide out the file tree. Its search box sits at the top, above the listing.",
+        prepare: revealFilePanel,
+      },
+      {
+        id: "name-vs-content",
+        anchor: null,
+        placement: "bottom",
+        title: "Name or Content",
+        body: "Type in the box and pick a mode. Name matches a case-insensitive substring of file paths (basename hits rank first — deliberately not a fuzzy match that lights up everything). Content searches the actual lines inside your files, the same engine as the Search view.",
+      },
+      {
+        id: "jump-and-open",
+        anchor: null,
+        placement: "bottom",
+        title: "Every hit jumps and opens",
+        body: "Click a result to reveal and select it in the tree; a content hit also opens the file at the matched line. So search doubles as fast navigation, not just a lookup.",
+      },
+      {
+        id: "scope-root",
+        anchor: null,
+        placement: "bottom",
+        title: "This folder, or the whole project",
+        body: "By default the search is confined to the folder you're browsing. Flip the Root toggle to search the entire project instead. (It's local-source only — both modes walk the canonical local path.)",
+      },
+    ],
+  },
+  {
+    id: "calendar",
+    category: "Basics",
+    title: "Plan with the calendar",
+    blurb: "Open a calendar tab — drag to create events, set reminders, and import/export .ics.",
+    steps: [
+      {
+        id: "open-calendar",
+        anchor: '[data-hint-anchor="tab-add"]',
+        placement: "bottom",
+        title: "Open a Calendar tab",
+        body: "Click the + on any tab bar and pick Calendar (marked ◆). It opens a full calendar in that subwindow. Your calendars and events are global — one store shared across every project and box.",
+      },
+      {
+        id: "views",
+        anchor: null,
+        placement: "bottom",
+        title: "Day, Week, Month, Agenda, Tasks",
+        body: "The toolbar switches views: Day and Week hour grids, a Month (or multi-week) grid with spanning bars, a flat Agenda list of what's upcoming, and Tasks — your to-dos (VTODO). A search box and a mini-month sidebar help you jump around.",
+      },
+      {
+        id: "drag-create",
+        anchor: null,
+        placement: "bottom",
+        title: "Drag to create and adjust",
+        body: "In a Day/Week grid, drag across the hours to create an event, then drag its body to move it or its edge to resize. A now-line marks the current time. Everything is direct manipulation — no dialog needed to block out time.",
+      },
+      {
+        id: "event-editor",
+        anchor: null,
+        placement: "bottom",
+        title: "Repeats, reminders, categories",
+        body: "Double-click an event for the editor: set a recurrence rule, add reminders (which fire an OS notification and an in-app popup you can snooze), and tag it with a category color. Editing a repeating event asks whether you mean this occurrence or all of them.",
+      },
+      {
+        id: "ics",
+        anchor: null,
+        placement: "bottom",
+        title: "Import & export .ics",
+        body: "The toolbar imports and exports iCalendar (.ics) — VEVENT, VTODO, VALARM and RRULE all round-trip — so you can pull in an existing calendar or hand one off to another app.",
+      },
+    ],
+  },
+  {
+    id: "usage-recap",
+    category: "Basics",
+    title: "See your usage recap",
+    blurb: "A private daily summary: agents used, prompts asked, file churn, commits, and time per project.",
+    steps: [
+      {
+        id: "what-it-is",
+        anchor: ".project-pills-region",
+        placement: "top",
+        title: "A recap of your day",
+        body: "Eldrun keeps a rolling, local-only tally of how you worked: which agents and local models you used, how many prompts and shell commands you ran, files created/modified/deleted, tabs opened, plus commits and time per project pulled from their sources.",
+      },
+      {
+        id: "when-it-opens",
+        anchor: null,
+        placement: "bottom",
+        title: "It pops up once a day",
+        body: "By default the recap for the day just finished appears on your first launch each day. It's a summary popup — you can read it and dismiss it. Everything it shows was counted locally; nothing leaves your machine.",
+      },
+      {
+        id: "windows",
+        anchor: null,
+        placement: "bottom",
+        title: "Day, week, month",
+        body: "Inside the recap you can switch between This day, This week, and This month to zoom out from a single day's activity to longer trends across all your projects.",
+      },
+      {
+        id: "open-anytime",
+        anchor: '[data-hint-anchor="settings"]',
+        placement: "bottom",
+        title: "Open it any time — or turn it off",
+        body: "Don't want to wait for tomorrow's launch? Open ⚙ Settings → Usage stats → \"Open usage stats\". The same panel has \"Show the recap at the start of each day\" — turning it off stops the popup, not the counting.",
+      },
+    ],
+  },
 
   // ── Agents & models ─────────────────────────────────────────────────────
   {
@@ -467,43 +712,43 @@ export const LESSONS: Lesson[] = [
   {
     id: "docker-sandbox",
     category: "Advanced",
-    title: "Run agents in a Docker sandbox",
-    blurb: "Confine a project's agent tabs to an ephemeral container that mounts only that project.",
+    title: "Run a project in a container",
+    blurb: "Confine a whole project's shells and agents to one closed Docker container — the folder stays on the host.",
     steps: [
       {
         id: "why-sandbox",
         anchor: ".project-pills-region",
         placement: "top",
-        title: "Box the agent in",
-        body: "By default agents run on your host with your full filesystem in reach. A Docker sandbox confines a project's agent tabs to an ephemeral, capability-dropped container that mounts only that project's directory plus the agent's own login/session files — so a misbehaving agent can't wander into unrelated host files. (The agent's auth dirs are shared so login and resume keep working; the hook script is read-only and its config is a throwaway per-tab copy, so the sandbox can't make code run on the host.)",
+        title: "Box the whole project in",
+        body: "By default a project's tabs run on your host with your full filesystem in reach. Turn on the container and every shell and agent tab of that project runs inside one closed, capability-dropped Docker container instead — so a misbehaving command or agent can't wander into unrelated host files. The project folder itself stays on the host, bind-mounted into the container at its exact same absolute path.",
       },
       {
         id: "open-pill-menu",
         anchor: ".project-pills-region",
         placement: "top",
         title: "Right-click the project pill",
-        body: "The toggle is per-project. Right-click the pill of the project you want to sandbox to open its context menu. (It's offered for local projects only — remote SSH projects run their agents on the host — and needs Linux or macOS; on Windows sandboxed agent tabs refuse to launch rather than silently run unconfined.)",
+        body: "The toggle is per-project. Right-click the pill of the project you want to contain to open its context menu. (Offered for local projects only, and hidden on Windows.)",
       },
       {
         id: "flip-toggle",
         anchor: null,
         placement: "bottom",
-        title: "Enable the sandbox",
-        body: "Click \"Run agents in Docker sandbox\". A ✓ appears beside it once it's on; click again to turn it back off. From now on, every new agent tab in this project launches inside a fresh container instead of on the host.",
+        title: "\"Run this project in a container\"",
+        body: "Click \"Run this project in a container\"; a ✓ appears once it's on, and clicking again turns it back off. Flipping it respawns every live tab into (or out of) the container — the pill warns first if that would drop a non-resumable agent conversation. Because the folder never moves, the file tree, git, viewers, and agent resume all keep working across the flip.",
       },
       {
-        id: "build-image",
+        id: "image",
         anchor: null,
         placement: "bottom",
-        title: "Provide the image",
-        body: "The sandbox needs Docker installed and the image eldrun-agent-sandbox:latest present. Build it once with `docker build -t eldrun-agent-sandbox:latest docker/agent-sandbox`. If Docker or the image is missing, the agent tab opens with a clear error instead of silently running on the host.",
+        title: "The image (auto-adopted or built)",
+        body: "The first time you enable it, Eldrun adopts an in-repo Dockerfile or devcontainer image if there is one. If the image is missing, it opens a one-click build tab rather than failing silently. \"Container settings…\" in the same menu tunes the image, network, memory/CPU caps, and read-only rootfs — and those knobs survive turning the container off and on.",
       },
       {
-        id: "what-mounts",
+        id: "lifetime",
         anchor: null,
         placement: "bottom",
-        title: "What the container sees",
-        body: "Each agent tab is its own `docker run --rm` container: it mounts the project folder plus the agent state it needs to resume (~/.claude, ~/.codex, Eldrun's state dir) and nothing else. Close the tab and the container is gone. Shell and Files tabs still run on the host as usual.",
+        title: "One container, project-lived",
+        body: "There's a single container per project (named eldrun-<id>), created when the project activates and removed when it deactivates — unless tabs are still live in it — then swept at startup. Shells and agents docker exec into it; only a local-agent tab deliberately stays on the host. Needs Docker installed.",
       },
     ],
   },
@@ -614,6 +859,42 @@ export const LESSONS: Lesson[] = [
       },
     ],
   },
+  {
+    id: "vpn-tunnel",
+    category: "Advanced",
+    title: "Control the VPN tunnel",
+    blurb: "Bring an OpenVPN tunnel up or down from the header — with or without a project behind it.",
+    steps: [
+      {
+        id: "machine-wide",
+        anchor: ".vpn-indicator-btn",
+        placement: "bottom",
+        title: "The OpenVPN indicator",
+        body: "The header's OpenVPN button controls a machine-wide tunnel. It's not tied to any project: a config that pushes redirect-gateway reroutes your whole computer — browser included — for as long as it's up. So it lives here, always visible, not buried in one project.",
+      },
+      {
+        id: "add-config",
+        anchor: null,
+        placement: "bottom",
+        title: "Add a .ovpn config",
+        body: "Open the menu and pick your .ovpn file — Eldrun copies it into its own config store so the tunnel can be re-established later. Every stored config is then listed here, ready to connect.",
+      },
+      {
+        id: "up-down",
+        anchor: null,
+        placement: "bottom",
+        title: "Connect or disconnect anytime",
+        body: "Click a config to bring its tunnel up or down directly from the header — no project required. While one tunnel is up, project-scoped VPN sections collapse to a \"tunnel already up\" notice pointing back here, because a second tunnel would be a second claim on one machine's routing.",
+      },
+      {
+        id: "auto-launch",
+        anchor: null,
+        placement: "bottom",
+        title: "Connect on launch",
+        body: "Toggle \"Connect on launch\" on a config to arm the tunnel at startup. It's exclusive — arming one disarms any other — and it never prompts: it's only offered when your saved credentials make the connect silent (tick \"Save passphrase\" when you first connect to enable it).",
+      },
+    ],
+  },
   {
     id: "extend-to-remote",
     category: "Advanced",
@@ -657,4 +938,168 @@ export const LESSONS: Lesson[] = [
       },
     ],
   },
+  {
+    id: "compute-machines",
+    category: "Advanced",
+    title: "Add compute machines to a project",
+    blurb: "Reach more than one host from a remote project — a shared cluster node or a synced experiment box.",
+    steps: [
+      {
+        id: "why-machines",
+        anchor: ".project-pills-region",
+        placement: "top",
+        title: "One project, many machines",
+        body: "A remote project's primary host owns its files and git. But you can attach extra compute machines — a second GPU box, an HPC compute node — and run tabs on any of them. Each machine gets its own connection lamp and its own tab locality.",
+      },
+      {
+        id: "open-hub",
+        anchor: ".project-pills-region",
+        placement: "top",
+        title: "Open \"Remote machines…\"",
+        body: "Right-click the project pill → Runtime → \"Remote machines…\" (or click any of the pill's connection lamps). The hub lists the primary host first, then every worker machine, plus an \"Add a machine\" form.",
+      },
+      {
+        id: "shared-vs-synced",
+        anchor: null,
+        placement: "bottom",
+        title: "Shared folder, or a synced copy",
+        body: "Add a machine and choose its kind. By default it shares the primary's project folder over a shared filesystem (an HPC node on a shared home) — Eldrun copies nothing and runs no git on it. Untick \"Sync a copy\" for that; leave it ticked to instead push a one-way, read-only copy of your code to a standalone box.",
+      },
+      {
+        id: "sync-and-pull",
+        anchor: null,
+        placement: "bottom",
+        title: "Sync code, pull outputs",
+        body: "For a synced (copy) worker, \"Sync code now\" pushes your latest tracked files to it, and \"Pull outputs…\" brings its experiment results back — the one worker→local path, always size-confirmed. A shared-folder worker needs neither: its outputs already sit in the primary's folder.",
+      },
+      {
+        id: "global-machines",
+        anchor: ".machines-indicator-btn",
+        placement: "bottom",
+        title: "Or connect a global machine once",
+        body: "The header's Machines indicator lets you authenticate a host once, project-independently, then drag it onto any project (its pill, or its open Remote machines window) to add it there as a shared-folder worker. Removing it from a project never disconnects it here.",
+      },
+      {
+        id: "run-on-host",
+        anchor: null,
+        placement: "bottom",
+        title: "Run a tab on a chosen machine",
+        body: "Once a machine is attached, a tab can run on it — its shells and agents land on that host. That's how one project spans a login node for editing and a compute node for the heavy run.",
+      },
+    ],
+  },
+  {
+    id: "persistent-sessions",
+    category: "Advanced",
+    title: "Keep long runs alive with sessions",
+    blurb: "Shell tabs run inside tmux, so a run survives an SSH drop, a laptop sleep, or Eldrun quitting.",
+    steps: [
+      {
+        id: "why-sessions",
+        anchor: ".project-pills-region",
+        placement: "top",
+        title: "Runs that outlive the tab",
+        body: "A shell or script tab runs inside a tmux session, decoupled from the connection. On a remote host that means a long run survives an SSH drop, a laptop sleep, a VPN drop, or Eldrun quitting; locally it even survives an Eldrun crash. It's ON by default — nothing to enable.",
+      },
+      {
+        id: "which-tabs",
+        anchor: null,
+        placement: "bottom",
+        title: "Which tabs are covered",
+        body: "Shell tabs (a Python run opens one too) get a session. Agent tabs don't — they resume through their own mechanism — and the root scope never does. When you relaunch Eldrun, a covered tab reattaches to its still-running session instead of starting over.",
+      },
+      {
+        id: "close-detaches",
+        anchor: null,
+        placement: "bottom",
+        title: "Closing a tab detaches it",
+        body: "Closing a tab is non-destructive: it kills only the SSH/PTY client, so the session lives on under its tmux daemon and stays reattachable. A quit, disconnect, crash, or respawn all leave the session running too — so a host can hold runs no tab currently points at.",
+      },
+      {
+        id: "sessions-view",
+        anchor: null,
+        placement: "bottom",
+        title: "The Sessions view (☰)",
+        body: "Those orphaned runs are discoverable: the ☰ toggle in the file panel opens the Sessions view, which aggregates every live session across the primary and every connected worker, each row host-tagged. Click a row to attach a tab to it.",
+      },
+      {
+        id: "kill-rename",
+        anchor: null,
+        placement: "bottom",
+        title: "Kill or rename a session",
+        body: "The only way to actually terminate a session is its × (kill) in the Sessions view — closing tabs never does. Each row also has Rename, which updates the owning tab's persisted name. To opt a whole project out, use the pill's \"Persistent sessions (tmux)\" toggle.",
+      },
+    ],
+  },
+  {
+    id: "hpc-pipeline",
+    category: "Advanced",
+    title: "Run a job on an HPC cluster",
+    blurb: "The guided SLURM pipeline: log in, create the project, upload data, submit a batch job, and watch it.",
+    steps: [
+      {
+        id: "why-hpc",
+        anchor: ".project-pills-region",
+        placement: "top",
+        title: "From login node to compute node",
+        body: "An HPC cluster forbids real work on the login node — you describe a job in a batch script and the SLURM scheduler runs it on a compute node. The HPC pipeline is a 5-step wizard that walks the whole path: log in over SSH, create a remote project, upload inputs, submit the job, and watch it queue, run, and finish.",
+      },
+      {
+        id: "open-add-menu",
+        anchor: '[data-hint-anchor="add-project"]',
+        placement: "bottom",
+        title: "Open the + menu",
+        body: "Click the + button beside your project pills, then pick \"HPC pipeline…\". The wizard opens on step 1 (Login) with the remote toggle already forced on — an HPC project is remote by definition.",
+      },
+      {
+        id: "step-login",
+        anchor: null,
+        placement: "bottom",
+        title: "1. Log in to the cluster",
+        body: "Type the SSH address as user@host (add :port if it isn't 22). If the cluster is only reachable through your institution's VPN, tick \"Connect via OpenVPN\" and bring the tunnel up first. Connect, then browse to the parent folder on the host where the project should live — pick a place with quota/space, not a tiny $HOME — and click \"Use this folder\".",
+      },
+      {
+        id: "step-project",
+        anchor: null,
+        placement: "bottom",
+        title: "2. Create the project",
+        body: "Give it a name and pick a Local location for its synced mirror — Eldrun keeps a local git-lockstep copy of the tracked files there while the real tree lives on the host. Click \"Create project\". Because it's git-backed, lockstep turns on automatically: a saved edit to a tracked file only reaches the host once you commit it.",
+      },
+      {
+        id: "step-data",
+        anchor: null,
+        placement: "bottom",
+        title: "3. Load data (optional)",
+        body: "\"Add files…\" streams a few local input files straight to the project on the host over SFTP. For large trees, skip this and mark the folder auto-sync in the file panel later instead. Hit Next (or Skip).",
+      },
+      {
+        id: "step-run-account",
+        anchor: null,
+        placement: "bottom",
+        title: "4. Set your account and resources",
+        body: "A starter job.slurm is prepared; edit its #SBATCH directives in the grid. Set Account to your working group's allocation — most clusters reject a job with no account — and set a real Partition (the <partition> placeholder is only a hint). Adjust Time, Nodes, Tasks, CPUs, Memory and GPUs to your job.",
+      },
+      {
+        id: "step-run-submit",
+        anchor: null,
+        placement: "bottom",
+        title: "4. Submit the job",
+        body: "Also fix the script body: the starter's `module load Python` is a placeholder — use your cluster's real module name (run `module avail` to find it). Click \"⏫ Submit job\". Eldrun writes the script to the host and runs sbatch on a compute node, then opens a log tab that tails the output.",
+      },
+      {
+        id: "step-watch",
+        anchor: null,
+        placement: "bottom",
+        title: "5. Watch it run",
+        body: "The log tab is already following the job's output (it waits out the queue). Open the Jobs view — the ⚙ toggle in the file panel — to see the job queue, run, and finish, with per-job Watch and Cancel. That's the whole pipeline; you can re-run it any time from the + menu.",
+      },
+      {
+        id: "without-wizard",
+        anchor: null,
+        placement: "bottom",
+        title: "Beyond the wizard",
+        body: "On any remote project that has sbatch, opening a file with a #SBATCH line shows a SLURM bar in the viewer: Submit job, a Variables form for the directives (including Account), and \"⚡ Interactive session…\" to land an srun --pty shell on a compute node. The Jobs view (⚙ in the file panel) tracks everything you've launched.",
+      },
+    ],
+  },
 ];
diff --git a/src/lib/machineSync.ts b/src/lib/machineSync.ts
new file mode 100644
index 0000000..30c86cb
--- /dev/null
+++ b/src/lib/machineSync.ts
@@ -0,0 +1,167 @@
+import { invoke } from "@tauri-apps/api/core";
+import { useProjectsStore } from "../stores/projects";
+import { useGlobalMachinesStore } from "../stores/globalMachines";
+import {
+  useRemoteStatusStore,
+  hostStateOf,
+  PRIMARY_HOST,
+  type ConnState,
+} from "../stores/remoteStatus";
+
+/**
+ * Keep a **global machine** (`stores/globalMachines`, header "Machines") and the
+ * **project host** it also is (a project's primary `remote` or a `compute_hosts`
+ * worker) in step, so connecting/disconnecting one reflects on the other.
+ *
+ * The two are never linked by id — a global machine dropped onto a project is
+ * copied by *value* — so the only bridge is the **SSH target** (`user@host:port`).
+ * `sameTarget` is that bridge, and the whole module keys off it.
+ *
+ * The physical connection really *is* shared (one OpenSSH ControlMaster per host
+ * target), so "sync" is mostly reconciling the two separate status stores rather
+ * than opening a second socket. Two rules keep it from looping or lying:
+ *
+ *  - **Global → project** is driven *imperatively* from the global store's
+ *    explicit connect/disconnect actions (`syncGlobalConnected`/`syncGlobalDisconnected`)
+ *    — never from `probeAll`, whose "connected" only means *reachable*, not that a
+ *    pooled session is open. For the **active** project it opens/tears the real
+ *    pool; for a loaded-but-inactive project it only mirrors the lamp (the pool
+ *    opens on activation as always). This is the "drive loaded projects" contract.
+ *  - **Project → global** is a *subscription* (`initMachineSync`) that only ever
+ *    *upgrades* a matching machine's lamp to `connected` — a project deactivating
+ *    (which clears its lamps) must never knock an independently-connected machine
+ *    offline, so `off` is deliberately not propagated upward.
+ *
+ * No loop: the global store's `setStatus` never touches `remoteStatus`, so the
+ * subscription can't re-enter the imperative path.
+ */
+
+export interface Target {
+  user?: string;
+  host: string;
+  port?: number;
+}
+
+function norm(t: Target): { user: string | undefined; host: string; port: number } {
+  return {
+    user: t.user && t.user.trim() ? t.user.trim() : undefined,
+    host: t.host.trim().toLowerCase(),
+    // A host with no explicit port and one pinned to 22 are the same machine.
+    port: t.port ?? 22,
+  };
+}
+
+/** Whether two SSH targets are the same machine+login (host case-insensitive,
+ *  default port 22, empty user ≡ absent). A different login on the same host is a
+ *  *different* connection, so `user` is matched strictly. */
+export function sameTarget(a: Target, b: Target): boolean {
+  const x = norm(a);
+  const y = norm(b);
+  return x.host === y.host && x.port === y.port && x.user === y.user;
+}
+
+/** The canonical string form of an SSH target — `sameTarget` as a map key, so a
+ *  store can index by machine identity without an id. Two targets share a key iff
+ *  `sameTarget` holds for them, which is what lets a global machine and the
+ *  project host that *is* it (copied by value, different ids) share one entry. */
+export function targetKey(t: Target): string {
+  const n = norm(t);
+  return `${n.user ?? ""}@${n.host}:${n.port}`;
+}
+
+interface ProjectHostRef {
+  projectId: string;
+  hostId: string;
+  target: Target;
+}
+
+/** Every project host (primary + workers) whose SSH target matches `target`. */
+function projectHostsMatching(target: Target): ProjectHostRef[] {
+  const { projects } = useProjectsStore.getState();
+  const out: ProjectHostRef[] = [];
+  for (const p of projects) {
+    if (p.remote && sameTarget(p.remote, target)) {
+      out.push({ projectId: p.id, hostId: PRIMARY_HOST, target: p.remote });
+    }
+    for (const h of p.compute_hosts ?? []) {
+      if (sameTarget(h, target)) out.push({ projectId: p.id, hostId: h.id, target: h });
+    }
+  }
+  return out;
+}
+
+function remoteConnectArgs(ref: ProjectHostRef): Record<string, unknown> {
+  return ref.hostId === PRIMARY_HOST
+    ? { projectId: ref.projectId, password: null }
+    : { projectId: ref.projectId, hostId: ref.hostId, password: null };
+}
+
+/** A global machine connected — reflect it onto every project that also holds
+ *  this host. The active project's pool is actually opened; inactive projects
+ *  only get their lamp mirrored (their pool opens on activation regardless). */
+export function syncGlobalConnected(target: Target): void {
+  const { activeId } = useProjectsStore.getState();
+  for (const ref of projectHostsMatching(target)) {
+    const status = useRemoteStatusStore.getState();
+    const cur = hostStateOf(status, ref.projectId, ref.hostId).ssh;
+    if (cur === "connected" || cur === "connecting") continue;
+    if (ref.projectId === activeId) {
+      status.setSsh(ref.projectId, "connecting", ref.hostId);
+      void invoke("remote_connect", remoteConnectArgs(ref))
+        .then(() =>
+          useRemoteStatusStore.getState().setSsh(ref.projectId, "connected", ref.hostId),
+        )
+        .catch(() =>
+          useRemoteStatusStore.getState().setSsh(ref.projectId, "error", ref.hostId),
+        );
+    } else {
+      status.setSsh(ref.projectId, "connected", ref.hostId);
+    }
+  }
+}
+
+/** A global machine actively disconnected (jobs ended, master closed) — tear the
+ *  matching pool on the active project and drop every matching lamp to `off`. */
+export function syncGlobalDisconnected(target: Target): void {
+  const { activeId } = useProjectsStore.getState();
+  for (const ref of projectHostsMatching(target)) {
+    if (ref.projectId === activeId) {
+      const t = ref.target;
+      void invoke("remote_kill_all_jobs", { user: t.user, host: t.host, port: t.port }).catch(
+        () => {},
+      );
+      void invoke("remote_disconnect", {
+        projectId: ref.projectId,
+        hostId: ref.hostId,
+      }).catch(() => {});
+    }
+    useRemoteStatusStore.getState().setSsh(ref.projectId, "off", ref.hostId);
+  }
+}
+
+/** Upgrade any global machine to `connected` when a project host with the same
+ *  target is connected. Never downgrades — a machine's lamp is its own, and a
+ *  project deactivating must not knock it offline. */
+function reconcileGlobalsFromProjects(): void {
+  const gm = useGlobalMachinesStore.getState();
+  const status = useRemoteStatusStore.getState();
+  for (const m of gm.machines) {
+    const cur: ConnState = gm.status[m.id] ?? "off";
+    if (cur === "connected") continue;
+    const anyConnected = projectHostsMatching(m).some(
+      (ref) => hostStateOf(status, ref.projectId, ref.hostId).ssh === "connected",
+    );
+    if (anyConnected) gm.setStatus(m.id, "connected");
+  }
+}
+
+let inited = false;
+
+/** Install the project → global-machine lamp mirror. Idempotent; call once at
+ *  startup (`App`). The global → project direction is driven imperatively from
+ *  the global store's connect/disconnect actions, so it needs no subscription. */
+export function initMachineSync(): void {
+  if (inited) return;
+  inited = true;
+  useRemoteStatusStore.subscribe(() => reconcileGlobalsFromProjects());
+}
diff --git a/src/lib/pythonRun.ts b/src/lib/pythonRun.ts
new file mode 100644
index 0000000..285bc69
--- /dev/null
+++ b/src/lib/pythonRun.ts
@@ -0,0 +1,304 @@
+/**
+ * Run and debug a Python file from the native code viewer (#py).
+ *
+ * Both buttons do the same structural thing: open a **terminal tab** in the
+ * project and type a command into it. That is deliberate, and it is what makes
+ * the feature work everywhere Eldrun already works, for free — a shell tab on a
+ * remote (SSH) project runs on the host, and one on a containerised project runs
+ * inside the container, because the tab is the thing that carries locality and
+ * sandboxing. A bespoke "run" IPC path would have to re-derive both and would get
+ * them wrong.
+ *
+ * It also means the process is a *visible, interactive terminal*: a script that
+ * prompts for input works, Ctrl+C works, and the shell survives the program's
+ * exit so the output (and the traceback) stays on screen and ↑ re-runs it. This
+ * is the same one-click-open-a-tab-and-run policy as `installCommand.ts`.
+ *
+ * Debugging is pdb, driven from the gutter's breakpoints: they are handed to it
+ * as `-c "b file:N"` commands, followed by `-c continue` so the session runs
+ * straight to the first one instead of halting on line 1. With no breakpoints set
+ * we omit the `continue` and let pdb stop at the top of the file, which is the
+ * only sensible reading of "debug this with no breakpoints".
+ */
+
+import { invoke } from "@tauri-apps/api/core";
+import { basename, dirname } from "./paths";
+import { useTabsStore, type TabEntry } from "../stores/tabs";
+import { useProjectsStore } from "../stores/projects";
+import { useRunHostPrefStore, runHostPickerApplies } from "../stores/runHostPref";
+
+/** How a run/debug tab is inserted into the layout. Given the built (keyless)
+ *  tab, place it and return the created entry — or null when it streamed the tab
+ *  elsewhere (a detached popout owns its own tabs), so the caller does nothing.
+ *  The default (no placer) opens in the owning project's focused subwindow; a
+ *  placer is supplied only to stream into a popout. See {@link placeForFocused}. */
+export type PyTabPlacer = (tab: Omit<TabEntry, "key">) => TabEntry | null;
+
+export type PyPlatform = "windows" | "unix";
+
+/** The env vars that mark a terminal tab as a viewer-launched run/debug of a
+ *  specific file. They are real env vars (the process can see them), and they are
+ *  also how a re-run finds the tab it should replace — a tab has no free-form
+ *  metadata, and matching on the label would collide across two `main.py`s in
+ *  different directories. */
+export const PY_TARGET_ENV = "ELDRUN_PY_TARGET";
+export const PY_MODE_ENV = "ELDRUN_PY_MODE";
+
+export type PyRunMode = "run" | "debug";
+
+/** Quote one shell argument. `cmd.exe` (Windows' default shell, via COMSPEC) has
+ *  no single-quote syntax, so the two platforms genuinely differ. */
+export function shellQuote(arg: string, platform: PyPlatform): string {
+  if (platform === "windows") return `"${arg.replace(/"/g, '""')}"`;
+  return `'${arg.replace(/'/g, `'\\''`)}'`;
+}
+
+/** The last-resort interpreter when the backend can't be reached at all. */
+export function systemInterpreter(platform: PyPlatform): string {
+  return platform === "windows" ? "python" : "python3";
+}
+
+/** `<interp> <file> [args]` — the Run button's command line.
+ *
+ * `args` is appended **verbatim** (only trimmed), not shell-quoted: it is a raw
+ * argument string the user typed to be parsed by the host shell, so `main.py`
+ * plus `--epochs 5 "out dir"` runs with two real arguments. The tab is a real
+ * terminal (see the module header), so this is the natural place to type them. */
+export function buildRunCommand(
+  interp: string,
+  file: string,
+  platform: PyPlatform,
+  args?: string,
+): string {
+  const base = `${shellQuote(interp, platform)} ${shellQuote(file, platform)}`;
+  const extra = args?.trim();
+  return extra ? `${base} ${extra}` : base;
+}
+
+/**
+ * The Debug button's command line: pdb, pre-loaded with the gutter's breakpoints.
+ *
+ * `python -m pdb -c "b f.py:12" -c continue f.py` sets the breakpoints before the
+ * script starts and then runs to the first one. Without breakpoints the trailing
+ * `continue` is omitted — otherwise pdb would run the program to completion and
+ * "debug" would be indistinguishable from "run".
+ */
+export function buildDebugCommand(
+  interp: string,
+  file: string,
+  breakpoints: number[],
+  platform: PyPlatform,
+  args?: string,
+): string {
+  const parts = [shellQuote(interp, platform), "-m", "pdb"];
+  const sorted = [...new Set(breakpoints)].sort((a, b) => a - b);
+  for (const line of sorted) {
+    parts.push("-c", shellQuote(`b ${file}:${line}`, platform));
+  }
+  if (sorted.length > 0) parts.push("-c", shellQuote("continue", platform));
+  parts.push(shellQuote(file, platform));
+  // Script arguments follow the file, exactly as `python -m pdb script.py args…`
+  // expects them. Appended verbatim (see buildRunCommand) — pdb hands them to the
+  // debugged program's `sys.argv`.
+  const extra = args?.trim();
+  if (extra) parts.push(extra);
+  return parts.join(" ");
+}
+
+/** One interpreter the project could run — what `python_interpreters` offers the
+ *  picker. `kind` is `venv|poetry|conda|pyenv|active|system`. */
+export interface PyInterpreter {
+  kind: string;
+  path: string;
+  label: string;
+}
+
+/** Every interpreter this project could use (the picker's list). Probes the HOST
+ *  for a remote project — that is the machine the run tab will run on. */
+export function listInterpreters(projectDir: string): Promise<PyInterpreter[]> {
+  return invoke<PyInterpreter[]>("python_interpreters", { projectDir });
+}
+
+/** Pin the project's interpreter (or clear it back to auto-detect with `null`). */
+export function setProjectPython(
+  projectId: string,
+  interpreter: string | null,
+): Promise<string | null> {
+  return invoke<string | null>("set_project_python", { projectId, interpreter });
+}
+
+/**
+ * The interpreter to run with, right now.
+ *
+ * The backend owns the precedence (`commands::python`) — the project's pinned
+ * choice if it has one, else the best auto-detected environment (in-tree venv →
+ * poetry → active `VIRTUAL_ENV`/`CONDA_PREFIX` → pyenv → system). Deliberately not
+ * re-implemented here: two rankings that can disagree is a bug waiting to happen,
+ * and only the backend can see conda/poetry at all.
+ */
+export async function resolveInterpreter(
+  projectId: string | null,
+  projectDir: string,
+  platform: PyPlatform,
+): Promise<string> {
+  try {
+    return await invoke<string>("python_interpreter_for", { projectId, projectDir });
+  } catch {
+    // A disconnected/unreadable project is not a reason to refuse to run: fall
+    // back to the system interpreter and let the terminal report the truth.
+    return systemInterpreter(platform);
+  }
+}
+
+export function currentPlatform(): PyPlatform {
+  return navigator.userAgent.includes("Windows") ? "windows" : "unix";
+}
+
+/** The label a run/debug tab carries. */
+export function pyTabLabel(mode: PyRunMode, file: string): string {
+  return `${mode === "debug" ? "🐞" : "▶"} ${basename(file)}`;
+}
+
+/**
+ * Open a terminal tab running `command` for `file`, replacing the previous
+ * run/debug tab for that same file and mode.
+ *
+ * Replacing rather than reusing is the deliberate choice: re-typing the command
+ * into a *live* tab would send it to whatever is already running there (a pdb
+ * prompt, or a script blocked on input) instead of to a shell. Closing the old
+ * tab kills that PTY, so every run starts from a known-clean process.
+ */
+export function openPythonTab(opts: {
+  mode: PyRunMode;
+  file: string;
+  /** cwd for the tab — the project root, so relative paths and the venv resolve. */
+  projectDir: string;
+  /** The scope owning the tab: the project's id, or "root". Only used by the
+   *  default placement (when no `place` is supplied). */
+  scope: string;
+  command: string;
+  /** Where to insert the tab. Supplied only to stream the run into a detached
+   *  popout; when absent (the normal case) the tab lands in the owning project's
+   *  focused subwindow via `addTabToScope`. See {@link placeForFocused}. */
+  place?: PyTabPlacer;
+}): void {
+  const { mode, file, projectDir, scope, command, place } = opts;
+  const store = useTabsStore.getState();
+
+  const prior = store.tabs.find(
+    (t) =>
+      t.kind === "shell" &&
+      t.env?.[PY_TARGET_ENV] === file &&
+      t.env?.[PY_MODE_ENV] === mode,
+  );
+  if (prior) store.removeTab(prior.key);
+
+  // Which machine to run on: the project's run-host preference (set from the file
+  // viewer's picker), keyed by the owning project. `scope` is the project id for a
+  // project tab ("root" has no pref). Honoured only while the picker applies —
+  // once a worker keeps its own synced code copy the picker is hidden and the run
+  // target is the tab's picked locality, so we ignore any stale pref and omit
+  // `location` (⇒ the shell default, the primary on a remote project).
+  const project = useProjectsStore.getState().projects.find((p) => p.id === scope);
+  const runHost = runHostPickerApplies(project?.compute_hosts)
+    ? useRunHostPrefStore.getState().byProject[scope]
+    : undefined;
+  const tab: Omit<TabEntry, "key"> = {
+    label: pyTabLabel(mode, file),
+    cmd: "", // the host's default shell
+    cwd: projectDir,
+    kind: "shell",
+    env: { [PY_TARGET_ENV]: file, [PY_MODE_ENV]: mode },
+    initialInput: command,
+    runFile: file,
+    ...(runHost ? { location: runHost } : {}),
+  };
+  // A placer OWNS insertion. It returns the created entry for a main-window store
+  // write (which we then activate), or null when it streamed the tab elsewhere (a
+  // detached popout, which owns its own tabs) — in which case there's nothing in
+  // this store to activate. Only with NO placer do we use the default scope group.
+  if (place) {
+    const entry = place(tab);
+    if (entry) useTabsStore.getState().setActive(entry.key);
+    return;
+  }
+  const entry = useTabsStore.getState().addTabToScope(scope, tab);
+  useTabsStore.getState().setActive(entry.key);
+}
+
+/** Run `file` in a fresh terminal tab. */
+export async function runPythonFile(opts: {
+  file: string;
+  projectDir: string;
+  scope: string;
+  /** The project whose pinned interpreter applies; null in the root scope. */
+  projectId: string | null;
+  /** Raw argument string appended after the file (see buildRunCommand). */
+  args?: string;
+  /** Where to insert the run tab (see openPythonTab); defaults to the scope group. */
+  place?: PyTabPlacer;
+}): Promise<void> {
+  const platform = currentPlatform();
+  const interp = await resolveInterpreter(opts.projectId, opts.projectDir, platform);
+  openPythonTab({
+    mode: "run",
+    file: opts.file,
+    projectDir: opts.projectDir,
+    scope: opts.scope,
+    command: buildRunCommand(interp, opts.file, platform, opts.args),
+    place: opts.place,
+  });
+}
+
+/** Debug `file` under pdb, breaking on `breakpoints` (1-based lines). */
+export async function debugPythonFile(opts: {
+  file: string;
+  projectDir: string;
+  scope: string;
+  projectId: string | null;
+  breakpoints: number[];
+  /** Raw argument string appended after the file (see buildDebugCommand). */
+  args?: string;
+  /** Where to insert the debug tab (see openPythonTab); defaults to the scope group. */
+  place?: PyTabPlacer;
+}): Promise<void> {
+  const platform = currentPlatform();
+  const interp = await resolveInterpreter(opts.projectId, opts.projectDir, platform);
+  openPythonTab({
+    mode: "debug",
+    file: opts.file,
+    projectDir: opts.projectDir,
+    scope: opts.scope,
+    command: buildDebugCommand(interp, opts.file, opts.breakpoints, platform, opts.args),
+    place: opts.place,
+  });
+}
+
+/** The project root to run from: the project's directory when the viewer has one,
+ *  else the file's own directory (a file opened in the root scope). */
+export function runCwd(projectDir: string | null | undefined, file: string): string {
+  return projectDir && projectDir.trim() ? projectDir : dirname(file) || "/";
+}
+
+/**
+ * The placer for the "Run opens in the focused subwindow" policy — where every
+ * viewer (the right-panel tree, the Files (Project) tab, and a code editor tab)
+ * sends its run/debug terminal.
+ *
+ * Inside a detached popout (`fileDrop` non-null) the main tab store isn't ours, so
+ * the tab must stream into THAT window via its controller (returns null so no
+ * main-store activate happens). Otherwise it returns `undefined`, which tells
+ * {@link openPythonTab} to use its default placement: `addTabToScope(scope, …)` —
+ * the focused subwindow of the project that owns the file. That is deliberately
+ * NOT "beside the tab you clicked from": a Run always lands where the user is
+ * looking, not in whichever subwindow happens to host the trigger.
+ */
+export function placeForFocused(
+  fileDrop: { openTab: (tab: Omit<TabEntry, "key">) => void } | null,
+): PyTabPlacer | undefined {
+  if (!fileDrop) return undefined;
+  return (tab) => {
+    fileDrop.openTab(tab);
+    return null;
+  };
+}
diff --git a/src/lib/remoteAutoReconnect.ts b/src/lib/remoteAutoReconnect.ts
new file mode 100644
index 0000000..1961fcb
--- /dev/null
+++ b/src/lib/remoteAutoReconnect.ts
@@ -0,0 +1,55 @@
+import { useVpnStatusStore } from "../stores/vpnStatus";
+import { useGlobalMachinesStore } from "../stores/globalMachines";
+import { retryAutoConnectAfterVpn } from "../stores/projects";
+
+/**
+ * Wire the two *event-driven* halves of remote auto-connect that the imperative
+ * connect paths can't own by themselves. The launch-time half already lives where
+ * it belongs — a project's active-project auto-connect fires from `projects.load()`
+ * / `setActive`, the armed VPN tunnel from `autoConnectVpnOnLaunch`. What was
+ * missing is a reaction to a **tunnel coming up**:
+ *
+ *  1. **On any tunnel becoming active**, re-attempt the things that were only
+ *     unreachable *because* the routing wasn't there yet — the active remote
+ *     project (`retryAutoConnectAfterVpn`) and every armed global machine. This is
+ *     what makes a project reachable *only through the VPN* connect promptly the
+ *     instant the tunnel is up, instead of sitting red until the user acts. It fires
+ *     whoever brought the tunnel up — the armed launch tunnel, a header connect, or
+ *     another project — because a tunnel is machine-wide.
+ *  2. **At launch**, sweep the global machines armed for auto-connect (the project
+ *     side already self-starts from its store).
+ *
+ * We subscribe to the machine-level VPN store rather than poll, so the retry is
+ * immediate on the exact `→ connected` transition (an earlier poll-based reaction
+ * lagged the tunnel by seconds). Idempotent by construction: the retry paths skip a
+ * live/winning lamp, and `setState` collapses a no-op transition, so a tunnel that
+ * comes up as a *side effect* of an auto-connect (a project bringing up its own
+ * VPN) can't feed back into a loop.
+ */
+
+let installed = false;
+
+export function initRemoteAutoReconnect(): void {
+  if (installed) return;
+  installed = true;
+
+  // React to a tunnel becoming active. `refresh()` at launch seats a tunnel that
+  // outlived a previous run (prev has no entry → this fires for it too), which is
+  // exactly right: a remote reachable only through that tunnel should connect.
+  useVpnStatusStore.subscribe((state, prev) => {
+    const roseToConnected = Object.entries(state.byConfig).some(
+      ([config, s]) => s === "connected" && prev.byConfig[config] !== "connected",
+    );
+    if (roseToConnected) onVpnTunnelUp();
+  });
+
+  // Launch-time global-machine sweep, decoupled from the header component so it runs
+  // even before the Machines menu is ever opened.
+  const gm = useGlobalMachinesStore.getState();
+  void (gm.loaded ? gm.autoConnect() : gm.load().then(() => useGlobalMachinesStore.getState().autoConnect()));
+}
+
+function onVpnTunnelUp(): void {
+  retryAutoConnectAfterVpn();
+  void useGlobalMachinesStore.getState().autoConnect();
+}
diff --git a/src/lib/remoteConnect.ts b/src/lib/remoteConnect.ts
index 6ec0b5a..c44f6f9 100644
--- a/src/lib/remoteConnect.ts
+++ b/src/lib/remoteConnect.ts
@@ -1,6 +1,30 @@
+import { invoke } from "@tauri-apps/api/core";
 import { useTabsStore } from "../stores/tabs";
 import { useProjectsStore } from "../stores/projects";
 
+/**
+ * The directory a fresh connect/browse should open in for `host`: the standard
+ * path set in Settings' "Remote Connections" panel if there is one, else the
+ * SSH-reported home directory. Best-effort — either lookup failing just falls
+ * through to the next, never blocking a connect that already succeeded.
+ *
+ * Shared by every remote connect+browse flow (`useRemoteSession` for the
+ * new/extend-project dialog, `RemoteMachinesWindow` for add-worker-machine) so
+ * they resolve the starting folder identically.
+ */
+export async function resolveRemoteStartDir(
+  user: string | null | undefined,
+  host: string,
+  port: number | null | undefined,
+  password: string | null,
+): Promise<string> {
+  const configured = await invoke<string | null>("remote_get_default_path", { host }).catch(
+    () => null,
+  );
+  if (configured) return configured;
+  return invoke<string>("ssh_default_dir", { user, host, port, password }).catch(() => "");
+}
+
 /**
  * Non-headless remote-connection support: instead of Eldrun handling the
  * SSH/OpenVPN password itself, the actual connecting command is launched as an
diff --git a/src/lib/remoteHosts.ts b/src/lib/remoteHosts.ts
new file mode 100644
index 0000000..07b0238
--- /dev/null
+++ b/src/lib/remoteHosts.ts
@@ -0,0 +1,24 @@
+import { PRIMARY_HOST } from "../stores/remoteStatus";
+import type { ProjectEntry } from "../types";
+
+export interface RemoteHostRef {
+  id: string;
+  label: string;
+}
+
+/**
+ * Every host a project's remote spans: the primary, then each `compute_hosts`
+ * worker (multi-host remote, `docs/multi_host_remote_plan.md`) — the same host
+ * set the System Monitor's source picker and the combined usage dialog both
+ * need. Empty for a non-remote project.
+ */
+export function hostsForProject(project: ProjectEntry | undefined): RemoteHostRef[] {
+  if (!project?.remote) return [];
+  const list: RemoteHostRef[] = [
+    { id: PRIMARY_HOST, label: project.remote.label || project.remote.host },
+  ];
+  for (const w of project.compute_hosts ?? []) {
+    list.push({ id: w.id, label: w.label || w.host });
+  }
+  return list;
+}
diff --git a/src/lib/shellScriptRun.ts b/src/lib/shellScriptRun.ts
new file mode 100644
index 0000000..d1b15b4
--- /dev/null
+++ b/src/lib/shellScriptRun.ts
@@ -0,0 +1,86 @@
+import { relativePathWithin } from "./paths";
+import type { TabLocation } from "../stores/tabs";
+import type { ProjectEntry } from "../types";
+
+export type ScriptShell = "bash" | "zsh" | "fish" | "ksh" | "powershell" | "cmd";
+
+export interface ShellScriptRunPlan {
+  cwd: string;
+  scriptRel: string;
+  initialInput: string;
+  location?: TabLocation;
+}
+
+export function shellQuote(value: string): string {
+  return `'${value.replace(/'/g, `'\\''`)}'`;
+}
+
+/** Which interpreter runs a script of this extension, keyed by lowercased ending.
+ *  The cross-platform shells run everywhere; `.ps1`/`.bat`/`.cmd` are Windows-only
+ *  here (`pwsh` on Linux is too rarely installed to advertise the action). Returns
+ *  null for an ending we don't know how to run, so no Run button is offered. */
+export function shellRunnerFor(
+  extension: string | null,
+  platform: "windows" | string,
+): ScriptShell | null {
+  const ext = (extension ?? "").toLowerCase();
+  const win = platform === "windows";
+  switch (ext) {
+    case ".sh":
+    case ".bash":
+      return "bash";
+    case ".zsh":
+      return "zsh";
+    case ".fish":
+      return "fish";
+    case ".ksh":
+      return "ksh";
+    case ".ps1":
+      return win ? "powershell" : null;
+    case ".bat":
+    case ".cmd":
+      return win ? "cmd" : null;
+    default:
+      return null;
+  }
+}
+
+/** The command line that runs `scriptRel` under `interp`. PowerShell and cmd take
+ *  a flag before the path; the POSIX shells take it as a bare argument. */
+export function shellRunCommand(interp: ScriptShell, scriptRel: string): string {
+  const quoted = shellQuote(scriptRel);
+  if (interp === "powershell") return `powershell -File ${quoted}`;
+  if (interp === "cmd") return `cmd /c ${quoted}`;
+  return `${interp} ${quoted}`;
+}
+
+export function scriptRelFromRoot(root: string, absPath: string): string | null {
+  const rel = relativePathWithin(root, absPath);
+  return rel && rel.trim() ? rel : null;
+}
+
+/** Build the foreground terminal-tab run for a shell script from the tree side the
+ *  user is browsing. Mount-free remote listings return host paths, while the
+ *  tree's `projectDir` is the local state dir; using that dir to relativize a
+ *  host path produced `bash ''`. Use the host `remote_path` for remote-source
+ *  rows, and explicitly pin the tab locality to match the selected side. */
+export function shellScriptRunPlan(opts: {
+  project: ProjectEntry | null | undefined;
+  treeRoot: string;
+  syncSource?: "remote" | "local";
+  scriptPath: string;
+  interp: ScriptShell;
+}): ShellScriptRunPlan | null {
+  const remote = opts.project?.remote;
+  const isRemoteProject = !!remote;
+  const runsRemote = isRemoteProject && opts.syncSource !== "local";
+  const root = runsRemote ? remote.remote_path : opts.treeRoot;
+  const scriptRel = scriptRelFromRoot(root, opts.scriptPath);
+  if (!scriptRel) return null;
+  return {
+    cwd: root,
+    scriptRel,
+    initialInput: shellRunCommand(opts.interp, scriptRel),
+    location: isRemoteProject ? (runsRemote ? "remote" : "local") : undefined,
+  };
+}
diff --git a/src/lib/shortcuts.ts b/src/lib/shortcuts.ts
index ff4d1f3..2c64ff1 100644
--- a/src/lib/shortcuts.ts
+++ b/src/lib/shortcuts.ts
@@ -34,6 +34,7 @@ export type ShortcutAction =
   | "subwindowDown"
   | "cycleTabs"
   | "hideSubwindow"
+  | "toggleSubwindowFiles"
   | "closeSubwindow"
   | "closeTab"
   | "closeAllTabs";
@@ -91,6 +92,11 @@ export const SHORTCUT_DEFS: ShortcutDef[] = [
     label: "Hide focused subwindow",
     default: { key: "h", ctrl: true, shift: true },
   },
+  {
+    action: "toggleSubwindowFiles",
+    label: "Toggle subwindow file viewer",
+    default: { key: "f", shift: true },
+  },
   {
     action: "closeSubwindow",
     label: "Close focused subwindow",
diff --git a/src/lib/slurm.ts b/src/lib/slurm.ts
new file mode 100644
index 0000000..e4cec06
--- /dev/null
+++ b/src/lib/slurm.ts
@@ -0,0 +1,357 @@
+/**
+ * SLURM run/watch glue for HPC projects (`docs/quirky-knitting-umbrella` plan).
+ *
+ * A SLURM cluster forbids real computation on the login node — everything heavy
+ * goes through the scheduler.
+ * This module lets a `.slurm` file be submitted, watched, and cancelled from the
+ * code viewer without the user memorizing `sbatch`/`squeue`/`scancel`.
+ *
+ * Two halves, both modeled on `lib/pythonRun.ts`:
+ *
+ *  1. **Pure text helpers** — `isSlurmScript`, `parseSbatchDirectives`,
+ *     `spliceDirective`. Like the YAML/table viewers, the directive form *renders
+ *     rows but edits text*: `spliceDirective` edits the file's `#SBATCH` lines by
+ *     splicing, never re-serializing, so every other byte of the script is left
+ *     alone and each edit is an ordinary dirty/undoable/saveable change.
+ *  2. **Tab glue** — the **log window** and the **interactive job shell** are just
+ *     terminal tabs, exactly as a Python run is. A tab carries locality and tmux
+ *     persistence for free, so a `tail -F` of the job log reattaches on relaunch
+ *     and an `srun --pty` lands on a compute node (the compliant interactive path).
+ */
+
+import { invoke } from "@tauri-apps/api/core";
+import { useTabsStore, type TabEntry, type TabLocation } from "../stores/tabs";
+import { useHpcJobsStore, type HpcJob } from "../stores/hpcJobs";
+import { shellQuote } from "./pythonRun";
+import { basename } from "./paths";
+
+// ── Backend types (mirror `commands::slurm`) ─────────────────────────────────
+
+export interface SlurmInfo {
+  available: boolean;
+  version?: string;
+}
+
+export interface SlurmSubmit {
+  job_id: string;
+  out_file: string;
+  err_file: string;
+  work_dir: string;
+}
+
+export interface SlurmJob {
+  id: string;
+  name: string;
+  state: string;
+  time: string;
+  nodes: string;
+  reason: string;
+}
+
+// ── Invoke wrappers ──────────────────────────────────────────────────────────
+
+/** Is SLURM available on the project's host? Lets the UI hide itself off-HPC. */
+export function slurmAvailable(projectDir: string, hostId?: string): Promise<SlurmInfo> {
+  return invoke<SlurmInfo>("slurm_available", { projectDir, hostId });
+}
+
+/** The current user's jobs on the host (for the Jobs view). */
+export function slurmQueue(projectDir: string, hostId?: string): Promise<SlurmJob[]> {
+  return invoke<SlurmJob[]>("slurm_queue", { projectDir, hostId });
+}
+
+/** Cancel a job by id. */
+export function slurmCancel(projectDir: string, jobId: string, hostId?: string): Promise<void> {
+  return invoke("slurm_cancel", { projectDir, jobId, hostId });
+}
+
+/** Resolve a job's stdout path (for Watch on a job we didn't submit this session). */
+export function slurmJobOut(projectDir: string, jobId: string, hostId?: string): Promise<string> {
+  return invoke<string>("slurm_job_out", { projectDir, jobId, hostId });
+}
+
+// ── #SBATCH directive parsing / splicing (render rows, edit text) ─────────────
+
+/** One `#SBATCH` field surfaced in the directive form. `key` is always the LONG
+ *  form (`job-name`), even when the file wrote the short flag (`-J`). */
+export interface SbatchField {
+  key: string;
+  value: string;
+}
+
+/** The keys the directive form surfaces as labeled fields, in display order. */
+export const COMMON_SBATCH_KEYS = [
+  "job-name",
+  "account",
+  "partition",
+  "time",
+  "nodes",
+  "ntasks",
+  "cpus-per-task",
+  "mem",
+  "gres",
+  "output",
+] as const;
+
+/** Short `sbatch` flags → their long equivalents, so `-t`/`--time` fold into one
+ *  field in the form. Only the flags the form surfaces need an entry. */
+const SHORT_TO_LONG: Record<string, string> = {
+  J: "job-name",
+  A: "account",
+  p: "partition",
+  t: "time",
+  N: "nodes",
+  n: "ntasks",
+  c: "cpus-per-task",
+  o: "output",
+  e: "error",
+};
+
+/** A `#SBATCH` directive line, matched leniently: optional leading space, `#SBATCH`
+ *  (case-insensitive), the flag, then `=value` or ` value`. `#SBATCH` with no flag
+ *  (a comment) doesn't match. */
+const SBATCH_RE = /^\s*#\s*SBATCH\s+(--?[A-Za-z][\w-]*)(?:[=\s]+(.*))?$/;
+
+/** True when `text` looks like a SLURM batch script: it carries at least one
+ *  `#SBATCH` directive line (the only reliable marker — a `.slurm` extension is
+ *  neither required nor sufficient, and a plain shell script has none). */
+export function isSlurmScript(text: string): boolean {
+  return text.split("\n").some((l) => SBATCH_RE.test(l));
+}
+
+/** Normalize a matched flag token (`--time`, `-t`) to its long key (`time`). */
+function normalizeKey(flag: string): string {
+  if (flag.startsWith("--")) return flag.slice(2);
+  const short = flag.slice(1);
+  return SHORT_TO_LONG[short] ?? short;
+}
+
+/** Every `#SBATCH` directive present in the script, long-key-normalized. A flag
+ *  with no value (a boolean like `--exclusive`) yields an empty string value. */
+export function parseSbatchDirectives(text: string): SbatchField[] {
+  const out: SbatchField[] = [];
+  for (const line of text.split("\n")) {
+    const m = SBATCH_RE.exec(line);
+    if (!m) continue;
+    out.push({ key: normalizeKey(m[1]), value: (m[2] ?? "").trim() });
+  }
+  return out;
+}
+
+/** The current value of `key` among parsed directives, or `""` when absent. */
+export function directiveValue(fields: SbatchField[], key: string): string {
+  return fields.find((f) => f.key === key)?.value ?? "";
+}
+
+/**
+ * Edit the script's `#SBATCH` lines so that `key` reads `value` — by SPLICING the
+ * text, never re-serializing (the view-on-text bargain: every untouched byte, and
+ * the whole rest of the script, is preserved). Three cases:
+ *  - **present** → its value is replaced in place (matching the flag form the file
+ *    used, long or short);
+ *  - **absent + non-empty** → a new `#SBATCH --key=value` line is inserted after
+ *    the last existing directive (or after the shebang, else at the top);
+ *  - **empty value** → the directive line is removed (a way to clear a field).
+ */
+export function spliceDirective(text: string, key: string, value: string): string {
+  const lines = text.split("\n");
+  const v = value.trim();
+
+  // Find an existing directive for this key (matched on the normalized long key).
+  let lastDirective = -1;
+  for (let i = 0; i < lines.length; i++) {
+    const m = SBATCH_RE.exec(lines[i]);
+    if (!m) continue;
+    lastDirective = i;
+    if (normalizeKey(m[1]) !== key) continue;
+    // Matched: rewrite (or delete) this line.
+    if (v === "") {
+      lines.splice(i, 1);
+      return lines.join("\n");
+    }
+    const flag = m[1]; // keep the flag spelling the file already used
+    const sep = flag.startsWith("--") ? "=" : " ";
+    // Preserve any leading indentation the author had.
+    const indent = lines[i].match(/^\s*/)?.[0] ?? "";
+    lines[i] = `${indent}#SBATCH ${flag}${sep}${v}`;
+    return lines.join("\n");
+  }
+
+  if (v === "") return text; // nothing to clear
+
+  // Absent: insert a new directive. Prefer just after the last existing #SBATCH so
+  // directives stay grouped; else after a shebang; else at the very top.
+  const newLine = `#SBATCH --${key}=${v}`;
+  if (lastDirective >= 0) {
+    lines.splice(lastDirective + 1, 0, newLine);
+  } else if (lines[0]?.startsWith("#!")) {
+    lines.splice(1, 0, newLine);
+  } else {
+    lines.splice(0, 0, newLine);
+  }
+  return lines.join("\n");
+}
+
+// ── Tab glue (the log window + the interactive shell) ────────────────────────
+
+/** Where a run tab is inserted (see `pythonRun.PyTabPlacer`): a placer OWNS
+ *  insertion, returning the created entry for a main-store activate, or null when
+ *  it streamed the tab into a detached popout. */
+export type SlurmTabPlacer = (tab: Omit<TabEntry, "key">) => TabEntry | null;
+
+/** The tab `location` for `hostId`: `undefined` for a local project (everything is
+ *  local), `"remote"` for the primary of a remote project, `host:<id>` for a
+ *  worker — the same axis a tab's locality badge sets, carried verbatim. */
+export function locationForHost(hostId: string, isRemote: boolean): TabLocation | undefined {
+  if (!isRemote) return undefined;
+  return hostId === "primary" ? "remote" : `host:${hostId}`;
+}
+
+/** Open a shell tab running `initialInput`, placed like a Python run tab. */
+function openHostShellTab(opts: {
+  scope: string;
+  label: string;
+  cwd: string;
+  location: TabLocation | undefined;
+  initialInput: string;
+  place?: SlurmTabPlacer;
+}): void {
+  const tab: Omit<TabEntry, "key"> = {
+    label: opts.label,
+    cmd: "", // the host's default shell
+    cwd: opts.cwd,
+    kind: "shell",
+    initialInput: opts.initialInput,
+    ...(opts.location ? { location: opts.location } : {}),
+  };
+  if (opts.place) {
+    const entry = opts.place(tab);
+    if (entry) useTabsStore.getState().setActive(entry.key);
+    return;
+  }
+  const entry = useTabsStore.getState().addTabToScope(opts.scope, tab);
+  useTabsStore.getState().setActive(entry.key);
+}
+
+/** The command that tails a job's log: `tail -n +1 -F <out>` follows by name and
+ *  retries, so it waits out the queue (the file doesn't exist until the job runs)
+ *  and streams from the top once it appears. */
+export function buildTailCommand(outFile: string): string {
+  return `tail -n +1 -F ${shellQuote(outFile, "unix")}`;
+}
+
+/** Open a log tab tailing `outFile` on `hostId`. Used by Submit and by the Jobs
+ *  view's Watch. */
+export function openLogTab(opts: {
+  scope: string;
+  projectDir: string;
+  outFile: string;
+  jobLabel: string;
+  hostId: string;
+  isRemote: boolean;
+  place?: SlurmTabPlacer;
+}): void {
+  openHostShellTab({
+    scope: opts.scope,
+    label: `📄 ${opts.jobLabel}`,
+    cwd: opts.projectDir,
+    location: locationForHost(opts.hostId, opts.isRemote),
+    initialInput: buildTailCommand(opts.outFile),
+    place: opts.place,
+  });
+}
+
+/**
+ * Submit `file` (its absolute host/local path) with `sbatch`, open a log tab
+ * tailing the job's output, and record the job in the session store so the Jobs
+ * view shows it immediately. Returns the recorded job.
+ */
+export async function submitSlurmJob(opts: {
+  /** Absolute path of the `.slurm` file (the viewer's path). */
+  file: string;
+  /** The backend project-dir key (the project's stored `directory`). */
+  projectDir: string;
+  /** cwd for the log tab (the project root). */
+  cwd: string;
+  /** Owning project id, for the Jobs store. */
+  projectId: string;
+  /** The tab scope (project id, or "root"). */
+  scope: string;
+  /** Host to submit on; defaults to the primary. */
+  host?: string;
+  /** Whether the project is remote (decides the tab's locality). */
+  isRemote: boolean;
+  place?: SlurmTabPlacer;
+}): Promise<HpcJob> {
+  const host = opts.host ?? "primary";
+  const res = await invoke<SlurmSubmit>("slurm_submit", {
+    projectDir: opts.projectDir,
+    scriptRel: opts.file,
+    hostId: host,
+  });
+  const name = basename(opts.file);
+  const job: HpcJob = {
+    jobId: res.job_id,
+    name,
+    outFile: res.out_file,
+    host,
+    submittedAt: Date.now(),
+  };
+  useHpcJobsStore.getState().add(opts.projectId, job);
+  openLogTab({
+    scope: opts.scope,
+    projectDir: opts.cwd,
+    outFile: res.out_file,
+    jobLabel: `${res.job_id} ${name}`,
+    hostId: host,
+    isRemote: opts.isRemote,
+    place: opts.place,
+  });
+  return job;
+}
+
+/** Resources for an interactive `srun --pty` session. All optional; only the set
+ *  ones are passed. */
+export interface InteractiveResources {
+  time?: string;
+  cpus?: string;
+  mem?: string;
+  gpus?: string;
+  partition?: string;
+  /** SLURM account (`--account`). Mandatory on group-allocated clusters, where
+   *  an interactive `srun` with no account is rejected. */
+  account?: string;
+}
+
+/** Build the `srun --pty … bash -l` command that lands an interactive shell on a
+ *  compute node (the compliant interactive path — never the login node). */
+export function buildInteractiveCommand(res: InteractiveResources): string {
+  const parts = ["srun", "--pty"];
+  if (res.account?.trim()) parts.push(`--account=${res.account.trim()}`);
+  if (res.partition?.trim()) parts.push(`--partition=${res.partition.trim()}`);
+  if (res.time?.trim()) parts.push(`--time=${res.time.trim()}`);
+  if (res.cpus?.trim()) parts.push(`--cpus-per-task=${res.cpus.trim()}`);
+  if (res.mem?.trim()) parts.push(`--mem=${res.mem.trim()}`);
+  if (res.gpus?.trim()) parts.push(`--gpus=${res.gpus.trim()}`);
+  parts.push("bash", "-l");
+  return parts.join(" ");
+}
+
+/** Open an interactive compute-node shell (`srun --pty …`) as a terminal tab. */
+export function openInteractiveJob(opts: {
+  scope: string;
+  cwd: string;
+  res: InteractiveResources;
+  hostId: string;
+  isRemote: boolean;
+  place?: SlurmTabPlacer;
+}): void {
+  openHostShellTab({
+    scope: opts.scope,
+    label: "⚡ srun",
+    cwd: opts.cwd,
+    location: locationForHost(opts.hostId, opts.isRemote),
+    initialInput: buildInteractiveCommand(opts.res),
+    place: opts.place,
+  });
+}
diff --git a/src/lib/terminalBus.ts b/src/lib/terminalBus.ts
new file mode 100644
index 0000000..423270d
--- /dev/null
+++ b/src/lib/terminalBus.ts
@@ -0,0 +1,82 @@
+import { listen } from "@tauri-apps/api/event";
+
+/**
+ * Single global subscription per PTY-lifecycle event, fanned out to per-id
+ * handlers. Every mounted `TerminalView` used to call `listen("terminal-output",
+ * ...)` itself and filter `ev.payload.id === id` client-side — but the backend
+ * emits these as plain window-wide events (`app.emit`, not scoped per PTY), so
+ * every chunk from every running PTY was dispatched to and filtered by EVERY
+ * mounted terminal (CenterPanel keeps all tabs, all scopes, mounted forever —
+ * see its "flat pane layer" comment). That's O(mounted terminals) work per
+ * output chunk, not O(1). Here there is exactly one `listen()` per event type
+ * for the app's lifetime, doing an O(1) Map lookup to reach the right pane(s).
+ */
+
+interface TerminalOutput {
+  id: string;
+  data: string;
+}
+
+interface TerminalExit {
+  id: string;
+  code: number | null;
+}
+
+type OutputHandler = (data: string) => void;
+type ReadyHandler = () => void;
+type ExitHandler = (code: number | null) => void;
+
+const outputHandlers = new Map<string, Set<OutputHandler>>();
+const readyHandlers = new Map<string, Set<ReadyHandler>>();
+const exitHandlers = new Map<string, Set<ExitHandler>>();
+
+let started = false;
+
+function ensureStarted() {
+  if (started) return;
+  started = true;
+
+  listen<TerminalOutput>("terminal-output", (ev) => {
+    const set = outputHandlers.get(ev.payload.id);
+    if (!set) return;
+    for (const h of set) h(ev.payload.data);
+  }).catch(() => {});
+
+  listen<{ id: string }>("terminal-ready", (ev) => {
+    const set = readyHandlers.get(ev.payload.id);
+    if (!set) return;
+    for (const h of set) h();
+  }).catch(() => {});
+
+  listen<TerminalExit>("terminal-exit", (ev) => {
+    const set = exitHandlers.get(ev.payload.id);
+    if (!set) return;
+    for (const h of set) h(ev.payload.code);
+  }).catch(() => {});
+}
+
+function subscribe<H>(registry: Map<string, Set<H>>, id: string, handler: H): () => void {
+  ensureStarted();
+  let set = registry.get(id);
+  if (!set) {
+    set = new Set();
+    registry.set(id, set);
+  }
+  set.add(handler);
+  return () => {
+    set.delete(handler);
+    if (set.size === 0) registry.delete(id);
+  };
+}
+
+export function onTerminalOutput(id: string, handler: OutputHandler): () => void {
+  return subscribe(outputHandlers, id, handler);
+}
+
+export function onTerminalReady(id: string, handler: ReadyHandler): () => void {
+  return subscribe(readyHandlers, id, handler);
+}
+
+export function onTerminalExit(id: string, handler: ExitHandler): () => void {
+  return subscribe(exitHandlers, id, handler);
+}
diff --git a/src/lib/terminalControl.ts b/src/lib/terminalControl.ts
new file mode 100644
index 0000000..c0dd841
--- /dev/null
+++ b/src/lib/terminalControl.ts
@@ -0,0 +1,35 @@
+import type { TabKind } from "../stores/tabs";
+
+const CSI = "\x1b[";
+const claimedInitialInputs = new Set<string>();
+
+/** xterm answers terminal identity probes by emitting CSI ... c back through
+ *  `onData`, for example secondary DA: `ESC [ > 0 ; 276 ; 0 c`. During an
+ *  auto-run tab startup that response can land in readline before Eldrun types
+ *  `initialInput`, making the shell execute `0;276;0c...` instead of the command.
+ *  Suppress only the standalone identity replies while an auto-input is pending;
+ *  normal interactive terminal programs can still receive them afterward. */
+export function isTerminalIdentityResponse(data: string): boolean {
+  return new RegExp(`^(?:${CSI.replace("[", "\\[")}[?>]?[0-9;]*c)+$`).test(data);
+}
+
+/** Clear any startup junk already sitting in a shell's readline buffer before
+ *  auto-typing a command. No-op for agent TUIs: their prompt behavior is not a
+ *  POSIX shell line editor. */
+export function initialInputForPty(input: string, kind: TabKind): string {
+  return kind === "shell" ? `\x15${input}` : input;
+}
+
+/** Claim the right to auto-submit `input` for `ptyId`. React dev remounts,
+ *  duplicate panes, or duplicate ready events must not type the same run command
+ *  twice into one shell. */
+export function claimInitialInput(ptyId: string, input: string): boolean {
+  const key = `${ptyId}\0${input}`;
+  if (claimedInitialInputs.has(key)) return false;
+  claimedInitialInputs.add(key);
+  return true;
+}
+
+export function clearClaimedInitialInputsForTest(): void {
+  claimedInitialInputs.clear();
+}
diff --git a/src/lib/tmuxSession.ts b/src/lib/tmuxSession.ts
new file mode 100644
index 0000000..7d52bbf
--- /dev/null
+++ b/src/lib/tmuxSession.ts
@@ -0,0 +1,64 @@
+/**
+ * Persistent remote sessions (TODO #85) — the frontend half of the tmux wrap.
+ *
+ * A remote shell/script tab can run inside a **tmux** session on the host, so a
+ * long run survives an SSH drop, a laptop sleep, or Eldrun quitting: the session
+ * keeps running and the tab reattaches on reconnect/relaunch. The backend
+ * (`services::ssh_exec`) owns the actual wrap; these helpers decide *whether* a
+ * tab persists and mirror the session-name derivation so the frontend can address
+ * a session it did not just spawn (the Sessions view, the explicit-close kill).
+ */
+
+import type { RemoteSpec } from "../types";
+
+/**
+ * Mint a fresh, stable tmux session name for a shell tab. Minted **once** at tab
+ * creation and **persisted** on the tab (`TabEntry.tmuxSession`), because the tab's
+ * PTY id (`<scope>:<tab-key>`) is NOT stable — `loadFromLayout` regenerates the key
+ * on every restart — so deriving the name from the id would create a *second*
+ * session on relaunch instead of reattaching. A uuid is inherently tmux-safe
+ * (`[0-9a-f-]`, no `:`/`.`), so it needs no sanitising.
+ */
+export function newTmuxSessionName(): string {
+  return `eldrun-${crypto.randomUUID()}`;
+}
+
+/**
+ * Whether persistent sessions are enabled for a remote project. **Default ON** —
+ * `undefined`/`true` mean enabled; only an explicit `false` (the pill's toggle)
+ * opts out. `undefined`/local projects → off (there is no host to persist on).
+ */
+export function persistSessionsEnabled(remote: RemoteSpec | undefined | null): boolean {
+  return !!remote && remote.persist_sessions !== false;
+}
+
+/**
+ * Whether THIS tab should be tmux-wrapped: a **shell** tab (interactive shells and
+ * Python/script runs, which open a shell tab) running on a **remote host**
+ * (`hostId` non-null) of a persist-enabled remote project. Agent tabs are excluded
+ * — they resume via their own session — as are files/embed/monitor panes (no PTY).
+ */
+export function shouldPersistTab(
+  kind: string,
+  hostId: string | null,
+  remote: RemoteSpec | undefined | null,
+): boolean {
+  return kind === "shell" && hostId !== null && persistSessionsEnabled(remote);
+}
+
+/**
+ * Whether THIS tab should be tmux-wrapped **locally** (TODO #85): a **shell** tab
+ * (interactive shells + Python/script runs) that runs on the **local machine** —
+ * a local project's tab, or a remote project's local (mirror) tab — in a project
+ * scope. `localEnabled` folds the `persist_local_sessions` setting **and** the
+ * platform check (off on Windows, where there is no tmux). Keeps the run alive
+ * across an Eldrun crash and reattaches on restart.
+ */
+export function shouldPersistLocalTab(
+  kind: string,
+  scopeKey: string,
+  localRunning: boolean,
+  localEnabled: boolean,
+): boolean {
+  return kind === "shell" && scopeKey !== "root" && localRunning && localEnabled;
+}
diff --git a/src/lib/viewers/fileUtils.ts b/src/lib/viewers/fileUtils.ts
index e78be2e..f23d833 100644
--- a/src/lib/viewers/fileUtils.ts
+++ b/src/lib/viewers/fileUtils.ts
@@ -49,10 +49,17 @@ export type InternalViewer =
   // explicitly from a diverged (amber) file's diff button; routed to `DiffView`
   // in sync mode (backend `sync_diff`).
   | "syncdiff"
+  // SSH-sync three-way merge (PyCharm-style): local mirror ⇄ editable result ⇄
+  // remote host, with per-block take-left/right. Never auto-selected — only
+  // opened from a diverged (amber) file in the orange list; routed to
+  // `SyncMergeView`. Apply resolves the divergence (writes mirror + force-push).
+  | "syncmerge"
   | "odt"
   | "media"
+  | "gif"
   | "html"
-  | "sqlite";
+  | "sqlite"
+  | "yaml";
 
 // Audio/video formats the webview plays natively via <audio>/<video> from a
 // Blob URL (Dev D). Kept separate from IMAGE_EXTS so the media viewer wins.
@@ -115,16 +122,38 @@ export function internalViewerFor(
 ): InternalViewer | null {
   const viewer = naturalViewerFor(entry);
   // When the user has opted this type out (#48), return null so the file falls
-  // through to the external-app path (commitFileDrop routes it via embedExec).
-  if (viewer && disabled?.has(viewer)) return null;
+  // through to the external-app path (commitFileDrop routes it via embedExec) —
+  // unless the type has a native fallback that is itself still enabled. YAML is
+  // the case: turning off its tree is a vote against the *tree*, not against
+  // editing YAML in Eldrun at all, so it drops back to the plain code editor
+  // (which is where .yaml opened before the tree existed).
+  if (viewer && disabled?.has(viewer)) {
+    const fallback = VIEWER_FALLBACK[viewer];
+    return fallback && !disabled.has(fallback) ? fallback : null;
+  }
   return viewer;
 }
 
+/** Where a type lands when its own viewer is opted out (#48), before the
+ *  external-app path. Only for types whose bytes another native viewer can still
+ *  render honestly. */
+const VIEWER_FALLBACK: Partial<Record<InternalViewer, InternalViewer>> = {
+  yaml: "text",
+  // Opting out the GIF transport UI is not a vote against viewing GIFs in-app:
+  // the plain image viewer still animates them honestly (the webview animates
+  // <img> GIFs natively) — it just offers no frame control.
+  gif: "image",
+};
+
 /** The viewer a file *type* maps to, ignoring any user opt-out. */
 function naturalViewerFor(entry: FileEntry): InternalViewer | null {
   if (entry.is_dir) return null;
   const ext = (entry.extension ?? "").toLowerCase();
   if (ext === ".pdf") return "pdf";
+  // .gif gets the dedicated animated-GIF viewer (frame transport: pause, step,
+  // scrub — #gifviewer). It is also in IMAGE_EXTS, so this early return must
+  // win — exactly like .tex/.csv below.
+  if (ext === ".gif") return "gif";
   if (IMAGE_EXTS.has(ext)) return "image";
   if (MARKDOWN_EXTS.has(ext)) return "markdown";
   // .tex gets the dedicated LaTeX viewer (compile to a PDF tab when a TeX engine
@@ -156,6 +185,13 @@ function naturalViewerFor(entry: FileEntry): InternalViewer | null {
   // (Dev E). These are also in TEXT_EXTS, so this specific return must win — like
   // .tex above. Opting it out (#48) falls back to the plain text editor.
   if (ext === ".html" || ext === ".htm" || ext === ".svg") return "html";
+  // .yaml/.yml/.json get the structured tree editor with a Tree/Source toggle
+  // (#yaml). JSON is YAML's flow syntax — the same tree renders it, written back
+  // in the stricter dialect — so the two share a viewer rather than duplicating
+  // one. All three are also in TEXT_EXTS, so this specific return must win, like
+  // .tex above. Opting it out (#48) falls back to the plain code editor, not the
+  // external app (see VIEWER_FALLBACK).
+  if (ext === ".yaml" || ext === ".yml" || ext === ".json") return "yaml";
   if (ext && TEXT_EXTS.has(ext)) return "text";
   if (!ext && TEXT_FILENAMES.has(entry.name.toLowerCase())) return "text";
   // DEFERRED (#51, DECISION B): the remaining OpenDocument / spreadsheet formats
@@ -219,7 +255,7 @@ export const VIEWER_PREF_TYPES: ViewerTypeMeta[] = [
   {
     id: "text",
     label: "Text / code",
-    extensions: [".txt", ".json", ".py", ".rs", ".ts", ".svg", ".bib", "…"],
+    extensions: [".txt", ".toml", ".py", ".rs", ".ts", ".svg", ".bib", "…"],
     autocomplete: true,
   },
   {
@@ -234,10 +270,22 @@ export const VIEWER_PREF_TYPES: ViewerTypeMeta[] = [
     extensions: [".md", ".markdown", ".mdx"],
     autocomplete: true,
   },
+  {
+    id: "yaml",
+    label: "YAML / JSON tree",
+    extensions: [".yaml", ".yml", ".json"],
+    autocomplete: true,
+  },
   {
     id: "image",
     label: "Images",
-    extensions: [".png", ".jpg", ".gif", ".webp", "…"],
+    extensions: [".png", ".jpg", ".bmp", ".webp", "…"],
+    autocomplete: false,
+  },
+  {
+    id: "gif",
+    label: "Animated GIF",
+    extensions: [".gif"],
     autocomplete: false,
   },
   { id: "pdf", label: "PDF", extensions: [".pdf"], autocomplete: false },
@@ -428,6 +476,7 @@ export function fileIcon(ext: string | null): string {
     case ".png":
     case ".jpg":
     case ".jpeg":
+    case ".gif":
     case ".svg": return "🖼";
     case ".sh": return "⚙";
     default: return "📄";
diff --git a/src/lib/viewers/gif.ts b/src/lib/viewers/gif.ts
new file mode 100644
index 0000000..af79507
--- /dev/null
+++ b/src/lib/viewers/gif.ts
@@ -0,0 +1,440 @@
+/**
+ * Pure GIF decoder backing the native GIF viewer. All pure — the decoder takes
+ * a `Uint8Array` and never touches the fs (same bargain as `yaml.ts`/`table.ts`).
+ * WebKitGTK has no `ImageDecoder` API, so frame-level control (pause, step,
+ * scrub) means decoding GIF's LZW + compositing ourselves. GIF89a is a frozen
+ * spec, so hand-rolling costs no maintenance tail.
+ *
+ * Two load-bearing ideas:
+ *
+ * 1. **Every frame is composited to a full-canvas RGBA buffer.** A GIF frame is
+ *    a rect patched onto the previous state (plus a disposal method), so frame N
+ *    is only meaningful given N−1 — GIF has no keyframes. Decoding upfront to
+ *    full frames is what makes scrubbing and prev-step O(1); the memory cost
+ *    (`w*h*4*frames`) is bounded by `maxPixelBytes` — when the next frame would
+ *    exceed it, decoding stops and the result says `truncated`.
+ *
+ * 2. **Delays are stored as authored, played as convention.** GIFs in the wild
+ *    authored with a 0 or 1 hundredth delay were authored *against* the browser
+ *    clamp (every engine renders <2 hundredths as 100ms); honoring 0ms literally
+ *    would strobe them. `effectiveDelayMs` applies the convention at playback
+ *    (<20ms → 100ms, everything else exact) while `GifFrame.delayMs` keeps the
+ *    authored value for the readout.
+ *
+ * Disposal 2 ("restore to background") clears the frame rect to *transparent*,
+ * not the logical-screen background color — the spec says background, every
+ * browser ever shipped says transparent, and files are authored against the
+ * browsers. Pinned by a test.
+ *
+ * Error policy: an unreadable header throws `GifDecodeError`; corruption or EOF
+ * after at least one complete frame returns what decoded cleanly with
+ * `truncated: true` (browsers render a truncated GIF the same way).
+ */
+
+export interface GifFrame {
+  /** Full-canvas RGBA pixels (width*height*4), already composited. Typed over
+   *  a plain ArrayBuffer so it feeds `new ImageData(...)` without a cast. */
+  pixels: Uint8ClampedArray<ArrayBuffer>;
+  /** Authored delay in ms (raw GCE hundredths × 10). 0 is preserved as 0;
+   *  playback applies {@link effectiveDelayMs}. */
+  delayMs: number;
+  /** Raw GCE disposal method 0–3, kept for tests/debug readouts. */
+  disposal: number;
+}
+
+export interface GifData {
+  /** Logical screen size — every frame's `pixels` buffer is this size. */
+  width: number;
+  height: number;
+  /** At least one; a GIF with zero decodable frames throws instead. */
+  frames: GifFrame[];
+  /** Netscape iteration count: 0 = loop forever; 1 when the extension is
+   *  absent (play once). */
+  loopCount: number;
+  /** True when the file ended mid-stream, a frame was corrupt, or the memory
+   *  cap stopped decoding; `frames` holds what decoded cleanly. */
+  truncated: boolean;
+}
+
+export class GifDecodeError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = "GifDecodeError";
+  }
+}
+
+/** The delay a frame actually plays at (see module comment): authored delays
+ *  under 20ms mean "browser default", i.e. 100ms; everything else is exact. */
+export function effectiveDelayMs(delayMs: number): number {
+  return delayMs < 20 ? 100 : delayMs;
+}
+
+/** Default cap on total decoded frame memory (RGBA bytes across all frames).
+ *  Typical GIFs (a few MB file, <200 frames, <600px) land well under this;
+ *  a pathological one stops here with `truncated` instead of eating the heap. */
+export const DEFAULT_MAX_PIXEL_BYTES = 256 * 1024 * 1024;
+
+// ── Byte cursor ──────────────────────────────────────────────────────────────
+
+interface Cursor {
+  bytes: Uint8Array;
+  pos: number;
+}
+
+function u8(c: Cursor): number {
+  if (c.pos >= c.bytes.length) throw new GifDecodeError("unexpected end of file");
+  return c.bytes[c.pos++];
+}
+
+function u16le(c: Cursor): number {
+  return u8(c) | (u8(c) << 8);
+}
+
+function take(c: Cursor, n: number): Uint8Array {
+  if (c.pos + n > c.bytes.length) throw new GifDecodeError("unexpected end of file");
+  const v = c.bytes.subarray(c.pos, c.pos + n);
+  c.pos += n;
+  return v;
+}
+
+/** Read a sub-block chain (length byte, data, … until a 0 length) into one
+ *  contiguous buffer. */
+function readSubBlocks(c: Cursor): Uint8Array {
+  const parts: Uint8Array[] = [];
+  let total = 0;
+  for (let len = u8(c); len !== 0; len = u8(c)) {
+    parts.push(take(c, len));
+    total += len;
+  }
+  const out = new Uint8Array(total);
+  let pos = 0;
+  for (const p of parts) {
+    out.set(p, pos);
+    pos += p.length;
+  }
+  return out;
+}
+
+// ── LZW ──────────────────────────────────────────────────────────────────────
+
+/**
+ * GIF-flavored LZW: variable code width from `minCodeSize+1` up to 12 bits,
+ * clear code resets the dictionary, EOI ends the stream. The dictionary is flat
+ * prefix/suffix arrays (an entry is "prefix entry's expansion + one suffix
+ * byte"), expanded through a stack — no string building. Tolerates the two
+ * real-world stream shapes: filling `expected` pixels before EOI (common), and
+ * ending early (returns how many pixels landed; the caller marks truncated).
+ * A code beyond the next free dictionary slot is corruption and throws.
+ */
+function lzwDecode(
+  minCodeSize: number,
+  data: Uint8Array,
+  expected: number,
+): { indices: Uint8Array; filled: number } {
+  const MAX_DICT = 4096;
+  const clear = 1 << minCodeSize;
+  const eoi = clear + 1;
+  const prefix = new Int32Array(MAX_DICT);
+  const suffix = new Uint8Array(MAX_DICT);
+  const stack = new Uint8Array(MAX_DICT + 1);
+  const out = new Uint8Array(expected);
+
+  let dictSize = eoi + 1;
+  let codeSize = minCodeSize + 1;
+  let prev = -1;
+  let acc = 0;
+  let bits = 0;
+  let pos = 0;
+  let outPos = 0;
+
+  while (outPos < expected) {
+    while (bits < codeSize) {
+      if (pos >= data.length) return { indices: out, filled: outPos }; // stream ended early
+      acc |= data[pos++] << bits;
+      bits += 8;
+    }
+    const code = acc & ((1 << codeSize) - 1);
+    acc >>= codeSize;
+    bits -= codeSize;
+
+    if (code === clear) {
+      dictSize = eoi + 1;
+      codeSize = minCodeSize + 1;
+      prev = -1;
+      continue;
+    }
+    if (code === eoi) break;
+
+    // Expand the code (or, for the KwKwK case where the code IS the next free
+    // slot, the previous code + its own first byte) through the stack.
+    let cur = code;
+    let sp = 0;
+    let kwkwk = false;
+    if (cur >= dictSize) {
+      if (cur !== dictSize || prev < 0) throw new GifDecodeError("corrupt LZW stream");
+      kwkwk = true;
+      cur = prev;
+    }
+    while (cur >= clear) {
+      stack[sp++] = suffix[cur];
+      cur = prefix[cur];
+    }
+    const first = cur; // the expansion's first byte (a literal)
+    stack[sp++] = first;
+    for (let i = sp - 1; i >= 0 && outPos < expected; i--) out[outPos++] = stack[i];
+    if (kwkwk && outPos < expected) out[outPos++] = first;
+
+    if (prev >= 0 && dictSize < MAX_DICT) {
+      prefix[dictSize] = prev;
+      suffix[dictSize] = first;
+      dictSize++;
+      // Grow the code width when the dictionary fills the current one; a full
+      // dictionary (4096) stays at 12 bits until the encoder sends a clear.
+      if (dictSize === 1 << codeSize && codeSize < 12) codeSize++;
+    }
+    prev = code;
+  }
+  return { indices: out, filled: outPos };
+}
+
+// ── Interlace ────────────────────────────────────────────────────────────────
+
+/** Reorder an interlaced frame's rows into display order (the 4-pass 8/8/4/2
+ *  row scheme). */
+function deinterlace(indices: Uint8Array, w: number, h: number): Uint8Array {
+  const out = new Uint8Array(indices.length);
+  const offsets = [0, 4, 2, 1];
+  const steps = [8, 8, 4, 2];
+  let src = 0;
+  for (let pass = 0; pass < 4; pass++) {
+    for (let y = offsets[pass]; y < h; y += steps[pass]) {
+      out.set(indices.subarray(src, src + w), y * w);
+      src += w;
+    }
+  }
+  return out;
+}
+
+// ── Compositor ───────────────────────────────────────────────────────────────
+
+/** Patch a frame's palette indices onto the full canvas. The transparent index
+ *  leaves the underlying pixel; rows/cols outside the logical screen (broken
+ *  files) and indices beyond the color table are skipped. `filled` bounds a
+ *  partially decoded frame to the pixels that actually landed. */
+function drawFrame(
+  canvas: Uint8ClampedArray,
+  cw: number,
+  ch: number,
+  indices: Uint8Array,
+  filled: number,
+  left: number,
+  top: number,
+  w: number,
+  h: number,
+  table: Uint8Array,
+  transparent: number,
+): void {
+  for (let row = 0; row < h; row++) {
+    const cy = top + row;
+    if (cy < 0 || cy >= ch) continue;
+    const rowBase = row * w;
+    if (rowBase >= filled) break;
+    for (let col = 0; col < w; col++) {
+      const src = rowBase + col;
+      if (src >= filled) break;
+      const cx = left + col;
+      if (cx < 0 || cx >= cw) continue;
+      const idx = indices[src];
+      if (idx === transparent) continue;
+      const t = idx * 3;
+      if (t + 2 >= table.length) continue;
+      const p = (cy * cw + cx) * 4;
+      canvas[p] = table[t];
+      canvas[p + 1] = table[t + 1];
+      canvas[p + 2] = table[t + 2];
+      canvas[p + 3] = 255;
+    }
+  }
+}
+
+/** Clear a rect to transparent (disposal 2 — see module comment). */
+function clearRect(
+  canvas: Uint8ClampedArray,
+  cw: number,
+  ch: number,
+  left: number,
+  top: number,
+  w: number,
+  h: number,
+): void {
+  const x0 = Math.max(0, left);
+  const x1 = Math.min(cw, left + w);
+  const y0 = Math.max(0, top);
+  const y1 = Math.min(ch, top + h);
+  for (let y = y0; y < y1; y++) canvas.fill(0, (y * cw + x0) * 4, (y * cw + x1) * 4);
+}
+
+// ── Stream decoder ───────────────────────────────────────────────────────────
+
+/** Incremental decoder: `nextFrame()` decodes and returns one composited frame
+ *  at a time (null after the trailer / truncation), so a caller can yield to
+ *  the event loop between frames instead of blocking on a long file.
+ *  `loopCount`/`truncated` are settled once `nextFrame()` has returned null. */
+export interface GifStream {
+  readonly width: number;
+  readonly height: number;
+  nextFrame(): GifFrame | null;
+  readonly loopCount: number;
+  readonly truncated: boolean;
+}
+
+/** Parse the header/logical screen (throws `GifDecodeError` when `bytes` is not
+ *  a GIF) and return a {@link GifStream} over the frames. */
+export function openGif(
+  bytes: Uint8Array,
+  opts?: { maxPixelBytes?: number },
+): GifStream {
+  const c: Cursor = { bytes, pos: 0 };
+  const magic = String.fromCharCode(...take(c, 6));
+  if (magic !== "GIF87a" && magic !== "GIF89a") throw new GifDecodeError("not a GIF file");
+  const width = u16le(c);
+  const height = u16le(c);
+  if (width === 0 || height === 0) throw new GifDecodeError("empty logical screen");
+  const lsdFlags = u8(c);
+  u8(c); // background color index — unused (see module comment on disposal 2)
+  u8(c); // pixel aspect ratio — universally ignored
+  const gct = lsdFlags & 0x80 ? take(c, 3 * (2 << (lsdFlags & 7))) : null;
+
+  const maxPixelBytes = opts?.maxPixelBytes ?? DEFAULT_MAX_PIXEL_BYTES;
+  const frameBytes = width * height * 4;
+  // The persistent composite canvas; starts fully transparent.
+  const canvas = new Uint8ClampedArray(frameBytes);
+  let snapshot: Uint8ClampedArray | null = null;
+  // The pending Graphic Control Extension — it precedes and applies to the next
+  // image descriptor only.
+  let pending: { delayMs: number; disposal: number; transparent: number } | null = null;
+  let loopCount = 1;
+  let truncated = false;
+  let done = false;
+  let delivered = 0;
+
+  function readNext(): GifFrame | null {
+    while (true) {
+      const block = u8(c);
+      if (block === 0x3b) return null; // trailer
+      if (block === 0x21) {
+        const label = u8(c);
+        if (label === 0xf9) {
+          // Graphic Control Extension: disposal + transparency + delay.
+          const d = readSubBlocks(c);
+          if (d.length >= 4) {
+            pending = {
+              disposal: (d[0] >> 2) & 7,
+              transparent: d[0] & 1 ? d[3] : -1,
+              delayMs: (d[1] | (d[2] << 8)) * 10,
+            };
+          }
+        } else if (label === 0xff) {
+          // Application extension — only the Netscape loop count matters.
+          const d = readSubBlocks(c);
+          const id = String.fromCharCode(...d.subarray(0, 11));
+          if ((id === "NETSCAPE2.0" || id === "ANIMEXTS1.0") && d.length >= 14 && d[11] === 1) {
+            loopCount = d[12] | (d[13] << 8);
+          }
+        } else {
+          // Comment / plain-text / unknown extension: skip leniently — real-world
+          // GIFs carry junk extensions.
+          readSubBlocks(c);
+        }
+        continue;
+      }
+      if (block === 0x2c) {
+        // Image descriptor.
+        const left = u16le(c);
+        const top = u16le(c);
+        const w = u16le(c);
+        const h = u16le(c);
+        const dFlags = u8(c);
+        const lct = dFlags & 0x80 ? take(c, 3 * (2 << (dFlags & 7))) : null;
+        const table = lct ?? gct;
+        if (!table) throw new GifDecodeError("frame has no color table");
+        if (w === 0 || h === 0) throw new GifDecodeError("empty frame");
+        if ((delivered + 1) * frameBytes > maxPixelBytes) {
+          truncated = true;
+          return null;
+        }
+        const minCodeSize = u8(c);
+        if (minCodeSize < 1 || minCodeSize > 11) throw new GifDecodeError("corrupt LZW code size");
+        const { indices, filled } = lzwDecode(minCodeSize, readSubBlocks(c), w * h);
+        const idx = dFlags & 0x40 ? deinterlace(indices, w, h) : indices;
+        const gce = pending;
+        pending = null;
+        const disposal = gce?.disposal ?? 0;
+        // Disposal 3 restores the state from BEFORE this frame drew — snapshot
+        // only then, so ordinary frames cost no copy.
+        if (disposal === 3) snapshot = canvas.slice();
+        drawFrame(canvas, width, height, idx, filled, left, top, w, h, table, gce?.transparent ?? -1);
+        const frame: GifFrame = {
+          pixels: canvas.slice(),
+          delayMs: gce?.delayMs ?? 0,
+          disposal,
+        };
+        // Apply this frame's disposal now, preparing the canvas the NEXT frame
+        // composites onto.
+        if (disposal === 2) clearRect(canvas, width, height, left, top, w, h);
+        else if (disposal === 3 && snapshot) {
+          canvas.set(snapshot);
+          snapshot = null;
+        }
+        if (filled < w * h) truncated = true; // LZW stream ended early
+        delivered++;
+        return frame;
+      }
+      throw new GifDecodeError(`unknown block 0x${block.toString(16)}`);
+    }
+  }
+
+  return {
+    width,
+    height,
+    get loopCount() {
+      return loopCount;
+    },
+    get truncated() {
+      return truncated;
+    },
+    nextFrame() {
+      if (done) return null;
+      let frame: GifFrame | null = null;
+      try {
+        frame = readNext();
+      } catch (e) {
+        // Corruption/EOF before the first complete frame is a hard error; after
+        // one, render what decoded cleanly (what browsers do).
+        if (delivered === 0) {
+          done = true;
+          throw e instanceof GifDecodeError ? e : new GifDecodeError(String(e));
+        }
+        truncated = true;
+      }
+      if (frame === null) done = true;
+      return frame;
+    },
+  };
+}
+
+/** Decode a whole GIF upfront (drains {@link openGif}). Throws `GifDecodeError`
+ *  when the bytes are not a GIF or no frame decodes. */
+export function decodeGif(bytes: Uint8Array, opts?: { maxPixelBytes?: number }): GifData {
+  const stream = openGif(bytes, opts);
+  const frames: GifFrame[] = [];
+  for (let f = stream.nextFrame(); f !== null; f = stream.nextFrame()) frames.push(f);
+  if (frames.length === 0) throw new GifDecodeError("GIF contains no image frames");
+  return {
+    width: stream.width,
+    height: stream.height,
+    frames,
+    loopCount: stream.loopCount,
+    truncated: stream.truncated,
+  };
+}
diff --git a/src/lib/viewers/python.ts b/src/lib/viewers/python.ts
new file mode 100644
index 0000000..83c0a7f
--- /dev/null
+++ b/src/lib/viewers/python.ts
@@ -0,0 +1,635 @@
+/**
+ * Python editor intelligence for the native code viewer (#py).
+ *
+ * Two independent features live here, both **pure** — every filesystem touch is
+ * injected — so the whole surface is unit-testable without a webview or a host:
+ *
+ *  1. **Breakpoints.** The gutter's red dots. A breakpoint is a line number, and
+ *     the only two hard parts are that pdb refuses blank/comment lines (so a
+ *     click has to *snap* to the next executable one) and that a breakpoint must
+ *     survive an edit above it (so it has to be *remapped* as the draft changes).
+ *  2. **Go-to-definition.** Ctrl/Cmd+Click a name and land on its `def`/`class` —
+ *     in this file or in the module it was imported from.
+ *
+ * The resolver is deliberately a *lexical* one, not a type inferencer: it follows
+ * the import graph and matches `def`/`class`/assignment names. That covers the
+ * overwhelmingly common cases (`from .util import helper` → `util.py`'s
+ * `def helper`) and, crucially, it is honest about what it can't do — an
+ * unresolvable name simply doesn't underline, so the affordance never lies.
+ * Anything requiring real type inference (`obj.method()` where `obj` is a local)
+ * is out of scope by construction.
+ */
+
+import { dirname, resolvePath } from "../paths";
+
+const PY_EXTENSIONS = [".py", ".pyi", ".pyw"];
+
+export function isPythonPath(path: string): boolean {
+  const lower = path.toLowerCase();
+  return PY_EXTENSIONS.some((ext) => lower.endsWith(ext));
+}
+
+const MAIN_GUARD_RE = /^if[ \t]+__name__[ \t]*==[ \t]*(['"])__main__\1[ \t]*:/m;
+
+/** Whether `source` is written to be *run*, not just imported — the standard,
+ *  unambiguous signal being a module-level `if __name__ == "__main__":` guard.
+ *  Gates the Run button: a plain library file has nothing useful to execute. */
+export function isPythonMainScript(source: string): boolean {
+  return MAIN_GUARD_RE.test(source);
+}
+
+// ── Breakpoints ──────────────────────────────────────────────────────────────
+
+/**
+ * Can pdb break on this line's text? Blank lines and pure comments carry no
+ * bytecode, and `break` on one is an error ("Blank or comment"), so the gutter
+ * must never place a breakpoint there. Decorators are excluded too: `@foo` is
+ * executed at *definition* time, and a break there fires on import rather than
+ * on the call the user meant.
+ */
+export function isExecutableLine(text: string): boolean {
+  const t = text.trim();
+  if (t === "") return false;
+  if (t.startsWith("#")) return false;
+  if (t.startsWith("@")) return false;
+  return true;
+}
+
+/**
+ * The line a click on `line` (1-based) should actually breakpoint on: `line`
+ * itself when it is executable, else the next executable line below it. Returns
+ * null when nothing below is executable (a click in the trailing blank space
+ * after the last statement), so the caller can no-op rather than set a
+ * breakpoint pdb will reject.
+ */
+export function snapBreakpointLine(source: string, line: number): number | null {
+  const lines = source.split("\n");
+  for (let i = line - 1; i < lines.length; i++) {
+    if (isExecutableLine(lines[i])) return i + 1;
+  }
+  return null;
+}
+
+/**
+ * Carry breakpoints across an edit.
+ *
+ * A breakpoint is bound to a *line number*, so inserting or deleting lines above
+ * one silently re-points it at the wrong statement — the dot stays put on screen
+ * while the code under it slides. We recompute instead: find the span of lines the
+ * edit actually touched (the unchanged common prefix/suffix of the two drafts) and
+ * shift every breakpoint below it by the line-count delta. Breakpoints *inside* the
+ * edited span are dropped — their statement may not exist any more, and guessing
+ * where it went would be worse than losing the dot the user can see is gone.
+ */
+export function remapBreakpoints(prev: string, next: string, bps: number[]): number[] {
+  if (prev === next || bps.length === 0) return bps;
+
+  const a = prev.split("\n");
+  const b = next.split("\n");
+
+  // Common prefix of unchanged lines.
+  let head = 0;
+  while (head < a.length && head < b.length && a[head] === b[head]) head++;
+  // Common suffix of unchanged lines, not overlapping the prefix.
+  let tail = 0;
+  while (
+    tail < a.length - head &&
+    tail < b.length - head &&
+    a[a.length - 1 - tail] === b[b.length - 1 - tail]
+  ) {
+    tail++;
+  }
+
+  // Lines [head+1 … a.length-tail] (1-based) of `prev` were replaced.
+  const editedFrom = head + 1;
+  const editedTo = a.length - tail;
+  const delta = b.length - a.length;
+
+  const out: number[] = [];
+  for (const bp of bps) {
+    if (bp < editedFrom) out.push(bp); // above the edit: untouched
+    else if (bp > editedTo) out.push(bp + delta); // below it: slides by the delta
+    // inside the edited span: dropped
+  }
+  return [...new Set(out)].sort((x, y) => x - y);
+}
+
+// ── Lexing ───────────────────────────────────────────────────────────────────
+
+const IDENT_RE = /[A-Za-z_][A-Za-z0-9_]*/y;
+/** String prefixes (`r"…"`, `f"…"`, `rb"…"`, …). An identifier immediately
+ *  followed by a quote is a prefix, not a name. */
+const STRING_PREFIX = new Set(["r", "b", "u", "f", "rb", "br", "fr", "rf"]);
+
+const PY_KEYWORDS = new Set([
+  "False", "None", "True", "and", "as", "assert", "async", "await", "break",
+  "class", "continue", "def", "del", "elif", "else", "except", "finally",
+  "for", "from", "global", "if", "import", "in", "is", "lambda", "nonlocal",
+  "not", "or", "pass", "raise", "return", "try", "while", "with", "yield",
+]);
+
+/** One identifier occurrence in code (never inside a string or comment). */
+export interface PyToken {
+  name: string;
+  start: number;
+  end: number;
+  /** The identifier immediately before a `.` preceding this one (`os.path` →
+   *  `path`'s qualifier is `os`), or null when this name stands alone. */
+  qualifier: string | null;
+}
+
+/**
+ * Every identifier in `source` that is really *code* — string bodies, comments
+ * and string prefixes are skipped. This is the substrate for both the link
+ * ranges and the ref-at-caret lookup: a lexer, not a parser, which is all the
+ * lexical resolver needs and is robust against the syntax errors a live editor
+ * buffer is full of.
+ */
+export function pythonTokens(source: string): PyToken[] {
+  const out: PyToken[] = [];
+  const n = source.length;
+  let i = 0;
+  // The last identifier seen, and whether a bare `.` sat between it and here —
+  // together they give each token its qualifier.
+  let prevIdent: string | null = null;
+  let prevIdentEnd = -1;
+
+  while (i < n) {
+    const c = source[i];
+
+    if (c === "#") {
+      while (i < n && source[i] !== "\n") i++;
+      continue;
+    }
+
+    if (c === '"' || c === "'") {
+      i = skipString(source, i);
+      prevIdent = null;
+      continue;
+    }
+
+    if (/[A-Za-z_]/.test(c)) {
+      IDENT_RE.lastIndex = i;
+      const m = IDENT_RE.exec(source);
+      // The regex is sticky and `c` starts an identifier, so this always matches.
+      const name = m![0];
+      const start = i;
+      const end = i + name.length;
+
+      // A string prefix (`f"…"`) is part of the literal, not a name.
+      const next = source[end];
+      if ((next === '"' || next === "'") && STRING_PREFIX.has(name.toLowerCase())) {
+        i = skipString(source, end);
+        prevIdent = null;
+        continue;
+      }
+
+      // Qualified? Only when a single `.` separates us from the previous
+      // identifier (whitespace around it is legal Python).
+      let qualifier: string | null = null;
+      if (prevIdent != null) {
+        const between = source.slice(prevIdentEnd, start);
+        if (/^\s*\.\s*$/.test(between)) qualifier = prevIdent;
+      }
+
+      out.push({ name, start, end, qualifier });
+      prevIdent = name;
+      prevIdentEnd = end;
+      i = end;
+      continue;
+    }
+
+    // Anything that isn't whitespace or a dot breaks a dotted chain.
+    if (!/[\s.]/.test(c)) {
+      prevIdent = null;
+    }
+    i++;
+  }
+
+  return out;
+}
+
+/** Index just past the string literal starting at `i` (which is on its quote).
+ *  Handles triple quotes and backslash escapes; an unterminated literal (the
+ *  normal state of a buffer being typed into) consumes to EOF. */
+function skipString(source: string, i: number): number {
+  const q = source[i];
+  const triple = source.startsWith(q.repeat(3), i);
+  const close = triple ? q.repeat(3) : q;
+  let j = i + close.length;
+  while (j < source.length) {
+    if (source[j] === "\\") {
+      j += 2;
+      continue;
+    }
+    if (source.startsWith(close, j)) return j + close.length;
+    // A single-quoted literal cannot span a newline.
+    if (!triple && source[j] === "\n") return j;
+    j++;
+  }
+  return source.length;
+}
+
+// ── Definitions ──────────────────────────────────────────────────────────────
+
+export interface PyDef {
+  name: string;
+  /** 1-based line of the definition. */
+  line: number;
+  /** 0-based column of the *name* (so the caret lands on it, not on `def`). */
+  column: number;
+  kind: "def" | "class" | "var";
+}
+
+const DEF_RE = /^[ \t]*(?:async[ \t]+)?(def|class)[ \t]+([A-Za-z_][A-Za-z0-9_]*)/;
+/** A module-level (unindented) binding: `NAME = …` or `NAME: T = …`. Catches the
+ *  constants and singletons a `from x import CONFIG` points at. */
+const ASSIGN_RE = /^([A-Za-z_][A-Za-z0-9_]*)[ \t]*(?::[^=\n]+)?=(?!=)/;
+
+/** Every `def`/`class`/module-level assignment in `source`, in file order. */
+export function findPythonDefs(source: string): PyDef[] {
+  const out: PyDef[] = [];
+  const lines = source.split("\n");
+  for (let i = 0; i < lines.length; i++) {
+    const text = lines[i];
+    const d = DEF_RE.exec(text);
+    if (d) {
+      out.push({
+        name: d[2],
+        line: i + 1,
+        column: text.indexOf(d[2], d[0].length - d[2].length),
+        kind: d[1] === "class" ? "class" : "def",
+      });
+      continue;
+    }
+    const a = ASSIGN_RE.exec(text);
+    if (a) out.push({ name: a[1], line: i + 1, column: 0, kind: "var" });
+  }
+  return out;
+}
+
+/** The definition of `name` in `source`, preferring a `def`/`class` over a bare
+ *  assignment (a function shadowed by a later `f = None` should still jump to
+ *  the function). */
+export function findDef(source: string, name: string): PyDef | null {
+  const defs = findPythonDefs(source).filter((d) => d.name === name);
+  if (defs.length === 0) return null;
+  return defs.find((d) => d.kind !== "var") ?? defs[0];
+}
+
+// ── Imports ──────────────────────────────────────────────────────────────────
+
+/**
+ * One name this file binds via an import.
+ *
+ * The two Python import forms collapse into one record. `import os.path as p`
+ * binds the *module* `os.path` to `p` (`symbol` empty). `from .util import helper`
+ * binds the *symbol* `helper` out of the relative module `util` (`level` 1).
+ */
+export interface PyImport {
+  /** The name as it is used in this file (the `as` alias when there is one). */
+  local: string;
+  /** Dotted module path; "" for a bare relative import (`from . import x`). */
+  module: string;
+  /** Leading-dot count: 0 = absolute, 1 = this package, 2 = parent, … */
+  level: number;
+  /** The symbol taken out of `module`, or "" when `local` *is* the module. */
+  symbol: string;
+}
+
+/**
+ * Parse the import statements of `source`.
+ *
+ * Comments and strings are stripped first (via {@link pythonTokens}' sibling
+ * logic) — a docstring containing the word "import" must not bind a name. Only
+ * statement-leading `import`/`from` are considered, and parenthesised multi-line
+ * `from x import (a, b)` lists are joined before splitting.
+ */
+export function parsePythonImports(source: string): PyImport[] {
+  const out: PyImport[] = [];
+  for (const stmt of importStatements(source)) {
+    const from = /^from[ \t]+(\.*)([A-Za-z_][A-Za-z0-9_.]*)?[ \t]+import[ \t]+(.+)$/s.exec(stmt);
+    if (from) {
+      const level = from[1].length;
+      const module = from[2] ?? "";
+      const body = from[3].replace(/^\(|\)$/g, "").trim();
+      for (const part of body.split(",")) {
+        const item = /^([A-Za-z_][A-Za-z0-9_]*)(?:[ \t]+as[ \t]+([A-Za-z_][A-Za-z0-9_]*))?$/.exec(
+          part.trim(),
+        );
+        if (!item) continue; // `*`, or a fragment mid-typing
+        out.push({ local: item[2] ?? item[1], module, level, symbol: item[1] });
+      }
+      continue;
+    }
+
+    const plain = /^import[ \t]+(.+)$/s.exec(stmt);
+    if (plain) {
+      for (const part of plain[1].split(",")) {
+        const item = /^([A-Za-z_][A-Za-z0-9_.]*)(?:[ \t]+as[ \t]+([A-Za-z_][A-Za-z0-9_]*))?$/.exec(
+          part.trim(),
+        );
+        if (!item) continue;
+        const module = item[1];
+        // `import a.b` binds `a`; `import a.b as c` binds `c` to `a.b`.
+        const local = item[2] ?? module.split(".")[0];
+        out.push({ local, module, level: 0, symbol: "" });
+      }
+    }
+  }
+  return out;
+}
+
+/** The logical import statements of `source`: comment/string-free, with
+ *  parenthesised and backslash continuations folded into one line each. */
+function importStatements(source: string): string[] {
+  const out: string[] = [];
+  const lines = stripCommentsAndStrings(source).split("\n");
+  for (let i = 0; i < lines.length; i++) {
+    let text = lines[i];
+    if (!/^[ \t]*(?:import|from)[ \t]/.test(text)) continue;
+    // Fold continuations: an open paren, or a trailing backslash.
+    let depth = (text.match(/\(/g)?.length ?? 0) - (text.match(/\)/g)?.length ?? 0);
+    while ((depth > 0 || /\\$/.test(text)) && i + 1 < lines.length) {
+      text = text.replace(/\\$/, "") + " " + lines[++i].trim();
+      depth = (text.match(/\(/g)?.length ?? 0) - (text.match(/\)/g)?.length ?? 0);
+    }
+    out.push(text.trim());
+  }
+  return out;
+}
+
+/** Blank out comments and string bodies, preserving offsets and line structure,
+ *  so line-oriented matching can't be fooled by a docstring. */
+function stripCommentsAndStrings(source: string): string {
+  const chars = source.split("");
+  let i = 0;
+  while (i < source.length) {
+    const c = source[i];
+    if (c === "#") {
+      while (i < source.length && source[i] !== "\n") chars[i++] = " ";
+      continue;
+    }
+    if (c === '"' || c === "'") {
+      const end = skipString(source, i);
+      for (let j = i; j < end; j++) if (chars[j] !== "\n") chars[j] = " ";
+      i = end;
+      continue;
+    }
+    i++;
+  }
+  return chars.join("");
+}
+
+// ── Reference at the caret ───────────────────────────────────────────────────
+
+/** The name under the caret, with its source range and dotted qualifier. */
+export type PyRef = PyToken;
+
+/** The identifier the caret sits in (or immediately after), or null. */
+export function pythonRefAt(source: string, caret: number): PyRef | null {
+  for (const t of pythonTokens(source)) {
+    if (caret >= t.start && caret <= t.end) return t;
+    if (t.start > caret) break; // tokens are in source order
+  }
+  return null;
+}
+
+/**
+ * The source ranges to underline as ctrl-clickable (#49's `linkRanges` contract).
+ *
+ * Only names this resolver can actually *follow* are underlined — a name defined
+ * in this file, a name imported into it, or an attribute of an imported module.
+ * That keeps the affordance honest: if it's underlined, clicking it lands
+ * somewhere. Definition sites themselves are excluded (jumping from `def foo` to
+ * `def foo` is a no-op that would make every definition look like a link).
+ */
+export function pythonLinkRanges(source: string): { start: number; end: number }[] {
+  const defs = findPythonDefs(source);
+  const defNames = new Set(defs.map((d) => d.name));
+  // Every definition site — `def`/`class` AND a module-level binding. A name is
+  // not a link where it is being *defined*: the jump would land on itself.
+  const defSites = new Set(defs.map((d) => `${d.line}:${d.name}`));
+
+  const imports = parsePythonImports(source);
+  const importedNames = new Set(imports.map((i) => i.local));
+  const importedModules = new Set(imports.filter((i) => i.symbol === "").map((i) => i.local));
+
+  // Line number of each offset, so a def site can be excluded by (line, name).
+  const lineOf = lineIndex(source);
+
+  const out: { start: number; end: number }[] = [];
+  for (const t of pythonTokens(source)) {
+    if (PY_KEYWORDS.has(t.name)) continue;
+
+    if (t.qualifier != null) {
+      // `mod.thing` — followable only when `mod` is an imported module, or when
+      // it is `self` (then `thing` is a method of the class in THIS file).
+      if (importedModules.has(t.qualifier) || t.qualifier === "self") {
+        if (t.qualifier === "self" && !defNames.has(t.name)) continue;
+        out.push({ start: t.start, end: t.end });
+      }
+      continue;
+    }
+
+    if (importedNames.has(t.name)) {
+      out.push({ start: t.start, end: t.end });
+      continue;
+    }
+    if (defNames.has(t.name) && !defSites.has(`${lineOf(t.start)}:${t.name}`)) {
+      out.push({ start: t.start, end: t.end });
+    }
+  }
+  return out;
+}
+
+/** A function mapping a source offset to its 1-based line number. */
+function lineIndex(source: string): (offset: number) => number {
+  const starts: number[] = [0];
+  for (let i = 0; i < source.length; i++) if (source[i] === "\n") starts.push(i + 1);
+  return (offset: number) => {
+    let lo = 0;
+    let hi = starts.length - 1;
+    while (lo < hi) {
+      const mid = (lo + hi + 1) >> 1;
+      if (starts[mid] <= offset) lo = mid;
+      else hi = mid - 1;
+    }
+    return lo + 1;
+  };
+}
+
+// ── Module → file ────────────────────────────────────────────────────────────
+
+/**
+ * The files an import could name, best candidate first.
+ *
+ * A relative import (`level > 0`) is anchored at this file's directory, walking
+ * up one level per extra dot — unambiguous. An absolute one is genuinely
+ * ambiguous without the interpreter's `sys.path`, so we probe the roots a project
+ * actually uses, in order: the project root (flat layout), a `src/` root
+ * (src-layout), and finally the importing file's own directory (scripts that sit
+ * beside their modules). Each root yields both `pkg/mod.py` and the package form
+ * `pkg/mod/__init__.py`.
+ */
+export function modulePathCandidates(
+  imp: Pick<PyImport, "module" | "level">,
+  filePath: string,
+  projectRoot: string,
+): string[] {
+  const parts = imp.module ? imp.module.split(".") : [];
+
+  const roots: string[] = [];
+  if (imp.level > 0) {
+    // `.` = this file's package; each extra dot climbs one more.
+    let base = dirname(filePath) || "/";
+    for (let i = 1; i < imp.level; i++) base = dirname(base) || base;
+    roots.push(base);
+  } else {
+    if (projectRoot) {
+      roots.push(projectRoot);
+      roots.push(resolvePath(projectRoot, "src"));
+    }
+    roots.push(dirname(filePath) || "/");
+  }
+
+  const out: string[] = [];
+  for (const root of roots) {
+    // A bare `from . import x` names the package directory itself.
+    const base = parts.length ? resolvePath(root, parts.join("/")) : root;
+    if (parts.length) out.push(`${base}.py`);
+    out.push(resolvePath(base, "__init__.py"));
+  }
+  return [...new Set(out)];
+}
+
+// ── Resolution ───────────────────────────────────────────────────────────────
+
+/** Where a definition lives: an absolute path and a 1-based caret target. */
+export interface PyLocation {
+  path: string;
+  line: number;
+  column: number;
+}
+
+/** Injected file access, so resolution is testable without a host. Returns null
+ *  when the path does not exist (or can't be read) — reading a candidate IS the
+ *  existence check, since the content is needed anyway. */
+export type PyReader = (path: string) => Promise<string | null>;
+
+/**
+ * Resolve the name at `caret` to its definition — the whole point of ctrl+click.
+ *
+ * The cases, in the order they are tried:
+ *  - `self.method()` → the `def` in this file's class.
+ *  - `mod.thing` where `mod` was imported → `thing`'s def in the module's file.
+ *  - a name from `from mod import name` → its def in the module's file; failing
+ *    that, `mod/name.py` (the form where the "symbol" is itself a submodule).
+ *  - an imported module name → the top of that module's file.
+ *  - anything else defined in this file → its def here.
+ *
+ * Returns null when nothing resolves — the caller must treat that as "not a
+ * link" rather than guessing.
+ */
+export async function resolvePythonDefinition(
+  source: string,
+  caret: number,
+  filePath: string,
+  projectRoot: string,
+  read: PyReader,
+): Promise<PyLocation | null> {
+  const ref = pythonRefAt(source, caret);
+  if (!ref || PY_KEYWORDS.has(ref.name)) return null;
+
+  const imports = parsePythonImports(source);
+  const localDef = (name: string): PyLocation | null => {
+    const d = findDef(source, name);
+    return d ? { path: filePath, line: d.line, column: d.column } : null;
+  };
+
+  // `self.method` — a method of a class in this very file.
+  if (ref.qualifier === "self") return localDef(ref.name);
+
+  // `mod.thing` — follow `mod` to its file, then find `thing` in it.
+  if (ref.qualifier != null) {
+    const mod = imports.find((i) => i.local === ref.qualifier && i.symbol === "");
+    if (!mod) return null;
+    return await defInModule(mod, ref.name, filePath, projectRoot, read, new Set());
+  }
+
+  const imported = imports.find((i) => i.local === ref.name);
+  if (imported) {
+    if (imported.symbol) {
+      // `from mod import name` — `name`'s def in mod, else mod/name.py.
+      const hit = await defInModule(
+        imported,
+        imported.symbol,
+        filePath,
+        projectRoot,
+        read,
+        new Set(),
+      );
+      if (hit) return hit;
+      const asModule: PyImport = {
+        ...imported,
+        module: imported.module
+          ? `${imported.module}.${imported.symbol}`
+          : imported.symbol,
+      };
+      return await moduleHead(asModule, filePath, projectRoot, read);
+    }
+    // `import mod` — open the module itself.
+    return await moduleHead(imported, filePath, projectRoot, read);
+  }
+
+  return localDef(ref.name);
+}
+
+/**
+ * `name`'s definition inside `imp`'s module file, or null.
+ *
+ * Follows one hop of re-export (`__init__.py` doing `from .impl import thing` is
+ * the single most common shape in real packages), which makes the recursion able
+ * to cycle: `a` re-exports from `b` while `b` imports from `a` is legal Python and
+ * happens. `seen` is what makes that terminate — without it a circular re-export
+ * hangs the click.
+ */
+async function defInModule(
+  imp: PyImport,
+  name: string,
+  filePath: string,
+  projectRoot: string,
+  read: PyReader,
+  seen: Set<string>,
+): Promise<PyLocation | null> {
+  for (const candidate of modulePathCandidates(imp, filePath, projectRoot)) {
+    const visitKey = `${candidate}#${name}`;
+    if (seen.has(visitKey)) continue;
+    seen.add(visitKey);
+
+    const text = await read(candidate);
+    if (text == null) continue;
+    const d = findDef(text, name);
+    if (d) return { path: candidate, line: d.line, column: d.column };
+    // The module exists but doesn't define the name — it may re-export it.
+    const via = parsePythonImports(text).find((i) => i.local === name && i.symbol);
+    if (via) {
+      const hit = await defInModule(via, via.symbol, candidate, projectRoot, read, seen);
+      if (hit) return hit;
+    }
+  }
+  return null;
+}
+
+/** The top of `imp`'s module file, or null when no candidate exists. */
+async function moduleHead(
+  imp: PyImport,
+  filePath: string,
+  projectRoot: string,
+  read: PyReader,
+): Promise<PyLocation | null> {
+  for (const candidate of modulePathCandidates(imp, filePath, projectRoot)) {
+    if ((await read(candidate)) != null) return { path: candidate, line: 1, column: 0 };
+  }
+  return null;
+}
diff --git a/src/lib/viewers/table.ts b/src/lib/viewers/table.ts
index 5bc3d21..0a23a80 100644
--- a/src/lib/viewers/table.ts
+++ b/src/lib/viewers/table.ts
@@ -1,54 +1,135 @@
 /**
- * Pure, dependency-free CSV/TSV parsing and sorting for the table viewer (#40).
- * No DOM, no React — unit-tested in isolation (`src/__tests__/table.test.ts`).
+ * Pure, dependency-free CSV/TSV parsing, sniffing, editing and sorting for the
+ * table viewer (#40). No DOM, no React — unit-tested in isolation
+ * (`src/__tests__/table.test.ts`).
+ *
+ * Two things are worth internalising before changing anything here:
+ *
+ *  - **The separator is guessed, not known.** `.csv` says nothing about which
+ *    character separates the columns: a European export is `;`-delimited, a pipe
+ *    dump `|`-delimited, and both are called `.csv`. Assuming "comma" from the
+ *    extension is exactly what makes such a file render as a single column. So
+ *    the delimiter is *sniffed* from the content, and stays user-overridable —
+ *    see {@link sniffDelimiter}.
+ *
+ *  - **The table is a view on the text, not a model of it.** Every edit
+ *    ({@link replaceCell}, {@link insertRowAfter}, {@link deleteRow}) is a
+ *    surgical splice into the source string, addressed by the spans
+ *    {@link parseTable} hands back — never a re-serialisation of the parsed
+ *    rows. That is the only way editing one cell leaves every *other* cell
+ *    byte-for-byte alone, keeping each field's original quoting style, the
+ *    file's line endings and its delimiter. It is the same bargain
+ *    `lib/viewers/yaml.ts` strikes to keep a config file's comments.
  */
 
-/** A leading UTF-8 BOM that some editors prepend; stripped before parsing. */
+/** A leading UTF-8 BOM that some editors prepend; skipped, never sliced off. */
 const BOM = "";
 
+/** The source range of one parsed field, as offsets into the *original* text. */
+export interface CellSpan {
+  /** Offset of the field's first character (inclusive). */
+  start: number;
+  /** Offset one past the field's last character (exclusive). */
+  end: number;
+}
+
+/** The source range of one parsed row, as offsets into the *original* text. */
+export interface RowSpan {
+  /** Offset of the row's first character (inclusive). */
+  start: number;
+  /** Offset one past the row's last character, EXCLUDING its line terminator. */
+  end: number;
+  /**
+   * Offset one past the row's line terminator — equal to `end` for a final row
+   * the file leaves unterminated. That equality is how the edit ops tell "this
+   * row ends with a newline" from "this row ends with the file".
+   */
+  next: number;
+}
+
+/** {@link parseTable}'s result: the cells, and where each one came from. */
+export interface ParsedTable {
+  /** Row-major cell values, quoting already decoded. */
+  rows: string[][];
+  /** `cells[r][c]` is the source span of `rows[r][c]`. Same shape as `rows`. */
+  cells: CellSpan[][];
+  /** `rowSpans[r]` is the source span of `rows[r]`. */
+  rowSpans: RowSpan[];
+  /** The file's dominant line terminator, used when a new row is inserted. */
+  newline: string;
+}
+
+/**
+ * A row paired with its index into {@link ParsedTable.rows}. Filtering and
+ * sorting reorder and drop rows, so a row on screen can no longer say where it
+ * came from — but an edit has to splice the row it *actually* came from. The
+ * index is what survives the reordering.
+ */
+export interface RowRef {
+  cells: string[];
+  /** Index into `ParsedTable.rows` — so `0` is the header, `1` the first body row. */
+  index: number;
+}
+
 /**
  * Parse `text` as RFC 4180 delimited data with the given single-character
- * `delimiter` (`,` for CSV, `\t` for TSV). Returns an array of rows, each an
- * array of string cells.
+ * `delimiter`, recording the source span of every cell and row so the result can
+ * be edited by splicing rather than re-serialising.
  *
  * Handles:
  *  - quoted fields (`"…"`) that may contain the delimiter, CR, LF, or CRLF;
  *  - the `""` escape for a literal double-quote inside a quoted field;
  *  - CRLF and bare-LF (and bare-CR) line endings;
- *  - a leading BOM, stripped up front;
+ *  - a leading BOM, skipped — offsets stay absolute into the original text, so a
+ *    span can be spliced straight back into it;
  *  - a single trailing newline — it does NOT emit a trailing empty row.
  *
  * A quote that appears mid-field in an unquoted context is treated as a literal
  * character (lenient, like most spreadsheet importers), so malformed input still
  * yields cells rather than throwing.
  */
-export function parseDelimited(text: string, delimiter: string): string[][] {
-  const src = text.startsWith(BOM) ? text.slice(1) : text;
+export function parseTable(text: string, delimiter: string): ParsedTable {
+  // Skip a BOM by starting past it rather than slicing it away: every span must
+  // index into the caller's string, or splicing one back would be off by one.
+  const begin = text.startsWith(BOM) ? 1 : 0;
+
   const rows: string[][] = [];
+  const cells: CellSpan[][] = [];
+  const rowSpans: RowSpan[] = [];
+
   let row: string[] = [];
+  let rowCells: CellSpan[] = [];
   let field = "";
+  let fieldStart = begin;
+  let rowStart = begin;
   let inQuotes = false;
   // Tracks whether the current row has seen any content, so we can decide
   // whether a final dangling row (after a trailing newline) should be emitted.
   let rowStarted = false;
 
-  const pushField = () => {
+  const pushField = (end: number) => {
     row.push(field);
+    rowCells.push({ start: fieldStart, end });
     field = "";
   };
-  const pushRow = () => {
-    pushField();
+  const pushRow = (end: number, next: number) => {
+    pushField(end);
     rows.push(row);
+    cells.push(rowCells);
+    rowSpans.push({ start: rowStart, end, next });
     row = [];
+    rowCells = [];
     rowStarted = false;
+    fieldStart = next;
+    rowStart = next;
   };
 
-  for (let i = 0; i < src.length; i++) {
-    const ch = src[i];
+  for (let i = begin; i < text.length; i++) {
+    const ch = text[i];
 
     if (inQuotes) {
       if (ch === '"') {
-        if (src[i + 1] === '"') {
+        if (text[i + 1] === '"') {
           // Escaped quote inside a quoted field.
           field += '"';
           i++;
@@ -67,18 +148,20 @@ export function parseDelimited(text: string, delimiter: string): string[][] {
       continue;
     }
     if (ch === delimiter) {
-      pushField();
+      pushField(i);
+      fieldStart = i + 1;
       rowStarted = true;
       continue;
     }
     if (ch === "\r") {
       // Treat CRLF as one line ending; a bare CR also ends the line.
-      if (src[i + 1] === "\n") i++;
-      pushRow();
+      const crlf = text[i + 1] === "\n";
+      pushRow(i, crlf ? i + 2 : i + 1);
+      if (crlf) i++;
       continue;
     }
     if (ch === "\n") {
-      pushRow();
+      pushRow(i, i + 1);
       continue;
     }
     field += ch;
@@ -88,17 +171,210 @@ export function parseDelimited(text: string, delimiter: string): string[][] {
   // Flush the final field/row unless the input ended exactly on a row terminator
   // (a single trailing newline must not produce a trailing empty row).
   if (rowStarted || field !== "" || row.length > 0 || inQuotes) {
-    pushRow();
+    pushRow(text.length, text.length);
   }
 
-  return rows;
+  return {
+    rows,
+    cells,
+    rowSpans,
+    newline: text.includes("\r\n") ? "\r\n" : "\n",
+  };
+}
+
+/** {@link parseTable}, when only the values are wanted. */
+export function parseDelimited(text: string, delimiter: string): string[][] {
+  return parseTable(text, delimiter).rows;
 }
 
-/** Detect the delimiter for a file path by extension: `.tsv` → tab, else comma. */
+// ── Choosing the separator ───────────────────────────────────────────────────
+
+/** The separators {@link sniffDelimiter} considers, and the viewer offers. */
+export const DELIMITER_CANDIDATES = [",", ";", "\t", "|"] as const;
+
+/** How much of a large file to look at when sniffing, and how many rows of it. */
+const SNIFF_CHARS = 64 * 1024;
+const SNIFF_ROWS = 50;
+
+/**
+ * Guess which character separates the columns of `text`, falling back to
+ * `fallback` when nothing splits it convincingly — a genuinely single-column
+ * file has no delimiter to find, and inventing one would shred it.
+ *
+ * Each candidate is scored by parsing a sample of the file *with that candidate*
+ * — so a comma sitting inside a quoted field can't fool the `;` reading — and
+ * asking how rectangular the result is. The modal column count decides, on two
+ * premises:
+ *
+ *  - a character that never splits a row (modal width 1) is not the delimiter,
+ *    however consistently it fails to appear. This is what rejects `,` on a
+ *    `;`-delimited file, where every row would otherwise score a perfect 1.0;
+ *  - real tabular data is rectangular, so the delimiter yielding the *same* width
+ *    on the most rows is the one the file was written with. Consistency therefore
+ *    dominates the score, and the column count only breaks ties — in favour of
+ *    the separator that explains more of the row.
+ */
+export function sniffDelimiter(text: string, fallback = ","): string {
+  const truncated = text.length > SNIFF_CHARS;
+  const sample = truncated ? text.slice(0, SNIFF_CHARS) : text;
+
+  let best: string | null = null;
+  let bestScore = -1;
+
+  for (const candidate of DELIMITER_CANDIDATES) {
+    const parsed = parseDelimited(sample, candidate);
+    const rows = (truncated && parsed.length > 1 ? parsed.slice(0, -1) : parsed)
+      // A sample cut mid-row reports a short final row that isn't real (above);
+      // blank lines say nothing about the delimiter either way.
+      .slice(0, SNIFF_ROWS)
+      .filter((r) => !(r.length === 1 && r[0].trim() === ""));
+    if (rows.length === 0) continue;
+
+    const freq = new Map<number, number>();
+    for (const r of rows) freq.set(r.length, (freq.get(r.length) ?? 0) + 1);
+
+    let mode = 0;
+    let modeCount = 0;
+    for (const [width, count] of freq) {
+      // On a tie, the wider reading wins — it explains more of the row.
+      if (count > modeCount || (count === modeCount && width > mode)) {
+        mode = width;
+        modeCount = count;
+      }
+    }
+    if (mode < 2) continue; // splits nothing ⇒ not the delimiter
+
+    const score = (modeCount / rows.length) * 100 + Math.min(mode, 50);
+    if (score > bestScore) {
+      bestScore = score;
+      best = candidate;
+    }
+  }
+
+  return best ?? fallback;
+}
+
+/** The separator a path's extension implies: `.tsv` → tab, else comma. */
 export function delimiterForPath(path: string): string {
   return /\.tsv$/i.test(path) ? "\t" : ",";
 }
 
+/**
+ * The separator to open `path` with: sniffed from the content, falling back to
+ * what the extension implies when the content is inconclusive — so a one-column
+ * `.tsv` still reads as a TSV.
+ */
+export function resolveDelimiter(path: string, text: string): string {
+  return sniffDelimiter(text, delimiterForPath(path));
+}
+
+// ── Editing: splices, never re-serialisation ─────────────────────────────────
+
+/**
+ * Encode one value as a field, quoting only when the value would otherwise be
+ * misread: it contains the delimiter, a quote, a newline, or leading/trailing
+ * whitespace that a reader would be free to trim.
+ */
+export function encodeCell(value: string, delimiter: string): string {
+  const ambiguous =
+    value.includes(delimiter) ||
+    value.includes('"') ||
+    value.includes("\n") ||
+    value.includes("\r") ||
+    value !== value.trim();
+  return ambiguous ? `"${value.replace(/"/g, '""')}"` : value;
+}
+
+/**
+ * Return `text` with the cell at (`row`, `col`) set to `value`, splicing only
+ * that one field's span so every other byte of the file survives untouched.
+ *
+ * When `col` lies past the end of a **ragged** row, the row is padded out with
+ * empty fields first: the viewer pads short rows to the table's full width on
+ * screen, so a cell can be visible in a row that holds no such field, and typing
+ * into it must write where it appears rather than land in the wrong column.
+ */
+export function replaceCell(
+  text: string,
+  table: ParsedTable,
+  row: number,
+  col: number,
+  value: string,
+  delimiter: string,
+): string {
+  const spans = table.cells[row];
+  if (!spans || spans.length === 0 || col < 0) return text;
+  const encoded = encodeCell(value, delimiter);
+
+  if (col < spans.length) {
+    const span = spans[col];
+    return text.slice(0, span.start) + encoded + text.slice(span.end);
+  }
+
+  const last = spans[spans.length - 1];
+  const padding = delimiter.repeat(col - spans.length + 1);
+  return text.slice(0, last.end) + padding + encoded + text.slice(last.end);
+}
+
+/** Return `text` with a blank `width`-column row inserted after `row`. */
+export function insertRowAfter(
+  text: string,
+  table: ParsedTable,
+  row: number,
+  width: number,
+  delimiter: string,
+): string {
+  const span = table.rowSpans[row];
+  if (!span) return text;
+  const blank = delimiter.repeat(Math.max(0, width - 1));
+  // A terminated row already ends in a newline, so the blank row follows it and
+  // brings its own. An unterminated final row needs the newline first — and must
+  // stay unterminated, or the file grows a trailing blank line it never had.
+  const terminated = span.next > span.end;
+  const insert = terminated ? blank + table.newline : table.newline + blank;
+  return text.slice(0, span.next) + insert + text.slice(span.next);
+}
+
+/** Return `text` with `row` removed, taking exactly one line terminator with it. */
+export function deleteRow(text: string, table: ParsedTable, row: number): string {
+  const span = table.rowSpans[row];
+  if (!span) return text;
+  // Normally a row takes its own trailing terminator with it. A final,
+  // unterminated row has none — so it takes the *preceding* one instead, rather
+  // than leaving the file ending on a dangling newline.
+  if (span.next > span.end) {
+    return text.slice(0, span.start) + text.slice(span.next);
+  }
+  const previous = row > 0 ? table.rowSpans[row - 1] : null;
+  const from = previous ? previous.end : span.start;
+  return text.slice(0, from) + text.slice(span.next);
+}
+
+// ── Filtering, sorting, layout ───────────────────────────────────────────────
+
+/** The body rows (everything below the header), each keeping its source index. */
+export function bodyRefs(rows: string[][]): RowRef[] {
+  const refs: RowRef[] = [];
+  for (let i = 1; i < rows.length; i++) refs.push({ cells: rows[i], index: i });
+  return refs;
+}
+
+/**
+ * The rows in which some cell contains `query`, case-insensitively. A blank query
+ * matches everything rather than nothing, so clearing the box restores the table.
+ *
+ * `cols` restricts the search to those column indices — the columns the reader can
+ * actually **see**. A row matched on a hidden column would appear in the results
+ * with nothing on it to explain why, which reads as a bug in the filter.
+ */
+export function filterRefs(refs: RowRef[], query: string, cols?: number[]): RowRef[] {
+  const needle = query.trim().toLowerCase();
+  if (needle === "") return refs;
+  const hit = (v: string) => v.toLowerCase().includes(needle);
+  if (!cols) return refs.filter((r) => r.cells.some(hit));
+  return refs.filter((r) => cols.some((c) => hit(r.cells[c] ?? "")));
+}
+
 /**
  * Whether every cell in `values` parses as a finite number (so the column should
  * sort numerically). An empty input or an empty/blank cell makes it non-numeric,
@@ -116,31 +392,71 @@ function allNumeric(values: string[]): boolean {
 }
 
 /**
- * Return a new copy of `rows` sorted by column `col` in direction `dir`. Numeric
- * comparison is used when every cell in that column (across `rows`) parses as a
- * finite number; otherwise `localeCompare`. Missing cells (ragged rows) are
- * treated as empty strings. Does not mutate the input. Stable for equal keys.
+ * Return a new copy of `refs` sorted by column `col` in direction `dir`. Numeric
+ * comparison is used when every cell in that column parses as a finite number;
+ * otherwise `localeCompare`. Missing cells (ragged rows) are treated as empty
+ * strings. Does not mutate the input. Stable for equal keys.
  */
+export function sortRefs(refs: RowRef[], col: number, dir: "asc" | "desc"): RowRef[] {
+  const numeric = allNumeric(refs.map((r) => r.cells[col] ?? ""));
+  // Decorate with the current position for a stable sort across engines.
+  const indexed = refs.map((r, i) => ({ r, i }));
+  indexed.sort((a, b) => {
+    const av = a.r.cells[col] ?? "";
+    const bv = b.r.cells[col] ?? "";
+    let cmp = numeric ? Number(av.trim()) - Number(bv.trim()) : av.localeCompare(bv);
+    if (cmp === 0) cmp = a.i - b.i; // keep stable order for ties
+    return dir === "asc" ? cmp : -cmp;
+  });
+  return indexed.map((x) => x.r);
+}
+
+/**
+ * Return a new copy of `refs` ordered by each row's **source index** — the file's
+ * own row order (`asc`) or its reverse (`desc`). This is what the row-number
+ * gutter sorts on: the gutter shows each row's source index, so ordering by it
+ * restores (asc) the order the rows have in the file — whatever a column sort did
+ * to the view — or reverses it (desc). Does not mutate the input.
+ */
+export function sortRefsByIndex(refs: RowRef[], dir: "asc" | "desc"): RowRef[] {
+  const sorted = [...refs].sort((a, b) => a.index - b.index);
+  return dir === "asc" ? sorted : sorted.reverse();
+}
+
+/** {@link sortRefs} over bare rows, for callers with no source indices to keep. */
 export function sortRows(
   rows: string[][],
   col: number,
   dir: "asc" | "desc",
 ): string[][] {
-  const cells = rows.map((r) => r[col] ?? "");
-  const numeric = allNumeric(cells);
-  // Decorate with the original index for a stable sort across engines.
-  const indexed = rows.map((r, i) => ({ r, i }));
-  indexed.sort((a, b) => {
-    const av = a.r[col] ?? "";
-    const bv = b.r[col] ?? "";
-    let cmp: number;
-    if (numeric) {
-      cmp = Number(av.trim()) - Number(bv.trim());
-    } else {
-      cmp = av.localeCompare(bv);
+  const refs = rows.map((cells, index) => ({ cells, index }));
+  return sortRefs(refs, col, dir).map((r) => r.cells);
+}
+
+/** Rows sampled when measuring column widths — enough to be representative. */
+const WIDTH_SAMPLE_ROWS = 1000;
+/** Width bounds, in characters, before the cell's own padding. */
+const MIN_WIDTH_CH = 4;
+const MAX_WIDTH_CH = 48;
+
+/**
+ * The display width of each of the table's `width` columns, in characters.
+ *
+ * Measured **once over the whole table**, not over what happens to be on screen,
+ * because the viewer only renders the rows in view: had each column sized itself
+ * to its visible content, every column would resize as the reader scrolled. A
+ * sample bounds the cost on a huge file — a later row that overflows its column
+ * is clipped, and the viewer offers the full value on hover, which is the price
+ * of columns that hold still.
+ */
+export function columnWidths(rows: string[][], width: number): number[] {
+  const widths = new Array<number>(width).fill(MIN_WIDTH_CH);
+  const limit = Math.min(rows.length, WIDTH_SAMPLE_ROWS);
+  for (let r = 0; r < limit; r++) {
+    const row = rows[r];
+    for (let c = 0; c < row.length && c < width; c++) {
+      if (row[c].length > widths[c]) widths[c] = row[c].length;
     }
-    if (cmp === 0) cmp = a.i - b.i; // keep stable order for ties
-    return dir === "asc" ? cmp : -cmp;
-  });
-  return indexed.map((x) => x.r);
+  }
+  return widths.map((w) => Math.min(w, MAX_WIDTH_CH));
 }
diff --git a/src/lib/viewers/yaml.ts b/src/lib/viewers/yaml.ts
new file mode 100644
index 0000000..19f3a9b
--- /dev/null
+++ b/src/lib/viewers/yaml.ts
@@ -0,0 +1,1930 @@
+/**
+ * The YAML/JSON tree model and its edit operations (#yaml).
+ *
+ * The tree is a VIEW ON THE TEXT, never a replacement for it: every edit is a
+ * surgical splice back into the source. Re-serializing the parsed model — the
+ * obvious shortcut — would rewrite the whole file and drop every comment in it,
+ * which for a config file is the one thing you must not do. Splicing instead
+ * keeps comments, blank lines, quoting style, anchors and key order exactly as
+ * the author left them, and it is what lets Tree and Source be two views on ONE
+ * draft: switching modes converts nothing, and Ctrl+S / undo / redo / format /
+ * validation keep working on the text underneath.
+ *
+ * BOTH of YAML's syntaxes are first-class here, because real files mix them:
+ *  - **block** style (`key:` / `- item`), structured by indentation, and
+ *  - **flow** style (`{a: 1, b: [2, 3]}`) — which is also, exactly, JSON. A flow
+ *    collection parses into real map/seq nodes with real children whether it sits
+ *    on one line or spreads over twenty, so a JSON-formatted `.yml` — and a
+ *    `.json` file, which is the same thing — opens as a tree rather than as one
+ *    opaque blob.
+ * Which syntax a node is written in decides how it is edited, and the tree keeps
+ * the author's choice: a block node is spliced by LINES, a flow node by its SPAN,
+ * so adding to `[a, b]` yields `[a, b, c]` and never a silent rewrite into block.
+ * Every node therefore carries absolute text offsets (key, value, whole span);
+ * block nodes additionally carry the lines they own.
+ *
+ * `strict` (set for `.json`) is the one thing the writer needs to know about the
+ * dialect: JSON has no plain scalars, so a key or value written there is quoted
+ * unless it is a number/bool/null.
+ *
+ * COMMENTS are a node's own, not scenery. A `#` is the only place a YAML file can
+ * say what a key means, so each node reads the one written behind its value and the
+ * run written directly above it at its own indent, the tree shows that on the key,
+ * and it is editable. The consequence is in the edits: a comment TRAVELS with the
+ * node it belongs to — deleting or reordering a key takes its description along,
+ * because a description left behind would silently come to sit above whichever key
+ * slid into that place, and describe the wrong thing.
+ *
+ * What it will not do: a construct it can render but could not rewrite without
+ * botching it — an anchor, an alias, a merge key, a plain scalar continued across
+ * lines — parses to an `editable: false` node, so the tree never offers an edit it
+ * cannot make. A line it cannot classify at all fails the parse (`YamlDoc.error`)
+ * and the tree defers to Source rather than showing a structure that isn't the
+ * file's.
+ *
+ * Pure: no React, no Tauri, no fs. Unit-tested in `src/__tests__/Yaml*.test.ts`.
+ */
+
+export type YamlKind = "map" | "seq" | "scalar";
+
+/** How a scalar is written, so an edit round-trips in the author's own style.
+ *  "empty" is a key with no value at all (`key:`) — YAML null, and the one place
+ *  a scalar can still grow children. */
+export type ScalarStyle = "plain" | "single" | "double" | "block" | "empty";
+
+export interface YamlNode {
+  /** Stable across re-parses (it is the node's path), so the tree's collapse
+   *  state and the row being edited survive the re-parse an edit triggers. */
+  id: string;
+  /** Keys and sequence indices from the document root down to this node. */
+  path: (string | number)[];
+  kind: YamlKind;
+  /** Decoded mapping key; null for sequence items and document roots. */
+  key: string | null;
+  /** The key exactly as written (quotes included), or null. */
+  keyRaw: string | null;
+  /** Absolute offsets of the key token, for an in-place rename. */
+  keyStart: number;
+  keyEnd: number;
+  /** Scalars: the decoded value (a block scalar's body, dedented). "" otherwise. */
+  value: string;
+  /** Scalars: the value exactly as written. */
+  raw: string;
+  style: ScalarStyle;
+  /** Absolute offsets of the value token. For "empty" both sit at the insertion
+   *  point right after the `:` / `-`, so writing a first value splices there. */
+  valueStart: number;
+  valueEnd: number;
+  /** The node's whole span (key through value/children) — what a flow edit moves. */
+  start: number;
+  end: number;
+  /** Block scalars only: the column their body lines are indented to. */
+  blockIndent: number;
+  /** A container written in FLOW style: its children are spliced into its own
+   *  span rather than added as lines. -1 when not flow; else the `[`/`{` offset. */
+  flowOpen: number;
+  /** This node lives INSIDE a flow collection, so it owns a span, not lines. */
+  inFlow: boolean;
+  /** 0-based first line of the node. */
+  line: number;
+  /** 0-based last line of the node's block, children included (inclusive). */
+  endLine: number;
+  /** Column of the key / of the `-` (block nodes). */
+  indent: number;
+  /** The `#` comment written BEHIND this node, on its own line ("" when none). */
+  comment: string;
+  /** The `#` comment written ABOVE it: the contiguous run of comment lines directly
+   *  over it at its own indent, `#` markers stripped ("" when none). A blank line
+   *  or a differently-indented comment ends the run, so a node only claims prose
+   *  that is unambiguously about it. */
+  lead: string;
+  /** Offset of the `#` that starts the trailing comment, or -1 when there is none. */
+  commentStart: number;
+  /** Where a trailing comment goes: the end of the node's own content on its line.
+   *  -1 when the node cannot carry one at all — it lives inside a flow collection,
+   *  where a `#` would swallow the closing bracket and everything up to it. */
+  commentAnchor: number;
+  /** Whether the tree may rewrite this node's value in place. */
+  editable: boolean;
+  /** Whether this node can be removed on its own. */
+  deletable: boolean;
+  /** This entry STARTS ON ITS LIST ITEM'S DASH LINE (`- name: a` → the `name`
+   *  key, `- - x` → the first nested item): its first line is shared with the
+   *  dash, so every whole-line edit must splice around the dash — take the line's
+   *  content but leave (or hand over) the `- ` prefix — rather than take the
+   *  line. Its `lead` is also NOT its own to move: a comment run above the dash
+   *  line reads as the item's prose and stays put. */
+  onDash?: boolean;
+  /** Whether this node's comment lives ABOVE its line (a lead comment) rather than
+   *  behind it. Set for a mapping/sequence written on a `-` dash line: a comment
+   *  behind that line would belong to the item's first child (which owns the line),
+   *  so the whole entry is documented on the line above it instead. */
+  leadComment?: boolean;
+  children: YamlNode[];
+}
+
+/** True when the container is written in flow (`{…}` / `[…]`, i.e. JSON) style. */
+export function isFlow(node: YamlNode): boolean {
+  return node.flowOpen >= 0;
+}
+
+export interface YamlDoc {
+  /** One synthetic root per YAML document (`---`-separated); usually just one. */
+  docs: YamlNode[];
+  /** First construct the tree could not classify — the tree defers to Source. */
+  error: { line: number; message: string } | null;
+  /** The document's own indent step, so inserted lines match the file's style. */
+  indentStep: number;
+  /** JSON dialect: no plain scalars, so what is written is quoted or numeric. */
+  strict: boolean;
+}
+
+/** The value a new entry is created with. Mirrors the type picker in the UI. */
+export type YamlValueType = "text" | "number" | "boolean" | "null" | "map" | "seq";
+
+function extOf(path: string): string {
+  const name = (path.split(/[/\\]/).filter(Boolean).pop() ?? path).toLowerCase();
+  const dot = name.lastIndexOf(".");
+  return dot > 0 ? name.slice(dot) : "";
+}
+
+export function isYamlPath(path: string): boolean {
+  const ext = extOf(path);
+  return ext === ".yaml" || ext === ".yml";
+}
+
+/** JSON is YAML's flow syntax, so it gets the same tree — written back in the
+ *  stricter dialect (see {@link YamlDoc.strict}). */
+export function isJsonPath(path: string): boolean {
+  return extOf(path) === ".json";
+}
+
+/** Every path the structure tree can edit. */
+export function isTreePath(path: string): boolean {
+  return isYamlPath(path) || isJsonPath(path);
+}
+
+// ── Text plumbing ───────────────────────────────────────────────────────────
+// Block edits address whole lines, flow edits address spans; both splice into the
+// original string by offset, so nothing outside the edited region — including a
+// mixed or missing trailing newline — is rewritten.
+
+interface LineIndex {
+  lines: string[];
+  /** Offset of each line's first character. */
+  starts: number[];
+  eol: string;
+}
+
+function indexLines(text: string): LineIndex {
+  const eol = text.includes("\r\n") ? "\r\n" : "\n";
+  const lines: string[] = [];
+  const starts: number[] = [];
+  let at = 0;
+  for (;;) {
+    const nl = text.indexOf("\n", at);
+    starts.push(at);
+    if (nl === -1) {
+      lines.push(text.slice(at));
+      break;
+    }
+    const end = nl > at && text[nl - 1] === "\r" ? nl - 1 : nl;
+    lines.push(text.slice(at, end));
+    at = nl + 1;
+  }
+  return { lines, starts, eol };
+}
+
+function lineOfOffset(starts: number[], offset: number): number {
+  let lo = 0;
+  let hi = starts.length - 1;
+  while (lo < hi) {
+    const mid = (lo + hi + 1) >> 1;
+    if (starts[mid] <= offset) lo = mid;
+    else hi = mid - 1;
+  }
+  return lo;
+}
+
+/** The plain splice every edit ultimately reduces to. */
+function splice(text: string, from: number, to: number, next: string): string {
+  return text.slice(0, from) + next + text.slice(to);
+}
+
+/** Replace lines [from..to] (inclusive) with `next`; `next` empty deletes them. */
+function replaceLines(text: string, from: number, to: number, next: string[]): string {
+  const idx = indexLines(text);
+  if (from < 0 || to >= idx.lines.length || from > to) return text;
+  const start = idx.starts[from];
+  const end = to + 1 < idx.starts.length ? idx.starts[to + 1] : text.length;
+  // Only re-terminate the replacement when the region we cut was terminated —
+  // otherwise a file with no trailing newline would grow one.
+  const cutEndedWithEol = end > start && text[end - 1] === "\n";
+  let body = next.map((l) => l + idx.eol).join("");
+  if (body && !cutEndedWithEol) body = body.slice(0, -idx.eol.length);
+  return splice(text, start, end, body);
+}
+
+/** Insert `next` before line `at` (== line count appends at EOF). */
+function insertLines(text: string, at: number, next: string[]): string {
+  if (!next.length) return text;
+  const idx = indexLines(text);
+  if (at >= idx.lines.length) {
+    const needsEol = text.length > 0 && !text.endsWith("\n");
+    return text + (needsEol ? idx.eol : "") + next.map((l) => l + idx.eol).join("");
+  }
+  const start = idx.starts[Math.max(0, at)];
+  return splice(text, start, start, next.map((l) => l + idx.eol).join(""));
+}
+
+// ── Encoding ────────────────────────────────────────────────────────────────
+
+const SPECIAL_FIRST = new Set([
+  "-", "?", ":", ",", "[", "]", "{", "}", "#", "&", "*", "!", "|", ">", "'", '"',
+  "%", "@", "`",
+]);
+
+/** True when the value must be quoted to survive a round-trip as written. */
+export function needsQuoting(value: string): boolean {
+  if (value === "") return true;
+  if (/^\s|\s$/.test(value)) return true;
+  if (SPECIAL_FIRST.has(value[0])) return true;
+  if (value.includes(": ") || value.endsWith(":")) return true;
+  if (value.includes(" #")) return true;
+  if (/[\n\r\t]/.test(value)) return true;
+  return false;
+}
+
+/** True when a plain (unquoted) `value` would be read back as a non-string —
+ *  a number, a bool, a null. Quoting is what makes "no" the string "no". */
+export function parsesAsNonString(value: string): boolean {
+  const v = value.trim();
+  if (v === "") return false;
+  if (/^-?(\d+|\d*\.\d+)([eE][+-]?\d+)?$/.test(v)) return true;
+  if (/^0[xob][0-9a-fA-F_]+$/.test(v)) return true;
+  return /^(true|false|yes|no|on|off|null|~)$/i.test(v);
+}
+
+/** True when `v` is a bare JSON literal — the only things JSON leaves unquoted. */
+function isJsonLiteral(v: string): boolean {
+  return /^-?\d+(\.\d+)?([eE][+-]?\d+)?$/.test(v) || v === "true" || v === "false" || v === "null";
+}
+
+function encodeDouble(value: string): string {
+  const escaped = value
+    .replace(/\\/g, "\\\\")
+    .replace(/"/g, '\\"')
+    .replace(/\n/g, "\\n")
+    .replace(/\r/g, "\\r")
+    .replace(/\t/g, "\\t");
+  return `"${escaped}"`;
+}
+
+function encodeSingle(value: string): string {
+  return `'${value.replace(/'/g, "''")}'`;
+}
+
+/**
+ * Write `value` back in `style`, falling back to a quoted form when the style
+ * cannot carry it. In `strict` (JSON) there are no plain scalars at all, so
+ * anything that is not a bare literal comes back quoted.
+ */
+export function encodeScalar(value: string, style: ScalarStyle, strict = false): string {
+  if (style === "double") return encodeDouble(value);
+  if (style === "single") return value.includes("\n") ? encodeDouble(value) : encodeSingle(value);
+  if (strict) return isJsonLiteral(value.trim()) ? value.trim() : encodeDouble(value);
+  return needsQuoting(value) ? encodeDouble(value) : value;
+}
+
+/** A mapping key, quoted only when it must be — which in JSON is always. */
+export function encodeKey(key: string, strict = false): string {
+  if (
+    strict ||
+    key === "" ||
+    /^\s|\s$/.test(key) ||
+    SPECIAL_FIRST.has(key[0]) ||
+    key.includes(":") ||
+    key.includes("#")
+  ) {
+    return encodeDouble(key);
+  }
+  return key;
+}
+
+/**
+ * The literal a newly added entry is written with. In YAML, `text` quotes whenever
+ * a plain token would read back as a number/bool/null, so the type the user picked
+ * is the type the file gets; in JSON every string is quoted anyway. A container is
+ * created as an EMPTY FLOW collection (`{}` / `[]`) — a real, empty collection in
+ * either dialect, which the tree then adds children to in flow style.
+ */
+export function literalFor(type: YamlValueType, value: string, strict = false): string {
+  switch (type) {
+    case "number":
+      return value.trim() === "" ? "0" : value.trim();
+    case "boolean":
+      return value.trim().toLowerCase() === "true" ? "true" : "false";
+    case "null":
+      return "null";
+    case "map":
+      return "{}";
+    case "seq":
+      return "[]";
+    default:
+      if (strict) return encodeDouble(value);
+      return needsQuoting(value) || parsesAsNonString(value) ? encodeDouble(value) : value;
+  }
+}
+
+function decodeDouble(raw: string): string {
+  const body = raw.slice(1, -1);
+  return body.replace(/\\(u[0-9a-fA-F]{4}|.)/g, (_m, esc: string) => {
+    if (esc[0] === "u") return String.fromCharCode(parseInt(esc.slice(1), 16));
+    switch (esc) {
+      case "n": return "\n";
+      case "t": return "\t";
+      case "r": return "\r";
+      case "0": return "\0";
+      default: return esc;
+    }
+  });
+}
+
+function decodeSingle(raw: string): string {
+  return raw.slice(1, -1).replace(/''/g, "'");
+}
+
+function decodeQuoted(raw: string): string {
+  return raw[0] === '"' ? decodeDouble(raw) : decodeSingle(raw);
+}
+
+// ── Scanning ────────────────────────────────────────────────────────────────
+
+/** End index (exclusive) of the quoted token starting at `start`, or -1 when it is
+ *  not terminated in `s`. Used on a single line (block) and on the whole text
+ *  (flow), which is why it takes the string rather than a line. */
+function scanQuoted(s: string, start: number): number {
+  const q = s[start];
+  let i = start + 1;
+  while (i < s.length) {
+    const c = s[i];
+    if (q === '"' && c === "\\") {
+      i += 2;
+      continue;
+    }
+    if (c === q) {
+      if (q === "'" && s[i + 1] === "'") {
+        i += 2;
+        continue;
+      }
+      return i + 1;
+    }
+    i++;
+  }
+  return -1;
+}
+
+const BLOCK_HEADER = /^[|>][+-]?\d*\s*(#.*)?$/;
+
+interface ScannedValue {
+  raw: string;
+  value: string;
+  style: ScalarStyle;
+  valueCol: number;
+  valueEnd: number;
+  /** An unterminated quote — the scalar continues on the next line. */
+  open: boolean;
+  /** An anchor/alias/tag prefix — we render it, we never rewrite it. */
+  opaque: boolean;
+  /** A block scalar header (`|`, `>-`, …) — its body is on the lines below. */
+  block: boolean;
+  /** A flow collection starts here — the flow parser takes over at `valueCol`. */
+  flow: boolean;
+}
+
+const NO_FLAGS = { open: false, opaque: false, block: false, flow: false };
+
+/** Read the value token that starts at/after `from` on `line`. `from` is the
+ *  insertion point (just past the `:` or `-`), so an empty value reports itself
+ *  there and a first value splices in exactly the right place. */
+function readValue(line: string, from: number): ScannedValue {
+  let i = from;
+  while (i < line.length && (line[i] === " " || line[i] === "\t")) i++;
+  if (i >= line.length || line[i] === "#") {
+    return { raw: "", value: "", style: "empty", valueCol: from, valueEnd: from, ...NO_FLAGS };
+  }
+
+  const c = line[i];
+  if (c === '"' || c === "'") {
+    const end = scanQuoted(line, i);
+    if (end < 0) {
+      return {
+        raw: line.slice(i), value: line.slice(i), style: "plain",
+        valueCol: i, valueEnd: line.length, ...NO_FLAGS, open: true,
+      };
+    }
+    const raw = line.slice(i, end);
+    return {
+      raw, value: decodeQuoted(raw), style: c === '"' ? "double" : "single",
+      valueCol: i, valueEnd: end, ...NO_FLAGS,
+    };
+  }
+
+  if (c === "[" || c === "{") {
+    // The flow parser owns this — it may well run past the end of the line.
+    return { raw: "", value: "", style: "plain", valueCol: i, valueEnd: i, ...NO_FLAGS, flow: true };
+  }
+
+  const rest = line.slice(i);
+  if (BLOCK_HEADER.test(rest)) {
+    const header = rest.replace(/\s*#.*$/, "");
+    return {
+      raw: header, value: "", style: "block",
+      valueCol: i, valueEnd: i + header.length, ...NO_FLAGS, block: true,
+    };
+  }
+
+  // Plain scalar: runs to a ` #` comment or the end of the line.
+  let end = line.length;
+  for (let j = i; j < line.length; j++) {
+    if (line[j] === "#" && j > i && (line[j - 1] === " " || line[j - 1] === "\t")) {
+      end = j;
+      break;
+    }
+  }
+  while (end > i && (line[end - 1] === " " || line[end - 1] === "\t")) end--;
+  const raw = line.slice(i, end);
+  return {
+    raw, value: raw, style: "plain", valueCol: i, valueEnd: end,
+    ...NO_FLAGS, opaque: c === "&" || c === "*" || c === "!",
+  };
+}
+
+interface ScannedKey {
+  keyRaw: string;
+  key: string;
+  keyCol: number;
+  keyEnd: number;
+  /** Column just past the `:`, where the value begins. */
+  afterColon: number;
+}
+
+/** Read a block mapping key starting at `from`, or null when this line does not
+ *  open a mapping entry (no `:` terminator before a comment/EOL). */
+function readKey(line: string, from: number): ScannedKey | null {
+  const c = line[from];
+  if (c === undefined || c === "#") return null;
+
+  let keyEnd: number;
+  if (c === '"' || c === "'") {
+    const end = scanQuoted(line, from);
+    if (end < 0) return null;
+    keyEnd = end;
+  } else {
+    let j = from;
+    let found = -1;
+    while (j < line.length) {
+      const ch = line[j];
+      if (ch === "#" && j > from && line[j - 1] === " ") return null;
+      if (ch === ":" && (j + 1 === line.length || line[j + 1] === " " || line[j + 1] === "\t")) {
+        found = j;
+        break;
+      }
+      j++;
+    }
+    if (found < 0) return null;
+    keyEnd = found;
+    while (keyEnd > from && (line[keyEnd - 1] === " " || line[keyEnd - 1] === "\t")) keyEnd--;
+  }
+
+  let colon = keyEnd;
+  while (colon < line.length && (line[colon] === " " || line[colon] === "\t")) colon++;
+  if (line[colon] !== ":") return null;
+
+  const keyRaw = line.slice(from, keyEnd);
+  const key = keyRaw[0] === '"' || keyRaw[0] === "'" ? decodeQuoted(keyRaw) : keyRaw;
+  return { keyRaw, key, keyCol: from, keyEnd, afterColon: colon + 1 };
+}
+
+/** A flow mapping key, addressed by absolute offsets (it can sit anywhere). */
+interface FlowKey {
+  keyRaw: string;
+  key: string;
+  start: number;
+  end: number;
+  /** Offset just past the `:`. */
+  colonEnd: number;
+}
+
+interface FlowScalar {
+  raw: string;
+  value: string;
+  style: ScalarStyle;
+  start: number;
+  end: number;
+}
+
+// ── Parser ──────────────────────────────────────────────────────────────────
+
+class Bail extends Error {
+  constructor(readonly line: number, readonly reason: string) {
+    super(reason);
+  }
+}
+
+const indentOf = (line: string): number => line.length - line.trimStart().length;
+const isBlank = (line: string): boolean => line.trim() === "";
+const isComment = (line: string): boolean => line.trimStart().startsWith("#");
+const isDirective = (line: string): boolean => line.startsWith("%");
+const isDocStart = (line: string): boolean => line === "---" || line.startsWith("--- ");
+const isDocEnd = (line: string): boolean => line === "..." || line.startsWith("... ");
+
+/** Parse `text` into one tree per YAML document. Never throws: a construct the
+ *  tree cannot model comes back as `error` with the offending 1-based line. */
+export function parseYaml(text: string, opts: { strict?: boolean } = {}): YamlDoc {
+  const strict = !!opts.strict;
+  const { lines, starts } = indexLines(text);
+  const parser = new Parser(lines, starts, text);
+  try {
+    const docs = parser.parseDocuments();
+    return { docs, error: null, indentStep: parser.indentStep(docs), strict };
+  } catch (e) {
+    if (e instanceof Bail) {
+      return { docs: [], error: { line: e.line + 1, message: e.reason }, indentStep: 2, strict };
+    }
+    throw e;
+  }
+}
+
+class Parser {
+  private i = 0;
+  /** A copy of the source lines in which a sequence dash is blanked to a space, so
+   *  a mapping written inline after it (`- name: a`) is read at its true column.
+   *  Same length as the original line, so every column we record is a valid offset
+   *  into the real text. */
+  private view: string[];
+
+  constructor(
+    private readonly lines: string[],
+    private readonly starts: number[],
+    private readonly text: string,
+  ) {
+    this.view = lines.slice();
+  }
+
+  private off(line: number, col: number): number {
+    return this.starts[line] + col;
+  }
+
+  private lineOf(offset: number): number {
+    return lineOfOffset(this.starts, offset);
+  }
+
+  private lineEnd(line: number): number {
+    return this.off(line, this.lines[line]?.length ?? 0);
+  }
+
+  /** The comment run written directly ABOVE line `at` at column `indent`. A blank
+   *  line, a differently-indented comment, or any real content ends it — so a node
+   *  claims only the prose that is unambiguously about it, and never the section
+   *  header two keys up. */
+  private leadAt(at: number, indent: number): string {
+    const out: string[] = [];
+    for (let j = at - 1; j >= 0; j--) {
+      const l = this.lines[j];
+      if (!isComment(l) || indentOf(l) !== indent) break;
+      out.unshift(l.trimStart().replace(/^#[ \t]?/, ""));
+    }
+    return out.join("\n");
+  }
+
+  /** Attach a block node's `#` comments. `col` is where its own content ends on
+   *  `line` — always past its key and value tokens, so a `#` inside a quoted string
+   *  can never be mistaken for the start of a comment. */
+  private annotate(node: YamlNode, line: number, col: number): YamlNode {
+    const l = this.lines[line] ?? "";
+    const hash = l.indexOf("#", col);
+    node.comment = hash < 0 ? "" : l.slice(hash + 1).trim();
+    node.commentStart = hash < 0 ? -1 : this.off(line, hash);
+    node.commentAnchor = this.off(line, col);
+    node.lead = this.leadAt(node.line, node.indent);
+    return node;
+  }
+
+  parseDocuments(): YamlNode[] {
+    const docs: YamlNode[] = [];
+    let docIndex = 0;
+    this.skipIgnorable();
+    while (this.i < this.lines.length) {
+      const l = this.lines[this.i];
+      if (isDocStart(l) || isDocEnd(l)) {
+        this.i++;
+        this.skipIgnorable();
+        continue;
+      }
+      const root = this.parseCollection(indentOf(this.view[this.i]), [], docIndex);
+      if (root) docs.push(root);
+      docIndex++;
+      this.skipIgnorable();
+    }
+    return docs;
+  }
+
+  /** The document's own indent step, read off its first block nesting; 2 default. */
+  indentStep(docs: YamlNode[]): number {
+    const walk = (n: YamlNode): number | null => {
+      if (!isFlow(n) && n.key !== null) {
+        for (const c of n.children) {
+          if (!c.inFlow && c.indent > n.indent) return c.indent - n.indent;
+        }
+      }
+      for (const c of n.children) {
+        const deeper = walk(c);
+        if (deeper) return deeper;
+      }
+      return null;
+    };
+    for (const d of docs) {
+      const step = walk(d);
+      if (step && step > 0) return step;
+    }
+    return 2;
+  }
+
+  private skipIgnorable(): void {
+    while (this.i < this.lines.length) {
+      const l = this.lines[this.i];
+      if (isBlank(l) || isComment(l) || isDirective(l)) this.i++;
+      else break;
+    }
+  }
+
+  /** True when the cursor sits on a line that ends the current block. */
+  private atBoundary(): boolean {
+    if (this.i >= this.lines.length) return true;
+    const l = this.lines[this.i];
+    return isDocStart(l) || isDocEnd(l);
+  }
+
+  /** Parse whatever block starts at the cursor at column `indent`. */
+  private parseCollection(
+    indent: number,
+    path: (string | number)[],
+    docIndex: number,
+  ): YamlNode | null {
+    this.skipIgnorable();
+    if (this.atBoundary()) return null;
+    if (/^\t/.test(this.lines[this.i])) {
+      throw new Bail(this.i, "This file indents with tabs, which YAML does not allow.");
+    }
+    const line = this.view[this.i];
+    // A document written in flow/JSON syntax, however many lines it spans. This is
+    // what makes a JSON file — and a JSON-formatted .yml — a tree.
+    if (line[indent] === "{" || line[indent] === "[") {
+      return this.takeFlow(this.off(this.i, indent), path, docIndex, null, indent);
+    }
+    if (this.isSeqDash(line, indent)) return this.parseSeq(indent, path, docIndex);
+    return this.parseMap(indent, path, docIndex);
+  }
+
+  /** Parse a flow collection, then resume block parsing on the line after it. */
+  private takeFlow(
+    at: number,
+    path: (string | number)[],
+    docIndex: number,
+    k: ScannedKey | null,
+    indent: number,
+  ): YamlNode {
+    const keyLine = this.lineOf(at);
+    const fk: FlowKey | null = k
+      ? {
+          keyRaw: k.keyRaw,
+          key: k.key,
+          start: this.off(keyLine, k.keyCol),
+          end: this.off(keyLine, k.keyEnd),
+          colonEnd: this.off(keyLine, k.afterColon),
+        }
+      : null;
+    const node = this.parseFlowCollection(at, path, docIndex, fk, false);
+    node.line = keyLine;
+    node.endLine = this.lineOf(node.end);
+    node.indent = indent;
+    // Its key sits on a block line, so it can carry a comment after all — behind the
+    // closing bracket, wherever the author put that.
+    this.annotate(node, node.endLine, node.end - this.starts[node.endLine]);
+    // A flow value can run past its own line; block parsing resumes after it.
+    this.i = node.endLine + 1;
+    return node;
+  }
+
+  private isSeqDash(line: string, indent: number): boolean {
+    return line[indent] === "-" && (line.length === indent + 1 || line[indent + 1] === " ");
+  }
+
+  private parseMap(indent: number, path: (string | number)[], docIndex: number): YamlNode {
+    const start = this.i;
+    const children: YamlNode[] = [];
+    let endLine = start;
+
+    for (;;) {
+      this.skipIgnorable();
+      if (this.atBoundary()) break;
+      const line = this.view[this.i];
+      const ind = indentOf(line);
+      if (ind < indent) break;
+      if (ind > indent) throw new Bail(this.i, "Unexpected indentation.");
+      if (this.isSeqDash(line, ind)) break;
+      if (line.slice(ind).startsWith("? ")) {
+        throw new Bail(this.i, "Explicit keys (`? `) aren't supported by the tree.");
+      }
+
+      const child = this.parseMapEntry(indent, path, docIndex);
+      children.push(child);
+      endLine = child.endLine;
+    }
+
+    return this.container("map", null, path, docIndex, start, endLine, indent, children);
+  }
+
+  /** One `key: …` entry, including whatever block hangs below it. */
+  private parseMapEntry(indent: number, path: (string | number)[], docIndex: number): YamlNode {
+    const at = this.i;
+    const line = this.view[at];
+    const k = readKey(line, indent);
+    if (!k) throw new Bail(at, "This line isn't a `key: value` pair the tree can read.");
+    const childPath = [...path, k.key];
+    const v = readValue(line, k.afterColon);
+    this.i++;
+    if (v.flow) return this.takeFlow(this.off(at, v.valueCol), childPath, docIndex, k, indent);
+    return this.finishValue(at, indent, k, v, childPath, docIndex);
+  }
+
+  private parseSeq(indent: number, path: (string | number)[], docIndex: number): YamlNode {
+    const start = this.i;
+    const items: YamlNode[] = [];
+    let endLine = start;
+
+    for (;;) {
+      this.skipIgnorable();
+      if (this.atBoundary()) break;
+      const line = this.view[this.i];
+      const ind = indentOf(line);
+      if (ind < indent) break;
+      if (ind > indent || !this.isSeqDash(line, ind)) break;
+
+      const item = this.parseSeqItem(indent, [...path, items.length], docIndex);
+      items.push(item);
+      endLine = item.endLine;
+    }
+
+    return this.container("seq", null, path, docIndex, start, endLine, indent, items);
+  }
+
+  private parseSeqItem(indent: number, path: (string | number)[], docIndex: number): YamlNode {
+    const at = this.i;
+    const line = this.view[at];
+    // The content column: the first non-space after the dash.
+    let content = indent + 1;
+    while (content < line.length && line[content] === " ") content++;
+    const rest = line.slice(content);
+
+    if (rest === "" || rest.startsWith("#")) {
+      // A bare `-`: whatever hangs below it (indented past the dash) is the item.
+      this.i++;
+      const child = this.childBlock(indent, path, docIndex);
+      if (child) {
+        const node = this.container(
+          child.kind, null, path, docIndex, at, child.endLine, indent, child.children,
+        );
+        node.flowOpen = child.flowOpen;
+        node.end = child.end;
+        return node;
+      }
+      return this.scalar(null, path, docIndex, at, indent, {
+        raw: "", value: "", style: "empty",
+        valueCol: indent + 1, valueEnd: indent + 1, ...NO_FLAGS,
+      }, true, true);
+    }
+
+    if (this.isSeqDash(line, content)) {
+      // `- - x` — the item is a nested SEQUENCE that starts on the dash's own line.
+      // Same trick as `- key: value` below: blank the outer dash in the parse view
+      // so the nested list reads at column `content`, where the items it continues
+      // with on the lines below also sit. It nests to any depth (`- - - x`), because
+      // each level blanks its own dash before handing on.
+      this.view[at] = line.slice(0, indent) + " " + line.slice(indent + 1);
+      const seq = this.parseSeq(content, path, docIndex);
+      // The nested list's first entry shares the outer item's dash line, so its
+      // whole-line edits must splice around the dash (see YamlNode.onDash).
+      if (seq.children.length) seq.children[0].onDash = true;
+      return {
+        ...seq,
+        line: at,
+        indent,
+        path,
+        id: idFor(docIndex, path),
+        start: this.off(at, indent),
+        // The item is written at the dash's column, so that is where the prose about
+        // it sits — not at the nested list's.
+        lead: this.leadAt(at, indent),
+        // A comment on this item is written above its dash line (a comment behind
+        // it would belong to the nested list's first entry, which owns the line).
+        leadComment: true,
+      };
+    }
+
+    // `- {a: 1}` / `- [1, 2]`: the item is a flow collection.
+    if (line[content] === "{" || line[content] === "[") {
+      const node = this.takeFlow(this.off(at, content), path, docIndex, null, indent);
+      node.start = this.off(at, indent);
+      return node;
+    }
+
+    const k = readKey(line, content);
+    if (k) {
+      // `- key: value` — the item is a mapping that starts on the dash's own line.
+      // Blank the dash in the parse view so the mapping reads at column `content`,
+      // where its siblings on the lines below also sit.
+      this.view[at] = line.slice(0, indent) + " " + line.slice(indent + 1);
+      const map = this.parseMap(content, path, docIndex);
+      // The first key shares the item's dash line, so its whole-line edits must
+      // splice around the dash (see YamlNode.onDash).
+      if (map.children.length) map.children[0].onDash = true;
+      return {
+        ...map,
+        line: at,
+        indent,
+        path,
+        id: idFor(docIndex, path),
+        start: this.off(at, indent),
+        lead: this.leadAt(at, indent),
+        // A comment on this item is written above its dash line — behind it would
+        // belong to the first key, which owns the line (`- name: a  # …`).
+        leadComment: true,
+      };
+    }
+
+    const v = readValue(line, content);
+    this.i++;
+    return this.finishValue(at, indent, null, v, path, docIndex);
+  }
+
+  /**
+   * Turn a scanned (non-flow) value into a node, consuming whatever it drags
+   * along: a block scalar's body, an unterminated quote's continuation lines, a
+   * nested block hanging under an empty value, or a plain scalar continued across
+   * lines.
+   */
+  private finishValue(
+    at: number,
+    indent: number,
+    k: ScannedKey | null,
+    v: ScannedValue,
+    path: (string | number)[],
+    docIndex: number,
+  ): YamlNode {
+    if (v.block) {
+      const { endLine, blockIndent, body } = this.readBlockBody(at, indent);
+      const node = this.scalar(k, path, docIndex, at, indent, { ...v, value: body }, true, true);
+      node.endLine = endLine;
+      node.blockIndent = blockIndent;
+      node.end = this.lineEnd(endLine);
+      return node;
+    }
+
+    if (v.open) {
+      // An unterminated quote: swallow lines until it closes. We can render it, we
+      // will never rewrite it.
+      const endLine = this.consumeOpenQuote(at, v);
+      const node = this.scalar(k, path, docIndex, at, indent, v, false, true);
+      node.endLine = endLine;
+      node.end = this.lineEnd(endLine);
+      return node;
+    }
+
+    if (v.style === "empty" || (v.opaque && v.raw !== "" && this.hasChildBlock(indent))) {
+      // A block sequence may sit at the SAME column as its key — `key:` on one
+      // line, `- item` at the key's own indent below — which is valid YAML (a
+      // sequence needn't indent past its key). `childBlock` only sees a deeper
+      // block, so try the same-indent sequence when it finds nothing.
+      const child = this.childBlock(indent, path, docIndex)
+        ?? this.sameIndentSeq(indent, path, docIndex);
+      if (child) {
+        const node = this.container(
+          child.kind, k, path, docIndex, at, child.endLine, indent, child.children,
+        );
+        node.flowOpen = child.flowOpen;
+        node.valueStart = this.off(at, v.valueCol);
+        node.valueEnd = this.off(at, v.valueEnd);
+        node.raw = v.raw;
+        node.editable = !v.opaque;
+        node.end = child.end;
+        // The key's own line ends here, so a comment behind it is this node's.
+        return this.annotate(node, at, v.valueEnd);
+      }
+      return this.scalar(k, path, docIndex, at, indent, v, !v.opaque, true);
+    }
+
+    // A scalar with a value. If more-indented lines follow, it is a plain scalar
+    // continued across lines — legal YAML we render but do not rewrite.
+    if (this.hasChildBlock(indent)) {
+      const endLine = this.consumeIndentedBlock(indent);
+      const joined = [v.raw, ...this.lines.slice(at + 1, endLine + 1).map((l) => l.trim())].join(" ");
+      const node = this.scalar(k, path, docIndex, at, indent, { ...v, value: joined }, false, true);
+      node.endLine = endLine;
+      node.end = this.lineEnd(endLine);
+      return node;
+    }
+
+    return this.scalar(k, path, docIndex, at, indent, v, !v.opaque, true);
+  }
+
+  /** True when the line at the cursor belongs to a block nested under `indent`. */
+  private hasChildBlock(indent: number): boolean {
+    const save = this.i;
+    this.skipIgnorable();
+    const ok = !this.atBoundary() && indentOf(this.view[this.i]) > indent;
+    this.i = save;
+    return ok;
+  }
+
+  /** Parse the block nested under a key at `indent`, or null when there is none. */
+  private childBlock(indent: number, path: (string | number)[], docIndex: number): YamlNode | null {
+    if (!this.hasChildBlock(indent)) return null;
+    this.skipIgnorable();
+    return this.parseCollection(indentOf(this.view[this.i]), path, docIndex);
+  }
+
+  /**
+   * A key's value written as a block SEQUENCE at the key's OWN column — valid
+   * YAML (a sequence needn't indent past its key), e.g.
+   *     values:
+   *     - 1
+   *     - 2
+   * Unambiguous in a mapping: a bare `- item` at the key's indent can only be
+   * that key's value, since a map holds `key:` entries, never a lone seq item.
+   * (This is why it's resolved here, not in `childBlock`, which is also called for
+   * a bare `-` seq item, where a same-indent dash is a SIBLING, not a child.)
+   * Returns null — cursor untouched — when the next line isn't such a sequence.
+   */
+  private sameIndentSeq(
+    indent: number,
+    path: (string | number)[],
+    docIndex: number,
+  ): YamlNode | null {
+    const save = this.i;
+    this.skipIgnorable();
+    if (
+      this.atBoundary() ||
+      indentOf(this.view[this.i]) !== indent ||
+      !this.isSeqDash(this.view[this.i], indent)
+    ) {
+      this.i = save;
+      return null;
+    }
+    return this.parseSeq(indent, path, docIndex);
+  }
+
+  /** Consume the lines indented past `indent` (a plain scalar's continuation). */
+  private consumeIndentedBlock(indent: number): number {
+    let end = this.i - 1;
+    while (this.i < this.lines.length) {
+      const l = this.lines[this.i];
+      if (isBlank(l) || isDocStart(l) || isDocEnd(l) || indentOf(l) <= indent) break;
+      end = this.i;
+      this.i++;
+    }
+    return end;
+  }
+
+  /** Consume a block scalar's body: every line indented past the header's key. */
+  private readBlockBody(
+    at: number,
+    indent: number,
+  ): { endLine: number; blockIndent: number; body: string } {
+    const bodyLines: string[] = [];
+    let endLine = at;
+    let blockIndent = -1;
+    while (this.i < this.lines.length) {
+      const l = this.lines[this.i];
+      if (isBlank(l)) {
+        bodyLines.push("");
+        this.i++;
+        continue;
+      }
+      if (isDocStart(l) || isDocEnd(l) || indentOf(l) <= indent) break;
+      if (blockIndent < 0) blockIndent = indentOf(l);
+      bodyLines.push(l.slice(Math.min(blockIndent, indentOf(l))));
+      endLine = this.i;
+      this.i++;
+    }
+    // Trailing blank lines are not part of the node's block: an insertion after it
+    // should land on them, not past them.
+    while (bodyLines.length && bodyLines[bodyLines.length - 1] === "") bodyLines.pop();
+    if (blockIndent < 0) blockIndent = indent + 2;
+    return { endLine, blockIndent, body: bodyLines.join("\n") };
+  }
+
+  /** Swallow the continuation lines of an unterminated quoted scalar. */
+  private consumeOpenQuote(at: number, v: ScannedValue): number {
+    const quote = this.lines[at][v.valueCol];
+    let end = at;
+    while (this.i < this.lines.length) {
+      const l = this.lines[this.i];
+      end = this.i;
+      this.i++;
+      if (l.includes(quote)) break;
+    }
+    return end;
+  }
+
+  // ── Flow (JSON) syntax ────────────────────────────────────────────────────
+  // Offset-driven, because a flow collection is a span, not a set of lines: it may
+  // sit inline (`[a, b]`) or spread over twenty, and its children are edited by
+  // splicing that span rather than by rewriting whole lines.
+
+  /** Skip whitespace, newlines and comments from `o`. */
+  private ws(o: number): number {
+    const t = this.text;
+    while (o < t.length) {
+      const c = t[o];
+      if (c === " " || c === "\t" || c === "\n" || c === "\r") {
+        o++;
+        continue;
+      }
+      if (c === "#") {
+        while (o < t.length && t[o] !== "\n") o++;
+        continue;
+      }
+      break;
+    }
+    return o;
+  }
+
+  /**
+   * Parse the flow collection whose `[`/`{` is at `at`. `k` is the mapping key it
+   * is the value of, when it is one — the node then spans from that key, so
+   * deleting it takes the key with it.
+   */
+  private parseFlowCollection(
+    at: number,
+    path: (string | number)[],
+    docIndex: number,
+    k: FlowKey | null,
+    inFlow: boolean,
+  ): YamlNode {
+    const t = this.text;
+    const isSeq = t[at] === "[";
+    const close = isSeq ? "]" : "}";
+    const children: YamlNode[] = [];
+
+    let p = this.ws(at + 1);
+    while (p < t.length && t[p] !== close) {
+      if (t[p] === ",") {
+        p = this.ws(p + 1);
+        continue;
+      }
+      const child = isSeq
+        ? this.parseFlowValue(p, [...path, children.length], docIndex, null)
+        : this.parseFlowEntry(p, path, docIndex);
+      children.push(child);
+      const next = this.ws(child.end);
+      if (next <= p) break; // no progress: refuse to spin
+      p = next;
+    }
+    if (p >= t.length || t[p] !== close) {
+      throw new Bail(this.lineOf(at), `This \`${t[at]}\` is never closed.`);
+    }
+    const end = p + 1;
+    const line = this.lineOf(at);
+
+    return {
+      id: idFor(docIndex, path),
+      path,
+      kind: isSeq ? "seq" : "map",
+      key: k?.key ?? null,
+      keyRaw: k?.keyRaw ?? null,
+      keyStart: k?.start ?? -1,
+      keyEnd: k?.end ?? -1,
+      value: "",
+      raw: "",
+      style: "empty",
+      valueStart: at,
+      valueEnd: end,
+      start: k ? k.start : at,
+      end,
+      blockIndent: -1,
+      flowOpen: at,
+      inFlow,
+      line,
+      endLine: this.lineOf(end),
+      indent: -1,
+      // Inside a flow collection a `#` would swallow the closing bracket, so there
+      // is nowhere to put one. `takeFlow` annotates the outermost node — the one
+      // whose key sits on a block line, where a comment is safe.
+      comment: "",
+      lead: "",
+      commentStart: -1,
+      commentAnchor: -1,
+      editable: true,
+      deletable: true,
+      children,
+    };
+  }
+
+  /** One `key: value` entry inside a flow mapping. */
+  private parseFlowEntry(at: number, path: (string | number)[], docIndex: number): YamlNode {
+    const t = this.text;
+    const k = this.readFlowKey(at);
+    if (!k) {
+      throw new Bail(this.lineOf(at), "This isn't a `key: value` pair the tree can read.");
+    }
+    const childPath = [...path, k.key];
+    const p = this.ws(k.colonEnd);
+    // `{a: , b: 1}` — an empty value; the insertion point is right after the colon.
+    if (p >= t.length || t[p] === "," || t[p] === "}" || t[p] === "]") {
+      return this.flowScalar(childPath, docIndex, k, {
+        raw: "", value: "", style: "empty", start: k.colonEnd, end: k.colonEnd,
+      });
+    }
+    return this.parseFlowValue(p, childPath, docIndex, k);
+  }
+
+  /** A value inside a flow collection: a nested collection, or a scalar. */
+  private parseFlowValue(
+    at: number,
+    path: (string | number)[],
+    docIndex: number,
+    k: FlowKey | null,
+  ): YamlNode {
+    const c = this.text[at];
+    if (c === "[" || c === "{") return this.parseFlowCollection(at, path, docIndex, k, true);
+    return this.flowScalar(path, docIndex, k, this.readFlowScalar(at));
+  }
+
+  private flowScalar(
+    path: (string | number)[],
+    docIndex: number,
+    k: FlowKey | null,
+    s: FlowScalar,
+  ): YamlNode {
+    const opaque = s.raw[0] === "&" || s.raw[0] === "*" || s.raw[0] === "!";
+    return {
+      id: idFor(docIndex, path),
+      path,
+      kind: "scalar",
+      key: k?.key ?? null,
+      keyRaw: k?.keyRaw ?? null,
+      keyStart: k?.start ?? -1,
+      keyEnd: k?.end ?? -1,
+      value: s.value,
+      raw: s.raw,
+      style: s.style,
+      valueStart: s.start,
+      valueEnd: s.end,
+      start: k ? k.start : s.start,
+      end: s.end,
+      blockIndent: -1,
+      flowOpen: -1,
+      inFlow: true,
+      line: this.lineOf(k ? k.start : s.start),
+      endLine: this.lineOf(s.end),
+      indent: -1,
+      comment: "",
+      lead: "",
+      commentStart: -1,
+      commentAnchor: -1,
+      editable: !opaque,
+      deletable: true,
+      children: [],
+    };
+  }
+
+  /** A flow mapping key: quoted or plain, terminated by `:`. */
+  private readFlowKey(at: number): FlowKey | null {
+    const t = this.text;
+    const c = t[at];
+    let end: number;
+    if (c === '"' || c === "'") {
+      end = scanQuoted(t, at);
+      if (end < 0) return null;
+    } else {
+      let j = at;
+      while (
+        j < t.length &&
+        t[j] !== ":" && t[j] !== "," && t[j] !== "}" && t[j] !== "]" && t[j] !== "\n"
+      ) {
+        j++;
+      }
+      if (t[j] !== ":") return null;
+      end = j;
+      while (end > at && (t[end - 1] === " " || t[end - 1] === "\t")) end--;
+    }
+    const colon = this.ws(end);
+    if (t[colon] !== ":") return null;
+    const keyRaw = t.slice(at, end);
+    return {
+      keyRaw,
+      key: c === '"' || c === "'" ? decodeQuoted(keyRaw) : keyRaw,
+      start: at,
+      end,
+      colonEnd: colon + 1,
+    };
+  }
+
+  /** A scalar inside a flow collection: quoted, or plain up to `,` / `]` / `}`. */
+  private readFlowScalar(at: number): FlowScalar {
+    const t = this.text;
+    const c = t[at];
+    if (c === '"' || c === "'") {
+      const end = scanQuoted(t, at);
+      if (end < 0) throw new Bail(this.lineOf(at), "This quoted value is never closed.");
+      const raw = t.slice(at, end);
+      return {
+        raw, value: decodeQuoted(raw),
+        style: c === '"' ? "double" : "single",
+        start: at, end,
+      };
+    }
+    let j = at;
+    while (j < t.length && t[j] !== "," && t[j] !== "]" && t[j] !== "}" && t[j] !== "\n") {
+      if (t[j] === "#" && j > at && t[j - 1] === " ") break;
+      j++;
+    }
+    let end = j;
+    while (end > at && (t[end - 1] === " " || t[end - 1] === "\t")) end--;
+    const raw = t.slice(at, end);
+    return { raw, value: raw, style: "plain", start: at, end };
+  }
+
+  // ── Node builders ─────────────────────────────────────────────────────────
+
+  private container(
+    kind: YamlKind,
+    k: ScannedKey | null,
+    path: (string | number)[],
+    docIndex: number,
+    line: number,
+    endLine: number,
+    indent: number,
+    children: YamlNode[],
+  ): YamlNode {
+    return {
+      id: idFor(docIndex, path),
+      path,
+      kind,
+      key: k?.key ?? null,
+      keyRaw: k?.keyRaw ?? null,
+      keyStart: k ? this.off(line, k.keyCol) : -1,
+      keyEnd: k ? this.off(line, k.keyEnd) : -1,
+      value: "",
+      raw: "",
+      style: "empty",
+      valueStart: -1,
+      valueEnd: -1,
+      start: this.off(line, indent),
+      end: this.lineEnd(endLine),
+      blockIndent: -1,
+      flowOpen: -1,
+      inFlow: false,
+      line,
+      endLine,
+      indent,
+      // A synthetic container (a document root, or the mapping/list a `-` opens on
+      // its own line) has no value column of its own, so nothing behind it is its
+      // comment — the entry written on that line owns it. The prose above it is
+      // still its own.
+      comment: "",
+      lead: this.leadAt(line, indent),
+      commentStart: -1,
+      commentAnchor: -1,
+      editable: true,
+      deletable: true,
+      children,
+    };
+  }
+
+  private scalar(
+    k: ScannedKey | null,
+    path: (string | number)[],
+    docIndex: number,
+    line: number,
+    indent: number,
+    v: ScannedValue,
+    editable: boolean,
+    deletable: boolean,
+  ): YamlNode {
+    return this.annotate({
+      id: idFor(docIndex, path),
+      path,
+      kind: "scalar",
+      key: k?.key ?? null,
+      keyRaw: k?.keyRaw ?? null,
+      keyStart: k ? this.off(line, k.keyCol) : -1,
+      keyEnd: k ? this.off(line, k.keyEnd) : -1,
+      value: v.value,
+      raw: v.raw,
+      style: v.style,
+      valueStart: this.off(line, v.valueCol),
+      valueEnd: this.off(line, v.valueEnd),
+      start: this.off(line, k ? k.keyCol : indent),
+      end: this.off(line, v.valueEnd),
+      blockIndent: -1,
+      flowOpen: -1,
+      inFlow: false,
+      line,
+      endLine: line,
+      indent,
+      comment: "",
+      lead: "",
+      commentStart: -1,
+      commentAnchor: -1,
+      editable,
+      deletable,
+      children: [],
+    }, line, v.valueEnd);
+  }
+}
+
+/** A node's identity: its document plus its path, JSON-encoded so that a key
+ *  holding the separator character cannot collide with a deeper path. Stable
+ *  across re-parses, which is what lets the tree keep its collapse state and its
+ *  open editor across the re-parse every edit triggers. */
+function idFor(docIndex: number, path: (string | number)[]): string {
+  return `${docIndex}:${JSON.stringify(path)}`;
+}
+
+// ── Edits ───────────────────────────────────────────────────────────────────
+// Each takes the current text and returns the next text. They are total: an edit
+// the node does not support returns the text unchanged, so a stale node from a
+// previous parse can never corrupt the file.
+
+/** Rewrite a scalar's value in place, keeping its key, its style and its trailing
+ *  comment. Block scalars rewrite their body lines. */
+export function setValue(text: string, doc: YamlDoc, node: YamlNode, next: string): string {
+  if (!node.editable || node.kind !== "scalar") return text;
+
+  if (node.style === "block") {
+    const body = next === ""
+      ? []
+      : next.split("\n").map((l) => (l === "" ? "" : " ".repeat(node.blockIndent) + l));
+    if (node.endLine > node.line) return replaceLines(text, node.line + 1, node.endLine, body);
+    return insertLines(text, node.line + 1, body);
+  }
+
+  const literal = encodeScalar(next, node.style, doc.strict);
+  // An empty value has no token to replace: the splice point sits right after the
+  // `:`/`-`, so the leading space has to come with the literal.
+  const lead = node.style === "empty" ? " " : "";
+  return splice(text, node.valueStart, node.valueEnd, lead + literal);
+}
+
+/**
+ * The values of a list the tree can show — and edit — as ONE comma-separated
+ * line, or null when it must stay rows. Every item has to be a single-line
+ * scalar the tree could rewrite, carrying nothing a `a, b, c` reading would
+ * drop: no comment (the line has nowhere to keep it), no nested collection, no
+ * anchor, no shared dash line, no comma or newline inside a value (the display
+ * could not round-trip), no empty value (an invisible token between commas).
+ * A flow list spread over lines also stays rows — collapsing it onto one line
+ * would rewrite the author's layout, which the tree never does.
+ */
+export function inlineListValues(node: YamlNode): string[] | null {
+  if (node.kind !== "seq" || !node.editable || !node.children.length) return null;
+  if (isFlow(node) && node.endLine !== node.line) return null;
+  const out: string[] = [];
+  for (const c of node.children) {
+    // The shared-dash check is what keeps a nested `- - x` list in rows: its
+    // first item's line is the outer item's dash line, which the comma line's
+    // rewrite (setListItems replaces whole item lines) would overwrite.
+    if (c.kind !== "scalar" || !c.editable || !c.deletable || c.onDash) return null;
+    if (c.style === "block" || c.style === "empty") return null;
+    if (c.comment || c.lead) return null;
+    if (c.value === "" || /[\n,]/.test(c.value)) return null;
+    out.push(c.value);
+  }
+  return out;
+}
+
+/**
+ * Rewrite an inline-edited list ({@link inlineListValues}) to exactly `values`,
+ * in the list's own style: a flow list inside its brackets, a block list as
+ * `- item` lines at the items' own indent. A value an existing item already
+ * holds keeps that item's written form (its quotes), so reordering or appending
+ * never restyles a neighbour; a new value is written as typed — plain unless it
+ * NEEDS quoting (typing `8080` into a list of ports means the number), quoted
+ * in the strict (JSON) dialect. An empty `values` empties the list: a flow list
+ * to `[]`, a block list down to its bare key.
+ */
+export function setListItems(
+  text: string,
+  doc: YamlDoc,
+  node: YamlNode,
+  values: string[],
+): string {
+  if (inlineListValues(node) === null) return text;
+  const rawFor = new Map<string, string>();
+  for (const c of node.children) if (!rawFor.has(c.value)) rawFor.set(c.value, c.raw);
+  const enc = (v: string) => rawFor.get(v) ?? encodeScalar(v, "plain", doc.strict);
+
+  if (isFlow(node)) {
+    return splice(text, node.flowOpen, node.end, `[${values.map(enc).join(", ")}]`);
+  }
+  const first = node.children[0];
+  const pad = " ".repeat(first.indent);
+  return replaceLines(
+    text,
+    first.line,
+    node.endLine,
+    values.map((v) => `${pad}- ${enc(v)}`),
+  );
+}
+
+/** Rename a mapping key in place, in the dialect it is written in. */
+export function renameKey(text: string, doc: YamlDoc, node: YamlNode, nextKey: string): string {
+  if (node.keyRaw === null || node.keyStart < 0 || nextKey === "") return text;
+  // A key already written quoted stays quoted, whatever the dialect.
+  const quoted = node.keyRaw[0] === '"' || node.keyRaw[0] === "'";
+  return splice(text, node.keyStart, node.keyEnd, encodeKey(nextKey, doc.strict || quoted));
+}
+
+/** The lines a BLOCK node owns: its own, plus the comment run written above it.
+ *  Both edits that move lines around use it, because a node's comment is part of
+ *  the node — left behind, it would silently re-attach itself to whichever entry
+ *  slid into its place, and describe the wrong thing. */
+function blockSpan(node: YamlNode): [number, number] {
+  const lead = node.lead === "" ? 0 : node.lead.split("\n").length;
+  return [node.line - lead, node.endLine];
+}
+
+/**
+ * Remove a node, and the comments that are its own: the one behind it and the run
+ * written above it (see {@link blockSpan}). A node inside a FLOW collection gives
+ * up its span plus the one comma that separated it, so `[a, b, c]` minus `b` is
+ * `[a, c]` and not `[a, , c]`.
+ */
+export function deleteNode(text: string, node: YamlNode): string {
+  if (!node.deletable) return text;
+  if (node.onDash && !node.inFlow) {
+    // The entry shares its item's dash line, so the dash is not its to take:
+    // pull the next sibling up onto it when one follows on its own line
+    // (`- name: a\n  port: 1` minus `name` → `- port: 1`), otherwise leave a
+    // bare `-` — a comment-led sibling keeps its lead run where it is, above
+    // its own line, rather than have the pull-up drag a comment onto the dash.
+    const { lines, starts } = indexLines(text);
+    const next = lines[node.endLine + 1];
+    if (next !== undefined && next.trim() !== "" && !isComment(next) && indentOf(next) === node.indent) {
+      return splice(text, node.start, starts[node.endLine + 1] + node.indent, "");
+    }
+    return replaceLines(text, node.line, node.endLine, [
+      lines[node.line].slice(0, node.indent).trimEnd(),
+    ]);
+  }
+  if (!node.inFlow) {
+    const [from, to] = blockSpan(node);
+    return replaceLines(text, from, to, []);
+  }
+
+  let from = node.start;
+  let to = node.end;
+  // Prefer eating the comma BEFORE us (it keeps the opening bracket clean);
+  // failing that, the one after — we are the collection's first entry.
+  let back = from - 1;
+  while (back >= 0 && /\s/.test(text[back])) back--;
+  if (back >= 0 && text[back] === ",") {
+    from = back;
+  } else {
+    let fwd = to;
+    while (fwd < text.length && /\s/.test(text[fwd])) fwd++;
+    if (text[fwd] === ",") {
+      fwd++;
+      while (fwd < text.length && (text[fwd] === " " || text[fwd] === "\t")) fwd++;
+      to = fwd;
+    }
+  }
+  return splice(text, from, to, "");
+}
+
+/**
+ * Insert a copy of `node` right after it, as a new sibling — what "copy last
+ * item" does when growing a list. A BLOCK node's own lines (its nested block and
+ * the comment behind it, but NOT the prose above it — a copy is not the original)
+ * are duplicated verbatim, so the new entry keeps the source's exact shape and
+ * indentation. A FLOW node's span is duplicated after it with a separating comma.
+ */
+export function duplicateNode(text: string, node: YamlNode): string {
+  if (!node.deletable) return text;
+  if (!node.inFlow) {
+    const { lines } = indexLines(text);
+    const copy = lines.slice(node.line, node.endLine + 1);
+    // A dash-line entry's first line carries the item's `- `; the copy gets
+    // spaces there instead — the dash is the item's, not the entry's.
+    if (node.onDash) copy[0] = " ".repeat(node.indent) + copy[0].slice(node.indent);
+    return insertLines(text, node.endLine + 1, copy);
+  }
+  const body = text.slice(node.start, node.end);
+  return splice(text, node.end, node.end, `, ${body}`);
+}
+
+// ── Copy & paste ────────────────────────────────────────────────────────────
+
+/** An entry captured by the tree's copy button: the node's own source, ready to
+ *  be put back down after another node ({@link pasteAfter}) or handed to the
+ *  system clipboard. A BLOCK entry carries its lines dedented to column 0, so
+ *  `text` reads as a clean fragment and a paste only has to indent it to its new
+ *  siblings' column; a FLOW entry is its span, pasted back between commas. */
+export interface YamlClip {
+  /** The entry as YAML text — what goes on the system clipboard. */
+  text: string;
+  /** Block form: the node's own lines (its trailing comment included, the lead
+   *  run above it not — a copy is not the original; same rule as
+   *  {@link duplicateNode}), dedented to column 0. Empty for a flow entry. */
+  lines: string[];
+  /** Captured from inside a flow collection — pastes back into one. */
+  inFlow: boolean;
+  /** `key: …` (a mapping entry) vs a bare item — decides which containers can
+   *  take it (see {@link canPasteAfter}). */
+  isMapEntry: boolean;
+  kind: YamlKind;
+  /** What the copy is called in the banner and the paste button. */
+  label: string;
+}
+
+function leadingSpaces(line: string): number {
+  let n = 0;
+  while (n < line.length && line[n] === " ") n++;
+  return n;
+}
+
+/** Capture a node for copy/paste, or null when it cannot be removed on its own
+ *  (a copy exists to be pasted, and a paste of it must be deletable again). */
+export function copyNode(text: string, node: YamlNode, label?: string): YamlClip | null {
+  if (!node.deletable) return null;
+  const isMapEntry = node.key !== null;
+  const name = label ?? node.key ?? "item";
+  if (node.inFlow) {
+    const body = text.slice(node.start, node.end);
+    return { text: body, lines: [], inFlow: true, isMapEntry, kind: node.kind, label: name };
+  }
+  const { lines } = indexLines(text);
+  // Dedent by the node's own column — but never past a line's actual indent, so
+  // an oddly out-dented line loses only what it has (a blank line stays blank).
+  const own = lines
+    .slice(node.line, node.endLine + 1)
+    .map((l) => l.slice(Math.min(node.indent, leadingSpaces(l))));
+  // A dash-line entry's first line: the min-guard above would keep the item's
+  // `- ` (the dash sits before the entry's column), so it dedents past it here —
+  // the copy is the entry, not the item.
+  if (node.onDash) own[0] = lines[node.line].slice(node.indent);
+  return { text: own.join("\n"), lines: own, inFlow: false, isMapEntry, kind: node.kind, label: name };
+}
+
+/**
+ * Whether {@link pasteAfter} can put `clip` down as `anchor`'s next sibling. The
+ * entry must FIT the container it would land in — a `key: …` belongs in a
+ * mapping, a bare item in a list, and a block entry has no place inside a flow
+ * collection (nor a flow span on a block line of its own) — so the paste cursor
+ * simply never lands where the splice would tear the file.
+ */
+export function canPasteAfter(clip: YamlClip, anchor: YamlNode, parentKind: string): boolean {
+  if (anchor.inFlow !== clip.inFlow) return false;
+  if (parentKind === "map") return clip.isMapEntry;
+  if (parentKind === "seq") return !clip.isMapEntry;
+  return false;
+}
+
+/**
+ * Insert a copied entry as `anchor`'s next sibling — the spot the paste cursor
+ * marks. A BLOCK clip's lines land right after the anchor's block, re-indented
+ * to the anchor's own column ({@link duplicateNode}'s insertion point, with the
+ * re-indent a copy from another depth needs). A FLOW clip splices in after the
+ * anchor's span — on its own line at the anchor's column when the collection is
+ * spread over lines, inline with a `, ` when it isn't (mirroring how
+ * {@link addChild} grows a flow collection).
+ */
+export function pasteAfter(text: string, anchor: YamlNode, clip: YamlClip): string {
+  if (clip.inFlow) {
+    if (!anchor.inFlow) return text;
+    const { starts, eol } = indexLines(text);
+    const line = lineOfOffset(starts, anchor.start);
+    const ownLine = /^[ \t]*$/.test(text.slice(starts[line], anchor.start));
+    const col = anchor.start - starts[line];
+    return ownLine
+      ? splice(text, anchor.end, anchor.end, `,${eol}${" ".repeat(col)}${clip.text}`)
+      : splice(text, anchor.end, anchor.end, `, ${clip.text}`);
+  }
+  if (anchor.inFlow) return text;
+  const pad = " ".repeat(anchor.indent);
+  return insertLines(
+    text,
+    anchor.endLine + 1,
+    clip.lines.map((l) => (l === "" ? "" : pad + l)),
+  );
+}
+
+/** True when the node holds nothing yet, so its first child can replace the
+ *  placeholder: `key:` or `key: null`. (An empty `[]`/`{}` is NOT a placeholder —
+ *  it is a real, empty flow collection, and it grows children in flow style.) */
+export function isEmptyPlaceholder(node: YamlNode): boolean {
+  if (node.kind !== "scalar" || !node.editable) return false;
+  if (node.style === "empty") return true;
+  const raw = node.raw.trim();
+  return raw === "null" || raw === "~";
+}
+
+/** Whether the tree can add a `kind` child to this node. A map takes keys; a list
+ *  takes items and — as "+ key" — an item that IS a mapping (`- name: api`), which
+ *  is the shape a list of mappings actually grows by; an empty placeholder takes
+ *  either, and becomes that kind. */
+export function canAddChild(node: YamlNode, kind: "key" | "item"): boolean {
+  if (node.kind === "map") return kind === "key";
+  if (node.kind === "seq") return true;
+  return isEmptyPlaceholder(node);
+}
+
+/**
+ * Append a child to `parent`, in the parent's OWN style:
+ *  - a BLOCK collection gains a line (`  key: value` / `  - item`) at its
+ *    children's indent, matching the file's indent step;
+ *  - a FLOW collection gains an entry inside its brackets — inline when it is
+ *    written inline (`[a, b]` → `[a, b, c]`), on its own line at its siblings'
+ *    column when it is spread over lines. It is never rewritten into block style
+ *    behind the author's back.
+ * On a LIST, `kind: "key"` means an item that IS a mapping (`- name: api`) — a list
+ * of mappings is grown by adding keys to it, not by adding a container and then
+ * filling it.
+ * Adding the first child to an empty placeholder (`key:` / `key: null`) clears the
+ * placeholder, so the key holds the new block rather than a scalar AND a block.
+ */
+export function addChild(
+  text: string,
+  doc: YamlDoc,
+  parent: YamlNode,
+  kind: "key" | "item",
+  key: string,
+  literal: string,
+): string {
+  if (!canAddChild(parent, kind)) return text;
+
+  // "+ key" on a list writes an item, not a key: `- name: api`.
+  const asItem = parent.kind === "seq" && kind === "key";
+  const pair = `${encodeKey(key, doc.strict)}:${literal ? ` ${literal}` : ""}`;
+  const flowPair = `${encodeKey(key, doc.strict)}: ${literal || "null"}`;
+
+  // A placeholder INSIDE a flow collection — `{a: null}`, `[a, null]`, and so every
+  // null in a JSON file — has no lines to grow into: it holds a span, and a flow
+  // node has no column at all (`indent` is -1). Growing it as a block would splice a
+  // line at column -1 into the middle of the brackets and tear the collection open.
+  // It becomes a collection in place instead, in the only style available to it.
+  if (parent.inFlow && isEmptyPlaceholder(parent)) {
+    const coll = kind === "item" ? `[${literal}]` : `{${flowPair}}`;
+    // An empty value (`{a: , …}`) has no token to replace: the splice point sits
+    // right after the `:`, so the space comes with the collection — and the spaces
+    // already sitting there go with the splice, or they would be left stranded
+    // between the value and the comma.
+    if (parent.style !== "empty") {
+      return splice(text, parent.valueStart, parent.valueEnd, coll);
+    }
+    let to = parent.valueEnd;
+    while (to < text.length && (text[to] === " " || text[to] === "\t")) to++;
+    return splice(text, parent.valueStart, to, ` ${coll}`);
+  }
+
+  if (isFlow(parent)) {
+    const body = kind === "item" ? literal : asItem ? `{${flowPair}}` : flowPair;
+    return addFlowChild(text, parent, body);
+  }
+
+  const body = kind === "item"
+    ? `- ${literal}`.trimEnd()
+    : asItem
+      ? `- ${pair}`
+      : pair;
+
+  if (parent.children.length) {
+    const childIndent = parent.children[0].indent;
+    const last = parent.children[parent.children.length - 1];
+    return insertLines(text, last.endLine + 1, [" ".repeat(childIndent) + body]);
+  }
+
+  // First child. A placeholder value on the parent's line has to go first, or the
+  // key would hold both a scalar and a block.
+  let out = text;
+  if (parent.kind === "scalar" && parent.style !== "empty") {
+    out = splice(out, parent.valueStart, parent.valueEnd, "");
+    out = trimLineEnd(out, parent.line);
+  }
+  const childIndent = parent.indent + (doc.indentStep || 2);
+  return insertLines(out, parent.line + 1, [" ".repeat(childIndent) + body]);
+}
+
+/** Splice a new entry into a flow collection, matching how it is laid out. */
+function addFlowChild(text: string, parent: YamlNode, body: string): string {
+  if (!parent.children.length) {
+    // An empty `{}` / `[]`: the entry goes straight after the bracket.
+    return splice(text, parent.flowOpen + 1, parent.flowOpen + 1, body);
+  }
+
+  const last = parent.children[parent.children.length - 1];
+  const spread = text.slice(parent.flowOpen, parent.end).includes("\n");
+  if (!spread) return splice(text, last.end, last.end, `, ${body}`);
+
+  // Written over several lines: put the entry on its own line, at the column its
+  // siblings are written at, and leave the closing bracket where the author put it.
+  const { starts, eol } = indexLines(text);
+  const lastLine = lineOfOffset(starts, last.start);
+  const col = last.start - starts[lastLine];
+  return splice(text, last.end, last.end, `,${eol}${" ".repeat(col)}${body}`);
+}
+
+/**
+ * Append a top-level entry. This is the one add with no parent node to hang off —
+ * an empty (or comment-only) file, where the tree has nothing to show yet but must
+ * still be able to seed the document. A JSON file is seeded with the collection
+ * itself, since JSON has no block form to grow into.
+ */
+export function addRootEntry(
+  text: string,
+  kind: "key" | "item",
+  key: string,
+  literal: string,
+  strict = false,
+): string {
+  const body = strict
+    ? kind === "item"
+      ? `[${literal}]`
+      : `{${encodeKey(key, true)}: ${literal || "null"}}`
+    : kind === "item"
+      ? `- ${literal}`.trimEnd()
+      : `${encodeKey(key)}:${literal ? ` ${literal}` : ""}`;
+  const { lines } = indexLines(text);
+  return insertLines(text, lines.length, [body]);
+}
+
+/** Drop trailing whitespace from one line (used after clearing a placeholder). */
+function trimLineEnd(text: string, line: number): string {
+  const idx = indexLines(text);
+  if (line < 0 || line >= idx.lines.length) return text;
+  const l = idx.lines[line];
+  const trimmed = l.replace(/[ \t]+$/, "");
+  if (trimmed === l) return text;
+  return splice(text, idx.starts[line], idx.starts[line] + l.length, trimmed);
+}
+
+/**
+ * Move a node to the position its sibling at `to` holds — what a drag onto that row
+ * means, and what the ↑/↓ buttons ask for one step at a time. A BLOCK node moves
+ * whole lines: its nested block, its trailing comment and the prose above it all
+ * travel with it ({@link blockSpan}), and the siblings it passes keep theirs. A FLOW
+ * node moves its span, taking its separating comma along, so `[a, b, c]` stays a
+ * well-formed flow list however its entries are shuffled.
+ *
+ * It is a MOVE, not a chain of swaps: a swap-per-step would have to re-parse the
+ * text between steps (every splice invalidates every offset after it), and a drag
+ * across five rows is one edit, not five.
+ */
+export function moveNodeTo(
+  text: string,
+  siblings: YamlNode[],
+  node: YamlNode,
+  to: number,
+): string {
+  const from = siblings.findIndex((s) => s.id === node.id);
+  if (from < 0 || to < 0 || to >= siblings.length || to === from) return text;
+  const target = siblings[to];
+  if (!node.deletable || !target.deletable) return text;
+
+  if (node.inFlow && target.inFlow) {
+    const body = text.slice(node.start, node.end);
+    const cut = deleteNode(text, node); // takes the one comma that separated it
+    // Everything after the removed region shifted left by exactly what was removed;
+    // everything before it (which is where a target above us sits) did not move.
+    const shift = text.length - cut.length;
+    const anchor = to < from ? target.start : target.end;
+    const at = anchor > node.start ? anchor - shift : anchor;
+    return splice(cut, at, at, to < from ? `${body}, ` : `, ${body}`);
+  }
+
+  const { lines } = indexLines(text);
+  // A dash-line entry's span is its own lines only — never blockSpan's, whose
+  // lead is the prose above the item's dash line and not the entry's to move.
+  const spanOf = (n: YamlNode): [number, number] =>
+    n.onDash ? [n.line, n.endLine] : blockSpan(n);
+  const [nodeFrom, nodeTo] = spanOf(node);
+  const [targetFrom, targetTo] = spanOf(target);
+  // Rewrite only the run of lines the two of them span, so nothing outside it —
+  // another sibling's comment, a blank line, the trailing newline — is touched.
+  const lo = Math.min(nodeFrom, targetFrom);
+  const hi = Math.max(nodeTo, targetTo);
+  const span = lines.slice(lo, hi + 1);
+  // When first place changes hands, so does the item's dash: the current first
+  // entry gives its `- ` prefix up (its line is dedashed inside the span)…
+  const dash = siblings[0].onDash && (from === 0 || to === 0) ? siblings[0] : null;
+  const prefix = dash ? lines[dash.line].slice(0, dash.indent) : "";
+  if (dash) {
+    span[dash.line - lo] = " ".repeat(dash.indent) + span[dash.line - lo].slice(dash.indent);
+  }
+  const block = span.splice(nodeFrom - lo, nodeTo - nodeFrom + 1);
+  const at = to < from ? targetFrom - lo : targetTo + 1 - lo - block.length;
+  span.splice(at, 0, ...block);
+  // …and the new first entry takes it, on its ENTRY line — its lead comments
+  // stay above the dash line, which is exactly where an item's prose lives
+  // (`leadComment`). The entry line is the span's first line of real content.
+  if (dash) {
+    const entry = span.findIndex((l) => l.trim() !== "" && !isComment(l));
+    if (entry >= 0) span[entry] = prefix + span[entry].slice(prefix.length);
+  }
+  return replaceLines(text, lo, hi, span);
+}
+
+/** Move a node one place up (-1) or down (+1). */
+export function moveNode(
+  text: string,
+  siblings: YamlNode[],
+  node: YamlNode,
+  delta: -1 | 1,
+): string {
+  const at = siblings.findIndex((s) => s.id === node.id);
+  if (at < 0) return text;
+  return moveNodeTo(text, siblings, node, at + delta);
+}
+
+// ── Comments ────────────────────────────────────────────────────────────────
+// A `#` comment is the only place a YAML file documents a key, so the tree treats
+// it as the key's description rather than as scenery: it is read on both of the
+// two places it can be written (above the key, or behind the value), shown on the
+// key, and it travels with the key when the key moves or goes.
+
+/** The node's comment, whichever way round the author wrote it. */
+export function commentOf(node: YamlNode): string {
+  return node.comment || node.lead;
+}
+
+/** Whether the tree may write a comment here. JSON has none to write (it is not a
+ *  YAML dialect thing — the format simply has no comments), and inside a flow
+ *  collection a `#` would swallow the closing bracket and everything up to it. */
+export function canComment(doc: YamlDoc, node: YamlNode): boolean {
+  // A dash-line item carries its comment above (`leadComment`), so it needs no
+  // trailing anchor of its own; every other node needs a place to put one.
+  return !doc.strict && (node.commentAnchor >= 0 || !!node.leadComment);
+}
+
+/**
+ * Write (or, with an empty `next`, clear) a node's comment, KEEPING THE AUTHOR'S
+ * PLACEMENT: one written above the key is rewritten above it, one written behind
+ * the value stays behind it. A node with no comment yet gets one behind — the
+ * placement that adds no line and so cannot disturb anything around it.
+ */
+export function setComment(text: string, doc: YamlDoc, node: YamlNode, next: string): string {
+  if (!canComment(doc, node)) return text;
+  const body = next.trim();
+  const leadLines = node.lead === "" ? 0 : node.lead.split("\n").length;
+
+  // A comment written ABOVE the node's line: when it already has a lead run (any
+  // node), or when it's a dash-line item whose comment lives above by rule. An
+  // existing run is replaced (empty body clears it); a brand-new one is inserted.
+  if ((leadLines > 0 && node.commentStart < 0) || (node.leadComment && node.commentStart < 0)) {
+    const pad = " ".repeat(Math.max(0, node.indent));
+    const written = body === "" ? [] : body.split("\n").map((l) => `${pad}# ${l}`.trimEnd());
+    if (leadLines > 0) {
+      return replaceLines(text, node.line - leadLines, node.line - 1, written);
+    }
+    return insertLines(text, node.line, written);
+  }
+
+  const idx = indexLines(text);
+  const line = lineOfOffset(idx.starts, node.commentAnchor);
+  const eol = idx.starts[line] + idx.lines[line].length;
+  const had = node.commentStart >= 0;
+
+  if (body === "") {
+    // Take the run of spaces before the `#` with it, or clearing the comment would
+    // leave the line with trailing whitespace no one asked for.
+    let from = had ? node.commentStart : node.commentAnchor;
+    while (from > node.commentAnchor && /[ \t]/.test(text[from - 1])) from--;
+    return splice(text, from, eol, "");
+  }
+
+  // Rewriting an existing comment starts at its own `#`, so the gap the author left
+  // in front of it — which may be aligning it with the comments above and below —
+  // survives. Only a brand-new one has to choose a gap.
+  const from = had ? node.commentStart : node.commentAnchor;
+  // A comment behind the value is one line by definition.
+  return splice(text, from, eol, `${had ? "" : "  "}# ${body.replace(/\s*\n+\s*/g, " ")}`);
+}
+
+/** A scalar's type, for the tree's value styling. Display only. */
+export function scalarType(node: YamlNode): "string" | "number" | "boolean" | "null" {
+  if (node.style === "double" || node.style === "single" || node.style === "block") return "string";
+  const v = node.raw.trim();
+  if (node.style === "empty" || v === "null" || v === "~") return "null";
+  if (/^-?(\d+|\d*\.\d+)([eE][+-]?\d+)?$/.test(v) || /^0[xob][0-9a-fA-F_]+$/.test(v)) return "number";
+  if (/^(true|false|yes|no|on|off)$/i.test(v)) return "boolean";
+  return "string";
+}
+
+/** Flatten a document's nodes, parents before children (used by tests). */
+export function walkYaml(node: YamlNode, visit: (n: YamlNode) => void): void {
+  visit(node);
+  for (const c of node.children) walkYaml(c, visit);
+}
diff --git a/src/lib/viewers/yamlGrid.ts b/src/lib/viewers/yamlGrid.ts
new file mode 100644
index 0000000..a3dce28
--- /dev/null
+++ b/src/lib/viewers/yamlGrid.ts
@@ -0,0 +1,234 @@
+/**
+ * The YAML/JSON **card grid** model (#yaml-grid) — a third view on the same text the
+ * tree and Source share, and the pure helpers behind it.
+ *
+ * The VIEW is recursive and tree-like: the document is one centred top card (or, for
+ * a root list, a row of them); every nested mapping/sequence is a card, and its own
+ * nested collections become **subcards laid out in columns below it** — click a
+ * card's header to collapse/expand. Scalars are the editable fields inside a card.
+ * So a deep config reads as a wall of nested cards you drill into, not a ladder you
+ * scroll (the RENDER lives in `components/embed/YamlGrid`).
+ *
+ * Like the tree, the cards are a VIEW ON THE TEXT, not a model of it: every EDIT is
+ * delegated back to `lib/viewers/yaml`'s splice ops (`setValue` for a field,
+ * `addChild` for a new field/card, `deleteNode` for a record), so a card edit keeps
+ * comments, quoting and untouched bytes exactly as the tree's does, and lands in the
+ * same draft as an ordinary dirty/undoable/saveable change. Two views, one text.
+ *
+ * What a field can be (mirrors the tree's honesty rule — never offer an edit it
+ * can't make):
+ *  - a **scalar** the tree could rewrite → an editable field (`setValue`),
+ *  - a **scalar the tree won't touch** (anchor/alias/multiline) → shown, read-only,
+ *  - a **nested collection** → a **subcard** (recursively), or — inside a flat cell,
+ *    e.g. the tabular helpers below — a read-only `{…}` / `[…]` chip.
+ *
+ * This file also keeps the **tabular** helpers (`gridModelFor` / `gridCandidates` /
+ * `hasGrid`): the flat rows × columns model of a single list/map-of-records. The
+ * card view doesn't render it, but it stays a tested, reusable way to ask "is this
+ * region a table?" — and it is what {@link cellKind} / {@link nestedLabel} classify
+ * cells for.
+ *
+ * Pure: no React, no Tauri, no fs. Unit-tested in `src/__tests__/YamlGrid.test.ts`.
+ */
+
+import { parseYaml, isFlow, type YamlDoc, type YamlNode } from "./yaml";
+
+/** True when `node` is a mapping or sequence — i.e. it renders as a card, not a
+ *  scalar field. */
+export function isContainer(node: YamlNode): boolean {
+  return node.kind === "map" || node.kind === "seq";
+}
+
+/** Whether the card view has anything worth showing over the plain tree: at least
+ *  one collection nested inside another (a map/seq as a child of the root or deeper).
+ *  A wholly flat file (a map of scalars, or a list of scalars) has no subcards, so
+ *  the Grid toggle stays hidden and the tree/Source carry it. */
+export function hasCards(text: string, strict = false): boolean {
+  const doc = parseYaml(text, { strict });
+  if (doc.error) return false;
+  const hasNestedContainer = (node: YamlNode): boolean => {
+    for (const c of node.children) {
+      if (isContainer(c)) return true;
+      if (hasNestedContainer(c)) return true;
+    }
+    return false;
+  };
+  return doc.docs.some(hasNestedContainer);
+}
+
+/** One record's cell for a column: the scalar/container node that holds it, or
+ *  `null` when this row's mapping has no such key (an editable empty cell). */
+export type GridCell = YamlNode | null;
+
+export interface GridRow {
+  /** Stable across re-parses (the row mapping's node id), so an open cell editor
+   *  and the selection survive the re-parse an edit triggers. */
+  id: string;
+  /** What heads the row: the list index (`0`, `1`, …) for a list-of-maps, or the
+   *  outer key for a map-of-maps. Display only. */
+  header: string;
+  /** The record itself — the container child. Usually the mapping ({@link map}),
+   *  but a non-mapping member (a bare list scalar) keeps its node here so a card can
+   *  still render its one value. */
+  node: YamlNode;
+  /** The mapping node this row's cells live in — the target a missing-cell add or
+   *  a whole-row delete addresses. A non-mapping member (a bare list scalar) has
+   *  none, so its row is all-empty and cannot grow cells. */
+  map: YamlNode | null;
+  /** Whether the whole row can be removed on its own (`deleteNode` on `map`). */
+  deletable: boolean;
+  /** Cells aligned 1:1 to {@link YamlGridModel.columns}. */
+  cells: GridCell[];
+}
+
+export interface YamlGridModel {
+  /** The collection that was gridded (a `seq` or a `map`). */
+  container: YamlNode;
+  /** `seq` = list of mappings (rows headed by index); `map` = map of mappings
+   *  (rows headed by key). Decides how a new row is added and what heads a row. */
+  shape: "seq" | "map";
+  /** The union of keys across the rows, in first-seen order — the columns. */
+  columns: string[];
+  rows: GridRow[];
+  /** Whether the grid can add a new row (`addChild` to the container). A flow
+   *  container can, a synthetic root cannot carry one, etc.— all editable here. */
+  canAddRow: boolean;
+  /** A short, stable label for the region (`items` / a key path), so a file with
+   *  more than one tabular region can offer a pick between them. */
+  label: string;
+}
+
+/** How much of a container's children must be mappings for it to read as a table
+ *  rather than a plain config collection. Two records is the floor (one is not a
+ *  pattern); a strong majority keeps a mostly-scalar map (with one nested block)
+ *  from masquerading as a grid. */
+const MIN_ROWS = 2;
+const MIN_MAP_FRACTION = 0.6;
+
+/** The mapping children of a container, in order — the rows-to-be. */
+function mapChildren(node: YamlNode): YamlNode[] {
+  return node.children.filter((c) => c.kind === "map");
+}
+
+/** Whether `node` is a collection worth showing as a grid: a seq or map whose
+ *  members are (mostly) mappings, with at least {@link MIN_ROWS} of them. */
+function isGridContainer(node: YamlNode): boolean {
+  if (node.kind !== "seq" && node.kind !== "map") return false;
+  if (node.children.length < MIN_ROWS) return false;
+  const maps = mapChildren(node);
+  if (maps.length < MIN_ROWS) return false;
+  return maps.length / node.children.length >= MIN_MAP_FRACTION;
+}
+
+/** A stable, human label for a container by its path (`items`, `services`,
+ *  `spec.containers`), or `document` for a bare root collection. */
+function labelFor(node: YamlNode): string {
+  if (!node.path.length) return "document";
+  return node.path.map((p) => String(p)).join(".");
+}
+
+/** Build the grid model for one container. Columns are the union of the row
+ *  mappings' keys in first-seen order; each row's cells are aligned to them, with
+ *  `null` where a row lacks that key. */
+export function gridModelFor(container: YamlNode): YamlGridModel {
+  const columns: string[] = [];
+  const seen = new Set<string>();
+  for (const child of container.children) {
+    if (child.kind !== "map") continue;
+    for (const entry of child.children) {
+      if (entry.key !== null && !seen.has(entry.key)) {
+        seen.add(entry.key);
+        columns.push(entry.key);
+      }
+    }
+  }
+
+  const rows: GridRow[] = container.children.map((child, i) => {
+    const isMap = child.kind === "map";
+    const byKey = new Map<string, YamlNode>();
+    if (isMap) for (const e of child.children) if (e.key !== null) byKey.set(e.key, e);
+    return {
+      id: child.id,
+      header: container.kind === "map" ? child.key ?? String(i) : String(i),
+      node: child,
+      map: isMap ? child : null,
+      deletable: child.deletable,
+      cells: columns.map((col) => byKey.get(col) ?? null),
+    };
+  });
+
+  return {
+    container,
+    shape: container.kind === "map" ? "map" : "seq",
+    columns,
+    rows,
+    canAddRow: container.deletable !== false,
+    label: labelFor(container),
+  };
+}
+
+/** Every tabular region in the document, largest first — a file may hold more than
+ *  one (a list of jobs *and* a map of hosts). "Largest" = most cells, so the one a
+ *  reader most wants a grid for is offered first; ties break toward the shallower,
+ *  earlier region so the choice is stable across re-parses. */
+export function gridCandidates(doc: YamlDoc): YamlNode[] {
+  if (doc.error) return [];
+  const found: YamlNode[] = [];
+  const walk = (node: YamlNode) => {
+    if (isGridContainer(node)) found.push(node);
+    for (const c of node.children) walk(c);
+  };
+  for (const root of doc.docs) walk(root);
+  const area = (n: YamlNode) => {
+    const model = gridModelFor(n);
+    return model.rows.length * Math.max(1, model.columns.length);
+  };
+  return found.sort((a, b) => {
+    const d = area(b) - area(a);
+    if (d !== 0) return d;
+    const depth = a.path.length - b.path.length;
+    if (depth !== 0) return depth;
+    return a.start - b.start;
+  });
+}
+
+/** The parsed document plus its tabular regions — one parse feeds both the toggle
+ *  (is a grid available?) and the grid itself. */
+export interface YamlGridDoc {
+  doc: YamlDoc;
+  candidates: YamlNode[];
+}
+
+export function parseGridDoc(text: string, opts: { strict?: boolean } = {}): YamlGridDoc {
+  const doc = parseYaml(text, opts);
+  return { doc, candidates: gridCandidates(doc) };
+}
+
+/** Whether this text has any region worth a grid — what the Grid toggle keys on,
+ *  so it appears exactly for the files where it does something. */
+export function hasGrid(text: string, strict = false): boolean {
+  return parseGridDoc(text, { strict }).candidates.length > 0;
+}
+
+/** A cell's editability, so the grid never offers a control it can't honour
+ *  (mirrors the tree's `source only` rule):
+ *   - `"scalar"`  — a scalar the tree can rewrite in place,
+ *   - `"empty"`   — no node yet; typing adds the key to the row (a new scalar),
+ *   - `"nested"`  — a sub-collection, read-only in a flat grid,
+ *   - `"locked"`  — a scalar the tree won't touch (anchor/alias/multiline). */
+export type CellKind = "scalar" | "empty" | "nested" | "locked";
+
+export function cellKind(cell: GridCell, rowMap: YamlNode | null): CellKind {
+  if (cell === null) return rowMap ? "empty" : "locked";
+  if (cell.kind !== "scalar") return "nested";
+  return cell.editable ? "scalar" : "locked";
+}
+
+/** The read-only chip shown for a nested cell — `{ N }` for a map, `[ N ]` for a
+ *  list — so a sub-collection reads as one at a glance without expanding it. */
+export function nestedLabel(cell: YamlNode): string {
+  const n = cell.children.length;
+  const flow = isFlow(cell);
+  if (cell.kind === "seq") return flow ? `[ ${n} ]` : `${n} item${n === 1 ? "" : "s"}`;
+  return flow ? `{ ${n} }` : `${n} key${n === 1 ? "" : "s"}`;
+}
diff --git a/src/main.tsx b/src/main.tsx
index 7fa4f9c..afa0369 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,6 +2,8 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import { App } from "./App";
 import { installCrashReporter } from "./crashReporter";
+import "@fontsource-variable/inter";
+import "@fontsource-variable/jetbrains-mono";
 import "./styles/themes.css";
 
 installCrashReporter();
diff --git a/src/stores/activity.ts b/src/stores/activity.ts
index cd1a456..519bc97 100644
--- a/src/stores/activity.ts
+++ b/src/stores/activity.ts
@@ -87,6 +87,13 @@ export function notePtyOutput(ptyId: string, data = "") {
   }
 }
 
+/** When a PTY last produced output (ms epoch), or undefined if none was seen
+ *  this session. Read-only view for the tab hover card's "quiet for…" line —
+ *  the raw map stays module-private because it churns per output batch. */
+export function lastPtyOutputAt(ptyId: string): number | undefined {
+  return lastOutputByPty[ptyId];
+}
+
 /** Record that input was sent to a PTY on the user's behalf — a keystroke, a
  *  paste, or a user-triggered flow typing its command (`initialInput`). This is
  *  what makes output COUNT: "working" and "done" only ever arise from output
@@ -94,9 +101,17 @@ export function notePtyOutput(ptyId: string, data = "") {
  *  banner or replaying a prior transcript — real bytes, but nothing anybody
  *  asked for — never lights up a tab or its project pill. `decision` is exempt:
  *  a resumed agent genuinely sitting at an unanswered prompt is real signal
- *  worth surfacing immediately, commanded or not. */
+ *  worth surfacing immediately, commanded or not.
+ *
+ *  Sending input also drops the tail: answering a prompt is input, and a menu
+ *  that has been answered must not be matched again as a live one. This is the
+ *  ONLY thing that retires a decision prompt the user is looking at (looking is
+ *  no longer enough — see `attentionFor`), and it covers the case the per-burst
+ *  reset in `notePtyOutput` misses: an answer so fast that the agent's next
+ *  output lands inside the same burst, leaving the answered menu in the tail. */
 export function noteUserInput(ptyId: string) {
   inputByPty[ptyId] = Date.now();
+  tailByPty[ptyId] = "";
 }
 
 /** Forget everything recorded about a PTY, called when it is (re)spawned. A
@@ -156,15 +171,22 @@ export function _clearPtyActivityForTest() {
  *  decision (a prompt is on screen) vs one that simply finished its turn. */
 export type AttentionKind = "decision" | "done";
 
-/** What an unwatched agent tab is asking for, or null if it isn't asking for
- *  anything. Derived on each `recompute` tick from the tab's own output rather
- *  than pushed in by the terminal: the bell we used to rely on is optional in
- *  every agent we support (and never even reaches xterm for a tab whose pane has
- *  not been opened yet), which left a finished agent showing no state at all.
+/** What an agent tab is asking for, or null if it isn't asking for anything.
+ *  Derived on each `recompute` tick from the tab's own output rather than pushed
+ *  in by the terminal: the bell we used to rely on is optional in every agent we
+ *  support (and never even reaches xterm for a tab whose pane has not been opened
+ *  yet), which left a finished agent showing no state at all.
  *
- *  Also stamps `seenAtByPty` for a tab under the user's eyes, so that everything
- *  it has printed up to now is treated as read and only what it does AFTER the
- *  user looks away can raise a flag again. */
+ *  The two kinds treat "the user is looking at this tab" differently, because
+ *  they mean different things:
+ *  - `done` is about UNREAD output, so looking at the tab IS the thing that
+ *    retires it. A looked-at tab also stamps `seenAtByPty`, so only what the
+ *    agent does AFTER the user looks away can raise the flag again.
+ *  - `decision` is about a BLOCKED agent, and looking at a prompt does not answer
+ *    it. It therefore holds while watched (nothing else in the UI says "this one
+ *    is stuck on you" once the tab is on screen but the eyes are elsewhere), and
+ *    is retired only by input — `noteUserInput` drops the tail the match is made
+ *    against. */
 function attentionFor(
   scope: string,
   tab: TabEntry,
@@ -174,25 +196,21 @@ function attentionFor(
   // Only AI agent tabs raise attention; a shell finishing a build doesn't.
   if (tab.kind !== "agent" && tab.kind !== "local_agent") return null;
   if (isTabDetached(scope, tab.key)) return null;
-  if (isTabLookedAt(scope, tab.key)) {
-    seenAtByPty[ptyId] = now;
-    // What's on screen has been read, so it can't be what raises the next flag.
-    // Dropping the tail here also covers the one case the per-burst reset in
-    // `notePtyOutput` misses: a prompt answered so fast that the agent's next
-    // output lands inside the same burst — you had to be LOOKING at the tab to
-    // answer it, so the menu is gone from the tail before it could stick.
-    tailByPty[ptyId] = "";
-    return null;
-  }
+  const lookedAt = isTabLookedAt(scope, tab.key);
+  // What's on screen has been read, so it can't be what raises a "done" later.
+  if (lookedAt) seenAtByPty[ptyId] = now;
   const seen = seenAtByPty[ptyId] ?? 0;
   const out = lastOutputByPty[ptyId] ?? 0;
   const bell = bellByPty[ptyId] ?? 0;
-  // Nothing has happened here since the user last had eyes on the tab.
-  if (out <= seen && bell <= seen) return null;
   const quiet = now - Math.max(out, bell);
   if (quiet >= DECISION_QUIET_MS && looksLikeDecisionPrompt(tailByPty[ptyId] ?? "")) {
     return "decision";
   }
+  // Past here everything is inferred from silence, which a watched tab's own
+  // screen already tells the user better than a lamp could.
+  if (lookedAt) return null;
+  // Nothing has happened here since the user last had eyes on the tab.
+  if (out <= seen && bell <= seen) return null;
   // "Done" means the agent finished work somebody asked for, so it requires
   // input to have been sent this session (see `noteUserInput`): without it, the
   // quiet that follows a restore banner or a resumed session's replayed
@@ -258,10 +276,14 @@ function sameCountMaps(
 /** Tally each scope's tabs by status. A tab counts exactly once: working wins
  *  over a pending attention flag, mirroring how the tab bar resolves its own
  *  glow, so the pill's bars can never disagree with the tabs they stand for.
- *  The tab currently under the user's eyes is skipped entirely, mirroring
- *  `attentionFor`'s own `isTabLookedAt` guard — the pill's bars stand for the
- *  project's BACKGROUND tabs, so the one tab the user is already looking at
- *  shouldn't light up as if it needed a glance.
+ *  Every tab counts, including the one under the user's eyes: the pill's strip is
+ *  a tally of what the PROJECT is doing, not of what still needs a glance, and a
+ *  project whose bars emptied out the moment it was selected could not answer the
+ *  one question the strip exists for — "is anything still running in there?" —
+ *  for the project you are actually in. (The tab bar still hides the viewed tab's
+ *  own glow: there, the tab IS the thing you're looking at.) A looked-at tab that
+ *  went quiet can still hold no `done` flag, so what a selected project shows is
+ *  its working tabs and its unanswered prompts — see `attentionFor`.
  *  Scopes whose counts are unchanged keep their previous object identity, so a
  *  tab going busy in one project doesn't re-render every other project's pill. */
 function countStatusScopes(
@@ -274,7 +296,6 @@ function countStatusScopes(
   for (const [scope, tabs] of Object.entries(tabsByScope)) {
     const counts: TabStatusCounts = { working: 0, decision: 0, done: 0 };
     for (const t of tabs) {
-      if (isTabLookedAt(scope, t.key)) continue;
       const ptyId = `${scope}:${t.key}`;
       if (isPtyTabKind(t.kind) && busyByTab[ptyId]) counts.working++;
       else if (attentionByTab[ptyId] === "decision") counts.decision++;
@@ -287,6 +308,13 @@ function countStatusScopes(
   return next;
 }
 
+/** True when two string sets hold exactly the same members. */
+function sameStringSet(a: Set<string>, b: Set<string>): boolean {
+  if (a.size !== b.size) return false;
+  for (const v of a) if (!b.has(v)) return false;
+  return true;
+}
+
 function withoutScript(set: Set<string>, scriptPath: string): Set<string> {
   if (!set.has(scriptPath)) return set;
   const next = new Set(set);
@@ -327,6 +355,13 @@ interface ActivityStore {
   /** Absolute paths of `.sh` scripts currently running detached. The run_id
    *  used with the backend is the script's absolute path (see runScript). */
   runningScripts: Set<string>;
+  /** Absolute paths of files whose run-launched terminal tab (Python Run/Debug
+   *  or a foreground shell run, tagged via `TabEntry.runFile`) is producing
+   *  sustained output right now. Derived by `recompute` from `busyByTab`, so it
+   *  drops out the moment the tab closes or goes quiet. Drives the green pulse on
+   *  the file tree's ▶ run button for the tab-backed run paths (the detached `.sh`
+   *  path uses `runningScripts` instead). */
+  runningRunFiles: Set<string>;
   /** Spawn a `.sh` script detached and track it so the run button can show a
    *  spinner until the backend emits `script-finished`. */
   runScript: (scriptPath: string, cwd: string) => void;
@@ -339,6 +374,7 @@ export const useActivityStore = create<ActivityStore>((set, get) => ({
   attentionByScope: {},
   statusCountsByScope: {},
   runningScripts: new Set(),
+  runningRunFiles: new Set(),
 
   noteBell: (ptyId) => {
     if (!splitPtyId(ptyId)) return;
@@ -348,7 +384,13 @@ export const useActivityStore = create<ActivityStore>((set, get) => ({
 
   clearAttention: (ptyId) => {
     seenAtByPty[ptyId] = Date.now();
-    if (!get().attentionByTab[ptyId]) return;
+    const kind = get().attentionByTab[ptyId];
+    if (!kind) return;
+    // Looking at a tab marks its output read — but it does not ANSWER a prompt,
+    // and the next `recompute` would only raise the flag straight back (see
+    // `attentionFor`). Keep it, so the lamp holds steady instead of blinking off
+    // and on at the switch. Input is what retires it.
+    if (kind === "decision" && looksLikeDecisionPrompt(tailByPty[ptyId] ?? "")) return;
     const attentionByTab = { ...get().attentionByTab };
     delete attentionByTab[ptyId];
     set({
@@ -388,6 +430,9 @@ export const useActivityStore = create<ActivityStore>((set, get) => ({
     const nextScope: Record<string, boolean> = {};
     const nextTab: Record<string, boolean> = {};
     const nextAttn: Record<string, AttentionKind> = {};
+    // Files whose run-launched tab is busy this tick (see `runningRunFiles`).
+    // Collected from live tabs only, so a closed/replaced run tab drops out.
+    const nextRunFiles = new Set<string>();
     const live = new Set<string>();
     let changed = false;
 
@@ -416,6 +461,10 @@ export const useActivityStore = create<ActivityStore>((set, get) => ({
         if (tabBusy) {
           nextTab[ptyId] = true;
           scopeBusy = true;
+          // A run-launched tab (Python Run/Debug, foreground shell run) pulses
+          // its source file's ▶ run button while it produces output. Busy-gated,
+          // so a restored-but-quiet run tab never lights up.
+          if (t.runFile) nextRunFiles.add(t.runFile);
         }
         if ((prevTab[ptyId] ?? false) !== tabBusy) changed = true;
 
@@ -467,7 +516,12 @@ export const useActivityStore = create<ActivityStore>((set, get) => ({
     // The tally can move even when no tab flipped busy — a tab carrying an
     // attention flag was closed, say — so it gates the publish independently.
     const countsChanged = !sameCountMaps(prevCounts, nextCounts);
-    if (!changed && !attnChanged && !countsChanged) return;
+    // The run-file set can move independently of `busyByTab` — a run tab going
+    // busy flips both, but a run tab closing while still "busy" drops out here
+    // via `live` even if some other tab keeps the same busy tally — so gate it
+    // on its own comparison, same as the other maps.
+    const runFilesChanged = !sameStringSet(get().runningRunFiles, nextRunFiles);
+    if (!changed && !attnChanged && !countsChanged && !runFilesChanged) return;
     // Only re-publish the maps that actually moved: every tab bar subscribes to
     // the whole `busyByTab` object, so handing it a fresh-but-equal one on each
     // interval tick would re-render them all for nothing.
@@ -477,6 +531,7 @@ export const useActivityStore = create<ActivityStore>((set, get) => ({
         ? { attentionByTab: nextAttn, attentionByScope: rollupAttentionScopes(nextAttn) }
         : {}),
       ...(countsChanged ? { statusCountsByScope: nextCounts } : {}),
+      ...(runFilesChanged ? { runningRunFiles: nextRunFiles } : {}),
     });
   },
 }));
diff --git a/src/stores/connectDialog.ts b/src/stores/connectDialog.ts
index 66b14af..2acc198 100644
--- a/src/stores/connectDialog.ts
+++ b/src/stores/connectDialog.ts
@@ -9,12 +9,18 @@ import { create } from "zustand";
  */
 interface ConnectDialogStore {
   projectId: string | null;
-  open: (projectId: string) => void;
+  /** Which host of the project the modal targets (multi-host remote,
+   *  `docs/multi_host_remote_plan.md`): `"primary"` (the default) or a worker id.
+   *  `null` when no modal is open. */
+  hostId: string | null;
+  /** Open the Connect modal for a project host. `hostId` defaults to the primary. */
+  open: (projectId: string, hostId?: string) => void;
   close: () => void;
 }
 
 export const useConnectDialogStore = create<ConnectDialogStore>((set) => ({
   projectId: null,
-  open: (projectId) => set({ projectId }),
-  close: () => set({ projectId: null }),
+  hostId: null,
+  open: (projectId, hostId = "primary") => set({ projectId, hostId }),
+  close: () => set({ projectId: null, hostId: null }),
 }));
diff --git a/src/stores/detached.ts b/src/stores/detached.ts
index 245cb4b..705990f 100644
--- a/src/stores/detached.ts
+++ b/src/stores/detached.ts
@@ -25,7 +25,9 @@ import {
   allGroups,
   type DropEdge,
   type LayoutNode,
+  type LocalityHost,
   type TabEntry,
+  type TabLocation,
   type WindowBounds,
 } from "./tabs";
 import { useProjectsStore } from "./projects";
@@ -74,8 +76,23 @@ export const DETACHED_DOCK = "detached-dock";
  * and do not restore on next launch.
  */
 export const DETACHED_CLOSE = "detached-close";
+/**
+ * Detached → main: hide this popout into the main window's right-panel "Hidden
+ * subwindows" list instead of docking it live (DETACHED_DOCK) or discarding it
+ * (DETACHED_CLOSE). The group's tabs stay mounted (PTYs alive); the main window
+ * parks its subtree in `hiddenGroupsByScope`, from which it is restored or closed
+ * exactly like a hidden main-window subwindow. Same envelope shape as the dock.
+ */
+export const DETACHED_HIDE = "detached-hide";
 /** Detached → main: the popout's OS geometry changed (persisted for respawn). */
 export const DETACHED_BOUNDS = "detached-bounds";
+/**
+ * Detached → main: the popout's own UI zoom changed (Ctrl +/- in the popout).
+ * Zoom is per-window, so the main window records it on the popout's detached
+ * entry (persisted, and shipped back in the seed) — never touching the global
+ * `ui_zoom` or any other window.
+ */
+export const DETACHED_ZOOM = "detached-zoom";
 /**
  * #42: cross-window drag-to-dock. The detached window streams the gesture to the
  * main window, which renders the dock preview and docks the group on release.
@@ -158,9 +175,12 @@ export interface DetachedPanes {
 }
 
 /**
- * Detached → main: begin a drag-to-dock. Without `tabKey` it drags the WHOLE
- * popout (the tab-bar handle); with `tabKey` it drags that single tab, which the
- * host docks on its own via `attachDetachedTab`.
+ * Detached → main: begin a drag-to-dock. Without `tabKey`/`paneId` it drags the
+ * WHOLE popout (the titlebar, or the bar grip of a single-pane popout); with
+ * `tabKey` it drags that single tab, which the host docks on its own via
+ * `attachDetachedTab`; with `paneId` it drags ONE pane (an inner group) of a
+ * multi-pane popout, which the host docks via `attachDetachedPane` — never the
+ * whole popout, so the sibling panes stay floating.
  */
 export interface DetachedDragStart {
   scope: string;
@@ -169,6 +189,7 @@ export interface DetachedDragStart {
   cursorPhysX: number;
   cursorPhysY: number;
   tabKey?: string;
+  paneId?: string;
 }
 /** Detached → main: the OS cursor moved (physical desktop px — see lib/coords). */
 export interface DetachedDragMove {
@@ -209,20 +230,47 @@ export interface DetachedSeed {
    * merge. Absent on a plain (re)seed, so a refresh never re-animates.
    */
   landedKey?: string;
+  /**
+   * The popout's persisted per-window zoom (undefined = 100%). The popout applies
+   * it to its OWN webview on the FIRST seed, restoring the zoom it was left at
+   * (zoom is per-window, not the global `ui_zoom`). Later re-seeds carry the
+   * up-to-date value but the popout ignores it — it owns its zoom once open.
+   */
+  zoom?: number;
+  /**
+   * The owning project's remote identity, captured at seed time — the detached
+   * window is inert to the projects store, so this is the only way its tab strip
+   * can render the locality badge/menu and name the machine a tab runs on
+   * (`docs/multi_host_remote_plan.md`). Absent for a local project. `computeHosts`
+   * can go stale if a worker is added while the popout is open (re-seed only on a
+   * tab add); acceptable — the machine list refreshes next time it re-seeds.
+   */
+  remote?: DetachedRemoteInfo;
+}
+
+/** The slice of a project's remoteness a detached window needs to drive its
+ *  locality UI (streamed in the seed since the projects store is unavailable). */
+export interface DetachedRemoteInfo {
+  primaryHost?: string;
+  computeHosts?: LocalityHost[];
 }
 
 /** Build a seed payload from a detached popout's tabs + subtree. Pure. The
- *  subtree may be a split (multi-pane popout), so collect keys across the tree. */
+ *  subtree may be a split (multi-pane popout), so collect keys across the tree.
+ *  `zoom` is the popout's persisted per-window zoom (from its detached entry);
+ *  `remote` names the machines a locatable tab can run on (undefined = local). */
 export function buildSeed(
   scope: string,
   groupId: string,
   allScopeTabs: TabEntry[],
   subtree: LayoutNode,
+  zoom?: number,
+  remote?: DetachedRemoteInfo,
 ): DetachedSeed {
   const keys = new Set(orderedTabKeys(subtree));
   // Ship only the popout's own tabs (it renders just this subtree).
   const tabs = allScopeTabs.filter((t) => keys.has(t.key));
-  return { scope, groupId, tabs, subtree };
+  return { scope, groupId, tabs, subtree, zoom, remote };
 }
 
 /**
@@ -234,17 +282,32 @@ export type DetachedEdit =
   | { kind: "rename"; key: string; label: string }
   | { kind: "close"; key: string }
   | { kind: "reorder"; tabKeys: string[] }
-  // New tab created FROM the popout's own "+" menu. The detached window can't mint
-  // the store-unique tab key (or own the PTY), so it ships the resolved payload +
-  // the popout group it should land in; the MAIN window mints the key, appends the
-  // payload (spawning/owning the PTY), and re-seeds the popout so it renders it.
-  | { kind: "add"; tab: Omit<TabEntry, "key">; targetGroupId: string }
+  // Multi-host: change WHERE a locatable tab runs (local mirror / primary / a
+  // worker), chosen from the popout's own locality badge. The detached tab's PTY
+  // is owned by the MAIN window's flat pane layer, so the main window applies this
+  // to `tabsByScope` (which respawns that pane on the new host); the popout applies
+  // it to its own tab payload optimistically so the badge updates at once.
+  | { kind: "setLocation"; key: string; location: TabLocation }
+  // New tab created FROM the popout's own "+" menu, or a file dropped onto a pane
+  // inside the popout. The detached window can't mint the store-unique tab key (or
+  // own the PTY), so it ships the resolved payload + the popout group it should
+  // land in; the MAIN window mints the key, adds the payload (spawning/owning the
+  // PTY), and re-seeds the popout so it renders it. With `edge` set to a side
+  // (left/right/top/bottom) the tab carves a NEW pane at that edge of the target
+  // group (a file dropped on a body edge); omitted or "center" appends it to the
+  // target group (the "+" menu, or a drop on a tab bar / pane centre).
+  | { kind: "add"; tab: Omit<TabEntry, "key">; targetGroupId: string; edge?: DropEdge }
   // Multi-pane popouts: split `key` into a new pane at `edge` of `targetGroupId`.
   | { kind: "split"; key: string; targetGroupId: string; edge: DropEdge }
   // Multi-pane popouts: resize the divider between children i and i+1 of a split.
   | { kind: "resize"; splitId: string; dividerIndex: number; fraction: number }
   // Multi-pane popouts: merge `key` into `targetGroupId` (at `index`, else append).
-  | { kind: "move"; key: string; targetGroupId: string; index?: number };
+  | { kind: "move"; key: string; targetGroupId: string; index?: number }
+  // Toggle/resize a group's docked file-viewer column (the per-subwindow right
+  // file viewer), or record the folder it browsed to. Applied optimistically
+  // popout-side, mirrored by the main window into its detached record so the
+  // state persists + survives a dock.
+  | { kind: "files"; groupId: string; open?: boolean; width?: number; folder?: string };
 
 /** Envelope for a detached→main edit (identity + the edit itself). */
 export interface DetachedEditEnvelope {
@@ -266,6 +329,13 @@ export interface DetachedBoundsEnvelope {
   bounds: WindowBounds;
 }
 
+/** Envelope for a detached→main per-window zoom update. */
+export interface DetachedZoomEnvelope {
+  scope: string;
+  groupId: string;
+  zoom: number;
+}
+
 /** Identity the detached window sends when requesting its seed. */
 export interface DetachedSeedRequest {
   label: string;
@@ -321,6 +391,14 @@ export function applyEditToSubtree(
     case "move":
       // Optimistic local cross-group merge; null (invalid) leaves it unchanged.
       return moveKeyInTree(subtree, edit.key, edit.targetGroupId, edit.index) ?? subtree;
+    case "files":
+      // Optimistic local file-viewer toggle/resize on the target group.
+      return mapGroup(subtree, edit.groupId, (grp) => ({
+        ...grp,
+        ...(edit.open != null ? { filesOpen: edit.open } : {}),
+        ...(edit.width != null ? { filesWidth: edit.width } : {}),
+        ...(edit.folder != null ? { filesFolder: edit.folder } : {}),
+      }));
     case "add":
       // The detached window can't mint the tab key — it leaves the subtree as-is
       // and waits for the main window's re-seed (with the real, keyed tab).
@@ -328,6 +406,9 @@ export function applyEditToSubtree(
     case "rename":
       // Label lives on the tab payload, not the group node — no node change.
       return subtree;
+    case "setLocation":
+      // Locality lives on the tab payload, not the group node — no node change.
+      return subtree;
   }
 }
 
@@ -342,6 +423,16 @@ export function applyRenameToTabs(
   return tabs.map((t) => (t.key === key ? { ...t, label: next } : t));
 }
 
+/** Apply a `setLocation` edit to a tab payload list (popout-side optimistic
+ *  update, so the locality badge flips before the main window's re-derive). Pure. */
+export function applyLocationToTabs(
+  tabs: TabEntry[],
+  key: string,
+  location: TabLocation,
+): TabEntry[] {
+  return tabs.map((t) => (t.key === key ? { ...t, location } : t));
+}
+
 /**
  * #42: the UNIFIED cross-window drop decision for a single dragged tab. Keyed on
  * the physical desktop cursor's relationship to the windows, this resolves a drag
@@ -410,6 +501,46 @@ export function decideDetachedGroupDrop(input: {
   return { kind: "float" };
 }
 
+/**
+ * #42: the UNIFIED cross-window drop decision for ONE PANE (inner group) dragged
+ * out of a MULTI-pane popout by its bar grip. The pane is a subwindow in its own
+ * right, so it follows the single-tab ladder — dock JUST the pane into the main
+ * window, or pop it into its own window — never the whole-popout one, which is
+ * exactly the bug this exists to prevent: a pane drop docking every sibling pane
+ * into the main window. Docking a pane into a SIBLING popout is out of scope
+ * (same as whole groups) → stays put. Pure/testable.
+ */
+export type DetachedPaneDrop =
+  | { kind: "none" } // cancelled / released over the source popout — stay put
+  | { kind: "newWindow" } // Shift, or released in free space → own new popout
+  | { kind: "dockMain" }; // released over the main window (caller has the target)
+
+export function decideDetachedPaneDrop(input: {
+  cancelled: boolean;
+  shift: boolean;
+  inMain: boolean;
+  overPopoutId: string | null;
+  srcGroupId: string;
+}): DetachedPaneDrop {
+  if (input.cancelled) return { kind: "none" };
+  if (input.shift) return { kind: "newWindow" };
+  if (input.overPopoutId && input.overPopoutId !== input.srcGroupId) {
+    return { kind: "none" };
+  }
+  if (input.inMain) return { kind: "dockMain" };
+  return { kind: "newWindow" };
+}
+
+/** The remoteness a popout of `scope` needs to name its machines — read from the
+ *  MAIN window's projects store at seed time. `undefined` for a local project (no
+ *  locality axis) so the popout renders no locality badge, exactly like a local
+ *  project's main-window tab strip. */
+function remoteInfoForScope(scope: string): DetachedRemoteInfo | undefined {
+  const project = useProjectsStore.getState().projects.find((p) => p.id === scope);
+  if (!project?.remote) return undefined;
+  return { primaryHost: project.remote.host, computeHosts: project.compute_hosts };
+}
+
 /**
  * MAIN window: wire the host side of the detached-subwindow protocol. Responds
  * to a detached window's seed request by shipping its group's tabs+subtree,
@@ -425,7 +556,14 @@ export async function listenDetachedHost(): Promise<() => void> {
       (d) => d.id === groupId,
     );
     if (!entry) return;
-    const seed = buildSeed(scope, groupId, store.tabsByScope[scope] ?? [], entry.subtree);
+    const seed = buildSeed(
+      scope,
+      groupId,
+      store.tabsByScope[scope] ?? [],
+      entry.subtree,
+      entry.zoom,
+      remoteInfoForScope(scope),
+    );
     void emit(detachedSeedEvent(label), seed);
   });
 
@@ -436,8 +574,14 @@ export async function listenDetachedHost(): Promise<() => void> {
       // The main window owns tab creation + the PTY: mint the tab into the
       // popout's subtree (spawning the pane in the main window's flat pane layer),
       // then re-seed the popout so it re-renders — attaching to the new PTY — and
-      // plays the drop-in landing for the freshly-added tab.
-      const key = store.addDetachedTab(scope, groupId, edit.tab, edit.targetGroupId);
+      // plays the drop-in landing for the freshly-added tab. A side `edge` carves
+      // the tab into a NEW pane at that edge (a file dropped on a body edge);
+      // otherwise it appends to the target group (the "+" menu / a pane-centre or
+      // tab-bar drop).
+      const key =
+        edit.edge && edit.edge !== "center"
+          ? store.addDetachedTabSplit(scope, groupId, edit.tab, edit.targetGroupId, edit.edge)
+          : store.addDetachedTab(scope, groupId, edit.tab, edit.targetGroupId);
       if (!key) return;
       const entry = (useTabsStore.getState().detachedGroupsByScope[scope] ?? []).find(
         (d) => d.id === groupId,
@@ -448,6 +592,8 @@ export async function listenDetachedHost(): Promise<() => void> {
         groupId,
         useTabsStore.getState().tabsByScope[scope] ?? [],
         entry.subtree,
+        entry.zoom,
+        remoteInfoForScope(scope),
       );
       void emit(detachedSeedEvent(entry.label), { ...seed, landedKey: key });
       return;
@@ -460,6 +606,11 @@ export async function listenDetachedHost(): Promise<() => void> {
     useTabsStore.getState().setDetachedBounds(scope, groupId, bounds);
   });
 
+  const unZoom = await listen<DetachedZoomEnvelope>(DETACHED_ZOOM, (ev) => {
+    const { scope, groupId, zoom } = ev.payload;
+    useTabsStore.getState().setDetachedZoom(scope, groupId, zoom);
+  });
+
   const unDock = await listen<DetachedDockEnvelope>(DETACHED_DOCK, (ev) => {
     const { scope, groupId } = ev.payload;
     // `attachGroup` operates on the ACTIVE scope's live layout, so it can only
@@ -493,12 +644,31 @@ export async function listenDetachedHost(): Promise<() => void> {
     if (localFile) void store.persistScope(scope, localFile);
   });
 
+  const unHide = await listen<DetachedDockEnvelope>(DETACHED_HIDE, (ev) => {
+    const { scope, groupId } = ev.payload;
+    const store = useTabsStore.getState();
+    // Park the popout in the scope's Hidden list (tabs stay mounted). Works for
+    // the active scope (shows in the right panel now) and an inactive one (shows
+    // when that project is next activated) — `hiddenGroupsByScope` is per-scope.
+    store.hideDetachedGroup(scope, groupId);
+    // Persist so the group is saved as HIDDEN (not detached) and restores into the
+    // Hidden list on next launch. The active scope's CenterPanel also debounce-
+    // saves, but a parked (inactive) scope has nothing else to write its
+    // project.json. Root has no project.json, so there's nothing to persist.
+    const localFile = useProjectsStore
+      .getState()
+      .projects.find((p) => p.id === scope)?.local_file;
+    if (localFile) void store.persistScope(scope, localFile);
+  });
+
   return () => {
     unSeed();
     unEdit();
     unBounds();
+    unZoom();
     unDock();
     unClose();
+    unHide();
   };
 }
 
diff --git a/src/stores/drag.ts b/src/stores/drag.ts
index 9cc0a19..cb53849 100644
--- a/src/stores/drag.ts
+++ b/src/stores/drag.ts
@@ -81,6 +81,10 @@ export interface TabDrag {
   // popout. The host then docks just this tab into the main layout via
   // attachDetachedTab instead of re-attaching the whole group.
   detachedTabKey?: string;
+  // #42: set when ONE PANE (inner group) of a MULTI-pane popout is being dragged
+  // by its bar grip. The host then docks just this pane via attachDetachedPane —
+  // never the whole popout, so its sibling panes stay floating.
+  detachedPaneId?: string;
   // ── Content thumbnail (tab drags) ─────────────────────────────────────────
   // A clone of the dragged tab's live pane DOM, captured once at drag start, so
   // the floating ghost can preview the tab's CONTENT (not just its label). The
@@ -127,6 +131,7 @@ interface DragStore {
       detachedScope: string;
       detachedGroupId: string;
       detachedTabKey?: string;
+      detachedPaneId?: string;
     },
   ) => void;
   setEmbedCap: (cap: EmbedCap | null) => void;
@@ -206,6 +211,7 @@ export const useDragStore = create<DragStore>((set) => ({
         detachedScope: d.detachedScope,
         detachedGroupId: d.detachedGroupId,
         detachedTabKey: d.detachedTabKey,
+        detachedPaneId: d.detachedPaneId,
       },
     }),
   setEmbedCap: (cap) =>
diff --git a/src/stores/fileSourcePref.ts b/src/stores/fileSourcePref.ts
new file mode 100644
index 0000000..b8e6fdb
--- /dev/null
+++ b/src/stores/fileSourcePref.ts
@@ -0,0 +1,21 @@
+import { create } from "zustand";
+
+/**
+ * Ephemeral, non-persisted "which side is this remote project's file view
+ * currently showing" preference, keyed by project id. The single source of
+ * truth for the right file tree / Files (Project) tab's Local/Remote switch
+ * (`useFileSource` in `components/files/ProjectFilesPane.tsx`), and read (not
+ * subscribed — a snapshot at open time, not a live sync) by `FileViewerPane` so
+ * a freshly opened subwindow file viewer defaults to the same side the tree is
+ * currently showing, instead of whichever side its own path happened to be on.
+ */
+interface FileSourcePrefStore {
+  byProject: Record<string, "local" | "remote">;
+  set: (projectId: string, source: "local" | "remote") => void;
+}
+
+export const useFileSourcePrefStore = create<FileSourcePrefStore>((set) => ({
+  byProject: {},
+  set: (projectId, source) =>
+    set((s) => ({ byProject: { ...s.byProject, [projectId]: source } })),
+}));
diff --git a/src/stores/fileSources.ts b/src/stores/fileSources.ts
index 7fc8583..c747b5a 100644
--- a/src/stores/fileSources.ts
+++ b/src/stores/fileSources.ts
@@ -9,14 +9,32 @@ import type { FileSource } from "../components/embed/fileAccess";
  * can render the Remote/Local badge on the tab itself instead of spending a
  * whole header row on it. Cleared when the viewer unmounts.
  */
+/**
+ * The Local/Remote switch a viewer tab exposes, mirrored out of `FileViewerPane`
+ * (which owns the `sideOverride` state) so the tab strip's file-source badge can
+ * be a *clickable* toggle — not just a read-only glyph — for a file that exists on
+ * both sides of a remote project. Absent when switching doesn't apply (local
+ * project, or a path with no counterpart on the other side). `remoteDisabled`
+ * means the host has no such file, so the badge must not flip to remote.
+ */
+export interface FileSourceControls {
+  current: "local" | "remote";
+  set: (s: "local" | "remote") => void;
+  remoteDisabled: boolean;
+}
+
 interface FileSourcesStore {
   byTab: Record<string, FileSource>;
+  controlsByTab: Record<string, FileSourceControls>;
   setSource: (tabKey: string, source: FileSource) => void;
   clearSource: (tabKey: string) => void;
+  setControls: (tabKey: string, controls: FileSourceControls) => void;
+  clearControls: (tabKey: string) => void;
 }
 
 export const useFileSourcesStore = create<FileSourcesStore>((set) => ({
   byTab: {},
+  controlsByTab: {},
   setSource: (tabKey, source) =>
     set((s) =>
       s.byTab[tabKey] === source ? s : { byTab: { ...s.byTab, [tabKey]: source } },
@@ -28,4 +46,13 @@ export const useFileSourcesStore = create<FileSourcesStore>((set) => ({
       delete next[tabKey];
       return { byTab: next };
     }),
+  setControls: (tabKey, controls) =>
+    set((s) => ({ controlsByTab: { ...s.controlsByTab, [tabKey]: controls } })),
+  clearControls: (tabKey) =>
+    set((s) => {
+      if (!(tabKey in s.controlsByTab)) return s;
+      const next = { ...s.controlsByTab };
+      delete next[tabKey];
+      return { byTab: s.byTab, controlsByTab: next };
+    }),
 }));
diff --git a/src/stores/globalMachineMonitor.ts b/src/stores/globalMachineMonitor.ts
new file mode 100644
index 0000000..89d937c
--- /dev/null
+++ b/src/stores/globalMachineMonitor.ts
@@ -0,0 +1,32 @@
+import { create } from "zustand";
+
+/** The global machine a `GlobalMachineMonitorDialog` samples — enough identity
+ *  to both authenticate ad-hoc (`user`/`host`/`port`) and title the dialog
+ *  (`label`). Mirrors `DroppedGlobalMachine` (`stores/remoteMachines.ts`). */
+export interface GlobalMachineMonitorTarget {
+  id: string;
+  user?: string;
+  host: string;
+  port?: number;
+  label?: string;
+}
+
+/**
+ * Which global machine's full system-monitor dialog is open, if any. A single
+ * `<GlobalMachineMonitorDialogHost>` is mounted once (in AppShell) and reads
+ * this store; the header's Machines menu (`MachinesIndicator`) opens it via
+ * `open(machine)` from a row's "System monitor…" button — the same
+ * mount-once/store-driven pattern `stores/remoteMachines.ts` uses for the
+ * project-scoped Remote machines window.
+ */
+interface GlobalMachineMonitorStore {
+  machine: GlobalMachineMonitorTarget | null;
+  open: (machine: GlobalMachineMonitorTarget) => void;
+  close: () => void;
+}
+
+export const useGlobalMachineMonitorStore = create<GlobalMachineMonitorStore>((set) => ({
+  machine: null,
+  open: (machine) => set({ machine }),
+  close: () => set({ machine: null }),
+}));
diff --git a/src/stores/globalMachines.ts b/src/stores/globalMachines.ts
new file mode 100644
index 0000000..208825a
--- /dev/null
+++ b/src/stores/globalMachines.ts
@@ -0,0 +1,401 @@
+import { create } from "zustand";
+import { invoke } from "@tauri-apps/api/core";
+import type { ConnState } from "./remoteStatus";
+import type { GlobalMachine, MachineImportEntry } from "../types";
+import { syncGlobalConnected, syncGlobalDisconnected } from "../lib/machineSync";
+import { useHostBusyStore } from "./hostBusy";
+
+/** Per-machine outcome of a bulk import (`importMachines`): whether the shared
+ *  credentials authenticated against that host. The machine is added to the list
+ *  either way — a failed connect just leaves its lamp red to retry, mirroring
+ *  `probeAll`, rather than silently dropping the row. */
+export interface ImportResult {
+  host: string;
+  label?: string;
+  ok: boolean;
+}
+
+/**
+ * Globally connected worker machines — the VPN-tunnel pattern applied to SSH
+ * hosts: authenticated once via the ordinary login mechanism
+ * (`ssh_connect`), with no `remote_path`, so a machine is not tied to any one
+ * project. Later dragged onto a project (`MachinesIndicator`'s rows are the
+ * drag source) to become a `shared_fs` compute host there.
+ *
+ * Unlike `vpnStatus.ts`, there is no backend liveness registry to reconcile
+ * against on focus: `ssh_connect` only *verifies* auth (it warms the shared
+ * OpenSSH ControlMaster opportunistically but does not create/persist one —
+ * see `ssh_common::ssh_base_args`'s `ControlMaster=no`), it doesn't leave a
+ * pooled session running the way a project's `remote_connect` does. So
+ * `status` here is set only by explicit actions (add, Connect, or the
+ * on-menu-open `probeAll` reachability sweep), never polled.
+ */
+interface GlobalMachinesStore {
+  machines: GlobalMachine[];
+  /** Per-machine id; absent = "off". */
+  status: Record<string, ConnState>;
+  loaded: boolean;
+
+  load: () => Promise<void>;
+  add: (m: {
+    user?: string;
+    host: string;
+    port?: number;
+    label?: string;
+    password?: string;
+    remember?: boolean;
+  }) => Promise<GlobalMachine>;
+  /** Surface an **already-connected** host in the list without re-authenticating
+   *  — the caller (e.g. the HPC wizard) has just run `ssh_connect` itself, so
+   *  this only persists the identity (`global_machine_add`, idempotent by target)
+   *  and marks the lamp connected. The counterpart to `add`, which owns the
+   *  connect. Returns the registered (or pre-existing) machine, or `undefined` on
+   *  a persist failure — registration must never break the flow that connected. */
+  register: (m: {
+    user?: string;
+    host: string;
+    port?: number;
+    label?: string;
+  }) => Promise<GlobalMachine | undefined>;
+  /**
+   * Edit an existing machine's connection identity (`user`/`host`/`port`/`label`)
+   * via `global_machine_update`, then — when `connect` is set — re-authenticate the
+   * (possibly new) target with the given password, updating the lamp. The SSH
+   * password isn't stored on the machine, so a password change is applied only by
+   * that connect: `remember: true` saves it to the keychain, `undefined`/`null`
+   * leaves any existing saved credential untouched. Never pass `false` from an
+   * edit — that would *clear* a saved password the user didn't mean to drop
+   * (`remote_credentials::Remember::Clear`). Throws if the update itself fails
+   * (validation / address collision) so the form can surface it; a failed connect
+   * only reddens the lamp.
+   */
+  update: (
+    id: string,
+    fields: { user?: string; host: string; port?: number; label?: string },
+    opts?: { password?: string; remember?: boolean; connect?: boolean },
+  ) => Promise<void>;
+  /** Remove a machine from the list — **actively disconnecting it first** if it
+   *  is live (see the implementation). Detaching it from any project it was also
+   *  added to is deliberately NOT part of this: a project host is a copy by
+   *  value, with its own path and its own lifetime. */
+  remove: (id: string) => Promise<void>;
+  connect: (id: string, password?: string) => Promise<void>;
+  /** Actively disconnect a machine: **end every running tmux job** on it and
+   *  close any live SSH master, then reset the lamp to "off". This is an
+   *  explicit user action ONLY — persistent tmux sessions are meant to outlive a
+   *  relaunch, and this is the one path that deliberately kills them (the
+   *  backend `remote_kill_all_jobs` never runs on restart). Both backend steps
+   *  are best-effort (a machine with nothing running / no master is a no-op);
+   *  the lamp is cleared regardless. */
+  disconnect: (id: string) => Promise<void>;
+  /** Persist a new machine order given the desired id list — the reorder drag
+   *  computes the live-preview order (drop can land before *or* after any row,
+   *  including past the last one), this commits it. Applies client-side first
+   *  (mirrors `stores::projects`' `reorderProjects`), then persists. There's no
+   *  separate position field: array order in `global_machines.json` *is* the
+   *  order. */
+  reorder: (orderedIds: string[]) => Promise<void>;
+  /** Read-only reachability sweep (`ssh_probe`, no keychain writes) — call when
+   *  the header menu opens, mirroring `VpnIndicator`'s per-config silent check. */
+  probeAll: () => Promise<void>;
+  /** Fleet-wide (re)connect: attempt `connect` on every machine not already
+   *  connected/connecting, concurrently, each with any saved credential. A host
+   *  that needs a password we don't hold just reddens its lamp to retry
+   *  individually (no per-host prompt is possible from a bulk action) — mirroring
+   *  `importMachines`. Idempotent for already-connected rows. */
+  retryAll: () => Promise<void>;
+  /** Fleet-wide active disconnect: `disconnect` (end tmux jobs + close master)
+   *  every machine currently connected, concurrently. Off/error rows are skipped.
+   *  Explicit user action only — same contract as the per-row `disconnect`. */
+  disconnectAll: () => Promise<void>;
+  /** Arm/disarm a machine for silent auto-connect on launch / VPN-up. */
+  setAutoConnect: (id: string, enabled: boolean) => Promise<void>;
+  /**
+   * Silently connect every machine armed with `auto_connect` — the launch-time
+   * and VPN-up sweep. Mirrors a project's `autoConnectPrimary`: it **probes
+   * first** (`ssh_probe`, read-only) and only calls `connect` when the host is
+   * reachable, so it never prompts and a machine that can't connect silently
+   * (offline, or a saved password since forgotten) degrades to staying off
+   * rather than turning red or opening a modal at startup. Idempotent: skips a
+   * machine already connected or connecting.
+   */
+  autoConnect: () => Promise<void>;
+  /** Write the given machines (by id, in the passed order) to a shareable JSON
+   *  file at `path`. Thin pass-through to `global_machines_export` — host/port/
+   *  label only, never a username or password (see `commands::global_machines`).
+   *  The path comes from a native save dialog. */
+  exportMachines: (ids: string[], path: string) => Promise<void>;
+  /**
+   * Connect + add a batch of imported machines with **one shared credential**.
+   * For each entry: `ssh_connect` with the shared user/password (an entry may
+   * pin its own `user`, which wins), then `global_machine_add` **regardless** of
+   * whether that connect succeeded — a machine that fails to authenticate is
+   * still registered with a red lamp to retry (mirrors `probeAll`), never
+   * silently dropped. Runs sequentially so the concurrent `global_machine_add`
+   * writes can't race `global_machines.json`. Returns a per-host outcome list.
+   *
+   * `autoConnect` arms every imported row for the launch/VPN-up sweep in the same
+   * pass (`setAutoConnect`), so a bulk import doesn't leave the user ticking the
+   * per-row toggle N times. Arming is safe regardless of how the connect went: the
+   * sweep probes first, so a machine that can't connect silently (no saved
+   * password, host away) just stays dark.
+   */
+  importMachines: (
+    entries: MachineImportEntry[],
+    opts: { user?: string; password?: string; remember?: boolean; autoConnect?: boolean },
+  ) => Promise<ImportResult[]>;
+  setStatus: (id: string, status: ConnState) => void;
+}
+
+export const useGlobalMachinesStore = create<GlobalMachinesStore>((set, get) => ({
+  machines: [],
+  status: {},
+  loaded: false,
+
+  load: async () => {
+    // `.catch` only covers a rejection — a command that resolves to nothing must
+    // not leave `machines` non-iterable, since every consumer maps over it.
+    const list = await invoke<GlobalMachine[]>("global_machines_list").catch(() => []);
+    set({ machines: Array.isArray(list) ? list : [], loaded: true });
+  },
+
+  add: async ({ user, host, port, label, password, remember }) => {
+    await invoke("ssh_connect", { user, host, port, password, remember });
+    const machine = await invoke<GlobalMachine>("global_machine_add", { user, host, port, label });
+    set((s) => ({
+      machines: [...s.machines, machine],
+      status: { ...s.status, [machine.id]: "connected" },
+    }));
+    // Reflect onto any project that already holds this host (primary or worker).
+    syncGlobalConnected(machine);
+    return machine;
+  },
+
+  register: async ({ user, host, port, label }) => {
+    // No `ssh_connect` here — the caller already authenticated this host. Persist
+    // is idempotent by target (backend `global_machine_add`), so a repeat call for
+    // the same host returns the existing row; reconcile it into the list either
+    // way and light the lamp.
+    const machine = await invoke<GlobalMachine>("global_machine_add", { user, host, port, label }).catch(
+      () => null,
+    );
+    if (!machine) return undefined;
+    set((s) => ({
+      machines: s.machines.some((m) => m.id === machine.id) ? s.machines : [...s.machines, machine],
+      status: { ...s.status, [machine.id]: "connected" },
+    }));
+    return machine;
+  },
+
+  update: async (id, { user, host, port, label }, opts) => {
+    // Let a failed update (validation / collision) propagate so the form shows it.
+    const list = await invoke<GlobalMachine[]>("global_machine_update", {
+      id,
+      user,
+      host,
+      port,
+      label,
+    });
+    set({ machines: list });
+    if (!opts?.connect) return;
+    set((s) => ({ status: { ...s.status, [id]: "connecting" } }));
+    try {
+      await invoke("ssh_connect", {
+        user,
+        host,
+        port,
+        password: opts.password || null,
+        // Only `true` (save) or `null` (leave) — never `false`, which would clear
+        // a credential the edit didn't intend to drop.
+        remember: opts.remember ? true : null,
+      });
+      set((s) => ({ status: { ...s.status, [id]: "connected" } }));
+    } catch {
+      set((s) => ({ status: { ...s.status, [id]: "error" } }));
+    }
+  },
+
+  remove: async (id) => {
+    // Removing a machine ENDS it. Dropping the row while its SSH master (and any
+    // tmux job under it) stayed up would leave a live connection nothing in the
+    // UI still points at — unkillable, since the only handle on it was the row
+    // being deleted. So a live machine gets the same active disconnect its own
+    // ⏻ performs, and for the same reason its confirm names the jobs it kills.
+    // Gated on the lamp: an `off`/`error` row has no session, and
+    // `remote_kill_all_jobs` on it would dial the host just to find nothing.
+    const live = get().status[id];
+    if (live === "connected" || live === "connecting") await get().disconnect(id);
+    const list = await invoke<GlobalMachine[]>("global_machine_remove", { id }).catch(() => null);
+    if (!list) return;
+    set((s) => {
+      const status = { ...s.status };
+      delete status[id];
+      return { machines: list, status };
+    });
+  },
+
+  connect: async (id, password) => {
+    const m = get().machines.find((x) => x.id === id);
+    if (!m) return;
+    set((s) => ({ status: { ...s.status, [id]: "connecting" } }));
+    try {
+      await invoke("ssh_connect", {
+        user: m.user,
+        host: m.host,
+        port: m.port,
+        password,
+        remember: null,
+      });
+      set((s) => ({ status: { ...s.status, [id]: "connected" } }));
+      syncGlobalConnected(m);
+    } catch {
+      set((s) => ({ status: { ...s.status, [id]: "error" } }));
+    }
+  },
+
+  disconnect: async (id) => {
+    const m = get().machines.find((x) => x.id === id);
+    if (!m) return;
+    // Clear the lamp first — the kill + master-close are best-effort and must
+    // not leave the row stuck on "connected" if the host is momentarily away.
+    set((s) => ({ status: { ...s.status, [id]: "off" } }));
+    // Mirror onto any project holding this host: tear the active project's pool
+    // and drop every matching lamp before the machine's own teardown runs.
+    syncGlobalDisconnected(m);
+    // This is the one path that deliberately ENDS every tmux session on the host,
+    // so the cached busy reading is now a lie. Drop it, or the lamp would keep
+    // pulsing for work this very call killed (the reading is only re-probed when
+    // a menu opens, so nothing else would correct it).
+    useHostBusyStore.getState().clear(m);
+    const target = { user: m.user, host: m.host, port: m.port };
+    await invoke("remote_kill_all_jobs", target).catch(() => {});
+    await invoke("ssh_close_master", target).catch(() => {});
+  },
+
+  reorder: async (orderedIds) => {
+    const before = get().machines;
+    const byId = new Map(before.map((m) => [m.id, m]));
+    const reordered = orderedIds.map((id) => byId.get(id)).filter(Boolean) as GlobalMachine[];
+    // Guard against a stale/partial id list: only commit a full permutation.
+    if (reordered.length !== before.length) return;
+    if (reordered.every((m, i) => m.id === before[i].id)) return; // no-op drop
+    set({ machines: reordered });
+    const list = await invoke<GlobalMachine[]>("global_machine_reorder", {
+      ids: orderedIds,
+    }).catch(() => null);
+    if (list) set({ machines: list });
+  },
+
+  probeAll: async () => {
+    const machines = get().machines;
+    const results = await Promise.all(
+      machines.map((m) =>
+        invoke<{ ok: boolean }>("ssh_probe", { user: m.user, host: m.host, port: m.port })
+          .then((r) => [m.id, r.ok ? "connected" : "error"] as const)
+          .catch(() => [m.id, "error"] as const),
+      ),
+    );
+    set((s) => ({ status: { ...s.status, ...Object.fromEntries(results) } }));
+  },
+
+  retryAll: async () => {
+    const { machines, status, connect } = get();
+    await Promise.all(
+      machines.map((m) => {
+        const st = status[m.id] ?? "off";
+        if (st === "connected" || st === "connecting") return Promise.resolve();
+        return connect(m.id);
+      }),
+    );
+  },
+
+  disconnectAll: async () => {
+    const { machines, status, disconnect } = get();
+    await Promise.all(
+      machines.map((m) =>
+        (status[m.id] ?? "off") === "connected" ? disconnect(m.id) : Promise.resolve(),
+      ),
+    );
+  },
+
+  setAutoConnect: async (id, enabled) => {
+    const list = await invoke<GlobalMachine[]>("global_machine_set_auto_connect", {
+      id,
+      enabled,
+    }).catch(() => null);
+    if (list) set({ machines: list });
+  },
+
+  autoConnect: async () => {
+    const machines = get().machines.filter((m) => m.auto_connect);
+    await Promise.all(
+      machines.map(async (m) => {
+        const st = get().status[m.id] ?? "off";
+        if (st === "connected" || st === "connecting") return;
+        // Probe is the silent-connect gate: an `ok` probe means `ssh_connect` will
+        // succeed with no prompt (key/agent/saved-password). On anything else leave
+        // the lamp untouched — a stale opt-in must stay dark, never flash red or ask.
+        const reachable = await invoke<{ ok: boolean }>("ssh_probe", {
+          user: m.user,
+          host: m.host,
+          port: m.port,
+        })
+          .then((r) => r.ok)
+          .catch(() => false);
+        if (!reachable) return;
+        await get().connect(m.id);
+      }),
+    );
+  },
+
+  exportMachines: async (ids, path) => {
+    await invoke("global_machines_export", { ids, path });
+  },
+
+  importMachines: async (entries, { user, password, remember, autoConnect }) => {
+    const results: ImportResult[] = [];
+    // Sequential on purpose: each `global_machine_add` rewrites the whole
+    // `global_machines.json`, so parallel adds would clobber each other's writes.
+    for (const entry of entries) {
+      const effUser = entry.user || user || undefined;
+      let ok = true;
+      try {
+        await invoke("ssh_connect", {
+          user: effUser,
+          host: entry.host,
+          port: entry.port,
+          password: password || null,
+          remember: remember ?? null,
+        });
+      } catch {
+        ok = false;
+      }
+      // Add even on a failed connect — the row stays with a red lamp to retry.
+      const machine = await invoke<GlobalMachine>("global_machine_add", {
+        user: effUser,
+        host: entry.host,
+        port: entry.port,
+        label: entry.label,
+      }).catch(() => null);
+      if (machine) {
+        set((s) => {
+          const exists = s.machines.some((m) => m.id === machine.id);
+          return {
+            machines: exists
+              ? s.machines.map((m) => (m.id === machine.id ? machine : m))
+              : [...s.machines, machine],
+            status: { ...s.status, [machine.id]: ok ? "connected" : "error" },
+          };
+        });
+        // Arm the launch/VPN-up sweep in the same pass. Only ever *enables* —
+        // a re-import of a host already in the list must not silently disarm a
+        // toggle the user set by hand.
+        if (autoConnect) await get().setAutoConnect(machine.id, true);
+      }
+      results.push({ host: entry.host, label: entry.label, ok });
+    }
+    return results;
+  },
+
+  setStatus: (id, status) => set((s) => ({ status: { ...s.status, [id]: status } })),
+}));
diff --git a/src/stores/hostBusy.ts b/src/stores/hostBusy.ts
new file mode 100644
index 0000000..6ae0417
--- /dev/null
+++ b/src/stores/hostBusy.ts
@@ -0,0 +1,162 @@
+import { create } from "zustand";
+import { invoke } from "@tauri-apps/api/core";
+import { targetKey, type Target } from "../lib/machineSync";
+import { PRIMARY_HOST } from "./remoteStatus";
+
+/**
+ * Which hosts are **actually being worked on**, as opposed to merely connected.
+ *
+ * A green `ConnLamp` says only that a host authenticates — with a fleet of
+ * machines held open all day (one pooled ControlMaster apiece, kept alive by
+ * `ServerAliveInterval` and nothing else) that is the *steady* state, so it can
+ * no longer answer "where am I running something?". The busy reading answers
+ * that, and the lamp pulses green for it.
+ *
+ * **Busy = the host has ≥1 live tmux session.** That is the right signal
+ * precisely because of the tmux contract (TODO #85): a run is decoupled from the
+ * ssh channel that started it, so a session outliving its tab, an Eldrun
+ * relaunch, or a VPN drop is exactly the work that would otherwise be invisible.
+ * A *detached* session counts — a training run nobody is watching is still a
+ * training run. A foreign session (one Eldrun never started) counts too: the
+ * question is what the machine is doing, not what Eldrun launched.
+ *
+ * **Keyed by SSH target, never by id.** A global machine (`stores/globalMachines`)
+ * and the project host it also is (a primary `remote` or a `compute_hosts`
+ * worker) are copies by value with different ids — `lib/machineSync` already
+ * establishes that `user@host:port` is the only bridge between them. Keying on
+ * `targetKey` means one probe of a machine lights it in the header, on every
+ * project pill that holds it, and in the Remote-machines hub, with no second
+ * round trip and no chance of the three disagreeing.
+ *
+ * **Probed on demand only — never polled.** Each probe is one SSH round trip per
+ * host, and a fleet of sixteen would otherwise mean sixteen `tmux ls`es a minute
+ * forever, for a reading nobody is looking at. So a surface that *shows* the
+ * pulse sweeps when it opens (`MachinesIndicator`'s menu, `RemoteMachinesWindow`)
+ * and the always-visible pill lamps render the **cached** result of whichever
+ * sweep last ran. The cache is therefore a last-known reading, not live truth —
+ * which is why `staleAfterMs` exists and why a disconnect clears it: a lamp
+ * pulsing for a machine that finished an hour ago is worse than one not pulsing.
+ */
+
+/** How long a reading stays trustworthy enough to pulse a lamp nobody re-probed.
+ *  Past this, the cached count is ignored (the lamp goes back to steady green)
+ *  rather than shown as current. Ten minutes matches `ControlPersist`. */
+const STALE_AFTER_MS = 10 * 60 * 1000;
+
+interface Reading {
+  /** Number of live tmux sessions on the host at `at`. */
+  sessions: number;
+  /** Session names, for the lamp's tooltip. */
+  names: string[];
+  /** `Date.now()` of the probe. */
+  at: number;
+}
+
+interface HostBusyStore {
+  /** `targetKey(target)` → last reading. */
+  readings: Record<string, Reading>;
+  /** Targets with a probe in flight, so a re-open can't stack round trips. */
+  inFlight: Record<string, true>;
+
+  /** Probe one **global machine** (no project → ad-hoc auth). */
+  probeGlobal: (target: Target) => Promise<void>;
+  /** Probe one **project host**, riding that project's pooled ControlMaster. */
+  probeProjectHost: (projectId: string, hostId: string, target: Target) => Promise<void>;
+  /** Forget a host's reading — call on an explicit disconnect, whose whole point
+   *  is that it ended every session. Leaving the stale count would keep the lamp
+   *  pulsing for work that was just killed. */
+  clear: (target: Target) => void;
+}
+
+/** Fold a probe result into the store, or drop the in-flight mark on failure.
+ *  A failed probe deliberately leaves any previous reading alone: an unreachable
+ *  host is an SSH-status problem, and the *connection* lamp already says so. */
+function commit(
+  set: (fn: (s: HostBusyStore) => Partial<HostBusyStore>) => void,
+  key: string,
+  names: string[] | null,
+) {
+  set((s) => {
+    const inFlight = { ...s.inFlight };
+    delete inFlight[key];
+    if (!names) return { inFlight };
+    return {
+      inFlight,
+      readings: { ...s.readings, [key]: { sessions: names.length, names, at: Date.now() } },
+    };
+  });
+}
+
+interface TmuxSessionRow {
+  name: string;
+  windows: number;
+  created: number;
+  attached: boolean;
+}
+
+export const useHostBusyStore = create<HostBusyStore>((set, get) => ({
+  readings: {},
+  inFlight: {},
+
+  probeGlobal: async (target) => {
+    const key = targetKey(target);
+    if (get().inFlight[key]) return;
+    set((s) => ({ inFlight: { ...s.inFlight, [key]: true } }));
+    const rows = await invoke<TmuxSessionRow[]>("global_machine_tmux_list", {
+      user: target.user,
+      host: target.host,
+      port: target.port,
+    }).catch(() => null);
+    commit(set, key, rows ? rows.map((r) => r.name) : null);
+  },
+
+  probeProjectHost: async (projectId, hostId, target) => {
+    const key = targetKey(target);
+    if (get().inFlight[key]) return;
+    set((s) => ({ inFlight: { ...s.inFlight, [key]: true } }));
+    const rows = await invoke<TmuxSessionRow[]>("remote_tmux_list", {
+      projectId,
+      hostId: hostId === PRIMARY_HOST ? null : hostId,
+    }).catch(() => null);
+    commit(set, key, rows ? rows.map((r) => r.name) : null);
+  },
+
+  clear: (target) => {
+    const key = targetKey(target);
+    set((s) => {
+      const readings = { ...s.readings };
+      delete readings[key];
+      return { readings };
+    });
+  },
+}));
+
+/** The live reading for a target, or `null` when there is none or it has gone
+ *  stale. Read this rather than `readings[key]` directly — the staleness gate is
+ *  what stops a lamp pulsing for a run that ended while nobody looked. */
+export function busyReading(
+  state: Pick<HostBusyStore, "readings">,
+  target: Target | undefined,
+  staleAfterMs = STALE_AFTER_MS,
+): Reading | null {
+  if (!target?.host) return null;
+  const r = state.readings[targetKey(target)];
+  if (!r || r.sessions === 0) return null;
+  return Date.now() - r.at > staleAfterMs ? null : r;
+}
+
+/** Whether a host should pulse. A host that isn't `connected` never pulses: the
+ *  reading is by definition from before it dropped. */
+export function isBusy(
+  state: Pick<HostBusyStore, "readings">,
+  target: Target | undefined,
+  connected: boolean,
+): boolean {
+  return connected && busyReading(state, target) !== null;
+}
+
+/** The lamp tooltip for a busy host — "2 sessions running: build, train". */
+export function busyLabel(reading: Reading): string {
+  const n = reading.sessions;
+  return `${n} session${n === 1 ? "" : "s"} running: ${reading.names.join(", ")}`;
+}
diff --git a/src/stores/hpcJobs.ts b/src/stores/hpcJobs.ts
new file mode 100644
index 0000000..4773491
--- /dev/null
+++ b/src/stores/hpcJobs.ts
@@ -0,0 +1,52 @@
+import { create } from "zustand";
+
+/**
+ * The jobs this Eldrun session submitted, per project — so the Jobs view can show
+ * a freshly-submitted job (and re-open its log) *before* the next `squeue` poll
+ * catches up, and can resolve a job id back to the output file it should tail.
+ *
+ * `squeue` on the host is the source of truth for what is actually queued/running
+ * (`slurm_queue`); this store is only the small local memory of "what did *I* just
+ * launch, and where does its log live". It is purely in-memory: a relaunch forgets
+ * it, and the next `squeue` poll re-lists whatever is still real. No persistence —
+ * the out-file paths are re-derivable from `scontrol` and a stale path helps nobody.
+ */
+export interface HpcJob {
+  jobId: string;
+  name: string;
+  /** Absolute path to the job's stdout on the host — what a Watch tab tails. */
+  outFile: string;
+  /** Host id the job runs on (`"primary"` or a worker id). */
+  host: string;
+  /** Submit time, ms since epoch (local clock — display only). */
+  submittedAt: number;
+}
+
+interface HpcJobsStore {
+  /** projectId → jobs submitted this session, newest first. */
+  byProject: Record<string, HpcJob[]>;
+  /** Record a just-submitted job (deduped by jobId+host, newest kept). */
+  add: (projectId: string, job: HpcJob) => void;
+  /** Forget a job (e.g. after a successful cancel). */
+  remove: (projectId: string, jobId: string, host: string) => void;
+}
+
+export const useHpcJobsStore = create<HpcJobsStore>((set) => ({
+  byProject: {},
+  add: (projectId, job) =>
+    set((s) => {
+      const prev = s.byProject[projectId] ?? [];
+      const deduped = prev.filter((j) => !(j.jobId === job.jobId && j.host === job.host));
+      return { byProject: { ...s.byProject, [projectId]: [job, ...deduped] } };
+    }),
+  remove: (projectId, jobId, host) =>
+    set((s) => {
+      const prev = s.byProject[projectId] ?? [];
+      return {
+        byProject: {
+          ...s.byProject,
+          [projectId]: prev.filter((j) => !(j.jobId === jobId && j.host === host)),
+        },
+      };
+    }),
+}));
diff --git a/src/stores/hpcPipeline.ts b/src/stores/hpcPipeline.ts
new file mode 100644
index 0000000..cdfca31
--- /dev/null
+++ b/src/stores/hpcPipeline.ts
@@ -0,0 +1,23 @@
+import { create } from "zustand";
+
+/**
+ * Open/closed state for the guided **HPC pipeline wizard**
+ * (`docs/quirky-knitting-umbrella` plan Phase B). The wizard itself
+ * (`components/projects/HpcPipelineWizard`) holds its per-step form state; this
+ * store only decides whether it is on screen, so the project-switcher **+** menu
+ * (and anywhere else) can launch it without prop-drilling a callback down.
+ *
+ * Mirrors `stores/remoteMachines` — one boolean plus open/close, mounted once as a
+ * host in `AppShell`.
+ */
+interface HpcPipelineStore {
+  open: boolean;
+  openWizard: () => void;
+  close: () => void;
+}
+
+export const useHpcPipelineStore = create<HpcPipelineStore>((set) => ({
+  open: false,
+  openWizard: () => set({ open: true }),
+  close: () => set({ open: false }),
+}));
diff --git a/src/stores/projects.ts b/src/stores/projects.ts
index dd12cdf..5fd8789 100644
--- a/src/stores/projects.ts
+++ b/src/stores/projects.ts
@@ -5,6 +5,7 @@ import {
   formatRemoteTarget,
   resolveLocalMirror,
   resolveProjectDirectory,
+  type ComputeHost,
   type GitHostingInfo,
   type GitProvider,
   type ProjectEntry,
@@ -18,7 +19,9 @@ import {
   useTabsStore,
   type SavedLayoutTree,
   type TabKind,
+  type ViewerState,
 } from "./tabs";
+import { type AgentMode } from "../components/tabs/agentModes";
 import { useTimerStore } from "./timer";
 import { useVpnPromptStore } from "./vpnPrompt";
 import { useSettingsStore } from "./settings";
@@ -188,6 +191,28 @@ async function ensureRootSshLoginIfNeeded(project: ProjectEntry | undefined): Pr
   }
 }
 
+/**
+ * The password a create/extend dialog authenticated its SSH session with, handed
+ * over for that project's **first** pooled connect and forgotten the moment it is
+ * used (or the connect gives up). Never persisted — persisting is what the dialog's
+ * "Save password" toggle is for, and a user who declined it must not have the
+ * secret written anywhere.
+ *
+ * Without this, the first `remote_connect` for a just-created remote project ran
+ * with `password: null` and only succeeded because the dialog's ControlMaster was
+ * still up. Two things came out wrong: the pool depended on a master it doesn't own,
+ * and the backend — which reads "no password given, none saved" as *key* auth —
+ * recorded `key_auth: true` on a host that in fact needs a password, so the project
+ * then advertised itself as auto-connect-eligible and the auto-connect failed on the
+ * next launch.
+ */
+const pendingRemotePassword = new Map<string, string>();
+
+/** Hand `projectId`'s first pooled connect the password the dialog just used. */
+export function stashRemotePassword(projectId: string, password: string): void {
+  if (password) pendingRemotePassword.set(projectId, password);
+}
+
 /**
  * Phase 0 (mount-free remote): open the pooled SSH/SFTP connection for a remote
  * project so authentication happens once on activation and every later channel
@@ -195,9 +220,12 @@ async function ensureRootSshLoginIfNeeded(project: ProjectEntry | undefined): Pr
  * effort and fire-and-forget: a failure (offline host, or password-only auth
  * with no live master) is logged and never blocks activation — later access
  * falls back to a one-shot session exactly as before. No-op for local projects
- * (the backend resolves remoteness and returns early). Passes no password (the
- * no-stored-password rule); password-auth hosts authenticate their master via
- * the interactive root-terminal login, which this connection then rides.
+ * (the backend resolves remoteness and returns early).
+ *
+ * The password, in order: the one the create/extend dialog just authenticated with
+ * (`stashRemotePassword`, single-use), else none — in which case the backend falls
+ * back to a saved credential for the host, then to key/agent auth, and finally to
+ * the master an interactive root-terminal login left behind.
  */
 function ensureRemotePool(projectId: string): void {
   const status = useRemoteStatusStore.getState();
@@ -211,10 +239,17 @@ function ensureRemotePool(projectId: string): void {
   const maxAttempts = 6;
   const tryConnect = () => {
     if (useProjectsStore.getState().activeId !== projectId) return;
-    void invoke("remote_connect", { projectId, password: null })
-      .then(() => useRemoteStatusStore.getState().setSsh(projectId, "connected"))
+    // Kept across retries (an early attempt can lose to a still-starting host) and
+    // dropped once the attempt is settled either way.
+    const password = pendingRemotePassword.get(projectId) ?? null;
+    void invoke("remote_connect", { projectId, password })
+      .then(() => {
+        pendingRemotePassword.delete(projectId);
+        useRemoteStatusStore.getState().setSsh(projectId, "connected");
+      })
       .catch((error) => {
         if (++attempts >= maxAttempts) {
+          pendingRemotePassword.delete(projectId);
           console.warn("remote_connect failed", error);
           useRemoteStatusStore.getState().setSsh(projectId, "error");
           return;
@@ -256,7 +291,7 @@ const autoConnecting = new Set<string>();
  * Fire-and-forget: it never blocks a switch. Local tabs restore and work on the
  * mirror regardless, and remote panes stay held until the pool is actually up.
  */
-async function autoConnectRemote(projectId: string): Promise<void> {
+async function autoConnectPrimary(projectId: string): Promise<void> {
   const project = useProjectsStore.getState().projects.find((p) => p.id === projectId);
   const remote = project?.remote;
   if (!remote?.auto_connect) return;
@@ -345,10 +380,103 @@ async function autoConnectRemote(projectId: string): Promise<void> {
   }
 }
 
-/** Tear down a remote project's pooled connection on deactivation. Best-effort. */
+/**
+ * Auto-connect a remote project on launch/activation: the primary first, then any
+ * worker (`compute_hosts`) that opted in. The primary is awaited before the
+ * workers fire so a VPN it brings up (the tunnel is machine-wide) is already there
+ * when a worker reachable only through it is probed. Fire-and-forget per host —
+ * one worker being unreachable never blocks the others or the primary.
+ */
+async function autoConnectRemote(projectId: string): Promise<void> {
+  await autoConnectPrimary(projectId);
+  const project = useProjectsStore.getState().projects.find((p) => p.id === projectId);
+  for (const host of project?.compute_hosts ?? []) {
+    if (host.auto_connect) void autoConnectWorker(projectId, host);
+  }
+}
+
+/**
+ * The worker twin of `autoConnectPrimary`: connect one opted-in worker host with no
+ * prompt. Simpler than the primary — a worker has no VPN escalation of its own (the
+ * tunnel is machine-wide, so the primary or the header owns it) — but it keeps the
+ * same guards: only from an "off" lamp, only when eligible (`key_auth` or a saved
+ * password, re-checked against the backend so a stale opt-in degrades to
+ * "stay disconnected"), and it abandons its own "connecting" lamp if the user
+ * switches away mid-probe. Keyed in `autoConnecting` by `project:host` so it never
+ * collides with the primary's per-project claim.
+ */
+async function autoConnectWorker(projectId: string, host: ComputeHost): Promise<void> {
+  const hostId = host.id;
+  const claim = `${projectId}:${hostId}`;
+  const state = useRemoteStatusStore.getState().byHost[projectId]?.[hostId];
+  if ((state?.ssh ?? "off") !== "off" || autoConnecting.has(claim)) return;
+  autoConnecting.add(claim);
+
+  const stillActive = () => useProjectsStore.getState().activeId === projectId;
+  const status = () => useRemoteStatusStore.getState();
+  const abandon = () => {
+    if (status().byHost[projectId]?.[hostId]?.ssh === "connecting")
+      status().setSsh(projectId, "off", hostId);
+  };
+  try {
+    const sshArgs = { user: host.user ?? null, host: host.host, port: host.port ?? null };
+    const eligible =
+      host.key_auth === true ||
+      (await invoke<boolean>("remote_has_saved_password", sshArgs).catch(() => false));
+    if (!eligible || !stillActive()) return;
+
+    status().setSsh(projectId, "connecting", hostId);
+    const probe = await invoke<SshProbe>("ssh_probe", sshArgs);
+    if (!stillActive()) return abandon();
+    if (!probe.ok) {
+      console.warn("worker auto-connect: host not reachable/authenticating", probe.error);
+      status().setSsh(projectId, "error", hostId);
+      return;
+    }
+    await invoke("remote_connect", { projectId, hostId, password: null });
+    if (!stillActive()) return abandon();
+    status().setSsh(projectId, "connected", hostId);
+  } catch (error) {
+    console.warn("worker auto-connect failed", error);
+    if (stillActive()) status().setSsh(projectId, "error", hostId);
+    else abandon();
+  } finally {
+    autoConnecting.delete(claim);
+  }
+}
+
+/**
+ * Re-attempt auto-connect for the **active** remote project after a VPN tunnel has
+ * just come up (the machine-wide event `lib/remoteAutoReconnect` subscribes to).
+ *
+ * A first auto-connect at launch may have run *before* the armed tunnel was up: the
+ * probe found the host unreachable and left the lamp red (`autoConnectPrimary` step
+ * 4 — no retry loop of its own). Now the routing exists, so we reset that red lamp
+ * (primary and each opted-in worker) back to "off" and fire `autoConnectRemote`
+ * again — the guard there only re-attempts from "off", so without this reset the
+ * fresh tunnel would go unused until the user connected by hand. Only ever clears an
+ * `error` lamp: a `connecting`/`connected` lamp is a live or winning attempt and is
+ * left strictly alone. No-op unless the active project is a remote that opted in.
+ */
+export function retryAutoConnectAfterVpn(): void {
+  const { activeId, projects } = useProjectsStore.getState();
+  if (!activeId) return;
+  const project = projects.find((p) => p.id === activeId);
+  if (!project?.remote?.auto_connect) return;
+  const status = useRemoteStatusStore.getState();
+  if ((status.byProject[activeId]?.ssh ?? "off") === "error") status.setSsh(activeId, "off");
+  for (const host of project.compute_hosts ?? []) {
+    if (host.auto_connect && (status.byHost[activeId]?.[host.id]?.ssh ?? "off") === "error")
+      status.setSsh(activeId, "off", host.id);
+  }
+  void autoConnectRemote(activeId);
+}
+
+/** Tear down a remote project's pooled connection on deactivation — the primary
+ *  AND every worker host (multi-host remote). Best-effort. */
 function dropRemotePool(projectId: string): void {
   useRemoteStatusStore.getState().clear(projectId);
-  void invoke("remote_disconnect", { projectId }).catch(() => {});
+  void invoke("remote_disconnect_all_hosts", { projectId }).catch(() => {});
 }
 
 /**
@@ -408,7 +536,11 @@ interface ProjectRuntimeSwitchedPayload {
     embedPath?: string;
     embedExec?: string;
     viewer?: "pdf" | "image" | "markdown" | "text";
+    viewerState?: ViewerState;
     location?: "local" | "remote";
+    agentMode?: AgentMode;
+    /** A "projectfiles" tab's browsed folder (see TabEntry.folder). */
+    folder?: string;
   }>;
   // Opaque split/group layout tree (camelCased by the backend's serde rename);
   // absent → restored as a single group.
@@ -460,11 +592,21 @@ interface ProjectsStore {
    *  Backend normalizes blank fields away and stores it in both projects.json
    *  and project.json; the stored spec is mirrored into local state. */
   setProjectSandboxSpec: (id: string, spec: SandboxSpec) => Promise<void>;
+  /** Pin the project's Python interpreter, or `null` to restore auto-detect (#87). */
+  setProjectPython: (id: string, interpreter: string | null) => Promise<void>;
   /** Opt a remote project in/out of auto-connect (connect it silently on launch
    *  and activation). Only offered once the connect can complete with no prompt —
    *  a saved SSH password, or a host recorded as `key_auth`; `autoConnectRemote`
    *  re-checks that, so a stale opt-in degrades to staying disconnected. */
   setProjectAutoConnect: (id: string, enabled: boolean) => Promise<void>;
+  /** Opt a remote project in/out of persistent (tmux) sessions (TODO #85). Default
+   *  ON, so this only records an opt-out; re-enabling clears the field. */
+  setProjectPersistSessions: (id: string, enabled: boolean) => Promise<void>;
+  /** Set (or clear, on blank) the display name for a remote project's PRIMARY
+   *  machine — the counterpart of a worker's `label` (`patch_compute_host`).
+   *  Distinct from the project name: this labels the host, shown wherever a
+   *  project's hosts are listed side by side (System Monitor, pill lamps). */
+  setProjectRemoteLabel: (id: string, label: string) => Promise<void>;
   /** Attach (or clear) an OpenVPN config on a remote project's SSH spec, so a
    *  project created without a VPN can gain one later when reconnecting from a
    *  VPN-gated network. `config = null`/"" clears it. Mirrors the stored path
@@ -651,6 +793,12 @@ export const useProjectsStore = create<ProjectsStore>((set, get) => ({
       projectId: id,
       previousProjectId: previousId,
       previousSnapshot: {
+        // Keep in step with the canonical persist in `tabs.ts` (persistScope):
+        // this snapshot OVERWRITES the previous project's project.json on switch,
+        // so any field dropped here is lost on a switch even though the debounced
+        // save wrote it. That is how a Files (Project) tab's browsed `folder` (and
+        // a viewer's scroll position / an agent's plan-mode) went missing on
+        // switch-away.
         tabLayout: tabs.map((t) => ({
           key: t.key,
           label: t.label,
@@ -662,7 +810,10 @@ export const useProjectsStore = create<ProjectsStore>((set, get) => ({
           embedPath: t.embedPath,
           embedExec: t.embedExec,
           viewer: t.viewer,
+          viewerState: t.viewerState,
           location: t.location,
+          agentMode: t.agentMode,
+          folder: t.folder,
         })),
         tabGroups,
         activeTabIndex,
@@ -912,6 +1063,22 @@ export const useProjectsStore = create<ProjectsStore>((set, get) => ({
     }));
   },
 
+  setProjectPython: async (id, interpreter) => {
+    // Backend writes both stores (projects.json mirror + project.json) and returns
+    // what it stored — null when cleared back to auto-detect.
+    const saved = await invoke<string | null>("set_project_python", {
+      projectId: id,
+      interpreter,
+    });
+    set((state) => ({
+      projects: state.projects.map((project) =>
+        project.id === id
+          ? { ...project, python_interpreter: saved ?? undefined }
+          : project,
+      ),
+    }));
+  },
+
   setProjectAutoConnect: async (id, enabled) => {
     // Backend patches `auto_connect` on the remote spec in both projects.json and
     // project.json and returns the resulting state; mirror it into local state so
@@ -929,6 +1096,41 @@ export const useProjectsStore = create<ProjectsStore>((set, get) => ({
     }));
   },
 
+  setProjectPersistSessions: async (id, enabled) => {
+    // TODO #85: persistent (tmux) sessions are DEFAULT ON for a remote project, so
+    // the backend stores only an explicit opt-out (`persist_sessions: false`) and
+    // clears the field when re-enabled. Mirror the resulting state into local state
+    // as `persist_sessions: enabled ? undefined : false` so the pill reflects it.
+    const result = await invoke<boolean>("set_project_persist_sessions", {
+      projectId: id,
+      enabled,
+    });
+    set((state) => ({
+      projects: state.projects.map((project) =>
+        project.id === id && project.remote
+          ? {
+              ...project,
+              remote: { ...project.remote, persist_sessions: result ? undefined : false },
+            }
+          : project,
+      ),
+    }));
+  },
+
+  setProjectRemoteLabel: async (id, label) => {
+    const result = await invoke<string | null>("set_project_remote_label", {
+      projectId: id,
+      label,
+    });
+    set((state) => ({
+      projects: state.projects.map((project) =>
+        project.id === id && project.remote
+          ? { ...project, remote: { ...project.remote, label: result ?? undefined } }
+          : project,
+      ),
+    }));
+  },
+
   setProjectOpenvpn: async (id, config, username) => {
     // Backend patches the `openvpn` field on the remote spec in both projects.json
     // and project.json and returns the stored config path (""=cleared); mirror it
@@ -1019,10 +1221,27 @@ export const useProjectsStore = create<ProjectsStore>((set, get) => ({
     // Backend promotes the local mirror back to the project directory and drops
     // the remote/mirror pointers (host files untouched), returning the updated
     // local entry. Replace the whole entry so the pill lamp + file tree update.
+    const oldDir = get().projects.find((p) => p.id === id)?.directory ?? "";
     const updated = await invoke<ProjectEntry>("detach_project_from_remote", { projectId: id });
     set((state) => ({
       projects: state.projects.map((project) => (project.id === id ? updated : project)),
     }));
+
+    // Re-point the tabs. `directory` just changed out from under them: it was the remote
+    // state dir, and it is now the promoted mirror. Every tab still holds the old one as
+    // its cwd — harmless while the project was remote (localTabCwd rewrote it at render),
+    // instantly wrong the moment it isn't, because that override is gated on the project
+    // BEING remote. Left alone, agents relaunch inside the state dir this detach just
+    // emptied, and Claude — which keys its session history by cwd — can no longer find the
+    // conversation to `--resume`. See `detachScopeFromRemote`.
+    if (oldDir && updated.directory) {
+      useTabsStore.getState().detachScopeFromRemote(id, oldDir, updated.directory);
+    }
+
+    // The SSH/VPN lamp lives in its own store, keyed by project — nothing about replacing
+    // the project entry clears it, so a detached project would keep showing a connection
+    // to a host it no longer has.
+    useRemoteStatusStore.getState().clear(id);
   },
 
   unpublishProject: async (id) => {
diff --git a/src/stores/remoteMachines.ts b/src/stores/remoteMachines.ts
new file mode 100644
index 0000000..d1435bf
--- /dev/null
+++ b/src/stores/remoteMachines.ts
@@ -0,0 +1,55 @@
+import { create } from "zustand";
+
+/** A global machine handed to a project, awaiting only its shared path
+ *  before `RemoteMachinesWindow` turns it into a `shared_fs` compute host.
+ *  (Named for the drag gesture that used to deliver it; the machine now
+ *  arrives from the header menu's "add to a project" picker instead.) */
+export interface DroppedGlobalMachine {
+  id: string;
+  host: string;
+  user?: string;
+  port?: number;
+  label?: string;
+}
+
+/**
+ * Which remote project's "Remote machines" manager is open, if any (multi-host
+ * remote, `docs/multi_host_remote_plan.md`). A single `<RemoteMachinesDialogHost>`
+ * is mounted once (in AppShell) and reads this store; the pill's Runtime menu item
+ * and a right-click on the pill's remote lamp both open it via `open(projectId)`.
+ * Keyed by an explicit project id — not the active project — so switching projects
+ * never retargets an open manager.
+ *
+ * `pendingDrop` seeds the "confirm shared path" panel when a global machine
+ * (`stores/globalMachines.ts`) is added to this **remote** project — picked from
+ * the header machine menu's "add to a project" list, which calls
+ * `open(projectId, payload)` to open this window with the machine pre-filled.
+ *
+ * `extendTarget` is the same handoff for a **local** project, whose answer is
+ * not a worker but the "Extend to remote" flow — a dialog `ProjectPill` owns.
+ * The picker lists only *open* projects, so the target's pill is mounted and
+ * picks this up in an effect (clearing it). It lives here, beside `pendingDrop`,
+ * because the two are one decision: which of the two ways a machine can join a
+ * project applies to the one that was picked.
+ */
+interface RemoteMachinesDialogStore {
+  projectId: string | null;
+  pendingDrop: DroppedGlobalMachine | null;
+  extendTarget: { projectId: string; machine: DroppedGlobalMachine } | null;
+  open: (projectId: string, pendingDrop?: DroppedGlobalMachine | null) => void;
+  setPendingDrop: (pendingDrop: DroppedGlobalMachine | null) => void;
+  requestExtend: (projectId: string, machine: DroppedGlobalMachine) => void;
+  clearExtend: () => void;
+  close: () => void;
+}
+
+export const useRemoteMachinesStore = create<RemoteMachinesDialogStore>((set) => ({
+  projectId: null,
+  pendingDrop: null,
+  extendTarget: null,
+  open: (projectId, pendingDrop = null) => set({ projectId, pendingDrop }),
+  setPendingDrop: (pendingDrop) => set({ pendingDrop }),
+  requestExtend: (projectId, machine) => set({ extendTarget: { projectId, machine } }),
+  clearExtend: () => set({ extendTarget: null }),
+  close: () => set({ projectId: null, pendingDrop: null }),
+}));
diff --git a/src/stores/remoteStatus.ts b/src/stores/remoteStatus.ts
index 375f21b..4685c33 100644
--- a/src/stores/remoteStatus.ts
+++ b/src/stores/remoteStatus.ts
@@ -9,35 +9,124 @@ import { create } from "zustand";
  */
 export type ConnState = "off" | "connecting" | "connected" | "error";
 
+export interface HostConnState {
+  ssh: ConnState;
+  vpn: ConnState;
+}
+
+const OFF: HostConnState = { ssh: "off", vpn: "off" };
+
+/** The backend id of a project's PRIMARY remote (`docs/multi_host_remote_plan.md`).
+ *  Kept in step with `services::remote::PRIMARY_HOST`. */
+export const PRIMARY_HOST = "primary";
+
 interface RemoteStatusStore {
-  /** Per-project status, keyed by project id. Keyed (not a single active slot)
-   *  so an in-flight connect for a project the user just switched away from can
-   *  never flip the lamp of the now-active project — the header reads only the
-   *  active id's entry. */
-  byProject: Record<string, { ssh: ConnState; vpn: ConnState }>;
-  setSsh: (projectId: string, state: ConnState) => void;
-  setVpn: (projectId: string, state: ConnState) => void;
-  /** Forget a project's status entirely (on deactivation / switch-away). */
+  /** PRIMARY-host status, keyed by project id. Kept as the flat, primary-only map
+   *  it has always been so the ~300 file/git/sync readers that only ever care about
+   *  the primary (the file UI stays Local | Remote(primary), plan §6) work
+   *  unchanged. Keyed (not a single active slot) so an in-flight connect for a
+   *  project the user just switched away from can never flip the now-active
+   *  project's lamp — the header reads only the active id's entry. */
+  byProject: Record<string, HostConnState>;
+  /** Extra WORKER-host status (`docs/multi_host_remote_plan.md`), keyed
+   *  `[projectId][hostId]`. The primary is NOT stored here — it lives in
+   *  `byProject`; [`sshOf`]/[`vpnOf`] route `"primary"` to it. */
+  byHost: Record<string, Record<string, HostConnState>>;
+  /** Set a host's SSH lamp. `hostId` defaults to the primary. */
+  setSsh: (projectId: string, state: ConnState, hostId?: string) => void;
+  /** Set a host's VPN lamp. `hostId` defaults to the primary. */
+  setVpn: (projectId: string, state: ConnState, hostId?: string) => void;
+  /** Forget a project's status entirely — primary AND every worker host (on
+   *  deactivation / switch-away). */
   clear: (projectId: string) => void;
+  /** Forget one worker host's status (host removed / disconnected). */
+  clearHost: (projectId: string, hostId: string) => void;
 }
 
 export const useRemoteStatusStore = create<RemoteStatusStore>((set) => ({
   byProject: {},
-  setSsh: (projectId, state) =>
-    set((s) => {
-      const prev = s.byProject[projectId] ?? { ssh: "off" as ConnState, vpn: "off" as ConnState };
-      return { byProject: { ...s.byProject, [projectId]: { ...prev, ssh: state } } };
-    }),
-  setVpn: (projectId, state) =>
+  byHost: {},
+  setSsh: (projectId, state, hostId = PRIMARY_HOST) =>
+    set((s) => setHostField(s, projectId, hostId, "ssh", state)),
+  setVpn: (projectId, state, hostId = PRIMARY_HOST) =>
+    set((s) => setHostField(s, projectId, hostId, "vpn", state)),
+  clear: (projectId) =>
     set((s) => {
-      const prev = s.byProject[projectId] ?? { ssh: "off" as ConnState, vpn: "off" as ConnState };
-      return { byProject: { ...s.byProject, [projectId]: { ...prev, vpn: state } } };
+      const inProject = projectId in s.byProject;
+      const inHost = projectId in s.byHost;
+      if (!inProject && !inHost) return {};
+      const byProject = { ...s.byProject };
+      delete byProject[projectId];
+      const byHost = { ...s.byHost };
+      delete byHost[projectId];
+      return { byProject, byHost };
     }),
-  clear: (projectId) =>
+  clearHost: (projectId, hostId) =>
     set((s) => {
-      if (!(projectId in s.byProject)) return {};
-      const next = { ...s.byProject };
-      delete next[projectId];
-      return { byProject: next };
+      if (hostId === PRIMARY_HOST) {
+        if (!(projectId in s.byProject)) return {};
+        const byProject = { ...s.byProject };
+        delete byProject[projectId];
+        return { byProject };
+      }
+      const hosts = s.byHost[projectId];
+      if (!hosts || !(hostId in hosts)) return {};
+      const nextHosts = { ...hosts };
+      delete nextHosts[hostId];
+      const byHost = { ...s.byHost };
+      if (Object.keys(nextHosts).length === 0) delete byHost[projectId];
+      else byHost[projectId] = nextHosts;
+      return { byHost };
     }),
 }));
+
+/** Immutably set one field of one host's lamp, routing the primary to `byProject`
+ *  and any worker to `byHost[projectId][hostId]`. */
+function setHostField(
+  s: RemoteStatusStore,
+  projectId: string,
+  hostId: string,
+  field: keyof HostConnState,
+  value: ConnState,
+): Partial<RemoteStatusStore> {
+  if (hostId === PRIMARY_HOST) {
+    const prev = s.byProject[projectId] ?? OFF;
+    return { byProject: { ...s.byProject, [projectId]: { ...prev, [field]: value } } };
+  }
+  const hosts = s.byHost[projectId] ?? {};
+  const prev = hosts[hostId] ?? OFF;
+  return {
+    byHost: {
+      ...s.byHost,
+      [projectId]: { ...hosts, [hostId]: { ...prev, [field]: value } },
+    },
+  };
+}
+
+/** Read a host's SSH lamp from a store snapshot (`"primary"` → `byProject`). */
+export function sshOf(
+  s: Pick<RemoteStatusStore, "byProject" | "byHost">,
+  projectId: string,
+  hostId: string = PRIMARY_HOST,
+): ConnState {
+  return hostStateOf(s, projectId, hostId).ssh;
+}
+
+/** Read a host's VPN lamp from a store snapshot (`"primary"` → `byProject`). */
+export function vpnOf(
+  s: Pick<RemoteStatusStore, "byProject" | "byHost">,
+  projectId: string,
+  hostId: string = PRIMARY_HOST,
+): ConnState {
+  return hostStateOf(s, projectId, hostId).vpn;
+}
+
+/** A host's full `{ssh, vpn}` from a store snapshot, or `{off, off}` when absent. */
+export function hostStateOf(
+  s: Pick<RemoteStatusStore, "byProject" | "byHost">,
+  projectId: string,
+  hostId: string = PRIMARY_HOST,
+): HostConnState {
+  if (hostId === PRIMARY_HOST) return s.byProject[projectId] ?? OFF;
+  return s.byHost[projectId]?.[hostId] ?? OFF;
+}
diff --git a/src/stores/remoteUsage.ts b/src/stores/remoteUsage.ts
new file mode 100644
index 0000000..8ec1821
--- /dev/null
+++ b/src/stores/remoteUsage.ts
@@ -0,0 +1,131 @@
+import { create } from "zustand";
+import { invoke } from "@tauri-apps/api/core";
+
+/**
+ * Host usage reports — who's logged in, CPU/load, memory, GPU, top processes
+ * (see `services::remote_usage` for the probe).
+ *
+ * **On demand only.** The dialog is opened by the header Machines menu's
+ * "Remote host usage…" button and by nothing else — a connect no longer pops it
+ * up. `remote_connect` still fires its probe fire-and-forget and emits a
+ * `remote-usage-report` event per project host; this store keeps those reports
+ * so the dialog has something to show the instant it opens, but receiving one
+ * never puts it on screen.
+ *
+ * **Keyed by host, not by project.** The dialog lives in the *Machines* menu, so
+ * its subject is the machine list: every global machine, in that list's order,
+ * plus whichever of the active project's own hosts aren't already in it. A
+ * project id can't key that, hence [`UsageTarget`] and its `key` — and hence two
+ * probe commands behind one `recheck`: a global machine authenticates ad-hoc
+ * (`global_machine_usage_check`), a project host rides its pooled ControlMaster
+ * (`remote_usage_check`). Both run the same script through the same parser, so
+ * the two kinds of section read identically.
+ */
+
+export interface UserSession {
+  user: string;
+  tty: string;
+  detail: string;
+}
+
+export interface ProcInfo {
+  user: string;
+  pid: string;
+  cpuPct: number;
+  memPct: number;
+  command: string;
+}
+
+/** One NVIDIA GPU's utilization + memory (NVIDIA-only — see backend doc). */
+export interface GpuUsage {
+  name: string;
+  utilPct: number;
+  memUsedMb: number;
+  memTotalMb: number;
+}
+
+/** Mirrors `services::remote_usage::RemoteUsageReport` (camelCase). */
+export interface RemoteUsageReport {
+  users: UserSession[];
+  /** Instantaneous CPU usage (0-100), measured via /proc/stat, not load average. */
+  cpuPct: number;
+  load1: number;
+  load5: number;
+  load15: number;
+  cpuCount: number;
+  memTotalMb: number;
+  memUsedMb: number;
+  /** NVIDIA GPUs only; empty on a GPU-less/AMD/Intel-only host. */
+  gpus: GpuUsage[];
+  topProcs: ProcInfo[];
+  busy: boolean;
+  reasons: string[];
+}
+
+/** One host the dialog shows a section for. `kind` decides which probe command
+ *  reads it; `key` is how its report is stored and must be stable across
+ *  reopens (so a cached report survives). */
+export type UsageTarget =
+  | {
+      kind: "machine";
+      key: string;
+      label: string;
+      user?: string;
+      host: string;
+      port?: number;
+    }
+  | { kind: "projectHost"; key: string; label: string; projectId: string; hostId: string };
+
+/** Report key for a global machine (`stores/globalMachines` id). */
+export const machineKey = (id: string) => `gm:${id}`;
+/** Report key for one of a project's own hosts (`"primary"` or a worker id). */
+export const projectHostKey = (projectId: string, hostId: string) =>
+  `ph:${projectId}:${hostId}`;
+
+interface RemoteUsageStore {
+  /** Latest report per [`UsageTarget`] key. */
+  reports: Record<string, RemoteUsageReport>;
+  /** Whether the usage dialog is on screen. The ONLY thing that sets it is the
+   *  Machines menu's "Remote host usage…" button — an arriving report never
+   *  does, which is what makes the dialog on-demand rather than a connect-time
+   *  popup. */
+  isOpen: boolean;
+  setReport: (key: string, report: RemoteUsageReport) => void;
+  open: () => void;
+  close: () => void;
+  /** On-demand read of one host, awaited directly rather than round-tripped
+   *  through the connect-time event. Best-effort: a failed probe (host down,
+   *  credential gone) leaves whatever was cached, so a machine that can't be
+   *  reached simply shows no reading instead of tearing down the dialog. */
+  recheck: (target: UsageTarget) => Promise<void>;
+}
+
+export const useRemoteUsageStore = create<RemoteUsageStore>((set) => ({
+  reports: {},
+  isOpen: false,
+
+  setReport: (key, report) => set((s) => ({ reports: { ...s.reports, [key]: report } })),
+
+  open: () => set({ isOpen: true }),
+  close: () => set({ isOpen: false }),
+
+  recheck: async (target) => {
+    try {
+      const report =
+        target.kind === "machine"
+          ? await invoke<RemoteUsageReport>("global_machine_usage_check", {
+              user: target.user,
+              host: target.host,
+              port: target.port,
+            })
+          : await invoke<RemoteUsageReport>("remote_usage_check", {
+              projectId: target.projectId,
+              hostId: target.hostId,
+            });
+      set((s) => ({ reports: { ...s.reports, [target.key]: report } }));
+    } catch {
+      // Best-effort, like the connect-time probe — a failed recheck just
+      // leaves the previous report (or none) in place.
+    }
+  },
+}));
diff --git a/src/stores/runHostPref.ts b/src/stores/runHostPref.ts
new file mode 100644
index 0000000..7f1aa83
--- /dev/null
+++ b/src/stores/runHostPref.ts
@@ -0,0 +1,38 @@
+import { create } from "zustand";
+import type { LocalityHost, TabLocation } from "./tabs";
+
+/**
+ * Whether the per-project run-host picker applies at all. It is meant for the
+ * simple case (a lone primary, or shared-fs workers that are just one shared
+ * tree). The moment a worker keeps its OWN **synced code copy** the project is
+ * genuinely multi-machine, and the run target is chosen **per tab** (the locality
+ * badge) — so the picker is hidden and a Run/Debug falls back to the tab's
+ * locality (the primary by default) rather than a project-wide preference.
+ * Shared-fs workers (`shared_fs`) don't trip this — they leave the picker in place.
+ */
+export function runHostPickerApplies(computeHosts?: LocalityHost[]): boolean {
+  return !(computeHosts ?? []).some((h) => !h.shared_fs && h.sync_code !== false);
+}
+
+/**
+ * Ephemeral, non-persisted "which machine should scripts and shells launched
+ * from this project's file view run on" preference, keyed by project id
+ * (`docs/multi_host_remote_plan.md`). Set from the file viewer's run-host picker
+ * (`RunHostPicker`), read at launch time by `lib/pythonRun` so a Run/Debug lands
+ * on the chosen host (primary or a worker) instead of the shell default.
+ *
+ * Unset ⇒ the tab's own kind default (a shell defaults to the primary on a remote
+ * project) — so a project that never touches the picker behaves exactly as before.
+ * A value is a `TabLocation` (`"local" | "remote" | "host:<id>"`), the same axis a
+ * tab's locality badge sets, so the run tab carries it verbatim.
+ */
+interface RunHostPrefStore {
+  byProject: Record<string, TabLocation>;
+  set: (projectId: string, location: TabLocation) => void;
+}
+
+export const useRunHostPrefStore = create<RunHostPrefStore>((set) => ({
+  byProject: {},
+  set: (projectId, location) =>
+    set((s) => ({ byProject: { ...s.byProject, [projectId]: location } })),
+}));
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index 6abda37..3b76d57 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -1,32 +1,78 @@
 import { invoke } from "@tauri-apps/api/core";
 import { getCurrentWebview } from "@tauri-apps/api/webview";
+import { emit } from "@tauri-apps/api/event";
 import { create } from "zustand";
 import type { Settings, Theme, WindowState } from "../types";
+import { applyLanguage, type Language } from "../lib/i18n";
 
-function applyTheme(scheme: string) {
+/** Each Tauri window is its own JS runtime with its own copy of this store, so
+ *  a theme change made in one (normally the main window's Settings dialog)
+ *  only calls `applyTheme` on that window's own `document` — a detached/popped-
+ *  out subwindow (`DetachedApp`) keeps whatever theme it loaded at open time.
+ *  Broadcast the new scheme so every live window can re-apply it; see the
+ *  listener in `DetachedApp`. */
+export const THEME_CHANGED_EVENT = "eldrun:theme-changed";
+
+/** Like THEME_CHANGED_EVENT, but for the UI language: broadcast so every live
+ *  window (including detached popouts, which each hold their own i18n store)
+ *  re-applies the new language. See the listener in `DetachedApp`. */
+export const LANGUAGE_CHANGED_EVENT = "eldrun:language-changed";
+
+export function applyTheme(scheme: string) {
   document.documentElement.setAttribute("data-theme", scheme);
+  // Cache for index.html's pre-paint inline script, so the next launch
+  // paints the right theme immediately instead of flashing the CSS
+  // :root default until settings arrive over the async invoke.
+  try {
+    localStorage.setItem("eldrun-theme", scheme);
+  } catch {
+    // localStorage unavailable — worst case is the old one-frame flash.
+  }
 }
 
-/** Global UI zoom (4K-monitor scaling). `1` is 100% (the current/default look);
- *  higher enlarges the whole interface, lower shrinks it. Applied via the
- *  webview's native zoom so every layer scales — including `position: fixed` /
- *  portaled overlays (menus, dropdowns, hover popovers) that a CSS `zoom` misses
- *  on WebKitGTK. */
+/** UI zoom (4K-monitor scaling). `1` is 100% (the current/default look); higher
+ *  enlarges the whole interface, lower shrinks it. Applied via the webview's
+ *  native zoom so every layer scales — including `position: fixed` / portaled
+ *  overlays (menus, dropdowns, hover popovers) that a CSS `zoom` misses on
+ *  WebKitGTK.
+ *
+ *  Zoom is **per window**, not global: each OS window (the main window and every
+ *  detached popout, #42) is its own webview and holds its own zoom. `ui_zoom`
+ *  persists the MAIN window's value; a popout persists its own alongside its
+ *  bounds (see `DetachedGroup.zoom`). So bumping one window's zoom never rescales
+ *  another, and each window restores at the zoom it was left at. */
 export const MIN_UI_ZOOM = 0.5;
 export const MAX_UI_ZOOM = 3;
 
+/** The zoom ladder shared by the Settings dropdown and the Ctrl +/- keyboard
+ *  steps, so both surfaces move through the same stops. */
+export const ZOOM_STEPS = [0.5, 0.75, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2, 2.5, 3];
+
 export function clampZoom(z: number | undefined | null): number {
   if (typeof z !== "number" || !Number.isFinite(z)) return 1;
   return Math.min(MAX_UI_ZOOM, Math.max(MIN_UI_ZOOM, z));
 }
 
-function applyZoom(zoom: number | undefined) {
+/** Next zoom stop up (`dir > 0`) or down (`dir < 0`) from `current` on the
+ *  `ZOOM_STEPS` ladder, for the Ctrl +/- keyboard shortcuts. Clamped to the ends. */
+export function stepZoom(current: number | undefined, dir: 1 | -1): number {
+  const cur = clampZoom(current);
+  if (dir > 0) {
+    const up = ZOOM_STEPS.find((z) => z > cur + 1e-6);
+    return up ?? MAX_UI_ZOOM;
+  }
+  const down = [...ZOOM_STEPS].reverse().find((z) => z < cur - 1e-6);
+  return down ?? MIN_UI_ZOOM;
+}
+
+/** Apply a zoom to THIS window's webview (native WebKitGTK `zoom_level` /
+ *  WebView2 ZoomFactor). Exported so a detached popout can drive its OWN zoom
+ *  (the popout skips the global apply in `load` and owns its value; see
+ *  DetachedApp). CSS `zoom` on the root is deliberately not used: it does not
+ *  scale `position: fixed` / portaled overlays in WebKitGTK, so those stayed at
+ *  100%. Native zoom scales the entire webview uniformly, overlays included. */
+export function applyZoom(zoom: number | undefined) {
   const z = clampZoom(zoom);
-  // Use the webview's native zoom (WebKitGTK `zoom_level` / WebView2 ZoomFactor)
-  // rather than a CSS `zoom` on the root: CSS zoom does not scale
-  // `position: fixed` / portaled overlays (menus, dropdowns, hover popovers) in
-  // WebKitGTK, so those stayed at 100%. Native zoom scales the entire webview
-  // uniformly, overlays included.
   void getCurrentWebview()
     .setZoom(z)
     .catch((err) => {
@@ -37,20 +83,31 @@ function applyZoom(zoom: number | undefined) {
 interface SettingsStore {
   settings: Settings | null;
   loaded: boolean;
-  load: () => Promise<void>;
+  /** Load settings and apply theme. `skipZoom` suppresses applying the persisted
+   *  `ui_zoom` to this window's webview — used by a detached popout, which owns
+   *  its OWN zoom (restored from its seed) rather than the main window's. */
+  load: (opts?: { skipZoom?: boolean }) => Promise<void>;
   setTheme: (theme: Theme) => Promise<void>;
+  setLanguage: (lang: Language) => Promise<void>;
   updateSettings: (patch: Partial<Settings>) => Promise<void>;
   saveWindowState: (ws: WindowState) => Promise<void>;
+  /** Set (or clear, with "") the Python Run/Debug args for one file, keyed by its
+   *  absolute path. Kept per file so every viewer of the same script shares them;
+   *  persisted in settings.json so they survive a restart (see Settings.python_run_args). */
+  setPythonRunArgs: (path: string, args: string) => Promise<void>;
 }
 
 export const useSettingsStore = create<SettingsStore>((set, get) => ({
   settings: null,
   loaded: false,
 
-  load: async () => {
+  load: async (opts) => {
     const settings = await invoke<Settings>("get_settings");
-    applyTheme(settings.color_scheme ?? "light_lavender");
-    applyZoom(settings.ui_zoom);
+    applyTheme(settings.color_scheme ?? "fancy_dark");
+    applyLanguage(settings.language);
+    // `ui_zoom` is the MAIN window's own zoom. A popout skips it and applies its
+    // own persisted zoom from its seed instead (zoom is per window, not global).
+    if (!opts?.skipZoom) applyZoom(settings.ui_zoom);
     set({ settings, loaded: true });
   },
 
@@ -59,6 +116,16 @@ export const useSettingsStore = create<SettingsStore>((set, get) => ({
     const updated = { ...current, color_scheme: theme };
     await invoke<void>("save_settings", { settings: updated });
     applyTheme(theme);
+    void emit(THEME_CHANGED_EVENT, theme);
+    set({ settings: updated as Settings });
+  },
+
+  setLanguage: async (lang) => {
+    const current = get().settings ?? {};
+    const updated = { ...current, language: lang };
+    await invoke<void>("save_settings", { settings: updated });
+    applyLanguage(lang);
+    void emit(LANGUAGE_CHANGED_EVENT, lang);
     set({ settings: updated as Settings });
   },
 
@@ -68,6 +135,9 @@ export const useSettingsStore = create<SettingsStore>((set, get) => ({
     await invoke<void>("save_settings", { settings: updated });
     if (typeof updated.color_scheme === "string") {
       applyTheme(updated.color_scheme);
+      if ("color_scheme" in patch) {
+        void emit(THEME_CHANGED_EVENT, updated.color_scheme);
+      }
     }
     if ("ui_zoom" in patch) {
       applyZoom(updated.ui_zoom);
@@ -96,4 +166,19 @@ export const useSettingsStore = create<SettingsStore>((set, get) => ({
       console.warn("failed to save window state", err);
     }
   },
+
+  setPythonRunArgs: async (path, args) => {
+    const current = get().settings ?? {};
+    const map = { ...(current.python_run_args ?? {}) };
+    const trimmed = args.trim();
+    // "" clears the entry outright rather than storing an empty string, so the map
+    // holds only files that actually have args (and reading back a cleared file
+    // yields undefined → "", identical to never having set it).
+    if (trimmed) map[path] = trimmed;
+    else delete map[path];
+    // No-op if nothing changed, so re-committing identical args (e.g. the popover's
+    // outside-click after a run) doesn't rewrite the whole settings file.
+    if ((current.python_run_args ?? {})[path] === map[path]) return;
+    await get().updateSettings({ python_run_args: map });
+  },
 }));
diff --git a/src/stores/sync.ts b/src/stores/sync.ts
index a9ebf01..0bae9c6 100644
--- a/src/stores/sync.ts
+++ b/src/stores/sync.ts
@@ -103,6 +103,15 @@ interface SyncStore {
     relPath: string,
     force?: boolean,
   ) => Promise<{ pushed: number; conflicts: string[] }>;
+  /** Resolve a batch of diverged files by taking one side for every path at once:
+   *  "host" pulls each (host overwrites the mirror), "local" force-pushes each
+   *  (the mirror overwrites the host). Refreshes the status once at the end rather
+   *  than per file. Backs the orange view's "…for all" buttons. */
+  resolveAll: (
+    projectId: string,
+    relPaths: string[],
+    side: "host" | "local",
+  ) => Promise<void>;
   /** Toggle the selected flag for paths without transferring (deselect = stop). */
   markSelected: (
     projectId: string,
@@ -201,6 +210,25 @@ export const useSyncStore = create<SyncStore>((set, get) => ({
     return result;
   },
 
+  resolveAll: async (projectId, relPaths, side) => {
+    // Iterate per path (each side has its own single-file command) but refresh
+    // the cached status only once at the end — refreshing per file would re-stat
+    // the whole selection N times. A single failed file is logged and skipped so
+    // one bad path doesn't abort the rest of the batch.
+    for (const rel of relPaths) {
+      try {
+        if (side === "host") {
+          await invoke("sync_pull", { projectId, relPath: rel });
+        } else {
+          await invoke("sync_push", { projectId, relPath: rel, force: true });
+        }
+      } catch (e) {
+        console.error(`resolveAll: ${side} failed for ${rel}`, e);
+      }
+    }
+    await get().refreshStatus(projectId);
+  },
+
   markSelected: async (projectId, relPaths, selected, isDir) => {
     await invoke("sync_mark_selected", { projectId, relPaths, selected, isDir });
     await get().refreshStatus(projectId);
diff --git a/src/stores/tabs.ts b/src/stores/tabs.ts
index db7633b..7f1fcdb 100644
--- a/src/stores/tabs.ts
+++ b/src/stores/tabs.ts
@@ -8,12 +8,25 @@ import { forgetPty } from "../lib/promptCount";
 import { METRIC, agentMetricLeaf, sub } from "../lib/usageMetrics";
 import { useLinkRoutingStore } from "./linkRouting";
 import { bumpUsage } from "./usage";
+import { newTmuxSessionName } from "../lib/tmuxSession";
+
+/** A shell tab gets a stable persisted tmux session name at creation (TODO #85),
+ *  so a persistent remote run reattaches after a relaunch instead of forking a
+ *  second session. Non-shell tabs, and shell tabs that already carry one (or an
+ *  explicit attach), are left untouched. */
+function withTmuxSession(tab: Omit<TabEntry, "key">): Omit<TabEntry, "key"> {
+  if (tab.kind === "shell" && !tab.tmuxSession && !tab.tmuxAttach) {
+    return { ...tab, tmuxSession: newTmuxSessionName() };
+  }
+  return tab;
+}
 
 export type TabKind =
   | "agent"
   | "local_agent"
   | "shell"
   | "files"
+  | "projectfiles"
   | "embed"
   | "projects3d"
   | "network"
@@ -29,10 +42,70 @@ export type TabKind =
  * is inert (everything is local — the backend gates the ssh-wrap on remoteness).
  * Plan: docs/ssh_sync_plan.md.
  */
-export type TabLocation = "local" | "remote";
+export type TabLocation = "local" | "remote" | `host:${string}`;
+
+/** The backend host id a tab location runs on: `"primary"` for the primary remote
+ *  (`"remote"`), the worker id for a `host:<id>` location, or `null` for `"local"`
+ *  (`docs/multi_host_remote_plan.md` §4.1). Pass to PTY spawn / lamp reads. */
+export function remoteHostIdOf(loc: TabLocation | undefined): string | null {
+  if (loc === "remote") return "primary";
+  if (loc && loc.startsWith("host:")) return loc.slice("host:".length);
+  return null; // "local" or unset
+}
+
+/** Whether a tab location runs on a remote host (primary or a worker) rather than
+ *  the local mirror. */
+export function isRemoteLocation(loc: TabLocation | undefined): boolean {
+  return remoteHostIdOf(loc) !== null;
+}
+
+/** The minimal shape of a worker machine (`ComputeHost`) the locality UI reads —
+ *  structural so `tabs.ts` need not import the full project types. */
+export interface LocalityHost {
+  id: string;
+  label?: string;
+  host: string;
+  sync_code?: boolean;
+  shared_fs?: boolean;
+}
+
+/** Human-readable name of the machine a tab location runs on — the ONE place the
+ *  tab badge, its locality menu, and the hover card agree on wording
+ *  (`docs/multi_host_remote_plan.md`). `"local"` → the mirror; `"remote"` → the
+ *  primary host (named when known); `host:<id>` → the worker's label/host/id. */
+export function localityHostLabel(
+  loc: TabLocation | undefined,
+  opts: { primaryHost?: string; computeHosts?: LocalityHost[] } = {},
+): string {
+  const hostId = remoteHostIdOf(loc);
+  if (hostId === null) return "Local (mirror)";
+  if (hostId === "primary") {
+    return opts.primaryHost ? `Primary (${opts.primaryHost})` : "Primary";
+  }
+  const w = opts.computeHosts?.find((h) => h.id === hostId);
+  return w?.label || w?.host || hostId;
+}
+
+/** Whether a worker machine can actually RUN a shell/agent tab: it must hold the
+ *  code — either it shares the primary's filesystem (`shared_fs`) or it keeps a
+ *  synced copy (`sync_code`, default on). A worker with neither has no tree to run
+ *  in; sync always stays with the primary, so such a worker is offered disabled.
+ *  The primary (`"primary"`/`undefined`) and the local mirror are always runnable. */
+export function workerRunnable(h: LocalityHost): boolean {
+  return !!h.shared_fs || h.sync_code !== false;
+}
 
 export const FILES_TAB_CMD = "__eldrun_files__";
 
+/**
+ * Sentinel `cmd` for the "Files (Project)" tab: the SAME file view the right
+ * panel shows (`ProjectFilesPane` → `FileTree`), hosted in a tab — git markers,
+ * drag-to-open/move, OS import/export, the remote sync overlay. Distinct from
+ * `FILES_TAB_CMD`, which is the separate two-pane `FileBrowser` explorer; both
+ * are offered, they are different tools.
+ */
+export const PROJECT_FILES_TAB_CMD = "__eldrun_project_files__";
+
 /**
  * Sentinel `cmd` for the 3D project-blob tab (root scope only): a navigable 3D
  * cloud of every project (active + inactive) and box. Carries no PTY — like the
@@ -99,6 +172,47 @@ export interface ViewerState {
   autocomplete?: boolean;
   autocompleteMode?: AutocompleteMode;
   grammarCheck?: boolean;
+  // Debug breakpoints (#py), as 1-based line numbers into the file. Persisted per
+  // tab like the reader's scroll position, so the dots survive closing the file
+  // and an Eldrun restart. Remapped as the draft is edited (see useBreakpoints);
+  // what is stored is always resolved against the file as last seen.
+  breakpoints?: number[];
+  // Collapsed nodes of the YAML tree (#yaml), as node ids (document + path). Like
+  // the scroll position, folding a big config stays folded across a reopen and a
+  // restart. Ids are re-derived from the file on every parse, so an id that no
+  // longer resolves is simply inert.
+  yamlCollapsed?: string[];
+  // The YAML TREE's scroll position (#yaml). Kept apart from `scrollTop` (the
+  // Source editor's) because Tree and Source are two views of one file with
+  // unrelated pixel heights — one scroll offset can't serve both — so switching
+  // Tree↔Source restores each side where it was.
+  yamlScrollTop?: number;
+  // Collapsed cards of the YAML card grid (#yaml-grid), as node ids — the card
+  // view's twin of `yamlCollapsed`, kept apart so folding a card and folding a tree
+  // row don't clobber each other. Ids are re-derived on every parse, so a stale one
+  // is inert.
+  gridCollapsed?: string[];
+  // The focused ("main") card of the YAML card grid (#yaml-grid), as its node id,
+  // for the drill navigation: the grid shows that card's level (its siblings, it
+  // highlighted) and its children below. Absent/unmatched = the top overview.
+  // Re-derived on every parse, so a stale id is inert (falls back to overview).
+  gridFocus?: string;
+  // The table viewer's column separator (#40), as the literal character. Absent
+  // means "auto" — sniffed from the content on every open. It is persisted only
+  // when the reader *overrides* the guess, because that is the case the sniffer
+  // got wrong: re-sniffing would just talk them back out of it on the next open.
+  delimiter?: string;
+  // The table viewer's hidden columns (#40), as indices into the parsed row. They
+  // are only meaningful for the separator that produced them — a different one
+  // cuts the row into different columns — so the viewer drops them when the
+  // delimiter changes rather than hiding whatever now sits at those indices.
+  hiddenColumns?: number[];
+  // The table viewer's drag-resized column widths (#40), keyed by parsed-column
+  // index → total pixel width (padding included). Absent for a column means it
+  // keeps its measured `ch` width. Like `hiddenColumns` the indices only mean
+  // anything under the separator that produced them, so a delimiter change drops
+  // the overrides rather than re-applying them to whatever the new cut lands on.
+  columnWidths?: Record<number, number>;
 }
 
 // Detached windows render their tabs from a Tauri-event SEED into local React
@@ -150,6 +264,17 @@ export interface TabEntry {
   // `--session-id <uuid>`), the UUID Eldrun minted and launched the agent with.
   // Surfaced on tab hover and intended to later drive session resume.
   sessionId?: string;
+  // For a custom agent (see CustomAgent) whose spec carries a "continue last
+  // session" flag: the resume args this tab respawns with after a restart. Its
+  // presence is what makes such a tab restart-resumable without the cmd being in
+  // the static RESUMABLE_AGENTS map (see isResumableAgentTab / loadFromLayout).
+  // Persisted, since args are rebuilt from scratch on restore.
+  resumeArgs?: string[];
+  // Absolute path of the script this terminal tab was launched to run (Python
+  // Run/Debug, or a foreground shell-script run). Lets the activity store pulse
+  // the file's run button while the tab is producing output. Busy-gated on read,
+  // so a restored non-busy run tab never falsely lights up.
+  runFile?: string;
   // For "embed" tabs (a file dragged from the FileTree onto a tab bar): the
   // absolute path of the embedded file and the resolved executable that opens
   // it. Phase 1 opens the file externally; Phase 2 will reparent the app's
@@ -173,13 +298,31 @@ export interface TabEntry {
   location?: TabLocation;
   // The tab's agent authority mode — the planner/doer split ("plan" proposes,
   // "auto" auto-accepts edits). Only meaningful for agents in the capability
-  // table (currently Claude; see components/tabs/agentModes.ts) and only
+  // table (Claude and Gemini; see components/tabs/agentModes.ts) and only
   // surfaced when the experimental `agent_mode_toggle` setting is on. Absent →
   // no mode flag is passed and the agent runs in its own default (ask each
   // time), which is the behaviour of every tab predating this feature. The mode
-  // rides in `args` as `--permission-mode <x>`; this field is the durable record
-  // of it, since `args` are rebuilt from scratch on restore (loadFromLayout).
+  // rides in `args` as the agent's mode flag (`--permission-mode`/`--approval-mode
+  // <x>`); this field is the durable record of it, since `args` are rebuilt from
+  // scratch on restore (loadFromLayout).
   agentMode?: AgentMode;
+  // For "projectfiles" tabs: the project-relative folder the tree is browsed
+  // into. Persisted, so "Open in new tab" on a folder (and the tab's own
+  // navigation) survive a restart instead of coming back at the project root.
+  folder?: string;
+  // Persistent remote sessions (TODO #85): the STABLE tmux session name this shell
+  // tab spawns-or-attaches on the host. Minted once at creation and persisted,
+  // because the tab's PTY id (scope:key) is regenerated on restore — so the name
+  // must live on the tab to survive a relaunch and let the tab REATTACH rather than
+  // start a second session. Passed to the backend as `tmux_session` when the tab
+  // actually runs persistently (a remote shell tab of a persist-enabled project);
+  // inert otherwise. See `lib/tmuxSession.ts`, `shouldPersistTab`.
+  tmuxSession?: string;
+  // When set, this shell tab **attaches** to an existing named tmux session on the
+  // host (opened from the Sessions view onto a running, possibly hand-started
+  // session) instead of spawning a fresh one. Persisted so it reattaches across a
+  // restart. Passed as `tmux_attach`, which takes precedence over `tmuxSession`.
+  tmuxAttach?: string;
 }
 
 export type SplitDir = "row" | "column";
@@ -199,6 +342,20 @@ export interface GroupNode {
   id: string;
   tabKeys: string[]; // order shown in this subwindow's tab bar
   activeKey: string | null; // active tab within this group
+  // Per-subwindow right file viewer: when true this group renders a docked
+  // file-viewer column (the shared ProjectFilesView, hosted by
+  // SubwindowFilesSidebar) on its right edge — in the main window and in a
+  // detached popout alike. Persisted with the layout tree so it survives a
+  // restart, and carried through detach/attach so a popped-out subwindow keeps
+  // its viewer.
+  filesOpen?: boolean;
+  // The sidebar column's width in px (unset → the component default).
+  filesWidth?: number;
+  // The browsed folder (project-relative) the docked viewer last showed, so the
+  // subwindow reopens where it was left. Lives on the node — like the open flag
+  // and width — so it persists with the layout, travels with a detach, and is
+  // freed when the group (subwindow) is dropped.
+  filesFolder?: string;
 }
 
 export type LayoutNode = SplitNode | GroupNode;
@@ -235,6 +392,10 @@ export interface DetachedGroup {
   // Last-known OS geometry of the popout, streamed back by the window. Persisted
   // (via the saved tree) so the popout reopens at the same place/size on restart.
   bounds?: WindowBounds;
+  // The popout's OWN UI zoom (per-window, not the global/main-window `ui_zoom`),
+  // streamed back over DETACHED_ZOOM. Persisted (via the saved tree) and shipped
+  // in the popout's seed so it reopens at the zoom it was left at. Undefined = 100%.
+  zoom?: number;
 }
 
 /**
@@ -264,6 +425,9 @@ export type DropEdge = "left" | "right" | "top" | "bottom" | "center";
 export type DetachedEditPayload =
   | { kind: "activate"; key: string }
   | { kind: "rename"; key: string; label: string }
+  // Multi-host: change where a locatable tab runs; applied to the payload here so
+  // the main window's flat pane layer (which owns the popout's PTY) respawns it.
+  | { kind: "setLocation"; key: string; location: TabLocation }
   | { kind: "close"; key: string }
   | { kind: "reorder"; tabKeys: string[] }
   // Multi-pane popouts: split `key` out into a new pane at `edge` of
@@ -274,7 +438,11 @@ export type DetachedEditPayload =
   | { kind: "resize"; splitId: string; dividerIndex: number; fraction: number }
   // Multi-pane popouts: move `key` into `targetGroupId` (at `index`, else append),
   // merging it across the popout's groups (collapses an emptied source pane).
-  | { kind: "move"; key: string; targetGroupId: string; index?: number };
+  | { kind: "move"; key: string; targetGroupId: string; index?: number }
+  // Toggle/resize a popout group's docked file-viewer column (the per-subwindow
+  // right file viewer), or record the folder it browsed to. Applied to the group
+  // node inside the popout's subtree.
+  | { kind: "files"; groupId: string; open?: boolean; width?: number; folder?: string };
 
 /** Flat tab shape as persisted in project.json's `tab_layout`. */
 export interface SavedTabEntry {
@@ -300,6 +468,15 @@ export interface SavedTabEntry {
   // Persisted planner/doer mode (see TabEntry.agentMode). Re-applied to the
   // launch args on restore, so a tab comes back in the mode it was left in.
   agentMode?: AgentMode;
+  // Persisted browsed folder of a "projectfiles" tab (see TabEntry.folder).
+  folder?: string;
+  // Persisted resume args of a restart-resumable custom agent (see
+  // TabEntry.resumeArgs). Re-applied as the launch args on restore.
+  resumeArgs?: string[];
+  // Persisted stable tmux session name for a shell tab (see TabEntry.tmuxSession).
+  tmuxSession?: string;
+  // Persisted tmux session this shell tab attaches to (see TabEntry.tmuxAttach).
+  tmuxAttach?: string;
 }
 
 /** Serialized layout tree as persisted in project.json's `tab_groups`. */
@@ -314,6 +491,8 @@ export type SavedLayoutTree =
       // floating popout (see withDetachedDocked / deserializeTree / detachGroup).
       detached?: boolean;
       bounds?: WindowBounds;
+      // A detached popout's own per-window zoom (see DetachedGroup.zoom).
+      zoom?: number;
       // When true, this split subtree was HIDDEN (parked out of the tiled layout).
       // Persisted as a docked node so its tabs survive, but tagged so restore
       // routes it back into `hiddenGroupsByScope` instead of the live tree.
@@ -330,9 +509,15 @@ export type SavedLayoutTree =
       // at `bounds` instead of docking it. See withDetachedDocked / loadFromLayout.
       detached?: boolean;
       bounds?: WindowBounds;
+      // A detached popout's own per-window zoom (see DetachedGroup.zoom).
+      zoom?: number;
       // When true, this group was HIDDEN (see the split variant's note). Restore
       // moves it into `hiddenGroupsByScope` rather than docking it live.
       hidden?: boolean;
+      // Per-subwindow right file viewer (see GroupNode.filesOpen/filesWidth).
+      filesOpen?: boolean;
+      filesWidth?: number;
+      filesFolder?: string;
     };
 
 /**
@@ -416,6 +601,26 @@ interface TabsStore {
   // exact match the label is refreshed to the new basename only when it still
   // equals the old basename (so a user-renamed tab keeps its label). No-op when
   // nothing matches. Delete/rename tab-sync lives in components/files/fileTabSync.
+  /**
+   * Re-point a project's tabs after it is detached from its SSH host, moving every cwd
+   * out of the old remote-project state dir and into the promoted mirror.
+   *
+   * This is not cosmetic; without it a detach silently breaks every agent tab. While a
+   * project is remote its `directory` is the **state dir**
+   * (`~/.local/share/eldrun/remote-projects/<id>/`), and `loadFromLayout` stores exactly
+   * that as each tab's `cwd` (agents unconditionally, others via `t.cwd || defaultCwd`).
+   * Nothing noticed, because `localTabCwd` overrode it at render time to the real mirror —
+   * an override gated on `isRemoteProject`. Detach flips that to false, the override stops
+   * firing, and every tab falls back to the stored cwd it never should have had: the state
+   * dir. Agents then launch inside `~/.local/share/eldrun/remote-projects/<id>/` — a
+   * directory that detach has just emptied — so Claude asks for permissions there and
+   * `--resume` finds no session, because Claude keys its history by cwd and the whole
+   * conversation lives under the mirror's path instead.
+   *
+   * Host-located tabs are converted to local too: their cwd is a path on a machine this
+   * project is no longer attached to.
+   */
+  detachScopeFromRemote: (scope: string, oldDir: string, newDir: string) => void;
   retargetTabs: (oldAbs: string, newAbs: string) => void;
   removeTab: (key: string) => void; // drop; collapse empty groups/splits
   closeGroup: (groupId: string) => void; // close a whole subwindow; siblings resize
@@ -425,6 +630,12 @@ interface TabsStore {
   // explicitly at the call site if the scope isn't the active project.
   closeAllTabs: (scope?: string) => void;
   updateTabEnv: (key: string, env: Record<string, string>) => void;
+  // Persistent sessions (TODO #85): rename a tab's tmux session name after the
+  // Sessions view renamed the host session, so the persisted name still matches
+  // and the tab reattaches to the renamed session on restart. Updates whichever
+  // field the tab uses (`tmuxAttach` for an attach tab, else `tmuxSession`).
+  // Scope-explicit (the Sessions view may act on a non-active project).
+  setTabTmuxName: (scope: string, key: string, name: string) => void;
   // SSH-sync Phase 0: set a tab's local/remote locality (agent/shell tabs on a
   // remote project). No-op when unchanged. The CenterPanel's localOnly/cwd
   // computation reads the result so the next mount spawns on the chosen side.
@@ -438,6 +649,9 @@ interface TabsStore {
   // pan). The viewer panes call this as the reader scrolls/zooms; the debounced
   // saveLayout effect then flushes it to project.json (see ViewerState).
   setViewerState: (key: string, patch: ViewerState) => void;
+  // Record the folder a "projectfiles" tab is browsed into, so it reopens there
+  // (see TabEntry.folder). No-op when unchanged.
+  setTabFolder: (key: string, folder: string) => void;
 
   // arrangement
   reorderInGroup: (groupId: string, from: number, to: number) => void;
@@ -453,6 +667,23 @@ interface TabsStore {
     edge: DropEdge,
   ) => TabEntry | null;
   resizeSplit: (splitId: string, dividerIndex: number, fraction: number) => void;
+  // Merge two adjacent subwindows into one (double-click the divider between
+  // them): append every tab of `sourceGroupId` onto `targetGroupId`, then let
+  // `writeScope`'s collapse pass drop the emptied source and unwrap the split.
+  // PTYs are preserved (tabs move, not close); the survivor keeps its activeKey.
+  // No-op if either group is missing or they are the same group.
+  mergeGroups: (targetGroupId: string, sourceGroupId: string) => void;
+
+  // Per-subwindow right file viewer: open/close a group's docked file-viewer
+  // column, and persist its width. Both write the flag onto the group NODE
+  // (GroupNode.filesOpen/filesWidth), so the sidebar persists with the layout
+  // tree and travels with a detach. No-ops if the group isn't in the current
+  // scope's live layout (popout-side toggles arrive via applyDetachedEdit).
+  setGroupFiles: (groupId: string, open: boolean) => void;
+  setGroupFilesWidth: (groupId: string, width: number) => void;
+  // Persist the folder the group's docked viewer last browsed to (see
+  // GroupNode.filesFolder). Same node-write path as the flag/width.
+  setGroupFilesFolder: (groupId: string, folder: string) => void;
 
   // #42: detach / re-attach a subwindow (group) to/from its own OS window.
   // `detachGroup` removes the group from the in-window tree, records it in
@@ -465,7 +696,14 @@ interface TabsStore {
   // group's label, or null if refused / not found.
   detachGroup: (
     groupId: string,
-    opts?: { skipBackend?: boolean; bounds?: WindowBounds; allowLastGroup?: boolean },
+    opts?: {
+      skipBackend?: boolean;
+      bounds?: WindowBounds;
+      allowLastGroup?: boolean;
+      // Restart respawn only: the popout's persisted per-window zoom, recorded on
+      // the fresh detached entry so its seed restores it (see RespawnTarget.zoom).
+      zoom?: number;
+    },
   ) => string | null;
   // Drag-a-tab-to-another-monitor: pop a SINGLE existing tab out of the in-window
   // layout into its own fresh detached OS window at `bounds` (screen px). Unlike
@@ -517,6 +755,36 @@ interface TabsStore {
     tabKey: string,
     opts?: { targetGroupId?: string; edge?: DropEdge; skipBackend?: boolean },
   ) => void;
+  // #42: dock ONE PANE (an inner group) of a MULTI-pane popout back into a
+  // scope's layout — the per-pane analog of attachDetachedTab, fired when a
+  // pane's bar grip is dragged onto the main window. Moves the pane's tabs as
+  // one group into the layout at `targetGroupId`/`edge` (center merges, an edge
+  // splits, default lands as its own pane) and removes the group node from the
+  // popout's subtree, leaving the sibling panes floating. If the pane is the
+  // popout's ONLY group this IS a whole-popout dock and delegates to
+  // attachGroup / dropDetachedGroup (which also close the OS window). The tab
+  // payloads already live in `tabsByScope`, so they survive the move. No-op if
+  // the popout or pane is gone.
+  attachDetachedPane: (
+    scope: string,
+    detachedGroupId: string,
+    paneId: string,
+    opts?: { targetGroupId?: string; edge?: DropEdge; skipBackend?: boolean },
+  ) => void;
+  // #42: pop ONE PANE (an inner group) of a MULTI-pane popout into its OWN brand
+  // new detached OS window — the per-pane analog of detachTabToNewWindow, fired
+  // when a pane's bar grip is dragged and released in FREE SPACE. Removes the
+  // group node from the source popout's subtree and records a fresh detached
+  // entry holding just that group at `bounds`, then spawns its OS window. The
+  // tab payloads stay in `tabsByScope` (shared). Refuses (returns null) when the
+  // popout/pane is gone OR the pane is the popout's only group — the popout
+  // already IS that pane's window. Returns the new window label.
+  detachPaneToNewWindow: (
+    scope: string,
+    fromGroupId: string,
+    paneId: string,
+    bounds: WindowBounds,
+  ) => string | null;
   // #42: pop a SINGLE tab OUT of an existing detached popout into its OWN brand
   // new detached OS window (the popout analog of TabBar's `popToNewWindow`),
   // fired when a tab dragged out of a popout is released in FREE SPACE — outside
@@ -588,6 +856,19 @@ interface TabsStore {
     tab: Omit<TabEntry, "key">,
     targetGroupId: string,
   ) => string | null;
+  // Like `addDetachedTab`, but the new tab carves a NEW pane at `edge` of
+  // `targetGroupId` within the popout's subtree instead of appending to it — a
+  // file dropped on a body edge inside a detached popout. Mints the key + owns
+  // the PTY (main window), so it returns the minted key (or null if the popout /
+  // group is gone) for the caller's re-seed. `edge` must be a side, never
+  // "center" (that appends → use `addDetachedTab`).
+  addDetachedTabSplit: (
+    scope: string,
+    detachedGroupId: string,
+    tab: Omit<TabEntry, "key">,
+    targetGroupId: string,
+    edge: DropEdge,
+  ) => string | null;
   // Multi-pane popouts: split a tab inside a detached popout's own subtree,
   // carving a new pane at `edge` of `targetGroupId` (a group WITHIN the
   // popout's subtree). Mirrors `splitWithTab` but mutates
@@ -615,9 +896,21 @@ interface TabsStore {
   // gone — persist the scope afterwards (persistScope) so disk agrees and they
   // don't restore on next launch. Closes the OS window via `attach_subwindow`.
   closeDetachedGroup: (scope: string, groupId: string) => void;
+  // #42: hide a popout into the right-panel "Hidden subwindows" list instead of
+  // docking it live or closing it — the detached twin of `hideGroup`. Moves the
+  // popout's subtree from `detachedGroupsByScope` into `hiddenGroupsByScope[scope]`
+  // (its tab payloads never left `tabsByScope`, so the flat pane layer keeps their
+  // PTYs mounted through the move) and closes the OS window via `attach_subwindow`.
+  // Restored/closed from the Hidden list exactly like a hidden main-window
+  // subwindow (`unhideGroup`/`closeHiddenGroup`), which docks it back into the
+  // tiled layout. No-op if the detached entry is gone.
+  hideDetachedGroup: (scope: string, groupId: string) => void;
   // #42: record a popout's latest OS geometry (streamed back from the window) so
   // it persists and the popout reopens where the user left it after a restart.
   setDetachedBounds: (scope: string, groupId: string, bounds: WindowBounds) => void;
+  // Record a popout's latest per-window zoom (streamed back over DETACHED_ZOOM)
+  // so it persists and the popout reopens at that zoom after a restart.
+  setDetachedZoom: (scope: string, groupId: string, zoom: number) => void;
   // #42: return and clear the scope's pending respawn targets (groups that were
   // detached at save time). Caller re-opens each via detachGroup once its pane
   // has mounted. Returns [] when there is nothing to respawn.
@@ -1205,7 +1498,16 @@ function currentScopeState(s: TabsStore) {
 export function serializeTree(node: LayoutNode | null): SavedLayoutTree | null {
   if (!node) return null;
   if (node.type === "group") {
-    return { type: "group", tabKeys: [...node.tabKeys], activeKey: node.activeKey };
+    return {
+      type: "group",
+      tabKeys: [...node.tabKeys],
+      activeKey: node.activeKey,
+      // Persist the per-subwindow file viewer (open flag + width + browsed
+      // folder) so it comes back on restart.
+      ...(node.filesOpen ? { filesOpen: true } : {}),
+      ...(node.filesWidth != null ? { filesWidth: node.filesWidth } : {}),
+      ...(node.filesFolder ? { filesFolder: node.filesFolder } : {}),
+    };
   }
   return {
     type: "split",
@@ -1221,6 +1523,9 @@ export function serializeTree(node: LayoutNode | null): SavedLayoutTree | null {
 export interface RespawnTarget {
   id: string; // the FRESH group id minted during deserialize
   bounds?: WindowBounds;
+  // The popout's persisted per-window zoom (see DetachedGroup.zoom), carried so
+  // the respawn re-detaches it at the zoom it was left at. Undefined = 100%.
+  zoom?: number;
 }
 
 /**
@@ -1253,12 +1558,20 @@ function deserializeTree(
       null;
     const id = nextGroupId();
     if (saved.detached && detachedOut) {
-      detachedOut.push({ id, bounds: saved.bounds });
+      detachedOut.push({ id, bounds: saved.bounds, zoom: saved.zoom });
     }
     if (saved.hidden && hiddenOut) {
       hiddenOut.push(id);
     }
-    return { type: "group", id, tabKeys, activeKey };
+    return {
+      type: "group",
+      id,
+      tabKeys,
+      activeKey,
+      ...(saved.filesOpen ? { filesOpen: true } : {}),
+      ...(saved.filesWidth != null ? { filesWidth: saved.filesWidth } : {}),
+      ...(saved.filesFolder ? { filesFolder: saved.filesFolder } : {}),
+    };
   }
   const children = saved.children
     .map((c) => deserializeTree(c, keyMap, detachedOut, hiddenOut))
@@ -1268,7 +1581,7 @@ function deserializeTree(
     // Collapsed to a single child. If this split was a detached (multi-pane)
     // popout, the survivor inherits the respawn so the popout still re-opens.
     if (saved.detached && detachedOut) {
-      detachedOut.push({ id: children[0].id, bounds: saved.bounds });
+      detachedOut.push({ id: children[0].id, bounds: saved.bounds, zoom: saved.zoom });
     }
     // Likewise inherit a hidden tag so the survivor is parked, not docked live.
     if (saved.hidden && hiddenOut) {
@@ -1289,7 +1602,7 @@ function deserializeTree(
   // the whole subtree (its children aren't individually tagged) so the respawn
   // path re-detaches the entire split as a single floating window.
   if (saved.detached && detachedOut) {
-    detachedOut.push({ id, bounds: saved.bounds });
+    detachedOut.push({ id, bounds: saved.bounds, zoom: saved.zoom });
   }
   // A hidden split is parked whole by its root id (same one-target logic).
   if (saved.hidden && hiddenOut) {
@@ -1376,7 +1689,7 @@ export const useTabsStore = create<TabsStore>((set, get) => ({
   addTab: (tab, opts) => {
     const key = nextKey(tab.kind);
     // Spread first so a stray `key` on the payload can't shadow the minted one.
-    const entry: TabEntry = { ...tab, key };
+    const entry: TabEntry = { ...withTmuxSession(tab), key };
     if (!opts?.seeded) countTabOpen(get().scope, entry);
     set((s) => {
       const { tabs, layout, focusedGroupId } = currentScopeState(s);
@@ -1409,7 +1722,7 @@ export const useTabsStore = create<TabsStore>((set, get) => ({
 
   addTabToScope: (scope, tab) => {
     const key = nextKey(tab.kind);
-    const entry: TabEntry = { ...tab, key, scope };
+    const entry: TabEntry = { ...withTmuxSession(tab), key, scope };
     countTabOpen(scope, entry);
     set((s) => {
       const tabs = s.tabsByScope[scope] ?? [];
@@ -1463,6 +1776,32 @@ export const useTabsStore = create<TabsStore>((set, get) => ({
     });
   },
 
+  detachScopeFromRemote: (scope, oldDir, newDir) => {
+    set((s) => {
+      const tabs = s.tabsByScope[scope] ?? [];
+      if (!tabs.length || !oldDir || !newDir || oldDir === newDir) return {};
+      let changed = false;
+      const nextTabs = tabs.map((t) => {
+        const wasRemoteLoc = t.location === "remote";
+        const underOld = t.cwd === oldDir || t.cwd.startsWith(`${oldDir}/`);
+        if (!wasRemoteLoc && !underOld) return t;
+        changed = true;
+        return {
+          ...t,
+          // A tab that ran ON THE HOST has a cwd in the host's filesystem, which means
+          // nothing here — it can only land in the promoted mirror root.
+          cwd: underOld ? `${newDir}${t.cwd.slice(oldDir.length)}` : newDir,
+          // …and it must stop claiming to run on a host this project no longer has.
+          location: wasRemoteLoc ? undefined : t.location,
+        };
+      });
+      if (!changed) return {};
+      const layout = s.layoutByScope[scope] ?? null;
+      const focused = s.focusedGroupByScope[scope] ?? null;
+      return writeScope(s, scope, nextTabs, layout, focused);
+    });
+  },
+
   retargetTabs: (oldAbs, newAbs) => {
     set((s) => {
       const scope = s.scope;
@@ -1573,6 +1912,24 @@ export const useTabsStore = create<TabsStore>((set, get) => ({
     });
   },
 
+  setTabTmuxName: (scope, key, name) => {
+    set((s) => {
+      const tabs = s.tabsByScope[scope] ?? [];
+      const nextTabs = tabs.map((t) =>
+        t.key === key
+          ? t.tmuxAttach
+            ? { ...t, tmuxAttach: name }
+            : { ...t, tmuxSession: name }
+          : t,
+      );
+      const patch: Partial<TabsStore> = {
+        tabsByScope: { ...s.tabsByScope, [scope]: nextTabs },
+      };
+      if (s.scope === scope) patch.tabs = nextTabs;
+      return patch;
+    });
+  },
+
   setTabLocation: (key, location) => {
     set((s) => {
       const { tabs, layout, focusedGroupId } = currentScopeState(s);
@@ -1632,6 +1989,7 @@ export const useTabsStore = create<TabsStore>((set, get) => ({
       const cur = tab.viewerState ?? {};
       if (
         cur.scrollTop === merged.scrollTop &&
+        cur.yamlScrollTop === merged.yamlScrollTop &&
         cur.scrollLeft === merged.scrollLeft &&
         cur.scale === merged.scale &&
         cur.offsetX === merged.offsetX &&
@@ -1639,7 +1997,11 @@ export const useTabsStore = create<TabsStore>((set, get) => ({
         cur.fontSize === merged.fontSize &&
         cur.autocomplete === merged.autocomplete &&
         cur.autocompleteMode === merged.autocompleteMode &&
-        cur.grammarCheck === merged.grammarCheck
+        cur.grammarCheck === merged.grammarCheck &&
+        // New array ref on every change, so this term is false exactly when a card
+        // was folded/unfolded — which is what lets a collapse-only patch through the
+        // guard (it touches none of the scalar fields above).
+        cur.gridCollapsed === merged.gridCollapsed
       ) {
         return {};
       }
@@ -1650,6 +2012,18 @@ export const useTabsStore = create<TabsStore>((set, get) => ({
     });
   },
 
+  setTabFolder: (key, folder) => {
+    set((s) => {
+      const { tabs, layout, focusedGroupId } = currentScopeState(s);
+      const tab = tabs.find((t) => t.key === key);
+      // No-op when unchanged, so re-listing the same folder doesn't churn the
+      // tabs array and wake the saveLayout debounce for nothing.
+      if (!tab || (tab.folder ?? "") === folder) return {};
+      const nextTabs = tabs.map((t) => (t.key === key ? { ...t, folder } : t));
+      return writeScope(s, s.scope, nextTabs, layout, focusedGroupId);
+    });
+  },
+
   reorderInGroup: (groupId, from, to) => {
     set((s) => {
       const { tabs, layout, focusedGroupId } = currentScopeState(s);
@@ -1714,6 +2088,30 @@ export const useTabsStore = create<TabsStore>((set, get) => ({
     });
   },
 
+  mergeGroups: (targetGroupId, sourceGroupId) => {
+    set((s) => {
+      const { tabs, layout } = currentScopeState(s);
+      if (!layout || targetGroupId === sourceGroupId) return {};
+      const target = findGroup(layout, targetGroupId);
+      const source = findGroup(layout, sourceGroupId);
+      if (!target || !source) return {};
+      const moved = source.tabKeys;
+      // Append source's tabs onto the target (survivor keeps its own activeKey),
+      // then empty the source so collapse drops it and unwraps the split.
+      let next = mapGroup(layout, targetGroupId, (g) => ({
+        ...g,
+        tabKeys: [...g.tabKeys, ...moved],
+        activeKey: g.activeKey ?? moved[0] ?? null,
+      }));
+      next = mapGroup(next, sourceGroupId, (g) => ({
+        ...g,
+        tabKeys: [],
+        activeKey: null,
+      }));
+      return writeScope(s, s.scope, tabs, next, targetGroupId);
+    });
+  },
+
   splitWithTab: (key, targetGroupId, edge) => {
     if (edge === "center") {
       get().moveTab(key, targetGroupId);
@@ -1767,7 +2165,11 @@ export const useTabsStore = create<TabsStore>((set, get) => ({
   splitWithNewTab: (tab, targetGroupId, edge) => {
     const key = nextKey(tab.kind);
     // Spread first so a stray `key` on the payload can't shadow the minted one.
-    const entry: TabEntry = { ...tab, key };
+    // Mint a persistent tmux session name like addTab/addTabToScope, so a shell
+    // tab created by a split-drag (or a Python run placed via one) is persistence-
+    // eligible — otherwise it silently skips the tmux wrap (idempotent: no-op for a
+    // tab that already carries a session or is a non-shell kind).
+    const entry: TabEntry = { ...withTmuxSession(tab), key };
     let created = false;
     set((s) => {
       const { tabs, layout } = currentScopeState(s);
@@ -1812,6 +2214,36 @@ export const useTabsStore = create<TabsStore>((set, get) => ({
     });
   },
 
+  setGroupFiles: (groupId, open) => {
+    set((s) => {
+      const { tabs, layout, focusedGroupId } = currentScopeState(s);
+      if (!layout || !findGroup(layout, groupId)) return {};
+      const next = mapGroup(layout, groupId, (g) => ({ ...g, filesOpen: open }));
+      return writeScope(s, s.scope, tabs, next, focusedGroupId);
+    });
+  },
+
+  setGroupFilesWidth: (groupId, width) => {
+    set((s) => {
+      const { tabs, layout, focusedGroupId } = currentScopeState(s);
+      if (!layout || !findGroup(layout, groupId)) return {};
+      const next = mapGroup(layout, groupId, (g) => ({ ...g, filesWidth: width }));
+      return writeScope(s, s.scope, tabs, next, focusedGroupId);
+    });
+  },
+
+  setGroupFilesFolder: (groupId, folder) => {
+    set((s) => {
+      const { tabs, layout, focusedGroupId } = currentScopeState(s);
+      const g = layout && findGroup(layout, groupId);
+      // No-op when unchanged, so re-listing the same folder doesn't churn the
+      // layout and wake the saveLayout debounce for nothing (mirrors setTabFolder).
+      if (!g || (g.filesFolder ?? "") === folder) return {};
+      const next = mapGroup(layout, groupId, (grp) => ({ ...grp, filesFolder: folder }));
+      return writeScope(s, s.scope, tabs, next, focusedGroupId);
+    });
+  },
+
   detachGroup: (groupId, opts) => {
     const scope = get().scope;
     const layout = get().layoutByScope[scope] ?? null;
@@ -1829,7 +2261,9 @@ export const useTabsStore = create<TabsStore>((set, get) => ({
     // Snapshot the popout's subtree: a single GroupNode, or the whole split node
     // (multi-pane popout) verbatim — its ids are reused as the popout's content.
     const subtree: LayoutNode = group
-      ? { type: "group", id: group.id, tabKeys: [...group.tabKeys], activeKey: group.activeKey }
+      // Spread so per-group extras (the files sidebar's open flag + width)
+      // travel with the subtree.
+      ? { ...group, tabKeys: [...group.tabKeys] }
       : (split as SplitNode);
     // Group ids that leave the in-window layout (one for a group, several for a
     // split) — used to drop focus if it pointed into the detached subtree.
@@ -1855,7 +2289,10 @@ export const useTabsStore = create<TabsStore>((set, get) => ({
         ...base,
         detachedGroupsByScope: {
           ...s.detachedGroupsByScope,
-          [scope]: [...existing, { id: groupId, subtree, label, bounds: opts?.bounds }],
+          [scope]: [
+            ...existing,
+            { id: groupId, subtree, label, bounds: opts?.bounds, zoom: opts?.zoom },
+          ],
         },
       };
     });
@@ -1940,8 +2377,9 @@ export const useTabsStore = create<TabsStore>((set, get) => ({
     const label = `detached-${scope}-${groupId}`;
     // Spread first so a stray `key` on the payload can't shadow the minted one;
     // stamp the owning scope (writeScope isn't on this path since the layout is
-    // untouched, so do its scope-stamp here).
-    const entry: TabEntry = { ...tab, key, scope };
+    // untouched, so do its scope-stamp here). Mint the tmux session name too, so a
+    // shell tab detached straight into its own popout stays persistence-eligible.
+    const entry: TabEntry = { ...withTmuxSession(tab), key, scope };
     const subtree: GroupNode = {
       type: "group",
       id: groupId,
@@ -2046,7 +2484,9 @@ export const useTabsStore = create<TabsStore>((set, get) => ({
 
     const label = `hidden-${scope}-${groupId}`;
     const subtree: LayoutNode = group
-      ? { type: "group", id: group.id, tabKeys: [...group.tabKeys], activeKey: group.activeKey }
+      // Spread so per-group extras (the files sidebar's open flag + width)
+      // travel with the subtree.
+      ? { ...group, tabKeys: [...group.tabKeys] }
       : (split as SplitNode);
     const hiddenGroupIds = new Set(allGroups(subtree).map((g) => g.id));
 
@@ -2220,6 +2660,78 @@ export const useTabsStore = create<TabsStore>((set, get) => ({
     }
   },
 
+  attachDetachedPane: (scope, detachedGroupId, paneId, opts) => {
+    const entries = get().detachedGroupsByScope[scope] ?? [];
+    const entry = entries.find((d) => d.id === detachedGroupId);
+    if (!entry) return;
+    const pane = findGroup(entry.subtree, paneId);
+    if (!pane) return;
+
+    // The pane is the popout's only group → this IS a whole-popout dock; the
+    // whole-group paths also close the OS window.
+    const remaining = removeNodeById(entry.subtree, paneId);
+    if (!remaining) {
+      if (get().scope === scope) get().attachGroup(detachedGroupId, opts);
+      else get().dropDetachedGroup(scope, detachedGroupId);
+      return;
+    }
+
+    set((s) => {
+      // 1. Inject the pane into the destination layout as one group (fresh id so
+      //    it can never collide with a live node id). Its tab payloads already
+      //    live in tabsByScope[scope]; only the keys move.
+      let layout = s.layoutByScope[scope] ?? null;
+      const fresh: GroupNode = {
+        type: "group",
+        id: nextGroupId(),
+        tabKeys: [...pane.tabKeys],
+        activeKey: pane.activeKey ?? pane.tabKeys[0] ?? null,
+      };
+      let destId = fresh.id;
+      if (!layout) {
+        layout = fresh; // empty scope → the pane becomes the root group.
+      } else {
+        const target =
+          (opts?.targetGroupId && findGroup(layout, opts.targetGroupId)) ||
+          allGroups(layout)[0];
+        if (!target) {
+          layout = fresh;
+        } else if (opts?.edge === "center") {
+          // Merge the pane's tabs into the target group.
+          layout = mapGroup(layout, target.id, (g) => ({
+            ...g,
+            tabKeys: [...g.tabKeys, ...pane.tabKeys],
+            activeKey: pane.activeKey ?? g.activeKey,
+          }));
+          destId = target.id;
+        } else {
+          // Default (no resolved target): land as its own pane on the right —
+          // a pane is a subwindow, so it keeps being one (mirrors attachGroup).
+          const edge = opts?.edge ?? "right";
+          const dir: SplitDir = edge === "left" || edge === "right" ? "row" : "column";
+          const before = edge === "left" || edge === "top";
+          layout = insertAdjacent(layout, target.id, fresh, dir, before);
+        }
+      }
+
+      // 2. Drop the pane's group node from the popout's subtree — the sibling
+      //    panes stay floating in the popout.
+      const nextEntries = (s.detachedGroupsByScope[scope] ?? []).map((d) =>
+        d.id === detachedGroupId ? { ...d, subtree: remaining } : d,
+      );
+
+      const tabs = s.tabsByScope[scope] ?? [];
+      const base = writeScope(s, scope, tabs, layout, destId);
+      return {
+        ...base,
+        detachedGroupsByScope: {
+          ...s.detachedGroupsByScope,
+          [scope]: nextEntries,
+        },
+      };
+    });
+  },
+
   detachTabToNewWindow: (scope, fromGroupId, tabKey, bounds) => {
     const entries = get().detachedGroupsByScope[scope] ?? [];
     const src = entries.find((d) => d.id === fromGroupId);
@@ -2268,6 +2780,55 @@ export const useTabsStore = create<TabsStore>((set, get) => ({
     return label;
   },
 
+  detachPaneToNewWindow: (scope, fromGroupId, paneId, bounds) => {
+    const entries = get().detachedGroupsByScope[scope] ?? [];
+    const src = entries.find((d) => d.id === fromGroupId);
+    if (!src) return null;
+    const pane = findGroup(src.subtree, paneId);
+    if (!pane) return null;
+    // A lone-pane popout dragged by its grip is already its own window —
+    // re-detaching it would empty the source and churn for nothing.
+    const remaining = removeNodeById(src.subtree, paneId);
+    if (!remaining) return null;
+
+    const groupId = nextGroupId();
+    const label = `detached-${scope}-${groupId}`;
+    // The pane becomes the whole subtree of a fresh popout; its tab payloads
+    // stay in tabsByScope (shared), so the new popout self-seeds and the PTYs
+    // never unmount (mirrors detachTabToNewWindow).
+    const subtree: GroupNode = {
+      type: "group",
+      id: groupId,
+      tabKeys: [...pane.tabKeys],
+      activeKey: pane.activeKey ?? pane.tabKeys[0] ?? null,
+    };
+
+    set((s) => {
+      const existing = s.detachedGroupsByScope[scope] ?? [];
+      // One atomic update: strip the pane from the source popout's subtree AND
+      // append the new detached entry. The payloads in `tabsByScope` are untouched.
+      const nextEntries = existing.map((d) =>
+        d.id === fromGroupId ? { ...d, subtree: remaining } : d,
+      );
+      return {
+        detachedGroupsByScope: {
+          ...s.detachedGroupsByScope,
+          [scope]: [...nextEntries, { id: groupId, subtree, label, bounds }],
+        },
+      };
+    });
+
+    invoke("detach_subwindow", {
+      projectId: scope,
+      groupId,
+      x: bounds.x,
+      y: bounds.y,
+      width: bounds.w,
+      height: bounds.h,
+    }).catch(() => {});
+    return label;
+  },
+
   dockTabIntoDetached: (scope, detachedGroupId, tabKey, target) => {
     const entries = get().detachedGroupsByScope[scope] ?? [];
     const entry = entries.find((d) => d.id === detachedGroupId);
@@ -2385,6 +2946,19 @@ export const useTabsStore = create<TabsStore>((set, get) => ({
           }
           break;
         }
+        case "setLocation": {
+          // Locality lives on the payload; the popout's pane is owned by THIS
+          // (main) window's flat pane layer, so updating it here respawns that
+          // pane on the chosen host (same path as the main-window locality badge).
+          if (nextTabs) {
+            nextTabs = nextTabs.map((t) =>
+              t.key === edit.key && t.location !== edit.location
+                ? { ...t, location: edit.location }
+                : t,
+            );
+          }
+          break;
+        }
         case "close": {
           nextSub = removeKeyFromTree(sub, edit.key);
           // Drop the closed tab's payload (its pane in the detached window
@@ -2421,6 +2995,15 @@ export const useTabsStore = create<TabsStore>((set, get) => ({
           // tree — impossible for a cross-group move) leaves the popout unchanged.
           nextSub = moveKeyInTree(sub, edit.key, edit.targetGroupId, edit.index) ?? sub;
           break;
+        case "files":
+          // The popout toggled/resized a group's docked file-viewer column.
+          nextSub = mapGroup(sub, edit.groupId, (grp) => ({
+            ...grp,
+            ...(edit.open != null ? { filesOpen: edit.open } : {}),
+            ...(edit.width != null ? { filesWidth: edit.width } : {}),
+            ...(edit.folder != null ? { filesFolder: edit.folder } : {}),
+          }));
+          break;
       }
       const nextEntries = [...entries];
       // If the detached popout emptied, remove it entirely.
@@ -2444,8 +3027,11 @@ export const useTabsStore = create<TabsStore>((set, get) => ({
     const key = nextKey(tab.kind);
     // Spread first so a stray `key` on the payload can't shadow the minted one;
     // stamp the owning scope (this path never touches the in-window layout, so it
-    // does writeScope's scope-stamp itself).
-    const entry: TabEntry = { ...tab, key, scope };
+    // does writeScope's scope-stamp itself). Mint the tmux session name like the
+    // in-window adds, so a Python/shell run STREAMED into a detached popout (its
+    // Run button places the tab here, not via addTabToScope) is persistence-
+    // eligible instead of silently skipping the tmux wrap.
+    const entry: TabEntry = { ...withTmuxSession(tab), key, scope };
     let created: string | null = null;
     set((s) => {
       const entries = s.detachedGroupsByScope[scope] ?? [];
@@ -2481,6 +3067,47 @@ export const useTabsStore = create<TabsStore>((set, get) => ({
     return created;
   },
 
+  addDetachedTabSplit: (scope, detachedGroupId, tab, targetGroupId, edge) => {
+    const key = nextKey(tab.kind);
+    // Spread first so a stray `key` can't shadow the minted one; stamp the scope
+    // (this path never touches the in-window layout, so no writeScope to do it).
+    // Mint the tmux session name too (see addDetachedTab) so a shell tab streamed
+    // into a popout via a split-drop is persistence-eligible.
+    const entry: TabEntry = { ...withTmuxSession(tab), key, scope };
+    let created: string | null = null;
+    set((s) => {
+      const entries = s.detachedGroupsByScope[scope] ?? [];
+      const idx = entries.findIndex((d) => d.id === detachedGroupId);
+      if (idx < 0) return {};
+      const rec = entries[idx];
+      // Carve a new pane holding the tab at `edge` of the target group, leaving
+      // the target's own tabs untouched — mirrors `splitWithNewTab`'s edge
+      // branch, but on the popout's subtree. A stale target id → no split.
+      if (!findGroup(rec.subtree, targetGroupId)) return {};
+      const newGroup: GroupNode = {
+        type: "group",
+        id: nextGroupId(),
+        tabKeys: [key],
+        activeKey: key,
+      };
+      const dir: SplitDir = edge === "left" || edge === "right" ? "row" : "column";
+      const before = edge === "left" || edge === "top";
+      const nextSub = insertAdjacent(rec.subtree, targetGroupId, newGroup, dir, before);
+      const nextEntries = [...entries];
+      nextEntries[idx] = { ...rec, subtree: nextSub };
+      // Append the payload so the MAIN window's pane layer mounts + owns the PTY;
+      // the detached window attaches to it after the re-seed.
+      const nextTabs = [...(s.tabsByScope[scope] ?? []), entry];
+      created = key;
+      return {
+        tabsByScope: { ...s.tabsByScope, [scope]: nextTabs },
+        ...(s.scope === scope ? { tabs: nextTabs } : {}),
+        detachedGroupsByScope: { ...s.detachedGroupsByScope, [scope]: nextEntries },
+      };
+    });
+    return created;
+  },
+
   splitDetachedGroup: (scope, detachedGroupId, key, targetGroupId, edge) => {
     set((s) => {
       const entries = s.detachedGroupsByScope[scope] ?? [];
@@ -2528,6 +3155,39 @@ export const useTabsStore = create<TabsStore>((set, get) => ({
     invoke("attach_subwindow", { registryId: entry.label }).catch(() => {});
   },
 
+  hideDetachedGroup: (scope, groupId) => {
+    const entries = get().detachedGroupsByScope[scope] ?? [];
+    const entry = entries.find((d) => d.id === groupId);
+    if (!entry) return;
+
+    set((s) => {
+      const remaining = (s.detachedGroupsByScope[scope] ?? []).filter(
+        (d) => d.id !== groupId,
+      );
+      const existing = s.hiddenGroupsByScope[scope] ?? [];
+      // The popout's tab payloads never left `tabsByScope`, so the flat pane
+      // layer keeps their PTYs mounted through the move — only the subtree
+      // changes home, from the detached record to the hidden one. Ids are kept
+      // as-is (like `hideGroup`); `unhideGroup` regenerates them on restore to
+      // avoid colliding with a live node. Mirror the flat tab list is untouched
+      // (no tab payload changes here).
+      return {
+        detachedGroupsByScope: { ...s.detachedGroupsByScope, [scope]: remaining },
+        hiddenGroupsByScope: {
+          ...s.hiddenGroupsByScope,
+          [scope]: [
+            ...existing,
+            { id: entry.id, subtree: entry.subtree, label: entry.label },
+          ],
+        },
+      };
+    });
+
+    // Close the detached OS window + drop the backend registry entry (best-effort;
+    // the popout also destroys its own window). Mirrors dropDetachedGroup.
+    invoke("attach_subwindow", { registryId: entry.label }).catch(() => {});
+  },
+
   closeDetachedGroup: (scope, groupId) => {
     const entries = get().detachedGroupsByScope[scope] ?? [];
     const entry = entries.find((d) => d.id === groupId);
@@ -2592,6 +3252,21 @@ export const useTabsStore = create<TabsStore>((set, get) => ({
     });
   },
 
+  setDetachedZoom: (scope, groupId, zoom) => {
+    set((s) => {
+      const entries = s.detachedGroupsByScope[scope];
+      if (!entries) return {};
+      let changed = false;
+      const next = entries.map((d) => {
+        if (d.id !== groupId || d.zoom === zoom) return d;
+        changed = true;
+        return { ...d, zoom };
+      });
+      if (!changed) return {};
+      return { detachedGroupsByScope: { ...s.detachedGroupsByScope, [scope]: next } };
+    });
+  },
+
   consumePendingRespawn: (scope) => {
     const pending = get().pendingRespawnByScope[scope] ?? [];
     if (pending.length === 0) return [];
@@ -2653,10 +3328,19 @@ export const useTabsStore = create<TabsStore>((set, get) => ({
       // Resumable agent tabs (Claude with a sessionId) respawn with their
       // resume flag so the prior conversation comes back; everyone else starts
       // fresh with no args.
-      const tabShape = { kind, cmd: t.cmd, sessionId: t.sessionId };
+      const tabShape = {
+        kind,
+        cmd: t.cmd,
+        sessionId: t.sessionId,
+        resumeArgs: t.resumeArgs,
+      };
+      // A custom agent carries its own resume flag on the tab; a built-in looks
+      // its cmd up in the static table (which needs the captured session id).
       const base =
         isResumableAgentTab(tabShape) && t.sessionId
-          ? RESUMABLE_AGENTS[t.cmd](t.sessionId)
+          ? t.resumeArgs?.length
+            ? t.resumeArgs
+            : RESUMABLE_AGENTS[t.cmd](t.sessionId)
           : [];
       // Args are rebuilt from scratch here, so a persisted planner/doer mode has
       // to be re-applied onto them or the tab would silently come back in the
@@ -2672,6 +3356,9 @@ export const useTabsStore = create<TabsStore>((set, get) => ({
         cwd: isAgent && defaultCwd ? defaultCwd : t.cwd || defaultCwd,
         kind,
         sessionId: t.sessionId,
+        // A restart-resumable custom agent keeps its resume flag (already folded
+        // into `base`/`args` above) so a *second* restart resumes it again.
+        resumeArgs: t.resumeArgs,
         // Restored file embed tabs (kind === "embed") carry their durable path
         // and how to open it so the pane rebuilds exactly.
         embedPath: t.embedPath,
@@ -2682,6 +3369,17 @@ export const useTabsStore = create<TabsStore>((set, get) => ({
         location: t.location,
         // Restore the planner/doer mode (already folded into `args` above).
         agentMode: t.agentMode,
+        // A "projectfiles" tab reopens on the folder it was browsed into.
+        folder: t.folder,
+        // Persistent sessions (TODO #85): keep the stable session name so the
+        // reattach targets the SAME host session after a relaunch. Mint one for a
+        // shell tab persisted before this feature existed (it then reattaches on
+        // every subsequent restart).
+        tmuxSession:
+          t.tmuxSession ??
+          (kind === "shell" && !t.tmuxAttach ? newTmuxSessionName() : undefined),
+        // A Sessions-view attach tab reattaches to its tmux session on restart.
+        tmuxAttach: t.tmuxAttach,
       };
     });
 
@@ -2775,6 +3473,26 @@ export const useTabsStore = create<TabsStore>((set, get) => ({
   persistScope: async (scope, localFile) => {
     const layout = get().layoutByScope[scope] ?? null;
     const scopeTabs = get().tabsByScope[scope] ?? [];
+    // Whether an EMPTY layout may erase what's on disk. Saving empty is destructive —
+    // it drops `tab_layout`/`tab_groups` AND overwrites the `.eldrun` session mirror,
+    // taking a resumable agent tab's `sessionId` (the only handle on its conversation)
+    // with them. So it must mean "the user closed every tab", and only two things here
+    // can distinguish that from a caller with nothing loaded:
+    //
+    //   hydrated            — the scope has been restored from disk this session. An
+    //                         ABSENT key is a scope we know nothing about; its emptiness
+    //                         is ignorance, not intent. (A scope whose restore found no
+    //                         restorable tabs never creates the key — see CenterPanel.)
+    //   scopeTabs.length    — the scope really holds zero tabs. A scope holding tabs that
+    //                         all get filtered out below (non-restorable, or belonging to
+    //                         another scope) yields an empty list that looks identical to
+    //                         a close-all and is nothing of the sort — that is how
+    //                         SimpleGNN's four tabs were erased on detach.
+    //
+    // Anything else: the backend keeps what it has. Worst case we persist a layout one
+    // save late; the alternative loses conversations.
+    const hydrated = Object.prototype.hasOwnProperty.call(get().tabsByScope, scope);
+    const allowClear = hydrated && scopeTabs.length === 0;
     // Order the flat tab union by the tree's stable left-to-right order so the
     // persisted `tabs` array and `groups` tree agree.
     const keyOrder = orderedTabKeys(layout);
@@ -2820,6 +3538,15 @@ export const useTabsStore = create<TabsStore>((set, get) => ({
         // Persist the planner/doer mode so the tab comes back in it (the args
         // that carry it are NOT persisted — they're rebuilt in loadFromLayout).
         agentMode: t.agentMode,
+        // Persist a "projectfiles" tab's browsed folder.
+        folder: t.folder,
+        // Persist a restart-resumable custom agent's resume flag (the args that
+        // carry it are rebuilt in loadFromLayout, like agentMode).
+        resumeArgs: t.resumeArgs,
+        // Persist the stable tmux session name + any attach target, so a persistent
+        // remote shell tab REATTACHES to the same host session after a relaunch.
+        tmuxSession: t.tmuxSession,
+        tmuxAttach: t.tmuxAttach,
       }));
       // #42: re-dock detached groups into the persisted tree so disk reflects a
       // restart-as-docked layout (their tabs are already in the flat list above
@@ -2833,12 +3560,27 @@ export const useTabsStore = create<TabsStore>((set, get) => ({
         tabs: tabLayout,
         groups,
         sessions,
+        allowClear,
       });
     } catch {
       // tab layout is non-critical
     }
   },
 
+  /**
+   * Persist the CURRENT scope into `localFile`.
+   *
+   * Prefer `persistScope(scope, localFile)`. This overload pairs the store's live
+   * `scope` with a `localFile` the caller supplies, and those are two independently
+   * tracked values: whenever they drift, this writes one project's tabs into another
+   * project's file — or, once the per-scope filter has dropped every foreign tab, an
+   * empty layout, which used to erase the target's tabs outright. That is exactly how
+   * SimpleGNN lost four of them on detach (which swaps `local_file` under the store).
+   * The backend now refuses an unvouched empty save, so this can no longer destroy
+   * anything, but the mismatch is still wrong at the source. No production caller
+   * remains — CenterPanel passes its scope explicitly, and `detached.ts` derives
+   * `localFile` FROM the scope. Kept for the tests that drive it directly.
+   */
   saveLayout: async (localFile) => {
     await get().persistScope(get().scope, localFile);
   },
@@ -2877,6 +3619,7 @@ const AGENT_CMDS = new Set([
 
 export function cmdToKind(cmd: string): TabKind {
   if (cmd === FILES_TAB_CMD) return "files";
+  if (cmd === PROJECT_FILES_TAB_CMD) return "projectfiles";
   if (cmd === BLOB_TAB_CMD) return "projects3d";
   if (cmd === NETWORK_TAB_CMD) return "network";
   if (cmd === MONITOR_TAB_CMD) return "monitor";
@@ -2903,6 +3646,7 @@ export function isRestorableKind(kind: TabKind): boolean {
   return (
     kind === "shell" ||
     kind === "files" ||
+    kind === "projectfiles" ||
     kind === "network" ||
     kind === "monitor" ||
     // The tab comes back, but on its home screen — a scan is far too expensive to
@@ -2924,15 +3668,15 @@ export function isPtyTabKind(kind: TabKind): boolean {
  *
  *  - id-based: Claude (`--resume <id>`) and Codex (`codex resume`, args injected
  *    by the backend) resume a *specific* captured session.
- *  - cwd "continue last": Qwen, OpenCode, Copilot, Cursor and Grok have no
- *    caller-supplied launch id, so Eldrun re-launches with their "continue the
- *    most recent session" flag. Because each agent tab launches in the project
- *    directory, that most-recent session IS the tab's prior conversation. These
- *    ignore the minted id (it only satisfies the persistence gate below and is
- *    set as ELDRUN_TAB_UID). Caveat: two tabs of the same agent in one project
- *    both resume that project's single latest session, so they can't be told
- *    apart on restore. Gemini/Vibe stay excluded until their path is confirmed
- *    (39d); Aider has no per-session resume (only `--restore-chat-history`).
+ *  - cwd "continue last": Qwen, OpenCode, Copilot, Cursor, Grok, Gemini and
+ *    Mistral/vibe have no caller-supplied launch id, so Eldrun re-launches with
+ *    their "continue the most recent session" flag. Because each agent tab
+ *    launches in the project directory, that most-recent session IS the tab's
+ *    prior conversation. These ignore the minted id (it only satisfies the
+ *    persistence gate below and is set as ELDRUN_TAB_UID). Caveat: two tabs of
+ *    the same agent in one project both resume that project's single latest
+ *    session, so they can't be told apart on restore. Aider stays excluded — it
+ *    has no per-session resume (only `--restore-chat-history`).
  */
 export const RESUMABLE_AGENTS: Record<string, (id: string) => string[]> = {
   // Claude: `--resume <launch-id>`; the backend upgrades the id to the live one
@@ -2949,6 +3693,14 @@ export const RESUMABLE_AGENTS: Record<string, (id: string) => string[]> = {
   copilot: () => ["--continue"],
   "cursor-agent": () => ["--continue"],
   grok: () => ["--session", "latest"],
+  // Gemini's `--resume` takes "latest" (or an index), not a uuid, so it can only
+  // continue the project's most-recent session — not the specific one its launch
+  // `--session-id <uuid>` minted. That makes it continue-last like the others.
+  gemini: () => ["--resume", "latest"],
+  // Mistral/vibe: `-c/--continue` resumes the most recent saved session. (Its
+  // `--resume [id]` with no id would open an interactive picker, which hangs a
+  // restore — so `--continue` is the non-interactive path.)
+  vibe: () => ["--continue"],
 };
 
 /**
@@ -2957,12 +3709,14 @@ export const RESUMABLE_AGENTS: Record<string, (id: string) => string[]> = {
  * restart (their conversation is resumed); other agent tabs are still dropped.
  */
 export function isResumableAgentTab(
-  tab: { kind: TabKind; cmd: string; sessionId?: string },
+  tab: { kind: TabKind; cmd: string; sessionId?: string; resumeArgs?: string[] },
 ): boolean {
   return (
     (tab.kind === "agent" || tab.kind === "local_agent") &&
     !!tab.sessionId &&
-    tab.cmd in RESUMABLE_AGENTS
+    // Built-in resumable (cmd in the static table) OR a custom agent whose spec
+    // supplied a "continue last session" flag (carried on the tab as resumeArgs).
+    (tab.cmd in RESUMABLE_AGENTS || !!tab.resumeArgs?.length)
   );
 }
 
@@ -3029,6 +3783,10 @@ export function pruneSavedTree(
       // Carry the hidden tag through pruning so a hidden group stays parked on
       // restore rather than docking live (mirrors the detached tag).
       ...(tree.hidden ? { hidden: true } : {}),
+      // Carry the per-subwindow file viewer through pruning (same rationale).
+      ...(tree.filesOpen ? { filesOpen: true } : {}),
+      ...(tree.filesWidth != null ? { filesWidth: tree.filesWidth } : {}),
+      ...(tree.filesFolder ? { filesFolder: tree.filesFolder } : {}),
     };
   }
   const kept = tree.children
@@ -3148,7 +3906,7 @@ export function withDetachedDocked(
     // popout) so restore respawns the WHOLE subtree as one floating window rather
     // than docking it into the main panel. `detachGroup` re-detaches either shape
     // by the tagged node's id (see deserializeTree → pendingRespawn).
-    docked.push({ ...t, detached: true, bounds: d.bounds });
+    docked.push({ ...t, detached: true, bounds: d.bounds, zoom: d.zoom });
   }
   if (docked.length === 0) return inWindow;
   const all = inWindow ? [inWindow, ...docked] : docked;
diff --git a/src/stores/vpnStatus.ts b/src/stores/vpnStatus.ts
index 9760958..5da9ed2 100644
--- a/src/stores/vpnStatus.ts
+++ b/src/stores/vpnStatus.ts
@@ -128,6 +128,23 @@ export function anyVpnLive(byConfig: Record<string, ConnState>): boolean {
   return Object.values(byConfig).some((s) => s === "connected" || s === "connecting");
 }
 
+/**
+ * Whether a dialog's own "Connect via OpenVPN" section still has anything to offer.
+ * Every remote menu that can start a tunnel asks this, so they all answer it alike:
+ * the Connect modal, and the SSH section the new-project and extend-to-remote
+ * dialogs share.
+ *
+ * A tunnel is machine-wide, so once *any* config is live the routing is already
+ * there and a project-scoped second connect path is noise — the section collapses
+ * to `VpnTunnelUpNotice` and the dialog goes straight to SSH. The exception is a
+ * tunnel **this** dialog brought up (`ownTunnelBusy`): its controls (handshake log,
+ * Stop/Disconnect) must stay reachable where the user started it.
+ */
+export function useVpnSectionVisible(ownTunnelBusy: boolean): boolean {
+  const globallyLive = useVpnStatusStore((s) => anyVpnLive(s.byConfig));
+  return !globallyLive || ownTunnelBusy;
+}
+
 // ── Lamp helpers ────────────────────────────────────────────────────────────────
 // A tunnel has two audiences and every connect path has to serve both: the project
 // that asked for it (its pill lamp) and the machine it reroutes (the header
@@ -194,3 +211,26 @@ export function disconnectVpnTunnel(config: string): void {
   useVpnStatusStore.getState().releaseAll(config);
   void invoke("openvpn_disconnect", { config }).catch(() => {});
 }
+
+/**
+ * Tear down every live tunnel on the **app-close path, before the window (and the
+ * popouts) go away** — awaited, so the UI stays on screen until it is done. Returns
+ * `true` when every tunnel is down and the quit may proceed, `false` when the user
+ * dismissed the teardown prompt: a tunnel (and the machine-wide routing it installed)
+ * is still up, so the caller must **abort the quit** and tell the user to close it
+ * first, rather than quit with the OS routing left rewritten.
+ *
+ * The backend also disconnects all tunnels in its `RunEvent::Exit` handler, but that
+ * fires only *after* the webview window has been destroyed, so the elevated
+ * `pkexec kill` raised its polkit password prompt against a screen where Eldrun had
+ * already vanished — password *after* close, the wrong order. `openvpn_disconnect_all_on_quit`
+ * tears down the **same registered set** that exit-time handler would (not the liveness-
+ * filtered `openvpn_active` subset, which could skip a tunnel that then prompts at exit),
+ * surfaces a refused prompt as an error, and keeps the tunnel registered — so this runs
+ * to completion, prompt and all, while Eldrun is still visible.
+ */
+export async function disconnectAllTunnelsOnQuit(): Promise<boolean> {
+  return invoke("openvpn_disconnect_all_on_quit")
+    .then(() => true)
+    .catch(() => false);
+}
diff --git a/src/styles/themes.css b/src/styles/themes.css
index 6218891..1205b79 100644
--- a/src/styles/themes.css
+++ b/src/styles/themes.css
@@ -153,7 +153,7 @@ html, body, #root {
   background-color: var(--scrollbar-thumb);
   border: 2px solid var(--scrollbar-track);
   background-clip: padding-box;
-  border-radius: 6px;
+  border-radius: var(--radius);
 }
 
 *::-webkit-scrollbar-thumb:hover {
@@ -191,6 +191,10 @@ html, body, #root {
 
    The variables you actually recolor (everything else can be left alone):
      --bg-main / --bg-panel / --bg-header  → window, panels, header
+     --bg-elevated                          → menus/dialogs/popovers (a step
+       lighter than --bg-panel in dark themes, white in light ones)
+     --shadow-1/2/3                         → elevation (dark defaults on :root;
+       light themes override with the softer grey set — copy from `light`)
      --border-color / --border-subtle       → separators, outlines
      --text-primary / --text-secondary / --text-muted → text tiers
      --accent / --accent-hover / --accent-active      → the theme's hue
@@ -199,7 +203,7 @@ html, body, #root {
      --control-bg / --control-hover-bg / --control-border → inputs/buttons
      --pill-active-bg / --pill-active-border / --pill-hover-bg → project pills
      --success / --warning / --danger        → status colors (usually keep)
-     --wm-close / --wm-minimize / --wm-maximize → window-control dots
+     --wm-close / --wm-minimize / --wm-maximize → window-control buttons
      --activity-0..4                         → calendar heatmap ramp (light→dark)
    Tip: pick one --accent, then derive -hover (darker), -active (darker
    still), and the pill-active-* rgba() from that same hue.
@@ -210,8 +214,16 @@ html, body, #root {
 [data-theme="fancy_dark"] {
   --bg-main: #101624;
   --bg-panel: #16213a;
+  --bg-elevated: #1b2946;
   --bg-header: linear-gradient(90deg, #101624 0%, #16213a 48%, #241735 100%);
-  --border-color: rgba(94, 220, 255, 0.35);
+  /* The header tone as a SOLID, opaque color. --bg-header is a gradient in the
+     "fancy" themes, which makes it unusable wherever a color is required: a
+     `color-mix(… var(--bg-header))` is then an invalid value and the whole
+     declaration drops, leaving the surface TRANSPARENT (a sticky table header
+     the body then bleeds through). Any table header / sticky chrome reads this
+     instead; every theme declares it as a plain color. */
+  --bg-header-solid: #16213a;
+  --border-color: rgba(94, 220, 255, 0.2);
   --border-subtle: #22304a;
   --text-primary: #f4f8ff;
   --text-secondary: #d8e2f3;
@@ -231,10 +243,35 @@ html, body, #root {
      CTA buttons use --bg-main instead (see .btn-primary) — which is dark in dark
      themes and light in light themes, tracking the accent for legible text. */
   --accent-contrast: #ffffff;
-  /* Corner radius knob for the whole app: the house style is sharp corners, so
-     every shared surface/button rule reads var(--radius) and this single value
-     flips them all at once. Defined once on :root (not per theme). */
-  --radius: 0;
+  /* Corner-radius scale for the whole app. Every surface/button rule reads one
+     of these tokens, so the app-wide feel flips from here: --radius-sm for
+     small controls (inputs, buttons, chips), --radius for panels/cards/menus,
+     --radius-lg for dialogs and large surfaces, --radius-full for circles and
+     pill shapes. Defined once on :root (not per theme); a theme that wants the
+     old sharp-corner house style can override these to 0 in its own block. */
+  --radius-sm: 5px;
+  --radius: 8px;
+  --radius-lg: 12px;
+  --radius-full: 999px;
+  /* Elevation scale. Depth is expressed by surface tone (--bg-main < --bg-panel
+     < --bg-elevated) plus these soft layered shadows — not by loud borders.
+     --shadow-1: resting controls/cards; --shadow-2: popovers, dropdowns,
+     tooltips; --shadow-3: dialogs and floating windows. Dark defaults here;
+     light themes override with softer, bluer-grey shadows below. */
+  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.24), 0 1px 3px rgba(0, 0, 0, 0.18);
+  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.22);
+  --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
+  /* Motion: one quick ease for hover/press/focus feedback everywhere, one
+     slower ease for layout-level movement (panel dock, drawer slide). */
+  --transition: 140ms ease;
+  --transition-slow: 240ms ease;
+  /* Typography. The variable fonts are bundled (fontsource, imported in
+     main.tsx) so the app renders identically on every OS; the stacks fall back
+     to the platform faces when the import is unavailable. */
+  --font-sans: "Inter Variable", Inter, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, sans-serif;
+  --font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace,
+    "SF Mono", Menlo, Consolas, monospace;
   /* Scrollbar colors. Defined ONCE on :root but referencing the theme's own
      --accent / --bg-panel, which are re-declared per theme on this same <html>
      element — so `var()`'s lazy resolution gives every theme a bluish (accent)
@@ -267,13 +304,28 @@ html, body, #root {
   --activity-2: #006d32;
   --activity-3: #26a641;
   --activity-4: #39d353;
+  /* Glass chrome tokens — read only by the "Glass chrome" section below, never
+     by the plain --bg-panel/--bg-elevated/--bg-header vars (100+ nested-content
+     rules read those; making those translucent app-wide would stack
+     translucency-on-translucency and wreck contrast everywhere). These instead
+     recolor just the outer chrome surfaces (header, side panel, tab bars,
+     dialogs, menus, pills) for a frosted-glass look. */
+  --glass-blur: 18px;
+  --glass-blur-strong: 34px;
+  --glass-saturate: 150%;
+  --glass-panel: rgba(20, 30, 52, 0.6);
+  --glass-elevated: rgba(22, 32, 56, 0.94);
+  --glass-header: linear-gradient(90deg, rgba(16, 22, 36, 0.55) 0%, rgba(22, 33, 58, 0.55) 48%, rgba(36, 23, 53, 0.55) 100%);
+  --glass-border: rgba(255, 255, 255, 0.14);
 }
 
 /* ── Theme: dark (plain dark) ────────────────────────────────────────── */
 [data-theme="dark"] {
   --bg-main: #0d1117;
   --bg-panel: #161b22;
+  --bg-elevated: #1c2128;
   --bg-header: #161b22;
+  --bg-header-solid: #161b22;
   --border-color: #30363d;
   --border-subtle: #21262d;
   --text-primary: #e6edf3;
@@ -311,7 +363,12 @@ html, body, #root {
 [data-theme="light"] {
   --bg-main: #ffffff;
   --bg-panel: #f6f8fa;
+  --bg-elevated: #ffffff;
   --bg-header: #f6f8fa;
+  --bg-header-solid: #f6f8fa;
+  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
+  --shadow-2: 0 4px 16px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.08);
+  --shadow-3: 0 16px 48px rgba(16, 24, 40, 0.18), 0 4px 12px rgba(16, 24, 40, 0.1);
   --border-color: #d0d7de;
   --border-subtle: #eaecef;
   --text-primary: #24292f;
@@ -350,7 +407,12 @@ html, body, #root {
 [data-theme="fancy_light"] {
   --bg-main: #f7fbff;
   --bg-panel: #e8f7ff;
+  --bg-elevated: #ffffff;
   --bg-header: linear-gradient(90deg, #f7fbff 0%, #e8f7ff 48%, #f5ecff 100%);
+  --bg-header-solid: #e8f7ff;
+  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
+  --shadow-2: 0 4px 16px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.08);
+  --shadow-3: 0 16px 48px rgba(16, 24, 40, 0.18), 0 4px 12px rgba(16, 24, 40, 0.1);
   --border-color: rgba(9, 105, 218, 0.28);
   --border-subtle: #d8e5f0;
   --text-primary: #1f2937;
@@ -389,7 +451,12 @@ html, body, #root {
 [data-theme="light_lavender"] {
   --bg-main: #faf9fe;
   --bg-panel: #f2effa;
+  --bg-elevated: #ffffff;
   --bg-header: #f2effa;
+  --bg-header-solid: #f2effa;
+  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
+  --shadow-2: 0 4px 16px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.08);
+  --shadow-3: 0 16px 48px rgba(16, 24, 40, 0.18), 0 4px 12px rgba(16, 24, 40, 0.1);
   --border-color: #ddd6f0;
   --border-subtle: #ebe7f6;
   --text-primary: #2e2a3d;
@@ -422,6 +489,135 @@ html, body, #root {
   --activity-2: #a98fe0;
   --activity-3: #8968cf;
   --activity-4: #6344ab;
+  /* Glass chrome tokens — see the matching comment in fancy_dark above; same
+     idea, tuned for a light, lavender-tinted frosted glass. */
+  --glass-blur: 16px;
+  --glass-blur-strong: 30px;
+  --glass-saturate: 130%;
+  --glass-panel: rgba(242, 239, 250, 0.58);
+  --glass-elevated: rgba(248, 246, 253, 0.95);
+  --glass-header: rgba(242, 239, 250, 0.5);
+  --glass-border: rgba(255, 255, 255, 0.75);
+}
+
+/* ── Glass chrome (fancy_dark / light_lavender) ───────────────────────────
+   Frosted-glass treatment for the app's outer chrome ONLY — header, right
+   file panel, tab bars, docked file sidebar, project pills, dialogs, and
+   popover menus. Reads the --glass-* tokens defined on each theme above, not
+   the shared --bg-panel/--bg-elevated (see the comment on those tokens for
+   why). Both themes share one rule set since they read the same variable
+   names with theme-appropriate values. */
+[data-theme="fancy_dark"] .app-header,
+[data-theme="light_lavender"] .app-header,
+[data-theme="fancy_dark"] .right-panel,
+[data-theme="light_lavender"] .right-panel,
+[data-theme="fancy_dark"] .tab-bar,
+[data-theme="light_lavender"] .tab-bar,
+[data-theme="fancy_dark"] .subwindow-files,
+[data-theme="light_lavender"] .subwindow-files {
+  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+}
+
+/* Dialogs and popover menus float directly over readable content (terminal
+   text, code, file trees) — they need to fully obscure it, not just tint it,
+   so these get a much stronger blur plus a near-opaque fill (--glass-elevated)
+   rather than the lighter chrome-panel treatment above. */
+[data-theme="fancy_dark"] .project-dialog,
+[data-theme="light_lavender"] .project-dialog,
+[data-theme="fancy_dark"] .settings-dialog,
+[data-theme="light_lavender"] .settings-dialog,
+[data-theme="fancy_dark"] .stats-dialog,
+[data-theme="light_lavender"] .stats-dialog,
+[data-theme="fancy_dark"] .context-menu,
+[data-theme="light_lavender"] .context-menu,
+[data-theme="fancy_dark"] .tab-new-menu,
+[data-theme="light_lavender"] .tab-new-menu,
+[data-theme="fancy_dark"] .project-switcher-add-menu,
+[data-theme="light_lavender"] .project-switcher-add-menu {
+  backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
+  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
+}
+
+[data-theme="fancy_dark"] .app-header,
+[data-theme="light_lavender"] .app-header {
+  background: var(--glass-header);
+  box-shadow: inset 0 -1px 0 var(--glass-border), 0 8px 24px -16px rgba(0, 0, 0, 0.4);
+}
+
+/* The right-side file panel is fully opaque even in the glass themes: it floats
+   over live terminal/code content, and a translucent tree is hard to read. It
+   opts out of the shared frosted-glass rule above (opaque fill ⇒ blur is moot). */
+[data-theme="fancy_dark"] .right-panel,
+[data-theme="light_lavender"] .right-panel {
+  background-color: var(--bg-panel);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+[data-theme="fancy_dark"] .tab-bar,
+[data-theme="light_lavender"] .tab-bar {
+  background-color: var(--glass-panel);
+  box-shadow: inset 0 1px 0 var(--glass-border);
+}
+
+[data-theme="fancy_dark"] .subwindow-files,
+[data-theme="light_lavender"] .subwindow-files {
+  background: var(--glass-panel);
+}
+
+/* No glass-theme pill background: pills are transparent in every theme so they
+   melt into the header bar behind them, showing its exact color. Only text (and
+   the active pill's accent frame) distinguishes a pill from the bar. */
+
+[data-theme="fancy_dark"] .project-dialog,
+[data-theme="light_lavender"] .project-dialog,
+[data-theme="fancy_dark"] .settings-dialog,
+[data-theme="light_lavender"] .settings-dialog,
+[data-theme="fancy_dark"] .stats-dialog,
+[data-theme="light_lavender"] .stats-dialog {
+  background: var(--glass-elevated);
+  border-color: var(--glass-border);
+  /* Keep the accent top rail even though border-color above just reset every
+     edge to --glass-border — the rail is what ties a glass dialog back to the
+     header's tint. */
+  border-top-color: var(--accent);
+  box-shadow: var(--shadow-3), inset 0 1px 0 var(--glass-border);
+}
+
+[data-theme="fancy_dark"] .context-menu,
+[data-theme="light_lavender"] .context-menu,
+[data-theme="fancy_dark"] .tab-new-menu,
+[data-theme="light_lavender"] .tab-new-menu,
+[data-theme="fancy_dark"] .project-switcher-add-menu,
+[data-theme="light_lavender"] .project-switcher-add-menu {
+  background: var(--glass-elevated);
+  border-color: var(--glass-border);
+  border-top-color: var(--accent);
+  box-shadow: var(--shadow-3), inset 0 1px 0 var(--glass-border);
+}
+
+/* Blur the whole app behind an open dialog too, so a modal reads as one
+   continuous glass surface rather than just a frosted frame. */
+[data-theme="fancy_dark"] .modal-backdrop,
+[data-theme="light_lavender"] .modal-backdrop {
+  backdrop-filter: blur(8px) saturate(120%);
+  -webkit-backdrop-filter: blur(8px) saturate(120%);
+}
+
+/* Ambient color wash behind the glass chrome — flat single-color bg-main
+   gives blurred edges nothing to reveal; a faint tinted glow makes the
+   frosted panels read as glass over a scene instead of glass over a void. */
+[data-theme="fancy_dark"] .app-shell {
+  background-image:
+    radial-gradient(1200px 600px at 12% -10%, rgba(54, 197, 240, 0.09), transparent 60%),
+    radial-gradient(1000px 520px at 100% 0%, rgba(179, 136, 255, 0.08), transparent 55%);
+}
+
+[data-theme="light_lavender"] .app-shell {
+  background-image:
+    radial-gradient(1200px 600px at 12% -10%, rgba(124, 92, 219, 0.08), transparent 60%),
+    radial-gradient(1000px 520px at 100% 0%, rgba(157, 110, 203, 0.07), transparent 55%);
 }
 
 /* ── App layout shell ─────────────────────────────────────────────────── */
@@ -431,7 +627,7 @@ html, body, #root {
   height: 100%;
   background-color: var(--bg-main);
   color: var(--text-primary);
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
   font-size: 13px;
 }
 
@@ -450,8 +646,8 @@ select {
   background-color: var(--control-bg);
   color: var(--text-primary);
   border: 1px solid var(--control-border);
-  border-radius: 3px;
-  padding: 3px 28px 3px 8px;
+  border-radius: var(--radius-sm);
+  padding: 4px 28px 4px 9px;
   cursor: pointer;
   background-image:
     linear-gradient(45deg, transparent 50%, var(--text-primary) 50%),
@@ -469,6 +665,21 @@ select:focus {
   outline: none;
 }
 
+/* ── Standard focus ring ─────────────────────────────────────────────────
+   One keyboard-focus affordance for every interactive element: a soft accent
+   ring, offset so it never collides with the element's own border. More
+   specific per-component :focus-visible rules below still win where they set
+   their own treatment. The xterm helper textarea is excluded — it holds focus
+   whenever a terminal is active and must stay invisible. */
+button:focus-visible,
+select:focus-visible,
+input:focus-visible,
+[tabindex]:focus-visible,
+textarea:focus-visible:not(.xterm-helper-textarea) {
+  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
+  outline-offset: 1px;
+}
+
 select option {
   background: var(--bg-panel);
   color: var(--text-primary);
@@ -479,16 +690,21 @@ select option {
   display: flex;
   position: relative;
   overflow: hidden;
-  transition: padding-right 0.2s ease;
+  transition: padding-right var(--transition-slow), padding-left var(--transition-slow);
 }
 
-/* When the right panel is pinned it docks into layout: inset the body by the
-   panel width so the center panel reflows instead of being overlaid. The panel
-   is absolutely positioned at right:0, so it fills the freed padding region. */
+/* When the panel is pinned it docks into layout: inset the body by the panel
+   width so the center panel reflows instead of being overlaid. The panel is
+   absolutely positioned against its edge, so it fills the freed padding region.
+   `left-docked` is the mirror for the left-side variant. */
 .app-body.right-docked {
   padding-right: 280px;
 }
 
+.app-body.left-docked {
+  padding-left: 280px;
+}
+
 /* ── Header bar ─────────────────────────────────────────────────────── */
 .app-header {
   height: 44px;
@@ -501,6 +717,24 @@ select option {
   z-index: 80;
 }
 
+/* A soft theme-accent wash over the header bar (lavender in light_lavender,
+   cyan-blue in fancy_dark, etc.) so the top bar reads as themed, not just a
+   neutral panel. A translucent overlay rather than recoloring --bg-header
+   directly, since that variable is a plain color in some themes and a
+   gradient in others (fancy_dark/fancy_light) — an overlay works over either
+   with no per-theme branching. Negative z-index keeps it under the header's
+   own (unpositioned, normal-flow) children within .app-header's own stacking
+   context. */
+.app-header::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--accent);
+  opacity: 0.32;
+  pointer-events: none;
+  z-index: -1;
+}
+
 .header-left {
   display: flex;
   align-items: center;
@@ -525,7 +759,7 @@ select option {
   user-select: none;
   opacity: 0.6;
   cursor: grab;
-  transition: opacity 0.1s, color 0.1s;
+  transition: opacity var(--transition), color var(--transition);
 }
 .app-drag-grip:hover {
   opacity: 1;
@@ -559,54 +793,80 @@ select option {
   padding-left: 78px;
 }
 
-/* ── Window controls (traffic lights) ───────────────────────────────── */
+/* ── Window controls (rectangular, colored glyphs) ──────────────────── */
 .wm-controls {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 4px;
   flex-shrink: 0;
 }
 
 .wm-btn {
   position: relative;
-  width: 13px;
-  height: 13px;
+  width: 30px;
+  height: 22px;
   padding: 0;
-  border-radius: 50%;
-  border: 1px solid rgba(0, 0, 0, 0.18);
+  border-radius: 6px;
+  border: 1px solid transparent;
+  background: transparent;
   cursor: pointer;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: filter 0.12s ease, transform 0.08s ease;
+  transition: background-color var(--transition), border-color var(--transition),
+    transform var(--transition);
 }
 
-.wm-btn:hover { filter: brightness(1.12); }
-.wm-btn:active { transform: scale(0.92); filter: brightness(0.9); }
+.wm-btn:active { transform: scale(0.92); }
 .wm-btn:focus-visible {
   outline: 2px solid var(--accent, #58a6ff);
   outline-offset: 2px;
 }
 
-.wm-close    { background-color: var(--wm-close); }
-.wm-minimize { background-color: var(--wm-minimize); }
-.wm-maximize { background-color: var(--wm-maximize); }
+.wm-minimize:hover {
+  background: color-mix(in srgb, var(--wm-minimize) 20%, transparent);
+  border-color: color-mix(in srgb, var(--wm-minimize) 45%, transparent);
+}
+.wm-maximize:hover {
+  background: color-mix(in srgb, var(--wm-maximize) 20%, transparent);
+  border-color: color-mix(in srgb, var(--wm-maximize) 45%, transparent);
+}
+.wm-close:hover {
+  background: color-mix(in srgb, var(--wm-close) 26%, transparent);
+  border-color: color-mix(in srgb, var(--wm-close) 55%, transparent);
+}
 
-/* Glyphs revealed when hovering anywhere over the group. */
-.wm-btn::before {
+/* Minimize glyph: a single bar. */
+.wm-minimize::before {
   content: "";
-  color: rgba(0, 0, 0, 0.55);
-  font-size: 9px;
-  line-height: 1;
-  font-weight: 700;
-  opacity: 0;
-  transition: opacity 0.12s ease;
+  width: 10px;
+  height: 2px;
+  border-radius: 1px;
+  background: var(--wm-minimize);
+}
+
+/* Maximize glyph: a small window outline. */
+.wm-maximize::before {
+  content: "";
+  width: 9px;
+  height: 9px;
+  border-radius: 2px;
+  border: 1.5px solid var(--wm-maximize);
+}
+
+/* Close glyph: an × from two crossed bars. */
+.wm-close::before,
+.wm-close::after {
+  content: "";
+  position: absolute;
+  width: 12px;
+  height: 2px;
+  border-radius: 1px;
+  background: var(--wm-close);
 }
-.wm-controls:hover .wm-btn::before { opacity: 1; }
-.wm-close::before    { content: "\00d7"; }   /* × */
-.wm-minimize::before { content: "\2013"; }   /* – */
-.wm-maximize::before { content: "\002b"; }  /* + */
+.wm-close::before { transform: rotate(45deg); }
+.wm-close::after { transform: rotate(-45deg); }
 
 /* ── App logo ────────────────────────────────────────────────────────── */
 .app-logo {
@@ -628,11 +888,11 @@ select option {
   padding: 4px;
   margin-right: 2px;
   border: 1px solid transparent;
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   background: transparent;
   cursor: pointer;
   flex-shrink: 0;
-  transition: background-color 0.1s, border-color 0.1s;
+  transition: background-color var(--transition), border-color var(--transition);
 }
 
 .root-logo-btn:hover {
@@ -745,9 +1005,9 @@ select option {
   font-size: 11px;
   font-variant-numeric: tabular-nums;
   padding: 2px 5px;
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   flex-shrink: 0;
-  transition: color 0.15s;
+  transition: color var(--transition);
 }
 .app-timer-btn:hover {
   background: var(--control-hover-bg);
@@ -759,7 +1019,7 @@ select option {
   border-radius: 50%;
   background: var(--success);
   flex-shrink: 0;
-  transition: background 0.2s;
+  transition: background var(--transition-slow);
 }
 .app-timer-btn.paused .app-timer-dot {
   background: var(--text-muted);
@@ -802,6 +1062,182 @@ select option {
   overflow: hidden;
 }
 
+/* ── Presentation overlay (marker + laser), over every native viewer ──────── */
+.presentation-host {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.presentation-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 40;
+  overflow: hidden;
+}
+
+.presentation-canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+/* The transparent drag surface that captures marker/laser pointer input; only
+   present while a tool is active, so clicks otherwise pass through. */
+.presentation-capture {
+  position: absolute;
+  inset: 0;
+  pointer-events: auto;
+  touch-action: none;
+}
+
+.presentation-toolbar {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  z-index: 2;
+}
+
+.presentation-fab,
+.presentation-tool {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border-color);
+  background: var(--bg-elevated, var(--bg-panel));
+  color: var(--text-primary);
+  cursor: pointer;
+  border-radius: 7px;
+}
+
+.presentation-fab {
+  width: 32px;
+  height: 32px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
+  opacity: 0.55;
+  transition: opacity 0.12s ease;
+}
+
+.presentation-fab:hover {
+  opacity: 1;
+}
+
+.presentation-tools {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 5px;
+  border: 1px solid var(--border-color);
+  border-radius: 9px;
+  background: var(--bg-elevated, var(--bg-panel));
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
+}
+
+.presentation-tool {
+  width: 28px;
+  height: 28px;
+  font-size: 14px;
+  line-height: 1;
+}
+
+.presentation-tool:hover:not(:disabled) {
+  border-color: var(--accent-color);
+  color: var(--accent-color);
+}
+
+.presentation-tool:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.presentation-tool.on {
+  background: var(--accent-color);
+  border-color: var(--accent-color);
+  color: var(--bg-panel);
+}
+
+.presentation-sep {
+  width: 1px;
+  align-self: stretch;
+  margin: 2px 2px;
+  background: var(--border-color);
+}
+
+.presentation-swatches {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  padding: 0 2px;
+}
+
+.presentation-swatch {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  cursor: pointer;
+  padding: 0;
+}
+
+.presentation-swatch.on {
+  border-color: var(--text-primary);
+  box-shadow: 0 0 0 1px var(--bg-panel);
+}
+
+.presentation-settings-wrap {
+  position: relative;
+  display: inline-flex;
+}
+
+.presentation-settings {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 8px);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 190px;
+  padding: 10px;
+  border: 1px solid var(--border-color);
+  border-radius: 9px;
+  background: var(--bg-elevated, var(--bg-panel));
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
+}
+
+.presentation-slider {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 11px;
+  color: var(--text-primary);
+}
+
+.presentation-slider-label {
+  display: flex;
+  justify-content: space-between;
+  color: var(--text-muted);
+}
+
+.presentation-slider-label b {
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+.presentation-slider input[type="range"] {
+  width: 100%;
+  accent-color: var(--accent-color);
+  cursor: pointer;
+}
+
+.presentation-preview {
+  width: 100%;
+  border-radius: 4px;
+  min-height: 4px;
+}
+
 .file-viewer-header {
   display: flex;
   align-items: center;
@@ -823,7 +1259,7 @@ select option {
   background: transparent;
   color: var(--text-muted);
   border: 1px solid var(--border-color);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   padding: 0;
   width: 20px;
   height: 18px;
@@ -845,7 +1281,7 @@ select option {
   background: transparent;
   color: var(--text-muted);
   border: 1px solid var(--border-color);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   padding: 0;
   width: 22px;
   height: 18px;
@@ -873,7 +1309,7 @@ select option {
   background: transparent;
   color: var(--text-muted);
   border: 1px solid var(--border-color);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   padding: 0;
   width: 20px;
   height: 18px;
@@ -898,11 +1334,37 @@ select option {
   opacity: 0.45;
 }
 
+/* "Resolve divergence" button — only shown for an amber (diverged) file. It
+   wears the exact amber (#d29922) of the Orange list's `±` dot it opens, so the
+   affordance reads as the same thing in both places (not the theme-varying
+   --warning, which the Orange list also deliberately doesn't use). */
+.file-viewer-resolve {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 18px;
+  padding: 0;
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  color: #d29922;
+  border: 1px solid color-mix(in srgb, #d29922 55%, transparent);
+  background: color-mix(in srgb, #d29922 14%, transparent);
+}
+
+.file-viewer-resolve:hover {
+  color: #d29922;
+  border-color: #d29922;
+  background: color-mix(in srgb, #d29922 24%, transparent);
+}
+
 /* Edit/Preview segmented toggle for the markdown viewer. */
 .file-viewer-modes {
   display: inline-flex;
   border: 1px solid var(--border-color);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   overflow: hidden;
 }
 
@@ -928,7 +1390,7 @@ select option {
   background: transparent;
   color: var(--text-muted);
   border: 1px solid var(--border-color);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   padding: 1px 8px;
   font-size: 10px;
   cursor: pointer;
@@ -952,7 +1414,7 @@ select option {
   background: transparent;
   color: var(--text-muted);
   border: 1px solid var(--border-color);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   padding: 1px 8px;
   font-size: 10px;
   cursor: pointer;
@@ -968,29 +1430,183 @@ select option {
   border-color: var(--text-muted);
 }
 
-/* #45 in-tab AI-assist controls: Autocomplete on/off + length mode, Grammar
-   on/off. Same chrome as the save/format buttons; the "active" (enabled) state is
-   accent-filled so it's obvious at a glance whether each is on for this tab. */
-.file-viewer-ai-controls {
+/* Sync-merge "Take all local / remote" buttons take the same colors as the
+   file view's local (green) / remote (amber) locality tags, so the button
+   that pulls a side reads as that side at a glance. */
+.file-viewer-compare-take-all.local {
+  color: var(--success);
+  border-color: color-mix(in srgb, var(--success) 45%, transparent);
+}
+.file-viewer-compare-take-all.local:not(:disabled):hover {
+  color: var(--success);
+  border-color: var(--success);
+}
+.file-viewer-compare-take-all.remote {
+  color: var(--warning);
+  border-color: color-mix(in srgb, var(--warning) 45%, transparent);
+}
+.file-viewer-compare-take-all.remote:not(:disabled):hover {
+  color: var(--warning);
+  border-color: var(--warning);
+}
+
+/* #py Run/Debug: the wrapper anchors the right-click "arguments" popover. */
+.file-viewer-run-controls {
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: 4px;
 }
-.file-viewer-ai-btn {
-  background: transparent;
-  color: var(--text-muted);
+/* Right-click-Run "arguments" popover — canonical panel chrome (see the menu
+   layout convention): explicit colours so a portal-free child never inherits
+   the body's default black text. */
+.file-viewer-run-args {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: 40;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 220px;
+  padding: 8px;
+  background: var(--bg-elevated);
+  color: var(--text-primary);
   border: 1px solid var(--border-color);
-  border-radius: 3px;
-  padding: 1px 8px;
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-2);
+}
+.file-viewer-run-args-label {
   font-size: 10px;
-  cursor: pointer;
+  color: var(--text-muted);
 }
-.file-viewer-ai-btn:hover {
+.file-viewer-run-args-input {
+  background: var(--bg-input, var(--bg-panel));
   color: var(--text-primary);
-  border-color: var(--text-muted);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  padding: 3px 6px;
+  font-family: var(--font-mono, monospace);
+  font-size: 11px;
 }
-.file-viewer-ai-btn.active {
-  background: var(--accent, #4493f8);
+.file-viewer-run-args-input:focus {
+  outline: none;
+  border-color: var(--accent, #4493f8);
+}
+.file-viewer-run-args-row {
+  display: flex;
+  gap: 4px;
+}
+/* SLURM directive / interactive-resource form: a two-column grid of labeled
+   fields inside the run-args popover (HPC #SBATCH editor + srun resources). */
+.slurm-directive-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 5px 8px;
+}
+.slurm-directive-field {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.slurm-directive-key {
+  font-size: 10px;
+  color: var(--text-muted);
+}
+/* Header row for the Jobs (SLURM) view — just carries the untested tag. */
+.right-panel-jobs-head {
+  display: flex;
+  justify-content: flex-end;
+  padding: 4px 6px 0;
+}
+
+/* HPC pipeline wizard (Phase B). Reuses the project-dialog chrome; these add the
+   step breadcrumb, the footer action row and the uploaded-files list. */
+.hpc-wizard-trail {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+  margin-bottom: 10px;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+.hpc-wizard-trail-step.active {
+  color: var(--text-primary);
+  font-weight: 600;
+}
+.hpc-wizard-trail-step.done {
+  color: var(--accent, #4493f8);
+}
+.hpc-wizard .project-dialog-actions {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 14px;
+}
+.hpc-wizard-uploaded {
+  margin: 6px 0 0;
+  padding-left: 4px;
+  list-style: none;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+.hpc-wizard-uploaded li {
+  padding: 1px 0;
+}
+/* Hover hint showing the saved run arguments. The native `title` tooltip is
+   unreliable under WebKitGTK, so this is an explicit in-DOM popover — same panel
+   chrome as the args editor, but read-only and pointer-transparent so it never
+   blocks the click beneath it. */
+.file-viewer-run-argshint {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: 40;
+  max-width: 360px;
+  padding: 5px 8px;
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-2);
+  font-size: 10px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: none;
+}
+.file-viewer-run-argshint-label {
+  color: var(--text-muted);
+  margin-right: 4px;
+}
+.file-viewer-run-argshint-val {
+  font-family: var(--font-mono, monospace);
+}
+
+/* #45 in-tab AI-assist controls: Autocomplete on/off + length mode, Grammar
+   on/off. Same chrome as the save/format buttons; the "active" (enabled) state is
+   accent-filled so it's obvious at a glance whether each is on for this tab. */
+.file-viewer-ai-controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.file-viewer-ai-btn {
+  background: transparent;
+  color: var(--text-muted);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  padding: 1px 8px;
+  font-size: 10px;
+  cursor: pointer;
+}
+.file-viewer-ai-btn:hover {
+  color: var(--text-primary);
+  border-color: var(--text-muted);
+}
+.file-viewer-ai-btn.active {
+  background: var(--accent, #4493f8);
   border-color: var(--accent, #4493f8);
   color: var(--accent-contrast);
 }
@@ -998,7 +1614,7 @@ select option {
   background: var(--bg-panel);
   color: var(--text-primary);
   border: 1px solid var(--border-color);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   padding: 1px 4px;
   font-size: 10px;
   cursor: pointer;
@@ -1009,7 +1625,7 @@ select option {
   display: inline-flex;
   align-items: center;
   border: 1px solid var(--border-color);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   overflow: hidden;
 }
 
@@ -1083,7 +1699,7 @@ select option {
   background: transparent;
   color: var(--text-primary);
   border: 1px solid var(--border-color);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   padding: 0 6px;
   font-size: 10px;
   cursor: pointer;
@@ -1135,7 +1751,7 @@ select option {
   background: transparent;
   color: var(--text-muted);
   border: 1px solid var(--border-color);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   min-width: 20px;
   height: 18px;
   padding: 0 5px;
@@ -1166,7 +1782,8 @@ select option {
   font-variant-numeric: tabular-nums;
 }
 
-/* PDF toolbar "current page / total" readout. */
+/* PDF toolbar "current page / total" readout — also the go-to-page trigger
+   (click, or Ctrl+G). */
 .file-viewer-pdf-pagenum {
   text-align: center;
   font-size: 10px;
@@ -1175,6 +1792,20 @@ select option {
   padding: 0 4px;
 }
 
+/* Inline "go to page" input, swapped in for the readout above while active. */
+.file-viewer-pdf-pagejump-input {
+  background: var(--bg-base, var(--bg-main, var(--bg-panel)));
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  height: 18px;
+  width: 42px;
+  padding: 0 4px;
+  font-size: 10px;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+}
+
 /* Text-size control: the numeric level doubles as a "reset to default" button. */
 .file-viewer-fontsize-level {
   min-width: 22px;
@@ -1226,6 +1857,25 @@ select option {
   will-change: transform;
 }
 
+/* GIF viewer transport (#gifviewer). The frame scrubber rides inside the shared
+   .file-viewer-zoom pill; the speed dropdown inherits the shared Dropdown look
+   with only the toolbar's compact sizing (same bargain as the TeX engine
+   selector). */
+.gif-transport .gif-scrubber {
+  width: 110px;
+  accent-color: var(--accent, #4493f8);
+}
+
+.gif-transport .gif-scrubber:disabled {
+  opacity: 0.5;
+}
+
+.gif-speed .dropdown-trigger {
+  min-height: 0;
+  padding: 1px 6px;
+  font-size: 11px;
+}
+
 .file-viewer-body {
   flex: 1;
   overflow: auto;
@@ -1245,152 +1895,1187 @@ select option {
   word-break: break-word;
 }
 
-/* "No LaTeX engine — install one" prompt in the TeX viewer's no-engine state.
-   Mirrors the install-cmd rows used in the Ollama/Agents settings panels. */
-.tex-install-banner {
+/* YAML structure tree (#yaml) — the editable half of the YAML viewer. Rows are
+   monospace so keys and values line up like the file does; the action buttons are
+   revealed on hover/focus so a big config reads as data, not as a form. */
+.yaml-tree {
+  padding: 8px 10px 24px;
+  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
+  font-size: 12px;
+  color: var(--text-primary);
+  /* The per-level indent-guide colors (`rowPad` in YamlTree.tsx draws one
+     vertical line per ancestor level, cycling these by depth). */
+  --yaml-guide-0: color-mix(in srgb, var(--accent, #4493f8) 38%, transparent);
+  --yaml-guide-1: color-mix(in srgb, #a887e8 38%, transparent);
+  --yaml-guide-2: color-mix(in srgb, #4fc1a6 38%, transparent);
+  --yaml-guide-3: color-mix(in srgb, #d9a05b 38%, transparent);
+}
+
+.yaml-doc + .yaml-doc {
+  margin-top: 10px;
+}
+
+.yaml-doc-sep {
+  margin: 6px 0 4px;
+  padding-bottom: 2px;
+  border-bottom: 1px solid var(--border-color);
+  color: var(--text-muted);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.yaml-row {
+  /* Anchors the absolute action gutter (`.yaml-gutter`) on the row's left. */
+  position: relative;
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
-  gap: 8px;
-  padding: 8px 12px;
-  font-size: 12px;
-  border-bottom: 1px solid var(--border, #30363d);
+  gap: 4px;
+  min-height: 22px;
+  border-radius: var(--radius-sm);
+  /* The drop line is drawn as a border, so every row reserves the space for one —
+     otherwise the rows below the pointer would jump by a pixel as it is drawn. */
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+}
+
+.yaml-row:hover {
   background: var(--bg-subtle, rgba(255, 255, 255, 0.03));
 }
 
-.tex-install-banner-text {
+/* Reorder-by-drag: the grip appears on hover (it is an affordance, not furniture),
+   but keeps its width at all times so no row shifts when it does. */
+.yaml-grip {
+  flex: none;
+  width: 10px;
+  background: transparent;
+  border: 0;
+  padding: 0;
   color: var(--text-muted);
+  font-size: 10px;
+  line-height: 1;
+  cursor: grab;
+  opacity: 0;
+  touch-action: none;
 }
 
-.tex-install-banner .ollama-install-cmd {
-  flex: 1 1 240px;
-  min-width: 0;
+.yaml-row:hover .yaml-grip,
+.yaml-grip:focus-visible {
+  opacity: 0.7;
 }
 
-/* OpenDocument Text viewer (#51): a scrolling, theme-coloured reading surface for
-   the HTML subset rendered from content.xml. A centred max-width column keeps
-   prose readable; tables and images stay within it. */
-.odt-viewer-body {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  background: var(--bg-panel);
-  color: var(--text-primary);
+.yaml-grip-empty {
+  cursor: default;
 }
 
-.odt-document {
-  max-width: 48rem;
-  margin: 0 auto;
-  padding: 28px 32px 56px;
-  line-height: 1.6;
-  font-size: 14px;
+.yaml-row-dragging {
+  opacity: 0.45;
+  /* The dragged row keeps the action-hover accent for the whole gesture, so the
+     block being moved stays marked while the pointer travels the list. */
+  background: color-mix(in srgb, var(--accent, #4493f8) 14%, transparent);
 }
 
-.odt-document h1,
-.odt-document h2,
-.odt-document h3,
-.odt-document h4,
-.odt-document h5,
-.odt-document h6 {
-  line-height: 1.25;
-  margin: 1.4em 0 0.5em;
-  font-weight: 600;
+.yaml-row-dragging .yaml-grip {
+  cursor: grabbing;
 }
 
-.odt-document p {
-  margin: 0 0 0.8em;
-  white-space: pre-wrap;
+.yaml-row-drop-before {
+  border-top-color: var(--accent, #4493f8);
 }
 
-.odt-document a {
-  color: var(--accent, #3b82f6);
-  text-decoration: underline;
+.yaml-row-drop-after {
+  border-bottom-color: var(--accent, #4493f8);
 }
 
-.odt-document ul,
-.odt-document ol {
-  margin: 0 0 0.8em 1.5em;
-  padding: 0;
+/* During a reorder drag, an entry the drop can't land on (it owns its item's
+   dash line, so it can't be displaced from first place) is blended out, so the
+   impossible positions read as unavailable rather than silently ignoring a drop. */
+.yaml-row-blocked {
+  opacity: 0.35;
 }
 
-.odt-image {
-  max-width: 100%;
-  height: auto;
+/* Hovering a container's row marks its whole substructure, not just its own
+   line — what the row names IS the block beneath it. The rows are DOM siblings,
+   so the mark is handed down in React (`yaml-row-marked`), matching the plain
+   hover tint; a hovered delete hands down the danger tint instead, so everything
+   tinted is exactly what the × will take. */
+.yaml-row-marked {
+  background: var(--bg-subtle, rgba(255, 255, 255, 0.03));
 }
 
-.odt-table {
-  border-collapse: collapse;
-  margin: 0 0 1em;
-  font-size: 13px;
+.yaml-row-marked-del {
+  background: color-mix(in srgb, var(--danger, #f85149) 16%, transparent);
 }
 
-.odt-table td {
-  border: 1px solid var(--border-color);
-  padding: 4px 8px;
-  vertical-align: top;
+/* …and a hovered whole-entry action (copy, move, comment, grip) hands down the
+   accent tint, matching the row's own :has() highlight below — the entry the
+   button acts on is its block, not its one line. */
+.yaml-row-marked-act {
+  background: color-mix(in srgb, var(--accent, #4493f8) 14%, transparent);
 }
 
-/* Code editor: a line-number gutter beside a scrolling monospace textarea. The
-   gutter is scroll-synced from JS (file-viewer-gutter has no scrollbar), so the
-   body must not scroll — the textarea owns the scroll. Font metrics (size 12px,
-   line-height 18px, 10px top padding) are shared so the numbers stay aligned. */
-.file-viewer-code-body {
-  overflow: hidden;
+/* The grip's own mark on top of the accent: the block "pulls out" a few px,
+   the affordance that this handle is what moves it. The hovered row itself
+   shifts via the :has() below; its marked children ride `yaml-row-pulled`. */
+.yaml-row {
+  transition: transform var(--transition);
 }
 
-.file-viewer-code {
-  position: relative;
-  display: flex;
-  height: 100%;
-  min-height: 0;
-  /* Editor font metrics. Defaults match the shared 12px/18px layout; the text
-     size control overrides these inline so the gutter + overlay layers scale
-     together and stay aligned. */
-  --code-font-size: 12px;
-  --code-line-height: 18px;
+.yaml-row-pulled,
+.yaml-row-dragging,
+.yaml-row:has(> .yaml-actions .yaml-grip:hover) {
+  transform: translateX(3px);
 }
 
-.file-viewer-gutter {
-  flex-shrink: 0;
-  overflow: hidden;
-  padding: 10px 8px 10px 10px;
-  text-align: right;
-  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
-  font-size: var(--code-font-size, 12px);
-  line-height: var(--code-line-height, 18px);
-  color: var(--text-muted);
-  background: var(--bg-panel);
-  border-right: 1px solid var(--border-color);
-  user-select: none;
-  font-variant-numeric: tabular-nums;
+/* Hovering a row's action (drag, move up/down, delete, add) highlights that row,
+   so it is obvious which entry the button will act on — delete tinted with
+   danger, the rest with the accent. `:has()` scopes it to the row whose OWN
+   actions are hovered (a child row's actions live in a separate row element). */
+.yaml-row:has(> .yaml-actions .yaml-act:hover),
+.yaml-row:has(> .yaml-actions .yaml-add:hover),
+.yaml-row:has(> .yaml-actions .yaml-grip:hover) {
+  background: color-mix(in srgb, var(--accent, #4493f8) 14%, transparent);
 }
 
-/* The line numbers are translated as a block to follow the textarea's vertical
-   scroll (see syncScroll); the gutter itself stays put and clips them. */
-.file-viewer-gutter-inner {
-  will-change: transform;
+.yaml-row:has(> .yaml-actions .yaml-act-del:hover) {
+  background: color-mix(in srgb, var(--danger, #f85149) 16%, transparent);
 }
 
-.file-viewer-gutter-line {
-  height: var(--code-line-height, 18px);
+/* The persistent add row: hovering either button tints it, so it's clear a new
+   entry will land here. */
+.yaml-row-add:has(.yaml-add:hover) {
+  background: color-mix(in srgb, var(--accent, #4493f8) 12%, transparent);
 }
 
-/* #67: gutter line numbers for lines that contain a search match — the current
-   match brightest, echoing the in-text highlight colours. */
-.file-viewer-gutter-line.has-match {
-  color: var(--text-primary);
-  background: rgba(255, 213, 0, 0.28);
-  border-radius: 2px;
+/* "Copy last" — the alternative to building a new item — reads as the accent
+   action it is, next to the plain new-entry builder. */
+.yaml-add-copy {
+  color: var(--accent, #4493f8);
+  border-color: color-mix(in srgb, var(--accent, #4493f8) 55%, transparent);
+}
+
+/* Copy → paste cursor. While an entry sits on the copy buffer the banner says
+   what is held (and is the mouse user's cancel), a row the paste fits after
+   advertises itself with the copy cursor, and the placed cursor row draws the
+   insertion line — the same accent line a reorder drag draws — plus the button
+   that lands the paste. */
+.yaml-clip-banner {
+  /* Pinned to the top of the scroller (`.file-viewer-body`) so it stays put
+     while you scroll a long file to the row you want to paste after — otherwise
+     it slides up among the entries and out of view before you get there. The
+     background must be OPAQUE (mixed over the panel, not transparent) so the
+     rows scrolling under it don't read through. */
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 6px;
+  padding: 3px 8px;
+  border: 1px solid color-mix(in srgb, var(--accent, #4493f8) 45%, transparent);
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--accent, #4493f8) 12%, var(--bg-panel));
+  font-size: 11px;
 }
-.file-viewer-gutter-line.current-match {
-  color: #1a1a1a;
-  background: rgba(255, 145, 0, 0.85);
-  border-radius: 2px;
-  font-weight: 600;
+
+.yaml-clip-banner .yaml-act {
+  margin-left: auto;
 }
 
-/* Hidden mirror that measures each logical line's wrapped height so the wrap-mode
-   gutter (LaTeX viewer) can size its cells to match. Shares the editor's font
+.yaml-row-pastable {
+  cursor: copy;
+}
+
+/* The hover PREVIEW of where a click would land the paste: a zero-height row
+   drawing the same accent line the placed cursor row does, right after the
+   hovered entry's whole block — the outcome is visible before the click, and
+   nothing below it shifts. */
+.yaml-paste-preview {
+  min-height: 0;
+  height: 0;
+  border: 0;
+  overflow: visible;
+}
+
+.yaml-paste-preview-line {
+  flex: 1;
+  height: 0;
+  border-top: 2px solid color-mix(in srgb, var(--accent, #4493f8) 65%, transparent);
+  margin-top: -1px;
+  pointer-events: none;
+}
+
+.yaml-cursor-row {
+  gap: 4px;
+  padding: 2px 0;
+  border-top-color: var(--accent, #4493f8);
+}
+
+.yaml-paste-here {
+  color: var(--accent, #4493f8);
+  border-color: color-mix(in srgb, var(--accent, #4493f8) 55%, transparent);
+}
+
+/* The `#` a commented row wears: visible without a hover, because a config file's
+   comments are the half of it worth reading. The comment itself is on the tooltip
+   (and on the key's), so the row stays the width of its data. */
+.yaml-note {
+  flex: none;
+  background: transparent;
+  border: 0;
+  padding: 0 2px;
+  color: var(--text-muted);
+  font: inherit;
+  opacity: 0.7;
+  cursor: pointer;
+}
+
+.yaml-note:hover {
+  color: var(--accent, #4493f8);
+  opacity: 1;
+}
+
+.yaml-comment-input {
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: 46ch;
+  background: var(--bg-panel);
+  color: var(--text-muted);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  padding: 0 4px;
+  font: inherit;
+  font-style: italic;
+}
+
+.yaml-comment-input:focus {
+  outline: none;
+  border-color: var(--accent, #4493f8);
+}
+
+.yaml-caret {
+  flex: none;
+  width: 14px;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  color: var(--text-muted);
+  font-size: 10px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.yaml-caret-empty {
+  cursor: default;
+}
+
+.yaml-key {
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  padding: 1px 2px;
+  color: var(--accent, #4493f8);
+  font: inherit;
+  cursor: text;
+  /* Sibling keys are padded to one column (see keyWidth in YamlTree), so the
+     key must hug its left edge for the values to land on a shared one. */
+  text-align: left;
+}
+
+.yaml-key:hover {
+  background: color-mix(in srgb, var(--accent, #4493f8) 14%, transparent);
+}
+
+.yaml-colon {
+  color: var(--text-muted);
+}
+
+.yaml-index {
+  flex: none;
+  min-width: 18px;
+  color: var(--text-muted);
+}
+
+.yaml-count {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  color: var(--text-muted);
+  font-size: 11px;
+}
+
+/* Flow (JSON) style marker on a container: what you are editing stays flow, so
+   the row says so. */
+.yaml-flow-tag {
+  color: var(--accent-secondary);
+  opacity: 0.85;
+  letter-spacing: -0.05em;
+}
+
+.yaml-key-input,
+.yaml-value-input {
+  background: var(--bg-panel);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  padding: 0 4px;
+  font: inherit;
+  min-width: 0;
+}
+
+/* A value reads as a value, not as a form field: the input keeps its box (so
+   focus/hover can restore it without a layout shift) but wears no chrome until
+   pointed at. Click-to-edit stays — it IS the input, just undressed. */
+.yaml-value-input {
+  flex: 1 1 auto;
+  /* No fixed cap: the value fills whatever room the row has to its right, so a
+     long value is never clipped inside a narrow box while the pane sits empty
+     beside it. It still shrinks (min-width: 0 above) when the pane is narrow. */
+  max-width: none;
+  background: transparent;
+  border-color: transparent;
+  cursor: text;
+}
+
+.yaml-value-input:hover:not(:focus) {
+  background: color-mix(in srgb, var(--accent, #4493f8) 10%, transparent);
+}
+
+/* A scalar-only list edited as one comma-separated line: it holds the whole
+   list, so it gets more room than a single value would. The wrap owns the width
+   and hosts the overflow chevrons; hovering one glides the content that way. */
+.yaml-list-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  flex: 1 1 auto;
+  min-width: 0;
+  /* No fixed cap: the comma-line list fills the room to its right rather than
+     stopping short and hiding entries behind the overflow chevrons while space
+     goes unused. The chevrons still appear if it genuinely overflows. */
+  max-width: none;
+}
+
+/* The input and its color mirror. The entries keep the value colors their own
+   rows would carry — an input cannot color parts of itself, so its text is
+   transparent (the caret is not) and the mirror on top repaints the same buffer
+   token by token, scroll-synced from the component. */
+.yaml-list-field {
+  position: relative;
+  display: inline-flex;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.yaml-list-field .yaml-list-input {
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: none;
+  color: transparent;
+  caret-color: var(--text-primary);
+}
+
+.yaml-list-mirror {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  border: 1px solid transparent; /* the input's box, so the glyphs land on its */
+  padding: 0 4px; /* exact pixels */
+  overflow: hidden;
+  white-space: pre;
+  pointer-events: none;
+}
+
+.yaml-list-chevron {
+  flex: none;
+  border: 0;
+  background: transparent;
+  color: var(--accent, #4493f8);
+  cursor: pointer;
+  padding: 0 2px;
+  font-size: 13px;
+  line-height: 1;
+}
+
+.yaml-list-chevron:disabled {
+  opacity: 0.25;
+  cursor: default;
+}
+
+.yaml-key-input:focus,
+.yaml-value-input:focus {
+  outline: none;
+  border-color: var(--accent, #4493f8);
+}
+
+/* Editing dresses the value back up as a field. */
+.yaml-value-input:focus {
+  background: var(--bg-panel);
+}
+
+/* Value colouring by YAML type, so a quoted "8080" reads differently from 8080.
+   Reuses the same semantic variables as the syntax tokens, so it adapts to every
+   theme with no per-theme additions (see .tok-* below). */
+.yaml-val-number { color: var(--warning); }
+.yaml-val-boolean { color: var(--accent-secondary); }
+.yaml-val-null { color: var(--text-muted); font-style: italic; }
+/* Strings get the string-token green (as in the syntax highlighter) rather than
+   the plain body colour, so a value reads as a value and doesn't disappear into
+   the surrounding text. */
+.yaml-val-string { color: var(--success); }
+.yaml-val-other { color: var(--success); }
+
+.yaml-value-locked {
+  color: var(--text-muted);
+  font-style: italic;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 46ch;
+}
+
+.yaml-block {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 4px;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.yaml-block-tag {
+  color: var(--text-muted);
+}
+
+.yaml-block-input {
+  flex: 1 1 auto;
+  max-width: 60ch;
+  resize: vertical;
+  background: transparent;
+  color: var(--text-primary);
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  padding: 2px 4px;
+  font: inherit;
+  cursor: text;
+}
+
+.yaml-block-input:hover:not(:focus) {
+  background: color-mix(in srgb, var(--accent, #4493f8) 10%, transparent);
+}
+
+.yaml-block-input:focus {
+  outline: none;
+  background: var(--bg-panel);
+  border-color: var(--accent, #4493f8);
+}
+
+.yaml-type {
+  background: var(--bg-panel);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  padding: 0 2px;
+  font: inherit;
+  cursor: pointer;
+}
+
+/* Row actions stay out of the way until the row is hovered — but never hide from
+   the keyboard, so tabbing through the tree reaches every one of them. */
+.yaml-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  opacity: 0;
+}
+
+/* The entry's own actions (# ⧉ ↑ ↓ ×) live in a FIXED gutter on the row's left —
+   one stable button column in front of the tree, whatever the row's depth. Every
+   row reserves its width via `rowPad` (YamlTree's GUTTER const, kept in step with
+   this one), so the buttons overlay reserved space, never the content. */
+.yaml-gutter {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 130px;
+  /* The left padding keeps the drag grip off the panel border. */
+  padding: 0 10px 0 8px;
+}
+
+/* Six FIXED slots (⠿ # ⧉ ↑ ↓ ×): an action a row doesn't offer is rendered as
+   an empty slot of the same width, so every button keeps its column on every
+   row and the pointer never chases a shifting target. */
+.yaml-gutter .yaml-act,
+.yaml-gutter .yaml-slot {
+  flex: none;
+  width: 18px;
+  padding: 0;
+  text-align: center;
+}
+
+.yaml-gutter .yaml-grip,
+.yaml-gutter .yaml-slot-grip {
+  flex: none;
+  width: 12px;
+}
+
+/* The add controls a collapsed/empty container keeps IN the row, next to what
+   they grow (an open container grows through its persistent add row instead). */
+.yaml-actions-row {
+  margin-left: auto;
+}
+
+.yaml-row:hover .yaml-actions,
+.yaml-actions:focus-within {
+  opacity: 1;
+}
+
+.yaml-act,
+.yaml-add {
+  background: transparent;
+  color: var(--text-muted);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  padding: 0 5px;
+  font-size: 10px;
+  line-height: 16px;
+  cursor: pointer;
+}
+
+.yaml-act:not(:disabled):hover,
+.yaml-add:not(:disabled):hover {
+  color: var(--text-primary);
+  border-color: var(--text-muted);
+}
+
+.yaml-act:disabled,
+.yaml-add:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.yaml-act-del:not(:disabled):hover {
+  color: var(--danger, #f85149);
+  border-color: var(--danger, #f85149);
+}
+
+.yaml-add-inline {
+  display: inline-flex;
+  gap: 2px;
+}
+
+/* The add-entry form and the empty-file seed row are always visible — they are
+   the affordance, not a hover action. */
+.yaml-row-add,
+.yaml-row-form {
+  gap: 4px;
+  padding: 2px 0;
+}
+
+.yaml-row-add .yaml-add {
+  opacity: 1;
+}
+
+/* "source only" keeps the old action cluster's spot and hover reveal — it is a
+   note about the row, not part of the gutter's buttons. */
+.yaml-locked {
+  color: var(--text-muted);
+  font-size: 10px;
+  font-style: italic;
+  margin-left: auto;
+  opacity: 0;
+}
+
+.yaml-row:hover .yaml-locked {
+  opacity: 1;
+}
+
+.yaml-tree-notice {
+  padding: 12px;
+  font-size: 12px;
+  color: var(--text-muted);
+  font-family: var(--font-sans, system-ui, sans-serif);
+}
+
+.yaml-tree-notice-hint {
+  margin-top: 4px;
+}
+
+/* YAML card grid (#yaml-grid) — the recursive, tree-like card view. The document is
+   one centred top card (or a row of them for a root list); every nested collection
+   is a card whose own nested collections are subcards in a grid below it, folding
+   from the header. Monospace like the tree so values read as data; it reuses the
+   tree's value colours (.yaml-val-*) and its .yaml-value-input / .yaml-add / .yaml-act
+   primitives, and each field edit splices the file text (see YamlGrid.tsx). */
+.yaml-cards {
+  padding: 8px 12px 24px;
+  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
+  font-size: 12px;
+  color: var(--text-primary);
+}
+
+/* A thin bar carrying only the untested tag today — a home for future view controls
+   (expand/collapse all, density). */
+.yaml-cards-bar {
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.yaml-cards-bar-spacer {
+  flex: 1 1 auto;
+}
+
+/* The centred top card (or root card list): a readable column that doesn't sprawl
+   the full width of a wide pane. */
+.yaml-card-root {
+  max-width: 1040px;
+  margin: 0 auto;
+}
+
+.yaml-card-root + .yaml-card-root {
+  margin-top: 12px;
+}
+
+.yaml-card {
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md, 8px);
+  background: var(--bg-panel);
+  overflow: hidden;
+}
+
+/* Depth-tinted left edge, so a subcard reads as nested inside its parent at a glance
+   (the guide-line colours cycle by depth, like the tree's indent guides). */
+.yaml-card-d0 { border-left: 2px solid var(--yaml-guide-0, var(--accent)); }
+.yaml-card-d1 { border-left: 2px solid var(--yaml-guide-1, var(--accent)); }
+.yaml-card-d2 { border-left: 2px solid var(--yaml-guide-2, var(--accent)); }
+.yaml-card-d3 { border-left: 2px solid var(--yaml-guide-3, var(--accent)); }
+.yaml-card-d4 { border-left: 2px solid var(--yaml-guide-0, var(--accent)); }
+.yaml-card-d5 { border-left: 2px solid var(--yaml-guide-1, var(--accent)); }
+/* The guide-line colours (mirrors .yaml-tree's), so subcard edges match the tree. */
+.yaml-cards {
+  --yaml-guide-0: color-mix(in srgb, var(--accent, #4493f8) 55%, transparent);
+  --yaml-guide-1: color-mix(in srgb, #a887e8 55%, transparent);
+  --yaml-guide-2: color-mix(in srgb, #4fc1a6 55%, transparent);
+  --yaml-guide-3: color-mix(in srgb, #d9a05b 55%, transparent);
+}
+
+/* The card header names the collection (its key or list index) + a folding toggle,
+   a flow badge, a key/item count, and the delete — chrome tinted apart from the body. */
+.yaml-card-head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 6px;
+  background: var(--bg-subtle, rgba(255, 255, 255, 0.03));
+  border-bottom: 1px solid var(--border-color);
+}
+
+/* The whole "caret + title" is one click target that folds the card. */
+.yaml-card-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1 1 auto;
+  min-width: 0;
+  background: transparent;
+  border: 0;
+  padding: 1px 2px;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  text-align: left;
+}
+
+.yaml-card-caret {
+  flex: none;
+  width: 12px;
+  color: var(--text-muted);
+}
+
+.yaml-card-title {
+  color: var(--text-primary);
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.yaml-card-badge {
+  flex: none;
+  color: var(--text-muted);
+  font-size: 10px;
+  white-space: nowrap;
+}
+
+/* The × keeps its slot but only paints on card-header hover, so it isn't furniture. */
+.yaml-card-del,
+.yaml-card-field-del {
+  flex: none;
+  opacity: 0;
+}
+
+.yaml-card-head:hover .yaml-card-del,
+.yaml-card-del:focus-visible,
+.yaml-card-field:hover .yaml-card-field-del,
+.yaml-card-field-del:focus-visible {
+  opacity: 1;
+}
+
+.yaml-card-body {
+  padding: 4px 4px 6px;
+}
+
+.yaml-card-fields {
+  display: flex;
+  flex-direction: column;
+}
+
+/* A field row: a key column on the left, the editable value filling the rest, and a
+   hover-delete — the label/value pairing that makes a record read as a record. */
+.yaml-card-field {
+  display: grid;
+  grid-template-columns: minmax(0, 9em) 1fr auto;
+  align-items: center;
+  gap: 6px;
+  padding: 1px 4px;
+}
+
+.yaml-card-field-scalar {
+  grid-template-columns: 1fr auto;
+}
+
+.yaml-card-key {
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* A list value's label is a bullet, not an index — a value list reads as a list. */
+.yaml-card-bullet {
+  color: var(--accent, #4493f8);
+  text-align: center;
+  opacity: 0.7;
+}
+
+/* The value input fills its column with no chrome until pointed at — the same
+   undressed-field bargain the tree's values strike. */
+.yaml-card-field .yaml-value-input {
+  display: block;
+  width: 100%;
+  border-color: transparent;
+  padding: 2px 4px;
+}
+
+.yaml-card-field .yaml-value-input:hover:not(:focus) {
+  background: color-mix(in srgb, var(--accent, #4493f8) 10%, transparent);
+}
+
+.yaml-card-field .yaml-value-input:focus {
+  background: var(--bg-panel);
+  border-color: var(--accent, #4493f8);
+}
+
+.yaml-card-field .yaml-value-locked {
+  display: block;
+  padding: 2px 4px;
+  max-width: 100%;
+}
+
+/* Subcards laid out in COLUMNS below the parent's fields — a responsive auto-fill
+   grid, so a list of records becomes a wall of cards and a heterogeneous set wraps. */
+.yaml-subcards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 8px;
+  align-items: start;
+  margin-top: 6px;
+}
+
+/* At the very top, a root list's cards get a touch more room to breathe. */
+.yaml-subcards-root {
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 10px;
+  margin-top: 0;
+}
+
+/* A bare-scalar list item card: value only, no fields grid. */
+.yaml-card-scalar .yaml-card-body {
+  padding: 4px;
+}
+
+.yaml-card-add {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 6px 4px 0;
+}
+
+/* Drag-to-reorder (pointer-based, like the tree's grip): the grip appears on the
+   card header's hover but keeps its width always, so no header shifts when it does. */
+.yaml-card-grip {
+  flex: none;
+  cursor: grab;
+  opacity: 0;
+  touch-action: none; /* the pointer drag owns the gesture, not the scroller */
+}
+
+.yaml-card-head:hover .yaml-card-grip,
+.yaml-card-grip:focus-visible {
+  opacity: 1;
+}
+
+/* The card being dragged lifts and dims; the card it would land on rings in accent;
+   a card that can't be a target (locked) fades to show the drop won't land there. */
+.yaml-card-dragging {
+  opacity: 0.5;
+}
+
+.yaml-card-dragging .yaml-card-grip {
+  cursor: grabbing;
+}
+
+.yaml-card-drop {
+  outline: 2px solid var(--accent, #4493f8);
+  outline-offset: 1px;
+}
+
+.yaml-card-blocked {
+  opacity: 0.4;
+}
+
+/* ── Drill navigation (#yaml-grid) ────────────────────────────────────────────
+   The grid is a drill: a breadcrumb path, the main card's level (siblings, it
+   highlighted), and its children as the level below. Each level is an equal-height
+   grid; a card with more fields than fit scrolls inside itself. */
+.yaml-grid-breadcrumb {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 2px;
+  min-width: 0;
+  font-size: 11px;
+}
+
+.yaml-crumb-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+}
+
+.yaml-crumb-sep {
+  color: var(--text-muted);
+  opacity: 0.6;
+}
+
+.yaml-crumb {
+  max-width: 16em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background: transparent;
+  border: 0;
+  padding: 2px 6px;
+  border-radius: 5px;
+  color: var(--text-muted);
+  font: inherit;
+  cursor: pointer;
+}
+
+.yaml-crumb:hover {
+  background: color-mix(in srgb, var(--accent, #4493f8) 12%, transparent);
+  color: var(--text-primary);
+}
+
+.yaml-crumb.on {
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+.yaml-level {
+  margin-top: 10px;
+}
+
+.yaml-level:first-of-type {
+  margin-top: 4px;
+}
+
+/* Each deeper level is inset a touch and rail-marked, so the drill reads as a
+   descent even though every level is a full-width grid. */
+.yaml-level + .yaml-level {
+  margin-left: 12px;
+  padding-left: 10px;
+  border-left: 2px solid var(--yaml-guide-0, var(--accent));
+}
+
+.yaml-level-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 8px;
+  align-items: start;
+}
+
+/* A level card is a fixed-height flex column (height set inline from the level's
+   measured max): head + a scrolling field area + the add bar + the drill footer. */
+.yaml-level-card {
+  display: flex;
+  flex-direction: column;
+}
+
+.yaml-card-scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 4px 4px 2px;
+}
+
+.yaml-card-empty {
+  padding: 6px 4px;
+  color: var(--text-muted);
+  font-style: italic;
+  opacity: 0.7;
+}
+
+/* The card the drill is currently on: ringed and lifted so it reads as "main"
+   among its siblings. */
+.yaml-card-main {
+  border-color: var(--accent, #4493f8);
+  box-shadow: 0 0 0 1px var(--accent, #4493f8);
+}
+
+.yaml-card-main .yaml-card-head {
+  background: color-mix(in srgb, var(--accent, #4493f8) 16%, transparent);
+}
+
+/* A non-drillable card's title isn't a button — keep it aligned with the ones
+   that are. */
+.yaml-card-title-static {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 1px 2px;
+}
+
+/* The footer that opens a card's nested groups as the next level. */
+.yaml-card-drill {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 4px 6px;
+  border: 0;
+  border-top: 1px solid var(--border-color);
+  background: var(--bg-subtle, rgba(255, 255, 255, 0.03));
+  color: var(--accent, #4493f8);
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.yaml-card-drill:hover {
+  background: color-mix(in srgb, var(--accent, #4493f8) 14%, transparent);
+}
+
+/* "No LaTeX engine — install one" prompt in the TeX viewer's no-engine state.
+   Mirrors the install-cmd rows used in the Ollama/Agents settings panels. */
+.tex-install-banner {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 8px 12px;
+  font-size: 12px;
+  border-bottom: 1px solid var(--border, #30363d);
+  background: var(--bg-subtle, rgba(255, 255, 255, 0.03));
+}
+
+.tex-install-banner-text {
+  color: var(--text-muted);
+}
+
+.tex-install-banner .ollama-install-cmd {
+  flex: 1 1 240px;
+  min-width: 0;
+}
+
+/* OpenDocument Text viewer (#51): a scrolling, theme-coloured reading surface for
+   the HTML subset rendered from content.xml. A centred max-width column keeps
+   prose readable; tables and images stay within it. */
+.odt-viewer-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  background: var(--bg-panel);
+  color: var(--text-primary);
+}
+
+.odt-document {
+  max-width: 48rem;
+  margin: 0 auto;
+  padding: 28px 32px 56px;
+  line-height: 1.6;
+  font-size: 14px;
+}
+
+.odt-document h1,
+.odt-document h2,
+.odt-document h3,
+.odt-document h4,
+.odt-document h5,
+.odt-document h6 {
+  line-height: 1.25;
+  margin: 1.4em 0 0.5em;
+  font-weight: 600;
+}
+
+.odt-document p {
+  margin: 0 0 0.8em;
+  white-space: pre-wrap;
+}
+
+.odt-document a {
+  color: var(--accent, #3b82f6);
+  text-decoration: underline;
+}
+
+.odt-document ul,
+.odt-document ol {
+  margin: 0 0 0.8em 1.5em;
+  padding: 0;
+}
+
+.odt-image {
+  max-width: 100%;
+  height: auto;
+}
+
+.odt-table {
+  border-collapse: collapse;
+  margin: 0 0 1em;
+  font-size: 13px;
+}
+
+.odt-table td {
+  border: 1px solid var(--border-color);
+  padding: 4px 8px;
+  vertical-align: top;
+}
+
+/* Code editor: a line-number gutter beside a scrolling monospace textarea. The
+   gutter is scroll-synced from JS (file-viewer-gutter has no scrollbar), so the
+   body must not scroll — the textarea owns the scroll. Font metrics (size 12px,
+   line-height 18px, 10px top padding) are shared so the numbers stay aligned. */
+.file-viewer-code-body {
+  overflow: hidden;
+}
+
+.file-viewer-code {
+  position: relative;
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  /* Editor font metrics. Defaults match the shared 12px/18px layout; the text
+     size control overrides these inline so the gutter + overlay layers scale
+     together and stay aligned. */
+  --code-font-size: 12px;
+  --code-line-height: 18px;
+}
+
+.file-viewer-gutter {
+  flex-shrink: 0;
+  overflow: hidden;
+  padding: 10px 8px 10px 10px;
+  text-align: right;
+  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+  font-size: var(--code-font-size, 12px);
+  line-height: var(--code-line-height, 18px);
+  color: var(--text-muted);
+  background: var(--bg-panel);
+  border-right: 1px solid var(--border-color);
+  user-select: none;
+  font-variant-numeric: tabular-nums;
+}
+
+/* The line numbers are translated as a block to follow the textarea's vertical
+   scroll (see syncScroll); the gutter itself stays put and clips them. */
+.file-viewer-gutter-inner {
+  will-change: transform;
+}
+
+.file-viewer-gutter-line {
+  height: var(--code-line-height, 18px);
+}
+
+/* #67: gutter line numbers for lines that contain a search match — the current
+   match brightest, echoing the in-text highlight colours. */
+.file-viewer-gutter-line.has-match {
+  color: var(--text-primary);
+  background: rgba(255, 213, 0, 0.28);
+  border-radius: 2px;
+}
+.file-viewer-gutter-line.current-match {
+  color: #1a1a1a;
+  background: rgba(255, 145, 0, 0.85);
+  border-radius: 2px;
+  font-weight: 600;
+}
+
+/* #py: a breakpoint-capable gutter (the Python editor). The cell becomes a real
+   <button>, so it has to be stripped back to looking exactly like the plain
+   number it replaces — same metrics, same colour — and only then gain its
+   affordances. Everything below is either a reset or a hover/active state. */
+.file-viewer-gutter-line.is-breakable {
+  display: block;
+  position: relative;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  cursor: pointer;
+}
+
+/* The dot lives in the gutter's left padding, clear of the numbers. Shown faint
+   on hover so the column advertises what a click does, solid once set. */
+.file-viewer-gutter-line.is-breakable::before {
+  content: "";
+  position: absolute;
+  left: -7px;
+  top: 50%;
+  width: 8px;
+  height: 8px;
+  transform: translateY(-50%);
+  border-radius: 50%;
+  background: #e5484d;
+  opacity: 0;
+  transition: opacity var(--transition);
+}
+.file-viewer-gutter-line.is-breakable:hover::before {
+  opacity: 0.35;
+}
+.file-viewer-gutter-line.has-breakpoint::before,
+.file-viewer-gutter-line.has-breakpoint:hover::before {
+  opacity: 1;
+}
+.file-viewer-gutter-line.has-breakpoint {
+  color: #e5484d;
+  font-weight: 600;
+}
+.file-viewer-gutter-line.is-breakable:focus-visible {
+  outline: 1px solid var(--accent-color);
+  outline-offset: -1px;
+}
+
+/* Hidden mirror that measures each logical line's wrapped height so the wrap-mode
+   gutter (LaTeX viewer) can size its cells to match. Shares the editor's font
    metrics, padding and wrap rules; its width is set inline to the textarea's
    content width. Never painted — visibility:hidden keeps it laid out. */
 .file-viewer-gutter-measure {
@@ -1639,14 +3324,14 @@ select option {
   margin-top: -8px;
   max-width: 320px;
   padding: 6px 9px;
-  border-radius: 6px;
+  border-radius: var(--radius);
   background: var(--bg-main, #1f2430);
   color: var(--text-primary);
   border: 1px solid var(--border-color);
   border-left: 3px solid var(--border-color);
   font-size: 11px;
   line-height: 1.45;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
+  box-shadow: var(--shadow-2);
 }
 .file-viewer-grammar-tip.cat-spelling { border-left-color: #f85149; }
 .file-viewer-grammar-tip.cat-grammar { border-left-color: #4493f8; }
@@ -1665,7 +3350,7 @@ select option {
   display: inline-block;
   max-width: 100%;
   padding: 2px 8px;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   border: 1px solid var(--border-color);
   background: var(--bg-panel);
   color: var(--text-primary);
@@ -1763,14 +3448,14 @@ select option {
   margin-top: -8px;
   max-width: 360px;
   padding: 6px 9px;
-  border-radius: 6px;
+  border-radius: var(--radius);
   background: var(--bg-main, #1f2430);
   color: var(--text-primary);
   border: 1px solid var(--border-color);
   border-left: 3px solid var(--accent, #4493f8);
   font-size: 11px;
   line-height: 1.45;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
+  box-shadow: var(--shadow-2);
   pointer-events: none;
 }
 .file-viewer-blame-tip-head {
@@ -1865,6 +3550,14 @@ select option {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+/* Body + its overlay ruler share one relatively-positioned wrapper so the ruler
+   can pin to the scrollbar edge. */
+.file-viewer-compare-col-body-wrap {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+}
 .file-viewer-compare-col-body {
   flex: 1 1 auto;
   min-height: 0;
@@ -1873,41 +3566,249 @@ select option {
   font-size: 12px;
   line-height: 1.5;
 }
-.file-viewer-compare-line {
-  display: flex;
-  white-space: pre;
+.file-viewer-compare-line {
+  position: relative;
+  display: flex;
+  white-space: pre;
+}
+.file-viewer-compare-line.is-block-start {
+  scroll-margin-top: 36px; /* keep ~2 lines of leading context above the hunk */
+}
+.file-viewer-compare-lno {
+  flex: 0 0 auto;
+  width: 3em;
+  padding-right: 0.5em;
+  text-align: right;
+  color: var(--text-muted);
+  opacity: 0.7;
+  user-select: none;
+}
+.file-viewer-compare-code {
+  flex: 1 1 auto;
+  padding-left: 0.5em;
+}
+/* The middle result is an editable textarea seeded from the merge — but rendered
+   like the two side columns: a syntax-highlighted backdrop (`-result-hl`) paints
+   the colored text, and the textarea sits transparently on top of it (its own
+   text hidden, only caret + selection visible) so editing stays live while the
+   result reads in color instead of flat monochrome. Backdrop and textarea MUST
+   share identical font/padding/line-height or the caret drifts off the glyphs. */
+.file-viewer-compare-col-mid .file-viewer-compare-col-head {
+  flex-wrap: wrap;
+}
+.file-viewer-compare-result-wrap {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+.file-viewer-compare-result-hl {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  padding: 0 0.5em;
+  background: var(--bg-panel);
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre;
+  pointer-events: none;
+}
+.file-viewer-compare-hl-line {
+  min-height: 1.5em;
+}
+/* Changed lines in the middle result: tinted the same blue as the mid ruler
+   marks, but brighter and low-opacity so the syntax colors still read through. */
+.file-viewer-compare-hl-line.changed {
+  background: rgba(88, 166, 255, 0.16);
+  box-shadow: inset 2px 0 0 rgba(88, 166, 255, 0.7);
+}
+.file-viewer-compare-result {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  resize: none;
+  border: 0;
+  outline: none;
+  padding: 0 0.5em;
+  background: transparent;
+  color: transparent;
+  caret-color: var(--text-primary);
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre;
+}
+.file-viewer-compare-result::selection {
+  background: var(--accent, #4493f8);
+  color: #fff;
+}
+
+/* Per-hunk take arrows live in an overlay layer that spans the column body and
+   is clipped to it; only the buttons take pointer events so the text underneath
+   stays selectable and the scrollbar still drags. */
+.file-viewer-compare-take-layer {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 4;
+}
+.file-viewer-compare-take-layer.left {
+  /* leave the scrollbar/ruler edge clear; arrows hug the inner (result) edge */
+  right: 6px;
+}
+.file-viewer-compare-take-layer.right {
+  left: 0;
+}
+/* Inner layer the arrows are pinned to; translated by the body's scrollTop in a
+   ref-driven handler (never React state) so scrolling doesn't re-render lines. */
+.file-viewer-compare-take-scroll {
+  position: absolute;
+  inset: 0;
+  will-change: transform;
+}
+/* The button itself: a bold, colored pill pinned to the column's inner edge —
+   left column pushes toward the result on the right, right column on its left.
+   Colored by side (left = restore old/reject = warm, right = keep new/accept =
+   green); a solid fill marks the side currently chosen for that hunk. */
+.file-viewer-compare-take {
+  position: absolute;
+  pointer-events: auto;
+  cursor: pointer;
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 0 7px;
+  border: 1px solid;
+  border-radius: 9px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+  user-select: none;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
+  transition:
+    background 0.1s,
+    transform 0.06s;
+}
+.file-viewer-compare-take:hover {
+  transform: scale(1.06);
+}
+.file-viewer-compare-take:active {
+  transform: scale(0.97);
+}
+.file-viewer-compare-take.left {
+  right: 0;
+}
+.file-viewer-compare-take.right {
+  left: 6px;
+}
+/* Idle: tinted outline pill in the side's color. */
+.file-viewer-compare-take.left {
+  border-color: rgba(248, 81, 73, 0.65);
+  background: rgba(248, 81, 73, 0.14);
+  color: #f85149;
+}
+.file-viewer-compare-take.right {
+  border-color: rgba(63, 185, 80, 0.65);
+  background: rgba(63, 185, 80, 0.14);
+  color: #3fb950;
+}
+/* Chosen side: solid fill, white text — reads as "this is what the result holds". */
+.file-viewer-compare-take.left.active {
+  background: #f85149;
+  border-color: #f85149;
+  color: #fff;
+}
+.file-viewer-compare-take.right.active {
+  background: #3fb950;
+  border-color: #3fb950;
+  color: #fff;
+}
+/* Sync-merge mode: the two sides are the local mirror (left) and the remote host
+   (right), so the take arrows take the local/remote locality-tag colors —
+   green (--success) on the left, amber (--warning) on the right — instead of the
+   git-compare red/green (old/new). */
+.file-viewer-compare.sync .file-viewer-compare-take.left {
+  border-color: color-mix(in srgb, var(--success) 65%, transparent);
+  background: color-mix(in srgb, var(--success) 14%, transparent);
+  color: var(--success);
+}
+.file-viewer-compare.sync .file-viewer-compare-take.right {
+  border-color: color-mix(in srgb, var(--warning) 65%, transparent);
+  background: color-mix(in srgb, var(--warning) 14%, transparent);
+  color: var(--warning);
+}
+.file-viewer-compare.sync .file-viewer-compare-take.left.active {
+  background: var(--success);
+  border-color: var(--success);
+  color: #000;
+}
+.file-viewer-compare.sync .file-viewer-compare-take.right.active {
+  background: var(--warning);
+  border-color: var(--warning);
+  color: #000;
+}
+.file-viewer-compare-take.disabled {
+  opacity: 0.3;
+  cursor: default;
+  box-shadow: none;
+}
+.file-viewer-compare-take.disabled:hover {
+  transform: none;
+}
+
+/* Overview ruler: a thin strip over each column's scrollbar edge with one bar per
+   change block (row-fraction placement keeps the three columns' bars aligned).
+   pointer-events:none so the native scrollbar underneath still drags. */
+.file-viewer-compare-ruler {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 5px;
+  height: 100%;
+  z-index: 3;
+  pointer-events: none; /* strip is inert; only the bars react, so the scrollbar drags between them */
+}
+.file-viewer-compare-result-wrap .file-viewer-compare-ruler {
+  right: 1px;
+}
+.file-viewer-compare-ruler-mark {
+  position: absolute;
+  right: 0;
+  width: 100%;
+  min-height: 2px;
+  border-radius: 1px;
+  opacity: 0.8;
+}
+.file-viewer-compare-ruler-mark.clickable {
+  pointer-events: auto;
+  cursor: pointer;
+}
+.file-viewer-compare-ruler-mark.clickable:hover {
+  opacity: 1;
+  /* widen a touch on hover so a thin bar is easy to hit */
+  width: 220%;
+  right: 0;
 }
-.file-viewer-compare-lno {
-  flex: 0 0 auto;
-  width: 3em;
-  padding-right: 0.5em;
-  text-align: right;
-  color: var(--text-muted);
-  opacity: 0.7;
-  user-select: none;
+.file-viewer-compare-ruler-mark.left {
+  background: #f85149;
 }
-.file-viewer-compare-code {
-  flex: 1 1 auto;
-  padding-left: 0.5em;
+.file-viewer-compare-ruler-mark.right {
+  background: #3fb950;
 }
-/* The middle result is a plain editable textarea seeded from the merge. */
-.file-viewer-compare-col-mid .file-viewer-compare-col-head {
-  flex-wrap: wrap;
+.file-viewer-compare-ruler-mark.mid {
+  background: var(--accent, #4493f8);
 }
-.file-viewer-compare-result {
-  flex: 1 1 auto;
-  min-height: 0;
-  width: 100%;
-  resize: none;
-  border: 0;
-  outline: none;
-  padding: 0 0.5em;
-  background: var(--bg-panel);
-  color: var(--text-primary);
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
-  font-size: 12px;
-  line-height: 1.5;
-  white-space: pre;
+/* Sync merge: the side rulers take the local/remote locality-tag colors, matching
+   the take arrows and side-line tints (git-compare keeps red/green old/new). */
+.file-viewer-compare.sync .file-viewer-compare-ruler-mark.left {
+  background: var(--success);
+}
+.file-viewer-compare.sync .file-viewer-compare-ruler-mark.right {
+  background: var(--warning);
 }
 /* Per-change chips: accept (keep new) is accent, reject (restore old) is warm;
    a hand-edited, un-anchorable change is dimmed and non-interactive. */
@@ -1918,7 +3819,7 @@ select option {
 }
 .file-viewer-compare-chip {
   cursor: pointer;
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   padding: 0 5px;
   font-size: 10px;
   border: 1px solid var(--border-color);
@@ -2068,7 +3969,7 @@ select option {
   transform: translateY(-100%);
   margin-top: -6px;
   padding: 2px 7px;
-  border-radius: 5px;
+  border-radius: var(--radius-sm);
   background: var(--bg-main, #1f2430);
   color: var(--text-primary);
   border: 1px solid var(--border-color);
@@ -2076,7 +3977,7 @@ select option {
   line-height: 1.4;
   white-space: nowrap;
   pointer-events: none;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
+  box-shadow: var(--shadow-2);
 }
 
 /* #67 in-editor find bar: a small floating toolbar pinned to the editor's
@@ -2090,10 +3991,10 @@ select option {
   flex-direction: column;
   gap: 4px;
   padding: 4px 6px;
-  background: var(--bg-panel);
+  background: var(--bg-elevated);
   border: 1px solid var(--border-color);
-  border-radius: 6px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-2);
 }
 .file-viewer-find-row {
   display: flex;
@@ -2105,7 +4006,7 @@ select option {
   background: transparent;
   color: var(--text-muted);
   border: 1px solid transparent;
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   padding: 1px 4px;
   font-size: 11px;
   line-height: 1.2;
@@ -2121,7 +4022,7 @@ select option {
   background: var(--bg-base, var(--bg-main, var(--bg-panel)));
   color: var(--text-primary);
   border: 1px solid var(--border-color);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   padding: 2px 6px;
   font-size: 12px;
   width: 150px;
@@ -2137,7 +4038,7 @@ select option {
   background: transparent;
   color: var(--text-muted);
   border: 1px solid transparent;
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   padding: 1px 6px;
   font-size: 12px;
   line-height: 1.2;
@@ -2166,10 +4067,10 @@ select option {
   max-width: 460px;
   max-height: 260px;
   overflow-y: auto;
-  background: var(--bg-panel);
+  background: var(--bg-elevated);
   border: 1px solid var(--border-color);
-  border-radius: 6px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-2);
   font-size: 12px;
 }
 .file-viewer-tex-compl-item {
@@ -2177,7 +4078,7 @@ select option {
   align-items: baseline;
   gap: 8px;
   padding: 3px 8px;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   white-space: nowrap;
 }
@@ -2286,8 +4187,8 @@ select option {
      theme. */
   background: var(--bg-panel, #1c2128);
   border: 1px solid var(--border-color);
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-2);
   pointer-events: none;
 }
 
@@ -2308,8 +4209,8 @@ select option {
   color: var(--text-primary);
   background: var(--bg-panel, #1c2128);
   border: 1px solid var(--border-color);
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-2);
   pointer-events: none;
 }
 
@@ -2349,7 +4250,7 @@ select option {
      #1c2128 — unreadable on light themes. Use the defined panel token. */
   background: var(--bg-panel, #1c2128);
   border: 1px solid var(--border-color);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   opacity: 0.75;
 }
@@ -2369,7 +4270,7 @@ select option {
   color: var(--text-primary);
   background: var(--bg-panel, #1c2128);
   border: 1px solid var(--border-color);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2387,7 +4288,7 @@ select option {
   color: var(--text-secondary, var(--text-primary));
   background: transparent;
   border: none;
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
 }
 .file-viewer-ac-context-chip > button:hover {
@@ -2423,7 +4324,7 @@ select option {
   background: transparent;
   color: var(--text-muted);
   border: 1px solid var(--border-color);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   padding: 1px 6px;
   font-size: 11px;
   line-height: 1;
@@ -2450,7 +4351,7 @@ select option {
   background: transparent;
   color: var(--accent, #4493f8);
   border: 1px solid var(--border-color);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   padding: 1px 8px;
   font-size: 11px;
   cursor: pointer;
@@ -2478,7 +4379,7 @@ select option {
   background: var(--bg-base, var(--bg-panel));
   color: var(--text-primary);
   border: 1px solid var(--border-color);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   padding: 2px 6px;
   font-size: 11px;
   min-width: 160px;
@@ -2494,7 +4395,7 @@ select option {
   background: transparent;
   color: var(--text-muted);
   border: 1px solid var(--border-color);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   padding: 1px 8px;
   font-size: 10px;
   cursor: pointer;
@@ -2533,7 +4434,7 @@ select option {
   color: var(--text-primary);
   background: var(--bg-secondary, var(--bg-primary));
   border: 1px solid var(--border, #444);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
 .viewer-pref-mode:disabled { opacity: 0.5; }
 
@@ -2662,7 +4563,7 @@ select option {
   align-items: center;
   border: none;
   border-bottom: 1px solid var(--border-color);
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   box-shadow: none;
   background: var(--bg-panel);
   flex-shrink: 0;
@@ -2700,7 +4601,7 @@ select option {
   display: block;
   max-width: 100%;
   background: #fff;
-  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
+  box-shadow: var(--shadow-2);
 }
 
 /* LaTeX viewer: a compile toolbar above a source-editor | PDF-preview split.
@@ -2712,7 +4613,7 @@ select option {
   background: var(--accent, #4493f8);
   color: var(--accent-contrast);
   border: 0;
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   padding: 2px 10px;
   font-size: 11px;
   cursor: pointer;
@@ -2900,7 +4801,7 @@ select option {
   background: transparent;
   color: var(--text-muted);
   border: 1px solid var(--border-color);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   padding: 1px 6px;
   font-size: 10px;
   cursor: pointer;
@@ -2925,7 +4826,7 @@ select option {
   text-align: left;
   background: transparent;
   border: 1px solid transparent;
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   padding: 2px 6px;
   cursor: pointer;
   color: var(--text-primary);
@@ -2956,7 +4857,7 @@ select option {
   padding: 8px;
   background: var(--bg-input, var(--bg-panel));
   border: 1px solid var(--border-color);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
   font-size: 11px;
   line-height: 1.45;
@@ -2988,9 +4889,37 @@ select option {
   letter-spacing: -0.01em;
 }
 
-.markdown-body h1 { font-size: 1.8em; border-bottom: 1px solid var(--border-color); padding-bottom: 0.3em; }
-.markdown-body h2 { font-size: 1.45em; border-bottom: 1px solid var(--border-color); padding-bottom: 0.25em; }
+/* h1/h2 lean on the theme's two signature hues (same pairing the settings
+   dialog uses for its title vs. section headings) instead of plain
+   --text-primary, so a document's structure reads at a glance; the
+   underlines fade out via the accent color itself rather than a flat
+   --border-color rule, echoing the accent-tinted borders used across the
+   rest of the glass chrome. h3+ stay text-colored (too many accent tiers
+   reads as noise) but pick up a small accent marker instead. */
+.markdown-body h1 {
+  font-size: 1.8em;
+  color: var(--accent);
+  border-bottom: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
+  padding-bottom: 0.3em;
+}
+.markdown-body h2 {
+  font-size: 1.45em;
+  color: var(--accent-secondary, var(--accent));
+  border-bottom: 1px solid color-mix(in srgb, var(--accent-secondary, var(--accent)) 35%, transparent);
+  padding-bottom: 0.25em;
+}
 .markdown-body h3 { font-size: 1.2em; }
+.markdown-body h3::before {
+  content: "";
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  margin-right: 0.55em;
+  margin-bottom: 0.1em;
+  border-radius: 50%;
+  background: var(--accent);
+  vertical-align: middle;
+}
 .markdown-body h4 { font-size: 1.05em; }
 .markdown-body h5 { font-size: 0.95em; }
 .markdown-body h6 { font-size: 0.9em; color: var(--text-muted); }
@@ -3000,24 +4929,29 @@ select option {
 .markdown-body a { color: var(--accent, #4493f8); text-decoration: none; }
 .markdown-body a:hover { text-decoration: underline; }
 
-.markdown-body strong { font-weight: 650; }
+.markdown-body strong { font-weight: 650; color: var(--text-primary); }
 
 .markdown-body code {
   font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
   font-size: 0.88em;
-  background: var(--bg-input, rgba(127, 127, 127, 0.15));
+  color: var(--accent-secondary, var(--accent));
+  background: color-mix(in srgb, var(--accent-secondary, var(--accent)) 12%, var(--bg-input, rgba(127, 127, 127, 0.15)));
   padding: 0.12em 0.35em;
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
 }
 
 .markdown-body pre {
   position: relative;
   background: var(--bg-input, rgba(127, 127, 127, 0.12));
   border: 1px solid var(--border-color);
-  border-radius: 6px;
+  border-radius: var(--radius);
   padding: 11px 13px;
   overflow-x: auto;
   margin: 0.8em 0;
+  /* A faint top accent rail — enough to tie code blocks into the same
+     accent language as the headings/tables without competing with the
+     syntax-highlighted content inside. */
+  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--accent) 30%, transparent);
 }
 
 /* Language label on fenced code blocks (set from the info string). */
@@ -3041,6 +4975,10 @@ select option {
 }
 
 .markdown-body pre code {
+  /* Undo the inline-code accent tint above — this is the syntax-highlighted
+     case (.tok-* spans set their own colors) and a flat accent color here
+     would wash out over every un-highlighted token. */
+  color: var(--text-primary);
   background: none;
   padding: 0;
   font-size: 0.85em;
@@ -3049,8 +4987,10 @@ select option {
 
 .markdown-body blockquote {
   margin: 0.8em 0;
-  padding: 0.1em 0.95em;
+  padding: 0.35em 0.95em;
   border-left: 3px solid var(--accent, var(--border-color));
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+  background: color-mix(in srgb, var(--accent) 6%, transparent);
   color: var(--text-muted);
 }
 
@@ -3079,13 +5019,20 @@ select option {
 
 .markdown-body hr {
   border: 0;
-  border-top: 1px solid var(--border-color);
+  height: 1px;
   margin: 1.4em 0;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--accent) 45%, var(--border-color)) 20%,
+    color-mix(in srgb, var(--accent) 45%, var(--border-color)) 80%,
+    transparent
+  );
 }
 
 .markdown-body img {
   max-width: 100%;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
 
 /* Tables: rounded frame, header tint, zebra striping. */
@@ -3095,9 +5042,10 @@ select option {
   margin: 0.9em 0;
   width: auto;
   max-width: 100%;
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
+  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border-color));
+  border-radius: var(--radius);
   overflow: hidden;
+  box-shadow: var(--shadow-1);
 }
 
 .markdown-body th,
@@ -3107,15 +5055,21 @@ select option {
 }
 
 .markdown-body thead th {
-  background: var(--bg-secondary, rgba(127, 127, 127, 0.16));
+  background: color-mix(in srgb, var(--accent) 14%, var(--bg-secondary, rgba(127, 127, 127, 0.16)));
+  color: var(--text-primary);
   font-weight: 650;
   text-align: left;
+  border-bottom: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
 }
 
 .markdown-body tbody tr:nth-child(even) {
   background: var(--bg-input, rgba(127, 127, 127, 0.07));
 }
 
+.markdown-body tbody tr:hover {
+  background: color-mix(in srgb, var(--accent) 8%, transparent);
+}
+
 /* GitHub alert callouts (> [!NOTE] / [!TIP] / [!IMPORTANT] / [!WARNING] / [!CAUTION]).
    Theme-safe: a coloured left rail + tinted title, neutral background, so no
    color-mix is needed (avoids the WebKitGTK color-mix caveat). */
@@ -3123,7 +5077,7 @@ select option {
   margin: 0.9em 0;
   padding: 0.5em 0.95em;
   border-left: 4px solid var(--border-color);
-  border-radius: 0 5px 5px 0;
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
   background: var(--bg-input, rgba(127, 127, 127, 0.08));
 }
 .markdown-body .md-alert > :first-child { margin-top: 0; }
@@ -3182,7 +5136,7 @@ select option {
   position: relative;
   z-index: 4;
   background: var(--control-border);
-  transition: background-color 0.12s;
+  transition: background-color var(--transition);
 }
 .split-divider-row {
   width: 5px;
@@ -3213,13 +5167,13 @@ select option {
   width: 20px;
   height: 20px;
   padding: 0;
-  border-radius: 6px;
+  border-radius: var(--radius);
   border: 1px solid var(--control-border);
   background: var(--bg-panel);
   color: var(--text-muted);
   cursor: pointer;
   opacity: 0.55;
-  transition: opacity 0.12s, color 0.12s, background-color 0.12s, border-color 0.12s;
+  transition: opacity var(--transition), color var(--transition), background-color var(--transition), border-color var(--transition);
 }
 .split-divider:hover .split-scroll-link-btn {
   opacity: 1;
@@ -3253,6 +5207,19 @@ select option {
   flex: 1;
   min-height: 0;
   overflow: hidden;
+  /* Row: the measured pane region + (optionally) the docked file-viewer
+     column on the right. With no sidebar the region simply fills the body. */
+  display: flex;
+}
+
+/* The pane region: what the pane layer measures/overlays (main window) or
+   directly holds (popout). Shrinks when the group's file-viewer column is
+   open, so panes never cover the sidebar. */
+.subwindow-pane-region {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
 }
 
 /* Empty measured slot the pane layer positions panes over. */
@@ -3261,6 +5228,37 @@ select option {
   inset: 0;
 }
 
+/* Per-subwindow right file viewer (◫): a docked column on the subwindow's
+   right edge hosting the shared ProjectFilesView (via ProjectFilesTab). Sits
+   BESIDE the measured pane region, so the main window's flat pane layer
+   (whose panes are sized to the region's rect) never paints over it. */
+.subwindow-files {
+  position: relative;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+  border-left: 1px solid var(--border-color);
+  background: var(--bg-panel);
+}
+
+/* Left-edge resize handle of the file-viewer column. */
+.subwindow-files-resize {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 5px;
+  cursor: col-resize;
+  z-index: 13;
+}
+.subwindow-files-resize:hover {
+  background: var(--accent);
+  opacity: 0.35;
+}
+
 /* Pane layer holds all PTYs (every scope), positioned over group bodies. The
    wrapper is click-through; individual panes re-enable pointer events. While a
    tab is being dragged the whole layer goes click-through so hit-testing falls
@@ -3328,7 +5326,7 @@ select option {
 .blob-empty-card {
   padding: 16px 22px;
   border: 1px solid var(--border-subtle);
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   background: var(--bg-panel);
   color: var(--text-secondary);
   font-size: 13px;
@@ -3345,7 +5343,7 @@ select option {
   gap: 2px;
   max-width: 80%;
   padding: 4px 8px;
-  border-radius: 8px;
+  border-radius: var(--radius);
   background: color-mix(in srgb, var(--bg-panel) 82%, transparent);
   border: 1px solid var(--border-subtle);
   overflow-x: auto;
@@ -3355,7 +5353,7 @@ select option {
   flex-shrink: 0;
   padding: 2px 7px;
   border: none;
-  border-radius: 6px;
+  border-radius: var(--radius);
   background: transparent;
   color: var(--text-secondary);
   font-size: 12px;
@@ -3387,7 +5385,7 @@ select option {
   transform: translateX(-50%);
   z-index: 3;
   padding: 4px 12px;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   background: color-mix(in srgb, var(--bg-panel) 75%, transparent);
   border: 1px solid var(--border-subtle);
   color: var(--text-muted);
@@ -3404,14 +5402,14 @@ select option {
   display: flex;
   gap: 2px;
   padding: 3px;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   background: color-mix(in srgb, var(--bg-panel) 82%, transparent);
   border: 1px solid var(--border-subtle);
 }
 .blob-view-toggle button {
   padding: 3px 12px;
   border: none;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   background: transparent;
   color: var(--text-secondary);
   font-size: 11px;
@@ -3448,7 +5446,7 @@ select option {
   stroke: var(--bg-main);
   stroke-width: 2;
   cursor: pointer;
-  transition: opacity 0.12s ease;
+  transition: opacity var(--transition);
 }
 .blob-pie-slice:hover path {
   opacity: 0.82;
@@ -3508,14 +5506,14 @@ select option {
   align-items: center;
   gap: 7px;
   padding: 5px 10px;
-  border-radius: 8px;
+  border-radius: var(--radius);
   border: 1px solid var(--border-subtle);
   background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
   color: var(--text-primary);
   font-size: 12px;
   cursor: pointer;
   will-change: transform;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
+  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
 }
 .blob-node:hover {
   border-color: var(--accent);
@@ -3536,7 +5534,7 @@ select option {
   margin-left: auto;
   flex-shrink: 0;
   padding: 0 6px;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   background: color-mix(in srgb, var(--accent-secondary) 25%, transparent);
   color: var(--text-secondary);
   font-size: 10px;
@@ -3589,7 +5587,7 @@ select option {
   align-items: center;
   gap: 4px;
   padding: 1px 7px 1px 5px;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   font-size: 10px;
   color: var(--text-secondary);
   background: color-mix(in srgb, var(--cat-color) 18%, transparent);
@@ -3611,9 +5609,9 @@ select option {
   max-width: 760px;
   padding: 10px 12px;
   border: 1px solid var(--border-subtle);
-  border-radius: 8px;
-  background: var(--bg-panel);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+  border-radius: var(--radius);
+  background: var(--bg-elevated);
+  box-shadow: var(--shadow-3);
   pointer-events: none;
 }
 .blob-hover-title {
@@ -3670,7 +5668,7 @@ select option {
   background: rgba(0, 0, 0, 0.28);
   outline: 2px solid var(--accent);
   outline-offset: -2px;
-  transition: left 0.12s ease, top 0.12s ease, width 0.12s ease, height 0.12s ease;
+  transition: left var(--transition), top var(--transition), width var(--transition), height var(--transition);
 }
 
 /* ── Focused-subwindow frame + Shift+↑/↓ subwindow numbering ──────────────── */
@@ -3686,7 +5684,7 @@ select option {
   outline: 2px solid var(--accent);
   outline-offset: -2px;
   border-radius: 2px;
-  transition: left 0.1s ease, top 0.1s ease, width 0.1s ease, height 0.1s ease;
+  transition: left var(--transition), top var(--transition), width var(--transition), height var(--transition);
 }
 .subwindow-number {
   position: absolute;
@@ -3704,7 +5702,7 @@ select option {
   line-height: 1;
   color: var(--bg-main);
   background: var(--accent);
-  border-radius: 9px;
+  border-radius: var(--radius);
 }
 
 /* Floating label following the pointer during a tab drag. */
@@ -3726,7 +5724,7 @@ select option {
   border: 1px solid var(--accent);
   color: var(--text-primary);
   white-space: nowrap;
-  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
+  box-shadow: var(--shadow-2);
 }
 
 /* Options legend shown under the label during a file drag: lists what each
@@ -3737,9 +5735,9 @@ select option {
   flex-direction: column;
   gap: 2px;
   padding: 4px 8px;
-  background: var(--bg-panel);
+  background: var(--bg-elevated);
   border: 1px solid var(--border-subtle, var(--accent));
-  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
+  box-shadow: var(--shadow-2);
 }
 
 .tab-drag-ghost-opt {
@@ -3760,9 +5758,9 @@ select option {
 .tab-drag-ghost-thumb {
   position: relative;
   overflow: hidden;
-  background: var(--bg-panel);
+  background: var(--bg-elevated);
   border: 1px solid var(--accent);
-  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
+  box-shadow: var(--shadow-2);
   opacity: 0.9;
 }
 
@@ -3868,8 +5866,13 @@ select option {
   display: flex;
   flex-direction: column;
   transform: translateX(calc(100% + 2px));
-  transition: transform 0.2s ease;
-  z-index: 10;
+  transition: transform var(--transition-slow);
+  /* Above all subwindow/tab-bar chrome (active tab 11, sticky ×/hide/files
+     toggle/scroll chevrons 12, docked-sidebar resize grip 13) — which all
+     resolve in this same stacking context — so the slid-out overlay fully
+     covers them. Stays below fixed editor tooltips/completion (20/60), the
+     header (80), and dialogs. */
+  z-index: 15;
 }
 
 .right-panel:not(.open) {
@@ -3881,6 +5884,38 @@ select option {
   transform: translateX(0);
 }
 
+/* ── Left-docked variant ──────────────────────────────────────────────────
+   The same panel mirrored to the opposite edge: pinned to left:0, its border
+   and closed-slide direction flipped, and the resize grip moved to the right
+   (inner) edge. Two-class selectors beat the base `.right-panel` rules. */
+.right-panel.left {
+  right: auto;
+  left: 0;
+  border-left: none;
+  border-right: 1px solid var(--border-color);
+  transform: translateX(calc(-100% - 2px));
+}
+
+.right-panel.left:not(.open) {
+  transform: translateX(calc(-100% - 2px));
+  border-right-color: transparent;
+}
+
+.right-panel.left.open {
+  transform: translateX(0);
+}
+
+.right-panel.left .right-panel-resize {
+  left: auto;
+  right: -3px;
+}
+
+/* Side-flip button in the header — shares the pin's box; the ⇄ is a plain glyph
+   (not a color emoji), so it's unaffected by the pin's filter caveat. */
+.right-panel-flip {
+  font-size: 14px;
+}
+
 /* While dragging the resize handle, kill the open/close transition so the panel
    tracks the cursor 1:1 instead of easing toward each intermediate width. */
 .right-panel.resizing {
@@ -3926,7 +5961,7 @@ select option {
   position: absolute;
   inset: 3px;
   border: 2px dashed var(--accent);
-  border-radius: 6px;
+  border-radius: var(--radius);
   pointer-events: none;
   z-index: 20;
   animation: right-panel-drop-dash 0.4s ease-out;
@@ -4004,6 +6039,119 @@ select option {
   scrollbar-width: thin;
 }
 
+/* Custom-agent manage dialog (new-tab menu → Agents → "＋ Add agent…") */
+.custom-agent-dialog {
+  width: 480px;
+  max-width: 92vw;
+}
+.custom-agent-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 8px 0 12px;
+  max-height: 220px;
+  overflow-y: auto;
+}
+.custom-agent-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  border-radius: 6px;
+  background: var(--bg-elevated, rgba(127, 127, 127, 0.08));
+}
+.custom-agent-row-label {
+  font-weight: 600;
+  flex: 0 0 auto;
+}
+.custom-agent-row-cmd {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-muted);
+  font-size: 0.85em;
+}
+.custom-agent-row-tag {
+  flex: 0 0 auto;
+  font-size: 0.72em;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--accent);
+  border: 1px solid var(--accent);
+  border-radius: 4px;
+  padding: 0 5px;
+  opacity: 0.85;
+}
+.custom-agent-install {
+  flex: 0 0 auto;
+  border: 1px solid var(--accent);
+  background: transparent;
+  color: var(--accent);
+  cursor: pointer;
+  font-size: 0.78em;
+  line-height: 1;
+  padding: 3px 8px;
+  border-radius: 4px;
+}
+.custom-agent-install:hover {
+  background: var(--accent);
+  color: var(--bg-panel);
+}
+.custom-agent-row-missing {
+  flex: 0 0 auto;
+  font-size: 0.75em;
+  color: var(--text-muted);
+  opacity: 0.8;
+}
+.custom-agent-remove {
+  flex: 0 0 auto;
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 1.05em;
+  line-height: 1;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+.custom-agent-remove:hover:not(:disabled) {
+  color: var(--danger, #e5534b);
+  background: rgba(229, 83, 75, 0.12);
+}
+.custom-agent-form {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.custom-agent-field {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  font-size: 0.85em;
+}
+.custom-agent-field > span {
+  color: var(--text-secondary, var(--text-muted));
+}
+.custom-agent-field > span em {
+  color: var(--text-muted);
+  font-style: normal;
+  opacity: 0.8;
+}
+.custom-agent-field input {
+  padding: 6px 8px;
+  border-radius: 6px;
+  border: 1px solid var(--border, rgba(127, 127, 127, 0.3));
+  background: var(--bg-input, var(--bg-panel));
+  color: var(--text-primary);
+  font-size: 1em;
+}
+.custom-agent-field input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
 /* "Set default app" dialog (right-panel file context menu) */
 .set-default-app-dialog {
   width: 460px;
@@ -4033,7 +6181,7 @@ select option {
   background: var(--bg-panel);
   color: var(--text-primary);
   border: 1px solid var(--border-color);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   padding: 4px 6px;
 }
 .set-default-app-list {
@@ -4041,7 +6189,7 @@ select option {
   max-height: 220px;
   overflow-y: auto;
   border: 1px solid var(--border-color);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
 }
 .set-default-app-row {
   display: flex;
@@ -4074,7 +6222,7 @@ select option {
   image-rendering: -webkit-optimize-contrast;
 }
 .set-default-app-icon-placeholder {
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   background: color-mix(in srgb, var(--text-muted) 22%, transparent);
 }
 .set-default-app-text {
@@ -4108,7 +6256,7 @@ select option {
 .set-default-app-manual button,
 .set-default-app-actions button {
   border: 1px solid var(--control-border);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   padding: 5px 12px;
   background: var(--control-bg);
   color: var(--text-primary);
@@ -4159,7 +6307,7 @@ select option {
 .folder-picker-nav button {
   flex-shrink: 0;
   border: 1px solid var(--control-border);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   padding: 4px 10px;
   background: var(--control-bg);
   color: var(--text-primary);
@@ -4190,7 +6338,7 @@ select option {
   max-height: 320px;
   overflow-y: auto;
   border: 1px solid var(--border-color);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
 }
 .folder-picker-item {
   display: flex;
@@ -4238,7 +6386,7 @@ select option {
   flex: 1;
   min-width: 0;
   border: 1px solid var(--control-border);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   padding: 4px 8px;
   background: var(--control-bg);
   color: var(--text-primary);
@@ -4260,7 +6408,7 @@ select option {
 }
 .folder-picker-actions button {
   border: 1px solid var(--control-border);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   padding: 5px 12px;
   background: var(--control-bg);
   color: var(--text-primary);
@@ -4400,7 +6548,7 @@ select option {
   align-items: center;
   gap: 4px;
   padding: 2px 6px;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
 .hidden-sw-row:hover {
   background: var(--pill-hover-bg);
@@ -4410,6 +6558,39 @@ select option {
   color: var(--text-muted);
   font-size: 12px;
 }
+/* Same three states (and the same pulse timings) as `.tab.working` etc — a
+   hidden group's row-level rollup and its header dot use a colour+opacity pulse
+   since they're a single glyph rather than a whole tab's fillable box. */
+.hidden-sw-icon.working {
+  color: var(--success);
+  animation: pill-bar-working 1.5s ease-in-out infinite;
+}
+.hidden-sw-icon.needs-decision {
+  color: var(--warning);
+  animation: pill-bar-decision 1.2s ease-in-out infinite;
+}
+.hidden-sw-icon.finished {
+  color: var(--success);
+}
+.hidden-sw-status-dot {
+  flex-shrink: 0;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  margin-left: 2px;
+  text-transform: none;
+}
+.hidden-sw-status-dot.working {
+  background: var(--success);
+  animation: pill-bar-working 1.5s ease-in-out infinite;
+}
+.hidden-sw-status-dot.needs-decision {
+  background: var(--warning);
+  animation: pill-bar-decision 1.2s ease-in-out infinite;
+}
+.hidden-sw-status-dot.finished {
+  background: var(--success);
+}
 .hidden-sw-chips {
   display: flex;
   flex-wrap: wrap;
@@ -4422,7 +6603,7 @@ select option {
   padding: 0 6px;
   height: 18px;
   border: 1px solid var(--border-subtle);
-  border-radius: 9px;
+  border-radius: var(--radius);
   background: var(--bg-main);
   color: var(--text-primary);
   font-size: 11px;
@@ -4436,6 +6617,17 @@ select option {
   border-color: var(--accent);
   color: var(--accent);
 }
+/* Same glow as `.tab.working`/`.needs-decision`/`.finished` — a hidden tab's PTY
+   is still mounted and running, so its chip keeps reporting status. */
+.hidden-sw-chip.working {
+  animation: tab-glow-working 1.5s ease-in-out infinite;
+}
+.hidden-sw-chip.needs-decision {
+  animation: tab-glow-decision 1.2s ease-in-out infinite;
+}
+.hidden-sw-chip.finished {
+  box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--success) 16%, transparent);
+}
 .hidden-sw-btn {
   flex-shrink: 0;
   width: 20px;
@@ -4444,7 +6636,7 @@ select option {
   align-items: center;
   justify-content: center;
   border: none;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   background: transparent;
   color: var(--text-muted);
   cursor: pointer;
@@ -4490,7 +6682,7 @@ select option {
   font-size: 13px;
   line-height: 1;
   border: 1px solid var(--border-subtle);
-  border-radius: 6px;
+  border-radius: var(--radius);
   background: var(--bg-elevated, rgba(255, 255, 255, 0.04));
   color: var(--text-secondary);
   cursor: pointer;
@@ -4500,7 +6692,7 @@ select option {
      shader path — while WebKitGTK on Linux shows it fine. That vanished the pin
      entirely in the packaged Windows build. Opacity dims without breaking emoji. */
   opacity: 0.6;
-  transition: opacity 0.12s ease, background 0.12s ease, border-color 0.12s ease;
+  transition: opacity var(--transition), background var(--transition), border-color var(--transition);
 }
 
 .right-panel-pin:hover {
@@ -4524,6 +6716,88 @@ select option {
   flex-shrink: 0;
 }
 
+/* The Files (Project) tab: the right panel's file view hosted in a pane. The
+   rows inside it (sort / source / scroll / tree) are the panel's own classes —
+   only the shell differs, since a tab has no fixed width, no pin and no slide-in
+   transform. */
+.project-files-tab {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--bg-panel);
+  color: var(--text-primary);
+}
+
+.project-files-tab-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 6px;
+  border-bottom: 1px solid var(--border-subtle);
+  flex-shrink: 0;
+}
+
+.project-files-tab-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.project-files-tab-spacer {
+  margin-left: auto;
+}
+
+.project-files-tab-header .tab-add-btn {
+  font-size: 10px;
+  padding: 1px 6px;
+  height: 20px;
+  flex-shrink: 0;
+}
+
+/* Same OS-file-drop affordance as the panel (pulsing glow, dashed inset border,
+   drop hint) — the animations are shared. */
+.project-files-tab.drop-active {
+  animation: right-panel-drop-pulse 1.1s ease-in-out infinite;
+}
+
+.project-files-tab.drop-active::before {
+  content: "";
+  position: absolute;
+  inset: 3px;
+  border: 2px dashed var(--accent);
+  border-radius: var(--radius);
+  pointer-events: none;
+  z-index: 20;
+  animation: right-panel-drop-dash 0.4s ease-out;
+}
+
+.project-files-tab.drop-active::after {
+  content: "＋ Drop to copy into project";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 6px 8px;
+  text-align: center;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--bg-panel);
+  background: var(--accent);
+  pointer-events: none;
+  z-index: 21;
+  animation: right-panel-drop-banner 0.18s ease-out;
+}
+
+.project-files-tab.drop-flash {
+  animation: right-panel-drop-flash 0.5s ease-out;
+}
+
 .sort-key-btn {
   background: none;
   border: none;
@@ -4531,7 +6805,7 @@ select option {
   font-size: 10px;
   color: var(--text-muted);
   padding: 2px 5px;
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   text-transform: uppercase;
   letter-spacing: 0.3px;
   font-family: inherit;
@@ -4564,7 +6838,7 @@ select option {
   background: color-mix(in srgb, var(--git-btn-accent) 14%, transparent);
   border: 1px solid color-mix(in srgb, var(--git-btn-accent) 55%, transparent);
   color: var(--git-btn-accent);
-  border-radius: 5px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   padding: 4px 9px;
   font-size: 13px;
@@ -4573,7 +6847,7 @@ select option {
   align-items: center;
   gap: 4px;
   font-family: inherit;
-  transition: background 0.12s, color 0.12s, border-color 0.12s;
+  transition: background var(--transition), color var(--transition), border-color var(--transition);
   white-space: nowrap;
   flex: 1;
   justify-content: center;
@@ -4617,7 +6891,7 @@ select option {
   border: 1px solid color-mix(in srgb, var(--git-btn-accent) 55%, transparent);
   border-left: none;
   color: var(--git-btn-accent);
-  border-radius: 0 5px 5px 0;
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
   cursor: pointer;
   padding: 0 5px;
   font-size: 10px;
@@ -4625,7 +6899,7 @@ select option {
   display: inline-flex;
   align-items: center;
   font-family: inherit;
-  transition: background 0.12s, border-color 0.12s;
+  transition: background var(--transition), border-color var(--transition);
 }
 
 .git-action-toggle:hover {
@@ -4639,10 +6913,15 @@ select option {
 }
 
 /* The label is always shown now (not hover-only) so each action reads clearly
-   without pointing at it; the leading glyph stays as a quick visual marker. */
+   without pointing at it; the leading glyph stays as a quick visual marker.
+   Typography matches the app's other small colored tags/chips (type tags,
+   the Local/Remote switch): uppercase, bold, letter-spaced. */
 .git-btn-label {
   display: inline;
-  font-size: 11px;
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
   line-height: 1;
 }
 
@@ -4656,16 +6935,16 @@ select option {
   right: 0;
   left: auto;
   min-width: 280px;
-  max-width: 480px;
+  max-width: min(480px, calc(100vw - 16px));
   width: max-content;
   z-index: 200;
   background: var(--bg-panel, #1e1e1e);
   border: 1px solid var(--border-color);
-  border-radius: 6px;
+  border-radius: var(--radius);
   max-height: 320px;
   overflow-y: auto;
   font-size: 11px;
-  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
+  box-shadow: var(--shadow-2);
   padding: 4px 0;
 }
 
@@ -4764,7 +7043,7 @@ select option {
   background: transparent;
   border: 1px solid var(--border-color);
   color: var(--text-primary);
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   padding: 1px 8px;
   font-size: 10px;
   cursor: pointer;
@@ -4863,7 +7142,7 @@ select option {
   flex-shrink: 0;
   font-size: 9px;
   padding: 0 5px;
-  border-radius: 8px;
+  border-radius: var(--radius);
   background: var(--accent);
   color: var(--bg-base, #111);
   white-space: nowrap;
@@ -4878,15 +7157,15 @@ select option {
 
 /* Commit-message window */
 .commit-window {
-  background: var(--bg-panel);
+  background: var(--bg-elevated);
   border: 1px solid var(--border-color);
-  border-radius: 6px;
+  border-radius: var(--radius);
   padding: 12px 14px;
   width: min(560px, 92vw);
   display: flex;
   flex-direction: column;
   gap: 8px;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--shadow-3);
 }
 
 .commit-window-meta {
@@ -4904,7 +7183,7 @@ select option {
   background: var(--bg-base, #111);
   color: var(--text-primary);
   border: 1px solid var(--border-color);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   padding: 6px 8px;
   resize: vertical;
   box-sizing: border-box;
@@ -4976,29 +7255,36 @@ select option {
   position: relative;
   display: flex;
   align-items: center;
-  height: 32px;
+  height: 34px;
+  /* Fully transparent, no shadow — the pill melts into the header bar behind
+     it, so a pill and the bar are the SAME color and only the pill text (and,
+     for the current project, its top accent line) tells them apart. The 3px
+     TOP border is TRANSPARENT here and merely recolored to accent on .active —
+     reserving the space up front so activation changes only the color, never
+     the pill's size. Square corners (no radius) so the active pill's side
+     shadow runs straight down each edge with nothing curving below. */
+  box-sizing: border-box;
   border-radius: 0;
-  border: 1px solid var(--control-border);
+  border: none;
+  border-top: 3px solid transparent;
   font-size: 12px;
   font-weight: 500;
   color: var(--text-secondary);
-  background-color: var(--control-bg);
-  box-shadow: inset 0 4px 0 var(--warning);
-  transition: background-color 0.1s, color 0.1s;
+  background-color: transparent;
+  transition: color var(--transition), border-color var(--transition);
   flex-shrink: 0;
   white-space: nowrap;
+  overflow: hidden;
 }
 
 .project-pill:hover {
-  background-color: var(--control-hover-bg);
   color: var(--text-primary);
-  border-color: var(--text-muted);
 }
 
 .project-pill.dragging {
   opacity: 0.45;
   transform: scale(0.94);
-  transition: transform 0.12s ease, opacity 0.12s ease;
+  transition: transform var(--transition), opacity var(--transition);
 }
 
 /* Make room before the drop target and show a pulsing insertion bar. */
@@ -5006,7 +7292,7 @@ select option {
   position: relative;
   margin-left: 8px;
   border-color: var(--accent);
-  transition: margin-left 0.14s ease;
+  transition: margin-left var(--transition);
 }
 
 .project-pill.drag-over::before {
@@ -5065,21 +7351,23 @@ select option {
 }
 
 .project-pill.active {
-  /* Same accent-tinted fill as the current tab, so the active project pill and
-     the active tab read as the same "current" treatment across the app. */
-  background: linear-gradient(180deg,
-    color-mix(in srgb, var(--accent) 42%, var(--bg-main)) 0%,
-    color-mix(in srgb, var(--accent) 26%, var(--bg-main)) 100%);
-  border-color: var(--pill-active-border);
+  /* No size change — same box as every other pill (the 3px top border is
+     already reserved, transparent, on the base rule). Activation recolors that
+     top border to accent/bluish (same color as the add-project button): a
+     straight, un-rounded line across the top of the current project's pill.
+     The current pill is ALSO the only one with a side 3D shadow — a soft edge
+     on each side (vertical offset 0) so it reads as a raised chip lifted off
+     the flat, shadowless neighbours. */
   color: var(--text-primary);
-  box-shadow: inset 0 4px 0 var(--accent);
+  border-top-color: var(--accent);
+  box-shadow: 3px 0 4.5px -2px rgba(0, 0, 0, 0.4), -3px 0 4.5px -2px rgba(0, 0, 0, 0.4);
 }
 
 /* Category-tinted top bar: the project's primary category color replaces the
    default status stripe so projects sharing a category read as a group. The
    active pill keeps the accent stripe (its current-scope signal wins). */
 .project-pill.has-category:not(.active):not(.timer-paused) {
-  box-shadow: inset 0 4px 0 var(--cat-color);
+  box-shadow: inset 0 -4px 0 var(--cat-color), 0 3px 6px -2px rgba(0, 0, 0, 0.28);
 }
 /* Small per-category swatches inside the pill (one dot per category). */
 .pill-category-dots {
@@ -5108,13 +7396,13 @@ select option {
   align-items: center;
   gap: 5px;
   padding: 3px 9px;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   font-size: 12px;
   cursor: pointer;
   color: var(--text-secondary);
   background: var(--control-bg);
   border: 1px solid var(--control-border);
-  transition: background 0.1s, border-color 0.1s, color 0.1s;
+  transition: background var(--transition), border-color var(--transition), color var(--transition);
 }
 .category-chip:hover {
   border-color: var(--cat-color);
@@ -5175,9 +7463,9 @@ select option {
   font-size: 14px;
   line-height: 1;
   cursor: pointer;
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   opacity: 0;
-  transition: opacity 0.1s, background-color 0.1s;
+  transition: opacity var(--transition), background-color var(--transition);
   flex-shrink: 0;
 }
 
@@ -5201,7 +7489,7 @@ select option {
   padding: 0 4px;
   height: 32px;
   border: 1px solid var(--accent);
-  border-radius: 0;
+  border-radius: var(--radius);
   background-color: color-mix(in srgb, var(--accent) 12%, var(--control-bg));
 }
 
@@ -5247,7 +7535,7 @@ select option {
   background: var(--control-bg);
   color: var(--text-primary);
   border: 1px solid var(--accent);
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   padding: 1px 4px;
 }
 
@@ -5262,7 +7550,7 @@ select option {
   font-weight: 600;
   color: var(--accent);
   background: color-mix(in srgb, var(--accent) 22%, transparent);
-  border-radius: 8px;
+  border-radius: var(--radius);
 }
 
 .project-box-caret {
@@ -5283,9 +7571,9 @@ select option {
   gap: 4px;
   margin-top: 2px;
   padding: 4px;
-  background: var(--bg-panel);
+  background: var(--bg-elevated);
   border: 1px solid var(--accent);
-  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.36);
+  box-shadow: var(--shadow-3);
 }
 
 .project-box-dropdown .project-pill {
@@ -5337,7 +7625,7 @@ select option {
   background: var(--control-bg);
   color: var(--text-primary);
   border: 1px solid var(--control-border);
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   font: inherit;
   font-size: 12px;
   padding: 4px 8px;
@@ -5449,7 +7737,7 @@ select option {
   opacity: 0.8;
   padding: 1px 5px;
   border: 1px solid color-mix(in srgb, var(--file-root-accent) 40%, transparent);
-  border-radius: 8px;
+  border-radius: var(--radius);
 }
 
 /* Indent the file list under its header so nested entries don't line up with
@@ -5475,14 +7763,14 @@ select option {
   display: flex;
   flex-direction: column;
   gap: 3px;
-  background: var(--bg-panel);
+  background: var(--bg-elevated);
   border: 1px solid var(--control-border);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   padding: 6px 10px;
   white-space: nowrap;
   pointer-events: none;
   z-index: 9999;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  box-shadow: var(--shadow-2);
 }
 
 .pill-popup-path {
@@ -5550,7 +7838,7 @@ select option {
   letter-spacing: 0.04em;
   line-height: 1;
   padding: 2px 6px;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   border: 1px solid currentColor;
   white-space: nowrap;
 }
@@ -5611,6 +7899,19 @@ select option {
   opacity: 0.8;
 }
 
+/* Muted meta rows (activity / restart) — like .pill-popup-path but plain LTR
+   text, so it never gets the path row's RTL ellipsis treatment. */
+.tab-popup-meta {
+  font-size: 11px;
+  color: var(--text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tab-popup-meta.working {
+  color: var(--success, #4caf50);
+}
+
 /* ── Project switcher action buttons ──────────────────────────────────────── */
 .project-switcher-action-btn {
   display: flex;
@@ -5618,13 +7919,13 @@ select option {
   justify-content: center;
   width: 32px;
   height: 32px;
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   border: none;
   cursor: pointer;
   background: transparent;
   color: var(--text-secondary);
   font-size: 16px;
-  transition: background-color 0.1s, color 0.1s;
+  transition: background-color var(--transition), color var(--transition);
   flex-shrink: 0;
 }
 
@@ -5638,13 +7939,13 @@ select option {
   position: absolute;
   bottom: 56px;
   left: 8px;
-  background-color: var(--bg-panel);
+  background-color: var(--bg-elevated);
   border: 1px solid var(--border-color);
   border-radius: 0;
   padding: 12px;
   min-width: 200px;
   z-index: 20;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--shadow-2);
 }
 
 .settings-label {
@@ -5661,13 +7962,13 @@ select option {
   width: 100%;
   text-align: left;
   padding: 6px 8px;
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   border: none;
   cursor: pointer;
   font-size: 12px;
   background: transparent;
   color: var(--text-primary);
-  transition: background-color 0.1s;
+  transition: background-color var(--transition);
 }
 
 .theme-btn:hover { background-color: var(--pill-hover-bg); }
@@ -5677,7 +7978,11 @@ select option {
 .tab-bar {
   display: flex;
   align-items: flex-end;
-  padding: 0;
+  /* Small inset on the top + sides so the tab cards (top), the drag grip / first
+     tab (left) and the sticky close/hide/files cluster (right) all clear the
+     active subwindow's focus-frame outline (2px, drawn just inside the frame
+     edge) instead of colliding with it — notably the × button and the tab tops. */
+  padding: 4px 5px 0;
   gap: 2px;
   /* The bar itself no longer scrolls; only the inner `.tab-strip` does. The bar
      stays a fixed row holding the scroll chevrons, the strip (including the +
@@ -5693,6 +7998,22 @@ select option {
      bottom border + the active tab's `--bg-main` blend keep the divide crisp. */
   background-color: var(--bg-panel);
   border-bottom: 1px solid var(--border-color);
+  position: relative;
+}
+
+/* Same accent wash family as the header bar / menus / dialogs, but dimmer —
+   a subwindow's tab bar is a secondary surface, not the window's own top
+   edge, so it echoes the theme rather than matching it at full strength.
+   Negative z-index (not a positive one on the children) so it stays under
+   the bar's existing content without touching every child's own stacking. */
+.tab-bar::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--accent);
+  opacity: 0.12;
+  pointer-events: none;
+  z-index: -1;
 }
 
 /* Explicit drag grip pinned at the far left of every subwindow bar. It sits
@@ -5714,7 +8035,7 @@ select option {
   user-select: none;
   opacity: 0.6;
   cursor: grab;
-  transition: opacity 0.1s, color 0.1s;
+  transition: opacity var(--transition), color var(--transition);
 }
 .tab-drag-grip:hover {
   opacity: 1;
@@ -5727,8 +8048,8 @@ select option {
    its scrollbar is hidden (chevrons + wheel drive the scroll instead). */
 .tab-strip {
   display: flex;
-  align-items: flex-end;
-  gap: 2px;
+  align-items: flex-start;
+  gap: 0;
   flex: 1 1 auto;
   min-width: 0;
   overflow-x: auto;
@@ -5746,14 +8067,14 @@ select option {
   align-items: center;
   justify-content: center;
   border: none;
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   background: transparent;
   color: var(--text-muted);
   cursor: pointer;
   font-size: 16px;
   line-height: 1;
   z-index: 12;
-  transition: background-color 0.1s, color 0.1s;
+  transition: background-color var(--transition), color var(--transition);
 }
 .tab-scroll-btn:hover {
   background: var(--pill-hover-bg);
@@ -5771,18 +8092,20 @@ select option {
   color: var(--text-muted);
   white-space: nowrap;
   flex-shrink: 0;
-  /* Every tab shows a 3px group-colour top stripe, always (not just the current
-     tab) — the same slot on all tabs, so the stripe lands at an identical
-     height with no offset between neighbours. The current tab is marked by a
-     darker background (below), not by whether the stripe is present. */
-  border: 1px solid transparent;
-  border-top: 3px solid var(--tab-accent, var(--accent));
-  border-bottom: none;
+  /* Tabs melt into the tab-bar behind them — transparent, no side/top border,
+     no card shadow — exactly as project pills melt into the header bar. Only
+     the tab text, and (for the current tab) its straight bottom accent line
+     plus side 3D shadow, tell a tab from the bar. The 3px BOTTOM border is
+     reserved transparent here and recoloured on .active; border-radius:0 keeps
+     that line a straight, un-rounded rule corner-to-corner. */
+  box-sizing: border-box;
+  border: none;
+  border-bottom: 3px solid transparent;
   border-radius: 0;
+  background: transparent;
   margin-bottom: 0;
   margin-top: 0;
-  transition: background-color 0.15s, color 0.15s, margin 0.14s ease,
-    max-width 0.14s ease, padding 0.14s ease;
+  transition: color var(--transition), border-color var(--transition), max-width var(--transition), padding var(--transition);
   user-select: none;
   /* Don't let the webview claim the pointer for a pan/select gesture — on
      WebKitGTK that turns a drag's release into pointercancel, not pointerup. */
@@ -5790,33 +8113,19 @@ select option {
 }
 
 .tab:hover {
-  background-color: var(--pill-hover-bg);
   color: var(--text-primary);
-  /* Stripe colour is unchanged on hover (it's always the group colour); hover
-     just warms the tab body. */
-  border-left-color: var(--control-border);
-  border-right-color: var(--control-border);
 }
 
 .tab.active {
-  /* The current tab is marked by a darker, accent-tinted background — a darker
-     lavender in the lavender theme, and the equivalent theme-accent tint in the
-     others (dark themes deepen, light themes take on the accent hue). The stripe
-     itself is on every tab, so the background is what signals "current". */
-  background: linear-gradient(180deg,
-    color-mix(in srgb, var(--accent) 42%, var(--bg-main)) 0%,
-    color-mix(in srgb, var(--accent) 26%, var(--bg-main)) 100%);
-  color: var(--text-primary);
-  /* The 2px top border is the stripe (coloured by the tab group). */
-  border-top-color: var(--tab-accent, var(--accent));
-  border-left-color: var(--border-color);
-  border-right-color: var(--border-color);
-  border-bottom-color: var(--bg-main);
-  position: relative;
-  z-index: 11;
-  /* Overlap the bar's bottom border so the active tab merges into the pane
-     (`--bg-main`) below, visually breaking out of the panel-colored strip. */
-  margin-bottom: -1px;
+  /* No background tint, no lift, no size change — same melt as every tab. The
+     current tab is marked by the bottom border recoloured to its accent (its
+     kind colour via --tab-accent, falling back to the theme accent): a straight
+     line across the bottom edge, mirroring the active project pill's top line.
+     It is ALSO the only tab with a side 3D shadow, so it reads as a raised chip
+     lifted off the flat, shadowless neighbours. */
+  color: var(--text-primary);
+  border-bottom-color: var(--tab-accent, var(--accent));
+  box-shadow: 2px 0 3px -2px rgba(0, 0, 0, 0.4), -2px 0 3px -2px rgba(0, 0, 0, 0.4);
 }
 
 .tab-label {
@@ -5842,7 +8151,7 @@ select option {
   color: inherit;
   background: var(--bg-main, rgba(0, 0, 0, 0.25));
   border: 1px solid var(--accent, #4aa3df);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   padding: 0 2px;
   margin: 0;
   outline: none;
@@ -5853,10 +8162,13 @@ select option {
    painted behind the label, so it never changes the tab's width and the text
    stays crisp. Three states:
    - working        (green, pulsing): PTY producing sustained output.
-   - needs-decision (orange, pulsing): agent rang the bell with a prompt on
-     screen, on a tab that isn't being looked at.
+   - needs-decision (orange, pulsing): agent gone quiet with a choice/permission
+     prompt on screen — shown on the viewed tab too, since an agent blocked on
+     you stays blocked while you look at it. The glow is an inset fill, so it
+     composites over the active tab's gradient without fighting it.
    - finished       (green, steady): agent rang the bell having simply finished.
-   The two attention states clear the moment the tab is viewed. */
+   Working and finished clear the moment the tab is viewed; a pending decision
+   clears when it is ANSWERED. */
 .tab.working {
   animation: tab-glow-working 1.5s ease-in-out infinite;
 }
@@ -5881,11 +8193,13 @@ select option {
 
 @media (prefers-reduced-motion: reduce) {
   /* Collapse the pulse to a steady tint — the state is still visible. */
-  .tab.working {
+  .tab.working,
+  .hidden-sw-chip.working {
     animation: none;
     box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--success) 16%, transparent);
   }
-  .tab.needs-decision {
+  .tab.needs-decision,
+  .hidden-sw-chip.needs-decision {
     animation: none;
     box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--warning) 22%, transparent);
   }
@@ -5946,7 +8260,11 @@ select option {
 @media (prefers-reduced-motion: reduce) {
   /* Collapse the pulse to a steady bar — the state is still visible. */
   .pill-status-bar.working,
-  .pill-status-bar.needs-decision {
+  .pill-status-bar.needs-decision,
+  .hidden-sw-icon.working,
+  .hidden-sw-icon.needs-decision,
+  .hidden-sw-status-dot.working,
+  .hidden-sw-status-dot.needs-decision {
     animation: none;
     opacity: 0.85;
   }
@@ -5957,16 +8275,22 @@ select option {
    steady tints reduced-motion uses. The state stays fully visible; only the
    continuous repaint stops. Driven by [data-energy-saver="on"] on the document
    root (set in AppShell from the power/settings signal). */
-:root[data-energy-saver="on"] .tab.working {
+:root[data-energy-saver="on"] .tab.working,
+:root[data-energy-saver="on"] .hidden-sw-chip.working {
   animation: none;
   box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--success) 16%, transparent);
 }
-:root[data-energy-saver="on"] .tab.needs-decision {
+:root[data-energy-saver="on"] .tab.needs-decision,
+:root[data-energy-saver="on"] .hidden-sw-chip.needs-decision {
   animation: none;
   box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--warning) 22%, transparent);
 }
 :root[data-energy-saver="on"] .pill-status-bar.working,
-:root[data-energy-saver="on"] .pill-status-bar.needs-decision {
+:root[data-energy-saver="on"] .pill-status-bar.needs-decision,
+:root[data-energy-saver="on"] .hidden-sw-icon.working,
+:root[data-energy-saver="on"] .hidden-sw-icon.needs-decision,
+:root[data-energy-saver="on"] .hidden-sw-status-dot.working,
+:root[data-energy-saver="on"] .hidden-sw-status-dot.needs-decision {
   animation: none;
   opacity: 0.85;
 }
@@ -5980,7 +8304,7 @@ select option {
   justify-content: center;
   width: 16px;
   height: 16px;
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   border: none;
   background: transparent;
   color: var(--text-muted);
@@ -5989,7 +8313,7 @@ select option {
   line-height: 1;
   flex-shrink: 0;
   opacity: 0;
-  transition: opacity 0.1s, background-color 0.1s;
+  transition: opacity var(--transition), background-color var(--transition);
 }
 
 .tab:hover .tab-close,
@@ -6012,13 +8336,13 @@ select option {
   justify-content: center;
   width: 16px;
   height: 16px;
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   border: none;
   background: transparent;
   font-size: 11px;
   line-height: 1;
   flex-shrink: 0;
-  transition: background-color 0.1s, color 0.1s;
+  transition: background-color var(--transition), color var(--transition);
 }
 .tab-locality { cursor: pointer; }
 .tab-source { cursor: default; }
@@ -6027,6 +8351,13 @@ select option {
 .tab-locality.remote,
 .tab-source.remote { color: var(--warning); }
 .tab-locality:hover { background-color: var(--pill-hover-bg); }
+/* A file-source badge is a clickable toggle when the file exists on both sides
+   (the viewer published a Local/Remote switch); otherwise it stays the plain
+   read-only glyph above. `disabled` = the host has no counterpart to switch to. */
+.tab-source.clickable { cursor: pointer; }
+.tab-source.clickable:hover { background-color: var(--pill-hover-bg); }
+.tab-source.clickable.disabled { cursor: default; opacity: 0.45; }
+.tab-source.clickable.disabled:hover { background-color: transparent; }
 
 /* Planner/doer badge (experimental `agent_mode_toggle`) — same 16px badge box as
    the locality toggle, sitting beside it on agent tabs. Three states, two of them
@@ -6038,14 +8369,14 @@ select option {
   justify-content: center;
   width: 16px;
   height: 16px;
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   border: none;
   background: transparent;
   font-size: 11px;
   line-height: 1;
   flex-shrink: 0;
   cursor: pointer;
-  transition: background-color 0.1s, color 0.1s;
+  transition: background-color var(--transition), color var(--transition);
 }
 .tab-agent-mode.unset { color: var(--text-muted); opacity: 0.6; }
 .tab-agent-mode.plan { color: var(--info, #4aa3df); }
@@ -6112,6 +8443,54 @@ select option {
   color: var(--accent);
 }
 
+/* Per-subwindow file-viewer toggle (◫), left of the hide/close cluster. Same
+   sticky right-edge treatment as its companions; lit while the viewer is open. */
+.subwindow-files-toggle {
+  margin-left: auto;
+  align-self: center;
+  position: sticky;
+  right: 0;
+  flex-shrink: 0;
+  z-index: 12;
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: var(--bg-panel);
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1;
+}
+.subwindow-files-toggle + .subwindow-hide {
+  margin-left: 0;
+}
+.subwindow-files-toggle:hover {
+  background: var(--pill-hover-bg);
+  color: var(--accent);
+}
+.subwindow-files-toggle.open {
+  color: var(--accent);
+}
+
+/* Right-pinned cluster holding the ◫/hide/close controls. Sits after the
+   flex:1 tab strip, so it's always at the far right of the bar. When a file
+   viewer is docked below, TabBar sets an inline `width` equal to the viewer's
+   width: the cluster then spans the strip-edge→bar-edge band directly above the
+   viewer and right-aligns its buttons, which both keeps the controls flush with
+   the subwindow's right edge and forces the scrolling strip to stop at the pane
+   edge instead of running under the viewer. */
+.tab-controls {
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-shrink: 0;
+  min-width: 0;
+}
+
 /* #42: detached ("pop out") window title-bar controls — the native
    min/max/close cluster. Pinned to the right of the tab bar (sticky) so they
    never scroll out when tabs overflow; the panel-colored backing keeps
@@ -6258,7 +8637,7 @@ select option {
 .tab-new-btn {
   width: 34px;
   height: 30px;
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   border: 1px solid transparent;
   border-bottom: none;
   background: transparent;
@@ -6270,7 +8649,7 @@ select option {
   align-items: center;
   justify-content: center;
   margin: 0;
-  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
+  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
 }
 
 .tab-new-btn:hover {
@@ -6301,10 +8680,31 @@ select option {
 .context-menu,
 .tab-new-menu,
 .project-switcher-add-menu {
-  background: var(--bg-panel);
+  position: relative;
+  background: var(--bg-elevated);
   border: 1px solid var(--border-color);
+  /* Accent top rail, matching the header bar and the dialog chrome above. */
+  border-top: 2px solid var(--accent);
   border-radius: var(--radius);
-  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.36);
+  box-shadow: var(--shadow-3);
+}
+
+/* Same accent wash as the header bar (.app-header::before) so every popover
+   menu reads as the same tinted color, not just an accent top rail. Layered
+   as an overlay (not folded into `background` above) so it works uniformly
+   whether the underlying surface is --bg-elevated or, in the glass themes,
+   --glass-elevated. */
+.context-menu::before,
+.tab-new-menu::before,
+.project-switcher-add-menu::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--accent);
+  opacity: 0.32;
+  pointer-events: none;
+  z-index: -1;
+  border-radius: inherit;
 }
 
 .tab-new-menu {
@@ -6319,6 +8719,61 @@ select option {
   gap: 1px;
 }
 
+/* ── Unified scrolling-menu shape ───────────────────────────────────────────
+   A menu that can overflow must NOT scroll on its own element: that element
+   carries the rounded corners, the 2px accent top rail and the ::before accent
+   wash, and a native scrollbar on it runs straight over the corners/rail (looks
+   broken) while the absolutely-positioned wash only covers the visible box —
+   scrolling away and leaving the bottom untinted. Instead the menu keeps its
+   accent title (`.tab-new-menu-group-label`) PINNED as a direct child, and puts
+   everything else in a `.menu-scroll-region` that scrolls. The scrollbar then
+   starts BELOW the header and clears both rounded corners, and the wash (on the
+   non-scrolling menu) paints the full height behind it. This is the same split
+   the settings dialog makes with `.dialog-scroll`, generalised to every menu. */
+.menu-scroll-region {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+/* Keep the pinned title from shrinking when the menu hits its max-height — only
+   the scroll region below it should give. Direct-child + first, so a group
+   label INSIDE the scroll region (e.g. the machines menu's "Add a machine")
+   still scrolls with its section. */
+.tab-new-menu > .tab-new-menu-group-label:first-child {
+  flex-shrink: 0;
+}
+
+/* The add menu's search box: auto-focused so "click + and type" filters the
+   entries immediately. Enter picks the highlighted first match. */
+.tab-new-menu-search {
+  margin: 2px 2px 4px;
+  padding: 5px 8px;
+  background: var(--control-bg);
+  border: 1px solid var(--border-color);
+  border-radius: calc(var(--radius) / 2);
+  color: var(--text-primary);
+  font-size: 12px;
+  outline: none;
+}
+
+.tab-new-menu-search:focus {
+  border-color: var(--accent);
+}
+
+.tab-new-menu-search::placeholder {
+  color: var(--text-muted);
+}
+
+/* The entry Enter would pick while a query is live — shown in the hover style
+   so the shortcut is visible before it fires. */
+.tab-new-menu-item.enter-target {
+  background-color: var(--control-hover-bg);
+  border-color: var(--accent);
+}
+
 .tab-new-menu-item {
   display: flex;
   align-items: center;
@@ -6326,18 +8781,17 @@ select option {
   min-height: 30px;
   padding: 6px 10px;
   border: 1px solid transparent;
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   background: var(--control-bg);
   color: var(--text-primary);
   cursor: pointer;
   font-size: 12px;
   text-align: left;
-  transition: background-color 0.1s;
+  transition: background-color var(--transition);
 }
 
 .tab-new-menu-item:hover {
   background-color: var(--control-hover-bg);
-  border-color: var(--accent);
 }
 
 .tab-new-menu-item:disabled {
@@ -6352,6 +8806,20 @@ select option {
 
 .tab-new-menu-dot { font-size: 8px; flex-shrink: 0; }
 
+/* A muted, right-aligned note in a locality menu row — "choose machine ›" on the
+   Remote drill-in, "sync off" on a worker that can't run scripts. */
+.tab-menu-hint {
+  margin-left: auto;
+  padding-left: 12px;
+  font-size: 10px;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+/* The "‹ Run on machine" header row of the machine sub-picker: reads as a title,
+   not a target, and hosts the untested tag. */
+.tab-new-menu-item.tab-menu-back { color: var(--text-secondary); }
+.tab-new-menu-item.tab-menu-back .tab-new-menu-dot { font-size: 12px; }
+
 .tab-new-menu-group-label {
   padding: 6px 10px 2px;
   font-size: 9px;
@@ -6364,12 +8832,74 @@ select option {
   color: var(--accent);
   user-select: none;
 }
-
-.tab-new-menu-hint {
-  padding: 4px 10px;
+
+.tab-new-menu-hint {
+  padding: 4px 10px;
+  font-size: 11px;
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+/* #py right-click-Run "arguments" popover on a file-tree row. A transparent
+   full-window backdrop catches the outside click that closes it; the panel is
+   pinned at the cursor (clamped on-screen by useClampToViewport). Canonical
+   panel chrome + explicit colours (a portal child inherits none). */
+.file-run-args-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+}
+.file-run-args {
+  position: fixed;
+  z-index: 1001;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 240px;
+  padding: 8px;
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-3);
+}
+.file-run-args-label {
+  font-size: 10px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.file-run-args-input {
+  background: var(--bg-input, var(--control-bg));
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  padding: 4px 6px;
+  font-family: var(--font-mono, monospace);
   font-size: 11px;
+}
+.file-run-args-input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+.file-run-args-row {
+  display: flex;
+  gap: 6px;
+}
+.file-run-args-btn {
+  flex: 1;
+  background: transparent;
   color: var(--text-muted);
-  font-style: italic;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  padding: 3px 8px;
+  font-size: 11px;
+  cursor: pointer;
+}
+.file-run-args-btn:hover {
+  color: var(--text-primary);
+  border-color: var(--text-muted);
 }
 
 /* ── Context menus ───────────────────────────────────────────────────── */
@@ -6388,7 +8918,7 @@ select option {
   position: fixed;
   z-index: 999;
   pointer-events: none;
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   border: 2px solid var(--accent);
   box-sizing: border-box;
   animation:
@@ -6416,6 +8946,25 @@ select option {
   }
 }
 
+/* A row the CSV table viewer just gained on a disk reload: flash an accent tint
+   for 3s, then let the cell's own inline background (stripe/sorted) reassert.
+   The animation targets the cells, not the row, because each <td> paints its own
+   background — and an animated property overrides that inline style while it runs.
+   The mix is opaque (over --bg-panel, not transparent) so the flash can't let the
+   scrolling body bleed through the sticky row-number gutter. */
+.csv-row-flash > td {
+  animation: csv-row-flash 3s ease-out;
+}
+
+@keyframes csv-row-flash {
+  from {
+    background-color: color-mix(in srgb, var(--accent) 28%, var(--bg-panel));
+  }
+  to {
+    background-color: var(--bg-panel);
+  }
+}
+
 .context-menu button {
   display: block;
   width: 100%;
@@ -6431,17 +8980,12 @@ select option {
 
 .context-menu button:hover {
   background: var(--control-hover-bg);
-  border-color: var(--accent);
 }
 
 .context-menu button.danger {
   color: var(--danger);
 }
 
-.context-menu button.danger:hover {
-  border-color: var(--danger);
-}
-
 .context-menu hr {
   height: 1px;
   margin: 4px 0;
@@ -6470,7 +9014,7 @@ select option {
   margin-top: 8px;
   padding: 4px;
   border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   background: color-mix(in srgb, var(--danger) 8%, transparent);
 }
 
@@ -6485,7 +9029,32 @@ select option {
 
 .context-menu-danger-zone button:hover {
   background: color-mix(in srgb, var(--danger) 16%, transparent);
-  border-color: var(--danger);
+}
+
+/* "Untested" tag: marks a menu action (or any control) whose feature is
+   implemented but not yet live-verified in the running app. It stays until
+   that specific feature is confirmed working. A tagged context-menu button
+   lays its label and the tag out in a row, with the tag pushed to the right. */
+.context-menu button.untested {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.untested-tag {
+  margin-left: auto;
+  flex: 0 0 auto;
+  padding: 1px 5px;
+  border-radius: 999px;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  line-height: 1.35;
+  color: var(--warning);
+  background: color-mix(in srgb, var(--warning) 14%, transparent);
+  border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
+  user-select: none;
 }
 
 /* ── Dropdown (the one custom themed dropdown; native <select> popups can't
@@ -6502,7 +9071,7 @@ select option {
   min-height: 24px;
   padding: 2px 8px;
   border: 1px solid var(--control-border);
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   background: var(--control-bg);
   color: var(--text-primary);
   font-size: 12px;
@@ -6559,7 +9128,7 @@ select option {
   padding: 5px 9px;
   text-align: left;
   border: 1px solid transparent;
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   background: var(--control-bg);
   color: var(--text-primary);
   font-size: 12px;
@@ -6567,7 +9136,6 @@ select option {
 
 .dropdown .dropdown-menu button:hover {
   background: var(--control-hover-bg);
-  border-color: var(--accent);
 }
 
 .dropdown .dropdown-menu button.selected {
@@ -6582,10 +9150,17 @@ select option {
   padding: 4px;
 }
 
-.file-tree-breadcrumb {
+/* The pinned header (remote bar + search + breadcrumb). ONE sticky element so
+   its rows stack in flow instead of each sticking to top:0 and overlapping —
+   the path line used to hide behind the search box. Sits above the tree rows. */
+.file-tree-head {
   position: sticky;
   top: 0;
-  z-index: 2;
+  z-index: 3;
+  background: var(--bg-panel);
+}
+
+.file-tree-breadcrumb {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -6596,6 +9171,22 @@ select option {
   background: var(--bg-panel);
 }
 
+.file-tree-path-edit {
+  padding: 2px 4px 4px;
+}
+
+.file-tree-path-input {
+  width: 100%;
+  padding: 3px 6px;
+  font-size: 12px;
+  font-family: var(--font-mono, monospace);
+  color: var(--text-primary);
+  background: var(--bg-input, var(--bg-panel));
+  border: 1px solid var(--accent);
+  border-radius: 4px;
+  outline: none;
+}
+
 .file-tree-up {
   display: flex;
   align-items: center;
@@ -6606,11 +9197,152 @@ select option {
   cursor: pointer;
   font-size: 12px;
   color: var(--text-secondary);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
 
 .file-tree-up:hover { background-color: var(--pill-hover-bg); }
 
+/* In-tree search (filename + content), shared by the right panel and the
+   Files (Project) tab since both render FileTree. */
+.file-tree-search {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 4px;
+  background: var(--bg-panel);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.file-tree-search-row {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+
+.file-tree-search-input {
+  flex: 1;
+  min-width: 0;
+  font-size: 12px;
+  background: var(--bg-panel);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  padding: 3px 6px;
+  box-sizing: border-box;
+}
+
+.file-tree-search-clear {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  line-height: 1;
+  font-size: 14px;
+  background: transparent;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+}
+.file-tree-search-clear:hover { background-color: var(--pill-hover-bg); }
+
+.file-tree-search-modes {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.file-tree-search-mode {
+  font-size: 10px;
+  padding: 1px 7px;
+  height: 18px;
+  background: transparent;
+  color: var(--text-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+.file-tree-search-mode:hover { background-color: var(--pill-hover-bg); }
+.file-tree-search-mode.active {
+  color: var(--accent);
+  border-color: var(--accent);
+}
+
+.file-tree-search-scope {
+  margin-left: auto;
+  display: flex;
+  gap: 2px;
+  min-width: 0;
+}
+.file-tree-search-scope-folder {
+  max-width: 96px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-search-count {
+  font-size: 10px;
+  color: var(--text-muted);
+  padding: 4px 8px 2px;
+}
+
+.file-search-row { cursor: pointer; }
+
+.file-search-path {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  direction: rtl;
+  text-align: left;
+}
+
+.file-search-hl {
+  background: var(--accent);
+  color: var(--bg-panel);
+  border-radius: 2px;
+}
+
+.file-search-act {
+  flex-shrink: 0;
+  margin-left: auto;
+  width: 20px;
+  height: 20px;
+  line-height: 1;
+  font-size: 12px;
+  background: transparent;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+}
+.file-search-act:hover {
+  background-color: var(--pill-hover-bg);
+  color: var(--text-primary);
+}
+
+.file-search-content { align-items: flex-start; }
+
+.file-search-content-body {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+  flex: 1;
+}
+
+.file-search-loc {
+  font-size: 10px;
+  color: var(--text-muted);
+}
+
+.file-search-line {
+  font-size: 11px;
+  color: var(--text-primary);
+  font-family: monospace;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
 .file-tree-remote-bar {
   display: flex;
   align-items: center;
@@ -6647,6 +9379,28 @@ select option {
   flex-shrink: 0;
 }
 
+/* Compact (docked subwindow) viewer: the Remote/Local switch alone, on its own
+   row directly above the tree's find-files search box (the compact viewer
+   strips the full header that normally carries the switch). Left-aligned with
+   the tree content below it. */
+.right-panel-source--compact {
+  padding: 4px 6px;
+  /* A docked subwindow viewer is narrow: the switch + the run-host picker do not
+     fit on one line at every width, and both were `flex-shrink: 0`, so the picker
+     ran out past the window's right border. Let the row wrap and let the picker
+     shrink (its label ellipsizes) rather than overflow. */
+  flex-wrap: wrap;
+  gap: 4px 6px;
+  min-width: 0;
+  overflow: hidden;
+}
+.right-panel-source--compact .right-panel-run-host {
+  margin-left: 0;
+  flex-shrink: 1;
+  min-width: 0;
+  max-width: 100%;
+}
+
 /* Remote/Local file-source switch in the panel header (remote SSH projects
    only). A live segmented control — deliberately shaped as a switch (grouped
    segments in an inset track), NOT a chip, so it can never be mistaken for one
@@ -6661,7 +9415,7 @@ select option {
   display: inline-flex;
   align-items: stretch;
   padding: 1px;
-  border-radius: 5px;
+  border-radius: var(--radius-sm);
   border: 1px solid var(--border-subtle);
   background: var(--bg-inset, rgba(127, 127, 127, 0.12));
 }
@@ -6670,7 +9424,7 @@ select option {
   padding: 1px 7px;
   height: 16px;
   border: none;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   background: transparent;
   color: var(--text-secondary);
   font-family: inherit;
@@ -6681,11 +9435,19 @@ select option {
   line-height: 1;
   cursor: pointer;
 }
-.right-panel-source-switch .source-seg:hover:not(.active) {
+.right-panel-source-switch .source-seg:hover:not(.active):not(:disabled) {
   color: var(--text-primary);
 }
+.right-panel-source-switch .source-seg:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
 .right-panel-source-switch .source-seg.active {
-  color: #fff;
+  /* Not a fixed white: the active fill is --success/--warning, which in
+     fancy_dark are light pastel green/amber — white text on those is nearly
+     unreadable. --bg-main tracks light/dark per theme instead (same fix as
+     .btn-primary/.btn-danger above). */
+  color: var(--bg-main);
 }
 .right-panel-source-switch .source-seg:first-child.active {
   background: var(--success);
@@ -6694,6 +9456,41 @@ select option {
   background: var(--warning);
 }
 
+/* Run-host picker beside the Remote/Local switch — which MACHINE scripts/shells
+   launched from this project run on (the source switch is which side files are
+   read from). Quiet chrome that matches the switch; the ⌂/☁ glyph tints by side. */
+.right-panel-run-host {
+  flex-shrink: 0;
+  margin-left: 6px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 18px;
+  padding: 1px 7px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-subtle);
+  background: var(--bg-inset, rgba(127, 127, 127, 0.12));
+  color: var(--text-secondary);
+  font-family: inherit;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  line-height: 1;
+  cursor: pointer;
+}
+.right-panel-run-host:hover { color: var(--text-primary); }
+.right-panel-run-host .run-host-label {
+  text-transform: none;
+  letter-spacing: normal;
+  /* The label carries a machine NAME, which can be long (a fqdn). Truncate it
+     inside the button instead of pushing the button past its container. */
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /* One-click SSH logout beside the Remote/Local switch, shown only while SSH is
    connected (moved here from the project pill). Same quiet chrome as the
    switch; the danger tint only appears on hover, so a connected project isn't
@@ -6707,7 +9504,7 @@ select option {
   padding: 2px 7px;
   height: 18px;
   border: 1px solid var(--border-subtle);
-  border-radius: 5px;
+  border-radius: var(--radius-sm);
   background: transparent;
   color: var(--text-secondary);
   font-family: inherit;
@@ -6731,7 +9528,7 @@ select option {
   cursor: pointer;
   font-size: 12px;
   color: var(--text-secondary);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   max-width: 140px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -6747,6 +9544,31 @@ select option {
 
 .file-tree-crumb.current:hover { background-color: transparent; }
 
+/* Remote source: breadcrumb segments the host tree does / doesn't have. The
+   distinction is carried by SHAPE first so it survives colour-blindness and any
+   theme — a struck-through segment with a ⊘ badge is local-only, a plain (subtly
+   underlined) one is on the host — with a success/danger tint added only as
+   reinforcement, never as the sole signal. */
+.file-tree-crumb.crumb-on-host {
+  color: var(--success);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+}
+.file-tree-crumb.crumb-missing {
+  color: var(--danger, #f85149);
+  text-decoration: line-through;
+  text-decoration-thickness: 1px;
+  opacity: 0.85;
+}
+.file-tree-crumb.crumb-missing::after {
+  content: "⊘";
+  margin-left: 3px;
+  font-size: 0.85em;
+  text-decoration: none;
+  display: inline-block;
+}
+
 .file-tree-crumb-sep {
   color: var(--text-muted);
   font-size: 11px;
@@ -6771,7 +9593,7 @@ select option {
   align-items: flex-start;
   gap: 6px;
   padding: 3px 8px;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   font-size: 12px;
   color: var(--text-primary);
@@ -6821,7 +9643,7 @@ select option {
   background-color: var(--accent-soft, rgba(88, 166, 255, 0.22));
   outline: 1px solid var(--accent);
   outline-offset: -1px;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
 
 /* Dragging a download over empty tree space (not a specific folder) targets the
@@ -6829,13 +9651,20 @@ select option {
 .right-panel-scroll.move-drop-target {
   outline: 2px dashed var(--accent);
   outline-offset: -3px;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
 
 /* Let the flex-1 tree scroll actually shrink when the Downloads section below it
    grows (a flex child won't shrink past its content without min-height:0). */
 .right-panel-scroll {
   min-height: 0;
+  /* Disable scroll anchoring. The tree's content height shifts after mount —
+     directory sizes stream in asynchronously and (in the narrow docked sidebar)
+     the size badges re-wrap long file names — so with anchoring on the browser
+     keeps re-adjusting scrollTop toward the sticky `.file-tree-head`, snapping
+     the view back up whenever you scroll near the bottom (can never reach the
+     end). Off, the wheel scroll stays put. */
+  overflow-anchor: none;
 }
 
 /* ── Downloads section (right panel, below the file tree) ─────────────────── */
@@ -6881,7 +9710,7 @@ select option {
   padding: 1px 6px;
   height: 20px;
   border: 1px solid var(--border-color);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   background: transparent;
   color: var(--text-secondary, var(--text-primary));
   cursor: pointer;
@@ -6930,10 +9759,7 @@ select option {
    discoverable; non-embeddable files get no effect, signalling they're not
    draggable (they open on double-click). */
 .file-entry.file.embeddable {
-  transition:
-    transform 120ms ease,
-    box-shadow 120ms ease,
-    background-color 120ms ease;
+  transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition);
   transform: translateZ(0);
 }
 .file-entry.file.embeddable:hover {
@@ -6948,7 +9774,7 @@ select option {
 .file-entry.file.embeddable:active {
   cursor: grabbing;
   transform: translateY(0) scale(1.0);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--shadow-1);
 }
 
 .file-run-btn {
@@ -6960,7 +9786,7 @@ select option {
   flex-shrink: 0;
   padding: 0;
   border: 1px solid color-mix(in srgb, var(--success) 70%, transparent);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   background: transparent;
   color: var(--success);
   font-size: 10px;
@@ -6973,11 +9799,28 @@ select option {
   border-color: var(--success);
 }
 
+/* A running tab-backed or detached run pulses green — the app's shared "PTY
+   producing sustained output" vocabulary (cf. @keyframes tab-glow-working). The
+   detached `.sh` path also sets `disabled`, hence the default cursor. */
 .file-run-btn.running {
   cursor: default;
-  border-color: color-mix(in srgb, var(--success) 70%, transparent);
-  background: transparent;
+  color: var(--success);
+  animation: file-run-pulse 1.5s ease-in-out infinite;
+}
+@keyframes file-run-pulse {
+  0%, 100% { background: color-mix(in srgb, var(--success) 8%, transparent);
+             border-color: color-mix(in srgb, var(--success) 45%, transparent); }
+  50%      { background: color-mix(in srgb, var(--success) 30%, transparent);
+             border-color: var(--success); }
 }
+/* Motion opt-outs (match the tab-glow blocks at :6798 / :6882): collapse to a
+   steady green tint — the running state stays visible, the repaint stops. */
+@media (prefers-reduced-motion: reduce) {
+  .file-run-btn.running { animation: none;
+    background: color-mix(in srgb, var(--success) 18%, transparent); }
+}
+:root[data-energy-saver="on"] .file-run-btn.running { animation: none;
+  background: color-mix(in srgb, var(--success) 18%, transparent); }
 
 .file-run-spinner {
   width: 10px;
@@ -7016,7 +9859,7 @@ select option {
   height: 16px;
   flex-shrink: 0;
   padding: 0;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   background: transparent;
   font-size: 9px;
   line-height: 1;
@@ -7063,6 +9906,43 @@ select option {
   opacity: 0.85;
 }
 
+/* Local-mirror view: a folder that exists only in the local mirror and not on
+   the remote host. Dim the whole row and tag it, so "Local" mode never quietly
+   implies the whole tree is on the remote. */
+.file-entry.not-on-remote .file-icon,
+.file-entry.not-on-remote .file-name {
+  color: var(--text-muted, #687899);
+}
+
+.file-offhost-tag {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  margin-left: 4px;
+  padding: 0 5px;
+  width: 64px;
+  height: 16px;
+  box-sizing: border-box;
+  border-radius: 999px;
+  font-size: 9px;
+  line-height: 1;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--warning, #e3b341);
+  border: 1px solid color-mix(in srgb, var(--warning, #e3b341) 45%, transparent);
+  background: color-mix(in srgb, var(--warning, #e3b341) 12%, transparent);
+  white-space: nowrap;
+  user-select: none;
+}
+
+.file-entry.not-on-remote .file-size {
+  width: 9ch;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
 /* Right-panel "orange" (diverged) toolbar button + its count badge. */
 .right-panel-orange-btn.active {
   color: #d29922;
@@ -7074,7 +9954,7 @@ select option {
   min-width: 12px;
   padding: 0 3px;
   margin-left: 2px;
-  border-radius: 8px;
+  border-radius: var(--radius);
   background: #d29922;
   color: #1a1a1a;
   font-size: 9px;
@@ -7094,6 +9974,24 @@ select option {
   text-align: center;
 }
 
+/* Bulk "…for all" resolution bar atop the diverged list. */
+.orange-bulk-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  padding: 3px 0 5px;
+  margin-bottom: 3px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.orange-bulk-count {
+  font-size: 10px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
 .orange-file-row {
   display: flex;
   align-items: center;
@@ -7132,6 +10030,15 @@ select option {
   flex-shrink: 0;
 }
 
+/* Persistent (tmux) sessions view (TODO #85): the per-row window/age/open meta,
+   dimmed so the session name stays the row's focus. */
+.tmux-session-meta {
+  margin-left: 6px;
+  color: var(--text-secondary, #8b949e);
+  font-size: 10px;
+  flex-shrink: 0;
+}
+
 .orange-file-actions {
   display: inline-flex;
   gap: 4px;
@@ -7141,7 +10048,7 @@ select option {
 .orange-file-act {
   background: transparent;
   border: 1px solid var(--border-color);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   color: var(--text-muted);
   font-size: 9px;
   padding: 1px 5px;
@@ -7173,7 +10080,7 @@ select option {
   min-width: 0;
   background: transparent;
   border: 1px solid var(--border-color);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   color: var(--text-muted);
   font-size: 10px;
   padding: 2px 6px;
@@ -7257,7 +10164,7 @@ select option {
 .file-tree.drag-over {
   outline: 2px dashed var(--accent, #58a6ff);
   outline-offset: -2px;
-  border-radius: 6px;
+  border-radius: var(--radius);
   background: rgba(88, 166, 255, 0.06);
 }
 
@@ -7268,20 +10175,24 @@ select option {
 .file-size.size-medium { color: #e3b341; }
 .file-size.size-large  { color: #f0883e; }
 .file-size.size-huge   { color: #f85149; }
+/* A folder excluded from scans. Italic and dimmer than `size-small` so it reads
+   as "no measurement" rather than as a very small one — the whole point is that
+   nothing was walked, and a number-shaped grey would suggest otherwise. */
+.file-size-excluded { font-style: italic; opacity: 0.65; }
 
 .file-tooltip {
   position: fixed;
   z-index: 9999;
-  background: var(--bg-panel);
+  background: var(--bg-elevated);
   border: 1px solid var(--border-color);
-  border-radius: 5px;
+  border-radius: var(--radius-sm);
   padding: 6px 10px;
   font-size: 11px;
   color: var(--text-primary);
   pointer-events: none;
   white-space: nowrap;
   line-height: 1.8;
-  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
+  box-shadow: var(--shadow-2);
 }
 .file-tooltip-label {
   color: var(--text-muted);
@@ -7289,6 +10200,18 @@ select option {
   display: inline-block;
   width: 5.5em;
 }
+.file-tooltip-name {
+  font-weight: 600;
+  margin-bottom: 2px;
+}
+/* A sub-entry nested under the row above it (e.g. saved run args under Run),
+   rather than another top-level label — indented, and a touch dimmer/smaller
+   so it reads as detail, not a peer fact like Created/Modified. */
+.file-tooltip-sub {
+  margin-left: 1.5em;
+  font-size: 10px;
+  opacity: 0.85;
+}
 
 .file-delete-dialog {
   width: min(360px, calc(100vw - 32px));
@@ -7296,13 +10219,13 @@ select option {
   flex-direction: column;
   gap: 12px;
   padding: 18px;
-  background: var(--bg-panel);
+  background: var(--bg-elevated);
   border: 1px solid var(--border-color);
   /* Portaled into <body>, which sets no text color (defaults to black); set it
      here so bare descendants (h2 title, the diff <pre>, tables) stay readable in
      dark themes instead of inheriting black. */
   color: var(--text-primary);
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.42);
+  box-shadow: var(--shadow-3);
 }
 
 .file-delete-dialog h2 {
@@ -7409,7 +10332,7 @@ select option {
   color: var(--text-primary);
   font-size: 12px;
   padding: 2px 8px;
-  border-radius: 0;
+  border-radius: var(--radius-sm);
 }
 
 .file-browser-toolbar button,
@@ -7661,7 +10584,7 @@ select option {
   justify-content: center;
   min-width: 32px;
   height: 32px;
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   border: 1px solid var(--control-border);
   background: var(--control-bg);
   color: var(--text-secondary);
@@ -7694,17 +10617,17 @@ select option {
   display: flex;
   gap: 2px;
   padding: 4px 6px;
-  background: var(--bg-panel);
+  background: var(--bg-elevated);
   border: 1px solid var(--border-color);
   border-top: none;
   border-radius: 0;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
+  box-shadow: var(--shadow-2);
 }
 
 .global-app-btn {
   width: 30px;
   height: 28px;
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   border: none;
   background: transparent;
   color: var(--text-secondary);
@@ -7745,9 +10668,9 @@ select option {
   z-index: 1000;
   width: 320px;
   padding: 10px;
-  background: var(--bg-panel);
+  background: var(--bg-elevated);
   border: 1px solid var(--border-color);
-  box-shadow: 0 12px 28px rgba(0,0,0,0.36);
+  box-shadow: var(--shadow-3);
   color: var(--text-primary);
 }
 
@@ -7791,7 +10714,7 @@ select option {
   justify-content: center;
   min-width: 40px;
   height: 40px;
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   border: 1px solid var(--control-border);
   cursor: pointer;
   flex-shrink: 0;
@@ -7840,8 +10763,8 @@ select option {
   flex: 1;
   min-width: 0;
   display: flex;
-  align-items: center;
-  gap: 6px;
+  align-items: flex-start;
+  gap: 0;
   overflow-x: auto;
   overflow-y: hidden;
   height: 40px;
@@ -7880,7 +10803,7 @@ select option {
   line-height: 1;
   color: var(--text-primary);
   background: var(--bg-header);
-  transition: color 0.1s;
+  transition: color var(--transition);
 }
 
 .pills-scroll-btn:hover {
@@ -7944,26 +10867,6 @@ select option {
   color: #5d3eb8;
 }
 
-/* Project-pill top stripe in the lavender theme. The base stripe uses --warning
-   (a brown/amber) — replace it with lavender: open projects get a light-lavender
-   stripe, and the current (active) project gets a saturated dark-lavender one so
-   it clearly stands out. Category-tinted pills keep their category colour (that
-   rule is more specific). */
-[data-theme="light_lavender"] .project-pill {
-  box-shadow: inset 0 4px 0 #cdbdf0;
-}
-[data-theme="light_lavender"] .project-pill.active {
-  box-shadow: inset 0 4px 0 #5d3eb8;
-}
-
-.project-pill:not(.active):not(:hover) .project-pill-label {
-  opacity: 0.82;
-}
-
-.project-pill.active .project-pill-label {
-  font-weight: 650;
-}
-
 .pill-folder-icon {
   display: inline-flex;
   flex-shrink: 0;
@@ -8000,7 +10903,7 @@ select option {
 .project-search-entry {
   width: 100%;
   height: 40px;
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   border: 1px solid var(--control-border);
   background: var(--control-bg);
   color: var(--text-primary);
@@ -8021,10 +10924,10 @@ select option {
   max-height: 420px;
   overflow-y: auto;
   padding: 4px;
-  background: var(--bg-panel);
+  background: var(--bg-elevated);
   border: 1px solid var(--border-color);
-  border-radius: 0;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-2);
   z-index: 60;
 }
 
@@ -8035,7 +10938,7 @@ select option {
   gap: 2px;
   padding: 7px 8px;
   border: 1px solid transparent;
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   background: var(--control-bg);
   color: var(--text-primary);
   text-align: left;
@@ -8101,7 +11004,7 @@ select option {
 
 .project-switcher-add-menu button {
   border: 1px solid transparent;
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   padding: 7px 9px;
   background: var(--control-bg);
   color: var(--text-primary) !important;
@@ -8114,7 +11017,6 @@ select option {
   background: var(--control-hover-bg);
   color: var(--text-primary) !important;
   -webkit-text-fill-color: var(--text-primary);
-  border-color: var(--accent);
 }
 
 .modal-backdrop {
@@ -8127,20 +11029,100 @@ select option {
   background: rgba(0, 0, 0, 0.35);
 }
 
+/* The Connect detail opens ON TOP of the unified "Remote machines" hub (a host
+   entry's Connect/Manage button), and both are plain .modal-backdrop modals at
+   z-index 100 — DOM order alone would not reliably keep the detail above the
+   hub. This lifts the connect detail's backdrop one layer up so it always sits
+   over the hub that spawned it. */
+.modal-backdrop.modal-backdrop-elevated {
+  z-index: 110;
+}
+
 /* One dialog surface for the whole app — the shells differ only in size.
-   Shared chrome (bg-panel, accent border, sharp corners, shadow) lives here so
-   every modal reads identically. */
+   Shared chrome (elevated surface, soft border, large radius, floating shadow)
+   lives here so every modal reads identically. `.project-dialog`/`.stats-dialog`
+   are also reused directly (no `.dialog-scroll` child) by ~15 other one-off
+   dialogs (RemoteMachinesWindow, EventDialog, CustomAgentDialog, …), so this
+   base rule scrolls itself, same as always — only `.settings-dialog` (the
+   Settings window specifically) opts into the split-scroll frame below. */
 .project-dialog,
 .settings-dialog,
 .stats-dialog {
+  position: relative;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
   gap: 12px;
-  background: var(--bg-panel);
+  background: var(--bg-elevated);
   border: 1px solid var(--border-color);
-  border-radius: var(--radius);
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.42);
+  /* Accent top rail, matching the header's new tint — every dialog reads as
+     belonging to the same themed chrome, with no per-dialog exceptions. */
+  border-top: 3px solid var(--accent);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-3);
+}
+
+/* Accent wash as a `::before` overlay, NOT folded into `background` — the glass
+   themes replace `background` with a translucent `--glass-elevated`, and only an
+   overlay tints whatever shows through the glass without making it opaque. The
+   wash spanning the full scroll is handled by the frame, not by this rule: a
+   scrolling dialog uses `.dialog-framed` (its surface is overflow:hidden and
+   never scrolls, so this inset:0 overlay covers the whole fixed frame while the
+   inner `.dialog-scroll` scrolls beneath it). A non-framed dialog is short
+   enough never to scroll, so the overlay covers it too. */
+.project-dialog::before,
+.settings-dialog::before,
+.stats-dialog::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--accent);
+  opacity: 0.32;
+  pointer-events: none;
+  z-index: -1;
+  border-radius: inherit;
+}
+
+/* The scrollbar track on every accent-washed menu/dialog surface. The generic
+   --scrollbar-track (a flat --bg-panel) sits as a visibly different, un-tinted
+   patch against these tinted backgrounds — but a solid color-mix (32% accent
+   over --bg-elevated) can't match either: the real surface is a background PLUS
+   the ::before accent-wash overlay, and in the glass themes it is a translucent
+   --glass-elevated over a backdrop blur that no solid colour equals. So the
+   track is `transparent` — the gutter shows the true washed surface behind it,
+   an exact match in every theme. The thumb stays the global --scrollbar-thumb,
+   and its inset border goes transparent too (else it rings the thumb in the old
+   mismatched tint). */
+.context-menu,
+.tab-new-menu,
+.menu-scroll-region,
+.project-switcher-add-menu,
+.project-dialog,
+.settings-dialog .dialog-scroll,
+.dialog-framed .dialog-scroll,
+.stats-dialog {
+  scrollbar-color: var(--scrollbar-thumb) transparent;
+}
+.context-menu::-webkit-scrollbar-track,
+.tab-new-menu::-webkit-scrollbar-track,
+.menu-scroll-region::-webkit-scrollbar-track,
+.project-switcher-add-menu::-webkit-scrollbar-track,
+.project-dialog::-webkit-scrollbar-track,
+.settings-dialog .dialog-scroll::-webkit-scrollbar-track,
+.dialog-framed .dialog-scroll::-webkit-scrollbar-track,
+.stats-dialog::-webkit-scrollbar-track {
+  background: transparent;
+}
+.context-menu::-webkit-scrollbar-thumb,
+.tab-new-menu::-webkit-scrollbar-thumb,
+.menu-scroll-region::-webkit-scrollbar-thumb,
+.project-switcher-add-menu::-webkit-scrollbar-thumb,
+.project-dialog::-webkit-scrollbar-thumb,
+.settings-dialog .dialog-scroll::-webkit-scrollbar-thumb,
+.dialog-framed .dialog-scroll::-webkit-scrollbar-thumb,
+.stats-dialog::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb);
+  border-color: transparent;
 }
 
 .project-dialog {
@@ -8149,12 +11131,70 @@ select option {
   padding: 22px 24px;
 }
 
+/* Settings alone gets the split-scroll frame: it does NOT scroll itself —
+   .dialog-scroll (its one JSX child, see SettingsPanel.tsx) does. Split out
+   because a native scrollbar rendered on the SAME element as border-radius
+   doesn't get rounded itself — it runs straight to the very top/bottom of the
+   box, visually notching the rounded corner where the two meet. This frame
+   clips with plain `overflow: hidden` (it never scrolls, so no scrollbar ever
+   sits on its rounded edge); `.dialog-scroll` does the actual scrolling,
+   comfortably inside the curve. Scoped to .settings-dialog only — the shared
+   rule above still owns every other reuser of this chrome. */
 .settings-dialog {
   width: min(560px, calc(100vw - 32px));
   max-height: min(720px, calc(100vh - 96px));
+  overflow: hidden;
+  gap: 0;
+  padding: 0;
+}
+.settings-dialog .dialog-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
   padding: 18px;
 }
 
+/* Split-scroll frame, generalized — the one Settings uses, made reusable so any
+   dialog whose content can overflow reads and scrolls identically. A dialog opts
+   in by adding `dialog-framed` beside `project-dialog` and wrapping its scrolling
+   body in a `.dialog-scroll` child (its header/footer, if any, stay outside).
+
+   Why a frame and not just self-scrolling the .project-dialog surface: a native
+   scrollbar on the same box that carries border-radius runs into the rounded
+   corners (the notch). The frame clips with plain overflow:hidden (it never
+   scrolls, so no scrollbar ever meets its rounded edge — and the accent surface
+   wash covers the whole fixed frame), while .dialog-scroll does the scrolling
+   comfortably inside the curve. Same construction as .settings-dialog below. */
+/* Compound selectors (0,2,0) so the frame's overflow/padding/gap beat each
+   surface's own single-class sizing rule wherever it sits in the sheet. */
+.project-dialog.dialog-framed,
+.stats-dialog.dialog-framed {
+  overflow: hidden;
+  gap: 0;
+  padding: 0;
+}
+.dialog-framed > .settings-title-row {
+  margin: 0;
+  padding: 18px 24px 10px;
+}
+.dialog-framed > .dialog-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 14px 24px 22px;
+}
+/* No fixed header above it (the dialog's own title scrolls inside the frame, e.g.
+   a bare <h2>): restore the full top inset the un-framed surface used to give. */
+.dialog-framed > .dialog-scroll:first-child {
+  padding-top: 20px;
+}
+
 .settings-title-row {
   display: flex;
   align-items: center;
@@ -8172,13 +11212,63 @@ select option {
   color: var(--accent);
 }
 
+/* The dialog header reads as its OWN band — the same accent-washed --bg-header
+   the app's top bar carries (.app-header + its ::before at 0.32 accent), so a
+   dialog's title strip belongs to the same themed chrome as the window's top
+   bar and stands apart from the accent-washed body below it. The single-element
+   background reproduces that composite (a flat 32%-accent layer over
+   --bg-header) with no per-theme branching, since --bg-header is a plain color
+   in some themes and a gradient in others. The band bleeds to the dialog's
+   edges; the padding/margins that achieve that differ per context (the dialog's
+   own padding is 0 for a framed surface, 22px for a plain .project-dialog, and
+   18px inside a .settings-dialog's scroll frame) and are set below. */
+.project-dialog.dialog-framed > .settings-title-row,
+.stats-dialog.dialog-framed > .settings-title-row,
+.settings-dialog > .settings-title-row,
+.settings-dialog > .dialog-scroll > .settings-title-row,
+.project-dialog:not(.dialog-framed) > .settings-title-row {
+  background:
+    linear-gradient(
+      color-mix(in srgb, var(--accent) 32%, transparent),
+      color-mix(in srgb, var(--accent) 32%, transparent)
+    ),
+    var(--bg-header);
+  border-bottom: 1px solid var(--border-color);
+}
+
+/* Fixed header of a plain .settings-dialog (EventDialog, CustomAgentDialog):
+   the surface's padding is 0, so the band is full-width — it only needs its own
+   inset. */
+.settings-dialog > .settings-title-row {
+  margin: 0;
+  padding: 16px 18px 10px;
+}
+
+/* Header that scrolls inside a .settings-dialog's frame (SettingsPanel and its
+   sub-panels): pull the band out to the scroll's top and side edges (negative
+   margins == the .dialog-scroll's 18px padding) so it still reads as a full-
+   width top bar, with a gap before the body. */
+.settings-dialog > .dialog-scroll > .settings-title-row {
+  /* margin-bottom 0: the scroll frame is a flex column with its own 12px gap. */
+  margin: -18px -18px 0;
+  padding: 16px 18px 10px;
+}
+
+/* Header of a plain (self-scrolling) .project-dialog — ProjectPill's little
+   dialogs: bleed past the surface's own 22px/24px padding to the edges. */
+.project-dialog:not(.dialog-framed) > .settings-title-row {
+  /* margin-bottom 0: .project-dialog is a flex column with its own 12px gap. */
+  margin: -22px -24px 0;
+  padding: 16px 24px 10px;
+}
+
 .dialog-close-btn,
 .settings-title-row button,
 .settings-link-row button,
 .global-app-settings-row button,
 .filetype-settings-row button {
   border: 1px solid var(--control-border);
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   background: var(--control-bg);
   color: var(--text-primary);
   cursor: pointer;
@@ -8194,6 +11284,23 @@ select option {
   border-color: var(--accent);
 }
 
+/* GlobalMachineMonitorDialog: the full htop-like System Monitor pane opened
+   from the header's Machines menu for one ad-hoc global machine. `.sysmon-root`
+   (SystemMonitorPane's own CSS) is `position: absolute; inset: 0` — it needs a
+   sized, positioned ancestor, which `.sysmon-dialog-body` provides; the pane
+   scrolls itself (`.sysmon-scroll`), so the body clips rather than scrolls. */
+.sysmon-dialog {
+  width: min(1200px, calc(100vw - 48px));
+  height: min(85vh, calc(100vh - 48px));
+  max-height: min(85vh, calc(100vh - 48px));
+}
+.sysmon-dialog-body {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
 /* Print preview overlay (src/lib/viewers/print.ts). Reuses .modal-backdrop +
    .settings-dialog chrome; the dialog is sized to preview a page and the iframe
    fills the remaining height. */
@@ -8228,7 +11335,7 @@ select option {
   align-items: center;
   gap: 7px;
   border: 1px solid var(--accent);
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   background: var(--accent);
   color: var(--bg-panel);
   cursor: pointer;
@@ -8282,7 +11389,7 @@ select option {
 .print-opt-select,
 .print-opt-range {
   border: 1px solid var(--border-color);
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   background: var(--control-bg);
   color: var(--text-primary);
   padding: 3px 6px;
@@ -8317,7 +11424,7 @@ select option {
 }
 .print-strip-reset {
   border: 1px solid var(--border-color);
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   background: var(--control-bg);
   color: var(--text-primary);
   cursor: pointer;
@@ -8419,65 +11526,230 @@ select option {
   background: var(--accent);
   color: var(--bg-panel);
   font-size: 10px;
-  font-weight: 600;
+  font-weight: 600;
+  text-align: center;
+}
+.page-strip-del,
+.page-strip-rotate {
+  position: absolute;
+  top: 0;
+  border: none;
+  background: rgba(0, 0, 0, 0.55);
+  color: #fff;
+  cursor: pointer;
+  padding: 0 4px;
+  font-size: 11px;
+  line-height: 16px;
+  opacity: 0;
+}
+.page-strip-del {
+  right: 0;
+}
+.page-strip-rotate {
+  left: 0;
+}
+.page-strip-card:hover .page-strip-del,
+.page-strip-card:hover .page-strip-rotate,
+.page-strip-del:focus-visible,
+.page-strip-rotate:focus-visible {
+  opacity: 1;
+}
+
+/* Where pages dragged from another strip (or another Eldrun window) would land. It
+   sits in the flex flow, so it opens a real gap between the two cards. */
+.page-strip-caret {
+  flex: 0 0 auto;
+  background: var(--accent);
+  border-radius: 2px;
+}
+.page-strip-row .page-strip-caret {
+  width: 3px;
+  align-self: stretch;
+}
+.page-strip-column .page-strip-caret {
+  height: 3px;
+  width: var(--page-thumb-w, 72px);
+}
+
+/* ── PDF viewer: the page rail ──────────────────────────────────────────────────
+   The <PageStrip> stood on its side, beside the reader. Fixed card box + the
+   canvas's own object-fit handles pages of differing sizes. */
+.file-viewer-pdf-rail {
+  --page-thumb-w: 72px;
+  --page-thumb-h: 96px;
+  flex: 0 0 auto;
+  display: flex;
+  min-height: 0;
+  border-right: 1px solid var(--border-subtle);
+  background: var(--bg-panel);
+}
+.file-viewer-pdf-rail .page-strip-column {
+  padding: 6px;
+}
+
+/* Contents sidebar (#pdf-outline): the PDF's embedded chapters, a jump list. */
+.file-viewer-pdf-outline {
+  flex: 0 0 auto;
+  width: 240px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border-right: 1px solid var(--border-subtle);
+  background: var(--bg-panel);
+  font-size: 12px;
+}
+.file-viewer-pdf-outline-head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--border-subtle);
+  font-weight: 600;
+  color: var(--text-secondary, var(--text-primary));
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-size: 11px;
+}
+.file-viewer-pdf-outline-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 4px 0;
+}
+.file-viewer-pdf-outline-empty {
+  padding: 10px;
+  color: var(--text-secondary, var(--text-muted));
+  font-style: italic;
+}
+.file-viewer-pdf-outline-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 2px;
+  padding-right: 6px;
+}
+.file-viewer-pdf-outline-row.current {
+  background: var(--control-bg);
+}
+.file-viewer-pdf-outline-caret {
+  flex: 0 0 auto;
+  width: 16px;
+  padding: 3px 0;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary, var(--text-muted));
+  cursor: pointer;
+  font-size: 10px;
+  line-height: 1.2;
+}
+/* A leaf row's per-level sign, standing in the caret column: a dot for the top
+   tiers, a dash deeper down (a branch shows the ▸/▾ triangle here instead). */
+.file-viewer-pdf-outline-caret.is-sign {
+  cursor: default;
+  color: var(--text-secondary, var(--text-muted));
   text-align: center;
+  font-size: 11px;
 }
-.page-strip-del,
-.page-strip-rotate {
-  position: absolute;
-  top: 0;
+.file-viewer-pdf-outline-title {
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+  padding: 3px 2px;
   border: none;
-  background: rgba(0, 0, 0, 0.55);
-  color: #fff;
+  background: transparent;
+  color: var(--text-primary);
   cursor: pointer;
-  padding: 0 4px;
-  font-size: 11px;
-  line-height: 16px;
-  opacity: 0;
+  font: inherit;
+  line-height: 1.3;
+  overflow-wrap: anywhere;
 }
-.page-strip-del {
-  right: 0;
+.file-viewer-pdf-outline-title:hover:not(:disabled) {
+  text-decoration: underline;
+  text-underline-offset: 2px;
 }
-.page-strip-rotate {
-  left: 0;
+.file-viewer-pdf-outline-row.current .file-viewer-pdf-outline-title {
+  font-weight: 700;
 }
-.page-strip-card:hover .page-strip-del,
-.page-strip-card:hover .page-strip-rotate,
-.page-strip-del:focus-visible,
-.page-strip-rotate:focus-visible {
-  opacity: 1;
+.file-viewer-pdf-outline-title:disabled {
+  cursor: default;
+  color: var(--text-secondary, var(--text-muted));
 }
 
-/* Where pages dragged from another strip (or another Eldrun window) would land. It
-   sits in the flex flow, so it opens a real gap between the two cards. */
-.page-strip-caret {
-  flex: 0 0 auto;
-  background: var(--accent);
-  border-radius: 2px;
+/* Levels echo the markdown viewer's heading tiers: the top level leans on the
+   accent hue, the second on the secondary accent, the third picks up a small
+   accent dot, and anything deeper stays quiet text — so the document's shape
+   reads at a glance without every tier shouting. */
+.file-viewer-pdf-outline-title.depth-0 {
+  font-size: 12.5px;
+  font-weight: 650;
+  color: var(--accent, var(--text-primary));
+  letter-spacing: -0.01em;
 }
-.page-strip-row .page-strip-caret {
-  width: 3px;
-  align-self: stretch;
+.file-viewer-pdf-outline-title.depth-1 {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--accent-secondary, var(--accent, var(--text-primary)));
 }
-.page-strip-column .page-strip-caret {
-  height: 3px;
-  width: var(--page-thumb-w, 72px);
+.file-viewer-pdf-outline-title.depth-2 {
+  font-size: 11.5px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+.file-viewer-pdf-outline-title.depth-3 {
+  font-size: 11px;
+  font-weight: 400;
+  color: var(--text-secondary, var(--text-muted));
 }
+/* A disabled (unresolvable) entry stays muted whatever its level. */
+.file-viewer-pdf-outline-title:disabled { color: var(--text-secondary, var(--text-muted)); }
 
-/* ── PDF viewer: the page rail ──────────────────────────────────────────────────
-   The <PageStrip> stood on its side, beside the reader. Fixed card box + the
-   canvas's own object-fit handles pages of differing sizes. */
-.file-viewer-pdf-rail {
-  --page-thumb-w: 72px;
-  --page-thumb-h: 96px;
-  flex: 0 0 auto;
-  display: flex;
-  min-height: 0;
-  border-right: 1px solid var(--border-subtle);
+/* "Inferred from text" note when the chapters came from the font-size fallback. */
+.file-viewer-pdf-outline-note {
+  padding: 3px 10px 5px;
+  border-bottom: 1px solid var(--border-subtle);
+  color: var(--text-secondary, var(--text-muted));
+  font-size: 10px;
+  font-style: italic;
+}
+
+/* A thin separator between the contents toggle and the zoom cluster. */
+.file-viewer-pdf-toolbar-sep {
+  align-self: stretch;
+  width: 1px;
+  margin: 3px 2px;
+  background: var(--border-subtle);
+}
+
+/* Hover preview: a floating thumbnail of a contents entry's page. Fixed-position
+   so it escapes the sidebar's scroll clipping and can overhang the page area. */
+.file-viewer-pdf-outline-preview {
+  position: fixed;
+  z-index: 60;
+  padding: 4px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
   background: var(--bg-panel);
+  box-shadow: var(--shadow-lg, 0 6px 24px rgba(0, 0, 0, 0.35));
+  pointer-events: none;
 }
-.file-viewer-pdf-rail .page-strip-column {
-  padding: 6px;
+.file-viewer-pdf-outline-preview img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: 2px;
+  /* Keep the page white in dark themes — the pages elsewhere stay as authored. */
+  background: #fff;
+}
+.file-viewer-pdf-outline-preview-loading {
+  padding: 24px 8px;
+  text-align: center;
+  color: var(--text-secondary, var(--text-muted));
+  font-size: 11px;
+}
+.file-viewer-pdf-outline-preview-cap {
+  padding: 3px 2px 1px;
+  text-align: center;
+  color: var(--text-secondary, var(--text-muted));
+  font-size: 10px;
 }
 
 /* A viewer-wide notice bar (unsaved edits vs. a changed file, a failed save). */
@@ -8496,7 +11768,7 @@ select option {
 }
 .file-viewer-banner button {
   border: 1px solid var(--border-color);
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   background: var(--bg-panel);
   color: var(--text-primary);
   cursor: pointer;
@@ -8529,7 +11801,7 @@ select option {
 .filetype-settings-row input {
   height: 34px;
   border: 1px solid var(--control-border);
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   background: var(--control-bg);
   color: var(--text-primary);
   padding: 0 9px;
@@ -8591,7 +11863,13 @@ select option {
 .project-dialog textarea:hover,
 .project-dialog textarea:focus,
 .project-dialog select:hover,
-.project-dialog select:focus {
+.project-dialog select:focus,
+.menu-form input:hover,
+.menu-form input:focus,
+.menu-form textarea:hover,
+.menu-form textarea:focus,
+.menu-form select:hover,
+.menu-form select:focus {
   border-color: var(--accent);
   outline: none;
 }
@@ -8645,12 +11923,12 @@ select option {
   gap: 3px;
   text-align: left;
   padding: 10px 12px;
-  border-radius: 8px;
+  border-radius: var(--radius);
   border: 1px solid var(--border-color);
   background: var(--bg-panel);
   color: var(--text-primary);
   cursor: pointer;
-  transition: border-color 0.12s ease, background 0.12s ease;
+  transition: border-color var(--transition), background var(--transition);
 }
 
 .settings-nav-item:hover {
@@ -8677,7 +11955,7 @@ select option {
   flex-direction: column;
   gap: 6px;
   padding: 10px 12px;
-  border-radius: 8px;
+  border-radius: var(--radius);
   border: 1px solid var(--border-color);
   background: var(--bg-panel);
 }
@@ -8725,7 +12003,7 @@ select option {
   gap: 12px;
   padding: 8px 10px;
   border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
-  border-radius: 6px;
+  border-radius: var(--radius);
 }
 
 .archived-project-info {
@@ -8748,7 +12026,7 @@ select option {
   letter-spacing: 0.04em;
   color: var(--text-secondary);
   border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   padding: 0 4px;
 }
 
@@ -8840,7 +12118,7 @@ select option {
   flex: 1;
   height: 34px;
   border: 1px solid var(--control-border);
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   background: var(--control-bg);
   color: var(--text-primary);
   padding: 0 9px;
@@ -8854,7 +12132,7 @@ select option {
 
 .project-ending-form button {
   border: 1px solid var(--control-border);
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   background: var(--control-bg);
   color: var(--text-primary);
   cursor: pointer;
@@ -8878,7 +12156,7 @@ select option {
 .project-ending-toggle {
   min-height: 32px;
   border: 1px solid var(--control-border);
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   background: var(--control-bg);
   color: var(--text-primary);
   cursor: pointer;
@@ -8937,6 +12215,19 @@ select option {
   padding-top: 8px;
 }
 
+.remote-host-settings-row {
+  display: grid;
+  align-items: center;
+  gap: 8px;
+  grid-template-columns: minmax(90px, 180px) minmax(120px, 1fr) auto;
+}
+
+.remote-host-settings-add {
+  border-top: 1px solid var(--border-subtle);
+  padding-top: 8px;
+  margin-top: 2px;
+}
+
 .settings-role-icon {
   text-align: center;
 }
@@ -8956,7 +12247,15 @@ select option {
   border-bottom: 1px solid var(--border-subtle);
 }
 
-.project-dialog label {
+/* `.menu-form` is the ONE canonical form context reused wherever fields appear
+   OUTSIDE a `.project-dialog` — chiefly forms embedded in header popover menus
+   (`.tab-new-menu`, e.g. the global-machines "Add a machine" form), which get no
+   field styling from the popover surface on their own. It carries the exact same
+   label/input/select/textarea look as `.project-dialog`, so a form reads
+   identically in a dialog or a menu. New menus with a form: add `menu-form` to
+   the form container. */
+.project-dialog label,
+.menu-form label {
   display: flex;
   flex-direction: column;
   gap: 5px;
@@ -8975,16 +12274,31 @@ select option {
 
 .project-dialog input,
 .project-dialog select,
-.project-dialog textarea {
+.project-dialog textarea,
+.menu-form input,
+.menu-form select,
+.menu-form textarea {
   height: 34px;
   border: 1px solid var(--control-border);
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   background: var(--control-bg);
   color: var(--text-primary);
   padding: 0 8px;
 }
 
-.project-dialog textarea {
+/* Menu-form fields stretch to the popover width (their labels are flex columns,
+   and a menu is narrow — a default-width input would sit oddly short). Scoped to
+   `.menu-form` so it can't disturb a `.project-dialog` input that shares a flex
+   row with a button (e.g. `.folder-picker-row`). */
+.menu-form input,
+.menu-form select,
+.menu-form textarea {
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.project-dialog textarea,
+.menu-form textarea {
   min-height: 72px;
   padding: 8px;
   resize: vertical;
@@ -9060,94 +12374,266 @@ select option {
   opacity: 0.5;
 }
 
-/* OpenVPN activation password prompt */
-.vpn-prompt-dialog {
-  max-width: 380px;
+/* OpenVPN activation password prompt */
+.vpn-prompt-dialog {
+  max-width: 380px;
+}
+
+.vpn-prompt-text {
+  color: var(--text-primary);
+  margin: 0 0 8px;
+}
+
+.vpn-prompt-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 14px;
+}
+
+.vpn-prompt-actions button {
+  border: 1px solid var(--control-border);
+  border-radius: var(--radius-sm);
+  padding: 7px 12px;
+  background: var(--control-bg);
+  color: var(--text-primary);
+  cursor: pointer;
+}
+
+.vpn-prompt-actions button.primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--bg-main);
+  font-weight: 600;
+}
+
+.vpn-prompt-actions button.primary:hover:not(:disabled) {
+  background: var(--accent-hover);
+  border-color: var(--accent-hover);
+}
+
+.folder-picker-row span {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-primary);
+}
+
+.folder-picker-row button,
+.project-dialog-actions button {
+  border: 1px solid var(--control-border);
+  border-radius: var(--radius-sm);
+  padding: 7px 10px;
+  background: var(--control-bg);
+  color: var(--text-primary);
+  cursor: pointer;
+}
+
+.folder-picker-row button:hover {
+  background: var(--control-hover-bg);
+  border-color: var(--accent);
+}
+
+/* Dialog action buttons share the unified accent-underline hover, so their
+   border stays neutral on hover — an accent border here would double the
+   underline's bottom edge (see the unified menu-button block below). */
+.project-dialog-actions button:hover {
+  background: var(--control-hover-bg);
+}
+
+.project-dialog-actions button:last-child {
+  background: var(--accent);
+  color: var(--bg-main);
+  border-color: var(--accent);
+}
+
+.project-dialog-actions button:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+/* Destructive confirm (e.g. delete git history) — overrides the accent style
+   the last-child rule otherwise applies. */
+.project-dialog-actions button.danger,
+.project-dialog-actions button.danger:last-child {
+  background: var(--danger);
+  color: var(--bg-main);
+  border-color: var(--danger);
+}
+
+.project-dialog-path {
+  min-height: 16px;
+  color: var(--text-muted);
+  font-size: 12px;
+  word-break: break-all;
+}
+
+/* Remote machines manager (multi-host remote, docs/multi_host_remote_plan.md).
+   Reuses the app's dialog surface; each worker is a bordered card matching the
+   settings toggle-card look. */
+.remote-machine-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px 12px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  background: var(--bg-panel);
+}
+
+.remote-machine-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.remote-machine-name {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.remote-machine-tag {
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-color);
+  background: var(--bg-elevated);
+  color: var(--text-secondary);
+}
+
+.remote-machine-target {
+  flex: 1;
+  min-width: 0;
+  font-size: 12px;
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.remote-machine-status {
+  min-height: 16px;
+  font-size: 12px;
+  color: var(--text-secondary);
 }
 
-.vpn-prompt-text {
-  color: var(--text-primary);
-  margin: 0 0 8px;
+.remote-machine-status.error {
+  color: var(--danger);
 }
 
-.vpn-prompt-actions {
+.remote-machine-actions {
   display: flex;
-  justify-content: flex-end;
   gap: 8px;
-  margin-top: 14px;
+  flex-wrap: wrap;
+  align-items: center;
 }
 
-.vpn-prompt-actions button {
+.remote-machine-actions button {
   border: 1px solid var(--control-border);
-  border-radius: 0;
-  padding: 7px 12px;
+  border-radius: var(--radius-sm);
+  padding: 6px 10px;
   background: var(--control-bg);
   color: var(--text-primary);
+  font-size: 12px;
   cursor: pointer;
 }
 
-.vpn-prompt-actions button.primary {
-  background: var(--accent);
+.remote-machine-actions button:hover:not(:disabled) {
+  background: var(--control-hover-bg);
   border-color: var(--accent);
+}
+
+.remote-machine-actions button:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+.remote-machine-actions button.danger {
+  border-color: var(--danger);
+  color: var(--danger);
+}
+
+.remote-machine-actions button.danger:hover:not(:disabled) {
+  background: var(--danger);
   color: var(--bg-main);
-  font-weight: 600;
 }
 
-.vpn-prompt-actions button.primary:hover:not(:disabled) {
-  background: var(--accent-hover);
-  border-color: var(--accent-hover);
+/* Per-worker toggle rows: label text on the left, switch on the right. */
+.remote-machine-toggle {
+  flex-direction: row !important;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
 }
 
-.folder-picker-row span {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--text-primary);
+.remote-machine-toggle > span:first-child {
+  color: var(--text-secondary);
+  font-size: 12px;
 }
 
-.folder-picker-row button,
-.project-dialog-actions button {
-  border: 1px solid var(--control-border);
-  border-radius: 0;
-  padding: 7px 10px;
-  background: var(--control-bg);
-  color: var(--text-primary);
-  cursor: pointer;
+/* Wraps the worker cards so the group keeps the dialog's own card-to-card
+   spacing. */
+.remote-machine-worker-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }
 
-.folder-picker-row button:hover,
-.project-dialog-actions button:hover {
-  background: var(--control-hover-bg);
+/* The confirm-shared-path panel an incoming global machine seeds — an accent
+   border marks it as the thing that just landed, distinct from an ordinary
+   worker card. */
+.remote-machine-drop-panel {
   border-color: var(--accent);
 }
 
-.project-dialog-actions button:last-child {
-  background: var(--accent);
-  color: var(--bg-main);
-  border-color: var(--accent);
+/* The "Add a machine" block. Reads as one of the worker cards above it — same
+   border/radius/background/padding — so the form doesn't look like a stray,
+   unframed section tacked onto the list of entries. */
+.remote-machine-add {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 10px 12px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  background: var(--bg-panel);
 }
 
-.project-dialog-actions button:disabled {
-  opacity: 0.55;
-  cursor: default;
+.remote-machine-add-title {
+  font-weight: 650;
+  color: var(--accent-secondary, var(--accent));
+  font-size: 13px;
 }
 
-/* Destructive confirm (e.g. delete git history) — overrides the accent style
-   the last-child rule otherwise applies. */
-.project-dialog-actions button.danger,
-.project-dialog-actions button.danger:last-child {
-  background: var(--danger);
-  color: var(--bg-main);
-  border-color: var(--danger);
+.remote-machine-add-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
 }
 
-.project-dialog-path {
-  min-height: 16px;
-  color: var(--text-muted);
-  font-size: 12px;
-  word-break: break-all;
+.remote-machine-loggedin {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--text-primary);
+}
+
+/* Only the text span flexes — NOT the ConnLamp, which is also a <span> child.
+   A bare `> span` would stretch the 8px round lamp into a green bar. */
+.remote-machine-loggedin > span:not(.conn-lamp) {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.remote-machine-loggedin > button {
+  flex: none;
 }
 
 .extend-summary {
@@ -9177,7 +12663,7 @@ select option {
   display: block;
   padding: 6px 10px;
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: var(--radius);
   background: var(--bg-panel);
   color: var(--text-primary);
   font-family: var(--font-mono, monospace);
@@ -9201,7 +12687,7 @@ select option {
   padding: 2px 10px;
   font-size: 12px;
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: var(--radius);
   background: var(--bg-panel);
   color: var(--text-primary);
   cursor: pointer;
@@ -9231,104 +12717,327 @@ select option {
   width: min(620px, calc(100vw - 32px));
 }
 
-.local-loss-title {
-  color: var(--warning);
+.local-loss-title {
+  color: var(--warning);
+}
+
+.local-loss-lede {
+  font-size: 12px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+  margin: 0;
+}
+
+.local-loss-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  overflow-y: auto;
+  max-height: 46vh;
+}
+
+.local-loss-entry {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 12px;
+  background: var(--bg-input);
+  border: 1px solid var(--border-subtle);
+  border-left: 3px solid var(--warning);
+  border-radius: var(--radius);
+}
+
+.local-loss-entry-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.local-loss-badge {
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.local-loss-badge-deleted {
+  color: var(--danger);
+}
+
+.local-loss-badge-overwritten {
+  color: var(--warning);
+}
+
+.local-loss-when {
+  font-size: 11px;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+
+.local-loss-op {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.local-loss-paths {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+  font-size: 11px;
+  color: var(--text-primary);
+  max-height: 160px;
+  overflow-y: auto;
+  word-break: break-all;
+}
+
+.local-loss-more {
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+.local-loss-recovery {
+  font-size: 11px;
+  color: var(--text-muted);
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+/* Nothing to recover from: say so in the colour that means it, rather than
+   leaving the line blank and letting the user assume git has a copy. */
+.local-loss-gone {
+  color: var(--danger);
+}
+
+/* Remote-usage warning: the host looked already in use right after connect
+   (high load/memory, or another logged-in session). Same dialog surface as
+   local-loss, same warning-coloured title — but advisory, not a record of
+   something destroyed, so unlike local-loss it dismisses on backdrop click. */
+/* Canonical framed dialog (.settings-title-row header + .dialog-scroll body);
+   only the width is this dialog's own — chrome, header tint and scroll frame all
+   come from the shared .project-dialog.dialog-framed rules. */
+.remote-usage-dialog {
+  width: min(560px, calc(100vw - 32px));
+}
+
+.remote-usage-lede {
+  font-size: 12px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+  margin: 0;
+}
+
+/* One card per connected host (multi-host remote): its own bordered, elevated
+   surface — rather than a divider-separated block — is what keeps two hosts'
+   stats from reading as one continuous list when several are connected. */
+.remote-usage-host {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px 14px;
+  background: var(--bg-panel);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-1);
+}
+
+.remote-usage-host + .remote-usage-host {
+  margin-top: 2px;
+}
+
+.remote-usage-host-title {
+  font-size: 13px;
+  font-weight: 650;
+  color: var(--text-primary);
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.remote-usage-reasons {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 0;
+  padding-left: 18px;
+  font-size: 12px;
+  color: var(--text-primary);
+}
+
+.remote-usage-stats {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  /* No border/background of its own — the host card above already provides
+     the boundary; a nested box here just read as a card-in-a-card. */
+}
+
+.remote-usage-stat {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.remote-usage-stat-label {
+  font-size: 11px;
+  color: var(--text-muted);
 }
 
-.local-loss-lede {
+.remote-usage-stat-value {
   font-size: 12px;
-  color: var(--text-secondary);
-  line-height: 1.5;
-  margin: 0;
+  color: var(--text-primary);
+  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
 }
 
-.local-loss-list {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  overflow-y: auto;
-  max-height: 46vh;
+/* Traffic-light dot for CPU/GPU utilization: green (idle) → orange → red. */
+.remote-usage-light {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin-right: 6px;
+  border-radius: 50%;
+  vertical-align: baseline;
+  background: var(--text-muted);
 }
 
-.local-loss-entry {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 10px 12px;
-  background: var(--bg-input);
-  border: 1px solid var(--border-subtle);
-  border-left: 3px solid var(--warning);
-  border-radius: var(--radius);
+.remote-usage-light.is-green {
+  background: var(--success);
+  box-shadow: 0 0 4px var(--success);
 }
 
-.local-loss-entry-head {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 10px;
+.remote-usage-light.is-orange {
+  background: var(--warning);
+  box-shadow: 0 0 4px var(--warning);
 }
 
-.local-loss-badge {
-  font-size: 12px;
-  font-weight: 650;
+.remote-usage-light.is-red {
+  background: var(--danger);
+  box-shadow: 0 0 4px var(--danger);
 }
 
-.local-loss-badge-deleted {
-  color: var(--danger);
+.remote-usage-stat-sub {
+  color: var(--text-muted);
+  font-family: inherit;
 }
 
-.local-loss-badge-overwritten {
-  color: var(--warning);
+.remote-usage-section {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 
-.local-loss-when {
+.remote-usage-section-title {
   font-size: 11px;
+  font-weight: 650;
   color: var(--text-muted);
-  white-space: nowrap;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
 }
 
-.local-loss-op {
+.remote-usage-empty {
+  color: var(--text-muted);
+  font-style: italic;
   font-size: 12px;
-  color: var(--text-secondary);
 }
 
-.local-loss-paths {
+.remote-usage-procs {
   display: flex;
   flex-direction: column;
   gap: 2px;
   margin: 0;
   padding: 0;
   list-style: none;
-  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+  max-height: 140px;
+  overflow-y: auto;
+}
+
+.remote-usage-procs li {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
   font-size: 11px;
+  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
   color: var(--text-primary);
-  max-height: 160px;
-  overflow-y: auto;
-  word-break: break-all;
+  padding: 3px 6px;
+  background: var(--bg-input);
+  border-radius: var(--radius);
 }
 
-.local-loss-more {
+.remote-usage-proc-cmd {
+  font-weight: 650;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.remote-usage-proc-user {
+  color: var(--text-secondary);
+}
+
+.remote-usage-proc-pct {
   color: var(--text-muted);
-  font-style: italic;
+  white-space: nowrap;
 }
 
-.local-loss-recovery {
+/* The per-user "Logged in" table: a real grid, not flex, so User / CPU /
+   Sessions / Mem line up column-for-column across every row and the header.
+   Each `li` is `display: contents` so its cells become direct grid items —
+   that's what keeps a data row's columns in the same tracks as the header's. */
+.remote-usage-users {
+  display: grid;
+  grid-template-columns: minmax(60px, max-content) repeat(3, max-content);
+  column-gap: 14px;
+  row-gap: 2px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  max-height: 140px;
+  overflow-y: auto;
   font-size: 11px;
+  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+}
+.remote-usage-users li {
+  display: contents;
+}
+.remote-usage-users-head span {
   color: var(--text-muted);
-  line-height: 1.5;
-  word-break: break-word;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  padding: 0 6px;
 }
-
-/* Nothing to recover from: say so in the colour that means it, rather than
-   leaving the line blank and letting the user assume git has a copy. */
-.local-loss-gone {
-  color: var(--danger);
+.remote-usage-users li:not(.remote-usage-users-head) > span {
+  padding: 3px 6px;
+  background: var(--bg-input);
+  color: var(--text-primary);
 }
-
-.local-loss-actions {
-  display: flex;
+.remote-usage-users li:not(.remote-usage-users-head) > span:first-child {
+  border-top-left-radius: var(--radius);
+  border-bottom-left-radius: var(--radius);
+}
+.remote-usage-users li:not(.remote-usage-users-head) > span:last-child {
+  border-top-right-radius: var(--radius);
+  border-bottom-right-radius: var(--radius);
+}
+.remote-usage-user {
+  font-weight: 650;
+  white-space: nowrap;
+}
+.remote-usage-user-cpu,
+.remote-usage-user-sessions,
+.remote-usage-user-mem {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+.remote-usage-user-cpu {
+  display: inline-flex;
+  align-items: center;
   justify-content: flex-end;
-  gap: 8px;
+  gap: 4px;
 }
 
 .scaffold-popover {
@@ -9470,7 +13179,7 @@ select option {
   border: 1px solid var(--border-subtle);
   background: var(--control-bg);
   cursor: pointer;
-  transition: border-color 0.16s ease, background 0.16s ease;
+  transition: border-color var(--transition), background var(--transition);
 }
 
 .toggle-card:hover {
@@ -9506,6 +13215,19 @@ select option {
   line-height: 1.4;
 }
 
+/* The static twin of `.toggle-card`, borrowing its title/desc typography: shown in
+   place of a dialog's "Connect via OpenVPN" toggle once a tunnel is up machine-wide
+   (`VpnTunnelUpNotice`). Nothing to switch — the tunnel already exists — so it reads
+   as a lit, non-interactive card rather than an off toggle. */
+.vpn-up-card {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 11px 13px;
+  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border-subtle));
+  background: color-mix(in srgb, var(--accent) 9%, var(--control-bg));
+}
+
 /* Sliding pill switch. The checkbox is the real (focusable) control, layered
    transparently over the track; the track's ::after pseudo is the moving knob. */
 .eld-switch {
@@ -9531,10 +13253,10 @@ select option {
 .eld-switch-track {
   position: absolute;
   inset: 0;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   background: color-mix(in srgb, var(--text-secondary) 32%, transparent);
   border: 1px solid var(--control-border);
-  transition: background 0.16s ease, border-color 0.16s ease;
+  transition: background var(--transition), border-color var(--transition);
 }
 
 .eld-switch-track::after {
@@ -9547,7 +13269,7 @@ select option {
   border-radius: 50%;
   background: var(--text-primary);
   transform: translateY(-50%);
-  transition: transform 0.16s ease, background 0.16s ease;
+  transition: transform var(--transition), background var(--transition);
 }
 
 .eld-switch input:checked + .eld-switch-track {
@@ -9655,7 +13377,7 @@ select option {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+  transition: background var(--transition-slow), border-color var(--transition-slow), color var(--transition-slow);
 }
 
 .vpn-connect-btn.vpn-status-connecting {
@@ -9728,7 +13450,7 @@ select option {
   border: 1px solid var(--accent);
   border-radius: var(--radius);
   cursor: pointer;
-  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
+  transition: background var(--transition), border-color var(--transition), opacity var(--transition);
 }
 
 .dialog-connect-btn:hover:not(:disabled) {
@@ -9765,7 +13487,7 @@ select option {
   font-weight: 600;
   color: var(--bg-main);
   cursor: pointer;
-  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
+  transition: background var(--transition), border-color var(--transition), opacity var(--transition), transform var(--transition);
 }
 
 .btn-primary {
@@ -9783,10 +13505,19 @@ select option {
   border-color: var(--accent-hover);
 }
 
+.btn-primary:active:not(:disabled) {
+  background: var(--accent-active);
+  border-color: var(--accent-active);
+}
+
 .btn-danger:hover:not(:disabled) {
   filter: brightness(1.08);
 }
 
+.btn-danger:active:not(:disabled) {
+  filter: brightness(0.94);
+}
+
 .btn-primary:disabled,
 .btn-danger:disabled {
   opacity: 0.55;
@@ -9797,6 +13528,105 @@ select option {
   width: 100%;
 }
 
+/* ── Unified menu-button interaction (accent underline + press) ────────────
+   Every menu-row button — the context menu, the +tab menu, the custom
+   dropdown menu, and the project-switcher add menu — shares ONE hover/press
+   feel so they never drift: a theme-accent underline that wipes in from the
+   leading edge on hover, and a quick scale-down on click. The per-menu rules
+   above still own each menu's layout, colours and background-hover; this only
+   layers the shared accent underline and the press animation on top. The
+   hover accent was moved OUT of the box border (now kept neutral, so the
+   underline reads cleanly instead of doubling the bottom edge) — the accent
+   border survives only as the +tab menu's keyboard `enter-target` and the
+   dropdown's `.selected`, which are distinct "this is picked" signals, not
+   plain hover. */
+.context-menu button,
+.tab-new-menu-item,
+.dropdown .dropdown-menu button,
+.project-switcher-add-menu button,
+.project-dialog-actions button {
+  position: relative;
+  transition: background-color var(--transition), border-color var(--transition),
+    color var(--transition), transform var(--transition);
+}
+
+/* The underline: a pseudo-element pinned to the bottom edge, scaled to 0 on
+   the x-axis and grown to full width on hover. transform-origin left makes it
+   wipe in from the leading edge. Inset to match each row's horizontal padding
+   so it sits under the label, not the full box. */
+.context-menu button::after,
+.tab-new-menu-item::after,
+.dropdown .dropdown-menu button::after,
+.project-switcher-add-menu button::after,
+.project-dialog-actions button::after {
+  content: "";
+  position: absolute;
+  left: 9px;
+  right: 9px;
+  bottom: 3px;
+  height: 2px;
+  border-radius: var(--radius-full);
+  background: var(--accent);
+  transform: scaleX(0);
+  transform-origin: left center;
+  transition: transform var(--transition);
+  pointer-events: none;
+}
+
+.context-menu button:hover:not(:disabled)::after,
+.tab-new-menu-item:hover:not(:disabled)::after,
+.tab-new-menu-item.enter-target::after,
+.dropdown .dropdown-menu button:hover:not(:disabled)::after,
+.project-switcher-add-menu button:hover::after,
+.project-dialog-actions button:hover:not(:disabled)::after {
+  transform: scaleX(1);
+}
+
+/* Danger actions underline in the danger hue, tracking their red text. */
+.context-menu button.danger::after,
+.context-menu-danger-zone button::after {
+  background: var(--danger);
+}
+
+/* Dialog action rows: the filled CTA (last-child) and danger buttons sit on an
+   accent/danger fill, where an accent underline would be invisible — so their
+   underline is drawn in the button's own text colour (--bg-main) instead. */
+.project-dialog-actions button:last-child::after,
+.project-dialog-actions button.danger::after {
+  background: var(--bg-main);
+}
+
+/* Click feedback: a quick press-in, shared by the menu rows AND the CTA
+   buttons so every button in the app answers a click the same way. */
+.context-menu button:active:not(:disabled),
+.tab-new-menu-item:active:not(:disabled),
+.dropdown .dropdown-menu button:active:not(:disabled),
+.project-switcher-add-menu button:active,
+.project-dialog-actions button:active:not(:disabled),
+.btn-primary:active:not(:disabled),
+.btn-danger:active:not(:disabled) {
+  transform: scale(0.97);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .context-menu button::after,
+  .tab-new-menu-item::after,
+  .dropdown .dropdown-menu button::after,
+  .project-switcher-add-menu button::after,
+  .project-dialog-actions button::after {
+    transition: none;
+  }
+  .context-menu button:active:not(:disabled),
+  .tab-new-menu-item:active:not(:disabled),
+  .dropdown .dropdown-menu button:active:not(:disabled),
+  .project-switcher-add-menu button:active,
+  .project-dialog-actions button:active:not(:disabled),
+  .btn-primary:active:not(:disabled),
+  .btn-danger:active:not(:disabled) {
+    transform: none;
+  }
+}
+
 .dialog-connect-terminal {
   display: flex;
   flex-direction: column;
@@ -9819,7 +13649,7 @@ select option {
   height: 180px;
   min-height: 180px;
   display: flex;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   overflow: hidden;
 }
 
@@ -9839,7 +13669,7 @@ select option {
   margin-top: 6px;
   padding: 8px 10px;
   border: 1px solid var(--accent);
-  border-radius: 6px;
+  border-radius: var(--radius);
   background: color-mix(in srgb, var(--accent) 10%, transparent);
   color: var(--text-primary, var(--text));
   font-size: 0.85em;
@@ -9905,7 +13735,7 @@ select option {
   font-size: 12px;
   background: var(--bg-main);
   border: 1px solid var(--border-subtle);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
 
 .sshfs-install-cmd-text {
@@ -9965,7 +13795,7 @@ select option {
 
 .remote-browser-header button {
   border: 1px solid var(--control-border);
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   padding: 5px 9px;
   background: var(--control-bg);
   color: var(--text-primary);
@@ -9988,7 +13818,7 @@ select option {
   flex: 1;
   min-width: 0;
   border: 1px solid var(--control-border);
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   padding: 5px 8px;
   background: var(--control-bg);
   color: var(--text-primary);
@@ -9998,7 +13828,7 @@ select option {
 .remote-newfolder button {
   flex: 0 0 auto;
   border: 1px solid var(--control-border);
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   padding: 5px 9px;
   background: var(--control-bg);
   color: var(--text-primary);
@@ -10103,7 +13933,7 @@ select option {
 
 .activity-cell {
   fill: var(--activity-0);
-  transition: opacity 0.1s;
+  transition: opacity var(--transition);
 }
 .activity-cell:hover { opacity: 0.8; }
 .activity-cell-0 { fill: var(--activity-0); }
@@ -10129,7 +13959,7 @@ select option {
   font-size: 11px;
   cursor: pointer;
   border-radius: 2px;
-  transition: background 0.1s, border-color 0.1s, color 0.1s;
+  transition: background var(--transition), border-color var(--transition), color var(--transition);
 }
 
 .activity-year-btn:hover {
@@ -10158,13 +13988,13 @@ select option {
 
 .activity-tooltip {
   padding: 5px 9px;
-  background: var(--bg-panel);
+  background: var(--bg-elevated);
   border: 1px solid var(--border-color);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   font-size: 11px;
   color: var(--text-primary);
   white-space: nowrap;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  box-shadow: var(--shadow-2);
 }
 
 .activity-tooltip strong {
@@ -10197,7 +14027,7 @@ select option {
   margin-top: 0;
   padding: 10px 12px;
   border: 1px solid var(--border-subtle);
-  border-radius: 8px;
+  border-radius: var(--radius);
   background: var(--bg-elevated, rgba(255, 255, 255, 0.03));
 }
 .agent-list-entry .settings-section-title {
@@ -10282,7 +14112,7 @@ select option {
   font-size: 10px;
   line-height: 1;
   padding: 2px 5px;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   background: var(--control-bg);
   color: var(--text-secondary);
   white-space: nowrap;
@@ -10292,6 +14122,23 @@ select option {
   color: var(--success);
 }
 
+/* ── The device's own GPU memory: how much headroom is left before the next
+      model is loaded. Toned by ratio, like the header's GPU row. ───────────── */
+.local-model-gpu {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+}
+.local-model-gpu.low {
+  color: var(--success);
+}
+.local-model-gpu.medium {
+  color: var(--warning);
+}
+.local-model-gpu.high {
+  color: var(--danger);
+}
+
 /* ── Loaded-model row: green "resident" lamp + per-task tag chips ─────────── */
 /* The row (not the inner name button) owns the hover border/fill so the
    highlight wraps the task tags below the name, not just the name itself. */
@@ -10300,8 +14147,8 @@ select option {
   flex-direction: column;
   background: var(--control-bg);
   border: 1px solid transparent;
-  border-radius: 0;
-  transition: background-color 0.1s, border-color 0.1s;
+  border-radius: var(--radius-sm);
+  transition: background-color var(--transition), border-color var(--transition);
 }
 .local-model-row:hover {
   background-color: var(--control-hover-bg);
@@ -10361,11 +14208,132 @@ select option {
     opacity: 0.35;
   }
 }
+/* A CONNECTED host with live work on it (≥1 tmux session, `stores/hostBusy`).
+   Deliberately not the `connecting` pulse: that one fades the dot most of the
+   way out, which reads as "pending / not there yet". This one keeps the dot at
+   full opacity and breathes its halo instead, so it reads as a heartbeat — the
+   machine is up AND something is running on it. Same green, so the connection
+   state it carries is never in doubt, and it never adds a lamp: a busy fleet
+   pulses the green lamp it already had.
+
+   Two intensities on purpose. In the **top bar** the lamp is an ambient badge
+   sitting in permanent peripheral vision, so it only breathes its halo — a dot
+   that visibly grew and shrank up there all day would be a nag. In a **menu or
+   dialog** (below) the lamp is something you opened to read, and it has to be
+   unmistakable at a glance across sixteen rows, so it also scales. */
+/* The halo lives on a pseudo-element whose box-shadow is STATIC, and the pulse
+   animates that element's `opacity` (+ `transform` for the strong variant). This
+   is not a style preference — it is the difference between a composited animation
+   and a repainting one. `box-shadow` is a paint property: animating it re-rasterises
+   a blurred shadow every frame, and with the DMABUF renderer disabled (see
+   `lib.rs`) that rasterisation is pure CPU. Sixteen rows of it saturated a core for
+   as long as the Machines menu was open. `opacity`/`transform` animate on the
+   already-rasterised layer instead, so the same visual costs ~nothing. */
+.conn-lamp-busy {
+  position: relative;
+}
+.conn-lamp-busy::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  pointer-events: none;
+  box-shadow:
+    0 0 9px color-mix(in srgb, var(--success) 95%, transparent),
+    0 0 14px color-mix(in srgb, var(--success) 45%, transparent);
+  will-change: opacity;
+  animation: conn-lamp-busy-pulse 1.8s ease-in-out infinite;
+}
+@keyframes conn-lamp-busy-pulse {
+  0%,
+  100% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+/* The louder pulse, scoped to the surfaces you deliberately open: the header
+   Machines/VPN menus' rows and the Remote-machines hub's host cards. The dot
+   swells and its halo doubles, so "which of these machines is actually working"
+   is answerable without reading a single label. `transform` + `box-shadow` only,
+   so nothing reflows and a 16-row list stays cheap to animate. */
+.machines-indicator-menu .conn-lamp-busy,
+.vpn-indicator-menu .conn-lamp-busy,
+.remote-machine-card .conn-lamp-busy {
+  animation: conn-lamp-busy-pulse-strong 1.5s ease-in-out infinite;
+  will-change: transform;
+}
+/* The dot scales; its halo (the ::after above) swells and brightens with it. Both
+   keyframe tracks are transform/opacity only — see the note on `.conn-lamp-busy`. */
+.machines-indicator-menu .conn-lamp-busy::after,
+.vpn-indicator-menu .conn-lamp-busy::after,
+.remote-machine-card .conn-lamp-busy::after {
+  box-shadow:
+    0 0 10px var(--success),
+    0 0 18px color-mix(in srgb, var(--success) 55%, transparent);
+  animation: conn-lamp-busy-halo-strong 1.5s ease-in-out infinite;
+}
+@keyframes conn-lamp-busy-halo-strong {
+  0%,
+  100% {
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+/* The trough goes well BELOW the resting dot size, not down to it: swinging
+   0.45→1.45 makes the beat read across a long row list from the corner of the
+   eye, where a 1.0→1.45 swell just looks like a slightly bigger dot. The lamp
+   never disappears at the trough — a lamp that blinks out reads as a connection
+   dropping, which is the one thing this must not say. */
+@keyframes conn-lamp-busy-pulse-strong {
+  0%,
+  100% {
+    transform: scale(0.45);
+  }
+  50% {
+    transform: scale(1.45);
+  }
+}
+/* Respect a reduced-motion preference: keep the stronger halo (the busy state is
+   still distinguishable at a glance) but stop the animation. */
+@media (prefers-reduced-motion: reduce) {
+  .conn-lamp-busy,
+  .machines-indicator-menu .conn-lamp-busy,
+  .vpn-indicator-menu .conn-lamp-busy,
+  .remote-machine-card .conn-lamp-busy {
+    animation: none;
+    transform: none;
+  }
+  .conn-lamp-busy::after,
+  .machines-indicator-menu .conn-lamp-busy::after,
+  .vpn-indicator-menu .conn-lamp-busy::after,
+  .remote-machine-card .conn-lamp-busy::after {
+    animation: none;
+    opacity: 1;
+  }
+}
+/* A status lamp aggregated over several hosts: the dot plus a small count of how
+   many hosts share that state (shown only when more than one). */
+.conn-lamp-count {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+.conn-lamp-count-num {
+  font-size: 9px;
+  line-height: 1;
+  font-weight: 600;
+  color: var(--text-secondary);
+  font-variant-numeric: tabular-nums;
+}
 .local-model-default-tag {
   font-size: 9px;
   line-height: 1;
   padding: 2px 5px;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   flex-shrink: 0;
   text-transform: uppercase;
   letter-spacing: 0.04em;
@@ -10383,12 +14351,12 @@ select option {
   font-size: 10px;
   line-height: 1;
   padding: 3px 7px;
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   border: 1px solid var(--control-border);
   background: var(--control-bg);
   color: var(--text-secondary);
   cursor: pointer;
-  transition: background-color 0.1s, border-color 0.1s, color 0.1s;
+  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
 }
 .local-model-role-chip:hover {
   border-color: var(--accent);
@@ -10577,7 +14545,7 @@ select option {
   font-size: 11px;
   padding: 2px 8px;
   border: 1px solid var(--control-border);
-  border-radius: 10px;
+  border-radius: var(--radius-lg);
   background: var(--control-bg);
   color: var(--text-secondary);
   cursor: pointer;
@@ -10612,7 +14580,7 @@ select option {
   font-size: 11px;
   padding: 3px 8px;
   border: 1px solid var(--control-border);
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   background: var(--control-bg);
   color: var(--text-primary);
   cursor: pointer;
@@ -10684,7 +14652,7 @@ select option {
 
 .ollama-download-bar {
   height: 5px;
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   background: var(--border-subtle);
   overflow: hidden;
 }
@@ -10692,12 +14660,12 @@ select option {
 .ollama-download-bar-fill {
   height: 100%;
   background: var(--accent, var(--text-primary));
-  transition: width 0.2s ease;
+  transition: width var(--transition-slow);
 }
 
 .ollama-download-bar-fill.indeterminate {
   width: 35%;
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   animation: ollama-download-indeterminate 1.1s ease-in-out infinite;
 }
 
@@ -10781,7 +14749,7 @@ select option {
   font-size: 10px;
   padding: 2px 7px;
   border: 1px solid var(--control-border);
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   background: var(--control-bg);
   color: var(--text-primary);
   cursor: pointer;
@@ -10802,10 +14770,10 @@ select option {
 .activity-window {
   display: flex;
   flex-direction: column;
-  background: var(--bg-panel);
+  background: var(--bg-elevated);
   border: 1px solid var(--border-color);
-  border-radius: 0;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.48);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-3);
   min-width: 320px;
 }
 
@@ -10859,10 +14827,10 @@ select option {
   transform: translate(-50%, -50%);
   z-index: 500;
   padding: 10px 20px;
-  background: var(--bg-panel);
+  background: var(--bg-elevated);
   border: 1px solid var(--border-color);
-  border-radius: 6px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-3);
   font-size: 0.85rem;
   color: var(--text-secondary);
   font-family: monospace;
@@ -10929,7 +14897,7 @@ select option {
   gap: 5px;
   padding: 3px 5px;
   border: none;
-  border-radius: 5px;
+  border-radius: var(--radius-sm);
   background: transparent;
   cursor: pointer;
 }
@@ -10952,7 +14920,7 @@ select option {
 .remote-connect-vpn-warning {
   margin: 2px 0 0;
   padding: 6px 8px;
-  border-radius: 5px;
+  border-radius: var(--radius-sm);
   border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
   background: color-mix(in srgb, var(--warning) 10%, transparent);
   font-size: 11px;
@@ -10965,11 +14933,33 @@ select option {
    no matter which project is active, because the tunnel reroutes the whole OS.
    Rides the shared .global-apps-menu / .tab-new-menu chrome so it reads as one
    of the header menus rather than a bespoke widget. */
-.vpn-indicator-btn {
+.vpn-indicator-btn,
+.machines-indicator-btn {
+  /* Unlike the other .global-apps-menu-btn siblings, this one reads as a
+     quiet status readout (lamp + label), not a button — so its inherited
+     button box (background/border) is stripped back to plain text/icon. */
   display: inline-flex;
   align-items: center;
   gap: 5px;
+  min-width: 0;
+  height: auto;
+  padding: 2px 4px;
   border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+}
+.vpn-indicator-btn:hover,
+.vpn-indicator-btn[aria-expanded="true"],
+.machines-indicator-btn:hover,
+.machines-indicator-btn[aria-expanded="true"] {
+  background: transparent;
+  border-color: transparent;
+}
+.vpn-indicator-btn:hover .vpn-indicator-label,
+.vpn-indicator-btn[aria-expanded="true"] .vpn-indicator-label,
+.machines-indicator-btn:hover .vpn-indicator-label,
+.machines-indicator-btn[aria-expanded="true"] .vpn-indicator-label {
+  color: var(--text-primary);
 }
 .vpn-indicator-label {
   font-size: 9px;
@@ -10977,10 +14967,19 @@ select option {
   color: var(--text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.04em;
+  transition: color var(--transition);
 }
 .vpn-indicator-menu {
   width: 268px;
   color: var(--text-primary);
+  /* Anchored under the 44px header bar (top: calc(100% + 4px)) — with enough
+     rows (many global machines, or many stored .ovpn configs) the menu would
+     otherwise grow past the bottom of the window. It is capped here, but the
+     menu ELEMENT does not scroll: its `.menu-scroll-region` child does, so the
+     accent title stays pinned and the scrollbar starts below the header (the
+     unified scrolling-menu shape — see `.menu-scroll-region`). */
+  max-height: calc(100vh - 72px);
+  overflow: visible;
 }
 .vpn-indicator-note {
   padding: 6px 10px 8px;
@@ -11021,7 +15020,7 @@ select option {
   margin-top: 2px;
   padding: 3px 9px;
   border: 1px solid var(--border, var(--text-secondary));
-  border-radius: 5px;
+  border-radius: var(--radius-sm);
   background: transparent;
   color: var(--danger, var(--text-primary));
   font-size: 11px;
@@ -11041,7 +15040,7 @@ select option {
   margin-top: 2px;
   padding: 3px 9px;
   border: 1px solid var(--accent, var(--text-secondary));
-  border-radius: 5px;
+  border-radius: var(--radius-sm);
   background: transparent;
   color: var(--accent, var(--text-primary));
   font-size: 11px;
@@ -11050,6 +15049,31 @@ select option {
 .vpn-indicator-connect:hover {
   background: color-mix(in srgb, var(--accent, var(--text-secondary)) 14%, transparent);
 }
+/* Connect + Remove share a stored config's row: side by side, not stacked. */
+.vpn-indicator-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 2px;
+}
+.vpn-indicator-actions .vpn-indicator-connect,
+.vpn-indicator-actions .vpn-indicator-remove {
+  margin-top: 0;
+}
+/* Remove: same danger-ghost as Disconnect — both take something away. */
+.vpn-indicator-remove {
+  align-self: flex-start;
+  padding: 3px 9px;
+  border: 1px solid var(--border, var(--text-secondary));
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--danger, var(--text-primary));
+  font-size: 11px;
+  cursor: pointer;
+}
+.vpn-indicator-remove:hover {
+  background: color-mix(in srgb, var(--danger, var(--text-secondary)) 14%, transparent);
+}
 /* "Connect on launch", per config: the machine-level twin of a project's
    auto-connect. Sits under the row's action button because it is a property of the
    tunnel, not of this click. */
@@ -11066,6 +15090,20 @@ select option {
   cursor: default;
   opacity: 0.6;
 }
+/* The Save-password toggle row sits inside a `.menu-form` (the add-machine form),
+   whose `label` rule would otherwise stack it into a column — keep it a row with
+   the switch beside its text, matching every other toggle row. */
+.menu-form .vpn-indicator-auto {
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+}
+/* The inline retry-password field shares its row with Retry/Cancel buttons — let
+   the password wrap take the remaining width so the field isn't shrunk to nothing. */
+.vpn-indicator-actions .password-input-wrap {
+  flex: 1;
+}
 .vpn-indicator-hint {
   font-size: 10px;
   line-height: 1.4;
@@ -11083,6 +15121,324 @@ select option {
   word-break: break-word;
 }
 
+/* ── Header Machines indicator (MachinesIndicator) ──────────────────────────
+   Rides the same .global-apps-menu / .tab-new-menu / .vpn-indicator-* chrome
+   as VpnIndicator — a global machine list is the same "machine-wide, not
+   project-scoped" shape as the VPN tunnel registry. Only what's genuinely
+   different (the draggable rows, the drop-zone highlight) gets its own class. */
+.machines-indicator-menu {
+  width: 280px;
+}
+.machines-indicator-row {
+  cursor: grab;
+}
+.machines-indicator-row:active {
+  cursor: grabbing;
+}
+/* Per-row expand toggle: keeps a row to one line (lamp + label + actions) by
+   default, with address/system-monitor/auto-connect behind it — a long machine
+   list stays scannable instead of every row's full detail always being open. */
+.machines-row-expand-btn {
+  margin-left: auto;
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 10px;
+  line-height: 1;
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+}
+.machines-row-expand-btn:hover {
+  color: var(--text-primary);
+  background: color-mix(in srgb, var(--text-secondary) 14%, transparent);
+}
+
+/* A row's steady-state actions are ICONS on the SAME line as the lamp, the label
+   and the ▸ expand toggle: four worded buttons ("Reconnect", "Disconnect",
+   "Edit…", "Remove") wrapped onto two lines in a 280px menu and cost every row a
+   second row of height. The words survive as title/aria-label, so nothing is lost
+   to a hover or a screen reader — and the *armed* confirm states (Remove /
+   Disconnect / Retry / Edit) still replace them with worded buttons below, because
+   a destructive confirm must never be a glyph.
+   The label flexes so a long machine name ellipsizes into the icons rather than
+   pushing them off the row; `margin-left: auto` on the group is what puts the icon
+   cluster + expand toggle hard right (the expand button drops its own auto margin,
+   or the two autos would split the slack and strand it mid-row). */
+.vpn-indicator-head .vpn-indicator-config {
+  flex: 1;
+  min-width: 0;
+}
+.machines-row-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+/* The expand toggle keeps a slightly wider gap than the icons keep between
+   themselves — it is a different kind of control (it opens the row, it doesn't
+   act on the machine), so it reads as its own thing rather than a fifth action. */
+.machines-row-actions + .machines-row-expand-btn {
+  margin-left: 2px;
+}
+
+.machines-row-action {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 1px solid var(--border, var(--text-secondary));
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+}
+.machines-row-action:hover {
+  color: var(--text-primary);
+  background: color-mix(in srgb, var(--text-secondary) 14%, transparent);
+}
+.machines-row-action:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.machines-row-action.is-accent {
+  border-color: var(--accent, var(--text-secondary));
+  color: var(--accent, var(--text-primary));
+}
+.machines-row-action.is-accent:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--accent, var(--text-secondary)) 14%, transparent);
+}
+.machines-row-action.is-danger {
+  color: var(--danger, var(--text-primary));
+}
+.machines-row-action.is-danger:hover:not(:disabled) {
+  color: var(--danger, var(--text-primary));
+  background: color-mix(in srgb, var(--danger, var(--text-secondary)) 14%, transparent);
+}
+
+/* Reorder grip: the ONLY part of a machine row that starts a drag, so every
+   button beside it stays clickable. Pointer-driven (see MachinesIndicator) —
+   `touch-action: none` is what stops the menu from scrolling instead of
+   dragging, and `cursor: grab` is the whole affordance. */
+.machines-row-grip {
+  flex-shrink: 0;
+  width: 14px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin-right: 2px;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 12px;
+  line-height: 1;
+  opacity: 0.5;
+  cursor: grab;
+  touch-action: none;
+}
+.machines-row-grip:hover,
+.machines-row-grip:focus-visible {
+  opacity: 1;
+  color: var(--text-primary);
+}
+.machines-row-grip:active {
+  cursor: grabbing;
+}
+
+/* The row being dragged: it follows the cursor (an inline translateY set by
+   MachinesIndicator) as a dimmed copy, while the list under it holds still and
+   only the insertion marker below moves — so the rects measured at pointerdown
+   stay valid for the whole gesture. */
+.machines-indicator-row.reorder-dragging {
+  opacity: 0.55;
+  position: relative;
+  z-index: 2;
+  background: color-mix(in srgb, var(--accent, var(--text-secondary)) 12%, transparent);
+  border-radius: var(--radius-sm);
+}
+
+/* The rows the dragged one is NOT: they slide aside to open its landing slot
+   (the translate is set inline by MachinesIndicator). Only the transition lives
+   here — it is what makes the list *part* rather than jump, and it is scoped to
+   the drag so an ordinary row never animates. */
+.machines-indicator-row.reorder-parting {
+  transition: transform 140ms ease;
+}
+
+/* The row's "add this machine to a project" picker: one button per open
+   project, each naming which of the two ways the machine would join it. It
+   replaced the drag-onto-a-pill gesture, so it deliberately spells out the
+   outcome the drop could only imply. */
+.machines-attach-form .machines-attach-project {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  text-align: left;
+}
+.machines-attach-kind {
+  color: var(--text-secondary);
+  font-size: 11px;
+  flex-shrink: 0;
+}
+
+/* The expanded row's "System monitor…" button (opens
+   `GlobalMachineMonitorDialog`) — a full-width action, same button chrome as
+   the row's Connect/Disconnect/Remove actions, just left-aligned rather than
+   in the actions row. */
+.machines-monitor-btn {
+  margin-top: 2px;
+  align-self: flex-start;
+}
+
+/* ── Machines import / export panels (MachinesIndicator) ─────────────────────
+   Both reuse the .menu-form / .vpn-indicator-* chrome; these only add the bits
+   the flows need — a scrollable pick/preview list and a muted address line. */
+.machines-io-buttons {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+/* The row's buttons already carry `align-self: flex-start` for the column
+   layout — reset it so they sit centered on this one shared row. */
+.machines-io-buttons .vpn-indicator-connect {
+  align-self: auto;
+  margin-top: 0;
+}
+/* Fleet-wide actions (Retry all / Disconnect all): one shared row above the
+   machine list, separated from the note by a hairline so it reads as an action
+   bar, not part of the prose. The button row itself is `.vpn-indicator-actions`
+   (row flex) — the confirm variant stacks a hint above it, so this wrapper keeps
+   its own default direction and only owns the separator. */
+.machines-fleet-actions {
+  flex-wrap: wrap;
+  padding-top: 8px;
+  border-top: 1px solid var(--border-subtle, rgba(128, 128, 128, 0.25));
+}
+.machines-fleet-actions .vpn-indicator-connect,
+.machines-fleet-actions .vpn-indicator-remove {
+  align-self: auto;
+  margin-top: 0;
+}
+/* The icon bar is a ROW. It has to say so itself: `.vpn-indicator-row` sets
+   `flex-direction: column` and `.vpn-indicator-actions` only ever set
+   display/gap, never a direction — so the column wins on every element carrying
+   both, and the icons would stack. The confirm variant keeps the column (its
+   hint sits above its buttons), which is why this is its own class rather than
+   a rule on `.machines-fleet-actions`. */
+.machines-fleet-icons {
+  flex-direction: row;
+  align-items: center;
+  /* Centred, because this bar is not a cluster hanging off a machine's name —
+     it acts on the whole list, so it belongs to the menu's width rather than to
+     either edge. */
+  justify-content: center;
+  position: relative;
+}
+/* The untested tag is taken OUT of the centring flow: as an ordinary flex item
+   it would count toward the centred group's width and shove the icons left of
+   the true centre by half the tag. Absolute + `position: relative` above pins it
+   to the right edge and leaves the three icons centred on the menu. */
+.machines-fleet-icons .untested-tag {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+/* The fleet bar's own controls are icons in the row vocabulary (↻ / ⏻ / ▥), so
+   they reuse `.machines-row-action` — only slightly larger, since here they are
+   the row rather than a cluster hanging off the end of one. */
+.machines-fleet-actions .machines-row-action {
+  width: 24px;
+  height: 24px;
+  font-size: 13px;
+}
+/* Deliberately NOT its own scroll container. It used to be (`max-height: 320px;
+   overflow-y: auto`) and that cost twice: a second scrollbar nested inside the
+   menu's own — and one the tinted-track rule above doesn't reach, since that
+   targets `.tab-new-menu` itself, not its descendants, so it fell back to the
+   flat `--bg-panel` track and read as a mismatched stripe — plus, being a
+   `flex-shrink: 1` child of a height-capped column, it squeezed the imported-
+   machine list (`.machines-io-preview`) down to almost nothing. The menu
+   (`.vpn-indicator-menu`, capped at the viewport) already scrolls, so letting
+   this grow gives the panel ONE correctly-themed scrollbar. */
+.machines-io-panel {
+  min-height: 0;
+}
+/* One selectable machine in the export list: the toggle + label, with the host
+   address as a muted mono sub-line under the display name. */
+.machines-io-pick {
+  align-items: center;
+}
+/* The select-all/none row sits above the list and is separated from it — it
+   picks the rows rather than being one of them. */
+.machines-io-pick-all {
+  border-bottom: 1px solid var(--border, var(--bg-panel));
+  padding-bottom: 6px;
+  margin-bottom: 2px;
+  font-weight: 600;
+}
+.machines-io-addr {
+  display: block;
+  font-family: var(--mono-font, monospace);
+  font-size: 10px;
+  color: var(--text-secondary);
+  word-break: break-all;
+}
+/* The read-back list of machines an import found / added. `flex-shrink: 0` is
+   load-bearing: as a flex child of the column panel it would otherwise be
+   squeezed to a sliver whenever the panel ran short of room, which is exactly
+   what hid the imported machines. Its own scrollbar gets the inset track it
+   actually sits on, so it matches the menu's rather than falling back to the
+   flat `--bg-panel` one. */
+.machines-io-preview,
+.machines-io-results {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  flex-shrink: 0;
+  min-height: 60px;
+  max-height: 160px;
+  overflow-y: auto;
+  padding: 4px 6px;
+  border-radius: 4px;
+  background: var(--bg-inset, var(--border, rgba(128, 128, 128, 0.15)));
+  scrollbar-color: var(--scrollbar-thumb)
+    var(--bg-inset, var(--border, rgba(128, 128, 128, 0.15)));
+}
+.machines-io-preview::-webkit-scrollbar-track,
+.machines-io-results::-webkit-scrollbar-track {
+  background: var(--bg-inset, var(--border, rgba(128, 128, 128, 0.15)));
+}
+.machines-io-preview::-webkit-scrollbar-thumb,
+.machines-io-results::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb);
+  border-color: var(--bg-inset, var(--border, rgba(128, 128, 128, 0.15)));
+}
+.machines-io-result-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+}
+
 /* Compact variant: the lamp embedded on a project pill instead of the header,
    so every remote project's connection state is visible in the project bar at a
    glance (not just the active one). */
@@ -11193,7 +15549,7 @@ select option {
   min-width: 16px;
   padding: 0 5px;
   border: 1px solid var(--border-color);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   background: var(--bg-panel);
   color: var(--text-primary);
   font-weight: 600;
@@ -11247,10 +15603,10 @@ select option {
   position: fixed;
   z-index: 90;
   padding: 10px 12px;
-  border-radius: 8px;
-  background: var(--bg-panel);
+  border-radius: var(--radius);
+  background: var(--bg-elevated);
   border: 1px solid var(--border-color);
-  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
+  box-shadow: var(--shadow-3);
   color: var(--text-primary);
   font-size: 12px;
   /* Fade in on appearance, then keep a slow accent breathing on the border so a
@@ -11274,7 +15630,7 @@ select option {
   0%,
   100% {
     border-color: var(--border-color);
-    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
+    box-shadow: var(--shadow-3);
   }
   50% {
     border-color: var(--accent);
@@ -11398,7 +15754,7 @@ select option {
 .hint-bubble-got-it {
   margin-left: auto;
   border: 1px solid var(--accent);
-  border-radius: 5px;
+  border-radius: var(--radius-sm);
   background: var(--accent);
   color: var(--accent-contrast);
   font-size: 11px;
@@ -11414,7 +15770,7 @@ select option {
    the eye lands on the thing to click (see HintHost). */
 .hint-target {
   animation: hint-target-pulse 1.6s ease-in-out infinite;
-  border-radius: 6px;
+  border-radius: var(--radius);
 }
 
 @keyframes hint-target-pulse {
@@ -11460,7 +15816,7 @@ select option {
   padding: 0;
   border: 1px solid var(--border-color);
   border-right: none;
-  border-radius: 6px 0 0 6px;
+  border-radius: var(--radius) 0 0 var(--radius);
   background-color: var(--bg-panel);
   color: var(--text-muted);
   font-size: 13px;
@@ -11468,7 +15824,7 @@ select option {
   cursor: pointer;
   opacity: 0.55;
   z-index: 11;
-  transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
+  transition: opacity var(--transition), color var(--transition), background-color var(--transition);
 }
 
 .right-panel-reveal-handle:hover {
@@ -11477,6 +15833,21 @@ select option {
   background-color: var(--bg-hover, var(--bg-panel));
 }
 
+/* Mirror the reveal handle and tour marker to the left edge when the panel
+   docks there (open edge, border, and rounded corners all flip). */
+.right-panel-reveal-handle.left {
+  right: auto;
+  left: 0;
+  border-left: none;
+  border-right: 1px solid var(--border-color);
+  border-radius: 0 var(--radius) var(--radius) 0;
+}
+
+.tour-edge-marker.left {
+  right: auto;
+  left: 0;
+}
+
 /* Full-screen layer hosting the blocker, spotlight, and bubble. Above the hint
    bubble (z 90) and most chrome; portaled to document.body. */
 .tour-overlay {
@@ -11499,7 +15870,7 @@ select option {
    only (no pointer events) — the blocker beneath handles clicks. */
 .tour-spotlight {
   position: fixed;
-  border-radius: 8px;
+  border-radius: var(--radius);
   box-shadow:
     0 0 0 9999px rgba(0, 0, 0, 0.58),
     0 0 0 2px var(--accent),
@@ -11520,10 +15891,10 @@ select option {
   z-index: 201;
   pointer-events: auto;
   padding: 12px 14px;
-  border-radius: 8px;
-  background: var(--bg-panel);
+  border-radius: var(--radius);
+  background: var(--bg-elevated);
   border: 1px solid var(--accent);
-  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--shadow-3);
   color: var(--text-primary);
   font-size: 12px;
   animation: hint-bubble-in 0.22s ease-out;
@@ -11577,7 +15948,7 @@ select option {
 
 .tour-bubble-back {
   border: 1px solid var(--border-color);
-  border-radius: 5px;
+  border-radius: var(--radius-sm);
   background: transparent;
   color: var(--text-primary);
   font-size: 11px;
@@ -11592,7 +15963,7 @@ select option {
 
 .tour-bubble-next {
   border: 1px solid var(--accent);
-  border-radius: 5px;
+  border-radius: var(--radius-sm);
   background: var(--accent);
   color: var(--accent-contrast);
   font-size: 11px;
@@ -11638,12 +16009,12 @@ select option {
   gap: 3px;
   text-align: left;
   padding: 10px 12px;
-  border-radius: 8px;
+  border-radius: var(--radius);
   border: 1px solid var(--border-color);
   background: var(--bg-panel);
   color: var(--text-primary);
   cursor: pointer;
-  transition: border-color 0.12s ease, background 0.12s ease;
+  transition: border-color var(--transition), background var(--transition);
 }
 
 .lesson-item:hover {
@@ -11680,8 +16051,7 @@ select option {
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.06),
     0 0 0 1px rgba(0, 0, 0, 0.18);
-  transition: background 0.15s ease, box-shadow 0.18s ease,
-    border-color 0.15s ease, color 0.15s ease, transform 0.08s ease;
+  transition: background var(--transition), box-shadow var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
 }
 
 [data-theme="fancy_dark"] .global-apps-menu-btn:hover,
@@ -11704,6 +16074,27 @@ select option {
   transform: translateY(1px);
 }
 
+/* The VPN and Machines indicators opt back out of the fancy gradient-button
+   treatment above (they're status readouts, not buttons — see the
+   plain-theme rule on .vpn-indicator-btn/.machines-indicator-btn for why). */
+[data-theme="fancy_dark"] .vpn-indicator-btn,
+[data-theme="fancy_light"] .vpn-indicator-btn,
+[data-theme="fancy_dark"] .vpn-indicator-btn:hover,
+[data-theme="fancy_light"] .vpn-indicator-btn:hover,
+[data-theme="fancy_dark"] .vpn-indicator-btn[aria-expanded="true"],
+[data-theme="fancy_light"] .vpn-indicator-btn[aria-expanded="true"],
+[data-theme="fancy_dark"] .machines-indicator-btn,
+[data-theme="fancy_light"] .machines-indicator-btn,
+[data-theme="fancy_dark"] .machines-indicator-btn:hover,
+[data-theme="fancy_light"] .machines-indicator-btn:hover,
+[data-theme="fancy_dark"] .machines-indicator-btn[aria-expanded="true"],
+[data-theme="fancy_light"] .machines-indicator-btn[aria-expanded="true"] {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  transform: none;
+}
+
 /* App-launcher tiles: a transparent rest state that blooms into an
    accent-tinted, glowing tile on hover. */
 [data-theme="fancy_dark"] .global-app-btn:hover:not([aria-disabled="true"]),
@@ -11716,41 +16107,19 @@ select option {
   box-shadow:
     inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent),
     0 0 10px -3px color-mix(in srgb, var(--accent) 70%, transparent);
-  transition: background 0.15s ease, box-shadow 0.18s ease, color 0.15s ease;
-}
-
-/* The active project pill: an accent gradient wash + glow so the live project
-   genuinely stands out in fancy mode. */
-[data-theme="fancy_dark"] .project-pill.active,
-[data-theme="fancy_light"] .project-pill.active {
-  background:
-    linear-gradient(160deg,
-      color-mix(in srgb, var(--accent) 24%, var(--bg-panel)) 0%,
-      var(--pill-active-bg) 85%);
-  border-color: transparent;
-  box-shadow:
-    inset 0 -3px 0 var(--accent),
-    0 0 14px -4px color-mix(in srgb, var(--accent) 70%, transparent);
+  transition: background var(--transition), box-shadow var(--transition), color var(--transition);
 }
 
-[data-theme="fancy_dark"] .project-pill,
-[data-theme="fancy_light"] .project-pill {
-  border-color: transparent;
-  box-shadow: inset 0 -3px 0 var(--warning);
-}
+/* No generic bottom stripe on fancy-theme pills — the old --warning (yellow)
+   rail is gone; a non-active pill is bare (same color as the bar). Only the
+   category-tinted stripe (a deliberate grouping signal) remains, and the
+   active pill's accent frame (base rule) marks the current one. */
 
 [data-theme="fancy_dark"] .project-pill.has-category:not(.active):not(.timer-paused),
 [data-theme="fancy_light"] .project-pill.has-category:not(.active):not(.timer-paused) {
   box-shadow: inset 0 -3px 0 var(--cat-color);
 }
 
-[data-theme="fancy_dark"] .project-pill:not(.active):hover,
-[data-theme="fancy_light"] .project-pill:not(.active):hover {
-  box-shadow:
-    inset 0 -3px 0 var(--warning),
-    0 0 10px -4px color-mix(in srgb, var(--accent) 55%, transparent);
-}
-
 [data-theme="fancy_dark"] .project-pill.has-category:not(.active):not(.timer-paused):hover,
 [data-theme="fancy_light"] .project-pill.has-category:not(.active):not(.timer-paused):hover {
   box-shadow:
@@ -11762,25 +16131,10 @@ select option {
    indicator beside the pane rather than above the label. The active tab also
    gets an accent-tinted body, a bold label, and a soft glow; hovered tabs warm
    into an accent wash. Plain themes keep the base tab treatment. */
-[data-theme="fancy_dark"] .tab,
-[data-theme="fancy_dark"] .tab:hover,
-[data-theme="fancy_dark"] .tab.active,
-[data-theme="fancy_light"] .tab,
-[data-theme="fancy_light"] .tab:hover,
-[data-theme="fancy_light"] .tab.active {
-  border-color: transparent;
-}
-
-[data-theme="fancy_dark"] .tab.active,
-[data-theme="fancy_light"] .tab.active {
-  background:
-    linear-gradient(180deg,
-      color-mix(in srgb, var(--accent) 22%, var(--control-hover-bg)) 0%,
-      var(--bg-main) 100%);
-  box-shadow:
-    0 2px 12px -4px color-mix(in srgb, var(--accent) 75%, transparent),
-    inset 0 -3px 0 var(--tab-accent, var(--accent));
-}
+/* Fancy themes use the SAME melt + straight bottom accent line as every other
+   theme now — no gradient body, no glow, no inset stripe. Only the top/bottom
+   border colour is transparent by default (base rule) and the active tab's
+   bottom border is the accent line; nothing here needs to override that. */
 
 /* Tab text stays uncoloured in the fancy themes too — fancy_dark labels are
    plain white (below), fancy_light labels fall through to the theme foreground.
@@ -11811,32 +16165,9 @@ select option {
   font-weight: 700;
 }
 
-/* Fancy dark keeps project names plain white and marks the current one by
-   weight rather than a top rail. */
-[data-theme="fancy_dark"] .project-pill.active {
-  box-shadow:
-    inset 0 -3px 0 var(--accent),
-    0 0 14px -4px color-mix(in srgb, var(--accent) 70%, transparent);
-}
-
-[data-theme="fancy_dark"] .project-pill.active .project-pill-label {
-  font-weight: 700;
-}
-
-[data-theme="fancy_dark"] .tab.active {
-  box-shadow:
-    0 2px 12px -4px color-mix(in srgb, var(--accent) 45%, transparent),
-    inset 0 -3px 0 var(--tab-accent, var(--accent));
-}
-
-[data-theme="fancy_dark"] .tab:not(.active):hover,
-[data-theme="fancy_light"] .tab:not(.active):hover {
-  background:
-    linear-gradient(180deg,
-      color-mix(in srgb, var(--accent) 12%, transparent) 0%,
-      var(--pill-hover-bg) 100%);
-  box-shadow: inset 0 0 10px -6px color-mix(in srgb, var(--accent) 60%, transparent);
-}
+/* No fancy-mode active-tab glow or hover wash — tabs melt into the bar in every
+   theme, so their only shadow is the base side-edge 3D and their only active
+   marker is the straight bottom accent line. */
 
 [data-theme="fancy_dark"] .tab-new-btn:hover,
 [data-theme="fancy_light"] .tab-new-btn:hover {
@@ -12263,7 +16594,7 @@ select option {
   text-align: left;
   background: var(--control-bg);
   border: 1px solid var(--control-border);
-  border-radius: var(--radius, 4px);
+  border-radius: var(--radius);
   color: var(--text-primary);
   cursor: pointer;
 }
@@ -12297,7 +16628,7 @@ select option {
   margin-top: 4px;
   background: var(--bg-main);
   border: 1px solid var(--border-subtle);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   overflow: hidden;
 }
 
@@ -12342,7 +16673,7 @@ select option {
 .du-btn {
   background: var(--control-bg);
   border: 1px solid var(--control-border);
-  border-radius: var(--radius, 4px);
+  border-radius: var(--radius);
   color: var(--text-primary);
   padding: 3px 9px;
   font-size: 12px;
@@ -12462,7 +16793,7 @@ select option {
   height: 6px;
   background: var(--control-bg);
   border: 1px solid var(--border-subtle);
-  border-radius: 3px;
+  border-radius: var(--radius-sm);
   overflow: hidden;
 }
 
@@ -13595,7 +17926,8 @@ select option {
   display: flex;
   flex-direction: column;
   gap: 10px;
-  overflow-y: auto;
+  /* Scrolling is the dialog's `.dialog-scroll` frame now (one scroll region, and
+     the scrollbar clears the rounded corners); the form no longer scrolls itself. */
 }
 
 .cal-field {
@@ -13728,11 +18060,11 @@ select option {
   max-height: min(60vh, 560px);
   display: flex;
   flex-direction: column;
-  background: var(--bg-panel);
+  background: var(--bg-elevated);
   color: var(--text-primary);
   border: 1px solid var(--accent);
   border-radius: var(--radius);
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--shadow-3);
 }
 
 .cal-alarm-head {
diff --git a/src/types/index.ts b/src/types/index.ts
index 6fcda05..0eb8546 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -71,14 +71,54 @@ export interface KeyboardChord {
   meta?: boolean;
 }
 
+/**
+ * A user-defined "custom agent" — an arbitrary CLI the user wants offered in the
+ * add-tab menu's Agents group alongside the built-in agents (Claude, Codex, …).
+ * It is just a launch command: Eldrun spawns `cmd` (+ `args`, `env`) in the
+ * project directory as an `agent` tab. Persisted in `Settings.custom_agents` and
+ * added/removed from the "＋ Add agent…" dialog.
+ *
+ * Unlike a built-in agent it carries no install command and no session-capture
+ * machinery. The one optional capability is `resumeArgs`: a "continue the most
+ * recent session" flag (e.g. `["--continue"]`) that, when set, promotes the tab
+ * to the *cwd-continue* resume tier — it survives a restart and respawns with
+ * these args (exactly how Qwen/OpenCode resume). Unset ⇒ launch-only, dropped on
+ * restart like Gemini/Aider.
+ */
+export interface CustomAgent {
+  /** Stable id minted at creation; also the persisted map key / React key. */
+  id: string;
+  /** Display label in the Agents menu. */
+  label: string;
+  /** Binary/command to spawn. Probed on PATH (or as a file path when it contains
+   *  a separator) for the menu's installed/greyed state. */
+  cmd: string;
+  /** Optional launch args, prepended before any resume args. */
+  args?: string[];
+  /** Optional environment variables set on the tab's process. */
+  env?: Record<string, string>;
+  /** Optional "continue last session" flag(s). When non-empty the tab is
+   *  restart-resumable (see the interface note). */
+  resumeArgs?: string[];
+  /** Optional one-line install command (e.g. `npm install -g @scope/pkg`). When
+   *  the agent's binary isn't found, the manage dialog offers a one-click button
+   *  that runs this in a fresh root terminal tab (Eldrun's install-via-tab
+   *  policy — never a copy-it-yourself step). */
+  installCmd?: string;
+}
+
 export interface Settings {
   debug?: boolean;
   git_profile_url?: string;
   git_token?: string;
   color_scheme?: string;
-  /** Global UI zoom factor for the whole interface (helps on high-DPI/4K
-   *  monitors). `1` (or unset) is 100% — the default look; applied as a CSS
-   *  `zoom` on the document root. Clamped to [0.5, 3]. */
+  /** UI language for Eldrun's interface. Unset/unknown falls back to English.
+   *  Applied live via `lib/i18n` (`applyLanguage`); the backend round-trips it. */
+  language?: "en" | "de" | "es" | "fr" | "it";
+  /** The MAIN window's UI zoom factor (helps on high-DPI/4K monitors). `1` (or
+   *  unset) is 100% — the default look; applied as the webview's native zoom.
+   *  Clamped to [0.5, 3]. Zoom is **per window**: a detached popout persists its
+   *  own zoom on its layout entry (see `DetachedGroup.zoom`), not here. */
   ui_zoom?: number;
   /** Calendar: first column of the week — `0` = Sunday (default), `1` = Monday. */
   calendar_week_start?: 0 | 1;
@@ -92,6 +132,10 @@ export interface Settings {
   /** Calendar: minutes-before reminder pre-filled on a new event. `0` = none. */
   calendar_default_reminder_minutes?: number;
   default_agent_cmd?: string;
+  /** User-defined custom agents offered in the add-tab menu's Agents group,
+   *  added/removed from the "＋ Add agent…" dialog. Round-trips through the
+   *  backend settings `extra` catch-all — no Rust field needed. See CustomAgent. */
+  custom_agents?: CustomAgent[];
   /** The default local (Ollama) model. Used by any task without its own
    *  per-task assignment in `ollama_roles`, and as the legacy "active model".
    *  Chosen in the 🧠 menu (click a loaded model's name). Unset = none. */
@@ -101,6 +145,13 @@ export interface Settings {
    *  serve it, so several loaded models can run different jobs in parallel. A
    *  task absent here falls back to `ollama_model`, then to any loaded model. */
   ollama_roles?: Record<string, string>;
+  /** Python Run/Debug arguments (#py), the raw `sys.argv` string typed into the
+   *  Run button's right-click popover, keyed by the file's absolute path. Kept
+   *  per file (not per tab) so every viewer of the same script shares one set of
+   *  args, and here (global settings) so they survive closing the viewer and an
+   *  Eldrun restart. Round-trips through the backend's `extra` catch-all — no Rust
+   *  field needed. An entry set to "" means "cleared" and is pruned. */
+  python_run_args?: Record<string, string>;
   run_scripts_in_background?: boolean;
   /** Header resource-monitor row toggles. Each defaults ON (undefined → shown).
    *  Independent of `debug`; the pill is available in every build. */
@@ -123,6 +174,16 @@ export interface Settings {
    *  see components/tabs/agentModes.ts). Switching restarts the agent; the
    *  conversation is resumed, the terminal scrollback is not. */
   agent_mode_toggle?: boolean;
+  /** EXPERIMENTAL, default OFF. Gives a Python file in the code viewer its Run/Debug
+   *  buttons and the breakpoint gutter (#87). Off by default because Run *executes
+   *  the file* — one click away from an editor — so it is opt-in. Go-to-definition
+   *  is not gated: it reads, it never runs anything. */
+  python_run_debug?: boolean;
+  /** Persistent LOCAL (tmux) sessions (TODO #85): when true (the default on Unix),
+   *  a local project's shell/script tabs run inside a tmux session on the machine,
+   *  so a long run keeps going if Eldrun crashes and the tab reattaches on restart.
+   *  `undefined`/`true` = on; `false` = off. No effect on Windows (no tmux). */
+  persist_local_sessions?: boolean;
   /** When true (the default), remote SSH/OpenVPN connections are made headlessly
    *  in the background (Eldrun handles the password transiently). When false, they
    *  are launched as interactive terminal tabs in the Eldrun root scope, so the
@@ -144,6 +205,10 @@ export interface Settings {
   /** Width of the right (file/git) panel in px. Set by dragging the panel's left
    *  border; unset falls back to the default 280px. */
   right_panel_width?: number;
+  /** Which edge the file panel docks against. Unset falls back to "right". Flipped
+   *  by the ⇄ button in the panel header; round-trips through the settings `extra`
+   *  catch-all, so no backend field is needed. */
+  right_panel_side?: "left" | "right";
   /** Minimum subwindow (split pane) width in px a divider drag may shrink to.
    *  Unset falls back to DEFAULT_MIN_SUBWINDOW_PX. */
   min_subwindow_width?: number;
@@ -234,6 +299,34 @@ export interface StoredVpnConfig {
   name: string;
 }
 
+/** A globally connected worker machine (`stores/globalMachines.ts`):
+ *  authenticated once via the ordinary login mechanism, with no
+ *  `remote_path` — project-free, unlike {@link ComputeHost}. Drag-and-dropped
+ *  onto an SSH project to become a `shared_fs` compute host there (a value
+ *  copy of this identity, not a reference). */
+export interface GlobalMachine {
+  id: string;
+  user?: string;
+  host: string;
+  port?: number;
+  label?: string;
+  /** Opt-in to a silent connect on launch and whenever a VPN tunnel comes up
+   *  (the machine-wide twin of a project's `RemoteSpec.auto_connect`). */
+  auto_connect?: boolean;
+}
+
+/** One machine as it crosses the import/export boundary
+ *  (`commands::global_machines::MachineIo`): the connection address + label
+ *  only. An exported file carries no `user` and never a password — import
+ *  supplies one shared username + password for the whole batch. `user` is an
+ *  accepted field on a hand-authored file, so it is optional here. */
+export interface MachineImportEntry {
+  host: string;
+  port?: number;
+  label?: string;
+  user?: string;
+}
+
 /** Which secrets a `.ovpn` config needs from the user (`openvpn_auth_needs`), so
  *  the UI shows exactly the fields that config will be asked for. The two are
  *  independent — a config can need both, and OpenVPN prompts for them separately,
@@ -269,6 +362,41 @@ export interface RemoteSpec {
    *  host used no password at all (key/agent auth). A passwordless host has nothing
    *  in the keychain, so this is the only way the UI can tell it is auto-connectable. */
   key_auth?: boolean;
+  /** Display name for this machine, e.g. "gpu-2"; falls back to `host`. Shown
+   *  wherever a project's hosts are listed side by side (System Monitor's source
+   *  picker, the pill's connection lamps, `hostsForProject`). Distinct from the
+   *  *project* name — this labels the machine, not the project. */
+  label?: string;
+  /** Persistent remote sessions (TODO #85): run this project's remote shell/script
+   *  tabs inside a **tmux** session on the host, so a long run survives an SSH drop,
+   *  a laptop sleep, or Eldrun quitting. **Default ON** — `undefined`/`true` mean
+   *  enabled; only an explicit `false` (the pill's toggle) opts out. Agent tabs are
+   *  excluded regardless. See `persistSessionsEnabled`. */
+  persist_sessions?: boolean;
+}
+
+/** An extra SSH "worker" machine a project runs experiments on
+ *  (`docs/multi_host_remote_plan.md`). Its code is kept one-way in sync from the
+ *  canonical source (the primary's local mirror) and its files are read-only —
+ *  edits are forbidden, so there is no divergence and no destructive local-loss.
+ *  The primary remote (`ProjectEntry.remote`) is unchanged. Extends `RemoteSpec`
+ *  (flattened on the backend), so it carries the same user/host/port/remote_path/
+ *  openvpn/auto_connect fields. */
+export interface ComputeHost extends RemoteSpec {
+  /** Stable id (e.g. "h1"); referenced by tab locations, the pool key, and the
+   *  fan-out state. The primary is the implicit id `"primary"`. */
+  id: string;
+  /** Keep this worker's tracked tree synced to the source HEAD (default true). */
+  sync_code?: boolean;
+  /** Pull this worker's experiment OUTPUTS back only on demand (default false —
+   *  outputs stay on the worker). */
+  pull_outputs?: boolean;
+  /** This machine reaches the project over a **shared filesystem**: it already
+   *  sees the primary's project folder at `remote_path`, so Eldrun copies no code
+   *  to it and never runs git on it — shells just `cd` into the shared tree and
+   *  run there. The default for a newly added machine (untick "Sync a copy" for
+   *  the synced-copy worker instead). Schema default false for back-compat. */
+  shared_fs?: boolean;
 }
 
 /** Per-project container config (TODO #38). When `enabled`, every terminal and
@@ -324,8 +452,17 @@ export interface ProjectEntry {
   directory?: string;
   description?: string;
   remote?: RemoteSpec;
+  /** Extra "worker" machines this project runs experiments on
+   *  (`docs/multi_host_remote_plan.md`). One-way, read-only; the primary is
+   *  `remote`. Mirrored from project.json into the pill list. */
+  compute_hosts?: ComputeHost[];
   /** Docker sandbox config; when `enabled`, agent tabs run in a container. */
   sandbox?: SandboxSpec;
+  /** The interpreter the code viewer's Run/Debug buttons use (#87). Absent =
+   *  auto-detect, which is right for almost every project; pinning it is for the
+   *  environments auto-detect cannot see (a conda env, a Poetry venv outside the
+   *  tree, a second venv). Set from the pill's "Python interpreter…" dialog. */
+  python_interpreter?: string;
   /** Denormalized inverse of `ProjectBox.member_ids` (the box this pill is in). */
   box_id?: string;
   /** Per-project git-hosting profile URL that overrides the global one. Mirrored
diff --git a/todo/group-f.md b/todo/group-f.md
index 9d78969..8181b8b 100644
--- a/todo/group-f.md
+++ b/todo/group-f.md
@@ -58,7 +58,7 @@
       live-id store), `terminal/mod.rs` (`resolve_claude_session`), `lib.rs`
       (install at startup). Hook script: `~/.local/share/eldrun/hooks/`; live ids:
       `~/.local/share/eldrun/live_sessions/`.*
-    - [~] **39d — Generalize to other agents.** Codex done; Gemini/Vibe open.
+    - [x] **39d — Generalize to other agents.** Codex, Gemini and Mistral/vibe done.
       - [x] **Codex.** ✅ Done. Codex mints its own session id (no launch-time
         `--session-id`), but it has a Claude-style `SessionStart` hook and resumes
         by uuid (`codex resume <id>`). Eldrun sets `ELDRUN_TAB_UID` (a per-tab key)
@@ -87,12 +87,21 @@
         Remaining: **remote (ssh) Codex tabs are out of scope** — their rollouts
         live on the far host, so the binder skips them; making them work means
         running the rollout scan over `ssh_exec`.
-      - [ ] **Gemini.** `--session-id <uuid>` sets the launch id (already passed),
-        but `--resume` takes an index/`latest`, not a uuid; resume-by-uuid likely
-        needs `--session-file ~/.gemini/tmp/<project>/<uuid>`. No `SessionStart`
-        hook → would drift on `/clear` like pre-fix Claude. Needs runtime verification.
-      - [ ] **Vibe.** `--resume <id>` works but Vibe mints its own id with no
-        launch-id control and no hook mechanism found, so per-tab tracking would
-        need the rejected newest-session-file heuristic. Deferred.
+      - [x] **Gemini.** ✅ Done via **continue-last**. `--session-id <uuid>` sets
+        the launch id (already passed), but `--resume` takes an index/`latest`,
+        not a uuid — so precise resume-by-uuid isn't available. Instead Eldrun
+        restores with `gemini --resume latest`, continuing the project's most-
+        recent session, exactly like Grok/Qwen. Same caveat: two Gemini tabs in
+        one project share that one latest session. *Files: `stores/tabs.ts`
+        (`RESUMABLE_AGENTS.gemini`).* Verified against `gemini --help` (`-r,
+        --resume … "latest"`). Not wired into the plan/auto mode table because
+        continue-last can't guarantee THIS tab's session on respawn (see
+        `components/tabs/agentModes.ts`).
+      - [x] **Mistral/vibe.** ✅ Done via **continue-last**. Vibe mints its own id
+        with no launch-id control, and `--resume` with no id opens an interactive
+        picker (hangs a restore) — but `-c/--continue` "Continue from the most
+        recent saved session" is the non-interactive path, so Eldrun restores with
+        `vibe --continue`. Same shared-latest caveat. *Files: `stores/tabs.ts`
+        (`RESUMABLE_AGENTS.vibe`).* Verified against `vibe --help`.
 
 ---
diff --git a/todo/group-g.md b/todo/group-g.md
index eb7ecd2..f500779 100644
--- a/todo/group-g.md
+++ b/todo/group-g.md
@@ -913,4 +913,93 @@ container) — as opposed to the git **push** axis (#21/#22).*
       disconnect from the header and confirm routing is restored. Connect a tunnel
       from the header with no project active.
 
+85. ✅ **Persistent sessions (tmux) — remote + local.** *(Implemented — `RemoteSpec.persist_sessions`,
+    `settings.persist_local_sessions`, `PtyOptions.tmux_session`/`tmux_attach`, `ssh_exec::{TmuxWrap,
+    tmux_wrap_exec,tmux_kill_session_script,tmux_rename_session_script,tmux_ls_script,parse_tmux_ls,
+    valid_tmux_session_name}`, `services::tmux_local`, `remote_tmux_{list,kill,rename}` +
+    `local_tmux_{list,kill,rename}` + `set_project_persist_sessions` commands;
+    frontend `lib/tmuxSession.ts`, `lib/closeRemoteTab.ts`, CenterPanel/TabPane/TerminalView
+    plumbing, the pill toggle + a global Settings toggle, and the multi-host Sessions view in
+    `ProjectFilesView`.)* Shipped **default ON** rather than behind the experimental flag (per user).
+    Beyond the original remote scope it also covers: **local** persistence (Unix — survives an
+    Eldrun *crash*), **worker-host** sessions (the Sessions view aggregates every connected host),
+    and per-row **Rename**. Agent tabs are excluded (they resume via their own session).
+    Live-QA on a real host / crash still pending (Done ≠ Tested). A remote shell/script is a child of
+    the `ssh -tt` channel, so it dies (`SIGHUP`) on any channel break — network
+    blip, laptop sleep, VPN drop, or Eldrun quitting. Run it **inside a tmux
+    server on the host** instead, decoupled from SSH: reconnect or relaunch and
+    the same command reattaches to the still-running session. Server-side, so it
+    works identically for a Windows/macOS Eldrun (only the local `ssh` client
+    differs); **remote projects only** (a local process is Eldrun's own child,
+    not decoupled by SSH). One seam: `remote_command` (`ssh_exec.rs:117`) wraps
+    the final `exec` in `tmux new-session -A -D -s eldrun-<tab-uid> -- …`, nesting
+    the existing `cd`/env-export/`remote_agents` prelude untouched — `-A` makes
+    the one command both start and resume, the stable per-tab name is what
+    reattach keys on. Restart-resume is then nearly free (a remote shell tab is
+    already restorable, `tabs.ts:3416`). The one new decision is **kill vs.
+    detach**: explicit tab-close runs `tmux kill-session` via `run_remote_script`
+    (`ssh_exec.rs:300`); app-exit/disconnect leave the session alive. Behind the
+    experimental flag; tmux-absent falls back to today's plain `exec` + a notice.
+    Headline surface is a **Sessions view** in the file viewer, alongside Files /
+    Git / Search / Apps / Orange (`ProjectFilesView.tsx:33,607`) — a remote-only
+    toolbar toggle (mirrors the Orange/diverged view) listing host `tmux ls`
+    sessions (incl. hand-started ones and orphans from a crashed Eldrun); click a
+    row → open a shell tab that **attaches** (`tmux new-session -A -D -s <name>`),
+    per-row kill/reveal. Renders in both the right panel and the Files tab for
+    free (one component). Plan: `docs/tmux_remote_plan.md`. `dtach`/`abduco`
+    (more transparent, less available) kept as a deferred alt backend.
+    - [x] 🤖 Automated test — argv builder (`remote_command_off_is_unchanged`,
+      `remote_command_tmux_wraps_shell_tab`/`_command_tab_preserving_prelude`/
+      `_tmux_attach_ignores_target`); `tmux ls` parse
+      (`parse_tmux_ls_reads_rows_and_tolerates_empty`);
+      `tmux_kill_session_script_quotes_name`; frontend `TmuxSessions.test.ts`
+      (uuid mint is tmux-safe, default-ON gate, shell-only rule, attach-tab restore,
+      and the **key-regenerates-but-tmuxSession-stays-stable** reattach guarantee).
+    - [ ] 🖐️ Manual test — remote long-running `python -u` run: kill network /
+      sleep → reconnect → output continues; quit Eldrun mid-run → relaunch →
+      shell tab reattaches, run still going; explicit tab-close → `tmux ls` shows
+      the session gone; tmux-less host → tab works, notice shown, no persistence;
+      hand-start a session on the host → it appears in the `☰` Sessions view →
+      click → tab attaches to the live process → per-row Kill drops it.
+
+86. **HPC / SLURM pipeline (guided login → run → watch).** *(Phases A + B implemented —
+    `docs/quirky-knitting-umbrella` plan.)* On a SLURM cluster, computation must go
+    through the scheduler (`sbatch`/`srun`), never the login node. Eldrun already
+    connects to such a host as a remote project; this adds a guided run/watch layer
+    so a newcomer never memorizes a SLURM command.
+    **Phase A — run/watch core (done, untested on a cluster):** backend
+    `commands::slurm` (`slurm_available`/`slurm_submit`/`slurm_queue`/`slurm_job_out`/
+    `slurm_cancel`) mirrors `commands::python`'s local-or-remote dispatch over the
+    pooled ControlMaster — a `.slurm` file (any script with a `#SBATCH` line) opened
+    in the code viewer gets a **SLURM bar** beside the Python Run bar (Submit job /
+    Variables / Interactive session…), shown only when the host has SLURM. Submit →
+    `sbatch --parsable` + `scontrol` (one round trip) → a **log tab** tailing the
+    resolved out-file (`tail -F`, waits out the queue); **Variables** is a `#SBATCH`
+    directive form editing the draft by splice (render-rows/edit-text, like the YAML
+    viewer); **Interactive session…** opens an `srun --pty … bash -l` shell on a
+    compute node. A **Jobs view** in `ProjectFilesView` (alongside Sessions/Orange)
+    polls `squeue`, per-row Watch/Cancel. Frontend `lib/slurm.ts` + `stores/hpcJobs`.
+    - [x] 🤖 Automated test — Rust parsers (`parse_submit_jobid` incl. `;cluster`
+      suffix + numeric-guard, `parse_scontrol_paths`, `parse_squeue` incl.
+      multi-word reason, `split_script_rel` incl. absolute paths, `default_out_file`);
+      frontend `Slurm.test.ts` (`isSlurmScript`, `parseSbatchDirectives`
+      short-flag folding, `spliceDirective` in-place/insert/clear + byte-preservation,
+      `buildInteractiveCommand`/`buildTailCommand`).
+    - [ ] 🖐️ Manual test (cluster) — open a `.slurm` → SLURM bar appears; edit
+      `--time`/`--mem` in Variables → file dirties/saves; Submit → toast + log tab
+      tails output; Jobs view lists it, Cancel removes it, Watch re-opens its log;
+      Interactive session… lands a shell on a compute node.
+    - **Phase B — guided pipeline wizard (implemented, untested).** A 5-step stepper
+      (`HpcPipelineWizard.tsx` + `stores/hpcPipeline`, launched from the project-switcher
+      **+** menu) that composes the existing flows rather than reimplementing them:
+      **Login** (`RemoteProjectSection`/`useRemoteSession`) → **Project**
+      (name + local-mirror location → `create_project`) → **Load data** (skippable; local
+      files → `remote_upload_file`, a new streaming SFTP-upload command) → **Run job**
+      (edit a starter `.slurm`'s `#SBATCH` via the Phase-A splice helpers → write to host →
+      Phase-A `submitSlurmJob`) → **Watch** (log tab + Jobs view). Mounted as
+      `HpcPipelineWizardHost` in `AppShell`.
+    - [ ] 🖐️ Manual test (cluster, Phase B) — **+ → HPC pipeline…** walks
+      login→create→load→run→watch end-to-end; the created project connects; an
+      uploaded file lands on the host; Submit opens a tailing log tab.
+
 ---
diff --git a/todo/group-m.md b/todo/group-m.md
index f1099e6..bc95a34 100644
--- a/todo/group-m.md
+++ b/todo/group-m.md
@@ -235,4 +235,214 @@ default-app resolution), `src/types/index.ts`, `README.md`.*
       WebKitGTK-sensitive path. Also re-check the print preview still reorders/prints
       as before, and that saving works on a **remote (SSH)** project's PDF.
 
+87. **Python in the native code viewer: Run, Debug, breakpoints, go-to-definition.**
+    Turn the text editor into a usable Python workbench for the three things a
+    script actually needs, without importing an LSP or a DAP client.
+
+    - **Run / Debug open a terminal tab** (`lib/pythonRun.ts`) rather than a bespoke
+      execution path — the same one-click-open-a-tab-and-run policy as
+      `installCommand.ts`. That is what makes them work everywhere Eldrun already
+      works, *for free*: a shell tab carries the project's locality and sandboxing,
+      so Run on a **remote (SSH)** project runs on the host and Run on a
+      **containerised** project runs inside the container, with no code of its own.
+      It also means the process is a real interactive terminal — `input()` works,
+      `Ctrl+C` works, and the shell outlives the program so the traceback stays on
+      screen and `↑` re-runs it. The project's **virtualenv wins** over the system
+      interpreter (`.venv`/`venv`/`env`, probed via `list_dir`, which resolves over
+      SFTP on a remote project) — running with the bare `python3` would
+      `ModuleNotFoundError` on the project's own deps and read as "Run is broken".
+      Re-running **replaces** the previous run tab for that file rather than
+      re-typing into it: the old PTY may be sitting at a pdb prompt or blocked on
+      input, and the command would go to *that*, not to a shell.
+    - **Debugging is pdb, driven from the gutter.** Breakpoints are handed to it as
+      `-c "b file:N"` followed by `-c continue`, so the session runs straight to the
+      first one. With none set the `continue` is omitted and pdb stops at line 1 —
+      otherwise "debug" would be indistinguishable from "run".
+    - **The gutter is the breakpoint UI** (`CodeEditor`): its line numbers become
+      real buttons (so the column drops its `aria-hidden` — hiding a control from the
+      a11y tree would make the feature mouse-only). Two things make a breakpoint more
+      than a line number, and both live in the pure `lib/viewers/python.ts`: pdb
+      *refuses* blank/comment/decorator lines, so a click **snaps** down to the next
+      executable one; and a line number silently re-points at the wrong statement
+      when you type above it, so every draft change is diffed and the dots are
+      **remapped** (a breakpoint inside the edited span is dropped, not guessed at).
+      They persist in the tab's `ViewerState` — same plumbing as the reader's scroll
+      position, and no backend migration (Rust's `TabEntry` flattens `extra`).
+    - **`Ctrl`/`Cmd`+Click follows a name to its `def`** across files, reusing the
+      #49/#50 link machinery (`linkRanges` + `onFollowLink`) and `jumpToSource` — so
+      it opens in the same subwindow, and works into a detached window. The resolver
+      is deliberately **lexical, not type-inferring**: it walks the import graph
+      (relative levels, aliases, `__init__` re-exports, src-layout) and matches
+      `def`/`class`/module-level bindings. `self.method` resolves in-file. Its honesty
+      is the point — only names it can actually follow are underlined, so the
+      affordance never lies, and `obj.method()` on a local simply isn't a link.
+    - **Which Python it runs** (`commands/python.rs`) is the part that decides whether
+      Run is trustworthy at all: a script run with the bare system `python3` when its
+      deps live in a venv fails with `ModuleNotFoundError`, and that reads as "the Run
+      button is broken", not "wrong interpreter". The backend owns the precedence as
+      the **single** source of it — the frontend asks (`python_interpreter_for`) and
+      never re-derives, since two rankings that can disagree is a bug waiting to
+      happen. A project's pinned interpreter always wins (and then costs no probing);
+      otherwise auto-detect ranks **in-tree venv → poetry → active `VIRTUAL_ENV`/
+      `CONDA_PREFIX` → pyenv → system**. A **named conda env is offered but never
+      auto-picked**: choosing one of N unrelated envs on the user's behalf is a guess,
+      and a wrong guess here is indistinguishable from a bug. Pinning is per project
+      (pill ▸ **Python interpreter…**, stored like the sandbox spec — `projects.json`
+      mirror + `project.json`); the dialog leads with Auto-detect and *shows what it
+      currently resolves to*, rather than asking the user to trust an invisible
+      decision. A **remote** project probes the **host** (one constant `sh` script via
+      `run_remote_script`, so it is one SSH round trip, not six) — the interpreter that
+      matters is the one on the machine the run tab actually runs on.
+    - **Gated** behind the experimental `python_run_debug` flag (`lib/experimental.ts`:
+      off for everyone, on in debug mode). Run *executes a file* one click from an
+      editor, so it is opt-in rather than something found by mis-clicking. Go-to-
+      definition is deliberately **not** gated — it reads, it never runs anything.
+    - [x] 🤖 Automated test (`PythonIntel` — imports/defs/lexer/breakpoint remap +
+      resolution incl. circular re-export; `PythonRun` — command building, both
+      platforms; Rust `commands::python` — conda/probe parsing, ranking, and that a
+      named conda env is never auto-selected; `PythonViewer` — the real UI: gutter
+      click sets/snaps/clears a dot, Run/Debug launch the right tab into the file's own
+      scope with the resolved interpreter, Ctrl+Click opens the sibling module at its
+      `def`, and the flag-off case shows none of it)
+    - [ ] 🖐️ Manual test — **the pdb round trip is the one to watch**: set two
+      breakpoints, hit Debug, confirm it halts on the first and `c` reaches the
+      second. Then check interpreter selection on a project that actually needs it
+      (a script importing a dep that only exists in a venv/conda env — and that
+      pinning one in the pill dialog sticks across a restart), that Run on a
+      **remote (SSH)** project runs on the host with the *host's* interpreter, and
+      that Ctrl+Click into a package (`from .pkg import thing` re-exported by its
+      `__init__`) lands on the real definition.
+
+88. **Native YAML/JSON viewer: an editable structure tree.** Give `.yaml`/`.yml`/
+    `.json` the same shape markdown has — a rendered half and a source half behind
+    one toggle — except that the rendered half is *editable*: rename a key, retype
+    a value, add a key or a list item (with a type picker: text/number/boolean/
+    null/map/list), reorder siblings, delete a subtree. Source is the unchanged
+    code editor, so these files keep everything they already had (highlighting,
+    format, the JSON/YAML validation banner, blame, compare, autocomplete).
+
+    - **The tree edits the TEXT, not a model of it** (`lib/viewers/yaml.ts`): every
+      action is a surgical splice back into the draft. Re-serializing the parsed
+      model — the obvious shortcut, and what most YAML editors do — rewrites the
+      whole file and **drops every comment in it**, which for a config file is the
+      one thing you must not do. Splicing is also what makes Tree and Source two
+      views on ONE draft: switching converts nothing, and save / undo / redo /
+      autosave / the external-change banner keep working on the text underneath
+      without either mode knowing the other exists. A tree edit is an ordinary undo
+      step.
+    - **Both of YAML's syntaxes are first-class, because real files mix them:**
+      *block* (`key:` / `- item`, indentation-structured) and *flow* (`{a: 1,
+      b: [2, 3]}` — which is exactly **JSON**, inline or spread over twenty lines).
+      A flow collection parses into real map/seq nodes with real children, which is
+      what makes a JSON-formatted `.yml` — and a `.json` file, the same thing — a
+      tree instead of one opaque blob. (The first cut only *tolerated* flow: it
+      rendered a multi-line `{` as a single un-editable scalar. That was the bug.)
+      **Which syntax a node is written in decides how it is edited** — block splices
+      LINES, flow splices its SPAN — and the tree keeps the author's choice: adding
+      to `[a, b]` yields `[a, b, c]`, never a silent rewrite into block; deleting
+      from it takes the separating comma with it. Every node therefore carries
+      absolute offsets; block nodes additionally carry the lines they own.
+    - **JSON is a dialect, not a second viewer.** `.json` routes to the same tree
+      with `strict` set: no plain scalars, so keys and strings are always quoted and
+      only numbers/bools/null go bare. An empty `[]`/`{}` is a real (empty) flow
+      collection that grows children in place, in either dialect.
+    - **What it offers, it can do.** A construct it can render but not rewrite
+      safely — an anchor, an alias, a merge key, a plain scalar continued across
+      lines — parses to an `editable: false` node that shows its value as text with
+      *no control behind it* (labelled "source only"), rather than an input that
+      would corrupt the file. A line it cannot classify at all fails the parse and
+      the tree defers to Source, naming the line. Same rule as the Python
+      go-to-definition underline: the affordance never lies.
+    - **Adding is where the types live.** A new entry is written with the literal
+      its picked type demands — so "no" and "8080" chosen as *text* come out quoted,
+      which is what makes them the strings the user meant. A key that already holds
+      a value refuses a child rather than silently destroy it.
+    - Opting the viewer out (#48) falls back to the **plain code editor**, not the
+      external app (`VIEWER_FALLBACK`) — turning off the tree is a vote against the
+      tree, not against editing YAML/JSON in Eldrun.
+    - [x] 🤖 Automated test (`YamlModel` — parse/edit ops: comments, quoting style,
+      CRLF and no-trailing-newline round-trips, block scalars, `- key:` items,
+      anchors, multi-doc; flow: inline and multi-line collections, nesting, add
+      inline-vs-on-its-own-line, delete-with-comma, span-swap reorder, unclosed
+      bracket refused; JSON: whole-document parse, strict writing, empty-file seed;
+      and that an unsupported construct is refused rather than guessed.
+      `YamlViewer` — the real UI: a `.yaml` opens in the tree, an edit saves the
+      file with its comments intact, add/rename/delete/reorder, Source shows the
+      tree's edit and it undoes like a typed one, a JSON-formatted `.yml` renders as
+      a tree (the regression), and a `.json` file writes the strict dialect.
+      `InternalViewer` — `.yaml`/`.yml`/`.json` route to the tree, and the opt-out
+      falls back to the code editor)
+    - [ ] 🖐️ Manual test — open a real config with comments (a CI workflow, a
+      `docker-compose.yml`, a `package.json`): edit a value in the tree and confirm
+      the comments and layout are untouched, that Source shows the same edit, and
+      that `Ctrl`+`Z` walks it back. Check a flow/JSON-formatted file adds and
+      deletes in its own style, and that a file with an anchor/merge key
+      (`<<: *base`) renders those rows read-only instead of offering a broken input.
+
+89. **CSV table viewer: a separator you can name, and cells you can edit.** The
+    table viewer (#40) read every `.csv` as comma-delimited because that is what
+    the *extension* implies — so a `;`- or `|`-delimited file (a European export,
+    a database dump) split into rows but not into **columns**, and arrived as one
+    tall single-column table. Four things follow from fixing that properly:
+
+    - **The separator is sniffed, and stays overridable** (`sniffDelimiter`). Each
+      candidate (`,` `;` `\t` `|`) is scored by parsing a sample *with that
+      candidate* — so a comma inside a quoted field can't fool the `;` reading —
+      and asking how rectangular the result is. A character that never splits a row
+      is rejected however consistently it fails to appear, which is what stops `,`
+      from "winning" a semicolon file with a perfect score of one column per row.
+      The header offers Auto / Comma / Semicolon / Tab / Pipe / a **custom
+      character**. An explicit override persists per tab (`ViewerState.delimiter`);
+      Auto deliberately does not, so the sniffer stays free to read better later.
+    - **Cells are editable, and an edit is a SPLICE** (`replaceCell` /
+      `insertRowAfter` / `deleteRow`) into the text draft `useEditableFile` already
+      owns — the same bargain #88 strikes for YAML comments. Re-serializing the
+      parsed rows would rewrite every field in the file, normalising away each
+      one's original quoting and the file's line endings, to change one cell. So
+      the table is a **view on the text**: a cell edit is an ordinary
+      dirty/undoable/autosaved/`Ctrl`+`S` change, and the bytes nobody touched are
+      still there. It is also why sorting and filtering carry each row's **source
+      index** (`RowRef`) — a splice must address the row a cell came *from*, not
+      the row it currently occupies on screen.
+    - **Only the visible rows render.** The old cap ("showing first 2000 rows")
+      is gone; the body is windowed against the scroll position, so a million-row
+      CSV is fully browsable. The column widths are therefore measured over the
+      whole file *up front* — sizing them to what happens to be on screen would
+      resize every column as the reader scrolled.
+    - **A filter box**, matching any cell case-insensitively, and a row-number
+      gutter showing the source row (with a delete, plus `+ Row` in the header).
+    - **Columns hide from a list of their names** (`ColumnsMenu`): click a name to
+      hide that column, click it again to bring it back. It is a *multi*-select, so
+      it does not close on a click — hiding six of twenty columns is one visit to
+      the menu, not six — and a hidden column stays listed, struck through, because
+      the list is the only way back. Two consequences: the row **filter searches
+      only the visible columns** (a row matched on a hidden cell would appear with
+      nothing on it to explain why), and hiding is dropped when the **delimiter**
+      changes, since a hidden column is only an *index* and a different separator
+      cuts the row into different columns. The rendered columns keep their original
+      indices rather than being re-numbered, so an edit still addresses the column
+      the cell came from.
+
+    - [x] 🤖 Automated test (`table.ts` — sniffing: semicolon/pipe/tab/comma, a
+      comma inside a quoted `;` field, the single-column fallback; spans: quoted
+      fields, BOM offsets, CRLF, terminated-vs-unterminated final row; edits:
+      quoting only when needed, other cells' quoting left alone, CRLF preserved,
+      ragged-row padding, insert/delete round-trips; filter/sort keeping the
+      source index; the filter scoped to the visible columns)
+    - [ ] 🖐️ Manual test — open a real `;`-delimited export and confirm it opens
+      **in columns** with `Auto (Semicolon)` shown; force the separator to Comma
+      and back and watch the columns re-cut; set a custom one. Edit a cell in a
+      quoted CSV and confirm in Source that only that field changed. Scroll a
+      large CSV to the bottom (columns must not resize as it scrolls). Sort, then
+      filter, then edit a visible cell — the change must land on the row it was
+      shown in, not the row at that screen position. Hide a few columns from the
+      Columns list, confirm they come back on a second click and survive a reopen,
+      and that editing a cell to the *right* of a hidden one still writes the right
+      field.
+    - [ ] **Deferred:** inserting/deleting a **column** (a row op is one splice; a
+      column op is one splice per row, and every splice invalidates the offsets
+      after it — the same constraint `moveNodeTo` faces in `yaml.ts`). Editing an
+      `.xlsx` also stays out: it arrives pre-parsed from `calamine`, with no source
+      text for a splice to land in.
+
 ---