@tonyclaw/llm-inspector 1.7.8 → 1.7.9

package/src/components/providers/ProvidersPanel.tsx

@@ -1,6 +1,7 @@
 import { type JSX, useState, useEffect, useCallback, useRef } from "react";
+import { z } from "zod";
 import { Button } from "../ui/button";
-import { Plus, AlertCircle, Copy, Check } from "lucide-react";
+import { Plus, AlertCircle, Copy, Check, Download, Upload } from "lucide-react";
 import { ProviderCard } from "./ProviderCard";
 import { ProviderForm } from "./ProviderForm";
 import type { ProviderConfig } from "../../proxy/providers";
@@ -134,6 +135,17 @@ export function ProvidersPanel({
 
   const runTest = useCallback(
     async (providerId: string): Promise<void> => {
+      // Clear previous test results when starting a new test
+      const resetResults: TestResults = {
+        anthropic: { nonStreaming: { notConfigured: true }, streaming: { notConfigured: true } },
+        openai: { nonStreaming: { notConfigured: true }, streaming: { notConfigured: true } },
+      };
+      if (onTestResultsChange) {
+        onTestResultsChange(providerId, resetResults);
+      } else {
+        setInternalTestResults((prev) => ({ ...prev, [providerId]: resetResults }));
+      }
+
       // Use callback form if available, otherwise direct set
       if (onTestingProvidersChange) {
         onTestingProvidersChange(providerId, true);
@@ -196,7 +208,8 @@ export function ProvidersPanel({
         }
       } catch (err) {
         // Check if this was an abort (timeout)
-        if (err instanceof Error && err.name === "AbortError") {
+        const isAbort = err instanceof Error && err.name === "AbortError";
+        if (isAbort) {
           const timeoutResult: TestResults = {
             anthropic: {
               nonStreaming: {
@@ -219,17 +232,25 @@ export function ProvidersPanel({
             setInternalTestResults((prev) => ({ ...prev, [providerId]: timeoutResult }));
           }
         }
+        // If it's not an abort error, the test results won't be updated
+        // which means the previous results will persist (or it will show "Not configured" reset state)
       } finally {
+        // Always clear the countdown and testing state, even if an error occurs
         clearInterval(intervalId);
         setTestingTimeLeft(providerId, undefined);
-        if (onTestingProvidersChange) {
-          onTestingProvidersChange(providerId, false);
-        } else {
-          setInternalTestingProviders((prev) => {
-            const next = new Set(prev);
-            next.delete(providerId);
-            return next;
-          });
+        // Ensure testingProviders state is cleared - wrap in try to guarantee execution
+        try {
+          if (onTestingProvidersChange) {
+            onTestingProvidersChange(providerId, false);
+          } else {
+            setInternalTestingProviders((prev) => {
+              const next = new Set(prev);
+              next.delete(providerId);
+              return next;
+            });
+          }
+        } catch {
+          // Ignore errors in state updates to ensure we always clean up
         }
       }
     },
@@ -328,6 +349,74 @@ export function ProvidersPanel({
     })();
   }
 
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  function handleExport(includeKeys: boolean): void {
+    const url = `/api/providers/export${includeKeys ? "?includeKeys=true" : ""}`;
+    void (async () => {
+      try {
+        const res = await fetch(url);
+        if (!res.ok) {
+          setError("Failed to export providers");
+          return;
+        }
+        const blob = await res.blob();
+        const downloadUrl = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = downloadUrl;
+        a.download =
+          res.headers.get("Content-Disposition")?.match(/filename="(.+)"/)?.[1] ?? "providers.json";
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(downloadUrl);
+      } catch {
+        setError("Failed to export providers");
+      }
+    })();
+  }
+
+  function handleImportClick(): void {
+    fileInputRef.current?.click();
+  }
+
+  function handleFileChange(e: React.ChangeEvent<HTMLInputElement>): void {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    void (async () => {
+      try {
+        const text = await file.text();
+        const res = await fetch("/api/providers/import", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(text),
+        });
+        const ImportResponseSchema = z.object({
+          success: z.boolean().optional(),
+          imported: z.number().optional(),
+          message: z.string().optional(),
+          errors: z.array(z.string()).optional(),
+        });
+        const data = ImportResponseSchema.parse(await res.json());
+        if (res.ok && data.imported !== undefined && data.imported > 0) {
+          await fetchProviders();
+          // Show success message via error state temporarily
+          setError(null);
+          // Use a ref or state to show success - for now just refresh list
+        } else if (data.errors && data.errors.length > 0) {
+          setError(data.errors.join("; "));
+        } else {
+          setError(data.message ?? "Import failed");
+        }
+      } catch {
+        setError("Failed to import providers");
+      }
+      // Reset file input
+      e.target.value = "";
+    })();
+  }
+
   // Only show loading if we have no providers at all (prevents flashing when reopening Settings during test)
   if (isLoading && providers.length === 0) {
     return (
@@ -361,10 +450,27 @@ export function ProvidersPanel({
     <div className="space-y-4">
       <div className="flex items-center justify-between">
         <h3 className="text-lg font-medium">Providers</h3>
-        <Button onClick={() => setShowForm(true)} size="sm" className="gap-1">
-          <Plus className="size-4" />
-          Add Provider
-        </Button>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" onClick={() => handleExport(false)} className="gap-1">
+            <Download className="size-3" />
+            Export
+          </Button>
+          <Button variant="outline" size="sm" onClick={handleImportClick} className="gap-1">
+            <Upload className="size-3" />
+            Import
+          </Button>
+          <input
+            type="file"
+            ref={fileInputRef}
+            accept=".json"
+            onChange={handleFileChange}
+            style={{ display: "none" }}
+          />
+          <Button onClick={() => setShowForm(true)} size="sm" className="gap-1">
+            <Plus className="size-4" />
+            Add Provider
+          </Button>
+        </div>
       </div>
 
       {configPath !== null && (

package/src/components/proxy-viewer/ConversationGroup.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, memo } from "react";
 import type { JSX } from "react";
 import type { CapturedLog } from "../../proxy/schemas";
 import {
@@ -26,7 +26,7 @@ function computeStats(logs: CapturedLog[]): {
   return { totalInputTokens: totalInput, totalOutputTokens: totalOutput };
 }
 
-export function ConversationGroup({
+export const ConversationGroup = memo(function ConversationGroup({
   group,
   viewMode = "simple",
 }: ConversationGroupProps): JSX.Element {
@@ -65,4 +65,4 @@ export function ConversationGroup({
       )}
     </div>
   );
-}
+});

package/src/components/proxy-viewer/LogEntry.tsx

@@ -1,6 +1,6 @@
 import { Check, Copy, RotateCcw } from "lucide-react";
 import type { JSX } from "react";
-import { useMemo, useState } from "react";
+import { useMemo, useState, memo } from "react";
 import { cn } from "../../lib/utils";
 import { type CapturedLog, parseRequest } from "../../proxy/schemas";
 import { Button } from "../ui/button";
@@ -49,7 +49,10 @@ function CopyButton({
   );
 }
 
-export function LogEntry({ log, viewMode = "simple" }: LogEntryProps): JSX.Element {
+export const LogEntry = memo(function LogEntry({
+  log,
+  viewMode = "simple",
+}: LogEntryProps): JSX.Element {
   const [expanded, setExpanded] = useState<boolean>(false);
   const [requestCopied, setRequestCopied] = useState<boolean>(false);
   const [responseCopied, setResponseCopied] = useState<boolean>(false);
@@ -222,4 +225,4 @@ export function LogEntry({ log, viewMode = "simple" }: LogEntryProps): JSX.Eleme
       <ReplayDialog log={log} open={replayOpen} onOpenChange={setReplayOpen} />
     </>
   );
-}
+});

package/src/components/proxy-viewer/LogEntryHeader.tsx

@@ -12,6 +12,7 @@ import {
   Zap,
 } from "lucide-react";
 import type { JSX } from "react";
+import { memo } from "react";
 import { cn, formatTokens, getStatusCategory, type StatusCategory } from "../../lib/utils";
 import type { CapturedLog, InspectorRequest } from "../../proxy/schemas";
 import { Badge } from "../ui/badge";
@@ -42,7 +43,7 @@ export type LogEntryHeaderProps = {
   onToggle: () => void;
 };
 
-export function LogEntryHeader({
+export const LogEntryHeader = memo(function LogEntryHeader({
   log,
   parsedRequest,
   expanded,
@@ -247,4 +248,4 @@ export function LogEntryHeader({
       )}
     </div>
   );
-}
+});

package/src/proxy/formats/anthropic/stream.ts

@@ -63,9 +63,10 @@ export function extractAnthropicStream(
   const chunks: Array<{ index: number; timestamp: number; type: string; data: JsonValue }> = [];
 
   for (const line of raw.split("\n")) {
-    if (!line.startsWith("data: ")) continue;
+    const trimmedLine = line.trim();
+    if (!trimmedLine.startsWith("data: ")) continue;
     try {
-      const json: unknown = JSON.parse(line.slice(6));
+      const json: unknown = JSON.parse(trimmedLine.slice(6));
       const parsed = SseEventSchema.safeParse(json);
       if (!parsed.success) continue;
       const data = parsed.data;

package/src/proxy/formats/openai/stream.ts

@@ -35,8 +35,9 @@ export function extractOpenAIStream(
   const chunks: Array<{ index: number; timestamp: number; type: string; data: JsonValue }> = [];
 
   for (const line of raw.split("\n")) {
-    if (!line.startsWith("data: ")) continue;
-    const dataStr = line.slice(6).trim();
+    const trimmedLine = line.trim();
+    if (!trimmedLine.startsWith("data: ")) continue;
+    const dataStr = trimmedLine.slice(6);
     if (dataStr === "[DONE]") break;
 
     try {

package/src/proxy/handler.ts

@@ -127,6 +127,11 @@ function parseRequestPath(req: Request, url: URL): ParsedRequestPath {
 }
 
 function buildUpstreamUrl(upstreamBase: string, normalizedPath: string): string {
+  // Handle case where upstreamBase already ends with /v1 and normalizedPath starts with /v1/
+  // to avoid double /v1/v1/ duplication
+  if (upstreamBase.endsWith("/v1") && normalizedPath.startsWith("/v1/")) {
+    return upstreamBase + normalizedPath.slice(3); // Remove leading /v1 from path
+  }
   return upstreamBase + normalizedPath;
 }
 

package/src/proxy/providers.ts

@@ -202,6 +202,104 @@ export function deleteProvider(id: string): boolean {
   return true;
 }
 
+/**
+ * Export all providers as a JSON string (without API keys for security).
+ */
+export function exportProviders(): string {
+  const providers = getProviders();
+  // Mask API keys for security
+  const safeProviders = providers.map(({ apiKey, ...rest }) => ({
+    ...rest,
+    apiKey: maskApiKey(apiKey),
+  }));
+  return JSON.stringify(safeProviders, null, 2);
+}
+
+/**
+ * Export all providers as a JSON string including API keys (user must opt-in).
+ */
+export function exportProvidersWithKeys(): string {
+  return JSON.stringify(getProviders(), null, 2);
+}
+
+/**
+ * Import providers from a JSON string.
+ * Returns { imported: number, errors: string[] }
+ */
+export function importProviders(json: string): { imported: number; errors: string[] } {
+  const errors: string[] = [];
+  let imported = 0;
+
+  try {
+    const parsed: unknown = JSON.parse(json);
+
+    // Use Zod to validate the structure
+    const ImportSchema = z.union([
+      z.array(ProviderConfigSchema),
+      z.object({
+        providers: z.array(ProviderConfigSchema),
+      }),
+    ]);
+
+    const parseResult = ImportSchema.safeParse(parsed);
+    if (!parseResult.success) {
+      return {
+        imported: 0,
+        errors: [`Invalid format: ${parseResult.error.message}`],
+      };
+    }
+
+    const providerArray = Array.isArray(parseResult.data)
+      ? parseResult.data
+      : parseResult.data.providers;
+
+    for (let i = 0; i < providerArray.length; i++) {
+      const item = providerArray[i];
+      const result = ProviderConfigSchema.safeParse(item);
+
+      if (!result.success) {
+        errors.push(`Provider ${i + 1}: ${result.error.message}`);
+        continue;
+      }
+
+      const provider = result.data;
+      const existing = getProviders().find(
+        (p) => p.name === provider.name && p.anthropicBaseUrl === provider.anthropicBaseUrl,
+      );
+
+      if (existing) {
+        errors.push(`Provider "${provider.name}" already exists, skipping`);
+        continue;
+      }
+
+      // Generate new ID and add
+      const newProvider: ProviderConfig = {
+        ...provider,
+        id: randomUUID(),
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+      };
+
+      const providers = getProviders();
+      providers.push(newProvider);
+      store.set("providers", providers);
+      imported++;
+    }
+  } catch (err) {
+    return {
+      imported: 0,
+      errors: [`Failed to parse JSON: ${err instanceof Error ? err.message : String(err)}`],
+    };
+  }
+
+  return { imported, errors };
+}
+
+function maskApiKey(apiKey: string): string {
+  if (apiKey.length <= 8) return "••••••••";
+  return apiKey.slice(0, 4) + "••••••••" + apiKey.slice(-4);
+}
+
 /**
  * Converts display model name to API usage name based on provider-specific rules.
  * Default behavior: returns model as-is.

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

@@ -0,0 +1,26 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { exportProviders, exportProvidersWithKeys } from "../../proxy/providers";
+
+export const Route = createFileRoute("/api/providers/export")({
+  server: {
+    handlers: {
+      GET: ({ request }: { request: Request }) => {
+        const url = new URL(request.url);
+        const includeKeys = url.searchParams.get("includeKeys") === "true";
+
+        const json = includeKeys ? exportProvidersWithKeys() : exportProviders();
+
+        const filename = includeKeys
+          ? `llm-inspector-providers-${Date.now()}.json`
+          : `llm-inspector-providers-safe-${Date.now()}.json`;
+
+        return new Response(json, {
+          headers: {
+            "Content-Type": "application/json",
+            "Content-Disposition": `attachment; filename="${filename}"`,
+          },
+        });
+      },
+    },
+  },
+});

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

@@ -0,0 +1,47 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { z } from "zod";
+import { importProviders } from "../../proxy/providers";
+
+const ImportRequestSchema = z.union([z.string(), z.object({ providers: z.unknown() })]);
+
+export const Route = createFileRoute("/api/providers/import")({
+  server: {
+    handlers: {
+      POST: async ({ request }: { request: Request }) => {
+        try {
+          const rawBody = await request.text();
+          let jsonContent: string;
+          try {
+            const parsedBody: unknown = JSON.parse(rawBody);
+            jsonContent = typeof parsedBody === "string" ? parsedBody : JSON.stringify(parsedBody);
+          } catch {
+            jsonContent = rawBody;
+          }
+
+          if (!jsonContent || jsonContent.trim() === "") {
+            return Response.json({ error: "No JSON content provided" }, { status: 400 });
+          }
+
+          const result = importProviders(jsonContent);
+
+          return Response.json({
+            success: result.imported > 0,
+            imported: result.imported,
+            errors: result.errors,
+            message:
+              result.imported > 0
+                ? `Successfully imported ${result.imported} provider(s)`
+                : result.errors.length > 0
+                  ? `Import completed with ${result.errors.length} error(s)`
+                  : "No providers imported",
+          });
+        } catch (err) {
+          return Response.json(
+            { error: `Failed to import: ${err instanceof Error ? err.message : String(err)}` },
+            { status: 400 },
+          );
+        }
+      },
+    },
+  },
+});