@tonyclaw/llm-inspector 1.13.0 → 1.14.1

package/.output/server/_ssr/{index-C8VC13EA.mjs → index-Cso39vJc.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, s as stripClaudeCodeBillingHeader, R as RuntimeConfigSchema, P as ProviderConfigSchema, p as parseOpenAIResponse, I as InspectorResponseSchema, S as StreamingChunkSchema$1 } from "./router-D5ccnemB.mjs";
+import { C as CapturedLogSchema, a as parseRequest, s as stripClaudeCodeBillingHeader, R as RuntimeConfigSchema, P as ProviderConfigSchema, p as parseOpenAIResponse, I as InspectorResponseSchema, S as StreamingChunkSchema$1 } from "./router-B8X3GXM2.mjs";
 import { u as useSWR, a as useSWRConfig } from "../_libs/swr.mjs";
 import { u as useVirtualizer } from "../_libs/tanstack__react-virtual.mjs";
 import { J as JSZip } from "../_libs/jszip.mjs";
@@ -9,9 +9,10 @@ import { c as cva } from "../_libs/class-variance-authority.mjs";
 import { d as diffLines, a as diffJson } from "../_libs/diff.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, G as GitCompareArrows, X, S as Settings, C as ChevronDown, b as Check, R as RotateCcw, 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, i as Globe, j as User, F as FileTerminal, k as Radio, l as Rows3, m as Columns2, E as ExternalLink, n as EyeOff, o as Eye, p as RotateCw, q as Pencil, T as Trash2, A as ArrowUp, r as ArrowDown, s as TriangleAlert, t as Minus, u as CircleCheckBig, v as CircleStop, w as CircleQuestionMark, x as Server, y as Gauge, z as Lock, B as Wifi, H as WifiOff, I as ChevronsUp, J as ChevronsDown, K as Brain, N as Terminal } from "../_libs/lucide-react.mjs";
+import "../_libs/modelcontextprotocol__server.mjs";
+import { D as Download, L as LayoutGrid, a as List, G as GitCompareArrows, X, S as Settings, C as ChevronDown, b as Check, R as RotateCcw, 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, i as Globe, j as User, F as FileTerminal, k as Radio, l as Rows3, m as Columns2, n as Minus, o as Pencil, E as Equal, p as EyeOff, q as Eye, r as ExternalLink, s as RotateCw, T as Trash2, A as ArrowUp, t as ArrowDown, u as TriangleAlert, v as CircleCheckBig, w as CircleStop, x as CircleQuestionMark, y as Server, z as Gauge, B as Lock, H as Wifi, I as WifiOff, J as ChevronsUp, K as ChevronsDown, N as Brain, O as Terminal } 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, r as record, _ as _enum } from "../_libs/zod.mjs";
+import { a as array, b as string, u as union, d as object, l as literal, n as number, c as boolean, r as record, _ as _enum } 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";
@@ -275,7 +276,7 @@ async function exportLogsAsZip(logs) {
   document.body.removeChild(anchor);
   URL.revokeObjectURL(url);
 }
-const version = "1.13.0";
+const version = "1.14.1";
 const packageJson = {
   version
 };
@@ -1888,9 +1889,37 @@ function StructuredResponseViewAnthropic({
     ] })
   ] });
 }
+function parseToolArguments(raw) {
+  if (raw === void 0 || raw === "") return {};
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+function OpenAIToolCallBlock({ call }) {
+  const [open, setOpen] = reactExports.useState(false);
+  const name = call.function.name ?? "(unnamed tool)";
+  const parsed = parseToolArguments(call.function.arguments);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Collapsible, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-l-2 border-blue-500/40 my-1", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(CollapsibleTrigger, { className: "flex items-center gap-1.5 px-3 py-1 w-full text-left cursor-pointer hover:bg-blue-500/5 transition-colors rounded-r-sm group", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Terminal, { className: "size-3.5 text-blue-400 shrink-0" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "outline", className: "text-[10px] font-mono px-1.5 py-0 h-4", children: name }),
+      call.id !== void 0 && call.id !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] font-mono text-muted-foreground/60 truncate", children: call.id }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1" }),
+      open ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-3 text-muted-foreground" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-3 text-muted-foreground" })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CollapsibleContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-3 pb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "max-h-[60vh]", children: parsed === null ? (
+      // JSON.parse failed — show the raw string so the user can
+      // still see what the model tried to call.
+      /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "font-mono text-xs whitespace-pre-wrap break-words text-rose-300/90", children: call.function.arguments })
+    ) : /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewer, { data: safeJsonValue(parsed), defaultExpandDepth: 2 }) }) }) })
+  ] }) });
+}
 function OpenAIResponseView({ response }) {
   const choice = response.choices[0];
   const message = choice?.message;
+  const toolCalls = message?.tool_calls ?? [];
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "secondary", className: "text-[10px] px-1.5 py-0 h-5 font-mono", children: response.model }),
@@ -1927,6 +1956,10 @@ function OpenAIResponseView({ response }) {
           remainingText.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "prose prose-sm dark:prose-invert max-w-none [&_pre]:bg-muted [&_pre]:text-foreground [&_code]:text-[0.8em] [&_p]:my-1 [&_ul]:my-1 [&_ol]:my-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Markdown, { children: remainingText }) })
         ] });
       })(),
+      toolCalls.map((call, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: tool_calls is the positionally stable list from the response
+        /* @__PURE__ */ jsxRuntimeExports.jsx(OpenAIToolCallBlock, { call }, call.id ?? `tc-${i}`)
+      )),
       message?.function_call !== null && message?.function_call !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-blue-500/30 rounded-md p-3 bg-blue-500/5", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-blue-400 font-mono mb-1", children: "function_call" }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "font-mono text-xs", children: [
@@ -1938,7 +1971,7 @@ function OpenAIResponseView({ response }) {
           ] })
         ] })
       ] }),
-      (message?.content === null || message?.content === void 0 || message.content.length === 0) && (message?.reasoning_content === null || message?.reasoning_content === void 0 || message.reasoning_content.length === 0) && (message?.function_call === null || message?.function_call === void 0) && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "Empty response content" })
+      (message?.content === null || message?.content === void 0 || message.content.length === 0) && (message?.reasoning_content === null || message?.reasoning_content === void 0 || message.reasoning_content.length === 0) && (message?.function_call === null || message?.function_call === void 0) && toolCalls.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "Empty response content" })
     ] })
   ] });
 }
@@ -2828,13 +2861,13 @@ function SelectScrollDownButton({
     }
   );
 }
-const KNOWN_PROVIDER_DOCS = {
-  deepseek: "https://api-docs.deepseek.com/zh-cn/"
-};
 function maskApiKey(apiKey) {
   if (apiKey.length <= 8) return "••••••••";
   return apiKey.slice(0, 4) + "••••••••" + apiKey.slice(-4);
 }
+const KNOWN_PROVIDER_DOCS = {
+  deepseek: "https://api-docs.deepseek.com/zh-cn/"
+};
 function hasSuccessField(result) {
   return Object.prototype.hasOwnProperty.call(result, "success");
 }
@@ -2962,6 +2995,13 @@ function ProviderCard({
   onTest
 }) {
   const [showApiKey, setShowApiKey] = reactExports.useState(false);
+  const [copied, setCopied] = reactExports.useState(false);
+  function handleCopy() {
+    navigator.clipboard.writeText(provider.apiKey).catch(() => {
+    });
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  }
   const docsUrl = provider.apiDocsUrl ?? Object.entries(KNOWN_PROVIDER_DOCS).find(
     ([keyword]) => provider.name.toLowerCase().includes(keyword)
   )?.[1];
@@ -2971,7 +3011,11 @@ function ProviderCard({
       className: `border rounded-lg p-4 flex flex-col gap-3 bg-card transition-all duration-500 ${isHighlighted === true ? "ring-2 ring-primary shadow-md" : ""}`,
       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 }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("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 }),
+            provider.source === "company" && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 shrink-0", children: "公司" }),
+            provider.source === "personal" && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs px-1.5 py-0.5 rounded bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 shrink-0", children: "个人" })
+          ] }),
           docsUrl !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "a",
             {
@@ -2998,6 +3042,16 @@ function ProviderCard({
               "aria-label": showApiKey ? "Hide API key" : "Show API key",
               children: showApiKey ? /* @__PURE__ */ jsxRuntimeExports.jsx(EyeOff, { className: "size-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "size-4" })
             }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleCopy,
+              className: "text-muted-foreground hover:text-foreground transition-colors p-1",
+              "aria-label": "Copy API key",
+              children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-4 text-green-500" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-4" })
+            }
           )
         ] }),
         provider.anthropicBaseUrl !== void 0 && provider.anthropicBaseUrl !== "" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
@@ -3091,33 +3145,47 @@ const ALIBABA_MODELS = ["glm-5", "glm-5.1", "qwen3.6-plus", "qwen3.7-max"];
 function ProviderForm({ provider, onSubmit, onCancel }) {
   const [name, setName] = reactExports.useState(provider?.name ?? "Provider Name");
   const [apiKey, setApiKey] = reactExports.useState(provider?.apiKey ?? "");
+  const [showApiKey, setShowApiKey] = reactExports.useState(false);
+  const [copied, setCopied] = reactExports.useState(false);
   const [model, setModel] = reactExports.useState(provider?.model ?? "");
-  const [format, setFormat] = reactExports.useState(provider?.format ?? "anthropic");
-  const [baseUrl, setBaseUrl] = reactExports.useState(provider?.baseUrl ?? "");
+  const [activeTab, setActiveTab] = reactExports.useState("anthropic");
+  const [anthropicBaseUrl, setAnthropicBaseUrl] = reactExports.useState(provider?.anthropicBaseUrl ?? "");
+  const [openaiBaseUrl, setOpenaiBaseUrl] = reactExports.useState(provider?.openaiBaseUrl ?? "");
   const [apiDocsUrl, setApiDocsUrl] = reactExports.useState(provider?.apiDocsUrl ?? "");
+  const [source, setSource] = reactExports.useState(provider?.source);
   const [errors, setErrors] = reactExports.useState({});
   const [isSubmitting, setIsSubmitting] = reactExports.useState(false);
-  const [manualBaseUrlOverride, setManualBaseUrlOverride] = reactExports.useState(false);
+  const [manualAnthropicUrlOverride, setManualAnthropicUrlOverride] = reactExports.useState(false);
+  const [manualOpenaiUrlOverride, setManualOpenaiUrlOverride] = reactExports.useState(false);
   const isMiniMax = name.toLowerCase().includes("minimax");
   const isAlibaba = name.toLowerCase().includes("alibaba");
+  function handleCopy() {
+    navigator.clipboard.writeText(apiKey).catch(() => {
+    });
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  }
   reactExports.useEffect(() => {
     if (provider) {
       setName(provider.name);
       setApiKey(provider.apiKey);
       setModel(provider.model ?? "");
-      setFormat(provider.format ?? "anthropic");
-      setBaseUrl(provider.baseUrl ?? "");
+      setAnthropicBaseUrl(provider.anthropicBaseUrl ?? "");
+      setOpenaiBaseUrl(provider.openaiBaseUrl ?? "");
       setApiDocsUrl(provider.apiDocsUrl ?? "");
-      setManualBaseUrlOverride(false);
+      setSource(provider.source);
+      setManualAnthropicUrlOverride(false);
+      setManualOpenaiUrlOverride(false);
     }
   }, [provider]);
   reactExports.useEffect(() => {
     const lowerName = name.toLowerCase();
     for (const [keyword, preset] of Object.entries(KNOWN_PROVIDER_PRESETS)) {
       if (lowerName.includes(keyword)) {
-        if (!manualBaseUrlOverride) {
-          setFormat(preset.format);
-          setBaseUrl(preset.baseUrl);
+        if (preset.format === "anthropic" && !manualAnthropicUrlOverride) {
+          setAnthropicBaseUrl(preset.baseUrl);
+        } else if (preset.format === "openai" && !manualOpenaiUrlOverride) {
+          setOpenaiBaseUrl(preset.baseUrl);
         }
         if (preset.apiDocsUrl !== void 0 && !apiDocsUrl) {
           setApiDocsUrl(preset.apiDocsUrl);
@@ -3143,10 +3211,14 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
     if (!model.trim()) {
       newErrors.model = "Model is required";
     }
-    if (!baseUrl.trim()) {
-      newErrors.baseUrl = "Base URL is required";
-    } else if (!isValidUrl(baseUrl.trim())) {
-      newErrors.baseUrl = "Invalid URL format";
+    if (anthropicBaseUrl.trim() && !isValidUrl(anthropicBaseUrl.trim())) {
+      newErrors.anthropicBaseUrl = "Invalid URL format";
+    }
+    if (openaiBaseUrl.trim() && !isValidUrl(openaiBaseUrl.trim())) {
+      newErrors.openaiBaseUrl = "Invalid URL format";
+    }
+    if (!anthropicBaseUrl.trim() && !openaiBaseUrl.trim()) {
+      newErrors.format = "At least one format URL (Anthropic or OpenAI) is required";
     }
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
@@ -3168,9 +3240,10 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
         name: name.trim(),
         apiKey: apiKey.trim(),
         model: model.trim() || void 0,
-        format,
-        baseUrl: baseUrl.trim() || void 0,
-        apiDocsUrl: apiDocsUrl.trim() || void 0
+        anthropicBaseUrl: anthropicBaseUrl.trim() || void 0,
+        openaiBaseUrl: openaiBaseUrl.trim() || void 0,
+        apiDocsUrl: apiDocsUrl.trim() || void 0,
+        source
       });
     } finally {
       setIsSubmitting(false);
@@ -3195,22 +3268,68 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
       ),
       errors.name !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-destructive", children: errors.name })
     ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "provider-source", className: "text-sm font-medium", children: "Token Source" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "select",
+        {
+          id: "provider-source",
+          value: source ?? "",
+          onChange: (e) => setSource(
+            e.target.value === "company" || e.target.value === "personal" ? e.target.value : void 0
+          ),
+          className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: "—" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "personal", children: "个人 (Personal)" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "company", children: "公司 (Company)" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "Label whether this API key is company-provided or personal." })
+    ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: "provider-apikey", className: "text-sm font-medium", children: [
         "API Key ",
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-destructive", children: "*" })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "input",
-        {
-          id: "provider-apikey",
-          type: "password",
-          value: apiKey,
-          onChange: (e) => setApiKey(e.target.value),
-          placeholder: "sk-ant-...",
-          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.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "input",
+          {
+            id: "provider-apikey",
+            type: "text",
+            value: showApiKey || apiKey.length === 0 ? apiKey : maskApiKey(apiKey),
+            onChange: (e) => setApiKey(e.target.value),
+            onFocus: () => {
+              if (!showApiKey && apiKey.length > 0) setShowApiKey(true);
+            },
+            placeholder: "sk-ant-...",
+            readOnly: !showApiKey && apiKey.length > 0,
+            className: "flex-1 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(
+          "button",
+          {
+            type: "button",
+            onClick: () => setShowApiKey((s) => !s),
+            className: "text-muted-foreground hover:text-foreground transition-colors p-1 shrink-0",
+            "aria-label": showApiKey ? "Hide API key" : "Show API key",
+            children: showApiKey ? /* @__PURE__ */ jsxRuntimeExports.jsx(EyeOff, { className: "size-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Eye, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleCopy,
+            className: "text-muted-foreground hover:text-foreground transition-colors p-1 shrink-0",
+            "aria-label": "Copy API key",
+            children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-4 text-green-500" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-4" })
+          }
+        )
+      ] }),
       errors.apiKey !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-destructive", children: errors.apiKey })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
@@ -3241,46 +3360,65 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
       errors.model !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-destructive", children: errors.model })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: "provider-format", className: "text-sm font-medium", children: [
-        "API Format ",
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-destructive", children: "*" })
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-1 border-b border-border", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setActiveTab("anthropic"),
+            className: `px-3 py-2 text-sm font-medium border-b-2 transition-colors ${activeTab === "anthropic" ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground"}`,
+            children: "Anthropic Format"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setActiveTab("openai"),
+            className: `px-3 py-2 text-sm font-medium border-b-2 transition-colors ${activeTab === "openai" ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground"}`,
+            children: "OpenAI Format"
+          }
+        )
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "select",
+      errors.format !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-destructive", children: errors.format })
+    ] }),
+    activeTab === "anthropic" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "provider-anthropic-base-url", className: "text-sm font-medium", children: "Anthropic Base URL" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "input",
         {
-          id: "provider-format",
-          value: format,
-          onChange: (e) => setFormat(e.target.value === "anthropic" ? "anthropic" : "openai"),
-          className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "anthropic", children: "Anthropic (/v1/messages)" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "openai", children: "OpenAI (/v1/chat/completions)" })
-          ]
+          id: "provider-anthropic-base-url",
+          type: "text",
+          value: anthropicBaseUrl,
+          onChange: (e) => {
+            setManualAnthropicUrlOverride(true);
+            setAnthropicBaseUrl(e.target.value);
+          },
+          placeholder: "https://api.anthropic.com",
+          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: format === "anthropic" ? "Use Anthropic format for /v1/messages endpoint" : "Use OpenAI format for /v1/chat/completions endpoint" })
+      errors.anthropicBaseUrl !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-destructive", children: errors.anthropicBaseUrl }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "Anthropic-compatible endpoint URL. Leave empty if this provider does not support Anthropic format." })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: "provider-base-url", className: "text-sm font-medium", children: [
-        "Base URL ",
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-destructive", children: "*" })
-      ] }),
+    activeTab === "openai" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "provider-openai-base-url", className: "text-sm font-medium", children: "OpenAI Base URL" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "input",
         {
-          id: "provider-base-url",
+          id: "provider-openai-base-url",
           type: "text",
-          value: baseUrl,
+          value: openaiBaseUrl,
           onChange: (e) => {
-            setManualBaseUrlOverride(true);
-            setBaseUrl(e.target.value);
+            setManualOpenaiUrlOverride(true);
+            setOpenaiBaseUrl(e.target.value);
           },
-          placeholder: format === "anthropic" ? "https://api.anthropic.com" : "https://api.openai.com/v1",
+          placeholder: "https://api.openai.com/v1",
           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.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." })
+      errors.openaiBaseUrl !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-destructive", children: errors.openaiBaseUrl }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "OpenAI-compatible endpoint URL. Leave empty if this provider does not support OpenAI format." })
     ] }),
     /* @__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" }),
@@ -3297,7 +3435,7 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
       ),
       /* @__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.jsxs("div", { className: "sticky bottom-0 bg-card border-t flex gap-2 justify-end pt-2 pb-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" })
     ] })
@@ -3396,9 +3534,10 @@ function createProviderPayload(data) {
     name: data.name,
     apiKey: data.apiKey,
     model: data.model,
-    format: data.format,
-    anthropicBaseUrl: data.format === "anthropic" ? data.baseUrl : void 0,
-    openaiBaseUrl: data.format === "openai" ? data.baseUrl : void 0
+    anthropicBaseUrl: (data.anthropicBaseUrl?.length ?? 0) > 0 ? data.anthropicBaseUrl : void 0,
+    openaiBaseUrl: (data.openaiBaseUrl?.length ?? 0) > 0 ? data.openaiBaseUrl : void 0,
+    apiDocsUrl: (data.apiDocsUrl?.length ?? 0) > 0 ? data.apiDocsUrl : void 0,
+    source: data.source
   };
 }
 function ProvidersPanel({
@@ -3423,9 +3562,11 @@ function ProvidersPanel({
   const [configPath, setConfigPath] = reactExports.useState(null);
   const [configPathCopied, setConfigPathCopied] = reactExports.useState(false);
   const [highlightedProviderId, setHighlightedProviderId] = reactExports.useState(null);
+  const [sourceFilter, setSourceFilter] = reactExports.useState("all");
   const listScrollRef = reactExports.useRef(null);
   const highlightTimeoutRef = reactExports.useRef(null);
   const providers = externalProviders ?? [];
+  const filteredProviders = sourceFilter === "all" ? providers : providers.filter((p) => p.source === sourceFilter);
   const testResults = externalTestResults ?? internalTestResults;
   const testingProviders = externalTestingProviders ?? internalTestingProviders;
   const testingTimeLeft = externalTestingTimeLeft ?? internalTestingTimeLeft;
@@ -3553,51 +3694,50 @@ function ProvidersPanel({
   );
   function handleAddProvider(data) {
     void (async () => {
-      let res;
       try {
-        res = await fetch("/api/providers", {
+        const res = await fetch("/api/providers", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify(createProviderPayload(data))
         });
+        if (!res.ok) {
+          setError(await readApiError(res, "Failed to add provider"));
+          return;
+        }
+        const newProvider = await parseJsonResponse(res, ProviderConfigSchema);
+        setShowForm(false);
+        triggerHighlight(newProvider.id);
+        refreshProviders();
+        await runTest(newProvider.id);
       } catch {
         setError(NETWORK_ERROR_MESSAGE);
-        return;
       }
-      if (!res.ok) {
-        setError(await readApiError(res, "Failed to add provider"));
-        return;
-      }
-      const newProvider = await parseJsonResponse(res, ProviderConfigSchema);
-      setShowForm(false);
-      triggerHighlight(newProvider.id);
-      refreshProviders();
-      await runTest(newProvider.id);
     })();
   }
   function handleUpdateProvider(data) {
     if (!editingProvider) return;
     void (async () => {
-      let res;
       try {
-        res = await fetch(`/api/providers/${editingProvider.id}`, {
+        const res = await fetch(`/api/providers/${editingProvider.id}`, {
           method: "PUT",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify(createProviderPayload(data))
         });
+        if (!res.ok) {
+          setError(await readApiError(res, "Failed to update provider"));
+          return;
+        }
+        const updated = await parseJsonResponse(res, ProviderConfigSchema);
+        setEditingProvider(void 0);
+        triggerHighlight(updated.id);
+        refreshProviders();
+        const criticalFieldsChanged = (data.apiKey ?? "") !== (editingProvider.apiKey ?? "") || (data.model ?? "") !== (editingProvider.model ?? "") || (data.anthropicBaseUrl ?? "") !== (editingProvider.anthropicBaseUrl ?? "") || (data.openaiBaseUrl ?? "") !== (editingProvider.openaiBaseUrl ?? "");
+        if (criticalFieldsChanged) {
+          await runTest(updated.id);
+        }
       } catch {
         setError(NETWORK_ERROR_MESSAGE);
-        return;
-      }
-      if (!res.ok) {
-        setError(await readApiError(res, "Failed to update provider"));
-        return;
       }
-      const updated = await parseJsonResponse(res, ProviderConfigSchema);
-      setEditingProvider(void 0);
-      triggerHighlight(updated.id);
-      refreshProviders();
-      await runTest(updated.id);
     })();
   }
   function handleDeleteProvider(providerId) {
@@ -3766,22 +3906,34 @@ function ProvidersPanel({
         /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "size-4" }),
         "Add Your First Provider"
       ] })
-    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: listScrollRef, className: "space-y-3", children: providers.map((provider) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      ProviderCard,
-      {
-        provider,
-        testResults: testResults[provider.id],
-        isTesting: testingProviders.has(provider.id),
-        testingTimeLeft: testingTimeLeft[provider.id],
-        isHighlighted: provider.id === highlightedProviderId,
-        onEdit: (p) => setEditingProvider(p),
-        onDelete: handleDeleteProvider,
-        onTest: (id) => {
-          void runTest(id);
-        }
-      },
-      provider.id
-    )) })
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex gap-1 border-b border-border", children: ["all", "personal", "company"].map((tab) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setSourceFilter(tab),
+          className: `px-3 py-2 text-sm font-medium border-b-2 transition-colors ${sourceFilter === tab ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground"}`,
+          children: tab === "all" ? "All" : tab === "personal" ? "Personal" : "Company"
+        },
+        tab
+      )) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: listScrollRef, className: "space-y-3", children: filteredProviders.map((provider) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ProviderCard,
+        {
+          provider,
+          testResults: testResults[provider.id],
+          isTesting: testingProviders.has(provider.id),
+          testingTimeLeft: testingTimeLeft[provider.id],
+          isHighlighted: provider.id === highlightedProviderId,
+          onEdit: (p) => setEditingProvider(p),
+          onDelete: handleDeleteProvider,
+          onTest: (id) => {
+            void runTest(id);
+          }
+        },
+        provider.id
+      )) })
+    ] })
   ] });
 }
 async function fetcher(url) {
@@ -4192,6 +4344,36 @@ function groupContiguousEquals(ops) {
   }
   return out;
 }
+const KIND_VISUAL = {
+  added: {
+    icon: Plus,
+    accent: "text-emerald-600 dark:text-emerald-400",
+    bg: "bg-emerald-500/5 hover:bg-emerald-500/10",
+    border: "border-l-emerald-500",
+    label: "ADDED"
+  },
+  removed: {
+    icon: Minus,
+    accent: "text-rose-600 dark:text-rose-400",
+    bg: "bg-rose-500/5 hover:bg-rose-500/10",
+    border: "border-l-rose-500",
+    label: "REMOVED"
+  },
+  changed: {
+    icon: Pencil,
+    accent: "text-amber-600 dark:text-amber-400",
+    bg: "bg-amber-500/5 hover:bg-amber-500/10",
+    border: "border-l-amber-500",
+    label: "CHANGED"
+  },
+  equal: {
+    icon: Equal,
+    accent: "text-muted-foreground/70",
+    bg: "bg-muted/20 hover:bg-muted/30",
+    border: "border-l-muted-foreground/20",
+    label: "EQUAL"
+  }
+};
 function EqualRunRow({
   ops,
   expanded,
@@ -4200,19 +4382,20 @@ function EqualRunRow({
   const first = ops[0];
   const last = ops[ops.length - 1];
   if (first === void 0 || last === void 0) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "col-span-3 text-muted-foreground/40 text-xs", children: "—" });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-muted-foreground/40 text-xs", children: "—" });
   }
   const firstPath = first.path;
   const lastPath = last.path;
   const label = ops.length === 1 ? firstPath : `${firstPath} … ${lastPath}`;
   const summary = first.value.kind === "array" ? `${ops.length} equal arrays` : first.value.kind === "object" ? `${ops.length} equal objects` : "equal";
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "col-span-3", children: [
+  const v = KIND_VISUAL.equal;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("border-l-4 rounded-sm", v.border, v.bg), children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "button",
       {
         type: "button",
         onClick: onToggle,
-        className: "w-full text-left flex items-center gap-2 px-2 py-1 text-xs text-muted-foreground hover:bg-muted/40 rounded cursor-pointer",
+        className: "w-full text-left flex items-center gap-2 px-3 py-1.5 text-xs text-muted-foreground cursor-pointer",
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             ChevronRight,
@@ -4220,7 +4403,9 @@ function EqualRunRow({
               className: cn("size-3 transition-transform shrink-0", expanded && "rotate-90")
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono truncate flex-1", children: label }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(v.icon, { className: cn("size-3 shrink-0", v.accent) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono truncate flex-1", title: `${firstPath} … ${lastPath}`, children: label }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: cn("text-[10px] uppercase tracking-wider shrink-0", v.accent), children: v.label }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground/60 shrink-0", children: [
             "(",
             summary,
@@ -4229,37 +4414,252 @@ function EqualRunRow({
         ]
       }
     ),
-    expanded && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ml-5 mt-1 mb-2 space-y-2", children: ops.map((op) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border/50 rounded p-2 bg-muted/20", children: [
+    expanded && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ml-5 mt-1 mb-2 space-y-2 pr-2", children: ops.map((op) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border/50 rounded p-2 bg-muted/20", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-xs text-muted-foreground mb-1", children: op.path }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewerFromString, { text: nodeToJsonString(op.value), defaultExpandDepth: 2 })
     ] }, op.path)) })
   ] });
 }
-function AddOrRemoveRow({
+function UnifiedOpRow({
   op,
-  kind
+  idx,
+  copiedPath,
+  onCopyPath,
+  expanded,
+  onToggle
 }) {
-  const accent = kind === "added" ? "border-l-2 border-l-emerald-400/70 bg-emerald-500/5" : "border-l-2 border-l-rose-400/70 bg-rose-500/5";
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("col-span-3 px-2 py-1 rounded text-xs", accent), children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-xs text-muted-foreground mb-0.5", children: op.path }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono break-all", children: kind === "added" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-emerald-300/90", children: [
-      "+ ",
-      previewNode(op.value, 400)
-    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-rose-300/90 line-through", children: [
-      "- ",
-      previewNode(op.value, 400)
-    ] }) })
-  ] });
+  const v = KIND_VISUAL[op.kind];
+  const Icon2 = v.icon;
+  const isExpandable2 = op.kind === "added" || op.kind === "removed" ? op.value.kind === "object" || op.value.kind === "array" : op.kind === "changed" ? op.left.kind === "object" || op.left.kind === "array" || op.right.kind === "object" || op.right.kind === "array" : false;
+  const preview = op.kind === "changed" ? [
+    {
+      text: previewNode(op.left, 400),
+      tone: "text-rose-700 dark:text-rose-300 line-through"
+    },
+    { text: previewNode(op.right, 400), tone: "text-emerald-700 dark:text-emerald-300" }
+  ] : op.kind === "removed" ? [
+    {
+      text: previewNode(op.value, 400),
+      tone: "text-rose-700 dark:text-rose-300 line-through"
+    }
+  ] : op.kind === "added" ? [{ text: previewNode(op.value, 400), tone: "text-emerald-700 dark:text-emerald-300" }] : [{ text: previewNode(op.value, 400), tone: "text-muted-foreground" }];
+  const justCopied = copiedPath === op.path && op.path !== "";
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      "data-diff-idx": idx,
+      "data-diff-kind": op.kind,
+      className: cn("border-l-4 rounded-sm px-3 py-2 my-0.5 transition-colors", v.border, v.bg),
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onToggle,
+            disabled: !isExpandable2,
+            className: cn(
+              "w-full flex items-center gap-2 text-xs text-left rounded-sm",
+              isExpandable2 ? "cursor-pointer" : "cursor-default"
+            ),
+            "aria-expanded": isExpandable2 ? expanded : void 0,
+            "aria-label": isExpandable2 ? expanded ? `Collapse ${op.path || "root"}` : `Expand ${op.path || "root"}` : void 0,
+            children: [
+              isExpandable2 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                ChevronRight,
+                {
+                  className: cn(
+                    "size-3 shrink-0 transition-transform",
+                    v.accent,
+                    expanded && "rotate-90"
+                  )
+                }
+              ) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "size-3 shrink-0", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: cn("size-3.5 shrink-0", v.accent), strokeWidth: 2.5 }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono truncate flex-1 min-w-0", title: op.path || "(root)", children: op.path === "" ? "(root)" : op.path }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "span",
+                {
+                  className: cn(
+                    "text-[9px] font-bold uppercase tracking-wider shrink-0 px-1.5 py-0.5 rounded",
+                    v.accent,
+                    op.kind === "equal" ? "bg-muted/40" : "bg-background/60"
+                  ),
+                  children: v.label
+                }
+              ),
+              op.path !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "span",
+                {
+                  role: "button",
+                  tabIndex: 0,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onCopyPath(op.path);
+                  },
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.stopPropagation();
+                      e.preventDefault();
+                      onCopyPath(op.path);
+                    }
+                  },
+                  className: cn(
+                    "shrink-0 p-1 rounded transition-colors cursor-pointer inline-flex items-center justify-center",
+                    justCopied ? "text-emerald-500" : "text-muted-foreground/50 hover:text-foreground hover:bg-muted"
+                  ),
+                  "aria-label": justCopied ? "Copied" : "Copy path",
+                  title: justCopied ? "Copied!" : "Copy path",
+                  children: justCopied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-3" })
+                }
+              )
+            ]
+          }
+        ),
+        preview.map((p, i) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: preview list is rebuilt on every render and is positional
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("font-mono text-xs mt-1 break-all pl-5", p.tone), children: p.text }, i)
+        )),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: "overflow-hidden transition-all duration-200",
+            style: { maxHeight: expanded && isExpandable2 ? "2000px" : "0" },
+            "aria-hidden": !expanded,
+            children: expanded && isExpandable2 && op.kind !== "equal" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ExpandedSubtree, { op }) : null
+          }
+        )
+      ]
+    }
+  );
 }
-function ChangedRow({ op }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "col-span-3 px-2 py-1 rounded text-xs border-l-2 border-l-amber-400/70 bg-amber-500/5", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-xs text-muted-foreground mb-1", children: op.path }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-rose-300/90 break-all line-through", children: previewNode(op.left, 400) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-emerald-300/90 break-all", children: previewNode(op.right, 400) })
+function ExpandedSubtree({ op }) {
+  if (op.kind === "added" || op.kind === "removed") {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pl-5 mt-2 border border-border/50 rounded p-2 bg-muted/20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewerFromString, { text: nodeToJsonString(op.value), defaultExpandDepth: 2 }) });
+  }
+  const leftIsStructured = op.left.kind === "object" || op.left.kind === "array";
+  const rightIsStructured = op.right.kind === "object" || op.right.kind === "array";
+  if (!leftIsStructured && !rightIsStructured) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pl-5 mt-2 text-xs text-muted-foreground/70 italic", children: "Primitive values are shown inline above." });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pl-5 mt-2 grid grid-cols-1 md:grid-cols-2 gap-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-rose-500/30 rounded p-2 bg-rose-500/5", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] uppercase tracking-wider text-rose-500 mb-1", children: "Old" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewerFromString, { text: nodeToJsonString(op.left), defaultExpandDepth: 2 })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-emerald-500/30 rounded p-2 bg-emerald-500/5", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] uppercase tracking-wider text-emerald-500 mb-1", children: "New" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewerFromString, { text: nodeToJsonString(op.right), defaultExpandDepth: 2 })
     ] })
   ] });
 }
+function SummaryChips({
+  counts,
+  onJumpTo
+}) {
+  const total = counts.added + counts.removed + counts.changed;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-2 border-b border-border bg-muted/20 flex items-center gap-2 text-xs flex-wrap", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground font-medium", children: [
+      total,
+      " ",
+      total === 1 ? "change" : "changes"
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => onJumpTo("removed"),
+        disabled: counts.removed === 0,
+        className: cn(
+          "inline-flex items-center gap-1 px-2 py-0.5 rounded-full border cursor-pointer transition-colors",
+          counts.removed > 0 ? "border-rose-500/40 text-rose-600 dark:text-rose-400 bg-rose-500/10 hover:bg-rose-500/20" : "border-border text-muted-foreground/40 cursor-not-allowed"
+        ),
+        title: counts.removed > 0 ? "Jump to first removed" : "No removals",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Minus, { className: "size-3" }),
+          counts.removed,
+          " removed"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => onJumpTo("added"),
+        disabled: counts.added === 0,
+        className: cn(
+          "inline-flex items-center gap-1 px-2 py-0.5 rounded-full border cursor-pointer transition-colors",
+          counts.added > 0 ? "border-emerald-500/40 text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 hover:bg-emerald-500/20" : "border-border text-muted-foreground/40 cursor-not-allowed"
+        ),
+        title: counts.added > 0 ? "Jump to first added" : "No additions",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "size-3" }),
+          counts.added,
+          " added"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => onJumpTo("changed"),
+        disabled: counts.changed === 0,
+        className: cn(
+          "inline-flex items-center gap-1 px-2 py-0.5 rounded-full border cursor-pointer transition-colors",
+          counts.changed > 0 ? "border-amber-500/40 text-amber-600 dark:text-amber-400 bg-amber-500/10 hover:bg-amber-500/20" : "border-border text-muted-foreground/40 cursor-not-allowed"
+        ),
+        title: counts.changed > 0 ? "Jump to first changed" : "No changes",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Pencil, { className: "size-3" }),
+          counts.changed,
+          " changed"
+        ]
+      }
+    )
+  ] });
+}
+function ModeToggle({
+  mode,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "inline-flex rounded-md border border-border overflow-hidden", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => onChange("unified"),
+        "aria-pressed": mode === "unified",
+        className: cn(
+          "flex items-center gap-1 px-2 py-1 text-xs transition-colors cursor-pointer",
+          mode === "unified" ? "bg-muted text-foreground" : "hover:bg-muted/50 text-muted-foreground"
+        ),
+        title: "Unified view (single column, emphasized diffs)",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Rows3, { className: "size-3" }),
+          "Unified"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => onChange("split"),
+        "aria-pressed": mode === "split",
+        className: cn(
+          "flex items-center gap-1 px-2 py-1 text-xs transition-colors border-l border-border cursor-pointer",
+          mode === "split" ? "bg-muted text-foreground" : "hover:bg-muted/50 text-muted-foreground"
+        ),
+        title: "Split view (path | left | right)",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Columns2, { className: "size-3" }),
+          "Split"
+        ]
+      }
+    )
+  ] });
+}
 function SideSummary({ log, side }) {
   const conversationId = getConversationId(log);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0 space-y-1 text-xs", children: [
@@ -4305,6 +4705,26 @@ function CompareDrawer({ left, right, onClose }) {
     return diffTrees(l, r);
   }, [left.rawRequestBody, right.rawRequestBody]);
   const grouped = reactExports.useMemo(() => groupContiguousEquals(ops), [ops]);
+  const counts = reactExports.useMemo(() => {
+    let added = 0;
+    let removed = 0;
+    let changed = 0;
+    for (const g of grouped) {
+      if (g.kind !== "single") continue;
+      switch (g.op.kind) {
+        case "added":
+          added++;
+          break;
+        case "removed":
+          removed++;
+          break;
+        case "changed":
+          changed++;
+          break;
+      }
+    }
+    return { added, removed, changed };
+  }, [grouped]);
   const [expandedRuns, setExpandedRuns] = reactExports.useState(/* @__PURE__ */ new Set());
   const toggleRun = (idx) => {
     setExpandedRuns((prev) => {
@@ -4314,6 +4734,44 @@ function CompareDrawer({ left, right, onClose }) {
       return next;
     });
   };
+  const [expandedRows, setExpandedRows] = reactExports.useState(/* @__PURE__ */ new Set());
+  const toggleRow = (idx) => {
+    setExpandedRows((prev) => {
+      const next = new Set(prev);
+      if (next.has(idx)) next.delete(idx);
+      else next.add(idx);
+      return next;
+    });
+  };
+  reactExports.useEffect(() => {
+    setExpandedRows(/* @__PURE__ */ new Set());
+  }, [left.id, right.id]);
+  const [mode, setMode] = reactExports.useState("unified");
+  const bodyRef = reactExports.useRef(null);
+  const [copiedPath, setCopiedPath] = reactExports.useState(null);
+  const copyResetTimer = reactExports.useRef(null);
+  const onCopyPath = (path) => {
+    void window.navigator.clipboard.writeText(path).then(() => {
+      setCopiedPath(path);
+      if (copyResetTimer.current !== null) clearTimeout(copyResetTimer.current);
+      copyResetTimer.current = setTimeout(() => setCopiedPath(null), 1500);
+    });
+  };
+  reactExports.useEffect(() => {
+    return () => {
+      if (copyResetTimer.current !== null) clearTimeout(copyResetTimer.current);
+    };
+  }, []);
+  const jumpToKind = (kind) => {
+    const idx = grouped.findIndex((g) => g.kind === "single" && g.op.kind === kind);
+    if (idx === -1) return;
+    const root = bodyRef.current;
+    if (root === null) return;
+    const el = root.querySelector(`[data-diff-idx="${idx}"]`);
+    if (el !== null) {
+      el.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+  };
   reactExports.useEffect(() => {
     const onKey = (e) => {
       if (e.key === "Escape") onClose();
@@ -4361,33 +4819,24 @@ function CompareDrawer({ left, right, onClose }) {
                   /* @__PURE__ */ jsxRuntimeExports.jsx(SideSummary, { log: left, side: "left" }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx(SideSummary, { log: right, side: "right" })
                 ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: onClose,
-                    "aria-label": "Close",
-                    className: "shrink-0 p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer",
-                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "size-4" })
-                  }
-                )
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(ModeToggle, { mode, onChange: setMode }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onClose,
+                      "aria-label": "Close",
+                      className: "p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer",
+                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "size-4" })
+                    }
+                  )
+                ] })
               ] }),
               !sameSession && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 py-1.5 text-xs text-amber-400 bg-amber-500/10 border-b border-border", children: "Heads up: the two selected logs are from different sessions." }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: allEqual ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 py-12 text-center text-muted-foreground text-sm", children: "The two Request payloads are identical." }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-[200px_1fr_1fr] gap-x-2 gap-y-0.5 px-3 py-2 text-xs", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "col-span-3 grid grid-cols-[200px_1fr_1fr] gap-x-2 pb-2 mb-2 border-b border-border text-[10px] uppercase tracking-wider text-muted-foreground", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Path" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
-                    "Left (Log #",
-                    left.id,
-                    ")"
-                  ] }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
-                    "Right (Log #",
-                    right.id,
-                    ")"
-                  ] })
-                ] }),
-                grouped.map((g, i) => {
+              allEqual ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-h-0 overflow-y-auto flex items-center justify-center text-muted-foreground text-sm", children: "The two Request payloads are identical." }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(SummaryChips, { counts, onJumpTo: jumpToKind }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: bodyRef, className: "flex-1 min-h-0 overflow-y-auto", children: mode === "unified" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-3 py-2 space-y-0.5", children: grouped.map((g, i) => {
                   if (g.kind === "equal-run") {
                     return /* @__PURE__ */ jsxRuntimeExports.jsx(
                       EqualRunRow,
@@ -4400,29 +4849,20 @@ function CompareDrawer({ left, right, onClose }) {
                     );
                   }
                   const op = g.op;
-                  if (op.kind === "equal") {
-                    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                      "div",
-                      {
-                        className: "col-span-3 grid grid-cols-[200px_1fr_1fr] gap-x-2 px-2 py-0.5 text-muted-foreground",
-                        children: [
-                          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-xs truncate", title: op.path, children: op.path }),
-                          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-xs break-all opacity-60", children: previewNode(op.value, 200) }),
-                          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-xs break-all opacity-60", children: previewNode(op.value, 200) })
-                        ]
-                      },
-                      `e${i}`
-                    );
-                  }
-                  if (op.kind === "added") {
-                    return /* @__PURE__ */ jsxRuntimeExports.jsx(AddOrRemoveRow, { op, kind: "added" }, `a${i}`);
-                  }
-                  if (op.kind === "removed") {
-                    return /* @__PURE__ */ jsxRuntimeExports.jsx(AddOrRemoveRow, { op, kind: "removed" }, `r${i}`);
-                  }
-                  return /* @__PURE__ */ jsxRuntimeExports.jsx(ChangedRow, { op }, `c${i}`);
-                })
-              ] }) })
+                  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    UnifiedOpRow,
+                    {
+                      op,
+                      idx: i,
+                      copiedPath,
+                      onCopyPath,
+                      expanded: expandedRows.has(i),
+                      onToggle: () => toggleRow(i)
+                    },
+                    `o${i}`
+                  );
+                }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(SplitBody, { grouped, left, right }) })
+              ] })
             ]
           }
         )
@@ -4430,6 +4870,103 @@ function CompareDrawer({ left, right, onClose }) {
     }
   );
 }
+function SplitBody({
+  grouped,
+  left,
+  right
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-[200px_1fr_1fr] gap-x-2 gap-y-0.5 px-3 py-2 text-xs", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-[200px_1fr_1fr] gap-x-2 col-span-3 pb-2 mb-2 border-b border-border text-[10px] uppercase tracking-wider text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Path" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+        "Left (Log #",
+        left.id,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+        "Right (Log #",
+        right.id,
+        ")"
+      ] })
+    ] }),
+    grouped.map((g, i) => {
+      if (g.kind === "equal-run") {
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            className: "col-span-3 px-2 py-1 text-xs text-muted-foreground/60",
+            children: [
+              g.ops.length,
+              " equal siblings collapsed — switch to Unified to expand"
+            ]
+          },
+          i
+        );
+      }
+      const op = g.op;
+      if (op.kind === "equal") {
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            className: "col-span-3 grid grid-cols-[200px_1fr_1fr] gap-x-2 px-2 py-0.5 text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-xs truncate", title: op.path, children: op.path }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-xs break-all opacity-60", children: previewNode(op.value, 200) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-xs break-all opacity-60", children: previewNode(op.value, 200) })
+            ]
+          },
+          i
+        );
+      }
+      if (op.kind === "added") {
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            className: "col-span-3 px-2 py-1 rounded text-xs border-l-2 border-l-emerald-400/70 bg-emerald-500/5",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-xs text-muted-foreground mb-0.5", children: op.path }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "font-mono break-all text-emerald-300/90", children: [
+                "+ ",
+                previewNode(op.value, 400)
+              ] })
+            ]
+          },
+          i
+        );
+      }
+      if (op.kind === "removed") {
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            className: "col-span-3 px-2 py-1 rounded text-xs border-l-2 border-l-rose-400/70 bg-rose-500/5",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-xs text-muted-foreground mb-0.5", children: op.path }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "font-mono break-all text-rose-300/90 line-through", children: [
+                "− ",
+                previewNode(op.value, 400)
+              ] })
+            ]
+          },
+          i
+        );
+      }
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          className: "col-span-3 px-2 py-1 rounded text-xs border-l-2 border-l-amber-400/70 bg-amber-500/5",
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-xs text-muted-foreground mb-1", children: op.path }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-rose-300/90 break-all line-through", children: previewNode(op.left, 400) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-emerald-300/90 break-all", children: previewNode(op.right, 400) })
+            ] })
+          ]
+        },
+        i
+      );
+    })
+  ] });
+}
 function truncateSessionId(id) {
   if (id.length <= 30) return id;
   return id.slice(0, 12) + "…" + id.slice(-12);