@tonyclaw/llm-inspector 1.6.3 → 1.7.1

package/src/cli.ts

@@ -1,89 +1,13 @@
 #!/usr/bin/env node
-import { spawn, execSync } from "node:child_process";
+import { spawn } from "node:child_process";
 import { fileURLToPath } from "node:url";
 import { dirname, join } from "node:path";
-import { existsSync } from "node:fs";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
 const DEFAULT_PORT = 25947;
 
-// Find bun executable
-const findBun = (): string | null => {
-  // Try running `where bun` (Windows) or `which bun` (Unix) to find in PATH
-  try {
-    const cmd = process.platform === "win32" ? "where bun" : "which bun";
-    const output = execSync(cmd, { encoding: "utf8", timeout: 5000 }).trim();
-    if (!output) return null;
-
-    // Take first line and handle Windows .cmd shim
-    const firstLine = output.split("\n")[0] ?? "";
-    const firstPath = firstLine.trim();
-    if (!firstPath) return null;
-
-    if (process.platform === "win32" && firstPath.endsWith(".cmd")) {
-      // npm shim - find actual exe
-      const dir = join(firstPath, "..");
-      const actualPath = join(dir, "node_modules", "bun", "bin", "bun.exe");
-      if (existsSync(actualPath)) {
-        return actualPath;
-      }
-      // Also try .exe directly in same directory
-      const exePath = join(dir, "bun.exe");
-      if (existsSync(exePath)) {
-        return exePath;
-      }
-    }
-    if (existsSync(firstPath)) {
-      return firstPath;
-    }
-  } catch {
-    // Command failed, continue with other methods
-  }
-
-  // Check PATH directories directly
-  const pathEnv = process.env.PATH ?? "";
-  const pathDirs = pathEnv.split(process.platform === "win32" ? ";" : ":");
-
-  for (const dir of pathDirs) {
-    const bunPath = join(dir, process.platform === "win32" ? "bun.exe" : "bun");
-    if (existsSync(bunPath)) {
-      // On Windows, npm shim is a script, not the actual exe
-      if (process.platform === "win32" && !bunPath.endsWith(".exe")) {
-        const actualPath = join(dir, "node_modules", "bun", "bin", "bun.exe");
-        if (existsSync(actualPath)) {
-          return actualPath;
-        }
-      }
-      return bunPath;
-    }
-  }
-
-  // Common Windows paths
-  if (process.platform === "win32") {
-    const localAppData = process.env.LOCALAPPDATA ?? "";
-    const appData = process.env.APPDATA ?? "";
-    const userProfile = process.env.USERPROFILE ?? "";
-
-    const commonPaths = [
-      join(localAppData, "bun", "bin", "bun.exe"),
-      join(appData, "bun", "bin", "bun.exe"),
-      join(userProfile, "AppData", "Local", "bun", "bin", "bun.exe"),
-      join(userProfile, "AppData", "Roaming", "npm", "node_modules", "bun", "bin", "bun.exe"),
-      join(userProfile, "AppData", "Roaming", "npm", "bun.exe"),
-      join(userProfile, "AppData", "Roaming", "npm", "bun"),
-    ];
-    for (const bunPath of commonPaths) {
-      if (existsSync(bunPath)) {
-        return bunPath;
-      }
-    }
-  }
-
-  return null;
-};
-
 const envPort = process.env["PORT"];
 const portDefault = envPort !== undefined ? Number(envPort) : DEFAULT_PORT;
 
@@ -157,22 +81,15 @@ if (open) {
   openBrowser(url);
 }
 
-// Find bun and start server
-const bunPath = findBun();
-if (bunPath === null) {
-  console.error("\nError: bun is not installed or not in PATH.");
-  console.error("Please install bun from https://bun.sh");
-  process.exit(1);
-}
-
 // Compute server path
 const outputDir = __dirname;
 const serverPath = join(outputDir, "../.output/server/index.mjs");
 
-// Start server with bun
-const serverProcess = spawn(bunPath, [serverPath], {
+// Start server with node
+const serverProcess = spawn(process.execPath, [serverPath], {
   stdio: ["ignore", "inherit", "inherit"],
   detached: true,
+  env: { ...process.env },
 });
 
 serverProcess.unref();

package/src/components/providers/ProviderCard.tsx

@@ -10,6 +10,14 @@ import {
   XCircle,
   Minus,
   ExternalLink,
+  AlertCircle,
+  Wifi,
+  WifiOff,
+  Lock,
+  Gauge,
+  Server,
+  HelpCircle,
+  Clock,
 } from "lucide-react";
 import type { ProviderConfig } from "../../proxy/providers";
 
@@ -18,9 +26,26 @@ const KNOWN_PROVIDER_DOCS: Record<string, string> = {
   deepseek: "https://api-docs.deepseek.com/zh-cn/",
 };
 
+type ErrorType =
+  | "timeout"
+  | "network_unreachable"
+  | "connection_refused"
+  | "auth_failed"
+  | "rate_limited"
+  | "server_error"
+  | "invalid_response"
+  | "unknown";
+
+type EnhancedError = {
+  message: string;
+  type: ErrorType;
+  details?: string;
+  hint?: string;
+};
+
 type TestResult = {
   success: boolean;
-  error?: string;
+  error?: EnhancedError;
 };
 
 type NotConfigured = { notConfigured: true };
@@ -53,7 +78,37 @@ function hasSuccessField(result: TestResult | NotConfigured): result is TestResu
   return Object.prototype.hasOwnProperty.call(result, "success");
 }
 
-function TestStatus({ result }: { result: TestResult | NotConfigured }): JSX.Element {
+function getErrorIcon(type: ErrorType): JSX.Element {
+  const iconProps = { className: "size-3", strokeWidth: 2 };
+  switch (type) {
+    case "timeout":
+      return <Clock {...iconProps} />;
+    case "network_unreachable":
+      return <WifiOff {...iconProps} />;
+    case "connection_refused":
+      return <Wifi {...iconProps} />;
+    case "auth_failed":
+      return <Lock {...iconProps} />;
+    case "rate_limited":
+      return <Gauge {...iconProps} />;
+    case "server_error":
+      return <Server {...iconProps} />;
+    case "invalid_response":
+      return <HelpCircle {...iconProps} />;
+    case "unknown":
+      return <AlertCircle {...iconProps} />;
+    default:
+      return <AlertCircle {...iconProps} />;
+  }
+}
+
+function TestStatus({
+  result,
+  isTesting,
+}: {
+  result: TestResult | NotConfigured;
+  isTesting?: boolean;
+}): JSX.Element {
   if (!hasSuccessField(result)) {
     return (
       <div className="flex items-center gap-1 text-xs text-muted-foreground">
@@ -70,10 +125,26 @@ function TestStatus({ result }: { result: TestResult | NotConfigured }): JSX.Ele
       </div>
     );
   }
+
+  const error = result.error;
+  const errorMessage = error?.message ?? "Connection failed";
+  const errorHint = error?.hint;
+  const errorType = error?.type ?? "unknown";
+
   return (
-    <div className="flex items-center gap-1 text-xs text-red-600" title={result.error}>
-      <XCircle className="size-3" />
-      <span className="truncate">{result.error}</span>
+    <div className="flex flex-col gap-1 min-w-0">
+      <div
+        className="flex items-center gap-1 text-xs text-red-600 min-w-0"
+        title={error?.details ?? errorMessage}
+      >
+        {getErrorIcon(errorType)}
+        <span className="truncate">{errorMessage}</span>
+      </div>
+      {errorHint !== undefined && (
+        <div className="text-xs text-muted-foreground pl-4 truncate" title={errorHint}>
+          {errorHint}
+        </div>
+      )}
     </div>
   );
 }
@@ -135,7 +206,9 @@ export function ProviderCard({
             <span className="font-medium">Anthropic:</span>{" "}
             <span className="truncate">{provider.anthropicBaseUrl}</span>
           </div>
-          {testResults && <TestStatus result={testResults.anthropic.nonStreaming} />}
+          {testResults && (
+            <TestStatus result={testResults.anthropic.nonStreaming} isTesting={isTesting} />
+          )}
         </div>
       )}
 
@@ -145,7 +218,9 @@ export function ProviderCard({
             <span className="font-medium">OpenAI:</span>{" "}
             <span className="truncate">{provider.openaiBaseUrl}</span>
           </div>
-          {testResults && <TestStatus result={testResults.openai.nonStreaming} />}
+          {testResults && (
+            <TestStatus result={testResults.openai.nonStreaming} isTesting={isTesting} />
+          )}
         </div>
       )}
 

package/src/components/providers/ProvidersPanel.tsx

@@ -9,9 +9,24 @@ type ConfigPathsResponse = {
   providerConfig: string;
 };
 
+type EnhancedError = {
+  message: string;
+  type:
+    | "timeout"
+    | "network_unreachable"
+    | "connection_refused"
+    | "auth_failed"
+    | "rate_limited"
+    | "server_error"
+    | "invalid_response"
+    | "unknown";
+  details?: string;
+  hint?: string;
+};
+
 type TestResult = {
   success: boolean;
-  error?: string;
+  error?: EnhancedError;
 };
 
 type NotConfigured = { notConfigured: true };
@@ -88,14 +103,23 @@ export function ProvidersPanel(): JSX.Element {
     name: string;
     apiKey: string;
     model?: string;
-    anthropicBaseUrl?: string;
-    openaiBaseUrl?: string;
+    format: "anthropic" | "openai";
+    baseUrl?: string;
   }): void {
     void (async () => {
+      // Convert baseUrl to format-specific URL
+      const payload = {
+        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,
+      };
       const res = await fetch("/api/providers", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(data),
+        body: JSON.stringify(payload),
       });
       if (!res.ok) {
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
@@ -116,15 +140,24 @@ export function ProvidersPanel(): JSX.Element {
     name: string;
     apiKey: string;
     model?: string;
-    anthropicBaseUrl?: string;
-    openaiBaseUrl?: string;
+    format: "anthropic" | "openai";
+    baseUrl?: string;
   }): void {
     if (!editingProvider) return;
     void (async () => {
+      // Convert baseUrl to format-specific URL
+      const payload = {
+        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,
+      };
       const res = await fetch(`/api/providers/${editingProvider.id}`, {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(data),
+        body: JSON.stringify(payload),
       });
       if (!res.ok) {
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions