@raingor/pi-web-switch 0.3.3 → 0.4.1

package/src/components/providers/ProvidersModelsPage.tsx

@@ -1,10 +1,12 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useConfigStore } from "@/store/config-store";
 import { useTranslation } from "@/lib/i18n";
 import { Badge } from "@/components/ui/Badge";
 import { Modal } from "@/components/ui/Modal";
-import { formatTokens, cn } from "@/lib/utils";
+import { formatTokens, cn, formatCost, USD_TO_CNY } from "@/lib/utils";
+import { useCurrency } from "@/lib/currency";
 import type { ApiType, CustomProviderConfig, Model, Provider } from "@/types";
+import { searchCatalog, catalogToModel, guessModelMeta } from "@/data/model-catalog";
 import {
   Plus,
   Trash2,
@@ -25,11 +27,18 @@ import {
   Download,
   SquareCheck,
   Copy,
+  ChevronDown,
+  ChevronUp,
+  Sparkles,
+  Mic,
+  Wand2,
 } from "lucide-react";
 
 const API_TYPES: { value: ApiType; label: string }[] = [
   { value: "openai-completions", label: "Chat Completions (/chat/completions)" },
   { value: "openai-responses", label: "OpenAI Responses" },
+  { value: "openai-codex-responses", label: "OpenAI Codex Responses" },
+  { value: "azure-openai-responses", label: "Azure OpenAI Responses" },
   { value: "anthropic-messages", label: "Anthropic Messages" },
   { value: "google-generative-ai", label: "Google Generative AI" },
   { value: "google-vertex", label: "Google Vertex AI" },
@@ -37,6 +46,19 @@ const API_TYPES: { value: ApiType; label: string }[] = [
   { value: "mistral-conversations", label: "Mistral" },
 ];
 
+// Shape returned by /api/pi/provider-models (see server/pi-reader.ts FetchedModel)
+interface FetchedModel {
+  id: string;
+  name?: string;
+  contextWindow?: number;
+  maxTokens?: number;
+  reasoning?: boolean;
+  vision?: boolean;
+  audio?: boolean;
+  cost?: { input: number; output: number; cacheRead?: number; cacheWrite?: number };
+  source?: string;
+}
+
 function isValidHttpUrl(value: string): boolean {
   try {
     const u = new URL(value);
@@ -51,19 +73,20 @@ function isValidHttpUrl(value: string): boolean {
 const DEFAULT_CONTEXT_WINDOW = 262144;
 const DEFAULT_MAX_TOKENS = 32768;
 
-// Sanitize to a config-safe id: lowercase letters, digits and hyphens only
+// Sanitize to a config-safe id: letters (any script), digits and hyphens.
+// pi shows this key verbatim in its model picker badge, so keep it readable.
 function sanitizeProviderId(name: string): string {
   return name
     .trim()
     .toLowerCase()
     .replace(/\s+/g, "-")
-    .replace(/[^a-z0-9-]/g, "")
+    .replace(/[^\p{L}\p{N}-]/gu, "")
     .replace(/-+/g, "-")
     .replace(/^-|-$/g, "");
 }
 
-// Non-ASCII names (e.g. 中文) sanitize to "" — fall back to the endpoint hostname
-// so the provider still gets a valid id while keeping the original display name.
+// Empty or symbol-only names fall back to the endpoint hostname so the
+// provider still gets a valid id while keeping the original display name.
 function deriveProviderId(name: string, baseUrl: string): string {
   const fromName = sanitizeProviderId(name);
   if (fromName || !name.trim()) return fromName;
@@ -144,30 +167,107 @@ function parseProviderImport(raw: string): ParsedImport {
   return out;
 }
 
+// ─── Enabled Models Panel (cross-provider) ────────────────
+// Lists every enabled model across all providers. Shares settings.enabledModels
+// as the single source of truth with the per-provider model rows, so toggling
+// here stays in sync with the enable/disable state inside each provider.
+
+function EnabledModelsPanel() {
+  const { t } = useTranslation();
+  const { allModels, settings, removeEnabledModel, updateSettings } = useConfigStore();
+  const enabledSet = new Set(settings?.enabledModels ?? []);
+  const enabledModels = allModels.filter((m) => enabledSet.has(`${m.providerId}/${m.id}`));
+
+  const disableAll = () => updateSettings({ enabledModels: [] });
+
+  return (
+    <div className="rounded-xl border border-gray-800 bg-gray-900/50 p-4">
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <Zap className="h-4 w-4 text-emerald-400" />
+          <h2 className="text-sm font-semibold" style={{ color: "var(--page-text)" }}>
+            {t("providers_models.enabled_models_title")}
+          </h2>
+          <span className="rounded-full border border-gray-700 bg-gray-800 px-2 py-0.5 text-xs text-gray-400">
+            {enabledModels.length}
+          </span>
+        </div>
+        {enabledModels.length > 0 && (
+          <button
+            onClick={disableAll}
+            className="rounded-lg border border-gray-700 px-3 py-1 text-xs text-gray-300 transition-colors hover:bg-gray-800 hover:text-white"
+          >
+            {t("providers_models.disable_all")}
+          </button>
+        )}
+      </div>
+
+      {enabledModels.length === 0 ? (
+        <p className="mt-3 text-sm text-gray-500">{t("providers_models.no_enabled_models")}</p>
+      ) : (
+        <div className="mt-3 grid max-h-72 gap-1.5 overflow-y-auto pr-1 lg:grid-cols-2">
+          {enabledModels.map((m) => {
+            const ref = `${m.providerId}/${m.id}`;
+            return (
+              <div
+                key={ref}
+                className="flex items-center gap-2 rounded-lg border border-gray-700 bg-gray-900/70 px-3 py-2"
+              >
+                <button
+                  onClick={() => removeEnabledModel(ref)}
+                  title={t("models.enabled")}
+                  className="relative inline-flex h-4 w-7 shrink-0 items-center rounded-full bg-emerald-500 transition-colors"
+                >
+                  <span className="inline-block h-3 w-3 transform translate-x-3.5 rounded-full bg-white transition-transform" />
+                </button>
+                <Box className="h-4 w-4 shrink-0 text-gray-500" />
+                <span className="min-w-0 flex-1 truncate font-mono text-sm text-gray-200">
+                  {m.name || m.id}
+                </span>
+                <span className="shrink-0 rounded-md border border-gray-600 bg-gray-800/50 px-2 py-0.5 text-xs text-gray-400">
+                  {m.providerName}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
 export function ProvidersModelsPage() {
   const { t } = useTranslation();
   const { allProviders, auth, modelsJson, removeCustomProvider } = useConfigStore();
+  const hasKey = (p: Provider) => p.hasAuth || !!p.apiKey || !!auth?.[p.id]?.key;
 
-  const builtinProviders = allProviders.filter((p) => p.type === "builtin");
+  const builtinProviders = allProviders
+    .filter((p) => p.type === "builtin")
+    .sort((a, b) => {
+      const aKey = hasKey(a) ? 1 : 0;
+      const bKey = hasKey(b) ? 1 : 0;
+      if (aKey !== bKey) return bKey - aKey;
+      return a.name.localeCompare(b.name);
+    });
   const customProviders = allProviders.filter((p) => p.type === "custom");
 
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const [adding, setAdding] = useState(false);
   const [importing, setImporting] = useState(false);
   const [importBump, setImportBump] = useState(0);
+  const [builtinExpanded, setBuiltinExpanded] = useState(false);
   const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
   const [deleteError, setDeleteError] = useState(false);
 
   // Keep a valid selection (default: first custom, else first builtin)
   const selected = allProviders.find((p) => p.id === selectedId) ?? null;
+  const visibleBuiltinProviders = builtinExpanded ? builtinProviders : builtinProviders.slice(0, 10);
   useEffect(() => {
     if (!selected && !adding && allProviders.length > 0) {
       setSelectedId(customProviders[0]?.id ?? allProviders[0]?.id ?? null);
     }
   }, [selected, adding, allProviders, customProviders]);
 
-  const hasKey = (p: Provider) => p.hasAuth || !!p.apiKey || !!auth?.[p.id]?.key;
-
   const handleAddProvider = async (id: string, cfg: CustomProviderConfig): Promise<boolean> => {
     const ok = await useConfigStore.getState().addCustomProvider(id, cfg);
     if (ok) {
@@ -191,18 +291,40 @@ export function ProvidersModelsPage() {
 
   const handleDuplicateProvider = async (id: string) => {
     const existing = modelsJson?.providers[id];
-    if (!existing) return;
+    // Resolve the source models: prefer models.json override, else the
+    // builtin provider's model list so duplicates keep their models.
+    const sourceProvider = allProviders.find((p) => p.id === id);
+    const sourceModels = existing?.models ?? sourceProvider?.models ?? [];
+    const sourceName = sourceProvider?.name ?? id;
+    // Derive the new key from the display name so pi's model picker badge
+    // matches what the user sees in this UI.
+    const baseId = sanitizeProviderId(sourceName) || id;
     const suffix = "-copy";
-    const newId = sanitizeProviderId(id + suffix);
-    // Copy config but clear apiKey, authHeader, and models
+    let newId = sanitizeProviderId(baseId + suffix);
+    // Ensure uniqueness against existing provider ids
+    const taken = new Set(allProviders.map((p) => p.id));
+    let i = 2;
+    while (taken.has(newId)) newId = sanitizeProviderId(`${baseId}-copy${i++}`);
+    // Copy config but clear apiKey; carry models + headers + overrides
     const cfg: CustomProviderConfig = {
-      baseUrl: existing.baseUrl,
-      api: existing.api,
-      headers: existing.headers,
-      modelOverrides: existing.modelOverrides,
+      name: `${sourceName} (copy)`,
+      baseUrl: existing?.baseUrl ?? sourceProvider?.baseUrl,
+      api: existing?.api ?? sourceProvider?.api,
+      headers: existing?.headers,
+      compat: existing?.compat,
+      modelOverrides: existing?.modelOverrides,
+      models: sourceModels.map((m) => ({ ...m, enabled: true })),
     };
     const ok = await useConfigStore.getState().addCustomProvider(newId, cfg);
-    if (ok) setSelectedId(newId);
+    if (ok) {
+      // Enable the carried models in settings.enabledModels
+      const list = useConfigStore.getState().settings?.enabledModels ?? [];
+      const refs = sourceModels.map((m) => `${newId}/${m.id}`);
+      await useConfigStore.getState().updateSettings({
+        enabledModels: Array.from(new Set([...list, ...refs])),
+      });
+      setSelectedId(newId);
+    }
   };
 
   return (
@@ -216,28 +338,50 @@ export function ProvidersModelsPage() {
         </p>
       </div>
 
+      <EnabledModelsPanel />
+
       <div className="flex overflow-hidden rounded-xl border border-gray-800 bg-gray-900/50">
         {/* ─── Left: Provider List ─────────────────────── */}
         <div className="w-60 shrink-0 border-r border-gray-800 p-3">
           {builtinProviders.length > 0 && (
             <>
-              <p className="px-2 pb-2 pt-1 text-xs font-medium uppercase tracking-wider text-gray-500">
-                {t("providers.builtin")}
-              </p>
+              <div className="flex items-center justify-between px-2 pb-2 pt-1">
+                <p className="text-xs font-medium uppercase tracking-wider text-gray-500">
+                  {t("providers.builtin")} ({builtinProviders.length})
+                </p>
+              </div>
               <div className="space-y-0.5">
-                {builtinProviders.map((p) => (
-                  <ProviderListItem
-                    key={p.id}
-                    provider={p}
-                    active={!adding && selectedId === p.id}
-                    hasKey={hasKey(p)}
-                    onClick={() => {
-                      setAdding(false);
-                      setSelectedId(p.id);
-                    }}
-                  />
+                {visibleBuiltinProviders.map((p) => (
+                    <ProviderListItem
+                      key={p.id}
+                      provider={p}
+                      active={!adding && selectedId === p.id}
+                      hasKey={hasKey(p)}
+                      onClick={() => {
+                        setAdding(false);
+                        setSelectedId(p.id);
+                      }}
+                    />
                 ))}
               </div>
+              {builtinProviders.length > 10 && (
+                <button
+                  onClick={() => setBuiltinExpanded(!builtinExpanded)}
+                  className="mt-1 flex w-full items-center justify-center gap-1 rounded-lg py-1.5 text-xs text-gray-500 transition-colors hover:bg-gray-800/70 hover:text-gray-300"
+                >
+                  {builtinExpanded ? (
+                    <>
+                      <ChevronUp className="h-3.5 w-3.5" />
+                      {t("providers_models.collapse")}
+                    </>
+                  ) : (
+                    <>
+                      <ChevronDown className="h-3.5 w-3.5" />
+                      {t("providers_models.expand", String(builtinProviders.length - 10))}
+                    </>
+                  )}
+                </button>
+              )}
             </>
           )}
 
@@ -291,6 +435,7 @@ export function ProvidersModelsPage() {
               provider={selected}
               onDelete={() => setDeleteConfirm(selected.id)}
               onDuplicate={() => handleDuplicateProvider(selected.id)}
+              onRenamed={(newId) => setSelectedId(newId)}
             />
           ) : (
             <div className="flex h-40 items-center justify-center text-sm text-gray-500">
@@ -458,13 +603,15 @@ function TestConnectionButton({ baseUrl, apiKey }: { baseUrl: string; apiKey?: s
 
 // ─── Provider Detail Panel ────────────────────────────────
 
-function ProviderDetail({ provider, onDelete, onDuplicate }: { provider: Provider; onDelete: () => void; onDuplicate: () => void }) {
+function ProviderDetail({ provider, onDelete, onDuplicate, onRenamed }: { provider: Provider; onDelete: () => void; onDuplicate: () => void; onRenamed: (newId: string) => void }) {
   const { t } = useTranslation();
+  const { currency } = useCurrency();
   const {
     auth,
     settings,
     updateSettings,
     updateCustomProvider,
+    renameCustomProvider,
     setProviderAuth,
     removeProviderAuth,
     addModel,
@@ -474,6 +621,27 @@ function ProviderDetail({ provider, onDelete, onDuplicate }: { provider: Provide
     removeEnabledModel,
   } = useConfigStore();
 
+  // Whether a model is currently enabled (source of truth: settings.enabledModels)
+  const enabledRefs = new Set(settings?.enabledModels ?? []);
+  const isModelEnabled = (modelId: string) => enabledRefs.has(`${provider.id}/${modelId}`);
+
+  // Toggle a single model's enabled state
+  const toggleModelEnabled = (modelId: string) => {
+    const ref = `${provider.id}/${modelId}`;
+    if (enabledRefs.has(ref)) removeEnabledModel(ref);
+    else addEnabledModel(ref);
+  };
+
+  // Enable/disable all models of this provider at once (batched)
+  const setAllModelsEnabled = async (on: boolean) => {
+    const list = settings?.enabledModels ?? [];
+    const refs = provider.models.map((m) => `${provider.id}/${m.id}`);
+    const set = new Set(list);
+    if (on) refs.forEach((r) => set.add(r));
+    else refs.forEach((r) => set.delete(r));
+    await updateSettings({ enabledModels: Array.from(set) });
+  };
+
   const isCustom = provider.type === "custom";
   const savedKey = provider.apiKey ?? auth?.[provider.id]?.key ?? "";
 
@@ -486,13 +654,22 @@ function ProviderDetail({ provider, onDelete, onDuplicate }: { provider: Provide
   const [showAddModel, setShowAddModel] = useState(false);
   const [deleteModel, setDeleteModel] = useState<Model | null>(null);
   const [modelQuery, setModelQuery] = useState("");
+  const [modelSort, setModelSort] = useState<"default" | "family" | "price-asc" | "price-desc">("default");
+  const [supportsDeveloperRole, setSupportsDeveloperRole] = useState(
+    provider.compat?.supportsDeveloperRole ?? false
+  );
   const [saveState, setSaveState] = useState<"idle" | "saving" | "saved" | "error">("idle");
 
+  // ─── Quick add (inline, one-liner) ───
+  const [quickId, setQuickId] = useState("");
+  const [quickHint, setQuickHint] = useState<string | null>(null);
+  const [copiedParams, setCopiedParams] = useState<string | null>(null);
+
   // ─── Fetch Models State ───
   const [fetchOpen, setFetchOpen] = useState(false);
   const [fetching, setFetching] = useState(false);
   const [fetchError, setFetchError] = useState<string | null>(null);
-  const [fetchedModels, setFetchedModels] = useState<{ id: string; contextWindow?: number; maxTokens?: number; vision?: boolean }[]>([]);
+  const [fetchedModels, setFetchedModels] = useState<FetchedModel[]>([]);
   const [fetchSelected, setFetchSelected] = useState<Set<string>>(new Set());
   const [fetchImported, setFetchImported] = useState<number | null>(null);
 
@@ -547,7 +724,18 @@ function ProviderDetail({ provider, onDelete, onDuplicate }: { provider: Provide
     const selected = availableModels.filter((m) => isSelected(m.id));
     if (selected.length === 0) return;
     selected.forEach((m) => {
-      addModel(provider.id, { id: m.id, contextWindow: m.contextWindow ?? DEFAULT_CONTEXT_WINDOW, maxTokens: m.maxTokens ?? DEFAULT_MAX_TOKENS, input: m.vision ? ["text", "image"] : ["text"] } as Model);
+      const input: Model["input"] = ["text"];
+      if (m.vision) input.push("image");
+      if (m.audio) input.push("audio");
+      addModel(provider.id, {
+        id: m.id,
+        name: m.name,
+        reasoning: m.reasoning ?? false,
+        input,
+        contextWindow: m.contextWindow ?? DEFAULT_CONTEXT_WINDOW,
+        maxTokens: m.maxTokens ?? DEFAULT_MAX_TOKENS,
+        cost: m.cost ?? { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 },
+      } as Model);
     });
     // Enable in a single batched write — per-model addEnabledModel calls race
     // on the same settings snapshot and overwrite each other.
@@ -591,58 +779,159 @@ function ProviderDetail({ provider, onDelete, onDuplicate }: { provider: Provide
     }
   };
 
-  const urlInvalid = isCustom && baseUrl.trim() !== "" && !isValidHttpUrl(baseUrl.trim());
+  // Test every model of the provider sequentially (reuses /api/pi/model-test).
+  const handleTestAll = async () => {
+    for (const m of provider.models) {
+      await handleTestModel(m);
+    }
+  };
+
+  // Quick-add id changes → live hint
+  useEffect(() => {
+    const id = quickId.trim();
+    if (!id) { setQuickHint(null); return; }
+    const g = guessModelMeta(id);
+    setQuickHint(
+      g.source === "catalog" && g.matched
+        ? t("models.detected_catalog", g.matched)
+        : g.source === "heuristic"
+          ? t("models.detected_heuristic")
+          : null
+    );
+  }, [quickId, t]);
+
+  const handleQuickAdd = async () => {
+    const id = quickId.trim();
+    if (!id) return;
+    // Don't duplicate
+    if (provider.models.some((m) => m.id === id)) {
+      setQuickId("");
+      setQuickHint(null);
+      return;
+    }
+    const g = guessModelMeta(id);
+    const cw = g.contextWindow ?? DEFAULT_CONTEXT_WINDOW;
+    const mt = g.contextWindow
+      ? (g.contextWindow >= 1_000_000 ? 65536 : g.contextWindow >= 200_000 ? 32768 : 8192)
+      : DEFAULT_MAX_TOKENS;
+    // Pull full cost/name from catalog if available
+    const entries = searchCatalog(id, 5);
+    const match = g.source === "catalog"
+      ? entries.find((e) => e.patterns.some((p) => id.toLowerCase().includes(p.toLowerCase())))
+      : undefined;
+    const model: Model = {
+      id,
+      name: match?.name,
+      reasoning: g.reasoning ?? false,
+      input: g.input ?? ["text"],
+      contextWindow: match?.contextWindow ?? cw,
+      maxTokens: match?.maxTokens ?? mt,
+      cost: match?.cost ?? { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 },
+      enabled: true,
+    };
+    addModel(provider.id, model);
+    // Enable
+    const list = settings?.enabledModels ?? [];
+    await updateSettings({ enabledModels: Array.from(new Set([...list, `${provider.id}/${id}`])) });
+    setQuickId("");
+    setQuickHint(null);
+  };
+
+  const handleCopyParams = async (m: Model) => {
+    const payload = {
+      reasoning: m.reasoning,
+      input: m.input,
+      contextWindow: m.contextWindow,
+      maxTokens: m.maxTokens,
+      cost: m.cost,
+    };
+    try {
+      await navigator.clipboard.writeText(JSON.stringify(payload, null, 2));
+      setCopiedParams(m.id);
+      setTimeout(() => setCopiedParams(null), 1500);
+    } catch {
+      // ignore
+    }
+  };
+
+  const urlInvalid = baseUrl.trim() !== "" && !isValidHttpUrl(baseUrl.trim());
 
   const dirty =
-    (isCustom && (providerName !== (provider.name ?? "") || baseUrl !== (provider.baseUrl ?? "") || api !== (provider.api ?? "openai-completions"))) ||
+    (isCustom && (providerName !== (provider.name ?? "") || baseUrl !== (provider.baseUrl ?? "") || api !== (provider.api ?? "openai-completions") || supportsDeveloperRole !== (provider.compat?.supportsDeveloperRole ?? true))) ||
+    (!isCustom && (baseUrl !== (provider.baseUrl ?? "") || api !== (provider.api ?? "openai-completions"))) ||
     apiKey !== savedKey;
 
   const handleSave = async () => {
     setSaveState("saving");
     let ok = true;
     if (isCustom) {
-      ok = await updateCustomProvider(provider.id, {
+      const cfgPatch = {
         name: providerName || undefined,
         baseUrl: baseUrl || undefined,
         api,
         apiKey: apiKey || undefined,
-      });
-    } else if (apiKey !== savedKey) {
-      ok = apiKey
-        ? await setProviderAuth(provider.id, apiKey)
-        : await removeProviderAuth(provider.id);
+        compat: { supportsDeveloperRole },
+      };
+      // pi's model picker shows the provider key, not the display name, so
+      // rename the key too when the name changes (references get rewritten).
+      const nameChanged = providerName !== (provider.name ?? "");
+      const newId = nameChanged ? sanitizeProviderId(providerName) : "";
+      const taken = new Set(useConfigStore.getState().allProviders.map((p) => p.id));
+      if (newId && newId !== provider.id && !taken.has(newId)) {
+        ok = await renameCustomProvider(provider.id, newId, cfgPatch);
+        if (ok) onRenamed(newId);
+      } else {
+        ok = await updateCustomProvider(provider.id, cfgPatch);
+      }
+    } else {
+      // Builtin providers: baseUrl / api are persisted as a models.json
+      // override (so the user can point them at a proxy/gateway), while the
+      // API key stays in auth.json (the original behavior) to avoid creating a
+      // duplicate standalone custom-provider card.
+      const cfgPatch: Partial<CustomProviderConfig> = {};
+      if (baseUrl !== (provider.baseUrl ?? "")) cfgPatch.baseUrl = baseUrl || undefined;
+      if (api !== (provider.api ?? "openai-completions")) cfgPatch.api = api;
+      if (Object.keys(cfgPatch).length > 0) {
+        ok = await updateCustomProvider(provider.id, cfgPatch);
+      }
+      if (apiKey !== savedKey) {
+        const authOk = apiKey
+          ? await setProviderAuth(provider.id, apiKey)
+          : await removeProviderAuth(provider.id);
+        ok = ok && authOk;
+      }
+      if (Object.keys(cfgPatch).length === 0 && apiKey === savedKey) ok = true;
     }
     setSaveState(ok ? "saved" : "error");
     if (ok) setTimeout(() => setSaveState("idle"), 2500);
   };
 
-  // Enabled state lives in settings.enabledModels ("provider/model" refs) —
-  // the same source pi reads, so toggling here matches the CLI behavior.
-  const isEnabled = (modelId: string) =>
-    settings?.enabledModels?.includes(`${provider.id}/${modelId}`) ?? false;
-
-  const handleToggle = (modelId: string) => {
-    const ref = `${provider.id}/${modelId}`;
-    if (isEnabled(modelId)) removeEnabledModel(ref);
-    else addEnabledModel(ref);
-  };
-
-  const setAllEnabled = (enable: boolean) => {
-    const list = settings?.enabledModels ?? [];
-    const refs = provider.models.map((m) => `${provider.id}/${m.id}`);
-    const next = enable
-      ? Array.from(new Set([...list, ...refs]))
-      : list.filter((r) => !refs.includes(r));
-    updateSettings({ enabledModels: next });
-  };
-
   const q = modelQuery.trim().toLowerCase();
-  const visibleModels = q
+  const baseModels = q
     ? provider.models.filter(
         (m) => m.id.toLowerCase().includes(q) || (m.name ?? "").toLowerCase().includes(q)
       )
     : provider.models;
 
+  // Look up the catalog family for a model id (for sorting/grouping)
+  const familyOf = (id: string): string => {
+    const hit = searchCatalog(id, 1)[0];
+    return hit?.family ?? "—";
+  };
+
+  const visibleModels = useMemo(() => {
+    const arr = [...baseModels];
+    if (modelSort === "family") {
+      arr.sort((a, b) => familyOf(a.id).localeCompare(familyOf(b.id)));
+    } else if (modelSort === "price-asc" || modelSort === "price-desc") {
+      const price = (m: typeof arr[number]) => m.cost?.input ?? 0;
+      arr.sort((a, b) => price(a) - price(b));
+      if (modelSort === "price-desc") arr.reverse();
+    }
+    return arr;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [baseModels, modelSort]);
+
   return (
     <div className="space-y-5">
       {/* Header */}
@@ -692,17 +981,19 @@ function ProviderDetail({ provider, onDelete, onDuplicate }: { provider: Provide
         <input
           type="text"
           value={baseUrl}
-          disabled={!isCustom}
           onChange={(e) => setBaseUrl(e.target.value)}
           placeholder="https://api.example.com/v1"
           className={cn(
-            "mt-1.5 w-full rounded-lg border bg-gray-800 px-3 py-2.5 text-sm text-white disabled:opacity-50",
+            "mt-1.5 w-full rounded-lg border bg-gray-800 px-3 py-2.5 text-sm text-white",
             urlInvalid ? "border-red-500" : "border-gray-700"
           )}
         />
         {urlInvalid && (
           <p className="mt-1 text-xs text-red-400">{t("providers_models.invalid_url")}</p>
         )}
+        {!isCustom && !urlInvalid && baseUrl !== (provider.baseUrl ?? "") && (
+          <p className="mt-1 text-xs text-amber-400">{t("providers_models.baseurl_override")}</p>
+        )}
       </div>
 
       {/* API Type */}
@@ -710,9 +1001,8 @@ function ProviderDetail({ provider, onDelete, onDuplicate }: { provider: Provide
         <label className="block text-sm text-gray-400">{t("providers.api_type")}</label>
         <select
           value={api}
-          disabled={!isCustom}
           onChange={(e) => setApi(e.target.value as ApiType)}
-          className="mt-1.5 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2.5 text-sm text-white disabled:opacity-50"
+          className="mt-1.5 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2.5 text-sm text-white"
         >
           {API_TYPES.map((a) => (
             <option key={a.value} value={a.value}>{a.label}</option>
@@ -738,6 +1028,26 @@ function ProviderDetail({ provider, onDelete, onDuplicate }: { provider: Provide
             {showKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
           </button>
         </div>
+        {apiKey.trim().startsWith("$") && (
+          <p className="mt-1 text-xs text-sky-400">
+            {t("providers_models.api_key_env", apiKey.trim())}
+          </p>
+        )}
+      </div>
+
+      {/* Developer Role Support */}
+      <div className="flex items-center gap-2">
+        <input
+          id="supports-developer-role"
+          type="checkbox"
+          checked={supportsDeveloperRole}
+          onChange={(e) => setSupportsDeveloperRole(e.target.checked)}
+          className="rounded border-gray-600 bg-gray-800 text-blue-500"
+        />
+        <label htmlFor="supports-developer-role" className="text-sm text-gray-400">
+          <span>{t("compat.supports_developer_role")}</span>
+          <span className="ml-2 text-xs text-gray-500">{t("compat.supports_developer_role_desc")}</span>
+        </label>
       </div>
 
       {/* Save / Test / Feedback row */}
@@ -777,17 +1087,25 @@ function ProviderDetail({ provider, onDelete, onDuplicate }: { provider: Provide
           {provider.models.length > 0 && (
             <div className="flex items-center gap-2">
               <button
-                onClick={() => setAllEnabled(true)}
-                className="rounded-md px-2 py-1 text-xs text-emerald-400 transition-colors hover:bg-emerald-500/10"
+                onClick={() => setAllModelsEnabled(true)}
+                className="rounded-md border border-gray-700 px-2.5 py-1 text-xs text-gray-300 transition-colors hover:bg-gray-800 hover:text-white"
               >
                 {t("providers_models.enable_all")}
               </button>
               <button
-                onClick={() => setAllEnabled(false)}
-                className="rounded-md px-2 py-1 text-xs text-gray-400 transition-colors hover:bg-gray-800"
+                onClick={() => setAllModelsEnabled(false)}
+                className="rounded-md border border-gray-700 px-2.5 py-1 text-xs text-gray-300 transition-colors hover:bg-gray-800 hover:text-white"
               >
                 {t("providers_models.disable_all")}
               </button>
+              <button
+                onClick={handleTestAll}
+                title={t("providers_models.test_all")}
+                className="rounded-md border border-gray-700 px-2.5 py-1 text-xs text-gray-300 transition-colors hover:bg-gray-800 hover:text-white"
+              >
+                <Zap className="mr-1 inline h-3 w-3" />
+                {t("providers_models.test_all")}
+              </button>
             </div>
           )}
         </div>
@@ -805,6 +1123,22 @@ function ProviderDetail({ provider, onDelete, onDuplicate }: { provider: Provide
           </div>
         )}
 
+        {provider.models.length > 1 && (
+          <div className="mt-1.5 flex items-center gap-2">
+            <label className="text-xs text-gray-500">{t("providers_models.sort_by")}</label>
+            <select
+              value={modelSort}
+              onChange={(e) => setModelSort(e.target.value as typeof modelSort)}
+              className="rounded-lg border border-gray-700 bg-gray-800 px-2 py-1.5 text-xs text-gray-200"
+            >
+              <option value="default">{t("providers_models.sort_default")}</option>
+              <option value="family">{t("providers_models.sort_family")}</option>
+              <option value="price-asc">{t("providers_models.sort_price_asc")}</option>
+              <option value="price-desc">{t("providers_models.sort_price_desc")}</option>
+            </select>
+          </div>
+        )}
+
         <div className="mt-1.5 space-y-2 rounded-lg border border-gray-800 p-3">
           {provider.models.length === 0 && (
             <p className="px-1 py-2 text-sm text-gray-500">{t("models.no_models")}</p>
@@ -812,14 +1146,28 @@ function ProviderDetail({ provider, onDelete, onDuplicate }: { provider: Provide
           {provider.models.length > 0 && visibleModels.length === 0 && (
             <p className="px-1 py-2 text-sm text-gray-500">{t("models.no_models")}</p>
           )}
-          {visibleModels.map((m) => (
+          {visibleModels.map((m) => {
+            const enabled = isModelEnabled(m.id);
+            return (
             <div
               key={m.id}
-              className={cn(
-                "flex items-center gap-2 rounded-lg border border-gray-700 bg-gray-900/70 px-3 py-2.5",
-                !isEnabled(m.id) && "opacity-50"
-              )}
+              className="flex items-center gap-2 rounded-lg border border-gray-700 bg-gray-900/70 px-3 py-2.5"
             >
+              <button
+                onClick={() => toggleModelEnabled(m.id)}
+                title={enabled ? t("models.enabled") : t("models.disabled")}
+                className={cn(
+                  "relative inline-flex h-4 w-7 shrink-0 items-center rounded-full transition-colors",
+                  enabled ? "bg-emerald-500" : "bg-gray-600"
+                )}
+              >
+                <span
+                  className={cn(
+                    "inline-block h-3 w-3 transform rounded-full bg-white transition-transform",
+                    enabled ? "translate-x-3.5" : "translate-x-0.5"
+                  )}
+                />
+              </button>
               <Box className="h-4 w-4 shrink-0 text-gray-500" />
               <span className="min-w-0 flex-1 truncate font-mono text-sm text-gray-200">
                 {m.id}
@@ -834,25 +1182,26 @@ function ProviderDetail({ provider, onDelete, onDuplicate }: { provider: Provide
                   <ImageIcon className="h-3.5 w-3.5 text-blue-400" />
                 </span>
               )}
-              <span className="rounded-md border border-gray-600 bg-gray-800/50 px-2 py-0.5 text-xs text-gray-400">
+              {m.input?.includes("audio") && (
+                <span title={t("models.audio_input")} className="flex shrink-0">
+                  <Mic className="h-3.5 w-3.5 text-emerald-400" />
+                </span>
+              )}
+              <span
+                className="rounded-md border border-gray-600 bg-gray-800/50 px-2 py-0.5 text-xs text-gray-400"
+                title={
+                  m.cost
+                    ? `In ${formatCost(m.cost.input, currency)} / Out ${formatCost(m.cost.output, currency)} · CacheR ${formatCost(m.cost.cacheRead ?? 0, currency)} / CacheW ${formatCost(m.cost.cacheWrite ?? 0, currency)}`
+                    : undefined
+                }
+              >
                 {m.cost && (m.cost.input || m.cost.output)
-                  ? `$${m.cost.input}/${m.cost.output}`
+                  ? `${formatCost(m.cost.input, currency)}/${formatCost(m.cost.output, currency)}`
                   : t("models.free")}
               </span>
               <span className="rounded-md border border-gray-600 bg-gray-800/50 px-2 py-0.5 text-xs text-gray-400">
                 {m.contextWindow ? formatTokens(m.contextWindow) : "—"}
               </span>
-              <button
-                onClick={() => handleToggle(m.id)}
-                className={cn(
-                  "rounded-md px-2 py-1 text-xs transition-colors",
-                  isEnabled(m.id)
-                    ? "text-emerald-400 hover:bg-emerald-500/10"
-                    : "text-gray-500 hover:bg-gray-700"
-                )}
-              >
-                {isEnabled(m.id) ? t("models.enabled") : t("models.disabled")}
-              </button>
               {/* Test model */}
               {(() => {
                 const test = getModelTest(m.id);
@@ -890,6 +1239,19 @@ function ProviderDetail({ provider, onDelete, onDuplicate }: { provider: Provide
                 );
                 return null;
               })()}
+              {copiedParams === m.id ? (
+                <span className="flex items-center gap-1 px-1 text-xs text-emerald-400">
+                  <Check className="h-3.5 w-3.5" />
+                </span>
+              ) : (
+                <button
+                  onClick={() => handleCopyParams(m)}
+                  className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-700 hover:text-gray-200"
+                  title={t("models.copy_params")}
+                >
+                  <Copy className="h-3.5 w-3.5" />
+                </button>
+              )}
               <button
                 onClick={() => setEditModel(m)}
                 className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-700 hover:text-gray-200"
@@ -905,8 +1267,48 @@ function ProviderDetail({ provider, onDelete, onDuplicate }: { provider: Provide
                 <Trash2 className="h-3.5 w-3.5" />
               </button>
             </div>
-          ))}
+          );
+          })}
         </div>
+        {/* Quick-add input */}
+        <div className="mt-3">
+          <div className="flex gap-2">
+            <div className="relative flex-1">
+              <Wand2 className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-emerald-400" />
+              <input
+                type="text"
+                value={quickId}
+                onChange={(e) => setQuickId(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") { e.preventDefault(); handleQuickAdd(); }
+                }}
+                placeholder={t("models.quick_add_placeholder")}
+                className="w-full rounded-lg border border-gray-700 bg-gray-800 py-2 pl-9 pr-3 text-sm text-white"
+              />
+            </div>
+            <button
+              onClick={handleQuickAdd}
+              disabled={!quickId.trim()}
+              className="flex items-center gap-1.5 rounded-lg px-3 py-2 text-sm font-medium text-white transition-colors disabled:opacity-50"
+              style={{ backgroundColor: "#10b981" }}
+            >
+              <Plus className="h-4 w-4" />
+              {t("models.quick_add")}
+            </button>
+            <button
+              onClick={() => setShowAddModel(true)}
+              className="flex items-center gap-1.5 rounded-lg border border-gray-700 px-3 py-2 text-sm text-gray-300 transition-colors hover:bg-gray-800"
+            >
+              {t("models.add_model")}
+            </button>
+          </div>
+          {quickHint && (
+            <p className="mt-1.5 flex items-center gap-1 text-[11px] text-emerald-400">
+              <Wand2 className="h-3 w-3" /> {quickHint}
+            </p>
+          )}
+        </div>
+
         <div className="flex flex-wrap gap-2 mt-3">
           <button
             onClick={fetchModels}
@@ -921,13 +1323,6 @@ function ProviderDetail({ provider, onDelete, onDuplicate }: { provider: Provide
             {fetching ? <Loader2 className="h-4 w-4 animate-spin" /> : <Download className="h-4 w-4" />}
             {fetching ? t("providers_models.fetching") : t("providers_models.fetch_models")}
           </button>
-          <button
-            onClick={() => setShowAddModel(true)}
-            className="flex items-center gap-2 rounded-lg border border-gray-700 px-4 py-2 text-sm text-gray-300 transition-colors hover:bg-gray-800"
-          >
-            <Plus className="h-4 w-4" />
-            {t("models.add_model")}
-          </button>
         </div>
       </div>
 
@@ -979,12 +1374,25 @@ function ProviderDetail({ provider, onDelete, onDuplicate }: { provider: Provide
                     </div>
                     <input type="checkbox" checked={isSelected(m.id)} onChange={() => toggleSelect(m.id)} className="sr-only" />
                     <span className="min-w-0 flex-1 truncate font-mono text-sm text-gray-200">{m.id}</span>
-                    <span className={`flex shrink-0 items-center gap-1 rounded border px-1.5 py-0.5 text-xs ${m.vision ? "border-blue-500/40 bg-blue-500/10 text-blue-400" : "border-gray-700 bg-gray-800 text-gray-500"}`}>
-                      {m.vision && <ImageIcon className="h-3 w-3" />}
+                    {m.reasoning && (
+                      <span className="flex shrink-0 items-center rounded border border-purple-500/40 bg-purple-500/10 px-1.5 py-0.5 text-[10px] text-purple-400">
+                        <Brain className="h-3 w-3" />
+                      </span>
+                    )}
+                    <span className={`flex shrink-0 items-center gap-1 rounded border px-1.5 py-0.5 text-[10px] ${m.vision ? "border-blue-500/40 bg-blue-500/10 text-blue-400" : "border-gray-700 bg-gray-800 text-gray-500"}`}>
+                      {m.vision ? <ImageIcon className="h-3 w-3" /> : <span className="h-3 w-3 inline-block" />}
                       {m.vision ? t("providers_models.modality_vision") : t("providers_models.modality_text")}
                     </span>
-                    {m.contextWindow && <span className="rounded border border-gray-700 bg-gray-800 px-1.5 py-0.5 text-xs text-gray-500 font-mono">{formatTokens(m.contextWindow)}</span>}
-                    {m.maxTokens && <span className="rounded border border-gray-700 bg-gray-800 px-1.5 py-0.5 text-xs text-gray-500 font-mono">{formatTokens(m.maxTokens)}</span>}
+                    {m.audio && (
+                      <span className="flex shrink-0 items-center rounded border border-emerald-500/40 bg-emerald-500/10 px-1.5 py-0.5 text-[10px] text-emerald-400">
+                        <Mic className="h-3 w-3" />
+                      </span>
+                    )}
+                    {m.contextWindow && <span className="rounded border border-gray-700 bg-gray-800 px-1.5 py-0.5 text-[10px] text-gray-500 font-mono">{formatTokens(m.contextWindow)}</span>}
+                    {m.maxTokens && <span className="rounded border border-gray-700 bg-gray-800 px-1.5 py-0.5 text-[10px] text-gray-500 font-mono">{formatTokens(m.maxTokens)}</span>}
+                    {m.cost && (m.cost.input || m.cost.output) ? (
+                      <span className="rounded border border-gray-700 bg-gray-800 px-1.5 py-0.5 text-[10px] text-gray-500 font-mono">${m.cost.input}/${m.cost.output}</span>
+                    ) : null}
                   </label>
                 ))}
               </div>
@@ -1090,16 +1498,16 @@ function ProviderDetail({ provider, onDelete, onDuplicate }: { provider: Provide
 
 // ─── Model Form (add & edit) ──────────────────────────────
 
-function ModelForm({
-  initial,
-  onSubmit,
-  onCancel,
-}: {
+interface ModelFormProps {
   initial?: Model;
   onSubmit: (form: Partial<Model>) => void;
   onCancel: () => void;
-}) {
+}
+
+function ModelForm({ initial, onSubmit, onCancel }: ModelFormProps) {
   const { t } = useTranslation();
+  const isEdit = !!initial;
+
   const [form, setForm] = useState<Partial<Model>>(
     initial
       ? { ...initial }
@@ -1113,10 +1521,191 @@ function ModelForm({
           cost: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 },
         }
   );
-  const isEdit = !!initial;
+
+  // Which fields the user has manually changed (so auto-detect doesn't clobber them)
+  const touchedRef = useRef<Set<string>>(new Set());
+  const touch = (field: string) => { touchedRef.current.add(field); };
+  const wasTouched = (field: string) => touchedRef.current.has(field);
+
+  // Auto-detect from model id when not editing and id changes
+  const [detectHint, setDetectHint] = useState<string | null>(null);
+  useEffect(() => {
+    if (isEdit) return;
+    const id = (form.id ?? "").trim();
+    if (!id) { setDetectHint(null); return; }
+
+    const guess = guessModelMeta(id);
+    if (guess.source === "default") { setDetectHint(null); return; }
+
+    setForm((prev) => {
+      const next = { ...prev };
+      if (guess.contextWindow && !wasTouched("contextWindow")) next.contextWindow = guess.contextWindow;
+      if (!wasTouched("maxTokens")) {
+        // Use reasonable maxTokens per context family when detected
+        next.maxTokens = guess.contextWindow
+          ? (guess.contextWindow >= 1_000_000 ? 65536 : guess.contextWindow >= 200_000 ? 32768 : 8192)
+          : DEFAULT_MAX_TOKENS;
+      }
+      if (guess.reasoning !== undefined && !wasTouched("reasoning")) next.reasoning = guess.reasoning;
+      if (guess.input && !wasTouched("input")) next.input = [...guess.input];
+      // Catalog match → also set name + cost
+      if (guess.source === "catalog") {
+        // Find the matched catalog entry for name + cost
+        const entries = searchCatalog(id, 5);
+        const match = entries.find((e) => e.patterns.some((p) => id.toLowerCase().includes(p.toLowerCase())));
+        if (match) {
+          if (!wasTouched("name")) next.name = match.name;
+          if (match.cost && !wasTouched("cost")) next.cost = { ...match.cost };
+        }
+      }
+      return next;
+    });
+
+    setDetectHint(
+      guess.source === "catalog" && guess.matched
+        ? t("models.detected_catalog", guess.matched)
+        : t("models.detected_heuristic")
+    );
+  }, [form.id, isEdit, t]);
+
+  // ── Catalog picker (add-mode only) ──
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const [pickerQuery, setPickerQuery] = useState("");
+  const pickerResults = useMemo(
+    () => searchCatalog(pickerQuery, 30),
+    [pickerQuery]
+  );
+  const applyPreset = (entry: ReturnType<typeof searchCatalog>[number]) => {
+    const preset = catalogToModel(entry);
+    // Apply all fields as if they were default (no touch-marking)
+    touchedRef.current = new Set();
+    setForm((prev) => ({ ...prev, ...preset }));
+    setPickerOpen(false);
+    setDetectHint(t("models.detected_catalog", entry.name ?? entry.patterns[0] ?? ""));
+  };
+
+  // Apply a quick template (Claude-style, GPT-style, Reasoning, Local small)
+  const applyTemplate = (kind: "claude" | "gpt" | "reasoning" | "small") => {
+    touchedRef.current = new Set();
+    setForm((prev) => {
+      switch (kind) {
+        case "claude":
+          return { ...prev, reasoning: true, input: ["text", "image"], contextWindow: 200_000, maxTokens: 8192 };
+        case "gpt":
+          return { ...prev, reasoning: false, input: ["text", "image"], contextWindow: 128_000, maxTokens: 16_384 };
+        case "reasoning":
+          return { ...prev, reasoning: true, input: ["text"], contextWindow: 128_000, maxTokens: 65_536 };
+        case "small":
+          return { ...prev, reasoning: false, input: ["text"], contextWindow: 32_768, maxTokens: 4096 };
+      }
+    });
+  };
+
+  const setId = (v: string) => { touch("id"); setForm((p) => ({ ...p, id: v })); };
+  const setName = (v: string) => { touch("name"); setForm((p) => ({ ...p, name: v })); };
+  const setContextWindow = (v: number) => { touch("contextWindow"); setForm((p) => ({ ...p, contextWindow: v })); };
+  const setMaxTokens = (v: number) => { touch("maxTokens"); setForm((p) => ({ ...p, maxTokens: v })); };
+  const setReasoning = (v: boolean) => { touch("reasoning"); setForm((p) => ({ ...p, reasoning: v })); };
+  const setImage = (v: boolean) => {
+    touch("input");
+    setForm((p) => ({ ...p, input: v ? ["text", "image"] : ["text"] }));
+  };
+  const setAudio = (v: boolean) => {
+    touch("input");
+    setForm((p) => {
+      const hasText = p.input?.includes("text") ?? true;
+      const hasImage = p.input?.includes("image") ?? false;
+      const next: ("text" | "image" | "audio")[] = [];
+      if (hasText) next.push("text");
+      if (hasImage) next.push("image");
+      if (v) next.push("audio");
+      return { ...p, input: next };
+    });
+  };
+  const setCostField = (field: keyof NonNullable<Model["cost"]>, v: number) => {
+    touch("cost");
+    setForm((p) => ({
+      ...p,
+      cost: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0, ...p.cost, [field]: v },
+    }));
+  };
 
   return (
     <div className="space-y-4">
+      {/* ── Catalog picker / templates (add-mode) ── */}
+      {!isEdit && (
+        <div className="rounded-lg border border-gray-800 bg-gray-900/40 p-3">
+          <div className="flex items-center justify-between gap-2 flex-wrap">
+            <button
+              type="button"
+              onClick={() => setPickerOpen((o) => !o)}
+              className="flex items-center gap-1.5 rounded-md border border-gray-700 bg-gray-800 px-3 py-1.5 text-xs text-gray-300 hover:bg-gray-700"
+            >
+              <Sparkles className="h-3.5 w-3.5 text-amber-400" />
+              {t("models.pick_preset")}
+            </button>
+            <div className="flex flex-wrap items-center gap-1.5">
+              <span className="text-[10px] uppercase tracking-wide text-gray-500 mr-1">{t("models.manual_fill")}:</span>
+              {([
+                ["claude", "models.preset_claude"],
+                ["gpt", "models.preset_gpt"],
+                ["reasoning", "models.preset_reasoning"],
+                ["small", "models.preset_small_local"],
+              ] as const).map(([kind, key]) => (
+                <button
+                  key={kind}
+                  type="button"
+                  onClick={() => applyTemplate(kind)}
+                  className="rounded-md border border-gray-700 bg-gray-800/70 px-2 py-1 text-[11px] text-gray-400 hover:bg-gray-700 hover:text-gray-200"
+                >
+                  {t(key)}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {pickerOpen && (
+            <div className="mt-3 space-y-2">
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
+                <input
+                  autoFocus
+                  type="text"
+                  value={pickerQuery}
+                  onChange={(e) => setPickerQuery(e.target.value)}
+                  placeholder={t("models.pick_preset_placeholder")}
+                  className="w-full rounded-lg border border-gray-700 bg-gray-800 py-2 pl-9 pr-3 text-sm text-white"
+                />
+              </div>
+              <div className="max-h-56 overflow-y-auto rounded-lg border border-gray-800">
+                {pickerResults.length === 0 && (
+                  <p className="px-3 py-4 text-center text-xs text-gray-500">—</p>
+                )}
+                {pickerResults.map((e) => (
+                  <button
+                    key={e.patterns[0]}
+                    type="button"
+                    onClick={() => applyPreset(e)}
+                    className="flex w-full items-center gap-3 border-b border-gray-800 px-3 py-2 text-left hover:bg-gray-800 last:border-0"
+                  >
+                    <span className="min-w-0 flex-1">
+                      <span className="block truncate text-sm text-gray-200">{e.name}</span>
+                      <span className="block truncate font-mono text-[11px] text-gray-500">{e.patterns[0]}</span>
+                    </span>
+                    {e.reasoning && <Brain className="h-3.5 w-3.5 shrink-0 text-purple-400" aria-label="reasoning" />}
+                    {e.input?.includes("image") && <ImageIcon className="h-3.5 w-3.5 shrink-0 text-blue-400" aria-label="vision" />}
+                    <span className="shrink-0 rounded border border-gray-700 bg-gray-800 px-1.5 py-0.5 text-[10px] font-mono text-gray-500">
+                      {formatTokens(e.contextWindow)}
+                    </span>
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* ── Core fields ── */}
       <div className="grid grid-cols-2 gap-4">
         <div>
           <label className="block text-xs font-medium text-gray-400">{t("models.model_id")} *</label>
@@ -1124,17 +1713,23 @@ function ModelForm({
             type="text"
             value={form.id ?? ""}
             disabled={isEdit}
-            onChange={(e) => setForm({ ...form, id: e.target.value })}
+            onChange={(e) => setId(e.target.value)}
             placeholder="my-model-id"
             className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white disabled:opacity-50"
           />
+          {!isEdit && detectHint && (
+            <p className="mt-1 flex items-center gap-1 text-[11px] text-emerald-400">
+              <Wand2 className="h-3 w-3" />
+              {detectHint}
+            </p>
+          )}
         </div>
         <div>
           <label className="block text-xs font-medium text-gray-400">{t("models.display_name")}</label>
           <input
             type="text"
             value={form.name ?? ""}
-            onChange={(e) => setForm({ ...form, name: e.target.value })}
+            onChange={(e) => setName(e.target.value)}
             placeholder="My Custom Model"
             className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
           />
@@ -1144,7 +1739,7 @@ function ModelForm({
           <input
             type="number"
             value={form.contextWindow ?? DEFAULT_CONTEXT_WINDOW}
-            onChange={(e) => setForm({ ...form, contextWindow: parseInt(e.target.value) || DEFAULT_CONTEXT_WINDOW })}
+            onChange={(e) => setContextWindow(parseInt(e.target.value) || DEFAULT_CONTEXT_WINDOW)}
             className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
           />
         </div>
@@ -1153,34 +1748,44 @@ function ModelForm({
           <input
             type="number"
             value={form.maxTokens ?? DEFAULT_MAX_TOKENS}
-            onChange={(e) => setForm({ ...form, maxTokens: parseInt(e.target.value) || DEFAULT_MAX_TOKENS })}
+            onChange={(e) => setMaxTokens(parseInt(e.target.value) || DEFAULT_MAX_TOKENS)}
             className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
           />
         </div>
       </div>
 
       {/* Capabilities */}
-      <div className="flex flex-wrap gap-3">
+      <div className="flex flex-wrap gap-4">
         <label className="flex items-center gap-2 text-sm text-gray-300">
           <input
             type="checkbox"
             checked={form.reasoning ?? false}
-            onChange={(e) => setForm({ ...form, reasoning: e.target.checked })}
+            onChange={(e) => setReasoning(e.target.checked)}
             className="rounded border-gray-600 bg-gray-800 text-blue-500"
           />
+          <Brain className="h-3.5 w-3.5 text-purple-400" />
           {t("models.reasoning")}
         </label>
         <label className="flex items-center gap-2 text-sm text-gray-300">
           <input
             type="checkbox"
             checked={form.input?.includes("image") ?? false}
-            onChange={(e) =>
-              setForm({ ...form, input: e.target.checked ? ["text", "image"] : ["text"] })
-            }
+            onChange={(e) => setImage(e.target.checked)}
             className="rounded border-gray-600 bg-gray-800 text-blue-500"
           />
+          <ImageIcon className="h-3.5 w-3.5 text-blue-400" />
           {t("models.image_input")}
         </label>
+        <label className="flex items-center gap-2 text-sm text-gray-300">
+          <input
+            type="checkbox"
+            checked={form.input?.includes("audio") ?? false}
+            onChange={(e) => setAudio(e.target.checked)}
+            className="rounded border-gray-600 bg-gray-800 text-blue-500"
+          />
+          <Mic className="h-3.5 w-3.5 text-emerald-400" />
+          {t("models.audio_input")}
+        </label>
       </div>
 
       {/* Cost */}
@@ -1199,22 +1804,17 @@ function ModelForm({
               type="number"
               step="0.01"
               value={form.cost?.[field] ?? 0}
-              onChange={(e) =>
-                setForm({
-                  ...form,
-                  cost: {
-                    input: 0, output: 0, cacheRead: 0, cacheWrite: 0,
-                    ...form.cost,
-                    [field]: parseFloat(e.target.value) || 0,
-                  },
-                })
-              }
+              onChange={(e) => setCostField(field, parseFloat(e.target.value) || 0)}
               className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
             />
           </div>
         ))}
       </div>
 
+      {!isEdit && (
+        <p className="text-[11px] text-gray-500">{t("models.catalog_hint")}</p>
+      )}
+
       <div className="flex justify-end gap-3 pt-2">
         <button onClick={onCancel} className="rounded-lg px-4 py-2 text-sm text-gray-400 hover:bg-gray-800">
           {t("models.cancel")}
@@ -1459,7 +2059,7 @@ function ImportProviderModal({
   const [fetching, setFetching] = useState(false);
   const [fetchErr, setFetchErr] = useState<string | null>(null);
   const [fetchDone, setFetchDone] = useState(false);
-  const [fetchedModels, setFetchedModels] = useState<{ id: string; contextWindow?: number; maxTokens?: number; vision?: boolean }[]>([]);
+  const [fetchedModels, setFetchedModels] = useState<FetchedModel[]>([]);
   const [fetchSel, setFetchSel] = useState<Set<string>>(new Set());
 
   // Re-parse on every paste/edit of the raw text; fields below stay editable
@@ -1518,7 +2118,7 @@ function ImportProviderModal({
       if (data.error) {
         setFetchErr(data.error);
       } else {
-        const models = (data.models ?? []) as { id: string; contextWindow?: number; maxTokens?: number; vision?: boolean }[];
+        const models = (data.models ?? []) as FetchedModel[];
         setFetchedModels(models);
         // Select everything by default so import is a single click
         setFetchSel(new Set(models.map((m) => m.id)));
@@ -1560,15 +2160,30 @@ function ImportProviderModal({
         maxTokens: DEFAULT_MAX_TOKENS,
         ...defaults,
       })),
-      // Fetched models carry real context/output limits when the endpoint provides them
-      ...selectedFetched.map((m) => ({
-        id: m.id,
-        name: m.id.split("/").pop() || m.id,
-        contextWindow: m.contextWindow ?? DEFAULT_CONTEXT_WINDOW,
-        maxTokens: m.maxTokens ?? DEFAULT_MAX_TOKENS,
-        ...defaults,
-        input: (m.vision ? ["text", "image"] : ["text"]) as Model["input"],
-      })),
+      // Fetched models carry real context/output/reasoning/cost when the endpoint provides them
+      ...selectedFetched.map((m) => {
+        const input: Model["input"] = ["text"];
+        if (m.vision) input.push("image");
+        if (m.audio) input.push("audio");
+        const cost = m.cost
+          ? {
+              input: m.cost.input ?? 0,
+              output: m.cost.output ?? 0,
+              cacheRead: m.cost.cacheRead ?? 0,
+              cacheWrite: m.cost.cacheWrite ?? 0,
+            }
+          : defaults.cost;
+        return {
+          ...defaults,
+          id: m.id,
+          name: m.name ?? (m.id.split("/").pop() || m.id),
+          reasoning: m.reasoning ?? false,
+          input,
+          contextWindow: m.contextWindow ?? DEFAULT_CONTEXT_WINDOW,
+          maxTokens: m.maxTokens ?? DEFAULT_MAX_TOKENS,
+          cost,
+        };
+      }),
     ];
     const newIds = newModels.map((m) => m.id);
 
@@ -1785,15 +2400,22 @@ function ImportProviderModal({
                       className="h-3.5 w-3.5 accent-blue-500"
                     />
                     <span className="truncate font-mono text-xs text-gray-200">{m.id}</span>
-                    <span className={`ml-auto flex shrink-0 items-center gap-1 rounded border px-1 py-px text-[10px] ${m.vision ? "border-blue-500/40 bg-blue-500/10 text-blue-400" : "border-gray-700 bg-gray-800 text-gray-500"}`}>
-                      {m.vision && <ImageIcon className="h-2.5 w-2.5" />}
-                      {m.vision ? t("providers_models.modality_vision") : t("providers_models.modality_text")}
-                    </span>
-                    {m.contextWindow && (
-                      <span className="shrink-0 text-[10px] text-gray-500">
-                        {formatTokens(m.contextWindow)}
+                    <span className="ml-auto flex shrink-0 items-center gap-1">
+                      {m.reasoning && <Brain className="h-3 w-3 text-purple-400" />}
+                      {m.audio && <Mic className="h-3 w-3 text-emerald-400" />}
+                      <span className={`flex items-center gap-1 rounded border px-1 py-px text-[10px] ${m.vision ? "border-blue-500/40 bg-blue-500/10 text-blue-400" : "border-gray-700 bg-gray-800 text-gray-500"}`}>
+                        {m.vision && <ImageIcon className="h-2.5 w-2.5" />}
+                        {m.vision ? t("providers_models.modality_vision") : t("providers_models.modality_text")}
                       </span>
-                    )}
+                      {m.contextWindow && (
+                        <span className="shrink-0 text-[10px] text-gray-500 font-mono">
+                          {formatTokens(m.contextWindow)}
+                        </span>
+                      )}
+                      {m.cost && (m.cost.input || m.cost.output) ? (
+                        <span className="shrink-0 text-[10px] text-gray-500 font-mono">${m.cost.input}/${m.cost.output}</span>
+                      ) : null}
+                    </span>
                   </label>
                 ))}
               </div>