Spaces:

lenson78
/

codex-proxy

Paused

icebear0828 Claude Opus 4.6 commited on Feb 20

Commit

b7d4394

1 Parent(s): b1107bc

feat: migrate dashboard to Preact + Vite

- New web/ directory with Preact components, Tailwind CSS v3, Vite build
- i18n via Context + useT() hook (zero DOM scanning on language switch)
- Theme via ThemeProvider + useTheme() hook
- Ghost text technique for stable header layout across EN/ZH
- Backend: serve Vite build output from public/
- Docker: added frontend build step
- Build: npm run build now builds frontend first, then backend

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

Files changed (30) hide show

.gitignore +2 -0
Dockerfile +12 -4
package.json +3 -1
src/index.ts +3 -3
src/routes/web.ts +6 -2
web/index.html +19 -0
web/package-lock.json +0 -0
web/package.json +21 -0
web/postcss.config.js +6 -0
web/src/App.tsx +59 -0
web/src/components/AccountCard.tsx +151 -0
web/src/components/AccountList.tsx +39 -0
web/src/components/AddAccount.tsx +60 -0
web/src/components/ApiConfig.tsx +86 -0
web/src/components/CodeExamples.tsx +209 -0
web/src/components/CopyButton.tsx +80 -0
web/src/components/Footer.tsx +13 -0
web/src/components/Header.tsx +83 -0
web/src/hooks/use-accounts.ts +156 -0
web/src/hooks/use-status.ts +41 -0
web/src/i18n/context.tsx +53 -0
web/src/i18n/translations.ts +114 -0
web/src/index.css +19 -0
web/src/main.tsx +5 -0
web/src/theme/context.tsx +46 -0
web/src/utils/clipboard.ts +23 -0
web/src/utils/format.ts +39 -0
web/tailwind.config.ts +46 -0
web/tsconfig.json +17 -0
web/vite.config.ts +19 -0

.gitignore CHANGED Viewed

@@ -1,6 +1,8 @@
 node_modules/
 dist/
 data/
 docs/
 bin/
 .env

 node_modules/
 dist/
 data/
+public/assets/
+public/index.html
 docs/
 bin/
 .env

Dockerfile CHANGED Viewed

@@ -7,13 +7,21 @@ RUN apt-get update && \
 WORKDIR /app
-# Install dependencies (postinstall downloads curl-impersonate for Linux)
 COPY package*.json ./
-RUN npm ci --omit=dev
-# Copy source and build
 COPY . .
-RUN npm run build
 # Persistent data mount point
 VOLUME /app/data

 WORKDIR /app
+# Install backend dependencies (postinstall downloads curl-impersonate for Linux)
 COPY package*.json ./
+RUN npm ci
+# Copy source
 COPY . .
+# Build frontend (Vite → public/)
+RUN cd web && npm ci && npm run build
+# Build backend (TypeScript → dist/)
+RUN npx tsc
+# Prune dev dependencies
+RUN npm prune --omit=dev
 # Persistent data mount point
 VOLUME /app/data

package.json CHANGED Viewed

@@ -5,7 +5,9 @@
   "type": "module",
   "scripts": {
     "dev": "tsx watch src/index.ts",
-    "build": "tsc",
     "start": "node dist/index.js",
     "check-update": "tsx scripts/check-update.ts",
     "check-update:watch": "tsx scripts/check-update.ts --watch",

   "type": "module",
   "scripts": {
     "dev": "tsx watch src/index.ts",
+    "dev:web": "cd web && npm run dev",
+    "build:web": "cd web && npm install && npm run build",
+    "build": "npm run build:web && tsc",
     "start": "node dist/index.js",
     "check-update": "tsx scripts/check-update.ts",
     "check-update:watch": "tsx scripts/check-update.ts --watch",

src/index.ts CHANGED Viewed

@@ -68,14 +68,15 @@ async function main() {
   const host = config.server.host;
   const poolSummary = accountPool.getPoolSummary();
   console.log(`
 ╔══════════════════════════════════════════╗
 ║           Codex Proxy Server             ║
 ╠══════════════════════════════════════════╣
 ║  Status: ${accountPool.isAuthenticated() ? "Authenticated ✓" : "Not logged in  "}             ║
-║  Listen: http://${host}:${port}              ║
-║  API:    http://${host}:${port}/v1            ║
 ╚══════════════════════════════════════════╝
 `);
@@ -86,7 +87,6 @@ async function main() {
     console.log(`  Key:  ${accountPool.getProxyApiKey()}`);
     console.log(`  Pool: ${poolSummary.active} active / ${poolSummary.total} total accounts`);
   } else {
-    const displayHost = host === "0.0.0.0" ? "localhost" : host;
     console.log(`  Open http://${displayHost}:${port} to login`);
   }
   console.log();

   const host = config.server.host;
   const poolSummary = accountPool.getPoolSummary();
+  const displayHost = (host === "0.0.0.0" || host === "::") ? "localhost" : host;
   console.log(`
 ╔══════════════════════════════════════════╗
 ║           Codex Proxy Server             ║
 ╠══════════════════════════════════════════╣
 ║  Status: ${accountPool.isAuthenticated() ? "Authenticated ✓" : "Not logged in  "}             ║
+║  Listen: http://${displayHost}:${port}              ║
+║  API:    http://${displayHost}:${port}/v1            ║
 ╚══════════════════════════════════════════╝
 `);
     console.log(`  Key:  ${accountPool.getProxyApiKey()}`);
     console.log(`  Pool: ${poolSummary.active} active / ${poolSummary.total} total accounts`);
   } else {
     console.log(`  Open http://${displayHost}:${port} to login`);
   }
   console.log();

src/routes/web.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { Hono } from "hono";
 import { readFileSync, existsSync } from "fs";
 import { resolve } from "path";
 import type { AccountPool } from "../auth/account-pool.js";
@@ -10,14 +11,17 @@ export function createWebRoutes(accountPool: AccountPool): Hono {
   const publicDir = resolve(process.cwd(), "public");
   app.get("/", (c) => {
     try {
-      const html = readFileSync(resolve(publicDir, "dashboard.html"), "utf-8");
       return c.html(html);
     } catch (err) {
       const msg = err instanceof Error ? err.message : String(err);
       console.error(`[Web] Failed to read HTML file: ${msg}`);
-      return c.html("<h1>Codex Proxy</h1><p>UI files not found. The API is still available at /v1/chat/completions</p>");
     }
   });

 import { Hono } from "hono";
+import { serveStatic } from "@hono/node-server/serve-static";
 import { readFileSync, existsSync } from "fs";
 import { resolve } from "path";
 import type { AccountPool } from "../auth/account-pool.js";
   const publicDir = resolve(process.cwd(), "public");
+  // Serve Vite build assets
+  app.use("/assets/*", serveStatic({ root: "./public" }));
   app.get("/", (c) => {
     try {
+      const html = readFileSync(resolve(publicDir, "index.html"), "utf-8");
       return c.html(html);
     } catch (err) {
       const msg = err instanceof Error ? err.message : String(err);
       console.error(`[Web] Failed to read HTML file: ${msg}`);
+      return c.html("<h1>Codex Proxy</h1><p>UI files not found. Run 'npm run build:web' first. The API is still available at /v1/chat/completions</p>");
     }
   });

web/index.html ADDED Viewed

	@@ -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 Developer Dashboard</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>

web/package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

web/package.json ADDED Viewed

	@@ -0,0 +1,21 @@

+{
+  "name": "codex-proxy-web",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "preact": "^10.25.0"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.9.0",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.5.0",
+    "vite": "^6.0.0"
+  }
+}

web/postcss.config.js ADDED Viewed

	@@ -0,0 +1,6 @@

+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

web/src/App.tsx ADDED Viewed

	@@ -0,0 +1,59 @@

+import { I18nProvider } from "./i18n/context";
+import { ThemeProvider } from "./theme/context";
+import { Header } from "./components/Header";
+import { AccountList } from "./components/AccountList";
+import { AddAccount } from "./components/AddAccount";
+import { ApiConfig } from "./components/ApiConfig";
+import { CodeExamples } from "./components/CodeExamples";
+import { Footer } from "./components/Footer";
+import { useAccounts } from "./hooks/use-accounts";
+import { useStatus } from "./hooks/use-status";
+function Dashboard() {
+  const accounts = useAccounts();
+  const status = useStatus();
+  return (
+    <>
+      <Header onAddAccount={accounts.startAdd} />
+      <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}
+          />
+          <ApiConfig
+            baseUrl={status.baseUrl}
+            apiKey={status.apiKey}
+            models={status.models}
+            selectedModel={status.selectedModel}
+            onModelChange={status.setSelectedModel}
+          />
+          <CodeExamples
+            baseUrl={status.baseUrl}
+            apiKey={status.apiKey}
+            model={status.selectedModel}
+          />
+        </div>
+      </main>
+      <Footer />
+    </>
+  );
+}
+export function App() {
+  return (
+    <I18nProvider>
+      <ThemeProvider>
+        <Dashboard />
+      </ThemeProvider>
+    </I18nProvider>
+  );
+}

web/src/components/AccountCard.tsx ADDED Viewed

	@@ -0,0 +1,151 @@

+import { useCallback } from "preact/hooks";
+import { useT } from "../i18n/context";
+import { useI18n } from "../i18n/context";
+import { formatNumber, formatResetTime } from "../utils/format";
+import type { Account } from "../hooks/use-accounts";
+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>;
+}
+export function AccountCard({ account, index, onDelete }: 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 plan = account.planType || t("freeTier");
+  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
+  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;
+  return (
+    <div class="group 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 relative">
+      {/* Delete button */}
+      <button
+        onClick={handleDelete}
+        class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 p-1.5 text-slate-300 dark:text-text-dim hover:text-red-500 transition-all 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>
+      {/* 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}</p>
+          </div>
+        </div>
+        <span class={`px-2.5 py-1 rounded-full ${statusCls} text-xs font-medium border`}>
+          {t(statusKey as any)}
+        </span>
+      </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("totalRequests")}</span>
+          <span class="font-medium">{formatNumber(requests)}</span>
+        </div>
+        <div class="flex justify-between text-[0.78rem]">
+          <span class="text-slate-500 dark:text-text-dim">{t("tokensUsed")}</span>
+          <span class="font-medium">{formatNumber(tokens)}</span>
+        </div>
+      </div>
+      {/* Quota bar */}
+      {rl && (
+        <div class="pt-3 mt-3 border-t border-slate-100 dark:border-border-dark">
+          <div class="flex justify-between text-[0.78rem] mb-1.5">
+            <span class="text-slate-500 dark:text-text-dim">{t("rateLimit")}</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>
+      )}
+    </div>
+  );
+}

web/src/components/AccountList.tsx ADDED Viewed

	@@ -0,0 +1,39 @@

+import { useT } from "../i18n/context";
+import { AccountCard } from "./AccountCard";
+import type { Account } from "../hooks/use-accounts";
+interface AccountListProps {
+  accounts: Account[];
+  loading: boolean;
+  onDelete: (id: string) => Promise<string | null>;
+}
+export function AccountList({ accounts, loading, onDelete }: AccountListProps) {
+  const t = useT();
+  return (
+    <section class="flex flex-col gap-4">
+      <div class="flex items-end 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>
+      <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} />
+          ))
+        )}
+      </div>
+    </section>
+  );
+}

web/src/components/AddAccount.tsx ADDED Viewed

	@@ -0,0 +1,60 @@

+import { useState, useCallback } from "preact/hooks";
+import { useT } from "../i18n/context";
+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 any)}</p>
+      )}
+      {addError && (
+        <p class="text-sm text-red-500">{t(addError as any)}</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>
+      )}
+    </>
+  );
+}

web/src/components/ApiConfig.tsx ADDED Viewed

	@@ -0,0 +1,86 @@

+import { useT } from "../i18n/context";
+import { CopyButton } from "./CopyButton";
+import { useCallback } from "preact/hooks";
+interface ApiConfigProps {
+  baseUrl: string;
+  apiKey: string;
+  models: string[];
+  selectedModel: string;
+  onModelChange: (model: string) => void;
+}
+export function ApiConfig({ baseUrl, apiKey, models, selectedModel, onModelChange }: ApiConfigProps) {
+  const t = useT();
+  const getBaseUrl = useCallback(() => baseUrl, [baseUrl]);
+  const getApiKey = useCallback(() => apiKey, [apiKey]);
+  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>
+        {/* Default Model */}
+        <div class="space-y-1.5">
+          <label class="text-xs font-semibold text-slate-700 dark:text-text-main">{t("defaultModel")}</label>
+          <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>
+  );
+}

web/src/components/CodeExamples.tsx ADDED Viewed

	@@ -0,0 +1,209 @@

+import { useState, useMemo, useCallback } from "preact/hooks";
+import { useT } from "../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
+): Record<string, string> {
+  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"}],
+)
+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"}]
+  }'`,
+    "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" }],
+    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="claude-sonnet-4-20250514",
+    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": "claude-sonnet-4-20250514",
+    "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: "claude-sonnet-4-20250514",
+    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="gemini-2.5-pro",
+    contents="Hello",
+)
+print(response.text)`,
+    "gemini-curl": `curl "${origin}/v1beta/models/gemini-2.5-pro: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: "gemini-2.5-pro",
+    contents: "Hello",
+});
+console.log(response.text);`,
+  };
+}
+interface CodeExamplesProps {
+  baseUrl: string;
+  apiKey: string;
+  model: string;
+}
+export function CodeExamples({ baseUrl, apiKey, model }: CodeExamplesProps) {
+  const t = useT();
+  const [protocol, setProtocol] = useState<Protocol>("openai");
+  const [codeLang, setCodeLang] = useState<CodeLang>("python");
+  const origin = typeof window !== "undefined" ? window.location.origin : "";
+  const examples = useMemo(
+    () => buildExamples(baseUrl, apiKey, model, origin),
+    [baseUrl, apiKey, model, origin]
+  );
+  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>
+  );
+}

web/src/components/CopyButton.tsx ADDED Viewed

	@@ -0,0 +1,80 @@

+import { useState, useCallback } from "preact/hooks";
+import { clipboardCopy } from "../utils/clipboard";
+import { useT } from "../i18n/context";
+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 any) : undefined}
+    >
+      {state === "ok" ? SVG_CHECK : state === "fail" ? SVG_FAIL : SVG_COPY}
+    </button>
+  );
+}

web/src/components/Footer.tsx ADDED Viewed

	@@ -0,0 +1,13 @@

+import { useT } from "../i18n/context";
+export function Footer() {
+  const t = useT();
+  return (
+    <footer class="mt-auto border-t border-gray-200 dark:border-border-dark bg-white dark:bg-card-dark py-6 transition-colors">
+      <div class="container mx-auto px-4 text-center">
+        <p class="text-[0.8rem] text-slate-500 dark:text-text-dim">{t("footer")}</p>
+      </div>
+    </footer>
+  );
+}

web/src/components/Header.tsx ADDED Viewed

	@@ -0,0 +1,83 @@

+import { useI18n } from "../i18n/context";
+import { useTheme } from "../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;
+}
+export function Header({ onAddAccount }: 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">
+            <div class="flex items-center justify-center size-8 rounded-full bg-primary/10 text-primary border border-primary/20">
+              <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+            </div>
+            <h1 class="text-[0.9rem] font-bold tracking-tight">Codex Proxy</h1>
+          </div>
+          {/* Actions */}
+          <div class="flex items-center gap-3">
+            <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>
+            </div>
+            {/* 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="\u4e2d/EN"
+            >
+              <span class="text-xs font-bold inline-flex items-center justify-center w-5">{lang === "en" ? "EN" : "\u4e2d"}</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>
+            {/* Add Account */}
+            <button
+              onClick={onAddAccount}
+              class="flex items-center gap-2 px-4 py-2 bg-primary hover:bg-primary-hover text-white text-xs font-semibold rounded-lg transition-colors shadow-sm active:scale-95"
+            >
+              <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+              </svg>
+              <span class="inline-grid">
+                <span class="invisible col-start-1 row-start-1">Add Account</span>
+                <span class="col-start-1 row-start-1">{t("addAccount")}</span>
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}

web/src/hooks/use-accounts.ts ADDED Viewed

	@@ -0,0 +1,156 @@

+import { useState, useEffect, useCallback } from "preact/hooks";
+export interface AccountQuota {
+  rate_limit?: {
+    used_percent?: number | null;
+    limit_reached?: boolean;
+    reset_at?: number | null;
+  };
+}
+export interface Account {
+  id: string;
+  email: string;
+  status: string;
+  planType?: string;
+  usage?: {
+    request_count?: number;
+    input_tokens?: number;
+    output_tokens?: number;
+  };
+  quota?: AccountQuota;
+}
+export function useAccounts() {
+  const [list, setList] = useState<Account[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [addVisible, setAddVisible] = useState(false);
+  const [addInfo, setAddInfo] = useState("");
+  const [addError, setAddError] = useState("");
+  const loadAccounts = useCallback(async () => {
+    try {
+      const resp = await fetch("/auth/accounts?quota=true");
+      const data = await resp.json();
+      setList(data.accounts || []);
+    } catch (err) {
+      setList([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  useEffect(() => {
+    loadAccounts();
+  }, [loadAccounts]);
+  // Listen for OAuth callback success
+  useEffect(() => {
+    const handler = async (event: MessageEvent) => {
+      if (event.data?.type === "oauth-callback-success") {
+        setAddVisible(false);
+        setAddInfo("accountAdded");
+        await loadAccounts();
+      }
+    };
+    window.addEventListener("message", handler);
+    return () => window.removeEventListener("message", handler);
+  }, [loadAccounts]);
+  const startAdd = useCallback(async () => {
+    setAddInfo("");
+    setAddError("");
+    try {
+      const resp = await fetch("/auth/login-start", { method: "POST" });
+      const data = await resp.json();
+      if (!resp.ok || !data.authUrl) {
+        throw new Error(data.error || "failedStartLogin");
+      }
+      window.open(data.authUrl, "oauth_add", "width=600,height=700,scrollbars=yes");
+      setAddVisible(true);
+      // Poll for new account
+      const prevResp = await fetch("/auth/accounts");
+      const prevData = await prevResp.json();
+      const prevCount = prevData.accounts?.length || 0;
+      const pollTimer = setInterval(async () => {
+        try {
+          const r = await fetch("/auth/accounts");
+          const d = await r.json();
+          if ((d.accounts?.length || 0) > prevCount) {
+            clearInterval(pollTimer);
+            setAddVisible(false);
+            setAddInfo("accountAdded");
+            await loadAccounts();
+          }
+        } catch {}
+      }, 2000);
+      setTimeout(() => clearInterval(pollTimer), 5 * 60 * 1000);
+    } catch (err) {
+      setAddError(err instanceof Error ? err.message : "failedStartLogin");
+    }
+  }, [loadAccounts]);
+  const submitRelay = useCallback(
+    async (callbackUrl: string) => {
+      setAddInfo("");
+      setAddError("");
+      if (!callbackUrl.trim()) {
+        setAddError("pleasePassCallback");
+        return;
+      }
+      try {
+        const resp = await fetch("/auth/code-relay", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ callbackUrl }),
+        });
+        const data = await resp.json();
+        if (resp.ok && data.success) {
+          setAddVisible(false);
+          setAddInfo("accountAdded");
+          await loadAccounts();
+        } else {
+          setAddError(data.error || "failedExchangeCode");
+        }
+      } catch (err) {
+        setAddError(
+          "networkError" + (err instanceof Error ? err.message : String(err))
+        );
+      }
+    },
+    [loadAccounts]
+  );
+  const deleteAccount = useCallback(
+    async (id: string) => {
+      try {
+        const resp = await fetch("/auth/accounts/" + encodeURIComponent(id), {
+          method: "DELETE",
+        });
+        if (!resp.ok) {
+          const data = await resp.json();
+          return data.error || "failedDeleteAccount";
+        }
+        await loadAccounts();
+        return null;
+      } catch (err) {
+        return "networkError" + (err instanceof Error ? err.message : "");
+      }
+    },
+    [loadAccounts]
+  );
+  return {
+    list,
+    loading,
+    addVisible,
+    addInfo,
+    addError,
+    startAdd,
+    submitRelay,
+    deleteAccount,
+  };
+}

web/src/hooks/use-status.ts ADDED Viewed

	@@ -0,0 +1,41 @@

+import { useState, useEffect, useCallback } from "preact/hooks";
+export function useStatus() {
+  const [baseUrl, setBaseUrl] = useState("Loading...");
+  const [apiKey, setApiKey] = useState("Loading...");
+  const [models, setModels] = useState<string[]>(["codex"]);
+  const [selectedModel, setSelectedModel] = useState("codex");
+  const loadModels = useCallback(async () => {
+    try {
+      const resp = await fetch("/v1/models");
+      const data = await resp.json();
+      const ids: string[] = data.data.map((m: { id: string }) => m.id);
+      if (ids.length > 0) {
+        setModels(ids);
+        const preferred = ids.find((n) => n.includes("5.3-codex"));
+        if (preferred) setSelectedModel(preferred);
+      }
+    } catch {
+      setModels(["codex"]);
+    }
+  }, []);
+  useEffect(() => {
+    async function loadStatus() {
+      try {
+        const resp = await fetch("/auth/status");
+        const data = await resp.json();
+        if (!data.authenticated) return;
+        setBaseUrl(`${window.location.origin}/v1`);
+        setApiKey(data.proxy_api_key || "any-string");
+        await loadModels();
+      } catch (err) {
+        console.error("Status load error:", err);
+      }
+    }
+    loadStatus();
+  }, [loadModels]);
+  return { baseUrl, apiKey, models, selectedModel, setSelectedModel };
+}

web/src/i18n/context.tsx ADDED Viewed

	@@ -0,0 +1,53 @@

+import { createContext } from "preact";
+import { useContext, useState, useCallback } from "preact/hooks";
+import { translations, type LangCode, type TranslationKey } from "./translations";
+import type { ComponentChildren } from "preact";
+interface I18nContextValue {
+  lang: LangCode;
+  toggleLang: () => void;
+  t: (key: TranslationKey) => string;
+}
+const I18nContext = createContext<I18nContextValue>(null!);
+function getInitialLang(): LangCode {
+  try {
+    const saved = localStorage.getItem("codex-proxy-lang");
+    if (saved === "en" || saved === "zh") return saved;
+  } catch {}
+  return navigator.language.startsWith("zh") ? "zh" : "en";
+}
+export function I18nProvider({ children }: { children: ComponentChildren }) {
+  const [lang, setLang] = useState<LangCode>(getInitialLang);
+  const toggleLang = useCallback(() => {
+    setLang((prev) => {
+      const next = prev === "en" ? "zh" : "en";
+      localStorage.setItem("codex-proxy-lang", next);
+      return next;
+    });
+  }, []);
+  const t = useCallback(
+    (key: TranslationKey): string => {
+      return translations[lang][key] ?? translations.en[key] ?? key;
+    },
+    [lang]
+  );
+  return (
+    <I18nContext.Provider value={{ lang, toggleLang, t }}>
+      {children}
+    </I18nContext.Provider>
+  );
+}
+export function useT() {
+  return useContext(I18nContext).t;
+}
+export function useI18n() {
+  return useContext(I18nContext);
+}

web/src/i18n/translations.ts ADDED Viewed

	@@ -0,0 +1,114 @@

+export const translations = {
+  en: {
+    serverOnline: "Server Online",
+    addAccount: "Add Account",
+    toggleTheme: "Toggle theme",
+    connectedAccounts: "Connected Accounts",
+    connectedAccountsDesc:
+      "Manage your AI model proxy services and usage limits.",
+    loadingAccounts: "Loading accounts...",
+    noAccounts: 'No accounts connected. Click "Add Account" to get started.',
+    deleteAccount: "Delete account",
+    removeConfirm: "Remove this account?",
+    accountAdded: "Account added successfully!",
+    active: "Active",
+    expired: "Expired",
+    rateLimited: "Rate Limited",
+    refreshing: "Refreshing",
+    disabled: "Disabled",
+    freeTier: "Free Tier",
+    totalRequests: "Total Requests",
+    tokensUsed: "Tokens Used",
+    rateLimit: "Rate Limit",
+    limitReached: "Limit Reached",
+    used: "Used",
+    ok: "OK",
+    resetsAt: "Resets at",
+    apiConfig: "API Configuration",
+    baseProxyUrl: "Base Proxy URL",
+    defaultModel: "Default Model",
+    yourApiKey: "Your API Key",
+    apiKeyHint:
+      "Use this key to authenticate requests to the proxy. Do not share it.",
+    copyUrl: "Copy URL",
+    copyApiKey: "Copy API Key",
+    integrationExamples: "Integration Examples",
+    copy: "Copy",
+    addStep1:
+      'Complete the login in the popup window (if blocked, right-click "Add Account" and open the link in a new tab).',
+    addStep2:
+      'After login, the browser will redirect to a <code class="text-xs bg-slate-100 dark:bg-bg-dark px-1.5 py-0.5 rounded">localhost:1455/auth/callback?...</code> page (it may show "unable to connect" — that\'s normal).',
+    addStep3:
+      'Copy the <strong class="text-slate-700 dark:text-text-main">full URL</strong> from the address bar and paste it below.',
+    pasteCallback: "Paste callback URL here",
+    submit: "Submit",
+    submitting: "Submitting...",
+    pleasePassCallback: "Please paste the callback URL",
+    failedStartLogin: "Failed to start login",
+    failedExchangeCode: "Failed to exchange code",
+    failedDeleteAccount: "Failed to delete account.",
+    networkError: "Network error: ",
+    copied: "Copied!",
+    copyFailed: "Failed",
+    footer: "\u00a9 2025 Codex Proxy. All rights reserved.",
+  },
+  zh: {
+    serverOnline: "\u670d\u52a1\u8fd0\u884c\u4e2d",
+    addAccount: "\u6dfb\u52a0\u8d26\u6237",
+    toggleTheme: "\u5207\u6362\u4e3b\u9898",
+    connectedAccounts: "\u5df2\u8fde\u63a5\u8d26\u6237",
+    connectedAccountsDesc:
+      "\u7ba1\u7406\u4f60\u7684 AI \u6a21\u578b\u4ee3\u7406\u670d\u52a1\u548c\u7528\u91cf\u9650\u5236\u3002",
+    loadingAccounts: "\u6b63\u5728\u52a0\u8f7d\u8d26\u6237...",
+    noAccounts:
+      "\u6682\u65e0\u5df2\u8fde\u63a5\u7684\u8d26\u6237\u3002\u70b9\u51fb\u300c\u6dfb\u52a0\u8d26\u6237\u300d\u5f00\u59cb\u4f7f\u7528\u3002",
+    deleteAccount: "\u5220\u9664\u8d26\u6237",
+    removeConfirm:
+      "\u786e\u5b9a\u8981\u79fb\u9664\u6b64\u8d26\u6237\u5417\uff1f",
+    accountAdded: "\u8d26\u6237\u6dfb\u52a0\u6210\u529f\uff01",
+    active: "\u6d3b\u8dc3",
+    expired: "\u5df2\u8fc7\u671f",
+    rateLimited: "\u5df2\u9650\u901f",
+    refreshing: "\u5237\u65b0\u4e2d",
+    disabled: "\u5df2\u7981\u7528",
+    freeTier: "\u514d\u8d39\u7248",
+    totalRequests: "\u603b\u8bf7\u6c42\u6570",
+    tokensUsed: "Token \u7528\u91cf",
+    rateLimit: "\u901f\u7387\u9650\u5236",
+    limitReached: "\u5df2\u8fbe\u4e0a\u9650",
+    used: "\u5df2\u4f7f\u7528",
+    ok: "\u6b63\u5e38",
+    resetsAt: "\u91cd\u7f6e\u65f6\u95f4",
+    apiConfig: "API \u914d\u7f6e",
+    baseProxyUrl: "\u4ee3\u7406 URL",
+    defaultModel: "\u9ed8\u8ba4\u6a21\u578b",
+    yourApiKey: "API \u5bc6\u94a5",
+    apiKeyHint:
+      "\u4f7f\u7528\u6b64\u5bc6\u94a5\u5411\u4ee3\u7406\u53d1\u9001\u8ba4\u8bc1\u8bf7\u6c42\uff0c\u8bf7\u52ff\u6cc4\u9732\u3002",
+    copyUrl: "\u590d\u5236 URL",
+    copyApiKey: "\u590d\u5236 API \u5bc6\u94a5",
+    integrationExamples: "\u96c6\u6210\u793a\u4f8b",
+    copy: "\u590d\u5236",
+    addStep1:
+      "\u5728\u5f39\u51fa\u7684\u7a97\u53e3\u4e2d\u5b8c\u6210\u767b\u5f55\uff08\u5982\u5f39\u7a97\u88ab\u62e6\u622a\uff0c\u53f3\u952e\u300c\u6dfb\u52a0\u8d26\u6237\u300d\u6309\u94ae\u5728\u65b0\u6807\u7b7e\u9875\u6253\u5f00\u94fe\u63a5\uff09\u3002",
+    addStep2:
+      '\u767b\u5f55\u6210\u529f\u540e\uff0c\u6d4f\u89c8\u5668\u4f1a\u8df3\u8f6c\u5230 <code class="text-xs bg-slate-100 dark:bg-bg-dark px-1.5 py-0.5 rounded">localhost:1455/auth/callback?...</code> \u9875\u9762\uff08\u53ef\u80fd\u663e\u793a\u201c\u65e0\u6cd5\u8bbf\u95ee\u201d\u2014\u2014\u8fd9\u662f\u6b63\u5e38\u7684\uff09\u3002',
+    addStep3:
+      '\u590d\u5236\u5730\u5740\u680f\u4e2d\u7684<strong class="text-slate-700 dark:text-text-main">\u5b8c\u6574 URL</strong>\uff0c\u7c98\u8d34\u5230\u4e0b\u65b9\u8f93\u5165\u6846\u3002',
+    pasteCallback: "\u7c98\u8d34\u56de\u8c03 URL",
+    submit: "\u63d0\u4ea4",
+    submitting: "\u63d0\u4ea4\u4e2d...",
+    pleasePassCallback: "\u8bf7\u7c98\u8d34\u56de\u8c03 URL",
+    failedStartLogin: "\u767b\u5f55\u542f\u52a8\u5931\u8d25",
+    failedExchangeCode: "\u6388\u6743\u7801\u4ea4\u6362\u5931\u8d25",
+    failedDeleteAccount: "\u5220\u9664\u8d26\u6237\u5931\u8d25\u3002",
+    networkError: "\u7f51\u7edc\u9519\u8bef\uff1a",
+    copied: "\u5df2\u590d\u5236\uff01",
+    copyFailed: "\u5931\u8d25",
+    footer:
+      "\u00a9 2025 Codex Proxy\u3002\u4fdd\u7559\u6240\u6709\u6743\u5229\u3002",
+  },
+} as const;
+export type LangCode = keyof typeof translations;
+export type TranslationKey = keyof (typeof translations)["en"];

web/src/index.css ADDED Viewed

	@@ -0,0 +1,19 @@

+@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;
+}
+/* Dark scrollbar for code blocks */
+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; }

web/src/main.tsx ADDED Viewed

	@@ -0,0 +1,5 @@

+import { render } from "preact";
+import { App } from "./App";
+import "./index.css";
+render(<App />, document.getElementById("app")!);

web/src/theme/context.tsx ADDED Viewed

	@@ -0,0 +1,46 @@

+import { createContext } from "preact";
+import { useContext, useState, useCallback } from "preact/hooks";
+import type { ComponentChildren } from "preact";
+interface ThemeContextValue {
+  isDark: boolean;
+  toggle: () => void;
+}
+const ThemeContext = createContext<ThemeContextValue>(null!);
+function getInitialDark(): boolean {
+  try {
+    const saved = localStorage.getItem("codex-proxy-theme");
+    if (saved === "dark") return true;
+    if (saved === "light") return false;
+  } catch {}
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+export function ThemeProvider({ children }: { children: ComponentChildren }) {
+  const [isDark, setIsDark] = useState(getInitialDark);
+  const toggle = useCallback(() => {
+    setIsDark((prev) => {
+      const next = !prev;
+      localStorage.setItem("codex-proxy-theme", next ? "dark" : "light");
+      if (next) {
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
+      return next;
+    });
+  }, []);
+  return (
+    <ThemeContext.Provider value={{ isDark, toggle }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+export function useTheme() {
+  return useContext(ThemeContext);
+}

web/src/utils/clipboard.ts ADDED Viewed

	@@ -0,0 +1,23 @@

+function fallbackCopy(text: string): boolean {
+  const ta = document.createElement("textarea");
+  ta.value = text;
+  ta.style.cssText = "position:fixed;left:-9999px;opacity:0";
+  document.body.appendChild(ta);
+  ta.select();
+  let ok = false;
+  try {
+    ok = document.execCommand("copy");
+  } catch {}
+  document.body.removeChild(ta);
+  return ok;
+}
+export async function clipboardCopy(text: string): Promise<boolean> {
+  if (navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch {}
+  }
+  return fallbackCopy(text);
+}

web/src/utils/format.ts ADDED Viewed

	@@ -0,0 +1,39 @@

+export function formatNumber(n: number): string {
+  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + "M";
+  if (n >= 1_000) return (n / 1_000).toFixed(1) + "k";
+  return String(n);
+}
+export function formatResetTime(unixSec: number, isZh: boolean): string {
+  const d = new Date(unixSec * 1000);
+  const now = new Date();
+  const time = d.toLocaleTimeString(undefined, {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+  if (
+    d.getFullYear() === now.getFullYear() &&
+    d.getMonth() === now.getMonth() &&
+    d.getDate() === now.getDate()
+  ) {
+    return time;
+  }
+  const tomorrow = new Date(now);
+  tomorrow.setDate(tomorrow.getDate() + 1);
+  if (
+    d.getFullYear() === tomorrow.getFullYear() &&
+    d.getMonth() === tomorrow.getMonth() &&
+    d.getDate() === tomorrow.getDate()
+  ) {
+    return (isZh ? "\u660e\u5929 " : "Tomorrow ") + time;
+  }
+  const date = d.toLocaleDateString(undefined, {
+    month: "short",
+    day: "numeric",
+  });
+  return date + " " + time;
+}

web/tailwind.config.ts ADDED Viewed

	@@ -0,0 +1,46 @@

+import type { Config } from "tailwindcss";
+export default {
+  content: ["./index.html", "./src/**/*.{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": "#0d1117",
+        "card-dark": "#161b22",
+        "border-dark": "#30363d",
+        "text-main": "#e6edf3",
+        "text-dim": "#8b949e",
+      },
+      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;

web/tsconfig.json ADDED Viewed

	@@ -0,0 +1,17 @@

+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "esModuleInterop": true,
+    "strict": true,
+    "noImplicitAny": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}

web/vite.config.ts ADDED Viewed

	@@ -0,0 +1,19 @@

+import { defineConfig } from "vite";
+import preact from "@preact/preset-vite";
+export default defineConfig({
+  plugins: [preact()],
+  build: {
+    outDir: "../public",
+    emptyOutDir: false,
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      "/v1": "http://localhost:8080",
+      "/auth": "http://localhost:8080",
+      "/health": "http://localhost:8080",
+      "/debug": "http://localhost:8080",
+    },
+  },
+});