@tonyclaw/llm-inspector 1.14.3 → 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/ProvidersPanel.tsx

@@ -1,7 +1,8 @@
 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,6 +86,7 @@ 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);
@@ -448,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
@@ -533,6 +544,16 @@ export function ProvidersPanel({
           </div>
         </div>
       )}
+
+      <ImportWizardDialog
+        open={showImportWizard}
+        onOpenChange={setShowImportWizard}
+        onImportComplete={() => {
+          if (onProvidersMutate !== undefined) {
+            void onProvidersMutate();
+          }
+        }}
+      />
     </div>
   );
 }

package/src/proxy/providerImporters.ts

@@ -0,0 +1,235 @@
+import { existsSync, readFileSync } from "node:fs";
+import { homedir } from "node:os";
+import { join } from "node:path";
+import { getProviders } from "./providers";
+import { normalizeApiKey } from "./providers";
+import type { ProviderConfig } from "../lib/providerContract";
+
+export type ExternalProvider = {
+  name: string;
+  apiKey: string;
+  format: "anthropic" | "openai";
+  anthropicBaseUrl: string;
+  openaiBaseUrl: string;
+  models: string[];
+  sourceTool: "claude-code" | "opencode";
+  alreadyExists: boolean;
+};
+
+function isRecord(val: unknown): val is Record<string, unknown> {
+  return val !== null && typeof val === "object" && !Array.isArray(val);
+}
+
+function readJsonSafe(filePath: string): Record<string, unknown> | null {
+  try {
+    if (!existsSync(filePath)) return null;
+    const raw = readFileSync(filePath, "utf-8");
+    const parsed: unknown = JSON.parse(raw);
+    return isRecord(parsed) ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+
+function getEnvValue(envObj: unknown, key: string): string | undefined {
+  if (!isRecord(envObj)) return undefined;
+  const val = envObj[key];
+  return typeof val === "string" ? val.trim() : undefined;
+}
+
+function deriveNameFromUrl(url: string): string {
+  try {
+    const hostname = new URL(url).hostname;
+    const parts = hostname.split(".");
+    const domain = parts.length >= 2 ? (parts[parts.length - 2] ?? hostname) : hostname;
+    return domain.charAt(0).toUpperCase() + domain.slice(1);
+  } catch {
+    return "Imported Provider";
+  }
+}
+
+// ── Claude Code ──────────────────────────────────────────
+
+function detectClaudeCodeProviders(): ExternalProvider[] {
+  const home = homedir();
+  const results: ExternalProvider[] = [];
+
+  // Read global + local settings, local takes precedence
+  const globalConfig = readJsonSafe(join(home, ".claude", "settings.json"));
+  const localConfig = readJsonSafe(join(home, ".claude", "settings.local.json"));
+
+  const mergedEnv: Record<string, unknown> = {};
+  if (isRecord(globalConfig)) {
+    const env = globalConfig["env"];
+    if (isRecord(env)) {
+      Object.assign(mergedEnv, env);
+    }
+  }
+  if (isRecord(localConfig)) {
+    const env = localConfig["env"];
+    if (isRecord(env)) {
+      Object.assign(mergedEnv, env);
+    }
+  }
+
+  const baseUrl = getEnvValue(mergedEnv, "ANTHROPIC_BASE_URL");
+  const authToken =
+    getEnvValue(mergedEnv, "ANTHROPIC_AUTH_TOKEN") ?? getEnvValue(mergedEnv, "ANTHROPIC_API_KEY");
+
+  if (baseUrl === undefined || baseUrl === "" || authToken === undefined || authToken === "") {
+    return results;
+  }
+
+  // Collect unique models
+  const modelSet = new Set<string>();
+  const modelKeys = [
+    "ANTHROPIC_MODEL",
+    "ANTHROPIC_DEFAULT_OPUS_MODEL",
+    "ANTHROPIC_DEFAULT_SONNET_MODEL",
+    "ANTHROPIC_DEFAULT_HAIKU_MODEL",
+  ];
+  for (const key of modelKeys) {
+    const val = getEnvValue(mergedEnv, key);
+    if (val !== undefined && val !== "") modelSet.add(val);
+  }
+  const models = modelSet.size > 0 ? [...modelSet] : ["default"];
+
+  results.push({
+    name: deriveNameFromUrl(baseUrl),
+    apiKey: normalizeApiKey(authToken),
+    format: "anthropic",
+    anthropicBaseUrl: baseUrl,
+    openaiBaseUrl: "",
+    models,
+    sourceTool: "claude-code",
+    alreadyExists: false, // filled in later
+  });
+
+  return results;
+}
+
+// ── OpenCode ─────────────────────────────────────────────
+
+function detectOpenCodeProviders(): ExternalProvider[] {
+  const home = homedir();
+  const results: ExternalProvider[] = [];
+
+  const config = readJsonSafe(join(home, ".config", "opencode", "opencode.json"));
+  if (config === null) return results;
+
+  // Read auth.json (separate credentials file)
+  const auth = readJsonSafe(join(home, ".local", "share", "opencode", "auth.json"));
+
+  const providersVal = config["provider"];
+  if (!isRecord(providersVal)) {
+    return results;
+  }
+  const providers: Record<string, unknown> = providersVal;
+
+  for (const [providerId, providerObj] of Object.entries(providers)) {
+    if (!isRecord(providerObj)) continue;
+
+    const options = providerObj["options"];
+    const npm: unknown = providerObj["npm"];
+    const npmStr = typeof npm === "string" ? npm : "";
+    const format: "anthropic" | "openai" = npmStr === "@ai-sdk/anthropic" ? "anthropic" : "openai";
+
+    let baseURL = "";
+    let apiKey = "";
+    if (isRecord(options)) {
+      baseURL = typeof options["baseURL"] === "string" ? options["baseURL"].trim() : "";
+      apiKey = typeof options["apiKey"] === "string" ? options["apiKey"].trim() : "";
+    }
+
+    // Resolve apiKey: prefer inline, fallback to auth.json
+    if (apiKey === "" && isRecord(auth)) {
+      const cred = auth[providerId];
+      if (isRecord(cred)) {
+        const key: unknown = cred["key"];
+        if (typeof key === "string" && key !== "") apiKey = key;
+      }
+    }
+
+    if (baseURL === "" || apiKey === "") continue;
+
+    // Collect models
+    const modelSet = new Set<string>();
+    const modelsObj = providerObj["models"];
+
+    if (isRecord(modelsObj)) {
+      for (const [modelId, modelDef] of Object.entries(modelsObj)) {
+        if (typeof modelDef === "string") {
+          modelSet.add(modelDef);
+        } else if (isRecord(modelDef)) {
+          const name: unknown = modelDef["name"];
+          modelSet.add(typeof name === "string" && name !== "" ? name : modelId);
+        } else {
+          modelSet.add(modelId);
+        }
+      }
+    }
+    const models = modelSet.size > 0 ? [...modelSet] : ["default"];
+
+    results.push({
+      name: providerId,
+      apiKey: normalizeApiKey(apiKey),
+      format,
+      anthropicBaseUrl: format === "anthropic" ? baseURL : "",
+      openaiBaseUrl: format === "openai" ? baseURL : "",
+      models,
+      sourceTool: "opencode",
+      alreadyExists: false,
+    });
+  }
+
+  return results;
+}
+
+// ── Combined scanner ─────────────────────────────────────
+
+export function scanExternalProviders(): { providers: ExternalProvider[]; warnings: string[] } {
+  const warnings: string[] = [];
+
+  let claudeProviders: ExternalProvider[] = [];
+  try {
+    claudeProviders = detectClaudeCodeProviders();
+  } catch (err) {
+    warnings.push(`Claude Code: ${err instanceof Error ? err.message : String(err)}`);
+  }
+
+  let opencodeProviders: ExternalProvider[] = [];
+  try {
+    opencodeProviders = detectOpenCodeProviders();
+  } catch (err) {
+    warnings.push(`OpenCode: ${err instanceof Error ? err.message : String(err)}`);
+  }
+
+  const allProviders = [...claudeProviders, ...opencodeProviders];
+
+  // Filter out providers already using the localhost proxy (already switched)
+  const filteredProviders = allProviders.filter((p) => {
+    const url = p.anthropicBaseUrl || p.openaiBaseUrl;
+    return !/(?:localhost|127\.0\.0\.1)/.test(url);
+  });
+
+  // Mark already-existing providers (same apiKey + format-specific baseUrl)
+  let existing: ProviderConfig[] = [];
+  try {
+    existing = getProviders();
+  } catch {
+    // If we can't load existing providers, just skip the duplicate check
+  }
+
+  for (const ext of filteredProviders) {
+    ext.alreadyExists = existing.some((p) => {
+      if (p.apiKey !== ext.apiKey) return false;
+      // Match on the format-specific base URL (external providers only set one)
+      if (ext.format === "anthropic") {
+        return (p.anthropicBaseUrl ?? "") === ext.anthropicBaseUrl;
+      }
+      return (p.openaiBaseUrl ?? "") === ext.openaiBaseUrl;
+    });
+  }
+
+  return { providers: filteredProviders, warnings };
+}

package/src/routes/api/providers.scan.ts

@@ -0,0 +1,23 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { scanExternalProviders } from "../../proxy/providerImporters";
+
+export const Route = createFileRoute("/api/providers/scan")({
+  server: {
+    handlers: {
+      GET: () => {
+        try {
+          const result = scanExternalProviders();
+          return Response.json({
+            providers: result.providers,
+            warnings: result.warnings,
+          });
+        } catch (err) {
+          return Response.json(
+            { error: `Scan failed: ${err instanceof Error ? err.message : String(err)}` },
+            { status: 500 },
+          );
+        }
+      },
+    },
+  },
+});