@tonyclaw/llm-inspector 1.7.6 → 1.7.8

package/src/components/providers/ProvidersPanel.tsx

@@ -1,4 +1,4 @@
-import { type JSX, useState, useEffect, useCallback } from "react";
+import { type JSX, useState, useEffect, useCallback, useRef } from "react";
 import { Button } from "../ui/button";
 import { Plus, AlertCircle, Copy, Check } from "lucide-react";
 import { ProviderCard } from "./ProviderCard";
@@ -36,22 +36,71 @@ type StreamingTestResults = {
   streaming: TestResult | NotConfigured;
 };
 
-type TestResults = {
+export type TestResults = {
   anthropic: StreamingTestResults;
   openai: StreamingTestResults;
 };
 
-export function ProvidersPanel(): JSX.Element {
-  const [providers, setProviders] = useState<ProviderConfig[]>([]);
+type ProvidersPanelProps = {
+  externalProviders?: ProviderConfig[];
+  externalTestResults?: Record<string, TestResults>;
+  externalTestingProviders?: Set<string>;
+  externalTestingTimeLeft?: Record<string, number>;
+  onProvidersChange?: (providers: ProviderConfig[]) => void;
+  onTestResultsChange?: (providerId: string, results: TestResults) => void;
+  onTestingProvidersChange?: (providerId: string, isTesting: boolean) => void;
+  onTestingTimeLeftChange?: (providerId: string, seconds: number | undefined) => void;
+};
+
+export function ProvidersPanel({
+  externalProviders,
+  externalTestResults,
+  externalTestingProviders,
+  externalTestingTimeLeft,
+  onProvidersChange,
+  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);
-  const [testResults, setTestResults] = useState<Record<string, TestResults>>({});
-  const [testingProviders, setTestingProviders] = useState<Set<string>>(new Set());
+  const [internalTestResults, setInternalTestResults] = useState<Record<string, TestResults>>({});
+  const [internalTestingProviders, setInternalTestingProviders] = useState<Set<string>>(new Set());
+  const [internalTestingTimeLeft, setInternalTestingTimeLeft] = useState<Record<string, number>>(
+    {},
+  );
   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;
+  const testResults = externalTestResults ?? internalTestResults;
+  const setTestResults = onTestResultsChange
+    ? (id: string, results: TestResults) => onTestResultsChange(id, results)
+    : setInternalTestResults;
+  const testingProviders = externalTestingProviders ?? internalTestingProviders;
+  const setTestingProviders = onTestingProvidersChange
+    ? (id: string, isTesting: boolean) => onTestingProvidersChange(id, isTesting)
+    : setInternalTestingProviders;
+  const testingTimeLeft = externalTestingTimeLeft ?? internalTestingTimeLeft;
+  const setTestingTimeLeft = onTestingTimeLeftChange
+    ? (id: string, seconds: number | undefined) => onTestingTimeLeftChange(id, seconds)
+    : (id: string, seconds: number | undefined) => {
+        if (seconds === undefined) {
+          setInternalTestingTimeLeft((prev) => {
+            const next = { ...prev };
+            delete next[id];
+            return next;
+          });
+        } else {
+          setInternalTestingTimeLeft((prev) => ({ ...prev, [id]: seconds }));
+        }
+      };
+
   const fetchProviders = useCallback(async (): Promise<void> => {
     try {
       const providersRes = await fetch("/api/providers");
@@ -81,23 +130,111 @@ export function ProvidersPanel(): JSX.Element {
     })();
   }, [fetchProviders]);
 
-  const runTest = useCallback(async (providerId: string): Promise<void> => {
-    setTestingProviders((prev) => new Set(prev).add(providerId));
-    try {
-      const res = await fetch(`/api/providers/${providerId}/test`, { method: "POST" });
-      if (res.ok) {
-        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        const results = (await res.json()) as TestResults;
-        setTestResults((prev) => ({ ...prev, [providerId]: results }));
+  const TEST_TIMEOUT_SECONDS = 30;
+
+  const runTest = useCallback(
+    async (providerId: string): Promise<void> => {
+      // Use callback form if available, otherwise direct set
+      if (onTestingProvidersChange) {
+        onTestingProvidersChange(providerId, true);
+      } else {
+        setInternalTestingProviders((prev) => new Set(prev).add(providerId));
       }
-    } finally {
-      setTestingProviders((prev) => {
-        const next = new Set(prev);
-        next.delete(providerId);
-        return next;
-      });
-    }
-  }, []);
+
+      // Create abort controller for this test request
+      const controller = new AbortController();
+
+      // Start countdown
+      let remaining = TEST_TIMEOUT_SECONDS;
+      setTestingTimeLeft(providerId, remaining);
+      const intervalId = setInterval(() => {
+        remaining--;
+        setTestingTimeLeft(providerId, remaining);
+        if (remaining <= 0) {
+          clearInterval(intervalId);
+          // Abort the fetch request when time runs out
+          controller.abort();
+        }
+      }, 1000);
+
+      try {
+        const res = await fetch(`/api/providers/${providerId}/test`, {
+          method: "POST",
+          signal: controller.signal,
+        });
+        if (res.ok) {
+          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+          const results = (await res.json()) as TestResults;
+          if (onTestResultsChange) {
+            onTestResultsChange(providerId, results);
+          } else {
+            setInternalTestResults((prev) => ({ ...prev, [providerId]: results }));
+          }
+        } else {
+          // Non-ok response, create error result
+          const errorResult: TestResults = {
+            anthropic: {
+              nonStreaming: {
+                success: false,
+                error: { message: `HTTP ${res.status}: ${res.statusText}`, type: "server_error" },
+              },
+              streaming: { notConfigured: true },
+            },
+            openai: {
+              nonStreaming: {
+                success: false,
+                error: { message: `HTTP ${res.status}: ${res.statusText}`, type: "server_error" },
+              },
+              streaming: { notConfigured: true },
+            },
+          };
+          if (onTestResultsChange) {
+            onTestResultsChange(providerId, errorResult);
+          } else {
+            setInternalTestResults((prev) => ({ ...prev, [providerId]: errorResult }));
+          }
+        }
+      } catch (err) {
+        // Check if this was an abort (timeout)
+        if (err instanceof Error && err.name === "AbortError") {
+          const timeoutResult: TestResults = {
+            anthropic: {
+              nonStreaming: {
+                success: false,
+                error: { message: "Request timed out", type: "timeout" },
+              },
+              streaming: { notConfigured: true },
+            },
+            openai: {
+              nonStreaming: {
+                success: false,
+                error: { message: "Request timed out", type: "timeout" },
+              },
+              streaming: { notConfigured: true },
+            },
+          };
+          if (onTestResultsChange) {
+            onTestResultsChange(providerId, timeoutResult);
+          } else {
+            setInternalTestResults((prev) => ({ ...prev, [providerId]: timeoutResult }));
+          }
+        }
+      } finally {
+        clearInterval(intervalId);
+        setTestingTimeLeft(providerId, undefined);
+        if (onTestingProvidersChange) {
+          onTestingProvidersChange(providerId, false);
+        } else {
+          setInternalTestingProviders((prev) => {
+            const next = new Set(prev);
+            next.delete(providerId);
+            return next;
+          });
+        }
+      }
+    },
+    [onTestingProvidersChange, onTestResultsChange, setTestingTimeLeft],
+  );
 
   function handleAddProvider(data: {
     name: string;
@@ -279,6 +416,7 @@ export function ProvidersPanel(): JSX.Element {
               provider={provider}
               testResults={testResults[provider.id]}
               isTesting={testingProviders.has(provider.id)}
+              testingTimeLeft={testingTimeLeft[provider.id]}
               onEdit={(p) => setEditingProvider(p)}
               onDelete={handleDeleteProvider}
               onTest={(id: string) => {

package/src/components/providers/SettingsDialog.tsx

@@ -1,13 +1,53 @@
-import { type JSX, useState } from "react";
+import { type JSX, useState, useCallback } from "react";
 import { Settings } from "lucide-react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "../ui/tabs";
 import { Button } from "../ui/button";
 import { ProvidersPanel } from "./ProvidersPanel";
+import type { ProviderConfig } from "../../proxy/providers";
 
 export function SettingsDialog(): JSX.Element {
   const [open, setOpen] = useState(false);
   const [activeTab, setActiveTab] = useState("providers");
+  const [providers, setProviders] = useState<ProviderConfig[]>([]);
+  const [testResults, setTestResults] = useState<
+    Record<string, import("./ProvidersPanel").TestResults>
+  >({});
+  const [testingProviders, setTestingProviders] = useState<Set<string>>(new Set());
+  const [testingTimeLeft, setTestingTimeLeft] = useState<Record<string, number>>({});
+
+  const handleTestResultsChange = useCallback(
+    (providerId: string, results: import("./ProvidersPanel").TestResults) => {
+      setTestResults((prev) => ({ ...prev, [providerId]: results }));
+    },
+    [],
+  );
+
+  const handleTestingProvidersChange = useCallback((providerId: string, isTesting: boolean) => {
+    setTestingProviders((prev) => {
+      const next = new Set(prev);
+      if (isTesting) {
+        next.add(providerId);
+      } else {
+        next.delete(providerId);
+      }
+      return next;
+    });
+  }, []);
+
+  const handleTestingTimeLeftChange = useCallback(
+    (providerId: string, seconds: number | undefined) => {
+      setTestingTimeLeft((prev) => {
+        if (seconds === undefined) {
+          const next = { ...prev };
+          delete next[providerId];
+          return next;
+        }
+        return { ...prev, [providerId]: seconds };
+      });
+    },
+    [],
+  );
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
@@ -29,7 +69,16 @@ export function SettingsDialog(): JSX.Element {
 
           <div className="mt-4 overflow-y-auto flex-1">
             <TabsContent value="providers">
-              <ProvidersPanel />
+              <ProvidersPanel
+                externalProviders={providers}
+                externalTestResults={testResults}
+                externalTestingProviders={testingProviders}
+                externalTestingTimeLeft={testingTimeLeft}
+                onProvidersChange={setProviders}
+                onTestResultsChange={handleTestResultsChange}
+                onTestingProvidersChange={handleTestingProvidersChange}
+                onTestingTimeLeftChange={handleTestingTimeLeftChange}
+              />
             </TabsContent>
           </div>
         </Tabs>