@tonyclaw/llm-inspector 1.14.1 → 1.14.3

package/.output/server/{_tanstack-start-manifest_v-vO4aM6jK.mjs → _tanstack-start-manifest_v-DxqMZv-B.mjs}

@@ -1,4 +1,4 @@
-const tsrStartManifest = () => ({ "routes": { "__root__": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/__root.tsx", "children": ["/", "/api/config", "/api/health", "/api/logs", "/api/mcp", "/api/models", "/api/providers", "/api/sessions", "/proxy/$"], "preloads": ["/assets/main-BzK2SzIB.js"], "assets": [] }, "/": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/index.tsx", "assets": [], "preloads": ["/assets/index-ax85pt2A.js"] }, "/api/config": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/config.ts", "children": ["/api/config/paths"] }, "/api/health": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/health.ts" }, "/api/logs": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/logs.ts", "children": ["/api/logs/$id", "/api/logs/stream"] }, "/api/mcp": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/mcp.ts" }, "/api/models": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/models.ts" }, "/api/providers": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.ts", "children": ["/api/providers/$providerId", "/api/providers/export", "/api/providers/import"] }, "/api/sessions": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/sessions.ts" }, "/proxy/$": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/proxy/$.ts" }, "/api/config/paths": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/config.paths.ts" }, "/api/logs/$id": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/logs.$id.ts", "children": ["/api/logs/$id/chunks", "/api/logs/$id/replay"] }, "/api/logs/stream": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/logs.stream.ts" }, "/api/providers/$providerId": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.$providerId.ts", "children": ["/api/providers/$providerId/test"] }, "/api/providers/export": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.export.ts" }, "/api/providers/import": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.import.ts" }, "/api/logs/$id/chunks": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/logs.$id.chunks.ts" }, "/api/logs/$id/replay": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/logs.$id.replay.ts" }, "/api/providers/$providerId/test": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.$providerId.test.ts" } }, "clientEntry": "/assets/main-BzK2SzIB.js" });
+const tsrStartManifest = () => ({ "routes": { "__root__": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/__root.tsx", "children": ["/", "/api/config", "/api/health", "/api/logs", "/api/mcp", "/api/models", "/api/providers", "/api/sessions", "/proxy/$"], "preloads": ["/assets/main-BcEfx6FM.js"], "assets": [] }, "/": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/index.tsx", "assets": [], "preloads": ["/assets/index-6F6Tf88s.js"] }, "/api/config": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/config.ts", "children": ["/api/config/paths"] }, "/api/health": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/health.ts" }, "/api/logs": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/logs.ts", "children": ["/api/logs/$id", "/api/logs/stream"] }, "/api/mcp": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/mcp.ts" }, "/api/models": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/models.ts" }, "/api/providers": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.ts", "children": ["/api/providers/$providerId", "/api/providers/export", "/api/providers/import"] }, "/api/sessions": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/sessions.ts" }, "/proxy/$": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/proxy/$.ts" }, "/api/config/paths": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/config.paths.ts" }, "/api/logs/$id": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/logs.$id.ts", "children": ["/api/logs/$id/chunks", "/api/logs/$id/replay"] }, "/api/logs/stream": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/logs.stream.ts" }, "/api/providers/$providerId": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.$providerId.ts", "children": ["/api/providers/$providerId/test"] }, "/api/providers/export": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.export.ts" }, "/api/providers/import": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.import.ts" }, "/api/logs/$id/chunks": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/logs.$id.chunks.ts" }, "/api/logs/$id/replay": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/logs.$id.replay.ts" }, "/api/providers/$providerId/test": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.$providerId.test.ts", "children": ["/api/providers/$providerId/test/log"] }, "/api/providers/$providerId/test/log": { "filePath": "C:/Users/claw/workspace/llm-inspector/src/routes/api/providers.$providerId.test.log.ts" } }, "clientEntry": "/assets/main-BcEfx6FM.js" });
 export {
   tsrStartManifest
 };

package/.output/server/index.mjs

@@ -38,51 +38,51 @@ const assets = {
   "/assets/alibaba-TTwafVwX.svg": {
     "type": "image/svg+xml",
     "etag": '"171b-6dyV5K8QjiaY35sN9qNprh9zDIs"',
-    "mtime": "2026-06-10T10:39:07.175Z",
+    "mtime": "2026-06-11T02:41:57.154Z",
     "size": 5915,
     "path": "../public/assets/alibaba-TTwafVwX.svg"
   },
+  "/assets/index-CzrT_ZB_.css": {
+    "type": "text/css; charset=utf-8",
+    "etag": '"14427-WRw7wI3HmgJe0YWxs6QA9QvDsgk"',
+    "mtime": "2026-06-11T02:41:57.155Z",
+    "size": 82983,
+    "path": "../public/assets/index-CzrT_ZB_.css"
+  },
   "/assets/minimax-BPMzvuL-.jpeg": {
     "type": "image/jpeg",
     "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
-    "mtime": "2026-06-10T10:39:07.172Z",
+    "mtime": "2026-06-11T02:41:57.154Z",
     "size": 6918,
     "path": "../public/assets/minimax-BPMzvuL-.jpeg"
   },
-  "/assets/index-DEUddp_2.css": {
-    "type": "text/css; charset=utf-8",
-    "etag": '"14241-4GSN9oIh2t/a3HzVlfCpnfXP+qI"',
-    "mtime": "2026-06-10T10:39:07.175Z",
-    "size": 82497,
-    "path": "../public/assets/index-DEUddp_2.css"
-  },
-  "/assets/main-BzK2SzIB.js": {
+  "/assets/main-BcEfx6FM.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"50599-SX7gD+cBJGiUJBAZdsWQTyO8AMw"',
-    "mtime": "2026-06-10T10:39:07.175Z",
+    "etag": '"50599-Zn3MOTxDKfi6edBd1hMuk0XMH8M"',
+    "mtime": "2026-06-11T02:41:57.155Z",
     "size": 329113,
-    "path": "../public/assets/main-BzK2SzIB.js"
+    "path": "../public/assets/main-BcEfx6FM.js"
   },
   "/assets/zhipuai-BPNAnxo-.svg": {
     "type": "image/svg+xml",
     "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
-    "mtime": "2026-06-10T10:39:07.175Z",
+    "mtime": "2026-06-11T02:41:57.154Z",
     "size": 11256,
     "path": "../public/assets/zhipuai-BPNAnxo-.svg"
   },
   "/assets/qwen-CONDcHqt.png": {
     "type": "image/png",
     "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
-    "mtime": "2026-06-10T10:39:07.175Z",
+    "mtime": "2026-06-11T02:41:57.155Z",
     "size": 357059,
     "path": "../public/assets/qwen-CONDcHqt.png"
   },
-  "/assets/index-ax85pt2A.js": {
+  "/assets/index-6F6Tf88s.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"91290-BbX996HkZZYEbnE1RQsvxosxLnk"',
-    "mtime": "2026-06-10T10:39:07.175Z",
-    "size": 594576,
-    "path": "../public/assets/index-ax85pt2A.js"
+    "etag": '"92434-5hMgYz5Gl8U1bzvC5OsYy/vakXU"',
+    "mtime": "2026-06-11T02:41:57.155Z",
+    "size": 599092,
+    "path": "../public/assets/index-6F6Tf88s.js"
   }
 };
 function readAsset(id) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonyclaw/llm-inspector",
-  "version": "1.14.1",
+  "version": "1.14.3",
   "type": "module",
   "description": "LLM API proxy inspector — captures and displays requests/responses from AI coding tools in a web UI",
   "license": "MIT",

package/src/components/providers/ProviderCard.tsx

@@ -1,4 +1,4 @@
-import { type JSX, type ReactNode, useState } from "react";
+import { type JSX, type ReactNode, useCallback, useRef, useState } from "react";
 import { Button } from "../ui/button";
 import {
   Eye,
@@ -169,6 +169,20 @@ function TestStatus({ result }: { result: ProviderTestState }): JSX.Element {
   );
 }
 
+function formatTimeAgo(isoString: string): string {
+  const now = Date.now();
+  const then = new Date(isoString).getTime();
+  const diffMs = now - then;
+  const diffSec = Math.floor(diffMs / 1000);
+  if (diffSec < 60) return "just now";
+  const diffMin = Math.floor(diffSec / 60);
+  if (diffMin < 60) return `${diffMin}m ago`;
+  const diffHr = Math.floor(diffMin / 60);
+  if (diffHr < 24) return `${diffHr}h ago`;
+  const diffDay = Math.floor(diffHr / 24);
+  return `${diffDay}d ago`;
+}
+
 export function ProviderCard({
   provider,
   testResults,
@@ -181,6 +195,32 @@ export function ProviderCard({
 }: ProviderCardProps): JSX.Element {
   const [showApiKey, setShowApiKey] = useState(false);
   const [copied, setCopied] = useState(false);
+  const [showModelResults, setShowModelResults] = useState(false);
+  const hasLoggedRef = useRef<string | null>(null);
+  const lastTestedAtRef = useRef<string | undefined>(undefined);
+
+  // Reset log state when new test results arrive
+  if (testResults?.testedAt !== undefined && testResults.testedAt !== lastTestedAtRef.current) {
+    lastTestedAtRef.current = testResults.testedAt;
+    hasLoggedRef.current = null;
+  }
+
+  // Call log API when user expands model test results for the first time
+  const handleToggleModelResults = useCallback(() => {
+    setShowModelResults((v) => {
+      const next = !v;
+      if (next && hasLoggedRef.current === null && testResults?.models !== undefined) {
+        hasLoggedRef.current = testResults.testedAt ?? "";
+        // Fire-and-forget: commit test results to dashboard log
+        void fetch(`/api/providers/${provider.id}/test/log`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(testResults),
+        });
+      }
+      return next;
+    });
+  }, [provider.id, testResults]);
 
   function handleCopy() {
     navigator.clipboard.writeText(provider.apiKey).catch(() => {});
@@ -201,11 +241,7 @@ export function ProviderCard({
     >
       <div className="flex items-start justify-between gap-2">
         <div className="flex items-center gap-2 min-w-0">
-          <span className="font-medium truncate">
-            {provider.model !== undefined && provider.model !== ""
-              ? `${provider.model} (${provider.name})`
-              : provider.name}
-          </span>
+          <span className="font-medium truncate">{provider.name}</span>
           {provider.source === "company" && (
             <span className="text-xs px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 shrink-0">
               公司
@@ -231,6 +267,16 @@ export function ProviderCard({
         )}
       </div>
 
+      {provider.models !== undefined && provider.models.length > 0 && (
+        <div className="flex flex-wrap gap-1">
+          {provider.models.map((m) => (
+            <span key={m} className="text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground">
+              {m}
+            </span>
+          ))}
+        </div>
+      )}
+
       <div className="flex items-center gap-2">
         <code className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded flex-1 truncate">
           {showApiKey ? provider.apiKey : maskApiKey(provider.apiKey)}
@@ -273,6 +319,65 @@ export function ProviderCard({
         </div>
       )}
 
+      {testResults?.testedAt !== undefined && (
+        <div className="text-xs text-muted-foreground flex items-center gap-1">
+          <Clock className="size-3" />
+          <span>Tested {formatTimeAgo(testResults.testedAt)}</span>
+        </div>
+      )}
+      {testResults?.models !== undefined && Object.keys(testResults.models).length > 0 && (
+        <div className="border-t pt-2">
+          <button
+            type="button"
+            onClick={handleToggleModelResults}
+            className="text-xs text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1"
+          >
+            <span className="font-mono">{showModelResults ? "▾" : "▸"}</span>
+            Model Test Results ({Object.keys(testResults.models).length})
+          </button>
+          {showModelResults && (
+            <div className="mt-2 overflow-x-auto">
+              <table className="w-full text-xs border-collapse">
+                <thead>
+                  <tr className="border-b border-border">
+                    <th className="text-left py-1 px-2 font-medium text-muted-foreground">Model</th>
+                    {provider.anthropicBaseUrl !== undefined &&
+                      provider.anthropicBaseUrl !== "" && (
+                        <th className="text-left py-1 px-2 font-medium text-muted-foreground">
+                          Anthropic
+                        </th>
+                      )}
+                    {provider.openaiBaseUrl !== undefined && provider.openaiBaseUrl !== "" && (
+                      <th className="text-left py-1 px-2 font-medium text-muted-foreground">
+                        OpenAI
+                      </th>
+                    )}
+                  </tr>
+                </thead>
+                <tbody>
+                  {Object.entries(testResults.models).map(([modelName, modelResult]) => (
+                    <tr key={modelName} className="border-b border-border/50 last:border-0">
+                      <td className="py-1 px-2 font-medium">{modelName}</td>
+                      {provider.anthropicBaseUrl !== undefined &&
+                        provider.anthropicBaseUrl !== "" && (
+                          <td className="py-1 px-2">
+                            <TestStatus result={modelResult.anthropic.nonStreaming} />
+                          </td>
+                        )}
+                      {provider.openaiBaseUrl !== undefined && provider.openaiBaseUrl !== "" && (
+                        <td className="py-1 px-2">
+                          <TestStatus result={modelResult.openai.nonStreaming} />
+                        </td>
+                      )}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      )}
+
       <div className="flex gap-2 pt-1 border-t">
         {onTest !== undefined && (
           <Button

package/src/components/providers/ProviderForm.tsx

@@ -1,6 +1,6 @@
-import { type JSX, useState, useEffect } from "react";
+import { type JSX, useState, useEffect, useRef } from "react";
 import { Button } from "../ui/button";
-import { Eye, EyeOff, Copy, Check } from "lucide-react";
+import { Eye, EyeOff, Copy, Check, ChevronDown } from "lucide-react";
 import type { ProviderConfig } from "../../proxy/providers";
 import { maskApiKey } from "../../lib/mask";
 
@@ -44,7 +44,7 @@ type ProviderFormProps = {
   onSubmit: (data: {
     name: string;
     apiKey: string;
-    model?: string;
+    models: string[];
     anthropicBaseUrl?: string;
     openaiBaseUrl?: string;
     apiDocsUrl?: string;
@@ -54,11 +54,14 @@ type ProviderFormProps = {
 };
 
 export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps): JSX.Element {
-  const [name, setName] = useState(provider?.name ?? "Provider Name");
+  const [name, setName] = useState(provider?.name ?? "");
   const [apiKey, setApiKey] = useState(provider?.apiKey ?? "");
   const [showApiKey, setShowApiKey] = useState(false);
   const [copied, setCopied] = useState(false);
-  const [model, setModel] = useState(provider?.model ?? "");
+  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 ?? "");
@@ -66,6 +69,23 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
   const [source, setSource] = useState<"company" | "personal" | undefined>(provider?.source);
   const [errors, setErrors] = useState<Record<string, string>>({});
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [openModelDropdown, setOpenModelDropdown] = useState<number | null>(null);
+  const modelRowRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+  // Close model dropdown when clicking outside
+  useEffect(() => {
+    if (openModelDropdown === null) return;
+    const index = openModelDropdown;
+    function handleClick(e: MouseEvent) {
+      if (!(e.target instanceof Node)) return;
+      const ref = modelRowRefs.current[index];
+      if (ref !== null && ref !== undefined && !ref.contains(e.target)) {
+        setOpenModelDropdown(null);
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [openModelDropdown]);
 
   // Track if URL fields have been manually edited (to avoid overriding user edits)
   const [manualAnthropicUrlOverride, setManualAnthropicUrlOverride] = useState(false);
@@ -86,7 +106,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
     if (provider) {
       setName(provider.name);
       setApiKey(provider.apiKey);
-      setModel(provider.model ?? "");
+      setModels((provider.models?.length ?? 0) > 0 ? provider.models : [""]);
       setAnthropicBaseUrl(provider.anthropicBaseUrl ?? "");
       setOpenaiBaseUrl(provider.openaiBaseUrl ?? "");
       setApiDocsUrl(provider.apiDocsUrl ?? "");
@@ -110,12 +130,12 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
           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;
       }
@@ -130,8 +150,8 @@ 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";
@@ -163,7 +183,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
       onSubmit({
         name: name.trim(),
         apiKey: apiKey.trim(),
-        model: model.trim() || undefined,
+        models: models.map((m) => m.trim()).filter((m) => m !== ""),
         anthropicBaseUrl: anthropicBaseUrl.trim() || undefined,
         openaiBaseUrl: openaiBaseUrl.trim() || undefined,
         apiDocsUrl: apiDocsUrl.trim() || undefined,
@@ -185,7 +205,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
           type="text"
           value={name}
           onChange={(e) => setName(e.target.value)}
-          placeholder="Model Name"
+          placeholder="Provider Name"
           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.name !== undefined && <p className="text-xs text-destructive">{errors.name}</p>}
@@ -254,33 +274,99 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
       </div>
 
       <div className="space-y-2">
-        <label htmlFor="provider-model" className="text-sm font-medium">
-          Model <span className="text-destructive">*</span>
+        <label className="text-sm font-medium">
+          Models <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"
+        {models.map((m, i) => (
+          <div
+            key={i}
+            ref={(el) => {
+              modelRowRefs.current[i] = el;
+            }}
+            className="flex items-center gap-2"
           >
-            {(isMiniMax ? MINIMAX_MODELS : ALIBABA_MODELS).map((m) => (
-              <option key={m} value={m}>
-                {m}
-              </option>
-            ))}
-          </select>
-        ) : (
-          <input
-            id="provider-model"
-            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"
-          />
-        )}
-        {errors.model !== undefined && <p className="text-xs text-destructive">{errors.model}</p>}
+            <div className="relative flex-1">
+              <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"}
+                className="w-full rounded-md border border-input bg-background px-4 py-3 pr-8 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"
+              />
+              {(isMiniMax || isAlibaba) && (
+                <>
+                  <button
+                    type="button"
+                    onClick={() => setOpenModelDropdown(openModelDropdown === i ? null : i)}
+                    className="absolute right-1 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors p-1 z-10"
+                    aria-label="Show model suggestions"
+                  >
+                    <ChevronDown className="size-4" />
+                  </button>
+                  {openModelDropdown === i && (
+                    <div className="absolute left-0 right-0 top-full mt-1 z-50 bg-popover border border-border rounded-md shadow-md max-h-48 overflow-y-auto">
+                      {(isMiniMax ? MINIMAX_MODELS : ALIBABA_MODELS).map((opt) => (
+                        <button
+                          key={opt}
+                          type="button"
+                          onClick={() => {
+                            setModels((prev) => {
+                              const next = [...prev];
+                              next[i] = opt;
+                              return next;
+                            });
+                            setOpenModelDropdown(null);
+                          }}
+                          className="w-full text-left px-3 py-2 text-sm hover:bg-muted transition-colors"
+                        >
+                          {opt}
+                        </button>
+                      ))}
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+            {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"
+        >
+          + Add Model
+        </button>
+        {errors.models !== undefined && <p className="text-xs text-destructive">{errors.models}</p>}
       </div>
 
       <div className="space-y-2">

package/src/components/providers/ProvidersPanel.tsx

@@ -1,4 +1,4 @@
-import { type JSX, useState, useEffect, useCallback, useRef } from "react";
+import { type JSX, useState, useEffect, useCallback, useMemo, useRef } from "react";
 import { z } from "zod";
 import { Button } from "../ui/button";
 import { Plus, AlertCircle, Copy, Check, Download, Upload } from "lucide-react";
@@ -32,7 +32,7 @@ const NETWORK_ERROR_MESSAGE = "Network error: could not reach the server. Is the
 type ProviderFormData = {
   name: string;
   apiKey: string;
-  model?: string;
+  models: string[];
   anthropicBaseUrl?: string;
   openaiBaseUrl?: string;
   apiDocsUrl?: string;
@@ -43,7 +43,7 @@ function createProviderPayload(data: ProviderFormData) {
   return {
     name: data.name,
     apiKey: data.apiKey,
-    model: data.model,
+    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,
@@ -91,8 +91,17 @@ export function ProvidersPanel({
 
   // 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 filteredProviders = useMemo(() => {
+    const filtered =
+      sourceFilter === "all" ? providers : providers.filter((p) => p.source === sourceFilter);
+    if (sourceFilter === "all") {
+      return [...filtered].sort((a, b) => {
+        const order: Record<string, number> = { personal: 0, company: 1 };
+        return (order[a.source ?? ""] ?? 2) - (order[b.source ?? ""] ?? 2);
+      });
+    }
+    return filtered;
+  }, [providers, sourceFilter]);
   const testResults = externalTestResults ?? internalTestResults;
   const testingProviders = externalTestingProviders ?? internalTestingProviders;
   const testingTimeLeft = externalTestingTimeLeft ?? internalTestingTimeLeft;
@@ -285,7 +294,7 @@ export function ProvidersPanel({
         // Only run connection test when critical fields (apiKey, model, base URLs) changed
         const criticalFieldsChanged =
           (data.apiKey ?? "") !== (editingProvider.apiKey ?? "") ||
-          (data.model ?? "") !== (editingProvider.model ?? "") ||
+          JSON.stringify(data.models) !== JSON.stringify(editingProvider.models) ||
           (data.anthropicBaseUrl ?? "") !== (editingProvider.anthropicBaseUrl ?? "") ||
           (data.openaiBaseUrl ?? "") !== (editingProvider.openaiBaseUrl ?? "");
         if (criticalFieldsChanged) {
@@ -392,7 +401,7 @@ export function ProvidersPanel({
   if (showForm || editingProvider) {
     return (
       <div className="space-y-4">
-        <div className="flex items-center justify-between">
+        <div className="flex items-center justify-between sticky top-0 bg-background z-10 pb-2">
           <h3 className="text-lg font-medium">
             {editingProvider ? "Edit Provider" : "Add New Provider"}
           </h3>

package/src/components/providers/SettingsDialog.tsx

@@ -69,7 +69,7 @@ export function SettingsDialog(): JSX.Element {
             <TabsTrigger value="proxy">Proxy</TabsTrigger>
           </TabsList>
 
-          <div className="mt-4 overflow-y-auto flex-1">
+          <div className="mt-4 overflow-y-auto flex-1 pr-3">
             <TabsContent value="providers">
               <ProvidersPanel
                 externalProviders={providers}

package/src/lib/providerContract.ts

@@ -11,6 +11,7 @@ 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(),

package/src/lib/providerTestContract.ts

@@ -57,15 +57,23 @@ const ProviderFormatTestResultsSchema = z.object({
   streaming: ProviderTestStateSchema,
 });
 
+const ModelTestResultsSchema = z.object({
+  anthropic: ProviderFormatTestResultsSchema,
+  openai: ProviderFormatTestResultsSchema,
+});
+
 export const ProviderTestResultsSchema = z.object({
   anthropic: ProviderFormatTestResultsSchema,
   openai: ProviderFormatTestResultsSchema,
+  models: z.record(z.string(), ModelTestResultsSchema).optional(),
+  testedAt: z.string().optional(),
 });
 
 export type ProviderTestErrorType = z.infer<typeof ProviderTestErrorTypeSchema>;
 export type ProviderTestResult = z.infer<typeof ProviderTestResultSchema>;
 export type ProviderTestState = z.infer<typeof ProviderTestStateSchema>;
 export type ProviderTestResults = z.infer<typeof ProviderTestResultsSchema>;
+export type ModelTestResults = z.infer<typeof ModelTestResultsSchema>;
 
 export function createPendingProviderTestResults(): ProviderTestResults {
   return {