refactor: migrate electron from branch to npm workspace

Electron code moved from a separate branch into packages/electron/,
eliminating the fragile master→electron branch sync that caused
frequent merge conflicts (package.json, lockfile, release.yml).

- Add npm workspaces to root package.json
- Create packages/electron/ with independent deps (electron, electron-builder, esbuild)
- Desktop UI imports use @shared / Vite alias instead of deep relative paths
- Rewrite release.yml for workspace-aware build
- Delete sync-electron.yml (no longer needed)
- Cherry-pick setup-curl.ts fixes from electron branch (GITHUB_TOKEN, dll rename, tar fallback)

.github/workflows/release.yml

@@ -7,7 +7,7 @@ on:
   workflow_dispatch:
     inputs:
       tag:
-        description: "Tag to release (e.g. v1.0.11)"
+        description: "Tag to release (e.g. v1.0.57)"
         required: true
         type: string
 
@@ -49,7 +49,7 @@ jobs:
           node-version: 20
           cache: npm
 
-      - name: Install root dependencies
+      - name: Install all workspace dependencies
         run: npm ci --ignore-scripts
 
       - name: Setup curl-impersonate
@@ -57,29 +57,27 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Install web dependencies
+      - name: Install web frontend dependencies
         run: cd web && npm ci
 
-      - name: Install desktop dependencies
-        run: cd desktop && npm ci
+      - name: Install desktop frontend dependencies
+        run: cd packages/electron/desktop && npm ci
 
-      - name: Build app
-        run: npm run app:build
+      - name: Build core (web + tsc)
+        run: npm run build
 
-      - name: Pack (${{ matrix.platform }}${{ matrix.arch && format('-{0}', matrix.arch) || '' }})
-        run: npx electron-builder --config electron-builder.yml --${{ matrix.platform }} ${{ matrix.arch && format('--{0}', matrix.arch) || '' }} --publish never
+      - name: Build desktop frontend
+        run: cd packages/electron/desktop && npx vite build
 
-      - name: Upload artifacts
-        uses: actions/upload-artifact@v4
-        with:
-          name: release-${{ matrix.artifact }}
-          path: |
-            release/*.exe
-            release/*.dmg
-            release/*.AppImage
-            release/*.yml
-            release/*.yaml
-          if-no-files-found: ignore
+      - name: Bundle Electron (esbuild)
+        working-directory: packages/electron
+        run: node electron/build.mjs
+
+      - name: Pack (${{ matrix.platform }}${{ matrix.arch && format('-{0}', matrix.arch) || '' }})
+        working-directory: packages/electron
+        run: npx electron-builder --config electron-builder.yml --${{ matrix.platform }} ${{ matrix.arch && format('--{0}', matrix.arch) || '' }} --publish always
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
   release:
     needs: build
@@ -93,20 +91,13 @@ jobs:
           ref: ${{ inputs.tag || github.ref }}
           fetch-depth: 0
 
-      - name: Download all artifacts
-        uses: actions/download-artifact@v4
-        with:
-          path: artifacts
-          merge-multiple: true
-
       - name: Resolve tag
         id: tag
         run: |
           TAG="${{ inputs.tag || github.ref_name }}"
           echo "name=$TAG" >> "$GITHUB_OUTPUT"
 
-      - name: Generate release notes
-        id: notes
+      - name: Generate release notes and publish
         run: |
           TAG="${{ steps.tag.outputs.name }}"
           PREV_TAG=$(git tag --sort=-v:refname | grep '^v' | grep -v "^${TAG}$" | head -1)
@@ -120,17 +111,8 @@ jobs:
               BODY="Bug fixes and improvements"
             fi
           fi
-          {
-            echo "NOTES<<EOFNOTES"
-            echo "$BODY"
-            echo "EOFNOTES"
-          } >> "$GITHUB_OUTPUT"
-
-      - name: Create GitHub Release
-        uses: softprops/action-gh-release@v2
-        with:
-          tag_name: ${{ steps.tag.outputs.name }}
-          body: ${{ steps.notes.outputs.NOTES }}
-          draft: false
-          prerelease: false
-          files: artifacts/*
+          echo "$BODY" > /tmp/release-notes.md
+          gh release edit "$TAG" --draft=false --notes-file /tmp/release-notes.md 2>/dev/null || \
+            gh release create "$TAG" --title "$TAG" --notes-file /tmp/release-notes.md
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/sync-electron.yml

@@ -1,146 +0,0 @@
-name: Sync master → electron
-
-on:
-  push:
-    branches: [master]
-  workflow_dispatch:
-
-concurrency:
-  group: sync-electron
-  cancel-in-progress: false
-
-permissions:
-  actions: write
-  contents: write
-  issues: write
-
-jobs:
-  sync:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Merge master into electron
-        run: |
-          git config user.name "github-actions[bot]"
-          git config user.email "github-actions[bot]@users.noreply.github.com"
-
-          git checkout electron
-          git merge origin/master --no-edit || {
-            # Conflict — abort and create issue
-            git merge --abort
-            echo "CONFLICT=true" >> "$GITHUB_ENV"
-          }
-
-      - name: Auto bump + tag if new commits
-        if: env.CONFLICT != 'true'
-        run: |
-          # Find last version tag
-          LAST_TAG=$(git describe --tags --abbrev=0 --match "v*" 2>/dev/null || echo "")
-          if [ -z "$LAST_TAG" ]; then
-            echo "No previous tag found, skipping auto-bump"
-            echo "BUMP=false" >> "$GITHUB_ENV"
-            exit 0
-          fi
-
-          # Check for new non-merge commits since last tag
-          NEW_COMMITS=$(git log "${LAST_TAG}..HEAD" --no-merges --oneline | wc -l)
-          if [ "$NEW_COMMITS" -eq 0 ]; then
-            echo "No new non-merge commits since $LAST_TAG, skipping bump"
-            echo "BUMP=false" >> "$GITHUB_ENV"
-            exit 0
-          fi
-
-          echo "Found $NEW_COMMITS new commit(s) since $LAST_TAG"
-
-          # Parse current version and bump patch
-          CURRENT="${LAST_TAG#v}"
-          IFS='.' read -r MAJOR MINOR PATCH <<< "$CURRENT"
-          NEW_PATCH=$((PATCH + 1))
-          NEW_VERSION="${MAJOR}.${MINOR}.${NEW_PATCH}"
-          NEW_TAG="v${NEW_VERSION}"
-
-          # Check tag doesn't already exist (concurrent protection)
-          if git rev-parse "$NEW_TAG" >/dev/null 2>&1; then
-            echo "Tag $NEW_TAG already exists, skipping"
-            echo "BUMP=false" >> "$GITHUB_ENV"
-            exit 0
-          fi
-
-          # Bump version in package.json
-          node -e "
-            const fs = require('fs');
-            const pkg = JSON.parse(fs.readFileSync('package.json', 'utf-8'));
-            pkg.version = '${NEW_VERSION}';
-            fs.writeFileSync('package.json', JSON.stringify(pkg, null, 2) + '\n');
-          "
-
-          git add package.json
-          git commit -m "chore: bump version to ${NEW_VERSION}"
-          git tag -a "$NEW_TAG" -m "Release ${NEW_TAG}"
-
-          echo "BUMP=true" >> "$GITHUB_ENV"
-          echo "NEW_TAG=$NEW_TAG" >> "$GITHUB_ENV"
-          echo "NEW_VERSION=$NEW_VERSION" >> "$GITHUB_ENV"
-          echo "Bumped to $NEW_VERSION, tagged $NEW_TAG"
-
-      - name: Sync version to master
-        if: env.BUMP == 'true'
-        run: |
-          git checkout master
-          node -e "
-            const fs = require('fs');
-            const pkg = JSON.parse(fs.readFileSync('package.json', 'utf-8'));
-            pkg.version = process.env.NEW_VERSION;
-            fs.writeFileSync('package.json', JSON.stringify(pkg, null, 2) + '\n');
-          "
-          git add package.json
-          git commit -m "chore: sync version to ${NEW_VERSION} [skip ci]"
-          git checkout electron
-
-      - name: Push electron + master + tags
-        if: env.CONFLICT != 'true'
-        run: |
-          if [ "$BUMP" = "true" ]; then
-            git push origin electron master --follow-tags
-          else
-            git push origin electron
-          fi
-
-      - name: Trigger release workflow
-        if: env.BUMP == 'true'
-        run: gh workflow run release.yml -f tag="$NEW_TAG" --ref electron
-        env:
-          GH_TOKEN: ${{ github.token }}
-
-      - name: Create issue on conflict
-        if: env.CONFLICT == 'true'
-        run: |
-          # Check for existing open issue to avoid duplicates
-          EXISTING=$(gh issue list --label "sync-conflict" --state open --limit 1 --json number -q '.[0].number')
-          if [ -n "$EXISTING" ]; then
-            echo "Issue #$EXISTING already open, skipping"
-            exit 0
-          fi
-          gh issue create \
-            --title "electron 分支合并冲突需手动解决" \
-            --label "sync-conflict" \
-            --body "$(cat <<'EOF'
-          \`master\` → \`electron\` 自动合并失败，需要手动解决冲突。
-
-          ```bash
-          git checkout electron
-          git merge master
-          # 解决冲突（通常是 CHANGELOG.md）
-          git add .
-          git commit
-          git push origin electron
-          ```
-
-          触发 commit: ${{ github.sha }}
-          EOF
-          )"
-        env:
-          GH_TOKEN: ${{ github.token }}

CHANGELOG.md

@@ -6,6 +6,11 @@
 
 ## [Unreleased]
 
+### Changed
+
+- Electron 桌面端从独立分支迁移为 npm workspace（`packages/electron/`），消除 master→electron 分支同步冲突；删除 `sync-electron.yml`，release.yml 改为 workspace 感知构建
+- `scripts/setup-curl.ts`：加入 GITHUB_TOKEN 认证避免 CI rate limit；Windows DLL 名适配 v1.5+（`libcurl-impersonate.dll`）；tar 解压 bsdtar/GNU tar 自动 fallback
+
 ### Added
 
 - Dashboard 额度设置面板：可在 Web UI 直接调整额度刷新间隔、主/次预警阈值、自动跳过耗尽账号开关，无需手动编辑 YAML；API `GET/POST /admin/quota-settings` 支持鉴权 (#92)

package.json

@@ -9,6 +9,9 @@
     }
   ],
   "type": "module",
+  "workspaces": [
+    "packages/*"
+  ],
   "scripts": {
     "test": "vitest run",
     "test:watch": "vitest",

packages/electron/desktop/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Codex Proxy</title>
+  <script>
+    try {
+      const t = localStorage.getItem('codex-proxy-theme');
+      if (t === 'dark' || (!t && window.matchMedia('(prefers-color-scheme: dark)').matches))
+        document.documentElement.classList.add('dark');
+    } catch {}
+  </script>
+</head>
+<body class="bg-bg-light dark:bg-bg-dark font-display text-slate-900 dark:text-text-main antialiased min-h-screen flex flex-col transition-colors">
+  <div id="app"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>

packages/electron/desktop/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@codex-proxy/desktop",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@preact/preset-vite": "^2.10.3",
+    "@tailwindcss/vite": "^4.2.1",
+    "autoprefixer": "^10.4.27",
+    "postcss": "^8.5.8",
+    "preact": "^10.28.4",
+    "tailwindcss": "^3.4.19",
+    "vite": "^7.3.1"
+  }
+}

packages/electron/desktop/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

packages/electron/desktop/src/App.tsx

@@ -0,0 +1,136 @@
+import { useState, useEffect } from "preact/hooks";
+import { I18nProvider } from "@shared/i18n/context";
+import { ThemeProvider } from "@shared/theme/context";
+import { Header } from "./components/Header";
+import { AccountList } from "./components/AccountList";
+import { AddAccount } from "./components/AddAccount";
+import { ProxyPool } from "./components/ProxyPool";
+import { ApiConfig } from "./components/ApiConfig";
+import { AnthropicSetup } from "./components/AnthropicSetup";
+import { CodeExamples } from "./components/CodeExamples";
+import { TestConnection } from "./components/TestConnection";
+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";
+import { useUpdateStatus } from "@shared/hooks/use-update-status";
+
+/** Minimal status hook — only used for version/commit display.
+ *  Updates are handled by electron-updater via system tray. */
+function useVersionInfo() {
+  const update = useUpdateStatus();
+  return {
+    version: update.status?.proxy.version ?? null,
+    commit: update.status?.proxy.commit ?? null,
+  };
+}
+
+function Dashboard() {
+  const accounts = useAccounts();
+  const proxies = useProxies();
+  const status = useStatus(accounts.list.length);
+  const versionInfo = useVersionInfo();
+
+  const handleProxyChange = async (accountId: string, proxyId: string) => {
+    accounts.patchLocal(accountId, { proxyId });
+    await proxies.assignProxy(accountId, proxyId);
+  };
+
+  return (
+    <>
+      <Header
+        onAddAccount={accounts.startAdd}
+        version={versionInfo.version}
+        commit={versionInfo.commit}
+      />
+      <main class="flex-grow px-4 md:px-8 lg:px-40 py-8 flex justify-center">
+        <div class="flex flex-col w-full max-w-[960px] gap-6">
+          <AddAccount
+            visible={accounts.addVisible}
+            onSubmitRelay={accounts.submitRelay}
+            addInfo={accounts.addInfo}
+            addError={accounts.addError}
+          />
+          <AccountList
+            accounts={accounts.list}
+            loading={accounts.loading}
+            onDelete={accounts.deleteAccount}
+            onRefresh={accounts.refresh}
+            refreshing={accounts.refreshing}
+            lastUpdated={accounts.lastUpdated}
+            proxies={proxies.proxies}
+            onProxyChange={handleProxyChange}
+          />
+          <ProxyPool proxies={proxies} />
+          <ApiConfig
+            baseUrl={status.baseUrl}
+            apiKey={status.apiKey}
+            models={status.models}
+            selectedModel={status.selectedModel}
+            onModelChange={status.setSelectedModel}
+            modelFamilies={status.modelFamilies}
+            selectedEffort={status.selectedEffort}
+            onEffortChange={status.setSelectedEffort}
+            selectedSpeed={status.selectedSpeed}
+            onSpeedChange={status.setSelectedSpeed}
+          />
+          <AnthropicSetup
+            apiKey={status.apiKey}
+            selectedModel={status.selectedModel}
+            reasoningEffort={status.selectedEffort}
+            serviceTier={status.selectedSpeed}
+          />
+          <CodeExamples
+            baseUrl={status.baseUrl}
+            apiKey={status.apiKey}
+            model={status.selectedModel}
+            reasoningEffort={status.selectedEffort}
+            serviceTier={status.selectedSpeed}
+          />
+          <TestConnection />
+        </div>
+      </main>
+      <Footer updateStatus={null} />
+    </>
+  );
+}
+
+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>
+        {isProxySettings ? <ProxySettingsPage /> : <Dashboard />}
+      </ThemeProvider>
+    </I18nProvider>
+  );
+}
+
+function ProxySettingsPage() {
+  const versionInfo = useVersionInfo();
+
+  return (
+    <>
+      <Header
+        onAddAccount={() => { location.hash = ""; }}
+        version={versionInfo.version}
+        commit={versionInfo.commit}
+        isProxySettings
+      />
+      <ProxySettings />
+    </>
+  );
+}

packages/electron/desktop/src/components/AccountCard.tsx

@@ -0,0 +1,254 @@
+import { useCallback } from "preact/hooks";
+import { useT, useI18n } from "@shared/i18n/context";
+import type { TranslationKey } from "@shared/i18n/translations";
+import { formatNumber, formatResetTime, formatWindowDuration } from "@shared/utils/format";
+import type { Account, ProxyEntry } from "@shared/types";
+
+const avatarColors = [
+  ["bg-purple-100 dark:bg-[#2a1a3f]", "text-purple-600 dark:text-purple-400"],
+  ["bg-amber-100 dark:bg-[#3d2c16]", "text-amber-600 dark:text-amber-500"],
+  ["bg-blue-100 dark:bg-[#1a2a3f]", "text-blue-600 dark:text-blue-400"],
+  ["bg-emerald-100 dark:bg-[#112a1f]", "text-emerald-600 dark:text-emerald-400"],
+  ["bg-red-100 dark:bg-[#3f1a1a]", "text-red-600 dark:text-red-400"],
+];
+
+const statusStyles: Record<string, [string, string]> = {
+  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 AccountCardProps {
+  account: Account;
+  index: number;
+  onDelete: (id: string) => Promise<string | null>;
+  proxies?: ProxyEntry[];
+  onProxyChange?: (accountId: string, proxyId: string) => void;
+}
+
+export function AccountCard({ account, index, onDelete, proxies, onProxyChange }: AccountCardProps) {
+  const t = useT();
+  const { lang } = useI18n();
+  const email = account.email || "Unknown";
+  const initial = email.charAt(0).toUpperCase();
+  const [bgColor, textColor] = avatarColors[index % avatarColors.length];
+  const usage = account.usage || {};
+  const requests = usage.request_count ?? 0;
+  const tokens = (usage.input_tokens ?? 0) + (usage.output_tokens ?? 0);
+  const winRequests = usage.window_request_count ?? 0;
+  const winTokens = (usage.window_input_tokens ?? 0) + (usage.window_output_tokens ?? 0);
+  const plan = account.planType || t("freeTier");
+  const windowSec = account.quota?.rate_limit?.limit_window_seconds;
+  const windowDur = windowSec ? formatWindowDuration(windowSec, lang === "zh") : null;
+
+  const [statusCls, statusKey] = statusStyles[account.status] || statusStyles.disabled;
+
+  const handleDelete = useCallback(async () => {
+    if (!confirm(t("removeConfirm"))) return;
+    const err = await onDelete(account.id);
+    if (err) alert(err);
+  }, [account.id, onDelete, t]);
+
+  // Quota — primary window
+  const q = account.quota;
+  const rl = q?.rate_limit;
+  const pct = rl?.used_percent != null ? Math.round(rl.used_percent) : null;
+  const barColor =
+    pct == null ? "bg-primary" : pct >= 90 ? "bg-red-500" : pct >= 60 ? "bg-amber-500" : "bg-primary";
+  const pctColor =
+    pct == null
+      ? "text-primary"
+      : pct >= 90
+        ? "text-red-500"
+        : pct >= 60
+          ? "text-amber-600 dark:text-amber-500"
+          : "text-primary";
+  const resetAt = rl?.reset_at ? formatResetTime(rl.reset_at, lang === "zh") : null;
+
+  // Quota — secondary window (e.g. weekly)
+  const srl = q?.secondary_rate_limit;
+  const sPct = srl?.used_percent != null ? Math.round(srl.used_percent) : null;
+  const sBarColor =
+    sPct == null ? "bg-indigo-500" : sPct >= 90 ? "bg-red-500" : sPct >= 60 ? "bg-amber-500" : "bg-indigo-500";
+  const sPctColor =
+    sPct == null
+      ? "text-indigo-500"
+      : sPct >= 90
+        ? "text-red-500"
+        : sPct >= 60
+          ? "text-amber-600 dark:text-amber-500"
+          : "text-indigo-500";
+  const sResetAt = srl?.reset_at ? formatResetTime(srl.reset_at, lang === "zh") : null;
+  const sWindowSec = srl?.limit_window_seconds;
+  const sWindowDur = sWindowSec ? formatWindowDuration(sWindowSec, lang === "zh") : null;
+
+  return (
+    <div class="bg-white dark:bg-card-dark border border-gray-200 dark:border-border-dark rounded-xl p-4 shadow-sm hover:shadow-md transition-all hover:border-primary/30 dark:hover:border-primary/50">
+      {/* Header */}
+      <div class="flex justify-between items-start mb-4">
+        <div class="flex items-center gap-3">
+          <div class={`size-10 rounded-full ${bgColor} ${textColor} flex items-center justify-center font-bold text-lg`}>
+            {initial}
+          </div>
+          <div>
+            <h3 class="text-[0.82rem] font-semibold leading-tight">{email}</h3>
+            <p class="text-xs text-slate-500 dark:text-text-dim">
+              {plan}
+              {windowDur && (
+                <span class="ml-1.5 px-1.5 py-0.5 rounded bg-slate-100 dark:bg-border-dark text-slate-500 dark:text-text-dim text-[0.65rem] font-medium">
+                  {windowDur}
+                </span>
+              )}
+            </p>
+          </div>
+        </div>
+        <div class="flex items-center gap-2">
+          <span class={`px-2.5 py-1 rounded-full ${statusCls} text-xs font-medium border`}>
+            {t(statusKey as TranslationKey)}
+          </span>
+          <button
+            onClick={handleDelete}
+            class="p-1.5 text-slate-400 dark:text-text-dim hover:text-red-500 transition-colors rounded-md hover:bg-red-50 dark:hover:bg-red-900/20"
+            title={t("deleteAccount")}
+          >
+            <svg class="size-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      {/* Stats */}
+      <div class="space-y-2">
+        <div class="flex justify-between text-[0.78rem]">
+          <span class="text-slate-500 dark:text-text-dim">{t("windowRequests")}</span>
+          <span class="font-medium">{formatNumber(winRequests)}</span>
+        </div>
+        <div class="flex justify-between text-[0.78rem]">
+          <span class="text-slate-500 dark:text-text-dim">{t("windowTokens")}</span>
+          <span class="font-medium">{formatNumber(winTokens)}</span>
+        </div>
+        <div class="flex justify-between text-[0.68rem]">
+          <span class="text-slate-400 dark:text-text-dim/70">{t("totalAll")}</span>
+          <span class="text-slate-400 dark:text-text-dim/70">{formatNumber(requests)} req · {formatNumber(tokens)} tok</span>
+        </div>
+      </div>
+
+      {/* Proxy selector */}
+      {proxies && onProxyChange && (
+        <div class="flex items-center justify-between text-[0.78rem] mt-2 pt-2 border-t border-slate-100 dark:border-border-dark">
+          <span class="text-slate-500 dark:text-text-dim">{t("proxyAssignment")}</span>
+          <select
+            value={account.proxyId || "global"}
+            onChange={(e) =>
+              onProxyChange(account.id, (e.target as HTMLSelectElement).value)
+            }
+            class="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>
+        </div>
+      )}
+
+      {/* Quota bars */}
+      {(rl || srl) && (
+        <div class="pt-3 mt-3 border-t border-slate-100 dark:border-border-dark space-y-3">
+          {/* Primary window */}
+          {rl && (
+            <div>
+              <div class="flex justify-between text-[0.78rem] mb-1.5">
+                <span class="text-slate-500 dark:text-text-dim">
+                  {t("rateLimit")}
+                  {windowDur && (
+                    <span class="ml-1 text-slate-400 dark:text-text-dim/70 text-[0.65rem]">({windowDur})</span>
+                  )}
+                </span>
+                {rl.limit_reached ? (
+                  <span class="px-2 py-0.5 rounded-full bg-red-100 dark:bg-red-900/20 text-red-600 dark:text-red-400 text-xs font-medium">
+                    {t("limitReached")}
+                  </span>
+                ) : pct != null ? (
+                  <span class={`font-medium ${pctColor}`}>
+                    {pct}% {t("used")}
+                  </span>
+                ) : (
+                  <span class="font-medium text-primary">{t("ok")}</span>
+                )}
+              </div>
+              {pct != null && (
+                <div class="w-full bg-slate-100 dark:bg-border-dark rounded-full h-2 overflow-hidden">
+                  <div class={`${barColor} h-2 rounded-full transition-all`} style={{ width: `${pct}%` }} />
+                </div>
+              )}
+              {resetAt && (
+                <p class="text-xs text-slate-400 dark:text-text-dim mt-1">
+                  {t("resetsAt")} {resetAt}
+                </p>
+              )}
+            </div>
+          )}
+
+          {/* Secondary window (e.g. weekly) */}
+          {srl && (
+            <div>
+              <div class="flex justify-between text-[0.78rem] mb-1.5">
+                <span class="text-slate-500 dark:text-text-dim">
+                  {t("secondaryRateLimit")}
+                  {sWindowDur && (
+                    <span class="ml-1 text-slate-400 dark:text-text-dim/70 text-[0.65rem]">({sWindowDur})</span>
+                  )}
+                </span>
+                {srl.limit_reached ? (
+                  <span class="px-2 py-0.5 rounded-full bg-red-100 dark:bg-red-900/20 text-red-600 dark:text-red-400 text-xs font-medium">
+                    {t("limitReached")}
+                  </span>
+                ) : sPct != null ? (
+                  <span class={`font-medium ${sPctColor}`}>
+                    {sPct}% {t("used")}
+                  </span>
+                ) : (
+                  <span class="font-medium text-indigo-500">{t("ok")}</span>
+                )}
+              </div>
+              {sPct != null && (
+                <div class="w-full bg-slate-100 dark:bg-border-dark rounded-full h-2 overflow-hidden">
+                  <div class={`${sBarColor} h-2 rounded-full transition-all`} style={{ width: `${sPct}%` }} />
+                </div>
+              )}
+              {sResetAt && (
+                <p class="text-xs text-slate-400 dark:text-text-dim mt-1">
+                  {t("resetsAt")} {sResetAt}
+                </p>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

packages/electron/desktop/src/components/AccountList.tsx

@@ -0,0 +1,72 @@
+import { useI18n, useT } from "@shared/i18n/context";
+import { AccountCard } from "./AccountCard";
+import type { Account, ProxyEntry } from "@shared/types";
+
+interface AccountListProps {
+  accounts: Account[];
+  loading: boolean;
+  onDelete: (id: string) => Promise<string | null>;
+  onRefresh: () => void;
+  refreshing: boolean;
+  lastUpdated: Date | null;
+  proxies?: ProxyEntry[];
+  onProxyChange?: (accountId: string, proxyId: string) => void;
+}
+
+export function AccountList({ accounts, loading, onDelete, onRefresh, refreshing, lastUpdated, proxies, onProxyChange }: AccountListProps) {
+  const t = useT();
+  const { lang } = useI18n();
+
+  const updatedAtText = lastUpdated
+    ? lastUpdated.toLocaleTimeString(lang === "zh" ? "zh-CN" : "en-US", { hour: "2-digit", minute: "2-digit", second: "2-digit" })
+    : null;
+
+  return (
+    <section class="flex flex-col gap-4">
+      <div class="flex items-center justify-between">
+        <div class="flex flex-col gap-1">
+          <h2 class="text-[0.95rem] font-bold tracking-tight">{t("connectedAccounts")}</h2>
+          <p class="text-slate-500 dark:text-text-dim text-[0.8rem]">{t("connectedAccountsDesc")}</p>
+        </div>
+        <div class="flex items-center gap-2 shrink-0">
+          {updatedAtText && (
+            <span class="text-[0.75rem] text-slate-400 dark:text-text-dim hidden sm:inline">
+              {t("updatedAt")} {updatedAtText}
+            </span>
+          )}
+          <button
+            onClick={onRefresh}
+            disabled={refreshing}
+            title={t("refresh")}
+            class="p-1.5 text-slate-400 dark:text-text-dim hover:text-primary transition-colors rounded-md hover:bg-primary/10 disabled:opacity-40 disabled:cursor-not-allowed"
+          >
+            <svg
+              class={`size-[18px] ${refreshing ? "animate-spin" : ""}`}
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
+            </svg>
+          </button>
+        </div>
+      </div>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {loading ? (
+          <div class="md:col-span-2 text-center py-8 text-slate-400 dark:text-text-dim text-sm bg-white dark:bg-card-dark border border-gray-200 dark:border-border-dark rounded-xl transition-colors">
+            {t("loadingAccounts")}
+          </div>
+        ) : accounts.length === 0 ? (
+          <div class="md:col-span-2 text-center py-8 text-slate-400 dark:text-text-dim text-sm bg-white dark:bg-card-dark border border-gray-200 dark:border-border-dark rounded-xl transition-colors">
+            {t("noAccounts")}
+          </div>
+        ) : (
+          accounts.map((acct, i) => (
+            <AccountCard key={acct.id} account={acct} index={i} onDelete={onDelete} proxies={proxies} onProxyChange={onProxyChange} />
+          ))
+        )}
+      </div>
+    </section>
+  );
+}

packages/electron/desktop/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>
+  );
+}

packages/electron/desktop/src/components/AddAccount.tsx

@@ -0,0 +1,61 @@
+import { useState, useCallback } from "preact/hooks";
+import { useT } from "@shared/i18n/context";
+import type { TranslationKey } from "@shared/i18n/translations";
+
+interface AddAccountProps {
+  visible: boolean;
+  onSubmitRelay: (callbackUrl: string) => Promise<void>;
+  addInfo: string;
+  addError: string;
+}
+
+export function AddAccount({ visible, onSubmitRelay, addInfo, addError }: AddAccountProps) {
+  const t = useT();
+  const [input, setInput] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+
+  const handleSubmit = useCallback(async () => {
+    setSubmitting(true);
+    await onSubmitRelay(input);
+    setSubmitting(false);
+    setInput("");
+  }, [input, onSubmitRelay]);
+
+  if (!visible && !addInfo && !addError) return null;
+
+  return (
+    <>
+      {addInfo && (
+        <p class="text-sm text-primary">{t(addInfo as TranslationKey)}</p>
+      )}
+      {addError && (
+        <p class="text-sm text-red-500">{t(addError as TranslationKey)}</p>
+      )}
+      {visible && (
+        <section class="bg-white dark:bg-card-dark border border-gray-200 dark:border-border-dark rounded-xl p-5 shadow-sm transition-colors">
+          <ol class="text-sm text-slate-500 dark:text-text-dim mb-4 space-y-1.5 list-decimal list-inside">
+            <li dangerouslySetInnerHTML={{ __html: t("addStep1") }} />
+            <li dangerouslySetInnerHTML={{ __html: t("addStep2") }} />
+            <li dangerouslySetInnerHTML={{ __html: t("addStep3") }} />
+          </ol>
+          <div class="flex gap-3">
+            <input
+              type="text"
+              value={input}
+              onInput={(e) => setInput((e.target as HTMLInputElement).value)}
+              placeholder={t("pasteCallback")}
+              class="flex-1 px-3 py-2.5 bg-slate-50 dark:bg-bg-dark border border-gray-200 dark:border-border-dark rounded-lg text-sm font-mono text-slate-600 dark:text-text-main focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-colors"
+            />
+            <button
+              onClick={handleSubmit}
+              disabled={submitting}
+              class="px-4 py-2.5 bg-white dark:bg-card-dark border border-gray-200 dark:border-border-dark rounded-lg text-sm font-medium text-slate-700 dark:text-text-main hover:bg-slate-50 dark:hover:bg-border-dark transition-colors"
+            >
+              {submitting ? t("submitting") : t("submit")}
+            </button>
+          </div>
+        </section>
+      )}
+    </>
+  );
+}

packages/electron/desktop/src/components/AnthropicSetup.tsx

@@ -0,0 +1,78 @@
+import { useMemo, useCallback } from "preact/hooks";
+import { useT } from "@shared/i18n/context";
+import { CopyButton } from "./CopyButton";
+
+interface AnthropicSetupProps {
+  apiKey: string;
+  selectedModel: string;
+  reasoningEffort: string;
+  serviceTier: string | null;
+}
+
+export function AnthropicSetup({ apiKey, selectedModel, reasoningEffort, serviceTier }: AnthropicSetupProps) {
+  const t = useT();
+
+  const origin = typeof window !== "undefined" ? window.location.origin : "http://localhost:8080";
+
+  // Build compound model name with suffixes
+  const displayModel = useMemo(() => {
+    let name = selectedModel;
+    if (reasoningEffort && reasoningEffort !== "medium") name += `-${reasoningEffort}`;
+    if (serviceTier === "fast") name += "-fast";
+    return name;
+  }, [selectedModel, reasoningEffort, serviceTier]);
+
+  const envLines = useMemo(() => ({
+    ANTHROPIC_BASE_URL: origin,
+    ANTHROPIC_API_KEY: apiKey,
+    ANTHROPIC_MODEL: displayModel,
+  }), [origin, apiKey, displayModel]);
+
+  const allEnvText = useMemo(
+    () => Object.entries(envLines).map(([k, v]) => `${k}=${v}`).join("\n"),
+    [envLines],
+  );
+
+  const getAllEnv = useCallback(() => allEnvText, [allEnvText]);
+  const getBaseUrl = useCallback(() => envLines.ANTHROPIC_BASE_URL, [envLines]);
+  const getApiKey = useCallback(() => envLines.ANTHROPIC_API_KEY, [envLines]);
+  const getModel = useCallback(() => envLines.ANTHROPIC_MODEL, [envLines]);
+
+  return (
+    <section class="bg-white dark:bg-card-dark border border-gray-200 dark:border-border-dark rounded-xl p-5 shadow-sm transition-colors">
+      <div class="flex items-center justify-between mb-6 border-b border-slate-100 dark:border-border-dark pb-4">
+        <div class="flex items-center gap-2">
+          <svg class="size-5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z" />
+          </svg>
+          <h2 class="text-[0.95rem] font-bold">{t("anthropicSetup")}</h2>
+        </div>
+      </div>
+
+      <div class="space-y-3">
+        {(["ANTHROPIC_BASE_URL", "ANTHROPIC_API_KEY", "ANTHROPIC_MODEL"] as const).map((key) => {
+          const getter = key === "ANTHROPIC_BASE_URL" ? getBaseUrl : key === "ANTHROPIC_API_KEY" ? getApiKey : getModel;
+          return (
+            <div key={key} class="flex items-center gap-3">
+              <label class="text-xs font-mono font-semibold text-slate-600 dark:text-text-dim w-44 shrink-0">{key}</label>
+              <div class="relative flex items-center flex-1">
+                <input
+                  class="w-full pl-3 pr-10 py-2 bg-slate-100 dark:bg-bg-dark border border-gray-200 dark:border-border-dark rounded-lg text-[0.78rem] font-mono text-slate-500 dark:text-text-dim outline-none cursor-default select-all"
+                  type="text"
+                  value={envLines[key]}
+                  readOnly
+                />
+                <CopyButton getText={getter} class="absolute right-2" />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      <div class="mt-5 flex items-center gap-3">
+        <CopyButton getText={getAllEnv} variant="label" />
+        <span class="text-xs text-slate-400 dark:text-text-dim">{t("anthropicCopyAllHint")}</span>
+      </div>
+    </section>
+  );
+}

packages/electron/desktop/src/components/ApiConfig.tsx

@@ -0,0 +1,224 @@
+import { useT } from "@shared/i18n/context";
+import { CopyButton } from "./CopyButton";
+import { useCallback, useState, useEffect, useRef } from "preact/hooks";
+import type { ModelFamily } from "@shared/hooks/use-status";
+
+interface ApiConfigProps {
+  baseUrl: string;
+  apiKey: string;
+  models: string[];
+  selectedModel: string;
+  onModelChange: (model: string) => void;
+  modelFamilies: ModelFamily[];
+  selectedEffort: string;
+  onEffortChange: (effort: string) => void;
+  selectedSpeed: string | null;
+  onSpeedChange: (speed: string | null) => void;
+}
+
+const EFFORT_LABELS: Record<string, string> = {
+  none: "None",
+  minimal: "Minimal",
+  low: "Low",
+  medium: "Medium",
+  high: "High",
+  xhigh: "XHigh",
+};
+
+export function ApiConfig({
+  baseUrl,
+  apiKey,
+  models,
+  selectedModel,
+  onModelChange,
+  modelFamilies,
+  selectedEffort,
+  onEffortChange,
+  selectedSpeed,
+  onSpeedChange,
+}: ApiConfigProps) {
+  const t = useT();
+
+  const getBaseUrl = useCallback(() => baseUrl, [baseUrl]);
+  const getApiKey = useCallback(() => apiKey, [apiKey]);
+
+  const [open, setOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown on click outside
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+
+  // When a family is selected, update model + snap effort to default if current effort is unsupported
+  const handleFamilySelect = useCallback(
+    (family: ModelFamily) => {
+      onModelChange(family.id);
+      setOpen(false);
+      const supportedEfforts = family.efforts.map((e) => e.reasoningEffort);
+      if (!supportedEfforts.includes(selectedEffort)) {
+        onEffortChange(family.defaultEffort);
+      }
+    },
+    [onModelChange, onEffortChange, selectedEffort],
+  );
+
+  // Find the currently selected family's supported efforts
+  const currentFamily = modelFamilies.find((f) => f.id === selectedModel);
+  const currentEfforts = currentFamily?.efforts ?? [];
+
+  const showMatrix = modelFamilies.length > 0;
+
+  return (
+    <section class="bg-white dark:bg-card-dark border border-gray-200 dark:border-border-dark rounded-xl p-5 shadow-sm transition-colors">
+      <div class="flex items-center justify-between mb-6 border-b border-slate-100 dark:border-border-dark pb-4">
+        <div class="flex items-center gap-2">
+          <svg class="size-5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 010 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 010-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28z" />
+            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+          </svg>
+          <h2 class="text-[0.95rem] font-bold">{t("apiConfig")}</h2>
+        </div>
+      </div>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {/* Base URL */}
+        <div class="space-y-1.5">
+          <label class="text-xs font-semibold text-slate-700 dark:text-text-main">{t("baseProxyUrl")}</label>
+          <div class="relative flex items-center">
+            <input
+              class="w-full pl-3 pr-10 py-2.5 bg-slate-100 dark:bg-bg-dark border border-gray-200 dark:border-border-dark rounded-lg text-[0.78rem] font-mono text-slate-500 dark:text-text-dim outline-none cursor-default select-all"
+              type="text"
+              value={baseUrl}
+              readOnly
+            />
+            <CopyButton getText={getBaseUrl} class="absolute right-2" titleKey="copyUrl" />
+          </div>
+        </div>
+        {/* Model selector — matrix or flat fallback */}
+        <div class="space-y-1.5">
+          <label class="text-xs font-semibold text-slate-700 dark:text-text-main">{t("defaultModel")}</label>
+          {showMatrix ? (
+            <div ref={dropdownRef} class="relative">
+              {/* Trigger button */}
+              <button
+                onClick={() => setOpen(!open)}
+                class="w-full flex items-center justify-between px-3 py-2.5 bg-white dark:bg-bg-dark border border-gray-200 dark:border-border-dark rounded-lg text-[0.78rem] text-slate-700 dark:text-text-main font-medium focus:ring-1 focus:ring-primary focus:border-primary outline-none cursor-pointer transition-colors"
+              >
+                <span>{currentFamily?.displayName ?? selectedModel}</span>
+                <svg class={`size-[18px] text-slate-500 dark:text-text-dim transition-transform ${open ? "rotate-180" : ""}`} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+                </svg>
+              </button>
+              {/* Dropdown list */}
+              {open && (
+                <div class="absolute z-10 mt-1 w-full border border-gray-200 dark:border-border-dark rounded-lg overflow-hidden bg-white dark:bg-card-dark shadow-lg">
+                  <div class="max-h-[200px] overflow-y-auto">
+                    {modelFamilies.map((f) => (
+                      <button
+                        key={f.id}
+                        onClick={() => handleFamilySelect(f)}
+                        class={`w-full text-left px-3 py-2 text-[0.78rem] font-medium border-b border-gray-100 dark:border-border-dark last:border-b-0 transition-colors ${
+                          selectedModel === f.id
+                            ? "bg-primary/10 text-primary dark:bg-primary/20"
+                            : "text-slate-700 dark:text-text-main hover:bg-slate-50 dark:hover:bg-[#21262d]"
+                        }`}
+                      >
+                        {f.displayName}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+              {/* Reasoning effort buttons — always visible */}
+              {currentEfforts.length > 1 && (
+                <div class="flex gap-1.5 mt-2 flex-wrap">
+                  {currentEfforts.map((e) => (
+                    <button
+                      key={e.reasoningEffort}
+                      onClick={() => onEffortChange(e.reasoningEffort)}
+                      title={e.description}
+                      class={`px-2.5 py-1 text-[0.7rem] font-semibold rounded transition-all ${
+                        selectedEffort === e.reasoningEffort
+                          ? "bg-primary text-white shadow-sm"
+                          : "bg-white dark:bg-[#21262d] text-slate-600 dark:text-text-dim border border-gray-200 dark:border-border-dark hover:border-primary/50"
+                      }`}
+                    >
+                      {EFFORT_LABELS[e.reasoningEffort] ?? e.reasoningEffort}
+                    </button>
+                  ))}
+                </div>
+              )}
+              {/* Speed toggle — Standard / Fast */}
+              <div class="flex items-center gap-1.5 mt-2">
+                <span class="text-[0.68rem] font-medium text-slate-500 dark:text-text-dim mr-1">{t("speed")}</span>
+                <button
+                  onClick={() => onSpeedChange(null)}
+                  class={`px-2.5 py-1 text-[0.7rem] font-semibold rounded transition-all ${
+                    selectedSpeed === null
+                      ? "bg-primary text-white shadow-sm"
+                      : "bg-white dark:bg-[#21262d] text-slate-600 dark:text-text-dim border border-gray-200 dark:border-border-dark hover:border-primary/50"
+                  }`}
+                >
+                  {t("speedStandard")}
+                </button>
+                <button
+                  onClick={() => onSpeedChange("fast")}
+                  class={`px-2.5 py-1 text-[0.7rem] font-semibold rounded transition-all ${
+                    selectedSpeed === "fast"
+                      ? "bg-primary text-white shadow-sm"
+                      : "bg-white dark:bg-[#21262d] text-slate-600 dark:text-text-dim border border-gray-200 dark:border-border-dark hover:border-primary/50"
+                  }`}
+                >
+                  {t("speedFast")}
+                </button>
+              </div>
+            </div>
+          ) : (
+            <div class="relative">
+              <select
+                class="w-full appearance-none pl-3 pr-10 py-2.5 bg-white dark:bg-bg-dark border border-gray-200 dark:border-border-dark rounded-lg text-[0.78rem] text-slate-700 dark:text-text-main font-medium focus:ring-1 focus:ring-primary focus:border-primary outline-none cursor-pointer transition-colors"
+                value={selectedModel}
+                onChange={(e) => onModelChange((e.target as HTMLSelectElement).value)}
+              >
+                {models.map((m) => (
+                  <option key={m} value={m}>{m}</option>
+                ))}
+              </select>
+              <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-slate-500 dark:text-text-dim">
+                <svg class="size-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+                </svg>
+              </div>
+            </div>
+          )}
+        </div>
+        {/* API Key */}
+        <div class="space-y-1.5 md:col-span-2">
+          <label class="text-xs font-semibold text-slate-700 dark:text-text-main">{t("yourApiKey")}</label>
+          <div class="relative flex items-center">
+            <div class="absolute left-3 text-slate-400 dark:text-text-dim">
+              <svg class="size-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z" />
+              </svg>
+            </div>
+            <input
+              class="w-full pl-10 pr-10 py-2.5 bg-slate-100 dark:bg-bg-dark border border-gray-200 dark:border-border-dark rounded-lg text-[0.78rem] font-mono text-slate-500 dark:text-text-dim outline-none cursor-default select-all tracking-wider"
+              type="text"
+              value={apiKey}
+              readOnly
+            />
+            <CopyButton getText={getApiKey} class="absolute right-2" titleKey="copyApiKey" />
+          </div>
+          <p class="text-xs text-slate-400 dark:text-text-dim mt-1">{t("apiKeyHint")}</p>
+        </div>
+      </div>
+    </section>
+  );
+}

packages/electron/desktop/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>
+  );
+}

packages/electron/desktop/src/components/CodeExamples.tsx

@@ -0,0 +1,232 @@
+import { useState, useMemo, useCallback } from "preact/hooks";
+import { useT } from "@shared/i18n/context";
+import { CopyButton } from "./CopyButton";
+
+type Protocol = "openai" | "anthropic" | "gemini";
+type CodeLang = "python" | "node" | "curl";
+
+const protocols: { id: Protocol; label: string }[] = [
+  { id: "openai", label: "OpenAI" },
+  { id: "anthropic", label: "Anthropic" },
+  { id: "gemini", label: "Gemini" },
+];
+
+const langs: { id: CodeLang; label: string }[] = [
+  { id: "python", label: "Python" },
+  { id: "node", label: "Node.js" },
+  { id: "curl", label: "cURL" },
+];
+
+function buildExamples(
+  baseUrl: string,
+  apiKey: string,
+  model: string,
+  origin: string,
+  reasoningEffort: string
+): Record<string, string> {
+  const effortLine = reasoningEffort && reasoningEffort !== "medium"
+    ? `\n    reasoning_effort="${reasoningEffort}",`
+    : "";
+  const effortJson = reasoningEffort && reasoningEffort !== "medium"
+    ? `,\n    "reasoning_effort": "${reasoningEffort}"`
+    : "";
+  const effortJs = reasoningEffort && reasoningEffort !== "medium"
+    ? `\n    reasoning_effort: "${reasoningEffort}",`
+    : "";
+  return {
+    "openai-python": `from openai import OpenAI
+
+client = OpenAI(
+    base_url="${baseUrl}",
+    api_key="${apiKey}",
+)
+
+response = client.chat.completions.create(
+    model="${model}",
+    messages=[{"role": "user", "content": "Hello"}],${effortLine}
+)
+print(response.choices[0].message.content)`,
+
+    "openai-curl": `curl ${baseUrl}/chat/completions \\
+  -H "Content-Type: application/json" \\
+  -H "Authorization: Bearer ${apiKey}" \\
+  -d '{
+    "model": "${model}",
+    "messages": [{"role": "user", "content": "Hello"}]${effortJson}
+  }'`,
+
+    "openai-node": `import OpenAI from "openai";
+
+const client = new OpenAI({
+    baseURL: "${baseUrl}",
+    apiKey: "${apiKey}",
+});
+
+const stream = await client.chat.completions.create({
+    model: "${model}",
+    messages: [{ role: "user", content: "Hello" }],${effortJs}
+    stream: true,
+});
+for await (const chunk of stream) {
+    process.stdout.write(chunk.choices[0]?.delta?.content || "");
+}`,
+
+    "anthropic-python": `import anthropic
+
+client = anthropic.Anthropic(
+    base_url="${origin}/v1",
+    api_key="${apiKey}",
+)
+
+message = client.messages.create(
+    model="${model}",
+    max_tokens=1024,
+    messages=[{"role": "user", "content": "Hello"}],
+)
+print(message.content[0].text)`,
+
+    "anthropic-curl": `curl ${origin}/v1/messages \\
+  -H "Content-Type: application/json" \\
+  -H "x-api-key: ${apiKey}" \\
+  -H "anthropic-version: 2023-06-01" \\
+  -d '{
+    "model": "${model}",
+    "max_tokens": 1024,
+    "messages": [{"role": "user", "content": "Hello"}]
+  }'`,
+
+    "anthropic-node": `import Anthropic from "@anthropic-ai/sdk";
+
+const client = new Anthropic({
+    baseURL: "${origin}/v1",
+    apiKey: "${apiKey}",
+});
+
+const message = await client.messages.create({
+    model: "${model}",
+    max_tokens: 1024,
+    messages: [{ role: "user", content: "Hello" }],
+});
+console.log(message.content[0].text);`,
+
+    "gemini-python": `from google import genai
+
+client = genai.Client(
+    api_key="${apiKey}",
+    http_options={"base_url": "${origin}/v1beta"},
+)
+
+response = client.models.generate_content(
+    model="${model}",
+    contents="Hello",
+)
+print(response.text)`,
+
+    "gemini-curl": `curl "${origin}/v1beta/models/${model}:generateContent?key=${apiKey}" \\
+  -H "Content-Type: application/json" \\
+  -d '{
+    "contents": [{"role": "user", "parts": [{"text": "Hello"}]}]
+  }'`,
+
+    "gemini-node": `import { GoogleGenAI } from "@google/genai";
+
+const ai = new GoogleGenAI({
+    apiKey: "${apiKey}",
+    httpOptions: { baseUrl: "${origin}/v1beta" },
+});
+
+const response = await ai.models.generateContent({
+    model: "${model}",
+    contents: "Hello",
+});
+console.log(response.text);`,
+  };
+}
+
+interface CodeExamplesProps {
+  baseUrl: string;
+  apiKey: string;
+  model: string;
+  reasoningEffort: string;
+  serviceTier: string | null;
+}
+
+export function CodeExamples({ baseUrl, apiKey, model, reasoningEffort, serviceTier }: CodeExamplesProps) {
+  const t = useT();
+  const [protocol, setProtocol] = useState<Protocol>("openai");
+  const [codeLang, setCodeLang] = useState<CodeLang>("python");
+
+  const origin = typeof window !== "undefined" ? window.location.origin : "";
+
+  // Build compound model name with suffixes for CLI users
+  const displayModel = useMemo(() => {
+    let name = model;
+    if (reasoningEffort && reasoningEffort !== "medium") name += `-${reasoningEffort}`;
+    if (serviceTier === "fast") name += "-fast";
+    return name;
+  }, [model, reasoningEffort, serviceTier]);
+
+  // When effort/speed are embedded as suffixes, don't also show separate reasoning_effort param
+  const explicitEffort = displayModel === model ? reasoningEffort : "medium";
+  const examples = useMemo(
+    () => buildExamples(baseUrl, apiKey, displayModel, origin, explicitEffort),
+    [baseUrl, apiKey, displayModel, origin, explicitEffort]
+  );
+
+  const currentCode = examples[`${protocol}-${codeLang}`] || "Loading...";
+  const getCode = useCallback(() => currentCode, [currentCode]);
+
+  const protoActive =
+    "px-6 py-3 text-[0.82rem] font-semibold text-primary border-b-2 border-primary bg-white dark:bg-card-dark transition-colors";
+  const protoInactive =
+    "px-6 py-3 text-[0.82rem] font-medium text-slate-500 dark:text-text-dim hover:text-slate-700 dark:hover:text-text-main hover:bg-slate-50 dark:hover:bg-[#21262d] border-b-2 border-transparent transition-colors";
+  const langActive =
+    "px-3 py-1.5 text-xs font-semibold rounded bg-white dark:bg-[#21262d] text-slate-800 dark:text-text-main shadow-sm border border-transparent dark:border-border-dark transition-all";
+  const langInactive =
+    "px-3 py-1.5 text-xs font-medium rounded text-slate-500 dark:text-text-dim hover:text-slate-700 dark:hover:text-text-main hover:bg-white/50 dark:hover:bg-[#21262d] border border-transparent transition-all";
+
+  return (
+    <section class="flex flex-col gap-4">
+      <h2 class="text-[0.95rem] font-bold">{t("integrationExamples")}</h2>
+      <div class="bg-white dark:bg-card-dark border border-gray-200 dark:border-border-dark rounded-xl overflow-hidden shadow-sm transition-colors">
+        {/* Protocol Tabs */}
+        <div class="flex border-b border-gray-200 dark:border-border-dark bg-slate-50/50 dark:bg-bg-dark/30">
+          {protocols.map((p) => (
+            <button
+              key={p.id}
+              onClick={() => setProtocol(p.id)}
+              class={protocol === p.id ? protoActive : protoInactive}
+            >
+              {p.label}
+            </button>
+          ))}
+        </div>
+        {/* Language Tabs & Code */}
+        <div class="p-5">
+          <div class="flex items-center justify-between mb-4">
+            <div class="flex gap-2 p-1 bg-slate-100 dark:bg-bg-dark dark:border dark:border-border-dark rounded-lg">
+              {langs.map((l) => (
+                <button
+                  key={l.id}
+                  onClick={() => setCodeLang(l.id)}
+                  class={codeLang === l.id ? langActive : langInactive}
+                >
+                  {l.label}
+                </button>
+              ))}
+            </div>
+          </div>
+          {/* Code Block */}
+          <div class="relative group rounded-lg overflow-hidden bg-[#0d1117] text-slate-300 font-mono text-xs border border-slate-800 dark:border-border-dark">
+            <div class="absolute right-2 top-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity">
+              <CopyButton getText={getCode} variant="label" />
+            </div>
+            <div class="p-4 overflow-x-auto">
+              <pre class="m-0"><code>{currentCode}</code></pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

packages/electron/desktop/src/components/CopyButton.tsx

@@ -0,0 +1,81 @@
+import { useState, useCallback } from "preact/hooks";
+import { clipboardCopy } from "@shared/utils/clipboard";
+import { useT } from "@shared/i18n/context";
+import type { TranslationKey } from "@shared/i18n/translations";
+
+interface CopyButtonProps {
+  getText: () => string;
+  class?: string;
+  titleKey?: string;
+  variant?: "icon" | "label";
+}
+
+const SVG_COPY = (
+  <svg class="size-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+    <rect x="9" y="9" width="13" height="13" rx="2" />
+    <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
+  </svg>
+);
+
+const SVG_CHECK = (
+  <svg class="size-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+  </svg>
+);
+
+const SVG_FAIL = (
+  <svg class="size-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+  </svg>
+);
+
+export function CopyButton({ getText, class: className, titleKey, variant = "icon" }: CopyButtonProps) {
+  const t = useT();
+  const [state, setState] = useState<"idle" | "ok" | "fail">("idle");
+
+  const handleCopy = useCallback(async () => {
+    const ok = await clipboardCopy(getText());
+    setState(ok ? "ok" : "fail");
+    setTimeout(() => setState("idle"), 2000);
+  }, [getText]);
+
+  if (variant === "label") {
+    const bgClass =
+      state === "ok"
+        ? "bg-primary hover:bg-primary-hover"
+        : state === "fail"
+          ? "bg-red-600 hover:bg-red-700"
+          : "bg-slate-700 hover:bg-slate-600";
+
+    return (
+      <button
+        onClick={handleCopy}
+        class={`flex items-center gap-1.5 px-3 py-1.5 ${bgClass} text-white rounded text-xs font-medium transition-colors ${className || ""}`}
+      >
+        <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+          <rect x="9" y="9" width="13" height="13" rx="2" />
+          <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
+        </svg>
+        <span>
+          {state === "ok" ? t("copied") : state === "fail" ? t("copyFailed") : t("copy")}
+        </span>
+      </button>
+    );
+  }
+
+  return (
+    <button
+      onClick={handleCopy}
+      class={`p-1.5 transition-colors rounded-md hover:bg-slate-100 dark:hover:bg-border-dark ${
+        state === "ok"
+          ? "text-primary"
+          : state === "fail"
+            ? "text-red-500"
+            : "text-slate-400 dark:text-text-dim hover:text-primary"
+      } ${className || ""}`}
+      title={titleKey ? t(titleKey as TranslationKey) : undefined}
+    >
+      {state === "ok" ? SVG_CHECK : state === "fail" ? SVG_FAIL : SVG_COPY}
+    </button>
+  );
+}

packages/electron/desktop/src/components/Footer.tsx

@@ -0,0 +1,31 @@
+import { useT } from "@shared/i18n/context";
+import type { UpdateStatus } from "@shared/hooks/use-update-status";
+
+interface FooterProps {
+  updateStatus: UpdateStatus | null;
+}
+
+export function Footer({ updateStatus }: FooterProps) {
+  const t = useT();
+
+  const proxyVersion = updateStatus?.proxy.version ?? "...";
+  const proxyCommit = updateStatus?.proxy.commit;
+  const codexVersion = updateStatus?.codex.current_version;
+
+  return (
+    <footer class="mt-auto border-t border-gray-200 dark:border-border-dark bg-white dark:bg-card-dark py-5 transition-colors">
+      <div class="container mx-auto px-4 flex flex-col items-center gap-2">
+        <div class="flex flex-wrap items-center justify-center gap-x-3 gap-y-1 text-[0.75rem] text-slate-400 dark:text-text-dim font-mono">
+          <span>Proxy v{proxyVersion}{proxyCommit ? ` (${proxyCommit})` : ""}</span>
+          {codexVersion && (
+            <>
+              <span class="text-slate-300 dark:text-border-dark">&middot;</span>
+              <span>Codex Desktop v{codexVersion}</span>
+            </>
+          )}
+        </div>
+        <p class="text-[0.75rem] text-slate-400 dark:text-text-dim">{t("footer")}</p>
+      </div>
+    </footer>
+  );
+}

packages/electron/desktop/src/components/Header.tsx

@@ -0,0 +1,133 @@
+import { useI18n } from "@shared/i18n/context";
+import { useTheme } from "@shared/theme/context";
+
+const SVG_MOON = (
+  <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
+  </svg>
+);
+
+const SVG_SUN = (
+  <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
+  </svg>
+);
+
+interface HeaderProps {
+  onAddAccount: () => void;
+  version: string | null;
+  commit?: string | null;
+  isProxySettings?: boolean;
+}
+
+export function Header({ onAddAccount, version, commit, isProxySettings }: HeaderProps) {
+  const { lang, toggleLang, t } = useI18n();
+  const { isDark, toggle: toggleTheme } = useTheme();
+
+  return (
+    <header class="sticky top-0 z-50 w-full bg-white dark:bg-card-dark border-b border-gray-200 dark:border-border-dark shadow-sm transition-colors">
+      <div class="px-4 md:px-8 lg:px-40 flex h-14 items-center justify-center">
+        <div class="flex w-full max-w-[960px] items-center justify-between">
+          {/* Logo & Title */}
+          <div class="flex items-center gap-3">
+            {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-2">
+            <div class="hidden sm:flex items-center gap-2 px-3 py-1.5 rounded-full bg-primary/10 border border-primary/20">
+              <span class="relative flex h-2.5 w-2.5">
+                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
+                <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-primary" />
+              </span>
+              <span class="text-xs font-semibold text-primary inline-grid">
+                <span class="invisible col-start-1 row-start-1">Server Online</span>
+                <span class="col-start-1 row-start-1">{t("serverOnline")}</span>
+              </span>
+              {version && (
+                <span class="text-[0.65rem] font-mono text-primary/70">v{version}</span>
+              )}
+              {commit && (
+                <span class="text-[0.6rem] font-mono text-primary/40">{commit.slice(0, 7)}</span>
+              )}
+            </div>
+            {/* Star on GitHub */}
+            <a
+              href="https://github.com/icebear0828/codex-proxy"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="hidden md:flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-amber-50 border border-amber-200 text-amber-700 dark:bg-amber-900/20 dark:border-amber-700/30 dark:text-amber-400 hover:bg-amber-100 dark:hover:bg-amber-900/40 transition-colors"
+            >
+              <svg class="size-3.5" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+              </svg>
+              <span class="text-xs font-semibold">{t("starOnGithub")}</span>
+            </a>
+            {/* Check for Updates — hidden in electron mode (tray handles updates) */}
+            {/* Language Toggle */}
+            <button
+              onClick={toggleLang}
+              class="p-2 rounded-lg text-slate-500 dark:text-text-dim hover:bg-slate-100 dark:hover:bg-border-dark transition-colors"
+              title="中/EN"
+            >
+              <span class="text-xs font-bold inline-flex items-center justify-center w-5">{lang === "en" ? "EN" : "中"}</span>
+            </button>
+            {/* Theme Toggle */}
+            <button
+              onClick={toggleTheme}
+              class="p-2 rounded-lg text-slate-500 dark:text-text-dim hover:bg-slate-100 dark:hover:bg-border-dark transition-colors"
+              title={t("toggleTheme")}
+            >
+              {isDark ? SVG_SUN : SVG_MOON}
+            </button>
+            {/* Proxy Settings / Add Account */}
+            {isProxySettings ? null : (
+              <>
+                <a
+                  href="#/proxy-settings"
+                  class="hidden md: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>
+      {/* Update panel hidden — electron-updater handles updates via system tray */}
+    </header>
+  );
+}

packages/electron/desktop/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>
+      )}
+    </>
+  );
+}

packages/electron/desktop/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>
+  );
+}

packages/electron/desktop/src/components/ProxyPool.tsx

@@ -0,0 +1,317 @@
+import { useState, useCallback } from "preact/hooks";
+import { useT } from "@shared/i18n/context";
+import type { TranslationKey } from "@shared/i18n/translations";
+import type { ProxiesState } from "@shared/hooks/use-proxies";
+
+const PROTOCOLS = ["http", "https", "socks5", "socks5h"] as const;
+
+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]",
+    "proxyActive",
+  ],
+  unreachable: [
+    "bg-red-100 text-red-600 border-red-200 dark:bg-red-900/20 dark:text-red-400 dark:border-red-800/30",
+    "proxyUnreachable",
+  ],
+  disabled: [
+    "bg-slate-100 text-slate-500 border-slate-200 dark:bg-slate-800/30 dark:text-slate-400 dark:border-slate-700/30",
+    "proxyDisabled",
+  ],
+};
+
+const inputCls = "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";
+
+interface ProxyPoolProps {
+  proxies: ProxiesState;
+}
+
+export function ProxyPool({ proxies }: ProxyPoolProps) {
+  const t = useT();
+  const [showAdd, setShowAdd] = useState(false);
+  const [newName, setNewName] = useState("");
+  const [newProtocol, setNewProtocol] = useState("http");
+  const [newHost, setNewHost] = useState("");
+  const [newPort, setNewPort] = useState("");
+  const [newUsername, setNewUsername] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [addError, setAddError] = useState("");
+  const [checking, setChecking] = useState<string | null>(null);
+  const [checkingAll, setCheckingAll] = useState(false);
+
+  const resetForm = useCallback(() => {
+    setNewName("");
+    setNewProtocol("http");
+    setNewHost("");
+    setNewPort("");
+    setNewUsername("");
+    setNewPassword("");
+    setAddError("");
+  }, []);
+
+  const handleAdd = useCallback(async () => {
+    setAddError("");
+    if (!newHost.trim()) {
+      setAddError(t("proxyHost") + " is required");
+      return;
+    }
+    const err = await proxies.addProxy({
+      name: newName,
+      protocol: newProtocol,
+      host: newHost,
+      port: newPort,
+      username: newUsername,
+      password: newPassword,
+    });
+    if (err) {
+      setAddError(err);
+    } else {
+      resetForm();
+      setShowAdd(false);
+    }
+  }, [newName, newProtocol, newHost, newPort, newUsername, newPassword, proxies, resetForm, t]);
+
+  const handleCheck = useCallback(
+    async (id: string) => {
+      setChecking(id);
+      await proxies.checkProxy(id);
+      setChecking(null);
+    },
+    [proxies],
+  );
+
+  const handleCheckAll = useCallback(async () => {
+    setCheckingAll(true);
+    await proxies.checkAll();
+    setCheckingAll(false);
+  }, [proxies]);
+
+  const handleDelete = useCallback(
+    async (id: string) => {
+      if (!confirm(t("removeProxyConfirm"))) return;
+      await proxies.removeProxy(id);
+    },
+    [proxies, t],
+  );
+
+  return (
+    <section>
+      {/* Header */}
+      <div class="flex items-center justify-between mb-2">
+        <div>
+          <h2 class="text-lg font-semibold">{t("proxyPool")}</h2>
+          <p class="text-xs text-slate-500 dark:text-text-dim mt-0.5">
+            {t("proxyPoolDesc")}
+          </p>
+        </div>
+        <div class="flex items-center gap-2">
+          {proxies.proxies.length > 0 && (
+            <button
+              onClick={handleCheckAll}
+              disabled={checkingAll}
+              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-50"
+            >
+              {checkingAll ? "..." : t("checkAllHealth")}
+            </button>
+          )}
+          <button
+            onClick={() => setShowAdd(!showAdd)}
+            class="px-3 py-1.5 text-xs font-medium rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors"
+          >
+            {t("addProxy")}
+          </button>
+        </div>
+      </div>
+
+      {/* Add form */}
+      {showAdd && (
+        <div class="bg-white dark:bg-card-dark border border-gray-200 dark:border-border-dark rounded-xl p-4 mb-4">
+          <div class="grid grid-cols-[auto_1fr_auto] sm:grid-cols-[auto_1fr_80px] gap-2 items-center">
+            {/* Row 1: Protocol + Host + Port */}
+            <select
+              value={newProtocol}
+              onChange={(e) => setNewProtocol((e.target as HTMLSelectElement).value)}
+              class={`${inputCls} w-[110px]`}
+            >
+              {PROTOCOLS.map((p) => (
+                <option key={p} value={p}>{p}://</option>
+              ))}
+            </select>
+            <input
+              type="text"
+              placeholder={t("proxyHost")}
+              value={newHost}
+              onInput={(e) => setNewHost((e.target as HTMLInputElement).value)}
+              class={`${inputCls} font-mono`}
+            />
+            <input
+              type="text"
+              placeholder={t("proxyPort")}
+              value={newPort}
+              onInput={(e) => setNewPort((e.target as HTMLInputElement).value)}
+              class={`${inputCls} font-mono`}
+            />
+          </div>
+          <div class="grid grid-cols-2 sm:grid-cols-3 gap-2 mt-2">
+            {/* Row 2: Name + Username + Password */}
+            <input
+              type="text"
+              placeholder={`${t("proxyName")} (${t("proxyOptional")})`}
+              value={newName}
+              onInput={(e) => setNewName((e.target as HTMLInputElement).value)}
+              class={inputCls}
+            />
+            <input
+              type="text"
+              placeholder={`${t("proxyUsername")} (${t("proxyOptional")})`}
+              value={newUsername}
+              onInput={(e) => setNewUsername((e.target as HTMLInputElement).value)}
+              class={inputCls}
+            />
+            <input
+              type="password"
+              placeholder={`${t("proxyPassword")} (${t("proxyOptional")})`}
+              value={newPassword}
+              onInput={(e) => setNewPassword((e.target as HTMLInputElement).value)}
+              class={`${inputCls} col-span-2 sm:col-span-1`}
+            />
+          </div>
+          <div class="flex items-center justify-between mt-3">
+            {addError && (
+              <p class="text-xs text-red-500">{addError}</p>
+            )}
+            <div class="ml-auto">
+              <button
+                onClick={handleAdd}
+                class="px-4 py-2 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors whitespace-nowrap"
+              >
+                {t("addProxy")}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Empty state */}
+      {proxies.proxies.length === 0 && !showAdd && (
+        <div class="bg-white dark:bg-card-dark border border-gray-200 dark:border-border-dark rounded-xl p-6 text-center text-sm text-slate-500 dark:text-text-dim">
+          {t("noProxies")}
+        </div>
+      )}
+
+      {/* Proxy list */}
+      {proxies.proxies.length > 0 && (
+        <div class="space-y-2">
+          {proxies.proxies.map((proxy) => {
+            const [statusCls, statusKey] =
+              statusStyles[proxy.status] || statusStyles.disabled;
+            const isChecking = checking === proxy.id;
+
+            return (
+              <div
+                key={proxy.id}
+                class="bg-white dark:bg-card-dark border border-gray-200 dark:border-border-dark rounded-xl p-3 hover:shadow-sm transition-all"
+              >
+                <div class="flex items-center justify-between">
+                  {/* Left: name + url + status */}
+                  <div class="flex items-center gap-3 min-w-0 flex-1">
+                    <div class="min-w-0">
+                      <div class="flex items-center gap-2">
+                        <span class="font-medium text-sm truncate">
+                          {proxy.name}
+                        </span>
+                        <span
+                          class={`px-2 py-0.5 rounded-full text-[0.65rem] font-medium border ${statusCls}`}
+                        >
+                          {t(statusKey)}
+                        </span>
+                      </div>
+                      <p class="text-xs text-slate-400 dark:text-text-dim font-mono truncate mt-0.5">
+                        {proxy.url}
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Center: health info */}
+                  {proxy.health && (
+                    <div class="hidden sm:flex items-center gap-4 px-4 text-xs text-slate-500 dark:text-text-dim">
+                      {proxy.health.exitIp && (
+                        <span>
+                          {t("exitIp")}: <span class="font-mono font-medium text-slate-700 dark:text-text-main">{proxy.health.exitIp}</span>
+                        </span>
+                      )}
+                      <span>
+                        {proxy.health.latencyMs}ms
+                      </span>
+                      {proxy.health.error && (
+                        <span class="text-red-500 truncate max-w-[200px]" title={proxy.health.error}>
+                          {proxy.health.error}
+                        </span>
+                      )}
+                    </div>
+                  )}
+
+                  {/* Right: actions */}
+                  <div class="flex items-center gap-1 ml-2">
+                    <button
+                      onClick={() => handleCheck(proxy.id)}
+                      disabled={isChecking}
+                      class="px-2 py-1 text-xs rounded-md hover:bg-slate-100 dark:hover:bg-border-dark transition-colors disabled:opacity-50"
+                      title={t("checkHealth")}
+                    >
+                      {isChecking ? "..." : t("checkHealth")}
+                    </button>
+                    {proxy.status === "disabled" ? (
+                      <button
+                        onClick={() => proxies.enableProxy(proxy.id)}
+                        class="px-2 py-1 text-xs rounded-md hover:bg-green-50 dark:hover:bg-green-900/20 text-green-600 transition-colors"
+                      >
+                        {t("enableProxy")}
+                      </button>
+                    ) : (
+                      <button
+                        onClick={() => proxies.disableProxy(proxy.id)}
+                        class="px-2 py-1 text-xs rounded-md hover:bg-slate-100 dark:hover:bg-border-dark text-slate-500 transition-colors"
+                      >
+                        {t("disableProxy")}
+                      </button>
+                    )}
+                    <button
+                      onClick={() => handleDelete(proxy.id)}
+                      class="p-1 text-slate-400 dark:text-text-dim hover:text-red-500 transition-colors rounded-md hover:bg-red-50 dark:hover:bg-red-900/20"
+                      title={t("deleteProxy")}
+                    >
+                      <svg
+                        class="size-4"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          d="M6 18L18 6M6 6l12 12"
+                        />
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+
+                {/* Mobile health info */}
+                {proxy.health && (
+                  <div class="sm:hidden flex items-center gap-3 mt-2 text-xs text-slate-500 dark:text-text-dim">
+                    {proxy.health.exitIp && (
+                      <span>IP: <span class="font-mono">{proxy.health.exitIp}</span></span>
+                    )}
+                    <span>{proxy.health.latencyMs}ms</span>
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </section>
+  );
+}

packages/electron/desktop/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>
+  );
+}

packages/electron/desktop/src/components/TestConnection.tsx

@@ -0,0 +1,145 @@
+import { useState } from "preact/hooks";
+import { useT } from "@shared/i18n/context";
+import { useTestConnection } from "@shared/hooks/use-test-connection";
+import type { DiagnosticCheck, DiagnosticStatus } from "@shared/types";
+
+const STATUS_COLORS: Record<DiagnosticStatus, string> = {
+  pass: "text-green-600 dark:text-green-400",
+  fail: "text-red-500 dark:text-red-400",
+  skip: "text-slate-400 dark:text-text-dim",
+};
+
+const STATUS_BG: Record<DiagnosticStatus, string> = {
+  pass: "bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800",
+  fail: "bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800",
+  skip: "bg-slate-50 dark:bg-[#161b22] border-slate-200 dark:border-border-dark",
+};
+
+const CHECK_NAME_KEYS: Record<string, string> = {
+  server: "checkServer",
+  accounts: "checkAccounts",
+  transport: "checkTransport",
+  upstream: "checkUpstream",
+};
+
+const STATUS_KEYS: Record<DiagnosticStatus, string> = {
+  pass: "statusPass",
+  fail: "statusFail",
+  skip: "statusSkip",
+};
+
+function StatusIcon({ status }: { status: DiagnosticStatus }) {
+  if (status === "pass") {
+    return (
+      <svg class="size-5 text-green-600 dark:text-green-400 shrink-0" 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>
+    );
+  }
+  if (status === "fail") {
+    return (
+      <svg class="size-5 text-red-500 dark:text-red-400 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+    );
+  }
+  return (
+    <svg class="size-5 text-slate-400 dark:text-text-dim shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+  );
+}
+
+function CheckRow({ check }: { check: DiagnosticCheck }) {
+  const t = useT();
+  const nameKey = CHECK_NAME_KEYS[check.name] ?? check.name;
+  const statusKey = STATUS_KEYS[check.status];
+
+  return (
+    <div class={`flex items-start gap-3 p-3 rounded-lg border ${STATUS_BG[check.status]}`}>
+      <StatusIcon status={check.status} />
+      <div class="flex-1 min-w-0">
+        <div class="flex items-center gap-2">
+          <span class="text-sm font-semibold text-slate-700 dark:text-text-main">
+            {t(nameKey as Parameters<typeof t>[0])}
+          </span>
+          <span class={`text-xs font-medium ${STATUS_COLORS[check.status]}`}>
+            {t(statusKey as Parameters<typeof t>[0])}
+          </span>
+          {check.latencyMs > 0 && (
+            <span class="text-xs text-slate-400 dark:text-text-dim">{check.latencyMs}ms</span>
+          )}
+        </div>
+        {check.detail && (
+          <p class="text-xs text-slate-500 dark:text-text-dim mt-0.5 break-all">{check.detail}</p>
+        )}
+        {check.error && (
+          <p class="text-xs text-red-500 dark:text-red-400 mt-0.5 break-all">{check.error}</p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function TestConnection() {
+  const t = useT();
+  const { testing, result, error, runTest } = useTestConnection();
+  const [collapsed, setCollapsed] = useState(true);
+
+  return (
+    <section class="bg-white dark:bg-card-dark border border-gray-200 dark:border-border-dark rounded-xl shadow-sm transition-colors">
+      {/* Header */}
+      <button
+        onClick={() => setCollapsed(!collapsed)}
+        class="w-full flex items-center justify-between p-5 cursor-pointer select-none"
+      >
+        <div class="flex items-center gap-2">
+          <svg class="size-5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5" />
+          </svg>
+          <h2 class="text-[0.95rem] font-bold">{t("testConnection")}</h2>
+          {result && !collapsed && (
+            <span class={`text-xs font-medium ml-1 ${result.overall === "pass" ? "text-green-600 dark:text-green-400" : "text-red-500 dark:text-red-400"}`}>
+              {result.overall === "pass" ? t("testPassed") : t("testFailed")}
+            </span>
+          )}
+        </div>
+        <svg class={`size-5 text-slate-400 dark:text-text-dim transition-transform ${collapsed ? "" : "rotate-180"}`} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+        </svg>
+      </button>
+
+      {/* Content */}
+      {!collapsed && (
+        <div class="px-5 pb-5 border-t border-slate-100 dark:border-border-dark pt-4">
+          {/* Run test button */}
+          <button
+            onClick={runTest}
+            disabled={testing}
+            class={`w-full py-2.5 text-sm font-medium rounded-lg transition-colors ${
+              testing
+                ? "bg-slate-100 dark:bg-[#21262d] text-slate-400 dark:text-text-dim cursor-not-allowed"
+                : "bg-primary text-white hover:bg-primary/90 cursor-pointer"
+            }`}
+          >
+            {testing ? t("testing") : t("testConnection")}
+          </button>
+
+          {/* Error */}
+          {error && (
+            <p class="mt-3 text-sm text-red-500">{error}</p>
+          )}
+
+          {/* Results */}
+          {result && (
+            <div class="mt-4 space-y-2">
+              {result.checks.map((check) => (
+                <CheckRow key={check.name} check={check} />
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </section>
+  );
+}

packages/electron/desktop/src/index.css

@@ -0,0 +1,53 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --primary: 16 162 53;
+  --primary-hover: 14 140 46;
+}
+
+.dark {
+  --primary: 16 163 127;
+  --primary-hover: 14 140 108;
+}
+
+/* Windows dark mode overrides (macOS values are the Tailwind defaults) */
+.platform-win.dark {
+  --bg-dark: #202020;
+  --card-dark: #2d2d2d;
+  --border-dark: #3d3d3d;
+}
+
+/* ── macOS titlebar integration ────────────────────────────────── */
+.platform-mac header {
+  -webkit-app-region: drag;
+}
+
+.platform-mac header button,
+.platform-mac header a,
+.platform-mac header input,
+.platform-mac header select {
+  -webkit-app-region: no-drag;
+}
+
+/* Traffic light clearance */
+.platform-mac header > div {
+  padding-top: 6px;
+}
+
+.platform-mac header > div > div {
+  padding-left: 72px;
+}
+
+/* ── Windows input focus line ──────────────────────────────────── */
+.platform-win input:focus,
+.platform-win select:focus {
+  border-bottom: 2px solid rgb(var(--primary));
+}
+
+/* ── Scrollbar styling ─────────────────────────────────────────── */
+pre::-webkit-scrollbar { height: 8px; }
+pre::-webkit-scrollbar-track { background: #0d1117; }
+pre::-webkit-scrollbar-thumb { background: #30363d; border-radius: 4px; }
+pre::-webkit-scrollbar-thumb:hover { background: #8b949e; }

packages/electron/desktop/src/main.tsx

@@ -0,0 +1,8 @@
+import { render } from "preact";
+import { App } from "./App";
+import { applyPlatformClass } from "./platform";
+import "./index.css";
+
+applyPlatformClass();
+
+render(<App />, document.getElementById("app")!);

packages/electron/desktop/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>
+  );
+}

packages/electron/desktop/src/platform.ts

@@ -0,0 +1,13 @@
+export type Platform = "mac" | "win";
+
+export function getPlatform(): Platform {
+  const ua = navigator.userAgent.toLowerCase();
+  if (ua.includes("macintosh") || ua.includes("mac os")) return "mac";
+  return "win";
+}
+
+/** Apply platform class to <html> element on startup */
+export function applyPlatformClass(): void {
+  const platform = getPlatform();
+  document.documentElement.classList.add(`platform-${platform}`);
+}

packages/electron/desktop/tailwind.config.ts

@@ -0,0 +1,50 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{ts,tsx}",
+    "../shared/**/*.{ts,tsx}",
+  ],
+  darkMode: "class",
+  theme: {
+    extend: {
+      colors: {
+        primary: "rgb(var(--primary) / <alpha-value>)",
+        "primary-hover": "rgb(var(--primary-hover) / <alpha-value>)",
+        "bg-light": "#f6f8f6",
+        "bg-dark": "var(--bg-dark, #0d1117)",
+        "card-dark": "var(--card-dark, #161b22)",
+        "border-dark": "var(--border-dark, #30363d)",
+        "text-main": "#e6edf3",
+        "text-dim": "rgb(139 148 158 / <alpha-value>)",
+      },
+      fontFamily: {
+        display: [
+          "system-ui",
+          "-apple-system",
+          "BlinkMacSystemFont",
+          "Segoe UI",
+          "Roboto",
+          "sans-serif",
+        ],
+        mono: [
+          "ui-monospace",
+          "SFMono-Regular",
+          "SF Mono",
+          "Menlo",
+          "Consolas",
+          "Liberation Mono",
+          "monospace",
+        ],
+      },
+      borderRadius: {
+        DEFAULT: "0.25rem",
+        lg: "0.5rem",
+        xl: "0.75rem",
+        full: "9999px",
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config;

packages/electron/desktop/vite.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig } from "vite";
+import preact from "@preact/preset-vite";
+import path from "path";
+
+export default defineConfig({
+  plugins: [preact()],
+  resolve: {
+    alias: {
+      "preact": path.resolve(__dirname, "node_modules/preact"),
+      "preact/hooks": path.resolve(__dirname, "node_modules/preact/hooks"),
+      "@shared": path.resolve(__dirname, "..", "..", "..", "shared"),
+    },
+  },
+  base: "/desktop/",
+  build: {
+    outDir: "../public-desktop",
+    emptyOutDir: true,
+  },
+  server: {
+    port: 5174,
+    proxy: {
+      "/v1": "http://localhost:8080",
+      "/auth": "http://localhost:8080",
+      "/health": "http://localhost:8080",
+      "/debug": "http://localhost:8080",
+      "/admin": "http://localhost:8080",
+    },
+  },
+});

packages/electron/electron-builder.yml

@@ -0,0 +1,77 @@
+appId: com.codex-proxy.app
+productName: Codex Proxy
+
+publish:
+  provider: github
+  owner: icebear0828
+  repo: codex-proxy
+
+directories:
+  output: release
+
+files:
+  - dist-electron/**/*
+  - electron/assets/**/*
+  - package.json
+  - "!node_modules"
+  - node_modules/koffi/**
+  - "!dist"
+  # Include root-level runtime files (resolved relative to packages/electron/)
+  - from: ../../config
+    to: config
+    filter:
+      - "**/*"
+  - from: ../../public
+    to: public
+    filter:
+      - "**/*"
+  - from: ../../public-desktop
+    to: public-desktop
+    filter:
+      - "**/*"
+
+# Static assets unpacked from asar (filesystem access at runtime)
+asarUnpack:
+  - "config/**/*"
+  - "public/**/*"
+  - "public-desktop/**/*"
+  - "node_modules/koffi/**"
+  - "**/*.node"
+
+# curl-impersonate binaries as extra resources (outside asar)
+extraResources:
+  - from: ../../bin/
+    to: bin/
+    filter:
+      - "**/*"
+
+win:
+  target:
+    - target: nsis
+      arch: [x64]
+  icon: electron/assets/icon.png
+  signAndEditExecutable: false
+
+nsis:
+  oneClick: false
+  allowToChangeInstallationDirectory: true
+  perMachine: false
+
+mac:
+  target:
+    - target: dmg
+      arch: [arm64, x64]
+    - target: zip
+      arch: [arm64, x64]
+  icon: electron/assets/icon.png
+  category: public.app-category.developer-tools
+  # No Apple Developer certificate — electron-builder auto-falls back to
+  # ad-hoc signing (codesign -s -). Users see "unidentified developer"
+  # warning and can right-click → Open to bypass.
+
+linux:
+  target:
+    - target: AppImage
+      arch: [x64]
+  icon: electron/assets/icon.png
+  category: Development

packages/electron/electron/auto-updater.ts

@@ -0,0 +1,181 @@
+/**
+ * Electron auto-updater — checks GitHub Releases for new versions,
+ * downloads updates, and installs them on quit.
+ *
+ * Supports Windows (NSIS), macOS (zip), and Linux (AppImage).
+ */
+
+import { autoUpdater, type UpdateInfo, type ProgressInfo } from "electron-updater";
+import { BrowserWindow, dialog } from "electron";
+
+export interface AutoUpdateState {
+  checking: boolean;
+  updateAvailable: boolean;
+  downloading: boolean;
+  downloaded: boolean;
+  progress: number;
+  version: string | null;
+  error: string | null;
+}
+
+interface AutoUpdaterOptions {
+  getMainWindow: () => BrowserWindow | null;
+  rebuildTrayMenu: () => void;
+}
+
+const state: AutoUpdateState = {
+  checking: false,
+  updateAvailable: false,
+  downloading: false,
+  downloaded: false,
+  progress: 0,
+  version: null,
+  error: null,
+};
+
+const CHECK_INTERVAL_MS = 4 * 60 * 60 * 1000; // 4 hours
+const INITIAL_DELAY_MS = 30_000; // 30 seconds after startup
+
+let checkTimer: ReturnType<typeof setInterval> | null = null;
+let initialTimer: ReturnType<typeof setTimeout> | null = null;
+let dismissedVersion: string | null = null;
+
+export function getAutoUpdateState(): AutoUpdateState {
+  return { ...state };
+}
+
+export function initAutoUpdater(options: AutoUpdaterOptions): void {
+  autoUpdater.autoDownload = false;
+  autoUpdater.autoInstallOnAppQuit = true;
+  autoUpdater.allowPrerelease = false;
+
+  autoUpdater.on("checking-for-update", () => {
+    state.checking = true;
+    state.error = null;
+  });
+
+  autoUpdater.on("update-available", (info: UpdateInfo) => {
+    state.checking = false;
+    state.updateAvailable = true;
+    state.version = info.version;
+    options.rebuildTrayMenu();
+
+    // Don't re-prompt if user already dismissed this version
+    if (info.version === dismissedVersion) return;
+
+    const win = options.getMainWindow();
+    const msgOptions = {
+      type: "info" as const,
+      title: "Update Available",
+      message: `A new version (v${info.version}) is available.`,
+      detail: "Would you like to download it now?",
+      buttons: ["Download", "Later"],
+      defaultId: 0,
+    };
+    const promise = win
+      ? dialog.showMessageBox(win, msgOptions)
+      : dialog.showMessageBox(msgOptions);
+    promise.then(({ response }) => {
+      if (response === 0) {
+        autoUpdater.downloadUpdate().catch((err: unknown) => {
+          const msg = err instanceof Error ? err.message : String(err);
+          console.error("[AutoUpdater] Download failed:", msg);
+        });
+      } else {
+        dismissedVersion = info.version;
+      }
+    });
+  });
+
+  autoUpdater.on("update-not-available", () => {
+    state.checking = false;
+    state.updateAvailable = false;
+  });
+
+  autoUpdater.on("download-progress", (progress: ProgressInfo) => {
+    state.downloading = true;
+    const rounded = Math.round(progress.percent);
+    // Throttle tray rebuilds to every 10% increment
+    if (rounded - state.progress >= 10 || rounded === 100) {
+      state.progress = rounded;
+      options.rebuildTrayMenu();
+    } else {
+      state.progress = rounded;
+    }
+  });
+
+  autoUpdater.on("update-downloaded", (info: UpdateInfo) => {
+    state.downloading = false;
+    state.downloaded = true;
+    state.progress = 100;
+    options.rebuildTrayMenu();
+
+    const win = options.getMainWindow();
+    const readyOptions = {
+      type: "info" as const,
+      title: "Update Ready",
+      message: `Version ${info.version} has been downloaded.`,
+      detail: "The update will be installed when you quit the app. Restart now?",
+      buttons: ["Restart Now", "Later"],
+      defaultId: 0,
+    };
+    const readyPromise = win
+      ? dialog.showMessageBox(win, readyOptions)
+      : dialog.showMessageBox(readyOptions);
+    readyPromise.then(({ response }) => {
+      if (response === 0) {
+        autoUpdater.quitAndInstall(false, true);
+      }
+    });
+  });
+
+  autoUpdater.on("error", (err: Error) => {
+    state.checking = false;
+    state.downloading = false;
+    state.error = err.message;
+    console.error("[AutoUpdater] Error:", err.message);
+    options.rebuildTrayMenu();
+  });
+
+  // Initial check after delay
+  initialTimer = setTimeout(() => {
+    autoUpdater.checkForUpdates().catch((err: Error) => {
+      console.warn("[AutoUpdater] Initial check failed:", err.message);
+    });
+  }, INITIAL_DELAY_MS);
+
+  // Periodic check
+  checkTimer = setInterval(() => {
+    autoUpdater.checkForUpdates().catch((err: Error) => {
+      console.warn("[AutoUpdater] Periodic check failed:", err.message);
+    });
+  }, CHECK_INTERVAL_MS);
+  if (checkTimer.unref) checkTimer.unref();
+}
+
+export function checkForUpdateManual(): void {
+  autoUpdater.checkForUpdates().catch((err: Error) => {
+    console.warn("[AutoUpdater] Manual check failed:", err.message);
+  });
+}
+
+export function downloadUpdate(): void {
+  autoUpdater.downloadUpdate().catch((err: Error) => {
+    console.warn("[AutoUpdater] Download failed:", err.message);
+  });
+}
+
+export function installUpdate(): void {
+  autoUpdater.quitAndInstall(false, true);
+}
+
+export function stopAutoUpdater(): void {
+  if (initialTimer) {
+    clearTimeout(initialTimer);
+    initialTimer = null;
+  }
+  if (checkTimer) {
+    clearInterval(checkTimer);
+    checkTimer = null;
+  }
+}

packages/electron/electron/build.mjs

@@ -0,0 +1,44 @@
+/**
+ * esbuild script — bundles Electron main + backend server.
+ *
+ * Output:
+ *   dist-electron/main.cjs    — Electron main process (CJS)
+ *   dist-electron/server.mjs  — Backend server bundle (ESM, all deps included)
+ *
+ * The server bundle eliminates the need for node_modules at runtime,
+ * solving the ESM+asar module resolution issue.
+ */
+
+import { build } from "esbuild";
+
+// 1. Electron main process → CJS (loaded by Electron directly)
+await build({
+  entryPoints: ["electron/main.ts"],
+  bundle: true,
+  platform: "node",
+  format: "cjs",
+  outfile: "dist-electron/main.cjs",
+  external: ["electron"],
+  target: "node20",
+  sourcemap: true,
+});
+
+console.log("[esbuild] dist-electron/main.cjs built successfully");
+
+// 2. Backend server → ESM (dynamically imported by main.cjs)
+//    All npm deps (hono, zod, js-yaml, etc.) are bundled in.
+//    Only Node builtins and optional native modules are external.
+await build({
+  entryPoints: ["src/electron-entry.ts"],
+  bundle: true,
+  platform: "node",
+  format: "esm",
+  outfile: "dist-electron/server.mjs",
+  external: ["koffi"],
+  target: "node20",
+  sourcemap: true,
+  // Mark .node files as external (native addons)
+  loader: { ".node": "empty" },
+});
+
+console.log("[esbuild] dist-electron/server.mjs built successfully");

packages/electron/electron/main.ts

@@ -0,0 +1,342 @@
+/**
+ * Electron main process for Codex Proxy desktop app.
+ *
+ * Built by esbuild into dist-electron/main.cjs (CJS format).
+ * Loads the backend ESM modules from asarUnpack (real filesystem paths).
+ */
+
+import { app, BrowserWindow, Tray, Menu, shell, nativeImage, dialog } from "electron";
+import { resolve, join } from "path";
+import { pathToFileURL } from "url";
+import { existsSync, mkdirSync } from "fs";
+import {
+  initAutoUpdater,
+  getAutoUpdateState,
+  checkForUpdateManual,
+  installUpdate,
+  downloadUpdate,
+  stopAutoUpdater,
+} from "./auto-updater.js";
+
+const IS_MAC = process.platform === "darwin";
+
+let mainWindow: BrowserWindow | null = null;
+let tray: Tray | null = null;
+let serverHandle: { close: () => Promise<void>; port: number } | null = null;
+let isQuitting = false;
+
+// Single instance lock
+const gotLock = app.requestSingleInstanceLock();
+if (!gotLock) {
+  app.quit();
+} else {
+  app.on("second-instance", () => {
+    if (mainWindow) {
+      if (mainWindow.isMinimized()) mainWindow.restore();
+      mainWindow.show();
+      mainWindow.focus();
+    }
+  });
+}
+
+// ── macOS application menu ──────────────────────────────────────────
+
+function setupAppMenu(): void {
+  if (!IS_MAC) return;
+
+  const template: Electron.MenuItemConstructorOptions[] = [
+    {
+      label: app.name,
+      submenu: [
+        { role: "about" },
+        { type: "separator" },
+        { role: "hide" },
+        { role: "hideOthers" },
+        { role: "unhide" },
+        { type: "separator" },
+        { role: "quit" },
+      ],
+    },
+    {
+      label: "Edit",
+      submenu: [
+        { role: "undo" },
+        { role: "redo" },
+        { type: "separator" },
+        { role: "cut" },
+        { role: "copy" },
+        { role: "paste" },
+        { role: "selectAll" },
+      ],
+    },
+    {
+      label: "View",
+      submenu: [
+        { role: "reload" },
+        { role: "forceReload" },
+        { role: "toggleDevTools" },
+        { type: "separator" },
+        { role: "resetZoom" },
+        { role: "zoomIn" },
+        { role: "zoomOut" },
+        { type: "separator" },
+        { role: "togglefullscreen" },
+      ],
+    },
+    {
+      label: "Window",
+      submenu: [
+        { role: "minimize" },
+        { role: "zoom" },
+        { type: "separator" },
+        { role: "front" },
+      ],
+    },
+  ];
+
+  Menu.setApplicationMenu(Menu.buildFromTemplate(template));
+}
+
+// ── App ready ────────────────────────────────────────────────────────
+
+app.on("ready", async () => {
+  setupAppMenu();
+
+  try {
+    // 1. Determine paths — must happen before importing backend
+    const userData = app.getPath("userData");
+    const dataDir = resolve(userData, "data");
+    if (!existsSync(dataDir)) mkdirSync(dataDir, { recursive: true });
+
+    const appRoot = app.getAppPath();
+    const distRoot = app.isPackaged
+      ? resolve(process.resourcesPath, "app.asar.unpacked")
+      : appRoot;
+
+    const binDir = app.isPackaged
+      ? resolve(process.resourcesPath, "bin")
+      : resolve(appRoot, "bin");
+
+    // 2. Import the bundled backend server (single ESM file, no node_modules needed)
+    const serverUrl = pathToFileURL(resolve(appRoot, "dist-electron", "server.mjs")).href;
+    const { setPaths, startServer } = await import(serverUrl);
+
+    // 3. Set paths before starting the server
+    setPaths({
+      rootDir: appRoot,
+      configDir: resolve(distRoot, "config"),
+      dataDir,
+      binDir,
+      publicDir: resolve(distRoot, "public"),
+      desktopPublicDir: resolve(distRoot, "public-desktop"),
+    });
+
+    // 4. Start the proxy server (try configured port first, fall back to random if occupied)
+    try {
+      serverHandle = await startServer({ host: "127.0.0.1" });
+    } catch {
+      console.warn("[Electron] Default port in use, using random port");
+      serverHandle = await startServer({ host: "127.0.0.1", port: 0 });
+    }
+    console.log(`[Electron] Server started on port ${serverHandle.port}`);
+
+    // 4. System tray
+    createTray();
+
+    // 5. Main window
+    createWindow();
+
+    // 6. Auto-updater (only in packaged mode)
+    if (app.isPackaged) {
+      initAutoUpdater({
+        getMainWindow: () => mainWindow,
+        rebuildTrayMenu,
+      });
+    }
+  } catch (err) {
+    console.error("[Electron] Startup failed:", err);
+    dialog.showErrorBox(
+      "Codex Proxy - Startup Error",
+      `Failed to start:\n\n${err instanceof Error ? err.stack ?? err.message : String(err)}`,
+    );
+    app.quit();
+  }
+});
+
+// ── Window ───────────────────────────────────────────────────────────
+
+function createWindow(): void {
+  if (mainWindow) {
+    mainWindow.show();
+    mainWindow.focus();
+    return;
+  }
+
+  mainWindow = new BrowserWindow({
+    width: 1100,
+    height: 750,
+    minWidth: 680,
+    minHeight: 500,
+    title: "Codex Proxy",
+    // macOS: native hidden titlebar with traffic lights inset into content
+    ...(IS_MAC
+      ? {
+          titleBarStyle: "hiddenInset",
+          trafficLightPosition: { x: 16, y: 18 },
+        }
+      : {}),
+    webPreferences: {
+      nodeIntegration: false,
+      contextIsolation: true,
+    },
+    show: false,
+  });
+
+  const port = serverHandle?.port ?? 8080;
+  mainWindow.loadURL(`http://127.0.0.1:${port}/desktop`);
+
+  // Mark <html> with platform class so frontend CSS can adapt
+  mainWindow.webContents.on("did-finish-load", () => {
+    const legacy = IS_MAC ? "electron-mac" : "electron-win";
+    const platform = IS_MAC ? "platform-mac" : "platform-win";
+    mainWindow?.webContents.executeJavaScript(
+      `document.documentElement.classList.add("electron","${legacy}","${platform}")`,
+    );
+  });
+
+  mainWindow.once("ready-to-show", () => {
+    mainWindow?.show();
+  });
+
+  // Close → hide to tray instead of quitting (unless app is quitting)
+  mainWindow.on("close", (e) => {
+    if (!isQuitting) {
+      e.preventDefault();
+      mainWindow?.hide();
+    }
+  });
+
+  // Open external links in the default browser
+  mainWindow.webContents.setWindowOpenHandler(({ url }) => {
+    shell.openExternal(url);
+    return { action: "deny" };
+  });
+
+  mainWindow.on("closed", () => {
+    mainWindow = null;
+  });
+}
+
+// ── Tray ─────────────────────────────────────────────────────────────
+
+function buildTrayMenu(): Electron.MenuItemConstructorOptions[] {
+  const items: Electron.MenuItemConstructorOptions[] = [
+    {
+      label: "Open Dashboard",
+      click: () => createWindow(),
+    },
+    { type: "separator" },
+    {
+      label: `Port: ${serverHandle?.port ?? 8080}`,
+      enabled: false,
+    },
+    { type: "separator" },
+  ];
+
+  // Auto-update menu items
+  const updateState = getAutoUpdateState();
+  if (updateState.downloaded) {
+    items.push({
+      label: `Install Update (v${updateState.version})`,
+      click: () => installUpdate(),
+    });
+  } else if (updateState.downloading) {
+    items.push({
+      label: `Downloading Update... ${updateState.progress}%`,
+      enabled: false,
+    });
+  } else if (updateState.updateAvailable) {
+    items.push({
+      label: `Download Update (v${updateState.version})`,
+      click: () => downloadUpdate(),
+    });
+  } else {
+    items.push({
+      label: "Check for Updates",
+      click: () => checkForUpdateManual(),
+    });
+  }
+
+  items.push(
+    { type: "separator" },
+    {
+      label: "Quit",
+      click: () => {
+        isQuitting = true;
+
+        if (serverHandle) {
+          const forceQuit = setTimeout(() => {
+            console.error("[Electron] Server close timeout, forcing exit");
+            app.exit(0);
+          }, 5000);
+
+          serverHandle.close()
+            .then(() => { clearTimeout(forceQuit); app.quit(); })
+            .catch((err: unknown) => {
+              console.error("[Electron] Server close error:", err);
+              clearTimeout(forceQuit);
+              app.quit();
+            });
+        } else {
+          app.quit();
+        }
+      },
+    },
+  );
+
+  return items;
+}
+
+function rebuildTrayMenu(): void {
+  if (tray) {
+    tray.setContextMenu(Menu.buildFromTemplate(buildTrayMenu()));
+  }
+}
+
+function createTray(): void {
+  // In packaged mode: icon is inside asar at {app.asar}/electron/assets/icon.png
+  // In dev mode: relative to dist-electron/ → ../electron/assets/icon.png
+  const iconPath = app.isPackaged
+    ? join(app.getAppPath(), "electron", "assets", "icon.png")
+    : join(__dirname, "..", "electron", "assets", "icon.png");
+  let icon = existsSync(iconPath)
+    ? nativeImage.createFromPath(iconPath)
+    : nativeImage.createEmpty();
+
+  // macOS: resize to 18x18 and mark as template for automatic dark/light adaptation
+  if (IS_MAC && !icon.isEmpty()) {
+    icon = icon.resize({ width: 18, height: 18 });
+    icon.setTemplateImage(true);
+  }
+
+  tray = new Tray(icon.isEmpty() ? nativeImage.createEmpty() : icon);
+  tray.setToolTip("Codex Proxy");
+  tray.setContextMenu(Menu.buildFromTemplate(buildTrayMenu()));
+  tray.on("double-click", () => createWindow());
+}
+
+// macOS: re-create window when dock icon is clicked
+app.on("activate", () => {
+  createWindow();
+});
+
+// Allow quit from macOS dock/menu bar and system shutdown
+app.on("before-quit", () => {
+  isQuitting = true;
+  stopAutoUpdater();
+});
+
+// Prevent app from quitting when all windows are closed (tray keeps it alive)
+app.on("window-all-closed", () => {
+  // Do nothing — tray keeps the app running
+});

packages/electron/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@codex-proxy/electron",
+  "version": "1.0.57",
+  "private": true,
+  "main": "dist-electron/main.cjs",
+  "author": "codex-proxy",
+  "scripts": {
+    "build": "node electron/build.mjs",
+    "dev": "cd ../.. && npm run build && cd packages/electron && npm run build && electron .",
+    "pack": "npx electron-builder --config electron-builder.yml",
+    "pack:win": "npx electron-builder --config electron-builder.yml --win",
+    "pack:mac": "npx electron-builder --config electron-builder.yml --mac",
+    "pack:linux": "npx electron-builder --config electron-builder.yml --linux"
+  },
+  "dependencies": {
+    "electron-updater": "^6.3.0"
+  },
+  "devDependencies": {
+    "electron": "^35.7.5",
+    "electron-builder": "^26.0.0",
+    "esbuild": "^0.25.12"
+  }
+}

packages/electron/src/electron-entry.ts

@@ -0,0 +1,8 @@
+/**
+ * Barrel entry point for Electron bundling.
+ * esbuild bundles this into a single dist-electron/server.mjs with all deps included.
+ */
+
+export { setPaths } from "../../../src/paths.js";
+export { startServer } from "../../../src/index.js";
+export type { ServerHandle, StartOptions } from "../../../src/index.js";

scripts/setup-curl.ts

@@ -59,10 +59,11 @@ function getPlatformInfo(version: string): PlatformInfo {
   }
 
   if (platform === "win32") {
-    // Windows: download libcurl-impersonate package (DLL named libcurl.dll)
+    // Windows: download libcurl-impersonate package
+    // v1.5+ renamed libcurl.dll → libcurl-impersonate.dll
     return {
       assetPattern: /libcurl-impersonate-.*\.x86_64-win32\.tar\.gz/,
-      binaryName: "libcurl.dll",
+      binaryName: "libcurl-impersonate.dll",
       destName: "libcurl.dll",
     };
   }
@@ -70,13 +71,18 @@ function getPlatformInfo(version: string): PlatformInfo {
   throw new Error(`Unsupported platform: ${platform}-${arch}`);
 }
 
+function githubHeaders(): Record<string, string> {
+  const h: Record<string, string> = { "Accept": "application/vnd.github+json" };
+  const token = process.env.GITHUB_TOKEN;
+  if (token) h["Authorization"] = `Bearer ${token}`;
+  return h;
+}
+
 /** Fetch the latest release tag from GitHub. */
 async function getLatestVersion(): Promise<string> {
   const apiUrl = `https://api.github.com/repos/${REPO}/releases/latest`;
   console.log(`[setup] Checking latest release...`);
-  const resp = await fetch(apiUrl, {
-    headers: { "Accept": "application/vnd.github+json" },
-  });
+  const resp = await fetch(apiUrl, { headers: githubHeaders() });
   if (!resp.ok) {
     console.warn(`[setup] Could not fetch latest release (${resp.status}), using fallback ${FALLBACK_VERSION}`);
     return FALLBACK_VERSION;
@@ -89,7 +95,7 @@ async function getDownloadUrl(info: PlatformInfo, version: string): Promise<stri
   const apiUrl = `https://api.github.com/repos/${REPO}/releases/tags/${version}`;
   console.log(`[setup] Fetching release info from ${apiUrl}`);
 
-  const resp = await fetch(apiUrl);
+  const resp = await fetch(apiUrl, { headers: githubHeaders() });
   if (!resp.ok) {
     throw new Error(`GitHub API returned ${resp.status}: ${await resp.text()}`);
   }
@@ -131,11 +137,16 @@ function downloadAndExtract(url: string, info: PlatformInfo): void {
   execSync(`curl -L -o "${archivePath}" "${url}"`, { stdio: "inherit" });
 
   console.log(`[setup] Extracting...`);
-  // Windows: tar interprets D: as remote host; --force-local + forward slashes fix this
   if (process.platform === "win32") {
+    // Windows bsdtar (default on CI) handles D: paths fine without --force-local
+    // GNU tar (e.g. Git Bash) needs --force-local; try without first, fallback with
     const tarArchive = archivePath.replaceAll("\\", "/");
     const tarDest = tmpDir.replaceAll("\\", "/");
-    execSync(`tar xzf "${tarArchive}" --force-local -C "${tarDest}"`, { stdio: "inherit" });
+    try {
+      execSync(`tar xzf "${tarArchive}" -C "${tarDest}"`, { stdio: "inherit" });
+    } catch {
+      execSync(`tar xzf "${tarArchive}" --force-local -C "${tarDest}"`, { stdio: "inherit" });
+    }
   } else {
     execSync(`tar xzf "${archivePath}" -C "${tmpDir}"`, { stdio: "inherit" });
   }