feat: editable proxy_api_key from Dashboard settings panel

Add GET/POST /admin/settings endpoints to read/write proxy_api_key
in config/default.yaml with hot-reload. Dashboard gets a collapsible
Settings panel with masked input, save, and clear key functionality.

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

shared/hooks/use-settings.ts

@@ -0,0 +1,57 @@
+import { useState, useEffect, useCallback } from "preact/hooks";
+
+export function useSettings() {
+  const [apiKey, setApiKey] = useState<string | null>(null);
+  const [loaded, setLoaded] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [saved, setSaved] = useState(false);
+
+  const load = useCallback(async () => {
+    try {
+      const resp = await fetch("/admin/settings");
+      if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+      const data: { proxy_api_key: string | null } = await resp.json();
+      setApiKey(data.proxy_api_key);
+      setLoaded(true);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  }, []);
+
+  const save = useCallback(async (newKey: string | null) => {
+    setSaving(true);
+    setSaved(false);
+    setError(null);
+    try {
+      const headers: Record<string, string> = { "Content-Type": "application/json" };
+      // Send current key for auth if one exists
+      if (apiKey) {
+        headers["Authorization"] = `Bearer ${apiKey}`;
+      }
+      const resp = await fetch("/admin/settings", {
+        method: "POST",
+        headers,
+        body: JSON.stringify({ proxy_api_key: newKey }),
+      });
+      if (!resp.ok) {
+        const data = await resp.json().catch(() => ({ error: `HTTP ${resp.status}` }));
+        throw new Error((data as { error?: string }).error ?? `HTTP ${resp.status}`);
+      }
+      const result: { proxy_api_key: string | null } = await resp.json();
+      setApiKey(result.proxy_api_key);
+      setSaved(true);
+      // Auto-clear saved indicator after 3s
+      setTimeout(() => setSaved(false), 3000);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setSaving(false);
+    }
+  }, [apiKey]);
+
+  useEffect(() => { load(); }, [load]);
+
+  return { apiKey, loaded, saving, saved, error, save, load };
+}

shared/i18n/translations.ts

@@ -153,6 +153,10 @@ export const translations = {
     updateRestarting: "Restarting server...",
     restartFailed: "Server not responding. Please restart manually.",
     close: "Close",
+    settings: "Settings",
+    apiKeyLabel: "API Key",
+    apiKeySaved: "Saved",
+    apiKeyClear: "Clear key (disable auth)",
   },
   zh: {
     serverOnline: "\u670d\u52a1\u8fd0\u884c\u4e2d",
@@ -311,6 +315,10 @@ export const translations = {
     updateRestarting: "\u6b63\u5728\u91cd\u542f\u670d\u52a1...",
     restartFailed: "\u670d\u52a1\u5668\u672a\u54cd\u5e94\uff0c\u8bf7\u624b\u52a8\u91cd\u542f\u3002",
     close: "\u5173\u95ed",
+    settings: "\u8bbe\u7f6e",
+    apiKeyLabel: "API \u5bc6\u94a5",
+    apiKeySaved: "\u5df2\u4fdd\u5b58",
+    apiKeyClear: "\u6e05\u9664\u5bc6\u94a5\uff08\u5173\u95ed\u9274\u6743\uff09",
   },
 } as const;
 

src/routes/web.ts

@@ -3,10 +3,11 @@ 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";
-import { getConfig, getFingerprint } from "../config.js";
+import { getConfig, getFingerprint, reloadAllConfigs } from "../config.js";
 import { getPublicDir, getDesktopPublicDir, getConfigDir, getDataDir, isEmbedded } from "../paths.js";
 import { getUpdateState, checkForUpdate, isUpdateInProgress } from "../update-checker.js";
 import { getProxyInfo, canSelfUpdate, checkProxySelfUpdate, applyProxySelfUpdate, isProxyUpdateInProgress, getCachedProxyUpdateResult, getDeployMode } from "../self-update.js";
+import { mutateYaml } from "../utils/yaml-mutate.js";
 
 export function createWebRoutes(accountPool: AccountPool): Hono {
   const app = new Hono();
@@ -230,5 +231,39 @@ export function createWebRoutes(accountPool: AccountPool): Hono {
     return c.json(result);
   });
 
+  // --- Settings endpoints ---
+
+  app.get("/admin/settings", (c) => {
+    const config = getConfig();
+    return c.json({ proxy_api_key: config.server.proxy_api_key });
+  });
+
+  app.post("/admin/settings", async (c) => {
+    const config = getConfig();
+    const currentKey = config.server.proxy_api_key;
+
+    // Auth: if a key is currently set, require Bearer token matching it
+    if (currentKey) {
+      const authHeader = c.req.header("Authorization") ?? "";
+      const token = authHeader.startsWith("Bearer ") ? authHeader.slice(7) : "";
+      if (token !== currentKey) {
+        c.status(401);
+        return c.json({ error: "Invalid current API key" });
+      }
+    }
+
+    const body = await c.req.json() as { proxy_api_key?: string | null };
+    const newKey = body.proxy_api_key === undefined ? currentKey : (body.proxy_api_key || null);
+
+    const configPath = resolve(getConfigDir(), "default.yaml");
+    mutateYaml(configPath, (data) => {
+      const server = data.server as Record<string, unknown>;
+      server.proxy_api_key = newKey;
+    });
+    reloadAllConfigs();
+
+    return c.json({ success: true, proxy_api_key: newKey });
+  });
+
   return app;
 }

web/src/App.tsx

@@ -9,6 +9,7 @@ import { ProxyPool } from "./components/ProxyPool";
 import { ApiConfig } from "./components/ApiConfig";
 import { AnthropicSetup } from "./components/AnthropicSetup";
 import { CodeExamples } from "./components/CodeExamples";
+import { SettingsPanel } from "./components/SettingsPanel";
 import { Footer } from "./components/Footer";
 import { ProxySettings } from "./pages/ProxySettings";
 import { useAccounts } from "../../shared/hooks/use-accounts";
@@ -142,6 +143,7 @@ function Dashboard() {
             reasoningEffort={status.selectedEffort}
             serviceTier={status.selectedSpeed}
           />
+          <SettingsPanel />
         </div>
       </main>
       <Footer updateStatus={update.status} />

web/src/components/SettingsPanel.tsx

@@ -0,0 +1,124 @@
+import { useState, useCallback } from "preact/hooks";
+import { useT } from "../../../shared/i18n/context";
+import { useSettings } from "../../../shared/hooks/use-settings";
+
+export function SettingsPanel() {
+  const t = useT();
+  const settings = useSettings();
+  const [draft, setDraft] = useState<string | null>(null);
+  const [revealed, setRevealed] = useState(false);
+  const [collapsed, setCollapsed] = useState(true);
+
+  // Sync draft when settings load
+  const displayValue = draft ?? settings.apiKey ?? "";
+
+  const handleSave = useCallback(async () => {
+    const newKey = (draft ?? settings.apiKey ?? "").trim() || null;
+    await settings.save(newKey);
+    setDraft(null);
+  }, [draft, settings]);
+
+  const handleClear = useCallback(async () => {
+    await settings.save(null);
+    setDraft(null);
+    setRevealed(false);
+  }, [settings]);
+
+  const isDirty = draft !== null && draft !== (settings.apiKey ?? "");
+
+  return (
+    <section class="bg-white dark:bg-card-dark border border-gray-200 dark:border-border-dark rounded-xl shadow-sm transition-colors">
+      {/* Header — clickable to toggle */}
+      <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.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("settings")}</h2>
+        </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>
+
+      {/* Collapsible content */}
+      {!collapsed && (
+        <div class="px-5 pb-5 border-t border-slate-100 dark:border-border-dark pt-4">
+          <div class="space-y-1.5">
+            <label class="text-xs font-semibold text-slate-700 dark:text-text-main">{t("apiKeyLabel")}</label>
+            <div class="flex items-center gap-2">
+              <div class="relative flex-1">
+                <div class="absolute left-3 top-1/2 -translate-y-1/2 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
+                  type={revealed ? "text" : "password"}
+                  class="w-full pl-10 pr-10 py-2.5 bg-white dark:bg-bg-dark border border-gray-200 dark:border-border-dark rounded-lg text-[0.78rem] font-mono text-slate-700 dark:text-text-main outline-none focus:ring-1 focus:ring-primary tracking-wider"
+                  value={displayValue}
+                  onInput={(e) => setDraft((e.target as HTMLInputElement).value)}
+                  onFocus={() => setRevealed(true)}
+                  placeholder={t("apiKeyLabel")}
+                />
+                {/* Toggle visibility */}
+                <button
+                  onClick={() => setRevealed(!revealed)}
+                  class="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-slate-400 dark:text-text-dim hover:text-slate-600 dark:hover:text-text-main"
+                  title={revealed ? "Hide" : "Show"}
+                >
+                  {revealed ? (
+                    <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="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
+                    </svg>
+                  ) : (
+                    <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="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                    </svg>
+                  )}
+                </button>
+              </div>
+              {/* Save button */}
+              <button
+                onClick={handleSave}
+                disabled={settings.saving || !isDirty}
+                class={`px-4 py-2.5 text-sm font-medium rounded-lg transition-colors whitespace-nowrap ${
+                  isDirty && !settings.saving
+                    ? "bg-primary text-white hover:bg-primary/90 cursor-pointer"
+                    : "bg-slate-100 dark:bg-[#21262d] text-slate-400 dark:text-text-dim cursor-not-allowed"
+                }`}
+              >
+                {settings.saving ? "..." : t("submit")}
+              </button>
+            </div>
+
+            {/* Status messages */}
+            <div class="flex items-center gap-3 mt-2 min-h-[1.5rem]">
+              {settings.saved && (
+                <span class="text-xs font-medium text-green-600 dark:text-green-400">{t("apiKeySaved")}</span>
+              )}
+              {settings.error && (
+                <span class="text-xs font-medium text-red-500">{settings.error}</span>
+              )}
+              {/* Clear key button */}
+              {settings.apiKey && (
+                <button
+                  onClick={handleClear}
+                  disabled={settings.saving}
+                  class="text-xs text-slate-400 dark:text-text-dim hover:text-red-500 dark:hover:text-red-400 transition-colors ml-auto"
+                >
+                  {t("apiKeyClear")}
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </section>
+  );
+}