@tonyclaw/llm-inspector 1.7.9 → 1.9.0

package/.output/server/_libs/use-sync-external-store.mjs

@@ -1 +1,64 @@
-
+import { b as requireReact } from "./react.mjs";
+var shim = { exports: {} };
+var useSyncExternalStoreShim_production = {};
+var hasRequiredUseSyncExternalStoreShim_production;
+function requireUseSyncExternalStoreShim_production() {
+  if (hasRequiredUseSyncExternalStoreShim_production) return useSyncExternalStoreShim_production;
+  hasRequiredUseSyncExternalStoreShim_production = 1;
+  var React = /* @__PURE__ */ requireReact();
+  function is(x, y) {
+    return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
+  }
+  var objectIs = "function" === typeof Object.is ? Object.is : is, useState = React.useState, useEffect = React.useEffect, useLayoutEffect = React.useLayoutEffect, useDebugValue = React.useDebugValue;
+  function useSyncExternalStore$2(subscribe, getSnapshot) {
+    var value = getSnapshot(), _useState = useState({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
+    useLayoutEffect(
+      function() {
+        inst.value = value;
+        inst.getSnapshot = getSnapshot;
+        checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+      },
+      [subscribe, value, getSnapshot]
+    );
+    useEffect(
+      function() {
+        checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+        return subscribe(function() {
+          checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+        });
+      },
+      [subscribe]
+    );
+    useDebugValue(value);
+    return value;
+  }
+  function checkIfSnapshotChanged(inst) {
+    var latestGetSnapshot = inst.getSnapshot;
+    inst = inst.value;
+    try {
+      var nextValue = latestGetSnapshot();
+      return !objectIs(inst, nextValue);
+    } catch (error) {
+      return true;
+    }
+  }
+  function useSyncExternalStore$1(subscribe, getSnapshot) {
+    return getSnapshot();
+  }
+  var shim2 = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
+  useSyncExternalStoreShim_production.useSyncExternalStore = void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim2;
+  return useSyncExternalStoreShim_production;
+}
+var hasRequiredShim;
+function requireShim() {
+  if (hasRequiredShim) return shim.exports;
+  hasRequiredShim = 1;
+  {
+    shim.exports = /* @__PURE__ */ requireUseSyncExternalStoreShim_production();
+  }
+  return shim.exports;
+}
+var shimExports = /* @__PURE__ */ requireShim();
+export {
+  shimExports as s
+};

package/.output/server/_ssr/{index-CAIDMqNv.mjs → index-COIATcfa.mjs}

@@ -1,5 +1,5 @@
 import { r as reactExports, j as jsxRuntimeExports, a as React } from "../_libs/react.mjs";
-import { C as CapturedLogSchema, a as parseRequest, p as parseOpenAIResponse, I as InspectorResponseSchema } from "./router-CsCLdrXq.mjs";
+import { C as CapturedLogSchema, a as parseRequest, p as parseOpenAIResponse, I as InspectorResponseSchema } from "./router-CwmgKXBJ.mjs";
 import { u as useVirtualizer } from "../_libs/tanstack__react-virtual.mjs";
 import { J as JSZip } from "../_libs/jszip.mjs";
 import { c as clsx } from "../_libs/clsx.mjs";
@@ -7,6 +7,7 @@ import { t as twMerge } from "../_libs/tailwind-merge.mjs";
 import { c as cva } from "../_libs/class-variance-authority.mjs";
 import { R as Root, T as Trigger$1, C as Content, a as Close, b as Title, P as Portal$1, O as Overlay } from "../_libs/radix-ui__react-dialog.mjs";
 import { R as Root2, T as Trigger, I as Icon, V as Value, P as Portal, C as Content2, a as Viewport, b as Item, c as ItemIndicator, d as ItemText, S as ScrollUpButton, e as ScrollDownButton } from "../_libs/radix-ui__react-select.mjs";
+import { u as useSWR } from "../_libs/swr.mjs";
 import { D as Download, L as LayoutGrid, a as List, S as Settings, C as ChevronDown, b as Check, R as RotateCcw, X, U as Upload, P as Plus, c as Copy, d as CircleAlert, e as ChevronUp, f as ChevronRight, g as Clock, M as MessageSquare, Z as Zap, h as LoaderCircle, W as Wrench, G as Globe, i as User, F as FileTerminal, j as Radio, E as ExternalLink, k as EyeOff, l as Eye, m as RotateCw, n as Pencil, T as Trash2, o as TriangleAlert, p as Minus, q as CircleCheckBig, r as CircleStop, s as CircleQuestionMark, t as Server, u as Gauge, v as Lock, w as Wifi, x as WifiOff, y as ChevronsUp, z as ChevronsDown, A as Terminal, B as Brain } from "../_libs/lucide-react.mjs";
 import { M as Markdown } from "../_libs/react-markdown.mjs";
 import { a as array, s as string, u as union, o as object, l as literal, n as number, b as boolean } from "../_libs/zod.mjs";
@@ -57,6 +58,8 @@ import "../_libs/mimic-function.mjs";
 import "../_libs/semver.mjs";
 import "../_libs/uint8array-extras.mjs";
 import "node:child_process";
+import "../_libs/use-sync-external-store.mjs";
+import "../_libs/dequal.mjs";
 import "../_libs/tanstack__virtual-core.mjs";
 import "../_libs/readable-stream.mjs";
 import "../_libs/process-nextick-args.mjs";
@@ -196,6 +199,10 @@ async function exportLogsAsZip(logs) {
   document.body.removeChild(anchor);
   URL.revokeObjectURL(url);
 }
+const version = "1.9.0";
+const packageJson = {
+  version
+};
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -891,7 +898,15 @@ const AnthropicLogo = React.memo(
   ({ className }) => /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: AnthropicLogoSvg, alt: "Anthropic", className, style: sizeStyle })
 );
 const OpenAILogo = React.memo(
-  ({ className }) => /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: OpenAILogoSvg, alt: "OpenAI", className, style: sizeStyle })
+  ({ className }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "img",
+    {
+      src: OpenAILogoSvg,
+      alt: "OpenAI",
+      className,
+      style: { ...sizeStyle, background: "white", borderRadius: "4px" }
+    }
+  )
 );
 const DeepSeekLogo = React.memo(
   ({ className }) => /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: DeepSeekLogoSvg, alt: "DeepSeek", className, style: sizeStyle })
@@ -1494,22 +1509,37 @@ function ResponseView({
   outputTokens,
   cacheCreationInputTokens,
   cacheReadInputTokens,
-  apiFormat
+  apiFormat,
+  error
 }) {
-  if (responseText === null) {
+  if (responseText === null && error === void 0) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 py-3", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(StatusIndicator, { status: responseStatus }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-muted-foreground italic", children: "No response" })
     ] });
   }
-  const isError = responseStatus !== null && responseStatus >= 400;
-  if (isError) {
+  const isHttpError = responseStatus !== null && responseStatus >= 400;
+  if (isHttpError) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(StatusIndicator, { status: responseStatus }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorResponseView, { text: responseText })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorResponseView, { text: responseText ?? "" }),
+      error !== void 0 && error !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded border border-destructive/50 bg-destructive/10 p-3 text-xs", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold text-destructive mb-1", children: "SSE Error" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-muted-foreground font-mono", children: error })
+      ] })
     ] });
   }
-  const parsed = parseResponse(responseText, apiFormat);
+  if (error !== void 0 && error !== null) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(StatusIndicator, { status: responseStatus }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded border border-destructive/50 bg-destructive/10 p-3 text-xs", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold text-destructive mb-1", children: "SSE Error" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-muted-foreground font-mono", children: error })
+      ] }),
+      responseText !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorResponseView, { text: responseText }) })
+    ] });
+  }
+  const parsed = responseText !== null ? parseResponse(responseText, apiFormat) : null;
   if (parsed !== null) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(StatusIndicator, { status: responseStatus }),
@@ -1538,7 +1568,7 @@ function ResponseView({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(MarkdownFallbackView, { text: responseText })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(MarkdownFallbackView, { text: responseText ?? "" })
   ] });
 }
 const ReplayResultSchema = object({
@@ -1921,6 +1951,10 @@ const LogEntry = reactExports.memo(function LogEntry2({
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground truncate", title: value, children: value })
         ] }, key)) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No raw headers captured" }) }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-3 space-y-3", children: [
+          log.error !== void 0 && log.error !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded border border-destructive/50 bg-destructive/10 p-3 text-xs", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold text-destructive mb-1", children: "SSE Error" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-muted-foreground font-mono", children: log.error })
+          ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             CopyButton,
             {
@@ -1949,7 +1983,8 @@ const LogEntry = reactExports.memo(function LogEntry2({
             outputTokens: log.outputTokens,
             cacheCreationInputTokens: log.cacheCreationInputTokens,
             cacheReadInputTokens: log.cacheReadInputTokens,
-            apiFormat: log.apiFormat
+            apiFormat: log.apiFormat,
+            error: log.error
           }
         ) }) })
       ] }) })
@@ -2120,6 +2155,9 @@ function maskApiKey(apiKey) {
 function hasSuccessField(result) {
   return Object.prototype.hasOwnProperty.call(result, "success");
 }
+function isNotConfiguredState(result) {
+  return Object.prototype.hasOwnProperty.call(result, "notConfigured");
+}
 function getErrorIcon(type) {
   const iconProps = { className: "size-3", strokeWidth: 2 };
   switch (type) {
@@ -2143,18 +2181,21 @@ function getErrorIcon(type) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { ...iconProps });
   }
 }
-function TestStatus({
-  result,
-  isTesting
-}) {
+function TestStatus({ result }) {
   if (!hasSuccessField(result)) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Minus, { className: "size-3" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Not configured" })
+    if (isNotConfiguredState(result)) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 text-xs text-muted-foreground shrink-0", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Minus, { className: "size-3" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Not configured" })
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 text-xs text-muted-foreground shrink-0", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(RotateCw, { className: "size-3 animate-spin" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Testing..." })
     ] });
   }
   if (result.success) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 text-xs text-green-600", children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 text-xs text-green-600 shrink-0", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(CircleCheckBig, { className: "size-3" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Connected" })
     ] });
@@ -2163,20 +2204,18 @@ function TestStatus({
   const errorMessage = error?.message ?? "Connection failed";
   const errorHint = error?.hint;
   const errorType = error?.type ?? "unknown";
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-1 min-w-0", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "div",
-      {
-        className: "flex items-center gap-1 text-xs text-red-600 min-w-0",
-        title: error?.details ?? errorMessage,
-        children: [
-          getErrorIcon(errorType),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate", children: errorMessage })
-        ]
-      }
-    ),
-    errorHint !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-muted-foreground pl-4 truncate", title: errorHint, children: errorHint })
-  ] });
+  const fullMessage = errorHint !== void 0 ? `${errorMessage} — ${errorHint}` : errorMessage;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: "flex items-center gap-1 text-xs text-red-600 shrink-0 max-w-[200px]",
+      title: error?.details ?? fullMessage,
+      children: [
+        getErrorIcon(errorType),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate", children: errorMessage })
+      ]
+    }
+  );
 }
 function ProviderCard({
   provider,
@@ -2188,25 +2227,25 @@ function ProviderCard({
   onTest
 }) {
   const [showApiKey, setShowApiKey] = reactExports.useState(false);
+  const docsUrl = provider.apiDocsUrl ?? Object.entries(KNOWN_PROVIDER_DOCS).find(
+    ([keyword]) => provider.name.toLowerCase().includes(keyword)
+  )?.[1];
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border rounded-lg p-4 flex flex-col gap-3 bg-card", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between gap-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-2 min-w-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium truncate", children: provider.model !== void 0 && provider.model !== "" ? `${provider.model} (${provider.name})` : provider.name }) }),
-      Object.entries(KNOWN_PROVIDER_DOCS).map(
-        ([keyword, url]) => provider.name.toLowerCase().includes(keyword) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "a",
-          {
-            href: url,
-            target: "_blank",
-            rel: "noopener noreferrer",
-            className: "text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1 text-xs",
-            title: "View API documentation",
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { className: "size-3" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Docs" })
-            ]
-          },
-          keyword
-        ) : null
+      docsUrl !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "a",
+        {
+          href: docsUrl,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1 text-xs",
+          title: "View API documentation",
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ExternalLink, { className: "size-3" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Docs" })
+          ]
+        }
       )
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
@@ -2228,7 +2267,7 @@ function ProviderCard({
         " ",
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate", children: provider.anthropicBaseUrl })
       ] }),
-      testResults && /* @__PURE__ */ jsxRuntimeExports.jsx(TestStatus, { result: testResults.anthropic.nonStreaming, isTesting })
+      testResults && /* @__PURE__ */ jsxRuntimeExports.jsx(TestStatus, { result: testResults.anthropic.nonStreaming })
     ] }),
     provider.openaiBaseUrl !== void 0 && provider.openaiBaseUrl !== "" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-muted-foreground min-w-0 flex-1", children: [
@@ -2236,7 +2275,7 @@ function ProviderCard({
         " ",
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate", children: provider.openaiBaseUrl })
       ] }),
-      testResults && /* @__PURE__ */ jsxRuntimeExports.jsx(TestStatus, { result: testResults.openai.nonStreaming, isTesting })
+      testResults && /* @__PURE__ */ jsxRuntimeExports.jsx(TestStatus, { result: testResults.openai.nonStreaming })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 pt-1 border-t", children: [
       onTest !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -2312,6 +2351,7 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
   const [model, setModel] = reactExports.useState(provider?.model ?? "");
   const [format, setFormat] = reactExports.useState(provider?.format ?? "anthropic");
   const [baseUrl, setBaseUrl] = reactExports.useState(provider?.baseUrl ?? "");
+  const [apiDocsUrl, setApiDocsUrl] = reactExports.useState(provider?.apiDocsUrl ?? "");
   const [errors, setErrors] = reactExports.useState({});
   const [isSubmitting, setIsSubmitting] = reactExports.useState(false);
   const [manualBaseUrlOverride, setManualBaseUrlOverride] = reactExports.useState(false);
@@ -2324,6 +2364,7 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
       setModel(provider.model ?? "");
       setFormat(provider.format ?? "anthropic");
       setBaseUrl(provider.baseUrl ?? "");
+      setApiDocsUrl(provider.apiDocsUrl ?? "");
       setManualBaseUrlOverride(false);
     }
   }, [provider]);
@@ -2382,7 +2423,8 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
         apiKey: apiKey.trim(),
         model: model.trim() || void 0,
         format,
-        baseUrl: baseUrl.trim() || void 0
+        baseUrl: baseUrl.trim() || void 0,
+        apiDocsUrl: apiDocsUrl.trim() || void 0
       });
     } finally {
       setIsSubmitting(false);
@@ -2494,6 +2536,21 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
       errors.baseUrl !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-destructive", children: errors.baseUrl }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "Base URL for the provider API." })
     ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "provider-api-docs-url", className: "text-sm font-medium", children: "API Docs URL" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "input",
+        {
+          id: "provider-api-docs-url",
+          type: "text",
+          value: apiDocsUrl,
+          onChange: (e) => setApiDocsUrl(e.target.value),
+          placeholder: "https://api.example.com/docs",
+          className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "Optional API documentation URL. If not set, uses known provider docs." })
+    ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 justify-end pt-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "button", variant: "outline", onClick: onCancel, disabled: isSubmitting, children: "Cancel" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "submit", disabled: isSubmitting, children: isSubmitting ? "Saving..." : provider ? "Update Provider" : "Add Provider" })
@@ -2505,13 +2562,11 @@ function ProvidersPanel({
   externalTestResults,
   externalTestingProviders,
   externalTestingTimeLeft,
-  onProvidersChange,
+  onProvidersMutate,
   onTestResultsChange,
   onTestingProvidersChange,
   onTestingTimeLeftChange
 }) {
-  const [internalProviders, setInternalProviders] = reactExports.useState([]);
-  const [isLoading, setIsLoading] = reactExports.useState(true);
   const [showForm, setShowForm] = reactExports.useState(false);
   const [editingProvider, setEditingProvider] = reactExports.useState();
   const [error, setError] = reactExports.useState(null);
@@ -2522,8 +2577,7 @@ function ProvidersPanel({
   );
   const [configPath, setConfigPath] = reactExports.useState(null);
   const [configPathCopied, setConfigPathCopied] = reactExports.useState(false);
-  const providers = externalProviders ?? internalProviders;
-  const setProviders = onProvidersChange ?? setInternalProviders;
+  const providers = externalProviders ?? [];
   const testResults = externalTestResults ?? internalTestResults;
   const testingProviders = externalTestingProviders ?? internalTestingProviders;
   const testingTimeLeft = externalTestingTimeLeft ?? internalTestingTimeLeft;
@@ -2538,19 +2592,7 @@ function ProvidersPanel({
       setInternalTestingTimeLeft((prev) => ({ ...prev, [id]: seconds }));
     }
   };
-  const fetchProviders = reactExports.useCallback(async () => {
-    try {
-      const providersRes = await fetch("/api/providers");
-      const providersData = await providersRes.json();
-      setProviders(providersData);
-    } catch {
-      setError("Failed to load providers");
-    } finally {
-      setIsLoading(false);
-    }
-  }, []);
   reactExports.useEffect(() => {
-    void fetchProviders();
     void (async () => {
       try {
         const res = await fetch("/api/config/paths");
@@ -2561,13 +2603,13 @@ function ProvidersPanel({
       } catch {
       }
     })();
-  }, [fetchProviders]);
+  }, []);
   const TEST_TIMEOUT_SECONDS = 30;
   const runTest = reactExports.useCallback(
     async (providerId) => {
       const resetResults = {
-        anthropic: { nonStreaming: { notConfigured: true }, streaming: { notConfigured: true } },
-        openai: { nonStreaming: { notConfigured: true }, streaming: { notConfigured: true } }
+        anthropic: { nonStreaming: { testing: true }, streaming: { testing: true } },
+        openai: { nonStreaming: { testing: true }, streaming: { testing: true } }
       };
       if (onTestResultsChange) {
         onTestResultsChange(providerId, resetResults);
@@ -2690,7 +2732,7 @@ function ProvidersPanel({
         return;
       }
       const newProvider = await res.json();
-      await fetchProviders();
+      onProvidersMutate?.();
       setShowForm(false);
       await runTest(newProvider.id);
     })();
@@ -2717,7 +2759,7 @@ function ProvidersPanel({
         return;
       }
       const updated = await res.json();
-      await fetchProviders();
+      onProvidersMutate?.();
       setEditingProvider(void 0);
       await runTest(updated.id);
     })();
@@ -2733,7 +2775,7 @@ function ProvidersPanel({
         setError(err.error ?? "Failed to delete provider");
         return;
       }
-      await fetchProviders();
+      onProvidersMutate?.();
     })();
   }
   const fileInputRef = reactExports.useRef(null);
@@ -2782,7 +2824,7 @@ function ProvidersPanel({
         });
         const data = ImportResponseSchema.parse(await res.json());
         if (res.ok && data.imported !== void 0 && data.imported > 0) {
-          await fetchProviders();
+          onProvidersMutate?.();
           setError(null);
         } else if (data.errors && data.errors.length > 0) {
           setError(data.errors.join("; "));
@@ -2795,7 +2837,7 @@ function ProvidersPanel({
       e.target.value = "";
     })();
   }
-  if (isLoading && providers.length === 0) {
+  if (providers.length === 0) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground", children: "Loading providers..." }) });
   }
   if (showForm || editingProvider) {
@@ -2815,17 +2857,35 @@ function ProvidersPanel({
     ] });
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between sticky top-0 z-10 bg-background pb-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-medium", children: "Providers" }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "outline", size: "sm", onClick: () => handleExport(), className: "gap-1", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Download, { className: "size-3" }),
-          "Export"
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "outline", size: "sm", onClick: handleImportClick, className: "gap-1", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Upload, { className: "size-3" }),
-          "Import"
-        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => handleExport(),
+            className: "gap-1 hover:bg-muted",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Download, { className: "size-3" }),
+              "Export"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: handleImportClick,
+            className: "gap-1 hover:bg-muted",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Upload, { className: "size-3" }),
+              "Import"
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "input",
           {
@@ -2888,10 +2948,34 @@ function ProvidersPanel({
     )) })
   ] });
 }
+async function fetcher(url) {
+  const response = await fetch(url);
+  const data = await response.json();
+  if (!Array.isArray(data)) {
+    return [];
+  }
+  return data;
+}
+function useProviders() {
+  const response = useSWR(
+    "/api/providers",
+    fetcher,
+    {
+      revalidateOnFocus: false,
+      revalidateIfStale: false
+    }
+  );
+  return {
+    providers: response.data ?? [],
+    isLoading: response.isLoading,
+    isError: response.error,
+    mutate: response.mutate
+  };
+}
 function SettingsDialog() {
   const [open, setOpen] = reactExports.useState(false);
   const [activeTab, setActiveTab] = reactExports.useState("providers");
-  const [providers, setProviders] = reactExports.useState([]);
+  const { providers, mutate } = useProviders();
   const [testResults, setTestResults] = reactExports.useState({});
   const [testingProviders, setTestingProviders] = reactExports.useState(/* @__PURE__ */ new Set());
   const [testingTimeLeft, setTestingTimeLeft] = reactExports.useState({});
@@ -2941,7 +3025,9 @@ function SettingsDialog() {
             externalTestResults: testResults,
             externalTestingProviders: testingProviders,
             externalTestingTimeLeft: testingTimeLeft,
-            onProvidersChange: setProviders,
+            onProvidersMutate: () => {
+              void mutate();
+            },
             onTestResultsChange: handleTestResultsChange,
             onTestingProvidersChange: handleTestingProvidersChange,
             onTestingTimeLeftChange: handleTestingTimeLeftChange
@@ -3051,6 +3137,10 @@ function ProxyViewer({
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-[1200px] mx-auto flex flex-col h-screen", style: { maxHeight: "100vh" }, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4 mb-4 px-6 pt-6", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-lg font-bold flex-1", children: "LLM Proxy Inspector" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground text-xs font-mono", children: [
+        "v",
+        packageJson.version
+      ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center border border-border rounded-md overflow-hidden", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
@@ -3239,6 +3329,7 @@ function ProxyViewerContainer() {
   const [viewMode, setViewMode] = reactExports.useState("simple");
   const [error, setError] = reactExports.useState(null);
   const eventSourceRef = reactExports.useRef(null);
+  const reconnectTimeoutRef = reactExports.useRef(null);
   const fetchSessionsAndModels = reactExports.useCallback(async () => {
     try {
       const [sessionsRes, modelsRes] = await Promise.all([
@@ -3313,7 +3404,10 @@ function ProxyViewerContainer() {
     es.onerror = () => {
       setError("SSE connection lost, reconnecting...");
       es.close();
-      setTimeout(connectSSE, 3e3);
+      if (reconnectTimeoutRef.current !== null) {
+        clearTimeout(reconnectTimeoutRef.current);
+      }
+      reconnectTimeoutRef.current = setTimeout(connectSSE, 3e3);
     };
     void fetchSessionsAndModels();
   }, [selectedSession, selectedModel, fetchSessionsAndModels]);
@@ -3324,6 +3418,10 @@ function ProxyViewerContainer() {
         eventSourceRef.current.close();
         eventSourceRef.current = null;
       }
+      if (reconnectTimeoutRef.current !== null) {
+        clearTimeout(reconnectTimeoutRef.current);
+        reconnectTimeoutRef.current = null;
+      }
     };
   }, [connectSSE]);
   const handleClearAll = reactExports.useCallback(() => {

package/.output/server/_ssr/index.mjs

@@ -197,7 +197,7 @@ function getResponse() {
   return event.res;
 }
 async function getStartManifest(matchedRoutes) {
-  const { tsrStartManifest } = await import("../_tanstack-start-manifest_v-BF6ge6dS.mjs");
+  const { tsrStartManifest } = await import("../_tanstack-start-manifest_v-C7hQOzvX.mjs");
   const startManifest = tsrStartManifest();
   const rootRoute = startManifest.routes[rootRouteId] = startManifest.routes[rootRouteId] || {};
   rootRoute.assets = rootRoute.assets || [];
@@ -766,7 +766,7 @@ let entriesPromise;
 let baseManifestPromise;
 let cachedFinalManifestPromise;
 async function loadEntries() {
-  const routerEntry = await import("./router-CsCLdrXq.mjs").then((n) => n.r);
+  const routerEntry = await import("./router-CwmgKXBJ.mjs").then((n) => n.r);
   const startEntry = await import("./start-HYkvq4Ni.mjs");
   return { startEntry, routerEntry };
 }