@tonyclaw/llm-inspector 1.14.0 → 1.14.2

package/src/components/providers/ProviderForm.tsx

@@ -1,6 +1,8 @@
 import { type JSX, useState, useEffect } from "react";
 import { Button } from "../ui/button";
+import { Eye, EyeOff, Copy, Check } from "lucide-react";
 import type { ProviderConfig } from "../../proxy/providers";
+import { maskApiKey } from "../../lib/mask";
 
 // Known provider presets - maps provider name keywords to their API URLs
 const KNOWN_PROVIDER_PRESETS: Record<
@@ -42,10 +44,11 @@ type ProviderFormProps = {
   onSubmit: (data: {
     name: string;
     apiKey: string;
-    model?: string;
-    format: "anthropic" | "openai";
-    baseUrl?: string;
+    models: string[];
+    anthropicBaseUrl?: string;
+    openaiBaseUrl?: string;
     apiDocsUrl?: string;
+    source?: "company" | "personal";
   }) => void;
   onCancel: () => void;
 };
@@ -53,30 +56,46 @@ type ProviderFormProps = {
 export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps): JSX.Element {
   const [name, setName] = useState(provider?.name ?? "Provider Name");
   const [apiKey, setApiKey] = useState(provider?.apiKey ?? "");
-  const [model, setModel] = useState(provider?.model ?? "");
-  const [format, setFormat] = useState<"anthropic" | "openai">(provider?.format ?? "anthropic");
-  const [baseUrl, setBaseUrl] = useState(provider?.baseUrl ?? "");
+  const [showApiKey, setShowApiKey] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const initialModels = provider?.models;
+  const [models, setModels] = useState<string[]>(
+    initialModels !== undefined && initialModels.length > 0 ? initialModels : [""],
+  );
+  const [activeTab, setActiveTab] = useState<"anthropic" | "openai">("anthropic");
+  const [anthropicBaseUrl, setAnthropicBaseUrl] = useState(provider?.anthropicBaseUrl ?? "");
+  const [openaiBaseUrl, setOpenaiBaseUrl] = useState(provider?.openaiBaseUrl ?? "");
   const [apiDocsUrl, setApiDocsUrl] = useState(provider?.apiDocsUrl ?? "");
+  const [source, setSource] = useState<"company" | "personal" | undefined>(provider?.source);
   const [errors, setErrors] = useState<Record<string, string>>({});
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  // Track if URL field has been manually edited (to avoid overriding user edits)
-  const [manualBaseUrlOverride, setManualBaseUrlOverride] = useState(false);
+  // Track if URL fields have been manually edited (to avoid overriding user edits)
+  const [manualAnthropicUrlOverride, setManualAnthropicUrlOverride] = useState(false);
+  const [manualOpenaiUrlOverride, setManualOpenaiUrlOverride] = useState(false);
 
   // Check if MiniMax is detected
   const isMiniMax = name.toLowerCase().includes("minimax");
   // Check if Alibaba is detected
   const isAlibaba = name.toLowerCase().includes("alibaba");
 
+  function handleCopy() {
+    navigator.clipboard.writeText(apiKey).catch(() => {});
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }
+
   useEffect(() => {
     if (provider) {
       setName(provider.name);
       setApiKey(provider.apiKey);
-      setModel(provider.model ?? "");
-      setFormat(provider.format ?? "anthropic");
-      setBaseUrl(provider.baseUrl ?? "");
+      setModels((provider.models?.length ?? 0) > 0 ? provider.models : [""]);
+      setAnthropicBaseUrl(provider.anthropicBaseUrl ?? "");
+      setOpenaiBaseUrl(provider.openaiBaseUrl ?? "");
       setApiDocsUrl(provider.apiDocsUrl ?? "");
-      setManualBaseUrlOverride(false);
+      setSource(provider.source);
+      setManualAnthropicUrlOverride(false);
+      setManualOpenaiUrlOverride(false);
     }
   }, [provider]);
 
@@ -85,20 +104,21 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
     const lowerName = name.toLowerCase();
     for (const [keyword, preset] of Object.entries(KNOWN_PROVIDER_PRESETS)) {
       if (lowerName.includes(keyword)) {
-        if (!manualBaseUrlOverride) {
-          setFormat(preset.format);
-          setBaseUrl(preset.baseUrl);
+        if (preset.format === "anthropic" && !manualAnthropicUrlOverride) {
+          setAnthropicBaseUrl(preset.baseUrl);
+        } else if (preset.format === "openai" && !manualOpenaiUrlOverride) {
+          setOpenaiBaseUrl(preset.baseUrl);
         }
         if (preset.apiDocsUrl !== undefined && !apiDocsUrl) {
           setApiDocsUrl(preset.apiDocsUrl);
         }
         // For MiniMax, auto-select the first model if not already set
-        if (keyword === "minimax" && !model) {
-          setModel(MINIMAX_MODELS[0] ?? "");
+        if (keyword === "minimax" && models.length === 1 && models[0] === "") {
+          setModels([MINIMAX_MODELS[0] ?? ""]);
         }
         // For Alibaba, auto-select the first model if not already set
-        if (keyword === "alibaba" && !model) {
-          setModel(ALIBABA_MODELS[0] ?? "");
+        if (keyword === "alibaba" && models.length === 1 && models[0] === "") {
+          setModels([ALIBABA_MODELS[0] ?? ""]);
         }
         break;
       }
@@ -113,13 +133,17 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
     if (!apiKey.trim()) {
       newErrors.apiKey = "API key is required";
     }
-    if (!model.trim()) {
-      newErrors.model = "Model is required";
+    if (models.length === 0 || models.every((m) => !m.trim())) {
+      newErrors.models = "At least one model is required";
+    }
+    if (anthropicBaseUrl.trim() && !isValidUrl(anthropicBaseUrl.trim())) {
+      newErrors.anthropicBaseUrl = "Invalid URL format";
     }
-    if (!baseUrl.trim()) {
-      newErrors.baseUrl = "Base URL is required";
-    } else if (!isValidUrl(baseUrl.trim())) {
-      newErrors.baseUrl = "Invalid URL format";
+    if (openaiBaseUrl.trim() && !isValidUrl(openaiBaseUrl.trim())) {
+      newErrors.openaiBaseUrl = "Invalid URL format";
+    }
+    if (!anthropicBaseUrl.trim() && !openaiBaseUrl.trim()) {
+      newErrors.format = "At least one format URL (Anthropic or OpenAI) is required";
     }
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
@@ -142,10 +166,11 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
       onSubmit({
         name: name.trim(),
         apiKey: apiKey.trim(),
-        model: model.trim() || undefined,
-        format,
-        baseUrl: baseUrl.trim() || undefined,
+        models: models.map((m) => m.trim()).filter((m) => m !== ""),
+        anthropicBaseUrl: anthropicBaseUrl.trim() || undefined,
+        openaiBaseUrl: openaiBaseUrl.trim() || undefined,
         apiDocsUrl: apiDocsUrl.trim() || undefined,
+        source,
       });
     } finally {
       setIsSubmitting(false);
@@ -170,93 +195,210 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
       </div>
 
       <div className="space-y-2">
-        <label htmlFor="provider-apikey" className="text-sm font-medium">
-          API Key <span className="text-destructive">*</span>
+        <label htmlFor="provider-source" className="text-sm font-medium">
+          Token Source
         </label>
-        <input
-          id="provider-apikey"
-          type="password"
-          value={apiKey}
-          onChange={(e) => setApiKey(e.target.value)}
-          placeholder="sk-ant-..."
-          className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
-        />
-        {errors.apiKey !== undefined && <p className="text-xs text-destructive">{errors.apiKey}</p>}
+        <select
+          id="provider-source"
+          value={source ?? ""}
+          onChange={(e) =>
+            setSource(
+              e.target.value === "company" || e.target.value === "personal"
+                ? e.target.value
+                : undefined,
+            )
+          }
+          className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          <option value="">—</option>
+          <option value="personal">个人 (Personal)</option>
+          <option value="company">公司 (Company)</option>
+        </select>
+        <p className="text-xs text-muted-foreground">
+          Label whether this API key is company-provided or personal.
+        </p>
       </div>
 
       <div className="space-y-2">
-        <label htmlFor="provider-model" className="text-sm font-medium">
-          Model <span className="text-destructive">*</span>
+        <label htmlFor="provider-apikey" className="text-sm font-medium">
+          API Key <span className="text-destructive">*</span>
         </label>
-        {isMiniMax || isAlibaba ? (
-          <select
-            id="provider-model"
-            value={model}
-            onChange={(e) => setModel(e.target.value)}
-            className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
-          >
-            {(isMiniMax ? MINIMAX_MODELS : ALIBABA_MODELS).map((m) => (
-              <option key={m} value={m}>
-                {m}
-              </option>
-            ))}
-          </select>
-        ) : (
+        <div className="flex items-center gap-2">
           <input
-            id="provider-model"
+            id="provider-apikey"
             type="text"
-            value={model}
-            onChange={(e) => setModel(e.target.value)}
-            placeholder=""
-            className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
+            value={showApiKey || apiKey.length === 0 ? apiKey : maskApiKey(apiKey)}
+            onChange={(e) => setApiKey(e.target.value)}
+            onFocus={() => {
+              if (!showApiKey && apiKey.length > 0) setShowApiKey(true);
+            }}
+            placeholder="sk-ant-..."
+            readOnly={!showApiKey && apiKey.length > 0}
+            className="flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
           />
-        )}
-        {errors.model !== undefined && <p className="text-xs text-destructive">{errors.model}</p>}
+          <button
+            type="button"
+            onClick={() => setShowApiKey((s) => !s)}
+            className="text-muted-foreground hover:text-foreground transition-colors p-1 shrink-0"
+            aria-label={showApiKey ? "Hide API key" : "Show API key"}
+          >
+            {showApiKey ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+          </button>
+          <button
+            type="button"
+            onClick={handleCopy}
+            className="text-muted-foreground hover:text-foreground transition-colors p-1 shrink-0"
+            aria-label="Copy API key"
+          >
+            {copied ? <Check className="size-4 text-green-500" /> : <Copy className="size-4" />}
+          </button>
+        </div>
+        {errors.apiKey !== undefined && <p className="text-xs text-destructive">{errors.apiKey}</p>}
       </div>
 
       <div className="space-y-2">
-        <label htmlFor="provider-format" className="text-sm font-medium">
-          API Format <span className="text-destructive">*</span>
+        <label className="text-sm font-medium">
+          Models <span className="text-destructive">*</span>
         </label>
-        <select
-          id="provider-format"
-          value={format}
-          onChange={(e) => setFormat(e.target.value === "anthropic" ? "anthropic" : "openai")}
-          className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
+        {(isMiniMax || isAlibaba) && (
+          <datalist id="model-suggestions">
+            {(isMiniMax ? MINIMAX_MODELS : ALIBABA_MODELS).map((opt) => (
+              <option key={opt} value={opt} />
+            ))}
+          </datalist>
+        )}
+        {models.map((m, i) => (
+          <div key={i} className="flex items-center gap-2">
+            <input
+              type="text"
+              value={m}
+              onChange={(e) => {
+                setModels((prev) => {
+                  const next = [...prev];
+                  next[i] = e.target.value;
+                  return next;
+                });
+              }}
+              placeholder={isMiniMax || isAlibaba ? "Type or select a model..." : "Model name"}
+              list={isMiniMax || isAlibaba ? "model-suggestions" : undefined}
+              className="flex-1 rounded-md border border-input bg-background px-4 py-3 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
+            />
+            {models.length > 1 && (
+              <button
+                type="button"
+                onClick={() => setModels((prev) => prev.filter((_, idx) => idx !== i))}
+                className="text-muted-foreground hover:text-destructive transition-colors p-1 shrink-0"
+                aria-label="Remove model"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M3 6h18" />
+                  <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+                  <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+                </svg>
+              </button>
+            )}
+          </div>
+        ))}
+        <button
+          type="button"
+          onClick={() => setModels((prev) => [...prev, ""])}
+          className="text-xs text-primary hover:underline flex items-center gap-1"
         >
-          <option value="anthropic">Anthropic (/v1/messages)</option>
-          <option value="openai">OpenAI (/v1/chat/completions)</option>
-        </select>
-        <p className="text-xs text-muted-foreground">
-          {format === "anthropic"
-            ? "Use Anthropic format for /v1/messages endpoint"
-            : "Use OpenAI format for /v1/chat/completions endpoint"}
-        </p>
+          + Add Model
+        </button>
+        {errors.models !== undefined && <p className="text-xs text-destructive">{errors.models}</p>}
       </div>
 
       <div className="space-y-2">
-        <label htmlFor="provider-base-url" className="text-sm font-medium">
-          Base URL <span className="text-destructive">*</span>
-        </label>
-        <input
-          id="provider-base-url"
-          type="text"
-          value={baseUrl}
-          onChange={(e) => {
-            setManualBaseUrlOverride(true);
-            setBaseUrl(e.target.value);
-          }}
-          placeholder={
-            format === "anthropic" ? "https://api.anthropic.com" : "https://api.openai.com/v1"
-          }
-          className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
-        />
-        {errors.baseUrl !== undefined && (
-          <p className="text-xs text-destructive">{errors.baseUrl}</p>
-        )}
-        <p className="text-xs text-muted-foreground">Base URL for the provider API.</p>
+        <div className="flex gap-1 border-b border-border">
+          <button
+            type="button"
+            onClick={() => setActiveTab("anthropic")}
+            className={`px-3 py-2 text-sm font-medium border-b-2 transition-colors ${
+              activeTab === "anthropic"
+                ? "border-primary text-primary"
+                : "border-transparent text-muted-foreground hover:text-foreground"
+            }`}
+          >
+            Anthropic Format
+          </button>
+          <button
+            type="button"
+            onClick={() => setActiveTab("openai")}
+            className={`px-3 py-2 text-sm font-medium border-b-2 transition-colors ${
+              activeTab === "openai"
+                ? "border-primary text-primary"
+                : "border-transparent text-muted-foreground hover:text-foreground"
+            }`}
+          >
+            OpenAI Format
+          </button>
+        </div>
+        {errors.format !== undefined && <p className="text-xs text-destructive">{errors.format}</p>}
       </div>
 
+      {activeTab === "anthropic" && (
+        <div className="space-y-2">
+          <label htmlFor="provider-anthropic-base-url" className="text-sm font-medium">
+            Anthropic Base URL
+          </label>
+          <input
+            id="provider-anthropic-base-url"
+            type="text"
+            value={anthropicBaseUrl}
+            onChange={(e) => {
+              setManualAnthropicUrlOverride(true);
+              setAnthropicBaseUrl(e.target.value);
+            }}
+            placeholder="https://api.anthropic.com"
+            className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
+          />
+          {errors.anthropicBaseUrl !== undefined && (
+            <p className="text-xs text-destructive">{errors.anthropicBaseUrl}</p>
+          )}
+          <p className="text-xs text-muted-foreground">
+            Anthropic-compatible endpoint URL. Leave empty if this provider does not support
+            Anthropic format.
+          </p>
+        </div>
+      )}
+
+      {activeTab === "openai" && (
+        <div className="space-y-2">
+          <label htmlFor="provider-openai-base-url" className="text-sm font-medium">
+            OpenAI Base URL
+          </label>
+          <input
+            id="provider-openai-base-url"
+            type="text"
+            value={openaiBaseUrl}
+            onChange={(e) => {
+              setManualOpenaiUrlOverride(true);
+              setOpenaiBaseUrl(e.target.value);
+            }}
+            placeholder="https://api.openai.com/v1"
+            className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
+          />
+          {errors.openaiBaseUrl !== undefined && (
+            <p className="text-xs text-destructive">{errors.openaiBaseUrl}</p>
+          )}
+          <p className="text-xs text-muted-foreground">
+            OpenAI-compatible endpoint URL. Leave empty if this provider does not support OpenAI
+            format.
+          </p>
+        </div>
+      )}
+
       <div className="space-y-2">
         <label htmlFor="provider-api-docs-url" className="text-sm font-medium">
           API Docs URL
@@ -274,7 +416,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
         </p>
       </div>
 
-      <div className="flex gap-2 justify-end pt-2">
+      <div className="sticky bottom-0 bg-card border-t flex gap-2 justify-end pt-2 pb-2">
         <Button type="button" variant="outline" onClick={onCancel} disabled={isSubmitting}>
           Cancel
         </Button>

package/src/components/providers/ProvidersPanel.tsx

@@ -32,19 +32,22 @@ const NETWORK_ERROR_MESSAGE = "Network error: could not reach the server. Is the
 type ProviderFormData = {
   name: string;
   apiKey: string;
-  model?: string;
-  format: "anthropic" | "openai";
-  baseUrl?: string;
+  models: string[];
+  anthropicBaseUrl?: string;
+  openaiBaseUrl?: string;
+  apiDocsUrl?: string;
+  source?: "company" | "personal";
 };
 
 function createProviderPayload(data: ProviderFormData) {
   return {
     name: data.name,
     apiKey: data.apiKey,
-    model: data.model,
-    format: data.format,
-    anthropicBaseUrl: data.format === "anthropic" ? data.baseUrl : undefined,
-    openaiBaseUrl: data.format === "openai" ? data.baseUrl : undefined,
+    models: data.models,
+    anthropicBaseUrl: (data.anthropicBaseUrl?.length ?? 0) > 0 ? data.anthropicBaseUrl : undefined,
+    openaiBaseUrl: (data.openaiBaseUrl?.length ?? 0) > 0 ? data.openaiBaseUrl : undefined,
+    apiDocsUrl: (data.apiDocsUrl?.length ?? 0) > 0 ? data.apiDocsUrl : undefined,
+    source: data.source,
   };
 }
 
@@ -82,11 +85,14 @@ export function ProvidersPanel({
   const [configPath, setConfigPath] = useState<string | null>(null);
   const [configPathCopied, setConfigPathCopied] = useState(false);
   const [highlightedProviderId, setHighlightedProviderId] = useState<string | null>(null);
+  const [sourceFilter, setSourceFilter] = useState<"all" | "personal" | "company">("all");
   const listScrollRef = useRef<HTMLDivElement>(null);
   const highlightTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   // Use external state if provided (from SWR), otherwise use internal state
   const providers = externalProviders ?? [];
+  const filteredProviders =
+    sourceFilter === "all" ? providers : providers.filter((p) => p.source === sourceFilter);
   const testResults = externalTestResults ?? internalTestResults;
   const testingProviders = externalTestingProviders ?? internalTestingProviders;
   const testingTimeLeft = externalTestingTimeLeft ?? internalTestingTimeLeft;
@@ -238,54 +244,56 @@ export function ProvidersPanel({
 
   function handleAddProvider(data: ProviderFormData): void {
     void (async () => {
-      let res: Response;
       try {
-        res = await fetch("/api/providers", {
+        const res = await fetch("/api/providers", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify(createProviderPayload(data)),
         });
+        if (!res.ok) {
+          setError(await readApiError(res, "Failed to add provider"));
+          return;
+        }
+        const newProvider = await parseJsonResponse(res, ProviderConfigSchema);
+        setShowForm(false);
+        triggerHighlight(newProvider.id);
+        refreshProviders();
+        await runTest(newProvider.id);
       } catch {
         setError(NETWORK_ERROR_MESSAGE);
-        return;
       }
-      if (!res.ok) {
-        setError(await readApiError(res, "Failed to add provider"));
-        return;
-      }
-      const newProvider = await parseJsonResponse(res, ProviderConfigSchema);
-      setShowForm(false);
-      // Trigger highlight, then kick off async revalidation and test in parallel
-      triggerHighlight(newProvider.id);
-      refreshProviders();
-      await runTest(newProvider.id);
     })();
   }
 
   function handleUpdateProvider(data: ProviderFormData): void {
     if (!editingProvider) return;
     void (async () => {
-      let res: Response;
       try {
-        res = await fetch(`/api/providers/${editingProvider.id}`, {
+        const res = await fetch(`/api/providers/${editingProvider.id}`, {
           method: "PUT",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify(createProviderPayload(data)),
         });
+        if (!res.ok) {
+          setError(await readApiError(res, "Failed to update provider"));
+          return;
+        }
+        const updated = await parseJsonResponse(res, ProviderConfigSchema);
+        setEditingProvider(undefined);
+        triggerHighlight(updated.id);
+        refreshProviders();
+        // Only run connection test when critical fields (apiKey, model, base URLs) changed
+        const criticalFieldsChanged =
+          (data.apiKey ?? "") !== (editingProvider.apiKey ?? "") ||
+          JSON.stringify(data.models) !== JSON.stringify(editingProvider.models) ||
+          (data.anthropicBaseUrl ?? "") !== (editingProvider.anthropicBaseUrl ?? "") ||
+          (data.openaiBaseUrl ?? "") !== (editingProvider.openaiBaseUrl ?? "");
+        if (criticalFieldsChanged) {
+          await runTest(updated.id);
+        }
       } catch {
         setError(NETWORK_ERROR_MESSAGE);
-        return;
       }
-      if (!res.ok) {
-        setError(await readApiError(res, "Failed to update provider"));
-        return;
-      }
-      const updated = await parseJsonResponse(res, ProviderConfigSchema);
-      setEditingProvider(undefined);
-      // Trigger highlight, then kick off async revalidation and test in parallel
-      triggerHighlight(updated.id);
-      refreshProviders();
-      await runTest(updated.id);
     })();
   }
 
@@ -480,22 +488,40 @@ export function ProvidersPanel({
           </Button>
         </div>
       ) : (
-        <div ref={listScrollRef} className="space-y-3">
-          {providers.map((provider) => (
-            <ProviderCard
-              key={provider.id}
-              provider={provider}
-              testResults={testResults[provider.id]}
-              isTesting={testingProviders.has(provider.id)}
-              testingTimeLeft={testingTimeLeft[provider.id]}
-              isHighlighted={provider.id === highlightedProviderId}
-              onEdit={(p) => setEditingProvider(p)}
-              onDelete={handleDeleteProvider}
-              onTest={(id: string) => {
-                void runTest(id);
-              }}
-            />
-          ))}
+        <div className="space-y-3">
+          <div className="flex gap-1 border-b border-border">
+            {(["all", "personal", "company"] as const).map((tab) => (
+              <button
+                key={tab}
+                type="button"
+                onClick={() => setSourceFilter(tab)}
+                className={`px-3 py-2 text-sm font-medium border-b-2 transition-colors ${
+                  sourceFilter === tab
+                    ? "border-primary text-primary"
+                    : "border-transparent text-muted-foreground hover:text-foreground"
+                }`}
+              >
+                {tab === "all" ? "All" : tab === "personal" ? "Personal" : "Company"}
+              </button>
+            ))}
+          </div>
+          <div ref={listScrollRef} className="space-y-3">
+            {filteredProviders.map((provider) => (
+              <ProviderCard
+                key={provider.id}
+                provider={provider}
+                testResults={testResults[provider.id]}
+                isTesting={testingProviders.has(provider.id)}
+                testingTimeLeft={testingTimeLeft[provider.id]}
+                isHighlighted={provider.id === highlightedProviderId}
+                onEdit={(p) => setEditingProvider(p)}
+                onDelete={handleDeleteProvider}
+                onTest={(id: string) => {
+                  void runTest(id);
+                }}
+              />
+            ))}
+          </div>
         </div>
       )}
     </div>

package/src/lib/mask.ts

@@ -0,0 +1,4 @@
+export function maskApiKey(apiKey: string): string {
+  if (apiKey.length <= 8) return "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022";
+  return apiKey.slice(0, 4) + "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" + apiKey.slice(-4);
+}

package/src/lib/providerContract.ts

@@ -11,12 +11,14 @@ export const ProviderConfigSchema = z.object({
   name: z.string(),
   apiKey: z.string(),
   model: z.string().optional(),
+  models: z.array(z.string()).min(1),
   format: z.enum(["anthropic", "openai"]).optional(),
   baseUrl: z.string().optional(),
   anthropicBaseUrl: z.string().optional(),
   openaiBaseUrl: z.string().optional(),
   authHeader: z.enum(["bearer", "x-api-key"]).optional().default("bearer"),
   apiDocsUrl: z.string().optional(),
+  source: z.enum(["company", "personal"]).optional(),
   createdAt: z.string(),
   updatedAt: z.string(),
 });