npm - @raingor/pi-web-switch - Versions diffs - 0.7.1 → 0.8.2 - Mend

@raingor/pi-web-switch 0.7.1 → 0.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/dist/index.html +2 -2
package/package.json +1 -1
package/server/pi-reader.ts +77 -6
package/src/components/providers/ProvidersModelsPage.tsx +266 -108
package/src/components/settings/PackageBrowser.tsx +222 -0
package/src/components/settings/SettingsPage.tsx +120 -60
package/src/components/speedtest/ModelSpeedTestPage.tsx +138 -4
package/src/components/subagents/SubagentsPage.tsx +30 -21
package/src/data/changelog.ts +15 -0
package/src/data/recommended-packages.ts +20 -0
package/src/index.css +1 -2
package/src/lib/translations/en.ts +52 -8
package/src/lib/translations/ja.ts +52 -8
package/src/lib/translations/zh-CN.ts +52 -8
package/src/lib/translations/zh-TW.ts +52 -8
package/src/store/config-store.ts +3 -1
package/src/types/index.ts +14 -0
package/vite.config.ts +11 -0

package/dist/index.html CHANGED Viewed

@@ -9,8 +9,8 @@
     <link rel="manifest" href="./manifest.webmanifest" />
     <meta name="theme-color" content="#05090d" />
     <meta name="description" content="Web UI for pi coding agent — configuration management, session browser, and usage dashboard" />
-    <script type="module" crossorigin src="./assets/main-Bs37wZvZ.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/main-DTnbncES.css">
+    <script type="module" crossorigin src="./assets/main-C-vDjj0-.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/main-Cqzld-td.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@raingor/pi-web-switch",
   "private": false,
-  "version": "0.7.1",
+  "version": "0.8.2",
   "type": "module",
   "main": "dist/index.html",
   "description": "Web UI for pi coding agent — live configuration management, session browser, and memory viewer",

package/server/pi-reader.ts CHANGED Viewed

@@ -1954,8 +1954,8 @@ export interface UpdateCheckResult {
   checkedAt: number;
 }
-/** Discover the installed pi version: PI_BINARY env → PATH → known locations. */
-function getPiVersion(): string | null {
+/** Discover the pi executable: PI_BINARY env → PATH → known global-install locations. */
+function resolvePiBinary(): { bin: string; version: string } | null {
   const home = homedir();
   const candidates = [
     process.env.PI_BINARY,
@@ -1971,7 +1971,7 @@ function getPiVersion(): string | null {
       const out = spawnSync(bin, ["--version"], { encoding: "utf8", timeout: 15000 });
       if (out.status === 0) {
         const v = out.stdout.trim();
-        if (v) return v;
+        if (v) return { bin, version: v };
       }
     } catch {
       // try next candidate
@@ -1980,6 +1980,11 @@ function getPiVersion(): string | null {
   return null;
 }
+/** Installed pi version, or null when no pi executable could be found. */
+function getPiVersion(): string | null {
+  return resolvePiBinary()?.version ?? null;
+}
 function readJsonFile<T>(filePath: string): T | null {
   try {
     return JSON.parse(readFileSync(filePath, "utf-8")) as T;
@@ -2131,15 +2136,37 @@ export interface ApplyUpdateResult {
 }
 /**
- * One-click update: npm install <name>@latest inside ~/.pi/agent/npm.
- * Only packages already installed there are accepted (pi core is excluded —
- * its install method is unknown, so it must be updated via its installer).
+ * Update pi core itself via `pi update`.
+ *
+ * pi core is not installed under ~/.pi/agent/npm, so `npm install` there would
+ * be wrong. `pi update` with no target updates pi only — deliberately without
+ * `--extensions`, which would instead update the packages and leave pi alone.
+ */
+function applyPiCoreUpdate(): ApplyUpdateResult {
+  const name = PI_CORE_PACKAGE;
+  const pi = resolvePiBinary();
+  if (!pi) return { name, success: false, message: "pi executable not found" };
+  try {
+    const out = spawnSync(pi.bin, ["update"], { encoding: "utf8", timeout: 300000 });
+    if (out.status === 0) return { name, success: true };
+    const stderr = (out.stderr || out.stdout || "").trim().split("\n").slice(-3).join(" ");
+    return { name, success: false, message: stderr || `pi update exited with ${out.status}` };
+  } catch (e) {
+    return { name, success: false, message: String(e) };
+  }
+}
+/**
+ * One-click update. Extensions use `npm install <name>@latest` inside
+ * ~/.pi/agent/npm; pi core is routed to `pi update` instead, since it lives
+ * outside that directory and has its own updater.
  */
 export function applyExtensionUpdates(names: string[]): ApplyUpdateResult[] {
   const dir = join(PI_DIR, "npm");
   const installed = new Set(listInstalledExtensions().map((e) => e.name));
   return names.map((name) => {
+    if (name === PI_CORE_PACKAGE) return applyPiCoreUpdate();
     if (!installed.has(name)) {
       return { name, success: false, message: "not an installed extension" };
     }
@@ -2754,6 +2781,50 @@ export function readSubagents(): SubagentsData {
   };
 }
+// ─── Package Search (npm registry) ─────────────────────────
+// pi packages are npm packages tagged for pi. The pi.dev/packages catalog is
+// SSR-only (no public JSON API — /api/packages returns 501), so we query the
+// public npm registry search endpoint directly, which supports fuzzy text and
+// returns name/description/downloads.
+export interface PackageSearchResult {
+  name: string;
+  description: string;
+  version: string;
+  downloads: number;
+  link: string;
+}
+export async function searchPackages(query: string): Promise<PackageSearchResult[]> {
+  const q = query.trim();
+  // Bias the search toward pi extensions. When the user types nothing we still
+  // surface the most popular pi packages.
+  const text = q ? `${q} pi` : "pi-extension";
+  const url = `https://registry.npmjs.org/-/v1/search?text=${encodeURIComponent(text)}&size=40`;
+  try {
+    const res = await fetchExternal(url, { signal: AbortSignal.timeout(REGISTRY_TIMEOUT_MS) });
+    if (!res.ok) return [];
+    const data = (await res.json()) as {
+      objects?: { package?: { name?: string; description?: string; version?: string; links?: { npm?: string } }; searchScore?: number }[];
+    };
+    const rows = (data.objects ?? [])
+      .map((o) => o.package)
+      .filter((p): p is NonNullable<typeof p> => !!p?.name)
+      // Keep pi-related packages only (name or description mentions pi).
+      .filter((p) => /(^|[@/-])pi([-/]|$)|pi coding|pi extension|pi agent/i.test(`${p.name} ${p.description ?? ""}`))
+      .map((p) => ({
+        name: p.name!,
+        description: p.description ?? "",
+        version: p.version ?? "",
+        downloads: 0,
+        link: p.links?.npm ?? `https://www.npmjs.com/package/${p.name}`,
+      }));
+    return rows;
+  } catch {
+    return [];
+  }
+}
 const AGENT_NAME_RE = /^[\w.-]+\.md$/;
 /**

package/src/components/providers/ProvidersModelsPage.tsx CHANGED Viewed

@@ -5,7 +5,7 @@ import { Badge } from "@/components/ui/Badge";
 import { Modal } from "@/components/ui/Modal";
 import { formatTokens, cn, formatCost, USD_TO_CNY } from "@/lib/utils";
 import { useCurrency } from "@/lib/currency";
-import type { ApiType, CustomProviderConfig, Model, Provider } from "@/types";
+import type { ApiType, CustomProviderConfig, Model, Provider, ProviderApiKey } from "@/types";
 import { MODEL_CATALOG, searchCatalog, catalogToModel, catalogEntryId, findCatalogEntry, guessModelMeta } from "@/data/model-catalog";
 import {
   Plus,
@@ -106,6 +106,38 @@ function deriveProviderId(name: string, baseUrl: string): string {
   }
 }
+// ─── API Key Pool ─────────────────────────────────────────
+// pi only reads a provider's single `apiKey`, so the extra keys live alongside
+// it in models.json as `apiKeys` + `activeKeyId`, and `apiKey` is kept in sync
+// with whichever entry is active. Providers saved before this feature existed
+// only have `apiKey`, so they get adopted into a one-entry pool on read.
+function newKeyId(): string {
+  return `k${Date.now().toString(36)}${Math.random().toString(36).slice(2, 6)}`;
+}
+function normalizeKeyPool(
+  pool: ProviderApiKey[] | undefined,
+  legacyKey: string | undefined
+): ProviderApiKey[] {
+  const list = (pool ?? []).filter((k) => k && typeof k.key === "string" && k.key !== "");
+  if (list.length > 0) {
+    // Adopt a key that was edited directly in models.json outside the pool.
+    if (legacyKey && !list.some((k) => k.key === legacyKey)) {
+      return [...list, { id: newKeyId(), key: legacyKey }];
+    }
+    return list;
+  }
+  return legacyKey ? [{ id: newKeyId(), key: legacyKey }] : [];
+}
+// Mask a key for display: keep enough on both ends to tell keys apart.
+function maskKey(key: string): string {
+  if (key.startsWith("$")) return key; // env var reference — not a secret
+  if (key.length <= 12) return `${key.slice(0, 3)}…`;
+  return `${key.slice(0, 7)}…${key.slice(-4)}`;
+}
 // ─── Freeform Import Parser ───────────────────────────────
 // Recognizes pasted text like:
 //   tokenrouter baseurl：https://api.example.com/v1 key：sk-xxxx
@@ -601,16 +633,28 @@ function ProviderDetail({ provider, onDelete, onDuplicate, onRenamed }: { provid
   const isCustom = provider.type === "custom";
   const savedKey = provider.apiKey ?? auth?.[provider.id]?.key ?? "";
+  // Custom providers keep a pool of keys in models.json (`apiKeys`) plus an
+  // `activeKeyId` pointer; `apiKey` always mirrors the active one because that
+  // is the only field pi itself reads.
+  const savedKeys = useMemo(
+    () => normalizeKeyPool(provider.apiKeys, provider.apiKey),
+    [provider.apiKeys, provider.apiKey]
+  );
+  const savedActiveKeyId =
+    savedKeys.find((k) => k.id === provider.activeKeyId)?.id ?? savedKeys[0]?.id ?? "";
   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);
+  const [keys, setKeys] = useState<ProviderApiKey[]>(savedKeys);
+  const [activeKeyId, setActiveKeyId] = useState(savedActiveKeyId);
+  const [newKeyValue, setNewKeyValue] = useState("");
+  const [revealedKeys, setRevealedKeys] = useState<Set<string>>(new Set());
   const [showKey, setShowKey] = useState(false);
   const [editModel, setEditModel] = useState<Model | null>(null);
   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
   );
@@ -618,6 +662,65 @@ function ProviderDetail({ provider, onDelete, onDuplicate, onRenamed }: { provid
     provider.compat?.supportsFinishReason ?? true
   );
   const [saveState, setSaveState] = useState<"idle" | "saving" | "saved" | "error">("idle");
+  const [keyError, setKeyError] = useState<string | null>(null);
+  // Key actually used for outbound calls (test connection, fetch models).
+  const activeKey = keys.find((k) => k.id === activeKeyId)?.key ?? "";
+  const effectiveKey = isCustom ? activeKey : apiKey;
+  // Persist the pool immediately: `apiKey` mirrors the active entry so pi keeps
+  // working, and switching keys should not need a separate Save click.
+  const persistKeys = async (nextKeys: ProviderApiKey[], nextActiveId: string) => {
+    const active = nextKeys.find((k) => k.id === nextActiveId) ?? nextKeys[0];
+    setKeys(nextKeys);
+    setActiveKeyId(active?.id ?? "");
+    setKeyError(null);
+    const ok = await updateCustomProvider(provider.id, {
+      apiKeys: nextKeys.length > 0 ? nextKeys : undefined,
+      activeKeyId: active?.id,
+      apiKey: active?.key,
+    });
+    if (!ok) setKeyError(t("providers_models.save_failed"));
+    return ok;
+  };
+  const handleAddKey = async () => {
+    const value = newKeyValue.trim();
+    if (!value) return;
+    if (keys.some((k) => k.key === value)) {
+      setKeyError(t("providers_models.api_key_duplicate"));
+      return;
+    }
+    const entry: ProviderApiKey = { id: newKeyId(), key: value };
+    // First key added becomes active automatically.
+    const nextActive = keys.length === 0 ? entry.id : activeKeyId;
+    const ok = await persistKeys([...keys, entry], nextActive);
+    if (ok) setNewKeyValue("");
+  };
+  const handleRemoveKey = async (id: string) => {
+    const next = keys.filter((k) => k.id !== id);
+    // Removing the active key promotes the first remaining one.
+    const nextActive = id === activeKeyId ? next[0]?.id ?? "" : activeKeyId;
+    await persistKeys(next, nextActive);
+    setRevealedKeys((prev) => {
+      const s = new Set(prev);
+      s.delete(id);
+      return s;
+    });
+  };
+  const handleActivateKey = async (id: string) => {
+    if (id === activeKeyId) return;
+    await persistKeys(keys, id);
+  };
+  const toggleReveal = (id: string) =>
+    setRevealedKeys((prev) => {
+      const s = new Set(prev);
+      s.has(id) ? s.delete(id) : s.add(id);
+      return s;
+    });
   // ─── Quick add (inline, one-liner) ───
   const [quickId, setQuickId] = useState("");
@@ -638,8 +741,6 @@ function ProviderDetail({ provider, onDelete, onDuplicate, onRenamed }: { provid
   const existingModelIds = new Set(provider.models.map((m) => m.id));
   const availableModels = fetchedModels.filter((m) => !existingModelIds.has(m.id));
-  const [searchQuery, setSearchQuery] = useState("");
-  const filteredModels = availableModels.filter((m) => m.id.toLowerCase().includes(searchQuery.toLowerCase()));
   const isSelected = (id: string) => fetchSelected.has(id);
   const allSelected = availableModels.length > 0 && availableModels.every((m) => isSelected(m.id));
@@ -669,7 +770,7 @@ function ProviderDetail({ provider, onDelete, onDuplicate, onRenamed }: { provid
       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 }),
+        body: JSON.stringify({ baseUrl: baseUrl.trim(), apiKey: effectiveKey, providerId: provider.id }),
       });
       const data = await res.json();
       if (data.error) setFetchError(data.error);
@@ -698,11 +799,8 @@ function ProviderDetail({ provider, onDelete, onDuplicate, onRenamed }: { provid
         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.
-    const list = settings?.enabledModels ?? [];
-    const refs = selected.map((m) => `${provider.id}/${m.id}`);
-    await updateSettings({ enabledModels: Array.from(new Set([...list, ...refs])) });
+    // Models are added disabled by default — the user enables them via the
+    // per-model toggle. (No write to settings.enabledModels here.)
     setFetchImported(selected.length);
     setTimeout(() => {
       setFetchOpen(false); setFetchedModels([]); setFetchSelected(new Set());
@@ -721,7 +819,7 @@ function ProviderDetail({ provider, onDelete, onDuplicate, onRenamed }: { provid
       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 }),
+        body: JSON.stringify({ baseUrl: baseUrl.trim(), modelId, apiKey: effectiveKey, apiType: api ?? undefined }),
       });
       const data = await res.json();
       setModelTests((prev) => {
@@ -799,12 +897,10 @@ function ProviderDetail({ provider, onDelete, onDuplicate, onRenamed }: { provid
       contextWindow: cw,
       maxTokens: mt,
       cost: match?.cost ?? { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 },
-      enabled: true,
+      enabled: false,
     };
     addModel(provider.id, model);
-    // Enable
-    const list = settings?.enabledModels ?? [];
-    await updateSettings({ enabledModels: Array.from(new Set([...list, `${provider.id}/${id}`])) });
+    // Added disabled by default — the user enables it via the toggle.
     setQuickId("");
     setQuickHint(null);
   };
@@ -830,18 +926,18 @@ function ProviderDetail({ provider, onDelete, onDuplicate, onRenamed }: { provid
   const dirty =
     (isCustom && (providerName !== (provider.name ?? "") || baseUrl !== (provider.baseUrl ?? "") || api !== (provider.api ?? "openai-completions") || supportsDeveloperRole !== (provider.compat?.supportsDeveloperRole ?? true) || supportsFinishReason !== (provider.compat?.supportsFinishReason ?? true))) ||
-    (!isCustom && (baseUrl !== (provider.baseUrl ?? "") || api !== (provider.api ?? "openai-completions"))) ||
-    apiKey !== savedKey;
+    (!isCustom && (baseUrl !== (provider.baseUrl ?? "") || api !== (provider.api ?? "openai-completions") || apiKey !== savedKey));
   const handleSave = async () => {
     setSaveState("saving");
     let ok = true;
     if (isCustom) {
+      // apiKey / apiKeys are owned by the key pool below and already persisted,
+      // so they are deliberately left out of this patch.
       const cfgPatch = {
         name: providerName || undefined,
         baseUrl: baseUrl || undefined,
         api,
-        apiKey: apiKey || undefined,
         compat: { ...provider.compat, supportsDeveloperRole, supportsFinishReason },
       };
       // pi's model picker shows the provider key, not the display name, so
@@ -878,28 +974,7 @@ function ProviderDetail({ provider, onDelete, onDuplicate, onRenamed }: { provid
     if (ok) setTimeout(() => setSaveState("idle"), 2500);
   };
-  const q = modelQuery.trim().toLowerCase();
-  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 => findCatalogEntry(id)?.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]);
+  const visibleModels = provider.models;
   return (
     <div className="space-y-5">
@@ -979,30 +1054,133 @@ function ProviderDetail({ provider, onDelete, onDuplicate, onRenamed }: { provid
         </select>
       </div>
-      {/* API Key */}
-      <div>
-        <label className="block text-sm text-gray-400">{t("providers.api_key")}</label>
-        <div className="relative mt-1.5">
-          <input
-            type={showKey ? "text" : "password"}
-            value={apiKey}
-            onChange={(e) => setApiKey(e.target.value)}
-            placeholder="sk-... or $MY_API_KEY"
-            className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2.5 pr-10 text-sm text-white"
-          />
-          <button
-            onClick={() => setShowKey(!showKey)}
-            className="absolute right-2 top-1/2 -translate-y-1/2 rounded-md p-1.5 text-gray-500 hover:text-gray-300"
-          >
-            {showKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-          </button>
+      {/* API Key — custom providers get a switchable pool, builtins a single key */}
+      {isCustom ? (
+        <div>
+          <div className="flex items-center justify-between gap-3">
+            <label className="block text-sm text-gray-400">{t("providers.api_key")}</label>
+            {keys.length > 1 && (
+              <span className="text-xs text-gray-500">
+                {t("providers_models.api_key_count", String(keys.length))}
+              </span>
+            )}
+          </div>
+          {keys.length === 0 && (
+            <p className="mt-1.5 text-xs text-gray-500">{t("providers_models.api_key_empty")}</p>
+          )}
+          {keys.length > 0 && (
+            <div className="mt-1.5 space-y-1.5">
+              {keys.map((k) => {
+                const isActive = k.id === activeKeyId;
+                const revealed = revealedKeys.has(k.id);
+                return (
+                  <div
+                    key={k.id}
+                    className={cn(
+                      "flex items-center gap-2 rounded-lg border px-3 py-2",
+                      isActive ? "border-blue-500/60 bg-blue-500/5" : "border-gray-700 bg-gray-800"
+                    )}
+                  >
+                    <input
+                      type="radio"
+                      name={`active-key-${provider.id}`}
+                      checked={isActive}
+                      onChange={() => handleActivateKey(k.id)}
+                      className="text-blue-500"
+                      title={t("providers_models.api_key_use")}
+                    />
+                    <code className="min-w-0 flex-1 truncate font-mono text-xs text-gray-200">
+                      {revealed ? k.key : maskKey(k.key)}
+                    </code>
+                    {isActive && <Badge variant="success">{t("providers_models.api_key_active")}</Badge>}
+                    <button
+                      onClick={() => toggleReveal(k.id)}
+                      className="rounded-md p-1.5 text-gray-500 hover:text-gray-300"
+                      title={revealed ? t("providers_models.api_key_hide") : t("providers_models.api_key_show")}
+                    >
+                      {revealed ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                    </button>
+                    <button
+                      onClick={() => handleRemoveKey(k.id)}
+                      className="rounded-md p-1.5 text-gray-500 hover:text-red-400"
+                      title={t("providers_models.api_key_delete")}
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </button>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+          <div className="mt-2 flex items-center gap-2">
+            <input
+              type={showKey ? "text" : "password"}
+              value={newKeyValue}
+              onChange={(e) => {
+                setNewKeyValue(e.target.value);
+                setKeyError(null);
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") handleAddKey();
+              }}
+              placeholder="sk-... or $MY_API_KEY"
+              className="min-w-0 flex-1 rounded-lg border border-gray-700 bg-gray-800 px-3 py-2.5 text-sm text-white"
+            />
+            <button
+              onClick={() => setShowKey(!showKey)}
+              className="rounded-md p-2 text-gray-500 hover:text-gray-300"
+              title={showKey ? t("providers_models.api_key_hide") : t("providers_models.api_key_show")}
+            >
+              {showKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+            </button>
+            <button
+              onClick={handleAddKey}
+              disabled={newKeyValue.trim() === ""}
+              className="flex shrink-0 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 hover:text-white disabled:opacity-40"
+            >
+              <Plus className="h-4 w-4" />
+              {t("providers_models.api_key_add")}
+            </button>
+          </div>
+          {keyError && <p className="mt-1 text-xs text-red-400">{keyError}</p>}
+          {newKeyValue.trim().startsWith("$") && (
+            <p className="mt-1 text-xs text-sky-400">
+              {t("providers_models.api_key_env", newKeyValue.trim())}
+            </p>
+          )}
+          {keys.length > 1 && (
+            <p className="mt-1 text-xs text-gray-500">{t("providers_models.api_key_switch_hint")}</p>
+          )}
         </div>
-        {apiKey.trim().startsWith("$") && (
-          <p className="mt-1 text-xs text-sky-400">
-            {t("providers_models.api_key_env", apiKey.trim())}
-          </p>
-        )}
-      </div>
+      ) : (
+        <div>
+          <label className="block text-sm text-gray-400">{t("providers.api_key")}</label>
+          <div className="relative mt-1.5">
+            <input
+              type={showKey ? "text" : "password"}
+              value={apiKey}
+              onChange={(e) => setApiKey(e.target.value)}
+              placeholder="sk-... or $MY_API_KEY"
+              className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2.5 pr-10 text-sm text-white"
+            />
+            <button
+              onClick={() => setShowKey(!showKey)}
+              className="absolute right-2 top-1/2 -translate-y-1/2 rounded-md p-1.5 text-gray-500 hover:text-gray-300"
+            >
+              {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="provider-compat-row flex items-center gap-2">
@@ -1060,7 +1238,7 @@ function ProviderDetail({ provider, onDelete, onDuplicate, onRenamed }: { provid
           </span>
         )}
         {isCustom && baseUrl.trim() !== "" && (
-          <TestConnectionButton baseUrl={baseUrl} apiKey={apiKey} />
+          <TestConnectionButton baseUrl={baseUrl} apiKey={effectiveKey} />
         )}
       </div>
@@ -1094,35 +1272,6 @@ function ProviderDetail({ provider, onDelete, onDuplicate, onRenamed }: { provid
           )}
         </div>
-        {provider.models.length > 5 && (
-          <div className="relative mt-1.5">
-            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
-            <input
-              type="text"
-              value={modelQuery}
-              onChange={(e) => setModelQuery(e.target.value)}
-              placeholder={t("models.search_placeholder")}
-              className="w-full rounded-lg border border-gray-700 bg-gray-800 py-2 pl-9 pr-3 text-sm text-white"
-            />
-          </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>
@@ -1349,17 +1498,7 @@ function ProviderDetail({ provider, onDelete, onDuplicate, onRenamed }: { provid
                 </button>
               </div>
               <div className="max-h-72 overflow-y-auto space-y-1.5 rounded-lg border border-gray-800 p-3">
-          <div className="relative mt-2">
-            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
-            <input
-              type="text"
-              placeholder="Search models..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full rounded-lg border border-gray-700 bg-gray-800 py-2 pl-9 pr-3 text-sm text-white"
-            />
-          </div>
-                {filteredModels.map((m) => (
+                {availableModels.map((m) => (
                   <div key={m.id} className="flex items-center gap-3 rounded-lg px-2 py-2 transition-colors hover:bg-gray-800 cursor-pointer" onClick={() => toggleSelect(m.id)}>
                     <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" }}
@@ -1906,11 +2045,15 @@ function AddProviderForm({
     if (!id || !baseUrl || idExists || urlInvalid) return;
     setSubmitting(true);
     setSubmitError(false);
+    // Seed the key pool so the detail panel can switch keys right away.
+    const seedKey = apiKey.trim() ? { id: newKeyId(), key: apiKey.trim() } : null;
     const ok = await onSubmit(id, {
       name: name.trim() || undefined,
       baseUrl,
       api,
-      apiKey: apiKey || undefined,
+      apiKey: seedKey?.key,
+      apiKeys: seedKey ? [seedKey] : undefined,
+      activeKeyId: seedKey?.id,
       models,
     });
     setSubmitting(false);
@@ -2242,17 +2385,32 @@ function ImportProviderModal({
         ...existingModels,
         ...newModels.filter((m) => !existingModels.some((e) => e.id === m.id)),
       ];
+      // An imported key joins the existing pool instead of replacing it; the
+      // active key only changes when the provider had none.
+      const pool = normalizeKeyPool(existingCfg?.apiKeys, existingCfg?.apiKey);
+      const incoming = apiKey.trim();
+      const nextPool =
+        incoming && !pool.some((k) => k.key === incoming)
+          ? [...pool, { id: newKeyId(), key: incoming }]
+          : pool;
+      const activeId =
+        nextPool.find((k) => k.id === existingCfg?.activeKeyId)?.id ?? nextPool[0]?.id;
       ok = await store.updateCustomProvider(id, {
         baseUrl: baseUrl.trim() || existingCfg?.baseUrl,
-        apiKey: apiKey || existingCfg?.apiKey,
+        apiKeys: nextPool.length > 0 ? nextPool : undefined,
+        activeKeyId: activeId,
+        apiKey: nextPool.find((k) => k.id === activeId)?.key,
         models: merged,
       });
     } else {
+      const seedKey = apiKey.trim() ? { id: newKeyId(), key: apiKey.trim() } : null;
       ok = await store.addCustomProvider(id, {
         name: name.trim() || undefined,
         baseUrl: baseUrl.trim(),
         api,
-        apiKey: apiKey || undefined,
+        apiKey: seedKey?.key,
+        apiKeys: seedKey ? [seedKey] : undefined,
+        activeKeyId: seedKey?.id,
         models: newModels,
       });
     }