@tonyclaw/llm-inspector 1.18.1 → 1.19.0

package/.output/server/_ssr/{ProxyViewerContainer-C2dnFXoC.mjs → ProxyViewerContainer-B-zDOLYE.mjs}

@@ -1,18 +1,18 @@
 import { r as reactExports, j as jsxRuntimeExports, a as React } from "../_libs/react.mjs";
-import { C as CapturedLogSchema, D as DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS, a as RuntimeConfigSchema, r as requestFormatForPath, c as createPendingProviderTestResults, P as ProviderTestResultsSchema, d as createFailedProviderTestResults, M as MAX_SLOW_RESPONSE_THRESHOLD_SECONDS, e as ProviderConfigSchema, s as stripClaudeCodeBillingHeader, p as parseOpenAIResponse, O as OpenAIRequestSchema, A as AnthropicResponseSchema$1, b as AnthropicRequestSchema } from "./router-B5hOtKSn.mjs";
+import { C as CapturedLogSchema, D as DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS, a as RuntimeConfigSchema, r as requestFormatForPath, c as createPendingProviderTestResults, P as ProviderTestResultsSchema, d as createFailedProviderTestResults, M as MAX_SLOW_RESPONSE_THRESHOLD_SECONDS, g as getSessionPath, e as ProviderConfigSchema, s as stripClaudeCodeBillingHeader, p as parseOpenAIResponse, O as OpenAIRequestSchema, A as AnthropicResponseSchema$1, b as AnthropicRequestSchema } from "./router-aCaUgVTW.mjs";
 import { u as useSWR, a as useSWRConfig } from "../_libs/swr.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 { 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 Root, T as Trigger$2, C as Content, a as Close, b as Title, P as Portal$2, O as Overlay } from "../_libs/radix-ui__react-dialog.mjs";
 import { d as diffJson, a as diffLines } from "../_libs/diff.mjs";
 import { u as useVirtualizer } from "../_libs/tanstack__react-virtual.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 { C as Check, X, D as Download, S as Settings, a as ChevronDown, U as Upload, b as Scan, P as Plus, c as Copy, d as CircleAlert, e as ChevronUp, L as LoaderCircle, f as ChevronRight, g as User, h as Clock, M as MessageSquare, Z as Zap, E as ExternalLink, T as Trash2, i as TriangleAlert, j as EyeOff, k as Eye, R as RotateCw, l as Pencil, G as GitCompareArrows, m as Minus, n as CircleCheckBig, O as OctagonAlert, W as Wrench, o as Globe, F as FileTerminal, p as Radio, q as ChevronsUp, r as ChevronsDown, s as RotateCcw, t as CircleQuestionMark, u as Server, v as Gauge, w as Lock, x as Wifi, y as WifiOff, A as ArrowUp, z as ArrowDown, B as Rows3, H as Columns2 } from "../_libs/lucide-react.mjs";
+import { C as Check, X, P as Plus, D as Download, S as Settings, A as ArrowLeft, a as Copy, b as ChevronDown, U as Upload, c as Scan, d as CircleAlert, e as ChevronUp, L as LoaderCircle, f as ChevronRight, g as User, h as Clock, M as MessageSquare, Z as Zap, E as ExternalLink, T as Trash2, i as TriangleAlert, j as EyeOff, k as Eye, R as RotateCw, l as Pencil, m as Minus, n as CircleCheckBig, O as OctagonAlert, W as Wrench, G as Globe, F as FileTerminal, o as Radio, p as ChevronsUp, q as ChevronsDown, r as FileDiff, H as History, s as RotateCcw, t as GitCompareArrows, u as CircleQuestionMark, v as Server, w as Gauge, x as Lock, y as Wifi, z as WifiOff, B as ArrowUp, I as ArrowDown, J as Rows3, K as Columns2 } from "../_libs/lucide-react.mjs";
 import { u as union, d as object, a as array, l as literal, b as string, n as number, c as boolean, _ as _enum } from "../_libs/zod.mjs";
-import { R as Root2$1, L as List, T as Trigger$2, C as Content$1 } from "../_libs/radix-ui__react-tabs.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";
+import { P as Provider, R as Root3, T as Trigger$1, a as Portal$1, C as Content2$1, A as Arrow2 } from "../_libs/radix-ui__react-tooltip.mjs";
+import { R as Root2$1, L as List, T as Trigger$3, C as Content$1 } from "../_libs/radix-ui__react-tabs.mjs";
 import { S as Slot } from "../_libs/radix-ui__react-slot.mjs";
 const ApiErrorSchema = object({
   error: string()
@@ -275,7 +275,7 @@ function getStatusCategory(status) {
   if (status >= 500) return "server_error";
   return "pending";
 }
-const version = "1.18.1";
+const version = "1.19.0";
 const packageJson = {
   version
 };
@@ -322,12 +322,12 @@ function Dialog({
 function DialogTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Trigger$1, { "data-slot": "dialog-trigger", ...props });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Trigger$2, { "data-slot": "dialog-trigger", ...props });
 }
 function DialogPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Portal$1, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Portal$2, { "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay({
   className,
@@ -497,14 +497,7 @@ function ConversationHeader({
   const handleOpenInNewTab = reactExports.useCallback(
     (e) => {
       e.stopPropagation();
-      let encoded;
-      try {
-        encoded = btoa(conversationId).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
-      } catch {
-        encoded = encodeURIComponent(conversationId);
-      }
-      const url = `/session/${encoded}`;
-      window.open(url, "_blank", "noopener,noreferrer");
+      window.open(getSessionPath(conversationId), "_blank", "noopener,noreferrer");
     },
     [conversationId]
   );
@@ -537,7 +530,7 @@ function ConversationHeader({
           {
             className: "text-purple-400/90 font-mono text-xs font-semibold shrink-0",
             title: conversationId,
-            children: conversationId.startsWith("PID:") || conversationId.includes("|") ? conversationId : conversationId.length > 24 ? conversationId.slice(0, 12) + "…" + conversationId.slice(-12) : conversationId
+            children: conversationId.startsWith("PID:") || conversationId.includes("|") ? conversationId : conversationId.length > 24 ? conversationId.slice(0, 12) + "..." + conversationId.slice(-12) : conversationId
           }
         ),
         userAgent !== null && userAgent !== void 0 && userAgent !== "" && /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -1163,7 +1156,7 @@ function Tooltip({ ...props }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Root3, { "data-slot": "tooltip", ...props });
 }
 function TooltipTrigger({ ...props }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Trigger$3, { "data-slot": "tooltip-trigger", ...props });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Trigger$1, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipContent({
   className,
@@ -1171,7 +1164,7 @@ function TooltipContent({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Portal$2, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Portal$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     Content2$1,
     {
       "data-slot": "tooltip-content",
@@ -1188,37 +1181,6 @@ function TooltipContent({
     }
   ) });
 }
-function JsonExpansionButton({
-  policy,
-  isExpanded,
-  isPending,
-  onToggle
-}) {
-  if (policy === null) return null;
-  const label = isPending ? "Updating..." : isExpanded ? "Collapse all" : "Expand all";
-  const tooltip = isExpanded ? "Collapse all JSON nodes" : "Expand all JSON nodes";
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      Button,
-      {
-        variant: "outline",
-        size: "sm",
-        className: "h-8 text-xs",
-        onClick: (e) => {
-          e.stopPropagation();
-          onToggle();
-        },
-        disabled: isPending,
-        "aria-pressed": isExpanded,
-        children: [
-          isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronsUp, { className: "size-3.5 mr-1" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronsDown, { className: "size-3.5 mr-1" }),
-          label
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: tooltip })
-  ] }) });
-}
 function getJsonExpansionPolicy(_value) {
   return { depth: Number.POSITIVE_INFINITY };
 }
@@ -1330,7 +1292,7 @@ function TabsTrigger({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Trigger$2,
+    Trigger$3,
     {
       "data-slot": "tabs-trigger",
       className: cn(
@@ -1357,28 +1319,51 @@ function TabsContent({
     }
   );
 }
+function useCopyFeedback(text) {
+  const [copied, setCopied] = reactExports.useState(false);
+  const timerRef = reactExports.useRef(null);
+  reactExports.useEffect(
+    () => () => {
+      if (timerRef.current !== null) clearTimeout(timerRef.current);
+    },
+    []
+  );
+  const copy = reactExports.useCallback(
+    (event) => {
+      event.stopPropagation();
+      if (text === null) return;
+      void window.navigator.clipboard.writeText(text).then(() => {
+        setCopied(true);
+        if (timerRef.current !== null) clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => setCopied(false), 2e3);
+      });
+    },
+    [text]
+  );
+  return { copied, copy };
+}
 const LazyCompareDrawer = reactExports.lazy(
-  () => import("./CompareDrawer-DajC3x7u.mjs").then((m) => ({ default: m.CompareDrawer }))
+  () => import("./CompareDrawer-DNGYdUXs.mjs").then((m) => ({ default: m.CompareDrawer }))
 );
 const LazyReplayDialog = reactExports.lazy(
-  () => import("./ReplayDialog-BnCLuA5z.mjs").then((m) => ({ default: m.ReplayDialog }))
+  () => import("./ReplayDialog-DWeqMA4y.mjs").then((m) => ({ default: m.ReplayDialog }))
 );
 const LazyRequestAnatomy = reactExports.lazy(
-  () => import("./RequestAnatomy-OHE3iT-f.mjs").then((m) => ({ default: m.RequestAnatomy }))
+  () => import("./RequestAnatomy-TOsrMu9-.mjs").then((m) => ({ default: m.RequestAnatomy }))
 );
 const LazyResponseView = reactExports.lazy(
-  () => import("./ResponseView-NPshHwOv.mjs").then((m) => ({ default: m.ResponseView }))
+  () => import("./ResponseView-BuqdPrzm.mjs").then((m) => ({ default: m.ResponseView }))
 );
 const LazyStreamingChunkSequence = reactExports.lazy(
-  () => import("./StreamingChunkSequence-BfukoR7F.mjs").then((m) => ({
+  () => import("./StreamingChunkSequence-DuzNZkqL.mjs").then((m) => ({
     default: m.StreamingChunkSequence
   }))
 );
 const LazyJsonViewer = reactExports.lazy(
-  () => import("./json-viewer-CHBa-Oas.mjs").then((m) => ({ default: m.JsonViewer }))
+  () => import("./json-viewer-BL8xhHbi.mjs").then((m) => ({ default: m.JsonViewer }))
 );
 const LazyJsonViewerFromString = reactExports.lazy(
-  () => import("./json-viewer-CHBa-Oas.mjs").then((m) => ({ default: m.JsonViewerFromString }))
+  () => import("./json-viewer-BL8xhHbi.mjs").then((m) => ({ default: m.JsonViewerFromString }))
 );
 const HIGHLIGHT_DURATION_MS = 1200;
 const MAX_HIGHLIGHT_ATTEMPTS = 12;
@@ -1797,11 +1782,9 @@ const LogEntryHeader = reactExports.memo(function({
   onToggle,
   responseToolNames = null,
   cacheTrend = null,
+  activeTab,
+  tabActions,
   onReplay,
-  onCopyRequest,
-  requestCopied = false,
-  onToggleRequestExpansion,
-  requestExpansionState = null,
   slowResponseThresholdSeconds = 0
 }) {
   const statusCategory = getStatusCategory(log.responseStatus);
@@ -1965,36 +1948,74 @@ const LogEntryHeader = reactExports.memo(function({
             onClick: (e) => e.stopPropagation(),
             onKeyDown: (e) => e.stopPropagation(),
             children: [
-              requestExpansionState !== null && onToggleRequestExpansion !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Button,
-                  {
-                    variant: "outline",
-                    size: "icon",
-                    className: "size-8",
-                    onClick: onToggleRequestExpansion,
-                    disabled: requestExpansionState.isPending,
-                    "aria-pressed": requestExpansionState.isExpanded,
-                    "aria-label": requestExpansionState.isExpanded ? "Collapse all JSON" : "Expand all JSON",
-                    children: requestExpansionState.isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronsUp, { className: "size-3.5" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronsDown, { className: "size-3.5" })
-                  }
-                ) }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: requestExpansionState.isExpanded ? "Collapse all JSON nodes" : "Expand all JSON nodes" })
-              ] }),
-              onCopyRequest !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Button,
-                  {
-                    variant: "outline",
-                    size: "icon",
-                    className: "size-8",
-                    onClick: onCopyRequest,
-                    "aria-label": "Copy request body",
-                    children: requestCopied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3.5 text-emerald-500" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-3.5" })
-                  }
-                ) }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: requestCopied ? "Copied to clipboard" : "Copy request body" })
-              ] }),
+              tabActions !== void 0 && activeTab !== void 0 && (() => {
+                const action = tabActions[activeTab];
+                if (action === void 0) return null;
+                return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                  action.expansion !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Button,
+                      {
+                        variant: "outline",
+                        size: "icon",
+                        className: "size-8",
+                        onClick: action.expansion.onToggle,
+                        disabled: action.expansion.isPending,
+                        "aria-pressed": action.expansion.isExpanded,
+                        "aria-label": action.expansion.isExpanded ? "Collapse all JSON" : "Expand all JSON",
+                        children: action.expansion.isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronsUp, { className: "size-3.5" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronsDown, { className: "size-3.5" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: action.expansion.isExpanded ? "Collapse all JSON nodes" : "Expand all JSON nodes" })
+                  ] }),
+                  action.diffWithRaw !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Button,
+                      {
+                        variant: "outline",
+                        size: "icon",
+                        className: cn(
+                          "size-8",
+                          action.diffWithRaw.active && "bg-accent text-accent-foreground"
+                        ),
+                        onClick: action.diffWithRaw.onToggle,
+                        "aria-pressed": action.diffWithRaw.active,
+                        "aria-label": action.diffWithRaw.active ? "Hide raw diff" : "Diff with raw",
+                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(FileDiff, { className: "size-3.5" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: action.diffWithRaw.active ? "Hide diff with raw request" : "Show diff between displayed and raw request body" })
+                  ] }),
+                  action.diffWithPrevious !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Button,
+                      {
+                        variant: "outline",
+                        size: "icon",
+                        className: "size-8",
+                        onClick: action.diffWithPrevious,
+                        "aria-label": "Diff with previous",
+                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(History, { className: "size-3.5" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Compare this request with the immediately preceding one" })
+                  ] }),
+                  action.copyText !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Button,
+                      {
+                        variant: "outline",
+                        size: "icon",
+                        className: "size-8",
+                        onClick: action.onCopy,
+                        "aria-label": action.copyCopied ? "Copied" : action.copyLabel,
+                        children: action.copyCopied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3.5 text-emerald-500" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-3.5" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: action.copyCopied ? "Copied to clipboard" : action.copyLabel })
+                  ] })
+                ] });
+              })(),
               onReplay !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                   Button,
@@ -2335,31 +2356,6 @@ function shouldShowRequestDiffButton(apiFormat, viewMode, strip, hasRawRequest)
 function TabFallback() {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-1", "aria-hidden": "true" });
 }
-function CopyButton({
-  text,
-  label,
-  copied,
-  onCopy
-}) {
-  if (text === null) return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      Button,
-      {
-        variant: "outline",
-        size: "sm",
-        className: "h-8 text-xs",
-        onClick: onCopy,
-        "aria-label": label,
-        children: [
-          copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3.5 mr-1 text-emerald-500" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-3.5 mr-1" }),
-          copied ? "Copied!" : label
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: copied ? "Copied to clipboard" : label })
-  ] });
-}
 function DiffToggleButton({
   active,
   onClick
@@ -2401,29 +2397,6 @@ const HeadersDiffContent = reactExports.memo(function({
   const result = reactExports.useMemo(() => computeHeadersDiff(rawHeaders, headers), [rawHeaders, headers]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(DiffView, { result, emptyLabel });
 });
-function useCopyFeedback(text) {
-  const [copied, setCopied] = reactExports.useState(false);
-  const timerRef = reactExports.useRef(null);
-  reactExports.useEffect(
-    () => () => {
-      if (timerRef.current !== null) clearTimeout(timerRef.current);
-    },
-    []
-  );
-  const copy = reactExports.useCallback(
-    (event) => {
-      event.stopPropagation();
-      if (text === null) return;
-      void window.navigator.clipboard.writeText(text).then(() => {
-        setCopied(true);
-        if (timerRef.current !== null) clearTimeout(timerRef.current);
-        timerRef.current = setTimeout(() => setCopied(false), 2e3);
-      });
-    },
-    [text]
-  );
-  return { copied, copy };
-}
 const LogEntry = reactExports.memo(function({
   log,
   viewMode = "simple",
@@ -2456,11 +2429,106 @@ const LogEntry = reactExports.memo(function({
     return stripClaudeCodeBillingHeader(log.rawRequestBody).body;
   }, [log.rawRequestBody, resolvedFormat, strip]);
   const displayedRequestBody = strippedRequestBody ?? log.rawRequestBody;
+  const requestExpansion = useJsonBulkExpansion(displayedRequestBody);
+  const rawRequestExpansion = useJsonBulkExpansion(log.rawRequestBody);
+  const responseExpansion = useJsonBulkExpansion(log.responseText);
+  const headersText = reactExports.useMemo(
+    () => log.headers && Object.keys(log.headers).length > 0 ? JSON.stringify(log.headers, null, 2) : null,
+    [log.headers]
+  );
+  const rawHeadersText = reactExports.useMemo(
+    () => log.rawHeaders && Object.keys(log.rawHeaders).length > 0 ? JSON.stringify(log.rawHeaders, null, 2) : null,
+    [log.rawHeaders]
+  );
   const requestCopy = useCopyFeedback(displayedRequestBody);
   const rawRequestCopy = useCopyFeedback(log.rawRequestBody);
+  const headersCopy = useCopyFeedback(headersText);
+  const rawHeadersCopy = useCopyFeedback(rawHeadersText);
   const responseCopy = useCopyFeedback(log.responseText);
-  const requestExpansion = useJsonBulkExpansion(displayedRequestBody);
-  const rawRequestExpansion = useJsonBulkExpansion(log.rawRequestBody);
+  const tabActions = reactExports.useMemo(
+    () => ({
+      request: {
+        copyLabel: "Copy request body",
+        copyText: displayedRequestBody,
+        copyCopied: requestCopy.copied,
+        onCopy: requestCopy.copy,
+        expansion: {
+          isExpanded: requestExpansion.isExpanded,
+          isPending: requestExpansion.isPending,
+          onToggle: requestExpansion.toggle
+        },
+        // "Diff with Raw" only makes sense when there's a raw body to compare
+        // against (Anthropic + strip pipeline produces one). "Diff with
+        // Previous" only exists when the parent wired up the compare drawer.
+        diffWithRaw: shouldShowRequestDiffButton(
+          resolvedFormat,
+          viewMode,
+          strip,
+          log.rawRequestBody !== null
+        ) ? { active: requestDiff, onToggle: () => setRequestDiff(!requestDiff) } : void 0,
+        diffWithPrevious: onCompareWithPrevious === void 0 ? void 0 : () => {
+          onCompareWithPrevious(log);
+        }
+      },
+      "raw-request": {
+        copyLabel: "Copy raw request",
+        copyText: log.rawRequestBody,
+        copyCopied: rawRequestCopy.copied,
+        onCopy: rawRequestCopy.copy,
+        expansion: {
+          isExpanded: rawRequestExpansion.isExpanded,
+          isPending: rawRequestExpansion.isPending,
+          onToggle: rawRequestExpansion.toggle
+        }
+      },
+      headers: {
+        copyLabel: "Copy headers",
+        copyText: headersText,
+        copyCopied: headersCopy.copied,
+        onCopy: headersCopy.copy,
+        // Headers are a flat dict, no JSON tree to expand.
+        expansion: null
+      },
+      "raw-headers": {
+        copyLabel: "Copy raw headers",
+        copyText: rawHeadersText,
+        copyCopied: rawHeadersCopy.copied,
+        onCopy: rawHeadersCopy.copy,
+        expansion: null
+      },
+      raw: {
+        copyLabel: "Copy response",
+        copyText: log.responseText,
+        copyCopied: responseCopy.copied,
+        onCopy: responseCopy.copy,
+        expansion: {
+          isExpanded: responseExpansion.isExpanded,
+          isPending: responseExpansion.isPending,
+          onToggle: responseExpansion.toggle
+        }
+      }
+    }),
+    [
+      displayedRequestBody,
+      requestCopy,
+      requestExpansion,
+      requestDiff,
+      log.rawRequestBody,
+      rawRequestCopy,
+      rawRequestExpansion,
+      headersText,
+      headersCopy,
+      rawHeadersText,
+      rawHeadersCopy,
+      log.responseText,
+      responseCopy,
+      responseExpansion,
+      resolvedFormat,
+      viewMode,
+      strip,
+      onCompareWithPrevious
+    ]
+  );
   const anatomySegments = reactExports.useMemo(
     () => requestExpansion.parsedData !== null ? adapter.anatomySegments(requestExpansion.parsedData) : null,
     [adapter, requestExpansion.parsedData]
@@ -2489,17 +2557,10 @@ const LogEntry = reactExports.memo(function({
           responseToolNames: responseAnalysis.toolNames,
           cacheTrend,
           slowResponseThresholdSeconds,
+          activeTab,
+          tabActions,
           onReplay: onCompareWithPrevious === void 0 ? void 0 : () => {
             setReplayOpen(true);
-          },
-          onCopyRequest: displayedRequestBody === null ? void 0 : (e) => {
-            requestCopy.copy(e);
-          },
-          requestCopied: requestCopy.copied,
-          onToggleRequestExpansion: requestExpansion.toggle,
-          requestExpansionState: requestExpansion.policy === null ? null : {
-            isExpanded: requestExpansion.isExpanded,
-            isPending: requestExpansion.isPending
           }
         }
       ),
@@ -2513,96 +2574,31 @@ const LogEntry = reactExports.memo(function({
           viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "raw", children: "Raw Response" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "parsed", children: "Response" })
         ] }),
-        shouldShowRawRequestTab(resolvedFormat, viewMode, strip) && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw-request", children: activeTab === "raw-request" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 pt-1 pb-3", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-2 mb-2", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              JsonExpansionButton,
-              {
-                policy: rawRequestExpansion.policy,
-                isExpanded: rawRequestExpansion.isExpanded,
-                isPending: rawRequestExpansion.isPending,
-                onToggle: rawRequestExpansion.toggle
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              CopyButton,
-              {
-                text: log.rawRequestBody,
-                label: "Copy",
-                copied: rawRequestCopy.copied,
-                onCopy: rawRequestCopy.copy
-              }
-            )
-          ] }),
-          log.rawRequestBody === null ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No request body" }) : rawRequestExpansion.parsedData !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            LazyJsonViewer,
-            {
-              data: rawRequestExpansion.parsedData,
-              bulkDepth: rawRequestExpansion.bulkDepth,
-              bulkRevision: rawRequestExpansion.bulkRevision
-            }
-          ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "font-mono text-xs whitespace-pre-wrap break-words", children: log.rawRequestBody })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "request", children: activeTab === "request" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 pt-1 pb-3", children: [
-          (shouldShowRequestDiffButton(
-            resolvedFormat,
-            viewMode,
-            strip,
-            log.rawRequestBody !== null
-          ) || onCompareWithPrevious !== void 0) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-2 mb-2", children: [
-            shouldShowRequestDiffButton(
-              resolvedFormat,
-              viewMode,
-              strip,
-              log.rawRequestBody !== null
-            ) && /* @__PURE__ */ jsxRuntimeExports.jsx(
-              DiffToggleButton,
-              {
-                active: requestDiff,
-                onClick: (e) => {
-                  e.stopPropagation();
-                  setRequestDiff(!requestDiff);
-                }
-              }
-            ),
-            onCompareWithPrevious !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                Button,
-                {
-                  variant: "outline",
-                  size: "sm",
-                  className: "h-8 text-xs",
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    onCompareWithPrevious(log);
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(GitCompareArrows, { className: "size-3 mr-1" }),
-                    "Diff with Previous"
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Compare this request with the immediately preceding one" })
-            ] })
-          ] }),
-          requestDiff ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-            RequestDiffContent,
-            {
-              rawBody: log.rawRequestBody,
-              displayedBody: displayedRequestBody,
-              emptyLabel: "No transformation applied — raw and sent request bodies are identical."
-            }
-          ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: requestJsonRef, children: displayedRequestBody === null ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No request body" }) : requestExpansion.parsedData !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            LazyJsonViewer,
-            {
-              data: requestExpansion.parsedData,
-              bulkDepth: requestExpansion.bulkDepth,
-              bulkRevision: requestExpansion.bulkRevision,
-              anatomyPaths,
-              expandToPath
-            }
-          ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "font-mono text-xs whitespace-pre-wrap break-words", children: displayedRequestBody }) })
-        ] }) }),
+        shouldShowRawRequestTab(resolvedFormat, viewMode, strip) && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw-request", children: activeTab === "raw-request" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 pt-1 pb-3", children: log.rawRequestBody === null ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No request body" }) : rawRequestExpansion.parsedData !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          LazyJsonViewer,
+          {
+            data: rawRequestExpansion.parsedData,
+            bulkDepth: rawRequestExpansion.bulkDepth,
+            bulkRevision: rawRequestExpansion.bulkRevision
+          }
+        ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "font-mono text-xs whitespace-pre-wrap break-words", children: log.rawRequestBody }) }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "request", children: activeTab === "request" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 pt-1 pb-3", children: requestDiff ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          RequestDiffContent,
+          {
+            rawBody: log.rawRequestBody,
+            displayedBody: displayedRequestBody,
+            emptyLabel: "No transformation applied — raw and sent request bodies are identical."
+          }
+        ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: requestJsonRef, children: displayedRequestBody === null ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No request body" }) : requestExpansion.parsedData !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          LazyJsonViewer,
+          {
+            data: requestExpansion.parsedData,
+            bulkDepth: requestExpansion.bulkDepth,
+            bulkRevision: requestExpansion.bulkRevision,
+            anatomyPaths,
+            expandToPath
+          }
+        ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "font-mono text-xs whitespace-pre-wrap break-words", children: displayedRequestBody }) }) }) }),
         anatomySegments !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "anatomy", children: activeTab === "anatomy" && /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           LazyRequestAnatomy,
           {
@@ -2653,16 +2649,15 @@ const LogEntry = reactExports.memo(function({
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold text-destructive mb-1", children: "SSE Error" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-muted-foreground font-mono", children: log.error })
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            CopyButton,
+          log.responseText !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            LazyJsonViewerFromString,
             {
               text: log.responseText,
-              label: "Copy",
-              copied: responseCopy.copied,
-              onCopy: responseCopy.copy
+              defaultExpandDepth: 0,
+              bulkDepth: responseExpansion.bulkDepth,
+              bulkRevision: responseExpansion.bulkRevision
             }
-          ) }),
-          log.responseText !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(LazyJsonViewerFromString, { text: log.responseText, defaultExpandDepth: 0 }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No response" }),
+          ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No response" }),
           log.streaming === true && /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             LazyStreamingChunkSequence,
             {
@@ -3163,6 +3158,18 @@ function CrabLogo({ className }) {
     }
   );
 }
+const McpLogoPng = "data:image/png;base64,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";
+function McpLogo({ className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "img",
+    {
+      src: McpLogoPng,
+      alt: "Model Context Protocol",
+      "aria-hidden": "true",
+      className: cn("inline-block size-8 object-contain invert", className)
+    }
+  );
+}
 function Select({
   ...props
 }) {
@@ -5196,6 +5203,25 @@ function computeTokenSummary(logs) {
   }
   return { totalIn, totalOut };
 }
+function formatTimeRange(logs) {
+  const first = logs[0];
+  const last = logs[logs.length - 1];
+  if (first === void 0 || last === void 0) return null;
+  const format = (iso) => new Date(iso).toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+  return `${format(first.timestamp)} - ${format(last.timestamp)}`;
+}
+function getFirstUserAgent(logs) {
+  for (const log of logs) {
+    if (log.userAgent !== null && log.userAgent !== void 0 && log.userAgent !== "") {
+      return log.userAgent;
+    }
+  }
+  return null;
+}
 function CopyableCommand({ command }) {
   const [copied, setCopied] = reactExports.useState(false);
   const handleCopy = reactExports.useCallback(() => {
@@ -5247,6 +5273,82 @@ function CopyableCommand({ command }) {
     )
   ] });
 }
+function McpReadyBadge() {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex h-7 items-center gap-2 rounded-md border border-cyan-400/30 bg-cyan-500/10 px-2.5 font-mono text-[11px] font-medium text-cyan-300 shadow-[0_0_16px_rgba(34,211,238,0.08)]", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "size-1.5 rounded-full bg-emerald-300 shadow-[0_0_8px_rgba(110,231,183,0.8)]" }),
+      "MCP Ready",
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "hidden text-cyan-200/70 sm:inline", children: "/api/mcp" })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { sideOffset: 8, className: "max-w-[320px] text-left leading-relaxed", children: "Coding agents can inspect logs, replay requests, test providers, and debug sessions through MCP at /api/mcp." })
+  ] }) });
+}
+function SessionContextBar({
+  sessionId,
+  logs,
+  totalIn,
+  totalOut
+}) {
+  const [copied, setCopied] = reactExports.useState(false);
+  const timeRange = reactExports.useMemo(() => formatTimeRange(logs), [logs]);
+  const userAgent = reactExports.useMemo(() => getFirstUserAgent(logs), [logs]);
+  const handleCopyLink = reactExports.useCallback(() => {
+    void window.navigator.clipboard.writeText(window.location.href).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    });
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-4 flex items-center gap-3 border border-border rounded-md bg-muted/20 px-3 py-2 text-xs", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "a",
+      {
+        href: "/",
+        className: "inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+        "aria-label": "Back to all sessions",
+        title: "Back to all sessions",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "size-3.5" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono font-semibold text-purple-400/90 truncate", title: sessionId, children: truncateSessionId(sessionId) }),
+        userAgent !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "span",
+          {
+            className: "font-mono text-muted-foreground truncate max-w-[220px]",
+            title: userAgent,
+            children: userAgent
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+          logs.length,
+          " request",
+          logs.length !== 1 ? "s" : ""
+        ] }),
+        timeRange !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: timeRange }),
+        (totalIn > 0 || totalOut > 0) && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono", children: [
+          formatTokens(totalIn),
+          " in / ",
+          formatTokens(totalOut),
+          " out"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleCopyLink,
+        className: "inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+        "aria-label": copied ? "Copied session link" : "Copy session link",
+        title: copied ? "Copied session link" : "Copy session link",
+        children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3.5" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-3.5" })
+      }
+    )
+  ] });
+}
 function ProxyViewer({
   logs,
   sessions,
@@ -5261,7 +5363,8 @@ function ProxyViewer({
   onViewModeChange,
   strip,
   slowResponseThresholdSeconds,
-  hideSessionFilter = false
+  hideSessionFilter = false,
+  pinnedSessionId
 }) {
   const { totalIn, totalOut } = reactExports.useMemo(() => computeTokenSummary(logs), [logs]);
   const [exporting, setExporting] = reactExports.useState(false);
@@ -5283,6 +5386,14 @@ function ProxyViewer({
       clearTimeout(t2);
     };
   }, []);
+  reactExports.useEffect(() => {
+    if (pinnedSessionId === void 0) {
+      document.title = "LLM Inspector";
+      return;
+    }
+    const requestLabel = logs.length === 1 ? "1 req" : `${logs.length} req`;
+    document.title = `${truncateSessionId(pinnedSessionId)} - ${requestLabel} - LLM Inspector`;
+  }, [logs.length, pinnedSessionId]);
   const handleExport = reactExports.useCallback(async () => {
     setExporting(true);
     try {
@@ -5308,117 +5419,141 @@ function ProxyViewer({
     [comparisonPredecessors]
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-[1400px] xl:max-w-[1600px] 2xl:max-w-[1800px] mx-auto px-6 pb-6", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-end pt-6 pb-8 relative", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("h1", { className: "text-lg font-bold flex items-end gap-2 absolute left-1/2 -translate-x-1/2 whitespace-nowrap", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-end gap-1 group cursor-default", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(CrabLogo, { className: "size-10 text-amber-500 transition-all duration-300 group-hover:scale-125 group-hover:-translate-y-1.5" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex items-end gap-0.5", children: crabVariants.map((Crab, i) => {
-            const color = [
-              "text-amber-500",
-              "text-rose-500",
-              "text-sky-500",
-              "text-emerald-500",
-              "text-violet-500",
-              "text-orange-500",
-              "text-cyan-500",
-              "text-pink-500",
-              "text-lime-500",
-              "text-blue-500",
-              "text-yellow-500",
-              "text-fuchsia-500"
-            ][i];
-            const entranceClass = crabEntrancePhase === "hidden" ? "opacity-0 scale-0" : crabEntrancePhase === "playing" ? "animate-crab-piano-pop" : "";
-            return /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Crab,
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sticky top-0 z-30 bg-background pt-6", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-[1fr_auto_1fr] items-start gap-3 pb-8", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", {}),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("h1", { className: "flex min-w-0 flex-col items-center gap-2 text-center", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex max-w-[calc(100vw-7rem)] items-end gap-2 whitespace-nowrap", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "span",
               {
-                className: `size-5 ${color} transition-all duration-300 ease-out group-hover:scale-125 group-hover:-translate-y-1 ${entranceClass}`,
-                style: {
-                  transitionDelay: `${i * 50}ms`,
-                  ...crabEntrancePhase === "playing" ? { animationDelay: `${i * 400}ms` } : {}
-                }
-              },
-              i
-            );
-          }) })
+                className: "flex shrink-0 items-end gap-1 group cursor-default",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(CrabLogo, { className: "size-10 text-amber-500 transition-all duration-300 group-hover:scale-125 group-hover:-translate-y-1.5" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "hidden items-end gap-0.5 sm:flex", children: crabVariants.map((Crab, i) => {
+                    const color = [
+                      "text-amber-500",
+                      "text-rose-500",
+                      "text-sky-500",
+                      "text-emerald-500",
+                      "text-violet-500",
+                      "text-orange-500",
+                      "text-cyan-500",
+                      "text-pink-500",
+                      "text-lime-500",
+                      "text-blue-500",
+                      "text-yellow-500",
+                      "text-fuchsia-500"
+                    ][i];
+                    const entranceClass = crabEntrancePhase === "hidden" ? "opacity-0 scale-0" : crabEntrancePhase === "playing" ? "animate-crab-piano-pop" : "";
+                    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Crab,
+                      {
+                        className: `size-5 ${color} transition-all duration-300 ease-out group-hover:scale-125 group-hover:-translate-y-1 ${entranceClass}`,
+                        style: {
+                          transitionDelay: `${i * 50}ms`,
+                          ...crabEntrancePhase === "playing" ? { animationDelay: `${i * 400}ms` } : {}
+                        }
+                      },
+                      i
+                    );
+                  }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex min-w-0 items-baseline gap-2 pl-1", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate text-lg font-bold", children: "LLM Inspector" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "shrink-0 font-mono text-xs font-semibold text-muted-foreground", children: [
+                "v",
+                packageJson.version
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "size-4 shrink-0 text-muted-foreground/70", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(McpLogo, { className: "size-10 shrink-0" })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(McpReadyBadge, {})
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-baseline gap-2", children: [
-          "LLM Inspector",
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs text-muted-foreground font-mono", children: [
-            "v",
-            packageJson.version
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ml-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsDialog, {}) })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
-      !hideSessionFilter && /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { value: selectedSession, onValueChange: onSessionChange, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "flex-1 max-w-[350px] text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "All sessions" }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "__all__", children: "All sessions" }),
-          sessions.map((s) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: s, children: truncateSessionId(s) }, s))
-        ] })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "justify-self-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsDialog, {}) })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { value: selectedModel, onValueChange: onModelChange, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "flex-1 max-w-[250px] text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "All models" }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "__all__", children: "All models" }),
-          models.map((m) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: m, children: m }, m))
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center border border-border rounded-md overflow-hidden", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
+      pinnedSessionId !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        SessionContextBar,
+        {
+          sessionId: pinnedSessionId,
+          logs,
+          totalIn,
+          totalOut
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
+        !hideSessionFilter && /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { value: selectedSession, onValueChange: onSessionChange, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "flex-1 max-w-[350px] text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "All sessions" }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "__all__", children: "All sessions" }),
+            sessions.map((s) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: s, children: truncateSessionId(s) }, s))
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { value: selectedModel, onValueChange: onModelChange, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "flex-1 max-w-[250px] text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "All models" }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "__all__", children: "All models" }),
+            models.map((m) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: m, children: m }, m))
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center border border-border rounded-md overflow-hidden", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onViewModeChange("simple"),
+              className: `h-8 px-3 cursor-pointer transition-colors text-xs ${viewMode === "simple" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"}`,
+              children: "Simple"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onViewModeChange("full"),
+              className: `h-8 px-3 cursor-pointer transition-colors text-xs ${viewMode === "full" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"}`,
+              children: "Full"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground text-xs font-mono", children: [
+          logs.length,
+          " request",
+          logs.length !== 1 ? "s" : "",
+          totalIn > 0 || totalOut > 0 ? ` · ${formatTokens(totalIn)} in / ${formatTokens(totalOut)} out` : ""
+        ] }),
+        logs.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
             type: "button",
-            onClick: () => onViewModeChange("simple"),
-            className: `h-8 px-3 cursor-pointer transition-colors text-xs ${viewMode === "simple" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"}`,
-            children: "Simple"
+            onClick: () => {
+              void handleExport();
+            },
+            disabled: exporting,
+            className: "h-8 px-3 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center gap-1.5 rounded-md hover:bg-muted",
+            title: "Export all logs as JSON ZIP",
+            children: exporting ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Exporting..." }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Download, { className: "size-3.5" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Export" })
+            ] })
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
             type: "button",
-            onClick: () => onViewModeChange("full"),
-            className: `h-8 px-3 cursor-pointer transition-colors text-xs ${viewMode === "full" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"}`,
-            children: "Full"
+            onClick: onClearAll,
+            className: "h-8 px-3 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer rounded-md hover:bg-muted",
+            title: "Clear all logs",
+            children: "Clear"
           }
         )
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground text-xs font-mono", children: [
-        logs.length,
-        " request",
-        logs.length !== 1 ? "s" : "",
-        totalIn > 0 || totalOut > 0 ? ` · ${formatTokens(totalIn)} in / ${formatTokens(totalOut)} out` : ""
-      ] }),
-      logs.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => {
-            void handleExport();
-          },
-          disabled: exporting,
-          className: "h-8 px-3 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center gap-1.5 rounded-md hover:bg-muted",
-          title: "Export all logs as JSON ZIP",
-          children: exporting ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Exporting..." }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Download, { className: "size-3.5" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Export" })
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onClearAll,
-          className: "h-8 px-3 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer rounded-md hover:bg-muted",
-          title: "Clear all logs",
-          children: "Clear"
-        }
-      )
+      ] })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: logs.length === 0 ? selectedSession !== "__all__" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center text-muted-foreground py-16 space-y-4", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-medium", children: "Session not found" }),
@@ -5426,7 +5561,7 @@ function ProxyViewer({
       /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs", children: [
         "This session may have been cleared or never existed.",
         " ",
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
+        hideSessionFilter ? /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: "/", className: "underline hover:text-foreground transition-colors", children: "Back to all sessions" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
             type: "button",
@@ -5499,6 +5634,11 @@ function filterLogs(logs, selectedSession, selectedModel) {
   });
 }
 const DEBOUNCE_MS = 50;
+function buildLogsStreamUrl(sessionId) {
+  if (sessionId === void 0) return "/api/logs/stream";
+  const params = new URLSearchParams({ sessionId });
+  return `/api/logs/stream?${params.toString()}`;
+}
 function ProxyViewerContainer({
   initialSessionId
 } = {}) {
@@ -5550,7 +5690,7 @@ function ProxyViewerContainer({
     if (eventSourceRef.current) {
       eventSourceRef.current.close();
     }
-    const es = new EventSource("/api/logs/stream");
+    const es = new EventSource(buildLogsStreamUrl(initialSessionId));
     eventSourceRef.current = es;
     es.onmessage = (event) => {
       try {
@@ -5591,7 +5731,7 @@ function ProxyViewerContainer({
       }
       reconnectTimeoutRef.current = setTimeout(connectSSE, 3e3);
     };
-  }, [scheduleUpdate]);
+  }, [initialSessionId, scheduleUpdate]);
   reactExports.useEffect(() => {
     connectSSE();
     return () => {
@@ -5610,9 +5750,17 @@ function ProxyViewerContainer({
     };
   }, [connectSSE]);
   const handleClearAll = reactExports.useCallback(() => {
+    if (initialSessionId !== void 0 && allLogs.length === 0) return;
     void (async () => {
       try {
-        const res = await fetch("/api/logs", { method: "DELETE" });
+        const body = initialSessionId === void 0 ? void 0 : JSON.stringify({ ids: allLogs.map((log) => log.id) });
+        const res = await fetch("/api/logs", {
+          method: "DELETE",
+          ...body === void 0 ? {} : {
+            headers: { "Content-Type": "application/json" },
+            body
+          }
+        });
         if (!res.ok) {
           setError("Failed to clear logs");
           return;
@@ -5624,7 +5772,7 @@ function ProxyViewerContainer({
         setError(err instanceof Error ? err.message : "Unknown error clearing logs");
       }
     })();
-  }, []);
+  }, [allLogs, initialSessionId]);
   const handleClearGroup = reactExports.useCallback((ids) => {
     if (ids.length === 0) return;
     void (async () => {
@@ -5675,7 +5823,8 @@ function ProxyViewerContainer({
         onViewModeChange: setViewMode,
         strip,
         slowResponseThresholdSeconds,
-        hideSessionFilter: initialSessionId !== void 0
+        hideSessionFilter: initialSessionId !== void 0,
+        pinnedSessionId: initialSessionId
       }
     )
   ] });