feat: account management page with batch operations (#146)

* fix: treat unfetched plan types as possibly compatible in acquire()

When model-fetcher fails to fetch models for a plan type (e.g. the
selected free account had an expired token), _planModelMap only contains
successfully fetched plans. acquire() then excludes all accounts whose
planType is absent from the map — even though their compatibility is
unknown, not negative.

Add isPlanFetched() to model-store and use it in acquire() to
distinguish "plan was fetched and model is absent" (exclude) from
"plan was never fetched" (include as possibly compatible). This prevents
false 503s when a plan's model fetch failed at startup.

* feat: account management page with batch operations

Add #/account-management page for bulk account management:
- POST /auth/accounts/batch-delete and batch-status endpoints
- Batch delete, set active, set disabled with confirmation
- Status summary chips (clickable to filter)
- Reuse AccountTable with optional proxy column
- Import/export accessible from new page
- Fix markStatus() acquire lock leak (was missing acquireLocks.delete)
- Fix misleading test name in plan-routing-acquire

* fix: harden batch operations with error handling and loading state

- Hook batchDelete/batchSetStatus: return error string on failure (consistent with deleteAccount pattern)
- AccountManagement: try-catch + error/success toast, busy state prevents double-submit
- AccountBulkActions: accept loading prop, disable buttons during async
- Remove unnecessary AccountManagementPage wrapper
- Fix hardcoded "Dashboard" string → i18n t("backToDashboard")
- Remove redundant proxies! non-null assertion

---------

Co-authored-by: icebear0828 <icebear0828@users.noreply.github.com>

CHANGELOG.md

@@ -15,6 +15,9 @@
   - 后台额度刷新周期性重试 banned 账号，成功即自动解封
 - 上游 401 token 吊销（"token has been invalidated"）自动标记过期并切换下一个账号
   - 之前 401 直接透传给客户端，不标记也不重试
+- Account Management 页面（`#/account-management`）：批量删除、批量改状态（active/disabled）、导入导出
+  - `POST /auth/accounts/batch-delete` 和 `POST /auth/accounts/batch-status` 批量端点
+  - 状态摘要条可点击筛选，复用 AccountTable 选择/分页/Shift 多选
 
 ### Fixed
 

shared/hooks/use-accounts.ts

@@ -217,6 +217,42 @@ export function useAccounts() {
     return result;
   }, [loadAccounts]);
 
+  const batchDelete = useCallback(async (ids: string[]): Promise<string | null> => {
+    try {
+      const resp = await fetch("/auth/accounts/batch-delete", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ ids }),
+      });
+      if (!resp.ok) {
+        const data = await resp.json();
+        return data.error || "Batch delete failed";
+      }
+      await loadAccounts();
+      return null;
+    } catch (err) {
+      return "networkError" + (err instanceof Error ? err.message : "");
+    }
+  }, [loadAccounts]);
+
+  const batchSetStatus = useCallback(async (ids: string[], status: "active" | "disabled"): Promise<string | null> => {
+    try {
+      const resp = await fetch("/auth/accounts/batch-status", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ ids, status }),
+      });
+      if (!resp.ok) {
+        const data = await resp.json();
+        return data.error || "Batch status change failed";
+      }
+      await loadAccounts();
+      return null;
+    } catch (err) {
+      return "networkError" + (err instanceof Error ? err.message : "");
+    }
+  }, [loadAccounts]);
+
   return {
     list,
     loading,
@@ -232,5 +268,7 @@ export function useAccounts() {
     deleteAccount,
     exportAccounts,
     importAccounts,
+    batchDelete,
+    batchSetStatus,
   };
 }

shared/i18n/translations.ts

@@ -201,6 +201,15 @@ export const translations = {
     rotationLeastUsedDesc: "Prefer the account with fewest requests.",
     rotationRoundRobinDesc: "Cycle through accounts in order.",
     rotationSaved: "Saved",
+    accountManagement: "Account Management",
+    manageAccounts: "Manage Accounts",
+    batchDelete: "Delete Selected",
+    batchDeleteConfirm: "Confirm Delete?",
+    setActive: "Set Active",
+    setDisabled: "Set Disabled",
+    deleteSuccess: "Deleted",
+    statusChangeSuccess: "Updated",
+    cancel: "Cancel",
   },
   zh: {
     serverOnline: "\u670d\u52a1\u8fd0\u884c\u4e2d",
@@ -407,6 +416,15 @@ export const translations = {
     rotationLeastUsedDesc: "\u4f18\u5148\u4f7f\u7528\u8bf7\u6c42\u6b21\u6570\u6700\u5c11\u7684\u8d26\u53f7\u3002",
     rotationRoundRobinDesc: "\u6309\u987a\u5e8f\u8f6e\u6d41\u4f7f\u7528\u5404\u8d26\u53f7\u3002",
     rotationSaved: "\u5df2\u4fdd\u5b58",
+    accountManagement: "账号管理",
+    manageAccounts: "管理账号",
+    batchDelete: "批量删除",
+    batchDeleteConfirm: "确认删除？",
+    setActive: "设为活跃",
+    setDisabled: "设为禁用",
+    deleteSuccess: "已删除",
+    statusChangeSuccess: "已更新",
+    cancel: "取消",
   },
 } as const;
 

src/auth/__tests__/account-pool-quota.test.ts

@@ -55,6 +55,7 @@ vi.mock("../../utils/jitter.js", () => ({
 
 vi.mock("../../models/model-store.js", () => ({
   getModelPlanTypes: vi.fn(() => []),
+  isPlanFetched: vi.fn(() => true),
 }));
 
 import { AccountPool } from "../account-pool.js";

src/auth/__tests__/account-pool-sticky.test.ts

@@ -13,6 +13,7 @@ const mockGetModelPlanTypes = vi.fn<(id: string) => string[]>(() => []);
 
 vi.mock("../../models/model-store.js", () => ({
   getModelPlanTypes: (...args: unknown[]) => mockGetModelPlanTypes(args[0] as string),
+  isPlanFetched: () => true,
 }));
 
 vi.mock("../../config.js", () => ({

src/auth/__tests__/account-pool-team-dedup.test.ts

@@ -10,6 +10,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 
 vi.mock("../../models/model-store.js", () => ({
   getModelPlanTypes: vi.fn(() => []),
+  isPlanFetched: vi.fn(() => true),
 }));
 
 vi.mock("../../config.js", () => ({

src/auth/__tests__/plan-routing-acquire.test.ts

@@ -8,11 +8,13 @@
 
 import { describe, it, expect, vi, beforeEach } from "vitest";
 
-// Mock getModelPlanTypes to control plan routing
+// Mock getModelPlanTypes and isPlanFetched to control plan routing
 const mockGetModelPlanTypes = vi.fn<(id: string) => string[]>(() => []);
+const mockIsPlanFetched = vi.fn<(planType: string) => boolean>(() => true);
 
 vi.mock("../../models/model-store.js", () => ({
   getModelPlanTypes: (...args: unknown[]) => mockGetModelPlanTypes(args[0] as string),
+  isPlanFetched: (...args: unknown[]) => mockIsPlanFetched(args[0] as string),
 }));
 
 vi.mock("../../config.js", () => ({
@@ -139,4 +141,64 @@ describe("account-pool plan-based routing", () => {
     // Both are valid candidates, should get one of them
     expect(["tok-free", "tok-team"]).toContain(acquired!.token);
   });
+
+  it("includes accounts whose plan was never fetched (unfetched = possibly compatible)", () => {
+    // Model known to work on team, but free plan was never fetched
+    mockGetModelPlanTypes.mockReturnValue(["team"]);
+    mockIsPlanFetched.mockImplementation((plan: string) => plan === "team");
+
+    const pool = createPool(
+      { token: "tok-free", planType: "free", email: "free@test.com" },
+      { token: "tok-team", planType: "team", email: "team@test.com" },
+    );
+
+    // Both accounts are candidates (team is known, free is unfetched → possibly compatible)
+    const first = pool.acquire({ model: "gpt-5.4" });
+    expect(first).not.toBeNull();
+
+    // Second concurrent request should also succeed (two candidates available)
+    const second = pool.acquire({ model: "gpt-5.4" });
+    expect(second).not.toBeNull();
+    expect(second!.token).not.toBe(first!.token);
+
+    // Both tokens should be from our pool
+    const tokens = new Set([first!.token, second!.token]);
+    expect(tokens.has("tok-free")).toBe(true);
+    expect(tokens.has("tok-team")).toBe(true);
+  });
+
+  it("excludes accounts whose plan was fetched but lacks the model", () => {
+    // Model known to work on team; free plan was fetched and model is NOT in it
+    mockGetModelPlanTypes.mockReturnValue(["team"]);
+    mockIsPlanFetched.mockReturnValue(true); // both plans fetched
+
+    const pool = createPool(
+      { token: "tok-free", planType: "free", email: "free@test.com" },
+      { token: "tok-team", planType: "team", email: "team@test.com" },
+    );
+
+    // Lock the team account
+    const first = pool.acquire({ model: "gpt-5.4" });
+    expect(first).not.toBeNull();
+    expect(first!.token).toBe("tok-team");
+
+    // Second request — free plan was fetched and model is absent → null
+    const second = pool.acquire({ model: "gpt-5.4" });
+    expect(second).toBeNull();
+  });
+
+  it("unfetched plans are included even when model appears plan-locked", () => {
+    // Model supports team only, no plans have been fetched, but only free accounts exist
+    mockGetModelPlanTypes.mockReturnValue(["team"]);
+    mockIsPlanFetched.mockReturnValue(false); // no plans fetched yet
+
+    const pool = createPool(
+      { token: "tok-free", planType: "free", email: "free@test.com" },
+    );
+
+    // Free plan is unfetched → included as possibly compatible
+    const acquired = pool.acquire({ model: "gpt-5.4" });
+    expect(acquired).not.toBeNull();
+    expect(acquired!.token).toBe("tok-free");
+  });
 });

src/auth/account-pool.ts

@@ -12,7 +12,7 @@ import {
   extractUserProfile,
   isTokenExpired,
 } from "./jwt-utils.js";
-import { getModelPlanTypes } from "../models/model-store.js";
+import { getModelPlanTypes, isPlanFetched } from "../models/model-store.js";
 import { getRotationStrategy } from "./rotation-strategy.js";
 import { createFsPersistence } from "./account-persistence.js";
 import type { AccountPersistence } from "./account-persistence.js";
@@ -93,17 +93,25 @@ export class AccountPool {
 
     if (available.length === 0) return null;
 
-    // Model-aware selection: prefer accounts whose planType matches the model's known plans
+    // Model-aware selection: prefer accounts whose planType matches the model's known plans.
+    // Accounts whose planType has never been fetched are treated as "possibly compatible"
+    // to avoid false 503s when a plan's model fetch failed at startup.
     let candidates = available;
     if (options?.model) {
       const preferredPlans = getModelPlanTypes(options.model);
       if (preferredPlans.length > 0) {
         const planSet = new Set(preferredPlans);
-        const matched = available.filter((a) => a.planType && planSet.has(a.planType));
+        const matched = available.filter((a) => {
+          if (!a.planType) return false;
+          // Plan is known to support this model
+          if (planSet.has(a.planType)) return true;
+          // Plan has never been fetched — include as possibly compatible
+          return !isPlanFetched(a.planType);
+        });
         if (matched.length > 0) {
           candidates = matched;
         } else {
-          // No account matches the model's plan requirements — don't fallback to incompatible accounts
+          // All accounts belong to plans that were fetched but don't include this model
           return null;
         }
       }
@@ -373,6 +381,7 @@ export class AccountPool {
   }
 
   markStatus(entryId: string, status: AccountEntry["status"]): void {
+    this.acquireLocks.delete(entryId);
     const entry = this.accounts.get(entryId);
     if (!entry) return;
     entry.status = status;

src/models/model-store.ts

@@ -308,6 +308,14 @@ export function getModelPlanTypes(modelId: string): string[] {
   return [...(_modelPlanIndex.get(modelId) ?? [])];
 }
 
+/**
+ * Check if models have ever been successfully fetched for a given plan type.
+ * Returns false when the plan's model list is unknown (fetch failed or never attempted).
+ */
+export function isPlanFetched(planType: string): boolean {
+  return _planModelMap.has(planType);
+}
+
 // ── Model name suffix parsing ───────────────────────────────────────
 
 export interface ParsedModelName {

src/routes/__tests__/accounts-batch.test.ts

@@ -0,0 +1,220 @@
+/**
+ * Tests for batch account operations.
+ * POST /auth/accounts/batch-delete — delete multiple accounts
+ * POST /auth/accounts/batch-status — change status for multiple accounts
+ */
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+// Mock fs before importing anything
+vi.mock("fs", () => ({
+  readFileSync: vi.fn(() => { throw new Error("ENOENT"); }),
+  writeFileSync: vi.fn(),
+  renameSync: vi.fn(),
+  existsSync: vi.fn(() => false),
+  mkdirSync: vi.fn(),
+}));
+
+vi.mock("../../paths.js", () => ({
+  getDataDir: vi.fn(() => "/tmp/test-data"),
+  getConfigDir: vi.fn(() => "/tmp/test-config"),
+}));
+
+vi.mock("../../config.js", () => ({
+  getConfig: vi.fn(() => ({
+    auth: {
+      jwt_token: null,
+      rotation_strategy: "least_used",
+      rate_limit_backoff_seconds: 60,
+    },
+    server: { proxy_api_key: null },
+  })),
+}));
+
+vi.mock("../../auth/jwt-utils.js", () => ({
+  decodeJwtPayload: vi.fn(() => ({ exp: Math.floor(Date.now() / 1000) + 3600 })),
+  extractChatGptAccountId: vi.fn((token: string) => `acct-${token.slice(0, 8)}`),
+  extractUserProfile: vi.fn((token: string) => ({
+    email: `${token.slice(0, 4)}@test.com`,
+    chatgpt_plan_type: "free",
+  })),
+  isTokenExpired: vi.fn(() => false),
+}));
+
+vi.mock("../../utils/jitter.js", () => ({
+  jitter: vi.fn((val: number) => val),
+}));
+
+vi.mock("../../models/model-store.js", () => ({
+  getModelPlanTypes: vi.fn(() => []),
+  isPlanFetched: vi.fn(() => true),
+}));
+
+import { Hono } from "hono";
+import { AccountPool } from "../../auth/account-pool.js";
+import { createAccountRoutes } from "../../routes/accounts.js";
+
+const mockScheduler = {
+  scheduleOne: vi.fn(),
+  clearOne: vi.fn(),
+  start: vi.fn(),
+  stop: vi.fn(),
+};
+
+function addAccounts(pool: AccountPool, count: number): string[] {
+  const ids: string[] = [];
+  for (let i = 0; i < count; i++) {
+    // Each token needs a unique first 8 chars to get a unique accountId from the mock
+    const unique = `${String.fromCharCode(65 + i)}${String(i).padStart(7, "0")}`;
+    ids.push(pool.addAccount(`${unique}-padding-for-length`));
+  }
+  return ids;
+}
+
+describe("batch account operations", () => {
+  let pool: AccountPool;
+  let app: Hono;
+
+  beforeEach(() => {
+    pool = new AccountPool();
+    const routes = createAccountRoutes(pool, mockScheduler as never);
+    app = new Hono();
+    app.route("/", routes);
+    mockScheduler.clearOne.mockClear();
+  });
+
+  // ── batch-delete ──────────────────────────────────────────
+
+  describe("POST /auth/accounts/batch-delete", () => {
+    it("deletes multiple accounts", async () => {
+      const ids = addAccounts(pool, 3);
+      expect(pool.getAccounts()).toHaveLength(3);
+
+      const res = await app.request("/auth/accounts/batch-delete", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ ids }),
+      });
+
+      expect(res.status).toBe(200);
+      const body = await res.json();
+      expect(body.deleted).toBe(3);
+      expect(body.notFound).toHaveLength(0);
+      expect(pool.getAccounts()).toHaveLength(0);
+      // Scheduler cleared for each
+      expect(mockScheduler.clearOne).toHaveBeenCalledTimes(3);
+    });
+
+    it("reports not-found ids without failing", async () => {
+      const ids = addAccounts(pool, 2);
+
+      const res = await app.request("/auth/accounts/batch-delete", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ ids: [...ids, "nonexistent-id"] }),
+      });
+
+      expect(res.status).toBe(200);
+      const body = await res.json();
+      expect(body.deleted).toBe(2);
+      expect(body.notFound).toEqual(["nonexistent-id"]);
+    });
+
+    it("rejects empty ids array", async () => {
+      const res = await app.request("/auth/accounts/batch-delete", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ ids: [] }),
+      });
+      expect(res.status).toBe(400);
+    });
+
+    it("rejects malformed body", async () => {
+      const res = await app.request("/auth/accounts/batch-delete", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ wrong: "field" }),
+      });
+      expect(res.status).toBe(400);
+    });
+  });
+
+  // ── batch-status ──────────────────────────────────────────
+
+  describe("POST /auth/accounts/batch-status", () => {
+    it("sets multiple accounts to disabled", async () => {
+      const ids = addAccounts(pool, 3);
+
+      const res = await app.request("/auth/accounts/batch-status", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ ids, status: "disabled" }),
+      });
+
+      expect(res.status).toBe(200);
+      const body = await res.json();
+      expect(body.updated).toBe(3);
+      expect(body.notFound).toHaveLength(0);
+
+      for (const acct of pool.getAccounts()) {
+        expect(acct.status).toBe("disabled");
+      }
+    });
+
+    it("sets accounts back to active", async () => {
+      const ids = addAccounts(pool, 2);
+      // First disable them
+      for (const id of ids) pool.markStatus(id, "disabled");
+
+      const res = await app.request("/auth/accounts/batch-status", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ ids, status: "active" }),
+      });
+
+      expect(res.status).toBe(200);
+      const body = await res.json();
+      expect(body.updated).toBe(2);
+      for (const acct of pool.getAccounts()) {
+        expect(acct.status).toBe("active");
+      }
+    });
+
+    it("rejects disallowed status values", async () => {
+      const ids = addAccounts(pool, 1);
+
+      for (const badStatus of ["expired", "banned", "rate_limited", "refreshing"]) {
+        const res = await app.request("/auth/accounts/batch-status", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ ids, status: badStatus }),
+        });
+        expect(res.status).toBe(400);
+      }
+    });
+
+    it("reports not-found ids", async () => {
+      const ids = addAccounts(pool, 1);
+
+      const res = await app.request("/auth/accounts/batch-status", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ ids: [...ids, "ghost"], status: "disabled" }),
+      });
+
+      expect(res.status).toBe(200);
+      const body = await res.json();
+      expect(body.updated).toBe(1);
+      expect(body.notFound).toEqual(["ghost"]);
+    });
+
+    it("rejects empty ids array", async () => {
+      const res = await app.request("/auth/accounts/batch-status", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ ids: [], status: "active" }),
+      });
+      expect(res.status).toBe(400);
+    });
+  });
+});

src/routes/__tests__/accounts-delete-warnings.test.ts

@@ -47,6 +47,7 @@ vi.mock("../../utils/jitter.js", () => ({
 
 vi.mock("../../models/model-store.js", () => ({
   getModelPlanTypes: vi.fn(() => []),
+  isPlanFetched: vi.fn(() => true),
 }));
 
 import { Hono } from "hono";

src/routes/__tests__/accounts-import-export.test.ts

@@ -49,6 +49,7 @@ vi.mock("../../utils/jitter.js", () => ({
 
 vi.mock("../../models/model-store.js", () => ({
   getModelPlanTypes: vi.fn(() => []),
+  isPlanFetched: vi.fn(() => true),
 }));
 
 import { Hono } from "hono";

src/routes/accounts.ts

@@ -28,6 +28,15 @@ import type { ProxyPool } from "../proxy/proxy-pool.js";
 import { toQuota } from "../auth/quota-utils.js";
 import { clearWarnings, getActiveWarnings, getWarningsLastUpdated } from "../auth/quota-warnings.js";
 
+const BatchIdsSchema = z.object({
+  ids: z.array(z.string()).min(1),
+});
+
+const BatchStatusSchema = z.object({
+  ids: z.array(z.string()).min(1),
+  status: z.enum(["active", "disabled"]),
+});
+
 const BulkImportSchema = z.object({
   accounts: z.array(z.object({
     token: z.string().min(1),
@@ -113,6 +122,72 @@ export function createAccountRoutes(
     return c.json({ success: true, added, updated, failed, errors });
   });
 
+  // Batch delete accounts
+  app.post("/auth/accounts/batch-delete", async (c) => {
+    let body: unknown;
+    try {
+      body = await c.req.json();
+    } catch {
+      c.status(400);
+      return c.json({ error: "Malformed JSON request body" });
+    }
+
+    const parsed = BatchIdsSchema.safeParse(body);
+    if (!parsed.success) {
+      c.status(400);
+      return c.json({ error: "Invalid request", details: parsed.error.issues });
+    }
+
+    let deleted = 0;
+    const notFound: string[] = [];
+
+    for (const id of parsed.data.ids) {
+      scheduler.clearOne(id);
+      const removed = pool.removeAccount(id);
+      if (removed) {
+        cookieJar?.clear(id);
+        clearWarnings(id);
+        deleted++;
+      } else {
+        notFound.push(id);
+      }
+    }
+
+    return c.json({ success: true, deleted, notFound });
+  });
+
+  // Batch change account status
+  app.post("/auth/accounts/batch-status", async (c) => {
+    let body: unknown;
+    try {
+      body = await c.req.json();
+    } catch {
+      c.status(400);
+      return c.json({ error: "Malformed JSON request body" });
+    }
+
+    const parsed = BatchStatusSchema.safeParse(body);
+    if (!parsed.success) {
+      c.status(400);
+      return c.json({ error: "Invalid request", details: parsed.error.issues });
+    }
+
+    let updated = 0;
+    const notFound: string[] = [];
+
+    for (const id of parsed.data.ids) {
+      const entry = pool.getEntry(id);
+      if (entry) {
+        pool.markStatus(id, parsed.data.status);
+        updated++;
+      } else {
+        notFound.push(id);
+      }
+    }
+
+    return c.json({ success: true, updated, notFound });
+  });
+
   // List all accounts
   // ?quota=true  → return cached quota (fast, from background refresh)
   // ?quota=fresh → force live fetch from upstream (manual refresh button)

web/src/App.tsx

@@ -15,6 +15,7 @@ import { RotationSettings } from "./components/RotationSettings";
 import { TestConnection } from "./components/TestConnection";
 import { Footer } from "./components/Footer";
 import { ProxySettings } from "./pages/ProxySettings";
+import { AccountManagement } from "./pages/AccountManagement";
 import { useAccounts } from "../../shared/hooks/use-accounts";
 import { useProxies } from "../../shared/hooks/use-proxies";
 import { useStatus } from "../../shared/hooks/use-status";
@@ -187,11 +188,12 @@ function useHash(): string {
 export function App() {
   const hash = useHash();
   const isProxySettings = hash === "#/proxy-settings";
+  const isAccountManagement = hash === "#/account-management";
 
   return (
     <I18nProvider>
       <ThemeProvider>
-        {isProxySettings ? <ProxySettingsPage /> : <Dashboard />}
+        {isProxySettings ? <ProxySettingsPage /> : isAccountManagement ? <AccountManagement /> : <Dashboard />}
       </ThemeProvider>
     </I18nProvider>
   );

web/src/components/AccountBulkActions.tsx

@@ -0,0 +1,91 @@
+import { useState, useCallback } from "preact/hooks";
+import { useT } from "../../../shared/i18n/context";
+
+interface AccountBulkActionsProps {
+  selectedCount: number;
+  loading: boolean;
+  onBatchDelete: () => void;
+  onSetActive: () => void;
+  onSetDisabled: () => void;
+}
+
+export function AccountBulkActions({
+  selectedCount,
+  loading,
+  onBatchDelete,
+  onSetActive,
+  onSetDisabled,
+}: AccountBulkActionsProps) {
+  const t = useT();
+  const [confirming, setConfirming] = useState(false);
+
+  const handleDelete = useCallback(() => {
+    if (!confirming) {
+      setConfirming(true);
+      return;
+    }
+    setConfirming(false);
+    onBatchDelete();
+  }, [confirming, onBatchDelete]);
+
+  const cancelConfirm = useCallback(() => setConfirming(false), []);
+
+  if (selectedCount === 0) return null;
+
+  return (
+    <div class="sticky bottom-0 z-40 bg-white dark:bg-card-dark border-t border-gray-200 dark:border-border-dark shadow-lg px-4 py-3">
+      <div class="flex items-center gap-3 flex-wrap">
+        <span class="text-sm font-medium text-slate-700 dark:text-text-main shrink-0">
+          {selectedCount} {t("accountsCount")} {t("selected")}
+        </span>
+
+        <div class="h-4 w-px bg-gray-200 dark:bg-border-dark hidden sm:block" />
+
+        <button
+          onClick={onSetActive}
+          disabled={loading}
+          class="px-3 py-1.5 text-xs font-medium rounded-lg border border-green-200 dark:border-green-800/40 bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-900/30 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {t("setActive")}
+        </button>
+
+        <button
+          onClick={onSetDisabled}
+          disabled={loading}
+          class="px-3 py-1.5 text-xs font-medium rounded-lg border border-slate-200 dark:border-slate-700/40 bg-slate-50 dark:bg-slate-800/20 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800/30 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {t("setDisabled")}
+        </button>
+
+        <div class="h-4 w-px bg-gray-200 dark:bg-border-dark hidden sm:block" />
+
+        {confirming ? (
+          <div class="flex items-center gap-2">
+            <button
+              onClick={handleDelete}
+              disabled={loading}
+              class="px-3 py-1.5 text-xs font-medium rounded-lg bg-red-600 text-white hover:bg-red-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {t("batchDeleteConfirm")}
+            </button>
+            <button
+              onClick={cancelConfirm}
+              disabled={loading}
+              class="px-3 py-1.5 text-xs font-medium rounded-lg border border-gray-200 dark:border-border-dark text-slate-600 dark:text-text-dim hover:bg-slate-50 dark:hover:bg-border-dark/30 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {t("cancel")}
+            </button>
+          </div>
+        ) : (
+          <button
+            onClick={handleDelete}
+            disabled={loading}
+            class="px-3 py-1.5 text-xs font-medium rounded-lg border border-red-200 dark:border-red-800/40 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {t("batchDelete")}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

web/src/components/AccountList.tsx

@@ -70,6 +70,12 @@ export function AccountList({ accounts, loading, onDelete, onRefresh, refreshing
               {t("updatedAt")} {updatedAtText}
             </span>
           )}
+          <a
+            href="#/account-management"
+            class="text-[0.75rem] text-primary hover:text-primary/80 font-medium transition-colors"
+          >
+            {t("manageAccounts")} &rarr;
+          </a>
           {onExport && onImport && (
             <AccountImportExport onExport={onExport} onImport={onImport} selectedIds={selectedIds} />
           )}

web/src/components/AccountTable.tsx

@@ -35,11 +35,11 @@ const statusStyles: Record<string, [string, TranslationKey]> = {
 
 interface AccountTableProps {
   accounts: AssignmentAccount[];
-  proxies: ProxyEntry[];
+  proxies?: ProxyEntry[];
   selectedIds: Set<string>;
   onSelectionChange: (ids: Set<string>) => void;
-  onSingleProxyChange: (accountId: string, proxyId: string) => void;
-  filterGroup: string | null;
+  onSingleProxyChange?: (accountId: string, proxyId: string) => void;
+  filterGroup?: string | null;
   statusFilter: string;
   onStatusFilterChange: (status: string) => void;
 }
@@ -50,11 +50,12 @@ export function AccountTable({
   selectedIds,
   onSelectionChange,
   onSingleProxyChange,
-  filterGroup,
+  filterGroup = null,
   statusFilter,
   onStatusFilterChange,
 }: AccountTableProps) {
   const t = useT();
+  const showProxy = !!proxies;
   const [search, setSearch] = useState("");
   const [page, setPage] = useState(0);
   const lastClickedIndex = useRef<number | null>(null);
@@ -182,7 +183,7 @@ export function AccountTable({
           </label>
           <span class="flex-1 min-w-0">Email</span>
           <span class="w-20 text-center hidden sm:block">{t("statusFilter")}</span>
-          <span class="w-40 text-center hidden md:block">{t("proxyAssignment")}</span>
+          {showProxy && <span class="w-40 text-center hidden md:block">{t("proxyAssignment")}</span>}
         </div>
 
         {/* Rows */}
@@ -224,23 +225,25 @@ export function AccountTable({
                     {t(statusKey)}
                   </span>
                 </span>
-                <span class="w-40 hidden md:block" onClick={(e) => e.stopPropagation()}>
-                  <select
-                    value={acct.proxyId || "global"}
-                    onChange={(e) => onSingleProxyChange(acct.id, (e.target as HTMLSelectElement).value)}
-                    class="w-full text-xs px-2 py-1 rounded-md border border-gray-200 dark:border-border-dark bg-white dark:bg-bg-dark text-slate-700 dark:text-text-main focus:outline-none focus:ring-1 focus:ring-primary cursor-pointer"
-                  >
-                    <option value="global">{t("globalDefault")}</option>
-                    <option value="direct">{t("directNoProxy")}</option>
-                    <option value="auto">{t("autoRoundRobin")}</option>
-                    {proxies.map((p) => (
-                      <option key={p.id} value={p.id}>
-                        {p.name}
-                        {p.health?.exitIp ? ` (${p.health.exitIp})` : ""}
-                      </option>
-                    ))}
-                  </select>
-                </span>
+                {showProxy && (
+                  <span class="w-40 hidden md:block" onClick={(e) => e.stopPropagation()}>
+                    <select
+                      value={acct.proxyId || "global"}
+                      onChange={(e) => onSingleProxyChange?.(acct.id, (e.target as HTMLSelectElement).value)}
+                      class="w-full text-xs px-2 py-1 rounded-md border border-gray-200 dark:border-border-dark bg-white dark:bg-bg-dark text-slate-700 dark:text-text-main focus:outline-none focus:ring-1 focus:ring-primary cursor-pointer"
+                    >
+                      <option value="global">{t("globalDefault")}</option>
+                      <option value="direct">{t("directNoProxy")}</option>
+                      <option value="auto">{t("autoRoundRobin")}</option>
+                      {proxies.map((p) => (
+                        <option key={p.id} value={p.id}>
+                          {p.name}
+                          {p.health?.exitIp ? ` (${p.health.exitIp})` : ""}
+                        </option>
+                      ))}
+                    </select>
+                  </span>
+                )}
               </div>
             );
           })

web/src/pages/AccountManagement.tsx

@@ -0,0 +1,186 @@
+import { useState, useCallback, useMemo } from "preact/hooks";
+import { useT } from "../../../shared/i18n/context";
+import { useAccounts } from "../../../shared/hooks/use-accounts";
+import { AccountTable } from "../components/AccountTable";
+import { AccountBulkActions } from "../components/AccountBulkActions";
+import { AccountImportExport } from "../components/AccountImportExport";
+import type { AssignmentAccount } from "../../../shared/hooks/use-proxy-assignments";
+import type { TranslationKey } from "../../../shared/i18n/translations";
+
+const statusOrder: Array<{ key: string; label: TranslationKey }> = [
+  { key: "active", label: "active" },
+  { key: "expired", label: "expired" },
+  { key: "rate_limited", label: "rateLimited" },
+  { key: "refreshing", label: "refreshing" },
+  { key: "disabled", label: "disabled" },
+  { key: "banned", label: "banned" },
+];
+
+export function AccountManagement() {
+  const t = useT();
+  const { list, loading: listLoading, batchDelete, batchSetStatus, exportAccounts, importAccounts } = useAccounts();
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [statusFilter, setStatusFilter] = useState("all");
+  const [message, setMessage] = useState<{ text: string; error?: boolean } | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  const tableAccounts: AssignmentAccount[] = useMemo(
+    () =>
+      list.map((a) => ({
+        id: a.id,
+        email: a.email || a.id.slice(0, 8),
+        status: a.status,
+        proxyId: a.proxyId || "global",
+        proxyName: "",
+      })),
+    [list],
+  );
+
+  const statusCounts = useMemo(() => {
+    const counts: Record<string, number> = {};
+    for (const a of list) {
+      counts[a.status] = (counts[a.status] || 0) + 1;
+    }
+    return counts;
+  }, [list]);
+
+  const showMessage = useCallback((text: string, error = false) => {
+    setMessage({ text, error });
+    setTimeout(() => setMessage(null), 3000);
+  }, []);
+
+  const handleBatchDelete = useCallback(async () => {
+    setBusy(true);
+    try {
+      const err = await batchDelete([...selectedIds]);
+      if (err) {
+        showMessage(err, true);
+      } else {
+        setSelectedIds(new Set());
+        showMessage(t("deleteSuccess"));
+      }
+    } finally {
+      setBusy(false);
+    }
+  }, [selectedIds, batchDelete, t, showMessage]);
+
+  const handleSetActive = useCallback(async () => {
+    setBusy(true);
+    try {
+      const err = await batchSetStatus([...selectedIds], "active");
+      if (err) {
+        showMessage(err, true);
+      } else {
+        setSelectedIds(new Set());
+        showMessage(t("statusChangeSuccess"));
+      }
+    } finally {
+      setBusy(false);
+    }
+  }, [selectedIds, batchSetStatus, t, showMessage]);
+
+  const handleSetDisabled = useCallback(async () => {
+    setBusy(true);
+    try {
+      const err = await batchSetStatus([...selectedIds], "disabled");
+      if (err) {
+        showMessage(err, true);
+      } else {
+        setSelectedIds(new Set());
+        showMessage(t("statusChangeSuccess"));
+      }
+    } finally {
+      setBusy(false);
+    }
+  }, [selectedIds, batchSetStatus, t, showMessage]);
+
+  const handleStatusChipClick = useCallback((status: string) => {
+    setStatusFilter((prev) => (prev === status ? "all" : status));
+  }, []);
+
+  return (
+    <div class="min-h-screen bg-slate-50 dark:bg-bg-dark flex flex-col">
+      {/* Header */}
+      <header class="sticky top-0 z-50 bg-white dark:bg-card-dark border-b border-gray-200 dark:border-border-dark px-4 py-3">
+        <div class="max-w-[1100px] mx-auto flex items-center gap-3">
+          <a
+            href="#/"
+            class="text-sm text-slate-500 dark:text-text-dim hover:text-primary transition-colors"
+          >
+            &larr; {t("backToDashboard")}
+          </a>
+          <h1 class="text-base font-semibold text-slate-800 dark:text-text-main">
+            {t("accountManagement")}
+          </h1>
+          <div class="flex-1" />
+          <AccountImportExport
+            onExport={exportAccounts}
+            onImport={importAccounts}
+            selectedIds={selectedIds}
+          />
+        </div>
+      </header>
+
+      {/* Main content */}
+      <main class="flex-grow px-4 md:px-8 py-6 max-w-[1100px] mx-auto w-full">
+        {/* Status summary chips */}
+        <div class="flex flex-wrap gap-2 mb-4">
+          {statusOrder.map(({ key, label }) => {
+            const count = statusCounts[key] || 0;
+            if (count === 0) return null;
+            const isActive = statusFilter === key;
+            return (
+              <button
+                key={key}
+                onClick={() => handleStatusChipClick(key)}
+                class={`px-3 py-1 text-xs font-medium rounded-full border transition-colors ${
+                  isActive
+                    ? "bg-primary text-white border-primary"
+                    : "bg-white dark:bg-card-dark border-gray-200 dark:border-border-dark text-slate-600 dark:text-text-dim hover:border-primary/50"
+                }`}
+              >
+                {t(label)} ({count})
+              </button>
+            );
+          })}
+          <span class="px-3 py-1 text-xs text-slate-400 dark:text-text-dim">
+            {list.length} {t("totalItems")}
+          </span>
+        </div>
+
+        {/* Message toast */}
+        {message && (
+          <div class={`mb-4 px-4 py-2 rounded-lg text-sm font-medium ${
+            message.error
+              ? "bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400"
+              : "bg-primary/10 text-primary"
+          }`}>
+            {message.text}
+          </div>
+        )}
+
+        {/* Table */}
+        {listLoading ? (
+          <div class="text-center py-12 text-slate-400 dark:text-text-dim">Loading...</div>
+        ) : (
+          <AccountTable
+            accounts={tableAccounts}
+            selectedIds={selectedIds}
+            onSelectionChange={setSelectedIds}
+            statusFilter={statusFilter}
+            onStatusFilterChange={setStatusFilter}
+          />
+        )}
+      </main>
+
+      {/* Bulk actions bar */}
+      <AccountBulkActions
+        selectedCount={selectedIds.size}
+        loading={busy}
+        onBatchDelete={handleBatchDelete}
+        onSetActive={handleSetActive}
+        onSetDisabled={handleSetDisabled}
+      />
+    </div>
+  );
+}