chore: v2.8.79 — token-gated and LAN-bound dashboards; pool login recovery

- /ws-pty carries the dashboard token like /ws (the terminal never attached
  with DASHBOARD_TOKEN set), and so does everything that cannot send the
  header: images, downloads, exports, drops (withToken/tokenHeader). A
  refused upgrade answers 401/403 and is logged and counted by reason.
- The browser asks for a missing or wrong token (401 EUNAUTHORIZED) and takes
  ?token= from the link agenthub start prints, dropping it from the URL.
- The CLI sends the token (DASHBOARD_TOKEN, else the one the running server
  publishes 0600 in <data dir>/runtime/dashboard-token); MCP and statusline
  read the same file.
- DASHBOARD_HOST takes a list, and 127.0.0.1 is always listened on too, so a
  LAN-only bind keeps hooks and the CLI working.
- agenthub start --host/--allowed-hosts/--token are saved in
  <data dir>/network.json for every later start; a wide bind gets a token;
  every reachable URL is printed.
- tmux < 3.7 is an amber, once-per-version notice that says only the pane
  scrollbar is missing, with a ~/.local build instead of sudo make install.
- INSTALL: PATH belongs in ~/.profile for sudo -iu/ssh; WSL mirrored notes.

.claude-plugin/plugin.json

@@ -39,6 +39,16 @@
             "async": true
           }
         ]
+      },
+      {
+        "matcher": "Artifact|mcp__claude_ai_.*__batch",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "node \"${CLAUDE_PLUGIN_ROOT}/scripts/artifact-export-hint.js\"",
+            "timeout": 5
+          }
+        ]
       }
     ],
     "Stop": [

INSTALL.md

@@ -57,20 +57,48 @@ sudo pacman -S git tmux          # Arch
 
 Windows has no native tmux. Run AgentHub under **WSL2** and install it inside
 the WSL distro — a tmux from Git Bash or MSYS is not what the server executes.
+
+**PATH for `agenthub`:** put `export PATH="$HOME/.local/bin:$PATH"` in
+`~/.profile`, not only `~/.bashrc`. A login shell that is not interactive —
+`sudo -iu <user> agenthub remote login`, an `ssh host agenthub …`, a systemd
+unit — reads `~/.profile`, and Ubuntu's `~/.bashrc` returns early when the shell
+is not interactive, so a PATH set only there is never seen (`agenthub: command
+not found`). Or call it by its full path, `~/.local/bin/agenthub`.
+
+**WSL2 with `networkingMode=mirrored`:** on some machines a Windows browser
+cannot reach WSL's `localhost`, so the dashboard must listen on an address
+Windows can reach. Save it once — every later start, the autostart unit and an
+update keep it:
+
+```bash
+agenthub start --host 0.0.0.0              # every interface (LAN and VPN too)
+agenthub start --host 192.168.1.20         # or only this address (and 127.0.0.1)
+```
+
+A non-loopback bind always gets a token (generated when you give none; `--token
+<t>` sets your own, `--token off` removes it) and `agenthub start` prints the
+links to open, each carrying `?token=` — the page keeps it and drops it from
+the address bar. The server also listens on `127.0.0.1` whenever the bind does
+not cover it, so hooks and the CLI keep working. `agenthub start --host local`
+goes back to loopback only.
 On a native Windows install, workspace terminals are unavailable, but Settings →
 Agents still detects each AI CLI through `PATHEXT` (`claude.exe`, `codex.cmd`)
 and runs a `.cmd` updater or npm through `cmd.exe`.
 
 A terminal pane gets a draggable scrollbar only on **tmux 3.7+** — older
 versions work, just without it, and `/agenthub-doctor` warns. Homebrew ships the
-latest (`brew upgrade tmux`); Ubuntu 24.04's apt has 3.4, so build the release:
+latest (`brew upgrade tmux`); Ubuntu 24.04's apt has 3.4, so build the release
+into your own `~/.local` — the system's tmux stays as it is:
 
 ```bash
 sudo apt install build-essential pkg-config libevent-dev libncurses-dev bison
 curl -fsSL https://github.com/tmux/tmux/releases/download/3.7c/tmux-3.7c.tar.gz | tar xz
-cd tmux-3.7c && ./configure && make && sudo make install   # into /usr/local/bin
+cd tmux-3.7c && ./configure --prefix="$HOME/.local" && make && make install   # into ~/.local/bin
+echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.profile   # ahead of /usr/bin
 ```
 
+(`sudo make install` instead puts it in `/usr/local/bin` for every account.)
+
 A tmux server already running keeps its old version until every tmux session
 has closed (or the machine reboots) — only then do the scrollbars appear.
 
@@ -444,6 +472,9 @@ npm run install-hooks
 | `AGENTHUB_IMPORT_MAX_FILES` | `2000` | Maximum number of files per upload request |
 | `AGENTHUB_IMPORT_MAX_EXTRACT_BYTES` | `4294967296` (4 GB) | Maximum uncompressed bytes any single archive is allowed to expand to (zip-bomb defense) |
 | `DASHBOARD_DATA_DIR` | `~/.claude/agenthub` | AgentHub's data dir; a plugin install keeps its runtime (deps, UI build, logs) in `runtime/` under it |
+| `DASHBOARD_HOST` | `127.0.0.1` | Address(es) to listen on, comma-separated (`192.168.1.20,100.64.0.7`); `127.0.0.1` is added whenever none covers it. Saved by `agenthub start --host` in `<data dir>/network.json`; the variable wins over the file |
+| `DASHBOARD_ALLOWED_HOSTS` | — | Extra `Host` names (comma-separated) for a LAN bind. Saved by `agenthub start --allowed-hosts` |
+| `DASHBOARD_TOKEN` | — | Access token for `/api/*` and the WebSockets. Saved by `agenthub start --token`; the running server publishes it in `<data dir>/runtime/dashboard-token` (0600) for the local CLI, MCP server and statusline |
 
 Example with a custom port:
 

bin/agenthub.js

@@ -147,6 +147,11 @@ function baseUrl() {
   return require(path.join(REPO_ROOT, "server", "lib", "dashboard-url.js")).dashboardUrl();
 }
 
+/** The dashboard-token header (`dashboard-url.js`), {} when none is set. */
+function dashboardTokenHeaders() {
+  return require(path.join(REPO_ROOT, "server", "lib", "dashboard-url.js")).tokenHeaders();
+}
+
 /** Thrown when the dashboard server does not answer — the dispatcher decides
  *  whether the active command has an offline fallback or must abort. */
 class ServerDownError extends Error {}
@@ -162,6 +167,8 @@ async function api(method, pathname, body, options = {}) {
       method,
       headers: {
         ...(body && !form ? { "Content-Type": "application/json" } : {}),
+        // DASHBOARD_TOKEN, else the one the running server published.
+        ...dashboardTokenHeaders(),
         // Server mode: inside a dashboard pane, act as the workspace's owner.
         ...(process.env.AGENTHUB_PANE_TOKEN
           ? { "x-agenthub-pane-token": process.env.AGENTHUB_PANE_TOKEN }
@@ -1133,6 +1140,107 @@ function renderPricingTable(rules) {
   );
 }
 
+/**
+ * `agenthub remote login|status|logout|upload` — this LOCAL AgentHub's link
+ * to the company hub (server/lib/remote-client.js, through the running
+ * dashboard's /api/remote-client). The password goes to the hub once and is
+ * never stored; only a device token is, which no command prints.
+ */
+async function cmdRemote(flags, positional) {
+  const sub = positional[0] || "status";
+  const show = (st) => {
+    if (!st.enrolled) {
+      console.log(
+        st.expired
+          ? c.yellow(
+              `This machine's hub login expired (${st.hub}) — run: agenthub remote login ${st.hub}`
+            )
+          : "Not enrolled with a company hub — run: agenthub remote login <hub url>"
+      );
+      return;
+    }
+    console.log(
+      `${c.green("●")} Enrolled with ${c.bold(st.hub)} as ${c.bold(st.user?.username || "?")}`
+    );
+    console.log(
+      c.dim(
+        `  device ${st.device?.name} (#${st.device?.id}), valid until ${new Date(st.device?.expiresAt).toLocaleString()}`
+      )
+    );
+    console.log(
+      c.dim(
+        "  Only sessions started on the Company account send their conversation and tokens to the hub (hourly)."
+      )
+    );
+  };
+  if (sub === "login") {
+    const hub = positional[1];
+    if (!hub) {
+      console.error(
+        c.red("✖ usage: agenthub remote login <hub url> [--user NAME] [--name DEVICE]")
+      );
+      process.exit(1);
+    }
+    let username = flags.user ? String(flags.user) : "";
+    if (!username) {
+      if (!process.stdin.isTTY) {
+        console.error(c.red("✖ --user is required when the password comes from stdin"));
+        process.exit(1);
+      }
+      const rl = require("node:readline").createInterface({
+        input: process.stdin,
+        output: process.stdout,
+      });
+      username = await new Promise((r) =>
+        rl.question("Hub username: ", (a) => (rl.close(), r(a.trim())))
+      );
+    }
+    const password = await askPassword(`Hub password for ${username}: `);
+    const r = await api(
+      "POST",
+      "/api/remote-client/login",
+      { hub, username, password, deviceName: flags.name ? String(flags.name) : undefined },
+      { allowError: true, timeoutMs: 30_000 }
+    );
+    if (r && r.status) {
+      console.error(c.red(`✖ ${r.data?.error?.message || `HTTP ${r.status}`}`));
+      process.exit(1);
+    }
+    show(r);
+    return;
+  }
+  if (sub === "logout") {
+    const r = await post("/api/remote-client/logout", {});
+    console.log(
+      r.wasEnrolled
+        ? `${c.green("✔")} Logged out${r.revokedOnHub ? " — the hub revoked this device" : c.yellow(" — the hub could not be reached; the token stops working when it expires or an admin revokes it")}`
+        : "This machine was not enrolled."
+    );
+    return;
+  }
+  if (sub === "upload") {
+    const r = await post("/api/remote-client/upload", {}, { timeoutMs: 600_000 });
+    console.log(`${c.green("✔")} Sent ${r.bytes} bytes of ${r.sessions} session(s)`);
+    for (const e of r.errors || []) console.log(c.yellow(`  ${e.sessionId}: ${e.message}`));
+    return;
+  }
+  if (sub === "status") {
+    const st = await get("/api/remote-client");
+    if (flags.json) return console.log(JSON.stringify(st, null, 2));
+    show(st);
+    for (const u of (st.uploads || []).slice(0, 10)) {
+      console.log(
+        c.dim(
+          `  ${u.sessionId.slice(0, 8)}  ${String(u.bytes || 0).padStart(9)} B  ${u.lastSentAt || "not sent yet"}  ${u.cwd || ""}`
+        )
+      );
+    }
+    return;
+  }
+  console.error(c.red(`✖ unknown: agenthub remote ${sub} (login | status | logout | upload)`));
+  process.exit(1);
+}
+
 async function cmdPricing(flags, positional) {
   const sub = positional[0];
   if (sub === "set" && positional[1]) {
@@ -1394,6 +1502,64 @@ async function cmdReinstallHooks() {
   console.log(`${c.green("✔")} Claude Code hooks reinstalled`);
 }
 
+/**
+ * Save `start`'s network flags into `<data dir>/network.json` (applied by every
+ * later server start): `--host A[,B]` (`local` = back to loopback only),
+ * `--allowed-hosts H,..` (`none` clears), `--token T|auto|off`. A wide bind
+ * with no token gets one made (`auto`), never left open silently. Returns
+ * whether anything changed.
+ */
+function saveNetworkFlags(flags) {
+  const net = require(path.join(REPO_ROOT, "server", "lib", "network-config.js"));
+  const patch = {};
+  if (typeof flags.host === "string") {
+    patch.host = flags.host === "local" ? null : flags.host;
+  } else if (flags.host === true) {
+    console.error(c.red("✖ --host needs an address, e.g. --host 0.0.0.0 (or --host local)"));
+    process.exit(1);
+  }
+  if (typeof flags["allowed-hosts"] === "string") {
+    patch.allowedHosts = flags["allowed-hosts"] === "none" ? null : flags["allowed-hosts"];
+  }
+  if (flags.token === "off") patch.token = null;
+  else if (flags.token === "auto" || flags.token === true) patch.token = net.newToken();
+  else if (typeof flags.token === "string") patch.token = flags.token;
+  if (Object.keys(patch).length === 0) {
+    net.applyNetworkConfig();
+    return false;
+  }
+  const saved = net.writeNetworkConfig(patch);
+  const wide = (saved.host || "")
+    .split(",")
+    .map((h) => h.trim())
+    .some((h) => h && !["127.0.0.1", "localhost", "::1", "[::1]"].includes(h));
+  if (wide && !saved.token && !process.env.DASHBOARD_TOKEN) {
+    // Reachable from the network with no token would be an open dashboard.
+    Object.assign(saved, net.writeNetworkConfig({ token: net.newToken() }));
+    console.log(c.yellow("  A token was generated: the dashboard is reachable from the network."));
+  }
+  console.log(`${c.green("✔")} Network settings saved to ${c.dim(net.configPath())}`);
+  net.applyNetworkConfig();
+  return true;
+}
+
+/**
+ * Print every URL the dashboard can be opened at (all of this machine's
+ * addresses for a 0.0.0.0 bind), each carrying `?token=` when one is set —
+ * the page stores it and drops it from the address bar.
+ */
+function printAccessUrls() {
+  const sec = require(path.join(REPO_ROOT, "server", "lib", "security.js"));
+  const port = Number(new URL(baseUrl()).port) || 4820;
+  const token = sec.getDashboardToken();
+  const urls = sec.accessUrls(port);
+  if (urls.length <= 1 && !token) return;
+  console.log(c.dim("  Open it at:"));
+  for (const u of urls) {
+    console.log(`    ${c.bold(token ? `${u}/?token=${encodeURIComponent(token)}` : u)}`);
+  }
+}
+
 /**
  * Start the dashboard server in the background (production mode, serving the
  * built client) and wait until /api/health answers. No-ops with a pointer to
@@ -1404,8 +1570,16 @@ async function cmdReinstallHooks() {
 async function cmdStart(flags) {
   // A Quit (`agenthub stop`) held the plugin bootstrap off; starting ends it.
   require(path.join(REPO_ROOT, "server", "lib", "quit.js")).clearQuit();
+  const changed = saveNetworkFlags(flags);
   if (await serverIsUp()) {
     console.log(`${c.green("●")} Dashboard already running at ${c.bold(baseUrl())}`);
+    if (changed) {
+      console.log(
+        c.yellow("  The new network settings were saved; they apply at the next start: ") +
+          c.bold("agenthub stop && agenthub start")
+      );
+    }
+    printAccessUrls();
     return;
   }
   // A plugin install starts the way a Claude Code session does: its bootstrap
@@ -1422,6 +1596,7 @@ async function cmdStart(flags) {
     while (Date.now() < deadline) {
       if (await serverIsUp()) {
         console.log(`${c.green("●")} Dashboard ${c.bold("up")} at ${c.bold(baseUrl())}`);
+        printAccessUrls();
         return;
       }
       await new Promise((r) => setTimeout(r, 500));
@@ -1471,6 +1646,7 @@ async function cmdStart(flags) {
       console.log(
         `${c.green("●")} Dashboard ${c.bold("up")} at ${c.bold(baseUrl())} ${c.dim(`(pid ${child.pid})`)}`
       );
+      printAccessUrls();
       console.log(c.dim("  Stop it with: agenthub stop"));
       return;
     }
@@ -2827,7 +3003,11 @@ const COMMAND_GROUPS = [
     "Server",
     [
       ["status", "", "Up/down indicator for the dashboard server"],
-      ["start", "[--port N]", "Start the server in the background and wait for healthy"],
+      [
+        "start",
+        "[--port N] [--host A[,B]|local] [--allowed-hosts H,..] [--token T|auto|off]",
+        "Start the server in the background and wait for healthy; --host/--allowed-hosts/--token are saved (data dir network.json) for every later start",
+      ],
       [
         "stop",
         "",
@@ -2934,6 +3114,19 @@ const COMMAND_GROUPS = [
       ["remote-sources rm <id>", "[--purge]", "Remove a source (--purge also deletes its data)"],
     ],
   ],
+  [
+    "Company hub",
+    [
+      [
+        "remote login <hub url>",
+        "[--user NAME --name DEVICE]",
+        "Enroll this machine (Company account)",
+      ],
+      ["remote status", "[--json]", "Enrollment and what was sent to the hub"],
+      ["remote upload", "", "Send the Company-account sessions' new lines now"],
+      ["remote logout", "", "Revoke this machine on the hub and forget it"],
+    ],
+  ],
   [
     "Workspaces",
     [
@@ -4549,6 +4742,8 @@ async function runCommand(argv) {
     case "remote-sources":
     case "remotes":
       return cmdRemoteSources(flags, positional);
+    case "remote":
+      return cmdRemote(flags, positional);
     case "pricing":
       return cmdPricing(flags, positional);
     case "import":

client/package-lock.json

@@ -25,6 +25,7 @@
         "i18next": "^26.0.8",
         "i18next-browser-languagedetector": "^8.2.1",
         "lucide-react": "^1.61.0",
+        "pdfjs-dist": "6.4.299",
         "react": "^19.3.1",
         "react-dom": "^19.3.1",
         "react-i18next": "^17.0.4",
@@ -1194,6 +1195,241 @@
       "integrity": "sha512-Wy0V7+SGUjnF9/TkiM1hKVDPj7jKXduPNboMVtHTA8dySMURWqfg/JZ9E2Sq8JgSJmkl7k7Qe9FLeMSrSraWmQ==",
       "license": "MIT"
     },
+    "node_modules/@napi-rs/canvas": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas/-/canvas-1.1.0.tgz",
+      "integrity": "sha512-k+ph/D8H9GS8ZZ48okvHrKeJynkqAA1kMUZRuzRWNlQUDHXngq7oRaWMZBdmSfd9ZhVy9bwNKei/7wMboI/uMg==",
+      "optional": true,
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "optionalDependencies": {
+        "@napi-rs/canvas-android-arm64": "1.1.0",
+        "@napi-rs/canvas-darwin-arm64": "1.1.0",
+        "@napi-rs/canvas-darwin-x64": "1.1.0",
+        "@napi-rs/canvas-linux-arm-gnueabihf": "1.1.0",
+        "@napi-rs/canvas-linux-arm64-gnu": "1.1.0",
+        "@napi-rs/canvas-linux-arm64-musl": "1.1.0",
+        "@napi-rs/canvas-linux-riscv64-gnu": "1.1.0",
+        "@napi-rs/canvas-linux-x64-gnu": "1.1.0",
+        "@napi-rs/canvas-linux-x64-musl": "1.1.0",
+        "@napi-rs/canvas-win32-arm64-msvc": "1.1.0",
+        "@napi-rs/canvas-win32-x64-msvc": "1.1.0"
+      }
+    },
+    "node_modules/@napi-rs/canvas-android-arm64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-android-arm64/-/canvas-android-arm64-1.1.0.tgz",
+      "integrity": "sha512-mKrSmRyhWK4q699Q1xthbZIZi7JBvLtsRNnOZAeFaLPOFT1yo8y82aRC2nNZbXTGJXU7fVDONgGQPr0vo3kerw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-darwin-arm64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-arm64/-/canvas-darwin-arm64-1.1.0.tgz",
+      "integrity": "sha512-iqwST4g0oH+x8VCpBIYh+MYokv/mVvkM+v9oJGB0d9A3P2qBh42ogJlVyWq9SpPCrAjS7tplMb1D3OIfxl+utw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-darwin-x64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-x64/-/canvas-darwin-x64-1.1.0.tgz",
+      "integrity": "sha512-jkeA8eVTxDum03LTvc32YJ28F6KB1U0gYwnWMfOAUQZvWWEh/kvONby4iWGJx3+Tw45UqMGMXjtw2GKNVZDhVg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm-gnueabihf": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm-gnueabihf/-/canvas-linux-arm-gnueabihf-1.1.0.tgz",
+      "integrity": "sha512-Y4YkKG1ijoqkgUdTEEBNG4k+2BK5bR5jGL6S56YxCXYPwGfUd5nED8/74xyc7z+bpixPasCjSYoP3xYPOIGNxw==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm64-gnu": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-gnu/-/canvas-linux-arm64-gnu-1.1.0.tgz",
+      "integrity": "sha512-dE/XthqYkiWcBVtKFlZbUXwAYfDuQGqDWixznipJNmevLGpprNnTVQZyftm1RZJudkIOn2EkzYZDMMETM08Row==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm64-musl": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-musl/-/canvas-linux-arm64-musl-1.1.0.tgz",
+      "integrity": "sha512-DqZ/CMcHlhU56pPjv9AP0h3U7MFQ5LzC1HzMyRMotL+PFsJmZJA/ziApPYVyyz78DaVLhI8t3So3ztqtijbYpg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-riscv64-gnu": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-riscv64-gnu/-/canvas-linux-riscv64-gnu-1.1.0.tgz",
+      "integrity": "sha512-kJ7m5n2VffxWXM5QGa5lfq8ZN4LdOJEoz3aAJAmIqYvKiZw1gRdXqpucnRXsF6D9nLYiiIlevaAtAclR7c5ilg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-x64-gnu": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-gnu/-/canvas-linux-x64-gnu-1.1.0.tgz",
+      "integrity": "sha512-uQ9JuJlRhQdHyttcMWOiwLkfIqkqaB0YFUVe835LUe12THt2b51HXkTItq0fxWT1jdhUPX2ylWZ1walkJyD6GQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-x64-musl": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-musl/-/canvas-linux-x64-musl-1.1.0.tgz",
+      "integrity": "sha512-has4CPPAkkCac/LZ13VAw5p+MJLdaKVoyrhumN/A7uJd6960xYkJNDZgUebyxiha82AFzXx6RV+QJg5qGG079g==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-win32-arm64-msvc": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-arm64-msvc/-/canvas-win32-arm64-msvc-1.1.0.tgz",
+      "integrity": "sha512-MJnktLKNijmXqdjTughHDZ9TDLZ9uUm2hvFXqaOqn0+w7lphXFnft6bpSgQAc9U1exc20UGIBlzGu9+kiCj9Ag==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-win32-x64-msvc": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-x64-msvc/-/canvas-win32-x64-msvc-1.1.0.tgz",
+      "integrity": "sha512-08575bFk7iiadxap4h+JxgGut9xDCHAGum6wh0eInN53zEMImkmEHi5MushX2FOmNO7qRNX7BPiDC5ZYBwHeEg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
     "node_modules/@napi-rs/lzma-linux-x64-gnu": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/@napi-rs/lzma-linux-x64-gnu/-/lzma-linux-x64-gnu-1.5.1.tgz",
@@ -5406,6 +5642,17 @@
         "node": ">= 14.16"
       }
     },
+    "node_modules/pdfjs-dist": {
+      "version": "6.4.299",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-6.4.299.tgz",
+      "integrity": "sha512-AVl138zALtfaAPvADulE0PZThbYzCBS79nL4pOSL/6Sm/4AH5A21BD9VHt97OlCuzJuCpmeZtAtkinisF4Vb1g==",
+      "engines": {
+        "node": ">=22.13.0 || >=24"
+      },
+      "optionalDependencies": {
+        "@napi-rs/canvas": "^1.0.10"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",

client/package.json

@@ -28,6 +28,7 @@
     "i18next": "^26.0.8",
     "i18next-browser-languagedetector": "^8.2.1",
     "lucide-react": "^1.61.0",
+    "pdfjs-dist": "6.4.299",
     "react": "^19.3.1",
     "react-dom": "^19.3.1",
     "react-i18next": "^17.0.4",

client/src/components/AlertsNotifications.tsx

@@ -132,6 +132,8 @@ const RULE_TYPES: AlertRuleType[] = [
   "cost_threshold",
   "budget",
 ];
+/** Only a hub (server mode) has remote clients to alert about. */
+const SERVER_RULE_TYPES: AlertRuleType[] = ["remote_unmonitored"];
 
 type TabKey = "rules" | "channels" | "activity";
 
@@ -243,6 +245,8 @@ function buildConfig(form: RuleFormState): AlertRule["config"] {
       if (form.budget_tool) config.tool = form.budget_tool;
       return config;
     }
+    case "remote_unmonitored":
+      return {};
   }
 }
 
@@ -278,6 +282,8 @@ function describeRule(rule: AlertRule, t: (key: string, opts?: Record<string, un
         period: t(`periods.${c.period ?? "month"}`),
         thresholds: (c.thresholds ?? []).join("%, ") + "%",
       });
+    case "remote_unmonitored":
+      return t("ruleDesc.remoteUnmonitored");
   }
 }
 
@@ -286,7 +292,8 @@ export function AlertsNotifications() {
   const { t: ts } = useTranslation("settings");
 
   // Rules and channels (webhooks) fire for every user's sessions: an admin's.
-  const { isAdmin } = usePermissions();
+  const { isAdmin, local } = usePermissions();
+  const ruleTypes = local ? RULE_TYPES : [...RULE_TYPES, ...SERVER_RULE_TYPES];
   const [tab, setTab] = useState<TabKey>(isAdmin ? "rules" : "activity");
 
   // Rules
@@ -613,7 +620,7 @@ export function AlertsNotifications() {
                       title={editingId ? t("rules.typeFixed") : undefined}
                       className="select w-full"
                     >
-                      {RULE_TYPES.map((type) => (
+                      {ruleTypes.map((type) => (
                         <option key={type} value={type}>
                           {t(`ruleTypes.${type}`)}
                         </option>

client/src/components/AuthGate.tsx

@@ -11,6 +11,9 @@
  * `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`).
+ * With DASHBOARD_TOKEN set, a 401 `EUNAUTHORIZED` (from `/auth/me` or any
+ * request, `TOKEN_REQUIRED_EVENT`) shows the token prompt instead: the token is
+ * kept in this browser and the page reloads with it.
  * The login page follows the OS's light/dark (`AuthCard`). An account whose
  * password an admin gave (`mustChangePassword`) sees only
  * `FirstPasswordPage` until it picks its own.
@@ -30,7 +33,15 @@ import { useTranslation } from "react-i18next";
 import { Eye, EyeOff } from "lucide-react";
 import { AuthCard } from "./AuthCard";
 import { FirstPasswordPage } from "./FirstPasswordPage";
-import { api, AUTH_REQUIRED_EVENT, type AuthState, type AuthUser } from "../lib/api";
+import {
+  api,
+  AUTH_REQUIRED_EVENT,
+  dashboardToken,
+  saveDashboardToken,
+  TOKEN_REQUIRED_EVENT,
+  type AuthState,
+  type AuthUser,
+} from "../lib/api";
 import { hydrate } from "../lib/userPrefs";
 
 type AuthValue = {
@@ -72,6 +83,10 @@ export function usePermissions() {
     // A developer only ever sees their own rows, so everything shown is theirs.
     canEditLane: (lane?: { owner_id?: number | null } | null) =>
       isAdmin || user?.role === "developer" || (!!user && lane?.owner_id === user.id),
+    // Owner-only actions on a workspace (rename, reset, remove, share): its
+    // owner or an admin. A workspace shared with this user is not theirs.
+    ownsLane: (lane?: { owner_id?: number | null } | null) =>
+      isAdmin || (!!user && lane?.owner_id === user.id),
   };
 }
 
@@ -91,6 +106,8 @@ export function AuthGate({ children }: { children: ReactNode }) {
   // null = still asking the server. A browser that last saw local mode starts
   // there and is corrected by the answer (or by a 401) if that changed.
   const [state, setState] = useState<AuthState | null>(cachedState);
+  // DASHBOARD_TOKEN is set and this browser's token is missing or wrong.
+  const [needToken, setNeedToken] = useState(false);
 
   useEffect(() => {
     let timer: number | undefined;
@@ -109,6 +126,10 @@ export function AuthGate({ children }: { children: ReactNode }) {
         })
         .catch((err: { status?: number; code?: string }) => {
           if (!alive) return;
+          if (err?.status === 401 && err?.code === "EUNAUTHORIZED") {
+            setNeedToken(true);
+            return;
+          }
           // An answer that is not this build's: an older server still running
           // under a freshly built UI (404, or its index.html → EBADRESPONSE), or
           // DASHBOARD_TOKEN's own 401 — neither is server mode, so render the
@@ -130,10 +151,13 @@ export function AuthGate({ children }: { children: ReactNode }) {
     // Any request answering 401 EAUTH means server mode with no valid login.
     const onRequired = () => setState({ mode: "server", user: null });
     window.addEventListener(AUTH_REQUIRED_EVENT, onRequired);
+    const onToken = () => setNeedToken(true);
+    window.addEventListener(TOKEN_REQUIRED_EVENT, onToken);
     return () => {
       alive = false;
       window.clearTimeout(timer);
       window.removeEventListener(AUTH_REQUIRED_EVENT, onRequired);
+      window.removeEventListener(TOKEN_REQUIRED_EVENT, onToken);
     };
   }, []);
 
@@ -158,6 +182,7 @@ export function AuthGate({ children }: { children: ReactNode }) {
     []
   );
 
+  if (needToken) return <TokenPage />;
   if (!state) return null;
   if (state.mode === "server" && !state.user) {
     return <LoginPage onLoggedIn={(user) => setState({ mode: "server", user })} />;
@@ -262,3 +287,65 @@ function LoginPage({ onLoggedIn }: { onLoggedIn: (user: AuthUser) => void }) {
     </AuthCard>
   );
 }
+
+/**
+ * DASHBOARD_TOKEN's own prompt: the token is kept in this browser
+ * (`localStorage.dashboard_token`) and the page reloads, so every request,
+ * WebSocket and image starts again with it. A token already saved here that
+ * the server refused is shown as wrong.
+ */
+function TokenPage() {
+  const { t } = useTranslation();
+  const [token, setToken] = useState("");
+  const [show, setShow] = useState(false);
+  const hadOne = Boolean(dashboardToken());
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    const value = token.trim();
+    if (!value) return;
+    saveDashboardToken(value);
+    window.location.reload();
+  };
+
+  return (
+    <AuthCard title={t("auth.tokenTitle")} subtitle={t("auth.tokenSubtitle")} onSubmit={submit}>
+      <div className="space-y-1.5 text-sm font-medium text-fg-primary">
+        <label htmlFor="dashboard-token">{t("auth.tokenLabel")}</label>
+        <div className="relative">
+          <input
+            id="dashboard-token"
+            className="input h-11 w-full pl-4 pr-11 font-mono"
+            type={show ? "text" : "password"}
+            autoComplete="off"
+            autoFocus
+            required
+            value={token}
+            onChange={(e) => setToken(e.target.value)}
+          />
+          <button
+            type="button"
+            onClick={() => setShow((v) => !v)}
+            aria-label={show ? t("auth.hidePassword") : t("auth.showPassword")}
+            aria-pressed={show}
+            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"
+          >
+            {show ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+          </button>
+        </div>
+      </div>
+      {hadOne && (
+        <p role="alert" className="text-sm text-status-danger">
+          {t("auth.tokenWrong")}
+        </p>
+      )}
+      <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"
+      >
+        {t("auth.tokenSubmit")}
+      </button>
+      <p className="text-center text-sm text-fg-secondary">{t("auth.tokenHint")}</p>
+    </AuthCard>
+  );
+}

client/src/components/PdfView.tsx

@@ -0,0 +1,102 @@
+/**
+ * @file PdfView.tsx
+ * @description A PDF drawn by pdf.js onto canvases, page after page — the
+ * Artifacts preview's PDF viewer. The browser's own viewer cannot run inside
+ * the sandbox the preview keeps (it blocks plugins), and opening a shared PDF
+ * on the dashboard's origin would be the risk the sandbox exists for; pdf.js
+ * only DRAWS the file (no scripting sandbox loaded, no XFA, no links
+ * followed), so nothing in it runs. pdf.js and its worker are loaded the
+ * first time a PDF is opened (a separate chunk), never with the dashboard.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Loader2 } from "lucide-react";
+
+/** Pages drawn at most: a 500-page export would otherwise hold every canvas. */
+const MAX_PAGES = 200;
+const MAX_BYTES = 64 * 1024 * 1024;
+
+async function loadPdfJs() {
+  // The legacy build: the modern one needs `Promise.try` and friends, which a
+  // browser a year old lacks — the PDF would then just fail to open.
+  const pdfjs = await import("pdfjs-dist/legacy/build/pdf.mjs");
+  if (!pdfjs.GlobalWorkerOptions.workerSrc) {
+    pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+      "pdfjs-dist/legacy/build/pdf.worker.min.mjs",
+      import.meta.url
+    ).toString();
+  }
+  return pdfjs;
+}
+
+export function PdfView({ url, title }: { url: string; title: string }) {
+  const { t } = useTranslation("artifacts");
+  const box = useRef<HTMLDivElement>(null);
+  const [state, setState] = useState<"loading" | "ready" | "failed">("loading");
+  const [pages, setPages] = useState(0);
+
+  useEffect(() => {
+    let live = true;
+    let destroy: (() => void) | null = null;
+    setState("loading");
+    (async () => {
+      const res = await fetch(url, { credentials: "same-origin" });
+      if (!res.ok) throw new Error(String(res.status));
+      const data = new Uint8Array(await res.arrayBuffer());
+      if (data.byteLength > MAX_BYTES) throw new Error("too big");
+      const pdfjs = await loadPdfJs();
+      const task = pdfjs.getDocument({
+        data,
+        enableXfa: false,
+        disableAutoFetch: true,
+      });
+      destroy = () => void task.destroy();
+      const doc = await task.promise;
+      if (!live || !box.current) return;
+      setPages(doc.numPages);
+      const width = Math.max(320, box.current.clientWidth - 32);
+      const ratio = window.devicePixelRatio || 1;
+      box.current.replaceChildren();
+      for (let n = 1; n <= Math.min(doc.numPages, MAX_PAGES); n++) {
+        const page = await doc.getPage(n);
+        if (!live || !box.current) return;
+        const base = page.getViewport({ scale: 1 });
+        const viewport = page.getViewport({ scale: (width / base.width) * ratio });
+        const canvas = document.createElement("canvas");
+        canvas.width = Math.floor(viewport.width);
+        canvas.height = Math.floor(viewport.height);
+        canvas.style.width = `${Math.floor(viewport.width / ratio)}px`;
+        canvas.className = "mx-auto mb-3 block bg-white shadow";
+        canvas.setAttribute("aria-label", t("pdf.page", { n }));
+        box.current.appendChild(canvas);
+        await page.render({ canvas, viewport }).promise;
+        if (n === 1 && live) setState("ready");
+      }
+    })().catch(() => live && setState("failed"));
+    return () => {
+      live = false;
+      destroy?.();
+    };
+  }, [url, t]);
+
+  return (
+    <div className="relative h-full overflow-auto bg-surface-2 p-4" data-testid="pdf-view">
+      {state === "loading" && (
+        <div className="absolute inset-0 flex items-center justify-center text-fg-muted">
+          <Loader2 className="h-5 w-5 animate-spin" aria-label={t("loading")} />
+        </div>
+      )}
+      {state === "failed" && (
+        <p className="p-6 text-center text-sm text-fg-secondary">{t("pdf.failed")}</p>
+      )}
+      <div ref={box} role="document" aria-label={title} />
+      {pages > MAX_PAGES && (
+        <p className="py-2 text-center text-xs text-fg-muted">
+          {t("pdf.more", { shown: MAX_PAGES, total: pages })}
+        </p>
+      )}
+    </div>
+  );
+}

client/src/components/Select.tsx

@@ -15,6 +15,14 @@
  * the next option whose label starts with it. Focus returns to the trigger on
  * every close except Tab.
  *
+ * ## Search — a combobox once the list is long
+ * With more than `SEARCH_FROM` options (or `searchable`), the popup opens with
+ * a search box on top, focused: typing narrows the list to options whose
+ * label or value contains the text (case-insensitive), ↑/↓ move, Enter picks,
+ * Escape closes. The box is `role="combobox"` controlling the listbox through
+ * `aria-activedescendant`. Options may carry a `group`: a heading is drawn
+ * where the group changes.
+ *
  * ## Consumers
  * Used on the Run Claude page and webhook settings form wherever a compact
  * enum picker is needed.
@@ -73,7 +81,11 @@
  * ----------------------------------------------------------------------------- */
 
 import { useEffect, useId, useRef, useState, type ReactNode } from "react";
-import { ChevronDown, Check } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { ChevronDown, Check, Search } from "lucide-react";
+
+/** A list longer than this gets a search box (unless `searchable` says otherwise). */
+export const SEARCH_FROM = 8;
 
 /** 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
@@ -95,6 +107,8 @@ export interface SelectOption<T extends string> {
   icon?: ReactNode;
   /** Draw a rule above this option: it starts a group of its own. */
   divider?: boolean;
+  /** The group this option belongs to: a heading is drawn where it changes. */
+  group?: string;
 }
 
 /** Props for {@link Select}. */
@@ -111,6 +125,10 @@ export interface SelectProps<T extends string> {
   variant?: "field" | "ghost";
   /** Accessible name and tooltip of the trigger (a ghost one has no label). */
   label?: string;
+  /** Show the search box: default only for lists longer than `SEARCH_FROM`. */
+  searchable?: boolean;
+  /** The search box's name and placeholder (default: "Search…"). */
+  searchLabel?: string;
 }
 
 /**
@@ -124,15 +142,26 @@ export function Select<T extends string>({
   disabled,
   variant = "field",
   label,
+  searchable,
+  searchLabel,
 }: SelectProps<T>) {
+  const { t } = useTranslation("common");
   const ghost = variant === "ghost";
+  const canSearch = searchable ?? options.length > SEARCH_FROM;
+  const [query, setQuery] = useState("");
   const [open, setOpen] = useState(false);
   const [active, setActive] = useState(0);
   const [openUp, setOpenUp] = useState(false);
   const containerRef = useRef<HTMLDivElement | null>(null);
   const buttonRef = useRef<HTMLButtonElement | null>(null);
   const listRef = useRef<HTMLDivElement | null>(null);
+  const searchRef = useRef<HTMLInputElement | null>(null);
   const typed = useRef({ text: "", at: 0 });
+  // The options shown: all of them, or those the search text matches.
+  const q = canSearch ? query.trim().toLowerCase() : "";
+  const shown = q
+    ? options.filter((o) => `${o.label} ${o.value}`.toLowerCase().includes(q))
+    : options;
   const id = useId();
   const optionId = (idx: number) => `${id}-opt-${idx}`;
 
@@ -150,6 +179,7 @@ export function Select<T extends string>({
   // above the trigger (288 px = `max-h-72`), and move focus into the list.
   useEffect(() => {
     if (!open) return;
+    setQuery("");
     const idx = options.findIndex((o) => o.value === value);
     setActive(idx >= 0 ? idx : 0);
     if (buttonRef.current) {
@@ -159,14 +189,14 @@ export function Select<T extends string>({
       );
       setOpenUp(below < 288 && above > below);
     }
-    listRef.current?.focus({ preventScroll: true });
+    (canSearch ? searchRef.current : listRef.current)?.focus({ preventScroll: true });
     // eslint-disable-next-line react-hooks/exhaustive-deps -- only on open
   }, [open]);
 
   useEffect(() => {
     if (open) document.getElementById(optionId(active))?.scrollIntoView?.({ block: "nearest" });
     // eslint-disable-next-line react-hooks/exhaustive-deps -- id is stable
-  }, [open, active]);
+  }, [open, active, q]);
 
   const close = (refocus = true) => {
     setOpen(false);
@@ -185,8 +215,12 @@ export function Select<T extends string>({
     }
   };
 
-  const onListKey = (e: React.KeyboardEvent<HTMLDivElement>) => {
-    const last = options.length - 1;
+  const onListKey = (e: React.KeyboardEvent<HTMLElement>) => {
+    const last = shown.length - 1;
+    // In the search box, keys that edit text stay the box's own.
+    const inSearch = e.currentTarget === searchRef.current;
+    if (inSearch && (e.key === " " || e.key === "Home" || e.key === "End")) return;
+    if (inSearch && e.key === "Enter" && e.nativeEvent.isComposing) return;
     const move: Record<string, (a: number) => number> = {
       ArrowDown: (a) => Math.min(last, a + 1),
       ArrowUp: (a) => Math.max(0, a - 1),
@@ -200,7 +234,7 @@ export function Select<T extends string>({
       setActive(move[e.key]!);
     } else if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
-      const opt = options[active];
+      const opt = shown[active];
       if (opt) choose(opt);
     } else if (e.key === "Escape") {
       // Stop here: a Select inside a dialog must not close the dialog too.
@@ -209,7 +243,7 @@ export function Select<T extends string>({
       close();
     } else if (e.key === "Tab") {
       close(false);
-    } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+    } else if (!inSearch && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
       // Type-ahead: keys typed within 500 ms build one prefix; a repeated single
       // character cycles through the options that start with it.
       const now = Date.now();
@@ -258,57 +292,100 @@ export function Select<T extends string>({
       </button>
       {open && (
         <div
-          ref={listRef}
-          id={`${id}-list`}
-          role="listbox"
-          tabIndex={-1}
-          aria-label={label}
-          aria-activedescendant={options[active] ? optionId(active) : undefined}
-          onKeyDown={onListKey}
-          onBlur={(e) => {
-            if (!containerRef.current?.contains(e.relatedTarget as Node | null)) setOpen(false);
-          }}
-          className={`absolute z-30 left-0 ${ghost ? "w-max min-w-[12rem] max-w-[20rem]" : "right-0"} rounded-md border border-border bg-surface-1 shadow-lg shadow-black/40 max-h-72 overflow-auto py-1 outline-none ${
+          className={`absolute z-30 left-0 ${ghost ? "w-max min-w-[12rem] max-w-[20rem]" : "right-0"} flex max-h-72 flex-col overflow-hidden rounded-md border border-border bg-surface-1 shadow-lg shadow-black/40 ${
             openUp ? "bottom-full mb-1" : "top-full mt-1"
           }`}
         >
-          {options.map((opt, idx) => {
-            const isSelected = opt.value === value;
-            const isActive = idx === active;
-            return (
-              <div
-                key={opt.value || "__default__"}
-                id={optionId(idx)}
-                role="option"
-                aria-selected={isSelected}
-                onMouseDown={(e) => e.preventDefault()}
-                onClick={() => choose(opt)}
-                onMouseEnter={() => setActive(idx)}
-                className={`w-full cursor-pointer text-left px-3 py-1.5 transition-colors ${
-                  opt.divider ? "mt-1 border-t border-border pt-2" : ""
-                } ${
-                  isActive ? "bg-accent/15" : isSelected ? "bg-surface-3" : "hover:bg-surface-3"
-                }`}
-              >
-                <div className="flex items-center gap-2">
-                  {opt.icon}
-                  <span
-                    className={`text-[11px] flex-1 truncate ${
-                      isSelected ? "text-accent font-medium" : "text-fg-secondary"
+          {canSearch && (
+            <div className="flex shrink-0 items-center gap-1.5 border-b border-border px-2.5 py-1.5">
+              <Search className="h-3 w-3 shrink-0 text-fg-muted" aria-hidden />
+              <input
+                ref={searchRef}
+                role="combobox"
+                aria-label={searchLabel ?? t("select.search")}
+                aria-expanded
+                aria-controls={`${id}-list`}
+                aria-autocomplete="list"
+                aria-activedescendant={shown[active] ? optionId(active) : undefined}
+                placeholder={searchLabel ?? t("select.search")}
+                value={query}
+                onChange={(e) => {
+                  setQuery(e.target.value);
+                  setActive(0);
+                }}
+                onKeyDown={onListKey}
+                onBlur={(e) => {
+                  if (!containerRef.current?.contains(e.relatedTarget as Node | null))
+                    setOpen(false);
+                }}
+                className="min-w-0 flex-1 bg-transparent text-[11px] text-fg-primary placeholder:text-fg-muted focus:outline-none"
+              />
+            </div>
+          )}
+          <div
+            ref={listRef}
+            id={`${id}-list`}
+            role="listbox"
+            tabIndex={-1}
+            aria-label={label}
+            aria-activedescendant={!canSearch && shown[active] ? optionId(active) : undefined}
+            onKeyDown={onListKey}
+            onBlur={(e) => {
+              if (!containerRef.current?.contains(e.relatedTarget as Node | null)) setOpen(false);
+            }}
+            className="min-h-0 flex-1 overflow-auto py-1 outline-none"
+          >
+            {canSearch && shown.length === 0 && (
+              <div className="px-3 py-1.5 text-[11px] text-fg-muted">{t("select.noMatch")}</div>
+            )}
+            {shown.map((opt, idx) => {
+              const isSelected = opt.value === value;
+              const isActive = idx === active;
+              const heading = opt.group && opt.group !== shown[idx - 1]?.group ? opt.group : null;
+              return (
+                <div key={opt.value || "__default__"} role="none">
+                  {heading && (
+                    <div
+                      role="presentation"
+                      className="mt-1 border-t border-border px-3 pb-0.5 pt-1.5 text-[10px] font-medium text-fg-muted"
+                    >
+                      {heading}
+                    </div>
+                  )}
+                  <div
+                    id={optionId(idx)}
+                    role="option"
+                    aria-selected={isSelected}
+                    onMouseDown={(e) => e.preventDefault()}
+                    onClick={() => choose(opt)}
+                    onMouseEnter={() => setActive(idx)}
+                    className={`w-full cursor-pointer text-left px-3 py-1.5 transition-colors ${
+                      opt.divider ? "mt-1 border-t border-border pt-2" : ""
+                    } ${
+                      isActive ? "bg-accent/15" : isSelected ? "bg-surface-3" : "hover:bg-surface-3"
                     }`}
                   >
-                    {opt.label}
-                  </span>
-                  {isSelected && (
-                    <Check className="w-3 h-3 text-accent flex-shrink-0" aria-hidden />
-                  )}
+                    <div className="flex items-center gap-2">
+                      {opt.icon}
+                      <span
+                        className={`text-[11px] flex-1 truncate ${
+                          isSelected ? "text-accent font-medium" : "text-fg-secondary"
+                        }`}
+                      >
+                        {opt.label}
+                      </span>
+                      {isSelected && (
+                        <Check className="w-3 h-3 text-accent flex-shrink-0" aria-hidden />
+                      )}
+                    </div>
+                    {opt.hint && (
+                      <div className="text-[10px] text-fg-muted truncate mt-0.5">{opt.hint}</div>
+                    )}
+                  </div>
                 </div>
-                {opt.hint && (
-                  <div className="text-[10px] text-fg-muted truncate mt-0.5">{opt.hint}</div>
-                )}
-              </div>
-            );
-          })}
+              );
+            })}
+          </div>
         </div>
       )}
     </div>

client/src/components/StatusBar.tsx

@@ -29,7 +29,7 @@
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { Fragment, useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
 import { Link, useLocation } from "react-router-dom";
@@ -38,6 +38,12 @@ import { api, type RunHandle, type UserQuotaStatus } from "../lib/api";
 import type { BudgetStatus, CostResult, ToolQuota } from "../lib/types";
 import { fmt, fmtCostFull, formatDateTime, formatModelName, timeAgo } from "../lib/format";
 import { AiToolIcon } from "./AiToolIcon";
+import {
+  HIDDEN_PROFILES_EVENT,
+  isHiddenProfilesKey,
+  readHiddenProfiles,
+  standIn,
+} from "../lib/hiddenProfilesStorage";
 import { useLiveRefresh } from "../hooks/useLiveRefresh";
 import { useSpin } from "../hooks/useSpin";
 import { sessionChangeMatcher } from "../lib/sessionChange";
@@ -276,10 +282,44 @@ function QuotaPanel({
   );
 }
 
+/** The profiles hidden in Settings → AI tools → Profiles, kept current. */
+function useHiddenProfiles(): string[] {
+  const [hidden, setHidden] = useState<string[]>(readHiddenProfiles);
+  useEffect(() => {
+    const again = () => setHidden(readHiddenProfiles());
+    const onStorage = (e: StorageEvent) => isHiddenProfilesKey(e.key) && again();
+    window.addEventListener(HIDDEN_PROFILES_EVENT, again);
+    window.addEventListener("storage", onStorage);
+    return () => {
+      window.removeEventListener(HIDDEN_PROFILES_EVENT, again);
+      window.removeEventListener("storage", onStorage);
+    };
+  }, []);
+  return hidden;
+}
+
+/**
+ * Claude rows without the hidden profiles. When the live login is one of
+ * them, the first visible profile stands in as the live row — its own usage
+ * on the chip and the panel — so the panel never names the hidden account.
+ */
+export function withoutHidden(tools: ToolQuota[], hidden: string[]): ToolQuota[] {
+  if (!hidden.length) return tools;
+  const claude = tools.filter((q) => q.id === "claude");
+  const isLive = (q: ToolQuota) => q.active !== false;
+  const decoy = standIn(claude, isLive, hidden);
+  const keep = (q: ToolQuota) =>
+    q.id !== "claude" || !q.accountUuid || !hidden.includes(q.accountUuid);
+  const shown = tools.filter(keep);
+  if (!decoy) return shown;
+  // The stand-in leads the Claude rows, as the live login does.
+  return [{ ...decoy, active: true }, ...shown.filter((q) => q !== decoy)];
+}
+
 /** The right-end quota chips; nothing at all until a tool reports one. */
 function QuotaChips() {
   const { t } = useTranslation("nav");
-  const [tools, setTools] = useState<ToolQuota[]>([]);
+  const [fetched, setTools] = useState<ToolQuota[]>([]);
   const [open, setOpen] = useState(false);
   // Leaving the chips closes the panel only after a beat, and entering the
   // panel cancels that: the pointer crosses the gap to read it.
@@ -303,6 +343,8 @@ function QuotaChips() {
   );
   const [refreshing, refresh] = useSpin(() => load(true));
   useVisiblePoll(load, QUOTA_POLL_MS, [load]);
+  const hidden = useHiddenProfiles();
+  const tools = useMemo(() => withoutHidden(fetched, hidden), [fetched, hidden]);
   if (!tools.length) return null;
   return (
     <>

client/src/components/Toaster.tsx

@@ -8,18 +8,26 @@
 
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { AlertCircle, Check, Info, X } from "lucide-react";
+import { AlertCircle, AlertTriangle, Check, Info, X } from "lucide-react";
 import { dismissToast, subscribeToasts, type ToastItem } from "../lib/toast";
 
 const TONE: Record<ToastItem["kind"], string> = {
   success: "border-status-success/40 bg-status-success/10 text-status-success",
   info: "border-border bg-surface-2 text-fg-primary",
   error: "border-status-danger/50 bg-status-danger/10 text-status-danger",
+  warning: "border-status-warning/50 bg-status-warning/10 text-fg-primary",
 };
 
 function Item({ item }: { item: ToastItem }) {
   const { t } = useTranslation("common");
-  const Icon = item.kind === "error" ? AlertCircle : item.kind === "info" ? Info : Check;
+  const Icon =
+    item.kind === "error"
+      ? AlertCircle
+      : item.kind === "warning"
+        ? AlertTriangle
+        : item.kind === "info"
+          ? Info
+          : Check;
   return (
     <div
       className={`pointer-events-auto rounded-lg border px-3 py-2 shadow-lg flex items-start gap-2 ${TONE[item.kind]}`}

client/src/components/WebhookSettings.tsx

@@ -559,6 +559,8 @@ export function WebhookSettings() {
                       headerRows: [],
                     })
                   }
+                  // A short, fixed list of providers: no search box.
+                  searchable={false}
                   options={providers.map((p) => ({ value: p.type, label: p.label }))}
                 />
               </div>

client/src/components/WorkspaceTree.tsx

@@ -90,6 +90,9 @@ import { UserAvatar } from "./users/UserAvatar";
 const AddLaneModal = lazy(() =>
   import("./lanes/AddLaneModal").then((m) => ({ default: m.AddLaneModal }))
 );
+const WorkspaceShareModal = lazy(() =>
+  import("./lanes/WorkspaceShareModal").then((m) => ({ default: m.WorkspaceShareModal }))
+);
 const DestructiveLaneModal = lazy(() =>
   import("./lanes/DestructiveLaneModal").then((m) => ({ default: m.DestructiveLaneModal }))
 );
@@ -116,7 +119,9 @@ export function WorkspaceTree() {
   const selected = selectedFrom(location.pathname, location.search);
   const { lanes, refresh: refreshLanes } = useLanes();
   const { state: auth } = useAuth();
-  const { seesAll, canEditLane } = usePermissions();
+  const { seesAll, canEditLane, ownsLane } = usePermissions();
+  // Sharing a workspace with other users (server mode): the open dialog's lane.
+  const [sharing, setSharing] = useState<Lane | null>(null);
   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;
@@ -375,6 +380,7 @@ export function WorkspaceTree() {
 
   const onMenuAction = (lane: Lane, action: WorkspaceMenuAction) => {
     if (action === "rename") setRenamingId(lane.id);
+    else if (action === "share") setSharing(lane);
     else if (action === "new-here") openAdd(lane.source_repo || lane.cwd);
     else if (action === "reset" || action === "remove") setDestructive({ lane, action });
   };
@@ -559,7 +565,8 @@ export function WorkspaceTree() {
                   onNewSession={() => select(lane.id)}
                   onReorder={nudge}
                   onMenu={(x, y) => setMenu({ lane, x, y })}
-                  onRenameStart={() => setRenamingId(lane.id)}
+                  // A workspace shared with this user keeps its owner's name.
+                  onRenameStart={() => ownsLane(lane) && setRenamingId(lane.id)}
                   onRenameEnd={(title) => void rename(lane, title)}
                 />
               )}
@@ -688,6 +695,7 @@ export function WorkspaceTree() {
         </ContextMenu>
       )}
       <Suspense fallback={null}>
+        {sharing && <WorkspaceShareModal lane={sharing} onClose={() => setSharing(null)} />}
         {destructive && (
           <DestructiveLaneModal
             lane={destructive.lane}

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

@@ -13,7 +13,7 @@
  */
 
 import { describe, it, expect, vi, beforeEach } from "vitest";
-import { act, cleanup, render, screen, waitFor } from "@testing-library/react";
+import { act, cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import "../../i18n";
 
@@ -27,6 +27,9 @@ const LANES = [
 ];
 vi.mock("../../lib/api", () => ({
   AUTH_REQUIRED_EVENT: "agenthub:auth-required",
+  TOKEN_REQUIRED_EVENT: "agenthub:token-required",
+  dashboardToken: () => localStorage.getItem("dashboard_token"),
+  saveDashboardToken: (t: string) => localStorage.setItem("dashboard_token", t),
   api: {
     auth: { me: () => me(), login: (u: string, p: string) => login(u, p), logout: vi.fn() },
     lanes: { list: () => Promise.resolve({ lanes: LANES }) },
@@ -117,12 +120,42 @@ describe("AuthGate", () => {
     }
   });
 
-  it("renders the app when an older server or a dashboard token answers instead", async () => {
-    for (const err of [
-      { status: 404 },
-      { status: 200, code: "EBADRESPONSE" },
-      { status: 401, code: "EUNAUTHORIZED" },
-    ]) {
+  it("asks for the dashboard token when DASHBOARD_TOKEN refuses this browser", async () => {
+    me.mockRejectedValue(Object.assign(new Error("x"), { status: 401, code: "EUNAUTHORIZED" }));
+    const reload = vi.fn();
+    const loc = window.location;
+    // @ts-expect-error test override
+    delete window.location;
+    // @ts-expect-error test override
+    window.location = { ...loc, reload };
+    try {
+      render(<AuthGate>app</AuthGate>);
+      const input = await screen.findByLabelText("Token");
+      expect(screen.queryByText("app")).not.toBeInTheDocument();
+      expect(screen.queryByText(/token was not accepted/)).not.toBeInTheDocument();
+      fireEvent.change(input, { target: { value: " s3cret " } });
+      fireEvent.click(screen.getByRole("button", { name: "Continue" }));
+      expect(localStorage.getItem("dashboard_token")).toBe("s3cret");
+      expect(reload).toHaveBeenCalled();
+    } finally {
+      // @ts-expect-error test override
+      window.location = loc;
+    }
+  });
+
+  it("says a saved token was refused, and asks on any request's 401 too", async () => {
+    localStorage.setItem("dashboard_token", "old");
+    me.mockResolvedValue({ mode: "local" });
+    render(<AuthGate>app</AuthGate>);
+    expect(await screen.findByText("app")).toBeInTheDocument();
+    act(() => {
+      window.dispatchEvent(new Event("agenthub:token-required"));
+    });
+    expect(await screen.findByText(/token was not accepted/)).toBeInTheDocument();
+  });
+
+  it("renders the app when an older server answers instead", async () => {
+    for (const err of [{ status: 404 }, { status: 200, code: "EBADRESPONSE" }]) {
       me.mockReset();
       me.mockRejectedValue(Object.assign(new Error("x"), err));
       const { unmount } = render(<AuthGate>app</AuthGate>);

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

@@ -0,0 +1,58 @@
+/**
+ * @file Tests for PdfView: pdf.js (mocked — jsdom has no canvas) draws one
+ * canvas per page, scripting off, and a PDF that cannot be read says so.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import "../../i18n";
+
+const getDocument = vi.fn();
+vi.mock("pdfjs-dist/legacy/build/pdf.mjs", () => ({
+  GlobalWorkerOptions: { workerSrc: "" },
+  getDocument: (...a: unknown[]) => getDocument(...a),
+}));
+
+import { PdfView } from "../PdfView";
+
+const realFetch = globalThis.fetch;
+beforeEach(() => {
+  getDocument.mockReset();
+  globalThis.fetch = vi.fn(
+    async () => new Response(new Uint8Array([37, 80, 68, 70]))
+  ) as typeof fetch;
+});
+afterEach(() => {
+  globalThis.fetch = realFetch;
+});
+
+describe("PdfView", () => {
+  it("draws every page on its own canvas, with XFA off", async () => {
+    const render1 = vi.fn(() => ({ promise: Promise.resolve() }));
+    getDocument.mockReturnValue({
+      destroy: vi.fn(),
+      promise: Promise.resolve({
+        numPages: 3,
+        getPage: async () => ({
+          getViewport: ({ scale }: { scale: number }) => ({
+            width: 600 * scale,
+            height: 800 * scale,
+          }),
+          render: render1,
+        }),
+      }),
+    });
+    const { container } = render(<PdfView url="/api/artifacts/1/raw?path=a.pdf" title="a.pdf" />);
+    await waitFor(() => expect(container.querySelectorAll("canvas")).toHaveLength(3));
+    expect(render1).toHaveBeenCalledTimes(3);
+    expect(getDocument.mock.calls[0]![0]).toMatchObject({ enableXfa: false });
+    expect(screen.getByLabelText("Page 2")).toBeInTheDocument();
+  });
+
+  it("says so when the file cannot be read", async () => {
+    getDocument.mockReturnValue({ destroy: vi.fn(), promise: Promise.reject(new Error("bad")) });
+    render(<PdfView url="/x" title="x.pdf" />);
+    expect(await screen.findByText(/could not be shown/)).toBeInTheDocument();
+  });
+});

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

@@ -105,7 +105,61 @@ describe("Select (listbox button)", () => {
     vi.spyOn(button, "getBoundingClientRect").mockReturnValue(rect(360, 380));
     vi.stubGlobal("innerHeight", 2000);
     fireEvent.click(button);
-    expect(screen.getByRole("listbox").className).toContain("bottom-full");
+    expect(screen.getByRole("listbox").parentElement!.className).toContain("bottom-full");
     vi.unstubAllGlobals();
   });
+
+  it("turns a long list into a combobox: type to narrow, Enter picks, groups keep headings", async () => {
+    const onChange = vi.fn();
+    const options = [
+      { value: "", label: "Switch branch…" },
+      ...["develop", "main", "feat/campaign-pause", "fix/campaign-step", "chore/a", "chore/b"].map(
+        (v) => ({ value: v, label: v })
+      ),
+      ...["origin/feat/campaign-statistic", "origin/x", "origin/y"].map((v) => ({
+        value: v,
+        label: v,
+        group: "On the remote",
+      })),
+    ];
+    render(<Select value="" onChange={onChange} options={options} label="Switch branch…" />);
+    fireEvent.click(screen.getByRole("button", { name: "Switch branch…" }));
+    const search = screen.getByRole("combobox", { name: "Search…" });
+    expect(search).toHaveFocus();
+    expect(screen.getByText("On the remote")).toBeInTheDocument();
+
+    fireEvent.change(search, { target: { value: "CAMPAIGN" } });
+    expect(screen.getAllByRole("option").map((o) => o.textContent)).toEqual([
+      "feat/campaign-pause",
+      "fix/campaign-step",
+      "origin/feat/campaign-statistic",
+    ]);
+    fireEvent.keyDown(search, { key: "ArrowDown" });
+    fireEvent.keyDown(search, { key: "Enter" });
+    expect(onChange).toHaveBeenCalledWith("fix/campaign-step");
+    expect(screen.queryByRole("listbox")).toBeNull();
+
+    fireEvent.click(screen.getByRole("button", { name: "Switch branch…" }));
+    fireEvent.change(screen.getByRole("combobox"), { target: { value: "zzz" } });
+    expect(screen.getByText("No match")).toBeInTheDocument();
+    fireEvent.keyDown(screen.getByRole("combobox"), { key: "Escape" });
+    expect(screen.queryByRole("listbox")).toBeNull();
+  });
+
+  it("keeps a short list a plain listbox (no search box)", () => {
+    render(
+      <Select
+        value="a"
+        onChange={vi.fn()}
+        options={[
+          { value: "a", label: "A" },
+          { value: "b", label: "B" },
+        ]}
+        label="Pick"
+      />
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Pick" }));
+    expect(screen.queryByRole("combobox")).toBeNull();
+    expect(screen.getByRole("listbox")).toHaveFocus();
+  });
 });

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

@@ -162,7 +162,7 @@ vi.mock("../../lib/api", () => ({
 }));
 
 import { api } from "../../lib/api";
-import { StatusBar } from "../StatusBar";
+import { StatusBar, withoutHidden } from "../StatusBar";
 import { LIVE_RUNS_EVENT } from "../WorkspaceTree";
 
 const at = (url: string, ui: React.JSX.Element) =>
@@ -307,3 +307,35 @@ describe("StatusBar", () => {
     expect(api.pricing.quota).toHaveBeenLastCalledWith(true);
   });
 });
+
+describe("withoutHidden", () => {
+  const row = (accountUuid: string, active: boolean, pct: number) => ({
+    id: "claude" as const,
+    active,
+    accountUuid,
+    account: `${accountUuid}@x.y`,
+    windows: [{ label: "5h", usedPercent: pct, resetsAt: null }],
+  });
+  const codex = { id: "codex" as const, active: true, windows: [] };
+
+  it("leaves the list alone when nothing is hidden", () => {
+    const list = [row("u1", true, 82), row("u2", false, 19), codex];
+    expect(withoutHidden(list, [])).toBe(list);
+  });
+
+  it("drops a hidden saved profile", () => {
+    const out = withoutHidden([row("u1", true, 82), row("u2", false, 19), codex], ["u2"]);
+    expect(out.map((q) => q.accountUuid ?? q.id)).toEqual(["u1", "codex"]);
+  });
+
+  it("puts the first visible profile, with its own usage, in place of a hidden live login", () => {
+    const out = withoutHidden(
+      [row("u1", true, 82), row("u2", false, 19), row("u3", false, 0), codex],
+      ["u1"]
+    );
+    expect(out.map((q) => q.accountUuid ?? q.id)).toEqual(["u2", "u3", "codex"]);
+    expect(out[0]?.active).toBe(true);
+    expect(out[0]?.windows[0]?.usedPercent).toBe(19);
+    expect(out[1]?.active).toBe(false);
+  });
+});

client/src/components/conversation/MessageList.tsx

@@ -118,7 +118,7 @@ import {
 } from "lucide-react";
 import { artifactKind, isArtifact, type ArtifactKind } from "../../lib/artifactView";
 import type { TranscriptMessage, TranscriptContent, TranscriptSender } from "../../lib/types";
-import { api } from "../../lib/api";
+import { api, withToken } from "../../lib/api";
 import { copyText } from "../../lib/clipboard";
 
 /** The icon of a transcript row's sender. A JSONL `type:"user"` line is not
@@ -1656,7 +1656,7 @@ function DropFile({ path }: { path: string }) {
 function DropImage({ name }: { name: string }) {
   const [open, setOpen] = useState(false);
   const [gone, setGone] = useState(false);
-  const src = `/api/run/drop/${encodeURIComponent(name)}`;
+  const src = withToken(`/api/run/drop/${encodeURIComponent(name)}`);
   // Drops are pruned after a day: the name is all that is left to show.
   if (gone)
     return (

client/src/components/lanes/LaneGitBar.tsx

@@ -57,6 +57,7 @@ import { isSubmitEnter } from "../../lib/keys";
 import type { LaneGitFacts, LaneWorktree } from "../../lib/types";
 import { restoreShelf } from "./LaneShelves";
 import { BranchesButton } from "./git/BranchesButton";
+import { Select } from "../Select";
 
 type Action =
   "fetch" | "pull" | "push" | "switch" | "branch-create" | "branch-delete" | "merge" | "publish";
@@ -132,8 +133,6 @@ export function LaneGitBar({
   const [remoteBranches, setRemoteBranches] = useState<string[]>([]);
   const [worktrees, setWorktrees] = useState<LaneWorktree[]>([]);
   const [picked, setPicked] = useState("");
-  // Issue #88: typing narrows the switcher to the branches whose name holds it.
-  const [branchQuery, setBranchQuery] = useState("");
   const [newBranch, setNewBranch] = useState("");
   // Set when git needed a login for `action`; the form resends that action.
   const [login, setLogin] = useState<{ action: Action; auth: GitAuthNeeded } | null>(null);
@@ -162,7 +161,6 @@ export function LaneGitBar({
     setRemoteBranches([]);
     setWorktrees([]);
     setPicked("");
-    setBranchQuery("");
     setNewBranch("");
     setLogin(null);
     setPassword("");
@@ -179,26 +177,6 @@ export function LaneGitBar({
   // A remote branch: switching creates its local tracking branch; it cannot
   // be deleted here or given a sibling worktree before that.
   const pickedRemote = remoteBranches.includes(picked);
-  // The switcher's lists, narrowed by the search box (case-insensitive, any
-  // part of the name). The picked branch always stays in its list, so the
-  // select never shows a value it has no option for.
-  const query = branchQuery.trim().toLowerCase();
-  const matches = (b: string) => !query || b.toLowerCase().includes(query) || b === picked;
-  const shownBranches = (branches || []).filter(matches);
-  const shownRemote = remoteBranches.filter(matches);
-  const matchCount = query
-    ? [...(branches || []), ...remoteBranches].filter((b) => b.toLowerCase().includes(query))
-        .length
-    : null;
-  const searchBranches = (text: string) => {
-    setBranchQuery(text);
-    const q = text.trim().toLowerCase();
-    if (!q) return;
-    const hits = [...(branches || []), ...remoteBranches].filter((b) =>
-      b.toLowerCase().includes(q)
-    );
-    if (hits.length === 1) setPicked(hits[0]!);
-  };
   const merging = !!git.merging;
 
   const run = async (action: Action, body?: RunBody) => {
@@ -549,58 +527,32 @@ export function LaneGitBar({
 
       {switching && (
         <div className="flex flex-wrap items-center gap-1.5">
-          <input
-            type="search"
-            aria-label={t("gitBar.branchSearch")}
-            placeholder={t("gitBar.branchSearch")}
-            value={branchQuery}
-            disabled={!!busy}
-            onChange={(e) => searchBranches(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Escape" && branchQuery) {
-                e.stopPropagation();
-                setBranchQuery("");
-              } else if (isSubmitEnter(e)) {
-                e.preventDefault();
-                const first = [...shownBranches, ...shownRemote].find(
-                  (b) => b.toLowerCase().includes(query) && b !== git.branch
-                );
-                if (first) setPicked(first);
-              }
-            }}
-            className="w-36 rounded border border-border-light bg-surface-0 px-2 py-0.5 font-mono text-[11px] text-fg-primary placeholder:text-fg-muted focus:border-accent focus:outline-none"
-          />
-          <select
-            aria-label={t("gitBar.switchLabel")}
-            value={picked}
-            disabled={!!busy}
-            onChange={(e) => setPicked(e.target.value)}
-            className="select min-w-[8rem] flex-1 !rounded !py-0.5 !pl-2 !pr-6 font-mono !text-[11px]"
-          >
-            <option value="">
-              {matchCount === null
-                ? t("gitBar.switchLabel")
-                : t("gitBar.branchMatches", { count: matchCount })}
-            </option>
-            {shownBranches.map((b) => {
-              const held = heldBy.get(b);
-              return (
-                <option key={b} value={b}>
-                  {b}
-                  {b === git.branch ? ` — ${t("gitBar.switchCurrent")}` : held ? ` — ${held}` : ""}
-                </option>
-              );
-            })}
-            {shownRemote.length > 0 && (
-              <optgroup label={t("gitBar.remoteBranches")}>
-                {shownRemote.map((b) => (
-                  <option key={`remote:${b}`} value={b}>
-                    {b}
-                  </option>
-                ))}
-              </optgroup>
-            )}
-          </select>
+          {/* A combobox once the list is long (Select's search box, #88):
+              type to narrow the local and remote branches. */}
+          <div className="min-w-[8rem] flex-1 font-mono">
+            <Select
+              label={t("gitBar.switchLabel")}
+              searchLabel={t("gitBar.branchSearch")}
+              searchable
+              value={picked}
+              disabled={!!busy}
+              onChange={setPicked}
+              options={[
+                { value: "", label: t("gitBar.switchLabel") },
+                ...(branches || []).map((b) => {
+                  const held = heldBy.get(b);
+                  const note =
+                    b === git.branch ? ` — ${t("gitBar.switchCurrent")}` : held ? ` — ${held}` : "";
+                  return { value: b, label: `${b}${note}` };
+                }),
+                ...remoteBranches.map((b) => ({
+                  value: b,
+                  label: b,
+                  group: t("gitBar.remoteBranches"),
+                })),
+              ]}
+            />
+          </div>
           <Btn
             label={t("gitBar.switchApply")}
             busy={busy === "switch"}

client/src/components/lanes/SessionMenu.tsx

@@ -31,6 +31,7 @@ export function SessionMenu({
   onArchive,
   onUnarchive,
   onPin,
+  onShare,
 }: MenuPoint & {
   laneId: number;
   session: Session | null;
@@ -42,6 +43,8 @@ export function SessionMenu({
   onUnarchive?: () => void;
   /** Pin or unpin (by `session.pinned_at`), where the list offers it. */
   onPin?: () => void;
+  /** Share this session on its own (server mode, the workspace's owner). */
+  onShare?: () => void;
 }) {
   const { t } = useTranslation("lanes");
   const navigate = useNavigate();
@@ -81,6 +84,11 @@ export function SessionMenu({
           {t(session.pinned_at ? "sessionMenu.unpin" : "sessionMenu.pin")}
         </MenuItem>
       )}
+      {onShare && session && (
+        <MenuItem testId="session-menu-share" onSelect={pick(onShare)}>
+          {t("sessionMenu.share")}
+        </MenuItem>
+      )}
       {session && (
         <>
           <MenuItem onSelect={pick(() => navigate(`/sessions/${session.id}`))}>

client/src/components/lanes/WorkspaceContext.tsx

@@ -2,7 +2,8 @@
  * @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
+ * workspace home's right column (sticky: it follows the home's scroll) 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; the
  * same form clones related repos beside the workspace (`CloneSourcesForm`).
@@ -157,7 +158,13 @@ function ContextBody({
       <aside
         data-testid="workspace-context"
         aria-label={t("home.contextPanel")}
-        className={compact ? "" : "card w-80 shrink-0 self-start p-0"}
+        // On the home it follows the scroll (sticky in the home's scroller),
+        // scrolling itself — without a bar — when taller than the window.
+        className={
+          compact
+            ? ""
+            : "card no-scrollbar sticky top-2 max-h-[calc(100vh-7rem)] w-80 shrink-0 self-start overflow-y-auto p-0"
+        }
       >
         {view && !view.supported && (
           <p className="border-b border-border px-4 py-3 text-xs text-status-warning">

client/src/components/lanes/WorkspaceHome.tsx

@@ -57,6 +57,8 @@ import { AiToolIcon } from "../AiToolIcon";
 import { ProxyPicker, proxyArg, useAiProxies, useSessionProxy } from "../run/ProxyPicker";
 import { Select } from "../Select";
 import { WorkspaceRowMenu, type WorkspaceMenuAction } from "./WorkspaceRowMenu";
+import { WorkspaceShareModal } from "./WorkspaceShareModal";
+import { usePermissions } from "../AuthGate";
 import { workspaceName } from "./WorkspaceRow";
 import { SessionMenu } from "./SessionMenu";
 import { menuPoint, useContextMenu } from "../ContextMenu";
@@ -118,6 +120,7 @@ function HomeBody({
   const { t } = useTranslation("lanes");
   const navigate = useNavigate();
   const aiTools = useAiTools();
+  const { ownsLane } = usePermissions();
   // 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,7 +151,7 @@ function HomeBody({
   const proxyCapable = entry?.proxyCapable ?? (claude || codex);
   // A profile picked for a tool that can use one; its models replace the tool's own.
   const profile = proxyCapable
-    ? (proxies?.find((r) => r.name === proxy && !r.builtin) ?? null)
+    ? (proxies?.find((r) => r.name === proxy && !r.builtin && !r.company) ?? null)
     : null;
   const proxyModels: ModelChoice[] | undefined = profile
     ? [
@@ -195,6 +198,7 @@ function HomeBody({
   const [nameDraft, setNameDraft] = useState("");
   const [menuAt, setMenuAt] = useState<{ x: number; y: number } | null>(null);
   const [title, setTitle] = useState<string | null>(null);
+  const [sharing, setSharing] = useState(false);
   const recentCtx = useContextMenu<Session>();
 
   // A new pane, a pane gone, a session id learned — all move these lane fields.
@@ -270,10 +274,17 @@ function HomeBody({
   };
 
   const text = promptWithImages(prompt, images, claude);
+  // A workspace shared with this user: a session they start runs on their
+  // own account and is billed to them (the server answers ENOCOLLABACCOUNT
+  // when they have none).
+  const collab = !ownsLane(lane);
+  // Only a session of it is shared with them (phase 3): no new session here —
+  // they open that session and send it messages (the server answers ESESSIONSHARE).
+  const sessionOnly = lane.access === "session";
   const start = async () => {
     // Enter reaches here past the disabled button: the same guards again.
     // A ref, not only the state: two Enters in one tick both read `starting` false.
-    if (startingRef.current || uploading || !text) return;
+    if (sessionOnly || startingRef.current || uploading || !text) return;
     startingRef.current = true;
     setStarting(true);
     setError(null);
@@ -529,7 +540,7 @@ function HomeBody({
                 type="button"
                 data-testid="workspace-home-start"
                 onClick={() => void start()}
-                disabled={starting || uploading || !text}
+                disabled={sessionOnly || starting || uploading || !text}
                 aria-label={t("home.start")}
                 title={t("home.start")}
                 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"
@@ -539,6 +550,11 @@ function HomeBody({
             </div>
           </div>
         </div>
+        {collab && (
+          <p data-testid="workspace-home-collab" className="mt-2 text-xs text-fg-muted">
+            {t(sessionOnly ? "shared.sessionOnly" : "shared.ownAccount")}
+          </p>
+        )}
         {/* The session's quieter choices, under the box like Claude Desktop's. */}
         <div
           data-testid="workspace-home-options"
@@ -787,9 +803,16 @@ function HomeBody({
           x={menuAt.x}
           y={menuAt.y}
           onClose={() => setMenuAt(null)}
-          onAction={(a) => (a === "rename" ? setTitle(lane.title || "") : onMenuAction(a))}
+          onAction={(a) =>
+            a === "rename"
+              ? setTitle(lane.title || "")
+              : a === "share"
+                ? setSharing(true)
+                : onMenuAction(a)
+          }
         />
       )}
+      {sharing && <WorkspaceShareModal lane={lane} onClose={() => setSharing(false)} />}
     </div>
   );
 }

client/src/components/lanes/WorkspaceRowMenu.tsx

@@ -2,11 +2,13 @@
  * @file WorkspaceRowMenu — the sidebar workspace row's context menu, opened at
  * the pointer (right-click) or under the row's `⋯` button. Every item is an
  * existing call: Rename (the row's inline field), New workspace here (the
- * Add modal prefilled), Copy path, and Reset/Remove through `DestructiveLaneModal` — Reset only on a
+ * Add modal prefilled), Copy path, Share (server mode: `WorkspaceShareModal`),
+ * and Reset/Remove through `DestructiveLaneModal` — Reset only on a
  * managed lane — plus Move to group (the sidebar's own groups,
  * `lib/workspaceGroups.ts`: one of them, a new one, or out of its group). The
  * server's guards are the real ones; the menu only hides
- * what the lane's kind or tool makes meaningless. The shell (position,
+ * what the lane's kind or tool makes meaningless, and the owner-only items
+ * (Rename, Share, Reset, Remove) on a workspace shared with this user. The shell (position,
  * Escape / outside-click close) is `ContextMenu`.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
@@ -17,8 +19,9 @@ import { Check } from "lucide-react";
 import { ContextMenu, MenuItem, MenuSeparator } from "../ContextMenu";
 import type { WorkspaceGroup } from "../../lib/workspaceGroups";
 import { copyText } from "../../lib/clipboard";
+import { usePermissions } from "../AuthGate";
 
-export type WorkspaceMenuAction = "rename" | "new-here" | "reset" | "remove";
+export type WorkspaceMenuAction = "rename" | "new-here" | "share" | "reset" | "remove";
 
 export function WorkspaceRowMenu({
   lane,
@@ -43,9 +46,11 @@ export function WorkspaceRowMenu({
   onGroup?: (target: string | null | "new") => void;
 }) {
   const { t } = useTranslation("lanes");
+  const { local, ownsLane } = usePermissions();
+  const owner = ownsLane(lane);
   return (
     <ContextMenu x={x} y={y} onClose={onClose} testId={`workspace-row-menu-${lane.id}`}>
-      <MenuItem onSelect={() => onAction("rename")}>{t("menu.rename")}</MenuItem>
+      {owner && <MenuItem onSelect={() => onAction("rename")}>{t("menu.rename")}</MenuItem>}
       <MenuItem onSelect={() => onAction("new-here")}>{t("menu.newHere")}</MenuItem>
       <MenuItem
         onSelect={() => {
@@ -55,6 +60,11 @@ export function WorkspaceRowMenu({
       >
         {t("menu.copyPath")}
       </MenuItem>
+      {owner && !local && (
+        <MenuItem testId="workspace-menu-share" onSelect={() => onAction("share")}>
+          {t("menu.share")}
+        </MenuItem>
+      )}
       {onGroup && (
         <>
           <MenuSeparator />
@@ -84,15 +94,19 @@ export function WorkspaceRowMenu({
           )}
         </>
       )}
-      <MenuSeparator />
-      {lane.kind === "managed" && (
-        <MenuItem danger onSelect={() => onAction("reset")}>
-          {t("menu.reset")}
-        </MenuItem>
+      {owner && (
+        <>
+          <MenuSeparator />
+          {lane.kind === "managed" && (
+            <MenuItem danger onSelect={() => onAction("reset")}>
+              {t("menu.reset")}
+            </MenuItem>
+          )}
+          <MenuItem danger onSelect={() => onAction("remove")}>
+            {t("menu.remove")}
+          </MenuItem>
+        </>
       )}
-      <MenuItem danger onSelect={() => onAction("remove")}>
-        {t("menu.remove")}
-      </MenuItem>
     </ContextMenu>
   );
 }

client/src/components/lanes/WorkspaceSessionList.tsx

@@ -31,7 +31,7 @@
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { useEffect, useState, type ReactNode } from "react";
+import { lazy, Suspense, useEffect, useState, type ReactNode } from "react";
 import { endRuns } from "../../lib/stopSession";
 import { isSubmitEnter } from "../../lib/keys";
 import { Archive, GitBranch, Pin, PinOff, SquareTerminal } from "lucide-react";
@@ -46,6 +46,11 @@ import { useAiTools } from "../../hooks/useAiTools";
 import { useThrottledValue } from "../../hooks/useThrottledValue";
 import { useContextMenu } from "../ContextMenu";
 import { SessionMenu } from "./SessionMenu";
+import { usePermissions } from "../AuthGate";
+
+const WorkspaceShareModal = lazy(() =>
+  import("./WorkspaceShareModal").then((m) => ({ default: m.WorkspaceShareModal }))
+);
 
 export const SESSION_LIMIT = 6;
 
@@ -256,6 +261,9 @@ export function WorkspaceSessionList({
   const [busy, setBusy] = useState(false);
   const ctx = useContextMenu<RunHandle>();
   const sessionCtx = useContextMenu<Session>();
+  // Share one session (server mode, the workspace's owner or an admin).
+  const { local, ownsLane } = usePermissions();
+  const [sharing, setSharing] = useState<Session | null>(null);
   // Rows shown; See all raises it to the whole list.
   const [limit, setLimit] = useState(SESSION_LIMIT);
 
@@ -637,8 +645,18 @@ export function WorkspaceSessionList({
           onPin={() =>
             void patch(sessionCtx.menu!.item, { pinned: !sessionCtx.menu!.item.pinned_at })
           }
+          onShare={!local && ownsLane(lane) ? () => setSharing(sessionCtx.menu!.item) : undefined}
         />
       )}
+      {sharing && (
+        <Suspense fallback={null}>
+          <WorkspaceShareModal
+            lane={lane}
+            session={{ id: sharing.id, name: sharing.name }}
+            onClose={() => setSharing(null)}
+          />
+        </Suspense>
+      )}
     </>
   );
 }

client/src/components/lanes/WorkspaceShareModal.tsx

@@ -0,0 +1,220 @@
+/**
+ * @file WorkspaceShareModal — share a workspace, or one of its sessions
+ * (`session`), with other users (server mode, docs/plans/workspace-sharing/
+ * phases 1 and 3). Ticks people from `GET /api/artifacts/people` (names only)
+ * and saves the whole list through `PUT /api/lanes/:id/shares` or
+ * `PUT /api/lanes/:id/sessions/:sid/shares`. It says plainly what sharing means on this
+ * server: the people it is shared with work as the owner's account and can
+ * read everything in the owner's home. Only the owner or an admin opens it —
+ * the server refuses anyone else (`ENOTOWNER`).
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ShieldAlert, X } from "lucide-react";
+import { api } from "../../lib/api";
+import type { Lane } from "../../lib/types";
+import { toast } from "../../lib/toast";
+import { confirmDialog } from "../../lib/confirm";
+import { useDialog } from "../../hooks/useDialog";
+import { Checkbox } from "../Checkbox";
+
+type Person = { id: number; username: string; name: string; disabled?: boolean };
+
+export function WorkspaceShareModal({
+  lane,
+  session,
+  onClose,
+}: {
+  lane: Lane;
+  /** Share this one session instead of the whole workspace. */
+  session?: { id: string; name?: string | null };
+  onClose: () => void;
+}) {
+  const { t } = useTranslation("lanes");
+  const panelRef = useRef<HTMLDivElement>(null);
+  useDialog(true, panelRef, onClose);
+  const [people, setPeople] = useState<Person[] | null>(null);
+  const [initial, setInitial] = useState<Set<number>>(new Set());
+  const [picked, setPicked] = useState<Set<number>>(new Set());
+  const [query, setQuery] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    let alive = true;
+    const sid = session?.id;
+    Promise.all([
+      api.artifacts.people(),
+      sid ? api.lanes.sessionShares(lane.id, sid) : api.lanes.shares(lane.id),
+    ])
+      .then(([p, s]) => {
+        if (!alive) return;
+        // Never the owner: a workspace is not shared with them. Someone it is
+        // already shared with but who was disabled since is not in `people`:
+        // listed anyway, so they can be taken off.
+        const known = new Set(p.people.map((x) => x.id));
+        setPeople([
+          ...p.people.filter((x) => x.id !== lane.owner_id),
+          ...s.shares.filter((x) => !known.has(x.id)).map((x) => ({ ...x, disabled: true })),
+        ]);
+        const ids = new Set(s.shares.map((x) => x.id));
+        setInitial(ids);
+        setPicked(new Set(ids));
+      })
+      .catch((err) => {
+        if (!alive) return;
+        toast.error(err);
+        setPeople([]);
+      });
+    return () => {
+      alive = false;
+    };
+  }, [lane.id, lane.owner_id, session?.id]);
+
+  const shown = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return (people ?? []).filter(
+      (p) => !q || p.name.toLowerCase().includes(q) || p.username.toLowerCase().includes(q)
+    );
+  }, [people, query]);
+  const added = [...picked].filter((id) => !initial.has(id));
+  const changed = added.length > 0 || [...initial].some((id) => !picked.has(id));
+  const name = session ? session.name || session.id : lane.title || lane.cwd;
+
+  const save = async () => {
+    if (added.length > 0) {
+      const names = (people ?? []).filter((p) => added.includes(p.id)).map((p) => p.name);
+      const ok = await confirmDialog({
+        title: t("share.confirmTitle", { name }),
+        message: t("share.confirmBody", { people: names.join(", ") }),
+        confirmLabel: t("share.confirm"),
+      });
+      if (!ok) return;
+    }
+    setBusy(true);
+    try {
+      const r = session
+        ? await api.lanes.setSessionShares(lane.id, session.id, [...picked])
+        : await api.lanes.setShares(lane.id, [...picked]);
+      toast.success(
+        r.shares.length ? t("share.saved", { count: r.shares.length }) : t("share.savedNone")
+      );
+      onClose();
+    } catch (err) {
+      toast.error(err);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const toggle = (id: number, on: boolean) =>
+    setPicked((prev) => {
+      const next = new Set(prev);
+      if (on) next.add(id);
+      else next.delete(id);
+      return next;
+    });
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-surface-0/70 p-4"
+      role="presentation"
+    >
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="workspace-share-title"
+        data-testid="workspace-share-modal"
+        className="flex max-h-[85vh] w-full max-w-md flex-col overflow-hidden rounded-xl border border-border bg-surface-1 shadow-xl"
+      >
+        <div className="flex items-start gap-3 border-b border-border px-5 py-4">
+          <div className="min-w-0 flex-1">
+            <h2 id="workspace-share-title" className="text-base font-semibold text-fg-primary">
+              {t(session ? "share.sessionTitle" : "share.title")}
+            </h2>
+            <p className="mt-0.5 truncate text-xs text-fg-muted" title={lane.cwd}>
+              {name}
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label={t("share.close")}
+            className="rounded p-1 text-fg-muted hover:bg-surface-3 hover:text-fg-primary"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        <div className="min-h-0 flex-1 space-y-3 overflow-y-auto px-5 py-4">
+          <p className="text-xs text-fg-secondary">
+            {t(session ? "share.sessionWhat" : "share.what")}
+          </p>
+          <div
+            data-testid="workspace-share-warning"
+            className="flex gap-2 rounded-lg border border-status-warning/30 bg-status-warning/10 px-3 py-2 text-xs text-status-warning"
+          >
+            <ShieldAlert className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+            <span>{t("share.warning")}</span>
+          </div>
+          {people === null ? (
+            <p className="text-xs text-fg-muted">{t("share.loading")}</p>
+          ) : people.length === 0 ? (
+            <p className="text-xs text-fg-muted">{t("share.nobody")}</p>
+          ) : (
+            <>
+              {people.length > 8 && (
+                <input
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  placeholder={t("share.search")}
+                  aria-label={t("share.search")}
+                  className="input w-full text-sm"
+                />
+              )}
+              <ul className="space-y-1" data-testid="workspace-share-people">
+                {shown.map((p) => (
+                  <li key={p.id}>
+                    <Checkbox
+                      checked={picked.has(p.id)}
+                      onChange={(v) => toggle(p.id, v)}
+                      disabled={busy}
+                      label={
+                        <span>
+                          {p.name}
+                          {p.name !== p.username && (
+                            <span className="ml-1.5 text-fg-muted">@{p.username}</span>
+                          )}
+                          {p.disabled && (
+                            <span className="ml-1.5 text-fg-muted">{t("share.disabled")}</span>
+                          )}
+                        </span>
+                      }
+                    />
+                  </li>
+                ))}
+              </ul>
+            </>
+          )}
+        </div>
+
+        <div className="flex justify-end gap-2 border-t border-border px-5 py-3">
+          <button type="button" className="btn-ghost text-sm" onClick={onClose} disabled={busy}>
+            {t("share.cancel")}
+          </button>
+          <button
+            type="button"
+            className="btn-primary text-sm"
+            data-testid="workspace-share-save"
+            onClick={() => void save()}
+            disabled={busy || !changed || people === null}
+          >
+            {busy ? t("share.saving") : t("share.save")}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -171,21 +171,23 @@ beforeEach(() => {
   vi.mocked(h.commit).mockReset().mockResolvedValue({ available: false });
   vi.mocked(h.sequence).mockReset().mockResolvedValue({ available: true, active: false });
   vi.mocked(h.pick).mockReset();
-  vi.mocked(h.pickPlan).mockReset().mockImplementation(async (_t, op, shas) => ({
-    available: true,
-    op,
-    commits: shas.map((sha) => ({
-      sha,
-      short: sha.slice(0, 7),
-      subject: "feat: the commit",
-      author: "t",
-      date: "2026-09-22T01:00:00Z",
-    })),
-    branch: "feat/thing",
-    clean: true,
-    repoRoot: true,
-    busy: false,
-  }));
+  vi.mocked(h.pickPlan)
+    .mockReset()
+    .mockImplementation(async (_t, op, shas) => ({
+      available: true,
+      op,
+      commits: shas.map((sha) => ({
+        sha,
+        short: sha.slice(0, 7),
+        subject: "feat: the commit",
+        author: "t",
+        date: "2026-09-22T01:00:00Z",
+      })),
+      branch: "feat/thing",
+      clean: true,
+      repoRoot: true,
+      busy: false,
+    }));
   vi.mocked(h.fileHistory)
     .mockReset()
     .mockResolvedValue({
@@ -538,7 +540,8 @@ describe("LaneChangesPanel", () => {
     await screen.findByTitle("only-on-thing.ts");
 
     await user.click(screen.getByRole("button", { name: /^Branch$/ }));
-    await user.selectOptions(await screen.findByLabelText("Switch branch…"), "other");
+    await user.click(await screen.findByRole("button", { name: "Switch branch…" }));
+    await user.click(screen.getByRole("option", { name: "other" }));
     await user.click(screen.getByRole("button", { name: "Switch branch" }));
 
     await waitFor(() => expect(screen.getByTestId("lane-git")).toHaveTextContent("other"));
@@ -1344,9 +1347,7 @@ describe("LaneChangesPanel", () => {
       await user.click(within(await commitMenu(user)).getByText("Cherry-pick onto feat/thing"));
       await user.click(await screen.findByTestId("pick-confirm"));
       await waitFor(() =>
-        expect(api.lanes.gitHistory.pick).toHaveBeenCalledWith(7, "cherry-pick", [
-          "a".repeat(40),
-        ])
+        expect(api.lanes.gitHistory.pick).toHaveBeenCalledWith(7, "cherry-pick", ["a".repeat(40)])
       );
     });
 

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

@@ -13,13 +13,22 @@
  */
 
 import { describe, it, expect, vi, beforeEach } from "vitest";
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { LaneGitBar } from "../LaneGitBar";
 import { api } from "../../../lib/api";
 import { confirmDialog } from "../../../lib/confirm";
 import type { LaneGitFacts } from "../../../lib/types";
 
+/** Picks `name` in the branch switcher — a Select combobox (#88). */
+async function pickBranch(user: ReturnType<typeof userEvent.setup>, name: string) {
+  await user.click(await screen.findByRole("button", { name: "Switch branch…" }));
+  const esc = name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  await user.click(
+    within(screen.getByRole("listbox")).getByRole("option", { name: new RegExp(`^${esc}( —|$)`) })
+  );
+}
+
 // A merge asks through the themed confirm (its host lives in App): yes.
 vi.mock("../../../lib/confirm", () => ({ confirmDialog: vi.fn(async () => true) }));
 vi.mock("../../../lib/api", () => ({
@@ -210,7 +219,7 @@ describe("LaneGitBar", () => {
 
     await user.click(screen.getByRole("button", { name: /Branch/ }));
     await waitFor(() => expect(api.lanes.gitBranches).toHaveBeenCalledWith(3));
-    await user.selectOptions(await screen.findByLabelText("Switch branch…"), "development");
+    await pickBranch(user, "development");
     await user.click(screen.getByRole("button", { name: "Switch branch" }));
     // Nothing is sent before the user picks what happens to the changes.
     expect(api.lanes.gitAction).not.toHaveBeenCalled();
@@ -235,7 +244,7 @@ describe("LaneGitBar", () => {
     const user = userEvent.setup();
     render(<LaneGitBar laneId={3} git={facts()} onChanged={vi.fn()} />);
     await user.click(screen.getByRole("button", { name: /Branch/ }));
-    await user.selectOptions(await screen.findByLabelText("Switch branch…"), "development");
+    await pickBranch(user, "development");
     await user.click(screen.getByRole("button", { name: "Switch branch" }));
     await user.click(screen.getByRole("button", { name: "Bring my changes" }));
     expect(await screen.findByTestId("lane-git-carry-conflicts")).toHaveTextContent(
@@ -258,7 +267,7 @@ describe("LaneGitBar", () => {
     const user = userEvent.setup();
     render(<LaneGitBar laneId={3} git={facts()} onChanged={vi.fn()} />);
     await user.click(screen.getByRole("button", { name: /Branch/ }));
-    await user.selectOptions(await screen.findByLabelText("Switch branch…"), "development");
+    await pickBranch(user, "development");
     await user.click(screen.getByRole("button", { name: "Switch branch" }));
     await user.click(screen.getByRole("button", { name: "Shelve and switch" }));
     await waitFor(() =>
@@ -291,7 +300,7 @@ describe("LaneGitBar", () => {
     const onChanged = vi.fn();
     render(<LaneGitBar laneId={3} git={facts({ dirty: 0, untracked: 0 })} onChanged={onChanged} />);
     await user.click(screen.getByRole("button", { name: /Branch/ }));
-    await user.selectOptions(await screen.findByLabelText("Switch branch…"), "development");
+    await pickBranch(user, "development");
     await user.click(screen.getByRole("button", { name: "Switch branch" }));
     await waitFor(() =>
       expect(api.lanes.gitAction).toHaveBeenLastCalledWith(3, "unshelve", { sha: "abc1234def" })
@@ -319,8 +328,8 @@ describe("LaneGitBar", () => {
     render(<LaneGitBar laneId={3} git={facts({ dirty: 0, untracked: 0 })} onChanged={vi.fn()} />);
 
     await user.click(screen.getByRole("button", { name: /Branch/ }));
-    const select = await screen.findByLabelText("Switch branch…");
-    await user.selectOptions(select, "development");
+    await screen.findByRole("button", { name: "Switch branch…" });
+    await pickBranch(user, "development");
     await user.click(screen.getByRole("button", { name: "Switch branch" }));
 
     await waitFor(() =>
@@ -332,12 +341,12 @@ describe("LaneGitBar", () => {
     const user = userEvent.setup();
     render(<LaneGitBar laneId={3} git={facts({ dirty: 0, untracked: 0 })} onChanged={vi.fn()} />);
     await user.click(screen.getByRole("button", { name: /Branch/ }));
-    await user.selectOptions(await screen.findByLabelText("Switch branch…"), "development");
+    await pickBranch(user, "development");
     await user.click(screen.getByRole("button", { name: "Switch branch" }));
     await waitFor(() => expect(api.lanes.gitBranches).toHaveBeenCalledTimes(2));
   });
 
-  it("narrows the branch list as you type, picks a single match and Enter's first one (#88)", async () => {
+  it("opens the branch switcher as a combobox: type to narrow, Enter picks (#88)", async () => {
     vi.mocked(api.lanes.gitBranches).mockResolvedValue({
       available: true,
       branches: ["development", "feat/campaign-pause", "fix/campaign-step", "main"],
@@ -348,34 +357,24 @@ describe("LaneGitBar", () => {
     const user = userEvent.setup();
     render(<LaneGitBar laneId={3} git={facts({ dirty: 0, untracked: 0 })} onChanged={vi.fn()} />);
     await user.click(screen.getByRole("button", { name: /Branch/ }));
-    const select = await screen.findByLabelText("Switch branch…");
-    const search = screen.getByLabelText("Search branches…");
-    const options = () =>
-      Array.from(select.querySelectorAll("option"))
-        .map((o) => o.value)
-        .filter(Boolean);
-
-    await user.type(search, "CAMPAIGN");
-    expect(options()).toEqual([
+    const trigger = await screen.findByRole("button", { name: "Switch branch…" });
+    await user.click(trigger);
+    const search = screen.getByRole("combobox", { name: "Search branches…" });
+    expect(search).toHaveFocus();
+    await user.keyboard("CAMPAIGN");
+    expect(screen.getAllByRole("option").map((o) => o.textContent)).toEqual([
       "feat/campaign-pause",
       "fix/campaign-step",
       "origin/feat/campaign-statistic",
     ]);
-    expect(select.querySelector("option")).toHaveTextContent("3 matching branches");
-    expect(select).toHaveValue("");
-
     await user.keyboard("{Enter}");
-    expect(select).toHaveValue("feat/campaign-pause");
-
-    await user.clear(search);
-    await user.type(search, "unit_t");
-    // One match: picked at once (the earlier pick stays listed until replaced).
-    expect(select).toHaveValue("origin/feature/thienpt/unit_test");
-    expect(options()).toEqual(["origin/feature/thienpt/unit_test"]);
-
-    await user.keyboard("{Escape}");
-    expect(search).toHaveValue("");
-    expect(options()).toHaveLength(6);
+    expect(trigger).toHaveTextContent("feat/campaign-pause");
+    await user.click(screen.getByRole("button", { name: "Switch branch" }));
+    await waitFor(() =>
+      expect(api.lanes.gitAction).toHaveBeenCalledWith(3, "switch", {
+        branch: "feat/campaign-pause",
+      })
+    );
   });
 
   it("lists branches only the remote has, switches to one, and re-reads the list after a fetch", async () => {
@@ -396,11 +395,12 @@ describe("LaneGitBar", () => {
       />
     );
     await user.click(screen.getByRole("button", { name: /Branch/ }));
-    const select = await screen.findByLabelText("Switch branch…");
+    await user.click(await screen.findByRole("button", { name: "Switch branch…" }));
     expect(
-      screen.getByRole("group", { name: "On the remote — switching creates the local branch" })
+      screen.getByText("On the remote — switching creates the local branch")
     ).toBeInTheDocument();
-    await user.selectOptions(select, "origin/feat/new");
+    await user.keyboard("{Escape}");
+    await pickBranch(user, "origin/feat/new");
     // Not a local branch yet: nothing to delete, no worktree to start on it.
     expect(screen.getByRole("button", { name: "Delete" })).toBeDisabled();
     expect(screen.getByRole("button", { name: /New workspace here/ })).toBeDisabled();
@@ -436,7 +436,7 @@ describe("LaneGitBar", () => {
       })
     );
 
-    await user.selectOptions(screen.getByLabelText("Switch branch…"), "development");
+    await pickBranch(user, "development");
     await user.click(screen.getByRole("button", { name: "New workspace here" }));
     expect(onNewLane).toHaveBeenCalledWith("development");
   });
@@ -454,18 +454,18 @@ describe("LaneGitBar", () => {
     const user = userEvent.setup();
     render(<LaneGitBar laneId={3} git={facts()} onChanged={vi.fn()} onNewLane={vi.fn()} />);
     await user.click(screen.getByRole("button", { name: /Branch/ }));
-    const select = await screen.findByLabelText("Switch branch…");
+    await screen.findByRole("button", { name: "Switch branch…" });
     const newLane = () => screen.getByRole("button", { name: "New workspace here" });
 
     // This lane's own branch: its worktree is this lane.
-    await user.selectOptions(select, "feat/thing");
+    await pickBranch(user, "feat/thing");
     expect(newLane()).toBeDisabled();
     // Held by another worktree: git allows one worktree per branch (EBRANCHBUSY).
-    await user.selectOptions(select, "development");
+    await pickBranch(user, "development");
     expect(newLane()).toBeDisabled();
     expect(newLane()).toHaveAttribute("title", expect.stringContaining("/repo/dev"));
 
-    await user.selectOptions(select, "feat/free");
+    await pickBranch(user, "feat/free");
     expect(newLane()).toBeEnabled();
   });
 
@@ -484,13 +484,15 @@ describe("LaneGitBar", () => {
     const user = userEvent.setup();
     const { rerender } = render(<LaneGitBar laneId={3} git={facts()} onChanged={vi.fn()} />);
     await user.click(screen.getByRole("button", { name: /Branch/ }));
-    await user.selectOptions(await screen.findByLabelText("Switch branch…"), "development");
+    await pickBranch(user, "development");
 
     rerender(<LaneGitBar laneId={4} git={facts()} onChanged={vi.fn()} />);
     expect(screen.queryByLabelText("Switch branch…")).toBeNull();
     await user.click(screen.getByRole("button", { name: /Branch/ }));
     await waitFor(() => expect(api.lanes.gitBranches).toHaveBeenCalledWith(4));
-    expect(await screen.findByLabelText("Switch branch…")).toHaveValue("");
+    expect(await screen.findByRole("button", { name: "Switch branch…" })).toHaveTextContent(
+      "Switch branch…"
+    );
   });
 
   it("sends one branch-create for a double Enter", async () => {
@@ -517,7 +519,7 @@ describe("LaneGitBar", () => {
 
     rerender(<LaneGitBar laneId={4} git={facts()} onChanged={vi.fn()} onNewLane={vi.fn()} />);
     await user.click(screen.getByRole("button", { name: /Branch/ }));
-    const select = await screen.findByLabelText("Switch branch…");
+    await screen.findByRole("button", { name: "Switch branch…" });
     await waitFor(() => expect(api.lanes.gitBranches).toHaveBeenCalledWith(4));
     // Lane 3's answer lands late: its worktree held `development`.
     resolveOld({
@@ -526,7 +528,7 @@ describe("LaneGitBar", () => {
       current: "feat/thing",
       worktrees: [{ path: "/repo/dev", branch: "development" }],
     });
-    await user.selectOptions(select, "development");
+    await pickBranch(user, "development");
     const newLane = screen.getByRole("button", { name: "New workspace here" });
     expect(newLane).toBeEnabled();
     expect(newLane).not.toHaveAttribute("title", expect.stringContaining("/repo/dev"));
@@ -613,7 +615,7 @@ describe("merge (issue #45)", () => {
     const user = userEvent.setup();
     render(<LaneGitBar laneId={3} git={facts({ dirty: 0, untracked: 0 })} onChanged={vi.fn()} />);
     await user.click(screen.getByRole("button", { name: /Branch/ }));
-    await user.selectOptions(await screen.findByLabelText("Switch branch…"), "development");
+    await pickBranch(user, "development");
     await user.click(screen.getByRole("button", { name: "Merge into current" }));
     await waitFor(() =>
       expect(api.lanes.gitAction).toHaveBeenCalledWith(3, "merge", { branch: "development" })

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

@@ -0,0 +1,199 @@
+/**
+ * @file Tests for workspace sharing in the client: WorkspaceShareModal starts
+ * on the current list, never offers the owner, warns what sharing means, asks
+ * once before adding someone and saves the WHOLE list; WorkspaceRowMenu offers
+ * Share (server mode) and the other owner-only items only to the workspace's
+ * owner or an admin; given a session, it lists and saves THAT session's
+ * shares instead.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, act, fireEvent } from "@testing-library/react";
+import "../../../i18n";
+import i18n from "../../../i18n";
+import { settleConfirm } from "../../../lib/confirm";
+import { WorkspaceShareModal } from "../WorkspaceShareModal";
+import { WorkspaceRowMenu } from "../WorkspaceRowMenu";
+import type { Lane } from "../../../lib/types";
+
+const perms = vi.hoisted(() => ({ local: false, me: 1, admin: false }));
+vi.mock("../../AuthGate", () => ({
+  usePermissions: () => ({
+    local: perms.local,
+    isAdmin: perms.admin,
+    ownsLane: (l?: { owner_id?: number | null } | null) =>
+      perms.local || perms.admin || l?.owner_id === perms.me,
+  }),
+}));
+
+const m = vi.hoisted(() => ({
+  people: vi.fn(),
+  shares: vi.fn(),
+  setShares: vi.fn(),
+  sessionShares: vi.fn(),
+  setSessionShares: vi.fn(),
+}));
+vi.mock("../../../lib/api", () => ({
+  api: {
+    artifacts: { people: m.people },
+    lanes: {
+      shares: m.shares,
+      setShares: m.setShares,
+      sessionShares: m.sessionShares,
+      setSessionShares: m.setSessionShares,
+    },
+  },
+}));
+
+const lane = {
+  id: 7,
+  title: "Shop",
+  cwd: "/home/alice/shop",
+  owner_id: 1,
+  kind: "adopted",
+} as Lane;
+
+async function settle() {
+  await act(async () => {
+    await new Promise((r) => setTimeout(r, 0));
+  });
+}
+
+beforeEach(() => {
+  i18n.changeLanguage("en");
+  perms.local = false;
+  perms.me = 1;
+  perms.admin = false;
+  m.people.mockResolvedValue({
+    people: [
+      { id: 1, username: "alice", name: "Alice" },
+      { id: 2, username: "bob", name: "Bob" },
+      { id: 3, username: "carol", name: "Carol" },
+    ],
+  });
+  m.shares.mockResolvedValue({
+    shares: [{ id: 2, username: "bob", name: "Bob", sharedAt: "2026-11-06T00:00:00Z" }],
+    canManage: true,
+  });
+  m.setShares.mockImplementation(async (_id: number, ids: number[]) => ({
+    shares: ids.map((id) => ({ id, username: `u${id}`, name: `U${id}`, sharedAt: "" })),
+  }));
+});
+
+describe("WorkspaceShareModal", () => {
+  it("starts on the current list, never offers the owner and says what sharing means", async () => {
+    render(<WorkspaceShareModal lane={lane} onClose={() => {}} />);
+    await settle();
+    const list = screen.getByTestId("workspace-share-people");
+    expect(list).not.toHaveTextContent("Alice");
+    expect(screen.getByRole("checkbox", { name: /Bob/ })).toHaveAttribute("aria-checked", "true");
+    expect(screen.getByRole("checkbox", { name: /Carol/ })).toHaveAttribute(
+      "aria-checked",
+      "false"
+    );
+    expect(screen.getByTestId("workspace-share-warning")).toHaveTextContent(/your home folder/i);
+    // Nothing changed yet: nothing to save.
+    expect(screen.getByTestId("workspace-share-save")).toBeDisabled();
+  });
+
+  it("asks once before adding someone, then saves the whole list", async () => {
+    const onClose = vi.fn();
+    render(<WorkspaceShareModal lane={lane} onClose={onClose} />);
+    await settle();
+    fireEvent.click(screen.getByRole("checkbox", { name: /Carol/ }));
+    fireEvent.click(screen.getByTestId("workspace-share-save"));
+    await settle();
+    expect(m.setShares).not.toHaveBeenCalled();
+    await act(async () => settleConfirm(true));
+    await settle();
+    expect(m.setShares).toHaveBeenCalledWith(7, [2, 3]);
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it("lists a collaborator disabled since, so they can be taken off", async () => {
+    m.shares.mockResolvedValue({
+      shares: [
+        { id: 2, username: "bob", name: "Bob", sharedAt: "" },
+        { id: 9, username: "dan", name: "Dan", sharedAt: "", disabled: true },
+      ],
+      canManage: true,
+    });
+    render(<WorkspaceShareModal lane={lane} onClose={() => {}} />);
+    await settle();
+    const dan = screen.getByRole("checkbox", { name: /Dan/ });
+    expect(dan).toHaveAttribute("aria-checked", "true");
+    expect(dan).toHaveTextContent("(disabled)");
+    fireEvent.click(dan);
+    fireEvent.click(screen.getByTestId("workspace-share-save"));
+    await settle();
+    expect(m.setShares).toHaveBeenCalledWith(7, [2]);
+  });
+
+  it("takes someone off without asking", async () => {
+    render(<WorkspaceShareModal lane={lane} onClose={() => {}} />);
+    await settle();
+    fireEvent.click(screen.getByRole("checkbox", { name: /Bob/ }));
+    fireEvent.click(screen.getByTestId("workspace-share-save"));
+    await settle();
+    expect(m.setShares).toHaveBeenCalledWith(7, []);
+  });
+});
+
+describe("WorkspaceRowMenu on a shared workspace", () => {
+  const open = () =>
+    render(<WorkspaceRowMenu lane={lane} x={0} y={0} onClose={() => {}} onAction={() => {}} />);
+
+  it("offers its owner Share, Rename and Delete", () => {
+    open();
+    expect(screen.getByTestId("workspace-menu-share")).toBeInTheDocument();
+    expect(screen.getByText("Rename")).toBeInTheDocument();
+    expect(screen.getByText("Delete workspace…")).toBeInTheDocument();
+  });
+
+  it("offers a user it is shared with none of the owner-only items", () => {
+    perms.me = 2;
+    open();
+    expect(screen.queryByTestId("workspace-menu-share")).toBeNull();
+    expect(screen.queryByText("Rename")).toBeNull();
+    expect(screen.queryByText("Delete workspace…")).toBeNull();
+    expect(screen.getByText("Copy path")).toBeInTheDocument();
+  });
+
+  it("has no Share in local mode", () => {
+    perms.local = true;
+    open();
+    expect(screen.queryByTestId("workspace-menu-share")).toBeNull();
+    expect(screen.getByText("Rename")).toBeInTheDocument();
+  });
+});
+
+describe("WorkspaceShareModal for one session", () => {
+  it("reads and saves that session's own list, never the workspace's", async () => {
+    m.shares.mockClear();
+    m.setShares.mockClear();
+    m.sessionShares.mockResolvedValue({ shares: [], canManage: true });
+    m.setSessionShares.mockResolvedValue({
+      shares: [{ id: 3, username: "carol", name: "Carol", sharedAt: "" }],
+    });
+    render(
+      <WorkspaceShareModal
+        lane={lane}
+        session={{ id: "s-1", name: "Fix cart" }}
+        onClose={() => {}}
+      />
+    );
+    await settle();
+    expect(m.sessionShares).toHaveBeenCalledWith(7, "s-1");
+    expect(m.shares).not.toHaveBeenCalled();
+    expect(screen.getByText("Share session")).toBeTruthy();
+    expect(screen.getByText("Fix cart")).toBeTruthy();
+    fireEvent.click(screen.getByRole("checkbox", { name: /Carol/ }));
+    fireEvent.click(screen.getByRole("button", { name: "Save" }));
+    await settle();
+    await act(async () => settleConfirm(true));
+    await settle();
+    expect(m.setSessionShares).toHaveBeenCalledWith(7, "s-1", [3]);
+    expect(m.setShares).not.toHaveBeenCalled();
+  });
+});

client/src/components/remote/RemoteDevices.tsx

@@ -0,0 +1,240 @@
+/**
+ * @file RemoteDevices.tsx
+ * @description The hub's view of remote clients (server mode, server/hub/):
+ * a user's enrolled machines with Revoke (the viewer's own password again —
+ * the server checks it and writes the audit entry), and their Company-account
+ * sessions grouped device › folder with what the gateway counted. Shown in
+ * Settings for the signed-in user's own machines and on the Users page's user
+ * detail for an admin/analyst (`userId`).
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Laptop, ShieldAlert } from "lucide-react";
+import { Link } from "react-router-dom";
+import { api, type RemoteDevice, type RemoteSessionRow } from "../../lib/api";
+import { formatDateTime } from "../../lib/format";
+import { toast } from "../../lib/toast";
+import { isSubmitEnter } from "../../lib/keys";
+import { ConfirmModal } from "../ConfirmModal";
+
+const fmt = (n: number) =>
+  n >= 1e6 ? `${(n / 1e6).toFixed(1)}M` : n >= 1e3 ? `${(n / 1e3).toFixed(1)}k` : String(n);
+
+export function RemoteDevices({ userId, canRevoke }: { userId?: number; canRevoke: boolean }) {
+  const { t } = useTranslation("settings");
+  const [devices, setDevices] = useState<RemoteDevice[] | null>(null);
+  const [sessions, setSessions] = useState<RemoteSessionRow[]>([]);
+  const [revoking, setRevoking] = useState<RemoteDevice | null>(null);
+
+  const load = useCallback(() => {
+    api.remoteHub
+      .devices(userId)
+      .then((r) => setDevices(r.devices))
+      .catch(() => setDevices([]));
+    api.remoteHub
+      .sessions(userId)
+      .then((r) => setSessions(r.sessions))
+      .catch(() => setSessions([]));
+  }, [userId]);
+  useEffect(load, [load]);
+
+  // device › folder › sessions, the newest first (the API's order).
+  const groups = useMemo(() => {
+    const byDevice = new Map<string, Map<string, RemoteSessionRow[]>>();
+    for (const s of sessions) {
+      const d = s.deviceName;
+      if (!byDevice.has(d)) byDevice.set(d, new Map());
+      const folders = byDevice.get(d)!;
+      const f = s.cwd || "—";
+      if (!folders.has(f)) folders.set(f, []);
+      folders.get(f)!.push(s);
+    }
+    return [...byDevice.entries()];
+  }, [sessions]);
+
+  if (devices === null) return null;
+  return (
+    <div className="space-y-4" data-testid="remote-devices">
+      {devices.length === 0 ? (
+        <p className="text-xs text-fg-muted">{t("companyHub.noDevices")}</p>
+      ) : (
+        <ul className="divide-y divide-border rounded-lg border border-border">
+          {devices.map((d) => (
+            <li key={d.id} className="flex flex-wrap items-center gap-2 px-3 py-2 text-xs">
+              <Laptop className="h-3.5 w-3.5 text-fg-muted" />
+              <span className="font-medium text-fg-primary">{d.name}</span>
+              <span className="text-fg-muted">
+                {d.revokedAt
+                  ? t("companyHub.revokedAt", { time: formatDateTime(d.revokedAt) })
+                  : d.active
+                    ? t("companyHub.validUntil", { time: formatDateTime(d.expiresAt) })
+                    : t("companyHub.expired")}
+              </span>
+              {d.lastSeenAt && (
+                <span className="text-fg-muted">
+                  ·{" "}
+                  {t("companyHub.lastSeen", {
+                    time: formatDateTime(d.lastSeenAt),
+                    ip: d.lastIp || "?",
+                  })}
+                </span>
+              )}
+              {canRevoke && d.active && (
+                <button
+                  type="button"
+                  className="btn-ghost ml-auto h-7 px-2 text-xs text-status-danger"
+                  onClick={() => setRevoking(d)}
+                >
+                  {t("companyHub.revoke")}
+                </button>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {groups.length > 0 && (
+        <div className="space-y-3">
+          <h4 className="text-xs font-semibold text-fg-secondary">{t("companyHub.sessions")}</h4>
+          {groups.map(([device, folders]) => (
+            <div key={device} className="space-y-1.5">
+              <div className="text-xs font-medium text-fg-primary">{device}</div>
+              {[...folders.entries()].map(([folder, rows]) => (
+                <div key={folder} className="ml-3 space-y-1">
+                  <div className="truncate font-mono text-[11px] text-fg-muted" title={folder}>
+                    {folder}
+                  </div>
+                  <ul className="ml-3 space-y-0.5">
+                    {rows.map((s) => (
+                      <li
+                        key={s.sessionId}
+                        className="flex flex-wrap items-center gap-2 text-[11px]"
+                      >
+                        {s.purgedAt ? (
+                          <span className="text-fg-muted">
+                            {s.title || s.sessionId.slice(0, 8)}
+                          </span>
+                        ) : (
+                          <Link
+                            to={`/sessions/${s.sessionId}`}
+                            className="text-accent hover:underline"
+                          >
+                            {s.title || s.sessionId.slice(0, 8)}
+                          </Link>
+                        )}
+                        {s.unmonitored ? (
+                          <span className="inline-flex items-center gap-1 text-status-warning">
+                            <ShieldAlert className="h-3 w-3" />
+                            {t("companyHub.unmonitored")}
+                          </span>
+                        ) : null}
+                        <span className="text-fg-muted">
+                          {t("companyHub.sessionLine", {
+                            requests: s.requests,
+                            input: fmt(s.inputTokens + s.cacheReadTokens + s.cacheWriteTokens),
+                            output: fmt(s.outputTokens),
+                            account: s.account || "—",
+                          })}
+                        </span>
+                        <span className="text-fg-muted">
+                          · {formatDateTime(s.lastRequestAt || s.registeredAt)}
+                        </span>
+                        {s.purgedAt && (
+                          <span className="text-fg-muted">· {t("companyHub.purged")}</span>
+                        )}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {revoking && (
+        <RevokeDialog
+          device={revoking}
+          onClose={() => setRevoking(null)}
+          onDone={() => {
+            setRevoking(null);
+            load();
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+function RevokeDialog({
+  device,
+  onClose,
+  onDone,
+}: {
+  device: RemoteDevice;
+  onClose: () => void;
+  onDone: () => void;
+}) {
+  const { t } = useTranslation("settings");
+  const [password, setPassword] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const submit = async () => {
+    if (!password || busy) return;
+    setBusy(true);
+    setError(null);
+    try {
+      await api.remoteHub.revoke(device.id, password);
+      toast.success(t("companyHub.revoked", { name: device.name }));
+      onDone();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+  return (
+    <ConfirmModal
+      open
+      title={t("companyHub.revokeTitle", { name: device.name })}
+      message={t("companyHub.revokeHint")}
+      confirmLabel={t("companyHub.revoke")}
+      cancelLabel={t("common:cancel")}
+      busy={busy}
+      disabled={!password}
+      onConfirm={() => void submit()}
+      onCancel={onClose}
+    >
+      <div
+        className="mt-3 space-y-2"
+        onKeyDown={(e) => {
+          if (isSubmitEnter(e)) {
+            e.preventDefault();
+            void submit();
+          }
+        }}
+      >
+        <label className="block">
+          <span className="text-xs font-medium text-fg-secondary">
+            {t("companyHub.yourPassword")}
+          </span>
+          <input
+            type="password"
+            className="input mt-1 w-full text-sm"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            autoComplete="current-password"
+            aria-label={t("companyHub.yourPassword")}
+          />
+        </label>
+        {error && (
+          <p role="alert" className="text-xs text-status-danger">
+            {error}
+          </p>
+        )}
+      </div>
+    </ConfirmModal>
+  );
+}

client/src/components/run/ChatFilePreview.tsx

@@ -35,7 +35,7 @@ import {
   Share2,
   X,
 } from "lucide-react";
-import { api, gitTarget } from "../../lib/api";
+import { api, gitTarget, withToken } from "../../lib/api";
 import { copyText } from "../../lib/clipboard";
 import { useDialog } from "../../hooks/useDialog";
 import { dragSkill } from "../../lib/promptAttach";
@@ -116,7 +116,7 @@ function useContent(path: string, scope: PreviewScope): Content {
     };
     const drop = DROP_RE.exec(path);
     if (drop) {
-      const src = `/api/run/drop/${encodeURIComponent(drop[1]!)}`;
+      const src = withToken(`/api/run/drop/${encodeURIComponent(drop[1]!)}`);
       if (IMAGE_RE.test(path)) setContent({ kind: "image", src });
       else if (DROP_TEXT_RE.test(path))
         show(

client/src/components/run/ConsoleTabs.tsx

@@ -85,6 +85,8 @@ import {
   slotOfKey,
 } from "../../lib/paneLayout";
 import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../ContextMenu";
+import { useAuth } from "../AuthGate";
+import { usePanePresence } from "../../hooks/usePanePresence";
 
 type AiToolsState = ReturnType<typeof useAiTools>;
 
@@ -234,6 +236,19 @@ export function ConsoleTabs({
   const tabRefs = useRef(new Map<string, HTMLButtonElement>());
   const menuRef = useRef<HTMLDivElement>(null);
   const tabCtx = useContextMenu<Tab>();
+  // Server mode: who else has these panes open, and whose money a pane is.
+  const presence = usePanePresence(lane.id);
+  const { state: auth } = useAuth();
+  const meId = auth.mode === "server" ? auth.user?.id : undefined;
+  const othersIn = (tab: Tab) => {
+    const seen = new Map<number, { id: number; name: string }>();
+    for (const r of tab.runs) {
+      for (const u of presence[r.id] ?? []) if (u.id !== meId) seen.set(u.id, u);
+    }
+    return [...seen.values()];
+  };
+  const billedTo = (tab: Tab) =>
+    [...new Set(tab.runs.map((r) => r.startedBy?.name).filter(Boolean))] as string[];
 
   // A group whose runs the list has not caught up with yet is not drawn.
   const tabs = useMemo<Tab[]>(
@@ -532,6 +547,7 @@ export function ConsoleTabs({
         {tabs.map((tab, i) => {
           const active = !settings?.active && tab.index === groups.active;
           const single = tab.runs.length === 1 ? tab.focus : null;
+          const others = othersIn(tab);
           const state = tabState(tab);
           if (single && renaming === single.id) {
             return (
@@ -606,7 +622,7 @@ export function ConsoleTabs({
                 // Ctrl/Cmd+click brings a one-pane tab into the tab on screen.
                 onClick={(e) => onOpen(tab.focus.id, !!single && (e.ctrlKey || e.metaKey))}
                 onDoubleClick={() => single && startRename(single)}
-                title={
+                title={[
                   single
                     ? [
                         toolLabel(single),
@@ -617,8 +633,14 @@ export function ConsoleTabs({
                       ]
                         .filter(Boolean)
                         .join("\n")
-                    : tab.runs.map((r) => `${toolLabel(r)} — ${label(r)}`).join("\n")
-                }
+                    : tab.runs.map((r) => `${toolLabel(r)} — ${label(r)}`).join("\n"),
+                  ...billedTo(tab).map((name) => t("tabs.billedTo", { name })),
+                  others.length
+                    ? t("tabs.here", { names: others.map((u) => u.name).join(", ") })
+                    : null,
+                ]
+                  .filter(Boolean)
+                  .join("\n")}
                 className="flex h-full min-w-0 items-center gap-2 pl-3 pr-1.5 text-sm"
               >
                 <span className="flex shrink-0 items-center gap-1">
@@ -627,6 +649,23 @@ export function ConsoleTabs({
                   ))}
                 </span>
                 <span className="truncate">{tabLabel(tab)}</span>
+                {others.length > 0 && (
+                  <span
+                    data-testid={`console-tab-people-${tab.key}`}
+                    className="flex shrink-0 -space-x-1"
+                    aria-label={t("tabs.here", { names: others.map((u) => u.name).join(", ") })}
+                  >
+                    {others.slice(0, 3).map(({ id, name }) => (
+                      <span
+                        key={id}
+                        aria-hidden
+                        className="flex h-4 w-4 items-center justify-center rounded-full border border-surface-1 bg-accent-solid text-[9px] font-semibold uppercase text-white"
+                      >
+                        {name.slice(0, 1)}
+                      </span>
+                    ))}
+                  </span>
+                )}
                 {state && <RunDot state={state} />}
               </button>
               {tab.runs.some(canSleep) && (

client/src/components/run/PaneChat.tsx

@@ -57,7 +57,7 @@
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { memo, useCallback, useEffect, useRef, useState, type CSSProperties } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
 import { useTranslation } from "react-i18next";
 import {
   ArrowUp,
@@ -124,6 +124,11 @@ const isSettable = (m: unknown): m is PermissionMode => MODES.some(([v]) => v ==
 const OUTPUT_FETCH_MS = 1000;
 /** A tool with no known busy line counts as at work this long after its pane last drew. */
 const OUTPUT_BUSY_MS = 2000;
+/** How long Stop stays up after every busy signal dropped: the screen's busy
+ *  line comes and goes while the CLI redraws, and without a hold the button
+ *  flickered between Stop and Send mid-turn. An explicit end (Stop pressed)
+ *  is not held. */
+const BUSY_HOLD_MS = 2500;
 const SIDE_KEY = "agenthub.chat.panelWidth";
 const clampSide = (f: number) => Math.round(Math.min(0.7, Math.max(0.2, f)) * 100) / 100;
 const outlineKey = (sessionId: string) => `agenthub.chat.panel.${sessionId}`;
@@ -140,6 +145,37 @@ const storedSide = () => {
  *  older; every Claude model since (Sonnet/Opus 4.6+, the 5 family) has 1M
  *  (LiteLLM's list, 2026-10). Null for another vendor's model. */
 // ponytail: a fixed rule, not a table; read LiteLLM's max_input_tokens if a new 200K model ships.
+/** When the conversation's last turn ended — its newest reply's timestamp
+ *  when that reply finished (`end_turn`, the "Done in …" line) and no prompt
+ *  came after it — else null. */
+export function endedTurnAt(messages: readonly TranscriptMessage[]): string | null {
+  for (let i = messages.length - 1; i >= 0; i--) {
+    const m = messages[i]!;
+    if (m.type === "session_event") continue;
+    const sender = m.sender ?? (m.type === "assistant" ? "assistant" : "user");
+    if (sender === "assistant") return m.stop_reason === "end_turn" ? m.timestamp : null;
+    if (sender === "user" && m.content.some((c) => c.type === "text")) return null;
+  }
+  return null;
+}
+
+/** `value`, except that a drop to false shows only once it has lasted
+ *  `holdMs`; a change of `release` (Stop pressed) lets it drop at once. */
+export function useHeldTrue(value: boolean, holdMs: number, release: unknown): boolean {
+  const [held, setHeld] = useState(value);
+  const released = useRef(release);
+  useEffect(() => {
+    if (value) return setHeld(true);
+    if (released.current !== release) {
+      released.current = release;
+      return setHeld(false);
+    }
+    const timer = window.setTimeout(() => setHeld(false), holdMs);
+    return () => window.clearTimeout(timer);
+  }, [value, holdMs, release]);
+  return value || held;
+}
+
 export function contextWindow(model: string | null): number | null {
   // A Codex/omp chat reports its own window (ContextMeter's `window`).
   if (!model?.startsWith("claude-")) return null;
@@ -150,13 +186,7 @@ export function contextWindow(model: string | null): number | null {
 
 /** How full the context is: a ring and a percentage, amber then red as
  *  Claude Code's auto-compact comes near. */
-function ContextMeter({
-  tokens,
-  model,
-}: {
-  tokens: number;
-  model: string | null;
-}) {
+function ContextMeter({ tokens, model }: { tokens: number; model: string | null }) {
   const { t } = useTranslation("run");
   const size = contextWindow(model);
   if (!size || !tokens) return null;
@@ -616,19 +646,27 @@ export const PaneChat = memo(function PaneChat({
   const scope: PreviewScope = { laneId, laneCwd: laneCwd || cwd, cwd, sessionId };
   const text = promptWithImages(prompt, images);
 
+  // The conversation on screen: an artifact's versions are rebuilt from it,
+  // and its finished reply ends the turn (below).
+  const [convMessages, setConvMessages] = useState<TranscriptMessage[]>([]);
   // The main agent is "working" from a prompt's submit to its Stop hook, and
   // waits on the user from a Notification (a permission prompt) to the next hook.
   const [working, setWorking] = useState(false);
   const [waiting, setWaiting] = useState(false);
   // Stop presses, for the conversation's live line (issue #74).
   const [stops, setStops] = useState(0);
-  const readWorking = useCallback(
-    () =>
+  // Reads overlap (every throttled transcript change starts one); only the
+  // newest may land, or a slow older answer put back a state already left.
+  const readSeq = useRef(0);
+  const readWorking = useCallback(() => {
+    const seq = ++readSeq.current;
+    return (
       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) => {
+          if (seq !== readSeq.current) return;
           const main = r.agents.filter((a) => a.type === "main");
           // A fresh start, resume or `/clear` leaves main "working" at an
           // empty prompt (SessionStart's flag) until the first prompt.
@@ -637,9 +675,9 @@ export const PaneChat = memo(function PaneChat({
           );
           setWaiting(main.some((a) => agentAwaitingReason(a) === "notification"));
         })
-        .catch(() => {}),
-    [sessionId]
-  );
+        .catch(() => {})
+    );
+  }, [sessionId]);
   useEffect(() => {
     void readWorking();
   }, [readWorking]);
@@ -714,7 +752,20 @@ export const PaneChat = memo(function PaneChat({
     }, 700);
     return () => window.clearInterval(timer);
   }, [runId, onScreen]);
-  const busy = working || screenBusy;
+  // The reply the chat already shows as "Done in …" ends the turn, hook or
+  // not: a turn may end with no hook at all (no Stop, no SubagentStop) until
+  // the idle Notification a minute later. Only a reply that is not the one
+  // already there when `working` began counts, so a new prompt whose line the
+  // transcript has not caught up with still shows Stop.
+  const endedAt = useMemo(() => endedTurnAt(convMessages), [convMessages]);
+  const endedRef = useRef(endedAt);
+  endedRef.current = endedAt;
+  const [staleEnd, setStaleEnd] = useState<string | null>(null);
+  useEffect(() => {
+    if (working) setStaleEnd(endedRef.current);
+  }, [working]);
+  const turnOver = endedAt !== null && endedAt !== staleEnd;
+  const busy = useHeldTrue((working && !turnOver) || screenBusy, BUSY_HOLD_MS, stops);
   const asking = waiting || menu !== null;
   // Gone until the pane redraws: no second press on a stale menu.
   const choose = (index: number) => {
@@ -762,8 +813,6 @@ export const PaneChat = memo(function PaneChat({
     () => showTerminal(runId, sessionId, run.tool),
     [runId, sessionId, run.tool]
   );
-  // The conversation on screen: an artifact's versions are rebuilt from it.
-  const [convMessages, setConvMessages] = useState<TranscriptMessage[]>([]);
   // An artifact card opens in this chat's own panel, like Claude Desktop's —
   // not the workspace's Changes panel a plain file link goes to.
   const openArtifact = useCallback(
@@ -812,6 +861,8 @@ export const PaneChat = memo(function PaneChat({
     if (!text || uploading) return;
     const out = promptForPane(prompt, images, claude);
     if (!(await command(out.text, out.files))) return;
+    // A new turn: the reply now on screen is the previous one's.
+    setStaleEnd(endedRef.current);
     setFollow((n) => n + 1);
     setPrompt("");
     images.forEach((i) => i.url && URL.revokeObjectURL(i.url));

client/src/components/run/ProxyPicker.tsx

@@ -6,7 +6,10 @@
  * reads to list the proxy's models). A tool that cannot use a proxy (only
  * Claude and Codex can) shows Native, disabled. The last pick is remembered
  * for the next session (`agenthub.session.proxy`; the pre-rename
- * `agenthub.session.router` is still read when that is unset).
+ * `agenthub.session.router` is still read when that is unset). On a local
+ * machine enrolled with the company hub (`/api/remote-client`) the list ends
+ * with the Company account (`agenthub.company`): a Claude session there runs through
+ * the hub's gateway, and only such sessions are reported to the hub.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -39,14 +42,30 @@ export function useSessionProxy(): [string, (v: string) => void] {
   return [value, set];
 }
 
-/** The saved profiles (Native included), null until they arrive. */
+/** The remote client's Company account, as the list shows it. */
+const COMPANY: AiProxy = {
+  name: "agenthub.company",
+  label: "Company account",
+  builtin: false,
+  company: true,
+  baseUrl: "",
+  hasKey: false,
+  model: "",
+  models: {},
+};
+
+/** The saved profiles (Native included, the Company account last when enrolled), null until they arrive. */
 export function useAiProxies(): AiProxy[] | null {
   const [proxies, setProxies] = useState<AiProxy[] | null>(null);
   useEffect(() => {
     let alive = true;
-    api.aiProxies
-      .list()
-      .then((r) => alive && setProxies(r.items))
+    // A hub (server mode) answers 404 here, and a failure only hides the entry.
+    const enrolled = Promise.resolve()
+      .then(() => api.remoteClient.status())
+      .then((r) => r.enrolled)
+      .catch(() => false);
+    Promise.all([api.aiProxies.list().then((r) => r.items), enrolled])
+      .then(([items, company]) => alive && setProxies(company ? [...items, COMPANY] : items))
       .catch(() => alive && setProxies([]));
     return () => {
       alive = false;
@@ -82,12 +101,19 @@ export function ProxyPicker({
   // A remembered profile that has since been deleted falls back to native,
   // or the start would be refused for a proxy the user cannot see.
   useEffect(() => {
-    if (proxies && value !== "native" && !proxies.some((r) => r.name === value)) onChange("native");
-  }, [proxies, value, onChange]);
+    if (!proxies || value === "native") return;
+    const pick = proxies.find((r) => r.name === value);
+    if (!pick || (pick.company && tool !== "claude")) onChange("native");
+  }, [proxies, value, onChange, tool]);
 
   const options =
     capable && proxies?.length
-      ? proxies.map((r) => ({ value: r.name, label: r.builtin ? native : r.label }))
+      ? proxies
+          .filter((r) => !r.company || tool === "claude")
+          .map((r) => ({
+            value: r.name,
+            label: r.builtin ? native : r.company ? t("proxy.company") : r.label,
+          }))
       : [{ value: "native", label: native }];
   return (
     <div data-testid="proxy-picker">

client/src/components/run/TerminalView.tsx

@@ -72,7 +72,7 @@ import { ArrowDown, ArrowUp, X } from "lucide-react";
 import "@xterm/xterm/css/xterm.css";
 import { useTheme } from "../../hooks/useTheme";
 import { terminalThemeFor } from "../../lib/terminalTheme";
-import { api } from "../../lib/api";
+import { api, withToken } from "../../lib/api";
 import { writeClipboard } from "../../lib/clipboard";
 import { MENU_CURSOR_ROW, notePaneFocus, notePaneOutput, registerPane } from "../../lib/panePaste";
 import {
@@ -717,7 +717,11 @@ export const TerminalView = memo(function TerminalView({
         // own size, so a pane on a background tab is never resized by it.
         const size =
           hasBox() && term.cols > 1 && term.rows > 1 ? `?cols=${term.cols}&rows=${term.rows}` : "";
-        const sock = new WebSocket(`${wsBaseUrl}/ws-pty/${encodeURIComponent(runId)}${size}`);
+        // The dashboard token, when one is set, rides the query like `/ws`'s:
+        // the server refuses the upgrade without it.
+        const sock = new WebSocket(
+          withToken(`${wsBaseUrl}/ws-pty/${encodeURIComponent(runId)}${size}`)
+        );
         ws = sock;
         wsRef.current = sock;
         // Server sends PTY bytes as binary frames — default binaryType ("blob")

client/src/components/run/__tests__/ConsoleTabs.presence.test.tsx

@@ -0,0 +1,79 @@
+/**
+ * @file ConsoleTabs.presence.test.tsx
+ * @description Workspace sharing phase 4 on the tab bar: a tab shows who ELSE
+ * has its panes open (never the viewer), and its tooltip says whose money a
+ * pane a collaborator opened is.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import "../../../i18n";
+import type { RunHandle } from "../../../lib/api";
+import type { Lane } from "../../../lib/types";
+import { pane, type PaneGroups } from "../../../lib/paneLayout";
+import { ConsoleTabs } from "../ConsoleTabs";
+
+vi.mock("../../../lib/api", () => ({
+  api: {
+    aiTools: {
+      list: vi.fn().mockResolvedValue({ default: "claude", tools: [] }),
+      models: vi.fn().mockResolvedValue({ flag: true, models: [], defaultModel: null }),
+    },
+  },
+}));
+vi.mock("../../AuthGate", () => ({
+  useAuth: () => ({ state: { mode: "server", user: { id: 1, username: "alice" } } }),
+  usePermissions: () => ({ local: false, isAdmin: false }),
+}));
+vi.mock("../../../hooks/usePanePresence", () => ({
+  usePanePresence: () => ({
+    "agenthub-lane-1": [
+      { id: 1, name: "Alice" },
+      { id: 2, name: "Bob" },
+    ],
+  }),
+}));
+
+const LANE = { id: 1, tool: "claude", cwd: "/w", title: "w" } as unknown as Lane;
+const RUN: RunHandle = {
+  id: "agenthub-lane-1",
+  laneId: 1,
+  slot: 0,
+  status: "running",
+  cwd: "/w",
+  model: null,
+  permissionMode: null,
+  effort: null,
+  resumeSessionId: null,
+  sessionId: null,
+  startedAt: null,
+  promptPreview: null,
+  startedBy: { id: 2, name: "Bob" },
+  tool: "claude",
+};
+const GROUPS: PaneGroups = { groups: [{ root: pane(0), focus: 0 }], active: 0 };
+
+describe("ConsoleTabs presence", () => {
+  it("shows who else is in a pane, and whose money it is", () => {
+    render(
+      <MemoryRouter>
+        <ConsoleTabs
+          lane={LANE}
+          tabs={[RUN]}
+          groups={GROUPS}
+          onGroupsChange={vi.fn()}
+          onOpen={vi.fn()}
+          onClosed={vi.fn()}
+        />
+      </MemoryRouter>
+    );
+    const people = screen.getAllByTestId(/^console-tab-people-/)[0]!;
+    expect(people.textContent).toBe("B");
+    expect(people.getAttribute("aria-label")).toBe("Also here: Bob");
+    const tab = screen.getAllByRole("tab")[0]!;
+    expect(tab.getAttribute("title")).toContain("Billed to Bob");
+    expect(tab.getAttribute("title")).not.toContain("Alice");
+  });
+});

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

@@ -18,7 +18,7 @@
 import { act, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { PaneChat, contextWindow } from "../PaneChat";
+import { PaneChat, contextWindow, endedTurnAt } from "../PaneChat";
 import { api } from "../../../lib/api";
 import {
   answerRunMenu,
@@ -33,16 +33,21 @@ import {
 import { OPEN_IN_CHANGES_EVENT } from "../../../lib/openInChanges";
 import { eventBus } from "../../../lib/eventBus";
 
+// What the stand-in conversation reports as on screen when asked.
+const conv = vi.hoisted(() => ({ messages: [] as unknown[] }));
 vi.mock("../../conversation/ConversationView", () => ({
   // Stands in for a turn's "Edited N files" card: a click names a file.
   ConversationView: ({
     onOpenFile,
     onNotStarted,
+    onMessages,
   }: {
     onOpenFile?: (path: string) => void;
     onNotStarted?: (notStarted: boolean) => void;
+    onMessages?: (messages: never[]) => void;
   }) => (
     <div data-testid="conversation">
+      <button data-testid="conv-messages" onClick={() => onMessages?.(conv.messages as never[])} />
       <button data-testid="edited-in" onClick={() => onOpenFile?.("/w/src/a.ts")} />
       <button data-testid="edited-out" onClick={() => onOpenFile?.("/elsewhere/b.ts")} />
       {/* The session has no row yet: the CLI has not started it. */}
@@ -215,12 +220,51 @@ describe("PaneChat — Stop", () => {
       await act(async () => {
         await vi.advanceTimersByTimeAsync(5000);
       });
+      // Send comes back once nothing has said busy for BUSY_HOLD_MS.
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(2600);
+      });
       await waitFor(() => expect(screen.queryByTestId("pane-chat-stop")).toBeNull());
     } finally {
       vi.useRealTimers();
     }
   });
 
+  it("drops Stop once the conversation shows the finished reply, with no hook at all", async () => {
+    // Claude Code may end a turn with no Stop and no SubagentStop: main stays
+    // "working" until the idle Notification a minute later.
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    vi.mocked(api.agents.list).mockResolvedValue({
+      agents: [{ type: "main", status: "working" }],
+    } as never);
+    try {
+      renderChat();
+      expect(await screen.findByTestId("pane-chat-stop")).toBeInTheDocument();
+      conv.messages = [
+        {
+          type: "user",
+          timestamp: "2026-11-04T05:00:32Z",
+          content: [{ type: "text", text: "hi" }],
+        },
+        {
+          type: "assistant",
+          timestamp: "2026-11-04T05:01:25Z",
+          stop_reason: "end_turn",
+          content: [{ type: "text", text: "done" }],
+        },
+      ];
+      fireEvent.click(screen.getByTestId("conv-messages"));
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(2600);
+      });
+      await waitFor(() => expect(screen.queryByTestId("pane-chat-stop")).toBeNull());
+    } finally {
+      vi.useRealTimers();
+      conv.messages = [];
+      vi.mocked(api.agents.list).mockResolvedValue({ agents: [] } as never);
+    }
+  });
+
   it("shows Stop while the pane's own busy line shows, with no hook saying so", async () => {
     // omp, Cursor or Codex without its hooks: only the terminal knows.
     vi.useFakeTimers({ shouldAdvanceTime: true });
@@ -233,6 +277,10 @@ describe("PaneChat — Stop", () => {
       await act(async () => {
         await vi.advanceTimersByTimeAsync(800);
       });
+      // Send comes back once nothing has said busy for BUSY_HOLD_MS.
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(2600);
+      });
       await waitFor(() => expect(screen.queryByTestId("pane-chat-stop")).toBeNull());
     } finally {
       vi.useRealTimers();
@@ -240,6 +288,32 @@ describe("PaneChat — Stop", () => {
     }
   });
 
+  it("does not flicker to Send when the busy line drops out for a moment", async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    vi.mocked(readRunBusy).mockReturnValue(true);
+    try {
+      renderChat();
+      expect(await screen.findByTestId("pane-chat-stop")).toBeInTheDocument();
+      // A redraw: the spinner line is gone for a poll or two.
+      vi.mocked(readRunBusy).mockReturnValue(false);
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(1500);
+      });
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(50);
+      });
+      expect(screen.getByTestId("pane-chat-stop")).toBeInTheDocument();
+      vi.mocked(readRunBusy).mockReturnValue(true);
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(800);
+      });
+      expect(screen.getByTestId("pane-chat-stop")).toBeInTheDocument();
+    } finally {
+      vi.useRealTimers();
+      vi.mocked(readRunBusy).mockReturnValue(false);
+    }
+  });
+
   it("counts a tool with no known busy line as working while its pane draws", async () => {
     vi.useFakeTimers({ shouldAdvanceTime: true });
     vi.mocked(readRunBusy).mockReturnValue(null);
@@ -261,6 +335,10 @@ describe("PaneChat — Stop", () => {
       await act(async () => {
         await vi.advanceTimersByTimeAsync(2800);
       });
+      // Send comes back once nothing has said busy for BUSY_HOLD_MS.
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(2600);
+      });
       await waitFor(() => expect(screen.queryByTestId("pane-chat-stop")).toBeNull());
     } finally {
       vi.useRealTimers();
@@ -710,3 +788,24 @@ describe("PaneChat — a Codex terminal", () => {
     expect(screen.queryByTestId("pane-chat-codex-model")).toBeNull();
   });
 });
+
+describe("endedTurnAt", () => {
+  const user = (text: string) => ({
+    type: "user",
+    timestamp: "u",
+    content: [{ type: "text", text }],
+  });
+  const reply = (stop_reason: string, timestamp = "a") => ({
+    type: "assistant",
+    timestamp,
+    stop_reason,
+    content: [{ type: "text", text: "x" }],
+  });
+  const toolResult = { type: "user", timestamp: "r", content: [{ type: "tool_result" }] };
+  it("is the finished reply's time, and null mid-turn or after a new prompt", () => {
+    expect(endedTurnAt([user("hi"), reply("end_turn", "t1")] as never)).toBe("t1");
+    expect(endedTurnAt([user("hi"), reply("tool_use"), toolResult] as never)).toBeNull();
+    expect(endedTurnAt([user("hi"), reply("end_turn"), user("again")] as never)).toBeNull();
+    expect(endedTurnAt([] as never)).toBeNull();
+  });
+});

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

@@ -28,6 +28,7 @@ vi.mock("../../../lib/api", async (importOriginal) => {
         }),
       },
       aiProxies: { list: vi.fn() },
+      remoteClient: { status: vi.fn() },
     },
   };
 });
@@ -40,6 +41,55 @@ beforeEach(() => {
   vi.mocked(api.aiProxies.list)
     .mockReset()
     .mockResolvedValue({ items: [native, nine] } as never);
+  vi.mocked(api.remoteClient.status).mockReset().mockResolvedValue({ enrolled: false });
+});
+
+describe("the Company account", () => {
+  it("is listed last only on a machine enrolled with the hub", async () => {
+    vi.mocked(api.remoteClient.status).mockResolvedValue({ enrolled: true });
+    const { result } = renderHook(() => useAiProxies());
+    await waitFor(() => expect(result.current).not.toBeNull());
+    expect(result.current!.map((p) => p.name)).toEqual(["native", "9router", "agenthub.company"]);
+    expect(result.current![2]!.company).toBe(true);
+  });
+
+  it("is absent when not enrolled or when the status call fails (a hub answers 404)", async () => {
+    const off = renderHook(() => useAiProxies());
+    await waitFor(() => expect(off.result.current).not.toBeNull());
+    expect(off.result.current!.map((p) => p.name)).toEqual(["native", "9router"]);
+    vi.mocked(api.remoteClient.status).mockRejectedValue(new Error("404"));
+    const err = renderHook(() => useAiProxies());
+    await waitFor(() => expect(err.result.current).not.toBeNull());
+    expect(err.result.current!.map((p) => p.name)).toEqual(["native", "9router"]);
+  });
+
+  it("is offered for Claude only; a remembered pick on another tool falls back to Native", async () => {
+    const company = {
+      name: "agenthub.company",
+      label: "Company account",
+      builtin: false,
+      company: true,
+    } as AiProxy;
+    render(
+      <ProxyPicker
+        tool="claude"
+        proxies={[native, company]}
+        value="agenthub.company"
+        onChange={() => {}}
+      />
+    );
+    expect(await screen.findByText("Company account")).toBeInTheDocument();
+    const onChange = vi.fn();
+    render(
+      <ProxyPicker
+        tool="codex"
+        proxies={[native, company]}
+        value="agenthub.company"
+        onChange={onChange}
+      />
+    );
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith("native"));
+  });
 });
 
 describe("ProxyPicker", () => {

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

@@ -43,7 +43,10 @@ const nativePasteMock = vi.fn(() => Promise.resolve({ native: true }));
 type Held = { files: { path: string; size: number | null; dir: boolean }[] };
 const clipboardFilesMock = vi.fn((): Promise<Held> => Promise.resolve({ files: [] }));
 const selectedFilesMock = vi.fn((): Promise<Held> => Promise.resolve({ files: [] }));
-vi.mock("../../../lib/api", () => ({
+vi.mock("../../../lib/api", async () => ({
+  // The real one: it reads the token from localStorage, as the page does.
+  withToken: (await vi.importActual<typeof import("../../../lib/api")>("../../../lib/api"))
+    .withToken,
   api: {
     run: {
       dropFile: (f: File, lane?: string) => dropFileMock(f, lane),
@@ -236,6 +239,31 @@ describe("TerminalView", () => {
     }
   });
 
+  it("carries the dashboard token after its size, as /ws does (DASHBOARD_TOKEN)", () => {
+    // The server refuses a /ws-pty upgrade without it: the terminal sat at
+    // "reconnecting" forever while the status bar, on /ws, said Live.
+    localStorage.setItem("dashboard_token", "t ok");
+    const restore = withBox();
+    try {
+      render(<TerminalView runId="agenthub-lane-1" wsBaseUrl="ws://localhost:4820" />);
+      expect(MockWebSocket.instances[0]!.url).toBe(
+        "ws://localhost:4820/ws-pty/agenthub-lane-1?cols=131&rows=28&token=t%20ok"
+      );
+    } finally {
+      restore();
+    }
+  });
+
+  it("carries the token as the only query when it has no size yet", () => {
+    localStorage.setItem("dashboard_token", "tok");
+    termState.cols = 0;
+    termState.rows = 0;
+    render(<TerminalView runId="agenthub-lane-1" wsBaseUrl="ws://localhost:4820" />);
+    expect(MockWebSocket.instances[0]!.url).toBe(
+      "ws://localhost:4820/ws-pty/agenthub-lane-1?token=tok"
+    );
+  });
+
   it("a terminal on a hidden tab sends no size until it is shown", () => {
     // Its box is 0×0 (display:none): fitting there shrank xterm to 12×6 and
     // that size resized the real tmux pane under every other client.

client/src/components/settings/AppearanceSettings.tsx

@@ -60,6 +60,10 @@ export const THEME_LABELS: Record<string, string> = {
   canvas: "Canvas",
   "orca-dark": "Orca Dark",
   "orca-light": "Orca Light",
+  "sunset-cloud": "Sunset Cloud",
+  terminal: "Terminal",
+  "night-sea": "Night Sea",
+  sakura: "Sakura",
 };
 
 const MODES: { mode: ThemeMode; Icon: typeof Moon }[] = [

client/src/components/settings/ArtifactsHubSettings.tsx

@@ -1,8 +1,8 @@
 /**
  * @file ArtifactsHubSettings — Settings → AI tools → Artifacts Hub: the
- * admin's server-wide switch that allows or blocks installing a shared skill
- * or plugin from the Hub into a user's own account (`GET/PUT
- * /api/artifacts/settings`). Renders nothing in local mode (there is no Hub)
+ * admin's server-wide switches: installing a shared skill or plugin from the
+ * Hub into a user's own account, and asking Claude to save a viewable copy of
+ * a Doc / Slides / Design it publishes (`GET/PUT /api/artifacts/settings`). Renders nothing in local mode (there is no Hub)
  * or for anyone the server does not let manage it (`canManage`).
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
@@ -24,17 +24,32 @@ export function ArtifactsHubSettings() {
       .catch(() => setSettings(null));
   }, []);
 
-  if (!settings?.serverMode || !settings.canManage) return null;
+  if (!settings?.canManage) return null;
   return (
     <SettingsSection id="artifacts-hub" title={t("title")}>
+      {settings.serverMode && (
+        <SettingsSwitchRow
+          label={t("installsSwitch")}
+          description={t("installsSwitchHint")}
+          checked={settings.installsEnabled}
+          onChange={async (v) => {
+            try {
+              const r = await api.artifacts.setInstallsEnabled(v);
+              setSettings({ ...settings, installsEnabled: r.installsEnabled });
+            } catch (err) {
+              toast.error(err);
+            }
+          }}
+        />
+      )}
       <SettingsSwitchRow
-        label={t("installsSwitch")}
-        description={t("installsSwitchHint")}
-        checked={settings.installsEnabled}
+        label={t("exportsSwitch")}
+        description={t("exportsSwitchHint")}
+        checked={settings.exportsEnabled !== false}
         onChange={async (v) => {
           try {
-            const r = await api.artifacts.setInstallsEnabled(v);
-            setSettings({ ...settings, installsEnabled: r.installsEnabled });
+            const r = await api.artifacts.setExportsEnabled(v);
+            setSettings({ ...settings, exportsEnabled: r.exportsEnabled });
           } catch (err) {
             toast.error(err);
           }

client/src/components/settings/BackupSettings.tsx

@@ -131,6 +131,8 @@ export function BackupSettings() {
               onChange={(v) => setHour(Number(v))}
               label={t("backup.hour")}
               disabled={!state || owned?.hour}
+              // 24 fixed hours: type-ahead finds one; a search box would only add noise.
+              searchable={false}
               options={HOURS.map((h) => ({ value: String(h), label: `${pad(h)}:00` }))}
             />
           </div>

client/src/components/settings/CompanyHubSettings.tsx

@@ -0,0 +1,273 @@
+/**
+ * @file CompanyHubSettings.tsx
+ * @description Settings → AI tools → Company hub (docs/plans/remote-clients).
+ * On a LOCAL install: enroll this machine with the company hub (hub address +
+ * the user's hub password, which goes to the hub once and is not kept — the
+ * same as `agenthub remote login`), what is and is not sent, the
+ * Company-account sessions sent and when, Send now and Log out
+ * (`/api/remote-client`). On the HUB (server mode, signed in): the user's own
+ * enrolled machines with Revoke, their Company-account sessions, and who
+ * (admin/analyst) opened their sessions (`/api/remote/*`).
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Building2, LogOut, Upload } from "lucide-react";
+import { Link } from "react-router-dom";
+import { api, type RemoteClientStatus } from "../../lib/api";
+import { formatBytes, formatDateTime } from "../../lib/format";
+import { toast } from "../../lib/toast";
+import { confirmDialog } from "../../lib/confirm";
+import { isSubmitEnter } from "../../lib/keys";
+import { usePermissions } from "../AuthGate";
+import { RemoteDevices } from "../remote/RemoteDevices";
+import { SettingsSection } from "./SettingsRow";
+
+export function CompanyHubSettings() {
+  const { local } = usePermissions();
+  return local ? <LocalHub /> : <HubSide />;
+}
+
+function LocalHub() {
+  const { t } = useTranslation("settings");
+  const [st, setSt] = useState<RemoteClientStatus | null>(null);
+  const [hub, setHub] = useState("");
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(() => {
+    api.remoteClient
+      .status()
+      .then(setSt)
+      .catch(() => setSt(null));
+  }, []);
+  useEffect(load, [load]);
+
+  const run = async (fn: () => Promise<void>) => {
+    setBusy(true);
+    setError(null);
+    try {
+      await fn();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+  const enroll = () =>
+    run(async () => {
+      setSt(await api.remoteClient.login({ hub, username, password }));
+      setPassword("");
+      toast.success(t("companyHub.enrolledToast"));
+      load();
+    });
+  const logout = async () => {
+    const ok = await confirmDialog({
+      title: t("companyHub.logoutTitle"),
+      message: t("companyHub.logoutHint"),
+      confirmLabel: t("companyHub.logout"),
+    });
+    if (!ok) return;
+    await run(async () => {
+      await api.remoteClient.logout();
+      load();
+    });
+  };
+  const sendNow = () =>
+    run(async () => {
+      const r = await api.remoteClient.upload();
+      toast.success(
+        t("companyHub.sentToast", { bytes: formatBytes(r.bytes), sessions: r.sessions })
+      );
+      if (r.errors.length) setError(r.errors.map((e) => e.message).join("\n"));
+      load();
+    });
+
+  if (!st) return null;
+  return (
+    <SettingsSection
+      id="company-hub"
+      title={t("companyHub.title")}
+      description={t("companyHub.description")}
+    >
+      <ul className="mb-3 list-disc space-y-0.5 pl-5 text-[11px] text-fg-muted">
+        <li>{t("companyHub.ruleSent")}</li>
+        <li>{t("companyHub.ruleNotSent")}</li>
+        <li>{t("companyHub.ruleKey")}</li>
+        <li>{t("companyHub.ruleOffice")}</li>
+      </ul>
+      {st.enrolled ? (
+        <div className="space-y-3">
+          <div className="flex flex-wrap items-center gap-2 text-xs">
+            <Building2 className="h-4 w-4 text-accent" />
+            <span className="text-fg-primary">
+              {t("companyHub.enrolledAs", { hub: st.hub, user: st.user?.username || "?" })}
+            </span>
+            <span className="text-fg-muted">
+              · {st.device?.name} ·{" "}
+              {t("companyHub.validUntil", { time: formatDateTime(st.device?.expiresAt || "") })}
+            </span>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <button
+              type="button"
+              className="btn-secondary h-8 text-xs"
+              disabled={busy}
+              onClick={() => void sendNow()}
+            >
+              <Upload className="h-3.5 w-3.5" />
+              {t("companyHub.sendNow")}
+            </button>
+            <button
+              type="button"
+              className="btn-ghost h-8 text-xs"
+              disabled={busy}
+              onClick={() => void logout()}
+            >
+              <LogOut className="h-3.5 w-3.5" />
+              {t("companyHub.logout")}
+            </button>
+          </div>
+          <div>
+            <h4 className="mb-1 text-xs font-semibold text-fg-secondary">
+              {t("companyHub.sentTitle")}
+            </h4>
+            {st.uploads && st.uploads.length > 0 ? (
+              <ul
+                className="divide-y divide-border rounded-lg border border-border"
+                data-testid="company-uploads"
+              >
+                {st.uploads.map((u) => (
+                  <li
+                    key={u.sessionId}
+                    className="flex flex-wrap items-center gap-2 px-3 py-1.5 text-[11px]"
+                  >
+                    <Link to={`/sessions/${u.sessionId}`} className="text-accent hover:underline">
+                      {u.title || u.sessionId.slice(0, 8)}
+                    </Link>
+                    <span className="truncate font-mono text-fg-muted">{u.cwd}</span>
+                    <span className="ml-auto text-fg-muted">
+                      {u.lastSentAt
+                        ? t("companyHub.sentLine", {
+                            bytes: formatBytes(u.bytes || 0),
+                            time: formatDateTime(u.lastSentAt),
+                          })
+                        : t("companyHub.notSentYet")}
+                      {u.ended ? ` · ${t("companyHub.ended")}` : ""}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              <p className="text-xs text-fg-muted">{t("companyHub.nothingSent")}</p>
+            )}
+          </div>
+        </div>
+      ) : (
+        <div
+          className="grid max-w-md gap-2"
+          onKeyDown={(e) => {
+            if (isSubmitEnter(e) && hub && username && password) {
+              e.preventDefault();
+              void enroll();
+            }
+          }}
+        >
+          {st.expired && (
+            <p className="text-xs text-status-warning">{t("companyHub.expiredHint")}</p>
+          )}
+          <input
+            className="input text-sm"
+            placeholder="http://10.1.13.7:4820"
+            value={hub}
+            onChange={(e) => setHub(e.target.value)}
+            aria-label={t("companyHub.hubAddress")}
+          />
+          <input
+            className="input text-sm"
+            placeholder={t("companyHub.username")}
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            autoComplete="username"
+            aria-label={t("companyHub.username")}
+          />
+          <input
+            type="password"
+            className="input text-sm"
+            placeholder={t("companyHub.password")}
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            autoComplete="current-password"
+            aria-label={t("companyHub.password")}
+          />
+          <button
+            type="button"
+            className="btn-primary h-8 w-fit text-xs"
+            disabled={busy || !hub || !username || !password}
+            onClick={() => void enroll()}
+          >
+            {t("companyHub.enroll")}
+          </button>
+          <p className="text-[11px] text-fg-muted">{t("companyHub.cliHint")}</p>
+        </div>
+      )}
+      {error && (
+        <p role="alert" className="mt-2 whitespace-pre-line text-xs text-status-danger">
+          {error}
+        </p>
+      )}
+    </SettingsSection>
+  );
+}
+
+function HubSide() {
+  const { t } = useTranslation("settings");
+  const [audit, setAudit] = useState<
+    | {
+        id: number;
+        at: string;
+        sessionId: string;
+        reader: string | null;
+        readerDisplay: string | null;
+      }[]
+    | null
+  >(null);
+  useEffect(() => {
+    api.remoteHub
+      .audit()
+      .then((r) => setAudit(r.entries))
+      .catch(() => setAudit(null));
+  }, []);
+  // A hub without the remote routes (an older server) answers 404: show nothing.
+  if (audit === null) return null;
+  return (
+    <SettingsSection
+      id="company-hub"
+      title={t("companyHub.hubTitle")}
+      description={t("companyHub.hubDescription")}
+    >
+      <RemoteDevices canRevoke />
+      <div className="mt-4">
+        <h4 className="mb-1 text-xs font-semibold text-fg-secondary">{t("companyHub.whoRead")}</h4>
+        {audit.length === 0 ? (
+          <p className="text-xs text-fg-muted">{t("companyHub.nobodyRead")}</p>
+        ) : (
+          <ul className="space-y-0.5 text-[11px]" data-testid="company-audit">
+            {audit.map((a) => (
+              <li key={a.id} className="text-fg-muted">
+                {formatDateTime(a.at)} ·{" "}
+                <span className="text-fg-primary">{a.readerDisplay || a.reader || "?"}</span> ·{" "}
+                <Link to={`/sessions/${a.sessionId}`} className="text-accent hover:underline">
+                  {a.sessionId.slice(0, 8)}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </SettingsSection>
+  );
+}

client/src/components/settings/PoolAccountSettings.tsx

@@ -1,120 +0,0 @@
-/**
- * @file PoolAccountSettings — Settings → AI tools → Pool account: in server
- * mode, every user picks which account of the shared account pool their own
- * new sessions run on, per tool, among the accounts their pool group may use
- * (`GET/PUT /api/me/pool-accounts`, server/lib/account-pins.js `setChoice`).
- * "Automatic" leaves it to the balancer; an admin's pin locks the choice. A
- * Claude login goes into the user's home at once, so running panes follow it;
- * Codex and Cursor take it at the next session. Renders nothing in local mode
- * or when the pool holds no account the user may use.
- * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
- */
-
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Lock } from "lucide-react";
-import { api, type MyPoolTool, type PoolTool } from "../../lib/api";
-import { toast } from "../../lib/toast";
-import { usePermissions } from "../AuthGate";
-import { AiToolIcon } from "../AiToolIcon";
-import { SettingsRow, SettingsSection } from "./SettingsRow";
-
-const LABEL: Record<PoolTool, string> = { claude: "Claude Code", codex: "Codex", cursor: "Cursor" };
-
-export function PoolAccountSettings() {
-  const { t } = useTranslation("settings");
-  const { local } = usePermissions();
-  const [tools, setTools] = useState<MyPoolTool[] | null>(null);
-  const [busy, setBusy] = useState<PoolTool | null>(null);
-
-  useEffect(() => {
-    if (local) return;
-    api.me
-      .poolAccounts()
-      .then((r) => setTools(r.tools))
-      .catch(() => setTools(null));
-  }, [local]);
-
-  if (local || !tools?.length) return null;
-
-  const choose = async (tool: PoolTool, account: string | null) => {
-    setBusy(tool);
-    try {
-      const r = await api.me.choosePoolAccount(tool, account);
-      setTools((list) =>
-        (list ?? []).map((x) => (x.tool === tool ? { ...x, choice: r.choice } : x))
-      );
-      toast.success(
-        !r.choice
-          ? t("poolAccount.automaticSaved")
-          : r.switched === "switched" || r.switched === "kept"
-            ? t("poolAccount.switchedNow", { account: r.choice })
-            : t("poolAccount.nextSession", { account: r.choice })
-      );
-    } catch (err) {
-      toast.error(err);
-    } finally {
-      setBusy(null);
-    }
-  };
-
-  return (
-    <SettingsSection
-      id="pool-account"
-      title={t("poolAccount.title")}
-      description={t("poolAccount.description")}
-    >
-      {tools.map((x) => (
-        <SettingsRow
-          key={x.tool}
-          id={`pool-account-${x.tool}`}
-          label={
-            <span className="inline-flex items-center gap-1.5">
-              <AiToolIcon tool={{ id: x.tool, label: LABEL[x.tool] }} className="h-4 w-4" />
-              {LABEL[x.tool]}
-            </span>
-          }
-          description={
-            x.pin ? (
-              <span className="inline-flex items-center gap-1">
-                <Lock className="h-3 w-3" />
-                {t("poolAccount.pinned", { account: x.pin })}
-              </span>
-            ) : (
-              t("poolAccount.count", { count: x.accounts.length })
-            )
-          }
-          disabled={!!x.pin}
-          control={
-            <select
-              aria-label={t("poolAccount.select", { tool: LABEL[x.tool] })}
-              value={x.pin ?? x.choice ?? ""}
-              disabled={!!x.pin || busy === x.tool}
-              onChange={(e) => void choose(x.tool, e.target.value || null)}
-              className="select !py-1 !text-xs max-w-[16rem]"
-            >
-              {!x.pin && <option value="">{t("poolAccount.automatic")}</option>}
-              {x.accounts.map((a) => (
-                <option key={a.name} value={a.name} disabled={a.expired && a.name !== x.choice}>
-                  {[
-                    a.name,
-                    a.email && a.email !== a.name ? `(${a.email})` : null,
-                    a.expired
-                      ? `— ${t("poolAccount.expired")}`
-                      : a.full
-                        ? `— ${t("poolAccount.full")}`
-                        : a.quotaPercent != null
-                          ? `— ${Math.round(a.quotaPercent)}%`
-                          : null,
-                  ]
-                    .filter(Boolean)
-                    .join(" ")}
-                </option>
-              ))}
-            </select>
-          }
-        />
-      ))}
-    </SettingsSection>
-  );
-}

client/src/components/settings/PoolProfiles.tsx

@@ -0,0 +1,140 @@
+/**
+ * @file PoolProfiles — the shared account pool's accounts as rows of Settings →
+ * AI tools → Profiles (server mode). Each account this user's pool group may
+ * use is one row beside the saved profiles, plus an "Automatic" row; "Switch
+ * to" picks which account the user's OWN new sessions run on
+ * (`PUT /api/me/pool-accounts`, server/lib/account-pins.js `setChoice`).
+ * Automatic leaves it to the balancer; an admin's pin locks every row. A
+ * Claude login goes into the user's home at once, so running panes follow it;
+ * Codex and Cursor take it at the next session.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Lock } from "lucide-react";
+import { api, type MyPoolTool } from "../../lib/api";
+import { toast } from "../../lib/toast";
+
+const rowCls = "rounded-lg border border-border bg-surface-2 px-3 py-2.5";
+const btnCls =
+  "h-7 text-[11px] font-medium px-2.5 rounded-md border border-accent/30 bg-accent/10 hover:bg-accent/20 text-accent inline-flex items-center gap-1.5 disabled:opacity-50";
+
+/** Lower-cased emails of a tool's pool accounts — a saved profile with one is the same account. */
+export function poolEmails(entry: MyPoolTool | null | undefined): Set<string> {
+  return new Set(
+    (entry?.accounts ?? []).map((a) => a.email?.toLowerCase()).filter((e): e is string => !!e)
+  );
+}
+
+export function PoolProfiles({
+  entry,
+  onChange,
+}: {
+  entry: MyPoolTool;
+  onChange: (next: MyPoolTool) => void;
+}) {
+  const { t } = useTranslation("settings");
+  const { t: tc } = useTranslation("ccConfig");
+  const [busy, setBusy] = useState<string | null>(null);
+  const locked = !!entry.pin;
+  /** The account the user's new sessions run on now; null = Automatic. */
+  const current = entry.pin ?? entry.choice;
+
+  const choose = async (account: string | null) => {
+    setBusy(account ?? "");
+    try {
+      const r = await api.me.choosePoolAccount(entry.tool, account);
+      onChange({ ...entry, choice: r.choice });
+      toast.success(
+        !r.choice
+          ? t("poolAccount.automaticSaved")
+          : r.switched === "switched" || r.switched === "kept"
+            ? t("poolAccount.switchedNow", { account: r.choice })
+            : t("poolAccount.nextSession", { account: r.choice })
+      );
+    } catch (err) {
+      toast.error(err);
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const inUse = (
+    <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-status-success/10 border border-status-success/20 text-status-success">
+      {t("poolAccount.inUse")}
+    </span>
+  );
+  const poolBadge = (
+    <span className="text-[10px] px-1.5 py-0.5 rounded-full border border-border bg-surface-3 text-fg-muted">
+      {t("poolAccount.badge")}
+    </span>
+  );
+  const switchBtn = (account: string | null, disabled = false) => (
+    <button
+      type="button"
+      disabled={busy !== null || disabled}
+      onClick={() => void choose(account)}
+      className={btnCls}
+    >
+      {busy === (account ?? "") ? tc("profiles.switching") : tc("profiles.switchButton")}
+    </button>
+  );
+
+  return (
+    <div className="space-y-3" data-testid={`pool-profiles-${entry.tool}`}>
+      {locked && (
+        <p className="text-[11px] text-fg-muted inline-flex items-center gap-1.5">
+          <Lock className="h-3 w-3" />
+          {t("poolAccount.pinned", { account: entry.pin })}
+        </p>
+      )}
+      {!locked && (
+        <div className={rowCls} data-testid={`pool-row-${entry.tool}-automatic`}>
+          <div className="flex items-center gap-2 flex-wrap">
+            <span className="text-xs font-medium text-fg-primary">
+              {t("poolAccount.automatic")}
+            </span>
+            {poolBadge}
+            {current === null && inUse}
+            <span className="text-xs text-fg-secondary truncate flex-1 min-w-0">
+              {t("poolAccount.automaticHint")}
+            </span>
+            {current !== null && switchBtn(null)}
+          </div>
+        </div>
+      )}
+      {entry.accounts.map((a) => {
+        const status = a.expired
+          ? t("poolAccount.expired")
+          : a.full
+            ? t("poolAccount.full")
+            : a.quotaPercent != null
+              ? t("poolAccount.quota", { pct: Math.round(a.quotaPercent) })
+              : null;
+        return (
+          <div key={a.name} className={rowCls} data-testid={`pool-row-${entry.tool}-${a.name}`}>
+            <div className="flex items-center gap-2 flex-wrap">
+              <span className="text-xs font-medium text-fg-primary">{a.name}</span>
+              {poolBadge}
+              {current === a.name && inUse}
+              <span className="text-xs text-fg-secondary truncate flex-1 min-w-0">
+                {a.email && a.email !== a.name ? a.email : ""}
+              </span>
+              {!locked && current !== a.name && switchBtn(a.name, a.expired)}
+            </div>
+            {status && (
+              <div
+                className={`text-[10px] mt-0.5 ${
+                  a.expired || a.full ? "text-status-danger" : "text-fg-muted"
+                }`}
+              >
+                {status}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

client/src/components/settings/ReportSettings.tsx

@@ -222,6 +222,8 @@ export function ReportSettings() {
                 value={String(form.value.hour)}
                 onChange={(v) => set({ hour: Number(v) })}
                 label={t("reports.hour")}
+                // 24 fixed hours: type-ahead finds one; a search box would only add noise.
+                searchable={false}
                 options={HOURS.map((h) => ({ value: String(h), label: `${pad(h)}:00` }))}
               />
             </div>

client/src/components/settings/ToolProfilesSettings.tsx

@@ -4,14 +4,20 @@
  * (`/api/cc-config/profiles`, with its quota check and token-owner mismatch
  * warning — this panel used to be a modal on the Claude Code page); Codex and
  * Oh My Pi are `/api/tool-profiles`; a tool that cannot be switched
- * (Antigravity: an OS-keyring login) says why. In server mode the panel links
- * each Claude/Codex profile to the account pool in Administration → Users,
- * where an admin moves it in (`?poolAdd=<tool>&poolProfile=<name>` opens the
- * pool's Add dialog on it), and shows how many accounts the pool holds.
+ * (Antigravity: an OS-keyring login) says why. In server mode the shared
+ * account pool's accounts this user may use (`GET /api/me/pool-accounts`) are
+ * rows of the same list (PoolProfiles: "Switch to" picks the account the
+ * user's own new sessions run on, plus an Automatic row) — there is no
+ * separate Pool account section any more. A saved profile holding the same
+ * account (email) as a pool row is folded into that row. Staff also see the
+ * host's saved logins and how many accounts the whole pool holds; an admin can
+ * move a profile into the pool in Administration → Users
+ * (`?poolAdd=<tool>&poolProfile=<name>` opens the pool's Add dialog on it). A
+ * developer sees only the pool rows of the tools they may use.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState, type MouseEvent, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import {
@@ -33,11 +39,19 @@ import {
   type CcProfile,
   type CcProfileUsage,
   type CcUsageWindow,
+  type MyPoolTool,
   type ToolProfile,
   type ToolProfileIdentity,
   type ToolProfilesTool,
 } from "../../lib/api";
 import { toast } from "../../lib/toast";
+import {
+  profileKey,
+  readHiddenProfiles,
+  standIn,
+  toggleHidden,
+  writeHiddenProfiles,
+} from "../../lib/hiddenProfilesStorage";
 import { confirmDialog } from "../../lib/confirm";
 import { copyText } from "../../lib/clipboard";
 import { useAiTools } from "../../hooks/useAiTools";
@@ -46,11 +60,14 @@ import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../Context
 import { SkeletonRows } from "../config/configPrimitives";
 import { AiToolIcon } from "../AiToolIcon";
 import { SettingsSection } from "./SettingsRow";
+import { PoolProfiles, poolEmails } from "./PoolProfiles";
 
-/** The tools the panel covers, in tab order, with the command that signs one in. */
-const TOOLS: { id: string; label: string; login: string }[] = [
+/** The tools the panel covers, in tab order, with the command that signs one in.
+ *  `poolOnly`: no saved logins of its own — a tab only while the pool has one. */
+const TOOLS: { id: string; label: string; login: string; poolOnly?: boolean }[] = [
   { id: "claude", label: "Claude Code", login: "claude auth login" },
   { id: "codex", label: "Codex", login: "codex login" },
+  { id: "cursor", label: "Cursor", login: "", poolOnly: true },
   { id: "omp", label: "Oh My Pi", login: "omp  (then /login)" },
   { id: "antigravity", label: "Antigravity", login: "agy" },
 ];
@@ -65,15 +82,21 @@ export function ToolProfilesSettings() {
   const { t } = useTranslation("settings");
   const aiTools = useAiTools();
   const { local, seesAll } = usePermissions();
+  const [tab, setTab] = useState<string>("claude");
+  const [others, setOthers] = useState<ToolProfilesTool[] | null>(null);
+  const [pool, setPool] = useState<AccountPool | null>(null);
+  /** Server mode: the pool accounts THIS user may use, per tool. */
+  const [mine, setMine] = useState<MyPoolTool[] | null>(null);
+  const mineOf = (tool: string) => mine?.find((x) => x.tool === tool) ?? null;
   const shown = TOOLS.filter((x) => {
+    if (mineOf(x.id)) return true;
+    // The host's own logins are a staff-only read (a developer would get 403s).
+    if (!seesAll || x.poolOnly) return false;
     const tool = aiTools.byId(x.id);
     if (x.id === "claude") return tool?.enabled !== false;
     return !!tool && tool.installed && tool.enabled !== false;
   });
-  const [tab, setTab] = useState<string>("claude");
   const current = shown.find((x) => x.id === tab) ?? shown[0];
-  const [others, setOthers] = useState<ToolProfilesTool[] | null>(null);
-  const [pool, setPool] = useState<AccountPool | null>(null);
 
   const loadOthers = useCallback(
     () =>
@@ -84,9 +107,9 @@ export function ToolProfilesSettings() {
     []
   );
   useEffect(() => {
-    void loadOthers();
-  }, [loadOthers]);
-  // The pool is a server-mode, staff-only read.
+    if (seesAll) void loadOthers();
+  }, [loadOthers, seesAll]);
+  // The whole pool is a server-mode, staff-only read.
   useEffect(() => {
     if (local || !seesAll) return;
     api.accountPool
@@ -94,10 +117,23 @@ export function ToolProfilesSettings() {
       .then(setPool)
       .catch(() => setPool(null));
   }, [local, seesAll]);
+  // The accounts this user may run on: server mode, every role.
+  useEffect(() => {
+    if (local) return;
+    api.me
+      .poolAccounts()
+      .then((r) => setMine(r.tools))
+      .catch(() => setMine([]));
+  }, [local]);
 
   if (!current) return null;
   const poolCount = (tool: string) =>
     pool ? (tool === "codex" ? pool.codex.length : pool.accounts.length) : null;
+  const entry = mineOf(current.id);
+  const setEntry = (next: MyPoolTool) =>
+    setMine((list) => (list ?? []).map((x) => (x.tool === next.tool ? next : x)));
+  const poolRows = entry ? <PoolProfiles entry={entry} onChange={setEntry} /> : null;
+  const merged = poolEmails(entry);
 
   return (
     <SettingsSection
@@ -125,11 +161,18 @@ export function ToolProfilesSettings() {
         ))}
       </div>
       <div role="tabpanel" className="mt-3 space-y-3">
-        {POOL_TOOLS.has(current.id) && poolCount(current.id) !== null && (
+        {seesAll && POOL_TOOLS.has(current.id) && poolCount(current.id) !== null && (
           <PoolLine count={poolCount(current.id)!} />
         )}
-        {current.id === "claude" ? (
-          <ClaudeProfiles pooled={!local && POOL_TOOLS.has("claude")} />
+        {!seesAll || current.poolOnly ? (
+          poolRows
+        ) : current.id === "claude" ? (
+          <ClaudeProfiles
+            pooled={!local && POOL_TOOLS.has("claude")}
+            local={local}
+            merged={merged}
+            poolRows={poolRows}
+          />
         ) : (
           <OtherProfiles
             key={current.id}
@@ -139,6 +182,8 @@ export function ToolProfilesSettings() {
             state={others?.find((o) => o.tool === current.id) ?? null}
             loading={others === null}
             pooled={!local && POOL_TOOLS.has(current.id)}
+            merged={merged}
+            poolRows={poolRows}
             onChanged={loadOthers}
           />
         )}
@@ -288,6 +333,8 @@ function OtherProfiles({
   state,
   loading,
   pooled,
+  merged,
+  poolRows,
   onChanged,
 }: {
   tool: string;
@@ -296,6 +343,10 @@ function OtherProfiles({
   state: ToolProfilesTool | null;
   loading: boolean;
   pooled: boolean;
+  /** Emails of the pool rows: a saved login of one is shown as that row. */
+  merged: Set<string>;
+  /** The pool accounts this user may use, as rows of this list. */
+  poolRows: ReactNode;
   onChanged: () => Promise<unknown>;
 }) {
   const { t } = useTranslation("settings");
@@ -313,8 +364,8 @@ function OtherProfiles({
       </p>
     );
   }
-  const items = state.items;
-  const activeSaved = items.some((p) => p.active);
+  const activeSaved = state.items.some((p) => p.active);
+  const items = state.items.filter((p) => !p.email || !merged.has(p.email.toLowerCase()));
   const remove = async (p: ToolProfile) => {
     const ok = await confirmDialog({
       title: tc("profiles.deleteConfirmTitle", { name: p.label }),
@@ -369,7 +420,7 @@ function OtherProfiles({
           </div>
         )}
       </div>
-      {items.length === 0 && (
+      {items.length === 0 && !poolRows && (
         <div className="rounded-lg border border-dashed border-border bg-surface-2 px-4 py-6 text-center text-sm text-fg-muted">
           {tc("profiles.empty")}
         </div>
@@ -438,6 +489,7 @@ function OtherProfiles({
           )}
         </div>
       ))}
+      {poolRows}
       <LoginHint text={t("toolProfiles.loginHint", { tool: label })} command={login} />
     </div>
   );
@@ -475,7 +527,19 @@ function ActiveBadge() {
 // save button only appears while the live account is unsaved, because one
 // account is one profile.
 
-function ClaudeProfiles({ pooled }: { pooled: boolean }) {
+function ClaudeProfiles({
+  pooled,
+  local,
+  merged,
+  poolRows,
+}: {
+  pooled: boolean;
+  local: boolean;
+  /** Emails of the pool rows: a saved profile of one is shown as that row. */
+  merged: Set<string>;
+  /** The pool accounts this user may use, as rows of this list. */
+  poolRows: ReactNode;
+}) {
   const { t } = useTranslation("ccConfig");
   const [items, setItems] = useState<CcProfile[] | null>(null);
   const [active, setActive] = useState<CcAccountIdentity | null>(null);
@@ -492,6 +556,51 @@ function ClaudeProfiles({ pooled }: { pooled: boolean }) {
   /** Names already auto-fetched, so the effect below fires once per profile. */
   const autoFetched = useRef<Set<string>>(new Set());
   const ctx = useContextMenu<CcProfile>();
+  /** Local mode only: profiles this browser leaves out (Alt+Shift+click a row);
+   *  Alt+Shift+H shows them, dimmed, until pressed again. */
+  const [hidden, setHidden] = useState<string[]>(() => (local ? readHiddenProfiles() : []));
+  const [reveal, setReveal] = useState(false);
+  useEffect(() => {
+    if (!local) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.altKey && e.shiftKey && e.code === "KeyH") {
+        e.preventDefault();
+        setReveal((r) => !r);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [local]);
+  const isHidden = useCallback(
+    (p: { accountUuid: string | null; name?: string }) => local && hidden.includes(profileKey(p)),
+    [local, hidden]
+  );
+  const toggleRow = (e: MouseEvent, p: CcProfile) => {
+    if (!local || !e.altKey || !e.shiftKey) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const next = toggleHidden(hidden, profileKey(p));
+    setHidden(next);
+    writeHiddenProfiles(next);
+  };
+  const activeHidden = !!active && !reveal && isHidden(active);
+  /** Shown as the live login while the real one is hidden: the first visible
+   *  profile, with its own usage — a "—" there would only draw the eye. */
+  const decoy =
+    activeHidden && items
+      ? standIn(
+          items.map((p) => ({ ...p, accountUuid: p.accountUuid ?? null })),
+          (p) => p.active || (!!active?.accountUuid && p.accountUuid === active.accountUuid),
+          hidden
+        )
+      : null;
+  const shownActive = (p: CcProfile) => (decoy ? p.name === decoy.name : p.active);
+  /** Listed as its own row: not hidden by this browser, and not a pool account
+   *  (that one is the pool's row — one account, one row). */
+  const listed = useCallback(
+    (p: CcProfile) => (reveal || !isHidden(p)) && !(p.email && merged.has(p.email.toLowerCase())),
+    [reveal, isHidden, merged]
+  );
 
   const load = useCallback(async () => {
     try {
@@ -540,10 +649,11 @@ function ClaudeProfiles({ pooled }: { pooled: boolean }) {
     if (!items) return;
     for (const p of items) {
       if (autoFetched.current.has(p.name)) continue;
+      if (!listed(p)) continue;
       autoFetched.current.add(p.name);
       void checkUsage(p.name);
     }
-  }, [items, checkUsage]);
+  }, [items, checkUsage, listed]);
 
   const activeSaved = items?.some((p) => p.active) ?? false;
   /** How many saved profiles hold the same account as `p`. */
@@ -587,7 +697,9 @@ function ClaudeProfiles({ pooled }: { pooled: boolean }) {
           <span>
             {t("profiles.mismatch", {
               config: mismatchEmail,
-              owner: active?.email || active?.accountUuid || "?",
+              owner: activeHidden
+                ? decoy?.email || "?"
+                : active?.email || active?.accountUuid || "?",
             })}
           </span>
         </p>
@@ -603,7 +715,18 @@ function ClaudeProfiles({ pooled }: { pooled: boolean }) {
         <div className="text-[10px] uppercase tracking-wide text-fg-muted">
           {t("profiles.activeLabel")}
         </div>
-        {active ? (
+        {active && activeHidden ? (
+          decoy ? (
+            <>
+              <div className="text-sm text-fg-primary">
+                {decoy.email || decoy.displayName || decoy.accountUuid}
+              </div>
+              <IdentityLine identity={decoy} />
+            </>
+          ) : (
+            <div className="text-sm text-fg-muted">{t("profiles.noActive")}</div>
+          )
+        ) : active ? (
           <>
             <div className="text-sm text-fg-primary">
               {active.email || active.displayName || active.accountUuid}
@@ -613,7 +736,7 @@ function ClaudeProfiles({ pooled }: { pooled: boolean }) {
         ) : (
           <div className="text-sm text-fg-muted">{t("profiles.noActive")}</div>
         )}
-        {active && !activeSaved && (
+        {active && !activeSaved && !activeHidden && (
           <div className="pt-1.5 space-y-1.5">
             <div className="text-[11px] text-status-warning">{t("profiles.unsavedActive")}</div>
             <button
@@ -631,17 +754,18 @@ function ClaudeProfiles({ pooled }: { pooled: boolean }) {
       </div>
 
       {items === null && !error && <SkeletonRows n={3} />}
-      {items !== null && items.length === 0 && (
+      {items !== null && items.filter(listed).length === 0 && !poolRows && (
         <div className="rounded-lg border border-dashed border-border bg-surface-2 px-4 py-8 text-center text-sm text-fg-muted">
           {t("profiles.empty")}
         </div>
       )}
-      {items?.map((p) => (
+      {items?.filter(listed).map((p) => (
         <div
           key={p.name}
           data-testid={`profile-row-${p.name}`}
           onContextMenu={(e) => ctx.open(e, p)}
-          className={rowCls}
+          onClickCapture={(e) => toggleRow(e, p)}
+          className={`${rowCls}${isHidden(p) ? " opacity-50" : ""}`}
         >
           <div className="flex items-center gap-2 flex-wrap">
             <LabelEdit
@@ -657,11 +781,11 @@ function ClaudeProfiles({ pooled }: { pooled: boolean }) {
                 )
               }
             />
-            {p.active && <ActiveBadge />}
+            {shownActive(p) && <ActiveBadge />}
             <span className="text-xs text-fg-secondary truncate flex-1 min-w-0">
               {p.email || p.displayName || p.accountUuid}
             </span>
-            {!p.active && (
+            {!shownActive(p) && (
               <button disabled={busy !== null} onClick={() => switchTo(p)} className={btnCls}>
                 {busy === `switch:${p.name}` ? t("profiles.switching") : t("profiles.switchButton")}
               </button>
@@ -696,10 +820,12 @@ function ClaudeProfiles({ pooled }: { pooled: boolean }) {
         </div>
       ))}
 
+      {poolRows}
+
       {ctx.menu && (
         <ContextMenu x={ctx.menu.x} y={ctx.menu.y} onClose={ctx.close} testId="profile-menu">
           <MenuItem onSelect={pick((p) => setRenaming(p.name))}>{t("profiles.rename")}</MenuItem>
-          {!ctx.menu.item.active && (
+          {!shownActive(ctx.menu.item) && !ctx.menu.item.active && (
             <MenuItem disabled={busy !== null} onSelect={pick(switchTo)}>
               {t("profiles.switchButton")}
             </MenuItem>

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

@@ -53,6 +53,10 @@ describe("AppearanceSettings", () => {
       "Apple Light",
       "Canvas",
       "Orca Light",
+      "Sunset Cloud",
+      "Terminal",
+      "Night Sea",
+      "Sakura",
     ]) {
       expect(screen.getByText(name)).toBeInTheDocument();
     }

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

@@ -12,7 +12,9 @@ import { ArtifactsHubSettings } from "../ArtifactsHubSettings";
 import { api } from "../../../lib/api";
 
 vi.mock("../../../lib/api", () => ({
-  api: { artifacts: { settings: vi.fn(), setInstallsEnabled: vi.fn() } },
+  api: {
+    artifacts: { settings: vi.fn(), setInstallsEnabled: vi.fn(), setExportsEnabled: vi.fn() },
+  },
 }));
 
 const settings = vi.mocked(api.artifacts.settings);
@@ -32,15 +34,23 @@ describe("ArtifactsHubSettings", () => {
     await waitFor(() => expect(sw).toHaveAttribute("aria-checked", "false"));
   });
 
-  it("renders nothing for a non-manager or in local mode", async () => {
+  it("renders nothing for a non-manager, and only the copy switch in local mode", async () => {
     settings.mockResolvedValue({ ...base, canManage: false });
     const { container, unmount } = render(<ArtifactsHubSettings />);
     await waitFor(() => expect(settings).toHaveBeenCalled());
     expect(container).toBeEmptyDOMElement();
     unmount();
-    settings.mockResolvedValue({ ...base, serverMode: false });
-    const r = render(<ArtifactsHubSettings />);
-    await waitFor(() => expect(settings).toHaveBeenCalledTimes(2));
-    expect(r.container).toBeEmptyDOMElement();
+    settings.mockResolvedValue({ ...base, serverMode: false, exportsEnabled: true });
+    vi.mocked(api.artifacts.setExportsEnabled).mockResolvedValue({
+      installsEnabled: true,
+      exportsEnabled: false,
+    });
+    render(<ArtifactsHubSettings />);
+    const sw = await screen.findByRole("switch", {
+      name: "Keep a viewable copy of Docs and Slides",
+    });
+    expect(screen.queryByRole("switch", { name: "Allow installing from the Hub" })).toBeNull();
+    fireEvent.click(sw);
+    await waitFor(() => expect(api.artifacts.setExportsEnabled).toHaveBeenCalledWith(false));
   });
 });

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

@@ -0,0 +1,144 @@
+/**
+ * @file CompanyHubSettings.test.tsx
+ * @description Settings → Company hub. Local: the enroll form sends the hub
+ * address, username and password once and clears the password; enrolled, it
+ * lists what was sent and never shows a token; Log out asks first. Hub
+ * (server mode): the user's own machines with Revoke (their password again)
+ * and who opened their sessions.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { act, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import "../../../i18n";
+import { settleConfirm } from "../../../lib/confirm";
+import { CompanyHubSettings } from "../CompanyHubSettings";
+import { api } from "../../../lib/api";
+
+const perms = vi.hoisted(() => ({ local: true, isAdmin: true, seesAll: true }));
+vi.mock("../../AuthGate", () => ({ usePermissions: () => perms }));
+vi.mock("../../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>();
+  return {
+    ...actual,
+    api: {
+      remoteClient: { status: vi.fn(), login: vi.fn(), logout: vi.fn(), upload: vi.fn() },
+      remoteHub: { devices: vi.fn(), sessions: vi.fn(), revoke: vi.fn(), audit: vi.fn() },
+    },
+  };
+});
+
+const enrolled = {
+  enrolled: true,
+  hub: "http://10.1.13.7:4820",
+  user: { id: 3, username: "mia", role: "developer" },
+  device: { id: 7, name: "mia-pc", expiresAt: "2027-02-01T00:00:00.000Z" },
+  uploads: [
+    {
+      sessionId: "11111111-2222-3333-4444-555555555555",
+      bytes: 2048,
+      lastSentAt: "2026-11-04T02:00:00.000Z",
+      ended: 0,
+      title: "fix the cart",
+      cwd: "/home/mia/shop",
+      startedAt: null,
+    },
+  ],
+};
+
+const show = async () => {
+  render(
+    <MemoryRouter>
+      <CompanyHubSettings />
+    </MemoryRouter>
+  );
+  await act(async () => {
+    await new Promise((r) => setTimeout(r, 0));
+  });
+};
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  perms.local = true;
+});
+
+describe("CompanyHubSettings — local", () => {
+  it("enrolls with the hub address, username and password, then clears the password", async () => {
+    vi.mocked(api.remoteClient.status)
+      .mockResolvedValueOnce({ enrolled: false })
+      .mockResolvedValue(enrolled);
+    vi.mocked(api.remoteClient.login).mockResolvedValue(enrolled);
+    const user = userEvent.setup();
+    await show();
+    await user.type(screen.getByLabelText(/hub address|địa chỉ hub/i), "http://10.1.13.7:4820");
+    await user.type(screen.getByLabelText(/hub username|tên đăng nhập hub/i), "mia");
+    const pw = screen.getByLabelText(/^(hub password|mật khẩu hub)$/i);
+    await user.type(pw, "secret-1");
+    await user.click(screen.getByRole("button", { name: /enroll this machine|đăng ký máy này/i }));
+    expect(api.remoteClient.login).toHaveBeenCalledWith({
+      hub: "http://10.1.13.7:4820",
+      username: "mia",
+      password: "secret-1",
+    });
+    await waitFor(() => expect(screen.getByTestId("company-uploads")).toBeInTheDocument());
+    expect(pw).not.toBeInTheDocument();
+  });
+
+  it("lists what was sent and logs out only after confirming", async () => {
+    vi.mocked(api.remoteClient.status).mockResolvedValue(enrolled);
+    vi.mocked(api.remoteClient.logout).mockResolvedValue({ ok: true, wasEnrolled: true });
+    const user = userEvent.setup();
+    await show();
+    expect(screen.getByText("fix the cart")).toBeInTheDocument();
+    expect(document.body.textContent).not.toMatch(/ahdev_/);
+    await user.click(screen.getByRole("button", { name: /log out|đăng xuất/i }));
+    expect(api.remoteClient.logout).not.toHaveBeenCalled();
+    await act(async () => settleConfirm(true));
+    await waitFor(() => expect(api.remoteClient.logout).toHaveBeenCalled());
+  });
+});
+
+describe("CompanyHubSettings — hub", () => {
+  it("shows the user's machines, revokes with their password, and who read their sessions", async () => {
+    perms.local = false;
+    vi.mocked(api.remoteHub.audit).mockResolvedValue({
+      entries: [
+        {
+          id: 1,
+          at: "2026-11-04T03:00:00.000Z",
+          sessionId: "abcdef12-0000",
+          reader: "boss",
+          readerDisplay: "Boss",
+        },
+      ],
+    });
+    vi.mocked(api.remoteHub.devices).mockResolvedValue({
+      devices: [
+        {
+          id: 7,
+          userId: 3,
+          name: "mia-pc",
+          createdAt: "2026-11-01T00:00:00.000Z",
+          expiresAt: "2027-02-01T00:00:00.000Z",
+          lastSeenAt: null,
+          lastIp: null,
+          revokedAt: null,
+          active: true,
+        },
+      ],
+    });
+    vi.mocked(api.remoteHub.sessions).mockResolvedValue({ sessions: [] });
+    vi.mocked(api.remoteHub.revoke).mockResolvedValue({ ok: true } as never);
+    const user = userEvent.setup();
+    await show();
+    await waitFor(() => expect(screen.getByText("mia-pc")).toBeInTheDocument());
+    expect(screen.getByTestId("company-audit")).toHaveTextContent("Boss");
+    await user.click(screen.getByRole("button", { name: /^(revoke|thu hồi)$/i }));
+    await user.type(screen.getByLabelText(/your password|mật khẩu của bạn/i), "my-pass-1");
+    const buttons = screen.getAllByRole("button", { name: /^(revoke|thu hồi)$/i });
+    await user.click(buttons[buttons.length - 1]!);
+    await waitFor(() => expect(api.remoteHub.revoke).toHaveBeenCalledWith(7, "my-pass-1"));
+  });
+});

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

@@ -1,85 +0,0 @@
-/**
- * @file Tests for PoolAccountSettings — Settings → AI tools → Pool account:
- * hidden in local mode and with no usable account; one select per tool that
- * starts on the user's choice (or Automatic) and saves a pick through
- * `PUT /api/me/pool-accounts`; locked when an admin pinned the user.
- * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
- */
-
-import { describe, it, expect, vi, beforeEach } from "vitest";
-import { render, screen, act } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import "../../../i18n";
-import { PoolAccountSettings } from "../PoolAccountSettings";
-
-const perms = vi.hoisted(() => ({ local: false }));
-vi.mock("../../AuthGate", () => ({ usePermissions: () => perms }));
-
-const m = vi.hoisted(() => ({ poolAccounts: vi.fn(), choosePoolAccount: vi.fn() }));
-vi.mock("../../../lib/api", () => ({
-  api: { me: m, aiTools: { iconUrl: (id: string) => `/icons/${id}.png` } },
-}));
-
-const account = (name: string) => ({
-  name,
-  kind: "login",
-  email: `${name}@x.io`,
-  expired: false,
-  quotaPercent: 20,
-  full: false,
-});
-
-async function show() {
-  render(<PoolAccountSettings />);
-  await act(async () => {
-    await new Promise((res) => setTimeout(res, 0));
-  });
-}
-
-beforeEach(() => {
-  perms.local = false;
-  m.poolAccounts.mockReset();
-  m.choosePoolAccount.mockReset();
-});
-
-describe("PoolAccountSettings", () => {
-  it("renders nothing in local mode or with no account to choose", async () => {
-    perms.local = true;
-    await show();
-    expect(m.poolAccounts).not.toHaveBeenCalled();
-    expect(screen.queryByRole("combobox")).toBeNull();
-    perms.local = false;
-    m.poolAccounts.mockResolvedValue({ tools: [] });
-    await show();
-    expect(screen.queryByRole("combobox")).toBeNull();
-  });
-
-  it("starts on the user's choice and saves a new pick", async () => {
-    m.poolAccounts.mockResolvedValue({
-      tools: [
-        { tool: "claude", pin: null, choice: "two", accounts: [account("one"), account("two")] },
-      ],
-    });
-    m.choosePoolAccount.mockResolvedValue({ tool: "claude", choice: "one", switched: "switched" });
-    await show();
-    const select = screen.getByRole("combobox") as HTMLSelectElement;
-    expect(select.value).toBe("two");
-    await userEvent.selectOptions(select, "one");
-    expect(m.choosePoolAccount).toHaveBeenCalledWith("claude", "one");
-    await userEvent.selectOptions(select, "");
-    expect(m.choosePoolAccount).toHaveBeenLastCalledWith("claude", null);
-  });
-
-  it("is locked on an admin's pin", async () => {
-    m.poolAccounts.mockResolvedValue({
-      tools: [
-        { tool: "codex", pin: "one", choice: null, accounts: [account("one"), account("two")] },
-      ],
-    });
-    await show();
-    const select = screen.getByRole("combobox") as HTMLSelectElement;
-    expect(select.disabled).toBe(true);
-    expect(select.value).toBe("one");
-    expect(screen.getByText(/one/, { selector: "span" })).toBeTruthy();
-  });
-});

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

@@ -4,12 +4,16 @@
  * failing account costs the others nothing), and its right-click delete asks
  * first and never offers to delete the only copy of the live account; Codex's
  * tab switches through /api/tool-profiles; Antigravity says why it cannot be
- * switched; and in server mode a profile links into the account pool.
+ * switched; and in server mode a profile links into the account pool, while
+ * the pool accounts the user may use are rows of the same list — "Switch to"
+ * picks one through `PUT /api/me/pool-accounts`, an Automatic row goes back to
+ * the balancer, an admin's pin locks them, a saved profile of the same email
+ * is folded into the pool row, and a developer sees only the pool rows.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
 import { describe, it, expect, vi, beforeEach } from "vitest";
-import { render, screen, act } from "@testing-library/react";
+import { render, screen, act, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { MemoryRouter } from "react-router-dom";
 import "../../../i18n";
@@ -38,6 +42,7 @@ const m = vi.hoisted(() => {
     },
     tp: { list: vi.fn(), activate: vi.fn(), save: vi.fn(), rename: vi.fn(), remove: vi.fn() },
     pool: { list: vi.fn() },
+    me: { poolAccounts: vi.fn(), choosePoolAccount: vi.fn() },
   };
 });
 vi.mock("../../../lib/api", () => ({
@@ -45,6 +50,7 @@ vi.mock("../../../lib/api", () => ({
     ccConfig: m.cc,
     toolProfiles: m.tp,
     accountPool: m.pool,
+    me: m.me,
     aiTools: { iconUrl: (id: string) => `/icons/${id}.png` },
   },
 }));
@@ -68,7 +74,9 @@ async function show() {
 
 beforeEach(() => {
   vi.clearAllMocks();
+  localStorage.clear();
   perms.local = true;
+  perms.seesAll = true;
   m.cc.profiles.mockResolvedValue({
     items: [
       { name: "work", label: "Work", active: true, accountUuid: "u1", email: "a@b.c" },
@@ -105,6 +113,7 @@ beforeEach(() => {
   });
   m.tp.activate.mockResolvedValue({ ok: true, name: "b", savedOutgoing: "a" });
   m.pool.list.mockResolvedValue({ accounts: [{ name: "p1" }], codex: [], blockPercent: 90 });
+  m.me.poolAccounts.mockResolvedValue({ tools: [] });
 });
 
 describe("ToolProfilesSettings — Claude", () => {
@@ -137,6 +146,47 @@ describe("ToolProfilesSettings — Claude", () => {
     expect(screen.getByTestId("profile-menu")).toBeInTheDocument();
     expect(screen.queryByTestId("profile-menu-delete")).toBeNull();
   });
+  it("leaves a profile this browser hid out of the list and asks nothing about it", async () => {
+    localStorage.setItem("agenthub.cc.hiddenProfiles", JSON.stringify(["u2"]));
+    await show();
+    await settle();
+    expect(screen.queryByTestId("profile-row-spare")).toBeNull();
+    expect(screen.queryByText("d@e.f")).toBeNull();
+    expect(m.cc.profileUsage).not.toHaveBeenCalledWith("spare");
+    expect(screen.getByTestId("profile-row-work")).toBeInTheDocument();
+  });
+
+  it("hides a row on Alt+Shift+click and shows it again with Alt+Shift+H", async () => {
+    const user = userEvent.setup();
+    await show();
+    await user.keyboard("{Alt>}{Shift>}");
+    await user.click(screen.getByTestId("profile-row-spare"));
+    await user.keyboard("{/Shift}{/Alt}");
+    expect(screen.queryByTestId("profile-row-spare")).toBeNull();
+    expect(JSON.parse(localStorage.getItem("agenthub.cc.hiddenProfiles")!)).toEqual(["u2"]);
+    await user.keyboard("{Alt>}{Shift>}H{/Shift}{/Alt}");
+    expect(screen.getByTestId("profile-row-spare")).toBeInTheDocument();
+  });
+
+  it("shows the first visible profile as the live login while the live one is hidden", async () => {
+    localStorage.setItem("agenthub.cc.hiddenProfiles", JSON.stringify(["u1"]));
+    await show();
+    await settle();
+    expect(screen.queryByTestId("profile-row-work")).toBeNull();
+    expect(screen.queryByText("a@b.c")).toBeNull();
+    expect(screen.queryByText("—")).toBeNull();
+    const spare = screen.getByTestId("profile-row-spare");
+    expect(spare).toHaveTextContent(/active/);
+    expect(screen.queryByRole("button", { name: "Switch to" })).toBeNull();
+    expect(screen.getAllByText("d@e.f").length).toBe(2);
+  });
+
+  it("does not hide anything in server mode", async () => {
+    perms.local = false;
+    localStorage.setItem("agenthub.cc.hiddenProfiles", JSON.stringify(["u2"]));
+    await show();
+    expect(screen.getByTestId("profile-row-spare")).toBeInTheDocument();
+  });
 });
 
 describe("ToolProfilesSettings — other tools", () => {
@@ -176,3 +226,96 @@ describe("ToolProfilesSettings — account pool", () => {
     expect(link?.getAttribute("href")).toBe("/admin?poolAdd=claude&poolProfile=work#account-pool");
   });
 });
+
+const poolAccount = (name: string, email: string | null = `${name}@x.io`) => ({
+  name,
+  kind: "login",
+  email,
+  expired: false,
+  quotaPercent: 20,
+  full: false,
+});
+
+describe("ToolProfilesSettings — pool accounts as profiles", () => {
+  beforeEach(() => {
+    perms.local = false;
+    m.me.poolAccounts.mockResolvedValue({
+      tools: [
+        {
+          tool: "claude",
+          pin: null,
+          choice: "two",
+          accounts: [poolAccount("one", "d@e.f"), poolAccount("two")],
+        },
+      ],
+    });
+    m.me.choosePoolAccount.mockImplementation(async (tool: string, account: string | null) => ({
+      tool,
+      choice: account,
+      switched: account ? "switched" : null,
+    }));
+  });
+
+  it("lists the pool accounts beside the saved profiles, one row per account", async () => {
+    await show();
+    expect(screen.getByTestId("pool-row-claude-one")).toHaveTextContent("Quota 20%");
+    expect(screen.getByTestId("pool-row-claude-two")).toHaveTextContent("in use");
+    expect(screen.getByTestId("profile-row-work")).toBeInTheDocument();
+    // "spare" is d@e.f — the pool's "one": shown once, as the pool row.
+    expect(screen.queryByTestId("profile-row-spare")).toBeNull();
+    expect(m.cc.profileUsage).not.toHaveBeenCalledWith("spare");
+  });
+
+  it("switches the user's own sessions to a pool account, and back to automatic", async () => {
+    const user = userEvent.setup();
+    await show();
+    const one = screen.getByTestId("pool-row-claude-one");
+    await user.click(within(one).getByRole("button", { name: "Switch to" }));
+    await settle();
+    expect(m.me.choosePoolAccount).toHaveBeenCalledWith("claude", "one");
+    expect(m.cc.activateProfile).not.toHaveBeenCalled();
+    expect(screen.getByTestId("pool-row-claude-one")).toHaveTextContent("in use");
+    const auto = screen.getByTestId("pool-row-claude-automatic");
+    await user.click(within(auto).getByRole("button", { name: "Switch to" }));
+    await settle();
+    expect(m.me.choosePoolAccount).toHaveBeenLastCalledWith("claude", null);
+    expect(screen.getByTestId("pool-row-claude-automatic")).toHaveTextContent("in use");
+  });
+
+  it("locks every pool row on an admin's pin", async () => {
+    m.me.poolAccounts.mockResolvedValue({
+      tools: [
+        {
+          tool: "claude",
+          pin: "one",
+          choice: null,
+          accounts: [poolAccount("one"), poolAccount("two")],
+        },
+      ],
+    });
+    await show();
+    expect(screen.getByText(/pinned you to one/)).toBeInTheDocument();
+    expect(screen.queryByTestId("pool-row-claude-automatic")).toBeNull();
+    expect(screen.getByTestId("pool-row-claude-one")).toHaveTextContent("in use");
+    expect(
+      within(screen.getByTestId("pool-row-claude-two")).queryByRole("button", { name: "Switch to" })
+    ).toBeNull();
+  });
+
+  it("shows a developer only the pool rows, never the host's logins", async () => {
+    perms.seesAll = false;
+    await show();
+    expect(m.cc.profiles).not.toHaveBeenCalled();
+    expect(m.tp.list).not.toHaveBeenCalled();
+    expect(m.pool.list).not.toHaveBeenCalled();
+    expect(screen.getByTestId("pool-row-claude-one")).toBeInTheDocument();
+    expect(screen.queryByRole("tab", { name: /codex/i })).toBeNull();
+  });
+
+  it("is not shown to a developer with no pool account to use", async () => {
+    perms.seesAll = false;
+    m.me.poolAccounts.mockResolvedValue({ tools: [] });
+    await show();
+    expect(screen.queryByRole("tablist")).toBeNull();
+  });
+});

client/src/components/users/UserDetail.tsx

@@ -25,6 +25,8 @@ import { AiToolIcon } from "../AiToolIcon";
 import { SessionStatusBadge } from "../StatusBadge";
 import { MiniChart } from "../admin/MiniChart";
 import { QuotaBar, windowsOf } from "./AccountPoolCard";
+import { RemoteDevices } from "../remote/RemoteDevices";
+import { usePermissions } from "../AuthGate";
 
 const POOL_LABEL: Record<PoolTool, string> = {
   claude: "Claude Code",
@@ -35,6 +37,7 @@ const pctText = (n: number) => `${n < 10 ? n.toFixed(1) : Math.round(n)}%`;
 
 export function UserDetail({ userId }: { userId: number }) {
   const { t } = useTranslation("users");
+  const { isAdmin } = usePermissions();
   const { label: toolLabel } = useAiTools();
   const [data, setData] = useState<UserDetails | null>(null);
   const [error, setError] = useState<string | null>(null);
@@ -289,6 +292,12 @@ export function UserDetail({ userId }: { userId: number }) {
           </ul>
         </Panel>
       )}
+
+      {/* Their own machines (AgentHub local) on the company hub, and those
+          machines' Company-account sessions — revocable by an admin. */}
+      <Panel title={t("detail.devicesTitle")}>
+        <RemoteDevices userId={userId} canRevoke={isAdmin} />
+      </Panel>
     </div>
   );
 }

client/src/hooks/__tests__/useTheme.test.ts

@@ -103,6 +103,19 @@ describe("useTheme", () => {
     expect(document.documentElement.dataset.theme).toBe("orca-light");
   });
 
+  it("applies the ai-chat-themes palettes by id, each in its own mode only", () => {
+    const { result } = renderHook(() => useTheme());
+    for (const name of ["sunset-cloud", "terminal", "night-sea"]) {
+      act(() => result.current.setThemeFor("dark", name));
+      expect(document.documentElement.dataset.theme).toBe(name);
+    }
+    act(() => result.current.setThemeFor("dark", "sakura"));
+    expect(result.current.themeFor.dark).toBe("night-sea");
+    act(() => result.current.setThemeFor("light", "sakura"));
+    act(() => result.current.toggleTheme());
+    expect(document.documentElement.dataset.theme).toBe("sakura");
+  });
+
   it("the default theme carries no data-theme attribute", () => {
     const { result } = renderHook(() => useTheme());
     act(() => result.current.setThemeFor("dark", "darcula"));

client/src/hooks/useLanes.ts

@@ -53,12 +53,16 @@ function load(): Promise<void> {
 }
 
 function onMessage(msg: WSMessage) {
+  // A workspace shared with this user, or taken back: re-read the list.
+  if (msg.type === "lane_access") return void load();
   if (msg.type !== "lane_update") return;
   const payload = msg.data as { lane?: Lane; removed?: number };
   const lane = payload.lane;
   if (payload.removed !== undefined || !lane || !lanes) return void load();
   const i = lanes.findIndex((l) => l.id === lane.id);
-  if (i === -1) return void load();
+  // A broadcast carries no viewer's `access`: a lane seen through a shared
+  // session re-reads it (its access may have changed too).
+  if (i === -1 || lanes[i]?.access) return void load();
   const next = [...lanes];
   next[i] = lane;
   publish(next);

client/src/hooks/usePanePresence.ts

@@ -0,0 +1,54 @@
+/**
+ * @file usePanePresence.ts
+ * @description Who has each of a workspace's panes open (server mode, workspace
+ * sharing phase 4): `GET /api/lanes/:id/presence` once, then every
+ * `pane_presence` frame for that workspace, and a re-read on a WebSocket
+ * reconnect (frames missed while away are never replayed). Local mode has
+ * one user and reads nothing. Returns `{runId: [{id, name}]}`.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState } from "react";
+import { api } from "../lib/api";
+import { eventBus } from "../lib/eventBus";
+import { usePermissions } from "../components/AuthGate";
+
+export type PanePeople = Record<string, { id: number; name: string }[]>;
+
+export function usePanePresence(laneId: number | null | undefined): PanePeople {
+  const { local } = usePermissions();
+  const [panes, setPanes] = useState<PanePeople>({});
+  useEffect(() => {
+    setPanes({});
+    if (local || laneId == null) return;
+    let alive = true;
+    const load = () =>
+      Promise.resolve()
+        .then(() => api.lanes.presence(laneId))
+        .then((r) => alive && setPanes(r.panes))
+        .catch(() => {
+          /* presence is a nicety: no list, no chips */
+        });
+    void load();
+    const offMsg = eventBus.subscribe((msg) => {
+      if (msg.type !== "pane_presence") return;
+      const d = msg.data as { laneId?: number; runId?: string; users?: PanePeople[string] };
+      if (d.laneId !== laneId || !d.runId) return;
+      setPanes((prev) => {
+        const next = { ...prev };
+        if (d.users?.length) next[d.runId!] = d.users;
+        else delete next[d.runId!];
+        return next;
+      });
+    });
+    const offConn = eventBus.onConnection((up) => {
+      if (up) void load();
+    });
+    return () => {
+      alive = false;
+      offMsg();
+      offConn();
+    };
+  }, [laneId, local]);
+  return panes;
+}

client/src/hooks/useTheme.ts

@@ -22,8 +22,8 @@ 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", "canvas", "apple-light", "orca-light"],
+  dark: ["default", "darcula", "apple-dark", "orca-dark", "sunset-cloud", "terminal", "night-sea"],
+  light: ["default", "canvas", "apple-light", "orca-light", "sakura"],
 } as const satisfies Record<Theme, readonly string[]>;
 
 const MODE_KEY = "theme";

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

@@ -9,7 +9,8 @@
     "status_duration": "Stuck agent",
     "token_threshold": "Token threshold",
     "cost_threshold": "Cost threshold",
-    "budget": "Spend budget"
+    "budget": "Spend budget",
+    "remote_unmonitored": "Company account outside AgentHub"
   },
   "ruleTypeHints": {
     "event_pattern": "Fires when an ingested event matches the pattern. Set a count above 1 to require N matching events within a time window (e.g. more than 5 errors in 2 minutes).",
@@ -17,7 +18,8 @@
     "status_duration": "Fires when an agent has remained in the selected status with no activity for the configured number of minutes.",
     "token_threshold": "Fires when a session's total token usage (input + output + cache) exceeds the threshold.",
     "cost_threshold": "Fires when a session's cost reaches the amount, priced like the session's own cost.",
-    "budget": "Fires once per period at each threshold of a spend limit — per day, week or month in your local time, optionally for one AI tool."
+    "budget": "Fires once per period at each threshold of a spend limit — per day, week or month in your local time, optionally for one AI tool.",
+    "remote_unmonitored": "Fires when a user's machine uses the company account for a session it did not start from AgentHub (nothing of it is sent to the hub). Server mode only."
   },
   "ruleDesc": {
     "eventPattern": "Matches {{pattern}}",
@@ -26,7 +28,8 @@
     "statusDuration": "Agent stuck in {{status}} for {{minutes}} min",
     "tokenThreshold": "Session tokens exceed {{tokens}}",
     "costThreshold": "Session cost reaches {{usd}}",
-    "budget": "{{limit}} per {{period}} · alerts at {{thresholds}}"
+    "budget": "{{limit}} per {{period}} · alerts at {{thresholds}}",
+    "remoteUnmonitored": "session not started from AgentHub"
   },
   "rules": {
     "title": "Alert rules",

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

@@ -27,7 +27,7 @@
   "share": "Share",
   "unshare": "Unshare",
   "shareDone": "Shared to the Hub",
-  "unshareDone": "Removed from the Hub",
+  "unshareDone": "No longer shared",
   "reshare": "Share again",
   "reshareDone": "New version shared — people who installed it are offered Update",
   "reshareSame": "Already the newest version — shared",
@@ -234,5 +234,50 @@
   "pack.updateN": "Update {{count}}",
   "pack.updateTitle": "Update {{count}} skills of {{prefix}}-*?",
   "pack.updateBody": "Each copy is replaced by the newest version; the current ones are moved to ~/.claude/agenthub-replaced-skills/:",
-  "pack.updated": "Updated {{ok}} · failed {{failed}}"
+  "pack.updated": "Updated {{ok}} · failed {{failed}}",
+  "tab.withme": "Shared with you",
+  "sharing": "Sharing…",
+  "shareTitle": "Share “{{title}}”",
+  "shareMode.people": "Only the people I pick",
+  "shareMode.peopleHint": "Only them (and admins) see it; nobody else finds it in the Hub.",
+  "shareMode.everyone": "Everyone (the Hub)",
+  "shareMode.everyoneHint": "Every user sees it in the Hub.",
+  "shareMode.nobody": "Stop sharing",
+  "shareMode.nobodyHint": "Only you (and admins) see it again.",
+  "sharePeople.search": "Find a person",
+  "sharePeople.none": "Nobody matches.",
+  "sharePeople.picked_one": "{{count}} person picked",
+  "sharePeople.picked_other": "{{count}} people picked",
+  "shareSave": "Save",
+  "sharePeopleDone_one": "Shared with {{count}} person",
+  "sharePeopleDone_other": "Shared with {{count}} people",
+  "sharedWithCount_one": "Shared with {{count}} person",
+  "sharedWithCount_other": "Shared with {{count}} people",
+  "sharedWithMe": "Shared with you",
+  "withme.empty": "Nothing has been shared with you by name yet.",
+  "folders.all": "All folders",
+  "folders.new": "New folder",
+  "folders.newName": "Folder name",
+  "folders.rename": "Rename",
+  "folders.delete": "Delete folder",
+  "folders.deleteTitle": "Delete the folder “{{name}}”?",
+  "folders.deleteBody": "Only the folder goes; its artifacts stay where they are.",
+  "folders.empty": "This folder is empty. Drag an artifact onto the folder, or use ⋯ → Move to folder.",
+  "folders.move": "Move to folder…",
+  "folders.moveTitle": "Move “{{title}}” to a folder",
+  "folders.private": "Your folders are yours alone: nobody else sees them.",
+  "folders.createHere": "New folder",
+  "folders.takeOut": "Take it out of its folder",
+  "page.view": "View",
+  "page.viewHint": "Its copy, viewable here without the claude.ai account that published it",
+  "page.noCopy": "No viewable copy: the file this page was published from is gone, or lies outside this workspace and its session's scratchpad. Open it on claude.ai instead.",
+  "pdf.page": "Page {{n}}",
+  "pdf.failed": "This PDF could not be shown. Download it instead.",
+  "pdf.more": "Showing the first {{shown}} of {{total}} pages — download it for the rest.",
+  "exportsSwitch": "Keep a viewable copy of Docs and Slides",
+  "exportsSwitchHint": "When Claude publishes a Claude Docs doc, a deck or a design from an AgentHub session, it is asked to also save a copy (Markdown, PDF or HTML) that the Hub shows to the people it is shared with — they need no claude.ai access. Applies to sessions started afterwards.",
+  "folders.moved": "Moved to “{{name}}”",
+  "folders.takenOut": "Taken out of its folder",
+  "folders.dropHint": "Drop an artifact here to put it in this folder",
+  "folders.dropOutHint": "Drop an artifact here to take it out of its folder"
 }

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

@@ -206,7 +206,13 @@
     "confirmPassword": "Confirm new password",
     "mismatch": "The two new passwords differ",
     "mustChangeSubmit": "Save and continue",
-    "saving": "Saving…"
+    "saving": "Saving…",
+    "tokenTitle": "Dashboard token",
+    "tokenSubtitle": "This dashboard requires its access token (DASHBOARD_TOKEN). It is saved in this browser only.",
+    "tokenWrong": "That token was not accepted — check it and try again.",
+    "tokenLabel": "Token",
+    "tokenHint": "On the dashboard's machine, `agenthub start` prints a link that carries it.",
+    "tokenSubmit": "Continue"
   },
   "insights": {
     "help": {
@@ -223,5 +229,9 @@
       "errors": "Steps that failed. A few are normal; many may mean the AI got stuck.",
       "tokenFlow": "Input = sent to the AI, Output = written by the AI, Cache = reused from memory (cheaper)."
     }
+  },
+  "select": {
+    "search": "Search…",
+    "noMatch": "No match"
   }
 }

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

@@ -196,8 +196,6 @@
   "gitBar.switch": "Branch",
   "gitBar.switchApply": "Switch branch",
   "gitBar.branchSearch": "Search branches…",
-  "gitBar.branchMatches_one": "{{count}} matching branch",
-  "gitBar.branchMatches_other": "{{count}} matching branches",
   "gitBar.switchCurrent": "current",
   "gitBar.remoteBranches": "On the remote — switching creates the local branch",
   "gitBar.switchDirty": "Commit, discard or shelve the uncommitted changes first",
@@ -279,6 +277,7 @@
   "renameLabel": "Rename this workspace",
   "proxy.native": "Native ({{tool}})",
   "proxy.label": "AI Proxy",
+  "proxy.company": "Company account",
   "runtime.down": "down",
   "runtime.healthy": "healthy",
   "runtime.partial": "partial",
@@ -387,6 +386,32 @@
   "menu.copyPath": "Copy path",
   "menu.reset": "Reset worktree…",
   "menu.remove": "Delete workspace…",
+  "menu.share": "Share…",
+  "share.title": "Share workspace",
+  "share.what": "People you share it with see this workspace and its sessions, join its open terminals, type into them and commit — like you. Only you rename, reset, delete or share it. A session they start runs on their own account and is billed to them.",
+  "share.warning": "They work as YOUR account on this server: they can read everything in your home folder (your other workspaces, SSH keys and AI logins) and their commits carry your name. Share only with people you would hand your keyboard to.",
+  "share.loading": "Loading…",
+  "share.nobody": "There is no one else to share with.",
+  "share.search": "Search people",
+  "share.cancel": "Cancel",
+  "share.close": "Close",
+  "share.save": "Save",
+  "share.saving": "Saving…",
+  "share.confirmTitle": "Share \"{{name}}\"?",
+  "share.confirmBody": "{{people}} will work in it as your account and can read everything in your home folder.",
+  "share.confirm": "Share",
+  "share.saved_one": "Shared with {{count}} person",
+  "share.saved_other": "Shared with {{count}} people",
+  "share.disabled": "(disabled)",
+  "share.savedNone": "No longer shared with anyone",
+  "shared.ownAccount": "This workspace is shared with you: a session you start here runs on your own account — a pool account or an AI Proxy of yours — and is billed to you.",
+  "share.sessionTitle": "Share session",
+  "share.sessionWhat": "People you share it with see this session and the workspace's changes, join its open tab, type into it, send it messages (on their own account, billed to them) and commit — nothing else of the workspace. Only you share it. On this server they work as YOUR account inside its terminal, so they can still reach the rest of your home from there.",
+  "sessionMenu.share": "Share…",
+  "shared.sessionOnly": "Only a session of this workspace is shared with you: open it from the list to work in it.",
+  "tabs.billedTo": "Billed to {{name}}",
+  "tabs.here": "Also here: {{names}}",
+  "shared.badge": "Shared with you",
   "panel.changes": "Changes",
   "panel.analyst": "Analyst",
   "panel.preview": "Preview",
@@ -710,6 +735,7 @@
   "fx.readOnlyHint": "This is another user's home: you can view, copy and download, not change it.",
   "fx.homeEmpty": "Nothing in your home yet — its hidden files (.bashrc, .claude…) are not shown here. Your workspaces are on the left.",
   "tmuxUpgrade": "Upgrade tmux: {{advice}}",
+  "tmuxUpgradeOptional": "tmux is older than recommended — terminals work as they are; this message shows once. {{advice}}",
   "changes.rescanRepos": "Scan for repositories again",
   "tree.newGroup": "New group",
   "tree.groupDefaultName": "New group",
@@ -751,7 +777,7 @@
   "shelves.deleted": "Shelf deleted",
   "shelves.restored": "Shelved changes restored",
   "shelves.restoredConflicts": "Restored with {{count}} conflicted file(s): resolve them in the list. The shelf is kept until you delete it.",
-  "shelves.restoreDirty": "Commit, discard or shelve the current changes before restoring a shelf",
+  "shelves.restoreDirty": "Commit, discard or unstage the changes in this shelf's files (and anything staged) before restoring it",
   "shelves.shelveTicked": "Shelve ({{count}})",
   "shelves.shelveHint": "Set the ticked files aside on a shelf and clean them from the working tree",
   "shelves.shelveApply": "Shelve {{count}} file(s)",

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

@@ -1438,17 +1438,60 @@
     }
   },
   "poolAccount": {
-    "title": "Pool account",
-    "description": "Which account of the shared account pool your own new sessions run on. Automatic lets AgentHub pick the least-used one.",
     "automatic": "Automatic",
-    "select": "{{tool}} pool account",
-    "count_one": "{{count}} account you may use",
-    "count_other": "{{count}} accounts you may use",
     "pinned": "An admin pinned you to {{account}}",
     "expired": "expired",
     "full": "quota full",
     "automaticSaved": "Back to automatic — AgentHub picks the account",
     "switchedNow": "Switched to {{account}} — running sessions follow it",
-    "nextSession": "{{account}} is used from your next session"
+    "nextSession": "{{account}} is used from your next session",
+    "inUse": "in use",
+    "badge": "Pool",
+    "automaticHint": "Your new sessions run on the least-used pool account",
+    "quota": "Quota {{pct}}%"
+  },
+  "companyHub": {
+    "title": "Company hub",
+    "description": "Use the company's shared Claude accounts from this machine. Only what costs the company is reported.",
+    "ruleSent": "Sessions you start on \"Company account\" send their conversation and token usage to the hub — every hour and when the session ends. Secret-looking strings (keys, tokens, passwords) are removed first.",
+    "ruleNotSent": "Sessions on your own login or your own AI Proxy send nothing — not even the folder name. The hub never reads your files and never controls this machine.",
+    "ruleKey": "The company account's credential stays on the hub; this machine keeps only a device token (90 days, revocable).",
+    "ruleOffice": "The hub is on the company network: away from it, Company-account sessions cannot start; your own login works as usual.",
+    "enrolledAs": "Enrolled with {{hub}} as {{user}}",
+    "validUntil": "valid until {{time}}",
+    "expired": "expired",
+    "expiredHint": "This machine's hub login expired — enroll again.",
+    "sendNow": "Send now",
+    "logout": "Log out",
+    "logoutTitle": "Log this machine out of the hub?",
+    "logoutHint": "Its device token is revoked on the hub. Company-account sessions stop working here until you enroll again.",
+    "sentTitle": "Sent to the hub",
+    "sentLine": "{{bytes}} · {{time}}",
+    "notSentYet": "not sent yet",
+    "ended": "ended",
+    "nothingSent": "No Company-account session yet.",
+    "sentToast": "Sent {{bytes}} of {{sessions}} session(s)",
+    "enrolledToast": "This machine is enrolled with the hub",
+    "hubAddress": "Hub address",
+    "username": "Hub username",
+    "password": "Hub password",
+    "enroll": "Enroll this machine",
+    "cliHint": "Or in a terminal: agenthub remote login <hub address>",
+    "hubTitle": "Your machines",
+    "hubDescription": "Machines running AgentHub local that you enrolled with this hub, and their Company-account sessions.",
+    "noDevices": "No machine enrolled.",
+    "revokedAt": "revoked {{time}}",
+    "lastSeen": "seen {{time}} from {{ip}}",
+    "revoke": "Revoke",
+    "revokeTitle": "Revoke {{name}}?",
+    "revokeHint": "Its device token stops working at once; the machine must enroll again.",
+    "revoked": "{{name}} revoked",
+    "yourPassword": "Your password",
+    "sessions": "Company-account sessions",
+    "unmonitored": "not started from AgentHub",
+    "sessionLine": "{{requests}} requests · {{input}} in · {{output}} out · {{account}}",
+    "purged": "conversation removed (retention)",
+    "whoRead": "Who opened your sessions",
+    "nobodyRead": "Nobody has opened your sessions."
   }
 }

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

@@ -409,7 +409,8 @@
     "activeLabel": "Running now",
     "activeValue": "{{sessions}} sessions · {{panes}} panes",
     "nowTitle": "Running now",
-    "poolTheirs7d": "theirs 7 d {{cost}}"
+    "poolTheirs7d": "theirs 7 d {{cost}}",
+    "devicesTitle": "Machines (AgentHub local)"
   },
   "activity": "Activity",
   "spend": "Spend today",

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

@@ -9,7 +9,8 @@
     "status_duration": "Agent bị kẹt",
     "token_threshold": "Ngưỡng token",
     "cost_threshold": "Ngưỡng chi phí",
-    "budget": "Ngân sách chi tiêu"
+    "budget": "Ngân sách chi tiêu",
+    "remote_unmonitored": "Tài khoản công ty dùng ngoài AgentHub"
   },
   "ruleTypeHints": {
     "event_pattern": "Kích hoạt khi một sự kiện khớp với mẫu. Đặt số lần lớn hơn 1 để yêu cầu N sự kiện khớp trong khung thời gian (ví dụ: hơn 5 lỗi trong 2 phút).",
@@ -17,7 +18,8 @@
     "status_duration": "Kích hoạt khi một agent giữ nguyên trạng thái đã chọn mà không có hoạt động trong số phút đã cấu hình.",
     "token_threshold": "Kích hoạt khi tổng mức dùng token của phiên (đầu vào + đầu ra + bộ nhớ đệm) vượt ngưỡng.",
     "cost_threshold": "Kích hoạt khi chi phí của một phiên chạm mức này, tính giá như chi phí riêng của phiên.",
-    "budget": "Kích hoạt một lần mỗi kỳ ở từng ngưỡng của hạn mức chi tiêu — theo ngày, tuần hoặc tháng theo giờ địa phương, có thể chỉ cho một công cụ AI."
+    "budget": "Kích hoạt một lần mỗi kỳ ở từng ngưỡng của hạn mức chi tiêu — theo ngày, tuần hoặc tháng theo giờ địa phương, có thể chỉ cho một công cụ AI.",
+    "remote_unmonitored": "Kích hoạt khi máy của một người dùng tài khoản công ty cho một phiên không mở từ AgentHub (phiên đó không được gửi về hub). Chỉ có ở chế độ server."
   },
   "ruleDesc": {
     "eventPattern": "Khớp {{pattern}}",
@@ -26,7 +28,8 @@
     "statusDuration": "Agent kẹt ở trạng thái {{status}} trong {{minutes}} phút",
     "tokenThreshold": "Token của phiên vượt {{tokens}}",
     "costThreshold": "Chi phí phiên chạm {{usd}}",
-    "budget": "{{limit}} mỗi {{period}} · cảnh báo ở {{thresholds}}"
+    "budget": "{{limit}} mỗi {{period}} · cảnh báo ở {{thresholds}}",
+    "remoteUnmonitored": "phiên không mở từ AgentHub"
   },
   "rules": {
     "title": "Quy tắc cảnh báo",

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

@@ -27,7 +27,7 @@
   "share": "Chia sẻ",
   "unshare": "Bỏ chia sẻ",
   "shareDone": "Đã chia sẻ lên Hub",
-  "unshareDone": "Đã gỡ khỏi Hub",
+  "unshareDone": "Đã ngừng chia sẻ",
   "reshare": "Share lại",
   "reshareDone": "Đã share bản mới — người đã cài sẽ thấy nút Cập nhật",
   "reshareSame": "Đã là bản mới nhất — đã share",
@@ -232,5 +232,50 @@
   "pack.updateN": "Cập nhật {{count}}",
   "pack.updateTitle": "Cập nhật {{count}} skill của bộ {{prefix}}-*?",
   "pack.updateBody": "Mỗi bản sẽ được thay bằng phiên bản mới nhất; bản hiện tại được chuyển sang ~/.claude/agenthub-replaced-skills/:",
-  "pack.updated": "Đã cập nhật {{ok}} · lỗi {{failed}}"
+  "pack.updated": "Đã cập nhật {{ok}} · lỗi {{failed}}",
+  "tab.withme": "Chia sẻ với bạn",
+  "sharing": "Chia sẻ…",
+  "shareTitle": "Chia sẻ “{{title}}”",
+  "shareMode.people": "Chỉ những người tôi chọn",
+  "shareMode.peopleHint": "Chỉ họ (và admin) thấy; người khác không thấy trên Hub.",
+  "shareMode.everyone": "Mọi người (Hub)",
+  "shareMode.everyoneHint": "Mọi người dùng đều thấy trên Hub.",
+  "shareMode.nobody": "Ngừng chia sẻ",
+  "shareMode.nobodyHint": "Chỉ bạn (và admin) thấy như trước.",
+  "sharePeople.search": "Tìm người",
+  "sharePeople.none": "Không có ai khớp.",
+  "sharePeople.picked_one": "Đã chọn {{count}} người",
+  "sharePeople.picked_other": "Đã chọn {{count}} người",
+  "shareSave": "Lưu",
+  "sharePeopleDone_one": "Đã chia sẻ với {{count}} người",
+  "sharePeopleDone_other": "Đã chia sẻ với {{count}} người",
+  "sharedWithCount_one": "Chia sẻ với {{count}} người",
+  "sharedWithCount_other": "Chia sẻ với {{count}} người",
+  "sharedWithMe": "Chia sẻ với bạn",
+  "withme.empty": "Chưa có ai chia sẻ riêng với bạn.",
+  "folders.all": "Tất cả thư mục",
+  "folders.new": "Thư mục mới",
+  "folders.newName": "Tên thư mục",
+  "folders.rename": "Đổi tên",
+  "folders.delete": "Xóa thư mục",
+  "folders.deleteTitle": "Xóa thư mục “{{name}}”?",
+  "folders.deleteBody": "Chỉ xóa thư mục; các artifact bên trong vẫn giữ nguyên.",
+  "folders.empty": "Thư mục này trống. Kéo artifact thả vào thư mục, hoặc dùng ⋯ → Chuyển vào thư mục.",
+  "folders.move": "Chuyển vào thư mục…",
+  "folders.moveTitle": "Chuyển “{{title}}” vào thư mục",
+  "folders.private": "Thư mục là của riêng bạn: người khác không thấy.",
+  "folders.createHere": "Thư mục mới",
+  "folders.takeOut": "Bỏ khỏi thư mục",
+  "page.view": "Xem",
+  "page.viewHint": "Bản sao xem được ngay tại đây, không cần tài khoản claude.ai đã tạo trang",
+  "page.noCopy": "Chưa có bản xem: file gốc của trang này không còn, hoặc nằm ngoài workspace và scratchpad của phiên. Hãy mở trên claude.ai.",
+  "pdf.page": "Trang {{n}}",
+  "pdf.failed": "Không hiển thị được PDF này. Hãy tải về.",
+  "pdf.more": "Đang hiện {{shown}}/{{total}} trang đầu — tải về để xem hết.",
+  "exportsSwitch": "Giữ bản xem được của Docs và Slides",
+  "exportsSwitchHint": "Khi Claude tạo một Claude Docs, slide hoặc design trong phiên AgentHub, Claude được nhắc lưu thêm một bản sao (Markdown, PDF hoặc HTML) để Hub hiển thị cho người được chia sẻ — họ không cần quyền trên claude.ai. Áp dụng cho các phiên mở sau đó.",
+  "folders.moved": "Đã chuyển vào “{{name}}”",
+  "folders.takenOut": "Đã bỏ khỏi thư mục",
+  "folders.dropHint": "Thả artifact vào đây để đưa vào thư mục này",
+  "folders.dropOutHint": "Thả artifact vào đây để bỏ khỏi thư mục"
 }

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

@@ -206,7 +206,13 @@
     "confirmPassword": "Nhập lại mật khẩu mới",
     "mismatch": "Hai mật khẩu mới không khớp",
     "mustChangeSubmit": "Lưu và tiếp tục",
-    "saving": "Đang lưu…"
+    "saving": "Đang lưu…",
+    "tokenTitle": "Token của dashboard",
+    "tokenSubtitle": "Dashboard này yêu cầu token truy cập (DASHBOARD_TOKEN). Token chỉ được lưu trong trình duyệt này.",
+    "tokenWrong": "Token không đúng — kiểm tra lại rồi thử lần nữa.",
+    "tokenLabel": "Token",
+    "tokenHint": "Trên máy chạy dashboard, lệnh `agenthub start` in sẵn một đường link có kèm token.",
+    "tokenSubmit": "Tiếp tục"
   },
   "insights": {
     "help": {
@@ -223,5 +229,9 @@
       "errors": "Các bước bị lỗi. Vài lỗi là bình thường; nhiều lỗi có thể nghĩa là AI bị kẹt.",
       "tokenFlow": "Input = gửi cho AI, Output = AI viết ra, Cache = dùng lại từ bộ nhớ đệm (rẻ hơn)."
     }
+  },
+  "select": {
+    "search": "Tìm…",
+    "noMatch": "Không có kết quả"
   }
 }

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

@@ -196,8 +196,6 @@
   "gitBar.switch": "Nhánh",
   "gitBar.switchApply": "Chuyển nhánh",
   "gitBar.branchSearch": "Tìm nhánh…",
-  "gitBar.branchMatches_one": "{{count}} nhánh khớp",
-  "gitBar.branchMatches_other": "{{count}} nhánh khớp",
   "gitBar.switchCurrent": "hiện tại",
   "gitBar.remoteBranches": "Trên remote — switch sẽ tạo nhánh local",
   "gitBar.switchDirty": "Hãy commit, bỏ hoặc cất (shelve) các thay đổi chưa commit trước",
@@ -279,6 +277,7 @@
   "renameLabel": "Đổi tên workspace này",
   "proxy.native": "Native ({{tool}})",
   "proxy.label": "AI Proxy",
+  "proxy.company": "Tài khoản công ty",
   "runtime.down": "tắt",
   "runtime.healthy": "khoẻ",
   "runtime.partial": "một phần",
@@ -387,6 +386,32 @@
   "menu.copyPath": "Sao chép đường dẫn",
   "menu.reset": "Đặt lại worktree…",
   "menu.remove": "Xóa workspace…",
+  "menu.share": "Chia sẻ…",
+  "share.title": "Chia sẻ workspace",
+  "share.what": "Người được chia sẻ thấy workspace này và các session của nó, vào được terminal đang mở, gõ và commit — như bạn. Chỉ bạn được đổi tên, đặt lại, xoá hay chia sẻ nó. Session họ mở chạy bằng tài khoản của chính họ và tính tiền cho họ.",
+  "share.warning": "Họ làm việc bằng TÀI KHOẢN CỦA BẠN trên server này: đọc được mọi thứ trong thư mục home của bạn (các workspace khác, SSH key, đăng nhập AI) và commit của họ mang tên bạn. Chỉ chia sẻ với người bạn tin như đưa bàn phím cho họ.",
+  "share.loading": "Đang tải…",
+  "share.nobody": "Không còn ai khác để chia sẻ.",
+  "share.search": "Tìm người",
+  "share.cancel": "Huỷ",
+  "share.close": "Đóng",
+  "share.save": "Lưu",
+  "share.saving": "Đang lưu…",
+  "share.confirmTitle": "Chia sẻ \"{{name}}\"?",
+  "share.confirmBody": "{{people}} sẽ làm việc trong đó bằng tài khoản của bạn và đọc được mọi thứ trong thư mục home của bạn.",
+  "share.confirm": "Chia sẻ",
+  "share.saved_one": "Đã chia sẻ với {{count}} người",
+  "share.saved_other": "Đã chia sẻ với {{count}} người",
+  "share.disabled": "(đã vô hiệu hoá)",
+  "share.savedNone": "Không còn chia sẻ với ai",
+  "shared.ownAccount": "Workspace này được chia sẻ với bạn: session bạn mở ở đây chạy bằng tài khoản của chính bạn — tài khoản pool hoặc AI Proxy của bạn — và tính tiền cho bạn.",
+  "share.sessionTitle": "Chia sẻ session",
+  "share.sessionWhat": "Người được chia sẻ thấy session này và các thay đổi của workspace, vào tab đang mở, gõ, gửi tin nhắn cho nó (bằng tài khoản của họ, tính tiền cho họ) và commit — không gì khác của workspace. Chỉ bạn chia sẻ được. Trên server này họ làm việc bằng TÀI KHOẢN CỦA BẠN trong terminal của nó, nên từ đó họ vẫn với tới được phần còn lại trong home của bạn.",
+  "sessionMenu.share": "Chia sẻ…",
+  "shared.sessionOnly": "Chỉ một session của workspace này được chia sẻ với bạn: mở nó từ danh sách để làm việc.",
+  "tabs.billedTo": "Tính tiền cho {{name}}",
+  "tabs.here": "Cũng đang mở: {{names}}",
+  "shared.badge": "Được chia sẻ với bạn",
   "panel.changes": "Thay đổi",
   "panel.analyst": "Analyst",
   "panel.preview": "Xem trang",
@@ -710,6 +735,7 @@
   "fx.readOnlyHint": "Đây là home của user khác: bạn chỉ xem, sao chép và tải về được, không sửa được.",
   "fx.homeEmpty": "Home của bạn chưa có thư mục nào — các file ẩn (.bashrc, .claude…) không hiện ở đây. Các workspace nằm ở danh sách bên trái.",
   "tmuxUpgrade": "Cần nâng cấp tmux: {{advice}}",
+  "tmuxUpgradeOptional": "tmux đã cũ — terminal vẫn chạy bình thường; thông báo này chỉ hiện một lần. {{advice}}",
   "changes.rescanRepos": "Quét lại các repository",
   "tree.newGroup": "Nhóm mới",
   "tree.groupDefaultName": "Nhóm mới",
@@ -751,7 +777,7 @@
   "shelves.deleted": "Đã xoá shelf",
   "shelves.restored": "Đã khôi phục thay đổi đã cất",
   "shelves.restoredConflicts": "Đã khôi phục với {{count}} file xung đột: hãy giải quyết trong danh sách. Shelf được giữ đến khi bạn xoá.",
-  "shelves.restoreDirty": "Hãy commit, bỏ hoặc cất thay đổi hiện tại trước khi khôi phục một shelf",
+  "shelves.restoreDirty": "Hãy commit, bỏ hoặc bỏ stage thay đổi trên các file của shelf này (và mọi thứ đã stage) trước khi khôi phục",
   "shelves.shelveTicked": "Cất ({{count}})",
   "shelves.shelveHint": "Cất các file đã tick vào một shelf và dọn chúng khỏi thư mục làm việc",
   "shelves.shelveApply": "Cất {{count}} file",

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

@@ -1426,17 +1426,60 @@
     }
   },
   "poolAccount": {
-    "title": "Tài khoản pool",
-    "description": "Tài khoản nào trong pool tài khoản dùng chung chạy các phiên mới của bạn. Tự động để AgentHub chọn tài khoản ít dùng nhất.",
     "automatic": "Tự động",
-    "select": "Tài khoản pool của {{tool}}",
-    "count_one": "{{count}} tài khoản bạn được dùng",
-    "count_other": "{{count}} tài khoản bạn được dùng",
     "pinned": "Admin đã ghim bạn vào {{account}}",
     "expired": "hết hạn",
     "full": "hết quota",
     "automaticSaved": "Đã về Tự động — AgentHub tự chọn tài khoản",
     "switchedNow": "Đã chuyển sang {{account}} — các phiên đang chạy theo luôn",
-    "nextSession": "{{account}} được dùng từ phiên tiếp theo"
+    "nextSession": "{{account}} được dùng từ phiên tiếp theo",
+    "inUse": "đang dùng",
+    "badge": "Pool",
+    "automaticHint": "Phiên mới của bạn chạy trên tài khoản pool ít dùng nhất",
+    "quota": "Quota {{pct}}%"
+  },
+  "companyHub": {
+    "title": "Hub công ty",
+    "description": "Dùng tài khoản Claude chung của công ty từ máy này. Chỉ phần tốn tiền công ty mới được ghi nhận.",
+    "ruleSent": "Session bạn mở bằng \"Tài khoản công ty\" sẽ gửi hội thoại và token đã dùng lên hub — mỗi giờ và khi session kết thúc. Các chuỗi giống bí mật (key, token, mật khẩu) được xoá trước khi gửi.",
+    "ruleNotSent": "Session dùng tài khoản riêng hoặc AI Proxy riêng của bạn không gửi gì cả — kể cả tên thư mục. Hub không đọc file của bạn và không điều khiển máy này.",
+    "ruleKey": "Key của tài khoản công ty nằm ở hub; máy này chỉ giữ một device token (90 ngày, thu hồi được).",
+    "ruleOffice": "Hub nằm trong mạng công ty: ở ngoài, session tài khoản công ty không mở được; tài khoản riêng vẫn dùng bình thường.",
+    "enrolledAs": "Đã đăng ký với {{hub}} bằng {{user}}",
+    "validUntil": "hiệu lực đến {{time}}",
+    "expired": "đã hết hạn",
+    "expiredHint": "Đăng nhập hub của máy này đã hết hạn — đăng ký lại.",
+    "sendNow": "Gửi ngay",
+    "logout": "Đăng xuất",
+    "logoutTitle": "Đăng xuất máy này khỏi hub?",
+    "logoutHint": "Device token bị thu hồi trên hub. Session tài khoản công ty không dùng được ở máy này cho đến khi đăng ký lại.",
+    "sentTitle": "Đã gửi lên hub",
+    "sentLine": "{{bytes}} · {{time}}",
+    "notSentYet": "chưa gửi",
+    "ended": "đã kết thúc",
+    "nothingSent": "Chưa có session tài khoản công ty nào.",
+    "sentToast": "Đã gửi {{bytes}} của {{sessions}} session",
+    "enrolledToast": "Máy này đã đăng ký với hub",
+    "hubAddress": "Địa chỉ hub",
+    "username": "Tên đăng nhập hub",
+    "password": "Mật khẩu hub",
+    "enroll": "Đăng ký máy này",
+    "cliHint": "Hoặc trong terminal: agenthub remote login <địa chỉ hub>",
+    "hubTitle": "Máy của bạn",
+    "hubDescription": "Các máy chạy AgentHub local bạn đã đăng ký với hub này, và các session tài khoản công ty của chúng.",
+    "noDevices": "Chưa có máy nào đăng ký.",
+    "revokedAt": "đã thu hồi {{time}}",
+    "lastSeen": "thấy lần cuối {{time}} từ {{ip}}",
+    "revoke": "Thu hồi",
+    "revokeTitle": "Thu hồi {{name}}?",
+    "revokeHint": "Device token ngừng hoạt động ngay; máy đó phải đăng ký lại.",
+    "revoked": "Đã thu hồi {{name}}",
+    "yourPassword": "Mật khẩu của bạn",
+    "sessions": "Session tài khoản công ty",
+    "unmonitored": "không mở từ AgentHub",
+    "sessionLine": "{{requests}} request · {{input}} vào · {{output}} ra · {{account}}",
+    "purged": "đã xoá hội thoại (quá hạn lưu)",
+    "whoRead": "Ai đã xem session của bạn",
+    "nobodyRead": "Chưa ai xem session của bạn."
   }
 }

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

@@ -409,7 +409,8 @@
     "activeLabel": "Đang chạy",
     "activeValue": "{{sessions}} session · {{panes}} pane",
     "nowTitle": "Đang chạy",
-    "poolTheirs7d": "của họ 7 ngày {{cost}}"
+    "poolTheirs7d": "của họ 7 ngày {{cost}}",
+    "devicesTitle": "Máy cá nhân (AgentHub local)"
   },
   "activity": "Hoạt động",
   "spend": "Chi phí hôm nay",

client/src/index.css

@@ -350,6 +350,106 @@
   --syn-del: 197 0 15; /* #c5000f */
 }
 
+/* Sunset Cloud, Terminal, Night Sea (dark) and Sakura (light) — the colour
+ * themes of ai-chat-themes (github.com/Aohkne/ai-chat-themes, MIT), which
+ * gives only a background, a text and an accent colour per theme. Every
+ * other token is derived from those three and held to the bar above: text
+ * ≥ 4.5:1 on a card and on its hover lift, the text accent ≥ 4.5:1 on a card
+ * and on its own /15 chip (Sakura's #e0567f and Sunset's #ff8a6b darkened /
+ * lightened to get there), white ≥ 4.5:1 on `--accent-solid`, each status
+ * label ≥ 4.5:1 on its /20 chip. Their fonts (a monospace UI, Georgia) are
+ * not taken; syntax, diff and `--kept` colours are their mode's defaults.
+ * `--ansi-blue` (read only by `lib/terminalTheme.ts`) keeps a terminal's
+ * blue blue where the accent is green or coral. */
+.dark[data-theme="sunset-cloud"] {
+  --surface-0: 32 24 36; /* #201824 */
+  --surface-1: 48 37 52; /* #302534 */
+  --surface-2: 54 43 58; /* #362b3a */
+  --surface-3: 60 49 63; /* #3c313f */
+  --surface-4: 67 56 69; /* #433845 */
+  --surface-5: 75 63 76; /* #4b3f4c */
+  --border: 76 64 76; /* #4c404c */
+  --border-light: 88 76 87; /* #584c57 */
+  --accent: 255 159 134; /* #ff9f86 */
+  --accent-hover: 255 188 170; /* #ffbcaa */
+  --accent-solid: 173 94 73; /* #ad5e49 */
+  --accent-solid-hover: 149 81 63; /* #95513f */
+  --fg-primary: 247 232 226; /* #f7e8e2 */
+  --fg-secondary: 214 203 203; /* #d6cbcb */
+  --fg-muted: 176 165 168; /* #b0a5a8 */
+  --status-success: 88 220 156; /* #58dc9c */
+  --status-danger: 255 176 173; /* #ffb0ad */
+  --status-warning: 255 202 22; /* #ffca16 */
+  /* ANSI blue in the terminal: the accent is not blue here. */
+  --ansi-blue: 112 184 255; /* #70b8ff */
+}
+
+.dark[data-theme="terminal"] {
+  --surface-0: 8 13 9; /* #080d09 */
+  --surface-1: 14 23 17; /* #0e1711 */
+  --surface-2: 20 30 22; /* #141e16 */
+  --surface-3: 25 36 28; /* #19241c */
+  --surface-4: 31 44 34; /* #1f2c22 */
+  --surface-5: 37 52 41; /* #253429 */
+  --border: 38 54 42; /* #26362a */
+  --border-light: 49 67 53; /* #314335 */
+  --accent: 57 232 122; /* #39e87a */
+  --accent-hover: 116 239 162; /* #74efa2 */
+  --accent-solid: 32 132 70; /* #208446 */
+  --accent-solid-hover: 28 114 60; /* #1c723c */
+  --fg-primary: 185 246 198; /* #b9f6c6 */
+  --fg-secondary: 147 196 157; /* #93c49d */
+  --fg-muted: 117 154 125; /* #759a7d */
+  --status-success: 61 214 140; /* #3dd68c */
+  --status-danger: 255 149 146; /* #ff9592 */
+  --status-warning: 255 202 22; /* #ffca16 */
+  /* ANSI blue in the terminal: the accent is not blue here. */
+  --ansi-blue: 112 184 255; /* #70b8ff */
+}
+
+.dark[data-theme="night-sea"] {
+  --surface-0: 11 20 33; /* #0b1421 */
+  --surface-1: 20 31 49; /* #141f31 */
+  --surface-2: 26 37 55; /* #1a2537 */
+  --surface-3: 32 43 62; /* #202b3e */
+  --surface-4: 40 50 69; /* #283245 */
+  --surface-5: 47 58 76; /* #2f3a4c */
+  --border: 48 59 77; /* #303b4d */
+  --border-light: 60 71 89; /* #3c4759 */
+  --accent: 92 175 255; /* #5cafff */
+  --accent-hover: 141 199 255; /* #8dc7ff */
+  --accent-solid: 62 120 176; /* #3e78b0 */
+  --accent-solid-hover: 53 103 151; /* #356797 */
+  --fg-primary: 220 230 250; /* #dce6fa */
+  --fg-secondary: 183 192 210; /* #b7c0d2 */
+  --fg-muted: 146 155 173; /* #929bad */
+  --status-success: 61 214 140; /* #3dd68c */
+  --status-danger: 255 155 153; /* #ff9b99 */
+  --status-warning: 255 202 22; /* #ffca16 */
+}
+
+[data-mode="light"][data-theme="sakura"] {
+  --surface-0: 242 230 232; /* #f2e6e8 */
+  --surface-1: 247 235 237; /* #f7ebed */
+  --surface-2: 251 240 242; /* #fbf0f2 */
+  --surface-3: 255 249 250; /* #fff9fa */
+  --surface-4: 255 252 253; /* #fffcfd */
+  --surface-5: 255 255 255; /* #ffffff */
+  --border: 224 210 213; /* #e0d2d5 */
+  --border-light: 237 224 227; /* #ede0e3 */
+  --accent: 167 64 95; /* #a7405f */
+  --accent-hover: 137 52 78; /* #89344e */
+  --accent-solid: 195 75 110; /* #c34b6e */
+  --accent-solid-hover: 168 65 95; /* #a8415f */
+  --fg-primary: 75 42 53; /* #4b2a35 */
+  --fg-secondary: 107 80 89; /* #6b5059 */
+  --fg-muted: 120 97 105; /* #786169 */
+  --status-success: 23 105 45; /* #17692d */
+  --status-danger: 173 28 38; /* #ad1c26 */
+  --status-warning: 124 82 0; /* #7c5200 */
+  --shadow-card: 0 1px 2px rgb(75 42 53 / 0.06), 0 2px 6px rgb(75 42 53 / 0.07);
+}
+
 @layer base {
   body {
     font-weight: 500;

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

@@ -0,0 +1,51 @@
+/**
+ * @file apiDashboardToken.test.ts
+ * @description DASHBOARD_TOKEN in the browser: `withToken` adds `?token=` (or
+ * `&token=`) to what cannot send the header — WebSockets, images, downloads —
+ * and leaves the URL alone with no token; `adoptTokenFromUrl` keeps the token
+ * of the link `agenthub start` prints and takes it out of the address bar;
+ * a 401 EUNAUTHORIZED from any request fires TOKEN_REQUIRED_EVENT.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, vi, afterEach, beforeEach } from "vitest";
+import { adoptTokenFromUrl, api, TOKEN_REQUIRED_EVENT, withToken } from "../api";
+
+beforeEach(() => localStorage.clear());
+afterEach(() => vi.unstubAllGlobals());
+
+describe("the dashboard token in the browser", () => {
+  it("rides the query only when there is one", () => {
+    expect(withToken("/api/x")).toBe("/api/x");
+    localStorage.setItem("dashboard_token", "a b");
+    expect(withToken("/api/x")).toBe("/api/x?token=a%20b");
+    expect(withToken("/api/x?path=1")).toBe("/api/x?path=1&token=a%20b");
+    expect(api.artifacts.rawUrl(3, "f.png")).toBe("/api/artifacts/3/raw?path=f.png&token=a%20b");
+  });
+
+  it("is taken from the page's ?token= and dropped from the address bar", () => {
+    window.history.replaceState(null, "", "/workspace?lane=2&token=t0k#x");
+    adoptTokenFromUrl();
+    expect(localStorage.getItem("dashboard_token")).toBe("t0k");
+    expect(window.location.pathname + window.location.search + window.location.hash).toBe(
+      "/workspace?lane=2#x"
+    );
+  });
+
+  it("is asked for when a request answers 401 EUNAUTHORIZED", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn().mockResolvedValue(
+        new Response(JSON.stringify({ error: { code: "EUNAUTHORIZED", message: "no" } }), {
+          status: 401,
+          headers: { "Content-Type": "application/json" },
+        })
+      )
+    );
+    const seen = vi.fn();
+    window.addEventListener(TOKEN_REQUIRED_EVENT, seen);
+    await expect(api.auth.me()).rejects.toMatchObject({ status: 401 });
+    window.removeEventListener(TOKEN_REQUIRED_EVENT, seen);
+    expect(seen).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -39,6 +39,11 @@ describe("buildTerminalTheme", () => {
     expect(t.brightWhite).toBe("#edeef0");
   });
 
+  it("takes ANSI blue from --ansi-blue when a theme's accent is not blue", () => {
+    const t = buildTerminalTheme((n) => ({ ...vars, "--ansi-blue": "112 184 255" })[n] ?? "");
+    expect(t.blue).toBe("#70b8ff");
+  });
+
   it("makes each bright twin lighter than its base colour", () => {
     const t = buildTerminalTheme((n) => vars[n] ?? "");
     const sum = (hex: string) =>

client/src/lib/api.ts

@@ -505,6 +505,24 @@ export function dashboardToken(): string | null {
   }
 }
 
+/**
+ * `url` with the dashboard token (if one is configured) in its query string —
+ * for what cannot send the `x-dashboard-token` header: an `<img>`, an
+ * `<a download>`, an iframe, a WebSocket, a bare `fetch`. Unchanged when no
+ * token is set (the loopback default).
+ */
+export function withToken(url: string): string {
+  const token = dashboardToken();
+  if (!token) return url;
+  return `${url}${url.includes("?") ? "&" : "?"}token=${encodeURIComponent(token)}`;
+}
+
+/** The token header for a bare `fetch` that bypasses {@link request}; empty with no token. */
+export function tokenHeader(): Record<string, string> {
+  const token = dashboardToken();
+  return token ? { "x-dashboard-token": token } : {};
+}
+
 /** `?scope=&cwd=` for the cc-config list endpoints, each part only when given. */
 function ccQuery(scope?: CcScope, cwd?: string): string {
   const qs = new URLSearchParams();
@@ -546,6 +564,36 @@ function ccQuery(scope?: CcScope, cwd?: string): string {
  */
 /** Fired on `window` when a request answers 401 `EAUTH` (server mode). */
 export const AUTH_REQUIRED_EVENT = "agenthub:auth-required";
+/** Fired on a 401 EUNAUTHORIZED: DASHBOARD_TOKEN is set and this browser's is missing or wrong. */
+export const TOKEN_REQUIRED_EVENT = "agenthub:token-required";
+
+/** Keep `token` as this browser's dashboard token (an empty one forgets it). */
+export function saveDashboardToken(token: string): void {
+  try {
+    if (token) localStorage.setItem("dashboard_token", token);
+    else localStorage.removeItem("dashboard_token");
+  } catch {
+    /* storage blocked: the prompt will ask again */
+  }
+}
+
+/**
+ * A `?token=` on the page's own URL (the link `agenthub start` prints): keep
+ * it in this browser and take it out of the address bar and history, so it is
+ * not left in a screenshot or a bookmark. Call once, before the first request.
+ */
+export function adoptTokenFromUrl(): void {
+  try {
+    const url = new URL(window.location.href);
+    const token = url.searchParams.get("token");
+    if (!token) return;
+    saveDashboardToken(token);
+    url.searchParams.delete("token");
+    window.history.replaceState(window.history.state, "", url.pathname + url.search + url.hash);
+  } catch {
+    /* no URL API / history: nothing to adopt */
+  }
+}
 
 /** One account in Settings → Users (`GET /api/users`). */
 export type ServerUserUsage = AuthUser & {
@@ -940,6 +988,15 @@ export type PoolProfile = {
   subscriptionType: string | null;
   active: boolean;
 };
+/** A user a workspace is shared with (`/api/lanes/:id/shares`) — names only. */
+export type LaneShare = {
+  id: number;
+  username: string;
+  name: string;
+  sharedAt: string;
+  /** Disabled since it was shared: kept on the list, granting nothing. */
+  disabled?: boolean;
+};
 /** A login profile of a tool other than Claude (`/api/tool-profiles`) — never a token. */
 export type ToolProfileIdentity = {
   /** codex: `chatgpt` | `apikey`; omp: `credentials`. */
@@ -1057,6 +1114,10 @@ async function send<T>(path: string, options?: RequestInit): Promise<T> {
     if (res.status === 401 && body?.error?.code === "EAUTH") {
       window.dispatchEvent(new Event(AUTH_REQUIRED_EVENT));
     }
+    // DASHBOARD_TOKEN: this browser has none or a wrong one — AuthGate asks.
+    if (res.status === 401 && body?.error?.code === "EUNAUTHORIZED") {
+      window.dispatchEvent(new Event(TOKEN_REQUIRED_EVENT));
+    }
     // Server mode: a role refusal reads the same in every toast, translated.
     const message =
       body?.error?.code === "EADMIN"
@@ -1203,6 +1264,9 @@ const sendRaw = <T>(
       if (xhr.status === 401 && body.error?.code === "EAUTH") {
         window.dispatchEvent(new Event(AUTH_REQUIRED_EVENT));
       }
+      if (xhr.status === 401 && body.error?.code === "EUNAUTHORIZED") {
+        window.dispatchEvent(new Event(TOKEN_REQUIRED_EVENT));
+      }
       reject(
         Object.assign(new Error(body.error?.message || `HTTP ${xhr.status}`), {
           code: body.error?.code,
@@ -1537,7 +1601,7 @@ export const api = {
     signOutOthers: () => request<{ ended: number }>("/me/sign-out-others", { method: "POST" }),
     /** URL of this account's avatar, versioned by `avatarAt` (null = none). */
     avatarUrl: (avatarAt?: string | null) =>
-      avatarAt ? `${BASE}/me/avatar?v=${encodeURIComponent(avatarAt)}` : null,
+      avatarAt ? withToken(`${BASE}/me/avatar?v=${encodeURIComponent(avatarAt)}`) : null,
     /** PUT /api/me/avatar — one PNG, JPEG, GIF or WebP image, at most 1 MB. */
     setAvatar: (file: Blob) =>
       request<MyAccount>("/me/avatar", {
@@ -1570,7 +1634,7 @@ export const api = {
   users: {
     /** URL of one account's avatar (any signed-in account), versioned by `avatarAt` (null = none). */
     avatarUrl: (id: number, avatarAt?: string | null) =>
-      avatarAt ? `${BASE}/users/${id}/avatar?v=${encodeURIComponent(avatarAt)}` : null,
+      avatarAt ? withToken(`${BASE}/users/${id}/avatar?v=${encodeURIComponent(avatarAt)}`) : null,
     /** GET /api/users — every account with its recent usage (admin/analyst). */
     list: () =>
       request<{ users: ServerUserUsage[]; quotaDefault?: UserQuota | null }>(
@@ -1932,7 +1996,7 @@ export const api = {
     /** 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 })}`,
+      withToken(`${BASE}/sessions/${encodeURIComponent(id)}/image?${new URLSearchParams({ path })}`),
     /** GET /api/sessions/:id/file — a text file the session itself read or
      *  wrote, wherever it lies (an output outside the workspace). */
     readFile: (id: string, path: string) =>
@@ -2442,7 +2506,7 @@ export const api = {
      *
      * @returns The absolute-on-origin URL (`/api/settings/export`) to link to.
      */
-    exportData: () => `${BASE}/settings/export`,
+    exportData: () => withToken(`${BASE}/settings/export`),
     /**
      * POST /api/settings/import (multipart) - restore a bundle previously
      * produced by {@link exportData}. Idempotent and non-destructive: sessions
@@ -2451,7 +2515,7 @@ export const api = {
      *
      * Like {@link api.import.upload}, this bypasses {@link request} to send a
      * `multipart/form-data` body (field name "file") and let the browser set the
-     * boundary. No auth token is attached (local/zero-config flow).
+     * boundary. The dashboard token, when one is set, rides the header.
      *
      * @param file The `.json` export file the user selected.
      * @returns {@link ImportBackupResult} — per-table restore counts.
@@ -2460,7 +2524,11 @@ export const api = {
     importData: async (file: File): Promise<ImportBackupResult> => {
       const form = new FormData();
       form.append("file", file, file.name);
-      const res = await fetch(`${BASE}/settings/import`, { method: "POST", body: form });
+      const res = await fetch(`${BASE}/settings/import`, {
+        method: "POST",
+        body: form,
+        headers: tokenHeader(),
+      });
       if (!res.ok) {
         const body = await res.json().catch(() => ({}));
         throw new Error(body?.error?.message || `HTTP ${res.status}`);
@@ -2769,7 +2837,11 @@ export const api = {
       // Append each file under the repeated "files" field, keeping its filename.
       for (const f of files) form.append("files", f, f.name);
       // Do NOT set Content-Type manually: the browser adds the multipart boundary.
-      const res = await fetch(`${BASE}/import/upload`, { method: "POST", body: form });
+      const res = await fetch(`${BASE}/import/upload`, {
+        method: "POST",
+        body: form,
+        headers: tokenHeader(),
+      });
       if (!res.ok) {
         // Same error-shaping contract as request(), duplicated because this call
         // intentionally does not route through the JSON wrapper.
@@ -3358,8 +3430,8 @@ export const api = {
     /** One file's download URL, on a workspace or a home. */
     downloadUrl: (t: FsPlace, path: string) =>
       isHomePlace(t)
-        ? `${BASE}${fsUrl(t, "/download", new URLSearchParams({ path }))}`
-        : `${BASE}${gitUrl(t, "/download", new URLSearchParams({ path }))}`,
+        ? withToken(`${BASE}${fsUrl(t, "/download", new URLSearchParams({ path }))}`)
+        : withToken(`${BASE}${gitUrl(t, "/download", new URLSearchParams({ path }))}`),
     list: (t: FsPlace, path = "") =>
       request<FsListing>(fsUrl(t, "/list", new URLSearchParams({ path }))),
     mkdir: (t: FsPlace, path: string) =>
@@ -3421,7 +3493,7 @@ export const api = {
     zipUrl: (t: FsPlace, paths: string[]) => {
       const q = new URLSearchParams();
       for (const p of paths) q.append("p", p);
-      return `${BASE}${fsUrl(t, "/zip", q)}`;
+      return withToken(`${BASE}${fsUrl(t, "/zip", q)}`);
     },
     /**
      * Stream `file` to `path` (sub-folders made as needed), reporting upload
@@ -3601,7 +3673,11 @@ export const api = {
   /** The Artifacts hub (`/api/artifacts`, `server/lib/artifacts.js`). */
   artifacts: {
     list: (
-      params: { scope?: "mine" | "hub" | "all" | "unowned"; kind?: ArtifactKind; q?: string } = {}
+      params: {
+        scope?: "mine" | "hub" | "withme" | "all" | "unowned";
+        kind?: ArtifactKind;
+        q?: string;
+      } = {}
     ) => {
       const qs = new URLSearchParams();
       if (params.scope) qs.set("scope", params.scope);
@@ -3611,6 +3687,17 @@ export const api = {
       return request<{ items: Artifact[] }>(`/artifacts${s ? `?${s}` : ""}`);
     },
     settings: () => request<ArtifactSettings>("/artifacts/settings"),
+    setExportsEnabled: (exportsEnabled: boolean) =>
+      request<{ installsEnabled: boolean; exportsEnabled: boolean }>("/artifacts/settings", {
+        method: "PUT",
+        body: JSON.stringify({ exportsEnabled }),
+      }),
+    /** A page's viewable copy, taken now from the file it was published from (if still there). */
+    copy: (id: number) =>
+      request<{ item: Artifact }>(`/artifacts/${id}/copy`, { method: "POST", body: "{}" }),
+    /** Server mode: who the caller may share with — names only. */
+    people: () =>
+      request<{ people: { id: number; username: string; name: string }[] }>("/artifacts/people"),
     setInstallsEnabled: (installsEnabled: boolean) =>
       request<{ installsEnabled: boolean }>("/artifacts/settings", {
         method: "PUT",
@@ -3697,6 +3784,8 @@ export const api = {
         title?: string;
         description?: string;
         shared?: boolean;
+        /** Server mode: the user ids it is shared with by name (replaces the list). */
+        sharedWith?: number[];
         /** plugin only: `name@marketplace`. */
         source?: string;
         /** plugin only: the marketplace source. */
@@ -3743,14 +3832,14 @@ export const api = {
       if (path) qs.set("path", path);
       if (download) qs.set("download", "1");
       const s = qs.toString();
-      return `${BASE}/artifacts/${id}/raw${s ? `?${s}` : ""}`;
+      return withToken(`${BASE}/artifacts/${id}/raw${s ? `?${s}` : ""}`);
     },
   },
   /** The mascot's custom pets (`/api/pets`, `server/lib/pets.js`). */
   pets: {
     list: () => request<PetList>("/pets"),
     /** The pet's spritesheet (a Codex pet) or image, served raster-only. */
-    spriteUrl: (id: string) => `${BASE}/pets/${encodeURIComponent(id)}/sprite`,
+    spriteUrl: (id: string) => withToken(`${BASE}/pets/${encodeURIComponent(id)}/sprite`),
     /** POST /api/pets/import — a `.codex-pet.zip` (pet.json + spritesheet.webp). */
     importBundle: (file: File) =>
       request<{ pet: PetView }>("/pets/import", {
@@ -3833,11 +3922,7 @@ export const api = {
     job: () => request<AiToolJob | null>("/ai-tools/job"),
     /** GET /api/ai-tools/versions - npm version badges, cached a day server-side. */
     /** The server-cached icon; an <img> cannot send the bearer header, so the token rides the query. */
-    iconUrl: (id: string) => {
-      const token = dashboardToken();
-      const q = token ? `?token=${encodeURIComponent(token)}` : "";
-      return `${BASE}/ai-tools/${encodeURIComponent(id)}/icon${q}`;
-    },
+    iconUrl: (id: string) => withToken(`${BASE}/ai-tools/${encodeURIComponent(id)}/icon`),
   },
   // ──────────────────────────────── AI Proxy API ──────────────────────────────
   /** Named AI Proxy endpoints (9Router, OpenRouter, a self-hosted gateway) a
@@ -3846,6 +3931,55 @@ export const api = {
    *
    *  No response here ever carries an API key — a saved profile reports only
    *  `hasKey`. */
+  /** A LOCAL AgentHub's link to the company hub (server/routes/remote-client.js). */
+  remoteClient: {
+    /** GET /api/remote-client - enrollment and what was sent; never the token. */
+    status: () => request<RemoteClientStatus>("/remote-client"),
+    /** POST /api/remote-client/login - the password goes to the hub once, not kept. */
+    login: (body: { hub: string; username: string; password: string; deviceName?: string }) =>
+      request<RemoteClientStatus>("/remote-client/login", {
+        method: "POST",
+        body: JSON.stringify(body),
+      }),
+    /** POST /api/remote-client/logout - revoke on the hub, forget the token here. */
+    logout: () =>
+      request<{ ok: true; wasEnrolled: boolean; revokedOnHub?: boolean }>("/remote-client/logout", {
+        method: "POST",
+      }),
+    /** POST /api/remote-client/upload - send the Company-account sessions' new lines now. */
+    upload: () =>
+      request<{
+        sessions: number;
+        bytes: number;
+        errors: { sessionId: string; message: string }[];
+      }>("/remote-client/upload", { method: "POST" }),
+  },
+  /** The hub's remote-client views (server mode, server/hub/). */
+  remoteHub: {
+    /** GET /api/remote/devices - your machines; staff may name `user`. */
+    devices: (user?: number) =>
+      request<{ devices: RemoteDevice[] }>(`/remote/devices${user ? `?user=${user}` : ""}`),
+    /** POST /api/remote/devices/:id/revoke - your own password again. */
+    revoke: (id: number, password: string) =>
+      request<{ ok: true; device: RemoteDevice }>(`/remote/devices/${id}/revoke`, {
+        method: "POST",
+        body: JSON.stringify({ password }),
+      }),
+    /** GET /api/remote/sessions - Company-account sessions (device › folder). */
+    sessions: (user?: number) =>
+      request<{ sessions: RemoteSessionRow[] }>(`/remote/sessions${user ? `?user=${user}` : ""}`),
+    /** GET /api/remote/audit - who opened your sessions. */
+    audit: () =>
+      request<{
+        entries: {
+          id: number;
+          at: string;
+          sessionId: string;
+          reader: string | null;
+          readerDisplay: string | null;
+        }[];
+      }>("/remote/audit"),
+  },
   aiProxies: {
     /** GET /api/ai-proxies - every profile, the built-in `native` one first. */
     list: () => request<{ items: AiProxy[] }>("/ai-proxies"),
@@ -3901,9 +4035,12 @@ export const api = {
     /** GET /api/run/tmux - whether the `tmux` binary was found on PATH, its
      *  version, and this platform's upgrade advice when it is too old. */
     tmuxAvailable: () =>
-      request<{ available: boolean; version?: string | null; upgrade?: string | null }>(
-        "/run/tmux"
-      ),
+      request<{
+        available: boolean;
+        version?: string | null;
+        upgrade?: string | null;
+        upgradeSeverity?: "warning" | "error" | null;
+      }>("/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`; `dirs`
@@ -4138,7 +4275,7 @@ export const api = {
       qs.delete("limit");
       qs.delete("offset");
       qs.set("format", format);
-      return `${BASE}/query?${qs.toString()}`;
+      return withToken(`${BASE}/query?${qs.toString()}`);
     },
   },
 
@@ -4160,7 +4297,7 @@ export const api = {
     runs: (id: number) => request<{ runs: ReportRun[] }>(`/reports/${id}/runs`),
     /** A run's file, as a download link. */
     fileUrl: (id: number, runId: number, format: string) =>
-      `${BASE}/reports/${id}/runs/${runId}/${encodeURIComponent(format)}`,
+      withToken(`${BASE}/reports/${id}/runs/${runId}/${encodeURIComponent(format)}`),
   },
 
   // ───────────────────────────────── Webhooks API ─────────────────────────────
@@ -4722,11 +4859,11 @@ export const api = {
       request<LaneFileContent>(gitUrl(id, "/file", new URLSearchParams({ path, rev }))),
     /** URL of GET /api/lanes/:id/git/raw — an image's bytes, for an `<img>`. */
     gitRawUrl: (id: GitTarget, path: string, rev = "work") =>
-      `${BASE}${gitUrl(id, "/raw", new URLSearchParams({ path, rev }))}`,
+      withToken(`${BASE}${gitUrl(id, "/raw", new URLSearchParams({ path, rev }))}`),
     /** GET /api/lanes/:id/git/download — one working file as an attachment
      *  (any type; a plain, non-git folder too). For an `<a download>`. */
     gitDownloadUrl: (id: GitTarget, path: string) =>
-      `${BASE}${gitUrl(id, "/download", new URLSearchParams({ path }))}`,
+      withToken(`${BASE}${gitUrl(id, "/download", new URLSearchParams({ path }))}`),
     /**
      * POST /api/lanes/:id/git/upload — create `file` in the folder `dir`
      * ("" = the workspace root). Only creates: a taken name answers 409
@@ -5029,6 +5166,31 @@ export const api = {
       }),
     /** DELETE /api/lanes/:id/sources/:sourceId — a folder stays on disk; an
      *  uploaded file's AgentHub copy is deleted. */
+    /** GET /api/lanes/:id/shares — the users a workspace is shared with (server mode). */
+    shares: (id: number) =>
+      request<{ shares: LaneShare[]; canManage: boolean }>(`/workspaces/${id}/shares`),
+    /** PUT /api/lanes/:id/shares — the WHOLE list (owner or admin; `ENOTOWNER` else). */
+    setShares: (id: number, userIds: number[]) =>
+      request<{ shares: LaneShare[] }>(`/workspaces/${id}/shares`, {
+        method: "PUT",
+        body: JSON.stringify({ userIds }),
+      }),
+    /** GET /api/lanes/:id/presence — who has which pane open (server mode). */
+    presence: (id: number) =>
+      request<{ panes: Record<string, { id: number; name: string }[]> }>(
+        `/workspaces/${id}/presence`
+      ),
+    /** GET /api/lanes/:id/sessions/:sid/shares — the users one session is shared with. */
+    sessionShares: (id: number, sid: string) =>
+      request<{ shares: LaneShare[]; canManage: boolean }>(
+        `/workspaces/${id}/sessions/${encodeURIComponent(sid)}/shares`
+      ),
+    /** PUT /api/lanes/:id/sessions/:sid/shares — the WHOLE list (owner or admin). */
+    setSessionShares: (id: number, sid: string, userIds: number[]) =>
+      request<{ shares: LaneShare[] }>(
+        `/workspaces/${id}/sessions/${encodeURIComponent(sid)}/shares`,
+        { method: "PUT", body: JSON.stringify({ userIds }) }
+      ),
     removeSource: (id: number, sourceId: number) =>
       request<LaneSourcesView>(`/workspaces/${id}/sources/${sourceId}`, { method: "DELETE" }),
     /** GET /api/lanes/:id/memory — CLAUDE.md/AGENTS.md and Claude's auto memory, read-only. */
@@ -5222,6 +5384,10 @@ export interface Artifact {
   size: number | null;
   shared: boolean;
   sharedAt: string | null;
+  /** Server mode: the people it is shared with by name (only its owner or an admin gets the list). */
+  sharedWith?: { id: number; name: string }[];
+  /** Server mode: shared with the caller by name. */
+  sharedWithMe?: boolean;
   installs: number;
   /** False once its owner removed it from their library while shared: Hub only. */
   inLibrary: boolean;
@@ -5302,6 +5468,8 @@ export interface ArtifactSettings {
   serverMode: boolean;
   canShare: boolean;
   installsEnabled: boolean;
+  /** Claude panes are asked to save a viewable copy of a Doc / Slides / Design they publish. */
+  exportsEnabled?: boolean;
   canManage: boolean;
 }
 
@@ -5614,6 +5782,9 @@ export interface AiProxy {
   /** Identifier, derived from the label. Stable: a session's run row stores it. */
   name: string;
   label: string;
+  /** The remote client's Company account (`agenthub.company`) — the hub's gateway,
+   *  added by the client on an enrolled machine; never a saved profile. */
+  company?: boolean;
   /** 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;
@@ -6421,6 +6592,9 @@ export interface RunHandle {
   startedAt: string | null;
   /** Initial prompt preview (first 500 chars), null when not provided. */
   promptPreview: string | null;
+  /** Server mode: a user the workspace is shared with opened it — they pay
+   *  for it. Null/absent = the workspace's owner. */
+  startedBy?: { id: number; name: string } | null;
   tool: LaneTool;
 }
 
@@ -6805,3 +6979,59 @@ export interface PetList {
   featured: FeaturedPet[];
   sheet: { width: number; height: number; cellWidth: number; cellHeight: number };
 }
+
+/** An enrolled machine on the hub (server/hub/devices.js) — never its token. */
+export interface RemoteDevice {
+  id: number;
+  userId: number;
+  name: string;
+  createdAt: string;
+  expiresAt: string;
+  lastSeenAt: string | null;
+  lastIp: string | null;
+  revokedAt: string | null;
+  active: boolean;
+}
+
+/** A Company-account session a device registered (server/hub/remote-sessions.js). */
+export interface RemoteSessionRow {
+  sessionId: string;
+  deviceId: number;
+  deviceName: string;
+  userId: number;
+  cwd: string;
+  tool: string;
+  account: string | null;
+  registeredAt: string;
+  endedAt: string | null;
+  lastRequestAt: string | null;
+  requests: number;
+  inputTokens: number;
+  outputTokens: number;
+  cacheReadTokens: number;
+  cacheWriteTokens: number;
+  lastUploadAt: string | null;
+  purgedAt: string | null;
+  unmonitored: number;
+  title: string | null;
+}
+
+/** GET /api/remote-client — this local machine's link to the hub. */
+export interface RemoteClientStatus {
+  enrolled: boolean;
+  expired?: boolean;
+  hub?: string;
+  user?: { id: number; username: string; role: string } | null;
+  device?: { id: number; name: string; expiresAt: string } | null;
+  enrolledAt?: string | null;
+  retainDays?: number | null;
+  uploads?: {
+    sessionId: string;
+    bytes: number;
+    lastSentAt: string | null;
+    ended: number;
+    title: string | null;
+    cwd: string | null;
+    startedAt: string | null;
+  }[];
+}

client/src/lib/artifactFolders.ts

@@ -0,0 +1,150 @@
+/**
+ * @file artifactFolders — the Artifacts page's user-made folders ("Slides",
+ * "Client A", …): their names and order, and which folder each artifact sits
+ * in. One JSON value under `agenthub.artifacts.folders`, an account preference
+ * key (`lib/userPrefs.ts`, `server/routes/me.js`), so the folders are kept per
+ * ACCOUNT on the server and follow it to any browser. A viewer's arrangement,
+ * not an artifact fact: nothing about an artifact changes, other users never
+ * see these folders, and deleting a folder only takes its artifacts out of it.
+ * Same store shape as `workspaceGroups.ts`.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useSyncExternalStore } from "react";
+import { PREFS_EVENT } from "./workspaceGroups";
+
+export const ARTIFACT_FOLDERS_KEY = "agenthub.artifacts.folders";
+export const MAX_FOLDER_NAME = 60;
+
+export interface ArtifactFolder {
+  id: string;
+  name: string;
+}
+
+export interface ArtifactFolders {
+  /** In display order. */
+  folders: ArtifactFolder[];
+  /** Artifact id → folder id. An artifact absent here is in no folder. */
+  of: Record<string, string>;
+}
+
+const EMPTY: ArtifactFolders = { folders: [], of: {} };
+const listeners = new Set<() => void>();
+let cache: { raw: string | null; value: ArtifactFolders } = { raw: null, value: EMPTY };
+
+function readRaw(): string | null {
+  try {
+    return localStorage.getItem(ARTIFACT_FOLDERS_KEY);
+  } catch {
+    return null;
+  }
+}
+
+function parse(raw: string | null): ArtifactFolders {
+  if (!raw) return EMPTY;
+  try {
+    const v = JSON.parse(raw) as Partial<ArtifactFolders>;
+    const folders = (Array.isArray(v.folders) ? v.folders : []).filter(
+      (f): f is ArtifactFolder =>
+        !!f && typeof f.id === "string" && !!f.id && typeof f.name === "string"
+    );
+    const ids = new Set(folders.map((f) => f.id));
+    const of: Record<string, string> = {};
+    if (v.of && typeof v.of === "object") {
+      for (const [item, fid] of Object.entries(v.of)) {
+        if (typeof fid === "string" && ids.has(fid)) of[item] = fid;
+      }
+    }
+    return { folders, of };
+  } catch {
+    return EMPTY;
+  }
+}
+
+export function readArtifactFolders(): ArtifactFolders {
+  const raw = readRaw();
+  if (raw === cache.raw) return cache.value;
+  cache = { raw, value: parse(raw) };
+  return cache.value;
+}
+
+function write(next: ArtifactFolders): void {
+  try {
+    localStorage.setItem(ARTIFACT_FOLDERS_KEY, JSON.stringify(next));
+  } catch {
+    /* disabled storage: the folders live until the page closes */
+    cache = { raw: JSON.stringify(next), value: next };
+  }
+  listeners.forEach((l) => l());
+}
+
+function update(fn: (cur: ArtifactFolders) => ArtifactFolders): void {
+  write(fn(readArtifactFolders()));
+}
+
+const cleanName = (name: string) => name.trim().slice(0, MAX_FOLDER_NAME);
+
+/** A new folder at the end, holding `itemIds` (moved out of their old folder). Returns its id, or null for a blank name. */
+export function createFolder(name: string, itemIds: number[] = []): string | null {
+  const clean = cleanName(name);
+  if (!clean) return null;
+  const id = `f${Date.now().toString(36)}${Math.random().toString(36).slice(2, 6)}`;
+  update((cur) => {
+    const of = { ...cur.of };
+    for (const item of itemIds) of[item] = id;
+    return { folders: [...cur.folders, { id, name: clean }], of };
+  });
+  return id;
+}
+
+/** Rename; a blank name keeps the old one. */
+export function renameFolder(id: string, name: string): void {
+  const clean = cleanName(name);
+  if (!clean) return;
+  update((cur) => ({
+    ...cur,
+    folders: cur.folders.map((f) => (f.id === id ? { ...f, name: clean } : f)),
+  }));
+}
+
+/** Delete the folder; its artifacts are only taken out of it. */
+export function deleteFolder(id: string): void {
+  update((cur) => ({
+    folders: cur.folders.filter((f) => f.id !== id),
+    of: Object.fromEntries(Object.entries(cur.of).filter(([, fid]) => fid !== id)),
+  }));
+}
+
+/** Put an artifact in a folder, or (null) take it out of every folder. */
+export function moveToFolder(itemId: number, folderId: string | null): void {
+  update((cur) => {
+    const of = { ...cur.of };
+    if (folderId && cur.folders.some((f) => f.id === folderId)) of[itemId] = folderId;
+    else delete of[itemId];
+    return { ...cur, of };
+  });
+}
+
+/** The folder an artifact is in, or null. */
+export function folderOf(value: ArtifactFolders, itemId: number): ArtifactFolder | null {
+  const fid = value.of[itemId];
+  return (fid && value.folders.find((f) => f.id === fid)) || null;
+}
+
+function subscribe(l: () => void) {
+  listeners.add(l);
+  const onStorage = (e: StorageEvent) => {
+    if (e.key === ARTIFACT_FOLDERS_KEY || e.key === null) l();
+  };
+  window.addEventListener("storage", onStorage);
+  window.addEventListener(PREFS_EVENT, l);
+  return () => {
+    listeners.delete(l);
+    window.removeEventListener("storage", onStorage);
+    window.removeEventListener(PREFS_EVENT, l);
+  };
+}
+
+export function useArtifactFolders(): ArtifactFolders {
+  return useSyncExternalStore(subscribe, readArtifactFolders);
+}

client/src/lib/hiddenProfilesStorage.ts

@@ -0,0 +1,79 @@
+/**
+ * @file hiddenProfilesStorage.ts
+ * @description Claude login profiles this browser leaves out of Settings →
+ * AI tools → Profiles, kept in localStorage with the same read/validate/
+ * fallback convention as laneOrderStorage.ts. A viewer preference only: the
+ * profile files, the API and the database are untouched, and another browser
+ * still lists every profile. The status bar's Usage panel reads the same list
+ * (`HIDDEN_PROFILES_EVENT` tells it of a change in this tab), and when the
+ * live login is hidden both show the first visible profile in its place
+ * (`standIn`).
+ *
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+const STORAGE_KEY = "agenthub.cc.hiddenProfiles";
+/** Fired on `window` after this tab changes the list. */
+export const HIDDEN_PROFILES_EVENT = "agenthub:hidden-profiles";
+
+/** A profile's stable key: its account (survives a rename), else its file name. */
+export function profileKey(p: { accountUuid: string | null; name?: string }): string {
+  return p.accountUuid || p.name || "";
+}
+
+export function readHiddenProfiles(): string[] {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return [];
+    const parsed: unknown = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter((k): k is string => typeof k === "string" && k.length > 0);
+  } catch {
+    return [];
+  }
+}
+
+export function writeHiddenProfiles(keys: string[]): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(keys));
+  } catch {
+    /* ignore quota / disabled storage */
+  }
+  try {
+    window.dispatchEvent(new Event(HIDDEN_PROFILES_EVENT));
+  } catch {
+    /* no window (tests outside jsdom) */
+  }
+}
+
+/** True when `key` names a change to the hidden list (a `storage` event's key). */
+export const isHiddenProfilesKey = (key: string | null) => key === STORAGE_KEY || key === null;
+
+/**
+ * The entry shown in place of a hidden live login: the first one in `list`
+ * that is not hidden, or null when the live one is visible (or none is left).
+ */
+export function standIn<T extends { accountUuid?: string | null; name?: string }>(
+  list: T[],
+  isActive: (x: T) => boolean,
+  hidden: string[]
+): T | null {
+  const live = list.find(isActive);
+  if (
+    !live ||
+    !hidden.includes(profileKey({ accountUuid: live.accountUuid ?? null, name: live.name }))
+  )
+    return null;
+  return (
+    list.find(
+      (x) =>
+        !isActive(x) &&
+        !hidden.includes(profileKey({ accountUuid: x.accountUuid ?? null, name: x.name }))
+    ) ?? null
+  );
+}
+
+/** `keys` with `key` added when absent, removed when present. */
+export function toggleHidden(keys: string[], key: string): string[] {
+  return keys.includes(key) ? keys.filter((k) => k !== key) : [...keys, key];
+}

client/src/lib/notify.ts

@@ -9,6 +9,7 @@
  */
 
 import type { NotifSound } from "./notifPrefs";
+import { tokenHeader } from "./api";
 
 const audio = new Map<NotifSound, HTMLAudioElement>();
 
@@ -63,7 +64,7 @@ export async function notify(title: string, body: string, url?: string): Promise
   try {
     const res = await fetch("/api/push/send", {
       method: "POST",
-      headers: { "Content-Type": "application/json" },
+      headers: { "Content-Type": "application/json", ...tokenHeader() },
       body: JSON.stringify({ title, body, url }),
     });
     const result = res.ok ? await res.json().catch(() => null) : null;

client/src/lib/promptAttach.ts

@@ -17,7 +17,7 @@
  */
 
 import type { DragEvent } from "react";
-import { api } from "./api";
+import { api, withToken } from "./api";
 
 /** One attachment, shaped like `PromptImage`: what is sent, and its label. */
 export interface Attachment {
@@ -331,7 +331,12 @@ function readRecent(): Recent[] {
 }
 
 export function recentUploads(): Attachment[] {
-  return readRecent().map(({ path, name, url }) => ({ path, name, ...(url ? { url } : {}) }));
+  return readRecent().map(({ path, name, url }) => ({
+    path,
+    name,
+    // Stored without the token; added on the way out.
+    ...(url ? { url: withToken(url) } : {}),
+  }));
 }
 
 /** Remember uploads just saved, newest first; an image keeps a thumbnail

client/src/lib/push.ts

@@ -23,6 +23,9 @@
  *
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
+
+import { tokenHeader } from "./api";
+
 /* =============================================================================
  * MODULE_GUIDE — extended in-file reference (comments only; safe to read, never executed)
  * =============================================================================
@@ -138,7 +141,7 @@ export async function subscribeToPush(): Promise<void> {
   if (existing) return; // already subscribed -> idempotent no-op
 
   // Fetch the server's VAPID public key and decode it for `applicationServerKey`.
-  const res = await fetch("/api/push/vapid-public-key");
+  const res = await fetch("/api/push/vapid-public-key", { headers: tokenHeader() });
   const { publicKey } = await res.json();
 
   const subscription = await registration.pushManager.subscribe({
@@ -149,7 +152,7 @@ export async function subscribeToPush(): Promise<void> {
   // Register the endpoint + keys with the backend so it can push to this browser.
   await fetch("/api/push/subscribe", {
     method: "POST",
-    headers: { "Content-Type": "application/json" },
+    headers: { "Content-Type": "application/json", ...tokenHeader() },
     body: JSON.stringify(subscription.toJSON()), // { endpoint, keys: { p256dh, auth } }
   });
 }
@@ -179,7 +182,7 @@ export async function unsubscribeFromPush(): Promise<void> {
   // Tell the backend to forget this endpoint so it stops attempting deliveries.
   await fetch("/api/push/subscribe", {
     method: "DELETE",
-    headers: { "Content-Type": "application/json" },
+    headers: { "Content-Type": "application/json", ...tokenHeader() },
     body: JSON.stringify({ endpoint }),
   });
 }

client/src/lib/settingsSearch.ts

@@ -324,17 +324,13 @@ export const SETTINGS_INDEX: {
       "codex",
       "omp",
       "pool",
+      "pool account",
+      "automatic",
       "hồ sơ",
       "tài khoản",
     ],
     to: "#tool-profiles",
   },
-  {
-    section: "agents",
-    titleKey: "poolAccount.title",
-    keywords: ["pool", "account", "switch", "quota", "tài khoản", "pool account"],
-    to: "#pool-account",
-  },
   { section: "agents/claude-code", titleKey: "ccConfig:backups.title", keywords: ["restore"] },
   { section: "agents/codex", titleKey: "codexHooks.title" },
   { section: "agents/codex", titleKey: "codexHome.title" },

client/src/lib/terminalTheme.ts

@@ -40,7 +40,9 @@ function lighten(hex: string | undefined, amount: number): string | undefined {
 
 /**
  * Build an xterm theme from a theme's CSS variables. red/green/yellow come from
- * `--status-*`, blue from `--accent`, black/white from the surface/fg ramp.
+ * `--status-*`, blue from `--ansi-blue` when a theme sets one (its accent is
+ * not blue: Terminal's green, Sunset Cloud's coral) else `--accent`,
+ * black/white from the surface/fg ramp.
  * Magenta and cyan stay the classic ANSI hues: no token keeps that hue in every
  * theme (darcula's keyword is orange), and a program printing "magenta" should
  * get magenta.
@@ -50,7 +52,7 @@ export function buildTerminalTheme(read: VarReader): ITheme {
   const red = v("--status-danger");
   const green = v("--status-success");
   const yellow = v("--status-warning");
-  const blue = v("--accent");
+  const blue = v("--ansi-blue") ?? v("--accent");
   const magenta = "#c678dd";
   const cyan = "#56b6c2";
   return {

client/src/lib/toast.ts

@@ -2,12 +2,13 @@
  * @file toast.ts
  * @description App-wide toast queue: `toast.success(msg)` / `toast.error(msg)`
  * from anywhere, rendered once by `components/Toaster.tsx` inside live regions.
- * A success fades after a few seconds; an error stays until dismissed, because
+ * A success fades after a few seconds; an error — and an amber `warning`, for
+ * advice that is worth reading but is no failure — stays until dismissed, because
  * a message that vanishes before it is read is no message at all (WCAG 2.2.1).
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-export type ToastKind = "success" | "error" | "info";
+export type ToastKind = "success" | "error" | "info" | "warning";
 
 export interface ToastItem {
   id: number;
@@ -43,7 +44,8 @@ function push(kind: ToastKind, message: string): number {
   }
   items = next;
   emit();
-  if (kind !== "error") window.setTimeout(() => dismissToast(id), SUCCESS_MS);
+  // An error or a warning stays until closed, so its advice can be copied.
+  if (kind !== "error" && kind !== "warning") window.setTimeout(() => dismissToast(id), SUCCESS_MS);
   return id;
 }
 
@@ -59,6 +61,8 @@ export function subscribeToasts(fn: (items: ToastItem[]) => void): () => void {
 export const toast = {
   success: (message: string) => push("success", message),
   info: (message: string) => push("info", message),
+  /** Amber and sticky: worth reading, not a failure. */
+  warning: (message: string) => push("warning", message),
   error: (message: unknown) =>
     push("error", message instanceof Error ? message.message : String(message)),
 };

client/src/lib/types.ts

@@ -1240,6 +1240,8 @@ export interface ToolQuota {
   active?: boolean;
   /** The saved profile's label, when the account has one. */
   label?: string | null;
+  /** Claude: the Anthropic account the row is about (hides a profile hidden in Settings). */
+  accountUuid?: string | null;
   /** The signed-in account's email, when the tool's login names one. */
   account?: string | null;
   /** The subscription's name as the tool reports it (`pro`, `max`, `plus`, `team`…). */
@@ -1573,7 +1575,10 @@ export type AlertRuleType =
   | "status_duration"
   | "token_threshold"
   | "cost_threshold"
-  | "budget";
+  | "budget"
+  /** Server mode: a user's machine used the company account for a session it
+   *  never registered with the hub (no config). */
+  | "remote_unmonitored";
 
 /**
  * Rule-type-specific settings for an {@link AlertRule}. Which fields apply
@@ -1937,6 +1942,10 @@ export interface WSMessage {
     | "remote_source.status"
     | "remote_data.updated"
     | "lane_update"
+    /** A workspace was shared with / taken back from the users named (`userIds`). */
+    | "lane_access"
+    /** Who has a pane open changed: `{laneId, runId, users}` (pane-presence.js). */
+    | "pane_presence"
     /** One output line from a lane's profile hook, while it runs. */
     | "lane_hook_output"
     /** A lane's stack finished coming up (or failed to), with fresh facts. */
@@ -2701,6 +2710,8 @@ export interface Lane {
   owner_display_name?: string | null;
   /** When the owner's avatar was last set (`users.avatar_at`); null = none. */
   owner_avatar_at?: string | null;
+  /** Server mode: `"session"` when only sessions of it are shared with this viewer. */
+  access?: "session";
   branch: string | null;
   kind: "managed" | "adopted";
   /** The CLI this lane's runs spawn. Immutable once the lane exists. */

client/src/lib/userPrefs.ts

@@ -47,6 +47,7 @@ export const PREF_KEYS = [
   "agenthub.markdown.view",
   "agenthub.workspace.groups",
   "agenthub.changes.innerRepos",
+  "agenthub.artifacts.folders",
 ] as const;
 const SYNCED = new Set<string>(PREF_KEYS);
 const PUSH_DELAY_MS = 400;

client/src/main.tsx

@@ -73,6 +73,7 @@ import "@fontsource/maple-mono/700.css";
 import App from "./App";
 import { AuthGate } from "./components/AuthGate";
 import { i18nReady } from "./i18n";
+import { adoptTokenFromUrl } from "./lib/api";
 import "./index.css";
 
 // Deep link into the Workspace: start its (lazy) chunk now, in parallel with the
@@ -103,6 +104,9 @@ if ("serviceWorker" in navigator) {
     .catch(() => {});
 }
 
+// `agenthub start` prints a link carrying `?token=`: keep it, drop it from the URL.
+adoptTokenFromUrl();
+
 const root = document.getElementById("root");
 if (!root) throw new Error("Root element not found");
 

client/src/pages/Artifacts.tsx

@@ -53,19 +53,23 @@
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
 import {
   ChevronRight,
   FileText,
+  Folder,
+  FolderPlus,
   Globe,
   LayoutGrid,
   List,
   MoreHorizontal,
+  Pencil,
   Puzzle,
   Search,
   Sparkles,
+  Trash2,
   X,
 } from "lucide-react";
 import {
@@ -83,6 +87,8 @@ import { eventBus } from "../lib/eventBus";
 import { toast } from "../lib/toast";
 import { confirmDialog } from "../lib/confirm";
 import { useDialog } from "../hooks/useDialog";
+import { Checkbox } from "../components/Checkbox";
+import { isSubmitEnter } from "../lib/keys";
 import { copyText } from "../lib/clipboard";
 import { timeAgo } from "../lib/format";
 import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../components/ContextMenu";
@@ -95,6 +101,17 @@ import {
   splitSkillMd,
 } from "../components/artifacts/ArtifactAddPanels";
 import { MarkdownPreview, isMarkdown } from "../components/MarkdownPreview";
+import { HtmlFrame } from "../components/HtmlFrame";
+import { PdfView } from "../components/PdfView";
+import {
+  MAX_FOLDER_NAME,
+  createFolder,
+  deleteFolder,
+  folderOf,
+  moveToFolder,
+  renameFolder,
+  useArtifactFolders,
+} from "../lib/artifactFolders";
 
 // The storefront's shelf order: what installs first, what is read after.
 const SHELVES: ArtifactKind[] = ["skill", "plugin", "page", "file"];
@@ -110,22 +127,41 @@ const fmtDate = (iso: string) =>
   new Date(iso).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" });
 
 const IMAGE = /\.(png|jpe?g|gif|webp|svg)$/i;
-// What the sandboxed preview can show: the server's typed list minus PDF.
+// What the preview can show: the sandboxed types, plus PDF drawn by pdf.js.
 const PREVIEWABLE =
-  /\.(html?|md|markdown|txt|log|csv|tsv|json|ya?ml|sh|py|js|ts|png|jpe?g|gif|webp|svg|mp4|webm|mp3|wav)$/i;
+  /\.(html?|md|markdown|txt|log|csv|tsv|json|ya?ml|sh|py|js|ts|png|jpe?g|gif|webp|svg|mp4|webm|mp3|wav|pdf)$/i;
+const PDF = /\.pdf$/i;
 
 /** What a row can do, worked out once for its card, menu and detail sheet. */
+/** What a dragged artifact carries: its id, for a folder chip to take. */
+const DRAG_TYPE = "application/x-agenthub-artifact";
+const dragProps = (a: Artifact) => ({
+  draggable: true,
+  onDragStart: (e: React.DragEvent) => {
+    e.dataTransfer.setData(DRAG_TYPE, String(a.id));
+    e.dataTransfer.setData("text/plain", a.title);
+    e.dataTransfer.effectAllowed = "move";
+  },
+});
+
+/** Shared at all: with everyone (the Hub) or with chosen people. */
+const isShared = (a: Artifact) => a.shared || (a.sharedWith?.length ?? 0) > 0;
+
 function capabilities(a: Artifact) {
   const previewPath = a.kind === "skill" ? "SKILL.md" : (a.files[0]?.path ?? "");
   return {
     previewPath,
     canPreview:
       a.files.length > 0 &&
-      (a.kind === "skill" || (a.kind === "file" && PREVIEWABLE.test(previewPath))),
+      (a.kind === "skill" ||
+        ((a.kind === "file" || a.kind === "page") && PREVIEWABLE.test(previewPath))),
+    // A page with no copy yet that was published from a file: one may still
+    // be taken (`POST /:id/copy`) when someone asks to view it.
+    mayCopy: a.kind === "page" && a.files.length === 0 && !!a.source,
     canDownload: a.kind === "file" && a.files.length > 0,
     installable: a.kind === "skill" || a.kind === "plugin",
     // Its owner removed it from their library; it lives on in the Hub only.
-    hubOnly: a.mine && a.shared && !a.inLibrary,
+    hubOnly: a.mine && isShared(a) && !a.inLibrary,
   };
 }
 
@@ -150,14 +186,25 @@ const footAction =
 export function Artifacts() {
   const { t } = useTranslation("artifacts");
   const [settings, setSettings] = useState<ArtifactSettings | null>(null);
-  const [tab, setTab] = useState<"all" | "mine" | "hub" | "unowned">("all");
+  const [tab, setTab] = useState<"all" | "mine" | "hub" | "withme" | "unowned">("all");
   const { isAdmin } = usePermissions();
   // Server mode: rows nobody owns — every one for an admin, those offered to you otherwise.
   const [unownedCount, setUnownedCount] = useState(0);
   const [users, setUsers] = useState<ServerUserUsage[]>([]);
   const [kind, setKind] = useState<ArtifactKind | "">("");
   const [q, setQ] = useState("");
-  const [items, setItems] = useState<Artifact[] | null>(null);
+  const [loaded, setItems] = useState<Artifact[] | null>(null);
+  // Folders are this account's own arrangement (`lib/artifactFolders.ts`).
+  const folders = useArtifactFolders();
+  const [folder, setFolder] = useState<string>("");
+  const [sharing, setSharing] = useState<Artifact | null>(null);
+  const [moving, setMoving] = useState<Artifact | null>(null);
+  const activeFolder = folders.folders.some((f) => f.id === folder) ? folder : "";
+  const items = useMemo(
+    () =>
+      loaded && activeFolder ? loaded.filter((a) => folders.of[a.id] === activeFolder) : loaded,
+    [loaded, activeFolder, folders]
+  );
   const [adding, setAdding] = useState<ArtifactKind | null>(null);
   const [addMenu, setAddMenu] = useState(false);
   const addMenuRef = useRef<HTMLDivElement>(null);
@@ -261,12 +308,16 @@ export function Artifacts() {
 
   const server = !!settings?.serverMode;
 
+  // Share opens the dialog: everyone (the Hub), chosen people, or nobody. A
+  // Hub-only row (its owner already removed it from their library) is
+  // deleted by unsharing it, so its one action is that, behind a confirm.
   const share = async (a: Artifact) => {
-    // A Hub-only row (its owner already removed it from their library) is
-    // deleted by unsharing it, so that asks first.
+    if (!capabilities(a).hubOnly) {
+      setDetailId(null);
+      setSharing(a);
+      return;
+    }
     if (
-      a.shared &&
-      !a.inLibrary &&
       !(await confirmDialog({
         title: t("hubRemoveTitle", { title: a.title }),
         message: t("hubRemoveBody"),
@@ -275,8 +326,8 @@ export function Artifacts() {
     )
       return;
     try {
-      await api.artifacts.update(a.id, { shared: !a.shared });
-      toast.success(t(a.shared ? "unshareDone" : "shareDone"));
+      await api.artifacts.update(a.id, { shared: false, sharedWith: [] });
+      toast.success(t("unshareDone"));
       load();
     } catch (err) {
       toast.error(err);
@@ -495,6 +546,10 @@ export function Artifacts() {
   const actionsFor = (a: Artifact): CardActions => ({
     onOpen: () => setDetailId(a.id),
     onShare: () => void share(a),
+    onMove: () => {
+      setDetailId(null);
+      setMoving(a);
+    },
     onReshare: () => void reshare(a),
     onRename: () => {
       setDetailId(null);
@@ -506,7 +561,20 @@ export function Artifacts() {
     onUninstall: () => void uninstall(a),
     onPreview: (path) => {
       setDetailId(null);
-      setPreview({ item: a, path });
+      if (path || !capabilities(a).mayCopy) {
+        setPreview({ item: a, path });
+        return;
+      }
+      // An older page: take its copy now, then show it.
+      api.artifacts
+        .copy(a.id)
+        .then(({ item }) => {
+          const c = capabilities(item);
+          if (c.canPreview) setPreview({ item, path: c.previewPath });
+          else toast.error(t("page.noCopy"));
+          load();
+        })
+        .catch((err) => toast.error(err));
     },
   });
 
@@ -609,20 +677,21 @@ export function Artifacts() {
   // shared (only an admin is shown those) gets a section of its own, so
   // "Shared by others" never holds a private row.
   const halves =
-    server && items && tab !== "unowned"
+    server && items && tab !== "unowned" && tab !== "withme"
       ? [
           {
             key: `${tab}.others`,
-            rows: items.filter((a) => !a.mine && (a.shared || tab === "mine")),
+            rows: items.filter((a) => !a.mine && (a.shared || a.sharedWithMe || tab === "mine")),
           },
           {
             key: "unshared",
-            rows: tab === "mine" ? [] : items.filter((a) => !a.mine && !a.shared),
+            rows:
+              tab === "mine" ? [] : items.filter((a) => !a.mine && !a.shared && !a.sharedWithMe),
           },
           { key: `${tab}.own`, rows: items.filter((a) => a.mine) },
         ].filter((h) => h.rows.length > 0 || h.key !== "unshared")
       : null;
-  const detail = detailId === null ? null : (items?.find((a) => a.id === detailId) ?? null);
+  const detail = detailId === null ? null : (loaded?.find((a) => a.id === detailId) ?? null);
 
   return (
     <div className="animate-fade-in space-y-5" data-testid="artifacts-page">
@@ -682,7 +751,7 @@ export function Artifacts() {
           className="-mb-1 flex gap-1 overflow-x-auto border-b border-border"
           data-testid="artifacts-scope"
         >
-          {(["all", "mine", "hub"] as const).map((v) => (
+          {(["all", "mine", "hub", "withme"] as const).map((v) => (
             <button
               key={v}
               type="button"
@@ -773,12 +842,31 @@ export function Artifacts() {
         )}
       </div>
 
+      <FolderBar
+        folders={folders.folders}
+        active={activeFolder}
+        counts={(id) => (loaded ?? []).filter((a) => folders.of[a.id] === id).length}
+        onPick={setFolder}
+        onDropItem={(id, fid) => {
+          moveToFolder(id, fid);
+          const f = fid ? folders.folders.find((x) => x.id === fid) : null;
+          toast.success(f ? t("folders.moved", { name: f.name }) : t("folders.takenOut"));
+        }}
+      />
+
       {items === null ? (
         <SkeletonGrid label={t("loading")} />
       ) : items.length === 0 && tab === "unowned" ? (
         <p className="rounded-lg border border-dashed border-border px-4 py-6 text-center text-xs text-fg-muted">
           {t("unowned.empty")}
         </p>
+      ) : items.length === 0 && (tab === "withme" || activeFolder) ? (
+        <p
+          className="rounded-lg border border-dashed border-border px-4 py-6 text-center text-xs text-fg-muted"
+          data-testid="artifacts-empty-filtered"
+        >
+          {t(activeFolder ? "folders.empty" : "withme.empty")}
+        </p>
       ) : items.length === 0 ? (
         <EmptyState
           hub={tab === "hub"}
@@ -846,6 +934,24 @@ export function Artifacts() {
       )}
       {adding && <AddDialog kind={adding} onClose={() => setAdding(null)} onAdded={load} />}
       {preview && <PreviewDialog {...preview} onClose={() => setPreview(null)} />}
+      {sharing && (
+        <ShareDialog
+          item={sharing}
+          onClose={() => setSharing(null)}
+          onSaved={() => {
+            setSharing(null);
+            load();
+          }}
+        />
+      )}
+      {moving && (
+        <MoveDialog
+          item={moving}
+          current={folderOf(folders, moving.id)?.id ?? null}
+          folders={folders.folders}
+          onClose={() => setMoving(null)}
+        />
+      )}
       {renaming && (
         <RenameDialog
           item={renaming}
@@ -1131,6 +1237,8 @@ function EmptyState({
 type CardActions = {
   onOpen: () => void;
   onShare: () => void;
+  /** Put it in one of the viewer's own folders. */
+  onMove: () => void;
   /** A skill of your own: its newest version, shared (installers get Update). */
   onReshare: () => void;
   onRename: () => void;
@@ -1191,6 +1299,20 @@ function PrimaryAction({
         {t("install")}
       </button>
     );
+  // A page with a copy is viewed here, by anyone it is shared with; the
+  // claude.ai link (⋯ → Open) needs the publishing account.
+  if (a.kind === "page" && (c.canPreview || c.mayCopy))
+    return (
+      <button
+        type="button"
+        className={smallPrimary}
+        onClick={() => onPreview(c.canPreview ? c.previewPath : "")}
+        title={t("page.viewHint")}
+        data-testid="artifact-view"
+      >
+        {t("page.view")}
+      </button>
+    );
   if (a.kind === "page" && a.url)
     return (
       <a href={a.url} target="_blank" rel="noopener noreferrer" className={smallPrimary}>
@@ -1251,11 +1373,25 @@ function Badges({ item: a, server }: { item: Artifact; server: boolean }) {
           {t("hubOnly")}
         </span>
       )}
-      {server && !a.shared && (
+      {server && !isShared(a) && !a.sharedWithMe && (
         <span className="badge shrink-0" title={t("privateHint")}>
           {t("private")}
         </span>
       )}
+      {server && !a.shared && (a.sharedWith?.length ?? 0) > 0 && (
+        <span
+          className="badge shrink-0 border-accent/30 bg-accent-muted text-accent"
+          title={a.sharedWith!.map((p) => p.name).join(", ")}
+          data-testid={`shared-people-${a.id}`}
+        >
+          {t("sharedWithCount", { count: a.sharedWith!.length })}
+        </span>
+      )}
+      {server && !a.shared && a.sharedWithMe && (
+        <span className="badge shrink-0 border-accent/30 bg-accent-muted text-accent">
+          {t("sharedWithMe")}
+        </span>
+      )}
       {a.auto && (
         <span className="badge shrink-0" title={t("autoHint")}>
           {t("auto")}
@@ -1316,6 +1452,7 @@ function ArtifactMenu({
   menu,
   onOpen,
   onShare,
+  onMove,
   onReshare,
   onRename,
   onDelete,
@@ -1369,12 +1506,13 @@ function ArtifactMenu({
           {t("uninstall")}
         </MenuItem>
       )}
+      <MenuItem onSelect={pick(onMove)}>{t("folders.move")}</MenuItem>
       {a.canChange && (
         <>
           <MenuSeparator />
           {server && (
             <MenuItem danger={hubOnly} onSelect={pick(onShare)}>
-              {t(hubOnly ? "hubRemove" : a.shared ? "unshare" : "share")}
+              {t(hubOnly ? "hubRemove" : isShared(a) ? "sharing" : "share")}
             </MenuItem>
           )}
           {server && a.kind === "skill" && (
@@ -1419,6 +1557,7 @@ function ArtifactRow({ inPack, ...props }: ItemProps & { inPack?: boolean }) {
       className="flex items-center gap-3 px-3 py-2.5 transition-colors hover:bg-surface-2/60"
       data-testid={`artifact-${a.id}`}
       onContextMenu={(e) => menu.open(e, null)}
+      {...dragProps(a)}
     >
       <KindIcon kind={a.kind} />
       <button
@@ -1473,6 +1612,7 @@ function ArtifactCard({ as = "li", ...props }: ItemProps & { as?: "li" | "div" }
       className="card flex flex-col gap-2.5 p-4 transition-colors hover:border-border-light"
       data-testid={`artifact-${a.id}`}
       onContextMenu={(e: React.MouseEvent) => menu.open(e, null)}
+      {...dragProps(a)}
     >
       <div className="flex items-start gap-3">
         <KindIcon kind={a.kind} />
@@ -1567,9 +1707,18 @@ function DetailDialog({
               {server && a.owner && !a.mine ? t("by", { name: a.owner }) : t(`kindOne.${a.kind}`)}
               {a.source ? ` · ${a.source}` : ""}
             </p>
-            {a.shared && (
-              <span className="badge mt-2 border-accent/30 bg-accent-muted text-accent">
-                {t(hubOnly ? "hubOnly" : "shared")}
+            {(isShared(a) || a.sharedWithMe) && (
+              <span
+                className="badge mt-2 border-accent/30 bg-accent-muted text-accent"
+                title={a.sharedWith?.map((p) => p.name).join(", ") || undefined}
+              >
+                {hubOnly
+                  ? t("hubOnly")
+                  : a.shared
+                    ? t("shared")
+                    : a.sharedWithMe
+                      ? t("sharedWithMe")
+                      : t("sharedWithCount", { count: a.sharedWith?.length ?? 0 })}
               </span>
             )}
             <div className="mt-3 flex flex-wrap items-center gap-2">
@@ -1695,7 +1844,7 @@ function DetailDialog({
           <div className="flex flex-wrap items-center gap-2 border-t border-border pt-4">
             {server && (
               <button type="button" className={secondary} onClick={onShare}>
-                {t(hubOnly ? "hubRemove" : a.shared ? "unshare" : "share")}
+                {t(hubOnly ? "hubRemove" : isShared(a) ? "sharing" : "share")}
               </button>
             )}
             {server && a.kind === "skill" && (
@@ -2107,6 +2256,422 @@ function RenameDialog({
   );
 }
 
+/** Who an artifact is shared with: everyone (the Hub), chosen people, or nobody. */
+function ShareDialog({
+  item,
+  onClose,
+  onSaved,
+}: {
+  item: Artifact;
+  onClose: () => void;
+  onSaved: () => void;
+}) {
+  const { t } = useTranslation("artifacts");
+  const initialPeople = (item.sharedWith ?? []).map((p) => p.id);
+  const [mode, setMode] = useState<"nobody" | "everyone" | "people">(
+    item.shared ? "everyone" : "people"
+  );
+  const [picked, setPicked] = useState<Set<number>>(new Set(initialPeople));
+  const [people, setPeople] = useState<{ id: number; username: string; name: string }[] | null>(
+    null
+  );
+  const [filter, setFilter] = useState("");
+  const [busy, setBusy] = useState(false);
+  useEffect(() => {
+    api.artifacts
+      .people()
+      .then((r) => setPeople(r.people))
+      .catch((err) => {
+        setPeople([]);
+        toast.error(err);
+      });
+  }, []);
+  const shown = (people ?? []).filter((p) => {
+    const f = filter.trim().toLowerCase();
+    return !f || p.name.toLowerCase().includes(f) || p.username.toLowerCase().includes(f);
+  });
+  const toggle = (id: number, on: boolean) =>
+    setPicked((cur) => {
+      const next = new Set(cur);
+      if (on) next.add(id);
+      else next.delete(id);
+      return next;
+    });
+  const target =
+    mode === "everyone"
+      ? { shared: true, sharedWith: [] as number[] }
+      : mode === "people"
+        ? { shared: false, sharedWith: [...picked] }
+        : { shared: false, sharedWith: [] as number[] };
+  const blocked = busy || (mode === "people" && picked.size === 0);
+  const save = async () => {
+    if (blocked) return;
+    // Out of its owner's library, a row that nobody can see any more is
+    // deleted: that asks first.
+    const goneForGood =
+      item.mine && !item.inLibrary && !target.shared && target.sharedWith.length === 0;
+    if (
+      goneForGood &&
+      !(await confirmDialog({
+        title: t("hubRemoveTitle", { title: item.title }),
+        message: t("hubRemoveBody"),
+        confirmLabel: t("hubRemove"),
+      }))
+    )
+      return;
+    setBusy(true);
+    try {
+      await api.artifacts.update(item.id, target);
+      toast.success(
+        target.shared
+          ? t("shareDone")
+          : target.sharedWith.length
+            ? t("sharePeopleDone", { count: target.sharedWith.length })
+            : t("unshareDone")
+      );
+      onSaved();
+    } catch (err) {
+      toast.error(err);
+    } finally {
+      setBusy(false);
+    }
+  };
+  const radio = (v: typeof mode, label: string, hint: string) => (
+    <label className="flex cursor-pointer items-start gap-2 rounded-md p-2 hover:bg-surface-2">
+      <input
+        type="radio"
+        name="share-mode"
+        className="mt-1"
+        checked={mode === v}
+        onChange={() => setMode(v)}
+      />
+      <span>
+        <span className="block text-sm text-fg-primary">{label}</span>
+        <span className="block text-[11px] text-fg-muted">{hint}</span>
+      </span>
+    </label>
+  );
+  return (
+    <Modal title={t("shareTitle", { title: item.title })} onClose={onClose}>
+      <div className="space-y-3" data-testid="share-dialog">
+        <div role="radiogroup" aria-label={t("shareTitle", { title: item.title })}>
+          {radio("people", t("shareMode.people"), t("shareMode.peopleHint"))}
+          {radio("everyone", t("shareMode.everyone"), t("shareMode.everyoneHint"))}
+          {(item.shared || initialPeople.length > 0) &&
+            radio("nobody", t("shareMode.nobody"), t("shareMode.nobodyHint"))}
+        </div>
+        {mode === "people" && (
+          <div className="space-y-2">
+            <input
+              className="input w-full text-sm"
+              placeholder={t("sharePeople.search")}
+              aria-label={t("sharePeople.search")}
+              value={filter}
+              onChange={(e) => setFilter(e.target.value)}
+            />
+            {people === null ? (
+              <p className="text-xs text-fg-muted">{t("loading")}</p>
+            ) : shown.length === 0 ? (
+              <p className="text-xs text-fg-muted">{t("sharePeople.none")}</p>
+            ) : (
+              <ul
+                className="max-h-64 space-y-0.5 overflow-y-auto rounded-lg border border-border p-1"
+                data-testid="share-people"
+              >
+                {shown.map((p) => (
+                  <li key={p.id} className="rounded-md px-2 py-1 hover:bg-surface-2">
+                    <Checkbox
+                      checked={picked.has(p.id)}
+                      onChange={(v) => toggle(p.id, v)}
+                      label={
+                        <span className="text-sm text-fg-primary">
+                          {p.name}
+                          {p.name !== p.username && (
+                            <span className="ml-1 text-xs text-fg-muted">@{p.username}</span>
+                          )}
+                        </span>
+                      }
+                    />
+                  </li>
+                ))}
+              </ul>
+            )}
+            <p className="text-[11px] text-fg-muted">
+              {t("sharePeople.picked", { count: picked.size })}
+            </p>
+          </div>
+        )}
+        <div className="flex justify-end gap-2 pt-1">
+          <button type="button" className="btn-ghost text-sm" onClick={onClose} disabled={busy}>
+            {t("form.cancel")}
+          </button>
+          <button
+            type="button"
+            className="btn-primary text-sm"
+            disabled={blocked}
+            onClick={() => void save()}
+          >
+            {t("shareSave")}
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+/** Put one artifact in one of the viewer's own folders (or a new one), or take it out. */
+function MoveDialog({
+  item,
+  current,
+  folders,
+  onClose,
+}: {
+  item: Artifact;
+  current: string | null;
+  folders: { id: string; name: string }[];
+  onClose: () => void;
+}) {
+  const { t } = useTranslation("artifacts");
+  const [name, setName] = useState("");
+  const pick = (id: string | null) => {
+    moveToFolder(item.id, id);
+    onClose();
+  };
+  const create = () => {
+    const id = createFolder(name, [item.id]);
+    if (id) onClose();
+  };
+  return (
+    <Modal title={t("folders.moveTitle", { title: item.title })} onClose={onClose}>
+      <div className="space-y-3" data-testid="move-dialog">
+        <p className="text-[11px] text-fg-muted">{t("folders.private")}</p>
+        {folders.length > 0 && (
+          <ul className="space-y-0.5">
+            {folders.map((f) => (
+              <li key={f.id}>
+                <button
+                  type="button"
+                  aria-pressed={current === f.id}
+                  onClick={() => pick(f.id)}
+                  className={`flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm hover:bg-surface-2 ${
+                    current === f.id ? "text-accent" : "text-fg-primary"
+                  }`}
+                >
+                  <Folder className="h-3.5 w-3.5 shrink-0" />
+                  <span className="truncate">{f.name}</span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+        <div className="flex gap-2">
+          <input
+            className="input min-w-0 flex-1 text-sm"
+            placeholder={t("folders.newName")}
+            aria-label={t("folders.newName")}
+            maxLength={MAX_FOLDER_NAME}
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            onKeyDown={(e) => {
+              if (isSubmitEnter(e)) {
+                e.preventDefault();
+                create();
+              }
+            }}
+          />
+          <button
+            type="button"
+            className="btn-secondary text-sm"
+            disabled={!name.trim()}
+            onClick={create}
+          >
+            <FolderPlus className="h-3.5 w-3.5" />
+            {t("folders.createHere")}
+          </button>
+        </div>
+        <div className="flex justify-between gap-2 pt-1">
+          {current ? (
+            <button type="button" className="btn-ghost text-sm" onClick={() => pick(null)}>
+              {t("folders.takeOut")}
+            </button>
+          ) : (
+            <span />
+          )}
+          <button type="button" className="btn-ghost text-sm" onClick={onClose}>
+            {t("form.cancel")}
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+/** The viewer's folders as filter chips, with new / rename / delete. */
+function FolderBar({
+  folders,
+  active,
+  counts,
+  onPick,
+  onDropItem,
+}: {
+  folders: { id: string; name: string }[];
+  active: string;
+  counts: (id: string) => number;
+  onPick: (id: string) => void;
+  /** An artifact dropped on a chip: that folder, or (null, "All folders") none. */
+  onDropItem: (itemId: number, folderId: string | null) => void;
+}) {
+  const { t } = useTranslation("artifacts");
+  // The chip an artifact is dragged over ("" = All folders), lit as a target.
+  const [over, setOver] = useState<string | null>(null);
+  const dropProps = (target: string) => ({
+    onDragOver: (e: React.DragEvent) => {
+      if (!e.dataTransfer.types.includes(DRAG_TYPE)) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+      if (over !== target) setOver(target);
+    },
+    onDragLeave: () => setOver((cur) => (cur === target ? null : cur)),
+    onDrop: (e: React.DragEvent) => {
+      setOver(null);
+      const id = Number(e.dataTransfer.getData(DRAG_TYPE));
+      if (!Number.isInteger(id) || id <= 0) return;
+      e.preventDefault();
+      onDropItem(id, target || null);
+    },
+  });
+  const lit = (target: string) => (over === target ? " ring-2 ring-accent bg-accent-muted" : "");
+  // `new`: naming a new folder; a folder id: renaming that one.
+  const [editing, setEditing] = useState<"new" | string | null>(null);
+  const [name, setName] = useState("");
+  const begin = (what: "new" | string, start = "") => {
+    setEditing(what);
+    setName(start);
+  };
+  const commit = () => {
+    if (editing === "new") {
+      const id = createFolder(name);
+      if (id) onPick(id);
+    } else if (editing) renameFolder(editing, name);
+    setEditing(null);
+  };
+  const remove = async (f: { id: string; name: string }) => {
+    const ok = await confirmDialog({
+      title: t("folders.deleteTitle", { name: f.name }),
+      message: t("folders.deleteBody"),
+      confirmLabel: t("folders.delete"),
+    });
+    if (!ok) return;
+    deleteFolder(f.id);
+    if (active === f.id) onPick("");
+  };
+  const chip = (on: boolean) =>
+    `inline-flex h-7 items-center gap-1.5 rounded-full border px-3 text-xs whitespace-nowrap transition-colors ${
+      on
+        ? "border-accent/40 bg-accent-muted text-fg-primary"
+        : "border-border text-fg-secondary hover:border-border-light hover:bg-surface-2 hover:text-fg-primary"
+    }`;
+  const count = (n: number, on: boolean) => (
+    <span
+      className={`min-w-[1.25rem] rounded-full px-1.5 text-center text-[10px] leading-4 tabular-nums ${
+        on ? "bg-accent/20 text-accent" : "bg-surface-3 text-fg-muted"
+      }`}
+    >
+      {n}
+    </span>
+  );
+  const iconBtn =
+    "inline-flex h-7 w-7 items-center justify-center rounded-full text-fg-muted transition-colors hover:bg-surface-3 hover:text-fg-primary";
+  return (
+    <div className="flex flex-wrap items-center gap-1.5" data-testid="artifact-folders">
+      <button
+        type="button"
+        aria-pressed={!active}
+        className={chip(!active) + lit("")}
+        onClick={() => onPick("")}
+        title={folders.length ? t("folders.dropOutHint") : undefined}
+        {...dropProps("")}
+      >
+        <Folder className="h-3.5 w-3.5" aria-hidden />
+        {t("folders.all")}
+      </button>
+      {folders.map((f) => {
+        const on = active === f.id;
+        return editing === f.id ? null : (
+          <span key={f.id} className="inline-flex items-center">
+            <button
+              type="button"
+              aria-pressed={on}
+              className={chip(on) + lit(f.id)}
+              onClick={() => onPick(f.id)}
+              onDoubleClick={() => begin(f.id, f.name)}
+              title={t("folders.dropHint")}
+              data-testid={`artifact-folder-${f.id}`}
+              {...dropProps(f.id)}
+            >
+              <span className="max-w-[12rem] truncate">{f.name}</span>
+              {count(counts(f.id), on)}
+            </button>
+            {on && !editing && (
+              <>
+                <button
+                  type="button"
+                  className={`${iconBtn} ml-0.5`}
+                  onClick={() => begin(f.id, f.name)}
+                  title={t("folders.rename")}
+                  aria-label={t("folders.rename")}
+                >
+                  <Pencil className="h-3.5 w-3.5" />
+                </button>
+                <button
+                  type="button"
+                  className={`${iconBtn} hover:!text-status-danger`}
+                  onClick={() => void remove(f)}
+                  title={t("folders.delete")}
+                  aria-label={t("folders.delete")}
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                </button>
+              </>
+            )}
+          </span>
+        );
+      })}
+      {editing ? (
+        <input
+          className="input h-7 w-44 rounded-full px-3 text-xs"
+          autoFocus
+          maxLength={MAX_FOLDER_NAME}
+          aria-label={t(editing === "new" ? "folders.newName" : "folders.rename")}
+          placeholder={t("folders.newName")}
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          onBlur={commit}
+          onKeyDown={(e) => {
+            if (isSubmitEnter(e)) {
+              e.preventDefault();
+              commit();
+            } else if (e.key === "Escape") {
+              e.preventDefault();
+              setEditing(null);
+            }
+          }}
+        />
+      ) : (
+        <button
+          type="button"
+          className="inline-flex h-7 items-center gap-1 rounded-full border border-dashed border-border px-3 text-xs text-fg-muted transition-colors hover:border-accent/50 hover:text-fg-primary"
+          onClick={() => begin("new")}
+          data-testid="artifact-folder-new"
+        >
+          <FolderPlus className="h-3.5 w-3.5" />
+          {t("folders.new")}
+        </button>
+      )}
+    </div>
+  );
+}
+
 // Text the dashboard renders itself: Markdown through `MarkdownPreview`, the
 // rest as code. A sandboxed iframe would draw a text/plain body with the
 // browser's own colours — light text on our white frame in a dark theme.
@@ -2287,6 +2852,23 @@ function PreviewDialog({
                   <video src={url} controls className="max-h-full max-w-full" />
                 )}
               </div>
+            ) : PDF.test(current) ? (
+              <PdfView url={url} title={current} />
+            ) : html && item.kind === "page" && !/\.svg$/i.test(current) ? (
+              // A page's copy is an app: it runs, in the chat artifacts'
+              // sandbox (scripts, never the dashboard's origin), with its
+              // own files read from the copy.
+              <HtmlFrame
+                path={current}
+                title={item.title}
+                className="h-full w-full"
+                testId="artifact-page-frame"
+                fetchFile={(rel) =>
+                  fetch(api.artifacts.rawUrl(item.id, rel), { credentials: "same-origin" }).then(
+                    (r) => (r.ok ? r.blob() : Promise.reject(new Error(String(r.status))))
+                  )
+                }
+              />
             ) : IMAGE.test(current) && !html ? (
               <img src={url} alt={current} className="h-full w-full object-contain p-4" />
             ) : (

client/src/pages/SettingsHub.tsx

@@ -74,7 +74,7 @@ import { SessionDefaultsSettings } from "../components/settings/SessionDefaultsS
 import { ArtifactsHubSettings } from "../components/settings/ArtifactsHubSettings";
 import { MemberPolicySettings } from "../components/settings/MemberPolicySettings";
 import { ToolProfilesSettings } from "../components/settings/ToolProfilesSettings";
-import { PoolAccountSettings } from "../components/settings/PoolAccountSettings";
+import { CompanyHubSettings } from "../components/settings/CompanyHubSettings";
 import { OmpSharingSettings } from "../components/settings/OmpSharingSettings";
 import { PricingSettings } from "../components/settings/PricingSettings";
 import { WorktreeVisibilitySettings } from "../components/settings/WorktreeVisibilitySettings";
@@ -254,7 +254,7 @@ export function SettingsHub({ section }: { section?: string } = {}) {
     };
   }, [location.key, location.hash]);
 
-  const { isAdmin, local, seesAll } = usePermissions();
+  const { isAdmin, local } = usePermissions();
   const authState = useAuth().state;
   const signedIn = authState.mode === "server" && !!authState.user;
   const enabled = (id: string) => aiTools.byId(id)?.enabled !== false;
@@ -309,17 +309,18 @@ export function SettingsHub({ section }: { section?: string } = {}) {
           <AgentInstructionsSettings />
           <SessionDefaultsSettings />
           <AiToolsSettings settingsHref={toolHref} />
-          {/* Every AI tool's login profiles, linked to the account pool: the
-              host's logins, a staff-only read (a developer would get 403s). */}
-          {seesAll && <ToolProfilesSettings />}
-          {/* Every user's own pick of a pool account (server mode; hides itself). */}
-          <PoolAccountSettings />
+          {/* Every AI tool's login profiles with the pool accounts the user may
+              run on as rows of the same list: staff see the host's logins too,
+              a developer only the pool rows (it hides itself with none). */}
+          <ToolProfilesSettings />
           {/* The Hub's install switch: server mode, an admin's (it hides itself). */}
           <ArtifactsHubSettings />
           {/* The host's omp login for members: server mode + S3, an admin's. */}
           <OmpSharingSettings />
           {/* Members' test runs on this box: server mode + S3, an admin's. */}
           <MemberPolicySettings />
+          {/* The company hub: enroll this machine (local) / your machines (hub). */}
+          <CompanyHubSettings />
         </div>
       ),
     },

client/src/pages/Workspace.tsx

@@ -71,7 +71,7 @@ import {
   ChevronRight,
   GitBranch,
 } from "lucide-react";
-import { api, type GitSource } from "../lib/api";
+import { api, withToken, type GitSource } from "../lib/api";
 import { useInnerReposMode } from "../lib/innerReposPref";
 import { usePermissions } from "../components/AuthGate";
 import type {
@@ -661,16 +661,29 @@ export function Workspace() {
   const { local } = usePermissions();
   const [searchParams, setSearchParams] = useSearchParams();
 
-  // The server's tmux is older than this platform needs (psmux < 3.4.0 on
-  // Windows, tmux < 3.7 elsewhere): say how to upgrade it, until it is.
-  // Sticky (an error toast) so the command can be copied. An older server or
-  // no answer says nothing.
+  // The server's tmux is older than this platform needs: say how to upgrade
+  // it. An old psmux (Windows) stalls terminals — an error, every visit. An old
+  // tmux only lacks the pane scrollbar — an amber warning, shown once per
+  // version in this browser (closing it is for good). Both sticky, so the
+  // command can be copied. An older server or no answer says nothing.
   useEffect(() => {
     let live = true;
     (async () => {
       try {
-        const { upgrade } = await api.run.tmuxAvailable();
-        if (live && upgrade) toast.error(tLanes("tmuxUpgrade", { advice: upgrade }));
+        const { upgrade, upgradeSeverity } = await api.run.tmuxAvailable();
+        if (!live || !upgrade) return;
+        if (upgradeSeverity === "warning") {
+          const SEEN = "agenthub.tmuxUpgrade.seen";
+          try {
+            if (localStorage.getItem(SEEN) === upgrade) return;
+            localStorage.setItem(SEEN, upgrade);
+          } catch {
+            /* storage blocked: show it */
+          }
+          toast.warning(tLanes("tmuxUpgradeOptional", { advice: upgrade }));
+          return;
+        }
+        toast.error(tLanes("tmuxUpgrade", { advice: upgrade }));
       } catch {
         /* nothing to say */
       }
@@ -1002,8 +1015,11 @@ export function Workspace() {
   const showRoot = !inner || inner.root || repos.length === 0;
   // A file the chat asks for lies in the inner repo whose path prefixes it.
   const repoOf = (p: string) => repos.find((r) => p.startsWith(`${r.path}/`));
-  // Sections folded shut ("" = the workspace folder, else the folder's id).
-  const [foldedSources, setFoldedSources] = useState<Set<string>>(new Set());
+  // The stacked sections are an accordion: ONE is open at a time ("" = the
+  // workspace folder, `repo:<path>` an inner repo, else the folder's id).
+  // `undefined` = the first section (also when the open one is gone); `null`
+  // = every section folded.
+  const [openSource, setOpenSource] = useState<string | null | undefined>(undefined);
   // Right-click on a section: close extra folders — which REMOVES them from the
   // workspace (the folder stays on disk). The workspace folder never closes.
   const sourceCtx = useContextMenu<string>();
@@ -1062,11 +1078,7 @@ export function Workspace() {
       // Its path is the workspace folder's: unfold that section (or the
       // inner repo's that holds it).
       const repo = repoOfRef.current(path);
-      setFoldedSources((prev) => {
-        const next = new Set(prev);
-        next.delete(repo ? `repo:${repo.path}` : "");
-        return next;
-      });
+      setOpenSource(repo ? `repo:${repo.path}` : "");
       setChangesOpen(true);
       setChangesRequest((r) => ({ path, nonce: (r?.nonce ?? 0) + 1 }));
     };
@@ -1270,8 +1282,12 @@ export function Workspace() {
   // editor: no page padding, no cards, dividers between its regions.
   const sessionView = !!currentLane && !home;
   previewHostRef.current = sessionView;
+  // The home is locked to the viewport too: the Changes panel sits beside it
+  // at full height, and the home scrolls inside its own column.
   const viewportLocked =
-    sessionView || (!home && (paneHasActiveRun || (!!currentLane && changesOpen && changesFull)));
+    sessionView ||
+    (home && !!currentLane) ||
+    (!home && (paneHasActiveRun || (!!currentLane && changesOpen && changesFull)));
 
   const handleLaneAction = async (id: number, action: string, body?: Record<string, unknown>) => {
     setLaneActionError(null);
@@ -1345,27 +1361,41 @@ export function Workspace() {
             it rather than under it. It collapses to a rail instead of
             unmounting nothing — there is no live subscription inside it, so
             unmounting is safe and keeps a closed panel from polling. */}
-        {home && currentLane && (
-          <WorkspaceHome
-            lane={currentLane}
-            onRenamed={() => void refreshLanes()}
-            onSourcesChange={(v) => sourcesChanged(currentLane.id, v)}
-            sourcesVersion={sourcesVersion}
-            onMenuAction={(action) => {
-              if (action === "new-here") {
-                setAddLanePrefill({ sourceRepo: currentLane.source_repo || currentLane.cwd });
-                setAddLaneOpen(true);
-              } else if (action === "reset" || action === "remove") {
-                setDestructive({ lane: currentLane, action });
-              }
-            }}
-          />
-        )}
-        <div ref={changesRowRef} className={`relative flex min-h-0 flex-1${home ? " hidden" : ""}`}>
+        <div ref={changesRowRef} className="relative flex min-h-0 flex-1">
+          {/* The home shares the row with the Changes panel, like the session
+            view's console does — so a workspace's changes show before any
+            session is open. */}
+          {home && currentLane && (
+            <div
+              data-testid="workspace-home-column"
+              // `relative`: the home's absolutely placed bits (a row's sr-only
+              // label) must be clipped by THIS scroller — placed against the
+              // row outside it they stretched the page into an empty scroll.
+              // No visible scrollbar: the wheel and touch still scroll it.
+              className={`no-scrollbar relative min-h-0 min-w-0 flex-1 overflow-y-auto${
+                changesOpen && changesFull ? " hidden" : ""
+              }${changesOpen && !changesFull ? " pr-5" : ""}`}
+            >
+              <WorkspaceHome
+                lane={currentLane}
+                onRenamed={() => void refreshLanes()}
+                onSourcesChange={(v) => sourcesChanged(currentLane.id, v)}
+                sourcesVersion={sourcesVersion}
+                onMenuAction={(action) => {
+                  if (action === "new-here") {
+                    setAddLanePrefill({ sourceRepo: currentLane.source_repo || currentLane.cwd });
+                    setAddLaneOpen(true);
+                  } else if (action === "reset" || action === "remove") {
+                    setDestructive({ lane: currentLane, action });
+                  }
+                }}
+              />
+            </div>
+          )}
           <section
             data-testid="lane-detail"
             className={`flex min-h-0 min-w-0 flex-1 flex-col${
-              currentLane && changesOpen && changesFull ? " hidden" : ""
+              home || (currentLane && changesOpen && changesFull) ? " hidden" : ""
             }`}
           >
             {/* No header row: the console's tab bar is the header. Only a
@@ -1460,7 +1490,9 @@ export function Workspace() {
                     <div data-testid="proof-gallery" className="mt-2">
                       {proofFeature.ticket_report && (
                         <a
-                          href={`/api/workspaces/${currentLane.id}/proof/${proofFeature.ticket_report}`}
+                          href={withToken(
+                            `/api/workspaces/${currentLane.id}/proof/${proofFeature.ticket_report}`
+                          )}
                           target="_blank"
                           rel="noreferrer"
                           className="text-xs text-fg-muted"
@@ -1792,10 +1824,17 @@ export function Workspace() {
                       // One repo only: the one panel, as it always was.
                       if (sections.length === 1) return panel;
                       // Else every repo is a section, stacked like VS Code's
-                      // Source Control; the open ones share the height. A
+                      // Source Control — an accordion: opening one folds the
+                      // others, so the open one has the whole height. A
                       // folded one stays mounted (CSS), so an unsaved edit in
                       // it survives.
-                      const folded = foldedSources.has(key);
+                      const openKey =
+                        openSource === null
+                          ? null
+                          : sections.some((x) => x.key === openSource)
+                            ? openSource
+                            : sections[0]!.key;
+                      const folded = key !== openKey;
                       return (
                         <section
                           key={key}
@@ -1811,13 +1850,7 @@ export function Workspace() {
                             type="button"
                             aria-expanded={!folded}
                             onContextMenu={(e) => sourceCtx.open(e, key)}
-                            onClick={() =>
-                              setFoldedSources((prev) => {
-                                const next = new Set(prev);
-                                if (!next.delete(key)) next.add(key);
-                                return next;
-                              })
-                            }
+                            onClick={() => setOpenSource(folded ? key : null)}
                             className="flex shrink-0 items-center gap-1 py-1 text-left text-xs font-medium text-fg-secondary hover:text-fg-primary"
                           >
                             {folded ? (
@@ -1884,12 +1917,13 @@ export function Workspace() {
                       </MenuItem>
                     </ContextMenu>
                   )}
-                  {/* The workspace's context — the home's right column, compact. */}
+                  {/* The workspace's context — the home's right column, compact
+                      (not on the home itself, which shows that column). */}
                   <section
                     data-testid="panel-workspace-context"
-                    className={`-mx-3 flex shrink-0 flex-col border-t border-border px-3 ${
-                      contextOpen ? "max-h-[45%]" : ""
-                    }`}
+                    className={`-mx-3 shrink-0 flex-col border-t border-border px-3 ${
+                      home ? "hidden" : "flex"
+                    } ${contextOpen ? "max-h-[45%]" : ""}`}
                   >
                     <button
                       type="button"

client/src/pages/__tests__/Artifacts.test.tsx

@@ -28,6 +28,10 @@ import { api, type Artifact } from "../../lib/api";
 import { confirmDialog } from "../../lib/confirm";
 
 vi.mock("../../lib/confirm", () => ({ confirmDialog: vi.fn() }));
+// pdf.js draws on a canvas jsdom does not have; the viewer is its own unit.
+vi.mock("../../components/PdfView", () => ({
+  PdfView: ({ title }: { title: string }) => <div data-testid="pdf-view">{title}</div>,
+}));
 vi.mock("../../lib/api", () => ({
   api: {
     lanes: { list: vi.fn() },
@@ -35,6 +39,8 @@ vi.mock("../../lib/api", () => ({
       settings: vi.fn(),
       list: vi.fn(),
       update: vi.fn(),
+      people: vi.fn(),
+      copy: vi.fn(),
       remove: vi.fn(),
       install: vi.fn(),
       updateInstalled: vi.fn(),
@@ -386,6 +392,157 @@ describe("Artifacts", () => {
     expect(screen.queryByTestId("artifact-installs")).toBeNull();
   });
 
+  it("shares with the people picked, never with everyone unless asked", async () => {
+    vi.mocked(api.artifacts.settings).mockResolvedValue({
+      serverMode: true,
+      canShare: true,
+      installsEnabled: true,
+      canManage: false,
+    });
+    vi.mocked(api.artifacts.list).mockResolvedValue({ items: [item({ id: 4, title: "deck" })] });
+    vi.mocked(api.artifacts.people).mockResolvedValue({
+      people: [
+        { id: 7, username: "ann", name: "Ann" },
+        { id: 8, username: "bob", name: "Bob" },
+      ],
+    });
+    vi.mocked(api.artifacts.update).mockClear();
+    vi.mocked(api.artifacts.update).mockResolvedValue({ item: item({ id: 4 }) } as never);
+    const user = userEvent.setup();
+    open();
+    const card = await screen.findByTestId("artifact-4");
+    await menuAction(user, "Share", card);
+    const dialog = await screen.findByTestId("share-dialog");
+    const save = within(dialog).getByRole("button", { name: "Save" });
+    expect(save).toBeDisabled(); // nobody picked yet
+    await within(dialog).findByText("Ann");
+    await user.type(within(dialog).getByLabelText("Find a person"), "an");
+    expect(within(dialog).queryByText("Bob")).toBeNull();
+    await user.click(within(dialog).getByRole("checkbox", { name: /Ann/ }));
+    await user.click(save);
+    await waitFor(() =>
+      expect(api.artifacts.update).toHaveBeenCalledWith(4, { shared: false, sharedWith: [7] })
+    );
+  });
+
+  it("shows who a row is shared with and lists Shared with you as its own tab", async () => {
+    vi.mocked(api.artifacts.settings).mockResolvedValue({
+      serverMode: true,
+      canShare: true,
+      installsEnabled: true,
+      canManage: false,
+    });
+    vi.mocked(api.artifacts.list).mockResolvedValue({
+      items: [
+        item({ id: 5, title: "mine", sharedWith: [{ id: 7, name: "Ann" }] }),
+        item({ id: 6, title: "for-me", mine: false, canChange: false, sharedWithMe: true }),
+      ],
+    });
+    const user = userEvent.setup();
+    open();
+    const badge = await screen.findByTestId("shared-people-5");
+    expect(badge).toHaveTextContent("Shared with 1 person");
+    expect(badge).toHaveAttribute("title", "Ann");
+    // A row shared with me by name is "Shared by others", not private.
+    expect(within(screen.getByTestId("artifact-6")).queryByText("Private")).toBeNull();
+    await user.click(screen.getByRole("button", { name: "Shared with you" }));
+    await waitFor(() =>
+      expect(api.artifacts.list).toHaveBeenLastCalledWith(
+        expect.objectContaining({ scope: "withme" })
+      )
+    );
+  });
+
+  it("views a page's copy here: an app runs in the sandbox, a PDF is drawn, an older page is copied first", async () => {
+    const page = (over: Partial<Artifact>) =>
+      item({ kind: "page", url: "https://claude.ai/artifact/p", ...over });
+    vi.mocked(api.artifacts.list).mockResolvedValue({
+      items: [
+        page({ id: 11, title: "app", files: [{ path: "app.html", size: 9 }] }),
+        page({ id: 12, title: "deck", files: [{ path: "deck-1.pdf", size: 9 }] }),
+        page({ id: 13, title: "old", files: [], source: "/w/old.html" }),
+      ],
+    });
+    // The copy's own files come through the raw route.
+    const realFetch = globalThis.fetch;
+    globalThis.fetch = vi.fn(async () => new Response("<p>app</p>")) as typeof fetch;
+    vi.mocked(api.artifacts.copy).mockResolvedValue({
+      item: page({ id: 13, title: "old", files: [{ path: "old.html", size: 3 }] }),
+    });
+    const user = userEvent.setup();
+    open();
+    await user.click(within(await screen.findByTestId("artifact-11")).getByTestId("artifact-view"));
+    expect(await screen.findByTestId("artifact-page-frame")).toBeInTheDocument();
+    expect(screen.queryByTestId("artifact-preview")).toBeNull();
+    await user.keyboard("{Escape}");
+    await user.click(within(screen.getByTestId("artifact-12")).getByTestId("artifact-view"));
+    expect(await screen.findByTestId("pdf-view")).toBeInTheDocument();
+    await user.keyboard("{Escape}");
+    await user.click(within(screen.getByTestId("artifact-13")).getByTestId("artifact-view"));
+    await waitFor(() => expect(api.artifacts.copy).toHaveBeenCalledWith(13));
+    expect(await screen.findByTestId("artifact-page-frame")).toBeInTheDocument();
+    globalThis.fetch = realFetch;
+  });
+
+  it("keeps folders per account: make one, move an artifact in, filter by it", async () => {
+    localStorage.removeItem("agenthub.artifacts.folders");
+    const user = userEvent.setup();
+    open();
+    await screen.findByText("deploy");
+    await user.click(screen.getByTestId("artifact-folder-new"));
+    await user.type(screen.getByLabelText("Folder name"), "Slides{Enter}");
+    // The new folder is picked at once, and empty.
+    expect(await screen.findByTestId("artifacts-empty-filtered")).toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "All folders" }));
+    await menuAction(user, "Move to folder…", screen.getByTestId("artifact-2"));
+    const dialog = await screen.findByTestId("move-dialog");
+    await user.click(within(dialog).getByRole("button", { name: "Slides" }));
+    const stored = JSON.parse(localStorage.getItem("agenthub.artifacts.folders")!);
+    expect(Object.values(stored.of)).toHaveLength(1);
+    expect(stored.of["2"]).toBe(stored.folders[0].id);
+    await user.click(screen.getByRole("button", { name: /^Slides/ }));
+    expect(await screen.findByTestId("artifact-2")).toBeInTheDocument();
+    expect(screen.queryByTestId("artifact-1")).toBeNull();
+    localStorage.removeItem("agenthub.artifacts.folders");
+  });
+
+  it("drags an artifact onto a folder to put it there, and onto All folders to take it out", async () => {
+    localStorage.setItem(
+      "agenthub.artifacts.folders",
+      JSON.stringify({ folders: [{ id: "f1", name: "Slides" }], of: {} })
+    );
+    open();
+    const row = await screen.findByTestId("artifact-2");
+    expect(row).toHaveAttribute("draggable", "true");
+    const data = new Map<string, string>();
+    const dataTransfer = {
+      setData: (k: string, v: string) => data.set(k, v),
+      getData: (k: string) => data.get(k) ?? "",
+      get types() {
+        return [...data.keys()];
+      },
+      effectAllowed: "",
+      dropEffect: "",
+    };
+    const stored = () => JSON.parse(localStorage.getItem("agenthub.artifacts.folders")!);
+    fireEvent.dragStart(row, { dataTransfer });
+    const chip = screen.getByTestId("artifact-folder-f1");
+    fireEvent.dragOver(chip, { dataTransfer });
+    expect(chip.className).toMatch(/ring-2/);
+    fireEvent.drop(chip, { dataTransfer });
+    expect(stored().of["2"]).toBe("f1");
+    expect(chip.className).not.toMatch(/ring-2/);
+    // Something that is not an artifact (a file from the desktop) is ignored.
+    fireEvent.drop(chip, {
+      dataTransfer: { ...dataTransfer, getData: () => "", types: ["Files"] },
+    });
+    expect(stored().of["2"]).toBe("f1");
+    fireEvent.dragStart(row, { dataTransfer });
+    fireEvent.drop(screen.getByRole("button", { name: "All folders" }), { dataTransfer });
+    expect(stored().of["2"]).toBeUndefined();
+    localStorage.removeItem("agenthub.artifacts.folders");
+  });
+
   it("keeps a shared row in the Hub when its owner deletes it, and removes it from there on ask", async () => {
     vi.mocked(api.artifacts.settings).mockResolvedValue({
       serverMode: true,
@@ -404,7 +561,9 @@ describe("Artifacts", () => {
     expect(within(card).queryByRole("button", { name: "Delete" })).toBeNull();
     vi.mocked(confirmDialog).mockResolvedValueOnce(true);
     await menuAction(user, "Remove from Hub", card);
-    await waitFor(() => expect(api.artifacts.update).toHaveBeenCalledWith(3, { shared: false }));
+    await waitFor(() =>
+      expect(api.artifacts.update).toHaveBeenCalledWith(3, { shared: false, sharedWith: [] })
+    );
     const calls = vi.mocked(confirmDialog).mock.calls;
     expect(calls[calls.length - 1]?.[0].title).toMatch(/Remove “hub-only” from the Hub/);
   });

client/src/pages/__tests__/SettingsHub.test.tsx

@@ -91,6 +91,13 @@ vi.mock("../../lib/api", async (importOriginal) => {
     api: {
       aiTools: { list: vi.fn(async () => view), iconUrl: () => "" },
       lanes: { list: vi.fn(async () => ({ lanes: [], counts: {} })) },
+      // AI tools → Company hub (local: not enrolled; hub: nothing yet).
+      remoteClient: { status: vi.fn(async () => ({ enrolled: false })) },
+      remoteHub: {
+        audit: vi.fn(async () => ({ entries: [] })),
+        devices: vi.fn(async () => ({ devices: [] })),
+        sessions: vi.fn(async () => ({ sessions: [] })),
+      },
       // AI tools → Profiles.
       toolProfiles: { list: vi.fn(async () => ({ tools: [] })) },
       ccConfig: {

client/src/pages/__tests__/Users.test.tsx

@@ -21,6 +21,7 @@ import type { AuthState, ServerUserUsage } from "../../lib/api";
 let authState: AuthState = { mode: "local" };
 vi.mock("../../components/AuthGate", () => ({
   useAuth: () => ({ state: authState, logout: async () => {} }),
+  usePermissions: () => ({ isAdmin: true, local: false }),
 }));
 
 const usage = { cost: 0, tokens: 0 };
@@ -56,6 +57,10 @@ vi.mock("../../lib/api", async (importOriginal) => {
     api: {
       users,
       lanes: { list: vi.fn(async () => ({ lanes: [], counts: {} })) },
+      remoteHub: {
+        devices: vi.fn(async () => ({ devices: [] })),
+        sessions: vi.fn(async () => ({ sessions: [] })),
+      },
       accountPool: {
         list: vi.fn(async () => ({ accounts: [], codex: [], blockPercent: 90 })),
         profiles: vi.fn(async () => ({ profiles: [] })),

client/src/pages/__tests__/Workspace.changesPanel.test.tsx

@@ -196,17 +196,20 @@ describe("Workspace — the Changes panel's width", () => {
     expect(size()).toHaveAttribute("aria-label", "Full screen");
     expect(screen.getByTestId("lane-changes-collapse")).toBeInTheDocument();
 
-    // Full width HIDES the console beside it — hidden, still mounted.
+    // The workspace's home sits beside the panel (no session is open), and
+    // full width HIDES it — hidden, still mounted; same for a console.
+    const beside = () => screen.getByTestId("workspace-home-column");
+    expect(beside().className).not.toContain("hidden");
     fireEvent.click(size());
     expect(card().className).toContain("w-full");
-    expect(screen.getByTestId("lane-detail").className).toContain("hidden");
+    expect(beside().className).toContain("hidden");
     expect(size()).toHaveAttribute("aria-label", "Restore size");
     expect(screen.getByTestId("lane-changes-collapse")).toBeInTheDocument();
 
     // Restore brings the console back beside it.
     fireEvent.click(size());
     expect(card().className).toContain("w-[25%]");
-    expect(screen.getByTestId("lane-detail").className).not.toContain("hidden");
+    expect(beside().className).not.toContain("hidden");
 
     // Collapsing from full screen reopens at 25/75, not back at full width.
     fireEvent.click(size());
@@ -288,11 +291,19 @@ describe("Workspace — the Changes panel's width", () => {
     expect(sections.map((s) => s.querySelector("button")!.textContent)).toEqual(["alpha", "shop"]);
     expect(api.lanes.git).toHaveBeenCalledWith(1);
     expect(api.lanes.git).toHaveBeenCalledWith({ lane: 1, source: 7 });
-    // A folded section keeps its panel mounted, only hidden.
+    // An accordion: the first section starts open, the others folded.
     const toggle = sections[0]!.querySelector("button")!;
-    fireEvent.click(toggle);
+    const shop = sections[1]!.querySelector("button")!;
+    expect(toggle).toHaveAttribute("aria-expanded", "true");
+    expect(shop).toHaveAttribute("aria-expanded", "false");
+    // Opening one folds the other; a folded section keeps its panel mounted.
+    fireEvent.click(shop);
+    expect(shop).toHaveAttribute("aria-expanded", "true");
     expect(toggle).toHaveAttribute("aria-expanded", "false");
     expect(sections[0]!.querySelector('[data-testid="lane-changes"]')).not.toBeNull();
+    // Clicking the open one folds it too.
+    fireEvent.click(shop);
+    expect(shop).toHaveAttribute("aria-expanded", "false");
     // A chat's file is the workspace folder's: its section unfolds.
     act(() => {
       openInChanges(1, "/workspace/alpha", "/workspace/alpha/src/b.ts");
@@ -390,13 +401,13 @@ describe("Workspace — the Changes panel's width", () => {
     fireEvent.click(screen.getByTestId("panel-git-source-rescan"));
     expect(api.lanes.repos).toHaveBeenLastCalledWith(2, true);
     // A chat's file inside an inner repo opens in that repo's section.
-    fireEvent.click(sections[1]!.querySelector("button")!);
     expect(sections[1]!.querySelector("button")).toHaveAttribute("aria-expanded", "false");
     act(() => {
       openInChanges(2, "/workspace/beta", "/workspace/beta/apps/web/src/x.ts");
     });
     await settle();
     expect(sections[1]!.querySelector("button")).toHaveAttribute("aria-expanded", "true");
+    expect(sections[0]!.querySelector("button")).toHaveAttribute("aria-expanded", "false");
     expect(api.lanes.gitFile).toHaveBeenCalledWith(
       { lane: 2, repo: "apps/web" },
       "src/x.ts",

client/src/pages/__tests__/Workspace.test.tsx

@@ -1203,7 +1203,19 @@ describe("Workspace — home and session view", () => {
   it("opens a workspace on its home, hiding (not unmounting) the session view", async () => {
     await renderWorkspace();
     expect(screen.getByTestId("workspace-home")).toBeInTheDocument();
-    expect(screen.getByTestId("lane-detail").parentElement).toHaveClass("hidden");
+    expect(screen.getByTestId("lane-detail")).toHaveClass("hidden");
+    // The Changes panel (or its rail) sits beside the home, before any session.
+    expect(screen.getByTestId("workspace-home-column").parentElement).not.toHaveClass("hidden");
+    // Its own scroller contains its absolutely placed bits (sr-only labels),
+    // or they stretch the page past the viewport.
+    expect(screen.getByTestId("workspace-home-column")).toHaveClass(
+      "relative",
+      "overflow-y-auto",
+      "no-scrollbar"
+    );
+    expect(
+      screen.queryByTestId("lane-changes-card") ?? screen.queryByTestId("lane-changes-expand")
+    ).not.toBeNull();
   });
 
   it("opens the session view for ?run=, headed by the tab bar alone", async () => {

client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap

@@ -7316,7 +7316,7 @@ exports[`screen snapshots > Settings — about 1`] = `
                 <span
                   class="text-status-warning/90"
                 >
-                  UI build v2.8.69 (rebuild client to match)
+                  UI build v2.8.79 (rebuild client to match)
                 </span>
               </p>
             </div>

docs/API.md

@@ -77,6 +77,8 @@ Authentication is **off by default** (the loopback bind is the trust boundary).
 - `x-dashboard-token: <token>` header
 - `?token=<token>` query parameter
 
+Local tools find it without being told: the server writes the active token to `<data dir>/runtime/dashboard-token` (0600) at start and removes the file when no token is set, and the `agenthub` CLI, the MCP server and the statusline send `DASHBOARD_TOKEN` from their own environment, else that file. The browser keeps it in `localStorage` (`dashboard_token`) and adds it as `?token=` to what cannot send a header — the `/ws` and `/ws-pty/*` WebSockets, images, downloads. A refused WebSocket upgrade answers `401`/`403` and the server logs why (`[WS] refused …`, at most one line per reason a minute).
+
 These paths stay exempt even when a token is configured: `/api/health`, `/api/openapi.json`, `/api/docs`, and `/api/hooks` (local Claude Code hook ingestion). Requests that fail the check get `401` with error code `EUNAUTHORIZED`.
 
 ### Server mode login (`AGENTHUB_MODE=server`)
@@ -1366,8 +1368,10 @@ cannot collide on `index.lock`.
   `shelf-drop` need a workspace at the repo root (`400 ESUBDIR`), and
   `shelve`/`unshelve` are `409 EMERGING` during a merge, cherry-pick, revert
   or rebase. `shelve` on a clean tree is `400 ENOCHANGES`; its `paths` go
-  through the same `git status` check as `discard`. `unshelve` refuses a
-  dirty tree (`400 EDIRTY`) so a restore never mixes with new work; a clean
+  through the same `git status` check as `discard`. `unshelve` refuses
+  anything staged and any change in one of the shelf's own files
+  (`400 EDIRTY`, those files in `paths`) so a restore never mixes with new
+  work — changes in other files (the ones a partial `shelve` left) stay put; a clean
   apply drops the entry (`kept: false`), a conflicted one KEEPS it and
   answers `conflicts: [...]`, `kept: true` — the files are resolved with
   `resolve` (`ours` = the branch, `theirs` = the shelf; there is no merge to
@@ -2096,6 +2100,58 @@ POST /api/locks/:name/release
 - **409** `{ "error": { "code": "ENOTHOLDER", "message": "...", "currentHolder": "lane1" } }` — `holder` doesn't match the current owner; a release never trusts its caller, same rule every other destructive path in this project follows.
 - **404** `{ "error": { "code": "ENOLOCK", "message": "no such lock: build" } }` — nothing by that name is held.
 
+#### Sharing a workspace (server mode)
+
+```http
+GET /api/lanes/:id/shares                → { shares: [{id, username, name, sharedAt}], canManage }
+PUT /api/lanes/:id/shares  {"userIds": [2, 5]}   → { shares }
+```
+
+The users a workspace is shared with (`lane_shares`, names only). `PUT` takes the
+WHOLE list — at most 200 enabled users, never the owner (`400 EBADUSER`) — from the
+owner or an admin only (`403 ENOTOWNER`), same-origin, each change audited. Local
+mode: `GET` answers an empty list, `PUT` `400 ELOCALMODE`. A user it is shared with
+sees and works in it like its owner, but `PATCH {title}`, `reset`/`remove`/`purge`,
+`DELETE` and `PUT …/shares` answer them `403 ENOTOWNER`. A session they start or
+resume (`POST /api/lanes/:id/start`, `POST /api/run`) runs on THEIR OWN account —
+a pool setup-token (Claude) or API key (Codex, Cursor) they may use, or an AI
+Proxy of theirs — else `409 ENOCOLLABACCOUNT`; resuming a non-Claude session the other side pays
+for, or a collaborator's `resumeLast`, is `409 ECOLLABRESUME`; their spend quota (`429 EQUOTA`)
+decides, not the owner's. Every pane they open (a Terminal tab too) records them
+in `dashboard_runs.started_by`: its pane token acts as them, and an AI pane's
+session hours are billed to them (`session_payers`; a Terminal tab's stay the
+owner's). A user disabled since stays on the
+list (`disabled: true`) and may be kept or removed; only a new one must be enabled. Users taken off
+get the WebSocket message `lane_access` `{laneId, userIds}` (sent to them only). See
+`docs/SERVER-MODE.md` → Sharing a workspace. A collaborator's pane token
+answers only that workspace's reads, the workspace list (filtered to it), its
+stage / up / down / hook / feature / mcp-sync writes and `/api/health`
+(`403 EPANESCOPE` — never a start or resume).
+
+```http
+GET /api/lanes/:id/presence              → { panes: { "<run id>": [{id, name}] } }
+```
+
+Who has which pane open (server mode; local mode `{panes: {}}`), in memory;
+changes come as the WebSocket message `pane_presence` `{laneId, runId, users}`
+to the workspace's owner and full collaborators. A run handle
+(`GET /api/run`) carries `startedBy: {id, name}` when a collaborator opened
+it — they pay for it. The first keystroke of a terminal attach into a shared
+workspace's pane by anyone but its owner is audited (`type into <run id>`).
+
+```http
+GET /api/lanes/:id/sessions/:sid/shares  → { shares, canManage }
+PUT /api/lanes/:id/sessions/:sid/shares  {"userIds": [3]}   → { shares }
+```
+
+One session shared on its own (`session_shares`), same rules as the workspace
+list (owner or admin, enabled users, audited `share session <id>`, `404
+ENOSESSION` for a session of another workspace). The user gets the workspace
+in `GET /api/lanes` with `access: "session"`, only that session in its session
+lists, the pane holding it, a resume of it (`start {resumeSessionId}` — no
+fork, no new session, no shell), and the workspace's git/Files reads and git
+writes; any other call on the workspace answers `403 ESESSIONSHARE`.
+
 #### Workspace context: instructions, folders, context files, memory
 
 ```http
@@ -2959,7 +3015,7 @@ curl "http://localhost:4820/api/pricing/cost?tz_offset=-420&from=2026-09-01&to=2
 GET /api/pricing/quota[?force=1]
 ```
 
-How much of each native tool's plan quota is spent: `{ tools: [{ id: "claude"|"codex"|"antigravity"|"cursor", active, label?, account?, plan?, expiresAt?, windows: [{ label, usedPercent, resetsAt, group? }], error?, asOf? }], checkedAt }` (`server/lib/quota.js`). **Claude** asks Anthropic's `GET /api/oauth/usage` with the access token the CLI holds right now — never refreshed, so an expired token answers `error: "ELIVEEXPIRED"` until Claude Code refreshes it — cached 5 min (`force=1`, the status bar's click, re-asks at most every 30 s); no OAuth login, no entry. That live account is `active: true`; every OTHER saved auth profile follows as `active: false` with its `label`, asked with its OWN stored token only while that token is valid — never refreshed here, since a refresh rotates the saved credentials (only the Profiles modal's **Check quota** does that) — and, once expired, showing the last figure this server read (`asOf`) or `error: "EPROFILEEXPIRED"`. Each Claude token's owner is also asked (`GET /api/oauth/profile`): the live row carries the label and email of the account its token belongs to (`.claude.json` can name another), and a saved profile whose token belongs to a different account answers `error: "EWRONGACCOUNT"` with no windows, never that other account's usage. **Codex** reads the newest `rate_limits` from its rollout journals, no network (`asOf` = when the journal recorded it; a window past its reset reads 0). **Antigravity** runs the catalog-detected `agy` as `agy --print /usage --output-format json` — the CLI's own `/usage` command, no model call (`num_turns` 0, no conversation) — in a private empty temp directory with a 60 s timeout, only while the tool is enabled in AI Tools and `agy --version` is ≥ 1.1.11 (an older agy may bill `/usage` as a model request); cached like Claude, a failed run shows the last figure (`asOf`) or `error: "EUPSTREAM"`. One window per pool bucket (`5h`, `wk`), `group` naming the pool ("Gemini Models", "Claude and GPT models"); the report names no account and no plan. Running agy may let it update itself; `AGENTHUB_AGY_USAGE=0` never runs it (no entry). **Cursor** reads the Cursor CLI's (`cursor-agent`) own login, `$XDG_CONFIG_HOME/cursor/auth.json` (default `~/.config`), and sends it ONLY to cursor.com's undocumented `GET /api/usage-summary` as the `WorkosCursorSessionToken=<user id>::<token>` cookie (user id from `~/.cursor/cli-config.json` `authInfo`), while its JWT is valid and never refreshed — expired or a 401 is `error: "ETOKENEXPIRED"`; cached like Claude; no file (macOS keeps it in the keychain), no entry. One `mo` window: `individualUsage.plan.totalPercentUsed`, resetting at `billingCycleEnd` (an Enterprise seat without `plan` shows its plan name and no window). `plan` is the subscription's name — Claude's as `GET /api/oauth/profile` reports it NOW (`organization.organization_type` / `rate_limit_tier` / `seat_tier`, remembered per account so saved profiles and pool accounts show it too), else read from the stored rate-limit tier and seat ("Max 5x", "Team Standard", "Team Premium", else `subscriptionType` title-cased; the stored fields are written at sign-in, so they keep `pro` after an upgrade to Max), Codex's `chatgpt_plan_type` id-token claim, Cursor's `membershipType` — shown as a badge beside the account. `account` is the signed-in email and `expiresAt` when the stored access token runs out — Claude's `claudeAiOauth.expiresAt`, Codex's and Cursor's access-token `exp` (JWT claims read unverified; no token leaves the server but Cursor's own, to cursor.com). Labels: `5h`, `wk`, `mo`, else `<n>d`/`<n>h` (the hover spells `wk`/`mo` out as week/month). The status bar shows one "N% used" chip per tool (its live account) at its right end and, on hover, every account grouped per tool with a row per window — bar, percent, reset time. **Server mode with S3** (one Linux user per account): a developer or analyst gets ONLY their own account's rows, read from their Linux home at the tools' default paths (`~/.claude`, `~/.codex`, `~/.config/cursor` + `~/.cursor`) — never the host's — and only from files that account owns (open + `fstat` owner check, a FIFO refused). No saved Claude profiles and no Antigravity row for them (agy's `/usage` needs the self-updating binary, so it stays the host's); an account that is not provisioned gets `tools: []`. An admin gets the host's, as before.
+How much of each native tool's plan quota is spent: `{ tools: [{ id: "claude"|"codex"|"antigravity"|"cursor", active, label?, accountUuid?, account?, plan?, expiresAt?, windows: [{ label, usedPercent, resetsAt, group? }], error?, asOf? }], checkedAt }` (`server/lib/quota.js`). **Claude** asks Anthropic's `GET /api/oauth/usage` with the access token the CLI holds right now — never refreshed, so an expired token answers `error: "ELIVEEXPIRED"` until Claude Code refreshes it — cached 5 min (`force=1`, the status bar's click, re-asks at most every 30 s); no OAuth login, no entry. That live account is `active: true`; every OTHER saved auth profile follows as `active: false` with its `label`, asked with its OWN stored token only while that token is valid — never refreshed here, since a refresh rotates the saved credentials (only the Profiles modal's **Check quota** does that) — and, once expired, showing the last figure this server read (`asOf`) or `error: "EPROFILEEXPIRED"`. Each Claude token's owner is also asked (`GET /api/oauth/profile`): the live row carries the label and email of the account its token belongs to (`.claude.json` can name another), and a saved profile whose token belongs to a different account answers `error: "EWRONGACCOUNT"` with no windows, never that other account's usage. Every Claude row carries its Anthropic `accountUuid` (null when unknown). **Codex** reads the newest `rate_limits` from its rollout journals, no network (`asOf` = when the journal recorded it; a window past its reset reads 0). **Antigravity** runs the catalog-detected `agy` as `agy --print /usage --output-format json` — the CLI's own `/usage` command, no model call (`num_turns` 0, no conversation) — in a private empty temp directory with a 60 s timeout, only while the tool is enabled in AI Tools and `agy --version` is ≥ 1.1.11 (an older agy may bill `/usage` as a model request); cached like Claude, a failed run shows the last figure (`asOf`) or `error: "EUPSTREAM"`. One window per pool bucket (`5h`, `wk`), `group` naming the pool ("Gemini Models", "Claude and GPT models"); the report names no account and no plan. Running agy may let it update itself; `AGENTHUB_AGY_USAGE=0` never runs it (no entry). **Cursor** reads the Cursor CLI's (`cursor-agent`) own login, `$XDG_CONFIG_HOME/cursor/auth.json` (default `~/.config`), and sends it ONLY to cursor.com's undocumented `GET /api/usage-summary` as the `WorkosCursorSessionToken=<user id>::<token>` cookie (user id from `~/.cursor/cli-config.json` `authInfo`), while its JWT is valid and never refreshed — expired or a 401 is `error: "ETOKENEXPIRED"`; cached like Claude; no file (macOS keeps it in the keychain), no entry. One `mo` window: `individualUsage.plan.totalPercentUsed`, resetting at `billingCycleEnd` (an Enterprise seat without `plan` shows its plan name and no window). `plan` is the subscription's name — Claude's as `GET /api/oauth/profile` reports it NOW (`organization.organization_type` / `rate_limit_tier` / `seat_tier`, remembered per account so saved profiles and pool accounts show it too), else read from the stored rate-limit tier and seat ("Max 5x", "Team Standard", "Team Premium", else `subscriptionType` title-cased; the stored fields are written at sign-in, so they keep `pro` after an upgrade to Max), Codex's `chatgpt_plan_type` id-token claim, Cursor's `membershipType` — shown as a badge beside the account. `account` is the signed-in email and `expiresAt` when the stored access token runs out — Claude's `claudeAiOauth.expiresAt`, Codex's and Cursor's access-token `exp` (JWT claims read unverified; no token leaves the server but Cursor's own, to cursor.com). Labels: `5h`, `wk`, `mo`, else `<n>d`/`<n>h` (the hover spells `wk`/`mo` out as week/month). The status bar shows one "N% used" chip per tool (its live account) at its right end and, on hover, every account grouped per tool with a row per window — bar, percent, reset time. **Server mode with S3** (one Linux user per account): a developer or analyst gets ONLY their own account's rows, read from their Linux home at the tools' default paths (`~/.claude`, `~/.codex`, `~/.config/cursor` + `~/.cursor`) — never the host's — and only from files that account owns (open + `fstat` owner check, a FIFO refused). No saved Claude profiles and no Antigravity row for them (agy's `/usage` needs the self-updating binary, so it stays the host's); an account that is not provisioned gets `tools: []`. An admin gets the host's, as before.
 #### Analytics
 
 ```http
@@ -3333,7 +3389,7 @@ The `/api/run/*` namespace starts and manages `claude` subprocesses in tmux-back
 
 ```http
 GET    /api/run                       List all live runs (computed fresh from tmux state)
-GET    /api/run/tmux                  { available: bool, version, upgrade } — whether tmux is on PATH, its version, and this platform's upgrade advice when it is older than AgentHub asks for (psmux 3.4.0 on Windows → `winget upgrade marlocarlo.psmux`; tmux 3.7 on macOS → `brew upgrade tmux`, on Linux → build the release), else null; the Workspace shows it as a sticky toast
+GET    /api/run/tmux                  { available: bool, version, upgrade, upgradeSeverity } — whether tmux is on PATH, its version, and this platform's upgrade advice when it is older than AgentHub asks for (psmux 3.4.0 on Windows → `winget upgrade marlocarlo.psmux`; tmux 3.7 on macOS → `brew upgrade tmux`, on Linux → build the release), else null; `upgradeSeverity` is `error` for an old psmux (terminals stall — a red toast on every visit) and `warning` for an old tmux (only the pane scrollbar is missing — an amber toast, once per version in a browser)
 GET    /api/run/binary?tool=          { found, path } for the `claude`, `codex` or `agy` binary
 GET    /api/run/cwds                  Suggested cwds (dashboard, home, recent)
 GET    /api/run/history?limit=&laneId=&tool=  Persisted run history; laneId narrows to one lane's runs, tool (with laneId) to one tool's — `shell` = Terminal tabs
@@ -3514,8 +3570,8 @@ A snapshot freezes a session as it is at that moment into one immutable `session
 
 ```http
 GET    /api/artifacts?scope=all|mine|hub|unowned&kind=page|file|skill|plugin&q=   {items} — each with `installed`, `updateAvailable` and `versionAt` (when its content last changed — a new snapshot; a rename or share toggle moves only `updatedAt`) (default scope `all`)
-GET    /api/artifacts/settings                 {serverMode, canShare, installsEnabled, canManage}
-PUT    /api/artifacts/settings                 {installsEnabled: boolean} — admin (any caller in local mode); the UI is Settings → AI tools → Artifacts Hub
+GET    /api/artifacts/settings                 {serverMode, canShare, installsEnabled, exportsEnabled, canManage}
+PUT    /api/artifacts/settings                 {installsEnabled?: boolean, exportsEnabled?: boolean} — admin (any caller in local mode); the UI is Settings → AI tools → Artifacts Hub (installs: server mode only)
 GET    /api/artifacts/candidates?laneId=       {items: [{path, sessionId, at, exists, pinned}]}
 GET    /api/artifacts/skills?laneId=           {items: [{name, from: "user"|"workspace"}]}
 POST   /api/artifacts/page                     {url, title?, description?}
@@ -3527,11 +3583,13 @@ POST   /api/artifacts/skill/new                {name, description, content, titl
 POST   /api/artifacts/plugin/inspect           {market} → {market, name, description, plugins: [{name, key, description, version, category}]}
 POST   /api/artifacts/plugin                   {key: "name@marketplace", market: "owner/repo" | git URL | marketplace.json URL, title?, description?}
 GET    /api/artifacts/:id                      {item}
-PATCH  /api/artifacts/:id                      {title?, description?, shared?, source?, market?, skill?: {name, description, content}}  (source/market: plugin only; skill: a skill's SKILL.md frontmatter name/description and body — written as a new snapshot, other files kept, row `source`/`description` follow)
+GET    /api/artifacts/people                    → {people: [{id, username, name}]} — server mode: every enabled account but the caller, names only (who an artifact can be shared with)
+PATCH  /api/artifacts/:id                      {title?, description?, shared?, sharedWith?: [userId], source?, market?, skill?: {name, description, content}}  (sharedWith: server mode, replaces who it is shared with by name — up to 100 enabled users, the owner dropped; a row out of its owner's library shared with nobody is deleted, `removed`)  (source/market: plugin only; skill: a skill's SKILL.md frontmatter name/description and body — written as a new snapshot, other files kept, row `source`/`description` follow)
 DELETE /api/artifacts/:id                      {ok, kept} — kept: a shared row of yours left your library but stays in the Hub
 GET    /api/artifacts/:id/raw?path=&download=1 one snapshot file (sandbox CSP, nosniff)
 POST   /api/artifacts/:id/install              {replace?, update?} → {installed, replaced?}
 POST   /api/artifacts/:id/uninstall            → {uninstalled, paths}
+POST   /api/artifacts/:id/copy                 → {item} — a page captured before pages kept a copy: snapshot the HTML file it was published from, if still in its workspace (once per row per server run; any viewer, who gets only the copy)
 POST   /api/artifacts/:id/reshare              → {item, changed} — Share again (skill, owner): the owner's folder on this server becomes the new version and the row is shared; 409 ENOSOURCE when the server has no copy
 GET    /api/artifacts/:id/installs             {items: [{user, mine, at, replaced, state?, paths?}], unrecorded} — state (skills): latest | outdated | removed | unknown, that install's Claude skill copies against the newest version now
 POST   /api/artifacts/:id/claim                → {item} — the suggested user, or an admin
@@ -3554,7 +3612,10 @@ What agents produced, per OWNER (`server/lib/artifacts.js`, plan: `docs/plans/ar
 - **install** — a skill or plugin (`EBADKIND`), into the CALLER's own account: a skill is written to `~/.claude/skills/<name>/` AND `~/.agents/skills/<name>/` (the folder Codex, Gemini/Antigravity, OpenCode and Cursor read) of every account the caller's sessions run as — under S3 their member home (as them through `write-as`), plus the host's home for an admin, whose host-folder workspaces run as the host. The answer is `{installed, paths, replaced}` (`installed` = the paths joined). A name taken in any of them is `409 EEXISTS` unless `replace: true`, which moves each old one to `~/.claude/agenthub-replaced-skills/<name>[-agents]-<time>/`. A plugin runs `claude plugin marketplace add <market>` then `claude plugin install --scope user <key>` as the caller, never with `-y`. `403 EINSTALLSOFF` while an admin has turned installs off. A list row's `installed` is true when that skill (`~/.claude/skills/<name>`) or plugin (a key of `~/.claude/plugins/installed_plugins.json`) is already in EVERY one of those accounts — the page then shows **Installed** instead of Install; it is a pure read, and an account that cannot be resolved or read counts as not installed. Every install is also a row of `artifact_installs` (who, when, the folders written, whether it replaced); `GET …/installs` lists them newest first — the owner, staff and local mode see every install, anyone else only their own, and `paths` goes only to the installer and an admin (a plugin has none: it is `claude plugin install --scope user`). `unrecorded` is what `installs` counted before that table existed. The card's "N installs" opens this list.
 - **a skill follows its source** — a skill row taken from a folder (its owner's `~/.claude/skills/<name>`, or the workspace's `.claude/skills/<name>`; the host's in local mode) is brought up to that folder whenever the Hub is listed (`syncSkillSources`, at most every 15 s; only a folder whose file names, sizes or mtimes changed is read again, through the same checks as a pick — no symlink, no secret, ≤ 5 MB — a member's files as theirs). A change is a NEW snapshot directory, then the old one dropped, and an `artifact_changed` broadcast. `artifacts.version` is a snapshot's content hash and `source_hash` the folder's when last taken: an upload or a Hub edit records the folder as it is then, so only a LATER change to the folder replaces it — the newer change wins. A list row's `updateAvailable` is true when the skill is `installed` and the viewer's `~/.claude/skills/<name>` (any account they run as) differs from `version`; the page then shows **Update**. `install` with `update: true` (a skill, `ENOTINSTALLED` when it is not installed) replaces those copies like `replace: true` — the old ones moved aside — and is not counted as another install. Share, unshare, a shared row's delete and every install or uninstall by someone else are written to `audit_log`.
 - **uninstall** — takes an installed skill or plugin out of the same accounts again (`EBADKIND` otherwise; allowed while installs are off). A skill's folders that exist (both skills folders of each account) are MOVED to `~/.claude/agenthub-replaced-skills/<name>[-agents]-uninstalled-<time>/`, never deleted; a plugin runs `claude plugin uninstall --scope user --keep-data <key>` as the caller (its data dir stays). Nothing of it there is `409 ENOTINSTALLED`. The answer is `{uninstalled, paths}` (`paths` = the skill folders moved; empty for a plugin). The `installs` count and `artifact_installs` history are left as they were. The page offers **Uninstall** only in the card's ⋯ menu (and its right-click menu); there is no Reinstall — a newer version is uninstalled and installed again.
-- Every write is same-origin. The `artifact_changed` broadcast (`{id, ownerId, shared}`) reaches everyone for a shared row, else its owner and staff.
+- Every write is same-origin. The `artifact_changed` broadcast (`{id, ownerId, shared, recipients}`) reaches everyone for a shared row, else its owner, the people it is shared with by name (`recipients`) and staff.
+- **Shared with chosen people** (`artifact_shares`, one row per person): `shared = 1` stays "everyone" (the Hub); a row may instead be shared with named users only. They see it (`canSee`), may install it, and find it under `?scope=withme` (**Shared with you**); `sharedWith` (the list) is shown only to the owner or an admin, `sharedWithMe` tells a recipient. Share again never widens a row shared by name to everyone. Changes are audited (`shared with ann, bob`).
+- **A page's own copy** (a claude.ai page is private to the account that published it): a publish from an HTML file inside the session's workspace snapshots that file plus the supporting files the tool named (`files`), under the pinned-file guards (read as the folder's account, no secret names, 25 MB in all), and a republish of the same link replaces it. A Claude Docs doc or a typed artifact (Slides, Design…) has no such file: `scripts/artifact-export-hint.js` (a synchronous PostToolUse hook, AgentHub panes only, off when the pane carries `AGENTHUB_ARTIFACT_EXPORT=0` — the admin's `exportsEnabled` switch) asks Claude to save `artifacts-export/<artifact id>.(md|pdf|html)` in the workspace root, and the Stop capture attaches that file to the page's row (no second card) and git-excludes the folder. The page then shows **View**: an HTML copy runs in `HtmlFrame`'s sandbox (scripts, never the dashboard's origin), Markdown in `MarkdownPreview`, a PDF drawn by pdf.js (`client/src/components/PdfView.tsx`, legacy build, loaded only when a PDF is opened). The claude.ai link stays under ⋯ → Open.
+- **Folders** are the viewer's own arrangement, not an artifact fact: the account preference `agenthub.artifacts.folders` (`/api/me/prefs`, 64 KB; `client/src/lib/artifactFolders.ts`), never seen by anyone else; deleting a folder only takes its artifacts out of it.
 
 ### Query Explorer
 
@@ -3651,7 +3712,7 @@ POST /api/updates/check
 POST /api/updates/apply
 ```
 
-Release-based update detection (`server/lib/update-check.js`). `status` and `check` answer the same object — `{ git_repo, update_available, install_kind: "checkout"|"plugin", local_version, latest_release, latest_release_url, latest_release_notes, release_check, commits_behind, commits_behind_release, manual_command, situation, last_plugin_update, plugin_update_progress, repo_root, … }` (`plugin_update_progress` is `{ step, index, total, started_at }` while a plugin-update chain runs — `marketplace_update` → `plugin_update` → `bootstrap`, from `plugin-update-progress.json` in the runtime dir — else `null`) (`repo_root` is `null` for a developer); `check` also broadcasts it as `update_status`. `apply` (admin-only in server mode) picks its mode by install kind, never from the request: a fast-forwardable checkout merges the release `--ff-only`, rebuilds, answers `{ …, applied: true }` and then restarts the server; a plugin-cache install with a newer release hands off to the detached plugin-update chain → `{ …, applied: true, mode: "plugin" }`. Nothing to apply is `409 UPDATE_NOT_APPLICABLE` (`reason`: `up_to_date`, `plugin_managed`, `not_fast_forwardable`). `500 UPDATE_STATUS_FAILED` / `UPDATE_CHECK_FAILED` / `UPDATE_APPLY_FAILED`.
+Release-based update detection (`server/lib/update-check.js`). `status` and `check` answer the same object — `{ git_repo, update_available, install_kind: "checkout"|"plugin", local_version, latest_release, latest_release_url, latest_release_notes, release_check, commits_behind, commits_behind_release, manual_command, situation, last_plugin_update, plugin_update_progress, repo_root, … }` (`plugin_update_progress` is `{ step, index, total, started_at }` while a plugin-update chain runs — `marketplace_update` → `plugin_update` → `bootstrap`, from `plugin-update-progress.json` in the runtime dir — else `null`) (`repo_root` is `null` for a developer); `check` also broadcasts it as `update_status`. `apply` (admin-only in server mode) picks its mode by install kind, never from the request: a fast-forwardable checkout merges the release `--ff-only` (first putting back `package-lock.json` / `client/package-lock.json` when they are the ONLY tracked changes — an earlier update's `npm install` rewrote them; any other change still makes the merge refuse), rebuilds, answers `{ …, applied: true }` and then restarts the server; a plugin-cache install with a newer release hands off to the detached plugin-update chain → `{ …, applied: true, mode: "plugin" }`. Nothing to apply is `409 UPDATE_NOT_APPLICABLE` (`reason`: `up_to_date`, `plugin_managed`, `not_fast_forwardable`). `500 UPDATE_STATUS_FAILED` / `UPDATE_CHECK_FAILED` / `UPDATE_APPLY_FAILED`.
 
 ### Import history
 

docs/CLI.md

@@ -99,7 +99,7 @@ The CLI talks to the local dashboard server — **API-backed commands require it
 | Command | Description |
 | ------- | ----------- |
 | `agenthub status` | At-a-glance up/down indicator (`●` running / `○` not running); exits `1` when down |
-| `agenthub start [--port N]` | Start the production server **in the background** (detached; survives closing the terminal), wait up to 30 s for `/api/health`, print the URL + PID and the `agenthub stop` hint. Logs append to `data/agenthub-server.log`. No-ops with a pointer when a server is already up. Requires a built client (`npm run build` once). Always ends a Quit (`agenthub stop`); in a plugin install it starts the server the way a session does — by running `scripts/plugin-bootstrap.js` |
+| `agenthub start [--port N] [--host A[,B]\|local] [--allowed-hosts H,..\|none] [--token T\|auto\|off]` | Start the production server **in the background** (detached; survives closing the terminal), wait up to 30 s for `/api/health`, print the URL + PID and the `agenthub stop` hint. Logs append to `data/agenthub-server.log`. No-ops with a pointer when a server is already up. `--host`, `--allowed-hosts` and `--token` are saved in `<data dir>/network.json` (0600) and applied by every later start (a set environment variable wins); a non-loopback `--host` without a token gets one generated. The links to open — every address of a `0.0.0.0` bind, each with `?token=` — are printed. Requires a built client (`npm run build` once). Always ends a Quit (`agenthub stop`); in a plugin install it starts the server the way a session does — by running `scripts/plugin-bootstrap.js` |
 | `agenthub stop` | **Quit AgentHub** (issue #65): closes every workspace terminal (`agenthub-lane-*` tmux sessions — running agents stop), stops the server — through `systemctl --user stop` / `launchctl bootout` when the autostart unit runs it — and keeps it stopped: Claude Code's `SessionStart` bootstrap starts no server while `<data dir>/runtime/stopped` exists. `agenthub start` (or any server starting, e.g. a boot/login with autostart on) clears it. With the server already down it only sets the flag |
 | `agenthub uninstall [--yes]` | **Uninstall AgentHub** (`scripts/uninstall.js`; Settings → System has the same button). Without `--yes` it only lists what is there and exits 1. With it, in order: closes every workspace terminal, removes the systemd/launchd unit, stops every dashboard server, the status-area icon and workspace stacks, takes AgentHub's own entries out of `~/.claude/settings.json` (hooks, statusline; backup `settings.json.agenthub-uninstall.bak`), Codex `hooks.json` and Antigravity `hooks.json`, deletes the AI Proxy `$CODEX_HOME/<name>.config.toml` files, runs `claude plugin uninstall` for `agenthub@*` and every plugin of the `agenthub` marketplace and removes that marketplace (never a shared one), then deletes `~/.local/bin/agenthub`, `~/.config/agenthub/`, `~/.claude/.agenthub.json`, `~/.claude/agenthub-{proxies,routers,git-credentials,accounts,profiles}`, `agenthub-lanes/.state` and `.locks`, the plugin's cached copies and the data directory (database included). **Kept:** the AI tools' own conversations (`~/.claude/projects`, `~/.codex/sessions`, …), workspace worktrees and branches, anything in your repositories, config backups. A data directory that is the home, `CLAUDE_HOME`, a checkout or not recognisably AgentHub's is refused. A failing step is logged and the rest still run; log: `$TMPDIR/agenthub-uninstall-<uid>.log`. Needs no running server. Run inside a dashboard terminal, it closes that terminal last. |
 | `agenthub tray` | Show AgentHub's **status-area icon** now, in the foreground (`scripts/tray.js`): Open AgentHub, Quit AgentHub (a submenu asks again, then runs `agenthub stop`), Start AgentHub after a quit (`agenthub start`), Hide this icon. A production server already keeps the icon up on its own unless Settings → System turned it off; this command does not change that setting. Exits at once when an icon is already running |

docs/DEPLOYMENT.md

@@ -245,7 +245,9 @@ NODE_ENV=production                    # Environment mode
 # The server binds 127.0.0.1 by default and is NOT network-reachable. It reads
 # transcripts, exports all data, and can spawn `claude`, so only widen the bind
 # deliberately — and require a token when you do.
-DASHBOARD_HOST=127.0.0.1               # set 0.0.0.0 ONLY if you must expose it
+DASHBOARD_HOST=127.0.0.1               # set 0.0.0.0 ONLY if you must expose it; a list
+                                        # (192.168.1.20,100.64.0.7) binds each, plus 127.0.0.1
+                                        # (`agenthub start --host` saves it in <data dir>/network.json)
 DASHBOARD_TOKEN=                        # required on /api/* + WS when set; use with a non-loopback host
 DASHBOARD_ALLOWED_HOSTS=                # extra Host names (comma-sep) for a LAN bind
 

docs/MCP.md

@@ -38,9 +38,12 @@ build, so the registration survives plugin updates.
 | 3 | `~/.claude/.agenthub.json` — the live-dashboard discovery file the CLI uses (`server/lib/dashboard-url.js`) |
 | 4 | `http://127.0.0.1:4820` |
 
-When the dashboard sets `DASHBOARD_TOKEN`, give the MCP process the same
-variable (`claude mcp add agenthub -e DASHBOARD_TOKEN=… -- agenthub mcp`); it is
-sent as `Authorization: Bearer`.
+When the dashboard sets `DASHBOARD_TOKEN`, the MCP server sends it as
+`Authorization: Bearer`: its own `DASHBOARD_TOKEN` if set, else the token the
+running dashboard publishes for local tools in
+`<data dir>/runtime/dashboard-token` (0600, readable by the same account only).
+A dashboard of another account needs the variable
+(`claude mcp add agenthub -e DASHBOARD_TOKEN=… -- agenthub mcp`).
 
 ## Tools
 

docs/OVERVIEW.md

@@ -84,8 +84,9 @@ Internal build — all rights reserved.
 - **Updates.** Release-based update detection with an in-UI **Update all**
   (marketplaces → every plugin → AgentHub last → one session reload).
 - **Appearance.** Settings → Appearance picks Dark / Light / System (follows the
-  OS live) and a theme per mode — dark: Default, Darcula, Apple Dark, Orca Dark;
-  light: Default, Apple Light, Canvas, Orca Light. Each mode
+  OS live) and a theme per mode — dark: Default, Darcula, Apple Dark, Orca Dark,
+  Sunset Cloud, Terminal, Night Sea; light: Default, Apple Light, Canvas, Orca
+  Light, Sakura (the four last from ai-chat-themes, colours only). Each mode
   remembers its own theme, so the sidebar's quick toggle swaps between the two.
   It also picks the workspace terminals' font: JetBrains Mono (default), the
   rounded Maple Mono, or the browser's own fixed-width

docs/PLUGINS.md

@@ -82,7 +82,7 @@ checkout unnecessary.
 
 | Component | Where it comes from |
 |---|---|
-| The eight event hooks | inline `hooks` in `.claude-plugin/plugin.json`, each running `scripts/hook-handler.js` |
+| The eight event hooks | inline `hooks` in `.claude-plugin/plugin.json`, each running `scripts/hook-handler.js` — plus one synchronous `PostToolUse` entry (matcher `Artifact\|mcp__claude_ai_.*__batch`) running `scripts/artifact-export-hint.js`, which asks Claude for a viewable copy of a Doc / Slides / Design it just published (see docs/API.md § Artifacts hub) |
 | The dashboard server | started detached by the bootstrap, from the plugin cache |
 | The `agenthub` CLI | a launcher written to `~/.local/bin/agenthub` |
 | The dashboard UI (`/run` and every other client route) | built into the runtime dir by the bootstrap, so it works the moment `claude` starts |