feat: model list auto-sync + theme contrast fix

- Backend: auto-write merged catalog back to models.yaml after dynamic fetch
- Frontend: poll /v1/models/catalog every 60s to pick up new models
- Theme: light mode bg #f6f8f6 → #ffffff for clearer dark/light contrast
- Remove unused legacy web/src/hooks/use-status.ts

CHANGELOG.md

@@ -14,8 +14,11 @@
 - Model-aware 多计划账号路由：不同 plan（free/plus/business）的账号自动路由到各自支持的模型，business 账号可继续使用 gpt-5.4 等高端模型 (#57)
 - Structured Outputs 支持：`/v1/chat/completions` 支持 `response_format`（`json_object` / `json_schema`），Gemini 端点支持 `responseMimeType` + `responseSchema`，自动翻译为 Codex Responses API 的 `text.format`；`/v1/responses` 直通 `text` 字段
 
+- 模型列表自动同步：后端动态 fetch 成功后自动回写 `config/models.yaml`，静态配置不再滞后；前端每 60s 轮询模型列表，新模型无需刷新页面即可选择
+
 ### Changed
 
+- Light mode 背景色从 `#f6f8f6` 改为纯白 `#ffffff`，增大亮/暗主题视觉差异
 - 提取管道强化：`extract-fingerprint.ts` 新增 fallback 扫描（`.vite/build/*.js` 全文件回退）和 webview 模型发现（`webview/assets/*.js`），pattern 失败不再中断整个流程
 - 模型/别名自动添加降级为 semi-auto：后端已通过 `isCodexCompatibleId()` 自动合并新模型，`apply-update.ts` 不再自动写入 `models.yaml`（避免 `mutateYaml` 破坏 YAML 格式）
 - Codex Desktop 版本更新至 v26.309.31024 (build 962)

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "codex-proxy",
-  "version": "1.0.39",
+  "version": "1.0.45",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "codex-proxy",
-      "version": "1.0.39",
+      "version": "1.0.45",
       "hasInstallScript": true,
       "dependencies": {
         "@hono/node-server": "^1.0.0",

shared/hooks/use-status.ts

@@ -51,7 +51,7 @@ export function useStatus(accountCount: number) {
   const [selectedEffort, setSelectedEffort] = useState("medium");
   const [selectedSpeed, setSelectedSpeed] = useState<string | null>(null);
 
-  const loadModels = useCallback(async () => {
+  const fetchModels = useCallback(async (isInitial: boolean) => {
     try {
       // Fetch full catalog for effort info
       const catalogResp = await fetch("/v1/models/catalog");
@@ -64,15 +64,25 @@ export function useStatus(accountCount: number) {
       const ids: string[] = data.data.map((m: { id: string }) => m.id);
       if (ids.length > 0) {
         setModels(ids);
-        const defaultModel = catalogData.find((m) => m.isDefault)?.id ?? ids[0] ?? "";
-        setSelectedModel(defaultModel);
+        if (isInitial) {
+          const defaultModel = catalogData.find((m) => m.isDefault)?.id ?? ids[0] ?? "";
+          setSelectedModel(defaultModel);
+        } else {
+          // On refresh: only reset if current selection is no longer available
+          setSelectedModel((prev) => {
+            if (ids.includes(prev)) return prev;
+            return catalogData.find((m) => m.isDefault)?.id ?? ids[0] ?? prev;
+          });
+        }
       }
     } catch {
-      setModels([]);
+      if (isInitial) setModels([]);
     }
   }, []);
 
   useEffect(() => {
+    let intervalId: ReturnType<typeof setInterval> | null = null;
+
     async function loadStatus() {
       try {
         const resp = await fetch("/auth/status");
@@ -80,13 +90,18 @@ export function useStatus(accountCount: number) {
         if (!data.authenticated) return;
         setBaseUrl(`${window.location.origin}/v1`);
         setApiKey(data.proxy_api_key || "any-string");
-        await loadModels();
+        await fetchModels(true);
+
+        // Refresh model list every 60s to pick up dynamic backend changes
+        intervalId = setInterval(() => { fetchModels(false); }, 60_000);
       } catch (err) {
         console.error("Status load error:", err);
       }
     }
     loadStatus();
-  }, [loadModels, accountCount]);
+
+    return () => { if (intervalId) clearInterval(intervalId); };
+  }, [fetchModels, accountCount]);
 
   // Build model families — group catalog by family, excluding tier variants
   const modelFamilies = useMemo((): ModelFamily[] => {

src/models/model-store.ts

@@ -9,7 +9,7 @@
  * Aliases always come from YAML (user-customizable), never from backend.
  */
 
-import { readFileSync } from "fs";
+import { readFileSync, writeFile } from "fs";
 import { resolve } from "path";
 import yaml from "js-yaml";
 import { getConfig } from "../config.js";
@@ -210,6 +210,45 @@ export function applyBackendModels(backendModels: BackendModelEntry[]): void {
   console.log(
     `[ModelStore] Merged ${filtered.length} backend (${skipped} non-codex skipped) + ${merged.length - filtered.length} static-only = ${merged.length} total models`,
   );
+
+  // Auto-sync merged catalog back to models.yaml
+  syncStaticModels();
+}
+
+/**
+ * Write the current merged catalog back to config/models.yaml so it stays
+ * up-to-date as a fallback for future cold starts.  Fire-and-forget.
+ */
+function syncStaticModels(): void {
+  const configPath = resolve(getConfigDir(), "models.yaml");
+  const today = new Date().toISOString().slice(0, 10);
+
+  // Strip internal `source` field before serializing
+  const models = _catalog.map(({ source: _s, ...rest }) => rest);
+
+  const header = [
+    "# Codex model catalog",
+    "#",
+    "# Sources:",
+    "#   1. Static (below) — baseline for cold starts",
+    "#   2. Dynamic          — fetched from /backend-api/codex/models, auto-synced here",
+    "#",
+    `# Last updated: ${today} (auto-synced by model-store)`,
+    "",
+  ].join("\n");
+
+  const body = yaml.dump(
+    { models, aliases: _aliases },
+    { lineWidth: 120, noRefs: true, sortKeys: false },
+  );
+
+  writeFile(configPath, header + body, "utf-8", (err) => {
+    if (err) {
+      console.warn(`[ModelStore] Failed to sync models.yaml: ${err.message}`);
+    } else {
+      console.log(`[ModelStore] Synced ${models.length} models to models.yaml`);
+    }
+  });
 }
 
 /**

web/src/hooks/use-status.ts

@@ -1,41 +0,0 @@
-import { useState, useEffect, useCallback } from "preact/hooks";
-
-export function useStatus(accountCount: number) {
-  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 === "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, accountCount]);
-
-  return { baseUrl, apiKey, models, selectedModel, setSelectedModel };
-}

web/tailwind.config.ts

@@ -8,7 +8,7 @@ export default {
       colors: {
         primary: "rgb(var(--primary) / <alpha-value>)",
         "primary-hover": "rgb(var(--primary-hover) / <alpha-value>)",
-        "bg-light": "#f6f8f6",
+        "bg-light": "#ffffff",
         "bg-dark": "var(--bg-dark, #0d1117)",
         "card-dark": "var(--card-dark, #161b22)",
         "border-dark": "var(--border-dark, #30363d)",