@tonyclaw/agent-inspector 2.0.43 → 2.1.1

package/.output/server/_ssr/{ProxyViewerContainer-B7SR9mrD.mjs → ProxyViewerContainer-BcKHl2E3.mjs}

@@ -1,20 +1,20 @@
 import { r as reactExports, j as jsxRuntimeExports, a as React } from "../_libs/react.mjs";
-import { I as InspectorGroupsListResponseSchema, C as CapturedLogSchema, D as DEFAULT_CAPTURE_MODE, a as DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS, b as DEFAULT_PROVIDER_TEST_TIMEOUT_SECONDS, c as DEFAULT_TIME_DISPLAY_FORMAT, v as packageJson, i as GroupEvidenceExportResultSchema, j as DeleteInspectorGroupResponseSchema, d as RuntimeConfigSchema, P as ProviderConfigSchema, f as apiFormatForPath, n as createPendingProviderTestResults, o as ProviderTestResultsSchema, q as createFailedProviderTestResults, M as MAX_SLOW_RESPONSE_THRESHOLD_SECONDS, r as MAX_PROVIDER_TEST_TIMEOUT_SECONDS, T as TimeDisplayFormatSchema, m as maskApiKey, k as providerHasContextMetadata, l as findProviderModelMetadata, g as getSessionPath, p as parseOpenAIResponse, O as OpenAIRequestSchema, A as AnthropicResponseSchema$1, e as AnthropicRequestSchema, s as safeGetOwnProperty, t as resolveProviderContextWindow, K as KnowledgeCandidateSchema, h as stripClaudeCodeBillingHeader, u as isPlainRecord, G as GroupEvidenceReadResponseSchema } from "./router-B2d1LUx6.mjs";
+import { I as InspectorGroupsListResponseSchema, C as CapturedLogSchema, D as DEFAULT_CAPTURE_MODE, a as DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS, b as DEFAULT_PROVIDER_TEST_TIMEOUT_SECONDS, c as DEFAULT_TIME_DISPLAY_FORMAT, d as RuntimeConfigSchema, v as packageJson, P as ProviderConfigSchema, f as apiFormatForPath, i as GroupEvidenceExportResultSchema, j as DeleteInspectorGroupResponseSchema, n as createPendingProviderTestResults, o as ProviderTestResultsSchema, q as createFailedProviderTestResults, M as MAX_SLOW_RESPONSE_THRESHOLD_SECONDS, r as MAX_PROVIDER_TEST_TIMEOUT_SECONDS, T as TimeDisplayFormatSchema, g as getSessionPath, p as parseOpenAIResponse, O as OpenAIRequestSchema, A as AnthropicResponseSchema$1, e as AnthropicRequestSchema, s as safeGetOwnProperty, t as resolveProviderContextWindow, m as maskApiKey, k as providerHasContextMetadata, l as findProviderModelMetadata, K as KnowledgeCandidateSchema, h as stripClaudeCodeBillingHeader, u as isPlainRecord, G as GroupEvidenceReadResponseSchema } from "./router-B5cpU5Hi.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$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 { R as Root, T as Trigger$1, 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 useWindowVirtualizer, a 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, P as Plus, D as Download, F as FileBraces, T as Trash2, L as Layers, a as LoaderCircle, R as RefreshCw, S as Settings, A as ArrowLeft, b as Copy, c as ChevronDown, U as Upload, d as Scan, e as CircleAlert, f as Terminal, g as ChevronUp, E as EyeOff, h as Eye, i as ExternalLink, j as RotateCw, k as Clock, l as ChevronRight, m as Pencil, n as ArrowUpRight, o as ArrowDownRight, p as User, M as MessageSquare, Z as Zap, W as Wrench, q as TriangleAlert, B as Brain, r as Minus, s as CircleCheckBig, t as CircleX, u as ShieldCheck, v as Save, w as FileSearch, x as CircleCheck, y as CloudUpload, O as OctagonAlert, z as Radio, G as Gauge, H as Globe, I as FileTerminal, J as ChevronsUp, K as ChevronsDown, N as FileDiff, Q as History, V as RotateCcw, Y as Search, _ as GitCompareArrows, $ as CircleQuestionMark, a0 as Server, a1 as Lock, a2 as Wifi, a3 as WifiOff, a4 as ArrowUp, a5 as ArrowDown, a6 as Ellipsis, a7 as CodeXml, a8 as Blocks, a9 as MousePointerClick, aa as FileText, ab as Rows3, ac as Columns2 } from "../_libs/lucide-react.mjs";
+import { I as Info, C as ChevronDown, a as Check, X, D as Download, F as FileBraces, T as Trash2, P as Plus, A as ArrowLeft, b as ChevronUp, c as Copy, d as ChevronsLeft, e as ChevronLeft, f as ChevronRight, g as ChevronsRight, h as Clapperboard, S as Siren, G as Gauge, L as Layers, i as LoaderCircle, R as RefreshCw, j as Settings, U as Upload, k as Scan, l as CircleAlert, m as Terminal, n as ArrowUpRight, o as ArrowDownRight, p as User, q as Clock, M as MessageSquare, Z as Zap, E as ExternalLink, W as Wrench, r as TriangleAlert, B as Brain, s as EyeOff, t as Eye, u as RotateCw, v as Pencil, w as CircleX, x as ShieldCheck, y as Save, z as FileSearch, H as CircleCheck, J as CloudUpload, O as OctagonAlert, K as Radio, N as Globe, Q as FileTerminal, V as ChevronsUp, Y as ChevronsDown, _ as FileDiff, $ as History, a0 as RotateCcw, a1 as Search, a2 as GitCompareArrows, a3 as Minus, a4 as CircleCheckBig, a5 as ArrowUp, a6 as ArrowDown, a7 as CircleQuestionMark, a8 as Server, a9 as Lock, aa as Wifi, ab as WifiOff, ac as Ellipsis, ad as CodeXml, ae as Blocks, af as MousePointerClick, ag as FileText, ah as Rows3, ai as Columns2 } from "../_libs/lucide-react.mjs";
 import { M as Markdown } from "../_libs/react-markdown.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 { 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 { S as Slot } from "../_libs/radix-ui__react-slot.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 { 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$1, C as Content2$1, A as Arrow2 } from "../_libs/radix-ui__react-tooltip.mjs";
 import { R as Root$1, C as CollapsibleContent$1, a as CollapsibleTrigger$1 } from "../_libs/radix-ui__react-collapsible.mjs";
 import { R as Root$2, V as Viewport$1, C as Corner, S as ScrollAreaScrollbar, a as ScrollAreaThumb } from "../_libs/radix-ui__react-scroll-area.mjs";
 const ApiErrorSchema = object({
@@ -195,70 +195,59 @@ function useOnboarding() {
   };
 }
 function OnboardingBanner() {
-  const { hasSeenOnboarding, captureMode, isLoading, markSeen } = useOnboarding();
+  const { hasSeenOnboarding, isLoading, markSeen } = useOnboarding();
+  const [expanded, setExpanded] = reactExports.useState(false);
   if (isLoading || hasSeenOnboarding) return null;
-  const isFullMode = captureMode === "full";
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  const detailClass = expanded ? "grid" : "hidden sm:grid";
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       role: "note",
       "aria-label": "Onboarding tip",
-      className: "mx-4 mt-2 mb-1 flex items-start gap-3 rounded-md border border-amber-500/30 bg-amber-500/5 px-4 py-3 text-sm",
-      children: [
+      className: "mx-4 mt-2 mb-1 rounded-md border border-amber-500/30 bg-[#130d04] px-3 py-2 text-sm shadow-[0_12px_40px_rgba(0,0,0,0.16)]",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Info, { className: "mt-0.5 size-4 shrink-0 text-amber-300", "aria-hidden": "true" }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-1 font-medium text-amber-600 dark:text-amber-400", children: isFullMode ? "Agent Inspector is ready in Full mode" : "Agent Inspector is ready in Simple mode" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("ol", { className: "space-y-0.5 text-xs leading-relaxed text-muted-foreground", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "1. Start in the right mode" }),
-              ": this process is currently running in",
-              " ",
-              /* @__PURE__ */ jsxRuntimeExports.jsx("code", { children: captureMode }),
-              ". Mode is fixed at startup."
-            ] }),
-            isFullMode ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "2. Full diagnostics" }),
-                ": raw headers, raw response, and SSE chunks are captured for deep investigations."
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "3. Daily work" }),
-                ": restart with",
-                " ",
-                /* @__PURE__ */ jsxRuntimeExports.jsx("code", { children: "agent-inspector --mode simple" }),
-                " to reduce capture overhead."
-              ] })
-            ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "2. Simple capture" }),
-                ": requests, responses, tools, timing, tokens, replay, and memory candidates are available with lower overhead."
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "3. Need raw diagnostics?" }),
-                " Restart with",
-                " ",
-                /* @__PURE__ */ jsxRuntimeExports.jsx("code", { children: "agent-inspector --mode full" }),
-                " for raw headers, raw response, and SSE chunks."
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "Agent setup" }),
-              ": run ",
-              /* @__PURE__ */ jsxRuntimeExports.jsx("code", { children: "agent-inspector onboard --status" }),
-              ", then use ",
-              /* @__PURE__ */ jsxRuntimeExports.jsx("code", { children: "/agent-inspector:onboard" }),
-              " in Claude Code or ask Codex to use",
-              " ",
-              /* @__PURE__ */ jsxRuntimeExports.jsx("code", { children: "agent-inspector-onboard" }),
-              "."
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "Container networking" }),
-              ": if the AI tool runs outside this Inspector container or host, replace ",
-              /* @__PURE__ */ jsxRuntimeExports.jsx("code", { children: "localhost" }),
-              " with a reachable address."
-            ] })
-          ] })
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-amber-200", children: "Inspector ready" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "hidden truncate text-xs text-muted-foreground sm:inline", children: "Request, response, tool, timing, token, replay, and memory signals are active." })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1 text-xs leading-relaxed text-muted-foreground sm:hidden", children: "Core capture is active." }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "div",
+            {
+              className: `${detailClass} mt-2 gap-x-4 gap-y-1 text-xs leading-relaxed text-muted-foreground sm:grid-cols-2`,
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "Evidence" }),
+                  ": logs, sessions, groups, and MCP exports are available."
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "Network" }),
+                  ": replace ",
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("code", { children: "localhost" }),
+                  " if containers differ."
+                ] })
+              ]
+            }
+          )
         ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setExpanded((value) => !value),
+            className: "inline-flex h-8 shrink-0 items-center gap-1 rounded-md border border-amber-500/30 px-2 text-xs text-amber-200 transition-colors hover:bg-amber-500/10 sm:hidden",
+            "aria-expanded": expanded,
+            "aria-label": expanded ? "Hide onboarding details" : "Show onboarding details",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              ChevronDown,
+              {
+                className: `size-3.5 transition-transform ${expanded ? "rotate-180" : ""}`
+              }
+            )
+          }
+        ),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "button",
           {
@@ -266,7 +255,7 @@ function OnboardingBanner() {
             onClick: () => {
               void markSeen();
             },
-            className: "inline-flex h-8 shrink-0 items-center gap-1.5 rounded-md border border-amber-500/40 px-3 text-xs text-amber-700 transition-colors hover:bg-amber-500/10 dark:text-amber-300",
+            className: "hidden h-8 shrink-0 items-center gap-1.5 rounded-md border border-amber-500/40 px-3 text-xs text-amber-200 transition-colors hover:bg-amber-500/10 sm:inline-flex",
             "aria-label": "Dismiss onboarding tip",
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3.5" }),
@@ -286,7 +275,7 @@ function OnboardingBanner() {
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "size-3.5" })
           }
         )
-      ]
+      ] })
     }
   );
 }
@@ -613,7 +602,7 @@ function Dialog({
 function DialogTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Trigger$2, { "data-slot": "dialog-trigger", ...props });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Trigger$1, { "data-slot": "dialog-trigger", ...props });
 }
 function DialogPortal({
   ...props
@@ -1749,7 +1738,7 @@ function Tooltip({ ...props }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Root3, { "data-slot": "tooltip", ...props });
 }
 function TooltipTrigger({ ...props }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Trigger$1, { "data-slot": "tooltip-trigger", ...props });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Trigger$3, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipContent({
   className,
@@ -1885,7 +1874,7 @@ function TabsTrigger({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Trigger$3,
+    Trigger$2,
     {
       "data-slot": "tabs-trigger",
       className: cn(
@@ -1937,19 +1926,19 @@ function useCopyFeedback(text) {
   return { copied, copy };
 }
 const LazyCompareDrawer = reactExports.lazy(
-  () => import("./CompareDrawer-CFElCSYY.mjs").then((m) => ({ default: m.CompareDrawer }))
+  () => import("./CompareDrawer-YX2uOwh9.mjs").then((m) => ({ default: m.CompareDrawer }))
 );
 const LazyReplayDialog = reactExports.lazy(
-  () => import("./ReplayDialog-DfKapj0k.mjs").then((m) => ({ default: m.ReplayDialog }))
+  () => import("./ReplayDialog-B9AxvV2j.mjs").then((m) => ({ default: m.ReplayDialog }))
 );
 const LazyRequestAnatomy = reactExports.lazy(
-  () => import("./RequestAnatomy-CUxTCg31.mjs").then((m) => ({ default: m.RequestAnatomy }))
+  () => import("./RequestAnatomy-DxmUOcz8.mjs").then((m) => ({ default: m.RequestAnatomy }))
 );
 const LazyResponseView = reactExports.lazy(
-  () => import("./ResponseView-BXY0w197.mjs").then((m) => ({ default: m.ResponseView }))
+  () => import("./ResponseView-B73PHDQ0.mjs").then((m) => ({ default: m.ResponseView }))
 );
 const LazyStreamingChunkSequence = reactExports.lazy(
-  () => import("./StreamingChunkSequence-CzMnES9H.mjs").then((m) => ({
+  () => import("./StreamingChunkSequence-Bkwxu5Ev.mjs").then((m) => ({
     default: m.StreamingChunkSequence
   }))
 );
@@ -2351,6 +2340,7 @@ const STATUS_BADGE_CLASSES = {
   server_error: "bg-rose-500/15 text-rose-400 border-rose-500/25",
   pending: "bg-muted text-muted-foreground border-border"
 };
+const HEADER_ACTION_BUTTON_CLASS = "size-8 border-white/10 bg-[#0a0d11] text-muted-foreground shadow-none hover:border-cyan-300/30 hover:bg-cyan-400/10 hover:text-cyan-100";
 function formatElapsed$3(ms) {
   if (ms < 1e3) return `${ms}ms`;
   return `${(ms / 1e3).toFixed(1)}s`;
@@ -2402,8 +2392,8 @@ const LogEntryHeader = reactExports.memo(function({
       "data-nav-id": `log-${log.id}`,
       "data-nav-action": expanded ? "collapse" : "expand",
       className: cn(
-        "flex items-center gap-2 px-3 py-1 cursor-pointer transition-colors",
-        "hover:bg-muted/50",
+        "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 px-3 py-1.5 cursor-pointer transition-colors",
+        expanded ? "bg-[#0c1015]" : "hover:bg-muted/30",
         "select-none",
         "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none"
       ),
@@ -2491,24 +2481,30 @@ const LogEntryHeader = reactExports.memo(function({
           ] }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Output token throughput after first chunk" })
         ] }),
-        hasTokens && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-xs shrink-0", children: [
+        hasTokens && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex min-w-0 items-center gap-1 text-xs sm:shrink-0", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "size-3 text-muted-foreground" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex min-w-0 flex-wrap items-center gap-x-1 font-mono tabular-nums", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs(
               "span",
               {
-                className: log.inputTokens !== null ? "text-blue-400" : "text-muted-foreground",
+                className: cn(
+                  "whitespace-nowrap",
+                  log.inputTokens !== null ? "text-blue-400" : "text-muted-foreground"
+                ),
                 children: [
                   "IN ",
                   log.inputTokens !== null ? formatTokens(log.inputTokens) : "—"
                 ]
               }
             ),
-            " / ",
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground", children: "/" }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs(
               "span",
               {
-                className: log.outputTokens !== null ? "text-amber-400" : "text-muted-foreground",
+                className: cn(
+                  "whitespace-nowrap",
+                  log.outputTokens !== null ? "text-amber-400" : "text-muted-foreground"
+                ),
                 children: [
                   "OUT ",
                   log.outputTokens !== null ? formatTokens(log.outputTokens) : "—"
@@ -2582,7 +2578,7 @@ const LogEntryHeader = reactExports.memo(function({
                       {
                         variant: "outline",
                         size: "icon",
-                        className: "size-8",
+                        className: HEADER_ACTION_BUTTON_CLASS,
                         onClick: action.expansion.onToggle,
                         disabled: action.expansion.isPending,
                         "aria-pressed": action.expansion.isExpanded,
@@ -2599,8 +2595,8 @@ const LogEntryHeader = reactExports.memo(function({
                         variant: "outline",
                         size: "icon",
                         className: cn(
-                          "size-8",
-                          action.diffWithRaw.active && "bg-accent text-accent-foreground"
+                          HEADER_ACTION_BUTTON_CLASS,
+                          action.diffWithRaw.active && "border-cyan-300/35 bg-cyan-400/15 text-cyan-100"
                         ),
                         onClick: action.diffWithRaw.onToggle,
                         "aria-pressed": action.diffWithRaw.active,
@@ -2616,7 +2612,7 @@ const LogEntryHeader = reactExports.memo(function({
                       {
                         variant: "outline",
                         size: "icon",
-                        className: "size-8",
+                        className: HEADER_ACTION_BUTTON_CLASS,
                         onClick: action.diffWithPrevious,
                         "aria-label": "Diff with previous",
                         children: /* @__PURE__ */ jsxRuntimeExports.jsx(History, { className: "size-3.5" })
@@ -2630,7 +2626,7 @@ const LogEntryHeader = reactExports.memo(function({
                       {
                         variant: "outline",
                         size: "icon",
-                        className: "size-8",
+                        className: HEADER_ACTION_BUTTON_CLASS,
                         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" })
@@ -2646,7 +2642,7 @@ const LogEntryHeader = reactExports.memo(function({
                   {
                     variant: "outline",
                     size: "icon",
-                    className: "size-8",
+                    className: HEADER_ACTION_BUTTON_CLASS,
                     onClick: onReplay,
                     "aria-label": "Replay request",
                     children: /* @__PURE__ */ jsxRuntimeExports.jsx(RotateCcw, { className: "size-3.5" })
@@ -2989,6 +2985,10 @@ function JsonViewer({
   const isArray = dataType === "array";
   return /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("font-mono text-xs leading-relaxed", className), children: [
     showCopy && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-2 flex items-center justify-end gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyValueButton, { value: data }) }),
+    entries.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-md border border-white/10 bg-black/20 px-3 py-2 text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-cyan-300", children: isArray ? "[]" : "{}" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-2 text-[10px] uppercase", children: "0 items" })
+    ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: entries.map(([key, childValue]) => /* @__PURE__ */ jsxRuntimeExports.jsx(
       JsonNode,
       {
@@ -3144,7 +3144,7 @@ function ToolRow({ tool, called }) {
   const [open, setOpen] = reactExports.useState(false);
   const nameCopy = useCopyFeedback(tool.name);
   const hasDetails = tool.description !== null || tool.requiredParameters.length > 0 || tool.schema !== null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Collapsible, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-md border border-border/60 bg-background/40", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Collapsible, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-md border border-white/10 bg-black/20 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 items-center gap-2 px-2.5 py-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "button",
@@ -3186,10 +3186,10 @@ function ToolRow({ tool, called }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(CollapsibleContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2 border-t border-border/60 px-2.5 py-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CollapsibleContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2 border-t border-white/10 bg-white/[0.02] px-2.5 py-2", children: [
       tool.description !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs leading-relaxed text-muted-foreground", children: tool.description }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(RequiredParameters, { names: tool.requiredParameters }),
-      tool.schema !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "max-h-64 rounded-md border border-border/60 bg-muted/20 p-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewer, { data: safeJsonValue(tool.schema), defaultExpandDepth: 0 }) })
+      tool.schema !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "max-h-64 rounded-md border border-white/10 bg-[#06080b] p-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewer, { data: safeJsonValue(tool.schema), defaultExpandDepth: 0 }) })
     ] }) })
   ] }) });
 }
@@ -3213,7 +3213,7 @@ const RequestTools = reactExports.memo(function RequestTools2({
   if (summary === null) return null;
   const previewTools = summary.tools.slice(0, 6);
   const hiddenPreviewCount = summary.tools.length - previewTools.length;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "mb-3 rounded-lg border border-border/70 bg-muted/20", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "mb-3 overflow-hidden rounded-md border border-white/10 bg-[#080b0f] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2 px-3 py-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Wrench, { className: "size-4 shrink-0 text-sky-300/80" }),
@@ -3257,7 +3257,7 @@ const RequestTools = reactExports.memo(function RequestTools2({
           type: "button",
           variant: "ghost",
           size: "sm",
-          className: "h-7 px-2",
+          className: "h-7 border border-white/10 bg-black/20 px-2 text-muted-foreground hover:border-cyan-300/30 hover:bg-cyan-400/10 hover:text-cyan-100",
           onClick: () => setExpanded((value) => !value),
           "aria-expanded": expanded,
           children: [
@@ -3267,7 +3267,7 @@ const RequestTools = reactExports.memo(function RequestTools2({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-wrap gap-1.5 border-t border-border/60 px-3 py-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-wrap gap-1.5 border-t border-white/10 bg-black/10 px-3 py-2", children: [
       previewTools.map((tool) => /* @__PURE__ */ jsxRuntimeExports.jsx(
         Badge,
         {
@@ -3285,8 +3285,8 @@ const RequestTools = reactExports.memo(function RequestTools2({
         hiddenPreviewCount
       ] })
     ] }),
-    expanded && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2 border-t border-border/60 px-3 py-3", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "flex h-8 items-center gap-2 rounded-md border border-border/70 bg-background/50 px-2 text-xs", children: [
+    expanded && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2 border-t border-white/10 bg-black/15 px-3 py-3", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "flex h-8 items-center gap-2 rounded-md border border-white/10 bg-[#06080b] px-2 text-xs", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "size-3.5 shrink-0 text-muted-foreground" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "input",
@@ -3505,9 +3505,73 @@ function resolveFocusedTab(tab, anatomySegments) {
       return "request";
   }
 }
+const TAB_TRIGGER_CLASS = "h-9 flex-none rounded-none border-0 border-b-2 border-transparent bg-transparent px-3 text-xs font-semibold text-muted-foreground shadow-none hover:bg-cyan-400/[0.04] hover:text-foreground data-[state=active]:border-cyan-300 data-[state=active]:bg-transparent data-[state=active]:text-cyan-100 data-[state=active]:shadow-none";
 function shouldHydrateLogBody(log) {
   return log.bodyContentMode === "compact" || log.bodyContentMode === "truncated";
 }
+function ExpandedPanel({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: cn(
+        "inspector-scrollbar mx-3 mb-3 max-h-[72vh] overflow-auto rounded-md border border-white/10 bg-[#06080b] p-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]",
+        className
+      ),
+      children
+    }
+  );
+}
+function EmptyState({ children }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md border border-dashed border-white/10 bg-white/[0.02] px-3 py-5 text-center text-xs italic text-muted-foreground", children });
+}
+function RawTextBlock({ children }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "inspector-scrollbar max-h-[64vh] overflow-auto whitespace-pre-wrap break-words rounded-md border border-white/10 bg-black/30 p-3 font-mono text-xs leading-relaxed text-muted-foreground", children });
+}
+const NOTICE_TONE_CLASSES = {
+  loading: "border-cyan-400/25 bg-cyan-400/[0.06] text-cyan-100",
+  warning: "border-amber-400/25 bg-amber-400/[0.08] text-amber-100",
+  danger: "border-rose-400/25 bg-rose-400/[0.08] text-rose-100"
+};
+function NoticeBlock({
+  tone,
+  title,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: cn(
+        "mb-3 rounded-md border px-3 py-2 text-xs shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]",
+        NOTICE_TONE_CLASSES[tone]
+      ),
+      children: [
+        title !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-1 font-semibold", children: title }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "leading-relaxed text-muted-foreground", children })
+      ]
+    }
+  );
+}
+function HeaderRows({
+  headers,
+  emptyLabel
+}) {
+  const entries = headers === void 0 ? [] : Object.entries(headers).sort(([left], [right]) => left.localeCompare(right));
+  if (entries.length === 0) return /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyState, { children: emptyLabel });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-hidden rounded-md border border-white/10 bg-black/20 font-mono text-xs", children: entries.map(([key, value]) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: "grid min-w-0 grid-cols-[minmax(140px,0.32fr)_minmax(0,1fr)] border-b border-white/5 last:border-b-0",
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-w-0 truncate border-r border-white/5 bg-white/[0.03] px-2.5 py-2 font-semibold text-cyan-200", children: key }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-w-0 truncate px-2.5 py-2 text-muted-foreground", title: value, children: value })
+      ]
+    },
+    key
+  )) });
+}
 function DiffToggleButton({
   active,
   onClick
@@ -3518,7 +3582,10 @@ function DiffToggleButton({
       {
         variant: active ? "default" : "outline",
         size: "sm",
-        className: "h-8 text-xs",
+        className: cn(
+          "h-8 border-white/10 text-xs shadow-none",
+          active ? "bg-cyan-300 text-black hover:bg-cyan-200" : "bg-[#0a0d11] text-muted-foreground hover:border-cyan-300/30 hover:bg-cyan-400/10 hover:text-cyan-100"
+        ),
         onClick,
         "aria-pressed": active,
         children: [
@@ -3749,162 +3816,177 @@ const LogEntry = reactExports.memo(function({
     };
   }, [anatomySegments, log.id]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(TooltipProvider, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border rounded-lg mb-1 overflow-hidden", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        LogEntryHeader,
-        {
-          log: displayLog,
-          messageCount: requestAnalysis.messageCount,
-          toolCount: requestAnalysis.toolCount,
-          expanded,
-          onToggle: handleToggleExpanded,
-          cacheTrend,
-          slowResponseThresholdSeconds,
-          timeDisplayFormat,
-          activeTab,
-          tabActions,
-          onReplay: onCompareWithPrevious === void 0 ? void 0 : () => {
-            setReplayOpen(true);
-          }
-        }
-      ),
-      expanded && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList, { className: "mx-4 mt-2", children: [
-          viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "raw-headers", children: "Raw Headers" }),
-          viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "headers", children: "Headers" }),
-          anatomySegments !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "anatomy", children: "Context" }),
-          shouldShowRawRequestTab(resolvedFormat, viewMode, strip) && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "raw-request", children: "Raw Request" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "request", children: "Request" }),
-          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.jsx("div", { className: "px-4 pt-1 pb-3", children: displayLog.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: displayLog.rawRequestBody }) }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "request", children: activeTab === "request" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 pt-1 pb-3", children: [
-          bodyHydrationState === "loading" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-3 rounded border border-border bg-muted/30 p-3 text-xs text-muted-foreground", children: "Loading full request and response bodies..." }),
-          bodyHydrationState === "failed" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-3 rounded border border-amber-500/30 bg-amber-500/10 p-3 text-xs text-amber-200", children: "Full request and response bodies could not be loaded. Compact metadata is still available." }),
-          warnings.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-3 rounded border border-amber-500/30 bg-amber-500/10 p-3 text-xs", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 font-semibold text-amber-300", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleAlert, { className: "size-3.5" }),
-              "Tool schema warnings"
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "mt-2 space-y-1 text-muted-foreground", children: warnings.map((warning) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: warning }, warning)) })
-          ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: cn(
+          "mb-2 overflow-hidden rounded-md border bg-[#090a0d] transition-[background-color,border-color,box-shadow]",
+          expanded ? "border-cyan-300/20 shadow-[0_18px_60px_rgba(0,0,0,0.28),inset_0_1px_0_rgba(255,255,255,0.05)]" : "border-border/70 hover:border-border"
+        ),
+        children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
-            RequestTools,
-            {
-              summary: requestTools,
-              calledToolNames: responseAnalysis.toolNames ?? []
-            }
-          ),
-          requestDiff ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-            RequestDiffContent,
-            {
-              rawBody: displayLog.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,
+            LogEntryHeader,
             {
-              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,
-          {
-            parsed: requestExpansion.parsedData,
-            inputTokens: displayLog.inputTokens ?? null,
-            model: displayLog.model,
-            segments: anatomySegments,
-            onSegmentActivate: jumpToAnatomySegment
-          }
-        ) }) }),
-        viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "headers", children: activeTab === "headers" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 pt-1 pb-3", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end gap-2 mb-2", children: shouldShowHeadersDiffButton(
-            viewMode,
-            displayLog.rawHeaders !== void 0 && Object.keys(displayLog.rawHeaders).length > 0
-          ) && /* @__PURE__ */ jsxRuntimeExports.jsx(
-            DiffToggleButton,
-            {
-              active: headersDiff,
-              onClick: (e) => {
-                e.stopPropagation();
-                setHeadersDiff(!headersDiff);
+              log: displayLog,
+              messageCount: requestAnalysis.messageCount,
+              toolCount: requestAnalysis.toolCount,
+              expanded,
+              onToggle: handleToggleExpanded,
+              cacheTrend,
+              slowResponseThresholdSeconds,
+              timeDisplayFormat,
+              activeTab,
+              tabActions,
+              onReplay: onCompareWithPrevious === void 0 ? void 0 : () => {
+                setReplayOpen(true);
               }
             }
-          ) }),
-          headersDiff ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-            HeadersDiffContent,
-            {
-              rawHeaders: displayLog.rawHeaders,
-              headers: displayLog.headers,
-              emptyLabel: "No transformation applied; raw and processed headers are identical."
-            }
-          ) : displayLog.headers && Object.keys(displayLog.headers).length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 font-mono text-xs", children: Object.entries(displayLog.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: activeTab === "raw-headers" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 pt-1 pb-3", children: displayLog.rawHeaders && Object.keys(displayLog.rawHeaders).length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 font-mono text-xs", children: Object.entries(displayLog.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,
-            ":"
-          ] }),
-          /* @__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 raw headers captured" }) }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw", children: activeTab === "raw" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 pt-1 pb-3 space-y-3", children: [
-          displayLog.error !== void 0 && displayLog.error !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded border border-destructive/50 bg-destructive/10 p-3 text-xs", children: [
-            /* @__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: displayLog.error })
-          ] }),
-          displayLog.responseText !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            LazyJsonViewerFromString,
-            {
-              text: displayLog.responseText,
-              defaultExpandDepth: 0,
-              bulkDepth: responseExpansion.bulkDepth,
-              bulkRevision: responseExpansion.bulkRevision
-            }
-          ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground italic", children: "No response" }),
-          displayLog.streaming === true && /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            LazyStreamingChunkSequence,
+          ),
+          expanded && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
             {
-              logId: displayLog.id,
-              truncated: displayLog.streamingChunksPath !== null
+              className: "border-t border-white/10 bg-[#050607]/80 pt-2",
+              onClick: (e) => e.stopPropagation(),
+              onKeyDown: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, className: "gap-2", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  TabsList,
+                  {
+                    variant: "line",
+                    className: "inspector-scrollbar mx-3 h-auto w-[calc(100%-1.5rem)] justify-start overflow-x-auto rounded-none border-b border-white/10 bg-transparent p-0",
+                    children: [
+                      viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { className: TAB_TRIGGER_CLASS, value: "raw-headers", children: "Raw Headers" }),
+                      viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { className: TAB_TRIGGER_CLASS, value: "headers", children: "Headers" }),
+                      anatomySegments !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { className: TAB_TRIGGER_CLASS, value: "anatomy", children: "Context" }),
+                      shouldShowRawRequestTab(resolvedFormat, viewMode, strip) && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { className: TAB_TRIGGER_CLASS, value: "raw-request", children: "Raw Request" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { className: TAB_TRIGGER_CLASS, value: "request", children: "Request" }),
+                      viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { className: TAB_TRIGGER_CLASS, value: "raw", children: "Raw Response" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { className: TAB_TRIGGER_CLASS, value: "parsed", children: "Response" })
+                    ]
+                  }
+                ),
+                shouldShowRawRequestTab(resolvedFormat, viewMode, strip) && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw-request", children: activeTab === "raw-request" && /* @__PURE__ */ jsxRuntimeExports.jsx(ExpandedPanel, { children: displayLog.rawRequestBody === null ? /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyState, { 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(RawTextBlock, { children: displayLog.rawRequestBody }) }) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "request", children: activeTab === "request" && /* @__PURE__ */ jsxRuntimeExports.jsxs(ExpandedPanel, { children: [
+                  bodyHydrationState === "loading" && /* @__PURE__ */ jsxRuntimeExports.jsx(NoticeBlock, { tone: "loading", children: "Loading full request and response bodies..." }),
+                  bodyHydrationState === "failed" && /* @__PURE__ */ jsxRuntimeExports.jsx(NoticeBlock, { tone: "warning", children: "Full request and response bodies could not be loaded. Compact metadata is still available." }),
+                  warnings.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(NoticeBlock, { tone: "warning", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 font-semibold text-amber-300", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleAlert, { className: "size-3.5" }),
+                      "Tool schema warnings"
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "mt-2 space-y-1 text-muted-foreground", children: warnings.map((warning) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: warning }, warning)) })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    RequestTools,
+                    {
+                      summary: requestTools,
+                      calledToolNames: responseAnalysis.toolNames ?? []
+                    }
+                  ),
+                  requestDiff ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    RequestDiffContent,
+                    {
+                      rawBody: displayLog.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(EmptyState, { 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(RawTextBlock, { children: displayedRequestBody }) })
+                ] }) }),
+                anatomySegments !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "anatomy", children: activeTab === "anatomy" && /* @__PURE__ */ jsxRuntimeExports.jsx(ExpandedPanel, { className: "p-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  LazyRequestAnatomy,
+                  {
+                    parsed: requestExpansion.parsedData,
+                    inputTokens: displayLog.inputTokens ?? null,
+                    model: displayLog.model,
+                    segments: anatomySegments,
+                    onSegmentActivate: jumpToAnatomySegment
+                  }
+                ) }) }) }),
+                viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "headers", children: activeTab === "headers" && /* @__PURE__ */ jsxRuntimeExports.jsxs(ExpandedPanel, { children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end gap-2 mb-2", children: shouldShowHeadersDiffButton(
+                    viewMode,
+                    displayLog.rawHeaders !== void 0 && Object.keys(displayLog.rawHeaders).length > 0
+                  ) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    DiffToggleButton,
+                    {
+                      active: headersDiff,
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        setHeadersDiff(!headersDiff);
+                      }
+                    }
+                  ) }),
+                  headersDiff ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    HeadersDiffContent,
+                    {
+                      rawHeaders: displayLog.rawHeaders,
+                      headers: displayLog.headers,
+                      emptyLabel: "No transformation applied; raw and processed headers are identical."
+                    }
+                  ) : /* @__PURE__ */ jsxRuntimeExports.jsx(HeaderRows, { headers: displayLog.headers, emptyLabel: "No headers captured" })
+                ] }) }),
+                viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw-headers", children: activeTab === "raw-headers" && /* @__PURE__ */ jsxRuntimeExports.jsx(ExpandedPanel, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  HeaderRows,
+                  {
+                    headers: displayLog.rawHeaders,
+                    emptyLabel: "No raw headers captured"
+                  }
+                ) }) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw", children: activeTab === "raw" && /* @__PURE__ */ jsxRuntimeExports.jsxs(ExpandedPanel, { className: "space-y-3", children: [
+                  displayLog.error !== void 0 && displayLog.error !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(NoticeBlock, { tone: "danger", title: "SSE Error", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono", children: displayLog.error }) }),
+                  displayLog.responseText !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    LazyJsonViewerFromString,
+                    {
+                      text: displayLog.responseText,
+                      defaultExpandDepth: 0,
+                      bulkDepth: responseExpansion.bulkDepth,
+                      bulkRevision: responseExpansion.bulkRevision
+                    }
+                  ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyState, { children: "No response" }),
+                  displayLog.streaming === true && /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    LazyStreamingChunkSequence,
+                    {
+                      logId: displayLog.id,
+                      truncated: displayLog.streamingChunksPath !== null
+                    }
+                  ) })
+                ] }) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "parsed", children: activeTab === "parsed" && /* @__PURE__ */ jsxRuntimeExports.jsx(ExpandedPanel, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  LazyResponseView,
+                  {
+                    responseText: displayLog.responseText,
+                    responseStatus: displayLog.responseStatus,
+                    streaming: displayLog.streaming,
+                    inputTokens: displayLog.inputTokens,
+                    outputTokens: displayLog.outputTokens,
+                    cacheCreationInputTokens: displayLog.cacheCreationInputTokens,
+                    cacheReadInputTokens: displayLog.cacheReadInputTokens,
+                    apiFormat: resolvedFormat,
+                    error: displayLog.error
+                  }
+                ) }) }) })
+              ] })
             }
-          ) })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "parsed", children: activeTab === "parsed" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 pt-1 pb-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(TabFallback, {}), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          LazyResponseView,
-          {
-            responseText: displayLog.responseText,
-            responseStatus: displayLog.responseStatus,
-            streaming: displayLog.streaming,
-            inputTokens: displayLog.inputTokens,
-            outputTokens: displayLog.outputTokens,
-            cacheCreationInputTokens: displayLog.cacheCreationInputTokens,
-            cacheReadInputTokens: displayLog.cacheReadInputTokens,
-            apiFormat: resolvedFormat,
-            error: displayLog.error
-          }
-        ) }) }) })
-      ] }) })
-    ] }),
+          )
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntimeExports.jsx(LazyReplayDialog, { log: displayLog, open: replayOpen, onOpenChange: setReplayOpen }) })
   ] });
 });
@@ -5345,74 +5427,7 @@ function CrabLogo({ className }) {
         /* @__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" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "path",
-            {
-              d: "M5.6 17.7 L8.4 15.4 L10.8 18 C9.1 18.9 7.2 18.8 5.6 17.7 Z",
-              fill: "#2f6b3f",
-              stroke: "none",
-              opacity: "0.95"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "path",
-            {
-              d: "M6.9 17.5 L8.4 16 L9.8 17.7 C8.9 18.1 7.8 18.1 6.9 17.5 Z",
-              fill: "#6fb36f",
-              stroke: "none",
-              opacity: "0.95"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M8.4 16 L8.4 18.4", stroke: "#d6b45f", strokeWidth: "0.34" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "10.6", cy: "17.75", r: "0.36", fill: "#c2412d", stroke: "none" })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "path",
-            {
-              d: "M8 16.5 L11.9 13.6 L15.8 16.8 C13.3 18.4 10.4 18.3 8 16.5 Z",
-              fill: "#2f6b3f",
-              stroke: "none",
-              opacity: "0.97"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "path",
-            {
-              d: "M9.8 16.3 L11.9 14.4 L14.3 16.5 C12.8 17.4 11.3 17.4 9.8 16.3 Z",
-              fill: "#6fb36f",
-              stroke: "none",
-              opacity: "0.95"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M11.9 14.3 L11.9 17.8", stroke: "#d6b45f", strokeWidth: "0.42" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9.8 16.3 C11.2 15.8 12.9 15.9 14.3 16.5", stroke: "#9fca78", strokeWidth: "0.36" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "15.6", cy: "16.75", r: "0.43", fill: "#c2412d", stroke: "none" })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "path",
-            {
-              d: "M13.6 18.1 L16.2 15.7 L18.5 18.2 C17.1 19.1 15.2 19 13.6 18.1 Z",
-              fill: "#2f6b3f",
-              stroke: "none",
-              opacity: "0.95"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "path",
-            {
-              d: "M14.8 17.9 L16.2 16.3 L17.5 18 C16.6 18.4 15.7 18.4 14.8 17.9 Z",
-              fill: "#6fb36f",
-              stroke: "none",
-              opacity: "0.95"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M16.2 16.3 L16.2 18.6", stroke: "#d6b45f", strokeWidth: "0.34" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "18.35", cy: "18.15", r: "0.36", fill: "#c2412d", stroke: "none" })
-        ] })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "17.5", y1: "16", x2: "19.5", y2: "19.5" })
       ]
     }
   );
@@ -8882,7 +8897,6 @@ args = ["stdio", "--url", "${endpoint}"]`
 function ProxySettingsTab() {
   const {
     strip,
-    captureMode,
     slowResponseThresholdSeconds,
     providerTestTimeoutSeconds,
     timeDisplayFormat,
@@ -8894,7 +8908,6 @@ function ProxySettingsTab() {
   } = useStripConfig();
   const [error, setError] = reactExports.useState(null);
   const [pending, setPending] = reactExports.useState(false);
-  const alternateCaptureMode = captureMode === "full" ? "simple" : "full";
   const handleToggle = reactExports.useCallback(
     async (next) => {
       setError(null);
@@ -8952,21 +8965,6 @@ function ProxySettingsTab() {
     [setTimeDisplayFormat]
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-semibold", children: "Capture mode" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-muted-foreground", children: [
-        "This process is running in ",
-        /* @__PURE__ */ jsxRuntimeExports.jsx("code", { children: captureMode }),
-        " mode. Restart with",
-        " ",
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("code", { children: [
-          "agent-inspector --mode ",
-          alternateCaptureMode
-        ] }),
-        " to change it.",
-        captureMode === "simple" ? " Simple mode keeps replay, parsed requests, responses, timing, tools, and token usage while skipping raw headers, raw response retention, and detailed SSE chunk retention." : " Full mode retains raw headers, raw responses, and SSE chunks for diagnostics; use simple mode for everyday lower-overhead capture."
-      ] })
-    ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-semibold", children: "Claude Code billing header" }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-muted-foreground", children: [
@@ -10260,6 +10258,114 @@ function getFirstUserAgent(logs) {
   }
   return null;
 }
+function hasLogFailure(log) {
+  if (log.error !== null && log.error !== void 0 && log.error.length > 0) return true;
+  return log.responseStatus !== null && log.responseStatus >= 400;
+}
+function getModelLabel(logs) {
+  const models = /* @__PURE__ */ new Set();
+  for (const log of logs) {
+    if (log.model !== null && log.model.length > 0) {
+      models.add(log.model);
+    }
+  }
+  const sorted = [...models].sort();
+  if (sorted.length === 0) return "Model unknown";
+  if (sorted.length === 1) return sorted[0] ?? "Model unknown";
+  return `${sorted.length} models`;
+}
+function buildSessionSlateStats({
+  logs,
+  isLoading,
+  timeDisplayFormat,
+  slowResponseThresholdSeconds
+}) {
+  let failures = 0;
+  let slow = 0;
+  let totalIn = 0;
+  let totalOut = 0;
+  const slowThresholdMs = slowResponseThresholdSeconds * 1e3;
+  for (const log of logs) {
+    if (hasLogFailure(log)) failures += 1;
+    if (slowResponseThresholdSeconds > 0 && log.elapsedMs !== null && log.elapsedMs >= slowThresholdMs) {
+      slow += 1;
+    }
+    if (log.inputTokens !== null) totalIn += log.inputTokens;
+    if (log.outputTokens !== null) totalOut += log.outputTokens;
+  }
+  const status = isLoading ? "rolling" : failures > 0 ? "failed" : slow > 0 ? "watch" : "clear";
+  const statusLabel2 = status === "rolling" ? "Rolling" : status === "failed" ? "Failure" : status === "watch" ? "Watch" : "Clear";
+  return {
+    status,
+    statusLabel: statusLabel2,
+    modelLabel: getModelLabel(logs),
+    requests: logs.length,
+    failures,
+    slow,
+    timeRange: formatTimeRange(logs, timeDisplayFormat),
+    tokenLabel: `${formatTokens(totalIn)} in / ${formatTokens(totalOut)} out`
+  };
+}
+function slateStatusClass(status) {
+  switch (status) {
+    case "rolling":
+      return "border-cyan-400/35 bg-cyan-500/10 text-cyan-200";
+    case "failed":
+      return "border-red-400/35 bg-red-500/10 text-red-100";
+    case "watch":
+      return "border-amber-300/35 bg-amber-400/10 text-amber-100";
+    case "clear":
+      return "border-emerald-400/30 bg-emerald-500/10 text-emerald-100";
+  }
+}
+function SessionOpeningSlate({ stats }) {
+  if (stats.requests === 0) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-4 rounded-md border border-border bg-[#0c0d0f] shadow-[0_14px_50px_rgba(0,0,0,0.25)]", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-0 md:grid-cols-[minmax(220px,1.2fr)_repeat(4,minmax(120px,1fr))]", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "col-span-2 border-b border-border/70 px-4 py-3 md:col-span-1 md:border-b-0 md:border-r", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-[10px] font-semibold uppercase text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Clapperboard, { className: "size-3.5 text-cyan-300" }),
+        "Opening Slate"
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 min-w-0 truncate font-mono text-sm font-semibold text-foreground", children: stats.modelLabel }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1 truncate font-mono text-[11px] text-muted-foreground", children: stats.timeRange ?? "Timeline pending" })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-r border-b border-border/70 px-4 py-3 md:border-b-0", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] uppercase text-muted-foreground", children: "Status" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: cn(
+            "mt-2 inline-flex h-7 items-center rounded-md border px-2.5 font-mono text-xs font-semibold",
+            slateStatusClass(stats.status)
+          ),
+          children: stats.statusLabel
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-b border-border/70 px-4 py-3 md:border-b-0 md:border-r", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] uppercase text-muted-foreground", children: "Requests" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 font-mono text-xl font-semibold text-foreground", children: stats.requests })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-r border-border/70 px-4 py-3 md:border-r", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 text-[10px] uppercase text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Siren, { className: "size-3 text-red-300" }),
+        "Failure"
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 font-mono text-xl font-semibold text-red-100", children: stats.failures })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-3", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 text-[10px] uppercase text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Gauge, { className: "size-3 text-amber-200" }),
+        "Tempo"
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2 font-mono text-sm font-semibold text-foreground", children: [
+        stats.slow,
+        " slow"
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1 truncate font-mono text-[11px] text-muted-foreground", children: stats.tokenLabel })
+    ] })
+  ] }) });
+}
 function resolveSessionContextScope({
   pinnedSessionId,
   selectedSession,
@@ -10351,6 +10457,25 @@ function formatMetadataValue(value) {
   if (value === null) return null;
   return JSON.stringify(value);
 }
+function formatMemberMetadata(member, key) {
+  if (member === null) return null;
+  const value = member.metadata[key];
+  if (value === void 0) return null;
+  return formatMetadataValue(value);
+}
+function evidenceChipClass(value) {
+  const normalized = value.toLowerCase();
+  if (normalized.includes("reject") || normalized.includes("fail") || normalized.includes("error")) {
+    return "border-red-400/35 bg-red-500/10 text-red-100";
+  }
+  if (normalized.includes("partial") || normalized.includes("pending") || normalized.includes("slow")) {
+    return "border-amber-300/35 bg-amber-400/10 text-amber-100";
+  }
+  if (normalized.includes("pass") || normalized.includes("complete") || normalized.includes("accept")) {
+    return "border-emerald-400/30 bg-emerald-500/10 text-emerald-100";
+  }
+  return "border-border/70 bg-background/70 text-muted-foreground";
+}
 function getMemberMetadataRows(member) {
   const rows = [];
   for (const key of MEMBER_METADATA_KEYS) {
@@ -10362,19 +10487,60 @@ function getMemberMetadataRows(member) {
   return rows;
 }
 function SessionMembershipPanel({
-  memberships
+  memberships,
+  defaultOpen = false
 }) {
+  const [open, setOpen] = reactExports.useState(defaultOpen);
   if (memberships.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-4 rounded-md border border-border bg-muted/10 px-3 py-2 text-xs", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold text-foreground", children: "Group Member Evidence" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "font-mono text-[10px] text-muted-foreground", children: [
-        memberships.length,
-        " group",
-        memberships.length === 1 ? "" : "s"
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: memberships.map((membership) => {
+  const primary = memberships[0];
+  const primaryMember = primary?.member ?? null;
+  const score = formatMemberMetadata(primaryMember, "score");
+  const decision = formatMemberMetadata(primaryMember, "decision");
+  const finalStatus = formatMemberMetadata(primaryMember, "final_status");
+  const summaryChips = [
+    score === null ? null : { label: `score ${score}`, value: score },
+    decision === null ? null : { label: decision, value: decision },
+    finalStatus === null ? null : { label: finalStatus, value: finalStatus },
+    primaryMember?.model === null || primaryMember?.model === void 0 ? null : { label: primaryMember.model, value: primaryMember.model }
+  ].filter(
+    (value) => value !== null && value.label.length > 0 && value.value.length > 0
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-3 overflow-hidden rounded-md border border-border bg-[#0c0d0f] text-xs", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((value) => !value),
+        className: "flex w-full items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-muted/30",
+        "aria-expanded": open,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-semibold text-foreground", children: "Case File" }),
+              primary !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate text-muted-foreground", title: primary.groupTitle, children: primary.groupTitle }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono text-[10px] uppercase text-muted-foreground", children: [
+                memberships.length,
+                " group",
+                memberships.length === 1 ? "" : "s"
+              ] })
+            ] }),
+            summaryChips.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", children: summaryChips.slice(0, 4).map((chip) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "span",
+              {
+                className: cn(
+                  "rounded border px-1.5 py-0.5 font-mono text-[10px]",
+                  evidenceChipClass(chip.value)
+                ),
+                children: chip.label
+              },
+              chip.label
+            )) })
+          ] }),
+          open ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronUp, { className: "size-4 shrink-0 text-muted-foreground" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-4 shrink-0 text-muted-foreground" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2 border-t border-border/70 px-3 py-2", children: memberships.map((membership) => {
       const member = membership.member;
       const metadataRows = getMemberMetadataRows(member);
       return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0", children: [
@@ -10425,6 +10591,105 @@ function SessionMembershipPanel({
     }) })
   ] });
 }
+function formatPaginationStatus({
+  logs,
+  pagination
+}) {
+  if (pagination.isLoading && logs.length === 0) return "Loading logs...";
+  if (logs.length === 0) return "No logs on this page";
+  const first = logs[0];
+  const last = logs[logs.length - 1];
+  const range = first === void 0 || last === void 0 ? "Current page" : `#${first.id}-#${last.id}`;
+  const total = pagination.total === null ? "logs" : `${pagination.total} logs`;
+  return `Showing ${range} of ${total}`;
+}
+function LogPaginationButton({
+  label,
+  title,
+  icon,
+  disabled,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled,
+      className: "inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-45",
+      title,
+      children: [
+        icon,
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: label })
+      ]
+    }
+  );
+}
+function LogPaginationBar({
+  logs,
+  pagination,
+  embedded = false
+}) {
+  if (pagination === void 0) return null;
+  const disabled = pagination.isLoading;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex min-h-9 flex-col gap-2 px-1 py-1 sm:flex-row sm:items-center",
+        embedded ? "border-t border-border/70 pt-2" : "mb-3 rounded-md border border-border bg-muted/10 px-2"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full min-w-0 px-1 font-mono text-[11px] text-muted-foreground sm:flex-1", children: [
+          formatPaginationStatus({ logs, pagination }),
+          pagination.isLoading && logs.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-2", children: "Loading..." })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center gap-1 overflow-x-auto sm:w-auto", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            LogPaginationButton,
+            {
+              label: "Oldest",
+              title: "Load the oldest logs in this session",
+              icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronsLeft, { className: "size-3.5" }),
+              disabled: disabled || !pagination.hasOlder,
+              onClick: pagination.onOldest
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            LogPaginationButton,
+            {
+              label: "Older",
+              title: "Load older logs",
+              icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronLeft, { className: "size-3.5" }),
+              disabled: disabled || !pagination.hasOlder,
+              onClick: pagination.onOlder
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            LogPaginationButton,
+            {
+              label: "Newer",
+              title: "Load newer logs",
+              icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-3.5" }),
+              disabled: disabled || !pagination.hasNewer,
+              onClick: pagination.onNewer
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            LogPaginationButton,
+            {
+              label: "Newest",
+              title: "Load the newest logs in this session",
+              icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronsRight, { className: "size-3.5" }),
+              disabled: disabled || !pagination.hasNewer,
+              onClick: pagination.onNewest
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
 function formatRequestCount(count) {
   return `${count} ${count === 1 ? "request" : "requests"}`;
 }
@@ -10510,36 +10775,7 @@ function CopyableCommand({ command }) {
         onClick: handleCopy,
         className: "text-muted-foreground hover:text-foreground transition-colors shrink-0 cursor-pointer",
         "aria-label": "Copy command",
-        children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "svg",
-          {
-            width: "16",
-            height: "16",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M20 6 9 17l-5-5" })
-          }
-        ) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "svg",
-          {
-            width: "16",
-            height: "16",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
-            ]
-          }
-        )
+        children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-4" })
       }
     )
   ] });
@@ -10554,6 +10790,98 @@ function McpReadyBadge() {
     /* @__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." })
   ] }) });
 }
+const CRAB_VARIANT_COLORS = [
+  "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"
+];
+function CrabFamily({
+  compact,
+  entrancePhase
+}) {
+  if (compact) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(CrabLogo, { className: "size-7 text-amber-500" });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { 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 = CRAB_VARIANT_COLORS[i] ?? "text-amber-500";
+      const entranceClass = entrancePhase === "hidden" ? "opacity-0 scale-0" : entrancePhase === "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`,
+            ...entrancePhase === "playing" ? { animationDelay: `${i * 400}ms` } : {}
+          }
+        },
+        i
+      );
+    }) })
+  ] });
+}
+function BrandHeader({
+  compact,
+  crabEntrancePhase
+}) {
+  if (compact) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pb-3", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(CrabFamily, { compact: true, entrancePhase: crabEntrancePhase }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 items-baseline gap-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate text-base font-bold", children: "Inspector" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "hidden shrink-0 font-mono text-[11px] font-semibold text-muted-foreground sm:inline", children: [
+                "v",
+                packageJson.version
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "hidden text-[11px] font-semibold text-muted-foreground sm:block", children: "Local First. Evidence First." })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(GroupsDialog, {}),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsDialog, {})
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 hidden sm:block", children: /* @__PURE__ */ jsxRuntimeExports.jsx(McpReadyBadge, {}) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-[1fr_auto_1fr] items-start gap-3 pb-6", 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.jsx(CrabFamily, { compact: false, entrancePhase: crabEntrancePhase }),
+        /* @__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: "Agent 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("span", { className: "max-w-[calc(100vw-7rem)] text-sm font-semibold text-muted-foreground", children: "Local First. Evidence First." }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(McpReadyBadge, {})
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "justify-self-end flex items-center gap-1", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(GroupsDialog, {}),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsDialog, {})
+    ] })
+  ] });
+}
 function SessionContextLogButton({ label, logId }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "button",
@@ -10738,6 +11066,15 @@ function SessionContextSummaryPanel({
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-h-52 overflow-y-auto pr-1", children: summary.models.map((modelSummary) => /* @__PURE__ */ jsxRuntimeExports.jsx(SessionModelContextRow, { summary: modelSummary }, modelSummary.model)) })
   ] });
 }
+function formatSessionContextOverview(summary) {
+  const riskCount = summary.models.filter((model) => model.latest.health.level === "risk").length;
+  if (riskCount > 0) return `${riskCount} risk`;
+  const optimizableCount = summary.models.filter(
+    (model) => model.latest.health.level === "optimizable"
+  ).length;
+  if (optimizableCount > 0) return `${optimizableCount} optimizable`;
+  return `${summary.models.length} model${summary.models.length === 1 ? "" : "s"}`;
+}
 function SessionContextBar({
   label,
   logs,
@@ -10748,11 +11085,16 @@ function SessionContextBar({
   showBackLink
 }) {
   const [copied, setCopied] = reactExports.useState(false);
+  const [detailsOpen, setDetailsOpen] = reactExports.useState(false);
   const timeRange = reactExports.useMemo(
     () => formatTimeRange(logs, timeDisplayFormat),
     [logs, timeDisplayFormat]
   );
   const userAgent = reactExports.useMemo(() => getFirstUserAgent(logs), [logs]);
+  const contextOverview = reactExports.useMemo(
+    () => formatSessionContextOverview(contextSummary),
+    [contextSummary]
+  );
   const handleCopyLink = reactExports.useCallback(() => {
     void copyTextToClipboard(window.location.href).then((success) => {
       if (!success) return;
@@ -10760,8 +11102,8 @@ function SessionContextBar({
       setTimeout(() => setCopied(false), 2e3);
     });
   }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-4 border border-border rounded-md bg-muted/20 px-3 py-2 text-xs", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-3 rounded-md border border-border bg-muted/15 px-3 py-2 text-xs", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
       showBackLink && /* @__PURE__ */ jsxRuntimeExports.jsx(
         "a",
         {
@@ -10772,7 +11114,7 @@ function SessionContextBar({
           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: "min-w-[180px] 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: label, children: truncateSessionId(label) }),
           userAgent !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -10799,6 +11141,20 @@ function SessionContextBar({
           ] })
         ] })
       ] }),
+      contextSummary.models.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setDetailsOpen((value) => !value),
+          className: "inline-flex h-8 shrink-0 items-center gap-1.5 rounded-md border border-border bg-background/60 px-2.5 font-mono text-[11px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+          "aria-expanded": detailsOpen,
+          title: detailsOpen ? "Hide context details" : "Show context details",
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: contextOverview }),
+            detailsOpen ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronUp, { className: "size-3.5" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-3.5" })
+          ]
+        }
+      ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "button",
         {
@@ -10811,7 +11167,7 @@ function SessionContextBar({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(SessionContextSummaryPanel, { summary: contextSummary })
+    detailsOpen && /* @__PURE__ */ jsxRuntimeExports.jsx(SessionContextSummaryPanel, { summary: contextSummary })
   ] });
 }
 function ProxyViewer({
@@ -10825,12 +11181,12 @@ function ProxyViewer({
   onClearAll,
   onClearGroup,
   viewMode,
-  onViewModeChange,
   captureMode,
   strip,
   slowResponseThresholdSeconds,
   timeDisplayFormat,
   isLoading = false,
+  pagination,
   sessionMemberships = [],
   hideSessionFilter = false,
   pinnedSessionId
@@ -10904,6 +11260,17 @@ function ProxyViewer({
   const cacheTrends = reactExports.useMemo(() => computeCacheTrends(groups), [groups]);
   const comparisonPredecessors = reactExports.useMemo(() => buildValidPredecessors(groups), [groups]);
   const exportActionVisibility = getExportActionVisibility(captureMode, logs.length);
+  const isPinnedSessionPage = pinnedSessionId !== void 0;
+  const activeScopeLabel = hasSessionContext && sessionContextScope !== null ? truncateSessionId(sessionContextScope.label) : selectedSession === "__all__" ? "All sessions" : truncateSessionId(selectedSession);
+  const slateStats = reactExports.useMemo(
+    () => buildSessionSlateStats({
+      logs,
+      isLoading,
+      timeDisplayFormat,
+      slowResponseThresholdSeconds
+    }),
+    [isLoading, logs, slowResponseThresholdSeconds, timeDisplayFormat]
+  );
   const handleCompareWithPrevious = reactExports.useCallback(
     (log) => {
       const predecessor = comparisonPredecessors.get(log.id);
@@ -10911,220 +11278,181 @@ 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: "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",
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-h-screen bg-[#070809] text-foreground", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mx-auto grid min-h-screen max-w-[1920px] grid-cols-1 lg:grid-cols-[340px_minmax(0,1fr)] xl:grid-cols-[360px_minmax(0,1fr)]", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("aside", { className: "border-b border-border bg-[#090a0c] lg:sticky lg:top-0 lg:h-screen lg:overflow-y-auto lg:border-b-0 lg:border-r", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 p-4", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(BrandHeader, { compact: true, crabEntrancePhase }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-3 gap-2 border-y border-border/70 py-3", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-lg font-semibold text-foreground", children: logs.length }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] uppercase text-muted-foreground", children: "Requests" })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-lg font-semibold text-foreground", children: formatTokens(hasSessionContext ? sessionContextTotalIn : totalIn) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] uppercase text-muted-foreground", children: "Input" })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-lg font-semibold text-foreground", children: formatTokens(hasSessionContext ? sessionContextTotalOut : totalOut) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] uppercase text-muted-foreground", children: "Output" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] font-semibold uppercase tracking-normal text-muted-foreground", children: "Workspace" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-md border border-border bg-[#0c0d0f] px-3 py-2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
               {
-                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
-                    );
-                  }) })
-                ]
+                className: "font-mono text-xs font-semibold text-purple-300",
+                title: activeScopeLabel,
+                children: activeScopeLabel
               }
             ),
-            /* @__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: "Agent 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("span", { className: "max-w-[calc(100vw-7rem)] text-sm font-semibold text-muted-foreground", children: "Local First. Evidence First." }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(McpReadyBadge, {})
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "justify-self-end flex items-center gap-1", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(GroupsDialog, {}),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsDialog, {})
-        ] })
-      ] }),
-      hasSessionContext && sessionContextScope !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(
-        SessionContextBar,
-        {
-          label: sessionContextScope.label,
-          logs: sessionContextLogs,
-          totalIn: sessionContextTotalIn,
-          totalOut: sessionContextTotalOut,
-          timeDisplayFormat,
-          contextSummary: sessionContextSummary,
-          showBackLink: sessionContextScope.showBackLink
-        }
-      ),
-      hasSessionContext && pinnedSessionId !== void 0 && sessionMemberships.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(SessionMembershipPanel, { memberships: sessionMemberships }),
-      /* @__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: "mt-1 text-[11px] text-muted-foreground", children: isPinnedSessionPage ? "Session workspace" : "Live workspace" })
           ] })
         ] }),
-        /* @__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))
+        hasSessionContext && sessionContextScope !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          SessionContextBar,
+          {
+            label: sessionContextScope.label,
+            logs: sessionContextLogs,
+            totalIn: sessionContextTotalIn,
+            totalOut: sessionContextTotalOut,
+            timeDisplayFormat,
+            contextSummary: sessionContextSummary,
+            showBackLink: sessionContextScope.showBackLink
+          }
+        ),
+        hasSessionContext && pinnedSessionId !== void 0 && sessionMemberships.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(SessionMembershipPanel, { memberships: sessionMemberships }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[10px] font-semibold uppercase tracking-normal text-muted-foreground", children: "Filters" }),
+          !hideSessionFilter && /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { value: selectedSession, onValueChange: onSessionChange, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "h-9 w-full 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: "h-9 w-full 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("main", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sticky top-0 z-30 border-b border-border bg-[#08090b]/95 px-4 py-3 shadow-[0_12px_40px_rgba(0,0,0,0.24)] backdrop-blur lg:px-5", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-[180px] flex-1", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm font-semibold text-foreground", children: "Logs" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-0.5 font-mono text-[11px] text-muted-foreground", children: activeScopeLabel })
+            ] }),
+            exportActionVisibility.redacted && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  void handleExport("redacted");
+                },
+                disabled: exporting !== null,
+                className: "inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
+                title: "Export redacted logs as JSON ZIP",
+                children: exporting === "redacted" ? /* @__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" })
+                ] })
+              }
+            ),
+            exportActionVisibility.raw && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  void handleExport("raw");
+                },
+                disabled: exporting !== null,
+                className: "inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
+                title: "Export raw logs without redaction",
+                children: exporting === "raw" ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Exporting..." }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(FileBraces, { className: "size-3.5" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Raw" })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: onClearAll,
+                className: "inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                title: "Clear all logs",
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "size-3.5" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Clear" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(LogPaginationBar, { logs, pagination, embedded: true }),
+          exportError !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: exportError })
         ] }),
-        captureMode === "full" ? /* @__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",
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-4 py-4 lg:px-5", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SessionOpeningSlate, { stats: slateStats }),
+          logs.length === 0 ? selectedSession !== "__all__" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-16 text-center text-muted-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mx-auto max-w-xl space-y-4 rounded-md border border-border bg-muted/10 px-4 py-8", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-medium", children: isLoading ? "Loading session data..." : "Session not found" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "inline-block max-w-full rounded bg-muted px-3 py-1 font-mono text-xs break-all", children: truncateSessionId(selectedSession) }),
+            sessionMemberships.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SessionMembershipPanel, { memberships: sessionMemberships }) }),
+            !isLoading && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs", children: [
+              "This session may have been cleared or never existed.",
+              " ",
+              hideSessionFilter ? /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: "/", className: "underline transition-colors hover:text-foreground", children: "Back to all sessions" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onSessionChange("__all__"),
+                  className: "underline transition-colors hover:text-foreground",
+                  children: "Show all sessions"
+                }
+              )
+            ] })
+          ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-16 text-center text-muted-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mx-auto max-w-2xl space-y-4 rounded-md border border-border bg-muted/10 px-4 py-8", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm", children: "No requests captured yet." }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(CopyableCommand, { command: "ANTHROPIC_BASE_URL=http://localhost:25947/proxy <your-tool>" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(CopyableCommand, { command: "OPENAI_BASE_URL=http://localhost:25947/proxy <your-tool>" })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mx-auto max-w-xl text-xs leading-relaxed text-muted-foreground", children: "Container note: if your AI tool runs in a different container or host than Agent Inspector, replace localhost with an address reachable from that tool and verify the network/firewall path." })
+          ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "div",
             {
-              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"
+              ref: logListWrapperRef,
+              tabIndex: 0,
+              className: "flex flex-col gap-2 focus:outline-none",
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: logListRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  ConversationGroupList,
+                  {
+                    groups,
+                    viewMode,
+                    strip,
+                    slowResponseThresholdSeconds,
+                    cacheTrends,
+                    onCompareWithPrevious: handleCompareWithPrevious,
+                    comparisonPredecessors,
+                    onClearGroup,
+                    standalone: groups.length === 1,
+                    hasPinnedSessionContext: hasSessionContext,
+                    timeDisplayFormat
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(LogPaginationBar, { logs, pagination }) })
+              ]
             }
           )
-        ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-8 items-center rounded-md border border-border bg-muted px-3 text-xs text-foreground", children: "Simple" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1" }),
-        !hasSessionContext && /* @__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` : ""
-        ] }),
-        exportActionVisibility.redacted && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              void handleExport("redacted");
-            },
-            disabled: exporting !== null,
-            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 redacted logs as JSON ZIP",
-            children: exporting === "redacted" ? /* @__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" })
-            ] })
-          }
-        ),
-        exportActionVisibility.raw && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              void handleExport("raw");
-            },
-            disabled: exporting !== null,
-            className: "h-8 px-2.5 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 raw logs without redaction",
-            children: exporting === "raw" ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Exporting..." }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(FileBraces, { className: "size-3.5" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Raw" })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: onClearAll,
-            className: "h-8 px-3 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer inline-flex items-center gap-1.5 rounded-md hover:bg-muted",
-            title: "Clear all logs",
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "size-3.5" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Clear" })
-            ]
-          }
-        )
-      ] }),
-      exportError !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-4 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: exportError })
-    ] }),
-    /* @__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: isLoading ? "Loading session data..." : "Session not found" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs font-mono bg-muted px-3 py-1 rounded inline-block max-w-[500px] break-all", children: truncateSessionId(selectedSession) }),
-      sessionMemberships.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mx-auto max-w-3xl text-left", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SessionMembershipPanel, { memberships: sessionMemberships }) }),
-      !isLoading && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs", children: [
-        "This session may have been cleared or never existed.",
-        " ",
-        hideSessionFilter ? /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: "/", className: "underline hover:text-foreground transition-colors", children: "Back to all sessions" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => onSessionChange("__all__"),
-            className: "underline hover:text-foreground transition-colors",
-            children: "Show all sessions"
-          }
-        )
+        ] })
       ] })
-    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center text-muted-foreground py-16 space-y-4", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm", children: "No requests captured yet." }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs", children: "Route AI coding tools through the proxy:" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CopyableCommand, { command: "ANTHROPIC_BASE_URL=http://localhost:25947/proxy <your-tool>" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CopyableCommand, { command: "OPENAI_BASE_URL=http://localhost:25947/proxy <your-tool>" })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mx-auto max-w-xl text-xs leading-relaxed text-muted-foreground", children: "Container note: if your AI tool runs in a different container or host than Agent Inspector, replace localhost with an address reachable from that tool and verify the network/firewall path." })
-    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "div",
-      {
-        ref: logListWrapperRef,
-        tabIndex: 0,
-        className: "flex flex-col gap-2 focus:outline-none",
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: logListRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          ConversationGroupList,
-          {
-            groups,
-            viewMode,
-            strip,
-            slowResponseThresholdSeconds,
-            cacheTrends,
-            onCompareWithPrevious: handleCompareWithPrevious,
-            comparisonPredecessors,
-            onClearGroup,
-            standalone: groups.length === 1,
-            hasPinnedSessionContext: hasSessionContext,
-            timeDisplayFormat
-          }
-        ) })
-      }
-    ) }),
+    ] }),
     comparePair !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntimeExports.jsx(LazyCompareDrawer, { left: comparePair[0], right: comparePair[1], onClose: closeCompare }) })
   ] });
 }
@@ -11138,6 +11466,15 @@ const SSEUpdateSchema = union([
     log: CapturedLogSchema
   })
 ]);
+const LogCursorPageSchema = object({
+  logs: array(CapturedLogSchema),
+  total: number().int().nonnegative(),
+  limit: number().int().positive(),
+  hasOlder: boolean(),
+  hasNewer: boolean(),
+  oldestLogId: number().int().positive().nullable(),
+  newestLogId: number().int().positive().nullable()
+});
 function buildSessionMembershipEvidence(groups, sessionId) {
   const memberships = [];
   for (const group of groups) {
@@ -11183,6 +11520,7 @@ const DEBOUNCE_MS = 50;
 const HASH_SCROLL_ATTEMPTS = 12;
 const HASH_HIGHLIGHT_MS = 1800;
 const MAX_CLIENT_LOGS = 500;
+const SESSION_PAGE_LIMIT = 100;
 function buildLogsStreamUrl(sessionId) {
   const params = new URLSearchParams();
   if (sessionId !== void 0) {
@@ -11192,6 +11530,26 @@ function buildLogsStreamUrl(sessionId) {
   const query = params.toString();
   return query.length > 0 ? `/api/logs/stream?${query}` : "/api/logs/stream";
 }
+function buildSessionLogsPageUrl(sessionId, request) {
+  const params = new URLSearchParams({
+    cursor: "1",
+    compact: "1",
+    limit: String(SESSION_PAGE_LIMIT),
+    sessionId
+  });
+  switch (request.kind) {
+    case "oldest":
+      params.set("anchor", "oldest");
+      break;
+    case "older":
+      params.set("beforeLogId", String(request.beforeLogId));
+      break;
+    case "newer":
+      params.set("afterLogId", String(request.afterLogId));
+      break;
+  }
+  return `/api/logs?${params.toString()}`;
+}
 function buildLogIndex(logs) {
   const idx = /* @__PURE__ */ new Map();
   for (let i = 0; i < logs.length; i++) {
@@ -11210,13 +11568,15 @@ function ProxyViewerContainer({
   const [allLogs, setAllLogs] = reactExports.useState([]);
   const [selectedSession, setSelectedSession] = reactExports.useState(initialSessionId ?? "__all__");
   const [selectedModel, setSelectedModel] = reactExports.useState("__all__");
-  const [viewMode, setViewMode] = reactExports.useState("simple");
   const [error, setError] = reactExports.useState(null);
   const [streamInitialized, setStreamInitialized] = reactExports.useState(initialSessionId === void 0);
+  const [logPage, setLogPage] = reactExports.useState(null);
+  const [sessionPageLoading, setSessionPageLoading] = reactExports.useState(initialSessionId !== void 0);
   const [sessionMemberships, setSessionMemberships] = reactExports.useState([]);
   const eventSourceRef = reactExports.useRef(null);
   const reconnectTimeoutRef = reactExports.useRef(null);
   const handledHashRef = reactExports.useRef(null);
+  const sessionPageRequestIdRef = reactExports.useRef(0);
   const logIndexRef = reactExports.useRef(/* @__PURE__ */ new Map());
   const pendingUpdatesRef = reactExports.useRef([]);
   const flushTimerRef = reactExports.useRef(null);
@@ -11301,6 +11661,32 @@ function ProxyViewerContainer({
       reconnectTimeoutRef.current = setTimeout(connectSSE, 3e3);
     };
   }, [initialSessionId, scheduleUpdate]);
+  const loadSessionPage = reactExports.useCallback(
+    (request) => {
+      if (initialSessionId === void 0) return;
+      const requestId = sessionPageRequestIdRef.current + 1;
+      sessionPageRequestIdRef.current = requestId;
+      setSessionPageLoading(true);
+      setError(null);
+      void fetchJson(buildSessionLogsPageUrl(initialSessionId, request), LogCursorPageSchema).then((page) => {
+        if (sessionPageRequestIdRef.current !== requestId) return;
+        const nextLogs = page.logs;
+        logIndexRef.current = buildLogIndex(nextLogs);
+        setAllLogs(nextLogs);
+        setLogPage(page);
+        setSelectedSession(initialSessionId);
+        setSessionPageLoading(false);
+        setError(null);
+      }).catch((err) => {
+        if (sessionPageRequestIdRef.current !== requestId) return;
+        setAllLogs([]);
+        setLogPage(null);
+        setSessionPageLoading(false);
+        setError(err instanceof Error ? err.message : "Failed to load session logs");
+      });
+    },
+    [initialSessionId]
+  );
   reactExports.useEffect(() => {
     if (initialSessionId === void 0) {
       setSessionMemberships([]);
@@ -11323,6 +11709,11 @@ function ProxyViewerContainer({
     };
   }, [initialSessionId]);
   reactExports.useEffect(() => {
+    if (initialSessionId === void 0) return;
+    loadSessionPage({ kind: "newest" });
+  }, [initialSessionId, loadSessionPage]);
+  reactExports.useEffect(() => {
+    if (initialSessionId !== void 0) return void 0;
     connectSSE();
     return () => {
       if (eventSourceRef.current) {
@@ -11338,7 +11729,7 @@ function ProxyViewerContainer({
         flushTimerRef.current = null;
       }
     };
-  }, [connectSSE]);
+  }, [connectSSE, initialSessionId]);
   reactExports.useEffect(() => {
     const hash = window.location.hash;
     if (!hash.startsWith("#log-")) return;
@@ -11437,6 +11828,49 @@ function ProxyViewerContainer({
     })();
   }, []);
   const { strip, captureMode, slowResponseThresholdSeconds, timeDisplayFormat } = useStripConfig();
+  const viewMode = captureMode;
+  const loadOldestPage = reactExports.useCallback(() => {
+    loadSessionPage({ kind: "oldest" });
+  }, [loadSessionPage]);
+  const loadNewestPage = reactExports.useCallback(() => {
+    loadSessionPage({ kind: "newest" });
+  }, [loadSessionPage]);
+  const loadOlderPage = reactExports.useCallback(() => {
+    const firstLog = allLogs[0];
+    const beforeLogId = logPage?.oldestLogId ?? firstLog?.id ?? null;
+    if (beforeLogId === null) return;
+    loadSessionPage({ kind: "older", beforeLogId });
+  }, [allLogs, loadSessionPage, logPage]);
+  const loadNewerPage = reactExports.useCallback(() => {
+    const lastLog = allLogs[allLogs.length - 1];
+    const afterLogId = logPage?.newestLogId ?? lastLog?.id ?? null;
+    if (afterLogId === null) return;
+    loadSessionPage({ kind: "newer", afterLogId });
+  }, [allLogs, loadSessionPage, logPage]);
+  const pagination = reactExports.useMemo(() => {
+    if (initialSessionId === void 0) return void 0;
+    return {
+      isLoading: sessionPageLoading,
+      total: logPage?.total ?? null,
+      pageSize: logPage?.limit ?? SESSION_PAGE_LIMIT,
+      hasOlder: logPage?.hasOlder ?? false,
+      hasNewer: logPage?.hasNewer ?? false,
+      oldestLogId: logPage?.oldestLogId ?? null,
+      newestLogId: logPage?.newestLogId ?? null,
+      onOldest: loadOldestPage,
+      onOlder: loadOlderPage,
+      onNewer: loadNewerPage,
+      onNewest: loadNewestPage
+    };
+  }, [
+    initialSessionId,
+    loadNewestPage,
+    loadNewerPage,
+    loadOlderPage,
+    loadOldestPage,
+    logPage,
+    sessionPageLoading
+  ]);
   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(OnboardingBanner, {}),
@@ -11452,10 +11886,10 @@ function ProxyViewerContainer({
         onModelChange: setSelectedModel,
         onClearAll: handleClearAll,
         onClearGroup: handleClearGroup,
-        isLoading: initialSessionId !== void 0 && !streamInitialized,
+        isLoading: initialSessionId === void 0 ? !streamInitialized : sessionPageLoading,
+        pagination,
         sessionMemberships,
         viewMode,
-        onViewModeChange: setViewMode,
         captureMode,
         strip,
         slowResponseThresholdSeconds,