@tonyclaw/llm-inspector 1.14.2 → 1.14.4

package/src/components/providers/ImportWizardDialog.tsx

@@ -0,0 +1,281 @@
+import { type JSX, useState, useCallback, useEffect } from "react";
+import { z } from "zod";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog";
+import { Button } from "../ui/button";
+import { Badge } from "../ui/badge";
+import { Loader2, Download, AlertCircle } from "lucide-react";
+
+const ExternalProviderSchema = z.object({
+  name: z.string(),
+  apiKey: z.string(),
+  format: z.enum(["anthropic", "openai"]),
+  anthropicBaseUrl: z.string(),
+  openaiBaseUrl: z.string(),
+  models: z.array(z.string()),
+  sourceTool: z.enum(["claude-code", "opencode"]),
+  alreadyExists: z.boolean(),
+});
+
+const ScanResponseSchema = z.object({
+  providers: z.array(ExternalProviderSchema),
+  warnings: z.array(z.string()).optional(),
+});
+
+const ImportResponseSchema = z.object({
+  success: z.boolean().optional(),
+  imported: z.number().optional(),
+  message: z.string().optional(),
+  errors: z.array(z.string()).optional(),
+});
+
+type ImportWizardDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onImportComplete: () => void;
+};
+
+export function ImportWizardDialog({
+  open,
+  onOpenChange,
+  onImportComplete,
+}: ImportWizardDialogProps): JSX.Element {
+  const [scanning, setScanning] = useState(false);
+  const [scanError, setScanError] = useState<string | null>(null);
+  const [providers, setProviders] = useState<z.infer<typeof ExternalProviderSchema>[]>([]);
+  const [warnings, setWarnings] = useState<string[]>([]);
+  const [selected, setSelected] = useState<Set<number>>(new Set());
+  const [importing, setImporting] = useState(false);
+  const [importResult, setImportResult] = useState<string | null>(null);
+  const [importError, setImportError] = useState<string | null>(null);
+
+  const scan = useCallback(() => {
+    setScanning(true);
+    setScanError(null);
+    setWarnings([]);
+    setProviders([]);
+    setSelected(new Set());
+    setImportResult(null);
+    setImportError(null);
+
+    fetch("/api/providers/scan")
+      .then((res) => {
+        if (!res.ok) {
+          return res.text().then((text) => {
+            setScanError(`Scan failed (${res.status}): ${text}`);
+          });
+        }
+        return res.json().then((data: unknown) => {
+          const parsed = ScanResponseSchema.safeParse(data);
+          if (!parsed.success) {
+            setScanError(`Invalid response: ${parsed.error.message}`);
+            return;
+          }
+          setProviders(parsed.data.providers);
+          setWarnings(parsed.data.warnings ?? []);
+          // Pre-select non-existing providers
+          const indices = new Set<number>();
+          parsed.data.providers.forEach((p, i) => {
+            if (!p.alreadyExists) indices.add(i);
+          });
+          setSelected(indices);
+        });
+      })
+      .catch((err: unknown) => {
+        setScanError(err instanceof Error ? err.message : String(err));
+      })
+      .finally(() => {
+        setScanning(false);
+      });
+  }, []);
+
+  // Auto-scan when dialog opens
+  useEffect(() => {
+    if (open) {
+      scan();
+    }
+  }, [open, scan]);
+
+  const toggleProvider = useCallback((index: number) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(index)) {
+        next.delete(index);
+      } else {
+        next.add(index);
+      }
+      return next;
+    });
+  }, []);
+
+  const importSelected = useCallback(() => {
+    const toImport = providers.filter((_, i) => selected.has(i));
+    if (toImport.length === 0) return;
+
+    setImporting(true);
+    setImportError(null);
+    setImportResult(null);
+
+    // Convert ExternalProvider[] to ProviderConfig shape for import
+    const now = new Date().toISOString();
+    const providersPayload = toImport.map((p) => ({
+      id: window.crypto.randomUUID(),
+      name: p.name,
+      apiKey: p.apiKey,
+      format: p.format,
+      anthropicBaseUrl: p.anthropicBaseUrl,
+      openaiBaseUrl: p.openaiBaseUrl,
+      models: p.models,
+      createdAt: now,
+      updatedAt: now,
+    }));
+
+    fetch("/api/providers/import", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ providers: providersPayload }),
+    })
+      .then((res) => res.json())
+      .then((data: unknown) => {
+        const parsed = ImportResponseSchema.safeParse(data);
+        if (!parsed.success) {
+          setImportError(`Invalid response: ${parsed.error.message}`);
+          return;
+        }
+        const result = parsed.data;
+        if (
+          result.errors !== undefined &&
+          result.errors.length > 0 &&
+          result.message !== undefined
+        ) {
+          setImportResult(result.message);
+        } else {
+          setImportResult(`Imported ${result.imported ?? toImport.length} provider(s)`);
+        }
+        onImportComplete();
+      })
+      .catch((err: unknown) => {
+        setImportError(err instanceof Error ? err.message : String(err));
+      })
+      .finally(() => {
+        setImporting(false);
+      });
+  }, [providers, selected, onImportComplete]);
+
+  const hasSelectable = providers.some((p) => !p.alreadyExists);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-xl max-h-[80vh] overflow-hidden flex flex-col">
+        <DialogHeader>
+          <DialogTitle>Import from External Tools</DialogTitle>
+          <p className="text-xs text-muted-foreground">
+            Detect provider configurations from Claude Code and OpenCode.
+          </p>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-y-auto space-y-3">
+          {scanning && (
+            <div className="flex items-center justify-center py-8 gap-2 text-muted-foreground">
+              <Loader2 className="size-4 animate-spin" />
+              <span className="text-sm">Scanning for external providers...</span>
+            </div>
+          )}
+
+          {scanError !== null && (
+            <div className="flex items-center gap-2 text-destructive text-sm py-4">
+              <AlertCircle className="size-4" />
+              {scanError}
+            </div>
+          )}
+
+          {!scanning && scanError === null && providers.length === 0 && (
+            <p className="text-sm text-muted-foreground py-8 text-center">
+              No external provider configurations found.
+              <br />
+              <span className="text-xs">
+                Supported tools: Claude Code (~/.claude/settings.json), OpenCode
+                (~/.config/opencode/opencode.json)
+              </span>
+            </p>
+          )}
+
+          {!scanning &&
+            providers.map((p, i) => (
+              <label
+                key={`${p.sourceTool}-${p.name}`}
+                className="flex items-start gap-3 p-3 border rounded-md cursor-pointer hover:bg-muted/50 has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed"
+              >
+                <input
+                  type="checkbox"
+                  checked={selected.has(i)}
+                  disabled={p.alreadyExists || importing}
+                  onChange={() => toggleProvider(i)}
+                  className="mt-0.5 size-4"
+                />
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-medium truncate">{p.name}</span>
+                    <Badge variant="secondary" className="text-[10px] px-1.5 py-0">
+                      {p.format}
+                    </Badge>
+                    <Badge variant="outline" className="text-[10px] px-1.5 py-0">
+                      {p.sourceTool}
+                    </Badge>
+                    {p.alreadyExists && (
+                      <span className="text-[10px] text-muted-foreground">Already added</span>
+                    )}
+                  </div>
+                  <div className="text-xs text-muted-foreground mt-1 truncate">
+                    {p.models.slice(0, 4).join(", ")}
+                    {p.models.length > 4 ? ` +${p.models.length - 4} more` : ""}
+                  </div>
+                  <div className="text-xs text-muted-foreground mt-0.5 truncate">
+                    {p.format === "anthropic" ? p.anthropicBaseUrl : p.openaiBaseUrl}
+                  </div>
+                  <div className="text-xs text-muted-foreground mt-0.5 font-mono">
+                    {p.apiKey.length > 8
+                      ? `${p.apiKey.slice(0, 4)}••••${p.apiKey.slice(-4)}`
+                      : "••••"}
+                  </div>
+                </div>
+              </label>
+            ))}
+
+          {warnings.length > 0 && (
+            <div className="text-xs text-muted-foreground space-y-1 border-t pt-2">
+              {warnings.map((w, i) => (
+                <div key={i} className="flex items-center gap-1">
+                  <AlertCircle className="size-3" />
+                  {w}
+                </div>
+              ))}
+            </div>
+          )}
+
+          {importResult !== null && (
+            <div className="text-sm text-green-500 border-t pt-2">{importResult}</div>
+          )}
+
+          {importError !== null && (
+            <div className="text-sm text-destructive border-t pt-2">{importError}</div>
+          )}
+        </div>
+
+        <div className="flex items-center justify-between pt-3 border-t">
+          <Button variant="outline" size="sm" onClick={scan} disabled={scanning}>
+            <Loader2 className={`size-3 mr-1 ${scanning ? "animate-spin" : ""}`} />
+            Rescan
+          </Button>
+          <Button
+            size="sm"
+            onClick={importSelected}
+            disabled={!hasSelectable || selected.size === 0 || importing}
+          >
+            <Download className="size-3 mr-1" />
+            {importing ? "Importing..." : `Import Selected (${selected.size})`}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/providers/ProviderCard.tsx

@@ -400,6 +400,7 @@ export function ProviderCard({
           size="sm"
           onClick={() => onEdit(provider)}
           className="text-xs h-7 gap-1"
+          disabled={isTesting ?? false}
         >
           <Pencil className="size-3" />
           Edit
@@ -409,6 +410,7 @@ export function ProviderCard({
           size="sm"
           onClick={() => onDelete(provider.id)}
           className="text-xs h-7 gap-1 text-destructive hover:text-destructive"
+          disabled={isTesting ?? false}
         >
           <Trash2 className="size-3" />
           Delete

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";
 
@@ -54,7 +54,7 @@ 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);
@@ -69,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);
@@ -188,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>}
@@ -260,29 +277,62 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
         <label className="text-sm font-medium">
           Models <span className="text-destructive">*</span>
         </label>
-        {(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"
-            />
+          <div
+            key={i}
+            ref={(el) => {
+              modelRowRefs.current[i] = el;
+            }}
+            className="flex items-center gap-2"
+          >
+            <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"

package/src/components/providers/ProvidersPanel.tsx

@@ -1,7 +1,8 @@
-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";
+import { Plus, AlertCircle, Copy, Check, Download, Upload, Scan } from "lucide-react";
+import { ImportWizardDialog } from "./ImportWizardDialog";
 import { ProviderCard } from "./ProviderCard";
 import { ProviderForm } from "./ProviderForm";
 import { parseJsonResponse, readApiError } from "../../lib/apiClient";
@@ -85,14 +86,24 @@ export function ProvidersPanel({
   const [configPath, setConfigPath] = useState<string | null>(null);
   const [configPathCopied, setConfigPathCopied] = useState(false);
   const [highlightedProviderId, setHighlightedProviderId] = useState<string | null>(null);
+  const [showImportWizard, setShowImportWizard] = useState(false);
   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 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;
@@ -392,7 +403,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>
@@ -439,6 +450,15 @@ export function ProvidersPanel({
             onChange={handleFileChange}
             style={{ display: "none" }}
           />
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setShowImportWizard(true)}
+            className="gap-1"
+          >
+            <Scan className="size-3" />
+            Scan
+          </Button>
           <Button onClick={() => setShowForm(true)} size="sm" className="gap-1">
             <Plus className="size-4" />
             Add Provider
@@ -524,6 +544,16 @@ export function ProvidersPanel({
           </div>
         </div>
       )}
+
+      <ImportWizardDialog
+        open={showImportWizard}
+        onOpenChange={setShowImportWizard}
+        onImportComplete={() => {
+          if (onProvidersMutate !== undefined) {
+            void onProvidersMutate();
+          }
+        }}
+      />
     </div>
   );
 }

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}