@tonyclaw/llm-inspector 1.10.0 → 1.11.0

package/.output/server/_ssr/{index-XyU4WVWt.mjs → index-I_Nx8QEB.mjs}

@@ -1,14 +1,15 @@
-import { r as reactExports, j as jsxRuntimeExports, R as React } from "../_libs/react.mjs";
-import { C as CapturedLogSchema, a as parseRequest, s as stripClaudeCodeBillingHeader, R as RuntimeConfigSchema, p as parseOpenAIResponse, I as InspectorResponseSchema } from "./router-BR4XO8XJ.mjs";
+import { r as reactExports, j as jsxRuntimeExports, a as React } from "../_libs/react.mjs";
+import { C as CapturedLogSchema, R as RuntimeConfigSchema, a as parseRequest, s as stripClaudeCodeBillingHeader, p as parseOpenAIResponse, I as InspectorResponseSchema } from "./router-BVxfVFsb.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";
 import { c as clsx } from "../_libs/clsx.mjs";
 import { t as twMerge } from "../_libs/tailwind-merge.mjs";
 import { c as cva } from "../_libs/class-variance-authority.mjs";
-import { u as useSWR, a as useSWRConfig } from "../_libs/swr.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, 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, B as Brain, A as Terminal } from "../_libs/lucide-react.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, k as GitCompareArrows, l as Rows3, m as Columns2, E as ExternalLink, n as EyeOff, o as Eye, p as RotateCw, q as Pencil, T as Trash2, r as TriangleAlert, s as Minus, t as CircleCheckBig, u as CircleStop, v as CircleQuestionMark, w as Server, x as Gauge, y as Lock, z as Wifi, A as WifiOff, B as ChevronsUp, H as ChevronsDown, I as Brain, J 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 } 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";
@@ -18,9 +19,11 @@ import { R as Root$1 } from "../_libs/radix-ui__react-separator.mjs";
 import { R as Root$2, C as CollapsibleTrigger$1, a as CollapsibleContent$1 } from "../_libs/radix-ui__react-collapsible.mjs";
 import { R as Root$3, V as Viewport$1, C as Corner, S as ScrollAreaScrollbar, a as ScrollAreaThumb } from "../_libs/radix-ui__react-scroll-area.mjs";
 import "../_libs/tanstack__react-router.mjs";
+import "../_libs/tiny-warning.mjs";
 import "../_libs/tanstack__router-core.mjs";
-import "../_libs/tanstack__history.mjs";
 import "../_libs/cookie-es.mjs";
+import "../_libs/tanstack__history.mjs";
+import "../_libs/tiny-invariant.mjs";
 import "../_libs/seroval.mjs";
 import "../_libs/seroval-plugins.mjs";
 import "node:stream/web";
@@ -159,6 +162,62 @@ import "../_libs/hast-util-whitespace.mjs";
 import "../_libs/estree-util-is-identifier-name.mjs";
 import "../_libs/html-url-attributes.mjs";
 import "../_libs/radix-ui__react-roving-focus.mjs";
+const STRIP_CONFIG_SWR_KEY = "/api/config";
+async function fetcher$1(url) {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch ${url}: ${response.status}`);
+  }
+  const data = await response.json();
+  return RuntimeConfigSchema.parse(data);
+}
+function extractErrorMessage(errorBody, fallback) {
+  if (typeof errorBody !== "object" || errorBody === null) return fallback;
+  const candidate = errorBody.error;
+  return typeof candidate === "string" ? candidate : fallback;
+}
+async function setRuntimeConfig(patch) {
+  const response = await fetch(STRIP_CONFIG_SWR_KEY, {
+    method: "PATCH",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify(patch)
+  });
+  if (!response.ok) {
+    const errorBody = await response.json().catch(() => ({}));
+    throw new Error(extractErrorMessage(errorBody, `PATCH failed with status ${response.status}`));
+  }
+  const data = await response.json();
+  return RuntimeConfigSchema.parse(data);
+}
+function useStripConfig() {
+  const response = useSWR(
+    STRIP_CONFIG_SWR_KEY,
+    fetcher$1,
+    {
+      revalidateOnFocus: false,
+      revalidateIfStale: false
+    }
+  );
+  const { mutate: globalMutate } = useSWRConfig();
+  const strip = response.data?.stripClaudeCodeBillingHeader ?? false;
+  const setStrip = async (next) => {
+    await globalMutate(
+      STRIP_CONFIG_SWR_KEY,
+      setRuntimeConfig({ stripClaudeCodeBillingHeader: next }),
+      {
+        optimisticData: { stripClaudeCodeBillingHeader: next },
+        rollbackOnError: true,
+        revalidate: false
+      }
+    );
+  };
+  return {
+    strip,
+    isLoading: response.isLoading,
+    isError: response.error !== void 0,
+    setStrip
+  };
+}
 async function fetchStreamingChunks(logId) {
   try {
     const response = await fetch(`/api/logs/${logId}/chunks`);
@@ -198,7 +257,7 @@ async function exportLogsAsZip(logs) {
   document.body.removeChild(anchor);
   URL.revokeObjectURL(url);
 }
-const version = "1.10.0";
+const version = "1.11.0";
 const packageJson = {
   version
 };
@@ -391,62 +450,6 @@ function groupLogsByConversation(logs) {
   result.sort((a, b) => (a.logs[0]?.timestamp ?? "").localeCompare(b.logs[0]?.timestamp ?? ""));
   return result;
 }
-const STRIP_CONFIG_SWR_KEY = "/api/config";
-async function fetcher$1(url) {
-  const response = await fetch(url);
-  if (!response.ok) {
-    throw new Error(`Failed to fetch ${url}: ${response.status}`);
-  }
-  const data = await response.json();
-  return RuntimeConfigSchema.parse(data);
-}
-function extractErrorMessage(errorBody, fallback) {
-  if (typeof errorBody !== "object" || errorBody === null) return fallback;
-  const candidate = errorBody.error;
-  return typeof candidate === "string" ? candidate : fallback;
-}
-async function setRuntimeConfig(patch) {
-  const response = await fetch(STRIP_CONFIG_SWR_KEY, {
-    method: "PATCH",
-    headers: { "content-type": "application/json" },
-    body: JSON.stringify(patch)
-  });
-  if (!response.ok) {
-    const errorBody = await response.json().catch(() => ({}));
-    throw new Error(extractErrorMessage(errorBody, `PATCH failed with status ${response.status}`));
-  }
-  const data = await response.json();
-  return RuntimeConfigSchema.parse(data);
-}
-function useStripConfig() {
-  const response = useSWR(
-    STRIP_CONFIG_SWR_KEY,
-    fetcher$1,
-    {
-      revalidateOnFocus: false,
-      revalidateIfStale: false
-    }
-  );
-  const { mutate: globalMutate } = useSWRConfig();
-  const strip = response.data?.stripClaudeCodeBillingHeader ?? false;
-  const setStrip = async (next) => {
-    await globalMutate(
-      STRIP_CONFIG_SWR_KEY,
-      setRuntimeConfig({ stripClaudeCodeBillingHeader: next }),
-      {
-        optimisticData: { stripClaudeCodeBillingHeader: next },
-        rollbackOnError: true,
-        revalidate: false
-      }
-    );
-  };
-  return {
-    strip,
-    isLoading: response.isLoading,
-    isError: response.error !== void 0,
-    setStrip
-  };
-}
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
@@ -958,6 +961,332 @@ function TabsContent({
     }
   );
 }
+function normalizeHeaders(headers) {
+  if (headers === void 0) return [];
+  return Object.entries(headers).map((entry) => [entry[0].toLowerCase(), entry[1]]).sort(([a], [b]) => a.localeCompare(b));
+}
+function headerLine([key, value]) {
+  return `${key}: ${value}`;
+}
+function changesToLines(changes) {
+  const lines = [];
+  let oldNum = 0;
+  let newNum = 0;
+  for (const change of changes) {
+    const parts = change.value.split("\n");
+    if (parts.length > 0 && parts[parts.length - 1] === "") parts.pop();
+    for (const text of parts) {
+      if (change.added) {
+        newNum += 1;
+        lines.push({ kind: "added", text, oldLineNumber: null, newLineNumber: newNum });
+      } else if (change.removed) {
+        oldNum += 1;
+        lines.push({ kind: "removed", text, oldLineNumber: oldNum, newLineNumber: null });
+      } else {
+        oldNum += 1;
+        newNum += 1;
+        lines.push({
+          kind: "context",
+          text,
+          oldLineNumber: oldNum,
+          newLineNumber: newNum
+        });
+      }
+    }
+  }
+  return lines;
+}
+function computeHeadersDiff(rawHeaders, processedHeaders) {
+  const left = normalizeHeaders(rawHeaders).map(headerLine).join("\n");
+  const right = normalizeHeaders(processedHeaders).map(headerLine).join("\n");
+  if (left === right) {
+    return { lines: [], isEmpty: true };
+  }
+  const changes = diffLines(left, right);
+  return { lines: changesToLines(changes), isEmpty: false };
+}
+function tryParseJson(text) {
+  try {
+    const parsed = JSON.parse(text);
+    if (parsed === null) return parsed;
+    if (typeof parsed === "string" || typeof parsed === "object") return parsed;
+    return null;
+  } catch {
+    return null;
+  }
+}
+function computeRequestDiff(rawBody, processedBody) {
+  const left = rawBody ?? "";
+  const right = processedBody ?? "";
+  if (left === right) {
+    return { lines: [], isEmpty: true };
+  }
+  const leftJson = tryParseJson(left);
+  const rightJson = tryParseJson(right);
+  if (leftJson !== null && rightJson !== null) {
+    const changes2 = diffJson(leftJson, rightJson) ?? [];
+    if (changes2.length === 1) {
+      const first = changes2[0];
+      if (first !== void 0 && !first.added && !first.removed) {
+        return { lines: [], isEmpty: true };
+      }
+    }
+    return { lines: changesToLines(changes2), isEmpty: false };
+  }
+  const changes = diffLines(left, right);
+  return { lines: changesToLines(changes), isEmpty: false };
+}
+const ESTIMATED_LINE_HEIGHT = 22;
+const MAX_RENDERED_LINES = 1e4;
+function kindPrefix(kind) {
+  if (kind === "added") return "+";
+  if (kind === "removed") return "-";
+  return " ";
+}
+function kindClass(kind) {
+  if (kind === "added") {
+    return "bg-green-500/10 text-green-700 dark:text-green-300";
+  }
+  if (kind === "removed") {
+    return "bg-red-500/10 text-red-700 dark:text-red-300";
+  }
+  return "text-foreground/80";
+}
+function DiffView({ result, emptyLabel }) {
+  const [mode, setMode] = reactExports.useState("unified");
+  const scrollRef = reactExports.useRef(null);
+  const virtualizer = useVirtualizer({
+    count: result.lines.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => ESTIMATED_LINE_HEIGHT,
+    overscan: 10
+  });
+  if (result.isEmpty) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: "rounded border border-dashed border-border bg-muted/30 px-4 py-6 text-center text-xs text-muted-foreground",
+        "data-testid": "diff-empty",
+        children: emptyLabel ?? "No transformation applied — raw and processed are identical."
+      }
+    );
+  }
+  const totalLines = result.lines.length;
+  const truncated = totalLines > MAX_RENDERED_LINES;
+  const visibleLines = truncated ? result.lines.slice(0, MAX_RENDERED_LINES) : result.lines;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+        totalLines.toLocaleString(),
+        " line",
+        totalLines === 1 ? "" : "s",
+        truncated && ` (showing first ${MAX_RENDERED_LINES.toLocaleString()})`
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "inline-flex rounded-md border border-border overflow-hidden", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setMode("unified"),
+            "aria-pressed": mode === "unified",
+            className: cn(
+              "flex items-center gap-1 px-2 py-1 transition-colors",
+              mode === "unified" ? "bg-muted text-foreground" : "hover:bg-muted/50"
+            ),
+            title: "Unified diff (single column)",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Rows3, { className: "size-3" }),
+              "Unified"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setMode("split"),
+            "aria-pressed": mode === "split",
+            className: cn(
+              "flex items-center gap-1 px-2 py-1 transition-colors border-l border-border",
+              mode === "split" ? "bg-muted text-foreground" : "hover:bg-muted/50"
+            ),
+            title: "Split diff (side by side)",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Columns2, { className: "size-3" }),
+              "Split"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        ref: scrollRef,
+        className: "max-h-[60vh] overflow-auto rounded border border-border bg-background font-mono text-xs",
+        "data-testid": "diff-viewport",
+        children: mode === "unified" ? /* @__PURE__ */ jsxRuntimeExports.jsx(UnifiedRows, { virtualizer, lines: visibleLines }) : /* @__PURE__ */ jsxRuntimeExports.jsx(SplitRows, { lines: visibleLines })
+      }
+    )
+  ] });
+}
+function UnifiedRows({
+  virtualizer,
+  lines
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      style: {
+        height: `${virtualizer.getTotalSize()}px`,
+        width: "100%",
+        position: "relative"
+      },
+      children: virtualizer.getVirtualItems().map((virtualRow) => {
+        const line = lines[virtualRow.index];
+        if (line === void 0) return null;
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            "data-index": virtualRow.index,
+            ref: virtualizer.measureElement,
+            className: cn("flex items-start gap-3 px-2", kindClass(line.kind)),
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              transform: `translateY(${virtualRow.start}px)`
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "select-none text-muted-foreground/60 w-10 text-right tabular-nums", children: line.oldLineNumber ?? "" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "select-none text-muted-foreground/60 w-10 text-right tabular-nums", children: line.newLineNumber ?? "" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "span",
+                {
+                  className: cn(
+                    "select-none w-3 text-right font-bold",
+                    line.kind === "added" && "text-green-600 dark:text-green-400",
+                    line.kind === "removed" && "text-red-600 dark:text-red-400"
+                  ),
+                  children: kindPrefix(line.kind)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "whitespace-pre-wrap break-all flex-1", children: line.text })
+            ]
+          },
+          virtualRow.key
+        );
+      })
+    }
+  );
+}
+function buildSplitRows(lines) {
+  const rows = [];
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    if (line === void 0) break;
+    if (line.kind === "context") {
+      rows.push({
+        left: { text: line.text, lineNumber: line.oldLineNumber },
+        right: { text: line.text, lineNumber: line.newLineNumber },
+        kind: "equal"
+      });
+      i += 1;
+      continue;
+    }
+    const removes = [];
+    const adds = [];
+    while (i < lines.length && lines[i]?.kind === "removed") {
+      const removed = lines[i];
+      if (removed !== void 0) removes.push(removed);
+      i += 1;
+    }
+    while (i < lines.length && lines[i]?.kind === "added") {
+      const added = lines[i];
+      if (added !== void 0) adds.push(added);
+      i += 1;
+    }
+    const pairCount = Math.max(removes.length, adds.length);
+    for (let p = 0; p < pairCount; p += 1) {
+      const r = removes[p];
+      const a = adds[p];
+      if (r !== void 0 && a !== void 0) {
+        rows.push({
+          left: { text: r.text, lineNumber: r.oldLineNumber },
+          right: { text: a.text, lineNumber: a.newLineNumber },
+          kind: "changed"
+        });
+      } else if (r !== void 0) {
+        rows.push({
+          left: { text: r.text, lineNumber: r.oldLineNumber },
+          right: null,
+          kind: "removed"
+        });
+      } else if (a !== void 0) {
+        rows.push({
+          left: null,
+          right: { text: a.text, lineNumber: a.newLineNumber },
+          kind: "added"
+        });
+      }
+    }
+  }
+  return rows;
+}
+function SplitRowClass(kind) {
+  switch (kind) {
+    case "changed":
+      return "bg-amber-500/10";
+    case "removed":
+      return "bg-red-500/10";
+    case "added":
+      return "bg-green-500/10";
+    case "equal":
+      return "";
+  }
+}
+function SplitRows({ lines }) {
+  const rows = buildSplitRows(lines);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-testid": "diff-split", children: rows.map((row, idx) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: cn("grid grid-cols-2 font-mono text-xs", SplitRowClass(row.kind)),
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-2 px-2 border-r border-border/50", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "select-none text-muted-foreground/60 w-8 text-right tabular-nums", children: row.left?.lineNumber ?? "" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "span",
+            {
+              className: cn(
+                "select-none w-3 text-right font-bold",
+                (row.kind === "removed" || row.kind === "changed") && "text-red-600 dark:text-red-400"
+              ),
+              children: row.left !== null ? "-" : " "
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "whitespace-pre-wrap break-all flex-1", children: row.left?.text ?? "" })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-2 px-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "select-none text-muted-foreground/60 w-8 text-right tabular-nums", children: row.right?.lineNumber ?? "" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "span",
+            {
+              className: cn(
+                "select-none w-3 text-right font-bold",
+                (row.kind === "added" || row.kind === "changed") && "text-green-600 dark:text-green-400"
+              ),
+              children: row.right !== null ? "+" : " "
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "whitespace-pre-wrap break-all flex-1", children: row.right?.text ?? "" })
+        ] })
+      ]
+    },
+    idx
+  )) });
+}
 const AnthropicLogoSvg = "data:image/svg+xml,%3csvg%20height='2500'%20viewBox='0%206.603%201192.672%201193.397'%20width='2500'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m233.96%20800.215%20234.684-131.678%203.947-11.436-3.947-6.363h-11.436l-39.221-2.416-134.094-3.624-116.296-4.832-112.67-6.04-28.35-6.04-26.577-35.035%202.738-17.477%2023.84-16.027%2034.147%202.98%2075.463%205.155%20113.235%207.812%2082.147%204.832%20121.692%2012.644h19.329l2.738-7.812-6.604-4.832-5.154-4.832-117.182-79.41-126.845-83.92-66.443-48.321-35.92-24.484-18.12-22.953-7.813-50.093%2032.618-35.92%2043.812%202.98%2011.195%202.98%2044.375%2034.147%2094.792%2073.37%20123.786%2091.167%2018.12%2015.06%207.249-5.154.886-3.624-8.135-13.61-67.329-121.692-71.838-123.785-31.974-51.302-8.456-30.765c-2.98-12.645-5.154-23.275-5.154-36.242l37.127-50.416%2020.537-6.604%2049.53%206.604%2020.86%2018.121%2030.765%2070.39%2049.852%20110.818%2077.315%20150.684%2022.631%2044.698%2012.08%2041.396%204.51%2012.645h7.813v-7.248l6.362-84.886%2011.759-104.215%2011.436-134.094%203.946-37.772%2018.685-45.262%2037.127-24.482%2028.994%2013.852%2023.839%2034.148-3.303%2022.067-14.174%2092.134-27.785%20144.323-18.121%2096.644h10.55l12.08-12.08%2048.887-64.913%2082.147-102.685%2036.242-40.752%2042.282-45.02%2027.14-21.423h51.303l37.772%2056.135-16.913%2057.986-52.832%2067.007-43.812%2056.779-62.82%2084.563-39.22%2067.651%203.623%205.396%209.343-.886%20141.906-30.201%2076.671-13.852%2091.49-15.705%2041.396%2019.329%204.51%2019.65-16.269%2040.189-97.852%2024.16-114.764%2022.954-170.9%2040.43-2.093%201.53%202.416%202.98%2076.993%207.248%2032.94%201.771h80.617l150.12%2011.195%2039.222%2025.933%2023.517%2031.732-3.946%2024.16-60.403%2030.766-81.503-19.33-190.228-45.26-65.235-16.27h-9.02v5.397l54.362%2053.154%2099.624%2089.96%20124.752%20115.973%206.362%2028.671-16.027%2022.63-16.912-2.415-109.611-82.47-42.282-37.127-95.758-80.618h-6.363v8.456l22.067%2032.296%20116.537%20175.167%206.04%2053.719-8.456%2017.476-30.201%2010.55-33.181-6.04-68.215-95.758-70.39-107.84-56.778-96.644-6.926%203.947-33.503%20360.886-15.705%2018.443-36.243%2013.852-30.201-22.953-16.027-37.127%2016.027-73.37%2019.329-95.758%2015.704-76.107%2014.175-94.55%208.456-31.41-.563-2.094-6.927.886-71.275%2097.852-108.402%20146.497-85.772%2091.812-20.537%208.134-35.597-18.443%203.301-32.94%2019.893-29.315%20118.712-151.007%2071.597-93.583%2046.228-54.04-.322-7.813h-2.738l-315.302%20204.725-56.135%207.248-24.16-22.63%202.98-37.128%2011.435-12.08%2094.792-65.236-.322.323z'%20fill='%23d97757'/%3e%3c/svg%3e";
 const OpenAILogoSvg = "data:image/svg+xml,%3csvg%20height='2500'%20viewBox='-1%20-.1%20949.1%20959.8'%20width='2474'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m925.8%20456.3c10.4%2023.2%2017%2048%2019.7%2073.3%202.6%2025.3%201.3%2050.9-4.1%2075.8-5.3%2024.9-14.5%2048.8-27.3%2070.8-8.4%2014.7-18.3%2028.5-29.7%2041.2-11.3%2012.6-23.9%2024-37.6%2034-13.8%2010-28.5%2018.4-44.1%2025.3-15.5%206.8-31.7%2012-48.3%2015.4-7.8%2024.2-19.4%2047.1-34.4%2067.7-14.9%2020.6-33%2038.7-53.6%2053.6-20.6%2015-43.4%2026.6-67.6%2034.4-24.2%207.9-49.5%2011.8-75%2011.8-16.9.1-33.9-1.7-50.5-5.1-16.5-3.5-32.7-8.8-48.2-15.7s-30.2-15.5-43.9-25.5c-13.6-10-26.2-21.5-37.4-34.2-25%205.4-50.6%206.7-75.9%204.1-25.3-2.7-50.1-9.3-73.4-19.7-23.2-10.3-44.7-24.3-63.6-41.4s-35-37.1-47.7-59.1c-8.5-14.7-15.5-30.2-20.8-46.3s-8.8-32.7-10.6-49.6c-1.8-16.8-1.7-33.8.1-50.7%201.8-16.8%205.5-33.4%2010.8-49.5-17-18.9-31-40.4-41.4-63.6-10.3-23.3-17-48-19.6-73.3-2.7-25.3-1.3-50.9%204-75.8s14.5-48.8%2027.3-70.8c8.4-14.7%2018.3-28.6%2029.6-41.2s24-24%2037.7-34%2028.5-18.5%2044-25.3c15.6-6.9%2031.8-12%2048.4-15.4%207.8-24.3%2019.4-47.1%2034.3-67.7%2015-20.6%2033.1-38.7%2053.7-53.7%2020.6-14.9%2043.4-26.5%2067.6-34.4%2024.2-7.8%2049.5-11.8%2075-11.7%2016.9-.1%2033.9%201.6%2050.5%205.1s32.8%208.7%2048.3%2015.6c15.5%207%2030.2%2015.5%2043.9%2025.5%2013.7%2010.1%2026.3%2021.5%2037.5%2034.2%2024.9-5.3%2050.5-6.6%2075.8-4s50%209.3%2073.3%2019.6c23.2%2010.4%2044.7%2024.3%2063.6%2041.4%2018.9%2017%2035%2036.9%2047.7%2059%208.5%2014.6%2015.5%2030.1%2020.8%2046.3%205.3%2016.1%208.9%2032.7%2010.6%2049.6%201.8%2016.9%201.8%2033.9-.1%2050.8-1.8%2016.9-5.5%2033.5-10.8%2049.6%2017.1%2018.9%2031%2040.3%2041.4%2063.6zm-333.2%20426.9c21.8-9%2041.6-22.3%2058.3-39s30-36.5%2039-58.4c9-21.8%2013.7-45.2%2013.7-68.8v-223q-.1-.3-.2-.7-.1-.3-.3-.6-.2-.3-.5-.5-.3-.3-.6-.4l-80.7-46.6v269.4c0%202.7-.4%205.5-1.1%208.1-.7%202.7-1.7%205.2-3.1%207.6s-3%204.6-5%206.5a32.1%2032.1%200%200%201%20-6.5%205l-191.1%20110.3c-1.6%201-4.3%202.4-5.7%203.2%207.9%206.7%2016.5%2012.6%2025.5%2017.8%209.1%205.2%2018.5%209.6%2028.3%2013.2%209.8%203.5%2019.9%206.2%2030.1%208%2010.3%201.8%2020.7%202.7%2031.1%202.7%2023.6%200%2047-4.7%2068.8-13.8zm-455.1-151.4c11.9%2020.5%2027.6%2038.3%2046.3%2052.7%2018.8%2014.4%2040.1%2024.9%2062.9%2031s46.6%207.7%2070%204.6%2045.9-10.7%2066.4-22.5l193.2-111.5.5-.5q.2-.2.3-.6.2-.3.3-.6v-94l-233.2%20134.9c-2.4%201.4-4.9%202.4-7.5%203.2-2.7.7-5.4%201-8.2%201-2.7%200-5.4-.3-8.1-1-2.6-.8-5.2-1.8-7.6-3.2l-191.1-110.4c-1.7-1-4.2-2.5-5.6-3.4-1.8%2010.3-2.7%2020.7-2.7%2031.1s1%2020.8%202.8%2031.1c1.8%2010.2%204.6%2020.3%208.1%2030.1%203.6%209.8%208%2019.2%2013.2%2028.2zm-50.2-417c-11.8%2020.5-19.4%2043.1-22.5%2066.5s-1.5%2047.1%204.6%2070c6.1%2022.8%2016.6%2044.1%2031%2062.9%2014.4%2018.7%2032.3%2034.4%2052.7%2046.2l193.1%20111.6q.3.1.7.2h.7q.4%200%20.7-.2.3-.1.6-.3l81-46.8-233.2-134.6c-2.3-1.4-4.5-3.1-6.5-5a32.1%2032.1%200%200%201%20-5-6.5c-1.3-2.4-2.4-4.9-3.1-7.6-.7-2.6-1.1-5.3-1-8.1v-227.1c-9.8%203.6-19.3%208-28.3%2013.2-9%205.3-17.5%2011.3-25.5%2018-7.9%206.7-15.3%2014.1-22%2022.1-6.7%207.9-12.6%2016.5-17.8%2025.5zm663.3%20154.4c2.4%201.4%204.6%203%206.6%205%201.9%201.9%203.6%204.1%205%206.5%201.3%202.4%202.4%205%203.1%207.6.6%202.7%201%205.4.9%208.2v227.1c32.1-11.8%2060.1-32.5%2080.8-59.7%2020.8-27.2%2033.3-59.7%2036.2-93.7s-3.9-68.2-19.7-98.5-39.9-55.5-69.5-72.5l-193.1-111.6q-.3-.1-.7-.2h-.7q-.3.1-.7.2-.3.1-.6.3l-80.6%2046.6%20233.2%20134.7zm80.5-121h-.1v.1zm-.1-.1c5.8-33.6%201.9-68.2-11.3-99.7-13.1-31.5-35-58.6-63-78.2-28-19.5-61-30.7-95.1-32.2-34.2-1.4-68%206.9-97.6%2023.9l-193.1%20111.5q-.3.2-.5.5l-.4.6q-.1.3-.2.7-.1.3-.1.7v93.2l233.2-134.7c2.4-1.4%205-2.4%207.6-3.2%202.7-.7%205.4-1%208.1-1%202.8%200%205.5.3%208.2%201%202.6.8%205.1%201.8%207.5%203.2l191.1%20110.4c1.7%201%204.2%202.4%205.6%203.3zm-505.3-103.2c0-2.7.4-5.4%201.1-8.1.7-2.6%201.7-5.2%203.1-7.6%201.4-2.3%203-4.5%205-6.5%201.9-1.9%204.1-3.6%206.5-4.9l191.1-110.3c1.8-1.1%204.3-2.5%205.7-3.2-26.2-21.9-58.2-35.9-92.1-40.2-33.9-4.4-68.3%201-99.2%2015.5-31%2014.5-57.2%2037.6-75.5%2066.4-18.3%2028.9-28%2062.3-28%2096.5v223q.1.4.2.7.1.3.3.6.2.3.5.6.2.2.6.4l80.7%2046.6zm43.8%20294.7%20103.9%2060%20103.9-60v-119.9l-103.8-60-103.9%2060z'/%3e%3c/svg%3e";
 const DeepSeekLogoSvg = "data:image/svg+xml,%3csvg%20fill='none'%20height='1320'%20viewBox='3.771%206.973%2023.993%2017.652'%20width='2500'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m27.501%208.469c-.252-.123-.36.111-.508.23-.05.04-.093.09-.135.135-.368.395-.797.652-1.358.621-.821-.045-1.521.213-2.14.842-.132-.776-.57-1.238-1.235-1.535-.349-.155-.701-.309-.944-.645-.171-.238-.217-.504-.303-.765-.054-.159-.108-.32-.29-.348-.197-.031-.274.135-.352.273-.31.567-.43%201.192-.419%201.825.028%201.421.628%202.554%201.82%203.36.136.093.17.186.128.321-.081.278-.178.547-.264.824-.054.178-.135.217-.324.14a5.448%205.448%200%200%201%20-1.719-1.169c-.848-.82-1.614-1.726-2.57-2.435-.225-.166-.449-.32-.681-.467-.976-.95.128-1.729.383-1.82.267-.096.093-.428-.77-.424s-1.653.293-2.659.677a2.782%202.782%200%200%201%20-.46.135%209.554%209.554%200%200%200%20-2.853-.1c-1.866.21-3.356%201.092-4.452%202.6-1.315%201.81-1.625%203.87-1.246%206.018.399%202.261%201.552%204.136%203.326%205.601%201.837%201.518%203.955%202.262%206.37%202.12%201.466-.085%203.1-.282%204.942-1.842.465.23.952.322%201.762.392.623.059%201.223-.031%201.687-.127.728-.154.677-.828.414-.953-2.132-.994-1.665-.59-2.09-.916%201.084-1.285%202.717-2.619%203.356-6.94.05-.343.007-.558%200-.837-.004-.168.034-.235.228-.254a4.084%204.084%200%200%200%201.529-.47c1.382-.757%201.938-1.997%202.07-3.485.02-.227-.004-.463-.243-.582zm-12.041%2013.391c-2.067-1.627-3.07-2.162-3.483-2.138-.387.021-.318.465-.233.754.089.285.205.482.368.732.113.166.19.414-.112.598-.666.414-1.823-.139-1.878-.166-1.347-.793-2.473-1.842-3.267-3.276-.765-1.38-1.21-2.861-1.284-4.441-.02-.383.093-.518.472-.586a4.692%204.692%200%200%201%201.514-.04c2.109.31%203.905%201.255%205.41%202.749.86.853%201.51%201.871%202.18%202.865.711%201.057%201.478%202.063%202.454%202.887.343.289.619.51.881.672-.792.088-2.117.107-3.022-.61zm.99-6.38a.304.304%200%201%201%20.609%200c0%20.17-.136.304-.306.304a.3.3%200%200%201%20-.303-.305zm3.077%201.581c-.197.08-.394.15-.584.159a1.246%201.246%200%200%201%20-.79-.252c-.27-.227-.463-.354-.546-.752a1.752%201.752%200%200%201%20.016-.582c.07-.324-.008-.531-.235-.72-.187-.155-.422-.196-.682-.196a.551.551%200%200%201%20-.252-.078c-.108-.055-.197-.19-.112-.356.027-.053.159-.183.19-.207.352-.201.758-.135%201.134.016.349.142.611.404.99.773.388.448.457.573.678.906.174.264.333.534.441.842.066.192-.02.35-.248.448z'%20fill='%234d6bfe'/%3e%3c/svg%3e";
@@ -1958,6 +2287,12 @@ function StreamingChunkSequence({
 function shouldShowRawRequestTab(apiFormat, viewMode, strip) {
   return apiFormat === "anthropic" && viewMode === "full" && strip;
 }
+function shouldShowHeadersDiffButton(viewMode, hasRawHeaders) {
+  return viewMode === "full" && hasRawHeaders;
+}
+function shouldShowRequestDiffButton(apiFormat, viewMode, strip, hasRawRequest) {
+  return apiFormat === "anthropic" && viewMode === "full" && strip && hasRawRequest;
+}
 function CopyButton({
   text,
   label,
@@ -1981,17 +2316,41 @@ function CopyButton({
     }
   );
 }
+function DiffToggleButton({
+  active,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-pressed": active,
+      className: cn(
+        "flex items-center gap-1.5 text-xs px-2 py-1 rounded transition-colors",
+        active ? "bg-primary/10 text-primary" : "text-muted-foreground hover:text-foreground hover:bg-muted"
+      ),
+      title: active ? "Hide diff with raw" : "Diff this view against the raw version",
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(GitCompareArrows, { className: "size-3" }),
+        active ? "Showing diff" : "Diff with Raw"
+      ]
+    }
+  );
+}
 const LogEntry = reactExports.memo(function({
   log,
   viewMode = "simple",
-  suppressApiFormatBadge = false
+  suppressApiFormatBadge = false,
+  strip
 }) {
   const [expanded, setExpanded] = reactExports.useState(false);
   const [requestCopied, setRequestCopied] = reactExports.useState(false);
   const [rawRequestCopied, setRawRequestCopied] = reactExports.useState(false);
   const [responseCopied, setResponseCopied] = reactExports.useState(false);
   const [replayOpen, setReplayOpen] = reactExports.useState(false);
-  const { strip } = useStripConfig();
+  const [headersDiff, setHeadersDiff] = reactExports.useState(false);
+  const [requestDiff, setRequestDiff] = reactExports.useState(false);
   const parsedRequest = reactExports.useMemo(() => parseRequest(log.rawRequestBody), [log.rawRequestBody]);
   const strippedRequestBody = reactExports.useMemo(() => {
     if (!strip || log.apiFormat !== "anthropic" || log.rawRequestBody === null) {
@@ -2000,6 +2359,14 @@ const LogEntry = reactExports.memo(function({
     return stripClaudeCodeBillingHeader(log.rawRequestBody).body;
   }, [log.rawRequestBody, log.apiFormat, strip]);
   const displayedRequestBody = strippedRequestBody ?? log.rawRequestBody;
+  const headersDiffResult = reactExports.useMemo(
+    () => computeHeadersDiff(log.rawHeaders, log.headers),
+    [log.rawHeaders, log.headers]
+  );
+  const requestDiffResult = reactExports.useMemo(
+    () => computeRequestDiff(log.rawRequestBody, displayedRequestBody),
+    [log.rawRequestBody, displayedRequestBody]
+  );
   function handleCopyRequest(e) {
     e.stopPropagation();
     if (displayedRequestBody === null) return;
@@ -2059,6 +2426,21 @@ const LogEntry = reactExports.memo(function({
         ] }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "request", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-3", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-2 mb-2", children: [
+            shouldShowRequestDiffButton(
+              log.apiFormat,
+              viewMode,
+              strip,
+              log.rawRequestBody !== null
+            ) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              DiffToggleButton,
+              {
+                active: requestDiff,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setRequestDiff(!requestDiff);
+                }
+              }
+            ),
             /* @__PURE__ */ jsxRuntimeExports.jsxs(
               Button,
               {
@@ -2085,15 +2467,42 @@ const LogEntry = reactExports.memo(function({
               }
             )
           ] }),
-          displayedRequestBody !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewerFromString, { text: displayedRequestBody, defaultExpandDepth: 1 }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No request body" })
+          requestDiff ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+            DiffView,
+            {
+              result: requestDiffResult,
+              emptyLabel: "No transformation applied — raw and sent request bodies are identical."
+            }
+          ) : displayedRequestBody !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewerFromString, { text: displayedRequestBody, defaultExpandDepth: 1 }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No request body" })
+        ] }) }),
+        viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "headers", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-3", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end gap-2 mb-2", children: shouldShowHeadersDiffButton(
+            viewMode,
+            log.rawHeaders !== void 0 && Object.keys(log.rawHeaders).length > 0
+          ) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            DiffToggleButton,
+            {
+              active: headersDiff,
+              onClick: (e) => {
+                e.stopPropagation();
+                setHeadersDiff(!headersDiff);
+              }
+            }
+          ) }),
+          headersDiff ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+            DiffView,
+            {
+              result: headersDiffResult,
+              emptyLabel: "No transformation applied — raw and processed headers are identical."
+            }
+          ) : log.headers && Object.keys(log.headers).length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 font-mono text-xs", children: Object.entries(log.headers).sort(([a], [b]) => a.localeCompare(b)).map(([key, value]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-blue-600 dark:text-blue-400 font-semibold shrink-0", children: [
+              key,
+              ":"
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground truncate", title: value, children: value })
+          ] }, key)) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No headers captured" })
         ] }) }),
-        viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "headers", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 py-3", children: log.headers && Object.keys(log.headers).length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 font-mono text-xs", children: Object.entries(log.headers).sort(([a], [b]) => a.localeCompare(b)).map(([key, value]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-blue-600 dark:text-blue-400 font-semibold shrink-0", children: [
-            key,
-            ":"
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground truncate", title: value, children: value })
-        ] }, key)) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No headers captured" }) }) }),
         viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw-headers", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 py-3", children: log.rawHeaders && Object.keys(log.rawHeaders).length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 font-mono text-xs", children: Object.entries(log.rawHeaders).sort(([a], [b]) => a.localeCompare(b)).map(([key, value]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-blue-600 dark:text-blue-400 font-semibold shrink-0", children: [
             key,
@@ -2154,7 +2563,8 @@ function computeStats(logs) {
 }
 const ConversationGroup = reactExports.memo(function({
   group,
-  viewMode = "simple"
+  viewMode = "simple",
+  strip
 }) {
   const [expanded, setExpanded] = reactExports.useState(false);
   const stats = computeStats(group.logs);
@@ -2178,9 +2588,46 @@ const ConversationGroup = reactExports.memo(function({
         hideApiFormat: mixed
       }
     ),
-    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, suppressApiFormatBadge: !mixed }, log.id)) })
+    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,
+        suppressApiFormatBadge: !mixed,
+        strip
+      },
+      log.id
+    )) })
   ] });
 });
+function CrabLogo({ className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      className: cn("inline-block size-5", className),
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 13 C5 9 8 7 12 7 C16 7 19 9 19 13 C19 16 16 18 12 18 C8 18 5 16 5 13 Z" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "7", x2: "9.5", y2: "5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "7", x2: "14.5", y2: "5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "9.5", cy: "4.5", r: "0.9", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "14.5", cy: "4.5", r: "0.9", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "6.5", y1: "16", x2: "4.5", y2: "19.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "9", y1: "17.5", x2: "8", y2: "20.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "15", y1: "17.5", x2: "16", y2: "20.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "17.5", y1: "16", x2: "19.5", y2: "19.5" })
+      ]
+    }
+  );
+}
 function Select({
   ...props
 }) {
@@ -3334,7 +3781,8 @@ function ProxyViewer({
   onModelChange,
   onClearAll,
   viewMode,
-  onViewModeChange
+  onViewModeChange,
+  strip
 }) {
   const { totalIn, totalOut } = computeTokenSummary(logs);
   const [groupedView, setGroupedView] = reactExports.useState(true);
@@ -3359,7 +3807,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("h1", { className: "text-lg font-bold flex-1 flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CrabLogo, { className: "size-10 text-amber-500" }),
+        "LLM Inspector"
+      ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground text-xs font-mono", children: [
         "v",
         packageJson.version
@@ -3484,7 +3935,7 @@ function ProxyViewer({
                   width: "100%",
                   transform: `translateY(${virtualRow.start}px)`
                 },
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(ConversationGroup, { group, viewMode })
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(ConversationGroup, { group, viewMode, strip })
               },
               group.id
             );
@@ -3503,7 +3954,7 @@ function ProxyViewer({
                   width: "100%",
                   transform: `translateY(${virtualRow.start}px)`
                 },
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(LogEntry, { log, viewMode })
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(LogEntry, { log, viewMode, strip })
               },
               log.id
             );
@@ -3664,6 +4115,7 @@ function ProxyViewerContainer() {
       }
     })();
   }, []);
+  const { strip } = useStripConfig();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     error !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fixed top-4 right-4 bg-destructive text-destructive-foreground px-4 py-2 rounded-md text-sm z-50", children: error }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -3678,7 +4130,8 @@ function ProxyViewerContainer() {
         onModelChange: setSelectedModel,
         onClearAll: handleClearAll,
         viewMode,
-        onViewModeChange: setViewMode
+        onViewModeChange: setViewMode,
+        strip
       }
     )
   ] });