@raingor/pi-web-switch 0.3.2 → 0.3.3

package/src/components/providers/ProvidersModelsPage.tsx

@@ -22,6 +22,9 @@ import {
   Loader2,
   Zap,
   ClipboardPaste,
+  Download,
+  SquareCheck,
+  Copy,
 } from "lucide-react";
 
 const API_TYPES: { value: ApiType; label: string }[] = [
@@ -43,6 +46,11 @@ function isValidHttpUrl(value: string): boolean {
   }
 }
 
+// Defaults for models without explicit limits: 256K context, 32K output
+// (32K matches the common max-output ceiling of current mainstream models)
+const DEFAULT_CONTEXT_WINDOW = 262144;
+const DEFAULT_MAX_TOKENS = 32768;
+
 // Sanitize to a config-safe id: lowercase letters, digits and hyphens only
 function sanitizeProviderId(name: string): string {
   return name
@@ -54,6 +62,21 @@ function sanitizeProviderId(name: string): string {
     .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.
+function deriveProviderId(name: string, baseUrl: string): string {
+  const fromName = sanitizeProviderId(name);
+  if (fromName || !name.trim()) return fromName;
+  try {
+    const host = new URL(baseUrl.trim()).hostname;
+    const skip = new Set(["api", "www", "app", "gateway", "open", "openapi", "platform"]);
+    const part = host.split(".").find((p) => p && !skip.has(p.toLowerCase()));
+    return sanitizeProviderId(part ?? "");
+  } catch {
+    return "";
+  }
+}
+
 // ─── Freeform Import Parser ───────────────────────────────
 // Recognizes pasted text like:
 //   tokenrouter baseurl：https://api.example.com/v1 key：sk-xxxx
@@ -98,7 +121,8 @@ function parseProviderImport(raw: string): ParsedImport {
       } else if (v.includes("/")) {
         pushModels(v);
       } else if (!out.name) {
-        out.name = v;
+        // A label line like "百灵：" keeps a trailing colon — strip it
+        out.name = v.replace(/[:：]\s*$/, "").trim();
       }
     }
   };
@@ -122,7 +146,7 @@ function parseProviderImport(raw: string): ParsedImport {
 
 export function ProvidersModelsPage() {
   const { t } = useTranslation();
-  const { allProviders, auth, removeCustomProvider } = useConfigStore();
+  const { allProviders, auth, modelsJson, removeCustomProvider } = useConfigStore();
 
   const builtinProviders = allProviders.filter((p) => p.type === "builtin");
   const customProviders = allProviders.filter((p) => p.type === "custom");
@@ -165,6 +189,22 @@ export function ProvidersModelsPage() {
     }
   };
 
+  const handleDuplicateProvider = async (id: string) => {
+    const existing = modelsJson?.providers[id];
+    if (!existing) return;
+    const suffix = "-copy";
+    const newId = sanitizeProviderId(id + suffix);
+    // Copy config but clear apiKey, authHeader, and models
+    const cfg: CustomProviderConfig = {
+      baseUrl: existing.baseUrl,
+      api: existing.api,
+      headers: existing.headers,
+      modelOverrides: existing.modelOverrides,
+    };
+    const ok = await useConfigStore.getState().addCustomProvider(newId, cfg);
+    if (ok) setSelectedId(newId);
+  };
+
   return (
     <div className="space-y-6">
       <div>
@@ -250,6 +290,7 @@ export function ProvidersModelsPage() {
               key={`${selected.id}:${importBump}`}
               provider={selected}
               onDelete={() => setDeleteConfirm(selected.id)}
+              onDuplicate={() => handleDuplicateProvider(selected.id)}
             />
           ) : (
             <div className="flex h-40 items-center justify-center text-sm text-gray-500">
@@ -417,7 +458,7 @@ function TestConnectionButton({ baseUrl, apiKey }: { baseUrl: string; apiKey?: s
 
 // ─── Provider Detail Panel ────────────────────────────────
 
-function ProviderDetail({ provider, onDelete }: { provider: Provider; onDelete: () => void }) {
+function ProviderDetail({ provider, onDelete, onDuplicate }: { provider: Provider; onDelete: () => void; onDuplicate: () => void }) {
   const { t } = useTranslation();
   const {
     auth,
@@ -436,6 +477,7 @@ function ProviderDetail({ provider, onDelete }: { provider: Provider; onDelete:
   const isCustom = provider.type === "custom";
   const savedKey = provider.apiKey ?? auth?.[provider.id]?.key ?? "";
 
+  const [providerName, setProviderName] = useState(provider.name ?? "");
   const [baseUrl, setBaseUrl] = useState(provider.baseUrl ?? "");
   const [api, setApi] = useState<ApiType>(provider.api ?? "openai-completions");
   const [apiKey, setApiKey] = useState(savedKey);
@@ -446,10 +488,113 @@ function ProviderDetail({ provider, onDelete }: { provider: Provider; onDelete:
   const [modelQuery, setModelQuery] = useState("");
   const [saveState, setSaveState] = useState<"idle" | "saving" | "saved" | "error">("idle");
 
+  // ─── 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 [fetchSelected, setFetchSelected] = useState<Set<string>>(new Set());
+  const [fetchImported, setFetchImported] = useState<number | null>(null);
+
+  // ─── Per-Model Test State ───
+  const [modelTests, setModelTests] = useState<Map<string, TestState>>(new Map());
+  const getModelTest = (modelId: string) => modelTests.get(modelId) ?? { status: "idle" };
+
+  const existingModelIds = new Set(provider.models.map((m) => m.id));
+  const availableModels = fetchedModels.filter((m) => !existingModelIds.has(m.id));
+  const isSelected = (id: string) => fetchSelected.has(id);
+  const allSelected = availableModels.length > 0 && availableModels.every((m) => isSelected(m.id));
+
+  const toggleSelect = (id: string) => {
+    setFetchSelected((prev) => {
+      const next = new Set(prev);
+      next.has(id) ? next.delete(id) : next.add(id);
+      return next;
+    });
+  };
+  const toggleAll = () => {
+    setFetchSelected((prev) => {
+      if (availableModels.every((m) => isSelected(m.id))) return new Set();
+      return new Set(availableModels.map((m) => m.id));
+    });
+  };
+
+  const fetchModels = async () => {
+    if (!baseUrl.trim() || !isValidHttpUrl(baseUrl.trim())) return;
+    setFetchOpen(true);
+    setFetching(true);
+    setFetchError(null);
+    setFetchedModels([]);
+    setFetchSelected(new Set());
+    setFetchImported(null);
+    try {
+      const res = await fetch("/api/pi/provider-models", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ baseUrl: baseUrl.trim(), apiKey, providerId: provider.id }),
+      });
+      const data = await res.json();
+      if (data.error) setFetchError(data.error);
+      else setFetchedModels(data.models ?? []);
+    } catch {
+      setFetchError("network error");
+    } finally {
+      setFetching(false);
+    }
+  };
+
+  const handleImportFetched = async () => {
+    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);
+    });
+    // Enable in a single batched write — per-model addEnabledModel calls race
+    // on the same settings snapshot and overwrite each other.
+    const list = settings?.enabledModels ?? [];
+    const refs = selected.map((m) => `${provider.id}/${m.id}`);
+    await updateSettings({ enabledModels: Array.from(new Set([...list, ...refs])) });
+    setFetchImported(selected.length);
+    setTimeout(() => {
+      setFetchOpen(false); setFetchedModels([]); setFetchSelected(new Set());
+      setFetchImported(null); setFetchError(null);
+    }, 1500);
+  };
+
+  const handleTestModel = async (m: Model) => {
+    const modelId = m.id;
+    setModelTests((prev) => {
+      const next = new Map(prev);
+      next.set(modelId, { status: "testing" });
+      return next;
+    });
+    try {
+      const res = await fetch("/api/pi/model-test", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ baseUrl: baseUrl.trim(), modelId, apiKey, apiType: api ?? undefined }),
+      });
+      const data = await res.json();
+      setModelTests((prev) => {
+        const next = new Map(prev);
+        next.set(modelId, data.success
+          ? { status: "ok" as const, latencyMs: data.latencyMs ?? 0 }
+          : { status: "fail" as const, message: data.message ?? "unknown" });
+        return next;
+      });
+    } catch {
+      setModelTests((prev) => {
+        const next = new Map(prev);
+        next.set(modelId, { status: "fail" as const, message: "network error" });
+        return next;
+      });
+    }
+  };
+
   const urlInvalid = isCustom && baseUrl.trim() !== "" && !isValidHttpUrl(baseUrl.trim());
 
   const dirty =
-    (isCustom && (baseUrl !== (provider.baseUrl ?? "") || api !== (provider.api ?? "openai-completions"))) ||
+    (isCustom && (providerName !== (provider.name ?? "") || baseUrl !== (provider.baseUrl ?? "") || api !== (provider.api ?? "openai-completions"))) ||
     apiKey !== savedKey;
 
   const handleSave = async () => {
@@ -457,6 +602,7 @@ function ProviderDetail({ provider, onDelete }: { provider: Provider; onDelete:
     let ok = true;
     if (isCustom) {
       ok = await updateCustomProvider(provider.id, {
+        name: providerName || undefined,
         baseUrl: baseUrl || undefined,
         api,
         apiKey: apiKey || undefined,
@@ -506,6 +652,15 @@ function ProviderDetail({ provider, onDelete }: { provider: Provider; onDelete:
           {isCustom ? t("providers.custom") : t("providers.builtin")}
         </Badge>
         {savedKey && <Badge variant="success">{t("providers.configured")}</Badge>}
+        {isCustom && (
+          <button
+            onClick={onDuplicate}
+            className="rounded-lg p-2 text-gray-500 transition-colors hover:bg-blue-500/10 hover:text-blue-400"
+            title={t("providers.duplicate_provider")}
+          >
+            <Copy className="h-4 w-4" />
+          </button>
+        )}
         {isCustom && (
           <button
             onClick={onDelete}
@@ -517,6 +672,20 @@ function ProviderDetail({ provider, onDelete }: { provider: Provider; onDelete:
         )}
       </div>
 
+
+      {/* Name (custom only) */}
+      {isCustom && (
+        <div>
+          <label className="block text-sm text-gray-400">{t("providers_models.name")}</label>
+          <input
+            type="text"
+            value={providerName}
+            onChange={(e) => setProviderName(e.target.value)}
+            placeholder="My Provider"
+            className="mt-1.5 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2.5 text-sm text-white"
+          />
+        </div>
+      )}
       {/* Base URL */}
       <div>
         <label className="block text-sm text-gray-400">{t("providers.base_url")}</label>
@@ -684,6 +853,43 @@ function ProviderDetail({ provider, onDelete }: { provider: Provider; onDelete:
               >
                 {isEnabled(m.id) ? t("models.enabled") : t("models.disabled")}
               </button>
+              {/* Test model */}
+              {(() => {
+                const test = getModelTest(m.id);
+                if (test.status === "testing") return null;
+                return (
+                  <button
+                    onClick={() => handleTestModel(m)}
+                    className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-700 hover:text-gray-200"
+                    title={t("models.test_model")}
+                  >
+                    <Zap className="h-3.5 w-3.5" />
+                  </button>
+                );
+              })()}
+              {/* Model test result */}
+              {(() => {
+                const test = getModelTest(m.id);
+                if (test.status === "ok") return (
+                  <span className="flex items-center gap-1 text-xs text-emerald-400">
+                    <Check className="h-3.5 w-3.5" />
+                    {t("providers_models.test_ok", String(test.latencyMs))}
+                  </span>
+                );
+                if (test.status === "fail") return (
+                  <span className="flex items-center gap-1 text-xs text-red-400">
+                    <X className="h-3.5 w-3.5" />
+                    {t("providers_models.test_fail", test.message)}
+                  </span>
+                );
+                if (test.status === "testing") return (
+                  <span className="flex items-center gap-1 text-xs text-gray-400">
+                    <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                    {t("providers_models.testing")}
+                  </span>
+                );
+                return null;
+              })()}
               <button
                 onClick={() => setEditModel(m)}
                 className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-700 hover:text-gray-200"
@@ -701,15 +907,109 @@ function ProviderDetail({ provider, onDelete }: { provider: Provider; onDelete:
             </div>
           ))}
         </div>
-        <button
-          onClick={() => setShowAddModel(true)}
-          className="mt-3 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 className="flex flex-wrap gap-2 mt-3">
+          <button
+            onClick={fetchModels}
+            disabled={!baseUrl.trim() || !isValidHttpUrl(baseUrl.trim()) || fetching}
+            title={
+              !baseUrl.trim() || !isValidHttpUrl(baseUrl.trim())
+                ? t("providers_models.fetch_no_endpoint")
+                : t("providers_models.fetch_models")
+            }
+            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 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {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>
 
+
+      {/* Fetch Models Modal */}
+      <Modal
+        open={fetchOpen}
+        onClose={() => { setFetchOpen(false); setFetchedModels([]); setFetchSelected(new Set()); setFetchError(null); setFetchImported(null); }}
+        title={t("providers_models.fetch_title")}
+        size="lg"
+      >
+        <div className="space-y-4">
+          <p className="text-sm text-gray-400">{t("providers_models.fetch_desc", provider.name)}</p>
+          {fetching && (
+            <div className="flex items-center gap-2 py-6 text-gray-400">
+              <Loader2 className="h-5 w-5 animate-spin" />
+              <span>{t("providers_models.fetching")}</span>
+            </div>
+          )}
+          {fetchError && !fetching && (
+            <div className="flex items-start gap-3 rounded-lg border border-red-500/30 bg-red-500/10 p-4">
+              <X className="h-5 w-5 shrink-0 text-red-400 mt-0.5" />
+              <p className="text-sm text-red-300">{t("providers_models.fetch_error", fetchError)}</p>
+            </div>
+          )}
+          {!fetching && !fetchError && availableModels.length === 0 && fetchedModels.length === 0 && (
+            <p className="text-sm text-gray-500">{t("providers_models.fetch_empty")}</p>
+          )}
+          {!fetching && !fetchError && availableModels.length > 0 && (
+            <>
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-gray-400">
+                  {t("providers_models.selected_count", String(fetchSelected.size), String(availableModels.length))}
+                </span>
+                <button onClick={toggleAll} className="rounded-md px-2 py-1 text-xs">
+                  {allSelected
+                    ? <span className="text-amber-400">{t("providers_models.deselect_all")}</span>
+                    : <span className="text-emerald-400">{t("providers_models.select_all")}</span>
+                  }
+                </button>
+              </div>
+              <div className="max-h-72 overflow-y-auto space-y-1.5 rounded-lg border border-gray-800 p-3">
+                {availableModels.map((m) => (
+                  <label key={m.id} className="flex items-center gap-3 rounded-lg px-2 py-2 transition-colors hover:bg-gray-800 cursor-pointer">
+                    <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded border"
+                      style={{ backgroundColor: isSelected(m.id) ? "#3b82f6" : "transparent", borderColor: isSelected(m.id) ? "#3b82f6" : "#4b5563" }}
+                    >
+                      {isSelected(m.id) && <SquareCheck className="h-4 w-4 text-white" />}
+                    </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.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>}
+                  </label>
+                ))}
+              </div>
+            </>
+          )}
+          <div className="flex items-center justify-end gap-3 pt-1">
+            {fetchImported !== null && (
+              <span className="flex items-center gap-1 text-sm text-emerald-400">
+                <Check className="h-4 w-4" />
+                {t("providers_models.import_done", String(fetchImported))}
+              </span>
+            )}
+            <button onClick={() => { setFetchOpen(false); setFetchedModels([]); setFetchSelected(new Set()); setFetchError(null); setFetchImported(null); }}
+              className="rounded-lg px-4 py-2 text-sm text-gray-400 hover:bg-gray-800">
+              {t("models.cancel")}
+            </button>
+            <button onClick={handleImportFetched} disabled={fetching || fetchSelected.size === 0}
+              className="flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors disabled:opacity-50"
+              style={{ backgroundColor: "#3b82f6", color: "#ffffff" }}>
+              {t("providers_models.confirm_import")}
+            </button>
+          </div>
+        </div>
+      </Modal>
+
       {/* Edit Model Modal */}
       <Modal
         open={!!editModel}
@@ -808,8 +1108,8 @@ function ModelForm({
           name: "",
           reasoning: false,
           input: ["text"],
-          contextWindow: 128000,
-          maxTokens: 16384,
+          contextWindow: DEFAULT_CONTEXT_WINDOW,
+          maxTokens: DEFAULT_MAX_TOKENS,
           cost: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 },
         }
   );
@@ -843,8 +1143,8 @@ function ModelForm({
           <label className="block text-xs font-medium text-gray-400">{t("models.context_window")}</label>
           <input
             type="number"
-            value={form.contextWindow ?? 128000}
-            onChange={(e) => setForm({ ...form, contextWindow: parseInt(e.target.value) || 128000 })}
+            value={form.contextWindow ?? DEFAULT_CONTEXT_WINDOW}
+            onChange={(e) => setForm({ ...form, contextWindow: 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>
@@ -852,8 +1152,8 @@ function ModelForm({
           <label className="block text-xs font-medium text-gray-400">{t("models.max_tokens")}</label>
           <input
             type="number"
-            value={form.maxTokens ?? 16384}
-            onChange={(e) => setForm({ ...form, maxTokens: parseInt(e.target.value) || 16384 })}
+            value={form.maxTokens ?? DEFAULT_MAX_TOKENS}
+            onChange={(e) => setForm({ ...form, maxTokens: 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>
@@ -952,7 +1252,7 @@ function AddProviderForm({
   const [submitting, setSubmitting] = useState(false);
   const [submitError, setSubmitError] = useState(false);
 
-  const id = sanitizeProviderId(name);
+  const id = deriveProviderId(name, baseUrl);
   const idExists = !!id && allProviders.some((p) => p.id === id);
   const urlInvalid = baseUrl.trim() !== "" && !isValidHttpUrl(baseUrl.trim());
 
@@ -961,6 +1261,7 @@ function AddProviderForm({
     setSubmitting(true);
     setSubmitError(false);
     const ok = await onSubmit(id, {
+      name: name.trim() || undefined,
       baseUrl,
       api,
       apiKey: apiKey || undefined,
@@ -996,6 +1297,8 @@ function AddProviderForm({
           <p className="mt-1 text-xs text-red-400">{t("providers_models.id_exists", id)}</p>
         ) : id ? (
           <p className="mt-1 text-xs text-gray-500">{t("providers_models.id_preview", id)}</p>
+        ) : name.trim() ? (
+          <p className="mt-1 text-xs text-red-400">{t("providers_models.id_invalid")}</p>
         ) : null}
       </div>
 
@@ -1152,6 +1455,13 @@ function ImportProviderModal({
   const [submitting, setSubmitting] = useState(false);
   const [submitError, setSubmitError] = useState(false);
 
+  // ─── Fetch models from the endpoint (one-shot import) ───
+  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 [fetchSel, setFetchSel] = useState<Set<string>>(new Set());
+
   // Re-parse on every paste/edit of the raw text; fields below stay editable
   const handleText = (value: string) => {
     setText(value);
@@ -1171,9 +1481,14 @@ function ImportProviderModal({
     setModelIds([]);
     setSubmitting(false);
     setSubmitError(false);
+    setFetching(false);
+    setFetchErr(null);
+    setFetchDone(false);
+    setFetchedModels([]);
+    setFetchSel(new Set());
   };
 
-  const id = sanitizeProviderId(name);
+  const id = deriveProviderId(name, baseUrl);
   const existing = allProviders.find((p) => p.id === id);
   const builtinConflict = existing?.type === "builtin";
   const mergeTarget = existing?.type === "custom" ? existing : null;
@@ -1183,19 +1498,79 @@ function ImportProviderModal({
   const canSubmit =
     !!id && (!!baseUrl.trim() || !!mergeTarget) && !urlInvalid && !builtinConflict && !submitting;
 
+  // Fetched models not already covered by the parsed model chips
+  const availableFetched = fetchedModels.filter((m) => !modelIds.includes(m.id));
+  const allFetchedSelected =
+    availableFetched.length > 0 && availableFetched.every((m) => fetchSel.has(m.id));
+
+  const handleFetchModels = async () => {
+    if (!isValidHttpUrl(baseUrl.trim()) || fetching) return;
+    setFetching(true);
+    setFetchErr(null);
+    setFetchDone(false);
+    try {
+      const res = await fetch("/api/pi/provider-models", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ baseUrl: baseUrl.trim(), apiKey, providerId: id || undefined }),
+      });
+      const data = await res.json();
+      if (data.error) {
+        setFetchErr(data.error);
+      } else {
+        const models = (data.models ?? []) as { id: string; contextWindow?: number; maxTokens?: number; vision?: boolean }[];
+        setFetchedModels(models);
+        // Select everything by default so import is a single click
+        setFetchSel(new Set(models.map((m) => m.id)));
+      }
+    } catch {
+      setFetchErr("network error");
+    } finally {
+      setFetching(false);
+      setFetchDone(true);
+    }
+  };
+
+  const toggleFetched = (mid: string) => {
+    setFetchSel((prev) => {
+      const next = new Set(prev);
+      next.has(mid) ? next.delete(mid) : next.add(mid);
+      return next;
+    });
+  };
+  const toggleAllFetched = () => {
+    setFetchSel(allFetchedSelected ? new Set() : new Set(availableFetched.map((m) => m.id)));
+  };
+
   const handleImport = async () => {
     if (!canSubmit) return;
     setSubmitting(true);
     setSubmitError(false);
     const store = useConfigStore.getState();
-    const newModels: Model[] = modelIds.map((mid) => ({
-      id: mid,
-      name: mid.split("/").pop() || mid,
-      input: ["text"],
-      contextWindow: 128000,
-      maxTokens: 16384,
+    const defaults = {
+      input: ["text"] as Model["input"],
       cost: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 },
-    }));
+    };
+    const selectedFetched = availableFetched.filter((m) => fetchSel.has(m.id));
+    const newModels: Model[] = [
+      ...modelIds.map((mid) => ({
+        id: mid,
+        name: mid.split("/").pop() || mid,
+        contextWindow: DEFAULT_CONTEXT_WINDOW,
+        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"],
+      })),
+    ];
+    const newIds = newModels.map((m) => m.id);
 
     let ok: boolean;
     if (mergeTarget) {
@@ -1213,6 +1588,7 @@ function ImportProviderModal({
       });
     } else {
       ok = await store.addCustomProvider(id, {
+        name: name.trim() || undefined,
         baseUrl: baseUrl.trim(),
         api,
         apiKey: apiKey || undefined,
@@ -1221,8 +1597,8 @@ function ImportProviderModal({
     }
 
     // Imported models are enabled by default (settings.enabledModels refs)
-    if (ok && modelIds.length > 0) {
-      const refs = modelIds.map((m) => `${id}/${m}`);
+    if (ok && newIds.length > 0) {
+      const refs = newIds.map((m) => `${id}/${m}`);
       const list = store.settings?.enabledModels ?? [];
       await store.updateSettings({ enabledModels: Array.from(new Set([...list, ...refs])) });
     }
@@ -1284,6 +1660,8 @@ function ImportProviderModal({
               </p>
             ) : id ? (
               <p className="mt-1 text-xs text-gray-500">{t("providers_models.id_preview", id)}</p>
+            ) : name.trim() ? (
+              <p className="mt-1 text-xs text-red-400">{t("providers_models.id_invalid")}</p>
             ) : null}
           </div>
           <div>
@@ -1358,6 +1736,71 @@ function ImportProviderModal({
           </div>
         )}
 
+        {/* Fetch models from the endpoint — one-shot: fetch, tick, import */}
+        <div>
+          <div className="flex flex-wrap items-center gap-3">
+            <button
+              onClick={handleFetchModels}
+              disabled={!isValidHttpUrl(baseUrl.trim()) || fetching}
+              title={
+                !isValidHttpUrl(baseUrl.trim())
+                  ? t("providers_models.fetch_no_endpoint")
+                  : t("providers_models.fetch_models")
+              }
+              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 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              {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>
+            {fetchErr && (
+              <span className="text-xs text-red-400">{t("providers_models.fetch_error", fetchErr)}</span>
+            )}
+            {fetchDone && !fetchErr && fetchedModels.length === 0 && (
+              <span className="text-xs text-amber-400">{t("providers_models.fetch_empty")}</span>
+            )}
+          </div>
+          {availableFetched.length > 0 && (
+            <div className="mt-2 rounded-lg border border-gray-700">
+              <div className="flex items-center justify-between border-b border-gray-700 px-3 py-2">
+                <span className="text-xs text-gray-400">
+                  {t("providers_models.selected_count", String(fetchSel.size), String(availableFetched.length))}
+                </span>
+                <button
+                  onClick={toggleAllFetched}
+                  className="text-xs text-blue-400 hover:text-blue-300"
+                >
+                  {allFetchedSelected ? t("providers_models.deselect_all") : t("providers_models.select_all")}
+                </button>
+              </div>
+              <div className="max-h-44 overflow-y-auto p-1.5">
+                {availableFetched.map((m) => (
+                  <label
+                    key={m.id}
+                    className="flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-1.5 hover:bg-gray-800"
+                  >
+                    <input
+                      type="checkbox"
+                      checked={fetchSel.has(m.id)}
+                      onChange={() => toggleFetched(m.id)}
+                      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>
+                    )}
+                  </label>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+
         <div className="flex items-center justify-end gap-3 pt-1">
           {submitError && (
             <span className="flex items-center gap-1 text-sm text-red-400">