feat(pool): pin a user to one Claude/Codex pool account

An admin pins a server-mode user to one pool account per tool
(account_pins; PUT /api/accounts/pins with the password step-up and audit,
the Users page's Pin a user, agenthub accounts pin|unpin). The workspace
owner's pin wins over the balancer whenever the pane may use the account;
a pinned login still waits while another pool login holds the home.

client/src/components/users/AccountPoolCard.tsx

@@ -8,20 +8,23 @@
  * `.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.
+ * never sends it back. An admin can also pin a user to one account
+ * (`PUT /api/accounts/pins`): that user's new sessions skip the balancer.
  * @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, Plus, RefreshCw, Trash2 } from "lucide-react";
+import { KeyRound, Pin, PinOff, Plus, RefreshCw, Trash2 } from "lucide-react";
 import {
   api,
+  type AccountPin,
   type AccountPool,
   type PoolAccountInput,
   type PoolProfile,
   type PoolTool,
+  type ServerUserUsage,
 } from "../../lib/api";
 import { fmt, fmtCost, formatDateTime } from "../../lib/format";
 import { toast } from "../../lib/toast";
@@ -59,6 +62,8 @@ function rowsOf(pool: AccountPool): Row[] {
   ];
 }
 
+const pinsOf = (pool: AccountPool, tool: PoolTool): AccountPin[] => pool.pins?.[tool] ?? [];
+
 function errorText(t: TFunction<"users">, e: unknown): string {
   const err = e as Error & { code?: string };
   return err.code && t(`pool.errors.${err.code}`, { defaultValue: "" })
@@ -72,6 +77,8 @@ export function AccountPoolCard({ isAdmin }: { isAdmin: boolean }) {
   const [error, setError] = useState<string | null>(null);
   const [adding, setAdding] = useState(false);
   const [removing, setRemoving] = useState<Row | null>(null);
+  /** The pin dialog, opened empty or on one existing pin (to change or unpin it). */
+  const [pinning, setPinning] = useState<{ tool: PoolTool; userId?: number } | null>(null);
 
   const load = useCallback(
     (force = false) =>
@@ -91,6 +98,11 @@ export function AccountPoolCard({ isAdmin }: { isAdmin: boolean }) {
   }, [load]);
 
   const rows = pool ? rowsOf(pool) : [];
+  const pins = pool
+    ? (["claude", "codex"] as const).flatMap((tool) =>
+        pinsOf(pool, tool).map((p) => ({ ...p, tool }))
+      )
+    : [];
   const th = "px-5 py-2.5 text-[11px] font-semibold text-fg-muted uppercase tracking-wider";
 
   return (
@@ -112,6 +124,15 @@ export function AccountPoolCard({ isAdmin }: { isAdmin: boolean }) {
         >
           <RefreshCw className={`w-4 h-4 ${spinning ? "animate-spin" : ""}`} />
         </button>
+        {isAdmin && rows.length > 0 && (
+          <button
+            type="button"
+            onClick={() => setPinning({ tool: "claude" })}
+            className="btn-secondary"
+          >
+            <Pin className="w-4 h-4" /> {t("pool.pinUser")}
+          </button>
+        )}
         {isAdmin && (
           <button type="button" onClick={() => setAdding(true)} className="btn-primary">
             <Plus className="w-4 h-4" /> {t("pool.add")}
@@ -148,6 +169,16 @@ export function AccountPoolCard({ isAdmin }: { isAdmin: boolean }) {
                     <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}`)}
@@ -206,6 +237,33 @@ export function AccountPoolCard({ isAdmin }: { isAdmin: boolean }) {
           </table>
         </div>
       )}
+      {pins.length > 0 && (
+        <div className="border-t border-border px-5 py-3" data-testid="account-pins">
+          <h3 className="text-[11px] font-semibold text-fg-muted uppercase tracking-wider">
+            {t("pool.pinsTitle")}
+          </h3>
+          <ul className="mt-1.5 flex flex-wrap gap-2">
+            {pins.map((p) => (
+              <li key={`${p.tool}:${p.userId}`} className="badge gap-1.5 text-xs text-fg-secondary">
+                <Pin className="h-3 w-3" />
+                {p.username} → {p.account}
+                <span className="text-fg-muted">({t(`pool.toolName.${p.tool}`)})</span>
+                {isAdmin && (
+                  <button
+                    type="button"
+                    onClick={() => setPinning({ tool: p.tool, userId: p.userId })}
+                    title={t("pool.unpin", { name: p.username })}
+                    aria-label={t("pool.unpin", { name: p.username })}
+                    className="text-fg-muted hover:text-fg-primary"
+                  >
+                    <PinOff className="h-3 w-3" />
+                  </button>
+                )}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
 
       {adding && (
         <AddAccountDialog
@@ -228,10 +286,172 @@ export function AccountPoolCard({ isAdmin }: { isAdmin: boolean }) {
           }}
         />
       )}
+      {pinning && pool && (
+        <PinUserDialog
+          pool={pool}
+          initial={pinning}
+          onClose={() => setPinning(null)}
+          onDone={(user, account) => {
+            toast.success(
+              account
+                ? t("pool.pinDone.pinned", { user, account })
+                : t("pool.pinDone.unpinned", { user })
+            );
+            setPinning(null);
+            void load();
+          }}
+        />
+      )}
     </section>
   );
 }
 
+/**
+ * Pin a user to one account of a tool, or unpin them ("None"). Opened on an
+ * existing pin it starts on that user with "None", so one click unpins.
+ */
+function PinUserDialog({
+  pool,
+  initial,
+  onClose,
+  onDone,
+}: {
+  pool: AccountPool;
+  initial: { tool: PoolTool; userId?: number };
+  onClose: () => void;
+  onDone: (user: string, account: string | null) => void;
+}) {
+  const { t } = useTranslation("users");
+  const [tool, setTool] = useState<PoolTool>(initial.tool);
+  const [users, setUsers] = useState<ServerUserUsage[] | null>(null);
+  const [userId, setUserId] = useState<number | null>(initial.userId ?? null);
+  const [account, setAccount] = useState("");
+  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 accounts = tool === "codex" ? pool.codex : pool.accounts;
+  const pinOf = (id: number | null, of: PoolTool) =>
+    pinsOf(pool, of).find((p) => p.userId === id)?.account ?? "";
+  const ready = userId != null && current.length > 0 && account !== pinOf(userId, tool);
+
+  const submit = async () => {
+    if (!ready || busy || userId == null) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const r = await api.accountPool.pin(tool, userId, account || null, current);
+      onDone(r.pin.username, r.pin.account);
+    } catch (e) {
+      setError(errorText(t, e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <ConfirmModal
+      open
+      title={t("pool.pinTitle")}
+      message={t("pool.pinHint")}
+      confirmLabel={t("pool.pinButton")}
+      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 (isSubmitEnter(e)) {
+            e.preventDefault();
+            void submit();
+          }
+        }}
+      >
+        <Field label={t("pool.tool")}>
+          <select
+            className="input w-full text-sm"
+            value={tool}
+            onChange={(e) => {
+              const next = e.target.value as PoolTool;
+              setTool(next);
+              setAccount(pinOf(userId, next));
+            }}
+            aria-label={t("pool.tool")}
+          >
+            <option value="claude">Claude Code</option>
+            <option value="codex">Codex</option>
+          </select>
+        </Field>
+        <Field label={t("pool.user")}>
+          <select
+            className="input w-full text-sm"
+            value={userId ?? ""}
+            onChange={(e) => {
+              const id = e.target.value ? Number(e.target.value) : null;
+              setUserId(id);
+              setAccount(pinOf(id, tool));
+            }}
+            aria-label={t("pool.user")}
+          >
+            <option value="">
+              {users === null ? t("pool.loadingUsers") : t("pool.chooseUser")}
+            </option>
+            {users?.map((u) => (
+              <option key={u.id} value={u.id}>
+                {u.username}
+                {u.disabled ? ` (${t("disabled")})` : ""}
+              </option>
+            ))}
+          </select>
+        </Field>
+        <Field label={t("pool.pinAccount")}>
+          <select
+            className="input w-full text-sm"
+            value={account}
+            onChange={(e) => setAccount(e.target.value)}
+            aria-label={t("pool.pinAccount")}
+            disabled={userId == null}
+          >
+            <option value="">{t("pool.noPin")}</option>
+            {accounts.map((a) => (
+              <option key={a.name} value={a.name}>
+                {a.name}
+                {"email" in a && a.email ? ` — ${a.email}` : ""}
+              </option>
+            ))}
+          </select>
+        </Field>
+        <Field label={t("yourPassword")} hint={t("yourPasswordHint")}>
+          <input
+            type="password"
+            className="input w-full text-sm"
+            value={current}
+            onChange={(e) => setCurrent(e.target.value)}
+            autoComplete="current-password"
+            aria-label={t("yourPassword")}
+          />
+        </Field>
+        {error && (
+          <p role="alert" className="text-xs text-status-danger">
+            {error}
+          </p>
+        )}
+      </div>
+    </ConfirmModal>
+  );
+}
+
 type ClaudeSource = "profile" | "credentials" | "token";
 
 function AddAccountDialog({