"use client"; import { useState, useEffect, useCallback, useRef } from "react"; // Color icons (have their own fill colors — no background needed) import AnthropicIcon from "@lobehub/icons/es/Anthropic/components/Mono"; import OpenAIIcon from "@lobehub/icons/es/OpenAI/components/Mono"; import GoogleColorIcon from "@lobehub/icons/es/Google/components/Color"; import DeepSeekColorIcon from "@lobehub/icons/es/DeepSeek/components/Color"; import GroqIcon from "@lobehub/icons/es/Groq/components/Mono"; import MistralColorIcon from "@lobehub/icons/es/Mistral/components/Color"; import MoonshotIcon from "@lobehub/icons/es/Moonshot/components/Mono"; import MinimaxColorIcon from "@lobehub/icons/es/Minimax/components/Color"; import FireworksColorIcon from "@lobehub/icons/es/Fireworks/components/Color"; import HuggingFaceColorIcon from "@lobehub/icons/es/HuggingFace/components/Color"; import CerebrasColorIcon from "@lobehub/icons/es/Cerebras/components/Color"; import OpenRouterIcon from "@lobehub/icons/es/OpenRouter/components/Mono"; import XAIIcon from "@lobehub/icons/es/XAI/components/Mono"; import CloudflareColorIcon from "@lobehub/icons/es/Cloudflare/components/Color"; import VercelIcon from "@lobehub/icons/es/Vercel/components/Mono"; import GithubCopilotIcon from "@lobehub/icons/es/GithubCopilot/components/Mono"; import AwsColorIcon from "@lobehub/icons/es/Aws/components/Color"; import AzureColorIcon from "@lobehub/icons/es/Azure/components/Color"; import KimiColorIcon from "@lobehub/icons/es/Kimi/components/Color"; import QwenColorIcon from "@lobehub/icons/es/Qwen/components/Color"; import ZhipuColorIcon from "@lobehub/icons/es/Zhipu/components/Color"; import CohereColorIcon from "@lobehub/icons/es/Cohere/components/Color"; import PerplexityColorIcon from "@lobehub/icons/es/Perplexity/components/Color"; import TogetherColorIcon from "@lobehub/icons/es/Together/components/Color"; import GrokIcon from "@lobehub/icons/es/Grok/components/Mono"; import AntGroupColorIcon from "@lobehub/icons/es/AntGroup/components/Color"; import NvidiaColorIcon from "@lobehub/icons/es/Nvidia/components/Color"; import OpenCodeIcon from "@lobehub/icons/es/OpenCode/components/Mono"; import XiaomiMiMoIcon from "@lobehub/icons/es/XiaomiMiMo/components/Mono"; import ZAIIcon from "@lobehub/icons/es/ZAI/components/Mono"; type IconComponent = React.ComponentType<{ size?: number | string; style?: React.CSSProperties }>; // hasColor=true → Color icon (self-colored SVG, no wrapper) // hasColor=false → Mono icon (rendered with currentColor, inherits theme text color) const PROVIDER_ICONS: Record = { "anthropic": { Icon: AnthropicIcon, hasColor: false }, "openai": { Icon: OpenAIIcon, hasColor: false }, "openai-codex": { Icon: OpenAIIcon, hasColor: false }, "google": { Icon: GoogleColorIcon, hasColor: true }, "google-vertex": { Icon: GoogleColorIcon, hasColor: true }, "ant-ling": { Icon: AntGroupColorIcon, hasColor: true }, "deepseek": { Icon: DeepSeekColorIcon, hasColor: true }, "groq": { Icon: GroqIcon, hasColor: false }, "mistral": { Icon: MistralColorIcon, hasColor: true }, "moonshotai": { Icon: MoonshotIcon, hasColor: false }, "moonshotai-cn": { Icon: MoonshotIcon, hasColor: false }, "moonshot": { Icon: MoonshotIcon, hasColor: false }, "minimax": { Icon: MinimaxColorIcon, hasColor: true }, "minimax-cn": { Icon: MinimaxColorIcon, hasColor: true }, "fireworks": { Icon: FireworksColorIcon, hasColor: true }, "huggingface": { Icon: HuggingFaceColorIcon, hasColor: true }, "cerebras": { Icon: CerebrasColorIcon, hasColor: true }, "openrouter": { Icon: OpenRouterIcon, hasColor: false }, "xai": { Icon: XAIIcon, hasColor: false }, "cloudflare-ai-gateway": { Icon: CloudflareColorIcon, hasColor: true }, "cloudflare-workers-ai": { Icon: CloudflareColorIcon, hasColor: true }, "vercel-ai-gateway": { Icon: VercelIcon, hasColor: false }, "github-copilot": { Icon: GithubCopilotIcon, hasColor: false }, "amazon-bedrock": { Icon: AwsColorIcon, hasColor: true }, "azure-openai-responses": { Icon: AzureColorIcon, hasColor: true }, "kimi-coding": { Icon: KimiColorIcon, hasColor: true }, "nvidia": { Icon: NvidiaColorIcon, hasColor: true }, "opencode": { Icon: OpenCodeIcon, hasColor: false }, "opencode-go": { Icon: OpenCodeIcon, hasColor: false }, "qwen": { Icon: QwenColorIcon, hasColor: true }, "xiaomi": { Icon: XiaomiMiMoIcon, hasColor: false }, "xiaomi-token-plan-ams": { Icon: XiaomiMiMoIcon, hasColor: false }, "xiaomi-token-plan-cn": { Icon: XiaomiMiMoIcon, hasColor: false }, "xiaomi-token-plan-sgp": { Icon: XiaomiMiMoIcon, hasColor: false }, "zai": { Icon: ZAIIcon, hasColor: false }, "zai-coding-cn": { Icon: ZAIIcon, hasColor: false }, "zhipu": { Icon: ZhipuColorIcon, hasColor: true }, "cohere": { Icon: CohereColorIcon, hasColor: true }, "perplexity": { Icon: PerplexityColorIcon, hasColor: true }, "together": { Icon: TogetherColorIcon, hasColor: true }, "grok": { Icon: GrokIcon, hasColor: false }, }; // ── Types ───────────────────────────────────────────────────────────────────── interface OAuthProvider { id: string; name: string; usesCallbackServer: boolean; loggedIn: boolean; } interface ApiKeyProvider { id: string; displayName: string; configured: boolean; source?: string; modelCount: number; } type OAuthLoginState = | { phase: "idle" } | { phase: "connecting" } | { phase: "auth"; url: string; instructions: string | null; token: string } | { phase: "device_code"; userCode: string; verificationUri: string; intervalSeconds: number | null; expiresInSeconds: number | null } | { phase: "prompt"; message: string; placeholder: string | null; token: string } | { phase: "select"; message: string; options: { id: string; label: string }[]; token: string } | { phase: "progress"; message: string } | { phase: "success" } | { phase: "error"; message: string }; interface ModelEntry { id: string; name?: string; api?: string; reasoning?: boolean; thinkingLevelMap?: Record; input?: string[]; contextWindow?: number; maxTokens?: number; cost?: { input?: number; output?: number; cacheRead?: number; cacheWrite?: number }; compat?: Record; } interface ProviderEntry { baseUrl?: string; api?: string; apiKey?: string; headers?: Record; compat?: Record; models?: ModelEntry[]; modelOverrides?: Record; } interface ModelsJson { providers?: Record; } type ModelTestState = | { phase: "idle" } | { phase: "testing" } | { phase: "success"; latencyMs?: number; status?: number; responseText?: string } | { phase: "error"; message: string; latencyMs?: number; status?: number }; type Selection = | { type: "provider"; name: string } | { type: "model"; providerName: string; index: number } | { type: "oauth"; providerId: string } | { type: "apikey"; providerId: string }; const API_OPTIONS = ["openai-completions", "openai-responses", "anthropic-messages", "google-generative-ai"] as const; // ── Form field helpers ──────────────────────────────────────────────────────── function Field({ label, children }: { label: string; children: React.ReactNode }) { return (
{children}
); } const inputStyle = { padding: "6px 9px", background: "var(--bg-panel)", border: "1px solid var(--border)", borderRadius: 5, color: "var(--text)", fontSize: 12, outline: "none", width: "100%", boxSizing: "border-box" as const, }; function TextInput({ value, onChange, placeholder, mono }: { value: string; onChange: (v: string) => void; placeholder?: string; mono?: boolean }) { return onChange(e.target.value)} placeholder={placeholder} style={{ ...inputStyle, fontFamily: mono ? "var(--font-mono)" : "inherit" }} />; } function SecretTextInput({ value, onChange, placeholder, mono, onKeyDown, autoComplete = "off", spellCheck = false, style, }: { value: string; onChange: (v: string) => void; placeholder?: string; mono?: boolean; onKeyDown?: React.KeyboardEventHandler; autoComplete?: string; spellCheck?: boolean; style?: React.CSSProperties; }) { const [visible, setVisible] = useState(false); useEffect(() => { if (!value) setVisible(false); }, [value]); return (
onChange(e.target.value)} onKeyDown={onKeyDown} placeholder={placeholder} style={{ ...inputStyle, paddingRight: 34, fontFamily: mono ? "var(--font-mono)" : "inherit" }} autoComplete={autoComplete} spellCheck={spellCheck} />
); } function NumInput({ value, onChange, placeholder }: { value: string; onChange: (v: string) => void; placeholder?: string }) { return onChange(e.target.value)} placeholder={placeholder} style={inputStyle} />; } function Select({ value, onChange, options, required }: { value: string; onChange: (v: string) => void; options: readonly string[]; required?: boolean }) { return ( ); } function Check({ label, checked, onChange }: { label: string; checked: boolean; onChange: (v: boolean) => void }) { return ( ); } function SectionTitle({ children }: { children: React.ReactNode }) { return
{children}
; } // ── Provider detail ─────────────────────────────────────────────────────────── function ProviderDetail({ name, provider, onChange, onRename, onDelete }: { name: string; provider: ProviderEntry; onChange: (p: ProviderEntry) => void; onRename: (n: string) => void; onDelete: () => void; }) { const [editingName, setEditingName] = useState(name); useEffect(() => setEditingName(name), [name]); const set = (k: K, v: ProviderEntry[K]) => onChange({ ...provider, [k]: v }); useEffect(() => { if (!provider.api) onChange({ ...provider, api: "openai-completions" }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [provider.api]); return (
Provider
{editingName !== name && editingName.trim() && ( )} set("baseUrl", v || undefined)} placeholder="https://api.example.com/v1" mono /> set("apiKey", v || undefined)} placeholder="ENV_VAR_NAME, !shell-command, or literal key" mono /> Prefix with ! to run a shell command, or use an env var name setLevel(level, e.target.value)} onFocus={() => { if (state !== "string") setLevel(level, strVal || level); }} placeholder={level} maxLength={10} style={{ width: "12ch", background: state === "string" ? "var(--bg)" : "var(--bg-panel)", border: "none", outline: "none", color: state === "string" ? "var(--text)" : "var(--text-dim)", fontFamily: "var(--font-mono)", fontSize: 11, padding: "4px 7px", transition: "background 0.1s, color 0.1s", }} />
); })} ); } // ── Model detail ────────────────────────────────────────────────────────────── const DEEPSEEK_COMPAT = { thinkingFormat: "deepseek", requiresReasoningContentOnAssistantMessages: true, } as const; function hasDeepseekCompat(model: ModelEntry): boolean { return model.compat?.thinkingFormat === "deepseek"; } function setDeepseekCompat(model: ModelEntry, enabled: boolean): ModelEntry { if (enabled) { return { ...model, compat: { ...(model.compat ?? {}), ...DEEPSEEK_COMPAT } }; } if (!model.compat) return model; const rest = { ...model.compat }; delete rest.thinkingFormat; delete rest.requiresReasoningContentOnAssistantMessages; return { ...model, compat: Object.keys(rest).length ? rest : undefined }; } function ModelDetail({ providerName, provider, model, onChange, onDelete, }: { providerName: string; provider: ProviderEntry; model: ModelEntry; onChange: (m: ModelEntry) => void; onDelete: () => void; }) { const [testState, setTestState] = useState({ phase: "idle" }); const set = (k: K, v: ModelEntry[K]) => onChange({ ...model, [k]: v }); const costVal = (k: keyof NonNullable) => model.cost?.[k] !== undefined ? String(model.cost[k]) : ""; const setCost = (k: keyof NonNullable, v: string) => { const n = parseFloat(v); onChange({ ...model, cost: { ...(model.cost ?? {}), [k]: isNaN(n) ? undefined : n } }); }; const testSummary = (() => { if (testState.phase === "idle") return null; if (testState.phase === "testing") return "Testing model connection..."; const meta = [ testState.latencyMs !== undefined ? `${testState.latencyMs}ms` : null, testState.status !== undefined ? `HTTP ${testState.status}` : null, ].filter(Boolean); if (testState.phase === "success") { return ["Connected", ...meta, testState.responseText || null].filter(Boolean).join(" · "); } return ["Failed", ...meta, testState.message].filter(Boolean).join(" · "); })(); useEffect(() => { setTestState({ phase: "idle" }); }, [providerName, provider.baseUrl, provider.api, provider.apiKey, model.id, model.api]); const handleTest = useCallback(async () => { if (!model.id.trim() || testState.phase === "testing") return; setTestState({ phase: "testing" }); try { const res = await fetch("/api/models-config/test", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ providerName, provider, model }), }); const d = await res.json() as { ok?: boolean; error?: string; latencyMs?: number; status?: number; responseText?: string; }; if (!res.ok || !d.ok) { setTestState({ phase: "error", message: d.error ?? `HTTP ${res.status}`, latencyMs: d.latencyMs, status: d.status, }); return; } setTestState({ phase: "success", latencyMs: d.latencyMs, status: d.status, responseText: d.responseText, }); } catch (e) { setTestState({ phase: "error", message: e instanceof Error ? e.message : String(e) }); } }, [model, provider, providerName, testState.phase]); return (
Model
{testSummary && ( {testSummary} )}
set("id", v)} placeholder="model-id" mono /> set("name", v || undefined)} placeholder="Display name" />
setInputValue(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") submitCode(loginState.token, inputValue); }} placeholder={loginState.phase === "auth" ? "http://localhost:1455/auth/callback?code=…" : (loginState.placeholder ?? "Enter value…")} style={{ flex: 1, padding: "6px 9px", background: "var(--bg)", border: "1px solid var(--border)", borderRadius: 5, color: "var(--text)", fontSize: 12, outline: "none", fontFamily: "var(--font-mono)", boxSizing: "border-box" }} />
)} {loginState.phase === "device_code" && (

Open the verification page and enter this code:

{loginState.userCode}

{loginState.verificationUri} {loginState.expiresInSeconds ? ` Expires in ${Math.ceil(loginState.expiresInSeconds / 60)} minutes.` : ""}

)} {loginState.phase === "progress" && (

{loginState.message}

)} {loginState.phase === "success" && (

Connected successfully.

)} {loginState.phase === "error" && (

{loginState.message}

)} {/* Actions */}
{isWorking ? ( ) : ( <> {provider.loggedIn && ( )} )}
); } // ── API Key detail ──────────────────────────────────────────────────────────── function ApiKeyDetail({ provider, onRefresh }: { provider: ApiKeyProvider; onRefresh: () => void }) { const [apiKey, setApiKey] = useState(""); const [saving, setSaving] = useState(false); const [removing, setRemoving] = useState(false); const [error, setError] = useState(null); const [savedOk, setSavedOk] = useState(false); // Reset state when provider changes useEffect(() => { setApiKey(""); setError(null); setSavedOk(false); }, [provider.id]); const handleSave = useCallback(async () => { if (!apiKey.trim()) return; setSaving(true); setError(null); setSavedOk(false); try { const res = await fetch(`/api/auth/api-key/${encodeURIComponent(provider.id)}`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ apiKey: apiKey.trim() }), }); const d = await res.json() as { success?: boolean; error?: string }; if (!res.ok || d.error) { setError(d.error ?? `HTTP ${res.status}`); } else { setApiKey(""); setSavedOk(true); setTimeout(() => setSavedOk(false), 2000); onRefresh(); } } catch (e) { setError(String(e)); } finally { setSaving(false); } }, [apiKey, provider.id, onRefresh]); const handleRemove = useCallback(async () => { setRemoving(true); setError(null); try { const res = await fetch(`/api/auth/api-key/${encodeURIComponent(provider.id)}`, { method: "DELETE" }); const d = await res.json() as { success?: boolean; error?: string }; if (!res.ok || d.error) setError(d.error ?? `HTTP ${res.status}`); else onRefresh(); } catch (e) { setError(String(e)); } finally { setRemoving(false); } }, [provider.id, onRefresh]); return (
API Key
{provider.configured ? "configured" : "not configured"}

{provider.configured ? `API key is stored. Enter a new key below to replace it, or disconnect to remove it.` : `Enter your ${provider.displayName} API key to enable ${provider.modelCount} model${provider.modelCount !== 1 ? "s" : ""}.`}

{ if (e.key === "Enter" && apiKey.trim()) handleSave(); }} placeholder={provider.configured ? "Enter new key to replace…" : "sk-…"} style={{ flex: 1 }} autoComplete="off" spellCheck={false} mono />
{error &&

{error}

} {provider.configured && ( )}
); } // ── Provider icon ───────────────────────────────────────────────────────────── function ProviderIcon({ id, size }: { id: string; size: number }) { const pi = PROVIDER_ICONS[id]; if (!pi) { const label = id .split(/[-_]/) .filter(Boolean) .slice(0, 2) .map((part) => part[0]) .join("") .toUpperCase() || "?"; return ( ); } // Color icons: self-colored SVG, no wrapper needed if (pi.hasColor) return ; // Mono icons: use currentColor so they adapt to light/dark theme return ; } // ── Add provider picker ─────────────────────────────────────────────────────── interface AddProviderPickerProps { oauthProviders: OAuthProvider[]; apiKeyProviders: ApiKeyProvider[]; onSelectOAuth: (id: string) => void; onSelectApiKey: (id: string) => void; onAddCustom: () => void; onClose: () => void; } function AddProviderPicker({ oauthProviders, apiKeyProviders, onSelectOAuth, onSelectApiKey, onAddCustom, onClose, }: AddProviderPickerProps) { const [search, setSearch] = useState(""); const inputRef = useRef(null); useEffect(() => { setTimeout(() => inputRef.current?.focus(), 30); }, []); const q = search.trim().toLowerCase(); const availableOAuth = oauthProviders.filter((p) => !p.loggedIn && (!q || p.name.toLowerCase().includes(q))); const availableApiKey = apiKeyProviders.filter((p) => !p.configured && (!q || p.displayName.toLowerCase().includes(q) || p.id.toLowerCase().includes(q))); const showCustom = !q || "custom".includes(q) || "openai-compatible".includes(q) || "anthropic-compatible".includes(q); const totalCount = availableOAuth.length + availableApiKey.length + (showCustom ? 1 : 0); const cardStyle: React.CSSProperties = { display: "flex", flexDirection: "row", alignItems: "center", gap: 8, padding: "10px 12px", background: "var(--bg-panel)", border: "1px solid var(--border)", borderRadius: 7, boxSizing: "border-box", cursor: "pointer", minWidth: 0, textAlign: "left", transition: "border-color 0.12s, background 0.12s", width: "100%", }; return (
{ if (e.target === e.currentTarget) onClose(); }} >
{/* Search */}
setSearch(e.target.value)} onKeyDown={(e) => { if (e.key === "Escape") onClose(); }} placeholder="Search providers…" style={{ flex: 1, background: "none", border: "none", outline: "none", color: "var(--text)", fontSize: 13, boxSizing: "border-box" }} />
{/* Card grid */}
{totalCount === 0 ? (
No providers match
) : (
{showCustom && (
Custom
)} {showCustom && ( )} {availableOAuth.length > 0 && (
Subscriptions
)} {availableOAuth.map((p) => ( ))} {availableApiKey.length > 0 && (
0 ? 6 : 0, fontSize: 10, fontWeight: 600, color: "var(--text-dim)", textTransform: "uppercase", letterSpacing: "0.07em" }}>API Key
)} {availableApiKey.map((p) => ( ))}
)}
); } // ── Main component ──────────────────────────────────────────────────────────── export function ModelsConfig({ onClose }: { onClose: () => void }) { const [config, setConfig] = useState({ providers: {} }); const [loading, setLoading] = useState(true); const [saving, setSaving] = useState(false); const [saveError, setSaveError] = useState(null); const [savedOk, setSavedOk] = useState(false); const [selection, setSelection] = useState(null); const [oauthProviders, setOauthProviders] = useState([]); const [apiKeyProviders, setApiKeyProviders] = useState([]); const [pickerOpen, setPickerOpen] = useState(false); const loadOAuthProviders = useCallback(() => { fetch("/api/auth/providers") .then((r) => r.json()) .then((d: { providers: OAuthProvider[] }) => setOauthProviders(d.providers)) .catch(() => {}); }, []); const loadApiKeyProviders = useCallback(() => { fetch("/api/auth/all-providers") .then((r) => r.json()) .then((d: { providers: ApiKeyProvider[] }) => setApiKeyProviders(d.providers)) .catch(() => {}); }, []); useEffect(() => { fetch("/api/models-config") .then((r) => r.json()) .then((d: ModelsJson) => { const normalized = d.providers ? d : { ...d, providers: {} }; setConfig(normalized); const keys = Object.keys(normalized.providers ?? {}); if (keys.length > 0) setSelection({ type: "provider", name: keys[0] }); }) .catch(() => setConfig({ providers: {} })) .finally(() => setLoading(false)); loadOAuthProviders(); loadApiKeyProviders(); }, [loadOAuthProviders, loadApiKeyProviders]); const addCustomProvider = useCallback(() => { let finalName = "new-provider"; let n = 1; while (config.providers?.[finalName]) finalName = `new-provider-${n++}`; setConfig((prev) => ({ ...prev, providers: { ...(prev.providers ?? {}), [finalName]: { api: "openai-completions" } } })); setSelection({ type: "provider", name: finalName }); }, [config.providers]); const updateProvider = useCallback((name: string, p: ProviderEntry) => { setConfig((prev) => ({ ...prev, providers: { ...(prev.providers ?? {}), [name]: p } })); }, []); const renameProvider = useCallback((oldName: string, newName: string) => { setConfig((prev) => { const entries = Object.entries(prev.providers ?? {}); const idx = entries.findIndex(([k]) => k === oldName); if (idx === -1) return prev; entries[idx] = [newName, entries[idx][1]]; return { ...prev, providers: Object.fromEntries(entries) }; }); setSelection((prev) => { if (!prev) return prev; if (prev.type === "provider" && prev.name === oldName) return { type: "provider", name: newName }; if (prev.type === "model" && prev.providerName === oldName) return { ...prev, providerName: newName }; return prev; }); }, []); const deleteProvider = useCallback((name: string) => { setConfig((prev) => { const providers = { ...(prev.providers ?? {}) }; delete providers[name]; return { ...prev, providers }; }); setConfig((prev) => { const remaining = Object.keys(prev.providers ?? {}); setSelection(remaining.length > 0 ? { type: "provider", name: remaining[0] } : null); return prev; }); }, []); const addModel = useCallback((providerName: string) => { setConfig((prev) => { const provider = prev.providers?.[providerName] ?? {}; const models = [...(provider.models ?? []), { id: "" }]; return { ...prev, providers: { ...(prev.providers ?? {}), [providerName]: { ...provider, models } } }; }); setConfig((prev) => { const idx = (prev.providers?.[providerName]?.models?.length ?? 1) - 1; setSelection({ type: "model", providerName, index: idx }); return prev; }); }, []); const updateModel = useCallback((providerName: string, index: number, m: ModelEntry) => { setConfig((prev) => { const provider = prev.providers?.[providerName] ?? {}; const models = [...(provider.models ?? [])]; models[index] = m; return { ...prev, providers: { ...(prev.providers ?? {}), [providerName]: { ...provider, models } } }; }); }, []); const removeModel = useCallback((providerName: string, index: number) => { setConfig((prev) => { const provider = prev.providers?.[providerName] ?? {}; const models = [...(provider.models ?? [])]; models.splice(index, 1); return { ...prev, providers: { ...(prev.providers ?? {}), [providerName]: { ...provider, models: models.length ? models : undefined } } }; }); setSelection({ type: "provider", name: providerName }); }, []); const handleSave = useCallback(async () => { setSaving(true); setSaveError(null); setSavedOk(false); try { const res = await fetch("/api/models-config", { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify(config), }); const d = await res.json() as { success?: boolean; error?: string }; if (!res.ok || d.error) setSaveError(d.error ?? `HTTP ${res.status}`); else { setSavedOk(true); setTimeout(() => setSavedOk(false), 2000); } } catch (e) { setSaveError(String(e)); } finally { setSaving(false); } }, [config]); const providers = Object.entries(config.providers ?? {}); const activeOAuth = oauthProviders.filter((p) => p.loggedIn); const activeApiKey = apiKeyProviders.filter((p) => p.configured); // Resolve current detail const detailContent = (() => { if (!selection) return null; if (selection.type === "oauth") { const p = oauthProviders.find((p) => p.id === selection.providerId); if (!p) return null; return ; } if (selection.type === "apikey") { const p = apiKeyProviders.find((p) => p.id === selection.providerId); if (!p) return null; return ; } if (selection.type === "provider") { const provider = config.providers?.[selection.name]; if (!provider) return null; return ( updateProvider(selection.name, p)} onRename={(n) => renameProvider(selection.name, n)} onDelete={() => deleteProvider(selection.name)} /> ); } const provider = config.providers?.[selection.providerName]; const model = provider?.models?.[selection.index]; if (!model) return null; return ( updateModel(selection.providerName, selection.index, m)} onDelete={() => removeModel(selection.providerName, selection.index)} /> ); })(); return ( <>
{ if (e.target === e.currentTarget) onClose(); }}>
{/* Header */}
Models ~/.pi/agent/models.json
{/* Body */}
{/* Left: tree */}
{/* Active OAuth subscriptions */} {activeOAuth.map((p) => { const isSelected = selection?.type === "oauth" && selection.providerId === p.id; return (
setSelection({ type: "oauth", providerId: p.id })} style={{ display: "flex", alignItems: "center", gap: 7, padding: "5px 8px", borderRadius: 5, cursor: "pointer", background: isSelected ? "var(--bg-selected)" : "none" }} onMouseEnter={(e) => { if (!isSelected) e.currentTarget.style.background = "var(--bg-hover)"; }} onMouseLeave={(e) => { if (!isSelected) e.currentTarget.style.background = "none"; }} > {p.name}
); })} {/* Active API key providers */} {activeApiKey.map((p) => { const isSelected = selection?.type === "apikey" && selection.providerId === p.id; return (
setSelection({ type: "apikey", providerId: p.id })} style={{ display: "flex", alignItems: "center", gap: 7, padding: "5px 8px", borderRadius: 5, cursor: "pointer", background: isSelected ? "var(--bg-selected)" : "none" }} onMouseEnter={(e) => { if (!isSelected) e.currentTarget.style.background = "var(--bg-hover)"; }} onMouseLeave={(e) => { if (!isSelected) e.currentTarget.style.background = "none"; }} > {p.displayName}
); })} {/* Divider before custom providers, only when there are active managed providers */} {(activeOAuth.length > 0 || activeApiKey.length > 0) && providers.length > 0 && (
)} {/* Custom providers */} {loading ? (
Loading…
) : providers.map(([pName, pData]) => { const isProviderSelected = selection?.type === "provider" && selection.name === pName; const models = pData.models ?? []; return (
{/* Provider row */}
setSelection({ type: "provider", name: pName })} style={{ display: "flex", alignItems: "center", gap: 6, padding: "7px 8px", borderRadius: 5, cursor: "pointer", background: isProviderSelected ? "var(--bg-selected)" : "none" }} onMouseEnter={(e) => { if (!isProviderSelected) e.currentTarget.style.background = "var(--bg-hover)"; }} onMouseLeave={(e) => { if (!isProviderSelected) e.currentTarget.style.background = "none"; }} > {pName}
{/* Model rows */} {models.map((m, i) => { const isModelSelected = selection?.type === "model" && selection.providerName === pName && selection.index === i; return (
setSelection({ type: "model", providerName: pName, index: i })} style={{ display: "flex", alignItems: "center", gap: 6, padding: "5px 8px 5px 26px", borderRadius: 5, cursor: "pointer", background: isModelSelected ? "var(--bg-selected)" : "none" }} onMouseEnter={(e) => { if (!isModelSelected) e.currentTarget.style.background = "var(--bg-hover)"; }} onMouseLeave={(e) => { if (!isModelSelected) e.currentTarget.style.background = "none"; }} > {m.id || "new model"} {m.reasoning && ( T )}
); })} {/* Add model button */}
{ e.stopPropagation(); addModel(pName); }} style={{ display: "flex", alignItems: "center", gap: 4, padding: "4px 8px 4px 26px", borderRadius: 5, cursor: "pointer", color: "var(--text-dim)" }} onMouseEnter={(e) => { e.currentTarget.style.color = "var(--accent)"; e.currentTarget.style.background = "var(--bg-hover)"; }} onMouseLeave={(e) => { e.currentTarget.style.color = "var(--text-dim)"; e.currentTarget.style.background = "none"; }} > + model
); })}
{/* Add provider */}
{/* Right: detail */}
{loading ? null : detailContent ?? (
Select a provider or model
)}
{/* Footer */}
{saveError && {saveError}}
{pickerOpen && ( setSelection({ type: "oauth", providerId: id })} onSelectApiKey={(id) => setSelection({ type: "apikey", providerId: id })} onAddCustom={addCustomProvider} onClose={() => setPickerOpen(false)} /> )} ); }