@tonyclaw/llm-inspector 1.7.8 → 1.8.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/_libs/zod.mjs

@@ -4451,6 +4451,7 @@ export {
   lazy as c,
   discriminatedUnion as d,
   _null as e,
+  unknown as f,
   literal as l,
   number as n,
   object as o,

package/.output/server/_ssr/{index-hNquJMfH.mjs → index-HkueJ4Un.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-MmnX-LYh.mjs";
+import { C as CapturedLogSchema, a as parseRequest, p as parseOpenAIResponse, I as InspectorResponseSchema } from "./router-DTswxb7l.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,9 +7,10 @@ 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 { D as Download, L as LayoutGrid, a as List, S as Settings, C as ChevronDown, b as Check, R as RotateCcw, X, 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, U as User, F as FileTerminal, i as Radio, E as ExternalLink, j as EyeOff, k as Eye, l as RotateCw, m as Pencil, T as Trash2, n as TriangleAlert, o as Minus, p as CircleCheckBig, q as CircleStop, r as CircleQuestionMark, s as Server, t as Gauge, u as Lock, v as Wifi, w as WifiOff, x as ChevronsUp, y as ChevronsDown, z as Terminal, B as Brain } from "../_libs/lucide-react.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, b as boolean, n as number } from "../_libs/zod.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";
 import { R as Root2$1, L as List$1, T as Trigger$2, C as Content$1 } from "../_libs/radix-ui__react-tabs.mjs";
 import { S as Slot } from "../_libs/radix-ui__react-slot.mjs";
 import { P as Provider, R as Root3, T as Trigger$3, a as Portal$2, C as Content2$1, A as Arrow2 } from "../_libs/radix-ui__react-tooltip.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.8.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 })
@@ -946,7 +961,7 @@ const STATUS_BADGE_CLASSES = {
   server_error: "",
   pending: "bg-muted text-muted-foreground border-border"
 };
-function LogEntryHeader({
+const LogEntryHeader = reactExports.memo(function LogEntryHeader2({
   log,
   parsedRequest,
   expanded,
@@ -1098,7 +1113,7 @@ function LogEntryHeader({
       ]
     }
   );
-}
+});
 function Dialog({
   ...props
 }) {
@@ -1832,7 +1847,10 @@ function CopyButton({
     }
   );
 }
-function LogEntry({ log, viewMode = "simple" }) {
+const LogEntry = reactExports.memo(function LogEntry2({
+  log,
+  viewMode = "simple"
+}) {
   const [expanded, setExpanded] = reactExports.useState(false);
   const [requestCopied, setRequestCopied] = reactExports.useState(false);
   const [responseCopied, setResponseCopied] = reactExports.useState(false);
@@ -1953,7 +1971,7 @@ function LogEntry({ log, viewMode = "simple" }) {
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(ReplayDialog, { log, open: replayOpen, onOpenChange: setReplayOpen })
   ] });
-}
+});
 function computeStats(logs) {
   let totalInput = 0;
   let totalOutput = 0;
@@ -1963,7 +1981,7 @@ function computeStats(logs) {
   }
   return { totalInputTokens: totalInput, totalOutputTokens: totalOutput };
 }
-function ConversationGroup({
+const ConversationGroup = reactExports.memo(function ConversationGroup2({
   group,
   viewMode = "simple"
 }) {
@@ -1988,7 +2006,7 @@ function ConversationGroup({
     ),
     expanded && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pl-4 border-l-2 border-muted ml-3", children: group.logs.map((log) => /* @__PURE__ */ jsxRuntimeExports.jsx(LogEntry, { log, viewMode }, log.id)) })
   ] });
-}
+});
 function Select({
   ...props
 }) {
@@ -2117,6 +2135,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) {
@@ -2140,18 +2161,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" })
     ] });
@@ -2160,20 +2184,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,
@@ -2225,7 +2247,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: [
@@ -2233,7 +2255,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(
@@ -2502,13 +2524,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);
@@ -2519,8 +2539,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;
@@ -2535,19 +2554,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");
@@ -2558,10 +2565,19 @@ function ProvidersPanel({
       } catch {
       }
     })();
-  }, [fetchProviders]);
+  }, []);
   const TEST_TIMEOUT_SECONDS = 30;
   const runTest = reactExports.useCallback(
     async (providerId) => {
+      const resetResults = {
+        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 }));
+      }
       if (onTestingProvidersChange) {
         onTestingProvidersChange(providerId, true);
       } else {
@@ -2614,7 +2630,8 @@ function ProvidersPanel({
           }
         }
       } catch (err) {
-        if (err instanceof Error && err.name === "AbortError") {
+        const isAbort = err instanceof Error && err.name === "AbortError";
+        if (isAbort) {
           const timeoutResult = {
             anthropic: {
               nonStreaming: {
@@ -2640,14 +2657,17 @@ function ProvidersPanel({
       } finally {
         clearInterval(intervalId);
         setTestingTimeLeft(providerId, void 0);
-        if (onTestingProvidersChange) {
-          onTestingProvidersChange(providerId, false);
-        } else {
-          setInternalTestingProviders((prev) => {
-            const next = new Set(prev);
-            next.delete(providerId);
-            return next;
-          });
+        try {
+          if (onTestingProvidersChange) {
+            onTestingProvidersChange(providerId, false);
+          } else {
+            setInternalTestingProviders((prev) => {
+              const next = new Set(prev);
+              next.delete(providerId);
+              return next;
+            });
+          }
+        } catch {
         }
       }
     },
@@ -2674,7 +2694,7 @@ function ProvidersPanel({
         return;
       }
       const newProvider = await res.json();
-      await fetchProviders();
+      onProvidersMutate?.();
       setShowForm(false);
       await runTest(newProvider.id);
     })();
@@ -2701,7 +2721,7 @@ function ProvidersPanel({
         return;
       }
       const updated = await res.json();
-      await fetchProviders();
+      onProvidersMutate?.();
       setEditingProvider(void 0);
       await runTest(updated.id);
     })();
@@ -2717,10 +2737,69 @@ function ProvidersPanel({
         setError(err.error ?? "Failed to delete provider");
         return;
       }
-      await fetchProviders();
+      onProvidersMutate?.();
     })();
   }
-  if (isLoading && providers.length === 0) {
+  const fileInputRef = reactExports.useRef(null);
+  function handleExport(includeKeys) {
+    const url = `/api/providers/export${""}`;
+    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() {
+    fileInputRef.current?.click();
+  }
+  function handleFileChange(e) {
+    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 = object({
+          success: boolean().optional(),
+          imported: number().optional(),
+          message: string().optional(),
+          errors: array(string()).optional()
+        });
+        const data = ImportResponseSchema.parse(await res.json());
+        if (res.ok && data.imported !== void 0 && data.imported > 0) {
+          onProvidersMutate?.();
+          setError(null);
+        } else if (data.errors && data.errors.length > 0) {
+          setError(data.errors.join("; "));
+        } else {
+          setError(data.message ?? "Import failed");
+        }
+      } catch {
+        setError("Failed to import providers");
+      }
+      e.target.value = "";
+    })();
+  }
+  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) {
@@ -2740,11 +2819,49 @@ 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(Button, { onClick: () => setShowForm(true), size: "sm", className: "gap-1", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "size-4" }),
-        "Add Provider"
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__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",
+          {
+            type: "file",
+            ref: fileInputRef,
+            accept: ".json",
+            onChange: handleFileChange,
+            style: { display: "none" }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { onClick: () => setShowForm(true), size: "sm", className: "gap-1", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "size-4" }),
+          "Add Provider"
+        ] })
       ] })
     ] }),
     configPath !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground bg-muted/30 rounded-md px-3 py-2", children: [
@@ -2793,10 +2910,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({});
@@ -2846,7 +2987,9 @@ function SettingsDialog() {
             externalTestResults: testResults,
             externalTestingProviders: testingProviders,
             externalTestingTimeLeft: testingTimeLeft,
-            onProvidersChange: setProviders,
+            onProvidersMutate: () => {
+              void mutate();
+            },
             onTestResultsChange: handleTestResultsChange,
             onTestingProvidersChange: handleTestingProvidersChange,
             onTestingTimeLeftChange: handleTestingTimeLeftChange
@@ -2956,6 +3099,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",

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-CYKtU_9S.mjs");
+  const { tsrStartManifest } = await import("../_tanstack-start-manifest_v-DhUuivt-.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-MmnX-LYh.mjs").then((n) => n.r);
+  const routerEntry = await import("./router-DTswxb7l.mjs").then((n) => n.r);
   const startEntry = await import("./start-HYkvq4Ni.mjs");
   return { startEntry, routerEntry };
 }