@jiangxiaosheng/digital-agent-platform 1.0.0

package/src/app/[locale]/settings/page.tsx

@@ -0,0 +1,1204 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { useTranslations } from "next-intl";
+import { useTheme } from "next-themes";
+import { useLocale } from "next-intl";
+import { useRouter, usePathname } from "next/navigation";
+import {
+  Plus, Trash2, ChevronDown, ChevronRight,
+  XCircle, Loader2, RefreshCw, Save, Eye, EyeOff,
+  Check, Terminal,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import type { ModelsConfig, ProviderEntry, ModelEntry } from "@/lib/models-config";
+import type { VoiceProviderConfig } from "@/lib/voice-providers-config";
+import { SkillsManager } from "@/components/agents/skills-manager";
+
+// ─── Built-in provider definitions ────────────────────────────────────────
+const BUILTIN_PROVIDERS = [
+  { id: "anthropic",  name: "Anthropic",     placeholder: "sk-ant-api03-..." },
+  { id: "openai",     name: "OpenAI",        placeholder: "sk-proj-..." },
+  { id: "google",     name: "Google AI",     placeholder: "AIzaSy..." },
+  { id: "groq",       name: "Groq",          placeholder: "gsk_..." },
+  { id: "deepseek",   name: "DeepSeek",      placeholder: "sk-..." },
+  { id: "xai",        name: "xAI (Grok)",    placeholder: "xai-..." },
+  { id: "mistral",    name: "Mistral",       placeholder: "..." },
+];
+
+const API_TYPE_OPTIONS = [
+  { value: "anthropic-messages",     label: "Anthropic Messages" },
+  { value: "openai-responses",       label: "OpenAI Responses" },
+  { value: "openai-completions",     label: "OpenAI Completions (Legacy)" },
+  { value: "google-generative-ai",   label: "Google Generative AI" },
+  { value: "bedrock-converse-stream",label: "AWS Bedrock Converse" },
+];
+
+// ─── Types ─────────────────────────────────────────────────────────────────
+type TestState =
+  | { phase: "idle" }
+  | { phase: "testing" }
+  | { phase: "success"; latencyMs: number; responseText?: string }
+  | { phase: "error"; message: string; latencyMs?: number };
+
+// ─── Main Settings Page ────────────────────────────────────────────────────
+export default function SettingsPage() {
+  const t = useTranslations("settings");
+  const tc = useTranslations("common");
+  const { theme, setTheme } = useTheme();
+  const locale = useLocale();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  // API keys (built-in providers)
+  const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
+  // Custom providers config
+  const [modelsConfig, setModelsConfig] = useState<ModelsConfig>({ providers: {} });
+  // Voice provider config
+  const [voiceConfig, setVoiceConfig] = useState<VoiceProviderConfig>({
+    currentProvider: "openai",
+    providers: {},
+  });
+  const [saveStatus, setSaveStatus] = useState<"idle" | "saving" | "saved">("idle");
+
+  // Load on mount
+  useEffect(() => {
+    fetch("/api/models-config")
+      .then((r) => r.json())
+      .then((d: { auth: Record<string, string>; modelsConfig: ModelsConfig }) => {
+        setApiKeys(d.auth ?? {});
+        setModelsConfig(d.modelsConfig ?? { providers: {} });
+      });
+
+    fetch("/api/voice-provider")
+      .then((r) => r.json())
+      .then((d: VoiceProviderConfig) => {
+        setVoiceConfig(d);
+      });
+  }, []);
+
+  const save = useCallback(async () => {
+    setSaveStatus("saving");
+    await fetch("/api/models-config", {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ auth: apiKeys, modelsConfig }),
+    });
+    await fetch("/api/voice-provider", {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(voiceConfig),
+    });
+    setSaveStatus("saved");
+    setTimeout(() => setSaveStatus("idle"), 2500);
+    // Bust model cache so ModelSelector picks up changes
+    await fetch("/api/models");
+  }, [apiKeys, modelsConfig, voiceConfig]);
+
+  const switchLocale = (newLocale: string) => {
+    router.push(pathname.replace(/^\/(zh|en)/, `/${newLocale}`));
+  };
+
+  return (
+    <div className="p-6 max-w-3xl mx-auto">
+      <div className="mb-6 flex items-center justify-between p-4 rounded-xl bg-white dark:bg-slate-800/50 backdrop-blur-sm border border-gray-200 dark:border-slate-700/50 neo-card">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900 dark:bg-gradient-to-r dark:from-cyan-400 dark:to-blue-400 dark:bg-clip-text dark:text-transparent">{t("title")}</h1>
+          <p className="text-sm text-gray-700 dark:text-gray-400 mt-1">{t("subtitle")}</p>
+        </div>
+        <Button onClick={save} disabled={saveStatus === "saving"} className="neo-button gap-2 bg-gradient-to-r from-blue-500 to-indigo-500 dark:from-cyan-600 dark:to-blue-600 hover:from-blue-600 hover:to-indigo-600 dark:hover:from-cyan-500 dark:hover:to-blue-500 text-white border-0 shadow-lg hover:shadow-blue-500/30 dark:hover:shadow-cyan-500/50 transition-all duration-200 hover:scale-105">
+          {saveStatus === "saving" ? (
+            <Loader2 className="h-4 w-4 animate-spin" />
+          ) : saveStatus === "saved" ? (
+            <Check className="h-4 w-4" />
+          ) : (
+            <Save className="h-4 w-4" />
+          )}
+          {saveStatus === "saving" ? "保存中…" : saveStatus === "saved" ? "已保存" : tc("save")}
+        </Button>
+      </div>
+
+      <Tabs defaultValue="providers">
+        <TabsList className="mb-6 neo-card bg-gray-50 dark:bg-slate-800/50 backdrop-blur-sm border border-gray-200 dark:border-slate-700/50 p-1">
+          <TabsTrigger value="providers" className="data-[state=active]:neo-card-inset data-[state=active]:bg-blue-100 data-[state=active]:text-blue-700 dark:data-[state=active]:bg-gradient-to-r dark:data-[state=active]:from-cyan-600 dark:data-[state=active]:to-blue-600 dark:data-[state=active]:text-white hover:bg-gray-100 dark:hover:bg-slate-700/50 transition-all duration-200">内置提供商</TabsTrigger>
+          <TabsTrigger value="custom" className="data-[state=active]:neo-card-inset data-[state=active]:bg-blue-100 data-[state=active]:text-blue-700 dark:data-[state=active]:bg-gradient-to-r dark:data-[state=active]:from-cyan-600 dark:data-[state=active]:to-blue-600 dark:data-[state=active]:text-white hover:bg-gray-100 dark:hover:bg-slate-700/50 transition-all duration-200">自定义提供商</TabsTrigger>
+          <TabsTrigger value="voice" className="data-[state=active]:neo-card-inset data-[state=active]:bg-blue-100 data-[state=active]:text-blue-700 dark:data-[state=active]:bg-gradient-to-r dark:data-[state=active]:from-cyan-600 dark:data-[state=active]:to-blue-600 dark:data-[state=active]:text-white hover:bg-gray-100 dark:hover:bg-slate-700/50 transition-all duration-200">语音供应商</TabsTrigger>
+          <TabsTrigger value="envvars" className="data-[state=active]:neo-card-inset data-[state=active]:bg-blue-100 data-[state=active]:text-blue-700 dark:data-[state=active]:bg-gradient-to-r dark:data-[state=active]:from-cyan-600 dark:data-[state=active]:to-blue-600 dark:data-[state=active]:text-white hover:bg-gray-100 dark:hover:bg-slate-700/50 transition-all duration-200">环境变量</TabsTrigger>
+          <TabsTrigger value="skills" className="data-[state=active]:neo-card-inset data-[state=active]:bg-blue-100 data-[state=active]:text-blue-700 dark:data-[state=active]:bg-gradient-to-r dark:data-[state=active]:from-cyan-600 dark:data-[state=active]:to-blue-600 dark:data-[state=active]:text-white hover:bg-gray-100 dark:hover:bg-slate-700/50 transition-all duration-200">Skills 管理</TabsTrigger>
+          <TabsTrigger value="appearance" className="data-[state=active]:neo-card-inset data-[state=active]:bg-blue-100 data-[state=active]:text-blue-700 dark:data-[state=active]:bg-gradient-to-r dark:data-[state=active]:from-cyan-600 dark:data-[state=active]:to-blue-600 dark:data-[state=active]:text-white hover:bg-gray-100 dark:hover:bg-slate-700/50 transition-all duration-200">外观 & 语言</TabsTrigger>
+        </TabsList>
+
+        {/* ── Built-in providers ─────────────────────── */}
+        <TabsContent value="providers" className="space-y-4">
+          <BuiltinProvidersPanel
+            apiKeys={apiKeys}
+            onKeysChange={setApiKeys}
+            onSave={save}
+          />
+        </TabsContent>
+
+        {/* ── Custom providers ───────────────────────── */}
+        <TabsContent value="custom" className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm text-muted-foreground">
+                添加兼容 OpenAI / Anthropic API 的自定义提供商。配置存储在{" "}
+                <code className="font-mono text-xs bg-secondary px-1 rounded">~/.pi/agent/models.json</code>。
+              </p>
+            </div>
+            <Button
+              variant="outline" size="sm"
+              className="neo-button hover:scale-105 transition-transform"
+              onClick={() => {
+                const name = `custom-provider-${Date.now()}`;
+                setModelsConfig((prev) => ({
+                  providers: {
+                    ...prev.providers,
+                    [name]: { baseUrl: "", api: "openai-completions", apiKey: "", models: [] },
+                  },
+                }));
+              }}
+            >
+              <Plus className="mr-2 h-4 w-4" />
+              添加提供商
+            </Button>
+          </div>
+
+          {Object.keys(modelsConfig.providers).length === 0 ? (
+            <div className="rounded-lg border border-dashed p-8 text-center text-muted-foreground text-sm">
+              暂无自定义提供商。点击「添加提供商」创建一个。
+            </div>
+          ) : (
+            <div className="space-y-4">
+              {Object.entries(modelsConfig.providers).map(([name, provider]) => (
+                <CustomProviderCard
+                  key={name}
+                  name={name}
+                  provider={provider}
+                  onChange={(updated) =>
+                    setModelsConfig((prev) => ({
+                      providers: { ...prev.providers, [name]: updated },
+                    }))
+                  }
+                  onRename={(newName) => {
+                    if (newName === name || !newName) return;
+                    setModelsConfig((prev) => {
+                      const { [name]: old, ...rest } = prev.providers;
+                      return { providers: { ...rest, [newName]: old } };
+                    });
+                  }}
+                  onDelete={() =>
+                    setModelsConfig((prev) => {
+                      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                      const { [name]: _, ...rest } = prev.providers;
+                      return { providers: rest };
+                    })
+                  }
+                />
+              ))}
+            </div>
+          )}
+        </TabsContent>
+
+        {/* ── 语音供应商 ────────────────────────────────── */}
+        <TabsContent value="voice" className="space-y-4">
+          <div className="mb-4">
+            <p className="text-sm text-muted-foreground">
+              选择一个语音供应商并配置API密钥，全局生效。配置存储在{" "}
+              <code className="font-mono text-xs bg-secondary px-1 rounded">~/.pi/agent/voice-provider.json</code>。
+            </p>
+          </div>
+
+          {/* 当前选择的供应商 */}
+          <div className="neo-card p-4 bg-white dark:bg-slate-800/50 rounded-xl">
+            <Label className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 block">当前语音供应商</Label>
+            <Select value={voiceConfig.currentProvider} onValueChange={(v: any) => setVoiceConfig(prev => ({ ...prev, currentProvider: v }))}>
+              <SelectTrigger className="neo-card-inset">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="openai">OpenAI TTS</SelectItem>
+                <SelectItem value="aliyun">阿里云语音合成</SelectItem>
+                <SelectItem value="tencent">腾讯云TTS</SelectItem>
+                <SelectItem value="baidu">百度语音合成</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* API密钥配置 */}
+          {voiceConfig.currentProvider === "openai" && (
+            <div className="neo-card p-4 bg-white dark:bg-slate-800/50 rounded-xl space-y-3">
+              <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">OpenAI TTS 配置</h3>
+              <div className="space-y-2">
+                <Label className="text-xs">API Key</Label>
+                <Input
+                  type="password"
+                  placeholder="sk-..."
+                  value={voiceConfig.providers.openai?.apiKey || ""}
+                  onChange={(e) => setVoiceConfig(prev => ({
+                    ...prev,
+                    providers: { ...prev.providers, openai: { ...prev.providers.openai, apiKey: e.target.value } }
+                  }))}
+                />
+              </div>
+            </div>
+          )}
+
+          {voiceConfig.currentProvider === "aliyun" && (
+            <div className="neo-card p-4 bg-white dark:bg-slate-800/50 rounded-xl space-y-3">
+              <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">阿里云配置</h3>
+              <div className="grid grid-cols-2 gap-3">
+                <div className="space-y-2">
+                  <Label className="text-xs">AppKey</Label>
+                  <Input placeholder="..." value={voiceConfig.providers.aliyun?.appKey || ""} onChange={(e) => setVoiceConfig(prev => ({ ...prev, providers: { ...prev.providers, aliyun: { ...prev.providers.aliyun!, appKey: e.target.value, accessKeyId: prev.providers.aliyun?.accessKeyId || "", accessKeySecret: prev.providers.aliyun?.accessKeySecret || "" } } }))} />
+                </div>
+                <div className="space-y-2">
+                  <Label className="text-xs">Access Key ID</Label>
+                  <Input type="password" placeholder="..." value={voiceConfig.providers.aliyun?.accessKeyId || ""} onChange={(e) => setVoiceConfig(prev => ({ ...prev, providers: { ...prev.providers, aliyun: { ...prev.providers.aliyun!, appKey: prev.providers.aliyun?.appKey || "", accessKeyId: e.target.value, accessKeySecret: prev.providers.aliyun?.accessKeySecret || "" } } }))} />
+                </div>
+                <div className="space-y-2 col-span-2">
+                  <Label className="text-xs">Access Key Secret</Label>
+                  <Input type="password" placeholder="..." value={voiceConfig.providers.aliyun?.accessKeySecret || ""} onChange={(e) => setVoiceConfig(prev => ({ ...prev, providers: { ...prev.providers, aliyun: { ...prev.providers.aliyun!, appKey: prev.providers.aliyun?.appKey || "", accessKeyId: prev.providers.aliyun?.accessKeyId || "", accessKeySecret: e.target.value } } }))} />
+                </div>
+              </div>
+            </div>
+          )}
+
+          {voiceConfig.currentProvider === "tencent" && (
+            <div className="neo-card p-4 bg-white dark:bg-slate-800/50 rounded-xl space-y-3">
+              <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">腾讯云配置</h3>
+              <div className="grid grid-cols-2 gap-3">
+                <div className="space-y-2">
+                  <Label className="text-xs">Secret ID</Label>
+                  <Input type="password" placeholder="AKID..." value={voiceConfig.providers.tencent?.secretId || ""} onChange={(e) => setVoiceConfig(prev => ({ ...prev, providers: { ...prev.providers, tencent: { ...prev.providers.tencent, secretId: e.target.value, secretKey: prev.providers.tencent?.secretKey || "" } } }))} />
+                </div>
+                <div className="space-y-2">
+                  <Label className="text-xs">Secret Key</Label>
+                  <Input type="password" placeholder="..." value={voiceConfig.providers.tencent?.secretKey || ""} onChange={(e) => setVoiceConfig(prev => ({ ...prev, providers: { ...prev.providers, tencent: { ...prev.providers.tencent, secretId: prev.providers.tencent?.secretId || "", secretKey: e.target.value } } }))} />
+                </div>
+              </div>
+            </div>
+          )}
+
+          {voiceConfig.currentProvider === "baidu" && (
+            <div className="neo-card p-4 bg-white dark:bg-slate-800/50 rounded-xl space-y-3">
+              <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">百度配置</h3>
+              <div className="grid grid-cols-2 gap-3">
+                <div className="space-y-2">
+                  <Label className="text-xs">API Key</Label>
+                  <Input type="password" placeholder="..." value={voiceConfig.providers.baidu?.apiKey || ""} onChange={(e) => setVoiceConfig(prev => ({ ...prev, providers: { ...prev.providers, baidu: { ...prev.providers.baidu, apiKey: e.target.value, secretKey: prev.providers.baidu?.secretKey || "" } } }))} />
+                </div>
+                <div className="space-y-2">
+                  <Label className="text-xs">Secret Key</Label>
+                  <Input type="password" placeholder="..." value={voiceConfig.providers.baidu?.secretKey || ""} onChange={(e) => setVoiceConfig(prev => ({ ...prev, providers: { ...prev.providers, baidu: { ...prev.providers.baidu, apiKey: prev.providers.baidu?.apiKey || "", secretKey: e.target.value } } }))} />
+                </div>
+              </div>
+            </div>
+          )}
+        </TabsContent>
+
+        {/* ── 环境变量 ────────────────────────────────── */}
+        <TabsContent value="envvars">
+          <EnvVarsPanel />
+        </TabsContent>
+
+        {/* ── Skills 管理 ─────────────────────────────── */}
+        <TabsContent value="skills" className="space-y-2">
+          <div className="mb-4">
+            <p className="text-sm text-muted-foreground">
+              安装、卸载 Skills。Skills 存储在{" "}
+              <code className="font-mono text-xs bg-secondary px-1 rounded">~/.pi/agent/skills/</code>，
+              对所有数字人共享。在数字人配置中可按需启用/禁用。
+            </p>
+          </div>
+          <SkillsManager />
+        </TabsContent>
+
+        {/* ── Appearance ─────────────────────────────── */}
+        <TabsContent value="appearance" className="space-y-6">
+          <div className="space-y-1.5">
+            <Label>{t("theme")}</Label>
+            <Select value={theme} onValueChange={setTheme}>
+              <SelectTrigger className="w-48"><SelectValue /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="light">{t("themeLight")}</SelectItem>
+                <SelectItem value="dark">{t("themeDark")}</SelectItem>
+                <SelectItem value="system">{t("themeSystem")}</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-1.5">
+            <Label>{t("language")}</Label>
+            <Select value={locale} onValueChange={switchLocale}>
+              <SelectTrigger className="w-48"><SelectValue /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="zh">中文</SelectItem>
+                <SelectItem value="en">English</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
+
+// ─── ApiKeyRow ─────────────────────────────────────────────────────────────
+function ApiKeyRow({
+  providerId, providerName, placeholder, value, onChange,
+}: { providerId: string; providerName: string; placeholder: string; value: string; onChange: (v: string) => void }) {
+  const [show, setShow] = useState(false);
+  const masked = value.startsWith("***");
+
+  return (
+    <div className="flex items-center gap-3">
+      <div className="w-32 shrink-0">
+        <Label className="text-sm">{providerName}</Label>
+        <p className="text-[11px] text-muted-foreground font-mono">{providerId}</p>
+      </div>
+      <div className="relative flex-1">
+        <Input
+          type={show || masked ? "text" : "password"}
+          value={masked ? value : value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={masked ? "已配置 (输入新值覆盖)" : placeholder}
+          className={cn("pr-10 font-mono text-sm", masked && "text-muted-foreground")}
+        />
+        {!masked && (
+          <button
+            type="button"
+            onClick={() => setShow(!show)}
+            className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+          >
+            {show ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+          </button>
+        )}
+      </div>
+      {value && (
+        <Badge variant={masked ? "secondary" : "outline"} className="text-xs shrink-0">
+          {masked ? "已配置" : "待保存"}
+        </Badge>
+      )}
+    </div>
+  );
+}
+
+// ─── CustomProviderCard ────────────────────────────────────────────────────
+function CustomProviderCard({
+  name, provider, onChange, onRename, onDelete,
+}: {
+  name: string;
+  provider: ProviderEntry;
+  onChange: (p: ProviderEntry) => void;
+  onRename: (newName: string) => void;
+  onDelete: () => void;
+}) {
+  const [expanded, setExpanded] = useState(true);
+  const [editName, setEditName] = useState(name);
+  const [showKey, setShowKey] = useState(false);
+  const [testState, setTestState] = useState<TestState>({ phase: "idle" });
+
+  const set = (key: keyof ProviderEntry, val: unknown) => onChange({ ...provider, [key]: val });
+
+  const testModel = async (model: ModelEntry) => {
+    setTestState({ phase: "testing" });
+    try {
+      const res = await fetch("/api/models-config/test", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ providerName: name, provider, model }),
+      });
+      const d = await res.json();
+      if (d.ok) setTestState({ phase: "success", latencyMs: d.latencyMs, responseText: d.responseText });
+      else setTestState({ phase: "error", message: d.error, latencyMs: d.latencyMs });
+    } catch (e) {
+      setTestState({ phase: "error", message: String(e) });
+    }
+  };
+
+  const addModel = () => {
+    const models = [...(provider.models ?? []), {
+      id: "", name: "", contextWindow: 128000, maxTokens: 4096,
+      input: ["text", "image"], reasoning: false,
+      cost: { input: 0, output: 0 },
+    }];
+    set("models", models);
+  };
+
+  const updateModel = (i: number, key: keyof ModelEntry, val: unknown) => {
+    const models = [...(provider.models ?? [])];
+    models[i] = { ...models[i], [key]: val };
+    set("models", models);
+  };
+
+  const deleteModel = (i: number) => {
+    const models = [...(provider.models ?? [])];
+    models.splice(i, 1);
+    set("models", models);
+  };
+
+  return (
+    <div className="rounded-xl border bg-card overflow-hidden">
+      {/* Header */}
+      <div
+        className="flex items-center gap-2 px-4 py-3 cursor-pointer hover:bg-secondary/30 transition-colors"
+        onClick={() => setExpanded(!expanded)}
+      >
+        {expanded ? <ChevronDown className="h-4 w-4 text-muted-foreground" /> : <ChevronRight className="h-4 w-4 text-muted-foreground" />}
+        <span className="font-mono text-sm font-medium flex-1 truncate">{name}</span>
+        <Badge variant="outline" className="text-xs">{provider.api ?? "—"}</Badge>
+        <Badge variant="secondary" className="text-xs">{provider.models?.length ?? 0} models</Badge>
+        <button
+          type="button"
+          onClick={(e) => { e.stopPropagation(); onDelete(); }}
+          className="ml-1 text-muted-foreground hover:text-destructive transition-colors"
+        >
+          <Trash2 className="h-4 w-4" />
+        </button>
+      </div>
+
+      {expanded && (
+        <div className="px-4 pb-4 space-y-4 border-t">
+          {/* Provider name */}
+          <div className="pt-4 space-y-1.5">
+            <Label className="text-xs text-muted-foreground uppercase tracking-wider">提供商名称（唯一标识）</Label>
+            <div className="flex gap-2">
+              <Input
+                value={editName}
+                onChange={(e) => setEditName(e.target.value)}
+                className="font-mono text-sm"
+                placeholder="my-custom-provider"
+              />
+              {editName !== name && editName.trim() && (
+                <Button size="sm" onClick={() => onRename(editName.trim())}>重命名</Button>
+              )}
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            {/* Base URL */}
+            <div className="space-y-1.5">
+              <Label className="text-xs text-muted-foreground uppercase tracking-wider">Base URL</Label>
+              <Input
+                value={provider.baseUrl ?? ""}
+                onChange={(e) => set("baseUrl", e.target.value || undefined)}
+                placeholder="https://api.example.com/v1"
+                className="font-mono text-sm"
+              />
+            </div>
+
+            {/* API Type */}
+            <div className="space-y-1.5">
+              <Label className="text-xs text-muted-foreground uppercase tracking-wider">API 协议</Label>
+              <Select value={provider.api ?? "openai-completions"} onValueChange={(v) => set("api", v)}>
+                <SelectTrigger><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  {API_TYPE_OPTIONS.map((o) => (
+                    <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          {/* API Key */}
+          <div className="space-y-1.5">
+            <Label className="text-xs text-muted-foreground uppercase tracking-wider">API Key</Label>
+            <div className="relative">
+              <Input
+                type={showKey ? "text" : "password"}
+                value={provider.apiKey ?? ""}
+                onChange={(e) => set("apiKey", e.target.value || undefined)}
+                placeholder="ENV_VAR_NAME, !shell-command, 或直接填写密钥"
+                className="pr-10 font-mono text-sm"
+              />
+              <button
+                type="button"
+                onClick={() => setShowKey(!showKey)}
+                className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+              >
+                {showKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+              </button>
+            </div>
+            <p className="text-[11px] text-muted-foreground">
+              前缀 <code className="font-mono">!</code> 运行 Shell 命令，或填写环境变量名（自动读取）
+            </p>
+          </div>
+
+          {/* Models */}
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <Label className="text-xs text-muted-foreground uppercase tracking-wider">模型列表</Label>
+              <Button variant="ghost" size="sm" onClick={addModel} className="h-7 text-xs">
+                <Plus className="mr-1 h-3 w-3" />添加模型
+              </Button>
+            </div>
+
+            {(provider.models ?? []).length === 0 ? (
+              <p className="text-sm text-muted-foreground text-center py-4 border border-dashed rounded-lg">
+                暂无模型，点击「添加模型」
+              </p>
+            ) : (
+              <div className="space-y-3">
+                {(provider.models ?? []).map((model, i) => (
+                  <ModelRow
+                    key={i}
+                    model={model}
+                    onUpdate={(k, v) => updateModel(i, k, v)}
+                    onDelete={() => deleteModel(i)}
+                    onTest={() => testModel(model)}
+                    testState={testState}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Test result */}
+          {testState.phase !== "idle" && testState.phase !== "testing" && (
+            <div className={cn(
+              "flex items-start gap-2 rounded-lg px-3 py-2 text-sm",
+              testState.phase === "success"
+                ? "bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400"
+                : "bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400",
+            )}>
+              {testState.phase === "success"
+                ? <Check className="h-4 w-4 mt-0.5 shrink-0" />
+                : <XCircle className="h-4 w-4 mt-0.5 shrink-0" />}
+              <div>
+                {testState.phase === "success"
+                  ? `连接成功 (${testState.latencyMs}ms)${testState.responseText ? ` — "${testState.responseText}"` : ""}`
+                  : `连接失败: ${testState.message}${testState.latencyMs ? ` (${testState.latencyMs}ms)` : ""}`}
+              </div>
+              <button onClick={() => setTestState({ phase: "idle" })} className="ml-auto text-current opacity-50 hover:opacity-100">
+                <XCircle className="h-3 w-3" />
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── ModelRow ──────────────────────────────────────────────────────────────
+function ModelRow({
+  model, onUpdate, onDelete, onTest, testState,
+}: {
+  model: ModelEntry;
+  onUpdate: (key: keyof ModelEntry, val: unknown) => void;
+  onDelete: () => void;
+  onTest: () => void;
+  testState: TestState;
+}) {
+  const isTesting = testState.phase === "testing";
+
+  return (
+    <div className="rounded-lg border bg-secondary/20 p-3 space-y-3">
+      <div className="flex items-center gap-2">
+        <div className="flex-1 min-w-0 grid grid-cols-2 gap-2">
+          <Input
+            value={model.id}
+            onChange={(e) => onUpdate("id", e.target.value)}
+            placeholder="model-id（如 gpt-4o）"
+            className="font-mono text-xs h-8"
+          />
+          <Input
+            value={model.name ?? ""}
+            onChange={(e) => onUpdate("name", e.target.value || undefined)}
+            placeholder="显示名称（可选）"
+            className="text-xs h-8"
+          />
+        </div>
+        <Button
+          variant="ghost" size="sm"
+          onClick={onTest}
+          disabled={!model.id || isTesting}
+          className="h-8 text-xs shrink-0 gap-1"
+          title="测试连接"
+        >
+          {isTesting
+            ? <Loader2 className="h-3 w-3 animate-spin" />
+            : <RefreshCw className="h-3 w-3" />}
+          测试
+        </Button>
+        <button
+          type="button"
+          onClick={onDelete}
+          className="text-muted-foreground hover:text-destructive transition-colors"
+        >
+          <Trash2 className="h-4 w-4" />
+        </button>
+      </div>
+
+      <div className="grid grid-cols-3 gap-2">
+        <div>
+          <Label className="text-[10px] text-muted-foreground">Context Window</Label>
+          <Input
+            type="number"
+            value={model.contextWindow ?? 128000}
+            onChange={(e) => onUpdate("contextWindow", Number(e.target.value))}
+            className="text-xs h-7 mt-0.5"
+          />
+        </div>
+        <div>
+          <Label className="text-[10px] text-muted-foreground">Max Output Tokens</Label>
+          <Input
+            type="number"
+            value={model.maxTokens ?? 4096}
+            onChange={(e) => onUpdate("maxTokens", Number(e.target.value))}
+            className="text-xs h-7 mt-0.5"
+          />
+        </div>
+        <div className="flex flex-col justify-end">
+          <div className="flex items-center gap-2 h-7">
+            <Switch
+              id={`reasoning-${model.id}`}
+              checked={model.reasoning ?? false}
+              onCheckedChange={(v) => onUpdate("reasoning", v)}
+              className="scale-75"
+            />
+            <Label htmlFor={`reasoning-${model.id}`} className="text-[11px] cursor-pointer">
+              支持 Thinking
+            </Label>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 gap-2">
+        <div>
+          <Label className="text-[10px] text-muted-foreground">输入价格 ($/1M tokens)</Label>
+          <Input
+            type="number" step="0.01"
+            value={model.cost?.input ?? 0}
+            onChange={(e) => onUpdate("cost", { ...model.cost, input: Number(e.target.value) })}
+            className="text-xs h-7 mt-0.5"
+          />
+        </div>
+        <div>
+          <Label className="text-[10px] text-muted-foreground">输出价格 ($/1M tokens)</Label>
+          <Input
+            type="number" step="0.01"
+            value={model.cost?.output ?? 0}
+            onChange={(e) => onUpdate("cost", { ...model.cost, output: Number(e.target.value) })}
+            className="text-xs h-7 mt-0.5"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+
+// ─── Types for scan result ──────────────────────────────────────────────────
+interface ScanVar { name: string; skills: string[]; stored: boolean }
+interface ScanResult { bySkill: { skillName: string; vars: { name: string; stored: boolean }[] }[]; summary: ScanVar[] }
+
+// ─── EnvVarsPanel ──────────────────────────────────────────────────────────
+function EnvVarsPanel() {
+  const [vars, setVars] = useState<Record<string, string>>({});
+  const [loading, setLoading] = useState(true);
+  const [newKey, setNewKey] = useState("");
+  const [newVal, setNewVal] = useState("");
+  const [editKey, setEditKey] = useState<string | null>(null);
+  const [editVal, setEditVal] = useState("");
+  const [error, setError] = useState("");
+  const [saved, setSaved] = useState<string | null>(null);
+  const [scan, setScan] = useState<ScanResult | null>(null);
+  const [scanning, setScanning] = useState(false);
+  // Quick-fill state for missing skill vars
+  const [quickVals, setQuickVals] = useState<Record<string, string>>({});
+
+  const load = useCallback(() => {
+    setLoading(true);
+    fetch("/api/env-vars", { cache: "no-store" })
+      .then(r => r.json())
+      .then(d => { setVars(d); setLoading(false); })
+      .catch(() => setLoading(false));
+  }, []);
+
+  useEffect(() => { load(); }, [load]);
+
+  const add = async (key = newKey, val = newVal) => {
+    setError("");
+    if (!key.trim()) { setError("变量名不能为空"); return; }
+    const res = await fetch("/api/env-vars", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ key: key.trim(), value: val }),
+    });
+    const d = await res.json();
+    if (!res.ok) { setError(d.error ?? "保存失败"); return; }
+    if (key === newKey) { setNewKey(""); setNewVal(""); }
+    setSaved(key.trim());
+    setTimeout(() => setSaved(null), 2500);
+    load();
+    setScan(null); // refresh scan after add
+  };
+
+  const saveEdit = async (key: string) => {
+    await fetch(`/api/env-vars/${encodeURIComponent(key)}`, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ value: editVal }),
+    });
+    setEditKey(null); setSaved(key);
+    setTimeout(() => setSaved(null), 2500);
+    load();
+  };
+
+  const remove = async (key: string) => {
+    await fetch(`/api/env-vars/${encodeURIComponent(key)}`, { method: "DELETE" });
+    load(); setScan(null);
+  };
+
+  const runScan = async () => {
+    setScanning(true);
+    const d: ScanResult = await fetch("/api/env-vars/scan").then(r => r.json());
+    setScan(d);
+    setQuickVals({});
+    setScanning(false);
+  };
+
+  const quickAdd = async (name: string) => {
+    await add(name, quickVals[name] ?? "");
+    setQuickVals(prev => { const n = { ...prev }; delete n[name]; return n; });
+    // Refresh scan
+    setTimeout(runScan, 300);
+  };
+
+  const entries = Object.entries(vars).sort(([a], [b]) => a.localeCompare(b));
+  const missingScanVars = scan?.summary.filter(v => !v.stored) ?? [];
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-start gap-3 rounded-xl border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 p-4">
+        <Terminal className="h-5 w-5 text-zinc-500 shrink-0 mt-0.5" />
+        <div className="flex-1">
+          <p className="text-sm font-medium">全局环境变量</p>
+          <p className="text-xs text-muted-foreground mt-0.5">
+            存于 <code className="font-mono bg-zinc-100 dark:bg-zinc-800 px-1 rounded">~/.digital-agents/env.json</code>，
+            Bash 工具执行时自动注入。
+          </p>
+        </div>
+        <Button size="sm" variant="outline" onClick={runScan} disabled={scanning} className="gap-1.5 shrink-0">
+          {scanning ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <RefreshCw className="h-3.5 w-3.5" />}
+          扫描 Skill 变量
+        </Button>
+      </div>
+
+      {/* ── Skill scan results ─────────────────────────────────── */}
+      {scan && (
+        <div className="rounded-xl border overflow-hidden">
+          <div className="flex items-center justify-between px-4 py-3 border-b bg-secondary/30">
+            <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+              Skill 引用的环境变量
+            </p>
+            <button type="button" onClick={() => setScan(null)} className="text-muted-foreground hover:text-foreground text-xs">关闭</button>
+          </div>
+          <div className="p-3 space-y-2">
+            {scan.summary.length === 0 ? (
+              <p className="text-sm text-muted-foreground text-center py-4">未发现 Skill 引用的环境变量</p>
+            ) : scan.summary.map(v => (
+              <div key={v.name} className={cn(
+                "flex items-center gap-2 rounded-lg border px-3 py-2.5 transition-all",
+                v.stored
+                  ? "border-[#57BE6B]/40 bg-[#57BE6B]/8 dark:bg-[#57BE6B]/10"
+                  : "border-amber-300 dark:border-amber-700 bg-amber-50/50 dark:bg-amber-900/10",
+              )}>
+                {/* Status */}
+                {v.stored ? (
+                  <Check className="h-4 w-4 text-[#57BE6B] shrink-0" />
+                ) : (
+                  <span className="h-4 w-4 rounded-full border-2 border-amber-400 shrink-0 flex items-center justify-center">
+                    <span className="h-1.5 w-1.5 rounded-full bg-amber-400" />
+                  </span>
+                )}
+
+                {/* Var name + skills */}
+                <div className="flex-1 min-w-0">
+                  <code className="text-xs font-mono font-semibold">{v.name}</code>
+                  <p className="text-[10px] text-muted-foreground mt-0.5">
+                    引用于：{v.skills.join("、")}
+                  </p>
+                </div>
+
+                {/* Status badge or quick-fill */}
+                {v.stored ? (
+                  <span className="text-[10px] text-[#57BE6B] shrink-0">已配置</span>
+                ) : (
+                  <div className="flex items-center gap-1.5 shrink-0">
+                    <Input
+                      value={quickVals[v.name] ?? ""}
+                      onChange={e => setQuickVals(prev => ({ ...prev, [v.name]: e.target.value }))}
+                      onKeyDown={e => e.key === "Enter" && quickAdd(v.name)}
+                      placeholder="输入值..."
+                      className="h-7 w-36 text-xs font-mono"
+                    />
+                    <Button size="sm" className="h-7 px-2 text-xs gap-1" onClick={() => quickAdd(v.name)}>
+                      <Plus className="h-3 w-3" />添加
+                    </Button>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+          {missingScanVars.length > 0 && (
+            <div className="px-4 py-2.5 border-t bg-amber-50/30 dark:bg-amber-900/10">
+              <p className="text-xs text-amber-600 dark:text-amber-400">
+                ⚠️ {missingScanVars.length} 个变量尚未配置 — 相关 Skill 执行时可能报错
+              </p>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* ── Add form ───────────────────────────────────────────── */}
+      <div className="rounded-xl border p-4 space-y-3">
+        <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">手动添加变量</p>
+        <div className="flex gap-2 items-start">
+          <Input
+            value={newKey}
+            onChange={e => { setNewKey(e.target.value); setError(""); }}
+            onKeyDown={e => e.key === "Enter" && add()}
+            placeholder="VARIABLE_NAME"
+            className="font-mono text-sm flex-1"
+          />
+          <span className="text-muted-foreground pt-2 text-sm shrink-0">=</span>
+          <Input
+            value={newVal}
+            onChange={e => setNewVal(e.target.value)}
+            onKeyDown={e => e.key === "Enter" && add()}
+            placeholder="value"
+            className="font-mono text-sm flex-1"
+          />
+          <Button size="sm" onClick={() => add()} className="gap-1.5 shrink-0">
+            <Plus className="h-3.5 w-3.5" />添加
+          </Button>
+        </div>
+        {error && <p className="text-xs text-destructive">{error}</p>}
+      </div>
+
+      {/* ── Stored vars list ───────────────────────────────────── */}
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+            已配置 ({entries.length})
+          </p>
+          {entries.length > 0 && (
+            <button
+              type="button"
+              onClick={async () => {
+                if (confirm("确认清空所有环境变量？")) {
+                  await fetch("/api/env-vars", { method: "DELETE" });
+                  load(); setScan(null);
+                }
+              }}
+              className="text-xs text-destructive hover:underline"
+            >
+              清空全部
+            </button>
+          )}
+        </div>
+
+        {loading ? (
+          <div className="flex items-center justify-center py-8 text-muted-foreground text-sm">
+            <Loader2 className="h-4 w-4 animate-spin mr-2" />加载中…
+          </div>
+        ) : entries.length === 0 ? (
+          <div className="rounded-lg border border-dashed p-8 text-center text-sm text-muted-foreground">
+            暂无环境变量。点击「扫描 Skill 变量」自动发现 Skill 所需的变量名，或手动添加。
+          </div>
+        ) : (
+          entries.map(([key, val]) => (
+            <div
+              key={key}
+              className={cn(
+                "group flex items-center gap-2 rounded-lg border px-3 py-2.5 transition-all",
+                saved === key
+                  ? "border-[#57BE6B]/60 bg-[#57BE6B]/10"
+                  : "border-border hover:border-zinc-300 dark:hover:border-zinc-600",
+              )}
+            >
+              <code className="text-xs font-mono font-semibold shrink-0 min-w-[140px] truncate">{key}</code>
+              <span className="text-muted-foreground text-xs shrink-0">=</span>
+              {editKey === key ? (
+                <>
+                  <Input
+                    value={editVal}
+                    onChange={e => setEditVal(e.target.value)}
+                    onKeyDown={e => { if (e.key === "Enter") saveEdit(key); if (e.key === "Escape") setEditKey(null); }}
+                    className="h-7 text-xs font-mono flex-1"
+                    autoFocus
+                  />
+                  <Button size="sm" variant="ghost" className="h-7 px-2 text-[#57BE6B]" onClick={() => saveEdit(key)}>
+                    <Check className="h-3.5 w-3.5" />
+                  </Button>
+                  <Button size="sm" variant="ghost" className="h-7 px-2" onClick={() => setEditKey(null)}>
+                    <XCircle className="h-3.5 w-3.5" />
+                  </Button>
+                </>
+              ) : (
+                <>
+                  <span
+                    className="text-xs font-mono text-muted-foreground flex-1 truncate cursor-pointer hover:text-foreground"
+                    onClick={() => { setEditKey(key); setEditVal(val); }}
+                    title={val || "(空)"}
+                  >
+                    {val || <em className="opacity-40 not-italic">(空)</em>}
+                  </span>
+                  {saved === key && <span className="text-[10px] text-[#57BE6B] shrink-0">已保存</span>}
+                  <button type="button"
+                    className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-foreground transition-all"
+                    onClick={() => { setEditKey(key); setEditVal(val); }} title="编辑">
+                    <RefreshCw className="h-3.5 w-3.5" />
+                  </button>
+                  <button type="button"
+                    className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-destructive transition-all"
+                    onClick={() => remove(key)} title="删除">
+                    <Trash2 className="h-3.5 w-3.5" />
+                  </button>
+                </>
+              )}
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ─── BuiltinProvidersPanel ──────────────────────────────────────────────────
+const PROVIDER_META: Record<string, { name: string; placeholder: string; color: string }> = {
+  anthropic: { name: "Anthropic",     placeholder: "sk-ant-api03-...", color: "bg-orange-50 dark:bg-orange-900/20 border-orange-200 dark:border-orange-800" },
+  openai:    { name: "OpenAI",        placeholder: "sk-proj-...",      color: "bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800" },
+  google:    { name: "Google AI",     placeholder: "AIzaSy...",        color: "bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800" },
+  groq:      { name: "Groq",          placeholder: "gsk_...",          color: "bg-purple-50 dark:bg-purple-900/20 border-purple-200 dark:border-purple-800" },
+  deepseek:  { name: "DeepSeek",      placeholder: "sk-...",           color: "bg-cyan-50 dark:bg-cyan-900/20 border-cyan-200 dark:border-cyan-800" },
+  xai:       { name: "xAI (Grok)",    placeholder: "xai-...",          color: "bg-zinc-50 dark:bg-zinc-800/50 border-zinc-200 dark:border-zinc-700" },
+  mistral:   { name: "Mistral",       placeholder: "...",              color: "bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800" },
+};
+
+type ProviderTestState = { phase: "idle" } | { phase: "testing" } | { phase: "ok"; ms: number } | { phase: "err"; msg: string };
+
+interface BuiltinProvidersPanelProps {
+  apiKeys: Record<string, string>;
+  onKeysChange: (keys: Record<string, string>) => void;
+  onSave: () => Promise<void>;
+}
+
+function BuiltinProvidersPanel({ apiKeys, onKeysChange, onSave }: BuiltinProvidersPanelProps) {
+  const [addProvider, setAddProvider] = useState<string>("");
+  const [addKey, setAddKey] = useState("");
+  const [testState, setTestState] = useState<ProviderTestState>({ phase: "idle" });
+  const [showAdd, setShowAdd] = useState(false);
+  const [editId, setEditId] = useState<string | null>(null);
+  const [editKey, setEditKey] = useState("");
+
+  // Providers that have a key configured
+  const configured = Object.entries(apiKeys).filter(([, v]) => v && v.trim() !== "");
+
+  // Available to add (not yet configured)
+  const available = Object.entries(PROVIDER_META).filter(([id]) => !apiKeys[id]);
+
+  const testKey = async (provider: string, key: string) => {
+    setTestState({ phase: "testing" });
+    try {
+      const res = await fetch("/api/auth-config/test", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ provider, key }),
+      });
+      const d = await res.json();
+      if (d.ok) setTestState({ phase: "ok", ms: d.latencyMs });
+      else setTestState({ phase: "err", msg: d.error ?? `HTTP ${d.status}` });
+    } catch (e) {
+      setTestState({ phase: "err", msg: String(e) });
+    }
+  };
+
+  const handleAdd = async () => {
+    if (!addProvider || !addKey.trim()) return;
+    // Test first
+    await testKey(addProvider, addKey.trim());
+  };
+
+  const confirmAdd = async () => {
+    onKeysChange({ ...apiKeys, [addProvider]: addKey.trim() });
+    await onSave();
+    setAddProvider(""); setAddKey(""); setTestState({ phase: "idle" }); setShowAdd(false);
+  };
+
+  const removeProvider = async (id: string) => {
+    const updated = { ...apiKeys };
+    delete updated[id];
+    onKeysChange(updated);
+    await onSave();
+  };
+
+  const saveEdit = async (id: string) => {
+    onKeysChange({ ...apiKeys, [id]: editKey.trim() });
+    await onSave();
+    setEditId(null); setEditKey("");
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-sm font-medium">LLM 提供商</p>
+          <p className="text-xs text-muted-foreground mt-0.5">
+            密钥存储于 <code className="font-mono bg-secondary px-1 rounded">~/.pi/agent/auth.json</code>
+          </p>
+        </div>
+        {!showAdd && (
+          <Button variant="outline" size="sm" onClick={() => setShowAdd(true)} className="gap-1.5" disabled={available.length === 0}>
+            <Plus className="h-3.5 w-3.5" />添加提供商
+          </Button>
+        )}
+      </div>
+
+      {/* ── Configured providers list ─── */}
+      {configured.length === 0 && !showAdd && (
+        <div className="rounded-xl border border-dashed p-8 text-center text-sm text-muted-foreground">
+          还没有配置任何 LLM 提供商。点击「添加提供商」开始配置。
+        </div>
+      )}
+
+      <div className="space-y-2">
+        {configured.map(([id, val]) => {
+          const meta = PROVIDER_META[id];
+          const isEditing = editId === id;
+          return (
+            <div key={id} className={cn("group flex items-center gap-3 rounded-xl border p-3.5 transition-all", meta?.color ?? "")}>
+              <div className="w-28 shrink-0">
+                <p className="text-sm font-medium">{meta?.name ?? id}</p>
+                <p className="text-[11px] text-muted-foreground font-mono">{id}</p>
+              </div>
+              {isEditing ? (
+                <>
+                  <Input
+                    type="password"
+                    value={editKey}
+                    onChange={e => setEditKey(e.target.value)}
+                    onKeyDown={e => { if (e.key === "Enter") saveEdit(id); if (e.key === "Escape") setEditId(null); }}
+                    placeholder={meta?.placeholder ?? "API Key"}
+                    className="flex-1 font-mono text-xs h-8"
+                    autoFocus
+                  />
+                  <Button size="sm" className="h-7 px-2 gap-1 text-xs" onClick={() => saveEdit(id)}>
+                    <Check className="h-3 w-3" />保存
+                  </Button>
+                  <Button size="sm" variant="ghost" className="h-7 px-2" onClick={() => setEditId(null)}>
+                    <XCircle className="h-3.5 w-3.5" />
+                  </Button>
+                </>
+              ) : (
+                <>
+                  <span className="flex-1 font-mono text-xs text-muted-foreground">
+                    {val.startsWith("***") ? val : "••••••••" + val.slice(-4)}
+                  </span>
+                  <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                    <Button size="sm" variant="ghost" className="h-7 px-2 text-xs"
+                      onClick={() => { setEditId(id); setEditKey(val.startsWith("***") ? "" : val); }}>
+                      编辑
+                    </Button>
+                    <Button size="sm" variant="ghost" className="h-7 px-2 text-destructive hover:text-destructive"
+                      onClick={() => removeProvider(id)}>
+                      <Trash2 className="h-3.5 w-3.5" />
+                    </Button>
+                  </div>
+                </>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* ── Add provider form ─── */}
+      {showAdd && (
+        <div className="rounded-xl border-2 border-dashed border-[#57BE6B]/50 p-4 space-y-4">
+          <div className="flex items-center justify-between">
+            <p className="text-sm font-semibold">添加提供商</p>
+            <button type="button" onClick={() => { setShowAdd(false); setTestState({ phase: "idle" }); setAddKey(""); setAddProvider(""); }}
+              className="text-muted-foreground hover:text-foreground">
+              <XCircle className="h-4 w-4" />
+            </button>
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1">
+              <Label className="text-xs text-muted-foreground">提供商</Label>
+              <select
+                value={addProvider}
+                onChange={e => { setAddProvider(e.target.value); setTestState({ phase: "idle" }); }}
+                className="w-full h-9 rounded-md border border-input bg-white dark:bg-zinc-800 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-ring"
+              >
+                <option value="">选择提供商…</option>
+                {available.map(([id, meta]) => (
+                  <option key={id} value={id}>{meta.name}</option>
+                ))}
+              </select>
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs text-muted-foreground">API Key</Label>
+              <Input
+                type="password"
+                value={addKey}
+                onChange={e => { setAddKey(e.target.value); setTestState({ phase: "idle" }); }}
+                onKeyDown={e => e.key === "Enter" && handleAdd()}
+                placeholder={addProvider ? (PROVIDER_META[addProvider]?.placeholder ?? "API Key") : "先选择提供商"}
+                className="font-mono text-sm"
+                disabled={!addProvider}
+              />
+            </div>
+          </div>
+
+          {/* Test result */}
+          {testState.phase !== "idle" && (
+            <div className={cn("flex items-center gap-2 rounded-lg px-3 py-2 text-sm",
+              testState.phase === "testing" ? "bg-secondary" :
+              testState.phase === "ok" ? "bg-[#57BE6B]/10 text-[#57BE6B]" :
+              "bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400"
+            )}>
+              {testState.phase === "testing" && <Loader2 className="h-4 w-4 animate-spin" />}
+              {testState.phase === "ok" && <Check className="h-4 w-4" />}
+              {testState.phase === "err" && <XCircle className="h-4 w-4" />}
+              <span>
+                {testState.phase === "testing" && "测试连通性中…"}
+                {testState.phase === "ok" && `连接成功 (${testState.ms}ms) — 点击「确认添加」保存`}
+                {testState.phase === "err" && `连接失败: ${testState.msg}`}
+              </span>
+            </div>
+          )}
+
+          <div className="flex gap-2">
+            <Button
+              variant="outline"
+              className="flex-1 gap-1.5"
+              disabled={!addProvider || !addKey.trim() || testState.phase === "testing"}
+              onClick={handleAdd}
+            >
+              {testState.phase === "testing" ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <RefreshCw className="h-3.5 w-3.5" />}
+              测试连通性
+            </Button>
+            {testState.phase === "ok" && (
+              <Button className="flex-1 gap-1.5 bg-[#57BE6B] hover:bg-[#4aaa5d]" onClick={confirmAdd}>
+                <Check className="h-3.5 w-3.5" />确认添加
+              </Button>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}