fix: v2.7.1 — the UI builds again (v2.7.0's update failed at npm run build)

- v2.7.0 could not be installed or updated to: the client build
  (`tsc -b && vite build`) type-checks test files too, and a new
  RunSetup test rendered PromptEditor without its required `slash` and
  `fileCwd` props, so `tsc -b` failed and every update stopped at
  "npm run build failed". The test now passes them.
- Verified on a clean v2.7.0 worktree + this fix: `tsc -b` and
  `vite build` both exit 0; RunSetup tests 19/19.

ARCHITECTURE.md

@@ -374,7 +374,7 @@ graph TD
 | `lib/tmux.js`             | Wrapper around tmux CLI for session management. `createSession(sessionName, cwd)` creates a new tmux session in the specified working directory. `sendCommand(sessionName, command)` sends a command into the session. `killSession(sessionName)` terminates the session. `listSessions()` returns all active sessions. Session management is the foundation for the PTY transport layer |
 | `lib/pty-run.js`          | PTY lifecycle for tmux-backed runs. Manages one tmux session per lane, named `agenthub-lane-<lane.id>`. Exports `startRun()` to create/attach a session and return a `runId` opaque handle; internally uses tmux to manage the pseudoterminal. Spawned `claude` processes run inside the session and fire the dashboard's hooks like any other CLI session, so they show up in `/api/sessions`, the analytics, the Kanban board, and the Workflows page automatically. The PTY frames (terminal input/output deltas) are streamed to the client over `/ws-pty/:runId` (see `server/websocket.js`) at binary frame granularity rather than as JSON envelopes; the client's xterm.js terminal widget renders these raw PTY updates live. Every spawn also mirrors itself into `dashboard_runs` (cwd, model, prompt preview, `resume_session_id`, lane id, start time) — that row is the ONLY source `publicRun` has for those fields, since the handle itself is recomputed from tmux on every read, so a dropped insert renders as a live run with no cwd, model or start date. `mode` is NOT NULL in that table and `recordRun` swallows insert errors by design, which is why this module passes a literal `"interactive"` rather than null. **Create-or-adopt has one refusal:** a pane already running an agent is adopted silently only when the request asked for nothing but a pane — a `resumeSessionId` or an initial prompt cannot be typed over a live agent, so it throws `ERUNLIVE` (409) rather than reporting a resume that never spawned |
 | `lib/pty-attach.js`       | Client-side PTY attachment via WebSocket. Establishes a `/ws-pty/:runId` connection, receives binary PTY frames, and feeds them to an xterm.js terminal instance. Handles reconnection, resize events (sending `TIOCSWINSZ` ioctl to the tmux pane), and cleanup on disconnect. A single tmux session can have many simultaneous PTY clients (browser Workspace, `agenthub lanes shell` CLI, etc.), all synced live The server side (`server/lib/pty-attach.js`) runs `tmux attach` with the LIVE tmux server's own binary (`/proc/<tmux.serverPid()>/exe`, else `tmux` on PATH): a tmux upgraded while its server runs leaves a newer client on PATH that the old server refuses with `open terminal failed: not a terminal`. |
-| `routes/run.js`           | HTTP surface for the tmux+PTY Run feature. **Same-origin guard** on every route — browser requests must come from a localhost-ish Origin (`localhost`, `127.0.0.1`, `::1`, `0.0.0.0`); missing-Origin (curl/CLI) requests pass. When `DASHBOARD_TOKEN` is configured it is **also** required on these routes (same as the rest of `/api/*`). `GET /api/run` lists all live runs (computed fresh from tmux state via `tmux list-sessions`). `GET /api/run/tmux` reports whether `tmux` is installed and on PATH (required for the feature to work). `GET /api/run/binary` probes whether `claude` is on `PATH`. `GET /api/run/cwds` suggests cwds (dashboard + home + recent from sessions table). `GET /api/run/history?laneId=...` returns persisted run history, optionally scoped to one lane. `GET /api/run/files?cwd=&q=` powers the Workspace page's `@`-file autocomplete: scoped fuzzy search inside `cwd` skipping `node_modules`, `.git`, `dist`, `build`, `.next`, `.cache`, `coverage`, `vendor`, etc., capped result count, ranked by basename match. `POST /api/run/drop-image` saves an image dropped on the terminal (raw body, four image types, random name under `<tmpdir>/agenthub-drops-<uid>/`) and returns the path the terminal pastes. `POST /api/run` requires `laneId` in the body and starts/attaches a tmux-backed run. `GET /api/run/:id` returns the run handle. `DELETE /api/run/:id` kills the tmux session (sends SIGTERM to the pane, escalates to SIGKILL after 5 s). The PTY frames are streamed to the client over `/ws-pty/:runId` as binary frames (not JSON), rendering a real interactive terminal in xterm.js on the Workspace page. `tmux` must be installed on the dashboard server's machine (same as better-sqlite3's native-module requirements) |
+| `routes/run.js`           | HTTP surface for the tmux+PTY Run feature. **Same-origin guard** on every route — browser requests must come from a localhost-ish Origin (`localhost`, `127.0.0.1`, `::1`, `0.0.0.0`); missing-Origin (curl/CLI) requests pass. When `DASHBOARD_TOKEN` is configured it is **also** required on these routes (same as the rest of `/api/*`). `GET /api/run` lists all live runs (computed fresh from tmux state via `tmux list-sessions`). `GET /api/run/tmux` reports whether `tmux` is installed and on PATH (required for the feature to work). `GET /api/run/binary` probes whether `claude` is on `PATH`. `GET /api/run/cwds` suggests cwds (dashboard + home + recent from sessions table). `GET /api/run/history?laneId=...` returns persisted run history, optionally scoped to one lane. `GET /api/run/files?cwd=&q=` powers the Workspace page's `@`-file autocomplete: scoped fuzzy search inside `cwd` skipping `node_modules`, `.git`, `dist`, `build`, `.next`, `.cache`, `coverage`, `vendor`, etc., capped result count, ranked by basename match. `POST /api/run/drop-image` saves an image dropped on the terminal (raw body, four image types, random name under `<data dir>/drops/` (a member's `~/.agenthub/handoff/drops/` under S3)) and returns the path the terminal pastes. `POST /api/run` requires `laneId` in the body and starts/attaches a tmux-backed run. `GET /api/run/:id` returns the run handle. `DELETE /api/run/:id` kills the tmux session (sends SIGTERM to the pane, escalates to SIGKILL after 5 s). The PTY frames are streamed to the client over `/ws-pty/:runId` as binary frames (not JSON), rendering a real interactive terminal in xterm.js on the Workspace page. `tmux` must be installed on the dashboard server's machine (same as better-sqlite3's native-module requirements) |
 | `routes/lanes.js`         | Durable-lane API. `POST /api/lanes/worktree`, `PATCH /api/lanes/:id`, destructive actions, and `DELETE /api/lanes/:id` use the Run route's same-origin guard. Worktree provisioning validates an absolute source git repository, persists a managed lane as `provisioning`, returns `202`, then uses the per-lane lock to resolve the base and add the worktree. Completion broadcasts the existing `lane_update` payload as `idle`; a git failure leaves a row that the non-destructive delete route can forget. `GET /api/lanes/:id/preflight?action=reset\|remove\|purge` produces counted confirmation facts. Confirmed `POST /:id/{reset,remove,purge}` actions require a complete `expect`, run under the same lock, kill a recorded run and wait for the spawner's actual child-exit timestamp (or return `500 ERUNTIMEOUT` before git), clear `run_id`, reject changed facts with `409 ESTALE` including expected/current diagnostics, and require `force` for unpushed managed reset/remove work. Reset and managed removal call the worktree's independent managed-kind, realpath-within-`LANES_ROOT`, and listed-worktree guard; adopted reset is refused, while adopted remove only forgets its row and never modifies its directory, and a managed lane whose directory was deleted by hand takes a prune path that still enforces the managed-kind and inside-`LANES_ROOT` checks. `start` returns `409 ERUNLIVE` rather than overwriting a live `run_id` and orphaning its child. `kind`, `source_repo`, `slug`, `base_branch`, `slot` and `ports` are not patchable — provisioning writes them through `lanesLib.setProvisioningFacts`. Worktree provisioning also runs `lane-runtime.js:provisionLane` (A2) when the repo declares a `.agenthub/profile` — seed `.env`, `bootstrap`, create the database, migrate, seed — before the lane reports `idle`; `reset`/`remove` likewise call `resetLaneData`/`removeLaneData`, with `reset` accepting a body `keepDb: true` to skip the whole drop-recreate-migrate-reseed block. The runtime routes (`GET /:id/runtime`, `POST /:id/up`, `POST /:id/down`, `POST /:id/hook/:name`, `GET /:id/logs/:svc`) are registered **before** the `/:id/:action` catch-all so `up`/`down` are not swallowed as unknown actions, and are deliberately kept out of it: that catch-all drives a lane's Claude run, these drive the application the lane is working on. `GET /api/lanes/pipeline-stats` aggregates per-node pass counts over every lane and every archived feature. The git surface (#34/#35) sits under `/:id/git/*`, again before the catch-all: `GET /:id/git/changes` (ranges `work`/`branch`/`commit`, with `context`), `/:id/git/log`, `/:id/git/file`, `/:id/git/ls`, `/:id/git/tree` and `/:id/git/branches` are read-only and unguarded like `/:id/git`, while `POST /:id/git/:action` is same-origin guarded and runs under the lane lock — and its per-file actions (`stage`, `unstage`, `discard`) accept only paths `git status` reports as changed, with `discard` additionally requiring `confirm: true`. |
 | `lib/ports.js`            | TCP probing for runtime allocation. `isListening(port)` connects rather than binds (binding races with the hook about to bind, and says nothing about a listener held by another user); a connect timeout counts as occupied. `listenerPids(port)` shells to `lsof`, falls back to `ss`, and returns `[]` with a one-time warning when neither exists — a missing tool must never fail a lane operation |
 | `lib/lane-slots.js`       | Slot and port allocation — the numbering Shipyard gets free from fixed `lane1..lane9` directories and AgentHub, keyed by `cwd`, must allocate. `allocateSlot` takes the lowest free of `LANE_MAX_SLOTS` (default 9) under the per-lane lock, with a partial unique index on `lanes.slot` as the backstop; allocation is **lazy**, so a lane that is only watched never consumes one. `releaseSlot` runs on remove but never on reset (moving a lane's ports mid-feature is a silent failure, not a fresh start). `resolvePorts` prefers `PORT_BASE_<name> + slot`, then steps `+100` at a time so the last digit still reads as the slot, skipping anything listening, recorded by another lane, or already taken in the same boot. `slotDirs` puts run/log state under `LANES_ROOT/.state/lane<slot>/` — outside the worktree, because `reset`'s `git clean -fd` would otherwise sweep live pid files. `dbName`/`dataFacts` (A2) derive the same kind of slot-based fact one layer up: database name, `DATABASE_URL`/`TEST_DATABASE_URL`, a Redis logical index, and the upload directory — each `null` when its owning profile declaration (`DB_PREFIX`, `REDIS`, `UPLOAD_SUBDIR`) is absent |
@@ -2244,6 +2244,7 @@ interface UpdateStatusPayload {
   situation?:                          // categorical hint for the UI
     | "plugin_managed"                 // ~/.claude/plugins/cache — /apply delegates
     | "release_available"              // fast-forward onto the release tag
+    | "diverged_from_release"          // HEAD has commits the release lacks — fetch only, no apply
     | "tracking_canonical"
     | "fork_or_diverged_tracking"
     | "feature_branch"
@@ -2309,6 +2310,7 @@ The same shape is used by `GET /status`, `POST /check`, and the `update_status`
 | Plugin `/apply` after a failed release check | 409 `{reason:"plugin_managed", release_check:"unreachable"\|"no_local_version"\|...}` | No chain is spawned, and the message says the check did not succeed rather than claiming nothing newer exists — an unknown reported as a negative is how a broken check looks identical to an up-to-date install. |
 | Healthy, behind, on canonical branch | `{update_available:true, situation:"tracking_canonical", manual_command:"...git pull --ff-only..."}` | Modal opens with `git pull` flow + restart hint. |
 | Healthy, behind, fork (origin = fork, upstream = canonical) | `{update_available:true, situation:"fork_or_diverged_tracking", manual_command:"...git fetch upstream && git merge --ff-only upstream/master..."}` | Modal opens with merge flow + restart hint + `situation_note` explaining the divergence. |
+| Newer release, but HEAD holds commits the release lacks (e.g. local wip the release squashed) | `{update_available:true, situation:"diverged_from_release", manual_command:"...git fetch <remote> --tags"}` | Modal opens with no **Update now**; `situation_note` says how many commits diverge and offers `git reset --keep <tag>` (when they are already in the release) or merge/rebase. `/apply` answers `not_fast_forwardable` instead of a raw `merge --ff-only` failure. |
 | Healthy, behind, on a feature branch | `{update_available:true, situation:"feature_branch", manual_command:"...git fetch <remote>"}` | Modal opens; `situation_note` explains the user is off the canonical branch; restart hint suppressed because the working tree isn't being changed. |
 
 ### Why Self-Apply Stays Narrow

bin/agenthub.js

@@ -2853,8 +2853,8 @@ const COMMAND_GROUPS = [
       ],
       [
         "accounts",
-        "list|add|remove [name]",
-        "Claude account pool: new sessions spread over these accounts",
+        "list|add|remove [name] [--tool codex]",
+        "Claude/Codex account pool: new sessions spread over these accounts",
       ],
       ["repl", "", "Open the interactive shell (also: shell, i)"],
     ],
@@ -3952,6 +3952,23 @@ async function cmdServer(sub, flags) {
     );
     return;
   }
+  if (sub === "install-system") return installSystem(flags, settingsEnv);
+  if (sub === "tools") {
+    // S3/S4: copy this install's scripts and every installed AI tool under
+    // /opt/agenthub, where every account's pane runs them (the server also
+    // does this at start and after each install/update).
+    const shared = require(path.join(REPO_ROOT, "server", "lib", "shared-tools.js"));
+    await shared.publishApp(REPO_ROOT);
+    const rows = await shared.publishAll();
+    table(
+      ["tool", "shared copy"],
+      rows.map((r) => [
+        r.id,
+        r.error ? c.red(r.error) : `${r.path}${r.copied ? "" : c.dim(" (unchanged)")}`,
+      ])
+    );
+    return;
+  }
   if (sub === "off") {
     settingsEnv.writeSetting("AGENTHUB_MODE", "local");
     envNote("AGENTHUB_MODE");
@@ -3969,11 +3986,120 @@ async function cmdServer(sub, flags) {
     return;
   }
   console.error(
-    c.red("✖ Usage: agenthub server setup [--hostname name] [--admin name] | off | status")
+    c.red(
+      "✖ Usage: agenthub server setup [--hostname name] [--admin name] | install-system [--dry-run|--uninstall] | tools | off | status"
+    )
   );
   process.exitCode = 1;
 }
 
+/**
+ * `agenthub server install-system` — one Linux user per account (S3,
+ * docs/SERVER-MODE.md). Run as the HOST account, never as root: it resolves
+ * this install's paths as the host, hands them to the root half
+ * (`scripts/server/install-system.sh`) through ONE `sudo`, points the system
+ * unit at this install, and moves the dashboard from the `systemd --user`
+ * unit to the system one (panes survive: KillMode=process). `--uninstall`
+ * goes back to the user unit.
+ */
+async function installSystem(flags, settingsEnv) {
+  const os = require("node:os");
+  if (process.getuid && process.getuid() === 0) {
+    throw new Error("run this as the account that runs the dashboard, not as root (it uses sudo)");
+  }
+  const which = (bin) =>
+    spawnSync("sh", ["-c", `command -v ${bin}`], { encoding: "utf8" }).stdout.trim();
+  const host = os.userInfo().username;
+  const { getDataDir } = require(path.join(REPO_ROOT, "server", "lib", "claude-home.js"));
+  const data = getDataDir();
+  const port = String(process.env.DASHBOARD_PORT || "4820");
+  const script = path.join(REPO_ROOT, "scripts", "server", "install-system.sh");
+  const args = flags.uninstall
+    ? [script, "--uninstall", "--host", host]
+    : [
+        script,
+        ...["--host", host, "--node", process.execPath, "--root", REPO_ROOT, "--data", data],
+        ...["--port", port, "--tmux", which("tmux"), "--git", which("git")],
+        ...(which("gh") ? ["--gh", which("gh")] : []),
+      ];
+  if (flags["dry-run"]) {
+    console.log(["sudo", "bash", ...args].join(" "));
+    return;
+  }
+  const userUnit = (...a) => spawnSync("systemctl", ["--user", ...a, "agenthub.service"]);
+  // What either unit runs: this install's node and server, with its env.
+  const runtime = path.join(data, "runtime");
+  const clientDist = fs.existsSync(path.join(REPO_ROOT, "client", "dist", "index.html"))
+    ? path.join(REPO_ROOT, "client", "dist")
+    : path.join(runtime, "client-dist");
+  const env = { NODE_ENV: "production", PATH: process.env.PATH || "", DASHBOARD_PORT: port };
+  env.DASHBOARD_CLIENT_DIST = clientDist;
+  if (!fs.existsSync(path.join(REPO_ROOT, "node_modules"))) {
+    env.NODE_PATH = path.join(runtime, "node_modules");
+  }
+  const serverArgv = [process.execPath, path.join(REPO_ROOT, "server", "index.js")];
+  if (flags.uninstall) {
+    if (spawnSync("sudo", ["bash", ...args], { stdio: "inherit" }).status !== 0) {
+      throw new Error("install-system --uninstall failed");
+    }
+    // Repoint the user unit first: the build it named may have been pruned
+    // while the system unit was the one protected.
+    require(path.join(REPO_ROOT, "scripts", "systemd-service.js")).writeUserService({
+      argv: serverArgv,
+      env,
+    });
+    userUnit("enable", "--now");
+    console.log(`${c.green("✔")} back on the systemd --user unit`);
+    return;
+  }
+  if (spawnSync("sudo", ["bash", ...args], { stdio: "inherit" }).status !== 0) {
+    throw new Error("install-system failed — nothing was started");
+  }
+  // The unit reads node, the plugin root and the env from a file this account
+  // owns (the bootstrap repoints it after an update without root).
+  const sys = require(path.join(REPO_ROOT, "scripts", "systemd-system-service.js"));
+  const wrote = sys.writeUserService({ argv: serverArgv, env });
+  if (wrote === "failed" || wrote === "unavailable") {
+    throw new Error(`could not write ${sys.envPath()} (${wrote})`);
+  }
+  settingsEnv.writeSetting(
+    "AGENTHUB_USERS_ROOT",
+    require(path.join(REPO_ROOT, "server", "lib", "linux-accounts.js")).serverConf().usersRoot
+  );
+  // Hand over: the user unit stops (its panes stay), and so does a dashboard
+  // started without one (detached) — else the system unit finds the port
+  // taken and the old process, without the S3 groups, keeps serving.
+  userUnit("disable", "--now");
+  const boot = require(path.join(REPO_ROOT, "scripts", "plugin-bootstrap.js"));
+  const sysUp = () =>
+    spawnSync("systemctl", ["is-active", "agenthub.service"], {
+      encoding: "utf8",
+    }).stdout.trim() === "active";
+  // A re-run while the system unit serves: that server is the one to keep.
+  if (!sysUp()) boot.stopDashboard();
+  for (let i = 0; i < 50 && !sysUp() && boot.livePids().length; i++) {
+    spawnSync("sleep", ["0.2"]);
+  }
+  if (!sysUp() && boot.livePids().length) {
+    throw new Error("a dashboard is still running — stop it first");
+  }
+  if (spawnSync("sudo", ["-n", "systemctl", "enable", "agenthub.service"]).status !== 0) {
+    console.log(c.yellow("! could not enable agenthub.service for boot"));
+  }
+  if (spawnSync("sudo", ["-n", "systemctl", "start", "--no-block", "agenthub.service"]).status) {
+    throw new Error("could not start agenthub.service — `sudo systemctl status agenthub`");
+  }
+  spawnSync("sleep", ["3"]);
+  if (!sysUp()) {
+    throw new Error("agenthub.service did not stay up — `sudo journalctl -u agenthub -n 50`");
+  }
+  console.log(`${c.green("✔")} the dashboard now runs as the system unit agenthub.service`);
+  console.log("  Give the existing users their Linux accounts: agenthub users provision --all");
+  console.log(
+    c.dim("  Log out and back in once: your own session joins groups agenthub/agenthub-proc.")
+  );
+}
+
 /** `agenthub users …` — server mode's accounts, written straight to the DB. */
 async function cmdUsers(sub, positional, flags) {
   const { auth } = serverAuth();
@@ -4026,6 +4152,37 @@ async function cmdUsers(sub, positional, flags) {
       );
       return;
     }
+    case "provision": {
+      // S3: the Linux account of a user made before install-system (or after a
+      // failed create). Idempotent: an existing member account is kept.
+      const linux = require(path.join(REPO_ROOT, "server", "lib", "linux-accounts.js"));
+      if (!linux.s3Enabled()) {
+        throw new Error(
+          "one Linux user per account is not installed (agenthub server install-system)"
+        );
+      }
+      const names = flags.all
+        ? auth
+            .listUsers()
+            .filter((u) => !u.disabled)
+            .map((u) => u.username)
+        : (need(), [name]);
+      const memberClaude = require(path.join(REPO_ROOT, "server", "lib", "member-claude.js"));
+      for (const n of names) {
+        // One user that cannot be provisioned (a name Linux refuses, a folder
+        // already there) is reported and skipped — never the end of the run.
+        try {
+          console.log(`${c.green("✔")} ${linux.provision("create", n)}`);
+        } catch (e) {
+          console.error(c.red(`✖ ${n}: ${e.message}`));
+          process.exitCode = 1;
+          continue;
+        }
+        // Opt-in plugin baseline (/etc/agenthub/plugin-baseline.json); prints per entry.
+        await memberClaude.applyPluginBaseline(n);
+      }
+      return;
+    }
     case "disable":
     case "enable":
       need();
@@ -4035,21 +4192,75 @@ async function cmdUsers(sub, positional, flags) {
     default:
       console.error(
         c.red(
-          "✖ Usage: agenthub users list | add <name> [--role admin|analyst|developer] | passwd <name> | role <name> <role> | disable <name> | enable <name> | assign <workspace id> <name> | audit [--limit N]"
+          "✖ Usage: agenthub users list | add <name> [--role admin|analyst|developer] | passwd <name> | role <name> <role> | disable <name> | enable <name> | provision <name>|--all | assign <workspace id> <name> | audit [--limit N]"
         )
       );
       process.exitCode = 1;
   }
 }
 
+/** `agenthub accounts … --tool codex` — the Codex account pool (server/lib/codex-pool.js). */
+async function cmdCodexAccounts(sub, name, flags) {
+  const pool = require(path.join(REPO_ROOT, "server", "lib", "codex-pool.js"));
+  if (sub === "add") {
+    let added;
+    if (flags["api-key"]) {
+      added = pool.addAccount(name, { apiKey: await askPassword(`OpenAI API key for ${name}: `) });
+    } else if (typeof flags.from === "string") {
+      // A `codex login` home (or its auth.json) — read here, on the host's shell.
+      const from = path.resolve(flags.from);
+      const file = fs.statSync(from).isDirectory() ? path.join(from, "auth.json") : from;
+      added = pool.addAccount(name, { auth: JSON.parse(fs.readFileSync(file, "utf8")) });
+      console.log(c.dim(`  You can delete ${file} now; the pool keeps its own copy.`));
+    } else {
+      throw new Error(
+        "usage: agenthub accounts add <name> --tool codex --api-key | --from <dir>\n" +
+          "  A ChatGPT account: `CODEX_HOME=$(mktemp -d) codex login` signed in as it, then --from that dir."
+      );
+    }
+    console.log(`${c.green("✔")} ${added.name} (${added.kind}) added`);
+    console.log(c.dim("  New Codex sessions now spread over the pool's accounts."));
+    return;
+  }
+  if (sub === "remove") {
+    pool.removeAccount(name);
+    console.log(`${c.green("✔")} ${name} removed — running panes keep it until they exit`);
+    return;
+  }
+  if (sub !== undefined && sub !== "list") {
+    throw new Error("usage: agenthub accounts list | add <name> | remove <name> --tool codex");
+  }
+  pool.resetQuota();
+  table(
+    ["codex account", "kind", "live", "$ 5h", "$ 7d", "quota", "state"],
+    pool
+      .poolStatus()
+      .map((a) => [
+        a.name,
+        a.kind,
+        a.livePanes,
+        a.spend5h.toFixed(2),
+        a.spend7d.toFixed(2),
+        a.quota
+          ? a.quota.windows.map((w) => `${w.label} ${Math.round(w.usedPercent)}%`).join(" ")
+          : "–",
+        a.full ? "full" : "ok",
+      ])
+  );
+}
+
 /** `agenthub accounts …` — the Claude account pool (server/lib/claude-pool.js). */
-async function cmdAccounts(sub, positional) {
+async function cmdAccounts(sub, positional, flags = {}) {
   serverAuth(); // the same settings + database the server reads
   const pool = require(path.join(REPO_ROOT, "server", "lib", "claude-pool.js"));
   const name = positional[0];
   if (sub === "add" || sub === "remove") {
-    if (!name) throw new Error(`usage: agenthub accounts ${sub} <name>`);
+    if (!name) throw new Error(`usage: agenthub accounts ${sub} <name> [--tool codex]`);
   }
+  if (flags.tool != null && flags.tool !== "claude" && flags.tool !== "codex") {
+    throw new Error("--tool is claude (the default) or codex");
+  }
+  if (flags.tool === "codex") return cmdCodexAccounts(sub, name, flags);
   if (sub === "add") {
     console.log(
       c.dim("  Run `claude setup-token` signed in as that account, then paste the token.")
@@ -4089,9 +4300,13 @@ async function cmdAccounts(sub, positional) {
                 : "ok",
         ])
     );
+    const codex = require(path.join(REPO_ROOT, "server", "lib", "codex-pool.js"));
+    if (codex.poolStatus().length) await cmdCodexAccounts("list", null, flags);
     return;
   }
-  console.error(c.red("✖ Usage: agenthub accounts list | add <name> | remove <name>"));
+  console.error(
+    c.red("✖ Usage: agenthub accounts list | add <name> | remove <name> [--tool codex]")
+  );
   process.exitCode = 1;
 }
 
@@ -4121,7 +4336,7 @@ async function runCommand(argv) {
     case "users":
       return cmdUsers(positional[0], positional.slice(1), flags);
     case "accounts":
-      return cmdAccounts(positional[0], positional.slice(1));
+      return cmdAccounts(positional[0], positional.slice(1), flags);
     case "stats":
       return cmdStats();
     case "kanban":

client/index.html

@@ -30,7 +30,7 @@
     <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."
+      content="Run, steer and track your AI coding agents in one browser tab: workspaces with live terminals for Claude Code, Codex and more, built-in Git, chat replay, usage and cost tracking, and alerts - local-first and real-time."
     />
     <meta
       name="keywords"
@@ -45,23 +45,23 @@
     <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."
+      content="Run, steer and track your AI coding agents in one browser tab: workspaces with live terminals for Claude Code, Codex and more, built-in Git, chat replay, usage and cost tracking, and alerts - local-first and real-time."
     />
-    <meta property="og:image" content="/og-image.svg" />
+    <meta property="og:image" content="/og-image.png" />
     <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="AgentHub - real-time Claude Code monitoring" />
+    <meta property="og:image:type" content="image/png" />
+    <meta property="og:image:alt" content="AgentHub - run, steer and track your AI coding agents" />
 
     <!-- Twitter / X Card -->
     <meta name="twitter:card" content="summary_large_image" />
     <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."
+      content="Run, steer and track your AI coding agents in one browser tab: workspaces with live terminals for Claude Code, Codex and more, built-in Git, chat replay, usage and cost tracking, and alerts - local-first and real-time."
     />
-    <meta name="twitter:image" content="/og-image.svg" />
-    <meta name="twitter:image:alt" content="AgentHub - real-time Claude Code monitoring" />
+    <meta name="twitter:image" content="/og-image.png" />
+    <meta name="twitter:image:alt" content="AgentHub - run, steer and track your AI coding agents" />
     <meta name="twitter:creator" content="@smartgift" />
 
     <!-- JSON-LD structured data -->
@@ -70,7 +70,7 @@
         "@context": "https://schema.org",
         "@type": "WebApplication",
         "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.",
+        "description": "Run, steer and track your AI coding agents in one browser tab: workspaces with live terminals for Claude Code, Codex and more, built-in Git, chat replay, usage and cost tracking, and alerts - local-first and real-time.",
         "applicationCategory": "DeveloperApplication",
         "operatingSystem": "Windows, macOS, Linux",
         "softwareVersion": "1.0.0",

client/src/components/AuthGate.tsx

@@ -8,6 +8,9 @@
  * (`AUTH_REQUIRED_EVENT`). Logging out unmounts the app, so no page keeps the
  * previous user's data. `useAuth()` gives the sidebar the user and `logout`;
  * `usePermissions()` says what that user's role may do, so pages hide the rest.
+ * Once an account is known (local mode is one), its own UI preferences are
+ * loaded into this browser (`lib/userPrefs.ts`).
+ * The login page follows the OS's light/dark (`applySystemTheme`).
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -15,12 +18,17 @@ import {
   createContext,
   useContext,
   useEffect,
+  useLayoutEffect,
   useState,
   type FormEvent,
   type ReactNode,
 } from "react";
 import { useTranslation } from "react-i18next";
+import { Eye, EyeOff } from "lucide-react";
+import { BRAND_LOGO } from "../lib/brand";
+import { applySystemTheme } from "../hooks/useTheme";
 import { api, AUTH_REQUIRED_EVENT, type AuthState, type AuthUser } from "../lib/api";
+import { hydrate } from "../lib/userPrefs";
 
 type AuthValue = { state: AuthState; logout: () => Promise<void> };
 
@@ -114,6 +122,18 @@ export function AuthGate({ children }: { children: ReactNode }) {
     };
   }, []);
 
+  // The signed-in account's own preferences (lib/userPrefs.ts): loaded once
+  // per account, so a second login in this browser brings that account's.
+  const account =
+    state?.mode === "local"
+      ? "local"
+      : state?.mode === "server" && state.user
+        ? `u${state.user.id}`
+        : null;
+  useEffect(() => {
+    if (account) void hydrate();
+  }, [account]);
+
   if (!state) return null;
   if (state.mode === "server" && !state.user) {
     return <LoginPage onLoggedIn={(user) => setState({ mode: "server", user })} />;
@@ -129,9 +149,18 @@ function LoginPage({ onLoggedIn }: { onLoggedIn: (user: AuthUser) => void }) {
   const { t } = useTranslation();
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  // Nobody is signed in, so no account's theme applies: follow the OS, live.
+  useLayoutEffect(() => {
+    applySystemTheme();
+    const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
+    mq?.addEventListener?.("change", applySystemTheme);
+    return () => mq?.removeEventListener?.("change", applySystemTheme);
+  }, []);
+
   const submit = async (e: FormEvent) => {
     e.preventDefault();
     setBusy(true);
@@ -149,38 +178,83 @@ function LoginPage({ onLoggedIn }: { onLoggedIn: (user: AuthUser) => void }) {
 
   return (
     <main className="flex min-h-screen items-center justify-center bg-surface-0 p-4">
-      <form onSubmit={submit} className="card w-full max-w-sm space-y-4 p-6">
-        <h1 className="text-lg font-semibold text-fg-primary">{t("auth.title")}</h1>
-        <label className="block space-y-1 text-sm text-fg-secondary">
-          <span>{t("auth.username")}</span>
-          <input
-            className="input w-full"
-            autoComplete="username"
-            autoFocus
-            required
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-          />
-        </label>
-        <label className="block space-y-1 text-sm text-fg-secondary">
-          <span>{t("auth.password")}</span>
-          <input
-            className="input w-full"
-            type="password"
-            autoComplete="current-password"
-            required
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-          />
-        </label>
-        {error && (
-          <p role="alert" className="text-sm text-status-danger">
-            {error}
-          </p>
-        )}
-        <button type="submit" className="btn-primary w-full" disabled={busy}>
-          {busy ? t("auth.submitting") : t("auth.submit")}
-        </button>
+      <form
+        onSubmit={submit}
+        className="card relative w-full max-w-md overflow-hidden px-6 pb-8 pt-12 sm:px-10"
+      >
+        {/* Accent glow and a grid fading out from the top, drawn from the
+            theme's own accent so it holds in every theme. */}
+        <div
+          aria-hidden
+          className="pointer-events-none absolute inset-x-0 top-0 h-56"
+          style={{
+            backgroundImage:
+              "linear-gradient(to right, rgb(var(--accent) / 0.12) 1px, transparent 1px), linear-gradient(to bottom, rgb(var(--accent) / 0.12) 1px, transparent 1px), radial-gradient(ellipse at top, rgb(var(--accent) / 0.16), transparent 70%)",
+            backgroundSize: "48px 48px, 48px 48px, 100% 100%",
+            backgroundPosition: "center top",
+            maskImage: "radial-gradient(ellipse 70% 100% at top, black 30%, transparent 100%)",
+          }}
+        />
+        <div className="relative space-y-5">
+          <div className="text-center">
+            <img src={BRAND_LOGO} alt="SmartGift" className="block h-auto w-full" />
+            <h1 className="mt-5 text-3xl font-semibold tracking-tight text-fg-primary">
+              {t("auth.title")}
+            </h1>
+            <p className="mt-2 text-sm text-fg-secondary">{t("auth.subtitle")}</p>
+          </div>
+          <label className="block space-y-1.5 text-sm font-medium text-fg-primary">
+            <span>{t("auth.username")}</span>
+            <input
+              className="input h-11 w-full px-4"
+              autoComplete="username"
+              autoFocus
+              required
+              placeholder={t("auth.username")}
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+            />
+          </label>
+          <div className="space-y-1.5 text-sm font-medium text-fg-primary">
+            <label htmlFor="login-password">{t("auth.password")}</label>
+            <div className="relative">
+              <input
+                id="login-password"
+                className="input h-11 w-full pl-4 pr-11"
+                type={showPassword ? "text" : "password"}
+                autoComplete="current-password"
+                required
+                placeholder="••••••••"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword((v) => !v)}
+                aria-label={showPassword ? t("auth.hidePassword") : t("auth.showPassword")}
+                aria-pressed={showPassword}
+                className="absolute inset-y-0 right-0 flex w-11 items-center justify-center rounded-r-lg text-fg-muted hover:text-fg-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+              >
+                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+              </button>
+            </div>
+          </div>
+          {error && (
+            <p role="alert" className="text-sm text-status-danger">
+              {error}
+            </p>
+          )}
+          {/* Inverted fill (text colour behind the surface colour): black in a
+              light theme, light in a dark one, like the reference design. */}
+          <button
+            type="submit"
+            className="h-11 w-full rounded-xl bg-fg-primary text-sm font-medium text-surface-0 shadow-sm transition-opacity hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:cursor-not-allowed disabled:opacity-50"
+            disabled={busy}
+          >
+            {busy ? t("auth.submitting") : t("auth.submit")}
+          </button>
+          <p className="text-center text-sm text-fg-secondary">{t("auth.noAccount")}</p>
+        </div>
       </form>
     </main>
   );

client/src/components/ImageLightbox.tsx

@@ -0,0 +1,44 @@
+/**
+ * @file ImageLightbox.tsx
+ * @description One image shown full size over the whole page; a click or
+ * Escape closes it. Rendered into `document.body`, so no pane, its stacking
+ * layer or a header drawn over a pane can cover it — opened from inside a
+ * pane's Chat view, a `fixed` overlay would otherwise stay in that pane's
+ * layer, under anything stacked above it.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+
+export function ImageLightbox({
+  src,
+  alt,
+  onClose,
+}: {
+  src: string;
+  alt: string;
+  onClose: () => void;
+}) {
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose();
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [onClose]);
+  return createPortal(
+    <div
+      role="dialog"
+      aria-label={alt}
+      data-testid="image-lightbox"
+      onClick={onClose}
+      className="fixed inset-0 z-[200] flex cursor-zoom-out items-center justify-center bg-black/60 p-8"
+    >
+      <img
+        src={src}
+        alt={alt}
+        className="max-h-full max-w-full rounded-lg object-contain shadow-2xl"
+      />
+    </div>,
+    document.body
+  );
+}

client/src/components/Layout.tsx

@@ -51,6 +51,7 @@
  * ## Internal dependencies
  * - `./Sidebar`
  * - `./UpdateNotifier`
+ * - `./lanes/InterruptedSessionsPrompt` (the "resume interrupted sessions?" dialog)
  * - `./Sagi/SagiMount`
  *
  * ## Public surface
@@ -81,8 +82,11 @@ import { Menu } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { Sidebar, SIDEBAR_STORAGE_KEY, loadCollapsed } from "./Sidebar";
 import { UpdateNotifier } from "./UpdateNotifier";
+import { InterruptedSessionsPrompt } from "./lanes/InterruptedSessionsPrompt";
 import { SagiMount } from "./Sagi/SagiMount";
 import { StatusBar } from "./StatusBar";
+import { OnboardingWizard } from "./onboarding/OnboardingWizard";
+import { OnboardingTour } from "./onboarding/OnboardingTour";
 
 const WIDTH_KEY = "agenthub.sidebar.width";
 /** The default width, and the narrowest the edge drags to. */
@@ -171,7 +175,10 @@ export function Layout({ wsConnected }: LayoutProps) {
         {t("skipToContent")}
       </a>
       <UpdateNotifier />
+      <InterruptedSessionsPrompt />
       <SagiMount />
+      <OnboardingWizard />
+      <OnboardingTour />
       {drawer && drawerOpen && (
         <div
           aria-hidden

client/src/components/PathPickButton.tsx

@@ -12,7 +12,7 @@
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { useState } from "react";
+import { useState, type Ref } from "react";
 import { useTranslation } from "react-i18next";
 import { FolderOpen } from "lucide-react";
 import { api } from "../lib/api";
@@ -27,12 +27,15 @@ export function PathPickButton({
   start,
   onPick,
   showLabel = false,
+  buttonRef,
 }: {
   kind?: "dir" | "file";
   /** The field's current value — the picker opens there. */
   start?: string;
   onPick: (path: string) => void;
   showLabel?: boolean;
+  /** Lets a field beside it open the same picker (a click on an empty path). */
+  buttonRef?: Ref<HTMLButtonElement>;
 }) {
   const { t } = useTranslation(["lanes"]);
   const [busy, setBusy] = useState(false);
@@ -61,6 +64,7 @@ export function PathPickButton({
   return (
     <>
       <button
+        ref={buttonRef}
         type="button"
         onClick={pick}
         disabled={busy}

client/src/components/Select.tsx

@@ -3,7 +3,8 @@
  * @description Generic styled dropdown that replaces native `<select>` elements
  * for consistent cross-platform rendering. Native macOS/Chromium selects reserve
  * checkmark space inconsistently; this control aligns labels, flips above the
- * trigger when viewport space is tight, and marks the chosen option with accent
+ * trigger when space is tight — in its split pane (`data-menu-bounds`, see
+ * `menuRoom`) or else the viewport — and marks the chosen option with accent
  * color plus a Lucide check.
  *
  * ## Accessibility — WAI-ARIA "listbox button"
@@ -74,6 +75,14 @@
 import { useEffect, useId, useRef, useState, type ReactNode } from "react";
 import { ChevronDown, Check } from "lucide-react";
 
+/** Room above and below `r` (the trigger's rect) for a menu it opens: inside
+ *  the nearest `data-menu-bounds` box — a split pane, whose neighbour paints
+ *  over anything crossing its edge — else the viewport. */
+export function menuRoom(el: Element, r: DOMRect): { above: number; below: number } {
+  const box = el.closest("[data-menu-bounds]")?.getBoundingClientRect();
+  return { above: r.top - (box?.top ?? 0), below: (box?.bottom ?? window.innerHeight) - r.bottom };
+}
+
 /** Single option in a {@link Select} list. */
 export interface SelectOption<T extends string> {
   /** Stored value emitted via `onChange`. */
@@ -144,9 +153,11 @@ export function Select<T extends string>({
     const idx = options.findIndex((o) => o.value === value);
     setActive(idx >= 0 ? idx : 0);
     if (buttonRef.current) {
-      const rect = buttonRef.current.getBoundingClientRect();
-      const below = window.innerHeight - rect.bottom;
-      setOpenUp(below < 288 && rect.top > below);
+      const { above, below } = menuRoom(
+        buttonRef.current,
+        buttonRef.current.getBoundingClientRect()
+      );
+      setOpenUp(below < 288 && above > below);
     }
     listRef.current?.focus({ preventScroll: true });
     // eslint-disable-next-line react-hooks/exhaustive-deps -- only on open

client/src/components/Sidebar.tsx

@@ -74,6 +74,7 @@ import {
 } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { api } from "../lib/api";
+import { BRAND_LOGO, BRAND_MARK } from "../lib/brand";
 import { useAuth, usePermissions } from "./AuthGate";
 import { eventBus } from "../lib/eventBus";
 import { WorkspaceTree } from "./WorkspaceTree";
@@ -88,13 +89,6 @@ const NAV_KEYS = [
   { to: "/sessions", icon: FolderOpen, key: "nav:sessions" },
 ] 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;
@@ -496,6 +490,7 @@ export function Sidebar({
             <button
               type="button"
               onClick={onToggle}
+              data-testid="sidebar-tree-rail"
               title={t("lanes:tree.title")}
               aria-label={t("lanes:tree.title")}
               className="flex w-full items-center justify-center rounded-md px-2 py-2 text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg-primary"

client/src/components/UpdateNotifier.tsx

@@ -463,7 +463,10 @@ export function UpdateNotifier() {
           ) : null}
 
           {error ? (
-            <p className="text-xs text-status-danger" role="alert">
+            <p
+              className="text-xs text-status-danger whitespace-pre-wrap break-words max-h-48 overflow-auto"
+              role="alert"
+            >
               {error}
             </p>
           ) : null}

client/src/components/WorkspaceTree.tsx

@@ -5,11 +5,15 @@
  * (`WorkspaceSessionList.tsx`) — no repo grouping, no worktree rows. Picking a
  * workspace — or `+` on its row — opens its home (`/workspace?lane=<id>`); a
  * live tab is opened from its session row. Live status comes from the shared
- * lane list (`useWorkLanes`), live panes from `GET /api/run`, re-read whenever a
+ * lane list (`useLanes`), live panes from `GET /api/run`, re-read whenever a
  * lane's status or session moves (at most every 3 s) and handed over by the
  * Workspace page's own poll (`LIVE_RUNS_EVENT`). Owns its own Add-workspace and
  * destructive modals (lazy-loaded on first open) so the row menu works from any page. Which rows are
- * expanded lives in `projectTreePrefs.ts` (`expanded`).
+ * expanded lives in `projectTreePrefs.ts` (`expanded`). Server mode, admin or
+ * analyst: EVERY workspace, grouped under its owner (`owner_name`; yours
+ * first, no owner last, groups foldable — `collapsedOwners`); one this user
+ * may not change (`canEditLane`) is read only — no menu, no new session, and a
+ * session opens its analysis page (`/sessions/<id>`), never a pane.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -25,10 +29,11 @@ import {
 } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation, useNavigate } from "react-router-dom";
-import { Plus, Search } from "lucide-react";
+import { ChevronDown, ChevronRight, Plus, Search } from "lucide-react";
 import { api, type CwdSuggestion, type RunHandle } from "../lib/api";
 import type { Lane } from "../lib/types";
-import { useWorkLanes } from "../hooks/useLanes";
+import { useLanes } from "../hooks/useLanes";
+import { useAuth, usePermissions } from "./AuthGate";
 import { useAiTools } from "../hooks/useAiTools";
 import { useThrottledValue } from "../hooks/useThrottledValue";
 import {
@@ -70,7 +75,12 @@ export function WorkspaceTree() {
   const navigate = useNavigate();
   const location = useLocation();
   const selected = selectedFrom(location.pathname, location.search);
-  const { lanes, refresh: refreshLanes } = useWorkLanes();
+  const { lanes, refresh: refreshLanes } = useLanes();
+  const { state: auth } = useAuth();
+  const { seesAll, canEditLane } = usePermissions();
+  const meId = auth.mode === "server" ? (auth.user?.id ?? null) : null;
+  // Server mode staff see every user's workspaces, so the list says whose.
+  const grouped = auth.mode === "server" && seesAll;
   const prefs = useProjectTreePrefs();
   const [liveRuns, setLiveRuns] = useState<RunHandle[]>([]);
   const [query, setQuery] = useState("");
@@ -132,10 +142,17 @@ export function WorkspaceTree() {
   const tools = useMemo(() => [...new Set(lanes.map((l) => l.tool))], [lanes]);
   const toolFilter =
     tools.length > 1 && prefs.tool && tools.includes(prefs.tool) ? prefs.tool : null;
-  const sorted = useMemo(
-    () => sortByStoredOrder(lanes, order).filter((l) => !toolFilter || l.tool === toolFilter),
-    [lanes, order, toolFilter]
-  );
+  const sorted = useMemo(() => {
+    const list = sortByStoredOrder(lanes, order).filter(
+      (l) => !toolFilter || l.tool === toolFilter
+    );
+    if (!grouped) return list;
+    // Stable: each owner's workspaces keep the stored order inside the group.
+    const rank = (l: Lane) => (l.owner_id == null ? 2 : l.owner_id === meId ? 0 : 1);
+    return [...list].sort(
+      (a, b) => rank(a) - rank(b) || (a.owner_name ?? "").localeCompare(b.owner_name ?? "")
+    );
+  }, [lanes, order, toolFilter, grouped, meId]);
   const q = query.trim().toLowerCase();
   const nameHit = (l: Lane) =>
     workspaceName(l).toLowerCase().includes(q) || l.cwd.toLowerCase().includes(q);
@@ -312,42 +329,90 @@ export function WorkspaceTree() {
       )}
 
       <div ref={listRef} className="space-y-px px-1">
-        {sorted.map((lane, i) => (
-          <div key={lane.id} className="relative">
-            {dropAt === i && <DropLine />}
-            {visible(lane) && (
-              <WorkspaceRow
-                lane={lane}
-                index={i}
-                selected={selected.lane === lane.id && !selected.run && !selected.session}
-                expanded={expanded(lane.id)}
-                renaming={renamingId === lane.id}
-                onSelect={() => {
-                  select(lane.id);
-                  if (!expanded(lane.id)) setExpanded(lane.id, true);
-                }}
-                onToggle={() => setExpanded(lane.id, !expanded(lane.id))}
-                onNewSession={() => select(lane.id)}
-                onReorder={(from, to) => reorder((ids) => moveLane(ids, from, to))}
-                onMenu={(x, y) => setMenu({ lane, x, y })}
-                onRenameStart={() => setRenamingId(lane.id)}
-                onRenameEnd={(title) => void rename(lane, title)}
-              />
-            )}
-            {expanded(lane.id) && (
-              <WorkspaceSessionList
-                lane={lane}
-                liveRuns={liveRuns}
-                // A workspace found by its name shows all of its sessions.
-                query={q && nameHit(lane) ? "" : query}
-                selectedRunId={selected.lane === lane.id ? selected.run : null}
-                selectedSessionId={selected.lane === lane.id ? selected.session : null}
-                onMatches={q ? (n) => onMatches(lane.id, n) : undefined}
-                hidden={!visible(lane)}
-              />
-            )}
-          </div>
-        ))}
+        {sorted.map((lane, i) => {
+          const owner = ownerKey(lane);
+          // A search opens every group, like it opens every workspace.
+          const folded = grouped && !q && !!prefs.collapsedOwners[owner];
+          const readOnly = !canEditLane(lane);
+          const ownerLabel =
+            lane.owner_id == null
+              ? t("tree.noOwner")
+              : lane.owner_id === meId
+                ? t("tree.ownerYou", { name: lane.owner_name ?? `#${lane.owner_id}` })
+                : (lane.owner_name ?? `#${lane.owner_id}`);
+          const groupStart = grouped && (i === 0 || ownerKey(sorted[i - 1] ?? lane) !== owner);
+          const groupShown = sorted.some((l) => ownerKey(l) === owner && visible(l));
+          return (
+            <div key={lane.id} className="relative">
+              {groupStart && groupShown && (
+                <button
+                  type="button"
+                  data-testid={`workspace-owner-${owner}`}
+                  aria-expanded={!folded}
+                  title={t("tree.ownerToggle", { name: ownerLabel })}
+                  onClick={() =>
+                    writeProjectTreePrefs({
+                      collapsedOwners: { ...prefs.collapsedOwners, [owner]: !folded },
+                    })
+                  }
+                  className={`flex w-full items-center gap-1 rounded px-1 py-1 text-left text-[11px] font-medium text-fg-muted hover:text-fg-primary ${i === 0 ? "" : "mt-2"}`}
+                >
+                  {folded ? (
+                    <ChevronRight className="h-3 w-3 shrink-0" />
+                  ) : (
+                    <ChevronDown className="h-3 w-3 shrink-0" />
+                  )}
+                  <span
+                    aria-hidden
+                    className="flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-surface-4 text-[9px] font-semibold uppercase text-fg-secondary"
+                  >
+                    {lane.owner_name?.[0] ?? "?"}
+                  </span>
+                  <span className="truncate">{ownerLabel}</span>
+                  <span className="ml-auto shrink-0 tabular-nums">
+                    {sorted.filter((l) => ownerKey(l) === owner).length}
+                  </span>
+                </button>
+              )}
+              {dropAt === i && <DropLine />}
+              {visible(lane) && !folded && (
+                <WorkspaceRow
+                  lane={lane}
+                  index={i}
+                  readOnly={readOnly ? t("tree.readOnly", { name: ownerLabel }) : undefined}
+                  selected={selected.lane === lane.id && !selected.run && !selected.session}
+                  expanded={expanded(lane.id)}
+                  renaming={renamingId === lane.id}
+                  onSelect={() => {
+                    // A read-only workspace has no home to open: it only unfolds.
+                    if (readOnly) return setExpanded(lane.id, !expanded(lane.id));
+                    select(lane.id);
+                    if (!expanded(lane.id)) setExpanded(lane.id, true);
+                  }}
+                  onToggle={() => setExpanded(lane.id, !expanded(lane.id))}
+                  onNewSession={() => select(lane.id)}
+                  onReorder={(from, to) => reorder((ids) => moveLane(ids, from, to))}
+                  onMenu={(x, y) => setMenu({ lane, x, y })}
+                  onRenameStart={() => setRenamingId(lane.id)}
+                  onRenameEnd={(title) => void rename(lane, title)}
+                />
+              )}
+              {expanded(lane.id) && !folded && (
+                <WorkspaceSessionList
+                  lane={lane}
+                  liveRuns={liveRuns}
+                  readOnly={readOnly}
+                  // A workspace found by its name shows all of its sessions.
+                  query={q && nameHit(lane) ? "" : query}
+                  selectedRunId={selected.lane === lane.id ? selected.run : null}
+                  selectedSessionId={selected.lane === lane.id ? selected.session : null}
+                  onMatches={q ? (n) => onMatches(lane.id, n) : undefined}
+                  hidden={!visible(lane)}
+                />
+              )}
+            </div>
+          );
+        })}
         {dropAt === sorted.length && (
           <div className="relative">
             <DropLine />
@@ -400,6 +465,9 @@ export function WorkspaceTree() {
   );
 }
 
+/** A workspace's owner group: its user id, or "none". */
+const ownerKey = (l: Lane) => (l.owner_id == null ? "none" : String(l.owner_id));
+
 /** Where a dragged workspace would land: a line on its parent's top edge. */
 function DropLine() {
   return (

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

@@ -5,17 +5,19 @@
  * and a later 401 `EAUTH` brings the login page back. `usePermissions` and
  * `useWorkLanes` mirror the server's roles: an admin changes everything, an
  * analyst reads everything but works only in their own workspaces, a
- * developer only ever sees (and so changes) their own.
+ * developer only ever sees (and so changes) their own. The login page wears the
+ * OS's light/dark; a sign-in swaps in the account's saved appearance.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
 import { describe, it, expect, vi, beforeEach } from "vitest";
-import { act, cleanup, render, screen } from "@testing-library/react";
+import { act, cleanup, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import "../../i18n";
 
 const me = vi.fn();
 const login = vi.fn();
+const prefs = vi.fn();
 const LANES = [
   { id: 1, owner_id: 5 },
   { id: 2, owner_id: 6 },
@@ -25,6 +27,7 @@ vi.mock("../../lib/api", () => ({
   api: {
     auth: { me: () => me(), login: (u: string, p: string) => login(u, p), logout: vi.fn() },
     lanes: { list: () => Promise.resolve({ lanes: LANES }) },
+    me: { prefs: () => prefs(), savePrefs: () => Promise.resolve({ prefs: {} }) },
   },
 }));
 
@@ -52,6 +55,7 @@ const user = { id: 1, username: "mia", role: "developer" };
 beforeEach(() => {
   me.mockReset();
   login.mockReset();
+  prefs.mockReset().mockResolvedValue({ prefs: {} });
   localStorage.clear();
 });
 
@@ -107,15 +111,15 @@ describe("AuthGate", () => {
     render(<AuthGate>app</AuthGate>);
 
     const name = await screen.findByLabelText(/username/i);
-    const pass = screen.getByLabelText(/password/i);
+    const pass = screen.getByLabelText(/^password$/i);
     await userEvent.type(name, "mia");
     await userEvent.type(pass, "nope");
-    await userEvent.click(screen.getByRole("button"));
+    await userEvent.click(screen.getByRole("button", { name: /sign in/i }));
     expect(await screen.findByRole("alert")).toBeInTheDocument();
     expect(screen.queryByText("app")).toBeNull();
 
     await userEvent.type(pass, "member-pass-1");
-    await userEvent.click(screen.getByRole("button"));
+    await userEvent.click(screen.getByRole("button", { name: /sign in/i }));
     expect(await screen.findByText("app")).toBeInTheDocument();
     expect(login).toHaveBeenLastCalledWith("mia", "member-pass-1");
 
@@ -126,6 +130,32 @@ describe("AuthGate", () => {
   });
 });
 
+describe("AuthGate theme", () => {
+  it("wears the OS theme while signed out and the account's own once signed in", async () => {
+    const html = document.documentElement;
+    // The previous user's choice, left in this browser.
+    localStorage.setItem("theme", "dark");
+    localStorage.setItem("agenthub.theme.dark", "darcula");
+    const mq = { matches: false, addEventListener: vi.fn(), removeEventListener: vi.fn() };
+    vi.stubGlobal("matchMedia", () => mq); // the OS is light
+    me.mockResolvedValue({ mode: "server", user: null });
+    prefs.mockResolvedValue({ prefs: { theme: "dark", "agenthub.theme.dark": "orca-dark" } });
+    login.mockResolvedValue({ user });
+    render(<AuthGate>app</AuthGate>);
+
+    await userEvent.type(await screen.findByLabelText(/username/i), "mia");
+    expect(html.dataset.mode).toBe("light");
+    expect(html.hasAttribute("data-theme")).toBe(false);
+
+    await userEvent.type(screen.getByLabelText(/^password$/i), "member-pass-1");
+    await userEvent.click(screen.getByRole("button", { name: /sign in/i }));
+    await waitFor(() => expect(html.dataset.theme).toBe("orca-dark"));
+    expect(html.dataset.mode).toBe("dark");
+    expect(localStorage.getItem("agenthub.theme.dark")).toBe("orca-dark");
+    vi.unstubAllGlobals();
+  });
+});
+
 describe("usePermissions / useWorkLanes", () => {
   const as = async (state: unknown) => {
     cleanup();

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

@@ -2,7 +2,8 @@
  * @file Select.test.tsx
  * @description The shared Select as a WAI-ARIA listbox button: expanded state,
  * listbox/option roles with aria-selected, aria-activedescendant tracking,
- * Arrow/Home/End/Enter/Escape/type-ahead, and focus back on the trigger.
+ * Arrow/Home/End/Enter/Escape/type-ahead, focus back on the trigger, and a
+ * list that flips up by the room in its split pane, not the window's.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -90,4 +91,21 @@ describe("Select (listbox button)", () => {
     fireEvent.click(screen.getByText("Apple"));
     expect(onChange).toHaveBeenCalledWith("a");
   });
+
+  it("opens upward when its pane (data-menu-bounds) has no room below, whatever the window has", () => {
+    const rect = (top: number, bottom: number) => ({ top, bottom }) as DOMRect;
+    render(
+      <div data-menu-bounds data-testid="pane">
+        <Select value="b" onChange={() => {}} options={OPTIONS} label="Fruit" />
+      </div>
+    );
+    // A top pane 0–400 in a 2000px window; the trigger near its bottom.
+    vi.spyOn(screen.getByTestId("pane"), "getBoundingClientRect").mockReturnValue(rect(0, 400));
+    const button = screen.getByRole("button", { name: "Fruit" });
+    vi.spyOn(button, "getBoundingClientRect").mockReturnValue(rect(360, 380));
+    vi.stubGlobal("innerHeight", 2000);
+    fireEvent.click(button);
+    expect(screen.getByRole("listbox").className).toContain("bottom-full");
+    vi.unstubAllGlobals();
+  });
 });

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

@@ -0,0 +1,143 @@
+/**
+ * @file WorkspaceTree.owners.test.tsx
+ * @description Server mode, the sidebar workspace list for an analyst: every
+ * user's workspaces, grouped under their owner (yours first, no owner last),
+ * groups folding and remembered; another user's workspace is read only — no
+ * menu, no new session, and a session opens its analysis page, never a pane.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter, Route, Routes, useLocation } from "react-router-dom";
+import type { Lane, Session } from "../../lib/types";
+
+const ME = { id: 2, username: "ana", role: "analyst" as const };
+
+const lane = (id: number, owner: number | null, name: string | null, title: string) =>
+  ({
+    id,
+    title,
+    cwd: `/w/${id}`,
+    kind: "adopted",
+    tool: "claude",
+    status: "idle",
+    liveness: "idle",
+    pipeline_nodes: [],
+    owner_id: owner,
+    owner_name: name,
+  }) as unknown as Lane;
+
+const lanes = [
+  lane(1, 3, "bob", "Bob app"),
+  lane(2, null, null, "Old"),
+  lane(3, ME.id, "ana", "Mine"),
+  lane(4, 1, "admin", "Admin site"),
+];
+
+vi.mock("../AuthGate", () => ({
+  useAuth: () => ({ state: { mode: "server", user: ME } }),
+  usePermissions: () => ({
+    isAdmin: false,
+    seesAll: true,
+    canEditLane: (l?: { owner_id?: number | null } | null) => l?.owner_id === ME.id,
+  }),
+}));
+vi.mock("../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>();
+  return {
+    ...actual,
+    api: {
+      lanes: { list: vi.fn(async () => ({ lanes, counts: {} })) },
+      sessions: {
+        list: vi.fn(async () => ({
+          sessions: [
+            { id: "s-1", name: "Bob's run", status: "completed", started_at: "2026-10-01" },
+          ] as Session[],
+          total: 1,
+          limit: 6,
+          offset: 0,
+        })),
+      },
+      run: { list: vi.fn(async () => ({ items: [] })) },
+      aiTools: { list: vi.fn(async () => ({ tools: [], default: "claude" })), iconUrl: () => "" },
+    },
+  };
+});
+
+import { WorkspaceTree } from "../WorkspaceTree";
+
+function Where() {
+  const loc = useLocation();
+  return <span data-testid="where">{loc.pathname + loc.search}</span>;
+}
+
+function renderTree() {
+  return render(
+    <MemoryRouter>
+      <Routes>
+        <Route
+          path="*"
+          element={
+            <>
+              <WorkspaceTree />
+              <Where />
+            </>
+          }
+        />
+      </Routes>
+    </MemoryRouter>
+  );
+}
+
+beforeEach(() => localStorage.clear());
+
+describe("WorkspaceTree for an analyst", () => {
+  it("groups every workspace under its owner: yours first, no owner last", async () => {
+    renderTree();
+    await screen.findByTestId("workspace-row-1");
+    const order = screen
+      .getAllByTestId(/^workspace-(owner-\w+|row-\d+)$/)
+      .map((el) => el.dataset.testid);
+    expect(order).toEqual([
+      "workspace-owner-2",
+      "workspace-row-3",
+      "workspace-owner-1",
+      "workspace-row-4",
+      "workspace-owner-3",
+      "workspace-row-1",
+      "workspace-owner-none",
+      "workspace-row-2",
+    ]);
+    expect(screen.getByTestId("workspace-owner-2")).toHaveTextContent("ana (you)");
+  });
+
+  it("folds a group and remembers it", async () => {
+    const user = userEvent.setup();
+    renderTree();
+    await user.click(await screen.findByTestId("workspace-owner-3"));
+    expect(screen.queryByTestId("workspace-row-1")).toBeNull();
+    expect(screen.getByTestId("workspace-owner-3")).toHaveAttribute("aria-expanded", "false");
+    expect(JSON.parse(localStorage.getItem("agenthub.sidebar.projects")!).collapsedOwners).toEqual({
+      "3": true,
+    });
+  });
+
+  it("keeps another user's workspace read only", async () => {
+    const user = userEvent.setup();
+    renderTree();
+    await screen.findByTestId("workspace-row-1");
+    // Yours keeps its controls; theirs has none.
+    expect(screen.getByTestId("workspace-menu-3")).toBeInTheDocument();
+    expect(screen.queryByTestId("workspace-menu-1")).toBeNull();
+    expect(screen.queryByTestId("workspace-new-1")).toBeNull();
+    // Picking it unfolds it instead of opening a workspace home.
+    await user.click(screen.getByTestId("workspace-open-1"));
+    expect(screen.getByTestId("where")).toHaveTextContent(/^\/$/);
+    const list = await screen.findByTestId("workspace-sessions-1");
+    expect(within(list).queryByTestId("workspace-session-archive-s-1")).toBeNull();
+    await user.click(within(list).getByTestId("workspace-session-s-1"));
+    expect(screen.getByTestId("where")).toHaveTextContent("/sessions/s-1");
+  });
+});

client/src/components/conversation/ConversationView.tsx

@@ -5,7 +5,11 @@
  * the message stream via MessageList. Combines a WebSocket subscription, a
  * visibility-gated polling fallback, and a manual refresh button so the view
  * stays caught up even when hooks miss frames or the user is mid-text-only
- * turn (no PreToolUse fires until Stop).
+ * turn (no PreToolUse fires until Stop). The view sticks to its end while
+ * the reader is there: anything that makes it taller — a new line, the live
+ * step, an image loading, the pane shown again after being hidden by CSS
+ * (a `display:none` pane cannot scroll) — keeps the newest in sight, until the
+ * reader scrolls up; `follow` (a chat's send) sends it back to the end.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 /* =============================================================================
@@ -79,12 +83,21 @@ interface ConversationViewProps {
   /** Fill the parent as a chat (a workspace's session view): no toolbar, no
    *  page-height cap — the parent sizes it and puts a composer under it. */
   fill?: boolean;
+  /** Opens a file named in a turn's "Edited N files" card. */
+  onOpenFile?: (path: string) => void;
+  /** The session runs in a pane: show the step in progress. */
+  live?: boolean;
+  /** Changed (a chat's send): back to the end, and stick to it. */
+  follow?: number;
 }
 
 export function ConversationView({
   sessionId,
   initialTranscriptId,
   fill = false,
+  onOpenFile,
+  live = false,
+  follow = 0,
 }: ConversationViewProps) {
   const { t } = useTranslation("sessions");
   const [messages, setMessages] = useState<TranscriptMessage[]>([]);
@@ -105,6 +118,7 @@ export function ConversationView({
   const lastLineRef = useRef(0);
   const firstLineRef = useRef(0);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
   const isAtBottomRef = useRef(true);
   const fetchingRef = useRef(false);
   // When a fetch is in flight and a new trigger arrives (WS event, poll,
@@ -171,7 +185,10 @@ export function ConversationView({
         firstLineRef.current = result.first_line;
       } catch (err) {
         if (cancelled) return;
-        setError(err instanceof Error ? err.message : t("conversation.failedLoad"));
+        // A live pane's new session has no row until its first hook: nothing
+        // to show yet, and the poll below picks it up once it exists.
+        const notYet = live && (err as { code?: string }).code === "NOT_FOUND";
+        if (!notYet) setError(err instanceof Error ? err.message : t("conversation.failedLoad"));
         setMessages([]);
         setTotal(0);
       } finally {
@@ -392,6 +409,30 @@ export function ConversationView({
     }
   }, [hasMore, loadingHistory, loadHistory]);
 
+  // Stick to the end while the reader is there. Scroll events say whether
+  // they are; a size change — of the content, or of the box itself when a
+  // hidden pane is shown — never fires one, so it is watched here.
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    const content = contentRef.current;
+    if (!container || !content || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      if (isAtBottomRef.current) container.scrollTop = container.scrollHeight;
+    });
+    observer.observe(container);
+    observer.observe(content);
+    return () => observer.disconnect();
+  }, []);
+
+  // The reader sent a message: show it, and what follows, as it lands.
+  useEffect(() => {
+    if (!follow) return;
+    isAtBottomRef.current = true;
+    setAwayFromEnd(false);
+    setShowNewMsg(false);
+    scrollToBottom();
+  }, [follow, scrollToBottom]);
+
   // Auto-scroll to bottom after initial load
   useEffect(() => {
     if (!loading && messages.length > 0) {
@@ -450,38 +491,42 @@ export function ConversationView({
       <div
         ref={scrollContainerRef}
         onScroll={handleScroll}
-        className="flex-1 overflow-y-auto"
+        className="flex-1 overflow-y-auto [scrollbar-gutter:stable]"
         style={fill ? { minHeight: 0 } : { maxHeight: "calc(100vh - 320px)", minHeight: 200 }}
       >
-        {/* History loading indicator */}
-        {loadingHistory && (
-          <div className="flex justify-center py-3">
-            <Loader2 className="w-4 h-4 text-fg-muted animate-spin" />
-            <span className="text-xs text-fg-muted ml-2">{t("conversation.loadingHistory")}</span>
-          </div>
-        )}
+        <div ref={contentRef}>
+          {/* History loading indicator */}
+          {loadingHistory && (
+            <div className="flex justify-center py-3">
+              <Loader2 className="w-4 h-4 text-fg-muted animate-spin" />
+              <span className="text-xs text-fg-muted ml-2">{t("conversation.loadingHistory")}</span>
+            </div>
+          )}
 
-        {/* Scroll-up for history hint */}
-        {hasMore && !loadingHistory && !loading && (
-          <div className="flex justify-center py-2">
-            <span className="text-[11px] text-fg-muted">↑ {t("conversation.scrollForOlder")}</span>
-          </div>
-        )}
+          {/* Scroll-up for history hint */}
+          {hasMore && !loadingHistory && !loading && (
+            <div className="flex justify-center py-2">
+              <span className="text-[11px] text-fg-muted">
+                ↑ {t("conversation.scrollForOlder")}
+              </span>
+            </div>
+          )}
 
-        {loading ? (
-          <div className="flex items-center justify-center py-12 text-fg-muted text-sm">
-            {t("conversation.loading")}
-          </div>
-        ) : messages.length === 0 ? (
-          <div className="mx-auto max-w-md py-12 text-center">
-            <p className="text-sm text-fg-secondary">{t("conversation.empty")}</p>
-            <p className="mt-2 text-xs leading-relaxed text-fg-muted">
-              {t("conversation.emptyBody")}
-            </p>
-          </div>
-        ) : (
-          <MessageList messages={messages} loading={false} />
-        )}
+          {loading ? (
+            <div className="flex items-center justify-center py-12 text-fg-muted text-sm">
+              {t("conversation.loading")}
+            </div>
+          ) : messages.length === 0 ? (
+            <div className="mx-auto max-w-md py-12 text-center">
+              <p className="text-sm text-fg-secondary">{t("conversation.empty")}</p>
+              <p className="mt-2 text-xs leading-relaxed text-fg-muted">
+                {t("conversation.emptyBody")}
+              </p>
+            </div>
+          ) : (
+            <MessageList messages={messages} loading={false} onOpenFile={onOpenFile} live={live} />
+          )}
+        </div>
       </div>
 
       {/* Claude Desktop's round "back to the end" button */}

client/src/components/conversation/MarkdownContent.tsx

@@ -4,7 +4,9 @@
  * subset of CommonMark + GFM that actually appears in Claude Code transcripts:
  * fenced code blocks, ATX headings, ordered/unordered lists, task lists, blockquotes,
  * horizontal rules, simple tables, inline code, bold, italic, strikethrough, links,
- * and auto-linked URLs.
+ * and auto-linked URLs. An absolute file path (bare or in inline code) opens
+ * through `OpenFileContext` when the page provides one; `linkify` does the
+ * same links for plain text.
  *
  * Output is built as a React element tree (no dangerouslySetInnerHTML) so user content
  * is escaped by React. Code blocks delegate to <CodeBlock /> for syntax highlighting and
@@ -244,6 +246,71 @@ function parseBlocks(src: string): Block[] {
   return blocks;
 }
 
+/** Opens a file a message names; provided by a view that can show one. */
+export const OpenFileContext = React.createContext<((path: string) => void) | undefined>(undefined);
+
+const LINK_CLASS =
+  "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";
+const URL_RE = /^https?:\/\/[^\s<>()]+[^\s<>().,!?;:'"]/;
+// Two segments at least, so "/" or "/s" stays text; a trailing full stop is prose.
+const PATH_RE = /^(?:\/[^\s/<>()'"`,;:]*[^\s/<>()'"`,;:.!?]){2,}/;
+// A link starts a word: "and/or" or "a/b/c" stays text.
+const atWordStart = (text: string, i: number) => i === 0 || /[\s([{"'`]/.test(text[i - 1]!);
+
+function UrlLink({ url }: { url: string }) {
+  return (
+    <a href={url} target="_blank" rel="noopener noreferrer" className={LINK_CLASS}>
+      {url}
+    </a>
+  );
+}
+
+/** A path as a button that opens it, or as it was when nothing can. */
+function PathLink({ path, children }: { path: string; children: React.ReactNode }) {
+  const open = React.useContext(OpenFileContext);
+  if (!open) return <>{children}</>;
+  return (
+    <button
+      type="button"
+      title={path}
+      onClick={() => open(path)}
+      className={`${LINK_CLASS} text-left`}
+    >
+      {children}
+    </button>
+  );
+}
+
+/** Plain text with its URLs and absolute paths as links — nothing else parsed. */
+export function linkify(text: string): React.ReactNode[] {
+  const out: React.ReactNode[] = [];
+  let buf = "";
+  for (let i = 0; i < text.length;) {
+    const rest = text.slice(i);
+    const url = atWordStart(text, i) && URL_RE.exec(rest)?.[0];
+    const path = !url && atWordStart(text, i) && PATH_RE.exec(rest)?.[0];
+    const hit = url || path;
+    if (!hit) {
+      buf += text[i++];
+      continue;
+    }
+    if (buf) out.push(buf);
+    buf = "";
+    out.push(
+      url ? (
+        <UrlLink key={i} url={url} />
+      ) : (
+        <PathLink key={i} path={hit}>
+          {hit}
+        </PathLink>
+      )
+    );
+    i += hit.length;
+  }
+  if (buf) out.push(buf);
+  return out;
+}
+
 /** Render inline markdown (bold/italic/code/strikethrough/links/auto-links). */
 function renderInline(text: string, baseKey = ""): React.ReactNode[] {
   const out: React.ReactNode[] = [];
@@ -267,11 +334,18 @@ function renderInline(text: string, baseKey = ""): React.ReactNode[] {
     // Inline code: `...`
     const codeM = rest.match(/^`([^`\n]+)`/);
     if (codeM) {
-      push(
+      const code = (
         <code className="rounded bg-surface-4 border border-surface-3 px-1.5 py-0.5 font-mono text-[12.5px] text-status-warning">
           {codeM[1]}
         </code>
       );
+      push(
+        PATH_RE.exec(codeM[1]!)?.[0] === codeM[1] ? (
+          <PathLink path={codeM[1]!}>{code}</PathLink>
+        ) : (
+          code
+        )
+      );
       i += codeM[0].length;
       continue;
     }
@@ -330,22 +404,21 @@ function renderInline(text: string, baseKey = ""): React.ReactNode[] {
     }
 
     // Auto-link
-    const urlM = rest.match(/^https?:\/\/[^\s<>()]+[^\s<>().,!?;:'"]/);
+    const urlM = rest.match(URL_RE);
     if (urlM) {
-      push(
-        <a
-          href={urlM[0]}
-          target="_blank"
-          rel="noopener noreferrer"
-          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>
-      );
+      push(<UrlLink url={urlM[0]} />);
       i += urlM[0].length;
       continue;
     }
 
+    // An absolute path at a word start
+    const pathM = atWordStart(text, i) ? PATH_RE.exec(rest) : null;
+    if (pathM) {
+      push(<PathLink path={pathM[0]}>{pathM[0]}</PathLink>);
+      i += pathM[0].length;
+      continue;
+    }
+
     buf += text[i]!;
     i++;
   }

client/src/components/conversation/MessageList.tsx

@@ -4,7 +4,20 @@
  * transcript: alternating user / assistant rows with collapsible thinking
  * blocks, inline ToolCallBlocks for tool_use / tool_result pairs, and
  * MarkdownContent for prose. Used by ConversationView as the main body of
- * the Conversation tab on the Session detail page.
+ * the Conversation tab on the Session detail page. An image the prompt box
+ * attached reaches the transcript as its saved path; a user turn shows the
+ * image instead (`GET /api/run/drop/:name`), and Claude Code's own
+ * `[Image: source: <drop>]` line for it joins that turn rather than showing as
+ * a System row; URLs and absolute paths in a turn are links (a path opens
+ * through `onOpenFile`). Each assistant turn that changed
+ * files ends with Claude Desktop's "Edited N files" card: every file with the
+ * lines added and removed (the tool results' `diff`); a click opens the file
+ * when the caller can (`onOpenFile`), and a row (or the card's header, for
+ * every file in it) drags into a prompt box as an `@path` attachment. A thinking block that carries text is
+ * the model's narration to the user (Claude Code ≥ 2.1.280 stores real
+ * thinking empty) and reads as prose, like Claude Desktop shows it; a live
+ * chat (`live`) ends, until its turn is over, with what the model is doing
+ * now — the call still running, else "Thinking…" — and for how long.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 /* =============================================================================
@@ -53,7 +66,8 @@
  *
  * ----------------------------------------------------------------------------- */
 
-import { memo, useState, useMemo } from "react";
+import { memo, useEffect, useState, useMemo } from "react";
+import { ImageLightbox } from "../ImageLightbox";
 import { useTranslation } from "react-i18next";
 import i18n from "../../i18n";
 import {
@@ -69,6 +83,8 @@ import {
   Pencil,
   Workflow,
   Cog,
+  FileText,
+  Loader2,
 } from "lucide-react";
 import type { TranscriptMessage, TranscriptContent, TranscriptSender } from "../../lib/types";
 
@@ -112,13 +128,18 @@ const SENDER_STYLES: Record<
   },
 };
 import { ToolCallBlock, buildSummary, renderInput, renderResult } from "./ToolCallBlock";
-import { MarkdownContent } from "./MarkdownContent";
-import { fmt, formatModelName } from "../../lib/format";
+import { MarkdownContent, OpenFileContext, linkify } from "./MarkdownContent";
+import { dragAttachments, projectAttachment } from "../../lib/promptAttach";
+import { fmt, formatModelName, formatMs, parseDate } from "../../lib/format";
 import { parseTuiSegments, stripAnsi, hasTuiTags, type TuiSegment } from "./tuiSegments";
 
 interface MessageListProps {
   messages: TranscriptMessage[];
   loading: boolean;
+  /** Opens a file named in the "Edited N files" card. */
+  onOpenFile?: (path: string) => void;
+  /** The session is running in a pane: show the step in progress. */
+  live?: boolean;
 }
 
 /** Build a map from tool_use id → tool_result for matching */
@@ -135,6 +156,16 @@ function buildToolResultMap(messages: TranscriptMessage[]): Map<string, Transcri
   return map;
 }
 
+/** The whole prompt a message was answered from: `input_tokens` is only its
+ *  uncached tail (a few tokens once the cache is warm), the rest is cache. */
+function promptTokens(u: NonNullable<TranscriptMessage["usage"]>): number {
+  return (
+    (u.input_tokens || 0) + (u.cache_read_input_tokens || 0) + (u.cache_creation_input_tokens || 0)
+  );
+}
+const usageTitle = (u: NonNullable<TranscriptMessage["usage"]>) =>
+  `input ${fmt(u.input_tokens || 0)} · cache read ${fmt(u.cache_read_input_tokens || 0)} · cache write ${fmt(u.cache_creation_input_tokens || 0)} · output ${fmt(u.output_tokens || 0)}`;
+
 /** Detect if text is skill loading content (starts with "Base directory for this skill:") */
 function isSkillContent(text: string): boolean {
   return text.startsWith("Base directory for this skill:");
@@ -390,34 +421,145 @@ type Item =
   | { kind: "row"; key: string; msg: TranscriptMessage }
   | { kind: "user"; key: string; msg: TranscriptMessage }
   | { kind: "text"; key: string; msg: TranscriptMessage; text: string }
-  | { kind: "work"; key: string; blocks: TranscriptContent[] };
+  | { kind: "work"; key: string; blocks: TranscriptContent[] }
+  | { kind: "edits"; key: string; blocks: TranscriptContent[] };
+
+const EDIT_TOOLS = new Set(["Write", "Edit", "MultiEdit", "NotebookEdit"]);
 
 export function chatItems(messages: TranscriptMessage[], keys: string[]): Item[] {
   const items: Item[] = [];
+  // The file-changing calls of the turn so far, closed into one card when the
+  // human speaks again (or the list ends).
+  let edits: TranscriptContent[] = [];
+  const endTurn = (key: string) => {
+    if (edits.length) items.push({ kind: "edits", key: `edits:${key}`, blocks: edits });
+    edits = [];
+  };
   messages.forEach((msg, idx) => {
     const key = keys[idx]!;
     if (msg.type === "session_event") return items.push({ kind: "event", key, msg });
     // Purely tool_result: shown inside its call's block.
     if (msg.type === "user" && !msg.content.some((c) => c.type === "text")) return;
     const sender = msg.sender ?? (msg.type === "assistant" ? "assistant" : "user");
-    if (sender === "user") return items.push({ kind: "user", key, msg });
-    if (sender !== "assistant") return items.push({ kind: "row", key, msg });
+    if (sender === "user") {
+      endTurn(key);
+      return items.push({ kind: "user", key, msg });
+    }
+    if (sender !== "assistant") {
+      // Claude Code's line for the image a prompt attached: the image joins that prompt.
+      const paths = sender === "system" ? imageSourcePaths(msg) : null;
+      const prompt = paths ? [...items].reverse().find((i) => i.kind === "user") : undefined;
+      if (paths && prompt?.kind === "user") {
+        prompt.msg = {
+          ...prompt.msg,
+          content: [
+            ...prompt.msg.content.map((c) =>
+              c.type === "text" && c.text
+                ? { ...c, text: c.text.replace(/\[Image #\d+\]/g, "") }
+                : c
+            ),
+            { type: "text", text: paths.join("\n") },
+          ],
+        };
+        return;
+      }
+      return items.push({ kind: "row", key, msg });
+    }
     msg.content.forEach((block, b) => {
       const last = items[items.length - 1];
-      if (block.type === "tool_use" || (block.type === "thinking" && block.text)) {
+      if (block.type === "tool_use" && EDIT_TOOLS.has(block.name ?? "")) edits.push(block);
+      if (block.type === "tool_use") {
         if (last?.kind === "work") last.blocks.push(block);
         else items.push({ kind: "work", key: `${key}:${b}`, blocks: [block] });
-      } else if (block.type === "text" && block.text?.trim()) {
+      } else if ((block.type === "text" || block.type === "thinking") && block.text?.trim()) {
         items.push({ kind: "text", key: `${key}:${b}`, msg, text: block.text });
       }
     });
   });
+  endTurn(keys[keys.length - 1] ?? "end");
   return items;
 }
 
-export function MessageList({ messages, loading }: MessageListProps) {
+/** Claude Desktop's end-of-turn card: the files the turn changed, each with
+ *  the lines added and removed. A call still running or failed is left out. */
+function EditedFiles({
+  blocks,
+  toolResultMap,
+  onOpenFile,
+}: {
+  blocks: TranscriptContent[];
+  toolResultMap: Map<string, TranscriptContent>;
+  onOpenFile?: (path: string) => void;
+}) {
+  const { t } = useTranslation("sessions");
+  // `counted`: a result carried its +/- lines (an older server sends none).
+  const files = new Map<string, { added: number; removed: number; counted: boolean }>();
+  for (const b of blocks) {
+    const input = (b.input ?? {}) as Record<string, unknown>;
+    const p = input.file_path ?? input.notebook_path;
+    const r = b.id ? toolResultMap.get(b.id) : undefined;
+    if (typeof p !== "string" || !r || r.is_error) continue;
+    const f = files.get(p) ?? { added: 0, removed: 0, counted: false };
+    f.added += r.diff?.added ?? 0;
+    f.removed += r.diff?.removed ?? 0;
+    f.counted ||= !!r.diff;
+    files.set(p, f);
+  }
+  if (files.size === 0) return null;
+  let added = 0;
+  let removed = 0;
+  let counted = false;
+  files.forEach((f) => {
+    added += f.added;
+    removed += f.removed;
+    counted ||= f.counted;
+  });
+  const counts = (a: number, r: number, show = counted) =>
+    show && (
+      <span className="flex-shrink-0 font-mono text-xs">
+        <span className="text-status-success">+{a}</span>{" "}
+        <span className="text-status-danger">−{r}</span>
+      </span>
+    );
+  return (
+    <div data-testid="edited-files" className="overflow-hidden rounded-xl border border-border">
+      <div
+        draggable
+        onDragStart={(e) => dragAttachments(e, [...files.keys()].map(projectAttachment))}
+        className="flex cursor-grab items-center gap-2 border-b border-border bg-surface-1 px-3 py-2 text-sm text-fg-primary"
+      >
+        <Pencil className="h-3.5 w-3.5 text-fg-muted" />
+        <span className="flex-1">{t("conversation.edited", { count: files.size })}</span>
+        {counts(added, removed)}
+      </div>
+      {[...files].map(([p, f]) => (
+        <button
+          key={p}
+          type="button"
+          title={p}
+          disabled={!onOpenFile}
+          onClick={() => onOpenFile?.(p)}
+          draggable
+          onDragStart={(e) => dragAttachments(e, [projectAttachment(p)])}
+          className="flex w-full items-center gap-2 border-b border-border px-3 py-2 text-left text-sm text-fg-secondary last:border-b-0 enabled:hover:bg-surface-2"
+        >
+          <FileText className="h-3.5 w-3.5 flex-shrink-0 text-fg-muted" />
+          <span className="min-w-0 flex-1 truncate">{p.split("/").pop()}</span>
+          {counts(f.added, f.removed, f.counted)}
+          {onOpenFile && <ChevronRight className="h-3.5 w-3.5 flex-shrink-0 text-fg-muted" />}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export function MessageList({ messages, loading, onOpenFile, live = false }: MessageListProps) {
   const { t } = useTranslation("sessions");
   const toolResultMap = useMemo(() => buildToolResultMap(messages), [messages]);
+  const pending = useMemo(
+    () => (live ? workingOn(messages, toolResultMap) : null),
+    [live, messages, toolResultMap]
+  );
   const keys = useMemo(() => messageKeys(messages), [messages]);
   const items = useMemo(() => chatItems(messages, keys), [messages, keys]);
 
@@ -434,33 +576,175 @@ export function MessageList({ messages, loading }: MessageListProps) {
   }
 
   return (
-    <div className="mx-auto w-full max-w-3xl space-y-4 px-4 py-4">
-      {items.map((item) => {
-        switch (item.kind) {
-          case "event":
-            return (
-              <SessionEventRow
-                key={item.key}
-                title={item.msg.title}
-                timestamp={item.msg.timestamp}
-              />
-            );
-          case "row":
-            return <MessageRow key={item.key} msg={item.msg} toolResultMap={toolResultMap} />;
-          case "user":
-            return <UserBubble key={item.key} msg={item.msg} />;
-          case "text":
-            return <AssistantText key={item.key} msg={item.msg} text={item.text} />;
-          case "work":
-            return <WorkGroup key={item.key} blocks={item.blocks} toolResultMap={toolResultMap} />;
-        }
-      })}
+    <OpenFileContext.Provider value={onOpenFile}>
+      <div className="mx-auto w-full max-w-[max(48rem,70%)] space-y-4 px-4 py-4">
+        {items.map((item) => {
+          switch (item.kind) {
+            case "event":
+              return (
+                <SessionEventRow
+                  key={item.key}
+                  title={item.msg.title}
+                  timestamp={item.msg.timestamp}
+                />
+              );
+            case "row":
+              return <MessageRow key={item.key} msg={item.msg} toolResultMap={toolResultMap} />;
+            case "user":
+              return <UserBubble key={item.key} msg={item.msg} />;
+            case "text":
+              return <AssistantText key={item.key} msg={item.msg} text={item.text} />;
+            case "work":
+              return (
+                <WorkGroup key={item.key} blocks={item.blocks} toolResultMap={toolResultMap} />
+              );
+            case "edits":
+              // The card closes a finished turn; one still working has none yet.
+              if (pending && item === items[items.length - 1]) return null;
+              return (
+                <EditedFiles
+                  key={item.key}
+                  blocks={item.blocks}
+                  toolResultMap={toolResultMap}
+                  onOpenFile={onOpenFile}
+                />
+              );
+          }
+        })}
+        {pending && <RunningStep block={pending.block} since={pending.since} />}
+      </div>
+    </OpenFileContext.Provider>
+  );
+}
+
+// No line for this long and no call running: the turn died with no end
+// written (a crash, a kill) — stop saying it works.
+const IDLE_AFTER_MS = 15 * 60_000;
+
+/** What the model is doing while its turn is not over: the call still
+ *  waiting for its result (`block`), else thinking (`block: null`); `since`
+ *  is that line's time. Null once the turn ended. */
+export function workingOn(
+  messages: TranscriptMessage[],
+  results: Map<string, TranscriptContent>,
+  now = Date.now()
+): { block: TranscriptContent | null; since: string | null } | null {
+  for (let i = messages.length - 1; i >= 0; i--) {
+    const msg = messages[i]!;
+    const sender = msg.sender ?? (msg.type === "assistant" ? "assistant" : "user");
+    // A rename marker or a harness line says nothing about the turn.
+    if (msg.type === "session_event" || sender === "system" || sender === "orchestrator") continue;
+    const since = msg.timestamp ?? null;
+    const fresh = !since || now - parseDate(since).getTime() < IDLE_AFTER_MS;
+    if (msg.type === "assistant") {
+      const call = [...msg.content].reverse().find((b) => b.type === "tool_use");
+      if (call?.id && !results.has(call.id)) return { block: call, since };
+      // "tool_use": a call follows. "end_turn" (or none, from an older server): over.
+      return msg.stop_reason === "tool_use" && fresh ? { block: null, since } : null;
+    }
+    // A prompt or a tool result: the model answers it next — unless the user stopped it.
+    const text = msg.content.find((c) => c.type === "text")?.text ?? "";
+    if (text.startsWith("[Request interrupted")) return null;
+    return fresh ? { block: null, since } : null;
+  }
+  return null;
+}
+
+/** Claude Desktop's live line: the step running now and for how long. */
+function RunningStep({ block, since }: { block: TranscriptContent | null; since: string | null }) {
+  const { t } = useTranslation("sessions");
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const timer = window.setInterval(() => setNow(Date.now()), 1000);
+    return () => window.clearInterval(timer);
+  }, []);
+  const input = block?.input as Record<string, unknown> | undefined;
+  const title = !block
+    ? t("conversation.working")
+    : typeof input?.description === "string" && input.description
+      ? input.description
+      : [block.name, buildSummary(block)].filter(Boolean).join(" ");
+  return (
+    <div data-testid="chat-running-step" className="flex items-center gap-2 text-sm text-fg-muted">
+      <Loader2 className="h-3.5 w-3.5 flex-shrink-0 animate-spin text-accent" />
+      <span className="min-w-0 truncate">{title}</span>
+      {since && (
+        <span className="flex-shrink-0 font-mono text-xs">
+          {formatMs(now - parseDate(since).getTime())}
+        </span>
+      )}
     </div>
   );
 }
 
 const meta = "text-[10px] font-mono text-fg-muted";
 
+// What the prompt box sends for an attached image: its saved path under the
+// drop dir (`<data dir>/drops/<16 hex>[-name].png`, server/routes/run.js; the
+// older `<tmp>/agenthub-drops-<uid>/` still in past transcripts).
+const DROP_IMAGE =
+  /(?<=^|\s)\S*[\\/](?:agenthub-drops--?\d+|drops)[\\/]([0-9a-f]{16}(?:-[A-Za-z0-9._-]+)?\.(?:png|jpe?g|gif|webp))(?=\s|$)/gi;
+// Claude Code's own line for an image it read off a pasted path (`isMeta`).
+const IMAGE_SOURCE = /^\[Image: source: (.+)\]$/;
+
+/** A user turn's text without its dropped-image paths (and Claude Code's
+ *  `[Image #N]` placeholders for them), and those images' names. */
+export function splitDropImages(text: string): { text: string; images: string[] } {
+  const images: string[] = [];
+  const rest = text.replace(DROP_IMAGE, (_all, name: string) => {
+    images.push(name);
+    return "";
+  });
+  return {
+    text: images.length
+      ? rest
+          .replace(/\[Image #\d+\]/g, "")
+          .replace(/[ \t]+$/gm, "")
+          .trim()
+      : text,
+    images,
+  };
+}
+
+/** The drop paths of a meta message made only of `[Image: source: <drop>]` lines. */
+function imageSourcePaths(msg: TranscriptMessage): string[] | null {
+  const lines = msg.content.flatMap((c) => (c.type === "text" ? (c.text ?? "").split("\n") : []));
+  const paths = lines.map((l) => IMAGE_SOURCE.exec(l.trim())?.[1] ?? "");
+  return paths.length && paths.every((p) => splitDropImages(p).images.length) ? paths : null;
+}
+
+function DropImage({ name }: { name: string }) {
+  const [open, setOpen] = useState(false);
+  const [gone, setGone] = useState(false);
+  const src = `/api/run/drop/${encodeURIComponent(name)}`;
+  // Drops are pruned after a day: the name is all that is left to show.
+  if (gone)
+    return (
+      <span className="flex items-center gap-1.5 rounded-lg border border-border bg-surface-2 px-2 py-1 text-xs text-fg-muted">
+        <FileText className="h-3.5 w-3.5 shrink-0" />
+        <span className="truncate">{name.replace(/^[0-9a-f]{16}-?/, "") || name}</span>
+      </span>
+    );
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        className="block overflow-hidden rounded-xl border border-border bg-surface-2 hover:border-accent/50"
+      >
+        <img
+          src={src}
+          alt={name}
+          loading="lazy"
+          onError={() => setGone(true)}
+          className="max-h-48 max-w-64 object-contain"
+        />
+      </button>
+      {open && <ImageLightbox src={src} alt={name} onClose={() => setOpen(false)} />}
+    </>
+  );
+}
+
 /** The human's turn: a bubble on the right, its time on hover. A long one (a
  *  paste, a compaction summary) shows its first lines until opened. */
 const LONG_BUBBLE = 800;
@@ -468,35 +752,54 @@ const UserBubble = memo(function UserBubble({ msg }: { msg: TranscriptMessage })
   const { t } = useTranslation("sessions");
   const long = msg.content.reduce((n, c) => n + (c.text?.length ?? 0), 0) > LONG_BUBBLE;
   const [open, setOpen] = useState(false);
+  const blocks = useMemo(
+    () =>
+      msg.content.map((block) =>
+        block.type === "text" && block.text ? splitDropImages(block.text) : null
+      ),
+    [msg.content]
+  );
+  const images = blocks.flatMap((b) => b?.images ?? []);
+  const hasText = blocks.some((b) => b?.text);
   return (
     <div
       data-testid="chat-user"
       style={{ contentVisibility: "auto", containIntrinsicSize: "auto 60px" }}
       className="group flex flex-col items-end gap-1"
     >
-      <div
-        className={`max-w-[85%] min-w-0 space-y-2 rounded-2xl bg-surface-2 px-4 py-2.5 text-sm text-fg-primary ${
-          long && !open
-            ? "max-h-40 overflow-hidden [mask-image:linear-gradient(to_bottom,black_60%,transparent)]"
-            : ""
-        }`}
-      >
-        {msg.content.map((block, b) => {
-          if (block.type !== "text" || !block.text) return null;
-          // Plain typing reads as typed; anything structured keeps its rendering.
-          const plain =
-            !hasTuiTags(block.text) &&
-            !isSkillContent(block.text) &&
-            !isTaskNotification(block.text);
-          return plain ? (
-            <p key={b} className="whitespace-pre-wrap break-words leading-relaxed">
-              {stripAnsi(block.text).trim()}
-            </p>
-          ) : (
-            renderTextBlock(block.text, b)
-          );
-        })}
-      </div>
+      {images.length > 0 && (
+        <div
+          data-testid="chat-user-images"
+          className="flex max-w-[85%] flex-wrap justify-end gap-2"
+        >
+          {images.map((name) => (
+            <DropImage key={name} name={name} />
+          ))}
+        </div>
+      )}
+      {hasText && (
+        <div
+          className={`max-w-[85%] min-w-0 space-y-2 rounded-2xl bg-surface-2 px-4 py-2.5 text-sm text-fg-primary ${
+            long && !open
+              ? "max-h-40 overflow-hidden [mask-image:linear-gradient(to_bottom,black_60%,transparent)]"
+              : ""
+          }`}
+        >
+          {blocks.map((block, b) => {
+            const text = block?.text;
+            if (!text) return null;
+            // Plain typing reads as typed; anything structured keeps its rendering.
+            const plain = !hasTuiTags(text) && !isSkillContent(text) && !isTaskNotification(text);
+            return plain ? (
+              <p key={b} className="whitespace-pre-wrap break-words leading-relaxed">
+                {linkify(stripAnsi(text).trim())}
+              </p>
+            ) : (
+              renderTextBlock(text, b)
+            );
+          })}
+        </div>
+      )}
       {long && (
         <button
           type="button"
@@ -540,8 +843,8 @@ const AssistantText = memo(function AssistantText({
       >
         {msg.model && <span>{formatModelName(msg.model)}</span>}
         {msg.usage && (
-          <span>
-            ↓ {fmt(msg.usage.input_tokens)} · ↑ {fmt(msg.usage.output_tokens)}
+          <span title={usageTitle(msg.usage)}>
+            ↓ {fmt(promptTokens(msg.usage))} · ↑ {fmt(msg.usage.output_tokens)}
           </span>
         )}
         {msg.timestamp && <span>{formatLocalTime(msg.timestamp)}</span>}
@@ -592,6 +895,8 @@ const WORK_KIND: Record<string, string> = {
 };
 
 /** "Ran 3 commands, edited 2 files" — or "Thinking" when it only thought. */
+const KIND_ORDER = ["commands", "edits", "reads", "searches", "web", "agents", "tools"];
+
 export function workLabel(blocks: TranscriptContent[]): string {
   const counts = new Map<string, number>();
   for (const b of blocks) {
@@ -600,7 +905,9 @@ export function workLabel(blocks: TranscriptContent[]): string {
     counts.set(kind, (counts.get(kind) ?? 0) + 1);
   }
   if (!counts.size) return i18n.t("sessions:conversation.thinking");
+  // Claude Desktop's order: commands, edits, reads, … and other tools last.
   const text = [...counts]
+    .sort(([a], [b]) => KIND_ORDER.indexOf(a) - KIND_ORDER.indexOf(b))
     .map(([kind, count]) => i18n.t(`sessions:conversation.work.${kind}`, { count }))
     .join(", ");
   return text.charAt(0).toUpperCase() + text.slice(1);
@@ -751,8 +1058,11 @@ const MessageRow = memo(function MessageRow({
             </span>
           )}
           {msg.usage && (
-            <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
+              title={usageTitle(msg.usage)}
+              className="text-[10px] text-fg-muted font-mono inline-flex items-center gap-1"
+            >
+              <span className="text-status-success/70">↓ {fmt(promptTokens(msg.usage))}</span>
               <span className="text-fg-muted">·</span>
               <span className="text-syntax-number">↑ {fmt(msg.usage.output_tokens)}</span>
             </span>

client/src/components/conversation/__tests__/ConversationView.follow.test.tsx

@@ -0,0 +1,93 @@
+/**
+ * @file ConversationView.follow.test.tsx
+ * @description A chat sticks to its end: when it grows or is shown again
+ * after being hidden (a size change, which fires no scroll event) it scrolls
+ * to the newest while the reader is at the end, leaves a reader who scrolled
+ * up alone, and a send (`follow`) brings it back to the end.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ConversationView } from "../ConversationView";
+
+vi.mock("../../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>();
+  return {
+    ...actual,
+    api: {
+      sessions: {
+        transcripts: vi.fn(async () => ({ transcripts: [] })),
+        transcript: vi.fn(async () => ({
+          messages: [
+            {
+              type: "user",
+              content: [{ type: "text", text: "hello" }],
+              timestamp: "2026-10-09T00:00:00Z",
+            },
+          ],
+          total: 1,
+          has_more: false,
+          first_line: 1,
+          last_line: 1,
+        })),
+      },
+    },
+  };
+});
+
+let resize: (() => void) | null = null;
+const original = globalThis.ResizeObserver;
+beforeEach(() => {
+  resize = null;
+  // @ts-expect-error test stub
+  globalThis.ResizeObserver = class {
+    constructor(cb: () => void) {
+      resize = cb;
+    }
+    observe() {}
+    disconnect() {}
+  };
+  vi.spyOn(window, "requestAnimationFrame").mockImplementation((cb) => {
+    cb(0);
+    return 0;
+  });
+});
+afterEach(() => {
+  globalThis.ResizeObserver = original;
+  vi.restoreAllMocks();
+});
+
+/** The scroll box, with the layout jsdom does not compute. */
+function box(height: number) {
+  const el = screen.getByText("hello").closest(".overflow-y-auto") as HTMLElement;
+  Object.defineProperty(el, "scrollHeight", { configurable: true, value: height });
+  Object.defineProperty(el, "clientHeight", { configurable: true, value: 200 });
+  Object.defineProperty(el, "scrollTop", { configurable: true, writable: true, value: 0 });
+  return el;
+}
+
+describe("ConversationView sticks to its end", () => {
+  it("scrolls to the newest when it grows or is shown again, unless the reader scrolled up", async () => {
+    const view = render(<ConversationView sessionId="s1" fill live />);
+    await screen.findByText("hello");
+    const el = box(1000);
+    // Shown again after display:none, or taller: only a resize says so.
+    act(() => resize?.());
+    expect(el.scrollTop).toBe(1000);
+
+    // The reader scrolls up: growing no longer pulls them down.
+    el.scrollTop = 100;
+    fireEvent.scroll(el);
+    Object.defineProperty(el, "scrollHeight", { configurable: true, value: 1400 });
+    act(() => resize?.());
+    expect(el.scrollTop).toBe(100);
+
+    // They send a message: back to the end, and it sticks again.
+    view.rerender(<ConversationView sessionId="s1" fill live follow={1} />);
+    expect(el.scrollTop).toBe(1400);
+    Object.defineProperty(el, "scrollHeight", { configurable: true, value: 1600 });
+    act(() => resize?.());
+    expect(el.scrollTop).toBe(1600);
+  });
+});

client/src/components/conversation/__tests__/ConversationView.notYet.test.tsx

@@ -0,0 +1,37 @@
+/**
+ * @file ConversationView.notYet.test.tsx
+ * @description A live pane's new session has no row until its first hook:
+ * its 404 shows an empty chat, not "Session not found"; a replay still shows it.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ConversationView } from "../ConversationView";
+
+const transcript = vi.hoisted(() =>
+  vi.fn(async () => {
+    throw Object.assign(new Error("Session not found"), { code: "NOT_FOUND", status: 404 });
+  })
+);
+vi.mock("../../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>();
+  return {
+    ...actual,
+    api: { sessions: { transcripts: vi.fn(async () => ({ transcripts: [] })), transcript } },
+  };
+});
+
+describe("ConversationView before a session's first hook", () => {
+  it("shows no error for a live pane", async () => {
+    render(<ConversationView sessionId="new" fill live />);
+    await waitFor(() => expect(transcript).toHaveBeenCalled());
+    await new Promise((r) => setTimeout(r, 0));
+    expect(screen.queryByText("Session not found")).toBeNull();
+  });
+
+  it("still reports it when not live", async () => {
+    render(<ConversationView sessionId="gone" fill />);
+    expect(await screen.findByText("Session not found")).toBeTruthy();
+  });
+});

client/src/components/conversation/__tests__/MessageList.edits.test.tsx

@@ -0,0 +1,103 @@
+/**
+ * @file MessageList.edits.test.tsx
+ * @description Each assistant turn that changed files ends with Claude
+ * Desktop's "Edited N files" card: one row per file with the lines added and
+ * removed summed over the turn, a failed call left out, a row click handed
+ * to the caller, and a row (or the header, every file) dragged as `@path`
+ * attachments for a prompt box.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+import { describe, it, expect, vi } from "vitest";
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import { MessageList } from "../MessageList";
+import type { TranscriptMessage } from "../../../lib/types";
+
+const at = "2026-10-09T08:00:00.000Z";
+const user = (text: string): TranscriptMessage =>
+  ({
+    type: "user",
+    sender: "user",
+    timestamp: at,
+    content: [{ type: "text", text }],
+  }) as TranscriptMessage;
+const call = (id: string, name: string, file_path: string): TranscriptMessage =>
+  ({
+    type: "assistant",
+    sender: "assistant",
+    timestamp: at,
+    content: [{ type: "tool_use", id, name, input: { file_path } }],
+  }) as TranscriptMessage;
+const result = (id: string, diff?: { added: number; removed: number }, is_error = false) =>
+  ({
+    type: "user",
+    sender: "tool",
+    timestamp: at,
+    content: [{ type: "tool_result", id, output: "ok", is_error, ...(diff ? { diff } : {}) }],
+  }) as TranscriptMessage;
+
+describe("the Edited N files card", () => {
+  it("sums each file's lines over the turn and opens a file on click", () => {
+    const onOpenFile = vi.fn();
+    render(
+      <MessageList
+        loading={false}
+        onOpenFile={onOpenFile}
+        messages={[
+          user("fix it"),
+          call("1", "Edit", "/w/a.ts"),
+          result("1", { added: 3, removed: 1 }),
+          call("2", "Write", "/w/b.md"),
+          result("2", { added: 10, removed: 0 }),
+          call("3", "Edit", "/w/a.ts"),
+          result("3", { added: 2, removed: 2 }),
+          call("4", "Edit", "/w/c.ts"),
+          result("4", undefined, true),
+          user("thanks"),
+          call("5", "Read", "/w/a.ts"),
+          result("5"),
+        ]}
+      />
+    );
+    const cards = screen.getAllByTestId("edited-files");
+    expect(cards).toHaveLength(1); // the second turn only read
+    const card = cards[0]!;
+    expect(within(card).getByText("Edited 2 files")).toBeTruthy();
+    expect(within(card).getByText("+15")).toBeTruthy();
+    expect(within(card).getByText("+5")).toBeTruthy(); // a.ts: 3+2 added
+    expect(within(card).queryByText("c.ts")).toBeNull(); // failed
+    fireEvent.click(within(card).getByTitle("/w/b.md"));
+    expect(onOpenFile).toHaveBeenCalledWith("/w/b.md");
+  });
+
+  it("drags a row as its @path attachment, and the header as every file", () => {
+    render(
+      <MessageList
+        loading={false}
+        messages={[
+          user("fix it"),
+          call("1", "Edit", "/w/a.ts"),
+          result("1", { added: 1, removed: 0 }),
+          call("2", "Write", "/w/b.md"),
+          result("2", { added: 2, removed: 0 }),
+        ]}
+      />
+    );
+    const card = screen.getByTestId("edited-files");
+    const drag = (el: Element) => {
+      const data: Record<string, string> = {};
+      fireEvent.dragStart(el, {
+        dataTransfer: { setData: (k: string, v: string) => (data[k] = v), effectAllowed: "" },
+      });
+      return data;
+    };
+    const one = drag(within(card).getByTitle("/w/b.md"));
+    expect(JSON.parse(one["application/x-agenthub-attach"]!)).toEqual([
+      { path: "@/w/b.md", name: "b.md" },
+    ]);
+    expect(one["text/plain"]).toBe("/w/b.md");
+    const all = drag(within(card).getByText("Edited 2 files"));
+    expect(
+      JSON.parse(all["application/x-agenthub-attach"]!).map((a: { path: string }) => a.path)
+    ).toEqual(["@/w/a.ts", "@/w/b.md"]);
+  });
+});

client/src/components/conversation/__tests__/MessageList.images.test.tsx

@@ -0,0 +1,113 @@
+/**
+ * @file MessageList.images.test.tsx
+ * @description An image the prompt box attached reaches the transcript as its
+ * saved drop path; the user's turn shows the image (served by
+ * `GET /api/run/drop/:name`), opens it full size on the page, and keeps any
+ * other path as typed. Claude Code turns a pasted drop path into an image
+ * block plus an `[Image: source: <path>]` meta line: the image joins the turn.
+ * URLs and absolute paths in a turn are links.
+ * @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 { MessageList, splitDropImages } from "../MessageList";
+import type { TranscriptMessage } from "../../../lib/types";
+
+const SHOT = "366d0a87d12176a2-image.png";
+
+describe("dropped images in a user turn", () => {
+  it("splitDropImages takes drop-dir image paths out of the text", () => {
+    expect(
+      splitDropImages(`Đây là cli và version đã có. /tmp/agenthub-drops-1001/${SHOT}`)
+    ).toEqual({ text: "Đây là cli và version đã có.", images: [SHOT] });
+    // Windows' temp dir, no prefix name.
+    expect(splitDropImages("C:\\Temp\\agenthub-drops--1\\0123456789abcdef.webp").images).toEqual([
+      "0123456789abcdef.webp",
+    ]);
+    // The drop dir since the data-dir move.
+    expect(splitDropImages(`[Image #1]fix this /home/me/.claude/agenthub/drops/${SHOT}`)).toEqual({
+      text: "fix this",
+      images: [SHOT],
+    });
+    // Not a drop, or not an image: left as typed.
+    for (const text of [
+      "/home/me/shot.png",
+      "/tmp/agenthub-drops-1001/0123456789abcdef-spec.pdf",
+    ]) {
+      expect(splitDropImages(text)).toEqual({ text, images: [] });
+    }
+  });
+
+  it("shows the image instead of its path, full size on click", () => {
+    const messages = [
+      {
+        type: "user",
+        sender: "user",
+        timestamp: "2026-10-09T08:00:00.000Z",
+        content: [{ type: "text", text: `look at this /tmp/agenthub-drops-1001/${SHOT}` }],
+      },
+    ] as TranscriptMessage[];
+    render(<MessageList messages={messages} loading={false} />);
+
+    const bubble = screen.getByTestId("chat-user");
+    expect(bubble).toHaveTextContent("look at this");
+    expect(bubble).not.toHaveTextContent("agenthub-drops");
+    const img = screen.getByRole("img", { name: SHOT });
+    expect(img.getAttribute("src")).toBe(`/api/run/drop/${SHOT}`);
+
+    fireEvent.click(img);
+    expect(screen.getByTestId("image-lightbox").parentElement).toBe(document.body);
+  });
+
+  it("folds Claude Code's [Image: source:] meta line into the turn", () => {
+    const messages = [
+      {
+        type: "user",
+        sender: "user",
+        timestamp: "2026-10-09T09:43:00.000Z",
+        content: [{ type: "text", text: "[Image #1]Hãy giúp tôi fix lỗi" }],
+      },
+      {
+        type: "user",
+        sender: "system",
+        timestamp: "2026-10-09T09:43:11.000Z",
+        content: [
+          { type: "text", text: `[Image: source: /home/me/.claude/agenthub/drops/${SHOT}]` },
+        ],
+      },
+    ] as TranscriptMessage[];
+    render(<MessageList messages={messages} loading={false} />);
+
+    expect(screen.queryByText("System")).toBeNull();
+    const bubble = screen.getByTestId("chat-user");
+    expect(bubble).toHaveTextContent("Hãy giúp tôi fix lỗi");
+    expect(bubble).not.toHaveTextContent("[Image #1]");
+    expect(screen.getByRole("img", { name: SHOT }).getAttribute("src")).toBe(
+      `/api/run/drop/${SHOT}`
+    );
+  });
+
+  it("makes URLs and absolute paths clickable", () => {
+    const opened: string[] = [];
+    const messages = [
+      {
+        type: "user",
+        sender: "user",
+        timestamp: "2026-10-09T09:43:00.000Z",
+        content: [
+          {
+            type: "text",
+            text: "xem (https://git.example.com/a/issues/69) và /home/me/repo/server/x.js.",
+          },
+        ],
+      },
+    ] as TranscriptMessage[];
+    render(<MessageList messages={messages} loading={false} onOpenFile={(p) => opened.push(p)} />);
+
+    const link = screen.getByRole("link", { name: "https://git.example.com/a/issues/69" });
+    expect(link.getAttribute("href")).toBe("https://git.example.com/a/issues/69");
+    expect(link.getAttribute("target")).toBe("_blank");
+    fireEvent.click(screen.getByRole("button", { name: "/home/me/repo/server/x.js" }));
+    expect(opened).toEqual(["/home/me/repo/server/x.js"]);
+  });
+});

client/src/components/conversation/__tests__/MessageList.sender.test.tsx

@@ -9,7 +9,7 @@
  */
 import { describe, it, expect } from "vitest";
 import { fireEvent, render, screen } from "@testing-library/react";
-import { MessageList, workLabel } from "../MessageList";
+import { MessageList, workLabel, workingOn } from "../MessageList";
 import type { TranscriptMessage } from "../../../lib/types";
 
 function msg(partial: Partial<TranscriptMessage>): TranscriptMessage {
@@ -76,5 +76,132 @@ describe("MessageList — sender attribution", () => {
       "Ran 2 commands, edited a file, read a file"
     );
     expect(workLabel([{ type: "thinking", text: "hm" }])).toBe("Thinking");
+    // Desktop's fixed order, whatever ran first: other tools always last.
+    expect(workLabel([use("mcp__x__y"), use("Read"), use("Bash")])).toBe(
+      "Ran 1 command, read a file, used a tool"
+    );
+  });
+
+  it("reads a thinking block's text as narration, between two groups", () => {
+    const call = (id: string) =>
+      msg({
+        type: "assistant",
+        sender: "assistant",
+        content: [{ type: "tool_use", id, name: "Bash", input: { command: `echo ${id}` } }],
+      });
+    const result = (id: string) => msg({ content: [{ type: "tool_result", id, output: "ok" }] });
+    const say = (text: string) =>
+      msg({ type: "assistant", sender: "assistant", content: [{ type: "thinking", text }] });
+    render(
+      <MessageList
+        loading={false}
+        messages={[call("a"), result("a"), say("Found an issue."), say(""), call("b"), result("b")]}
+      />
+    );
+    expect(screen.getAllByTestId("chat-tools")).toHaveLength(2);
+    expect(screen.getByText("Found an issue.")).toBeTruthy();
+  });
+
+  it("shows the whole prompt as ↓, not just its uncached tail", () => {
+    render(
+      <MessageList
+        loading={false}
+        messages={[
+          msg({
+            type: "assistant",
+            sender: "assistant",
+            content: [{ type: "text", text: "done" }],
+            usage: {
+              input_tokens: 2,
+              output_tokens: 40,
+              cache_read_input_tokens: 120000,
+              cache_creation_input_tokens: 3000,
+            },
+          }),
+        ]}
+      />
+    );
+    expect(screen.getByText(/↓ 123/)).toBeTruthy();
+  });
+
+  it("ends a live chat with the step still running", () => {
+    const messages = [
+      msg({ type: "user", sender: "user", content: [{ type: "text", text: "test it" }] }),
+      msg({
+        type: "assistant",
+        sender: "assistant",
+        timestamp: new Date(Date.now() - 65_000).toISOString(),
+        content: [
+          {
+            type: "tool_use",
+            id: "t1",
+            name: "Bash",
+            input: { command: "npm test", description: "Run the full client suite" },
+          },
+        ],
+      }),
+    ];
+    const { rerender } = render(<MessageList loading={false} messages={messages} live />);
+    const row = screen.getByTestId("chat-running-step");
+    expect(row).toHaveTextContent("Run the full client suite");
+    expect(row).toHaveTextContent(/1m \ds/);
+    // Its result arrived: nothing is running any more.
+    rerender(
+      <MessageList
+        loading={false}
+        live
+        messages={[
+          ...messages,
+          msg({ content: [{ type: "tool_result", id: "t1", output: "ok" }] }),
+        ]}
+      />
+    );
+    expect(screen.queryByTestId("chat-running-step")).toBeNull();
+  });
+
+  it("knows what a live turn is doing until it ends", () => {
+    const now = Date.parse("2026-06-26T08:20:00.000Z");
+    const at = "2026-06-26T08:19:00.000Z";
+    const prompt = msg({ type: "user", sender: "user", timestamp: at });
+    const call = msg({
+      type: "assistant",
+      sender: "assistant",
+      timestamp: at,
+      stop_reason: "tool_use",
+      content: [{ type: "tool_use", id: "t1", name: "Bash", input: { command: "ls" } }],
+    });
+    const result = msg({
+      sender: "tool",
+      timestamp: at,
+      content: [{ type: "tool_result", id: "t1", output: "ok" }],
+    });
+    const reply = (stop_reason?: string) =>
+      msg({
+        type: "assistant",
+        sender: "assistant",
+        timestamp: at,
+        stop_reason,
+        content: [{ type: "text", text: "ok" }],
+      });
+    const results = (m: ReturnType<typeof msg>[]) =>
+      new Map(
+        m.flatMap((x) => x.content.filter((c) => c.type === "tool_result").map((c) => [c.id!, c]))
+      );
+    const state = (m: ReturnType<typeof msg>[]) => workingOn(m, results(m), now);
+
+    expect(state([prompt])).toEqual({ block: null, since: at }); // thinking on the prompt
+    expect(state([prompt, call])?.block?.id).toBe("t1"); // the call is running
+    expect(state([prompt, call, result])).toEqual({ block: null, since: at }); // thinking again
+    expect(state([prompt, call, result, reply("tool_use")])?.block).toBeNull(); // narration, a call follows
+    expect(state([prompt, call, result, reply("end_turn")])).toBeNull(); // turn over
+    expect(state([prompt, call, result, reply()])).toBeNull(); // an older server: no stop_reason
+    const stopped = msg({
+      type: "user",
+      sender: "user",
+      content: [{ type: "text", text: "[Request interrupted by user]" }],
+    });
+    expect(state([prompt, call, result, stopped])).toBeNull();
+    // Silent for 15 minutes with nothing running: the turn died.
+    expect(workingOn([prompt], new Map(), now + 20 * 60_000)).toBeNull();
   });
 });

client/src/components/lanes/AddLaneModal.tsx

@@ -10,7 +10,8 @@
  * (Claude Code or Codex) — this choice is immutable after creation. Either
  * mode's path field can be filled by typing, by the CwdAutocomplete
  * suggestions, or by Browse (`PathPickButton`: the OS's own folder picker
- * opened by the server, the in-app `FolderBrowseModal` where it cannot be).
+ * opened by the server, the in-app `FolderBrowseModal` where it cannot be) —
+ * which a click into the field opens too.
  * The worktree lane returned is `status: "provisioning"`:
  * the route answers before the actual `git worktree add` runs, so this
  * component polls `GET /api/lanes/:id` until that finishes before running the
@@ -29,6 +30,7 @@ import type { CwdSuggestion } from "../../lib/api";
 import type { Lane, LaneWorktree } from "../../lib/types";
 import { useAiTools } from "../../hooks/useAiTools";
 import { AiToolIcon } from "../AiToolIcon";
+import { readDefaultTool } from "../../lib/sessionDefaults";
 
 /** Polls the lane until the background `git worktree add` finishes (status
  *  leaves "provisioning"), or gives up after `timeoutMs`. Returns the final
@@ -111,7 +113,14 @@ export function AddLaneModal({
   // 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";
+  // The account's own pick (first-run setup), while it is installed and on.
+  const ownTool = readDefaultTool();
+  const defaultTool =
+    (ownTool && aiTools.tools.some((x) => x.id === ownTool && x.installed && x.enabled)
+      ? ownTool
+      : null) ??
+    aiTools.defaultId ??
+    "claude";
   const tool = pickedTool ?? defaultTool;
   // Installed + enabled, the default first.
   const toolChoices = aiTools.tools
@@ -319,6 +328,7 @@ export function AddLaneModal({
   const titleId = useId();
   const panelRef = useRef<HTMLDivElement>(null);
   const cancelRef = useRef<HTMLButtonElement>(null);
+  const browseRef = useRef<HTMLButtonElement>(null);
   useDialog(open, panelRef, handleCancel, cancelRef);
 
   // A summary on screen means the lane already exists and a step failed, so
@@ -355,6 +365,7 @@ export function AddLaneModal({
         role="dialog"
         aria-modal="true"
         aria-labelledby={titleId}
+        data-tour="add-lane"
       >
         <div className="flex items-center gap-3 border-b border-border px-5 py-3.5">
           <h3 id={titleId} className="min-w-0 flex-1 text-sm font-semibold text-fg-primary">
@@ -449,8 +460,15 @@ export function AddLaneModal({
             <label className="mb-1 block text-xs text-fg-secondary" htmlFor="add-lane-repo">
               {mode === "repo" ? t("addLaneRepoLabelAdopt") : t("addLaneRepoLabel")}
             </label>
-            <div className="flex gap-1.5">
-              <div className="min-w-0 flex-1">
+            <div className="flex gap-1.5" data-tour="add-lane-folder">
+              {/* A click into the path opens the picker, as Browse does (the
+                OS's own where it can be); typing still works from the keyboard. */}
+              <div
+                className="min-w-0 flex-1"
+                onClick={(e) => {
+                  if ((e.target as HTMLElement).tagName === "INPUT") browseRef.current?.click();
+                }}
+              >
                 <CwdAutocomplete
                   inputId="add-lane-repo"
                   value={sourceRepo}
@@ -458,7 +476,12 @@ export function AddLaneModal({
                   suggestions={cwdSuggestions}
                 />
               </div>
-              <PathPickButton start={sourceRepo} onPick={setSourceRepo} showLabel />
+              <PathPickButton
+                start={sourceRepo}
+                onPick={setSourceRepo}
+                showLabel
+                buttonRef={browseRef}
+              />
             </div>
             <p className="mt-1 text-[10px] text-fg-muted">
               {mode === "repo" ? t("addLaneRepoHintAdopt") : t("addLaneRepoHint")}
@@ -695,6 +718,7 @@ export function AddLaneModal({
             type="button"
             onClick={done ? handleCancel : submit}
             disabled={busy || disabled}
+            data-tour="add-lane-create"
             className="btn-primary text-xs disabled:opacity-50"
           >
             {done ? t("addLaneSetupClose") : t("add")}

client/src/components/lanes/FolderBrowseModal.tsx

@@ -66,6 +66,7 @@ export function FolderBrowseModal({
         role="dialog"
         aria-modal="true"
         aria-label={t("browse.title")}
+        data-tour="folder-browse"
       >
         <div className="border-b border-border p-3">
           <div className="truncate font-mono text-xs text-fg-secondary" title={listing?.path}>

client/src/components/lanes/InterruptedSessionsPrompt.tsx

@@ -0,0 +1,155 @@
+/**
+ * @file InterruptedSessionsPrompt.tsx
+ * @description The app-wide "resume interrupted sessions?" dialog. A session
+ * whose pane died under it — the machine shut down, tmux was killed, the CLI
+ * crashed — is listed by `GET /api/run/interrupted`; the user ticks the ones
+ * to resume (each in the first free tab of its workspace, with its run's
+ * model and effort) or resumes none. Either answer dismisses the whole list,
+ * so it is asked once; a resume that failed stays listed. Refetched on the
+ * `runs_interrupted` broadcast, so a tmux that dies under an open dashboard
+ * asks too. Resuming is the explicit click here, never the dialog opening.
+ *
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { api, type InterruptedRun } from "../../lib/api";
+import { eventBus } from "../../lib/eventBus";
+import { timeAgo } from "../../lib/format";
+import { toast } from "../../lib/toast";
+import { Checkbox } from "../Checkbox";
+import { ConfirmModal } from "../ConfirmModal";
+import { startInFreeTabDetailed } from "./startSession";
+
+const label = (it: InterruptedRun) => it.lane_title || it.lane_cwd;
+
+export function InterruptedSessionsPrompt() {
+  const { t } = useTranslation("run");
+  const navigate = useNavigate();
+  const [items, setItems] = useState<InterruptedRun[]>([]);
+  const [picked, setPicked] = useState<Set<string>>(new Set());
+  const [busy, setBusy] = useState(false);
+  // A refetch keeps the user's ticks; a session not seen before starts ticked.
+  const seen = useRef(new Set<string>());
+
+  const load = useCallback(() => {
+    api.run
+      .interrupted()
+      .then((r) => {
+        const fresh = r.items.filter((i) => !seen.current.has(i.session_id));
+        fresh.forEach((i) => seen.current.add(i.session_id));
+        setItems(r.items);
+        setPicked((p) => {
+          const next = new Set(r.items.filter((i) => p.has(i.session_id)).map((i) => i.session_id));
+          fresh.forEach((i) => next.add(i.session_id));
+          return next;
+        });
+      })
+      .catch(() => undefined); // a convenience: no prompt when it cannot be read
+  }, []);
+
+  useEffect(load, [load]);
+  useEffect(
+    () =>
+      eventBus.subscribe((msg) => {
+        if (msg.type === "runs_interrupted") load();
+      }),
+    [load]
+  );
+
+  const dismiss = async (sessionIds: string[]) => {
+    if (sessionIds.length) await api.run.dismissInterrupted(sessionIds).catch(toast.error);
+  };
+
+  const resumeNone = async () => {
+    if (busy) return;
+    setBusy(true);
+    await dismiss(items.map((i) => i.session_id));
+    setItems([]);
+    setBusy(false);
+  };
+
+  const resumePicked = async () => {
+    if (busy) return;
+    setBusy(true);
+    const failed = new Set<string>();
+    let first: { runId: string; laneId: number } | null = null;
+    for (const it of items.filter((i) => picked.has(i.session_id))) {
+      try {
+        const r = await startInFreeTabDetailed(it.lane_id, {
+          resumeSessionId: it.session_id,
+          ...(it.model ? { model: it.model } : {}),
+          ...(it.effort ? { effort: it.effort } : {}),
+          // Bypass is a per-run choice, never carried over.
+          ...(it.permission_mode && it.permission_mode !== "bypassPermissions"
+            ? { permissionMode: it.permission_mode }
+            : {}),
+        });
+        first ??= r;
+      } catch (err) {
+        failed.add(it.session_id);
+        toast.error(
+          t("interrupted.failed", {
+            name: label(it),
+            message: err instanceof Error ? err.message : String(err),
+          })
+        );
+      }
+    }
+    await dismiss(items.map((i) => i.session_id).filter((id) => !failed.has(id)));
+    setItems((cur) => cur.filter((i) => failed.has(i.session_id)));
+    setBusy(false);
+    if (first) navigate(`/workspace?lane=${first.laneId}&run=${encodeURIComponent(first.runId)}`);
+  };
+
+  const toggle = (id: string, on: boolean) =>
+    setPicked((p) => {
+      const next = new Set(p);
+      if (on) next.add(id);
+      else next.delete(id);
+      return next;
+    });
+
+  const count = items.filter((i) => picked.has(i.session_id)).length;
+  return (
+    <ConfirmModal
+      open={items.length > 0}
+      title={t("interrupted.title")}
+      message={t("interrupted.message")}
+      confirmLabel={t("interrupted.resume", { count })}
+      cancelLabel={t("interrupted.none")}
+      destructive={false}
+      busy={busy}
+      disabled={count === 0}
+      onConfirm={() => void resumePicked()}
+      onCancel={() => void resumeNone()}
+    >
+      <ul className="mt-3 max-h-80 space-y-1 overflow-y-auto">
+        {items.map((it) => (
+          <li key={it.session_id} className="rounded-md border border-border px-2 py-1.5">
+            <Checkbox
+              checked={picked.has(it.session_id)}
+              onChange={(on) => toggle(it.session_id, on)}
+              disabled={busy}
+              className="w-full"
+              labelClassName="min-w-0 flex-1"
+              label={
+                <span className="block min-w-0 text-left">
+                  <span className="block truncate text-xs text-fg-primary">
+                    {label(it)} · {it.tool}
+                  </span>
+                  <span className="block truncate text-[11px] text-fg-muted">
+                    {it.session_name || it.prompt_preview || it.session_id}
+                    {it.ended_at ? ` · ${timeAgo(it.ended_at)}` : ""}
+                  </span>
+                </span>
+              }
+            />
+          </li>
+        ))}
+      </ul>
+    </ConfirmModal>
+  );
+}

client/src/components/lanes/LaneChangesPanel.tsx

@@ -17,12 +17,16 @@
  *              image file is shown as the picture (`GET …/git/raw`)
  *   history  — recent commits; opening one shows that commit's diff
  *   browse   — quick-open by path, or the repo's tracked file tree (the
- *              mode switcher's Files button; at full width the sidebar)
+ *              mode switcher's Files button; at full width the sidebar);
+ *              a row dragged onto a prompt box attaches it as `@path`
  *
  * and three ranges: `work` (uncommitted, what the agent has touched right
  * now), `branch` (`base...HEAD`, what this lane adds on top of its base) and
  * `commit` (one commit, reached from history).
  *
+ * A file can also be opened from outside the panel (`openRequest`: a chat's
+ * "Edited N files" card), the same way a click in the tree opens it.
+ *
  * Only the overview polls. Review, file, history and browse are a deliberate
  * read of a frozen moment — re-fetching under the reader's scroll position is
  * worse than a slightly stale view, and those are the expensive shapes.
@@ -121,6 +125,7 @@ import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../Context
 import { MarkdownPreview, isMarkdown } from "../MarkdownPreview";
 import { LaneGitHeader, useLaneGitFacts } from "./LaneGitHeader";
 import { changeTree, treeFiles, type ChangeTreeDir } from "../../lib/changeTree";
+import { dragProjectPath } from "../../lib/promptAttach";
 import { commitGraph, type GraphRow } from "../../lib/commitGraph";
 import type {
   LaneChangeFile,
@@ -277,6 +282,8 @@ function TreeNodes({
               data-tree-ignored={e.ignored || undefined}
               onClick={() => (e.dir ? onToggleDir(e.path) : onOpenFile(e.path))}
               onContextMenu={onMenu && ((ev) => onMenu(ev, e))}
+              draggable
+              onDragStart={(ev) => dragProjectPath(ev, e.dir ? `${e.path}/` : e.path)}
               style={{ paddingLeft: `${depth * 0.9 + 0.25}rem` }}
               aria-current={active === e.path ? "true" : undefined}
               className={`flex w-full items-center gap-1 rounded px-1 py-0.5 text-left font-mono text-[11px] hover:bg-surface-2 ${
@@ -636,6 +643,8 @@ function ChangeRow({
       <button
         type="button"
         onClick={() => onOpen(f.path)}
+        draggable
+        onDragStart={(ev) => dragProjectPath(ev, f.path)}
         className="flex min-w-0 flex-1 items-baseline gap-1.5 rounded px-1 py-0.5 text-left hover:bg-surface-2"
       >
         <span
@@ -792,18 +801,25 @@ function GraphCell({ row, width }: { row: GraphRow; width: number }) {
 export function LaneChangesPanel({
   laneId,
   session,
+  source,
   onNewLane,
   full = false,
   wide = full,
   onDirtyChange,
+  openRequest = null,
 }: {
   laneId: number;
+  /** Open this file (relative to the panel's folder); a new `nonce` asks again. */
+  openRequest?: { path: string; nonce: number } | null;
   /** The whole-file editor holds unsaved text (true) or not (false). */
   onDirtyChange?: (dirty: boolean) => void;
   /** Show and act on that session's own worktree (`claude --worktree`)
    *  instead of the workspace's folder. The Workspace keys the panel on it,
    *  so a different session is a fresh panel. */
   session?: string;
+  /** Show and act on that extra folder's repo instead (`lane_sources` id);
+   *  wins over `session`, and is keyed on like it. */
+  source?: number;
   /** Open the Add-lane flow for a sibling worktree; see `LaneGitBar`. */
   onNewLane?: (branch?: string) => void;
   /** The panel has the whole width: the file tree becomes a sidebar and a
@@ -815,11 +831,11 @@ export function LaneChangesPanel({
   const { t } = useTranslation(["lanes"]);
   // One read of the working copy, shared by the header and every write below:
   // a stage, a discard or a commit changes the counts the header shows.
-  const [git, refreshGit] = useLaneGitFacts(laneId, session);
+  const [git, refreshGit] = useLaneGitFacts(laneId, session, source);
   // A merge, cherry-pick or revert is open: no new one starts from history.
   const opOpen = !!(git?.available && git.merging);
   // Every git read and write below goes to the same tree as those facts.
-  const target = gitTarget(laneId, session);
+  const target = gitTarget(laneId, session, source);
   // A diff line's comment goes into this workspace's pane, as a paste.
   const comment = useCallback(
     (text: string) => {
@@ -1232,6 +1248,11 @@ export function LaneChangesPanel({
   const show = (path: string) => {
     void confirmDrop().then((ok) => ok && showNow(path));
   };
+  // A file named from outside the panel (a chat's "Edited N files" card).
+  useEffect(() => {
+    if (openRequest) show(openRequest.path);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- once per request
+  }, [openRequest?.nonce]);
   // A file's history (Show History): the commits that touched it.
   const showHistory = (path: string) => {
     void confirmDrop().then((ok) => {
@@ -2053,6 +2074,8 @@ export function LaneChangesPanel({
               <button
                 type="button"
                 onClick={() => void openWhole(p)}
+                draggable
+                onDragStart={(ev) => dragProjectPath(ev, p)}
                 className="w-full truncate rounded px-1 py-0.5 text-left font-mono text-[11px] text-fg-primary hover:bg-surface-2"
               >
                 {p}
@@ -2105,6 +2128,7 @@ export function LaneChangesPanel({
         <LaneGitHeader
           laneId={laneId}
           session={session}
+          source={source}
           git={git}
           onChanged={rereadAll}
           onNewLane={onNewLane}
@@ -2487,7 +2511,9 @@ export function LaneChangesPanel({
           ) : !data ? (
             <p className="text-[11px] text-fg-muted">{t("changes.loading")}</p>
           ) : !data.available ? (
-            <p className="text-[11px] text-fg-muted">{t("changes.unavailable")}</p>
+            <p className="text-[11px] text-fg-muted">
+              {t(source ? "changes.unavailableFolder" : "changes.unavailable")}
+            </p>
           ) : files.length === 0 && mode !== "file" ? (
             <p className="text-[11px] text-fg-muted">{t(`changes.empty.${range}`)}</p>
           ) : mode === "overview" ? (
@@ -2678,6 +2704,7 @@ export function LaneChangesPanel({
             <LaneConflictView
               laneId={laneId}
               session={session}
+              source={source}
               path={openFile}
               onResolved={() => {
                 refreshGit();

client/src/components/lanes/LaneConflictView.tsx

@@ -38,6 +38,7 @@ function Lines({ lines, className = "" }: { lines: string[]; className?: string
 export function LaneConflictView({
   laneId,
   session,
+  source,
   path,
   onResolved,
   onEdit,
@@ -45,6 +46,8 @@ export function LaneConflictView({
   laneId: number;
   /** Work in that session's own worktree (see `gitTarget`). */
   session?: string;
+  /** Work in that extra folder's repo instead (`lane_sources` id, see `gitTarget`). */
+  source?: number;
   path: string;
   /** The file left the conflict (resolved, or a whole side taken). */
   onResolved: () => void;
@@ -65,7 +68,7 @@ export function LaneConflictView({
     setChoices([]);
     setError(null);
     api.lanes
-      .gitFile(gitTarget(laneId, session), path, "work")
+      .gitFile(gitTarget(laneId, session, source), path, "work")
       .then((r) => {
         if (!live) return;
         setFile(
@@ -78,7 +81,7 @@ export function LaneConflictView({
     return () => {
       live = false;
     };
-  }, [laneId, session, path]);
+  }, [laneId, session, source, path]);
 
   const parts: ConflictPart[] | null = file?.usable ? parseConflicts(file.lines) : null;
   const total = parts ? parts.filter((p) => p.kind === "conflict").length : 0;
@@ -102,15 +105,18 @@ export function LaneConflictView({
     run(async () => {
       if (!parts || !file?.sha) return;
       await api.lanes.gitSaveFile(
-        gitTarget(laneId, session),
+        gitTarget(laneId, session, source),
         path,
         applyChoices(parts, choices).join("\n"),
         file.sha
       );
-      await api.lanes.gitAction(gitTarget(laneId, session), "resolve", { path, side: "done" });
+      await api.lanes.gitAction(gitTarget(laneId, session, source), "resolve", {
+        path,
+        side: "done",
+      });
     });
   const takeAll = (side: "ours" | "theirs") =>
-    run(() => api.lanes.gitAction(gitTarget(laneId, session), "resolve", { path, side }));
+    run(() => api.lanes.gitAction(gitTarget(laneId, session, source), "resolve", { path, side }));
 
   const choose = (i: number, c: ConflictChoice | undefined) =>
     setChoices((prev) => {

client/src/components/lanes/LaneGitBar.tsx

@@ -45,14 +45,7 @@ import { isSubmitEnter } from "../../lib/keys";
 import type { LaneGitFacts, LaneWorktree } from "../../lib/types";
 
 type Action =
-  | "fetch"
-  | "pull"
-  | "push"
-  | "switch"
-  | "branch-create"
-  | "branch-delete"
-  | "merge"
-  | "publish";
+  "fetch" | "pull" | "push" | "switch" | "branch-create" | "branch-delete" | "merge" | "publish";
 type RunBody = Parameters<typeof api.lanes.gitAction>[2];
 
 const LOCAL_HOST = /^(localhost|127\.|\[::1\])/;
@@ -95,6 +88,7 @@ function Btn({
 export function LaneGitBar({
   laneId,
   session,
+  source,
   git,
   onChanged,
   onNewLane,
@@ -103,6 +97,8 @@ export function LaneGitBar({
   laneId: number;
   /** Work in that session's own worktree (see `gitTarget`). */
   session?: string;
+  /** Work in that extra folder's repo instead (`lane_sources` id, see `gitTarget`). */
+  source?: 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. */
@@ -165,7 +161,7 @@ export function LaneGitBar({
     setBusy(action);
     setError(null);
     try {
-      const res = await api.lanes.gitAction(gitTarget(lane, session), action, body || {});
+      const res = await api.lanes.gitAction(gitTarget(lane, session, source), action, body || {});
       // Landed after a lane switch: every write below belongs to the lane
       // no longer shown.
       if (laneNow.current !== lane) return;
@@ -218,7 +214,7 @@ export function LaneGitBar({
 
   const refreshBranches = async () => {
     try {
-      const r = await api.lanes.gitBranches(gitTarget(laneId, session));
+      const r = await api.lanes.gitBranches(gitTarget(laneId, session, source));
       if (laneNow.current !== laneId) return;
       setBranches(r.branches);
       setWorktrees(r.worktrees || []);

client/src/components/lanes/LaneGitHeader.tsx

@@ -36,7 +36,9 @@ const GIT_REFRESH_MS = 30_000;
 export function useLaneGitFacts(
   laneId: number,
   /** Read that session's own worktree instead (`?session=`). */
-  session?: string
+  session?: string,
+  /** Read that extra folder's repo instead (`?source=`). */
+  source?: 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
@@ -54,7 +56,7 @@ export function useLaneGitFacts(
     let alive = true;
     const read = () => {
       api.lanes
-        .git(gitTarget(laneId, session))
+        .git(gitTarget(laneId, session, source))
         .then((f) => {
           if (alive) setFacts(keepIfSame(f));
         })
@@ -73,7 +75,7 @@ export function useLaneGitFacts(
       alive = false;
       clearInterval(timer);
     };
-  }, [laneId, session, nonce]);
+  }, [laneId, session, source, nonce]);
 
   return [facts, () => setNonce((n) => n + 1)];
 }
@@ -322,20 +324,23 @@ export function LaneGitCounts({
 export function LaneGitRailCounts({
   laneId,
   session,
+  source,
   onShowAll,
 }: {
   laneId: number;
   session?: string;
+  source?: number;
   /** Opens the Changes panel from the file list's "… more files". */
   onShowAll?: () => void;
 }) {
-  const [git] = useLaneGitFacts(laneId, session);
+  const [git] = useLaneGitFacts(laneId, session, source);
   return git?.available ? <LaneGitCounts git={git} vertical onShowAll={onShowAll} /> : null;
 }
 
 export function LaneGitHeader({
   laneId,
   session,
+  source,
   git,
   onChanged,
   onNewLane,
@@ -343,6 +348,8 @@ export function LaneGitHeader({
   laneId: number;
   /** Work in that session's own worktree (see `gitTarget`). */
   session?: string;
+  /** Work in that extra folder's repo instead (`lane_sources` id, see `gitTarget`). */
+  source?: number;
   git: LaneGitFacts | null;
   /** Called after a git bar action: the facts AND the panel's diff moved. */
   onChanged: () => void;
@@ -374,6 +381,7 @@ export function LaneGitHeader({
       <LaneGitBar
         laneId={laneId}
         session={session}
+        source={source}
         git={git}
         onChanged={onChanged}
         onNewLane={onNewLane}

client/src/components/lanes/SessionReplay.tsx

@@ -121,7 +121,11 @@ export function SessionReplay({
   };
 
   return (
-    <div data-testid="session-replay" className="flex min-h-0 flex-1 flex-col gap-2">
+    <div
+      data-testid="session-replay"
+      data-prompt-drop
+      className="flex min-h-0 flex-1 flex-col gap-2"
+    >
       {session && (
         <div className="flex justify-end">
           <SessionResumeButton session={session} />
@@ -173,6 +177,7 @@ export function SessionReplay({
             rows={2}
             slash={tool === "claude"}
             fileCwd={session?.cwd || lane.cwd}
+            lane={lane.id}
           />
           <div className="mt-1 flex items-center gap-2">
             <span className="text-[11px] text-fg-muted">{t("replay.hint")}</span>

client/src/components/lanes/WorkspaceContext.tsx

@@ -0,0 +1,559 @@
+/**
+ * @file WorkspaceContext — a workspace's context: Instructions, Memory
+ * (read-only), Context files and Folders (`GET/PUT/POST/DELETE
+ * /api/lanes/:id/sources…`, see server/lib/lane-sources.js). Shown as the
+ * workspace home's right column and, `compact`, folded at the bottom of the
+ * session view's Changes panel. Folder suggestions are the repo's untracked
+ * worktrees from `GET /api/projects`, filtered by Settings → Worktrees.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { FileText, Folder, Pencil, Plus, X } from "lucide-react";
+import { copyText } from "../../lib/clipboard";
+import { dragProjectPath } from "../../lib/promptAttach";
+import { useDialog } from "../../hooks/useDialog";
+import { api, type LaneMemoryFile, type LaneSource, type LaneSourcesView } from "../../lib/api";
+import type { Lane } from "../../lib/types";
+import { useAiTools } from "../../hooks/useAiTools";
+import { useProjectTreePrefs } from "../../lib/projectTreePrefs";
+import { MarkdownPreview } from "../MarkdownPreview";
+import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../ContextMenu";
+import { PathPickButton } from "../PathPickButton";
+
+function fmtBytes(n: number | null): string {
+  if (!n) return "";
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${Math.round(n / 1024)} KB`;
+  return `${(n / 1024 / 1024).toFixed(1)} MB`;
+}
+
+const message = (err: unknown) => (err instanceof Error ? err.message : String(err));
+
+/** Keyed by workspace: an open edit or folder form belongs to ONE workspace. */
+export function WorkspaceContext(props: Parameters<typeof ContextBody>[0]) {
+  return <ContextBody key={props.lane.id} {...props} />;
+}
+
+function ContextBody({
+  lane,
+  onSourcesChange,
+  sourcesVersion = 0,
+  compact = false,
+}: {
+  lane: Lane;
+  /** Called with the sources after a folder or file is added or removed. */
+  onSourcesChange?: (view: LaneSourcesView) => void;
+  /** Bumped when the folder list changed elsewhere: the lists re-read. */
+  sourcesVersion?: number;
+  /** The Changes panel's narrow fold: no card, tighter rows. */
+  compact?: boolean;
+}) {
+  const { t } = useTranslation("lanes");
+  const aiTools = useAiTools();
+  const prefs = useProjectTreePrefs();
+  const [error, setError] = useState<string | null>(null);
+  const [view, setView] = useState<LaneSourcesView | null>(null);
+  const [editing, setEditing] = useState<string | null>(null);
+  const [memory, setMemory] = useState<LaneMemoryFile[] | null>(null);
+  const [memoryOpen, setMemoryOpen] = useState(false);
+  const [memoryTab, setMemoryTab] = useState(0);
+  const [folderOpen, setFolderOpen] = useState(false);
+  const [folderPath, setFolderPath] = useState("");
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+  const fileInput = useRef<HTMLInputElement>(null);
+  const [ctxDrag, setCtxDrag] = useState(false);
+  const memoryPanel = useRef<HTMLDivElement>(null);
+  useDialog(memoryOpen && !!memory, memoryPanel, () => setMemoryOpen(false));
+  const sourceCtx = useContextMenu<LaneSource>();
+
+  useEffect(() => {
+    let live = true;
+    api.lanes
+      .sources(lane.id)
+      .then((v) => live && setView(v))
+      .catch((err) => live && setError(message(err)));
+    api.lanes
+      .memory(lane.id)
+      .then((r) => live && setMemory(r.files))
+      .catch(() => live && setMemory([]));
+    return () => {
+      live = false;
+    };
+  }, [lane.id]);
+
+  // Suggestions are read when the folder form opens, not on every visit.
+  useEffect(() => {
+    if (!folderOpen) return;
+    let live = true;
+    api.projects
+      .list()
+      .then(({ projects }) => {
+        if (!live) return;
+        const p = projects.find((x) => x.workspaces.includes(lane.id));
+        const own = new Set((view?.sources ?? []).map((s) => s.path));
+        setSuggestions(
+          !p || !prefs.showUntracked
+            ? []
+            : p.worktrees
+                .filter((w) => w.workspace_id === null && !own.has(w.path))
+                .filter((w) => !(w.source && prefs.hideSources.includes(w.source)))
+                .map((w) => w.path)
+        );
+      })
+      .catch(() => undefined);
+    return () => {
+      live = false;
+    };
+  }, [folderOpen, lane.id, prefs.showUntracked, prefs.hideSources, view?.sources]);
+
+  useEffect(() => {
+    if (!sourcesVersion) return;
+    let live = true;
+    api.lanes
+      .sources(lane.id)
+      .then((v) => live && setView(v))
+      .catch(() => undefined);
+    return () => {
+      live = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- on a bump only
+  }, [sourcesVersion]);
+
+  const run = async (fn: () => Promise<LaneSourcesView>) => {
+    setError(null);
+    try {
+      const next = await fn();
+      setView(next);
+      onSourcesChange?.(next);
+      return true;
+    } catch (err) {
+      setError(message(err));
+      return false;
+    }
+  };
+  const addFiles = async (picked: File[]) => {
+    for (const f of picked) {
+      if (!(await run(() => api.lanes.addFile(lane.id, f)))) break;
+    }
+  };
+
+  const files = (view?.sources ?? []).filter((s) => s.kind === "file");
+  const folders = (view?.sources ?? []).filter((s) => s.kind === "folder");
+  const card = compact
+    ? "border-b border-border/60 px-1 py-2 last:border-b-0"
+    : "border-b border-border px-4 py-4 last:border-b-0";
+  const heading = compact
+    ? "text-xs font-medium text-fg-secondary"
+    : "text-sm font-medium text-fg-primary";
+  const iconBtn =
+    "rounded p-1 text-fg-muted transition-colors hover:bg-surface-4 hover:text-fg-primary disabled:opacity-40";
+
+  return (
+    <>
+      <aside
+        data-testid="workspace-context"
+        aria-label={t("home.contextPanel")}
+        className={compact ? "" : "card w-80 shrink-0 self-start p-0"}
+      >
+        {view && !view.supported && (
+          <p className="border-b border-border px-4 py-3 text-xs text-status-warning">
+            {t("home.unsupported", { tool: aiTools.label(lane.tool) })}
+          </p>
+        )}
+        {error && (
+          <p role="alert" className="border-b border-border px-4 py-2 text-xs text-status-danger">
+            {error}
+          </p>
+        )}
+
+        <section className={card}>
+          <div className="flex items-center justify-between">
+            <h3 className={heading}>{t("home.instructions")}</h3>
+            {editing === null && (
+              <button
+                type="button"
+                aria-label={t("home.edit")}
+                title={t("home.edit")}
+                onClick={() => setEditing(view?.instructions ?? "")}
+                disabled={!view}
+                className={iconBtn}
+              >
+                <Pencil className="h-3.5 w-3.5" />
+              </button>
+            )}
+          </div>
+          {editing === null ? (
+            <p
+              className={`mt-1 ${compact ? "line-clamp-2" : "line-clamp-3"} whitespace-pre-wrap text-xs text-fg-muted`}
+            >
+              {view?.instructions || t("home.instructionsEmpty")}
+            </p>
+          ) : (
+            <div className="mt-2 space-y-2">
+              <textarea
+                data-testid="workspace-instructions"
+                aria-label={t("home.instructions")}
+                autoFocus
+                value={editing}
+                maxLength={view?.maxInstructions}
+                onChange={(e) => setEditing(e.target.value)}
+                rows={compact ? 4 : 6}
+                className="w-full rounded border border-border bg-surface-1 p-2 text-xs text-fg-primary"
+              />
+              <div className="flex justify-end gap-2">
+                <button
+                  type="button"
+                  onClick={() => setEditing(null)}
+                  className="btn-ghost text-xs"
+                >
+                  {t("home.cancel")}
+                </button>
+                <button
+                  type="button"
+                  onClick={async () => {
+                    if (await run(() => api.lanes.setInstructions(lane.id, editing)))
+                      setEditing(null);
+                  }}
+                  className="btn-primary text-xs"
+                >
+                  {t("home.save")}
+                </button>
+              </div>
+            </div>
+          )}
+        </section>
+
+        <section className={card}>
+          <div className="flex items-center justify-between">
+            <h3 className={heading}>{t("home.memory")}</h3>
+            <button
+              type="button"
+              onClick={() => {
+                setMemoryTab(0);
+                setMemoryOpen(true);
+              }}
+              disabled={!memory?.length}
+              className="text-xs text-fg-secondary hover:text-fg-primary disabled:opacity-40"
+            >
+              {t("home.viewMemory")}
+            </button>
+          </div>
+          <p className="mt-1 text-xs text-fg-muted">
+            {memory?.length
+              ? t("home.memoryCount", { count: memory.length })
+              : t("home.memoryEmpty")}
+          </p>
+        </section>
+
+        <section
+          data-testid="workspace-context-files"
+          className={`${card} ${ctxDrag ? "ring-2 ring-accent/50" : ""}`}
+          // Files dragged in from the OS are added like the + button's pick.
+          onDragOver={(e) => {
+            if (!view || !e.dataTransfer.types.includes("Files")) return;
+            e.preventDefault();
+            e.dataTransfer.dropEffect = "copy";
+            setCtxDrag(true);
+          }}
+          onDragLeave={(e) => {
+            if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setCtxDrag(false);
+          }}
+          onDrop={(e) => {
+            setCtxDrag(false);
+            if (!view || e.dataTransfer.files.length === 0) return;
+            e.preventDefault();
+            void addFiles([...e.dataTransfer.files]);
+          }}
+        >
+          <div className="flex items-center justify-between">
+            <h3 className={heading}>{t("home.context")}</h3>
+            <button
+              type="button"
+              aria-label={t("home.addFile")}
+              title={t("home.addFile")}
+              onClick={() => fileInput.current?.click()}
+              disabled={!view}
+              className={iconBtn}
+            >
+              <Plus className="h-3.5 w-3.5" />
+            </button>
+            <input
+              ref={fileInput}
+              data-testid="workspace-file-input"
+              type="file"
+              multiple
+              hidden
+              onChange={(e) => {
+                const picked = [...(e.target.files ?? [])];
+                e.target.value = "";
+                void addFiles(picked);
+              }}
+            />
+          </div>
+          {!compact && <p className="mt-1 text-xs text-fg-muted">{t("home.contextSnapshot")}</p>}
+          {files.length === 0 ? (
+            <button
+              type="button"
+              onClick={() => fileInput.current?.click()}
+              className={`mt-2 w-full rounded-lg border border-dashed border-border px-3 ${compact ? "py-2" : "py-5"} text-center text-xs text-fg-muted hover:border-border-light hover:text-fg-secondary`}
+            >
+              {t("home.contextEmpty")}
+            </button>
+          ) : (
+            <ul className="mt-2 space-y-1">
+              {files.map((f) => (
+                <li
+                  key={f.id}
+                  className="group flex items-center gap-2 text-xs"
+                  onContextMenu={(e) => sourceCtx.open(e, f)}
+                  // Dragged onto a prompt box, it is attached as `@<path>`.
+                  draggable
+                  onDragStart={(e) => dragProjectPath(e, f.path)}
+                >
+                  <FileText className="h-3.5 w-3.5 shrink-0 text-fg-muted" />
+                  <span title={f.path} className="min-w-0 flex-1 truncate text-fg-secondary">
+                    {f.name}
+                  </span>
+                  <span className="shrink-0 text-fg-muted">
+                    {f.missing ? t("home.missing") : fmtBytes(f.size)}
+                  </span>
+                  <button
+                    type="button"
+                    aria-label={`${t("home.remove")} ${f.name}`}
+                    onClick={() => void run(() => api.lanes.removeSource(lane.id, f.id))}
+                    className={`${iconBtn} opacity-0 group-hover:opacity-100 focus:opacity-100`}
+                  >
+                    <X className="h-3 w-3" />
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </section>
+
+        <section className={card}>
+          <div className="flex items-center justify-between">
+            <h3 className={heading}>{t("home.folder")}</h3>
+            <button
+              type="button"
+              aria-label={t("home.addFolder")}
+              title={t("home.addFolder")}
+              onClick={() => setFolderOpen((v) => !v)}
+              disabled={!view}
+              className={iconBtn}
+            >
+              <Plus className="h-3.5 w-3.5" />
+            </button>
+          </div>
+          <ul className="mt-2 space-y-1.5">
+            <li
+              className="flex items-start gap-2 text-xs"
+              draggable
+              onDragStart={(e) => dragProjectPath(e, `${lane.cwd}/`)}
+            >
+              <Folder className="mt-0.5 h-3.5 w-3.5 shrink-0 text-fg-muted" />
+              <span className="min-w-0">
+                <span title={lane.cwd} className="block truncate text-fg-secondary">
+                  {lane.cwd.split("/").filter(Boolean).pop() || lane.cwd}
+                </span>
+                <span className="block text-fg-muted">{t("home.ownFolder")}</span>
+              </span>
+            </li>
+            {folders.map((f) => (
+              <li
+                key={f.id}
+                className="group flex items-center gap-2 text-xs"
+                onContextMenu={(e) => sourceCtx.open(e, f)}
+                draggable
+                onDragStart={(e) => dragProjectPath(e, `${f.path}/`)}
+              >
+                <Folder className="h-3.5 w-3.5 shrink-0 text-fg-muted" />
+                <span title={f.path} className="min-w-0 flex-1 truncate text-fg-secondary">
+                  {f.name}
+                  {f.missing && (
+                    <span className="ml-1 text-status-warning">{t("home.missing")}</span>
+                  )}
+                </span>
+                <button
+                  type="button"
+                  aria-label={`${t("home.remove")} ${f.name}`}
+                  onClick={() => void run(() => api.lanes.removeSource(lane.id, f.id))}
+                  className={`${iconBtn} opacity-0 group-hover:opacity-100 focus:opacity-100`}
+                >
+                  <X className="h-3 w-3" />
+                </button>
+              </li>
+            ))}
+          </ul>
+          {folderOpen && (
+            <form
+              className="mt-3 space-y-2"
+              onSubmit={async (e) => {
+                e.preventDefault();
+                if (await run(() => api.lanes.addFolder(lane.id, folderPath.trim()))) {
+                  setFolderPath("");
+                  setFolderOpen(false);
+                }
+              }}
+            >
+              <div className="flex gap-2">
+                <input
+                  data-testid="workspace-folder-input"
+                  aria-label={t("home.folderPath")}
+                  placeholder={t("home.folderPath")}
+                  autoFocus
+                  value={folderPath}
+                  onChange={(e) => setFolderPath(e.target.value)}
+                  className="min-w-0 flex-1 rounded border border-border bg-surface-1 px-2 py-1 font-mono text-[11px] text-fg-primary"
+                />
+                <PathPickButton start={folderPath || lane.cwd} onPick={setFolderPath} />
+                <button type="submit" disabled={!folderPath.trim()} className="btn-ghost text-xs">
+                  {t("home.add")}
+                </button>
+              </div>
+              {suggestions.length > 0 && (
+                <div>
+                  <p className="text-[10px] uppercase tracking-wide text-fg-muted">
+                    {t("home.suggested")}
+                  </p>
+                  <ul className="mt-1 space-y-0.5">
+                    {suggestions.map((p) => (
+                      <li key={p}>
+                        <button
+                          type="button"
+                          onClick={() => setFolderPath(p)}
+                          title={p}
+                          className="w-full truncate rounded px-1 text-left font-mono text-[11px] text-fg-secondary hover:bg-surface-3"
+                        >
+                          {p}
+                        </button>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+            </form>
+          )}
+        </section>
+      </aside>
+
+      {memoryOpen && memory && (
+        <div
+          className="fixed inset-0 z-40 flex items-center justify-center bg-black/60 p-4"
+          role="presentation"
+          onClick={() => setMemoryOpen(false)}
+        >
+          <div
+            ref={memoryPanel}
+            role="dialog"
+            aria-modal="true"
+            aria-label={t("home.memory")}
+            onClick={(e) => e.stopPropagation()}
+            className="flex max-h-[85vh] w-full max-w-3xl flex-col rounded-xl border border-border bg-surface-1 p-5 shadow-xl"
+          >
+            <div className="mb-3 flex shrink-0 items-center justify-between">
+              <h2 className="text-sm font-semibold text-fg-primary">{t("home.memory")}</h2>
+              <button
+                type="button"
+                autoFocus
+                aria-label={t("home.close")}
+                onClick={() => setMemoryOpen(false)}
+                className={iconBtn}
+              >
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+            <div
+              role="tablist"
+              aria-label={t("home.memory")}
+              // Wraps, so every file is reachable without a horizontal wheel (a
+              // hidden-scrollbar row cut the rest off); past ~3 rows it scrolls
+              // with a visible bar. shrink-0: a long file must not squeeze it.
+              className="mb-3 flex max-h-28 shrink-0 flex-wrap gap-1.5 overflow-y-auto border-b border-border/60 pb-2"
+            >
+              {memory.map((f, i) => (
+                <button
+                  key={f.path}
+                  type="button"
+                  role="tab"
+                  id={`workspace-memory-tab-${i}`}
+                  aria-controls="workspace-memory-panel"
+                  tabIndex={i === memoryTab ? 0 : -1}
+                  title={f.path}
+                  aria-selected={i === memoryTab}
+                  onClick={() => setMemoryTab(i)}
+                  // APG tabs: arrows move (and select), one tab stop.
+                  onKeyDown={(e) => {
+                    const n = memory.length;
+                    const to =
+                      e.key === "ArrowRight"
+                        ? (i + 1) % n
+                        : e.key === "ArrowLeft"
+                          ? (i - 1 + n) % n
+                          : e.key === "Home"
+                            ? 0
+                            : e.key === "End"
+                              ? n - 1
+                              : null;
+                    if (to === null) return;
+                    e.preventDefault();
+                    setMemoryTab(to);
+                    document.getElementById(`workspace-memory-tab-${to}`)?.focus();
+                  }}
+                  className={`flex-shrink-0 whitespace-nowrap rounded-lg border px-3 py-1.5 font-mono text-xs transition-colors ${
+                    i === memoryTab
+                      ? "border-accent/30 bg-accent/15 text-accent"
+                      : "border-border text-fg-secondary hover:bg-surface-3 hover:text-fg-primary"
+                  }`}
+                >
+                  {f.label}
+                </button>
+              ))}
+            </div>
+            {memory[memoryTab] && (
+              <div
+                role="tabpanel"
+                id="workspace-memory-panel"
+                aria-labelledby={`workspace-memory-tab-${memoryTab}`}
+                className="min-h-0 flex-1 overflow-y-auto"
+              >
+                <MarkdownPreview text={memory[memoryTab].content} />
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {sourceCtx.menu && (
+        <ContextMenu
+          x={sourceCtx.menu.x}
+          y={sourceCtx.menu.y}
+          onClose={sourceCtx.close}
+          testId={`workspace-source-menu-${sourceCtx.menu.item.id}`}
+        >
+          <MenuItem
+            onSelect={() => {
+              void copyText(sourceCtx.menu!.item.path);
+              sourceCtx.close();
+            }}
+          >
+            {t("menu.copyPath")}
+          </MenuItem>
+          <MenuSeparator />
+          <MenuItem
+            danger
+            onSelect={() => {
+              const id = sourceCtx.menu!.item.id;
+              sourceCtx.close();
+              void run(() => api.lanes.removeSource(lane.id, id));
+            }}
+          >
+            {t("home.remove")}
+          </MenuItem>
+        </ContextMenu>
+      )}
+    </>
+  );
+}

client/src/components/lanes/WorkspaceHome.tsx

@@ -5,7 +5,8 @@
  * then opens it (`&run=<runId>`) — the one place a session starts WITH a
  * prompt (the session view's tab bar `+` only starts a bare CLI or a shell,
  * `ConsoleTabs.tsx`). Inside
- * the box, like Claude Desktop's: AI (the session's own tool, the workspace's
+ * the box, like Claude Desktop's: the `+` menu (`ChatAddMenu`: upload, or
+ * attach a project file, a context file or a recent upload), AI (the session's own tool, the workspace's
  * by default; its last row, **Open terminal**, is no AI — it starts a plain
  * shell tab at once, like the tab bar's New terminal) and one Model chip (`ModelMenu`: the tool's own list or the
  * proxy's models, plus Effort); under it the quieter choices — AI Proxy
@@ -15,40 +16,30 @@
  * **Show more** past the first page, and the sidebar row's Rename/Archive in
  * its right-click menu), then the archived ones folded with Unarchive; a live session opens its pane,
  * any other its conversation (`&session=`, `SessionReplay`), nothing is resumed — and on the right its context: Instructions, Memory (read-only), Context files and
- * Folders (`GET/PUT/POST/DELETE /api/lanes/:id/sources…`, see
- * server/lib/lane-sources.js). Folder suggestions are the repo's untracked
- * worktrees from `GET /api/projects`, filtered by Settings → Worktrees.
+ * Folders (`WorkspaceContext.tsx`, also folded at the bottom of the Changes panel).
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
 import { Checkbox } from "../Checkbox";
-import { copyText } from "../../lib/clipboard";
 import { isSubmitEnter } from "../../lib/keys";
 import { confirmDialog } from "../../lib/confirm";
-import { useDialog } from "../../hooks/useDialog";
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import {
   ArchiveRestore,
   ShieldAlert,
-  FileText,
   Folder,
   GitBranch,
   MoreHorizontal,
-  Pencil,
   ArrowUp,
-  Plus,
   SquareTerminal,
-  X,
 } from "lucide-react";
 import {
   api,
   type CodexApproval,
   type CodexSandbox,
   type EffortLevel,
-  type LaneMemoryFile,
-  type LaneSource,
   type LaneSourcesView,
   type ModelChoice,
   type PermissionMode,
@@ -57,16 +48,16 @@ import {
 import type { Lane, Project, Session } from "../../lib/types";
 import { fmtCost, timeAgo } from "../../lib/format";
 import { useAiTools } from "../../hooks/useAiTools";
-import { useProjectTreePrefs } from "../../lib/projectTreePrefs";
 import { ModelMenu, PromptEditor, promptWithImages, type PromptImage } from "../run/RunSetup";
+import { ChatAddMenu } from "../run/ChatAddMenu";
+import { addAttachments } from "../../lib/promptAttach";
 import { AiToolIcon } from "../AiToolIcon";
 import { ProxyPicker, proxyArg, useAiProxies, useSessionProxy } from "../run/ProxyPicker";
 import { Select } from "../Select";
-import { MarkdownPreview } from "../MarkdownPreview";
 import { WorkspaceRowMenu, type WorkspaceMenuAction } from "./WorkspaceRowMenu";
 import { workspaceName } from "./WorkspaceRow";
 import { SessionMenu } from "./SessionMenu";
-import { ContextMenu, MenuItem, MenuSeparator, menuPoint, useContextMenu } from "../ContextMenu";
+import { menuPoint, useContextMenu } from "../ContextMenu";
 import {
   liveRunFor,
   SessionFold,
@@ -84,14 +75,8 @@ export {
   startInFreeTabDetailed,
 } from "./startSession";
 import { startInFreeTab } from "./startSession";
-import { PathPickButton } from "../PathPickButton";
-
-function fmtBytes(n: number | null): string {
-  if (!n) return "";
-  if (n < 1024) return `${n} B`;
-  if (n < 1024 * 1024) return `${Math.round(n / 1024)} KB`;
-  return `${(n / 1024 / 1024).toFixed(1)} MB`;
-}
+import { WorkspaceContext } from "./WorkspaceContext";
+import { readDefaultMode } from "../../lib/sessionDefaults";
 
 /** Recents' page size; Show more adds another. */
 const RECENT_PAGE = 30;
@@ -114,17 +99,23 @@ function HomeBody({
   lane,
   onMenuAction,
   onRenamed,
+  onSourcesChange,
+  sourcesVersion = 0,
 }: {
   lane: Lane;
   /** Row-menu items the page carries out (its modals); rename is done here. */
   onMenuAction: (action: WorkspaceMenuAction) => void;
   /** Called after a rename, so the page re-reads the lane list. */
   onRenamed?: () => void;
+  /** Called with the sources after a folder or file is added or removed. */
+  onSourcesChange?: (view: LaneSourcesView) => void;
+  /** Bumped when the folder list changed elsewhere (the Changes panel's
+   *  Close repository): the Folder list re-reads. */
+  sourcesVersion?: number;
 }) {
   const { t } = useTranslation("lanes");
   const navigate = useNavigate();
   const aiTools = useAiTools();
-  const prefs = useProjectTreePrefs();
   // The NEW session's AI tool — its own choice, the workspace's by default.
   const [tool, setTool] = useState(lane.tool);
   const entry = aiTools.byId(tool);
@@ -148,6 +139,7 @@ function HomeBody({
     }
   }, [draftKey, prompt]);
   const [images, setImages] = useState<PromptImage[]>([]);
+  const pickFiles = useRef<(() => void) | null>(null);
   const [proxy, setProxy] = useSessionProxy();
   const proxies = useAiProxies();
   // Claude and Codex, also before the catalog has loaded (as ProxyPicker).
@@ -173,7 +165,8 @@ function HomeBody({
   // Claude and Codex always take a model and an effort; a catalog tool a
   // model only when its file names the flag, an effort never.
   const hasModel = claude || codex || !!entry?.modelFlag;
-  const [mode, setMode] = useState<PermissionMode>("auto");
+  // The account's own default (first-run setup) — never bypass.
+  const [mode, setMode] = useState<PermissionMode>(readDefaultMode);
   const [sandbox, setSandbox] = useState<CodexSandbox>("workspace-write");
   const [approval, setApproval] = useState<CodexApproval>("on-request");
   // Per session, never remembered.
@@ -196,27 +189,9 @@ function HomeBody({
   // A Recents row being renamed (its session id) and the draft.
   const [renamingId, setRenamingId] = useState<string | null>(null);
   const [nameDraft, setNameDraft] = useState("");
-  const [view, setView] = useState<LaneSourcesView | null>(null);
-  const [editing, setEditing] = useState<string | null>(null);
-  const [memory, setMemory] = useState<LaneMemoryFile[] | null>(null);
-  const [memoryOpen, setMemoryOpen] = useState(false);
-  const [memoryTab, setMemoryTab] = useState(0);
-  const [folderOpen, setFolderOpen] = useState(false);
-  const [folderPath, setFolderPath] = useState("");
-  const [suggestions, setSuggestions] = useState<string[]>([]);
   const [menuAt, setMenuAt] = useState<{ x: number; y: number } | null>(null);
   const [title, setTitle] = useState<string | null>(null);
-  const fileInput = useRef<HTMLInputElement>(null);
-  const [ctxDrag, setCtxDrag] = useState(false);
-  const addFiles = async (picked: File[]) => {
-    for (const f of picked) {
-      if (!(await run(() => api.lanes.addFile(lane.id, f)))) break;
-    }
-  };
-  const memoryPanel = useRef<HTMLDivElement>(null);
-  useDialog(memoryOpen && !!memory, memoryPanel, () => setMemoryOpen(false));
   const recentCtx = useContextMenu<Session>();
-  const sourceCtx = useContextMenu<LaneSource>();
 
   // A new pane, a pane gone, a session id learned — all move these lane fields.
   const runKey = `${lane.status}:${lane.session_id}:${lane.run_id}`;
@@ -245,25 +220,6 @@ function HomeBody({
     `${runKey}:${version}`
   );
 
-  useEffect(() => {
-    let live = true;
-    setView(null);
-    setMemory(null);
-    setEditing(null);
-    setError(null);
-    api.lanes
-      .sources(lane.id)
-      .then((v) => live && setView(v))
-      .catch((err) => live && setError(message(err)));
-    api.lanes
-      .memory(lane.id)
-      .then((r) => live && setMemory(r.files))
-      .catch(() => live && setMemory([]));
-    return () => {
-      live = false;
-    };
-  }, [lane.id]);
-
   // The repository this workspace belongs to (Settings → Projects used to
   // show this): read once per visit, from the server's cached project list.
   const [project, setProject] = useState<Project | null>(null);
@@ -280,42 +236,6 @@ function HomeBody({
     };
   }, [lane.id]);
 
-  // Suggestions are read when the folder form opens, not on every visit.
-  useEffect(() => {
-    if (!folderOpen) return;
-    let live = true;
-    api.projects
-      .list()
-      .then(({ projects }) => {
-        if (!live) return;
-        const p = projects.find((x) => x.workspaces.includes(lane.id));
-        const own = new Set((view?.sources ?? []).map((s) => s.path));
-        setSuggestions(
-          !p || !prefs.showUntracked
-            ? []
-            : p.worktrees
-                .filter((w) => w.workspace_id === null && !own.has(w.path))
-                .filter((w) => !(w.source && prefs.hideSources.includes(w.source)))
-                .map((w) => w.path)
-        );
-      })
-      .catch(() => undefined);
-    return () => {
-      live = false;
-    };
-  }, [folderOpen, lane.id, prefs.showUntracked, prefs.hideSources, view?.sources]);
-
-  const run = async (fn: () => Promise<LaneSourcesView>) => {
-    setError(null);
-    try {
-      setView(await fn());
-      return true;
-    } catch (err) {
-      setError(message(err));
-      return false;
-    }
-  };
-
   // The AI menu's Open terminal: a plain shell in the first free slot, opened
   // at once — the same start the session view's tab bar `+` makes.
   const openTerminal = async () => {
@@ -438,10 +358,7 @@ function HomeBody({
           ? t("run:hint.sandboxWarning")
           : null;
 
-  const files = (view?.sources ?? []).filter((s) => s.kind === "file");
-  const folders = (view?.sources ?? []).filter((s) => s.kind === "folder");
   const name = workspaceName(lane);
-  const card = "border-b border-border px-4 py-4 last:border-b-0";
   const iconBtn =
     "rounded p-1 text-fg-muted transition-colors hover:bg-surface-4 hover:text-fg-primary disabled:opacity-40";
 
@@ -450,7 +367,7 @@ function HomeBody({
       data-testid="workspace-home"
       className="mx-auto flex w-full max-w-6xl flex-wrap gap-8 py-2"
     >
-      <div className="min-w-0 flex-1 basis-[28rem]">
+      <div data-prompt-drop className="min-w-0 flex-1 basis-[28rem]">
         <p className="text-xs text-fg-muted">
           {t("home.breadcrumb")} / <span className="text-fg-secondary">{name}</span>
         </p>
@@ -529,12 +446,22 @@ function HomeBody({
             rows={3}
             slash={claude}
             fileCwd={lane.cwd}
+            lane={lane.id}
             images={images}
             onImagesChange={setImages}
             onBusyChange={setUploading}
+            pickFiles={pickFiles}
             bare
           />
           <div className="mt-1 flex items-center gap-1">
+            <ChatAddMenu
+              cwd={lane.cwd}
+              laneId={lane.id}
+              skills={claude}
+              onUpload={() => pickFiles.current?.()}
+              onInsert={(cmd) => setPrompt((p) => `${cmd} ${p.replace(/^\s+/, "")}`)}
+              onAttach={(items) => setImages((prev) => addAttachments(prev, items))}
+            />
             <div data-testid="workspace-home-tool">
               <Select<string>
                 variant="ghost"
@@ -800,363 +727,11 @@ function HomeBody({
         </div>
       </div>
 
-      <aside
-        data-testid="workspace-context"
-        aria-label={t("home.contextPanel")}
-        className="card w-80 shrink-0 self-start p-0"
-      >
-        {view && !view.supported && (
-          <p className="border-b border-border px-4 py-3 text-xs text-status-warning">
-            {t("home.unsupported", { tool: aiTools.label(lane.tool) })}
-          </p>
-        )}
-
-        <section className={card}>
-          <div className="flex items-center justify-between">
-            <h3 className="text-sm font-medium text-fg-primary">{t("home.instructions")}</h3>
-            {editing === null && (
-              <button
-                type="button"
-                aria-label={t("home.edit")}
-                title={t("home.edit")}
-                onClick={() => setEditing(view?.instructions ?? "")}
-                disabled={!view}
-                className={iconBtn}
-              >
-                <Pencil className="h-3.5 w-3.5" />
-              </button>
-            )}
-          </div>
-          {editing === null ? (
-            <p className="mt-1 line-clamp-3 whitespace-pre-wrap text-xs text-fg-muted">
-              {view?.instructions || t("home.instructionsEmpty")}
-            </p>
-          ) : (
-            <div className="mt-2 space-y-2">
-              <textarea
-                data-testid="workspace-instructions"
-                aria-label={t("home.instructions")}
-                autoFocus
-                value={editing}
-                maxLength={view?.maxInstructions}
-                onChange={(e) => setEditing(e.target.value)}
-                rows={6}
-                className="w-full rounded border border-border bg-surface-1 p-2 text-xs text-fg-primary"
-              />
-              <div className="flex justify-end gap-2">
-                <button
-                  type="button"
-                  onClick={() => setEditing(null)}
-                  className="btn-ghost text-xs"
-                >
-                  {t("home.cancel")}
-                </button>
-                <button
-                  type="button"
-                  onClick={async () => {
-                    if (await run(() => api.lanes.setInstructions(lane.id, editing)))
-                      setEditing(null);
-                  }}
-                  className="btn-primary text-xs"
-                >
-                  {t("home.save")}
-                </button>
-              </div>
-            </div>
-          )}
-        </section>
-
-        <section className={card}>
-          <div className="flex items-center justify-between">
-            <h3 className="text-sm font-medium text-fg-primary">{t("home.memory")}</h3>
-            <button
-              type="button"
-              onClick={() => {
-                setMemoryTab(0);
-                setMemoryOpen(true);
-              }}
-              disabled={!memory?.length}
-              className="text-xs text-fg-secondary hover:text-fg-primary disabled:opacity-40"
-            >
-              {t("home.viewMemory")}
-            </button>
-          </div>
-          <p className="mt-1 text-xs text-fg-muted">
-            {memory?.length
-              ? t("home.memoryCount", { count: memory.length })
-              : t("home.memoryEmpty")}
-          </p>
-        </section>
-
-        <section
-          data-testid="workspace-context-files"
-          className={`${card} ${ctxDrag ? "ring-2 ring-accent/50" : ""}`}
-          // Files dragged in from the OS are added like the + button's pick.
-          onDragOver={(e) => {
-            if (!view || !e.dataTransfer.types.includes("Files")) return;
-            e.preventDefault();
-            e.dataTransfer.dropEffect = "copy";
-            setCtxDrag(true);
-          }}
-          onDragLeave={(e) => {
-            if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setCtxDrag(false);
-          }}
-          onDrop={(e) => {
-            setCtxDrag(false);
-            if (!view || e.dataTransfer.files.length === 0) return;
-            e.preventDefault();
-            void addFiles([...e.dataTransfer.files]);
-          }}
-        >
-          <div className="flex items-center justify-between">
-            <h3 className="text-sm font-medium text-fg-primary">{t("home.context")}</h3>
-            <button
-              type="button"
-              aria-label={t("home.addFile")}
-              title={t("home.addFile")}
-              onClick={() => fileInput.current?.click()}
-              disabled={!view}
-              className={iconBtn}
-            >
-              <Plus className="h-3.5 w-3.5" />
-            </button>
-            <input
-              ref={fileInput}
-              data-testid="workspace-file-input"
-              type="file"
-              multiple
-              hidden
-              onChange={(e) => {
-                const picked = [...(e.target.files ?? [])];
-                e.target.value = "";
-                void addFiles(picked);
-              }}
-            />
-          </div>
-          <p className="mt-1 text-xs text-fg-muted">{t("home.contextSnapshot")}</p>
-          {files.length === 0 ? (
-            <button
-              type="button"
-              onClick={() => fileInput.current?.click()}
-              className="mt-2 w-full rounded-lg border border-dashed border-border px-3 py-5 text-center text-xs text-fg-muted hover:border-border-light hover:text-fg-secondary"
-            >
-              {t("home.contextEmpty")}
-            </button>
-          ) : (
-            <ul className="mt-2 space-y-1">
-              {files.map((f) => (
-                <li
-                  key={f.id}
-                  className="group flex items-center gap-2 text-xs"
-                  onContextMenu={(e) => sourceCtx.open(e, f)}
-                >
-                  <FileText className="h-3.5 w-3.5 shrink-0 text-fg-muted" />
-                  <span title={f.path} className="min-w-0 flex-1 truncate text-fg-secondary">
-                    {f.name}
-                  </span>
-                  <span className="shrink-0 text-fg-muted">
-                    {f.missing ? t("home.missing") : fmtBytes(f.size)}
-                  </span>
-                  <button
-                    type="button"
-                    aria-label={`${t("home.remove")} ${f.name}`}
-                    onClick={() => void run(() => api.lanes.removeSource(lane.id, f.id))}
-                    className={`${iconBtn} opacity-0 group-hover:opacity-100 focus:opacity-100`}
-                  >
-                    <X className="h-3 w-3" />
-                  </button>
-                </li>
-              ))}
-            </ul>
-          )}
-        </section>
-
-        <section className={card}>
-          <div className="flex items-center justify-between">
-            <h3 className="text-sm font-medium text-fg-primary">{t("home.folder")}</h3>
-            <button
-              type="button"
-              aria-label={t("home.addFolder")}
-              title={t("home.addFolder")}
-              onClick={() => setFolderOpen((v) => !v)}
-              disabled={!view}
-              className={iconBtn}
-            >
-              <Plus className="h-3.5 w-3.5" />
-            </button>
-          </div>
-          <ul className="mt-2 space-y-1.5">
-            <li className="flex items-start gap-2 text-xs">
-              <Folder className="mt-0.5 h-3.5 w-3.5 shrink-0 text-fg-muted" />
-              <span className="min-w-0">
-                <span title={lane.cwd} className="block truncate text-fg-secondary">
-                  {lane.cwd.split("/").filter(Boolean).pop() || lane.cwd}
-                </span>
-                <span className="block text-fg-muted">{t("home.ownFolder")}</span>
-              </span>
-            </li>
-            {folders.map((f) => (
-              <li
-                key={f.id}
-                className="group flex items-center gap-2 text-xs"
-                onContextMenu={(e) => sourceCtx.open(e, f)}
-              >
-                <Folder className="h-3.5 w-3.5 shrink-0 text-fg-muted" />
-                <span title={f.path} className="min-w-0 flex-1 truncate text-fg-secondary">
-                  {f.name}
-                  {f.missing && (
-                    <span className="ml-1 text-status-warning">{t("home.missing")}</span>
-                  )}
-                </span>
-                <button
-                  type="button"
-                  aria-label={`${t("home.remove")} ${f.name}`}
-                  onClick={() => void run(() => api.lanes.removeSource(lane.id, f.id))}
-                  className={`${iconBtn} opacity-0 group-hover:opacity-100 focus:opacity-100`}
-                >
-                  <X className="h-3 w-3" />
-                </button>
-              </li>
-            ))}
-          </ul>
-          {folderOpen && (
-            <form
-              className="mt-3 space-y-2"
-              onSubmit={async (e) => {
-                e.preventDefault();
-                if (await run(() => api.lanes.addFolder(lane.id, folderPath.trim()))) {
-                  setFolderPath("");
-                  setFolderOpen(false);
-                }
-              }}
-            >
-              <div className="flex gap-2">
-                <input
-                  data-testid="workspace-folder-input"
-                  aria-label={t("home.folderPath")}
-                  placeholder={t("home.folderPath")}
-                  autoFocus
-                  value={folderPath}
-                  onChange={(e) => setFolderPath(e.target.value)}
-                  className="min-w-0 flex-1 rounded border border-border bg-surface-1 px-2 py-1 font-mono text-[11px] text-fg-primary"
-                />
-                <PathPickButton start={folderPath || lane.cwd} onPick={setFolderPath} />
-                <button type="submit" disabled={!folderPath.trim()} className="btn-ghost text-xs">
-                  {t("home.add")}
-                </button>
-              </div>
-              {suggestions.length > 0 && (
-                <div>
-                  <p className="text-[10px] uppercase tracking-wide text-fg-muted">
-                    {t("home.suggested")}
-                  </p>
-                  <ul className="mt-1 space-y-0.5">
-                    {suggestions.map((p) => (
-                      <li key={p}>
-                        <button
-                          type="button"
-                          onClick={() => setFolderPath(p)}
-                          title={p}
-                          className="w-full truncate rounded px-1 text-left font-mono text-[11px] text-fg-secondary hover:bg-surface-3"
-                        >
-                          {p}
-                        </button>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              )}
-            </form>
-          )}
-        </section>
-      </aside>
-
-      {memoryOpen && memory && (
-        <div
-          className="fixed inset-0 z-40 flex items-center justify-center bg-black/60 p-4"
-          role="presentation"
-          onClick={() => setMemoryOpen(false)}
-        >
-          <div
-            ref={memoryPanel}
-            role="dialog"
-            aria-modal="true"
-            aria-label={t("home.memory")}
-            onClick={(e) => e.stopPropagation()}
-            className="flex max-h-[85vh] w-full max-w-3xl flex-col rounded-xl border border-border bg-surface-1 p-5 shadow-xl"
-          >
-            <div className="mb-3 flex shrink-0 items-center justify-between">
-              <h2 className="text-sm font-semibold text-fg-primary">{t("home.memory")}</h2>
-              <button
-                type="button"
-                autoFocus
-                aria-label={t("home.close")}
-                onClick={() => setMemoryOpen(false)}
-                className={iconBtn}
-              >
-                <X className="h-4 w-4" />
-              </button>
-            </div>
-            <div
-              role="tablist"
-              aria-label={t("home.memory")}
-              // Wraps, so every file is reachable without a horizontal wheel (a
-              // hidden-scrollbar row cut the rest off); past ~3 rows it scrolls
-              // with a visible bar. shrink-0: a long file must not squeeze it.
-              className="mb-3 flex max-h-28 shrink-0 flex-wrap gap-1.5 overflow-y-auto border-b border-border/60 pb-2"
-            >
-              {memory.map((f, i) => (
-                <button
-                  key={f.path}
-                  type="button"
-                  role="tab"
-                  id={`workspace-memory-tab-${i}`}
-                  aria-controls="workspace-memory-panel"
-                  tabIndex={i === memoryTab ? 0 : -1}
-                  title={f.path}
-                  aria-selected={i === memoryTab}
-                  onClick={() => setMemoryTab(i)}
-                  // APG tabs: arrows move (and select), one tab stop.
-                  onKeyDown={(e) => {
-                    const n = memory.length;
-                    const to =
-                      e.key === "ArrowRight"
-                        ? (i + 1) % n
-                        : e.key === "ArrowLeft"
-                          ? (i - 1 + n) % n
-                          : e.key === "Home"
-                            ? 0
-                            : e.key === "End"
-                              ? n - 1
-                              : null;
-                    if (to === null) return;
-                    e.preventDefault();
-                    setMemoryTab(to);
-                    document.getElementById(`workspace-memory-tab-${to}`)?.focus();
-                  }}
-                  className={`flex-shrink-0 whitespace-nowrap rounded-lg border px-3 py-1.5 font-mono text-xs transition-colors ${
-                    i === memoryTab
-                      ? "border-accent/30 bg-accent/15 text-accent"
-                      : "border-border text-fg-secondary hover:bg-surface-3 hover:text-fg-primary"
-                  }`}
-                >
-                  {f.label}
-                </button>
-              ))}
-            </div>
-            {memory[memoryTab] && (
-              <div
-                role="tabpanel"
-                id="workspace-memory-panel"
-                aria-labelledby={`workspace-memory-tab-${memoryTab}`}
-                className="min-h-0 flex-1 overflow-y-auto"
-              >
-                <MarkdownPreview text={memory[memoryTab].content} />
-              </div>
-            )}
-          </div>
-        </div>
-      )}
+      <WorkspaceContext
+        lane={lane}
+        onSourcesChange={onSourcesChange}
+        sourcesVersion={sourcesVersion}
+      />
 
       {recentCtx.menu && (
         <SessionMenu
@@ -1174,34 +749,6 @@ function HomeBody({
           onArchive={() => void archiveSession(recentCtx.menu!.item)}
         />
       )}
-      {sourceCtx.menu && (
-        <ContextMenu
-          x={sourceCtx.menu.x}
-          y={sourceCtx.menu.y}
-          onClose={sourceCtx.close}
-          testId={`workspace-source-menu-${sourceCtx.menu.item.id}`}
-        >
-          <MenuItem
-            onSelect={() => {
-              void copyText(sourceCtx.menu!.item.path);
-              sourceCtx.close();
-            }}
-          >
-            {t("menu.copyPath")}
-          </MenuItem>
-          <MenuSeparator />
-          <MenuItem
-            danger
-            onSelect={() => {
-              const id = sourceCtx.menu!.item.id;
-              sourceCtx.close();
-              void run(() => api.lanes.removeSource(lane.id, id));
-            }}
-          >
-            {t("home.remove")}
-          </MenuItem>
-        </ContextMenu>
-      )}
       {menuAt && (
         <WorkspaceRowMenu
           lane={lane}

client/src/components/lanes/WorkspaceRow.tsx

@@ -8,13 +8,14 @@
  * preference kept in localStorage (`laneOrderStorage.ts`), never written to
  * the lane row. The row only STARTS a drag (`LANE_DRAG_TYPE`); the list
  * (`WorkspaceTree.tsx`) takes the drop anywhere, gaps included. F2 renames too; the
- * dot's meaning is screen-reader text, and an idle dot is a ring.
+ * dot's meaning is screen-reader text, and an idle dot is a ring. A `readOnly`
+ * row (another user's workspace, for an analyst) has no menu, rename or `+`.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
 import { useState, type MouseEvent } from "react";
 import { useTranslation } from "react-i18next";
-import { ChevronDown, ChevronRight, MoreHorizontal, Plus } from "lucide-react";
+import { ChevronDown, ChevronRight, Eye, MoreHorizontal, Plus } from "lucide-react";
 import type { Lane } from "../../lib/types";
 import { isSubmitEnter } from "../../lib/keys";
 
@@ -49,6 +50,7 @@ export function workspaceName(lane: Lane): string {
 export function WorkspaceRow({
   lane,
   index,
+  readOnly,
   selected,
   expanded,
   renaming,
@@ -63,6 +65,9 @@ export function WorkspaceRow({
   lane: Lane;
   /** Position in the list — the unit both reorder paths speak in. */
   index: number;
+  /** Set (to its tooltip) for a workspace this user may only read: no menu,
+   *  no rename, no new session. */
+  readOnly?: string;
   selected: boolean;
   expanded: boolean;
   renaming: boolean;
@@ -82,7 +87,12 @@ export function WorkspaceRow({
   const openMenu = (e: MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
-    onMenu(e.clientX, e.clientY);
+    if (!readOnly) onMenu(e.clientX, e.clientY);
+  };
+  const startRename = () => {
+    if (readOnly) return;
+    setDraft(lane.title || "");
+    onRenameStart();
   };
   const Chevron = expanded ? ChevronDown : ChevronRight;
   const hoverBtn =
@@ -140,22 +150,18 @@ export function WorkspaceRow({
           aria-current={selected ? "true" : undefined}
           // A double-click's second click renames instead of opening again.
           onClick={(e) => e.detail < 2 && onSelect()}
-          onDoubleClick={() => {
-            setDraft(lane.title || "");
-            onRenameStart();
-          }}
+          onDoubleClick={startRename}
           onKeyDown={(e) => {
             if (e.key === "F2") {
               e.preventDefault();
-              setDraft(lane.title || "");
-              onRenameStart();
+              startRename();
               return;
             }
             if (!e.altKey || (e.key !== "ArrowUp" && e.key !== "ArrowDown")) return;
             e.preventDefault();
             onReorder(index, index + (e.key === "ArrowUp" ? -1 : 1));
           }}
-          title={`${lane.cwd}\n${t("row.hint")}`}
+          title={`${lane.cwd}\n${readOnly ?? t("row.hint")}`}
           className="flex min-w-0 flex-1 items-center gap-2 py-1.5 text-left"
         >
           <span aria-hidden className={`h-2 w-2 shrink-0 rounded-full ${workspaceDot(lane)}`} />
@@ -163,7 +169,8 @@ export function WorkspaceRow({
           <span className="truncate text-[13px] font-medium text-fg-primary">{name}</span>
         </button>
       )}
-      {!renaming && (
+      {readOnly && <Eye aria-label={readOnly} className="mr-1 h-3 w-3 shrink-0 text-fg-muted" />}
+      {!renaming && !readOnly && (
         <>
           <button
             type="button"

client/src/components/lanes/WorkspaceSessionList.tsx

@@ -24,7 +24,9 @@
  * loads every one, then a **Show less** that goes back to `SESSION_LIMIT`. A
  * live tab whose session was archived is not brought back as a New session,
  * and archiving a live one asks first. F2 renames the focused row too; each
- * dot carries its meaning as screen-reader text.
+ * dot carries its meaning as screen-reader text. `readOnly` (another user's
+ * workspace, for an analyst): no live tabs, no rename/archive/menu, and a row
+ * opens the session's analysis page (`/sessions/<id>`) — never a pane or a resume.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -220,6 +222,7 @@ export function WorkspaceSessionList({
   selectedSessionId = null,
   onMatches,
   hidden = false,
+  readOnly = false,
 }: {
   lane: Lane;
   /** Every live dashboard pane, from `GET /api/run`. */
@@ -235,6 +238,8 @@ export function WorkspaceSessionList({
   onMatches?: (count: number) => void;
   /** Mounted only to load and count, during a search that hides the row. */
   hidden?: boolean;
+  /** A workspace this user may only read. */
+  readOnly?: boolean;
 }) {
   const { t } = useTranslation("lanes");
   const navigate = useNavigate();
@@ -315,7 +320,7 @@ export function WorkspaceSessionList({
     };
   }, [orphanIds]);
   const fresh =
-    sessions === null || q
+    sessions === null || q || readOnly
       ? []
       : [
           ...laneRuns.filter(
@@ -492,6 +497,7 @@ export function WorkspaceSessionList({
                   // A double-click's second click renames; it must not
                   // navigate (a second history entry) on top of the first.
                   if (e.detail > 1) return;
+                  if (readOnly) return navigate(`/sessions/${encodeURIComponent(s.id)}`);
                   navigate(
                     run
                       ? `/workspace?lane=${lane.id}&run=${encodeURIComponent(run.id)}`
@@ -501,19 +507,19 @@ export function WorkspaceSessionList({
                     run && (e.ctrlKey || e.metaKey) ? { state: { split: true } } : undefined
                   );
                 }}
-                onDoubleClick={() => startRename(s)}
+                onDoubleClick={() => !readOnly && startRename(s)}
                 onKeyDown={(e) => {
-                  if (e.key === "F2") {
+                  if (e.key === "F2" && !readOnly) {
                     e.preventDefault();
                     startRename(s);
                   }
                 }}
-                onContextMenu={(e) => sessionCtx.open(e, s)}
+                onContextMenu={readOnly ? undefined : (e) => sessionCtx.open(e, s)}
                 title={`${s.name || s.id}\n${timeAgo(s.last_activity ?? s.started_at)}${
                   sessionWorktreeName(lane, s)
                     ? `\n${t("tree.worktreeSession", { name: sessionWorktreeName(lane, s) })}`
                     : ""
-                }\n${run ? t("tree.splitHint") : t("tree.transcriptHint")}`}
+                }${readOnly ? "" : `\n${run ? t("tree.splitHint") : t("tree.transcriptHint")}`}`}
                 className={`flex w-full items-center gap-2 rounded-md py-1 pl-2 pr-2 text-left text-[12px] ${
                   selected
                     ? "bg-accent/10 text-fg-primary"
@@ -539,21 +545,23 @@ export function WorkspaceSessionList({
                 </span>
                 <AiToolIcon
                   tool={{ id: s.tool || "claude", label: tools.label(s.tool || "claude") }}
-                  className="h-3.5 w-3.5 shrink-0 !p-0 opacity-60 group-hover:invisible"
+                  className={`h-3.5 w-3.5 shrink-0 !p-0 opacity-60 ${readOnly ? "" : "group-hover:invisible"}`}
                 />
               </button>
-              <button
-                type="button"
-                data-testid={`workspace-session-archive-${s.id}`}
-                onClick={() => void archive(s)}
-                title={t("tree.archiveSession")}
-                aria-label={t("tree.archiveSession")}
-                // Invisible, not `hidden`: a keyboard user must be able to
-                // Tab onto it, and it shows when focused.
-                className="absolute right-1 top-1/2 -translate-y-1/2 rounded p-0.5 text-fg-muted opacity-0 hover:bg-surface-4 hover:text-fg-primary focus:opacity-100 group-hover:opacity-100"
-              >
-                <Archive className="h-3.5 w-3.5" />
-              </button>
+              {!readOnly && (
+                <button
+                  type="button"
+                  data-testid={`workspace-session-archive-${s.id}`}
+                  onClick={() => void archive(s)}
+                  title={t("tree.archiveSession")}
+                  aria-label={t("tree.archiveSession")}
+                  // Invisible, not `hidden`: a keyboard user must be able to
+                  // Tab onto it, and it shows when focused.
+                  className="absolute right-1 top-1/2 -translate-y-1/2 rounded p-0.5 text-fg-muted opacity-0 hover:bg-surface-4 hover:text-fg-primary focus:opacity-100 group-hover:opacity-100"
+                >
+                  <Archive className="h-3.5 w-3.5" />
+                </button>
+              )}
             </li>
           );
         })}

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

@@ -582,6 +582,19 @@ describe("AddLaneModal — folder browse", () => {
     expect(api.lanes.browse).not.toHaveBeenCalled();
   });
 
+  it("opens the picker on every click into the path field", async () => {
+    vi.mocked(api.lanes.pickPath).mockResolvedValue({ path: "/Users/tester/app" });
+    renderModal();
+    const user = userEvent.setup();
+    const field = document.getElementById("add-lane-repo")!;
+
+    await user.click(field);
+    await waitFor(() => expect(field).toHaveValue("/Users/tester/app"));
+    await user.click(field);
+    await waitFor(() => expect(api.lanes.pickPath).toHaveBeenCalledTimes(2));
+    expect(api.lanes.pickPath).toHaveBeenLastCalledWith("dir", "/Users/tester/app");
+  });
+
   it("falls back to the in-app browser when no native picker is available", async () => {
     noNativePicker();
     vi.mocked(api.lanes.browse).mockResolvedValue({

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

@@ -0,0 +1,109 @@
+/**
+ * @file InterruptedSessionsPrompt.test.tsx
+ * @description The "resume interrupted sessions?" dialog: it opens only when
+ * the server lists some, resumes only the ticked ones (never a bypass mode
+ * carried over), and either answer dismisses the list — but a resume that
+ * failed stays offered.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+import type { InterruptedRun } from "../../../lib/api";
+
+vi.mock("../startSession", () => ({
+  startInFreeTabDetailed: vi.fn(async (laneId: number) => ({
+    runId: `agenthub-lane-${laneId}-1`,
+    laneId,
+    held: false,
+  })),
+}));
+vi.mock("../../../lib/api", () => ({
+  api: {
+    run: {
+      interrupted: vi.fn(),
+      dismissInterrupted: vi.fn(async () => ({ dismissed: 0 })),
+    },
+  },
+}));
+
+import { api } from "../../../lib/api";
+import { startInFreeTabDetailed } from "../startSession";
+import { InterruptedSessionsPrompt } from "../InterruptedSessionsPrompt";
+
+const row = (session_id: string, lane_id: number, extra: Partial<InterruptedRun> = {}) =>
+  ({
+    id: `agenthub-lane-${lane_id}`,
+    session_id,
+    lane_id,
+    tool: "claude",
+    cwd: "/r",
+    model: null,
+    permission_mode: null,
+    effort: null,
+    prompt_preview: `prompt ${session_id}`,
+    started_at: "2026-10-10T00:00:00Z",
+    ended_at: "2026-10-10T01:00:00Z",
+    lane_title: `ws-${lane_id}`,
+    lane_cwd: "/r",
+    session_name: null,
+    ...extra,
+  }) as InterruptedRun;
+
+const list = (items: InterruptedRun[]) =>
+  vi.mocked(api.run.interrupted).mockResolvedValue({ items });
+
+beforeEach(() => vi.clearAllMocks());
+
+const renderIt = () =>
+  render(
+    <MemoryRouter>
+      <InterruptedSessionsPrompt />
+    </MemoryRouter>
+  );
+
+describe("InterruptedSessionsPrompt", () => {
+  it("shows nothing when no session was interrupted", async () => {
+    list([]);
+    renderIt();
+    await waitFor(() => expect(api.run.interrupted).toHaveBeenCalled());
+    expect(screen.queryByRole("dialog")).toBeNull();
+  });
+
+  it("resumes only the ticked sessions, then dismisses the list", async () => {
+    list([row("s-a", 1, { permission_mode: "bypassPermissions", model: "opus" }), row("s-b", 2)]);
+    const user = userEvent.setup();
+    renderIt();
+    await screen.findByRole("dialog");
+    await user.click(screen.getByRole("checkbox", { name: /ws-2/ }));
+    await user.click(screen.getByRole("button", { name: /resume 1/i }));
+    await waitFor(() => expect(api.run.dismissInterrupted).toHaveBeenCalledWith(["s-a", "s-b"]));
+    expect(startInFreeTabDetailed).toHaveBeenCalledTimes(1);
+    // The model goes back; a bypass mode is never carried over.
+    expect(startInFreeTabDetailed).toHaveBeenCalledWith(1, {
+      resumeSessionId: "s-a",
+      model: "opus",
+    });
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+  });
+
+  it("resumes nothing on Don't resume, and keeps a session whose resume failed", async () => {
+    list([row("s-a", 1)]);
+    const user = userEvent.setup();
+    const { unmount } = renderIt();
+    await user.click(await screen.findByText("Don't resume"));
+    await waitFor(() => expect(api.run.dismissInterrupted).toHaveBeenCalledWith(["s-a"]));
+    expect(startInFreeTabDetailed).not.toHaveBeenCalled();
+    unmount();
+
+    vi.clearAllMocks();
+    list([row("s-a", 1), row("s-b", 2)]);
+    vi.mocked(startInFreeTabDetailed).mockRejectedValueOnce(new Error("boom"));
+    renderIt();
+    await user.click(await screen.findByRole("button", { name: /resume 2/i }));
+    await waitFor(() => expect(api.run.dismissInterrupted).toHaveBeenCalledWith(["s-b"]));
+    expect(screen.getByRole("checkbox", { name: /ws-1/ })).toBeInTheDocument();
+  });
+});

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

@@ -255,6 +255,36 @@ describe("LaneChangesPanel", () => {
     expect(view).toHaveTextContent("keep");
   });
 
+  it("opens a file asked for from outside (a chat's Edited files card), once per request", async () => {
+    const view = render(
+      <LaneChangesPanel laneId={7} openRequest={{ path: "server/lib/git-ops.js", nonce: 1 }} />
+    );
+    await waitFor(() =>
+      expect(api.lanes.changes).toHaveBeenCalledWith(7, {
+        range: "work",
+        path: "server/lib/git-ops.js",
+        context: 3,
+      })
+    );
+    vi.mocked(api.lanes.changes).mockClear();
+    // The same request again changes nothing; a new nonce opens the next one.
+    view.rerender(
+      <LaneChangesPanel laneId={7} openRequest={{ path: "server/lib/git-ops.js", nonce: 1 }} />
+    );
+    view.rerender(<LaneChangesPanel laneId={7} openRequest={{ path: "src/main.ts", nonce: 2 }} />);
+    await waitFor(() =>
+      expect(api.lanes.changes).toHaveBeenCalledWith(7, {
+        range: "work",
+        path: "src/main.ts",
+        context: 3,
+      })
+    );
+    expect(api.lanes.changes).not.toHaveBeenCalledWith(
+      7,
+      expect.objectContaining({ path: "server/lib/git-ops.js" })
+    );
+  });
+
   it("asks for every file's hunks in review mode", async () => {
     const user = userEvent.setup();
     render(<LaneChangesPanel laneId={7} />);

client/src/components/lanes/startSession.ts

@@ -9,7 +9,7 @@
 
 import i18n from "../../i18n";
 import { api, type RunHandle } from "../../lib/api";
-import { MAX_SLOTS } from "../../lib/paneLayout";
+import { MAX_SLOTS, slotOfKey } from "../../lib/paneLayout";
 
 /** The tmux session a pane slot of a lane owns (server/lib/pty-run.js). */
 export function paneRunId(laneId: number, slot: number): string {
@@ -58,7 +58,9 @@ export async function startInFreeTabDetailed(
 /** The first pane slot with no live run, or null when all ten are busy. */
 export function freeSlot(laneId: number, runs: RunHandle[]): number | null {
   const busy = new Set(
-    runs.filter((r) => r.laneId === laneId && r.status === "running").map((r) => r.slot ?? 0)
+    runs
+      .filter((r) => r.laneId === laneId && r.status === "running")
+      .map((r) => slotOfKey(r.slot ?? 0))
   );
   for (let s = 0; s < MAX_SLOTS; s++) if (!busy.has(s)) return s;
   return null;

client/src/components/onboarding/OnboardingTour.tsx

@@ -0,0 +1,239 @@
+/**
+ * @file OnboardingTour.tsx
+ * @description The step-by-step spotlight tour after the first-run setup
+ * (docs/plans/onboarding): it dims the page around ONE real control and says
+ * what to do with it — Add workspace → the folder → Add → the prompt box →
+ * the live session → done. The overlay never takes a click (the user works
+ * the real UI); a step moves on when what it asked for has happened (the
+ * dialog opened, the workspace exists, the session started), and steps back
+ * when the user backed out (the dialog closed with nothing made). Targets are
+ * existing `data-testid`s plus `data-tour` marks in AddLaneModal and
+ * FolderBrowseModal. The
+ * step reached is `localStorage["agenthub.tour"]`, so it is synced to the
+ * account and survives a reload; `done` ends it.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import { useLocation, useNavigate } from "react-router-dom";
+
+const KEY = "agenthub.tour";
+const EVENT = "agenthub-tour";
+const POLL_MS = 250;
+
+type StepId = "add" | "folder" | "create" | "prompt" | "session" | "finish";
+const ORDER: StepId[] = ["add", "folder", "create", "prompt", "session", "finish"];
+
+const $ = (sel: string) => document.querySelector(sel);
+/** An element that is on screen (a console collapsed with CSS has no box). */
+function shown(sel: string): Element | null {
+  const el = $(sel);
+  if (!el) return null;
+  const r = el.getBoundingClientRect();
+  return r.width > 0 && r.height > 0 ? el : null;
+}
+
+const modalOpen = () => !!$('[data-tour="add-lane"]');
+const composer = () => shown('[data-testid="workspace-home-composer"]');
+const sessionLive = () =>
+  !!new URLSearchParams(window.location.search).get("run") && !!shown('[data-testid="pane-grid"]');
+
+/** Where each step points, and what moves it on (or back). */
+const STEPS: Record<
+  StepId,
+  { target: () => Element | null; next?: () => StepId | null; info?: boolean }
+> = {
+  add: {
+    // The sidebar's +; folded to a rail, its tree icon (which unfolds it).
+    target: () =>
+      shown('[data-testid="workspace-tree-add"]') || shown('[data-testid="sidebar-tree-rail"]'),
+    next: () => (modalOpen() ? "folder" : null),
+  },
+  folder: {
+    // The folder browser while it is open: it sits over the field.
+    target: () => $('[data-tour="folder-browse"]') || $('[data-tour="add-lane-folder"]'),
+    next: () => (modalOpen() ? null : composer() ? "prompt" : "add"),
+    info: true,
+  },
+  create: {
+    target: () => $('[data-tour="add-lane-create"]'),
+    next: () => (modalOpen() ? null : composer() ? "prompt" : "add"),
+  },
+  prompt: {
+    target: composer,
+    next: () => (sessionLive() ? "session" : null),
+  },
+  session: { target: () => shown('[data-testid="pane-grid"]'), info: true },
+  finish: { target: () => null, info: true },
+};
+
+function read(): StepId | null {
+  try {
+    const v = localStorage.getItem(KEY);
+    return (ORDER as string[]).includes(v ?? "") ? (v as StepId) : null;
+  } catch {
+    return null;
+  }
+}
+function write(v: StepId | "done") {
+  try {
+    localStorage.setItem(KEY, v);
+  } catch {
+    /* storage blocked: the tour just ends with the page */
+  }
+  window.dispatchEvent(new Event(EVENT));
+}
+
+/** Begin the tour at its first step (the setup's last button). */
+export const startTour = () => write("add");
+
+/** Mounted once in the layout; renders nothing unless a tour is running. */
+export function OnboardingTour() {
+  const { t } = useTranslation("onboarding");
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [step, setStep] = useState<StepId | null>(read);
+  const [rect, setRect] = useState<DOMRect | null>(null);
+  // The dialog the target sits in, if any: the card goes beside the dialog.
+  const [box, setBox] = useState<DOMRect | null>(null);
+
+  useEffect(() => {
+    const sync = () => setStep(read());
+    window.addEventListener(EVENT, sync);
+    window.addEventListener("storage", sync);
+    return () => {
+      window.removeEventListener(EVENT, sync);
+      window.removeEventListener("storage", sync);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!step) return;
+    const tick = () => {
+      const def = STEPS[step];
+      const moved = def.next?.();
+      if (moved && moved !== step) return write(moved);
+      const el = def.target();
+      let r = el ? el.getBoundingClientRect() : null;
+      // The folder field's suggestions hang below it: light them too.
+      const list = el?.querySelector("[data-cwd-suggestions]")?.getBoundingClientRect();
+      if (r && list) {
+        const top = Math.min(r.top, list.top);
+        const left = Math.min(r.left, list.left);
+        r = new DOMRect(
+          left,
+          top,
+          Math.max(r.right, list.right) - left,
+          Math.max(r.bottom, list.bottom) - top
+        );
+      }
+      const d = el?.closest("[role=dialog]")?.getBoundingClientRect() ?? null;
+      setBox((prev) => (prev && d && prev.right === d.right ? prev : d));
+      // Only when it moved: a new DOMRect every tick would re-render forever.
+      setRect((prev) =>
+        prev &&
+        r &&
+        prev.x === r.x &&
+        prev.y === r.y &&
+        prev.width === r.width &&
+        prev.height === r.height
+          ? prev
+          : r
+      );
+    };
+    tick();
+    const id = window.setInterval(tick, POLL_MS);
+    return () => window.clearInterval(id);
+  }, [step, location]);
+
+  if (!step) return null;
+  const n = ORDER.indexOf(step) + 1;
+  const end = () => write("done");
+  const advance = () => {
+    if (step === "folder") return write("create");
+    if (step === "session") return write("finish");
+    end();
+  };
+  const lost = !rect && step !== "finish";
+
+  // Beside a narrow target (a field in a dialog: below it, the card would
+  // cover the rest of the dialog), else under it when there is room, else
+  // above; centred when there is no target (the finish, or the page moved).
+  const W = 320;
+  let style: React.CSSProperties = { left: "50%", top: "50%", transform: "translate(-50%, -50%)" };
+  if (rect) {
+    const right = (box ?? rect).right;
+    const top = Math.min(Math.max(12, rect.top), window.innerHeight - 220);
+    const left = Math.min(Math.max(12, rect.left), window.innerWidth - W - 12);
+    if (rect.width < window.innerWidth / 2 && right + W + 24 < window.innerWidth) {
+      style = { left: right + 16, top };
+    } else if (rect.bottom + 180 < window.innerHeight) {
+      style = { left, top: rect.bottom + 12 };
+    } else {
+      style = { left, top: Math.max(12, rect.top - 12), transform: "translateY(-100%)" };
+    }
+  }
+
+  return createPortal(
+    <div className="pointer-events-none fixed inset-0 z-[70]" data-testid="onboarding-tour">
+      {rect ? (
+        <div
+          aria-hidden
+          className="absolute rounded-lg ring-2 ring-accent transition-all duration-200"
+          style={{
+            left: rect.left - 6,
+            top: rect.top - 6,
+            width: rect.width + 12,
+            height: rect.height + 12,
+            boxShadow: "0 0 0 9999px rgba(0, 0, 0, 0.55)",
+          }}
+        />
+      ) : (
+        step === "finish" && <div aria-hidden className="absolute inset-0 bg-black/55" />
+      )}
+      <div
+        role="dialog"
+        aria-live="polite"
+        aria-label={t(`tour.${step}.title`)}
+        className="pointer-events-auto absolute w-80 space-y-2 rounded-xl border border-border bg-surface-1 p-4 shadow-2xl shadow-black/50"
+        style={style}
+      >
+        <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-fg-muted">
+          {t("tour.progress", { n, total: ORDER.length })}
+        </p>
+        <p className="text-sm font-semibold text-fg-primary">{t(`tour.${step}.title`)}</p>
+        <p className="text-xs leading-relaxed text-fg-secondary">{t(`tour.${step}.body`)}</p>
+        <div className="flex items-center gap-2 pt-1">
+          {step !== "finish" && (
+            <button type="button" onClick={end} className="btn-ghost px-0 text-xs">
+              {t("tour.skip")}
+            </button>
+          )}
+          <span className="flex-1" />
+          {lost && !location.pathname.startsWith("/workspace") && (
+            <button
+              type="button"
+              onClick={() => navigate("/workspace")}
+              className="btn-ghost border border-border text-xs"
+            >
+              {t("tour.goWorkspaces")}
+            </button>
+          )}
+          {STEPS[step].info && (
+            <button
+              type="button"
+              onClick={advance}
+              data-testid="onboarding-tour-next"
+              className="btn-primary text-xs"
+            >
+              {step === "finish" ? t("tour.done") : t("tour.next")}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+}

client/src/components/onboarding/OnboardingWizard.tsx

@@ -0,0 +1,543 @@
+/**
+ * @file OnboardingWizard.tsx
+ * @description The first-run setup, once per ACCOUNT (docs/plans/onboarding;
+ * modelled on Orca's welcome): 1 the default agent — the AI tools detected on
+ * this machine, the rest behind "show more" — and the permission mode a new
+ * session starts in (never bypass: that stays per session); 2 the look —
+ * System / Dark / Light, a theme for each mode, language and terminal font;
+ * 3 the corner pet (`PetSettings`); 4 notifications — permission, sound,
+ * a test. Every choice is the same localStorage write Settings makes, so it
+ * applies at once and is synced to the account (`lib/userPrefs.ts`). Shown
+ * when the account has not been through it and has no workspace yet (one that
+ * has is marked done silently), or when Settings asks for it again. The last
+ * step hands over to the tour (`OnboardingTour`).
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { Check, ChevronLeft, Monitor, Moon, Play, Sun, Zap } from "lucide-react";
+import { api } from "../../lib/api";
+import { useDialog } from "../../hooks/useDialog";
+import { useAiTools } from "../../hooks/useAiTools";
+import { THEMES, useTheme, type Theme, type ThemeMode } from "../../hooks/useTheme";
+import { AiToolIcon } from "../AiToolIcon";
+import { Switch } from "../Switch";
+import { SettingsSegmented } from "../settings/SettingsRow";
+import { PetSettings } from "../settings/PetSettings";
+import { Swatch, THEME_LABELS } from "../settings/AppearanceSettings";
+import { markOnboarded, useOnboarding } from "../../lib/userPrefs";
+import {
+  DEFAULT_MODES,
+  readDefaultMode,
+  readDefaultTool,
+  writeDefaultMode,
+  writeDefaultTool,
+  type DefaultMode,
+} from "../../lib/sessionDefaults";
+import {
+  TERMINAL_FONTS,
+  readTerminalFont,
+  writeTerminalFont,
+  type TerminalFont,
+} from "../../lib/terminalFont";
+import {
+  NOTIF_SOUNDS,
+  loadNotifPrefs,
+  saveNotifPrefs,
+  type NotifPrefs,
+  type NotifSound,
+} from "../../lib/notifPrefs";
+import { notify, playSound } from "../../lib/notify";
+import { subscribeToPush } from "../../lib/push";
+import { startTour } from "./OnboardingTour";
+
+const STEPS = ["agent", "look", "pet", "notify"] as const;
+type Step = (typeof STEPS)[number];
+
+/** Mounted once in the layout: decides whether this account sees the setup. */
+export function OnboardingWizard() {
+  const { loaded, onboardedAt, forced } = useOnboarding();
+  const [show, setShow] = useState(false);
+  useEffect(() => {
+    if (!loaded || onboardedAt) return setShow(false);
+    if (forced) return setShow(true);
+    let alive = true;
+    api.lanes
+      .list()
+      .then((r) => {
+        if (!alive) return;
+        // An account already at work never needed a welcome.
+        if (r.lanes.length) void markOnboarded();
+        else setShow(true);
+      })
+      .catch(() => {
+        /* cannot tell: ask again next load rather than interrupt */
+      });
+    return () => {
+      alive = false;
+    };
+  }, [loaded, onboardedAt, forced]);
+  return show ? <Wizard /> : null;
+}
+
+function Wizard() {
+  const { t } = useTranslation("onboarding");
+  const navigate = useNavigate();
+  const [index, setIndex] = useState(0);
+  const step: Step = STEPS[index] ?? "agent";
+  const last = index === STEPS.length - 1;
+  const panelRef = useRef<HTMLDivElement>(null);
+  useDialog(true, panelRef);
+
+  const skip = () => void markOnboarded();
+  const next = () => {
+    if (!last) return setIndex(index + 1);
+    void markOnboarded();
+    startTour();
+    navigate("/");
+  };
+
+  // Ctrl/⌘+Enter continues, like Orca.
+  const nextRef = useRef(next);
+  nextRef.current = next;
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        nextRef.current();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+
+  return (
+    <div className="fixed inset-0 z-[65] flex items-center justify-center bg-black/70 p-4 backdrop-blur-sm">
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="onboarding-title"
+        data-testid="onboarding-wizard"
+        className="flex h-[min(820px,92vh)] w-full max-w-4xl flex-col rounded-2xl border border-border bg-surface-1 shadow-2xl shadow-black/50"
+      >
+        <div className="space-y-5 px-8 pt-7">
+          <div className="flex items-center gap-2.5">
+            <img src="/favicon.svg" alt="" className="h-7 w-7" />
+            <span className="text-sm font-semibold text-fg-primary">{t("brand")}</span>
+          </div>
+          <div className="flex items-center gap-3" aria-hidden>
+            {STEPS.map((s, i) => (
+              <span
+                key={s}
+                className={`h-1 w-9 rounded-full ${i <= index ? "bg-fg-primary" : "bg-surface-4"}`}
+              />
+            ))}
+            <span className="text-xs text-fg-muted">
+              {t("progress", { n: index + 1, total: STEPS.length })}
+            </span>
+          </div>
+        </div>
+
+        <div className="min-h-0 flex-1 overflow-y-auto px-8 py-6">
+          {step === "agent" && <AgentStep />}
+          {step === "look" && <LookStep />}
+          {step === "pet" && (
+            <StepHead title={t("pet.title")} body={t("pet.body")}>
+              <PetSettings />
+            </StepHead>
+          )}
+          {step === "notify" && <NotifyStep />}
+        </div>
+
+        <div className="flex items-center gap-2 border-t border-border px-8 py-4">
+          <button type="button" onClick={skip} className="btn-ghost text-xs">
+            {t("skip")}
+          </button>
+          <span className="flex-1" />
+          {index > 0 && (
+            <button
+              type="button"
+              onClick={() => setIndex(index - 1)}
+              className="btn-ghost border border-border text-xs"
+            >
+              <ChevronLeft className="h-3.5 w-3.5" />
+              {t("back")}
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={next}
+            data-testid="onboarding-next"
+            className="btn-primary text-xs"
+          >
+            {last ? t("finish") : t("continue")}
+            <kbd className="ml-1 rounded border border-white/30 px-1 text-[10px] font-normal opacity-80">
+              Ctrl ↵
+            </kbd>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function StepHead({
+  eyebrow,
+  title,
+  body,
+  children,
+}: {
+  eyebrow?: string;
+  title: string;
+  body: string;
+  children: ReactNode;
+}) {
+  return (
+    <section className="space-y-6">
+      <div className="space-y-2">
+        {eyebrow && (
+          <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-fg-muted">
+            {eyebrow}
+          </p>
+        )}
+        <h2 id="onboarding-title" className="text-3xl font-bold text-fg-primary">
+          {title}
+        </h2>
+        <p className="text-sm text-fg-secondary">{body}</p>
+      </div>
+      {children}
+    </section>
+  );
+}
+
+function AgentStep() {
+  const { t } = useTranslation("onboarding");
+  const aiTools = useAiTools();
+  const installed = aiTools.tools.filter((x) => x.installed && x.enabled);
+  const others = aiTools.tools.filter((x) => !(x.installed && x.enabled));
+  const [more, setMore] = useState(false);
+  const [picked, setPicked] = useState<string | null>(readDefaultTool);
+  const current =
+    (picked && installed.some((x) => x.id === picked) ? picked : null) ??
+    aiTools.defaultId ??
+    installed[0]?.id ??
+    null;
+  const [mode, setMode] = useState<DefaultMode>(() => readDefaultMode() as DefaultMode);
+
+  const pick = (id: string) => {
+    writeDefaultTool(id);
+    setPicked(id);
+  };
+
+  return (
+    <StepHead eyebrow={t("agent.eyebrow")} title={t("agent.title")} body={t("agent.body")}>
+      <div className="space-y-3">
+        <p className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.14em] text-fg-muted">
+          <span className="h-1.5 w-1.5 rounded-full bg-status-success" />
+          {t("agent.detected", { count: installed.length })}
+        </p>
+        {aiTools.loaded && !installed.length && (
+          <p className="text-sm text-fg-muted">{t("agent.none")}</p>
+        )}
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          {installed.map((tool) => {
+            const selected = tool.id === current;
+            return (
+              <button
+                key={tool.id}
+                type="button"
+                onClick={() => pick(tool.id)}
+                aria-pressed={selected}
+                data-testid={`onboarding-agent-${tool.id}`}
+                className={`relative flex items-center gap-3 rounded-xl border px-4 py-3.5 text-left transition-colors ${
+                  selected
+                    ? "border-accent bg-accent/10 ring-1 ring-accent/50"
+                    : "border-border bg-surface-2 hover:border-border-light"
+                }`}
+              >
+                <AiToolIcon tool={tool} className="h-6 w-6 shrink-0" />
+                <span className="min-w-0">
+                  <span className="block truncate text-sm font-medium text-fg-primary">
+                    {tool.label}
+                  </span>
+                  <span className="block truncate font-mono text-xs text-fg-muted">
+                    {tool.command || tool.id}
+                  </span>
+                </span>
+                {selected && (
+                  <span className="absolute right-2.5 top-2.5 flex h-5 w-5 items-center justify-center rounded-full bg-accent-solid text-white">
+                    <Check className="h-3 w-3" />
+                  </span>
+                )}
+              </button>
+            );
+          })}
+          {more &&
+            others.map((tool) => (
+              <div
+                key={tool.id}
+                className="flex items-center gap-3 rounded-xl border border-dashed border-border px-4 py-3.5 opacity-60"
+              >
+                <AiToolIcon tool={tool} className="h-6 w-6 shrink-0" />
+                <span className="min-w-0">
+                  <span className="block truncate text-sm text-fg-primary">{tool.label}</span>
+                  <span className="block text-xs text-fg-muted">{t("agent.notInstalled")}</span>
+                </span>
+              </div>
+            ))}
+        </div>
+        {others.length > 0 && (
+          <button
+            type="button"
+            onClick={() => setMore(!more)}
+            className="text-xs font-medium text-fg-secondary hover:text-fg-primary"
+          >
+            {more ? t("agent.less") : `${t("agent.more", { count: others.length })} →`}
+          </button>
+        )}
+      </div>
+
+      <div className="space-y-2 rounded-xl border border-border bg-surface-2 px-4 py-3.5">
+        <div className="flex flex-wrap items-center gap-3">
+          <span className="text-sm font-medium text-fg-primary">{t("agent.permission")}</span>
+          <SettingsSegmented
+            ariaLabel={t("agent.permission")}
+            value={mode}
+            onChange={(m) => {
+              writeDefaultMode(m);
+              setMode(m);
+            }}
+            options={DEFAULT_MODES.map((m) => ({ value: m, label: t(`agent.modes.${m}`) }))}
+          />
+        </div>
+        <p className="text-xs text-fg-muted">{t("agent.permissionHint")}</p>
+      </div>
+    </StepHead>
+  );
+}
+
+const MODE_CARDS: { mode: ThemeMode; Icon: typeof Moon }[] = [
+  { mode: "system", Icon: Monitor },
+  { mode: "dark", Icon: Moon },
+  { mode: "light", Icon: Sun },
+];
+
+function LookStep() {
+  const { t, i18n } = useTranslation("onboarding");
+  const { t: ts } = useTranslation("settings");
+  const { mode, themeFor, setMode, setThemeFor } = useTheme();
+  const [font, setFont] = useState<TerminalFont>(readTerminalFont);
+
+  return (
+    <StepHead title={t("look.title")} body={t("look.body")}>
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+        {MODE_CARDS.map(({ mode: m, Icon }) => {
+          const selected = mode === m;
+          return (
+            <button
+              key={m}
+              type="button"
+              onClick={() => setMode(m)}
+              aria-pressed={selected}
+              data-testid={`onboarding-mode-${m}`}
+              className={`rounded-xl border p-2.5 text-left transition-colors ${
+                selected
+                  ? "border-accent ring-2 ring-accent/40"
+                  : "border-border hover:border-border-light"
+              }`}
+            >
+              {m === "system" ? (
+                <div className="grid grid-cols-2 overflow-hidden rounded-md">
+                  <Swatch mode="dark" name={themeFor.dark} />
+                  <Swatch mode="light" name={themeFor.light} />
+                </div>
+              ) : (
+                <Swatch mode={m} name={themeFor[m]} />
+              )}
+              <span className="flex items-center gap-1.5 px-1 pt-2 text-sm font-medium text-fg-primary">
+                <Icon className="h-3.5 w-3.5" />
+                {t(`look.modes.${m}`)}
+                <span className="ml-auto text-[11px] font-normal text-fg-muted">
+                  {t(`look.modeHints.${m}`)}
+                </span>
+              </span>
+            </button>
+          );
+        })}
+      </div>
+
+      {(["dark", "light"] as Theme[]).map((group) => (
+        <div key={group} className="space-y-2">
+          <p className="text-xs font-medium text-fg-secondary">
+            {t(group === "dark" ? "look.darkThemes" : "look.lightThemes")}
+          </p>
+          <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
+            {THEMES[group].map((name) => {
+              const selected = themeFor[group] === name;
+              const label = THEME_LABELS[name] ?? ts("appearance.default");
+              return (
+                <button
+                  key={name}
+                  type="button"
+                  onClick={() => setThemeFor(group, name)}
+                  aria-pressed={selected}
+                  aria-label={`${t(group === "dark" ? "look.darkThemes" : "look.lightThemes")}: ${label}`}
+                  className={`rounded-lg border p-1 text-left transition-colors ${
+                    selected
+                      ? "border-accent ring-2 ring-accent/40"
+                      : "border-border hover:border-border-light"
+                  }`}
+                >
+                  <Swatch mode={group} name={name} />
+                  <span className="block px-1 pt-1 text-[11px] text-fg-primary">{label}</span>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <div className="space-y-2">
+          <p className="text-xs font-medium text-fg-secondary">{t("look.language")}</p>
+          <SettingsSegmented
+            ariaLabel={t("look.language")}
+            value={(i18n.resolvedLanguage ?? i18n.language).startsWith("vi") ? "vi" : "en"}
+            onChange={(v) => void i18n.changeLanguage(v)}
+            options={[
+              { value: "en" as const, label: ts("language.names.en") },
+              { value: "vi" as const, label: ts("language.names.vi") },
+            ]}
+          />
+        </div>
+        <div className="space-y-2">
+          <p className="text-xs font-medium text-fg-secondary">{t("look.font")}</p>
+          <SettingsSegmented
+            ariaLabel={t("look.font")}
+            value={font}
+            onChange={(f) => {
+              writeTerminalFont(f);
+              setFont(f);
+            }}
+            options={(Object.keys(TERMINAL_FONTS) as TerminalFont[]).map((f) => ({
+              value: f,
+              label: (
+                <span style={{ fontFamily: TERMINAL_FONTS[f] }}>
+                  {ts(`terminalFont.names.${f}`)}
+                </span>
+              ),
+            }))}
+          />
+        </div>
+      </div>
+      <p className="text-xs text-fg-muted">{t("look.more")}</p>
+    </StepHead>
+  );
+}
+
+function NotifyStep() {
+  const { t } = useTranslation("onboarding");
+  const { t: ts } = useTranslation("settings");
+  const [prefs, setPrefs] = useState<NotifPrefs>(loadNotifPrefs);
+  const [result, setResult] = useState<string | null>(null);
+  const supported = typeof window !== "undefined" && "Notification" in window;
+  const [permission, setPermission] = useState(() =>
+    supported ? Notification.permission : "default"
+  );
+  const update = (patch: Partial<NotifPrefs>) => {
+    const next = { ...prefs, ...patch };
+    saveNotifPrefs(next);
+    setPrefs(next);
+  };
+
+  const enable = async (on: boolean) => {
+    if (!on) return update({ enabled: false });
+    if (supported && Notification.permission !== "granted") {
+      const perm = await Notification.requestPermission();
+      setPermission(perm);
+      if (perm !== "granted") return;
+    }
+    update({ enabled: true });
+    await subscribeToPush().catch(() => {
+      /* the local fallback still shows them */
+    });
+  };
+
+  const test = async () => {
+    const r = await notify(ts("notifications.testTitle"), ts("notifications.testBody"));
+    setResult(
+      r.via === "push" || r.via === "native"
+        ? ts("notifications.testSent")
+        : r.via === "local"
+          ? ts("notifications.testLocal")
+          : r.via === "blocked"
+            ? ts("notifications.testBlocked")
+            : ts("notifications.testFailed")
+    );
+  };
+
+  return (
+    <StepHead title={t("notify.title")} body={t("notify.body")}>
+      <div className="space-y-4 rounded-xl border border-border bg-surface-2 px-4 py-4">
+        <div className="flex items-center gap-3">
+          <div className="min-w-0 flex-1">
+            <p className="text-sm font-medium text-fg-primary">{t("notify.enable")}</p>
+            <p className="text-xs text-fg-muted">{t("notify.enableHint")}</p>
+          </div>
+          <Switch
+            checked={prefs.enabled}
+            onChange={(v) => void enable(v)}
+            label={t("notify.enable")}
+          />
+        </div>
+        {permission === "denied" && (
+          <p className="text-xs text-status-danger">{t("notify.blocked")}</p>
+        )}
+        <div className="flex flex-wrap items-center gap-2 border-t border-border pt-4">
+          <span className="mr-2 text-sm text-fg-primary">{t("notify.sound")}</span>
+          <select
+            aria-label={t("notify.sound")}
+            value={prefs.sound}
+            onChange={(e) => {
+              const sound = e.target.value as NotifSound;
+              update({ sound });
+              playSound(sound);
+            }}
+            className="select py-1 text-xs"
+          >
+            {NOTIF_SOUNDS.map((k) => (
+              <option key={k} value={k}>
+                {ts(`notifications.sound.${k}`)}
+              </option>
+            ))}
+          </select>
+          <button
+            type="button"
+            onClick={() => playSound(prefs.sound)}
+            disabled={prefs.sound === "none"}
+            className="btn-ghost text-xs disabled:opacity-50"
+          >
+            <Play className="h-3 w-3" />
+            {t("notify.preview")}
+          </button>
+          <button
+            type="button"
+            onClick={() => void test()}
+            className="btn-ghost border border-border text-xs"
+          >
+            <Zap className="h-3 w-3" />
+            {t("notify.test")}
+          </button>
+        </div>
+        {result && (
+          <p role="status" className="text-xs text-fg-secondary">
+            {result}
+          </p>
+        )}
+      </div>
+    </StepHead>
+  );
+}

client/src/components/onboarding/__tests__/Onboarding.test.tsx

@@ -0,0 +1,256 @@
+/**
+ * @file Onboarding.test.tsx
+ * @description The first-run setup (docs/plans/onboarding): the account's
+ * preferences are loaded into localStorage on sign-in and every later change
+ * is sent back; the starting choices never hold bypass; the wizard shows only
+ * for an account that is new to it, writes each pick like Settings does and
+ * ends in the tour; the tour follows the real UI step by step.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { act, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+
+const prefsMock = vi.fn();
+const saveMock = vi.fn();
+const onboardedMock = vi.fn();
+const lanesMock = vi.fn();
+
+vi.mock("../../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>();
+  return {
+    ...actual,
+    api: {
+      me: {
+        prefs: () => prefsMock(),
+        savePrefs: (p: unknown) => saveMock(p),
+        onboarded: () => onboardedMock(),
+      },
+      lanes: { list: () => lanesMock() },
+      aiTools: {
+        iconUrl: (id: string) => `/api/ai-tools/${id}/icon`,
+        list: async () => ({
+          default: "claude",
+          catalog: [],
+          tools: [
+            {
+              id: "claude",
+              label: "Claude Code",
+              command: "claude",
+              installed: true,
+              enabled: true,
+            },
+            { id: "codex", label: "Codex", command: "codex", installed: true, enabled: true },
+            { id: "kimi", label: "Kimi Code", command: "kimi", installed: false, enabled: true },
+          ],
+        }),
+      },
+    },
+  };
+});
+vi.mock("../../settings/PetSettings", () => ({
+  PetSettings: () => <div data-testid="pet-settings" />,
+}));
+
+import { __resetUserPrefs, hydrate, useOnboarding } from "../../../lib/userPrefs";
+import { readDefaultMode, writeDefaultMode } from "../../../lib/sessionDefaults";
+import { OnboardingWizard } from "../OnboardingWizard";
+import { OnboardingTour, startTour } from "../OnboardingTour";
+import { __resetAiTools } from "../../../hooks/useAiTools";
+
+beforeEach(() => {
+  localStorage.clear();
+  __resetUserPrefs();
+  __resetAiTools();
+  prefsMock.mockReset();
+  saveMock.mockReset().mockResolvedValue({ prefs: {}, onboardedAt: null });
+  onboardedMock.mockReset().mockResolvedValue({ prefs: {}, onboardedAt: "2026-10-08T00:00:00Z" });
+  lanesMock.mockReset().mockResolvedValue({ lanes: [], counts: {} });
+});
+
+describe("account preferences", () => {
+  it("loads the account's values, sends up this browser's, then every change", async () => {
+    vi.useFakeTimers();
+    try {
+      localStorage.setItem("agenthub.terminal.font", "maple");
+      localStorage.setItem("theme", "dark");
+      prefsMock.mockResolvedValue({ prefs: { theme: "light" }, onboardedAt: null });
+      await hydrate();
+      expect(localStorage.getItem("theme")).toBe("light");
+      await vi.advanceTimersByTimeAsync(10);
+      expect(saveMock).toHaveBeenCalledWith(
+        expect.objectContaining({ "agenthub.terminal.font": "maple" })
+      );
+      saveMock.mockClear();
+      localStorage.setItem("agenthub.theme.dark", "darcula");
+      localStorage.setItem("unrelated.key", "x");
+      localStorage.removeItem("agenthub.pet");
+      await vi.advanceTimersByTimeAsync(500);
+      expect(saveMock).toHaveBeenCalledTimes(1);
+      expect(saveMock).toHaveBeenCalledWith({
+        "agenthub.theme.dark": "darcula",
+        "agenthub.pet": null,
+      });
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("never keeps bypass as the starting permission mode", () => {
+    localStorage.setItem("agenthub.permissionMode", "bypassPermissions");
+    expect(readDefaultMode()).toBe("auto");
+    writeDefaultMode("bypassPermissions" as never);
+    expect(localStorage.getItem("agenthub.permissionMode")).toBe("bypassPermissions");
+    writeDefaultMode("plan");
+    expect(readDefaultMode()).toBe("plan");
+  });
+});
+
+function Probe() {
+  const s = useOnboarding();
+  return <span data-testid="onboarded">{s.onboardedAt ?? "no"}</span>;
+}
+const renderWizard = () =>
+  render(
+    <MemoryRouter>
+      <OnboardingWizard />
+      <Probe />
+    </MemoryRouter>
+  );
+
+describe("the setup wizard", () => {
+  it("does not show before the account's preferences load, nor once done", async () => {
+    renderWizard();
+    expect(screen.queryByTestId("onboarding-wizard")).toBeNull();
+    prefsMock.mockResolvedValue({ prefs: {}, onboardedAt: "2026-01-01T00:00:00Z" });
+    await act(() => hydrate());
+    expect(screen.queryByTestId("onboarding-wizard")).toBeNull();
+  });
+
+  it("skips itself for an account that already has a workspace", async () => {
+    lanesMock.mockResolvedValue({ lanes: [{ id: 1 }], counts: {} });
+    prefsMock.mockResolvedValue({ prefs: {}, onboardedAt: null });
+    renderWizard();
+    await act(() => hydrate());
+    await waitFor(() => expect(onboardedMock).toHaveBeenCalled());
+    expect(screen.queryByTestId("onboarding-wizard")).toBeNull();
+  });
+
+  it("walks four steps, saving each pick, and ends in the tour", async () => {
+    const user = userEvent.setup();
+    prefsMock.mockResolvedValue({ prefs: {}, onboardedAt: null });
+    renderWizard();
+    await act(() => hydrate());
+    await screen.findByTestId("onboarding-wizard");
+    expect(screen.getByText("Pick your default agent")).toBeInTheDocument();
+    await user.click(await screen.findByTestId("onboarding-agent-codex"));
+    expect(localStorage.getItem("agenthub.defaultTool")).toBe("codex");
+    // A tool that is not installed is not offered until asked for, and never pickable.
+    expect(screen.queryByText("Kimi Code")).toBeNull();
+    await user.click(screen.getByText(/Show 1 more agents/));
+    expect(screen.getByText("Kimi Code").closest("button")).toBeNull();
+    await user.click(screen.getByRole("radio", { name: "Plan" }));
+    expect(localStorage.getItem("agenthub.permissionMode")).toBe("plan");
+
+    await user.click(screen.getByTestId("onboarding-next"));
+    expect(screen.getByText("Make it feel like home")).toBeInTheDocument();
+    await user.click(screen.getByTestId("onboarding-mode-light"));
+    expect(localStorage.getItem("theme")).toBe("light");
+    await user.click(screen.getByRole("button", { name: "Light theme: Canvas" }));
+    expect(localStorage.getItem("agenthub.theme.light")).toBe("canvas");
+
+    await user.click(screen.getByTestId("onboarding-next"));
+    expect(screen.getByTestId("pet-settings")).toBeInTheDocument();
+    await user.click(screen.getByTestId("onboarding-next"));
+    expect(screen.getByText("Set up notifications")).toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: /Add your first workspace/ }));
+    await waitFor(() => expect(onboardedMock).toHaveBeenCalled());
+    expect(screen.queryByTestId("onboarding-wizard")).toBeNull();
+    expect(localStorage.getItem("agenthub.tour")).toBe("add");
+  });
+
+  it("is skipped for good with Skip setup", async () => {
+    const user = userEvent.setup();
+    prefsMock.mockResolvedValue({ prefs: {}, onboardedAt: null });
+    renderWizard();
+    await act(() => hydrate());
+    await user.click(await screen.findByRole("button", { name: "Skip setup" }));
+    await waitFor(() => expect(screen.getByTestId("onboarded").textContent).not.toBe("no"));
+    expect(onboardedMock).toHaveBeenCalled();
+    expect(localStorage.getItem("agenthub.tour")).toBeNull();
+  });
+});
+
+describe("the tour", () => {
+  const mount = (html: string) => {
+    const host = document.createElement("div");
+    host.innerHTML = html;
+    document.body.appendChild(host);
+    return host;
+  };
+  // jsdom has no layout: give the targets a box.
+  const boxed = () =>
+    vi.spyOn(Element.prototype, "getBoundingClientRect").mockReturnValue({
+      x: 10,
+      y: 10,
+      left: 10,
+      top: 10,
+      width: 100,
+      height: 30,
+      right: 110,
+      bottom: 40,
+      toJSON: () => ({}),
+    } as DOMRect);
+
+  it("follows the real UI: add → folder → create → prompt", async () => {
+    const spy = boxed();
+    const user = userEvent.setup();
+    const page = mount('<button data-testid="workspace-tree-add">+</button>');
+    try {
+      startTour();
+      render(
+        <MemoryRouter initialEntries={["/workspace"]}>
+          <OnboardingTour />
+        </MemoryRouter>
+      );
+      expect(await screen.findByText("Create your first workspace")).toBeInTheDocument();
+      // The dialog opened: the tour moves on by itself.
+      const dialog = mount(
+        '<div data-tour="add-lane"><div data-tour="add-lane-folder"></div><button data-tour="add-lane-create"></button></div>'
+      );
+      expect(await screen.findByText("Choose the project folder")).toBeInTheDocument();
+      await user.click(screen.getByTestId("onboarding-tour-next"));
+      expect(screen.getByText("Create it")).toBeInTheDocument();
+      // Created: the dialog is gone and the workspace's prompt box is there.
+      dialog.remove();
+      page.innerHTML = '<div data-testid="workspace-home-composer"></div>';
+      expect(await screen.findByText("Start your first session")).toBeInTheDocument();
+      expect(localStorage.getItem("agenthub.tour")).toBe("prompt");
+      await user.click(screen.getByRole("button", { name: "Skip tour" }));
+      expect(screen.queryByTestId("onboarding-tour")).toBeNull();
+      expect(localStorage.getItem("agenthub.tour")).toBe("done");
+    } finally {
+      spy.mockRestore();
+      page.remove();
+    }
+  });
+
+  it("goes back to Add workspace when the dialog closes with nothing made", async () => {
+    const spy = boxed();
+    const page = mount('<button data-testid="workspace-tree-add">+</button>');
+    try {
+      localStorage.setItem("agenthub.tour", "create");
+      render(
+        <MemoryRouter initialEntries={["/workspace"]}>
+          <OnboardingTour />
+        </MemoryRouter>
+      );
+      expect(await screen.findByText("Create your first workspace")).toBeInTheDocument();
+    } finally {
+      spy.mockRestore();
+      page.remove();
+    }
+  });
+});

client/src/components/run/ChatAddMenu.tsx

@@ -0,0 +1,430 @@
+/**
+ * @file ChatAddMenu.tsx
+ * @description The Chat view's `+` menu, Claude Desktop's: Upload or add
+ * files (the prompt box's own picker), what is already there to attach —
+ * Project files (a search of the box's folder, folders too:
+ * `GET /api/run/files?dirs=1`, sent as `@path`), the workspace's Context
+ * files (`GET /api/lanes/:id/sources`) and Recent uploads (this browser's,
+ * `lib/promptAttach.ts`) —, Skills (the user's and the project's)
+ * and Plugins → one plugin → the skills and commands it ships. Picking one
+ * puts `/<name>` (`/<plugin>:<name>`) at the front of the message — the same
+ * text the `/` autocomplete inserts, so the CLI runs it as typed. Both lists
+ * are read when the menu first opens (`GET /api/cc-config/skills|plugins`),
+ * and Manage opens the Claude config page on that tab.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import {
+  ChevronRight,
+  FileText,
+  FolderOpen,
+  History,
+  Paperclip,
+  Plug,
+  Plus,
+  ScrollText,
+  Settings2,
+} from "lucide-react";
+import { api } from "../../lib/api";
+import { projectAttachment, recentUploads, type Attachment } from "../../lib/promptAttach";
+
+interface Entry {
+  name: string;
+  description?: string;
+}
+interface Lists {
+  skills: Entry[];
+  plugins: { name: string; items: Entry[] }[];
+}
+
+const byName = (a: Entry, b: Entry) => a.name.localeCompare(b.name);
+
+function loadLists(cwd: string): Promise<Lists> {
+  return Promise.all([
+    api.ccConfig.skills(undefined, cwd).catch(() => ({ items: [] })),
+    api.ccConfig.plugins().catch(() => ({ plugins: [] })),
+  ]).then(([sk, pl]) => ({
+    skills: sk.items
+      .map((s) => ({ name: s.name, description: s.frontmatter?.description }))
+      .filter((s, i, all) => all.findIndex((o) => o.name === s.name) === i)
+      .sort(byName),
+    plugins: pl.plugins
+      .filter((p) => p.enabled !== false && p.contributes)
+      .map((p) => ({
+        name: p.name,
+        items: [...p.contributes!.items.skills, ...p.contributes!.items.commands]
+          .map((it) => ({ name: it.name, description: it.description ?? undefined }))
+          .filter((it, i, all) => all.findIndex((o) => o.name === it.name) === i)
+          .sort(byName),
+      }))
+      .filter((p, i, all) => p.items.length > 0 && all.findIndex((o) => o.name === p.name) === i)
+      .sort(byName),
+  }));
+}
+
+const PANEL =
+  "absolute w-60 rounded-xl border border-border bg-surface-1 py-1 shadow-lg animate-fade-in";
+const ROW =
+  "flex w-full items-center gap-2.5 px-3 py-1.5 text-left text-sm text-fg-secondary hover:bg-surface-3 hover:text-fg-primary";
+
+function Row({
+  icon,
+  label,
+  more,
+  active,
+  onClick,
+  onHover,
+  title,
+  testId,
+}: {
+  icon: ReactNode;
+  label: string;
+  more?: boolean;
+  active?: boolean;
+  onClick: () => void;
+  onHover?: () => void;
+  title?: string;
+  testId?: string;
+}) {
+  return (
+    <button
+      type="button"
+      role="menuitem"
+      title={title}
+      data-testid={testId}
+      onClick={onClick}
+      onMouseEnter={onHover}
+      className={`${ROW} ${active ? "bg-surface-3 text-fg-primary" : ""}`}
+    >
+      <span className="shrink-0 text-fg-muted">{icon}</span>
+      <span className="min-w-0 flex-1 truncate">{label}</span>
+      {more && <ChevronRight className="h-3.5 w-3.5 shrink-0 text-fg-muted" />}
+    </button>
+  );
+}
+
+/** Project files: a search of the box's folder, shortest paths first. */
+function ProjectFiles({ cwd, onPick }: { cwd: string; onPick: (rel: string) => void }) {
+  const { t } = useTranslation("run");
+  const [q, setQ] = useState("");
+  const [items, setItems] = useState<string[] | null>(null);
+  useEffect(() => {
+    let live = true;
+    const tid = window.setTimeout(() => {
+      api.run
+        .files(cwd, q, true)
+        .then((r) => live && setItems(r.items))
+        .catch(() => live && setItems([]));
+    }, 120);
+    return () => {
+      live = false;
+      window.clearTimeout(tid);
+    };
+  }, [cwd, q]);
+  return (
+    <>
+      <input
+        autoFocus
+        value={q}
+        onChange={(e) => setQ(e.target.value)}
+        placeholder={t("chat.searchFiles")}
+        data-testid="chat-add-project-search"
+        className="mx-2 mb-1 w-[calc(100%-1rem)] rounded-md border border-border bg-surface-2 px-2 py-1 text-xs text-fg-primary placeholder:text-fg-muted focus:border-accent/50 focus:outline-none"
+      />
+      <div className="max-h-72 overflow-y-auto">
+        {!items || items.length === 0 ? (
+          <p className="px-3 py-1.5 text-xs text-fg-muted">{items ? t("chat.none") : "…"}</p>
+        ) : (
+          items.map((p) => (
+            <Row
+              key={p}
+              icon={
+                p.endsWith("/") ? (
+                  <FolderOpen className="h-4 w-4" />
+                ) : (
+                  <FileText className="h-4 w-4" />
+                )
+              }
+              label={p}
+              title={p}
+              testId={`chat-add-project-${p}`}
+              onClick={() => onPick(p)}
+            />
+          ))
+        )}
+      </div>
+    </>
+  );
+}
+
+type Sub = "project" | "context" | "recent" | "skills" | "plugins";
+
+export function ChatAddMenu({
+  cwd,
+  laneId = null,
+  skills,
+  onUpload,
+  onInsert,
+  onAttach,
+}: {
+  cwd: string;
+  /** The workspace, for its Context files; none hides them. */
+  laneId?: number | null;
+  /** Offer Skills and Plugins: Claude only, they are Claude Code's. */
+  skills: boolean;
+  onUpload: () => void;
+  /** `/<name>` picked. */
+  onInsert: (command: string) => void;
+  /** An existing file picked: a project path, a context file, an upload. */
+  onAttach: (items: Attachment[]) => void;
+}) {
+  const { t } = useTranslation("run");
+  const navigate = useNavigate();
+  const [open, setOpen] = useState(false);
+  const [sub, setSub] = useState<Sub | null>(null);
+  const [context, setContext] = useState<Attachment[] | null>(null);
+  const [recent, setRecent] = useState<Attachment[]>([]);
+  const [plugin, setPlugin] = useState<string | null>(null);
+  const [lists, setLists] = useState<Lists | null>(null);
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    if (skills && !lists) void loadLists(cwd).then(setLists);
+
+    const away = (e: MouseEvent) => {
+      if (!ref.current?.contains(e.target as Node)) setOpen(false);
+    };
+    const esc = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
+    document.addEventListener("mousedown", away);
+    document.addEventListener("keydown", esc);
+    return () => {
+      document.removeEventListener("mousedown", away);
+      document.removeEventListener("keydown", esc);
+    };
+  }, [open, skills, lists, cwd]);
+
+  // Read again at each opening: either list may have grown since.
+  useEffect(() => {
+    if (!open) return;
+    setRecent(recentUploads());
+    setContext(null);
+    if (laneId === null) return;
+    let live = true;
+    api.lanes
+      .sources(laneId)
+      .then(
+        (v) =>
+          live &&
+          setContext(
+            v.sources
+              .filter((s) => s.kind === "file" && !s.missing)
+              .map((s) => ({ path: `@${s.path}`, name: s.name }))
+          )
+      )
+      .catch(() => live && setContext([]));
+    return () => {
+      live = false;
+    };
+  }, [open, laneId]);
+
+  const close = () => {
+    setOpen(false);
+    setSub(null);
+    setPlugin(null);
+  };
+  const pick = (command: string) => {
+    close();
+    onInsert(command);
+  };
+  const attach = (item: Attachment) => {
+    close();
+    onAttach([item]);
+  };
+  const manage = (tab: "skills" | "plugins") => {
+    close();
+    navigate(`/cc-config?tab=${tab}`);
+  };
+
+  const entries = (items: Entry[], prefix: string, from?: string) =>
+    items.length === 0 ? (
+      <p className="px-3 py-1.5 text-xs text-fg-muted">{lists ? t("chat.none") : "…"}</p>
+    ) : (
+      items.map((it) => (
+        <Row
+          key={it.name}
+          icon={<ScrollText className="h-4 w-4" />}
+          label={it.name}
+          title={[it.description, from].filter(Boolean).join("\n") || undefined}
+          testId={`chat-add-skill-${prefix}${it.name}`}
+          onClick={() => pick(`/${prefix}${it.name}`)}
+        />
+      ))
+    );
+  const shownPlugin = lists?.plugins.find((p) => p.name === plugin);
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        type="button"
+        data-testid="chat-add"
+        aria-label={t("chat.add")}
+        title={t("chat.add")}
+        aria-expanded={open}
+        onClick={() => (open ? close() : setOpen(true))}
+        className="flex h-8 w-8 items-center justify-center rounded-full text-fg-muted transition-colors hover:bg-surface-3 hover:text-fg-primary"
+      >
+        <Plus className="h-4 w-4" />
+      </button>
+      {open && (
+        <div role="menu" data-testid="chat-add-menu" className={`${PANEL} bottom-full left-0 mb-2`}>
+          <Row
+            icon={<Paperclip className="h-4 w-4" />}
+            label={t("chat.upload")}
+            testId="chat-add-upload"
+            onHover={() => setSub(null)}
+            onClick={() => {
+              close();
+              onUpload();
+            }}
+          />
+          <Row
+            icon={<FolderOpen className="h-4 w-4" />}
+            label={t("chat.projectFiles")}
+            more
+            active={sub === "project"}
+            testId="chat-add-project"
+            onHover={() => setSub("project")}
+            onClick={() => setSub(sub === "project" ? null : "project")}
+          />
+          {laneId !== null && (
+            <Row
+              icon={<FileText className="h-4 w-4" />}
+              label={t("chat.contextFiles")}
+              more
+              active={sub === "context"}
+              testId="chat-add-context"
+              onHover={() => setSub("context")}
+              onClick={() => setSub(sub === "context" ? null : "context")}
+            />
+          )}
+          <Row
+            icon={<History className="h-4 w-4" />}
+            label={t("chat.recentUploads")}
+            more
+            active={sub === "recent"}
+            testId="chat-add-recent"
+            onHover={() => setSub("recent")}
+            onClick={() => setSub(sub === "recent" ? null : "recent")}
+          />
+          {skills && (
+            <>
+              <Row
+                icon={<ScrollText className="h-4 w-4" />}
+                label={t("chat.skills")}
+                more
+                active={sub === "skills"}
+                testId="chat-add-skills"
+                onHover={() => setSub("skills")}
+                onClick={() => setSub(sub === "skills" ? null : "skills")}
+              />
+              <Row
+                icon={<Plug className="h-4 w-4" />}
+                label={t("chat.plugins")}
+                more
+                active={sub === "plugins"}
+                testId="chat-add-plugins"
+                onHover={() => setSub("plugins")}
+                onClick={() => setSub(sub === "plugins" ? null : "plugins")}
+              />
+            </>
+          )}
+
+          {sub === "project" && (
+            <div role="menu" className={`${PANEL} bottom-0 left-full ml-1 w-72 pt-2`}>
+              <ProjectFiles cwd={cwd} onPick={(rel) => attach(projectAttachment(rel))} />
+            </div>
+          )}
+
+          {(sub === "context" || sub === "recent") && (
+            <div role="menu" className={`${PANEL} bottom-0 left-full ml-1`}>
+              <div className="max-h-72 overflow-y-auto">
+                {(sub === "context" ? context : recent)?.length ? (
+                  (sub === "context" ? context! : recent).map((it) => (
+                    <Row
+                      key={it.path}
+                      icon={<FileText className="h-4 w-4" />}
+                      label={it.name}
+                      title={it.path.replace(/^@/, "")}
+                      testId={`chat-add-${sub}-${it.name}`}
+                      onClick={() => attach(it)}
+                    />
+                  ))
+                ) : (
+                  <p className="px-3 py-1.5 text-xs text-fg-muted">
+                    {sub === "context" && !context ? "…" : t("chat.none")}
+                  </p>
+                )}
+              </div>
+            </div>
+          )}
+
+          {sub === "skills" && (
+            <div role="menu" className={`${PANEL} bottom-0 left-full ml-1`}>
+              <div className="max-h-72 overflow-y-auto">{entries(lists?.skills ?? [], "")}</div>
+              <div className="my-1 border-t border-border" />
+              <Row
+                icon={<Settings2 className="h-4 w-4" />}
+                label={t("chat.manageSkills")}
+                onClick={() => manage("skills")}
+              />
+            </div>
+          )}
+
+          {sub === "plugins" && (
+            <div role="menu" className={`${PANEL} bottom-0 left-full ml-1`}>
+              <div className="max-h-72 overflow-y-auto">
+                {lists && lists.plugins.length === 0 && (
+                  <p className="px-3 py-1.5 text-xs text-fg-muted">{t("chat.none")}</p>
+                )}
+                {!lists && <p className="px-3 py-1.5 text-xs text-fg-muted">…</p>}
+                {lists?.plugins.map((p) => (
+                  <Row
+                    key={p.name}
+                    icon={<Plug className="h-4 w-4" />}
+                    label={p.name}
+                    more
+                    active={plugin === p.name}
+                    testId={`chat-add-plugin-${p.name}`}
+                    onHover={() => setPlugin(p.name)}
+                    onClick={() => setPlugin(plugin === p.name ? null : p.name)}
+                  />
+                ))}
+              </div>
+              <div className="my-1 border-t border-border" />
+              <Row
+                icon={<Settings2 className="h-4 w-4" />}
+                label={t("chat.managePlugins")}
+                onClick={() => manage("plugins")}
+              />
+              {shownPlugin && (
+                <div role="menu" className={`${PANEL} bottom-0 left-full ml-1`}>
+                  <div className="max-h-72 overflow-y-auto">
+                    {entries(
+                      shownPlugin.items,
+                      `${shownPlugin.name}:`,
+                      t("chat.fromPlugin", { name: shownPlugin.name })
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

client/src/components/run/ChatFilePreview.tsx

@@ -0,0 +1,361 @@
+/**
+ * @file ChatFilePreview.tsx
+ * @description A file a Chat pane's session touched, shown the way Claude
+ * Desktop shows one: `FilePreview` (name · EXT, Copy path, Close, then the
+ * content) and `FileListModal` (a list on the left, the picked file's preview
+ * on the right — Claude's Uploads dialog). Content comes only through routes
+ * that already guard it: a file inside the workspace through
+ * `GET /api/lanes/:id/git/file` (or `/git/raw` for an image), a file under
+ * `~/.claude` (a memory file, a plugin's skill) through `GET /api/cc-config/file`,
+ * an attached image or text file through `GET /api/run/drop/:name`, an image
+ * the session read anywhere else through `GET /api/sessions/:id/image`. Anything
+ * else (or an image that route refuses) shows its path only. A Windows path's `\` counts as `/` throughout.
+ * `SkillListModal` is the same dialog over the session's skills, each one's
+ * SKILL.md found by name (`plugin:name` from the plugin list, else the user's
+ * or the project's); a built-in skill has no file and shows by name only.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useRef, useState, type DragEvent } from "react";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import { Copy, FileText, Loader2, X } from "lucide-react";
+import { api, gitTarget } from "../../lib/api";
+import { copyText } from "../../lib/clipboard";
+import { useDialog } from "../../hooks/useDialog";
+import { dragSkill } from "../../lib/promptAttach";
+import { MarkdownPreview, isMarkdown } from "../MarkdownPreview";
+
+/** Where a Chat pane's files can be read from. */
+export interface PreviewScope {
+  laneId: number | null;
+  /** The workspace's own folder. */
+  laneCwd: string;
+  /** The pane's folder — the workspace's, or the session's own worktree. */
+  cwd: string;
+  sessionId: string;
+}
+
+const IMAGE_RE = /\.(png|jpe?g|gif|webp)$/i;
+// An attached file the drop route serves as text (`DROP_TEXT_TYPES` in server/routes/run.js).
+const DROP_TEXT_RE = /\.(txt|md|markdown|csv|tsv|log|json|xml|ya?ml)$/i;
+// The drop dir (`<data dir>/drops/`), or the older `<tmp>/agenthub-drops-<uid>/`.
+const DROP_RE =
+  /[\\/](?:agenthub-drops-\d+|drops)[\\/]([0-9a-f]{16}(?:-[A-Za-z0-9._-]+)?\.[A-Za-z0-9]+)$/;
+/** A dropped text file shown at most this long. */
+const DROP_TEXT_MAX = 200_000;
+
+/** `C:\a\b` → `C:/a/b`: a Windows path matched like a POSIX one. */
+const slashed = (p: string) => p.replace(/\\/g, "/");
+export const baseName = (p: string) => p.split(/[\\/]/).pop() || p;
+/** `report.v2.xlsx` → `XLSX`; none → "". */
+export const extOf = (p: string) => {
+  const m = /\.([A-Za-z0-9]+)$/.exec(baseName(p));
+  return m ? m[1]!.toUpperCase() : "";
+};
+/** An attached file's name without the drop dir's random prefix. */
+export const displayName = (p: string) =>
+  DROP_RE.test(p) ? baseName(p).replace(/^[0-9a-f]{16}-?/, "") || baseName(p) : baseName(p);
+
+type Content =
+  | { kind: "loading" }
+  | { kind: "image"; src: string }
+  | { kind: "text"; text: string; truncated: boolean }
+  | { kind: "none" };
+
+function useContent(path: string, scope: PreviewScope): Content {
+  const [content, setContent] = useState<Content>({ kind: "loading" });
+  useEffect(() => {
+    let live = true;
+    const show = (p: Promise<Content>) => {
+      setContent({ kind: "loading" });
+      p.then((c) => live && setContent(c)).catch(() => live && setContent({ kind: "none" }));
+    };
+    const drop = DROP_RE.exec(path);
+    if (drop) {
+      const src = `/api/run/drop/${encodeURIComponent(drop[1]!)}`;
+      if (IMAGE_RE.test(path)) setContent({ kind: "image", src });
+      else if (DROP_TEXT_RE.test(path))
+        show(
+          fetch(src).then(async (r) => {
+            if (!r.ok) throw new Error(String(r.status));
+            const text = await r.text();
+            return {
+              kind: "text",
+              text: text.slice(0, DROP_TEXT_MAX),
+              truncated: text.length > DROP_TEXT_MAX,
+            };
+          })
+        );
+      else setContent({ kind: "none" });
+      return () => {
+        live = false;
+      };
+    }
+    const file = slashed(path);
+    const base = slashed(scope.cwd).replace(/\/+$/, "");
+    if (scope.laneId === null || !base || !file.startsWith(`${base}/`)) {
+      // Claude Code's own files (memory, a skill): the config pages' guarded read.
+      if (/\/\.claude\//.test(file) && !IMAGE_RE.test(file)) {
+        show(
+          api.ccConfig
+            .file(path)
+            .then((f) => ({ kind: "text", text: f.text, truncated: !!f.truncated }))
+        );
+      } else if (IMAGE_RE.test(file) && scope.sessionId) {
+        // An image it read elsewhere (a screenshot under ~/.cache): served
+        // only because this session's own Read named it.
+        setContent({ kind: "image", src: api.sessions.readImageUrl(scope.sessionId, path) });
+      } else setContent({ kind: "none" });
+      return () => {
+        live = false;
+      };
+    }
+    const rel = file.slice(base.length + 1);
+    const target =
+      base === slashed(scope.laneCwd).replace(/\/+$/, "")
+        ? scope.laneId
+        : gitTarget(scope.laneId, scope.sessionId);
+    if (IMAGE_RE.test(path)) {
+      setContent({ kind: "image", src: api.lanes.gitRawUrl(target, rel) });
+      return;
+    }
+    show(
+      api.lanes
+        .gitFile(target, rel)
+        .then((f) =>
+          f.available && !f.binary
+            ? { kind: "text", text: f.lines.join("\n"), truncated: f.truncated }
+            : { kind: "none" }
+        )
+    );
+    return () => {
+      live = false;
+    };
+  }, [path, scope.cwd, scope.laneCwd, scope.laneId, scope.sessionId]);
+  return content;
+}
+
+function Body({ path, scope }: { path: string; scope: PreviewScope }) {
+  const { t } = useTranslation("run");
+  const loaded = useContent(path, scope);
+  // An image the route refused (gone, server mode) shows like no preview.
+  const [broken, setBroken] = useState<string | null>(null);
+  const content: Content =
+    loaded.kind === "image" && loaded.src === broken ? { kind: "none" } : loaded;
+  if (content.kind === "loading") {
+    return (
+      <div className="flex flex-1 items-center justify-center">
+        <Loader2 className="h-5 w-5 animate-spin text-fg-muted" />
+      </div>
+    );
+  }
+  if (content.kind === "image") {
+    return (
+      <div className="flex flex-1 items-center justify-center overflow-auto p-4">
+        <img
+          src={content.src}
+          alt={baseName(path)}
+          onError={() => setBroken(content.src)}
+          className="max-h-full max-w-full object-contain"
+        />
+      </div>
+    );
+  }
+  if (content.kind === "none") {
+    return (
+      <div className="flex flex-1 flex-col items-center justify-center gap-2 p-6 text-center text-sm text-fg-muted">
+        <FileText className="h-8 w-8" />
+        <p>{t("chat.outline.noPreview")}</p>
+        <p className="break-all font-mono text-xs">{path}</p>
+      </div>
+    );
+  }
+  return (
+    <div className="min-h-0 flex-1 overflow-auto">
+      {isMarkdown(path) ? (
+        <MarkdownPreview text={content.text} className="p-4" />
+      ) : (
+        <pre className="p-4 font-mono text-xs leading-relaxed text-fg-secondary">
+          {content.text}
+        </pre>
+      )}
+      {content.truncated && (
+        <p className="px-4 pb-4 text-xs text-fg-muted">{t("chat.outline.truncated")}</p>
+      )}
+    </div>
+  );
+}
+
+/** One file: header (name · EXT, Copy path, Close) over its content. */
+export function FilePreview({
+  path,
+  scope,
+  onClose,
+  className = "",
+}: {
+  path: string;
+  scope: PreviewScope;
+  onClose: () => void;
+  className?: string;
+}) {
+  const { t } = useTranslation("run");
+  return (
+    <section
+      data-testid="chat-file-preview"
+      className={`flex min-h-0 min-w-0 flex-col overflow-hidden bg-surface-1 ${className}`}
+    >
+      <header className="flex items-center gap-2 border-b border-border px-4 py-2.5">
+        <span className="min-w-0 truncate text-sm text-fg-primary" title={path}>
+          {displayName(path).replace(/\.[A-Za-z0-9]+$/, "")}
+        </span>
+        <span className="text-xs text-fg-muted">{extOf(path)}</span>
+        <div className="ml-auto flex items-center gap-1">
+          <button
+            type="button"
+            onClick={() => void copyText(path)}
+            title={t("chat.outline.copyPath", { path })}
+            aria-label={t("chat.outline.copyPath", { path })}
+            className="flex h-7 w-7 items-center justify-center rounded text-fg-muted hover:bg-surface-3 hover:text-fg-primary"
+          >
+            <Copy className="h-3.5 w-3.5" />
+          </button>
+          <button
+            type="button"
+            onClick={onClose}
+            title={t("chat.outline.close")}
+            aria-label={t("chat.outline.close")}
+            className="flex h-7 w-7 items-center justify-center rounded text-fg-muted hover:bg-surface-3 hover:text-fg-primary"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+      </header>
+      <Body path={path} scope={scope} />
+    </section>
+  );
+}
+
+/** Claude's Uploads dialog: the files on the left, the picked one on the right. */
+export function FileListModal({
+  title,
+  paths,
+  label = displayName,
+  scope,
+  onClose,
+  onDragItem,
+}: {
+  title: string;
+  paths: string[];
+  /** A row's text; the file name by default. */
+  label?: (path: string) => string;
+  scope: PreviewScope;
+  onClose: () => void;
+  /** Rows drag into the prompt box; the dialog then closes, out of the way. */
+  onDragItem?: (e: DragEvent, path: string) => void;
+}) {
+  const [picked, setPicked] = useState(paths[0] ?? "");
+  const panelRef = useRef<HTMLDivElement>(null);
+  useDialog(true, panelRef, onClose);
+  // Into document.body, like ImageLightbox: a pane's own stacking layer
+  // would otherwise draw over a `fixed` overlay opened from inside it.
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[200] flex items-center justify-center bg-surface-0/70 p-6"
+      onClick={onClose}
+    >
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label={title}
+        data-testid="chat-file-modal"
+        onClick={(e) => e.stopPropagation()}
+        className="flex h-[80vh] w-full max-w-6xl overflow-hidden rounded-xl border border-border bg-surface-1 shadow-2xl"
+      >
+        <div className="flex w-80 flex-shrink-0 flex-col border-r border-border">
+          <h2 className="px-5 pb-3 pt-5 text-lg text-fg-primary">{title}</h2>
+          <ul className="min-h-0 flex-1 space-y-0.5 overflow-y-auto px-2 pb-3">
+            {paths.map((p) => (
+              <li key={p}>
+                <button
+                  type="button"
+                  onClick={() => setPicked(p)}
+                  draggable={!!onDragItem}
+                  onDragStart={(e) => {
+                    onDragItem?.(e, p);
+                    // Not in dragstart itself: removing the source there cancels the drag.
+                    if (onDragItem) window.setTimeout(onClose, 0);
+                  }}
+                  title={p}
+                  aria-current={p === picked}
+                  className={`flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm ${p === picked ? "bg-surface-3 text-fg-primary" : "text-fg-secondary hover:bg-surface-2"}`}
+                >
+                  <FileText className="h-4 w-4 flex-shrink-0 text-fg-muted" />
+                  <span className="min-w-0 truncate">{label(p)}</span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+        {picked && <FilePreview path={picked} scope={scope} onClose={onClose} className="flex-1" />}
+      </div>
+    </div>,
+    document.body
+  );
+}
+
+/** The session's skills in the list dialog, each one's SKILL.md previewed. */
+export function SkillListModal({
+  title,
+  names,
+  scope,
+  onClose,
+  draggable = false,
+}: {
+  title: string;
+  names: string[];
+  scope: PreviewScope;
+  onClose: () => void;
+  /** Rows drag into the prompt box as `/name`. */
+  draggable?: boolean;
+}) {
+  const [files, setFiles] = useState<Map<string, string> | null>(null);
+  useEffect(() => {
+    let live = true;
+    void Promise.all([
+      api.ccConfig.skills(undefined, scope.cwd).catch(() => ({ items: [] })),
+      api.ccConfig.plugins().catch(() => ({ plugins: [] })),
+    ]).then(([sk, pl]) => {
+      const found = new Map<string, string>();
+      const add = (name: string, file: string | undefined) => {
+        if (file && !found.has(name)) found.set(name, file);
+      };
+      for (const p of pl.plugins) {
+        const items = p.contributes?.items;
+        for (const it of [...(items?.skills ?? []), ...(items?.commands ?? [])])
+          add(`${p.name}:${it.name}`, it.file);
+      }
+      // A personal skill wins over a project one of the same name, as in Claude Code.
+      for (const s of sk.items) if (s.scope === "user") add(s.name, s.file);
+      for (const s of sk.items) add(s.name, s.file);
+      if (live) setFiles(found);
+    });
+    return () => {
+      live = false;
+    };
+  }, [scope.cwd]);
+  if (!files) return null;
+  // A built-in skill has no file: its name stands in and previews as nothing.
+  const byPath = new Map(names.map((n) => [files.get(n) ?? n, n]));
+  return (
+    <FileListModal
+      title={title}
+      paths={[...byPath.keys()]}
+      label={(p) => byPath.get(p) ?? displayName(p)}
+      scope={scope}
+      onClose={onClose}
+      onDragItem={draggable ? (e, p) => dragSkill(e, byPath.get(p) ?? p) : undefined}
+    />
+  );
+}

client/src/components/run/ChatOutline.tsx

@@ -0,0 +1,339 @@
+/**
+ * @file ChatOutline.tsx
+ * @description The right-hand panel of a Chat pane, laid out like
+ * Claude Desktop's activity panel: the session's Progress (its
+ * TaskCreate/TaskUpdate or TodoWrite plan, only when it has one), the Outputs
+ * it wrote or edited (name + EXT tag; a click previews the file), and "Used in
+ * this session" — the files attached to its prompts, the files it read and the
+ * memory files it used and its skills (a click opens the list with a
+ * preview — a skill's SKILL.md), and its MCP servers (a click opens the
+ * Claude config page). Every row but MCP drags into the prompt box: a file
+ * as an attachment, a group as all of its files, a lone skill as `/name`.
+ * Read from
+ * `GET /api/sessions/:id/outline` by `useSessionOutline`, which the pane also
+ * uses for the collapsed button's count.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState, type ComponentType, type DragEvent, type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import {
+  BookOpen,
+  Check,
+  ChevronDown,
+  FileCode,
+  FileImage,
+  FileSearch,
+  FileSpreadsheet,
+  FileText,
+  History,
+  Paperclip,
+  Plug,
+  X,
+} from "lucide-react";
+import { api, type SessionOutline } from "../../lib/api";
+import { displayName, extOf } from "./ChatFilePreview";
+import { dragAttachments, dragSkill, type Attachment } from "../../lib/promptAttach";
+
+const POLL_MS = 5000;
+const EMPTY: SessionOutline = {
+  progress: [],
+  outputs: [],
+  files: [],
+  uploads: [],
+  memory: [],
+  skills: [],
+  mcp: [],
+};
+
+/** The session's outline, re-read on a visibility-gated poll. */
+export function useSessionOutline(sessionId: string): SessionOutline {
+  const [outline, setOutline] = useState<SessionOutline>(EMPTY);
+  useEffect(() => {
+    let live = true;
+    const load = () =>
+      api.sessions
+        .outline(sessionId)
+        .then((o) => live && setOutline({ ...EMPTY, ...o }))
+        .catch(() => {});
+    void load();
+    const timer = window.setInterval(() => {
+      if (document.visibilityState === "visible") void load();
+    }, POLL_MS);
+    return () => {
+      live = false;
+      window.clearInterval(timer);
+    };
+  }, [sessionId]);
+  return outline;
+}
+
+export type OutlineList = "uploads" | "files" | "memory" | "skills";
+
+/** A listed file as a prompt attachment: an upload by its bare path, as the
+ *  composer attaches one; anything else as an `@` mention. */
+export function outlineAttachment(path: string, upload = false): Attachment {
+  return { path: upload ? path : `@${path}`, name: displayName(path) };
+}
+
+const dragFiles =
+  (paths: string[], upload = false) =>
+  (e: DragEvent) =>
+    dragAttachments(
+      e,
+      paths.map((p) => outlineAttachment(p, upload))
+    );
+
+function fileIcon(path: string) {
+  const ext = extOf(path).toLowerCase();
+  if (["xlsx", "xls", "csv", "tsv"].includes(ext)) return FileSpreadsheet;
+  if (["png", "jpg", "jpeg", "gif", "webp", "svg"].includes(ext)) return FileImage;
+  if (
+    /^(c|cc|cpp|cs|css|go|h|html|java|js|jsx|json|kt|mjs|cjs|php|py|rb|rs|sh|sql|swift|ts|tsx|vue|ya?ml|toml)$/.test(
+      ext
+    )
+  )
+    return FileCode;
+  return FileText;
+}
+
+function Section({
+  title,
+  count,
+  action,
+  grow,
+  children,
+}: {
+  title: string;
+  count?: number;
+  action?: ReactNode;
+  /** Takes the panel's free height and scrolls inside it. */
+  grow?: boolean;
+  children: ReactNode;
+}) {
+  const [open, setOpen] = useState(true);
+  return (
+    <section className={`flex flex-col px-3 pt-3 ${grow && open ? "min-h-0 flex-1" : ""}`}>
+      <div className="flex items-center gap-1.5 px-1 pb-1">
+        <button
+          type="button"
+          onClick={() => setOpen((o) => !o)}
+          aria-expanded={open}
+          className="flex items-center gap-1.5 text-sm font-medium text-fg-primary"
+        >
+          {title}
+          {count ? <span className="text-xs font-normal text-fg-muted">{count}</span> : null}
+          <ChevronDown
+            className={`h-3.5 w-3.5 text-fg-muted transition-transform ${open ? "" : "-rotate-90"}`}
+          />
+        </button>
+        <div className="ml-auto flex items-center">{action}</div>
+      </div>
+      {open && (
+        <div
+          className={
+            grow
+              ? "min-h-0 flex-1 overflow-y-auto [mask-image:linear-gradient(to_bottom,transparent,black_8px,black_calc(100%-8px),transparent)]"
+              : ""
+          }
+        >
+          {children}
+        </div>
+      )}
+    </section>
+  );
+}
+
+const rowClass =
+  "flex w-full items-center gap-2 rounded-md px-1.5 py-1.5 text-left text-[13px] text-fg-secondary enabled:hover:bg-surface-3";
+
+/** A "Used in this session" row: icon, label, the first names, +N. */
+function UsedRow({
+  icon: Icon,
+  label,
+  names,
+  onClick,
+  onDragStart,
+  to,
+}: {
+  icon: ComponentType<{ className?: string }>;
+  label: string;
+  names: string[];
+  onClick?: () => void;
+  /** The row drags into the prompt box. */
+  onDragStart?: (e: DragEvent) => void;
+  to?: string;
+}) {
+  const shown = names.slice(0, 2).join(", ");
+  const inner = (
+    <>
+      <Icon className="h-4 w-4 flex-shrink-0 text-fg-muted" />
+      <span className="flex-shrink-0 text-fg-primary">{label}</span>
+      <span className="min-w-0 flex-1 truncate text-xs text-fg-muted">{shown}</span>
+      {names.length > 2 && (
+        <span className="flex-shrink-0 text-xs text-fg-muted">+{names.length - 2}</span>
+      )}
+    </>
+  );
+  const title = `${label}: ${names.join(", ")}`;
+  return to ? (
+    <Link to={to} title={title} className={`${rowClass} hover:bg-surface-3`}>
+      {inner}
+    </Link>
+  ) : (
+    <button
+      type="button"
+      title={title}
+      onClick={onClick}
+      draggable={!!onDragStart}
+      onDragStart={onDragStart}
+      className={rowClass}
+    >
+      {inner}
+    </button>
+  );
+}
+
+const stem = (p: string) => displayName(p).replace(/\.[A-Za-z0-9]+$/, "");
+
+export function ChatOutline({
+  outline: o,
+  onClose,
+  onOpenFile,
+  onOpenList,
+}: {
+  outline: SessionOutline;
+  onClose: () => void;
+  onOpenFile: (path: string) => void;
+  onOpenList: (list: OutlineList) => void;
+}) {
+  const { t } = useTranslation("run");
+  const used = o.uploads.length + o.files.length + o.memory.length + o.skills.length + o.mcp.length;
+  const close = (
+    <button
+      type="button"
+      onClick={onClose}
+      title={t("chat.outline.hide")}
+      aria-label={t("chat.outline.hide")}
+      className="flex h-6 w-6 items-center justify-center rounded text-fg-muted hover:bg-surface-3 hover:text-fg-primary"
+    >
+      <X className="h-4 w-4" />
+    </button>
+  );
+
+  return (
+    <aside
+      data-testid="chat-outline"
+      aria-label={t("chat.outline.panel")}
+      // Over the chat in a narrow pane (the container is PaneChat's root),
+      // beside it once the pane has room, as wide as PaneChat's splitter says.
+      className="absolute inset-y-3 right-3 z-30 flex w-[clamp(15rem,34%,20rem)] max-w-[calc(100%-1.5rem)] flex-shrink-0 flex-col overflow-hidden rounded-xl border border-border bg-surface-1 pb-2 shadow-xl [@container(min-width:40rem)]:static [@container(min-width:40rem)]:m-3 [@container(min-width:40rem)]:ml-0 [@container(min-width:40rem)]:w-[calc(var(--chat-side)-0.75rem)] [@container(min-width:40rem)]:max-w-none [@container(min-width:40rem)]:shadow-none"
+    >
+      {o.progress.length > 0 && (
+        <Section title={t("chat.outline.progress")} action={close}>
+          {o.progress.map((task) => {
+            const done = task.status === "completed";
+            return (
+              <div key={task.id} className={rowClass} title={task.subject}>
+                {done ? (
+                  <span className="flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full bg-accent-solid text-white">
+                    <Check className="h-3 w-3" />
+                  </span>
+                ) : (
+                  <span
+                    className={`h-4 w-4 flex-shrink-0 rounded-full border-2 ${task.status === "in_progress" ? "animate-pulse border-accent" : "border-border"}`}
+                  />
+                )}
+                <span
+                  className={`min-w-0 flex-1 truncate ${done ? "text-fg-muted line-through" : task.status === "in_progress" ? "text-fg-primary" : ""}`}
+                >
+                  {task.subject}
+                </span>
+              </div>
+            );
+          })}
+        </Section>
+      )}
+      <Section
+        title={t("chat.outline.outputs")}
+        count={o.outputs.length}
+        action={o.progress.length ? undefined : close}
+        grow
+      >
+        {o.outputs.length ? (
+          o.outputs.map((p) => {
+            const Icon = fileIcon(p);
+            return (
+              <button
+                key={p}
+                type="button"
+                title={p}
+                aria-label={`${extOf(p)}: ${stem(p)}`}
+                onClick={() => onOpenFile(p)}
+                draggable
+                onDragStart={dragFiles([p])}
+                className={rowClass}
+              >
+                <Icon className="h-4 w-4 flex-shrink-0 text-fg-muted" />
+                <span className="min-w-0 flex-1 truncate">{stem(p)}</span>
+                <span className="flex-shrink-0 text-[11px] text-fg-muted">{extOf(p)}</span>
+              </button>
+            );
+          })
+        ) : (
+          <p className="px-1.5 py-1 text-xs text-fg-muted">{t("chat.outline.empty")}</p>
+        )}
+      </Section>
+      {used > 0 && (
+        <Section title={t("chat.outline.used")}>
+          {o.uploads.length > 0 && (
+            <UsedRow
+              icon={Paperclip}
+              label={t("chat.outline.uploads")}
+              names={o.uploads.map(displayName)}
+              onClick={() => onOpenList("uploads")}
+              onDragStart={dragFiles(o.uploads, true)}
+            />
+          )}
+          {o.files.length > 0 && (
+            <UsedRow
+              icon={FileSearch}
+              label={t("chat.outline.files")}
+              names={o.files.map(displayName)}
+              onClick={() => onOpenList("files")}
+              onDragStart={dragFiles(o.files)}
+            />
+          )}
+          {o.memory.length > 0 && (
+            <UsedRow
+              icon={History}
+              label={t("chat.outline.memory")}
+              names={o.memory.map(stem)}
+              onClick={() => onOpenList("memory")}
+              onDragStart={dragFiles(o.memory)}
+            />
+          )}
+          {o.skills.length > 0 && (
+            <UsedRow
+              icon={BookOpen}
+              label={t("chat.skills")}
+              names={o.skills}
+              onClick={() => onOpenList("skills")}
+              // One command per prompt: several are dragged one by one from the list.
+              onDragStart={o.skills.length === 1 ? (e) => dragSkill(e, o.skills[0]!) : undefined}
+            />
+          )}
+          {o.mcp.length > 0 && (
+            <UsedRow
+              icon={Plug}
+              label={t("chat.outline.connectors")}
+              names={o.mcp}
+              to="/settings/agents/claude-code?tab=mcp"
+            />
+          )}
+        </Section>
+      )}
+    </aside>
+  );
+}

client/src/components/run/ConsoleTabs.tsx

@@ -26,7 +26,9 @@
  * of another tab, a tab (or a pane header) joins that tab instead
  * (`joinGroup`: side by side, then under the right pane, then under the left
  * one, up to four panes). A right-click on a tab
- * opens the same actions as a menu (`ContextMenu`).
+ * opens the same actions as a menu (`ContextMenu`). With tabs from every
+ * workspace on, `tabs` spans every workspace (each run's `slot` a `paneKey`)
+ * and `workspaceOf` names each tab's workspace before its own name.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -62,6 +64,7 @@ import {
   joinGroup,
   leaves,
   reorderGroups,
+  slotOfKey,
 } from "../../lib/paneLayout";
 import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../ContextMenu";
 
@@ -77,7 +80,7 @@ export function runName(
 ): string {
   if (r.tool === "shell") return terminal;
   const prompt = r.promptPreview?.trim().split("\n")[0];
-  return session?.name || prompt || `${toolLabel} #${(r.slot ?? 0) + 1}`;
+  return session?.name || prompt || `${toolLabel} #${slotOfKey(r.slot ?? 0) + 1}`;
 }
 
 export type RunState = "awaiting" | "error" | "running";
@@ -160,10 +163,13 @@ export function ConsoleTabs({
   actions,
   sessions,
   onRenamed,
+  workspaceOf,
 }: {
   lane: Lane;
   /** The workspace's live runs, in slot order. */
   tabs: RunHandle[];
+  /** Tabs from every workspace: the name of the workspace a run belongs to. */
+  workspaceOf?: (r: RunHandle) => string;
   /** The tabs: groups of panes, the active one on screen. */
   groups: PaneGroups;
   /** Reorders the tabs or takes a pane out into a tab of its own. */
@@ -325,7 +331,10 @@ export function ConsoleTabs({
   const sessionOf = (r: RunHandle) => (r.sessionId ? sessions?.get(r.sessionId) : undefined);
   const toolLabel = (r: RunHandle) =>
     r.tool === "shell" ? t("tabs.terminal") : aiTools.label(r.tool);
-  const label = (r: RunHandle) => runName(r, sessionOf(r), toolLabel(r), t("tabs.terminal"));
+  const label = (r: RunHandle) => {
+    const name = runName(r, sessionOf(r), toolLabel(r), t("tabs.terminal"));
+    return workspaceOf ? `${workspaceOf(r)} · ${name}` : name;
+  };
   const tabLabel = (tab: Tab) => tab.runs.map(label).join(" | ");
   // A combo's dot is its most urgent AI pane's; a shell has none.
   const tabState = (tab: Tab): RunState | null => {

client/src/components/run/LaneConsolePane.tsx

@@ -14,8 +14,9 @@
  * tab) attaches to that tmux session only; nothing is started or resumed.
  * A Claude or Codex pane also has a Chat view (`PaneChat`): the session's
  * conversation laid OVER the terminal, which stays mounted and attached under
- * it. Chat or terminal is the viewer's own Chat UI setting (Settings →
- * Appearance, `lib/chatUi.ts`, per account) — one choice for every pane.
+ * it. Chat or terminal is each SESSION's own (`useSessionChat`, the toggle
+ * left of the pane's split buttons); the Chat UI setting (Settings →
+ * Appearance, `lib/chatUi.ts`) is only what a session shows first.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -28,7 +29,7 @@ import type { Lane } from "../../lib/types";
 import { useAiTools } from "../../hooks/useAiTools";
 import { TerminalView } from "./TerminalView";
 import { PaneChat } from "./PaneChat";
-import { useChatUi } from "../../lib/chatUi";
+import { useSessionChat } from "../../lib/chatUi";
 
 const CHAT_TOOLS = new Set(["claude", "codex"]);
 
@@ -50,6 +51,9 @@ export interface LaneConsolePaneProps {
   onRunExit?: () => void;
   /** The terminal takes the keyboard when it appears (default). */
   autoFocus?: boolean;
+  /** The pane spans the grid's full width or height: its Chat view's right
+   *  panel starts open (collapsed in a quarter-sized pane). */
+  panelOpen?: boolean;
 }
 
 /** The tmux session a lane's tab owns (see server/lib/pty-run.js). */
@@ -68,6 +72,7 @@ export function LaneConsolePane({
   onNewSession,
   onRunExit,
   autoFocus,
+  panelOpen = false,
 }: LaneConsolePaneProps) {
   const { t } = useTranslation("run");
   const [handle, setHandle] = useState<RunHandle | null>(null);
@@ -78,11 +83,11 @@ export function LaneConsolePane({
   // The tool of the run on screen — a session's own, which need not be the
   // workspace's; the workspace's with no run.
   const paneTool = handle?.tool ?? currentLane?.tool ?? "claude";
-  const chat = useChatUi();
   // A run learns its session id after it starts (Codex): the page's poll has it.
   const chatSession = handle
     ? (activeRuns?.items.find((r) => r.id === handle.id)?.sessionId ?? handle.sessionId)
     : null;
+  const chat = useSessionChat(chatSession);
   const chatable = !!handle && !!chatSession && CHAT_TOOLS.has(handle.tool);
 
   useEffect(() => {
@@ -192,10 +197,12 @@ export function LaneConsolePane({
           {chatable && chat && (
             <div className="absolute inset-0 z-20 flex flex-col bg-surface-0">
               <PaneChat
-                runId={handle.id}
+                run={handle}
                 sessionId={chatSession}
-                tool={handle.tool}
                 cwd={handle.cwd || currentLane?.cwd || ""}
+                laneId={laneId}
+                laneCwd={currentLane?.cwd || ""}
+                panelOpen={panelOpen}
               />
             </div>
           )}

client/src/components/run/PaneChat.tsx

@@ -5,83 +5,372 @@
  * above a prompt box. It lies OVER the pane's terminal, which stays mounted and
  * attached underneath — a message is sent through that terminal
  * (`submitToRun`: a bracketed paste, then Enter), exactly as if typed there, so
- * nothing new reaches the server. A permission prompt or a menu still needs the
- * terminal; the hint under the box says so.
+ * nothing new reaches the server. The box carries Claude Desktop's controls:
+ * the `+` menu (`ChatAddMenu`: files — new, the project's, the workspace's
+ * context files, recent uploads —, skills, plugins' skills), and for a
+ * Claude pane the Model/Effort chip — a change is typed into the pane as
+ * `/model <id>` / `/effort <level>` — and the permission mode, which only
+ * Shift+Tab changes in a running session, so the server steps it and reads
+ * every step back off the pane (`POST /api/run/:id/permission-mode`); it sits
+ * in the box beside `+`. A permission prompt or a menu still needs the terminal.
+ * It also has Claude Desktop's activity panel (`ChatOutline`: progress,
+ * outputs, what the session used), open at first in a pane spanning the
+ * grid's full width or height (`panelOpen`) and collapsed into a file button
+ * with the output count in a quarter-sized one; it sits beside the
+ * conversation when the pane is wide and over it when narrow (a CSS container
+ * query on the pane, not the window), dragged wider or narrower by its
+ * splitter there (a fraction of the pane, remembered per browser). A file
+ * clicked there opens its preview
+ * in the panel's place
+ * (`FilePreview`) — so does one in a turn's "Edited N files" card outside
+ * the workspace's folder —, a group
+ * of files or the used skills a list with a preview (`FileListModal`,
+ * `SkillListModal`). Anything there drags into the prompt box. A file in a turn's
+ * "Edited N files" card opens in the Workspace's Changes panel
+ * (`openInChanges`) when it lies in the pane's folder. The unsent prompt and
+ * its attachments are kept per session (`lib/chatDraft.ts`), so switching to
+ * the terminal and back, or a reload, leaves them as typed. A send scrolls the
+ * conversation to its end and keeps it there (`follow`), so the message and
+ * the step running after it come into sight on their own. While the session's
+ * main agent is working (a prompt submitted, no Stop yet) an empty box shows
+ * Stop in Send's place: Esc pressed in the pane (`interruptRun`).
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { useState } from "react";
+import { useCallback, useEffect, useRef, useState, type CSSProperties } from "react";
 import { useTranslation } from "react-i18next";
-import { ArrowUp } from "lucide-react";
+import { ArrowUp, FileText, Square } from "lucide-react";
 import { ConversationView } from "../conversation/ConversationView";
-import { PromptEditor, promptWithImages, type PromptImage } from "./RunSetup";
-import { submitToRun } from "../../lib/panePaste";
+import { ModelMenu, PromptEditor, promptWithImages, type PromptImage } from "./RunSetup";
+import { ChatAddMenu } from "./ChatAddMenu";
+import { addAttachments, dragAttachments } from "../../lib/promptAttach";
+import { readChatDraft, writeChatDraft } from "../../lib/chatDraft";
+import { ChatOutline, outlineAttachment, useSessionOutline, type OutlineList } from "./ChatOutline";
+import { FileListModal, FilePreview, SkillListModal, type PreviewScope } from "./ChatFilePreview";
+import { Select } from "../Select";
+import { Divider } from "./PaneGrid";
+import { interruptRun, submitToRun } from "../../lib/panePaste";
+import { useLiveRefresh } from "../../hooks/useLiveRefresh";
+import { openInChanges } from "../../lib/openInChanges";
 import { toast } from "../../lib/toast";
+import { api, type EffortLevel, type PermissionMode, type RunHandle } from "../../lib/api";
+
+const MODES: [PermissionMode, string][] = [
+  ["default", "Default"],
+  ["acceptEdits", "AcceptEdits"],
+  ["plan", "Plan"],
+  ["auto", "Auto"],
+  ["bypassPermissions", "Bypass"],
+];
+const isSettable = (m: unknown): m is PermissionMode => MODES.some(([v]) => v === m);
+const SIDE_KEY = "agenthub.chat.panelWidth";
+const clampSide = (f: number) => Math.round(Math.min(0.7, Math.max(0.2, f)) * 100) / 100;
+const storedSide = () => {
+  const f = Number(localStorage.getItem(SIDE_KEY));
+  return f ? clampSide(f) : null;
+};
+
+/** The pane's permission mode as it shows it; a pick steps it there. */
+function PermissionChip({ runId, initial }: { runId: string; initial: PermissionMode | null }) {
+  const { t } = useTranslation(["run", "lanes"]);
+  const [mode, setMode] = useState<PermissionMode>(initial ?? "default");
+  const [busy, setBusy] = useState(false);
+  const read = useCallback(
+    () =>
+      api.run
+        .permissionMode(runId)
+        .then((r) => isSettable(r.mode) && setMode(r.mode))
+        .catch(() => {}),
+    [runId]
+  );
+  useEffect(() => {
+    void read();
+  }, [read]);
+  // Bypass is in a session's cycle only when it was started with it.
+  const offered = MODES.filter(([v]) => v !== "bypassPermissions" || initial === v || mode === v);
+  return (
+    <div data-testid="pane-chat-mode">
+      <Select<PermissionMode>
+        variant="ghost"
+        label={t("run:fields.permissionMode")}
+        value={mode}
+        disabled={busy}
+        onChange={(v) => {
+          setBusy(true);
+          api.run
+            .setPermissionMode(runId, v)
+            .then((r) => setMode(r.mode))
+            .catch((err: unknown) => {
+              toast.error(
+                t("run:chat.modeFailed", { message: err instanceof Error ? err.message : "" })
+              );
+              void read();
+            })
+            .finally(() => setBusy(false));
+        }}
+        options={offered.map(([value, key]) => ({
+          value,
+          label: t(`lanes:home.permission${key}`),
+          hint: t(`run:fields.permission${key}`),
+        }))}
+      />
+    </div>
+  );
+}
 
 export function PaneChat({
-  runId,
+  run,
   sessionId,
-  tool,
   cwd,
+  laneId = null,
+  laneCwd = "",
+  panelOpen = false,
 }: {
-  runId: string;
+  run: Pick<RunHandle, "id" | "tool" | "model" | "effort" | "permissionMode">;
   sessionId: string;
-  tool: string;
   cwd: string;
+  /** The workspace and its folder: a file under `cwd` is previewed through it. */
+  laneId?: number | null;
+  laneCwd?: string;
+  /** The right panel starts open: the pane spans the grid's width or height. */
+  panelOpen?: boolean;
 }) {
   const { t } = useTranslation("run");
-  const [prompt, setPrompt] = useState("");
-  const [images, setImages] = useState<PromptImage[]>([]);
+  const runId = run.id;
+  const claude = run.tool === "claude";
+  // The unsent prompt outlives the terminal view and a reload (`lib/chatDraft`).
+  const [prompt, setPrompt] = useState(() => readChatDraft(sessionId).prompt);
+  const [images, setImages] = useState<PromptImage[]>(() => readChatDraft(sessionId).images);
+  useEffect(() => writeChatDraft(sessionId, prompt, images), [sessionId, prompt, images]);
   const [uploading, setUploading] = useState(false);
+  const [follow, setFollow] = useState(0);
+  const [model, setModel] = useState(run.model ?? "");
+  const [effort, setEffort] = useState<EffortLevel>(run.effort ?? "");
+  const pickFiles = useRef<(() => void) | null>(null);
+  const [outlineOpen, setOutlineOpen] = useState(panelOpen);
+  // A split or a close changes the pane's shape: its default comes back.
+  useEffect(() => setOutlineOpen(panelOpen), [panelOpen]);
+  const openOutline = (open: boolean) => {
+    setOutlineOpen(open);
+    setPreview(null);
+  };
+  const [preview, setPreview] = useState<string | null>(null);
+  // The side panel's width as a fraction of the pane: the dragged one, else
+  // a default per content (a preview wants more room than the panel).
+  const [dragged, setDragged] = useState(storedSide);
+  const side = dragged ?? (preview ? 0.45 : 0.3);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const [list, setList] = useState<OutlineList | null>(null);
+  const activity = useSessionOutline(sessionId);
+  const scope: PreviewScope = { laneId, laneCwd: laneCwd || cwd, cwd, sessionId };
   const text = promptWithImages(prompt, images);
 
+  // The main agent is "working" from a prompt's submit to its Stop hook.
+  const [working, setWorking] = useState(false);
+  const readWorking = useCallback(
+    () =>
+      api.agents
+        .list({ session_id: sessionId, status: "working" })
+        // With session_id the server answers every agent of the session, its
+        // status filter ignored: check the status here.
+        .then((r) => setWorking(r.agents.some((a) => a.type === "main" && a.status === "working")))
+        .catch(() => {}),
+    [sessionId]
+  );
+  useEffect(() => {
+    void readWorking();
+  }, [readWorking]);
+  useLiveRefresh(readWorking, {
+    throttleMs: 500,
+    // While Stop shows, also poll: a missed agent_updated (the hook reached
+    // another dashboard on the same database, or the socket dropped) would
+    // otherwise leave Stop up after the turn ended.
+    intervalMs: working ? 5000 : undefined,
+    match: (msg) =>
+      msg.type === "agent_updated" &&
+      (msg.data as { session_id?: string } | undefined)?.session_id === sessionId,
+  });
+
+  // A control is a command typed into the pane, like the user would.
+  const command = (line: string) => {
+    const ok = submitToRun(runId, line);
+    if (!ok) toast.error(t("chat.notSent"));
+    return ok;
+  };
+
   const send = () => {
     if (!text || uploading) return;
-    if (!submitToRun(runId, text)) {
-      toast.error(t("chat.notSent"));
-      return;
-    }
+    if (!command(text)) return;
+    setFollow((n) => n + 1);
     setPrompt("");
     images.forEach((i) => i.url && URL.revokeObjectURL(i.url));
     setImages([]);
   };
 
   return (
-    <div data-testid="pane-chat" className="flex min-h-0 flex-1 flex-col gap-2 pb-3">
-      <div className="min-h-0 flex-1 overflow-hidden">
-        <ConversationView sessionId={sessionId} fill />
-      </div>
-      <div className="mx-4">
-        <div className="mx-auto w-full max-w-3xl rounded-2xl border border-border bg-surface-1 p-2 shadow-sm transition-colors focus-within:border-accent/50">
-          <PromptEditor
-            bare
-            images={images}
-            onImagesChange={setImages}
-            onBusyChange={setUploading}
-            value={prompt}
-            onChange={setPrompt}
-            onSubmit={send}
-            placeholder={t("chat.placeholder")}
-            rows={2}
-            slash={tool === "claude"}
-            fileCwd={cwd}
+    <div
+      ref={rootRef}
+      data-prompt-drop
+      className="relative flex min-h-0 flex-1 [container-type:inline-size]"
+      style={{ "--chat-side": `${side * 100}%` } as CSSProperties}
+    >
+      <div data-testid="pane-chat" className="flex min-h-0 min-w-0 flex-1 flex-col gap-2 pb-3">
+        <div className="relative min-h-0 flex-1 overflow-hidden">
+          <ConversationView
+            sessionId={sessionId}
+            fill
+            live
+            follow={follow}
+            onOpenFile={(path) => {
+              // The workspace's Changes panel when the file is in its folder;
+              // else this view's own preview.
+              if (laneId !== null && openInChanges(laneId, cwd, path)) return;
+              setPreview(path);
+            }}
           />
-          <div className="mt-1 flex items-center gap-2">
-            <span className="text-[11px] text-fg-muted">{t("chat.hint")}</span>
+          {!outlineOpen && !preview && (
             <button
               type="button"
-              data-testid="pane-chat-send"
-              onClick={send}
-              disabled={uploading || !text}
-              aria-label={t("chat.send")}
-              title={t("chat.send")}
-              className="ml-auto flex h-8 w-8 items-center justify-center rounded-full bg-accent-solid text-white transition-opacity hover:opacity-90 disabled:opacity-40"
+              data-testid="chat-outline-show"
+              onClick={() => openOutline(true)}
+              title={t("chat.outline.show")}
+              aria-label={t("chat.outline.show")}
+              className="absolute right-3 top-2 flex h-7 items-center gap-1 rounded-md border border-border bg-surface-1 px-2 text-xs text-fg-secondary hover:bg-surface-3 hover:text-fg-primary"
             >
-              <ArrowUp className="h-4 w-4" />
+              <FileText className="h-3.5 w-3.5" />
+              {activity.outputs.length}
             </button>
+          )}
+        </div>
+        <div className="mx-4">
+          <div className="mx-auto w-full max-w-[max(48rem,70%)]">
+            <div className="rounded-2xl border border-border bg-surface-1 p-2 shadow-sm transition-colors focus-within:border-accent/50">
+              <PromptEditor
+                bare
+                images={images}
+                onImagesChange={setImages}
+                onBusyChange={setUploading}
+                pickFiles={pickFiles}
+                value={prompt}
+                onChange={setPrompt}
+                onSubmit={send}
+                placeholder={t("chat.placeholder")}
+                rows={2}
+                slash={claude}
+                fileCwd={cwd}
+                lane={runId}
+              />
+              <div className="mt-1 flex items-center gap-1">
+                <ChatAddMenu
+                  cwd={cwd}
+                  laneId={laneId}
+                  skills={claude}
+                  onUpload={() => pickFiles.current?.()}
+                  onInsert={(cmd) => setPrompt((p) => `${cmd} ${p.replace(/^\s+/, "")}`)}
+                  onAttach={(items) => setImages((prev) => addAttachments(prev, items))}
+                />
+                {claude && <PermissionChip runId={runId} initial={run.permissionMode} />}
+                <div className="ml-auto flex items-center gap-1">
+                  {claude && (
+                    <ModelMenu
+                      value={model}
+                      onChange={(v) => {
+                        if (command(`/model ${v || "default"}`)) setModel(v);
+                      }}
+                      tool={run.tool}
+                      effort={effort}
+                      onEffortChange={(e) => {
+                        if (command(`/effort ${e || "auto"}`)) setEffort(e);
+                      }}
+                    />
+                  )}
+                  {working && !text ? (
+                    <button
+                      type="button"
+                      data-testid="pane-chat-stop"
+                      onClick={() => {
+                        // An interrupted turn fires no Stop hook: clear it here.
+                        if (interruptRun(runId)) setWorking(false);
+                        else toast.error(t("chat.notStopped"));
+                      }}
+                      aria-label={t("chat.stop")}
+                      title={t("chat.stop")}
+                      className="flex h-8 w-8 items-center justify-center rounded-full bg-surface-3 text-fg-primary transition-colors hover:bg-surface-4"
+                    >
+                      <Square className="h-3 w-3 fill-current" />
+                    </button>
+                  ) : (
+                    <button
+                      type="button"
+                      data-testid="pane-chat-send"
+                      onClick={send}
+                      disabled={uploading || !text}
+                      aria-label={t("chat.send")}
+                      title={t("chat.send")}
+                      className="flex h-8 w-8 items-center justify-center rounded-full bg-accent-solid text-white transition-opacity hover:opacity-90 disabled:opacity-40"
+                    >
+                      <ArrowUp className="h-4 w-4" />
+                    </button>
+                  )}
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
+      {preview ? (
+        <FilePreview
+          path={preview}
+          scope={scope}
+          onClose={() => setPreview(null)}
+          // Beside the chat when the pane has room, over it when not.
+          className="absolute inset-0 z-30 rounded-xl border border-border [@container(min-width:40rem)]:static [@container(min-width:40rem)]:m-3 [@container(min-width:40rem)]:ml-0 [@container(min-width:40rem)]:w-[calc(var(--chat-side)-0.75rem)] [@container(min-width:40rem)]:flex-shrink-0"
+        />
+      ) : (
+        outlineOpen && (
+          <ChatOutline
+            outline={activity}
+            onClose={() => openOutline(false)}
+            onOpenFile={setPreview}
+            onOpenList={setList}
+          />
+        )
+      )}
+      {(preview || outlineOpen) && (
+        // Only beside the chat: a panel over a narrow pane has no edge to drag.
+        <div className="hidden [@container(min-width:40rem)]:contents">
+          <Divider
+            gridRef={rootRef}
+            dir="row"
+            at={1 - side}
+            box={{ x: 0, y: 0, w: 1, h: 1 }}
+            label={t("chat.outline.resize")}
+            onRatio={(r) => {
+              const f = clampSide(1 - r);
+              localStorage.setItem(SIDE_KEY, String(f));
+              setDragged(f);
+            }}
+          />
+        </div>
+      )}
+      {list === "skills" && (
+        <SkillListModal
+          title={t("chat.outline.skills")}
+          names={activity.skills}
+          scope={scope}
+          onClose={() => setList(null)}
+          draggable={claude}
+        />
+      )}
+      {list && list !== "skills" && (
+        <FileListModal
+          title={t(`chat.outline.${list}`)}
+          paths={activity[list]}
+          scope={scope}
+          onClose={() => setList(null)}
+          onDragItem={(e, p) => dragAttachments(e, [outlineAttachment(p, list === "uploads")])}
+        />
+      )}
     </div>
   );
 }

client/src/components/run/PaneGrid.tsx

@@ -29,6 +29,7 @@ import {
   ChevronDown,
   Columns2,
   GripVertical,
+  MessageSquare,
   Minimize2,
   Rows2,
   SquareTerminal,
@@ -39,6 +40,7 @@ import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../Context
 import {
   EMPTY_GROUPS,
   type Edge,
+  type GroupsScope,
   type PaneGroups,
   type PaneLayout,
   type Rect,
@@ -55,6 +57,7 @@ import {
 } from "../../lib/paneLayout";
 import { AiToolIcon } from "../AiToolIcon";
 import { RunDot, type RunState } from "./ConsoleTabs";
+import { setSessionChat, useSessionChat } from "../../lib/chatUi";
 
 export const PANE_DRAG_TYPE = "application/x-agenthub-pane";
 /** The slot being dragged: `dataTransfer` data cannot be read during dragover. */
@@ -80,10 +83,10 @@ export type LayoutUpdate = (fn: (l: PaneLayout) => PaneLayout) => void;
 export type GroupsUpdate = (fn: (g: PaneGroups) => PaneGroups) => void;
 
 /** A workspace's tabs (groups of split panes), loaded and saved per
- *  workspace. An update that lands after a workspace switch never writes into
- *  the new one. */
-export function usePaneGroups(laneId: number | null): [PaneGroups, GroupsUpdate] {
-  const load = (id: number | null) => ({
+ *  workspace (or once for every workspace, `all`). An update that lands after
+ *  a workspace switch never writes into the new one. */
+export function usePaneGroups(laneId: GroupsScope | null): [PaneGroups, GroupsUpdate] {
+  const load = (id: GroupsScope | null) => ({
     laneId: id,
     groups: id === null ? EMPTY_GROUPS : loadGroups(id),
   });
@@ -191,9 +194,37 @@ function PaneMenu({
 const ITEM =
   "flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-left text-sm text-fg-secondary hover:bg-surface-4 hover:text-fg-primary";
 
-/** A pane's split-right / split-down menus: move a hidden run beside
- *  `slot`, or start a new terminal or AI tool there. In a pane header when the view is
- *  split, beside Tools in the tab bar while one pane is shown. */
+/** Chat UI ⇄ terminal for a Claude/Codex pane — this session's own view
+ *  (`lib/chatUi.ts`); a session with no id yet has no chat to show. */
+function ChatToggle({ run }: { run?: RunHandle }) {
+  const { t } = useTranslation("lanes");
+  const chat = useSessionChat(run?.sessionId);
+  if (!run?.sessionId || (run.tool !== "claude" && run.tool !== "codex")) return null;
+  const sessionId = run.sessionId;
+  const label = chat ? t("panes.showTerminal") : t("panes.showChat");
+  return (
+    <button
+      type="button"
+      data-testid={`pane-chat-toggle-${run.slot ?? 0}`}
+      aria-pressed={chat}
+      title={label}
+      aria-label={label}
+      onClick={() => setSessionChat(sessionId, !chat)}
+      className="flex h-6 w-6 items-center justify-center rounded text-fg-muted hover:bg-surface-4 hover:text-fg-primary"
+    >
+      {chat ? (
+        <SquareTerminal className="h-3.5 w-3.5" />
+      ) : (
+        <MessageSquare className="h-3.5 w-3.5" />
+      )}
+    </button>
+  );
+}
+
+/** A pane's chat/terminal toggle and split-right / split-down menus: move a
+ *  hidden run beside `slot`, or start a new terminal or AI tool there. In a
+ *  pane header when the view is split, beside Tools in the tab bar while one
+ *  pane is shown. */
 export function SplitMenus({
   slot,
   shown,
@@ -222,6 +253,7 @@ export function SplitMenus({
   const full = shown.length >= MAX_PANES;
   return (
     <>
+      <ChatToggle run={runs.find((x) => (x.slot ?? 0) === slot)} />
       {(["right", "bottom"] as const).map((edge) => (
         <PaneMenu
           key={edge}
@@ -446,6 +478,8 @@ export function PaneGrid({
             key={slot}
             data-testid={`pane-${slot}`}
             data-focused={r && focused ? "true" : undefined}
+            // A menu opened in this pane stays inside it (`menuRoom`).
+            data-menu-bounds
             className={r ? "absolute flex flex-col" : "hidden"}
             style={r ? pct(r) : undefined}
             onPointerDownCapture={() => r && focus(slot)}

client/src/components/run/RunSetup.tsx

@@ -6,8 +6,13 @@
  * box (`WorkspaceHome.tsx`):
  *   - `PromptEditor` — the prompt textarea with `/` (commands and skills,
  *     Claude only) and `@` (`GET /api/run/files`) autocomplete, Shift/Alt+Enter
- *     newlines, and pasted or dropped files (images as thumbnails, any other
- *     as a name chip) attached by their saved paths (`POST /api/run/drop-file`);
+ *     newlines, and pasted, dropped or picked files (`pickFiles`, a composer's
+ *     + menu; images as thumbnails, opened full size in `ImageLightbox`, any
+ *     other as a name chip) attached by their saved paths (`POST /api/run/drop-file`,
+ *     remembered for the + menu's Recent uploads), and a panel row (Files,
+ *     Changes, a context file or folder) dropped on it (`lib/promptAttach.ts`)
+ *     as an `@path` chip — a `bare` one takes a drop anywhere on its box;
+ *     a borderless (`bare`) one grows with its text up to 40vh;
  *   - `CwdAutocomplete` — the folder field the Add-workspace modal uses;
  *   - `ModelPicker` — a tool's own model list (`GET /api/ai-tools/:id/models`)
  *     or a fixed one (an AI Proxy's models), plus Custom…;
@@ -19,7 +24,17 @@
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { useEffect, useMemo, useRef, useState, type Dispatch, type SetStateAction } from "react";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type Dispatch,
+  type MutableRefObject,
+  type SetStateAction,
+} from "react";
 import { useTranslation } from "react-i18next";
 import {
   Check,
@@ -42,9 +57,18 @@ import {
 } from "../../lib/api";
 import type { CwdSuggestion, CcMdItem } from "../../lib/api";
 import type { LaneTool } from "../../lib/types";
-import { Select } from "../Select";
+import { Select, menuRoom } from "../Select";
 import { ContextMenu, MenuItem, menuPoint, type MenuPoint } from "../ContextMenu";
 import { isSubmitEnter } from "../../lib/keys";
+import { ImageLightbox } from "../ImageLightbox";
+import {
+  ATTACH_MIME,
+  addAttachments,
+  droppedAttachments,
+  droppedSkill,
+  SKILL_MIME,
+  rememberUploads,
+} from "../../lib/promptAttach";
 
 export interface SlashCommand {
   name: string;
@@ -158,11 +182,16 @@ interface PromptEditorProps {
    *  sends them with the text through `promptWithImages`. */
   images: PromptImage[];
   onImagesChange: Dispatch<SetStateAction<PromptImage[]>>;
-  /** Borderless, for a composer box that draws its own frame. */
+  /** Borderless, for a composer box that draws its own frame — and grows
+   *  with its text, from `rows` up to 40% of the screen, then scrolls. */
   bare?: boolean;
   /** An image upload started (true) or settled (false): the caller holds its
    *  send button meanwhile, or the prompt would go out without the image. */
   onBusyChange?: (busy: boolean) => void;
+  /** The workspace (id, or a pane's run id) whose panes read the files. */
+  lane?: number | string;
+  /** Set to a function that opens a file picker (a composer's + menu). */
+  pickFiles?: MutableRefObject<(() => void) | null>;
 }
 
 /** An attached file: its path on the server's machine, and a local preview
@@ -175,6 +204,9 @@ export function promptWithImages(text: string, images: PromptImage[]): string {
   return [text.trim(), ...images.map((i) => i.path)].filter(Boolean).join(" ");
 }
 
+/** A plain-text paste longer than this is attached as `pasted-text.txt`. */
+export const PASTE_AS_FILE_CHARS = 5000;
+
 export function PromptEditor({
   value,
   onChange,
@@ -187,9 +219,19 @@ export function PromptEditor({
   onImagesChange,
   bare,
   onBusyChange,
+  lane,
+  pickFiles,
 }: PromptEditorProps) {
   const { t } = useTranslation("run");
   const taRef = useRef<HTMLTextAreaElement | null>(null);
+  // A composer grows with its text: reset to its rows, then take what the
+  // text needs; `max-h-[40vh]` caps it and it scrolls from there.
+  useLayoutEffect(() => {
+    const ta = taRef.current;
+    if (!bare || !ta) return;
+    ta.style.height = "auto";
+    ta.style.height = `${ta.scrollHeight}px`;
+  }, [bare, value]);
   const [trigger, setTrigger] = useState<Trigger | null>(null);
   const [active, setActive] = useState(0);
   const [files, setFiles] = useState<string[]>([]);
@@ -321,11 +363,11 @@ export function PromptEditor({
   const busyRef = useRef(onBusyChange);
   busyRef.current = onBusyChange;
   useEffect(() => busyRef.current?.(uploading), [uploading]);
-  const attachImages = (list: FileList | null | undefined) => {
+  const attachImages = (list: FileList | File[] | null | undefined) => {
     const picked = Array.from(list ?? []);
     if (picked.length === 0) return false;
     setUpload("uploading");
-    Promise.all(picked.map((f) => api.run.dropFile(f)))
+    Promise.all(picked.map((f) => api.run.dropFile(f, lane)))
       .then((saved) => {
         setUpload(null);
         const added = picked.map((f, i) => ({
@@ -333,6 +375,7 @@ export function PromptEditor({
           url: f.type.startsWith("image/") ? URL.createObjectURL(f) : undefined,
           name: f.name,
         }));
+        rememberUploads(added.map((a) => ({ path: a.path, name: a.name, image: !!a.url })));
         onImagesChange((prev) => [...prev, ...added]);
       })
       .catch(() => setUpload("failed"));
@@ -342,12 +385,50 @@ export function PromptEditor({
     if (img.url) URL.revokeObjectURL(img.url);
     onImagesChange((prev) => prev.filter((x) => x !== img));
   };
+  const closeViewer = useCallback(() => setViewing(null), []);
+  // The composer's own "Upload or add files" opens this picker; what it picks
+  // takes the same path as a paste or a drop.
+  const fileInput = useRef<HTMLInputElement | null>(null);
+  if (pickFiles) pickFiles.current = () => fileInput.current?.click();
+
+  // A drop lands anywhere on the screen around the composer — the nearest
+  // `data-prompt-drop` ancestor (a Chat pane, a replay, the workspace home),
+  // else a `bare` editor's parent, the box every caller draws around it and
+  // its toolbar — not only on the textarea: a panel row (`ATTACH_MIME`)
+  // becomes an `@path` chip, a skill (`SKILL_MIME`) the prompt's leading
+  // `/command`, a file is uploaded.
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const dropRef = useRef<(e: DragEvent) => void>(() => {});
+  dropRef.current = (e) => {
+    const atts = droppedAttachments(e.dataTransfer);
+    const skill = droppedSkill(e.dataTransfer);
+    if (atts.length) {
+      e.preventDefault();
+      onImagesChange((prev) => addAttachments(prev, atts));
+    } else if (skill) {
+      e.preventDefault();
+      onChange(`/${skill} ${value.replace(/^\s+/, "")}`);
+    } else if (attachImages(e.dataTransfer?.files)) e.preventDefault();
+  };
   useEffect(() => {
-    if (!viewing) return;
-    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setViewing(null);
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [viewing]);
+    const zone =
+      rootRef.current?.closest<HTMLElement>("[data-prompt-drop]") ??
+      (bare ? rootRef.current?.parentElement : rootRef.current);
+    if (!zone) return;
+    const over = (e: DragEvent) => {
+      const types = e.dataTransfer?.types ?? [];
+      if (![ATTACH_MIME, SKILL_MIME, "Files"].some((m) => types.includes(m))) return;
+      e.preventDefault();
+      e.dataTransfer!.dropEffect = "copy";
+    };
+    const drop = (e: DragEvent) => dropRef.current(e);
+    zone.addEventListener("dragover", over);
+    zone.addEventListener("drop", drop);
+    return () => {
+      zone.removeEventListener("dragover", over);
+      zone.removeEventListener("drop", drop);
+    };
+  }, [bare]);
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (kind && count > 0) {
@@ -392,7 +473,7 @@ export function PromptEditor({
     `w-full text-left px-3 py-1.5 transition-colors ${i === current ? "bg-accent/15" : "hover:bg-surface-3"}`;
 
   return (
-    <div className="relative">
+    <div ref={rootRef} className="relative">
       {images.length > 0 && (
         <div data-testid="prompt-images" className="mb-2 flex flex-wrap gap-2 px-1 pt-1">
           {images.map((img) => (
@@ -451,6 +532,19 @@ export function PromptEditor({
           )}
         </div>
       )}
+      {pickFiles && (
+        <input
+          ref={fileInput}
+          type="file"
+          multiple
+          hidden
+          data-testid="prompt-file-input"
+          onChange={(e) => {
+            attachImages(e.target.files);
+            e.target.value = "";
+          }}
+        />
+      )}
       <textarea
         ref={taRef}
         value={value}
@@ -464,16 +558,23 @@ export function PromptEditor({
         onKeyDown={handleKeyDown}
         onPaste={(e) => {
           if (attachImages(e.clipboardData?.files)) e.preventDefault();
-        }}
-        onDrop={(e) => {
-          if (attachImages(e.dataTransfer?.files)) e.preventDefault();
+          else {
+            // A very long paste goes in as a text file, like Claude Desktop:
+            // the prompt then carries its path, never the text (#68: a CLI's
+            // argument and a tmux message both have a size limit).
+            const text = e.clipboardData?.getData("text/plain") ?? "";
+            if (text.length > PASTE_AS_FILE_CHARS) {
+              e.preventDefault();
+              attachImages([new File([text], "pasted-text.txt", { type: "text/plain" })]);
+            }
+          }
         }}
         placeholder={placeholder}
         rows={rows}
         spellCheck={false}
         className={
           bare
-            ? "block w-full resize-none bg-transparent px-1 py-1 text-sm text-fg-primary placeholder:text-fg-muted focus:outline-none"
+            ? "block max-h-[40vh] w-full resize-none overflow-y-auto bg-transparent px-1 py-1 text-sm text-fg-primary placeholder:text-fg-muted focus:outline-none"
             : "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"
         }
       />
@@ -542,20 +643,7 @@ export function PromptEditor({
           )}
         </div>
       )}
-      {viewing && (
-        <div
-          role="dialog"
-          aria-label={viewing.name}
-          onClick={() => setViewing(null)}
-          className="fixed inset-0 z-50 flex cursor-zoom-out items-center justify-center bg-black/60 p-8"
-        >
-          <img
-            src={viewing.url}
-            alt={viewing.name}
-            className="max-h-full max-w-full rounded-lg object-contain shadow-2xl"
-          />
-        </div>
-      )}
+      {viewing?.url && <ImageLightbox src={viewing.url} alt={viewing.name} onClose={closeViewer} />}
     </div>
   );
 }
@@ -670,7 +758,10 @@ export function CwdAutocomplete({
         />
       </div>
       {open && (
-        <div className="absolute z-30 left-0 right-0 mt-1 rounded-md border border-border bg-surface-1 shadow-lg shadow-black/40 max-h-72 overflow-auto py-1">
+        <div
+          data-cwd-suggestions
+          className="absolute z-30 left-0 right-0 mt-1 rounded-md border border-border bg-surface-1 shadow-lg shadow-black/40 max-h-72 overflow-auto py-1"
+        >
           {groups.length === 0 ? (
             <div className="px-3 py-2 text-[11px] text-fg-muted">{t("fields.cwdNoMatches")}</div>
           ) : (
@@ -853,9 +944,11 @@ export function ModelMenu({
   const ref = useRef<HTMLDivElement | null>(null);
   useEffect(() => {
     if (!open) return;
-    // Below the chip unless the viewport has more room above it.
-    const r = ref.current?.getBoundingClientRect();
-    if (r) setUp(window.innerHeight - r.bottom < 360 && r.top > window.innerHeight - r.bottom);
+    // Below the chip unless its pane (or the viewport) has more room above it.
+    if (ref.current) {
+      const { above, below } = menuRoom(ref.current, ref.current.getBoundingClientRect());
+      setUp(below < 360 && above > below);
+    }
     const away = (e: MouseEvent) => {
       if (!ref.current?.contains(e.target as Node)) setOpen(false);
     };

client/src/components/run/TerminalView.tsx

@@ -192,7 +192,7 @@ export function TerminalView({ runId, wsBaseUrl, onExit, autoFocus = true }: Ter
     if (files.length === 0) return;
     setDrop("uploading");
     try {
-      const saved = await Promise.all(files.map((f) => api.run.dropFile(f)));
+      const saved = await Promise.all(files.map((f) => api.run.dropFile(f, runId)));
       // paste(), not a raw send: it honours bracketed-paste mode, so claude
       // sees pasted paths rather than typed keystrokes.
       termRef.current?.paste(saved.map((r) => r.path).join(" ") + " ");
@@ -236,6 +236,9 @@ export function TerminalView({ runId, wsBaseUrl, onExit, autoFocus = true }: Ter
         fontSize: 13,
         cursorBlink: true,
         fontFamily: TERMINAL_FONTS[readTerminalFont()],
+        // A step heavier than stock, like the rest of the UI (main.tsx loads these weights).
+        fontWeight: 500,
+        fontWeightBold: 700,
         theme: paletteRef.current,
         screenReaderMode: readFlag(SCREEN_READER_KEY),
       });
@@ -556,7 +559,10 @@ export function TerminalView({ runId, wsBaseUrl, onExit, autoFocus = true }: Ter
         // On screen (a console hidden with CSS measures 0×0) AND attached:
         // `onData` drops input while the socket is connecting or reconnecting,
         // so a caller waits or says the paste failed instead.
-        () => !!containerRef.current?.offsetWidth && wsRef.current?.readyState === WebSocket.OPEN
+        () => !!containerRef.current?.offsetWidth && wsRef.current?.readyState === WebSocket.OPEN,
+        (data) => {
+          if (wsRef.current?.readyState === WebSocket.OPEN) wsRef.current.send(data);
+        }
       ),
     [runId]
   );

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

@@ -0,0 +1,103 @@
+/**
+ * @file ChatAddMenu.test.tsx
+ * @description The `+` menu's existing-resource pickers: Project files (a
+ * search with folders, attached as `@path`), the workspace's Context files
+ * (files only, none missing) and this browser's Recent uploads.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import i18n from "i18next";
+import { ChatAddMenu } from "../ChatAddMenu";
+import { api } from "../../../lib/api";
+import { rememberUploads } from "../../../lib/promptAttach";
+
+vi.mock("../../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>();
+  return {
+    ...actual,
+    api: {
+      run: { files: vi.fn().mockResolvedValue({ items: ["src/", "src/a.ts"] }) },
+      lanes: {
+        sources: vi.fn().mockResolvedValue({
+          sources: [
+            { id: 1, kind: "file", path: "/data/ctx/1/brief.md", name: "brief.md", missing: false },
+            { id: 2, kind: "file", path: "/data/ctx/1/gone.md", name: "gone.md", missing: true },
+            { id: 3, kind: "folder", path: "/srv/docs", name: "docs", missing: false },
+          ],
+        }),
+      },
+      ccConfig: {
+        skills: vi.fn().mockResolvedValue({ items: [] }),
+        plugins: vi.fn().mockResolvedValue({ plugins: [] }),
+      },
+    },
+  };
+});
+
+function renderMenu(laneId: number | null = 7) {
+  const onAttach = vi.fn();
+  render(
+    <MemoryRouter>
+      <ChatAddMenu
+        cwd="/repo"
+        laneId={laneId}
+        skills={false}
+        onUpload={() => {}}
+        onInsert={() => {}}
+        onAttach={onAttach}
+      />
+    </MemoryRouter>
+  );
+  fireEvent.click(screen.getByTestId("chat-add"));
+  return onAttach;
+}
+
+beforeEach(() => {
+  i18n.changeLanguage("en");
+  localStorage.clear();
+  vi.clearAllMocks();
+});
+
+describe("ChatAddMenu — existing resources", () => {
+  it("searches the project, folders included, and attaches a pick as @path", async () => {
+    const onAttach = renderMenu();
+    fireEvent.mouseEnter(screen.getByTestId("chat-add-project"));
+    fireEvent.click(await screen.findByTestId("chat-add-project-src/"));
+    expect(api.run.files).toHaveBeenCalledWith("/repo", "", true);
+    expect(onAttach).toHaveBeenCalledWith([{ path: "@src/", name: "src/" }]);
+  });
+
+  it("offers the workspace's context files that are still there, files only", async () => {
+    const onAttach = renderMenu();
+    fireEvent.mouseEnter(screen.getByTestId("chat-add-context"));
+    fireEvent.click(await screen.findByTestId("chat-add-context-brief.md"));
+    expect(api.lanes.sources).toHaveBeenCalledWith(7);
+    expect(screen.queryByTestId("chat-add-context-gone.md")).toBeNull();
+    expect(onAttach).toHaveBeenCalledWith([{ path: "@/data/ctx/1/brief.md", name: "brief.md" }]);
+  });
+
+  it("has no Context files without a workspace", () => {
+    renderMenu(null);
+    expect(screen.queryByTestId("chat-add-context")).toBeNull();
+  });
+
+  it("lists recent uploads newest first and attaches one as it was sent", () => {
+    rememberUploads([{ path: "/tmp/d/old.pdf", name: "old.pdf", image: false }]);
+    rememberUploads([{ path: "/tmp/d/0123456789abcdef.png", name: "shot.png", image: true }]);
+    const onAttach = renderMenu();
+    fireEvent.mouseEnter(screen.getByTestId("chat-add-recent"));
+    const rows = screen.getAllByTestId(/^chat-add-recent-/);
+    expect(rows.map((r) => r.textContent)).toEqual(["shot.png", "old.pdf"]);
+    fireEvent.click(rows[0]!);
+    expect(onAttach).toHaveBeenCalledWith([
+      {
+        path: "/tmp/d/0123456789abcdef.png",
+        name: "shot.png",
+        url: "/api/run/drop/0123456789abcdef.png",
+      },
+    ]);
+  });
+});

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

@@ -0,0 +1,160 @@
+/**
+ * @file ChatFilePreview.test.tsx
+ * @description Where a Chat pane's file preview reads from: a file under the
+ * pane's folder through the lane's git file read, a memory file under
+ * `~/.claude` through the config pages' read, a dropped text file through the
+ * drop route, an image read outside the folder through the session's image
+ * route, a Windows path like a POSIX one, anything else by path only; the
+ * list dialog previewing the file picked in it; and the skills dialog finding
+ * each skill's SKILL.md by name.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { FileListModal, FilePreview, SkillListModal, displayName } from "../ChatFilePreview";
+import { api } from "../../../lib/api";
+
+vi.mock("../../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>();
+  return {
+    ...actual,
+    api: {
+      lanes: {
+        gitFile: vi.fn().mockResolvedValue({
+          available: true,
+          path: "src/a.ts",
+          rev: "work",
+          binary: false,
+          truncated: false,
+          lines: ["export const a = 1;"],
+        }),
+        gitRawUrl: () => "",
+      },
+      sessions: { readImageUrl: (id: string, p: string) => `/img/${id}?path=${p}` },
+      ccConfig: {
+        skills: vi.fn().mockResolvedValue({
+          items: [{ scope: "user", name: "xlsx", file: "/h/.claude/skills/xlsx/SKILL.md" }],
+        }),
+        plugins: vi.fn().mockResolvedValue({
+          plugins: [
+            {
+              name: "agenthub",
+              contributes: {
+                items: {
+                  skills: [
+                    {
+                      name: "file-headers",
+                      description: null,
+                      file: "/h/.claude/plugins/cache/a/skills/file-headers/SKILL.md",
+                    },
+                  ],
+                  commands: [],
+                },
+              },
+            },
+          ],
+        }),
+        file: vi
+          .fn()
+          .mockResolvedValue({ ok: true, file: "", text: "Launch notes", size: 12, mtime: 0 }),
+      },
+    },
+  };
+});
+
+const scope = { laneId: 4, laneCwd: "/w", cwd: "/w", sessionId: "s1" };
+
+describe("FilePreview", () => {
+  it("reads a workspace file through the lane", async () => {
+    render(<FilePreview path="/w/src/a.ts" scope={scope} onClose={() => {}} />);
+    expect(await screen.findByText("export const a = 1;")).toBeTruthy();
+    expect(vi.mocked(api.lanes.gitFile)).toHaveBeenCalledWith(4, "src/a.ts");
+  });
+
+  it("reads a memory file through the config read", async () => {
+    const mem = "/h/.claude/projects/-w/memory/launch.md";
+    render(<FilePreview path={mem} scope={scope} onClose={() => {}} />);
+    expect(await screen.findByText("Launch notes")).toBeTruthy();
+    expect(vi.mocked(api.ccConfig.file)).toHaveBeenCalledWith(mem);
+  });
+
+  it("reads Windows paths the same way", async () => {
+    const win = { laneId: 4, laneCwd: "D:\\w", cwd: "D:\\w", sessionId: "s1" };
+    render(<FilePreview path={"D:\\w\\src\\a.ts"} scope={win} onClose={() => {}} />);
+    expect(await screen.findByText("export const a = 1;")).toBeTruthy();
+    expect(vi.mocked(api.lanes.gitFile)).toHaveBeenCalledWith(4, "src/a.ts");
+    cleanup();
+    const tool = "C:\\Users\\k\\.claude\\projects\\D--w\\s1\\tool-results\\b.txt";
+    render(<FilePreview path={tool} scope={win} onClose={() => {}} />);
+    expect(await screen.findByText("Launch notes")).toBeTruthy();
+    expect(vi.mocked(api.ccConfig.file)).toHaveBeenCalledWith(tool);
+    expect(screen.getByText("b")).toBeTruthy(); // the name, not the whole path
+  });
+
+  it("reads a dropped text file through the drop route", async () => {
+    const fetchMock = vi.fn().mockResolvedValue(new Response("a long paste"));
+    vi.stubGlobal("fetch", fetchMock);
+    const drop = "C:\\Users\\k\\.claude\\agenthub\\drops\\0123456789abcdef-pasted-text.txt";
+    render(<FilePreview path={drop} scope={scope} onClose={() => {}} />);
+    expect(await screen.findByText("a long paste")).toBeTruthy();
+    expect(fetchMock).toHaveBeenCalledWith("/api/run/drop/0123456789abcdef-pasted-text.txt");
+    vi.unstubAllGlobals();
+  });
+
+  it("shows an image it read outside the folder through the session, its path if refused", () => {
+    render(<FilePreview path="/h/.cache/shot.png" scope={scope} onClose={() => {}} />);
+    const img = screen.getByAltText("shot.png") as HTMLImageElement;
+    expect(img.getAttribute("src")).toBe("/img/s1?path=/h/.cache/shot.png");
+    fireEvent.error(img);
+    expect(screen.getByText("No preview for this file here")).toBeTruthy();
+  });
+
+  it("shows only the path of a file it may not read", () => {
+    render(<FilePreview path="/etc/hosts" scope={scope} onClose={() => {}} />);
+    expect(screen.getByText("No preview for this file here")).toBeTruthy();
+  });
+});
+
+describe("FileListModal", () => {
+  it("previews the file picked in the list", async () => {
+    const drop = "/tmp/agenthub-drops-1000/0123456789abcdef-minutes.xlsx";
+    expect(displayName(drop)).toBe("minutes.xlsx");
+    render(
+      <FileListModal
+        title="Uploads"
+        paths={[drop, "/w/src/a.ts"]}
+        scope={scope}
+        onClose={() => {}}
+      />
+    );
+    expect(screen.getByText("No preview for this file here")).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: "a.ts" }));
+    expect(await screen.findByText("export const a = 1;")).toBeTruthy();
+  });
+});
+
+describe("SkillListModal", () => {
+  it("lists the skills by name and previews each one's SKILL.md", async () => {
+    render(
+      <SkillListModal
+        title="Skills"
+        names={["agenthub:file-headers", "xlsx", "simplify"]}
+        scope={scope}
+        onClose={() => {}}
+      />
+    );
+    // A plugin's skill first, read through the config read.
+    expect(await screen.findByRole("button", { name: "agenthub:file-headers" })).toBeTruthy();
+    await screen.findByText("Launch notes");
+    expect(vi.mocked(api.ccConfig.file)).toHaveBeenCalledWith(
+      "/h/.claude/plugins/cache/a/skills/file-headers/SKILL.md"
+    );
+    fireEvent.click(screen.getByRole("button", { name: "xlsx" }));
+    await screen.findByText("Launch notes");
+    expect(vi.mocked(api.ccConfig.file)).toHaveBeenCalledWith("/h/.claude/skills/xlsx/SKILL.md");
+    // A built-in skill has no file.
+    fireEvent.click(screen.getByRole("button", { name: "simplify" }));
+    expect(screen.getByText("No preview for this file here")).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,119 @@
+/**
+ * @file ChatOutline.test.tsx
+ * @description The Chat pane's activity panel renders a session's outline the
+ * way Claude Desktop does: progress with done/current items, outputs by name
+ * with an EXT tag (a click opens that file), and "Used in this session" rows —
+ * uploads, files read, memory and skills open their list.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { describe, expect, it, vi } from "vitest";
+import { ChatOutline } from "../ChatOutline";
+
+const outline = {
+  progress: [
+    { id: "1", subject: "Parse plan", status: "completed" },
+    { id: "2", subject: "Build report", status: "in_progress" },
+  ],
+  outputs: ["/w/out/Progress report.xlsx"],
+  files: ["/w/src/a.ts", "/w/src/b.ts", "/w/src/c.ts"],
+  uploads: ["/tmp/agenthub-drops-1000/0123456789abcdef-minutes.xlsx"],
+  memory: ["/h/.claude/projects/-w/memory/release.md"],
+  skills: ["xlsx"],
+  mcp: ["vercel_vercel"],
+};
+
+describe("ChatOutline", () => {
+  it("shows progress, outputs and what the session used", () => {
+    const onClose = vi.fn();
+    const onOpenFile = vi.fn();
+    const onOpenList = vi.fn();
+    render(
+      <MemoryRouter>
+        <ChatOutline
+          outline={outline}
+          onClose={onClose}
+          onOpenFile={onOpenFile}
+          onOpenList={onOpenList}
+        />
+      </MemoryRouter>
+    );
+    expect(screen.getByText("Parse plan").className).toContain("line-through");
+    expect(screen.getByText("Build report").className).not.toContain("line-through");
+
+    fireEvent.click(screen.getByRole("button", { name: "XLSX: Progress report" }));
+    expect(onOpenFile).toHaveBeenCalledWith("/w/out/Progress report.xlsx");
+
+    // An upload is named without the drop dir's random prefix.
+    fireEvent.click(screen.getByTitle("Uploads: minutes.xlsx"));
+    expect(onOpenList).toHaveBeenCalledWith("uploads");
+    expect(screen.getByText("+1")).toBeTruthy(); // three files read, two named
+    fireEvent.click(screen.getByTitle("Memory: release"));
+    expect(onOpenList).toHaveBeenCalledWith("memory");
+    fireEvent.click(screen.getByTitle("Skills: xlsx"));
+    expect(onOpenList).toHaveBeenCalledWith("skills");
+    expect(screen.getByText("vercel_vercel")).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "Hide side panel" }));
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it("drags its rows into the prompt box", () => {
+    render(
+      <MemoryRouter>
+        <ChatOutline
+          outline={outline}
+          onClose={() => {}}
+          onOpenFile={() => {}}
+          onOpenList={() => {}}
+        />
+      </MemoryRouter>
+    );
+    const dragged = (el: HTMLElement) => {
+      const data: Record<string, string> = {};
+      fireEvent.dragStart(el, {
+        dataTransfer: { setData: (k: string, v: string) => (data[k] = v) },
+      });
+      return data;
+    };
+    const attached = (el: HTMLElement) =>
+      JSON.parse(dragged(el)["application/x-agenthub-attach"] ?? "[]") as { path: string }[];
+    expect(attached(screen.getByRole("button", { name: "XLSX: Progress report" }))).toEqual([
+      { path: "@/w/out/Progress report.xlsx", name: "Progress report.xlsx" },
+    ]);
+    expect(attached(screen.getByTitle(/a\.ts, /)).map((a) => a.path)).toEqual([
+      "@/w/src/a.ts",
+      "@/w/src/b.ts",
+      "@/w/src/c.ts",
+    ]);
+    // An upload goes as the composer attaches one: its bare path.
+    expect(attached(screen.getByTitle("Uploads: minutes.xlsx"))[0]!.path).toBe(outline.uploads[0]);
+    expect(dragged(screen.getByTitle("Skills: xlsx"))["application/x-agenthub-skill"]).toBe("xlsx");
+  });
+
+  it("hides progress and the used section when there is none", () => {
+    render(
+      <MemoryRouter>
+        <ChatOutline
+          outline={{
+            ...outline,
+            progress: [],
+            files: [],
+            uploads: [],
+            memory: [],
+            skills: [],
+            mcp: [],
+          }}
+          onClose={() => {}}
+          onOpenFile={() => {}}
+          onOpenList={() => {}}
+        />
+      </MemoryRouter>
+    );
+    expect(screen.queryByText("Progress")).toBeNull();
+    expect(screen.queryByText("Used in this session")).toBeNull();
+    expect(screen.getByRole("button", { name: "Hide side panel" })).toBeTruthy();
+  });
+});

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

@@ -7,13 +7,13 @@
  */
 
 import { describe, it, expect, vi, beforeEach } from "vitest";
-import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { act, 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";
-import { __resetChatUi } from "../../../lib/chatUi";
+import { VIEWS_KEY, __resetChatUi, saveChatUi, setSessionChat } from "../../../lib/chatUi";
 
 vi.mock("../TerminalView", () => ({
   // The exit button stands in for the server's `exit` frame (a double Ctrl+C
@@ -33,7 +33,10 @@ vi.mock("../PaneChat", () => ({
 
 vi.mock("../../../lib/api", () => ({
   api: {
-    me: { prefs: vi.fn().mockResolvedValue({ prefs: {}, onboardedAt: null }) },
+    me: {
+      prefs: vi.fn().mockResolvedValue({ prefs: {}, onboardedAt: null }),
+      savePrefs: vi.fn(),
+    },
     lanes: {
       ensure: vi.fn(),
       action: vi.fn(),
@@ -171,7 +174,41 @@ describe("LaneConsolePane", () => {
     render(<LaneConsolePane {...baseProps()} activeRuns={{ items: [live] }} />);
     expect(await screen.findByTestId("pane-chat")).toHaveAttribute("data-session-id", "s-1");
     expect(screen.getByTestId("terminal-view")).toBeInTheDocument();
-    expect(screen.queryByTestId("pane-view-chat")).toBeNull(); // no per-pane switch
+    __resetChatUi();
+  });
+
+  it("keeps each session's own view: the Chat UI setting is only a new session's default", async () => {
+    vi.mocked(api.me.prefs).mockResolvedValueOnce({
+      prefs: { "agenthub.chatUi": "1" },
+      onboardedAt: null,
+    });
+    __resetChatUi();
+    const live = {
+      id: "agenthub-lane-1",
+      laneId: 1,
+      status: "running" as const,
+      cwd: "/workspace/a",
+      model: null,
+      permissionMode: null,
+      effort: null,
+      resumeSessionId: null,
+      sessionId: "s-1",
+      startedAt: null,
+      promptPreview: null,
+      tool: "claude" as const,
+    };
+    render(<LaneConsolePane {...baseProps()} activeRuns={{ items: [live] }} />);
+    expect(await screen.findByTestId("pane-chat")).toBeInTheDocument();
+    // Seen once, the session keeps chat: turning the default off leaves it alone.
+    await waitFor(() =>
+      expect(JSON.parse(localStorage.getItem(VIEWS_KEY) || "{}")).toEqual({ "s-1": true })
+    );
+    vi.mocked(api.me.savePrefs).mockResolvedValueOnce({ prefs: {}, onboardedAt: null });
+    await act(() => saveChatUi(false));
+    expect(screen.getByTestId("pane-chat")).toBeInTheDocument();
+    // Its own toggle switches it.
+    act(() => setSessionChat("s-1", false));
+    expect(screen.queryByTestId("pane-chat")).toBeNull();
     __resetChatUi();
   });
 

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

@@ -0,0 +1,336 @@
+/**
+ * @file PaneChat.test.tsx
+ * @description The Chat view's controls: the `+` menu (Upload, Skills, Plugins
+ * → a plugin's skills, each inserted as `/<name>`), the Model/Effort chip typed
+ * into the pane as `/model` / `/effort`, and the permission mode read off the
+ * pane and stepped by the server — none of them for a Codex pane; and the
+ * activity panel, collapsed into a file button with the output count, whose
+ * files open a preview in its place; a file in a turn's "Edited N files" card
+ * opens in the Workspace's Changes panel when it is in the pane's folder; and
+ * Stop in Send's place while the main agent works, pressing Esc in the pane.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { PaneChat } from "../PaneChat";
+import { api } from "../../../lib/api";
+import { interruptRun, submitToRun } from "../../../lib/panePaste";
+import { OPEN_IN_CHANGES_EVENT } from "../../../lib/openInChanges";
+
+vi.mock("../../conversation/ConversationView", () => ({
+  // Stands in for a turn's "Edited N files" card: a click names a file.
+  ConversationView: ({ onOpenFile }: { onOpenFile?: (path: string) => void }) => (
+    <div data-testid="conversation">
+      <button data-testid="edited-in" onClick={() => onOpenFile?.("/w/src/a.ts")} />
+      <button data-testid="edited-out" onClick={() => onOpenFile?.("/elsewhere/b.ts")} />
+    </div>
+  ),
+}));
+vi.mock("../../../lib/panePaste", () => ({
+  submitToRun: vi.fn(() => true),
+  interruptRun: vi.fn(() => true),
+}));
+vi.mock("../../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>();
+  const r = (value: unknown) => vi.fn().mockResolvedValue(value);
+  return {
+    ...actual,
+    api: {
+      agents: { list: r({ agents: [] }) },
+      aiTools: {
+        models: r({
+          flag: true,
+          models: [
+            { id: "opus", label: "Opus" },
+            { id: "sonnet", label: "Sonnet" },
+          ],
+          defaultModel: null,
+        }),
+      },
+      run: {
+        files: r({ items: [] }),
+        dropFile: r({ path: "/tmp/agenthub-drops-1/a.png" }),
+        permissionMode: r({ mode: "acceptEdits" }),
+        setPermissionMode: r({ mode: "plan" }),
+      },
+      sessions: {
+        outline: r({
+          progress: [],
+          outputs: ["/w/notes.md", "/w/report.xlsx"],
+          files: [],
+          uploads: [],
+          memory: [],
+          skills: [],
+          mcp: [],
+        }),
+      },
+      lanes: {
+        gitFile: r({
+          available: true,
+          path: "notes.md",
+          rev: "work",
+          binary: false,
+          truncated: false,
+          lines: ["# Notes", "", "hello"],
+        }),
+        gitRawUrl: () => "",
+      },
+      ccConfig: {
+        commands: r({ items: [] }),
+        skills: r({
+          items: [{ scope: "user", name: "morning", frontmatter: { description: "Plan the day" } }],
+        }),
+        plugins: r({
+          plugins: [
+            {
+              name: "doox",
+              enabled: true,
+              contributes: {
+                items: {
+                  skills: [{ name: "plan-consolidation", description: "Merge plans" }],
+                  commands: [],
+                },
+              },
+            },
+            {
+              name: "off",
+              enabled: false,
+              contributes: { items: { skills: [{ name: "x" }], commands: [] } },
+            },
+          ],
+        }),
+      },
+    },
+  };
+});
+
+const RUN = {
+  id: "agenthub-lane-1",
+  tool: "claude" as "claude" | "codex",
+  model: "opus",
+  effort: "high" as const,
+  permissionMode: "auto" as const,
+};
+
+function renderChat(run: Partial<typeof RUN> = {}) {
+  return render(
+    <MemoryRouter>
+      <PaneChat run={{ ...RUN, ...run }} sessionId="s1" cwd="/w" />
+    </MemoryRouter>
+  );
+}
+
+beforeEach(() => {
+  vi.mocked(submitToRun).mockClear();
+  // A prompt typed in one test is a saved draft in the next (`lib/chatDraft`).
+  localStorage.removeItem("agenthub.chat.draft.s1");
+});
+
+describe("PaneChat — the + menu", () => {
+  it("puts a skill, or a plugin's skill, at the front of the message", async () => {
+    renderChat();
+    const box = screen.getByPlaceholderText("Write a message…") as HTMLTextAreaElement;
+    fireEvent.change(box, { target: { value: "today" } });
+
+    fireEvent.click(screen.getByTestId("chat-add"));
+    fireEvent.click(screen.getByTestId("chat-add-skills"));
+    fireEvent.click(await screen.findByTestId("chat-add-skill-morning"));
+    expect(box.value).toBe("/morning today");
+
+    fireEvent.click(screen.getByTestId("chat-add"));
+    fireEvent.click(screen.getByTestId("chat-add-plugins"));
+    expect(screen.queryByTestId("chat-add-plugin-off")).toBeNull(); // disabled plugin
+    fireEvent.click(await screen.findByTestId("chat-add-plugin-doox"));
+    fireEvent.click(screen.getByTestId("chat-add-skill-doox:plan-consolidation"));
+    expect(box.value).toBe("/doox:plan-consolidation /morning today");
+  });
+
+  it("Upload opens the prompt box's file picker", () => {
+    renderChat();
+    const input = screen.getByTestId("prompt-file-input") as HTMLInputElement;
+    const clicked = vi.spyOn(input, "click");
+    fireEvent.click(screen.getByTestId("chat-add"));
+    fireEvent.click(screen.getByTestId("chat-add-upload"));
+    expect(clicked).toHaveBeenCalled();
+  });
+});
+
+describe("PaneChat — Stop", () => {
+  it("replaces Send while the main agent works and the box is empty, and presses Esc", async () => {
+    vi.mocked(api.agents.list).mockResolvedValueOnce({
+      agents: [{ type: "main", status: "working" }],
+    } as never);
+    renderChat();
+    fireEvent.click(await screen.findByTestId("pane-chat-stop"));
+    expect(interruptRun).toHaveBeenCalledWith("agenthub-lane-1");
+    expect(screen.queryByTestId("pane-chat-stop")).toBeNull();
+    expect(screen.getByTestId("pane-chat-send")).toBeInTheDocument();
+  });
+
+  it("drops Stop once the turn ended even when no live update says so", async () => {
+    // A missed agent_updated (another dashboard on the same database got the
+    // hook, or the socket dropped): the poll while working catches it.
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    try {
+      vi.mocked(api.agents.list).mockResolvedValueOnce({
+        agents: [{ type: "main", status: "working" }],
+      } as never);
+      renderChat();
+      expect(await screen.findByTestId("pane-chat-stop")).toBeInTheDocument();
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(5000);
+      });
+      await waitFor(() => expect(screen.queryByTestId("pane-chat-stop")).toBeNull());
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("keeps Send for a session at rest", async () => {
+    // With session_id the server answers EVERY agent of the session (its
+    // status filter does not apply): the main agent is there, waiting.
+    vi.mocked(api.agents.list).mockResolvedValueOnce({
+      agents: [{ type: "main", status: "waiting" }],
+    } as never);
+    renderChat();
+    await waitFor(() => expect(api.agents.list).toHaveBeenCalled());
+    expect(screen.queryByTestId("pane-chat-stop")).toBeNull();
+  });
+});
+
+describe("PaneChat — model, effort and permission mode", () => {
+  it("types /model into the pane", async () => {
+    renderChat();
+    fireEvent.click(screen.getByRole("button", { name: /Opus/ }));
+    fireEvent.click(await screen.findByRole("menuitemradio", { name: /Sonnet/ }));
+    expect(submitToRun).toHaveBeenCalledWith("agenthub-lane-1", "/model sonnet");
+  });
+
+  it("shows the mode the pane shows, and asks the server to step it", async () => {
+    renderChat();
+    const chip = byId("pane-chat-mode");
+    await waitFor(() => expect(chip()).toHaveTextContent("Accept edits"));
+    fireEvent.click(chip().querySelector("button")!);
+    fireEvent.click(await screen.findByRole("option", { name: /Plan/ }));
+    await waitFor(() =>
+      expect(api.run.setPermissionMode).toHaveBeenCalledWith("agenthub-lane-1", "plan")
+    );
+    await waitFor(() => expect(chip()).toHaveTextContent("Plan"));
+  });
+
+  it("a Codex pane gets the + menu's Upload only — no skills, model or mode", () => {
+    renderChat({ tool: "codex" });
+    expect(screen.queryByTestId("pane-chat-mode")).toBeNull();
+    expect(screen.queryByRole("button", { name: /Opus/ })).toBeNull();
+    fireEvent.click(screen.getByTestId("chat-add"));
+    expect(screen.getByTestId("chat-add-upload")).toBeTruthy();
+    expect(screen.queryByTestId("chat-add-skills")).toBeNull();
+  });
+});
+
+const byId = (id: string) => () => screen.getByTestId(id);
+
+describe("PaneChat — the activity panel", () => {
+  it("opens from the file button, previews a file, and closes back to the panel", async () => {
+    render(
+      <MemoryRouter>
+        <PaneChat run={RUN} sessionId="s1" cwd="/w" laneId={7} laneCwd="/w" />
+      </MemoryRouter>
+    );
+    expect(screen.queryByTestId("chat-outline")).toBeNull();
+    const show = screen.getByTestId("chat-outline-show");
+    await waitFor(() => expect(show.textContent).toBe("2"));
+
+    fireEvent.click(show);
+    fireEvent.click(screen.getByRole("button", { name: "MD: notes" }));
+    expect(screen.queryByTestId("chat-outline")).toBeNull();
+    await screen.findByTestId("markdown-preview");
+    expect(vi.mocked(api.lanes.gitFile)).toHaveBeenCalledWith(7, "notes.md");
+
+    fireEvent.click(screen.getByRole("button", { name: "Close" }));
+    expect(screen.getByTestId("chat-outline")).toBeTruthy();
+  });
+
+  it("starts open in a pane spanning the grid, and follows the pane when it is split", () => {
+    const pane = (panelOpen: boolean) => (
+      <MemoryRouter>
+        <PaneChat run={RUN} sessionId="s1" cwd="/w" panelOpen={panelOpen} />
+      </MemoryRouter>
+    );
+    const { rerender } = render(pane(true));
+    expect(screen.getByTestId("chat-outline")).toBeTruthy();
+    rerender(pane(false));
+    expect(screen.queryByTestId("chat-outline")).toBeNull();
+    expect(screen.getByTestId("chat-outline-show")).toBeTruthy();
+  });
+
+  it("resizes from its splitter and remembers the width", () => {
+    localStorage.removeItem("agenthub.chat.panelWidth");
+    render(
+      <MemoryRouter>
+        <PaneChat run={RUN} sessionId="s1" cwd="/w" panelOpen />
+      </MemoryRouter>
+    );
+    const splitter = screen.getByRole("separator", { name: "Resize side panel" });
+    expect(splitter.getAttribute("aria-valuenow")).toBe("70");
+    fireEvent.keyDown(splitter, { key: "ArrowLeft" });
+    expect(localStorage.getItem("agenthub.chat.panelWidth")).toBe("0.35");
+    expect(splitter.getAttribute("aria-valuenow")).toBe("65");
+  });
+});
+
+describe("PaneChat — an edited file", () => {
+  it("opens in the Changes panel when it is in the pane's folder, else in its own preview", async () => {
+    const seen: unknown[] = [];
+    const listen = (e: Event) => seen.push((e as CustomEvent).detail);
+    window.addEventListener(OPEN_IN_CHANGES_EVENT, listen);
+    render(
+      <MemoryRouter>
+        <PaneChat run={RUN} sessionId="s1" cwd="/w" laneId={7} laneCwd="/w" />
+      </MemoryRouter>
+    );
+    fireEvent.click(screen.getByTestId("edited-in"));
+    expect(seen).toEqual([{ laneId: 7, path: "src/a.ts" }]);
+    expect(screen.queryByTestId("chat-file-preview")).toBeNull();
+    // Outside the folder the Changes panel cannot show it: the chat's preview does.
+    fireEvent.click(screen.getByTestId("edited-out"));
+    expect(seen).toHaveLength(1);
+    expect(await screen.findByTestId("chat-file-preview")).toBeInTheDocument();
+    window.removeEventListener(OPEN_IN_CHANGES_EVENT, listen);
+  });
+});
+
+describe("PaneChat — the unsent prompt", () => {
+  it("keeps the half-typed prompt and its attachments when the chat unmounts (terminal view, reload)", async () => {
+    const first = renderChat();
+    fireEvent.change(screen.getByPlaceholderText("Write a message…"), {
+      target: { value: "half typed" },
+    });
+    // A dropped attachment, as a Files row or an "Edited N files" row brings it.
+    const drop = new Event("drop", { bubbles: true, cancelable: true });
+    Object.defineProperty(drop, "dataTransfer", {
+      value: {
+        types: ["application/x-agenthub-attach"],
+        getData: (t: string) =>
+          t === "application/x-agenthub-attach"
+            ? JSON.stringify({ path: "@src/a.ts", name: "a.ts" })
+            : "",
+        files: [],
+      },
+    });
+    act(() => {
+      screen.getByPlaceholderText("Write a message…").dispatchEvent(drop);
+    });
+    expect(await screen.findByText("a.ts")).toBeInTheDocument();
+    first.unmount();
+
+    renderChat();
+    expect(screen.getByPlaceholderText("Write a message…")).toHaveValue("half typed");
+    expect(screen.getByText("a.ts")).toBeInTheDocument();
+    fireEvent.click(screen.getByTestId("pane-chat-send"));
+    expect(submitToRun).toHaveBeenCalledWith("agenthub-lane-1", "half typed @src/a.ts");
+    await waitFor(() => expect(localStorage.getItem("agenthub.chat.draft.s1")).toBeNull());
+  });
+});

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

@@ -3,7 +3,10 @@
  * @description The run-form pieces that outlived the pane's run form:
  * `PromptEditor`'s `/` and `@` autocomplete (Enter picks while the list is
  * open, `/` only where slash commands apply), Shift/Alt+Enter newlines, a
- * pasted image shown as a thumbnail and sent as its saved path, and `ModelPicker` — a tool's own
+ * pasted image shown as a thumbnail and sent as its saved path (and
+ * remembered as a recent upload), a Files panel row dropped as an `@path`
+ * chip, a composer
+ * (`bare`) box growing with its text up to a cap, and `ModelPicker` — a tool's own
  * list from the server, a fixed list (an AI Proxy's models) when given one,
  * and Custom…, which is a sentinel, never a model id — and `ModelMenu`, the
  * same list as one chip: aliases up front, pinned versions under More models,
@@ -13,17 +16,25 @@
  */
 
 import { useState } from "react";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { createEvent, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import i18n from "i18next";
 import {
   ModelMenu,
   ModelPicker,
+  PASTE_AS_FILE_CHARS,
   PromptEditor,
   promptWithImages,
   type PromptImage,
 } from "../RunSetup";
 import { api } from "../../../lib/api";
+import {
+  ATTACH_MIME,
+  dragAttachments,
+  dragProjectPath,
+  dragSkill,
+  recentUploads,
+} from "../../../lib/promptAttach";
 
 vi.mock("../../../lib/api", async (importOriginal) => {
   const actual = await importOriginal<Record<string, unknown>>();
@@ -158,6 +169,34 @@ describe("PromptEditor — / and @ suggestions", () => {
   });
 });
 
+describe("PromptEditor — a composer grows with its text", () => {
+  it("takes the height its text needs, capped by max-h, and only when bare", () => {
+    const tall = vi
+      .spyOn(HTMLTextAreaElement.prototype, "scrollHeight", "get")
+      .mockReturnValue(180);
+    const props = {
+      placeholder: "Ask anything…",
+      slash: false,
+      fileCwd: "/Users/tester",
+      images: [],
+      onImagesChange: () => {},
+      onChange: () => {},
+      onSubmit: () => {},
+    };
+    const view = render(<PromptEditor {...props} value={"a\nb\nc\nd\ne"} bare />);
+    expect(box().style.height).toBe("180px");
+    expect(box().className).toContain("max-h-[40vh]");
+    tall.mockReturnValue(60);
+    view.rerender(<PromptEditor {...props} value="a" bare />);
+    expect(box().style.height).toBe("60px");
+    view.unmount();
+    // The framed editor keeps its fixed rows.
+    render(<PromptEditor {...props} value={"a\nb\nc"} />);
+    expect(box().style.height).toBe("");
+    tall.mockRestore();
+  });
+});
+
 describe("PromptEditor — newlines and images", () => {
   it("Alt+Enter inserts a newline and does not send", () => {
     const spies = renderEditor("ab");
@@ -186,6 +225,7 @@ describe("PromptEditor — newlines and images", () => {
             fileCwd="/Users/tester"
             images={images}
             onImagesChange={setImages}
+            lane={7}
           />
           <output data-testid="sent">{promptWithImages("see", images)}</output>
         </>
@@ -195,12 +235,14 @@ describe("PromptEditor — newlines and images", () => {
     const img = new File(["x"], "shot.png", { type: "image/png" });
     fireEvent.paste(box(), { clipboardData: { files: [img] } });
     const thumb = await screen.findByRole("button", { name: "shot.png" });
-    expect(api.run.dropFile).toHaveBeenCalledWith(img);
+    // Saved where workspace 7's panes can read it.
+    expect(api.run.dropFile).toHaveBeenCalledWith(img, 7);
     // The path is not typed into the prompt; it goes with it on send.
     expect(screen.getByTestId("sent").textContent).toBe("see /tmp/agenthub-drops-1/a.png");
 
     fireEvent.click(thumb);
-    expect(screen.getByRole("dialog", { name: "shot.png" })).toBeTruthy();
+    // On the page, not in the composer's layer: nothing stacked over a pane covers it.
+    expect(screen.getByRole("dialog", { name: "shot.png" }).parentElement).toBe(document.body);
     fireEvent.keyDown(document, { key: "Escape" });
     expect(screen.queryByRole("dialog")).toBeNull();
 
@@ -210,6 +252,38 @@ describe("PromptEditor — newlines and images", () => {
     expect(screen.getByTestId("sent").textContent).toBe("see");
   });
 
+  it("a composer's Upload opens a picker whose files attach like a paste", async () => {
+    const pick: { current: (() => void) | null } = { current: null };
+    function Harness() {
+      const [images, setImages] = useState<PromptImage[]>([]);
+      return (
+        <>
+          <PromptEditor
+            value=""
+            onChange={() => {}}
+            onSubmit={() => {}}
+            placeholder="Ask anything…"
+            slash
+            fileCwd="/Users/tester"
+            images={images}
+            onImagesChange={setImages}
+            pickFiles={pick}
+          />
+          <output data-testid="sent">{promptWithImages("", images)}</output>
+        </>
+      );
+    }
+    render(<Harness />);
+    const input = screen.getByTestId("prompt-file-input") as HTMLInputElement;
+    const clicked = vi.spyOn(input, "click");
+    pick.current?.();
+    expect(clicked).toHaveBeenCalled();
+    const doc = new File(["x"], "spec.pdf", { type: "application/pdf" });
+    fireEvent.change(input, { target: { files: [doc] } });
+    expect(api.run.dropFile).toHaveBeenCalledWith(doc, undefined); // no workspace named
+    expect(await screen.findByText("spec.pdf")).toBeTruthy();
+  });
+
   it("attaches a dropped non-image file as a name chip sent by its path", async () => {
     vi.mocked(api.run.dropFile).mockResolvedValueOnce({ path: "/tmp/agenthub-drops-1/b-spec.pdf" });
     function Harness() {
@@ -235,13 +309,198 @@ describe("PromptEditor — newlines and images", () => {
     fireEvent.drop(box(), { dataTransfer: { files: [pdf] } });
     expect(await screen.findByText("spec.pdf")).toBeTruthy();
     expect(screen.getByTestId("sent").textContent).toBe("read /tmp/agenthub-drops-1/b-spec.pdf");
+    // Remembered for the + menu's Recent uploads.
+    expect(recentUploads()).toContainEqual({
+      path: "/tmp/agenthub-drops-1/b-spec.pdf",
+      name: "spec.pdf",
+    });
+  });
+
+  it("attaches a Files panel row dropped on it as an @path chip, once", () => {
+    function Harness() {
+      const [images, setImages] = useState<PromptImage[]>([]);
+      return (
+        <>
+          <PromptEditor
+            value="read"
+            onChange={() => {}}
+            onSubmit={() => {}}
+            placeholder="Ask anything…"
+            slash
+            fileCwd="/Users/tester"
+            images={images}
+            onImagesChange={setImages}
+          />
+          <output data-testid="sent">{promptWithImages("read", images)}</output>
+        </>
+      );
+    }
+    render(<Harness />);
+    const data: Record<string, string> = {};
+    const dataTransfer = {
+      setData: (k: string, v: string) => (data[k] = v),
+      getData: (k: string) => data[k] ?? "",
+      get types() {
+        return Object.keys(data);
+      },
+      files: [],
+    };
+    // What a Files panel row's onDragStart puts on the drag.
+    dragProjectPath({ dataTransfer } as unknown as React.DragEvent, "src/lib/");
+    fireEvent.drop(box(), { dataTransfer });
+    fireEvent.drop(box(), { dataTransfer });
+    expect(screen.getByText("lib/")).toBeTruthy();
+    expect(api.run.dropFile).not.toHaveBeenCalled();
+    expect(screen.getByTestId("sent").textContent).toBe("read @src/lib/");
+  });
+
+  it("takes a drop anywhere on a bare editor's box; an extra folder's row comes absolute", () => {
+    function Harness() {
+      const [images, setImages] = useState<PromptImage[]>([]);
+      return (
+        <>
+          <div>
+            <PromptEditor
+              bare
+              slash={false}
+              value="read"
+              onChange={() => {}}
+              onSubmit={() => {}}
+              placeholder="Ask anything…"
+              fileCwd="/Users/tester"
+              images={images}
+              onImagesChange={setImages}
+            />
+            <div data-testid="toolbar" />
+          </div>
+          <section data-drag-root="/Users/tester/extra/">
+            <span data-testid="row" />
+          </section>
+          <output data-testid="sent">{promptWithImages("read", images)}</output>
+        </>
+      );
+    }
+    render(<Harness />);
+    const data: Record<string, string> = {};
+    const dataTransfer = {
+      setData: (k: string, v: string) => (data[k] = v),
+      getData: (k: string) => data[k] ?? "",
+      get types() {
+        return Object.keys(data);
+      },
+      files: [],
+    };
+    dragProjectPath(
+      { dataTransfer, currentTarget: screen.getByTestId("row") } as unknown as React.DragEvent,
+      "notes.md"
+    );
+    expect(data["text/plain"]).toBe("/Users/tester/extra/notes.md");
+    const over = createEvent.dragOver(screen.getByTestId("toolbar"), { dataTransfer });
+    fireEvent(screen.getByTestId("toolbar"), over);
+    expect(over.defaultPrevented).toBe(true);
+    fireEvent.drop(screen.getByTestId("toolbar"), { dataTransfer });
+    expect(screen.getByTestId("sent").textContent).toBe("read @/Users/tester/extra/notes.md");
+  });
+
+  it("takes a drop anywhere inside its data-prompt-drop screen, not only on the box", () => {
+    function Harness() {
+      const [images, setImages] = useState<PromptImage[]>([]);
+      return (
+        <div data-prompt-drop>
+          <div data-testid="transcript" />
+          <PromptEditor
+            value="see"
+            onChange={() => {}}
+            onSubmit={() => {}}
+            placeholder="Ask anything…"
+            slash={false}
+            fileCwd="/Users/tester"
+            images={images}
+            onImagesChange={setImages}
+          />
+          <output data-testid="sent">{promptWithImages("see", images)}</output>
+        </div>
+      );
+    }
+    render(<Harness />);
+    const dataTransfer = {
+      getData: (k: string) =>
+        k === ATTACH_MIME ? JSON.stringify([{ path: "@/w/a.ts", name: "a.ts" }]) : "",
+      types: [ATTACH_MIME],
+      files: [],
+    };
+    const over = createEvent.dragOver(screen.getByTestId("transcript"), { dataTransfer });
+    fireEvent(screen.getByTestId("transcript"), over);
+    expect(over.defaultPrevented).toBe(true);
+    fireEvent.drop(screen.getByTestId("transcript"), { dataTransfer });
+    expect(screen.getByTestId("sent").textContent).toBe("see @/w/a.ts");
+  });
+
+  it("takes an activity panel's drag: a group of files as chips, a skill as the /command", () => {
+    function Harness() {
+      const [value, setValue] = useState("check it");
+      const [images, setImages] = useState<PromptImage[]>([]);
+      return (
+        <>
+          <PromptEditor
+            slash={false}
+            value={value}
+            onChange={setValue}
+            onSubmit={() => {}}
+            placeholder="Ask anything…"
+            fileCwd="/Users/tester"
+            images={images}
+            onImagesChange={setImages}
+          />
+          <output data-testid="sent">{promptWithImages(value, images)}</output>
+        </>
+      );
+    }
+    render(<Harness />);
+    const drag = (start: (e: React.DragEvent) => void) => {
+      const data: Record<string, string> = {};
+      const dataTransfer = {
+        setData: (k: string, v: string) => (data[k] = v),
+        getData: (k: string) => data[k] ?? "",
+        get types() {
+          return Object.keys(data);
+        },
+        files: [],
+      };
+      start({ dataTransfer } as unknown as React.DragEvent);
+      fireEvent.drop(box(), { dataTransfer });
+    };
+    drag((e) =>
+      dragAttachments(e, [
+        { path: "@/a/x.md", name: "x.md" },
+        { path: "/d/drops/0123456789abcdef.png", name: "y.png" },
+      ])
+    );
+    drag((e) => dragSkill(e, "ponytail:ponytail-help"));
+    expect(screen.getByTestId("sent").textContent).toBe(
+      "/ponytail:ponytail-help check it @/a/x.md /d/drops/0123456789abcdef.png"
+    );
   });
 
   it("leaves a text paste to the textarea", () => {
     renderEditor("");
-    fireEvent.paste(box(), { clipboardData: { files: [] } });
+    fireEvent.paste(box(), {
+      clipboardData: { files: [], getData: () => "a short note" },
+    });
     expect(api.run.dropFile).not.toHaveBeenCalled();
   });
+
+  it("attaches a very long text paste as a text file, like a pasted file (#68)", async () => {
+    renderEditor("");
+    const long = "x".repeat(PASTE_AS_FILE_CHARS + 1);
+    fireEvent.paste(box(), { clipboardData: { files: [], getData: () => long } });
+    await waitFor(() => expect(api.run.dropFile).toHaveBeenCalledTimes(1));
+    const file = vi.mocked(api.run.dropFile).mock.calls[0]![0] as File;
+    expect(file.name).toBe("pasted-text.txt");
+    expect(file.type).toBe("text/plain");
+    expect(file.size).toBe(long.length); // the whole paste, nothing cut
+    expect(box()).toHaveValue(""); // not typed into the box
+  });
 });
 
 describe("ModelPicker", () => {

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

@@ -23,7 +23,7 @@ const focusMock = vi.fn();
 const pasteMock = vi.fn();
 const dropFileMock = vi.fn();
 vi.mock("../../../lib/api", () => ({
-  api: { run: { dropFile: (f: File) => dropFileMock(f) } },
+  api: { run: { dropFile: (f: File, lane?: string) => dropFileMock(f, lane) } },
 }));
 const loadAddonMock = vi.fn();
 // Mutable stand-ins for the two live terminal facts the wheel handler reads.
@@ -481,7 +481,8 @@ describe("TerminalView", () => {
     await waitFor(() =>
       expect(pasteMock).toHaveBeenCalledWith("/tmp/agenthub-drops-1/ab-shot.png ")
     );
-    expect(dropFileMock).toHaveBeenCalledWith(img);
+    // The pane's run id: saved where that pane can read it.
+    expect(dropFileMock).toHaveBeenCalledWith(img, "r1");
     await waitFor(() => expect(screen.queryByTestId("terminal-drop")).toBeNull());
   });
 

client/src/components/settings/AppearanceSettings.tsx

@@ -1,26 +1,31 @@
 /**
  * @file AppearanceSettings.tsx
- * @description Settings → Appearance (`/settings/appearance`): the interface language, the
+ * @description Settings → Appearance (`/settings/appearance`): the per-user
+ * Chat UI default (`ChatUiSettings`, `#chat-ui`), whether the session view's
+ * tabs hold every workspace's sessions (`lib/workspaceTabs.ts`,
+ * `#workspace-tabs`), the interface language, the
  * terminal font (`lib/terminalFont.ts`, with a preview line), the
  * Dark / Light / System mode switch and one named-theme picker per mode, and the
- * per-user Chat UI switch (`ChatUiSettings`, `#chat-ui`), the
  * corner pet (`PetSettings`, deep-linked as `#pet`) — the old General and Pet
  * pages redirect here. Theme state is in `hooks/useTheme.ts`, palettes in
  * `index.css`. Each card's swatch re-scopes the theme's CSS variables on its
  * own element (`dark` class or `data-mode`, plus `data-theme`), so the preview
  * is painted by the same tokens as the app — no hex is duplicated here.
  * **Reset to defaults** (after a confirm) returns to Dark with both stock themes.
+ * **Run setup again** reopens the first-run wizard (`components/onboarding`).
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Monitor, Moon, RotateCcw, Sun } from "lucide-react";
-import { SettingsRow, SettingsSection, SettingsSegmented } from "./SettingsRow";
+import { SettingsRow, SettingsSection, SettingsSegmented, SettingsSwitchRow } from "./SettingsRow";
 import { PetSettings } from "./PetSettings";
 import { ChatUiSettings } from "./ChatUiSettings";
+import { Select } from "../Select";
 import { THEMES, useTheme, type Theme, type ThemeMode } from "../../hooks/useTheme";
 import { confirmDialog } from "../../lib/confirm";
+import { resetOnboarding } from "../../lib/userPrefs";
 import { toast } from "../../lib/toast";
 import {
   TERMINAL_FONTS,
@@ -28,8 +33,9 @@ import {
   writeTerminalFont,
   type TerminalFont,
 } from "../../lib/terminalFont";
+import { readAllTabs, writeAllTabs } from "../../lib/workspaceTabs";
 
-const THEME_LABELS: Record<string, string> = {
+export const THEME_LABELS: Record<string, string> = {
   darcula: "Darcula",
   "apple-dark": "Apple Dark",
   "apple-light": "Apple Light",
@@ -44,7 +50,7 @@ const MODES: { mode: ThemeMode; Icon: typeof Moon }[] = [
   { mode: "system", Icon: Monitor },
 ];
 
-function Swatch({ mode, name }: { mode: Theme; name: string }) {
+export function Swatch({ mode, name }: { mode: Theme; name: string }) {
   return (
     <div
       aria-hidden
@@ -76,6 +82,7 @@ export function AppearanceSettings() {
   const { t, i18n } = useTranslation("settings");
   const { mode, theme, themeFor, setMode, setThemeFor } = useTheme();
   const [termFont, setTermFont] = useState(readTerminalFont);
+  const [allTabs, setAllTabs] = useState(readAllTabs);
   const pickTermFont = (font: TerminalFont) => {
     writeTerminalFont(font);
     setTermFont(font);
@@ -96,6 +103,24 @@ export function AppearanceSettings() {
 
   return (
     <div className="space-y-6">
+      <ChatUiSettings />
+
+      <SettingsSection
+        id="workspace-tabs"
+        title={t("workspaceTabs.title")}
+        description={t("workspaceTabs.description")}
+      >
+        <SettingsSwitchRow
+          label={t("workspaceTabs.label")}
+          description={t("workspaceTabs.labelDesc")}
+          checked={allTabs}
+          onChange={(on) => {
+            writeAllTabs(on);
+            setAllTabs(on);
+          }}
+        />
+      </SettingsSection>
+
       <SettingsSection
         id="language"
         title={t("language.title")}
@@ -126,8 +151,9 @@ export function AppearanceSettings() {
           label={t("terminalFont.label")}
           description={termFont === "system" ? t("terminalFont.systemNote") : undefined}
           control={
-            <SettingsSegmented
-              ariaLabel={t("terminalFont.title")}
+            // A dropdown: five font names overflow a segmented row.
+            <Select<TerminalFont>
+              label={t("terminalFont.title")}
               value={termFont}
               onChange={pickTermFont}
               options={(Object.keys(TERMINAL_FONTS) as TerminalFont[]).map((f) => ({
@@ -148,8 +174,6 @@ export function AppearanceSettings() {
         </p>
       </SettingsSection>
 
-      <ChatUiSettings />
-
       <section id="theme" className="card p-5 space-y-5 scroll-mt-24">
         <h3 className="text-sm font-semibold text-fg-primary">{t("appearance.theme")}</h3>
         <SettingsRow
@@ -221,6 +245,26 @@ export function AppearanceSettings() {
         </div>
         <PetSettings />
       </section>
+
+      <SettingsSection
+        id="setup"
+        title={t("onboarding:rerun.label")}
+        description={t("onboarding:rerun.description")}
+      >
+        <SettingsRow
+          label={t("onboarding:rerun.label")}
+          control={
+            <button
+              type="button"
+              onClick={resetOnboarding}
+              data-testid="rerun-setup"
+              className="btn-ghost border border-border text-xs"
+            >
+              {t("onboarding:rerun.button")}
+            </button>
+          }
+        />
+      </SettingsSection>
     </div>
   );
 }

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

@@ -88,16 +88,17 @@ describe("AppearanceSettings", () => {
   it("picks the terminal font, JetBrains Mono by default, and warns on System", async () => {
     const user = userEvent.setup();
     render(<AppearanceSettings />);
-    const group = screen.getByRole("radiogroup", { name: "Terminal font" });
-    expect(within(group).getByRole("radio", { name: "JetBrains Mono" })).toHaveAttribute(
-      "aria-checked",
-      "true"
-    );
-    await user.click(within(group).getByRole("radio", { name: "Maple Mono (rounded)" }));
+    const trigger = screen.getByRole("button", { name: /Terminal font/ });
+    expect(trigger).toHaveTextContent("JetBrains Mono");
+    const pick = async (name: string) => {
+      await user.click(screen.getByRole("button", { name: /Terminal font/ }));
+      await user.click(screen.getByRole("option", { name }));
+    };
+    await pick("Maple Mono (rounded)");
     expect(localStorage.getItem("agenthub.terminal.font")).toBe("maple");
     expect(screen.getByTestId("terminal-font-preview").style.fontFamily).toContain("Maple Mono");
     expect(screen.queryByText(/may lack some Vietnamese letters/)).toBeNull();
-    await user.click(within(group).getByRole("radio", { name: "System font" }));
+    await pick("System font");
     expect(localStorage.getItem("agenthub.terminal.font")).toBe("system");
     expect(screen.getByText(/may lack some Vietnamese letters/)).toBeInTheDocument();
   });

client/src/hooks/useLanes.ts

@@ -7,7 +7,8 @@
  * frames missed while disconnected are never replayed. The copy is dropped
  * when the last component unmounts, so a fresh mount always reads fresh rows.
  * `useWorkLanes()` is the same list narrowed to the workspaces this user may
- * work in (server mode: an analyst's own), for the Workspace page and tree.
+ * work in (server mode: an analyst's own), for the Workspace page; the sidebar
+ * tree lists them all, other users' read only.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -97,10 +98,10 @@ export function useLanes() {
 }
 
 /**
- * The workspaces this user WORKS in — the Workspace page and its sidebar tree.
+ * The workspaces this user WORKS in — the Workspace page.
  * Server mode: an analyst gets every workspace from the API (to read) but may
  * change only their own, so only those are listed here; other users' work is
- * read on the Sessions, Analytics and Users pages.
+ * read in the sidebar tree (read only), and on Sessions, Analytics and Users.
  */
 export function useWorkLanes() {
   const all = useLanes();

client/src/hooks/useTheme.ts

@@ -7,11 +7,15 @@
  * themselves are CSS-variable blocks in `index.css`. State is never cached in
  * the module — every instance reads storage + `matchMedia` through
  * `useSyncExternalStore`, so the Sidebar and Settings can never disagree, and
- * another tab's change arrives through the `storage` event.
+ * another tab's change arrives through the `storage` event. Every change is also
+ * saved to the account (`/api/me/prefs`, same keys); a sign-in loads it back
+ * through `lib/userPrefs.ts` (`hydrate`), while the login page wears the OS's
+ * light/dark (`applySystemTheme`) because nobody has chosen yet.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
 import { useCallback, useLayoutEffect, useSyncExternalStore } from "react";
+import { api } from "../lib/api";
 
 export type Theme = "dark" | "light";
 export type ThemeMode = Theme | "system";
@@ -19,7 +23,7 @@ export type ThemeMode = Theme | "system";
 /** Named themes per mode, in picker order. `default` is the stock palette. */
 export const THEMES = {
   dark: ["default", "darcula", "apple-dark", "orca-dark"],
-  light: ["default", "apple-light", "canvas", "orca-light"],
+  light: ["default", "canvas", "apple-light", "orca-light"],
 } as const satisfies Record<Theme, readonly string[]>;
 
 const MODE_KEY = "theme";
@@ -35,13 +39,20 @@ function read(key: string): string | null {
   }
 }
 
-function write(key: string, value: string): void {
+function store(key: string, value: string): void {
   try {
     localStorage.setItem(key, value);
   } catch {
     /* ignore quota / disabled storage */
   }
+}
+
+/** A user's own choice: this browser, every reader, and the account. */
+function write(key: string, value: string): void {
+  store(key, value);
   window.dispatchEvent(new Event(CHANGE_EVENT));
+  // This browser keeps it even when the save fails (offline, signed out).
+  api.me.savePrefs({ [key]: value }).catch(() => {});
 }
 
 function systemQuery(): MediaQueryList | undefined {
@@ -86,6 +97,17 @@ function apply(resolved: Theme, name: string): void {
   else root.dataset.theme = name;
 }
 
+/** Paint what this browser stores (index.html's job at page load). */
+export function applyStoredTheme(): void {
+  const [, resolved, dark, light] = getSnapshot().split("|") as [ThemeMode, Theme, string, string];
+  apply(resolved, resolved === "dark" ? dark : light);
+}
+
+/** The login page: the OS's light/dark in the stock palette. */
+export function applySystemTheme(): void {
+  apply(systemQuery()?.matches === false ? "light" : "dark", "default");
+}
+
 /**
  * Read/write the dashboard's appearance.
  * @returns `theme` — the RESOLVED mode (`system` already answered); `mode` — what

client/src/i18n/index.ts

@@ -115,6 +115,7 @@ export const i18nReady = i18n
       "splash",
       "lanes",
       "users",
+      "onboarding",
     ],
     defaultNS: "common",
     interpolation: { escapeValue: false },

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

@@ -186,14 +186,18 @@
     "keep": "Keep editing"
   },
   "auth": {
-    "title": "Sign in to AgentHub",
+    "title": "Welcome back",
+    "subtitle": "Sign in to AgentHub with your account",
     "username": "Username",
     "password": "Password",
+    "showPassword": "Show password",
+    "hidePassword": "Hide password",
     "submit": "Sign in",
     "submitting": "Signing in…",
     "failed": "Wrong username or password",
     "tooMany": "Too many failed attempts — try again in a few minutes",
     "logout": "Sign out",
+    "noAccount": "No account yet? Ask your administrator to create one.",
     "signedInAs": "Signed in as {{name}} ({{role}})"
   },
   "insights": {

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

@@ -48,6 +48,8 @@
   "changes.bin": "bin",
   "changes.binary": "Binary file — not shown.",
   "changes.collapse": "Collapse the changes panel",
+  "changes.closeRepo": "Close repository",
+  "changes.closeOtherRepos": "Close other repositories",
   "changes.collapseAll": "Collapse every file",
   "changes.collapseAllFolders": "Collapse all folders",
   "changes.collapseContext": "Show fewer surrounding lines",
@@ -91,10 +93,8 @@
   "changes.range.work": "Uncommitted",
   "changes.range.workHint": "Working tree vs HEAD — what has been touched and not committed",
   "changes.refresh": "Refresh",
-  "changes.resize": "Resize the changes panel (next: {{size}})",
-  "changes.size.compact": "Narrow",
-  "changes.size.half": "Medium",
   "changes.size.full": "Full screen",
+  "changes.restore": "Restore size",
   "changes.fileCount_one": "{{count}} file",
   "changes.fileCount_other": "{{count}} files",
   "changes.dropEdits": "Discard your unsaved edits to this file?",
@@ -102,6 +102,7 @@
   "changes.title": "Changes",
   "changes.truncated": "Some changes were left out to keep this panel responsive.",
   "changes.unavailable": "This workspace's directory is not a readable git repository.",
+  "changes.unavailableFolder": "This folder is not a readable git repository.",
   "changes.unstage": "Unstage this file",
   "changes.changesView": "Changes",
   "changes.wholeFile": "Whole file",
@@ -134,8 +135,6 @@
   "destructive.reset.survives": "Gitignored files such as node_modules and .env are kept; untracked files are deleted.",
   "destructive.reset.title": "Reset managed worktree?",
   "destructive.warning.no-remote": "No Git remote is configured, so nothing here is backed up remotely. You can still proceed.",
-  "empty.body": "A workspace is one working directory the dashboard follows — its pipeline, sessions and terminal. Click anywhere on this card to add one, or from a terminal:",
-  "empty.title": "No workspaces yet",
   "features.archived": "archived",
   "features.live": "Live",
   "features.viewingArchived": "Viewing archived feature \"{{slug}}\" — the workspace keeps running; this is a read-only snapshot.",
@@ -316,6 +315,10 @@
   "tree.search": "Search workspaces and sessions",
   "tree.toolFilter": "Filter by tool",
   "tree.allTools": "All tools",
+  "tree.ownerYou": "{{name}} (you)",
+  "tree.noOwner": "No owner",
+  "tree.ownerToggle": "Show or hide {{name}}'s workspaces",
+  "tree.readOnly": "{{name}}'s workspace — read only. A session opens its analysis page.",
   "tree.newSession": "New session",
   "tree.noSessions": "No sessions yet",
   "tree.transcriptHint": "No live pane — opens its conversation; a message you send resumes it",
@@ -389,6 +392,8 @@
   "panes.split.bottom": "Split down",
   "panes.full": "A tab holds at most 4 panes",
   "panes.newTerminal": "New terminal",
+  "panes.showChat": "Show as chat",
+  "panes.showTerminal": "Show the terminal",
   "panes.close": "Move to its own tab (the session keeps running)",
   "panes.resize": "Resize panes",
   "tabs.home": "Workspace home",

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

@@ -0,0 +1,95 @@
+{
+  "brand": "AgentHub",
+  "progress": "{{n}} of {{total}}",
+  "skip": "Skip setup",
+  "back": "Back",
+  "continue": "Continue",
+  "finish": "Add your first workspace",
+  "agent": {
+    "eyebrow": "Welcome to AgentHub",
+    "title": "Pick your default agent",
+    "body": "AgentHub works with every CLI agent. Choose the one you'll reach for most. Switch any time.",
+    "detected": "Detected on this machine · {{count}}",
+    "none": "No AI tool is installed yet. An admin installs them in Settings → AI Tools; you can finish setup and pick one later.",
+    "more": "Show {{count}} more agents",
+    "less": "Show fewer",
+    "notInstalled": "not installed",
+    "permission": "Start new sessions in",
+    "permissionHint": "Bypass permissions is never a default: it stays a red switch you turn on for one session.",
+    "modes": {
+      "auto": "Auto",
+      "acceptEdits": "Accept edits",
+      "default": "Ask first",
+      "plan": "Plan"
+    }
+  },
+  "look": {
+    "title": "Make it feel like home",
+    "body": "Pick the look you want to stare at for hours.",
+    "modes": {
+      "system": "System",
+      "dark": "Dark",
+      "light": "Light"
+    },
+    "modeHints": {
+      "system": "Match OS",
+      "dark": "Easy on the eyes",
+      "light": "Bright & crisp"
+    },
+    "darkThemes": "Dark theme",
+    "lightThemes": "Light theme",
+    "language": "Language",
+    "font": "Terminal font",
+    "more": "More options — themes, fonts, the pet — in Settings → Appearance."
+  },
+  "pet": {
+    "title": "Pick a companion",
+    "body": "A small pet sits in the corner and reacts to what your agents do. Hide it any time."
+  },
+  "notify": {
+    "title": "Set up notifications",
+    "body": "AgentHub tells you when agents are done or need you.",
+    "enable": "Desktop notifications",
+    "enableHint": "Your browser asks for permission once.",
+    "blocked": "Notifications are blocked for this site — allow them in the browser's site settings.",
+    "sound": "Notification sound",
+    "preview": "Play",
+    "test": "Send test notification"
+  },
+  "tour": {
+    "progress": "Step {{n}} of {{total}}",
+    "skip": "Skip tour",
+    "next": "Next",
+    "done": "Done",
+    "goWorkspaces": "Go to Workspaces",
+    "add": {
+      "title": "Create your first workspace",
+      "body": "A workspace is one project folder where your agents work. Click + beside Workspaces in the sidebar to add one."
+    },
+    "folder": {
+      "title": "Choose the project folder",
+      "body": "Type a path or Browse to the folder of your project. A git repository gets a Changes panel too."
+    },
+    "create": {
+      "title": "Create it",
+      "body": "Pick the AI it starts on, then click Add workspace."
+    },
+    "prompt": {
+      "title": "Start your first session",
+      "body": "Tell the agent what to do and press Enter. AI, model and permission mode sit right here."
+    },
+    "session": {
+      "title": "Your session is live",
+      "body": "Watch it work and type into it like a terminal. Changes and Files are in the panel on the right; every session of this workspace is listed in the sidebar."
+    },
+    "finish": {
+      "title": "You're all set",
+      "body": "Run setup again or change any of it in Settings."
+    }
+  },
+  "rerun": {
+    "label": "First-run setup",
+    "description": "Go through the welcome steps and the tour again.",
+    "button": "Run setup again"
+  }
+}

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

@@ -85,7 +85,48 @@
   "chat": {
     "placeholder": "Write a message…",
     "send": "Send",
-    "hint": "Enter sends · permission prompts and menus need the terminal (Settings → Appearance → Chat UI)",
-    "notSent": "The terminal is not connected — the message was not sent."
+    "notSent": "The terminal is not connected — the message was not sent.",
+    "stop": "Stop",
+    "notStopped": "The terminal is not connected — nothing was stopped.",
+    "add": "Add files, skills…",
+    "upload": "Upload or add files",
+    "projectFiles": "Project files",
+    "contextFiles": "Context files",
+    "recentUploads": "Recent uploads",
+    "searchFiles": "Search files and folders…",
+    "skills": "Skills",
+    "plugins": "Plugins",
+    "manageSkills": "Manage skills",
+    "managePlugins": "Manage plugins",
+    "none": "Nothing here yet",
+    "fromPlugin": "{{name}} plugin",
+    "modeFailed": "Could not change the permission mode: {{message}}",
+    "outline": {
+      "progress": "Progress",
+      "outputs": "Outputs",
+      "connectors": "Connectors",
+      "empty": "Nothing yet",
+      "resize": "Resize side panel",
+      "hide": "Hide side panel",
+      "show": "Activity panel",
+      "copyPath": "Copy path: {{path}}",
+      "panel": "Session activity panel",
+      "used": "Used in this session",
+      "uploads": "Uploads",
+      "files": "Files read",
+      "memory": "Memory",
+      "skills": "Skills",
+      "close": "Close",
+      "noPreview": "No preview for this file here",
+      "truncated": "Showing the first part of this file"
+    }
+  },
+  "interrupted": {
+    "title": "Resume interrupted sessions?",
+    "message": "These sessions stopped unexpectedly (the machine shut down, tmux was killed, or the CLI crashed). Tick the ones to resume — each re-reads its whole conversation.",
+    "resume_one": "Resume {{count}} session",
+    "resume_other": "Resume {{count}} sessions",
+    "none": "Don't resume",
+    "failed": "Couldn't resume {{name}}: {{message}}"
   }
 }

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

@@ -196,7 +196,10 @@
       "agents_other": "ran {{count}} agents",
       "tools_one": "used a tool",
       "tools_other": "used {{count}} tools"
-    }
+    },
+    "edited_one": "Edited {{count}} file",
+    "edited_other": "Edited {{count}} files",
+    "working": "Thinking…"
   },
   "overview": {
     "agent": "Agent",

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

@@ -34,7 +34,7 @@
     "bubbles": "Speech bubbles",
     "bubblesDesc": "Let the pet comment on your sessions in a bubble",
     "sizeDesc": "{{min}}–{{max}} px; the preview is capped at 120 px",
-    "chooseDesc": "Featured pets come from codex-pets.net and are downloaded into this install the first time you pick one. Your choice and size are saved in this browser.",
+    "chooseDesc": "Featured pets come from codex-pets.net and are downloaded into this install the first time you pick one. Your choice and size are saved to your account.",
     "uploadHint": "An image (PNG, JPEG, GIF, WebP — no SVG) is shown still; a .codex-pet.zip (pet.json + a 1536×1872 spritesheet.webp) is animated by mood.",
     "panel": {
       "label": "Sagi companion",
@@ -189,7 +189,7 @@
       "alert": "Alert",
       "forType": "Sound for this type"
     },
-    "scopeNote": "These notification settings are saved in this browser only. Alert rules and webhooks below are server-wide: they apply to everyone using this dashboard.",
+    "scopeNote": "These notification settings are saved to your account. Alert rules and webhooks below are server-wide: they apply to everyone using this dashboard.",
     "insecureOrigin": "This page is served from {{origin}}, which is not a secure origin. Browsers only show notifications on HTTPS or localhost — open the dashboard through one of those to get them.",
     "unsupported": "This browser does not support notifications.",
     "deniedHelp": "Notifications are blocked for this site. To allow them again, open the site settings (the icon left of the address bar), set Notifications to Allow, then reload this page.",
@@ -309,6 +309,7 @@
     "label": "Start AgentHub automatically",
     "desc_systemd": "Run the dashboard as a systemd --user service, so it starts at boot without Claude Code being opened. Turning it off keeps the running server up.",
     "desc_launchd": "Run the dashboard as a LaunchAgent, so it starts at login without Claude Code being opened. Turning it off keeps the running server up.",
+    "desc_systemd-system": "Run the dashboard as the system service agenthub.service (server mode, one Linux user per account), so it starts with the machine.",
     "unavailable": "Not available here: needs systemd --user on Linux, or a GUI login on macOS.",
     "foreign": "A service named agenthub that AgentHub did not write already exists — AgentHub leaves it alone."
   },
@@ -662,7 +663,12 @@
     "test": "Test",
     "testing": "Testing…",
     "testOk": "answered — {{model}} is reachable with this key.",
-    "testFailed": "no answer ({{status}}): {{message}}"
+    "testFailed": "no answer ({{status}}): {{message}}",
+    "personal": "Personal",
+    "fieldScope": "Who can use it",
+    "scopeShared": "Everyone (shared)",
+    "scopePersonal": "Only me (personal)",
+    "fieldScopeHint": "A shared profile's key never reaches anyone's browser. A personal one is listed, edited and used by you alone."
   },
   "aiTools": {
     "title": "AI Tools",
@@ -697,7 +703,7 @@
   },
   "appearance": {
     "title": "Appearance",
-    "description": "Colour mode and theme. Saved in this browser only.",
+    "description": "Colour mode and theme. Saved to your account, so every browser you sign in to gets them.",
     "mode": "Mode",
     "modes": {
       "dark": "Dark",
@@ -882,16 +888,22 @@
   },
   "language": {
     "title": "Language",
-    "description": "The language of the whole dashboard, remembered in this browser.",
+    "description": "The language of the whole dashboard, saved to your account.",
     "label": "Interface language",
     "names": {
       "en": "English",
       "vi": "Tiếng Việt"
     }
   },
+  "workspaceTabs": {
+    "title": "Workspace tabs",
+    "description": "Which sessions the session view's tab bar holds. Saved to your account.",
+    "label": "Tabs from every workspace",
+    "labelDesc": "Keep every workspace's live sessions as tabs, and mix them in one split. Focusing a tab selects its workspace. Off: only the selected workspace's sessions."
+  },
   "terminalFont": {
     "title": "Terminal font",
-    "description": "The font of the workspace terminals. Takes effect the next time a terminal opens. Saved in this browser only.",
+    "description": "The font of the workspace terminals. Takes effect the next time a terminal opens. Saved to your account.",
     "label": "Font",
     "names": {
       "jetbrains": "JetBrains Mono",
@@ -1001,7 +1013,7 @@
   },
   "prefsBackup": {
     "title": "This browser's preferences",
-    "description": "Theme, language, notification settings, pet, sidebar and workspace layout are kept in this browser. Save them to a file to move them to another browser, or restore them from one.",
+    "description": "Theme, language, notification settings and pet follow your account; the sidebar and workspace layout are kept in this browser. Save them to a file to move them to another browser, or restore them from one.",
     "export": "Export preferences",
     "import": "Import preferences…",
     "importTitle": "Import preferences?",
@@ -1016,9 +1028,9 @@
   },
   "chatUi": {
     "title": "Chat UI",
-    "description": "How a Claude or Codex session opens in its workspace. Saved for your account only.",
-    "label": "Open sessions as a chat",
-    "labelDesc": "Show every Claude or Codex session's conversation like Claude Desktop, with a message box, instead of its terminal. Permission prompts and menus still need the terminal: turn this off to answer them.",
+    "description": "How a new Claude or Codex session opens in its workspace. Saved for your account only.",
+    "label": "Open new sessions as a chat",
+    "labelDesc": "A Claude or Codex session first shows its conversation like Claude Desktop, with a message box, instead of its terminal. Each session then keeps its own view: the chat/terminal button beside a pane's split buttons switches it. Permission prompts and menus still need the terminal.",
     "saveFailed": "Could not save: {{message}}"
   }
 }

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

@@ -69,5 +69,7 @@
   "readOnly": "Analysts can view accounts but not change them.",
   "auditTitle": "Audit log",
   "auditDescription": "Account changes made here, and each time an admin or analyst opened a session a developer owns.",
-  "auditEmpty": "Nothing recorded yet."
+  "auditEmpty": "Nothing recorded yet.",
+  "activeCount": "{{n}} active",
+  "cost30d": "Cost · 30 days"
 }

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

@@ -186,14 +186,18 @@
     "keep": "Tiếp tục sửa"
   },
   "auth": {
-    "title": "Đăng nhập AgentHub",
+    "title": "Chào mừng trở lại",
+    "subtitle": "Đăng nhập AgentHub bằng tài khoản của bạn",
     "username": "Tên đăng nhập",
     "password": "Mật khẩu",
+    "showPassword": "Hiện mật khẩu",
+    "hidePassword": "Ẩn mật khẩu",
     "submit": "Đăng nhập",
     "submitting": "Đang đăng nhập…",
     "failed": "Sai tên đăng nhập hoặc mật khẩu",
     "tooMany": "Sai quá nhiều lần — hãy thử lại sau vài phút",
     "logout": "Đăng xuất",
+    "noAccount": "Chưa có tài khoản? Hãy nhờ quản trị viên tạo cho bạn.",
     "signedInAs": "Đang đăng nhập: {{name}} ({{role}})"
   },
   "insights": {

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

@@ -48,6 +48,8 @@
   "changes.bin": "bin",
   "changes.binary": "File nhị phân — không hiển thị.",
   "changes.collapse": "Thu gọn bảng thay đổi",
+  "changes.closeRepo": "Đóng repository",
+  "changes.closeOtherRepos": "Đóng các repository khác",
   "changes.collapseAll": "Thu gọn tất cả file",
   "changes.collapseAllFolders": "Thu gọn tất cả thư mục",
   "changes.collapseContext": "Bớt dòng xung quanh",
@@ -91,10 +93,8 @@
   "changes.range.work": "Chưa commit",
   "changes.range.workHint": "Working tree so với HEAD — những gì vừa sửa mà chưa commit",
   "changes.refresh": "Tải lại",
-  "changes.resize": "Đổi độ rộng khung changes (kế tiếp: {{size}})",
-  "changes.size.compact": "Hẹp",
-  "changes.size.half": "Vừa",
   "changes.size.full": "Toàn màn hình",
+  "changes.restore": "Thu nhỏ",
   "changes.fileCount_one": "{{count}} tệp",
   "changes.fileCount_other": "{{count}} tệp",
   "changes.dropEdits": "Bỏ các chỉnh sửa chưa lưu của file này?",
@@ -102,6 +102,7 @@
   "changes.title": "Thay đổi",
   "changes.truncated": "Một phần thay đổi đã bị lược bớt để bảng này còn mượt.",
   "changes.unavailable": "Thư mục của workspace này không phải repo git đọc được.",
+  "changes.unavailableFolder": "Thư mục này không phải repo git đọc được.",
   "changes.unstage": "Bỏ file này khỏi index",
   "changes.changesView": "Thay đổi",
   "changes.wholeFile": "Toàn bộ file",
@@ -134,8 +135,6 @@
   "destructive.reset.survives": "Các tệp Git bỏ qua như node_modules và .env được giữ lại; các tệp chưa theo dõi sẽ bị xóa.",
   "destructive.reset.title": "Đặt lại worktree được quản lý?",
   "destructive.warning.no-remote": "Chưa cấu hình Git remote, nên không có bản sao lưu ở xa. Bạn vẫn có thể tiếp tục.",
-  "empty.body": "Mỗi workspace là một thư mục làm việc mà dashboard theo dõi — pipeline, session và terminal của nó. Bấm vào bất kỳ đâu trên ô này để thêm, hoặc từ terminal:",
-  "empty.title": "Chưa có workspace nào",
   "features.archived": "đã lưu trữ",
   "features.live": "Phiên bản trực tiếp",
   "features.viewingArchived": "Xem tính năng đã lưu trữ \"{{slug}}\" — workspace tiếp tục chạy; đây là ảnh chụp nhanh chỉ đọc.",
@@ -316,6 +315,10 @@
   "tree.search": "Tìm workspace và session",
   "tree.toolFilter": "Lọc theo tool",
   "tree.allTools": "Mọi tool",
+  "tree.ownerYou": "{{name}} (bạn)",
+  "tree.noOwner": "Không có chủ",
+  "tree.ownerToggle": "Hiện hoặc ẩn workspace của {{name}}",
+  "tree.readOnly": "Workspace của {{name}} — chỉ xem. Bấm một phiên để mở trang phân tích.",
   "tree.newSession": "Session mới",
   "tree.noSessions": "Chưa có session",
   "tree.transcriptHint": "Không còn pane — mở hội thoại; gửi tin nhắn sẽ tiếp tục (resume) session",
@@ -389,6 +392,8 @@
   "panes.split.bottom": "Tách xuống dưới",
   "panes.full": "Một tab chứa tối đa 4 pane",
   "panes.newTerminal": "Terminal mới",
+  "panes.showChat": "Xem dạng chat",
+  "panes.showTerminal": "Xem dạng terminal",
   "panes.close": "Tách ra tab riêng (session vẫn chạy)",
   "panes.resize": "Đổi kích thước pane",
   "tabs.home": "Trang chủ workspace",

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

@@ -0,0 +1,95 @@
+{
+  "brand": "AgentHub",
+  "progress": "{{n}} / {{total}}",
+  "skip": "Bỏ qua thiết lập",
+  "back": "Quay lại",
+  "continue": "Tiếp tục",
+  "finish": "Thêm workspace đầu tiên",
+  "agent": {
+    "eyebrow": "Chào mừng đến AgentHub",
+    "title": "Chọn agent mặc định",
+    "body": "AgentHub chạy được mọi CLI agent. Chọn cái bạn dùng nhiều nhất — đổi lúc nào cũng được.",
+    "detected": "Đã có trên máy này · {{count}}",
+    "none": "Chưa có AI tool nào được cài. Admin cài trong Cài đặt → AI Tools; bạn có thể hoàn tất thiết lập và chọn sau.",
+    "more": "Xem thêm {{count}} agent",
+    "less": "Thu gọn",
+    "notInstalled": "chưa cài",
+    "permission": "Session mới bắt đầu ở chế độ",
+    "permissionHint": "Bypass permissions không bao giờ là mặc định: nó vẫn là công tắc đỏ bạn bật cho từng session.",
+    "modes": {
+      "auto": "Tự động",
+      "acceptEdits": "Nhận sửa đổi",
+      "default": "Hỏi trước",
+      "plan": "Lập kế hoạch"
+    }
+  },
+  "look": {
+    "title": "Làm cho nó thật quen thuộc",
+    "body": "Chọn giao diện bạn sẽ nhìn hàng giờ liền.",
+    "modes": {
+      "system": "Hệ thống",
+      "dark": "Tối",
+      "light": "Sáng"
+    },
+    "modeHints": {
+      "system": "Theo hệ điều hành",
+      "dark": "Dịu mắt",
+      "light": "Sáng rõ"
+    },
+    "darkThemes": "Theme tối",
+    "lightThemes": "Theme sáng",
+    "language": "Ngôn ngữ",
+    "font": "Font terminal",
+    "more": "Thêm tuỳ chọn — theme, font, thú cưng — trong Cài đặt → Giao diện."
+  },
+  "pet": {
+    "title": "Chọn một người bạn đồng hành",
+    "body": "Một thú cưng nhỏ ngồi ở góc màn hình và phản ứng với việc agent đang làm. Ẩn lúc nào cũng được."
+  },
+  "notify": {
+    "title": "Thiết lập thông báo",
+    "body": "AgentHub báo cho bạn khi agent xong việc hoặc cần bạn.",
+    "enable": "Thông báo trên máy",
+    "enableHint": "Trình duyệt sẽ hỏi quyền một lần.",
+    "blocked": "Trang này đang bị chặn thông báo — cho phép trong cài đặt trang của trình duyệt.",
+    "sound": "Âm thanh thông báo",
+    "preview": "Nghe thử",
+    "test": "Gửi thông báo thử"
+  },
+  "tour": {
+    "progress": "Bước {{n}} / {{total}}",
+    "skip": "Bỏ qua hướng dẫn",
+    "next": "Tiếp",
+    "done": "Xong",
+    "goWorkspaces": "Mở Workspaces",
+    "add": {
+      "title": "Tạo workspace đầu tiên",
+      "body": "Workspace là một thư mục dự án nơi các agent làm việc. Bấm dấu + cạnh mục Không gian làm việc ở sidebar để thêm."
+    },
+    "folder": {
+      "title": "Chọn thư mục dự án",
+      "body": "Gõ đường dẫn hoặc bấm Browse tới thư mục dự án. Repo git sẽ có thêm bảng Changes."
+    },
+    "create": {
+      "title": "Tạo workspace",
+      "body": "Chọn AI sẽ dùng, rồi bấm Thêm workspace."
+    },
+    "prompt": {
+      "title": "Bắt đầu session đầu tiên",
+      "body": "Viết việc cần agent làm rồi nhấn Enter. Chọn AI, model và chế độ quyền ngay tại đây."
+    },
+    "session": {
+      "title": "Session đang chạy",
+      "body": "Xem agent làm việc và gõ vào như một terminal. Changes và Files nằm ở bảng bên phải; mọi session của workspace này có trong thanh bên."
+    },
+    "finish": {
+      "title": "Xong rồi!",
+      "body": "Chạy lại thiết lập hoặc đổi bất cứ lựa chọn nào trong Cài đặt."
+    }
+  },
+  "rerun": {
+    "label": "Thiết lập ban đầu",
+    "description": "Đi lại các bước chào mừng và phần hướng dẫn.",
+    "button": "Chạy lại thiết lập"
+  }
+}

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

@@ -85,7 +85,48 @@
   "chat": {
     "placeholder": "Viết tin nhắn…",
     "send": "Gửi",
-    "hint": "Enter để gửi · hỏi quyền và menu cần terminal (Settings → Appearance → Giao diện chat)",
-    "notSent": "Terminal chưa kết nối — tin nhắn chưa được gửi."
+    "notSent": "Terminal chưa kết nối — tin nhắn chưa được gửi.",
+    "stop": "Ngưng",
+    "notStopped": "Terminal chưa kết nối — chưa ngưng được.",
+    "add": "Thêm file, skill…",
+    "upload": "Tải lên hoặc thêm file",
+    "projectFiles": "File trong dự án",
+    "contextFiles": "File ngữ cảnh",
+    "recentUploads": "Đã tải lên gần đây",
+    "searchFiles": "Tìm file và thư mục…",
+    "skills": "Skills",
+    "plugins": "Plugins",
+    "manageSkills": "Quản lý skills",
+    "managePlugins": "Quản lý plugins",
+    "none": "Chưa có gì",
+    "fromPlugin": "Plugin {{name}}",
+    "modeFailed": "Không đổi được permission mode: {{message}}",
+    "outline": {
+      "progress": "Tiến độ",
+      "outputs": "Kết quả",
+      "connectors": "Kết nối",
+      "empty": "Chưa có gì",
+      "resize": "Kéo giãn thanh bên",
+      "hide": "Ẩn thanh bên",
+      "show": "Bảng hoạt động",
+      "copyPath": "Sao chép đường dẫn: {{path}}",
+      "panel": "Bảng hoạt động của phiên",
+      "used": "Đã dùng trong phiên",
+      "uploads": "Tệp tải lên",
+      "files": "Tệp đã đọc",
+      "memory": "Bộ nhớ",
+      "skills": "Skills",
+      "close": "Đóng",
+      "noPreview": "Không xem trước được tệp này ở đây",
+      "truncated": "Chỉ hiện phần đầu của tệp"
+    }
+  },
+  "interrupted": {
+    "title": "Tiếp tục các phiên bị gián đoạn?",
+    "message": "Các phiên này dừng ngoài ý muốn (tắt máy ngang, tmux bị tắt, hoặc CLI bị lỗi). Đánh dấu những phiên muốn tiếp tục — mỗi phiên sẽ đọc lại toàn bộ hội thoại.",
+    "resume_one": "Tiếp tục {{count}} phiên",
+    "resume_other": "Tiếp tục {{count}} phiên",
+    "none": "Không tiếp tục",
+    "failed": "Không tiếp tục được {{name}}: {{message}}"
   }
 }

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

@@ -196,7 +196,10 @@
       "agents_other": "chạy {{count}} agent",
       "tools_one": "dùng 1 công cụ",
       "tools_other": "dùng {{count}} công cụ"
-    }
+    },
+    "edited_one": "Đã sửa {{count}} tệp",
+    "edited_other": "Đã sửa {{count}} tệp",
+    "working": "Đang suy nghĩ…"
   },
   "overview": {
     "agent": "Agent",

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

@@ -34,7 +34,7 @@
     "bubbles": "Bong bóng lời thoại",
     "bubblesDesc": "Cho pet bình luận về các session của bạn trong bong bóng",
     "sizeDesc": "{{min}}–{{max}} px; bản xem trước tối đa 120 px",
-    "chooseDesc": "Pet nổi bật lấy từ codex-pets.net và được tải về máy ở lần đầu bạn chọn. Lựa chọn và kích thước được lưu trong trình duyệt này.",
+    "chooseDesc": "Pet nổi bật lấy từ codex-pets.net và được tải về máy ở lần đầu bạn chọn. Lựa chọn và kích thước được lưu vào tài khoản của bạn.",
     "uploadHint": "Ảnh (PNG, JPEG, GIF, WebP — không nhận SVG) hiển thị tĩnh; file .codex-pet.zip (pet.json + spritesheet.webp 1536×1872) chuyển động theo tâm trạng.",
     "panel": {
       "label": "Trợ lý Sagi",
@@ -189,7 +189,7 @@
       "alert": "Cảnh báo",
       "forType": "Âm thanh cho loại này"
     },
-    "scopeNote": "Các cài đặt thông báo này chỉ lưu trong trình duyệt này. Quy tắc cảnh báo và webhook bên dưới áp dụng cho toàn máy chủ: mọi người dùng bảng điều khiển này đều chịu ảnh hưởng.",
+    "scopeNote": "Các cài đặt thông báo này được lưu vào tài khoản của bạn. Quy tắc cảnh báo và webhook bên dưới áp dụng cho toàn máy chủ: mọi người dùng bảng điều khiển này đều chịu ảnh hưởng.",
     "insecureOrigin": "Trang này được phục vụ từ {{origin}}, không phải nguồn bảo mật. Trình duyệt chỉ hiện thông báo trên HTTPS hoặc localhost — hãy mở bảng điều khiển qua một trong hai cách đó.",
     "unsupported": "Trình duyệt này không hỗ trợ thông báo.",
     "deniedHelp": "Thông báo đang bị chặn cho trang này. Để cho phép lại, mở cài đặt trang (biểu tượng bên trái thanh địa chỉ), đặt Thông báo thành Cho phép, rồi tải lại trang.",
@@ -309,6 +309,7 @@
     "label": "Tự động khởi động AgentHub",
     "desc_systemd": "Chạy dashboard bằng systemd --user service để nó tự bật khi khởi động máy, không cần mở Claude Code. Tắt đi thì server đang chạy vẫn giữ nguyên.",
     "desc_launchd": "Chạy dashboard bằng LaunchAgent để nó tự bật khi đăng nhập, không cần mở Claude Code. Tắt đi thì server đang chạy vẫn giữ nguyên.",
+    "desc_systemd-system": "Chạy dashboard bằng system service agenthub.service (chế độ server, mỗi tài khoản một Linux user) để nó tự bật cùng máy.",
     "unavailable": "Không khả dụng ở đây: cần systemd --user trên Linux, hoặc phiên đăng nhập GUI trên macOS.",
     "foreign": "Đã có một service tên agenthub không do AgentHub tạo — AgentHub không đụng vào."
   },
@@ -662,7 +663,12 @@
     "test": "Kiểm tra",
     "testing": "Đang kiểm tra…",
     "testOk": "đã trả lời — {{model}} dùng được với key này.",
-    "testFailed": "không trả lời ({{status}}): {{message}}"
+    "testFailed": "không trả lời ({{status}}): {{message}}",
+    "personal": "Riêng",
+    "fieldScope": "Ai được dùng",
+    "scopeShared": "Mọi người (dùng chung)",
+    "scopePersonal": "Chỉ tôi (riêng)",
+    "fieldScopeHint": "Key của profile dùng chung không bao giờ tới trình duyệt của ai. Profile riêng chỉ mình bạn thấy, sửa và dùng."
   },
   "aiTools": {
     "title": "AI Tools",
@@ -697,7 +703,7 @@
   },
   "appearance": {
     "title": "Giao diện",
-    "description": "Chế độ màu và theme. Chỉ lưu trong trình duyệt này.",
+    "description": "Chế độ màu và theme. Lưu vào tài khoản, nên mọi trình duyệt bạn đăng nhập đều dùng chúng.",
     "mode": "Chế độ",
     "modes": {
       "dark": "Tối",
@@ -882,16 +888,22 @@
   },
   "language": {
     "title": "Ngôn ngữ",
-    "description": "Ngôn ngữ của toàn bộ dashboard, được ghi nhớ trong trình duyệt này.",
+    "description": "Ngôn ngữ của toàn bộ dashboard, được lưu vào tài khoản của bạn.",
     "label": "Ngôn ngữ giao diện",
     "names": {
       "en": "English",
       "vi": "Tiếng Việt"
     }
   },
+  "workspaceTabs": {
+    "title": "Tab của workspace",
+    "description": "Thanh tab của màn hình session chứa những session nào. Lưu theo tài khoản.",
+    "label": "Tab của mọi workspace",
+    "labelDesc": "Giữ session đang chạy của mọi workspace thành tab, và trộn chúng trong một tab chia đôi. Chọn một tab sẽ chuyển sang workspace của nó. Tắt: chỉ session của workspace đang chọn."
+  },
   "terminalFont": {
     "title": "Font terminal",
-    "description": "Font của các terminal trong workspace. Áp dụng từ lần mở terminal tiếp theo. Chỉ lưu trong trình duyệt này.",
+    "description": "Font của các terminal trong workspace. Áp dụng từ lần mở terminal tiếp theo. Lưu vào tài khoản của bạn.",
     "label": "Font",
     "names": {
       "jetbrains": "JetBrains Mono",
@@ -1001,7 +1013,7 @@
   },
   "prefsBackup": {
     "title": "Tùy chọn của trình duyệt này",
-    "description": "Giao diện, ngôn ngữ, cài đặt thông báo, thú cưng, thanh bên và bố cục không gian làm việc được lưu trong trình duyệt này. Lưu chúng ra tệp để chuyển sang trình duyệt khác, hoặc khôi phục từ tệp.",
+    "description": "Giao diện, ngôn ngữ, cài đặt thông báo và thú cưng theo tài khoản của bạn; thanh bên và bố cục không gian làm việc được lưu trong trình duyệt này. Lưu chúng ra tệp để chuyển sang trình duyệt khác, hoặc khôi phục từ tệp.",
     "export": "Xuất tùy chọn",
     "import": "Nhập tùy chọn…",
     "importTitle": "Nhập tùy chọn?",
@@ -1016,9 +1028,9 @@
   },
   "chatUi": {
     "title": "Giao diện chat",
-    "description": "Cách một session Claude hoặc Codex mở trong workspace. Chỉ lưu cho tài khoản của bạn.",
-    "label": "Mở session dạng chat",
-    "labelDesc": "Hiện hội thoại của mọi session Claude hoặc Codex như Claude Desktop, kèm ô nhập tin, thay cho terminal. Hỏi quyền và menu vẫn cần terminal: tắt mục này để trả lời chúng.",
+    "description": "Cách một session Claude hoặc Codex mới mở trong workspace. Chỉ lưu cho tài khoản của bạn.",
+    "label": "Mở session mới dạng chat",
+    "labelDesc": "Session Claude hoặc Codex sẽ mở hội thoại như Claude Desktop, kèm ô nhập tin, thay cho terminal. Sau đó mỗi session giữ dạng xem riêng: nút chat/terminal cạnh nút split của pane để chuyển. Hỏi quyền và menu vẫn cần terminal.",
     "saveFailed": "Không lưu được: {{message}}"
   }
 }

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

@@ -69,5 +69,7 @@
   "readOnly": "Analyst chỉ xem được tài khoản, không thay đổi được.",
   "auditTitle": "Nhật ký audit",
   "auditDescription": "Các thay đổi tài khoản thực hiện ở đây, và mỗi lần admin hoặc analyst mở phiên của một developer.",
-  "auditEmpty": "Chưa ghi nhận gì."
+  "auditEmpty": "Chưa ghi nhận gì.",
+  "activeCount": "{{n}} đang hoạt động",
+  "cost30d": "Chi phí · 30 ngày"
 }

client/src/index.css

@@ -351,9 +351,14 @@
 }
 
 @layer base {
+  body {
+    font-weight: 500;
+  }
+
   * {
     scrollbar-width: thin;
-    scrollbar-color: rgb(var(--border)) rgb(var(--surface-2));
+    /* Claude's: a faint thumb on no track. */
+    scrollbar-color: rgb(var(--fg-muted) / 0.35) transparent;
   }
 
   *::-webkit-scrollbar {
@@ -362,7 +367,7 @@
   }
 
   *::-webkit-scrollbar-track {
-    background: rgb(var(--surface-2));
+    background: transparent;
   }
 
   *::-webkit-scrollbar-thumb {

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

@@ -3,12 +3,13 @@
  * @description Pins where a pasted diff comment lands: the workspace's pane
  * focused last, else any of its panes, never another workspace's (lane 1 is
  * not lane 12), nowhere once the pane unmounted, and never into a pane that
- * is not on screen (a hidden console behind a full-width Changes panel).
+ * is not on screen (a hidden console behind a full-width Changes panel); and
+ * `interruptRun`, the Chat view's Stop, presses Esc only in a visible pane.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
 import { describe, expect, it } from "vitest";
-import { notePaneFocus, pasteToLane, registerPane } from "../panePaste";
+import { interruptRun, notePaneFocus, pasteToLane, registerPane } from "../panePaste";
 
 describe("panePaste", () => {
   it("pastes into the workspace's last-focused pane, and only its own", () => {
@@ -48,4 +49,20 @@ describe("panePaste", () => {
     expect(got).toEqual(["y"]);
     off();
   });
+
+  it("interruptRun presses Esc in a visible pane only", () => {
+    const keys: string[] = [];
+    let shown = false;
+    const off = registerPane(
+      "agenthub-lane-6",
+      () => {},
+      () => shown,
+      (d) => keys.push(d)
+    );
+    expect(interruptRun("agenthub-lane-6")).toBe(false);
+    shown = true;
+    expect(interruptRun("agenthub-lane-6")).toBe(true);
+    expect(keys).toEqual(["\x1b"]);
+    off();
+  });
 });

client/src/lib/api.ts

@@ -555,6 +555,8 @@ export type AuditEntry = {
 /** Who is using the dashboard: local mode has no login at all. */
 export type AuthUser = { id: number; username: string; role: "admin" | "analyst" | "developer" };
 export type AuthState = { mode: "local" } | { mode: "server"; user: AuthUser | null };
+/** GET /api/me/prefs — the signed-in account's own UI preferences (localStorage keys). */
+export type UserPrefs = { prefs: Record<string, string>; onboardedAt: string | null };
 
 /** GETs in flight, by path: concurrent callers of the same read (several
  *  components mounting, a WS event fanning out to many listeners) share one
@@ -642,22 +644,30 @@ async function send<T>(path: string, options?: RequestInit): Promise<T> {
  */
 /**
  * What a workspace git call works on: the workspace (its id) or, with
- * `session`, that session's own worktree (`claude --worktree`) — the server
- * resolves the tree from the session row (`?session=`), never from a path.
+ * `session`, that session's own worktree (`claude --worktree`), or, with
+ * `source`, one of the workspace's extra folders — the server resolves the
+ * tree from the session or `lane_sources` row (`?session=` / `?source=`),
+ * never from a path.
  */
-export type GitTarget = number | { lane: number; session?: string };
+export type GitTarget = number | { lane: number; session?: string; source?: number };
 
-/** `/lanes/<id>/git<sub>` plus `q` and, for a session target, `session=`. */
+/** `/lanes/<id>/git<sub>` plus `q` and the target's `session=` / `source=`. */
 function gitUrl(target: GitTarget, sub: string, q?: URLSearchParams): string {
   const params = new URLSearchParams(q);
   const lane = typeof target === "number" ? target : target.lane;
   if (typeof target !== "number" && target.session) params.set("session", target.session);
+  if (typeof target !== "number" && target.source) params.set("source", String(target.source));
   const qs = params.toString();
   return `/lanes/${lane}/git${sub}${qs ? `?${qs}` : ""}`;
 }
 
-/** The target for `laneId`, in `session`'s worktree when one is given. */
-export function gitTarget(laneId: number, session?: string | null): GitTarget {
+/** The target for `laneId`: an extra folder's repo, else `session`'s worktree, else the workspace. */
+export function gitTarget(
+  laneId: number,
+  session?: string | null,
+  source?: number | null
+): GitTarget {
+  if (source) return { lane: laneId, source };
   return session ? { lane: laneId, session } : laneId;
 }
 
@@ -675,13 +685,15 @@ export const api = {
     /** POST /api/auth/logout — ends this login. */
     logout: () => request<{ ok: true }>("/auth/logout", { method: "POST" }),
   },
-  // ───────────────────────── The account's own UI prefs (routes/me.js) ─────────────────────────
+  // ───────────────────────── The account's own preferences (routes/me.js) ─────────────────────────
   me: {
-    /** GET /api/me/prefs — this account's prefs (`local` in local mode). */
-    prefs: () => request<MePrefs>("/me/prefs"),
-    /** PUT /api/me/prefs — merges `prefs` (a string per key, null removes it). */
+    /** GET /api/me/prefs — this account's preferences and first-run flag. */
+    prefs: () => request<UserPrefs>("/me/prefs"),
+    /** PUT /api/me/prefs — merge; `null` deletes a key. */
     savePrefs: (prefs: Record<string, string | null>) =>
-      request<MePrefs>("/me/prefs", { method: "PUT", body: JSON.stringify({ prefs }) }),
+      request<UserPrefs>("/me/prefs", { method: "PUT", body: JSON.stringify({ prefs }) }),
+    /** POST /api/me/onboarded — the first-run setup is done (or skipped). */
+    onboarded: () => request<UserPrefs>("/me/onboarded", { method: "POST" }),
   },
   // ───────────────────────── Server mode staff views (routes/users.js) ─────────────────────────
   users: {
@@ -907,6 +919,13 @@ export const api = {
      * @returns {@link SessionStats} for that one session.
      */
     stats: (id: string) => request<SessionStats>(`/sessions/${encodeURIComponent(id)}/stats`),
+    /** GET /api/sessions/:id/outline — the session's plan, the files it wrote
+     *  and the skills / MCP servers it used (a Chat pane's side panel). */
+    outline: (id: string) => request<SessionOutline>(`/sessions/${encodeURIComponent(id)}/outline`),
+    /** GET /api/sessions/:id/image — an image the session's Read tool read,
+     *  wherever it lies (local mode only), for an `<img>`. */
+    readImageUrl: (id: string, path: string) =>
+      `${BASE}/sessions/${encodeURIComponent(id)}/image?${new URLSearchParams({ path })}`,
     /** PATCH /api/sessions/:id — rename, or archive (hides it from its
      *  workspace, deletes nothing). */
     patch: (id: string, body: { name?: string; archived?: boolean }) =>
@@ -2433,10 +2452,12 @@ export const api = {
     tmuxAvailable: () => request<{ available: boolean }>("/run/tmux"),
     /** GET /api/run/cwds - suggested working directories for the cwd picker. */
     cwds: () => request<{ items: CwdSuggestion[] }>("/run/cwds"),
-    /** GET /api/run/files - path-completion suggestions under `cwd`. */
-    files: (cwd: string, q?: string) => {
+    /** GET /api/run/files - path-completion suggestions under `cwd`; `dirs`
+     *  adds the folders too, as `dir/`. */
+    files: (cwd: string, q?: string, dirs = false) => {
       const qs = new URLSearchParams({ cwd });
       if (q) qs.set("q", q);
+      if (dirs) qs.set("dirs", "1");
       return request<{ items: string[] }>(`/run/files?${qs.toString()}`);
     },
     /** POST /api/run/drop-image - save an image dropped on the terminal on the
@@ -2448,21 +2469,49 @@ export const api = {
         headers: { "Content-Type": file.type },
       }),
     /** POST /api/run/drop-file - the same for any file, keeping its (sanitized)
-     *  name so the agent sees what it is. */
-    dropFile: (file: File) =>
-      request<{ path: string }>(`/run/drop-file?name=${encodeURIComponent(file.name)}`, {
+     *  name so the agent sees what it is. `lane` (a workspace id, or a pane's
+     *  run id) saves it where THAT workspace's panes can read it. */
+    dropFile: (file: File, lane?: number | string | null) => {
+      const laneId =
+        typeof lane === "string" ? /^agenthub-lane-(\d+)(?:-[1-9])?$/.exec(lane)?.[1] : lane;
+      const qs = new URLSearchParams({ name: file.name });
+      if (laneId != null) qs.set("laneId", String(laneId));
+      return request<{ path: string }>(`/run/drop-file?${qs.toString()}`, {
         method: "POST",
         body: file,
         headers: { "Content-Type": "application/octet-stream" },
-      }),
+      });
+    },
     /** POST /api/run - start (or adopt, if already live) a lane's terminal run. */
     start: (args: RunStartArgs) =>
       request<RunHandle>("/run", { method: "POST", body: JSON.stringify(args) }),
     /** GET /api/run/:id - one run's current handle. */
     get: (id: string) => request<RunHandle>(`/run/${encodeURIComponent(id)}`),
+    /** GET /api/run/:id/permission-mode - the mode a live claude pane shows now
+     *  (null while a menu hides it). */
+    permissionMode: (id: string) =>
+      request<{ mode: PermissionMode | "dontAsk" | null }>(
+        `/run/${encodeURIComponent(id)}/permission-mode`
+      ),
+    /** POST /api/run/:id/permission-mode - step the pane's mode (Shift+Tab, each
+     *  step read back) to `mode`; 409 when it cannot be reached. */
+    setPermissionMode: (id: string, mode: PermissionMode) =>
+      request<{ mode: PermissionMode }>(`/run/${encodeURIComponent(id)}/permission-mode`, {
+        method: "POST",
+        body: JSON.stringify({ mode }),
+      }),
     /** DELETE /api/run/:id - kill the tmux session. */
     kill: (id: string) =>
       request<{ ok: true }>(`/run/${encodeURIComponent(id)}`, { method: "DELETE" }),
+    /** GET /api/run/interrupted - sessions whose pane died under them (reboot,
+     *  killed tmux, crash), newest first; the caller's own workspaces only. */
+    interrupted: () => request<{ items: InterruptedRun[] }>("/run/interrupted"),
+    /** POST /api/run/interrupted/dismiss - stop offering these sessions. */
+    dismissInterrupted: (sessionIds: string[]) =>
+      request<{ dismissed: number }>("/run/interrupted/dismiss", {
+        method: "POST",
+        body: JSON.stringify({ sessionIds }),
+      }),
   },
 
   // ────────────────────────────────── Alerts API ──────────────────────────────
@@ -3600,6 +3649,10 @@ export interface AiProxy {
   label: string;
   /** True only for the read-only `native` profile (the vendor's own API). */
   builtin: boolean;
+  /** "shared": the host's (an admin's, in server mode), usable by everyone;
+   *  "personal": the signed-in user's own, named `u<id>_<slug>` — server mode
+   *  only, and nobody else lists it. */
+  scope?: "shared" | "personal";
   /** Empty string for `native`, else the proxy's http(s) ROOT, without `/v1`. */
   baseUrl: string;
   /** Whether a key is stored. The key itself never leaves the server. */
@@ -3651,6 +3704,9 @@ export interface AiProxyInput {
   models?: Partial<AiProxyModels>;
   /** A Claude model id; "" clears it. Omit on update to keep the stored one. */
   behavesAs?: string;
+  /** Server mode, on create: an admin's profile is shared unless "personal";
+   *  a member's is always personal. Ignored in local mode. */
+  scope?: "shared" | "personal";
 }
 
 /** One markdown-based config artifact (skill/agent/command/output-style),
@@ -4277,6 +4333,22 @@ export interface CodexMarketplaceActionArgs {
 /** Maps 1:1 to the `claude --permission-mode` CLI flag. */
 export type PermissionMode = "auto" | "acceptEdits" | "default" | "plan" | "bypassPermissions";
 /** Maps 1:1 to the `claude --effort` CLI flag; "" omits the flag (model default). */
+/** `GET /api/sessions/:id/outline`. `status` is the agent's own word
+ *  (`pending` / `in_progress` / `completed`). */
+export interface SessionOutline {
+  progress: { id: string; subject: string; status: string }[];
+  /** Files it wrote or edited, newest first. */
+  outputs: string[];
+  /** Files it only read, newest first. */
+  files: string[];
+  /** Files attached to its prompts (the composer's drop dir), newest first. */
+  uploads: string[];
+  /** Claude Code memory files it read or wrote, newest first. */
+  memory: string[];
+  skills: string[];
+  mcp: string[];
+}
+
 export type EffortLevel = "" | "low" | "medium" | "high" | "xhigh" | "max";
 /** "running" — a live tmux session exists; "gone" — it doesn't (killed,
  *  crashed, claude exited and closed the pane). Computed fresh from tmux
@@ -4310,14 +4382,26 @@ export interface RunStartArgs {
   proxy?: string;
 }
 
-/** A lane's tmux-backed terminal run — one per lane, id is the tmux session
- *  name (`agenthub-lane-<laneId>`). */
-/** One account's own UI preferences (server/routes/me.js): known keys → string values. */
-export interface MePrefs {
-  prefs: Record<string, string>;
-  onboardedAt: string | null;
+/** One session an unexpected stop left behind (GET /api/run/interrupted). */
+export interface InterruptedRun {
+  id: string;
+  session_id: string;
+  lane_id: number;
+  tool: LaneTool;
+  cwd: string;
+  model: string | null;
+  permission_mode: PermissionMode | null;
+  effort: EffortLevel | null;
+  prompt_preview: string | null;
+  started_at: string;
+  ended_at: string | null;
+  lane_title: string;
+  lane_cwd: string;
+  session_name: string | null;
 }
 
+/** A lane's tmux-backed terminal run — one per lane, id is the tmux session
+ *  name (`agenthub-lane-<laneId>`). */
 export interface RunHandle {
   id: string;
   laneId: number | null;
@@ -4528,7 +4612,7 @@ export interface RemoteSourceInput {
  *  write, which it never touches. */
 export interface AutostartStatus {
   available: boolean;
-  kind: "systemd" | "launchd";
+  kind: "systemd" | "systemd-system" | "launchd";
   enabled: boolean;
   foreign: boolean;
 }

client/src/lib/brand.ts

@@ -0,0 +1,11 @@
+/**
+ * @file brand.ts
+ * @description SmartGift logo URLs shared by the sidebar and the login page.
+ * Remote URLs: the logo is owned by the brand, not vendored here — a machine
+ * with no network shows the alt text instead.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+export const BRAND_LOGO =
+  "https://smg-services.s3.ap-southeast-1.amazonaws.com/smartgift/assets/logo/logo-main.png";
+export const BRAND_MARK = "https://smartgift.vn/favicon.ico";

client/src/lib/chatDraft.ts

@@ -0,0 +1,50 @@
+/**
+ * @file chatDraft.ts — a Chat pane's unsent prompt (`PaneChat`): its text and
+ * attachments, kept per SESSION in this browser's localStorage
+ * (`agenthub.chat.draft.<sessionId>`), so it survives the pane switching to
+ * its terminal (which unmounts the chat) and a page reload — as the terminal's
+ * own half-typed line survives in tmux. An image's preview (a blob URL) does
+ * not outlive the page, so a restored attachment keeps only its path and name.
+ * Cleared once the prompt is sent (an empty draft removes the key).
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import type { PromptImage } from "../components/run/RunSetup";
+
+const key = (sessionId: string) => `agenthub.chat.draft.${sessionId}`;
+
+export interface ChatDraft {
+  prompt: string;
+  images: PromptImage[];
+}
+
+export function readChatDraft(sessionId: string): ChatDraft {
+  try {
+    const v = JSON.parse(
+      localStorage.getItem(key(sessionId)) || "null"
+    ) as Partial<ChatDraft> | null;
+    return {
+      prompt: typeof v?.prompt === "string" ? v.prompt : "",
+      images: Array.isArray(v?.images)
+        ? v.images
+            .filter((i) => typeof i?.path === "string" && typeof i.name === "string")
+            .map((i) => ({ path: i.path, name: i.name }))
+        : [],
+    };
+  } catch {
+    return { prompt: "", images: [] };
+  }
+}
+
+export function writeChatDraft(sessionId: string, prompt: string, images: PromptImage[]) {
+  try {
+    if (!prompt && !images.length) localStorage.removeItem(key(sessionId));
+    else
+      localStorage.setItem(
+        key(sessionId),
+        JSON.stringify({ prompt, images: images.map(({ path, name }) => ({ path, name })) })
+      );
+  } catch {
+    /* storage full or blocked: the draft lives for this page only */
+  }
+}

client/src/lib/chatUi.ts

@@ -1,11 +1,15 @@
 /**
- * @file chatUi.ts — the viewer's Chat UI choice: whether a Claude/Codex pane
- * opens as a chat (`PaneChat`, like Claude Desktop) instead of its terminal.
- * Kept by the server per ACCOUNT (`GET/PUT /api/me/prefs`, key
- * `agenthub.chatUi` = "1"; local mode is one account), so it follows a user to
- * any browser and differs between users of one dashboard. Read once per page
- * load and shared through `useChatUi`; `saveChatUi` updates every reader at
- * once and puts the old value back if the save fails.
+ * @file chatUi.ts — whether a Claude/Codex session shows as a chat
+ * (`PaneChat`, like Claude Desktop) or as its terminal. Each SESSION has its
+ * own view (`useSessionChat`, toggled by `setSessionChat` from the pane's
+ * chat/terminal button), kept in this browser's localStorage
+ * (`agenthub.chatUi.sessions`, the newest `MAX_VIEWS`). The account's Chat UI
+ * setting is only the DEFAULT: kept by the server per account
+ * (`GET/PUT /api/me/prefs`, key `agenthub.chatUi` = "1"; local mode is one
+ * account), it is written onto a session the first time that session is
+ * shown, so changing it later leaves every session already seen alone. Read
+ * once per page load and shared through `useChatUi`; `saveChatUi` updates
+ * every reader at once and puts the old value back if the save fails.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -14,21 +18,44 @@ import { api } from "./api";
 
 export const CHAT_UI_KEY = "agenthub.chatUi";
 
+export const VIEWS_KEY = "agenthub.chatUi.sessions";
+const MAX_VIEWS = 200;
+
 let chatUi = false;
+let loaded = false;
 let loading: Promise<void> | null = null;
 const listeners = new Set<() => void>();
+const subscribe = (fn: () => void) => {
+  listeners.add(fn);
+  return () => {
+    listeners.delete(fn);
+  };
+};
 
 const emit = (next: boolean) => {
   chatUi = next;
   listeners.forEach((fn) => fn());
 };
 
+function readViews(): Record<string, boolean> {
+  try {
+    const v: unknown = JSON.parse(localStorage.getItem(VIEWS_KEY) || "{}");
+    return v && typeof v === "object" ? (v as Record<string, boolean>) : {};
+  } catch {
+    return {};
+  }
+}
+let views = readViews();
+
 function load() {
   // A failed read (logged out, offline) must never take a page down with it.
   loading ??= Promise.resolve()
     .then(() => api.me.prefs())
     .then(
-      (r) => emit(r.prefs[CHAT_UI_KEY] === "1"),
+      (r) => {
+        loaded = true;
+        emit(r.prefs[CHAT_UI_KEY] === "1");
+      },
       () => {
         loading = null; // the next reader asks again
       }
@@ -37,13 +64,32 @@ function load() {
 
 export function useChatUi(): boolean {
   useEffect(load, []);
-  return useSyncExternalStore(
-    (fn) => {
-      listeners.add(fn);
-      return () => listeners.delete(fn);
-    },
-    () => chatUi
-  );
+  return useSyncExternalStore(subscribe, () => chatUi);
+}
+
+/** Shows `sessionId` as a chat (`true`) or its terminal, for this browser. */
+export function setSessionChat(sessionId: string, on: boolean) {
+  const { [sessionId]: _old, ...rest } = views;
+  // Newest last, so the cap drops the sessions touched longest ago.
+  views = Object.fromEntries(Object.entries({ ...rest, [sessionId]: on }).slice(-MAX_VIEWS));
+  try {
+    localStorage.setItem(VIEWS_KEY, JSON.stringify(views));
+  } catch {
+    // Storage full or blocked: the choice still holds for this page load.
+  }
+  listeners.forEach((fn) => fn());
+}
+
+/** The session's own view; a session seen for the first time takes the
+ *  account's default (once it is read) and keeps it. */
+export function useSessionChat(sessionId: string | null | undefined): boolean {
+  const fallback = useChatUi();
+  const own = useSyncExternalStore(subscribe, () => (sessionId ? views[sessionId] : undefined));
+  const ready = useSyncExternalStore(subscribe, () => loaded);
+  useEffect(() => {
+    if (sessionId && own === undefined && ready) setSessionChat(sessionId, chatUi);
+  }, [sessionId, own, ready]);
+  return own ?? fallback;
 }
 
 export async function saveChatUi(on: boolean): Promise<void> {
@@ -61,5 +107,8 @@ export async function saveChatUi(on: boolean): Promise<void> {
 /** Tests: forget what was read. */
 export function __resetChatUi() {
   chatUi = false;
+  loaded = false;
   loading = null;
+  views = {};
+  localStorage.removeItem(VIEWS_KEY);
 }

client/src/lib/openInChanges.ts

@@ -0,0 +1,23 @@
+/**
+ * @file openInChanges.ts — asks the Workspace page to open a file in its
+ * Changes panel: a chat's "Edited N files" card names absolute paths deep in
+ * a pane, the panel lives on the page, so the request travels as a window
+ * event (like the sidebar's `LIVE_RUNS_EVENT`). The page opens the panel and
+ * that file there, if the panel shows the same workspace; else nothing.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+export const OPEN_IN_CHANGES_EVENT = "agenthub:open-in-changes";
+
+/** A file to open: its workspace, and its path relative to the panel's folder. */
+export type OpenInChanges = { laneId: number; path: string };
+
+/** Opens `path` (absolute) when it lies under `cwd`, the pane's folder — the
+ *  folder the Changes panel reads for it. False when it does not. */
+export function openInChanges(laneId: number, cwd: string, path: string): boolean {
+  const base = cwd.replace(/\/+$/, "");
+  if (!base || !path.startsWith(`${base}/`)) return false;
+  const detail: OpenInChanges = { laneId, path: path.slice(base.length + 1) };
+  window.dispatchEvent(new CustomEvent(OPEN_IN_CHANGES_EVENT, { detail }));
+  return true;
+}

client/src/lib/paneLayout.ts

@@ -17,6 +17,10 @@
  * its session back in a tab of its own. The tabs are a viewer preference,
  * kept per workspace in `localStorage` (`agenthub.workspace.paneLayout`; a
  * stored pre-tab single layout reads as one tab), never on the server.
+ *
+ * With Settings → Appearance → "Tabs from every workspace" on, ONE set of tabs
+ * (stored under `all`) holds every workspace's sessions: a leaf is then a
+ * `paneKey` (lane id × `MAX_SLOTS` + slot) instead of a bare slot.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -24,6 +28,12 @@
 export const MAX_PANES = 4;
 /** Sessions a workspace may hold: slots 0–9 (`MAX_PANE_SLOT` + 1 on the server). */
 export const MAX_SLOTS = 10;
+/** A pane's id in the every-workspace tabs: unique across lanes, still a number. */
+export const paneKey = (laneId: number, slot: number) => laneId * MAX_SLOTS + slot;
+/** The slot of a leaf — itself, or a `paneKey`'s slot part. */
+export const slotOfKey = (key: number) => key % MAX_SLOTS;
+/** The tabs' storage name: a lane id, or `all` for the every-workspace tabs. */
+export type GroupsScope = number | "all";
 const MIN_RATIO = 0.1;
 const STORAGE_KEY = "agenthub.workspace.paneLayout";
 
@@ -223,17 +233,17 @@ export function layoutRects(node: PaneNode | null): {
   return { panes, dividers };
 }
 
-function parseNode(raw: unknown): PaneNode | null {
+function parseNode(raw: unknown, max: number): PaneNode | null {
   if (!raw || typeof raw !== "object") return null;
   const n = raw as Record<string, unknown>;
   if (n.type === "pane") {
-    return Number.isInteger(n.slot) && (n.slot as number) >= 0 && (n.slot as number) < MAX_SLOTS
+    return Number.isInteger(n.slot) && (n.slot as number) >= 0 && (n.slot as number) < max
       ? pane(n.slot as number)
       : null;
   }
   if (n.type !== "split" || (n.dir !== "row" && n.dir !== "col")) return null;
-  const a = parseNode(n.a);
-  const b = parseNode(n.b);
+  const a = parseNode(n.a, max);
+  const b = parseNode(n.b, max);
   if (!a || !b) return null;
   const ratio = typeof n.ratio === "number" && Number.isFinite(n.ratio) ? clampRatio(n.ratio) : 0.5;
   return split(n.dir, a, b, ratio);
@@ -241,9 +251,9 @@ function parseNode(raw: unknown): PaneNode | null {
 
 /** A stored layout, checked: anything malformed, a slot out of range, a slot
  *  shown twice or more than `MAX_PANES` panes is no layout at all. */
-export function parseLayout(raw: unknown): PaneLayout {
+export function parseLayout(raw: unknown, max = MAX_SLOTS): PaneLayout {
   if (!raw || typeof raw !== "object") return EMPTY;
-  const root = parseNode((raw as { root?: unknown }).root);
+  const root = parseNode((raw as { root?: unknown }).root, max);
   const shown = leaves(root);
   if (!root || shown.length > MAX_PANES || new Set(shown).size !== shown.length) return EMPTY;
   const focus = (raw as { focus?: unknown }).focus;
@@ -389,7 +399,7 @@ export function pruneGroups(g: PaneGroups, live: Set<number>, keep: Set<number>)
 
 /** Stored tabs, checked: a malformed tab, or one showing a session an
  *  earlier tab already holds, is dropped. A pre-tab single layout is one tab. */
-export function parseGroups(raw: unknown): PaneGroups {
+export function parseGroups(raw: unknown, max = MAX_SLOTS): PaneGroups {
   if (!raw || typeof raw !== "object") return EMPTY_GROUPS;
   const r = raw as { groups?: unknown; active?: unknown };
   const list = Array.isArray(r.groups) ? r.groups : "root" in r ? [raw] : [];
@@ -400,7 +410,7 @@ export function parseGroups(raw: unknown): PaneGroups {
   // a dropped tab ahead of it does not shift the selection onto its neighbour.
   let active = 0;
   list.forEach((item, i) => {
-    const l = parseLayout(item);
+    const l = parseLayout(item, max);
     const shown = leaves(l.root);
     if (!l.root || shown.some((s) => seen.has(s))) return;
     shown.forEach((s) => seen.add(s));
@@ -420,11 +430,14 @@ function readAll(): Record<string, unknown> {
   }
 }
 
-export function loadGroups(laneId: number): PaneGroups {
-  return parseGroups(readAll()[String(laneId)]);
+export function loadGroups(laneId: GroupsScope): PaneGroups {
+  return parseGroups(
+    readAll()[String(laneId)],
+    laneId === "all" ? Number.MAX_SAFE_INTEGER : MAX_SLOTS
+  );
 }
 
-export function saveGroups(laneId: number, g: PaneGroups): void {
+export function saveGroups(laneId: GroupsScope, g: PaneGroups): void {
   const all = readAll();
   if (g.groups.length) all[String(laneId)] = g;
   else delete all[String(laneId)];

client/src/lib/panePaste.ts

@@ -9,25 +9,28 @@
  * hidden behind a full-width Changes panel or a replay would swallow it
  * unseen); the caller says where it went, or that it went nowhere. The one
  * exception is `submitToRun`: a pane's own Chat view (`PaneChat.tsx`) sends
- * what the user typed there, so it pastes AND presses Enter.
+ * what the user typed there, so it pastes AND presses Enter — and its Stop
+ * button presses Esc through `interruptRun`.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
 interface Pane {
   paste: (text: string, submit?: boolean) => void;
   visible: () => boolean;
+  key?: (data: string) => void;
 }
 const panes = new Map<string, Pane>();
 let lastFocused: string | null = null;
 
-/** Registers a mounted terminal (`visible`: is it on screen now); returns its
- *  unregister. */
+/** Registers a mounted terminal (`visible`: is it on screen now; `key`: send
+ *  raw input, as a key press); returns its unregister. */
 export function registerPane(
   runId: string,
   paste: (text: string, submit?: boolean) => void,
-  visible: () => boolean = () => true
+  visible: () => boolean = () => true,
+  key?: (data: string) => void
 ): () => void {
-  const entry = { paste, visible };
+  const entry = { paste, visible, key };
   panes.set(runId, entry);
   return () => {
     if (panes.get(runId) === entry) panes.delete(runId);
@@ -63,6 +66,15 @@ export function submitToRun(runId: string, text: string): boolean {
   return true;
 }
 
+/** Presses Esc in the pane of `runId` — how `claude` and `codex` stop the turn
+ *  they are running. False when the pane is not mounted or not attached. */
+export function interruptRun(runId: string): boolean {
+  const p = panes.get(runId);
+  if (!p?.visible() || !p.key) return false;
+  p.key("\x1b");
+  return true;
+}
+
 /** Pastes `text` into one of the workspace's VISIBLE panes — the one focused
  *  last when it is — and returns its run id; null when none is on screen. */
 export function pasteToLane(laneId: number, text: string): string | null {

client/src/lib/projectTreePrefs.ts

@@ -2,7 +2,7 @@
  * @file projectTreePrefs — the sidebar workspace list's viewer preferences, in
  * ONE localStorage key (`agenthub.sidebar.projects`): which workspaces are
  * expanded to their sessions (by lane id), the tool the list is filtered to,
- * and — Settings → Worktrees —
+ * which owner groups an admin/analyst folded, and — Settings → Worktrees —
  * whether a workspace home's Add folder suggests the repo's untracked
  * worktrees and which sources of them (`claude` = `<repo>/.claude/worktrees/*`,
  * `agenthub` = LANES_ROOT) it leaves out. A `useSyncExternalStore` reader that caches nothing
@@ -20,6 +20,8 @@ export interface ProjectTreePrefs {
   expanded: Record<string, boolean>;
   /** Show only this tool's workspaces; null = every tool. */
   tool: string | null;
+  /** Server mode, admin/analyst: owner key (user id, or "none") → its group is folded. */
+  collapsedOwners: Record<string, boolean>;
   showUntracked: boolean;
   hideSources: string[];
 }
@@ -27,6 +29,7 @@ export interface ProjectTreePrefs {
 const DEFAULTS: ProjectTreePrefs = {
   expanded: {},
   tool: null,
+  collapsedOwners: {},
   showUntracked: true,
   hideSources: [],
 };
@@ -50,6 +53,10 @@ export function readProjectTreePrefs(): ProjectTreePrefs {
     value = {
       expanded: parsed.expanded && typeof parsed.expanded === "object" ? parsed.expanded : {},
       tool: typeof parsed.tool === "string" && parsed.tool ? parsed.tool : null,
+      collapsedOwners:
+        parsed.collapsedOwners && typeof parsed.collapsedOwners === "object"
+          ? parsed.collapsedOwners
+          : {},
       showUntracked: parsed.showUntracked !== false,
       hideSources: Array.isArray(parsed.hideSources) ? parsed.hideSources : [],
     };

client/src/lib/promptAttach.ts

@@ -0,0 +1,140 @@
+/**
+ * @file promptAttach.ts
+ * @description What a prompt box can attach besides a fresh upload: a project
+ * file or folder dragged from the Files panel (`ATTACH_MIME`, read back by
+ * `PromptEditor`'s drop) or from a Chat pane's activity panel
+ * (`dragAttachments`, `dragSkill`: a skill becomes the prompt's `/command`) and the files uploaded through a prompt box in the
+ * last day (`recentUploads`, kept in this browser). An attachment is a path
+ * sent with the prompt, so nothing here touches the server.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import type { DragEvent } from "react";
+
+/** One attachment, shaped like `PromptImage`: what is sent, and its label. */
+export interface Attachment {
+  path: string;
+  name: string;
+  url?: string;
+}
+
+export const ATTACH_MIME = "application/x-agenthub-attach";
+
+/** A project path (relative to the box's folder) as Claude Code's `@` mention. */
+export function projectAttachment(rel: string): Attachment {
+  const name = rel.replace(/\/$/, "").split("/").pop() || rel;
+  return { path: `@${rel}`, name: rel.endsWith("/") ? `${name}/` : name };
+}
+
+/** Start a drag carrying `rel` (a Files panel row) to a prompt box; plain
+ *  text too, so a drop elsewhere (a terminal, an editor) gets the path. A row
+ *  under a `data-drag-root` (an extra folder's section) lies outside the
+ *  pane's folder, so it carries its absolute path instead. */
+export function dragProjectPath(e: DragEvent, rel: string) {
+  const root = (e.currentTarget as HTMLElement | null)?.closest?.<HTMLElement>("[data-drag-root]")
+    ?.dataset.dragRoot;
+  const path = root ? `${root.replace(/[\\/]+$/, "")}/${rel}` : rel;
+  e.dataTransfer.setData(ATTACH_MIME, JSON.stringify(projectAttachment(path)));
+  e.dataTransfer.setData("text/plain", path);
+  e.dataTransfer.effectAllowed = "copy";
+}
+
+/** Start a drag carrying attachments as they are (an activity panel's files,
+ *  already absolute); plain text too, like `dragProjectPath`. */
+export function dragAttachments(e: DragEvent, items: Attachment[]) {
+  e.dataTransfer.setData(ATTACH_MIME, JSON.stringify(items));
+  e.dataTransfer.setData("text/plain", items.map((a) => a.path.replace(/^@/, "")).join(" "));
+  e.dataTransfer.effectAllowed = "copy";
+}
+
+/** The attachments a drop carries, if they are ours: one, or a list. */
+export function droppedAttachments(dt: DataTransfer | null | undefined): Attachment[] {
+  try {
+    const v: unknown = JSON.parse(dt?.getData(ATTACH_MIME) || "null");
+    return (Array.isArray(v) ? v : [v])
+      .filter(
+        (a): a is Attachment =>
+          !!a &&
+          typeof (a as Attachment).path === "string" &&
+          typeof (a as Attachment).name === "string"
+      )
+      .map((a) => ({ path: a.path, name: a.name }));
+  } catch {
+    return [];
+  }
+}
+
+export const SKILL_MIME = "application/x-agenthub-skill";
+// A skill's name as Claude Code types it: `name` or `plugin:name`.
+const SKILL_RE = /^[\w.-]+(?::[\w.-]+)?$/;
+
+/** Start a drag carrying a skill; dropped on a prompt box it becomes `/name`. */
+export function dragSkill(e: DragEvent, name: string) {
+  e.dataTransfer.setData(SKILL_MIME, name);
+  e.dataTransfer.setData("text/plain", `/${name}`);
+  e.dataTransfer.effectAllowed = "copy";
+}
+
+/** The skill a drop carries, if it is one of ours. */
+export function droppedSkill(dt: DataTransfer | null | undefined): string | null {
+  try {
+    const name = dt?.getData(SKILL_MIME) ?? "";
+    return SKILL_RE.test(name) ? name : null;
+  } catch {
+    return null;
+  }
+}
+
+/** `prev` plus whichever of `items` it does not hold yet. */
+export function addAttachments<T extends Attachment>(prev: T[], items: T[]): T[] {
+  const fresh = items.filter(
+    (a, i) =>
+      !prev.some((p) => p.path === a.path) && items.findIndex((b) => b.path === a.path) === i
+  );
+  return fresh.length ? [...prev, ...fresh] : prev;
+}
+
+const RECENT_KEY = "agenthub.prompt.recentUploads";
+const RECENT_MAX = 20;
+// The server prunes an upload a day after it was written (`saveDrop`).
+// ponytail: a client-side guess of that TTL, a few minutes short; a listing
+// route instead if uploads must outlive it or follow the user to another browser.
+const RECENT_TTL_MS = 23.9 * 60 * 60_000;
+
+interface Recent extends Attachment {
+  at: number;
+}
+
+function readRecent(): Recent[] {
+  try {
+    const v: unknown = JSON.parse(localStorage.getItem(RECENT_KEY) || "[]");
+    const cutoff = Date.now() - RECENT_TTL_MS;
+    return (Array.isArray(v) ? (v as Recent[]) : []).filter(
+      (r) => typeof r?.path === "string" && typeof r.name === "string" && r.at > cutoff
+    );
+  } catch {
+    return [];
+  }
+}
+
+export function recentUploads(): Attachment[] {
+  return readRecent().map(({ path, name, url }) => ({ path, name, ...(url ? { url } : {}) }));
+}
+
+/** Remember uploads just saved, newest first; an image keeps a thumbnail
+ *  through `GET /api/run/drop/:name` (its local blob URL dies with the page). */
+export function rememberUploads(items: { path: string; name: string; image: boolean }[]) {
+  const at = Date.now();
+  const added: Recent[] = items.map(({ path, name, image }) => ({
+    path,
+    name,
+    at,
+    ...(image ? { url: `/api/run/drop/${encodeURIComponent(path.split("/").pop() || "")}` } : {}),
+  }));
+  const kept = readRecent().filter((r) => !added.some((a) => a.path === r.path));
+  try {
+    localStorage.setItem(RECENT_KEY, JSON.stringify([...added, ...kept].slice(0, RECENT_MAX)));
+  } catch {
+    /* storage full or blocked: the list is a convenience */
+  }
+}

client/src/lib/sessionDefaults.ts

@@ -0,0 +1,47 @@
+/**
+ * @file sessionDefaults.ts
+ * @description The account's own starting choices for new work, picked in the
+ * first-run setup (docs/plans/onboarding) and synced per account like every
+ * other preference (`lib/userPrefs.ts`): the AI a new workspace starts on, and
+ * the permission mode a new Claude session starts in. Bypass is NEVER one of
+ * them — it stays the per-session switch (CLAUDE.md), so `bypassPermissions`
+ * is refused on read and on write.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import type { PermissionMode } from "./api";
+
+const TOOL_KEY = "agenthub.defaultTool";
+const MODE_KEY = "agenthub.permissionMode";
+
+/** The permission modes a default may be. */
+export const DEFAULT_MODES = ["auto", "acceptEdits", "default", "plan"] as const;
+export type DefaultMode = (typeof DEFAULT_MODES)[number];
+
+function read(key: string): string | null {
+  try {
+    return localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+function write(key: string, value: string): void {
+  try {
+    localStorage.setItem(key, value);
+  } catch {
+    /* storage blocked */
+  }
+}
+
+/** The account's own default AI tool id, or null (the install's default applies). */
+export const readDefaultTool = (): string | null => read(TOOL_KEY);
+export const writeDefaultTool = (id: string): void => write(TOOL_KEY, id);
+
+/** The permission mode a new Claude session starts in ("auto" when none was picked). */
+export function readDefaultMode(): PermissionMode {
+  const v = read(MODE_KEY);
+  return (DEFAULT_MODES as readonly string[]).includes(v ?? "") ? (v as DefaultMode) : "auto";
+}
+export function writeDefaultMode(mode: DefaultMode): void {
+  if ((DEFAULT_MODES as readonly string[]).includes(mode)) write(MODE_KEY, mode);
+}

client/src/lib/settingsSearch.ts

@@ -41,6 +41,13 @@ export const SETTINGS_INDEX: {
     to: "#language",
     keywords: ["english", "tiếng việt", "vietnamese", "ngôn ngữ"],
   },
+  {
+    section: "appearance",
+    titleKey: "workspaceTabs.title",
+    descKey: "workspaceTabs.description",
+    keywords: ["tab", "workspace", "session", "combo", "split", "không gian làm việc"],
+    to: "#workspace-tabs",
+  },
   {
     section: "appearance",
     titleKey: "terminalFont.title",

client/src/lib/terminalFont.ts

@@ -1,8 +1,8 @@
 /**
  * @file terminalFont — the lane terminal's font, a viewer preference kept in
  * `localStorage` (`agenthub.terminal.font`) and read by `TerminalView` when a
- * terminal opens. `jetbrains` (the default) and `maple` (rounded) are bundled
- * webfonts that cover every Vietnamese letter; `system` is the browser's own
+ * terminal opens. `jetbrains` (the default) and the rounded `maple` are
+ * bundled webfonts that cover every Vietnamese letter; `system` is the browser's own
  * fixed-width font, which may not (DejaVu Sans Mono on Linux lacks ấ, ế, ố…,
  * and those glyphs then fall back to a face of another width).
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>

client/src/lib/types.ts

@@ -1344,6 +1344,7 @@ export interface UpdateStatusPayload {
   situation?:
     | "plugin_managed"
     | "release_available"
+    | "diverged_from_release"
     | "tracking_canonical"
     | "fork_or_diverged_tracking"
     | "feature_branch"
@@ -1919,7 +1920,9 @@ export interface WSMessage {
     /** A lane's stack finished coming up (or failed to), with fresh facts. */
     | "lane_runtime"
     /** A lane's profile hook exited, with its status code. */
-    | "lane_hook_result";
+    | "lane_hook_result"
+    /** A pane ended; refetch GET /api/run/interrupted (no payload). */
+    | "runs_interrupted";
   /** The message body, whose concrete shape is selected by `type` above. */
   data:
     | Session
@@ -2661,6 +2664,8 @@ export interface Lane {
   cwd: string;
   /** Server mode: the account that owns this workspace (null = nobody yet). */
   owner_id?: number | null;
+  /** The owner's username (`users.username`); null with no owner. */
+  owner_name?: string | null;
   branch: string | null;
   kind: "managed" | "adopted";
   /** The CLI this lane's runs spawn. Immutable once the lane exists. */
@@ -3205,6 +3210,9 @@ export interface TranscriptContent {
   output?: string;
   /** Present for "tool_result" blocks: whether the tool call errored. */
   is_error?: boolean;
+  /** Present on a Write/Edit/MultiEdit "tool_result": the lines it added and
+   *  removed (from Claude Code's `structuredPatch`). */
+  diff?: { added: number; removed: number };
 }
 
 /** Who actually sent a transcript message. A JSONL `type:"user"` line can be the
@@ -3239,6 +3247,9 @@ export interface TranscriptMessage {
    *  Example: `"claude-opus-4-8"`. */
   model?: string;
   /** Token accounting reported alongside an assistant message; absent otherwise. */
+  /** Assistant lines: why the model stopped — "end_turn" closes the turn,
+   *  "tool_use" means more work follows. Absent from an older server. */
+  stop_reason?: string;
   usage?: {
     /** Fresh (non-cached) input tokens for this message. */
     input_tokens: number;

client/src/lib/userPrefs.ts

@@ -0,0 +1,186 @@
+/**
+ * @file userPrefs.ts
+ * @description An account's UI preferences, kept per ACCOUNT on the server
+ * (`/api/me/prefs`, docs/plans/onboarding) while every component goes on
+ * reading and writing localStorage as it always did. On sign-in `hydrate()`
+ * copies the account's stored values into localStorage (the account wins),
+ * sends up the ones this browser has and the account does not yet, and makes
+ * the theme, language and pet re-read them. From then on a write to one of
+ * `PREF_KEYS` through `localStorage.setItem`/`removeItem` is sent to the
+ * server, batched. `useOnboarding()` tells the setup wizard whether this
+ * account has been through it. Never throws: a server that cannot answer
+ * leaves the browser's own values in charge. The same row also holds
+ * `agenthub.chatUi`, which `lib/chatUi.ts` reads and writes on the server
+ * directly (no localStorage copy).
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useSyncExternalStore } from "react";
+import { api } from "./api";
+import i18n from "../i18n";
+import { applyStoredTheme } from "../hooks/useTheme";
+
+/** The localStorage keys an account's preferences are made of (server/routes/me.js). */
+export const PREF_KEYS = [
+  "theme",
+  "agenthub.theme.dark",
+  "agenthub.theme.light",
+  "i18nextLng",
+  "agenthub.terminal.font",
+  "agenthub.pet",
+  "agenthub.pet.size",
+  "agent-dashboard-sagi-enabled",
+  "agent-dashboard-sagi-muted",
+  "agent-monitor-notifications",
+  "agenthub.defaultTool",
+  "agenthub.permissionMode",
+  "agenthub.tour",
+  "agenthub.workspace.allTabs",
+] as const;
+const SYNCED = new Set<string>(PREF_KEYS);
+const PUSH_DELAY_MS = 400;
+
+// `forced`: Settings asked for the setup again, whatever the account has.
+type State = { loaded: boolean; onboardedAt: string | null; forced: boolean };
+let state: State = { loaded: false, onboardedAt: null, forced: false };
+const listeners = new Set<() => void>();
+const setState = (next: Partial<State>) => {
+  state = { ...state, ...next };
+  listeners.forEach((l) => l());
+};
+
+let pending: Record<string, string | null> = {};
+let timer: ReturnType<typeof setTimeout> | undefined;
+let syncing = false;
+
+function queue(key: string, value: string | null) {
+  if (!syncing) return;
+  pending[key] = value;
+  clearTimeout(timer);
+  timer = setTimeout(flush, PUSH_DELAY_MS);
+}
+
+/** Send what is queued now (also on page hide). */
+export function flush(): Promise<void> {
+  clearTimeout(timer);
+  const batch = pending;
+  pending = {};
+  if (!Object.keys(batch).length) return Promise.resolve();
+  return api.me
+    .savePrefs(batch)
+    .then(() => undefined)
+    .catch(() => {
+      /* offline or signed out: the browser keeps its own copy */
+    });
+}
+
+let wrapped = false;
+function wrapStorage() {
+  if (wrapped || typeof Storage === "undefined") return;
+  wrapped = true;
+  const proto = Storage.prototype;
+  const setItem = proto.setItem;
+  const removeItem = proto.removeItem;
+  proto.setItem = function (key: string, value: string) {
+    setItem.call(this, key, value);
+    if (this === window.localStorage && SYNCED.has(key)) queue(key, String(value));
+  };
+  proto.removeItem = function (key: string) {
+    removeItem.call(this, key);
+    if (this === window.localStorage && SYNCED.has(key)) queue(key, null);
+  };
+  window.addEventListener("pagehide", () => void flush());
+}
+
+function readLocal(key: string): string | null {
+  try {
+    return window.localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+
+/** Make what reads these keys read them again. */
+function reapply(prefs: Record<string, string>) {
+  // Painted now, not only on the next useTheme render: the login page wore the OS's.
+  applyStoredTheme();
+  window.dispatchEvent(new Event("agenthub-theme"));
+  window.dispatchEvent(new Event("sagi:prefs"));
+  const lng = prefs.i18nextLng;
+  if (lng && lng !== i18n.language) void i18n.changeLanguage(lng);
+}
+
+/**
+ * Load the signed-in account's preferences into this browser and start
+ * sending changes. Call once a login (or local mode) is known.
+ */
+export async function hydrate(): Promise<void> {
+  syncing = false;
+  pending = {};
+  let answer;
+  try {
+    answer = await api.me.prefs();
+  } catch {
+    // No answer (an older server, a test with no API): no wizard, no sync —
+    // the browser's own values stay in charge.
+    return;
+  }
+  const up: Record<string, string> = {};
+  for (const key of PREF_KEYS) {
+    const theirs = answer.prefs[key];
+    if (typeof theirs === "string") {
+      try {
+        window.localStorage.setItem(key, theirs);
+      } catch {
+        /* storage blocked */
+      }
+    } else {
+      const mine = readLocal(key);
+      if (mine !== null) up[key] = mine;
+    }
+  }
+  wrapStorage();
+  syncing = true;
+  reapply(answer.prefs);
+  if (Object.keys(up).length) {
+    pending = { ...up };
+    void flush();
+  }
+  setState({ loaded: true, onboardedAt: answer.onboardedAt });
+}
+
+/** The first-run setup is done or skipped, for this account. */
+export async function markOnboarded(): Promise<void> {
+  await flush();
+  const at = new Date().toISOString();
+  setState({ onboardedAt: at, forced: false });
+  try {
+    const r = await api.me.onboarded();
+    setState({ onboardedAt: r.onboardedAt || at });
+  } catch {
+    /* shown again next time — better than never saving the choices */
+  }
+}
+
+/** Show the setup again (Settings → System). */
+export function resetOnboarding(): void {
+  setState({ onboardedAt: null, forced: true });
+}
+
+const subscribe = (l: () => void) => {
+  listeners.add(l);
+  return () => listeners.delete(l);
+};
+
+/** `{loaded, onboardedAt, forced}` for the account signed in now. */
+export function useOnboarding(): State {
+  return useSyncExternalStore(subscribe, () => state);
+}
+
+/** Tests only. */
+export function __resetUserPrefs(): void {
+  state = { loaded: false, onboardedAt: null, forced: false };
+  pending = {};
+  syncing = false;
+  clearTimeout(timer);
+}

client/src/lib/workspaceTabs.ts

@@ -0,0 +1,28 @@
+/**
+ * @file workspaceTabs — Settings → Appearance → "Tabs from every workspace": a
+ * viewer preference in `localStorage` (`agenthub.workspace.allTabs`, synced to
+ * the account through `lib/userPrefs.ts`). On, the session view's tab bar
+ * holds every workspace's live sessions and a combo may mix them; off (the
+ * default), it shows only the selected workspace's. Read when the Workspace
+ * page mounts.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+export const ALL_TABS_KEY = "agenthub.workspace.allTabs";
+
+export function readAllTabs(): boolean {
+  try {
+    return window.localStorage.getItem(ALL_TABS_KEY) === "1";
+  } catch {
+    return false;
+  }
+}
+
+export function writeAllTabs(on: boolean) {
+  try {
+    if (on) window.localStorage.setItem(ALL_TABS_KEY, "1");
+    else window.localStorage.removeItem(ALL_TABS_KEY);
+  } catch {
+    /* storage blocked — the default */
+  }
+}

client/src/main.tsx

@@ -57,15 +57,18 @@ import "@fontsource/inter/latin-600.css";
 import "@fontsource/inter/latin-700.css";
 import "@fontsource/jetbrains-mono/latin-400.css";
 import "@fontsource/jetbrains-mono/latin-500.css";
+import "@fontsource/jetbrains-mono/latin-700.css";
 // The lane terminal renders live Vietnamese output in this font (TerminalView),
 // which the latin subset above doesn't cover — without it, missing glyphs fall
 // back to another installed face with a different advance width and get
 // visually mangled inside xterm's fixed-width cells.
 import "@fontsource/jetbrains-mono/vietnamese-400.css";
 import "@fontsource/jetbrains-mono/vietnamese-500.css";
+import "@fontsource/jetbrains-mono/vietnamese-700.css";
 // The rounded terminal font (Settings → Appearance). Its one file already holds
 // the Vietnamese glyphs; a face is only downloaded once something uses it.
 import "@fontsource/maple-mono/400.css";
+import "@fontsource/maple-mono/500.css";
 import "@fontsource/maple-mono/700.css";
 import App from "./App";
 import { AuthGate } from "./components/AuthGate";

client/src/pages/AiProxyConfig.tsx

@@ -21,6 +21,11 @@
  * A right-click on a profile row opens its Edit / Remove (plus Copy endpoint)
  * as a menu; the buttons stay.
  *
+ * In server mode a profile is SHARED (an admin's, usable by everyone) or
+ * PERSONAL (the signed-in user's own, badged "Personal"). A member edits only
+ * their own and every profile they add is personal; an admin chooses when
+ * adding; an analyst only reads.
+ *
  * **Test** asks the endpoint itself, once as Claude Code would
  * (`/v1/messages`) and once as Codex would (`/v1/responses`), one line each.
  * "Saved" and "works" are different claims, and the gap between them is only
@@ -43,13 +48,15 @@ import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../compone
 import { confirmDialog } from "../lib/confirm";
 import { copyText } from "../lib/clipboard";
 import { useDialog } from "../hooks/useDialog";
+import { useAuth } from "../components/AuthGate";
 
 const TIERS: (keyof AiProxyModels)[] = ["opus", "sonnet", "haiku", "smallFast", "subagent"];
 
-type FormState = Omit<AiProxyInput, "apiKey" | "models" | "behavesAs"> & {
+type FormState = Omit<AiProxyInput, "apiKey" | "models" | "behavesAs" | "scope"> & {
   apiKey: string;
   behavesAs: string;
   models: Partial<AiProxyModels>;
+  scope: "shared" | "personal";
 };
 
 const emptyForm = (): FormState => ({
@@ -59,10 +66,17 @@ const emptyForm = (): FormState => ({
   model: "",
   models: {},
   behavesAs: "",
+  scope: "shared",
 });
 
 export function AiProxyConfig() {
   const { t } = useTranslation("settings");
+  // Server mode's signed-in user; null in local mode, where the host owns
+  // every (shared) profile.
+  const { state: auth } = useAuth();
+  const user = auth.mode === "server" ? auth.user : null;
+  const isAdmin = !user || user.role === "admin";
+  const canWrite = (item: AiProxy) => !item.builtin && (item.scope === "personal" || isAdmin);
   const [items, setItems] = useState<AiProxy[]>([]);
   const [error, setError] = useState<string | null>(null);
   const [editing, setEditing] = useState<AiProxy | null>(null);
@@ -131,6 +145,7 @@ export function AiProxyConfig() {
       model: item.model,
       models: { ...item.models },
       behavesAs: item.behavesAs ?? "",
+      scope: item.scope ?? "shared",
     });
     setFormError(null);
     setOpen(true);
@@ -187,6 +202,7 @@ export function AiProxyConfig() {
         behavesAs: form.behavesAs.trim(),
       };
       if (form.apiKey.trim()) body.apiKey = form.apiKey.trim();
+      if (user && isAdmin && !editing) body.scope = form.scope;
 
       if (editing) await api.aiProxies.update(editing.name, body);
       else await api.aiProxies.create(body);
@@ -253,13 +269,18 @@ export function AiProxyConfig() {
             {items.map((item) => (
               <tr
                 key={item.name}
-                onContextMenu={item.builtin ? undefined : (e) => ctx.open(e, item)}
+                onContextMenu={canWrite(item) ? (e) => ctx.open(e, item) : undefined}
                 className="border-t border-border"
               >
                 <td className="px-3 py-2">
                   <span className="flex items-center gap-1.5 font-medium text-fg-primary">
                     {item.builtin && <Lock className="h-3 w-3 text-fg-muted" />}
                     {item.label}
+                    {item.scope === "personal" && (
+                      <span className="rounded bg-accent/15 px-1.5 py-px text-[10px] font-normal text-accent">
+                        {t("aiProxy.personal")}
+                      </span>
+                    )}
                   </span>
                   {item.builtin && (
                     <span className="mt-0.5 block text-[10px] text-fg-muted">
@@ -277,7 +298,7 @@ export function AiProxyConfig() {
                   {item.builtin ? "—" : item.hasKey ? t("aiProxy.keySet") : t("aiProxy.keyMissing")}
                 </td>
                 <td className="px-3 py-2 text-right">
-                  {!item.builtin && (
+                  {canWrite(item) && (
                     <span className="inline-flex gap-1">
                       <button
                         type="button"
@@ -349,6 +370,31 @@ export function AiProxyConfig() {
                 value={form.label}
                 onChange={(v) => setForm((f) => ({ ...f, label: v }))}
               />
+              {user && !editing && (
+                <div>
+                  <label className="mb-1 block text-xs text-fg-secondary" htmlFor="proxy-scope">
+                    {t("aiProxy.fieldScope")}
+                  </label>
+                  {isAdmin ? (
+                    <select
+                      id="proxy-scope"
+                      value={form.scope}
+                      onChange={(e) =>
+                        setForm((f) => ({ ...f, scope: e.target.value as FormState["scope"] }))
+                      }
+                      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"
+                    >
+                      <option value="shared">{t("aiProxy.scopeShared")}</option>
+                      <option value="personal">{t("aiProxy.scopePersonal")}</option>
+                    </select>
+                  ) : (
+                    <p id="proxy-scope" className="text-xs text-fg-primary">
+                      {t("aiProxy.scopePersonal")}
+                    </p>
+                  )}
+                  <p className="mt-1 text-[10px] text-fg-muted">{t("aiProxy.fieldScopeHint")}</p>
+                </div>
+              )}
               <Field
                 id="proxy-base-url"
                 label={t("aiProxy.fieldBaseUrl")}

client/src/pages/SettingsHub.tsx

@@ -140,7 +140,8 @@ const MOVED: Record<string, string> = {
 };
 
 /** Sections that only configure the host (ADMIN_WRITE_PREFIXES in server/lib/auth.js). */
-const ADMIN_SECTIONS = new Set(["data", "ai-proxy", "pricing"]);
+// AI Proxy is not here: every user keeps personal profiles (S3).
+const ADMIN_SECTIONS = new Set(["data", "pricing"]);
 
 /** An unknown section: say so, then show Appearance. */
 function UnknownSection({ name }: { name: string }) {