@tonyclaw/llm-inspector 1.7.8 → 1.8.0

package/src/components/ProxyViewer.tsx

@@ -3,6 +3,7 @@ import { useVirtualizer } from "@tanstack/react-virtual";
 import { Download, LayoutGrid, List } from "lucide-react";
 import type { CapturedLog } from "../proxy/schemas";
 import { exportLogsAsZip } from "../lib/export-logs";
+import packageJson from "../../package.json";
 import {
   ConversationGroup,
   groupLogsByConversation,
@@ -142,6 +143,7 @@ export function ProxyViewer({
       {/* Header */}
       <div className="flex items-center gap-4 mb-4 px-6 pt-6">
         <h1 className="text-lg font-bold flex-1">LLM Proxy Inspector</h1>
+        <span className="text-muted-foreground text-xs font-mono">v{packageJson.version}</span>
         <div className="flex items-center border border-border rounded-md overflow-hidden">
           <button
             type="button"

package/src/components/providers/ProviderCard.tsx

@@ -49,9 +49,11 @@ type TestResult = {
 
 type NotConfigured = { notConfigured: true };
 
+type Testing = { testing: true };
+
 type StreamingTestResults = {
-  nonStreaming: TestResult | NotConfigured;
-  streaming: TestResult | NotConfigured;
+  nonStreaming: TestResult | NotConfigured | Testing;
+  streaming: TestResult | NotConfigured | Testing;
 };
 
 type TestResults = {
@@ -74,10 +76,17 @@ function maskApiKey(apiKey: string): string {
   return apiKey.slice(0, 4) + "••••••••" + apiKey.slice(-4);
 }
 
-function hasSuccessField(result: TestResult | NotConfigured): result is TestResult {
+function hasSuccessField(result: TestResult | NotConfigured | Testing): result is TestResult {
   return Object.prototype.hasOwnProperty.call(result, "success");
 }
 
+// Using Object.prototype.hasOwnProperty.call to avoid 'in' operator
+function isNotConfiguredState(
+  result: TestResult | NotConfigured | Testing,
+): result is NotConfigured {
+  return Object.prototype.hasOwnProperty.call(result, "notConfigured");
+}
+
 function getErrorIcon(type: ErrorType): JSX.Element {
   const iconProps = { className: "size-3", strokeWidth: 2 };
   switch (type) {
@@ -102,24 +111,28 @@ function getErrorIcon(type: ErrorType): JSX.Element {
   }
 }
 
-function TestStatus({
-  result,
-  isTesting,
-}: {
-  result: TestResult | NotConfigured;
-  isTesting?: boolean;
-}): JSX.Element {
+function TestStatus({ result }: { result: TestResult | NotConfigured | Testing }): JSX.Element {
   if (!hasSuccessField(result)) {
+    // Not TestResult - check if NotConfigured or Testing
+    if (isNotConfiguredState(result)) {
+      return (
+        <div className="flex items-center gap-1 text-xs text-muted-foreground shrink-0">
+          <Minus className="size-3" />
+          <span>Not configured</span>
+        </div>
+      );
+    }
+    // Must be Testing state
     return (
-      <div className="flex items-center gap-1 text-xs text-muted-foreground">
-        <Minus className="size-3" />
-        <span>Not configured</span>
+      <div className="flex items-center gap-1 text-xs text-muted-foreground shrink-0">
+        <RotateCw className="size-3 animate-spin" />
+        <span>Testing...</span>
       </div>
     );
   }
   if (result.success) {
     return (
-      <div className="flex items-center gap-1 text-xs text-green-600">
+      <div className="flex items-center gap-1 text-xs text-green-600 shrink-0">
         <CheckCircle className="size-3" />
         <span>Connected</span>
       </div>
@@ -131,20 +144,16 @@ function TestStatus({
   const errorHint = error?.hint;
   const errorType = error?.type ?? "unknown";
 
+  // Combine message and hint in a single line for consistent layout
+  const fullMessage = errorHint !== undefined ? `${errorMessage} — ${errorHint}` : errorMessage;
+
   return (
-    <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
+      className="flex items-center gap-1 text-xs text-red-600 shrink-0 max-w-[200px]"
+      title={error?.details ?? fullMessage}
+    >
+      {getErrorIcon(errorType)}
+      <span className="truncate">{errorMessage}</span>
     </div>
   );
 }
@@ -207,9 +216,7 @@ export function ProviderCard({
             <span className="font-medium">Anthropic:</span>{" "}
             <span className="truncate">{provider.anthropicBaseUrl}</span>
           </div>
-          {testResults && (
-            <TestStatus result={testResults.anthropic.nonStreaming} isTesting={isTesting} />
-          )}
+          {testResults && <TestStatus result={testResults.anthropic.nonStreaming} />}
         </div>
       )}
 
@@ -219,9 +226,7 @@ export function ProviderCard({
             <span className="font-medium">OpenAI:</span>{" "}
             <span className="truncate">{provider.openaiBaseUrl}</span>
           </div>
-          {testResults && (
-            <TestStatus result={testResults.openai.nonStreaming} isTesting={isTesting} />
-          )}
+          {testResults && <TestStatus result={testResults.openai.nonStreaming} />}
         </div>
       )}
 

package/src/components/providers/ProviderLogo.tsx

@@ -50,7 +50,12 @@ const AnthropicLogo = React.memo(
 
 const OpenAILogo = React.memo(
   ({ className }: { className?: string }): JSX.Element => (
-    <img src={OpenAILogoSvg} alt="OpenAI" className={className} style={sizeStyle} />
+    <img
+      src={OpenAILogoSvg}
+      alt="OpenAI"
+      className={className}
+      style={{ ...sizeStyle, background: "white", borderRadius: "4px" }}
+    />
   ),
 );
 

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";
@@ -31,9 +32,11 @@ type TestResult = {
 
 type NotConfigured = { notConfigured: true };
 
+type Testing = { testing: true };
+
 type StreamingTestResults = {
-  nonStreaming: TestResult | NotConfigured;
-  streaming: TestResult | NotConfigured;
+  nonStreaming: TestResult | NotConfigured | Testing;
+  streaming: TestResult | NotConfigured | Testing;
 };
 
 export type TestResults = {
@@ -46,7 +49,7 @@ type ProvidersPanelProps = {
   externalTestResults?: Record<string, TestResults>;
   externalTestingProviders?: Set<string>;
   externalTestingTimeLeft?: Record<string, number>;
-  onProvidersChange?: (providers: ProviderConfig[]) => void;
+  onProvidersMutate?: () => void;
   onTestResultsChange?: (providerId: string, results: TestResults) => void;
   onTestingProvidersChange?: (providerId: string, isTesting: boolean) => void;
   onTestingTimeLeftChange?: (providerId: string, seconds: number | undefined) => void;
@@ -57,13 +60,11 @@ export function ProvidersPanel({
   externalTestResults,
   externalTestingProviders,
   externalTestingTimeLeft,
-  onProvidersChange,
+  onProvidersMutate,
   onTestResultsChange,
   onTestingProvidersChange,
   onTestingTimeLeftChange,
 }: ProvidersPanelProps): JSX.Element {
-  const [internalProviders, setInternalProviders] = useState<ProviderConfig[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
   const [showForm, setShowForm] = useState(false);
   const [editingProvider, setEditingProvider] = useState<ProviderConfig | undefined>();
   const [error, setError] = useState<string | null>(null);
@@ -75,9 +76,8 @@ export function ProvidersPanel({
   const [configPath, setConfigPath] = useState<string | null>(null);
   const [configPathCopied, setConfigPathCopied] = useState(false);
 
-  // Use external state if provided, otherwise use internal state
-  const providers = externalProviders ?? internalProviders;
-  const setProviders = onProvidersChange ?? setInternalProviders;
+  // Use external state if provided (from SWR), otherwise use internal state
+  const providers = externalProviders ?? [];
   const testResults = externalTestResults ?? internalTestResults;
   const setTestResults = onTestResultsChange
     ? (id: string, results: TestResults) => onTestResultsChange(id, results)
@@ -101,21 +101,7 @@ export function ProvidersPanel({
         }
       };
 
-  const fetchProviders = useCallback(async (): Promise<void> => {
-    try {
-      const providersRes = await fetch("/api/providers");
-      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      const providersData = (await providersRes.json()) as ProviderConfig[];
-      setProviders(providersData);
-    } catch {
-      setError("Failed to load providers");
-    } finally {
-      setIsLoading(false);
-    }
-  }, []);
-
   useEffect(() => {
-    void fetchProviders();
     void (async () => {
       try {
         const res = await fetch("/api/config/paths");
@@ -128,12 +114,23 @@ export function ProvidersPanel({
         // Ignore
       }
     })();
-  }, [fetchProviders]);
+  }, []);
 
   const TEST_TIMEOUT_SECONDS = 30;
 
   const runTest = useCallback(
     async (providerId: string): Promise<void> => {
+      // Clear previous test results when starting a new test
+      const resetResults: TestResults = {
+        anthropic: { nonStreaming: { testing: true }, streaming: { testing: true } },
+        openai: { nonStreaming: { testing: true }, streaming: { testing: 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 +193,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 +217,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
         }
       }
     },
@@ -266,7 +272,7 @@ export function ProvidersPanel({
       }
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       const newProvider = (await res.json()) as ProviderConfig;
-      await fetchProviders();
+      onProvidersMutate?.();
       setShowForm(false);
       // Run test on new provider
       await runTest(newProvider.id);
@@ -304,7 +310,7 @@ export function ProvidersPanel({
       }
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       const updated = (await res.json()) as ProviderConfig;
-      await fetchProviders();
+      onProvidersMutate?.();
       setEditingProvider(undefined);
       // Run test on updated provider
       await runTest(updated.id);
@@ -324,12 +330,80 @@ export function ProvidersPanel({
         setError(err.error ?? "Failed to delete provider");
         return;
       }
-      await fetchProviders();
+      onProvidersMutate?.();
+    })();
+  }
+
+  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) {
+          onProvidersMutate?.();
+          // 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) {
+  if (providers.length === 0) {
     return (
       <div className="flex items-center justify-center py-8">
         <p className="text-sm text-muted-foreground">Loading providers...</p>
@@ -359,12 +433,39 @@ export function ProvidersPanel({
 
   return (
     <div className="space-y-4">
-      <div className="flex items-center justify-between">
+      <div className="flex items-center justify-between sticky top-0 z-10 bg-background pb-2">
         <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 hover:bg-muted"
+          >
+            <Download className="size-3" />
+            Export
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleImportClick}
+            className="gap-1 hover:bg-muted"
+          >
+            <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/providers/SettingsDialog.tsx

@@ -4,12 +4,12 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "../ui/tabs";
 import { Button } from "../ui/button";
 import { ProvidersPanel } from "./ProvidersPanel";
-import type { ProviderConfig } from "../../proxy/providers";
+import { useProviders } from "../../lib/useProviders";
 
 export function SettingsDialog(): JSX.Element {
   const [open, setOpen] = useState(false);
   const [activeTab, setActiveTab] = useState("providers");
-  const [providers, setProviders] = useState<ProviderConfig[]>([]);
+  const { providers, mutate } = useProviders();
   const [testResults, setTestResults] = useState<
     Record<string, import("./ProvidersPanel").TestResults>
   >({});
@@ -74,7 +74,9 @@ export function SettingsDialog(): JSX.Element {
                 externalTestResults={testResults}
                 externalTestingProviders={testingProviders}
                 externalTestingTimeLeft={testingTimeLeft}
-                onProvidersChange={setProviders}
+                onProvidersMutate={() => {
+                  void mutate();
+                }}
                 onTestResultsChange={handleTestResultsChange}
                 onTestingProvidersChange={handleTestingProvidersChange}
                 onTestingTimeLeftChange={handleTestingTimeLeftChange}

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/lib/useProviders.ts

@@ -0,0 +1,30 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/consistent-type-assertions */
+import useSWR, { type SWRResponse } from "swr";
+import type { ProviderConfig } from "../proxy/providers";
+
+async function fetcher(url: string): Promise<ProviderConfig[]> {
+  const response = await fetch(url);
+  const data = await response.json();
+  if (!Array.isArray(data)) {
+    return [];
+  }
+  return data as ProviderConfig[];
+}
+
+export function useProviders() {
+  const response: SWRResponse<ProviderConfig[], Error> = useSWR<ProviderConfig[], Error>(
+    "/api/providers",
+    fetcher,
+    {
+      revalidateOnFocus: false,
+      revalidateIfStale: false,
+    },
+  );
+
+  return {
+    providers: response.data ?? [],
+    isLoading: response.isLoading,
+    isError: response.error,
+    mutate: response.mutate,
+  };
+}

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;
 }