@tonyclaw/llm-inspector 1.14.2 → 1.14.3

package/.output/server/index.mjs

@@ -38,51 +38,51 @@ const assets = {
   "/assets/alibaba-TTwafVwX.svg": {
     "type": "image/svg+xml",
     "etag": '"171b-6dyV5K8QjiaY35sN9qNprh9zDIs"',
-    "mtime": "2026-06-10T13:27:43.020Z",
+    "mtime": "2026-06-11T02:41:57.154Z",
     "size": 5915,
     "path": "../public/assets/alibaba-TTwafVwX.svg"
   },
+  "/assets/index-CzrT_ZB_.css": {
+    "type": "text/css; charset=utf-8",
+    "etag": '"14427-WRw7wI3HmgJe0YWxs6QA9QvDsgk"',
+    "mtime": "2026-06-11T02:41:57.155Z",
+    "size": 82983,
+    "path": "../public/assets/index-CzrT_ZB_.css"
+  },
   "/assets/minimax-BPMzvuL-.jpeg": {
     "type": "image/jpeg",
     "etag": '"1b06-IwivU89ko5UTMUM1/t7hn4sQK9A"',
-    "mtime": "2026-06-10T13:27:43.023Z",
+    "mtime": "2026-06-11T02:41:57.154Z",
     "size": 6918,
     "path": "../public/assets/minimax-BPMzvuL-.jpeg"
   },
-  "/assets/index-DOG5AdQ9.css": {
-    "type": "text/css; charset=utf-8",
-    "etag": '"142da-qXGGlxiu6GXrwGw4lzJEDsR446o"',
-    "mtime": "2026-06-10T13:27:43.023Z",
-    "size": 82650,
-    "path": "../public/assets/index-DOG5AdQ9.css"
+  "/assets/main-BcEfx6FM.js": {
+    "type": "text/javascript; charset=utf-8",
+    "etag": '"50599-Zn3MOTxDKfi6edBd1hMuk0XMH8M"',
+    "mtime": "2026-06-11T02:41:57.155Z",
+    "size": 329113,
+    "path": "../public/assets/main-BcEfx6FM.js"
   },
   "/assets/zhipuai-BPNAnxo-.svg": {
     "type": "image/svg+xml",
     "etag": '"2bf8-hNaLCTi89nOFCsIIfWpP/jrfo0s"',
-    "mtime": "2026-06-10T13:27:43.023Z",
+    "mtime": "2026-06-11T02:41:57.154Z",
     "size": 11256,
     "path": "../public/assets/zhipuai-BPNAnxo-.svg"
   },
   "/assets/qwen-CONDcHqt.png": {
     "type": "image/png",
     "etag": '"572c3-cdJAPaHdOvFCGzuaQjagdgOu6XE"',
-    "mtime": "2026-06-10T13:27:43.023Z",
+    "mtime": "2026-06-11T02:41:57.155Z",
     "size": 357059,
     "path": "../public/assets/qwen-CONDcHqt.png"
   },
-  "/assets/main-BElVT2p3.js": {
-    "type": "text/javascript; charset=utf-8",
-    "etag": '"50599-c0Re5vg5+KI0J9dHMI2SM+wdp9A"',
-    "mtime": "2026-06-10T13:27:43.023Z",
-    "size": 329113,
-    "path": "../public/assets/main-BElVT2p3.js"
-  },
-  "/assets/index-DDrUlr6L.js": {
+  "/assets/index-6F6Tf88s.js": {
     "type": "text/javascript; charset=utf-8",
-    "etag": '"91fb4-sGd/w9UW0TGYuvQ5WfgvmwcNukI"',
-    "mtime": "2026-06-10T13:27:43.024Z",
-    "size": 597940,
-    "path": "../public/assets/index-DDrUlr6L.js"
+    "etag": '"92434-5hMgYz5Gl8U1bzvC5OsYy/vakXU"',
+    "mtime": "2026-06-11T02:41:57.155Z",
+    "size": 599092,
+    "path": "../public/assets/index-6F6Tf88s.js"
   }
 };
 function readAsset(id) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tonyclaw/llm-inspector",
-  "version": "1.14.2",
+  "version": "1.14.3",
   "type": "module",
   "description": "LLM API proxy inspector — captures and displays requests/responses from AI coding tools in a web UI",
   "license": "MIT",

package/src/components/providers/ProviderForm.tsx

@@ -1,6 +1,6 @@
-import { type JSX, useState, useEffect } from "react";
+import { type JSX, useState, useEffect, useRef } from "react";
 import { Button } from "../ui/button";
-import { Eye, EyeOff, Copy, Check } from "lucide-react";
+import { Eye, EyeOff, Copy, Check, ChevronDown } from "lucide-react";
 import type { ProviderConfig } from "../../proxy/providers";
 import { maskApiKey } from "../../lib/mask";
 
@@ -54,7 +54,7 @@ type ProviderFormProps = {
 };
 
 export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps): JSX.Element {
-  const [name, setName] = useState(provider?.name ?? "Provider Name");
+  const [name, setName] = useState(provider?.name ?? "");
   const [apiKey, setApiKey] = useState(provider?.apiKey ?? "");
   const [showApiKey, setShowApiKey] = useState(false);
   const [copied, setCopied] = useState(false);
@@ -69,6 +69,23 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
   const [source, setSource] = useState<"company" | "personal" | undefined>(provider?.source);
   const [errors, setErrors] = useState<Record<string, string>>({});
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [openModelDropdown, setOpenModelDropdown] = useState<number | null>(null);
+  const modelRowRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+  // Close model dropdown when clicking outside
+  useEffect(() => {
+    if (openModelDropdown === null) return;
+    const index = openModelDropdown;
+    function handleClick(e: MouseEvent) {
+      if (!(e.target instanceof Node)) return;
+      const ref = modelRowRefs.current[index];
+      if (ref !== null && ref !== undefined && !ref.contains(e.target)) {
+        setOpenModelDropdown(null);
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [openModelDropdown]);
 
   // Track if URL fields have been manually edited (to avoid overriding user edits)
   const [manualAnthropicUrlOverride, setManualAnthropicUrlOverride] = useState(false);
@@ -188,7 +205,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
           type="text"
           value={name}
           onChange={(e) => setName(e.target.value)}
-          placeholder="Model Name"
+          placeholder="Provider Name"
           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"
         />
         {errors.name !== undefined && <p className="text-xs text-destructive">{errors.name}</p>}
@@ -260,29 +277,62 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
         <label className="text-sm font-medium">
           Models <span className="text-destructive">*</span>
         </label>
-        {(isMiniMax || isAlibaba) && (
-          <datalist id="model-suggestions">
-            {(isMiniMax ? MINIMAX_MODELS : ALIBABA_MODELS).map((opt) => (
-              <option key={opt} value={opt} />
-            ))}
-          </datalist>
-        )}
         {models.map((m, i) => (
-          <div key={i} className="flex items-center gap-2">
-            <input
-              type="text"
-              value={m}
-              onChange={(e) => {
-                setModels((prev) => {
-                  const next = [...prev];
-                  next[i] = e.target.value;
-                  return next;
-                });
-              }}
-              placeholder={isMiniMax || isAlibaba ? "Type or select a model..." : "Model name"}
-              list={isMiniMax || isAlibaba ? "model-suggestions" : undefined}
-              className="flex-1 rounded-md border border-input bg-background px-4 py-3 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"
-            />
+          <div
+            key={i}
+            ref={(el) => {
+              modelRowRefs.current[i] = el;
+            }}
+            className="flex items-center gap-2"
+          >
+            <div className="relative flex-1">
+              <input
+                type="text"
+                value={m}
+                onChange={(e) => {
+                  setModels((prev) => {
+                    const next = [...prev];
+                    next[i] = e.target.value;
+                    return next;
+                  });
+                }}
+                placeholder={isMiniMax || isAlibaba ? "Type or select a model..." : "Model name"}
+                className="w-full rounded-md border border-input bg-background px-4 py-3 pr-8 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"
+              />
+              {(isMiniMax || isAlibaba) && (
+                <>
+                  <button
+                    type="button"
+                    onClick={() => setOpenModelDropdown(openModelDropdown === i ? null : i)}
+                    className="absolute right-1 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors p-1 z-10"
+                    aria-label="Show model suggestions"
+                  >
+                    <ChevronDown className="size-4" />
+                  </button>
+                  {openModelDropdown === i && (
+                    <div className="absolute left-0 right-0 top-full mt-1 z-50 bg-popover border border-border rounded-md shadow-md max-h-48 overflow-y-auto">
+                      {(isMiniMax ? MINIMAX_MODELS : ALIBABA_MODELS).map((opt) => (
+                        <button
+                          key={opt}
+                          type="button"
+                          onClick={() => {
+                            setModels((prev) => {
+                              const next = [...prev];
+                              next[i] = opt;
+                              return next;
+                            });
+                            setOpenModelDropdown(null);
+                          }}
+                          className="w-full text-left px-3 py-2 text-sm hover:bg-muted transition-colors"
+                        >
+                          {opt}
+                        </button>
+                      ))}
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
             {models.length > 1 && (
               <button
                 type="button"

package/src/components/providers/ProvidersPanel.tsx

@@ -1,4 +1,4 @@
-import { type JSX, useState, useEffect, useCallback, useRef } from "react";
+import { type JSX, useState, useEffect, useCallback, useMemo, useRef } from "react";
 import { z } from "zod";
 import { Button } from "../ui/button";
 import { Plus, AlertCircle, Copy, Check, Download, Upload } from "lucide-react";
@@ -91,8 +91,17 @@ export function ProvidersPanel({
 
   // Use external state if provided (from SWR), otherwise use internal state
   const providers = externalProviders ?? [];
-  const filteredProviders =
-    sourceFilter === "all" ? providers : providers.filter((p) => p.source === sourceFilter);
+  const filteredProviders = useMemo(() => {
+    const filtered =
+      sourceFilter === "all" ? providers : providers.filter((p) => p.source === sourceFilter);
+    if (sourceFilter === "all") {
+      return [...filtered].sort((a, b) => {
+        const order: Record<string, number> = { personal: 0, company: 1 };
+        return (order[a.source ?? ""] ?? 2) - (order[b.source ?? ""] ?? 2);
+      });
+    }
+    return filtered;
+  }, [providers, sourceFilter]);
   const testResults = externalTestResults ?? internalTestResults;
   const testingProviders = externalTestingProviders ?? internalTestingProviders;
   const testingTimeLeft = externalTestingTimeLeft ?? internalTestingTimeLeft;
@@ -392,7 +401,7 @@ export function ProvidersPanel({
   if (showForm || editingProvider) {
     return (
       <div className="space-y-4">
-        <div className="flex items-center justify-between">
+        <div className="flex items-center justify-between sticky top-0 bg-background z-10 pb-2">
           <h3 className="text-lg font-medium">
             {editingProvider ? "Edit Provider" : "Add New Provider"}
           </h3>

package/src/components/providers/SettingsDialog.tsx

@@ -69,7 +69,7 @@ export function SettingsDialog(): JSX.Element {
             <TabsTrigger value="proxy">Proxy</TabsTrigger>
           </TabsList>
 
-          <div className="mt-4 overflow-y-auto flex-1">
+          <div className="mt-4 overflow-y-auto flex-1 pr-3">
             <TabsContent value="providers">
               <ProvidersPanel
                 externalProviders={providers}

package/styles/globals.css

@@ -1,121 +1,121 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-@plugin "@tailwindcss/typography";
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-}
-
-:root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
+@import "tailwindcss";
+@import "tw-animate-css";
+@plugin "@tailwindcss/typography";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}