feat: proxy assignment management page with bulk operations (#34)

* feat: proxy assignment management page with bulk operations

Add dedicated page (#/proxy-settings) for managing proxy assignments
across hundreds of accounts with matrix-style dual-column layout:

- Left sidebar: proxy group list with counts, search, click-to-filter
- Right panel: paginated account table (50/page) with search, status
filter, Shift+click range select, per-row proxy dropdown
- Bulk actions: batch assign to proxy, round-robin even distribute,
rule-based assignment modal
- Import/export: download JSON assignments, upload with diff preview
- Hash routing (zero-dependency), Header navigation links
- Backend: 6 new bulk API endpoints + ProxyPool.bulkAssign()
- i18n: 35 new translation keys (en + zh)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: address PR review issues in proxy assignment feature

- Make accountPool required param (was optional but always passed)
- Extract isValidProxyId() helper to eliminate duplicated validation
- Add resp.ok checks in use-proxy-assignments hook (throw on failure)
- Fix useCallback dependency arrays: use specific hook methods instead
of entire data object to prevent unnecessary re-renders
- Fix pageAccounts dependency via ref in AccountTable toggleSelect

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: icebear0828 <icebear0828@users.noreply.github.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

CHANGELOG.md

@@ -12,6 +12,14 @@
 
 ### Added
 
+- 代理分配管理页面（`#/proxy-settings`）：双栏矩阵式布局，批量管理数百账号的代理分配
+  - 左栏代理组列表：按 Global/Direct/Auto/各代理分组显示计数徽章，点击筛选
+  - 右栏账号表格：搜索、状态筛选、分页（50条/页）、Shift+点击连续多选、每行独立代理下拉
+  - 批量操作栏：批量设为指定代理、均匀分配到所有活跃代理（round-robin）、按规则分配
+  - 导入导出：导出 JSON 分配文件、导入后预览 diff 再确认应用
+  - Hash 路由零依赖切换，Header 导航链接（Dashboard ↔ 代理分配）
+  - 后端新增 6 个批量 API：assignments 列表/批量分配/规则分配/导出/导入预览/应用导入
+
 - 代理池功能：支持为不同账号配置不同的上游代理，实现 IP 多样化和风险隔离
   - 代理 CRUD：添加、删除、启用、禁用代理（HTTP/HTTPS/SOCKS5）
   - 四种分配模式：Global Default（全局代理）、Direct（直连）、Auto（Round-Robin 轮转）、指定代理

shared/hooks/use-proxy-assignments.ts

@@ -0,0 +1,131 @@
+import { useState, useEffect, useCallback } from "preact/hooks";
+import type { ProxyEntry } from "../types";
+
+export interface AssignmentAccount {
+  id: string;
+  email: string;
+  status: string;
+  proxyId: string;
+  proxyName: string;
+}
+
+export interface ImportDiff {
+  changes: Array<{ email: string; accountId: string; from: string; to: string }>;
+  unchanged: number;
+}
+
+export interface ProxyAssignmentsState {
+  accounts: AssignmentAccount[];
+  proxies: ProxyEntry[];
+  loading: boolean;
+  refresh: () => Promise<void>;
+  assignBulk: (assignments: Array<{ accountId: string; proxyId: string }>) => Promise<void>;
+  assignRule: (accountIds: string[], rule: string, targetProxyIds: string[]) => Promise<void>;
+  exportAssignments: () => Promise<Array<{ email: string; proxyId: string }>>;
+  importPreview: (data: Array<{ email: string; proxyId: string }>) => Promise<ImportDiff | null>;
+  applyImport: (assignments: Array<{ accountId: string; proxyId: string }>) => Promise<void>;
+}
+
+export function useProxyAssignments(): ProxyAssignmentsState {
+  const [accounts, setAccounts] = useState<AssignmentAccount[]>([]);
+  const [proxies, setProxies] = useState<ProxyEntry[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const refresh = useCallback(async () => {
+    try {
+      const resp = await fetch("/api/proxies/assignments");
+      const data = await resp.json();
+      setAccounts(data.accounts || []);
+      setProxies(data.proxies || []);
+    } catch {
+      // ignore
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  const assignBulk = useCallback(
+    async (assignments: Array<{ accountId: string; proxyId: string }>) => {
+      const resp = await fetch("/api/proxies/assign-bulk", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ assignments }),
+      });
+      if (!resp.ok) {
+        const err = await resp.json().catch(() => ({ error: "Request failed" }));
+        throw new Error((err as { error?: string }).error ?? "Request failed");
+      }
+      await refresh();
+    },
+    [refresh],
+  );
+
+  const assignRule = useCallback(
+    async (accountIds: string[], rule: string, targetProxyIds: string[]) => {
+      const resp = await fetch("/api/proxies/assign-rule", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ accountIds, rule, targetProxyIds }),
+      });
+      if (!resp.ok) {
+        const err = await resp.json().catch(() => ({ error: "Request failed" }));
+        throw new Error((err as { error?: string }).error ?? "Request failed");
+      }
+      await refresh();
+    },
+    [refresh],
+  );
+
+  const exportAssignments = useCallback(async (): Promise<Array<{ email: string; proxyId: string }>> => {
+    const resp = await fetch("/api/proxies/assignments/export");
+    if (!resp.ok) return [];
+    const data: { assignments?: Array<{ email: string; proxyId: string }> } = await resp.json();
+    return data.assignments || [];
+  }, []);
+
+  const importPreview = useCallback(
+    async (data: Array<{ email: string; proxyId: string }>): Promise<ImportDiff | null> => {
+      const resp = await fetch("/api/proxies/assignments/import", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ assignments: data }),
+      });
+      if (!resp.ok) return null;
+      const result: ImportDiff = await resp.json();
+      return result;
+    },
+    [],
+  );
+
+  const applyImport = useCallback(
+    async (assignments: Array<{ accountId: string; proxyId: string }>) => {
+      const resp = await fetch("/api/proxies/assignments/apply", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ assignments }),
+      });
+      if (!resp.ok) {
+        const err = await resp.json().catch(() => ({ error: "Request failed" }));
+        throw new Error((err as { error?: string }).error ?? "Request failed");
+      }
+      await refresh();
+    },
+    [refresh],
+  );
+
+  return {
+    accounts,
+    proxies,
+    loading,
+    refresh,
+    assignBulk,
+    assignRule,
+    exportAssignments,
+    importPreview,
+    applyImport,
+  };
+}

shared/i18n/translations.ts

@@ -102,6 +102,42 @@ export const translations = {
     autoRoundRobin: "Auto (Round-Robin)",
     healthInterval: "Health check interval",
     minutes: "min",
+    proxySettings: "Proxy Assignment",
+    proxySettingsDesc: "Bulk manage proxy assignments, import & export.",
+    allAccounts: "All",
+    unassigned: "Unassigned",
+    searchProxy: "Search proxies...",
+    searchAccount: "Search accounts...",
+    statusFilter: "Status",
+    allStatuses: "All Statuses",
+    selected: "selected",
+    accountsCount: "accounts",
+    batchAssignTo: "Batch assign to",
+    applyBtn: "Apply",
+    evenDistribute: "Distribute evenly",
+    ruleAssign: "Rule assign...",
+    importBtn: "Import",
+    exportBtn: "Export",
+    importPreview: "Import Preview",
+    changesCount: "changes",
+    confirmApply: "Confirm Apply",
+    cancelBtn: "Cancel",
+    noChanges: "No changes",
+    roundRobinRule: "Round-robin",
+    assignByStatus: "By status",
+    assignByPrefix: "By email prefix",
+    ruleTarget: "Target proxies",
+    assignRuleTitle: "Rule Assignment",
+    backToDashboard: "Dashboard",
+    pageLabel: "Page",
+    prevPage: "Previous",
+    nextPage: "Next",
+    totalItems: "total",
+    shiftSelectHint: "Shift+click to select range",
+    selectAll: "Select all",
+    exportSuccess: "Export complete",
+    importFile: "Select JSON file",
+    downloadJson: "Download JSON",
   },
   zh: {
     serverOnline: "\u670d\u52a1\u8fd0\u884c\u4e2d",
@@ -209,6 +245,42 @@ export const translations = {
     autoRoundRobin: "\u81ea\u52a8\u8f6e\u8f6c",
     healthInterval: "\u5065\u5eb7\u68c0\u67e5\u95f4\u9694",
     minutes: "\u5206\u949f",
+    proxySettings: "\u4ee3\u7406\u5206\u914d\u7ba1\u7406",
+    proxySettingsDesc: "\u6279\u91cf\u7ba1\u7406\u4ee3\u7406\u5206\u914d\u3001\u5bfc\u5165\u5bfc\u51fa\u3002",
+    allAccounts: "\u5168\u90e8",
+    unassigned: "\u672a\u5206\u914d",
+    searchProxy: "\u641c\u7d22\u4ee3\u7406...",
+    searchAccount: "\u641c\u7d22\u8d26\u53f7...",
+    statusFilter: "\u72b6\u6001",
+    allStatuses: "\u5168\u90e8\u72b6\u6001",
+    selected: "\u5df2\u9009",
+    accountsCount: "\u4e2a\u8d26\u53f7",
+    batchAssignTo: "\u6279\u91cf\u8bbe\u4e3a",
+    applyBtn: "\u5e94\u7528",
+    evenDistribute: "\u5747\u5300\u5206\u914d",
+    ruleAssign: "\u6309\u89c4\u5219\u5206\u914d...",
+    importBtn: "\u5bfc\u5165",
+    exportBtn: "\u5bfc\u51fa",
+    importPreview: "\u5bfc\u5165\u9884\u89c8",
+    changesCount: "\u6761\u53d8\u66f4",
+    confirmApply: "\u786e\u8ba4\u5e94\u7528",
+    cancelBtn: "\u53d6\u6d88",
+    noChanges: "\u65e0\u53d8\u66f4",
+    roundRobinRule: "\u8f6e\u8be2\u5206\u914d",
+    assignByStatus: "\u6309\u72b6\u6001\u5206\u914d",
+    assignByPrefix: "\u6309\u524d\u7f00\u5206\u914d",
+    ruleTarget: "\u76ee\u6807\u4ee3\u7406",
+    assignRuleTitle: "\u89c4\u5219\u5206\u914d",
+    backToDashboard: "Dashboard",
+    pageLabel: "\u7b2c",
+    prevPage: "\u4e0a\u4e00\u9875",
+    nextPage: "\u4e0b\u4e00\u9875",
+    totalItems: "\u5171",
+    shiftSelectHint: "Shift+\u70b9\u51fb\u8fde\u7eed\u591a\u9009",
+    selectAll: "\u5168\u9009",
+    exportSuccess: "\u5bfc\u51fa\u6210\u529f",
+    importFile: "\u9009\u62e9 JSON \u6587\u4ef6",
+    downloadJson: "\u4e0b\u8f7d JSON",
   },
 } as const;
 

src/index.ts

@@ -72,7 +72,7 @@ export async function startServer(options?: StartOptions): Promise<ServerHandle>
   const chatRoutes = createChatRoutes(accountPool, cookieJar, proxyPool);
   const messagesRoutes = createMessagesRoutes(accountPool, cookieJar, proxyPool);
   const geminiRoutes = createGeminiRoutes(accountPool, cookieJar, proxyPool);
-  const proxyRoutes = createProxyRoutes(proxyPool);
+  const proxyRoutes = createProxyRoutes(proxyPool, accountPool);
   const webRoutes = createWebRoutes(accountPool);
 
   app.route("/", authRoutes);

src/proxy/proxy-pool.ts

@@ -160,6 +160,13 @@ export class ProxyPool {
     this.persistNow();
   }
 
+  bulkAssign(assignments: Array<{ accountId: string; proxyId: string }>): void {
+    for (const { accountId, proxyId } of assignments) {
+      this.assignments.set(accountId, proxyId);
+    }
+    this.persistNow();
+  }
+
   unassign(accountId: string): void {
     if (this.assignments.delete(accountId)) {
       this.persistNow();

src/routes/proxies.ts

@@ -16,8 +16,9 @@
 
 import { Hono } from "hono";
 import type { ProxyPool } from "../proxy/proxy-pool.js";
+import type { AccountPool } from "../auth/account-pool.js";
 
-export function createProxyRoutes(proxyPool: ProxyPool): Hono {
+export function createProxyRoutes(proxyPool: ProxyPool, accountPool: AccountPool): Hono {
   const app = new Hono();
 
   // List all proxies + assignments (credentials masked)
@@ -186,6 +187,173 @@ export function createProxyRoutes(proxyPool: ProxyPool): Hono {
     });
   });
 
+  // ── Bulk Assignment Endpoints ────────────────────────────────────
+
+  /** Check if a proxyId is valid (special keyword or existing proxy). */
+  const isValidProxyId = (proxyId: string): boolean =>
+    ["global", "direct", "auto"].includes(proxyId) || !!proxyPool.getById(proxyId);
+
+  // List all accounts with their proxy assignments
+  app.get("/api/proxies/assignments", (c) => {
+    const accounts = accountPool.getAccounts().map((a) => ({
+      id: a.id,
+      email: a.email,
+      status: a.status,
+      proxyId: proxyPool.getAssignment(a.id),
+      proxyName: proxyPool.getAssignmentDisplayName(a.id),
+    }));
+
+    return c.json({
+      accounts,
+      proxies: proxyPool.getAllMasked(),
+    });
+  });
+
+  // Bulk assign proxies to accounts
+  app.post("/api/proxies/assign-bulk", async (c) => {
+    const body = await c.req.json<{
+      assignments?: Array<{ accountId: string; proxyId: string }>;
+    }>();
+
+    if (!Array.isArray(body.assignments) || body.assignments.length === 0) {
+      c.status(400);
+      return c.json({ error: "assignments array is required and must not be empty" });
+    }
+
+    for (const { proxyId } of body.assignments) {
+      if (!isValidProxyId(proxyId)) {
+        c.status(400);
+        return c.json({ error: `Invalid proxyId: "${proxyId}". Use 'global', 'direct', 'auto', or a valid proxy ID.` });
+      }
+    }
+
+    proxyPool.bulkAssign(body.assignments);
+    return c.json({ success: true, applied: body.assignments.length });
+  });
+
+  // Assign by rule (e.g. round-robin distribution)
+  app.post("/api/proxies/assign-rule", async (c) => {
+    const body = await c.req.json<{
+      accountIds?: string[];
+      rule?: string;
+      targetProxyIds?: string[];
+    }>();
+
+    if (!Array.isArray(body.accountIds) || body.accountIds.length === 0) {
+      c.status(400);
+      return c.json({ error: "accountIds array is required" });
+    }
+    if (!Array.isArray(body.targetProxyIds) || body.targetProxyIds.length === 0) {
+      c.status(400);
+      return c.json({ error: "targetProxyIds array is required" });
+    }
+    if (body.rule !== "round-robin") {
+      c.status(400);
+      return c.json({ error: `Unsupported rule: "${body.rule ?? ""}". Supported: "round-robin".` });
+    }
+
+    for (const pid of body.targetProxyIds) {
+      if (!isValidProxyId(pid)) {
+        c.status(400);
+        return c.json({ error: `Invalid targetProxyId: "${pid}"` });
+      }
+    }
+
+    // Distribute accounts evenly across target proxies
+    const assignments: Array<{ accountId: string; proxyId: string }> = [];
+    for (let i = 0; i < body.accountIds.length; i++) {
+      assignments.push({
+        accountId: body.accountIds[i],
+        proxyId: body.targetProxyIds[i % body.targetProxyIds.length],
+      });
+    }
+
+    proxyPool.bulkAssign(assignments);
+    return c.json({ success: true, applied: assignments.length, assignments });
+  });
+
+  // Export assignments (by email for portability)
+  app.get("/api/proxies/assignments/export", (c) => {
+    const allAssignments = proxyPool.getAllAssignments();
+    const emailMap = new Map(accountPool.getAccounts().map((a) => [a.id, a.email]));
+
+    const exported = allAssignments
+      .map((a) => ({
+        email: emailMap.get(a.accountId) ?? null,
+        proxyId: a.proxyId,
+      }))
+      .filter((a): a is { email: string; proxyId: string } => a.email !== null);
+
+    return c.json({ assignments: exported });
+  });
+
+  // Import assignments preview (does NOT apply)
+  app.post("/api/proxies/assignments/import", async (c) => {
+    const body = await c.req.json<{
+      assignments?: Array<{ email: string; proxyId: string }>;
+    }>();
+
+    if (!Array.isArray(body.assignments)) {
+      c.status(400);
+      return c.json({ error: "assignments array is required" });
+    }
+
+    const emailToAccount = new Map(
+      accountPool.getAccounts()
+        .filter((a) => a.email !== null)
+        .map((a) => [a.email, a] as const),
+    );
+
+    const changes: Array<{
+      email: string;
+      accountId: string;
+      from: string;
+      to: string;
+    }> = [];
+    let unchanged = 0;
+
+    for (const { email, proxyId } of body.assignments) {
+      const account = emailToAccount.get(email);
+      if (!account) continue; // skip unknown emails
+
+      const currentProxyId = proxyPool.getAssignment(account.id);
+      if (currentProxyId === proxyId) {
+        unchanged++;
+      } else {
+        changes.push({
+          email,
+          accountId: account.id,
+          from: currentProxyId,
+          to: proxyId,
+        });
+      }
+    }
+
+    return c.json({ changes, unchanged });
+  });
+
+  // Apply imported assignments (same as bulk assign)
+  app.post("/api/proxies/assignments/apply", async (c) => {
+    const body = await c.req.json<{
+      assignments?: Array<{ accountId: string; proxyId: string }>;
+    }>();
+
+    if (!Array.isArray(body.assignments) || body.assignments.length === 0) {
+      c.status(400);
+      return c.json({ error: "assignments array is required and must not be empty" });
+    }
+
+    for (const { proxyId } of body.assignments) {
+      if (!isValidProxyId(proxyId)) {
+        c.status(400);
+        return c.json({ error: `Invalid proxyId: "${proxyId}"` });
+      }
+    }
+
+    proxyPool.bulkAssign(body.assignments);
+    return c.json({ success: true, applied: body.assignments.length });
+  });
+
   return app;
 }
 

web/src/App.tsx

@@ -1,3 +1,4 @@
+import { useState, useEffect } from "preact/hooks";
 import { I18nProvider } from "../../shared/i18n/context";
 import { ThemeProvider } from "../../shared/theme/context";
 import { Header } from "./components/Header";
@@ -8,6 +9,7 @@ import { ApiConfig } from "./components/ApiConfig";
 import { AnthropicSetup } from "./components/AnthropicSetup";
 import { CodeExamples } from "./components/CodeExamples";
 import { Footer } from "./components/Footer";
+import { ProxySettings } from "./pages/ProxySettings";
 import { useAccounts } from "../../shared/hooks/use-accounts";
 import { useProxies } from "../../shared/hooks/use-proxies";
 import { useStatus } from "../../shared/hooks/use-status";
@@ -122,12 +124,44 @@ function Dashboard() {
   );
 }
 
+function useHash(): string {
+  const [hash, setHash] = useState(location.hash);
+  useEffect(() => {
+    const handler = () => setHash(location.hash);
+    window.addEventListener("hashchange", handler);
+    return () => window.removeEventListener("hashchange", handler);
+  }, []);
+  return hash;
+}
+
 export function App() {
+  const hash = useHash();
+  const isProxySettings = hash === "#/proxy-settings";
+
   return (
     <I18nProvider>
       <ThemeProvider>
-        <Dashboard />
+        {isProxySettings ? <ProxySettingsPage /> : <Dashboard />}
       </ThemeProvider>
     </I18nProvider>
   );
 }
+
+function ProxySettingsPage() {
+  const update = useUpdateMessage();
+
+  return (
+    <>
+      <Header
+        onAddAccount={() => { location.hash = ""; }}
+        onCheckUpdate={update.checkForUpdate}
+        checking={update.checking}
+        updateStatusMsg={update.msg}
+        updateStatusColor={update.color}
+        version={update.status?.proxy.version ?? null}
+        isProxySettings
+      />
+      <ProxySettings />
+    </>
+  );
+}

web/src/components/AccountTable.tsx

@@ -0,0 +1,279 @@
+import { useState, useCallback, useRef } from "preact/hooks";
+import { useT } from "../../../shared/i18n/context";
+import type { TranslationKey } from "../../../shared/i18n/translations";
+import type { AssignmentAccount } from "../../../shared/hooks/use-proxy-assignments";
+import type { ProxyEntry } from "../../../shared/types";
+
+const PAGE_SIZE = 50;
+
+const statusStyles: Record<string, [string, TranslationKey]> = {
+  active: [
+    "bg-green-100 text-green-700 border-green-200 dark:bg-[#11281d] dark:text-primary dark:border-[#1a442e]",
+    "active",
+  ],
+  expired: [
+    "bg-red-100 text-red-600 border-red-200 dark:bg-red-900/20 dark:text-red-400 dark:border-red-800/30",
+    "expired",
+  ],
+  rate_limited: [
+    "bg-amber-100 text-amber-700 border-amber-200 dark:bg-amber-900/20 dark:text-amber-400 dark:border-amber-800/30",
+    "rateLimited",
+  ],
+  refreshing: [
+    "bg-blue-100 text-blue-600 border-blue-200 dark:bg-blue-900/20 dark:text-blue-400 dark:border-blue-800/30",
+    "refreshing",
+  ],
+  disabled: [
+    "bg-slate-100 text-slate-500 border-slate-200 dark:bg-slate-800/30 dark:text-slate-400 dark:border-slate-700/30",
+    "disabled",
+  ],
+};
+
+interface AccountTableProps {
+  accounts: AssignmentAccount[];
+  proxies: ProxyEntry[];
+  selectedIds: Set<string>;
+  onSelectionChange: (ids: Set<string>) => void;
+  onSingleProxyChange: (accountId: string, proxyId: string) => void;
+  filterGroup: string | null;
+  statusFilter: string;
+  onStatusFilterChange: (status: string) => void;
+}
+
+export function AccountTable({
+  accounts,
+  proxies,
+  selectedIds,
+  onSelectionChange,
+  onSingleProxyChange,
+  filterGroup,
+  statusFilter,
+  onStatusFilterChange,
+}: AccountTableProps) {
+  const t = useT();
+  const [search, setSearch] = useState("");
+  const [page, setPage] = useState(0);
+  const lastClickedIndex = useRef<number | null>(null);
+
+  // Filter accounts
+  let filtered = accounts;
+
+  // By group
+  if (filterGroup) {
+    filtered = filtered.filter((a) => a.proxyId === filterGroup);
+  }
+
+  // By status
+  if (statusFilter && statusFilter !== "all") {
+    filtered = filtered.filter((a) => a.status === statusFilter);
+  }
+
+  // By search
+  if (search) {
+    const lower = search.toLowerCase();
+    filtered = filtered.filter((a) => a.email.toLowerCase().includes(lower));
+  }
+
+  const totalCount = filtered.length;
+  const totalPages = Math.max(1, Math.ceil(totalCount / PAGE_SIZE));
+  const safePage = Math.min(page, totalPages - 1);
+  const pageAccounts = filtered.slice(safePage * PAGE_SIZE, (safePage + 1) * PAGE_SIZE);
+  const pageAccountsRef = useRef(pageAccounts);
+  pageAccountsRef.current = pageAccounts;
+
+  // Reset page when filters change
+  const handleSearch = useCallback((value: string) => {
+    setSearch(value);
+    setPage(0);
+  }, []);
+
+  const handleStatusFilter = useCallback(
+    (value: string) => {
+      onStatusFilterChange(value);
+      setPage(0);
+    },
+    [onStatusFilterChange],
+  );
+
+  // Select/deselect
+  const toggleSelect = useCallback(
+    (id: string, index: number, shiftKey: boolean) => {
+      const newSet = new Set(selectedIds);
+      const currentPage = pageAccountsRef.current;
+
+      if (shiftKey && lastClickedIndex.current !== null) {
+        // Range select
+        const start = Math.min(lastClickedIndex.current, index);
+        const end = Math.max(lastClickedIndex.current, index);
+        for (let i = start; i <= end; i++) {
+          if (currentPage[i]) {
+            newSet.add(currentPage[i].id);
+          }
+        }
+      } else {
+        if (newSet.has(id)) {
+          newSet.delete(id);
+        } else {
+          newSet.add(id);
+        }
+      }
+
+      lastClickedIndex.current = index;
+      onSelectionChange(newSet);
+    },
+    [selectedIds, onSelectionChange],
+  );
+
+  const toggleSelectAll = useCallback(() => {
+    const currentPage = pageAccountsRef.current;
+    const pageIds = currentPage.map((a) => a.id);
+    const allSelected = pageIds.every((id) => selectedIds.has(id));
+    const newSet = new Set(selectedIds);
+    if (allSelected) {
+      for (const id of pageIds) newSet.delete(id);
+    } else {
+      for (const id of pageIds) newSet.add(id);
+    }
+    onSelectionChange(newSet);
+  }, [selectedIds, onSelectionChange]);
+
+  const allPageSelected = pageAccounts.length > 0 && pageAccounts.every((a) => selectedIds.has(a.id));
+
+  return (
+    <div class="flex flex-col gap-3">
+      {/* Filters */}
+      <div class="flex items-center gap-2">
+        <input
+          type="text"
+          placeholder={t("searchAccount")}
+          value={search}
+          onInput={(e) => handleSearch((e.target as HTMLInputElement).value)}
+          class="flex-1 px-3 py-2 text-sm border border-gray-200 dark:border-border-dark rounded-lg bg-white dark:bg-bg-dark text-slate-700 dark:text-text-main focus:outline-none focus:ring-1 focus:ring-primary"
+        />
+        <select
+          value={statusFilter}
+          onChange={(e) => handleStatusFilter((e.target as HTMLSelectElement).value)}
+          class="px-3 py-2 text-sm border border-gray-200 dark:border-border-dark rounded-lg 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="all">{t("allStatuses")}</option>
+          <option value="active">{t("active")}</option>
+          <option value="expired">{t("expired")}</option>
+          <option value="rate_limited">{t("rateLimited")}</option>
+          <option value="disabled">{t("disabled")}</option>
+        </select>
+      </div>
+
+      {/* Table */}
+      <div class="bg-white dark:bg-card-dark border border-gray-200 dark:border-border-dark rounded-xl overflow-hidden">
+        {/* Table Header */}
+        <div class="flex items-center gap-3 px-4 py-2.5 border-b border-gray-100 dark:border-border-dark bg-slate-50 dark:bg-bg-dark text-xs text-slate-500 dark:text-text-dim font-medium">
+          <label class="flex items-center cursor-pointer shrink-0" title={t("selectAll")}>
+            <input
+              type="checkbox"
+              checked={allPageSelected}
+              onChange={toggleSelectAll}
+              class="rounded border-gray-300 dark:border-border-dark text-primary focus:ring-primary cursor-pointer"
+            />
+          </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>
+        </div>
+
+        {/* Rows */}
+        {pageAccounts.length === 0 ? (
+          <div class="px-4 py-8 text-center text-sm text-slate-400 dark:text-text-dim">
+            {t("noAccounts")}
+          </div>
+        ) : (
+          pageAccounts.map((acct, idx) => {
+            const isSelected = selectedIds.has(acct.id);
+            const [statusCls, statusKey] = statusStyles[acct.status] || statusStyles.disabled;
+
+            return (
+              <div
+                key={acct.id}
+                class={`flex items-center gap-3 px-4 py-2.5 border-b border-gray-50 dark:border-border-dark/50 transition-colors cursor-pointer ${
+                  isSelected
+                    ? "bg-primary/5 dark:bg-primary/10"
+                    : "hover:bg-slate-50 dark:hover:bg-border-dark/30"
+                }`}
+                onClick={(e) => {
+                  if ((e.target as HTMLElement).tagName === "SELECT") return;
+                  toggleSelect(acct.id, idx, e.shiftKey);
+                }}
+              >
+                <label class="flex items-center shrink-0" onClick={(e) => e.stopPropagation()}>
+                  <input
+                    type="checkbox"
+                    checked={isSelected}
+                    onChange={() => toggleSelect(acct.id, idx, false)}
+                    class="rounded border-gray-300 dark:border-border-dark text-primary focus:ring-primary cursor-pointer"
+                  />
+                </label>
+                <span class="flex-1 min-w-0 text-sm font-medium truncate text-slate-700 dark:text-text-main">
+                  {acct.email}
+                </span>
+                <span class="w-20 hidden sm:flex justify-center">
+                  <span class={`px-2 py-0.5 rounded-full text-[0.65rem] font-medium border ${statusCls}`}>
+                    {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>
+              </div>
+            );
+          })
+        )}
+      </div>
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div class="flex items-center justify-between text-xs text-slate-500 dark:text-text-dim">
+          <span>
+            {t("totalItems")} {totalCount}
+          </span>
+          <div class="flex items-center gap-2">
+            <button
+              onClick={() => setPage(Math.max(0, safePage - 1))}
+              disabled={safePage === 0}
+              class="px-2.5 py-1 rounded-md border border-gray-200 dark:border-border-dark hover:bg-slate-50 dark:hover:bg-border-dark disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+            >
+              {t("prevPage")}
+            </button>
+            <span class="font-medium">
+              {safePage + 1} / {totalPages}
+            </span>
+            <button
+              onClick={() => setPage(Math.min(totalPages - 1, safePage + 1))}
+              disabled={safePage >= totalPages - 1}
+              class="px-2.5 py-1 rounded-md border border-gray-200 dark:border-border-dark hover:bg-slate-50 dark:hover:bg-border-dark disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+            >
+              {t("nextPage")}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Hint */}
+      <p class="text-[0.65rem] text-slate-400 dark:text-text-dim text-center">
+        {t("shiftSelectHint")}
+      </p>
+    </div>
+  );
+}

web/src/components/BulkActions.tsx

@@ -0,0 +1,88 @@
+import { useState, useCallback } from "preact/hooks";
+import { useT } from "../../../shared/i18n/context";
+import type { ProxyEntry } from "../../../shared/types";
+
+interface BulkActionsProps {
+  selectedCount: number;
+  selectedIds: Set<string>;
+  proxies: ProxyEntry[];
+  onBulkAssign: (proxyId: string) => void;
+  onEvenDistribute: () => void;
+  onOpenRuleAssign: () => void;
+}
+
+export function BulkActions({
+  selectedCount,
+  selectedIds,
+  proxies,
+  onBulkAssign,
+  onEvenDistribute,
+  onOpenRuleAssign,
+}: BulkActionsProps) {
+  const t = useT();
+  const [targetProxy, setTargetProxy] = useState("global");
+
+  const handleApply = useCallback(() => {
+    if (selectedIds.size === 0) return;
+    onBulkAssign(targetProxy);
+  }, [selectedIds, targetProxy, onBulkAssign]);
+
+  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">
+        {/* Selection count */}
+        <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" />
+
+        {/* Batch assign */}
+        <div class="flex items-center gap-2">
+          <span class="text-xs text-slate-500 dark:text-text-dim shrink-0">{t("batchAssignTo")}:</span>
+          <select
+            value={targetProxy}
+            onChange={(e) => setTargetProxy((e.target as HTMLSelectElement).value)}
+            class="text-xs px-2 py-1.5 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}
+              </option>
+            ))}
+          </select>
+          <button
+            onClick={handleApply}
+            class="px-3 py-1.5 text-xs font-medium rounded-lg bg-primary text-white hover:bg-primary-hover transition-colors"
+          >
+            {t("applyBtn")}
+          </button>
+        </div>
+
+        <div class="h-4 w-px bg-gray-200 dark:bg-border-dark hidden sm:block" />
+
+        {/* Even distribute */}
+        <button
+          onClick={onEvenDistribute}
+          disabled={proxies.length === 0}
+          class="px-3 py-1.5 text-xs font-medium rounded-lg border border-gray-200 dark:border-border-dark hover:bg-slate-50 dark:hover:bg-border-dark transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+        >
+          {t("evenDistribute")}
+        </button>
+
+        {/* Rule assign */}
+        <button
+          onClick={onOpenRuleAssign}
+          class="px-3 py-1.5 text-xs font-medium rounded-lg border border-gray-200 dark:border-border-dark hover:bg-slate-50 dark:hover:bg-border-dark transition-colors"
+        >
+          {t("ruleAssign")}
+        </button>
+      </div>
+    </div>
+  );
+}

web/src/components/Header.tsx

@@ -20,9 +20,10 @@ interface HeaderProps {
   updateStatusMsg: string | null;
   updateStatusColor: string;
   version: string | null;
+  isProxySettings?: boolean;
 }
 
-export function Header({ onAddAccount, onCheckUpdate, checking, updateStatusMsg, updateStatusColor, version }: HeaderProps) {
+export function Header({ onAddAccount, onCheckUpdate, checking, updateStatusMsg, updateStatusColor, version, isProxySettings }: HeaderProps) {
   const { lang, toggleLang, t } = useI18n();
   const { isDark, toggle: toggleTheme } = useTheme();
 
@@ -32,12 +33,26 @@ export function Header({ onAddAccount, onCheckUpdate, checking, updateStatusMsg,
         <div class="flex w-full max-w-[960px] items-center justify-between">
           {/* Logo & Title */}
           <div class="flex items-center gap-3">
-            <div class="flex items-center justify-center size-8 rounded-full bg-primary/10 text-primary border border-primary/20">
-              <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-              </svg>
-            </div>
-            <h1 class="text-[0.9rem] font-bold tracking-tight">Codex Proxy</h1>
+            {isProxySettings ? (
+              <a
+                href="#"
+                class="flex items-center gap-1.5 text-sm text-slate-500 dark:text-text-dim hover:text-primary transition-colors"
+              >
+                <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
+                </svg>
+                <span class="font-medium">{t("backToDashboard")}</span>
+              </a>
+            ) : (
+              <>
+                <div class="flex items-center justify-center size-8 rounded-full bg-primary/10 text-primary border border-primary/20">
+                  <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                </div>
+                <h1 class="text-[0.9rem] font-bold tracking-tight">Codex Proxy</h1>
+              </>
+            )}
           </div>
           {/* Actions */}
           <div class="flex items-center gap-3">
@@ -104,19 +119,32 @@ export function Header({ onAddAccount, onCheckUpdate, checking, updateStatusMsg,
             >
               {isDark ? SVG_SUN : SVG_MOON}
             </button>
-            {/* Add Account */}
-            <button
-              onClick={onAddAccount}
-              class="flex items-center gap-2 px-4 py-2 bg-primary hover:bg-primary-hover text-white text-xs font-semibold rounded-lg transition-colors shadow-sm active:scale-95"
-            >
-              <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-              </svg>
-              <span class="inline-grid">
-                <span class="invisible col-start-1 row-start-1">Add Account</span>
-                <span class="col-start-1 row-start-1">{t("addAccount")}</span>
-              </span>
-            </button>
+            {/* Proxy Settings / Add Account */}
+            {isProxySettings ? null : (
+              <>
+                <a
+                  href="#/proxy-settings"
+                  class="hidden sm:flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-gray-200 dark:border-border-dark text-slate-600 dark:text-text-dim hover:bg-slate-50 dark:hover:bg-border-dark transition-colors"
+                >
+                  <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
+                  </svg>
+                  <span class="text-xs font-semibold">{t("proxySettings")}</span>
+                </a>
+                <button
+                  onClick={onAddAccount}
+                  class="flex items-center gap-2 px-4 py-2 bg-primary hover:bg-primary-hover text-white text-xs font-semibold rounded-lg transition-colors shadow-sm active:scale-95"
+                >
+                  <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+                  </svg>
+                  <span class="inline-grid">
+                    <span class="invisible col-start-1 row-start-1">Add Account</span>
+                    <span class="col-start-1 row-start-1">{t("addAccount")}</span>
+                  </span>
+                </button>
+              </>
+            )}
           </div>
         </div>
       </div>

web/src/components/ImportExport.tsx

@@ -0,0 +1,168 @@
+import { useState, useCallback, useRef } from "preact/hooks";
+import { useT } from "../../../shared/i18n/context";
+import type { ImportDiff } from "../../../shared/hooks/use-proxy-assignments";
+
+interface ImportExportProps {
+  onExport: () => Promise<Array<{ email: string; proxyId: string }>>;
+  onImportPreview: (data: Array<{ email: string; proxyId: string }>) => Promise<ImportDiff | null>;
+  onApplyImport: (assignments: Array<{ accountId: string; proxyId: string }>) => Promise<void>;
+}
+
+export function ImportExport({ onExport, onImportPreview, onApplyImport }: ImportExportProps) {
+  const t = useT();
+  const [showImport, setShowImport] = useState(false);
+  const [diff, setDiff] = useState<ImportDiff | null>(null);
+  const [importing, setImporting] = useState(false);
+  const fileRef = useRef<HTMLInputElement>(null);
+
+  const handleExport = useCallback(async () => {
+    const data = await onExport();
+    const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "proxy-assignments.json";
+    a.click();
+    URL.revokeObjectURL(url);
+  }, [onExport]);
+
+  const handleFileSelect = useCallback(async () => {
+    const file = fileRef.current?.files?.[0];
+    if (!file) return;
+
+    try {
+      const text = await file.text();
+      const parsed = JSON.parse(text) as Array<{ email: string; proxyId: string }>;
+      if (!Array.isArray(parsed)) {
+        alert("Invalid format: expected array of { email, proxyId }");
+        return;
+      }
+      setImporting(true);
+      const result = await onImportPreview(parsed);
+      setDiff(result);
+      setImporting(false);
+    } catch {
+      alert("Failed to parse JSON file");
+    }
+  }, [onImportPreview]);
+
+  const handleApply = useCallback(async () => {
+    if (!diff || diff.changes.length === 0) return;
+    setImporting(true);
+    await onApplyImport(
+      diff.changes.map((c) => ({ accountId: c.accountId, proxyId: c.to })),
+    );
+    setImporting(false);
+    setDiff(null);
+    setShowImport(false);
+  }, [diff, onApplyImport]);
+
+  const handleClose = useCallback(() => {
+    setShowImport(false);
+    setDiff(null);
+    if (fileRef.current) fileRef.current.value = "";
+  }, []);
+
+  return (
+    <>
+      {/* Buttons */}
+      <div class="flex items-center gap-2">
+        <button
+          onClick={() => setShowImport(true)}
+          class="px-3 py-1.5 text-xs font-medium rounded-lg border border-gray-200 dark:border-border-dark hover:bg-slate-50 dark:hover:bg-border-dark transition-colors"
+        >
+          {t("importBtn")}
+        </button>
+        <button
+          onClick={handleExport}
+          class="px-3 py-1.5 text-xs font-medium rounded-lg border border-gray-200 dark:border-border-dark hover:bg-slate-50 dark:hover:bg-border-dark transition-colors"
+        >
+          {t("exportBtn")}
+        </button>
+      </div>
+
+      {/* Import Modal */}
+      {showImport && (
+        <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={handleClose}>
+          <div
+            class="bg-white dark:bg-card-dark border border-gray-200 dark:border-border-dark rounded-xl p-6 w-full max-w-lg mx-4 shadow-xl"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <h3 class="text-lg font-semibold mb-4">{t("importPreview")}</h3>
+
+            {!diff ? (
+              <div class="space-y-4">
+                <p class="text-sm text-slate-500 dark:text-text-dim">{t("importFile")}</p>
+                <input
+                  ref={fileRef}
+                  type="file"
+                  accept=".json"
+                  onChange={handleFileSelect}
+                  class="block w-full text-sm text-slate-500 dark:text-text-dim file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-primary/10 file:text-primary hover:file:bg-primary/20 cursor-pointer"
+                />
+                {importing && (
+                  <p class="text-sm text-slate-500 dark:text-text-dim animate-pulse">Loading...</p>
+                )}
+              </div>
+            ) : (
+              <div class="space-y-4">
+                {diff.changes.length === 0 ? (
+                  <p class="text-sm text-slate-500 dark:text-text-dim">{t("noChanges")}</p>
+                ) : (
+                  <>
+                    <p class="text-sm font-medium">
+                      {diff.changes.length} {t("changesCount")}
+                      {diff.unchanged > 0 && (
+                        <span class="text-slate-400 dark:text-text-dim ml-2">
+                          ({diff.unchanged} unchanged)
+                        </span>
+                      )}
+                    </p>
+                    <div class="max-h-60 overflow-y-auto border border-gray-100 dark:border-border-dark rounded-lg">
+                      {diff.changes.map((c) => (
+                        <div
+                          key={c.accountId}
+                          class="flex items-center justify-between px-3 py-2 text-xs border-b border-gray-50 dark:border-border-dark/50"
+                        >
+                          <span class="font-medium truncate flex-1 text-slate-700 dark:text-text-main">
+                            {c.email}
+                          </span>
+                          <span class="flex items-center gap-1.5 shrink-0 ml-2">
+                            <span class="text-slate-400 dark:text-text-dim">{c.from}</span>
+                            <svg class="size-3 text-slate-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                              <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
+                            </svg>
+                            <span class="text-primary font-medium">{c.to}</span>
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  </>
+                )}
+              </div>
+            )}
+
+            {/* Actions */}
+            <div class="flex items-center justify-end gap-2 mt-4">
+              <button
+                onClick={handleClose}
+                class="px-4 py-2 text-sm rounded-lg border border-gray-200 dark:border-border-dark hover:bg-slate-50 dark:hover:bg-border-dark transition-colors"
+              >
+                {t("cancelBtn")}
+              </button>
+              {diff && diff.changes.length > 0 && (
+                <button
+                  onClick={handleApply}
+                  disabled={importing}
+                  class="px-4 py-2 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-hover transition-colors disabled:opacity-50"
+                >
+                  {importing ? "..." : t("confirmApply")}
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

web/src/components/ProxyGroupList.tsx

@@ -0,0 +1,96 @@
+import { useState } from "preact/hooks";
+import { useT } from "../../../shared/i18n/context";
+import type { AssignmentAccount } from "../../../shared/hooks/use-proxy-assignments";
+import type { ProxyEntry } from "../../../shared/types";
+
+interface ProxyGroup {
+  id: string;
+  label: string;
+  count: number;
+}
+
+interface ProxyGroupListProps {
+  accounts: AssignmentAccount[];
+  proxies: ProxyEntry[];
+  selectedGroup: string | null;
+  onSelectGroup: (groupId: string | null) => void;
+}
+
+export function ProxyGroupList({ accounts, proxies, selectedGroup, onSelectGroup }: ProxyGroupListProps) {
+  const t = useT();
+  const [search, setSearch] = useState("");
+
+  // Build groups with counts
+  const groups: ProxyGroup[] = [];
+
+  // "All"
+  groups.push({ id: "__all__", label: t("allAccounts"), count: accounts.length });
+
+  // Count by assignment
+  const countMap = new Map<string, number>();
+  for (const acct of accounts) {
+    const key = acct.proxyId || "global";
+    countMap.set(key, (countMap.get(key) || 0) + 1);
+  }
+
+  // Special groups
+  groups.push({ id: "global", label: t("globalDefault"), count: countMap.get("global") || 0 });
+
+  // Proxy entries
+  for (const p of proxies) {
+    groups.push({ id: p.id, label: p.name, count: countMap.get(p.id) || 0 });
+  }
+
+  groups.push({ id: "direct", label: t("directNoProxy"), count: countMap.get("direct") || 0 });
+  groups.push({ id: "auto", label: t("autoRoundRobin"), count: countMap.get("auto") || 0 });
+
+  // "Unassigned" — accounts not in any explicit assignment (they default to "global")
+  // Since getAssignment defaults to "global", all accounts have a proxyId.
+  // "Unassigned" is not really a separate bucket in this model — skip or show 0.
+
+  const lowerSearch = search.toLowerCase();
+  const filtered = search
+    ? groups.filter((g) => g.label.toLowerCase().includes(lowerSearch))
+    : groups;
+
+  const active = selectedGroup ?? "__all__";
+
+  return (
+    <div class="flex flex-col gap-1">
+      {/* Search */}
+      <input
+        type="text"
+        placeholder={t("searchProxy")}
+        value={search}
+        onInput={(e) => setSearch((e.target as HTMLInputElement).value)}
+        class="px-3 py-2 text-sm border border-gray-200 dark:border-border-dark rounded-lg bg-white dark:bg-bg-dark text-slate-700 dark:text-text-main focus:outline-none focus:ring-1 focus:ring-primary mb-2"
+      />
+
+      {filtered.map((g) => {
+        const isActive = active === g.id;
+        return (
+          <button
+            key={g.id}
+            onClick={() => onSelectGroup(g.id === "__all__" ? null : g.id)}
+            class={`flex items-center justify-between px-3 py-2 rounded-lg text-sm transition-colors text-left ${
+              isActive
+                ? "bg-primary/10 text-primary font-medium border border-primary/20"
+                : "hover:bg-slate-50 dark:hover:bg-border-dark text-slate-700 dark:text-text-main"
+            }`}
+          >
+            <span class="truncate">{g.label}</span>
+            <span
+              class={`ml-2 px-2 py-0.5 rounded-full text-xs font-medium shrink-0 ${
+                isActive
+                  ? "bg-primary/20 text-primary"
+                  : "bg-slate-100 dark:bg-border-dark text-slate-500 dark:text-text-dim"
+              }`}
+            >
+              {g.count}
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

web/src/components/RuleAssign.tsx

@@ -0,0 +1,113 @@
+import { useState, useCallback } from "preact/hooks";
+import { useT } from "../../../shared/i18n/context";
+import type { ProxyEntry } from "../../../shared/types";
+
+interface RuleAssignProps {
+  proxies: ProxyEntry[];
+  selectedCount: number;
+  onAssign: (rule: string, targetProxyIds: string[]) => void;
+  onClose: () => void;
+}
+
+export function RuleAssign({ proxies, selectedCount, onAssign, onClose }: RuleAssignProps) {
+  const t = useT();
+  const [rule, setRule] = useState("round-robin");
+  const [targetIds, setTargetIds] = useState<Set<string>>(
+    () => new Set(proxies.filter((p) => p.status === "active").map((p) => p.id)),
+  );
+
+  const toggleTarget = useCallback((id: string) => {
+    setTargetIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  }, []);
+
+  const handleApply = useCallback(() => {
+    if (targetIds.size === 0) return;
+    onAssign(rule, Array.from(targetIds));
+  }, [rule, targetIds, onAssign]);
+
+  // Also include special values
+  const allTargets = [
+    { id: "global", label: t("globalDefault"), status: "active" as const },
+    { id: "direct", label: t("directNoProxy"), status: "active" as const },
+    ...proxies.map((p) => ({ id: p.id, label: p.name, status: p.status })),
+  ];
+
+  return (
+    <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
+      <div
+        class="bg-white dark:bg-card-dark border border-gray-200 dark:border-border-dark rounded-xl p-6 w-full max-w-md mx-4 shadow-xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <h3 class="text-lg font-semibold mb-1">{t("assignRuleTitle")}</h3>
+        <p class="text-xs text-slate-500 dark:text-text-dim mb-4">
+          {selectedCount} {t("accountsCount")} {t("selected")}
+        </p>
+
+        {/* Rule selection */}
+        <div class="mb-4">
+          <label class="text-xs font-medium text-slate-600 dark:text-text-dim block mb-1.5">
+            {t("assignRuleTitle")}
+          </label>
+          <select
+            value={rule}
+            onChange={(e) => setRule((e.target as HTMLSelectElement).value)}
+            class="w-full px-3 py-2 text-sm border border-gray-200 dark:border-border-dark rounded-lg 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="round-robin">{t("roundRobinRule")}</option>
+          </select>
+        </div>
+
+        {/* Target proxies */}
+        <div class="mb-4">
+          <label class="text-xs font-medium text-slate-600 dark:text-text-dim block mb-1.5">
+            {t("ruleTarget")}
+          </label>
+          <div class="max-h-48 overflow-y-auto border border-gray-100 dark:border-border-dark rounded-lg">
+            {allTargets.map((target) => (
+              <label
+                key={target.id}
+                class="flex items-center gap-2 px-3 py-2 border-b border-gray-50 dark:border-border-dark/50 hover:bg-slate-50 dark:hover:bg-border-dark/30 cursor-pointer"
+              >
+                <input
+                  type="checkbox"
+                  checked={targetIds.has(target.id)}
+                  onChange={() => toggleTarget(target.id)}
+                  class="rounded border-gray-300 dark:border-border-dark text-primary focus:ring-primary"
+                />
+                <span class="text-sm text-slate-700 dark:text-text-main">{target.label}</span>
+                {target.status !== "active" && (
+                  <span class="text-[0.6rem] text-slate-400 dark:text-text-dim">({target.status})</span>
+                )}
+              </label>
+            ))}
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div class="flex items-center justify-end gap-2">
+          <button
+            onClick={onClose}
+            class="px-4 py-2 text-sm rounded-lg border border-gray-200 dark:border-border-dark hover:bg-slate-50 dark:hover:bg-border-dark transition-colors"
+          >
+            {t("cancelBtn")}
+          </button>
+          <button
+            onClick={handleApply}
+            disabled={targetIds.size === 0}
+            class="px-4 py-2 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-hover transition-colors disabled:opacity-50"
+          >
+            {t("applyBtn")}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

web/src/pages/ProxySettings.tsx

@@ -0,0 +1,154 @@
+import { useState, useCallback } from "preact/hooks";
+import { useT } from "../../../shared/i18n/context";
+import { useProxyAssignments } from "../../../shared/hooks/use-proxy-assignments";
+import { ProxyGroupList } from "../components/ProxyGroupList";
+import { AccountTable } from "../components/AccountTable";
+import { BulkActions } from "../components/BulkActions";
+import { ImportExport } from "../components/ImportExport";
+import { RuleAssign } from "../components/RuleAssign";
+
+export function ProxySettings() {
+  const t = useT();
+  const data = useProxyAssignments();
+  const [selectedGroup, setSelectedGroup] = useState<string | null>(null);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [statusFilter, setStatusFilter] = useState("all");
+  const [showRuleAssign, setShowRuleAssign] = useState(false);
+
+  // Single account proxy change (optimistic)
+  const handleSingleProxyChange = useCallback(
+    async (accountId: string, proxyId: string) => {
+      await data.assignBulk([{ accountId, proxyId }]);
+    },
+    [data.assignBulk],
+  );
+
+  // Bulk assign all selected to a single proxy
+  const handleBulkAssign = useCallback(
+    async (proxyId: string) => {
+      const assignments = Array.from(selectedIds).map((accountId) => ({ accountId, proxyId }));
+      await data.assignBulk(assignments);
+      setSelectedIds(new Set());
+    },
+    [selectedIds, data.assignBulk],
+  );
+
+  // Even distribute selected across all active proxies
+  const handleEvenDistribute = useCallback(async () => {
+    const activeProxies = data.proxies.filter((p) => p.status === "active");
+    if (activeProxies.length === 0) return;
+
+    const ids = Array.from(selectedIds);
+    await data.assignRule(ids, "round-robin", activeProxies.map((p) => p.id));
+    setSelectedIds(new Set());
+  }, [selectedIds, data.proxies, data.assignRule]);
+
+  // Rule-based assignment
+  const handleRuleAssign = useCallback(
+    async (rule: string, targetProxyIds: string[]) => {
+      const ids = Array.from(selectedIds);
+      await data.assignRule(ids, rule, targetProxyIds);
+      setSelectedIds(new Set());
+      setShowRuleAssign(false);
+    },
+    [selectedIds, data.assignRule],
+  );
+
+  if (data.loading) {
+    return (
+      <div class="flex-grow flex items-center justify-center">
+        <div class="text-sm text-slate-400 dark:text-text-dim animate-pulse">Loading...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div class="flex flex-col flex-grow">
+      {/* Top bar */}
+      <div class="px-4 md:px-8 lg:px-40 py-4 border-b border-gray-200 dark:border-border-dark bg-white dark:bg-card-dark">
+        <div class="flex items-center justify-between max-w-[1200px] mx-auto">
+          <div>
+            <h2 class="text-lg font-bold">{t("proxySettings")}</h2>
+            <p class="text-xs text-slate-500 dark:text-text-dim mt-0.5">
+              {t("proxySettingsDesc")}
+            </p>
+          </div>
+          <ImportExport
+            onExport={data.exportAssignments}
+            onImportPreview={data.importPreview}
+            onApplyImport={data.applyImport}
+          />
+        </div>
+      </div>
+
+      {/* Main content */}
+      <div class="flex-grow px-4 md:px-8 lg:px-40 py-6">
+        <div class="flex gap-6 max-w-[1200px] mx-auto">
+          {/* Left sidebar — proxy groups */}
+          <div class="w-56 shrink-0 hidden lg:block">
+            <ProxyGroupList
+              accounts={data.accounts}
+              proxies={data.proxies}
+              selectedGroup={selectedGroup}
+              onSelectGroup={setSelectedGroup}
+            />
+          </div>
+
+          {/* Right panel — account table */}
+          <div class="flex-1 min-w-0">
+            {/* Mobile group filter */}
+            <div class="lg:hidden mb-3">
+              <select
+                value={selectedGroup ?? "__all__"}
+                onChange={(e) => {
+                  const v = (e.target as HTMLSelectElement).value;
+                  setSelectedGroup(v === "__all__" ? null : v);
+                }}
+                class="w-full px-3 py-2 text-sm border border-gray-200 dark:border-border-dark rounded-lg 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="__all__">{t("allAccounts")} ({data.accounts.length})</option>
+                <option value="global">{t("globalDefault")}</option>
+                {data.proxies.map((p) => (
+                  <option key={p.id} value={p.id}>{p.name}</option>
+                ))}
+                <option value="direct">{t("directNoProxy")}</option>
+                <option value="auto">{t("autoRoundRobin")}</option>
+              </select>
+            </div>
+
+            <AccountTable
+              accounts={data.accounts}
+              proxies={data.proxies}
+              selectedIds={selectedIds}
+              onSelectionChange={setSelectedIds}
+              onSingleProxyChange={handleSingleProxyChange}
+              filterGroup={selectedGroup}
+              statusFilter={statusFilter}
+              onStatusFilterChange={setStatusFilter}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Bulk actions bar */}
+      <BulkActions
+        selectedCount={selectedIds.size}
+        selectedIds={selectedIds}
+        proxies={data.proxies}
+        onBulkAssign={handleBulkAssign}
+        onEvenDistribute={handleEvenDistribute}
+        onOpenRuleAssign={() => setShowRuleAssign(true)}
+      />
+
+      {/* Rule assign modal */}
+      {showRuleAssign && (
+        <RuleAssign
+          proxies={data.proxies}
+          selectedCount={selectedIds.size}
+          onAssign={handleRuleAssign}
+          onClose={() => setShowRuleAssign(false)}
+        />
+      )}
+    </div>
+  );
+}