ui(pool): pick an account's users from its own Edit

Each account row in the Account pool card has a pencil: tick the users
whose sessions run on it (one moves off any other account, unticking sends
one back to the balancer). PUT /api/accounts/:name/users saves the set in one
transaction, audits each change and switches a Claude login into each added
user's home at once. The card-level switch button and pinned list are gone.

client/src/components/users/AccountPoolCard.tsx

@@ -8,16 +8,16 @@
  * `.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 admin can also switch a user to one account
- * (`PUT /api/accounts/pins`): that user's sessions skip the balancer, and a
- * Claude login goes into their home at once — no restart.
+ * 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.
  * @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, Pin, PinOff, Plus, RefreshCw, Trash2 } from "lucide-react";
+import { KeyRound, Pencil, Plus, RefreshCw, Trash2 } from "lucide-react";
 import {
   api,
   type AccountPin,
@@ -32,6 +32,7 @@ import { toast } from "../../lib/toast";
 import { isSubmitEnter } from "../../lib/keys";
 import { useSpin } from "../../hooks/useSpin";
 import { ConfirmModal } from "../ConfirmModal";
+import { Checkbox } from "../Checkbox";
 
 type Row = {
   tool: PoolTool;
@@ -78,8 +79,7 @@ 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 [editing, setEditing] = useState<Row | null>(null);
 
   const load = useCallback(
     (force = false) =>
@@ -99,11 +99,6 @@ 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 (
@@ -125,15 +120,6 @@ 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")}
@@ -220,7 +206,16 @@ export function AccountPoolCard({ isAdmin }: { isAdmin: boolean }) {
                     </div>
                   </td>
                   {isAdmin && (
-                    <td className="px-5 py-2 text-right">
+                    <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)}
@@ -238,34 +233,6 @@ 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
           onClose={() => setAdding(false)}
@@ -287,21 +254,22 @@ export function AccountPoolCard({ isAdmin }: { isAdmin: boolean }) {
           }}
         />
       )}
-      {pinning && pool && (
-        <PinUserDialog
+      {editing && pool && (
+        <EditAccountDialog
           pool={pool}
-          initial={pinning}
-          onClose={() => setPinning(null)}
-          onDone={(user, account, switched) => {
-            const key = !account
-              ? "unpinned"
-              : switched === "switched" || switched === "own-login" || switched === "expired"
-                ? switched
-                : "pinned";
-            (key === "own-login" || key === "expired" ? toast.info : toast.success)(
-              t(`pool.pinDone.${key}`, { user, account })
+          row={editing}
+          onClose={() => setEditing(null)}
+          onDone={(r) => {
+            const left = r.added.filter(
+              (u) => u.switched === "own-login" || u.switched === "expired"
             );
-            setPinning(null);
+            toast.success(t("pool.editDone", { name: editing.name }));
+            for (const u of left) {
+              toast.info(
+                t(`pool.pinDone.${u.switched}`, { user: u.username, account: editing.name })
+              );
+            }
+            setEditing(null);
             void load();
           }}
         />
@@ -311,25 +279,26 @@ export function AccountPoolCard({ isAdmin }: { isAdmin: boolean }) {
 }
 
 /**
- * Switch a user to one account of a tool, or back to automatic. Opened on an
- * existing pin it starts on that user with "Automatic", so one click unpins.
+ * 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
+ * them back to the least-used account. Saved in one request, password again.
  */
-function PinUserDialog({
+function EditAccountDialog({
   pool,
-  initial,
+  row,
   onClose,
   onDone,
 }: {
   pool: AccountPool;
-  initial: { tool: PoolTool; userId?: number };
+  row: Row;
   onClose: () => void;
-  onDone: (user: string, account: string | null, switched: string | null) => void;
+  onDone: (r: Awaited<ReturnType<typeof api.accountPool.setUsers>>) => void;
 }) {
   const { t } = useTranslation("users");
-  const [tool, setTool] = useState<PoolTool>(initial.tool);
+  const pins = pinsOf(pool, row.tool);
+  const initial = pins.filter((p) => p.account === row.name).map((p) => p.userId);
   const [users, setUsers] = useState<ServerUserUsage[] | null>(null);
-  const [userId, setUserId] = useState<number | null>(initial.userId ?? null);
-  const [account, setAccount] = useState("");
+  const [chosen, setChosen] = useState<Set<number>>(() => new Set(initial));
   const [current, setCurrent] = useState("");
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -341,18 +310,22 @@ function PinUserDialog({
       .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 changed = chosen.size !== initial.length || initial.some((id) => !chosen.has(id));
+  const ready = changed && current.length > 0;
+  const toggle = (id: number, on: boolean) =>
+    setChosen((prev) => {
+      const next = new Set(prev);
+      if (on) next.add(id);
+      else next.delete(id);
+      return next;
+    });
 
   const submit = async () => {
-    if (!ready || busy || userId == null) return;
+    if (!ready || busy) return;
     setBusy(true);
     setError(null);
     try {
-      const r = await api.accountPool.pin(tool, userId, account || null, current);
-      onDone(r.pin.username, r.pin.account, r.switched ?? null);
+      onDone(await api.accountPool.setUsers(row.tool, row.name, [...chosen], current));
     } catch (e) {
       setError(errorText(t, e));
     } finally {
@@ -363,9 +336,9 @@ function PinUserDialog({
   return (
     <ConfirmModal
       open
-      title={t("pool.pinTitle")}
-      message={t("pool.pinHint")}
-      confirmLabel={t("pool.pinButton")}
+      title={t("pool.edit", { name: row.name })}
+      message={t("pool.editHint")}
+      confirmLabel={t("pool.save")}
       cancelLabel={t("common:cancel")}
       destructive={false}
       busy={busy}
@@ -376,66 +349,48 @@ function PinUserDialog({
       <div
         className="mt-3 space-y-3"
         onKeyDown={(e) => {
-          if (isSubmitEnter(e)) {
+          if ((e.target as HTMLElement).tagName === "INPUT" && 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>
+        <div>
+          <span className="text-xs font-medium text-fg-secondary">{t("pool.users")}</span>
+          <div className="mt-1 max-h-56 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 elsewhere = pins.find((p) => p.userId === u.id && p.account !== row.name);
+              return (
+                <div key={u.id} className="px-3 py-2">
+                  <Checkbox
+                    checked={chosen.has(u.id)}
+                    onChange={(on) => toggle(u.id, on)}
+                    label={
+                      <span>
+                        {u.username}
+                        {u.disabled && (
+                          <span className="ml-1 text-fg-muted">({t("disabled")})</span>
+                        )}
+                        {elsewhere && (
+                          <span className="ml-1.5 text-[11px] text-fg-muted">
+                            {t("pool.onAccount", { account: elsewhere.account })}
+                          </span>
+                        )}
+                      </span>
+                    }
+                    labelClassName="text-sm text-fg-primary"
+                  />
+                </div>
+              );
+            })}
+          </div>
+        </div>
         <Field label={t("yourPassword")} hint={t("yourPasswordHint")}>
           <input
             type="password"

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

@@ -5,8 +5,8 @@
  * 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
- * sees no add or remove control. An admin switches a user to one account and
- * back to automatic, each with their own password; it shows on the accounts.
+ * sees no add or remove control. An account's Edit ticks the users who run on
+ * it, saved with the admin's own password; the users show on the account.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -20,7 +20,7 @@ const accountPool = vi.hoisted(() => ({
   add: vi.fn(),
   remove: vi.fn(),
   profiles: vi.fn(),
-  pin: vi.fn(),
+  setUsers: vi.fn(),
 }));
 const users = vi.hoisted(() => ({ list: vi.fn() }));
 vi.mock("../../../lib/api", async (importOriginal) => {
@@ -168,53 +168,42 @@ describe("AccountPoolCard", () => {
     );
   });
 
-  it("pins a user to an account and unpins them, with the admin's own password", async () => {
+  it("sets who runs on an account from its Edit, with the admin's own password", async () => {
     accountPool.list.mockResolvedValue({
       ...POOL,
-      pins: { claude: [{ userId: 8, username: "leo", account: "team-1" }], codex: [] },
+      pins: {
+        claude: [
+          { userId: 8, username: "leo", account: "team-1" },
+          { userId: 7, username: "mia", account: "team-0" },
+        ],
+        codex: [],
+      },
     });
-    accountPool.pin.mockResolvedValue({
-      pin: { userId: 7, username: "mia", account: "team-1" },
-      switched: "switched",
+    accountPool.setUsers.mockResolvedValue({
+      added: [{ userId: 7, username: "mia", switched: "switched" }],
+      removed: [{ userId: 8, username: "leo" }],
     });
     const user = userEvent.setup();
     render(<AccountPoolCard isAdmin />);
     expect(await screen.findByText("Used by: leo")).toBeInTheDocument();
-    await user.click(screen.getByRole("button", { name: /switch a user's account/i }));
+    expect(screen.queryByRole("button", { name: /switch a user/i })).toBeNull();
+    await user.click(screen.getByRole("button", { name: "Edit team-1" }));
     const dialog = await screen.findByRole("dialog");
-    await waitFor(() => expect(screen.getByRole("option", { name: "mia" })).toBeInTheDocument());
-    await user.selectOptions(screen.getByLabelText("User"), "7");
-    await user.selectOptions(screen.getByLabelText("Account"), "team-1");
-    const confirm = Array.from(dialog.querySelectorAll("button")).find(
-      (b) => b.textContent === "Switch"
+    const leo = await screen.findByRole("checkbox", { name: /leo/ });
+    const mia = screen.getByRole("checkbox", { name: /mia/ });
+    expect(leo).toHaveAttribute("aria-checked", "true");
+    expect(mia).toHaveAttribute("aria-checked", "false");
+    expect(screen.getByText("now on team-0")).toBeInTheDocument();
+    await user.click(mia);
+    await user.click(leo);
+    const save = Array.from(dialog.querySelectorAll("button")).find(
+      (b) => b.textContent === "Save"
     )!;
-    expect(confirm).toBeDisabled();
+    expect(save).toBeDisabled();
     await user.type(screen.getByLabelText("Your password"), "boss-pass");
-    await user.click(confirm);
+    await user.click(save);
     await waitFor(() =>
-      expect(accountPool.pin).toHaveBeenCalledWith("claude", 7, "team-1", "boss-pass")
-    );
-  });
-
-  it("unpins from the pinned list", async () => {
-    accountPool.list.mockResolvedValue({
-      ...POOL,
-      pins: { claude: [{ userId: 8, username: "leo", account: "team-1" }], codex: [] },
-    });
-    accountPool.pin.mockResolvedValue({
-      pin: { userId: 8, username: "leo", account: null },
-      switched: null,
-    });
-    const user = userEvent.setup();
-    render(<AccountPoolCard isAdmin />);
-    await user.click(await screen.findByRole("button", { name: "Back to automatic for leo" }));
-    const dialog = await screen.findByRole("dialog");
-    await user.type(screen.getByLabelText("Your password"), "boss-pass");
-    await user.click(
-      Array.from(dialog.querySelectorAll("button")).find((b) => b.textContent === "Switch")!
-    );
-    await waitFor(() =>
-      expect(accountPool.pin).toHaveBeenCalledWith("claude", 8, null, "boss-pass")
+      expect(accountPool.setUsers).toHaveBeenCalledWith("claude", "team-1", [7], "boss-pass")
     );
   });
 });

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

@@ -199,28 +199,18 @@
     },
     "refreshFailed": "refresh failed",
     "pinned": "Used by: {{users}}",
-    "pinUser": "Switch a user's account",
-    "pinTitle": "Switch a user's account",
-    "pinHint": "That user's sessions run on the chosen account instead of the least-used one — even when it is full. A Claude login is written into their home at once: sessions already running move to it at their next login check, with no restart. A setup-token or Codex account applies to new sessions.",
-    "pinButton": "Switch",
-    "user": "User",
-    "chooseUser": "Choose a user…",
     "loadingUsers": "Loading…",
-    "pinAccount": "Account",
-    "noPin": "Automatic — the least-used account",
-    "pinsTitle": "Switched users",
-    "unpin": "Back to automatic for {{name}}",
     "pinDone": {
-      "pinned": "{{user}} now runs on {{account}}",
-      "unpinned": "{{user}} is back on the least-used account",
-      "switched": "{{user}} switched to {{account}} — running sessions follow at their next login check",
       "own-login": "{{user}} signed in with their own login, which was left alone",
       "expired": "{{account}} has expired — {{user}}'s new sessions fall back to the least-used account"
     },
-    "toolName": {
-      "claude": "Claude",
-      "codex": "Codex"
-    }
+    "edit": "Edit {{name}}",
+    "editHint": "Tick the users whose sessions run on this account instead of the least-used one — even when it is full. A user on another account moves here. A Claude login is written into their home at once: sessions already running move to it at their next login check, with no restart. A setup-token or Codex account applies to new sessions. Untick to send a user back to the least-used account.",
+    "save": "Save",
+    "users": "Users on this account",
+    "noUsers": "No users yet.",
+    "onAccount": "now on {{account}}",
+    "editDone": "{{name}} saved"
   },
   "delete": {
     "button": "Delete user",

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

@@ -199,28 +199,18 @@
     },
     "refreshFailed": "làm mới lỗi",
     "pinned": "Đang dùng: {{users}}",
-    "pinUser": "Đổi tài khoản cho user",
-    "pinTitle": "Đổi tài khoản cho user",
-    "pinHint": "Phiên của user này chạy trên tài khoản đã chọn thay vì tài khoản ít tải nhất — kể cả khi nó đã đầy. Login Claude được ghi ngay vào home của họ: phiên đang chạy chuyển sang ở lần kiểm tra đăng nhập kế tiếp, không cần khởi động lại. Setup-token hoặc tài khoản Codex áp dụng cho phiên mới.",
-    "pinButton": "Đổi",
-    "user": "User",
-    "chooseUser": "Chọn user…",
     "loadingUsers": "Đang tải…",
-    "pinAccount": "Tài khoản",
-    "noPin": "Tự động — tài khoản ít tải nhất",
-    "pinsTitle": "User đã đổi tài khoản",
-    "unpin": "Trả {{name}} về tự động",
     "pinDone": {
-      "pinned": "{{user}} giờ chạy trên {{account}}",
-      "unpinned": "{{user}} quay lại dùng tài khoản ít tải nhất",
-      "switched": "Đã đổi {{user}} sang {{account}} — phiên đang chạy sẽ theo ở lần kiểm tra đăng nhập kế tiếp",
       "own-login": "{{user}} đang dùng login riêng của họ, nên không bị ghi đè",
       "expired": "{{account}} đã hết hạn — phiên mới của {{user}} quay về tài khoản ít tải nhất"
     },
-    "toolName": {
-      "claude": "Claude",
-      "codex": "Codex"
-    }
+    "edit": "Sửa {{name}}",
+    "editHint": "Tick các user mà phiên của họ chạy trên tài khoản này thay vì tài khoản ít tải nhất — kể cả khi nó đã đầy. User đang ở tài khoản khác sẽ chuyển sang đây. Login Claude được ghi ngay vào home của họ: phiên đang chạy chuyển sang ở lần kiểm tra đăng nhập kế tiếp, không cần khởi động lại. Setup-token hoặc tài khoản Codex áp dụng cho phiên mới. Bỏ tick để trả user về tài khoản ít tải nhất.",
+    "save": "Lưu",
+    "users": "User dùng tài khoản này",
+    "noUsers": "Chưa có user nào.",
+    "onAccount": "đang ở {{account}}",
+    "editDone": "Đã lưu {{name}}"
   },
   "delete": {
     "button": "Xoá user",

client/src/lib/api.ts

@@ -1061,15 +1061,19 @@ export const api = {
         method: "POST",
         body: JSON.stringify({ ...body, currentPassword }),
       }),
-    /** PUT /api/accounts/pins — admin: switch a user to one account (`null` = automatic), password again. */
-    pin: (tool: PoolTool, userId: number, account: string | null, currentPassword: string) =>
+    /** PUT /api/accounts/:name/users — admin: exactly these users run on this account. */
+    setUsers: (tool: PoolTool, name: string, userIds: number[], currentPassword: string) =>
       request<{
-        pin: { userId: number; username: string; account: string | null };
-        /** What happened now: a Claude login goes into the user's home at once. */
-        switched: "switched" | "kept" | "own-login" | "expired" | "next-session" | null;
-      }>("/accounts/pins", {
+        /** Users moved onto it; `switched`: what happened now (a Claude login goes into their home). */
+        added: {
+          userId: number;
+          username: string;
+          switched: "switched" | "kept" | "own-login" | "expired" | "next-session";
+        }[];
+        removed: { userId: number; username: string }[];
+      }>(`/accounts/${encodeURIComponent(name)}/users`, {
         method: "PUT",
-        body: JSON.stringify({ tool, userId, account, currentPassword }),
+        body: JSON.stringify({ tool, userIds, currentPassword }),
       }),
     /** DELETE /api/accounts/:name — admin, with their OWN password again. */
     remove: (tool: PoolTool, name: string, currentPassword: string) =>