chore: v2.8.20 — account pool per tool with groups and a Cursor pool, update dialog closes while updating

- The update dialog can be closed while an update applies: it keeps running,
  the page still reloads itself when the new server is up, and a failure
  re-opens the dialog with its error.
- Account pool card: one tab per AI tool (Claude Code, Codex, Cursor CLI,
  Oh My Pi, and every other installed tool, which says it has no pool),
  accounts as cards with 5-hour and weekly quota shown as what is LEFT plus
  their reset times, and the saved profiles of Settings → AI tools →
  Profiles as cards with "Share to pool".
- Cursor account pool (server/lib/cursor-pool.js): Cursor API keys handed to
  a cursor-agent pane only through tmux -e CURSOR_API_KEY;
  `agenthub accounts add <name> --tool cursor`.
- Pool groups (server/lib/pool-groups.js, /api/accounts/groups): a group's
  members run only on its accounts of each tool, a user in no group on the
  accounts no group lists, a pin still wins. account_pins loses its tool
  CHECK (rebuilt, pins kept); three new tables.
- Oh My Pi login sharing can be switched from its pool tab too.

bin/agenthub.js

@@ -2845,18 +2845,18 @@ const COMMAND_GROUPS = [
       ],
       [
         "server",
-        "setup|off|status [--hostname name] [--admin name]",
+        "setup|install-system|tools|off|status [--hostname name] [--admin name]",
         "Server mode: logins for a shared dashboard (docs/SERVER-MODE.md)",
       ],
       [
         "users",
-        "list|add|passwd|role|disable|enable|assign|audit [name]",
+        "list|add|passwd|role|disable|enable|provision|assign|audit [name]",
         "Server mode's accounts (add: --role admin|analyst|developer)",
       ],
       [
         "accounts",
-        "list|add|remove [name]|pin <account> <user>|unpin <user> [--tool codex]",
-        "Claude/Codex account pool: new sessions spread over these accounts; pin = one user always on one",
+        "list|add|remove [name]|pin <account> <user>|unpin <user> [--tool codex|cursor]",
+        "Claude/Codex/Cursor account pool: new sessions spread over these accounts; pin = one user always on one",
       ],
       ["repl", "", "Open the interactive shell (also: shell, i)"],
     ],
@@ -3812,8 +3812,8 @@ const COMMANDS = (() => {
 const SUBCOMMANDS = {
   alerts: ["ack", "ack-all"],
   service: ["install", "uninstall", "status"],
-  server: ["setup", "off", "status"],
-  users: ["list", "add", "passwd", "role", "disable", "enable", "assign", "audit"],
+  server: ["setup", "install-system", "tools", "off", "status"],
+  users: ["list", "add", "passwd", "role", "disable", "enable", "provision", "assign", "audit"],
   accounts: ["list", "add", "remove", "pin", "unpin"],
   pricing: ["set", "delete", "reset"],
   webhooks: ["test"],
@@ -3905,7 +3905,7 @@ async function newPassword(label) {
   return first;
 }
 
-/** `agenthub server setup|off|status` — turn server mode on or off. */
+/** `agenthub server setup|install-system|tools|off|status` — turn server mode on or off. */
 async function cmdServer(sub, flags) {
   const { settingsEnv, auth } = serverAuth();
   const file = settingsEnv.settingsFilePath();
@@ -4062,7 +4062,7 @@ async function installSystem(flags, settingsEnv) {
     throw new Error("run this as the account that runs the dashboard, not as root (it uses sudo)");
   }
   const which = (bin) =>
-    spawnSync("sh", ["-c", `command -v ${bin}`], { encoding: "utf8" }).stdout.trim();
+    spawnSync("sh", ["-c", 'command -v "$1"', "sh", bin], { encoding: "utf8" }).stdout.trim();
   const host = os.userInfo().username;
   const { getDataDir } = require(path.join(REPO_ROOT, "server", "lib", "claude-home.js"));
   const data = getDataDir();
@@ -4166,14 +4166,25 @@ async function cmdUsers(sub, positional, flags) {
     case "list":
       table(
         ["id", "username", "role", "state"],
-        auth.listUsers().map((u) => [u.id, u.username, u.role, u.disabled ? "disabled" : "active"])
+        auth
+          .listUsers()
+          .map((u) => [
+            u.id,
+            u.username,
+            u.role,
+            u.disabled ? "disabled" : u.mustChangePassword ? "active (new password due)" : "active",
+          ])
       );
       return;
     case "add": {
       need();
       const role = typeof flags.role === "string" ? flags.role : "developer";
-      const user = await auth.createUser(name, await newPassword(`Password for ${name}`), role);
-      console.log(`${c.green("✔")} ${user.username} added (${user.role})`);
+      const user = await auth.createUser(name, await newPassword(`Password for ${name}`), role, {
+        mustChange: true,
+      });
+      console.log(
+        `${c.green("✔")} ${user.username} added (${user.role}) — they choose their own password at first login`
+      );
       return;
     }
     case "passwd":
@@ -4317,8 +4328,36 @@ async function cmdCodexAccounts(sub, name, flags) {
   );
 }
 
+/** `agenthub accounts … --tool cursor` — the Cursor account pool (server/lib/cursor-pool.js). */
+async function cmdCursorAccounts(sub, name) {
+  const pool = require(path.join(REPO_ROOT, "server", "lib", "cursor-pool.js"));
+  if (sub === "add") {
+    console.log(
+      c.dim("  Create an API key in the Cursor dashboard (Integrations), then paste it.")
+    );
+    const added = pool.addAccount(name, {
+      apiKey: await askPassword(`Cursor API key for ${name}: `),
+    });
+    console.log(`${c.green("✔")} ${added.name} added`);
+    console.log(c.dim("  New Cursor sessions now spread over the pool's accounts."));
+    return;
+  }
+  if (sub === "remove") {
+    pool.removeAccount(name);
+    console.log(`${c.green("✔")} ${name} removed — running panes keep it until they exit`);
+    return;
+  }
+  if (sub !== undefined && sub !== "list") {
+    throw new Error("usage: agenthub accounts list | add <name> | remove <name> --tool cursor");
+  }
+  table(
+    ["cursor account", "live", "pinned"],
+    pool.poolStatus().map((a) => [a.name, a.livePanes, pinnedUsers("cursor", a.name)])
+  );
+}
+
 /**
- * `agenthub accounts pin <account> <user>` / `unpin <user>` [--tool codex] —
+ * `agenthub accounts pin <account> <user>` / `unpin <user>` [--tool codex|cursor] —
  * that user's new sessions run on that account (server/lib/account-pins.js).
  */
 async function cmdAccountPin(sub, positional, tool) {
@@ -4326,7 +4365,9 @@ async function cmdAccountPin(sub, positional, tool) {
   const [first, second] = positional;
   const username = sub === "pin" ? second : first;
   if (!username || (sub === "pin" && !first)) {
-    throw new Error("usage: agenthub accounts pin <account> <user> | unpin <user> [--tool codex]");
+    throw new Error(
+      "usage: agenthub accounts pin <account> <user> | unpin <user> [--tool codex|cursor]"
+    );
   }
   const user = require(path.join(REPO_ROOT, "server", "db.js"))
     .db.prepare("SELECT id FROM users WHERE username = ?")
@@ -4376,14 +4417,15 @@ async function cmdAccounts(sub, positional, flags = {}) {
   const pool = require(path.join(REPO_ROOT, "server", "lib", "claude-pool.js"));
   const name = positional[0];
   if (sub === "add" || sub === "remove") {
-    if (!name) throw new Error(`usage: agenthub accounts ${sub} <name> [--tool codex]`);
+    if (!name) throw new Error(`usage: agenthub accounts ${sub} <name> [--tool codex|cursor]`);
   }
-  if (flags.tool != null && flags.tool !== "claude" && flags.tool !== "codex") {
-    throw new Error("--tool is claude (the default) or codex");
+  if (flags.tool != null && !["claude", "codex", "cursor"].includes(flags.tool)) {
+    throw new Error("--tool is claude (the default), codex or cursor");
   }
   if (sub === "pin" || sub === "unpin")
     return cmdAccountPin(sub, positional, flags.tool || "claude");
   if (flags.tool === "codex") return cmdCodexAccounts(sub, name, flags);
+  if (flags.tool === "cursor") return cmdCursorAccounts(sub, name);
   if (sub === "add") {
     console.log(
       c.dim("  Run `claude setup-token` signed in as that account, then paste the token.")
@@ -4439,11 +4481,13 @@ async function cmdAccounts(sub, positional, flags = {}) {
     );
     const codex = require(path.join(REPO_ROOT, "server", "lib", "codex-pool.js"));
     if (codex.poolStatus().length) await cmdCodexAccounts("list", null, flags);
+    const cursor = require(path.join(REPO_ROOT, "server", "lib", "cursor-pool.js"));
+    if (cursor.poolStatus().length) await cmdCursorAccounts("list", null);
     return;
   }
   console.error(
     c.red(
-      "✖ Usage: agenthub accounts list | add <name> | remove <name> | pin <account> <user> | unpin <user> [--tool codex]"
+      "✖ Usage: agenthub accounts list | add <name> | remove <name> | pin <account> <user> | unpin <user> [--tool codex|cursor]"
     )
   );
   process.exitCode = 1;

client/package-lock.json

@@ -29,7 +29,7 @@
         "react-dom": "^18.3.1",
         "react-i18next": "^17.0.4",
         "react-markdown": "^10.1.0",
-        "react-router-dom": "^6.28.2",
+        "react-router-dom": "^7.18.4",
         "remark-gfm": "^4.0.1"
       },
       "devDependencies": {
@@ -1251,15 +1251,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/@remix-run/router": {
-      "version": "1.23.4",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.4.tgz",
-      "integrity": "sha512-q7j5geK7xs3UJSdm9/iytUNclBnLmYx1EnSeCFXHPeutdqgIMeFeHtUZgS3EhlKxdBEAu8OwtJCwmLrEzpSs7Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.27",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
@@ -2740,6 +2731,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
     "node_modules/crelt": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.7.tgz",
@@ -5472,35 +5475,39 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.30.6",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.6.tgz",
-      "integrity": "sha512-5HfK7k5im7LTOB0EqCQmfvy4C13G92Ssj1VTmouTK3AJvyjKTnFuCV0vcMAD/JS+JC4DvDIBRrlAeJIFjh5VWg==",
-      "license": "MIT",
+      "version": "7.18.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.4.tgz",
+      "integrity": "sha512-PUPQcMhMGRAslLcvtlPz/kmzBEWPhLdgLFrL7pLNepBL6dX0lWj4WD2cUYVgYCuT3jxvghYFg81cDTj44DhetQ==",
       "dependencies": {
-        "@remix-run/router": "1.23.4"
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=20.0.0"
       },
       "peerDependencies": {
-        "react": ">=16.8"
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.30.6",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.6.tgz",
-      "integrity": "sha512-0RHKZz7wwffvkU+2MFVT2NnjK44ssLEV+m0CAJaS2Ksmorrwj7WxH00jO0SOCW26/tINUnJHToXblDs33I38YQ==",
-      "license": "MIT",
+      "version": "7.18.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.18.4.tgz",
+      "integrity": "sha512-yrfmJHIpDG7taCpqKjT1G5B6q3O2K+RN8/fgNf0lTjCwiPbQ0ei6vXX9ZjQR+7ld8Tr7Z5xmyMnZ8YJrphWQUw==",
       "dependencies": {
-        "@remix-run/router": "1.23.4",
-        "react-router": "6.30.6"
+        "react-router": "7.18.4"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=20.0.0"
       },
       "peerDependencies": {
-        "react": ">=16.8",
-        "react-dom": ">=16.8"
+        "react": ">=18",
+        "react-dom": ">=18"
       }
     },
     "node_modules/read-cache": {
@@ -5766,6 +5773,11 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw=="
+    },
     "node_modules/siginfo": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",

client/package.json

@@ -32,7 +32,7 @@
     "react-dom": "^18.3.1",
     "react-i18next": "^17.0.4",
     "react-markdown": "^10.1.0",
-    "react-router-dom": "^6.28.2",
+    "react-router-dom": "^7.18.4",
     "remark-gfm": "^4.0.1"
   },
   "devDependencies": {

client/src/components/AuthCard.tsx

@@ -0,0 +1,64 @@
+/**
+ * @file AuthCard.tsx
+ * @description The card the signed-out screens share (the login page, the
+ * first-login password change in `FirstPasswordPage.tsx`): a centred form
+ * with the theme's accent glow and grid behind the brand logo, a title and a
+ * subtitle. While it shows, the OS's light/dark applies (`applySystemTheme`),
+ * since no account's theme has been chosen for it.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useLayoutEffect, type FormEvent, type ReactNode } from "react";
+import { BRAND_LOGO } from "../lib/brand";
+import { applySystemTheme } from "../hooks/useTheme";
+
+export function AuthCard({
+  title,
+  subtitle,
+  onSubmit,
+  children,
+}: {
+  title: string;
+  subtitle: string;
+  onSubmit: (e: FormEvent) => void;
+  children: ReactNode;
+}) {
+  // Follow the OS, live.
+  useLayoutEffect(() => {
+    applySystemTheme();
+    const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
+    mq?.addEventListener?.("change", applySystemTheme);
+    return () => mq?.removeEventListener?.("change", applySystemTheme);
+  }, []);
+
+  return (
+    <main className="flex min-h-screen items-center justify-center bg-surface-0 p-4">
+      <form
+        onSubmit={onSubmit}
+        className="card relative w-full max-w-md overflow-hidden px-6 pb-8 pt-12 sm:px-10"
+      >
+        {/* Accent glow and a grid fading out from the top, drawn from the
+            theme's own accent so it holds in every theme. */}
+        <div
+          aria-hidden
+          className="pointer-events-none absolute inset-x-0 top-0 h-56"
+          style={{
+            backgroundImage:
+              "linear-gradient(to right, rgb(var(--accent) / 0.12) 1px, transparent 1px), linear-gradient(to bottom, rgb(var(--accent) / 0.12) 1px, transparent 1px), radial-gradient(ellipse at top, rgb(var(--accent) / 0.16), transparent 70%)",
+            backgroundSize: "48px 48px, 48px 48px, 100% 100%",
+            backgroundPosition: "center top",
+            maskImage: "radial-gradient(ellipse 70% 100% at top, black 30%, transparent 100%)",
+          }}
+        />
+        <div className="relative space-y-5">
+          <div className="text-center">
+            <img src={BRAND_LOGO} alt="SmartGift" className="block h-auto w-full" />
+            <h1 className="mt-5 text-3xl font-semibold tracking-tight text-fg-primary">{title}</h1>
+            <p className="mt-2 text-sm text-fg-secondary">{subtitle}</p>
+          </div>
+          {children}
+        </div>
+      </form>
+    </main>
+  );
+}

client/src/components/AuthGate.tsx

@@ -11,7 +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`).
- * The login page follows the OS's light/dark (`applySystemTheme`).
+ * 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.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -20,15 +22,14 @@ import {
   useCallback,
   useContext,
   useEffect,
-  useLayoutEffect,
   useState,
   type FormEvent,
   type ReactNode,
 } from "react";
 import { useTranslation } from "react-i18next";
 import { Eye, EyeOff } from "lucide-react";
-import { BRAND_LOGO } from "../lib/brand";
-import { applySystemTheme } from "../hooks/useTheme";
+import { AuthCard } from "./AuthCard";
+import { FirstPasswordPage } from "./FirstPasswordPage";
 import { api, AUTH_REQUIRED_EVENT, type AuthState, type AuthUser } from "../lib/api";
 import { hydrate } from "../lib/userPrefs";
 
@@ -165,6 +166,17 @@ export function AuthGate({ children }: { children: ReactNode }) {
     await api.auth.logout().catch(() => {});
     setState({ mode: "server", user: null });
   };
+  // A password an admin gave: nothing else until the user picks their own
+  // (the server refuses the rest anyway — EPWCHANGE).
+  if (state.mode === "server" && state.user?.mustChangePassword) {
+    return (
+      <FirstPasswordPage
+        user={state.user}
+        onDone={() => updateUser({ mustChangePassword: false })}
+        onLogout={() => void logout()}
+      />
+    );
+  }
   return (
     <AuthContext.Provider value={{ state, logout, updateUser }}>{children}</AuthContext.Provider>
   );
@@ -178,14 +190,6 @@ function LoginPage({ onLoggedIn }: { onLoggedIn: (user: AuthUser) => void }) {
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  // Nobody is signed in, so no account's theme applies: follow the OS, live.
-  useLayoutEffect(() => {
-    applySystemTheme();
-    const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
-    mq?.addEventListener?.("change", applySystemTheme);
-    return () => mq?.removeEventListener?.("change", applySystemTheme);
-  }, []);
-
   const submit = async (e: FormEvent) => {
     e.preventDefault();
     setBusy(true);
@@ -201,86 +205,60 @@ function LoginPage({ onLoggedIn }: { onLoggedIn: (user: AuthUser) => void }) {
     }
   };
 
+  // Nobody is signed in, so no account's theme applies: AuthCard follows the OS.
   return (
-    <main className="flex min-h-screen items-center justify-center bg-surface-0 p-4">
-      <form
-        onSubmit={submit}
-        className="card relative w-full max-w-md overflow-hidden px-6 pb-8 pt-12 sm:px-10"
-      >
-        {/* Accent glow and a grid fading out from the top, drawn from the
-            theme's own accent so it holds in every theme. */}
-        <div
-          aria-hidden
-          className="pointer-events-none absolute inset-x-0 top-0 h-56"
-          style={{
-            backgroundImage:
-              "linear-gradient(to right, rgb(var(--accent) / 0.12) 1px, transparent 1px), linear-gradient(to bottom, rgb(var(--accent) / 0.12) 1px, transparent 1px), radial-gradient(ellipse at top, rgb(var(--accent) / 0.16), transparent 70%)",
-            backgroundSize: "48px 48px, 48px 48px, 100% 100%",
-            backgroundPosition: "center top",
-            maskImage: "radial-gradient(ellipse 70% 100% at top, black 30%, transparent 100%)",
-          }}
+    <AuthCard title={t("auth.title")} subtitle={t("auth.subtitle")} onSubmit={submit}>
+      <label className="block space-y-1.5 text-sm font-medium text-fg-primary">
+        <span>{t("auth.username")}</span>
+        <input
+          className="input h-11 w-full px-4"
+          autoComplete="username"
+          autoFocus
+          required
+          placeholder={t("auth.username")}
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
         />
-        <div className="relative space-y-5">
-          <div className="text-center">
-            <img src={BRAND_LOGO} alt="SmartGift" className="block h-auto w-full" />
-            <h1 className="mt-5 text-3xl font-semibold tracking-tight text-fg-primary">
-              {t("auth.title")}
-            </h1>
-            <p className="mt-2 text-sm text-fg-secondary">{t("auth.subtitle")}</p>
-          </div>
-          <label className="block space-y-1.5 text-sm font-medium text-fg-primary">
-            <span>{t("auth.username")}</span>
-            <input
-              className="input h-11 w-full px-4"
-              autoComplete="username"
-              autoFocus
-              required
-              placeholder={t("auth.username")}
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-            />
-          </label>
-          <div className="space-y-1.5 text-sm font-medium text-fg-primary">
-            <label htmlFor="login-password">{t("auth.password")}</label>
-            <div className="relative">
-              <input
-                id="login-password"
-                className="input h-11 w-full pl-4 pr-11"
-                type={showPassword ? "text" : "password"}
-                autoComplete="current-password"
-                required
-                placeholder="••••••••"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-              />
-              <button
-                type="button"
-                onClick={() => setShowPassword((v) => !v)}
-                aria-label={showPassword ? t("auth.hidePassword") : t("auth.showPassword")}
-                aria-pressed={showPassword}
-                className="absolute inset-y-0 right-0 flex w-11 items-center justify-center rounded-r-lg text-fg-muted hover:text-fg-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
-              >
-                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-              </button>
-            </div>
-          </div>
-          {error && (
-            <p role="alert" className="text-sm text-status-danger">
-              {error}
-            </p>
-          )}
-          {/* Inverted fill (text colour behind the surface colour): black in a
-              light theme, light in a dark one, like the reference design. */}
+      </label>
+      <div className="space-y-1.5 text-sm font-medium text-fg-primary">
+        <label htmlFor="login-password">{t("auth.password")}</label>
+        <div className="relative">
+          <input
+            id="login-password"
+            className="input h-11 w-full pl-4 pr-11"
+            type={showPassword ? "text" : "password"}
+            autoComplete="current-password"
+            required
+            placeholder="••••••••"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
           <button
-            type="submit"
-            className="h-11 w-full rounded-xl bg-fg-primary text-sm font-medium text-surface-0 shadow-sm transition-opacity hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:cursor-not-allowed disabled:opacity-50"
-            disabled={busy}
+            type="button"
+            onClick={() => setShowPassword((v) => !v)}
+            aria-label={showPassword ? t("auth.hidePassword") : t("auth.showPassword")}
+            aria-pressed={showPassword}
+            className="absolute inset-y-0 right-0 flex w-11 items-center justify-center rounded-r-lg text-fg-muted hover:text-fg-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
           >
-            {busy ? t("auth.submitting") : t("auth.submit")}
+            {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
           </button>
-          <p className="text-center text-sm text-fg-secondary">{t("auth.noAccount")}</p>
         </div>
-      </form>
-    </main>
+      </div>
+      {error && (
+        <p role="alert" className="text-sm text-status-danger">
+          {error}
+        </p>
+      )}
+      {/* Inverted fill (text colour behind the surface colour): black in a
+              light theme, light in a dark one, like the reference design. */}
+      <button
+        type="submit"
+        className="h-11 w-full rounded-xl bg-fg-primary text-sm font-medium text-surface-0 shadow-sm transition-opacity hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:cursor-not-allowed disabled:opacity-50"
+        disabled={busy}
+      >
+        {busy ? t("auth.submitting") : t("auth.submit")}
+      </button>
+      <p className="text-center text-sm text-fg-secondary">{t("auth.noAccount")}</p>
+    </AuthCard>
   );
 }

client/src/components/FirstPasswordPage.tsx

@@ -0,0 +1,110 @@
+/**
+ * @file FirstPasswordPage.tsx
+ * @description The screen an account signed in with a password an admin GAVE
+ * (created or reset on the Users page — `mustChangePassword`) sees instead of
+ * the app: the current password, a new one that must pass every rule (the
+ * `PasswordRules` checklist ticks them as they are typed) and the same again,
+ * sent to `POST /api/me/password`. On success the app opens; "Sign out"
+ * leaves. The server refuses every other request meanwhile (EPWCHANGE).
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useState, type FormEvent } from "react";
+import { useTranslation } from "react-i18next";
+import { api, type AuthUser } from "../lib/api";
+import { passwordProblems } from "../lib/passwordRules";
+import { AuthCard } from "./AuthCard";
+import { PasswordRules } from "./users/PasswordRules";
+
+export function FirstPasswordPage({
+  user,
+  onDone,
+  onLogout,
+}: {
+  user: AuthUser;
+  onDone: () => void;
+  onLogout: () => void;
+}) {
+  const { t } = useTranslation();
+  const [current, setCurrent] = useState("");
+  const [next, setNext] = useState("");
+  const [again, setAgain] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const mismatch = again.length > 0 && again !== next;
+  const strong = passwordProblems(next, user.username).length === 0;
+  const ready = current.length > 0 && strong && again === next && !busy;
+
+  const submit = async (e: FormEvent) => {
+    e.preventDefault();
+    if (!ready) return;
+    setBusy(true);
+    setError(null);
+    try {
+      await api.me.changePassword(current, next);
+      onDone();
+    } catch (err) {
+      const code = (err as { code?: string }).code;
+      setError(
+        code && t(`users:errors.${code}`, { defaultValue: "" })
+          ? t(`users:errors.${code}`)
+          : (err as Error).message
+      );
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const field = (
+    label: string,
+    value: string,
+    set: (v: string) => void,
+    autoComplete: string,
+    autoFocus = false
+  ) => (
+    <label className="block space-y-1.5 text-sm font-medium text-fg-primary">
+      <span>{label}</span>
+      <input
+        type="password"
+        className="input h-11 w-full px-4"
+        autoComplete={autoComplete}
+        autoFocus={autoFocus}
+        required
+        value={value}
+        onChange={(e) => set(e.target.value)}
+      />
+    </label>
+  );
+
+  return (
+    <AuthCard
+      title={t("auth.mustChangeTitle")}
+      subtitle={t("auth.mustChangeSubtitle")}
+      onSubmit={submit}
+    >
+      {field(t("auth.currentPassword"), current, setCurrent, "current-password", true)}
+      {field(t("auth.newPassword"), next, setNext, "new-password")}
+      <PasswordRules password={next} username={user.username} />
+      {field(t("auth.confirmPassword"), again, setAgain, "new-password")}
+      {(mismatch || error) && (
+        <p role="alert" className="text-sm text-status-danger">
+          {error ?? t("auth.mismatch")}
+        </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 disabled:cursor-not-allowed disabled:opacity-50"
+        disabled={!ready}
+      >
+        {busy ? t("auth.saving") : t("auth.mustChangeSubmit")}
+      </button>
+      <button
+        type="button"
+        className="block w-full text-center text-sm text-fg-secondary hover:text-fg-primary"
+        onClick={onLogout}
+      >
+        {t("auth.logout")}
+      </button>
+    </AuthCard>
+  );
+}

client/src/components/ImageLightbox.tsx

@@ -4,12 +4,14 @@
  * Escape closes it. Rendered into `document.body`, so no pane, its stacking
  * layer or a header drawn over a pane can cover it — opened from inside a
  * pane's Chat view, a `fixed` overlay would otherwise stay in that pane's
- * layer, under anything stacked above it.
+ * layer, under anything stacked above it. `useDialog` takes the focus while it
+ * is open and gives it back, and its Escape closes only this, the top dialog.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { useEffect } from "react";
+import { useRef } from "react";
 import { createPortal } from "react-dom";
+import { useDialog } from "../hooks/useDialog";
 
 export function ImageLightbox({
   src,
@@ -20,18 +22,18 @@ export function ImageLightbox({
   alt: string;
   onClose: () => void;
 }) {
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose();
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [onClose]);
+  const panel = useRef<HTMLDivElement>(null);
+  useDialog(true, panel, onClose);
   return createPortal(
     <div
+      ref={panel}
+      tabIndex={-1}
       role="dialog"
+      aria-modal="true"
       aria-label={alt}
       data-testid="image-lightbox"
       onClick={onClose}
-      className="fixed inset-0 z-[200] flex cursor-zoom-out items-center justify-center bg-black/60 p-8"
+      className="fixed inset-0 z-[200] flex cursor-zoom-out items-center justify-center bg-black/60 p-8 outline-none"
     >
       <img
         src={src}

client/src/components/ImportHistory.tsx

@@ -82,6 +82,7 @@ import { api, type ImportResult, type ImportBackupResult } from "../lib/api";
 import { eventBus } from "../lib/eventBus";
 import type { WSMessage, ImportProgressMessage } from "../lib/types";
 import { PathPickButton } from "./PathPickButton";
+import { copyText } from "../lib/clipboard";
 
 type Mode = "rescan" | "path" | "upload" | "backup";
 
@@ -247,13 +248,9 @@ export function ImportHistory() {
 
   const copyArchiveCmd = async () => {
     if (!guide) return;
-    try {
-      await navigator.clipboard.writeText(guide.archive_command);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1500);
-    } catch {
-      /* clipboard unavailable */
-    }
+    if (!(await copyText(guide.archive_command, true))) return;
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
   };
 
   const progressText = (() => {

client/src/components/RemoteSources.tsx

@@ -88,6 +88,7 @@ import { isRemoteDataRefreshMessage } from "../lib/remoteDataEvents";
 import { useDataScope } from "../lib/dataScope";
 import type { ScopeMode } from "../lib/dataScope";
 import { PathPickButton } from "./PathPickButton";
+import { copyText } from "../lib/clipboard";
 
 /** Data-scope choices in display order (the radio group's arrow-key order). */
 const SCOPE_MODES: ScopeMode[] = ["all", "local", "selected"];
@@ -863,7 +864,7 @@ export function RemoteSources() {
                   : t("remoteSources.enable", "Enable")}
               </MenuItem>
               <MenuItem onSelect={pick(openEdit)}>{t("common:edit", "Edit")}</MenuItem>
-              <MenuItem onSelect={pick((s) => void navigator.clipboard.writeText(s.host))}>
+              <MenuItem onSelect={pick((s) => void copyText(s.host))}>
                 {t("rowMenu.copyHost")}
               </MenuItem>
               <MenuSeparator />

client/src/components/Sagi/PetChat.tsx

@@ -34,6 +34,7 @@ import {
   chooseRunOption,
   interruptRun,
   readRunMenu,
+  stepRunMenu,
   submitToRun,
   type PaneMenu,
 } from "../../lib/panePaste";
@@ -505,6 +506,9 @@ export function PetChat({
                 if (answerRunMenu(chat.runId, menu, text)) setMenu(null);
                 else setError(t("sagi.chat.notSent"));
               }}
+              onStep={(dir) => {
+                if (!stepRunMenu(chat.runId, dir)) setError(t("sagi.chat.notSent"));
+              }}
               onCancel={() => {
                 if (interruptRun(chat.runId)) setMenu(null);
                 else setError(t("sagi.chat.notSent"));

client/src/components/Sagi/SagiInfo.tsx

@@ -24,6 +24,7 @@ import {
 import { useTranslation } from "react-i18next";
 import { subjectLabel, type AttentionItem, type SagiStatus, type SagiSubject } from "./brain";
 import { PET_NAME_MAX } from "./prefs";
+import { isSubmitEnter } from "../../lib/keys";
 
 /** How many sessions the "Needs you" list shows before pointing at Sessions. */
 const ATTENTION_SHOWN = 4;
@@ -70,7 +71,7 @@ export function PetNameButton({
       onChange={(e) => setRenaming(e.target.value)}
       onBlur={save}
       onKeyDown={(e) => {
-        if (e.key === "Enter") {
+        if (isSubmitEnter(e)) {
           e.preventDefault();
           save();
         } else if (e.key === "Escape") {

client/src/components/SnapshotButton.tsx

@@ -14,6 +14,7 @@ import { api } from "../lib/api";
 import { ConfirmModal } from "./ConfirmModal";
 import { Checkbox } from "./Checkbox";
 import { CopyButton } from "./event-views/primitives";
+import { copyText } from "../lib/clipboard";
 
 export function snapshotUrl(token: string): string {
   return `${window.location.origin}/snapshot/${token}`;
@@ -33,7 +34,7 @@ export function SnapshotButton({ sessionId }: { sessionId: string }) {
     try {
       const { snapshot } = await api.snapshots.create(sessionId, { filePaths: redact });
       setToken(snapshot.token);
-      navigator.clipboard?.writeText(snapshotUrl(snapshot.token)).catch(() => undefined);
+      void copyText(snapshotUrl(snapshot.token));
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err));
     } finally {

client/src/components/UpdateNotifier.tsx

@@ -17,8 +17,10 @@
  * keeps answering while the chain installs. New skills/slash commands still
  * need `/reload-plugins` in an already-open Claude Code session; nothing a
  * background process can do for it. Escape, the backdrop and × close it for
- * this page load only (never while applying); "Skip this version" is the one
- * persistent, per-version dismiss. After a failed update, "Auto fix" hands the
+ * this page load only — also while an update applies: it keeps running in the
+ * background (the page still reloads itself once the new server is up), and a
+ * failure re-opens the modal with its error; "Skip this version" is the one
+ * persistent, per-version dismiss (never while applying). After a failed update, "Auto fix" hands the
  * error to an AI agent: it opens (or adopts) a workspace on the install folder
  * and starts a Claude Code session there with the error as its prompt — the
  * agent fixes whatever blocked the update (a dirty lockfile, a failed build…)
@@ -246,10 +248,13 @@ export function UpdateNotifier() {
   );
   const busy = applying || restarting || fixing;
 
+  // Closing while an update applies only hides it: the apply request and the
+  // poll that reloads the page keep running, and a failure re-opens it.
   const closeForNow = useCallback(() => {
-    if (busy || !dismissKey) return;
+    if (!dismissKey) return;
+    if (applying || restarting) toast.info(t("backgroundNote"));
     setClosedKey(dismissKey);
-  }, [busy, dismissKey]);
+  }, [applying, restarting, dismissKey, t]);
 
   const dismiss = useCallback(() => {
     if (busy || !dismissKey) return;
@@ -261,8 +266,8 @@ export function UpdateNotifier() {
     setDismissedSha(dismissKey);
   }, [busy, dismissKey]);
 
-  // Escape closes for now — never while an update is applying.
-  useDialog(show, panelRef, busy ? undefined : closeForNow);
+  // Escape closes for now — an applying update carries on in the background.
+  useDialog(show, panelRef, closeForNow);
 
   const copyCmd = async () => {
     if (!status?.manual_command) return;
@@ -315,6 +320,7 @@ export function UpdateNotifier() {
               syncFromPayload(s);
               setRestarting(false);
               if (v.ok) toast.info(t("pluginAlreadyCurrent"));
+              else setClosedKey(null); // closed while it ran: show why it failed
               return;
             }
             // A new version answering is back too, even if a poll never
@@ -359,6 +365,8 @@ export function UpdateNotifier() {
     } finally {
       setApplying(false);
     }
+    // Not applied: re-open a modal closed while it ran, so the error is seen.
+    setClosedKey(null);
   };
 
   // Hand the failure to an AI agent: a workspace on the install folder (the
@@ -436,7 +444,6 @@ export function UpdateNotifier() {
           <button
             type="button"
             onClick={closeForNow}
-            disabled={busy}
             aria-label={t("later")}
             className="p-1.5 -m-1 rounded-lg text-fg-muted hover:text-fg-secondary hover:bg-surface-4 transition-colors flex-shrink-0"
           >

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

@@ -6,7 +6,9 @@
  * `useWorkLanes` mirror the server's roles: an admin changes everything, an
  * analyst reads everything but works only in their own workspaces, a
  * developer only ever sees (and so changes) their own. The login page wears the
- * OS's light/dark; a sign-in swaps in the account's saved appearance.
+ * OS's light/dark; a sign-in swaps in the account's saved appearance. A
+ * password an admin gave shows only the "choose your own password" page,
+ * whose button waits for every rule, until the change succeeds.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -18,6 +20,7 @@ import "../../i18n";
 const me = vi.fn();
 const login = vi.fn();
 const prefs = vi.fn();
+const changePassword = vi.fn();
 const LANES = [
   { id: 1, owner_id: 5 },
   { id: 2, owner_id: 6 },
@@ -27,7 +30,11 @@ vi.mock("../../lib/api", () => ({
   api: {
     auth: { me: () => me(), login: (u: string, p: string) => login(u, p), logout: vi.fn() },
     lanes: { list: () => Promise.resolve({ lanes: LANES }) },
-    me: { prefs: () => prefs(), savePrefs: () => Promise.resolve({ prefs: {} }) },
+    me: {
+      prefs: () => prefs(),
+      savePrefs: () => Promise.resolve({ prefs: {} }),
+      changePassword: (c: string, n: string) => changePassword(c, n),
+    },
   },
 }));
 
@@ -56,10 +63,30 @@ beforeEach(() => {
   me.mockReset();
   login.mockReset();
   prefs.mockReset().mockResolvedValue({ prefs: {} });
+  changePassword.mockReset().mockResolvedValue({ ok: true });
   localStorage.clear();
 });
 
 describe("AuthGate", () => {
+  it("makes an account with an admin-given password choose its own first", async () => {
+    const ue = userEvent.setup();
+    me.mockResolvedValue({ mode: "server", user: { ...user, mustChangePassword: true } });
+    render(<AuthGate>app</AuthGate>);
+    const save = await screen.findByRole("button", { name: "Save and continue" });
+    expect(screen.queryByText("app")).toBeNull();
+    await ue.type(screen.getByLabelText("Current password"), "123");
+    await ue.type(screen.getByLabelText("New password"), "weakpass");
+    await ue.type(screen.getByLabelText("Confirm new password"), "weakpass");
+    expect(save).toBeDisabled();
+    await ue.clear(screen.getByLabelText("New password"));
+    await ue.clear(screen.getByLabelText("Confirm new password"));
+    await ue.type(screen.getByLabelText("New password"), "Green-Tea-42");
+    await ue.type(screen.getByLabelText("Confirm new password"), "Green-Tea-42");
+    await ue.click(save);
+    expect(changePassword).toHaveBeenCalledWith("123", "Green-Tea-42");
+    expect(await screen.findByText("app")).toBeInTheDocument();
+  });
+
   it("renders the app in local mode", async () => {
     me.mockResolvedValue({ mode: "local" });
     render(<AuthGate>app</AuthGate>);

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

@@ -58,14 +58,25 @@ describe("MarkdownPreview", () => {
 describe("FileViewer — markdown preview", () => {
   const data = { text: "# Hello\n", truncated: false } as never;
 
-  it("switches a markdown file between raw and preview", async () => {
+  it("opens a markdown file rendered, and switches it to raw and back", async () => {
     render(<FileViewer state={{ path: "/x/CLAUDE.md", data, error: null }} onClose={vi.fn()} />);
+    expect(screen.getByRole("heading", { name: "Hello" })).toBeInTheDocument();
+    await userEvent.click(screen.getByRole("button", { name: "Raw" }));
     expect(screen.queryByTestId("markdown-preview")).toBeNull();
     expect(screen.getByText("# Hello")).toBeInTheDocument();
     await userEvent.click(screen.getByRole("button", { name: "Preview" }));
     expect(screen.getByRole("heading", { name: "Hello" })).toBeInTheDocument();
-    await userEvent.click(screen.getByRole("button", { name: "Raw" }));
-    expect(screen.queryByTestId("markdown-preview")).toBeNull();
+  });
+
+  it("opens it as source when Settings → Appearance says Raw", () => {
+    window.localStorage.setItem("agenthub.markdown.view", "raw");
+    try {
+      render(<FileViewer state={{ path: "/x/CLAUDE.md", data, error: null }} onClose={vi.fn()} />);
+      expect(screen.queryByTestId("markdown-preview")).toBeNull();
+      expect(screen.getByText("# Hello")).toBeInTheDocument();
+    } finally {
+      window.localStorage.removeItem("agenthub.markdown.view");
+    }
   });
 
   it("offers no preview for another file type", () => {

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

@@ -238,7 +238,7 @@ describe("StatusBar", () => {
     expect(work).toHaveTextContent("5h95%Resets in 41m");
     expect(work).toHaveTextContent("Week32%");
     expect(personal).toHaveTextContent("home@example.com · Sign-in expired");
-    expect(personal).toHaveTextContent("Check quota in Claude Code → Profiles");
+    expect(personal).toHaveTextContent("Check quota in Settings → AI tools → Profiles");
     expect(personal).not.toHaveTextContent("in use");
     expect(codex).toHaveTextContent("dev@example.com");
     expect(codex).toHaveTextContent("Sign-in expired");

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

@@ -298,12 +298,17 @@ describe("UpdateNotifier — closing vs skipping", () => {
     expect(await screen.findByText(i18n.t("updates:title"))).toBeInTheDocument();
   });
 
-  it("ignores Escape while an update is applying", async () => {
-    applyMock.mockReturnValue(new Promise(() => {}));
+  it("closes while an update applies, and re-opens if it then fails", async () => {
+    let fail: (e: Error) => void = () => {};
+    applyMock.mockReturnValue(new Promise((_, reject) => (fail = reject)));
     render(<UpdateNotifier />);
     await userEvent.click(await screen.findByText(i18n.t("updates:updateNow")));
     await userEvent.keyboard("{Escape}");
-    expect(screen.getByText(i18n.t("updates:title"))).toBeInTheDocument();
+    await waitFor(() =>
+      expect(screen.queryByText(i18n.t("updates:title"))).not.toBeInTheDocument()
+    );
+    fail(new Error("Command failed: npm run build"));
+    expect(await screen.findByText("Command failed: npm run build")).toBeInTheDocument();
   });
 });
 

client/src/components/artifacts/ArtifactAddPanels.tsx

@@ -20,7 +20,7 @@
 
 import { useEffect, useMemo, useRef, useState, type DragEvent } from "react";
 import { useTranslation } from "react-i18next";
-import { FileText, FolderOpen, Package, Sparkles, Upload, X } from "lucide-react";
+import { X } from "lucide-react";
 import { api, type MarketplaceInfo } from "../../lib/api";
 import type { Lane } from "../../lib/types";
 import { toast } from "../../lib/toast";
@@ -374,7 +374,6 @@ export function SkillAddPanel({
               dragging ? "border-accent bg-accent/10" : "border-border"
             }`}
           >
-            <Upload className="mx-auto mb-1 h-5 w-5 text-fg-muted" />
             <p className="text-xs text-fg-secondary">{t("skill.dropHint")}</p>
             <div className="mt-2 flex flex-wrap justify-center gap-2">
               <button
@@ -382,14 +381,14 @@ export function SkillAddPanel({
                 className="btn-ghost text-xs"
                 onClick={() => fileInput.current?.click()}
               >
-                <FileText className="h-3.5 w-3.5" /> {t("skill.pickFiles")}
+                {t("skill.pickFiles")}
               </button>
               <button
                 type="button"
                 className="btn-ghost text-xs"
                 onClick={() => folderInput.current?.click()}
               >
-                <FolderOpen className="h-3.5 w-3.5" /> {t("skill.pickFolder")}
+                {t("skill.pickFolder")}
               </button>
             </div>
             <input
@@ -569,7 +568,6 @@ export function SkillAddPanel({
             <ul className="max-h-72 space-y-0.5 overflow-auto">
               {skills.map((s) => (
                 <li key={`${s.from}:${s.name}`} className="flex items-center gap-2 text-xs">
-                  <Sparkles className="h-3 w-3 shrink-0 text-fg-muted" />
                   <span className="min-w-0 flex-1 truncate text-fg-secondary">{s.name}</span>
                   <span className="text-fg-muted">
                     {t(s.from === "user" ? "form.fromUser" : "form.fromWorkspace")}
@@ -746,10 +744,7 @@ export function PluginAddPanel({ onAdded, onClose }: { onAdded: () => void; onCl
       {info && (
         <div className="space-y-2" data-testid="market-plugins">
           <div>
-            <p className="text-sm font-medium text-fg-primary">
-              <Package className="mr-1 inline h-4 w-4 text-fg-muted" />
-              {info.name}
-            </p>
+            <p className="text-sm font-medium text-fg-primary">{info.name}</p>
             {info.description && <p className={hint}>{info.description}</p>}
           </div>
           {info.plugins.length === 0 ? (
@@ -949,7 +944,7 @@ export function FileUploadPanel({ onAdded }: { onAdded: () => void }) {
           className="btn-primary shrink-0 text-sm"
           disabled={busy || !file || tooBig}
         >
-          <Upload className="h-3.5 w-3.5" /> {t("file.upload")}
+          {t("file.upload")}
         </button>
       </div>
     </form>

client/src/components/config/FileViewer.tsx

@@ -4,7 +4,8 @@
  * already-fetched data as props (path/data/error) rather than fetching
  * itself, so it stays tool-agnostic — the orchestrator (Claude or Codex
  * config page) owns the fetch. A markdown file gets a Raw / Preview switch
- * (`MarkdownPreview`); Raw is the default.
+ * (`MarkdownPreview`), opening as Settings → Appearance says
+ * (`lib/markdownView.ts`: Preview by default).
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -15,6 +16,7 @@ import { FileText, X, AlertCircle, Eye, Code2 } from "lucide-react";
 import type { CcFileResponse } from "../../lib/api";
 import { CopyButton } from "./configPrimitives";
 import { MarkdownPreview, isMarkdown } from "../MarkdownPreview";
+import { readMarkdownPreview } from "../../lib/markdownView";
 
 export function FileViewer({
   state,
@@ -24,7 +26,7 @@ export function FileViewer({
   onClose: () => void;
 }) {
   const { t } = useTranslation("ccConfig");
-  const [preview, setPreview] = useState(false);
+  const [preview, setPreview] = useState(readMarkdownPreview);
   const canPreview = isMarkdown(state.path) && !!state.data;
   const panelRef = useRef<HTMLDivElement>(null);
   useDialog(true, panelRef, onClose);

client/src/components/conversation/ConversationView.tsx

@@ -96,6 +96,9 @@ const TRANSCRIPTS_REFRESH_MS = 15000;
 // at most this often: the first event still fetches at once, the last is never
 // lost, and a long transcript is not re-read for every single frame.
 const EVENT_FETCH_MS = 1500;
+// The server saw this session's transcript grow (`transcript_changed`, itself
+// at most every 250 ms): the new lines are on disk, so read them nearly at once.
+const PUSH_FETCH_MS = 300;
 
 interface ConversationViewProps {
   sessionId: string;
@@ -108,6 +111,10 @@ interface ConversationViewProps {
   compact?: boolean;
   /** Opens a file named in a turn's "Edited N files" card. */
   onOpenFile?: (path: string) => void;
+  /** Opens an artifact card's file in the chat's artifact panel. */
+  onOpenArtifact?: (path: string) => void;
+  /** The messages on screen (for an artifact's versions), as they change. */
+  onMessages?: (messages: TranscriptMessage[]) => void;
   /** The session runs in a pane: show the step in progress. */
   live?: boolean;
   /** Changed (a chat's send): back to the end, and stick to it. */
@@ -133,6 +140,8 @@ function ConversationViewPane({
   fill = false,
   compact = false,
   onOpenFile,
+  onOpenArtifact,
+  onMessages,
   live = false,
   follow = 0,
   waiting = false,
@@ -144,19 +153,21 @@ function ConversationViewPane({
 }: ConversationViewProps) {
   const { t } = useTranslation("sessions");
   const [messages, setMessages] = useState<TranscriptMessage[]>([]);
+  const shown = messages;
   // A live pane's session has no row until its first hook — and Claude Code
   // runs no hook before the folder is trusted, so a trust prompt (or any
   // other question before the session starts) waits unseen in the terminal.
   const [notStarted, setNotStarted] = useState(false);
   useEffect(() => onNotStarted?.(notStarted), [notStarted, onNotStarted]);
+  useEffect(() => onMessages?.(shown), [shown, onMessages]);
   useEffect(() => {
     if (!onContext) return;
-    for (let i = messages.length - 1; i >= 0; i--) {
-      const m = messages[i]!;
+    for (let i = shown.length - 1; i >= 0; i--) {
+      const m = shown[i]!;
       if (m.type === "assistant" && m.usage)
         return onContext(promptTokens(m.usage), m.model ?? null);
     }
-  }, [messages, onContext]);
+  }, [shown, onContext]);
   const [total, setTotal] = useState(0);
   const [loading, setLoading] = useState(true);
   const [loadingHistory, setLoadingHistory] = useState(false);
@@ -209,12 +220,13 @@ function ConversationViewPane({
   const agentLinks = useMemo<AgentLinks>(() => {
     const ids = new Map<string, string>();
     for (const tr of transcripts) if (tr.tool_use_id) ids.set(tr.tool_use_id, tr.id);
-    return { ids, notices: agentNotices(messages), live, render: renderAgent };
-  }, [transcripts, messages, live, renderAgent]);
+    return { ids, notices: agentNotices(shown), live, render: renderAgent };
+  }, [transcripts, shown, live, renderAgent]);
 
   // Load available transcript list (also rescanned on a short interval so
   // newly-spawned subagents appear in the dropdown without a page reload).
   useEffect(() => {
+    if (!sessionId) return;
     let cancelled = false;
     async function loadTranscripts() {
       try {
@@ -254,6 +266,12 @@ function ConversationViewPane({
     firstLineRef.current = 0;
 
     async function load() {
+      // No session yet: no history.
+      if (!sessionId) {
+        setMessages([]);
+        setLoading(false);
+        return;
+      }
       try {
         setError(null);
         setLoading(true);
@@ -297,6 +315,7 @@ function ConversationViewPane({
   //     parsed message we've seen. The server already de-overlaps via
   //     afterLine, so we can safely append.
   const fetchNewMessages = useCallback(async () => {
+    if (!sessionId) return;
     if (fetchingRef.current) {
       // Coalesce: remember a trigger arrived during this fetch and re-run
       // exactly once when the in-flight request settles.
@@ -358,7 +377,12 @@ function ConversationViewPane({
     () => throttle(() => void fetchNewMessages(), EVENT_FETCH_MS),
     [fetchNewMessages]
   );
+  const fetchPushed = useMemo(
+    () => throttle(() => void fetchNewMessages(), PUSH_FETCH_MS),
+    [fetchNewMessages]
+  );
   useEffect(() => () => fetchSoon.cancel(), [fetchSoon]);
+  useEffect(() => () => fetchPushed.cancel(), [fetchPushed]);
   useEffect(() => {
     const unsubscribe = eventBus.subscribe((msg: WSMessage) => {
       // Hidden tab or hidden pane: catching up once on show is enough.
@@ -367,13 +391,14 @@ function ConversationViewPane({
         fetchSoon();
         return;
       }
-      if (msg.type !== "new_event") return;
+      if (msg.type !== "new_event" && msg.type !== "transcript_changed") return;
       const data = msg.data as { session_id?: string };
       if (data.session_id !== sessionId) return;
-      fetchSoon();
+      if (msg.type === "transcript_changed") fetchPushed();
+      else fetchSoon();
     });
     return unsubscribe;
-  }, [sessionId, fetchSoon, onScreen]);
+  }, [sessionId, fetchSoon, fetchPushed, onScreen]);
 
   onShowRef.current = () => {
     if (document.visibilityState === "visible") void fetchNewMessages();
@@ -535,7 +560,7 @@ function ConversationViewPane({
 
   // Auto-scroll to bottom after initial load
   useEffect(() => {
-    if (!loading && messages.length > 0) {
+    if (!loading && shown.length > 0) {
       scrollToBottom();
     }
   }, [loading, scrollToBottom]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -626,7 +651,7 @@ function ConversationViewPane({
             >
               {t("conversation.loading")}
             </div>
-          ) : messages.length === 0 && notStarted ? (
+          ) : shown.length === 0 && notStarted ? (
             <div className="mx-auto max-w-md py-12 text-center">
               <p className="text-sm text-fg-secondary">{t("conversation.notStarted")}</p>
               <p className="mt-2 text-xs leading-relaxed text-fg-muted">
@@ -642,7 +667,7 @@ function ConversationViewPane({
                 </button>
               )}
             </div>
-          ) : messages.length === 0 ? (
+          ) : shown.length === 0 ? (
             <div className="mx-auto max-w-md py-12 text-center">
               <p className="text-sm text-fg-secondary">{t("conversation.empty")}</p>
               <p className="mt-2 text-xs leading-relaxed text-fg-muted">
@@ -651,9 +676,10 @@ function ConversationViewPane({
             </div>
           ) : (
             <MessageList
-              messages={messages}
+              messages={shown}
               loading={false}
               onOpenFile={onOpenFile}
+              onOpenArtifact={onOpenArtifact}
               live={live}
               waiting={waiting}
               onOpenTerminal={onOpenTerminal}

client/src/components/conversation/MessageList.tsx

@@ -112,7 +112,11 @@ import {
   Search,
   Globe,
   Wrench,
+  Image as ImageIcon,
+  Code2,
+  Table2,
 } 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 { copyText } from "../../lib/clipboard";
@@ -148,6 +152,8 @@ interface MessageListProps {
   loading: boolean;
   /** Opens a file named in the "Edited N files" card. */
   onOpenFile?: (path: string) => void;
+  /** Opens an artifact card's file in the chat's artifact panel. */
+  onOpenArtifact?: (path: string) => void;
   /** The session is running in a pane: show the step in progress. */
   live?: boolean;
   /** The CLI is asking the user something (a permission prompt): the live
@@ -604,30 +610,91 @@ export function chatItems(messages: TranscriptMessage[], keys: string[]): Item[]
 
 /** Claude Desktop's end-of-turn card: the files the turn changed, each with
  *  the lines added and removed. A call still running or failed is left out. */
+const ARTIFACT_ICON: Partial<Record<ArtifactKind, typeof FileText>> = {
+  html: Globe,
+  svg: ImageIcon,
+  markdown: FileText,
+  mermaid: Workflow,
+  react: Code2,
+  csv: Table2,
+};
+
+/** Claude Desktop's artifact card: what the model made, opened beside the chat. */
+function ArtifactCard({ path, onOpen }: { path: string; onOpen?: (path: string) => void }) {
+  const { t } = useTranslation("sessions");
+  const kind = artifactKind(path);
+  const Icon = ARTIFACT_ICON[kind] ?? FileText;
+  const name = path.split(/[\\/]/).pop() || path;
+  return (
+    <button
+      type="button"
+      data-testid="artifact-card"
+      title={path}
+      disabled={!onOpen}
+      onClick={() => onOpen?.(path)}
+      draggable
+      onDragStart={(e) => dragAttachments(e, [projectAttachment(path)])}
+      className="flex w-full max-w-md items-center gap-3 rounded-xl border border-border bg-surface-1 px-3 py-2.5 text-left transition-colors enabled:hover:border-border-light enabled:hover:bg-surface-2"
+    >
+      <span className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg border border-border bg-surface-2">
+        <Icon className="h-4 w-4 text-fg-secondary" />
+      </span>
+      <span className="min-w-0 flex-1">
+        <span className="block truncate text-sm font-medium text-fg-primary">
+          {name.replace(/\.[A-Za-z0-9]+$/, "")}
+        </span>
+        <span className="block truncate text-xs text-fg-muted">
+          {t(`conversation.artifact.${kind}`, { defaultValue: kind })}
+          {onOpen ? ` · ${t("conversation.artifact.open")}` : ""}
+        </span>
+      </span>
+    </button>
+  );
+}
+
 function EditedFilesCard({
   blocks,
   toolResultMap,
   onOpenFile,
+  onOpenArtifact,
+  pending = false,
 }: {
   blocks: TranscriptContent[];
   toolResultMap: Map<string, TranscriptContent>;
   onOpenFile?: (path: string) => void;
+  /** Opens an artifact (a page, document, diagram…) in the chat's own panel. */
+  onOpenArtifact?: (path: string) => void;
+  /** The turn is still working: only its artifact cards so far. */
+  pending?: boolean;
 }) {
   const { t } = useTranslation("sessions");
   // `counted`: a result carried its +/- lines (an older server sends none).
   const files = new Map<string, { added: number; removed: number; counted: boolean }>();
+  // Written whole in this turn (a Write): a component made here is an artifact.
+  const created = new Set<string>();
   for (const b of blocks) {
     const input = (b.input ?? {}) as Record<string, unknown>;
     const p = input.file_path ?? input.notebook_path;
     const r = b.id ? toolResultMap.get(b.id) : undefined;
     if (typeof p !== "string" || !r || r.is_error) continue;
+    if (b.name === "Write") created.add(p);
     const f = files.get(p) ?? { added: 0, removed: 0, counted: false };
     f.added += r.diff?.added ?? 0;
     f.removed += r.diff?.removed ?? 0;
     f.counted ||= !!r.diff;
     files.set(p, f);
   }
-  if (files.size === 0) return null;
+  const artifacts = [...files.keys()].filter((p) => isArtifact(p, created.has(p)));
+  const cards = artifacts.length > 0 && (
+    <div data-testid="artifact-cards" className="flex flex-col gap-2">
+      {artifacts.map((p) => (
+        <ArtifactCard key={p} path={p} onOpen={onOpenArtifact ?? onOpenFile} />
+      ))}
+    </div>
+  );
+  if (pending) return cards || null;
+  for (const p of artifacts) files.delete(p);
+  if (files.size === 0) return cards || null;
   let added = 0;
   let removed = 0;
   let counted = false;
@@ -643,7 +710,7 @@ function EditedFilesCard({
         <span className="text-status-danger">−{r}</span>
       </span>
     );
-  return (
+  const list = (
     <div data-testid="edited-files" className="overflow-hidden rounded-xl border border-border">
       <div
         draggable
@@ -673,11 +740,21 @@ function EditedFilesCard({
       ))}
     </div>
   );
+  return cards ? (
+    <div className="flex flex-col gap-2">
+      {cards}
+      {list}
+    </div>
+  ) : (
+    list
+  );
 }
 const EditedFiles = memo(
   EditedFilesCard,
   (p, n) =>
     p.onOpenFile === n.onOpenFile &&
+    p.onOpenArtifact === n.onOpenArtifact &&
+    p.pending === n.pending &&
     sameBlocks(p.blocks, n.blocks) &&
     sameResults(n.blocks, p.toolResultMap, n.toolResultMap)
 );
@@ -688,6 +765,7 @@ function MessageListView({
   messages,
   loading,
   onOpenFile,
+  onOpenArtifact,
   live = false,
   waiting = false,
   onOpenTerminal,
@@ -780,14 +858,16 @@ function MessageListView({
                   />
                 );
               case "edits":
-                // The card closes a finished turn; one still working has none yet.
-                if (pending && item === items[items.length - 1]) return null;
+                // The card closes a finished turn; one still working shows
+                // only the artifacts it made so far, as Claude Desktop does.
                 return (
                   <EditedFiles
                     key={item.key}
                     blocks={item.blocks}
                     toolResultMap={toolResultMap}
                     onOpenFile={onOpenFile}
+                    onOpenArtifact={onOpenArtifact}
+                    pending={!!pending && item === items[items.length - 1]}
                   />
                 );
               case "done":

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

@@ -0,0 +1,74 @@
+/**
+ * @file ConversationView.pushed.test.tsx
+ * @description The server says a session's transcript grew
+ * (`transcript_changed`): the chat showing that session reads the new lines
+ * at once, and again within a short window after a burst — not at the hook
+ * throttle's 1.5 s pace — while another session's notice fetches nothing.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { act, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ConversationView } from "../ConversationView";
+import { api } from "../../../lib/api";
+import { eventBus } from "../../../lib/eventBus";
+
+vi.mock("../../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>();
+  return {
+    ...actual,
+    api: {
+      sessions: {
+        transcripts: vi.fn(async () => ({ transcripts: [] })),
+        transcript: vi.fn(async () => ({
+          messages: [
+            {
+              type: "user",
+              content: [{ type: "text", text: "hello" }],
+              timestamp: "2026-10-21T00:00:00Z",
+            },
+          ],
+          total: 1,
+          has_more: false,
+          first_line: 1,
+          last_line: 1,
+        })),
+      },
+    },
+  };
+});
+
+afterEach(() => {
+  vi.useRealTimers();
+  vi.clearAllMocks();
+});
+
+const pushed = (session_id: string) =>
+  act(() => eventBus.publish({ type: "transcript_changed", data: { session_id } } as never));
+const calls = () => vi.mocked(api.sessions.transcript).mock.calls.length;
+
+describe("ConversationView on transcript_changed", () => {
+  it("reads its own session's new lines at once, and a burst within 300 ms", async () => {
+    render(<ConversationView sessionId="s1" fill live />);
+    await screen.findByText("hello");
+    vi.useFakeTimers();
+    const before = calls();
+    pushed("s1");
+    expect(calls()).toBe(before + 1);
+    pushed("s1");
+    pushed("s1");
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(350);
+    });
+    expect(calls()).toBe(before + 2);
+  });
+
+  it("ignores another session's transcript", async () => {
+    render(<ConversationView sessionId="s1" fill live />);
+    await screen.findByText("hello");
+    const before = calls();
+    pushed("s2");
+    await act(async () => {});
+    expect(calls()).toBe(before);
+  });
+});

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

@@ -46,7 +46,7 @@ describe("the Edited N files card", () => {
           user("fix it"),
           call("1", "Edit", "/w/a.ts"),
           result("1", { added: 3, removed: 1 }),
-          call("2", "Write", "/w/b.md"),
+          call("2", "Write", "/w/b.json"),
           result("2", { added: 10, removed: 0 }),
           call("3", "Edit", "/w/a.ts"),
           result("3", { added: 2, removed: 2 }),
@@ -65,8 +65,35 @@ describe("the Edited N files card", () => {
     expect(within(card).getByText("+15")).toBeTruthy();
     expect(within(card).getByText("+5")).toBeTruthy(); // a.ts: 3+2 added
     expect(within(card).queryByText("c.ts")).toBeNull(); // failed
-    fireEvent.click(within(card).getByTitle("/w/b.md"));
-    expect(onOpenFile).toHaveBeenCalledWith("/w/b.md");
+    fireEvent.click(within(card).getByTitle("/w/b.json"));
+    expect(onOpenFile).toHaveBeenCalledWith("/w/b.json");
+  });
+
+  it("shows a page or document the turn made as an artifact card, opened in the chat's panel", () => {
+    const onOpenFile = vi.fn();
+    const onOpenArtifact = vi.fn();
+    render(
+      <MessageList
+        loading={false}
+        onOpenFile={onOpenFile}
+        onOpenArtifact={onOpenArtifact}
+        messages={[
+          user("make a page"),
+          call("1", "Write", "/w/page.html"),
+          result("1", { added: 20, removed: 0 }),
+          call("2", "Edit", "/w/App.tsx"),
+          result("2", { added: 1, removed: 1 }),
+          user("thanks"),
+        ]}
+      />
+    );
+    const cards = screen.getAllByTestId("artifact-card");
+    // A .tsx it only edited is project code, not an artifact.
+    expect(cards).toHaveLength(1);
+    expect(cards[0]!.textContent).toContain("page");
+    fireEvent.click(cards[0]!);
+    expect(onOpenArtifact).toHaveBeenCalledWith("/w/page.html");
+    expect(within(screen.getByTestId("edited-files")).getByTitle("/w/App.tsx")).toBeTruthy();
   });
 
   it("drags a row as its @path attachment, and the header as every file", () => {
@@ -77,7 +104,7 @@ describe("the Edited N files card", () => {
           user("fix it"),
           call("1", "Edit", "/w/a.ts"),
           result("1", { added: 1, removed: 0 }),
-          call("2", "Write", "/w/b.md"),
+          call("2", "Write", "/w/b.json"),
           result("2", { added: 2, removed: 0 }),
         ]}
       />
@@ -90,14 +117,14 @@ describe("the Edited N files card", () => {
       });
       return data;
     };
-    const one = drag(within(card).getByTitle("/w/b.md"));
+    const one = drag(within(card).getByTitle("/w/b.json"));
     expect(JSON.parse(one["application/x-agenthub-attach"]!)).toEqual([
-      { path: "@/w/b.md", name: "b.md" },
+      { path: "@/w/b.json", name: "b.json" },
     ]);
-    expect(one["text/plain"]).toBe("/w/b.md");
+    expect(one["text/plain"]).toBe("/w/b.json");
     const all = drag(within(card).getByText("Edited 2 files"));
     expect(
       JSON.parse(all["application/x-agenthub-attach"]!).map((a: { path: string }) => a.path)
-    ).toEqual(["@/w/a.ts", "@/w/b.md"]);
+    ).toEqual(["@/w/a.ts", "@/w/b.json"]);
   });
 });

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

@@ -103,6 +103,7 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Copy, Check } from "lucide-react";
+import { copyText } from "../../lib/clipboard";
 
 // ───────────────────────── Copy button ─────────────────────────
 
@@ -111,13 +112,9 @@ export function CopyButton({ text }: { text: string }) {
   const [copied, setCopied] = useState(false);
 
   async function copy() {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1500);
-    } catch {
-      // Clipboard API can fail in insecure contexts - silently ignore.
-    }
+    if (!(await copyText(text, true))) return;
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
   }
 
   return (

client/src/components/lanes/FileExplorer.tsx

@@ -22,6 +22,9 @@
  * another user's. An admin's Trash opens on one folder per user (with its
  * item count); each folder is THAT user's Trash, to restore from or purge
  * without waiting the 7 days.
+ * The sidebar nests each workspace under its owner's home (a chevron drops
+ * them down, remembered per browser); one with no owner home stays in a flat
+ * Workspaces list.
  * Server side: `/api/lanes/:id/fs/*` and `/api/homes/:who/fs/*`
  * (server/lib/file-explorer.js).
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
@@ -92,6 +95,8 @@ import { formatBytes } from "../../lib/format";
 import { copyText } from "../../lib/clipboard";
 import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../ContextMenu";
 import { CloneHereDialog } from "./CloneHereDialog";
+import { isSubmitEnter } from "../../lib/keys";
+import { useAuth } from "../AuthGate";
 
 /** One upload batch at most (the server caps one file the same). */
 export const FX_BATCH_MAX_BYTES = 500 * 1024 * 1024;
@@ -136,6 +141,11 @@ export function packUploads<T extends { file: Blob; rel: string }>(files: T[]) {
 const MIME = "application/x-agenthub-fx";
 const VIEW_KEY = "agenthub.files.view";
 const HIDDEN_KEY = "agenthub.files.hidden";
+/** The sidebar homes whose workspaces are dropped down (a JSON list of home ids). */
+const HOMES_OPEN_KEY = "agenthub.files.homesOpen";
+/** A sidebar user row; `noHome`: it only groups an owner's workspaces, the
+ *  viewer may not open that home (an analyst's view of other users). */
+type UserRow = FsHome & { noHome?: boolean };
 
 type Clip = { place: FsPlace; paths: string[]; cut: boolean };
 // The clipboard outlives the dialog and a workspace switch, like a desktop's.
@@ -318,6 +328,16 @@ export function FileBrowser({
     bytes: number;
   } | null>(null);
   const [lanes, setLanes] = useState<Lane[]>([]);
+  const { state: auth } = useAuth();
+  const myId = auth.mode === "server" ? (auth.user?.id ?? null) : null;
+  const [openHomes, setOpenHomes] = useState<Set<string>>(() => {
+    try {
+      const v: unknown = JSON.parse(readPref(HOMES_OPEN_KEY, '["me"]'));
+      return new Set(Array.isArray(v) ? v.filter((x): x is string => typeof x === "string") : []);
+    } catch {
+      return new Set(["me"]);
+    }
+  });
   const [clip, setClip] = useState<Clip | null>(clipboard);
   const [dropping, setDropping] = useState(false);
   const [menu, setMenu] = useState<"new" | "upload" | "more" | null>(null);
@@ -891,6 +911,52 @@ export function FileBrowser({
         onCancel={() => setRenaming(null)}
       />
     ) : null;
+  // Each workspace drops down under its owner: the caller's own under My
+  // home, another user's under theirs (`owner_name` = that home's id). An
+  // owner whose home this viewer may not open (an analyst's view of other
+  // users) still gets a row, one that only groups. A workspace with no owner
+  // stays in the flat Workspaces list. Which rows are open is per browser.
+  const { lanesOfHome, userRows } = useMemo(() => {
+    const ids = new Set(homes.map((h) => h.id));
+    const map = new Map<string, Lane[]>();
+    const extra = new Map<string, UserRow>();
+    for (const l of lanes) {
+      const home =
+        myId != null && l.owner_id === myId && ids.has("me")
+          ? "me"
+          : l.owner_name && l.owner_name !== "me"
+            ? l.owner_name
+            : null;
+      if (!home) continue;
+      map.set(home, [...(map.get(home) ?? []), l]);
+      if (!ids.has(home) && !extra.has(home)) {
+        extra.set(home, {
+          id: home,
+          label: l.owner_display_name || home,
+          readOnly: true,
+          noHome: true,
+        });
+      }
+    }
+    const rows: UserRow[] = [
+      ...homes.filter((h) => h.id !== "me"),
+      ...[...extra.values()].sort((a, b) => a.label.localeCompare(b.label)),
+    ];
+    return { lanesOfHome: map, userRows: rows };
+  }, [homes, lanes, myId]);
+  const grouped = new Set([...lanesOfHome.values()].flat().map((l) => l.id));
+  const looseLanes = lanes.filter((l) => !grouped.has(l.id));
+  // A home holding the open workspace shows it, whatever was stored.
+  const homeIsOpen = (id: string, own: Lane[]) =>
+    openHomes.has(id) ||
+    (view === "files" && !isHomePlace(target) && own.some((l) => l.id === laneOf(target)));
+  const toggleHome = (id: string, own: Lane[]) => {
+    const next = new Set(openHomes);
+    if (homeIsOpen(id, own)) next.delete(id);
+    else next.add(id);
+    setOpenHomes(next);
+    writePref(HOMES_OPEN_KEY, JSON.stringify([...next]));
+  };
   const placeClass = (active: boolean) =>
     `flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[13px] ${
       active ? "bg-accent/15 font-medium text-accent" : "text-fg-secondary hover:bg-surface-2"
@@ -919,64 +985,104 @@ export function FileBrowser({
       {/* ── Places ── */}
       <aside className="hidden w-52 shrink-0 flex-col border-r border-border bg-surface-0 sm:flex">
         <nav className="min-h-0 flex-1 overflow-y-auto px-2 pb-2" aria-label={t("fx.places")}>
-          {homes.some((h) => h.id === "me") && (
-            <div className="pt-3">
+          {(() => {
+            const laneRow = (l: Lane, nested: boolean) => (
               <button
+                key={l.id}
                 type="button"
-                onClick={() => go("", { home: "me" })}
-                onContextMenu={(e) => placeCtx.open(e, { home: "me" })}
-                className={placeClass(
-                  view === "files" && isHomePlace(target) && target.home === "me"
-                )}
+                title={l.cwd}
+                onClick={() => go("", l.id)}
+                onContextMenu={(e) => placeCtx.open(e, { lane: l })}
+                className={`${placeClass(
+                  view === "files" && !isHomePlace(target) && laneOf(target) === l.id
+                )}${nested ? " pl-7" : ""}`}
               >
-                <House className="h-4 w-4 shrink-0" />
-                <span className="truncate">{t("fx.myHome")}</span>
+                <FolderGit2 className="h-4 w-4 shrink-0" />
+                <span className="truncate">{l.title || l.cwd.split("/").pop()}</span>
               </button>
-            </div>
-          )}
-          {homes.some((h) => h.id !== "me") && (
-            <>
-              <p className="px-2 pb-1 pt-3 text-[10px] font-semibold uppercase tracking-wider text-fg-muted">
-                {t("fx.userHomes")}
-              </p>
-              {homes
-                .filter((h) => h.id !== "me")
-                .map((h) => (
-                  <button
-                    key={h.id}
-                    type="button"
-                    title={t("fx.readOnlyHome")}
-                    onClick={() => go("", { home: h.id })}
-                    onContextMenu={(e) => placeCtx.open(e, { home: h.id })}
-                    className={placeClass(
-                      view === "files" && isHomePlace(target) && target.home === h.id
-                    )}
-                  >
-                    <UserRound className="h-4 w-4 shrink-0" />
-                    <span className="truncate">{h.label}</span>
-                    <Eye className="ml-auto h-3 w-3 shrink-0 opacity-60" />
-                  </button>
-                ))}
-            </>
-          )}
-          <p className="px-2 pb-1 pt-3 text-[10px] font-semibold uppercase tracking-wider text-fg-muted">
-            {t("fx.places")}
-          </p>
-          {lanes.map((l) => (
-            <button
-              key={l.id}
-              type="button"
-              title={l.cwd}
-              onClick={() => go("", l.id)}
-              onContextMenu={(e) => placeCtx.open(e, { lane: l })}
-              className={placeClass(
-                view === "files" && !isHomePlace(target) && laneOf(target) === l.id
-              )}
-            >
-              <FolderGit2 className="h-4 w-4 shrink-0" />
-              <span className="truncate">{l.title || l.cwd.split("/").pop()}</span>
-            </button>
-          ))}
+            );
+            // A home row with a chevron: its user's workspaces drop down under it.
+            const homeRow = (h: UserRow) => {
+              const own = lanesOfHome.get(h.id) ?? [];
+              const open = own.length > 0 && homeIsOpen(h.id, own);
+              const mine = h.id === "me";
+              // No home to open: the name drops the list down too.
+              const browse = !h.noHome;
+              return (
+                <div key={h.id} data-testid={`fx-home-${h.id}`}>
+                  <div className="flex items-center">
+                    <button
+                      type="button"
+                      aria-label={t("fx.toggleWorkspaces", {
+                        name: mine ? t("fx.myHome") : h.label,
+                      })}
+                      aria-expanded={open}
+                      disabled={!own.length}
+                      onClick={() => toggleHome(h.id, own)}
+                      className="flex h-6 w-5 shrink-0 items-center justify-center rounded text-fg-muted hover:bg-surface-2 disabled:opacity-0"
+                    >
+                      {open ? (
+                        <ChevronDown className="h-3.5 w-3.5" />
+                      ) : (
+                        <ChevronRight className="h-3.5 w-3.5" />
+                      )}
+                    </button>
+                    <button
+                      type="button"
+                      title={mine || !browse ? undefined : t("fx.readOnlyHome")}
+                      aria-expanded={browse ? undefined : open}
+                      onClick={() => (browse ? go("", { home: h.id }) : toggleHome(h.id, own))}
+                      onContextMenu={browse ? (e) => placeCtx.open(e, { home: h.id }) : undefined}
+                      className={placeClass(
+                        browse && view === "files" && isHomePlace(target) && target.home === h.id
+                      )}
+                    >
+                      {mine ? (
+                        <House className="h-4 w-4 shrink-0" />
+                      ) : (
+                        <UserRound className="h-4 w-4 shrink-0" />
+                      )}
+                      <span className="truncate">{mine ? t("fx.myHome") : h.label}</span>
+                      {own.length > 0 && (
+                        <span className="ml-auto shrink-0 text-[11px] tabular-nums text-fg-muted">
+                          {own.length}
+                        </span>
+                      )}
+                      {!mine && browse && (
+                        <Eye
+                          className={`${own.length ? "" : "ml-auto "}h-3 w-3 shrink-0 opacity-60`}
+                        />
+                      )}
+                    </button>
+                  </div>
+                  {open && own.map((l) => laneRow(l, true))}
+                </div>
+              );
+            };
+            const me = homes.find((h) => h.id === "me");
+            const others = userRows;
+            return (
+              <>
+                {me && <div className="pt-3">{homeRow(me)}</div>}
+                {others.length > 0 && (
+                  <>
+                    <p className="px-2 pb-1 pt-3 text-[10px] font-semibold uppercase tracking-wider text-fg-muted">
+                      {others.some((h) => !h.noHome) ? t("fx.userHomes") : t("fx.users")}
+                    </p>
+                    {others.map(homeRow)}
+                  </>
+                )}
+                {looseLanes.length > 0 && (
+                  <>
+                    <p className="px-2 pb-1 pt-3 text-[10px] font-semibold uppercase tracking-wider text-fg-muted">
+                      {t("fx.places")}
+                    </p>
+                    {looseLanes.map((l) => laneRow(l, false))}
+                  </>
+                )}
+              </>
+            );
+          })()}
         </nav>
         <div className="border-t border-border p-2" data-testid="fx-trashes">
           <button type="button" onClick={openTrashes} className={placeClass(view === "trash")}>
@@ -1987,7 +2093,7 @@ function InlineName({
       onDoubleClick={(e) => e.stopPropagation()}
       onKeyDown={(e) => {
         e.stopPropagation();
-        if (e.key === "Enter") onDone();
+        if (isSubmitEnter(e)) onDone();
         if (e.key === "Escape") onCancel();
       }}
       onBlur={onDone}

client/src/components/lanes/LaneChangesPanel.tsx

@@ -106,6 +106,7 @@ import {
 import { api, gitTarget } from "../../lib/api";
 import { usePermissions } from "../AuthGate";
 import { pasteToLane } from "../../lib/panePaste";
+import { readMarkdownPreview } from "../../lib/markdownView";
 import { confirmDialog, confirmDiscard as askDiscard } from "../../lib/confirm";
 import { copyText } from "../../lib/clipboard";
 import { isSubmitEnter } from "../../lib/keys";
@@ -873,9 +874,10 @@ export function LaneChangesPanel({
   const [layout, setLayout] = useState<DiffLayout>(wide ? "split" : "unified");
   useEffect(() => setLayout(wide ? "split" : "unified"), [wide]);
   const [whole, setWhole] = useState(false);
-  // A whole markdown file shown rendered instead of as source; per file.
-  const [mdPreview, setMdPreview] = useState(false);
-  useEffect(() => setMdPreview(false), [openFile]);
+  // A whole markdown file shown rendered instead of as source; per file, each
+  // one opening as Settings → Appearance says (`lib/markdownView.ts`).
+  const [mdPreview, setMdPreview] = useState(readMarkdownPreview);
+  useEffect(() => setMdPreview(readMarkdownPreview()), [openFile]);
   const [data, setData] = useState<LaneChanges | null>(null);
   // A folder that is not a repo (an empty new workspace, a parent of clones)
   // has no changes, review or history — only its files, which Files reads
@@ -1061,6 +1063,9 @@ export function LaneChangesPanel({
   const [historyLoading, setHistoryLoading] = useState(false);
   useEffect(() => {
     if (mode !== "history") return;
+    // A reply for the previous ref/file/page lands after the next request
+    // started: drop it, or it overwrites the list the user is looking at.
+    let live = true;
     setHistoryLoading(true);
     void api.lanes
       .gitLog(target, {
@@ -1068,16 +1073,23 @@ export function LaneChangesPanel({
         ...(historyRef ? { ref: historyRef } : {}),
         ...(historyFile ? { file: historyFile } : {}),
       })
-      .then(forLane(laneId, (r) => setCommits(r.commits)))
-      .catch((err) => setError(err instanceof Error ? err.message : String(err)))
-      .finally(() => laneNow.current === laneId && setHistoryLoading(false));
+      .then(forLane(laneId, (r) => live && setCommits(r.commits)))
+      .catch((err) => live && setError(err instanceof Error ? err.message : String(err)))
+      .finally(() => live && laneNow.current === laneId && setHistoryLoading(false));
+    return () => {
+      live = false;
+    };
   }, [mode, laneId, reread, historyLimit, historyRef, historyFile]);
   useEffect(() => {
     if (mode !== "history") return;
+    let live = true;
     void api.lanes
       .gitBranches(target)
-      .then(forLane(laneId, (r) => setHistoryBranches(r.branches)))
-      .catch(() => setHistoryBranches([]));
+      .then(forLane(laneId, (r) => live && setHistoryBranches(r.branches)))
+      .catch(() => live && setHistoryBranches([]));
+    return () => {
+      live = false;
+    };
   }, [mode, laneId, reread]);
 
   // Re-run when a lane switch empties the cache too: the full-width sidebar
@@ -1171,24 +1183,33 @@ export function LaneChangesPanel({
   // own fetch — and only while the viewer is actually showing it.
   useEffect(() => {
     if (mode !== "file" || !(whole || editable) || !openFile) return;
+    // Opening file B before file A's read came back must not show (and let the
+    // editor save) A's text under B's header.
+    let live = true;
     void api.lanes
       .gitFile(target, openFile, range === "commit" && sha ? sha : "work")
       .then(
-        forLane(laneId, (r) =>
-          setText(
-            r.available
-              ? {
-                  path: r.path,
-                  lines: r.lines,
-                  truncated: r.truncated,
-                  binary: r.binary,
-                  sha: r.sha,
-                }
-              : null
-          )
+        forLane(
+          laneId,
+          (r) =>
+            live &&
+            setText(
+              r.available
+                ? {
+                    path: r.path,
+                    lines: r.lines,
+                    truncated: r.truncated,
+                    binary: r.binary,
+                    sha: r.sha,
+                  }
+                : null
+            )
         )
       )
-      .catch((err) => setError(err instanceof Error ? err.message : String(err)));
+      .catch((err) => live && setError(err instanceof Error ? err.message : String(err)));
+    return () => {
+      live = false;
+    };
   }, [mode, whole, editable, openFile, laneId, range, sha]);
   // The editor's original side, read beside the working file. A file that is
   // not there (new since) diffs against nothing: every line is added.
@@ -1196,10 +1217,17 @@ export function LaneChangesPanel({
   useEffect(() => {
     if (mode !== "file" || !(whole || editable) || !openFile || range === "commit") return;
     const rev = range === "branch" && mergeBase ? mergeBase : "HEAD";
+    let live = true;
     void api.lanes.gitFile(target, openFile, rev).then(
-      forLane(laneId, (r) => setBaseText(r.available && !r.binary ? r.lines.join("\n") : "")),
-      forLane(laneId, () => setBaseText(""))
+      forLane(
+        laneId,
+        (r) => live && setBaseText(r.available && !r.binary ? r.lines.join("\n") : "")
+      ),
+      forLane(laneId, () => live && setBaseText(""))
     );
+    return () => {
+      live = false;
+    };
   }, [mode, whole, editable, openFile, laneId, range, mergeBase]);
 
   useEffect(() => {
@@ -1422,6 +1450,27 @@ export function LaneChangesPanel({
     }
   };
 
+  // Discard all: every non-conflicted file in one `discard`, asked once in a
+  // dialog that names how many untracked files it will delete.
+  const discardAll = async () => {
+    const rows = files.filter((f) => !f.conflicted);
+    if (!rows.length) return;
+    const ok = await confirmDialog({
+      title: t("changes.discardAllTitle"),
+      message: t("changes.discardAllConfirm", {
+        count: rows.length,
+        untracked: rows.filter((f) => f.untracked).length,
+      }),
+      confirmLabel: t("changes.discardAll"),
+    });
+    if (ok)
+      await act(
+        "discard",
+        rows.map((f) => f.path),
+        true
+      );
+  };
+
   // resolve / merge-commit / merge-abort: same shape as `act`, other body.
   const mergeAct = async (
     action: "resolve" | "merge-commit" | "merge-abort",
@@ -1993,6 +2042,8 @@ export function LaneChangesPanel({
     });
 
   const dirty = draft !== null && draft !== text?.lines.join("\n");
+  // Rendered only where the toggle is offered: a whole markdown file.
+  const mdShown = mdPreview && whole && isMarkdown(openFile);
   dirtyRef.current = dirty;
   useUnsavedGuard(dirty);
   const dirtyChangeRef = useRef(onDirtyChange);
@@ -2756,6 +2807,17 @@ export function LaneChangesPanel({
                     >
                       {t(amend ? "changes.amendAndPush" : "changes.commitAndPush")}
                     </button>
+                    <button
+                      type="button"
+                      data-testid="lane-changes-discard-all"
+                      disabled={busy}
+                      onClick={() => void discardAll()}
+                      title={t("changes.discardAllTitle")}
+                      className="shrink-0 flex items-center gap-1 rounded border border-border-light px-1.5 py-0.5 text-[11px] text-status-danger hover:bg-status-danger/10 disabled:cursor-not-allowed disabled:opacity-40"
+                    >
+                      <Trash2 className="h-3 w-3" aria-hidden />
+                      {t("changes.discardAll")}
+                    </button>
                   </div>
                 </div>
               )}
@@ -2995,7 +3057,7 @@ export function LaneChangesPanel({
                       range === "commit" && sha ? sha : "work"
                     )}
                   />
-                ) : !mdPreview &&
+                ) : !mdShown &&
                   (whole || editable) &&
                   (draft !== null || (editable && text === null)) ? (
                   // The editor, once both texts are in: not the diff first.
@@ -3051,7 +3113,7 @@ export function LaneChangesPanel({
                     </Suspense>
                   )
                 ) : whole ? (
-                  text && mdPreview ? (
+                  text && mdShown ? (
                     <div className="min-h-0 flex-1 overflow-auto rounded border border-border-light bg-surface-0 p-4">
                       <MarkdownPreview text={text.lines.join("\n")} />
                     </div>

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

@@ -7,7 +7,9 @@
  * Trash, opens an admin's Trash on one folder per user (counted, an unreadable
  * one saying why), opens each user's Trash from its folder (asking before a
  * purge there, sending the item's store) and
- * shows a Trash that could not be read as an error, never as empty.
+ * shows a Trash that could not be read as an error, never as empty; nests a
+ * user's workspaces under their home in the sidebar (under a fold-only row
+ * when the viewer may not open that home).
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 import { describe, it, expect, vi, beforeEach } from "vitest";
@@ -470,6 +472,59 @@ describe("FileExplorer", () => {
     fireEvent.keyDown(screen.getByTestId("fx-list"), { key: "Delete" });
     expect(api.files.remove).not.toHaveBeenCalled();
   });
+
+  it("drops a user's workspaces down under their home; an unowned one stays in the list", async () => {
+    localStorage.removeItem("agenthub.files.homesOpen");
+    vi.mocked(api.lanes.list).mockResolvedValue({
+      lanes: [
+        { id: 1, title: "one", cwd: "/w/one" },
+        { id: 2, title: "two", cwd: "/w/two", owner_id: 7, owner_name: "bob" },
+      ],
+      counts: {},
+    } as never);
+    const user = userEvent.setup();
+    open();
+    await screen.findByText("a.txt");
+    const toggle = await screen.findByRole("button", { name: "Show or hide Bob’s workspaces" });
+    expect(toggle).toHaveAttribute("aria-expanded", "false");
+    const places = screen.getByRole("navigation", { name: "Workspaces" });
+    expect(within(places).queryByRole("button", { name: "two" })).toBeNull();
+    expect(within(places).getByRole("button", { name: "one" })).toBeInTheDocument();
+    await user.click(toggle);
+    await user.click(within(places).getByRole("button", { name: "two" }));
+    await waitFor(() => expect(api.files.list).toHaveBeenLastCalledWith(2, ""));
+    expect(localStorage.getItem("agenthub.files.homesOpen")).toContain("bob");
+  });
+
+  it("groups an owner whose home the viewer cannot open (an analyst) under a row that only folds", async () => {
+    localStorage.removeItem("agenthub.files.homesOpen");
+    vi.mocked(api.files.homes).mockResolvedValue({
+      homes: [{ id: "me", label: "An", readOnly: false }],
+    });
+    vi.mocked(api.lanes.list).mockResolvedValue({
+      lanes: [
+        { id: 1, title: "one", cwd: "/w/one" },
+        {
+          id: 3,
+          title: "three",
+          cwd: "/w/three",
+          owner_id: 9,
+          owner_name: "cara",
+          owner_display_name: "Cara",
+        },
+      ],
+      counts: {},
+    } as never);
+    const user = userEvent.setup();
+    open();
+    await screen.findByText("a.txt");
+    const places = screen.getByRole("navigation", { name: "Workspaces" });
+    expect(within(places).getByText("Users")).toBeInTheDocument();
+    expect(within(places).queryByRole("button", { name: "three" })).toBeNull();
+    await user.click(within(places).getByRole("button", { name: /^Cara/ }));
+    expect(api.files.list).not.toHaveBeenCalledWith({ home: "cara" }, "");
+    expect(within(places).getByRole("button", { name: "three" })).toBeInTheDocument();
+  });
 });
 
 describe("FileExplorer — New → Clone repository", () => {

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

@@ -514,7 +514,7 @@ describe("LaneChangesPanel", () => {
     expect(screen.getByText("Unversioned Files")).toBeInTheDocument();
   });
 
-  it("reads a whole markdown file rendered after Preview, and back as source after Raw", async () => {
+  it("opens a whole markdown file rendered, as source after Raw, and rendered again after Preview", async () => {
     vi.mocked(api.lanes.gitTree).mockResolvedValue({
       available: true,
       path: "",
@@ -534,12 +534,13 @@ describe("LaneChangesPanel", () => {
     render(<LaneChangesPanel laneId={7} full />);
     const sidebar = await screen.findByTestId("lane-changes-sidebar");
     await user.click(await within(sidebar).findByText("README.md"));
-    await screen.findByTestId("lane-file-editor");
-    await user.click(screen.getByTestId("lane-file-preview"));
-    expect(screen.getByRole("heading", { name: "Hello" })).toBeInTheDocument();
+    expect(await screen.findByRole("heading", { name: "Hello" })).toBeInTheDocument();
     expect(screen.queryByTestId("lane-file-editor")).toBeNull();
     await user.click(screen.getByTestId("lane-file-preview"));
     expect(await screen.findByTestId("lane-file-editor")).toHaveValue("# Hello\n\n- one");
+    await user.click(screen.getByTestId("lane-file-preview"));
+    expect(screen.getByRole("heading", { name: "Hello" })).toBeInTheDocument();
+    expect(screen.queryByTestId("lane-file-editor")).toBeNull();
   });
 
   it("shows an image file as the picture, with no edit control", async () => {
@@ -770,6 +771,24 @@ describe("LaneChangesPanel", () => {
     });
   });
 
+  it("discards every file at once only after the dialog is confirmed", async () => {
+    const user = userEvent.setup();
+    render(<LaneChangesPanel laneId={7} />);
+    await screen.findByTestId("lane-changes-overview");
+
+    vi.mocked(confirmDialog).mockResolvedValueOnce(false);
+    await user.click(screen.getByTestId("lane-changes-discard-all"));
+    expect(api.lanes.gitAction).not.toHaveBeenCalled();
+
+    await user.click(screen.getByTestId("lane-changes-discard-all"));
+    await waitFor(() =>
+      expect(api.lanes.gitAction).toHaveBeenCalledWith(7, "discard", {
+        paths: ["server/lib/git-ops.js", "notes.txt", "docs/API.md"],
+        confirm: true,
+      })
+    );
+  });
+
   it("right-click on a changed file offers Commit File, a two-click discard, copy path and patch", async () => {
     const user = userEvent.setup();
     render(<LaneChangesPanel laneId={7} />);

client/src/components/run/ChatFilePreview.tsx

@@ -18,15 +18,41 @@
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { useEffect, useRef, useState, type DragEvent } from "react";
+import { useEffect, useMemo, useRef, useState, type DragEvent } from "react";
 import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
-import { Copy, FileText, Loader2, X } from "lucide-react";
+import {
+  ChevronLeft,
+  ChevronRight,
+  Copy,
+  Download,
+  FileText,
+  Loader2,
+  Maximize2,
+  Minimize2,
+  Share2,
+  X,
+} from "lucide-react";
 import { api, gitTarget } from "../../lib/api";
 import { copyText } from "../../lib/clipboard";
 import { useDialog } from "../../hooks/useDialog";
 import { dragSkill } from "../../lib/promptAttach";
-import { MarkdownPreview, isMarkdown } from "../MarkdownPreview";
+import { readMarkdownPreview } from "../../lib/markdownView";
+import { MarkdownPreview } from "../MarkdownPreview";
+import { CodeBlock } from "../conversation/CodeBlock";
+import { useTheme } from "../../hooks/useTheme";
+import { toast } from "../../lib/toast";
+import type { TranscriptMessage } from "../../lib/types";
+import {
+  RENDERED,
+  artifactDocument,
+  artifactKind,
+  artifactLang,
+  artifactVersions,
+  frameSandbox,
+  parseCsv,
+  type ArtifactKind,
+} from "../../lib/artifactView";
 
 /** Where a Chat pane's files can be read from. */
 export interface PreviewScope {
@@ -146,33 +172,96 @@ function useContent(path: string, scope: PreviewScope): Content {
   return content;
 }
 
-function Body({ path, scope }: { path: string; scope: PreviewScope }) {
+/** A CSV/TSV as a table (the first rows; a file is not a spreadsheet). */
+function CsvTable({ text, tab }: { text: string; tab: boolean }) {
+  const rows = useMemo(() => parseCsv(text, tab ? "\t" : ",").slice(0, 1000), [text, tab]);
+  const [head, ...body] = rows;
+  return (
+    <div className="min-h-0 flex-1 overflow-auto p-3">
+      <table className="w-full border-collapse text-xs">
+        {head && (
+          <thead className="sticky top-0 bg-surface-2">
+            <tr>
+              {head.map((h, i) => (
+                <th
+                  key={i}
+                  className="border border-border px-2 py-1 text-left font-medium text-fg-primary"
+                >
+                  {h}
+                </th>
+              ))}
+            </tr>
+          </thead>
+        )}
+        <tbody>
+          {body.map((r, i) => (
+            <tr key={i} className="odd:bg-surface-1 even:bg-surface-2/40">
+              {r.map((c, j) => (
+                <td key={j} className="border border-border px-2 py-1 text-fg-secondary">
+                  {c}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+/** An HTML, SVG, Mermaid or React artifact, running in its own sandbox:
+ *  scripts (none for an SVG) but never the dashboard's origin. */
+function ArtifactFrame({ kind, text, title }: { kind: ArtifactKind; text: string; title: string }) {
+  const { theme } = useTheme();
+  const doc = useMemo(() => artifactDocument(kind, text, theme === "dark"), [kind, text, theme]);
+  return (
+    <iframe
+      data-testid="artifact-frame"
+      title={title}
+      srcDoc={doc ?? ""}
+      sandbox={frameSandbox(kind)}
+      referrerPolicy="no-referrer"
+      className={`min-h-0 w-full flex-1 border-0 ${kind === "html" || kind === "react" ? "bg-white" : ""}`}
+    />
+  );
+}
+
+type View = "preview" | "code";
+
+/** A file's first tab: Preview where it renders — Markdown as Settings → Appearance says. */
+function defaultView(path: string): View {
+  const kind = artifactKind(path);
+  if (!RENDERED.has(kind)) return "code";
+  return kind === "markdown" && !readMarkdownPreview() ? "code" : "preview";
+}
+
+function Body({ path, content, view }: { path: string; content: Content; view: View }) {
   const { t } = useTranslation("run");
-  const loaded = useContent(path, scope);
+  const kind = artifactKind(path);
   // An image the route refused (gone, server mode) shows like no preview.
   const [broken, setBroken] = useState<string | null>(null);
-  const content: Content =
-    loaded.kind === "image" && loaded.src === broken ? { kind: "none" } : loaded;
-  if (content.kind === "loading") {
+  const shown: Content =
+    content.kind === "image" && content.src === broken ? { kind: "none" } : content;
+  if (shown.kind === "loading") {
     return (
       <div className="flex flex-1 items-center justify-center">
         <Loader2 className="h-5 w-5 animate-spin text-fg-muted" />
       </div>
     );
   }
-  if (content.kind === "image") {
+  if (shown.kind === "image") {
     return (
       <div className="flex flex-1 items-center justify-center overflow-auto p-4">
         <img
-          src={content.src}
+          src={shown.src}
           alt={baseName(path)}
-          onError={() => setBroken(content.src)}
+          onError={() => setBroken(shown.src)}
           className="max-h-full max-w-full object-contain"
         />
       </div>
     );
   }
-  if (content.kind === "none") {
+  if (shown.kind === "none") {
     return (
       <div className="flex flex-1 flex-col items-center justify-center gap-2 p-6 text-center text-sm text-fg-muted">
         <FileText className="h-8 w-8" />
@@ -181,69 +270,244 @@ function Body({ path, scope }: { path: string; scope: PreviewScope }) {
       </div>
     );
   }
-  return (
-    <div className="min-h-0 flex-1 overflow-auto">
-      {isMarkdown(path) ? (
-        <MarkdownPreview text={content.text} className="p-4" />
-      ) : (
-        <pre className="p-4 font-mono text-xs leading-relaxed text-fg-secondary">
-          {content.text}
-        </pre>
-      )}
-      {content.truncated && (
-        <p className="px-4 pb-4 text-xs text-fg-muted">{t("chat.outline.truncated")}</p>
-      )}
-    </div>
+  const note = shown.truncated && (
+    <p className="px-4 pb-4 text-xs text-fg-muted">{t("chat.outline.truncated")}</p>
   );
+  if (view === "code" || !RENDERED.has(kind)) {
+    return (
+      <div className="min-h-0 flex-1 overflow-auto p-3">
+        <CodeBlock code={shown.text} lang={artifactLang(path)} maxHeight="none" showLineNumbers />
+        {note}
+      </div>
+    );
+  }
+  if (kind === "markdown") {
+    return (
+      <div className="min-h-0 flex-1 overflow-auto">
+        <MarkdownPreview text={shown.text} className="p-4" />
+        {note}
+      </div>
+    );
+  }
+  if (kind === "csv") return <CsvTable text={shown.text} tab={/\.tsv$/i.test(path)} />;
+  return <ArtifactFrame kind={kind} text={shown.text} title={baseName(path)} />;
 }
 
-/** One file: header (name · EXT, Copy path, Close) over its content. */
+const iconBtn =
+  "flex h-7 w-7 items-center justify-center rounded text-fg-muted hover:bg-surface-3 hover:text-fg-primary disabled:opacity-40";
+
+/** Saves text (or an image's URL) as a file through the browser. */
+function download(name: string, content: Content) {
+  const a = document.createElement("a");
+  if (content.kind === "image") a.href = content.src;
+  else if (content.kind === "text")
+    a.href = URL.createObjectURL(new Blob([content.text], { type: "text/plain;charset=utf-8" }));
+  else return;
+  a.download = name;
+  a.click();
+  if (content.kind === "text") setTimeout(() => URL.revokeObjectURL(a.href), 1000);
+}
+
+/** One file, Claude Desktop's artifact view: name · EXT, Preview | Code, the
+ *  versions the conversation made of it, Copy, Download, Share to the
+ *  Artifacts Hub, full screen, Close. */
 export function FilePreview({
   path,
   scope,
   onClose,
   className = "",
+  messages,
 }: {
   path: string;
   scope: PreviewScope;
   onClose: () => void;
   className?: string;
+  /** The conversation, for the versions its Write/Edit calls left. */
+  messages?: TranscriptMessage[];
 }) {
   const { t } = useTranslation("run");
-  return (
+  const kind = artifactKind(path);
+  const loaded = useContent(path, scope);
+  const [view, setView] = useState<View>(() => defaultView(path));
+  const [full, setFull] = useState(false);
+  const [sharing, setSharing] = useState(false);
+  const versions = useMemo(
+    () => (messages ? artifactVersions(messages, path) : []),
+    [messages, path]
+  );
+  // null: the newest — the file as it is now.
+  const [picked, setPicked] = useState<number | null>(null);
+  // Another file opens on its own default tab, at its newest version.
+  useEffect(() => {
+    setPicked(null);
+    setView(defaultView(path));
+  }, [path]);
+  const last = Math.max(versions.length - 1, 0);
+  const at = picked ?? last;
+  const older = picked !== null && picked < last ? versions[picked] : null;
+  const content: Content =
+    older && older.content !== null
+      ? { kind: "text", text: older.content, truncated: false }
+      : loaded;
+  const known = (i: number) => i === last || versions[i]?.content != null;
+  const step = (dir: -1 | 1) => {
+    for (let i = at + dir; i >= 0 && i <= last; i += dir) {
+      if (known(i)) return setPicked(i === last ? null : i);
+    }
+  };
+  const share = async () => {
+    if (sharing) return;
+    setSharing(true);
+    try {
+      const file = slashed(path);
+      const base = slashed(scope.laneCwd).replace(/\/+$/, "");
+      if (scope.laneId !== null && base && file.startsWith(`${base}/`) && picked === null) {
+        await api.artifacts.pinFile({
+          laneId: scope.laneId,
+          path: file.slice(base.length + 1),
+          title: displayName(path),
+          ...(scope.sessionId ? { sessionId: scope.sessionId } : {}),
+        });
+      } else if (content.kind === "text") {
+        await api.artifacts.uploadFile(new File([content.text], displayName(path)), {
+          title: displayName(path),
+        });
+      } else throw new Error(t("chat.artifact.cannotShare"));
+      toast.success(t("chat.artifact.shared"));
+    } catch (err) {
+      toast.error(err);
+    } finally {
+      setSharing(false);
+    }
+  };
+  const panel = (
     <section
       data-testid="chat-file-preview"
-      className={`flex min-h-0 min-w-0 flex-col overflow-hidden bg-surface-1 ${className}`}
+      className={
+        full
+          ? "fixed inset-4 z-[200] flex min-h-0 min-w-0 flex-col overflow-hidden rounded-xl border border-border bg-surface-1 shadow-2xl"
+          : `flex min-h-0 min-w-0 flex-col overflow-hidden bg-surface-1 ${className}`
+      }
     >
-      <header className="flex items-center gap-2 border-b border-border px-4 py-2.5">
-        <span className="min-w-0 truncate text-sm text-fg-primary" title={path}>
+      <header className="flex items-center gap-2 border-b border-border px-3 py-2">
+        <button
+          type="button"
+          onClick={() => void copyText(path)}
+          title={t("chat.outline.copyPath", { path })}
+          className="min-w-0 truncate text-left text-sm text-fg-primary hover:underline"
+        >
           {displayName(path).replace(/\.[A-Za-z0-9]+$/, "")}
-        </span>
-        <span className="text-xs text-fg-muted">{extOf(path)}</span>
-        <div className="ml-auto flex items-center gap-1">
+        </button>
+        <span className="flex-shrink-0 text-xs text-fg-muted">{extOf(path)}</span>
+        {versions.length > 1 && (
+          <span
+            data-testid="artifact-versions"
+            className="flex flex-shrink-0 items-center text-xs text-fg-muted"
+          >
+            <button
+              type="button"
+              onClick={() => step(-1)}
+              disabled={![...Array(at).keys()].some(known)}
+              aria-label={t("chat.artifact.older")}
+              title={t("chat.artifact.older")}
+              className={iconBtn}
+            >
+              <ChevronLeft className="h-3.5 w-3.5" />
+            </button>
+            <span className="tabular-nums">
+              {t("chat.artifact.version", { n: at + 1, total: versions.length })}
+            </span>
+            <button
+              type="button"
+              onClick={() => step(1)}
+              disabled={at >= last}
+              aria-label={t("chat.artifact.newer")}
+              title={t("chat.artifact.newer")}
+              className={iconBtn}
+            >
+              <ChevronRight className="h-3.5 w-3.5" />
+            </button>
+          </span>
+        )}
+        <div className="ml-auto flex flex-shrink-0 items-center gap-1">
+          {RENDERED.has(kind) && kind !== "image" && (
+            <div role="tablist" className="mr-1 flex rounded-md border border-border p-0.5 text-xs">
+              {(["preview", "code"] as const).map((v) => (
+                <button
+                  key={v}
+                  type="button"
+                  role="tab"
+                  aria-selected={view === v}
+                  data-testid={`artifact-tab-${v}`}
+                  onClick={() => setView(v)}
+                  className={`rounded px-2 py-0.5 ${view === v ? "bg-surface-3 text-fg-primary" : "text-fg-muted hover:text-fg-primary"}`}
+                >
+                  {t(`chat.artifact.${v}`)}
+                </button>
+              ))}
+            </div>
+          )}
           <button
             type="button"
-            onClick={() => void copyText(path)}
-            title={t("chat.outline.copyPath", { path })}
-            aria-label={t("chat.outline.copyPath", { path })}
-            className="flex h-7 w-7 items-center justify-center rounded text-fg-muted hover:bg-surface-3 hover:text-fg-primary"
+            data-testid="artifact-copy"
+            onClick={() => void copyText(content.kind === "text" ? content.text : path)}
+            title={t("chat.artifact.copy")}
+            aria-label={t("chat.artifact.copy")}
+            className={iconBtn}
           >
             <Copy className="h-3.5 w-3.5" />
           </button>
+          <button
+            type="button"
+            onClick={() => download(displayName(path), content)}
+            disabled={content.kind !== "text" && content.kind !== "image"}
+            title={t("chat.artifact.download")}
+            aria-label={t("chat.artifact.download")}
+            className={iconBtn}
+          >
+            <Download className="h-3.5 w-3.5" />
+          </button>
+          <button
+            type="button"
+            data-testid="artifact-share"
+            onClick={() => void share()}
+            disabled={sharing || content.kind === "loading" || content.kind === "none"}
+            title={t("chat.artifact.share")}
+            aria-label={t("chat.artifact.share")}
+            className={iconBtn}
+          >
+            {sharing ? (
+              <Loader2 className="h-3.5 w-3.5 animate-spin" />
+            ) : (
+              <Share2 className="h-3.5 w-3.5" />
+            )}
+          </button>
+          <button
+            type="button"
+            data-testid="artifact-expand"
+            onClick={() => setFull((f) => !f)}
+            title={t(full ? "chat.artifact.collapse" : "chat.artifact.expand")}
+            aria-label={t(full ? "chat.artifact.collapse" : "chat.artifact.expand")}
+            className={iconBtn}
+          >
+            {full ? <Minimize2 className="h-3.5 w-3.5" /> : <Maximize2 className="h-3.5 w-3.5" />}
+          </button>
           <button
             type="button"
             onClick={onClose}
             title={t("chat.outline.close")}
             aria-label={t("chat.outline.close")}
-            className="flex h-7 w-7 items-center justify-center rounded text-fg-muted hover:bg-surface-3 hover:text-fg-primary"
+            className={iconBtn}
           >
             <X className="h-4 w-4" />
           </button>
         </div>
       </header>
-      <Body path={path} scope={scope} />
+      <Body path={path} content={content} view={view} />
     </section>
   );
+  // Full screen: over the whole page, where a pane's edges cannot clip it.
+  return full ? createPortal(panel, document.body) : panel;
 }
 
 /** Claude's Uploads dialog: the files on the left, the picked one on the right. */

client/src/components/run/LaneConsolePane.tsx

@@ -12,7 +12,8 @@
  * new lane's own live session for its slot, or an empty pane — never the
  * previous lane's terminal. `attachRequest` (a run picked in the sidebar or a
  * tab) attaches to that tmux session only; nothing is started or resumed.
- * A Claude or Codex pane also has a Chat view (`PaneChat`): the session's
+ * A pane of a `CHAT_TOOLS` tool (Claude, Codex, omp, Cursor, Antigravity) also
+ * has a Chat view (`PaneChat`): the session's
  * conversation laid OVER the terminal, which stays mounted and attached under
  * it. Chat or terminal is each SESSION's own (`useSessionChat`, the toggle
  * left of the pane's split buttons); the Chat UI setting (Settings →
@@ -29,9 +30,7 @@ import type { Lane } from "../../lib/types";
 import { useAiTools } from "../../hooks/useAiTools";
 import { TerminalView } from "./TerminalView";
 import { PaneChat } from "./PaneChat";
-import { useSessionChat } from "../../lib/chatUi";
-
-const CHAT_TOOLS = new Set(["claude", "codex"]);
+import { CHAT_TOOLS, useSessionChat } from "../../lib/chatUi";
 
 export interface LaneConsolePaneProps {
   lanes: Lane[];

client/src/components/run/PaneChat.tsx

@@ -15,7 +15,8 @@
  * in the box beside `+`. A menu the CLI asks with — AskUserQuestion, a
  * permission or trust prompt, Codex's approval — is read off the terminal
  * underneath (`readRunMenu`) and shown in the prompt box's place as buttons
- * that press its keys there (`PaneMenuCard`); its "Type something" row opens
+ * that press its keys there (`PaneMenuCard`) — a permission prompt with its tool, command and a deny-with-note
+ * (`PermissionMenuCard`); its "Type something" row opens
  * a field in the card, whose text is typed there as the answer
  * (`answerRunMenu`).
  * It also has Claude Desktop's activity panel (`ChatOutline`: progress,
@@ -56,7 +57,17 @@
 
 import { memo, useCallback, useEffect, useRef, useState, type CSSProperties } from "react";
 import { useTranslation } from "react-i18next";
-import { ArrowUp, FileText, Square, SquareCheck } from "lucide-react";
+import {
+  ArrowUp,
+  Check,
+  ChevronLeft,
+  ChevronRight,
+  FileText,
+  MessageCircleQuestion,
+  ShieldQuestion,
+  Square,
+  SquareCheck,
+} from "lucide-react";
 import { isSubmitEnter } from "../../lib/keys";
 import { ConversationView } from "../conversation/ConversationView";
 import {
@@ -77,7 +88,11 @@ import { Divider, showTerminal } from "./PaneGrid";
 import {
   answerRunMenu,
   chooseRunOption,
+  notePaneFocus,
+  onPaneOutput,
+  stepRunMenu,
   interruptRun,
+  readRunBusy,
   readRunMenu,
   submitToRun,
   type PaneMenu,
@@ -89,7 +104,9 @@ import { toast } from "../../lib/toast";
 import { confirmDialog } from "../../lib/confirm";
 import { setTabBadge } from "../../lib/tabBadge";
 import { fmt } from "../../lib/format";
-import { agentAwaitingReason } from "../../lib/types";
+import { agentAwaitingReason, type TranscriptMessage, type WSMessage } from "../../lib/types";
+import { eventBus } from "../../lib/eventBus";
+import { throttle } from "../../lib/throttle";
 import { api, type EffortLevel, type PermissionMode, type RunHandle } from "../../lib/api";
 
 const MODES: [PermissionMode, string][] = [
@@ -100,6 +117,11 @@ const MODES: [PermissionMode, string][] = [
   ["bypassPermissions", "Bypass"],
 ];
 const isSettable = (m: unknown): m is PermissionMode => MODES.some(([v]) => v === m);
+// Pane output re-reads the transcript at most this often: a TUI spinner
+// redraws several times a second, and each read walks the transcript file.
+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;
 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}`;
@@ -117,6 +139,7 @@ const storedSide = () => {
  *  (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.
 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;
   return /^claude-(?:[23]|instant|(?:opus|sonnet|haiku)-4(?:-[0-5])?(?:-\d{8})?$)/.test(model)
     ? 200_000
@@ -125,7 +148,13 @@ 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;
@@ -212,33 +241,222 @@ function PermissionChip({ runId, initial }: { runId: string; initial: Permission
   );
 }
 
+/** A permission prompt (Claude's tool approval, Codex's command approval,
+ *  the folder-trust question): it offers a Yes and a No. */
+export function isPermissionMenu(menu: PaneMenu): boolean {
+  if (menu.multi || menu.tabs) return false;
+  const labels = menu.options.map((o) => o.label);
+  return labels.some((l) => /^Yes\b/i.test(l)) && labels.some((l) => /^No\b/i.test(l));
+}
+
+/** A menu row's label without its key hint (`Yes, proceed (y)`). */
+const bareLabel = (label: string) => label.replace(/\s+\((?:[a-z]|esc|shift\+tab)\)$/i, "");
+
+/** A permission prompt read off the terminal: the tool, what it will run, and the CLI's own
+ *  answers as buttons — each still presses its key in the pane. "No, and
+ *  tell … differently" also takes a note, sent as the next message once the
+ *  CLI is back at its prompt. */
+function PermissionMenuCard({
+  menu,
+  onChoose,
+  onDenyNote,
+  onCancel,
+}: {
+  menu: PaneMenu;
+  onChoose: (index: number) => void;
+  onDenyNote: (index: number, note: string) => void;
+  onCancel: () => void;
+}) {
+  const { t } = useTranslation("run");
+  const [noting, setNoting] = useState(false);
+  const [note, setNote] = useState("");
+  const q = menu.question.split("\n");
+  const title = menu.detail?.[0] ?? q[0] ?? "";
+  const body = (menu.detail ? menu.detail.slice(1) : q.slice(1)).join("\n");
+  const ask = menu.detail ? menu.question : "";
+  const yes = menu.options.findIndex((o) => /^Yes\b/i.test(o.label));
+  const tell = menu.options.findIndex((o) => /^No, and tell\b/i.test(o.label));
+  const sendNote = () => {
+    if (note.trim() && tell >= 0) onDenyNote(tell, note.trim());
+  };
+  return (
+    <div data-testid="pane-chat-permission" className="flex flex-col gap-2">
+      <div className="flex items-start gap-2">
+        <ShieldQuestion className="mt-0.5 h-4 w-4 flex-shrink-0 text-status-warning" />
+        <div className="min-w-0 flex-1">
+          <p className="whitespace-pre-wrap break-words text-sm font-medium text-fg-primary">
+            {title}
+          </p>
+          {ask && <p className="text-xs text-fg-muted">{ask}</p>}
+        </div>
+      </div>
+      {body && (
+        <pre className="max-h-40 overflow-auto whitespace-pre-wrap break-all rounded-lg border border-border bg-surface-2 px-3 py-2 font-mono text-xs text-fg-secondary">
+          {body}
+        </pre>
+      )}
+      {noting ? (
+        <div className="flex items-center gap-2 rounded-lg border border-accent/50 bg-surface-2 px-3 py-1">
+          <input
+            autoFocus
+            data-testid="pane-chat-permission-note"
+            value={note}
+            onChange={(e) => setNote(e.target.value)}
+            onKeyDown={(e) => {
+              if (isSubmitEnter(e)) {
+                e.preventDefault();
+                sendNote();
+              } else if (e.key === "Escape") setNoting(false);
+            }}
+            placeholder={t("chat.request.notePlaceholder")}
+            aria-label={t("chat.request.notePlaceholder")}
+            className="min-w-0 flex-1 bg-transparent py-0.5 text-sm text-fg-primary outline-none placeholder:text-fg-muted"
+          />
+          <button
+            type="button"
+            onClick={sendNote}
+            disabled={!note.trim()}
+            className="btn-secondary text-xs disabled:opacity-40"
+          >
+            {t("chat.request.send")}
+          </button>
+        </div>
+      ) : (
+        <div className="flex flex-wrap items-center gap-2">
+          {menu.options.map((o, i) => (
+            <button
+              key={`${i}-${o.label}`}
+              type="button"
+              data-testid="pane-chat-permission-option"
+              autoFocus={i === yes}
+              onClick={() => onChoose(i)}
+              title={o.hint || undefined}
+              className={`${i === yes ? "btn-primary" : "btn-secondary"} max-w-full break-words text-left text-xs`}
+            >
+              {bareLabel(o.label)}
+            </button>
+          ))}
+          {tell >= 0 && (
+            <button
+              type="button"
+              data-testid="pane-chat-permission-tell"
+              onClick={() => setNoting(true)}
+              className="text-xs text-fg-muted underline-offset-2 hover:text-fg-primary hover:underline"
+            >
+              {t("chat.request.denyWithNote")}
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={onCancel}
+            className="ml-auto rounded-md border border-border px-2 py-0.5 text-xs text-fg-muted hover:bg-surface-3"
+          >
+            {t("chat.menu.cancel")}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
 /** The menu the CLI asks with, as buttons: a pick presses its key in the
  *  pane; its "Type something" row opens a field right there instead —
- *  pressing that row's digit again would type the digit into the CLI's own. */
+ *  pressing that row's digit again would type the digit into the CLI's own.
+ *  A permission prompt takes its own layout (`PermissionMenuCard`), any
+ *  other menu the question layout. */
 export function PaneMenuCard({
   menu,
   onChoose,
   onAnswer,
   onCancel,
+  onStep,
+  onDenyNote,
 }: {
   menu: PaneMenu;
   onChoose: (index: number) => void;
   onAnswer: (text: string) => void;
   onCancel: () => void;
+  /** Previous (-1) / next (1) question of a multi-question AskUserQuestion. */
+  onStep?: (dir: -1 | 1) => void;
+  /** A permission prompt's "No, and tell …", with the note to send after it. */
+  onDenyNote?: (index: number, note: string) => void;
 }) {
   const { t } = useTranslation("run");
   const [typing, setTyping] = useState(false);
   const [draft, setDraft] = useState("");
   const submit = () => draft.trim() && onAnswer(draft);
+  if (isPermissionMenu(menu))
+    return (
+      <div
+        data-testid="pane-chat-menu"
+        className="rounded-2xl border border-border bg-surface-1 p-3 shadow-sm"
+      >
+        <PermissionMenuCard
+          menu={menu}
+          onChoose={onChoose}
+          onDenyNote={onDenyNote ?? ((i) => onChoose(i))}
+          onCancel={onCancel}
+        />
+      </div>
+    );
   return (
     <div
       data-testid="pane-chat-menu"
       className="rounded-2xl border border-border bg-surface-1 p-3 shadow-sm"
     >
+      {menu.tabs && (
+        <div
+          data-testid="pane-chat-menu-tabs"
+          className="mb-2 flex flex-wrap items-center gap-1 text-xs"
+        >
+          {onStep && (
+            <button
+              type="button"
+              onClick={() => onStep(-1)}
+              aria-label={t("chat.menu.prev")}
+              title={t("chat.menu.prev")}
+              className="rounded-md border border-border p-0.5 text-fg-muted hover:bg-surface-3"
+            >
+              <ChevronLeft className="h-3.5 w-3.5" />
+            </button>
+          )}
+          {menu.tabs.map((tab, i) => (
+            <span
+              key={`${i}-${tab.label}`}
+              className={`flex items-center gap-1 rounded-md border px-1.5 py-0.5 ${
+                i === menu.tab
+                  ? "border-accent/50 bg-surface-2 text-fg-primary"
+                  : "border-border text-fg-muted"
+              }`}
+            >
+              {tab.done ? (
+                <Check className="h-3 w-3 text-accent" />
+              ) : (
+                <Square className="h-3 w-3" />
+              )}
+              {tab.label}
+            </span>
+          ))}
+          {onStep && (
+            <button
+              type="button"
+              onClick={() => onStep(1)}
+              aria-label={t("chat.menu.next")}
+              title={t("chat.menu.next")}
+              className="rounded-md border border-border p-0.5 text-fg-muted hover:bg-surface-3"
+            >
+              <ChevronRight className="h-3.5 w-3.5" />
+            </button>
+          )}
+        </div>
+      )}
       {menu.question && (
-        <p className="mb-2 whitespace-pre-wrap break-words text-sm font-medium text-fg-primary">
-          {menu.question}
-        </p>
+        <div className="mb-2 flex items-start gap-2">
+          <MessageCircleQuestion className="mt-0.5 h-4 w-4 flex-shrink-0 text-accent" />
+          <p className="whitespace-pre-wrap break-words text-sm font-medium text-fg-primary">
+            {menu.question}
+          </p>
+        </div>
       )}
       <div className="flex flex-col gap-1">
         {menu.options.map((o, i) =>
@@ -338,9 +556,10 @@ export const PaneChat = memo(function PaneChat({
   const runId = run.id;
   const claude = run.tool === "claude";
   // The unsent prompt outlives the terminal view and a reload (`lib/chatDraft`).
-  const [prompt, setPrompt] = useState(() => readChatDraft(sessionId).prompt);
-  const [images, setImages] = useState<PromptImage[]>(() => readChatDraft(sessionId).images);
-  useEffect(() => writeChatDraft(sessionId, prompt, images), [sessionId, prompt, images]);
+  const draftKey = sessionId;
+  const [prompt, setPrompt] = useState(() => readChatDraft(draftKey).prompt);
+  const [images, setImages] = useState<PromptImage[]>(() => readChatDraft(draftKey).images);
+  useEffect(() => writeChatDraft(draftKey, prompt, images), [draftKey, prompt, images]);
   const [uploading, setUploading] = useState(false);
   const [follow, setFollow] = useState(0);
   const [model, setModel] = useState(run.model ?? "");
@@ -416,6 +635,46 @@ export const PaneChat = memo(function PaneChat({
   useEffect(() => {
     void readWorking();
   }, [readWorking]);
+  // The terminal underneath drew something: the CLI is at work, so its
+  // transcript may have grown — read it now, for any tool, hooks or not. A
+  // spinner redraws all the time, hence the throttle.
+  useEffect(() => {
+    if (!sessionId) return;
+    const poke = throttle(
+      () =>
+        eventBus.publish({
+          type: "transcript_changed",
+          data: { session_id: sessionId },
+        } as unknown as WSMessage),
+      OUTPUT_FETCH_MS
+    );
+    const off = onPaneOutput(runId, poke);
+    return () => {
+      off();
+      poke.cancel();
+    };
+  }, [runId, sessionId]);
+  // The terminal's own word on a turn: its busy line (BUSY_LINE) while it
+  // shows, else — a tool whose line we do not know — output in the last
+  // OUTPUT_BUSY_MS. Hooks miss a tool that sends none (omp, Cursor, Codex
+  // without its opt-in hooks), and arrive late on a dashboard they skip.
+  const [screenBusy, setScreenBusy] = useState(false);
+  useEffect(() => {
+    let last = 0;
+    const off = onPaneOutput(runId, () => (last = Date.now()));
+    const read = () => {
+      const known = readRunBusy(runId, run.tool);
+      setScreenBusy(known ?? (last > 0 && Date.now() - last < OUTPUT_BUSY_MS));
+    };
+    read();
+    const timer = window.setInterval(() => {
+      if (isShown(onScreen)) read();
+    }, 700);
+    return () => {
+      off();
+      window.clearInterval(timer);
+    };
+  }, [runId, run.tool, onScreen]);
   useLiveRefresh(readWorking, {
     throttleMs: 500,
     // While Stop shows, also poll: a missed agent_updated (the hook reached
@@ -444,6 +703,7 @@ export const PaneChat = memo(function PaneChat({
     }, 700);
     return () => window.clearInterval(timer);
   }, [runId, onScreen]);
+  const busy = working || screenBusy;
   const asking = waiting || menu !== null;
   // Gone until the pane redraws: no second press on a stale menu.
   const choose = (index: number) => {
@@ -456,15 +716,22 @@ export const PaneChat = memo(function PaneChat({
       setFollow((n) => n + 1);
     } else toast.error(t("chat.notSent"));
   };
+  // "No, and tell … differently": the CLI drops back to its prompt, where
+  // the note is what the user would type next.
+  const denyWithNote = (index: number, note: string) => {
+    if (!menu || !chooseRunOption(runId, menu, index)) return void toast.error(t("chat.notSent"));
+    setMenu(null);
+    window.setTimeout(() => void command(note), 800);
+  };
 
   // A hidden tab says when this session waits on the user or its turn ended.
   const was = useRef({ working: false, asking: false });
   useEffect(() => {
     if (asking) setTabBadge(runId, "waiting");
-    else if (working) setTabBadge(runId, null);
+    else if (busy) setTabBadge(runId, null);
     else if (was.current.working || was.current.asking) setTabBadge(runId, "done");
-    was.current = { working, asking };
-  }, [runId, working, asking]);
+    was.current = { working: busy, asking };
+  }, [runId, busy, asking]);
   useEffect(() => () => setTabBadge(runId, null), [runId]);
   const [context, setContext] = useState<{ tokens: number; model: string | null }>({
     tokens: 0,
@@ -484,6 +751,16 @@ 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(
+    (named: string) => {
+      setPreview(resolveIn(cwd, named));
+    },
+    [cwd]
+  );
   const openFile = useCallback(
     (named: string) => {
       // A relative path in a reply (`server/lib/x.js`) is relative to this pane's folder.
@@ -533,6 +810,8 @@ export const PaneChat = memo(function PaneChat({
     <div
       ref={rootRef}
       data-prompt-drop
+      // The last chat focused is where the Changes panel's comments go.
+      onFocusCapture={() => notePaneFocus(runId)}
       className="relative flex min-h-0 flex-1 [container-type:inline-size]"
       style={{ "--chat-side": `${side * 100}%` } as CSSProperties}
     >
@@ -549,6 +828,8 @@ export const PaneChat = memo(function PaneChat({
             onContext={onContext}
             onNotStarted={setNotStarted}
             onOpenFile={openFile}
+            onOpenArtifact={openArtifact}
+            onMessages={setConvMessages}
           />
           {!outlineOpen && !preview && (
             <button
@@ -573,6 +854,10 @@ export const PaneChat = memo(function PaneChat({
                 menu={menu}
                 onChoose={choose}
                 onAnswer={answer}
+                onDenyNote={denyWithNote}
+                onStep={(dir) => {
+                  if (!stepRunMenu(runId, dir)) toast.error(t("chat.notSent"));
+                }}
                 onCancel={() => {
                   if (interruptRun(runId)) setMenu(null);
                   else toast.error(t("chat.notSent"));
@@ -609,6 +894,26 @@ export const PaneChat = memo(function PaneChat({
                   onAttach={(items) => setImages((prev) => addAttachments(prev, items))}
                 />
                 {claude && <PermissionChip runId={runId} initial={run.permissionMode} />}
+                {run.tool === "codex" &&
+                  // Codex's `/model` (then its effort) and `/permissions` are
+                  // numbered pickers: typed here, answered on the menu card.
+                  (
+                    [
+                      ["/permissions", t("fields.permissionMode")],
+                      ["/model", t("fields.model")],
+                    ] as const
+                  ).map(([line, label]) => (
+                    <button
+                      key={line}
+                      type="button"
+                      data-testid={`pane-chat-codex-${line.slice(1)}`}
+                      onClick={() => void command(line)}
+                      title={t("chat.codexPicker")}
+                      className="rounded-md px-2 py-1 text-xs text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg-primary"
+                    >
+                      {label}
+                    </button>
+                  ))}
                 <div className="ml-auto flex items-center gap-1">
                   <ContextMeter tokens={context.tokens} model={context.model} />
                   {claude && (
@@ -624,7 +929,7 @@ export const PaneChat = memo(function PaneChat({
                       }}
                     />
                   )}
-                  {working && !text ? (
+                  {busy && !text ? (
                     <button
                       type="button"
                       data-testid="pane-chat-stop"
@@ -669,6 +974,7 @@ export const PaneChat = memo(function PaneChat({
         <FilePreview
           path={preview}
           scope={scope}
+          messages={convMessages}
           onClose={() => setPreview(null)}
           // Beside the chat when the pane has room, over it when not.
           className="absolute inset-x-0 top-0 bottom-[calc(100%-var(--chat-area,100%))] z-30 rounded-xl border border-border [@container(min-width:40rem)]:static [@container(min-width:40rem)]:m-3 [@container(min-width:40rem)]:ml-0 [@container(min-width:40rem)]:w-[calc(var(--chat-side)-0.75rem)] [@container(min-width:40rem)]:flex-shrink-0"

client/src/components/run/PaneGrid.tsx

@@ -70,7 +70,7 @@ import {
 } from "../../lib/paneLayout";
 import { AiToolIcon } from "../AiToolIcon";
 import { RunDot, type RunState } from "./ConsoleTabs";
-import { setSessionChat, useSessionChat } from "../../lib/chatUi";
+import { CHAT_TOOLS, setSessionChat, useSessionChat } from "../../lib/chatUi";
 import { readChatDraft, writeChatDraft } from "../../lib/chatDraft";
 import { pasteToRun, takeRunInput } from "../../lib/panePaste";
 import { promptForPane } from "./RunSetup";
@@ -238,7 +238,7 @@ function PaneMenu({
 const ITEM =
   "flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-left text-sm text-fg-secondary hover:bg-surface-4 hover:text-fg-primary";
 
-/** Chat UI ⇄ terminal for a Claude/Codex pane — this session's own view
+/** Chat UI ⇄ terminal for a `CHAT_TOOLS` pane — this session's own view
  *  (`lib/chatUi.ts`); a session with no id yet has no chat to show. The
  *  unsent prompt goes along: the terminal's input box into the chat's draft,
  *  the draft (its files as paths) back into the input box, never sent. */
@@ -254,7 +254,7 @@ export function showTerminal(runId: string, sessionId: string, tool?: string) {
 function ChatToggle({ run }: { run?: RunHandle }) {
   const { t } = useTranslation("lanes");
   const chat = useSessionChat(run?.sessionId);
-  if (!run?.sessionId || (run.tool !== "claude" && run.tool !== "codex")) return null;
+  if (!run?.sessionId || !CHAT_TOOLS.has(run.tool)) return null;
   const sessionId = run.sessionId;
   const label = chat ? t("panes.showTerminal") : t("panes.showChat");
   return (

client/src/components/run/RunSetup.tsx

@@ -70,6 +70,7 @@ import {
   ATTACH_MIME,
   addAttachments,
   claudeMention,
+  copiedFilePaths,
   droppedAttachments,
   droppedSkill,
   droppedText,
@@ -308,7 +309,7 @@ export function PromptEditor({
     Promise.all([
       api.ccConfig.commands(undefined, fileCwd).catch(() => ({ items: [] as CcMdItem[] })),
       api.ccConfig.skills(undefined, fileCwd).catch(() => ({ items: [] as CcMdItem[] })),
-      api.ccConfig.plugins().catch(() => ({ plugins: [] })),
+      api.ccConfig.plugins(fileCwd).catch(() => ({ plugins: [] })),
     ]).then(([c, sk, pl]) => {
       // A plugin's commands and skills are addressed as `/<plugin>:<name>`; one
       // installed at both user and project scope is listed once.
@@ -452,6 +453,14 @@ export function PromptEditor({
     });
     return true;
   };
+  /** A file manager's copy pasted with no file beside it, only `file://`
+   *  text: attached by those paths, as the terminal pastes them. */
+  const pastedLocalFiles = (dt: DataTransfer | null | undefined) => {
+    const paths = isLocalBrowser() ? copiedFilePaths(dt) : null;
+    if (!paths) return false;
+    onImagesChange((prev) => addAttachments(prev, paths.map(localAttachment)));
+    return true;
+  };
   /** Dropped or pasted files: by their own paths when the browser is on the
    *  dashboard's machine and the server finds the same files there (a file
    *  manager hands over `file://` paths beside the bytes), else uploaded. */
@@ -675,6 +684,7 @@ export function PromptEditor({
           onKeyDown={handleKeyDown}
           onPaste={(e) => {
             if (attachDropped(e.clipboardData, e.clipboardData?.files)) e.preventDefault();
+            else if (pastedLocalFiles(e.clipboardData)) e.preventDefault();
             else {
               // A very long paste goes in as a text file, like Claude Desktop:
               // the prompt then carries its path, never the text (#68: a CLI's
@@ -863,7 +873,7 @@ export function CwdAutocomplete({
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
       setActive((a) => Math.max(0, a - 1));
-    } else if (e.key === "Enter") {
+    } else if (isSubmitEnter(e)) {
       if (open && flat[active]) {
         e.preventDefault();
         choose(flat[active]);

client/src/components/run/TerminalView.tsx

@@ -17,9 +17,10 @@
  * Files (images or any other) dropped or pasted on it — Ctrl+V included — are saved on the server
  * (`POST /api/run/drop-file`) and their PATHS pasted into the pane — what a
  * local terminal does on a drop — as `@` mentions in a `claude` pane, which
- * reads them (an image as an image) when the prompt is sent; a browser on the
- * dashboard's own machine pastes a file manager's files by their own paths
- * instead, uploading nothing. A text drag (a Files/Changes row, a skill) is pasted as its text. The pane also registers with
+ * reads them when the prompt is sent — an image as its bare path, which claude
+ * shows as `[Image #n]` like a native drop; a browser on the dashboard's own
+ * machine pastes a file manager's files (dropped, or copied: `file://` text)
+ * by their own paths instead, uploading nothing. A text drag (a Files/Changes row, a skill) is pasted as its text. The pane also registers with
  * `lib/panePaste.ts`, so a diff-line comment from the Changes panel can be
  * pasted into whichever of the workspace's panes was focused last.
  * Keyboard: the terminal keeps Tab and Shift+Tab (claude cycles its permission
@@ -64,9 +65,11 @@ import { useTheme } from "../../hooks/useTheme";
 import { terminalThemeFor } from "../../lib/terminalTheme";
 import { api } from "../../lib/api";
 import { writeClipboard } from "../../lib/clipboard";
-import { MENU_CURSOR_ROW, notePaneFocus, registerPane } from "../../lib/panePaste";
+import { MENU_CURSOR_ROW, notePaneFocus, notePaneOutput, registerPane } from "../../lib/panePaste";
 import {
-  claudeMention,
+  claudePastes,
+  copiedFilePaths,
+  droppedFilePaths,
   isLocalBrowser,
   localCandidates,
   sameFilesHere,
@@ -168,8 +171,9 @@ interface TerminalViewProps {
    *  so it is moved out of the viewport with a transform, which keeps its
    *  layout size (no PTY resize; the chat still reads and answers its menus). */
   covered?: boolean;
-  /** The pane's AI tool: a `claude` pane is handed a pasted or dropped file
-   *  as an `@` mention (`claudeMention`), any other one its plain path. */
+  /** The pane's AI tool: a `claude` pane is handed a pasted or dropped image
+   *  as its bare path and any other file as an `@` mention (`claudePastes`),
+   *  any other tool its plain path. */
   tool?: string;
 }
 
@@ -241,8 +245,10 @@ export const TerminalView = memo(function TerminalView({
       e.preventDefault();
       dragDepth.current = 0;
       setDrop(null);
+      const local = isLocalBrowser() ? droppedFilePaths(e.dataTransfer) : null;
       const text = e.dataTransfer.getData("text/plain");
-      if (text) termRef.current?.paste(text + " ");
+      if (local) pastePaths(local);
+      else if (text) termRef.current?.paste(text + " ");
       termRef.current?.focus();
       return;
     }
@@ -262,6 +268,14 @@ export const TerminalView = memo(function TerminalView({
     const ctrlV = ctrlVRef.current;
     ctrlVRef.current = false;
     const files = Array.from(e.clipboardData?.files ?? []);
+    // A file manager's copied files reach a browser as `file://` text only.
+    const local = files.length === 0 && isLocalBrowser() ? copiedFilePaths(e.clipboardData) : null;
+    if (local) {
+      e.preventDefault();
+      e.stopPropagation();
+      pastePaths(local);
+      return;
+    }
     if (files.length === 0 && (!ctrlV || e.clipboardData?.getData("text/plain"))) return;
     e.preventDefault();
     e.stopPropagation();
@@ -269,6 +283,19 @@ export const TerminalView = memo(function TerminalView({
     else termRef.current?.input("\x16", true);
   };
 
+  /** Pastes files' paths as a local terminal hands them over — paste(), not
+   *  a raw send: it honours bracketed-paste mode, so the CLI sees a paste
+   *  rather than typed keystrokes. A `claude` pane gets its images as bare
+   *  paths, which it shows as `[Image #n]`, and other files as `@` mentions
+   *  (`claudePastes`). */
+  const pastePaths = (paths: string[]) => {
+    const term = termRef.current;
+    if (!term) return;
+    for (const text of tool === "claude" ? claudePastes(paths) : [paths.join(" ")])
+      term.paste(text + " ");
+    term.focus();
+  };
+
   /** Pastes the files' paths: their own (`local`, the `file://` paths a
    *  browser on the dashboard's machine is handed beside the bytes) once the
    *  server finds the same files there — nothing uploaded —, else the paths
@@ -286,13 +313,7 @@ export const TerminalView = memo(function TerminalView({
         return [];
       });
     }
-    if (paths.length) {
-      // paste(), not a raw send: it honours bracketed-paste mode, so claude
-      // sees pasted paths rather than typed keystrokes.
-      const asText = tool === "claude" ? claudeMention : (p: string) => p;
-      termRef.current?.paste(paths.map(asText).join(" ") + " ");
-      termRef.current?.focus();
-    }
+    if (paths.length) pastePaths(paths);
     // Over the server's limit (ETOOBIG): refused before the body is sent.
     const tooBig = errors
       .map((e) => e as { code?: string; maxBytes?: number } | null)
@@ -588,6 +609,7 @@ export const TerminalView = memo(function TerminalView({
               }
             }
             term.write(data);
+            notePaneOutput(runId);
           }
         };
         sock.onclose = (e?: CloseEvent) => {
@@ -750,6 +772,17 @@ export const TerminalView = memo(function TerminalView({
             rows.push(row);
           }
           return { rows, cols: term.cols };
+        },
+        // Plain text of the rows on screen, dim cells kept (a status line's
+        // `esc to interrupt` is dim): the chat's busy read.
+        () => {
+          const term = termRef.current;
+          if (!term) return [];
+          const buf = term.buffer.active;
+          const rows: string[] = [];
+          for (let y = 0; y < term.rows; y++)
+            rows.push(buf.getLine(buf.baseY + y)?.translateToString(true) ?? "");
+          return rows;
         }
       ),
     [runId]

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

@@ -31,6 +31,10 @@ vi.mock("../../../lib/api", async (importOriginal) => {
         }),
         gitRawUrl: () => "",
       },
+      artifacts: {
+        pinFile: vi.fn().mockResolvedValue({ item: { id: 1 } }),
+        uploadFile: vi.fn().mockResolvedValue({ item: { id: 2 } }),
+      },
       sessions: {
         readImageUrl: (id: string, p: string) => `/img/${id}?path=${p}`,
         readFile: vi.fn((_id: string, p: string) =>
@@ -75,7 +79,11 @@ const scope = { laneId: 4, laneCwd: "/w", cwd: "/w", sessionId: "s1" };
 describe("FilePreview", () => {
   it("reads a workspace file through the lane", async () => {
     render(<FilePreview path="/w/src/a.ts" scope={scope} onClose={() => {}} />);
-    expect(await screen.findByText("export const a = 1;")).toBeTruthy();
+    expect(
+      await screen.findByText(
+        (_t, el) => el?.tagName === "CODE" && !!el.textContent?.includes("export const a = 1;")
+      )
+    ).toBeTruthy();
     expect(vi.mocked(api.lanes.gitFile)).toHaveBeenCalledWith(4, "src/a.ts");
   });
 
@@ -89,7 +97,11 @@ describe("FilePreview", () => {
   it("reads Windows paths the same way", async () => {
     const win = { laneId: 4, laneCwd: "D:\\w", cwd: "D:\\w", sessionId: "s1" };
     render(<FilePreview path={"D:\\w\\src\\a.ts"} scope={win} onClose={() => {}} />);
-    expect(await screen.findByText("export const a = 1;")).toBeTruthy();
+    expect(
+      await screen.findByText(
+        (_t, el) => el?.tagName === "CODE" && !!el.textContent?.includes("export const a = 1;")
+      )
+    ).toBeTruthy();
     expect(vi.mocked(api.lanes.gitFile)).toHaveBeenCalledWith(4, "src/a.ts");
     cleanup();
     const tool = "C:\\Users\\k\\.claude\\projects\\D--w\\s1\\tool-results\\b.txt";
@@ -144,7 +156,11 @@ describe("FileListModal", () => {
     );
     expect(screen.getByText("No preview for this file here")).toBeTruthy();
     fireEvent.click(screen.getByRole("button", { name: "a.ts" }));
-    expect(await screen.findByText("export const a = 1;")).toBeTruthy();
+    expect(
+      await screen.findByText(
+        (_t, el) => el?.tagName === "CODE" && !!el.textContent?.includes("export const a = 1;")
+      )
+    ).toBeTruthy();
   });
 });
 
@@ -172,3 +188,77 @@ describe("SkillListModal", () => {
     expect(screen.getByText("No preview for this file here")).toBeTruthy();
   });
 });
+
+describe("the artifact view", () => {
+  const html = (lines: string[]) =>
+    vi.mocked(api.lanes.gitFile).mockResolvedValueOnce({
+      available: true,
+      path: "page.html",
+      rev: "work",
+      binary: false,
+      truncated: false,
+      lines,
+    } as never);
+
+  it("runs a page in a sandbox with scripts but no same origin, and shows its code", async () => {
+    html(["<button>go</button>"]);
+    render(<FilePreview path="/w/page.html" scope={scope} onClose={() => {}} />);
+    const frame = (await screen.findByTestId("artifact-frame")) as HTMLIFrameElement;
+    expect(frame.getAttribute("sandbox")).toContain("allow-scripts");
+    expect(frame.getAttribute("sandbox")).not.toContain("allow-same-origin");
+    expect(frame.getAttribute("srcdoc")).toContain("<button>go</button>");
+    fireEvent.click(screen.getByTestId("artifact-tab-code"));
+    expect(screen.queryByTestId("artifact-frame")).toBeNull();
+    expect(
+      await screen.findByText(
+        (_t, el) => el?.tagName === "CODE" && !!el.textContent?.includes("<button>go</button>")
+      )
+    ).toBeTruthy();
+    cleanup();
+  });
+
+  it("steps back to an older version the conversation wrote", async () => {
+    html(["<p>two</p>"]);
+    const tool = (id: string, input: Record<string, unknown>, name = "Write") => ({
+      type: "assistant" as const,
+      timestamp: null,
+      content: [{ type: "tool_use" as const, id, name, input }],
+    });
+    const messages = [
+      tool("1", { file_path: "/w/page.html", content: "<p>one</p>" }),
+      tool("2", { file_path: "/w/page.html", old_string: "one", new_string: "two" }, "Edit"),
+    ];
+    render(
+      <FilePreview
+        path="/w/page.html"
+        scope={scope}
+        onClose={() => {}}
+        messages={messages as never}
+      />
+    );
+    const versions = await screen.findByTestId("artifact-versions");
+    expect(versions.textContent).toContain("2");
+    expect(
+      ((await screen.findByTestId("artifact-frame")) as HTMLIFrameElement).getAttribute("srcdoc")
+    ).toContain("two");
+    fireEvent.click(versions.querySelector("button")!);
+    expect(screen.getByTestId("artifact-frame").getAttribute("srcdoc")).toContain("<p>one</p>");
+    cleanup();
+  });
+
+  it("saves a workspace file to the Artifacts library by its path", async () => {
+    html(["<p>x</p>"]);
+    render(<FilePreview path="/w/page.html" scope={scope} onClose={() => {}} />);
+    await screen.findByTestId("artifact-frame");
+    fireEvent.click(screen.getByTestId("artifact-share"));
+    await vi.waitFor(() =>
+      expect(api.artifacts.pinFile).toHaveBeenCalledWith({
+        laneId: 4,
+        path: "page.html",
+        title: "page.html",
+        sessionId: "s1",
+      })
+    );
+    cleanup();
+  });
+});

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

@@ -7,9 +7,11 @@
  * activity panel, collapsed into a file button with the output count, whose
  * files open a preview in its place; a file in a turn's "Edited N files" card
  * opens in the Workspace's Changes panel when it is in the pane's folder; and
- * Stop in Send's place while the main agent works, pressing Esc in the pane;
+ * Stop in Send's place while the main agent works (its hooks, or the pane's
+ * own busy line / fresh output), pressing Esc in the pane;
  * and the menu the CLI asks with, shown as buttons that press its keys, a
- * message sent meanwhile typed as its "Type something" answer.
+ * message sent meanwhile typed as its "Type something" answer; a Codex
+ * terminal's Model / Permission mode buttons typing its own pickers.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -22,11 +24,14 @@ import {
   answerRunMenu,
   chooseRunOption,
   interruptRun,
+  onPaneOutput,
+  readRunBusy,
   readRunMenu,
   submitToRun,
   type PaneMenu,
 } from "../../../lib/panePaste";
 import { OPEN_IN_CHANGES_EVENT } from "../../../lib/openInChanges";
+import { eventBus } from "../../../lib/eventBus";
 
 vi.mock("../../conversation/ConversationView", () => ({
   // Stands in for a turn's "Edited N files" card: a click names a file.
@@ -51,8 +56,12 @@ vi.mock("../../../lib/panePaste", () => ({
   submitToRun: vi.fn(() => true),
   interruptRun: vi.fn(() => true),
   readRunMenu: vi.fn(() => null),
+  readRunBusy: vi.fn(() => false),
   chooseRunOption: vi.fn(() => true),
   answerRunMenu: vi.fn(() => true),
+  stepRunMenu: vi.fn(() => true),
+  notePaneFocus: vi.fn(),
+  onPaneOutput: vi.fn(() => () => {}),
 }));
 vi.mock("../../../lib/api", async (importOriginal) => {
   const actual = await importOriginal<Record<string, unknown>>();
@@ -212,6 +221,54 @@ describe("PaneChat — Stop", () => {
     }
   });
 
+  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 });
+    vi.mocked(readRunBusy).mockReturnValue(true);
+    try {
+      renderChat();
+      expect(await screen.findByTestId("pane-chat-stop")).toBeInTheDocument();
+      expect(readRunBusy).toHaveBeenCalledWith("agenthub-lane-1", "claude");
+      vi.mocked(readRunBusy).mockReturnValue(false);
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(800);
+      });
+      await waitFor(() => expect(screen.queryByTestId("pane-chat-stop")).toBeNull());
+    } 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);
+    const fns: (() => void)[] = [];
+    vi.mocked(onPaneOutput).mockImplementation((_runId, fn) => {
+      fns.push(fn);
+      return () => {};
+    });
+    try {
+      renderChat();
+      await waitFor(() => expect(fns.length).toBeGreaterThan(0));
+      expect(screen.queryByTestId("pane-chat-stop")).toBeNull();
+      fns.forEach((fn) => fn());
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(800);
+      });
+      expect(await screen.findByTestId("pane-chat-stop")).toBeInTheDocument();
+      // Quiet for longer than OUTPUT_BUSY_MS: at rest again.
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(2800);
+      });
+      await waitFor(() => expect(screen.queryByTestId("pane-chat-stop")).toBeNull());
+    } finally {
+      vi.useRealTimers();
+      vi.mocked(readRunBusy).mockReturnValue(false);
+      vi.mocked(onPaneOutput).mockImplementation(() => () => {});
+    }
+  });
+
   it("keeps Send for a session at rest", async () => {
     // With session_id the server answers EVERY agent of the session (its
     // status filter does not apply): the main agent is there, waiting.
@@ -553,4 +610,103 @@ describe("PaneChat — a menu the CLI asks with", () => {
       vi.mocked(readRunMenu).mockReturnValue(null);
     }
   });
+
+  it("re-reads its transcript when the pane draws, at most once a second", async () => {
+    // Every listener the chat put on the pane (the re-read, the busy clock).
+    const fns: (() => void)[] = [];
+    const drew = () => fns.forEach((fn) => fn());
+    vi.mocked(onPaneOutput).mockImplementation((_runId, fn) => {
+      fns.push(fn);
+      return () => {};
+    });
+    const seen: unknown[] = [];
+    const off = eventBus.subscribe((m) => {
+      if (m.type === "transcript_changed") seen.push(m.data);
+    });
+    try {
+      renderChat();
+      await waitFor(() => expect(fns.length).toBeGreaterThan(0));
+      vi.useFakeTimers();
+      drew();
+      drew();
+      drew();
+      expect(seen).toEqual([{ session_id: "s1" }]);
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(1100);
+      });
+      expect(seen).toHaveLength(2);
+    } finally {
+      vi.useRealTimers();
+      off();
+      vi.mocked(onPaneOutput).mockImplementation(() => () => {});
+    }
+  });
+
+  const PERMISSION: PaneMenu = {
+    question: "Do you want to proceed?",
+    detail: ["Bash command", "npm test", "Run the tests"],
+    options: [
+      { n: 1, label: "Yes", hint: "", checked: null },
+      { n: 2, label: "Yes, and don't ask again for npm test", hint: "", checked: null },
+      { n: 3, label: "No, and tell Claude what to do differently (esc)", hint: "", checked: null },
+    ],
+    cursor: 0,
+    multi: false,
+    typeAt: -1,
+  };
+
+  it("lays a permission prompt out as a card, each answer its own key", async () => {
+    vi.mocked(readRunMenu).mockReturnValue(PERMISSION);
+    vi.mocked(chooseRunOption).mockClear();
+    try {
+      renderChat();
+      const card = await screen.findByTestId("pane-chat-permission");
+      expect(card).toHaveTextContent("Bash command");
+      expect(card).toHaveTextContent("npm test");
+      expect(card).toHaveTextContent("Do you want to proceed?");
+      const options = screen.getAllByTestId("pane-chat-permission-option");
+      // The key hint is dropped from the label.
+      expect(options.map((o) => o.textContent)).toEqual([
+        "Yes",
+        "Yes, and don't ask again for npm test",
+        "No, and tell Claude what to do differently",
+      ]);
+      fireEvent.click(options[1]!);
+      expect(chooseRunOption).toHaveBeenCalledWith("agenthub-lane-1", PERMISSION, 1);
+    } finally {
+      vi.mocked(readRunMenu).mockReturnValue(null);
+    }
+  });
+
+  it("denies with a note: picks the No row, then sends the note as the next message", async () => {
+    vi.mocked(readRunMenu).mockReturnValue(PERMISSION);
+    vi.mocked(chooseRunOption).mockClear();
+    vi.mocked(submitToRun).mockClear();
+    try {
+      renderChat();
+      fireEvent.click(await screen.findByTestId("pane-chat-permission-tell"));
+      const field = screen.getByTestId("pane-chat-permission-note");
+      fireEvent.change(field, { target: { value: "use pnpm" } });
+      fireEvent.keyDown(field, { key: "Enter" });
+      expect(chooseRunOption).toHaveBeenCalledWith("agenthub-lane-1", PERMISSION, 2);
+      await waitFor(() => expect(submitToRun).toHaveBeenCalled(), { timeout: 2000 });
+      expect(vi.mocked(submitToRun).mock.calls[0]![1]).toContain("use pnpm");
+    } finally {
+      vi.mocked(readRunMenu).mockReturnValue(null);
+    }
+  });
+});
+
+describe("PaneChat — a Codex terminal", () => {
+  it("types /model and /permissions, whose pickers come back as menu cards", () => {
+    renderChat({ tool: "codex" });
+    fireEvent.click(screen.getByTestId("pane-chat-codex-model"));
+    fireEvent.click(screen.getByTestId("pane-chat-codex-permissions"));
+    expect(vi.mocked(submitToRun).mock.calls.map((c) => c[1])).toEqual(["/model", "/permissions"]);
+  });
+
+  it("offers neither to a Claude pane", () => {
+    renderChat();
+    expect(screen.queryByTestId("pane-chat-codex-model")).toBeNull();
+  });
 });

client/src/components/settings/AccountSettings.tsx

@@ -3,10 +3,12 @@
  * @description Settings → Account (server mode, any signed-in role): the
  * account's own information (`GET /api/me/account` — username, role, member
  * since, workspaces, sessions, active sign-ins, last sign-in), its avatar
- * (`PUT`/`DELETE /api/me/avatar` — PNG, JPEG, GIF or WebP, at most 1 MB; the
- * sidebar shows it at once), its display name
+ * (`PUT`/`DELETE /api/me/avatar` — PNG, JPEG, GIF or WebP, at most 1 MB — or
+ * an https link the browser loads itself, `POST /api/me/avatar/url`; the sidebar
+ * shows it at once), its display name
  * and email (`PATCH /api/me/account`), a password change that asks for the
- * current one (`POST /api/me/password` — this browser stays signed in, every
+ * current one and passes every rule of `lib/passwordRules.ts`, ticked as it is
+ * typed (`POST /api/me/password` — this browser stays signed in, every
  * other sign-in ends) and "Sign out other devices" (`POST
  * /api/me/sign-out-others`, behind `confirmDialog`). Role and state are an
  * admin's to change, on the Users page — never here.
@@ -23,15 +25,18 @@ import {
   type ReactNode,
 } from "react";
 import { useTranslation } from "react-i18next";
-import { Camera, LogOut, RefreshCw, Trash2 } from "lucide-react";
+import { Camera, Link2, LogOut, RefreshCw, Trash2 } from "lucide-react";
 import { api, type MyAccount } from "../../lib/api";
 import { formatDateTime } from "../../lib/format";
 import { toast } from "../../lib/toast";
 import { confirmDialog } from "../../lib/confirm";
 import { isSubmitEnter } from "../../lib/keys";
+import { useSpin } from "../../hooks/useSpin";
 import { useAuth } from "../AuthGate";
 import { ROLE_BADGE } from "../users/UserEditDialog";
 import { UserAvatar } from "../users/UserAvatar";
+import { PasswordRules } from "../users/PasswordRules";
+import { passwordProblems } from "../../lib/passwordRules";
 import { SettingsSection } from "./SettingsRow";
 
 type ServerAccount = Extract<MyAccount, { mode: "server" }>;
@@ -43,6 +48,24 @@ const errText = (t: (k: string, o?: Record<string, unknown>) => string, e: unkno
     : err.message;
 };
 
+/** Whether `url` loads as an image embedded in this page — the way every
+ *  avatar is shown: no referrer, the cookies a cross-site image gets. */
+export function loadsAsImage(url: string, timeoutMs = 10_000): Promise<boolean> {
+  return new Promise((resolve) => {
+    const img = new Image();
+    const done = (ok: boolean) => {
+      window.clearTimeout(timer);
+      img.onload = img.onerror = null;
+      resolve(ok);
+    };
+    const timer = window.setTimeout(() => done(false), timeoutMs);
+    img.referrerPolicy = "no-referrer";
+    img.onload = () => done(img.naturalWidth > 0);
+    img.onerror = () => done(false);
+    img.src = url;
+  });
+}
+
 export function AccountSettings() {
   const { t } = useTranslation("settings");
   const [account, setAccount] = useState<ServerAccount | null>(null);
@@ -64,19 +87,23 @@ export function AccountSettings() {
   );
   const load = useCallback(() => {
     setLoadError(null);
-    api.me
+    return api.me
       .account()
       .then(apply)
       .catch((e: Error) => setLoadError(e.message));
   }, [apply]);
-  useEffect(load, [load]);
+  useEffect(() => {
+    void load();
+  }, [load]);
+  const [retrying, retry] = useSpin(load);
 
   if (loadError) {
     return (
       <div role="alert" className="card flex items-center gap-3 p-4 text-sm text-status-danger">
         <span className="flex-1">{t("account.loadFailed", { message: loadError })}</span>
-        <button type="button" className="btn-ghost text-xs" onClick={load}>
-          <RefreshCw className="h-3.5 w-3.5" /> {t("common:retry")}
+        <button type="button" className="btn-ghost text-xs" onClick={retry} disabled={retrying}>
+          <RefreshCw className={`h-3.5 w-3.5${retrying ? " animate-spin" : ""}`} />{" "}
+          {t("common:retry")}
         </button>
       </div>
     );
@@ -110,18 +137,35 @@ function ProfileCard({
   const shown = user.displayName || user.username;
   const fileRef = useRef<HTMLInputElement>(null);
   const [busy, setBusy] = useState(false);
+  // null = the link field is closed.
+  const [link, setLink] = useState<string | null>(null);
 
   const run = async (op: () => Promise<MyAccount>, done: string) => {
     setBusy(true);
     try {
       onSaved(await op());
       toast.success(done);
+      return true;
     } catch (e) {
       toast.error(errText(t, e));
+      return false;
     } finally {
       setBusy(false);
     }
   };
+  const applyLink = async () => {
+    const url = link?.trim();
+    if (!url) return;
+    // The avatar routes only redirect to the link, so it shows only if THIS
+    // browser can load it as an embedded image: a link behind a login (a
+    // Mattermost /api/v4/users/<id>/image) gets no cookie from another site
+    // and fails — say so now instead of saving a picture nobody sees.
+    setBusy(true);
+    const ok = await loadsAsImage(url);
+    setBusy(false);
+    if (!ok) return void toast.error(t("account.avatar.linkUnreachable"));
+    if (await run(() => api.me.setAvatarFromUrl(url), t("account.avatar.saved"))) setLink(null);
+  };
   const pick = (e: ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     e.target.value = ""; // the same file can be picked again
@@ -150,6 +194,18 @@ function ProfileCard({
             >
               <Camera className="h-3.5 w-3.5" />
             </button>
+            <button
+              type="button"
+              className={`btn-ghost h-6 w-6 justify-center p-0 ${link !== null ? "text-accent" : ""}`}
+              onClick={() => setLink((v) => (v === null ? "" : null))}
+              disabled={busy}
+              title={t("account.avatar.fromUrl")}
+              aria-label={t("account.avatar.fromUrl")}
+              aria-pressed={link !== null}
+              data-testid="account-avatar-url-toggle"
+            >
+              <Link2 className="h-3.5 w-3.5" />
+            </button>
             {user.avatarAt && (
               <button
                 type="button"
@@ -187,6 +243,36 @@ function ProfileCard({
           </div>
         </div>
       </div>
+      {link !== null && (
+        <div className="mt-3 flex items-center gap-2">
+          <input
+            type="url"
+            className="input w-full text-sm"
+            value={link}
+            placeholder={t("account.avatar.urlPlaceholder")}
+            aria-label={t("account.avatar.fromUrl")}
+            autoFocus
+            disabled={busy}
+            onChange={(e) => setLink(e.target.value)}
+            onKeyDown={(e) => {
+              if (isSubmitEnter(e)) {
+                e.preventDefault();
+                void applyLink();
+              } else if (e.key === "Escape") setLink(null);
+            }}
+            data-testid="account-avatar-url-input"
+          />
+          <button
+            type="button"
+            className="btn-primary flex-shrink-0 text-sm"
+            onClick={() => void applyLink()}
+            disabled={busy || !link.trim()}
+            data-testid="account-avatar-url-apply"
+          >
+            {t("account.avatar.urlApply")}
+          </button>
+        </div>
+      )}
       <dl className="mt-4 grid grid-cols-2 gap-3 border-t border-border pt-4 text-xs sm:grid-cols-5">
         <Stat label={t("account.memberSince")}>
           {user.createdAt ? formatDateTime(user.createdAt) : "—"}
@@ -283,13 +369,17 @@ function ProfileForm({
 
 function PasswordForm() {
   const { t } = useTranslation("settings");
+  const { state } = useAuth();
+  const username = state.mode === "server" ? state.user?.username : undefined;
   const [current, setCurrent] = useState("");
   const [next, setNext] = useState("");
   const [again, setAgain] = useState("");
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const mismatch = again.length > 0 && again !== next;
-  const ready = current.length > 0 && next.length > 0 && again === next && !busy;
+  // The account's own password: every rule (server/lib/auth.js decides too).
+  const strong = passwordProblems(next, username).length === 0;
+  const ready = current.length > 0 && strong && again === next && !busy;
 
   const submit = async () => {
     if (!ready) return;
@@ -331,7 +421,7 @@ function PasswordForm() {
             aria-label={t("account.currentPassword")}
           />
         </Field>
-        <Field label={t("account.newPassword")} hint={t("users:passwordHint")}>
+        <Field label={t("account.newPassword")}>
           <input
             type="password"
             className="input w-full text-sm"
@@ -352,6 +442,9 @@ function PasswordForm() {
           />
         </Field>
       </div>
+      <div className="mt-3">
+        <PasswordRules password={next} username={username} />
+      </div>
       {(mismatch || error) && (
         <p role="alert" className="mt-2 text-xs text-status-danger">
           {error ?? t("account.mismatch")}

client/src/components/settings/AgentInstructionsSettings.tsx

@@ -17,6 +17,7 @@ import { FileUp } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { api, type AgentInstructionsView } from "../../lib/api";
 import { useAiTools } from "../../hooks/useAiTools";
+import { useSpin } from "../../hooks/useSpin";
 import { AiToolIcon } from "../AiToolIcon";
 import { toast } from "../../lib/toast";
 import { SettingsSection } from "./SettingsRow";
@@ -41,13 +42,16 @@ export function AgentInstructionsSettings() {
 
   const load = () => {
     setLoadError(null);
-    api.me
+    return api.me
       .instructions()
       .then(apply)
       .catch((err) => setLoadError(err instanceof Error ? err.message : String(err)));
   };
 
-  useEffect(load, []);
+  useEffect(() => {
+    void load();
+  }, []);
+  const [retrying, retry] = useSpin(load);
 
   async function save() {
     setSaving(true);
@@ -123,7 +127,12 @@ export function AgentInstructionsSettings() {
               <span className="truncate">
                 {t("agentInstructions.loadFailed", { message: loadError })}
               </span>
-              <button type="button" className="btn-ghost shrink-0 text-xs" onClick={load}>
+              <button
+                type="button"
+                className="btn-ghost shrink-0 text-xs"
+                onClick={retry}
+                disabled={retrying}
+              >
                 {t("common:retry")}
               </button>
             </p>

client/src/components/settings/AiToolsSettings.tsx

@@ -29,6 +29,7 @@ import { AiToolIcon } from "../AiToolIcon";
 import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../ContextMenu";
 import { api, type AiTool, type AiToolJob } from "../../lib/api";
 import { usePermissions } from "../AuthGate";
+import { copyText } from "../../lib/clipboard";
 
 type Confirm = { kind: "install" | "update"; tool: AiTool } | { kind: "update-all" };
 
@@ -374,9 +375,7 @@ export function AiToolsSettings({
             {ctx.menu.item.path && (
               <>
                 {isAdmin && <MenuSeparator />}
-                <MenuItem
-                  onSelect={pick((tool) => void navigator.clipboard.writeText(tool.path ?? ""))}
-                >
+                <MenuItem onSelect={pick((tool) => void copyText(tool.path ?? ""))}>
                   {t("rowMenu.copyPath")}
                 </MenuItem>
               </>

client/src/components/settings/AppearanceSettings.tsx

@@ -7,7 +7,8 @@
  * `#terminal-font`, with a preview line); **Sessions** (`#sessions-view`) —
  * the per-user Chat UI default (`ChatUiSettings`, `#chat-ui`) and whether the
  * session view's tabs hold every workspace's sessions (`lib/workspaceTabs.ts`,
- * `#workspace-tabs`); then the
+ * `#workspace-tabs`), and whether a Markdown file opens as Preview (the
+ * default) or Raw (`lib/markdownView.ts`, `#markdown-view`); then the
  * Dark / Light / System mode switch and one named-theme picker per mode, and the
  * corner pet (`PetSettings`, deep-linked as `#pet`) — the old General and Pet
  * pages redirect here. Theme state is in `hooks/useTheme.ts`, palettes in
@@ -37,6 +38,7 @@ import {
   type TerminalFont,
 } from "../../lib/terminalFont";
 import { readAllTabs, writeAllTabs } from "../../lib/workspaceTabs";
+import { readMarkdownPreview, writeMarkdownPreview } from "../../lib/markdownView";
 import {
   TERMINAL_FONT_SIZES,
   UI_FONT_SIZES,
@@ -97,6 +99,7 @@ export function AppearanceSettings() {
   const [termSize, setTermSize] = useState(readTerminalFontSize);
   const [uiSize, setUiSize] = useState(readUiFontSize);
   const [allTabs, setAllTabs] = useState(readAllTabs);
+  const [mdPreview, setMdPreview] = useState(readMarkdownPreview);
   const pickTermFont = (font: TerminalFont) => {
     writeTerminalFont(font);
     setTermFont(font);
@@ -224,6 +227,25 @@ export function AppearanceSettings() {
             setAllTabs(on);
           }}
         />
+        <SettingsRow
+          id="markdown-view"
+          label={t("markdownView.label")}
+          description={t("markdownView.description")}
+          control={
+            <SettingsSegmented
+              ariaLabel={t("markdownView.label")}
+              value={mdPreview ? "preview" : "raw"}
+              onChange={(v) => {
+                writeMarkdownPreview(v === "preview");
+                setMdPreview(v === "preview");
+              }}
+              options={[
+                { value: "preview" as const, label: t("markdownView.preview") },
+                { value: "raw" as const, label: t("markdownView.raw") },
+              ]}
+            />
+          }
+        />
       </SettingsSection>
 
       <section id="theme" className="card p-5 space-y-5 scroll-mt-24">

client/src/components/settings/OmpSharingSettings.tsx

@@ -0,0 +1,68 @@
+/**
+ * @file OmpSharingSettings — Settings → AI tools → Oh My Pi login sharing: the
+ * admin's server-wide switch that lets every member's omp pane run on the
+ * HOST account's omp login through omp's own auth broker + gateway, without
+ * any member holding a credential (`GET/PUT /api/ai-tools/omp-sharing`,
+ * `server/lib/omp-share.js`). Renders nothing outside server mode with
+ * per-user accounts (S3), or for anyone but an admin.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { api, type OmpSharingState } from "../../lib/api";
+import { toast } from "../../lib/toast";
+import { usePermissions } from "../AuthGate";
+import { SettingsSection, SettingsSwitchRow } from "./SettingsRow";
+
+export function OmpSharingSettings() {
+  const { t } = useTranslation("settings");
+  const { isAdmin, local } = usePermissions();
+  const [state, setState] = useState<OmpSharingState | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    if (local || !isAdmin) return;
+    api.aiTools
+      .ompSharing()
+      .then(setState)
+      .catch(() => setState(null));
+  }, [local, isAdmin]);
+
+  if (local || !isAdmin || !state?.available) return null;
+  const error = state.broker.error || state.gateway.error;
+  const status = !state.enabled
+    ? null
+    : !state.installed
+      ? t("ompSharing.notInstalled")
+      : state.broker.running && state.gateway.running
+        ? t("ompSharing.running")
+        : error
+          ? t("ompSharing.failed", { error })
+          : t("ompSharing.starting");
+  return (
+    <SettingsSection id="omp-sharing" title={t("ompSharing.title")}>
+      <SettingsSwitchRow
+        label={t("ompSharing.switch")}
+        description={t("ompSharing.hint")}
+        checked={state.enabled}
+        disabled={busy}
+        onChange={async (on) => {
+          setBusy(true);
+          try {
+            setState(await api.aiTools.setOmpSharing(on));
+          } catch (err) {
+            toast.error(err);
+          } finally {
+            setBusy(false);
+          }
+        }}
+      />
+      {status && (
+        <p data-testid="omp-sharing-status" className="text-xs text-fg-muted">
+          {status}
+        </p>
+      )}
+    </SettingsSection>
+  );
+}

client/src/components/settings/PushIngestSettings.tsx

@@ -16,8 +16,7 @@ import { api } from "../../lib/api";
 import type { PushTokenStatus } from "../../lib/api";
 import { ConfirmModal } from "../ConfirmModal";
 import { SettingsSection } from "./SettingsRow";
-
-const copyText = (text: string) => navigator.clipboard?.writeText(text).catch(() => undefined);
+import { copyText } from "../../lib/clipboard";
 
 /** The forwarder for the pushing machine; `origin` is how it reaches this dashboard. */
 function forwarder(origin: string) {

client/src/components/settings/SnapshotSettings.tsx

@@ -19,6 +19,7 @@ import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../Context
 import { CopyButton } from "../event-views/primitives";
 import { snapshotUrl } from "../SnapshotButton";
 import { SettingsSection } from "./SettingsRow";
+import { copyText } from "../../lib/clipboard";
 
 export function SnapshotSettings() {
   const { t } = useTranslation("settings");
@@ -116,9 +117,7 @@ export function SnapshotSettings() {
           <MenuItem onSelect={pick((s) => navigate(`/snapshot/${s.token}`))}>
             {t("snapshots.open")}
           </MenuItem>
-          <MenuItem
-            onSelect={pick((s) => void navigator.clipboard?.writeText(snapshotUrl(s.token)))}
-          >
+          <MenuItem onSelect={pick((s) => void copyText(snapshotUrl(s.token)))}>
             {t("snapshots.copyLink")}
           </MenuItem>
           <MenuSeparator />

client/src/components/settings/ToolProfilesSettings.tsx

@@ -0,0 +1,808 @@
+/**
+ * @file ToolProfilesSettings — Settings → AI tools → Profiles: every AI tool's
+ * login profiles in ONE place, a tab per tool. Claude Code's are cc-profiles
+ * (`/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.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import {
+  AlertCircle,
+  ArrowRightLeft,
+  Check,
+  Copy,
+  KeyRound,
+  Pencil,
+  Save,
+  ShieldAlert,
+  Terminal,
+  Trash2,
+} from "lucide-react";
+import {
+  api,
+  type AccountPool,
+  type CcAccountIdentity,
+  type CcProfile,
+  type CcProfileUsage,
+  type CcUsageWindow,
+  type ToolProfile,
+  type ToolProfileIdentity,
+  type ToolProfilesTool,
+} from "../../lib/api";
+import { toast } from "../../lib/toast";
+import { confirmDialog } from "../../lib/confirm";
+import { copyText } from "../../lib/clipboard";
+import { useAiTools } from "../../hooks/useAiTools";
+import { usePermissions } from "../AuthGate";
+import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../ContextMenu";
+import { SkeletonRows } from "../config/configPrimitives";
+import { AiToolIcon } from "../AiToolIcon";
+import { SettingsSection } from "./SettingsRow";
+
+/** The tools the panel covers, in tab order, with the command that signs one in. */
+const TOOLS: { id: string; label: string; login: string }[] = [
+  { id: "claude", label: "Claude Code", login: "claude auth login" },
+  { id: "codex", label: "Codex", login: "codex login" },
+  { id: "omp", label: "Oh My Pi", login: "omp  (then /login)" },
+  { id: "antigravity", label: "Antigravity", login: "agy" },
+];
+/** Tools the account pool takes (server/routes/accounts.js). */
+const POOL_TOOLS = new Set(["claude", "codex"]);
+
+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";
+
+export function ToolProfilesSettings() {
+  const { t } = useTranslation("settings");
+  const aiTools = useAiTools();
+  const { local, seesAll } = usePermissions();
+  const shown = TOOLS.filter((x) => {
+    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(
+    () =>
+      api.toolProfiles
+        .list()
+        .then((r) => setOthers(r.tools))
+        .catch(() => setOthers([])),
+    []
+  );
+  useEffect(() => {
+    void loadOthers();
+  }, [loadOthers]);
+  // The pool is a server-mode, staff-only read.
+  useEffect(() => {
+    if (local || !seesAll) return;
+    api.accountPool
+      .list()
+      .then(setPool)
+      .catch(() => setPool(null));
+  }, [local, seesAll]);
+
+  if (!current) return null;
+  const poolCount = (tool: string) =>
+    pool ? (tool === "codex" ? pool.codex.length : pool.accounts.length) : null;
+
+  return (
+    <SettingsSection
+      id="tool-profiles"
+      title={t("toolProfiles.title")}
+      description={t("toolProfiles.description")}
+    >
+      <div role="tablist" aria-label={t("toolProfiles.title")} className="flex flex-wrap gap-1.5">
+        {shown.map((x) => (
+          <button
+            key={x.id}
+            type="button"
+            role="tab"
+            aria-selected={x.id === current.id}
+            onClick={() => setTab(x.id)}
+            className={`inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs ${
+              x.id === current.id
+                ? "border-accent/40 bg-accent/10 text-accent"
+                : "border-border bg-surface-2 text-fg-secondary hover:bg-surface-3"
+            }`}
+          >
+            <AiToolIcon tool={{ id: x.id, label: x.label }} className="h-3.5 w-3.5" />
+            {x.label}
+          </button>
+        ))}
+      </div>
+      <div role="tabpanel" className="mt-3 space-y-3">
+        {POOL_TOOLS.has(current.id) && poolCount(current.id) !== null && (
+          <PoolLine count={poolCount(current.id)!} />
+        )}
+        {current.id === "claude" ? (
+          <ClaudeProfiles pooled={!local && POOL_TOOLS.has("claude")} />
+        ) : (
+          <OtherProfiles
+            key={current.id}
+            tool={current.id}
+            label={current.label}
+            login={current.login}
+            state={others?.find((o) => o.tool === current.id) ?? null}
+            loading={others === null}
+            pooled={!local && POOL_TOOLS.has(current.id)}
+            onChanged={loadOthers}
+          />
+        )}
+      </div>
+    </SettingsSection>
+  );
+}
+
+/** "The pool holds N accounts" + the way to it (Administration → Users). */
+function PoolLine({ count }: { count: number }) {
+  const { t } = useTranslation("settings");
+  return (
+    <div className="flex flex-wrap items-center gap-2 rounded-lg border border-border bg-surface-2 px-3 py-2 text-xs text-fg-secondary">
+      <KeyRound className="h-3.5 w-3.5 text-fg-muted" />
+      <span className="flex-1">{t("toolProfiles.poolCount", { count })}</span>
+      <Link to="/admin#account-pool" className="text-accent hover:underline">
+        {t("toolProfiles.openPool")}
+      </Link>
+    </div>
+  );
+}
+
+/** The link that opens the pool's Add dialog on one saved profile (admins only). */
+function MoveToPool({ tool, name }: { tool: string; name: string }) {
+  const { t } = useTranslation("settings");
+  const { isAdmin } = usePermissions();
+  if (!isAdmin) return null;
+  return (
+    <Link
+      to={`/admin?${new URLSearchParams({ poolAdd: tool, poolProfile: name })}#account-pool`}
+      title={t("toolProfiles.moveToPoolHint")}
+      className="h-7 text-[11px] px-2 rounded-md text-fg-muted hover:text-accent hover:bg-surface-3 inline-flex items-center gap-1"
+    >
+      <ArrowRightLeft className="h-3 w-3" />
+      {t("toolProfiles.moveToPool")}
+    </Link>
+  );
+}
+
+function LoginHint({ text, command }: { text: string; command: string }) {
+  const { t } = useTranslation("ccConfig");
+  const [copied, setCopied] = useState(false);
+  return (
+    <div>
+      <div className="text-[10px] text-fg-muted mb-1">{text}</div>
+      <div className="rounded-md border border-border bg-surface-2 px-2.5 py-1.5 flex items-center gap-2">
+        <Terminal className="w-3 h-3 text-fg-muted flex-shrink-0" />
+        <code className="font-mono text-[11px] text-fg-secondary truncate flex-1">{command}</code>
+        <button
+          type="button"
+          onClick={async () => {
+            if (await copyText(command, true)) {
+              setCopied(true);
+              setTimeout(() => setCopied(false), 1500);
+            }
+          }}
+          className="text-[10px] font-medium px-1.5 py-1 rounded border border-border bg-surface-1 hover:bg-surface-3 text-fg-secondary hover:text-fg-primary inline-flex items-center gap-1 flex-shrink-0"
+          title={t("snippet.copy")}
+        >
+          {copied ? <Check className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
+          <span>{copied ? t("snippet.copied") : t("snippet.copy")}</span>
+        </button>
+      </div>
+    </div>
+  );
+}
+
+/** A profile's label, renamed in place: click it (or the menu's Rename), type, Enter. */
+function LabelEdit({
+  label,
+  busy,
+  editing,
+  setEditing,
+  onRename,
+}: {
+  label: string;
+  busy: boolean;
+  editing: boolean;
+  setEditing: (on: boolean) => void;
+  onRename: (next: string) => void;
+}) {
+  const { t } = useTranslation("ccConfig");
+  const [draft, setDraft] = useState(label);
+  useEffect(() => {
+    if (editing) setDraft(label);
+  }, [editing, label]);
+  if (editing) {
+    return (
+      <input
+        autoFocus
+        value={draft}
+        onChange={(e) => setDraft(e.target.value)}
+        onBlur={() => setEditing(false)}
+        onKeyDown={(e) => {
+          if (e.key === "Escape") setEditing(false);
+          if (e.key !== "Enter") return;
+          const next = draft.trim();
+          setEditing(false);
+          if (next && next !== label) onRename(next);
+        }}
+        maxLength={60}
+        aria-label={t("profiles.renameLabel")}
+        className="h-7 w-48 rounded-md border border-accent/40 bg-surface-1 px-2 text-xs text-fg-primary focus:outline-none focus:ring-1 focus:ring-accent/40"
+      />
+    );
+  }
+  return (
+    <button
+      disabled={busy}
+      onClick={() => setEditing(true)}
+      title={t("profiles.renameHint")}
+      className="text-xs font-medium text-fg-primary hover:text-accent inline-flex items-center gap-1 group"
+    >
+      {label}
+      <Pencil className="w-3 h-3 opacity-0 group-hover:opacity-100 text-fg-muted" />
+    </button>
+  );
+}
+
+/** One mutation with a busy key, a toast either way, then a reload. */
+function useRunner(load: () => Promise<unknown>) {
+  const [busy, setBusy] = useState<string | null>(null);
+  const run = useCallback(
+    async (key: string, fn: () => Promise<unknown>, success: string) => {
+      setBusy(key);
+      try {
+        await fn();
+        toast.success(success);
+        await load();
+      } catch (err: unknown) {
+        toast.error(err);
+      } finally {
+        setBusy(null);
+      }
+    },
+    [load]
+  );
+  return { busy, run };
+}
+
+// ── Codex, Oh My Pi, … ─────────────────────────────────────────────────
+
+function OtherProfiles({
+  tool,
+  label,
+  login,
+  state,
+  loading,
+  pooled,
+  onChanged,
+}: {
+  tool: string;
+  label: string;
+  login: string;
+  state: ToolProfilesTool | null;
+  loading: boolean;
+  pooled: boolean;
+  onChanged: () => Promise<unknown>;
+}) {
+  const { t } = useTranslation("settings");
+  const { t: tc } = useTranslation("ccConfig");
+  const { busy, run } = useRunner(onChanged);
+  const [renaming, setRenaming] = useState<string | null>(null);
+
+  if (loading) return <SkeletonRows n={2} />;
+  if (!state) return <p className="text-xs text-fg-muted">{t("toolProfiles.noProfiles")}</p>;
+  if (!state.supported) {
+    return (
+      <p className="text-xs text-fg-muted inline-flex items-start gap-1.5">
+        <ShieldAlert className="h-3.5 w-3.5 flex-shrink-0 mt-0.5" />
+        <span>{t(`toolProfiles.unsupported.${tool}`, { defaultValue: state.reason ?? "" })}</span>
+      </p>
+    );
+  }
+  const items = state.items;
+  const activeSaved = items.some((p) => p.active);
+  const remove = async (p: ToolProfile) => {
+    const ok = await confirmDialog({
+      title: tc("profiles.deleteConfirmTitle", { name: p.label }),
+      message: t("toolProfiles.deleteConfirmBody", { tool: label }),
+      confirmLabel: tc("profiles.deleteButton"),
+    });
+    if (ok) {
+      void run(
+        `del:${p.name}`,
+        () => api.toolProfiles.remove(tool, p.name),
+        tc("profiles.deleteSuccess", { name: p.label })
+      );
+    }
+  };
+
+  return (
+    <div className="space-y-3">
+      <p className="text-[11px] text-fg-muted leading-relaxed">
+        {t(`toolProfiles.subtitle.${tool}`, { defaultValue: "" })}
+      </p>
+      {state.error && (
+        <div className="text-sm text-status-danger inline-flex items-center gap-2">
+          <AlertCircle className="w-4 h-4" />
+          {state.error.message}
+        </div>
+      )}
+      <div className={`${rowCls} space-y-1`}>
+        <div className="text-[10px] uppercase tracking-wide text-fg-muted">
+          {tc("profiles.activeLabel")}
+        </div>
+        {state.active ? (
+          <>
+            <div className="text-sm text-fg-primary">{who(state.active)}</div>
+            <OtherIdentityLine identity={state.active} />
+          </>
+        ) : (
+          <div className="text-sm text-fg-muted">{t("toolProfiles.noActive", { tool: label })}</div>
+        )}
+        {state.active && !activeSaved && (
+          <div className="pt-1.5 space-y-1.5">
+            <div className="text-[11px] text-status-warning">{tc("profiles.unsavedActive")}</div>
+            <button
+              disabled={busy !== null}
+              onClick={() =>
+                void run("save", () => api.toolProfiles.save(tool), tc("profiles.saveSuccess"))
+              }
+              className={btnCls}
+            >
+              <Save className="w-3 h-3" />
+              {busy === "save" ? tc("profiles.saving") : t("toolProfiles.saveButton")}
+            </button>
+          </div>
+        )}
+      </div>
+      {items.length === 0 && (
+        <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>
+      )}
+      {items.map((p) => (
+        <div key={p.name} data-testid={`profile-row-${tool}-${p.name}`} className={rowCls}>
+          <div className="flex items-center gap-2 flex-wrap">
+            <LabelEdit
+              label={p.label}
+              busy={busy !== null}
+              editing={renaming === p.name}
+              setEditing={(on) => setRenaming(on ? p.name : null)}
+              onRename={(next) =>
+                void run(
+                  `rename:${p.name}`,
+                  () => api.toolProfiles.rename(tool, p.name, next),
+                  tc("profiles.renameSuccess", { name: next })
+                )
+              }
+            />
+            {p.active && <ActiveBadge />}
+            <span className="text-xs text-fg-secondary truncate flex-1 min-w-0">{who(p)}</span>
+            {!p.active && (
+              <button
+                disabled={busy !== null}
+                onClick={() =>
+                  void run(
+                    `switch:${p.name}`,
+                    () => api.toolProfiles.activate(tool, p.name),
+                    t("toolProfiles.switchSuccess", { name: p.label, tool: label })
+                  )
+                }
+                className={btnCls}
+              >
+                {busy === `switch:${p.name}`
+                  ? tc("profiles.switching")
+                  : tc("profiles.switchButton")}
+              </button>
+            )}
+            {pooled && <MoveToPool tool={tool} name={p.name} />}
+            {!p.active && (
+              <button
+                type="button"
+                disabled={busy !== null}
+                onClick={() => void remove(p)}
+                title={tc("profiles.deleteButton")}
+                aria-label={tc("profiles.deleteButton")}
+                className="h-7 w-7 inline-flex items-center justify-center rounded-md text-fg-muted hover:text-status-danger hover:bg-surface-3 disabled:opacity-50"
+              >
+                <Trash2 className="w-3.5 h-3.5" />
+              </button>
+            )}
+          </div>
+          <OtherIdentityLine identity={p} />
+          {p.savedAt && (
+            <div className="text-[10px] text-fg-muted mt-1">
+              {tc("profiles.savedAt", { time: new Date(p.savedAt).toLocaleString() })}
+            </div>
+          )}
+        </div>
+      ))}
+      <LoginHint text={t("toolProfiles.loginHint", { tool: label })} command={login} />
+    </div>
+  );
+}
+
+const who = (id: ToolProfileIdentity) => id.email || id.detail || id.kind;
+
+function OtherIdentityLine({ identity }: { identity: ToolProfileIdentity }) {
+  const { t } = useTranslation("settings");
+  const parts = [
+    t(`toolProfiles.kind.${identity.kind}`, { defaultValue: identity.kind }),
+    identity.email ? identity.detail : null,
+  ].filter(Boolean);
+  return <div className="text-[10px] text-fg-muted mt-0.5">{parts.join(" · ")}</div>;
+}
+
+function ActiveBadge() {
+  const { t } = useTranslation("ccConfig");
+  return (
+    <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("profiles.activeBadge")}
+    </span>
+  );
+}
+
+// ── Claude Code ────────────────────────────────────────────────────────
+//
+// Swaps which Anthropic account the local `claude` CLI runs as. Only the two
+// identity artifacts move (the OAuth blob + `oauthAccount`), so skills,
+// subagents, memory, plugins, marketplaces and settings all stay exactly where
+// they are. The dashboard cannot log a new account in (only `claude auth login`
+// can mint tokens), so adding a profile is always "log in, then snapshot what
+// the CLI wrote" — a save button on the live account, never a name field: the
+// server derives the identifier, and the user edits the label in place. The
+// save button only appears while the live account is unsaved, because one
+// account is one profile.
+
+function ClaudeProfiles({ pooled }: { pooled: boolean }) {
+  const { t } = useTranslation("ccConfig");
+  const [items, setItems] = useState<CcProfile[] | null>(null);
+  const [active, setActive] = useState<CcAccountIdentity | null>(null);
+  /** `.claude.json`'s account, when it is not the one the live token belongs to. */
+  const [mismatchEmail, setMismatchEmail] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  /** Quota per profile, keyed by `name`, fetched for every profile once the
+   *  list arrives: the live account is read from the CLI and never refreshed,
+   *  any other profile only when its token has actually expired. */
+  const [usage, setUsage] = useState<Record<string, CcProfileUsage>>({});
+  const [usageError, setUsageError] = useState<Record<string, string>>({});
+  /** Per profile, so one slow account does not freeze the other rows. */
+  const [usageBusy, setUsageBusy] = useState<Record<string, boolean>>({});
+  /** Names already auto-fetched, so the effect below fires once per profile. */
+  const autoFetched = useRef<Set<string>>(new Set());
+  const ctx = useContextMenu<CcProfile>();
+
+  const load = useCallback(async () => {
+    try {
+      const r = await api.ccConfig.profiles();
+      setItems(r.items);
+      setActive(r.active);
+      setMismatchEmail(r.mismatch ? r.mismatch.configEmail || "?" : null);
+      setError(null);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "unknown");
+    }
+  }, []);
+  const { busy, run } = useRunner(load);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const checkUsage = useCallback(async (name: string) => {
+    setUsageBusy((prev) => ({ ...prev, [name]: true }));
+    setUsageError((prev) => {
+      const next = { ...prev };
+      delete next[name];
+      return next;
+    });
+    try {
+      const result = await api.ccConfig.profileUsage(name);
+      setUsage((prev) => ({ ...prev, [name]: result }));
+    } catch (err: unknown) {
+      setUsageError((prev) => ({
+        ...prev,
+        [name]: err instanceof Error ? err.message : "unknown error",
+      }));
+    } finally {
+      setUsageBusy((prev) => {
+        const next = { ...prev };
+        delete next[name];
+        return next;
+      });
+    }
+  }, []);
+
+  // Every profile's quota, once per profile per mount: a retry is the row's
+  // own button, so a failed account is not re-asked on every render.
+  useEffect(() => {
+    if (!items) return;
+    for (const p of items) {
+      if (autoFetched.current.has(p.name)) continue;
+      autoFetched.current.add(p.name);
+      void checkUsage(p.name);
+    }
+  }, [items, checkUsage]);
+
+  const activeSaved = items?.some((p) => p.active) ?? false;
+  /** How many saved profiles hold the same account as `p`. */
+  const copies = (p: CcProfile) =>
+    items?.filter((q) => q.accountUuid && q.accountUuid === p.accountUuid).length ?? 1;
+  /** Deletable unless it is the ONLY saved copy of the live account. */
+  const deletable = (p: CcProfile) => !p.active || copies(p) > 1;
+  const [renaming, setRenaming] = useState<string | null>(null);
+  const switchTo = (p: CcProfile) =>
+    void run(
+      `switch:${p.name}`,
+      () => api.ccConfig.activateProfile(p.name),
+      t("profiles.switchSuccess", { name: p.label })
+    );
+  const remove = async (p: CcProfile) => {
+    const ok = await confirmDialog({
+      title: t("profiles.deleteConfirmTitle", { name: p.label }),
+      message: t("profiles.deleteConfirmBody"),
+      confirmLabel: t("profiles.deleteButton"),
+    });
+    if (!ok) return;
+    void run(
+      `del:${p.name}`,
+      () => api.ccConfig.deleteProfile(p.name),
+      t("profiles.deleteSuccess", { name: p.label })
+    );
+  };
+  const pick = (fn: (p: CcProfile) => void) => () => {
+    const p = ctx.menu!.item;
+    ctx.close();
+    fn(p);
+  };
+
+  return (
+    <div className="space-y-3">
+      <p className="text-[11px] text-fg-muted leading-relaxed">{t("profiles.subtitle")}</p>
+      <p className="text-[11px] text-fg-muted leading-relaxed">{t("profiles.warning")}</p>
+      {mismatchEmail && (
+        <p className="text-[11px] text-status-warning inline-flex items-start gap-1.5 leading-relaxed">
+          <ShieldAlert className="w-3.5 h-3.5 flex-shrink-0 mt-0.5" />
+          <span>
+            {t("profiles.mismatch", {
+              config: mismatchEmail,
+              owner: active?.email || active?.accountUuid || "?",
+            })}
+          </span>
+        </p>
+      )}
+      {error && (
+        <div className="text-sm text-status-danger inline-flex items-center gap-2">
+          <AlertCircle className="w-4 h-4" />
+          {error}
+        </div>
+      )}
+
+      <div className={`${rowCls} space-y-1`}>
+        <div className="text-[10px] uppercase tracking-wide text-fg-muted">
+          {t("profiles.activeLabel")}
+        </div>
+        {active ? (
+          <>
+            <div className="text-sm text-fg-primary">
+              {active.email || active.displayName || active.accountUuid}
+            </div>
+            <IdentityLine identity={active} />
+          </>
+        ) : (
+          <div className="text-sm text-fg-muted">{t("profiles.noActive")}</div>
+        )}
+        {active && !activeSaved && (
+          <div className="pt-1.5 space-y-1.5">
+            <div className="text-[11px] text-status-warning">{t("profiles.unsavedActive")}</div>
+            <button
+              disabled={busy !== null}
+              onClick={() =>
+                void run("save", () => api.ccConfig.saveProfile(), t("profiles.saveSuccess"))
+              }
+              className={btnCls}
+            >
+              <Save className="w-3 h-3" />
+              {busy === "save" ? t("profiles.saving") : t("profiles.saveButton")}
+            </button>
+          </div>
+        )}
+      </div>
+
+      {items === null && !error && <SkeletonRows n={3} />}
+      {items !== null && items.length === 0 && (
+        <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) => (
+        <div
+          key={p.name}
+          data-testid={`profile-row-${p.name}`}
+          onContextMenu={(e) => ctx.open(e, p)}
+          className={rowCls}
+        >
+          <div className="flex items-center gap-2 flex-wrap">
+            <LabelEdit
+              label={p.label}
+              busy={busy !== null}
+              editing={renaming === p.name}
+              setEditing={(on) => setRenaming(on ? p.name : null)}
+              onRename={(next) =>
+                void run(
+                  `rename:${p.name}`,
+                  () => api.ccConfig.renameProfile(p.name, next),
+                  t("profiles.renameSuccess", { name: next })
+                )
+              }
+            />
+            {p.active && <ActiveBadge />}
+            <span className="text-xs text-fg-secondary truncate flex-1 min-w-0">
+              {p.email || p.displayName || p.accountUuid}
+            </span>
+            {!p.active && (
+              <button disabled={busy !== null} onClick={() => switchTo(p)} className={btnCls}>
+                {busy === `switch:${p.name}` ? t("profiles.switching") : t("profiles.switchButton")}
+              </button>
+            )}
+            {pooled && <MoveToPool tool="claude" name={p.name} />}
+            {deletable(p) && (
+              <button
+                type="button"
+                disabled={busy !== null}
+                onClick={() => void remove(p)}
+                title={t("profiles.deleteButton")}
+                aria-label={t("profiles.deleteButton")}
+                className="h-7 w-7 inline-flex items-center justify-center rounded-md text-fg-muted hover:text-status-danger hover:bg-surface-3 disabled:opacity-50"
+              >
+                <Trash2 className="w-3.5 h-3.5" />
+              </button>
+            )}
+          </div>
+          <IdentityLine identity={p} />
+          <ProfileUsageLine
+            usage={usage[p.name]}
+            error={usageError[p.name]}
+            busy={!!usageBusy[p.name]}
+            disabled={busy !== null || !!usageBusy[p.name]}
+            onCheck={() => void checkUsage(p.name)}
+          />
+          {p.savedAt && (
+            <div className="text-[10px] text-fg-muted mt-1">
+              {t("profiles.savedAt", { time: new Date(p.savedAt).toLocaleString() })}
+            </div>
+          )}
+        </div>
+      ))}
+
+      {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 && (
+            <MenuItem disabled={busy !== null} onSelect={pick(switchTo)}>
+              {t("profiles.switchButton")}
+            </MenuItem>
+          )}
+          <MenuItem
+            disabled={busy !== null || !!usageBusy[ctx.menu.item.name]}
+            onSelect={pick((p) => void checkUsage(p.name))}
+          >
+            {t("profiles.usageCheck")}
+          </MenuItem>
+          {deletable(ctx.menu.item) && (
+            <>
+              <MenuSeparator />
+              <MenuItem
+                danger
+                disabled={busy !== null}
+                testId="profile-menu-delete"
+                onSelect={pick((p) => void remove(p))}
+              >
+                {t("profiles.deleteButton")}
+              </MenuItem>
+            </>
+          )}
+        </ContextMenu>
+      )}
+
+      <LoginHint text={t("profiles.loginHint")} command="claude auth login" />
+    </div>
+  );
+}
+
+/**
+ * One profile's quota: a button until asked, then the two windows Anthropic
+ * reports — the 5-hour session allowance and the 7-day one. Reading a saved
+ * profile's usage may refresh its OAuth token (rotating it on disk), so it
+ * happens once per mount or click, never on a poll.
+ */
+function ProfileUsageLine({
+  usage,
+  error,
+  busy,
+  disabled,
+  onCheck,
+}: {
+  usage?: CcProfileUsage;
+  error?: string;
+  busy: boolean;
+  disabled: boolean;
+  onCheck: () => void;
+}) {
+  const { t } = useTranslation("ccConfig");
+  const pct = (w: CcUsageWindow | null | undefined) =>
+    w && w.utilization !== null ? `${Math.round(w.utilization)}%` : "—";
+  const resetTitle = (w: CcUsageWindow | null | undefined) =>
+    w && w.resetsAt
+      ? t("profiles.usageResets", { time: new Date(w.resetsAt).toLocaleString() })
+      : undefined;
+
+  if (error) {
+    return (
+      <div className="mt-1 flex items-center gap-2 text-[10px]">
+        <span className="text-status-danger">{error}</span>
+        <button
+          onClick={onCheck}
+          disabled={disabled}
+          className="text-fg-muted hover:text-accent disabled:opacity-50"
+        >
+          {t("profiles.usageRetry")}
+        </button>
+      </div>
+    );
+  }
+  if (!usage) {
+    return (
+      <button
+        onClick={onCheck}
+        disabled={disabled}
+        title={t("profiles.usageHint")}
+        className="mt-1 text-[10px] text-fg-muted hover:text-accent disabled:opacity-50"
+      >
+        {busy ? t("profiles.usageChecking") : t("profiles.usageCheck")}
+      </button>
+    );
+  }
+  return (
+    <div className="mt-1 flex items-center gap-2 text-[10px] text-fg-muted">
+      <span title={resetTitle(usage.fiveHour)}>
+        {t("profiles.usageFiveHour")}{" "}
+        <span className="text-fg-secondary">{pct(usage.fiveHour)}</span>
+      </span>
+      <span title={resetTitle(usage.sevenDay)}>
+        {t("profiles.usageSevenDay")}{" "}
+        <span className="text-fg-secondary">{pct(usage.sevenDay)}</span>
+      </span>
+      <button
+        onClick={onCheck}
+        disabled={disabled}
+        className="hover:text-accent disabled:opacity-50"
+      >
+        {busy ? t("profiles.usageChecking") : t("profiles.usageRefresh")}
+      </button>
+    </div>
+  );
+}
+
+/** Org / seat / plan line shared by the active card and each profile row. */
+function IdentityLine({ identity }: { identity: CcAccountIdentity }) {
+  const parts = [identity.organization, identity.seatTier, identity.subscriptionType].filter(
+    Boolean
+  );
+  if (parts.length === 0) return null;
+  return <div className="text-[10px] text-fg-muted mt-0.5">{parts.join(" · ")}</div>;
+}

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

@@ -2,8 +2,9 @@
  * @file AccountSettings.test.tsx
  * @description Settings → Account: shows the account's own information, saves
  * only a changed display name/email, refuses a password change whose two new
- * passwords differ, sends the current + new password, asks before signing
- * the other devices out, and uploads/removes the avatar.
+ * passwords differ, keeps a password that misses a rule from being sent,
+ * sends the current + new password, asks before signing
+ * the other devices out, and uploads/removes the avatar or sets it from a link.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -17,6 +18,7 @@ const me = vi.hoisted(() => ({
   changePassword: vi.fn(),
   signOutOthers: vi.fn(),
   setAvatar: vi.fn(),
+  setAvatarFromUrl: vi.fn(),
   removeAvatar: vi.fn(),
   avatarUrl: (at?: string | null) => (at ? `/api/me/avatar?v=${at}` : null),
 }));
@@ -76,6 +78,55 @@ describe("AccountSettings", () => {
     expect(await screen.findByTestId("user-avatar-initials")).toBeTruthy();
   });
 
+  /** jsdom never loads an image: play the browser's answer to `src`. */
+  const stubImage = (loads: boolean) =>
+    vi.stubGlobal(
+      "Image",
+      class {
+        naturalWidth = loads ? 64 : 0;
+        referrerPolicy = "";
+        onload: (() => void) | null = null;
+        onerror: (() => void) | null = null;
+        set src(_v: string) {
+          setTimeout(() => (loads ? this.onload?.() : this.onerror?.()), 0);
+        }
+      }
+    );
+
+  it("refuses a link this browser cannot load as an image, and saves nothing", async () => {
+    const ue = userEvent.setup();
+    stubImage(false);
+    render(<AccountSettings />);
+    await screen.findByTestId("account-card");
+    await ue.click(screen.getByTestId("account-avatar-url-toggle"));
+    await ue.type(
+      screen.getByTestId("account-avatar-url-input"),
+      "https://chat.example/api/v4/users/x/image{Enter}"
+    );
+    await waitFor(() => expect(screen.getByTestId("account-avatar-url-input")).toBeTruthy());
+    await new Promise((r) => setTimeout(r, 20));
+    expect(me.setAvatarFromUrl).not.toHaveBeenCalled();
+    vi.unstubAllGlobals();
+  });
+
+  it("sets the avatar from a link and closes the field", async () => {
+    const ue = userEvent.setup();
+    stubImage(true);
+    const withAvatar = { ...account, user: { ...account.user, avatarAt: "2026-10-21T00:00:00Z" } };
+    me.setAvatarFromUrl.mockResolvedValue(withAvatar);
+    render(<AccountSettings />);
+    await screen.findByTestId("account-card");
+    expect(screen.queryByTestId("account-avatar-url-input")).toBeNull();
+    await ue.click(screen.getByTestId("account-avatar-url-toggle"));
+    await ue.type(screen.getByTestId("account-avatar-url-input"), " https://x.vn/me.png {Enter}");
+    await waitFor(() => expect(me.setAvatarFromUrl).toHaveBeenCalledWith("https://x.vn/me.png"));
+    expect((await screen.findByTestId("user-avatar-img")).getAttribute("src")).toBe(
+      "/api/me/avatar?v=2026-10-21T00:00:00Z"
+    );
+    expect(screen.queryByTestId("account-avatar-url-input")).toBeNull();
+    vi.unstubAllGlobals();
+  });
+
   it("shows the account's own information", async () => {
     render(<AccountSettings />);
     const card = await screen.findByTestId("account-card");
@@ -114,9 +165,21 @@ describe("AccountSettings", () => {
     await ue.type(screen.getByLabelText("Current password"), "old-pass-1");
     await ue.type(screen.getByLabelText("New password"), "new-pass-123");
     await ue.type(screen.getByLabelText("Confirm new password"), "new-pass-123");
+    // No upper-case letter: the checklist says so and the button stays off.
+    expect(
+      screen
+        .getByTestId("password-rules")
+        .querySelector('[data-rule="upper"]')
+        ?.getAttribute("data-ok")
+    ).toBe("false");
+    expect(screen.getByRole("button", { name: "Change password" })).toBeDisabled();
+    await ue.clear(screen.getByLabelText("New password"));
+    await ue.clear(screen.getByLabelText("Confirm new password"));
+    await ue.type(screen.getByLabelText("New password"), "New-pass-123");
+    await ue.type(screen.getByLabelText("Confirm new password"), "New-pass-123");
     await ue.click(screen.getByRole("button", { name: "Change password" }));
     await waitFor(() =>
-      expect(me.changePassword).toHaveBeenCalledWith("old-pass-1", "new-pass-123")
+      expect(me.changePassword).toHaveBeenCalledWith("old-pass-1", "New-pass-123")
     );
   });
 

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

@@ -0,0 +1,74 @@
+/**
+ * @file Tests for OmpSharingSettings — the admin's Oh My Pi login-sharing
+ * switch in Settings → AI tools: hidden in local mode, for a non-admin and
+ * outside S3, and a toggle saves through PUT /api/ai-tools/omp-sharing and
+ * shows the daemons' state.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import "../../../i18n";
+import { OmpSharingSettings } from "../OmpSharingSettings";
+import { api, type OmpSharingState } from "../../../lib/api";
+
+const perms = vi.hoisted(() => ({ isAdmin: true, local: false }));
+vi.mock("../../AuthGate", () => ({ usePermissions: () => perms }));
+vi.mock("../../../lib/api", () => ({
+  api: { aiTools: { ompSharing: vi.fn(), setOmpSharing: vi.fn() } },
+}));
+
+const get = vi.mocked(api.aiTools.ompSharing);
+const set = vi.mocked(api.aiTools.setOmpSharing);
+const off: OmpSharingState = {
+  available: true,
+  enabled: false,
+  installed: true,
+  broker: { running: false, error: null },
+  gateway: { running: false, error: null },
+};
+
+describe("OmpSharingSettings", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    perms.isAdmin = true;
+    perms.local = false;
+  });
+
+  it("lets an admin turn sharing on and shows it running", async () => {
+    get.mockResolvedValue(off);
+    set.mockResolvedValue({
+      ...off,
+      enabled: true,
+      broker: { running: true },
+      gateway: { running: true, port: 4827 },
+    });
+    render(<OmpSharingSettings />);
+    const sw = await screen.findByRole("switch", { name: "Share this server's Oh My Pi login" });
+    fireEvent.click(sw);
+    await waitFor(() => expect(set).toHaveBeenCalledWith(true));
+    expect(await screen.findByTestId("omp-sharing-status")).toHaveTextContent("Running");
+  });
+
+  it("names a daemon's failure", async () => {
+    get.mockResolvedValue({
+      ...off,
+      enabled: true,
+      gateway: { running: false, error: "port 4827 is taken" },
+    });
+    render(<OmpSharingSettings />);
+    expect(await screen.findByTestId("omp-sharing-status")).toHaveTextContent("port 4827 is taken");
+  });
+
+  it("renders nothing outside S3, for a non-admin or in local mode", async () => {
+    get.mockResolvedValue({ ...off, available: false });
+    const r = render(<OmpSharingSettings />);
+    await waitFor(() => expect(get).toHaveBeenCalled());
+    expect(r.container).toBeEmptyDOMElement();
+    r.unmount();
+    perms.isAdmin = false;
+    const r2 = render(<OmpSharingSettings />);
+    expect(r2.container).toBeEmptyDOMElement();
+    expect(get).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,178 @@
+/**
+ * @file Tests for ToolProfilesSettings — Settings → AI tools → Profiles: one
+ * tab per AI tool. Claude's tab asks for EVERY saved account's quota once (a
+ * 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.
+ * @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 { MemoryRouter } from "react-router-dom";
+import "../../../i18n";
+import { settleConfirm } from "../../../lib/confirm";
+import { ToolProfilesSettings } from "../ToolProfilesSettings";
+
+const perms = vi.hoisted(() => ({ isAdmin: true, local: true, seesAll: true }));
+vi.mock("../../AuthGate", () => ({ usePermissions: () => perms }));
+vi.mock("../../../hooks/useAiTools", () => ({
+  useAiTools: () => ({
+    byId: (id: string) => ({ id, installed: true, enabled: true }),
+  }),
+}));
+
+const m = vi.hoisted(() => {
+  const window = (utilization: number) => ({ utilization, resetsAt: "2026-09-18T08:00:00Z" });
+  return {
+    window,
+    cc: {
+      profiles: vi.fn(),
+      profileUsage: vi.fn(),
+      deleteProfile: vi.fn(),
+      activateProfile: vi.fn(),
+      saveProfile: vi.fn(),
+      renameProfile: vi.fn(),
+    },
+    tp: { list: vi.fn(), activate: vi.fn(), save: vi.fn(), rename: vi.fn(), remove: vi.fn() },
+    pool: { list: vi.fn() },
+  };
+});
+vi.mock("../../../lib/api", () => ({
+  api: {
+    ccConfig: m.cc,
+    toolProfiles: m.tp,
+    accountPool: m.pool,
+    aiTools: { iconUrl: (id: string) => `/icons/${id}.png` },
+  },
+}));
+
+async function settle() {
+  await act(async () => {
+    await new Promise((res) => setTimeout(res, 0));
+    await new Promise((res) => setTimeout(res, 0));
+  });
+}
+
+async function show() {
+  render(
+    <MemoryRouter>
+      <ToolProfilesSettings />
+    </MemoryRouter>
+  );
+  await settle();
+  await settle();
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  perms.local = true;
+  m.cc.profiles.mockResolvedValue({
+    items: [
+      { name: "work", label: "Work", active: true, accountUuid: "u1", email: "a@b.c" },
+      { name: "spare", label: "Spare", active: false, accountUuid: "u2", email: "d@e.f" },
+    ],
+    active: { accountUuid: "u1", email: "a@b.c" },
+  });
+  m.cc.profileUsage.mockImplementation(async (name: string) => {
+    if (name === "spare") throw new Error("this profile's saved login has been superseded");
+    return { name, refreshed: false, fiveHour: m.window(8), sevenDay: m.window(70) };
+  });
+  m.cc.deleteProfile.mockResolvedValue({ ok: true, name: "spare" });
+  m.tp.list.mockResolvedValue({
+    tools: [
+      {
+        tool: "codex",
+        supported: true,
+        items: [
+          {
+            name: "a",
+            label: "Alice",
+            active: true,
+            kind: "chatgpt",
+            email: "a@x",
+            detail: "plus",
+          },
+          { name: "b", label: "Bob", active: false, kind: "apikey", email: null, detail: "…1234" },
+        ],
+        active: { kind: "chatgpt", email: "a@x", detail: "plus" },
+      },
+      { tool: "omp", supported: true, items: [], active: null },
+      { tool: "antigravity", supported: false, reason: "keyring", items: [], active: null },
+    ],
+  });
+  m.tp.activate.mockResolvedValue({ ok: true, name: "b", savedOutgoing: "a" });
+  m.pool.list.mockResolvedValue({ accounts: [{ name: "p1" }], codex: [], blockPercent: 90 });
+});
+
+describe("ToolProfilesSettings — Claude", () => {
+  it("asks for every saved account's quota once, a failure costing the others nothing", async () => {
+    await show();
+    await settle();
+    expect(m.cc.profileUsage).toHaveBeenCalledWith("work");
+    expect(m.cc.profileUsage).toHaveBeenCalledWith("spare");
+    expect(m.cc.profileUsage.mock.calls.filter((c) => c[0] === "work")).toHaveLength(1);
+    expect(await screen.findByText("8%")).toBeInTheDocument();
+    expect(await screen.findByText(/saved login has been superseded/i)).toBeInTheDocument();
+  });
+
+  it("deletes from the right-click menu only after confirming", async () => {
+    const user = userEvent.setup();
+    await show();
+    await user.pointer({ keys: "[MouseRight]", target: screen.getByTestId("profile-row-spare") });
+    await user.click(screen.getByTestId("profile-menu-delete"));
+    await settle();
+    expect(m.cc.deleteProfile).not.toHaveBeenCalled();
+    await act(async () => settleConfirm(true));
+    await settle();
+    expect(m.cc.deleteProfile).toHaveBeenCalledWith("spare");
+  });
+
+  it("offers no delete for the only saved copy of the live account", async () => {
+    const user = userEvent.setup();
+    await show();
+    await user.pointer({ keys: "[MouseRight]", target: screen.getByTestId("profile-row-work") });
+    expect(screen.getByTestId("profile-menu")).toBeInTheDocument();
+    expect(screen.queryByTestId("profile-menu-delete")).toBeNull();
+  });
+});
+
+describe("ToolProfilesSettings — other tools", () => {
+  it("switches a Codex login through /api/tool-profiles", async () => {
+    const user = userEvent.setup();
+    await show();
+    await user.click(screen.getByRole("tab", { name: /codex/i }));
+    const bob = screen.getByTestId("profile-row-codex-b");
+    expect(bob).toHaveTextContent("…1234");
+    await user.click(screen.getByRole("button", { name: "Switch to" }));
+    await settle();
+    expect(m.tp.activate).toHaveBeenCalledWith("codex", "b");
+    expect(m.tp.list).toHaveBeenCalledTimes(2);
+  });
+
+  it("says why Antigravity cannot be switched", async () => {
+    const user = userEvent.setup();
+    await show();
+    await user.click(screen.getByRole("tab", { name: /antigravity/i }));
+    expect(screen.getByText(/system keyring/i)).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Switch to" })).toBeNull();
+  });
+});
+
+describe("ToolProfilesSettings — account pool", () => {
+  it("is not shown in local mode", async () => {
+    await show();
+    expect(m.pool.list).not.toHaveBeenCalled();
+    expect(screen.queryByText(/Move to pool/)).toBeNull();
+  });
+
+  it("in server mode shows the pool's size and links a profile into it", async () => {
+    perms.local = false;
+    await show();
+    expect(screen.getByText(/holds 1 account/)).toBeInTheDocument();
+    const [link] = screen.getAllByRole("link", { name: /Move to pool/ });
+    expect(link?.getAttribute("href")).toBe("/admin?poolAdd=claude&poolProfile=work#account-pool");
+  });
+});

client/src/components/users/AccountPoolCard.tsx

@@ -1,38 +1,56 @@
 /**
  * @file AccountPoolCard.tsx
- * @description The Users page's account pool card (`GET /api/accounts`): the
- * Claude and Codex accounts every user's new sessions are spread over, each
- * with its live panes, $ and tokens in the last 5 h / 7 d and quota — so nobody signs in
- * per user. An admin adds one — for Claude a login MOVED in from a saved
- * switch-user profile (`GET /api/accounts/profiles`), a pasted
- * `.credentials.json`, or a `claude setup-token` token; for Codex an OpenAI
- * API key or a pasted `auth.json` — or removes one, each time with their own
- * password again; an analyst only reads. The secret only goes IN: the server
- * never sends it back. An account's Edit (pencil) picks the users who run on
- * it (`PUT /api/accounts/:name/users`): their sessions skip the balancer, and
- * a Claude login goes into their home at once — no restart.
+ * @description The Users page's account pool card (`GET /api/accounts`), one
+ * tab per AI tool so each tool's pool is managed on its own: Claude Code,
+ * Codex and Cursor have a pool — the accounts every user's new sessions of that
+ * tool are spread over, each with its live panes (and, for Claude/Codex, $ and
+ * tokens in the last 5 h / 7 d and quota) — so nobody signs in per user;
+ * Oh My Pi has no pool but can share the host's login (the same switch as
+ * Settings → AI tools, `GET/PUT /api/ai-tools/omp-sharing`, S3 only); every
+ * other installed tool says that its users sign in themselves. A tab shows
+ * how many accounts its pool holds, and an empty pool says so instead of
+ * vanishing. An admin adds an account to the open tab's tool — for Claude a
+ * login MOVED in from a saved profile (Settings → AI tools → Profiles,
+ * `GET /api/accounts/profiles`), a pasted `.credentials.json`, or a
+ * `claude setup-token` token; for Codex a saved Codex profile
+ * (`?tool=codex`), an OpenAI API key or a pasted `auth.json`; for Cursor a
+ * Cursor API key — or removes one, each time with their own password again;
+ * an analyst only reads. The secret only goes IN: the server never sends it
+ * back. An account's Edit (pencil) picks the users who run on it
+ * (`PUT /api/accounts/:name/users`): their sessions skip the balancer, and a
+ * Claude login goes into their home at once — no restart. A profile's
+ * "Move to pool" link lands here as `?poolAdd=<tool>&poolProfile=<name>`,
+ * which opens that tool's tab and Add on that profile; the header links back
+ * to the profiles.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
 import { useCallback, useEffect, useState, type KeyboardEvent, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import type { TFunction } from "i18next";
-import { KeyRound, Pencil, Plus, RefreshCw, Trash2 } from "lucide-react";
+import { Link, useSearchParams } from "react-router-dom";
+import { KeyRound, Pencil, Plus, RefreshCw, Share2, Trash2, UserRound, Users } from "lucide-react";
 import {
   api,
   type AccountPin,
   type AccountPool,
+  type OmpSharingState,
   type PoolAccountInput,
   type PoolProfile,
   type PoolTool,
   type ServerUserUsage,
+  type CcUsageWindow,
 } from "../../lib/api";
 import { fmt, fmtCost, formatDateTime } from "../../lib/format";
 import { toast } from "../../lib/toast";
 import { isSubmitEnter } from "../../lib/keys";
 import { useSpin } from "../../hooks/useSpin";
+import { useAiTools } from "../../hooks/useAiTools";
 import { ConfirmModal } from "../ConfirmModal";
 import { Checkbox } from "../Checkbox";
+import { AiToolIcon } from "../AiToolIcon";
+import { SettingsSwitchRow } from "../settings/SettingsRow";
+import { PoolGroups, groupsOf } from "./PoolGroups";
 
 type Row = {
   tool: PoolTool;
@@ -49,19 +67,81 @@ type Row = {
   tokens7d: number;
   quotaPercent: number | null;
   full: boolean;
+  /** The 5-hour and weekly windows, as the account last reported them. */
+  windows: QuotaWindow[];
 };
 
-function rowsOf(pool: AccountPool): Row[] {
-  return [
-    ...pool.accounts.map((a) => ({ ...a, tool: "claude" as const })),
-    ...pool.codex.map((a) => ({
-      ...a,
-      tool: "codex" as const,
-      expired: false,
-      email: null,
-      refreshError: null,
-    })),
-  ];
+/** One quota window of an account: % used and when it rolls over. */
+type QuotaWindow = { key: "5h" | "wk"; used: number | null; resetsAt: string | null };
+
+/**
+ * The 5-hour and weekly windows of an account, from Claude's `fiveHour` /
+ * `sevenDay` or Codex's `5h` / `wk` rollout windows. A window whose reset has
+ * passed is empty again (the reading predates it), as the balancer treats it.
+ */
+function windowsOf(
+  a: AccountPool["accounts"][number] | AccountPool["codex"][number]
+): QuotaWindow[] {
+  const q = a.quota as
+    | {
+        fiveHour?: CcUsageWindow | null;
+        sevenDay?: CcUsageWindow | null;
+        windows?: { label: string; usedPercent: number; resetsAt: string | null }[];
+      }
+    | null
+    | undefined;
+  const fromClaude = (w: CcUsageWindow | null | undefined) =>
+    w ? { used: w.utilization, resetsAt: w.resetsAt } : null;
+  const fromCodex = (label: string) => {
+    const w = q?.windows?.find((x) => x.label === label);
+    return w ? { used: w.usedPercent, resetsAt: w.resetsAt } : null;
+  };
+  return (["5h", "wk"] as const).map((key) => {
+    const w = (key === "5h" ? fromClaude(q?.fiveHour) : fromClaude(q?.sevenDay)) ?? fromCodex(key);
+    const passed = w?.resetsAt != null && Date.parse(w.resetsAt) <= Date.now();
+    return {
+      key,
+      used: passed ? 0 : (w?.used ?? null),
+      resetsAt: passed ? null : (w?.resetsAt ?? null),
+    };
+  });
+}
+
+/** "2h 10m" / "3d 4h" until `iso`, or null once it has passed. */
+function untilText(iso: string | null): string | null {
+  const ms = iso ? Date.parse(iso) - Date.now() : NaN;
+  if (!(ms > 0)) return null;
+  const m = Math.floor(ms / 60_000);
+  const d = Math.floor(m / 1440);
+  const h = Math.floor((m % 1440) / 60);
+  return d ? `${d}d ${h}h` : h ? `${h}h ${m % 60}m` : `${m}m`;
+}
+
+/** The tools that have a pool, in tab order (server/routes/accounts.js). */
+const POOL_TOOLS: PoolTool[] = ["claude", "codex", "cursor"];
+/** Fixed tabs, always shown; any other installed tool follows them. */
+const FIXED_TABS: { id: string; label: string }[] = [
+  { id: "claude", label: "Claude Code" },
+  { id: "codex", label: "Codex" },
+  { id: "cursor", label: "Cursor CLI" },
+  { id: "omp", label: "Oh My Pi" },
+];
+/** Tools whose pool reports spend and quota (Cursor's CLI exposes neither). */
+const METERED = new Set<PoolTool>(["claude", "codex"]);
+
+const isPoolTool = (id: string): id is PoolTool => (POOL_TOOLS as string[]).includes(id);
+
+function rowsOf(pool: AccountPool, tool: PoolTool): Row[] {
+  if (tool === "claude") return pool.accounts.map((a) => ({ ...a, tool, windows: windowsOf(a) }));
+  const list = tool === "codex" ? pool.codex : (pool.cursor ?? []);
+  return list.map((a) => ({
+    ...a,
+    tool,
+    expired: false,
+    email: null,
+    refreshError: null,
+    windows: tool === "codex" ? windowsOf(a as AccountPool["codex"][number]) : [],
+  }));
 }
 
 const pinsOf = (pool: AccountPool, tool: PoolTool): AccountPin[] => pool.pins?.[tool] ?? [];
@@ -75,9 +155,30 @@ function errorText(t: TFunction<"users">, e: unknown): string {
 
 export function AccountPoolCard({ isAdmin }: { isAdmin: boolean }) {
   const { t } = useTranslation("users");
+  const aiTools = useAiTools();
   const [pool, setPool] = useState<AccountPool | null>(null);
+  const [omp, setOmp] = useState<OmpSharingState | null>(null);
   const [error, setError] = useState<string | null>(null);
-  const [adding, setAdding] = useState(false);
+  const [params, setParams] = useSearchParams();
+  // A profile's "Move to pool" (Settings → AI tools → Profiles) lands here.
+  const preset = (() => {
+    const tool = params.get("poolAdd");
+    const profile = params.get("poolProfile");
+    return tool && isPoolTool(tool) && profile ? { tool, profile } : null;
+  })();
+  const [tab, setTab] = useState<string>(preset?.tool ?? "claude");
+  // What Add opens on: a tool, and a saved profile to share into its pool.
+  const [adding, setAdding] = useState<{ tool: PoolTool; profile?: string } | null>(() =>
+    isAdmin && preset ? preset : null
+  );
+  const closeAdd = () => {
+    setAdding(null);
+    if (!preset) return;
+    const next = new URLSearchParams(params);
+    next.delete("poolAdd");
+    next.delete("poolProfile");
+    setParams(next, { replace: true });
+  };
   const [removing, setRemoving] = useState<Row | null>(null);
   const [editing, setEditing] = useState<Row | null>(null);
 
@@ -96,19 +197,38 @@ export function AccountPoolCard({ isAdmin }: { isAdmin: boolean }) {
 
   useEffect(() => {
     void load();
+    // Oh My Pi's tab: the host's login shared through omp's own gateway (S3).
+    api.aiTools
+      .ompSharing()
+      .then(setOmp)
+      .catch(() => setOmp(null));
   }, [load]);
 
-  const rows = pool ? rowsOf(pool) : [];
-  const th = "px-5 py-2.5 text-[11px] font-semibold text-fg-muted uppercase tracking-wider";
+  // Every other INSTALLED tool gets a tab too, so "no pool" is said, not implied.
+  const tabs = [
+    ...FIXED_TABS,
+    ...aiTools.tools
+      .filter((x) => x.installed && !FIXED_TABS.some((f) => f.id === x.id))
+      .map((x) => ({ id: x.id, label: x.label })),
+  ];
+  const current = tabs.find((x) => x.id === tab) ?? FIXED_TABS[0]!;
+  const badge = (id: string): string | null => {
+    if (isPoolTool(id)) return pool ? String(rowsOf(pool, id).length) : null;
+    if (id === "omp") return omp?.available && omp.enabled ? t("pool.omp.badgeOn") : null;
+    return null;
+  };
 
   return (
-    <section className="card" data-testid="account-pool">
+    <section id="account-pool" className="card scroll-mt-24" data-testid="account-pool">
       <div className="flex flex-wrap items-center gap-2 px-5 py-4 border-b border-border">
         <KeyRound className="w-4 h-4 text-fg-muted" />
-        <div className="flex-1 min-w-0">
+        <div className="flex-1 min-w-[14rem]">
           <h2 className="text-sm font-semibold text-fg-primary">{t("pool.title")}</h2>
           <p className="text-xs text-fg-muted">{t("pool.description")}</p>
         </div>
+        <Link to="/settings/agents#tool-profiles" className="btn-ghost text-xs">
+          {t("pool.profilesLink")}
+        </Link>
         <button
           type="button"
           onClick={refresh}
@@ -120,125 +240,78 @@ export function AccountPoolCard({ isAdmin }: { isAdmin: boolean }) {
         >
           <RefreshCw className={`w-4 h-4 ${spinning ? "animate-spin" : ""}`} />
         </button>
-        {isAdmin && (
-          <button type="button" onClick={() => setAdding(true)} className="btn-primary">
-            <Plus className="w-4 h-4" /> {t("pool.add")}
-          </button>
-        )}
+      </div>
+      {pool?.groups && <PoolGroups pool={pool} isAdmin={isAdmin} onChanged={() => void load()} />}
+      <div
+        role="tablist"
+        aria-label={t("pool.title")}
+        className="flex gap-1 overflow-x-auto px-5 pt-3 border-b border-border"
+      >
+        {tabs.map((x) => {
+          const selected = x.id === current.id;
+          const count = badge(x.id);
+          return (
+            <button
+              key={x.id}
+              type="button"
+              role="tab"
+              id={`pool-tab-${x.id}`}
+              aria-selected={selected}
+              aria-controls="pool-panel"
+              onClick={() => setTab(x.id)}
+              className={`-mb-px inline-flex shrink-0 items-center gap-1.5 border-b-2 px-3 pb-2.5 pt-1 text-sm transition-colors ${
+                selected
+                  ? "border-accent text-fg-primary font-medium"
+                  : "border-transparent text-fg-muted hover:text-fg-secondary"
+              }`}
+            >
+              <AiToolIcon tool={x} className="h-4 w-4" />
+              {x.label}
+              {count !== null && (
+                <span
+                  className={`rounded-full px-1.5 text-[10px] tabular-nums ${
+                    selected ? "bg-accent/15 text-accent" : "bg-surface-3 text-fg-muted"
+                  }`}
+                >
+                  {count}
+                </span>
+              )}
+            </button>
+          );
+        })}
       </div>
       {error && (
         <p role="alert" className="px-5 py-3 text-xs text-status-danger">
           {error}
         </p>
       )}
-      {pool && rows.length === 0 && (
-        <p className="px-5 py-8 text-center text-sm text-fg-muted">{t("pool.empty")}</p>
-      )}
-      {rows.length > 0 && (
-        <div className="overflow-x-auto">
-          <table className="w-full min-w-[640px]">
-            <thead>
-              <tr className="border-b border-border text-left">
-                <th className={th}>{t("pool.account")}</th>
-                <th className={th}>{t("pool.tool")}</th>
-                <th className={`${th} text-right`}>{t("pool.livePanes")}</th>
-                <th className={`${th} text-right`}>{t("pool.quota")}</th>
-                <th className={`${th} text-right`}>{t("pool.spend")}</th>
-                {isAdmin && <th className={`${th} text-right`}>{t("actions")}</th>}
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-border">
-              {rows.map((r) => (
-                <tr key={`${r.tool}:${r.name}`} className={r.expired ? "opacity-60" : ""}>
-                  <td className="px-5 py-2.5">
-                    <div className="text-sm font-medium text-fg-primary">{r.name}</div>
-                    {r.email && <div className="text-[11px] text-fg-secondary">{r.email}</div>}
-                    <div className="text-[11px] text-fg-muted">
-                      {t("pool.added", { at: formatDateTime(r.addedAt) })}
-                    </div>
-                    {pool && pinsOf(pool, r.tool).some((p) => p.account === r.name) && (
-                      <div className="text-[11px] text-fg-secondary">
-                        {t("pool.pinned", {
-                          users: pinsOf(pool, r.tool)
-                            .filter((p) => p.account === r.name)
-                            .map((p) => p.username)
-                            .join(", "),
-                        })}
-                      </div>
-                    )}
-                  </td>
-                  <td className="px-5 py-2.5 text-sm text-fg-secondary">
-                    {t(`pool.kind.${r.kind}`)}
-                    {r.expired && (
-                      <span className="badge ml-1.5 py-0 text-[10px] bg-status-danger/10 text-status-danger border-status-danger/20">
-                        {t("pool.expired")}
-                      </span>
-                    )}
-                    {r.refreshError && !r.expired && (
-                      <span
-                        className="badge ml-1.5 py-0 text-[10px] bg-status-warning/10 text-status-warning border-status-warning/20"
-                        title={r.refreshError}
-                      >
-                        {t("pool.refreshFailed")}
-                      </span>
-                    )}
-                    {r.full && (
-                      <span className="badge ml-1.5 py-0 text-[10px] bg-status-warning/10 text-status-warning border-status-warning/20">
-                        {t("pool.full")}
-                      </span>
-                    )}
-                  </td>
-                  <td className="px-5 py-2.5 text-right text-sm tabular-nums text-fg-secondary">
-                    {r.livePanes}
-                  </td>
-                  <td className="px-5 py-2.5 text-right text-sm tabular-nums text-fg-secondary">
-                    {r.quotaPercent == null ? "—" : `${Math.round(r.quotaPercent)}%`}
-                  </td>
-                  <td className="px-5 py-2.5 text-right tabular-nums">
-                    <div className="text-sm text-fg-primary">
-                      {fmtCost(r.spend5h)}
-                      <span className="ml-1.5 text-[11px] text-fg-muted">
-                        {t("pool.tokens", { tokens: fmt(r.tokens5h) })}
-                      </span>
-                    </div>
-                    <div className="text-[11px] text-fg-muted">
-                      {t("pool.spend7d", { cost: fmtCost(r.spend7d), tokens: fmt(r.tokens7d) })}
-                    </div>
-                  </td>
-                  {isAdmin && (
-                    <td className="px-5 py-2 text-right whitespace-nowrap">
-                      <button
-                        type="button"
-                        onClick={() => setEditing(r)}
-                        title={t("pool.edit", { name: r.name })}
-                        aria-label={t("pool.edit", { name: r.name })}
-                        className="btn-icon"
-                      >
-                        <Pencil className="h-4 w-4" />
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => setRemoving(r)}
-                        title={t("pool.remove", { name: r.name })}
-                        aria-label={t("pool.remove", { name: r.name })}
-                        className="btn-icon"
-                      >
-                        <Trash2 className="h-4 w-4" />
-                      </button>
-                    </td>
-                  )}
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      )}
+      <div role="tabpanel" id="pool-panel" aria-labelledby={`pool-tab-${current.id}`}>
+        {isPoolTool(current.id) ? (
+          <PoolPanel
+            tool={current.id}
+            label={current.label}
+            pool={pool}
+            isAdmin={isAdmin}
+            installed={current.id === "claude" || !!aiTools.byId(current.id)?.installed}
+            onAdd={(profile) => setAdding({ tool: current.id as PoolTool, profile })}
+            onEdit={setEditing}
+            onRemove={setRemoving}
+          />
+        ) : current.id === "omp" ? (
+          <OmpPanel state={omp} isAdmin={isAdmin} onChange={setOmp} />
+        ) : (
+          <NoPoolPanel id={current.id} label={current.label} />
+        )}
+      </div>
       {adding && (
         <AddAccountDialog
-          onClose={() => setAdding(false)}
+          tool={adding.tool}
+          label={tabs.find((x) => x.id === adding.tool)?.label ?? adding.tool}
+          preset={adding.profile ? { tool: adding.tool, profile: adding.profile } : null}
+          onClose={closeAdd}
           onDone={(name) => {
             toast.success(t("pool.done.added", { name }));
-            setAdding(false);
+            closeAdd();
             void load();
           }}
         />
@@ -278,6 +351,398 @@ export function AccountPoolCard({ isAdmin }: { isAdmin: boolean }) {
   );
 }
 
+/** One pool tool's tab: what its pool does, its accounts as cards, the saved profiles to share, and Add. */
+function PoolPanel({
+  tool,
+  label,
+  pool,
+  isAdmin,
+  installed,
+  onAdd,
+  onEdit,
+  onRemove,
+}: {
+  tool: PoolTool;
+  label: string;
+  pool: AccountPool | null;
+  isAdmin: boolean;
+  installed: boolean;
+  /** Add an account; `profile` = share that saved profile into the pool. */
+  onAdd: (profile?: string) => void;
+  onEdit: (r: Row) => void;
+  onRemove: (r: Row) => void;
+}) {
+  const { t } = useTranslation("users");
+  const rows = pool ? rowsOf(pool, tool) : [];
+  const grouped = (pool?.groups ?? []).length > 0;
+  const addButton = isAdmin && (
+    <button type="button" onClick={() => onAdd()} className="btn-primary">
+      <Plus className="w-4 h-4" /> {t("pool.addFor", { tool: label })}
+    </button>
+  );
+
+  return (
+    <>
+      <div className="flex flex-wrap items-start gap-3 px-5 py-3">
+        <p className="flex-1 min-w-[16rem] text-xs text-fg-secondary leading-relaxed">
+          {t(`pool.about.${tool}`)}
+          {!installed && (
+            <span className="ml-1 text-status-warning">
+              {t("pool.notInstalled", { tool: label })}
+            </span>
+          )}
+        </p>
+        {rows.length > 0 && addButton}
+      </div>
+      {pool && rows.length === 0 && (
+        <div className="flex flex-col items-center gap-3 px-5 pb-6 pt-2 text-center">
+          <p className="max-w-md text-sm text-fg-muted">{t("pool.emptyFor", { tool: label })}</p>
+          {addButton}
+        </div>
+      )}
+      {rows.length > 0 && (
+        <div className="grid gap-3 px-5 pb-4 sm:grid-cols-2 xl:grid-cols-3">
+          {rows.map((r) => (
+            <AccountCard
+              key={r.name}
+              row={r}
+              pool={pool!}
+              grouped={grouped}
+              isAdmin={isAdmin}
+              onEdit={() => onEdit(r)}
+              onRemove={() => onRemove(r)}
+            />
+          ))}
+        </div>
+      )}
+      {isAdmin && SOURCES[tool].includes("profile") && (
+        <SavedProfiles tool={tool} pool={pool} onShare={(name) => onAdd(name)} />
+      )}
+    </>
+  );
+}
+
+/** One pool account: who it is, how loaded, which groups and users run on it. */
+function AccountCard({
+  row: r,
+  pool,
+  grouped,
+  isAdmin,
+  onEdit,
+  onRemove,
+}: {
+  row: Row;
+  pool: AccountPool;
+  grouped: boolean;
+  isAdmin: boolean;
+  onEdit: () => void;
+  onRemove: () => void;
+}) {
+  const { t } = useTranslation("users");
+  const metered = METERED.has(r.tool);
+  const users = pinsOf(pool, r.tool)
+    .filter((p) => p.account === r.name)
+    .map((p) => p.username);
+  const inGroups = groupsOf(pool, r.tool, r.name);
+  return (
+    <div
+      className={`flex flex-col gap-2 rounded-lg border bg-surface-2 p-3 ${
+        r.expired ? "border-status-danger/30 opacity-70" : "border-border"
+      }`}
+      data-testid="pool-account"
+    >
+      <div className="flex items-start gap-2">
+        <div className="flex-1 min-w-0">
+          <div className="truncate text-sm font-medium text-fg-primary">{r.name}</div>
+          {r.email && <div className="truncate text-[11px] text-fg-secondary">{r.email}</div>}
+        </div>
+        <span className="badge shrink-0 py-0 text-[10px]">{t(`pool.kindShort.${r.kind}`)}</span>
+        {isAdmin && (
+          <div className="-mr-1 -mt-1 flex shrink-0">
+            <button
+              type="button"
+              onClick={onEdit}
+              title={t("pool.edit", { name: r.name })}
+              aria-label={t("pool.edit", { name: r.name })}
+              className="btn-icon"
+            >
+              <Pencil className="h-4 w-4" />
+            </button>
+            <button
+              type="button"
+              onClick={onRemove}
+              title={t("pool.remove", { name: r.name })}
+              aria-label={t("pool.remove", { name: r.name })}
+              className="btn-icon"
+            >
+              <Trash2 className="h-4 w-4" />
+            </button>
+          </div>
+        )}
+      </div>
+      {(r.expired || r.refreshError || r.full) && (
+        <div className="flex flex-wrap gap-1">
+          {r.expired && (
+            <span className="badge py-0 text-[10px] bg-status-danger/10 text-status-danger border-status-danger/20">
+              {t("pool.expired")}
+            </span>
+          )}
+          {r.refreshError && !r.expired && (
+            <span
+              className="badge py-0 text-[10px] bg-status-warning/10 text-status-warning border-status-warning/20"
+              title={r.refreshError}
+            >
+              {t("pool.refreshFailed")}
+            </span>
+          )}
+          {r.full && (
+            <span className="badge py-0 text-[10px] bg-status-warning/10 text-status-warning border-status-warning/20">
+              {t("pool.full")}
+            </span>
+          )}
+        </div>
+      )}
+      <div className="flex items-center gap-3 text-xs text-fg-secondary">
+        <span className="inline-flex items-center gap-1">
+          <span
+            className={`h-1.5 w-1.5 rounded-full ${r.livePanes > 0 ? "bg-status-success" : "bg-fg-muted/40"}`}
+            aria-hidden
+          />
+          {t("pool.liveCount", { count: r.livePanes })}
+        </span>
+      </div>
+      {metered && (
+        <div className="space-y-1.5" data-testid="pool-quota">
+          {r.windows.map((w) => (
+            <QuotaBar key={w.key} window={w} />
+          ))}
+        </div>
+      )}
+      {metered && (
+        <div className="text-[11px] tabular-nums text-fg-muted">
+          <div>
+            {t("pool.spend")}: <span className="text-fg-primary">{fmtCost(r.spend5h)}</span> ·{" "}
+            {t("pool.tokens", { tokens: fmt(r.tokens5h) })}
+          </div>
+          <div>{t("pool.spend7d", { cost: fmtCost(r.spend7d), tokens: fmt(r.tokens7d) })}</div>
+        </div>
+      )}
+      {grouped && (
+        <div className="flex flex-wrap items-center gap-1 text-[11px]">
+          <Users className="h-3 w-3 text-fg-muted" aria-hidden />
+          {inGroups.length === 0 ? (
+            <span className="text-fg-muted">{t("pool.groups.shared")}</span>
+          ) : (
+            inGroups.map((g) => (
+              <span key={g.id} className="badge py-0 text-[10px]">
+                {g.name}
+              </span>
+            ))
+          )}
+        </div>
+      )}
+      {users.length > 0 && (
+        <div className="inline-flex items-center gap-1 text-[11px] text-fg-secondary">
+          <UserRound className="h-3 w-3" aria-hidden />
+          {t("pool.pinned", { users: users.join(", ") })}
+        </div>
+      )}
+      <div className="mt-auto text-[11px] text-fg-muted">
+        {t("pool.added", { at: formatDateTime(r.addedAt) })}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * One window of an account's quota, shown as what is LEFT (100% = untouched,
+ * 0% = used up), with when it resets.
+ */
+function QuotaBar({ window: w }: { window: QuotaWindow }) {
+  const { t } = useTranslation("users");
+  const left = w.used == null ? null : Math.max(0, Math.min(100, 100 - Math.round(w.used)));
+  const resets = untilText(w.resetsAt);
+  return (
+    <div className="text-[11px]">
+      <div className="flex items-center gap-1.5">
+        <span className="w-14 shrink-0 text-fg-muted">{t(`pool.window.${w.key}`)}</span>
+        <span className="h-1.5 flex-1 overflow-hidden rounded-full bg-surface-4">
+          <span
+            className={`block h-full ${
+              left == null
+                ? ""
+                : left === 0
+                  ? "bg-status-danger"
+                  : left <= 10
+                    ? "bg-status-warning"
+                    : "bg-accent-solid"
+            }`}
+            style={{ width: `${left ?? 0}%` }}
+          />
+        </span>
+        <span className="w-9 shrink-0 text-right tabular-nums text-fg-secondary">
+          {left == null ? "—" : `${left}%`}
+        </span>
+      </div>
+      {resets && (
+        <div
+          className="pl-[3.875rem] text-[10px] text-fg-muted"
+          title={formatDateTime(w.resetsAt!)}
+        >
+          {t("pool.resetsIn", { time: resets, at: formatDateTime(w.resetsAt!) })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * The tool's saved login profiles (Settings → AI tools → Profiles) as cards:
+ * "Share to pool" moves one in (`POST /api/accounts` with `profile`) — it then
+ * leaves the switcher, since a login's refresh token may have one holder.
+ */
+function SavedProfiles({
+  tool,
+  pool,
+  onShare,
+}: {
+  tool: PoolTool;
+  /** Re-read whenever the pool changes: a shared profile is gone from the list. */
+  pool: AccountPool | null;
+  onShare: (name: string) => void;
+}) {
+  const { t } = useTranslation("users");
+  const [profiles, setProfiles] = useState<PoolProfile[] | null>(null);
+  useEffect(() => {
+    api.accountPool
+      .profiles(tool)
+      .then((r) => setProfiles(r.profiles))
+      .catch(() => setProfiles([]));
+  }, [tool, pool]);
+  return (
+    <div className="border-t border-border px-5 py-4" data-testid="pool-profiles">
+      <div className="flex flex-wrap items-center gap-2">
+        <h3 className="flex-1 text-xs font-semibold uppercase tracking-wider text-fg-muted">
+          {t("pool.savedProfiles.title")}
+        </h3>
+        <Link to="/settings/agents#tool-profiles" className="text-xs text-accent hover:underline">
+          {t("pool.profilesLink")}
+        </Link>
+      </div>
+      {profiles !== null && profiles.length === 0 && (
+        <p className="mt-2 text-xs text-fg-muted">{t("pool.savedProfiles.empty")}</p>
+      )}
+      {profiles && profiles.length > 0 && (
+        <div className="mt-2 grid gap-2 sm:grid-cols-2 xl:grid-cols-3">
+          {profiles.map((p) => (
+            <div
+              key={p.name}
+              className="flex items-center gap-2 rounded-lg border border-dashed border-border px-3 py-2"
+            >
+              <div className="flex-1 min-w-0">
+                <div className="truncate text-sm text-fg-primary">{p.label}</div>
+                <div className="truncate text-[11px] text-fg-muted">
+                  {[p.email, p.subscriptionType].filter(Boolean).join(" · ")}
+                  {p.active ? ` · ${t("pool.savedProfiles.activeHere")}` : ""}
+                </div>
+              </div>
+              <button
+                type="button"
+                onClick={() => onShare(p.name)}
+                className="btn-ghost shrink-0 text-xs"
+                aria-label={t("pool.savedProfiles.shareNamed", { name: p.label })}
+              >
+                <Share2 className="h-3.5 w-3.5" /> {t("pool.savedProfiles.share")}
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Oh My Pi's tab: no pool, but the host's own omp login can be shared with
+ * every member's pane through omp's gateway (server/lib/omp-share.js) — the
+ * same admin switch as Settings → AI tools. Only with per-user accounts (S3).
+ */
+function OmpPanel({
+  state,
+  isAdmin,
+  onChange,
+}: {
+  state: OmpSharingState | null;
+  isAdmin: boolean;
+  onChange: (s: OmpSharingState) => void;
+}) {
+  const { t } = useTranslation("users");
+  const ts = useTranslation("settings").t;
+  const [busy, setBusy] = useState(false);
+  if (!state?.available) {
+    return (
+      <div className="flex items-start gap-3 px-5 py-6">
+        <Share2 className="mt-0.5 h-4 w-4 shrink-0 text-fg-muted" aria-hidden />
+        <p className="text-sm text-fg-muted leading-relaxed">{t("pool.omp.unavailable")}</p>
+      </div>
+    );
+  }
+  const error = state.broker.error || state.gateway.error;
+  const status = !state.enabled
+    ? t("pool.omp.off")
+    : !state.installed
+      ? ts("ompSharing.notInstalled")
+      : state.broker.running && state.gateway.running
+        ? ts("ompSharing.running")
+        : error
+          ? ts("ompSharing.failed", { error })
+          : ts("ompSharing.starting");
+  return (
+    <div className="px-5 py-3 space-y-2">
+      <p className="text-xs text-fg-secondary leading-relaxed">{t("pool.omp.about")}</p>
+      {isAdmin ? (
+        <SettingsSwitchRow
+          label={ts("ompSharing.switch")}
+          description={ts("ompSharing.hint")}
+          checked={state.enabled}
+          disabled={busy}
+          onChange={async (on) => {
+            setBusy(true);
+            try {
+              onChange(await api.aiTools.setOmpSharing(on));
+            } catch (err) {
+              toast.error(err);
+            } finally {
+              setBusy(false);
+            }
+          }}
+        />
+      ) : null}
+      <p data-testid="omp-pool-status" className="pb-2 text-xs text-fg-muted">
+        {status}
+      </p>
+    </div>
+  );
+}
+
+/** Any other tool: no pool — say so, and why for the ones we know. */
+function NoPoolPanel({ id, label }: { id: string; label: string }) {
+  const { t } = useTranslation("users");
+  return (
+    <div className="flex items-start gap-3 px-5 py-6">
+      <UserRound className="mt-0.5 h-4 w-4 shrink-0 text-fg-muted" aria-hidden />
+      <div className="space-y-1">
+        <p className="text-sm text-fg-secondary">{t("pool.none.title", { tool: label })}</p>
+        <p className="text-xs text-fg-muted leading-relaxed">
+          {t(`pool.none.reason.${id}`, {
+            defaultValue: t("pool.none.reason.default", { tool: label }),
+          })}
+        </p>
+      </div>
+    </div>
+  );
+}
+
 /**
  * One account's Edit: tick the users whose sessions run on it. A user already
  * on another account of the tool moves here when ticked; unticking one sends
@@ -412,19 +877,33 @@ function EditAccountDialog({
 }
 
 type ClaudeSource = "profile" | "credentials" | "token";
+/** What each tool's pool account can come from (server/routes/accounts.js). */
+const SOURCES: Record<PoolTool, ClaudeSource[]> = {
+  claude: ["profile", "credentials", "token"],
+  codex: ["profile", "token"],
+  cursor: ["token"],
+};
 
 function AddAccountDialog({
+  tool,
+  label,
+  preset,
   onClose,
   onDone,
 }: {
+  /** The open tab's tool: the account is added to its pool. */
+  tool: PoolTool;
+  label: string;
+  /** A saved profile to move in, from its "Move to pool" link. */
+  preset?: { tool: PoolTool; profile: string } | null;
   onClose: () => void;
   onDone: (name: string) => void;
 }) {
   const { t } = useTranslation("users");
-  const [tool, setTool] = useState<PoolTool>("claude");
-  const [source, setSource] = useState<ClaudeSource>("profile");
+  const sources = SOURCES[tool];
+  const [source, setSource] = useState<ClaudeSource>(sources[0] ?? "token");
   const [profiles, setProfiles] = useState<PoolProfile[] | null>(null);
-  const [profile, setProfile] = useState("");
+  const [profile, setProfile] = useState(preset?.tool === tool ? preset.profile : "");
   const [name, setName] = useState("");
   const [secret, setSecret] = useState("");
   const [current, setCurrent] = useState("");
@@ -432,13 +911,14 @@ function AddAccountDialog({
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
+    if (!sources.includes("profile")) return;
     api.accountPool
-      .profiles()
+      .profiles(tool)
       .then((r) => setProfiles(r.profiles))
       .catch(() => setProfiles([]));
-  }, []);
+  }, [tool, sources]);
 
-  const fromProfile = tool === "claude" && source === "profile";
+  const fromProfile = source === "profile";
   // A profile already names itself: its name is the default.
   const ready =
     current.length > 0 &&
@@ -449,13 +929,11 @@ function AddAccountDialog({
     setBusy(true);
     setError(null);
     const body: PoolAccountInput =
-      tool === "codex"
-        ? { tool, name: name.trim(), token: secret.trim() }
-        : source === "profile"
-          ? { tool, name: name.trim() || profile, profile }
-          : source === "credentials"
-            ? { tool, name: name.trim(), credentials: secret.trim() }
-            : { tool, name: name.trim(), token: secret.trim() };
+      source === "profile"
+        ? { tool, name: name.trim() || profile, profile }
+        : tool === "claude" && source === "credentials"
+          ? { tool, name: name.trim(), credentials: secret.trim() }
+          : { tool, name: name.trim(), token: secret.trim() };
     try {
       const r = await api.accountPool.add(body, current);
       onDone(r.account.name);
@@ -472,12 +950,13 @@ function AddAccountDialog({
       void submit();
     }
   };
-  const secretKind = tool === "codex" ? "codex" : source;
+  // Codex's and Cursor's one non-profile source is their own kind of key.
+  const secretKind = tool === "claude" ? source : tool;
 
   return (
     <ConfirmModal
       open
-      title={t("pool.add")}
+      title={t("pool.addFor", { tool: label })}
       confirmLabel={t("pool.add")}
       cancelLabel={t("common:cancel")}
       destructive={false}
@@ -487,28 +966,22 @@ function AddAccountDialog({
       onCancel={onClose}
     >
       <div className="mt-3 space-y-3" onKeyDown={onKeyDown}>
-        <Field label={t("pool.tool")}>
-          <select
-            className="input w-full text-sm"
-            value={tool}
-            onChange={(e) => setTool(e.target.value as PoolTool)}
-            aria-label={t("pool.tool")}
+        {sources.length > 1 && (
+          <Field
+            label={t("pool.source")}
+            hint={t(`pool.sourceHint.${tool !== "claude" && source === "token" ? tool : source}`)}
           >
-            <option value="claude">Claude Code</option>
-            <option value="codex">Codex</option>
-          </select>
-        </Field>
-        {tool === "claude" && (
-          <Field label={t("pool.source")} hint={t(`pool.sourceHint.${source}`)}>
             <select
               className="input w-full text-sm"
               value={source}
               onChange={(e) => setSource(e.target.value as ClaudeSource)}
               aria-label={t("pool.source")}
             >
-              {(["profile", "credentials", "token"] as const).map((s) => (
+              {sources.map((s) => (
                 <option key={s} value={s}>
-                  {t(`pool.sources.${s}`)}
+                  {tool !== "claude" && s === "token"
+                    ? t(`pool.secret.${tool}`)
+                    : t(`pool.sources.${s}`)}
                 </option>
               ))}
             </select>
@@ -553,7 +1026,7 @@ function AddAccountDialog({
         </Field>
         {!fromProfile && (
           <Field label={t(`pool.secret.${secretKind}`)} hint={t(`pool.secretHint.${secretKind}`)}>
-            {secretKind === "token" ? (
+            {secretKind === "token" || secretKind === "cursor" ? (
               <input
                 type="password"
                 className="input w-full font-mono text-sm"

client/src/components/users/PasswordRules.tsx

@@ -0,0 +1,39 @@
+/**
+ * @file PasswordRules.tsx
+ * @description The checklist under a "new password" field the account picks
+ * for itself (Settings → Account, the first-login password change, an admin's
+ * own password on the Users page): each rule of `lib/passwordRules.ts`, ticked
+ * as the password typed passes it.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useTranslation } from "react-i18next";
+import { Check, Circle } from "lucide-react";
+import { PASSWORD_MIN_LENGTH, PASSWORD_RULES, passwordProblems } from "../../lib/passwordRules";
+
+export function PasswordRules({ password, username }: { password: string; username?: string }) {
+  const { t } = useTranslation("users");
+  const failed = new Set(passwordProblems(password, username));
+  return (
+    <ul className="grid gap-x-4 gap-y-1 text-xs sm:grid-cols-2" data-testid="password-rules">
+      {PASSWORD_RULES.map((rule) => {
+        const ok = password.length > 0 && !failed.has(rule);
+        return (
+          <li
+            key={rule}
+            className={`flex items-center gap-1.5 ${ok ? "text-status-success" : "text-fg-muted"}`}
+            data-rule={rule}
+            data-ok={ok}
+          >
+            {ok ? (
+              <Check className="h-3.5 w-3.5 flex-shrink-0" />
+            ) : (
+              <Circle className="h-3 w-3 flex-shrink-0" />
+            )}
+            {t(`passwordRules.${rule}`, { min: PASSWORD_MIN_LENGTH })}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

client/src/components/users/PoolGroups.tsx

@@ -0,0 +1,435 @@
+/**
+ * @file PoolGroups.tsx
+ * @description The account pool's GROUPS (`/api/accounts/groups`,
+ * server/lib/pool-groups.js), shown as cards above the tool tabs: each team's
+ * members run only on the accounts its group lists, of every tool, while a
+ * user in no group runs on the shared pool (the accounts no group lists). A
+ * card shows the group's members and its accounts per tool; an admin creates,
+ * edits (name, members — one group per user, so ticking one moves them here —
+ * and accounts) or deletes one, each time with their own password again.
+ * `groupsOf` tells an account card which groups use it.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import type { TFunction } from "i18next";
+import { Pencil, Plus, Trash2, Users } from "lucide-react";
+import {
+  api,
+  type AccountPool,
+  type PoolGroup,
+  type PoolTool,
+  type ServerUserUsage,
+} from "../../lib/api";
+import { isSubmitEnter } from "../../lib/keys";
+import { toast } from "../../lib/toast";
+import { ConfirmModal } from "../ConfirmModal";
+import { Checkbox } from "../Checkbox";
+import { AiToolIcon } from "../AiToolIcon";
+
+/** Pool tools with their tab labels, in tab order. */
+export const POOL_TOOL_LABELS: { id: PoolTool; label: string }[] = [
+  { id: "claude", label: "Claude Code" },
+  { id: "codex", label: "Codex" },
+  { id: "cursor", label: "Cursor CLI" },
+];
+
+/** Account names of `tool` in the pool. */
+function accountNames(pool: AccountPool, tool: PoolTool): string[] {
+  const list = tool === "claude" ? pool.accounts : tool === "codex" ? pool.codex : pool.cursor;
+  return (list ?? []).map((a) => a.name);
+}
+
+/** The groups that list account `name` of `tool`. */
+export function groupsOf(pool: AccountPool, tool: PoolTool, name: string): PoolGroup[] {
+  return (pool.groups ?? []).filter((g) => (g.accounts[tool] ?? []).includes(name));
+}
+
+function errorText(t: TFunction<"users">, e: unknown): string {
+  const err = e as Error & { code?: string };
+  return err.code && t(`pool.errors.${err.code}`, { defaultValue: "" })
+    ? t(`pool.errors.${err.code}`)
+    : err.message;
+}
+
+export function PoolGroups({
+  pool,
+  isAdmin,
+  onChanged,
+}: {
+  pool: AccountPool;
+  isAdmin: boolean;
+  onChanged: () => void;
+}) {
+  const { t } = useTranslation("users");
+  const groups = pool.groups ?? [];
+  const [editing, setEditing] = useState<PoolGroup | "new" | null>(null);
+  const [deleting, setDeleting] = useState<PoolGroup | null>(null);
+
+  return (
+    <div className="px-5 py-4 border-b border-border" data-testid="pool-groups">
+      <div className="flex flex-wrap items-center gap-2">
+        <Users className="h-4 w-4 text-fg-muted" aria-hidden />
+        <div className="flex-1 min-w-[14rem]">
+          <h3 className="text-sm font-semibold text-fg-primary">{t("pool.groups.title")}</h3>
+          <p className="text-xs text-fg-muted">{t("pool.groups.description")}</p>
+        </div>
+        {isAdmin && (
+          <button type="button" onClick={() => setEditing("new")} className="btn-ghost text-xs">
+            <Plus className="h-4 w-4" /> {t("pool.groups.new")}
+          </button>
+        )}
+      </div>
+      {groups.length === 0 ? (
+        <p className="mt-3 text-xs text-fg-muted">{t("pool.groups.empty")}</p>
+      ) : (
+        <div className="mt-3 grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+          {groups.map((g) => (
+            <div
+              key={g.id}
+              className="rounded-lg border border-border bg-surface-2 p-3"
+              data-testid="pool-group"
+            >
+              <div className="flex items-start gap-2">
+                <div className="flex-1 min-w-0">
+                  <div className="truncate text-sm font-medium text-fg-primary">{g.name}</div>
+                  <div className="text-[11px] text-fg-muted">
+                    {t("pool.groups.members", { count: g.users.length })}
+                  </div>
+                </div>
+                {isAdmin && (
+                  <>
+                    <button
+                      type="button"
+                      onClick={() => setEditing(g)}
+                      title={t("pool.groups.edit", { name: g.name })}
+                      aria-label={t("pool.groups.edit", { name: g.name })}
+                      className="btn-icon"
+                    >
+                      <Pencil className="h-4 w-4" />
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setDeleting(g)}
+                      title={t("pool.groups.delete", { name: g.name })}
+                      aria-label={t("pool.groups.delete", { name: g.name })}
+                      className="btn-icon"
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </button>
+                  </>
+                )}
+              </div>
+              {g.users.length > 0 && (
+                <div className="mt-2 flex flex-wrap gap-1">
+                  {g.users.map((u) => (
+                    <span key={u.userId} className="badge py-0 text-[11px]">
+                      {u.username}
+                    </span>
+                  ))}
+                </div>
+              )}
+              <div className="mt-2 space-y-1">
+                {POOL_TOOL_LABELS.map(({ id, label }) => {
+                  const names = g.accounts[id] ?? [];
+                  return (
+                    <div key={id} className="flex items-center gap-1.5 text-[11px]">
+                      <AiToolIcon tool={{ id, label }} className="h-3.5 w-3.5" />
+                      <span className="text-fg-secondary">{label}:</span>
+                      <span className={names.length ? "text-fg-primary" : "text-fg-muted"}>
+                        {names.length ? names.join(", ") : t("pool.groups.noAccounts")}
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+      {editing && (
+        <GroupDialog
+          pool={pool}
+          group={editing === "new" ? null : editing}
+          onClose={() => setEditing(null)}
+          onDone={(name) => {
+            toast.success(t("pool.groups.saved", { name }));
+            setEditing(null);
+            onChanged();
+          }}
+        />
+      )}
+      {deleting && (
+        <DeleteGroupDialog
+          group={deleting}
+          onClose={() => setDeleting(null)}
+          onDone={() => {
+            toast.success(t("pool.groups.deleted", { name: deleting.name }));
+            setDeleting(null);
+            onChanged();
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+/** Create a group, or edit one: its name, its members and its accounts. */
+function GroupDialog({
+  pool,
+  group,
+  onClose,
+  onDone,
+}: {
+  pool: AccountPool;
+  group: PoolGroup | null;
+  onClose: () => void;
+  onDone: (name: string) => void;
+}) {
+  const { t } = useTranslation("users");
+  const [name, setName] = useState(group?.name ?? "");
+  const [users, setUsers] = useState<ServerUserUsage[] | null>(null);
+  const [members, setMembers] = useState<Set<number>>(
+    () => new Set(group?.users.map((u) => u.userId) ?? [])
+  );
+  const [accounts, setAccounts] = useState<Record<PoolTool, Set<string>>>(() => ({
+    claude: new Set(group?.accounts.claude ?? []),
+    codex: new Set(group?.accounts.codex ?? []),
+    cursor: new Set(group?.accounts.cursor ?? []),
+  }));
+  const [current, setCurrent] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    api.users
+      .list()
+      .then((r) => setUsers(r.users))
+      .catch(() => setUsers([]));
+  }, []);
+
+  const groupOfUser = (userId: number) =>
+    (pool.groups ?? []).find((g) => g.id !== group?.id && g.users.some((u) => u.userId === userId));
+  const toggle = <T,>(set: Set<T>, v: T, on: boolean) => {
+    const next = new Set(set);
+    if (on) next.add(v);
+    else next.delete(v);
+    return next;
+  };
+  const ready = name.trim().length > 0 && current.length > 0;
+
+  const submit = async () => {
+    if (!ready || busy) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const id = group
+        ? group.id
+        : (await api.accountPool.createGroup(name.trim(), current)).group.id;
+      await api.accountPool.updateGroup(
+        id,
+        {
+          ...(group ? { name: name.trim() } : {}),
+          userIds: [...members],
+          accounts: Object.fromEntries(
+            POOL_TOOL_LABELS.map(({ id: tool }) => [tool, [...accounts[tool]]])
+          ),
+        },
+        current
+      );
+      onDone(name.trim());
+    } catch (e) {
+      setError(errorText(t, e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <ConfirmModal
+      open
+      title={group ? t("pool.groups.edit", { name: group.name }) : t("pool.groups.new")}
+      message={t("pool.groups.hint")}
+      confirmLabel={t("pool.save")}
+      cancelLabel={t("common:cancel")}
+      destructive={false}
+      busy={busy}
+      disabled={!ready}
+      onConfirm={() => void submit()}
+      onCancel={onClose}
+    >
+      <div
+        className="mt-3 space-y-3"
+        onKeyDown={(e) => {
+          if ((e.target as HTMLElement).tagName === "INPUT" && isSubmitEnter(e)) {
+            e.preventDefault();
+            void submit();
+          }
+        }}
+      >
+        <label className="block">
+          <span className="text-xs font-medium text-fg-secondary">{t("pool.groups.name")}</span>
+          <input
+            className="input mt-1 w-full text-sm"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            autoComplete="off"
+            aria-label={t("pool.groups.name")}
+          />
+        </label>
+        <div>
+          <span className="text-xs font-medium text-fg-secondary">
+            {t("pool.groups.memberList")}
+          </span>
+          <div className="mt-1 max-h-40 overflow-y-auto rounded-md border border-border divide-y divide-border">
+            {users === null && (
+              <p className="px-3 py-2 text-xs text-fg-muted">{t("pool.loadingUsers")}</p>
+            )}
+            {users?.length === 0 && (
+              <p className="px-3 py-2 text-xs text-fg-muted">{t("pool.noUsers")}</p>
+            )}
+            {users?.map((u) => {
+              const other = groupOfUser(u.id);
+              return (
+                <div key={u.id} className="px-3 py-1.5">
+                  <Checkbox
+                    checked={members.has(u.id)}
+                    onChange={(on) => setMembers((s) => toggle(s, u.id, on))}
+                    label={
+                      <span>
+                        {u.username}
+                        {other && (
+                          <span className="ml-1.5 text-[11px] text-fg-muted">
+                            {t("pool.groups.inGroup", { group: other.name })}
+                          </span>
+                        )}
+                      </span>
+                    }
+                    labelClassName="text-sm text-fg-primary"
+                  />
+                </div>
+              );
+            })}
+          </div>
+        </div>
+        <div>
+          <span className="text-xs font-medium text-fg-secondary">
+            {t("pool.groups.accountList")}
+          </span>
+          <div className="mt-1 max-h-48 overflow-y-auto rounded-md border border-border divide-y divide-border">
+            {POOL_TOOL_LABELS.map(({ id: tool, label }) => {
+              const names = accountNames(pool, tool);
+              return (
+                <div key={tool} className="px-3 py-2">
+                  <div className="flex items-center gap-1.5 text-[11px] font-medium text-fg-secondary">
+                    <AiToolIcon tool={{ id: tool, label }} className="h-3.5 w-3.5" />
+                    {label}
+                  </div>
+                  {names.length === 0 ? (
+                    <p className="mt-1 text-[11px] text-fg-muted">{t("pool.groups.noneInPool")}</p>
+                  ) : (
+                    <div className="mt-1 flex flex-wrap gap-x-4 gap-y-1">
+                      {names.map((n) => (
+                        <Checkbox
+                          key={n}
+                          checked={accounts[tool].has(n)}
+                          onChange={(on) =>
+                            setAccounts((a) => ({ ...a, [tool]: toggle(a[tool], n, on) }))
+                          }
+                          label={n}
+                          labelClassName="text-sm text-fg-primary"
+                        />
+                      ))}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+        <label className="block">
+          <span className="text-xs font-medium text-fg-secondary">{t("yourPassword")}</span>
+          <input
+            type="password"
+            className="input mt-1 w-full text-sm"
+            value={current}
+            onChange={(e) => setCurrent(e.target.value)}
+            autoComplete="current-password"
+            aria-label={t("yourPassword")}
+          />
+          <span className="mt-0.5 block text-[11px] text-fg-muted">{t("yourPasswordHint")}</span>
+        </label>
+        {error && (
+          <p role="alert" className="text-xs text-status-danger">
+            {error}
+          </p>
+        )}
+      </div>
+    </ConfirmModal>
+  );
+}
+
+function DeleteGroupDialog({
+  group,
+  onClose,
+  onDone,
+}: {
+  group: PoolGroup;
+  onClose: () => void;
+  onDone: () => void;
+}) {
+  const { t } = useTranslation("users");
+  const [current, setCurrent] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const submit = async () => {
+    if (!current || busy) return;
+    setBusy(true);
+    setError(null);
+    try {
+      await api.accountPool.deleteGroup(group.id, current);
+      onDone();
+    } catch (e) {
+      setError(errorText(t, e));
+    } finally {
+      setBusy(false);
+    }
+  };
+  return (
+    <ConfirmModal
+      open
+      title={t("pool.groups.delete", { name: group.name })}
+      message={t("pool.groups.deleteHint")}
+      confirmLabel={t("pool.removeButton")}
+      cancelLabel={t("common:cancel")}
+      busy={busy}
+      disabled={!current}
+      onConfirm={() => void submit()}
+      onCancel={onClose}
+    >
+      <label className="mt-3 block">
+        <span className="text-xs font-medium text-fg-secondary">{t("yourPassword")}</span>
+        <input
+          type="password"
+          className="input mt-1 w-full text-sm"
+          value={current}
+          onChange={(e) => setCurrent(e.target.value)}
+          onKeyDown={(e) => {
+            if (isSubmitEnter(e)) {
+              e.preventDefault();
+              void submit();
+            }
+          }}
+          autoComplete="current-password"
+          aria-label={t("yourPassword")}
+        />
+      </label>
+      {error && (
+        <p role="alert" className="mt-2 text-xs text-status-danger">
+          {error}
+        </p>
+      )}
+    </ConfirmModal>
+  );
+}

client/src/components/users/UserEditDialog.tsx

@@ -2,7 +2,9 @@
  * @file UserEditDialog.tsx
  * @description The Users page's ONE account editor (admin only): profile
  * (display name, email), access (role, active/disabled — neither for your own
- * account), a new password (typed or generated, copyable), the workspaces the
+ * account), a new password (typed or generated, copyable — someone else's
+ * may be anything and makes them choose their own at next sign-in; your own
+ * must pass every rule of `lib/passwordRules.ts`), the workspaces the
  * account owns (remove, add from every workspace), and "sign out everywhere".
  * Every change is staged and sent as ONE `PATCH /api/users/:id` carrying only
  * what changed, confirmed with the admin's OWN password (`currentPassword`) —
@@ -20,6 +22,8 @@ import type { Lane } from "../../lib/types";
 import { fmtCost, formatDateTime } from "../../lib/format";
 import { copyText } from "../../lib/clipboard";
 import { isSubmitEnter } from "../../lib/keys";
+import { passwordProblems } from "../../lib/passwordRules";
+import { PasswordRules } from "./PasswordRules";
 import { useDialog } from "../../hooks/useDialog";
 import { Switch } from "../Switch";
 import { Checkbox } from "../Checkbox";
@@ -34,11 +38,15 @@ export const ROLE_BADGE: Record<Role, string> = {
 };
 
 /** A random password of `n` characters, no look-alikes (0/O, 1/l/I). */
-export function generatePassword(n = 16): string {
+export function generatePassword(n = 16, username?: string): string {
   const chars = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz23456789-_!@#%";
   const bytes = new Uint32Array(n);
-  crypto.getRandomValues(bytes);
-  return Array.from(bytes, (b) => chars[b % chars.length]).join("");
+  // Drawn again until it passes every rule, so it also fits an own password.
+  for (;;) {
+    crypto.getRandomValues(bytes);
+    const out = Array.from(bytes, (b) => chars[b % chars.length]).join("");
+    if (passwordProblems(out, username).length === 0) return out;
+  }
 }
 
 type OwnedWorkspace = { id: number; title: string; cwd: string };
@@ -110,8 +118,11 @@ export function UserEditDialog({
   if (removed.size) patch.removeWorkspaces = [...removed];
   if (signOut) patch.signOut = true;
   const changed = Object.keys(patch).length > 0;
-  // No minimum length (server/lib/auth.js) — a blank field keeps the password.
-  const ready = changed && current.length > 0 && !busy;
+  // A blank field keeps the password. Someone else's may be anything (they
+  // choose their own at next sign-in); your own must pass every rule.
+  const weakOwn =
+    self && password.length > 0 && passwordProblems(password, user.username).length > 0;
+  const ready = changed && current.length > 0 && !weakOwn && !busy;
 
   const submit = async () => {
     if (!ready) return;
@@ -309,7 +320,10 @@ export function UserEditDialog({
           </Section>
 
           <Section title={t("edit.password")}>
-            <Field label={t("newPassword")} hint={t("edit.passwordHint")}>
+            <Field
+              label={t("newPassword")}
+              hint={self ? t("edit.ownPasswordHint") : t("edit.passwordHint")}
+            >
               <div className="flex gap-2">
                 <input
                   type={showPassword ? "text" : "password"}
@@ -343,7 +357,7 @@ export function UserEditDialog({
                   type="button"
                   className="btn-ghost whitespace-nowrap text-xs"
                   onClick={() => {
-                    setPassword(generatePassword());
+                    setPassword(generatePassword(16, user.username));
                     setShowPassword(true);
                   }}
                 >
@@ -351,6 +365,11 @@ export function UserEditDialog({
                 </button>
               </div>
             </Field>
+            {self && password.length > 0 && (
+              <div className="mt-2">
+                <PasswordRules password={password} username={user.username} />
+              </div>
+            )}
           </Section>
 
           <Section title={t("workspaces")}>

client/src/components/users/__tests__/AccountPoolCard.test.tsx

@@ -1,7 +1,9 @@
 /**
  * @file AccountPoolCard.test.tsx
- * @description The Users page's account pool card: lists the Claude and Codex
- * accounts with their live panes and quota, says what an empty pool means, an
+ * @description The Users page's account pool card: one tab per AI tool — the
+ * Claude, Codex and Cursor pools with their accounts' live panes and quota,
+ * Oh My Pi's login sharing, and a "no pool" note for any other installed
+ * tool; says what an empty pool means per tool, an
  * admin adds an account only with their own password typed (the token goes
  * in once and is not shown back) — a saved login moved in (the server's own
  * included), or a setup-token — and removes one the same way, and an analyst
@@ -13,6 +15,7 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
 import type { AccountPool } from "../../../lib/api";
 
 const accountPool = vi.hoisted(() => ({
@@ -21,15 +24,31 @@ const accountPool = vi.hoisted(() => ({
   remove: vi.fn(),
   profiles: vi.fn(),
   setUsers: vi.fn(),
+  createGroup: vi.fn(),
+  updateGroup: vi.fn(),
+  deleteGroup: vi.fn(),
 }));
 const users = vi.hoisted(() => ({ list: vi.fn() }));
+const aiTools = vi.hoisted(() => ({
+  list: vi.fn(),
+  ompSharing: vi.fn(),
+  setOmpSharing: vi.fn(),
+  iconUrl: (id: string) => `/api/ai-tools/${id}/icon`,
+}));
 vi.mock("../../../lib/api", async (importOriginal) => {
   const actual = await importOriginal<Record<string, unknown>>();
-  return { ...actual, api: { accountPool, users } };
+  return { ...actual, api: { accountPool, users, aiTools } };
 });
 
 import { AccountPoolCard } from "../AccountPoolCard";
 
+/** The card reads `?poolAdd=` and links to Settings: it needs a router. */
+const card = (isAdmin: boolean, url = "/admin") => (
+  <MemoryRouter initialEntries={[url]}>
+    <AccountPoolCard isAdmin={isAdmin} />
+  </MemoryRouter>
+);
+
 const POOL: AccountPool = {
   accounts: [
     {
@@ -45,9 +64,44 @@ const POOL: AccountPool = {
       spend7d: 12,
       tokens5h: 250_000,
       tokens7d: 3_400_000,
+      quota: {
+        fiveHour: {
+          utilization: 42,
+          resetsAt: new Date(Date.now() + 2 * 3600e3 + 630e3).toISOString(),
+        },
+        sevenDay: {
+          utilization: 15,
+          resetsAt: new Date(Date.now() + 3 * 86400e3 + 3630e3).toISOString(),
+        },
+        checkedAt: "2026-10-01T00:00:00Z",
+        error: null,
+      },
       quotaPercent: 42,
       full: false,
     },
+    {
+      name: "team-2",
+      kind: "token",
+      email: null,
+      refreshError: null,
+      addedAt: "2026-10-01T00:00:00Z",
+      expiresAt: null,
+      expired: false,
+      livePanes: 0,
+      spend5h: 0,
+      spend7d: 0,
+      tokens5h: 0,
+      tokens7d: 0,
+      // A 5-hour window that has reset since the reading is full again.
+      quota: {
+        fiveHour: { utilization: 100, resetsAt: "2020-01-01T00:00:00Z" },
+        sevenDay: null,
+        checkedAt: "2026-10-01T00:00:00Z",
+        error: null,
+      },
+      quotaPercent: null,
+      full: false,
+    },
   ],
   codex: [
     {
@@ -66,8 +120,30 @@ const POOL: AccountPool = {
   blockPercent: 90,
 };
 
+const tool = (id: string, label: string, installed = true) => ({ id, label, installed });
+const OMP = {
+  available: true,
+  enabled: false,
+  installed: true,
+  broker: { running: false },
+  gateway: { running: false },
+};
+
 beforeEach(() => {
   for (const fn of Object.values(accountPool)) fn.mockReset();
+  aiTools.list.mockResolvedValue({
+    tools: [
+      tool("claude", "Claude Code"),
+      tool("codex", "Codex"),
+      tool("cursor", "Cursor CLI"),
+      tool("omp", "Oh My Pi"),
+      tool("antigravity", "Antigravity"),
+      tool("goose", "Goose", false),
+    ],
+    default: "claude",
+  });
+  aiTools.ompSharing.mockResolvedValue(OMP);
+  aiTools.setOmpSharing.mockResolvedValue({ ...OMP, enabled: true });
   accountPool.list.mockResolvedValue(POOL);
   users.list.mockResolvedValue({
     users: [
@@ -90,28 +166,153 @@ beforeEach(() => {
 });
 
 describe("AccountPoolCard", () => {
-  it("lists every account, and explains an empty pool", async () => {
-    const { unmount } = render(<AccountPoolCard isAdmin={false} />);
+  it("shows each tool's pool on its own tab, counted, and explains an empty one", async () => {
+    const user = userEvent.setup();
+    const { unmount } = render(card(false));
     expect(await screen.findByText("team-1")).toBeInTheDocument();
-    expect(screen.getByText("cx-1")).toBeInTheDocument();
-    expect(screen.getByText("42%")).toBeInTheDocument();
-    expect(screen.getByText("250.0K tokens")).toBeInTheDocument();
-    expect(screen.getByText("$12.00 · 3.4M tokens in 7 days")).toBeInTheDocument();
+    expect(screen.queryByText("cx-1")).toBeNull();
+    const [account, second] = screen.getAllByTestId("pool-account");
+    // Every account of the pool has its card; quota is shown as what is LEFT.
+    expect(second).toHaveTextContent("team-2");
+    const quota = screen.getAllByTestId("pool-quota")[0]!;
+    expect(quota).toHaveTextContent("5 hours");
+    expect(quota).toHaveTextContent("58%");
+    expect(quota).toHaveTextContent("resets in 2h 10m");
+    expect(quota).toHaveTextContent("Week");
+    expect(quota).toHaveTextContent("85%");
+    expect(quota).toHaveTextContent("resets in 3d 1h");
+    const reset = screen.getAllByTestId("pool-quota")[1]!;
+    expect(reset).toHaveTextContent("100%");
+    expect(reset).toHaveTextContent("—");
+    expect(account).toHaveTextContent("250.0K tokens");
+    expect(account).toHaveTextContent("$12.00 · 3.4M tokens in 7 days");
+    expect(account).toHaveTextContent("2 live");
     expect(screen.getByText("team1@example.com")).toBeInTheDocument();
-    expect(screen.queryByRole("button", { name: /add account/i })).toBeNull();
+    // Without groups nothing is said about them on an account.
+    expect(screen.queryByText("Shared pool")).toBeNull();
+    expect(screen.queryByRole("button", { name: /^add/i })).toBeNull();
     expect(screen.queryByRole("button", { name: /remove/i })).toBeNull();
+    const codexTab = screen.getByRole("tab", { name: /Codex/ });
+    expect(codexTab).toHaveTextContent("1");
+    expect(screen.getByRole("tab", { name: /Claude Code/ })).toHaveTextContent("2");
+    await user.click(codexTab);
+    expect(screen.getByText("cx-1")).toBeInTheDocument();
+    expect(screen.queryByText("team-1")).toBeNull();
+    // A pool with no account still has its tab, with what that means.
+    await user.click(screen.getByRole("tab", { name: /Cursor CLI/ }));
+    expect(screen.getByText(/No Cursor CLI accounts yet/)).toBeInTheDocument();
+    // An installed tool without a pool says so; an uninstalled one gets no tab.
+    await user.click(screen.getByRole("tab", { name: /Antigravity/ }));
+    expect(screen.getByText("Antigravity has no account pool")).toBeInTheDocument();
+    expect(screen.getByText(/system keyring/)).toBeInTheDocument();
+    expect(screen.queryByRole("tab", { name: /Goose/ })).toBeNull();
     unmount();
     accountPool.list.mockResolvedValue({ accounts: [], codex: [], blockPercent: 90 });
-    render(<AccountPoolCard isAdmin />);
-    expect(await screen.findByText(/no accounts yet/i)).toBeInTheDocument();
+    render(card(true));
+    expect(await screen.findByText(/No Claude Code accounts yet/)).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Add Claude Code account" })).toBeInTheDocument();
+  });
+
+  it("adds a Cursor API key from the Cursor tab", async () => {
+    accountPool.add.mockResolvedValue({ account: { name: "cu-1" } });
+    accountPool.list.mockResolvedValue({ ...POOL, cursor: [] });
+    const user = userEvent.setup();
+    render(card(true));
+    await screen.findByText("team-1");
+    await user.click(screen.getByRole("tab", { name: /Cursor CLI/ }));
+    await user.click(screen.getByRole("button", { name: "Add Cursor CLI account" }));
+    const dialog = await screen.findByRole("dialog");
+    expect(screen.queryByLabelText("From")).toBeNull();
+    await user.type(screen.getByLabelText("Name"), "cu-1");
+    await user.type(screen.getByLabelText("Cursor API key"), "key_abc");
+    await user.type(screen.getByLabelText("Your password"), "boss-pass");
+    await user.click(
+      Array.from(dialog.querySelectorAll("button")).find((b) => b.textContent === "Add account")!
+    );
+    await waitFor(() =>
+      expect(accountPool.add).toHaveBeenCalledWith(
+        { tool: "cursor", name: "cu-1", token: "key_abc" },
+        "boss-pass"
+      )
+    );
+    expect(accountPool.profiles).not.toHaveBeenCalledWith("cursor");
+  });
+
+  it("shares a saved profile from its card", async () => {
+    accountPool.add.mockResolvedValue({ account: { name: "work" } });
+    const user = userEvent.setup();
+    render(card(true));
+    await screen.findByText("team-1");
+    await user.click(await screen.findByRole("button", { name: "Share Work to the pool" }));
+    const dialog = await screen.findByRole("dialog");
+    await waitFor(() => expect(screen.getByLabelText("Profile")).toHaveValue("work"));
+    await user.type(screen.getByLabelText("Your password"), "boss-pass");
+    await user.click(
+      Array.from(dialog.querySelectorAll("button")).find((b) => b.textContent === "Add account")!
+    );
+    await waitFor(() =>
+      expect(accountPool.add).toHaveBeenCalledWith(
+        { tool: "claude", name: "work", profile: "work" },
+        "boss-pass"
+      )
+    );
+  });
+
+  it("shows the groups as cards and saves a new one with members and accounts", async () => {
+    accountPool.list.mockResolvedValue({
+      ...POOL,
+      groups: [
+        {
+          id: 1,
+          name: "Team A",
+          users: [{ userId: 8, username: "leo" }],
+          accounts: { claude: ["team-1"], codex: [], cursor: [] },
+        },
+      ],
+    });
+    accountPool.createGroup.mockResolvedValue({ group: { id: 2, name: "Team B" } });
+    accountPool.updateGroup.mockResolvedValue({ group: {} });
+    const user = userEvent.setup();
+    render(card(true));
+    const groupCard = await screen.findByTestId("pool-group");
+    expect(groupCard).toHaveTextContent("Team A");
+    expect(groupCard).toHaveTextContent("leo");
+    expect(screen.getAllByTestId("pool-account")[0]).toHaveTextContent("Team A");
+    await user.click(screen.getByRole("button", { name: "New group" }));
+    await screen.findByRole("dialog");
+    await user.type(screen.getByLabelText("Group name"), "Team B");
+    await user.click(await screen.findByRole("checkbox", { name: /leo/ }));
+    expect(screen.getByText("now in Team A")).toBeInTheDocument();
+    await user.click(screen.getByRole("checkbox", { name: "cx-1" }));
+    await user.type(screen.getByLabelText("Your password"), "boss-pass");
+    await user.click(screen.getByRole("button", { name: "Save" }));
+    await waitFor(() =>
+      expect(accountPool.updateGroup).toHaveBeenCalledWith(
+        2,
+        { userIds: [8], accounts: { claude: [], codex: ["cx-1"], cursor: [] } },
+        "boss-pass"
+      )
+    );
+    expect(accountPool.createGroup).toHaveBeenCalledWith("Team B", "boss-pass");
+  });
+
+  it("turns Oh My Pi login sharing on from its tab", async () => {
+    const user = userEvent.setup();
+    render(card(true));
+    await screen.findByText("team-1");
+    await user.click(screen.getByRole("tab", { name: /Oh My Pi/ }));
+    expect(screen.getByTestId("omp-pool-status")).toHaveTextContent(/Sharing is off/);
+    await user.click(screen.getByRole("switch"));
+    await waitFor(() => expect(aiTools.setOmpSharing).toHaveBeenCalledWith(true));
+    expect(screen.getByRole("tab", { name: /Oh My Pi/ })).toHaveTextContent("shared");
   });
 
   it("moves a saved login in, the server's own included", async () => {
     accountPool.add.mockResolvedValue({ account: { name: "work" } });
     const user = userEvent.setup();
-    render(<AccountPoolCard isAdmin />);
+    render(card(true));
     await screen.findByText("team-1");
-    await user.click(screen.getByRole("button", { name: /add account/i }));
+    await user.click(screen.getByRole("button", { name: "Add Claude Code account" }));
     const dialog = await screen.findByRole("dialog");
     const select = await screen.findByLabelText("Profile");
     await waitFor(() => expect(screen.getByRole("option", { name: /Work/ })).toBeInTheDocument());
@@ -134,9 +335,9 @@ describe("AccountPoolCard", () => {
   it("adds a setup-token only with the admin's own password", async () => {
     accountPool.add.mockResolvedValue({ account: { name: "team-2" } });
     const user = userEvent.setup();
-    render(<AccountPoolCard isAdmin />);
+    render(card(true));
     await screen.findByText("team-1");
-    await user.click(screen.getByRole("button", { name: /add account/i }));
+    await user.click(screen.getByRole("button", { name: "Add Claude Code account" }));
     const dialog = await screen.findByRole("dialog");
     await user.selectOptions(screen.getByLabelText("From"), "token");
     await user.type(screen.getByLabelText("Name"), "team-2");
@@ -159,7 +360,9 @@ describe("AccountPoolCard", () => {
   it("removes an account with the admin's own password", async () => {
     accountPool.remove.mockResolvedValue({ ok: true });
     const user = userEvent.setup();
-    render(<AccountPoolCard isAdmin />);
+    render(card(true));
+    await screen.findByText("team-1");
+    await user.click(screen.getByRole("tab", { name: /Codex/ }));
     await user.click(await screen.findByRole("button", { name: "Remove cx-1" }));
     await user.type(await screen.findByLabelText("Your password"), "boss-pass");
     await user.click(screen.getByRole("button", { name: "Remove" }));
@@ -184,7 +387,7 @@ describe("AccountPoolCard", () => {
       removed: [{ userId: 8, username: "leo" }],
     });
     const user = userEvent.setup();
-    render(<AccountPoolCard isAdmin />);
+    render(card(true));
     expect(await screen.findByText("Used by: leo")).toBeInTheDocument();
     expect(screen.queryByRole("button", { name: /switch a user/i })).toBeNull();
     await user.click(screen.getByRole("button", { name: "Edit team-1" }));
@@ -206,4 +409,40 @@ describe("AccountPoolCard", () => {
       expect(accountPool.setUsers).toHaveBeenCalledWith("claude", "team-1", [7], "boss-pass")
     );
   });
+
+  it("moves a saved Codex profile in, and opens on one from its Move to pool link", async () => {
+    accountPool.add.mockResolvedValue({ account: { name: "cx" } });
+    accountPool.profiles.mockImplementation(async (tool: string) =>
+      tool === "codex"
+        ? {
+            profiles: [
+              { name: "cx", label: "Codex", email: "c@x", subscriptionType: "plus", active: false },
+            ],
+          }
+        : { profiles: [] }
+    );
+    const user = userEvent.setup();
+    render(card(true, "/admin?poolAdd=codex&poolProfile=cx"));
+    const dialog = await screen.findByRole("dialog");
+    await waitFor(() => expect(accountPool.profiles).toHaveBeenCalledWith("codex"));
+    expect(screen.getByRole("tab", { name: /Codex/ })).toHaveAttribute("aria-selected", "true");
+    await waitFor(() => expect(screen.getByLabelText("Profile")).toHaveValue("cx"));
+    await user.type(screen.getByLabelText("Your password"), "boss-pass");
+    const confirm = Array.from(dialog.querySelectorAll("button")).find(
+      (b) => b.textContent === "Add account"
+    )!;
+    await user.click(confirm);
+    await waitFor(() =>
+      expect(accountPool.add).toHaveBeenCalledWith(
+        { tool: "codex", name: "cx", profile: "cx" },
+        "boss-pass"
+      )
+    );
+  });
+
+  it("links back to the profiles in Settings", async () => {
+    render(card(false));
+    const link = await screen.findByRole("link", { name: "Profiles in Settings" });
+    expect(link.getAttribute("href")).toBe("/settings/agents#tool-profiles");
+  });
 });

client/src/components/workflows/LanePipelinePanel.tsx

@@ -17,6 +17,7 @@ import { api } from "../../lib/api";
 import { useLiveRefresh } from "../../hooks/useLiveRefresh";
 import { laneChangeMatcher } from "../../lib/laneChange";
 import type { PipelineStats } from "../../lib/types";
+import { copyText } from "../../lib/clipboard";
 
 /** Percentage of `n` out of `total`, 0 when nothing was recorded. */
 function pct(n: number, total: number): number {
@@ -160,7 +161,7 @@ export function LanePipelinePanel({
                     type="button"
                     data-testid={`pipeline-stat-command-${n.id}`}
                     title={t("lanes.copyCommand", { command: n.command })}
-                    onClick={() => void navigator.clipboard?.writeText(n.command || "")}
+                    onClick={() => void copyText(n.command || "")}
                     className="block max-w-full truncate font-mono text-[10px] text-fg-muted hover:text-accent"
                   >
                     {n.command}

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

@@ -70,7 +70,8 @@
   "form.save": "Add",
   "form.cancel": "Cancel",
   "added": "Added",
-  "files": "{{count}} files",
+  "files_one": "{{count}} file",
+  "files_other": "{{count}} files",
   "close": "Close",
   "fromSession": "From a session",
   "form.saveEdit": "Save",
@@ -116,6 +117,20 @@
   "edit.description": "Description",
   "previewFailed": "Could not load this file.",
   "truncated": "Showing the first 1 MB — download the file to see all of it.",
+  "section.hub.own": "Shared by me",
+  "section.hub.ownHint": "Yours, visible to every user",
+  "section.hub.others": "Shared by others",
+  "section.hub.othersHint": "What other users shared — install what you need",
+  "section.mine.own": "Mine",
+  "section.mine.ownHint": "What you added",
+  "section.mine.others": "Installed from others",
+  "section.mine.othersHint": "Shared by other users, installed in your account",
+  "section.all.others": "Shared by others",
+  "section.all.othersHint": "What other users shared",
+  "section.all.own": "Mine",
+  "section.all.ownHint": "What you added, shared or not",
+  "pages": "Pages",
+  "section.empty": "Nothing here yet.",
   "tab.all": "All",
   "installedBadge": "Installed",
   "installsTitle": "Installs",
@@ -125,10 +140,11 @@
   "installsPluginWhere": "claude plugin install --scope user",
   "installsUnrecorded": "{{count}} earlier installs were counted before details were kept",
   "installsNoneOfYours": "You have not installed it — only your own installs are listed.",
-  "reinstall": "Reinstall",
-  "reinstallHint": "Write this version over your installed copy",
-  "reinstallTitle": "Reinstall “{{title}}”?",
-  "reinstallBody": "Your installed ~/.claude/skills/{{name}}/ and ~/.agents/skills/{{name}}/ are replaced with this version. The current copy is moved to ~/.claude/agenthub-replaced-skills/, not deleted.",
+  "uninstall": "Uninstall",
+  "uninstallTitle": "Uninstall “{{title}}”?",
+  "uninstallSkillBody": "~/.claude/skills/{{name}}/ and ~/.agents/skills/{{name}}/ are moved to ~/.claude/agenthub-replaced-skills/, not deleted. Sessions already open keep it until they reload.",
+  "uninstallPluginBody": "Runs claude plugin uninstall {{name}} for your account; the plugin's data folder is kept. Open sessions keep it until /reload-plugins.",
+  "uninstalled": "Uninstalled {{name}}",
   "deleteBodyShared": "It is shared, so it also disappears from the Hub for everyone. To keep it but stop sharing, use Unshare instead. Anything already installed from it stays installed.",
   "deleteBodyKeep": "It leaves your library but stays in the Hub, because it is shared. To take it off the Hub too, use Remove from Hub afterwards (or Unshare first).",
   "deleteKept": "Removed from your library — still in the Hub",
@@ -138,10 +154,34 @@
   "hubRemoveTitle": "Remove “{{title}}” from the Hub?",
   "hubRemoveBody": "It is no longer in your library, so it is deleted for good. Anything already installed from it stays installed.",
   "edit.otherFiles": "Its other {{count}} file(s) are kept as they are.",
-  "edit.reinstallNote": "Your installed copy keeps the old version until you Reinstall it.",
+  "edit.reinstallNote": "Your installed copy keeps the old version until you uninstall it and install it again.",
   "preview.instructions": "Instructions",
   "preview.frontmatter": "Frontmatter (SKILL.md header)",
   "preview.whenUsed": "When Claude uses it",
   "preview.noDescription": "No description",
-  "preview.installsAs": "Installs as ~/.claude/skills/{{slug}}/ and ~/.agents/skills/{{slug}}/"
+  "preview.installsAs": "Installs as ~/.claude/skills/{{slug}}/ and ~/.agents/skills/{{slug}}/",
+  "blurb.skill": "Reusable instructions Claude follows",
+  "blurb.plugin": "Bundles of skills, commands and hooks",
+  "blurb.page": "Pages your sessions published on claude.ai",
+  "blurb.file": "Documents and outputs worth keeping",
+  "clearSearch": "Clear search",
+  "categories": "Categories",
+  "seeAll": "See all",
+  "results_one": "{{count}} result",
+  "results_other": "{{count}} results",
+  "empty.title": "Your library is empty",
+  "empty.hubTitle": "The Hub is quiet",
+  "empty.searchTitle": "No matches",
+  "empty.search": "Nothing matches this search or category — try other words, or pick All.",
+  "details": "Details",
+  "more": "More actions",
+  "about": "About",
+  "stat.kind": "Type",
+  "stat.installs": "Installs",
+  "stat.files": "Files",
+  "stat.size": "Size",
+  "stat.updated": "Updated",
+  "detail.runAs": "Run it as",
+  "detail.market": "Marketplace",
+  "detail.added": "Added {{date}}"
 }

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

@@ -198,7 +198,15 @@
     "tooMany": "Too many failed attempts — try again in a few minutes",
     "logout": "Sign out",
     "noAccount": "No account yet? Ask your administrator to create one.",
-    "signedInAs": "Signed in as {{name}} ({{role}})"
+    "signedInAs": "Signed in as {{name}} ({{role}})",
+    "mustChangeTitle": "Choose your own password",
+    "mustChangeSubtitle": "Your administrator gave you a starting password. Choose your own before you continue.",
+    "currentPassword": "Current password",
+    "newPassword": "New password",
+    "confirmPassword": "Confirm new password",
+    "mismatch": "The two new passwords differ",
+    "mustChangeSubmit": "Save and continue",
+    "saving": "Saving…"
   },
   "insights": {
     "help": {

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

@@ -531,6 +531,9 @@
   "changes.unversionedGroup": "Unversioned Files",
   "changes.commitTicked": "Commit ({{count}})",
   "changes.commitAndPush": "Commit and Push",
+  "changes.discardAll": "Discard all",
+  "changes.discardAllTitle": "Discard all changes?",
+  "changes.discardAllConfirm": "Every change in {{count}} file(s) goes back to the last commit, and {{untracked}} new file(s) git does not track yet are deleted. This cannot be undone.",
   "changes.amendAndPush": "Amend and Push",
   "changes.pushFailed": "Committed, but the push failed: {{error}}",
   "changes.tickFile": "Include {{path}} in the commit",
@@ -647,6 +650,8 @@
   "fx.noWorkspace": "There is no workspace yet. Add one first, then its files show here.",
   "fx.myHome": "Home",
   "fx.userHomes": "Users' homes",
+  "fx.users": "Users",
+  "fx.toggleWorkspaces": "Show or hide {{name}}’s workspaces",
   "fx.readOnlyHome": "Another user's home — view and download only; their Trash can be restored or emptied",
   "fx.readOnly": "Read-only",
   "fx.readOnlyHint": "This is another user's home: you can view, copy and download, not change it.",

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

@@ -72,7 +72,7 @@
     "quotaWrongAccount": "This sign-in belongs to another Claude account: log in as this account and save it again",
     "quotaActive": "in use",
     "quotaTokenExpired": "Sign-in expired: use the tool once so it signs in again",
-    "quotaProfileExpired": "Sign-in expired: use Check quota in Claude Code → Profiles to refresh it",
+    "quotaProfileExpired": "Sign-in expired: use Check quota in Settings → AI tools → Profiles to refresh it",
     "quotaSignInExpires": "Sign-in expires in {{time}}",
     "quotaSignInExpired": "Sign-in expired",
     "quotaWindow": {

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

@@ -89,6 +89,7 @@
     "findClose": "Close find"
   },
   "chat": {
+    "codexPicker": "Opens Codex's own picker — answer it in the chat",
     "placeholder": "Write a message…",
     "send": "Send",
     "notSent": "The terminal is not connected — the message was not sent.",
@@ -139,7 +140,28 @@
     },
     "menu": {
       "placeholder": "Type your answer…",
-      "cancel": "Cancel (Esc)"
+      "cancel": "Cancel (Esc)",
+      "prev": "Previous question",
+      "next": "Next question"
+    },
+    "request": {
+      "notePlaceholder": "Tell the model what to do instead…",
+      "send": "Send",
+      "denyWithNote": "Deny with a note"
+    },
+    "artifact": {
+      "preview": "Preview",
+      "code": "Code",
+      "copy": "Copy",
+      "download": "Download",
+      "share": "Save to Artifacts",
+      "shared": "Saved to your Artifacts library — share it from the Artifacts page.",
+      "cannotShare": "This file cannot be saved to Artifacts.",
+      "expand": "Full screen",
+      "collapse": "Exit full screen",
+      "older": "Older version",
+      "newer": "Newer version",
+      "version": "Version {{n}} of {{total}}"
     }
   },
   "interrupted": {

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

@@ -230,6 +230,15 @@
         "stopped": "stopped"
       },
       "hide": "Hide conversation"
+    },
+    "artifact": {
+      "html": "Web page",
+      "svg": "Image · SVG",
+      "markdown": "Document",
+      "mermaid": "Diagram",
+      "react": "React component",
+      "csv": "Table",
+      "open": "Click to open"
     }
   },
   "overview": {

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

@@ -77,21 +77,13 @@
       "run_done_other": "{{count}} runs finished 🐾"
     },
     "greet": {
-      "morning": [
-        "good morning! ☀️",
-        "morning! coffee first? ☕",
-        "rise and shine 🌤️"
-      ],
+      "morning": ["good morning! ☀️", "morning! coffee first? ☕", "rise and shine 🌤️"],
       "afternoon": [
         "good afternoon! 🐾",
         "hey, welcome back 😺",
         "afternoon! ready when you are ✨"
       ],
-      "evening": [
-        "good evening! 🌆",
-        "evening shift? I'm in 😼",
-        "hey there, night owl-to-be 🌙"
-      ],
+      "evening": ["good evening! 🌆", "evening shift? I'm in 😼", "hey there, night owl-to-be 🌙"],
       "night": [
         "burning the midnight oil? 🌙",
         "late one, huh? I'll keep watch 🦉",
@@ -114,11 +106,7 @@
       "help": "I'm {{name}} - I watch your sessions. Try \"what's running\", \"any errors\", \"what's waiting\" or \"status\". Anything else, I'll hand to Claude.",
       "whoami": "I'm {{name}}, your session-watching buddy 🐾 Right-click me to change my look, or click my name in the panel to rename me.",
       "hello": "hi there! 😺 {{summary}}.",
-      "thanks": [
-        "anytime! 💜",
-        "happy to help 😸",
-        "you got it 🐾"
-      ],
+      "thanks": ["anytime! 💜", "happy to help 😸", "you got it 🐾"],
       "errors_one": "{{count}} session errored{{list}} - open the panel to jump to it.",
       "errors_other": "{{count}} sessions errored{{list}} - open the panel to jump to them.",
       "errorsNone": "no errors - all clean 🐾",
@@ -175,41 +163,17 @@
         "can't reach the server 📡",
         "no signal - taking a nap 💤"
       ],
-      "worried": [
-        "that didn't look right 😟",
-        "keeping an eye out 👀",
-        "hmm, something's off 🫣"
-      ],
+      "worried": ["that didn't look right 😟", "keeping an eye out 👀", "hmm, something's off 🫣"],
       "stuck": [
         "a session's been quiet a while… 🤔",
         "is something stuck? ⏳",
         "still chewing on it… 😾"
       ],
-      "happy": [
-        "great run! 😻",
-        "love a tidy finish ✨",
-        "purrfect 💜"
-      ],
-      "thinking": [
-        "hmm, let me look… 🤔",
-        "sniffing around… 🐾",
-        "one sec, checking 🔍"
-      ],
-      "watching": [
-        "on the prowl 👀",
-        "watching your sessions 😼",
-        "eyes peeled 🐾"
-      ],
-      "sleeping": [
-        "zzz… 💤",
-        "wake me if something happens 😴",
-        "curled up, all calm 🐈"
-      ],
-      "idle": [
-        "all quiet 😺",
-        "ready when you are 🐾",
-        "just vibing ✨"
-      ]
+      "happy": ["great run! 😻", "love a tidy finish ✨", "purrfect 💜"],
+      "thinking": ["hmm, let me look… 🤔", "sniffing around… 🐾", "one sec, checking 🔍"],
+      "watching": ["on the prowl 👀", "watching your sessions 😼", "eyes peeled 🐾"],
+      "sleeping": ["zzz… 💤", "wake me if something happens 😴", "curled up, all calm 🐈"],
+      "idle": ["all quiet 😺", "ready when you are 🐾", "just vibing ✨"]
     },
     "chat": {
       "label": "Chat with {{name}}",
@@ -1140,6 +1104,21 @@
       "vi": "Tiếng Việt"
     }
   },
+  "ompSharing": {
+    "title": "Oh My Pi login sharing",
+    "switch": "Share this server's Oh My Pi login",
+    "hint": "Every user's omp sessions run on the logins the host account made with `omp login`, through omp's own auth broker and gateway on this machine. A session gets only a key that works while its pane runs, never the login itself. Only omp's built-in providers are shared.",
+    "running": "Running: broker and gateway are up.",
+    "starting": "Starting…",
+    "notInstalled": "omp is not installed on this server.",
+    "failed": "Not running: {{error}}"
+  },
+  "markdownView": {
+    "label": "Open Markdown as",
+    "description": "How a .md file opens in Files, Changes, the config viewer and a chat's file panel. Its Preview/Raw button still switches that one file. Saved to your account.",
+    "preview": "Preview",
+    "raw": "Raw"
+  },
   "workspaceTabs": {
     "title": "Workspace tabs",
     "description": "Which sessions the session view's tab bar holds. Saved to your account.",
@@ -1302,9 +1281,9 @@
   },
   "chatUi": {
     "title": "Chat UI",
-    "description": "How a new Claude or Codex session opens in its workspace. Saved for your account only.",
+    "description": "How a new Claude, Codex, omp, Cursor or Antigravity session opens in its workspace. Saved for your account only.",
     "label": "Open new sessions as a chat",
-    "labelDesc": "A Claude or Codex session first shows its conversation like Claude Desktop, with a message box, instead of its terminal. Each session then keeps its own view: the chat/terminal button beside a pane's split buttons switches it. Permission prompts and menus still need the terminal.",
+    "labelDesc": "A new session first shows its conversation like Claude Desktop, with a message box, instead of its terminal (the terminal stays underneath). Each session then keeps its own view: the chat/terminal button beside a pane's split buttons switches it. Permission prompts and questions are answered from cards in the chat.",
     "saveFailed": "Could not save: {{message}}"
   },
   "sessionDefaults": {
@@ -1339,7 +1318,11 @@
       "remove": "Remove picture",
       "saved": "Picture updated",
       "removed": "Picture removed",
-      "tooBig": "The picture must be at most 1 MB"
+      "tooBig": "The picture must be at most 1 MB",
+      "fromUrl": "Use a picture from a link",
+      "urlPlaceholder": "https://… image link",
+      "urlApply": "Use",
+      "linkUnreachable": "That link did not load as an image in your browser — it may need a login (a Mattermost or other chat picture does). Download the picture and upload it instead."
     },
     "loadFailed": "Could not load your account: {{message}}",
     "memberSince": "Member since",
@@ -1367,5 +1350,32 @@
     "signOutOthersBody": "Every browser signed in to your account except this one is signed out.",
     "signedOut_one": "Signed out {{count}} other device",
     "signedOut_other": "Signed out {{count}} other devices"
+  },
+  "toolProfiles": {
+    "title": "Profiles",
+    "description": "Every AI tool's saved logins in one place. Switching swaps only the login; config, skills, sessions and history stay as they are.",
+    "poolCount_one": "The account pool holds {{count}} account for this tool.",
+    "poolCount_other": "The account pool holds {{count}} accounts for this tool.",
+    "openPool": "Open the account pool",
+    "moveToPool": "Move to pool",
+    "moveToPoolHint": "Administration → Users → Account pool, with this profile chosen. The pool becomes the login's only holder and the profile is removed.",
+    "saveButton": "Save this login as a profile",
+    "noActive": "{{tool}} holds no login on this machine.",
+    "noProfiles": "Could not load the profiles.",
+    "switchSuccess": "Switched {{tool}} to \"{{name}}\". Start a new session to use it.",
+    "deleteConfirmBody": "This removes the saved {{tool}} login. To use it again, sign in from a terminal and save it once more.",
+    "loginHint": "Add another {{tool}} login by signing in from a terminal first:",
+    "subtitle": {
+      "codex": "A profile is one Codex login (a ChatGPT account or an API key): the whole auth.json. config.toml, sessions, skills and history stay where they are.",
+      "omp": "A profile is the full set of logins Oh My Pi stores (every provider), read with `omp auth export` and put back with `omp auth import`. Settings, models and sessions stay where they are. Running omp sessions pick up the switch on their own."
+    },
+    "unsupported": {
+      "antigravity": "Antigravity keeps its login in the system keyring, which AgentHub does not read or write, so it cannot be switched from here. Sign in or out inside agy itself."
+    },
+    "kind": {
+      "chatgpt": "ChatGPT login",
+      "apikey": "API key",
+      "credentials": "Logins"
+    }
   }
 }

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

@@ -35,5 +35,6 @@
   "autoFix": "Auto fix",
   "autoFixHint": "Open a Claude Code session in the install folder with this error, so an AI agent fixes it and finishes the update.",
   "autoFixWorkspace": "AgentHub update",
-  "autoFixError": "Could not start the Auto fix session"
+  "autoFixError": "Could not start the Auto fix session",
+  "backgroundNote": "The update keeps running in the background — the page reloads itself when the new version is up."
 }

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

@@ -30,7 +30,7 @@
   "username": "Username",
   "usernameHint": "Letters, digits, '.', '_' or '-'",
   "password": "Password",
-  "passwordHint": "No minimum length",
+  "passwordHint": "Any starting password — they choose their own at first sign-in",
   "newPassword": "New password",
   "changeRole": "Change role",
   "disable": "Disable",
@@ -68,6 +68,9 @@
   "errors": {
     "EBADIMAGE": "Only a PNG, JPEG, GIF or WebP picture",
     "ETOOBIG": "The picture must be at most 1 MB",
+    "EBADURL": "Enter an https:// link to a picture.",
+    "EPRIVATEURL": "That link points to a private or local address.",
+    "EFETCH": "Could not download the picture from that link.",
     "EREAUTH": "Your password is wrong.",
     "ETOOMANY": "Too many wrong passwords. Try again in 15 minutes.",
     "ESELF": "You cannot change your own role or disable yourself.",
@@ -81,7 +84,9 @@
     "EOWNERFOLDER": "That workspace's folder belongs to another user's account.",
     "EBADROLE": "Unknown role.",
     "ELOCALMODE": "Accounts are managed in server mode only.",
-    "ELASTADMIN": "The last admin cannot be deleted."
+    "ELASTADMIN": "The last admin cannot be deleted, demoted or disabled.",
+    "EWEAKPASSWORD": "The new password does not meet every rule (or is the current one).",
+    "EPWCHANGE": "Choose your own password first."
   },
   "readOnly": "Analysts can view accounts but not change them.",
   "auditTitle": "Audit log",
@@ -107,7 +112,7 @@
     "selfRole": "You cannot change your own role.",
     "selfDisable": "You cannot disable yourself.",
     "password": "Password",
-    "passwordHint": "Leave blank to keep the current one. A new one signs them out everywhere.",
+    "passwordHint": "Leave blank to keep the current one. A new one signs them out everywhere, and they choose their own at their next sign-in.",
     "show": "Show password",
     "hide": "Hide password",
     "copy": "Copy password",
@@ -122,16 +127,15 @@
     "sessions": "Sign-ins",
     "signOut": "Sign out everywhere",
     "signOutHint": "Ends this user's {{n}} active sign-in(s); they sign in again with their password.",
-    "noChanges": "No changes yet."
+    "noChanges": "No changes yet.",
+    "ownPasswordHint": "Leave blank to keep the current one. Your other sign-ins end."
   },
   "pool": {
     "title": "Account pool",
-    "description": "Claude and Codex accounts every user's new sessions run on — the least-used one is picked, and a login is written into the user's home by the server, so nobody signs in per user.",
+    "description": "Accounts each tool's new sessions run on, one tab per AI tool. The least-used account is picked (or the one a user is pinned to), so nobody signs in per user.",
     "refresh": "Re-read quotas",
     "add": "Add account",
-    "empty": "No accounts yet. Until you add one, each user's session needs that user's own sign-in.",
     "account": "Account",
-    "tool": "Tool",
     "livePanes": "Live",
     "quota": "Quota",
     "spend": "5 hours",
@@ -140,12 +144,6 @@
     "added": "added {{at}}",
     "expired": "expired",
     "full": "full",
-    "kind": {
-      "token": "Claude · setup-token",
-      "login": "Claude · login",
-      "apikey": "Codex · API key",
-      "chatgpt": "Codex · ChatGPT"
-    },
     "name": "Name",
     "nameHint": "Any label you will recognise: letters, digits, '.', '_' or '-'",
     "remove": "Remove {{name}}",
@@ -167,35 +165,40 @@
       "ENOTFOUND": "That saved login no longer exists.",
       "ESTALE": "That login was already refreshed elsewhere. Log in again and save it anew.",
       "EUPSTREAM": "Anthropic could not be reached. Try again.",
-      "ENOUSER": "That user no longer exists."
+      "ENOUSER": "That user no longer exists.",
+      "ENOGROUP": "That group no longer exists."
     },
     "source": "From",
     "sources": {
-      "profile": "A saved login (Switch account profiles)",
+      "profile": "A saved profile (Settings → AI tools → Profiles)",
       "credentials": "Paste .credentials.json / Keychain",
       "token": "claude setup-token"
     },
     "sourceHint": {
       "profile": "The login is moved into the pool: the profile leaves the switcher, and the server writes it into each user's home when their session starts.",
       "credentials": "From ~/.claude/.credentials.json, or on a Mac `security find-generic-password -s \"Claude Code-credentials\" -w`. Do not keep using that login where you copied it from — two copies log each other out.",
-      "token": "A one-year token from `claude setup-token`, given to every session as an environment variable."
+      "token": "A one-year token from `claude setup-token`, given to every session as an environment variable.",
+      "codex": "An OpenAI API key (sk-…), or the whole ~/.codex/auth.json after `codex login` with a ChatGPT account.",
+      "cursor": "A Cursor API key from the Cursor dashboard (Integrations → API keys)."
     },
     "profile": "Profile",
-    "profileHint": "Saved in Settings → Claude config → Switch account. The one this server's own Claude Code is logged into can be moved too: the server keeps running on it and refreshes it for everyone.",
+    "profileHint": "Saved in Settings → AI tools → Profiles. The one this server's own CLI is logged into can be moved too: the server keeps running on it.",
     "chooseProfile": "Choose a saved login…",
-    "noProfiles": "No saved logins — save one in Settings → Claude config → Switch account",
+    "noProfiles": "No saved profiles — save one in Settings → AI tools → Profiles",
     "loadingProfiles": "Loading…",
     "activeHere": "in use on this server — keeps working",
     "nameFromProfile": "Leave blank to use the profile's name",
     "secret": {
       "credentials": "Credentials JSON",
       "token": "Token",
-      "codex": "API key or auth.json"
+      "codex": "API key or auth.json",
+      "cursor": "Cursor API key"
     },
     "secretHint": {
       "credentials": "The whole file: {\"claudeAiOauth\": {…}}",
       "token": "The sk-ant-… that `claude setup-token` printed.",
-      "codex": "An OpenAI API key (sk-…), or the whole ~/.codex/auth.json after `codex login` with a ChatGPT account."
+      "codex": "An OpenAI API key (sk-…), or the whole ~/.codex/auth.json after `codex login` with a ChatGPT account.",
+      "cursor": "Create one in the Cursor dashboard under Integrations → API keys."
     },
     "refreshFailed": "refresh failed",
     "pinned": "Used by: {{users}}",
@@ -210,7 +213,71 @@
     "users": "Users on this account",
     "noUsers": "No users yet.",
     "onAccount": "now on {{account}}",
-    "editDone": "{{name}} saved"
+    "editDone": "{{name}} saved",
+    "profilesLink": "Profiles in Settings",
+    "addFor": "Add {{tool}} account",
+    "type": "Type",
+    "about": {
+      "claude": "New Claude Code sessions run on these accounts. A setup-token goes in as an environment variable; a real login is written into each user's home by the server and refreshed by it.",
+      "codex": "New Codex sessions (not on an AI Proxy) run on these accounts. An OpenAI API key goes in as an environment variable; a ChatGPT login is written into each user's own Codex home.",
+      "cursor": "New Cursor CLI sessions run on these Cursor API keys, given to the session as CURSOR_API_KEY — it outranks the user's own `cursor-agent login` for that session only. Cursor reports no usage or quota here, so the account with the fewest live sessions is picked."
+    },
+    "notInstalled": "{{tool}} is not installed on this server yet.",
+    "emptyFor": "No {{tool}} accounts yet. Until you add one, each user's {{tool}} session needs that user's own sign-in.",
+    "kindShort": {
+      "token": "setup-token",
+      "login": "Login",
+      "apikey": "API key",
+      "chatgpt": "ChatGPT login"
+    },
+    "omp": {
+      "badgeOn": "shared",
+      "about": "Oh My Pi has no account pool: it shares this server's own omp login instead. Sign the host account in with `omp` (then /login), turn sharing on, and every user's omp session runs on it through omp's own gateway — with a key that works only while its pane runs.",
+      "off": "Sharing is off: each user's omp session uses that user's own login.",
+      "unavailable": "Oh My Pi has no account pool. Its login can be shared only on a server where every user has their own Linux account (server mode with per-user accounts); here each user's omp session uses that user's own login."
+    },
+    "none": {
+      "title": "{{tool}} has no account pool",
+      "reason": {
+        "antigravity": "Antigravity signs in with a Google account and keeps that login in the system keyring; it takes no key AgentHub could hand a session. Each user signs in to agy themselves.",
+        "default": "AgentHub cannot hand {{tool}} a shared login, so each user signs in to it themselves."
+      }
+    },
+    "liveCount_one": "{{count}} live",
+    "liveCount_other": "{{count}} live",
+    "savedProfiles": {
+      "title": "Saved profiles you can share",
+      "empty": "No saved profiles for this tool. Save one in Settings → AI tools → Profiles, then share it here.",
+      "activeHere": "in use on this server",
+      "share": "Share to pool",
+      "shareNamed": "Share {{name}} to the pool"
+    },
+    "groups": {
+      "title": "Groups",
+      "description": "Give each team its own accounts: a group's members run only on the group's accounts. Users in no group share the accounts no group lists.",
+      "new": "New group",
+      "empty": "No groups yet — every user shares every account.",
+      "members_one": "{{count}} member",
+      "members_other": "{{count}} members",
+      "edit": "Edit group {{name}}",
+      "delete": "Delete group {{name}}",
+      "deleteHint": "Its members go back to the shared pool. No account is removed.",
+      "noAccounts": "none — members sign in themselves",
+      "saved": "Group {{name}} saved",
+      "deleted": "Group {{name}} deleted",
+      "hint": "Tick the members and the accounts they run on. A user belongs to one group, so ticking one moves them here. An account can serve several groups.",
+      "name": "Group name",
+      "memberList": "Members",
+      "inGroup": "now in {{group}}",
+      "accountList": "Accounts",
+      "noneInPool": "No accounts of this tool in the pool.",
+      "shared": "Shared pool"
+    },
+    "window": {
+      "5h": "5 hours",
+      "wk": "Week"
+    },
+    "resetsIn": "resets in {{time}} · {{at}}"
   },
   "delete": {
     "button": "Delete user",
@@ -253,5 +320,15 @@
     "openHome": "Open home in Files",
     "copyUsername": "Copy username",
     "copyEmail": "Copy email"
+  },
+  "mustChange": "New password due",
+  "mustChangeHint": "Signed in with a password an admin gave; must choose their own before using AgentHub",
+  "passwordRules": {
+    "length": "At least {{min}} characters",
+    "lower": "A lower-case letter",
+    "upper": "An upper-case letter",
+    "digit": "A digit",
+    "symbol": "A symbol (e.g. ! - _ @)",
+    "username": "Does not contain the username"
   }
 }

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

@@ -70,7 +70,8 @@
   "form.save": "Thêm",
   "form.cancel": "Huỷ",
   "added": "Đã thêm",
-  "files": "{{count}} file",
+  "files_one": "{{count}} file",
+  "files_other": "{{count}} file",
   "close": "Đóng",
   "fromSession": "Từ một phiên",
   "form.saveEdit": "Lưu",
@@ -116,6 +117,20 @@
   "edit.description": "Mô tả",
   "previewFailed": "Không tải được file này.",
   "truncated": "Chỉ hiển thị 1 MB đầu — tải file về để xem toàn bộ.",
+  "section.hub.own": "Tôi đã share",
+  "section.hub.ownHint": "Của bạn, mọi người dùng đều thấy",
+  "section.hub.others": "Người khác share",
+  "section.hub.othersHint": "Những gì người dùng khác đã share — cài cái bạn cần",
+  "section.mine.own": "Của tôi",
+  "section.mine.ownHint": "Những gì bạn đã thêm",
+  "section.mine.others": "Đã cài từ người khác",
+  "section.mine.othersHint": "Người dùng khác share, đã cài vào tài khoản của bạn",
+  "section.all.others": "Người khác share",
+  "section.all.othersHint": "Những gì người dùng khác đã share",
+  "section.all.own": "Của tôi",
+  "section.all.ownHint": "Những gì bạn đã thêm, đã share hoặc chưa",
+  "pages": "Trang",
+  "section.empty": "Chưa có gì.",
   "tab.all": "Tất cả",
   "installedBadge": "Đã cài",
   "installsTitle": "Lượt cài",
@@ -125,10 +140,11 @@
   "installsPluginWhere": "claude plugin install --scope user",
   "installsUnrecorded": "{{count}} lượt cài trước đây chỉ được đếm, không lưu chi tiết",
   "installsNoneOfYours": "Bạn chưa cài — chỉ hiện các lượt cài của bạn.",
-  "reinstall": "Cài lại",
-  "reinstallHint": "Ghi bản này đè lên bản bạn đã cài",
-  "reinstallTitle": "Cài lại “{{title}}”?",
-  "reinstallBody": "Bản đã cài ở ~/.claude/skills/{{name}}/ và ~/.agents/skills/{{name}}/ sẽ được thay bằng bản này. Bản hiện tại được chuyển vào ~/.claude/agenthub-replaced-skills/, không bị xoá.",
+  "uninstall": "Gỡ cài đặt",
+  "uninstallTitle": "Gỡ cài đặt “{{title}}”?",
+  "uninstallSkillBody": "~/.claude/skills/{{name}}/ và ~/.agents/skills/{{name}}/ sẽ được chuyển vào ~/.claude/agenthub-replaced-skills/, không bị xoá. Các phiên đang mở vẫn giữ nó cho tới khi tải lại.",
+  "uninstallPluginBody": "Chạy claude plugin uninstall {{name}} cho tài khoản của bạn; thư mục dữ liệu của plugin được giữ lại. Các phiên đang mở vẫn giữ nó cho tới khi /reload-plugins.",
+  "uninstalled": "Đã gỡ {{name}}",
   "deleteBodyShared": "Mục này đang được chia sẻ nên cũng sẽ biến mất khỏi Hub với mọi người. Muốn giữ lại nhưng thôi chia sẻ thì dùng Bỏ chia sẻ. Những gì đã cài từ nó vẫn được giữ.",
   "deleteBodyKeep": "Mục này rời khỏi thư viện của bạn nhưng vẫn ở trên Hub vì đang được chia sẻ. Muốn gỡ khỏi Hub luôn thì sau đó bấm Gỡ khỏi Hub (hoặc Bỏ chia sẻ trước).",
   "deleteKept": "Đã xoá khỏi thư viện — vẫn còn trên Hub",
@@ -138,10 +154,34 @@
   "hubRemoveTitle": "Gỡ “{{title}}” khỏi Hub?",
   "hubRemoveBody": "Mục này không còn trong thư viện của bạn nên sẽ bị xoá hẳn. Những gì đã cài từ nó vẫn được giữ.",
   "edit.otherFiles": "{{count}} file khác của skill được giữ nguyên.",
-  "edit.reinstallNote": "Bản bạn đã cài vẫn là bản cũ cho đến khi bấm Cài lại.",
+  "edit.reinstallNote": "Bản bạn đã cài vẫn là bản cũ cho đến khi bạn gỡ cài đặt rồi cài lại.",
   "preview.instructions": "Hướng dẫn",
   "preview.frontmatter": "Frontmatter (phần đầu SKILL.md)",
   "preview.whenUsed": "Khi nào Claude dùng",
   "preview.noDescription": "Chưa có mô tả",
-  "preview.installsAs": "Cài vào ~/.claude/skills/{{slug}}/ và ~/.agents/skills/{{slug}}/"
+  "preview.installsAs": "Cài vào ~/.claude/skills/{{slug}}/ và ~/.agents/skills/{{slug}}/",
+  "blurb.skill": "Bộ hướng dẫn tái sử dụng cho Claude",
+  "blurb.plugin": "Gói skill, lệnh và hook",
+  "blurb.page": "Trang mà phiên đã publish lên claude.ai",
+  "blurb.file": "Tài liệu và kết quả đáng giữ lại",
+  "clearSearch": "Xoá tìm kiếm",
+  "categories": "Danh mục",
+  "seeAll": "Xem tất cả",
+  "results_one": "{{count}} kết quả",
+  "results_other": "{{count}} kết quả",
+  "empty.title": "Thư viện đang trống",
+  "empty.hubTitle": "Hub chưa có gì",
+  "empty.searchTitle": "Không tìm thấy",
+  "empty.search": "Không có mục nào khớp tìm kiếm hoặc danh mục này — thử từ khác, hoặc chọn Tất cả.",
+  "details": "Chi tiết",
+  "more": "Thao tác khác",
+  "about": "Giới thiệu",
+  "stat.kind": "Loại",
+  "stat.installs": "Lượt cài",
+  "stat.files": "File",
+  "stat.size": "Dung lượng",
+  "stat.updated": "Cập nhật",
+  "detail.runAs": "Gọi bằng",
+  "detail.market": "Marketplace",
+  "detail.added": "Thêm lúc {{date}}"
 }

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

@@ -198,7 +198,15 @@
     "tooMany": "Sai quá nhiều lần — hãy thử lại sau vài phút",
     "logout": "Đăng xuất",
     "noAccount": "Chưa có tài khoản? Hãy nhờ quản trị viên tạo cho bạn.",
-    "signedInAs": "Đang đăng nhập: {{name}} ({{role}})"
+    "signedInAs": "Đang đăng nhập: {{name}} ({{role}})",
+    "mustChangeTitle": "Đặt mật khẩu của bạn",
+    "mustChangeSubtitle": "Quản trị viên đã cấp cho bạn mật khẩu ban đầu. Hãy đặt mật khẩu riêng trước khi tiếp tục.",
+    "currentPassword": "Mật khẩu hiện tại",
+    "newPassword": "Mật khẩu mới",
+    "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…"
   },
   "insights": {
     "help": {

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

@@ -531,6 +531,9 @@
   "changes.unversionedGroup": "File chưa theo dõi",
   "changes.commitTicked": "Commit ({{count}})",
   "changes.commitAndPush": "Commit và Push",
+  "changes.discardAll": "Bỏ tất cả",
+  "changes.discardAllTitle": "Bỏ tất cả thay đổi?",
+  "changes.discardAllConfirm": "Mọi thay đổi trong {{count}} file sẽ trở về commit cuối, và {{untracked}} file mới chưa được git theo dõi sẽ bị xoá. Không thể hoàn tác.",
   "changes.amendAndPush": "Amend và Push",
   "changes.pushFailed": "Đã commit, nhưng push thất bại: {{error}}",
   "changes.tickFile": "Đưa {{path}} vào commit",
@@ -647,6 +650,8 @@
   "fx.noWorkspace": "Chưa có workspace nào. Hãy thêm một workspace, file của nó sẽ hiện ở đây.",
   "fx.myHome": "Thư mục home",
   "fx.userHomes": "Home của các user",
+  "fx.users": "Người dùng",
+  "fx.toggleWorkspaces": "Hiện/ẩn workspace của {{name}}",
   "fx.readOnlyHome": "Home của user khác — chỉ xem và tải về; Thùng rác của họ thì khôi phục hoặc xoá được",
   "fx.readOnly": "Chỉ đọc",
   "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.",

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

@@ -72,7 +72,7 @@
     "quotaWrongAccount": "Lượt đăng nhập này thuộc tài khoản Claude khác: đăng nhập lại đúng tài khoản này rồi lưu lại",
     "quotaActive": "đang dùng",
     "quotaTokenExpired": "Đăng nhập đã hết hạn: dùng công cụ một lần để nó đăng nhập lại",
-    "quotaProfileExpired": "Đăng nhập đã hết hạn: bấm Kiểm tra quota trong Claude Code → Profiles để làm mới",
+    "quotaProfileExpired": "Đăng nhập đã hết hạn: bấm Kiểm tra quota trong Cài đặt → AI tools → Hồ sơ đăng nhập để làm mới",
     "quotaSignInExpires": "Đăng nhập hết hạn sau {{time}}",
     "quotaSignInExpired": "Đăng nhập đã hết hạn",
     "quotaWindow": {

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

@@ -89,6 +89,7 @@
     "findClose": "Đóng tìm kiếm"
   },
   "chat": {
+    "codexPicker": "Mở bộ chọn của chính Codex — trả lời ngay trong chat",
     "placeholder": "Viết tin nhắn…",
     "send": "Gửi",
     "notSent": "Terminal chưa kết nối — tin nhắn chưa được gửi.",
@@ -139,7 +140,28 @@
     },
     "menu": {
       "placeholder": "Nhập câu trả lời của bạn…",
-      "cancel": "Huỷ (Esc)"
+      "cancel": "Huỷ (Esc)",
+      "prev": "Câu trước",
+      "next": "Câu tiếp"
+    },
+    "request": {
+      "notePlaceholder": "Nói cho model biết nên làm gì thay vào đó…",
+      "send": "Gửi",
+      "denyWithNote": "Từ chối kèm lời nhắn"
+    },
+    "artifact": {
+      "preview": "Xem trước",
+      "code": "Mã",
+      "copy": "Sao chép",
+      "download": "Tải xuống",
+      "share": "Lưu vào Artifacts",
+      "shared": "Đã lưu vào thư viện Artifacts của bạn — chia sẻ từ trang Artifacts.",
+      "cannotShare": "Không lưu được file này vào Artifacts.",
+      "expand": "Toàn màn hình",
+      "collapse": "Thoát toàn màn hình",
+      "older": "Phiên bản cũ hơn",
+      "newer": "Phiên bản mới hơn",
+      "version": "Phiên bản {{n}}/{{total}}"
     }
   },
   "interrupted": {

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

@@ -230,6 +230,15 @@
         "stopped": "đã dừng"
       },
       "hide": "Ẩn hội thoại"
+    },
+    "artifact": {
+      "html": "Trang web",
+      "svg": "Ảnh · SVG",
+      "markdown": "Tài liệu",
+      "mermaid": "Sơ đồ",
+      "react": "Component React",
+      "csv": "Bảng",
+      "open": "Bấm để mở"
     }
   },
   "overview": {

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

@@ -77,26 +77,10 @@
       "run_done_other": "{{count}} lượt chạy vừa xong 🐾"
     },
     "greet": {
-      "morning": [
-        "chào buổi sáng! ☀️",
-        "sáng rồi! cà phê chưa? ☕",
-        "ngày mới tốt lành nha 🌤️"
-      ],
-      "afternoon": [
-        "chào buổi chiều! 🐾",
-        "bạn quay lại rồi 😺",
-        "chiều nay làm gì đây? ✨"
-      ],
-      "evening": [
-        "chào buổi tối! 🌆",
-        "ca tối hả? có mình đây 😼",
-        "tối rồi, cố lên nhé 🌙"
-      ],
-      "night": [
-        "khuya rồi mà vẫn làm à? 🌙",
-        "để mình canh giúp cho 🦉",
-        "nhớ nghỉ ngơi nha 💤"
-      ],
+      "morning": ["chào buổi sáng! ☀️", "sáng rồi! cà phê chưa? ☕", "ngày mới tốt lành nha 🌤️"],
+      "afternoon": ["chào buổi chiều! 🐾", "bạn quay lại rồi 😺", "chiều nay làm gì đây? ✨"],
+      "evening": ["chào buổi tối! 🌆", "ca tối hả? có mình đây 😼", "tối rồi, cố lên nhé 🌙"],
+      "night": ["khuya rồi mà vẫn làm à? 🌙", "để mình canh giúp cho 🦉", "nhớ nghỉ ngơi nha 💤"],
       "summary_one": "{{count}} phiên đang chạy",
       "summary_other": "{{count}} phiên đang chạy",
       "summaryWaiting": "{{count}} phiên chờ bạn",
@@ -114,11 +98,7 @@
       "help": "Mình là {{name}} - mình canh các phiên của bạn. Thử hỏi \"đang chạy gì\", \"có lỗi không\", \"cái gì đang chờ\" hoặc \"tình hình\". Câu khác mình sẽ chuyển cho Claude.",
       "whoami": "Mình là {{name}}, bạn đồng hành canh phiên của bạn 🐾 Chuột phải vào mình để đổi ngoại hình, hoặc bấm vào tên trong bảng để đặt tên mới.",
       "hello": "chào bạn! 😺 {{summary}}.",
-      "thanks": [
-        "có gì đâu! 💜",
-        "rất vui được giúp 😸",
-        "chuyện nhỏ 🐾"
-      ],
+      "thanks": ["có gì đâu! 💜", "rất vui được giúp 😸", "chuyện nhỏ 🐾"],
       "errors_one": "{{count}} phiên bị lỗi{{list}} - mở bảng để xem nhé.",
       "errors_other": "{{count}} phiên bị lỗi{{list}} - mở bảng để xem nhé.",
       "errorsNone": "không có lỗi nào - sạch sẽ 🐾",
@@ -175,41 +155,13 @@
         "không gọi được máy chủ 📡",
         "mất sóng - đi ngủ chút 💤"
       ],
-      "worried": [
-        "có vẻ không ổn 😟",
-        "mình đang để mắt đây 👀",
-        "hừm, có gì đó lạ lạ 🫣"
-      ],
-      "stuck": [
-        "một phiên im lặng lâu rồi… 🤔",
-        "có gì bị kẹt không? ⏳",
-        "vẫn đang nhai… 😾"
-      ],
-      "happy": [
-        "tuyệt vời! 😻",
-        "kết thúc gọn ghê ✨",
-        "hoàn hảo 💜"
-      ],
-      "thinking": [
-        "để mình xem… 🤔",
-        "đang đánh hơi… 🐾",
-        "chờ chút, đang kiểm tra 🔍"
-      ],
-      "watching": [
-        "đang tuần tra 👀",
-        "đang canh các phiên của bạn 😼",
-        "mắt mở to 🐾"
-      ],
-      "sleeping": [
-        "zzz… 💤",
-        "có gì thì gọi mình dậy nhé 😴",
-        "cuộn tròn, mọi thứ yên ổn 🐈"
-      ],
-      "idle": [
-        "yên ắng quá 😺",
-        "sẵn sàng khi bạn cần 🐾",
-        "chill thôi ✨"
-      ]
+      "worried": ["có vẻ không ổn 😟", "mình đang để mắt đây 👀", "hừm, có gì đó lạ lạ 🫣"],
+      "stuck": ["một phiên im lặng lâu rồi… 🤔", "có gì bị kẹt không? ⏳", "vẫn đang nhai… 😾"],
+      "happy": ["tuyệt vời! 😻", "kết thúc gọn ghê ✨", "hoàn hảo 💜"],
+      "thinking": ["để mình xem… 🤔", "đang đánh hơi… 🐾", "chờ chút, đang kiểm tra 🔍"],
+      "watching": ["đang tuần tra 👀", "đang canh các phiên của bạn 😼", "mắt mở to 🐾"],
+      "sleeping": ["zzz… 💤", "có gì thì gọi mình dậy nhé 😴", "cuộn tròn, mọi thứ yên ổn 🐈"],
+      "idle": ["yên ắng quá 😺", "sẵn sàng khi bạn cần 🐾", "chill thôi ✨"]
     },
     "chat": {
       "label": "Trò chuyện với {{name}}",
@@ -1140,6 +1092,21 @@
       "vi": "Tiếng Việt"
     }
   },
+  "ompSharing": {
+    "title": "Dùng chung đăng nhập Oh My Pi",
+    "switch": "Dùng chung đăng nhập Oh My Pi của máy chủ",
+    "hint": "Mọi session omp của người dùng chạy bằng các đăng nhập mà tài khoản máy chủ đã tạo bằng `omp login`, qua auth broker và gateway của chính omp trên máy này. Session chỉ nhận một key dùng được khi pane còn chạy, không bao giờ nhận chính đăng nhập. Chỉ các provider có sẵn của omp được dùng chung.",
+    "running": "Đang chạy: broker và gateway đã sẵn sàng.",
+    "starting": "Đang khởi động…",
+    "notInstalled": "Máy chủ chưa cài omp.",
+    "failed": "Không chạy: {{error}}"
+  },
+  "markdownView": {
+    "label": "Mở file Markdown dạng",
+    "description": "Cách file .md mở trong Files, Changes, trình xem cấu hình và bảng file của chat. Nút Xem trước/Mã nguồn vẫn đổi riêng file đó. Lưu theo tài khoản.",
+    "preview": "Xem trước",
+    "raw": "Mã nguồn"
+  },
   "workspaceTabs": {
     "title": "Tab của workspace",
     "description": "Thanh tab của màn hình session chứa những session nào. Lưu theo tài khoản.",
@@ -1302,9 +1269,9 @@
   },
   "chatUi": {
     "title": "Giao diện chat",
-    "description": "Cách một session Claude hoặc Codex mới mở trong workspace. Chỉ lưu cho tài khoản của bạn.",
+    "description": "Cách một session Claude, Codex, omp, Cursor hoặc Antigravity mới mở trong workspace. Chỉ lưu cho tài khoản của bạn.",
     "label": "Mở session mới dạng chat",
-    "labelDesc": "Session Claude hoặc Codex sẽ mở hội thoại như Claude Desktop, kèm ô nhập tin, thay cho terminal. Sau đó mỗi session giữ dạng xem riêng: nút chat/terminal cạnh nút split của pane để chuyển. Hỏi quyền và menu vẫn cần terminal.",
+    "labelDesc": "Session mới sẽ mở hội thoại như Claude Desktop, kèm ô nhập tin, thay cho terminal (terminal vẫn chạy bên dưới). Sau đó mỗi session giữ dạng xem riêng: nút chat/terminal cạnh nút split của pane để chuyển. Hỏi quyền và câu hỏi được trả lời bằng thẻ ngay trong chat.",
     "saveFailed": "Không lưu được: {{message}}"
   },
   "sessionDefaults": {
@@ -1339,7 +1306,11 @@
       "remove": "Xoá ảnh đại diện",
       "saved": "Đã cập nhật ảnh đại diện",
       "removed": "Đã xoá ảnh đại diện",
-      "tooBig": "Ảnh tối đa 1 MB"
+      "tooBig": "Ảnh tối đa 1 MB",
+      "fromUrl": "Dùng ảnh từ đường dẫn",
+      "urlPlaceholder": "https://… đường dẫn ảnh",
+      "urlApply": "Dùng",
+      "linkUnreachable": "Trình duyệt không tải được ảnh từ link này — có thể link cần đăng nhập (ảnh Mattermost hay app chat khác là vậy). Hãy tải ảnh về rồi upload lên."
     },
     "loadFailed": "Không tải được tài khoản: {{message}}",
     "memberSince": "Tham gia từ",
@@ -1367,5 +1338,32 @@
     "signOutOthersBody": "Mọi trình duyệt đang đăng nhập tài khoản của bạn, trừ trình duyệt này, sẽ bị đăng xuất.",
     "signedOut_one": "Đã đăng xuất {{count}} thiết bị khác",
     "signedOut_other": "Đã đăng xuất {{count}} thiết bị khác"
+  },
+  "toolProfiles": {
+    "title": "Hồ sơ đăng nhập",
+    "description": "Mọi đăng nhập đã lưu của các AI tool ở một nơi. Khi đổi chỉ phần đăng nhập được hoán đổi; config, skills, phiên làm việc và lịch sử vẫn giữ nguyên.",
+    "poolCount_one": "Account pool đang có {{count}} tài khoản cho tool này.",
+    "poolCount_other": "Account pool đang có {{count}} tài khoản cho tool này.",
+    "openPool": "Mở account pool",
+    "moveToPool": "Đưa vào pool",
+    "moveToPoolHint": "Quản trị → Người dùng → Account pool, chọn sẵn hồ sơ này. Pool sẽ là nơi duy nhất giữ đăng nhập này và hồ sơ được xoá.",
+    "saveButton": "Lưu đăng nhập này thành hồ sơ",
+    "noActive": "{{tool}} chưa có đăng nhập nào trên máy này.",
+    "noProfiles": "Không tải được danh sách hồ sơ.",
+    "switchSuccess": "Đã chuyển {{tool}} sang \"{{name}}\". Mở phiên mới để dùng.",
+    "deleteConfirmBody": "Thao tác này xoá đăng nhập {{tool}} đã lưu. Muốn dùng lại, hãy đăng nhập từ terminal và lưu lại lần nữa.",
+    "loginHint": "Thêm đăng nhập {{tool}} khác bằng cách đăng nhập từ terminal trước:",
+    "subtitle": {
+      "codex": "Mỗi hồ sơ là một đăng nhập Codex (tài khoản ChatGPT hoặc API key): toàn bộ auth.json. config.toml, phiên, skills và lịch sử vẫn giữ nguyên.",
+      "omp": "Mỗi hồ sơ là toàn bộ các đăng nhập Oh My Pi đang lưu (mọi provider), đọc bằng `omp auth export` và ghi lại bằng `omp auth import`. Settings, model và phiên vẫn giữ nguyên. Các phiên omp đang chạy tự nhận đăng nhập mới."
+    },
+    "unsupported": {
+      "antigravity": "Antigravity lưu đăng nhập trong keyring của hệ điều hành, AgentHub không đọc hay ghi vào đó nên không đổi được từ đây. Hãy đăng nhập/đăng xuất ngay trong agy."
+    },
+    "kind": {
+      "chatgpt": "Đăng nhập ChatGPT",
+      "apikey": "API key",
+      "credentials": "Đăng nhập"
+    }
   }
 }

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

@@ -35,5 +35,6 @@
   "autoFix": "Tự sửa",
   "autoFixHint": "Mở một phiên Claude Code trong thư mục cài đặt kèm lỗi này, để AI agent sửa và hoàn tất cập nhật.",
   "autoFixWorkspace": "Cập nhật AgentHub",
-  "autoFixError": "Không mở được phiên Tự sửa"
+  "autoFixError": "Không mở được phiên Tự sửa",
+  "backgroundNote": "Bản cập nhật vẫn chạy ngầm — trang sẽ tự tải lại khi phiên bản mới sẵn sàng."
 }

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

@@ -30,7 +30,7 @@
   "username": "Tên đăng nhập",
   "usernameHint": "Chữ, số, '.', '_' hoặc '-'",
   "password": "Mật khẩu",
-  "passwordHint": "Không giới hạn độ dài tối thiểu",
+  "passwordHint": "Mật khẩu ban đầu tuỳ ý — người dùng sẽ tự đặt mật khẩu riêng ở lần đăng nhập đầu",
   "newPassword": "Mật khẩu mới",
   "changeRole": "Đổi vai trò",
   "disable": "Khoá",
@@ -68,6 +68,9 @@
   "errors": {
     "EBADIMAGE": "Chỉ nhận ảnh PNG, JPEG, GIF hoặc WebP",
     "ETOOBIG": "Ảnh tối đa 1 MB",
+    "EBADURL": "Hãy nhập đường dẫn https:// tới một ảnh.",
+    "EPRIVATEURL": "Đường dẫn trỏ tới địa chỉ nội bộ hoặc cục bộ.",
+    "EFETCH": "Không tải được ảnh từ đường dẫn này.",
     "EREAUTH": "Mật khẩu của bạn không đúng.",
     "ETOOMANY": "Nhập sai mật khẩu quá nhiều lần. Thử lại sau 15 phút.",
     "ESELF": "Bạn không thể tự đổi vai trò hay tự khoá chính mình.",
@@ -81,7 +84,9 @@
     "EOWNERFOLDER": "Thư mục của workspace đó thuộc tài khoản của người dùng khác.",
     "EBADROLE": "Vai trò không hợp lệ.",
     "ELOCALMODE": "Chỉ quản lý tài khoản được ở chế độ server.",
-    "ELASTADMIN": "Không thể xoá admin cuối cùng."
+    "ELASTADMIN": "Không thể xoá, hạ quyền hay khoá admin cuối cùng.",
+    "EWEAKPASSWORD": "Mật khẩu mới chưa đạt đủ các yêu cầu (hoặc trùng mật khẩu hiện tại).",
+    "EPWCHANGE": "Hãy đặt mật khẩu riêng của bạn trước."
   },
   "readOnly": "Analyst chỉ xem được tài khoản, không thay đổi được.",
   "auditTitle": "Nhật ký audit",
@@ -107,7 +112,7 @@
     "selfRole": "Bạn không thể đổi vai trò của chính mình.",
     "selfDisable": "Bạn không thể tự vô hiệu hoá mình.",
     "password": "Mật khẩu",
-    "passwordHint": "Để trống để giữ mật khẩu hiện tại. Mật khẩu mới sẽ đăng xuất họ ở mọi nơi.",
+    "passwordHint": "Để trống để giữ mật khẩu hiện tại. Mật khẩu mới sẽ đăng xuất họ ở mọi nơi và họ phải tự đặt mật khẩu riêng ở lần đăng nhập sau.",
     "show": "Hiện mật khẩu",
     "hide": "Ẩn mật khẩu",
     "copy": "Sao chép mật khẩu",
@@ -122,16 +127,15 @@
     "sessions": "Phiên đăng nhập",
     "signOut": "Đăng xuất ở mọi nơi",
     "signOutHint": "Kết thúc {{n}} phiên đăng nhập đang hoạt động của người này; họ đăng nhập lại bằng mật khẩu.",
-    "noChanges": "Chưa có thay đổi."
+    "noChanges": "Chưa có thay đổi.",
+    "ownPasswordHint": "Để trống để giữ mật khẩu hiện tại. Các phiên đăng nhập khác của bạn sẽ kết thúc."
   },
   "pool": {
     "title": "Pool tài khoản",
-    "description": "Các tài khoản Claude và Codex mà phiên mới của mọi user chạy trên đó — tự chọn tài khoản ít tải nhất, server ghi login vào home của user, không ai phải đăng nhập riêng.",
+    "description": "Các tài khoản mà phiên mới của từng tool chạy trên đó, mỗi AI tool một tab. Tự chọn tài khoản ít tải nhất (hoặc tài khoản user được gán), không ai phải đăng nhập riêng.",
     "refresh": "Đọc lại quota",
     "add": "Thêm tài khoản",
-    "empty": "Chưa có tài khoản nào. Khi chưa thêm, phiên của mỗi người dùng cần chính người đó đăng nhập.",
     "account": "Tài khoản",
-    "tool": "Công cụ",
     "livePanes": "Đang chạy",
     "quota": "Quota",
     "spend": "5 giờ",
@@ -140,12 +144,6 @@
     "added": "thêm lúc {{at}}",
     "expired": "hết hạn",
     "full": "đầy",
-    "kind": {
-      "token": "Claude · setup-token",
-      "login": "Claude · login",
-      "apikey": "Codex · API key",
-      "chatgpt": "Codex · ChatGPT"
-    },
     "name": "Tên",
     "nameHint": "Nhãn tuỳ ý để bạn nhận ra: chữ, số, '.', '_' hoặc '-'",
     "remove": "Xoá {{name}}",
@@ -167,35 +165,40 @@
       "ENOTFOUND": "Login đã lưu đó không còn nữa.",
       "ESTALE": "Login này đã được làm mới ở nơi khác. Đăng nhập lại và lưu lại.",
       "EUPSTREAM": "Không kết nối được Anthropic. Thử lại.",
-      "ENOUSER": "User đó không còn tồn tại."
+      "ENOUSER": "User đó không còn tồn tại.",
+      "ENOGROUP": "Nhóm đó không còn tồn tại."
     },
     "source": "Nguồn",
     "sources": {
-      "profile": "Login đã lưu (profile Switch account)",
+      "profile": "Hồ sơ đã lưu (Cài đặt → AI tools → Hồ sơ đăng nhập)",
       "credentials": "Dán .credentials.json / Keychain",
       "token": "claude setup-token"
     },
     "sourceHint": {
       "profile": "Login được chuyển vào pool: profile rời khỏi trình đổi tài khoản, và server ghi nó vào home của từng user khi phiên của họ bắt đầu.",
       "credentials": "Lấy từ ~/.claude/.credentials.json, hoặc trên Mac: `security find-generic-password -s \"Claude Code-credentials\" -w`. Đừng dùng tiếp login đó ở nơi đã copy — hai bản sẽ làm nhau bị đăng xuất.",
-      "token": "Token 1 năm từ `claude setup-token`, đưa vào mọi phiên qua biến môi trường."
+      "token": "Token 1 năm từ `claude setup-token`, đưa vào mọi phiên qua biến môi trường.",
+      "codex": "OpenAI API key (sk-…), hoặc toàn bộ ~/.codex/auth.json sau khi `codex login` bằng tài khoản ChatGPT.",
+      "cursor": "Cursor API key lấy từ Cursor dashboard (Integrations → API keys)."
     },
     "profile": "Profile",
-    "profileHint": "Lưu ở Settings → Claude config → Switch account. Profile mà Claude Code của server đang dùng cũng chuyển được: server vẫn chạy trên nó và tự làm mới cho mọi người.",
+    "profileHint": "Lưu ở Cài đặt → AI tools → Hồ sơ đăng nhập. Hồ sơ mà CLI của server đang dùng cũng chuyển được: server vẫn chạy trên nó.",
     "chooseProfile": "Chọn login đã lưu…",
-    "noProfiles": "Chưa có login nào — lưu ở Settings → Claude config → Switch account",
+    "noProfiles": "Chưa có hồ sơ nào — lưu ở Cài đặt → AI tools → Hồ sơ đăng nhập",
     "loadingProfiles": "Đang tải…",
     "activeHere": "server đang dùng — vẫn chạy tiếp",
     "nameFromProfile": "Để trống để dùng tên profile",
     "secret": {
       "credentials": "Credentials JSON",
       "token": "Token",
-      "codex": "API key hoặc auth.json"
+      "codex": "API key hoặc auth.json",
+      "cursor": "Cursor API key"
     },
     "secretHint": {
       "credentials": "Toàn bộ file: {\"claudeAiOauth\": {…}}",
       "token": "Chuỗi sk-ant-… mà `claude setup-token` in ra.",
-      "codex": "OpenAI API key (sk-…), hoặc toàn bộ ~/.codex/auth.json sau khi `codex login` bằng tài khoản ChatGPT."
+      "codex": "OpenAI API key (sk-…), hoặc toàn bộ ~/.codex/auth.json sau khi `codex login` bằng tài khoản ChatGPT.",
+      "cursor": "Tạo trong Cursor dashboard tại Integrations → API keys."
     },
     "refreshFailed": "làm mới lỗi",
     "pinned": "Đang dùng: {{users}}",
@@ -210,7 +213,71 @@
     "users": "User dùng tài khoản này",
     "noUsers": "Chưa có user nào.",
     "onAccount": "đang ở {{account}}",
-    "editDone": "Đã lưu {{name}}"
+    "editDone": "Đã lưu {{name}}",
+    "profilesLink": "Hồ sơ trong Cài đặt",
+    "addFor": "Thêm tài khoản {{tool}}",
+    "type": "Loại",
+    "about": {
+      "claude": "Phiên Claude Code mới chạy trên các tài khoản này. Setup-token được đưa vào dưới dạng biến môi trường; login thật được server ghi vào home của từng user và tự làm mới.",
+      "codex": "Phiên Codex mới (không qua AI Proxy) chạy trên các tài khoản này. OpenAI API key được đưa vào dưới dạng biến môi trường; login ChatGPT được ghi vào Codex home riêng của từng user.",
+      "cursor": "Phiên Cursor CLI mới chạy trên các Cursor API key này, đưa vào phiên qua CURSOR_API_KEY — chỉ trong phiên đó nó được ưu tiên hơn `cursor-agent login` của chính user. Cursor không báo mức dùng hay quota ở đây, nên tài khoản có ít phiên đang chạy nhất sẽ được chọn."
+    },
+    "notInstalled": "{{tool}} chưa được cài trên server này.",
+    "emptyFor": "Chưa có tài khoản {{tool}} nào. Khi chưa thêm, phiên {{tool}} của mỗi user cần chính user đó đăng nhập.",
+    "kindShort": {
+      "token": "setup-token",
+      "login": "Login",
+      "apikey": "API key",
+      "chatgpt": "Login ChatGPT"
+    },
+    "omp": {
+      "badgeOn": "chia sẻ",
+      "about": "Oh My Pi không có account pool: thay vào đó nó chia sẻ login omp của chính server. Đăng nhập tài khoản host bằng `omp` (rồi /login), bật chia sẻ, và phiên omp của mọi user chạy trên login đó qua gateway của omp — với một key chỉ dùng được khi pane còn chạy.",
+      "off": "Chia sẻ đang tắt: phiên omp của mỗi user dùng login của chính user đó.",
+      "unavailable": "Oh My Pi không có account pool. Login của nó chỉ chia sẻ được trên server mà mỗi user có tài khoản Linux riêng (server mode với tài khoản theo user); ở đây phiên omp của mỗi user dùng login của chính user đó."
+    },
+    "none": {
+      "title": "{{tool}} không có account pool",
+      "reason": {
+        "antigravity": "Antigravity đăng nhập bằng tài khoản Google và giữ login trong keyring của hệ thống; nó không nhận key nào để AgentHub đưa cho phiên. Mỗi user tự đăng nhập agy.",
+        "default": "AgentHub không thể đưa cho {{tool}} một login dùng chung, nên mỗi user tự đăng nhập."
+      }
+    },
+    "liveCount_one": "{{count}} đang chạy",
+    "liveCount_other": "{{count}} đang chạy",
+    "savedProfiles": {
+      "title": "Profile đã lưu có thể chia sẻ",
+      "empty": "Chưa có profile nào của tool này. Lưu một profile trong Settings → AI tools → Profiles rồi chia sẻ ở đây.",
+      "activeHere": "đang dùng trên server này",
+      "share": "Chia sẻ vào pool",
+      "shareNamed": "Chia sẻ {{name}} vào pool"
+    },
+    "groups": {
+      "title": "Nhóm",
+      "description": "Mỗi nhóm có tài khoản riêng: thành viên của nhóm chỉ chạy trên tài khoản của nhóm. User không thuộc nhóm nào dùng chung các tài khoản không nằm trong nhóm nào.",
+      "new": "Tạo nhóm",
+      "empty": "Chưa có nhóm — mọi user dùng chung mọi tài khoản.",
+      "members_one": "{{count}} thành viên",
+      "members_other": "{{count}} thành viên",
+      "edit": "Sửa nhóm {{name}}",
+      "delete": "Xoá nhóm {{name}}",
+      "deleteHint": "Các thành viên quay về pool chung. Không tài khoản nào bị xoá.",
+      "noAccounts": "chưa có — thành viên tự đăng nhập",
+      "saved": "Đã lưu nhóm {{name}}",
+      "deleted": "Đã xoá nhóm {{name}}",
+      "hint": "Tick các thành viên và tài khoản mà họ dùng. Mỗi user thuộc một nhóm, tick một user sẽ chuyển họ sang đây. Một tài khoản có thể dùng cho nhiều nhóm.",
+      "name": "Tên nhóm",
+      "memberList": "Thành viên",
+      "inGroup": "đang ở {{group}}",
+      "accountList": "Tài khoản",
+      "noneInPool": "Pool chưa có tài khoản nào của tool này.",
+      "shared": "Pool chung"
+    },
+    "window": {
+      "5h": "5 giờ",
+      "wk": "Tuần"
+    },
+    "resetsIn": "reset sau {{time}} · {{at}}"
   },
   "delete": {
     "button": "Xoá user",
@@ -253,5 +320,15 @@
     "openHome": "Mở home trong Files",
     "copyUsername": "Sao chép username",
     "copyEmail": "Sao chép email"
+  },
+  "mustChange": "Chờ đổi mật khẩu",
+  "mustChangeHint": "Đang dùng mật khẩu do admin cấp; phải tự đặt mật khẩu riêng trước khi dùng AgentHub",
+  "passwordRules": {
+    "length": "Ít nhất {{min}} ký tự",
+    "lower": "Có chữ thường",
+    "upper": "Có chữ hoa",
+    "digit": "Có chữ số",
+    "symbol": "Có ký tự đặc biệt (vd. ! - _ @)",
+    "username": "Không chứa tên đăng nhập"
   }
 }

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

@@ -0,0 +1,102 @@
+/**
+ * @file artifactView.test.ts
+ * @description What counts as an artifact and how it is shown: kinds by
+ * name, a React file only when written whole, a file's versions rebuilt from
+ * the conversation's Write/Edit/MultiEdit inputs (a failed call skipped, an
+ * edit to unseen text unknown), CSV rows, and the sandboxed documents.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, expect, it } from "vitest";
+import {
+  artifactDocument,
+  artifactKind,
+  artifactVersions,
+  frameSandbox,
+  isArtifact,
+  parseCsv,
+} from "../artifactView";
+import type { TranscriptMessage } from "../types";
+
+const use = (id: string, name: string, input: Record<string, unknown>): TranscriptMessage => ({
+  type: "assistant",
+  timestamp: `2026-10-21T00:00:0${id}.000Z`,
+  content: [{ type: "tool_use", id, name, input } as TranscriptMessage["content"][number]],
+});
+const result = (id: string, isError = false): TranscriptMessage => ({
+  type: "user",
+  sender: "tool",
+  timestamp: null,
+  content: [
+    {
+      type: "tool_result",
+      id,
+      output: "",
+      is_error: isError,
+    } as TranscriptMessage["content"][number],
+  ],
+});
+
+describe("artifactView", () => {
+  it("knows an artifact by its name", () => {
+    expect(artifactKind("/a/page.HTML")).toBe("html");
+    expect(artifactKind("d.mmd")).toBe("mermaid");
+    expect(artifactKind("App.tsx")).toBe("react");
+    expect(artifactKind("x.go")).toBe("code");
+    expect(isArtifact("report.md", false)).toBe(true);
+    expect(isArtifact("App.tsx", false)).toBe(false);
+    expect(isArtifact("App.tsx", true)).toBe(true);
+    expect(isArtifact("server.js", true)).toBe(false);
+  });
+
+  it("rebuilds a file's versions from Write, Edit and MultiEdit", () => {
+    const msgs = [
+      use("1", "Write", { file_path: "/w/a.md", content: "# A\nold line\n" }),
+      result("1"),
+      use("2", "Edit", { file_path: "/w/a.md", old_string: "old", new_string: "new" }),
+      result("2"),
+      use("3", "Edit", { file_path: "/w/a.md", old_string: "missing", new_string: "x" }),
+      result("3", true),
+      use("4", "MultiEdit", {
+        file_path: "/w/a.md",
+        edits: [{ old_string: "# A", new_string: "# B" }],
+      }),
+      result("4"),
+      use("5", "Write", { file_path: "/w/other.md", content: "no" }),
+    ];
+    const v = artifactVersions(msgs, "/w/a.md");
+    expect(v.map((x) => x.content)).toEqual([
+      "# A\nold line\n",
+      "# A\nnew line\n",
+      "# B\nnew line\n",
+    ]);
+  });
+
+  it("says an edit to text it never saw is of unknown content", () => {
+    const v = artifactVersions(
+      [use("1", "Edit", { file_path: "a.md", old_string: "a", new_string: "b" })],
+      "a.md"
+    );
+    expect(v).toHaveLength(1);
+    expect(v[0]!.content).toBeNull();
+  });
+
+  it("reads CSV with quotes and newlines inside them", () => {
+    expect(parseCsv('a,b\n"x, y","say ""hi""\nthere"\n')).toEqual([
+      ["a", "b"],
+      ["x, y", 'say "hi"\nthere'],
+    ]);
+  });
+
+  it("builds sandboxed documents that keep the source inert inside a script", () => {
+    const doc = artifactDocument("react", "export default () => <p>a</script>b</p>", false)!;
+    expect(doc).toContain("babel");
+    expect(doc).not.toContain("a</script>b");
+    expect(artifactDocument("mermaid", "graph TD; A-->B<img>", true)).toContain(
+      "A--&gt;B&lt;img&gt;"
+    );
+    expect(artifactDocument("code", "x", false)).toBeNull();
+    expect(frameSandbox("svg")).toBe("");
+    expect(frameSandbox("html")).not.toContain("allow-same-origin");
+  });
+});

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

@@ -21,6 +21,7 @@ import {
   chooseRunOption,
   parsePaneMenu,
   pasteToLane,
+  readRunBusy,
   readRunMenu,
   registerPane,
   takeRunInput,
@@ -160,6 +161,33 @@ describe("panePaste", () => {
     expect(m.typeAt).toBe(2);
   });
 
+  // Several questions: the unnumbered row is Next until the last one, and the
+  // tab bar says which questions have an answer.
+  it("reads a multi-question multiSelect with its Next row and question tabs", () => {
+    const m = parsePaneMenu(MULTI_Q)!;
+    expect(m.options.map((o) => [o.n, o.label, o.checked])).toEqual([
+      [1, "JWT HS256 + default secret", true],
+      [2, "Product code issue 2 lần", true],
+      [3, "Type something", false],
+      [null, "Next", null],
+      [4, "Chat about this", null],
+    ]);
+    expect(m.options[2]!.hint).toBe("");
+    expect(m.cursor).toBe(0);
+    expect(m.tabs).toEqual([
+      { label: "Critical", done: true },
+      { label: "High 1/3", done: false },
+      { label: "High 2/3", done: false },
+      { label: "High 3/3", done: false },
+    ]);
+    expect(m.tab).toBe(0);
+    expect(MENU_CURSOR_ROW.test("❯ Next")).toBe(true);
+  });
+
+  it("reads no tabs for a single question", () => {
+    expect(parsePaneMenu(ASK)!.tabs).toBeUndefined();
+  });
+
   // The "Type something" row once something is typed in it: its label is the
   // text. It is still the row right above "Chat about this".
   it("finds Type something by its place once text is typed in it, and replaces that text", () => {
@@ -188,8 +216,11 @@ describe("panePaste", () => {
     const c = parsePaneMenu(PERMISSION)!;
     expect(c.question).toBe("Do you want to proceed?");
     expect(c.options.map((o) => o.label)).toEqual(["Yes", "Yes, and always allow", "No"]);
+    // The tool and its command, drawn over the dashed rule.
+    expect(c.detail).toEqual(["Bash command", "touch probe-file.txt"]);
     const x = parsePaneMenu(CODEX_APPROVAL)!;
     expect(x.question).toBe("Would you like to run the following command?\n$ touch probe.txt");
+    expect(x.detail).toBeUndefined();
     expect(x.options).toHaveLength(3);
     expect(x.cursor).toBe(0);
   });
@@ -317,6 +348,23 @@ const MULTI = [
   "",
   "Enter to select · Tab/Arrow keys to navigate · Esc to cancel",
 ];
+const MULTI_Q = [
+  RULE,
+  "←  ☒ Critical  □ High 1/3  □ High 2/3  □ High 3/3  ✔ Submit  →",
+  "",
+  "Critical (đã verify trong code). Chọn issue để log BUG:",
+  "",
+  "❯ 1. [✔] JWT HS256 + default secret",
+  "        pkg/middleware/auth.go:156,184 — HMAC only",
+  "  2. [✔] Product code issue 2 lần",
+  "        gift product_code_repository.go:57 — không FOR UPDATE",
+  "  3. [ ] Type something",
+  "     Next",
+  RULE,
+  "  4. Chat about this",
+  "",
+  "Enter to select · Tab/Arrow keys to navigate · Esc to cancel",
+];
 const PERMISSION = [
   " Bash command",
   " touch probe-file.txt",
@@ -378,3 +426,51 @@ describe("MENU_CURSOR_ROW", () => {
     expect(has(CODEX)).toBe(false);
   });
 });
+
+describe("readRunBusy", () => {
+  it("reads each tool's own busy line, and nothing for a tool it does not know", () => {
+    let rows = ["✻ Thinking… (4s · ↓ 120 tokens · esc to interrupt)"];
+    const off = registerPane("agenthub-lane-8", () => {}, () => true, undefined, undefined, () => rows);
+    expect(readRunBusy("agenthub-lane-8", "claude")).toBe(true);
+    // Claude's permission footer is not a turn at work.
+    rows = ["Esc to cancel · Tab to amend"];
+    expect(readRunBusy("agenthub-lane-8", "claude")).toBe(false);
+    expect(readRunBusy("agenthub-lane-8", "antigravity")).toBe(false);
+    rows = ["Thinking… (3s · esc to cancel)"];
+    expect(readRunBusy("agenthub-lane-8", "antigravity")).toBe(true);
+    expect(readRunBusy("agenthub-lane-8", "omp")).toBeNull();
+    off();
+    expect(readRunBusy("agenthub-lane-8", "claude")).toBeNull();
+  });
+});
+
+describe("Codex's pickers", () => {
+  it("reads /permissions with each row's description column as its hint", () => {
+    const menu = parsePaneMenu([
+      "  >_ OpenAI Codex (v0.163.0)",
+      "",
+      "  Update Model Permissions",
+      "",
+      "› 1. Ask for approval (current)  Read and edit workspace files and run commands, with approval req",
+      "                                 access or edits outside the workspace",
+      "  2. Approve for me              Only ask for actions detected as potentially unsafe",
+      "  3. Full Access                 Use with caution: Codex can edit files",
+      "                                 without approval",
+      "  4. Read Only                   Read workspace files",
+      "",
+      "  enter select · esc back",
+    ]);
+    expect(menu?.question).toBe("Update Model Permissions");
+    expect(menu?.cursor).toBe(0);
+    expect(menu?.options.map((o) => [o.n, o.label, o.hint])).toEqual([
+      [
+        1,
+        "Ask for approval (current)",
+        "Read and edit workspace files and run commands, with approval req access or edits outside the workspace",
+      ],
+      [2, "Approve for me", "Only ask for actions detected as potentially unsafe"],
+      [3, "Full Access", "Use with caution: Codex can edit files without approval"],
+      [4, "Read Only", "Read workspace files"],
+    ]);
+  });
+});

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

@@ -0,0 +1,63 @@
+/**
+ * @file promptAttach.test.ts — `claudePastes`: how files reach a `claude` pane.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+import { describe, expect, it } from "vitest";
+import { claudePastes, copiedFilePaths, localCandidates } from "../promptAttach";
+
+describe("claudePastes", () => {
+  it("pastes each image as its bare path and the other files as one @ mention paste", () => {
+    expect(
+      claudePastes(["/d/drops/a.png", "/d/drops/b-report.pdf", "/d/x.JPG", "/d/c.log"])
+    ).toEqual(["/d/drops/a.png", "/d/x.JPG", "@/d/drops/b-report.pdf @/d/c.log"]);
+  });
+
+  it("keeps a Windows or spaced image path a mention", () => {
+    expect(claudePastes(["C:\\u\\drops\\a.png", "/home/u/my shot.png"])).toEqual([
+      '@C:/u/drops/a.png @"/home/u/my shot.png"',
+    ]);
+  });
+});
+
+/** A clipboard as the browser hands it to a paste handler. */
+const clip = (data: Record<string, string>) =>
+  ({ getData: (t: string) => data[t] ?? "" }) as unknown as DataTransfer;
+const file = (name: string) => new File(["x"], name);
+
+describe("localCandidates (a file manager's copy, pasted)", () => {
+  it("takes the plain-text paths when their names match the pasted files", () => {
+    expect(window.location.hostname).toBe("localhost");
+    const dt = clip({ "text/plain": "/home/u/Videos/big.mp4\n/home/u/b c.pdf\n" });
+    expect(localCandidates(dt, [file("b c.pdf"), file("big.mp4")])).toEqual([
+      "/home/u/Videos/big.mp4",
+      "/home/u/b c.pdf",
+    ]);
+  });
+
+  it("takes file:// lines too, decoded", () => {
+    const dt = clip({ "text/plain": "file:///home/u/a%20b.zip" });
+    expect(localCandidates(dt, [file("a b.zip")])).toEqual(["/home/u/a b.zip"]);
+  });
+
+  it("refuses text that does not name exactly the pasted files", () => {
+    expect(localCandidates(clip({ "text/plain": "/etc/passwd" }), [file("big.mp4")])).toBeNull();
+    expect(localCandidates(clip({ "text/plain": "hello" }), [file("hello")])).toBeNull();
+    expect(
+      localCandidates(clip({ "text/plain": "/a/x.txt" }), [file("x.txt"), file("y.txt")])
+    ).toBeNull();
+  });
+
+  it("prefers a uri-list (a drag) as before", () => {
+    const dt = clip({ "text/uri-list": "file:///tmp/z.bin", "text/plain": "/other/z.bin" });
+    expect(localCandidates(dt, [file("z.bin")])).toEqual(["/tmp/z.bin"]);
+  });
+});
+
+describe("copiedFilePaths (no file beside the text)", () => {
+  it("takes file:// text, never bare absolute paths, which stay text to paste", () => {
+    expect(copiedFilePaths(clip({ "text/plain": "file:///home/u/a.txt" }))).toEqual([
+      "/home/u/a.txt",
+    ]);
+    expect(copiedFilePaths(clip({ "text/plain": "/home/u/a.txt" }))).toBeNull();
+  });
+});

client/src/lib/api.ts

@@ -660,6 +660,13 @@ export type PoolAccount = {
   spend7d: number;
   tokens5h: number;
   tokens7d: number;
+  /** The last usage reading of the account's own token, or null before one. */
+  quota?: {
+    fiveHour: CcUsageWindow | null;
+    sevenDay: CcUsageWindow | null;
+    checkedAt: string;
+    error: string | null;
+  } | null;
   quotaPercent: number | null;
   full: boolean;
 };
@@ -673,6 +680,11 @@ export type CodexPoolAccount = {
   spend7d: number;
   tokens5h: number;
   tokens7d: number;
+  /** The newest `rate_limits` its sessions' rollouts carry (`5h`, `wk`, …), or null. */
+  quota?: {
+    windows: { label: string; usedPercent: number; resetsAt: string | null }[];
+    asOf: string;
+  } | null;
   quotaPercent: number | null;
   full: boolean;
 };
@@ -683,14 +695,37 @@ export type AccountPin = {
   account: string;
   pinnedAt?: string;
 };
+/** One Cursor pool account — a Cursor API key, never the key itself; no quota. */
+export type CursorPoolAccount = Omit<CodexPoolAccount, "kind"> & { kind: "apikey" };
 export type AccountPool = {
   accounts: PoolAccount[];
   codex: CodexPoolAccount[];
+  /** Absent from a server older than the Cursor pool. */
+  cursor?: CursorPoolAccount[];
   /** Per tool; absent from an older server, empty in local mode. */
-  pins?: { claude: AccountPin[]; codex: AccountPin[] };
+  pins?: Partial<Record<PoolTool, AccountPin[]>>;
+  /** Server mode's pool groups; absent from an older server, empty in local mode. */
+  groups?: PoolGroup[];
   blockPercent: number;
 };
-export type PoolTool = "claude" | "codex";
+/**
+ * A pool group: its members (one group per user) run only on its accounts;
+ * a user in no group runs on the accounts no group lists (the shared pool).
+ */
+export type PoolGroup = {
+  id: number;
+  name: string;
+  createdAt?: string;
+  users: { userId: number; username: string }[];
+  accounts: Partial<Record<PoolTool, string[]>>;
+};
+/** What `PATCH /api/accounts/groups/:id` takes — every part optional. */
+export type PoolGroupPatch = {
+  name?: string;
+  userIds?: number[];
+  accounts?: Partial<Record<PoolTool, string[]>>;
+};
+export type PoolTool = "claude" | "codex" | "cursor";
 /** A saved switch-user profile that can be moved into the pool (no token). */
 export type PoolProfile = {
   name: string;
@@ -699,6 +734,29 @@ export type PoolProfile = {
   subscriptionType: string | null;
   active: boolean;
 };
+/** A login profile of a tool other than Claude (`/api/tool-profiles`) — never a token. */
+export type ToolProfileIdentity = {
+  /** codex: `chatgpt` | `apikey`; omp: `credentials`. */
+  kind: string;
+  email: string | null;
+  /** codex: the ChatGPT plan or `…1234` of a key; omp: its providers. */
+  detail: string | null;
+};
+export type ToolProfile = ToolProfileIdentity & {
+  name: string;
+  label: string;
+  savedAt: number | null;
+  active: boolean;
+};
+export type ToolProfilesTool = {
+  tool: string;
+  supported: boolean;
+  /** Why a tool cannot be switched (`supported: false`). */
+  reason?: string;
+  items: ToolProfile[];
+  active: ToolProfileIdentity | null;
+  error?: { code?: string; message: string } | null;
+};
 /** What `POST /api/accounts` takes: exactly one of `profile`, `credentials`, `token`. */
 export type PoolAccountInput = {
   tool: PoolTool;
@@ -733,6 +791,8 @@ export type AuthUser = {
   /** When the account's avatar was last set (null = none) — versions its URL. */
   avatarAt?: string | null;
   createdAt?: string;
+  /** An admin gave this password: the user must choose their own before anything else. */
+  mustChangePassword?: boolean;
 };
 export type AuthState = { mode: "local" } | { mode: "server"; user: AuthUser | null };
 /** GET /api/me/prefs — the signed-in account's own UI preferences (localStorage keys). */
@@ -1007,6 +1067,9 @@ export const api = {
         body: file,
         headers: { "Content-Type": "application/octet-stream" },
       }),
+    /** POST /api/me/avatar/url — the server downloads the picture from an https link. */
+    setAvatarFromUrl: (url: string) =>
+      request<MyAccount>("/me/avatar/url", { method: "POST", body: JSON.stringify({ url }) }),
     /** DELETE /api/me/avatar — back to the initials. */
     removeAvatar: () => request<MyAccount>("/me/avatar", { method: "DELETE" }),
   },
@@ -1091,6 +1154,33 @@ export const api = {
         body: JSON.stringify({ laneId, currentPassword }),
       }),
   },
+  /** Login profiles of Codex, Oh My Pi… (Claude's: `ccConfig.profiles`). */
+  toolProfiles: {
+    /** GET /api/tool-profiles — every covered tool, switchable or not. */
+    list: () => request<{ tools: ToolProfilesTool[] }>("/tool-profiles"),
+    /** POST /api/tool-profiles/:tool — save the login the tool holds now. */
+    save: (tool: string) =>
+      request<{ ok: true; name: string; label: string }>(
+        `/tool-profiles/${encodeURIComponent(tool)}`,
+        { method: "POST", body: JSON.stringify({}) }
+      ),
+    rename: (tool: string, name: string, label: string) =>
+      request<{ ok: true; name: string; label: string }>(
+        `/tool-profiles/${encodeURIComponent(tool)}`,
+        { method: "PATCH", body: JSON.stringify({ name, label }) }
+      ),
+    /** POST /api/tool-profiles/:tool/activate — the outgoing login is saved back first. */
+    activate: (tool: string, name: string) =>
+      request<{ ok: true; name: string; savedOutgoing: string | null }>(
+        `/tool-profiles/${encodeURIComponent(tool)}/activate`,
+        { method: "POST", body: JSON.stringify({ name }) }
+      ),
+    remove: (tool: string, name: string) =>
+      request<{ ok: true; name: string }>(`/tool-profiles/${encodeURIComponent(tool)}`, {
+        method: "DELETE",
+        body: JSON.stringify({ name }),
+      }),
+  },
   /** The Claude/Codex account pool every member's new panes run on
    *  (`server/routes/accounts.js`). Tokens only go IN: no answer has one. */
   accountPool: {
@@ -1098,7 +1188,10 @@ export const api = {
     list: (force = false) => request<AccountPool>(`/accounts${force ? "?force=1" : ""}`),
     /** POST /api/accounts — admin, with their OWN password again. */
     /** GET /api/accounts/profiles — saved switch-user logins that can be moved in. */
-    profiles: () => request<{ profiles: PoolProfile[] }>("/accounts/profiles"),
+    profiles: (tool: PoolTool = "claude") =>
+      request<{ profiles: PoolProfile[] }>(
+        tool === "codex" ? "/accounts/profiles?tool=codex" : "/accounts/profiles"
+      ),
     add: (body: PoolAccountInput, currentPassword: string) =>
       request<{ account: { name: string } }>("/accounts", {
         method: "POST",
@@ -1124,6 +1217,24 @@ export const api = {
         method: "DELETE",
         body: JSON.stringify({ tool, currentPassword }),
       }),
+    /** POST /api/accounts/groups — admin: a new, empty pool group. */
+    createGroup: (name: string, currentPassword: string) =>
+      request<{ group: { id: number; name: string } }>("/accounts/groups", {
+        method: "POST",
+        body: JSON.stringify({ name, currentPassword }),
+      }),
+    /** PATCH /api/accounts/groups/:id — admin: each part given is set exactly. */
+    updateGroup: (id: number, body: PoolGroupPatch, currentPassword: string) =>
+      request<{ group: PoolGroup }>(`/accounts/groups/${id}`, {
+        method: "PATCH",
+        body: JSON.stringify({ ...body, currentPassword }),
+      }),
+    /** DELETE /api/accounts/groups/:id — its members go back to the shared pool. */
+    deleteGroup: (id: number, currentPassword: string) =>
+      request<{ ok: true }>(`/accounts/groups/${id}`, {
+        method: "DELETE",
+        body: JSON.stringify({ currentPassword }),
+      }),
   },
   // ───────────────────────── Updates / self-update API ─────────────────────────
   /** Self-update status: whether this install is a git clone and, if so,
@@ -2210,7 +2321,8 @@ export const api = {
      * each one contributes (skills/agents/commands/hooks counts).
      * @returns {@link CcPluginsResponse} — the manifest path/status plus plugins.
      */
-    plugins: () => request<CcPluginsResponse>("/cc-config/plugins"),
+    plugins: (cwd?: string) =>
+      request<CcPluginsResponse>(`/cc-config/plugins${ccQuery(undefined, cwd)}`),
     /**
      * GET /api/cc-config/mcp - configured MCP servers, user and project-scoped.
      * @returns {@link CcMcpResponse} — servers split into `user`/`projectScoped`.
@@ -3006,6 +3118,11 @@ export const api = {
         method: "POST",
         body: JSON.stringify({ replace }),
       }),
+    /** POST /api/artifacts/:id/uninstall — a skill moved aside, a plugin `claude plugin uninstall`. */
+    uninstall: (id: number) =>
+      request<{ uninstalled: string; paths: string[] }>(`/artifacts/${id}/uninstall`, {
+        method: "POST",
+      }),
     /** GET /api/artifacts/:id/installs — who installed it, when, and where. */
     installs: (id: number) => request<ArtifactInstalls>(`/artifacts/${id}/installs`),
     /** One of the snapshot's own files, served sandboxed. */
@@ -3045,6 +3162,14 @@ export const api = {
   aiTools: {
     /** GET /api/ai-tools - the catalog, what is installed, enabled, and the default. */
     list: () => request<AiToolsView>("/ai-tools"),
+    /** GET /api/ai-tools/omp-sharing - the host's Oh My Pi login shared with members (S3). */
+    ompSharing: () => request<OmpSharingState>("/ai-tools/omp-sharing"),
+    /** PUT /api/ai-tools/omp-sharing - an admin's switch. */
+    setOmpSharing: (enabled: boolean) =>
+      request<OmpSharingState>("/ai-tools/omp-sharing", {
+        method: "PUT",
+        body: JSON.stringify({ enabled }),
+      }),
     /** POST /api/ai-tools/refresh - re-read the login shell's PATH and re-detect. */
     refresh: () => request<AiToolsView>("/ai-tools/refresh", { method: "POST" }),
     /** PUT /api/ai-tools/:id - enable/disable a tool, make it the default, or set its default model ("" clears). */
@@ -4301,6 +4426,16 @@ export interface ArtifactCandidate {
   pinned: boolean;
 }
 
+/** `GET /api/ai-tools/omp-sharing` — never a token. */
+export interface OmpSharingState {
+  /** Server mode with per-user Linux accounts (S3): the only place it applies. */
+  available: boolean;
+  enabled: boolean;
+  installed: boolean;
+  broker: { running: boolean; error?: string | null };
+  gateway: { running: boolean; port?: number; error?: string | null };
+}
+
 export interface ArtifactSettings {
   serverMode: boolean;
   canShare: boolean;

client/src/lib/artifactView.ts

@@ -0,0 +1,227 @@
+/**
+ * @file artifactView.ts
+ * @description What makes a file an artifact, Claude Desktop's way, and how
+ * one is shown: its kind from its name (a page, an image, a diagram, a React
+ * component, a document, a table, code), the sandboxed document an HTML,
+ * SVG, Mermaid or React artifact runs in (an iframe `srcdoc` with no
+ * same-origin access, its libraries from a pinned CDN build, as Claude's own
+ * artifacts load theirs), a CSV's rows, and the versions a conversation's
+ * Write/Edit calls left of one file — rebuilt from their own inputs, so no
+ * server keeps copies.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import type { TranscriptMessage } from "./types";
+
+export type ArtifactKind =
+  "html" | "svg" | "markdown" | "mermaid" | "react" | "csv" | "image" | "code";
+
+const EXT = (p: string) =>
+  (/\.([A-Za-z0-9]+)$/.exec(p.split(/[\\/]/).pop() || "")?.[1] || "").toLowerCase();
+
+/** The kind a file shows as. */
+export function artifactKind(path: string): ArtifactKind {
+  const e = EXT(path);
+  if (e === "html" || e === "htm") return "html";
+  if (e === "svg") return "svg";
+  if (e === "md" || e === "markdown" || e === "mdx") return "markdown";
+  if (e === "mmd" || e === "mermaid") return "mermaid";
+  if (e === "jsx" || e === "tsx") return "react";
+  if (e === "csv" || e === "tsv") return "csv";
+  if (["png", "jpg", "jpeg", "gif", "webp", "avif", "bmp", "ico"].includes(e)) return "image";
+  return "code";
+}
+
+/** Kinds with a rendered Preview (the rest show their code only). */
+export const RENDERED: ReadonlySet<ArtifactKind> = new Set([
+  "html",
+  "svg",
+  "markdown",
+  "mermaid",
+  "react",
+  "csv",
+  "image",
+]);
+
+/** An edit worth a card in the conversation: a page, a document, a diagram, a
+ *  table — and a React component the model wrote whole (a `.tsx` it merely
+ *  edited is project code, not an artifact). */
+export function isArtifact(path: string, created: boolean): boolean {
+  const k = artifactKind(path);
+  if (k === "react") return created;
+  return k === "html" || k === "svg" || k === "markdown" || k === "mermaid" || k === "csv";
+}
+
+/** A code fence language for the Code tab. */
+export function artifactLang(path: string): string {
+  const e = EXT(path);
+  const map: Record<string, string> = {
+    htm: "html",
+    mmd: "text",
+    mermaid: "text",
+    md: "markdown",
+    mdx: "markdown",
+    jsx: "jsx",
+    tsx: "tsx",
+    js: "javascript",
+    mjs: "javascript",
+    cjs: "javascript",
+    ts: "typescript",
+    py: "python",
+    sh: "bash",
+    yml: "yaml",
+  };
+  return map[e] || e;
+}
+
+// Pinned builds (all on npm for well over two weeks), as Claude's own
+// artifacts load React, Tailwind and Mermaid from a CDN.
+const CDN = {
+  react: "https://cdn.jsdelivr.net/npm/react@18.3.1/umd/react.production.min.js",
+  reactDom: "https://cdn.jsdelivr.net/npm/react-dom@18.3.1/umd/react-dom.production.min.js",
+  babel: "https://cdn.jsdelivr.net/npm/@babel/standalone@7.26.4/babel.min.js",
+  tailwind: "https://cdn.tailwindcss.com/3.4.16",
+  mermaid: "https://cdn.jsdelivr.net/npm/mermaid@11.4.1/dist/mermaid.esm.min.mjs",
+};
+
+/** Text safe inside a `<script>` element. */
+const scriptSafe = (s: string) => s.replace(/<\/(script)/gi, "<\\/$1");
+const htmlEscape = (s: string) =>
+  s.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]!);
+
+/** Shown inside the frame when the artifact itself fails. */
+const ERROR_BOX = `<pre id="__err" style="display:none;margin:16px;padding:12px;border-radius:8px;background:#fee2e2;color:#991b1b;font:12px/1.5 ui-monospace,monospace;white-space:pre-wrap"></pre>
+<script>window.addEventListener("error",function(e){var b=document.getElementById("__err");if(b){b.style.display="block";b.textContent=String(e.message||e.error||e);}});</script>`;
+
+/** The document a rendered artifact runs in (null: it is not a frame kind). */
+export function artifactDocument(kind: ArtifactKind, source: string, dark: boolean): string | null {
+  switch (kind) {
+    case "html":
+      return /<html[\s>]|<!doctype/i.test(source)
+        ? source
+        : `<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"></head><body>${source}</body></html>`;
+    case "svg":
+      return `<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%}body{display:flex;align-items:center;justify-content:center;background:${dark ? "#1f1f1f" : "#fff"}}svg{max-width:100%;max-height:100vh;height:auto}</style></head><body>${source}</body></html>`;
+    case "mermaid":
+      return `<!doctype html><html><head><meta charset="utf-8"><style>body{margin:0;padding:16px;background:${dark ? "#1f1f1f" : "#fff"};display:flex;justify-content:center}</style></head><body>${ERROR_BOX}<pre class="mermaid">${htmlEscape(source)}</pre>
+<script type="module">import mermaid from "${CDN.mermaid}";mermaid.initialize({startOnLoad:false,theme:${dark ? '"dark"' : '"default"'},securityLevel:"strict"});mermaid.run().catch(function(e){var b=document.getElementById("__err");b.style.display="block";b.textContent=String(e&&e.message||e);});</script></body></html>`;
+    case "react":
+      return `<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="${CDN.react}"></script><script src="${CDN.reactDom}"></script><script src="${CDN.babel}"></script><script src="${CDN.tailwind}"></script></head>
+<body><div id="root"></div>${ERROR_BOX}
+<script>
+(function(){
+  var src = ${JSON.stringify(scriptSafe(source))};
+  var mods = { react: window.React, "react-dom": window.ReactDOM, "react-dom/client": window.ReactDOM };
+  function req(name){ if (mods[name]) return mods[name]; throw new Error("This preview does not provide \\"" + name + "\\" — only react and react-dom are available."); }
+  try {
+    var out = Babel.transform(src, { filename: "Artifact.tsx", presets: [["typescript", { isTSX: true, allExtensions: true }], "react"], plugins: ["transform-modules-commonjs"] }).code;
+    var module = { exports: {} };
+    new Function("require", "module", "exports", "React", out)(req, module, module.exports, window.React);
+    var C = module.exports.default || module.exports.App || Object.values(module.exports).find(function(v){ return typeof v === "function"; });
+    if (!C) throw new Error("No component exported: export a default React component.");
+    ReactDOM.createRoot(document.getElementById("root")).render(React.createElement(C));
+  } catch (e) { var b = document.getElementById("__err"); b.style.display = "block"; b.textContent = String(e && e.message || e); }
+})();
+</script></body></html>`;
+    default:
+      return null;
+  }
+}
+
+/** The sandbox a frame kind gets: scripts but never the dashboard's origin
+ *  (no `allow-same-origin`), and none at all for an SVG. */
+export const frameSandbox = (kind: ArtifactKind) =>
+  kind === "svg" ? "" : "allow-scripts allow-forms allow-modals allow-popups allow-downloads";
+
+/** A CSV/TSV's rows (quoted fields, doubled quotes, newlines inside quotes). */
+export function parseCsv(text: string, sep = ","): string[][] {
+  const rows: string[][] = [];
+  let row: string[] = [];
+  let field = "";
+  let quoted = false;
+  for (let i = 0; i < text.length; i++) {
+    const c = text[i]!;
+    if (quoted) {
+      if (c === '"' && text[i + 1] === '"') {
+        field += '"';
+        i++;
+      } else if (c === '"') quoted = false;
+      else field += c;
+    } else if (c === '"' && field === "") quoted = true;
+    else if (c === sep) {
+      row.push(field);
+      field = "";
+    } else if (c === "\n" || c === "\r") {
+      if (c === "\r" && text[i + 1] === "\n") i++;
+      row.push(field);
+      rows.push(row);
+      row = [];
+      field = "";
+    } else field += c;
+  }
+  if (field !== "" || row.length) {
+    row.push(field);
+    rows.push(row);
+  }
+  return rows;
+}
+
+/** One version of a file, as a Write/Edit call left it. */
+export interface ArtifactVersion {
+  /** The call that made it. */
+  toolUseId: string | null;
+  timestamp: string | null;
+  /** null: the call is known, its result text is not (an edit to a file
+   *  whose earlier text the conversation never showed). */
+  content: string | null;
+}
+
+const samePath = (a: unknown, b: string) =>
+  typeof a === "string" && a.replace(/\\/g, "/") === b.replace(/\\/g, "/");
+
+/** Applies one Edit (old → new, once or everywhere) to known text. */
+function applyEdit(text: string, oldS: unknown, newS: unknown, all: unknown): string | null {
+  if (typeof oldS !== "string" || typeof newS !== "string") return null;
+  if (!text.includes(oldS)) return null;
+  return all ? text.split(oldS).join(newS) : text.replace(oldS, () => newS);
+}
+
+/**
+ * The versions of `path` in a conversation, oldest first: each successful
+ * Write gives its whole text, and each Edit/MultiEdit after a known text gives
+ * that text with its edits applied. A call whose input the transcript cut, or
+ * an edit to text never shown, is a version of unknown content (the current
+ * file on disk stands in for the newest one).
+ */
+export function artifactVersions(messages: TranscriptMessage[], path: string): ArtifactVersion[] {
+  const failed = new Set<string>();
+  for (const m of messages)
+    for (const c of m.content) if (c.type === "tool_result" && c.is_error && c.id) failed.add(c.id);
+  const out: ArtifactVersion[] = [];
+  let text: string | null = null;
+  for (const m of messages) {
+    if (m.type !== "assistant") continue;
+    for (const c of m.content) {
+      if (c.type !== "tool_use" || (c.id && failed.has(c.id))) continue;
+      const input = (c.input || {}) as Record<string, unknown>;
+      if (!samePath(input.file_path, path)) continue;
+      if (c.name === "Write") {
+        text = typeof input.content === "string" ? input.content : null;
+      } else if (c.name === "Edit") {
+        text =
+          text === null
+            ? null
+            : applyEdit(text, input.old_string, input.new_string, input.replace_all);
+      } else if (c.name === "MultiEdit") {
+        const edits = Array.isArray(input.edits) ? (input.edits as Record<string, unknown>[]) : [];
+        for (const e of edits) {
+          if (text === null) break;
+          text = applyEdit(text, e.old_string, e.new_string, e.replace_all);
+        }
+      } else continue;
+      out.push({ toolUseId: c.id ?? null, timestamp: m.timestamp, content: text });
+    }
+  }
+  return out;
+}

client/src/lib/chatUi.ts

@@ -1,6 +1,7 @@
 /**
- * @file chatUi.ts — whether a Claude/Codex session shows as a chat
- * (`PaneChat`, like Claude Desktop) or as its terminal. Each SESSION has its
+ * @file chatUi.ts — which tools' terminal panes have a Chat view
+ * (`CHAT_TOOLS`), and whether such a session shows as a chat (`PaneChat`,
+ * like Claude Desktop) or as its terminal. Each SESSION has its
  * own view (`useSessionChat`, toggled by `setSessionChat` from the pane's
  * chat/terminal button), kept in this browser's localStorage
  * (`agenthub.chatUi.sessions`, the newest `MAX_VIEWS`). The account's Chat UI
@@ -18,6 +19,19 @@ import { api } from "./api";
 
 export const CHAT_UI_KEY = "agenthub.chatUi";
 
+/** The tools whose terminal pane can show a chat: each one's pane learns its
+ *  session id (Claude's `--session-id`, the others' pollers through
+ *  `claimToolSessions`) and the server reads that session's conversation
+ *  (`GET /api/sessions/:id/transcript`). omp and Cursor send no hooks, so
+ *  their chat has no Stop button and follows at the pollers' pace. */
+export const CHAT_TOOLS: ReadonlySet<string> = new Set([
+  "claude",
+  "codex",
+  "omp",
+  "cursor",
+  "antigravity",
+]);
+
 export const VIEWS_KEY = "agenthub.chatUi.sessions";
 const MAX_VIEWS = 200;
 

client/src/lib/markdownView.ts

@@ -0,0 +1,29 @@
+/**
+ * @file markdownView — Settings → Appearance → "Open Markdown as": a viewer
+ * preference in `localStorage` (`agenthub.markdown.view`, synced to the
+ * account through `lib/userPrefs.ts`). Preview (the default) opens a `.md`
+ * file rendered; Raw opens its source. Read each time a viewer opens a file
+ * (the Files/Changes panel, the config file viewer, a chat artifact); the
+ * viewer's own Preview/Raw toggle still flips that one file.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+export const MARKDOWN_VIEW_KEY = "agenthub.markdown.view";
+
+/** True when a Markdown file opens rendered (the default). */
+export function readMarkdownPreview(): boolean {
+  try {
+    return window.localStorage.getItem(MARKDOWN_VIEW_KEY) !== "raw";
+  } catch {
+    return true;
+  }
+}
+
+export function writeMarkdownPreview(on: boolean) {
+  try {
+    if (on) window.localStorage.removeItem(MARKDOWN_VIEW_KEY);
+    else window.localStorage.setItem(MARKDOWN_VIEW_KEY, "raw");
+  } catch {
+    /* storage blocked — the default */
+  }
+}

client/src/lib/panePaste.ts

@@ -34,20 +34,24 @@ interface Pane {
   key?: (data: string) => void;
   /** `menuOnly`: null at once unless a row could be a menu's cursor row. */
   screen?: (menuOnly?: boolean) => PaneScreen | null;
+  /** The rows on screen as plain text, dim cells kept. */
+  lines?: () => string[];
 }
 const panes = new Map<string, Pane>();
 let lastFocused: string | null = null;
 
 /** Registers a mounted terminal (`visible`: is it on screen now; `key`: send
- *  raw input, as a key press; `screen`: its rows now); returns its unregister. */
+ *  raw input, as a key press; `screen`: its rows now; `lines`: the same as
+ *  plain text); returns its unregister. */
 export function registerPane(
   runId: string,
   paste: (text: string, submit?: boolean) => void,
   visible: () => boolean = () => true,
   key?: (data: string) => void,
-  screen?: (menuOnly?: boolean) => PaneScreen | null
+  screen?: (menuOnly?: boolean) => PaneScreen | null,
+  lines?: () => string[]
 ): () => void {
-  const entry = { paste, visible, key, screen };
+  const entry = { paste, visible, key, screen, lines };
   panes.set(runId, entry);
   return () => {
     if (panes.get(runId) === entry) panes.delete(runId);
@@ -59,6 +63,26 @@ export function notePaneFocus(runId: string): void {
   lastFocused = runId;
 }
 
+/** Who wants to hear that a pane drew something (its chat: the CLI is doing
+ *  something, so its transcript may have grown). */
+const outputListeners = new Map<string, Set<() => void>>();
+
+/** A terminal received output for `runId` (TerminalView, every PTY frame). */
+export function notePaneOutput(runId: string): void {
+  outputListeners.get(runId)?.forEach((fn) => fn());
+}
+
+/** Calls `fn` on every output `runId`'s terminal receives; returns its unregister. */
+export function onPaneOutput(runId: string, fn: () => void): () => void {
+  let set = outputListeners.get(runId);
+  if (!set) outputListeners.set(runId, (set = new Set()));
+  set.add(fn);
+  return () => {
+    set!.delete(fn);
+    if (!set!.size) outputListeners.delete(runId);
+  };
+}
+
 /** The tmux names of workspace `laneId`'s panes: `agenthub-lane-<id>[-slot]`. */
 function ofLane(runId: string, laneId: number): boolean {
   const base = `agenthub-lane-${laneId}`;
@@ -162,32 +186,47 @@ export function takeRunInput(runId: string): string {
 }
 
 /** One choice of a menu the CLI shows: `n` its number (null for Claude's
- *  unnumbered Submit row), `checked` a multiSelect box's state. */
+ *  unnumbered Submit / Next row), `checked` a multiSelect box's state. */
 export type PaneMenuOption = {
   n: number | null;
   label: string;
   hint: string;
   checked: boolean | null;
 };
+/** One question tab of an AskUserQuestion that asks several: `done` once it
+ *  has an answer (`☒`). */
+export type PaneMenuTab = { label: string; done: boolean };
 /** A menu the CLI asks with (AskUserQuestion, a permission or trust prompt,
  *  Codex's approval): `cursor` the row its `❯`/`›` is on, `typeAt` the
- *  "Type something" row (-1: none). */
+ *  "Type something" row (-1: none). `tabs` only when it asks several
+ *  questions (`← ☒ A  □ B  ✔ Submit →`), `tab` the one shown (-1: unknown).
+ *  `detail` what a permission prompt asks about (its tool, then the command),
+ *  when the screen shows it apart from the question. */
 export type PaneMenu = {
   question: string;
   options: PaneMenuOption[];
   cursor: number;
   multi: boolean;
   typeAt: number;
+  tabs?: PaneMenuTab[];
+  tab?: number;
+  detail?: string[];
 };
 
 const OPTION = /^ {0,4}([❯›][ \u00a0]?)? *(\d{1,2})\. +(.*)$/;
 /** A row only a menu shows: its cursor on a numbered option or Submit, or the
  *  "Enter to confirm" footer of Claude's unnumbered menus (the trust prompt). */
-export const MENU_CURSOR_ROW = /^ *(?:[❯›][ \u00a0]* *(?:\d{1,2}\. |Submit\s*$)|Enter to confirm)/;
-const SUBMIT = /^ *([❯›])?[ \u00a0]*Submit$/;
+export const MENU_CURSOR_ROW =
+  /^ *(?:[❯›][ \u00a0]* *(?:\d{1,2}\. |(?:Submit|Next)\s*$)|Enter to confirm)/;
+// The unnumbered button under a multiSelect's rows: Next while more questions
+// follow, Submit on the last one.
+const SUBMIT = /^ *([❯›])?[ \u00a0]*(Submit|Next)$/;
+const TAB_BAR = /^ *← +(.+?) +→ *$/;
 const RULE_ROW = /^ *[─╌]{3,} *$/;
+const DASHED_ROW = /^ *╌{3,} *$/;
 const CHECK = /^\[([ ✔])\] *(.*)$/;
 const PLACEHOLDER = /^Type something\.?$/;
+const COLUMN = /^(\S.*?\S) {2,}(\S.*)$/;
 
 /** The numbered menu at the bottom of `rows`, or null. A menu has two
  *  numbered rows or more from 1, the cursor on one of them, and no rule right
@@ -207,10 +246,13 @@ export function parsePaneMenu(rows: string[]): PaneMenu | null {
     const m = OPTION.exec(row);
     const s = m ? null : SUBMIT.exec(row);
     if (m || s) {
-      const text = m ? (m[3] ?? "") : "Submit";
+      const text = m ? (m[3] ?? "") : (s?.[2] ?? "Submit");
       const c = m ? CHECK.exec(text) : null;
-      const label = c ? (c[2] ?? "") : text;
-      const h = hint.join(" ");
+      // Codex's pickers (`/model`, `/permissions`) draw each row's
+      // description in a column after the name: split it off as the hint.
+      const col = COLUMN.exec(c ? (c[2] ?? "") : text);
+      const label = col ? col[1]! : c ? (c[2] ?? "") : text;
+      const h = [col?.[2], ...hint].filter(Boolean).join(" ");
       options.unshift({
         n: m ? Number(m[2]) : null,
         label,
@@ -239,15 +281,47 @@ export function parsePaneMenu(rows: string[]): PaneMenu | null {
   const lines: string[] = [];
   for (; q >= 0 && r[q] && !RULE_ROW.test(r[q]!) && lines.length < 4; q--)
     lines.unshift(r[q]!.trim());
+  const question = lines.join("\n");
+  const tabs = tabBar(r.slice(Math.max(0, q - 4), Math.max(0, q + 1)));
+  const low = question.toLowerCase();
+  // What a permission prompt asks about: Claude draws the tool and its
+  // command over a dashed rule above the question, up to the dialog's top rule.
+  const detail: string[] = [];
+  let d = q;
+  while (d >= 0 && !r[d]) d--;
+  if (d >= 0 && DASHED_ROW.test(r[d]!))
+    for (d--; d >= 0 && !RULE_ROW.test(r[d]!) && detail.length < 12; d--)
+      if (r[d]) detail.unshift(r[d]!.trim());
   return {
-    question: lines.join("\n"),
+    question,
     options,
     cursor: options.length - cursor,
     multi: options.some((o) => o.checked !== null),
     typeAt: typeRow(options),
+    ...(tabs.length > 1
+      ? { tabs, tab: tabs.findIndex((t) => low.startsWith(t.label.toLowerCase())) }
+      : {}),
+    ...(detail.length ? { detail } : {}),
   };
 }
 
+/** The question tabs of a multi-question AskUserQuestion, read off its bar
+ *  (`←  ☒ Critical  □ High 1/3  ✔ Submit  →`) among `rows`; the Submit tab is
+ *  no question. [] when there is no bar. */
+function tabBar(rows: string[]): PaneMenuTab[] {
+  for (let i = rows.length - 1; i >= 0; i--) {
+    const m = TAB_BAR.exec(rows[i] ?? "");
+    if (!m) continue;
+    return (m[1] ?? "")
+      .split(/(?=[☒☐□✔☑■] )/)
+      .map((x) => x.trim())
+      .filter(Boolean)
+      .map((x) => ({ label: x.slice(1).trim(), done: /^[☒✔☑■]/.test(x) }))
+      .filter((t) => t.label && t.label !== "Submit");
+  }
+  return [];
+}
+
 const BARE_CURSOR = /^( {0,4})❯[ \u00a0]+(\S.*)$/;
 
 /** Claude's UNNUMBERED menu at the bottom of `r` (the folder-trust prompt:
@@ -291,6 +365,26 @@ function typeRow(options: PaneMenuOption[]): number {
   return -1;
 }
 
+/** The status line a tool's TUI shows only while a turn runs, read off its
+ *  binary's own strings: Claude's and Codex's `esc to interrupt`, agy's
+ *  `Thinking… (3s · esc to cancel)` — in parentheses after an ellipsis, so
+ *  Claude's permission footer (`Esc to cancel · Tab to amend`) is not it. A
+ *  tool missing here (omp, Cursor) has no line we know. */
+export const BUSY_LINE: Readonly<Record<string, RegExp>> = {
+  claude: /\besc to interrupt\b/i,
+  codex: /\besc to interrupt\b/i,
+  antigravity: /…\s*\([^)]*\besc to cancel\)/i,
+};
+
+/** Whether `runId`'s pane shows `tool` at work now (its BUSY_LINE), or null
+ *  when the tool's line is unknown or the pane is not mounted. */
+export function readRunBusy(runId: string, tool: string): boolean | null {
+  const re = BUSY_LINE[tool];
+  const p = panes.get(runId);
+  if (!re || !p?.lines) return null;
+  return p.lines().some((l) => re.test(l));
+}
+
 /** The menu `runId`'s visible pane shows now, or null. */
 export function readRunMenu(runId: string): PaneMenu | null {
   const p = panes.get(runId);
@@ -322,6 +416,16 @@ export function chooseRunOption(runId: string, menu: PaneMenu, index: number): b
   return true;
 }
 
+/** Moves a multi-question AskUserQuestion to its previous (-1) or next (1)
+ *  question tab, the arrows Claude's footer names. False when the pane is not
+ *  visible or not attached. */
+export function stepRunMenu(runId: string, dir: -1 | 1): boolean {
+  const p = panes.get(runId);
+  if (!p?.visible() || !p.key) return false;
+  p.key(dir < 0 ? "\x1b[D" : "\x1b[C");
+  return true;
+}
+
 /** Answers `menu` with typed text: the arrows to its "Type something" row,
  *  Ctrl+U over what is typed there already (one key clears it, however long
  *  it is), the text as a bracketed

client/src/lib/passwordRules.ts

@@ -0,0 +1,26 @@
+/**
+ * @file passwordRules.ts
+ * @description The rules a password an account picks for ITSELF must pass —
+ * a copy of `passwordProblems` in server/lib/auth.js, so the checklist can
+ * tick each one as it is typed. The server's copy is the one that decides
+ * (EWEAKPASSWORD); a password an admin gives someone else has no rules.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+export const PASSWORD_MIN_LENGTH = 8;
+
+export const PASSWORD_RULES = ["length", "lower", "upper", "digit", "symbol", "username"] as const;
+export type PasswordRule = (typeof PASSWORD_RULES)[number];
+
+/** The rules `password` fails (empty = it passes every one). */
+export function passwordProblems(password: string, username?: string): PasswordRule[] {
+  const out: PasswordRule[] = [];
+  if ([...password].length < PASSWORD_MIN_LENGTH) out.push("length");
+  if (!/\p{Ll}/u.test(password)) out.push("lower");
+  if (!/\p{Lu}/u.test(password)) out.push("upper");
+  if (!/\p{N}/u.test(password)) out.push("digit");
+  if (!/[^\p{L}\p{N}]/u.test(password)) out.push("symbol");
+  const name = (username || "").toLowerCase();
+  if (name && password.toLowerCase().includes(name)) out.push("username");
+  return out;
+}

client/src/lib/promptAttach.ts

@@ -7,7 +7,8 @@
  * last day (`recentUploads`, kept in this browser), and `claudeMention`, the
  * `@` form a file is handed to `claude` in, and what a browser on the
  * dashboard's own machine attaches by path instead of uploading
- * (`localCandidates`, checked by the server in `sameFilesHere` —
+ * (`localCandidates` — a drag's uri-list, or the plain-text paths a pasted
+ * file-manager copy carries —, checked by the server in `sameFilesHere` —
  * `POST /api/run/local-paths` —, `localAttachment`). An attachment is a path
  * sent with the prompt; that check is the one call here to the server.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
@@ -85,7 +86,47 @@ export function localCandidates(
 ): string[] | null {
   if (!isLocalBrowser()) return null;
   const paths = droppedFilePaths(dt);
-  return paths && paths.length === files.length ? paths : null;
+  if (paths) return paths.length === files.length ? paths : null;
+  // A PASTE of a file manager's copy has no uri-list: Chrome hands over the
+  // files and the paths as plain text only. Kept only when the names match
+  // the files one for one — `sameFilesHere` then checks the sizes.
+  const copied = textFilePaths(dt);
+  if (!copied || copied.length !== files.length) return null;
+  const base = (p: string) => p.split(/[\\/]/).pop() ?? "";
+  const want = files.map((f) => f.name).sort();
+  const have = copied.map(base).sort();
+  return have.every((n, i) => n === want[i]) ? copied : null;
+}
+
+/** A paste's plain text as absolute paths — every non-empty line a `file://`
+ *  URI or an absolute path (a file manager's copy) — else null. */
+function textFilePaths(dt: DataTransfer | null | undefined): string[] | null {
+  let lines: string[];
+  try {
+    lines = (dt?.getData("text/plain") ?? "")
+      .split(/\r?\n/)
+      .map((l) => l.trim())
+      .filter(Boolean);
+  } catch {
+    return null;
+  }
+  if (lines.length === 0) return null;
+  if (lines.every((l) => l.startsWith("file://"))) {
+    return droppedFilePaths({ getData: () => lines.join("\n") } as unknown as DataTransfer);
+  }
+  return lines.every((l) => /^(\/|[A-Za-z]:[\\/])/.test(l)) ? lines : null;
+}
+
+/** The `file://` paths a paste carries as text with no file beside it — a
+ *  file manager's copy, as some browsers paste it — or null: its uri-list,
+ *  else its plain text when every line is one. Plain absolute paths are NOT
+ *  taken here: with no file to compare against, they are text to paste. */
+export function copiedFilePaths(dt: DataTransfer | null | undefined): string[] | null {
+  const uris = droppedFilePaths(dt);
+  if (uris) return uris;
+  const text = dt?.getData("text/plain") ?? "";
+  if (!/^file:\/\//.test(text.trim())) return null;
+  return textFilePaths(dt);
 }
 
 /** Whether `paths` are the dropped `files` as the dashboard's machine sees
@@ -169,6 +210,22 @@ export function claudeMention(path: string): string {
   return /\s/.test(p) ? `@"${p}"` : `@${p}`;
 }
 
+const IMAGE_PATH = /\.(png|jpe?g|gif|webp)$/i;
+
+/** What a terminal pastes for files dropped or pasted on a `claude` pane, one
+ *  paste per entry, as a local terminal hands them over: the images as their
+ *  bare paths, each a paste of its own — the shape Claude Code turns into
+ *  `[Image #n]`, as it does a native drop — and every other file as an `@`
+ *  mention, together in one. A Windows path, or
+ *  one with a space, stays a mention — the bare path stayed plain text there
+ *  (see `claudeMention`). */
+export function claudePastes(paths: string[]): string[] {
+  const bare = (p: string) => IMAGE_PATH.test(p) && p.startsWith("/") && !/\s/.test(p);
+  const images = paths.filter(bare);
+  const others = paths.filter((p) => !bare(p)).map(claudeMention);
+  return [...images, others.join(" ")].filter(Boolean);
+}
+
 export const SKILL_MIME = "application/x-agenthub-skill";
 // A skill's name as Claude Code types it: `name` or `plugin:name`.
 const SKILL_RE = /^[\w.-]+(?::[\w.-]+)?$/;

client/src/lib/settingsSearch.ts

@@ -313,9 +313,21 @@ export const SETTINGS_INDEX: {
     to: "?tab=settings",
   },
   {
-    section: "agents/claude-code",
-    titleKey: "ccConfig:profiles.title",
-    keywords: ["account", "login", "quota", "switch"],
+    section: "agents",
+    titleKey: "toolProfiles.title",
+    keywords: [
+      "profile",
+      "account",
+      "login",
+      "quota",
+      "switch",
+      "codex",
+      "omp",
+      "pool",
+      "hồ sơ",
+      "tài khoản",
+    ],
+    to: "#tool-profiles",
   },
   { section: "agents/claude-code", titleKey: "ccConfig:backups.title", keywords: ["restore"] },
   { section: "agents/codex", titleKey: "codexHooks.title" },

client/src/lib/types.ts

@@ -1930,7 +1930,10 @@ export interface WSMessage {
     /** A pane ended; refetch GET /api/run/interrupted (no payload). */
     | "runs_interrupted"
     /** An artifact was added, changed, shared or deleted; refetch the list. */
-    | "artifact_changed";
+    | "artifact_changed"
+    /** A session's transcript grew on disk (`{session_id}`); a chat showing
+     *  it reads the new lines now. */
+    | "transcript_changed";
   /** The message body, whose concrete shape is selected by `type` above. */
   data:
     | Session

client/src/lib/userPrefs.ts

@@ -43,6 +43,7 @@ export const PREF_KEYS = [
   "agenthub.codex.bypass",
   "agenthub.tour",
   "agenthub.workspace.allTabs",
+  "agenthub.markdown.view",
 ] as const;
 const SYNCED = new Set<string>(PREF_KEYS);
 const PUSH_DELAY_MS = 400;

client/src/pages/AiToolConfig.tsx

@@ -243,14 +243,19 @@ export function AiToolConfig({ toolId }: { toolId: string }) {
   const [lanes, setLanes] = useState<Lane[]>([]);
 
   useEffect(() => {
+    // Switching tabs quickly must not show the previous tool's numbers.
+    let cancelled = false;
     api.aiTools
       .usage(toolId)
-      .then(setUsage)
-      .catch(() => setUsage(null));
+      .then((u) => !cancelled && setUsage(u))
+      .catch(() => !cancelled && setUsage(null));
     api.lanes
       .list()
-      .then((r) => setLanes(r.lanes.filter((l) => l.tool === toolId)))
-      .catch(() => setLanes([]));
+      .then((r) => !cancelled && setLanes(r.lanes.filter((l) => l.tool === toolId)))
+      .catch(() => !cancelled && setLanes([]));
+    return () => {
+      cancelled = true;
+    };
   }, [toolId]);
 
   if (!tool) return null;

client/src/pages/CcConfig.tsx

@@ -10,8 +10,10 @@
  * concurrent-write races with the live CLI. Its Overview also holds the
  * dashboard's own Claude Code settings (CLAUDE_HOME — editable, so the path
  * list leaves it out — hooks, pricing: `ClaudeAgentHubSettings`).
+ * The toolbar's Switch profile button links to Settings → AI tools → Profiles
+ * (`ToolProfilesSettings`), where every AI tool's login profiles live.
  * Every card with action buttons (plugins, marketplaces, MCP servers, memory
- * files, auth profiles, and the `MdItemList` artifacts) also opens a
+ * files, and the `MdItemList` artifacts) also opens a
  * right-click menu that repeats those buttons — same handlers, same
  * confirm path — plus Copy name/path.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
@@ -61,7 +63,8 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { useTranslation } from "react-i18next";
-import { useSearchParams } from "react-router-dom";
+import { Link, useSearchParams } from "react-router-dom";
+import { useSettingsHref } from "../lib/settingsLink";
 import { eventBus } from "../lib/eventBus";
 import {
   Boxes,
@@ -89,7 +92,6 @@ import {
   Trash2,
   Plus,
   Save,
-  ShieldAlert,
   Lock,
   History,
   Terminal,
@@ -153,14 +155,11 @@ import type {
   CcPluginItem,
   CcPluginsResponse,
   CcUpdateAllBatch,
-  CcProfile,
-  CcAccountIdentity,
-  CcProfileUsage,
-  CcUsageWindow,
   CcScope,
   CcSettingsSource,
   CcStatusline,
 } from "../lib/api";
+import { isSubmitEnter } from "../lib/keys";
 
 /** How an inline editor reports unsaved edits to the page. */
 type OnDirty = (id: string, dirty: boolean) => void;
@@ -450,7 +449,6 @@ export function CcConfig() {
   const [confirmDelete, setConfirmDelete] = useState<ConfirmDeleteState>(null);
   const setToast = showToast;
   const [backupsOpen, setBackupsOpen] = useState(false);
-  const [profilesOpen, setProfilesOpen] = useState(false);
   const [projectMemoryOpen, setProjectMemoryOpen] = useState(false);
 
   const scopeRef = useRef(scope);
@@ -682,7 +680,6 @@ export function CcConfig() {
           setAgenthubKey((k) => k + 1);
         }}
         onOpenBackups={() => setBackupsOpen(true)}
-        onOpenProfiles={() => setProfilesOpen(true)}
         wsConnected={wsConnected}
       />
 
@@ -811,7 +808,6 @@ export function CcConfig() {
         />
       )}
       {backupsOpen && <BackupsModal onClose={() => setBackupsOpen(false)} />}
-      {profilesOpen && <ProfilesModal onClose={() => setProfilesOpen(false)} onToast={setToast} />}
     </div>
   );
 }
@@ -823,20 +819,13 @@ interface HeaderProps {
   lastUpdated: Date | null;
   onRefresh: () => void;
   onOpenBackups: () => void;
-  onOpenProfiles: () => void;
   wsConnected: boolean;
 }
 
 /** The page's toolbar. No title of its own: the Settings hub already draws one. */
-function Header({
-  loading,
-  lastUpdated,
-  onRefresh,
-  onOpenBackups,
-  onOpenProfiles,
-  wsConnected,
-}: HeaderProps) {
+function Header({ loading, lastUpdated, onRefresh, onOpenBackups, wsConnected }: HeaderProps) {
   const { t } = useTranslation("ccConfig");
+  const settingsHref = useSettingsHref();
   const { t: tCommon } = useTranslation("common");
   const formatted = lastUpdated
     ? lastUpdated.toLocaleTimeString(undefined, {
@@ -863,14 +852,14 @@ function Header({
       </div>
       <div className="flex flex-col items-stretch lg:items-end gap-2 flex-shrink-0">
         <div className="flex items-center gap-2 justify-end flex-wrap">
-          <button
-            type="button"
-            onClick={onOpenProfiles}
+          {/* Every AI tool's login profiles live in one place: Settings → AI tools. */}
+          <Link
+            to={settingsHref("agents#tool-profiles")}
             className="inline-flex items-center gap-2 rounded-lg border border-border bg-surface-2 px-3 py-1.5 text-xs font-medium text-fg-secondary hover:bg-surface-3 transition-colors"
           >
             <UserCog className="w-3.5 h-3.5" />
             {t("profiles.openButton")}
-          </button>
+          </Link>
           <button
             type="button"
             onClick={onOpenBackups}
@@ -1807,7 +1796,7 @@ function PluginsPanel({
             value={input}
             onChange={(e) => setInput(e.target.value)}
             onKeyDown={(e) => {
-              if (e.key === "Enter") void submit();
+              if (isSubmitEnter(e)) void submit();
             }}
             placeholder={t("manage.installPlaceholder")}
             aria-label={t("manage.installTitle")}
@@ -2340,7 +2329,7 @@ function McpPanel({
             value={commandLine}
             onChange={(e) => setCommandLine(e.target.value)}
             onKeyDown={(e) => {
-              if (e.key === "Enter") void submit();
+              if (isSubmitEnter(e)) void submit();
             }}
             placeholder={t("manage.addMcpCommandPlaceholder")}
             aria-label={t("mcp.command")}
@@ -2351,7 +2340,7 @@ function McpPanel({
             value={url}
             onChange={(e) => setUrl(e.target.value)}
             onKeyDown={(e) => {
-              if (e.key === "Enter") void submit();
+              if (isSubmitEnter(e)) void submit();
             }}
             placeholder={t("manage.addMcpUrlPlaceholder")}
             aria-label={t("mcp.url")}
@@ -4226,7 +4215,7 @@ function MarketplacesPanel({
             value={source}
             onChange={(e) => setSource(e.target.value)}
             onKeyDown={(e) => {
-              if (e.key === "Enter") void add();
+              if (isSubmitEnter(e)) void add();
             }}
             placeholder={t("manage.addMarketplacePlaceholder")}
             aria-label={t("manage.addMarketplaceTitle")}
@@ -4737,476 +4726,6 @@ function CommandSnippet({ command, label }: { command: string; label?: string })
   );
 }
 
-// ── Auth profiles modal ────────────────────────────────────────────────
-//
-// Swaps which Anthropic account the local `claude` CLI runs as. Only the two
-// identity artifacts move (the OAuth blob + `oauthAccount`), so skills,
-// subagents, memory, plugins, marketplaces and settings all stay exactly where
-// they are — that is the whole point of the feature.
-//
-// The dashboard cannot log a new account in (only `claude auth login` can mint
-// tokens), so adding a profile is always "log in, then snapshot what the CLI
-// wrote" — hence a save button on the live account rather than an add-account
-// flow. There is no name field: the server derives the identifier, and the user
-// edits the display label in place by clicking it. That keeps the one string
-// the user types free of filename rules, so spaces and diacritics are fine.
-// The save button only appears while the live account is unsaved, because one
-// account is one profile — a second copy would just report itself active too.
-
-function ProfilesModal({
-  onClose,
-  onToast,
-}: {
-  onClose: () => void;
-  onToast: (t: NonNullable<Toast>) => void;
-}) {
-  const { t } = useTranslation("ccConfig");
-  const [items, setItems] = useState<CcProfile[] | null>(null);
-  const [active, setActive] = useState<CcAccountIdentity | null>(null);
-  /** `.claude.json`'s account, when it is not the one the live token belongs to. */
-  const [mismatchEmail, setMismatchEmail] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [busy, setBusy] = useState<string | null>(null);
-  /** `name` of the profile whose label is being edited inline, plus its draft. */
-  const [renaming, setRenaming] = useState<string | null>(null);
-  const [draft, setDraft] = useState("");
-  /** Quota per profile, keyed by `name`, fetched for every profile once the
-   *  list arrives — the whole point of the panel is comparing accounts, and one
-   *  button per row made the user do that by hand. The cost is bounded: the
-   *  live account is read from the CLI and never refreshed, and any other
-   *  profile is refreshed only when its token has actually expired, which
-   *  leaves it valid for hours of further opens. */
-  const [usage, setUsage] = useState<Record<string, CcProfileUsage>>({});
-  const [usageError, setUsageError] = useState<Record<string, string>>({});
-  /** Per profile, so one slow account does not freeze the other rows. */
-  const [usageBusy, setUsageBusy] = useState<Record<string, boolean>>({});
-  /** Names already auto-fetched, so the effect below fires once per profile. */
-  const autoFetched = useRef<Set<string>>(new Set());
-  const ctx = useContextMenu<CcProfile>();
-
-  const load = useCallback(async () => {
-    try {
-      const r = await api.ccConfig.profiles();
-      setItems(r.items);
-      setActive(r.active);
-      setMismatchEmail(r.mismatch ? r.mismatch.configEmail || "?" : null);
-      setError(null);
-    } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : "unknown");
-    }
-  }, []);
-
-  useEffect(() => {
-    void load();
-  }, [load]);
-
-  const panelRef = useRef<HTMLDivElement>(null);
-  const menuOpen = useRef(false);
-  menuOpen.current = !!ctx.menu;
-  // An open right-click menu takes this Escape for itself.
-  useDialog(true, panelRef, () => {
-    if (!menuOpen.current) onClose();
-  });
-
-  /** Run one profile mutation, then refresh the list. */
-  const run = useCallback(
-    async (key: string, fn: () => Promise<unknown>, success: string) => {
-      setBusy(key);
-      try {
-        await fn();
-        onToast({ kind: "success", message: success });
-        await load();
-      } catch (err: unknown) {
-        onToast({
-          kind: "error",
-          message: err instanceof Error ? err.message : "unknown error",
-        });
-      } finally {
-        setBusy(null);
-      }
-    },
-    [load, onToast]
-  );
-
-  const checkUsage = useCallback(async (name: string) => {
-    setUsageBusy((prev) => ({ ...prev, [name]: true }));
-    setUsageError((prev) => {
-      const next = { ...prev };
-      delete next[name];
-      return next;
-    });
-    try {
-      const result = await api.ccConfig.profileUsage(name);
-      setUsage((prev) => ({ ...prev, [name]: result }));
-    } catch (err: unknown) {
-      setUsageError((prev) => ({
-        ...prev,
-        [name]: err instanceof Error ? err.message : "unknown error",
-      }));
-    } finally {
-      setUsageBusy((prev) => {
-        const next = { ...prev };
-        delete next[name];
-        return next;
-      });
-    }
-  }, []);
-
-  // Every profile's quota, as soon as there is a list to ask about. Once per
-  // profile per opening: a retry is the row's own button, so a failed account
-  // is not re-asked on every render.
-  useEffect(() => {
-    if (!items) return;
-    for (const p of items) {
-      if (autoFetched.current.has(p.name)) continue;
-      autoFetched.current.add(p.name);
-      void checkUsage(p.name);
-    }
-  }, [items, checkUsage]);
-
-  const activeSaved = items?.some((p) => p.active) ?? false;
-
-  /** How many saved profiles hold the same account as `p`. */
-  const copies = (p: CcProfile) =>
-    items?.filter((q) => q.accountUuid && q.accountUuid === p.accountUuid).length ?? 1;
-  /** Deletable unless it is the ONLY saved copy of the live account — a
-   *  redundant copy has to be removable, or an accidental duplicate could
-   *  never be cleaned up. */
-  const deletable = (p: CcProfile) => !p.active || copies(p) > 1;
-  const startRename = (p: CcProfile) => {
-    setDraft(p.label);
-    setRenaming(p.name);
-  };
-  const switchTo = (p: CcProfile) =>
-    void run(
-      `switch:${p.name}`,
-      () => api.ccConfig.activateProfile(p.name),
-      t("profiles.switchSuccess", { name: p.label })
-    );
-  // A saved profile holds that account's OAuth credentials — deleting it
-  // cannot be undone from here, so it asks first.
-  const remove = async (p: CcProfile) => {
-    const ok = await confirmDialog({
-      title: t("profiles.deleteConfirmTitle", { name: p.label }),
-      message: t("profiles.deleteConfirmBody"),
-      confirmLabel: t("profiles.deleteButton"),
-    });
-    if (!ok) return;
-    void run(
-      `del:${p.name}`,
-      () => api.ccConfig.deleteProfile(p.name),
-      t("profiles.deleteSuccess", { name: p.label })
-    );
-  };
-  const pick = (fn: (p: CcProfile) => void) => () => {
-    const p = ctx.menu!.item;
-    ctx.close();
-    fn(p);
-  };
-
-  return (
-    <div
-      className="fixed inset-0 bg-surface-0/70 z-50 flex items-center justify-center p-4"
-      onClick={onClose}
-    >
-      <div
-        ref={panelRef}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="cc-profiles-title"
-        className="relative w-full max-w-2xl max-h-[85vh] rounded-xl border border-border bg-surface-1 flex flex-col"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="flex items-center gap-2 border-b border-border px-4 py-2.5">
-          <UserCog className="w-4 h-4 text-fg-muted" />
-          <span id="cc-profiles-title" className="text-sm font-medium text-fg-primary flex-1">
-            {t("profiles.title")}
-          </span>
-          <button
-            type="button"
-            onClick={onClose}
-            className="text-fg-secondary hover:text-fg-primary p-1 rounded-md hover:bg-surface-3"
-            aria-label={t("common.close")}
-          >
-            <X className="w-4 h-4" />
-          </button>
-        </div>
-
-        <div className="px-4 py-3 border-b border-border space-y-2">
-          <p className="text-[11px] text-fg-muted leading-relaxed">{t("profiles.subtitle")}</p>
-          <p className="text-[11px] text-fg-muted leading-relaxed">{t("profiles.warning")}</p>
-          {mismatchEmail && (
-            <p className="text-[11px] text-status-warning inline-flex items-start gap-1.5 leading-relaxed">
-              <ShieldAlert className="w-3.5 h-3.5 flex-shrink-0 mt-0.5" />
-              <span>
-                {t("profiles.mismatch", {
-                  config: mismatchEmail,
-                  owner: active?.email || active?.accountUuid || "?",
-                })}
-              </span>
-            </p>
-          )}
-        </div>
-
-        <div className="overflow-auto p-4 space-y-3">
-          {error && (
-            <div className="text-sm text-status-danger inline-flex items-center gap-2">
-              <AlertCircle className="w-4 h-4" />
-              {error}
-            </div>
-          )}
-
-          <div className="rounded-lg border border-border bg-surface-2 px-3 py-2.5 space-y-1">
-            <div className="text-[10px] uppercase tracking-wide text-fg-muted">
-              {t("profiles.activeLabel")}
-            </div>
-            {active ? (
-              <>
-                <div className="text-sm text-fg-primary">
-                  {active.email || active.displayName || active.accountUuid}
-                </div>
-                <IdentityLine identity={active} />
-              </>
-            ) : (
-              <div className="text-sm text-fg-muted">{t("profiles.noActive")}</div>
-            )}
-            {active && !activeSaved && (
-              <div className="pt-1.5 space-y-1.5">
-                <div className="text-[11px] text-status-warning">{t("profiles.unsavedActive")}</div>
-                <button
-                  disabled={busy !== null}
-                  onClick={() =>
-                    void run("save", () => api.ccConfig.saveProfile(), t("profiles.saveSuccess"))
-                  }
-                  className="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"
-                >
-                  <Save className="w-3 h-3" />
-                  {busy === "save" ? t("profiles.saving") : t("profiles.saveButton")}
-                </button>
-              </div>
-            )}
-          </div>
-
-          {items === null && !error && <SkeletonRows n={3} />}
-          {items !== null && items.length === 0 && (
-            <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) => (
-            <div
-              key={p.name}
-              data-testid={`profile-row-${p.name}`}
-              onContextMenu={(e) => ctx.open(e, p)}
-              className="rounded-lg border border-border bg-surface-2 px-3 py-2.5"
-            >
-              <div className="flex items-center gap-2 flex-wrap">
-                {renaming === p.name ? (
-                  <input
-                    autoFocus
-                    value={draft}
-                    onChange={(e) => setDraft(e.target.value)}
-                    onBlur={() => setRenaming(null)}
-                    onKeyDown={(e) => {
-                      if (e.key === "Escape") setRenaming(null);
-                      if (e.key !== "Enter") return;
-                      const next = draft.trim();
-                      setRenaming(null);
-                      if (!next || next === p.label) return;
-                      void run(
-                        `rename:${p.name}`,
-                        () => api.ccConfig.renameProfile(p.name, next),
-                        t("profiles.renameSuccess", { name: next })
-                      );
-                    }}
-                    maxLength={60}
-                    aria-label={t("profiles.renameLabel")}
-                    className="h-7 w-48 rounded-md border border-accent/40 bg-surface-1 px-2 text-xs text-fg-primary focus:outline-none focus:ring-1 focus:ring-accent/40"
-                  />
-                ) : (
-                  <button
-                    onClick={() => startRename(p)}
-                    title={t("profiles.renameHint")}
-                    className="text-xs font-medium text-fg-primary hover:text-accent inline-flex items-center gap-1 group"
-                  >
-                    {p.label}
-                    <Pencil className="w-3 h-3 opacity-0 group-hover:opacity-100 text-fg-muted" />
-                  </button>
-                )}
-                {p.active && (
-                  <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("profiles.activeBadge")}
-                  </span>
-                )}
-                <span className="text-xs text-fg-secondary truncate flex-1 min-w-0">
-                  {p.email || p.displayName || p.accountUuid}
-                </span>
-                {!p.active && (
-                  <button
-                    disabled={busy !== null}
-                    onClick={() => switchTo(p)}
-                    className="h-7 text-[11px] font-medium px-2.5 rounded-md border border-accent/30 bg-accent/10 hover:bg-accent/20 text-accent disabled:opacity-50"
-                  >
-                    {busy === `switch:${p.name}`
-                      ? t("profiles.switching")
-                      : t("profiles.switchButton")}
-                  </button>
-                )}
-                {deletable(p) && (
-                  <button
-                    type="button"
-                    disabled={busy !== null}
-                    onClick={() => void remove(p)}
-                    title={t("profiles.deleteButton")}
-                    aria-label={t("profiles.deleteButton")}
-                    className="h-7 w-7 inline-flex items-center justify-center rounded-md text-fg-muted hover:text-status-danger hover:bg-surface-3 disabled:opacity-50"
-                  >
-                    <Trash2 className="w-3.5 h-3.5" />
-                  </button>
-                )}
-              </div>
-              <IdentityLine identity={p} />
-              <ProfileUsageLine
-                usage={usage[p.name]}
-                error={usageError[p.name]}
-                busy={!!usageBusy[p.name]}
-                disabled={busy !== null || !!usageBusy[p.name]}
-                onCheck={() => void checkUsage(p.name)}
-              />
-              {p.savedAt && (
-                <div className="text-[10px] text-fg-muted mt-1">
-                  {t("profiles.savedAt", { time: new Date(p.savedAt).toLocaleString() })}
-                </div>
-              )}
-            </div>
-          ))}
-
-          {ctx.menu && (
-            <ContextMenu x={ctx.menu.x} y={ctx.menu.y} onClose={ctx.close} testId="profile-menu">
-              <MenuItem onSelect={pick(startRename)}>{t("profiles.rename")}</MenuItem>
-              {!ctx.menu.item.active && (
-                <MenuItem disabled={busy !== null} onSelect={pick(switchTo)}>
-                  {t("profiles.switchButton")}
-                </MenuItem>
-              )}
-              <MenuItem
-                disabled={busy !== null || !!usageBusy[ctx.menu.item.name]}
-                onSelect={pick((p) => void checkUsage(p.name))}
-              >
-                {t("profiles.usageCheck")}
-              </MenuItem>
-              {deletable(ctx.menu.item) && (
-                <>
-                  <MenuSeparator />
-                  <MenuItem
-                    danger
-                    disabled={busy !== null}
-                    testId="profile-menu-delete"
-                    onSelect={pick((p) => void remove(p))}
-                  >
-                    {t("profiles.deleteButton")}
-                  </MenuItem>
-                </>
-              )}
-            </ContextMenu>
-          )}
-
-          <div>
-            <div className="text-[10px] text-fg-muted mb-1">{t("profiles.loginHint")}</div>
-            <CommandSnippet command="claude auth login" />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/**
- * One profile's quota: a button until asked, then the two windows Anthropic
- * reports — the 5-hour session allowance and the 7-day one.
- *
- * Deliberately not fetched with the profile list. Reading a saved profile's
- * usage means refreshing its OAuth token, and that rotates the credentials on
- * disk (see `server/lib/cc-usage.js`), so it happens once per click and never
- * on a render or a poll.
- */
-function ProfileUsageLine({
-  usage,
-  error,
-  busy,
-  disabled,
-  onCheck,
-}: {
-  usage?: CcProfileUsage;
-  error?: string;
-  busy: boolean;
-  disabled: boolean;
-  onCheck: () => void;
-}) {
-  const { t } = useTranslation("ccConfig");
-  const pct = (w: CcUsageWindow | null | undefined) =>
-    w && w.utilization !== null ? `${Math.round(w.utilization)}%` : "—";
-  const resetTitle = (w: CcUsageWindow | null | undefined) =>
-    w && w.resetsAt
-      ? t("profiles.usageResets", { time: new Date(w.resetsAt).toLocaleString() })
-      : undefined;
-
-  if (error) {
-    return (
-      <div className="mt-1 flex items-center gap-2 text-[10px]">
-        <span className="text-status-danger">{error}</span>
-        <button
-          onClick={onCheck}
-          disabled={disabled}
-          className="text-fg-muted hover:text-accent disabled:opacity-50"
-        >
-          {t("profiles.usageRetry")}
-        </button>
-      </div>
-    );
-  }
-  if (!usage) {
-    return (
-      <button
-        onClick={onCheck}
-        disabled={disabled}
-        title={t("profiles.usageHint")}
-        className="mt-1 text-[10px] text-fg-muted hover:text-accent disabled:opacity-50"
-      >
-        {busy ? t("profiles.usageChecking") : t("profiles.usageCheck")}
-      </button>
-    );
-  }
-  return (
-    <div className="mt-1 flex items-center gap-2 text-[10px] text-fg-muted">
-      <span title={resetTitle(usage.fiveHour)}>
-        {t("profiles.usageFiveHour")}{" "}
-        <span className="text-fg-secondary">{pct(usage.fiveHour)}</span>
-      </span>
-      <span title={resetTitle(usage.sevenDay)}>
-        {t("profiles.usageSevenDay")}{" "}
-        <span className="text-fg-secondary">{pct(usage.sevenDay)}</span>
-      </span>
-      <button
-        onClick={onCheck}
-        disabled={disabled}
-        className="hover:text-accent disabled:opacity-50"
-      >
-        {busy ? t("profiles.usageChecking") : t("profiles.usageRefresh")}
-      </button>
-    </div>
-  );
-}
-
-/** Org / seat / plan line shared by the active card and each profile row. */
-function IdentityLine({ identity }: { identity: CcAccountIdentity }) {
-  const parts = [identity.organization, identity.seatTier, identity.subscriptionType].filter(
-    Boolean
-  );
-  if (parts.length === 0) return null;
-  return <div className="text-[10px] text-fg-muted mt-0.5">{parts.join(" · ")}</div>;
-}
-
 // ── Backups modal ──────────────────────────────────────────────────────
 
 function BackupsModal({ onClose }: { onClose: () => void }) {

client/src/pages/CodexConfig.tsx

@@ -95,6 +95,7 @@ import type {
   CodexScope,
   CodexSkill,
 } from "../lib/api";
+import { isSubmitEnter } from "../lib/keys";
 
 type TabKey = "overview" | "skills" | "agents" | "rules" | "memory" | "config" | "mcp" | "plugins";
 
@@ -1630,7 +1631,7 @@ function PluginsPanel({
               value={spec}
               onChange={(e) => setSpec(e.target.value)}
               onKeyDown={(e) => {
-                if (e.key === "Enter") void submitPlugin();
+                if (isSubmitEnter(e)) void submitPlugin();
               }}
               placeholder={t("plugins.installPlaceholder")}
               aria-label={t("plugins.installTitle")}
@@ -1710,7 +1711,7 @@ function PluginsPanel({
               value={mktUrl}
               onChange={(e) => setMktUrl(e.target.value)}
               onKeyDown={(e) => {
-                if (e.key === "Enter") void submitMarketplace();
+                if (isSubmitEnter(e)) void submitMarketplace();
               }}
               placeholder={t("plugins.addMarketplacePlaceholder")}
               aria-label={t("plugins.addMarketplaceTitle")}

client/src/pages/Dashboard.tsx

@@ -1092,7 +1092,7 @@ function AnalyticsTab() {
         >
           <AlertCircle className="w-4 h-4 flex-shrink-0" />
           <span className="flex-1 min-w-0">{loadError}</span>
-          <button onClick={load} className="btn-ghost text-xs">
+          <button onClick={refresh} disabled={spinning} className="btn-ghost text-xs">
             {t("common:retry")}
           </button>
         </div>
@@ -3133,7 +3133,7 @@ export function Dashboard() {
               <span className="flex-1 min-w-0">
                 {t("failedLoad")}: {error}
               </span>
-              <button onClick={load} className="btn-ghost text-xs">
+              <button onClick={refresh} disabled={spinning} className="btn-ghost text-xs">
                 {t("common:retry")}
               </button>
             </div>

client/src/pages/Sessions.tsx

@@ -561,7 +561,7 @@ export function Sessions({ embedded = false }: { embedded?: boolean } = {}) {
           <span className="flex-1 min-w-0">
             {t("failedList")}: {error}
           </span>
-          <button onClick={load} className="btn-ghost text-xs">
+          <button onClick={refresh} disabled={spinning} className="btn-ghost text-xs">
             {t("common:retry")}
           </button>
         </div>

client/src/pages/Settings.tsx

@@ -120,6 +120,7 @@ import { toast } from "../lib/toast";
 import { useDialog } from "../hooks/useDialog";
 import { useSpin } from "../hooks/useSpin";
 import { exportPrefs, importPrefs } from "../lib/prefsBackup";
+import { isSubmitEnter } from "../lib/keys";
 
 /** The fewest milliseconds between two activity-driven `/settings/info` reads:
  *  it COUNTs whole tables, and hooks fire many times a second while sessions run. */
@@ -1335,7 +1336,7 @@ function ClearDataDialog({
             value={typed}
             onChange={(e) => setTyped(e.target.value)}
             onKeyDown={(e) => {
-              if (e.key === "Enter" && ok && !busy) onConfirm();
+              if (isSubmitEnter(e) && ok && !busy) onConfirm();
             }}
             autoComplete="off"
             className="input mt-1 w-full font-mono text-sm"

client/src/pages/SettingsHub.tsx

@@ -69,6 +69,8 @@ import { AiToolsSettings } from "../components/settings/AiToolsSettings";
 import { AgentInstructionsSettings } from "../components/settings/AgentInstructionsSettings";
 import { SessionDefaultsSettings } from "../components/settings/SessionDefaultsSettings";
 import { ArtifactsHubSettings } from "../components/settings/ArtifactsHubSettings";
+import { ToolProfilesSettings } from "../components/settings/ToolProfilesSettings";
+import { OmpSharingSettings } from "../components/settings/OmpSharingSettings";
 import { PricingSettings } from "../components/settings/PricingSettings";
 import { WorktreeVisibilitySettings } from "../components/settings/WorktreeVisibilitySettings";
 import { useAiTools } from "../hooks/useAiTools";
@@ -83,6 +85,7 @@ import { AiToolIcon } from "../components/AiToolIcon";
 import { toast } from "../lib/toast";
 import { useAuth, usePermissions } from "../components/AuthGate";
 import { PageTabs } from "../components/PageTabs";
+import { isSubmitEnter } from "../lib/keys";
 
 const GROUPS = ["general", "agents", "data"] as const;
 type Group = (typeof GROUPS)[number];
@@ -295,8 +298,12 @@ export function SettingsHub({ section }: { section?: string } = {}) {
           <AgentInstructionsSettings />
           <SessionDefaultsSettings />
           <AiToolsSettings settingsHref={toolHref} />
+          {/* Every AI tool's login profiles, linked to the account pool. */}
+          <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 />
         </div>
       ),
     },
@@ -509,7 +516,7 @@ export function SettingsHub({ section }: { section?: string } = {}) {
         value={query}
         onChange={(e) => setQuery(e.target.value)}
         onKeyDown={(e) => {
-          if (e.key === "Enter" && results[0]) navigate(hrefOf(results[0]), nav);
+          if (isSubmitEnter(e) && results[0]) navigate(hrefOf(results[0]), nav);
           if (e.key === "Escape") setQuery("");
         }}
         placeholder={t("search.placeholder")}

client/src/pages/Users.tsx

@@ -14,7 +14,8 @@
  * account — moved to the Server tab, `MemberTmuxCard` in `ServerPanel`.)
  * Every change asks for the admin's OWN password again (the
  * server refuses without it); an analyst only reads. A row shows the display
- * name and email under the username when set; right-clicking a row offers
+ * name and email under the username when set, and "New password due" while
+ * the account still has a password an admin gave; right-clicking a row offers
  * Edit, Open home (in /files), and copying the username or email.
  * Laid out like the other list pages: icon header, a row of totals
  * (`StatCard`), the accounts in a `card` table, the audit log in a card.
@@ -273,6 +274,15 @@ export function Users({ embedded = false }: { embedded?: boolean } = {}) {
                           {t("disabled")}
                         </span>
                       )}
+                      {!u.disabled && u.mustChangePassword && (
+                        <span
+                          className="badge py-0.5 text-[11px] bg-status-warning/10 text-status-warning border-status-warning/20"
+                          title={t("mustChangeHint")}
+                          data-testid="user-must-change"
+                        >
+                          {t("mustChange")}
+                        </span>
+                      )}
                     </div>
                   </td>
                   <td className="px-5 py-3">

client/src/pages/Workspace.tsx

@@ -1105,10 +1105,18 @@ export function Workspace() {
       setFeatures([]);
       return;
     }
+    let cancelled = false;
     api.lanes.features
       .list(currentLane.id)
-      .then((data) => setFeatures(data.features))
-      .catch(() => setFeatures([]));
+      .then((data) => {
+        if (!cancelled) setFeatures(data.features);
+      })
+      .catch(() => {
+        if (!cancelled) setFeatures([]);
+      });
+    return () => {
+      cancelled = true;
+    };
   }, [currentLane?.id]);
 
   // Fetch the archived snapshot when the picker selects one — read-only, never
@@ -1138,10 +1146,18 @@ export function Workspace() {
       setProofFeatures([]);
       return;
     }
+    let cancelled = false;
     api.lanes.proof
       .list(currentLane.id)
-      .then((data) => setProofFeatures(data.features))
-      .catch(() => setProofFeatures([]));
+      .then((data) => {
+        if (!cancelled) setProofFeatures(data.features);
+      })
+      .catch(() => {
+        if (!cancelled) setProofFeatures([]);
+      });
+    return () => {
+      cancelled = true;
+    };
   }, [currentLane?.id, viewedFeatureSlug]);
 
   // Resolve the active feature slug: either the user-selected one, or the lane's active_feature_id

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

@@ -84,7 +84,15 @@ vi.mock("../../lib/api", async (importOriginal) => {
     api: {
       ...api,
       lanes: { list: vi.fn(async () => ({ lanes: [], counts: {} })) },
-      accountPool: { list: vi.fn(async () => ({ accounts: [], codex: [], blockPercent: 90 })) },
+      accountPool: {
+        list: vi.fn(async () => ({ accounts: [], codex: [], blockPercent: 90 })),
+        profiles: vi.fn(async () => ({ profiles: [] })),
+      },
+      aiTools: {
+        list: vi.fn(async () => ({ tools: [], default: null })),
+        ompSharing: vi.fn(async () => ({ available: false })),
+        iconUrl: (id: string) => `/api/ai-tools/${id}/icon`,
+      },
     },
   };
 });

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

@@ -10,8 +10,9 @@
  * server cannot read opens the by-hand form), a skill is uploaded from one
  * Markdown file under the name the user types, or written in the dialog.
  * A card's right-click menu runs the same actions (Preview, Delete). A file
- * the sandbox cannot show (Office, zip, PDF) offers Download only, and the
- * Add menu closes on Escape or a click outside it.
+ * the sandbox cannot show (Office, zip, PDF) offers Download only, the
+ * Add menu closes on Escape or a click outside it, the front page is shelved
+ * by kind until a category is picked, and a card opens its detail sheet.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 import { describe, it, expect, vi, beforeEach } from "vitest";
@@ -32,6 +33,7 @@ vi.mock("../../lib/api", () => ({
       update: vi.fn(),
       remove: vi.fn(),
       install: vi.fn(),
+      uninstall: vi.fn(),
       installs: vi.fn(),
       setInstallsEnabled: vi.fn(),
       skills: vi.fn(),
@@ -225,6 +227,66 @@ describe("Artifacts", () => {
     );
   });
 
+  it("splits the Hub and My library into yours and others'", async () => {
+    vi.mocked(api.artifacts.settings).mockResolvedValue({
+      serverMode: true,
+      canShare: true,
+      installsEnabled: true,
+      canManage: false,
+    });
+    vi.mocked(api.artifacts.list).mockResolvedValue({
+      items: [
+        item({ id: 1, title: "my-page", shared: true }),
+        item({
+          id: 2,
+          kind: "skill",
+          title: "their-skill",
+          mine: false,
+          owner: "an",
+          shared: true,
+        }),
+      ],
+    });
+    const user = userEvent.setup();
+    open();
+    // All is split too, others' first.
+    const allOthers = await screen.findByTestId("half-all.others");
+    expect(within(allOthers).getByText("their-skill")).toBeInTheDocument();
+    expect(
+      allOthers.compareDocumentPosition(screen.getByTestId("half-all.own")) &
+        Node.DOCUMENT_POSITION_FOLLOWING
+    ).toBeTruthy();
+    await user.click(await screen.findByRole("button", { name: "Hub" }));
+    const own = await screen.findByTestId("half-hub.own");
+    expect(own).toHaveTextContent("Shared by me");
+    expect(within(own).getByText("my-page")).toBeInTheDocument();
+    const others = screen.getByTestId("half-hub.others");
+    expect(within(others).getByText("their-skill")).toBeInTheDocument();
+    expect(within(others).queryByText("my-page")).toBeNull();
+
+    await user.click(screen.getByRole("button", { name: "My library" }));
+    expect(await screen.findByTestId("half-mine.others")).toHaveTextContent(
+      "Installed from others"
+    );
+    expect(within(screen.getByTestId("half-mine.own")).getByText("my-page")).toBeInTheDocument();
+  });
+
+  it("pages a long section 12 cards at a time", async () => {
+    vi.mocked(api.artifacts.list).mockResolvedValue({
+      items: Array.from({ length: 14 }, (_, i) =>
+        item({ id: i + 1, kind: "page", title: `p${i + 1}`, files: [] })
+      ),
+    });
+    const user = userEvent.setup();
+    open();
+    await screen.findByText("p1");
+    expect(screen.queryByText("p13")).toBeNull();
+    expect(screen.getByText("Showing 1-12 of 14")).toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Next" }));
+    expect(screen.getByText("p13")).toBeInTheDocument();
+    expect(screen.queryByText("p1")).toBeNull();
+  });
+
   it("lists who installed an artifact, when and where, from its install count", async () => {
     vi.mocked(api.artifacts.list).mockResolvedValue({
       items: [item({ id: 2, kind: "skill", title: "deploy", source: "deploy", installs: 3 })],
@@ -285,13 +347,43 @@ describe("Artifacts", () => {
     const card = await screen.findByTestId("artifact-2");
     expect(within(card).getByTestId("artifact-installed")).toHaveTextContent("Installed");
     expect(within(card).queryByRole("button", { name: "Install" })).toBeNull();
+    // No Reinstall anywhere, and Uninstall lives only in the ⋯ menu.
+    expect(within(card).queryByRole("button", { name: "Reinstall" })).toBeNull();
+    expect(within(card).queryByRole("button", { name: "Uninstall" })).toBeNull();
+    await userEvent.setup().click(within(card).getByRole("button", { name: "More actions" }));
+    const menu = screen.getByTestId("artifact-menu");
+    expect(within(menu).queryByRole("menuitem", { name: "Reinstall" })).toBeNull();
+    expect(within(menu).getByRole("menuitem", { name: "Uninstall" })).toBeInTheDocument();
+  });
+
+  it("uninstalls an installed plugin only after a confirmation", async () => {
+    vi.mocked(api.artifacts.list).mockResolvedValue({
+      items: [
+        item({ id: 4, kind: "plugin", title: "tool", source: "tool@market", installed: true }),
+      ],
+    });
+    vi.mocked(api.artifacts.uninstall).mockReset();
+    open();
+    const card = await screen.findByTestId("artifact-4");
+    const user = userEvent.setup();
+    vi.mocked(confirmDialog).mockResolvedValueOnce(false);
+    const uninstall = async () => {
+      await user.click(within(card).getByRole("button", { name: "More actions" }));
+      await user.click(
+        within(screen.getByTestId("artifact-menu")).getByRole("menuitem", { name: "Uninstall" })
+      );
+    };
+    await uninstall();
+    await waitFor(() => expect(confirmDialog).toHaveBeenCalled());
+    expect(api.artifacts.uninstall).not.toHaveBeenCalled();
 
     vi.mocked(confirmDialog).mockResolvedValueOnce(true);
-    vi.mocked(api.artifacts.install).mockResolvedValueOnce({
-      installed: "/h/.claude/skills/deploy",
+    vi.mocked(api.artifacts.uninstall).mockResolvedValueOnce({
+      uninstalled: "tool@market",
+      paths: [],
     });
-    await userEvent.setup().click(within(card).getByRole("button", { name: "Reinstall" }));
-    await waitFor(() => expect(api.artifacts.install).toHaveBeenLastCalledWith(2, true));
+    await uninstall();
+    await waitFor(() => expect(api.artifacts.uninstall).toHaveBeenCalledWith(4));
   });
 
   it("installs a skill only after a confirmation, and asks before replacing", async () => {
@@ -315,8 +407,8 @@ describe("Artifacts", () => {
   it("previews a file in a sandboxed iframe that may run nothing", async () => {
     const user = userEvent.setup();
     open();
-    await screen.findByText("report.html");
-    await user.click(screen.getAllByRole("button", { name: "Preview" })[0]!);
+    const card = await screen.findByTestId("artifact-1");
+    await user.click(within(card).getByRole("button", { name: "Preview" }));
     const frame = await screen.findByTestId("artifact-preview");
     expect(frame.getAttribute("sandbox")).toBe("");
     expect(frame.getAttribute("src")).toBe("/api/artifacts/1/raw?path=report.html");
@@ -425,4 +517,22 @@ describe("Artifacts", () => {
     await user.click(screen.getByText("report.html"));
     expect(screen.queryByRole("button", { name: "Skill" })).toBeNull();
   });
+
+  it("shelves the front page by kind, and a card opens its detail sheet", async () => {
+    const user = userEvent.setup();
+    open();
+    await screen.findByText("deploy");
+    const shelves = screen.getAllByRole("heading", { level: 2 }).map((h) => h.textContent);
+    expect(shelves).toEqual(["Skills1", "Files1"]);
+    await user.click(screen.getAllByRole("button", { name: "See all" })[0]!);
+    await waitFor(() =>
+      expect(api.artifacts.list).toHaveBeenLastCalledWith(
+        expect.objectContaining({ kind: "skill" })
+      )
+    );
+    await user.click(screen.getByText("deploy"));
+    const sheet = await screen.findByTestId("artifact-detail");
+    expect(within(sheet).getByText("/deploy")).toBeInTheDocument();
+    expect(within(sheet).getByRole("button", { name: "Install" })).toBeInTheDocument();
+  });
 });

client/src/pages/__tests__/CcConfig.contextMenu.test.tsx

@@ -1,8 +1,8 @@
 /**
  * @file Covers the right-click menus on the Claude Code config page: a menu
  * item runs the SAME action as the card's button — a plugin's uninstall still
- * takes two clicks before it reaches the API, and a profile's delete calls the
- * same endpoint the trash button does.
+ * takes two clicks before it reaches the API. (The profiles' menu moved with
+ * them to Settings → AI tools: ToolProfilesSettings.test.tsx.)
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -10,7 +10,6 @@ import { describe, it, expect, vi, afterEach } from "vitest";
 import { render, screen, act } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { MemoryRouter } from "react-router-dom";
-import { settleConfirm } from "../../lib/confirm";
 
 const ccConfigMock = vi.hoisted(() => {
   const r = (value: unknown) => vi.fn().mockResolvedValue(value);
@@ -124,41 +123,4 @@ describe("CcConfig — right-click menus", () => {
     expect(ccConfigMock.pluginAction).toHaveBeenCalledWith("ponytail@ponytail", "uninstall");
     expect(screen.queryByTestId("plugin-menu")).toBeNull();
   });
-
-  it("deletes a saved profile from its menu through the same API as the trash button", async () => {
-    const user = userEvent.setup();
-    render(
-      <MemoryRouter>
-        <CcConfig />
-      </MemoryRouter>
-    );
-    await settle();
-    await user.click(screen.getByRole("button", { name: /profile/i }));
-    await settle();
-
-    await user.pointer({ keys: "[MouseRight]", target: screen.getByTestId("profile-row-spare") });
-    await user.click(screen.getByTestId("profile-menu-delete"));
-    await settle();
-    // A saved login is never deleted on one click: it asks first.
-    expect(ccConfigMock.deleteProfile).not.toHaveBeenCalled();
-    await act(async () => settleConfirm(true));
-    await settle();
-    expect(ccConfigMock.deleteProfile).toHaveBeenCalledWith("spare");
-  });
-
-  it("offers no delete for the only saved copy of the live account", async () => {
-    const user = userEvent.setup();
-    render(
-      <MemoryRouter>
-        <CcConfig />
-      </MemoryRouter>
-    );
-    await settle();
-    await user.click(screen.getByRole("button", { name: /profile/i }));
-    await settle();
-
-    await user.pointer({ keys: "[MouseRight]", target: screen.getByTestId("profile-row-work") });
-    expect(screen.getByTestId("profile-menu")).toBeInTheDocument();
-    expect(screen.queryByTestId("profile-menu-delete")).toBeNull();
-  });
 });

client/src/pages/__tests__/CcConfig.profilesUsage.test.tsx

@@ -1,151 +0,0 @@
-/**
- * @file Covers the quota lines in the Claude Code auth-profile modal: opening
- * it asks for EVERY saved account's quota, not one row at a time.
- *
- * The one-at-a-time version made the user click through their own accounts to
- * answer the only question the panel exists for — which account still has room.
- * The other half is that each row fails on its own: an account whose saved
- * login has been superseded must not stop its neighbours from reporting.
- * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
- */
-
-import { describe, it, expect, vi, afterEach } from "vitest";
-import { render, screen, act } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { MemoryRouter } from "react-router-dom";
-
-const ccConfigMock = vi.hoisted(() => {
-  const r = (value: unknown) => vi.fn().mockResolvedValue(value);
-  const window = (utilization: number) => ({
-    utilization,
-    resetsAt: "2026-09-18T08:00:00Z",
-  });
-  return {
-    window,
-    overview: r({
-      roots: {
-        claudeHome: "/home/.claude",
-        projectClaudeDir: "/repo/.claude",
-        projectRoot: "/repo",
-      },
-      counts: {
-        skills: { user: 0, project: 0 },
-        agents: { user: 0, project: 0 },
-        commands: { user: 0, project: 0 },
-        outputStyles: { user: 0, project: 0 },
-        mcpServers: { user: 0, project: 0 },
-        hooks: {},
-        plugins: 0,
-        marketplaces: 0,
-        keybindings: 0,
-        settingsFiles: 0,
-        memory: 0,
-      },
-    }),
-    skills: r({ items: [] }),
-    agents: r({ items: [] }),
-    commands: r({ items: [] }),
-    outputStyles: r({ items: [] }),
-    memory: r({ items: [] }),
-    plugins: r({ manifestPath: "", manifestExists: false, plugins: [] }),
-    marketplaces: r({ marketplaces: [] }),
-    mcp: r({ mcp: [] }),
-    hooks: r({ hooks: [] }),
-    settings: r({ sources: [] }),
-    keybindings: r({ groups: [] }),
-    statusline: r({}),
-    hookScripts: r({ items: [] }),
-    backups: r({ items: [] }),
-    file: r({ ok: true, file: "", size: 0, mtime: 0, truncated: false, text: "" }),
-    pluginsAvailable: r({ installed: [], available: [] }),
-    updateAllStatus: r({ batch: null }),
-    // The modal's own list: two saved accounts, one of them live.
-    profiles: r({
-      items: [
-        { name: "work", label: "Work", active: true, accountUuid: "u1", email: "a@b.c" },
-        { name: "spare", label: "Spare", active: false, accountUuid: "u2", email: "d@e.f" },
-      ],
-      active: { accountUuid: "u1", email: "a@b.c" },
-    }),
-    profileUsage: vi.fn().mockImplementation(async (name: string) => {
-      if (name === "spare") {
-        throw new Error("this profile's saved login has been superseded");
-      }
-      return {
-        name,
-        refreshed: false,
-        fiveHour: window(8),
-        sevenDay: window(70),
-        checkedAt: "2026-09-17T16:00:00Z",
-      };
-    }),
-  };
-});
-
-vi.mock("../../lib/api", async (importOriginal) => {
-  const actual = await importOriginal<Record<string, unknown>>();
-  return {
-    ...actual,
-    api: { ...(actual.api as Record<string, unknown>), ccConfig: ccConfigMock },
-  };
-});
-
-vi.mock("../../lib/eventBus", () => ({
-  eventBus: {
-    subscribe: () => () => {},
-    publish: () => {},
-    onConnection: () => () => {},
-    connected: true,
-    setConnected: () => {},
-  },
-}));
-
-import { CcConfig } from "../CcConfig";
-
-async function settle() {
-  await act(async () => {
-    await new Promise((res) => setTimeout(res, 0));
-    await new Promise((res) => setTimeout(res, 0));
-  });
-}
-
-async function openProfiles() {
-  render(
-    <MemoryRouter>
-      <CcConfig />
-    </MemoryRouter>
-  );
-  await settle();
-  await userEvent.click(screen.getByRole("button", { name: /profile/i }));
-  await settle();
-  await settle();
-}
-
-afterEach(() => vi.clearAllMocks());
-
-describe("CcConfig — auth profile quotas", () => {
-  it("asks for every saved account's quota when the modal opens", async () => {
-    await openProfiles();
-
-    expect(ccConfigMock.profileUsage).toHaveBeenCalledWith("work");
-    expect(ccConfigMock.profileUsage).toHaveBeenCalledWith("spare");
-    expect(await screen.findByText("8%")).toBeInTheDocument();
-    expect(await screen.findByText("70%")).toBeInTheDocument();
-  });
-
-  it("reports the account that failed without costing the others their numbers", async () => {
-    await openProfiles();
-
-    expect(await screen.findByText(/saved login has been superseded/i)).toBeInTheDocument();
-    expect(screen.getByText("8%")).toBeInTheDocument();
-  });
-
-  it("asks once per profile, however many times the panel re-renders", async () => {
-    await openProfiles();
-    await settle();
-    await settle();
-
-    const asked = ccConfigMock.profileUsage.mock.calls.filter((c) => c[0] === "work");
-    expect(asked).toHaveLength(1);
-  });
-});