chore(release): bump version to 1.8.13

Pricing: the LiteLLM sync now adds every current Claude / GPT (>= 5) /
Gemini (>= 3) chat model before it is used and keeps its own rows
(model_pricing.source = 'sync', the Auto badge) at the published rate. A
user's row (any PUT) and a deleted pattern (model_pricing_dismissed) are
never touched; a deleted built-in row is not re-seeded at the next start; a
reset re-applies the list at once; retired Claude models are priced only
once used.

Models: GET /api/ai-tools/:id/models reads each tool's own list (Codex's
models_cache.json, Claude's aliases named after the newest version plus
priced versions, a catalog tool's vendor rows plus the models its sessions
used). A catalog `model: {flag, vendor?}` field passes `<flag> <id>`
(validated: never a flag or shell text); a per-tool default model starts
each run, and a resume keeps the session's own model.

Settings: every installed, enabled catalog tool without its own tab gets
one (AiToolConfig.tsx): path, homepage, Update, sessions/cost/lanes,
default model, vendor pricing, and the config files its release catalog
lists, edited over the opened sha, syntax-checked, backed up, written
atomically; credential-looking names refused. Antigravity keeps its hooks
card there.

Lanes: a just-started run no longer reads "dead" (age counts the run's
start while the old session is still bound); a second dashboard on the
same database re-broadcasts the lanes the other changed (PRAGMA
data_version, every 2 s); a lane start with a bad model answers 400.

DB: every migration runs under a cross-process lock (<db>-migrate.lock), so
two dashboards started at once on a fresh database both come up.

.claude-plugin/marketplace.json

@@ -1,12 +1,12 @@
 {
-  "name": "claude-code-agent-monitor-plugins",
+  "name": "agenthub",
   "description": "Official plugin marketplace for AgentHub — the `agenthub` plugin installs the dashboard itself (hooks, server, CLI), plus 10 focused plugins for analytics, cost guardrails, productivity, developer tools, AI insights, session forensics, workflow/fleet intelligence, reliability/SLOs, config & memory governance, and dashboard connectivity. Every plugin is powered by the local Agent Monitor API.",
   "owner": {
     "name": "smartgift",
     "url": "https://git.smartgift.io.vn/Smartgift-AI"
   },
-  "homepage": "https://git.smartgift.io.vn/Smartgift-AI/Claude-Code-Monitor",
-  "repository": "https://git.smartgift.io.vn/Smartgift-AI/Claude-Code-Monitor",
+  "homepage": "https://git.smartgift.io.vn/Smartgift-AI/AgentHub",
+  "repository": "https://git.smartgift.io.vn/Smartgift-AI/AgentHub",
   "plugins": [
     {
       "name": "agenthub",
@@ -16,61 +16,61 @@
     },
     {
       "name": "agenthub-analytics",
-      "path": "plugins/agenthub-analytics",
+      "source": "./plugins/agenthub-analytics",
       "description": "Deep analytics on Claude Code sessions — token usage (total_input/total_output/total_cache_read/total_cache_write with compaction baselines pre-summed), cost breakdowns via the pricing engine, usage trends over 365 days, cache efficiency, model mix, and productivity scoring.",
       "tags": ["analytics", "tokens", "cost", "productivity"]
     },
     {
       "name": "agenthub-cost-guard",
-      "path": "plugins/agenthub-cost-guard",
+      "source": "./plugins/agenthub-cost-guard",
       "description": "Budget guardrails — set spend limits, forecast week/month-end cost from daily trends, surface cost-threshold alerts via the alert-rule API, and quantify model-routing savings.",
       "tags": ["budget", "cost", "forecast", "alerts"]
     },
     {
       "name": "agenthub-productivity",
-      "path": "plugins/agenthub-productivity",
+      "source": "./plugins/agenthub-productivity",
       "description": "Productivity automation — daily standups, weekly/monthly reviews, sprint summaries, time-of-day focus analysis, and workflow optimization using the workflow intelligence API's 11 datasets.",
       "tags": ["productivity", "reports", "workflows", "standup"]
     },
     {
       "name": "agenthub-devtools",
-      "path": "plugins/agenthub-devtools",
+      "source": "./plugins/agenthub-devtools",
       "description": "Developer tools for the Agent Monitor — session debugging with full event-chain inspection, data-integrity inspection, event tracing, transcript search, hook diagnostics, data export (JSON/CSV/Markdown), and system health checks.",
       "tags": ["devtools", "debug", "diagnostics", "export"]
     },
     {
       "name": "agenthub-insights",
-      "path": "plugins/agenthub-insights",
+      "source": "./plugins/agenthub-insights",
       "description": "AI-powered insights — pattern detection via workflow intelligence (tool flow transitions, agent co-occurrence), anomaly alerting, trend forecasting, regression watch, benchmarking, optimization recommendations, and session comparison.",
       "tags": ["insights", "patterns", "anomaly", "optimization"]
     },
     {
       "name": "agenthub-sessions",
-      "path": "plugins/agenthub-sessions",
+      "source": "./plugins/agenthub-sessions",
       "description": "Session forensics — search by project/model/status, reconstruct event timelines, replay transcripts turn-by-turn, roll up activity per working directory, and review stale sessions before cleanup.",
       "tags": ["sessions", "search", "transcript", "replay"]
     },
     {
       "name": "agenthub-workflows",
-      "path": "plugins/agenthub-workflows",
+      "source": "./plugins/agenthub-workflows",
       "description": "Multi-agent orchestration & fleet intelligence — map the subagent DAG, audit model delegation and effectiveness, report concurrency lanes, trace error propagation by depth, and review Workflow-tool fleet runs.",
       "tags": ["workflows", "orchestration", "subagents", "fleet"]
     },
     {
       "name": "agenthub-quality",
-      "path": "plugins/agenthub-quality",
+      "source": "./plugins/agenthub-quality",
       "description": "Reliability & SLOs — scan for API errors and tool failures, audit hook delivery health (PreToolUse/PostToolUse balance), track completion/error-rate SLOs with error budgets, and alert on reliability regressions.",
       "tags": ["reliability", "errors", "slo", "quality"]
     },
     {
       "name": "agenthub-config",
-      "path": "plugins/agenthub-config",
+      "source": "./plugins/agenthub-config",
       "description": "Claude Code config & memory governance — audit skills/subagents/commands/MCP servers/hooks/settings via the Config Explorer API and curate the file-based memory store (CLAUDE.md + per-project auto-memory files).",
       "tags": ["config", "memory", "governance", "mcp"]
     },
     {
       "name": "agenthub-dashboard",
-      "path": "plugins/agenthub-dashboard",
+      "source": "./plugins/agenthub-dashboard",
       "description": "Dashboard connector — quick status checks, one-line metrics, live activity watch, and endpoint probing against the Agent Monitor API.",
       "tags": ["dashboard", "status", "connector"]
     }

.claude-plugin/plugin.json

@@ -5,32 +5,14 @@
     "name": "Nguyễn Ngọc Trí Vĩ",
     "url": "https://git.smartgift.io.vn/Smartgift-AI"
   },
-  "homepage": "https://git.smartgift.io.vn/Smartgift-AI/Claude-Code-Monitor",
-  "repository": "https://git.smartgift.io.vn/Smartgift-AI/Claude-Code-Monitor.git",
+  "homepage": "https://git.smartgift.io.vn/Smartgift-AI/AgentHub",
+  "repository": "https://git.smartgift.io.vn/Smartgift-AI/AgentHub.git",
   "license": "MIT",
   "keywords": ["dashboard", "monitoring", "sessions", "cost", "lanes", "claude-code"],
   "commands": [
     "./plugins/agenthub/commands/agenthub-doctor.md",
     "./plugins/agenthub/commands/agenthub-update.md",
-    "./plugins/agenthub/commands/agenthub-open.md",
-    "./plugins/agenthub/commands/intake.md",
-    "./plugins/agenthub/commands/plan.md",
-    "./plugins/agenthub/commands/implement.md",
-    "./plugins/agenthub/commands/tests.md",
-    "./plugins/agenthub/commands/e2e.md",
-    "./plugins/agenthub/commands/e2e-passed.md",
-    "./plugins/agenthub/commands/review.md",
-    "./plugins/agenthub/commands/qc-plan.md",
-    "./plugins/agenthub/commands/qc.md",
-    "./plugins/agenthub/commands/gate.md",
-    "./plugins/agenthub/commands/publishing.md",
-    "./plugins/agenthub/commands/pr-open.md",
-    "./plugins/agenthub/commands/reported.md",
-    "./plugins/agenthub/commands/watching-pr.md",
-    "./plugins/agenthub/commands/merged.md",
-    "./plugins/agenthub/commands/done.md",
-    "./plugins/agenthub/commands/ship-full.md",
-    "./plugins/agenthub/commands/ship-quick.md"
+    "./plugins/agenthub/commands/agenthub-open.md"
   ],
   "hooks": {
     "PreToolUse": [

.claude/settings.local.json

@@ -38,5 +38,9 @@
       "Bash(claude --version)",
       "Bash(gh pr *)"
     ]
+  },
+  "env": {
+    "ANTHROPIC_BASE_URL": "",
+    "ANTHROPIC_AUTH_TOKEN": ""
   }
 }

.devcontainer/Dockerfile

@@ -1,7 +1,7 @@
 # Optional dev-container image for AgentHub.
-# Node 22 to match the production Dockerfile and the project's engines.
+# Node 22 to match the project's engines.
 # Adds the native-addon toolchain (better-sqlite3 builds via node-gyp) plus
-# Python 3 (statusline.py and helper scripts) and the sqlite3 CLI.
+# Python 3 (scripts/expand-ts-module-docs.py) and the sqlite3 CLI.
 #
 # This image is ONLY used by Dev Containers / Codespaces. Host-based development
 # (npm run dev / npm start) is unaffected.

.devcontainer/README.md

@@ -22,13 +22,13 @@ dependencies (`npm run setup`).
 
 | Component        | Detail                                                              |
 | ---------------- | ------------------------------------------------------------------- |
-| Base image       | `mcr.microsoft.com/devcontainers/javascript-node:22` (matches prod) |
+| Base image       | `mcr.microsoft.com/devcontainers/javascript-node:22`                |
 | Native toolchain | `build-essential` + `python3` so `better-sqlite3` compiles          |
-| Python           | `python3` / `python` for `statusline.py` and helper scripts         |
+| Python           | `python3` / `python` for `scripts/expand-ts-module-docs.py`         |
 | sqlite3 CLI      | inspect the dashboard DB during development                         |
-| Features         | GitHub CLI, Docker-in-Docker (build/run the project's own Dockerfile) |
+| Features         | GitHub CLI                                                          |
 | Forwarded ports  | `4820` (server API + WebSocket), `5173` (Vite client)               |
-| Editor           | ESLint + Prettier (format on save), Vitest, Docker, YAML, Tailwind  |
+| Editor           | ESLint + Prettier (format on save), Vitest, YAML, Tailwind          |
 
 ## Everyday commands
 

.devcontainer/devcontainer.json

@@ -4,9 +4,9 @@
   // Used only when you choose "Dev Containers: Reopen in Container" (VS Code) or
   // open the repo in a GitHub Codespace. It changes nothing for host-based dev.
   //
-  // Covers the full project: the Express server (4820), the React/Vite client
-  // (5173) and the VS Code extension. The native `better-sqlite3`
-  // addon builds here (build-essential + python3 are installed in the Dockerfile).
+  // Covers the full project: the Express server (4820) and the React/Vite
+  // client (5173). The native `better-sqlite3` addon builds here
+  // (build-essential + python3 are installed in the Dockerfile).
   //
   // NOTE (issue #193): Claude Code hooks are a HOST-side concern. This container
   // intentionally does NOT bind-mount ~/.claude and does NOT install hooks — the
@@ -20,10 +20,7 @@
   },
 
   "features": {
-    "ghcr.io/devcontainers/features/github-cli:1": {},
-    // Lets you build/run the project's own production Dockerfile + docker-compose
-    // from inside the dev container (e.g. to reproduce issue #193 deliberately).
-    "ghcr.io/devcontainers/features/docker-in-docker:2": {}
+    "ghcr.io/devcontainers/features/github-cli:1": {}
   },
 
   // Server (API + WebSocket) and the Vite client dev server. VS Code forwards
@@ -40,7 +37,7 @@
     }
   },
 
-  // Install root + client + vscode-extension deps.
+  // Install root + client deps.
   // Never installs Claude Code hooks (host-only — see note above).
   "postCreateCommand": "bash .devcontainer/post-create.sh",
   "waitFor": "postCreateCommand",
@@ -59,7 +56,6 @@
         "dbaeumer.vscode-eslint",
         "esbenp.prettier-vscode",
         "vitest.explorer",
-        "ms-azuretools.vscode-docker",
         "redhat.vscode-yaml",
         "yzhang.markdown-all-in-one",
         "ms-python.python",

.devcontainer/post-create.sh

@@ -7,7 +7,7 @@
 # @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 set -euo pipefail
 
-echo "▶ Installing server + client + vscode-extension dependencies (npm run setup)…"
+echo "▶ Installing server + client dependencies (npm run setup)…"
 npm run setup
 
 cat <<'EOF'

.dockerignore

@@ -1,15 +0,0 @@
-node_modules/
-client/node_modules/
-client/dist/
-data/
-.git/
-.github/
-*.md
-!README.md
-images/
-wiki/
-index.html
-og-image.svg
-favicon.svg
-.prettierrc
-.prettierignore

.env.example

@@ -2,6 +2,11 @@
 # Override this if your Claude Code data is in a different location, e.g.:
 #   CLAUDE_HOME=~/.codefuse/engine/cc
 # CLAUDE_HOME=~/.claude
+# A value saved from Settings (CLAUDE_HOME, CODEX_HOME, a pinned DASHBOARD_DATA_DIR)
+# goes to ~/.config/agenthub/settings.env (AGENTHUB_SETTINGS_FILE). This file wins
+# over it, and the real environment wins over both; a key set here or in the real
+# environment is reported as env-owned in Settings (a value saved there would be
+# overridden again at the next start).
 
 # ── Server / network ────────────────────────────────────────────────────────
 # Port to listen on (default: 4820)
@@ -66,6 +71,27 @@
 # Set to 0 to disable the poll while leaving the watcher running (default: 30000).
 #   DASHBOARD_SESSION_SYNC_MS=30000
 
+# Poll interval (ms) for Antigravity CLI sessions and tokens, read from agy's
+# own ~/.gemini/antigravity-cli/conversations/*.db (0 disables; default: 15000).
+#   DASHBOARD_ANTIGRAVITY_POLL_MS=15000
+# Where agy keeps its data, when not ~/.gemini (agy itself has no override).
+#   AGENTHUB_GEMINI_DIR=~/.gemini
+
+# Poll interval (ms) for Codex's rollout journals ($CODEX_HOME/sessions/**):
+# drives both the codex lane running/idle mirror and Codex sessions + tokens
+# (0 disables both; default: 15000).
+#   DASHBOARD_CODEX_POLL_MS=15000
+
+# Automatic pricing: a model seen in token usage with no rate row of its own
+# gets one from LiteLLM's public price list. 0 / false / off disables it
+# (default: enabled).
+#   AGENTHUB_PRICING_SYNC=0
+
+# Where settings saved from the dashboard persist (default:
+# $XDG_CONFIG_HOME/agenthub/settings.env, i.e. ~/.config/agenthub/settings.env).
+# Here or in the real environment; the file is located after this one loads.
+#   AGENTHUB_SETTINGS_FILE=/home/you/.config/agenthub/settings.env
+
 # ── Remote Data Sources (SSH multi-machine collection) ───────────────────────
 # The dashboard can pull Claude Code history from other machines over SSH:
 # it rsyncs each enabled remote's ~/.claude/projects into a sandboxed staging

.gitattributes

@@ -13,13 +13,3 @@
 *.ttf binary
 *.eot binary
 *.db binary
-
-# ── GitHub Linguist overrides — keep language stats honest ──────────────────
-# wiki/mermaid.min.js is a vendored, minified third-party library (Mermaid);
-# it is not project source code and must not count toward language stats.
-wiki/mermaid.min.js linguist-vendored
-
-# wiki/i18n-content.js is machine-assembled translation data (see its header:
-# "AUTO-GENERATED wiki body-content translations ... Do not hand-edit").
-# It is a data bundle keyed by English innerHTML, not hand-written JavaScript.
-wiki/i18n-content.js linguist-generated

.prettierignore

@@ -9,17 +9,5 @@ package-lock.json
 client/package-lock.json
 .vs/
 *.md
-index.html
-wiki/index.html
 *.yml
 *.yaml
-desktop/out/
-desktop/release/
-desktop/node_modules/
-desktop/package-lock.json
-desktop/assets/*.svg
-desktop/assets/*.png
-desktop/assets/*.icns
-desktop/assets/icon.iconset/
-wiki/mermaid.min.js
-fonts/*.woff2

.superpowers/README.md

@@ -1,130 +0,0 @@
-# Superpowers Workspace
-
-This directory contains project-specific configuration and artifacts for the Superpowers workflow.
-
-It acts as the working memory layer for agent-driven development, enabling structured planning, execution, and iteration across sessions.
-
----
-
-## Purpose
-
-Superpowers transforms coding agents into structured, process-driven collaborators. Instead of jumping straight into code, the agent:
-
-1. Clarifies intent
-2. Produces a design
-3. Breaks work into executable steps
-4. Executes via subagents
-5. Verifies and iterates
-
-This directory stores the outputs of that workflow so progress is persistent, inspectable, and reproducible.
-
----
-
-## Directory Structure
-
-Typical contents may include:
-
-```
-.superpowers/
-├── brainstorm/        # Design explorations and refined specs
-├── plans/             # Task breakdowns and execution plans
-├── reviews/           # Code review outputs and feedback
-├── runs/              # Execution logs or agent traces
-└── README.md          # This file
-```
-
-> Exact structure may evolve depending on which skills are triggered.
-
----
-
-## Workflow Overview
-
-Superpowers operates through automatic skill activation:
-
-### 1. Brainstorming
-
-* Refines vague ideas into concrete specs
-* Explores alternatives
-* Produces structured, reviewable design docs
-
-### 2. Planning
-
-* Converts approved designs into granular tasks
-* Each task is:
-
-  * Small (2–5 min)
-  * Explicit (exact file paths + code)
-  * Verifiable
-
-### 3. Execution
-
-* Tasks are executed by subagents
-* Includes:
-
-  * Spec compliance checks
-  * Code quality review
-* Can run sequentially or in parallel
-
-### 4. Verification
-
-* Enforces test-first development (TDD)
-* Ensures correctness before completion
-* Prevents silent regressions
-
-### 5. Completion
-
-* Validates final state
-* Offers merge / PR / discard options
-* Cleans up working branches
-
----
-
-## Key Principles
-
-* **Test-first development** (RED → GREEN → REFACTOR)
-* **Small, deterministic tasks**
-* **Explicit over implicit**
-* **Process over intuition**
-* **Verification over assumption**
-
----
-
-## How to Use
-
-You don’t interact with this directory directly most of the time.
-
-Instead:
-
-* Start a task in your coding agent (Claude, Cursor, etc.)
-* Let Superpowers skills activate automatically
-* Review outputs when prompted (designs, plans, reviews)
-
-Artifacts will be written here as the workflow progresses.
-
----
-
-## When to Look Here
-
-Check this directory when you want to:
-
-* Review the current plan
-* Inspect prior design decisions
-* Debug agent behavior
-* Resume interrupted work
-* Audit what was executed
-
----
-
-## Notes
-
-* Files here are **source-of-truth for agent state**
-* Safe to commit (recommended for team workflows)
-* Avoid manual edits unless you understand the workflow implications
-
----
-
-## Related
-
-* Project root `CLAUDE.md` → global agent context
-* `.claude/` → rules, skills, and subagents
-* Superpowers upstream docs → 

.superpowers/brainstorm/1542-1774533799/state/server-stopped

@@ -1 +0,0 @@
-{"reason":"idle timeout","timestamp":1774536800234}

.superpowers/brainstorm/1542-1774533799/state/server.pid

@@ -1 +0,0 @@
-1542

AGENTS.md

@@ -11,42 +11,11 @@
 - Update docs whenever workflow or architecture changes — follow `skills/update-project-docs/` automatically at the end of every change-set (README + VN/CN/KO mirrors, ARCHITECTURE, wiki + i18n + cache bump, server/client READMEs, docs/*).
 - Every applicable source file you create or update (`.js/.ts/.tsx/.cjs/.mjs/.py/.sh/.css`) must start with the authorship header: a truthful file overview plus the exact line `@author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>`. See `skills/file-headers/` and `.claude/rules/file-headers.md`; verify with `bash skills/file-headers/scripts/check-headers.sh`.
 
-## Declare your lane stage as you work
+## Lane stage
 
-This repository is watched by AgentHub, its own dashboard. A **lane** is keyed by
-working directory, and the pipeline map only moves forward when the agent doing
-the work declares its stage:
-
-```bash
-agenthub stage <stage> --tool codex --evidence "<what is actually done>"
-```
-
-- Call it at every real transition — starting to plan, starting to implement,
-  running tests, opening the PR — not once at the end.
-- Stage names, `default` template: `intake → plan → implement → tests → review
-  → gate → ship → done` (the 16-node `ship-feature` template accepts these as
-  aliases too; `agenthub stage` warns on stderr and names the valid nodes if a stage
-  matches none).
-- **`--tool codex` matters.** One directory can back both a `claude` lane and a
-  `codex` lane, and without a tool the command fails rather than guess (it names
-  both candidates). Inside a pane the dashboard started you need nothing — that
-  pane carries `AGENTHUB_LANE_ID`, which outranks everything but `--lane`.
-- If `agenthub stage` reports that no lane owns the directory, this checkout was
-  never adopted: skip the stage calls and carry on. Stage reporting is
-  reporting, never control flow — a failed `agenthub stage` never justifies skipping
-  a step of the actual work.
-
-The dashboard also *infers* your stage from your tool calls (it reads Codex's
-own rollout journals — see `docs/LANES.md#stage-detection`), and on a codex lane
-that inference does move the pipeline map forward on its own. It still never
-counts as **evidence**: a node it moved through stays amber and never renders
-green. Only your own declaration does that — which is why the call above is
-worth making even when the map already looks right.
-
-If you hold a stage for a while with no evidence recorded, the dashboard may
-type a one-line `[agenthub]` reminder straight into this pane asking you to run
-`agenthub stage ... --evidence "..."`. That is the dashboard, not the user — treat
-it as the same instruction as this section and just make the real call.
+AgentHub's `codex` lanes (like every non-Claude AI tool lane) carry no pipeline: the dashboard shows no stage for
+them and never infers or advances one, so there is no `agenthub stage` call to
+make while you work here as Codex.
 
 ## Where to work
 - `server/` for API/routes/data processing.

Dockerfile

@@ -1,67 +0,0 @@
-# Multi-stage Dockerfile for AgentHub - a Node.js server with a React client.
-# This setup optimizes the final image size by separating the build and runtime stages.
-# The first stage installs only the production dependencies for the server, while the second stage builds the React client.
-# The final stage combines the necessary files and dependencies to run the application in production.
-# Compatibility: This setup is compatible with both Podman and Docker. Runnable on any platform that supports Node.js and Alpine Linux.
-#
-# Author: Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
-
-# ── Stage 1: Install server production deps ───────────────────────────
-FROM node:22-alpine AS server-deps
-WORKDIR /app
-COPY package.json package-lock.json ./
-# The root `postinstall` hook (scripts/postinstall.js) fires during `npm ci`, so
-# the file must exist here or npm aborts with MODULE_NOT_FOUND before installing
-# anything. It self-skips when client/ is absent (as it is in this stage), so
-# copying just the one script keeps this deps-cache layer from busting on
-# unrelated scripts/ edits. Do NOT use --ignore-scripts: that would also skip
-# better-sqlite3's prebuild fetch and silently drop the native SQLite driver.
-COPY scripts/postinstall.js ./scripts/postinstall.js
-RUN npm ci --omit=dev
-
-# ── Stage 2: Build React client ───────────────────────────────────────
-FROM node:22-alpine AS client-build
-WORKDIR /app/client
-COPY client/package.json client/package-lock.json ./
-RUN npm ci
-COPY client/ ./
-# vite.config.ts stamps the UI version from the repo-root package.json (one level
-# up from the client dir). Provide it here so the built client shows the real
-# release version; the config falls back gracefully if it is ever absent.
-COPY package.json /app/package.json
-RUN npm run build
-
-# ── Stage 3: Production runtime ───────────────────────────────────────
-FROM node:22-alpine
-WORKDIR /app
-
-# Runs Claude Code sessions inside a named tmux session per lane so both the
-# dashboard (via node-pty attach) and a real terminal can share one live pane.
-RUN apk add --no-cache tmux
-
-COPY --from=server-deps /app/node_modules ./node_modules/
-COPY package.json ./
-COPY server/ ./server/
-COPY scripts/ ./scripts/
-COPY statusline/ ./statusline/
-COPY --from=client-build /app/client/dist ./client/dist/
-
-RUN mkdir -p data
-
-EXPOSE 4820
-
-ENV NODE_ENV=production
-
-# In a container the app MUST bind all interfaces: the server binds loopback by
-# default (GHSA-gr74-4xfh-6jw9), but a container's loopback is a separate
-# namespace the published port cannot reach, so a loopback bind makes the port
-# unreachable. Inside a container the trust boundary is the *host* port publish
-# (keep it on 127.0.0.1 — see docker-compose.yml / INSTALL.md), not this bind.
-ENV DASHBOARD_HOST=0.0.0.0
-
-# The recommended ~/.claude bind mount is read-only, so the server cannot write
-# its default data dir (~/.claude/agenthub). Persist to the mounted
-# volume at /app/data instead.
-ENV DASHBOARD_DATA_DIR=/app/data
-
-CMD ["node", "server/index.js"]

INSTALL.md

@@ -7,8 +7,8 @@ A step-by-step guide to get AgentHub — the local control surface for Claude Co
 If all you want is a working dashboard, skip every step below. From Claude Code:
 
 ```
-/plugin marketplace add Smartgift-AI/Claude-Code-Monitor
-/plugin install agenthub@claude-code-agent-monitor-plugins
+/plugin marketplace add https://git.smartgift.io.vn/Smartgift-AI/AgentHub.git
+/plugin install agenthub@agenthub
 ```
 
 The next session start installs the hooks, boots the server, puts the `agenthub` CLI
@@ -30,17 +30,123 @@ dashboard, run it from source, or stay on Node 20.
 | Node.js | 20+ (22+ recommended) | Required for server and client |
 | npm | 9+ | Comes with Node.js |
 | Claude Code | 2.x+ | Required for hook integration |
-| Python | 3.6+ | Optional — statusline utility only |
-| Git | Any | For cloning the repository |
-| `superpowers` plugin | Any | Optional — required only by `/agenthub:ship-feature` and `/agenthub:ship-feature-lane`, which drive its skills step by step (and which the built-in pipeline templates name as their per-node commands). Nothing else in AgentHub needs it; `/agenthub-doctor` reports it as `WARN` when absent. **Installed automatically** by the plugin's `SessionStart` bootstrap (opt out with `AGENTHUB_AUTO_INSTALL_PLUGINS=0`); by hand: `claude plugin install superpowers@claude-plugins-official` |
+| Git | Any | Cloning the repository, and every lane operation (worktrees, branch/status reads) |
+| **tmux** | 3.x | **Required for the run console** — the browser terminal, `agenthub lanes shell`, and typing `/reload-plugins` into a live pane. See [Step 0](#step-0--system-packages) |
+| Codex CLI | Any | Optional — only for lanes whose tool is `codex` |
+| GitHub CLI (`gh`) | Any | Optional — only for `agenthub lanes ci status` |
+| Python | 3.6+ | Optional — only for `scripts/expand-ts-module-docs.py` (doc generation) |
+
+---
+
+## Step 0 — System packages
+
+Node and npm are not enough: `git` backs every lane operation, and **`tmux`
+backs the run console**. The dashboard shells out to the `tmux` binary and has
+no bundled fallback, so without it **Start Run** and `agenthub lanes shell`
+fail while everything else keeps working.
+
+```bash
+sudo apt install git tmux        # Debian / Ubuntu
+sudo dnf install git tmux        # Fedora / RHEL
+brew install git tmux            # macOS
+sudo pacman -S git tmux          # Arch
+```
+
+Windows has no native tmux. Run AgentHub under **WSL2** and install it inside
+the WSL distro — a tmux from Git Bash or MSYS is not what the server executes.
+
+Check it:
+
+```bash
+tmux -V          # e.g. tmux 3.4
+git --version
+node -v          # v20.x / v22.x / v24.x
+```
+
+Once the server is up you can ask it directly — this is the same probe the
+dashboard uses:
+
+```bash
+curl -s localhost:4820/api/run/tmux      # {"available":true}
+```
+
+**No configuration is needed.** AgentHub creates its own session per lane,
+named `agenthub-lane-<id>`, and never reads your `~/.tmux.conf` for anything it
+depends on (mouse mode is set on the session explicitly). You can attach to the
+exact same pane from a normal terminal:
+
+```bash
+agenthub lanes shell             # from inside the lane's directory
+tmux attach -t agenthub-lane-7   # or by name
+tmux ls                          # every dashboard session is prefixed agenthub-lane-
+```
+
+Detaching is `Ctrl-b d` — it leaves the run alive, which is the whole point:
+the browser terminal and your local terminal are two clients on one pane, and
+restarting the dashboard never stops a run.
+
+### macOS
+
+Status: **code-audited, untested on a Mac.** The Mac-specific paths below are
+covered by Linux-side unit tests only; the checklist at the end of this section
+is what a Mac user runs to confirm them.
+
+```bash
+brew install node git tmux       # Node >= 22.5 for the plugin install (nvm works too)
+echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.zshrc   # where the plugin puts `agenthub`
+```
+
+- **Node:** a plugin install needs **>= 22.5** (it stores data through
+  `node:sqlite`); a checkout still runs on Node 20. The `agenthub` launcher
+  pins the node that installed it and falls back to `node` on `PATH` when a
+  `brew upgrade` or `nvm` switch deletes that binary.
+- **Starts at login by itself (LaunchAgent).** The plugin bootstrap installs
+  `~/Library/LaunchAgents/io.smartgift.agenthub.plist` (a checkout: `agenthub
+  service install`), so the dashboard comes back after every login with no
+  Claude Code session, and launchd restarts it if it dies. Lane panes survive
+  a restart of the server. Its output goes to `~/Library/Logs/agenthub.log`.
+  A LaunchAgent needs a login at the Mac itself; over SSH only, or when
+  `launchctl` fails, the server is a detached process started by the next
+  Claude Code session (within about 10 s) or by `agenthub start`, as before. A
+  discovery entry left over from before the reboot is ignored, so a recycled
+  pid can never pass for a live dashboard.
+- **Started from a Claude Code session.** The server drops the variables that
+  describe that session (`CLAUDECODE`, `CLAUDE_CODE_SESSION_ID`,
+  `CLAUDE_PLUGIN_ROOT`, …) before anything else runs, so lane panes do not
+  inherit them. Your own configuration (`CLAUDE_CONFIG_DIR`,
+  `CLAUDE_CODE_USE_BEDROCK`, `ANTHROPIC_*`) passes through. A tmux server that
+  an older build started keeps its dirty global env until it exits
+  (`tmux kill-server` once, with no run you care about open).
+- **Paths.** A lane's directory is stored by its real path, so a typed `/tmp/x`
+  becomes `/private/tmp/x` and a differently-cased path on a case-insensitive
+  volume becomes the one on disk — that is what sessions report, so they bind.
+  Lanes created before this change keep the string they were created with.
+- **Account switching** uses the login Keychain item `Claude Code-credentials`;
+  macOS may ask once for permission the first time.
+- **Option key** in the browser terminal types special characters (it is not
+  sent as Meta).
+
+**Mac checklist** — please run it and report the result on issue #22:
+
+1. Fresh plugin install from a Terminal `claude` session: the dashboard answers on `http://localhost:4820`, `~/Library/LaunchAgents/io.smartgift.agenthub.plist` exists, and `/agenthub-doctor`'s launchd row says the LaunchAgent is current and running.
+2. `tmux show-environment -g | grep -i claude` prints nothing.
+3. Add a Repo lane by typing its path in a different case: sessions bind to it, and `agenthub stage plan` inside it moves the map.
+4. **Start Run** in the browser: the terminal attaches, typing works, an image paste into `claude` works, and `exit` returns to the run form.
+5. Changes panel: diff, stage and commit on a lane.
+6. Switch profile and check `claude /status` shows the new account. Repeat with a non-default `CLAUDE_HOME`, which also checks the Keychain service name.
+7. `brew upgrade node && brew cleanup`, then `agenthub status` still works.
+8. Reboot and log in WITHOUT opening `claude`: the dashboard answers within about 10 s (`agenthub service status` shows `state = running`).
+9. `kill <server pid>` (from `agenthub status`): it is back within a few seconds.
+10. With a lane run open, `/agenthub-update` completes, the server restarts on the new version, the plist names the new cache directory, and the run's terminal is still alive.
+11. `agenthub service uninstall`: the plist is gone and nothing restarts the server after a `kill`.
 
 ---
 
 ## Step 1 — Clone the repository
 
 ```bash
-git clone https://git.smartgift.io.vn/Smartgift-AI/Claude-Code-Monitor.git
-cd Claude-Code-Monitor
+git clone https://git.smartgift.io.vn/Smartgift-AI/AgentHub.git
+cd AgentHub
 ```
 
 ---
@@ -85,7 +191,7 @@ This starts two processes concurrently:
 Open **http://localhost:5173** in your browser.
 
 > [!TIP]
-> When you run the dashboard directly on the host with `npm run dev` or `npm start`, the server automatically writes the Claude Code hook configuration to `~/.claude/settings.json`. If you run the dashboard in Docker or Podman, install hooks from the host with `npm run install-hooks` after the container is up.
+> When you run the dashboard directly on the host with `npm run dev` or `npm start`, the server automatically writes the Claude Code hook configuration to `~/.claude/settings.json`. If you run the dashboard inside a container, install hooks from the host with `npm run install-hooks` instead — a hook path written from inside a container points at the container filesystem.
 
 ---
 
@@ -108,7 +214,7 @@ After starting a Claude Code session, you should see:
 - **Agent Board** — a `Main Agent` card in the `Waiting` column until you type your first message; it flips to `Working` on `UserPromptSubmit` / `PreToolUse` and back to `Waiting` after each `Stop`
 - **Activity Feed** — events streaming in as Claude Code uses tools
 - **Dashboard** — stats updating in real-time
-- **Settings page** — model pricing rules, hook configuration status, data export and cleanup tools
+- **Settings page** — data export and cleanup tools on the Dashboard tab; Claude Code's model pricing rules, hook configuration status and CLAUDE_HOME on **Settings → Claude Code → Overview**
 
 If nothing appears after 30 seconds, see [SETUP.md](./SETUP.md#troubleshooting).
 
@@ -120,8 +226,6 @@ The dashboard is a Progressive Web App. After opening it in a supported browser
 2. Once installed, the dashboard launches in its own window with no browser chrome
 3. Offline support: previously visited pages and assets are served from the Service Worker cache when the network is unavailable
 
-The landing page and wiki are also installable PWAs with their own manifests and service workers — visit each in a browser to install independently.
-
 ---
 
 ## Step 5 — (Optional) Import existing Claude Code history
@@ -189,13 +293,15 @@ npm start       # Start Express serving client/dist on port 4820
 Open **http://localhost:4820** in your browser.
 
 `npm start` (and `agenthub start`, its backgrounded form) only run while that
-process is alive — a reboot loses it. On Linux, run the server as a systemd
-`--user` service instead so it comes back on its own after every reboot, with
-no manual step and no Claude Code (or any other tool) needed to trigger it:
+process is alive — a reboot loses it. Run the server as a systemd `--user`
+service (Linux) or a LaunchAgent (macOS) instead so it comes back on its own
+after every reboot, with no manual step and no Claude Code (or any other tool)
+needed to trigger it:
 
 ```bash
-agenthub service install       # writes + enables ~/.config/systemd/user/agenthub.service
-agenthub service status        # systemctl --user status agenthub
+agenthub service install       # Linux: ~/.config/systemd/user/agenthub.service
+                               # macOS: ~/Library/LaunchAgents/io.smartgift.agenthub.plist
+agenthub service status        # systemctl --user status / launchctl print
 agenthub service uninstall     # disable and remove it
 ```
 
@@ -212,7 +318,6 @@ This repository includes extension packs for both Claude Code and Codex.
   - `CLAUDE.md`
   - `.claude/rules/`
   - `skills/` (shipped as the `agenthub` plugin's skills)
-  - `agents/` (shipped as the `agenthub` plugin's agents)
 - Codex project packs live under `.codex/`:
   - `AGENTS.md`
   - `.codex/rules/`
@@ -223,89 +328,6 @@ See [`.codex/README.md`](./.codex/README.md) for Codex extension details.
 
 ---
 
-## Optional: VS Code extension
-
-**AgentHub** is also available as a dedicated VS Code extension for seamless, integrated monitoring.
-
-<p align="center">
-  <img src="vscode-extension/vscode.png" alt="VS Code Extension Screenshot" width="100%">
-</p>
-
-### Features
-- **Real-time Sidebar**: Monitor agent status, health, and usage stats in the Activity Bar.
-- **Pulse Status Bar**: High-level session and agent counts in the bottom status bar.
-- **Direct Navigation**: Jump to specific dashboard pages or recent sessions.
-- **Embedded Dashboard**: Full dashboard interface within a native VS Code tab.
-
-### Installation
-1. Open the [vscode-extension](./vscode-extension) folder in VS Code.
-2. Install via the Marketplace or package it manually:
-   ```bash
-   cd vscode-extension
-   npm install
-   # Generate .vsix for local install
-   npm run package
-   ```
-3. After installation, ensure the main dashboard server is running (`npm run dev`).
-4. Look for the **Radar icon** in your VS Code Activity Bar.
-
-For advanced configuration, refer to the [.vscode](./.vscode) and [vscode-extension](./vscode-extension) directories.
-
-> [!TIP]
-> Extension on VS Code Marketplace: [AgentHub](https://marketplace.visualstudio.com/items?itemName=hoangsonw.claude-code-agent-monitor)
-
----
-
-## Container mode (Docker / Podman)
-
-The repository includes both a multi-stage `Dockerfile` and a `docker-compose.yml` file. Docker and Podman are both supported.
-
-### Compose
-
-```bash
-# Docker Compose
-docker compose up -d --build
-
-# Podman Compose
-CLAUDE_HOME="$HOME/.claude" podman compose up -d --build
-```
-
-Open **http://localhost:4820** in your browser.
-
-### Plain Docker / Podman
-
-```bash
-# Docker
-docker build -t agent-monitor .
-docker run -d --name agent-monitor \
-  -p 127.0.0.1:4820:4820 \
-  -v "$HOME/.claude:/root/.claude:ro" \
-  -v agent-monitor-data:/app/data \
-  agent-monitor
-
-# Podman
-podman build -t agent-monitor .
-podman run -d --name agent-monitor \
-  -p 127.0.0.1:4820:4820 \
-  -v "$HOME/.claude:/root/.claude:ro" \
-  -v "$HOME/.claude/agenthub:/app/data" \
-  agent-monitor
-```
-
-### Container notes
-
-| Mount | Purpose |
-|---|---|
-| `~/.claude:/root/.claude:ro` | Lets the server import legacy Claude session history |
-| `~/.claude/agenthub:/app/data` | **Canonical SQLite database** (shared with native installs) |
-
-> [!NOTE]
-> The image sets `DASHBOARD_HOST=0.0.0.0` and `DASHBOARD_DATA_DIR=/app/data` internally (baked into the `Dockerfile`). The `0.0.0.0` bind is required because a container's loopback is a separate namespace the published port cannot reach; `/app/data` is bind-mounted to `~/.claude/agenthub` on the host so Docker uses the same database as `npm start`. The trust boundary is the **host** port publish — the examples use `-p 127.0.0.1:4820:4820`, so the dashboard is local-only. To expose it on a LAN, publish on `0.0.0.0` (`-p 4820:4820`) **and** set `DASHBOARD_TOKEN`.
-
-> [!IMPORTANT]
-> Claude Code hooks run on the host, not inside the container. After the container is healthy on `http://localhost:4820`, run `npm run install-hooks` on the host so Claude Code posts hook events back to the containerized server. The installer refuses to run inside a container (issue #193) to avoid writing a container-internal handler path into a bind-mounted `~/.claude`; use `AGENTHUB_ALLOW_CONTAINER_HOOKS=1` only if you run Claude Code inside the same container.
----
-
 ## Troubleshooting
 
 ### `npm run setup` shows `better-sqlite3` errors
@@ -346,6 +368,27 @@ npm run setup
 
 The Vite dev server and Express server run on different ports. Make sure both are running (`npm run dev` starts both). Open **http://localhost:5173**, not `http://localhost:4820`, during development.
 
+### "Start Run" fails, or the terminal never attaches
+
+The run console is tmux-backed. Check, in this order:
+
+```bash
+tmux -V                                   # not installed → see Step 0
+curl -s localhost:4820/api/run/tmux       # {"available":false} → the SERVER cannot see tmux
+curl -s "localhost:4820/api/run/binary?tool=claude"   # {"found":true,"path":"…"}
+```
+
+`{"available":false}` while your own shell finds tmux means the server runs with
+a different `PATH` — most often a systemd `--user` service, which does not read
+your shell profile. Fix it by installing tmux system-wide (`/usr/bin/tmux`)
+rather than into a shell-managed prefix, then `agenthub service uninstall &&
+agenthub service install`.
+
+The same `PATH` rule applies to `claude` and `codex`: a run starts the binary by
+name, so a `claude` installed only through an interactive shell's profile is
+invisible to a service-managed server. `{"found":false}` for the lane's tool is
+that case.
+
 ### No sessions appearing after starting Claude Code
 
 See [SETUP.md — Troubleshooting](./SETUP.md#troubleshooting) for detailed hook debugging steps.

Makefile

@@ -94,30 +94,6 @@ import-history: ## Import sessions from ~/.claude/ history
 clear-data: ## Delete all data rows (preserves schema)
 	node scripts/clear-data.js
 
-# ─── Docker / Podman ───────────────────────────────────────────────────────
-
-.PHONY: docker-build
-docker-build: ## Build dashboard Docker image
-	docker build -t claude-agent-monitor:local .
-
-.PHONY: docker-up
-docker-up: ## Start via docker-compose
-	docker compose up -d
-
-.PHONY: docker-down
-docker-down: ## Stop docker-compose stack
-	docker compose down
-
-.PHONY: docker-logs
-docker-logs: ## Tail docker-compose logs
-	docker compose logs -f
-
-
-.PHONY: podman-build
-podman-build: ## Build dashboard Podman image
-	podman build -t localhost/claude-agent-monitor:local .
-
-
 # ─── Help ───────────────────────────────────────────────────────────────────
 
 .PHONY: help

README.md

@@ -3,7 +3,7 @@
 Internal SmartGift build. Local-first **control surface** for Claude Code agents —
 monitoring is one part of it, not the whole. Hooks POST every tool call to an
 Express + SQLite server and a React UI updates over WebSocket; **lanes** track
-parallel agent work through a pipeline; and the `agenthub` CLI drives real terminal
+parallel agent work, one working directory each; and the `agenthub` CLI drives real terminal
 sessions, lane runtimes, and Claude Code's own configuration.
 
 AgentHub records and shows — it does not orchestrate. The session in control makes
@@ -13,54 +13,114 @@ Internal build — all rights reserved.
 
 *(Tiếng Việt: [README.vi.md](README.vi.md))*
 
-## What it does
+## Main features
+
+**Observe**
 
 - **Sessions, agents, events.** Everything Claude Code emits, recorded and
   searchable: tool calls, token usage, cost, subagent trees, transcripts.
-- **Lanes.** One lane per working directory, surviving session restarts. A lane
-  moves through pipeline stages and the dashboard shows where it is.
-- **Stage detection.** The stage is inferred from the tool stream, so a session
-  that never calls `agenthub stage` still shows progress — rendered dashed amber and
-  never as done, because an inference is not evidence.
+- **Analytics and cost.** Per-model token totals and estimated cost, with
+  editable pricing rules; top tools, agent types, and workflow patterns.
+- **Activity feed and alerts.** A live event stream, alert rules, and webhook
+  targets that fire on them.
+- **History import.** Every session under `~/.claude/projects/` is imported on
+  startup; archives from another machine come in through Settings → Import
+  History (idempotent, never double-counts tokens).
+- **Remote sources.** Pull session history from other machines over SSH
+  (`agenthub remote-sources`).
+
+**Drive**
+
+- **Lanes.** One lane per working directory, surviving session restarts. Once you
+  install a pipeline template (none ships), a lane moves through its stages and
+  the dashboard shows where it is.
+- **Stage detection.** With a template installed, the stage is inferred from the
+  tool stream, so a session that never calls `agenthub stage` still shows
+  progress — rendered dashed amber and never as done, because an inference is
+  not evidence.
 - **Run Claude Code or Codex from the browser.** A real terminal (tmux + a real
   PTY, rendered with xterm.js) attached to a lane's directory — the exact TUI
   you'd see locally, fully interactive, resumable, and attachable from a real
   terminal too via `agenthub lanes shell`. Which CLI it starts is the lane's own
-  setting.
-- **Analytics (in-dashboard tab), alerts, and a workflow view**, plus a CLI.
+  setting. **This is the part that needs `tmux` installed** — see
+  [Prerequisites](#prerequisites).
+- **Git, from the dashboard.** Each lane card shows its branch, `↑ahead ↓behind`
+  and its uncommitted files, with buttons for the ordinary moves: fetch, pull
+  (always `--ff-only`), push, commit-all, and switching branch on a clean tree.
+  Beside the lane sits a collapsible **Changes** panel — an overview of the
+  changed files, a full review of every diff, or one file at a time, comparing
+  either uncommitted work or the whole branch against its base. There is no
+  merge/rebase/reset button by design: recovery from those needs a terminal.
+- **Per-lane app stacks.** A repo that declares `.agenthub/profile/` gets its own
+  slot, ports and services per lane (`agenthub lanes up|down|logs`).
 
-## Requirements
+**Configure**
 
-Node **>= 20** (`engines` in `package.json`). Node **24** is what the test suites
-are verified on — node 25 currently breaks 6 server tests through a
+- **Claude Code + Codex configuration explorer.** Settings hosts one panel per
+  tool: every plugin, skill, subagent, slash command, MCP server, hook, settings
+  file, memory file, marketplace, keybinding and statusline Claude Code knows
+  about — read for all of them, edit/create/delete for the text-file surfaces
+  (skills, agents, commands, output styles, `CLAUDE.md`). Plugins, MCP, hooks and
+  `settings.json` stay read-only: they race with the live CLI.
+- **Updates.** Release-based update detection with an in-UI **Update all**
+  (marketplaces → every plugin → AgentHub last → one session reload).
+- **Appearance.** Settings → Appearance picks Dark / Light / System (follows the
+  OS live) and a theme per mode — dark: Default, Darcula, Apple Dark; light:
+  Default, Apple Light, IntelliJ Light, Canvas. Each mode remembers its own
+  theme, so the sidebar's quick toggle swaps between the two. Per-browser only.
+- **A CLI for all of it** (`agenthub`, plus `agenthub repl`), a PWA install, and
+  a UI in English, Vietnamese, Chinese and Korean.
+
+## Prerequisites
+
+| Need | Version | Required for |
+|---|---|---|
+| **Node.js** | >= 20 (>= 22.5 for a plugin install) | Everything. Both suites are verified green on **24** and **26** |
+| **npm** | 9+ | Ships with Node |
+| **git** | any | Cloning, and every lane operation (worktrees, branch/status reads) |
+| **tmux** | 3.x | The browser run console, `agenthub lanes shell`, typing `/reload-plugins` into a live pane |
+| **Claude Code** | 2.x | Hook ingestion — the whole monitoring side |
+| **Codex CLI** | any | Optional — only for `codex` lanes |
+| **GitHub CLI (`gh`)** | any | Optional — only for `agenthub lanes ci status` |
+| **systemd (user)** | — | Optional — only for `agenthub service install` (Linux auto-start on boot) |
+
+Node **25** is the one version to avoid: it breaks 6 server tests through a
 better-sqlite3 ABI mismatch and 20 client tests through a global `localStorage`
-change.
+change. Both were gone again by 26 (1712 server + 488 client tests green on
+v26.8.1).
 
-The **`superpowers` plugin is required by the ship-feature pipelines only**, not
-by the dashboard. `/agenthub:ship-feature` and `/agenthub:ship-feature-lane` drive
-`superpowers:brainstorming`, `writing-plans`, `test-driven-development`,
-`requesting-code-review` and `verification-before-completion` phase by phase,
-and both built-in pipeline templates name those same slash commands as their
-per-node drivers. Without it the dashboard, hooks and CLI all work
-normally — the two pipeline skills are what stop partway. `/agenthub-doctor` reports
-it as a `WARN` row.
+### Installing tmux
 
-**You do not normally have to install it.** The plugin's `SessionStart`
-bootstrap installs it for you, once, in its detached worker — so a session never
-waits on the clone, and the current session needs `/reload-plugins` before the
-skills resolve (any later session picks them up on its own). The outcome is
-logged to `~/.claude/agenthub/runtime/bootstrap.log`, and `/agenthub-update`
-retries a failed one. To install it by hand instead, or after opting out:
+The dashboard shells out to the `tmux` binary; there is no bundled fallback, so
+**Start Run** and `agenthub lanes shell` fail without it. Everything else
+(sessions, analytics, lanes, stage detection, the CLI) works fine.
 
 ```bash
-claude plugin install superpowers@claude-plugins-official
+sudo apt install tmux        # Debian / Ubuntu
+sudo dnf install tmux        # Fedora / RHEL
+brew install tmux            # macOS
+sudo pacman -S tmux          # Arch
 ```
 
-Set `AGENTHUB_AUTO_INSTALL_PLUGINS=0` to opt out of the automatic install. Only the
-plugins on a fixed allowlist in `server/lib/skill-plugins.js` are ever installed
-this way — `superpowers` today. A custom pipeline template naming some other
-plugin's command is *reported* by `/agenthub-doctor` and never installed, because a
-template is a file anyone can drop into `DASHBOARD_PIPELINES_DIR`.
+Windows has no native tmux — run AgentHub under WSL2 and install it there.
+
+macOS (code-audited, untested on a Mac): `brew install node git tmux` (Node
+>= 22.5 for the plugin), add `~/.local/bin` to `PATH` in `~/.zshrc`. There is
+no systemd, so the dashboard runs until logout/reboot and comes back at the
+next Claude Code session, or by hand with `agenthub start`. Details and a
+checklist to verify it: [INSTALL.md § macOS](INSTALL.md#macos).
+
+Verify, both from your shell and from the server's point of view:
+
+```bash
+tmux -V                                      # e.g. tmux 3.4
+curl -s localhost:4820/api/run/tmux          # {"available":true}
+```
+
+A lane's run lives in a tmux session named `agenthub-lane-<id>`, so the browser
+terminal and a local `tmux attach -t agenthub-lane-<id>` (or `agenthub lanes
+shell`) are two clients on the same pane — they stay in sync, and killing the
+dashboard never kills the run.
 
 ## Install as a Claude Code plugin
 
@@ -68,8 +128,8 @@ Two commands on a machine that has nothing but Claude Code, no clone and no
 `npm run setup`:
 
 ```
-/plugin marketplace add Smartgift-AI/Claude-Code-Monitor
-/plugin install agenthub@claude-code-agent-monitor-plugins
+/plugin marketplace add https://git.smartgift.io.vn/Smartgift-AI/AgentHub.git
+/plugin install agenthub@agenthub
 ```
 
 The first session start installs the hooks, boots the server, puts `agenthub` on
@@ -83,7 +143,7 @@ Details, including what to delete on uninstall:
 ## Install from a checkout
 
 ```bash
-npm run setup          # root, client and vscode-extension dependencies
+npm run setup          # root and client dependencies
 npm run build          # builds the client into client/dist
 npm start              # serves the built client and the API on :4820
 ```
@@ -105,19 +165,20 @@ every event is counted twice.
 ### Run as a service (auto-start on boot)
 
 `npm start` only runs while that terminal (or `agenthub start`'s background
-process) is alive — a reboot loses it. On Linux, `agenthub service install` sets
-up a systemd `--user` service instead, so `:4820` is up again on its own after
+process) is alive — a reboot loses it. `agenthub service install` sets up a
+systemd `--user` service (Linux) or a LaunchAgent (macOS) instead, so `:4820` is up again on its own after
 every reboot, with no manual step and no Claude Code (or any AI tool) needed
 to trigger it:
 
 ```bash
 npm run build              # the service serves the built client, same as npm start
-agenthub service install       # writes + enables ~/.config/systemd/user/agenthub.service
-agenthub service status        # systemctl --user status agenthub
+agenthub service install       # Linux: ~/.config/systemd/user/agenthub.service
+                               # macOS: ~/Library/LaunchAgents/io.smartgift.agenthub.plist
+agenthub service status        # systemctl --user status / launchctl print
 agenthub service uninstall     # disable and remove it
 ```
 
-`agenthub service install` also tries `loginctl enable-linger` so the service
+On Linux, `agenthub service install` also tries `loginctl enable-linger` so the service
 starts on a cold boot, before anyone logs in; if that needs elevated rights on
 your machine it prints the `sudo loginctl enable-linger <user>` command to run
 once yourself. Plugin installs get the same persistence automatically — see
@@ -135,7 +196,6 @@ agenthub sessions          # recent sessions
 agenthub lanes             # lanes with stage and progress
 agenthub lanes pipeline    # this lane's pipeline template, or switch it
 agenthub lanes node <id>   # run ONE pipeline node's own command (no id: list them)
-#                        (in a session: /intake, /qc, /ship-full, /ship-quick …)
 agenthub stage <name>      # declare the current lane's stage
 agenthub tail              # live event feed
 ```
@@ -148,9 +208,11 @@ A lane is a working directory the dashboard watches. Two kinds:
 
 - **adopted** — a directory you already had. The dashboard only reads it; it is
   never reset or deleted.
-- **managed** — a git worktree the dashboard created under `LANES_ROOT`. It owns
-  the full lifecycle and may reset or remove it, behind a three-check destroy
-  guard and a counted preflight the caller has to echo back.
+- **managed** — a git worktree the dashboard created under `LANES_ROOT`. It may
+  reset that worktree, behind a three-check destroy guard and a counted preflight
+  the caller has to echo back. Removing a lane — either kind — deletes only the
+  dashboard's record of it: the working tree, its branch and its database stay,
+  for you to delete yourself.
 
 ```bash
 agenthub lanes add --cwd /path/to/repo --title "My feature"    # adopt
@@ -160,22 +222,41 @@ agenthub lanes add --repo /path/to/repo --slug my-feature      # managed worktre
 Every lane also carries the CLI that drives it — `claude` (the default) or
 `codex` — picked in the Add-lane modal and fixed for the life of the lane. A
 Codex lane's run panel offers Codex's own sandbox, approval and reasoning-effort
-choices, and resumes with `codex resume --last`. Codex emits none of this
-dashboard's hooks, so a Codex lane records its runs but stays absent from
-Sessions and Analytics. Its **stage detection** works anyway, from Codex's own
-rollout journals on disk (`$CODEX_HOME/sessions/**/rollout-*.jsonl`, polled every
-`DASHBOARD_CODEX_POLL_MS` ms, default 15000), and on a Codex lane a detection
-also **advances the declared stage** — the one place an inference moves the blue
-`current` ring, because a Codex session has no hook and nothing else would ever
-move it. What a Codex lane cannot get for free is *evidence*: an auto-advanced
-node stays amber (`passed-no-evidence`), never green, since only the session
-itself can say what it finished. Three things help it get there: the run console
-pre-fills a codex pane's opening prompt with a stage-declaration checklist built
-from its own pipeline nodes, `agenthub lanes agents install` writes the same
-instructions as a marker-delimited block in the lane's `AGENTS.md`, and a 60s
-sweep (`DASHBOARD_CODEX_NUDGE_MS`, `0` disables) types a one-line reminder into
-a lane's pane if its current stage sits without evidence for more than two
-minutes.
+choices, and resumes with `codex resume --last`. Codex sessions and token usage
+are read from Codex's own rollout journals: every Codex session (a lane's or
+not) appears in Sessions with a **Codex** badge and is priced like any other,
+with OpenAI rates filled in automatically (Settings → Codex → Overview). For a
+live feed, install **Codex hooks** from the same tab: the next time Codex starts
+it asks you to trust them (**Trust all and continue**), and from then on each
+tool call lands in the session's timeline, a codex lane turns running/idle as
+each turn starts and ends, and "Codex needs your permission" shows on the lane
+card and as a notification while Codex waits for an approval. A Codex lane also
+carries **no pipeline** — no stage, no pipeline map, nothing inferred or
+advanced; without hooks the dashboard mirrors its running/idle status from the
+rollout journals on disk (`$CODEX_HOME/sessions/**/rollout-*.jsonl`, polled
+every `DASHBOARD_CODEX_POLL_MS` ms, default 15000).
+
+An **Antigravity** lane runs Antigravity's `agy` CLI. Its sessions and token
+usage are read from agy's own conversation files
+(`~/.gemini/antigravity-cli/conversations/<id>.db`, every
+`DASHBOARD_ANTIGRAVITY_POLL_MS` ms, default 15000): every agy CLI session
+appears in Sessions with an **Antigravity** badge, priced with Gemini rates that
+are filled in automatically (Settings → Antigravity). **Antigravity hooks**, in
+the same tab, add a live feed: each tool call in the session's timeline and a
+lane that turns running/idle as a run starts and ends. agy asks for no trust,
+and it has no hook for a permission prompt, so an Antigravity lane never shows
+"needs your permission". agy fires no hook when it exits, nor when a run ends
+on an API error or a permission refused in headless mode, so a session gone
+quiet is marked completed and its lane set idle — after ten minutes of quiet
+for a session the hooks report on (a long tool call writes nothing, and after a
+Stop agy may still be waiting for you), after two minutes for one without
+hooks. Antigravity lanes carry no pipeline either.
+
+**Pipelines are dormant.** AgentHub ships no pipeline template, so a lane has no
+stages until you drop a template JSON into `DASHBOARD_PIPELINES_DIR` (see
+[`docs/LANES.md`](docs/LANES.md#custom-pipeline-templates)); until then
+`agenthub stage` answers `ENOPIPELINE` and the Workspace hides the pipeline map.
+Further development is planned.
 
 The declared stage comes from `agenthub stage`. The inferred stage comes from tool
 events and expires after `DETECTION_TTL_MS` (default 5 minutes), so a lane can
@@ -205,7 +286,9 @@ lane. This is resource namespacing on the host, not a container: lanes run as th
 same user and share the network.
 
 [`docs/LANES.md`](docs/LANES.md) has the pipeline model, the destroy guard, the
-preflight contract, the Workspace page, `GET /api/lanes/:id/git`, and the full
+preflight contract, the Workspace page, the git surface (`GET /api/lanes/:id/git`,
+`/git/changes`, `/git/log`, `/git/file`, `/git/ls`, `/git/tree`,
+`POST /:id/git/:action`), and the full
 runtime/profile contract.
 
 ## Tests

README.vi.md

@@ -3,7 +3,7 @@
 Bản build nội bộ SmartGift. **Bàn điều khiển** local-first cho agent Claude Code —
 monitoring chỉ là một phần, không phải tất cả. Hooks POST mỗi tool call lên server
 Express + SQLite và React UI cập nhật qua WebSocket; **lane** (làn đường) theo dõi
-công việc song song của agent qua một pipeline; còn CLI `agenthub` điều khiển phiên
+công việc song song của agent, mỗi working directory một lane; còn CLI `agenthub` điều khiển phiên
 terminal thật, runtime của lane, và cả cấu hình của chính Claude Code.
 
 AgentHub ghi nhận và trình bày — nó không điều phối. Phiên đang chạy mới là nơi ra
@@ -13,27 +13,102 @@ Internal build — all rights reserved.
 
 *(Bản dịch tiếng Việt của [README.md](README.md), tham khảo — README.md gốc là bản chính thức.)*
 
-## Làm được gì
+## Chức năng chính
+
+**Quan sát**
 
 - **Session, agent, event.** Mọi thứ Claude Code emit ra, ghi lại và tìm kiếm
   được: tool call, token usage, cost, cây subagent, transcript.
-- **Lane.** Mỗi working directory một lane, sống sót qua session restart. Lane
-  đi qua các pipeline stage và dashboard hiển thị nó đang ở đâu.
-- **Stage detection.** Stage được suy luận (infer) từ tool stream, nên một
-  session không bao giờ gọi `agenthub stage` vẫn hiển thị progress — render dạng
+- **Analytics và chi phí.** Token và cost ước tính theo từng model, với bảng
+  pricing sửa được; top tool, agent type và workflow pattern.
+- **Activity feed và alert.** Luồng event trực tiếp, alert rule, và webhook
+  target bắn khi rule khớp.
+- **Import lịch sử.** Mọi session dưới `~/.claude/projects/` được import lúc
+  khởi động; lịch sử từ máy khác đưa vào qua Settings → Import History
+  (idempotent, không bao giờ đếm trùng token).
+- **Remote source.** Kéo lịch sử session từ máy khác qua SSH
+  (`agenthub remote-sources`).
+
+**Điều khiển**
+
+- **Lane.** Mỗi working directory một lane, sống sót qua session restart. Khi bạn
+  cài một pipeline template (không có template nào đi kèm), lane đi qua các
+  stage của nó và dashboard hiển thị nó đang ở đâu.
+- **Stage detection.** Khi đã cài template, stage được suy luận (infer) từ tool
+  stream, nên một session không bao giờ gọi `agenthub stage` vẫn hiển thị
+  progress — render dạng
   viền chấm màu hổ phách (amber) và không bao giờ hiện `done`, vì suy luận
   không phải bằng chứng.
 - **Chạy Claude Code hoặc Codex từ trình duyệt.** Một terminal thật (tmux + PTY
   thật, render bằng xterm.js) gắn vào thư mục của lane — đúng cái TUI bạn thấy ở
   máy, tương tác đầy đủ, resume được, và attach được từ terminal thật qua
-  `agenthub lanes shell`. Chạy CLI nào là thiết lập riêng của từng lane.
-- **Analytics (tab trong dashboard), alert và workflow view**, cộng thêm CLI.
+  `agenthub lanes shell`. Chạy CLI nào là thiết lập riêng của từng lane. **Đây
+  chính là phần cần cài `tmux`** — xem [Yêu cầu hệ thống](#yêu-cầu-hệ-thống).
+- **App stack riêng cho từng lane.** Repo khai báo `.agenthub/profile/` thì mỗi
+  lane được cấp slot, port và service riêng (`agenthub lanes up|down|logs`).
 
-## Yêu cầu
+**Cấu hình**
 
-Node **>= 20** (`engines` trong `package.json`). Node **24** là bản test suite
-được verify — node 25 hiện đang làm gãy 6 test server do lệch ABI
-`better-sqlite3` và 20 test client do thay đổi global `localStorage`.
+- **Trình khám phá cấu hình Claude Code + Codex.** Trang Settings có một panel
+  cho mỗi tool: mọi plugin, skill, subagent, slash command, MCP server, hook,
+  settings file, memory file, marketplace, keybinding và statusline mà Claude
+  Code biết — đọc được tất cả, còn sửa/tạo/xóa thì chỉ cho các bề mặt dạng file
+  text (skill, agent, command, output style, `CLAUDE.md`). Plugin, MCP, hook và
+  `settings.json` để read-only: chúng tranh ghi với CLI đang chạy.
+- **Cập nhật.** Phát hiện bản mới dựa trên release, kèm nút **Update all** ngay
+  trong UI (marketplace → mọi plugin → AgentHub sau cùng → reload session).
+- **CLI cho toàn bộ** (`agenthub`, và `agenthub repl`), cài được như PWA, UI có
+  tiếng Anh, Việt, Trung và Hàn.
+
+## Yêu cầu hệ thống
+
+| Cần | Phiên bản | Dùng cho |
+|---|---|---|
+| **Node.js** | >= 20 (>= 22.5 nếu cài qua plugin) | Tất cả. Cả hai test suite verify xanh trên Node **24** và **26** |
+| **npm** | 9+ | Đi kèm Node |
+| **git** | bất kỳ | Clone repo, và mọi thao tác lane (worktree, đọc branch/status) |
+| **tmux** | 3.x | Run console trên trình duyệt, `agenthub lanes shell`, gõ `/reload-plugins` vào pane đang sống |
+| **Claude Code** | 2.x | Hook ingestion — toàn bộ phần monitoring |
+| **Codex CLI** | bất kỳ | Tùy chọn — chỉ cho lane dùng `codex` |
+| **GitHub CLI (`gh`)** | bất kỳ | Tùy chọn — chỉ cho `agenthub lanes ci status` |
+| **systemd (user)** | — | Tùy chọn — chỉ cho `agenthub service install` (tự khởi động khi boot, Linux) |
+
+Node **25** là bản duy nhất nên tránh: nó làm gãy 6 test server do lệch ABI
+`better-sqlite3` và 20 test client do thay đổi global `localStorage`. Tới 26 thì
+cả hai đã hết (1712 test server + 488 test client xanh trên v26.8.1).
+
+### Cài tmux
+
+Dashboard gọi thẳng binary `tmux`, không có bản dự phòng đi kèm, nên thiếu nó
+thì **Start Run** và `agenthub lanes shell` sẽ lỗi. Phần còn lại (session,
+analytics, lane, stage detection, CLI) vẫn chạy bình thường.
+
+```bash
+sudo apt install tmux        # Debian / Ubuntu
+sudo dnf install tmux        # Fedora / RHEL
+brew install tmux            # macOS
+sudo pacman -S tmux          # Arch
+```
+
+Windows không có tmux native — chạy AgentHub trong WSL2 và cài tmux ở trong đó.
+
+macOS (đã rà soát code, chưa kiểm thử trên máy Mac): `brew install node git tmux`
+(Node >= 22.5 cho bản plugin), thêm `~/.local/bin` vào `PATH` trong `~/.zshrc`.
+Không có systemd, nên dashboard chạy đến khi đăng xuất/khởi động lại và tự lên
+lại ở phiên Claude Code kế tiếp, hoặc chạy tay bằng `agenthub start`. Chi tiết
+và checklist kiểm tra: [INSTALL.md § macOS](INSTALL.md#macos).
+
+Kiểm tra, cả từ shell của bạn lẫn từ góc nhìn của server:
+
+```bash
+tmux -V                                      # ví dụ: tmux 3.4
+curl -s localhost:4820/api/run/tmux          # {"available":true}
+```
+
+Mỗi lane chạy trong một tmux session tên `agenthub-lane-<id>`, nên terminal
+trên trình duyệt và `tmux attach -t agenthub-lane-<id>` (hoặc `agenthub lanes
+shell`) ở máy là hai client trên cùng một pane — chúng đồng bộ với nhau, và tắt
+dashboard không bao giờ giết run đang chạy. Detach bằng `Ctrl-b d`.
 
 ## Cài như Claude Code plugin
 
@@ -41,8 +116,8 @@ Hai lệnh, trên máy chỉ có Claude Code, không cần clone repo, không c
 `npm run setup`:
 
 ```
-/plugin marketplace add Smartgift-AI/Claude-Code-Monitor
-/plugin install agenthub@claude-code-agent-monitor-plugins
+/plugin marketplace add https://git.smartgift.io.vn/Smartgift-AI/AgentHub.git
+/plugin install agenthub@agenthub
 ```
 
 Lần session-start đầu tiên sẽ cài hooks, boot server, đưa `agenthub` vào PATH và
@@ -55,7 +130,7 @@ cần xóa lúc uninstall: [`docs/PLUGINS.md`](docs/PLUGINS.md).
 ## Cài từ checkout
 
 ```bash
-npm run setup          # cài dependency cho root, client và vscode-extension
+npm run setup          # cài dependency cho root và client
 npm run build           # build client vào client/dist
 npm start                # serve client đã build + API trên :4820
 ```
@@ -108,7 +183,6 @@ agenthub sessions            # session gần đây
 agenthub lanes                # danh sách lane kèm stage và progress
 agenthub lanes pipeline      # pipeline template của lane này, hoặc đổi nó
 agenthub lanes node <id>     # chạy riêng command của MỘT node (không có id: liệt kê)
-#                          (trong session: /intake, /qc, /ship-full, /ship-quick …)
 agenthub stage <name>        # khai báo stage hiện tại của lane
 agenthub tail                 # xem live event feed
 ```
@@ -136,10 +210,17 @@ chọn trong modal Add lane và cố định suốt vòng đời của lane. Lan
 chạy với các lựa chọn riêng của Codex (sandbox, approval, reasoning effort) và
 resume bằng `codex resume --last`. Codex không bắn hook của dashboard này, nên
 lane Codex vẫn ghi lịch sử chạy nhưng không xuất hiện ở Sessions và Analytics.
-**Stage detection thì vẫn chạy**, đọc từ rollout journal của chính Codex trên đĩa
-(`$CODEX_HOME/sessions/**/rollout-*.jsonl`, poll mỗi `DASHBOARD_CODEX_POLL_MS` ms,
-mặc định 15000) — thứ lane Codex không tự có là stage **khai báo**, vì chỉ chính
-session đó mới gọi được `agenthub stage`.
+Lane Codex cũng **không có pipeline** — không stage, không pipeline map, không
+suy luận hay tự nhảy stage; dashboard chỉ phản ánh trạng thái running/idle từ
+rollout journal của chính Codex trên đĩa (`$CODEX_HOME/sessions/**/rollout-*.jsonl`,
+poll mỗi `DASHBOARD_CODEX_POLL_MS` ms, mặc định 15000).
+
+**Pipeline đang tạm ngưng (dormant).** AgentHub không đi kèm pipeline template
+nào, nên lane không có stage cho tới khi bạn thả một file template JSON vào
+`DASHBOARD_PIPELINES_DIR` (xem
+[`docs/LANES.md`](docs/LANES.md#custom-pipeline-templates)); trước đó
+`agenthub stage` trả về `ENOPIPELINE` và trang Workspace ẩn pipeline map. Phần
+này sẽ được phát triển tiếp.
 
 Stage khai báo (declared) đến từ `agenthub stage`. Stage suy luận (inferred) đến
 từ tool event và hết hạn sau `DETECTION_TTL_MS` (mặc định 5 phút), nên lane có

SETUP.md

@@ -48,48 +48,11 @@ npm run install-hooks
 ```
 
 > [!TIP]
-> Container note: do not rely on hook auto-install from inside Docker or Podman. The hook path written by a container would point at the container filesystem, not the host. Start the container first, then run `npm run install-hooks` on the host. As a safeguard (issue #193), the installer now **detects container execution and refuses to run** (exiting non-zero) so it can never poison a bind-mounted host `~/.claude`; the containerized server logs the same guidance instead of silently writing a bad path. If you genuinely run Claude Code inside the same container, override with `AGENTHUB_ALLOW_CONTAINER_HOOKS=1 npm run install-hooks`.
+> Container note: if you run the dashboard inside a container (a Dev Container, Codespaces, or your own image), do not install hooks from in there — the hook path a container writes points at the container filesystem, not the host. Run `npm run install-hooks` on the host instead. As a safeguard (issue #193) the installer **detects container execution and refuses to run** (exiting non-zero) so it can never poison a bind-mounted host `~/.claude`. If Claude Code itself genuinely runs inside that container, override with `AGENTHUB_ALLOW_CONTAINER_HOOKS=1 npm run install-hooks`.
 
 > [!NOTE]
 > Prefer a ready-made dev environment? This repo ships an **optional** Dev Container (`.devcontainer/`) for VS Code / GitHub Codespaces — Node 22, native build tools for `better-sqlite3`, Python, and ports `4820`/`5173` preconfigured. It's purely opt-in and changes nothing for host-based development. See [`.devcontainer/README.md`](.devcontainer/README.md). (Hooks remain host-side there too.)
 
-### Container runtime (Docker / Podman)
-
-The repo includes both a multi-stage `Dockerfile` and a `docker-compose.yml` file. The container image serves the built client and API on port `4820`, stores SQLite data under `/app/data`, and can import legacy Claude history from a read-only `~/.claude` mount.
-
-```bash
-# Docker Compose
-docker compose up -d --build
-
-# Podman Compose
-CLAUDE_HOME="$HOME/.claude" podman compose up -d --build
-
-# Plain Docker
-docker build -t agent-monitor .
-docker run -d --name agent-monitor \
-  -p 127.0.0.1:4820:4820 \
-  -v "$HOME/.claude:/root/.claude:ro" \
-  -v agent-monitor-data:/app/data \
-  agent-monitor
-
-# Plain Podman
-podman build -t agent-monitor .
-podman run -d --name agent-monitor \
-  -p 127.0.0.1:4820:4820 \
-  -v "$HOME/.claude:/root/.claude:ro" \
-  -v "$HOME/.claude/agenthub:/app/data" \
-  agent-monitor
-```
-
-Container-specific behavior:
-
-- The dashboard is available at `http://localhost:4820`
-- The image sets `DASHBOARD_HOST=0.0.0.0` (bind inside the container — its loopback is a separate namespace the published port cannot reach) and `DASHBOARD_DATA_DIR=/app/data` internally; both are baked into the `Dockerfile`
-- The examples publish on `127.0.0.1` only, so the dashboard is local-only. To expose it on a LAN, publish on `0.0.0.0` (`-p 4820:4820`) **and** set `DASHBOARD_TOKEN`
-- `~/.claude:/root/.claude:ro` is used for history import only
-- `~/.claude/agenthub:/app/data` is the **canonical** SQLite database (shared with native installs)
-- Claude Code hooks still execute on the host, so install them from the host with `npm run install-hooks`
-
 ### Environment variables
 
 | Variable | Default | Description |
@@ -136,39 +99,18 @@ This repository ships extension files for both agent ecosystems:
 
 See [`.codex/README.md`](./.codex/README.md) for Codex extension details.
 
-### VS Code extension setup
-
-**AgentHub** is available as an integrated VS Code extension for seamless monitoring within your editor.
-
-- **Activity Bar View**: Adds a custom "Radar" icon to the activity bar providing real-time agent health, token counts, and session stats.
-- **Status Bar Integration**: Displays live session and agent pulse counts in the bottom bar.
-- **Embedded Dashboard**: Renders the full web dashboard directly in a VS Code editor tab.
-- **Automated Detection**: Automatically finds your dashboard server on ports `5173` or `4820`.
-
-<p align="center">
-  <img src="vscode-extension/vscode.png" alt="VS Code Extension Screenshot" width="100%">
-</p>
-
-To install or develop the extension:
-1. Open the [vscode-extension](./vscode-extension) directory in VS Code.
-2. Run `npm install` and `npm run package` to generate a local `.vsix` installer.
-3. For developer details, see [vscode-extension/README.md](./vscode-extension/README.md).
-
-> [!TIP]
-> Extension on VS Code Marketplace: [AgentHub](https://marketplace.visualstudio.com/items?itemName=hoangsonw.claude-code-agent-monitor)
-
 ### PWA configuration (optional)
 
-The dashboard, landing page, and wiki each ship as independent Progressive Web Apps. No configuration is required — manifests and service workers are included out of the box.
+The dashboard ships as a Progressive Web App. No configuration is required — its manifest and service worker are included out of the box.
 
-**Customising the manifest:** Edit the `manifest.json` in the relevant directory (`client/public/` for dashboard, root for landing, `wiki/` for wiki). Common fields to change:
+**Customising the manifest:** Edit `client/public/manifest.json`. Common fields to change:
 
 - `name` / `short_name` — displayed on the home screen / dock
 - `theme_color` — address bar / title bar tint (default: `#6366f1`)
 - `background_color` — splash screen background
 - `start_url` — entry point when launched from home screen
 
-**Updating the service worker cache:** Each SW has a `CACHE_NAME` constant (e.g. `dashboard-v2`). After deploying new assets, bump the version string to force browsers to re-fetch — though for the dashboard this is rarely needed: hashed `/assets/*` URLs are immutable per build, everything else is fetched network-first with cache fallback, and a `controllerchange` listener in the client reloads the page exactly once when a new SW takes over, so a rebuild propagates without a hard refresh.
+**Updating the service worker cache:** The SW has a `CACHE_NAME` constant (e.g. `dashboard-v2`). After deploying new assets, bump the version string to force browsers to re-fetch — though for the dashboard this is rarely needed: hashed `/assets/*` URLs are immutable per build, everything else is fetched network-first with cache fallback, and a `controllerchange` listener in the client reloads the page exactly once when a new SW takes over, so a rebuild propagates without a hard refresh.
 
 **Browser support:** PWA install prompts appear in Chrome 107+, Edge 107+, and Firefox 110+ (desktop and Android). Safari supports `apple-mobile-web-app-capable` for iOS home-screen mode but does not show an install banner.
 
@@ -190,7 +132,11 @@ npm run clear-data
 
 ### Data management via Settings page
 
-The Settings page (`/settings`) provides a UI for:
+The Settings page (`/settings`) provides a UI for the following. **Model Pricing**
+and **Hook Configuration** are not on its Dashboard tab: they sit under the
+Claude Code tab's **Overview** (Settings → Claude Code → Overview), beside
+CLAUDE_HOME; Codex (its Overview) and Antigravity have their own pricing and
+hooks in their own tabs.
 
 - **Model Pricing** — view and edit per-model cost rates, reset to defaults, add custom models
 - **Hook Configuration** — check which hooks are installed and reinstall them
@@ -349,16 +295,6 @@ Commonly used targets:
 | `make format-check` | `npm run format:check` | Check formatting without writing |
 | `make seed` | `npm run seed` | Load demo data |
 | `make clear-data` | `npm run clear-data` | Delete all data rows |
-| `make docker-up` | `docker compose up -d` | Start via docker-compose |
-| `make docker-down` | `docker compose down` | Stop docker-compose stack |
-
----
-
-## Statusline (optional)
-
-The `statusline/` directory contains a standalone terminal statusline for Claude Code showing model, working directory, git branch, context window usage, and token counts. It is independent of the web dashboard.
-
-See [statusline/README.md](./statusline/README.md) for installation instructions.
 
 ---
 
@@ -392,6 +328,26 @@ The SQLite database uses WAL mode with a 5-second busy timeout. If you see lock
 
 ---
 
+### The run console won't start a run / the terminal never attaches
+
+Runs are tmux-backed: the server executes the `tmux` binary and has no fallback.
+
+```bash
+tmux -V                                               # missing → sudo apt install tmux
+curl -s http://localhost:4820/api/run/tmux            # {"available":true}
+curl -s "http://localhost:4820/api/run/binary?tool=claude"   # {"found":true,"path":"…"}
+```
+
+`{"available":false}` while your own shell finds tmux means the **server's**
+`PATH` differs from yours — typically a systemd `--user` service, which never
+reads your shell profile. Install tmux system-wide (`/usr/bin/tmux`) and
+re-run `agenthub service uninstall && agenthub service install`. The same
+applies to `claude` / `codex`: a run launches them by name.
+
+Install instructions per OS: [INSTALL.md → Step 0](./INSTALL.md#step-0--system-packages).
+
+---
+
 ### No sessions appearing after starting Claude Code
 
 **Check 1 — Is the server running?**
@@ -464,36 +420,3 @@ And make sure Claude Code posts hooks to the new port:
 CLAUDE_DASHBOARD_PORT=4821 claude
 # or edit scripts/hook-handler.js and change the default port
 ```
-
----
-
-### Docker / Podman container starts but no sessions appear
-
-**Check 1 — Is the container healthy?**
-
-```bash
-curl http://localhost:4820/api/health
-# Expected: {"status":"ok","timestamp":"..."}
-```
-
-**Check 2 — Did you install hooks on the host?**
-
-Hooks run on the host machine, not inside the container. After the container is up:
-
-```bash
-npm run install-hooks
-```
-
-**Check 3 — Are hooks pointing to the right port?**
-
-Open `~/.claude/settings.json` and verify the hook commands reference `localhost:4820` (or whatever port the container is mapped to). If you changed the port mapping, update hooks accordingly.
-
----
-
-### Docker build fails during `npm ci`
-
-If the build fails in Stage 1 with `better-sqlite3` errors, this is expected and should not block the build — `better-sqlite3` is an optional dependency. If the build still fails:
-
-- Ensure you are using the latest Dockerfile (it should use `node:22-alpine` and **not** install `python3`, `make`, or `g++`)
-- Run `docker build --no-cache -t agent-monitor .` to force a clean rebuild
-- Check that `package.json` has `better-sqlite3` under `optionalDependencies`, not `dependencies`

agents/backend-reviewer.md

@@ -1,27 +0,0 @@
----
-name: backend-reviewer
-description: Review backend route and hook logic for regressions, data integrity risks, and missing tests.
-tools: Read, Grep, Glob, Bash
-model: opus
-memory: project
----
-
-You are a backend reviewer for this repository. Review ONLY files under `server/` in the diff you are given — ignore `client/`, `mcp/`, or any other path even if it appears in the same diff range; another reviewer covers those.
-
-Focus on:
-- Hook event lifecycle correctness.
-- Session/agent state-machine regressions.
-- API contract compatibility.
-- Transaction and persistence correctness.
-- Missing or weak verification coverage.
-
-## Output (MANDATORY — the caller parses your last line)
-
-- Findings as `path:line — severity — problem — suggested fix`, most severe first.
-- End with exactly one of:
-  - `BACKEND-REVIEW: CLEAN`
-  - `BACKEND-REVIEW: FINDINGS — <n>`
-
-## Agent memory
-
-Record recurring backend defect patterns and false-positive traps you find here (e.g. hook shapes that look wrong but aren't, common state-machine edge cases). Future backend-reviewer runs read this.

agents/frontend-reviewer.md

@@ -1,27 +0,0 @@
----
-name: frontend-reviewer
-description: Review React UI changes for behavior regressions, state consistency, and UX breakage.
-tools: Read, Grep, Glob, Bash
-model: sonnet
-memory: project
----
-
-You are a frontend reviewer for this repository. Review ONLY files under `client/` in the diff you are given — ignore `server/`, `mcp/`, or any other path even if it appears in the same diff range; another reviewer covers those.
-
-Focus on:
-- Routing and navigation consistency.
-- State updates from websocket and API responses.
-- Loading/empty/error state correctness.
-- Breaking visual or interaction regressions.
-- Missing tests for changed UI behavior.
-
-## Output (MANDATORY — the caller parses your last line)
-
-- Findings as `path:line — severity — problem — suggested fix`, most severe first.
-- End with exactly one of:
-  - `FRONTEND-REVIEW: CLEAN`
-  - `FRONTEND-REVIEW: FINDINGS — <n>`
-
-## Agent memory
-
-Record recurring frontend defect patterns and false-positive traps you find here (e.g. websocket race conditions that look wrong but aren't, sibling components that should stay in sync). Future frontend-reviewer runs read this.

agents/qc-local.md

@@ -1,74 +0,0 @@
----
-name: "qc-local"
-description: "Local browser-QC agent for the ship-feature-lane pipeline in AgentHub. Launched by the ship-feature-lane skill at Stage 6 (foreground — it gates the pipeline) after e2e, against the lane's OWN feature-branch stack (booted via `agenthub lanes up --qc`; the branch is cut from origin/development, so the stack is development + this feature). Exercises the feature + smoke + reload/re-login coverage via the lane's local-QC Playwright MCP, saves every screenshot to `proof/<feature-slug>/qc-local/` (the AgentHub proof gallery's canonical path), and returns a parseable LOCAL-QC: PASS/FAIL verdict that doubles as the feature user-flow review for the senior gate. <example>Context: ship-feature-lane in a lane finished Stage 3's e2e green. assistant: 'e2e is green — launching the qc-local agent to browser-QC the feature-branch stack and capture the proof gallery.' <commentary>Stage-6 browser QC is the qc-local agent's job; the main session stays off the browser.</commentary></example>"
-model: opus
-color: green
-memory: project
----
-
-You are an elite QA automation engineer validating ONE lane's feature on that lane's OWN local stack (isolated FE/API/DB, nothing shared with other lanes), right after the feature branch's e2e passed (the branch is cut from `origin/development`, so this stack IS development + the feature as of the branch point). You are rigorous, evidence-driven, and autonomous: every claim in your report is backed by a screenshot. You never commit, push, or fix code — you verify, capture proof, and report. Your report IS the feature user-flow review the senior gate reads.
-
-## Context you will be given (by the ship-feature-lane skill)
-
-- **The lane's working directory** (your cwd — AgentHub resolves the lane from it automatically; there is no marker file to check).
-- **Feature slug** (the `<slug>` of `feat/<slug>`), feature title, and the acceptance points to verify (from the lane spec at `docs/superpowers/specs/lane-<slug>.md` — read it yourself if the summary is thin; `git diff origin/development...HEAD` shows the change surface).
-
-Setup: your cwd is the lane clone. You do NOT write `stage`/`status`/`notes` — the main session owns all state; you have no heartbeat call to make (you run as a synchronous subagent inside the driving session's own turn, so the lane is never seen as stalled while you work).
-
-## Target environment
-
-- **App**: the lane's own booted frontend — check `agenthub lanes runtime` (or the `FE_PORT`/equivalent env the skill already resolved) for the actual port; it is isolated per lane. If it's down, don't boot it yourself blindly — return `LOCAL-QC: FAIL — lane stack down (re-run: agenthub lanes up --no-build)`.
-- **QC boot env**: the QC stack boots via `agenthub lanes up --qc`, which applies the profile's `QC_BOOT_ENV` (typically mock/stub flags) — LLM/paid-backend features then return CANNED responses. Canned/stub content is EXPECTED there, not a bug; judge the surrounding UX (loading states, rendering, persistence), not the stub text itself.
-- **Account / login.** Two paths:
-  - **If a credentials block is embedded at the TOP of this agent** ("⚙ This lane's local-QC credentials"): those ARE your login — type them into the form yourself (`browser_type`, submit) when you hit a login page. You already have them; never read a file/script to fetch them.
-  - **If there is NO embedded block:** the app should already be in a usable/logged-in state (or requires no login for the flows you're testing). If you hit a login page you cannot get past, this profile has no seeded QC account configured yet — return `LOCAL-QC: FAIL — login required, no seed-account mechanism configured for this profile`. Do not guess at credentials or invent a login flow.
-- **Tooling**: the **dedicated local-QC Playwright MCP server** (isolated Chromium profile — e.g. `playwright-qa-local` if the profile names it that). You MUST use that server's `mcp__<name>__browser_*` tool family for ALL browser interaction — never the unscoped `mcp__playwright__browser_*` or any other Playwright server (other agents/sessions own those browsers concurrently). If the tools aren't available, return `LOCAL-QC: FAIL — local-QC Playwright MCP not loaded (configure it in .mcp.json and restart the lane session — see the ship-feature-lane skill's Setup section)`.
-- **Upload fixtures**: if an **"Upload fixtures dir"** line is injected at the TOP of this agent, use the files in that dir for any data-upload scenario (quote the path; it may contain spaces). If no such line is present, no fixture dataset is configured for this stack — skip data-upload-only scenarios and note that in the report. Put ad-hoc non-fixture files in the lane's `.playwright-mcp/` dir; never source uploads from `/tmp/`.
-
-## Procedure
-
-1. **Load the QC Plan, then execute against it.** The ship-feature-lane skill wrote a `## QC Plan` section into the lane spec (`docs/superpowers/specs/lane-<slug>.md`) at Stage 5 — it is the authoritative scope. Read it first.
-   - **Cover every in-scope scenario** in the plan — skip none.
-   - **Stay in scope** — don't wander into the plan's out-of-scope areas (that over-testing is exactly what the plan exists to prevent); the only unaffected areas you touch are the plan's smoke set.
-   - **If the plan is missing or thin**, derive scenarios yourself from the acceptance points + `git diff origin/development...HEAD` and proceed, covering the same shape: **primary** (each acceptance point, positive AND negative — invalid input, empty state, permission edges), **adjacent** flows sharing routes/components/data, **smoke** (login + main nav + ≥3 unaffected major areas), and **state coverage** (a reload (Cmd+R) on every stateful screen touched, one logout → re-login cycle, back-and-forth navigation between key pages).
-   - **When you discover a real scenario the plan missed** (a genuine risk it didn't anticipate), TEST it AND list it in your report under **"Scenarios discovered during QC"** so the skill folds it into the plan. Do NOT edit the plan file yourself — the skill is its single writer.
-   - **UI/UX & layout rigor — apply to EVERY form/screen the feature touches** (never just a representative one; sibling forms drift):
-     - **Overflow in BOTH axes.** Resize the window NARROWER (width) AND SHORTER (height — e.g. ~560px then ~350px tall), and ALSO grow the content by opening every expandable thing (dropdowns, collapsible sections, "add row" repeaters, multi-select pickers) so a step becomes taller than the viewport. Then confirm: nothing is cut off at the **top** or bottom; any fixed/sticky chrome (page header, wizard **stepper/tabs**, toolbars) stays visible and is NOT clipped; the scroll container actually scrolls; and the primary actions (Save/Next/Submit/Cancel) stay reachable and clickable. A form taller than the page must never hide its header, its step nav, or its buttons.
-     - **Every control has a visible label.** Each input/toggle/select/picker shows a field label. Compare sibling forms — if one labels a control and the other doesn't, that's a defect.
-     - **Visual hierarchy is correct.** Section/group headers are MORE prominent than the field labels inside them (size/weight/color); field labels are consistent across steps and across sibling forms; helper text is least prominent. Flag any inverted or inconsistent hierarchy.
-     - No text truncation/overlap; spacing, alignment, and contrast are reasonable; the form reads as natural, polished UI.
-2. **Execute with the local-QC MCP's tools**:
-   - Use `browser_type` for React controlled inputs — never direct DOM value assignment (it doesn't fire onChange).
-   - After each meaningful action: `browser_snapshot` to verify state, then screenshot (see proof convention).
-   - Don't trust `browser_network_requests` alone for HTTP verification (it double-lists requests); prefer the lane's own backend/service logs if the profile exposes them (`agenthub lanes logs <svc>`).
-   - **Failure triage**: capture a failure screenshot + `browser_snapshot` + `browser_console_messages`, note repro steps, expected vs actual, severity (blocker/major/minor/cosmetic) — then CONTINUE with remaining scenarios unless the app is unusable.
-3. **Proof convention (mandatory — the path is fixed infrastructure, NOT your choice):** EVERY screenshot via `browser_take_screenshot` with `filename: "proof/<feature-slug>/qc-local/<NN>-<what>.png"`, numbered in flow order (e.g. `proof/edit-report/qc-local/03-dialog-open.png`). The MCP server's pinned `--output-dir` lands these in `<lane clone>/.playwright-mcp/proof/...` — the ONLY place the dashboard's gallery reads (`agenthub lanes proof-link` converges a stray `proof/` symlink if needed). Absolute paths, other folders, or invented layouts = the proof is lost.
-
-## Checkpoint & resume  *(rate-limits and crashes must not zero your work)*
-
-- **Checkpoint as you go:** after EACH scenario, append one line to `proof/<feature-slug>/qc-local/RESULTS.partial.md` (via the Write/Edit tools on `<lane clone>/.playwright-mcp/proof/...`): `<NN> <scenario> — ✅|❌ — <proof file> — <HEAD sha>`. A mid-run tool error or rate-limit then leaves a resumable trail instead of zeroing the run.
-- **Resume on start:** if `RESULTS.partial.md` already exists for this feature AND its HEAD sha matches the tree you're QCing, treat its ✅ scenarios as done (spot-check one) and continue from the first unfinished one. Sha differs → start fresh (delete the stale partial).
-- **Bounded stalls:** a single browser step hanging >2 min → close the browser, reload, retry that step ONCE; still stuck → record ❌ with proof and move on. If the run approaches ~45 min, finish the current scenario, mark the rest ⚠️ not-run, and return honestly rather than stalling silently.
-
-## Quality bar (verify before returning)
-
-- [ ] Every in-scope QC-Plan item was executed (or marked N/A with a reason); any discovered scenarios are listed for fold-back.
-- [ ] Every primary scenario has a screenshot of its end state (pass or fail).
-- [ ] Reload tested on every stateful screen touched; one full logout → re-login cycle done.
-- [ ] Smoke covered login, navigation, and ≥3 unaffected areas.
-- [ ] UI/UX pass done on EACH touched form: tested at narrow AND short viewports AND with dropdowns/expandables open (content taller than the page) — fixed header/stepper/buttons never cut off, scroll works, actions reachable; every control labeled; section headers more prominent than field labels; consistent label styling; no overlap/truncation; natural polished layout.
-- [ ] All screenshots under `proof/<feature-slug>/qc-local/` (check with `ls .playwright-mcp/proof/<feature-slug>/qc-local/`).
-- [ ] No commits made; password never echoed anywhere.
-
-## Output format (MANDATORY — the skill parses your last line)
-
-A scannable report (this doubles as the user-flow review for the senior gate): a **QC-Plan coverage** view (each in-scope plan item → ✅/❌/⚠️), a **Scenarios discovered during QC** list (anything you tested that wasn't in the plan, for the skill to fold back), issues with severity + repro + which proof file shows each, proof filename list, reload/re-login coverage note, UX observations worth fixing. Then end with exactly one of:
-
-- `LOCAL-QC: PASS`
-- `LOCAL-QC: FAIL — <comma-separated reasons>`
-
-A FAIL must be specific enough for the lane's fix-loop to act on (page/flow + what broke + proof file).
-
-## Agent memory
-
-Record local-stack QA knowledge as you find it: flaky selectors/flows, features that break after reload or re-login, stub-mode quirks (what canned responses look like per feature), data-setup prerequisites, upload-fixture behaviors, noise-vs-real console errors. Future qc-local runs (any lane) read this.

agents/senior-gate-reviewer.md

@@ -1,52 +0,0 @@
----
-name: "senior-gate-reviewer"
-description: "Final GO/NO-GO publish-readiness gate for the ship-feature-lane pipeline in AgentHub. Invoke AFTER the code-review and feature-user-flow-review (qc-local) and AFTER local CI gates + e2e + QC have passed, immediately BEFORE the feature branch is pushed and its PR is opened (base `development`). Returns a single GO or NO-GO verdict with a required-fix list. A GO is the sole authorization to publish the PR. <example>Context: ship-feature-lane in a lane has finished implementation, gates, and reviews and is about to publish the PR. assistant: 'I'll launch the senior-gate-reviewer agent to make the final go/no-go decision before pushing the branch and opening the PR.' <commentary>This is the publish gate — it decides whether the feature is allowed in front of reviewers.</commentary></example>"
-model: opus
-color: red
-memory: project
----
-
-You are the **Senior Gate Reviewer** — the final, independent publish-readiness authority for the ship-feature-lane pipeline. Nothing is pushed or PR'd without your **GO**; the PR a human later merges into `development` is exactly what you approved. You are deliberately skeptical: when in doubt, you return **NO-GO** with a precise, actionable fix list. You do NOT make fixes yourself — you judge, decide, and report.
-
-## Context you will be given (by the ship-feature-lane skill)
-
-- **The lane's working directory** (your cwd — AgentHub resolves the lane from it automatically).
-- **The original requirement** and the **upfront Q&A answers** (acceptance criteria).
-- The **feature branch name** (cut from `origin/development` — the PR base it will target).
-- A summary of the **two prior reviews** (code-review + the qc-local user-flow review) and which findings were resolved.
-- The **`agenthub lanes sync-base --check` preflight output** (migration-collision check + how far `origin/development` moved since the branch's merge-base).
-- Confirmation that **local CI gates** (the profile's lint / test / contract checks), **e2e**, and **browser QC** already passed.
-
-If any of this context is missing, gather it yourself (read the lane spec file the skill wrote, run `git -C <lane> log/diff`).
-
-## Your checks
-
-**Review the PR the reviewers will see.** The PR is `<feature-branch>` based on `origin/development` — judge the change against **the PR diff**: `git -C <lane> diff origin/development...<feature-branch>` (`<feature-branch>` is in your context). There is NO local integration tree in this flow — the branch itself is what ships, and the first combined validation after a human merges it is dev CI + dev-QC; your merge-safety check (#3) is what stands between this branch and that merge. Run checks with `git -C <lane> ...`, `Read`, `Grep`, `make` as needed.
-
-1. **Acceptance** — Does the implementation actually satisfy the original requirement + every upfront Q&A answer? Inspect **the PR diff** (defined above) and, where feasible, confirm the acceptance criteria are met in code. Missing/partial requirement coverage ⇒ NO-GO.
-
-2. **Findings resolved** — Were the PR-code-review and user-flow-review findings actually addressed (not just acknowledged)? Spot-check **the PR diff** for each claimed fix. Unresolved material findings ⇒ NO-GO.
-
-3. **Merge-safety** — Independently verify the branch is safe for a human to merge into `development`. **General principle (any stack):** "the branch is green standalone" is NOT proof the MERGE will be — check for collisions that DON'T surface as git conflicts — duplicate migration identifiers, duplicate fixture/test IDs, API/schema-contract drift, lockfile divergence — in whatever form this stack expresses them, comparing the branch against the CURRENT `origin/development`. Re-run the deterministic preflight yourself if the provided output is stale: `git -C <lane> fetch origin && agenthub lanes sync-base --check <feature-branch>` (exit 5 = collision ⇒ NO-GO with the printed rename; also read its `DEV_DELTA`/`DEV_OVERLAP` — a large overlapping upstream delta means the locally-QC'd behavior may not match post-merge dev, weigh it).
-   - **Stack-specific checks (from the active profile):** read `<lane>/.agenthub/profile/review-checks.md` with the Read tool if it exists, and apply every check it lists (e.g. migration-identifier collisions, API/contract regeneration). Missing or empty → derive the equivalents yourself from the general principle by inspecting the branch vs `origin/development`.
-   - **Obvious regressions / scope creep**: scan **the PR diff** for debug code, secrets, commented-out blocks, unrelated churn, `console.log`/`print` debugging, TODO/FIXME left in critical paths.
-
-4. **UI/UX diligence (when the feature touches any form/screen)** — don't rubber-stamp the QC report; confirm it actually exercised layout rigor, because these defects slip through happy-path QC:
-   - **Overflow** was tested at narrow AND **short** viewports, AND with dropdowns/collapsibles/repeaters **open** so content exceeds the viewport — and no fixed chrome (page header, wizard **stepper/tabs**, action bar) is cut off (especially at the **top**), scroll works, and primary actions stay reachable. A report that only shows one viewport / the happy path has NOT verified this.
-   - Every control is **labeled**, and **section headers are more prominent than field labels** (no inverted hierarchy); labels are consistent across **sibling forms** (if the feature changed two similar forms, they must match).
-   - Spot-check **the PR diff** yourself for UI/UX regressions in these classes (a scroll container that lost `min-h-0`, a removed/altered label, a muted section header, a form-wide container that scrolls the whole page instead of an inner region).
-   If the feature is UI-heavy and the QC didn't demonstrably check the above ⇒ NO-GO with a specific "re-QC: verify <X> at short viewport / with <dropdown> open" instruction.
-
-5. **QC-plan coverage** — read the `## QC Plan` section of the lane spec and the qc-local report (the user-flow review; on a follow-up fix run, also the parent's dev-QC findings the follow-up exists to fix). Confirm every **in-scope** plan item has a result (pass/fail, with proof) — any uncovered in-scope item ⇒ NO-GO ("re-QC: cover <item>"). If a QC report spent effort on the plan's **out-of-scope** areas while leaving in-scope items thin, flag it. Scenarios the agents discovered mid-run should appear folded into the plan.
-
-## Output format (MANDATORY — the skill parses your last line)
-
-Write a short report (acceptance ✓/✗, findings ✓/✗, merge-safety ✓/✗ with one line each), then end with **exactly one** of these as the FINAL line:
-
-- `VERDICT: GO`
-- `VERDICT: NO-GO — <comma-separated required fixes>`
-
-Rules:
-- Only return `GO` when all three checks pass with high confidence.
-- A NO-GO fix list must be specific and actionable (file/area + what to do), so the skill's fix-loop can act and re-submit.
-- Never push, merge, commit, or modify files. You are read-only. Your verdict is the deliverable.

bin/agenthub.js

@@ -1190,12 +1190,15 @@ async function cmdPricing(flags, positional) {
 // ── Updates ─────────────────────────────────────────────────────────────────
 
 async function cmdUpdateCheck() {
-  console.log(c.dim("Checking the canonical remote — this can take a few seconds…"));
+  console.log(c.dim("Checking the repository's latest release — this can take a few seconds…"));
   // POST /check (rather than GET /status) so a dashboard open in the browser
   // sees the same fresh result via the update_status websocket broadcast.
   const s = await post("/api/updates/check");
   heading("Dashboard updates", s.repo_root || baseUrl());
-  if (!s.git_repo) {
+  // A plugin-cache install legitimately has no clone (an archive-sourced
+  // marketplace entry unpacks one), yet it IS checkable and updatable via the
+  // release API — so only a genuine non-git checkout bails out here.
+  if (!s.git_repo && s.install_kind !== "plugin") {
     console.log(`${c.yellow("○")}  ${s.message}`);
     return;
   }
@@ -1203,6 +1206,13 @@ async function cmdUpdateCheck() {
     console.log(`${c.yellow("!")}  ${s.message} ${c.dim(`(${s.fetch_error})`)}`);
     return;
   }
+  // Say WHY the release lookup produced nothing, so a green "up to date" is
+  // never mistaken for "the release list was actually read".
+  if (s.release_check && s.release_check !== "ok") {
+    console.log(
+      c.dim(`   could not read the latest release (${s.release_check}) — compared commits instead`)
+    );
+  }
   if (s.update_available) {
     console.log(`${c.yellow("⬆")}  ${s.message}`);
     if (s.situation_note) console.log(c.dim(`   ${s.situation_note}`));
@@ -1269,6 +1279,23 @@ async function cmdDoctor() {
   );
   console.log(`${c.green("✔")}  WS connections  ${srv.ws_connections ?? 0}`);
 
+  // Asked of the SERVER, not of this shell: a run is a tmux session the server
+  // spawns, so the only PATH that decides whether Start Run works is its own —
+  // a systemd --user service never reads your shell profile. Missing tmux is a
+  // warning, not a failure: it costs the run console and `lanes shell`, nothing
+  // else.
+  try {
+    const { available } = await get("/api/run/tmux");
+    console.log(
+      available
+        ? `${c.green("✔")}  tmux  available to the server`
+        : `${c.yellow("!")}  tmux  not on the server's PATH — Start Run and \`agenthub lanes shell\` will fail. ` +
+            `Install it (sudo apt install tmux / brew install tmux), then restart the server`
+    );
+  } catch {
+    console.log(`${c.dim("·")}  tmux  not reported by this server`);
+  }
+
   try {
     const { sources = [] } = await get("/api/remote-sources");
     if (sources.length === 0) {
@@ -1436,16 +1463,24 @@ async function cmdStart(flags) {
 }
 
 /**
- * Installs/removes a systemd `--user` service so the dashboard survives
- * reboots without anything (Claude Code included) needing to start it first.
- * Linux/systemd only; other platforms are told to keep using `agenthub start`.
+ * Installs/removes a systemd `--user` service (Linux) or a LaunchAgent
+ * (macOS) so the dashboard survives reboots without anything (Claude Code
+ * included) needing to start it first. Elsewhere, `agenthub start` by hand.
  */
 async function cmdService(sub, flags) {
-  const svc = require(path.join(REPO_ROOT, "scripts", "systemd-service.js"));
+  const svc = require(path.join(REPO_ROOT, "scripts", "service-manager.js"));
   if (!svc.systemctlAvailable()) {
-    console.error(c.red("✖ systemd --user is not available on this machine."));
     console.error(
-      c.dim("  Auto-start on boot needs Linux + systemd. Use `agenthub start` manually instead.")
+      c.red(
+        `✖ ${svc.kind === "launchd" ? "launchd (a GUI login session)" : "systemd --user"} is not available here.`
+      )
+    );
+    console.error(
+      c.dim(
+        svc.kind === "launchd"
+          ? "  A LaunchAgent needs the user logged in at the Mac itself, not only over SSH. Use `agenthub start` meanwhile."
+          : "  Auto-start on boot needs Linux + systemd. Use `agenthub start` manually instead."
+      )
     );
     process.exit(1);
   }
@@ -1466,24 +1501,27 @@ async function cmdService(sub, flags) {
       description: "AgentHub dashboard server",
       workingDir: REPO_ROOT,
       execStart: `${process.execPath} ${path.join(REPO_ROOT, "server", "index.js")}`,
+      argv: [process.execPath, path.join(REPO_ROOT, "server", "index.js")],
       env,
     });
     if (result === "foreign") {
       console.error(
-        c.red(
-          `✖ ~/.config/systemd/user/${name}.service already exists and wasn't written by agenthub.`
-        )
+        c.red(`✖ ${svc.unitPath(name)} already exists and wasn't written by agenthub.`)
       );
       console.error(c.dim("  Remove or rename it, then re-run `agenthub service install`."));
       process.exit(1);
     }
     if (result === "failed") {
-      console.error(c.red("✖ Failed to write/enable the systemd unit."));
+      console.error(c.red(`✖ Failed to write/enable the ${svc.label}.`));
       process.exit(1);
     }
     console.log(
-      `${c.green("✔")} systemd --user service '${name}' ${result === "unchanged" ? "already up to date" : "installed"} and enabled.`
+      `${c.green("✔")} ${svc.label} '${name}' ${result === "unchanged" ? "already up to date" : "installed"} and enabled.`
     );
+    if (svc.kind === "launchd") {
+      console.log(c.dim(`  It starts at every login. Server log: ${svc.logPath()}`));
+      return;
+    }
     const lingered = svc.enableLinger();
     if (lingered) {
       console.log(
@@ -1504,20 +1542,24 @@ async function cmdService(sub, flags) {
   if (sub === "uninstall") {
     const result = svc.uninstallUserService(name);
     if (result === "foreign") {
-      console.error(
-        c.red(
-          `✖ ~/.config/systemd/user/${name}.service wasn't written by agenthub — not touching it.`
-        )
-      );
+      console.error(c.red(`✖ ${svc.unitPath(name)} wasn't written by agenthub — not touching it.`));
       process.exit(1);
     }
     console.log(
-      `${c.green("✔")} systemd service ${result === "absent" ? "was not installed" : "removed"}.`
+      `${c.green("✔")} ${svc.label} ${result === "absent" ? "was not installed" : "removed"}.`
     );
     return;
   }
   if (sub === "status") {
-    spawn("systemctl", ["--user", "status", `${name}.service`, "--no-pager"], { stdio: "inherit" });
+    if (svc.kind === "launchd") {
+      spawn("launchctl", ["print", `gui/${process.getuid()}/io.smartgift.${name}`], {
+        stdio: "inherit",
+      });
+    } else {
+      spawn("systemctl", ["--user", "status", `${name}.service`, "--no-pager"], {
+        stdio: "inherit",
+      });
+    }
     return;
   }
   console.error(c.red("✖ Usage: agenthub service install|uninstall|status [--port N]"));
@@ -1566,10 +1608,11 @@ async function cmdLanesAdd(args) {
   const pipeline = flag("pipeline");
   const base = flag("base");
   const slug = flag("slug");
+  const tool = flag("tool");
   if (repo) {
     if (cwd || pipeline) {
       console.error(
-        "usage: agenthub lanes add --repo <path> [--title <text>] [--base <branch>] [--slug <slug>]"
+        "usage: agenthub lanes add --repo <path> [--title <text>] [--base <branch>] [--slug <slug>] [--tool <id>]"
       );
       process.exitCode = 1;
       return;
@@ -1577,6 +1620,7 @@ async function cmdLanesAdd(args) {
     const body = { sourceRepo: repo, title: title || path.basename(repo) };
     if (base) body.base = base;
     if (slug) body.slug = slug;
+    if (tool) body.tool = tool;
     const { lane: provisioning } = await post("/api/lanes/worktree", body);
     const deadline = Date.now() + 30_000;
     let lane = provisioning;
@@ -1602,37 +1646,19 @@ async function cmdLanesAdd(args) {
     return;
   }
   if (!cwd || !title) {
-    console.error("usage: agenthub lanes add --cwd <path> --title <text> [--pipeline <id>]");
+    console.error(
+      "usage: agenthub lanes add --cwd <path> --title <text> [--pipeline <id>] [--tool <id>]"
+    );
     process.exitCode = 1;
     return;
   }
   const body = { cwd, title };
   if (pipeline) body.pipeline = pipeline;
+  if (tool) body.tool = tool;
   const { lane } = await post("/api/lanes", body);
   console.log(`${c.green("✔")} Created lane #${lane.id}: ${lane.title}`);
 }
 
-/**
- * `agenthub skills install` — copy this checkout's `skills/ship-feature-lane/`
- * into `~/.claude/skills/ship-feature-lane/`, so `/ship-feature-lane` is
- * discoverable from a session running inside any lane's own working
- * directory, not just inside this repo. Pure filesystem action; does not
- * talk to the dashboard server at all. Reinstall, not merge — overwrites an
- * existing global copy with the current one.
- */
-function cmdSkillsInstall() {
-  const { installShipFeatureLaneSkill } = require(
-    path.join(REPO_ROOT, "server", "lib", "skills-install.js")
-  );
-  try {
-    const result = installShipFeatureLaneSkill({ repoRoot: REPO_ROOT });
-    console.log(`${c.green("✔")} installed ship-feature-lane skill -> ${result.path}`);
-  } catch (err) {
-    console.error(`✖ ${err.message}`);
-    process.exitCode = 1;
-  }
-}
-
 /**
  * `agenthub lanes gc [--dry-run]` — reap orphaned Playwright MCP processes
  * (owning session died) and cap oversized hook logs, across every lane on
@@ -1772,9 +1798,14 @@ async function cmdLanesLifecycle(action, args) {
   printLaneFacts(`Preflight for ${action} lane #${id}:`, preflight, fields);
   const keepDb = action === "reset" && args.includes("--keep-db");
   if (preflight.database) {
-    const fate = action === "remove" ? "dropped" : keepDb ? "kept as-is" : "dropped and recreated";
+    const fate = action === "remove" ? "kept" : keepDb ? "kept as-is" : "dropped and recreated";
     console.log(`  database: ${preflight.database} (${fate})`);
   }
+  if (action === "remove") {
+    console.log(
+      "  Only the dashboard's record is dropped — the working tree, its branch and the database are left for you to delete yourself."
+    );
+  }
   if (Array.isArray(preflight.warnings) && preflight.warnings.length) {
     console.log("Warnings:");
     for (const warning of preflight.warnings) console.log(`  ${warning}`);
@@ -1786,9 +1817,9 @@ async function cmdLanesLifecycle(action, args) {
     return;
   }
   // Only `reset` is impossible for an adopted lane. `remove` IS supported by the
-  // server: it drops the dashboard's record and never touches the directory
-  // (server/routes/lanes.js scopes the worktree teardown to managed lanes), so
-  // refusing it here would make a permitted action unreachable from the CLI.
+  // server for every lane kind: it drops the dashboard's record and never touches
+  // the directory, so refusing it here would make a permitted action unreachable
+  // from the CLI.
   if (
     action === "reset" &&
     Array.isArray(preflight.blocked) &&
@@ -2370,25 +2401,6 @@ async function cmdLanesProofLink(args) {
   );
 }
 
-/** `agenthub lanes agents install [<id>] [--cwd path]` — write the ship-feature-lane
- *  agent templates (qc-local, senior-gate-reviewer) into <lane>/.claude/agents/,
- *  git-excluded. Never run automatically; a session calls it explicitly. */
-async function cmdLanesAgentsInstall(args) {
-  const resolved = await resolveLaneArg(args);
-  if (!resolved) return;
-  const result = await post(
-    `/api/lanes/${resolved.laneId}/agents/install`,
-    {},
-    { allowError: true }
-  );
-  if (result.status) {
-    console.error(`✖ agents install → ${result.data?.error?.message || result.status}`);
-    process.exitCode = 1;
-    return;
-  }
-  console.log(`${c.green("✔")} installed: ${result.installed.join(", ")}`);
-}
-
 /** `agenthub lanes mcp sync [<id>] [--cwd path]` — relocate the source repo's
  *  already-configured MCP servers into <lane>/.mcp.json and seed Chromium
  *  profiles. Never run automatically; a session calls it explicitly. */
@@ -2467,8 +2479,7 @@ async function cmdLanesCi(args) {
  * was display-only: the dashboard rendered a copy button and the operator
  * pasted it into a session by hand. This runs it, in the lane's own cwd:
  *
- *   - a slash command (`/superpowers:brainstorming`) starts `claude` with it
- *     as the prompt, exactly like `agenthub ship-full` does with the whole skill;
+ *   - a slash command starts `claude` with it as the prompt;
  *   - anything else (`npm test`, `agenthub lanes hook ci-gate`) is spawned directly.
  *
  * With no node id it lists the nodes and their commands, which is also the
@@ -2631,88 +2642,6 @@ async function cmdLanesShell(args) {
   });
 }
 
-/**
- * Start a `claude` session in this lane driven by a pipeline's own skill.
- * Two commands, two depths of work:
- *
- *   agenthub ship-full   → the 16-node `ship-feature` template, `/agenthub:ship-feature-lane`
- *                      — autonomous to a published PR, then watched until a
- *                        human merges it.
- *   agenthub ship-quick  → the 8-node `default` template, `/agenthub:ship-feature`
- *                      — in-repo feature work that stops at review/gate.
- *
- * Each command puts the lane on its own template, so the choice is the command
- * you type; the skill string itself lives in the template's `skill` field and
- * is never duplicated here.
- *
- * The prompt is passed as ONE argv element to `claude`, never through a shell —
- * a requirement containing quotes, `$`, or `;` is text, not code. `--print`
- * shows the exact command, switches nothing, and runs nothing.
- */
-const SHIP_TEMPLATES = {
-  "ship-full": "ship-feature",
-  "ship-quick": "default",
-};
-
-async function cmdShip(command, args) {
-  const templateId = SHIP_TEMPLATES[command];
-  const { flags, positional } = parseArgs(args);
-  const resolved = await resolveLaneArg(args);
-  if (!resolved) return;
-  let { lane } = await get(`/api/lanes/${resolved.laneId}`);
-
-  const { pipelines } = await get("/api/lanes/pipelines");
-  const skill = pipelines.find((p) => p.id === templateId)?.skill;
-  if (!skill) {
-    console.error(
-      `✖ pipeline template "${templateId}" declares no driving skill — ` +
-        `add a "skill" field to it (see docs/LANES.md § Custom template format)`
-    );
-    process.exitCode = 1;
-    return;
-  }
-
-  // `resolveLaneArg` only strips a leading bare lane id; the rest of the
-  // positionals are the requirement, joined back into one prompt line.
-  const requirement = positional
-    .filter((p) => p !== String(resolved.laneId))
-    .join(" ")
-    .trim();
-  const prompt = requirement ? `${skill} ${requirement}` : skill;
-
-  if (flags.print || !requirement) {
-    // `--print` shows what would run, so it switches nothing.
-    if (!requirement) console.error(`usage: agenthub ${command} "<requirement>" [<id>] [--print]`);
-    console.log(`cd ${lane.cwd} && claude ${JSON.stringify(prompt)}`);
-    if (!requirement) process.exitCode = 1;
-    return;
-  }
-
-  // The command picks the pipeline, not the lane's current setting: put the
-  // lane on the matching template first so the dashboard renders the right
-  // node count from the start rather than after the skill self-corrects.
-  if (lane.pipeline !== templateId) {
-    ({ lane } = await patch(`/api/lanes/${lane.id}`, { pipeline: templateId }));
-  }
-
-  console.log(
-    `${c.dim(`lane #${lane.id} · pipeline ${lane.pipeline} (${lane.pipeline_nodes.length} nodes)`)}\n` +
-      `${c.cyan("→")} claude ${JSON.stringify(prompt)}`
-  );
-  const child = spawn("claude", [prompt], { stdio: "inherit", cwd: lane.cwd });
-  await new Promise((resolve) => {
-    child.on("close", (code) => {
-      if (code) process.exitCode = code;
-      resolve();
-    });
-    child.on("error", (err) => {
-      console.error(c.red(`✖ ${err?.message || err}`));
-      process.exitCode = 1;
-      resolve();
-    });
-  });
-}
-
 async function cmdFeatureShow(args) {
   const slug = args.find((arg) => !arg.startsWith("--"));
   if (!slug) {
@@ -2742,7 +2671,7 @@ async function cmdStage(args) {
   const stage = args[0];
   if (!stage || stage.startsWith("--")) {
     console.error(
-      "usage: agenthub stage <stage> [--lane <id>] [--cwd <path>] [--tool claude|codex] [--status <s>] [--evidence <text>] [--note <text>] [--result pass|fail]"
+      "usage: agenthub stage <stage> [--lane <id>] [--cwd <path>] [--tool <id>] [--status <s>] [--evidence <text>] [--note <text>] [--result pass|fail]"
     );
     process.exitCode = 1;
     return;
@@ -2766,22 +2695,6 @@ async function cmdStage(args) {
     result: flag("result"),
   });
   console.log(`lane #${lane.id} → ${lane.stage} (${lane.progress}%)`);
-
-  // A stage name matching no node (nor alias) still stores — setStage takes the
-  // string verbatim — but phaseIdx() then returns -1, so nothing renders as
-  // `current` and progress reads 0. Warn, never fail: a typo must not break a
-  // declaration the pipeline can still record, but it must not pass silently.
-  // Skipped for `--result fail`, which paints the node `failed` rather than
-  // `current` and would otherwise look identical to an unknown stage.
-  const nodes = lane.pipeline_nodes || [];
-  if (flag("result") !== "fail" && nodes.length && !nodes.some((n) => n.state === "current")) {
-    console.error(
-      c.yellow(
-        `! "${stage}" matches no node in pipeline "${lane.pipeline}" — recorded, but the ` +
-          `pipeline map won't show it. Nodes: ${nodes.map((n) => n.id).join(", ")}`
-      )
-    );
-  }
 }
 
 // ── Command catalog ─────────────────────────────────────────────────────────
@@ -2881,10 +2794,14 @@ const COMMAND_GROUPS = [
     "Lanes",
     [
       ["lanes", "", "List lanes with stage, liveness and progress"],
-      ["lanes add", "--cwd <path> --title <text>", "Create a new lane bound to a directory"],
       [
         "lanes add",
-        "--repo <path> [--title <text>] [--base <branch>] [--slug <slug>]",
+        "--cwd <path> --title <text> [--tool <id>]",
+        "Create a new lane bound to a directory (--tool: an AI Tools id, default claude)",
+      ],
+      [
+        "lanes add",
+        "--repo <path> [--title <text>] [--base <branch>] [--slug <slug>] [--tool <id>]",
         "Provision a managed worktree lane",
       ],
       [
@@ -2907,16 +2824,6 @@ const COMMAND_GROUPS = [
         "[<node-id>] [extra…] [<id>] [--print]",
         "Run ONE pipeline node's own command in the lane's cwd (no id: list every node and its command)",
       ],
-      [
-        "ship-full",
-        '"<requirement>" [<id>] [--print]',
-        "Run the 16-stage lane pipeline: implement → gates → e2e → review → QC → senior gate → PR, watched until a human merges (--print: show the command, run nothing)",
-      ],
-      [
-        "ship-quick",
-        '"<requirement>" [<id>] [--print]',
-        "Run the 8-stage in-repo pipeline: plan → implement → tests → review → gate → ship. No PR, no browser QC",
-      ],
       [
         "lanes shell",
         "[<id>]",
@@ -2925,7 +2832,7 @@ const COMMAND_GROUPS = [
       [
         "lanes reset|remove|purge",
         "<id> [--force] [--keep-db] --yes",
-        "Show preflight facts, then perform a destructive lane action (--keep-db: reset only)",
+        "Show preflight facts, then perform a destructive lane action (--keep-db: reset only; remove drops the dashboard's record only — worktree, branch and database are left alone)",
       ],
       [
         "lanes up|down",
@@ -2945,11 +2852,6 @@ const COMMAND_GROUPS = [
         "[<id>]",
         "Converge clone-root proof/ onto .playwright-mcp/proof (idempotent, never automatic)",
       ],
-      [
-        "lanes agents install",
-        "[<id>]",
-        "Write the ship-feature-lane agent templates (qc-local, senior-gate-reviewer) into <lane>/.claude/agents/, git-excluded",
-      ],
       [
         "lanes mcp sync",
         "[<id>]",
@@ -2970,11 +2872,6 @@ const COMMAND_GROUPS = [
         "[--dry-run]",
         "Reap orphaned Playwright MCP processes + cap oversized hook logs, across every lane",
       ],
-      [
-        "skills install",
-        "",
-        "Install skills/ship-feature-lane/ into ~/.claude/skills/ so /ship-feature-lane works from any lane",
-      ],
       [
         "lock status|acquire|release",
         "[<name>] [--holder X] [--timeout N]",
@@ -2983,7 +2880,7 @@ const COMMAND_GROUPS = [
       [
         "stage <stage> [flags]",
         "",
-        "Report the current pipeline stage for a lane (--tool claude|codex when one cwd has both)",
+        "Report the current pipeline stage for a lane (--tool <id> when one cwd has lanes for two tools)",
       ],
       ["feature list", "[<id>]", "List every feature this lane has activated, archived or live"],
       [
@@ -3001,12 +2898,12 @@ const COMMAND_GROUPS = [
   [
     "Administration",
     [
-      ["doctor", "", "Connectivity, hooks, database, and remote sources diagnosis"],
+      ["doctor", "", "Connectivity, hooks, database, tmux, and remote sources diagnosis"],
       ["info", "", "Raw system info JSON"],
       ["export", "[file.json]", "Export all data as JSON"],
       ["cleanup", "--hours N --days M", "Abandon stale / purge old sessions"],
       ["reinstall-hooks", "", "Reinstall Claude Code hooks"],
-      ["update-check", "", "Check whether the dashboard checkout is behind upstream"],
+      ["update-check", "", "Check whether a newer release of the dashboard was published"],
       ["clear-data", "--yes", "Delete ALL data (requires --yes)"],
       ["open", "", "Open the dashboard in your browser"],
       ["version", "", "Print the agenthub version (also: --version, -v)"],
@@ -3270,7 +3167,8 @@ const SERVER_ONLY_REASONS = {
   cleanup: "cleanup is a server-side mutation",
   "clear-data": "data wipes must go through the server",
   "reinstall-hooks": "hook installation is performed by the server",
-  "update-check": "the update check runs server-side (git fetch against the canonical remote)",
+  "update-check":
+    "the update check runs server-side (reads the repo's latest release, git fetch as fallback)",
   info: "system info (uptime, memory, WS connections) only exists on a running server",
   health: "health is, by definition, a check against the running server",
 };
@@ -3800,9 +3698,6 @@ async function runCommand(argv) {
         return cmdLanesRuntime(rest[0], rest.slice(1));
       }
       if (rest[0] === "proof-link") return cmdLanesProofLink(rest.slice(1));
-      if (rest[0] === "agents" && rest[1] === "install") {
-        return cmdLanesAgentsInstall(rest.slice(2));
-      }
       if (rest[0] === "mcp" && rest[1] === "sync") {
         return cmdLanesMcpSync(rest.slice(2));
       }
@@ -3825,12 +3720,6 @@ async function runCommand(argv) {
         return cmdLanesGc(rest.slice(1));
       }
       return cmdLanes();
-    case "skills": {
-      if (rest[0] === "install") return cmdSkillsInstall();
-      console.error("usage: agenthub skills install");
-      process.exitCode = 1;
-      return;
-    }
     case "lock": {
       const sub = rest[0];
       if (sub === "status") return cmdLockStatus(rest.slice(1));
@@ -3844,9 +3733,6 @@ async function runCommand(argv) {
     }
     case "stage":
       return cmdStage(rest);
-    case "ship-full":
-    case "ship-quick":
-      return cmdShip(cmd, rest);
     case "feature": {
       const sub = rest[0];
       if (sub === "list") return cmdFeatureList(rest.slice(1));

client/README.md

@@ -19,8 +19,6 @@ Enterprise-grade React + TypeScript dashboard for real-time Claude Code agent mo
 ![PostCSS](https://img.shields.io/badge/PostCSS-8.5-DD3A0A?style=flat-square&logo=postcss&logoColor=white)
 ![Autoprefixer](https://img.shields.io/badge/Autoprefixer-10.4-DD3735?style=flat-square&logo=autoprefixer&logoColor=white)
 ![ESLint](https://img.shields.io/badge/ESLint-8.44-4B32C3?style=flat-square&logo=eslint&logoColor=white)
-![Docker](https://img.shields.io/badge/Docker-20.10-2496ED?style=flat-square&logo=docker&logoColor=white)
-![Podman](https://img.shields.io/badge/Podman-4.0-CC342D?style=flat-square&logo=podman&logoColor=white)
 ![Prometheus](https://img.shields.io/badge/Prometheus-2.x-E6522C?style=flat-square&logo=prometheus&logoColor=white)
 ![Grafana](https://img.shields.io/badge/Grafana-10.x-F46800?style=flat-square&logo=grafana&logoColor=white)
 ![Vitest](https://img.shields.io/badge/Vitest-1.0-646CFF?style=flat-square&logo=vitest&logoColor=white)
@@ -54,7 +52,17 @@ The client is a single-page application (SPA) built with modern web technologies
 - **React 18.3** - Component-based UI with hooks and concurrent features
 - **TypeScript 5.7** - Full type safety across components, utilities, and API contracts
 - **Vite 6.1** - Lightning-fast HMR during development, optimized production builds
-- **Tailwind CSS 3.4** - Utility-first CSS framework; colors are CSS-variable-backed tokens (`darkMode: "class"`) so a Dark/Light toggle (next to the language switcher in the sidebar, `useTheme` hook) re-themes the whole app by flipping one class
+- **Tailwind CSS 3.4** - Utility-first CSS framework; colors are CSS-variable-backed tokens (`darkMode: "class"`) so a Dark/Light/System switch (next to the language switcher in the sidebar, and in Settings → Appearance; `useTheme` hook) re-themes the whole app by flipping one class. A **named theme** per mode is one more attribute: `data-theme` on `<html>` (absent for `default`) selects a CSS-variable block in `index.css` — `.dark[data-theme="darcula|apple-dark"]` and `[data-mode="light"][data-theme="apple-light|intellij-light|canvas"]` — that overrides only the tokens it changes. `--tint-base` is `var(--surface-3)` and light `--syn-plain` is `var(--fg-primary)`, so a theme never restates them. A new theme is a block there plus an id in `THEMES` (`hooks/useTheme.ts`) and a label in `components/settings/AppearanceSettings.tsx`; its Settings preview needs no hex, because the swatch re-scopes the same variables on its own element. Storage: `theme` = `dark|light|system`, `agenthub.theme.dark` / `agenthub.theme.light` = theme ids (unknown ⇒ `default`); state is read through `useSyncExternalStore`, never cached in the module, so every consumer and every tab agree. An inline `<script>` at the top of `client/index.html` applies the same keys before first paint (no flash of the stock dark palette); it does not validate ids — the hook does, on mount
+
+  **The surface ramp means elevation, and it runs the same direction in both themes: a higher index is LIGHTER in dark and LIGHTER in light.** So in light mode the page is the *darkest* step (`surface-0`, `#e8e5da`) and a `.card` is brighter than the page it sits on (`surface-3`, `#f5f3ec`), which is also what makes every `hover:bg-surface-N` lift rather than dim. Light mode originally used Radix slate in its native direction — index up meant darker — which inverted the whole language: a near-white page (the glare complaint) under grey cards that read as recessed. Never "fix" a light-mode colour by swapping which step a component uses; fix the value of the step.
+
+  Other rules that fall out of this:
+  - **Light mode's hue family is warm, dark mode's is cool.** The light ramp is Claude's own ivory/terracotta (`#e8e5da` → `#fcfbf7`, warm neutrals, warm `--shadow-card`), not Radix slate: a cool near-white page reads as glare at any lightness, because the brightest thing on screen is also the bluest. Dark mode stays slate + blue — a warm accent on a near-black page is a different problem with a different answer.
+  - Light `--accent` is **not** the dark one, in hue or in step. Dark's `#0090ff` is 3.3:1 on white; Claude's brand terracotta `#cc785c` is 3.1:1 on ivory and 3.3:1 under white text, so it works as a large fill and fails as a link or a button label. Light mode uses it two steps down, `#a34a28` — 5.3:1 as text on a card, 5.9:1 white-on-accent.
+  - `--fg-muted` carries real content (timestamps, counts), so it is held at ≥4.5:1 (`#686359`, 5.4:1 on a card), not at the decorative value the Radix step suggests.
+  - Code colouring goes through the `syntax.*` tokens (`--syn-*`), never fixed Tailwind steps: the dark set is pastel (300-level), the light set is the same hues four steps darker, because a pastel keyword on a light code block is unreadable.
+  - Anything that assumes a dark background — a hardcoded near-black panel, `hover:text-white`, `filter: invert(1)` on a form control glyph — is a light-mode bug. Use tokens, or scope the rule under `.dark`.
+  - **A status/accent FILL is pre-mixed, never translucent.** `bg-status-success/10` and `border-status-danger/40` compile to `color-mix(… , rgb(var(--tint-base)))`, not to `rgb(… / 0.1)` — see `tint()` in `tailwind.config.js`. A translucent tint composites with whatever is behind it, so one "success" chip rendered as five different colours over the five surface steps and washed out on light cards. `--tint-base` is the theme's card surface, so the chip reads the same on the page, in a card, in a modal and inside an input row. This is scoped to `backgroundColor`/`borderColor`: `text-status-warning/80` and `ring-accent/40` stay genuinely translucent (they sit *on* a fill), and the `surface` family keeps its alpha or every scrim would turn solid. Light `--status-*` is two steps darker than Radix 11 so a label clears 4.5:1 against its own densest chip (a 20% tint of itself), not just against the card.
 - **React Router 6.28** - Client-side routing with nested layouts
 - **WebSocket** - Real-time event streaming from server
 - **Lucide Icons** - Modern, consistent icon set
@@ -178,6 +186,15 @@ client/
 │   │   ├── Sidebar.tsx
 │   │   ├── Layout.tsx
 │   │   ├── RemoteSources.tsx  # Remote Data Sources settings panel (SSH multi-machine collection)
+│   │   ├── SessionToolBadge.tsx  # The CLI that produced a non-Claude session, by its AI Tools label (nothing for Claude)
+│   │   ├── settings/       # Settings panels, among them:
+│   │   │   ├── AiToolsModal.tsx             # AI Tools dialog, opened from the Settings tab bar's right edge
+│   │   │   ├── AiToolsSettings.tsx          # Its body: installed/available CLIs, enable/default, install/update
+│   │   │   ├── PricingSettings.tsx          # Model Pricing table, `vendor` filter + Show all models
+│   │   │   ├── ClaudeAgentHubSettings.tsx   # Claude Code → Overview: CLAUDE_HOME, hook status, pricing
+│   │   │   ├── HomeDirSetting.tsx           # CLAUDE_HOME / CODEX_HOME editor (env-owned warning)
+│   │   │   ├── CodexHooksSettings.tsx       # Codex → Overview → Codex hooks card
+│   │   │   └── AntigravityHooksSettings.tsx # Antigravity → Antigravity hooks card
 │   │   └── workflows/      # Workflows page panels: own-pipeline stats + D3 analytics (11 files)
 │   │
 │   ├── pages/              # Route pages
@@ -187,6 +204,7 @@ client/
 │   │   ├── ActivityFeed.tsx  # Real-time event log; row click expands payload; Session btn navigates
 │   │   ├── Workflows.tsx
 │   │   ├── Settings.tsx
+│   │   ├── AiToolConfig.tsx  # Settings → <tool>: the generic tab of every installed, enabled catalog tool (path, Update link, sessions/cost/lanes, default model, vendor pricing, catalog-declared config files; Antigravity adds its hooks card)
 │   │   └── NotFound.tsx
 │   │
 │   ├── lib/                # Core utilities & business logic
@@ -200,9 +218,9 @@ client/
 │   ├── hooks/
 │   │   ├── useWebSocket.ts      # Auto-reconnecting WebSocket hook
 │   │   ├── useNotifications.ts  # Browser push notification triggers
-│   │   └── useTheme.ts          # Dark/light mode: toggles the `dark` class, persists to localStorage
+│   │   └── useTheme.ts          # Dark/light/system mode + per-mode named theme: `dark` class, `data-mode`, `data-theme` on <html>, persisted to localStorage
 │   │
-│   ├── i18n/               # Internationalization (en / zh / vi / ko)
+│   ├── i18n/               # Internationalization (en / vi)
 │   ├── App.tsx             # Root component + router setup
 │   ├── main.tsx            # Entry point
 │   └── index.css           # Tailwind + CSS-variable color tokens (dark/light)
@@ -231,7 +249,7 @@ graph TB
     Detail[SessionDetail<br/>agent hierarchy + timeline]
     Feed[ActivityFeed<br/>streaming event log]
     Workflows[Workflows<br/>Lane pipelines + D3 analytics]
-    Settings[Settings<br/>pricing + notifications + hooks]
+    Settings[SettingsHub<br/>Dashboard tab: appearance + notifications + data<br/>Claude Code / Codex → Overview, Antigravity:<br/>each tool's pricing + hooks]
 
     App --> Layout
     Layout --> Dashboard & Sessions & Detail & Feed & Workflows & Settings
@@ -277,7 +295,7 @@ sequenceDiagram
 
 The client uses **local component state** and **React hooks** for state management. No global state library (Redux, Zustand) is used to keep the architecture simple. The one small exception is the **data-scope store** (`lib/dataScope.ts`): a lightweight app-wide store holding the current set of data sources (`local` plus any configured [Remote Data Sources](../server/README.md#remote-data-sources)). Pages read it and append `?sources=` to their API requests, so a single selector narrows the whole app to one or more machines' data. Remote sources are managed from the Settings page via the `RemoteSources` component (`components/RemoteSources.tsx`), which drives the `/api/remote-sources` CRUD/test/sync endpoints and reflects live `remote_source.status` WebSocket updates. When a sync finishes, stats pages refetch via `lib/remoteDataEvents.ts` (`remote_data.updated`, `remote_source.status` with `ok`, or remote `import.progress` complete).
 
-**Cursor sessions (informational):** Settings surfaces a subtle note on the CLAUDE_HOME, Import History, and Remote Data Sources panels — **Cursor** agent sessions count too because Cursor stores transcripts under the same `~/.claude` paths as Claude Code locally (and on synced remotes).
+**Cursor sessions (informational):** Settings surfaces a subtle note on the CLAUDE_HOME (Settings → Claude Code → Overview), Import History, and Remote Data Sources panels — **Cursor** agent sessions count too because Cursor stores transcripts under the same `~/.claude` paths as Claude Code locally (and on synced remotes).
 
 ### State Strategy
 
@@ -728,6 +746,36 @@ flowchart LR
 
 Renders the hook payload for a single event inline below its row. Scalars appear as `key: value` pairs; objects and arrays render in a terminal-styled code block with a copy button.
 
+#### Tooltips (`components/Tooltip.tsx`)
+
+`GlobalTooltip` is mounted once in `App.tsx` and gives **every** control in the
+app the same designed tooltip — there is no wrapper to add at the call site.
+It listens at the document, and on hover (after a 350 ms rest) or on keyboard
+focus (immediately) it takes the element's native `title`, shows it as an
+anchored bubble with an arrow, and puts the attribute back when the bubble
+closes. Consequences worth knowing:
+
+- **Write `title="…"` exactly as before.** That is the whole API. A control
+  keeps its native tooltip, and its accessible name, when JS has not run.
+- **Opt out with `data-tip-off`** where the browser's own tooltip is wanted.
+- The bubble is built from theme tokens (`TOOLTIP_SURFACE`), so it is legible
+  in light mode; it flips above/below, clamps to the viewport, and closes on
+  scroll, resize, pointer-down or `Escape`.
+- `Tip` (`components/Tip.tsx`) stays separate and cursor-following for
+  expanding a truncated **number** inside a line of text, but draws the same
+  surface so the two read as one thing.
+
+#### MarkdownPreview (`components/MarkdownPreview.tsx`)
+
+A `.md`/`.markdown`/`.mdx` file (`isMarkdown`) rendered for reading with
+`react-markdown` + `remark-gfm` (tables, task lists, strikethrough). It sits
+behind a **Preview** / **Raw** toggle in two places: the config explorer's
+`FileViewer` and the Changes panel's whole-file view (`lane-file-preview`,
+reset to Raw on every file switch; the editor still opens from Raw). Raw HTML
+in the file is shown as text, never run (no `rehype-raw`), links open in a new
+tab, and a leading YAML frontmatter block is shown as a code block. Styles are
+the `.md-preview` rules in `index.css`, built from theme tokens.
+
 ---
 
 ## Utilities

client/index.html

@@ -1,15 +1,33 @@
 <!doctype html>
 <html lang="en" class="dark">
   <head>
+    <!-- Apply the saved appearance before first paint (same keys as
+         src/hooks/useTheme.ts, which re-applies and validates on mount). -->
+    <script>
+      try {
+        var m = localStorage.getItem("theme");
+        var d =
+          m === "light"
+            ? false
+            : m === "system"
+              ? !(window.matchMedia && !matchMedia("(prefers-color-scheme: dark)").matches)
+              : true;
+        var r = document.documentElement;
+        var t = localStorage.getItem("agenthub.theme." + (d ? "dark" : "light"));
+        r.classList.toggle("dark", d);
+        r.setAttribute("data-mode", d ? "dark" : "light");
+        if (t && t !== "default") r.setAttribute("data-theme", t);
+      } catch (e) {}
+    </script>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <link rel="apple-touch-icon" href="/favicon.svg" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon" href="/favicon.ico" />
     <link rel="manifest" href="/manifest.json" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <meta name="theme-color" content="#6366f1" />
-    <title>Agent Dashboard - Claude Code Monitor</title>
+    <title>AgentHub - SmartGift Solution</title>
     <meta
       name="description"
       content="Real-time monitoring platform for Claude Code agent activity. Track sessions, monitor agents, visualize analytics, manage cost tracking, and receive browser notifications - all with live WebSocket updates."
@@ -23,8 +41,8 @@
 
     <!-- Open Graph -->
     <meta property="og:type" content="website" />
-    <meta property="og:site_name" content="Agent Dashboard" />
-    <meta property="og:title" content="Agent Dashboard - Claude Code Monitor" />
+    <meta property="og:site_name" content="AgentHub" />
+    <meta property="og:title" content="AgentHub - SmartGift Solution" />
     <meta
       property="og:description"
       content="Real-time monitoring platform for Claude Code agent activity. Track sessions, monitor agents, visualize analytics, manage cost tracking, and receive browser notifications - all with live WebSocket updates."
@@ -33,17 +51,17 @@
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
     <meta property="og:image:type" content="image/svg+xml" />
-    <meta property="og:image:alt" content="Agent Dashboard - real-time Claude Code monitoring" />
+    <meta property="og:image:alt" content="AgentHub - real-time Claude Code monitoring" />
 
     <!-- Twitter / X Card -->
     <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="Agent Dashboard - Claude Code Monitor" />
+    <meta name="twitter:title" content="AgentHub - SmartGift Solution" />
     <meta
       name="twitter:description"
       content="Real-time monitoring platform for Claude Code agent activity. Sessions, Kanban board, analytics, cost tracking, browser notifications, and WebSocket push."
     />
     <meta name="twitter:image" content="/og-image.svg" />
-    <meta name="twitter:image:alt" content="Agent Dashboard - real-time Claude Code monitoring" />
+    <meta name="twitter:image:alt" content="AgentHub - real-time Claude Code monitoring" />
     <meta name="twitter:creator" content="@smartgift" />
 
     <!-- JSON-LD structured data -->
@@ -51,7 +69,7 @@
       {
         "@context": "https://schema.org",
         "@type": "WebApplication",
-        "name": "Agent Dashboard",
+        "name": "AgentHub",
         "description": "Real-time monitoring platform for Claude Code agent activity. Tracks sessions, agents, tool events, token usage analytics, cost tracking, and browser notifications via native hooks with live WebSocket push.",
         "applicationCategory": "DeveloperApplication",
         "operatingSystem": "Windows, macOS, Linux",
@@ -61,8 +79,8 @@
           "name": "SmartGift",
           "url": "https://smartgift.vn"
         },
-        "codeRepository": "https://git.smartgift.io.vn/Smartgift-AI/Claude-Code-Monitor",
-        "featureList": "Real-time dashboard, Kanban board, Session tracking, Activity feed, Token usage analytics, Cost tracking, Browser notifications, WebSocket live updates, CLI statusline"
+        "codeRepository": "https://git.smartgift.io.vn/Smartgift-AI/AgentHub",
+        "featureList": "Real-time dashboard, Kanban board, Session tracking, Activity feed, Token usage analytics, Cost tracking, Browser notifications, WebSocket live updates"
       }
     </script>
   </head>

client/package.json

@@ -23,7 +23,9 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^17.0.4",
-    "react-router-dom": "^6.28.2"
+    "react-markdown": "^10.1.0",
+    "react-router-dom": "^6.28.2",
+    "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

client/public/manifest.json

@@ -13,15 +13,15 @@
   "categories": ["developer-tools", "productivity"],
   "icons": [
     {
-      "src": "/favicon.svg",
-      "sizes": "any",
-      "type": "image/svg+xml",
+      "src": "/favicon.ico",
+      "sizes": "32x32",
+      "type": "image/x-icon",
       "purpose": "any"
     },
     {
-      "src": "/favicon.svg",
-      "sizes": "any",
-      "type": "image/svg+xml",
+      "src": "/favicon.ico",
+      "sizes": "32x32",
+      "type": "image/x-icon",
       "purpose": "maskable"
     }
   ]

client/public/sw.js

@@ -87,13 +87,19 @@ self.addEventListener("push", (event) => {
 
 self.addEventListener("notificationclick", (event) => {
   event.notification.close();
+  const url = event.notification.data?.url;
   event.waitUntil(
     clients.matchAll({ type: "window" }).then((windowClients) => {
       for (const client of windowClients) {
-        if (client.focus) {
+        if ("focus" in client) {
+          // Reuse an already-open tab instead of stacking a new one — that's
+          // also why `navigate` (same-origin only) beats postMessage: it works
+          // even if the page hasn't wired up a listener for this.
+          if (url && "navigate" in client) client.navigate(url).catch(() => {});
           return client.focus();
         }
       }
+      if (url && clients.openWindow) return clients.openWindow(url);
     })
   );
 });

client/src/App.tsx

@@ -60,6 +60,7 @@ import { useCallback } from "react";
 import { Layout } from "./components/Layout";
 import { DocumentTitle } from "./components/DocumentTitle";
 import { SplashScreen } from "./components/SplashScreen";
+import { GlobalTooltip } from "./components/Tooltip";
 import { Dashboard } from "./pages/Dashboard";
 import { History } from "./pages/History";
 import { SessionDetail } from "./pages/SessionDetail";
@@ -87,6 +88,9 @@ export default function App() {
   return (
     <>
       <SplashScreen />
+      {/* One renderer gives every `title` in the app the designed bubble —
+          see components/Tooltip.tsx for why it is not a wrapper component. */}
+      <GlobalTooltip />
       <BrowserRouter>
         <DocumentTitle />
         <Routes>

client/src/components/AgentCard.tsx

@@ -182,7 +182,9 @@ export function AgentCard({ agent, session, label, onClick }: AgentCardProps) {
         <div className="flex items-center gap-2.5 min-w-0 overflow-hidden">
           <div
             className={`w-7 h-7 rounded-md flex items-center justify-center flex-shrink-0 ${
-              isMain ? "bg-accent/15 text-accent" : "bg-violet-500/15 text-violet-400"
+              isMain
+                ? "bg-accent/15 text-accent"
+                : "bg-violet-500/15 text-violet-700 dark:text-violet-400"
             }`}
           >
             {isMain ? <Bot className="w-3.5 h-3.5" /> : <GitBranch className="w-3.5 h-3.5" />}

client/src/components/AiToolIcon.tsx

@@ -0,0 +1,42 @@
+/**
+ * @file AiToolIcon.tsx
+ * @description An AI tool's icon: the server's cached favicon
+ * (GET /api/ai-tools/:id/icon), or the label's first letter when there is
+ * none. Shared by the AI Tools modal and the Add-lane tool picker.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useState } from "react";
+import { api, type AiTool } from "../lib/api";
+
+/**
+ * @param props.tool - The catalog entry.
+ * @param props.className - Size classes (default `h-8 w-8`).
+ */
+export function AiToolIcon({
+  tool,
+  className = "h-8 w-8",
+}: {
+  tool: Pick<AiTool, "id" | "label">;
+  className?: string;
+}) {
+  // Keyed by id: one instance showing another tool must retry its icon.
+  const [failedId, setFailedId] = useState<string | null>(null);
+  if (failedId !== tool.id) {
+    return (
+      <img
+        src={api.aiTools.iconUrl(tool.id)}
+        alt=""
+        onError={() => setFailedId(tool.id)}
+        className={`${className} shrink-0 rounded-md bg-surface-4 object-contain p-1`}
+      />
+    );
+  }
+  return (
+    <span
+      className={`${className} flex shrink-0 items-center justify-center rounded-md bg-surface-4 text-xs font-semibold text-fg-secondary`}
+    >
+      {tool.label.charAt(0).toUpperCase()}
+    </span>
+  );
+}

client/src/components/DateTimePicker.tsx

@@ -174,7 +174,7 @@ export function DateTimePicker({
               ? "bg-accent text-white font-medium"
               : isToday
                 ? "bg-surface-3 text-accent font-medium"
-                : "hover:bg-surface-2 text-fg-secondary hover:text-white"
+                : "hover:bg-surface-2 text-fg-secondary hover:text-fg-primary"
           }`}
       >
         {i}
@@ -201,7 +201,10 @@ export function DateTimePicker({
           {dateObj ? formatDisplay(dateObj) : placeholder}
         </span>
         {dateObj && (
-          <X className="w-3 h-3 text-fg-muted hover:text-white shrink-0" onClick={clearValue} />
+          <X
+            className="w-3 h-3 text-fg-muted hover:text-fg-primary shrink-0"
+            onClick={clearValue}
+          />
         )}
       </button>
 
@@ -216,7 +219,7 @@ export function DateTimePicker({
               onClick={() =>
                 setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1))
               }
-              className="p-1 hover:bg-surface-2 rounded text-fg-secondary hover:text-white"
+              className="p-1 hover:bg-surface-2 rounded text-fg-secondary hover:text-fg-primary"
             >
               <ChevronLeft className="w-4 h-4" />
             </button>
@@ -228,7 +231,7 @@ export function DateTimePicker({
               onClick={() =>
                 setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1))
               }
-              className="p-1 hover:bg-surface-2 rounded text-fg-secondary hover:text-white"
+              className="p-1 hover:bg-surface-2 rounded text-fg-secondary hover:text-fg-primary"
             >
               <ChevronRight className="w-4 h-4" />
             </button>

client/src/components/EventDetail.tsx

@@ -379,7 +379,7 @@ function ScalarValue({ value }: { value: unknown }) {
   if (value == null) return <span className="text-fg-muted italic">null</span>;
   if (typeof value === "boolean") {
     const color = value
-      ? "text-green-400 border-green-500/30 bg-green-500/10"
+      ? "text-green-700 dark:text-green-400 border-green-500/30 bg-green-500/10"
       : "text-fg-secondary border-border-light/30 bg-surface-4/10";
     return (
       <span className={`inline-block px-2 py-0.5 rounded border ${color}`}>{String(value)}</span>

client/src/components/ImportHistory.tsx

@@ -625,7 +625,7 @@ export function ImportHistory() {
               <ResultStat
                 label={t("import.result.backfilled", { count: result.backfilled ?? 0 })}
                 value={result.backfilled ?? 0}
-                color="text-blue-400"
+                color="text-blue-700 dark:text-blue-400"
               />
               <ResultStat
                 label={t("import.result.skipped", { count: result.skipped })}
@@ -672,12 +672,12 @@ export function ImportHistory() {
               <ResultStat
                 label={t("import.backupResult.events", { count: backupResult.events })}
                 value={backupResult.events}
-                color="text-violet-300"
+                color="text-violet-700 dark:text-violet-300"
               />
               <ResultStat
                 label={t("import.backupResult.pricing", { count: backupResult.model_pricing })}
                 value={backupResult.model_pricing}
-                color="text-cyan-300"
+                color="text-cyan-700 dark:text-cyan-300"
               />
             </div>
             <p className="text-[11px] text-fg-muted">
@@ -737,7 +737,7 @@ function ModeButton({
     >
       <div
         className={`flex items-center gap-1.5 text-xs font-medium mb-1 ${
-          active ? "text-blue-400" : "text-fg-secondary"
+          active ? "text-blue-700 dark:text-blue-400" : "text-fg-secondary"
         }`}
       >
         {icon}

client/src/components/MarkdownPreview.tsx

@@ -0,0 +1,44 @@
+/**
+ * @file MarkdownPreview.tsx
+ * @description A markdown file rendered for reading (GitHub-flavoured:
+ * tables, task lists, strikethrough, autolinks), shared by the config
+ * explorer's file viewer and the lane Changes panel. Raw HTML in the file is
+ * shown as text, never run (react-markdown without rehype-raw), and links
+ * open in a new tab. A leading YAML frontmatter block (skills, agents) is
+ * shown as a code block instead of being misread as a heading. `isMarkdown`
+ * says which paths get the preview toggle.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+/** Whether `path` names a markdown file. */
+export function isMarkdown(path: string | null | undefined): boolean {
+  return !!path && /\.(md|markdown|mdx)$/i.test(path);
+}
+
+/** Split a leading `---` frontmatter block off the body. */
+function splitFrontmatter(text: string): { front: string | null; body: string } {
+  const m = /^---\r?\n([\s\S]*?)\r?\n---[ \t]*(?:\r?\n|$)/.exec(text);
+  return m ? { front: m[1]!, body: text.slice(m[0].length) } : { front: null, body: text };
+}
+
+export function MarkdownPreview({ text, className = "" }: { text: string; className?: string }) {
+  const { front, body } = splitFrontmatter(text);
+  return (
+    <div data-testid="markdown-preview" className={`md-preview ${className}`}>
+      {front !== null && <pre className="md-frontmatter">{front}</pre>}
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          a: ({ node: _node, ...props }) => (
+            <a {...props} target="_blank" rel="noreferrer noopener" />
+          ),
+        }}
+      >
+        {body}
+      </ReactMarkdown>
+    </div>
+  );
+}

client/src/components/PageTabs.tsx

@@ -2,17 +2,16 @@
  * @file PageTabs.tsx
  * @description Shared top-of-page tab bar used by the pages that merged several
  * former routes into one (Settings hub, Sessions/Events history). Rendering only -
- * the owning page keeps the active tab in its own query param.
+ * the owning page keeps the active tab in its own query param. `actions` sits at
+ * the bar's right edge, outside the tablist.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
-import type { ComponentType } from "react";
+import type { ComponentType, ReactNode } from "react";
 
 export interface PageTab {
   id: string;
   label: string;
   Icon: ComponentType<{ className?: string }>;
-  /** Small muted suffix, e.g. "soon" for a tool that is not integrated yet. */
-  badge?: string;
 }
 
 interface PageTabsProps {
@@ -20,6 +19,8 @@ interface PageTabsProps {
   activeId: string;
   onSelect: (id: string) => void;
   ariaLabel: string;
+  /** Buttons at the right edge of the bar (not tabs). */
+  actions?: ReactNode;
 }
 
 /**
@@ -27,14 +28,16 @@ interface PageTabsProps {
  * @param props - Tabs to render, the active tab id, and the selection callback.
  * @returns The tab bar element.
  */
-export function PageTabs({ tabs, activeId, onSelect, ariaLabel }: PageTabsProps) {
-  return (
+export function PageTabs({ tabs, activeId, onSelect, ariaLabel, actions }: PageTabsProps) {
+  const list = (
     <div
       role="tablist"
       aria-label={ariaLabel}
-      className="flex items-center gap-1.5 overflow-x-auto no-scrollbar border-b border-border/60 pb-2"
+      className={`flex items-center gap-1.5 overflow-x-auto no-scrollbar ${
+        actions ? "min-w-0 flex-1" : "border-b border-border/60 pb-2"
+      }`}
     >
-      {tabs.map(({ id, label, Icon, badge }) => {
+      {tabs.map(({ id, label, Icon }) => {
         const isActive = id === activeId;
         return (
           <button
@@ -51,10 +54,16 @@ export function PageTabs({ tabs, activeId, onSelect, ariaLabel }: PageTabsProps)
           >
             <Icon className="w-3.5 h-3.5" />
             {label}
-            {badge && <span className="text-[10px] text-fg-muted">{badge}</span>}
           </button>
         );
       })}
     </div>
   );
+  if (!actions) return list;
+  return (
+    <div className="flex items-center gap-3 border-b border-border/60 pb-2">
+      {list}
+      <div className="flex flex-shrink-0 items-center gap-1.5">{actions}</div>
+    </div>
+  );
 }

client/src/components/SessionOverview.tsx

@@ -95,21 +95,21 @@ function StatTile({
 }) {
   const palette = {
     default: "border-surface-3 bg-surface-2 text-fg-secondary",
-    violet: "border-violet-500/20 bg-violet-500/5 text-violet-200",
+    violet: "border-violet-500/20 bg-violet-500/5 text-violet-800 dark:text-violet-200",
     emerald: "border-status-success/20 bg-status-success/5 text-status-success",
     amber: "border-status-warning/20 bg-status-warning/5 text-status-warning",
-    rose: "border-rose-500/20 bg-rose-500/5 text-rose-200",
-    cyan: "border-cyan-500/20 bg-cyan-500/5 text-cyan-200",
-    blue: "border-blue-600/20 bg-blue-600/5 text-blue-300",
+    rose: "border-rose-500/20 bg-rose-500/5 text-rose-800 dark:text-rose-200",
+    cyan: "border-cyan-500/20 bg-cyan-500/5 text-cyan-800 dark:text-cyan-200",
+    blue: "border-blue-600/20 bg-blue-600/5 text-blue-700 dark:text-blue-300",
   }[tone];
 
   const iconTone = {
     default: "text-fg-muted",
-    violet: "text-violet-400",
+    violet: "text-violet-700 dark:text-violet-400",
     emerald: "text-status-success",
     amber: "text-status-warning",
-    rose: "text-rose-400",
-    cyan: "text-cyan-400",
+    rose: "text-rose-700 dark:text-rose-400",
+    cyan: "text-cyan-700 dark:text-cyan-400",
     blue: "text-blue-500",
   }[tone];
 
@@ -359,7 +359,7 @@ export function SessionOverview({ session, agents }: SessionOverviewProps) {
         <div className="lg:col-span-2 rounded-lg border border-surface-3 bg-surface-2/60 p-3.5">
           <div className="flex items-center justify-between mb-3">
             <h3 className="text-xs font-semibold text-fg-secondary uppercase tracking-wider flex items-center gap-1.5">
-              <Wrench className="w-3.5 h-3.5 text-violet-400" />
+              <Wrench className="w-3.5 h-3.5 text-violet-700 dark:text-violet-400" />
               Top tools
             </h3>
             <span className="text-[10px] text-fg-muted font-mono">
@@ -418,7 +418,7 @@ export function SessionOverview({ session, agents }: SessionOverviewProps) {
               <>
                 <div className="flex items-center justify-between mb-3">
                   <h3 className="text-xs font-semibold text-fg-secondary uppercase tracking-wider flex items-center gap-1.5">
-                    <GitBranch className="w-3.5 h-3.5 text-cyan-400" />
+                    <GitBranch className="w-3.5 h-3.5 text-cyan-700 dark:text-cyan-400" />
                     Subagents
                   </h3>
                   <span className="text-[10px] text-fg-muted font-mono">{totalRuns} runs</span>
@@ -508,14 +508,14 @@ function TokenFlowBar({ tokens, total }: { tokens: SessionStats["tokens"]; total
       label: "Cache read",
       value: tokens.cache_read_tokens,
       cls: "bg-sky-500",
-      text: "text-sky-300",
+      text: "text-sky-700 dark:text-sky-300",
     },
     {
       key: "cache_write",
       label: "Cache write",
       value: tokens.cache_write_tokens,
       cls: "bg-violet-500",
-      text: "text-violet-300",
+      text: "text-violet-700 dark:text-violet-300",
     },
     {
       key: "input",
@@ -529,7 +529,7 @@ function TokenFlowBar({ tokens, total }: { tokens: SessionStats["tokens"]; total
       label: "Output",
       value: tokens.output_tokens,
       cls: "bg-orange-500",
-      text: "text-orange-300",
+      text: "text-orange-700 dark:text-orange-300",
     },
   ];
 

client/src/components/SessionToolBadge.tsx

@@ -0,0 +1,30 @@
+/**
+ * @file SessionToolBadge — names the AI coding CLI that produced a session
+ * when it is not Claude Code (`sessions.tool` = `codex`, `antigravity`, …, by
+ * its AI Tools label). Renders nothing for a Claude session, so the Sessions
+ * list and session header look as before for every Claude row.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useTranslation } from "react-i18next";
+import { useAiTools } from "../hooks/useAiTools";
+
+/** A chip with the tool's name, or nothing for `claude` / an unset tool. */
+export function SessionToolBadge({ tool }: { tool?: string | null }) {
+  if (!tool || tool === "claude") return null;
+  return <ToolChip tool={tool} />;
+}
+
+// Split out so the catalog hook only mounts for a non-Claude session.
+function ToolChip({ tool }: { tool: string }) {
+  const { t } = useTranslation("sessions");
+  const { label } = useAiTools();
+  return (
+    <span
+      className="inline-flex items-center text-[10px] font-semibold text-violet-700 dark:text-violet-300 bg-violet-500/10 border border-violet-500/25 px-1.5 py-0.5 rounded-full"
+      title={t("toolBadgeTitle", { tool: label(tool) })}
+    >
+      {label(tool)}
+    </span>
+  );
+}

client/src/components/Sidebar.tsx

@@ -54,7 +54,6 @@ import { useTranslation } from "react-i18next";
 import {
   LayoutDashboard,
   FolderOpen,
-  Activity,
   BarChart3,
   Workflow,
   Play,
@@ -72,6 +71,7 @@ import {
   ChevronUp,
   ChevronDown,
   Sun,
+  Monitor,
   Moon,
 } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
@@ -92,6 +92,13 @@ const NAV_KEYS = [
   { to: "/settings", icon: Settings, key: "nav:settings" },
 ] as const;
 
+// SmartGift wordmark, replacing the old text subtitle. Remote URLs: the logo is
+// owned by the brand, not vendored here — a machine with no network shows the
+// alt text instead.
+const BRAND_LOGO =
+  "https://smg-services.s3.ap-southeast-1.amazonaws.com/smartgift/assets/logo/logo-main.png";
+const BRAND_MARK = "https://smartgift.vn/favicon.ico";
+
 const STORAGE_KEY = "sidebar-collapsed";
 const STATS_STORAGE_KEY = "sidebar-connection-stats";
 const RECENT_EVENTS_CAP = 8;
@@ -171,7 +178,7 @@ interface SidebarProps {
 
 export function Sidebar({ wsConnected, collapsed, onToggle }: SidebarProps) {
   const { t, i18n } = useTranslation();
-  const { theme, setTheme, toggleTheme } = useTheme();
+  const { theme, mode, setMode, toggleTheme } = useTheme();
   // Track whether nav items are clipped by overflow so we can render
   // chevron affordances pointing toward the hidden items. Recomputed on
   // scroll, resize, and any structural change (e.g. collapse toggle).
@@ -353,15 +360,33 @@ export function Sidebar({ wsConnected, collapsed, onToggle }: SidebarProps) {
   };
 
   const updateAvailable = Boolean(updateStatus?.update_available);
+  // Four resting states, not two: a release is out, this build is ahead of the
+  // newest release (dev build), it matches the newest release, or no release
+  // could be read at all. Collapsing the middle two into "Up to date" is what
+  // made a checkout carrying unreleased commits look shipped.
   const checkTitle = checking
     ? t("nav:checkingForUpdates")
     : checkError
       ? t("nav:checkFailed")
-      : updateAvailable
-        ? t("nav:updateAvailable")
-        : updateStatus
-          ? t("nav:upToDate")
-          : t("nav:checkForUpdates");
+      : updateStatus?.installed_not_running
+        ? t("nav:installedNotRunning", {
+            version: updateStatus.installed_not_running.version ?? "?",
+          })
+        : updateAvailable
+          ? updateStatus?.latest_release
+            ? t("nav:releaseAvailable", { version: updateStatus.latest_release })
+            : t("nav:updateAvailable")
+          : updateStatus?.dev_build
+            ? t("nav:devBuild", { count: updateStatus.commits_ahead_of_release ?? 0 })
+            : // A plugin install has no commit count to fall back on: a release
+              // that could not be read is "unknown", never "up to date".
+              updateStatus?.install_kind === "plugin" &&
+                updateStatus.release_check &&
+                updateStatus.release_check !== "ok"
+              ? t("nav:releaseUnchecked")
+              : updateStatus
+                ? t("nav:upToDate")
+                : t("nav:checkForUpdates");
   const currentLanguage = normalizeLanguage(i18n.resolvedLanguage ?? i18n.language);
   const currentIndex = SUPPORTED_LANGUAGES.indexOf(currentLanguage);
   const nextLanguage = SUPPORTED_LANGUAGES[(currentIndex + 1) % SUPPORTED_LANGUAGES.length];
@@ -389,15 +414,23 @@ export function Sidebar({ wsConnected, collapsed, onToggle }: SidebarProps) {
     >
       {/* Brand */}
       <div className="px-3 py-4 border-b border-border flex-shrink-0">
-        <div className={`flex items-center ${collapsed ? "justify-center" : "gap-3 px-2"}`}>
-          <div className="w-8 h-8 rounded-lg bg-accent/20 flex items-center justify-center flex-shrink-0">
-            <Activity className="w-4 h-4 text-accent" />
-          </div>
-          {!collapsed && (
-            <div className="min-w-0">
-              <h1 className="text-sm font-semibold text-fg-primary truncate">{t("nav:brand")}</h1>
-              <p className="text-[11px] text-fg-muted">{t("nav:brandSub")}</p>
-            </div>
+        <div className="flex flex-col items-center justify-center">
+          {collapsed ? (
+            <img src={BRAND_MARK} alt={t("nav:brandSub")} className="w-8 h-8 flex-shrink-0" />
+          ) : (
+            <>
+              <img src={BRAND_LOGO} alt={t("nav:brandSub")} className="w-full h-auto px-2" />
+              {/* Wordmark under the logo: small caps + wide tracking so it reads
+                  as a caption to the logo rather than competing with it. The
+                  hairlines either side keep it centred on a narrow rail. */}
+              <div className="mt-3 flex w-full items-center gap-2 px-1">
+                <span className="h-px flex-1 bg-fg-muted/40" />
+                <span className="text-[11px] font-semibold uppercase tracking-[0.2em] text-fg-primary">
+                  {t("nav:brand")}
+                </span>
+                <span className="h-px flex-1 bg-fg-muted/40" />
+              </div>
+            </>
           )}
         </div>
       </div>
@@ -497,7 +530,9 @@ export function Sidebar({ wsConnected, collapsed, onToggle }: SidebarProps) {
                 <p className="px-1 text-[10px] font-semibold uppercase tracking-wider text-fg-muted">
                   {t("nav:language")}
                 </p>
-                <div className="mt-2 grid grid-cols-4 gap-1">
+                {/* One column per language: a wider grid squeezed each button
+                    below the width of its own label once Theme grew a third. */}
+                <div className="mt-2 grid grid-cols-2 gap-1">
                   {SUPPORTED_LANGUAGES.map((language) => {
                     const active = language === currentLanguage;
                     return (
@@ -507,7 +542,7 @@ export function Sidebar({ wsConnected, collapsed, onToggle }: SidebarProps) {
                         aria-pressed={active}
                         aria-label={t(`nav:languageNames.${language}`)}
                         title={t(`nav:languageNames.${language}`)}
-                        className={`rounded-md px-2 py-1.5 text-[11px] font-semibold transition-colors ${
+                        className={`rounded-md px-1 py-1.5 text-center text-[11px] font-semibold transition-colors ${
                           active
                             ? "bg-accent/20 text-accent border border-accent/30"
                             : "bg-surface-1 text-fg-secondary border border-border hover:bg-surface-3 hover:text-fg-primary"
@@ -523,13 +558,13 @@ export function Sidebar({ wsConnected, collapsed, onToggle }: SidebarProps) {
                 <p className="px-1 text-[10px] font-semibold uppercase tracking-wider text-fg-muted">
                   {t("nav:theme")}
                 </p>
-                <div className="mt-2 grid grid-cols-2 gap-1">
-                  {(["dark", "light"] as const).map((option) => {
-                    const active = option === theme;
+                <div className="mt-2 grid grid-cols-3 gap-1">
+                  {(["dark", "light", "system"] as const).map((option) => {
+                    const active = option === mode;
                     return (
                       <button
                         key={option}
-                        onClick={() => setTheme(option)}
+                        onClick={() => setMode(option)}
                         aria-pressed={active}
                         aria-label={t(`nav:themeNames.${option}`)}
                         title={t(`nav:themeNames.${option}`)}
@@ -541,8 +576,10 @@ export function Sidebar({ wsConnected, collapsed, onToggle }: SidebarProps) {
                       >
                         {option === "dark" ? (
                           <Moon className="w-3.5 h-3.5" />
-                        ) : (
+                        ) : option === "light" ? (
                           <Sun className="w-3.5 h-3.5" />
+                        ) : (
+                          <Monitor className="w-3.5 h-3.5" />
                         )}
                       </button>
                     );

client/src/components/StatusBadge.tsx

@@ -91,7 +91,7 @@ function ReasonChip({ reason }: { reason: AwaitingReason }) {
       className={`inline-flex items-center gap-1 rounded-full border px-1.5 text-[10px] font-medium leading-4 ${
         cfg.urgent
           ? "bg-status-warning/15 border-status-warning/25 text-status-warning"
-          : "bg-yellow-500/10 border-yellow-500/20 text-yellow-400/90"
+          : "bg-yellow-500/10 border-yellow-500/20 text-yellow-700/90 dark:text-yellow-400/90"
       }`}
     >
       <Icon className="w-2.5 h-2.5 flex-shrink-0" aria-hidden="true" />

client/src/components/Tip.tsx

@@ -4,6 +4,13 @@
  * by {@link StatCard} for raw metric values and anywhere a compact display needs
  * a full-precision expansion without cluttering the layout.
  *
+ * ## Look
+ * The bubble is {@link TOOLTIP_SURFACE} — the same surface the app-wide
+ * {@link GlobalTooltip} draws — so a raw-value tooltip and a control's tooltip
+ * are visibly one thing. It stays cursor-following (and not anchored like the
+ * global one) because it expands a NUMBER inside a line of text, where the
+ * anchor is a few characters wide and the cursor is the real subject.
+ *
  * ## Portal rendering
  * Tooltip content is portaled to `document.body` with `position: fixed` so
  * parent `overflow: hidden` cannot clip it. Placement flips left/up when the
@@ -56,6 +63,7 @@
 
 import { useState, useRef, useCallback } from "react";
 import { createPortal } from "react-dom";
+import { TOOLTIP_SURFACE } from "./Tooltip";
 
 /** Props for {@link Tip}. */
 interface TipProps {
@@ -135,11 +143,7 @@ export function Tip({ raw, children, maxWidth = 320, block = false }: TipProps)
       {children}
       {show &&
         createPortal(
-          <div
-            ref={tipRef}
-            style={tipStyle}
-            className="px-2.5 py-1.5 text-[11px] leading-relaxed font-mono text-fg-primary bg-[#12121f] border border-[#2a2a4a] rounded-lg shadow-xl pointer-events-none whitespace-pre-wrap break-words"
-          >
+          <div ref={tipRef} style={tipStyle} className={`${TOOLTIP_SURFACE} font-mono`}>
             {raw}
           </div>,
           document.body

client/src/components/Tooltip.tsx

@@ -0,0 +1,280 @@
+/**
+ * @file Tooltip.tsx
+ * @description The dashboard's tooltip look, and the one renderer that gives it
+ * to every control in the app.
+ *
+ * ## Why a global renderer instead of a wrapper component
+ * The UI already labels its icon-only controls with the native `title`
+ * attribute — over two hundred of them. A `<Tooltip>` wrapper would mean
+ * touching every one of those call sites to get a designed bubble, and the
+ * next `title=` someone writes would be back to the browser's grey box.
+ * {@link GlobalTooltip} instead listens once at the document: on hover or
+ * keyboard focus (`:focus-visible`, not the focus a click gives) it takes the element's `title`, suppresses the native tooltip
+ * by removing the attribute for as long as the bubble is up, and restores it
+ * on the way out. Nothing else in the app has to know it exists, and a control
+ * keeps its native tooltip (and its accessible name) when JS has not run.
+ * While the title is parked, a control with no other name (icon-only) carries
+ * it as a temporary `aria-label`, so focusing it never leaves it nameless; the
+ * bubble goes away with its control if that is removed from the page.
+ *
+ * ## The look
+ * Anchored to the CONTROL, not the cursor — a bubble that chases the mouse is
+ * hard to read and lands over the thing it describes. It flips above/below and
+ * clamps to the viewport, carries an arrow pointing at its anchor, fades in
+ * after a short delay so a cursor crossing a toolbar does not strobe, and is
+ * built from the theme's own tokens so it is legible in light mode too (the
+ * old bubble was a hardcoded near-black).
+ *
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+/** The shared bubble surface, so every tooltip in the app reads as one thing. */
+export const TOOLTIP_SURFACE =
+  "pointer-events-none z-[9999] max-w-xs rounded-lg border border-border bg-surface-2 px-2.5 py-1.5 " +
+  "text-[11px] leading-snug text-fg-primary shadow-lg shadow-black/20 " +
+  "whitespace-pre-wrap break-words";
+
+/** How long the pointer must rest on a control before its tooltip appears. */
+const SHOW_DELAY_MS = 350;
+/** Gap between the control and the bubble, and the minimum viewport margin. */
+const GAP = 8;
+
+/** Opt an element (or a subtree) out: `data-tip-off` keeps the native title.
+ *  `[data-tip]` matches the control whose title is parked, so moving between
+ *  its own children still resolves to it instead of re-opening the bubble. */
+const SELECTOR = "[title]:not([data-tip-off]), [data-tip]";
+
+type Anchored = { text: string; rect: DOMRect };
+type Placed = { left: number; top: number; arrow: number; above: boolean };
+
+/**
+ * Mount ONCE, near the router root. Every `title` in the app becomes a
+ * designed tooltip; nothing else has to change.
+ */
+export function GlobalTooltip() {
+  const [tip, setTip] = useState<Anchored | null>(null);
+  const [pos, setPos] = useState<Placed | null>(null);
+  const bubble = useRef<HTMLDivElement>(null);
+  // The element whose `title` is currently parked in `data-tip`, so it can be
+  // put back even if the pointer never leaves it (a route change, a re-render
+  // that unmounts it, Escape).
+  const parked = useRef<HTMLElement | null>(null);
+  const timer = useRef<number | undefined>(undefined);
+  // The element whose delay is running, so re-entering it does not restart it.
+  const pending = useRef<HTMLElement | null>(null);
+
+  const restore = useCallback(() => {
+    window.clearTimeout(timer.current);
+    pending.current = null;
+    const el = parked.current;
+    if (el) {
+      // Drop the instance shim `open` installed; the prototype method is back.
+      delete (el as { removeAttribute?: unknown }).removeAttribute;
+      const text = el.dataset.tip;
+      if (text !== undefined) {
+        // React re-set `title` while it was parked (a poll flipped the hint):
+        // that value is current, the parked copy is stale. React never
+        // re-applies an unchanged prop, so writing the old one back would win
+        // for good.
+        if (!el.hasAttribute("title")) el.setAttribute("title", text);
+        delete el.dataset.tip;
+      }
+      if (el.dataset.tipAria !== undefined) {
+        el.removeAttribute("aria-label");
+        delete el.dataset.tipAria;
+      }
+      parked.current = null;
+    }
+    setTip(null);
+    setPos(null);
+  }, []);
+
+  const open = useCallback(
+    (el: HTMLElement, delay: number) => {
+      const text = (el.getAttribute("title") || "").trim();
+      if (!text) return;
+      restore();
+      pending.current = el;
+      timer.current = window.setTimeout(() => {
+        pending.current = null;
+        // Re-read at fire time: the control may have been re-rendered, removed
+        // or had its title changed while the delay was running.
+        if (!el.isConnected) return;
+        const current = (el.getAttribute("title") || "").trim();
+        if (!current) return;
+        el.dataset.tip = current;
+        el.removeAttribute("title");
+        // React removing `title` while it is parked calls removeAttribute on an
+        // attribute that is already gone: no MutationRecord, nothing to see —
+        // and `restore` would write the stale text back for good. So, on THIS
+        // element and only while parked, that call is taken as React's intent:
+        // the parked copy is dropped and the bubble hides. (React DOM calls
+        // `node.removeAttribute`, the instance method; `restore` deletes the
+        // shim.) No global prototype is touched.
+        el.removeAttribute = (name: string) => {
+          if (name.toLowerCase() === "title" && el.dataset.tip !== undefined) {
+            delete el.dataset.tip;
+            restore();
+          }
+          Element.prototype.removeAttribute.call(el, name);
+        };
+        // The title was an icon-only control's ONLY name; keep it named.
+        if (
+          !el.hasAttribute("aria-label") &&
+          !el.hasAttribute("aria-labelledby") &&
+          !el.textContent?.trim()
+        ) {
+          el.setAttribute("aria-label", current);
+          el.dataset.tipAria = "";
+        }
+        parked.current = el;
+        setTip({ text: current, rect: el.getBoundingClientRect() });
+      }, delay);
+    },
+    [restore]
+  );
+
+  useEffect(() => {
+    const target = (e: Event) => {
+      const node = e.target;
+      return node instanceof Element ? (node.closest(SELECTOR) as HTMLElement | null) : null;
+    };
+    const onOver = (e: PointerEvent) => {
+      const el = target(e);
+      // Already showing or already counting down for this control: a pointer
+      // crossing its children must neither hide nor restart it.
+      if (!el || el === parked.current || el === pending.current) return;
+      open(el, SHOW_DELAY_MS);
+    };
+    const onOut = (e: PointerEvent) => {
+      // Moving between children of the same control must not flicker.
+      const el = target(e);
+      const to = e.relatedTarget;
+      if (el && to instanceof Node && el.contains(to)) return;
+      if (el || parked.current) restore();
+    };
+    // Keyboard users get the same tooltip, immediately — a focus ring that
+    // reveals nothing is the whole reason icon-only buttons are hard to learn.
+    // Only KEYBOARD focus, though: a click focuses too, and without the
+    // `:focus-visible` check it reopened the bubble the pointerdown just
+    // closed, with no delay. Hover keeps its own path.
+    const onFocus = (e: FocusEvent) => {
+      const el = target(e);
+      if (!el || el === parked.current) return;
+      if (!(e.target instanceof Element) || !e.target.matches(":focus-visible")) return;
+      open(el, 0);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") restore();
+    };
+
+    document.addEventListener("pointerover", onOver);
+    document.addEventListener("pointerout", onOut);
+    document.addEventListener("pointerdown", restore);
+    document.addEventListener("focusin", onFocus);
+    document.addEventListener("focusout", restore);
+    document.addEventListener("keydown", onKey);
+    // A bubble anchored to a rect is wrong the moment its anchor moves — but
+    // only a scroll of the document or of a box containing the anchor moves
+    // it. A log tailing in another panel must not close the bubble.
+    const onScroll = (e: Event) => {
+      const anchor = parked.current || pending.current;
+      const t = e.target;
+      if (!anchor || !(t instanceof Node) || t === document || t.contains(anchor)) restore();
+    };
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", restore);
+    window.addEventListener("blur", restore);
+    return () => {
+      document.removeEventListener("pointerover", onOver);
+      document.removeEventListener("pointerout", onOut);
+      document.removeEventListener("pointerdown", restore);
+      document.removeEventListener("focusin", onFocus);
+      document.removeEventListener("focusout", restore);
+      document.removeEventListener("keydown", onKey);
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", restore);
+      window.removeEventListener("blur", restore);
+      restore();
+    };
+  }, [open, restore]);
+
+  // A control unmounted under a still cursor fires no pointerout: without this
+  // its bubble stays up over whatever replaced it. The same goes for a title
+  // re-rendered under it — the bubble would keep saying the old text, so it
+  // hides and `restore` keeps the new attribute.
+  useEffect(() => {
+    if (!tip) return;
+    const watch = new MutationObserver((records) => {
+      const el = parked.current;
+      if (!el) return;
+      if (
+        !el.isConnected ||
+        records.some((r) => r.type === "attributes" && el.hasAttribute("title"))
+      )
+        restore();
+    });
+    watch.observe(document.body, { childList: true, subtree: true });
+    if (parked.current) watch.observe(parked.current, { attributeFilter: ["title"] });
+    return () => watch.disconnect();
+  }, [tip, restore]);
+
+  // Placed after the first paint, when the bubble's real size is known —
+  // measuring it is the only way to flip and clamp without guessing.
+  useEffect(() => {
+    if (!tip || !bubble.current) return;
+    const { width, height } = bubble.current.getBoundingClientRect();
+    const vw = document.documentElement.clientWidth;
+    const vh = window.innerHeight;
+    const centre = tip.rect.left + tip.rect.width / 2;
+
+    let left = centre - width / 2;
+    left = Math.min(Math.max(left, GAP), Math.max(GAP, vw - width - GAP));
+    // Below by default; above only when below would run off the screen AND
+    // above actually fits, so a control at the very bottom still gets a bubble.
+    const above = tip.rect.bottom + GAP + height > vh && tip.rect.top - height - GAP >= GAP;
+
+    setPos({
+      left,
+      top: above ? tip.rect.top - height - GAP : tip.rect.bottom + GAP,
+      // The arrow points at the control even after the bubble was clamped.
+      arrow: Math.min(Math.max(centre - left, 12), Math.max(12, width - 12)),
+      above,
+    });
+  }, [tip]);
+
+  if (!tip) return null;
+
+  return createPortal(
+    <div
+      ref={bubble}
+      role="tooltip"
+      data-testid="global-tooltip"
+      style={{
+        position: "fixed",
+        left: pos?.left ?? -9999,
+        top: pos?.top ?? -9999,
+        opacity: pos ? 1 : 0,
+        transition: "opacity 120ms ease-out",
+      }}
+      className={TOOLTIP_SURFACE}
+    >
+      {tip.text}
+      {/* Two borders only: a fully bordered diamond draws its other two
+          edges straight across the bubble it is attached to. */}
+      <span
+        aria-hidden
+        style={{ left: pos?.arrow ?? 0, [pos?.above ? "bottom" : "top"]: -4.5 }}
+        className={`absolute h-2 w-2 -translate-x-1/2 rotate-45 bg-surface-2 ${
+          pos?.above ? "border-b border-r" : "border-l border-t"
+        } border-border`}
+      />
+    </div>,
+    document.body
+  );
+}
+
+export default GlobalTooltip;

client/src/components/UpdateNotifier.tsx

@@ -1,11 +1,22 @@
 /**
  * @file UpdateNotifier.tsx
- * @description Modal surfaced when the dashboard's git checkout is behind its
- * remote tracking branch. Shows how many commits behind, the exact terminal
- * command to update with copy-to-clipboard, and — when the checkout is on a
- * fast-forwardable branch — an "Update now" button that calls
- * `POST /api/updates/apply` to pull, rebuild, and restart the server itself,
- * then polls until it's back and reloads the page.
+ * @description Modal surfaced when a newer RELEASE of the dashboard has been
+ * published (or, when no release can be read, when the checkout is behind its
+ * remote tracking branch). Shows the release version against the running one
+ * with a link to its notes, the exact terminal command with copy-to-clipboard,
+ * and — when the install is fast-forwardable — an "Update now" button that
+ * calls `POST /api/updates/apply` to move onto the release tag, rebuild, and
+ * restart the server itself, then polls until it's back and reloads the page.
+ *
+ * A `plugin_managed` install (running out of `~/.claude/plugins/cache/`) gets
+ * the same button, wired to a different mechanism: the server hands it to a
+ * detached chain (`claude plugin update` then `plugin-bootstrap.js --force`)
+ * which pulls the new cache directory, reinstalls the runtime and restarts the
+ * dashboard. It takes minutes rather than seconds, so the progress text differs
+ * — and the poll waits for the old server to actually go DOWN first, because it
+ * keeps answering while the chain installs. New skills/slash commands still
+ * need `/reload-plugins` in an already-open Claude Code session; nothing a
+ * background process can do for it.
  *
  * ## State sources
  * - Initial fetch via `api.updates.status()` on mount.
@@ -14,8 +25,9 @@
  * - Live refresh from WebSocket `update_status` events on {@link eventBus}.
  *
  * ## Dismissal persistence
- * Dismissals are keyed by `remote_sha` in `localStorage` so a new upstream
- * commit re-opens the prompt. Settings can reset dismissal via the
+ * Dismissals are keyed in `localStorage` by the release tag when there is one,
+ * else the upstream `remote_sha`, so a newer release re-opens the prompt while
+ * a dismissed one stays dismissed. Settings can reset dismissal via the
  * `dashboard:reset-update-dismissal` window event.
  *
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
@@ -66,21 +78,29 @@
 
 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Download, X, Copy, Check, RefreshCw, Zap } from "lucide-react";
+import { Download, X, Copy, Check, RefreshCw, Zap, ExternalLink } from "lucide-react";
 import { api } from "../lib/api";
 import { eventBus } from "../lib/eventBus";
 import type { UpdateStatusPayload, WSMessage } from "../lib/types";
 
-/** `localStorage` key storing the dismissed upstream SHA. */
+/** `localStorage` key storing the dismissed release tag (or upstream SHA). */
 const DISMISS_KEY = "agent-monitor-update-dismissed-sha";
 
 /** How often to silently re-check for updates in the background. */
 const AUTO_CHECK_INTERVAL_MS = 60 * 60 * 1000;
 
-/** Situations `POST /api/updates/apply` will actually act on — mirrors the
- *  server-side check in `server/lib/update-check.js`'s `applyUpdate`. */
+/** Situations `POST /api/updates/apply` will actually act on. Mirrors the
+ *  server: `release_available` / `tracking_canonical` / `fork_or_diverged_tracking`
+ *  go through a git fast-forward, and `plugin_managed` goes through the detached
+ *  `plugin-update.js` chain (`claude plugin update` then `plugin-bootstrap --force`),
+ *  which is why it belongs here even though `applyUpdate` itself refuses it. */
 function isAutoApplicable(situation: UpdateStatusPayload["situation"]): boolean {
-  return situation === "tracking_canonical" || situation === "fork_or_diverged_tracking";
+  return (
+    situation === "plugin_managed" ||
+    situation === "release_available" ||
+    situation === "tracking_canonical" ||
+    situation === "fork_or_diverged_tracking"
+  );
 }
 
 /** Narrow unknown WebSocket payloads to {@link UpdateStatusPayload}. */
@@ -88,7 +108,7 @@ function isUpdatePayload(x: unknown): x is UpdateStatusPayload {
   return typeof x === "object" && x !== null && "git_repo" in x && "update_available" in x;
 }
 
-/** Read the last dismissed upstream SHA from `localStorage`, or null. */
+/** Read the last dismissed release tag / upstream SHA from `localStorage`. */
 function loadDismissedSha(): string | null {
   try {
     return localStorage.getItem(DISMISS_KEY);
@@ -99,7 +119,7 @@ function loadDismissedSha(): string | null {
 
 /**
  * Git update availability modal — mounted once in {@link Layout}.
- * @returns `null` when no update is available or the current SHA was dismissed.
+ * @returns `null` when no update is available or this release was dismissed.
  */
 export function UpdateNotifier() {
   const { t } = useTranslation("updates");
@@ -161,19 +181,28 @@ export function UpdateNotifier() {
     return () => window.removeEventListener("dashboard:reset-update-dismissal", handler);
   }, []);
 
-  const show = Boolean(
-    status?.update_available && status.remote_sha && dismissedSha !== status.remote_sha
-  );
+  // Keyed by the release tag when there is one, so dismissing v1.5.0 doesn't
+  // also swallow v1.6.0 — and so the prompt survives the tag pointing at a
+  // commit the user already has. Falls back to the upstream SHA for the
+  // commit-count path (no release readable).
+  // A build installed from a terminal while this server kept running has no
+  // tag or sha when the forge is unreachable — key it by its directory.
+  const installed = status?.installed_not_running ?? null;
+  const dismissKey =
+    status?.latest_release ||
+    status?.remote_sha ||
+    (installed ? `installed:${installed.root}` : null);
+  const show = Boolean(status?.update_available && dismissKey && dismissedSha !== dismissKey);
 
   const dismiss = useCallback(() => {
-    if (restarting || !status?.remote_sha) return;
+    if (restarting || !dismissKey) return;
     try {
-      localStorage.setItem(DISMISS_KEY, status.remote_sha);
+      localStorage.setItem(DISMISS_KEY, dismissKey);
     } catch {
       /* ignore */
     }
-    setDismissedSha(status.remote_sha);
-  }, [restarting, status?.remote_sha]);
+    setDismissedSha(dismissKey);
+  }, [restarting, dismissKey]);
 
   // Escape to dismiss - standard modal affordance.
   useEffect(() => {
@@ -213,12 +242,27 @@ export function UpdateNotifier() {
   // Polls `status()` until the restarted server answers again, then reloads
   // so the tab picks up the new client bundle too — the server can't push
   // this over its own WebSocket since it's mid-restart.
-  const pollUntilBack = useCallback(() => {
+  /**
+   * @param requireDownFirst wait for the server to actually disappear before
+   *   treating a success as "it's back". The git path rebuilds and restarts
+   *   within seconds, but the plugin chain pulls a new cache directory and
+   *   reinstalls dependencies first — the OLD server stays up for that whole
+   *   stretch, so polling naively would get a 200 from the process we are
+   *   waiting to replace and reload onto the same old bundle.
+   */
+  const pollUntilBack = useCallback((requireDownFirst = false) => {
+    let sawDown = !requireDownFirst;
     const attempt = () => {
       api.updates
         .status()
-        .then(() => window.location.reload())
-        .catch(() => setTimeout(attempt, 1500));
+        .then(() => {
+          if (sawDown) window.location.reload();
+          else setTimeout(attempt, 1500);
+        })
+        .catch(() => {
+          sawDown = true;
+          setTimeout(attempt, 1500);
+        });
     };
     setTimeout(attempt, 1500);
   }, []);
@@ -232,11 +276,17 @@ export function UpdateNotifier() {
       if (result.applied) {
         setApplying(false);
         setRestarting(true);
-        pollUntilBack();
+        // mode "plugin": the old server lingers while the chain installs, so
+        // only treat a reachable server as "back" after it has gone away once.
+        pollUntilBack(result.mode === "plugin");
         return;
       }
       setError(
-        result.reason === "not_fast_forwardable" ? t("reasonNotFastForwardable") : t("applyError")
+        result.reason === "plugin_managed"
+          ? t("reasonPluginManaged")
+          : result.reason === "not_fast_forwardable"
+            ? t("reasonNotFastForwardable")
+            : t("applyError")
       );
     } catch (e) {
       setError(e instanceof Error ? e.message : t("applyError"));
@@ -249,6 +299,8 @@ export function UpdateNotifier() {
 
   const refLabel = status.remote_ref || "origin";
   const behind = status.commits_behind ?? 0;
+  const release = status.latest_release || null;
+  const pluginManaged = status.situation === "plugin_managed";
 
   return (
     <div
@@ -260,7 +312,9 @@ export function UpdateNotifier() {
         if (e.target === e.currentTarget) dismiss();
       }}
     >
-      <div className="w-full max-w-lg card shadow-2xl animate-slide-up overflow-hidden">
+      {/* max-w-2xl, not lg: the footer carries up to four buttons and the
+          longest label is a whole sentence ("restarting the dashboard…"). */}
+      <div className="w-full max-w-2xl card shadow-2xl animate-slide-up overflow-hidden">
         {/* Header */}
         <div className="flex items-start justify-between gap-3 px-5 py-4 border-b border-border">
           <div className="flex items-center gap-3 min-w-0">
@@ -272,10 +326,18 @@ export function UpdateNotifier() {
                 id="update-notifier-title"
                 className="text-sm font-semibold text-fg-primary truncate"
               >
-                {t("title")}
+                {installed
+                  ? t("installedTitle", { version: installed.version ?? "?" })
+                  : release
+                    ? t("releaseTitle", { version: release })
+                    : t("title")}
               </h2>
               <p className="text-[11px] text-fg-muted mt-0.5 font-mono truncate">
-                {t("commitsBehind", { count: behind, ref: refLabel })}
+                {/* Never print a commit count on a shallow clone — the number
+                    is a graft artefact, not a distance. */}
+                {(release || installed) && !status.shallow_clone && status.local_version
+                  ? t("releaseSubtitle", { current: status.local_version })
+                  : t("commitsBehind", { count: behind, ref: refLabel })}
               </p>
             </div>
           </div>
@@ -291,7 +353,30 @@ export function UpdateNotifier() {
 
         {/* Body */}
         <div className="px-5 py-4 space-y-3">
-          <p className="text-sm text-fg-secondary leading-relaxed">{t("lead")}</p>
+          <p className="text-sm text-fg-secondary leading-relaxed">
+            {pluginManaged ? t("pluginAutoNote") : release ? t("releaseLead") : t("lead")}
+          </p>
+
+          {status.latest_release_url ? (
+            <a
+              href={status.latest_release_url}
+              target="_blank"
+              rel="noreferrer noopener"
+              className="inline-flex items-center gap-1.5 text-xs text-accent hover:underline"
+            >
+              <ExternalLink className="w-3.5 h-3.5" aria-hidden />
+              {t("viewRelease")}
+              {status.latest_release_name ? ` — ${status.latest_release_name}` : null}
+            </a>
+          ) : null}
+
+          {/* Release lookup failed and detection fell back to commit counting:
+              say so, so "up to date" is never read as "release checked". */}
+          {status.release_check && status.release_check !== "ok" ? (
+            <div className="text-xs text-fg-secondary bg-surface-2 border border-border rounded-lg px-3 py-2">
+              {t("releaseUnavailable", { reason: status.release_check })}
+            </div>
+          ) : null}
 
           {status.fetch_error ? (
             <div className="text-xs text-status-warning/90 bg-status-warning/5 border border-status-warning/20 rounded-lg px-3 py-2">
@@ -299,7 +384,7 @@ export function UpdateNotifier() {
             </div>
           ) : null}
 
-          {!status.git_repo ? (
+          {!status.git_repo && status.install_kind !== "plugin" ? (
             <div className="text-xs text-fg-secondary bg-surface-2 border border-border rounded-lg px-3 py-2">
               {t("notGit")}
             </div>
@@ -323,7 +408,8 @@ export function UpdateNotifier() {
           {/* The restart hint only applies when the printed command actually
            * rewrites the working tree. Feature-branch / detached-HEAD commands
            * are fetch-only - restarting the dashboard would change nothing. */}
-          {status.situation === "tracking_canonical" ||
+          {status.situation === "release_available" ||
+          status.situation === "tracking_canonical" ||
           status.situation === "fork_or_diverged_tracking" ? (
             <p className="text-[11px] text-fg-muted leading-relaxed">{t("restartNote")}</p>
           ) : null}
@@ -331,7 +417,22 @@ export function UpdateNotifier() {
           {restarting ? (
             <div className="text-xs text-accent bg-accent-muted border border-accent/30 rounded-lg px-3 py-2 flex items-center gap-2">
               <RefreshCw className="w-3.5 h-3.5 animate-spin flex-shrink-0" aria-hidden />
-              {t("restarting")}
+              {/* The plugin chain pulls a new cache directory and reinstalls
+                  dependencies before it restarts, so it takes minutes, not
+                  seconds — saying "restarting" there would look hung. */}
+              {pluginManaged ? t("pluginUpdating") : t("restarting")}
+            </div>
+          ) : null}
+
+          {/* A previous chain that failed: the only place the user would ever
+              learn why, since the server it would have reported from is the one
+              that never came back. */}
+          {status.last_plugin_update && status.last_plugin_update.ok === false ? (
+            <div className="text-xs text-status-danger bg-status-danger/5 border border-status-danger/20 rounded-lg px-3 py-2 leading-relaxed">
+              {t("lastPluginUpdateFailed", {
+                step: status.last_plugin_update.step,
+                error: status.last_plugin_update.error || "",
+              })}
             </div>
           ) : null}
 
@@ -343,7 +444,10 @@ export function UpdateNotifier() {
         </div>
 
         {/* Footer */}
-        <div className="flex items-center justify-end gap-2 px-5 py-3 border-t border-border bg-surface-2/40">
+        {/* `whitespace-nowrap` inherits, so one class keeps every label on its
+            own single line; `flex-wrap` then breaks the ROW instead of the
+            words if a translation still outgrows the modal. */}
+        <div className="flex flex-wrap items-center justify-end gap-2 whitespace-nowrap px-5 py-3 border-t border-border bg-surface-2/40">
           <button
             type="button"
             onClick={checkNow}
@@ -384,7 +488,10 @@ export function UpdateNotifier() {
               ) : (
                 <Zap className="w-4 h-4" aria-hidden />
               )}
-              {applying ? t("updating") : restarting ? t("restarting") : t("updateNow")}
+              {/* `restartingShort`, not `restarting`: the full sentence is
+                  already in the banner above, and a whole sentence on a button
+                  is what forced this footer onto two lines. */}
+              {applying ? t("updating") : restarting ? t("restartingShort") : t("updateNow")}
             </button>
           ) : null}
         </div>

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

@@ -0,0 +1,75 @@
+/**
+ * @file MarkdownPreview.test.tsx
+ * @description The markdown preview: GFM renders (headings, tables, task
+ * lists), raw HTML stays text, links open in a new tab, frontmatter is a
+ * code block; and the config FileViewer offers Raw / Preview only for a
+ * markdown file.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { MarkdownPreview, isMarkdown } from "../MarkdownPreview";
+import { FileViewer } from "../config/FileViewer";
+
+describe("MarkdownPreview", () => {
+  it("renders GFM: headings, tables and task lists", () => {
+    render(
+      <MarkdownPreview
+        text={"# Title\n\n| a | b |\n|---|---|\n| 1 | 2 |\n\n- [x] done\n- [ ] todo\n"}
+      />
+    );
+    expect(screen.getByRole("heading", { level: 1, name: "Title" })).toBeInTheDocument();
+    expect(screen.getByRole("table")).toBeInTheDocument();
+    expect(screen.getAllByRole("checkbox")).toHaveLength(2);
+  });
+
+  it("never runs raw HTML and opens links in a new tab", () => {
+    const { container } = render(
+      <MarkdownPreview
+        text={'<script>alert(1)</script><img src=x onerror="alert(1)">\n\n[x](https://a.example)'}
+      />
+    );
+    expect(container.querySelector("script")).toBeNull();
+    expect(container.querySelector("img")).toBeNull();
+    const link = screen.getByRole("link", { name: "x" });
+    expect(link).toHaveAttribute("target", "_blank");
+    expect(link).toHaveAttribute("rel", "noreferrer noopener");
+  });
+
+  it("shows frontmatter as a block, not as a heading", () => {
+    const { container } = render(
+      <MarkdownPreview text={"---\nname: demo\ndescription: d\n---\n\nBody text\n"} />
+    );
+    expect(container.querySelector(".md-frontmatter")).toHaveTextContent("name: demo");
+    expect(screen.queryByRole("heading")).toBeNull();
+    expect(screen.getByText("Body text")).toBeInTheDocument();
+  });
+
+  it("knows a markdown path", () => {
+    expect(isMarkdown("/a/SKILL.md")).toBe(true);
+    expect(isMarkdown("README.markdown")).toBe(true);
+    expect(isMarkdown("config.toml")).toBe(false);
+    expect(isMarkdown(null)).toBe(false);
+  });
+});
+
+describe("FileViewer — markdown preview", () => {
+  const data = { text: "# Hello\n", truncated: false } as never;
+
+  it("switches a markdown file between raw and preview", async () => {
+    render(<FileViewer state={{ path: "/x/CLAUDE.md", data, error: null }} onClose={vi.fn()} />);
+    expect(screen.queryByTestId("markdown-preview")).toBeNull();
+    expect(screen.getByText("# Hello")).toBeInTheDocument();
+    await userEvent.click(screen.getByRole("button", { name: "Preview" }));
+    expect(screen.getByRole("heading", { name: "Hello" })).toBeInTheDocument();
+    await userEvent.click(screen.getByRole("button", { name: "Raw" }));
+    expect(screen.queryByTestId("markdown-preview")).toBeNull();
+  });
+
+  it("offers no preview for another file type", () => {
+    render(<FileViewer state={{ path: "/x/config.toml", data, error: null }} onClose={vi.fn()} />);
+    expect(screen.queryByRole("button", { name: "Preview" })).toBeNull();
+  });
+});

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

@@ -0,0 +1,29 @@
+/**
+ * @file SessionToolBadge.test.tsx
+ * @description The session tool chip: nothing for a Claude Code session (so
+ * every hook row renders as before), the tool's name for a Codex one.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { SessionToolBadge } from "../SessionToolBadge";
+
+vi.mock("../../lib/api", () => ({ api: { aiTools: { list: () => new Promise(() => {}) } } }));
+
+describe("SessionToolBadge", () => {
+  it("renders nothing for a Claude or unset tool", () => {
+    const { container } = render(
+      <>
+        <SessionToolBadge tool="claude" />
+        <SessionToolBadge tool={undefined} />
+      </>
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("names a Codex session's tool", () => {
+    render(<SessionToolBadge tool="codex" />);
+    expect(screen.getByText("Codex")).toHaveAttribute("title", "Recorded by Codex");
+  });
+});

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

@@ -5,10 +5,11 @@
  */
 
 import { describe, it, expect } from "vitest";
-import { render, screen, waitFor } from "@testing-library/react";
+import { act, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { MemoryRouter } from "react-router-dom";
 import { Sidebar } from "../Sidebar";
+import { eventBus } from "../../lib/eventBus";
 
 function renderSidebar(wsConnected: boolean, collapsed = false) {
   return render(
@@ -19,14 +20,19 @@ function renderSidebar(wsConnected: boolean, collapsed = false) {
 }
 
 describe("Sidebar", () => {
-  it("should render the brand name", () => {
+  it("should render the brand logo in place of the text subtitle", () => {
     renderSidebar(true);
-    expect(screen.getByText("Agent Dashboard")).toBeInTheDocument();
+    // One wordmark in both themes — no light/dark variant.
+    expect(screen.getByAltText("SmartGift Solution")).toHaveAttribute(
+      "src",
+      expect.stringContaining("logo-main.png")
+    );
   });
 
-  it("should render the subtitle", () => {
-    renderSidebar(true);
-    expect(screen.getByText("Claude Code Monitor")).toBeInTheDocument();
+  it("should render the favicon mark when collapsed", () => {
+    renderSidebar(true, true);
+    const mark = screen.getByAltText("SmartGift Solution");
+    expect(mark).toHaveAttribute("src", "https://smartgift.vn/favicon.ico");
   });
 
   it("should render all navigation links", () => {
@@ -98,4 +104,44 @@ describe("Sidebar", () => {
       expect(screen.getByText("VI")).toBeInTheDocument();
     });
   });
+
+  describe("update status line", () => {
+    const plugin = {
+      git_repo: false,
+      install_kind: "plugin",
+      situation: "plugin_managed",
+      local_version: "1.8.10",
+    };
+    const publish = (data: object) =>
+      act(() => eventBus.publish({ type: "update_status", data } as never));
+
+    it("does not claim up to date when a plugin install could not read the release", () => {
+      renderSidebar(true);
+      publish({ ...plugin, update_available: false, release_check: "unreachable" });
+      expect(screen.queryByText("Up to date")).toBeNull();
+      expect(screen.getByText("Could not check for updates")).toBeInTheDocument();
+    });
+
+    it("names a build installed beside the running one", () => {
+      renderSidebar(true);
+      publish({
+        ...plugin,
+        update_available: true,
+        release_check: "unreachable",
+        installed_not_running: { root: "/x", version: "1.8.12" },
+      });
+      expect(screen.getByText("1.8.12 installed, not running")).toBeInTheDocument();
+    });
+
+    it("still says up to date when the release was read and matches", () => {
+      renderSidebar(true);
+      publish({
+        ...plugin,
+        update_available: false,
+        release_check: "ok",
+        latest_release: "v1.8.10",
+      });
+      expect(screen.getByText("Up to date")).toBeInTheDocument();
+    });
+  });
 });

client/src/components/__tests__/Sidebar.theme.test.tsx

@@ -0,0 +1,59 @@
+/**
+ * @file Sidebar.theme.test.tsx
+ * @description Tests for the Sidebar's theme controls: the expanded panel's Dark / Light / System buttons and the collapsed one-click toggle, both writing through useTheme.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+import { Sidebar } from "../Sidebar";
+
+function renderSidebar(collapsed = false) {
+  return render(
+    <MemoryRouter>
+      <Sidebar wsConnected collapsed={collapsed} onToggle={() => {}} />
+    </MemoryRouter>
+  );
+}
+
+describe("Sidebar theme controls", () => {
+  beforeEach(() => {
+    localStorage.clear();
+    document.documentElement.classList.remove("dark");
+  });
+
+  it("expanded panel offers Dark, Light and System with Dark pressed by default", () => {
+    renderSidebar();
+    expect(screen.getByRole("button", { name: "Dark" })).toHaveAttribute("aria-pressed", "true");
+    expect(screen.getByRole("button", { name: "Light" })).toHaveAttribute("aria-pressed", "false");
+    expect(screen.getByRole("button", { name: "System" })).toHaveAttribute("aria-pressed", "false");
+  });
+
+  it("clicking System sets the mode and presses only System", async () => {
+    const user = userEvent.setup();
+    renderSidebar();
+    await user.click(screen.getByRole("button", { name: "System" }));
+    expect(localStorage.getItem("theme")).toBe("system");
+    expect(screen.getByRole("button", { name: "System" })).toHaveAttribute("aria-pressed", "true");
+    expect(screen.getByRole("button", { name: "Dark" })).toHaveAttribute("aria-pressed", "false");
+  });
+
+  it("clicking Light applies light mode to <html>", async () => {
+    const user = userEvent.setup();
+    renderSidebar();
+    await user.click(screen.getByRole("button", { name: "Light" }));
+    expect(localStorage.getItem("theme")).toBe("light");
+    expect(document.documentElement.classList.contains("dark")).toBe(false);
+  });
+
+  it("collapsed toggle flips to the opposite of the resolved mode", async () => {
+    const user = userEvent.setup();
+    localStorage.setItem("theme", "light");
+    renderSidebar(true);
+    await user.click(screen.getByRole("button", { name: "Switch to Dark" }));
+    expect(localStorage.getItem("theme")).toBe("dark");
+    expect(screen.getByRole("button", { name: "Switch to Light" })).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,288 @@
+/**
+ * @file Tooltip.test.tsx
+ * @description Pins the app-wide tooltip renderer: a control's native `title`
+ * becomes the designed bubble on hover and on keyboard focus, the native
+ * tooltip is suppressed only while the bubble is up and the attribute is put
+ * back afterwards (it is the control's accessible name), and `data-tip-off`
+ * opts out.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { render, screen, fireEvent, act } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { GlobalTooltip } from "../Tooltip";
+
+function setup(extra?: React.ReactNode) {
+  return render(
+    <>
+      <GlobalTooltip />
+      <button title="Refresh the working copy">refresh</button>
+      {extra}
+    </>
+  );
+}
+
+const hover = (el: Element) => fireEvent.pointerOver(el, { bubbles: true });
+const unhover = (el: Element) => fireEvent.pointerOut(el, { bubbles: true });
+// jsdom's :focus-visible is a heuristic over the previous events and leaks
+// between tests, so the tests say which kind of focus they mean: a spy answers
+// `:focus-visible` from this flag and passes every other selector through.
+let keyboardFocus = false;
+const realMatches = Element.prototype.matches;
+beforeEach(() => {
+  keyboardFocus = false;
+  vi.spyOn(Element.prototype, "matches").mockImplementation(function (this: Element, sel) {
+    return sel === ":focus-visible"
+      ? keyboardFocus && document.activeElement === this
+      : realMatches.call(this, sel);
+  });
+});
+afterEach(() => vi.restoreAllMocks());
+const tabTo = (el: HTMLElement) => {
+  keyboardFocus = true;
+  act(() => el.focus());
+};
+
+beforeEach(() => vi.useFakeTimers({ shouldAdvanceTime: true }));
+afterEach(() => vi.useRealTimers());
+
+const settle = async () => {
+  await act(async () => {
+    vi.advanceTimersByTime(400);
+  });
+};
+
+describe("GlobalTooltip", () => {
+  it("shows the bubble after a delay and takes the native title while it is up", async () => {
+    setup();
+    const button = screen.getByRole("button", { name: "refresh" });
+
+    hover(button);
+    // Nothing yet: a cursor crossing a toolbar must not strobe every control.
+    expect(screen.queryByTestId("global-tooltip")).toBeNull();
+
+    await settle();
+    expect(screen.getByTestId("global-tooltip")).toHaveTextContent("Refresh the working copy");
+    expect(button).not.toHaveAttribute("title");
+  });
+
+  it("hides and gives the title back on the way out", async () => {
+    setup();
+    const button = screen.getByRole("button", { name: "refresh" });
+    hover(button);
+    await settle();
+
+    unhover(button);
+    expect(screen.queryByTestId("global-tooltip")).toBeNull();
+    expect(button).toHaveAttribute("title", "Refresh the working copy");
+  });
+
+  it("opens immediately on keyboard focus and closes on Escape", async () => {
+    setup();
+    const button = screen.getByRole("button", { name: "refresh" });
+
+    tabTo(button);
+    await act(async () => {
+      vi.advanceTimersByTime(0);
+    });
+    expect(screen.getByTestId("global-tooltip")).toBeInTheDocument();
+
+    fireEvent.keyDown(document, { key: "Escape" });
+    expect(screen.queryByTestId("global-tooltip")).toBeNull();
+    expect(button).toHaveAttribute("title", "Refresh the working copy");
+  });
+
+  it("leaves a data-tip-off control on the browser's own tooltip", async () => {
+    setup(
+      <button title="Raw value" data-tip-off>
+        opted out
+      </button>
+    );
+    const opted = screen.getByRole("button", { name: "opted out" });
+
+    hover(opted);
+    await settle();
+    expect(screen.queryByTestId("global-tooltip")).toBeNull();
+    expect(opted).toHaveAttribute("title", "Raw value");
+  });
+
+  it("reads the title through a child element, and ignores an empty one", async () => {
+    setup(
+      <button title="">
+        <span data-testid="blank-child">blank</span>
+      </button>
+    );
+
+    hover(screen.getByTestId("blank-child"));
+    await settle();
+    expect(screen.queryByTestId("global-tooltip")).toBeNull();
+
+    const button = screen.getByRole("button", { name: "refresh" });
+    button.innerHTML = "<span data-testid='deep'>refresh</span>";
+    hover(screen.getByTestId("deep"));
+    await settle();
+    expect(screen.getByTestId("global-tooltip")).toHaveTextContent("Refresh the working copy");
+  });
+  it("keeps an icon-only control's accessible name while its title is parked", async () => {
+    setup(
+      <button title="Stage this file">
+        <svg aria-hidden="true" />
+      </button>
+    );
+    const icon = screen.getByRole("button", { name: "Stage this file" });
+    tabTo(icon);
+    await act(async () => {
+      vi.advanceTimersByTime(0);
+    });
+    expect(screen.getByTestId("global-tooltip")).toBeInTheDocument();
+    expect(icon).not.toHaveAttribute("title");
+    expect(screen.getByRole("button", { name: "Stage this file" })).toBe(icon);
+
+    fireEvent.keyDown(document, { key: "Escape" });
+    // Put back exactly as found: no aria-label left behind.
+    expect(icon).toHaveAttribute("title", "Stage this file");
+    expect(icon).not.toHaveAttribute("aria-label");
+  });
+
+  it("does not flicker while the pointer crosses the control's own children", async () => {
+    setup(
+      <button title="Two parts">
+        <span data-testid="part-a">a</span>
+        <span data-testid="part-b">b</span>
+      </button>
+    );
+    const a = screen.getByTestId("part-a");
+    const b = screen.getByTestId("part-b");
+    hover(a);
+    await settle();
+    expect(screen.getByTestId("global-tooltip")).toHaveTextContent("Two parts");
+
+    fireEvent.pointerOut(a, { bubbles: true, relatedTarget: b });
+    fireEvent.pointerOver(b, { bubbles: true, relatedTarget: a });
+    // Still up, with no fresh delay.
+    expect(screen.getByTestId("global-tooltip")).toHaveTextContent("Two parts");
+  });
+
+  it("hides when its control is removed from the page", async () => {
+    const { rerender } = render(
+      <>
+        <GlobalTooltip />
+        <button title="Going away">x</button>
+      </>
+    );
+    hover(screen.getByRole("button", { name: "x" }));
+    await settle();
+    expect(screen.getByTestId("global-tooltip")).toBeInTheDocument();
+
+    rerender(
+      <>
+        <GlobalTooltip />
+      </>
+    );
+    await settle();
+    expect(screen.queryByTestId("global-tooltip")).toBeNull();
+  });
+
+  it("keeps a title React changed while the bubble was up, instead of writing the stale one back", async () => {
+    const { rerender } = render(
+      <>
+        <GlobalTooltip />
+        <button title="Pull 2 commits">pull</button>
+      </>
+    );
+    const button = screen.getByRole("button", { name: "pull" });
+    hover(button);
+    await settle();
+    expect(screen.getByTestId("global-tooltip")).toHaveTextContent("Pull 2 commits");
+
+    // A poll flips the hint while the pointer rests on the control.
+    rerender(
+      <>
+        <GlobalTooltip />
+        <button title="Up to date">pull</button>
+      </>
+    );
+    await settle();
+    // The bubble must not keep advertising the old text.
+    expect(screen.queryByText("Pull 2 commits")).toBeNull();
+
+    unhover(button);
+    expect(button).toHaveAttribute("title", "Up to date");
+  });
+
+  it("leaves no title behind when React removed it while the bubble was up", async () => {
+    const { rerender } = render(
+      <>
+        <GlobalTooltip />
+        <button title="Pull 2 commits">pull</button>
+      </>
+    );
+    const button = screen.getByRole("button", { name: "pull" });
+    hover(button);
+    await settle();
+    expect(screen.getByTestId("global-tooltip")).toHaveTextContent("Pull 2 commits");
+
+    // React "removes" an attribute that is already parked: no MutationRecord.
+    rerender(
+      <>
+        <GlobalTooltip />
+        <button>pull</button>
+      </>
+    );
+    await settle();
+    unhover(button);
+    expect(button).not.toHaveAttribute("title");
+    expect(button).not.toHaveAttribute("data-tip");
+    expect(screen.queryByTestId("global-tooltip")).toBeNull();
+  });
+
+  it("does not open on the focus a mouse click gives, only on keyboard focus", async () => {
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    setup(<button title="Second control">second</button>);
+    // A click is pointer focus: :focus-visible does not match.
+    const button = screen.getByRole("button", { name: "refresh" });
+
+    await user.click(button);
+    await act(async () => {
+      vi.advanceTimersByTime(0);
+    });
+    expect(screen.queryByTestId("global-tooltip")).toBeNull();
+
+    tabTo(screen.getByRole("button", { name: "second" }));
+    await act(async () => {
+      vi.advanceTimersByTime(0);
+    });
+    expect(screen.getByTestId("global-tooltip")).toHaveTextContent("Second control");
+  });
+
+  it("stays up when an unrelated panel scrolls, and hides when the anchor's own scroller moves", async () => {
+    render(
+      <>
+        <GlobalTooltip />
+        <div data-testid="scroller">
+          <button title="Inside the scroller">inside</button>
+        </div>
+        <div data-testid="elsewhere" />
+      </>
+    );
+    const button = screen.getByRole("button", { name: "inside" });
+    hover(button);
+    await settle();
+
+    fireEvent.scroll(screen.getByTestId("elsewhere"));
+    expect(screen.getByTestId("global-tooltip")).toHaveTextContent("Inside the scroller");
+
+    fireEvent.scroll(screen.getByTestId("scroller"));
+    expect(screen.queryByTestId("global-tooltip")).toBeNull();
+    expect(button).toHaveAttribute("title", "Inside the scroller");
+  });
+
+  it("hides when the document itself scrolls", async () => {
+    setup();
+    hover(screen.getByRole("button", { name: "refresh" }));
+    await settle();
+    fireEvent.scroll(document);
+    expect(screen.queryByTestId("global-tooltip")).toBeNull();
+  });
+});

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

@@ -90,6 +90,122 @@ describe("UpdateNotifier — Update now", () => {
     expect(screen.queryByText(i18n.t("updates:updateNow"))).not.toBeInTheDocument();
   });
 
+  it("offers Update now for a plugin-cache install, noting the session still needs a reload", async () => {
+    // The button works here via the detached `claude plugin update` chain — but
+    // it moves only the dashboard server, so the note about /reload-plugins is
+    // part of the promise, not decoration.
+    statusMock.mockResolvedValue({
+      ...BASE_STATUS,
+      situation: "plugin_managed",
+      install_kind: "plugin",
+      plugin_marketplace: "sg",
+      plugin_name: "agenthub",
+      shallow_clone: true,
+      commits_behind: 0,
+      local_version: "1.5.0",
+      release_check: "ok",
+      latest_release: "v1.6.0",
+      manual_command: "claude plugin marketplace update sg && claude plugin update agenthub@sg -y",
+    });
+    render(<UpdateNotifier />);
+
+    await screen.findByText(i18n.t("updates:releaseTitle", { version: "v1.6.0" }));
+    expect(screen.getByText(i18n.t("updates:updateNow"))).toBeInTheDocument();
+    expect(screen.getByText(i18n.t("updates:pluginAutoNote"))).toBeInTheDocument();
+  });
+
+  it("still offers the button when a plugin install has no git clone at all", async () => {
+    // The 1.5.1 bug: an archive-sourced marketplace entry leaves no .git, so
+    // git_repo is legitimately false. Gating the UI on that reported "not a git
+    // clone; check manually" for an install the dashboard can check AND update.
+    statusMock.mockResolvedValue({
+      ...BASE_STATUS,
+      git_repo: false,
+      situation: "plugin_managed",
+      install_kind: "plugin",
+      plugin_marketplace: "sg",
+      plugin_name: "agenthub",
+      commits_behind: 0,
+      local_version: "1.5.1",
+      release_check: "ok",
+      latest_release: "v1.6.0",
+    });
+    render(<UpdateNotifier />);
+
+    await screen.findByText(i18n.t("updates:releaseTitle", { version: "v1.6.0" }));
+    expect(screen.getByText(i18n.t("updates:updateNow"))).toBeInTheDocument();
+    expect(screen.queryByText(i18n.t("updates:notGit"))).not.toBeInTheDocument();
+  });
+
+  it("offers Update now for a build installed from a terminal, even with no release read", async () => {
+    // `claude plugin update` started nothing and the forge was unreachable:
+    // no release tag and no sha to key the modal on, yet a newer build sits
+    // on disk. That used to read as "up to date" with no way to switch.
+    statusMock.mockResolvedValue({
+      ...BASE_STATUS,
+      git_repo: false,
+      situation: "plugin_managed",
+      install_kind: "plugin",
+      plugin_marketplace: "sg",
+      plugin_name: "agenthub",
+      remote_sha: null,
+      commits_behind: 0,
+      local_version: "1.8.10",
+      release_check: "unreachable",
+      latest_release: null,
+      installed_not_running: { root: "/cache/sg/agenthub/new", version: "1.8.12" },
+    });
+    render(<UpdateNotifier />);
+
+    await screen.findByText(i18n.t("updates:installedTitle", { version: "1.8.12" }));
+    expect(
+      screen.getByText(i18n.t("updates:releaseSubtitle", { current: "1.8.10" }))
+    ).toBeInTheDocument();
+    expect(screen.getByText(i18n.t("updates:updateNow"))).toBeInTheDocument();
+  });
+
+  it("surfaces a previous plugin chain's failure so a dead update isn't silent", async () => {
+    statusMock.mockResolvedValue({
+      ...BASE_STATUS,
+      situation: "plugin_managed",
+      install_kind: "plugin",
+      plugin_marketplace: "sg",
+      plugin_name: "agenthub",
+      shallow_clone: true,
+      commits_behind: 0,
+      local_version: "1.5.0",
+      release_check: "ok",
+      latest_release: "v1.6.0",
+      last_plugin_update: {
+        ok: false,
+        step: "resolve_claude",
+        error: "the `claude` CLI is not on this server's PATH",
+        finished_at: new Date().toISOString(),
+      },
+    });
+    render(<UpdateNotifier />);
+
+    await screen.findByText(i18n.t("updates:releaseTitle", { version: "v1.6.0" }));
+    expect(screen.getByText(/resolve_claude/)).toBeInTheDocument();
+  });
+
+  it("titles the modal with the release version when one was read", async () => {
+    statusMock.mockResolvedValue({
+      ...BASE_STATUS,
+      situation: "release_available",
+      release_check: "ok",
+      local_version: "1.5.0",
+      latest_release: "v1.6.0",
+      commits_behind_release: 3,
+      commits_ahead_of_release: 0,
+    });
+    render(<UpdateNotifier />);
+
+    await screen.findByText(i18n.t("updates:releaseTitle", { version: "v1.6.0" }));
+    // A release IS fast-forwardable on a checkout, so the button stays.
+    expect(screen.getByText(i18n.t("updates:updateNow"))).toBeInTheDocument();
+  });
+
   it("surfaces the decline reason instead of restarting on a 409", async () => {
     applyMock.mockResolvedValue({
       ...BASE_STATUS,

client/src/components/config/ConfigTabBar.tsx

@@ -0,0 +1,163 @@
+/**
+ * @file ConfigTabBar.tsx
+ * @description The tab strip both config explorers wear: one horizontally
+ * scrollable row with fade edges and chevrons that appear only when there is
+ * something to scroll to.
+ *
+ * Shared rather than copied because the two pages must look the same. Codex
+ * originally wrapped its tabs onto a second row — fine at eight tabs, but it
+ * read as a different component sitting next to Claude Code's twelve-tab
+ * scroller. One row that scrolls is the same shape at any tab count.
+ *
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useCallback, useEffect, useRef, useState, type ComponentType } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+export interface ConfigTab<K extends string> {
+  key: K;
+  icon: ComponentType<{ className?: string }>;
+  label: string;
+  /** Badge number, or null for tabs that count nothing (e.g. Overview). */
+  count: number | null;
+}
+
+interface ConfigTabBarProps<K extends string> {
+  tabs: ConfigTab<K>[];
+  current: K;
+  onSelect: (key: K) => void;
+  /** `data-testid` becomes `<prefix>-<key>`, e.g. "cc-tab-plugins". */
+  testIdPrefix: string;
+  ariaLabel: string;
+}
+
+export function ConfigTabBar<K extends string>({
+  tabs,
+  current,
+  onSelect,
+  testIdPrefix,
+  ariaLabel,
+}: ConfigTabBarProps<K>) {
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+
+  // Update scroll affordances when content size or scroll position changes.
+  const updateAffordances = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    setCanScrollLeft(el.scrollLeft > 1);
+    setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+  }, []);
+
+  useEffect(() => {
+    updateAffordances();
+    const el = scrollRef.current;
+    if (!el) return;
+    el.addEventListener("scroll", updateAffordances, { passive: true });
+    const ro = new ResizeObserver(updateAffordances);
+    ro.observe(el);
+    return () => {
+      el.removeEventListener("scroll", updateAffordances);
+      ro.disconnect();
+    };
+  }, [updateAffordances]);
+
+  // Scroll the active tab into view when it changes (e.g. user picks a tab
+  // that's offscreen, or window resize hides the active one).
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const active = el.querySelector<HTMLElement>('[data-tab-active="true"]');
+    if (!active) return;
+    const elRect = el.getBoundingClientRect();
+    const activeRect = active.getBoundingClientRect();
+    if (activeRect.left < elRect.left + 8) {
+      el.scrollBy({ left: activeRect.left - elRect.left - 16, behavior: "smooth" });
+    } else if (activeRect.right > elRect.right - 8) {
+      el.scrollBy({ left: activeRect.right - elRect.right + 16, behavior: "smooth" });
+    }
+  }, [current]);
+
+  const scrollByButton = (dir: 1 | -1) => {
+    const el = scrollRef.current;
+    if (!el) return;
+    el.scrollBy({ left: dir * Math.max(200, el.clientWidth * 0.6), behavior: "smooth" });
+  };
+
+  return (
+    <div className="relative rounded-xl border border-border bg-surface-1">
+      {/* Left edge gradient + chevron */}
+      <div
+        className={`pointer-events-none absolute left-0 top-0 bottom-0 w-12 rounded-l-xl bg-gradient-to-r from-surface-1 to-transparent transition-opacity z-10 ${
+          canScrollLeft ? "opacity-100" : "opacity-0"
+        }`}
+      />
+      {canScrollLeft && (
+        <button
+          onClick={() => scrollByButton(-1)}
+          aria-label="scroll tabs left"
+          className="absolute left-1 top-1/2 -translate-y-1/2 z-20 rounded-md w-7 h-7 flex items-center justify-center bg-surface-2 border border-border text-fg-secondary hover:text-fg-primary hover:bg-surface-3"
+        >
+          <ChevronLeft className="w-4 h-4" />
+        </button>
+      )}
+
+      <div
+        ref={scrollRef}
+        role="tablist"
+        aria-label={ariaLabel}
+        className="flex gap-1 p-1 overflow-x-auto scroll-smooth [&::-webkit-scrollbar]:hidden"
+        style={{ scrollbarWidth: "none" }}
+      >
+        {tabs.map(({ key, icon: Icon, label, count }) => {
+          const active = current === key;
+          return (
+            <button
+              key={key}
+              data-testid={`${testIdPrefix}-${key}`}
+              data-tab-active={active ? "true" : undefined}
+              role="tab"
+              aria-selected={active}
+              onClick={() => onSelect(key)}
+              className={`flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors flex-shrink-0 whitespace-nowrap ${
+                active
+                  ? "bg-accent/15 text-accent border border-accent/30"
+                  : "text-fg-secondary hover:text-fg-primary hover:bg-surface-3 border border-transparent"
+              }`}
+            >
+              <Icon className="w-3.5 h-3.5" />
+              <span>{label}</span>
+              {count !== null && (
+                <span
+                  className={`text-[10px] px-1.5 py-0.5 rounded-full font-semibold ${
+                    active ? "bg-accent/20 text-accent" : "bg-surface-3 text-fg-secondary"
+                  }`}
+                >
+                  {count}
+                </span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Right edge gradient + chevron */}
+      <div
+        className={`pointer-events-none absolute right-0 top-0 bottom-0 w-12 rounded-r-xl bg-gradient-to-l from-surface-1 to-transparent transition-opacity z-10 ${
+          canScrollRight ? "opacity-100" : "opacity-0"
+        }`}
+      />
+      {canScrollRight && (
+        <button
+          onClick={() => scrollByButton(1)}
+          aria-label="scroll tabs right"
+          className="absolute right-1 top-1/2 -translate-y-1/2 z-20 rounded-md w-7 h-7 flex items-center justify-center bg-surface-2 border border-border text-fg-secondary hover:text-fg-primary hover:bg-surface-3"
+        >
+          <ChevronRight className="w-4 h-4" />
+        </button>
+      )}
+    </div>
+  );
+}

client/src/components/config/ConfirmDeleteModal.tsx

@@ -0,0 +1,102 @@
+/**
+ * @file ConfirmDeleteModal.tsx
+ * @description Confirmation modal for deleting a config artifact. Tool-
+ * agnostic — the caller supplies the async delete action; the modal only
+ * tracks the busy state and Escape-to-cancel behavior.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ShieldAlert, Trash2 } from "lucide-react";
+import type { CcArtifactType } from "../../lib/api";
+
+/** See EditorModal.tsx's `DefaultScope` — same reasoning: Codex instantiates
+ *  `TScope` as `"user" | "project"` instead of casting into Claude's wider
+ *  default. */
+export type ConfirmDeleteState<
+  TType extends string = CcArtifactType,
+  TScope extends string = "user" | "project" | "auto-memory",
+> = {
+  type: TType;
+  scope: TScope;
+  name?: string;
+  path: string;
+  project?: string; // set for type === "auto-memory"
+} | null;
+
+interface ConfirmDeleteModalProps<
+  TType extends string = CcArtifactType,
+  TScope extends string = "user" | "project" | "auto-memory",
+> {
+  state: NonNullable<ConfirmDeleteState<TType, TScope>>;
+  onCancel: () => void;
+  onConfirm: () => Promise<void>;
+}
+
+export function ConfirmDeleteModal<
+  TType extends string = CcArtifactType,
+  TScope extends string = "user" | "project" | "auto-memory",
+>({ state, onCancel, onConfirm }: ConfirmDeleteModalProps<TType, TScope>) {
+  const { t } = useTranslation("ccConfig");
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onCancel();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onCancel]);
+
+  const handleConfirm = useCallback(async () => {
+    setBusy(true);
+    try {
+      await onConfirm();
+    } finally {
+      setBusy(false);
+    }
+  }, [onConfirm]);
+
+  return (
+    <div
+      className="fixed inset-0 bg-black/60 z-40 flex items-center justify-center p-4"
+      onClick={onCancel}
+    >
+      <div
+        className="relative w-full max-w-lg rounded-xl border border-status-danger/40 bg-surface-1"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="border-b border-border px-4 py-2.5 flex items-center gap-2">
+          <ShieldAlert className="w-4 h-4 text-status-danger" />
+          <span className="text-sm font-medium text-fg-primary flex-1">
+            {t("edit.confirmDelete")}
+          </span>
+        </div>
+        <div className="p-4 space-y-3">
+          <p className="text-xs text-fg-secondary leading-relaxed">{t("edit.confirmDeleteBody")}</p>
+          <div className="rounded-md border border-border bg-surface-2 px-3 py-2 font-mono text-[11px] text-fg-secondary break-all">
+            {t("edit.confirmDeletePath", { path: state.path })}
+          </div>
+        </div>
+        <div className="border-t border-border px-4 py-3 flex items-center justify-end gap-2">
+          <button
+            onClick={onCancel}
+            disabled={busy}
+            className="text-[12px] font-medium px-3 py-1.5 rounded-md border border-border bg-surface-2 hover:bg-surface-3 text-fg-secondary disabled:opacity-60"
+          >
+            {t("edit.cancel")}
+          </button>
+          <button
+            onClick={handleConfirm}
+            disabled={busy}
+            className="text-[12px] font-medium px-3 py-1.5 rounded-md border border-status-danger/50 bg-status-danger/15 hover:bg-status-danger/25 text-status-danger inline-flex items-center gap-1.5 disabled:opacity-60"
+          >
+            <Trash2 className="w-3.5 h-3.5" />
+            {busy ? t("edit.deleting") : t("edit.confirmDeleteAction")}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/components/config/EditorModal.tsx

@@ -0,0 +1,276 @@
+/**
+ * @file EditorModal.tsx
+ * @description Create/edit modal for text-file config artifacts (skills,
+ * agents, commands, output styles, memory). Tool-agnostic: it takes a
+ * `fetchContent` callback instead of reaching for any particular tool's API,
+ * so the same modal serves both the Claude Code and Codex config pages.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Pencil, X, Save, AlertCircle } from "lucide-react";
+import type { CcArtifactType } from "../../lib/api";
+
+/** Claude Code's own scope union, kept as the default so existing callers
+ *  (CcConfig.tsx) don't need to name it. Codex has no `auto-memory` scope —
+ *  its caller instantiates `TScope` as just `"user" | "project"` instead of
+ *  casting its own narrower type into this one. */
+type DefaultScope = "user" | "project" | "auto-memory";
+
+export type EditorState<
+  TType extends string = CcArtifactType,
+  TScope extends string = DefaultScope,
+> =
+  | {
+      mode: "create";
+      type: TType;
+      defaultScope: "user" | "project";
+      template: string;
+      project?: string; // set for type === "auto-memory"
+    }
+  | {
+      mode: "edit";
+      type: TType;
+      scope: TScope;
+      name: string;
+      filePath: string;
+      project?: string; // set for type === "auto-memory"
+    }
+  | null;
+
+/** Types that are a single fixed file per scope (e.g. Claude's CLAUDE.md, Codex's
+ *  AGENTS.md / config.toml) - no `name` field, and no artifact name is ever sent. */
+const DEFAULT_NAMELESS_TYPES = ["memory"];
+
+interface EditorModalProps<
+  TType extends string = CcArtifactType,
+  TScope extends string = DefaultScope,
+> {
+  state: NonNullable<EditorState<TType, TScope>>;
+  fetchContent: (filePath: string) => Promise<string>;
+  onClose: () => void;
+  onSave: (args: {
+    type: TType;
+    targetScope: TScope;
+    name: string | undefined;
+    content: string;
+    project?: string;
+  }) => Promise<void>;
+  /** Which `state.type` values are nameless singleton files. Defaults to
+   *  Claude Code's own `["memory"]` so existing callers are unaffected. */
+  namelessTypes?: readonly string[];
+}
+
+export function EditorModal<
+  TType extends string = CcArtifactType,
+  TScope extends string = DefaultScope,
+>({
+  state,
+  fetchContent,
+  onClose,
+  onSave,
+  namelessTypes = DEFAULT_NAMELESS_TYPES,
+}: EditorModalProps<TType, TScope>) {
+  const { t } = useTranslation("ccConfig");
+  const isCreate = state.mode === "create";
+  const isNameless = namelessTypes.includes(state.type);
+  const isAutoMemory = state.type === "auto-memory";
+  const [content, setContent] = useState<string>(isCreate ? state.template : "");
+  const [name, setName] = useState<string>("");
+  const [targetScope, setTargetScope] = useState<"user" | "project">(
+    isCreate
+      ? state.defaultScope
+      : state.scope === "auto-memory"
+        ? "user"
+        : (state.scope as "user" | "project")
+  );
+  const [loading, setLoading] = useState(!isCreate);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // For edit mode, fetch the actual file content
+  useEffect(() => {
+    if (state.mode === "edit") {
+      setLoading(true);
+      fetchContent(state.filePath)
+        .then((text) => {
+          setContent(text);
+          setLoading(false);
+        })
+        .catch((err: unknown) => {
+          const msg = err instanceof Error ? err.message : "unknown";
+          setError(msg);
+          setLoading(false);
+        });
+    }
+  }, [state, fetchContent]);
+
+  // Esc to close
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+
+  const handleSave = useCallback(async () => {
+    setSaving(true);
+    setError(null);
+    try {
+      if (!isNameless && state.mode === "create" && !name) {
+        setError(t("edit.nameLabel"));
+        setSaving(false);
+        return;
+      }
+      // For auto-memory creates, append a .md extension when the user omits it.
+      const createName = isAutoMemory && !/\.md$/i.test(name) ? `${name}.md` : name;
+      const effectiveName =
+        state.mode === "edit" ? state.name : isNameless ? undefined : createName;
+      await onSave({
+        type: state.type,
+        // Widening back to TScope: this component is the one place that
+        // legitimately knows about all three scope shapes across both
+        // callers; a Codex caller's TScope ("user" | "project") never
+        // actually receives "auto-memory" since isAutoMemory can only be
+        // true when TType includes "auto-memory" (Claude-only).
+        targetScope: (isAutoMemory ? "auto-memory" : targetScope) as TScope,
+        name: effectiveName,
+        content,
+        project: state.project,
+      });
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : "unknown";
+      setError(t("edit.writeError", { message: msg }));
+    } finally {
+      setSaving(false);
+    }
+  }, [state, targetScope, name, content, isAutoMemory, onSave, t]);
+
+  const titleText = isCreate
+    ? isAutoMemory
+      ? t("memory.newFileTitle", { project: state.project ?? "" })
+      : t("edit.newTitle", { type: state.type })
+    : t("edit.editTitle", { name: state.mode === "edit" ? state.name : "" });
+
+  return (
+    <div
+      className="fixed inset-0 bg-black/60 z-40 flex items-center justify-center p-4"
+      onClick={onClose}
+    >
+      <div
+        className="relative w-full max-w-4xl max-h-[90vh] rounded-xl border border-border bg-surface-1 flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center gap-2 border-b border-border px-4 py-2.5">
+          <Pencil className="w-4 h-4 text-fg-muted" />
+          <span className="text-sm font-medium text-fg-primary flex-1 truncate">{titleText}</span>
+          <button
+            onClick={onClose}
+            className="text-fg-secondary hover:text-fg-primary p-1 rounded-md hover:bg-surface-3"
+            aria-label={t("common.close")}
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+
+        <div className="overflow-auto p-4 space-y-3">
+          {isCreate && !isNameless && (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+              <div>
+                <label className="block text-[11px] font-semibold uppercase tracking-wider text-fg-muted mb-1">
+                  {t("edit.nameLabel")}
+                </label>
+                <input
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  placeholder={
+                    isAutoMemory ? t("memory.namePlaceholder") : t("edit.namePlaceholder")
+                  }
+                  pattern={isAutoMemory ? undefined : "[A-Za-z0-9][A-Za-z0-9._-]{0,63}"}
+                  className="w-full bg-surface-2 border border-border rounded-md px-3 py-1.5 text-sm font-mono text-fg-primary placeholder:text-fg-muted focus:outline-none focus:border-accent/50"
+                />
+                <p className="mt-1 text-[10px] text-fg-muted">
+                  {isAutoMemory ? t("memory.nameHelp") : t("edit.nameHelp")}
+                </p>
+              </div>
+              {isAutoMemory ? (
+                <div>
+                  <label className="block text-[11px] font-semibold uppercase tracking-wider text-fg-muted mb-1">
+                    {t("memory.projectLabel")}
+                  </label>
+                  <div className="rounded-md border border-border bg-surface-2 px-3 py-1.5 font-mono text-[11px] text-fg-secondary truncate">
+                    {state.project}
+                  </div>
+                  <p className="mt-1 text-[10px] text-fg-muted">{t("memory.projectHelp")}</p>
+                </div>
+              ) : (
+                <div>
+                  <label className="block text-[11px] font-semibold uppercase tracking-wider text-fg-muted mb-1">
+                    {t("edit.scopePicker")}
+                  </label>
+                  <div className="inline-flex rounded-md border border-border bg-surface-2 p-0.5">
+                    {(["user", "project"] as const).map((s) => (
+                      <button
+                        key={s}
+                        onClick={() => setTargetScope(s)}
+                        className={`px-3 py-1 text-[11px] font-medium rounded ${
+                          targetScope === s
+                            ? "bg-accent/20 text-accent border border-accent/30"
+                            : "text-fg-secondary hover:text-fg-primary"
+                        }`}
+                      >
+                        {t(`scope.${s}`)}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          <div>
+            <label className="block text-[11px] font-semibold uppercase tracking-wider text-fg-muted mb-1">
+              {t("edit.contentLabel")}
+            </label>
+            {loading ? (
+              <div className="h-72 rounded-md border border-border bg-surface-2 animate-pulse" />
+            ) : (
+              <textarea
+                value={content}
+                onChange={(e) => setContent(e.target.value)}
+                spellCheck={false}
+                className="w-full h-72 bg-surface-2 border border-border rounded-md px-3 py-2 text-[11px] font-mono text-fg-primary placeholder:text-fg-muted focus:outline-none focus:border-accent/50 resize-y"
+              />
+            )}
+          </div>
+
+          {error && (
+            <div className="rounded-md border border-status-danger/40 bg-status-danger/10 px-3 py-2 text-xs text-status-danger inline-flex items-center gap-2">
+              <AlertCircle className="w-3.5 h-3.5" />
+              {error}
+            </div>
+          )}
+        </div>
+
+        <div className="border-t border-border px-4 py-3 flex items-center justify-end gap-2">
+          <button
+            onClick={onClose}
+            className="text-[12px] font-medium px-3 py-1.5 rounded-md border border-border bg-surface-2 hover:bg-surface-3 text-fg-secondary"
+          >
+            {t("edit.cancel")}
+          </button>
+          <button
+            onClick={handleSave}
+            disabled={saving || loading}
+            className="text-[12px] font-medium px-3 py-1.5 rounded-md border border-accent/40 bg-accent/15 hover:bg-accent/25 text-accent inline-flex items-center gap-1.5 disabled:opacity-60"
+          >
+            <Save className="w-3.5 h-3.5" />
+            {saving ? t("edit.saving") : t("edit.save")}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/components/config/FileViewer.tsx

@@ -0,0 +1,99 @@
+/**
+ * @file FileViewer.tsx
+ * @description Read-only file-content modal for the config explorer. Takes
+ * already-fetched data as props (path/data/error) rather than fetching
+ * itself, so it stays tool-agnostic — the orchestrator (Claude or Codex
+ * config page) owns the fetch. A markdown file gets a Raw / Preview switch
+ * (`MarkdownPreview`); Raw is the default.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { FileText, X, AlertCircle, Eye, Code2 } from "lucide-react";
+import type { CcFileResponse } from "../../lib/api";
+import { CopyButton } from "./configPrimitives";
+import { MarkdownPreview, isMarkdown } from "../MarkdownPreview";
+
+export function FileViewer({
+  state,
+  onClose,
+}: {
+  state: { path: string; data: CcFileResponse | null; error: string | null };
+  onClose: () => void;
+}) {
+  const { t } = useTranslation("ccConfig");
+  const [preview, setPreview] = useState(false);
+  const canPreview = isMarkdown(state.path) && !!state.data;
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+  return (
+    <div
+      className="fixed inset-0 bg-black/60 z-40 flex items-center justify-center p-4"
+      onClick={onClose}
+    >
+      <div
+        className="relative w-full max-w-4xl max-h-[85vh] rounded-xl border border-border bg-surface-1 flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center gap-2 border-b border-border px-4 py-2.5">
+          <FileText className="w-4 h-4 text-fg-muted" />
+          <span className="font-mono text-[12px] text-fg-secondary truncate flex-1">
+            {state.path}
+          </span>
+          {canPreview && (
+            <button
+              type="button"
+              aria-pressed={preview}
+              onClick={() => setPreview((v) => !v)}
+              className="inline-flex items-center gap-1 rounded-md border border-border px-2 py-0.5 text-[11px] text-fg-secondary hover:bg-surface-3 hover:text-fg-primary"
+            >
+              {preview ? <Code2 className="h-3 w-3" /> : <Eye className="h-3 w-3" />}
+              {preview ? t("common.raw") : t("common.preview")}
+            </button>
+          )}
+          <CopyButton value={state.path} />
+          <button
+            onClick={onClose}
+            className="text-fg-secondary hover:text-fg-primary p-1 rounded-md hover:bg-surface-3"
+            aria-label={t("common.close")}
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+        <div className="overflow-auto p-4">
+          {state.error ? (
+            <div className="text-sm text-status-danger inline-flex items-center gap-2">
+              <AlertCircle className="w-4 h-4" />
+              {state.error}
+            </div>
+          ) : !state.data ? (
+            <div className="text-sm text-fg-muted">…</div>
+          ) : preview && canPreview ? (
+            <>
+              <MarkdownPreview text={state.data.text} />
+              {state.data.truncated && (
+                <p className="text-[11px] text-fg-muted italic">{t("common.truncated")}</p>
+              )}
+            </>
+          ) : (
+            <pre className="text-[11px] font-mono text-fg-secondary whitespace-pre-wrap break-words">
+              {state.data.text}
+              {state.data.truncated && (
+                <span className="text-fg-muted italic">
+                  {"\n\n"}
+                  {t("common.truncated")}
+                </span>
+              )}
+            </pre>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/components/config/MdItemList.tsx

@@ -0,0 +1,145 @@
+/**
+ * @file MdItemList.tsx
+ * @description Generic list + card for markdown-frontmatter config artifacts
+ * (skills, agents, commands, output styles). Tool-agnostic: callers pass the
+ * items and the open/edit/delete handlers, nothing here reaches for an API.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { ExternalLink, Pencil, Trash2 } from "lucide-react";
+import type { CcArtifactType, CcMdItem } from "../../lib/api";
+import { ScopeBadge } from "./ScopeBadge";
+import { Empty, SkeletonRows } from "./configPrimitives";
+
+interface MdItemListProps {
+  items: CcMdItem[] | null;
+  search: string;
+  onOpen: (path: string) => void;
+  onEdit: (
+    type: CcArtifactType,
+    item: { scope: "user" | "project"; name: string; filePath: string }
+  ) => void;
+  onDelete: (
+    type: CcArtifactType,
+    scope: "user" | "project",
+    name: string | undefined,
+    path: string
+  ) => void;
+  kind: "skills" | "agents" | "commands" | "outputStyles";
+}
+
+export function MdItemList({ items, search, onOpen, onEdit, onDelete, kind }: MdItemListProps) {
+  const filtered = useMemo(() => {
+    if (!items) return null;
+    const q = search.toLowerCase();
+    return items.filter((it) => {
+      if (!q) return true;
+      const blob = [it.name, it.frontmatter.description, it.frontmatter.name]
+        .filter(Boolean)
+        .join(" ")
+        .toLowerCase();
+      return blob.includes(q);
+    });
+  }, [items, search]);
+
+  if (!filtered) return <SkeletonRows n={6} />;
+  if (filtered.length === 0) return <Empty />;
+
+  return (
+    <div className="space-y-2">
+      {filtered.map((it) => (
+        <MdItemCard
+          key={`${it.scope}:${it.name}`}
+          item={it}
+          onOpen={onOpen}
+          onEdit={onEdit}
+          onDelete={onDelete}
+          kind={kind}
+        />
+      ))}
+    </div>
+  );
+}
+
+interface MdItemCardProps {
+  item: CcMdItem;
+  onOpen: (p: string) => void;
+  onEdit: (
+    type: CcArtifactType,
+    item: { scope: "user" | "project"; name: string; filePath: string }
+  ) => void;
+  onDelete: (
+    type: CcArtifactType,
+    scope: "user" | "project",
+    name: string | undefined,
+    path: string
+  ) => void;
+  kind: "skills" | "agents" | "commands" | "outputStyles";
+}
+
+function MdItemCard({ item, onOpen, onEdit, onDelete, kind }: MdItemCardProps) {
+  const { t } = useTranslation("ccConfig");
+  const artifactType: CcArtifactType = kind === "outputStyles" ? "output-styles" : kind;
+
+  const filePath = item.file || `${item.path}/SKILL.md`;
+  const description =
+    item.frontmatter.description ||
+    item.preview
+      .replace(/^#+\s.*\n/, "")
+      .trim()
+      .slice(0, 200);
+  return (
+    <div className="rounded-lg border border-border bg-surface-2 px-4 py-3 hover:border-border/80 transition-colors">
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2">
+            <span className="font-mono text-sm text-fg-primary truncate">{item.name}</span>
+            <ScopeBadge scope={item.scope} />
+            {item.frontmatter.model && (
+              <span className="text-[10px] font-mono px-1.5 py-0.5 rounded bg-accent/10 text-accent border border-accent/20">
+                {item.frontmatter.model}
+              </span>
+            )}
+          </div>
+          {description && (
+            <p className="mt-1.5 text-xs text-fg-secondary leading-relaxed line-clamp-2">
+              {description}
+            </p>
+          )}
+          {kind === "agents" && item.frontmatter.tools && (
+            <div className="mt-2 text-[11px] text-fg-muted">
+              <span className="text-fg-muted">{t("agents.tools")}:</span>{" "}
+              <span className="font-mono text-fg-secondary">{item.frontmatter.tools}</span>
+            </div>
+          )}
+          <div className="mt-2 font-mono text-[10px] text-fg-muted truncate">{filePath}</div>
+        </div>
+        <div className="flex flex-col gap-1.5 flex-shrink-0">
+          <button
+            onClick={() => onOpen(filePath)}
+            className="text-[11px] font-medium px-2 py-1 rounded-md border border-border bg-surface-1 hover:bg-surface-3 text-fg-secondary hover:text-fg-primary inline-flex items-center gap-1.5"
+          >
+            <ExternalLink className="w-3 h-3" />
+            {t("common.viewSource")}
+          </button>
+          <button
+            onClick={() => onEdit(artifactType, { scope: item.scope, name: item.name, filePath })}
+            className="text-[11px] font-medium px-2 py-1 rounded-md border border-border bg-surface-1 hover:bg-surface-3 text-fg-secondary hover:text-fg-primary inline-flex items-center gap-1.5"
+          >
+            <Pencil className="w-3 h-3" />
+            {t("edit.editButton")}
+          </button>
+          <button
+            onClick={() => onDelete(artifactType, item.scope, item.name, filePath)}
+            className="text-[11px] font-medium px-2 py-1 rounded-md border border-status-danger/30 bg-status-danger/5 hover:bg-status-danger/15 text-status-danger inline-flex items-center gap-1.5"
+          >
+            <Trash2 className="w-3 h-3" />
+            {t("edit.deleteButton")}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/components/config/ProjectMemoryModal.tsx

@@ -0,0 +1,180 @@
+/**
+ * @file ProjectMemoryModal.tsx
+ * @description Create a project's memory file — CLAUDE.md or AGENTS.md — in a
+ * directory that is not the dashboard's own. Shared by the Claude Code and
+ * Codex config pages; the caller supplies its i18n namespace and the create
+ * call, so this component knows about neither tool.
+ *
+ * The directory list is `GET /api/run/cwds` (the dashboard's known projects),
+ * offered as suggestions on a plain text input rather than a closed dropdown:
+ * a project you have never run through the dashboard is exactly the case this
+ * modal exists for, so it must stay typeable.
+ *
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useCallback, useEffect, useId, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { BookOpen, X, Save, AlertCircle } from "lucide-react";
+import { api, type CwdSuggestion } from "../../lib/api";
+
+interface ProjectMemoryModalProps {
+  /** i18n namespace of the calling page — "ccConfig" or "codexConfig". */
+  ns: string;
+  /** The file this will create, e.g. "CLAUDE.md". Shown, never sent. */
+  filename: string;
+  /** Starting body text, so the user edits a skeleton instead of a blank box. */
+  template: string;
+  onClose: () => void;
+  /** Resolves with the path actually written (the server realpaths the dir). */
+  onCreate: (args: { dir: string; content: string }) => Promise<string>;
+}
+
+export function ProjectMemoryModal({
+  ns,
+  filename,
+  template,
+  onClose,
+  onCreate,
+}: ProjectMemoryModalProps) {
+  // Every key lives under `projectMemory.*` in BOTH namespaces, so this
+  // component never depends on the calling page's other key groups lining up.
+  const { t } = useTranslation(ns);
+  const listId = useId();
+  const [dir, setDir] = useState("");
+  const [content, setContent] = useState(template);
+  const [suggestions, setSuggestions] = useState<CwdSuggestion[]>([]);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    api.run
+      .cwds()
+      .then((r) => setSuggestions(r.items))
+      // Suggestions are a convenience; the input still works without them.
+      .catch(() => undefined);
+  }, []);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+
+  const handleCreate = useCallback(async () => {
+    const target = dir.trim();
+    if (!target) {
+      setError(t("projectMemory.dirRequired"));
+      return;
+    }
+    setSaving(true);
+    setError(null);
+    try {
+      await onCreate({ dir: target, content });
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "unknown");
+    } finally {
+      setSaving(false);
+    }
+  }, [dir, content, onCreate, t]);
+
+  return (
+    <div
+      className="fixed inset-0 bg-black/60 z-40 flex items-center justify-center p-4"
+      onClick={onClose}
+    >
+      <div
+        role="dialog"
+        aria-label={t("projectMemory.title", { file: filename })}
+        className="relative w-full max-w-3xl max-h-[90vh] rounded-xl border border-border bg-surface-1 flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center gap-2 border-b border-border px-4 py-2.5">
+          <BookOpen className="w-4 h-4 text-fg-muted" />
+          <span className="text-sm font-medium text-fg-primary flex-1 truncate">
+            {t("projectMemory.title", { file: filename })}
+          </span>
+          <button
+            onClick={onClose}
+            className="text-fg-secondary hover:text-fg-primary p-1 rounded-md hover:bg-surface-3"
+            aria-label={t("projectMemory.close")}
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+
+        <div className="overflow-auto p-4 space-y-3">
+          <div>
+            <label
+              htmlFor={`${listId}-dir`}
+              className="block text-[11px] font-semibold uppercase tracking-wider text-fg-muted mb-1"
+            >
+              {t("projectMemory.dirLabel")}
+            </label>
+            <input
+              id={`${listId}-dir`}
+              list={listId}
+              value={dir}
+              onChange={(e) => setDir(e.target.value)}
+              placeholder="/home/you/projects/my-app"
+              spellCheck={false}
+              className="w-full bg-surface-2 border border-border rounded-md px-3 py-1.5 text-sm font-mono text-fg-primary placeholder:text-fg-muted focus:outline-none focus:border-accent/50"
+            />
+            <datalist id={listId}>
+              {suggestions.map((s) => (
+                <option key={s.path} value={s.path}>
+                  {s.label}
+                </option>
+              ))}
+            </datalist>
+            <p className="mt-1 text-[10px] text-fg-muted">
+              {t("projectMemory.dirHelp", { file: filename })}
+            </p>
+          </div>
+
+          <div>
+            <label
+              htmlFor={`${listId}-content`}
+              className="block text-[11px] font-semibold uppercase tracking-wider text-fg-muted mb-1"
+            >
+              {t("projectMemory.contentLabel")}
+            </label>
+            <textarea
+              id={`${listId}-content`}
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              spellCheck={false}
+              className="w-full h-64 bg-surface-2 border border-border rounded-md px-3 py-2 text-[11px] font-mono text-fg-primary focus:outline-none focus:border-accent/50 resize-y"
+            />
+          </div>
+
+          {error && (
+            <div className="rounded-md border border-status-danger/40 bg-status-danger/10 px-3 py-2 text-xs text-status-danger inline-flex items-center gap-2">
+              <AlertCircle className="w-3.5 h-3.5" />
+              {error}
+            </div>
+          )}
+        </div>
+
+        <div className="border-t border-border px-4 py-3 flex items-center justify-end gap-2">
+          <button
+            onClick={onClose}
+            className="text-[12px] font-medium px-3 py-1.5 rounded-md border border-border bg-surface-2 hover:bg-surface-3 text-fg-secondary"
+          >
+            {t("projectMemory.cancel")}
+          </button>
+          <button
+            onClick={handleCreate}
+            disabled={saving}
+            className="text-[12px] font-medium px-3 py-1.5 rounded-md border border-accent/40 bg-accent/15 hover:bg-accent/25 text-accent inline-flex items-center gap-1.5 disabled:opacity-60"
+          >
+            <Save className="w-3.5 h-3.5" />
+            {saving ? t("projectMemory.saving") : t("projectMemory.createButton")}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/components/config/ScopeBadge.tsx

@@ -0,0 +1,32 @@
+/**
+ * @file ScopeBadge.tsx
+ * @description Small colored badge for a config artifact's scope (user /
+ * project / project-local). Tool-agnostic — takes a plain string so it works
+ * for Claude Code and Codex scopes alike.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useTranslation } from "react-i18next";
+
+export function ScopeBadge({ scope }: { scope: string }) {
+  const { t } = useTranslation("ccConfig");
+  const color =
+    scope === "user"
+      ? "bg-sky-500/10 text-sky-700 dark:text-sky-300 border-sky-500/30"
+      : scope === "project"
+        ? "bg-status-success/10 text-status-success border-status-success/30"
+        : scope === "project-local"
+          ? "bg-violet-500/10 text-violet-700 dark:text-violet-300 border-violet-500/30"
+          : "bg-surface-3 text-fg-secondary border-border";
+  const label =
+    scope === "project-local"
+      ? t("scope.projectLocal")
+      : scope === "user"
+        ? t("scope.user")
+        : scope === "project"
+          ? t("scope.project")
+          : scope;
+  return (
+    <span className={`text-[10px] font-mono px-1.5 py-0.5 rounded border ${color}`}>{label}</span>
+  );
+}

client/src/components/config/ToastNotice.tsx

@@ -0,0 +1,46 @@
+/**
+ * @file ToastNotice.tsx
+ * @description Bottom-right success/error toast for the config explorer.
+ * Tool-agnostic — the page owns the 5s auto-dismiss timer and passes the
+ * message down.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { AlertCircle, Check, X } from "lucide-react";
+
+export type Toast = { kind: "success" | "error"; message: string } | null;
+
+export function ToastNotice({
+  toast,
+  onDismiss,
+}: {
+  toast: NonNullable<Toast>;
+  onDismiss: () => void;
+}) {
+  const isErr = toast.kind === "error";
+  return (
+    <div className="fixed bottom-6 right-6 z-50 max-w-md">
+      <div
+        className={`rounded-lg border px-3 py-2 shadow-lg flex items-start gap-2 ${
+          isErr
+            ? "border-status-danger/50 bg-status-danger/15 text-status-danger"
+            : "border-status-success/40 bg-status-success/10 text-status-success"
+        }`}
+      >
+        {isErr ? (
+          <AlertCircle className="w-4 h-4 flex-shrink-0 mt-0.5" />
+        ) : (
+          <Check className="w-4 h-4 flex-shrink-0 mt-0.5" />
+        )}
+        <span className="text-xs leading-relaxed flex-1 break-all">{toast.message}</span>
+        <button
+          onClick={onDismiss}
+          className="text-current/70 hover:text-current p-0.5"
+          aria-label="dismiss"
+        >
+          <X className="w-3 h-3" />
+        </button>
+      </div>
+    </div>
+  );
+}

client/src/components/config/__tests__/EditorModal.test.tsx

@@ -0,0 +1,48 @@
+/**
+ * @file EditorModal.test.tsx
+ * @description Unit tests for the tool-agnostic `EditorModal`: it must load
+ * existing content through the injected `fetchContent` callback rather than
+ * a hardcoded API, and must refuse to save a create with no name.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { EditorModal } from "../EditorModal";
+
+describe("EditorModal", () => {
+  it("loads the existing body through the injected fetcher, not a hardcoded API", async () => {
+    const fetchContent = vi.fn().mockResolvedValue("old body");
+    render(
+      <EditorModal
+        state={{
+          mode: "edit",
+          type: "rules",
+          scope: "user",
+          name: "default",
+          filePath: "/r/default.rules",
+        }}
+        fetchContent={fetchContent}
+        onClose={() => {}}
+        onSave={async () => {}}
+      />
+    );
+    expect(fetchContent).toHaveBeenCalledWith("/r/default.rules");
+    expect(await screen.findByDisplayValue("old body")).toBeInTheDocument();
+  });
+
+  it("refuses to save a create with no name", async () => {
+    const onSave = vi.fn();
+    render(
+      <EditorModal
+        state={{ mode: "create", type: "agents", defaultScope: "user", template: "" }}
+        fetchContent={async () => ""}
+        onClose={() => {}}
+        onSave={onSave}
+      />
+    );
+    await userEvent.click(screen.getByRole("button", { name: /save/i }));
+    expect(onSave).not.toHaveBeenCalled();
+  });
+});

client/src/components/config/__tests__/ProjectMemoryModal.test.tsx

@@ -0,0 +1,98 @@
+/**
+ * @file ProjectMemoryModal.test.tsx
+ * @description Unit tests for `ProjectMemoryModal`: it must send the directory
+ * the user typed (not a suggestion it picked for them), must refuse to submit
+ * an empty one, and must render its labels from whichever namespace the
+ * calling page passes — the Codex page shares this component with the Claude
+ * page, and a key group that only exists in `ccConfig` would render raw.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { ProjectMemoryModal } from "../ProjectMemoryModal";
+import { api } from "../../../lib/api";
+
+vi.mock("../../../lib/api", () => ({
+  api: { run: { cwds: vi.fn() } },
+}));
+
+const cwds = vi.mocked(api.run.cwds);
+
+beforeEach(() => {
+  cwds.mockResolvedValue({
+    items: [{ kind: "recent", path: "/home/me/known-project", label: "known-project" }],
+  });
+});
+
+function renderModal(over: Partial<Parameters<typeof ProjectMemoryModal>[0]> = {}) {
+  const onCreate = vi.fn().mockResolvedValue("/home/me/typed/CLAUDE.md");
+  render(
+    <ProjectMemoryModal
+      ns="ccConfig"
+      filename="CLAUDE.md"
+      template="# Project memory"
+      onClose={() => {}}
+      onCreate={onCreate}
+      {...over}
+    />
+  );
+  return { onCreate };
+}
+
+describe("ProjectMemoryModal", () => {
+  it("sends the typed directory and the edited content", async () => {
+    const { onCreate } = renderModal();
+    await userEvent.type(screen.getByLabelText(/project directory/i), "/home/me/typed");
+    const body = screen.getByLabelText(/content/i);
+    await userEvent.clear(body);
+    await userEvent.type(body, "hello");
+    await userEvent.click(screen.getByRole("button", { name: /create/i }));
+    expect(onCreate).toHaveBeenCalledWith({ dir: "/home/me/typed", content: "hello" });
+  });
+
+  it("refuses to submit without a directory", async () => {
+    const { onCreate } = renderModal();
+    await userEvent.click(screen.getByRole("button", { name: /create/i }));
+    expect(onCreate).not.toHaveBeenCalled();
+    expect(await screen.findByText(/directory is required/i)).toBeInTheDocument();
+  });
+
+  it("offers the dashboard's known projects as suggestions, not as the only choice", async () => {
+    renderModal();
+    // A datalist suggests; it does not constrain. A project the dashboard has
+    // never run in is precisely this modal's reason to exist, so the input
+    // stays free text.
+    const input = screen.getByLabelText(/project directory/i);
+    expect(input.tagName).toBe("INPUT");
+    // jsdom exposes no accessible role for datalist options, so query the DOM.
+    await vi.waitFor(() => {
+      const list = document.getElementById(input.getAttribute("list")!);
+      expect(list?.querySelector('option[value="/home/me/known-project"]')).not.toBeNull();
+    });
+  });
+
+  it("renders from the Codex namespace too", async () => {
+    renderModal({ ns: "codexConfig", filename: "AGENTS.md" });
+    expect(await screen.findByText(/Create AGENTS\.md for another project/i)).toBeInTheDocument();
+    // A missing key renders as the bare key path — catch that directly.
+    expect(screen.queryByText(/projectMemory\./)).not.toBeInTheDocument();
+  });
+
+  it("shows the server's rejection instead of closing", async () => {
+    const onCreate = vi.fn().mockRejectedValue(new Error("CLAUDE.md already exists in /p"));
+    render(
+      <ProjectMemoryModal
+        ns="ccConfig"
+        filename="CLAUDE.md"
+        template=""
+        onClose={() => {}}
+        onCreate={onCreate}
+      />
+    );
+    await userEvent.type(screen.getByLabelText(/project directory/i), "/p");
+    await userEvent.click(screen.getByRole("button", { name: /create/i }));
+    expect(await screen.findByText(/already exists in \/p/i)).toBeInTheDocument();
+  });
+});

client/src/components/config/configPrimitives.tsx

@@ -0,0 +1,59 @@
+/**
+ * @file configPrimitives.tsx
+ * @description Small tool-agnostic atoms shared by the config-explorer UI
+ * (Claude Code today, Codex next): an empty-state card, a skeleton-row list
+ * placeholder, a copy-to-clipboard button, and a byte-size formatter. None
+ * of these know about any particular tool's API.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Copy, Check } from "lucide-react";
+
+export function CopyButton({ value }: { value: string }) {
+  const { t } = useTranslation("ccConfig");
+  const [copied, setCopied] = useState(false);
+  return (
+    <button
+      onClick={async () => {
+        try {
+          await navigator.clipboard.writeText(value);
+          setCopied(true);
+          setTimeout(() => setCopied(false), 1500);
+        } catch {
+          /* clipboard unavailable */
+        }
+      }}
+      className="text-[10px] font-medium px-1.5 py-1 rounded border border-border bg-surface-1 hover:bg-surface-3 text-fg-secondary hover:text-fg-primary inline-flex items-center gap-1 flex-shrink-0"
+      title={t("common.copyPath")}
+    >
+      {copied ? <Check className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
+    </button>
+  );
+}
+
+export function Empty() {
+  const { t } = useTranslation("ccConfig");
+  return (
+    <div className="rounded-lg border border-dashed border-border bg-surface-2 px-4 py-8 text-center text-sm text-fg-muted">
+      {t("common.empty")}
+    </div>
+  );
+}
+
+export function SkeletonRows({ n }: { n: number }) {
+  return (
+    <div className="space-y-2">
+      {Array.from({ length: n }).map((_, i) => (
+        <div key={i} className="h-16 rounded-lg border border-border bg-surface-2 animate-pulse" />
+      ))}
+    </div>
+  );
+}
+
+export function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}

client/src/components/conversation/MarkdownContent.tsx

@@ -320,7 +320,7 @@ function renderInline(text: string, baseKey = ""): React.ReactNode[] {
           href={linkM[2]!}
           target="_blank"
           rel="noopener noreferrer"
-          className="text-violet-300 hover:text-violet-200 underline underline-offset-2 decoration-violet-400/40 hover:decoration-violet-300/70"
+          className="text-violet-700 dark:text-violet-300 hover:text-violet-800 dark:hover:text-violet-200 underline underline-offset-2 decoration-violet-400/40 hover:decoration-violet-300/70"
         >
           {renderInline(linkM[1]!, `${baseKey}-l${n}`)}
         </a>
@@ -337,7 +337,7 @@ function renderInline(text: string, baseKey = ""): React.ReactNode[] {
           href={urlM[0]}
           target="_blank"
           rel="noopener noreferrer"
-          className="text-violet-300 hover:text-violet-200 underline underline-offset-2 decoration-violet-400/40 hover:decoration-violet-300/70 break-all"
+          className="text-violet-700 dark:text-violet-300 hover:text-violet-800 dark:hover:text-violet-200 underline underline-offset-2 decoration-violet-400/40 hover:decoration-violet-300/70 break-all"
         >
           {urlM[0]}
         </a>
@@ -428,7 +428,10 @@ export function MarkdownContent({ text, dense = false }: MarkdownContentProps) {
               );
             }
             return (
-              <ul key={idx} className="list-disc pl-5 space-y-1 marker:text-violet-400/60">
+              <ul
+                key={idx}
+                className="list-disc pl-5 space-y-1 marker:text-violet-700/60 dark:marker:text-violet-400/60"
+              >
                 {b.items.map((item, i) => (
                   <li key={i} className="text-sm text-fg-secondary">
                     {renderListItem(item, `li${idx}-${i}`)}

client/src/components/conversation/MessageList.tsx

@@ -82,25 +82,25 @@ const SENDER_STYLES: Record<
     label: "User",
     icon: User,
     avatarRing:
-      "bg-gradient-to-br from-blue-600/30 to-cyan-500/20 text-blue-300 ring-1 ring-blue-500/30",
+      "bg-gradient-to-br from-blue-600/30 to-cyan-500/20 text-blue-700 dark:text-blue-300 ring-1 ring-blue-500/30",
     accentBar: "before:bg-blue-600/40",
-    headerText: "text-blue-300",
+    headerText: "text-blue-700 dark:text-blue-300",
   },
   assistant: {
     label: "Assistant",
     icon: Bot,
     avatarRing:
-      "bg-gradient-to-br from-violet-500/30 to-fuchsia-500/20 text-violet-200 ring-1 ring-violet-400/30",
+      "bg-gradient-to-br from-violet-500/30 to-fuchsia-500/20 text-violet-800 dark:text-violet-200 ring-1 ring-violet-400/30",
     accentBar: "before:bg-violet-500/40",
-    headerText: "text-violet-200",
+    headerText: "text-violet-800 dark:text-violet-200",
   },
   orchestrator: {
     label: "Main agent",
     icon: Workflow,
     avatarRing:
-      "bg-gradient-to-br from-teal-500/30 to-status-success/20 text-teal-200 ring-1 ring-teal-400/30",
+      "bg-gradient-to-br from-teal-500/30 to-status-success/20 text-teal-800 dark:text-teal-200 ring-1 ring-teal-400/30",
     accentBar: "before:bg-teal-500/40",
-    headerText: "text-teal-200",
+    headerText: "text-teal-800 dark:text-teal-200",
   },
   system: {
     label: "System",
@@ -169,7 +169,7 @@ function SessionEventRow({ title, timestamp }: { title?: string; timestamp: stri
   return (
     <div className="flex items-center justify-center py-1">
       <div className="inline-flex items-center gap-2 text-[11px] text-fg-secondary bg-surface-2/70 border border-surface-3 rounded-full px-3 py-1 max-w-full">
-        <Pencil className="w-3 h-3 text-violet-300/70 flex-shrink-0" />
+        <Pencil className="w-3 h-3 text-violet-700/70 dark:text-violet-300/70 flex-shrink-0" />
         <span className="text-fg-muted">Renamed session →</span>
         <span className="text-fg-secondary font-medium truncate">{title || "(untitled)"}</span>
         {timestamp && (
@@ -253,11 +253,13 @@ function renderSegment(seg: TuiSegment, key: number): React.ReactNode {
         <CollapsibleBlock
           key={key}
           text={seg.text}
-          icon={<ScrollText className="w-3.5 h-3.5 text-violet-400/60 flex-shrink-0" />}
+          icon={
+            <ScrollText className="w-3.5 h-3.5 text-violet-700/60 dark:text-violet-400/60 flex-shrink-0" />
+          }
           title="Persisted output"
           borderClass="border-violet-500/20"
           bgClass="bg-violet-500/5"
-          textClass="text-violet-300/80"
+          textClass="text-violet-700/80 dark:text-violet-300/80"
         />
       );
     case "text": {
@@ -394,7 +396,9 @@ export function MessageList({ messages, loading }: MessageListProps) {
                   <span className="text-[10px] text-fg-muted font-mono inline-flex items-center gap-1">
                     <span className="text-status-success/70">↓ {fmt(msg.usage.input_tokens)}</span>
                     <span className="text-fg-muted">·</span>
-                    <span className="text-orange-300/70">↑ {fmt(msg.usage.output_tokens)}</span>
+                    <span className="text-orange-700/70 dark:text-orange-300/70">
+                      ↑ {fmt(msg.usage.output_tokens)}
+                    </span>
                   </span>
                 )}
                 {msg.timestamp && (
@@ -413,11 +417,13 @@ export function MessageList({ messages, loading }: MessageListProps) {
                       <CollapsibleBlock
                         key={bIdx}
                         text={block.text}
-                        icon={<ScrollText className="w-3.5 h-3.5 text-cyan-400/60 flex-shrink-0" />}
+                        icon={
+                          <ScrollText className="w-3.5 h-3.5 text-cyan-700/60 dark:text-cyan-400/60 flex-shrink-0" />
+                        }
                         title="Task Notification"
                         borderClass="border-cyan-500/20"
                         bgClass="bg-cyan-500/5"
-                        textClass="text-cyan-400/80"
+                        textClass="text-cyan-700/80 dark:text-cyan-400/80"
                       />
                     );
                   }

client/src/components/conversation/ToolCallBlock.tsx

@@ -156,7 +156,7 @@ function renderInput(toolUse: TranscriptContent) {
     return (
       <div className="space-y-2">
         <div className="flex items-center gap-1.5 text-xs text-fg-secondary">
-          <FileText className="w-3.5 h-3.5 text-violet-400" />
+          <FileText className="w-3.5 h-3.5 text-violet-700 dark:text-violet-400" />
           <span className="font-mono">{obj.file_path}</span>
           {obj.replace_all === true && (
             <span className="text-[10px] uppercase tracking-wider text-status-warning/80 bg-status-warning/10 border border-status-warning/20 rounded px-1.5 py-0.5">
@@ -178,7 +178,7 @@ function renderInput(toolUse: TranscriptContent) {
   if (tool === "read" && typeof obj.file_path === "string") {
     return (
       <div className="flex items-center gap-1.5 text-xs text-fg-secondary bg-surface-4/40 border border-surface-3 rounded-md px-3 py-2">
-        <FileText className="w-3.5 h-3.5 text-sky-400 flex-shrink-0" />
+        <FileText className="w-3.5 h-3.5 text-sky-700 dark:text-sky-400 flex-shrink-0" />
         <span className="font-mono break-all">{obj.file_path}</span>
         {(typeof obj.offset === "number" || typeof obj.limit === "number") && (
           <span className="text-fg-muted font-mono ml-auto flex-shrink-0">
@@ -198,7 +198,7 @@ function renderInput(toolUse: TranscriptContent) {
           <span className="text-fg-muted font-mono uppercase tracking-wider text-[10px]">
             Pattern
           </span>
-          <code className="font-mono text-cyan-300 bg-surface-4 border border-surface-3 rounded px-1.5 py-0.5">
+          <code className="font-mono text-cyan-700 dark:text-cyan-300 bg-surface-4 border border-surface-3 rounded px-1.5 py-0.5">
             {obj.pattern}
           </code>
         </div>

client/src/components/conversation/toolStyle.ts

@@ -83,8 +83,8 @@ export interface ToolStyle {
 
 const VIOLET: ToolStyle = {
   Icon: Wrench,
-  text: "text-violet-300",
-  chip: "bg-violet-500/15 text-violet-300",
+  text: "text-violet-700 dark:text-violet-300",
+  chip: "bg-violet-500/15 text-violet-700 dark:text-violet-300",
   bar: "bg-violet-500/60",
   border: "border-violet-500/20",
 };
@@ -92,99 +92,99 @@ const VIOLET: ToolStyle = {
 const STYLES: Record<string, ToolStyle> = {
   bash: {
     Icon: Terminal,
-    text: "text-emerald-300",
-    chip: "bg-emerald-500/15 text-emerald-300",
+    text: "text-emerald-700 dark:text-emerald-300",
+    chip: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300",
     bar: "bg-emerald-500/60",
     border: "border-emerald-500/20",
   },
   read: {
     Icon: FileText,
-    text: "text-sky-300",
-    chip: "bg-sky-500/15 text-sky-300",
+    text: "text-sky-700 dark:text-sky-300",
+    chip: "bg-sky-500/15 text-sky-700 dark:text-sky-300",
     bar: "bg-sky-500/60",
     border: "border-sky-500/20",
   },
   write: {
     Icon: FilePlus2,
-    text: "text-violet-300",
-    chip: "bg-violet-500/15 text-violet-300",
+    text: "text-violet-700 dark:text-violet-300",
+    chip: "bg-violet-500/15 text-violet-700 dark:text-violet-300",
     bar: "bg-violet-500/60",
     border: "border-violet-500/20",
   },
   edit: {
     Icon: FilePen,
-    text: "text-amber-300",
-    chip: "bg-amber-500/15 text-amber-300",
+    text: "text-amber-700 dark:text-amber-300",
+    chip: "bg-amber-500/15 text-amber-700 dark:text-amber-300",
     bar: "bg-amber-500/60",
     border: "border-amber-500/20",
   },
   multiedit: {
     Icon: FilePen,
-    text: "text-amber-300",
-    chip: "bg-amber-500/15 text-amber-300",
+    text: "text-amber-700 dark:text-amber-300",
+    chip: "bg-amber-500/15 text-amber-700 dark:text-amber-300",
     bar: "bg-amber-500/60",
     border: "border-amber-500/20",
   },
   grep: {
     Icon: Search,
-    text: "text-cyan-300",
-    chip: "bg-cyan-500/15 text-cyan-300",
+    text: "text-cyan-700 dark:text-cyan-300",
+    chip: "bg-cyan-500/15 text-cyan-700 dark:text-cyan-300",
     bar: "bg-cyan-500/60",
     border: "border-cyan-500/20",
   },
   glob: {
     Icon: FolderTree,
-    text: "text-cyan-300",
-    chip: "bg-cyan-500/15 text-cyan-300",
+    text: "text-cyan-700 dark:text-cyan-300",
+    chip: "bg-cyan-500/15 text-cyan-700 dark:text-cyan-300",
     bar: "bg-cyan-500/60",
     border: "border-cyan-500/20",
   },
   webfetch: {
     Icon: Globe,
-    text: "text-blue-300",
-    chip: "bg-blue-500/15 text-blue-300",
+    text: "text-blue-700 dark:text-blue-300",
+    chip: "bg-blue-500/15 text-blue-700 dark:text-blue-300",
     bar: "bg-blue-500/60",
     border: "border-blue-500/20",
   },
   websearch: {
     Icon: Globe,
-    text: "text-blue-300",
-    chip: "bg-blue-500/15 text-blue-300",
+    text: "text-blue-700 dark:text-blue-300",
+    chip: "bg-blue-500/15 text-blue-700 dark:text-blue-300",
     bar: "bg-blue-500/60",
     border: "border-blue-500/20",
   },
   task: {
     Icon: Bot,
-    text: "text-pink-300",
-    chip: "bg-pink-500/15 text-pink-300",
+    text: "text-pink-700 dark:text-pink-300",
+    chip: "bg-pink-500/15 text-pink-700 dark:text-pink-300",
     bar: "bg-pink-500/60",
     border: "border-pink-500/20",
   },
   agent: {
     Icon: Bot,
-    text: "text-pink-300",
-    chip: "bg-pink-500/15 text-pink-300",
+    text: "text-pink-700 dark:text-pink-300",
+    chip: "bg-pink-500/15 text-pink-700 dark:text-pink-300",
     bar: "bg-pink-500/60",
     border: "border-pink-500/20",
   },
   todowrite: {
     Icon: ListTodo,
-    text: "text-rose-300",
-    chip: "bg-rose-500/15 text-rose-300",
+    text: "text-rose-700 dark:text-rose-300",
+    chip: "bg-rose-500/15 text-rose-700 dark:text-rose-300",
     bar: "bg-rose-500/60",
     border: "border-rose-500/20",
   },
   schedulewakeup: {
     Icon: Clock,
-    text: "text-orange-300",
-    chip: "bg-orange-500/15 text-orange-300",
+    text: "text-orange-700 dark:text-orange-300",
+    chip: "bg-orange-500/15 text-orange-700 dark:text-orange-300",
     bar: "bg-orange-500/60",
     border: "border-orange-500/20",
   },
   skill: {
     Icon: Sparkles,
-    text: "text-fuchsia-300",
-    chip: "bg-fuchsia-500/15 text-fuchsia-300",
+    text: "text-fuchsia-700 dark:text-fuchsia-300",
+    chip: "bg-fuchsia-500/15 text-fuchsia-700 dark:text-fuchsia-300",
     bar: "bg-fuchsia-500/60",
     border: "border-fuchsia-500/20",
   },

client/src/components/event-views/primitives.tsx

@@ -289,7 +289,7 @@ function HunkView({ hunk }: { hunk: DiffHunk }) {
   let newLine = hunk.newStart;
   return (
     <div>
-      <div className="px-3 py-1 text-[10px] text-cyan-300 bg-cyan-500/10 border-y border-cyan-500/20 font-mono">
+      <div className="px-3 py-1 text-[10px] text-cyan-700 dark:text-cyan-300 bg-cyan-500/10 border-y border-cyan-500/20 font-mono">
         @@ -{hunk.oldStart},{hunk.oldLines} +{hunk.newStart},{hunk.newLines} @@
       </div>
       <table className="w-full border-collapse">
@@ -301,7 +301,7 @@ function HunkView({ hunk }: { hunk: DiffHunk }) {
             const showNew = kind !== "remove";
             const rowBg =
               kind === "add"
-                ? "bg-green-500/10 text-green-200"
+                ? "bg-green-500/10 text-green-800 dark:text-green-200"
                 : kind === "remove"
                   ? "bg-status-danger/10 text-status-danger"
                   : "text-fg-secondary";
@@ -372,7 +372,7 @@ function ValueCell({ value }: { value: unknown }) {
       <span
         className={`inline-block px-2 py-0.5 rounded border text-[11px] font-mono ${
           value
-            ? "text-green-400 border-green-500/30 bg-green-500/10"
+            ? "text-green-700 dark:text-green-400 border-green-500/30 bg-green-500/10"
             : "text-fg-secondary border-border-light/30 bg-surface-4/10"
         }`}
       >
@@ -445,7 +445,7 @@ export function MatchList({ matches }: { matches: GrepMatch[] }) {
     <ul className="divide-y divide-border border border-border rounded overflow-hidden text-[11px] max-h-80 overflow-y-auto font-mono">
       {matches.map((m, i) => (
         <li key={i} className="px-3 py-1 text-fg-secondary break-all">
-          {m.file && <span className="text-cyan-300">{m.file}</span>}
+          {m.file && <span className="text-cyan-700 dark:text-cyan-300">{m.file}</span>}
           {m.line != null && <span className="text-fg-muted">:{m.line}</span>}
           {m.text && <span className="text-fg-secondary">: {m.text}</span>}
         </li>

client/src/components/lanes/AddLaneModal.tsx

@@ -19,13 +19,15 @@
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { FolderOpen } from "lucide-react";
+import { ChevronDown, FolderOpen } from "lucide-react";
 import { ConfirmModal } from "../ConfirmModal";
 import { CwdAutocomplete } from "../run/RunSetup";
 import { FolderBrowseModal } from "./FolderBrowseModal";
 import { api } from "../../lib/api";
-import type { CwdSuggestion } from "../../lib/api";
-import type { Lane, LaneTool } from "../../lib/types";
+import type { AiRouter, CwdSuggestion } from "../../lib/api";
+import type { Lane, LaneWorktree } from "../../lib/types";
+import { useAiTools } from "../../hooks/useAiTools";
+import { AiToolIcon } from "../AiToolIcon";
 
 /** Polls the lane until the background `git worktree add` finishes (status
  *  leaves "provisioning"), or gives up after `timeoutMs`. Returns the final
@@ -77,11 +79,16 @@ export function AddLaneModal({
   onClose,
   onAdded,
   cwdSuggestions,
+  prefill,
 }: {
   open: boolean;
   onClose: () => void;
   /** Called with the newly created (possibly still-provisioning) lane. */
   onAdded: (lane: Lane) => void;
+  /** Fields to open with, for "new lane from this repo" in a lane's git bar.
+   *  A branch here means the sibling worktree checks out THAT branch, which
+   *  is the existing-branch mode — the reason that mode exists (issue #34). */
+  prefill?: { sourceRepo?: string; branch?: string } | null;
   /** The same suggestion list the Run form already fetched (dashboard cwd,
    *  home, recently-used paths) — reused rather than fetched a second time. */
   cwdSuggestions: CwdSuggestion[];
@@ -92,18 +99,44 @@ export function AddLaneModal({
   const [title, setTitle] = useState("");
   const [branch, setBranch] = useState("");
   const [branches, setBranches] = useState<string[] | null>(null);
+  const [worktrees, setWorktrees] = useState<LaneWorktree[]>([]);
+  // Two ways to start a worktree lane, and git's own rule decides which is
+  // possible: "new" forks a branch off `base`, "existing" checks out a branch
+  // that is already there — which git allows exactly once across all of a
+  // repo's worktrees, hence the busy markers below.
+  const [branchMode, setBranchMode] = useState<"new" | "existing">("new");
   const [base, setBase] = useState("");
-  const [pipeline, setPipeline] = useState("default");
-  const [pipelines, setPipelines] = useState<{ id: string; name: string; nodes: unknown[] }[]>([]);
+  // "native" is the built-in profile, not a null state — see server/lib/ai-routers.js.
+  const [router, setRouter] = useState("native");
+  const [routers, setRouters] = useState<AiRouter[]>([]);
+  const [routersLoaded, setRoutersLoaded] = useState(false);
   const [branchesError, setBranchesError] = useState<string | null>(null);
-  const [tool, setTool] = useState<LaneTool>("claude");
+  // null = the default AI tool (Settings → AI Tools), resolved at submit time.
+  const [pickedTool, setPickedTool] = useState<string | null>(null);
+  const aiTools = useAiTools();
+  const defaultTool = aiTools.defaultId ?? "claude";
+  const tool = pickedTool ?? defaultTool;
+  // Installed + enabled, the default first.
+  const toolChoices = aiTools.tools
+    .filter((x) => x.installed && x.enabled)
+    .sort((a, b) => Number(b.id === defaultTool) - Number(a.id === defaultTool));
+  const [toolListOpen, setToolListOpen] = useState(false);
+  const pickTool = (id: string) => {
+    setPickedTool(id === defaultTool ? null : id);
+    // A tool with no endpoint to rewrite runs native only (see router-apply.js).
+    if (!aiTools.byId(id)?.routerCapable) setRouter("native");
+    setToolListOpen(false);
+  };
+  const noTools = aiTools.loaded && aiTools.defaultId === null;
+  const toolRouterCapable =
+    aiTools.byId(tool)?.routerCapable ?? (tool === "claude" || tool === "codex");
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [browseOpen, setBrowseOpen] = useState(false);
   const [setupResult, setSetupResult] = useState<{
     profile: "scaffolded" | "skipped" | "failed";
-    agents: "ok" | "failed";
     mcp: "ok" | "failed";
+    router: "ok" | "skipped" | "failed";
   } | null>(null);
 
   const reset = () => {
@@ -112,31 +145,54 @@ export function AddLaneModal({
     setTitle("");
     setBranch("");
     setBranches(null);
+    setWorktrees([]);
+    setBranchMode("new");
     setBase("");
-    setPipeline("default");
-    setTool("claude");
+    setRouter("native");
+    setRoutersLoaded(false);
+    setPickedTool(null);
     setBranchesError(null);
     setError(null);
     setBusy(false);
     setSetupResult(null);
   };
 
-  // The template a lane is created with is the ONLY chance to get it right
-  // from here: nothing else in the UI can change it afterwards, so a lane
-  // silently born on `default` renders an 8-node map for a 16-node workflow.
-  // Fetched on open (templates are file-backed and can change between opens).
+  // A prefill only ever seeds the fields ON OPEN: the user may then change
+  // anything, and re-applying it on every render would fight them for the box.
+  useEffect(() => {
+    if (!open || !prefill) return;
+    if (prefill.sourceRepo) setSourceRepo(prefill.sourceRepo);
+    if (prefill.branch) {
+      setBranch(prefill.branch);
+      setBranchMode("existing");
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  // A session that boots on the vendor's API keeps talking to it for its whole
+  // life, so the router has to be picked here, before the lane exists.
   useEffect(() => {
     if (!open) return;
     let cancelled = false;
-    api.lanes
-      .pipelines()
+    api.aiRouters
+      .list()
       .then((r) => {
-        if (!cancelled) setPipelines(r.pipelines);
+        if (cancelled) return;
+        setRouters(r.items);
+        // A profile deleted in another tab while this modal sat open would
+        // otherwise stay selected in state while the select showed no matching
+        // option — and submit would send a name the server no longer knows.
+        setRouter((current) =>
+          current === "native" || r.items.some((item) => item.name === current) ? current : "native"
+        );
       })
       .catch(() => {
-        // Quiet: the select just falls back to the single `default` option
-        // below, and the lane still gets created.
-        if (!cancelled) setPipelines([]);
+        // Quiet: with no list the radio simply offers Native, and the lane is
+        // still created — a router is an optional extra, never a precondition.
+        if (!cancelled) setRouters([]);
+      })
+      .finally(() => {
+        if (!cancelled) setRoutersLoaded(true);
       });
     return () => {
       cancelled = true;
@@ -153,6 +209,7 @@ export function AddLaneModal({
     const path = sourceRepo.trim();
     if (!path) {
       setBranches(null);
+      setWorktrees([]);
       setBase("");
       setBranchesError(null);
       return;
@@ -163,6 +220,7 @@ export function AddLaneModal({
         const r = await api.lanes.branches(path);
         if (lookedUpFor.current !== path) return; // a newer path superseded this one
         setBranches(r.branches);
+        setWorktrees(r.worktrees || []);
         setBase(r.current || r.branches[0] || "");
         setBranchesError(null);
       } catch {
@@ -170,6 +228,7 @@ export function AddLaneModal({
         // Not yet a valid repo path (still being typed, or genuinely wrong) -
         // quiet by design, the same way CwdAutocomplete never errors either.
         setBranches(null);
+        setWorktrees([]);
         setBase("");
         setBranchesError(t("addLaneNotARepo"));
       }
@@ -177,6 +236,10 @@ export function AddLaneModal({
     return () => window.clearTimeout(timer);
   }, [mode, sourceRepo, t]);
 
+  // Native is the built-in profile, so this is one call either way — there is
+  // no "no router" branch to keep in step with the real one.
+  const applyRouter = (laneId: number) => api.lanes.routerApply(laneId, router);
+
   const submit = async () => {
     const repo = sourceRepo.trim();
     const name = title.trim();
@@ -189,10 +252,40 @@ export function AddLaneModal({
         const result = await api.lanes.ensure({
           cwd: repo,
           title: name || undefined,
-          pipeline,
           tool,
+          // THIS directory, not a lane on a parent of it (#42).
+          exact: true,
         });
+        // Report the lane the INSTANT it exists server-side. Everything after
+        // this is post-creation setup that can fail on its own, and letting one
+        // of those failures skip `onAdded` would leave a real lane invisible in
+        // the list until some unrelated refetch happened to pick it up.
+        // Worktree mode below already works this way.
         onAdded(result.lane);
+        // Nothing was created: closing now reads as success while no new card
+        // appears (#42). Say which lane already owns the folder instead.
+        if (!result.created) {
+          setError(
+            t("addLaneExists", {
+              id: result.lane.id,
+              title: result.lane.title || result.lane.cwd,
+            })
+          );
+          setBusy(false);
+          return;
+        }
+
+        // A session that booted on the vendor's API would keep talking to it
+        // for its whole life, so the router is applied before anything runs.
+        try {
+          await applyRouter(result.lane.id);
+        } catch (routerErr) {
+          // The lane exists and is already listed — name what did not finish
+          // instead of closing on a half-set-up lane.
+          setError(routerErr instanceof Error ? routerErr.message : String(routerErr));
+          setBusy(false);
+          return;
+        }
         reset();
         onClose();
       } catch (err) {
@@ -202,14 +295,17 @@ export function AddLaneModal({
       return;
     }
 
-    if (!branches || !name || !branch.trim()) return;
+    // A blank branch in "new" mode is legal and deliberate: the server names
+    // it `${LANE_BRANCH_PREFIX}${slug}`, which is what the placeholder previews.
+    if (!branches || !name || (branchMode === "existing" && !branch.trim())) return;
     try {
       const result = await api.lanes.worktree({
         sourceRepo: repo,
         title: name,
-        base: base || undefined,
-        branch: branch.trim(),
-        pipeline,
+        // An existing branch is checked out as it stands; `base` only means
+        // something when a branch is being forked.
+        base: branchMode === "new" ? base || undefined : undefined,
+        branch: branch.trim() || undefined,
         tool,
       });
       onAdded(result.lane);
@@ -217,7 +313,7 @@ export function AddLaneModal({
       // POST /worktree returns as soon as the DB row exists (202) — the
       // actual `git worktree add` runs afterward, in the background, on the
       // server. Firing setup against the lane's cwd before that finishes
-      // means agents/mcp write into a directory that doesn't exist yet, so
+      // means mcp writes into a directory that doesn't exist yet, so
       // wait for provisioning to leave the "provisioning" status first.
       const provisionedLane = await waitForProvisioned(result.lane.id);
       if (!provisionedLane || provisionedLane.status === "failed") {
@@ -226,35 +322,47 @@ export function AddLaneModal({
         return;
       }
 
-      const [profileOutcome, agentsOutcome, mcpOutcome] = await Promise.allSettled([
+      const [profileOutcome, mcpOutcome, routerOutcome] = await Promise.allSettled([
         api.lanes.profileInit(result.lane.id),
-        api.lanes.agentsInstall(result.lane.id),
         api.lanes.mcpSync(result.lane.id),
+        applyRouter(result.lane.id),
       ]);
-      setSetupResult({
+      const outcome = {
         profile:
           profileOutcome.status === "fulfilled"
             ? profileOutcome.value.scaffolded
               ? "scaffolded"
               : "skipped"
             : "failed",
-        agents: agentsOutcome.status === "fulfilled" ? "ok" : "failed",
         mcp: mcpOutcome.status === "fulfilled" ? "ok" : "failed",
-      });
+        router:
+          routerOutcome.status !== "fulfilled" ? "failed" : router === "native" ? "skipped" : "ok",
+      } as const;
+      const anyFailed = Object.values(outcome).includes("failed");
+      setSetupResult(outcome);
 
       if (import.meta.env.DEV) {
         console.info("[add-lane] auto-setup result:", {
           profile:
             profileOutcome.status === "fulfilled" ? profileOutcome.value : profileOutcome.reason,
-          agents: agentsOutcome.status === "fulfilled" ? agentsOutcome.value : agentsOutcome.reason,
           mcp: mcpOutcome.status === "fulfilled" ? mcpOutcome.value : mcpOutcome.reason,
+          // Never the profile itself: it would put an endpoint and a lane id in
+          // the browser console. (The key is never sent here at all.)
+          router: routerOutcome.status,
         });
       }
 
-      // Leave the modal open so the setup summary below stays on screen; the
-      // user dismisses it themselves (Cancel/X) once they've seen it, rather
-      // than racing a timer that can close before they've looked at it.
+      // A clean setup has nothing to tell anyone, so the lane is made and the
+      // dialog is done — leaving it up read as "still working" (the confirm
+      // button is dead from here, since the lane already exists) with no
+      // obvious way out. A summary is kept on screen only when a step FAILED,
+      // and then the confirm button becomes a plain close, because that is the
+      // one case where the user has something to read before dismissing it.
       setBusy(false);
+      if (!anyFailed) {
+        reset();
+        onClose();
+      }
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err));
       setBusy(false);
@@ -279,21 +387,33 @@ export function AddLaneModal({
     onClose();
   }, [onClose, browseOpen]);
 
+  // A summary on screen means the lane already exists and a step failed, so
+  // the confirm button has no second creation to run: it closes instead. That
+  // is the difference between a dialog that is finished and one that is stuck.
+  const done = !!setupResult;
   const disabled =
-    !!setupResult ||
-    !sourceRepo.trim() ||
-    (mode === "worktree" && (!title.trim() || !branches || !branch.trim()));
+    !done &&
+    (!sourceRepo.trim() ||
+      (mode === "worktree" &&
+        (!title.trim() || !branches?.length || (branchMode === "existing" && !branch.trim()))));
+
+  /** branch name -> the worktree directory already holding it. git allows one
+   *  checkout per branch, so these are the branches this form cannot use. */
+  const busyBranches = new Map(
+    worktrees.filter((w) => w.branch).map((w) => [w.branch as string, w.path])
+  );
+  const freeBranches = (branches || []).filter((b) => !busyBranches.has(b));
 
   return (
     <ConfirmModal
       open={open}
       title={t("addLane")}
-      confirmLabel={t("add")}
+      confirmLabel={done ? t("addLaneSetupClose") : t("add")}
       cancelLabel={t("destructive.cancel")}
       destructive={false}
       busy={busy}
       disabled={disabled}
-      onConfirm={submit}
+      onConfirm={done ? handleCancel : submit}
       onCancel={handleCancel}
     >
       <div className="space-y-3">
@@ -314,18 +434,62 @@ export function AddLaneModal({
 
         <div>
           <label className="mb-1 block text-xs text-fg-secondary">{t("addLaneToolHint")}</label>
-          <div className="flex items-center rounded-md border border-border bg-surface-2 p-0.5">
-            <Seg
-              active={tool === "claude"}
-              label={t("addLaneToolClaude")}
-              onClick={() => setTool("claude")}
-            />
-            <Seg
-              active={tool === "codex"}
-              label={t("addLaneToolCodex")}
-              onClick={() => setTool("codex")}
-            />
-          </div>
+          {noTools ? (
+            <p className="rounded-md border border-status-warning/40 bg-status-warning/10 px-2 py-1.5 text-xs text-status-warning">
+              {t("addLaneNoTools")}{" "}
+              <a href="/settings#ai-tools" className="underline">
+                {t("addLaneNoToolsLink")}
+              </a>
+            </p>
+          ) : (
+            <div>
+              <button
+                type="button"
+                aria-expanded={toolListOpen}
+                disabled={toolChoices.length < 2}
+                onClick={() => setToolListOpen((o) => !o)}
+                className="flex w-full items-center gap-2 rounded-md border border-border bg-surface-2 px-2.5 py-1.5 text-left text-sm text-fg-primary hover:bg-surface-3 disabled:cursor-default disabled:hover:bg-surface-2"
+              >
+                <AiToolIcon tool={{ id: tool, label: aiTools.label(tool) }} className="h-5 w-5" />
+                <span className="min-w-0 flex-1 truncate">{aiTools.label(tool)}</span>
+                {tool === defaultTool && (
+                  <span className="rounded-full bg-accent/15 px-2 py-0.5 text-[10px] font-medium text-accent">
+                    {t("addLaneToolDefaultBadge")}
+                  </span>
+                )}
+                {toolChoices.length > 1 && (
+                  <ChevronDown
+                    aria-hidden
+                    className={`h-4 w-4 text-fg-muted transition-transform ${toolListOpen ? "rotate-180" : ""}`}
+                  />
+                )}
+              </button>
+              {toolListOpen && (
+                <div
+                  role="group"
+                  aria-label={t("addLaneToolHint")}
+                  className="mt-1.5 grid grid-cols-2 gap-1.5 sm:grid-cols-3"
+                >
+                  {toolChoices.map((x) => (
+                    <button
+                      key={x.id}
+                      type="button"
+                      aria-pressed={x.id === tool}
+                      onClick={() => pickTool(x.id)}
+                      className={`flex items-center gap-2 rounded-md border px-2 py-1.5 text-left text-xs transition-colors ${
+                        x.id === tool
+                          ? "border-accent bg-accent/10 text-accent"
+                          : "border-border bg-surface-2 text-fg-secondary hover:bg-surface-3 hover:text-fg-primary"
+                      }`}
+                    >
+                      <AiToolIcon tool={x} className="h-5 w-5" />
+                      <span className="min-w-0 flex-1 truncate">{x.label}</span>
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
         </div>
 
         <div>
@@ -356,6 +520,37 @@ export function AddLaneModal({
           </p>
         </div>
 
+        {/* What this repo already has checked out. Without it the form asked
+            for a branch in the dark: the one fact that decides whether a
+            branch can be used at all is which worktree is holding it. */}
+        {mode === "worktree" && worktrees.length > 0 && (
+          <div
+            data-testid="add-lane-worktrees"
+            className="rounded-md border border-border-light bg-surface-0 p-2"
+          >
+            <p className="mb-1 text-[10px] font-medium text-fg-secondary">
+              {t("addLaneWorktreesTitle", { count: worktrees.length })}
+            </p>
+            <ul className="space-y-0.5">
+              {worktrees.slice(0, 8).map((w) => (
+                <li key={w.path} className="flex items-baseline gap-1.5 text-[10px]">
+                  <span className="shrink-0 font-mono text-fg-primary">
+                    ⑂ {w.branch || t("addLaneWorktreeDetached")}
+                  </span>
+                  <span className="truncate text-fg-muted" title={w.path}>
+                    {w.path}
+                  </span>
+                </li>
+              ))}
+              {worktrees.length > 8 && (
+                <li className="text-[10px] text-fg-muted">
+                  {t("addLaneWorktreesMore", { count: worktrees.length - 8 })}
+                </li>
+              )}
+            </ul>
+          </div>
+        )}
+
         <div>
           <label className="mb-1 block text-xs text-fg-secondary" htmlFor="add-lane-title">
             {t("addLaneTitleLabel")}
@@ -365,74 +560,233 @@ export function AddLaneModal({
             value={title}
             onChange={(e) => setTitle(e.target.value)}
             placeholder={t("addLaneTitlePlaceholder")}
-            className="w-full rounded-md border border-border-light bg-surface-0 px-3 py-1.5 text-xs text-fg-primary placeholder:text-fg-muted focus:border-blue-500 focus:outline-none"
+            className="w-full rounded-md border border-border-light bg-surface-0 px-3 py-1.5 text-xs text-fg-primary placeholder:text-fg-muted focus:border-accent focus:outline-none"
           />
         </div>
 
-        <div>
-          <label className="mb-1 block text-xs text-fg-secondary" htmlFor="add-lane-pipeline">
-            {t("addLanePipelineLabel")}
-          </label>
-          <select
-            id="add-lane-pipeline"
-            value={pipeline}
-            onChange={(e) => setPipeline(e.target.value)}
-            className="w-full rounded-md border border-border-light bg-surface-0 px-3 py-1.5 text-xs text-fg-primary focus:border-blue-500 focus:outline-none"
-          >
-            {(pipelines.length ? pipelines : [{ id: "default", name: "default", nodes: [] }]).map(
-              (p) => (
-                <option key={p.id} value={p.id}>
-                  {p.nodes.length ? `${p.name} (${p.nodes.length})` : p.name}
-                </option>
-              )
-            )}
-          </select>
-          <p className="mt-1 text-[10px] text-fg-muted">{t("addLanePipelineHint")}</p>
-        </div>
-
-        {mode === "worktree" && branches && (
-          <div>
-            <label className="mb-1 block text-xs text-fg-secondary" htmlFor="add-lane-base">
-              {t("addLaneBaseLabel")}
-            </label>
-            {branches.length === 0 ? (
-              <p className="text-[10px] text-fg-muted">{t("addLaneNoBranches")}</p>
-            ) : (
-              <select
-                id="add-lane-base"
-                value={base}
-                onChange={(e) => setBase(e.target.value)}
-                className="w-full rounded-md border border-border-light bg-surface-0 px-3 py-1.5 text-xs text-fg-primary focus:border-blue-500 focus:outline-none"
-              >
-                {branches.map((b) => (
-                  <option key={b} value={b}>
-                    {b}
-                  </option>
-                ))}
-              </select>
-            )}
-          </div>
-        )}
         {mode === "worktree" && branchesError && !branches && (
           <p className="text-[10px] text-status-warning">{branchesError}</p>
         )}
 
         {mode === "worktree" && branches && (
-          <div>
-            <label className="mb-1 block text-xs text-fg-secondary" htmlFor="add-lane-branch">
-              {t("addLaneBranchLabel")}
-            </label>
-            <input
-              id="add-lane-branch"
-              value={branch}
-              onChange={(e) => setBranch(e.target.value)}
-              placeholder={t("addLaneBranchPlaceholder")}
-              className="w-full rounded-md border border-border-light bg-surface-0 px-3 py-1.5 font-mono text-xs text-fg-primary placeholder:text-fg-muted focus:border-blue-500 focus:outline-none"
-            />
-            <p className="mt-1 text-[10px] text-fg-muted">{t("addLaneBranchHint")}</p>
+          <div data-testid="add-lane-branch-section" className="space-y-2">
+            <div className="flex items-center rounded-md border border-border bg-surface-2 p-0.5">
+              <Seg
+                active={branchMode === "new"}
+                label={t("addLaneBranchModeNew")}
+                onClick={() => {
+                  setBranchMode("new");
+                  setBranch("");
+                }}
+              />
+              <Seg
+                active={branchMode === "existing"}
+                label={t("addLaneBranchModeExisting")}
+                onClick={() => {
+                  setBranchMode("existing");
+                  // Land on something usable rather than on an empty select
+                  // that looks like a choice was already made.
+                  setBranch((current) =>
+                    freeBranches.includes(current) ? current : freeBranches[0] || ""
+                  );
+                }}
+              />
+              {/* The third answer to "which branch": none. A small or personal
+                  project usually wants the lane to BE the repo, working on
+                  whatever is checked out (`main`) — which is exactly Repo
+                  mode, so this jumps there rather than inventing a second way
+                  to do it. git cannot check `main` out in a second worktree
+                  while the repo itself holds it, so a worktree lane could not
+                  offer this even if it wanted to. */}
+              <Seg
+                active={false}
+                label={t("addLaneBranchModeCurrent")}
+                title={t("addLaneBranchModeCurrentHint")}
+                onClick={() => setMode("repo")}
+              />
+            </div>
+
+            {branchMode === "new" ? (
+              <>
+                <div>
+                  <label className="mb-1 block text-xs text-fg-secondary" htmlFor="add-lane-base">
+                    {t("addLaneBaseLabel")}
+                  </label>
+                  {branches.length === 0 ? (
+                    // No commit, nothing to fork: the server refuses this with
+                    // EEMPTYREPO, so the one way forward is offered instead.
+                    <div className="space-y-1">
+                      <p className="text-[10px] text-fg-muted">{t("addLaneNoBranches")}</p>
+                      <button
+                        type="button"
+                        onClick={() => setMode("repo")}
+                        className="rounded-md border border-border-light px-2 py-0.5 text-xs text-fg-secondary hover:bg-surface-2"
+                      >
+                        {t("addLaneNoBranchesUseRepo")}
+                      </button>
+                    </div>
+                  ) : (
+                    <select
+                      id="add-lane-base"
+                      value={base}
+                      onChange={(e) => setBase(e.target.value)}
+                      className="w-full rounded-md border border-border-light bg-surface-0 px-3 py-1.5 text-xs text-fg-primary focus:border-accent focus:outline-none"
+                    >
+                      {branches.map((b) => (
+                        <option key={b} value={b}>
+                          {b}
+                        </option>
+                      ))}
+                    </select>
+                  )}
+                </div>
+                <div>
+                  <label className="mb-1 block text-xs text-fg-secondary" htmlFor="add-lane-branch">
+                    {t("addLaneBranchLabel")}
+                  </label>
+                  <input
+                    id="add-lane-branch"
+                    value={branch}
+                    onChange={(e) => setBranch(e.target.value)}
+                    // Neutral on purpose: an empty field lets the SERVER name
+                    // the branch, under a LANE_BRANCH_PREFIX this form cannot
+                    // see, so any `feat/…` preview here could be wrong.
+                    placeholder={t("addLaneBranchPlaceholder")}
+                    className="w-full rounded-md border border-border-light bg-surface-0 px-3 py-1.5 font-mono text-xs text-fg-primary placeholder:text-fg-muted focus:border-accent focus:outline-none"
+                  />
+                  <p className="mt-1 text-[10px] text-fg-muted">{t("addLaneBranchHintAuto")}</p>
+                </div>
+              </>
+            ) : (
+              <div>
+                <label className="mb-1 block text-xs text-fg-secondary" htmlFor="add-lane-existing">
+                  {t("addLaneBranchExistingLabel")}
+                </label>
+                {freeBranches.length === 0 ? (
+                  <p className="text-[10px] text-status-warning">{t("addLaneNoFreeBranches")}</p>
+                ) : (
+                  <select
+                    id="add-lane-existing"
+                    value={branch}
+                    onChange={(e) => setBranch(e.target.value)}
+                    className="w-full rounded-md border border-border-light bg-surface-0 px-3 py-1.5 font-mono text-xs text-fg-primary focus:border-accent focus:outline-none"
+                  >
+                    {branches.map((b) => {
+                      const busyAt = busyBranches.get(b);
+                      return (
+                        // Disabled rather than hidden: "why is my branch not
+                        // in the list" is a worse question than seeing it
+                        // greyed out with the worktree that holds it.
+                        <option key={b} value={b} disabled={!!busyAt}>
+                          {busyAt ? t("addLaneBranchBusy", { branch: b, path: busyAt }) : b}
+                        </option>
+                      );
+                    })}
+                  </select>
+                )}
+                <p className="mt-1 text-[10px] text-fg-muted">{t("addLaneBranchExistingHint")}</p>
+              </div>
+            )}
           </div>
         )}
 
+        {/* The router is the one per-lane extra this form still asks for, so it
+            sits in the form itself — a disclosure around a single field only
+            hid it. The pipeline picker is gone entirely: every lane is created
+            on `default` (the server's own default) and the template is changed
+            from the lane's own header afterwards. */}
+        <div className="rounded-md border border-border-light bg-surface-0 p-2">
+          <div>
+            <fieldset>
+              <legend className="mb-1 text-xs text-fg-secondary">{t("addLaneRouterLabel")}</legend>
+              <div className="flex gap-2">
+                {(
+                  [
+                    {
+                      value: "native",
+                      label: t("addLaneRouterNativeTool", { tool: aiTools.label(tool) }),
+                    },
+                    { value: "router", label: t("addLaneRouterCustom") },
+                  ] as const
+                ).map((option) => {
+                  const active =
+                    option.value === "native" ? router === "native" : router !== "native";
+                  // Clicking "AI Router" before the list lands would resolve back to
+                  // Native and read as a dead control.
+                  const disabled =
+                    option.value === "router" && (!routersLoaded || !toolRouterCapable);
+                  return (
+                    <label
+                      key={option.value}
+                      title={
+                        option.value === "router" && !toolRouterCapable
+                          ? t("router.nativeOnly", { tool: aiTools.label(tool) })
+                          : undefined
+                      }
+                      // No radio dot: the card itself lights up when selected. That
+                      // leaves the DISABLED state with nothing to show it, since the
+                      // greyed-out dot was carrying it — hence the explicit branch.
+                      // The input only goes visually hidden, so keyboard and screen
+                      // readers still get a real radio group, and the card carries
+                      // its focus ring.
+                      className={`block flex-1 rounded-lg border p-2.5 text-center text-xs shadow-sm transition-colors focus-within:ring-2 focus-within:ring-accent/50 ${
+                        disabled
+                          ? "cursor-not-allowed border-border bg-surface-2 text-fg-muted opacity-60"
+                          : active
+                            ? "cursor-pointer border-accent bg-accent/10 text-accent"
+                            : "cursor-pointer border-border bg-surface-2 text-fg-secondary hover:border-border-light hover:bg-surface-3"
+                      }`}
+                    >
+                      <input
+                        type="radio"
+                        name="add-lane-router"
+                        className="sr-only"
+                        disabled={disabled}
+                        checked={active}
+                        onChange={() =>
+                          // Switching to "AI Router" lands on the first saved
+                          // profile; with none saved the radio stays on native and
+                          // the select below explains why.
+                          setRouter(
+                            option.value === "native"
+                              ? "native"
+                              : routers.find((r) => !r.builtin)?.name || "native"
+                          )
+                        }
+                      />
+                      {option.label}
+                    </label>
+                  );
+                })}
+              </div>
+
+              {router !== "native" && (
+                <select
+                  aria-label={t("addLaneRouterProfileLabel")}
+                  value={router}
+                  onChange={(e) => setRouter(e.target.value)}
+                  className="mt-2 w-full rounded-md border border-border-light bg-surface-0 px-3 py-1.5 text-xs text-fg-primary focus:border-accent focus:outline-none"
+                >
+                  {routers
+                    .filter((r) => !r.builtin)
+                    .map((r) => (
+                      <option key={r.name} value={r.name}>
+                        {r.label}
+                      </option>
+                    ))}
+                </select>
+              )}
+              <p className="mt-1 text-[10px] text-fg-muted">
+                {!routersLoaded
+                  ? t("addLaneRouterLoading")
+                  : routers.some((r) => !r.builtin)
+                    ? t("addLaneRouterHint")
+                    : t("addLaneRouterEmptyHint")}
+              </p>
+            </fieldset>
+          </div>
+        </div>
+
         {setupResult && (
           <div className="rounded-md border border-border-light bg-surface-0 p-2 space-y-1">
             <p className="text-[10px] font-medium text-fg-secondary">{t("addLaneSetupTitle")}</p>
@@ -443,8 +797,12 @@ export function AddLaneModal({
                   ok: setupResult.profile !== "failed",
                   skipped: setupResult.profile === "skipped",
                 },
-                { label: t("addLaneSetupAgents"), ok: setupResult.agents === "ok" },
                 { label: t("addLaneSetupMcp"), ok: setupResult.mcp === "ok" },
+                {
+                  label: t("addLaneSetupRouter"),
+                  ok: setupResult.router !== "failed",
+                  skipped: setupResult.router === "skipped",
+                },
               ] as const
             ).map((row) => (
               <p key={row.label} className="flex items-center gap-1.5 text-[11px] text-fg-primary">

client/src/components/lanes/DestructiveLaneModal.tsx

@@ -123,16 +123,15 @@ export function DestructiveLaneModal({
 
   const blocked = blockingReason(preflight);
   // Mirrors the server's gate exactly (server/routes/lanes.js): force is required
-  // for `reset`, and for `remove` only when a real worktree is at risk. Forgetting
-  // an adopted lane risks nothing on disk, so it needs no force even with unpushed
-  // commits. Never offered alongside a hard blocker, where confirming is
+  // for `reset` alone. `remove` forgets the lane's row and deletes nothing on
+  // disk — no worktree, no branch, no database — so there is no unpushed work it
+  // could discard. Never offered alongside a hard blocker, where confirming is
   // impossible anyway.
   const requiresForce =
     !blocked &&
     preflight !== null &&
-    preflight.action !== "purge" &&
-    preflight.blocked.includes("unpushed-commits") &&
-    (preflight.action === "reset" || preflight.kind === "managed");
+    preflight.action === "reset" &&
+    preflight.blocked.includes("unpushed-commits");
   const disabled =
     loading || !preflight || Boolean(error) || Boolean(blocked) || (requiresForce && !force);
   const facts = preflight ? Object.entries(expectFor(preflight)) : [];

client/src/components/lanes/FolderBrowseModal.tsx

@@ -99,7 +99,7 @@ export function FolderBrowseModal({
               className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs text-fg-primary hover:bg-surface-2"
             >
               {entry.isGitRepo ? (
-                <FolderGit2 className="h-3.5 w-3.5 text-blue-400" />
+                <FolderGit2 className="h-3.5 w-3.5 text-blue-700 dark:text-blue-400" />
               ) : (
                 <FolderOpen className="h-3.5 w-3.5 text-fg-muted" />
               )}

client/src/components/lanes/LaneCard.tsx

@@ -1,77 +1,49 @@
 /**
- * @file One lane's card: progress bar, branch/CI/PR facts, the "needs you"
+ * @file One lane's card: CI/PR facts, the "needs you"
  * banner sourced from Claude Code's Notification hook, and (for managed
  * lanes only) a ⋯ menu holding the rare `reset worktree` action behind
  * DestructiveLaneModal. A dead lane (its driving session went silent while
  * it should have been working) is called out loudly — that is the failure
  * this view exists to catch. Stage, kind, and the "auto: <stage>" chip are
  * NOT repeated here — this card only ever renders inside the Workspace
- * lane-detail section, whose header above it already shows them. The repo
- * tooling dropdown (`LaneToolsMenu`, exported from this file) and the
+ * lane-detail section, whose header above it already shows them. Neither is
+ * progress: the pipeline map directly below this card draws the same number
+ * as named, coloured nodes, so a bar and a percent beside it were a worse
+ * second telling of it. The repo
+ * card also carries the lane's AI Router picker — the Add-lane modal is the
+ * only other place one is chosen, and a lane outlives its creation. The repo
+ * tooling dropdown (`LaneToolsMenu`, exported from this file — agents
+ * install / MCP sync / dev-sync check / create-update readme) and the
  * remove-lane button live in Workspace's page header / pipeline-picker row
  * instead of here, so they stay reachable and un-clipped regardless of this
- * card's own scroll area.
+ * card's own scroll area. The working copy — branch, uncommitted counts, the
+ * git action bar — is not here either: it heads the Changes panel
+ * (`LaneGitHeader`), beside the diff it describes.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { DestructiveLaneModal } from "./DestructiveLaneModal";
 import { api } from "../../lib/api";
 import { eventBus } from "../../lib/eventBus";
 import { keepIfSame } from "../../lib/keepIfSame";
-import type { Lane, LaneGitFacts, LaneRuntime, NamedLock } from "../../lib/types";
+import type { AiRouter } from "../../lib/api";
+import type { Lane, LaneRuntime, NamedLock } from "../../lib/types";
+import { useAiTools } from "../../hooks/useAiTools";
 
-/** How often a mounted card re-reads its working-copy facts. Slow on purpose:
- *  each call is three git subprocesses server-side, and a branch name does not
- *  change on the timescale the lane list is polled at. */
-const GIT_REFRESH_MS = 30_000;
-
-/** How often a mounted card re-probes its stack. Faster than the git refresh
- *  because a stack dying is exactly what the user needs to see, and slower than
+/** How often a mounted card re-probes its stack. Faster than the Changes panel's
+ *  git refresh because a stack dying is exactly what the user needs to see, and slower than
  *  the lane poll because each call opens a socket per declared port. */
 const RUNTIME_REFRESH_MS = 10_000;
 
 /** How often a mounted card re-reads locks held by this lane. Same refresh rate
- *  as the git facts (slow, since lock state changes infrequently). */
+ *  as the Changes panel's git facts (slow, since lock state changes infrequently). */
 const LOCKS_REFRESH_MS = 30_000;
 
-/**
- * The lane's own working copy, fetched per card rather than folded into the
- * polled lane list. Absent facts are not an error state: a lane may point at a
- * plain directory, and it renders as a card without a git row.
- */
-function useLaneGitFacts(laneId: number): LaneGitFacts | null {
-  const [facts, setFacts] = useState<LaneGitFacts | null>(null);
-
-  useEffect(() => {
-    let alive = true;
-    const read = () => {
-      api.lanes
-        .git(laneId)
-        .then((f) => {
-          if (alive) setFacts(keepIfSame(f));
-        })
-        .catch(() => {
-          // Silent: a card that cannot read git shows the rest of itself. An
-          // error banner here would fire on every lane on every server blip.
-          if (alive) setFacts(keepIfSame<LaneGitFacts>({ available: false }));
-        });
-    };
-    read();
-    const timer = setInterval(read, GIT_REFRESH_MS);
-    return () => {
-      alive = false;
-      clearInterval(timer);
-    };
-  }, [laneId]);
-
-  return facts;
-}
-
 /**
  * The lane's own application stack. Same shape and same silence as the git
- * facts above: a lane without a `.agenthub/profile` simply has no runtime row, which
+ * facts in LaneGitHeader: a lane without a `.agenthub/profile` simply has no runtime row, which
  * is the common case and not an error worth a banner.
  *
  * `bump` lets an up/down action re-read immediately instead of waiting out the
@@ -134,38 +106,170 @@ function useLaneLocks(laneSlot: number | null): NamedLock[] {
   return locks;
 }
 
-const INTEGRATION_NAMES = ["tracker", "dev_qc", "ci_wait"] as const;
+/**
+ * Which AI Router this lane runs against, and the one place it can be changed
+ * after the lane exists — the Add-lane modal is the only other one, and a lane
+ * outlives the moment it was created.
+ *
+ * Applying writes the lane's own config on disk as well as the DB column, so it
+ * goes through `POST /lanes/:id/router/apply` and never a PATCH. A failure puts
+ * the select back: the row must not claim a router the lane did not get.
+ *
+ * Rendered only when there is something to choose. A user who has never opened
+ * the AI Router tab has exactly the built-in `native` profile, and a select
+ * with one option is a control that cannot do anything.
+ */
+export function LaneRouterRow({ lane }: { lane: Lane }) {
+  const { t } = useTranslation(["lanes"]);
+  const aiTools = useAiTools();
+  const toolLabel = aiTools.label(lane.tool || "claude");
+  // Only Claude and Codex have an endpoint/model override to write; every
+  // other tool is offered native alone (the server refuses the rest anyway).
+  const routerCapable =
+    aiTools.byId(lane.tool || "claude")?.routerCapable ??
+    (lane.tool === "claude" || lane.tool === "codex" || !lane.tool);
+  const [routers, setRouters] = useState<AiRouter[] | null>(null);
+  const [current, setCurrent] = useState(lane.router_profile || "native");
+  const [busy, setBusy] = useState(false);
+  const [note, setNote] = useState<{ ok: boolean; text: string; runId?: string } | null>(null);
 
-function useLaneIntegrations(
-  laneId: number,
-  available: boolean
-): Record<(typeof INTEGRATION_NAMES)[number], boolean> | null {
-  const [state, setState] = useState<Record<string, boolean> | null>(null);
+  // The polled lane list is the source of truth; a switch elsewhere (the lane
+  // was reset to native by a profile delete, say) has to land here too.
+  useEffect(() => {
+    setCurrent(lane.router_profile || "native");
+    setNote(null);
+  }, [lane.id, lane.router_profile]);
+
+  // One instance of this row serves every lane — it lives in the Workspace's
+  // lane-detail header, and switching lanes swaps its `lane` prop rather than
+  // remounting it. So an apply that is still in flight when the user moves on
+  // would land its rollback and its note on whatever lane is showing by then:
+  // lane B's failed switch putting lane B's old selection into lane A's picker.
+  const shownLane = useRef(lane.id);
+  useEffect(() => {
+    shownLane.current = lane.id;
+  }, [lane.id]);
 
   useEffect(() => {
-    if (!available) {
-      setState(null);
-      return;
-    }
     let alive = true;
-    Promise.all(INTEGRATION_NAMES.map((name) => api.lanes.integration(laneId, name)))
-      .then((results) => {
-        if (!alive) return;
-        const next: Record<string, boolean> = {};
-        INTEGRATION_NAMES.forEach((name, i) => {
-          next[name] = results[i]?.enabled ?? false;
-        });
-        setState(next);
+    api.aiRouters
+      .list()
+      .then((r) => {
+        if (alive) setRouters(r.items);
       })
       .catch(() => {
-        if (alive) setState(null);
+        // Silent, same contract as the runtime poller above: a card that
+        // cannot list routers simply shows no router row.
+        if (alive) setRouters([]);
       });
     return () => {
       alive = false;
     };
-  }, [laneId, available]);
+  }, []);
 
-  return state as Record<(typeof INTEGRATION_NAMES)[number], boolean> | null;
+  if (!routers || routers.length <= 1) return null;
+
+  const change = async (name: string) => {
+    const laneId = lane.id;
+    const previous = current;
+    setCurrent(name);
+    setBusy(true);
+    setNote(null);
+    try {
+      const res = await api.lanes.routerApply(laneId, name);
+      if (shownLane.current !== laneId) return;
+      // A live pane adopted the new base URL/key but kept the model names it
+      // resolved at startup, so it would send the OLD router's model to the NEW
+      // endpoint and fail with "model not found". Only that case gets the
+      // warning and the restart button.
+      setNote(
+        res.restart_required && res.run_id
+          ? { ok: false, text: t("router.appliedRestart"), runId: res.run_id }
+          : { ok: true, text: t("router.applied") }
+      );
+    } catch (err) {
+      if (shownLane.current !== laneId) return;
+      setCurrent(previous);
+      setNote({ ok: false, text: err instanceof Error ? err.message : String(err) });
+    } finally {
+      // `busy` belongs to the control on screen, not to the request, so it is
+      // cleared either way — a lane switch must never leave the picker locked.
+      setBusy(false);
+    }
+  };
+
+  /**
+   * Kill the pane and open a fresh one for this lane. Started with the lane id
+   * alone on purpose: the previous run's `--model` flag names a model of the
+   * router the user just left, so replaying it would re-create the exact
+   * mismatch this button exists to clear.
+   */
+  const restart = async (runId: string) => {
+    const laneId = lane.id;
+    setBusy(true);
+    try {
+      await api.run.kill(runId);
+      await api.run.start({ laneId });
+      if (shownLane.current !== laneId) return;
+      setNote({ ok: true, text: t("router.restarted") });
+    } catch (err) {
+      if (shownLane.current !== laneId) return;
+      setNote({ ok: false, text: err instanceof Error ? err.message : String(err) });
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <label
+      className="flex items-center gap-1.5 text-xs text-fg-muted"
+      data-testid={`lane-router-${lane.id}`}
+    >
+      {t("router.label")}
+      <select
+        value={current}
+        disabled={busy}
+        onChange={(e) => void change(e.target.value)}
+        className="max-w-40 truncate rounded border border-border bg-surface-1 px-2 py-0.5 text-fg-secondary disabled:opacity-50"
+      >
+        {routers.map((r) => (
+          <option
+            key={r.name}
+            value={r.name}
+            disabled={!r.builtin && !routerCapable}
+            title={
+              !r.builtin && !routerCapable ? t("router.nativeOnly", { tool: toolLabel }) : undefined
+            }
+          >
+            {r.builtin ? t("router.native", { tool: toolLabel }) : r.label}
+          </option>
+        ))}
+      </select>
+      {/* The applied-note is a tooltip, not a line of its own: it fires on a
+          click the user just made, and a wrapped sentence under the control
+          would push every row below it down for the life of the selection.
+          A failure still gets visible colour, because that one is not
+          self-evident from the select. */}
+      {note && (
+        <span className={note.ok ? "text-fg-muted" : "text-status-danger"} title={note.text}>
+          {note.ok ? "✓" : "⚠"}
+        </span>
+      )}
+      {/* The one case with an action attached: restarting the pane is what
+          actually makes the switch take effect, so it is a button and not
+          another sentence the user has to act on somewhere else. */}
+      {note?.runId && (
+        <button
+          type="button"
+          disabled={busy}
+          onClick={() => void restart(note.runId as string)}
+          className="rounded border border-border px-1.5 py-0.5 text-[11px] text-fg-secondary hover:bg-surface-2 disabled:opacity-50"
+        >
+          {t("router.restart")}
+        </button>
+      )}
+    </label>
+  );
 }
 
 export const LIVENESS_DOT: Record<Lane["liveness"], string> = {
@@ -182,7 +286,8 @@ export function since(sec: number | null): string {
 }
 
 /**
- * Repo tooling (agents install / MCP sync / dev-sync check) for one lane,
+ * Repo tooling (MCP sync / dev-sync check, and the
+ * create/update-readme run, which moved here from the Add-lane modal) for one lane,
  * collapsed into a single dropdown. Lives outside LaneCard so it can be
  * placed in the Workspace page header, next to "Add lane" — it polls its
  * own runtime state independently of LaneCard's, same pattern as the
@@ -191,16 +296,11 @@ export function since(sec: number | null): string {
 export function LaneToolsMenu({ lane }: { lane: Lane }) {
   const { t } = useTranslation(["lanes"]);
   const [toolsMenuOpen, setToolsMenuOpen] = useState(false);
-  const [laneActionBusy, setLaneActionBusy] = useState<"agents" | "mcp" | "sync-check" | null>(
-    null
-  );
+  const [laneActionBusy, setLaneActionBusy] = useState<"mcp" | "sync-check" | "docs" | null>(null);
   const [laneActionResult, setLaneActionResult] = useState<string | null>(null);
   const runtime = useLaneRuntime(lane.id, 0);
 
-  const runLaneAction = async (
-    which: "agents" | "mcp" | "sync-check",
-    fn: () => Promise<string>
-  ) => {
+  const runLaneAction = async (which: "mcp" | "sync-check" | "docs", fn: () => Promise<string>) => {
     setLaneActionBusy(which);
     setLaneActionResult(null);
     try {
@@ -212,10 +312,17 @@ export function LaneToolsMenu({ lane }: { lane: Lane }) {
     }
   };
 
-  const handleAgentsInstall = () =>
-    runLaneAction("agents", async () => {
-      const result = await api.lanes.agentsInstall(lane.id);
-      return t("actions.agentsInstallResult", { files: result.installed.join(", ") });
+  // A skill only exists inside a CLI session, so there is nothing server-side
+  // to call: this opens the lane's own terminal run with the slash command as
+  // its first message. Claude-only — codex has no slash commands.
+  const handleWriteDocs = () =>
+    runLaneAction("docs", async () => {
+      await api.run.start({
+        laneId: lane.id,
+        cwd: lane.cwd,
+        initialPrompt: "/sg-all:sg-md-writing",
+      });
+      return t("actions.writeDocsResult");
     });
 
   const handleMcpSync = () =>
@@ -260,19 +367,22 @@ export function LaneToolsMenu({ lane }: { lane: Lane }) {
           role="menu"
           className="absolute right-0 z-10 mt-1 min-w-44 overflow-hidden rounded-md border border-border-light bg-surface-0 py-1 shadow-lg shadow-black/40"
         >
-          <button
-            type="button"
-            role="menuitem"
-            data-testid="lane-agents-install"
-            onClick={(e) => {
-              e.stopPropagation();
-              setToolsMenuOpen(false);
-              void handleAgentsInstall();
-            }}
-            className="block w-full px-3 py-1.5 text-left text-fg-secondary hover:bg-surface-2"
-          >
-            {t("actions.agentsInstall")}
-          </button>
+          {lane.tool === "claude" && (
+            <button
+              type="button"
+              role="menuitem"
+              data-testid="lane-write-docs"
+              title={t("actions.writeDocsHint")}
+              onClick={(e) => {
+                e.stopPropagation();
+                setToolsMenuOpen(false);
+                void handleWriteDocs();
+              }}
+              className="block w-full px-3 py-1.5 text-left text-fg-secondary hover:bg-surface-2"
+            >
+              {t("actions.writeDocs")}
+            </button>
+          )}
           <button
             type="button"
             role="menuitem"
@@ -333,10 +443,8 @@ export default function LaneCard({
   const [menuOpen, setMenuOpen] = useState(false);
   const [runtimeBump, setRuntimeBump] = useState(0);
   const [bootLine, setBootLine] = useState<string | null>(null);
-  const git = useLaneGitFacts(lane.id);
   const runtime = useLaneRuntime(lane.id, runtimeBump);
   const locks = useLaneLocks(lane.slot);
-  const integrations = useLaneIntegrations(lane.id, runtime?.available === true);
 
   /**
    * Live boot feedback. A build can run for minutes, and a card showing only a
@@ -363,45 +471,20 @@ export default function LaneCard({
     <>
       <div
         data-testid={`lane-card-${lane.id}`}
-        className="flex flex-col rounded-lg border border-border bg-surface-4 p-2.5 transition-colors hover:border-border-light"
+        // Every row below is conditional: a lane with nothing to report
+        // renders no frame at all rather than an empty box.
+        className="flex flex-col rounded-lg border border-border bg-surface-4 p-2.5 transition-colors hover:border-border-light empty:hidden"
       >
-        {/* Progress line: how far through the pipeline. The stage's own name
-            and how long it's been running are already in the Workspace
-            header above; not repeated here. Omitted at 0% — an empty bar
-            is not information, just a blank row above a dead/idle lane. */}
-        {lane.progress > 0 && (
-          <div className="mb-1.5 flex items-center gap-2 text-xs">
-            <div className="h-1 flex-1 overflow-hidden rounded-full bg-surface-2">
-              <div
-                data-testid="lane-progress-fill"
-                className="h-full rounded-full bg-blue-600 transition-[width]"
-                style={{ width: `${lane.progress}%` }}
-              />
-            </div>
-            <span className="tabular-nums text-fg-secondary">{lane.progress}%</span>
-          </div>
-        )}
-
-        {(lane.ci_status || lane.tool === "codex") && (
+        {lane.ci_status && (
           <div className="mb-2 flex flex-wrap items-center gap-1.5 text-[11px]">
-            {lane.ci_status && (
-              <span className="rounded bg-surface-2 px-1.5 py-0.5 text-fg-secondary">
-                CI {lane.ci_status}
-              </span>
-            )}
-            {lane.tool === "codex" && (
-              <span className="rounded border border-border bg-surface-2 px-1.5 py-0.5 text-[10px] text-fg-muted">
-                Codex
-              </span>
-            )}
+            <span className="rounded bg-surface-2 px-1.5 py-0.5 text-fg-secondary">
+              CI {lane.ci_status}
+            </span>
           </div>
         )}
 
-        {lane.needs_action && (
-          <div className="mb-2 rounded border border-status-warning/50 bg-status-warning/10 px-2 py-1 text-xs text-status-warning">
-            ⚠ {lane.needs_action}
-          </div>
-        )}
+        {/* No needs-you banner here: the strip card already flags it, and the
+            console directly below is where the prompt actually waits. */}
 
         {/* Runtime strip: the lane's own app stack, shown only for lanes that
             declare a profile. A port that drifted from `base + slot` is called
@@ -477,31 +560,6 @@ export default function LaneCard({
           </div>
         )}
 
-        <dl className="mb-2 space-y-0.5 font-mono text-[11px] text-fg-secondary">
-          {git?.available && (
-            <div data-testid="lane-git" className="space-y-1">
-              <div className="truncate">
-                ⑂ {git.branch}
-                <span className="ml-2 text-fg-muted">{git.head}</span>
-              </div>
-              <div className="truncate text-fg-muted" title={git.subject}>
-                {git.subject}
-              </div>
-              {(git.dirty > 0 || git.untracked > 0) && (
-                <div className="text-status-warning/80">
-                  {t("git.uncommitted", { dirty: git.dirty, untracked: git.untracked })}
-                </div>
-              )}
-            </div>
-          )}
-          {/* The lane's own recorded branch, shown only when git could not be
-              read — otherwise it duplicates the live branch above. */}
-          {!git?.available && lane.branch && <div className="truncate">⑂ {lane.branch}</div>}
-          <div className="truncate text-fg-muted" title={lane.cwd}>
-            {lane.cwd}
-          </div>
-        </dl>
-
         {childWorktrees && childWorktrees.length > 0 && (
           <div
             data-testid="lane-child-worktrees"
@@ -516,7 +574,7 @@ export default function LaneCard({
                   <button
                     type="button"
                     onClick={() => onSelectLane?.(w.id)}
-                    className="truncate text-left text-blue-400 hover:underline"
+                    className="truncate text-left text-blue-700 dark:text-blue-400 hover:underline"
                     title={w.cwd}
                   >
                     #{w.id} {w.title || w.cwd} · {w.status}
@@ -527,24 +585,6 @@ export default function LaneCard({
           </div>
         )}
 
-        {integrations && (
-          <div className="mb-1 flex items-center gap-1.5 text-[10px]">
-            {(["tracker", "dev_qc", "ci_wait"] as const).map((name) => (
-              <span
-                key={name}
-                data-testid={`lane-integration-${name}`}
-                className={`rounded-full px-2 py-0.5 ${
-                  integrations[name]
-                    ? "bg-status-success/10 text-status-success"
-                    : "bg-surface-2 text-fg-muted"
-                }`}
-              >
-                {t(`integrations.${name}`)}
-              </span>
-            ))}
-          </div>
-        )}
-
         {/* mt-auto pins the controls to the bottom so cards of differing height
             in one grid row still line their buttons up. Repo tooling and the
             remove button live in the Workspace page header/pipeline row now —

client/src/components/lanes/LaneConflictView.tsx

@@ -0,0 +1,279 @@
+/**
+ * @file LaneConflictView.tsx
+ * @description The Changes panel's view of ONE conflicted file during a merge
+ * (issue #45): the file with each conflict block drawn as its two sides —
+ * "mine" and "theirs", labelled from git's own markers and tinted apart — and
+ * a Keep mine / Take theirs / Keep both choice per block, undoable. Save and
+ * mark resolved writes the chosen text over exactly the version it opened
+ * (`gitSaveFile` with its `sha`, 409 ESTALE otherwise) and then runs
+ * `resolve done`, which re-checks that no marker is left. Take all mine /
+ * theirs is `resolve ours|theirs` for the whole file; Edit by hand hands the
+ * file to the panel's plain editor.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { api } from "../../lib/api";
+import {
+  applyChoices,
+  parseConflicts,
+  type ConflictChoice,
+  type ConflictPart,
+} from "../../lib/conflicts";
+
+const BASE =
+  "rounded border px-1.5 py-0.5 text-[11px] hover:bg-surface-2 disabled:cursor-not-allowed disabled:opacity-40";
+const BTN = `${BASE} border-border-light text-fg-secondary hover:text-fg-primary`;
+
+function Lines({ lines, className = "" }: { lines: string[]; className?: string }) {
+  return (
+    <pre className={`whitespace-pre px-2 font-mono text-[11px] leading-5 ${className}`}>
+      {lines.length ? lines.join("\n") : " "}
+    </pre>
+  );
+}
+
+export function LaneConflictView({
+  laneId,
+  path,
+  onResolved,
+  onEdit,
+}: {
+  laneId: number;
+  path: string;
+  /** The file left the conflict (resolved, or a whole side taken). */
+  onResolved: () => void;
+  /** Open the file in the panel's plain editor instead. */
+  onEdit: () => void;
+}) {
+  const { t } = useTranslation(["lanes"]);
+  const [file, setFile] = useState<{ lines: string[]; sha?: string; usable: boolean } | null>(null);
+  const [choices, setChoices] = useState<(ConflictChoice | undefined)[]>([]);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const blockRefs = useRef<(HTMLDivElement | null)[]>([]);
+  const [at, setAt] = useState(0);
+
+  useEffect(() => {
+    let live = true;
+    setFile(null);
+    setChoices([]);
+    setError(null);
+    api.lanes
+      .gitFile(laneId, path, "work")
+      .then((r) => {
+        if (!live) return;
+        setFile(
+          r.available
+            ? { lines: r.lines, sha: r.sha, usable: !r.binary && !r.truncated && !!r.sha }
+            : { lines: [], usable: false }
+        );
+      })
+      .catch((e) => live && setError(e instanceof Error ? e.message : String(e)));
+    return () => {
+      live = false;
+    };
+  }, [laneId, path]);
+
+  const parts: ConflictPart[] | null = file?.usable ? parseConflicts(file.lines) : null;
+  const total = parts ? parts.filter((p) => p.kind === "conflict").length : 0;
+  const chosen = choices.filter(Boolean).length;
+  const done = total > 0 && chosen === total;
+
+  const run = async (fn: () => Promise<unknown>) => {
+    setBusy(true);
+    setError(null);
+    try {
+      await fn();
+      onResolved();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const save = () =>
+    run(async () => {
+      if (!parts || !file?.sha) return;
+      await api.lanes.gitSaveFile(laneId, path, applyChoices(parts, choices).join("\n"), file.sha);
+      await api.lanes.gitAction(laneId, "resolve", { path, side: "done" });
+    });
+  const takeAll = (side: "ours" | "theirs") =>
+    run(() => api.lanes.gitAction(laneId, "resolve", { path, side }));
+
+  const choose = (i: number, c: ConflictChoice | undefined) =>
+    setChoices((prev) => {
+      const next = [...prev];
+      next[i] = c;
+      return next;
+    });
+
+  const jump = (step: number) => {
+    if (!total) return;
+    const i = (at + step + total) % total;
+    setAt(i);
+    blockRefs.current[i]?.scrollIntoView({ block: "center" });
+  };
+
+  let blockIndex = -1;
+  return (
+    <div data-testid="lane-conflict-view" className="flex min-h-0 flex-1 flex-col gap-1.5">
+      <div className="flex flex-wrap items-center gap-1.5">
+        <span className="min-w-0 flex-1 truncate font-mono text-[11px] text-fg-primary">
+          {path}
+        </span>
+        {total > 0 && (
+          <span className="text-[11px] text-status-warning">
+            {t("conflict.left", { left: total - chosen, total })}
+          </span>
+        )}
+        <button
+          type="button"
+          className={BTN}
+          aria-label={t("conflict.prev")}
+          disabled={!total}
+          onClick={() => jump(-1)}
+        >
+          <ChevronUp className="h-3 w-3" />
+        </button>
+        <button
+          type="button"
+          className={BTN}
+          aria-label={t("conflict.next")}
+          disabled={!total}
+          onClick={() => jump(1)}
+        >
+          <ChevronDown className="h-3 w-3" />
+        </button>
+        <button type="button" className={BTN} disabled={busy} onClick={() => void takeAll("ours")}>
+          {t("conflict.allOurs")}
+        </button>
+        <button
+          type="button"
+          className={BTN}
+          disabled={busy}
+          onClick={() => void takeAll("theirs")}
+        >
+          {t("conflict.allTheirs")}
+        </button>
+        <button type="button" className={BTN} disabled={busy} onClick={onEdit}>
+          {t("conflict.editByHand")}
+        </button>
+      </div>
+
+      {error && (
+        <p role="alert" className="whitespace-pre-wrap text-[11px] text-status-danger">
+          {error}
+        </p>
+      )}
+
+      {!file ? (
+        <p className="text-[11px] text-fg-muted">{t("changes.loading")}</p>
+      ) : !parts ? (
+        <p className="text-[11px] text-status-warning">
+          {file.usable ? t("conflict.unbalanced") : t("conflict.unusable")}
+        </p>
+      ) : (
+        <div className="min-h-0 flex-1 overflow-auto rounded border border-border-light bg-surface-0">
+          {parts.map((p, n) => {
+            if (p.kind === "text")
+              return <Lines key={n} lines={p.lines} className="text-fg-primary" />;
+            const i = ++blockIndex;
+            const c = choices[i];
+            return (
+              <div
+                key={n}
+                ref={(el) => {
+                  blockRefs.current[i] = el;
+                }}
+                data-testid="conflict-block"
+                className="my-1 border-y-2 border-status-warning/70"
+              >
+                <div className="flex flex-wrap items-center gap-1 bg-surface-2 px-2 py-0.5 text-[11px]">
+                  {c ? (
+                    <>
+                      <span className="text-fg-muted">{t(`conflict.chose.${c}`)}</span>
+                      <button type="button" className={BTN} onClick={() => choose(i, undefined)}>
+                        {t("conflict.undo")}
+                      </button>
+                    </>
+                  ) : (
+                    <>
+                      <button
+                        type="button"
+                        className={`${BASE} border-status-success/70 font-medium text-status-success`}
+                        onClick={() => choose(i, "ours")}
+                      >
+                        {t("conflict.keepOurs")}
+                      </button>
+                      <button
+                        type="button"
+                        className={`${BASE} border-accent/70 font-medium text-accent`}
+                        onClick={() => choose(i, "theirs")}
+                      >
+                        {t("conflict.takeTheirs")}
+                      </button>
+                      <button type="button" className={BTN} onClick={() => choose(i, "both")}>
+                        {t("conflict.keepBoth")}
+                      </button>
+                    </>
+                  )}
+                  <span className="ml-auto text-fg-muted">
+                    {i + 1}/{total}
+                  </span>
+                </div>
+                {c ? (
+                  <Lines
+                    lines={
+                      c === "ours" ? p.ours : c === "theirs" ? p.theirs : [...p.ours, ...p.theirs]
+                    }
+                    className="bg-surface-2 text-fg-primary"
+                  />
+                ) : (
+                  <>
+                    <div className="border-l-4 border-status-success bg-status-success/20">
+                      <div className="bg-status-success/30 px-2 py-0.5 text-[11px] font-semibold text-status-success">
+                        {t("conflict.ours", { label: p.oursLabel || "HEAD" })}
+                      </div>
+                      <Lines lines={p.ours} className="text-fg-primary" />
+                    </div>
+                    <div className="border-l-4 border-accent bg-accent/20">
+                      <div className="bg-accent/30 px-2 py-0.5 text-[11px] font-semibold text-accent">
+                        {t("conflict.theirs", { label: p.theirsLabel || "?" })}
+                      </div>
+                      <Lines lines={p.theirs} className="text-fg-primary" />
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {parts && total > 0 && (
+        <div className="flex items-center justify-end gap-1.5">
+          <button
+            type="button"
+            className={BTN}
+            disabled={busy || !chosen}
+            onClick={() => setChoices([])}
+          >
+            {t("conflict.reset")}
+          </button>
+          <button
+            type="button"
+            disabled={busy || !done}
+            onClick={() => void save()}
+            className="rounded border border-accent/40 bg-accent/15 px-2 py-0.5 text-[11px] text-accent hover:bg-accent/25 disabled:cursor-not-allowed disabled:opacity-40"
+          >
+            {t("conflict.save")}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

client/src/components/lanes/LaneDiffView.tsx

@@ -0,0 +1,880 @@
+/**
+ * @file The diff renderer behind the Changes panel (issue #35): one file's
+ * hunks as a VS Code-style diff — unified or side-by-side, syntax-highlighted,
+ * with the changed span inside a modified line picked out.
+ *
+ * Three deliberate choices:
+ *   - Highlighting reuses `lib/highlight.ts`, the tokenizer the conversation
+ *     view already ships. No new dependency for a panel that renders a few
+ *     hundred lines.
+ *   - The intra-line diff is a common prefix/suffix trim, not a real LCS. It is
+ *     right for the case that matters (one edited span on a line), degrades to
+ *     "the whole line changed" otherwise, and costs nothing.
+ *   - Line pairing for split view happens here, on the rows the server already
+ *     numbered. The server stays the single source of what changed; this file
+ *     only decides how it looks.
+ * Past `WINDOW_THRESHOLD` rows a view renders only the rows on screen (plus an
+ * overscan) between two spacers. Rows never wrap — the box scrolls sideways —
+ * so every windowed row is pinned to `ROW_PX` and the range is pure arithmetic
+ * (`visibleRange`); the content's min-width comes from the longest line, so
+ * the horizontal extent does not jump as rows come and go.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import {
+  createContext,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
+import { useTranslation } from "react-i18next";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { canonicalLang, highlight, tokenClass } from "../../lib/highlight";
+import type { LaneChangeFile, LaneDiffHunk, LaneDiffLine } from "../../lib/types";
+
+export type DiffLayout = "unified" | "split";
+
+/**
+ * How tall a diff box may be. `fill` (the single-file view) takes the height
+ * its parent gives it. In the review list, which stacks many files, a diff
+ * grows to its full height so the PANEL is the one vertical scroller — a
+ * 60vh box per file nested inside it made hunk navigation scroll two boxes
+ * at once and land nowhere predictable. Only a windowed diff (above
+ * WINDOW_THRESHOLD rows) keeps the cap, because windowing needs its own
+ * scroller.
+ */
+function boxHeight(fill: boolean, windowed: boolean) {
+  return fill ? "min-h-0 flex-1" : windowed ? "max-h-[60vh]" : "";
+}
+
+/**
+ * Bring `el` to the top of the scroller that actually scrolls it, below
+ * `pad` px of sticky header. Not `scrollIntoView`: that moves EVERY scrolling
+ * ancestor, the page included.
+ */
+function scrollToTop(el: HTMLElement, pad: number) {
+  let s = el.parentElement;
+  while (
+    s &&
+    !(s.scrollHeight > s.clientHeight && /auto|scroll/.test(getComputedStyle(s).overflowY))
+  )
+    s = s.parentElement;
+  if (!s) return;
+  s.scrollTop += el.getBoundingClientRect().top - s.getBoundingClientRect().top - pad;
+}
+
+/** Rows above which a view windows; at or below it renders exactly as before. */
+export const WINDOW_THRESHOLD = 500;
+/** A windowed row's pinned height — the rows' own 11px × 1.45 line box, rounded. */
+export const ROW_PX = 16;
+const OVERSCAN = 20;
+const FIXED: CSSProperties = { height: ROW_PX };
+
+/**
+ * The `[start, end)` item range to render for a scroll position. `scrollTop`
+ * is clamped to the content first, so a stale offset (content that shrank, a
+ * layout switch) still lands on real rows instead of an empty window.
+ */
+export function visibleRange(
+  scrollTop: number,
+  viewport: number,
+  rowHeight: number,
+  count: number,
+  overscan: number
+) {
+  const top = Math.min(Math.max(0, scrollTop), Math.max(0, count * rowHeight - viewport));
+  const start = Math.max(0, Math.floor(top / rowHeight) - overscan);
+  const end = Math.min(count, Math.ceil((top + viewport) / rowHeight) + overscan);
+  return { start: Math.min(start, end), end };
+}
+
+/**
+ * Windowing state for one scroller of `count` items. Off (the whole range)
+ * at or below the threshold.
+ */
+function useWindow(count: number) {
+  const [top, setTop] = useState(0);
+  const on = count > WINDOW_THRESHOLD;
+  // The offset is tracked even while windowing is off, so a diff that GROWS
+  // past the threshold (expanded context) windows where the reader is, not at
+  // row 0. A ref, so an unwindowed diff does not re-render on every scroll.
+  const lastTop = useRef(0);
+  // count 0 = no scroller here (split layout): the browser drops its offset,
+  // so coming back to unified must start from 0, not the pre-split row.
+  if (count === 0) lastTop.current = 0;
+  const [wasOn, setWasOn] = useState(on);
+  if (wasOn !== on) {
+    setWasOn(on);
+    setTop(on ? lastTop.current : 0);
+  }
+  // ponytail: the viewport is taken as the window height — never smaller than
+  // a box that lives inside the window, so it only over-renders a few dozen
+  // rows, and it needs no ResizeObserver to follow a panel resize.
+  const range = on
+    ? visibleRange(top, window.innerHeight, ROW_PX, count, OVERSCAN)
+    : { start: 0, end: count };
+  const onScroll = (el: HTMLElement) => {
+    lastTop.current = el.scrollTop;
+    if (on) setTop(el.scrollTop);
+  };
+  return { on, range, onScroll };
+}
+
+/** Columns a line occupies under `whitespace-pre` (a tab counted at its widest). */
+function longest(texts: Iterable<string>) {
+  let max = 0;
+  for (const t of texts) {
+    let n = t.length;
+    for (let i = t.indexOf("\t"); i !== -1; i = t.indexOf("\t", i + 1)) n += 7;
+    if (n > max) max = n;
+  }
+  return max;
+}
+
+/** Stands in for `rows` off-screen rows. */
+function Spacer({ rows }: { rows: number }) {
+  return rows > 0 ? <div data-diff-spacer aria-hidden style={{ height: rows * ROW_PX }} /> : null;
+}
+
+/** A windowed list: spacer, the rendered slice, spacer, at a stable width. */
+function Windowed({
+  count,
+  range,
+  minWidth,
+  children,
+}: {
+  count: number;
+  range: { start: number; end: number };
+  minWidth: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div data-diff-content style={{ minWidth }}>
+      <Spacer rows={range.start} />
+      {children}
+      <Spacer rows={count - range.end} />
+    </div>
+  );
+}
+
+/** Language tag for a path, for the tokenizer. Unknown ones render plain. */
+function langFor(filePath: string) {
+  const ext = filePath.split(".").pop() || "";
+  return canonicalLang(ext === filePath ? "plain" : ext);
+}
+
+/** Tokenized line text. `emph` marks the span that actually changed. */
+function Code({ text, lang, emph }: { text: string; lang: string; emph?: [number, number] }) {
+  if (emph) {
+    const [from, to] = emph;
+    return (
+      <>
+        <Code text={text.slice(0, from)} lang={lang} />
+        <span className="rounded-sm bg-fg-primary/15">
+          <Code text={text.slice(from, to)} lang={lang} />
+        </span>
+        <Code text={text.slice(to)} lang={lang} />
+      </>
+    );
+  }
+  return (
+    <>
+      {highlight(text, lang).map((tok, i) => (
+        <span key={i} className={tokenClass(tok.type)}>
+          {tok.text}
+        </span>
+      ))}
+    </>
+  );
+}
+
+/**
+ * The changed span of a del/add pair, as `[start, end]` offsets into each
+ * side, or null when the lines share nothing worth pointing at.
+ */
+function emphasis(
+  del: string,
+  add: string
+): { del: [number, number]; add: [number, number] } | null {
+  if (del === add) return null;
+  let start = 0;
+  const max = Math.min(del.length, add.length);
+  while (start < max && del[start] === add[start]) start += 1;
+  let end = 0;
+  while (end < max - start && del[del.length - 1 - end] === add[add.length - 1 - end]) end += 1;
+  // Nothing in common at either edge: the whole line is the change, and
+  // highlighting all of it adds noise on top of the row tint.
+  if (start === 0 && end === 0) return null;
+  return {
+    del: [start, del.length - end],
+    add: [start, add.length - end],
+  };
+}
+
+type PairRow = { left: LaneDiffLine | null; right: LaneDiffLine | null; emph: EmphPair | null };
+type EmphPair = { del: [number, number]; add: [number, number] };
+/** A hunk's split-view rows plus each paired line's emphasis, keyed by its
+ *  index in `hunk.lines` (what the unified view renders by). */
+type Analysed = { rows: PairRow[]; emph: Map<number, [number, number]> };
+
+// Keyed by the hunk object: a hunk is immutable once fetched, so both split
+// columns and every re-render of the same data share one pass. A refetch
+// brings new objects and the old entries go with them.
+const analysed = new WeakMap<LaneDiffHunk, Analysed>();
+
+/** Pair each run of removed lines with the run of added lines following it,
+ *  carrying indices so emphasis lands without searching the hunk again. */
+export function analyseHunk(hunk: LaneDiffHunk): Analysed {
+  const hit = analysed.get(hunk);
+  if (hit) return hit;
+  const lines = hunk.lines;
+  const rows: PairRow[] = [];
+  const emph = new Map<number, [number, number]>();
+  for (let i = 0; i < lines.length; ) {
+    const line = lines[i]!;
+    if (line.type === "ctx") {
+      rows.push({ left: line, right: line, emph: null });
+      i += 1;
+      continue;
+    }
+    const delStart = i;
+    while (i < lines.length && lines[i]!.type === "del") i += 1;
+    const addStart = i;
+    while (i < lines.length && lines[i]!.type === "add") i += 1;
+    const dels = addStart - delStart;
+    const adds = i - addStart;
+    for (let k = 0; k < Math.max(dels, adds); k += 1) {
+      const left = k < dels ? lines[delStart + k]! : null;
+      const right = k < adds ? lines[addStart + k]! : null;
+      const e = left && right ? emphasis(left.text, right.text) : null;
+      if (e) {
+        emph.set(delStart + k, e.del);
+        emph.set(addStart + k, e.add);
+      }
+      rows.push({ left, right, emph: e });
+    }
+  }
+  const out = { rows, emph };
+  analysed.set(hunk, out);
+  return out;
+}
+
+function Gutter({ n }: { n: number | null }) {
+  return (
+    <span className="w-10 shrink-0 select-none px-1 text-right text-fg-muted/60">{n ?? ""}</span>
+  );
+}
+
+/** A diff row. `w-max min-w-full` so the tint still spans a scrolled-open row.
+ *  `style` pins a windowed row's height; unwindowed rows carry none. */
+function Row({
+  tint,
+  style,
+  anchor,
+  children,
+}: {
+  tint: string;
+  style?: CSSProperties;
+  /** This row starts change block `anchor` (file-wide): the bar's arrows land here. */
+  anchor?: number;
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      className={`flex w-max min-w-full ${tint}`}
+      style={style}
+      data-diff-item={style ? "" : undefined}
+      data-change-index={anchor}
+    >
+      {children}
+    </div>
+  );
+}
+
+/** A /20 fill plus a 3px status bar at the row's left edge, so +/- rows still
+ *  separate from context at a glance on every theme (the /10 fill alone did not). */
+function rowTint(type: LaneDiffLine["type"] | null) {
+  if (type === "add")
+    return "bg-status-success/20 shadow-[inset_3px_0_0_rgb(var(--status-success))]";
+  if (type === "del") return "bg-status-danger/20 shadow-[inset_3px_0_0_rgb(var(--status-danger))]";
+  return "";
+}
+
+function markerClass(type: LaneDiffLine["type"]) {
+  if (type === "add") return "font-bold text-status-success";
+  if (type === "del") return "font-bold text-status-danger";
+  return "text-fg-muted";
+}
+
+/** One change block: a run of consecutive +/- lines inside a hunk. git merges
+ *  edits a few lines apart into one `@@` hunk, so the review bar acts on these
+ *  instead (#50) — `block` is the index the server's `stage-hunk` /
+ *  `discard-hunk` take beside the hunk's header. */
+export type LaneDiffChange = {
+  hunk: LaneDiffHunk;
+  block: number;
+  /** First/last index in `hunk.lines` (unified). */
+  firstLine: number;
+  lastLine: number;
+  /** First/last split-view row. */
+  firstRow: number;
+  lastRow: number;
+};
+
+const blocksOf = new WeakMap<LaneDiffHunk, LaneDiffChange[]>();
+
+/** A hunk's change blocks, cached per hunk object like `analyseHunk`. */
+export function changeBlocks(hunk: LaneDiffHunk): LaneDiffChange[] {
+  const hit = blocksOf.get(hunk);
+  if (hit) return hit;
+  const out: LaneDiffChange[] = [];
+  const owner = new Map<LaneDiffLine, LaneDiffChange>();
+  hunk.lines.forEach((line, i) => {
+    if (line.type === "ctx") return;
+    let c = i > 0 && hunk.lines[i - 1]!.type !== "ctx" ? out[out.length - 1] : undefined;
+    if (!c) {
+      c = { hunk, block: out.length, firstLine: i, lastLine: i, firstRow: -1, lastRow: -1 };
+      out.push(c);
+    }
+    c.lastLine = i;
+    owner.set(line, c);
+  });
+  analyseHunk(hunk).rows.forEach((r, i) => {
+    const c = (r.left && owner.get(r.left)) || (r.right && owner.get(r.right));
+    if (!c) return;
+    if (c.firstRow < 0) c.firstRow = i;
+    c.lastRow = i;
+  });
+  blocksOf.set(hunk, out);
+  return out;
+}
+
+/** The block whose last line (unified) / last row (split) is `i`, if any. */
+const barAtLine = (hunk: LaneDiffHunk, i: number) =>
+  changeBlocks(hunk).find((c) => c.lastLine === i);
+const barAtRow = (hunk: LaneDiffHunk, i: number) => changeBlocks(hunk).find((c) => c.lastRow === i);
+const startAtLine = (hunk: LaneDiffHunk, i: number) =>
+  changeBlocks(hunk).find((c) => c.firstLine === i);
+const startAtRow = (hunk: LaneDiffHunk, i: number) =>
+  changeBlocks(hunk).find((c) => c.firstRow === i);
+
+/** Per-block review controls (Undo / Keep), drawn in a bar under each change
+ *  block's last line. A context rather than a prop because lines render from
+ *  four places; `changes` is what the bar's "n of N" and its arrows walk. */
+const HunkActions = createContext<{
+  actions: (change: LaneDiffChange) => ReactNode;
+  changes: LaneDiffChange[];
+  go: (index: number) => void;
+} | null>(null);
+
+/** File-wide index of `change`, for a row's `anchor`. */
+function useAnchor(change?: LaneDiffChange) {
+  const ctx = useContext(HunkActions);
+  return change && ctx ? ctx.changes.indexOf(change) : undefined;
+}
+
+/** The review bar: hangs just BELOW a change block's last line, pinned to the
+ *  visible right edge, so it sits on the change it acts on — the editor-style
+ *  "^ v 2 of 3 · Undo · Keep" instead of glyphs at the end of the `@@` line. */
+function HunkBar({ change }: { change: LaneDiffChange }) {
+  const { t } = useTranslation(["lanes"]);
+  const ctx = useContext(HunkActions);
+  if (!ctx) return null;
+  const index = ctx.changes.indexOf(change);
+  const total = ctx.changes.length;
+  const nav =
+    "rounded px-0.5 text-fg-muted hover:bg-surface-3 hover:text-fg-primary disabled:opacity-30";
+  return (
+    <span className="sticky right-2 z-10 ml-auto h-0 w-0 self-start">
+      <span
+        data-testid="lane-hunk-bar"
+        className="absolute right-0 top-[18px] flex items-center gap-1 whitespace-nowrap rounded border border-border-light bg-surface-1 px-1 py-0.5 font-sans text-[10px] leading-[14px] text-fg-secondary shadow-card"
+      >
+        <button
+          type="button"
+          aria-label={t("changes.prevHunk")}
+          title={t("changes.prevHunk")}
+          disabled={index <= 0}
+          onClick={() => ctx.go(index - 1)}
+          className={nav}
+        >
+          <ChevronUp className="h-3 w-3" />
+        </button>
+        <button
+          type="button"
+          aria-label={t("changes.nextHunk")}
+          title={t("changes.nextHunk")}
+          disabled={index >= total - 1}
+          onClick={() => ctx.go(index + 1)}
+          className={nav}
+        >
+          <ChevronDown className="h-3 w-3" />
+        </button>
+        <span className="px-0.5 tabular-nums text-fg-muted">
+          {t("changes.hunkOf", { n: index + 1, total })}
+        </span>
+        {ctx.actions(change)}
+      </span>
+    </span>
+  );
+}
+
+function HunkHeader({ hunk, fixed }: { hunk: LaneDiffHunk; fixed?: boolean }) {
+  const at = hunk.header.split("@@")[1];
+  // Windowed, the header is one ROW_PX row like the lines around it.
+  return (
+    <div
+      className={`flex items-center gap-2 bg-surface-2 px-2 text-[10px] text-fg-muted ${
+        fixed ? "overflow-hidden whitespace-nowrap leading-4" : "py-0.5"
+      }`}
+      style={fixed ? FIXED : undefined}
+      data-diff-item={fixed ? "" : undefined}
+    >
+      <span className="min-w-0 flex-1 truncate">
+        {at ? `@@${at}@@` : hunk.header}
+        {hunk.context ? ` ${hunk.context}` : ""}
+      </span>
+    </div>
+  );
+}
+
+function UnifiedLine({
+  line,
+  lang,
+  emph,
+  style,
+  bar,
+  start,
+}: {
+  line: LaneDiffLine;
+  lang: string;
+  emph?: [number, number];
+  style?: CSSProperties;
+  /** This is a change block's last line: hang its review bar under it. */
+  bar?: LaneDiffChange;
+  /** This is a change block's first line: the bar's arrows scroll here. */
+  start?: LaneDiffChange;
+}) {
+  const anchor = useAnchor(start);
+  return (
+    <Row tint={rowTint(line.type)} style={style} anchor={anchor}>
+      <Gutter n={line.oldLine} />
+      <Gutter n={line.newLine} />
+      <span className="whitespace-pre px-2">
+        <span className={`select-none ${markerClass(line.type)}`}>
+          {line.type === "add" ? "+" : line.type === "del" ? "-" : " "}
+        </span>
+        <Code text={line.text} lang={lang} emph={emph} />
+      </span>
+      {bar && <HunkBar change={bar} />}
+    </Row>
+  );
+}
+
+function UnifiedHunk({ hunk, lang }: { hunk: LaneDiffHunk; lang: string }) {
+  const { emph } = analyseHunk(hunk);
+  return (
+    <div>
+      <HunkHeader hunk={hunk} />
+      {hunk.lines.map((line, i) => (
+        <UnifiedLine
+          key={i}
+          line={line}
+          lang={lang}
+          emph={emph.get(i)}
+          bar={barAtLine(hunk, i)}
+          start={startAtLine(hunk, i)}
+        />
+      ))}
+    </div>
+  );
+}
+
+/** One windowable item: a hunk's header (`i < 0`) or its i-th row — a line in
+ *  unified, a paired row in split. */
+type Item = { hunk: LaneDiffHunk; i: number };
+
+function flatten(hunks: LaneDiffHunk[], layout: DiffLayout): Item[] {
+  const out: Item[] = [];
+  for (const hunk of hunks) {
+    out.push({ hunk, i: -1 });
+    const n = layout === "split" ? analyseHunk(hunk).rows.length : hunk.lines.length;
+    for (let i = 0; i < n; i += 1) out.push({ hunk, i });
+  }
+  return out;
+}
+
+function longestInHunks(hunks: LaneDiffHunk[]) {
+  return longest(
+    (function* () {
+      for (const h of hunks) for (const l of h.lines) yield l.text;
+    })()
+  );
+}
+
+function SplitLine({
+  row,
+  lang,
+  side,
+  style,
+  bar,
+  start,
+}: {
+  row: PairRow;
+  lang: string;
+  side: "left" | "right";
+  style?: CSSProperties;
+  bar?: LaneDiffChange;
+  start?: LaneDiffChange;
+}) {
+  const line = side === "left" ? row.left : row.right;
+  const anchor = useAnchor(start);
+  return (
+    <Row tint={rowTint(line?.type ?? null)} style={style} anchor={anchor}>
+      <Gutter n={(side === "left" ? line?.oldLine : line?.newLine) ?? null} />
+      <span className="whitespace-pre px-1">
+        {line ? (
+          <Code
+            text={line.text}
+            lang={lang}
+            emph={side === "left" ? row.emph?.del : row.emph?.add}
+          />
+        ) : null}
+      </span>
+      {bar && <HunkBar change={bar} />}
+    </Row>
+  );
+}
+
+/** One side of the split view: a hunk header, then that side's rows. */
+function SplitColumn({
+  hunks,
+  lang,
+  side,
+}: {
+  hunks: LaneDiffHunk[];
+  lang: string;
+  side: "left" | "right";
+}) {
+  return (
+    <>
+      {hunks.map((hunk, h) => (
+        <div key={`${hunk.header}:${h}`}>
+          <HunkHeader hunk={hunk} />
+          {analyseHunk(hunk).rows.map((row, i) => (
+            <SplitLine
+              key={i}
+              row={row}
+              lang={lang}
+              side={side}
+              // One bar per change block: on the right (new) column only.
+              bar={side === "right" ? barAtRow(hunk, i) : undefined}
+              start={startAtRow(hunk, i)}
+            />
+          ))}
+        </div>
+      ))}
+    </>
+  );
+}
+
+/** A windowed split column: the shared range of items, one side of each. */
+function SplitSlice({
+  items,
+  range,
+  lang,
+  side,
+}: {
+  items: Item[];
+  range: { start: number; end: number };
+  lang: string;
+  side: "left" | "right";
+}) {
+  return (
+    <>
+      {items
+        .slice(range.start, range.end)
+        .map(({ hunk, i }, k) =>
+          i < 0 ? (
+            <HunkHeader key={range.start + k} hunk={hunk} fixed />
+          ) : (
+            <SplitLine
+              key={range.start + k}
+              row={analyseHunk(hunk).rows[i]!}
+              lang={lang}
+              side={side}
+              style={FIXED}
+              bar={side === "right" ? barAtRow(hunk, i) : undefined}
+              start={startAtRow(hunk, i)}
+            />
+          )
+        )}
+    </>
+  );
+}
+
+/** `v` held inside a scroller's own extent. */
+export function clampScroll(v: number, scrollSize: number, clientSize: number) {
+  return Math.min(v, Math.max(0, scrollSize - clientSize));
+}
+
+type Axis =
+  | ["scrollLeft", "scrollWidth", "clientWidth"]
+  | ["scrollTop", "scrollHeight", "clientHeight"];
+const AXES: Axis[] = [
+  ["scrollLeft", "scrollWidth", "clientWidth"],
+  ["scrollTop", "scrollHeight", "clientHeight"],
+];
+
+/** Mirror `src`'s offset onto `dst`, clamped to what `dst` can show. */
+function follow(src: HTMLElement, dst: HTMLElement) {
+  for (const [pos, size, client] of AXES) {
+    // `src` pinned at its own end while `dst` sits past it: `src` is the
+    // narrower column echoing a clamp we just caused. Pulling `dst` back to
+    // it would snap the wide column home every time it scrolls past the
+    // narrow one's longest line.
+    if (src[pos] >= clampScroll(Infinity, src[size], src[client]) && dst[pos] > src[pos]) continue;
+    const target = clampScroll(src[pos], dst[size], dst[client]);
+    if (dst[pos] !== target) dst[pos] = target;
+  }
+}
+
+/** Both sides, each its own scroller but kept in step on both axes. */
+function SplitView({ hunks, lang, fill }: { hunks: LaneDiffHunk[]; lang: string; fill: boolean }) {
+  const left = useRef<HTMLDivElement>(null);
+  const right = useRef<HTMLDivElement>(null);
+  const items = useMemo(() => flatten(hunks, "split"), [hunks]);
+  const minWidth = useMemo(() => `calc(${longestInHunks(hunks)}ch + 3rem)`, [hunks]);
+  const win = useWindow(items.length);
+
+  // Mirroring fires the other pane's own scroll handler, which mirrors back —
+  // the equality check (and `follow`'s edge rule) is what ends that, so no
+  // re-entry flag is needed. Both axes: the columns hold paired rows, so a
+  // vertical drift puts a deletion beside some unrelated line. Both columns
+  // window off the same offset, so they always hold the same row range.
+  const sync = (from: "left" | "right") => {
+    const src = from === "left" ? left.current : right.current;
+    const dst = from === "left" ? right.current : left.current;
+    if (!src || !dst) return;
+    follow(src, dst);
+    win.onScroll(src);
+  };
+
+  const column = (side: "left" | "right") =>
+    win.on ? (
+      <Windowed count={items.length} range={win.range} minWidth={minWidth}>
+        <SplitSlice items={items} range={win.range} lang={lang} side={side} />
+      </Windowed>
+    ) : (
+      <SplitColumn hunks={hunks} lang={lang} side={side} />
+    );
+
+  return (
+    <div className={`flex ${boxHeight(fill, win.on)}`}>
+      <div
+        ref={left}
+        data-testid="lane-diff-split-left"
+        onScroll={() => sync("left")}
+        className="w-1/2 min-w-0 overflow-auto"
+      >
+        {column("left")}
+      </div>
+      <div
+        ref={right}
+        data-testid="lane-diff-split-right"
+        onScroll={() => sync("right")}
+        className="w-1/2 min-w-0 overflow-auto border-l border-border-light"
+      >
+        {column("right")}
+      </div>
+    </div>
+  );
+}
+
+/** One file's diff, in the chosen layout. */
+export function LaneDiffView({
+  file,
+  layout,
+  fill = false,
+  hunkActions,
+}: {
+  file: LaneChangeFile;
+  layout: DiffLayout;
+  /** Take the parent's height (single-file view) instead of the 60vh cap. */
+  fill?: boolean;
+  /** Controls drawn in each change block's review bar. */
+  hunkActions?: (change: LaneDiffChange) => ReactNode;
+}) {
+  const root = useRef<HTMLDivElement>(null);
+  const { t } = useTranslation(["lanes"]);
+  const lang = langFor(file.path);
+  const hunks = file.hunks;
+  const items = useMemo(() => (hunks ? flatten(hunks, "unified") : []), [hunks]);
+  const minWidth = useMemo(
+    // two gutters + the row's px-2, plus the marker column
+    () => `calc(${hunks ? longestInHunks(hunks) + 1 : 0}ch + 6rem)`,
+    [hunks]
+  );
+  // Unified only; split windows inside its own two scrollers.
+  const win = useWindow(layout === "unified" ? items.length : 0);
+  const splitWindowed = useMemo(
+    () => layout === "split" && !!hunks && flatten(hunks, "split").length > WINDOW_THRESHOLD,
+    [layout, hunks]
+  );
+
+  const changes = useMemo(() => (hunks ? hunks.flatMap(changeBlocks) : []), [hunks]);
+  // The bar's arrows: bring change block `index`'s first line into view. A
+  // windowed unified diff may not have it in the DOM, so there it is found by
+  // offset.
+  const go = (index: number) => {
+    const el = root.current;
+    const target = changes[index];
+    if (!el || !target) return;
+    const header = el.querySelector<HTMLElement>(`[data-change-index="${index}"]`);
+    // The review list pins each file's header over its own diff.
+    const sticky = el
+      .closest("[data-review-file]")
+      ?.querySelector<HTMLElement>("[data-sticky-top]");
+    const pad = sticky?.offsetHeight ?? 0;
+    if (header) {
+      scrollToTop(header, pad);
+      return;
+    }
+    // Windowed: the header is not in the DOM, but its offset is known.
+    const at = items.findIndex((it) => it.hunk === target.hunk && it.i === target.firstLine);
+    if (at >= 0 && layout === "unified") el.scrollTop = at * ROW_PX;
+  };
+  const review = hunkActions && hunks ? { actions: hunkActions, changes, go } : null;
+
+  if (file.binary)
+    return <p className="px-2 py-1 text-[10px] text-fg-muted">{t("changes.binary")}</p>;
+  if (!file.hunks || file.hunks.length === 0)
+    return <p className="px-2 py-1 text-[10px] text-fg-muted">{t("changes.noHunks")}</p>;
+
+  return (
+    <HunkActions.Provider value={review}>
+      <div
+        ref={root}
+        data-testid="lane-diff-view"
+        data-layout={layout}
+        onScroll={(e) => win.onScroll(e.currentTarget)}
+        className={`flex flex-col font-mono text-[11px] leading-[1.45] ${
+          layout === "split"
+            ? boxHeight(fill, splitWindowed)
+            : `overflow-auto ${boxHeight(fill, win.on)}`
+        }`}
+      >
+        {layout === "split" ? (
+          <SplitView hunks={file.hunks} lang={lang} fill={fill} />
+        ) : win.on ? (
+          <Windowed count={items.length} range={win.range} minWidth={minWidth}>
+            {items
+              .slice(win.range.start, win.range.end)
+              .map(({ hunk, i }, k) =>
+                i < 0 ? (
+                  <HunkHeader key={win.range.start + k} hunk={hunk} fixed />
+                ) : (
+                  <UnifiedLine
+                    key={win.range.start + k}
+                    line={hunk.lines[i]!}
+                    lang={lang}
+                    emph={analyseHunk(hunk).emph.get(i)}
+                    style={FIXED}
+                    bar={barAtLine(hunk, i)}
+                    start={startAtLine(hunk, i)}
+                  />
+                )
+              )}
+          </Windowed>
+        ) : (
+          file.hunks.map((hunk, i) => (
+            <UnifiedHunk key={`${hunk.header}:${i}`} hunk={hunk} lang={lang} />
+          ))
+        )}
+        {file.truncated && (
+          <p className="px-2 py-1 text-[10px] text-status-warning">{t("changes.fileTruncated")}</p>
+        )}
+      </div>
+    </HunkActions.Provider>
+  );
+}
+
+/** A whole file's text (no diff), for the viewer's "read the file" mode. */
+export function LaneFileView({
+  path,
+  lines,
+  truncated,
+  fill = false,
+  onEditAt,
+}: {
+  path: string;
+  lines: string[];
+  truncated?: boolean;
+  /** Take the parent's height instead of the 60vh cap. */
+  fill?: boolean;
+  /** Set when the file is editable: a click on the text (0-based line, and
+   *  where the view was scrolled) asks to open the editor there. */
+  onEditAt?: (line: number, scrollTop: number) => void;
+}) {
+  const { t } = useTranslation(["lanes"]);
+  const lang = langFor(path);
+  const win = useWindow(lines.length);
+  // gutter + the row's px-2
+  const minWidth = useMemo(() => `calc(${longest(lines)}ch + 3.5rem)`, [lines]);
+  const row = (text: string, i: number, style?: CSSProperties) => (
+    <Row key={i} tint="" style={style}>
+      {/* `contents`: a line marker for the click handler, not a layout box. */}
+      <span data-ln={i} className="contents">
+        <Gutter n={i + 1} />
+        <span className="whitespace-pre px-2">
+          <Code text={text} lang={lang} />
+        </span>
+      </span>
+    </Row>
+  );
+  return (
+    <div
+      data-testid="lane-file-view"
+      onScroll={(e) => win.onScroll(e.currentTarget)}
+      tabIndex={onEditAt ? 0 : undefined}
+      onClick={
+        onEditAt &&
+        ((e) => {
+          // A click that ends a drag-selection is copying, not asking to edit.
+          if (window.getSelection()?.toString()) return;
+          const ln = (e.target as HTMLElement).closest("[data-ln]")?.getAttribute("data-ln");
+          onEditAt(Number(ln ?? 0), e.currentTarget.scrollTop);
+        })
+      }
+      onKeyDown={
+        onEditAt &&
+        ((e) => {
+          if (e.key !== "Enter") return;
+          e.preventDefault();
+          onEditAt(0, e.currentTarget.scrollTop);
+        })
+      }
+      className={`overflow-auto font-mono text-[11px] leading-[1.45] ${boxHeight(fill, true)}${
+        onEditAt ? " cursor-text" : ""
+      }`}
+    >
+      {win.on ? (
+        <Windowed count={lines.length} range={win.range} minWidth={minWidth}>
+          {lines
+            .slice(win.range.start, win.range.end)
+            .map((text, k) => row(text, win.range.start + k, FIXED))}
+        </Windowed>
+      ) : (
+        lines.map((text, i) => row(text, i))
+      )}
+      {truncated && (
+        <p className="px-2 py-1 text-[10px] text-status-warning">{t("changes.fileTruncated")}</p>
+      )}
+    </div>
+  );
+}
+
+export default LaneDiffView;

client/src/components/lanes/LaneGitBar.tsx

@@ -0,0 +1,564 @@
+/**
+ * @file The lane's git action row: ahead/behind against the upstream, and the
+ * writes `POST /api/lanes/:id/git/:action` offers that are not per-file —
+ * fetch, pull, push, switch branch, create/delete a branch, publish a repo
+ * that has no remote yet (a URL, then `origin` + `push -u`), and start a merge
+ * (the picked branch, or the upstream once diverged; resolving it is the
+ * Changes panel's job). Committing is
+ * NOT here: it is the Changes panel's staged-only commit box, beside the
+ * per-file stage/unstage/discard it commits — one way to commit, and it only
+ * ever takes what the user staged.
+ *
+ * It renders at the top of the Changes panel (`LaneGitHeader`), its actions as
+ * icons on the same row as the branch line, rather than in the lane card's ⋯ menu: that menu holds the rare and dangerous (`reset
+ * worktree`), and these are the ordinary moves a lane needs several times an hour.
+ * Nothing here decides what an action may do; the server does (pull is always
+ * --ff-only, switch refuses a dirty tree), and this only reports what it said.
+ * Failures print git's own text, because "! [rejected] non-fast-forward" tells
+ * the user more than any sentence this file could write. The one exception
+ * is `EGITAUTH` (issue #45): the dashboard's git has no terminal to prompt
+ * in, so a remote wanting a login opens a form here and the SAME action is
+ * resent with the typed credential — the token is never rendered back.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ArrowDown,
+  ArrowUp,
+  CloudUpload,
+  GitBranch,
+  GitMerge,
+  Plus,
+  RefreshCw,
+  Trash2,
+  Upload,
+} from "lucide-react";
+import { api, type GitAuthNeeded } from "../../lib/api";
+import type { LaneGitFacts, LaneWorktree } from "../../lib/types";
+
+type Action =
+  | "fetch"
+  | "pull"
+  | "push"
+  | "switch"
+  | "branch-create"
+  | "branch-delete"
+  | "merge"
+  | "publish";
+type RunBody = Parameters<typeof api.lanes.gitAction>[2];
+
+const LOCAL_HOST = /^(localhost|127\.|\[::1\])/;
+
+function Btn({
+  label,
+  icon,
+  busy,
+  disabled,
+  title,
+  compact,
+  onClick,
+}: {
+  label: string;
+  icon?: React.ReactNode;
+  busy?: boolean;
+  disabled?: boolean;
+  title?: string;
+  /** Icon only; the label becomes the accessible name, the hint the tooltip. */
+  compact?: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled || busy}
+      title={title}
+      aria-label={compact ? label : undefined}
+      className={`flex items-center gap-1 rounded text-[11px] text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg-primary disabled:cursor-not-allowed disabled:opacity-40 ${
+        compact ? "h-6 w-6 justify-center" : "border border-border-light px-1.5 py-0.5"
+      }`}
+    >
+      {icon}
+      {!compact && label}
+    </button>
+  );
+}
+
+export function LaneGitBar({
+  laneId,
+  git,
+  onChanged,
+  onNewLane,
+  lead,
+}: {
+  laneId: number;
+  git: LaneGitFacts;
+  /** Rendered at the start of the action row: the header's branch line, so
+   *  the facts and the buttons that act on them read as one row. */
+  lead?: React.ReactNode;
+  /** Called after any action that could have moved the working copy. */
+  onChanged: () => void;
+  /** Open the Add-lane flow for a sibling worktree of this repo, optionally on
+   *  a branch this bar just created. Omitted where no such flow is reachable. */
+  onNewLane?: (branch?: string) => void;
+}) {
+  const { t } = useTranslation(["lanes"]);
+  const [busy, setBusy] = useState<Action | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [switching, setSwitching] = useState(false);
+  const [branches, setBranches] = useState<string[] | null>(null);
+  const [worktrees, setWorktrees] = useState<LaneWorktree[]>([]);
+  const [picked, setPicked] = useState("");
+  const [newBranch, setNewBranch] = useState("");
+  // Set when git needed a login for `action`; the form resends that action.
+  const [login, setLogin] = useState<{ action: Action; auth: GitAuthNeeded } | null>(null);
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [remember, setRemember] = useState(true);
+  const [publishing, setPublishing] = useState(false);
+  const [url, setUrl] = useState("");
+  // The Changes panel is not keyed by lane, so this bar outlives a lane switch.
+  // All of the state above describes ONE lane — a branch picked for lane A,
+  // applied after switching, would move B's HEAD — so it is reset during
+  // render the moment the id changes, before anything can act on it.
+  const [shownLane, setShownLane] = useState(laneId);
+  // One action at a time, checked synchronously: `busy` is state, and a second
+  // Enter can land before the render that disables anything.
+  const inFlight = useRef(false);
+  if (shownLane !== laneId) {
+    setShownLane(laneId);
+    setBusy(null);
+    setError(null);
+    setSwitching(false);
+    setBranches(null);
+    setWorktrees([]);
+    setPicked("");
+    setNewBranch("");
+    setLogin(null);
+    setPassword("");
+    setPublishing(false);
+    setUrl("");
+    inFlight.current = false;
+  }
+  const laneNow = useRef(laneId);
+  laneNow.current = laneId;
+
+  if (!git.available) return null;
+  const dirty = git.dirty + git.untracked;
+  const merging = !!git.merging;
+
+  const run = async (action: Action, body?: RunBody) => {
+    if (inFlight.current) return;
+    inFlight.current = true;
+    const lane = laneId;
+    setBusy(action);
+    setError(null);
+    try {
+      const res = await api.lanes.gitAction(lane, action, body || {});
+      // Landed after a lane switch: every write below belongs to the lane
+      // no longer shown.
+      if (laneNow.current !== lane) return;
+      // A merge that stopped on conflicts still succeeded in starting; the
+      // Changes panel below lists the files to resolve.
+      if (res?.conflicts?.length)
+        setError(t("gitBar.mergeConflicts", { count: res.conflicts.length }));
+      setLogin(null);
+      setPassword("");
+      // The branch list this bar is showing is stale the moment a branch is
+      // created, deleted or switched to, so it is re-read rather than patched.
+      if (action === "publish") {
+        setPublishing(false);
+        setUrl("");
+      } else if (action === "switch" || action.startsWith("branch-")) {
+        if (action === "switch") setSwitching(false);
+        else setNewBranch("");
+        setPicked("");
+        setBranches(null);
+        await refreshBranches();
+      }
+      onChanged();
+    } catch (err) {
+      // The server appends git's own stderr to the message, so this is the
+      // rejection text verbatim — hence the <pre> below rather than a line.
+      // ENOREMOTE is the one refusal with no git text to show: the server's
+      // sentence is English and says less than a translated one.
+      const auth = (err as { code?: string; auth?: GitAuthNeeded })?.auth;
+      if (laneNow.current === lane && (err as { code?: string })?.code === "EGITAUTH" && auth) {
+        setLogin({ action, auth });
+        setUsername((u) => u || auth.username || "");
+        setPassword("");
+      } else if (laneNow.current === lane)
+        setError(
+          (err as { code?: string })?.code === "ENOREMOTE"
+            ? t("gitBar.errNoRemote")
+            : err instanceof Error
+              ? err.message
+              : String(err)
+        );
+    } finally {
+      if (laneNow.current === lane) {
+        inFlight.current = false;
+        setBusy(null);
+      }
+    }
+  };
+
+  const refreshBranches = async () => {
+    try {
+      const r = await api.lanes.gitBranches(laneId);
+      if (laneNow.current !== laneId) return;
+      setBranches(r.branches);
+      setWorktrees(r.worktrees || []);
+    } catch {
+      if (laneNow.current === laneId) setBranches([]);
+    }
+  };
+
+  const openSwitch = async () => {
+    setSwitching((v) => !v);
+    setError(null);
+    if (branches) return;
+    await refreshBranches();
+  };
+
+  const merge = (branch: string) => {
+    if (!window.confirm(t("gitBar.mergeConfirm", { branch, current: git.branch }))) return;
+    void run("merge", { branch });
+  };
+
+  const heldBy = new Map(
+    worktrees.filter((w) => w.branch).map((w) => [w.branch as string, w.path])
+  );
+
+  return (
+    <div data-testid="lane-git-bar" className="space-y-1">
+      <div className="flex min-w-0 items-center gap-2">
+        {lead}
+        {/* Ahead/behind first: it is the fact that decides which of the
+            buttons beside it the user actually wants. */}
+        {/* Null counts with an upstream named means git could not compare
+            the two (the upstream ref is gone): claiming "in sync" there
+            would be a lie, so it reads as not pushed. */}
+        {git.unborn ? (
+          <span className="shrink-0 font-mono text-[11px] text-fg-muted">
+            {t("gitBar.noCommits")}
+          </span>
+        ) : git.upstream && git.ahead != null && git.behind != null ? (
+          <span
+            data-testid="lane-git-tracking"
+            title={git.upstream}
+            className="flex shrink-0 items-center gap-1 font-mono text-[11px] text-fg-muted"
+          >
+            {(git.ahead ?? 0) > 0 && (
+              <span className="flex items-center text-status-warning">
+                <ArrowUp className="h-3 w-3" />
+                {git.ahead}
+              </span>
+            )}
+            {(git.behind ?? 0) > 0 && (
+              <span className="flex items-center text-accent">
+                <ArrowDown className="h-3 w-3" />
+                {git.behind}
+              </span>
+            )}
+            {!git.ahead && !git.behind && <span>{t("gitBar.inSync")}</span>}
+          </span>
+        ) : (
+          git.hasRemote && (
+            <span className="shrink-0 font-mono text-[11px] text-fg-muted">
+              {t("gitBar.noUpstream")}
+            </span>
+          )
+        )}
+
+        {/* Diverged: a --ff-only pull can only refuse, so offer the merge. */}
+        {git.upstream && (git.ahead ?? 0) > 0 && (git.behind ?? 0) > 0 && !merging && (
+          <Btn
+            label={t("gitBar.mergeUpstream", { upstream: git.upstream })}
+            icon={<GitMerge className="h-3 w-3" />}
+            busy={busy === "merge"}
+            disabled={!!busy || dirty > 0}
+            title={dirty > 0 ? t("gitBar.switchDirty") : t("gitBar.mergeUpstreamHint")}
+            onClick={() => merge(git.upstream as string)}
+          />
+        )}
+
+        {/* A repo with no commit has nothing to push, fetch into or branch
+            from — the one next step is the commit box below. */}
+        {git.unborn ? (
+          <span className="ml-auto text-[10px] text-fg-muted">{t("gitBar.unbornHint")}</span>
+        ) : (
+          <div className="ml-auto flex shrink-0 items-center">
+            <Btn
+              compact
+              label={t("gitBar.fetch")}
+              icon={<RefreshCw className="h-3.5 w-3.5" />}
+              busy={busy === "fetch"}
+              disabled={!git.hasRemote || !!busy}
+              title={t("gitBar.fetchHint")}
+              onClick={() => run("fetch")}
+            />
+            <Btn
+              compact
+              label={t("gitBar.pull")}
+              icon={<ArrowDown className="h-3.5 w-3.5" />}
+              busy={busy === "pull"}
+              disabled={!git.hasRemote || !!busy || merging}
+              title={merging ? t("gitBar.merging") : t("gitBar.pullHint")}
+              onClick={() => run("pull")}
+            />
+            <Btn
+              compact
+              // Same `push -u <remote> HEAD` either way; a branch with no
+              // upstream is being published, not updated, so it says that.
+              label={git.hasRemote && !git.upstream ? t("gitBar.publishBranch") : t("gitBar.push")}
+              icon={<Upload className="h-3.5 w-3.5" />}
+              busy={busy === "push"}
+              disabled={!git.hasRemote || !!busy}
+              title={
+                git.hasRemote && !git.upstream
+                  ? t("gitBar.publishBranchHint")
+                  : t("gitBar.pushHint")
+              }
+              onClick={() => run("push")}
+            />
+            {!git.hasRemote && (
+              <Btn
+                compact
+                label={t("gitBar.publish")}
+                icon={<CloudUpload className="h-3.5 w-3.5" />}
+                disabled={!!busy}
+                title={t("gitBar.publishHint")}
+                onClick={() => {
+                  setPublishing((v) => !v);
+                  setError(null);
+                }}
+              />
+            )}
+            <Btn
+              compact
+              label={t("gitBar.switch")}
+              icon={<GitBranch className="h-3.5 w-3.5" />}
+              disabled={!!busy || merging}
+              // A dirty tree is refused server-side; saying so before the click
+              // beats a red box after it.
+              title={
+                merging
+                  ? t("gitBar.merging")
+                  : dirty > 0
+                    ? t("gitBar.switchDirty")
+                    : t("gitBar.switchHint")
+              }
+              onClick={openSwitch}
+            />
+          </div>
+        )}
+      </div>
+
+      {switching && (
+        <div className="flex items-center gap-1.5">
+          <select
+            aria-label={t("gitBar.switchLabel")}
+            value={picked}
+            disabled={!!busy}
+            onChange={(e) => setPicked(e.target.value)}
+            className="min-w-0 flex-1 rounded border border-border-light bg-surface-0 px-2 py-0.5 font-mono text-[11px] text-fg-primary focus:border-accent focus:outline-none disabled:opacity-40"
+          >
+            <option value="">{t("gitBar.switchLabel")}</option>
+            {(branches || []).map((b) => {
+              const held = heldBy.get(b);
+              return (
+                <option key={b} value={b}>
+                  {b}
+                  {b === git.branch ? ` — ${t("gitBar.switchCurrent")}` : held ? ` — ${held}` : ""}
+                </option>
+              );
+            })}
+          </select>
+          <Btn
+            label={t("gitBar.switchApply")}
+            busy={busy === "switch"}
+            // A branch git already has checked out somewhere else cannot be
+            // switched to — git allows one worktree per branch.
+            disabled={!picked || picked === git.branch || !!heldBy.get(picked) || dirty > 0}
+            title={dirty > 0 ? t("gitBar.switchDirty") : t("gitBar.switchHint")}
+            onClick={() => void run("switch", { branch: picked })}
+          />
+          <Btn
+            label={t("gitBar.merge")}
+            icon={<GitMerge className="h-3 w-3" />}
+            busy={busy === "merge"}
+            disabled={!picked || picked === git.branch || dirty > 0 || !!busy}
+            title={dirty > 0 ? t("gitBar.switchDirty") : t("gitBar.mergeHint")}
+            onClick={() => merge(picked)}
+          />
+          {onNewLane && (
+            <Btn
+              label={t("gitBar.newLane")}
+              // A branch any worktree holds — this lane's own included — is
+              // one `addWorktree` refuses with EBRANCHBUSY; say so up front.
+              title={
+                picked && (heldBy.has(picked) || picked === git.branch)
+                  ? t("gitBar.newLaneHeld", {
+                      path: heldBy.get(picked) ?? t("gitBar.switchCurrent"),
+                    })
+                  : t("gitBar.newLaneHint")
+              }
+              disabled={!picked || heldBy.has(picked) || picked === git.branch}
+              // The sibling lane is created through the normal Add-lane flow,
+              // prefilled — one provisioning path, not a second one here.
+              onClick={() => onNewLane(picked)}
+            />
+          )}
+          <Btn
+            label={t("gitBar.branchDelete")}
+            icon={<Trash2 className="h-3 w-3" />}
+            busy={busy === "branch-delete"}
+            disabled={!picked || picked === git.branch || !!heldBy.get(picked)}
+            title={t("gitBar.branchDeleteHint")}
+            onClick={() => void run("branch-delete", { branch: picked })}
+          />
+          {dirty > 0 && (
+            <span className="text-[10px] text-status-warning">{t("gitBar.switchDirty")}</span>
+          )}
+        </div>
+      )}
+
+      {switching && (
+        <div className="flex items-center gap-1.5">
+          <input
+            value={newBranch}
+            onChange={(e) => setNewBranch(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && newBranch.trim())
+                void run("branch-create", { branch: newBranch.trim() });
+            }}
+            placeholder={t("gitBar.branchNewPlaceholder")}
+            aria-label={t("gitBar.branchNewPlaceholder")}
+            className="min-w-0 flex-1 rounded border border-border-light bg-surface-0 px-2 py-0.5 font-mono text-[11px] text-fg-primary placeholder:text-fg-muted focus:border-accent focus:outline-none"
+          />
+          <Btn
+            label={t("gitBar.branchCreate")}
+            icon={<Plus className="h-3 w-3" />}
+            busy={busy === "branch-create"}
+            disabled={!newBranch.trim()}
+            // Creating does not switch: the point is usually a sibling lane,
+            // and moving this pane's HEAD under a working agent is not.
+            title={t("gitBar.branchCreateHint")}
+            onClick={() => void run("branch-create", { branch: newBranch.trim() })}
+          />
+        </div>
+      )}
+
+      {publishing && !git.hasRemote && !git.unborn && (
+        <div className="flex items-center gap-1.5">
+          <input
+            value={url}
+            onChange={(e) => setUrl(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && url.trim()) void run("publish", { url: url.trim() });
+            }}
+            // The server decides which URLs are acceptable (https without a
+            // token, ssh, user@host:path); this only names the two usual ones.
+            placeholder={t("gitBar.publishUrl")}
+            aria-label={t("gitBar.publishUrl")}
+            className="min-w-0 flex-1 rounded border border-border-light bg-surface-0 px-2 py-0.5 font-mono text-[11px] text-fg-primary placeholder:text-fg-muted focus:border-accent focus:outline-none"
+          />
+          <Btn
+            label={t("gitBar.publishApply")}
+            icon={<Upload className="h-3 w-3" />}
+            busy={busy === "publish"}
+            disabled={!url.trim()}
+            title={t("gitBar.publishHint")}
+            onClick={() => void run("publish", { url: url.trim() })}
+          />
+        </div>
+      )}
+
+      {login && (
+        <form
+          data-testid="lane-git-login"
+          className="space-y-1.5 rounded border border-border-light bg-surface-1 p-2 text-[11px]"
+          onSubmit={(e) => {
+            e.preventDefault();
+            const { protocol, host } = login.auth;
+            void run(login.action, {
+              credentials: { protocol, host, username: username.trim(), password, remember },
+            });
+          }}
+        >
+          <p className="font-medium text-fg-primary">
+            {t("gitBar.loginTitle", { host: login.auth.host })}
+          </p>
+          {login.auth.rejected && (
+            <p role="alert" className="text-status-danger">
+              {t("gitBar.loginRejected")}
+            </p>
+          )}
+          <div className="flex gap-1.5">
+            <input
+              aria-label={t("gitBar.loginUser")}
+              placeholder={t("gitBar.loginUser")}
+              autoComplete="username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              className="min-w-0 flex-1 rounded border border-border-light bg-surface-0 px-2 py-0.5 text-fg-primary placeholder:text-fg-muted focus:border-accent focus:outline-none"
+            />
+            <input
+              type="password"
+              aria-label={t("gitBar.loginPassword")}
+              placeholder={t("gitBar.loginPassword")}
+              autoComplete="current-password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="min-w-0 flex-1 rounded border border-border-light bg-surface-0 px-2 py-0.5 text-fg-primary placeholder:text-fg-muted focus:border-accent focus:outline-none"
+            />
+          </div>
+          <label className="flex items-center gap-1.5 text-fg-secondary">
+            <input
+              type="checkbox"
+              checked={remember}
+              onChange={(e) => setRemember(e.target.checked)}
+            />
+            {t("gitBar.loginRemember")}
+          </label>
+          <p className="text-[10px] text-fg-muted">{t("gitBar.loginTokenHint")}</p>
+          {/* The token crosses the network in the clear on a plain-http LAN address. */}
+          {location.protocol === "http:" && !LOCAL_HOST.test(location.hostname) && (
+            <p className="text-[10px] text-status-warning">{t("gitBar.loginInsecure")}</p>
+          )}
+          <div className="flex gap-1.5">
+            <button
+              type="submit"
+              disabled={!username.trim() || !password || !!busy}
+              className="rounded border border-accent/40 bg-accent/15 px-2 py-0.5 text-accent hover:bg-accent/25 disabled:cursor-not-allowed disabled:opacity-40"
+            >
+              {t("gitBar.loginSubmit")}
+            </button>
+            <Btn
+              label={t("gitBar.loginCancel")}
+              onClick={() => {
+                setLogin(null);
+                setPassword("");
+              }}
+            />
+          </div>
+        </form>
+      )}
+
+      {error && (
+        <pre
+          role="alert"
+          data-testid="lane-git-bar-error"
+          className="max-h-24 overflow-auto whitespace-pre-wrap rounded border border-status-danger/40 bg-status-danger/10 px-2 py-1 text-[10px] text-status-danger"
+        >
+          {error}
+        </pre>
+      )}
+    </div>
+  );
+}
+
+export default LaneGitBar;

client/src/components/lanes/LaneGitHeader.tsx

@@ -0,0 +1,294 @@
+/**
+ * @file The top of the Changes panel: the lane's working-copy line (branch,
+ * head, subject, and the uncommitted counts that open a per-file hover panel)
+ * and the git action bar under it (`LaneGitBar`).
+ *
+ * It used to sit in the lane card, a column away from the diff it describes —
+ * a pull there changed files the Changes panel only noticed on its next poll.
+ * Here the two share one read of `GET /api/lanes/:id/git` (`useLaneGitFacts`,
+ * owned by the panel) and refresh each other after every write.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import { GitBranch } from "lucide-react";
+import { LaneGitBar } from "./LaneGitBar";
+import { api } from "../../lib/api";
+import { keepIfSame } from "../../lib/keepIfSame";
+import type { LaneGitFacts, LaneGitFile } from "../../lib/types";
+
+/** How often the mounted panel re-reads its working-copy facts. Slow on
+ *  purpose: each call is five git subprocesses server-side, and a branch name
+ *  does not change on the timescale the lane list is polled at. */
+const GIT_REFRESH_MS = 30_000;
+
+/**
+ * The lane's own working copy, fetched by the Changes panel rather than folded
+ * into the polled lane list. Absent facts are not an error state: a lane may point at a
+ * plain directory, and it renders with no git header.
+ */
+export function useLaneGitFacts(laneId: number): [LaneGitFacts | null, () => void] {
+  const [facts, setFacts] = useState<LaneGitFacts | null>(null);
+  // Bumped by the git action bar: a commit or a pull changes every fact on
+  // this row, and waiting out the 30s poll makes the button look inert.
+  const [nonce, setNonce] = useState(0);
+  // A lane switch drops the previous lane's facts during render, so nothing
+  // (the git bar's "current branch" included) shows them until the new read.
+  const [factsLane, setFactsLane] = useState(laneId);
+  if (factsLane !== laneId) {
+    setFactsLane(laneId);
+    setFacts(null);
+  }
+
+  useEffect(() => {
+    let alive = true;
+    const read = () => {
+      api.lanes
+        .git(laneId)
+        .then((f) => {
+          if (alive) setFacts(keepIfSame(f));
+        })
+        .catch(() => {
+          // Silent: a panel that cannot read git shows the rest of itself. An
+          // error banner here would fire on every lane on every server blip.
+          if (alive) setFacts(keepIfSame<LaneGitFacts>({ available: false }));
+        });
+    };
+    read();
+    const timer = setInterval(read, GIT_REFRESH_MS);
+    return () => {
+      alive = false;
+      clearInterval(timer);
+    };
+  }, [laneId, nonce]);
+
+  return [facts, () => setNonce((n) => n + 1)];
+}
+
+/** Porcelain status code -> the letter shown and the colour it is shown in.
+ *  Keyed on the code's first meaningful character, so an index-side change
+ *  (`M `), a worktree-side one (` M`) and both (`MM`) read the same. */
+const GIT_STATUS_STYLE: Record<string, string> = {
+  M: "text-status-warning",
+  A: "text-status-success",
+  D: "text-status-danger",
+  R: "text-accent",
+  C: "text-accent",
+  U: "text-status-danger",
+  "?": "text-fg-muted",
+};
+
+/**
+ * The file list behind a lane's uncommitted counts: which files, what happened
+ * to each, and how many lines it gained and lost.
+ *
+ * It replaced a native `title` tooltip, which could show the same paths but
+ * neither colour them nor align the deltas — and a plain porcelain dump is not
+ * something you read at a glance.
+ *
+ * PORTALLED to `document.body` and `position: fixed`: the Changes panel
+ * scrolls in its own `overflow` box, and an absolutely positioned panel would
+ * be clipped by it. It flips above its anchor rather than off the bottom of
+ * the window, and clamps to the right edge.
+ */
+function LaneGitFilesPanel({
+  files,
+  hidden,
+  anchor,
+  onPointerEnter,
+  onPointerLeave,
+}: {
+  files: LaneGitFile[];
+  hidden: number;
+  /** The counts button this panel hangs off. */
+  anchor: HTMLElement | null;
+  onPointerEnter: () => void;
+  onPointerLeave: () => void;
+}) {
+  const { t } = useTranslation(["lanes"]);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const [pos, setPos] = useState<{ top: number; left: number } | null>(null);
+
+  // After the first paint, when the panel's real height is known: place it
+  // under the anchor, or above it when that would run off the bottom.
+  useLayoutEffect(() => {
+    if (!anchor || !panelRef.current) return;
+    const a = anchor.getBoundingClientRect();
+    const p = panelRef.current.getBoundingClientRect();
+    const gap = 4;
+    const top =
+      a.bottom + gap + p.height > window.innerHeight ? a.top - p.height - gap : a.bottom + gap;
+    setPos({
+      top: Math.max(8, top),
+      left: Math.max(8, Math.min(a.left, document.documentElement.clientWidth - p.width - 8)),
+    });
+  }, [anchor, files]);
+  // Totals are over the LISTED files only — the cap means the rest are unknown,
+  // and a total that silently omits them would be a wrong number rather than a
+  // partial one. `hidden` says how many are missing.
+  const added = files.reduce((n, f) => n + (f.added ?? 0), 0);
+  const deleted = files.reduce((n, f) => n + (f.deleted ?? 0), 0);
+
+  return createPortal(
+    <div
+      ref={panelRef}
+      data-testid="lane-git-files"
+      role="group"
+      aria-label={t("git.filesHeading", { count: files.length })}
+      // The pointer has to be able to travel INTO the panel to scroll it, so
+      // the panel answers the same enter/leave pair the trigger does.
+      onMouseEnter={onPointerEnter}
+      onMouseLeave={onPointerLeave}
+      style={{
+        position: "fixed",
+        zIndex: 60,
+        top: pos?.top ?? 0,
+        left: pos?.left ?? 0,
+        // Hidden for the one frame before it has been measured, so it never
+        // flashes at the top-left corner.
+        visibility: pos ? "visible" : "hidden",
+      }}
+      className="max-h-72 w-[22rem] max-w-[calc(100vw-1rem)] overflow-y-auto rounded-md border border-border bg-surface-1 p-2 shadow-lg"
+    >
+      <div className="mb-1.5 flex items-baseline gap-2 border-b border-border pb-1.5 text-[11px]">
+        <span className="text-fg-secondary">{t("git.filesHeading", { count: files.length })}</span>
+        <span className="ml-auto shrink-0 font-mono tabular-nums">
+          <span className="text-status-success">+{added}</span>{" "}
+          <span className="text-status-danger">−{deleted}</span>
+        </span>
+      </div>
+      <ul className="space-y-0.5 font-mono text-[11px]">
+        {files.map((f) => {
+          const code = f.status.trim()[0] || "?";
+          return (
+            <li key={f.path} className="flex items-baseline gap-2">
+              <span
+                className={`w-3 shrink-0 font-semibold ${GIT_STATUS_STYLE[code] || "text-fg-muted"}`}
+                title={f.status}
+              >
+                {code}
+              </span>
+              {/* The DIRECTORY truncates, never the filename: the name is what
+                  you scan for, the path is only there to disambiguate it. */}
+              <span className="flex min-w-0 flex-1 items-baseline" title={f.path}>
+                <span className="truncate text-fg-muted">{f.path.replace(/[^/]+$/, "")}</span>
+                <span className="shrink-0 text-fg-primary">{f.path.split("/").pop()}</span>
+              </span>
+              <span className="shrink-0 tabular-nums">
+                {f.added === null && f.deleted === null ? (
+                  <span className="text-fg-muted">{t("git.noDelta")}</span>
+                ) : (
+                  <>
+                    <span className="text-status-success">+{f.added ?? 0}</span>{" "}
+                    <span className="text-status-danger">−{f.deleted ?? 0}</span>
+                  </>
+                )}
+              </span>
+            </li>
+          );
+        })}
+      </ul>
+      {hidden > 0 && (
+        <p className="mt-1.5 border-t border-border pt-1.5 text-[10px] text-fg-muted">
+          {t("git.filesMore", { count: hidden })}
+        </p>
+      )}
+    </div>,
+    document.body
+  );
+}
+
+export function LaneGitHeader({
+  laneId,
+  git,
+  onChanged,
+  onNewLane,
+}: {
+  laneId: number;
+  git: LaneGitFacts | null;
+  /** Called after a git bar action: the facts AND the panel's diff moved. */
+  onChanged: () => void;
+  /** See `LaneGitBar`'s prop of the same name. */
+  onNewLane?: (branch?: string) => void;
+}) {
+  const { t } = useTranslation(["lanes"]);
+  const [filesOpen, setFilesOpen] = useState(false);
+  const [countsAnchor, setCountsAnchor] = useState<HTMLButtonElement | null>(null);
+  // Closing is DELAYED: the panel is portalled away from the trigger, so the
+  // pointer leaves the trigger before it can land on the panel it is heading
+  // for. Any enter — trigger or panel — cancels the pending close.
+  const filesCloseTimer = useRef<number | undefined>(undefined);
+  const openFiles = useCallback(() => {
+    window.clearTimeout(filesCloseTimer.current);
+    setFilesOpen(true);
+  }, []);
+  const closeFiles = useCallback(() => {
+    window.clearTimeout(filesCloseTimer.current);
+    filesCloseTimer.current = window.setTimeout(() => setFilesOpen(false), 150);
+  }, []);
+  useEffect(() => () => window.clearTimeout(filesCloseTimer.current), []);
+
+  if (!git?.available) return null;
+  const lead = (
+    <>
+      {/* One row with the actions: branch first and strongest, then the head
+          and its subject, which is what truncates when the panel is narrow
+          (the whole of it stays in the tooltip). */}
+      <div
+        data-testid="lane-git"
+        className="flex min-w-0 flex-1 items-baseline gap-1.5 font-mono text-[11px]"
+        title={`${git.head} ${git.subject}`}
+      >
+        <span className="flex shrink-0 items-center gap-1 self-center font-semibold text-fg-primary">
+          <GitBranch className="h-3 w-3 text-fg-muted" />
+          {git.branch}
+        </span>
+        <span className="shrink-0 text-fg-muted">{git.head}</span>
+        <span className="min-w-0 truncate text-fg-muted">{git.subject}</span>
+      </div>
+      {(git.dirty > 0 || git.untracked > 0) && (
+        <button
+          type="button"
+          ref={setCountsAnchor}
+          data-testid="lane-git-counts"
+          aria-expanded={filesOpen}
+          onMouseEnter={openFiles}
+          onMouseLeave={closeFiles}
+          // Focus and click open it too: hover is not a gesture a
+          // keyboard or a touchscreen has.
+          onFocus={openFiles}
+          onBlur={closeFiles}
+          onClick={() => setFilesOpen((v) => !v)}
+          className="shrink-0 cursor-help rounded-full border border-status-warning/40 bg-status-warning/10 px-2 py-px text-[10.5px] text-status-warning"
+        >
+          {t("git.uncommitted", { dirty: git.dirty, untracked: git.untracked })}
+        </button>
+      )}
+    </>
+  );
+  return (
+    <div
+      data-testid="lane-git-header"
+      className="mb-2 rounded-md border border-border bg-surface-2 px-2 py-1"
+    >
+      <LaneGitBar
+        laneId={laneId}
+        git={git}
+        onChanged={onChanged}
+        onNewLane={onNewLane}
+        lead={lead}
+      />
+      {filesOpen && git.files?.length > 0 && (
+        <LaneGitFilesPanel
+          files={git.files}
+          hidden={git.dirty + git.untracked - git.files.length}
+          anchor={countsAnchor}
+          onPointerEnter={openFiles}
+          onPointerLeave={closeFiles}
+        />
+      )}
+    </div>
+  );
+}

client/src/components/lanes/LaneStripCard.tsx

@@ -1,15 +1,24 @@
 /**
  * @file The compact lane tile used in the Workspace's horizontal lane strip.
  * It carries only what you need to pick a lane — which lane, is it alive,
- * what stage, how far — because the full card, its controls and its
- * working-copy facts live in the detail panel below it. Keeping the tile
- * small and fixed-width is what lets many lanes stay scannable in one
- * scrolling row.
+ * what stage — because the full card, its controls and its working-copy facts
+ * live in the detail panel below it. Stage badges ride on the id row rather
+ * than a line of their own, and progress (bar and percent) is deliberately
+ * absent: the detail panel's pipeline map below shows the same thing with the
+ * stage names attached. Keeping the tile small and fixed-width is what lets
+ * many lanes stay scannable in one scrolling row.
+ *
+ * The tile is also the strip's reorder handle: native HTML5 drag-and-drop, no
+ * dependency. Ceiling: desktop pointers only — there is no touch drag and no
+ * auto-scroll when the strip overflows, so Alt+Arrow moves the focused tile as
+ * the keyboard (and touch-free) path.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import type { Lane } from "../../lib/types";
+import { useAiTools } from "../../hooks/useAiTools";
 
 const LIVENESS_DOT: Record<Lane["liveness"], string> = {
   active: "bg-status-success",
@@ -33,7 +42,7 @@ const LIVENESS_DOT: Record<Lane["liveness"], string> = {
  * recordDetection refuses any detection that isn't strictly ahead.
  */
 function detectionLeads(lane: Lane): boolean {
-  if (!lane.detected_stage) return false;
+  if (!lane.detected_stage || !lane.pipeline_nodes.length) return false;
   const nodes = lane.pipeline_nodes;
   return (
     nodes.findIndex((n) => n.id === lane.detected_stage) >=
@@ -43,55 +52,83 @@ function detectionLeads(lane: Lane): boolean {
 
 export default function LaneStripCard({
   lane,
+  index,
   selected,
   onSelect,
+  onReorder,
 }: {
   lane: Lane;
+  /** Position in the lane array — the unit both reorder paths speak in. */
+  index: number;
   selected: boolean;
   onSelect: () => void;
+  onReorder: (from: number, to: number) => void;
 }) {
   const { t } = useTranslation(["lanes"]);
+  const { label: toolLabel } = useAiTools();
+  const [dropTarget, setDropTarget] = useState(false);
 
   return (
     <button
       type="button"
       data-testid={`lane-tile-${lane.id}`}
       data-selected={selected ? "true" : undefined}
+      data-drop-target={dropTarget ? "true" : undefined}
       aria-pressed={selected}
       onClick={onSelect}
-      title={lane.cwd}
-      className={`w-56 shrink-0 rounded-lg border p-3 text-left shadow-sm transition-colors ${
-        selected
-          ? "border-accent bg-accent/10"
-          : "border-border bg-surface-2 hover:border-border-light hover:bg-surface-3"
+      draggable
+      onDragStart={(e) => {
+        // Firefox starts no drag at all without a setData call.
+        e.dataTransfer.setData("text/plain", String(index));
+        e.dataTransfer.effectAllowed = "move";
+      }}
+      onDragOver={(e) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = "move";
+        setDropTarget(true);
+      }}
+      onDragLeave={() => setDropTarget(false)}
+      onDragEnd={() => setDropTarget(false)}
+      onDrop={(e) => {
+        e.preventDefault();
+        setDropTarget(false);
+        const from = Number(e.dataTransfer.getData("text/plain"));
+        if (Number.isInteger(from)) onReorder(from, index);
+      }}
+      onKeyDown={(e) => {
+        if (!e.altKey || (e.key !== "ArrowLeft" && e.key !== "ArrowRight")) return;
+        e.preventDefault();
+        onReorder(index, index + (e.key === "ArrowLeft" ? -1 : 1));
+      }}
+      title={`${lane.cwd}\n${t("reorderHint")}`}
+      className={`w-56 shrink-0 cursor-grab rounded-lg border p-3 text-left shadow-sm transition-colors active:cursor-grabbing ${
+        dropTarget
+          ? "border-accent bg-accent/20"
+          : selected
+            ? "border-accent bg-accent/10"
+            : "border-border bg-surface-2 hover:border-border-light hover:bg-surface-3"
       }`}
     >
-      <div className="mb-1.5 flex items-center gap-1.5">
+      <div className="mb-1.5 flex items-center gap-1.5 text-[11px]">
         <span className={`h-2 w-2 shrink-0 rounded-full ${LIVENESS_DOT[lane.liveness]}`} />
-        <span className="text-[10px] font-semibold uppercase tracking-widest text-fg-muted">
-          {t("cardId", { id: lane.id })}
+        {/* The bare id, not "Lane 23": the word cost a third of the row's
+            width and said nothing, but the number itself is how the CLI
+            addresses a lane (`agenthub stage --lane 23`), so it stays. */}
+        <span className="shrink-0 text-[10px] font-semibold tracking-widest text-fg-muted">
+          #{lane.id}
         </span>
-        {lane.needs_action && (
-          <span className="ml-auto text-status-warning" title={lane.needs_action}>
-            ⚠
-          </span>
-        )}
-      </div>
-
-      <div className="mb-2 truncate text-[13px] font-medium text-fg-primary">
-        {lane.title || lane.cwd}
-      </div>
-
-      <div className="flex items-center gap-1.5 text-[11px]">
-        <span className="truncate rounded bg-surface-4 px-1.5 py-0.5 text-fg-secondary">
-          {lane.stage}
-        </span>
-        {lane.tool === "codex" && (
+        {/* Only claude lanes carry a pipeline, and only while a template is
+            installed; the others show their CLI's tag in place of the stage chip. */}
+        {lane.tool !== "claude" || lane.pipeline_nodes.length === 0 ? (
           <span className="shrink-0 rounded border border-border bg-surface-2 px-1.5 py-0.5 text-[10px] text-fg-muted">
-            Codex
+            {toolLabel(lane.tool)}
+          </span>
+        ) : (
+          <span className="truncate rounded bg-surface-4 px-1.5 py-0.5 text-fg-secondary">
+            {lane.stage}
           </span>
         )}
-        {detectionLeads(lane) && (
+        {lane.tool === "claude" && detectionLeads(lane) && (
           <span
             data-testid={`lane-tile-auto-${lane.id}`}
             title={lane.detected_signal || undefined}
@@ -100,16 +137,16 @@ export default function LaneStripCard({
             {lane.detected_stage}
           </span>
         )}
-        {lane.progress > 0 && (
-          <span className="ml-auto shrink-0 tabular-nums text-fg-muted">{lane.progress}%</span>
+        {lane.needs_action && (
+          <span className="ml-auto shrink-0 text-status-warning" title={lane.needs_action}>
+            ⚠
+          </span>
         )}
       </div>
 
-      {lane.progress > 0 && (
-        <div className="mt-1.5 h-0.5 overflow-hidden rounded-full bg-surface-4">
-          <div className="h-full rounded-full bg-accent" style={{ width: `${lane.progress}%` }} />
-        </div>
-      )}
+      <div className="truncate text-[13px] font-medium text-fg-primary">
+        {lane.title || lane.cwd}
+      </div>
     </button>
   );
 }

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

@@ -10,11 +10,12 @@
  */
 
 import { describe, it, expect, vi, beforeEach } from "vitest";
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { AddLaneModal } from "../AddLaneModal";
 import { api } from "../../../lib/api";
-import type { CwdSuggestion } from "../../../lib/api";
+import type { AiTool, AiToolsView, CwdSuggestion } from "../../../lib/api";
+import { __resetAiTools } from "../../../hooks/useAiTools";
 import type { Lane } from "../../../lib/types";
 
 vi.mock("../../../lib/api", () => ({
@@ -27,12 +28,48 @@ vi.mock("../../../lib/api", () => ({
       browse: vi.fn(),
       get: vi.fn(),
       profileInit: vi.fn(),
-      agentsInstall: vi.fn(),
       mcpSync: vi.fn(),
+      routerApply: vi.fn(),
     },
+    aiRouters: { list: vi.fn() },
+    aiTools: { list: vi.fn(), iconUrl: (id: string) => `/api/ai-tools/${id}/icon` },
+    run: { start: vi.fn() },
   },
 }));
 
+const tool = (id: string, label: string, over: Partial<AiTool> = {}): AiTool => ({
+  id,
+  label,
+  command: id,
+  homepageUrl: null,
+  installed: true,
+  path: `/usr/bin/${id}`,
+  enabled: true,
+  source: "builtin",
+  launcher: null,
+  prompt: { mode: "argv" },
+  resume: false,
+  bypass: false,
+  routerCapable: false,
+  install: null,
+  update: null,
+  modelFlag: false,
+  defaultModel: null,
+  modelVendor: null,
+  configFiles: 0,
+  ...over,
+});
+const TOOLS: AiToolsView = {
+  default: "claude",
+  tools: [
+    tool("claude", "Claude Code", { launcher: "claude", routerCapable: true, prompt: null }),
+    tool("codex", "Codex", { launcher: "codex", routerCapable: true, prompt: null }),
+    tool("gemini", "Gemini"),
+    tool("aider", "Aider", { installed: false, path: null }),
+    tool("grok", "Grok", { enabled: false }),
+  ],
+};
+
 function laneFixture(over: Partial<Lane> = {}): Lane {
   // `as Lane`: spreading a Partial<Lane> widens every field it may carry to
   // `T | undefined`, which no longer satisfies Lane's required fields. The
@@ -105,19 +142,9 @@ async function fillWorktreeForm(
 }
 
 beforeEach(() => {
+  __resetAiTools();
+  vi.mocked(api.aiTools.list).mockReset().mockResolvedValue(TOOLS);
   vi.mocked(api.lanes.branches).mockReset();
-  vi.mocked(api.lanes.pipelines)
-    .mockReset()
-    .mockResolvedValue({
-      pipelines: [
-        { id: "default", name: "Default feature pipeline", nodes: new Array(8).fill({ id: "n" }) },
-        {
-          id: "ship-feature",
-          name: "Ship feature (lane pipeline)",
-          nodes: new Array(16).fill({ id: "n" }),
-        },
-      ],
-    });
   vi.mocked(api.lanes.worktree).mockReset();
   vi.mocked(api.lanes.ensure).mockReset();
   vi.mocked(api.lanes.browse).mockReset();
@@ -129,12 +156,150 @@ beforeEach(() => {
   vi.mocked(api.lanes.profileInit)
     .mockReset()
     .mockResolvedValue({ scaffolded: false, reason: "no detectable Node.js project" });
-  vi.mocked(api.lanes.agentsInstall).mockReset().mockResolvedValue({ installed: [] });
   vi.mocked(api.lanes.mcpSync).mockReset().mockResolvedValue({ servers: [], profilesSeeded: [] });
+  vi.mocked(api.lanes.routerApply).mockReset().mockResolvedValue({
+    tool: "claude",
+    file: null,
+    restart_required: false,
+    run_id: null,
+    profile: "native",
+  });
+  // Only the built-in profile by default, so the router radio stays on Native
+  // and no test has to opt out of it.
+  vi.mocked(api.aiRouters.list)
+    .mockReset()
+    .mockResolvedValue({ items: [nativeRouter()] });
+});
+
+/** The built-in profile, exactly as `GET /api/ai-routers` reports it. */
+function nativeRouter() {
+  return {
+    name: "native",
+    label: "Native",
+    builtin: true,
+    baseUrl: "",
+    hasKey: false,
+    model: "claude-sonnet-5",
+    models: {
+      opus: "claude-opus-5",
+      sonnet: "claude-sonnet-5",
+      haiku: "claude-haiku-4-5-20251001",
+      smallFast: "claude-haiku-4-5-20251001",
+      subagent: "claude-haiku-4-5-20251001",
+    },
+  };
+}
+
+/** A saved router profile, for the tests that need the radio to have a target. */
+function savedRouter(over: Record<string, unknown> = {}) {
+  return {
+    ...nativeRouter(),
+    name: "9router",
+    label: "9Router",
+    builtin: false,
+    hasKey: true,
+    baseUrl: "http://localhost:20128/v1",
+    model: "Highest",
+    ...over,
+  };
+}
+
+describe("AddLaneModal — picking an existing branch (issue #34)", () => {
+  const withWorktrees = {
+    branches: ["main", "feat/other", "feat/held"],
+    current: "main",
+    worktrees: [
+      { path: "/Users/tester/projects/repo", branch: "main" },
+      { path: "/lanes/repo__held", branch: "feat/held" },
+    ],
+  };
+
+  it("lists the repo's existing worktrees once the path resolves", async () => {
+    vi.mocked(api.lanes.branches).mockResolvedValue(withWorktrees);
+    renderModal();
+    const user = userEvent.setup();
+
+    const repoField = screen.getByLabelText("Source repository");
+    await focusField(user, repoField);
+    await user.type(repoField, "/Users/tester/projects/repo");
+
+    const panel = await screen.findByTestId("add-lane-worktrees");
+    expect(panel).toHaveTextContent("/lanes/repo__held");
+    expect(panel).toHaveTextContent("feat/held");
+  });
+
+  it("checks an existing branch out, sending no base", async () => {
+    vi.mocked(api.lanes.branches).mockResolvedValue(withWorktrees);
+    vi.mocked(api.lanes.worktree).mockResolvedValue({ lane: laneFixture({ id: 9 }) });
+    renderModal();
+    const user = userEvent.setup();
+
+    const repoField = screen.getByLabelText("Source repository");
+    await focusField(user, repoField);
+    await user.type(repoField, "/Users/tester/projects/repo");
+    await screen.findByLabelText("Branch to fork from");
+    await user.type(screen.getByLabelText("Title"), "Reuse a branch");
+
+    await user.click(screen.getByRole("button", { name: "Existing branch" }));
+    const select = await screen.findByLabelText("Branch to check out");
+    await user.selectOptions(select, "feat/other");
+    await user.click(screen.getByRole("button", { name: "Add lane" }));
+
+    await waitFor(() =>
+      expect(api.lanes.worktree).toHaveBeenCalledWith(
+        expect.objectContaining({ branch: "feat/other", base: undefined })
+      )
+    );
+  });
+
+  it("greys out a branch another worktree already holds", async () => {
+    vi.mocked(api.lanes.branches).mockResolvedValue(withWorktrees);
+    renderModal();
+    const user = userEvent.setup();
+
+    const repoField = screen.getByLabelText("Source repository");
+    await focusField(user, repoField);
+    await user.type(repoField, "/Users/tester/projects/repo");
+    await screen.findByLabelText("Branch to fork from");
+    await user.click(screen.getByRole("button", { name: "Existing branch" }));
+
+    const held = await screen.findByRole("option", { name: /feat\/held/ });
+    expect(held).toBeDisabled();
+    expect(held).toHaveTextContent("/lanes/repo__held");
+    expect(screen.getByRole("option", { name: "feat/other" })).toBeEnabled();
+  });
+
+  it("lets the server name a new branch when the field is left empty", async () => {
+    vi.mocked(api.lanes.branches).mockResolvedValue(withWorktrees);
+    vi.mocked(api.lanes.worktree).mockResolvedValue({ lane: laneFixture({ id: 9 }) });
+    renderModal();
+    const user = userEvent.setup();
+
+    const repoField = screen.getByLabelText("Source repository");
+    await focusField(user, repoField);
+    await user.type(repoField, "/Users/tester/projects/repo");
+    await screen.findByLabelText("Branch to fork from");
+    await user.type(screen.getByLabelText("Title"), "Auto named");
+    // No `feat/…` guess: the prefix is the server's LANE_BRANCH_PREFIX, which
+    // the form cannot see, so the placeholder only says the field is optional.
+    expect(screen.getByLabelText("New branch name")).toHaveAttribute(
+      "placeholder",
+      "Automatic — named from the title"
+    );
+
+    await user.click(screen.getByRole("button", { name: "Add lane" }));
+    await waitFor(() =>
+      expect(api.lanes.worktree).toHaveBeenCalledWith(
+        expect.objectContaining({ branch: undefined, base: "main" })
+      )
+    );
+  });
 });
 
 describe("AddLaneModal — worktree mode (default)", () => {
-  it("disables confirm until a repo, a title, a resolved branch list, and a new branch name are all present", () => {
+  // The branch NAME is no longer part of this list: an empty one means "let
+  // the server name it" (issue #34).
+  it("disables confirm until a repo, a title and a resolved branch list are all present", () => {
     renderModal();
     expect(screen.getByRole("button", { name: "Add lane" })).toBeDisabled();
   });
@@ -143,6 +308,7 @@ describe("AddLaneModal — worktree mode (default)", () => {
     vi.mocked(api.lanes.branches).mockResolvedValue({
       branches: ["main", "feat/other"],
       current: "main",
+      worktrees: [],
     });
     renderModal();
     const user = userEvent.setup();
@@ -174,8 +340,34 @@ describe("AddLaneModal — worktree mode (default)", () => {
     expect(screen.getByRole("button", { name: "Add lane" })).toBeDisabled();
   });
 
+  it("refuses a worktree of a repo with no commits and steers to Repo mode", async () => {
+    vi.mocked(api.lanes.branches).mockResolvedValue({
+      branches: [],
+      current: "main",
+      worktrees: [],
+    });
+    renderModal();
+    const user = userEvent.setup();
+
+    const repoField = screen.getByLabelText("Source repository");
+    await focusField(user, repoField);
+    await user.type(repoField, "/Users/tester/projects/empty");
+    expect(await screen.findByText(/commit first, then publish/i)).toBeInTheDocument();
+    await user.type(screen.getByLabelText("Title"), "demo");
+    // There is nothing to branch from, so the worktree cannot be created.
+    expect(screen.getByRole("button", { name: "Add lane" })).toBeDisabled();
+
+    await user.click(screen.getByRole("button", { name: "Use as a Repo lane" }));
+    expect(screen.getByRole("button", { name: "Repo" })).toHaveAttribute("aria-pressed", "true");
+    expect(screen.getByRole("button", { name: "Add lane" })).toBeEnabled();
+  });
+
   it("submits through the worktree provisioning endpoint, with the typed branch name", async () => {
-    vi.mocked(api.lanes.branches).mockResolvedValue({ branches: ["main"], current: "main" });
+    vi.mocked(api.lanes.branches).mockResolvedValue({
+      branches: ["main"],
+      current: "main",
+      worktrees: [],
+    });
     vi.mocked(api.lanes.worktree).mockResolvedValue({ lane: laneFixture({ id: 9 }) });
     const onAdded = vi.fn();
     const onClose = vi.fn();
@@ -191,20 +383,24 @@ describe("AddLaneModal — worktree mode (default)", () => {
         title: "New feature",
         base: "main",
         branch: "feat/new-feature",
-        pipeline: "default",
         tool: "claude",
       });
     });
     expect(onAdded).toHaveBeenCalledWith(
       expect.objectContaining({ id: 9, status: "provisioning" })
     );
-    // The modal stays open showing the setup summary until dismissed - it
-    // does not close itself just because the lane was added.
-    expect(onClose).not.toHaveBeenCalled();
+    // Setup came back clean, so there is nothing to report and the dialog is
+    // done. Leaving it up read as "still working" — its confirm button is dead
+    // once the lane exists — which is how it looked stuck.
+    await waitFor(() => expect(onClose).toHaveBeenCalled());
   });
 
   it("shows a server error and leaves the modal open instead of closing silently", async () => {
-    vi.mocked(api.lanes.branches).mockResolvedValue({ branches: ["main"], current: "main" });
+    vi.mocked(api.lanes.branches).mockResolvedValue({
+      branches: ["main"],
+      current: "main",
+      worktrees: [],
+    });
     vi.mocked(api.lanes.worktree).mockRejectedValue(new Error("EWORKTREEDIRCOLLISION"));
     const onClose = vi.fn();
     renderModal({ onClose });
@@ -222,8 +418,12 @@ describe("AddLaneModal — worktree mode (default)", () => {
     expect(screen.queryByRole("dialog")).toBeNull();
   });
 
-  it("fires profileInit, agentsInstall, and mcpSync after a successful worktree call", async () => {
-    vi.mocked(api.lanes.branches).mockResolvedValue({ branches: ["main"], current: "main" });
+  it("fires profileInit and mcpSync after a successful worktree call", async () => {
+    vi.mocked(api.lanes.branches).mockResolvedValue({
+      branches: ["main"],
+      current: "main",
+      worktrees: [],
+    });
     vi.mocked(api.lanes.worktree).mockResolvedValue({
       lane: { id: 42, title: "demo", cwd: "/lanes/demo", status: "provisioning" } as Lane,
     });
@@ -236,18 +436,20 @@ describe("AddLaneModal — worktree mode (default)", () => {
 
     await waitFor(() => expect(api.lanes.worktree).toHaveBeenCalled());
     await waitFor(() => expect(api.lanes.profileInit).toHaveBeenCalledWith(42));
-    expect(api.lanes.agentsInstall).toHaveBeenCalledWith(42);
     expect(api.lanes.mcpSync).toHaveBeenCalledWith(42);
     await waitFor(() => expect(onAdded).toHaveBeenCalled());
   });
 
   it("still calls onAdded even when every setup call fails", async () => {
-    vi.mocked(api.lanes.branches).mockResolvedValue({ branches: ["main"], current: "main" });
+    vi.mocked(api.lanes.branches).mockResolvedValue({
+      branches: ["main"],
+      current: "main",
+      worktrees: [],
+    });
     vi.mocked(api.lanes.worktree).mockResolvedValue({
       lane: { id: 43, title: "demo2", cwd: "/lanes/demo2", status: "provisioning" } as Lane,
     });
     vi.mocked(api.lanes.profileInit).mockRejectedValue(new Error("boom"));
-    vi.mocked(api.lanes.agentsInstall).mockRejectedValue(new Error("boom"));
     vi.mocked(api.lanes.mcpSync).mockRejectedValue(new Error("boom"));
     const onAdded = vi.fn();
     const onClose = vi.fn();
@@ -261,11 +463,16 @@ describe("AddLaneModal — worktree mode (default)", () => {
     expect(onClose).not.toHaveBeenCalled();
   });
 
-  it("shows the setup summary and lets the user dismiss it manually", async () => {
-    vi.mocked(api.lanes.branches).mockResolvedValue({ branches: ["main"], current: "main" });
+  it("keeps the summary up when a setup step FAILED, and closes on the button that replaces Add lane", async () => {
+    vi.mocked(api.lanes.branches).mockResolvedValue({
+      branches: ["main"],
+      current: "main",
+      worktrees: [],
+    });
     vi.mocked(api.lanes.worktree).mockResolvedValue({
       lane: { id: 44, title: "demo3", cwd: "/lanes/demo3", status: "provisioning" } as Lane,
     });
+    vi.mocked(api.lanes.mcpSync).mockRejectedValue(new Error("no mcp"));
     const onClose = vi.fn();
     renderModal({ onClose });
     const user = userEvent.setup();
@@ -273,17 +480,22 @@ describe("AddLaneModal — worktree mode (default)", () => {
     await fillWorktreeForm(user, { title: "demo3" });
     await user.click(screen.getByRole("button", { name: "Add lane" }));
 
+    // A failure is the one case worth reading before the dialog goes away.
     expect(await screen.findByText("Setup")).toBeInTheDocument();
     expect(onClose).not.toHaveBeenCalled();
-
-    const [dismissButton] = screen.getAllByRole("button", { name: "Cancel" });
-    if (!dismissButton) throw new Error("Cancel button not found");
-    await user.click(dismissButton);
+    // And then the primary button must close, not sit there disabled: the lane
+    // already exists, so "Add lane" has nothing left to do.
+    expect(screen.queryByRole("button", { name: "Add lane" })).toBeNull();
+    await user.click(screen.getByRole("button", { name: "Close" }));
     expect(onClose).toHaveBeenCalled();
   });
 
   it("waits for the background worktree provisioning to finish before running setup, and skips setup if it fails", async () => {
-    vi.mocked(api.lanes.branches).mockResolvedValue({ branches: ["main"], current: "main" });
+    vi.mocked(api.lanes.branches).mockResolvedValue({
+      branches: ["main"],
+      current: "main",
+      worktrees: [],
+    });
     vi.mocked(api.lanes.worktree).mockResolvedValue({
       lane: { id: 45, title: "demo4", cwd: "/lanes/demo4", status: "provisioning" } as Lane,
     });
@@ -303,7 +515,6 @@ describe("AddLaneModal — worktree mode (default)", () => {
     await waitFor(() => expect(onAdded).toHaveBeenCalled());
     expect(await screen.findByText(/auto-setup was skipped/)).toBeInTheDocument();
     expect(api.lanes.profileInit).not.toHaveBeenCalled();
-    expect(api.lanes.agentsInstall).not.toHaveBeenCalled();
     expect(api.lanes.mcpSync).not.toHaveBeenCalled();
   });
 });
@@ -346,8 +557,8 @@ describe("AddLaneModal — repo mode (adopt)", () => {
       expect(api.lanes.ensure).toHaveBeenCalledWith({
         cwd: "/Users/tester/projects/repo",
         title: "main repo",
-        pipeline: "default",
         tool: "claude",
+        exact: true,
       })
     );
     expect(api.lanes.worktree).not.toHaveBeenCalled();
@@ -356,6 +567,28 @@ describe("AddLaneModal — repo mode (adopt)", () => {
     // close right away like the old adopt flow did.
     expect(onClose).toHaveBeenCalled();
   });
+
+  it("says the folder already has a lane instead of closing silently (#42)", async () => {
+    vi.mocked(api.lanes.ensure).mockResolvedValue({
+      lane: laneFixture({ id: 3, kind: "adopted", status: "idle", title: "SG - Services" }),
+      created: false,
+    });
+    const onAdded = vi.fn();
+    const onClose = vi.fn();
+    renderModal({ onAdded, onClose });
+    const user = userEvent.setup();
+
+    await user.click(screen.getByRole("button", { name: "Repo" }));
+    const dirField = screen.getByLabelText("Directory");
+    await focusField(user, dirField);
+    await user.type(dirField, "/Users/tester/projects/repo");
+    await user.click(screen.getByRole("button", { name: "Add lane" }));
+
+    expect(await screen.findByText(/already has a lane.*#3.*SG - Services/)).toBeInTheDocument();
+    // The existing lane is selected so the user sees it, but nothing claims a new one.
+    expect(onAdded).toHaveBeenCalledWith(expect.objectContaining({ id: 3 }));
+    expect(onClose).not.toHaveBeenCalled();
+  });
 });
 
 describe("AddLaneModal — folder browse", () => {
@@ -398,47 +631,145 @@ describe("AddLaneModal — folder browse", () => {
   });
 });
 
-describe("AddLaneModal — pipeline template", () => {
-  it("offers every template the server reports and sends the chosen one when adopting a repo", async () => {
-    // Creation is the ONLY point the UI can set a template, so a lane born on
-    // `default` renders 8 nodes for a 16-node workflow with no way back from
-    // any screen.
+describe("AddLaneModal — create/update readme", () => {
+  it("no longer offers it here — it moved to the lane's Tools menu", async () => {
+    // Creating a lane and writing its docs are separate decisions, and the
+    // second one is worth re-running later; see LaneToolsMenu.
+    renderModal();
+    const user = userEvent.setup();
+    await user.click(screen.getByRole("button", { name: "Repo" }));
+    expect(screen.queryByLabelText("Create/update readme file")).toBeNull();
+  });
+});
+
+describe("AddLaneModal — AI Router", () => {
+  it("applies native without asking, so a lane always has a declared endpoint", async () => {
     vi.mocked(api.lanes.ensure).mockResolvedValue({
-      lane: laneFixture({ status: "idle" }),
+      lane: laneFixture({ status: "idle", cwd: "/Users/tester/projects/repo" }),
       created: true,
     });
     renderModal();
     const user = userEvent.setup();
 
     await user.click(screen.getByRole("button", { name: "Repo" }));
-    const select = await screen.findByLabelText("Pipeline template");
-    await waitFor(() =>
-      expect(screen.getByRole("option", { name: /Ship feature/ })).toBeInTheDocument()
-    );
-    expect(
-      screen.getByRole("option", { name: /Default feature pipeline \(8\)/ })
-    ).toBeInTheDocument();
-
     const repoField = screen.getByLabelText("Directory");
     await focusField(user, repoField);
     await user.type(repoField, "/Users/tester/projects/repo");
-    await user.selectOptions(select, "ship-feature");
     await user.click(screen.getByRole("button", { name: "Add lane" }));
 
-    await waitFor(() =>
-      expect(api.lanes.ensure).toHaveBeenCalledWith(
-        expect.objectContaining({ pipeline: "ship-feature" })
-      )
-    );
+    await waitFor(() => expect(api.lanes.routerApply).toHaveBeenCalledWith(9, "native"));
   });
 
-  it("still renders a usable select, and still creates the lane, when the template list cannot be fetched", async () => {
-    vi.mocked(api.lanes.pipelines).mockRejectedValue(new Error("offline"));
+  it("sends the picked profile once AI Router is chosen", async () => {
+    vi.mocked(api.aiRouters.list).mockResolvedValue({ items: [nativeRouter(), savedRouter()] });
+    vi.mocked(api.lanes.ensure).mockResolvedValue({
+      lane: laneFixture({ status: "idle", cwd: "/Users/tester/projects/repo" }),
+      created: true,
+    });
+    renderModal();
+    const user = userEvent.setup();
+
+    await user.click(screen.getByRole("button", { name: "Repo" }));
+    const repoField = screen.getByLabelText("Directory");
+    await focusField(user, repoField);
+    await user.type(repoField, "/Users/tester/projects/repo");
+    await user.click(await screen.findByRole("radio", { name: "AI Router" }));
+    await user.click(screen.getByRole("button", { name: "Add lane" }));
+
+    await waitFor(() => expect(api.lanes.routerApply).toHaveBeenCalledWith(9, "9router"));
+  });
+
+  it("keeps the radio on Native when no profile is saved, and says why", async () => {
+    // Choosing "AI Router" with nothing to point at would create a lane whose
+    // declared endpoint does not exist.
+    renderModal();
+    const user = userEvent.setup();
+    await user.click(await screen.findByRole("radio", { name: "AI Router" }));
+
+    expect(screen.getByRole("radio", { name: /^Native/ })).toBeChecked();
+    expect(screen.getByText(/No router profile saved yet/)).toBeInTheDocument();
+  });
+
+  it("creates the lane anyway when the profile list cannot be fetched", async () => {
+    vi.mocked(api.aiRouters.list).mockRejectedValue(new Error("offline"));
+    vi.mocked(api.lanes.ensure).mockResolvedValue({
+      lane: laneFixture({ status: "idle", cwd: "/Users/tester/projects/repo" }),
+      created: true,
+    });
+    renderModal();
+    const user = userEvent.setup();
+
+    await user.click(screen.getByRole("button", { name: "Repo" }));
+    const repoField = screen.getByLabelText("Directory");
+    await focusField(user, repoField);
+    await user.type(repoField, "/Users/tester/projects/repo");
+    await user.click(screen.getByRole("button", { name: "Add lane" }));
+
+    await waitFor(() => expect(api.lanes.ensure).toHaveBeenCalled());
+  });
+});
+
+describe("AddLaneModal — a created lane is never lost to a setup failure", () => {
+  it("reports the adopted lane even when applying the router fails", async () => {
+    // `ensure` already created it server-side; skipping onAdded would hide a
+    // real lane from the list until some unrelated refetch found it.
+    vi.mocked(api.lanes.routerApply).mockRejectedValue(new Error("no router profile named 'gone'"));
+    vi.mocked(api.lanes.ensure).mockResolvedValue({
+      lane: laneFixture({ status: "idle", cwd: "/Users/tester/projects/repo" }),
+      created: true,
+    });
+    const onAdded = vi.fn();
+    renderModal({ onAdded });
+    const user = userEvent.setup();
+
+    await user.click(screen.getByRole("button", { name: "Repo" }));
+    const repoField = screen.getByLabelText("Directory");
+    await focusField(user, repoField);
+    await user.type(repoField, "/Users/tester/projects/repo");
+    await user.click(screen.getByRole("button", { name: "Add lane" }));
+
+    await waitFor(() => expect(onAdded).toHaveBeenCalled());
+    // …and the failure is still surfaced, on a modal left open.
+    expect(await screen.findByText(/no router profile named/)).toBeInTheDocument();
+  });
+});
+
+describe("AddLaneModal — a router profile that disappeared", () => {
+  it("falls back to Native when the saved profile is gone by the time the list loads", async () => {
+    // Deleted in another tab while this modal sat open: the select would show
+    // no matching option while state still held the dead name.
+    vi.mocked(api.aiRouters.list).mockResolvedValue({ items: [nativeRouter(), savedRouter()] });
+    vi.mocked(api.lanes.ensure).mockResolvedValue({
+      lane: laneFixture({ status: "idle", cwd: "/Users/tester/projects/repo" }),
+      created: true,
+    });
+    const { rerender } = renderModal();
+    const user = userEvent.setup();
+    await user.click(await screen.findByRole("radio", { name: "AI Router" }));
+    expect(screen.getByRole("radio", { name: "AI Router" })).toBeChecked();
+
+    // Re-open with the profile gone from the server's answer.
+    vi.mocked(api.aiRouters.list).mockResolvedValue({ items: [nativeRouter()] });
+    rerender(<AddLaneModal open={false} onClose={vi.fn()} onAdded={vi.fn()} cwdSuggestions={[]} />);
+    rerender(<AddLaneModal open onClose={vi.fn()} onAdded={vi.fn()} cwdSuggestions={[]} />);
+
+    await waitFor(() => expect(screen.getByRole("radio", { name: /^Native/ })).toBeChecked());
+  });
+
+  it("does not offer AI Router until the profile list has arrived", async () => {
+    // Clicking it early resolved back to Native with no feedback, which reads
+    // as a dead control.
+    let resolveList: (v: { items: ReturnType<typeof nativeRouter>[] }) => void = () => {};
+    vi.mocked(api.aiRouters.list).mockReturnValue(
+      new Promise((resolve) => {
+        resolveList = resolve;
+      }) as never
+    );
     renderModal();
 
-    const select = await screen.findByLabelText("Pipeline template");
-    await waitFor(() => expect(select).toHaveValue("default"));
-    expect(screen.getByRole("option", { name: "default" })).toBeInTheDocument();
+    expect(screen.getByRole("radio", { name: "AI Router" })).toBeDisabled();
+    resolveList({ items: [nativeRouter(), savedRouter()] });
+    await waitFor(() => expect(screen.getByRole("radio", { name: "AI Router" })).toBeEnabled());
   });
 });
 
@@ -457,7 +788,20 @@ describe("AddLaneModal — tool selection", () => {
     const dirField = screen.getByLabelText("Directory");
     await focusField(user, dirField);
     await user.type(dirField, "/tmp/demo");
-    await user.click(screen.getByRole("button", { name: /codex/i }));
+    // One button showing the default; it opens every installed + enabled tool.
+    const picker = await screen.findByRole("button", { name: /Claude Code.*Default/ });
+    expect(picker).toHaveAttribute("aria-expanded", "false");
+    await user.click(picker);
+    const list = screen.getByRole("group", { name: /Which CLI drives this lane/ });
+    expect(
+      within(list)
+        .getAllByRole("button")
+        .map((b) => b.textContent)
+    ).toEqual(["Claude Code", "Codex", "Gemini"]);
+    await user.click(within(list).getByRole("button", { name: "Codex" }));
+    // The picked tool replaces the default on the button, and the list closes.
+    expect(screen.getByRole("button", { name: "Codex", expanded: false })).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Gemini" })).toBeNull();
     await user.click(screen.getByRole("button", { name: /add lane|create/i }));
 
     await waitFor(() =>
@@ -465,6 +809,25 @@ describe("AddLaneModal — tool selection", () => {
     );
   });
 
+  it("offers only Native for a tool that cannot use an AI Router", async () => {
+    renderModal({});
+    const user = userEvent.setup();
+    await user.click(await screen.findByRole("button", { name: /Claude Code.*Default/ }));
+    await user.click(screen.getByRole("button", { name: "Gemini" }));
+    expect(screen.getByRole("radio", { name: "Native (Gemini)" })).toBeChecked();
+    expect(screen.getByRole("radio", { name: "AI Router" })).toBeDisabled();
+  });
+
+  it("says so, with a link to Settings, when no tool is installed and enabled", async () => {
+    vi.mocked(api.aiTools.list).mockResolvedValue({ default: null, tools: [] });
+    renderModal({});
+    expect(await screen.findByText(/No AI tool is installed and enabled/)).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: /AI Tools/ })).toHaveAttribute(
+      "href",
+      "/settings#ai-tools"
+    );
+  });
+
   it("defaults to claude code", async () => {
     vi.mocked(api.lanes.ensure).mockResolvedValue({
       lane: laneFixture({ id: 24, kind: "adopted", status: "idle" }),
@@ -486,3 +849,41 @@ describe("AddLaneModal — tool selection", () => {
     );
   });
 });
+
+describe("AddLaneModal — working straight on main (no worktree)", () => {
+  beforeEach(() => {
+    vi.mocked(api.lanes.branches).mockResolvedValue({
+      branches: ["development", "main"],
+      current: "development",
+      worktrees: [],
+    });
+  });
+
+  it("jumps to Repo mode from the branch choice", async () => {
+    const user = userEvent.setup();
+    renderModal();
+    const repoField = screen.getByLabelText("Source repository");
+    await focusField(user, repoField);
+    await user.type(repoField, "/Users/tester/projects/repo");
+    await screen.findByTestId("add-lane-branch-section");
+
+    await user.click(screen.getByRole("button", { name: "Current branch" }));
+
+    // Repo mode adopts the directory as it stands — no branch section left to
+    // answer, because there is no fork to configure.
+    expect(screen.queryByTestId("add-lane-branch-section")).toBeNull();
+    expect(screen.getByRole("button", { name: "Repo" })).toHaveAttribute("aria-pressed", "true");
+  });
+
+  it("prefills the repo and branch it was opened with", async () => {
+    renderModal({
+      prefill: { sourceRepo: "/Users/tester/projects/repo", branch: "development" },
+    });
+    expect(await screen.findByTestId("add-lane-branch-section")).toBeInTheDocument();
+    expect(screen.getByLabelText("Source repository")).toHaveValue("/Users/tester/projects/repo");
+    expect(screen.getByRole("button", { name: "Existing branch" })).toHaveAttribute(
+      "aria-pressed",
+      "true"
+    );
+  });
+});

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

@@ -135,7 +135,7 @@ describe("DestructiveLaneModal", () => {
         onConfirm={onConfirm}
       />
     );
-    const confirmButton = await screen.findByRole("button", { name: "Remove lane" });
+    const confirmButton = await screen.findByRole("button", { name: "Delete lane record" });
     await waitFor(() => expect(confirmButton).not.toBeDisabled());
     // "adopted" is shown as context, not as a refusal.
     expect(screen.getByText(/Only the dashboard's record of it is dropped/)).toBeInTheDocument();
@@ -167,7 +167,7 @@ describe("DestructiveLaneModal", () => {
         onConfirm={onConfirm}
       />
     );
-    const confirmButton = await screen.findByRole("button", { name: "Remove lane" });
+    const confirmButton = await screen.findByRole("button", { name: "Delete lane record" });
     await waitFor(() => expect(confirmButton).not.toBeDisabled());
     expect(screen.queryByRole("checkbox")).not.toBeInTheDocument();
     fireEvent.click(confirmButton);
@@ -191,7 +191,7 @@ describe("DestructiveLaneModal", () => {
     await waitFor(() => expect(confirmButton).toBeDisabled());
   });
 
-  it("ENABLES remove when the worktree directory is missing — the server takes the prune path", async () => {
+  it("ENABLES remove when the worktree directory is missing — the row goes, git's records stay", async () => {
     preflightMock.mockResolvedValue(
       worktreePreflight({
         action: "remove",
@@ -212,7 +212,7 @@ describe("DestructiveLaneModal", () => {
         onConfirm={onConfirm}
       />
     );
-    const confirmButton = await screen.findByRole("button", { name: "Remove lane" });
+    const confirmButton = await screen.findByRole("button", { name: "Delete lane record" });
     await waitFor(() => expect(confirmButton).not.toBeDisabled());
     expect(screen.getByText(/The lane directory is already gone/)).toBeInTheDocument();
     fireEvent.click(confirmButton);
@@ -238,7 +238,7 @@ describe("DestructiveLaneModal", () => {
     await waitFor(() => expect(confirmButton).toBeDisabled());
   });
 
-  it("ENABLES remove when the worktree directory is unreadable — the server attempts removal and falls back to deregistering it", async () => {
+  it("ENABLES remove when the worktree directory is unreadable — nothing on disk is touched either way", async () => {
     preflightMock.mockResolvedValue(
       worktreePreflight({
         action: "remove",
@@ -259,7 +259,7 @@ describe("DestructiveLaneModal", () => {
         onConfirm={onConfirm}
       />
     );
-    const confirmButton = await screen.findByRole("button", { name: "Remove lane" });
+    const confirmButton = await screen.findByRole("button", { name: "Delete lane record" });
     await waitFor(() => expect(confirmButton).not.toBeDisabled());
     expect(screen.getByText(/cannot be read as a Git worktree/)).toBeInTheDocument();
     fireEvent.click(confirmButton);
@@ -268,23 +268,34 @@ describe("DestructiveLaneModal", () => {
     });
   });
 
-  it("shows the Force checkbox only when the sole blocker is unpushed commits, and ticking it enables confirm", async () => {
+  it("never offers Force for a managed removal with unpushed commits — it deletes the row, not the branch", async () => {
     preflightMock.mockResolvedValue(
-      worktreePreflight({ action: "remove", unpushed: 3, blocked: ["unpushed-commits"] })
+      worktreePreflight({
+        action: "remove",
+        head: "abc0000",
+        dirty: 0,
+        untracked: 0,
+        unpushed: 3,
+        blocked: ["unpushed-commits"],
+      })
     );
+    const onConfirm = vi.fn();
     render(
       <DestructiveLaneModal
         lane={makeLane()}
         action="remove"
         open
         onClose={vi.fn()}
-        onConfirm={vi.fn()}
+        onConfirm={onConfirm}
       />
     );
-    const confirmButton = await screen.findByRole("button", { name: "Remove lane" });
-    await waitFor(() => expect(confirmButton).toBeDisabled());
-    fireEvent.click(screen.getByRole("checkbox"));
-    expect(confirmButton).not.toBeDisabled();
+    const confirmButton = await screen.findByRole("button", { name: "Delete lane record" });
+    await waitFor(() => expect(confirmButton).not.toBeDisabled());
+    expect(screen.queryByRole("checkbox")).not.toBeInTheDocument();
+    fireEvent.click(confirmButton);
+    expect(onConfirm).toHaveBeenCalledWith({
+      expect: { head: "abc0000", dirty: 0, untracked: 0, unpushed: 3 },
+    });
   });
 
   it("a local-only managed lane (no-remote warning, unpushed-commits blocker) is resettable with Force", async () => {
@@ -353,10 +364,10 @@ describe("DestructiveLaneModal", () => {
     });
   });
 
-  it("confirming an unpushed-commits removal with Force ticked sends force:true plus the same expect block", async () => {
+  it("confirming an unpushed-commits RESET with Force ticked sends force:true plus the same expect block", async () => {
     preflightMock.mockResolvedValue(
       worktreePreflight({
-        action: "remove",
+        action: "reset",
         head: "abc0000",
         dirty: 0,
         untracked: 0,
@@ -368,13 +379,13 @@ describe("DestructiveLaneModal", () => {
     render(
       <DestructiveLaneModal
         lane={makeLane()}
-        action="remove"
+        action="reset"
         open
         onClose={vi.fn()}
         onConfirm={onConfirm}
       />
     );
-    const confirmButton = await screen.findByRole("button", { name: "Remove lane" });
+    const confirmButton = await screen.findByRole("button", { name: "Reset worktree" });
     fireEvent.click(screen.getByRole("checkbox"));
     await waitFor(() => expect(confirmButton).not.toBeDisabled());
     fireEvent.click(confirmButton);

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

@@ -9,9 +9,9 @@
  */
 
 import { describe, it, expect, vi, beforeEach } from "vitest";
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen, waitFor, act } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import LaneCard, { LaneToolsMenu } from "../LaneCard";
+import LaneCard, { LaneToolsMenu, LaneRouterRow } from "../LaneCard";
 import type { Lane, LaneRuntime } from "../../../lib/types";
 import { api } from "../../../lib/api";
 
@@ -23,14 +23,20 @@ vi.mock("../../../lib/api", () => ({
       up: vi.fn(),
       down: vi.fn(),
       preflight: vi.fn().mockResolvedValue({ blocked: [], warnings: [] }),
-      integration: vi.fn(),
-      agentsInstall: vi.fn(),
       mcpSync: vi.fn(),
       syncBaseCheck: vi.fn(),
+      routerApply: vi.fn(),
     },
     locks: {
       list: vi.fn(),
     },
+    aiRouters: {
+      list: vi.fn(),
+    },
+    run: {
+      kill: vi.fn(),
+      start: vi.fn(),
+    },
   },
 }));
 
@@ -41,8 +47,10 @@ beforeEach(() => {
   // stack, so the runtime strip and its button stay absent unless a test opts in.
   vi.mocked(api.lanes.runtime).mockReset();
   vi.mocked(api.lanes.runtime).mockResolvedValue({ available: false });
-  vi.mocked(api.lanes.integration).mockReset();
-  vi.mocked(api.lanes.integration).mockResolvedValue({ enabled: false });
+  // Only the built-in profile by default: a user who never opened the AI Router
+  // tab has nothing to switch between, so the row stays out of every other test.
+  vi.mocked(api.aiRouters.list).mockReset();
+  vi.mocked(api.aiRouters.list).mockResolvedValue({ items: [] });
 });
 vi.mocked(api.locks.list).mockReset();
 vi.mocked(api.locks.list).mockResolvedValue({ locks: [] });
@@ -87,13 +95,16 @@ function makeLane(overrides: Partial<Lane> = {}): Lane {
 }
 
 describe("LaneCard lane tool badge", () => {
-  it("badges a codex lane and leaves a claude lane unbadged", () => {
-    const { rerender } = render(
-      <LaneCard {...{ lane: makeLane({ tool: "codex" }), onAction: vi.fn() }} />
-    );
-    expect(screen.getByText("Codex")).toBeInTheDocument();
-    rerender(<LaneCard {...{ lane: makeLane({ tool: "claude" }), onAction: vi.fn() }} />);
-    expect(screen.queryByText("Codex")).not.toBeInTheDocument();
+  // The strip tile already names the CLI; a card holding only that tag was an
+  // empty frame in the lane detail.
+  it("renders nothing for a codex or antigravity lane with nothing else to show", () => {
+    for (const tool of ["codex", "antigravity"] as const) {
+      const { container, unmount } = render(
+        <LaneCard {...{ lane: makeLane({ tool }), onAction: vi.fn() }} />
+      );
+      expect(container.querySelector('[data-testid="lane-card-1"]')).toBeEmptyDOMElement();
+      unmount();
+    }
   });
 });
 
@@ -150,19 +161,17 @@ describe("LaneCard rebuilt layout", () => {
     expect(screen.getByTestId("lane-card-7")).toBeInTheDocument();
   });
 
-  it("shows the progress percentage", () => {
+  // The pipeline map below this card draws the same progress as named nodes,
+  // so the card no longer repeats it as a bar and a percent.
+  it("leaves progress to the pipeline map rather than drawing its own bar", () => {
     render(<LaneCard lane={full()} onAction={vi.fn()} />);
-    expect(screen.getByText("48%")).toBeInTheDocument();
+    expect(screen.queryByTestId("lane-progress-fill")).toBeNull();
+    expect(screen.queryByText("48%")).toBeNull();
   });
 
-  it("gives the progress bar a width matching the lane's progress", () => {
-    render(<LaneCard lane={full()} onAction={vi.fn()} />);
-    expect(screen.getByTestId("lane-progress-fill").getAttribute("style")).toContain("48%");
-  });
-
-  it("surfaces a needs-you message", () => {
+  it("leaves the needs-you message to the strip card", () => {
     render(<LaneCard lane={full({ needs_action: "waiting on approval" })} onAction={vi.fn()} />);
-    expect(screen.getByText(/waiting on approval/)).toBeInTheDocument();
+    expect(screen.queryByText(/waiting on approval/)).toBeNull();
   });
 
   it("keeps reset behind the ⋯ menu rather than showing it directly", async () => {
@@ -197,64 +206,11 @@ describe("LaneCard rebuilt layout", () => {
 });
 
 describe("LaneCard git block", () => {
-  const facts = {
-    available: true as const,
-    branch: "feat/rename-metric",
-    head: "9b3e74a",
-    subject: "free-text rule mode in the form",
-    dirty: 2,
-    untracked: 1,
-  };
-
-  it("renders the live branch, head, subject and uncommitted counts", async () => {
-    vi.mocked(api.lanes.git).mockResolvedValueOnce(facts);
-    render(<LaneCard lane={makeLane({ branch: "stale/recorded" })} onAction={vi.fn()} />);
-
-    const block = await screen.findByTestId("lane-git");
-    expect(block.textContent).toContain("feat/rename-metric");
-    expect(block.textContent).toContain("9b3e74a");
-    expect(block.textContent).toContain("free-text rule mode in the form");
-    expect(block.textContent).toContain("2");
-    // The live branch replaces the lane's recorded one rather than doubling it.
-    expect(screen.queryByText(/stale\/recorded/)).toBeNull();
-  });
-
-  it("omits the uncommitted line when the tree is clean", async () => {
-    vi.mocked(api.lanes.git).mockResolvedValueOnce({ ...facts, dirty: 0, untracked: 0 });
-    render(<LaneCard lane={makeLane()} onAction={vi.fn()} />);
-    const block = await screen.findByTestId("lane-git");
-    expect(block.textContent).not.toContain("modified");
-  });
-
-  it("renders the card with no git block and no error when git is unavailable", async () => {
-    vi.mocked(api.lanes.git).mockResolvedValueOnce({ available: false });
-    render(<LaneCard lane={makeLane({ id: 2 })} onAction={vi.fn()} />);
-
-    expect(await screen.findByTestId("lane-card-2")).toBeInTheDocument();
+  it("carries no working-copy row — that heads the Changes panel now", async () => {
+    render(<LaneCard lane={makeLane({ id: 4 })} onAction={vi.fn()} />);
+    expect(await screen.findByTestId("lane-card-4")).toBeInTheDocument();
     expect(screen.queryByTestId("lane-git")).toBeNull();
-  });
-
-  it("swallows a rejected request instead of surfacing an error", async () => {
-    vi.mocked(api.lanes.git).mockRejectedValueOnce(new Error("network down"));
-    render(<LaneCard lane={makeLane({ id: 3 })} onAction={vi.fn()} />);
-
-    expect(await screen.findByTestId("lane-card-3")).toBeInTheDocument();
-    expect(screen.queryByTestId("lane-git")).toBeNull();
-    expect(screen.queryByText(/network down/)).toBeNull();
-  });
-
-  it("stops polling once the card unmounts", async () => {
-    vi.useFakeTimers();
-    try {
-      vi.mocked(api.lanes.git).mockResolvedValue({ available: false });
-      const { unmount } = render(<LaneCard lane={makeLane()} onAction={vi.fn()} />);
-      expect(api.lanes.git).toHaveBeenCalledTimes(1);
-      unmount();
-      vi.advanceTimersByTime(120_000);
-      expect(api.lanes.git).toHaveBeenCalledTimes(1);
-    } finally {
-      vi.useRealTimers();
-    }
+    expect(api.lanes.git).not.toHaveBeenCalled();
   });
 });
 
@@ -340,40 +296,6 @@ describe("LaneCard — named locks", () => {
   });
 });
 
-describe("LaneCard — integration badges", () => {
-  beforeEach(() => {
-    // Only the fields this describe block's assertions read; `as LaneRuntime`
-    // keeps the double from having to restate a shape the component never
-    // touches here.
-    vi.mocked(api.lanes.runtime).mockResolvedValue({
-      available: true as const,
-      provisioned: true as const,
-      up: false,
-      slot: 1,
-      profileDir: "/work/demo/.agenthub/profile",
-      ports: {},
-    } as unknown as LaneRuntime);
-    vi.mocked(api.lanes.integration).mockImplementation((_id, name) =>
-      Promise.resolve({ enabled: name === "tracker" })
-    );
-  });
-
-  it("shows integration badges reflecting each toggle's state", async () => {
-    render(<LaneCard lane={makeLane()} onAction={vi.fn()} />);
-    const tracker = await screen.findByTestId("lane-integration-tracker");
-    const devQc = await screen.findByTestId("lane-integration-dev_qc");
-    expect(tracker.className).toContain("status-success");
-    expect(devQc.className).not.toContain("status-success");
-  });
-
-  it("hides integration badges when the lane has no profile", async () => {
-    vi.mocked(api.lanes.runtime).mockResolvedValue({ available: false });
-    render(<LaneCard lane={makeLane()} onAction={vi.fn()} />);
-    await waitFor(() => expect(api.lanes.runtime).toHaveBeenCalled());
-    expect(screen.queryByTestId("lane-integration-tracker")).toBeNull();
-  });
-});
-
 describe("LaneToolsMenu", () => {
   beforeEach(() => {
     vi.mocked(api.lanes.runtime).mockResolvedValue({
@@ -386,17 +308,6 @@ describe("LaneToolsMenu", () => {
     } as unknown as LaneRuntime);
   });
 
-  it("clicking Install agents calls the API and shows the result", async () => {
-    vi.mocked(api.lanes.agentsInstall).mockResolvedValue({
-      installed: ["qc-local.md", "senior-gate-reviewer.md"],
-    });
-    render(<LaneToolsMenu lane={makeLane()} />);
-    await userEvent.click(await screen.findByTestId("lane-tools-menu"));
-    await userEvent.click(await screen.findByTestId("lane-agents-install"));
-    await waitFor(() => expect(api.lanes.agentsInstall).toHaveBeenCalledWith(1));
-    expect(await screen.findByTestId("lane-action-result")).toHaveTextContent("qc-local.md");
-  });
-
   it("clicking Sync MCP calls the API and shows the result", async () => {
     vi.mocked(api.lanes.mcpSync).mockResolvedValue({
       servers: ["playwright"],
@@ -433,6 +344,29 @@ describe("LaneToolsMenu", () => {
     expect(await screen.findByTestId("lane-action-result")).toHaveTextContent("003_a.sql");
   });
 
+  it("clicking Create/update readme opens the lane's terminal on the docs skill", async () => {
+    // Moved here from the Add-lane modal: a skill only runs inside a CLI
+    // session, and writing the docs is worth re-running long after creation.
+    vi.mocked(api.run.start).mockResolvedValue({} as never);
+    render(<LaneToolsMenu lane={makeLane({ cwd: "/work/demo" })} />);
+    await userEvent.click(await screen.findByTestId("lane-tools-menu"));
+    await userEvent.click(await screen.findByTestId("lane-write-docs"));
+    await waitFor(() =>
+      expect(api.run.start).toHaveBeenCalledWith({
+        laneId: 1,
+        cwd: "/work/demo",
+        initialPrompt: "/sg-all:sg-md-writing",
+      })
+    );
+  });
+
+  it("hides Create/update readme on a codex lane, which has no slash commands", async () => {
+    render(<LaneToolsMenu lane={makeLane({ tool: "codex" })} />);
+    await userEvent.click(await screen.findByTestId("lane-tools-menu"));
+    expect(await screen.findByTestId("lane-mcp-sync")).toBeInTheDocument();
+    expect(screen.queryByTestId("lane-write-docs")).not.toBeInTheDocument();
+  });
+
   it("renders nothing when the lane has no profile", async () => {
     vi.mocked(api.lanes.runtime).mockResolvedValue({ available: false });
     const { container } = render(<LaneToolsMenu lane={makeLane()} />);
@@ -440,3 +374,168 @@ describe("LaneToolsMenu", () => {
     expect(container).toBeEmptyDOMElement();
   });
 });
+
+describe("LaneRouterRow — the Model picker", () => {
+  const native = {
+    name: "native",
+    label: "Native",
+    builtin: true,
+    baseUrl: "",
+    hasKey: false,
+    model: "claude-sonnet-5",
+    models: {
+      opus: "claude-opus-5",
+      sonnet: "claude-sonnet-5",
+      haiku: "claude-haiku-4-5-20251001",
+      smallFast: "claude-haiku-4-5-20251001",
+      subagent: "claude-haiku-4-5-20251001",
+    },
+  };
+  const nineRouter = { ...native, name: "9router", label: "9Router", builtin: false };
+
+  it("stays out of the card when native is the only profile", async () => {
+    vi.mocked(api.aiRouters.list).mockResolvedValue({ items: [native] });
+    render(<LaneRouterRow lane={makeLane()} />);
+    await waitFor(() => expect(api.aiRouters.list).toHaveBeenCalled());
+    expect(screen.queryByTestId("lane-router-1")).toBeNull();
+  });
+
+  it("shows the lane's current profile selected", async () => {
+    vi.mocked(api.aiRouters.list).mockResolvedValue({ items: [native, nineRouter] });
+    render(<LaneRouterRow lane={makeLane({ router_profile: "9router" })} />);
+    expect(await screen.findByDisplayValue("9Router")).toBeInTheDocument();
+  });
+
+  it("offers only native to a tool that cannot use an AI Router", async () => {
+    vi.mocked(api.aiRouters.list).mockResolvedValue({ items: [native, nineRouter] });
+    render(<LaneRouterRow lane={makeLane({ tool: "gemini" })} />);
+    const select = await screen.findByDisplayValue("Native (gemini)");
+    const router = Array.from((select as HTMLSelectElement).options).find(
+      (o) => o.value === "9router"
+    );
+    expect(router?.disabled).toBe(true);
+  });
+
+  it("applies a switch through the router route, not a lane PATCH", async () => {
+    vi.mocked(api.aiRouters.list).mockResolvedValue({ items: [native, nineRouter] });
+    vi.mocked(api.lanes.routerApply).mockResolvedValue({
+      tool: "claude",
+      file: "/work/demo/.claude/settings.local.json",
+      profile: "9router",
+      restart_required: false,
+      run_id: null,
+    });
+    render(<LaneRouterRow lane={makeLane()} />);
+
+    await userEvent.selectOptions(await screen.findByDisplayValue("Native (Claude)"), ["9router"]);
+    await waitFor(() => expect(api.lanes.routerApply).toHaveBeenCalledWith(1, "9router"));
+    expect(await screen.findByDisplayValue("9Router")).toBeInTheDocument();
+  });
+
+  it("offers a restart when a live pane still holds the old router's models", async () => {
+    // Claude Code re-applies `env` to a running session but keeps the model it
+    // resolved at startup, so the switch is only half-applied until the pane is
+    // restarted — the server says so and the row must act on it.
+    vi.mocked(api.aiRouters.list).mockResolvedValue({ items: [native, nineRouter] });
+    vi.mocked(api.lanes.routerApply).mockResolvedValue({
+      tool: "claude",
+      file: "/work/demo/.claude/settings.local.json",
+      profile: "9router",
+      restart_required: true,
+      run_id: "agenthub-lane-1",
+    });
+    vi.mocked(api.run.kill).mockResolvedValue({ ok: true });
+    vi.mocked(api.run.start).mockResolvedValue({} as never);
+    render(<LaneRouterRow lane={makeLane()} />);
+
+    await userEvent.selectOptions(await screen.findByDisplayValue("Native (Claude)"), ["9router"]);
+
+    const restart = await screen.findByRole("button", { name: "Restart" });
+    await userEvent.click(restart);
+
+    await waitFor(() => expect(api.run.kill).toHaveBeenCalledWith("agenthub-lane-1"));
+    // Started by lane id alone: replaying the old run's --model would name a
+    // model of the router the user just left.
+    expect(api.run.start).toHaveBeenCalledWith({ laneId: 1 });
+  });
+
+  it("leaves the restart button out when no pane is running", async () => {
+    vi.mocked(api.aiRouters.list).mockResolvedValue({ items: [native, nineRouter] });
+    vi.mocked(api.lanes.routerApply).mockResolvedValue({
+      tool: "claude",
+      file: "/work/demo/.claude/settings.local.json",
+      profile: "9router",
+      restart_required: false,
+      run_id: null,
+    });
+    render(<LaneRouterRow lane={makeLane()} />);
+
+    await userEvent.selectOptions(await screen.findByDisplayValue("Native (Claude)"), ["9router"]);
+    await waitFor(() => expect(api.lanes.routerApply).toHaveBeenCalled());
+    expect(screen.queryByRole("button", { name: "Restart" })).toBeNull();
+  });
+
+  it("does not carry a pick made on one lane back to the lane selected before it", async () => {
+    // One LaneRouterRow instance serves every lane (it lives in the Workspace's
+    // lane-detail header), so its selected value is component state that
+    // outlives a lane switch unless the sync effect puts the new lane's own
+    // profile back.
+    vi.mocked(api.aiRouters.list).mockResolvedValue({ items: [native, nineRouter] });
+    vi.mocked(api.lanes.routerApply).mockResolvedValue({
+      tool: "claude",
+      file: "/work/b/.claude/settings.local.json",
+      profile: "9router",
+      restart_required: false,
+      run_id: null,
+    });
+    const laneA = makeLane({ id: 1, router_profile: null });
+    const laneB = makeLane({ id: 2, router_profile: null });
+    const { rerender } = render(<LaneRouterRow lane={laneA} />);
+    await screen.findByDisplayValue("Native (Claude)");
+
+    rerender(<LaneRouterRow lane={laneB} />);
+    await userEvent.selectOptions(screen.getByDisplayValue("Native (Claude)"), ["9router"]);
+    await waitFor(() => expect(api.lanes.routerApply).toHaveBeenCalledWith(2, "9router"));
+
+    rerender(<LaneRouterRow lane={laneA} />);
+    expect(screen.getByDisplayValue("Native (Claude)")).toBeInTheDocument();
+  });
+
+  it("does not roll a failed apply back onto a DIFFERENT lane the user has since switched to", async () => {
+    // The row is one instance shared by every lane, so an apply still in flight
+    // when the user moves on would paint its rollback and its error on whoever
+    // is on screen by then — lane B's failure changing lane A's picker.
+    vi.mocked(api.aiRouters.list).mockResolvedValue({ items: [native, nineRouter] });
+    let reject: (e: Error) => void = () => {};
+    vi.mocked(api.lanes.routerApply).mockImplementation(
+      () => new Promise((_, r) => (reject = r)) as ReturnType<typeof api.lanes.routerApply>
+    );
+    const laneA = makeLane({ id: 1, router_profile: null });
+    const laneB = makeLane({ id: 2, router_profile: null });
+
+    const { rerender } = render(<LaneRouterRow lane={laneB} />);
+    await userEvent.selectOptions(await screen.findByDisplayValue("Native (Claude)"), ["9router"]);
+    await waitFor(() => expect(api.lanes.routerApply).toHaveBeenCalledWith(2, "9router"));
+
+    rerender(<LaneRouterRow lane={laneA} />);
+    await act(async () => {
+      reject(new Error("EBADJSON"));
+      await Promise.resolve();
+    });
+
+    expect(screen.getByDisplayValue("Native (Claude)")).toBeInTheDocument();
+    expect(screen.queryByTitle("EBADJSON")).toBeNull();
+    // And the picker must not be left locked by a request for another lane.
+    expect(screen.getByRole("combobox")).not.toBeDisabled();
+  });
+
+  it("puts the selection back when the apply fails", async () => {
+    vi.mocked(api.aiRouters.list).mockResolvedValue({ items: [native, nineRouter] });
+    vi.mocked(api.lanes.routerApply).mockRejectedValue(new Error("EBADJSON"));
+    render(<LaneRouterRow lane={makeLane()} />);
+
+    await userEvent.selectOptions(await screen.findByDisplayValue("Native (Claude)"), ["9router"]);
+    await waitFor(() => expect(screen.getByTitle("EBADJSON")).toBeInTheDocument());
+    expect(screen.getByDisplayValue("Native (Claude)")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,130 @@
+/**
+ * @file Tests for the merge-conflict view: both sides of each block shown
+ * under their own labels, one choice per block with undo, Save only once
+ * every block is chosen — and Save writes the chosen text over the version
+ * opened, then marks the file resolved. Whole-file ours/theirs reuse
+ * `resolve`.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { LaneConflictView } from "../LaneConflictView";
+import { api } from "../../../lib/api";
+
+vi.mock("../../../lib/api", () => ({
+  api: { lanes: { gitFile: vi.fn(), gitSaveFile: vi.fn(), gitAction: vi.fn() } },
+}));
+
+const LINES = [
+  "top",
+  "<<<<<<< HEAD",
+  "mine",
+  "=======",
+  "theirs",
+  ">>>>>>> origin/main",
+  "middle",
+  "<<<<<<< HEAD",
+  "a",
+  "=======",
+  "b",
+  ">>>>>>> origin/main",
+];
+
+beforeEach(() => {
+  vi.mocked(api.lanes.gitFile)
+    .mockReset()
+    .mockResolvedValue({
+      available: true,
+      path: "a.txt",
+      rev: "work",
+      lines: LINES,
+      truncated: false,
+      binary: false,
+      sha: "s1",
+    } as never);
+  vi.mocked(api.lanes.gitSaveFile)
+    .mockReset()
+    .mockResolvedValue({ available: true } as never);
+  vi.mocked(api.lanes.gitAction)
+    .mockReset()
+    .mockResolvedValue({ action: "resolve", ok: true, output: "" });
+});
+
+const blocks = () => screen.getAllByTestId("conflict-block");
+
+describe("LaneConflictView", () => {
+  it("shows both sides under their labels and saves once every block is chosen", async () => {
+    const user = userEvent.setup();
+    const onResolved = vi.fn();
+    render(<LaneConflictView laneId={3} path="a.txt" onResolved={onResolved} onEdit={vi.fn()} />);
+
+    const [first, second] = (await screen.findAllByTestId("conflict-block")) as [
+      HTMLElement,
+      HTMLElement,
+    ];
+    expect(first).toHaveTextContent("Mine (HEAD)");
+    expect(first).toHaveTextContent("Theirs (origin/main)");
+    const save = screen.getByRole("button", { name: "Save and mark resolved" });
+    expect(save).toBeDisabled();
+
+    await user.click(within(first).getByRole("button", { name: "Keep mine" }));
+    // Chosen: the block is plain text now, with an undo.
+    await user.click(within(blocks()[0]!).getByRole("button", { name: "Undo" }));
+    await user.click(within(blocks()[0]!).getByRole("button", { name: "Take theirs" }));
+    await user.click(within(second).getByRole("button", { name: "Keep both" }));
+    expect(save).toBeEnabled();
+    await user.click(save);
+
+    await waitFor(() =>
+      expect(api.lanes.gitSaveFile).toHaveBeenCalledWith(
+        3,
+        "a.txt",
+        "top\ntheirs\nmiddle\na\nb",
+        "s1"
+      )
+    );
+    await waitFor(() =>
+      expect(api.lanes.gitAction).toHaveBeenCalledWith(3, "resolve", {
+        path: "a.txt",
+        side: "done",
+      })
+    );
+    expect(onResolved).toHaveBeenCalled();
+  });
+
+  it("takes a whole side for the file through resolve", async () => {
+    const user = userEvent.setup();
+    const onResolved = vi.fn();
+    render(<LaneConflictView laneId={3} path="a.txt" onResolved={onResolved} onEdit={vi.fn()} />);
+    await screen.findAllByTestId("conflict-block");
+    await user.click(screen.getByRole("button", { name: "Take all theirs" }));
+    await waitFor(() =>
+      expect(api.lanes.gitAction).toHaveBeenCalledWith(3, "resolve", {
+        path: "a.txt",
+        side: "theirs",
+      })
+    );
+    expect(onResolved).toHaveBeenCalled();
+    expect(api.lanes.gitSaveFile).not.toHaveBeenCalled();
+  });
+
+  it("offers the plain editor when the markers do not balance", async () => {
+    vi.mocked(api.lanes.gitFile).mockResolvedValue({
+      available: true,
+      path: "a.txt",
+      rev: "work",
+      lines: ["<<<<<<< HEAD", "x"],
+      truncated: false,
+      binary: false,
+      sha: "s1",
+    } as never);
+    const user = userEvent.setup();
+    const onEdit = vi.fn();
+    render(<LaneConflictView laneId={3} path="a.txt" onResolved={vi.fn()} onEdit={onEdit} />);
+    await screen.findByText(/markers do not line up/);
+    await user.click(screen.getByRole("button", { name: "Edit by hand" }));
+    expect(onEdit).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,504 @@
+/**
+ * @file LaneDiffView.test.tsx
+ * @description Pins the side-by-side renderer: two independently scrolling
+ * columns (a long line must be reachable, not painted over its neighbour)
+ * whose horizontal scroll is mirrored, so the two halves of a line stay
+ * opposite each other. Also pins the clamped mirroring (a narrow column may
+ * not drag the wide one back) and the row windowing of large diffs.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import {
+  LaneDiffView,
+  LaneFileView,
+  ROW_PX,
+  WINDOW_THRESHOLD,
+  analyseHunk,
+  visibleRange,
+} from "../LaneDiffView";
+import type { LaneChangeFile } from "../../../lib/types";
+
+const FILE: LaneChangeFile = {
+  path: "server/lib/git-ops.js",
+  status: " M",
+  untracked: false,
+  added: 1,
+  deleted: 1,
+  binary: false,
+  hunks: [
+    {
+      header: "@@ -1,2 +1,2 @@",
+      context: "",
+      oldStart: 1,
+      newStart: 1,
+      lines: [
+        { type: "del", oldLine: 1, newLine: null, text: `const x = "${"a".repeat(400)}";` },
+        { type: "add", oldLine: null, newLine: 1, text: `const x = "${"b".repeat(400)}";` },
+      ],
+    },
+  ],
+};
+
+/** jsdom has no layout: give a scroller the extents a browser would. */
+function layout(
+  el: HTMLElement,
+  g: { scrollWidth?: number; clientWidth?: number; scrollHeight?: number; clientHeight?: number }
+) {
+  for (const [k, v] of Object.entries(g))
+    Object.defineProperty(el, k, { value: v, configurable: true });
+}
+
+const ROOMY = { scrollWidth: 2000, clientWidth: 200, scrollHeight: 2000, clientHeight: 200 };
+
+describe("LaneDiffView — side by side", () => {
+  it("gives each column its own scroller", () => {
+    render(<LaneDiffView file={FILE} layout="split" />);
+    expect(screen.getByTestId("lane-diff-split-left").className).toContain("overflow-auto");
+    expect(screen.getByTestId("lane-diff-split-right").className).toContain("overflow-auto");
+  });
+
+  it("caps a review diff only when it windows; the single-file view fills its parent", () => {
+    // Unwindowed, a review-list diff grows so the PANEL is the one vertical
+    // scroller (nested 60vh boxes made hunk navigation land nowhere); a
+    // windowed one keeps the cap because windowing needs its own scroller.
+    const { rerender } = render(<LaneDiffView file={FILE} layout="unified" />);
+    expect(screen.getByTestId("lane-diff-view").className).not.toContain("max-h-[60vh]");
+
+    const big: LaneChangeFile = {
+      ...FILE,
+      hunks: [
+        {
+          ...FILE.hunks![0]!,
+          lines: Array.from({ length: WINDOW_THRESHOLD + 1 }, (_, i) => ({
+            type: "ctx" as const,
+            oldLine: i + 1,
+            newLine: i + 1,
+            text: `line ${i}`,
+          })),
+        },
+      ],
+    };
+    rerender(<LaneDiffView file={big} layout="unified" />);
+    expect(screen.getByTestId("lane-diff-view").className).toContain("max-h-[60vh]");
+
+    rerender(<LaneDiffView file={FILE} layout="unified" fill />);
+    expect(screen.getByTestId("lane-diff-view").className).toContain("flex-1");
+    expect(screen.getByTestId("lane-diff-view").className).not.toContain("max-h-[60vh]");
+  });
+
+  it("mirrors one column's horizontal scroll onto the other", () => {
+    render(<LaneDiffView file={FILE} layout="split" />);
+    const left = screen.getByTestId("lane-diff-split-left");
+    const right = screen.getByTestId("lane-diff-split-right");
+    layout(left, ROOMY);
+    layout(right, ROOMY);
+
+    left.scrollLeft = 320;
+    fireEvent.scroll(left);
+    expect(right.scrollLeft).toBe(320);
+
+    right.scrollLeft = 0;
+    fireEvent.scroll(right);
+    expect(left.scrollLeft).toBe(0);
+  });
+
+  it("keeps the split columns on the same row vertically too", () => {
+    render(<LaneDiffView file={FILE} layout="split" />);
+    const left = screen.getByTestId("lane-diff-split-left");
+    const right = screen.getByTestId("lane-diff-split-right");
+    layout(left, ROOMY);
+    layout(right, ROOMY);
+
+    left.scrollTop = 480;
+    fireEvent.scroll(left);
+    expect(right.scrollTop).toBe(480);
+
+    right.scrollTop = 40;
+    fireEvent.scroll(right);
+    expect(left.scrollTop).toBe(40);
+  });
+
+  it("clamps the mirrored offset to the other column's own extent", () => {
+    render(<LaneDiffView file={FILE} layout="split" />);
+    const left = screen.getByTestId("lane-diff-split-left");
+    const right = screen.getByTestId("lane-diff-split-right");
+    layout(left, { scrollWidth: 500, clientWidth: 200, scrollHeight: 300, clientHeight: 200 });
+    layout(right, { scrollWidth: 1000, clientWidth: 200, scrollHeight: 300, clientHeight: 200 });
+
+    right.scrollLeft = 600;
+    right.scrollTop = 250;
+    fireEvent.scroll(right);
+    expect(left.scrollLeft).toBe(300);
+    expect(left.scrollTop).toBe(100);
+  });
+
+  it("does not let the narrow column's clamped echo drag the wide one back", () => {
+    render(<LaneDiffView file={FILE} layout="split" />);
+    const left = screen.getByTestId("lane-diff-split-left");
+    const right = screen.getByTestId("lane-diff-split-right");
+    layout(left, { scrollWidth: 500, clientWidth: 200 });
+    layout(right, { scrollWidth: 1000, clientWidth: 200 });
+
+    right.scrollLeft = 600;
+    fireEvent.scroll(right);
+    // A browser fires the narrow column's scroll for the clamped write.
+    fireEvent.scroll(left);
+    expect(right.scrollLeft).toBe(600);
+
+    // A real move of the narrow column still carries the wide one.
+    left.scrollLeft = 100;
+    fireEvent.scroll(left);
+    expect(right.scrollLeft).toBe(100);
+  });
+
+  it("keeps the unified layout on one scroller", () => {
+    render(<LaneDiffView file={FILE} layout="unified" />);
+    expect(screen.queryByTestId("lane-diff-split-left")).toBeNull();
+    expect(screen.getByTestId("lane-diff-view").className).toContain("overflow-auto");
+  });
+});
+
+function fileWith(lines: NonNullable<LaneChangeFile["hunks"]>[number]["lines"]): LaneChangeFile {
+  return { ...FILE, hunks: [{ ...FILE.hunks![0]!, lines }] };
+}
+
+const ROWS = fileWith([
+  { type: "ctx", oldLine: 1, newLine: 1, text: "keep()" },
+  { type: "del", oldLine: 2, newLine: null, text: "const x = 1;" },
+  { type: "add", oldLine: null, newLine: 2, text: "const x = 2;" },
+]);
+
+/** The unified row whose text contains `needle`. */
+function rowOf(container: HTMLElement, needle: string): HTMLElement {
+  const row = [...container.querySelectorAll<HTMLElement>("div.flex.w-max")].find((r) =>
+    r.textContent?.includes(needle)
+  );
+  if (!row) throw new Error(`no row for ${needle}`);
+  return row;
+}
+
+describe("LaneDiffView — row styling", () => {
+  it("tints add/del rows with their status fill and left bar; context stays plain", () => {
+    const { container } = render(<LaneDiffView file={ROWS} layout="unified" />);
+    const add = rowOf(container, "x = 2");
+    const del = rowOf(container, "x = 1");
+    const ctx = rowOf(container, "keep()");
+    expect(add.className).toContain("bg-status-success/20");
+    expect(add.className).toContain("--status-success");
+    expect(del.className).toContain("bg-status-danger/20");
+    expect(del.className).toContain("--status-danger");
+    expect(ctx.className).not.toMatch(/status-(success|danger)/);
+  });
+
+  it("colours the +/- marker bold in its status colour, context marker muted", () => {
+    const { container } = render(<LaneDiffView file={ROWS} layout="unified" />);
+    const marker = (row: HTMLElement) =>
+      row.querySelector<HTMLElement>("span.select-none:not(.w-10)")!;
+    const plus = marker(rowOf(container, "x = 2"));
+    const minus = marker(rowOf(container, "x = 1"));
+    const ctx = marker(rowOf(container, "keep()"));
+    expect(plus.textContent).toBe("+");
+    expect(plus.className).toContain("font-bold");
+    expect(plus.className).toContain("text-status-success");
+    expect(minus.textContent).toBe("-");
+    expect(minus.className).toContain("text-status-danger");
+    expect(ctx.className).toContain("text-fg-muted");
+    expect(ctx.className).not.toContain("font-bold");
+  });
+
+  it("emphasises only the changed span of a paired del/add", () => {
+    const { container } = render(<LaneDiffView file={ROWS} layout="unified" />);
+    const emph = [...container.querySelectorAll<HTMLElement>("span.bg-fg-primary\\/15")].map(
+      (e) => e.textContent
+    );
+    expect(emph).toEqual(["1", "2"]);
+  });
+
+  it("does not emphasise a line that changed completely", () => {
+    const { container } = render(
+      <LaneDiffView
+        file={fileWith([
+          { type: "del", oldLine: 1, newLine: null, text: "abc" },
+          { type: "add", oldLine: null, newLine: 1, text: "xyz" },
+        ])}
+        layout="unified"
+      />
+    );
+    expect(container.querySelector("span.bg-fg-primary\\/15")).toBeNull();
+  });
+
+  it("split view tints each side, and a filler row opposite an unpaired add stays plain", () => {
+    render(
+      <LaneDiffView
+        file={fileWith([{ type: "add", oldLine: null, newLine: 1, text: "added()" }])}
+        layout="split"
+      />
+    );
+    const rows = (id: string) => [
+      ...screen.getByTestId(id).querySelectorAll<HTMLElement>("div.flex.w-max"),
+    ];
+    const [right] = rows("lane-diff-split-right");
+    const [left] = rows("lane-diff-split-left");
+    expect(right!.className).toContain("bg-status-success/20");
+    expect(left!.className).not.toMatch(/status-(success|danger)/);
+  });
+});
+
+describe("analyseHunk", () => {
+  const hunk = {
+    header: "@@ -1,4 +1,4 @@",
+    context: "",
+    oldStart: 1,
+    newStart: 1,
+    lines: [
+      { type: "ctx" as const, oldLine: 1, newLine: 1, text: "keep" },
+      { type: "del" as const, oldLine: 2, newLine: null, text: "foo = 1" },
+      { type: "add" as const, oldLine: null, newLine: 2, text: "foo = 2" },
+      { type: "del" as const, oldLine: 3, newLine: null, text: "bar = 1" },
+      { type: "add" as const, oldLine: null, newLine: 3, text: "bar = 2" },
+    ],
+  };
+
+  it("pairs each del/add with its emphasis, keyed by line index", () => {
+    const a = analyseHunk(hunk);
+    expect(a.rows).toHaveLength(3);
+    expect(a.emph.get(1)).toEqual([6, 7]);
+    expect(a.emph.get(2)).toEqual([6, 7]);
+    expect(a.emph.get(3)).toEqual([6, 7]);
+    expect(a.emph.get(4)).toEqual([6, 7]);
+    expect(a.emph.has(0)).toBe(false);
+  });
+
+  it("computes once per hunk, so both split columns and re-renders share it", () => {
+    expect(analyseHunk(hunk)).toBe(analyseHunk(hunk));
+  });
+});
+
+describe("visibleRange", () => {
+  it("covers the viewport plus overscan on both sides", () => {
+    expect(visibleRange(0, 160, 16, 1000, 5)).toEqual({ start: 0, end: 15 });
+    expect(visibleRange(1600, 160, 16, 1000, 5)).toEqual({ start: 95, end: 115 });
+  });
+
+  it("clamps a scrollTop past the content to the last full viewport", () => {
+    expect(visibleRange(99999, 160, 16, 1000, 5)).toEqual({ start: 985, end: 1000 });
+    expect(visibleRange(-50, 160, 16, 1000, 5)).toEqual({ start: 0, end: 15 });
+  });
+
+  it("never runs past a short list", () => {
+    expect(visibleRange(0, 800, 16, 3, 5)).toEqual({ start: 0, end: 3 });
+    expect(visibleRange(0, 800, 16, 0, 5)).toEqual({ start: 0, end: 0 });
+  });
+});
+
+function bigFile(n: number): LaneChangeFile {
+  const lines = Array.from({ length: n }, (_, i) =>
+    i % 2
+      ? { type: "add" as const, oldLine: null, newLine: i + 1, text: `line ${i};` }
+      : { type: "ctx" as const, oldLine: i + 1, newLine: i + 1, text: `line ${i};` }
+  );
+  lines[7] = { type: "ctx", oldLine: 8, newLine: 8, text: `line 7; ${"w".repeat(300)}` };
+  return fileWith(lines);
+}
+
+const rowsIn = (el: HTMLElement) => [...el.querySelectorAll<HTMLElement>("div.flex.w-max")];
+
+describe("LaneDiffView — windowing", () => {
+  it("renders every row below the threshold, with no spacers", () => {
+    const { container } = render(
+      <LaneDiffView file={bigFile(WINDOW_THRESHOLD - 10)} layout="unified" />
+    );
+    expect(rowsIn(container)).toHaveLength(WINDOW_THRESHOLD - 10);
+    expect(container.querySelector("[data-diff-spacer]")).toBeNull();
+  });
+
+  it("renders far fewer rows than a 5000-line diff holds, keeping the full scroll height", () => {
+    const { container } = render(<LaneDiffView file={bigFile(5000)} layout="unified" />);
+    const rows = rowsIn(container);
+    expect(rows.length).toBeGreaterThan(0);
+    expect(rows.length).toBeLessThan(300);
+    const spacers = [...container.querySelectorAll<HTMLElement>("[data-diff-spacer]")];
+    const spaced = spacers.reduce((sum, s) => sum + parseFloat(s.style.height), 0);
+    // header + 5000 lines, every item one fixed row tall
+    const rendered = container.querySelectorAll("[data-diff-item]").length;
+    expect(spaced + rendered * ROW_PX).toBe(5001 * ROW_PX);
+  });
+
+  it("moves the window with the scroll", () => {
+    const { container } = render(<LaneDiffView file={bigFile(5000)} layout="unified" />);
+    const view = screen.getByTestId("lane-diff-view");
+    expect(container.textContent).not.toContain("line 3000;");
+    view.scrollTop = 3000 * ROW_PX;
+    fireEvent.scroll(view);
+    expect(container.textContent).toContain("line 3000;");
+    expect(container.textContent).not.toContain("line 10;");
+  });
+
+  it("starts windowing where the reader is when a diff grows past the threshold", () => {
+    const { container, rerender } = render(<LaneDiffView file={bigFile(400)} layout="unified" />);
+    const view = screen.getByTestId("lane-diff-view");
+    view.scrollTop = 350 * ROW_PX;
+    fireEvent.scroll(view);
+    // Expanding context replaces the file in place, same mounted view.
+    rerender(<LaneDiffView file={bigFile(600)} layout="unified" />);
+    expect(container.textContent).toContain("line 350;");
+  });
+
+  it("starts from the top again after a round trip through split", () => {
+    const { container, rerender } = render(<LaneDiffView file={bigFile(5000)} layout="unified" />);
+    const view = screen.getByTestId("lane-diff-view");
+    view.scrollTop = 3000 * ROW_PX;
+    fireEvent.scroll(view);
+    rerender(<LaneDiffView file={bigFile(5000)} layout="split" />);
+    // In split the outer box is no scroller; the browser drops its offset.
+    screen.getByTestId("lane-diff-view").scrollTop = 0;
+    rerender(<LaneDiffView file={bigFile(5000)} layout="unified" />);
+    expect(container.textContent).toContain("line 5;");
+  });
+
+  it("holds the horizontal extent at the longest line, rendered or not", () => {
+    const { container } = render(<LaneDiffView file={bigFile(5000)} layout="unified" />);
+    const view = screen.getByTestId("lane-diff-view");
+    view.scrollTop = 3000 * ROW_PX;
+    fireEvent.scroll(view);
+    const content = container.querySelector<HTMLElement>("[data-diff-content]")!;
+    // the 300-w line 7 is off screen now, and still sets the width
+    expect(content.style.minWidth).toContain(`${"line 7; ".length + 300 + 1}ch`);
+  });
+
+  it("windows both split columns over the same row range", () => {
+    render(<LaneDiffView file={bigFile(5000)} layout="split" />);
+    const left = screen.getByTestId("lane-diff-split-left");
+    const right = screen.getByTestId("lane-diff-split-right");
+    layout(left, { scrollHeight: 5001 * ROW_PX, clientHeight: 400 });
+    layout(right, { scrollHeight: 5001 * ROW_PX, clientHeight: 400 });
+    right.scrollTop = 2000 * ROW_PX;
+    fireEvent.scroll(right);
+    expect(left.scrollTop).toBe(2000 * ROW_PX);
+    const l = rowsIn(left);
+    const r = rowsIn(right);
+    expect(l.length).toBeLessThan(300);
+    expect(l).toHaveLength(r.length);
+    expect(right.textContent).toContain("line 2001;");
+    // same rows: the right column's add has its filler row on the left
+    expect(left.textContent).toContain("line 2000;");
+  });
+
+  it("windows a whole-file read too", () => {
+    const lines = Array.from({ length: 5000 }, (_, i) => `row ${i}`);
+    const { container } = render(<LaneFileView path="a.ts" lines={lines} />);
+    expect(rowsIn(container).length).toBeLessThan(300);
+    const view = screen.getByTestId("lane-file-view");
+    view.scrollTop = 4000 * ROW_PX;
+    fireEvent.scroll(view);
+    expect(container.textContent).toContain("row 4000");
+  });
+});
+
+describe("LaneDiffView — hunk review bar navigation", () => {
+  const hunk = (n: number) => ({
+    header: `@@ -${n},1 +${n},1 @@`,
+    context: "",
+    oldStart: n,
+    newStart: n,
+    lines: [
+      { type: "del" as const, oldLine: n, newLine: null, text: `old ${n}` },
+      { type: "add" as const, oldLine: null, newLine: n, text: `new ${n}` },
+    ],
+  });
+  const three: LaneChangeFile = { ...FILE, hunks: [hunk(1), hunk(20), hunk(40)] };
+
+  // jsdom lays nothing out: give the ONE real scroller a scrollable box and
+  // put hunk k's `@@` row k×100px below its top, wherever it has scrolled to.
+  function renderInScroller() {
+    const view = render(
+      <div data-testid="scroller" style={{ overflowY: "auto" }}>
+        <LaneDiffView file={three} layout="unified" hunkActions={() => <span />} />
+      </div>
+    );
+    const scroller = screen.getByTestId("scroller");
+    Object.defineProperty(scroller, "scrollHeight", { value: 1000 });
+    Object.defineProperty(scroller, "clientHeight", { value: 100 });
+    scroller.getBoundingClientRect = () => ({ top: 0 }) as DOMRect;
+    for (const el of view.container.querySelectorAll<HTMLElement>("[data-change-index]")) {
+      const k = Number(el.dataset.changeIndex);
+      el.getBoundingClientRect = () => ({ top: k * 100 - scroller.scrollTop }) as DOMRect;
+    }
+    return scroller;
+  }
+
+  it("steps to the NEXT hunk and back to the PREVIOUS one, not the first", () => {
+    const scroller = renderInScroller();
+    const next = screen.getAllByRole("button", { name: "Next change" });
+    const prev = screen.getAllByRole("button", { name: "Previous change" });
+
+    fireEvent.click(next[0]!); // bar 1 → hunk 2
+    expect(scroller.scrollTop).toBe(100);
+    fireEvent.click(next[1]!); // bar 2 → hunk 3
+    expect(scroller.scrollTop).toBe(200);
+    fireEvent.click(prev[2]!); // bar 3 → hunk 2, not hunk 1
+    expect(scroller.scrollTop).toBe(100);
+  });
+
+  it("counts the hunks and disables the arrows at either end", () => {
+    renderInScroller();
+    const bars = screen.getAllByTestId("lane-hunk-bar");
+    expect(bars.map((b) => b.textContent)).toEqual([
+      expect.stringContaining("1 of 3"),
+      expect.stringContaining("2 of 3"),
+      expect.stringContaining("3 of 3"),
+    ]);
+    expect(screen.getAllByRole("button", { name: "Previous change" })[0]).toBeDisabled();
+    expect(screen.getAllByRole("button", { name: "Next change" })[2]).toBeDisabled();
+  });
+
+  it("hangs one bar under EACH +/- block of a single hunk, in both layouts (#50)", () => {
+    const merged: LaneChangeFile = {
+      ...FILE,
+      hunks: [
+        {
+          header: "@@ -1,6 +1,6 @@",
+          context: "",
+          oldStart: 1,
+          newStart: 1,
+          lines: [
+            { type: "del" as const, oldLine: 1, newLine: null, text: "a" },
+            { type: "add" as const, oldLine: null, newLine: 1, text: "A" },
+            { type: "ctx" as const, oldLine: 2, newLine: 2, text: "b" },
+            { type: "del" as const, oldLine: 3, newLine: null, text: "c" },
+            { type: "ctx" as const, oldLine: 4, newLine: 3, text: "d" },
+            { type: "add" as const, oldLine: null, newLine: 4, text: "E" },
+            { type: "ctx" as const, oldLine: 5, newLine: 5, text: "f" },
+          ],
+        },
+      ],
+    };
+    const seen: number[] = [];
+    for (const layout of ["unified", "split"] as const) {
+      const { unmount } = render(
+        <LaneDiffView
+          file={merged}
+          layout={layout}
+          hunkActions={(c) => {
+            seen.push(c.block);
+            return <span />;
+          }}
+        />
+      );
+      expect(screen.getAllByTestId("lane-hunk-bar").map((b) => b.textContent)).toEqual([
+        expect.stringContaining("1 of 3"),
+        expect.stringContaining("2 of 3"),
+        expect.stringContaining("3 of 3"),
+      ]);
+      unmount();
+    }
+    expect(seen).toEqual([0, 1, 2, 0, 1, 2]);
+  });
+
+  it("leaves an unwindowed review diff uncapped, so the panel is its only scroller", () => {
+    render(<LaneDiffView file={three} layout="unified" />);
+    expect(screen.getByTestId("lane-diff-view").className).not.toContain("max-h-[60vh]");
+  });
+});

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

@@ -0,0 +1,406 @@
+/**
+ * @file LaneGitBar.test.tsx
+ * @description Pins the lane git action row: the ahead/behind readout, which
+ * buttons a repo with no remote may press (and that it may publish to a typed URL),
+ * what an unborn repo and a branch with no upstream show, that it offers no commit (the
+ * Changes panel's staged-only box owns that), that a dirty tree blocks the branch switch client-side (the server
+ * refuses it too), and that a failed action shows git's own words rather than
+ * a generic sentence.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { LaneGitBar } from "../LaneGitBar";
+import { api } from "../../../lib/api";
+import type { LaneGitFacts } from "../../../lib/types";
+
+vi.mock("../../../lib/api", () => ({
+  api: { lanes: { gitAction: vi.fn(), gitBranches: vi.fn() } },
+}));
+
+function facts(over: Partial<Extract<LaneGitFacts, { available: true }>> = {}): LaneGitFacts {
+  return {
+    available: true,
+    branch: "feat/thing",
+    head: "9b3e74a",
+    unborn: false,
+    subject: "wip",
+    dirty: 2,
+    untracked: 1,
+    files: [],
+    hasRemote: true,
+    upstream: "origin/feat/thing",
+    ahead: 2,
+    behind: 1,
+    ...over,
+  };
+}
+
+beforeEach(() => {
+  vi.mocked(api.lanes.gitAction).mockReset().mockResolvedValue({
+    action: "fetch",
+    ok: true,
+    output: "",
+  });
+  vi.mocked(api.lanes.gitBranches)
+    .mockReset()
+    .mockResolvedValue({
+      available: true,
+      branches: ["development", "feat/thing"],
+      current: "feat/thing",
+      worktrees: [],
+    });
+});
+
+describe("LaneGitBar", () => {
+  it("shows both sides of the upstream comparison", () => {
+    render(<LaneGitBar laneId={3} git={facts()} onChanged={vi.fn()} />);
+    const tracking = screen.getByTestId("lane-git-tracking");
+    expect(tracking).toHaveTextContent("2");
+    expect(tracking).toHaveTextContent("1");
+  });
+
+  it("disables the network actions when the repo has no remote", () => {
+    render(
+      <LaneGitBar
+        laneId={3}
+        git={facts({ hasRemote: false, upstream: null })}
+        onChanged={vi.fn()}
+      />
+    );
+    expect(screen.getByRole("button", { name: /Fetch/ })).toBeDisabled();
+    expect(screen.getByRole("button", { name: /Push/ })).toBeDisabled();
+    // Local actions stay available — a repo with no remote still branches.
+    expect(screen.getByRole("button", { name: /Branch/ })).toBeEnabled();
+  });
+
+  it("offers no commit at all — that is the Changes panel's staged-only box", () => {
+    render(<LaneGitBar laneId={3} git={facts()} onChanged={vi.fn()} />);
+    expect(screen.queryByRole("button", { name: /Commit/ })).toBeNull();
+  });
+
+  it("shows an unborn repo's branch and asks for a first commit instead of a push", () => {
+    render(
+      <LaneGitBar
+        laneId={3}
+        git={facts({
+          branch: "main",
+          head: null,
+          unborn: true,
+          subject: "",
+          hasRemote: false,
+          upstream: null,
+          ahead: null,
+          behind: null,
+        })}
+        onChanged={vi.fn()}
+      />
+    );
+    expect(screen.getByTestId("lane-git-bar")).toHaveTextContent("no commits yet");
+    expect(screen.getByText(/Commit first, then publish/)).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /Fetch|Pull|Push|Publish/ })).toBeNull();
+  });
+
+  it("publishes a repo with no remote to a typed URL", async () => {
+    const user = userEvent.setup();
+    const onChanged = vi.fn();
+    render(
+      <LaneGitBar
+        laneId={3}
+        git={facts({ hasRemote: false, upstream: null, ahead: null, behind: null })}
+        onChanged={onChanged}
+      />
+    );
+
+    await user.click(screen.getByRole("button", { name: "Publish…" }));
+    await user.type(screen.getByLabelText(/Remote URL/), "git@host:owner/repo.git");
+    await user.click(screen.getByRole("button", { name: "Publish" }));
+
+    await waitFor(() =>
+      expect(api.lanes.gitAction).toHaveBeenCalledWith(3, "publish", {
+        url: "git@host:owner/repo.git",
+      })
+    );
+    expect(onChanged).toHaveBeenCalled();
+  });
+
+  it("calls a first push of a branch with no upstream 'Publish branch'", async () => {
+    const user = userEvent.setup();
+    render(
+      <LaneGitBar
+        laneId={3}
+        git={facts({ upstream: null, ahead: null, behind: null })}
+        onChanged={vi.fn()}
+      />
+    );
+    expect(screen.queryByRole("button", { name: /^Push$/ })).toBeNull();
+    await user.click(screen.getByRole("button", { name: "Publish branch" }));
+    await waitFor(() => expect(api.lanes.gitAction).toHaveBeenCalledWith(3, "push", {}));
+  });
+
+  it("loads the branch list on demand and refuses to switch while dirty", async () => {
+    const user = userEvent.setup();
+    render(<LaneGitBar laneId={3} git={facts()} onChanged={vi.fn()} />);
+
+    await user.click(screen.getByRole("button", { name: /Branch/ }));
+    await waitFor(() => expect(api.lanes.gitBranches).toHaveBeenCalledWith(3));
+    await user.selectOptions(await screen.findByLabelText("Switch branch…"), "development");
+    // Picking is harmless; applying is what a dirty tree blocks.
+    expect(screen.getByRole("button", { name: "Switch branch" })).toBeDisabled();
+    expect(api.lanes.gitAction).not.toHaveBeenCalled();
+  });
+
+  it("switches branch on a clean tree", async () => {
+    const user = userEvent.setup();
+    render(<LaneGitBar laneId={3} git={facts({ dirty: 0, untracked: 0 })} onChanged={vi.fn()} />);
+
+    await user.click(screen.getByRole("button", { name: /Branch/ }));
+    const select = await screen.findByLabelText("Switch branch…");
+    await user.selectOptions(select, "development");
+    await user.click(screen.getByRole("button", { name: "Switch branch" }));
+
+    await waitFor(() =>
+      expect(api.lanes.gitAction).toHaveBeenCalledWith(3, "switch", { branch: "development" })
+    );
+  });
+
+  it("re-reads the branch list after a switch, so the branch just left is not held", async () => {
+    const user = userEvent.setup();
+    render(<LaneGitBar laneId={3} git={facts({ dirty: 0, untracked: 0 })} onChanged={vi.fn()} />);
+    await user.click(screen.getByRole("button", { name: /Branch/ }));
+    await user.selectOptions(await screen.findByLabelText("Switch branch…"), "development");
+    await user.click(screen.getByRole("button", { name: "Switch branch" }));
+    await waitFor(() => expect(api.lanes.gitBranches).toHaveBeenCalledTimes(2));
+  });
+
+  it("creates a branch without switching, then offers a sibling lane on it", async () => {
+    const user = userEvent.setup();
+    const onNewLane = vi.fn();
+    render(
+      <LaneGitBar
+        laneId={3}
+        git={facts({ dirty: 0, untracked: 0 })}
+        onChanged={vi.fn()}
+        onNewLane={onNewLane}
+      />
+    );
+
+    await user.click(screen.getByRole("button", { name: /Branch/ }));
+    await user.type(await screen.findByLabelText("New branch name…"), "feat/sibling");
+    await user.click(screen.getByRole("button", { name: "Create" }));
+    await waitFor(() =>
+      expect(api.lanes.gitAction).toHaveBeenCalledWith(3, "branch-create", {
+        branch: "feat/sibling",
+      })
+    );
+
+    await user.selectOptions(screen.getByLabelText("Switch branch…"), "development");
+    await user.click(screen.getByRole("button", { name: "New lane here" }));
+    expect(onNewLane).toHaveBeenCalledWith("development");
+  });
+
+  it("offers a sibling lane only on a branch no worktree holds — the server refuses the rest", async () => {
+    vi.mocked(api.lanes.gitBranches).mockResolvedValue({
+      available: true,
+      branches: ["development", "feat/thing", "feat/free"],
+      current: "feat/thing",
+      worktrees: [
+        { path: "/repo/lane3", branch: "feat/thing" },
+        { path: "/repo/dev", branch: "development" },
+      ],
+    });
+    const user = userEvent.setup();
+    render(<LaneGitBar laneId={3} git={facts()} onChanged={vi.fn()} onNewLane={vi.fn()} />);
+    await user.click(screen.getByRole("button", { name: /Branch/ }));
+    const select = await screen.findByLabelText("Switch branch…");
+    const newLane = () => screen.getByRole("button", { name: "New lane here" });
+
+    // This lane's own branch: its worktree is this lane.
+    await user.selectOptions(select, "feat/thing");
+    expect(newLane()).toBeDisabled();
+    // Held by another worktree: git allows one worktree per branch (EBRANCHBUSY).
+    await user.selectOptions(select, "development");
+    expect(newLane()).toBeDisabled();
+    expect(newLane()).toHaveAttribute("title", expect.stringContaining("/repo/dev"));
+
+    await user.selectOptions(select, "feat/free");
+    expect(newLane()).toBeEnabled();
+  });
+
+  it("prints git's own rejection text when an action fails", async () => {
+    const user = userEvent.setup();
+    vi.mocked(api.lanes.gitAction).mockRejectedValue(
+      new Error("git push failed\n! [rejected] main -> main (non-fast-forward)")
+    );
+    render(<LaneGitBar laneId={3} git={facts()} onChanged={vi.fn()} />);
+
+    await user.click(screen.getByRole("button", { name: /Push/ }));
+    expect(await screen.findByTestId("lane-git-bar-error")).toHaveTextContent("non-fast-forward");
+  });
+
+  it("re-reads the branch list for the new lane instead of showing the old one's", async () => {
+    const user = userEvent.setup();
+    const { rerender } = render(<LaneGitBar laneId={3} git={facts()} onChanged={vi.fn()} />);
+    await user.click(screen.getByRole("button", { name: /Branch/ }));
+    await user.selectOptions(await screen.findByLabelText("Switch branch…"), "development");
+
+    rerender(<LaneGitBar laneId={4} git={facts()} onChanged={vi.fn()} />);
+    expect(screen.queryByLabelText("Switch branch…")).toBeNull();
+    await user.click(screen.getByRole("button", { name: /Branch/ }));
+    await waitFor(() => expect(api.lanes.gitBranches).toHaveBeenCalledWith(4));
+    expect(await screen.findByLabelText("Switch branch…")).toHaveValue("");
+  });
+
+  it("sends one branch-create for a double Enter", async () => {
+    vi.mocked(api.lanes.gitAction).mockReturnValue(new Promise(() => {}));
+    const user = userEvent.setup();
+    render(<LaneGitBar laneId={3} git={facts()} onChanged={vi.fn()} />);
+    await user.click(screen.getByRole("button", { name: /Branch/ }));
+    await user.type(await screen.findByLabelText(/New branch/), "feat/once{Enter}{Enter}");
+    expect(api.lanes.gitAction).toHaveBeenCalledTimes(1);
+  });
+
+  it("forgets which branches the previous lane's worktrees held once the lane changes", async () => {
+    let resolveOld: (v: Awaited<ReturnType<typeof api.lanes.gitBranches>>) => void = () => {};
+    vi.mocked(api.lanes.gitBranches).mockReturnValueOnce(
+      new Promise((r) => {
+        resolveOld = r;
+      })
+    );
+    const user = userEvent.setup();
+    const { rerender } = render(
+      <LaneGitBar laneId={3} git={facts()} onChanged={vi.fn()} onNewLane={vi.fn()} />
+    );
+    await user.click(screen.getByRole("button", { name: /Branch/ }));
+
+    rerender(<LaneGitBar laneId={4} git={facts()} onChanged={vi.fn()} onNewLane={vi.fn()} />);
+    await user.click(screen.getByRole("button", { name: /Branch/ }));
+    const select = await screen.findByLabelText("Switch branch…");
+    await waitFor(() => expect(api.lanes.gitBranches).toHaveBeenCalledWith(4));
+    // Lane 3's answer lands late: its worktree held `development`.
+    resolveOld({
+      available: true,
+      branches: ["development", "feat/thing"],
+      current: "feat/thing",
+      worktrees: [{ path: "/repo/dev", branch: "development" }],
+    });
+    await user.selectOptions(select, "development");
+    const newLane = screen.getByRole("button", { name: "New lane here" });
+    expect(newLane).toBeEnabled();
+    expect(newLane).not.toHaveAttribute("title", expect.stringContaining("/repo/dev"));
+  });
+
+  it("claims no sync state when the upstream comparison could not be counted", () => {
+    render(
+      <LaneGitBar
+        laneId={3}
+        git={facts({ upstream: "origin/gone", ahead: null, behind: null })}
+        onChanged={vi.fn()}
+      />
+    );
+    expect(screen.queryByText("in sync")).toBeNull();
+    expect(screen.queryByTestId("lane-git-tracking")).toBeNull();
+  });
+
+  it("explains a push with nowhere to go instead of the server's generic text", async () => {
+    const user = userEvent.setup();
+    vi.mocked(api.lanes.gitAction).mockRejectedValue(
+      Object.assign(new Error("this repository has no remote to push to"), { code: "ENOREMOTE" })
+    );
+    render(<LaneGitBar laneId={3} git={facts()} onChanged={vi.fn()} />);
+    await user.click(screen.getByRole("button", { name: /Push/ }));
+    expect(await screen.findByTestId("lane-git-bar-error")).toHaveTextContent(
+      "No remote to push to or pull from"
+    );
+  });
+});
+
+describe("git login (issue #45)", () => {
+  const authErr = (rejected = false) =>
+    Object.assign(new Error("git.smartgift.io.vn needs a username and password or access token"), {
+      code: "EGITAUTH",
+      auth: { protocol: "https", host: "git.smartgift.io.vn", username: "vi", rejected },
+    });
+
+  it("asks for a login when git needs one, then resends the same action with it", async () => {
+    vi.mocked(api.lanes.gitAction).mockRejectedValueOnce(authErr());
+    const user = userEvent.setup();
+    const onChanged = vi.fn();
+    render(<LaneGitBar laneId={3} git={facts()} onChanged={onChanged} />);
+
+    await user.click(screen.getByRole("button", { name: /Push/ }));
+    const form = await screen.findByTestId("lane-git-login");
+    expect(form).toHaveTextContent("git.smartgift.io.vn");
+    expect(screen.getByLabelText("Username")).toHaveValue("vi");
+    expect(screen.getByLabelText(/Remember for everyone/)).toBeChecked();
+    await user.type(screen.getByLabelText("Password or access token"), "s3cret");
+    await user.click(screen.getByRole("button", { name: "Log in and retry" }));
+
+    await waitFor(() =>
+      expect(api.lanes.gitAction).toHaveBeenLastCalledWith(3, "push", {
+        credentials: {
+          protocol: "https",
+          host: "git.smartgift.io.vn",
+          username: "vi",
+          password: "s3cret",
+          remember: true,
+        },
+      })
+    );
+    await waitFor(() => expect(screen.queryByTestId("lane-git-login")).toBeNull());
+    expect(onChanged).toHaveBeenCalled();
+    expect(document.body.textContent).not.toContain("s3cret");
+  });
+
+  it("says the login was wrong when the host rejected it, and keeps the form", async () => {
+    vi.mocked(api.lanes.gitAction)
+      .mockRejectedValueOnce(authErr())
+      .mockRejectedValueOnce(authErr(true));
+    const user = userEvent.setup();
+    render(<LaneGitBar laneId={3} git={facts()} onChanged={vi.fn()} />);
+    await user.click(screen.getByRole("button", { name: /Fetch/ }));
+    await user.type(await screen.findByLabelText("Password or access token"), "bad");
+    await user.click(screen.getByRole("button", { name: "Log in and retry" }));
+    expect(await screen.findByTestId("lane-git-login")).toHaveTextContent(/rejected/i);
+    expect(screen.getByLabelText("Password or access token")).toHaveValue("");
+  });
+});
+
+describe("merge (issue #45)", () => {
+  it("merges the picked branch into the current one after a confirm", async () => {
+    const confirm = vi.spyOn(window, "confirm").mockReturnValue(true);
+    const user = userEvent.setup();
+    render(<LaneGitBar laneId={3} git={facts({ dirty: 0, untracked: 0 })} onChanged={vi.fn()} />);
+    await user.click(screen.getByRole("button", { name: /Branch/ }));
+    await user.selectOptions(await screen.findByLabelText("Switch branch…"), "development");
+    await user.click(screen.getByRole("button", { name: "Merge into current" }));
+    await waitFor(() =>
+      expect(api.lanes.gitAction).toHaveBeenCalledWith(3, "merge", { branch: "development" })
+    );
+    confirm.mockRestore();
+  });
+
+  it("offers to merge the upstream when the branch has diverged", async () => {
+    vi.spyOn(window, "confirm").mockReturnValue(true);
+    const user = userEvent.setup();
+    render(<LaneGitBar laneId={3} git={facts({ dirty: 0, untracked: 0 })} onChanged={vi.fn()} />);
+    await user.click(screen.getByRole("button", { name: "Merge origin/feat/thing" }));
+    await waitFor(() =>
+      expect(api.lanes.gitAction).toHaveBeenCalledWith(3, "merge", { branch: "origin/feat/thing" })
+    );
+  });
+
+  it("disables pull and switch while a merge is in progress", () => {
+    render(
+      <LaneGitBar
+        laneId={3}
+        git={{ ...facts(), merging: true, conflicts: 1 } as LaneGitFacts}
+        onChanged={vi.fn()}
+      />
+    );
+    expect(screen.getByRole("button", { name: /Pull/ })).toBeDisabled();
+    expect(screen.getByRole("button", { name: /Branch/ })).toBeDisabled();
+  });
+});

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

@@ -0,0 +1,160 @@
+/**
+ * @file LaneGitHeader.test.tsx
+ * @description Pins the Changes panel's working-copy line: the live branch,
+ * head, subject and uncommitted counts, the per-file hover panel behind the
+ * counts, that a lane switch drops the previous lane's facts at once, and that
+ * an unreadable repo renders nothing rather than an error.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, waitFor, fireEvent } from "@testing-library/react";
+import { LaneGitHeader, useLaneGitFacts } from "../LaneGitHeader";
+import { api } from "../../../lib/api";
+
+vi.mock("../../../lib/api", () => ({
+  api: { lanes: { git: vi.fn(), gitAction: vi.fn(), gitBranches: vi.fn() } },
+}));
+
+beforeEach(() => {
+  vi.mocked(api.lanes.git).mockReset().mockResolvedValue({ available: false });
+});
+
+/** The panel's own wiring: one facts read feeding the header. */
+function Harness({ laneId }: { laneId: number }) {
+  const [git, refresh] = useLaneGitFacts(laneId);
+  return <LaneGitHeader laneId={laneId} git={git} onChanged={refresh} />;
+}
+
+describe("LaneGitHeader", () => {
+  const facts = {
+    available: true as const,
+    branch: "feat/rename-metric",
+    head: "9b3e74a",
+    subject: "free-text rule mode in the form",
+    dirty: 2,
+    untracked: 1,
+    files: [
+      { path: "server/lib/alerts.js", status: " M", added: 12, deleted: 3 },
+      { path: "client/src/lib/api.ts", status: "M ", added: 1, deleted: 0 },
+      { path: "scratch.txt", status: "??", added: null, deleted: null },
+    ],
+    // Tracking facts ride along on the same endpoint; a branch that has never
+    // been pushed reports nulls rather than zeros.
+    hasRemote: true,
+    upstream: null,
+    ahead: null,
+    behind: null,
+  };
+
+  it("renders the live branch, head, subject and uncommitted counts", async () => {
+    vi.mocked(api.lanes.git).mockResolvedValueOnce(facts);
+    render(<Harness laneId={1} />);
+
+    const block = await screen.findByTestId("lane-git");
+    expect(block.textContent).toContain("feat/rename-metric");
+    expect(block.textContent).toContain("9b3e74a");
+    expect(block.textContent).toContain("free-text rule mode in the form");
+    expect(screen.getByTestId("lane-git-counts").textContent).toContain("2");
+  });
+
+  it("drops the previous lane's facts the moment the lane changes", async () => {
+    vi.mocked(api.lanes.git).mockResolvedValueOnce(facts);
+    const { rerender } = render(<Harness laneId={1} />);
+    await screen.findByText(/feat\/rename-metric/);
+
+    // The next lane's read never lands: nothing of lane 1's git may linger.
+    vi.mocked(api.lanes.git).mockReturnValueOnce(new Promise(() => {}));
+    rerender(<Harness laneId={2} />);
+    expect(screen.queryByText(/feat\/rename-metric/)).toBeNull();
+  });
+
+  it("names the files behind the counts on hover, with each one's line delta", async () => {
+    vi.mocked(api.lanes.git).mockResolvedValueOnce(facts);
+    render(<Harness laneId={1} />);
+
+    const counts = await screen.findByTestId("lane-git-counts");
+    // Hidden until asked for: the row is a one-line summary until you hover.
+    expect(screen.queryByTestId("lane-git-files")).toBeNull();
+
+    fireEvent.mouseEnter(counts);
+    const panel = screen.getByTestId("lane-git-files");
+    expect(panel.textContent).toContain("alerts.js");
+    expect(panel.textContent).toContain("+12");
+    expect(panel.textContent).toContain("−3");
+    // Totals across the listed files.
+    expect(panel.textContent).toContain("+13");
+    // An untracked file has no delta to report and says so rather than "+0".
+    expect(panel.textContent).toContain("new");
+    expect(panel.textContent).toContain("3 files changed");
+
+    // Closing is delayed so the pointer can travel into the panel and scroll
+    // it — the panel is portalled to the body, away from its trigger.
+    fireEvent.mouseLeave(counts);
+    expect(screen.queryByTestId("lane-git-files")).not.toBeNull();
+    await waitFor(() => expect(screen.queryByTestId("lane-git-files")).toBeNull());
+  });
+
+  it("stays open while the pointer is inside the panel", async () => {
+    vi.mocked(api.lanes.git).mockResolvedValueOnce(facts);
+    render(<Harness laneId={1} />);
+
+    const counts = await screen.findByTestId("lane-git-counts");
+    fireEvent.mouseEnter(counts);
+    fireEvent.mouseLeave(counts);
+    // The pointer landed on the panel before the pending close fired.
+    fireEvent.mouseEnter(screen.getByTestId("lane-git-files"));
+    await new Promise((r) => setTimeout(r, 200));
+    expect(screen.queryByTestId("lane-git-files")).not.toBeNull();
+
+    fireEvent.mouseLeave(screen.getByTestId("lane-git-files"));
+    await waitFor(() => expect(screen.queryByTestId("lane-git-files")).toBeNull());
+  });
+
+  it("says how many files the server-side cap left out", async () => {
+    // 40 uncommitted files, 3 listed: the counts are exact, the listing is not.
+    vi.mocked(api.lanes.git).mockResolvedValueOnce({ ...facts, dirty: 39, untracked: 1 });
+    render(<Harness laneId={1} />);
+
+    fireEvent.mouseEnter(await screen.findByTestId("lane-git-counts"));
+    expect(screen.getByTestId("lane-git-files").textContent).toContain("37 more");
+  });
+
+  it("omits the uncommitted line when the tree is clean", async () => {
+    vi.mocked(api.lanes.git).mockResolvedValueOnce({ ...facts, dirty: 0, untracked: 0 });
+    render(<Harness laneId={1} />);
+    const block = await screen.findByTestId("lane-git");
+    expect(block.textContent).not.toContain("modified");
+  });
+
+  it("renders nothing and no error when git is unavailable", async () => {
+    vi.mocked(api.lanes.git).mockResolvedValueOnce({ available: false });
+    render(<Harness laneId={2} />);
+
+    await waitFor(() => expect(api.lanes.git).toHaveBeenCalledWith(2));
+    expect(screen.queryByTestId("lane-git-header")).toBeNull();
+  });
+
+  it("swallows a rejected request instead of surfacing an error", async () => {
+    vi.mocked(api.lanes.git).mockRejectedValueOnce(new Error("network down"));
+    render(<Harness laneId={3} />);
+
+    await waitFor(() => expect(api.lanes.git).toHaveBeenCalledWith(3));
+    expect(screen.queryByTestId("lane-git")).toBeNull();
+    expect(screen.queryByText(/network down/)).toBeNull();
+  });
+
+  it("stops polling once the panel unmounts", async () => {
+    vi.useFakeTimers();
+    try {
+      vi.mocked(api.lanes.git).mockResolvedValue({ available: false });
+      const { unmount } = render(<Harness laneId={1} />);
+      expect(api.lanes.git).toHaveBeenCalledTimes(1);
+      unmount();
+      vi.advanceTimersByTime(120_000);
+      expect(api.lanes.git).toHaveBeenCalledTimes(1);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+});

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

@@ -1,13 +1,13 @@
 /**
- * @file Rendering tests for the Workspace lane tile, focused on the amber
- * "detected" badge: it may only appear when the inferred stage is genuinely
- * AHEAD of the declared one, including when the declaration used a node alias
- * (which is most of what the ship-feature skill declares).
+ * @file Rendering tests for the Workspace lane tile: the amber "detected"
+ * badge (it may only appear when the inferred stage is genuinely AHEAD of the
+ * declared one, including when the declaration used a node alias — which is
+ * most of what the ship-feature skill declares), and the reorder handles.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
 import LaneStripCard from "../LaneStripCard";
 import type { Lane, LaneNode } from "../../../lib/types";
 
@@ -63,8 +63,10 @@ describe("LaneStripCard detected badge", () => {
     render(
       <LaneStripCard
         lane={lane({ detected_stage: "review" })}
+        index={0}
         selected={false}
         onSelect={() => {}}
+        onReorder={() => {}}
       />
     );
     expect(screen.getByTestId("lane-tile-auto-1")).toHaveTextContent("review");
@@ -77,8 +79,10 @@ describe("LaneStripCard detected badge", () => {
     render(
       <LaneStripCard
         lane={lane({ stage: "tests", detected_stage: "implementing" })}
+        index={0}
         selected={false}
         onSelect={() => {}}
+        onReorder={() => {}}
       />
     );
     expect(screen.queryByTestId("lane-tile-auto-1")).toBeNull();
@@ -88,10 +92,104 @@ describe("LaneStripCard detected badge", () => {
     render(
       <LaneStripCard
         lane={lane({ stage: "tests", detected_stage: "review" })}
+        index={0}
         selected={false}
         onSelect={() => {}}
+        onReorder={() => {}}
       />
     );
     expect(screen.getByTestId("lane-tile-auto-1")).toHaveTextContent("review");
   });
 });
+
+describe("LaneStripCard reorder", () => {
+  /** jsdom ships no DataTransfer, so the drag events carry a stub store. */
+  function dataTransfer(initial = "") {
+    let payload = initial;
+    return {
+      setData: (_type: string, v: string) => {
+        payload = v;
+      },
+      getData: () => payload,
+      effectAllowed: "",
+      dropEffect: "",
+    };
+  }
+
+  it("reports the dragged tile's index and the drop target's", () => {
+    const onReorder = vi.fn();
+    const dt = dataTransfer();
+    render(
+      <>
+        <LaneStripCard
+          lane={lane({ id: 1 })}
+          index={0}
+          selected={false}
+          onSelect={() => {}}
+          onReorder={onReorder}
+        />
+        <LaneStripCard
+          lane={lane({ id: 2 })}
+          index={2}
+          selected={false}
+          onSelect={() => {}}
+          onReorder={onReorder}
+        />
+      </>
+    );
+    fireEvent.dragStart(screen.getByTestId("lane-tile-1"), { dataTransfer: dt });
+    fireEvent.drop(screen.getByTestId("lane-tile-2"), { dataTransfer: dt });
+    expect(onReorder).toHaveBeenCalledWith(0, 2);
+  });
+
+  it("ignores a drop carrying no tile index", () => {
+    const onReorder = vi.fn();
+    render(
+      <LaneStripCard
+        lane={lane({})}
+        index={0}
+        selected={false}
+        onSelect={() => {}}
+        onReorder={onReorder}
+      />
+    );
+    fireEvent.drop(screen.getByTestId("lane-tile-1"), { dataTransfer: dataTransfer("nonsense") });
+    expect(onReorder).not.toHaveBeenCalled();
+  });
+
+  it("moves the focused tile with Alt+Arrow, the keyboard path for reordering", () => {
+    const onReorder = vi.fn();
+    render(
+      <LaneStripCard
+        lane={lane({})}
+        index={2}
+        selected={false}
+        onSelect={() => {}}
+        onReorder={onReorder}
+      />
+    );
+    const tile = screen.getByTestId("lane-tile-1");
+    fireEvent.keyDown(tile, { key: "ArrowLeft", altKey: true });
+    expect(onReorder).toHaveBeenCalledWith(2, 1);
+    fireEvent.keyDown(tile, { key: "ArrowRight", altKey: true });
+    expect(onReorder).toHaveBeenCalledWith(2, 3);
+    // A bare arrow is the strip's own scroll/focus movement, not a reorder.
+    fireEvent.keyDown(tile, { key: "ArrowLeft" });
+    expect(onReorder).toHaveBeenCalledTimes(2);
+  });
+
+  it("shows the id without the 'Lane' prefix", () => {
+    render(
+      <LaneStripCard
+        lane={lane({ id: 7, title: "checkout flow" })}
+        index={0}
+        selected={false}
+        onSelect={() => {}}
+        onReorder={() => {}}
+      />
+    );
+    const tile = screen.getByTestId("lane-tile-7");
+    expect(tile).toHaveTextContent("#7");
+    expect(tile.textContent).not.toMatch(/Lane/i);
+  });
+});

client/src/components/run/LaneConsolePane.tsx

@@ -15,10 +15,20 @@
  * swaps the whole pane over to the new lane — its cwd, its tool, its history,
  * and its live tmux session — instead of leaving the previous lane's terminal
  * on screen under a new lane's header.
+ *
+ * Each pane is one tmux session on its lane — split panes all show the same
+ * lane, pane `slot` N owning `agenthub-lane-<id>[-N]` — so starting or resuming
+ * into a pane already holding a live run answers 409 ERUNLIVE rather than overwriting a
+ * prompt in flight — `onStartFromSetup` and `onResumeFromHistory` both catch
+ * that and attach to the still-live session instead of failing outright
+ * (with a notice explaining what happened), since that session is still
+ * reachable and the user did not ask to kill it. `killRun` is the other half:
+ * the Active runs list's Kill button (`RunHistory.tsx`), for when the user
+ * DOES want that previous session gone so a fresh start/resume can proceed.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Play, AlertCircle } from "lucide-react";
 import { api } from "../../lib/api";
@@ -33,18 +43,33 @@ import type {
   CodexSandbox,
   CodexApproval,
 } from "../../lib/api";
-import type { Session, Lane, LaneTool } from "../../lib/types";
+import type { Session, Lane } from "../../lib/types";
+import { useAiTools } from "../../hooks/useAiTools";
 import { TerminalView } from "./TerminalView";
 import { RunSetup } from "./RunSetup";
 import { ActiveRunsSwitcher } from "./RunHistory";
 
+/** The claude lane a session's cwd belongs to: the longest path-boundary
+ *  prefix, the same rule the server binds hook sessions with. External
+ *  sessions are all claude — Codex emits no hooks. */
+function owningLaneId(cwd: string, lanes: Lane[]): number | null {
+  let best: Lane | null = null;
+  for (const l of lanes) {
+    if (l.tool !== "claude") continue;
+    const root = l.cwd.replace(/\/+$/, "");
+    if (cwd !== root && !cwd.startsWith(root + "/")) continue;
+    if (!best || root.length > best.cwd.replace(/\/+$/, "").length) best = l;
+  }
+  return best?.id ?? null;
+}
+
 export interface LaneConsolePaneProps {
   lanes: Lane[];
   laneId: number | null;
   showLaneSelector: boolean;
   onLaneIdChange: (id: number) => void;
   onLaneCreated: (lane: Lane) => void;
-  binaryStatus: Record<LaneTool, { found: boolean; path: string | null }> | null;
+  binaryStatus: Record<string, { found: boolean; path: string | null }> | null;
   cwdSuggestions: CwdSuggestion[];
   activeRuns: RunListResponse | null;
   /** Active Claude Code sessions started outside the dashboard, listed in the
@@ -53,6 +78,19 @@ export interface LaneConsolePaneProps {
   wsConnected: boolean;
   defaultCwd?: string;
   onHasActiveRunChange?: (active: boolean) => void;
+  /** Which split pane this is. Every pane shows the SAME lane, each in its own
+   *  tmux session: slot 0 is the lane's own, 1–3 are `agenthub-lane-<id>-<slot>`. */
+  slot?: number;
+  /** Runs the OTHER panes are showing — left out of this pane's Active runs so
+   *  one terminal is never attached twice side by side. */
+  hiddenRunIds?: string[];
+  /** Reports the run this pane shows (null on the setup form). */
+  onHandleChange?: (runId: string | null) => void;
+}
+
+/** The tmux session a lane's split pane owns (see server/lib/pty-run.js). */
+function paneRunId(laneId: number, slot: number): string {
+  return slot ? `agenthub-lane-${laneId}-${slot}` : `agenthub-lane-${laneId}`;
 }
 
 export function LaneConsolePane({
@@ -68,6 +106,9 @@ export function LaneConsolePane({
   wsConnected,
   defaultCwd,
   onHasActiveRunChange,
+  slot = 0,
+  hiddenRunIds,
+  onHandleChange,
 }: LaneConsolePaneProps) {
   const { t } = useTranslation("run");
   const { t: tLanes } = useTranslation("lanes");
@@ -75,7 +116,7 @@ export function LaneConsolePane({
 
   const [prompt, setPrompt] = useState("");
   const [model, setModel] = useState("");
-  const [permissionMode, setPermissionMode] = useState<PermissionMode>("acceptEdits");
+  const [permissionMode, setPermissionMode] = useState<PermissionMode>("auto");
   const [effort, setEffort] = useState<EffortLevel>("");
   const [cwd, setCwd] = useState(() => lanes.find((l) => l.id === laneId)?.cwd ?? defaultCwd ?? "");
   const [resumeSession, setResumeSession] = useState<Session | null>(null);
@@ -88,12 +129,44 @@ export function LaneConsolePane({
 
   const currentLane = laneId !== null ? lanes.find((l) => l.id === laneId) : null;
   const laneTool = currentLane?.tool ?? "claude";
-  const toolLabel = laneTool === "codex" ? "Codex" : "Claude";
+  // The page polls runs and sessions for EVERY lane; this pane's Active runs
+  // list is this lane's only. No lane selected keeps the full lists.
+  const laneRuns = useMemo(
+    () =>
+      laneId === null || !activeRuns
+        ? activeRuns
+        : {
+            ...activeRuns,
+            items: activeRuns.items.filter(
+              (r) => r.laneId === laneId && !hiddenRunIds?.includes(r.id)
+            ),
+          },
+    [activeRuns, laneId, hiddenRunIds]
+  );
+  const laneSessions = useMemo(
+    () =>
+      laneId === null
+        ? externalSessions
+        : (externalSessions ?? []).filter((s) => s.cwd && owningLaneId(s.cwd, lanes) === laneId),
+    [externalSessions, laneId, lanes]
+  );
+  const aiTools = useAiTools();
+  const toolLabel = aiTools.label(laneTool);
+  // A new run starts on the tool's default model (AI Tools settings), and a
+  // lane switch to another tool drops the previous tool's pick.
+  const defaultModel = aiTools.byId(laneTool)?.defaultModel ?? "";
+  useEffect(() => {
+    setModel(defaultModel);
+  }, [laneTool, defaultModel]);
 
   useEffect(() => {
     onHasActiveRunChange?.(handle !== null);
   }, [handle, onHasActiveRunChange]);
 
+  useEffect(() => {
+    onHandleChange?.(handle?.id ?? null);
+  }, [handle, onHandleChange]);
+
   useEffect(() => {
     if (!currentLane && defaultCwd && cwd === "") {
       setCwd(defaultCwd);
@@ -129,43 +202,19 @@ export function LaneConsolePane({
   useEffect(() => {
     const { activeRuns: runs } = latest.current;
     setPrompt("");
-    lastPrefill.current = "";
     setResumeSession(null);
     setError(null);
     setBusy(null);
-    setHandle(runs?.items.find((r) => r.laneId === laneId && r.status === "running") ?? null);
+    const own = laneId === null ? null : paneRunId(laneId, slot);
+    setHandle(runs?.items.find((r) => r.id === own && r.status === "running") ?? null);
     autoAttachedForLane.current = null;
     refreshList();
-  }, [laneId, refreshList]);
+  }, [laneId, slot, refreshList]);
 
-  // Pre-fill the prompt with the slash command the lane's pipeline template
-  // names as its driver, so picking the 16-node pipeline starts the 16-step
-  // skill and the 8-node one the 8-step skill. Only overwrites a prompt the
-  // user hasn't touched (still exactly the previous prefill), so switching
-  // templates never eats a typed requirement. Must be declared AFTER the
-  // lane-switch effect: on a lane change that one clears both first.
-  const lastPrefill = useRef("");
-  // Claude gets a slash command it can execute (`pipeline_skill`), which itself
-  // declares stage at every step. Codex has no slash commands — the same
-  // string would read as literal prose — so it gets the equivalent priming a
-  // different way: a plain-text checklist of this lane's own pipeline node ids,
-  // read directly off `pipeline_nodes` so it always matches the template in
-  // use. Without SOME opening nudge a codex lane's declared stage depends
-  // entirely on AGENTS.md being read on its own, which is easy to miss.
-  const promptPrefill =
-    laneTool === "codex"
-      ? currentLane?.pipeline_nodes?.length
-        ? `Declare progress as you go: run \`agenthub stage <stage> --tool codex --evidence "..."\` immediately at each real transition through this pipeline — ${currentLane.pipeline_nodes.map((n) => n.id).join(" -> ")}. Then, your task:\n\n`
-        : ""
-      : currentLane?.pipeline_skill || "";
-  useEffect(() => {
-    const next = promptPrefill && laneTool === "claude" ? `${promptPrefill} ` : promptPrefill;
-    setPrompt((p) => (p === lastPrefill.current ? next : p));
-    lastPrefill.current = next;
-    // `laneId` is a dep too: switching between two lanes on the SAME template
-    // leaves `promptPrefill` unchanged, and the switch effect just cleared the
-    // prompt — without it the new lane would open with an empty box.
-  }, [promptPrefill, laneTool, laneId]);
+  // Picking a pipeline template writes NOTHING into the prompt box: a prefilled
+  // slash command (or the codex stage-checklist prose) is sent as soon as the
+  // run starts, which is an extra prompt nobody asked for. The prompt is the
+  // user's to type; the pipeline is declared by `agenthub stage` instead.
 
   // The switch effect above only sees whatever `activeRuns` the page already
   // had loaded at that instant. Remounting this page (navigating away and
@@ -177,12 +226,13 @@ export function LaneConsolePane({
   useEffect(() => {
     if (handle || laneId === null) return;
     if (autoAttachedForLane.current === laneId) return;
-    const running = activeRuns?.items.find((r) => r.laneId === laneId && r.status === "running");
+    const own = paneRunId(laneId, slot);
+    const running = activeRuns?.items.find((r) => r.id === own && r.status === "running");
     if (running) {
       autoAttachedForLane.current = laneId;
       setHandle(running);
     }
-  }, [activeRuns, laneId, handle]);
+  }, [activeRuns, laneId, slot, handle]);
 
   // The cwd tracks the lane's own folder separately, keyed on the resolved
   // path rather than on `laneId` alone: the pane can mount before the lane
@@ -261,6 +311,7 @@ export function LaneConsolePane({
         let laneStartResult;
         try {
           laneStartResult = await api.lanes.action(targetLaneId, "start", {
+            slot,
             prompt: args.initialPrompt || "",
             model: args.model || undefined,
             permissionMode: args.permissionMode,
@@ -269,31 +320,34 @@ export function LaneConsolePane({
             sandbox: args.sandbox,
             approval: args.approval,
             resumeLast: args.resumeLast,
+            bypass: args.bypass,
           });
         } catch (laneErr: unknown) {
-          const msg = laneErr instanceof Error ? laneErr.message : String(laneErr);
-          if (msg.includes("409") || msg.includes("ERUNLIVE")) {
-            const fresh = await api.lanes.list().catch(() => null);
-            const updatedLane = fresh?.lanes.find((l) => l.id === targetLaneId);
-            if (updatedLane?.run_id) {
-              await attachToRun(updatedLane.run_id);
-              return;
-            }
+          // A code-only check: the server's message is human prose ("lane
+          // already has a live run"), never the literal strings "409" or
+          // "ERUNLIVE" — matching against `.message` here is dead code that
+          // always falls through to the raw error below.
+          // This pane's own session is the live one — land on it.
+          if ((laneErr as { code?: string })?.code === "ERUNLIVE") {
+            await attachToRun(paneRunId(targetLaneId, slot));
+            setError(t("errors.attachedToLiveInstead"));
+            return;
           }
           throw laneErr;
         }
 
-        if (!laneStartResult.lane?.run_id) {
+        const startedId = laneStartResult.run_id ?? laneStartResult.lane?.run_id;
+        if (!startedId) {
           throw new Error(t("errors.noRunIdReturned"));
         }
 
         try {
-          const fetched = await api.run.get(laneStartResult.lane.run_id);
+          const fetched = await api.run.get(startedId);
           setHandle(fetched);
           refreshList();
         } catch {
           try {
-            await attachToRun(laneStartResult.lane.run_id);
+            await attachToRun(startedId);
             refreshList();
           } catch (fallbackErr: unknown) {
             const attachMsg = fallbackErr instanceof Error ? fallbackErr.message : "unknown";
@@ -307,7 +361,18 @@ export function LaneConsolePane({
         setBusy(null);
       }
     },
-    [busy, t, lanes, laneId, laneTool, onLaneIdChange, onLaneCreated, attachToRun, refreshList]
+    [
+      busy,
+      t,
+      lanes,
+      laneId,
+      laneTool,
+      slot,
+      onLaneIdChange,
+      onLaneCreated,
+      attachToRun,
+      refreshList,
+    ]
   );
 
   const onResumeFromHistory = useCallback(
@@ -332,19 +397,38 @@ export function LaneConsolePane({
             onLaneCreated(ensureResult.lane);
           }
 
-          const laneStartResult = await api.lanes.action(targetLaneId, "start", {
-            prompt: "",
-            model: item.model || undefined,
-            permissionMode: item.permission_mode || undefined,
-            effort: item.effort || undefined,
-            resumeSessionId: item.session_id,
-          });
+          let laneStartResult;
+          try {
+            laneStartResult = await api.lanes.action(targetLaneId, "start", {
+              slot,
+              prompt: "",
+              model: item.model || undefined,
+              permissionMode: item.permission_mode || undefined,
+              effort: item.effort || undefined,
+              resumeSessionId: item.session_id,
+            });
+          } catch (laneErr: unknown) {
+            // The lane's own pane is still busy with a PREVIOUS live session —
+            // that session is still active and reachable, so land on it
+            // instead of failing outright. Killing it (Active runs → Kill) is
+            // what actually frees the lane for this resume. Checked by `.code`
+            // — the server's `.message` is prose, never the literal string
+            // "ERUNLIVE" or "409".
+            if ((laneErr as { code?: string })?.code === "ERUNLIVE") {
+              onLaneIdChange(targetLaneId);
+              await attachToRun(paneRunId(targetLaneId, slot));
+              setError(t("errors.attachedToLiveInstead"));
+              return;
+            }
+            throw laneErr;
+          }
 
-          if (!laneStartResult.lane?.run_id) {
+          const startedId = laneStartResult.run_id ?? laneStartResult.lane?.run_id;
+          if (!startedId) {
             throw new Error("No run_id returned from lane start");
           }
 
-          fetched = await api.run.get(laneStartResult.lane.run_id);
+          fetched = await api.run.get(startedId);
           onLaneIdChange(targetLaneId);
         } else {
           fetched = await api.run.start({
@@ -368,7 +452,7 @@ export function LaneConsolePane({
         setBusy(null);
       }
     },
-    [busy, refreshList, t, lanes, onLaneCreated, onLaneIdChange]
+    [busy, refreshList, t, lanes, slot, onLaneCreated, onLaneIdChange, attachToRun]
   );
 
   const onViewFromHistory = useCallback(
@@ -385,6 +469,28 @@ export function LaneConsolePane({
     setError(null);
   }, []);
 
+  // Frees a lane blocked by a live run nobody wants anymore (see Active
+  // runs' Kill button) — the lane's own `run_id` self-heals to null the next
+  // time it's read (routes/lanes.js's healRunId), so no lane-side call here.
+  const killRun = useCallback(
+    async (id: string) => {
+      setBusy("kill");
+      setError(null);
+      try {
+        await api.run.kill(id);
+        if (handle?.id === id) newRun();
+        refreshList();
+      } catch (err) {
+        setError(
+          t("errors.killFailed", { message: err instanceof Error ? err.message : "unknown" })
+        );
+      } finally {
+        setBusy(null);
+      }
+    },
+    [handle, newRun, refreshList, t]
+  );
+
   if (laneId === null && showLaneSelector) {
     return (
       <div data-testid="pane-empty" className="flex min-h-0 flex-1 flex-col gap-2 p-4">
@@ -426,13 +532,17 @@ export function LaneConsolePane({
         </select>
       )}
 
-      <header className="flex items-start gap-3">
-        <div className="w-9 h-9 rounded-xl bg-accent/15 flex items-center justify-center flex-shrink-0">
-          <Play className="w-4.5 h-4.5 text-accent" />
+      {/* Title, live badge and blurb on ONE line: the blurb is a standing
+          description of the panel, not a message, so it does not earn the
+          second row it used to wrap onto. It drops out entirely below `sm`,
+          where the width would wrap it again. */}
+      <header className="flex items-center gap-2.5">
+        <div className="w-7 h-7 rounded-lg bg-accent/15 flex items-center justify-center flex-shrink-0">
+          <Play className="w-3.5 h-3.5 text-accent" />
         </div>
-        <div className="min-w-0 flex-1">
-          <div className="flex items-center gap-2">
-            <h1 className="text-lg font-semibold text-fg-primary">
+        <div className="flex min-w-0 flex-1 items-center gap-2">
+          <div className="flex shrink-0 items-center gap-2">
+            <h1 className="text-base font-semibold text-fg-primary">
               {t("title", { tool: toolLabel })}
             </h1>
             {wsConnected ? (
@@ -447,24 +557,33 @@ export function LaneConsolePane({
               </span>
             )}
           </div>
-          <p className="text-xs text-fg-muted max-w-3xl">{t("subtitle", { tool: toolLabel })}</p>
+          <p className="hidden min-w-0 truncate text-[11px] text-fg-muted sm:block">
+            {t("subtitle", { tool: toolLabel })}
+          </p>
         </div>
         <ActiveRunsSwitcher
-          activeRuns={activeRuns}
+          activeRuns={laneRuns}
           currentHandleId={handle?.id || null}
           onAttach={attachToRun}
           runHistory={runHistory}
-          externalSessions={externalSessions}
+          externalSessions={laneSessions}
           onResumeFromHistory={onResumeFromHistory}
           onViewFromHistory={onViewFromHistory}
+          onKill={killRun}
           onRefresh={refreshList}
         />
       </header>
 
-      {binaryStatus && !binaryStatus[laneTool]?.found && (
+      {/* Not probed yet (a lane on a tool the page has not probed) is not "missing". */}
+      {binaryStatus?.[laneTool] && !binaryStatus[laneTool].found && (
         <div className="rounded-lg border border-status-danger/40 bg-status-danger/10 px-4 py-3 text-sm text-status-danger flex items-center gap-2">
           <AlertCircle className="w-4 h-4 flex-shrink-0" />
-          <span>{t("binary.missing", { cli: laneTool, tool: toolLabel })}</span>
+          <span>
+            {t("binary.missing", {
+              cli: aiTools.byId(laneTool)?.command ?? laneTool,
+              tool: toolLabel,
+            })}
+          </span>
         </div>
       )}
 
@@ -503,13 +622,22 @@ export function LaneConsolePane({
           onSandboxChange={setSandbox}
           approval={approval}
           onApprovalChange={setApproval}
-          onResumeLast={() => onStartFromSetup({ laneId: laneId ?? 0, cwd, resumeLast: true })}
+          onResumeLast={(bypass) =>
+            onStartFromSetup({ laneId: laneId ?? 0, cwd, resumeLast: true, bypass })
+          }
         />
       ) : (
         <div className="flex-1 min-h-0 flex flex-col">
           <TerminalView
             runId={handle!.id}
             wsBaseUrl={window.location.origin.replace(/^http/, "ws")}
+            // The pane died (double Ctrl+C out of `claude`, `exit`, a crash) —
+            // go straight back to the setup form rather than leaving a dead
+            // terminal the user has to click "New run" out of.
+            onExit={() => {
+              newRun();
+              refreshList();
+            }}
           />
           <button
             onClick={newRun}

client/src/components/run/RunHistory.tsx

@@ -10,18 +10,23 @@
  *   - `RunsModal` — the merged list itself: live in-memory handles from
  *     `activeRuns` deduped against persistent `runHistory`, newest first, with
  *     status / mode chip filters, a free-text search, and the per-row Attach /
- *     Resume / View actions.
+ *     Resume / View / Kill actions.
  *
  * `externalSessions` (active Claude Code sessions this dashboard did NOT spawn —
  * e.g. `claude` started by hand in a terminal tab) are merged in as live rows so
- * "Active runs" counts everything actually running. They carry no tmux session
+ * "Active runs" counts everything actually running in scope. They carry no tmux session
  * the dashboard can attach to, so their only action is Resume, which spawns a
- * fresh tmux-backed `claude --resume <session>` in that cwd.
+ * fresh tmux-backed `claude --resume <session>` in that cwd — Kill is withheld
+ * from them for the same reason.
  *
  * Props only: no API call of its own. The page passes `activeRuns`,
  * `runHistory` and `externalSessions` in and gets attach / resume / view /
- * refresh back out through callbacks; the 2 s refresh ticker the modal runs
- * just calls `onRefresh`.
+ * kill / refresh back out through callbacks; the 2 s refresh ticker the modal
+ * runs just calls `onRefresh`. Kill (two clicks, same confirm convention as
+ * discarding a file in the Changes panel) is what actually frees a lane whose
+ * pane is still busy with a previous session — `LaneConsolePane` needs it
+ * because starting or resuming into a lane already holding a live run answers
+ * 409 ERUNLIVE rather than overwriting a prompt in flight.
  *
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
@@ -39,6 +44,7 @@ import {
   Search,
   RotateCcw,
   Eye,
+  Square,
 } from "lucide-react";
 import type { DashboardRunHistoryItem, RunListResponse, RunStatus } from "../../lib/api";
 import type { Session } from "../../lib/types";
@@ -52,7 +58,7 @@ function StatusPill({
   const colors: Record<string, string> = {
     running: "bg-status-success/10 text-status-success border-status-success/30",
     gone: "bg-surface-3 text-fg-secondary border-border",
-    completed: "bg-sky-500/10 text-sky-300 border-sky-500/30",
+    completed: "bg-sky-500/10 text-sky-700 dark:text-sky-300 border-sky-500/30",
     error: "bg-status-danger/10 text-status-danger border-status-danger/30",
     killed: "bg-surface-3 text-fg-secondary border-border",
     abandoned: "bg-surface-3 text-fg-secondary border-border",
@@ -96,6 +102,7 @@ export function ActiveRunsSwitcher({
   externalSessions = [],
   onResumeFromHistory,
   onViewFromHistory,
+  onKill,
   onRefresh,
 }: {
   activeRuns: RunListResponse | null;
@@ -107,6 +114,10 @@ export function ActiveRunsSwitcher({
   externalSessions?: Session[];
   onResumeFromHistory: (item: DashboardRunHistoryItem) => void;
   onViewFromHistory: (item: DashboardRunHistoryItem) => void;
+  /** Kills the row's tmux session (DELETE /api/run/:id). Live, dashboard-
+   *  spawned rows only — an external session has no tmux session here to
+   *  kill. */
+  onKill: (id: string) => void;
   onRefresh: () => void;
 }) {
   const { t } = useTranslation("run");
@@ -258,6 +269,7 @@ export function ActiveRunsSwitcher({
             setOpen(false);
             onViewFromHistory(item);
           }}
+          onKill={onKill}
           runHistory={historyItems}
           onClose={() => setOpen(false)}
           onRefresh={onRefresh}
@@ -273,6 +285,7 @@ export function RunsModal({
   onAttach,
   onResume,
   onView,
+  onKill,
   runHistory,
   onClose,
   onRefresh,
@@ -282,6 +295,7 @@ export function RunsModal({
   onAttach: (id: string) => void;
   onResume: (item: DashboardRunHistoryItem) => void;
   onView: (item: DashboardRunHistoryItem) => void;
+  onKill: (id: string) => void;
   runHistory: DashboardRunHistoryItem[];
   onClose: () => void;
   onRefresh: () => void;
@@ -446,6 +460,7 @@ export function RunsModal({
                     const h = historyById.get(r.id);
                     if (h) onView(h);
                   }}
+                  onKill={() => onKill(r.id)}
                 />
               );
             })
@@ -512,23 +527,32 @@ function UnifiedRunRowView({
   onAttach,
   onResume,
   onView,
+  onKill,
 }: {
   row: UnifiedRunRow;
   isCurrent: boolean;
   onAttach: () => void;
   onResume: () => void;
   onView: () => void;
+  onKill: () => void;
 }) {
   const { t } = useTranslation("run");
+  // Two clicks before the tmux session actually dies — same convention as
+  // discarding a file's changes in the Changes panel, for the one action
+  // here that cannot be undone.
+  const [confirmKill, setConfirmKill] = useState(false);
   const startedDate = new Date(row.startedAt);
-  const startedLabel = isNaN(startedDate.getTime())
-    ? "-"
-    : startedDate.toLocaleString(undefined, {
-        month: "short",
-        day: "numeric",
-        hour: "2-digit",
-        minute: "2-digit",
-      });
+  // 0 is "unknown", not the epoch — a run whose persisted row is missing has no
+  // start time, and printing "Jan 1, 08:00 AM" for it reads as real data.
+  const startedLabel =
+    !row.startedAt || isNaN(startedDate.getTime())
+      ? "-"
+      : startedDate.toLocaleString(undefined, {
+          month: "short",
+          day: "numeric",
+          hour: "2-digit",
+          minute: "2-digit",
+        });
   // Without mode distinction, offer resume for any finished run with a session.
   // An external session is live but has no attachable tmux session, so Resume
   // (a new tmux-backed `claude --resume` in its cwd) is what it gets instead.
@@ -550,7 +574,7 @@ function UnifiedRunRowView({
         )}
         {row.external && (
           <span
-            className="text-[10px] font-semibold text-amber-300 bg-amber-500/10 border border-amber-500/25 px-1.5 py-0.5 rounded-full"
+            className="text-[10px] font-semibold text-amber-700 dark:text-amber-300 bg-amber-500/10 border border-amber-500/25 px-1.5 py-0.5 rounded-full"
             title={t("runs.externalHint")}
           >
             {t("runs.externalBadge")}
@@ -590,6 +614,32 @@ function UnifiedRunRowView({
               {t("runs.viewLabel", "View")}
             </button>
           )}
+          {row.isLive && !row.external && (
+            <button
+              onClick={() => {
+                if (!confirmKill) {
+                  setConfirmKill(true);
+                  return;
+                }
+                setConfirmKill(false);
+                onKill();
+              }}
+              onBlur={() => setConfirmKill(false)}
+              title={
+                confirmKill
+                  ? t("runs.killConfirm", "Click again to kill this session — cannot be undone")
+                  : t("runs.killLabel", "Kill")
+              }
+              className={`inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-[10.5px] font-medium transition-colors ${
+                confirmKill
+                  ? "border-status-danger/50 bg-status-danger/15 text-status-danger"
+                  : "border-border bg-surface-2 hover:border-status-danger/40 hover:bg-status-danger/10 text-fg-secondary hover:text-status-danger"
+              }`}
+            >
+              <Square className="w-3 h-3" />
+              {confirmKill ? t("runs.killConfirmShort", "Sure?") : t("runs.killLabel", "Kill")}
+            </button>
+          )}
         </span>
       </div>
       {row.promptPreview && (

client/src/components/run/RunSetup.tsx

@@ -36,13 +36,14 @@ import {
   ShieldAlert,
   X,
   FolderOpen,
+  GitBranch,
   Home,
   History as HistoryIcon,
   Search,
   RotateCcw,
   Lock,
 } from "lucide-react";
-import { api, RUN_MODEL_CHOICES, RUN_MODEL_CHOICES_CODEX, RUN_EFFORT_CHOICES } from "../../lib/api";
+import { api, RUN_MODEL_CHOICES, RUN_EFFORT_CHOICES, type ModelChoice } from "../../lib/api";
 import type {
   CwdSuggestion,
   DashboardRunHistoryItem,
@@ -52,45 +53,306 @@ import type {
   RunStartArgs,
   CodexSandbox,
   CodexApproval,
+  CcMdItem,
 } from "../../lib/api";
 import type { Session, LaneTool } from "../../lib/types";
+import { useAiTools } from "../../hooks/useAiTools";
 import { Select } from "../Select";
 
-// Minimal SlashCommand type (from deleted RunConsole)
 export interface SlashCommand {
   name: string;
-  source: "project" | "user" | "plugin" | "builtin";
+  source: "project" | "user" | "builtin";
   description?: string;
 }
 
-// Minimal PromptEditor component (from deleted RunConsole)
+// Commands the CLI answers itself. They are typed into the pane like any
+// other text, so they do run — they are just not files anyone can list.
+const BUILTIN_SLASH_COMMANDS: SlashCommand[] = [
+  "help",
+  "clear",
+  "compact",
+  "config",
+  "model",
+  "memory",
+  "hooks",
+  "cost",
+  "agents",
+  "review",
+  "permissions",
+  "status",
+  "init",
+  "mcp",
+  "plugin",
+  "output-style",
+  "exit",
+].map((name) => ({ name, source: "builtin" }));
+
+const SOURCE_ORDER = { project: 0, user: 1, builtin: 2 } as const;
+const SOURCE_TONE: Record<SlashCommand["source"], string> = {
+  project: "text-status-success border-status-success/40",
+  user: "text-accent border-accent/40",
+  builtin: "text-fg-muted border-border",
+};
+
+/** Tiered match: exact > prefix > word prefix > substring > subsequence >
+ *  description (3+ chars only, so one keystroke drags nothing tangential in). */
+function scoreSlashMatch(name: string, description: string | undefined, q: string): number {
+  if (!q) return 1;
+  const n = name.toLowerCase();
+  if (n === q) return 1000;
+  if (n.startsWith(q)) return 800 - Math.min(n.length, 100);
+  if (n.split(/[-_.:\s]/).some((p) => p.startsWith(q))) return 600 - Math.min(n.length, 100);
+  const idx = n.indexOf(q);
+  if (idx >= 0) return 400 - Math.min(idx, 100);
+  let i = 0;
+  for (let k = 0; k < n.length && i < q.length; k++) if (n[k] === q[i]) i++;
+  if (i === q.length) return 200;
+  if (q.length >= 3 && (description || "").toLowerCase().includes(q)) return 100;
+  return 0;
+}
+
+interface Trigger {
+  kind: "slash" | "file";
+  query: string;
+  /** Where the `/` or `@` token starts, so a pick replaces it up to the cursor. */
+  start: number;
+  cursor: number;
+}
+
+/** The `/…` or `@…` token the cursor is in, if any. A token starts at the
+ *  line start or after whitespace, so `a/b` and `me@x.io` never trigger. */
+function detectTrigger(value: string, cursor: number): Trigger | null {
+  let start = cursor;
+  while (start > 0 && !/\s/.test(value[start - 1] ?? " ")) start--;
+  const tok = value.slice(start, cursor);
+  if (tok.startsWith("/")) return { kind: "slash", query: tok.slice(1), start, cursor };
+  if (tok.startsWith("@")) return { kind: "file", query: tok.slice(1), start, cursor };
+  return null;
+}
+
 interface PromptEditorProps {
   value: string;
   onChange: (s: string) => void;
   onSubmit: () => void;
   placeholder: string;
   rows?: number;
-  slashCommands: SlashCommand[];
+  /** Offer slash commands. Off for codex: these are Claude Code's. */
+  slash: boolean;
+  /** Where `@` looks for files and project commands/skills are read from. */
   fileCwd: string;
 }
 
-function PromptEditor({ value, onChange, onSubmit, placeholder, rows = 5 }: PromptEditorProps) {
+function PromptEditor({
+  value,
+  onChange,
+  onSubmit,
+  placeholder,
+  rows = 5,
+  slash,
+  fileCwd,
+}: PromptEditorProps) {
+  const { t } = useTranslation("run");
+  const taRef = useRef<HTMLTextAreaElement | null>(null);
+  const [trigger, setTrigger] = useState<Trigger | null>(null);
+  const [active, setActive] = useState(0);
+  const [files, setFiles] = useState<string[]>([]);
+  const [commands, setCommands] = useState<SlashCommand[] | null>(null);
+  const [commandsCwd, setCommandsCwd] = useState(fileCwd);
+  if (commandsCwd !== fileCwd) {
+    setCommandsCwd(fileCwd);
+    setCommands(null);
+  }
+  const kind = trigger?.kind === "slash" && !slash ? null : trigger?.kind;
+
+  // Commands and skills are read the first time `/` is typed for this cwd —
+  // two directory walks nobody should pay for on every render of the form.
+  useEffect(() => {
+    if (kind !== "slash" || commands) return;
+    let live = true;
+    const toCmd = (c: CcMdItem): SlashCommand => ({
+      name: c.name,
+      source: c.scope,
+      description: c.frontmatter?.description || c.preview.slice(0, 80),
+    });
+    Promise.all([
+      api.ccConfig.commands(undefined, fileCwd).catch(() => ({ items: [] as CcMdItem[] })),
+      api.ccConfig.skills(undefined, fileCwd).catch(() => ({ items: [] as CcMdItem[] })),
+    ]).then(([c, sk]) => {
+      if (live) setCommands([...c.items, ...sk.items].map(toCmd).concat(BUILTIN_SLASH_COMMANDS));
+    });
+    return () => {
+      live = false;
+    };
+  }, [kind, commands, fileCwd]);
+
+  // Files: debounced, and only the newest query may land.
+  const query = trigger?.query ?? "";
+  useEffect(() => {
+    if (kind !== "file") return;
+    let live = true;
+    const tid = window.setTimeout(() => {
+      api.run
+        .files(fileCwd, query)
+        .then((r) => live && setFiles(r.items))
+        .catch(() => live && setFiles([]));
+    }, 120);
+    return () => {
+      live = false;
+      window.clearTimeout(tid);
+    };
+  }, [kind, query, fileCwd]);
+
+  const slashItems = useMemo(() => {
+    if (kind !== "slash" || !commands) return [];
+    const q = query.toLowerCase();
+    return commands
+      .map((cmd) => ({ cmd, score: scoreSlashMatch(cmd.name, cmd.description, q) }))
+      .filter((x) => x.score > 0)
+      .sort(
+        (a, b) =>
+          b.score - a.score ||
+          SOURCE_ORDER[a.cmd.source] - SOURCE_ORDER[b.cmd.source] ||
+          a.cmd.name.localeCompare(b.cmd.name)
+      )
+      .map((x) => x.cmd);
+  }, [kind, commands, query]);
+  const count = kind === "file" ? files.length : slashItems.length;
+  const current = Math.min(active, Math.max(0, count - 1));
+
+  const pick = (token: string) => {
+    if (!trigger) return;
+    const before = value.slice(0, trigger.start);
+    const after = value.slice(trigger.cursor);
+    const sep = after.startsWith(" ") ? "" : " ";
+    onChange(before + token + sep + after);
+    setTrigger(null);
+    setActive(0);
+    const pos = before.length + token.length + 1;
+    requestAnimationFrame(() => {
+      taRef.current?.focus();
+      taRef.current?.setSelectionRange(pos, pos);
+    });
+  };
+  const pickAt = (i: number) => {
+    if (kind === "file") {
+      const f = files[i];
+      if (f) pick(`@${f}`);
+    } else {
+      const c = slashItems[i];
+      if (c) pick(`/${c.name}`);
+    }
+  };
+
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+    if (kind && count > 0) {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        const step = e.key === "ArrowDown" ? 1 : -1;
+        setActive(Math.min(count - 1, Math.max(0, current + step)));
+        return;
+      }
+      if ((e.key === "Enter" || e.key === "Tab") && !e.shiftKey && !e.nativeEvent.isComposing) {
+        e.preventDefault();
+        pickAt(current);
+        return;
+      }
+    }
+    if (kind && e.key === "Escape") {
+      e.preventDefault();
+      setTrigger(null);
+      return;
+    }
+    // Enter sends (Ctrl/Cmd+Enter still does); Shift+Enter inserts a newline.
+    // isComposing guards IME input (Vietnamese/CJK), where Enter commits the candidate.
+    if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
       e.preventDefault();
       onSubmit();
     }
   };
 
+  const retrack = (ta: HTMLTextAreaElement) => {
+    setTrigger(detectTrigger(ta.value, ta.selectionStart ?? 0));
+  };
+
+  const rowClass = (i: number) =>
+    `w-full text-left px-3 py-1.5 transition-colors ${i === current ? "bg-accent/15" : "hover:bg-surface-3"}`;
+
   return (
-    <textarea
-      value={value}
-      onChange={(e) => onChange(e.target.value)}
-      onKeyDown={handleKeyDown}
-      placeholder={placeholder}
-      rows={rows}
-      className="w-full bg-surface-2 border border-border rounded-md px-3 py-2 text-[11px] font-mono text-fg-primary placeholder:text-fg-muted focus:outline-none focus:border-accent/50 resize-none"
-    />
+    <div className="relative">
+      <textarea
+        ref={taRef}
+        value={value}
+        onChange={(e) => {
+          onChange(e.target.value);
+          retrack(e.target);
+          setActive(0);
+        }}
+        onSelect={(e) => retrack(e.currentTarget)}
+        onBlur={() => setTrigger(null)}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        rows={rows}
+        spellCheck={false}
+        className="w-full bg-surface-2 border border-border rounded-md px-3 py-2 text-[11px] font-mono text-fg-primary placeholder:text-fg-muted focus:outline-none focus:border-accent/50 resize-none"
+      />
+      {kind && (
+        <div
+          role="listbox"
+          data-testid="prompt-autocomplete"
+          className="absolute z-30 left-0 right-0 top-full mt-1 max-h-72 overflow-auto rounded-md border border-border bg-surface-1 py-1 shadow-lg"
+        >
+          <div className="px-3 py-1.5 border-b border-border text-[10px] font-semibold uppercase tracking-wider text-fg-muted">
+            {kind === "slash" ? t("autocomplete.slashHint") : t("autocomplete.fileHint")}
+          </div>
+          {count === 0 ? (
+            <div className="px-3 py-2 text-[11px] text-fg-muted">
+              {kind === "slash" && !commands ? "…" : t("autocomplete.noMatches")}
+            </div>
+          ) : kind === "slash" ? (
+            slashItems.map((c, i) => (
+              <button
+                key={`${c.source}:${c.name}`}
+                type="button"
+                role="option"
+                aria-selected={i === current}
+                // Keep focus in the textarea, or its blur closes the list first.
+                onMouseDown={(e) => e.preventDefault()}
+                onClick={() => pickAt(i)}
+                onMouseEnter={() => setActive(i)}
+                className={rowClass(i)}
+              >
+                <div className="flex items-center gap-2">
+                  <span className="font-mono text-[12px] text-fg-primary">/{c.name}</span>
+                  <span
+                    className={`rounded border px-1.5 py-0.5 font-mono text-[9px] ${SOURCE_TONE[c.source]}`}
+                  >
+                    {c.source}
+                  </span>
+                </div>
+                {c.description && (
+                  <div className="mt-0.5 truncate text-[10.5px] text-fg-muted">{c.description}</div>
+                )}
+              </button>
+            ))
+          ) : (
+            files.map((f, i) => (
+              <button
+                key={f}
+                type="button"
+                role="option"
+                aria-selected={i === current}
+                onMouseDown={(e) => e.preventDefault()}
+                onClick={() => pickAt(i)}
+                onMouseEnter={() => setActive(i)}
+                className={`${rowClass(i)} truncate font-mono text-[11px] text-fg-secondary`}
+              >
+                {f}
+              </button>
+            ))
+          )}
+        </div>
+      )}
+    </div>
   );
 }
 
@@ -119,7 +381,6 @@ interface RunSetupProps {
    *  sessions. Undefined when no lane is selected (the picker then lists
    *  everything, same as before lanes existed). */
   laneCwd?: string;
-  slashCommands?: SlashCommand[];
   runHistory: DashboardRunHistoryItem[];
   onResumeFromHistory: (item: DashboardRunHistoryItem) => void;
   /** The selected lane's CLI. Decides which advanced fields render. */
@@ -128,9 +389,10 @@ interface RunSetupProps {
   onSandboxChange: (s: CodexSandbox) => void;
   approval: CodexApproval;
   onApprovalChange: (a: CodexApproval) => void;
-  /** Codex lanes resume with `--last`: the sessions table holds Claude
+  /** Every non-Claude lane resumes its tool's LAST session (`codex resume
+   *  --last`, a catalog tool's `resume` args): the sessions table holds Claude
    *  sessions only, so there is nothing for the picker to list. */
-  onResumeLast: () => void;
+  onResumeLast: (bypass?: boolean) => void;
 }
 
 export function RunSetup(props: RunSetupProps) {
@@ -138,6 +400,17 @@ export function RunSetup(props: RunSetupProps) {
   const atCap = false; // TODO: re-add when concurrency info is available
   const isResume = !!props.resumeSession;
   const [resumePicked, setResumePicked] = useState(isResume);
+  const aiTools = useAiTools();
+  const entry = aiTools.byId(props.tool);
+  // Claude and Codex keep their hand-written fields; every other catalog tool
+  // gets the plain form — cwd, prompt, resume and bypass when it has them.
+  const catalogTool = props.tool !== "claude" && props.tool !== "codex";
+  const canResume = !catalogTool || !!entry?.resume;
+  // Per run, never remembered: the form starts unticked every time it mounts.
+  const [bypass, setBypass] = useState(false);
+  const canBypass = props.tool !== "claude" && !!entry?.bypass;
+  // Claude and Codex always take a model; a catalog tool only when its file names the flag.
+  const hasModel = !catalogTool || !!entry?.modelFlag;
   // Keep "resume picked" in sync with the parent. Parent set a resume session
   // (e.g. user clicked Resume in the runs modal) - flip the radio so the picker
   // is shown and the selection is visible.
@@ -147,27 +420,112 @@ export function RunSetup(props: RunSetupProps) {
 
   return (
     <div className="rounded-xl border border-border bg-surface-1">
-      {/* Fresh vs resume source picker */}
-      <div className="flex flex-wrap items-center gap-x-3 gap-y-1.5 border-b border-border px-3 py-2 text-[11.5px]">
-        <div className="flex items-center rounded-md border border-border bg-surface-2 p-0.5">
-          <Seg
-            active={!resumePicked}
-            label={t("resume.freshOption")}
-            title={t("resume.freshHint")}
-            onClick={() => {
-              setResumePicked(false);
-              props.onResumeSessionChange(null);
-            }}
-          />
-          <Seg
-            active={resumePicked}
-            label={t("resume.resumeOption")}
-            title={t("resume.resumeHint")}
-            onClick={() => setResumePicked(true)}
-          />
+      {/* Run settings and the fresh-vs-resume source picker share one row:
+          settings left, source right. They used to be two rows with a divider
+          between them, which spent a band of height on four labelled selects
+          that are each one line tall. The resume picker below is the only part
+          that still gets a row of its own, and only while resume is chosen. */}
+      <div className="flex flex-wrap items-end gap-3 border-b border-border px-4 py-3">
+        <div className="grid min-w-0 flex-1 grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
+          <Field label={t("fields.cwd")}>
+            {isResume && props.resumeSession ? (
+              <div className="bg-surface-2 border border-border rounded-md px-3 py-1.5 text-[11px] font-mono text-fg-secondary flex items-center gap-2">
+                <Lock className="w-3 h-3 text-fg-muted flex-shrink-0" />
+                <span className="truncate">{props.resumeSession.cwd}</span>
+              </div>
+            ) : (
+              <div title={t("fields.cwdHint")}>
+                <CwdAutocomplete
+                  value={props.cwd}
+                  onChange={props.onCwdChange}
+                  suggestions={props.cwdSuggestions}
+                />
+              </div>
+            )}
+          </Field>
+          {/* A catalog tool takes no permission or effort flag, and a model only when it declares one. */}
+          {hasModel && (
+            <Field label={t("fields.model")}>
+              <ModelPicker value={props.model} onChange={props.onModelChange} tool={props.tool} />
+            </Field>
+          )}
+          {catalogTool ? null : props.tool === "codex" ? (
+            <>
+              <Field label={t("fields.sandbox")}>
+                <Select<CodexSandbox>
+                  value={props.sandbox}
+                  onChange={props.onSandboxChange}
+                  options={[
+                    { value: "read-only", label: t("fields.sandboxReadOnly") },
+                    { value: "workspace-write", label: t("fields.sandboxWorkspaceWrite") },
+                    { value: "danger-full-access", label: t("fields.sandboxFullAccess") },
+                  ]}
+                />
+              </Field>
+              <Field label={t("fields.approval")}>
+                <Select<CodexApproval>
+                  value={props.approval}
+                  onChange={props.onApprovalChange}
+                  options={[
+                    { value: "on-request", label: t("fields.approvalOnRequest") },
+                    { value: "never", label: t("fields.approvalNever") },
+                  ]}
+                />
+              </Field>
+            </>
+          ) : (
+            <Field label={t("fields.permissionMode")}>
+              <Select<PermissionMode>
+                value={props.permissionMode}
+                onChange={props.onPermissionModeChange}
+                options={[
+                  { value: "auto", label: t("fields.permissionAuto") },
+                  { value: "acceptEdits", label: t("fields.permissionAcceptEdits") },
+                  { value: "default", label: t("fields.permissionDefault") },
+                  { value: "plan", label: t("fields.permissionPlan") },
+                  { value: "bypassPermissions", label: t("fields.permissionBypass") },
+                ]}
+              />
+            </Field>
+          )}
+          {!catalogTool && (
+            <Field label={t("fields.effort")}>
+              <Select<EffortLevel>
+                value={props.effort}
+                onChange={props.onEffortChange}
+                options={RUN_EFFORT_CHOICES.map((c) => ({
+                  value: c.id,
+                  label: c.label,
+                  hint: c.hint,
+                }))}
+              />
+            </Field>
+          )}
         </div>
-        {resumePicked && (
-          <div className="min-w-0 flex-1">
+        {canResume && (
+          <div className="flex shrink-0 items-center rounded-md border border-border bg-surface-2 p-0.5 text-[11.5px]">
+            <Seg
+              active={!resumePicked}
+              label={t("resume.freshOption")}
+              title={t("resume.freshHint")}
+              onClick={() => {
+                setResumePicked(false);
+                props.onResumeSessionChange(null);
+              }}
+            />
+            <Seg
+              active={resumePicked}
+              label={t("resume.resumeOption")}
+              title={t("resume.resumeHint")}
+              onClick={() => setResumePicked(true)}
+            />
+          </div>
+        )}
+      </div>
+
+      {resumePicked && (
+        <div className="border-b border-border px-4 py-2 text-[11.5px]">
+          <div className="min-w-0">
             {props.tool === "claude" ? (
               <SessionPicker
                 selected={props.resumeSession}
@@ -176,7 +534,8 @@ export function RunSetup(props: RunSetupProps) {
                   // Pass the picked session explicitly: the parent's state
                   // update has not landed yet on this tick, so reading
                   // props.resumeSession here would resume nothing.
-                  if (s && !props.busy) handleStart(props, s);
+                  if (s && !props.busy)
+                    handleStart(props, s, bypass, hasModel, entry?.defaultModel);
                 }}
                 // Fall back to the typed cwd when no lane is selected — otherwise
                 // an unfiltered picker lists every session from every repo.
@@ -184,7 +543,7 @@ export function RunSetup(props: RunSetupProps) {
               />
             ) : (
               <button
-                onClick={() => props.onResumeLast()}
+                onClick={() => props.onResumeLast(canBypass && bypass ? true : undefined)}
                 disabled={props.busy}
                 className="px-3 py-1.5 text-[11px] rounded-md bg-surface-2 border border-border hover:border-accent/50 text-fg-primary hover:text-accent transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
               >
@@ -192,8 +551,8 @@ export function RunSetup(props: RunSetupProps) {
               </button>
             )}
           </div>
-        )}
-      </div>
+        </div>
+      )}
 
       {/* Prompt */}
       <div className="px-4 py-3 border-b border-border">
@@ -203,10 +562,12 @@ export function RunSetup(props: RunSetupProps) {
         <PromptEditor
           value={props.prompt}
           onChange={props.onPromptChange}
-          onSubmit={() => handleStart(props)}
-          placeholder={t("fields.promptPlaceholderTerminal")}
+          onSubmit={() =>
+            handleStart(props, undefined, canBypass && bypass, hasModel, entry?.defaultModel)
+          }
+          placeholder={t("fields.promptPlaceholderTerminal", { tool: aiTools.label(props.tool) })}
           rows={5}
-          slashCommands={props.slashCommands ?? []}
+          slash={props.tool === "claude"}
           fileCwd={props.resumeSession?.cwd || props.cwd}
         />
         <div className="mt-1 text-[10px] text-fg-muted">
@@ -214,79 +575,27 @@ export function RunSetup(props: RunSetupProps) {
         </div>
       </div>
 
-      {/* Advanced fields */}
-      <div className="grid grid-cols-1 gap-3 px-4 py-3 sm:grid-cols-2 lg:grid-cols-4">
-        <Field label={t("fields.cwd")}>
-          {isResume && props.resumeSession ? (
-            <div className="bg-surface-2 border border-border rounded-md px-3 py-1.5 text-[11px] font-mono text-fg-secondary flex items-center gap-2">
-              <Lock className="w-3 h-3 text-fg-muted flex-shrink-0" />
-              <span className="truncate">{props.resumeSession.cwd}</span>
-            </div>
-          ) : (
-            <div title={t("fields.cwdHint")}>
-              <CwdAutocomplete
-                value={props.cwd}
-                onChange={props.onCwdChange}
-                suggestions={props.cwdSuggestions}
-              />
+      {canBypass && (
+        <div className="px-4 pb-3">
+          <label className="inline-flex items-center gap-2 text-[11.5px] text-status-danger cursor-pointer">
+            <input
+              type="checkbox"
+              checked={bypass}
+              onChange={(e) => setBypass(e.target.checked)}
+              className="accent-[rgb(var(--status-danger))]"
+            />
+            {t("fields.bypass")}
+          </label>
+          {bypass && (
+            <div className="mt-2 rounded-md border border-status-danger/40 bg-status-danger/10 px-3 py-2 text-[11px] text-status-danger flex items-start gap-2">
+              <ShieldAlert className="w-3.5 h-3.5 flex-shrink-0 mt-0.5" />
+              <span>{t("hint.bypassWarning", { tool: aiTools.label(props.tool) })}</span>
             </div>
           )}
-        </Field>
-        <Field label={t("fields.model")}>
-          <ModelPicker value={props.model} onChange={props.onModelChange} tool={props.tool} />
-        </Field>
-        {props.tool === "codex" ? (
-          <>
-            <Field label={t("fields.sandbox")}>
-              <Select<CodexSandbox>
-                value={props.sandbox}
-                onChange={props.onSandboxChange}
-                options={[
-                  { value: "read-only", label: t("fields.sandboxReadOnly") },
-                  { value: "workspace-write", label: t("fields.sandboxWorkspaceWrite") },
-                  { value: "danger-full-access", label: t("fields.sandboxFullAccess") },
-                ]}
-              />
-            </Field>
-            <Field label={t("fields.approval")}>
-              <Select<CodexApproval>
-                value={props.approval}
-                onChange={props.onApprovalChange}
-                options={[
-                  { value: "on-request", label: t("fields.approvalOnRequest") },
-                  { value: "never", label: t("fields.approvalNever") },
-                ]}
-              />
-            </Field>
-          </>
-        ) : (
-          <Field label={t("fields.permissionMode")}>
-            <Select<PermissionMode>
-              value={props.permissionMode}
-              onChange={props.onPermissionModeChange}
-              options={[
-                { value: "acceptEdits", label: t("fields.permissionAcceptEdits") },
-                { value: "default", label: t("fields.permissionDefault") },
-                { value: "plan", label: t("fields.permissionPlan") },
-                { value: "bypassPermissions", label: t("fields.permissionBypass") },
-              ]}
-            />
-          </Field>
-        )}
-        <Field label={t("fields.effort")}>
-          <Select<EffortLevel>
-            value={props.effort}
-            onChange={props.onEffortChange}
-            options={RUN_EFFORT_CHOICES.map((c) => ({
-              value: c.id,
-              label: c.label,
-              hint: c.hint,
-            }))}
-          />
-        </Field>
-      </div>
+        </div>
+      )}
 
-      {props.tool === "codex" && props.sandbox === "danger-full-access" && (
+      {props.tool === "codex" && !bypass && props.sandbox === "danger-full-access" && (
         <div className="mx-4 mb-3 rounded-md border border-status-danger/40 bg-status-danger/10 px-3 py-2 text-[11px] text-status-danger flex items-start gap-2">
           <ShieldAlert className="w-3.5 h-3.5 flex-shrink-0 mt-0.5" />
           <span>{t("hint.sandboxWarning")}</span>
@@ -311,7 +620,9 @@ export function RunSetup(props: RunSetupProps) {
           ) : null}
         </div>
         <button
-          onClick={() => handleStart(props)}
+          onClick={() =>
+            handleStart(props, undefined, canBypass && bypass, hasModel, entry?.defaultModel)
+          }
           disabled={
             !props.binaryFound ||
             // A resume needs no prompt — the session it continues is the input.
@@ -340,22 +651,38 @@ export function RunSetup(props: RunSetupProps) {
 
 /** `session` overrides `props.resumeSession` for the auto-start fired straight
  *  out of the picker, before the parent's state has caught up. */
-function handleStart(props: RunSetupProps, session?: Session) {
+function handleStart(
+  props: RunSetupProps,
+  session?: Session,
+  bypass?: boolean,
+  hasModel?: boolean,
+  defaultModel?: string | null
+) {
   const resume = session ?? props.resumeSession;
   const codex = props.tool === "codex";
+  // Any catalog tool: none of Claude's or Codex's own flags apply.
+  const other = props.tool !== "claude" && !codex;
   props.onStart({
     laneId: props.laneId,
     // A resume is pinned to its own session's folder — that's what the locked
     // cwd field shows, so it's what gets sent.
     cwd: resume?.cwd || props.cwd || undefined,
-    model: props.model || undefined,
-    permissionMode: codex ? undefined : props.permissionMode || undefined,
+    // A resume keeps the session's own model: the tool's default the form
+    // starts on is not a pick, so only a model the user changed is sent.
+    model:
+      !(other ? hasModel : true) || (resume && props.model === (defaultModel ?? ""))
+        ? undefined
+        : props.model || undefined,
+    permissionMode: codex || other ? undefined : props.permissionMode || undefined,
     sandbox: codex ? props.sandbox : undefined,
     approval: codex ? props.approval : undefined,
-    effort: props.effort || undefined,
-    resumeSessionId: codex ? undefined : resume?.id || undefined,
-    resumeLast: codex && !resume ? true : undefined,
-    initialPrompt: props.prompt || undefined,
+    effort: other ? undefined : props.effort || undefined,
+    resumeSessionId: codex || other ? undefined : resume?.id || undefined,
+    // A resume continues a session that already has its own history — sending
+    // whatever is sitting in the prompt box would fire an extra turn nobody
+    // asked for, so a resume carries no prompt at all.
+    initialPrompt: resume ? undefined : props.prompt || undefined,
+    bypass: bypass || undefined,
   });
 }
 
@@ -440,7 +767,10 @@ export function CwdAutocomplete({
   // Group suggestions by kind preserving fixed order — home first, matching
   // the neutral default the page pre-fills (issue #202).
   const groups = useMemo(() => {
-    const order: CwdSuggestion["kind"][] = ["home", "dashboard", "recent"];
+    // "repo" (source repos lanes were cut from) sits above the recents: on the
+    // Add-lane form it is the group the field is actually asking for, and on
+    // the Run form it is a short, deliberate list rather than history.
+    const order: CwdSuggestion["kind"][] = ["home", "dashboard", "repo", "recent"];
     return order
       .map((kind) => ({ kind, items: filtered.filter((s) => s.kind === kind) }))
       .filter((g) => g.items.length > 0);
@@ -516,6 +846,8 @@ export function CwdAutocomplete({
                     <FolderOpen className="w-3 h-3" />
                   ) : g.kind === "home" ? (
                     <Home className="w-3 h-3" />
+                  ) : g.kind === "repo" ? (
+                    <GitBranch className="w-3 h-3" />
                   ) : (
                     <HistoryIcon className="w-3 h-3" />
                   )}
@@ -579,7 +911,10 @@ function SessionPicker({
     if (sessions !== null && fetchedForCwd.current === cwd) return;
     fetchedForCwd.current = cwd;
     api.sessions
-      .list({ sort_by: "started_at", sort_desc: true, limit: 100, cwd })
+      // `claude --resume` can only resume a Claude session; a Codex lane at the
+      // same directory records its own sessions there too. Filtered by the
+      // server, before its limit.
+      .list({ sort_by: "started_at", sort_desc: true, limit: 100, cwd, tool: "claude" })
       .then((r) => setSessions(r.sessions))
       .catch(() => setSessions([]));
   }, [open, cwd, sessions]);
@@ -674,7 +1009,7 @@ function SessionPicker({
                         s.status === "active"
                           ? "bg-status-success/10 text-status-success border-status-success/30"
                           : s.status === "completed"
-                            ? "bg-sky-500/10 text-sky-300 border-sky-500/30"
+                            ? "bg-sky-500/10 text-sky-700 dark:text-sky-300 border-sky-500/30"
                             : s.status === "error"
                               ? "bg-status-danger/10 text-status-danger border-status-danger/30"
                               : "bg-surface-3 text-fg-secondary border-border"
@@ -712,7 +1047,7 @@ function SessionPicker({
 // the "inherit from settings" choice, so use a non-empty marker.
 const MODEL_CUSTOM = "__custom__";
 
-function ModelPicker({
+export function ModelPicker({
   value,
   onChange,
   tool,
@@ -722,11 +1057,31 @@ function ModelPicker({
   tool: LaneTool;
 }) {
   const { t } = useTranslation("run");
-  const choices = tool === "codex" ? RUN_MODEL_CHOICES_CODEX : RUN_MODEL_CHOICES;
-  // "Custom" is selected when the value isn't one of our curated IDs.
+  // The tool's own list (Codex's models cache, Claude's aliases named after
+  // the newest version, a catalog tool's vendor rows); Claude's static
+  // aliases only when the server cannot answer.
+  const [fetched, setFetched] = useState<ModelChoice[] | null>(null);
+  useEffect(() => {
+    let live = true;
+    setFetched(null);
+    Promise.resolve()
+      .then(() => api.aiTools.models(tool))
+      .then((r) => live && setFetched(r.models))
+      .catch(() => live && setFetched([]));
+    return () => {
+      live = false;
+    };
+  }, [tool]);
+  const choices = useMemo<ModelChoice[]>(() => {
+    const inherit = { id: "", label: "" };
+    if (fetched?.length) return [inherit, ...fetched];
+    return tool === "claude" ? RUN_MODEL_CHOICES : [inherit];
+  }, [fetched, tool]);
+  // "Custom" is selected when the value isn't one of the listed IDs — judged
+  // only once the list has arrived, so a listed default never flashes as custom.
   const knownIds = useMemo(() => choices.map((c) => c.id), [choices]);
-  const isCustom = value !== "" && !knownIds.includes(value);
-  const [showCustom, setShowCustom] = useState(isCustom);
+  const isCustom = fetched !== null && value !== "" && !knownIds.includes(value);
+  const [showCustom, setShowCustom] = useState(false);
 
   // Reuse the shared Select so the Model dropdown renders identically to the
   // Permission Mode and Effort dropdowns (Tailwind + lucide popover) instead of

client/src/components/run/TerminalView.tsx

@@ -9,21 +9,86 @@
  * The socket auto-reconnects: a server restart kills the attach PTY, and
  * without a retry the pane silently freezes on its last painted frame — it
  * still LOOKS live, but no keystroke or mouse report reaches tmux again.
+ * Always painted dark, in the palette of the user's chosen DARK theme
+ * (`lib/terminalTheme.ts`), recoloured live without re-attaching.
+ * An image dropped on it is saved on the server (`POST /api/run/drop-image`)
+ * and its PATH pasted into the pane — what a local terminal does on a drop,
+ * and how `claude` attaches an image.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
-import { useEffect, useRef } from "react";
+import { useEffect, useMemo, useRef, useState, type DragEvent } from "react";
+import { useTranslation } from "react-i18next";
 import { Terminal } from "@xterm/xterm";
 import { FitAddon } from "@xterm/addon-fit";
 import { CanvasAddon } from "@xterm/addon-canvas";
 import "@xterm/xterm/css/xterm.css";
+import { useTheme } from "../../hooks/useTheme";
+import { terminalThemeFor } from "../../lib/terminalTheme";
+import { api } from "../../lib/api";
+
+type DropState = "hint" | "uploading" | "failed" | "imagesOnly";
+const hasFiles = (e: DragEvent) => Array.from(e.dataTransfer.types).includes("Files");
 
 interface TerminalViewProps {
   runId: string;
   wsBaseUrl: string;
+  /** The pane's process ended (a double Ctrl+C, `exit`, a `claude` that quit).
+   *  There is nothing left to attach to, so the owner swaps this terminal back
+   *  out for its run setup form instead of leaving a dead pane on screen. */
+  onExit?: () => void;
 }
 
-export function TerminalView({ runId, wsBaseUrl }: TerminalViewProps) {
+export function TerminalView({ runId, wsBaseUrl, onExit }: TerminalViewProps) {
   const containerRef = useRef<HTMLDivElement>(null);
+  // Read through a ref: an inline `onExit` from the parent changes identity on
+  // every render, and as an effect dep it would tear the terminal down and
+  // re-attach on each one.
+  const onExitRef = useRef(onExit);
+  onExitRef.current = onExit;
+  // Always the DARK theme's palette, even in light mode: Claude Code's TUI
+  // assumes a dark background. Read through a ref at construction so a theme
+  // change never re-runs the attach effect; the effect below recolours live.
+  const darkTheme = useTheme().themeFor.dark;
+  const palette = useMemo(() => terminalThemeFor(darkTheme), [darkTheme]);
+  const paletteRef = useRef(palette);
+  paletteRef.current = palette;
+  const termRef = useRef<Terminal | null>(null);
+  const { t } = useTranslation("run");
+  const [drop, setDrop] = useState<DropState | null>(null);
+  // dragenter/dragleave fire for every child crossed, so count them: the hint
+  // only goes away when the pointer leaves the terminal itself.
+  const dragDepth = useRef(0);
+  const flashTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const flash = (state: DropState) => {
+    setDrop(state);
+    if (flashTimer.current) clearTimeout(flashTimer.current);
+    flashTimer.current = setTimeout(() => setDrop(null), 2500);
+  };
+  useEffect(
+    () => () => {
+      if (flashTimer.current) clearTimeout(flashTimer.current);
+    },
+    []
+  );
+
+  const onDrop = async (e: DragEvent) => {
+    if (!hasFiles(e)) return; // dragged text keeps xterm's own handling
+    e.preventDefault();
+    dragDepth.current = 0;
+    const images = Array.from(e.dataTransfer.files).filter((f) => f.type.startsWith("image/"));
+    if (images.length === 0) return flash("imagesOnly");
+    setDrop("uploading");
+    try {
+      const saved = await Promise.all(images.map((f) => api.run.dropImage(f)));
+      // paste(), not a raw send: it honours bracketed-paste mode, so claude
+      // sees one pasted path rather than typed keystrokes.
+      termRef.current?.paste(saved.map((r) => r.path).join(" ") + " ");
+      termRef.current?.focus();
+      setDrop(null);
+    } catch {
+      flash("failed");
+    }
+  };
 
   useEffect(() => {
     // An explicit fontFamily pins every glyph to one bundled webfont. Left
@@ -35,12 +100,21 @@ export function TerminalView({ runId, wsBaseUrl }: TerminalViewProps) {
     // *neighbours*, not from overflowing its own cell). JetBrains Mono is
     // already bundled for the rest of the UI; main.tsx additionally imports
     // its `vietnamese` subset so this covers the diacritics too.
+    // NO `convertEol`. It rewrites every bare LF as CR+LF, i.e. it forces the
+    // cursor to column 0 on a line feed — and xterm's own docs say not to use
+    // it on a PTY, where termios already does that translation for the streams
+    // that want it. tmux scrolls a pane by emitting a bare LF and then keeps
+    // drawing at the column it was on; with this on, that draw landed at
+    // column 0 instead, stamping the first characters of the line into the
+    // left margin of the rows below. That is the torn left edge of issue #33,
+    // and why it only showed up once content scrolled.
     const term = new Terminal({
-      convertEol: true,
       fontSize: 13,
       cursorBlink: true,
       fontFamily: '"JetBrains Mono", monospace',
+      theme: paletteRef.current,
     });
+    termRef.current = term;
     const fit = new FitAddon();
     term.loadAddon(fit);
     if (containerRef.current) term.open(containerRef.current);
@@ -63,6 +137,10 @@ export function TerminalView({ runId, wsBaseUrl }: TerminalViewProps) {
     }
 
     fit.fit();
+    // Take the keyboard as soon as the pane is on screen: the terminal IS the
+    // page here, and having to click it first meant the first thing typed went
+    // nowhere. A click elsewhere still moves focus away, as in any editor.
+    term.focus();
 
     // When the pane's program has NOT enabled wheel reporting, xterm falls back
     // to converting each wheel notch on an alt-screen buffer into a cursor-key
@@ -116,7 +194,16 @@ export function TerminalView({ runId, wsBaseUrl }: TerminalViewProps) {
     let disposed = false;
 
     const connect = () => {
-      const sock = new WebSocket(`${wsBaseUrl}/ws-pty/${encodeURIComponent(runId)}`);
+      // The attach itself carries this terminal's size. tmux sizes the window
+      // to the client that attached most recently, so spawning the attach at a
+      // default 80×24 and correcting it from the first `resize` message a beat
+      // later makes the pane's program (claude) redraw its whole UI at 80
+      // columns first — and everything painted at that width stays in the
+      // scrollback as torn fragments along the left margin, visible as soon as
+      // you scroll back (issue #33). Happens on every attach: page load,
+      // lane switch, and each 1.5 s reconnect.
+      const size = term.cols > 1 && term.rows > 1 ? `?cols=${term.cols}&rows=${term.rows}` : "";
+      const sock = new WebSocket(`${wsBaseUrl}/ws-pty/${encodeURIComponent(runId)}${size}`);
       ws = sock;
       // Server sends PTY bytes as binary frames — default binaryType ("blob")
       // would hand onmessage a Blob that the string checks below never match,
@@ -143,6 +230,7 @@ export function TerminalView({ runId, wsBaseUrl }: TerminalViewProps) {
               if (msg.type === "exit") {
                 ended = true;
                 term.write(`\r\n[session ended, exit code ${msg.code}]\r\n`);
+                onExitRef.current?.();
               }
               return;
             } catch {
@@ -195,8 +283,54 @@ export function TerminalView({ runId, wsBaseUrl }: TerminalViewProps) {
       ws?.close();
       canvas?.dispose();
       term.dispose();
+      termRef.current = null;
     };
   }, [runId, wsBaseUrl]);
 
-  return <div ref={containerRef} className="h-full w-full" data-testid="terminal-view" />;
+  useEffect(() => {
+    if (termRef.current) termRef.current.options.theme = palette;
+  }, [palette]);
+
+  return (
+    <div
+      className="relative h-full w-full"
+      onDragEnter={(e) => {
+        if (!hasFiles(e)) return;
+        e.preventDefault();
+        dragDepth.current += 1;
+        setDrop("hint");
+      }}
+      onDragOver={(e) => {
+        if (!hasFiles(e)) return;
+        e.preventDefault(); // without it the browser refuses the drop
+        e.dataTransfer.dropEffect = "copy";
+      }}
+      onDragLeave={(e) => {
+        if (!hasFiles(e)) return;
+        dragDepth.current = Math.max(0, dragDepth.current - 1);
+        if (dragDepth.current === 0) setDrop((d) => (d === "hint" ? null : d));
+      }}
+      onDrop={(e) => void onDrop(e)}
+    >
+      <div
+        ref={containerRef}
+        className="h-full w-full"
+        style={{ backgroundColor: palette.background }}
+        data-testid="terminal-view"
+      />
+      {drop && (
+        // pointer-events-none: the drop must land on the terminal, not on this.
+        <div
+          data-testid="terminal-drop"
+          className={`pointer-events-none absolute inset-2 flex items-center justify-center rounded-lg border-2 border-dashed bg-black/50 text-sm font-medium ${
+            drop === "failed" || drop === "imagesOnly"
+              ? "border-red-400 text-red-300"
+              : "border-sky-400 text-sky-200"
+          }`}
+        >
+          {t(`drop.${drop}`)}
+        </div>
+      )}
+    </div>
+  );
 }

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

@@ -6,13 +6,19 @@
 
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
 import { LaneConsolePane } from "../LaneConsolePane";
 import { api } from "../../../lib/api";
 import type { Lane } from "../../../lib/types";
+import { __resetAiTools } from "../../../hooks/useAiTools";
 
 vi.mock("../TerminalView", () => ({
-  TerminalView: ({ runId }: { runId: string }) => (
-    <div data-testid="terminal-view" data-run-id={runId} />
+  // The exit button stands in for the server's `exit` frame (a double Ctrl+C
+  // out of claude), which the real TerminalView reports through `onExit`.
+  TerminalView: ({ runId, onExit }: { runId: string; onExit?: () => void }) => (
+    <div data-testid="terminal-view" data-run-id={runId}>
+      <button data-testid="fake-pane-exit" onClick={() => onExit?.()} />
+    </div>
   ),
 }));
 
@@ -23,6 +29,10 @@ vi.mock("../../../lib/api", () => ({
       action: vi.fn(),
       list: vi.fn(),
     },
+    aiTools: {
+      list: vi.fn().mockResolvedValue({ default: "claude", tools: [] }),
+      models: vi.fn().mockResolvedValue({ flag: true, models: [], defaultModel: null }),
+    },
     run: {
       list: vi.fn().mockResolvedValue({ items: [] }),
       history: vi.fn().mockResolvedValue({ items: [] }),
@@ -31,12 +41,12 @@ vi.mock("../../../lib/api", () => ({
     },
   },
   RUN_MODEL_CHOICES: [],
-  RUN_MODEL_CHOICES_CODEX: [],
   RUN_EFFORT_CHOICES: [],
 }));
 
 const LANE: Lane = {
   id: 1,
+  router_profile: null,
   title: "demo",
   cwd: "/workspace/a",
   branch: null,
@@ -78,6 +88,7 @@ function baseProps() {
     binaryStatus: {
       claude: { found: true, path: "/usr/local/bin/claude" },
       codex: { found: true, path: "/usr/local/bin/codex" },
+      antigravity: { found: true, path: "/usr/local/bin/agy" },
     },
     cwdSuggestions: [],
     activeRuns: { items: [] },
@@ -129,6 +140,60 @@ describe("LaneConsolePane", () => {
     );
   });
 
+  it("starts a run on the tool's default model from AI Tools settings", async () => {
+    __resetAiTools();
+    (api.aiTools.list as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+      default: "claude",
+      tools: [{ id: "claude", label: "Claude Code", defaultModel: "sonnet", modelFlag: true }],
+    });
+    (api.lanes.action as ReturnType<typeof vi.fn>).mockResolvedValue({ lane: LANE });
+    render(<LaneConsolePane {...baseProps()} />);
+    fireEvent.change(screen.getByPlaceholderText(/type to search/i), {
+      target: { value: "/workspace/a" },
+    });
+    fireEvent.change(screen.getByPlaceholderText(/ask claude/i), { target: { value: "go" } });
+    await waitFor(() => expect(api.aiTools.list).toHaveBeenCalled());
+    await new Promise((r) => setTimeout(r, 0));
+    fireEvent.click(screen.getByRole("button", { name: /^run$/i }));
+    await waitFor(() =>
+      expect(api.lanes.action).toHaveBeenCalledWith(
+        1,
+        "start",
+        expect.objectContaining({ model: "sonnet" })
+      )
+    );
+    __resetAiTools();
+  });
+
+  it("returns to the setup form when the pane exits, without a New run click", async () => {
+    (api.lanes.action as ReturnType<typeof vi.fn>).mockResolvedValue({
+      lane: { ...LANE, run_id: "run-1" },
+    });
+    (api.run.get as ReturnType<typeof vi.fn>).mockResolvedValue({
+      id: "run-1",
+      laneId: 1,
+      status: "running",
+      cwd: "/workspace/a",
+      model: null,
+      permissionMode: null,
+      effort: null,
+      resumeSessionId: null,
+      sessionId: null,
+      startedAt: null,
+      promptPreview: null,
+    });
+
+    render(<LaneConsolePane {...baseProps()} />);
+    fireEvent.change(screen.getByPlaceholderText(/ask claude/i), { target: { value: "go" } });
+    fireEvent.click(screen.getByRole("button", { name: /^run$/i }));
+    await screen.findByTestId("terminal-view");
+
+    fireEvent.click(screen.getByTestId("fake-pane-exit"));
+
+    await waitFor(() => expect(screen.queryByTestId("terminal-view")).not.toBeInTheDocument());
+    expect(screen.getByPlaceholderText(/ask claude/i)).toBeInTheDocument();
+  });
+
   it("swaps to the newly selected lane's own terminal instead of keeping the old one", async () => {
     const LANE2: Lane = { ...LANE, id: 2, title: "other", cwd: "/workspace/b" };
     const run = (id: string, laneId: number) => ({
@@ -194,40 +259,11 @@ describe("LaneConsolePane", () => {
     expect(screen.queryByTestId("pane-empty")).not.toBeInTheDocument();
   });
 
-  it("pre-fills the prompt with the pipeline's driving skill, and keeps a typed prompt when the template changes", async () => {
-    const lane = { ...LANE, pipeline_skill: "/agenthub:ship-feature" };
-    const props = { ...baseProps(), lanes: [lane] };
-    const { rerender } = render(<LaneConsolePane {...props} />);
-    const prompt = screen.getByPlaceholderText(/ask claude/i) as HTMLTextAreaElement;
-    await waitFor(() => expect(prompt.value).toBe("/agenthub:ship-feature "));
-
-    // Untouched prefill follows the template switch.
-    const laneShip = { ...lane, pipeline_skill: "/agenthub:ship-feature-lane" };
-    rerender(<LaneConsolePane {...props} lanes={[laneShip]} />);
-    await waitFor(() => expect(prompt.value).toBe("/agenthub:ship-feature-lane "));
-
-    // A typed requirement is never eaten by a later template switch.
-    fireEvent.change(prompt, { target: { value: "/agenthub:ship-feature-lane add a button" } });
-    rerender(<LaneConsolePane {...props} lanes={[lane]} />);
-    await waitFor(() => expect(prompt.value).toBe("/agenthub:ship-feature-lane add a button"));
-  });
-
-  it("never pre-fills a claude slash command into a codex pane", async () => {
-    // pipeline_skill is a Claude Code slash command. Codex would take it as
-    // literal prose and run nothing, which is how a codex lane sits for half an
-    // hour with an untouched pipeline map. No pipeline_nodes here either, so
-    // there's nothing to build a stage checklist from — the box stays empty.
-    const lane = { ...LANE, tool: "codex" as const, pipeline_skill: "/agenthub:ship-feature-lane" };
-    render(<LaneConsolePane {...baseProps()} lanes={[lane]} />);
-    const prompt = screen.getByPlaceholderText(/ask claude/i) as HTMLTextAreaElement;
-    await waitFor(() => expect(prompt.value).toBe(""));
-  });
-
-  it("pre-fills a codex pane with a stage-declaration checklist built from its own pipeline nodes", async () => {
-    // Codex has no slash commands, so it can't run pipeline_skill as-is — it
-    // gets the same priming Claude gets (an opening nudge to declare stage)
-    // as plain text instead, naming this lane's actual node ids.
-    const lane = {
+  it("never pre-fills the prompt from the lane's pipeline, for either tool", async () => {
+    // Picking a pipeline used to write its driving slash command (claude) or a
+    // stage checklist (codex) into the box — an extra prompt sent on start.
+    const claudeLane = { ...LANE, pipeline_skill: "/agenthub:ship-feature" };
+    const codexLane = {
       ...LANE,
       tool: "codex" as const,
       pipeline_skill: "/agenthub:ship-feature-lane",
@@ -242,11 +278,81 @@ describe("LaneConsolePane", () => {
         { id: "tests", label: "Tests", icon: "check", gate: false, state: "pending" as const },
       ],
     };
-    render(<LaneConsolePane {...baseProps()} lanes={[lane]} />);
+    const props = { ...baseProps(), lanes: [claudeLane] };
+    const { rerender } = render(<LaneConsolePane {...props} />);
     const prompt = screen.getByPlaceholderText(/ask claude/i) as HTMLTextAreaElement;
-    await waitFor(() => expect(prompt.value).toContain("agenthub stage <stage> --tool codex"));
-    expect(prompt.value).toContain("implement -> tests");
-    expect(prompt.value).not.toContain("/agenthub:ship-feature-lane");
+    await waitFor(() => expect(prompt.value).toBe(""));
+
+    // A typed requirement still survives a template switch.
+    fireEvent.change(prompt, { target: { value: "add a button" } });
+    rerender(
+      <LaneConsolePane
+        {...props}
+        lanes={[{ ...claudeLane, pipeline_skill: "/agenthub:ship-feature-lane" }]}
+      />
+    );
+    await waitFor(() => expect(prompt.value).toBe("add a button"));
+
+    rerender(<LaneConsolePane {...props} lanes={[codexLane]} />);
+    await waitFor(() => expect(prompt.value).toBe("add a button"));
+  });
+
+  it("attaches to the lane's still-live session instead of failing when Resume hits ERUNLIVE", async () => {
+    const HISTORY_ITEM = {
+      id: "run-old",
+      session_id: "sess-old",
+      cwd: "/workspace/a",
+      model: null,
+      permission_mode: null,
+      effort: null,
+      resume_session_id: null,
+      prompt_preview: "earlier prompt",
+      status: "abandoned" as const,
+      exit_code: null,
+      started_at: new Date(1000).toISOString(),
+      ended_at: new Date(2000).toISOString(),
+      isLive: false,
+      tool: "claude" as const,
+    };
+    (api.run.history as ReturnType<typeof vi.fn>).mockResolvedValue({ items: [HISTORY_ITEM] });
+    (api.lanes.action as ReturnType<typeof vi.fn>).mockRejectedValue(
+      // Matches the real shape `request()` throws: a plain, human-readable
+      // `.message` plus a `.code` a caller actually branches on.
+      Object.assign(new Error("lane already has a live run"), { code: "ERUNLIVE", status: 409 })
+    );
+    (api.lanes.list as ReturnType<typeof vi.fn>).mockResolvedValue({
+      lanes: [{ ...LANE, run_id: "run-live" }],
+    });
+    (api.run.get as ReturnType<typeof vi.fn>).mockResolvedValue({
+      id: "run-live",
+      laneId: 1,
+      status: "running",
+      cwd: "/workspace/a",
+      model: null,
+      permissionMode: null,
+      effort: null,
+      resumeSessionId: null,
+      sessionId: null,
+      startedAt: null,
+      promptPreview: null,
+    });
+
+    render(
+      <MemoryRouter>
+        <LaneConsolePane {...baseProps()} />
+      </MemoryRouter>
+    );
+
+    fireEvent.click(await screen.findByRole("button", { name: /active runs/i }));
+    const resumeButtons = await screen.findAllByRole("button", {
+      name: "Resume existing session",
+    });
+    fireEvent.click(resumeButtons[0]!);
+
+    await waitFor(() =>
+      expect(screen.getByTestId("terminal-view")).toHaveAttribute("data-run-id", "run-live")
+    );
+    expect(screen.getByText(/attached to it instead/i)).toBeInTheDocument();
   });
 
   it("renders an empty placeholder with selector when laneId is null but showLaneSelector is true (split-view)", () => {
@@ -255,4 +361,126 @@ describe("LaneConsolePane", () => {
     expect(screen.getByTestId("pane-lane-select")).toBeInTheDocument();
     expect(screen.queryByTestId("console-body")).not.toBeInTheDocument();
   });
+
+  it("lists only this lane's runs and sessions in Active runs, not every lane's", () => {
+    const run = (id: string, laneId: number, promptPreview: string) => ({
+      id,
+      laneId,
+      status: "running",
+      cwd: "/workspace/x",
+      model: null,
+      permissionMode: null,
+      effort: null,
+      resumeSessionId: null,
+      sessionId: null,
+      startedAt: "2026-09-24T01:00:00Z",
+      promptPreview,
+    });
+    const session = (id: string, cwd: string, name: string) =>
+      ({
+        id,
+        cwd,
+        name,
+        model: null,
+        source: "local",
+        started_at: "2026-09-24T01:00:00Z",
+      }) as never;
+    render(
+      <MemoryRouter>
+        <LaneConsolePane
+          {...baseProps()}
+          lanes={[
+            LANE,
+            { ...LANE, id: 2, cwd: "/workspace/b" },
+            // Nested inside lane 1: its sessions are ITS own, by longest prefix.
+            { ...LANE, id: 3, cwd: "/workspace/a/nested" },
+          ]}
+          activeRuns={{ items: [run("r1", 1, "mine"), run("r2", 2, "other lane's")] as never }}
+          externalSessions={[
+            session("s1", "/workspace/a/src", "my session"),
+            session("s2", "/workspace/b", "b session"),
+            session("s3", "/workspace/a/nested/x", "nested session"),
+            session("s4", "/workspace/ab", "sibling prefix"),
+          ]}
+        />
+      </MemoryRouter>
+    );
+    fireEvent.click(screen.getByRole("button", { name: /2 active runs/ }));
+    expect(screen.getByText("mine")).toBeTruthy();
+    expect(screen.getByText("my session")).toBeTruthy();
+    expect(screen.queryByText("other lane's")).toBeNull();
+    expect(screen.queryByText("b session")).toBeNull();
+    expect(screen.queryByText("nested session")).toBeNull();
+    expect(screen.queryByText("sibling prefix")).toBeNull();
+  });
+
+  describe("split panes on one lane", () => {
+    const run = (id: string, promptPreview = id) => ({
+      id,
+      laneId: 1,
+      status: "running" as const,
+      cwd: "/workspace/a",
+      model: null,
+      permissionMode: null,
+      effort: null,
+      resumeSessionId: null,
+      sessionId: null,
+      startedAt: "2026-09-24T01:00:00Z",
+      promptPreview,
+      tool: "claude" as const,
+    });
+
+    it("attaches a pane only to its own slot's session", async () => {
+      const activeRuns = { items: [run("agenthub-lane-1"), run("agenthub-lane-1-2")] };
+      render(<LaneConsolePane {...baseProps()} activeRuns={activeRuns} slot={2} />);
+      await waitFor(() =>
+        expect(screen.getByTestId("terminal-view")).toHaveAttribute(
+          "data-run-id",
+          "agenthub-lane-1-2"
+        )
+      );
+    });
+
+    it("starts into its own slot and shows the session the server opened", async () => {
+      (api.lanes.action as ReturnType<typeof vi.fn>).mockResolvedValue({
+        lane: { ...LANE, run_id: "agenthub-lane-1" },
+        run_id: "agenthub-lane-1-1",
+      });
+      (api.run.get as ReturnType<typeof vi.fn>).mockResolvedValue(run("agenthub-lane-1-1"));
+      render(<LaneConsolePane {...baseProps()} slot={1} />);
+      fireEvent.change(screen.getByPlaceholderText(/ask claude/i), { target: { value: "go" } });
+      fireEvent.click(screen.getByRole("button", { name: /^run$/i }));
+      await waitFor(() =>
+        expect(api.lanes.action).toHaveBeenCalledWith(
+          1,
+          "start",
+          expect.objectContaining({ slot: 1 })
+        )
+      );
+      await waitFor(() =>
+        expect(screen.getByTestId("terminal-view")).toHaveAttribute(
+          "data-run-id",
+          "agenthub-lane-1-1"
+        )
+      );
+    });
+
+    it("leaves runs other panes show out of Active runs", () => {
+      render(
+        <MemoryRouter>
+          <LaneConsolePane
+            {...baseProps()}
+            slot={1}
+            activeRuns={{
+              items: [run("agenthub-lane-1", "shown"), run("agenthub-lane-1-3", "free")],
+            }}
+            hiddenRunIds={["agenthub-lane-1"]}
+          />
+        </MemoryRouter>
+      );
+      fireEvent.click(screen.getByRole("button", { name: /1 active run/ }));
+      expect(screen.getByText("free")).toBeTruthy();
+      expect(screen.queryByText("shown")).toBeNull();
+    });
+  });
 });

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

@@ -88,6 +88,7 @@ function renderSwitcher(overrides: Partial<React.ComponentProps<typeof ActiveRun
     onAttach: vi.fn(),
     onResumeFromHistory: vi.fn(),
     onViewFromHistory: vi.fn(),
+    onKill: vi.fn(),
     onRefresh: vi.fn(),
   };
   const utils = render(
@@ -127,6 +128,7 @@ function renderModal(
     onAttach: vi.fn(),
     onResume: vi.fn(),
     onView: vi.fn(),
+    onKill: vi.fn(),
     onClose: vi.fn(),
     onRefresh: vi.fn(),
   };
@@ -242,6 +244,14 @@ describe("ActiveRunsSwitcher", () => {
     expect(screen.queryByText(i18n.t("run:runs.externalBadge"))).toBeNull();
   });
 
+  it("shows a dash, not the epoch, for a row with no start time", () => {
+    // A run whose persisted row is missing arrives with startedAt 0. Rendering
+    // that as "Jan 1, 08:00 AM" presents a gap in the data as real data.
+    renderModal([row("no-start", { startedAt: 0 })]);
+    expect(screen.getByText("-")).toBeTruthy();
+    expect(screen.queryByText(/Jan 1,/)).toBeNull();
+  });
+
   it("fires attach with the run id of the row that was clicked", () => {
     const { spies } = renderSwitcher();
     openModal();
@@ -266,6 +276,19 @@ describe("RunsModal", () => {
     expect(spies.onAttach).toHaveBeenCalledWith(LIVE_ID);
   });
 
+  it("needs two clicks to kill a live row, and never offers Kill for an external one", () => {
+    const { spies, unmount } = renderModal([row(LIVE_ID, { isLive: true, status: "running" })]);
+    const killButton = screen.getByText(i18n.t("run:runs.killLabel", "Kill"));
+    fireEvent.click(killButton);
+    expect(spies.onKill).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByText(i18n.t("run:runs.killConfirmShort", "Sure?")));
+    expect(spies.onKill).toHaveBeenCalledWith(LIVE_ID);
+    unmount();
+
+    renderModal([row(LIVE_ID, { isLive: true, status: "running", external: true })]);
+    expect(screen.queryByText(i18n.t("run:runs.killLabel", "Kill"))).toBeNull();
+  });
+
   it("fires resume with the history item behind a finished row", () => {
     const { spies } = renderModal([row(PAST_ID)]);
     fireEvent.click(screen.getByText(i18n.t("run:resume.resumeOption")));

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

@@ -17,6 +17,7 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 import i18n from "i18next";
 import { RunSetup } from "../RunSetup";
 import type { CwdSuggestion } from "../../../lib/api";
+import { api } from "../../../lib/api";
 
 vi.mock("../../../lib/api", async (importOriginal) => {
   const actual = await importOriginal<Record<string, unknown>>();
@@ -24,9 +25,60 @@ vi.mock("../../../lib/api", async (importOriginal) => {
   return {
     ...actual,
     api: {
+      aiTools: {
+        list: r({
+          default: "claude",
+          tools: [
+            {
+              id: "claude",
+              label: "Claude Code",
+              resume: false,
+              bypass: false,
+              modelFlag: true,
+              defaultModel: "sonnet",
+            },
+            { id: "codex", label: "Codex", resume: false, bypass: true },
+            {
+              id: "antigravity",
+              label: "Antigravity",
+              resume: true,
+              bypass: true,
+              modelFlag: true,
+            },
+            { id: "gemini", label: "Gemini", resume: false, bypass: false },
+          ].map((x) => ({ ...x, installed: true, enabled: true, command: x.id })),
+        }),
+        // Each tool's own model list, as GET /api/ai-tools/:id/models answers it.
+        models: vi.fn(async (id: string) => {
+          const lists: Record<string, { id: string; label: string }[]> = {
+            claude: [
+              { id: "sonnet", label: "Sonnet (latest · 5.5)" },
+              { id: "claude-sonnet-5-5", label: "Claude Sonnet 5.5" },
+            ],
+            codex: [{ id: "gpt-6-sol", label: "GPT-6-Sol" }],
+            antigravity: [{ id: "gemini-3.1-pro", label: "gemini-3.1-pro" }],
+          };
+          return { flag: id in lists, models: lists[id] ?? [], defaultModel: null };
+        }),
+      },
       run: { files: r({ items: [] }) },
       sessions: { list: r({ sessions: [], total: 0, limit: 100, offset: 0 }) },
-      ccConfig: { file: r({ text: "" }) },
+      ccConfig: {
+        file: r({ text: "" }),
+        commands: r({
+          items: [
+            {
+              scope: "project",
+              name: "ship-it",
+              frontmatter: { description: "Ship the change" },
+              preview: "",
+            },
+          ],
+        }),
+        skills: r({
+          items: [{ scope: "user", name: "review-pr", frontmatter: {}, preview: "Review a PR" }],
+        }),
+      },
     },
   };
 });
@@ -66,7 +118,6 @@ function renderSetup(overrides: Partial<React.ComponentProps<typeof RunSetup>> =
         busy={false}
         activeRuns={null}
         resumeSession={null}
-        slashCommands={[]}
         runHistory={[]}
         tool="claude"
         sandbox="workspace-write"
@@ -119,10 +170,13 @@ describe("RunSetup — selections report through callbacks", () => {
     onlyCalled(spies, "onCwdChange");
   });
 
-  it("reports the model from the picker, including a custom id", () => {
+  it("reports the model from the picker, including a custom id", async () => {
     const { spies } = renderSetup();
-    pickFromSelect(i18n.t("run:fields.modelInheritLabel"), "Sonnet 5");
-    expect(spies.onModelChange).toHaveBeenCalledWith("claude-sonnet-5");
+    // The list is the tool's own, fetched from the server — aliases named
+    // after the newest version, then pinned versions — never a hardcoded copy.
+    fireEvent.click(screen.getByText(i18n.t("run:fields.modelInheritLabel")));
+    fireEvent.click(await screen.findByText("Sonnet (latest · 5.5)"));
+    expect(spies.onModelChange).toHaveBeenCalledWith("sonnet");
     // "Custom…" is a sentinel, not a model id — it must not be reported as one;
     // the free-text box it reveals is what reports.
     fireEvent.click(screen.getByText(i18n.t("run:fields.modelInheritLabel")));
@@ -208,6 +262,27 @@ describe("RunSetup — resume picker scopes sessions to the selected lane", () =
     );
   });
 
+  it("never offers a Codex session, which `claude --resume` cannot resume", async () => {
+    const { api } = await import("../../../lib/api");
+    vi.mocked(api.sessions.list).mockResolvedValue({
+      sessions: [
+        { id: "sess-claude", cwd: "/Users/tester/lane-a", started_at: "", status: "completed" },
+      ],
+      total: 1,
+      limit: 100,
+      offset: 0,
+    } as never);
+
+    renderSetup({ laneCwd: "/Users/tester/lane-a" });
+    fireEvent.click(screen.getByText(i18n.t("run:resume.resumeOption")));
+    fireEvent.click(screen.getByText(i18n.t("run:resume.pickSession")));
+
+    await screen.findByText("/Users/tester/lane-a");
+    // Filtered by the server, before its limit: a busy Codex lane at the same
+    // directory cannot push Claude sessions off the page.
+    expect(api.sessions.list).toHaveBeenCalledWith(expect.objectContaining({ tool: "claude" }));
+  });
+
   it("starts the resume immediately when a session is picked", async () => {
     const { api } = await import("../../../lib/api");
     vi.mocked(api.sessions.list).mockResolvedValue({
@@ -234,6 +309,27 @@ describe("RunSetup — resume picker scopes sessions to the selected lane", () =
     );
   });
 
+  it("sends no prompt when resuming, even with text in the box", async () => {
+    const { api } = await import("../../../lib/api");
+    vi.mocked(api.sessions.list).mockResolvedValue({
+      sessions: [
+        { id: "sess-in-lane", cwd: "/Users/tester/lane-a", started_at: "", status: "completed" },
+      ],
+      total: 1,
+      limit: 100,
+      offset: 0,
+    } as never);
+
+    const { spies } = renderSetup({ laneCwd: "/Users/tester/lane-a", prompt: "leftover text" });
+    fireEvent.click(screen.getByText(i18n.t("run:resume.resumeOption")));
+    fireEvent.click(screen.getByText(i18n.t("run:resume.pickSession")));
+    fireEvent.click(await screen.findByText("/Users/tester/lane-a"));
+
+    // The resumed session is the input; anything left in the box would be an
+    // extra turn the user never asked for.
+    expect(spies.onStart.mock.calls[0]?.[0]?.initialPrompt).toBeUndefined();
+  });
+
   it("falls back to the typed cwd when no lane is selected", async () => {
     const { api } = await import("../../../lib/api");
     renderSetup({ laneCwd: undefined, cwd: "/Users/tester" });
@@ -277,7 +373,6 @@ describe("RunSetup — resume picker scopes sessions to the selected lane", () =
           busy={false}
           activeRuns={null}
           resumeSession={null}
-          slashCommands={[]}
           runHistory={[]}
           laneCwd="/Users/tester/lane-b"
           tool="claude"
@@ -305,6 +400,27 @@ describe("RunSetup — resume picker scopes sessions to the selected lane", () =
   });
 });
 
+describe("RunSetup — resume keeps the session's model", () => {
+  const session = { id: "sess-1", cwd: "/Users/tester" } as never;
+
+  it("sends no model when it is still the tool's default", async () => {
+    const { spies } = renderSetup({ resumeSession: session, model: "sonnet", prompt: "" });
+    await screen.findByText(i18n.t("run:fields.model"));
+    await new Promise((r) => setTimeout(r, 0));
+    fireEvent.click(screen.getByText(i18n.t("run:actions.start")));
+    expect(spies.onStart).toHaveBeenCalledWith(
+      expect.objectContaining({ resumeSessionId: "sess-1", model: undefined })
+    );
+  });
+
+  it("sends a model the user picked", async () => {
+    const { spies } = renderSetup({ resumeSession: session, model: "opus", prompt: "" });
+    await new Promise((r) => setTimeout(r, 0));
+    fireEvent.click(screen.getByText(i18n.t("run:actions.start")));
+    expect(spies.onStart).toHaveBeenCalledWith(expect.objectContaining({ model: "opus" }));
+  });
+});
+
 describe("RunSetup — per-tool fields", () => {
   it("shows sandbox and approval instead of permission mode for a codex lane", () => {
     renderSetup({ tool: "codex" });
@@ -341,3 +457,124 @@ describe("RunSetup — per-tool fields", () => {
     expect(onResumeLast).toHaveBeenCalled();
   });
 });
+
+describe("RunSetup — / and @ suggestions in the prompt box", () => {
+  const box = () => screen.getByPlaceholderText(/ anything…$/);
+
+  it("lists the lane's commands, skills and the CLI built-ins on /, and Enter picks one", async () => {
+    const { spies } = renderSetup({ prompt: "" });
+    fireEvent.change(box(), { target: { value: "/rev" } });
+
+    // Both prefix matches; the shorter name ranks first.
+    const options = await screen.findAllByRole("option");
+    expect(options.map((o) => o.textContent)).toEqual([
+      expect.stringContaining("/review"),
+      expect.stringContaining("/review-pr"),
+    ]);
+    fireEvent.keyDown(box(), { key: "ArrowDown" });
+    // Read for the directory the run will start in, not the server's own.
+    expect(api.ccConfig.commands).toHaveBeenCalledWith(undefined, "/Users/tester");
+    expect(api.ccConfig.skills).toHaveBeenCalledWith(undefined, "/Users/tester");
+
+    fireEvent.keyDown(box(), { key: "Enter" });
+    expect(spies.onPromptChange).toHaveBeenLastCalledWith("/review-pr ");
+    // Enter picked the suggestion; it did not send the prompt.
+    expect(spies.onStart).not.toHaveBeenCalled();
+  });
+
+  it("suggests files under the cwd on @", async () => {
+    vi.mocked(api.run.files).mockResolvedValue({ items: ["src/main.ts"] });
+    // The prompt is controlled by the page: put the cursor at the end of it.
+    const { spies } = renderSetup({ prompt: "look at @ma" });
+    (box() as HTMLTextAreaElement).setSelectionRange(11, 11);
+    fireEvent.select(box());
+
+    fireEvent.click(await screen.findByText("src/main.ts"));
+    expect(api.run.files).toHaveBeenCalledWith("/Users/tester", "ma");
+    expect(spies.onPromptChange).toHaveBeenLastCalledWith("look at @src/main.ts ");
+  });
+
+  it("offers no slash commands on a codex lane", async () => {
+    renderSetup({ prompt: "", tool: "codex" });
+    fireEvent.change(box(), { target: { value: "/rev" } });
+    await new Promise((r) => setTimeout(r, 20));
+    expect(screen.queryByTestId("prompt-autocomplete")).toBeNull();
+    expect(api.ccConfig.commands).not.toHaveBeenCalled();
+  });
+});
+
+describe("RunSetup — antigravity lanes", () => {
+  it("names the lane's CLI, offers its model flag and drops the flags `agy` lacks", async () => {
+    const { spies } = renderSetup({ tool: "antigravity", model: "gemini-3.1-pro", effort: "high" });
+    expect(screen.getByPlaceholderText("Ask Antigravity anything…")).toBeTruthy();
+    expect(await screen.findByText(i18n.t("run:fields.model"))).toBeTruthy();
+    expect(screen.queryByText(i18n.t("run:fields.effort"))).toBeNull();
+
+    fireEvent.click(screen.getByText(i18n.t("run:actions.start")));
+    expect(spies.onStart).toHaveBeenCalledWith(
+      expect.objectContaining({
+        model: "gemini-3.1-pro",
+        effort: undefined,
+        permissionMode: undefined,
+      })
+    );
+  });
+
+  it("sends no model for a catalog tool whose CLI has no model flag", async () => {
+    const { spies } = renderSetup({ tool: "gemini", model: "stale", prompt: "go" });
+    await screen.findByPlaceholderText("Ask Gemini anything…");
+    expect(screen.queryByText(i18n.t("run:fields.model"))).toBeNull();
+    fireEvent.click(screen.getByText(i18n.t("run:actions.start")));
+    expect(spies.onStart).toHaveBeenCalledWith(expect.objectContaining({ model: undefined }));
+  });
+});
+
+describe("RunSetup — codex lanes", () => {
+  it("offers the models Codex itself lists", async () => {
+    renderSetup({ tool: "codex" });
+    fireEvent.click(screen.getByText(i18n.t("run:fields.modelInheritLabel")));
+    expect(await screen.findByText("GPT-6-Sol")).toBeTruthy();
+  });
+
+  it("starts a fresh codex run instead of resuming the last one", () => {
+    const { spies } = renderSetup({ tool: "codex" });
+    fireEvent.click(screen.getByText(i18n.t("run:actions.start")));
+    expect(spies.onStart).toHaveBeenCalledOnce();
+    expect(spies.onStart.mock.calls[0]?.[0].resumeLast).toBeUndefined();
+  });
+});
+
+describe("RunSetup — catalog tools", () => {
+  it("offers a per-run bypass switch with a warning, and sends it", async () => {
+    const { spies } = renderSetup({ tool: "antigravity", prompt: "go" });
+    const box = await screen.findByRole("checkbox", { name: i18n.t("run:fields.bypass") });
+    expect(box).not.toBeChecked();
+    expect(screen.queryByText(/without asking/)).toBeNull();
+    fireEvent.click(box);
+    expect(screen.getByText(/Antigravity will run every command/)).toBeTruthy();
+    fireEvent.click(screen.getByText(i18n.t("run:actions.start")));
+    expect(spies.onStart.mock.calls[0]?.[0].bypass).toBe(true);
+    // Resume is offered because the catalog gives the tool a resume flag.
+    expect(screen.getByText(i18n.t("run:resume.resumeOption"))).toBeTruthy();
+  });
+
+  it("leaves out resume and bypass for a tool with neither", async () => {
+    const { spies } = renderSetup({ tool: "gemini", prompt: "go" });
+    expect(await screen.findByPlaceholderText("Ask Gemini anything…")).toBeTruthy();
+    expect(screen.queryByRole("checkbox", { name: i18n.t("run:fields.bypass") })).toBeNull();
+    expect(screen.queryByText(i18n.t("run:resume.resumeOption"))).toBeNull();
+    fireEvent.click(screen.getByText(i18n.t("run:actions.start")));
+    expect(spies.onStart.mock.calls[0]?.[0].bypass).toBeUndefined();
+  });
+
+  it("gives Codex the switch but not Claude", async () => {
+    renderSetup({ tool: "codex" });
+    expect(await screen.findByRole("checkbox", { name: i18n.t("run:fields.bypass") })).toBeTruthy();
+  });
+
+  it("gives Claude no bypass switch (it has the bypassPermissions mode)", async () => {
+    renderSetup({ tool: "claude" });
+    await screen.findByPlaceholderText("Ask Claude Code anything…");
+    expect(screen.queryByRole("checkbox", { name: i18n.t("run:fields.bypass") })).toBeNull();
+  });
+});