@tonyclaw/agent-inspector 3.0.14 → 3.0.16

package/.output/server/_ssr/{ProxyViewerContainer-C62eZnva.mjs → ProxyViewerContainer-BgXewlIr.mjs}

@@ -1,5 +1,5 @@
 import { r as reactExports, j as jsxRuntimeExports, a as React } from "../_libs/react.mjs";
-import { 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, p as packageJson, P as ProviderConfigSchema, i as apiFormatForPath, n as DeleteInspectorGroupsResponseSchema, o as GroupEvidenceExportResultSchema, q as DeleteInspectorGroupResponseSchema, l as AlertSummarySchema, m as AlertListResponseSchema, I as InspectorGroupsListResponseSchema, G as GroupEvidenceReadResponseSchema, z as createPendingProviderTestResults, B as ProviderTestResultsSchema, E as createFailedProviderTestResults, M as MAX_SLOW_RESPONSE_THRESHOLD_SECONDS, F as MAX_PROVIDER_TEST_TIMEOUT_SECONDS, T as TimeDisplayFormatSchema, t as maskApiKey, v as PATH_V1_MESSAGES, w as PATH_V1_CHAT_COMPLETIONS, x as PATH_V1_RESPONSES, r as providerHasContextMetadata, f as parseOpenAIResponse, g as parseOpenAIResponsesResponse, O as OpenAIRequestSchema, h as OpenAIResponsesRequestSchema, A as AnthropicResponseSchema$1, e as AnthropicRequestSchema, s as safeGetOwnProperty, H as resolveProviderContextWindow, j as getSessionPath, u as findProviderModelMetadata, y as previewUpstreamUrl, K as KnowledgeCandidateSchema, J as isPlainRecord, k as stripClaudeCodeBillingHeader, L as LogBodyChunkSchema } from "./router-CZhFVMGN.mjs";
+import { C as CapturedLogSchema, n as DeleteInspectorGroupsResponseSchema, 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, p as packageJson, P as ProviderConfigSchema, i as apiFormatForPath, o as GroupEvidenceExportResultSchema, q as DeleteInspectorGroupResponseSchema, l as AlertSummarySchema, m as AlertListResponseSchema, I as InspectorGroupsListResponseSchema, G as GroupEvidenceReadResponseSchema, z as createPendingProviderTestResults, B as ProviderTestResultsSchema, E as createFailedProviderTestResults, M as MAX_SLOW_RESPONSE_THRESHOLD_SECONDS, F as MAX_PROVIDER_TEST_TIMEOUT_SECONDS, T as TimeDisplayFormatSchema, t as maskApiKey, v as PATH_V1_MESSAGES, w as PATH_V1_CHAT_COMPLETIONS, x as PATH_V1_RESPONSES, r as providerHasContextMetadata, f as parseOpenAIResponse, g as parseOpenAIResponsesResponse, O as OpenAIRequestSchema, h as OpenAIResponsesRequestSchema, A as AnthropicResponseSchema$1, e as AnthropicRequestSchema, s as safeGetOwnProperty, H as resolveProviderContextWindow, j as getSessionPath, u as findProviderModelMetadata, y as previewUpstreamUrl, K as KnowledgeCandidateSchema, J as isPlainRecord, k as stripClaudeCodeBillingHeader, L as LogBodyChunkSchema } from "./router-BfQ0QsD5.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";
@@ -9,7 +9,7 @@ import { c as cva } from "../_libs/class-variance-authority.mjs";
 import { u as useWindowVirtualizer, a as useVirtualizer } from "../_libs/tanstack__react-virtual.mjs";
 import { d as diffJson, a as diffLines } from "../_libs/diff.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 { T as TriangleAlert, C as CircleCheck, X, I as Info, a as ChevronDown, b as Check, R as RefreshCw, c as Trash2, S as Search, U as Upload, D as Download, F as FileBraces, P as Plus, A as ArrowLeft, d as ChevronUp, e as Copy, f as ChevronsLeft, g as ChevronLeft, h as ChevronRight, i as ChevronsRight, j as Clapperboard, k as Flag, l as Siren, m as Timer, G as Gauge, L as LoaderCircle, n as Layers, o as FlaskConical, p as Sparkles, q as Activity, B as Beaker, N as Network, r as Terminal, s as Settings, M as Monitor, t as Rocket, u as PackageCheck, H as History, v as Scan, w as CircleAlert, x as ArrowUpRight, y as ArrowDownRight, z as Cpu, E as FolderOpen, J as Bell, K as Clock3, O as ShieldAlert, Q as EyeOff, V as Eye, W as ExternalLink, Y as Clock, Z as RotateCw, _ as Pencil, $ as MessageSquare, a0 as Zap, a1 as Wrench, a2 as Brain, a3 as CircleCheckBig, a4 as Minus, a5 as CircleQuestionMark, a6 as Server, a7 as Lock, a8 as Wifi, a9 as WifiOff, aa as CircleX, ab as ShieldCheck, ac as Save, ad as FileSearch, ae as CloudUpload, af as OctagonAlert, ag as Radio, ah as Globe, ai as FileTerminal, aj as ChevronsUp, ak as ChevronsDown, al as FileDiff, am as RotateCcw, an as GitCompareArrows, ao as ArrowUp, ap as ArrowDown, aq as Ellipsis, ar as CodeXml, as as Blocks, at as MousePointerClick, au as FileText, av as Rows3, aw as Columns2 } from "../_libs/lucide-react.mjs";
+import { T as TriangleAlert, C as CircleCheck, X, I as Info, a as ChevronDown, b as Check, P as PanelRightOpen, c as PanelRightClose, S as Search, U as Upload, D as Download, F as FileBraces, R as RefreshCw, d as Trash2, e as Plus, A as ArrowLeft, f as ChevronUp, g as Copy, h as ChevronsLeft, i as ChevronLeft, j as ChevronRight, k as ChevronsRight, l as Clapperboard, m as Flag, n as Siren, o as Timer, G as Gauge, L as LoaderCircle, p as Layers, q as FlaskConical, r as Sparkles, s as Activity, B as Beaker, N as Network, t as Terminal, u as Settings, M as Monitor, v as Rocket, w as PackageCheck, H as History, x as Scan, y as CircleAlert, z as ArrowUpRight, E as ArrowDownRight, J as Cpu, K as FolderOpen, O as Bell, Q as Clock3, V as ShieldAlert, W as EyeOff, Y as Eye, Z as ExternalLink, _ as Clock, $ as RotateCw, a0 as Pencil, a1 as MessageSquare, a2 as Zap, a3 as Wrench, a4 as Brain, a5 as CircleCheckBig, a6 as Minus, a7 as CircleQuestionMark, a8 as Server, a9 as Lock, aa as Wifi, ab as WifiOff, ac as CircleX, ad as ShieldCheck, ae as Save, af as FileSearch, ag as CloudUpload, ah as OctagonAlert, ai as Radio, aj as Globe, ak as FileTerminal, al as ChevronsUp, am as ChevronsDown, an as FileDiff, ao as RotateCcw, ap as GitCompareArrows, aq as ArrowUp, ar as ArrowDown, as as Ellipsis, at as CodeXml, au as Blocks, av as MousePointerClick, aw as FileText, ax as Rows3, ay as Columns2 } from "../_libs/lucide-react.mjs";
 import { u as union, d as object, a as array, l as literal, n as number, c as boolean, b as string, _ as _enum } from "../_libs/zod.mjs";
 import { S as Slot } from "../_libs/radix-ui__react-slot.mjs";
 import { R as Root2$1, L as List, T as Trigger$2, C as Content$1 } from "../_libs/radix-ui__react-tabs.mjs";
@@ -2546,27 +2546,27 @@ function useCopyFeedback(text) {
   return { copied, copy };
 }
 const LazyCompareDrawer = reactExports.lazy(
-  () => import("./CompareDrawer-YMLJNxXR.mjs").then((m) => ({ default: m.CompareDrawer }))
+  () => import("./CompareDrawer-Ckcx1RVu.mjs").then((m) => ({ default: m.CompareDrawer }))
 );
 const LazyReplayDialog = reactExports.lazy(
-  () => import("./ReplayDialog-NmN7Ukjo.mjs").then((m) => ({ default: m.ReplayDialog }))
+  () => import("./ReplayDialog-wx3nDtZn.mjs").then((m) => ({ default: m.ReplayDialog }))
 );
 const LazyRequestAnatomy = reactExports.lazy(
-  () => import("./RequestAnatomy-Dawm2qxe.mjs").then((m) => ({ default: m.RequestAnatomy }))
+  () => import("./RequestAnatomy-DN80zt0G.mjs").then((m) => ({ default: m.RequestAnatomy }))
 );
 const LazyResponseView = reactExports.lazy(
-  () => import("./ResponseView-BHyAY83t.mjs").then((m) => ({ default: m.ResponseView }))
+  () => import("./ResponseView-DD7rTu_l.mjs").then((m) => ({ default: m.ResponseView }))
 );
 const LazyStreamingChunkSequence = reactExports.lazy(
-  () => import("./StreamingChunkSequence-C4qgcJbg.mjs").then((m) => ({
+  () => import("./StreamingChunkSequence-DAgz6Vvw.mjs").then((m) => ({
     default: m.StreamingChunkSequence
   }))
 );
 const LazyJsonViewer = reactExports.lazy(
-  () => import("./json-viewer-u67BASf8.mjs").then((m) => ({ default: m.JsonViewer }))
+  () => import("./json-viewer-N2cuzGWR.mjs").then((m) => ({ default: m.JsonViewer }))
 );
 const LazyJsonViewerFromString = reactExports.lazy(
-  () => import("./json-viewer-u67BASf8.mjs").then((m) => ({ default: m.JsonViewerFromString }))
+  () => import("./json-viewer-N2cuzGWR.mjs").then((m) => ({ default: m.JsonViewerFromString }))
 );
 const HIGHLIGHT_DURATION_MS = 1200;
 const MAX_HIGHLIGHT_ATTEMPTS = 12;
@@ -4641,30 +4641,51 @@ function ThreadConnector({
     ) })
   ] });
 }
+const VISIBLE_TOOL_LIMIT = 4;
 function ToolTraceEventChip({ event }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "button",
     {
       type: "button",
-      className: "inline-flex min-w-0 items-center gap-1.5 rounded-md bg-white/[0.035] px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-sky-400/[0.08] hover:text-sky-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      className: "inline-flex h-6 max-w-[11rem] min-w-0 items-center gap-1 rounded-md bg-white/[0.028] px-1.5 text-[11px] text-muted-foreground transition-colors hover:bg-sky-400/[0.08] hover:text-sky-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
       onClick: () => dispatchLogFocusRequest({
         logId: event.logId,
         tab: "response",
         toolCallIndex: event.index
       }),
       "aria-label": `Open response tool call ${event.name}`,
-      title: `Open ${event.name} in Response`,
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Wrench, { className: "size-3.5 shrink-0 text-sky-400/70" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Wrench, { className: "size-3 shrink-0 text-sky-400/65" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "min-w-0 truncate font-mono font-semibold", children: event.name })
       ]
     },
     event.id
   );
 }
-function ToolTraceEvents({ events }) {
-  if (events.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mx-3 mb-2 flex flex-wrap gap-1.5", children: events.map((event) => /* @__PURE__ */ jsxRuntimeExports.jsx(ToolTraceEventChip, { event }, event.id)) });
+function ToolTraceEvents({
+  events,
+  warnings = []
+}) {
+  if (events.length === 0 && warnings.length === 0) return null;
+  const visibleEvents = events.slice(0, VISIBLE_TOOL_LIMIT);
+  const hiddenCount = Math.max(0, events.length - visibleEvents.length);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mx-3 mb-2 flex min-w-0 items-center gap-1.5 overflow-hidden rounded-md bg-black/[0.10] px-2 py-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.025)]", children: [
+    events.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex h-6 shrink-0 items-center gap-1 rounded-md px-1.5 font-mono text-[10px] font-semibold uppercase tracking-[0.12em] text-sky-300/70", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Wrench, { className: "size-3" }),
+      events.length
+    ] }),
+    warnings.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex h-6 shrink-0 items-center gap-1 rounded-md border border-amber-300/20 bg-amber-300/[0.08] px-1.5 font-mono text-[10px] font-semibold text-amber-100", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleAlert, { className: "size-3" }),
+      warnings.length
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden", children: [
+      visibleEvents.map((event) => /* @__PURE__ */ jsxRuntimeExports.jsx(ToolTraceEventChip, { event }, event.id)),
+      hiddenCount > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex h-6 shrink-0 items-center rounded-md bg-white/[0.025] px-1.5 font-mono text-[11px] font-semibold text-muted-foreground", children: [
+        "+",
+        hiddenCount
+      ] })
+    ] })
+  ] });
 }
 const PREVIEW_LIMIT = 180;
 const toolTraceCache = /* @__PURE__ */ new WeakMap();
@@ -5196,7 +5217,13 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
                   onCompareWithPrevious: comparisonPredecessors.has(log.id) ? onCompareWithPrevious : void 0
                 }
               ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(ToolTraceEvents, { events: toolEventsByLogId.get(log.id) ?? [] })
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                ToolTraceEvents,
+                {
+                  events: toolEventsByLogId.get(log.id) ?? [],
+                  warnings: log.warnings ?? []
+                }
+              )
             ] })
           ] }, log.id);
         })
@@ -14215,6 +14242,256 @@ function BrandHeader({
     ] })
   ] });
 }
+const FLOATING_LOGO_SIZE = 56;
+const FLOATING_LOGO_MARGIN = 14;
+const FLOATING_LOGO_MIN_DRIFT_MS = 5200;
+const FLOATING_LOGO_DRIFT_WINDOW_MS = 2400;
+const FLOATING_LOGO_MIN_STEP = 72;
+const FLOATING_LOGO_MAX_STEP = 156;
+const DETAILS_PANEL_COLLAPSED_STORAGE_KEY = "agent-inspector.detailsPanelCollapsed";
+function readStoredDetailsPanelCollapsed() {
+  if (typeof window === "undefined") return true;
+  const stored = window.localStorage.getItem(DETAILS_PANEL_COLLAPSED_STORAGE_KEY);
+  return stored === null || stored === "1";
+}
+function clampFloatingLogoPosition(position) {
+  const maxX = Math.max(
+    FLOATING_LOGO_MARGIN,
+    window.innerWidth - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN
+  );
+  const maxY = Math.max(
+    FLOATING_LOGO_MARGIN,
+    window.innerHeight - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN
+  );
+  return {
+    x: Math.min(Math.max(position.x, FLOATING_LOGO_MARGIN), maxX),
+    y: Math.min(Math.max(position.y, FLOATING_LOGO_MARGIN), maxY)
+  };
+}
+function snapFloatingLogoToEdge(position) {
+  const clamped = clampFloatingLogoPosition(position);
+  const maxX = Math.max(
+    FLOATING_LOGO_MARGIN,
+    window.innerWidth - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN
+  );
+  const maxY = Math.max(
+    FLOATING_LOGO_MARGIN,
+    window.innerHeight - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN
+  );
+  const leftDistance = clamped.x - FLOATING_LOGO_MARGIN;
+  const rightDistance = maxX - clamped.x;
+  const topDistance = clamped.y - FLOATING_LOGO_MARGIN;
+  const bottomDistance = maxY - clamped.y;
+  const nearestDistance = Math.min(leftDistance, rightDistance, topDistance, bottomDistance);
+  if (nearestDistance === leftDistance) return { x: FLOATING_LOGO_MARGIN, y: clamped.y };
+  if (nearestDistance === rightDistance) return { x: maxX, y: clamped.y };
+  if (nearestDistance === topDistance) return { x: clamped.x, y: FLOATING_LOGO_MARGIN };
+  return { x: clamped.x, y: maxY };
+}
+function randomFloatingLogoEdgePosition() {
+  const maxX = Math.max(
+    FLOATING_LOGO_MARGIN,
+    window.innerWidth - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN
+  );
+  const maxY = Math.max(
+    FLOATING_LOGO_MARGIN,
+    window.innerHeight - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN
+  );
+  const randomX = FLOATING_LOGO_MARGIN + Math.random() * (maxX - FLOATING_LOGO_MARGIN);
+  const randomY = FLOATING_LOGO_MARGIN + Math.random() * (maxY - FLOATING_LOGO_MARGIN);
+  const edgeIndex = Math.floor(Math.random() * 4);
+  switch (edgeIndex) {
+    case 0:
+      return { x: FLOATING_LOGO_MARGIN, y: randomY };
+    case 1:
+      return { x: maxX, y: randomY };
+    case 2:
+      return { x: randomX, y: FLOATING_LOGO_MARGIN };
+    case 3:
+      return { x: randomX, y: maxY };
+    default:
+      return { x: maxX, y: FLOATING_LOGO_MARGIN };
+  }
+}
+function nearestFloatingLogoEdge(position) {
+  const clamped = clampFloatingLogoPosition(position);
+  const maxX = Math.max(
+    FLOATING_LOGO_MARGIN,
+    window.innerWidth - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN
+  );
+  const maxY = Math.max(
+    FLOATING_LOGO_MARGIN,
+    window.innerHeight - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN
+  );
+  const distances = [
+    { edge: "left", distance: clamped.x - FLOATING_LOGO_MARGIN },
+    { edge: "right", distance: maxX - clamped.x },
+    { edge: "top", distance: clamped.y - FLOATING_LOGO_MARGIN },
+    { edge: "bottom", distance: maxY - clamped.y }
+  ];
+  return distances.reduce((best, current) => current.distance < best.distance ? current : best).edge;
+}
+function nextFloatingLogoWalkingPosition(position) {
+  const clamped = snapFloatingLogoToEdge(position);
+  const maxX = Math.max(
+    FLOATING_LOGO_MARGIN,
+    window.innerWidth - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN
+  );
+  const maxY = Math.max(
+    FLOATING_LOGO_MARGIN,
+    window.innerHeight - FLOATING_LOGO_SIZE - FLOATING_LOGO_MARGIN
+  );
+  const step = FLOATING_LOGO_MIN_STEP + Math.random() * (FLOATING_LOGO_MAX_STEP - FLOATING_LOGO_MIN_STEP);
+  const direction = Math.random() > 0.5 ? 1 : -1;
+  const edge = nearestFloatingLogoEdge(clamped);
+  switch (edge) {
+    case "left": {
+      const nextY = clamped.y + step * direction;
+      if (nextY <= FLOATING_LOGO_MARGIN)
+        return { x: FLOATING_LOGO_MARGIN, y: FLOATING_LOGO_MARGIN };
+      if (nextY >= maxY) return { x: FLOATING_LOGO_MARGIN, y: maxY };
+      return { x: FLOATING_LOGO_MARGIN, y: nextY };
+    }
+    case "right": {
+      const nextY = clamped.y + step * direction;
+      if (nextY <= FLOATING_LOGO_MARGIN) return { x: maxX, y: FLOATING_LOGO_MARGIN };
+      if (nextY >= maxY) return { x: maxX, y: maxY };
+      return { x: maxX, y: nextY };
+    }
+    case "top": {
+      const nextX = clamped.x + step * direction;
+      if (nextX <= FLOATING_LOGO_MARGIN)
+        return { x: FLOATING_LOGO_MARGIN, y: FLOATING_LOGO_MARGIN };
+      if (nextX >= maxX) return { x: maxX, y: FLOATING_LOGO_MARGIN };
+      return { x: nextX, y: FLOATING_LOGO_MARGIN };
+    }
+    case "bottom": {
+      const nextX = clamped.x + step * direction;
+      if (nextX <= FLOATING_LOGO_MARGIN) return { x: FLOATING_LOGO_MARGIN, y: maxY };
+      if (nextX >= maxX) return { x: maxX, y: maxY };
+      return { x: nextX, y: maxY };
+    }
+  }
+}
+function FloatingInspectorLogo() {
+  const [position, setPosition] = reactExports.useState({
+    x: FLOATING_LOGO_MARGIN,
+    y: FLOATING_LOGO_MARGIN
+  });
+  const [motionTick, setMotionTick] = reactExports.useState(0);
+  const [dragging, setDragging] = reactExports.useState(false);
+  const dragStateRef = reactExports.useRef(null);
+  reactExports.useEffect(() => {
+    setPosition(randomFloatingLogoEdgePosition());
+  }, []);
+  reactExports.useEffect(() => {
+    if (dragging) return void 0;
+    let timeoutId = null;
+    const scheduleDrift = () => {
+      const delay = FLOATING_LOGO_MIN_DRIFT_MS + Math.random() * FLOATING_LOGO_DRIFT_WINDOW_MS;
+      timeoutId = window.setTimeout(() => {
+        setMotionTick((current) => current + 1);
+        setPosition((current) => nextFloatingLogoWalkingPosition(current));
+        scheduleDrift();
+      }, delay);
+    };
+    scheduleDrift();
+    return () => {
+      if (timeoutId !== null) {
+        window.clearTimeout(timeoutId);
+      }
+    };
+  }, [dragging]);
+  reactExports.useEffect(() => {
+    const handleResize = () => {
+      setPosition((current) => snapFloatingLogoToEdge(current));
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  const handlePointerDown = reactExports.useCallback((event) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    dragStateRef.current = {
+      pointerId: event.pointerId,
+      offsetX: event.clientX - rect.left,
+      offsetY: event.clientY - rect.top
+    };
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setDragging(true);
+  }, []);
+  const handlePointerMove = reactExports.useCallback((event) => {
+    const dragState = dragStateRef.current;
+    if (dragState === null || dragState.pointerId !== event.pointerId) return;
+    setPosition(
+      clampFloatingLogoPosition({
+        x: event.clientX - dragState.offsetX,
+        y: event.clientY - dragState.offsetY
+      })
+    );
+  }, []);
+  const handlePointerUp = reactExports.useCallback((event) => {
+    const dragState = dragStateRef.current;
+    if (dragState === null || dragState.pointerId !== event.pointerId) return;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    dragStateRef.current = null;
+    setDragging(false);
+    setPosition((current) => snapFloatingLogoToEdge(current));
+  }, []);
+  const style = reactExports.useMemo(
+    () => ({
+      transform: `translate3d(${position.x}px, ${position.y}px, 0) rotate(${motionTick % 2 === 0 ? "-4deg" : "5deg"}) scale(${dragging ? "1.08" : "1"})`,
+      transition: dragging ? "none" : "transform 4800ms cubic-bezier(0.33, 1, 0.68, 1)",
+      touchAction: "none"
+    }),
+    [dragging, motionTick, position.x, position.y]
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "fixed left-0 top-0 z-40 flex size-14 items-center justify-center rounded-full bg-transparent text-foreground outline-none transition-[filter,opacity] duration-200 hover:opacity-95 hover:drop-shadow-[0_0_24px_rgba(245,158,11,0.36)] focus-visible:ring-1 focus-visible:ring-amber-300/55",
+        dragging ? "cursor-grabbing" : "cursor-grab"
+      ),
+      style,
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerUp,
+      "aria-label": "Floating Inspector logo",
+      title: "Drag Inspector logo",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "span",
+        {
+          className: cn(
+            "relative flex size-12 items-center justify-center",
+            !dragging && "floating-crab-body"
+          ),
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(CrabLogo, { className: "relative z-10 size-11 text-amber-500 drop-shadow-[0_0_15px_rgba(245,158,11,0.30)]" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "pointer-events-none absolute inset-x-0 bottom-0 z-0 flex items-end justify-center gap-1 text-amber-400/80", children: [0, 1, 2, 3, 4, 5].map((leg) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "span",
+              {
+                className: cn(
+                  "floating-crab-leg h-2 w-0.5 rounded-full bg-current shadow-[0_0_7px_rgba(245,158,11,0.24)]",
+                  leg < 3 ? "floating-crab-leg-left" : "floating-crab-leg-right",
+                  dragging && "animate-none"
+                ),
+                style: {
+                  animationDelay: `${leg % 2 === 0 ? 0 : 180}ms`
+                }
+              },
+              leg
+            )) })
+          ]
+        }
+      )
+    }
+  );
+}
 function SessionContextLogButton({ label, logId }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "button",
@@ -14537,8 +14814,9 @@ function ProxyViewer({
   const [importStatus, setImportStatus] = reactExports.useState(null);
   const [importError, setImportError] = reactExports.useState(null);
   const [deleteDialogOpen, setDeleteDialogOpen] = reactExports.useState(false);
-  const [deleteStoredData, setDeleteStoredData] = reactExports.useState(false);
   const [deletingCurrentView, setDeletingCurrentView] = reactExports.useState(false);
+  const [detailsPanelCollapsed, setDetailsPanelCollapsed] = reactExports.useState(true);
+  const [detailsPanelStorageLoaded, setDetailsPanelStorageLoaded] = reactExports.useState(false);
   const [comparePair, setComparePair] = reactExports.useState(null);
   const [crabEntrancePhase, setCrabEntrancePhase] = reactExports.useState(
     "hidden"
@@ -14575,6 +14853,17 @@ function ProxyViewer({
       clearTimeout(t2);
     };
   }, []);
+  reactExports.useEffect(() => {
+    setDetailsPanelCollapsed(readStoredDetailsPanelCollapsed());
+    setDetailsPanelStorageLoaded(true);
+  }, []);
+  reactExports.useEffect(() => {
+    if (!detailsPanelStorageLoaded) return;
+    window.localStorage.setItem(
+      DETAILS_PANEL_COLLAPSED_STORAGE_KEY,
+      detailsPanelCollapsed ? "1" : "0"
+    );
+  }, [detailsPanelCollapsed, detailsPanelStorageLoaded]);
   reactExports.useEffect(() => {
     if (pinnedSessionId === void 0) {
       document.title = "Agent Inspector";
@@ -14656,7 +14945,6 @@ function ProxyViewer({
     onClearAll();
   }, [cancelTransientTasks, onClearAll]);
   const handleRequestDeleteCurrentView = reactExports.useCallback(() => {
-    setDeleteStoredData(false);
     setDeleteDialogOpen(true);
   }, []);
   const handleConfirmDeleteCurrentView = reactExports.useCallback(() => {
@@ -14664,13 +14952,9 @@ function ProxyViewer({
     setImportStatus(null);
     setImportError(null);
     setComparePair(null);
-    if (!deleteStoredData || onDeleteCurrentView === void 0) {
-      setDeleteDialogOpen(false);
-      onClearAll();
-      return;
-    }
+    if (onDeleteCurrentView === void 0) return;
     setDeletingCurrentView(true);
-    void onDeleteCurrentView(logs.map((log) => log.id)).then(() => {
+    void onDeleteCurrentView().then(() => {
       setDeleteDialogOpen(false);
     }).catch((err) => {
       const message = err instanceof Error ? err.message : "Failed to delete stored logs";
@@ -14682,7 +14966,7 @@ function ProxyViewer({
     }).finally(() => {
       setDeletingCurrentView(false);
     });
-  }, [cancelTransientTasks, deleteStoredData, logs, onClearAll, onDeleteCurrentView, onNotify]);
+  }, [cancelTransientTasks, onDeleteCurrentView, onNotify]);
   const handleReloadCurrentSession = reactExports.useCallback(() => {
     if (onReloadSession === void 0) return;
     cancelTransientTasks();
@@ -14694,6 +14978,9 @@ function ProxyViewer({
   const closeCompare = reactExports.useCallback(() => {
     setComparePair(null);
   }, []);
+  const toggleDetailsPanelCollapsed = reactExports.useCallback(() => {
+    setDetailsPanelCollapsed((value) => !value);
+  }, []);
   const groups = reactExports.useMemo(() => groupLogsByConversation(logs), [logs]);
   const displayNumberByLogId = reactExports.useMemo(() => buildDisplayNumberByLogId(groups), [groups]);
   const sessionContextScope = reactExports.useMemo(
@@ -14715,6 +15002,9 @@ function ProxyViewer({
   const exportActionVisibility = getExportActionVisibility(captureMode, logs.length);
   const isPinnedSessionPage = pinnedSessionId !== void 0;
   const canClearCurrentView = logs.length > 0;
+  const canDeleteCurrentView = onDeleteCurrentView !== void 0 && (logs.length > 0 || selectedSession !== "__all__");
+  const deleteTargetLabel = selectedSession === "__all__" ? "all sessions" : "this session";
+  const deleteTargetDescription = selectedSession === "__all__" ? "Deletes every stored log, streaming chunk, and session archive entry across all sessions." : "Deletes every stored log, streaming chunk, and session archive entry for this session, including history that is not currently loaded.";
   const reloadSessionLabel = logs.length === 0 ? "Load" : "Reload";
   const sessionInputValue = selectedSession === "__all__" ? "" : selectedSession;
   const sessionSelectValue = selectedSession === "__all__" || sessions.includes(selectedSession) ? selectedSession : "__typed__";
@@ -14752,376 +15042,341 @@ function ProxyViewer({
   );
   const labSessionId = pinnedSessionId !== void 0 ? pinnedSessionId : selectedSession === "__all__" ? null : selectedSession;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-background min-h-screen w-full text-foreground", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid min-h-screen w-full grid-cols-1 lg:grid-cols-[minmax(0,1fr)_340px] xl:grid-cols-[minmax(0,1fr)_360px]", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("aside", { className: "bg-background/95 order-1 border-b border-white/[0.045] lg:sticky lg:top-0 lg:order-2 lg:h-screen lg:overflow-y-auto lg:border-b-0 lg:border-l lg:border-white/[0.055]", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 p-4", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          BrandHeader,
-          {
-            compact: true,
-            crabEntrancePhase,
-            currentSessionId: labSessionId,
-            logCount: logs.length
-          }
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: toggleDetailsPanelCollapsed,
+        className: cn(
+          "group fixed top-1/2 right-3 z-40 inline-flex h-14 w-7 -translate-y-1/2 items-center justify-center rounded-l-md border border-white/[0.08] bg-background/90 text-muted-foreground shadow-[0_12px_34px_rgba(0,0,0,0.26),inset_0_1px_0_rgba(255,255,255,0.06)] backdrop-blur transition-[right,background-color,color,border-color] duration-200 hover:border-white/[0.16] hover:bg-white/[0.07] hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
+          detailsPanelCollapsed ? "right-3" : "lg:right-[326px] xl:right-[346px]"
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(SidebarPanel, { label: "Session", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(SidebarMetric, { label: "Requests", value: logs.length }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(SidebarMetric, { label: "Sessions", value: sessions.length }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              SidebarMetric,
-              {
-                label: "Input",
-                value: formatTokens(hasSessionContext ? sessionContextTotalIn : totalIn)
-              }
-            ),
+        "aria-label": detailsPanelCollapsed ? "Show details panel" : "Hide details panel",
+        title: detailsPanelCollapsed ? "Show details panel" : "Hide details panel",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "absolute left-1 top-2 bottom-2 w-px rounded-full bg-white/[0.16] transition-colors group-hover:bg-white/[0.28]" }),
+          detailsPanelCollapsed ? /* @__PURE__ */ jsxRuntimeExports.jsx(PanelRightOpen, { className: "size-3.5" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(PanelRightClose, { className: "size-3.5" })
+        ]
+      }
+    ),
+    detailsPanelCollapsed && /* @__PURE__ */ jsxRuntimeExports.jsx(FloatingInspectorLogo, {}),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: cn(
+          "grid min-h-screen w-full grid-cols-1",
+          detailsPanelCollapsed ? "lg:grid-cols-[minmax(0,1fr)]" : "lg:grid-cols-[minmax(0,1fr)_340px] xl:grid-cols-[minmax(0,1fr)_360px]"
+        ),
+        children: [
+          !detailsPanelCollapsed && /* @__PURE__ */ jsxRuntimeExports.jsx("aside", { className: "bg-background/95 order-1 border-b border-white/[0.045] lg:sticky lg:top-0 lg:order-2 lg:h-screen lg:overflow-y-auto lg:border-b-0 lg:border-l lg:border-white/[0.055]", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 p-4", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
-              SidebarMetric,
-              {
-                label: "Output",
-                value: formatTokens(hasSessionContext ? sessionContextTotalOut : totalOut)
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2 grid grid-cols-2 gap-2", children: [
-            onReloadSession !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              "button",
+              BrandHeader,
               {
-                type: "button",
-                onClick: handleReloadCurrentSession,
-                disabled: isLoading,
-                className: "bg-white/[0.035] hover:bg-white/[0.065] inline-flex h-8 min-w-0 items-center justify-center gap-1.5 rounded-md px-2 text-xs text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
-                title: "Load stored logs for this session",
-                children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: cn("size-3.5", isLoading && "animate-spin") }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: reloadSessionLabel })
-                ]
+                compact: true,
+                crabEntrancePhase,
+                currentSessionId: labSessionId,
+                logCount: logs.length
               }
             ),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: handleClearCurrentView,
-                disabled: !canClearCurrentView,
-                className: cn(
-                  "bg-white/[0.035] hover:bg-white/[0.065] inline-flex h-8 min-w-0 items-center justify-center gap-1.5 rounded-md px-2 text-xs text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
-                  onReloadSession === void 0 && onDeleteCurrentView === void 0 && "col-span-2"
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(SidebarPanel, { label: "Session", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(SidebarMetric, { label: "Requests", value: logs.length }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(SidebarMetric, { label: "Sessions", value: sessions.length }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  SidebarMetric,
+                  {
+                    label: "Input",
+                    value: formatTokens(hasSessionContext ? sessionContextTotalIn : totalIn)
+                  }
                 ),
-                title: "Clear the current view. Stored logs remain reloadable.",
-                children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "size-3.5" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Clear" })
-                ]
-              }
-            ),
-            onDeleteCurrentView !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: handleRequestDeleteCurrentView,
-                disabled: !canClearCurrentView || deletingCurrentView,
-                className: "bg-red-500/[0.07] hover:bg-red-500/[0.12] inline-flex h-8 min-w-0 items-center justify-center gap-1.5 rounded-md px-2 text-xs text-red-200 shadow-[inset_0_0_0_1px_rgba(248,113,113,0.14)] transition-colors hover:text-red-100 disabled:cursor-not-allowed disabled:opacity-50",
-                title: "Choose whether to delete stored data for the current view.",
-                children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "size-3.5" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Delete" })
-                ]
-              }
-            )
-          ] }),
-          sessionLoadProgress !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 rounded-md bg-black/20 px-2 py-2 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.045)]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SessionLoadProgressBar, { progress: sessionLoadProgress }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(SidebarPanel, { label: "Workspace", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-black/20 rounded-md px-3 py-2 shadow-[inset_0_1px_0_rgba(255,255,255,0.035)]", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "div",
-            {
-              className: "truncate font-mono text-xs font-semibold text-cyan-100",
-              title: activeScopeLabel,
-              children: activeScopeLabel
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1 text-[11px] text-muted-foreground", children: isPinnedSessionPage ? "Session workspace" : "Live workspace" })
-        ] }) }),
-        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.jsx(SidebarPanel, { label: "Filters", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-          !hideSessionFilter && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "input",
-                {
-                  type: "search",
-                  value: sessionInputValue,
-                  onChange: handleSessionInputChange,
-                  placeholder: "Paste session ID",
-                  className: "bg-black/25 hover:bg-white/[0.045] focus-visible:ring-ring h-9 w-full rounded-md px-8 font-mono text-xs text-foreground outline-none shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors placeholder:font-sans placeholder:text-muted-foreground focus-visible:ring-1",
-                  "aria-label": "Filter by session ID",
-                  title: "Filter by exact session ID"
-                }
-              ),
-              sessionInputValue !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => onSessionChange("__all__"),
-                  className: "absolute right-1.5 top-1/2 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-white/[0.06] hover:text-foreground",
-                  "aria-label": "Clear session filter",
-                  title: "Clear session filter",
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "size-3.5" })
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { value: sessionSelectValue, onValueChange: handleSessionSelectChange, children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "bg-black/25 hover:bg-white/[0.045] h-9 w-full border-0 text-xs text-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "All sessions" }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "__all__", children: "All sessions" }),
-                sessionSelectValue === "__typed__" && /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectItem, { value: "__typed__", children: [
-                  "Typed: ",
-                  truncateSessionId(selectedSession)
-                ] }),
-                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: "bg-black/25 hover:bg-white/[0.045] h-9 w-full border-0 text-xs text-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)]", 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: "order-2 min-w-0 lg:order-1", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-background/95 shadow-[0_12px_36px_rgba(0,0,0,0.18),inset_0_-1px_0_rgba(255,255,255,0.045)] sticky top-0 z-30 px-4 py-3 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 })
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  SidebarMetric,
+                  {
+                    label: "Output",
+                    value: formatTokens(hasSessionContext ? sessionContextTotalOut : totalOut)
+                  }
+                )
+              ] }),
+              sessionLoadProgress !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 rounded-md bg-black/20 px-2 py-2 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.045)]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SessionLoadProgressBar, { progress: sessionLoadProgress }) })
             ] }),
-            onImportLogs !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(SidebarPanel, { label: "Workspace", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-black/20 rounded-md px-3 py-2 shadow-[inset_0_1px_0_rgba(255,255,255,0.035)]", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "input",
+                "div",
                 {
-                  ref: importInputRef,
-                  type: "file",
-                  accept: ".zip,.json,.jsonl,application/zip,application/json",
-                  className: "hidden",
-                  onChange: handleImportFileChange
+                  className: "truncate font-mono text-xs font-semibold text-cyan-100",
+                  title: activeScopeLabel,
+                  children: activeScopeLabel
                 }
               ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: handleImportClick,
-                  disabled: importing,
-                  className: "bg-white/[0.035] hover:bg-white/[0.065] inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
-                  title: "Import Agent Inspector export",
-                  children: importing ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Importing..." }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(Upload, { className: "size-3.5" }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Import" })
-                  ] })
-                }
-              )
-            ] }),
-            exportActionVisibility.redacted && /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "button",
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1 text-[11px] text-muted-foreground", children: isPinnedSessionPage ? "Session workspace" : "Live workspace" })
+            ] }) }),
+            hasSessionContext && sessionContextScope !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              SessionContextBar,
               {
-                type: "button",
-                onClick: () => {
-                  void handleExport("redacted");
-                },
-                disabled: exporting !== null,
-                className: "bg-white/[0.035] hover:bg-white/[0.065] inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors 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" })
-                ] })
+                label: sessionContextScope.label,
+                logs: sessionContextLogs,
+                totalIn: sessionContextTotalIn,
+                totalOut: sessionContextTotalOut,
+                timeDisplayFormat,
+                contextSummary: sessionContextSummary,
+                showBackLink: sessionContextScope.showBackLink
               }
             ),
-            exportActionVisibility.raw && /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => {
-                  void handleExport("raw");
-                },
-                disabled: exporting !== null,
-                className: "bg-white/[0.035] hover:bg-white/[0.065] inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-xs text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors 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" })
+            hasSessionContext && pinnedSessionId !== void 0 && sessionMemberships.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(SessionMembershipPanel, { memberships: sessionMemberships }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(SidebarPanel, { label: "Filters", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+              !hideSessionFilter && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "input",
+                    {
+                      type: "search",
+                      value: sessionInputValue,
+                      onChange: handleSessionInputChange,
+                      placeholder: "Paste session ID",
+                      className: "bg-black/25 hover:bg-white/[0.045] focus-visible:ring-ring h-9 w-full rounded-md px-8 font-mono text-xs text-foreground outline-none shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors placeholder:font-sans placeholder:text-muted-foreground focus-visible:ring-1",
+                      "aria-label": "Filter by session ID",
+                      title: "Filter by exact session ID"
+                    }
+                  ),
+                  sessionInputValue !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => onSessionChange("__all__"),
+                      className: "absolute right-1.5 top-1/2 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-white/[0.06] hover:text-foreground",
+                      "aria-label": "Clear session filter",
+                      title: "Clear session filter",
+                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "size-3.5" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { value: sessionSelectValue, onValueChange: handleSessionSelectChange, children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "bg-black/25 hover:bg-white/[0.045] h-9 w-full border-0 text-xs text-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "All sessions" }) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "__all__", children: "All sessions" }),
+                    sessionSelectValue === "__typed__" && /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectItem, { value: "__typed__", children: [
+                      "Typed: ",
+                      truncateSessionId(selectedSession)
+                    ] }),
+                    sessions.map((s) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: s, children: truncateSessionId(s) }, s))
+                  ] })
                 ] })
-              }
-            ),
-            onReloadSession !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: handleReloadCurrentSession,
-                disabled: isLoading,
-                className: "bg-white/[0.035] hover:bg-white/[0.065] inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
-                title: "Reload this session from stored logs",
-                children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: cn("size-3.5", isLoading && "animate-spin") }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: reloadSessionLabel })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: handleClearCurrentView,
-                disabled: !canClearCurrentView,
-                className: "bg-white/[0.035] hover:bg-white/[0.065] inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
-                title: "Clear the current view. Stored logs remain reloadable.",
-                children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "size-3.5" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Clear" })
-                ]
-              }
-            ),
-            onDeleteCurrentView !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: handleRequestDeleteCurrentView,
-                disabled: !canClearCurrentView || deletingCurrentView,
-                className: "bg-red-500/[0.07] hover:bg-red-500/[0.12] inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-red-200 shadow-[inset_0_0_0_1px_rgba(248,113,113,0.14)] transition-colors hover:text-red-100 disabled:cursor-not-allowed disabled:opacity-50",
-                title: "Choose whether to delete stored data for the current view.",
-                children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "size-3.5" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Delete" })
-                ]
-              }
-            )
-          ] }),
-          pagination === void 0 && sessionLoadProgress !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 rounded-md bg-black/20 px-2 py-2 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.045)]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SessionLoadProgressBar, { progress: sessionLoadProgress }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(LogPaginationBar, { logs, pagination, embedded: true }),
-          onNotify === void 0 && 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 }),
-          onNotify === void 0 && importError !== 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: importError }),
-          onNotify === void 0 && importStatus !== null && importError === null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 rounded-md border border-cyan-400/25 bg-cyan-500/10 px-3 py-2 text-xs text-cyan-100", children: importStatus })
-        ] }),
-        /* @__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: "bg-white/[0.035] shadow-[inset_0_1px_0_rgba(255,255,255,0.045),0_18px_52px_rgba(0,0,0,0.18)] mx-auto max-w-xl space-y-4 rounded-[8px] px-4 py-8", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-medium", children: isLoading ? "Loading session data..." : "No logs loaded for this session" }),
-            /* @__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) }),
-            sessionLoadProgress !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mx-auto max-w-md rounded-md bg-black/20 px-2 py-2 text-left shadow-[inset_0_0_0_1px_rgba(255,255,255,0.045)]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SessionLoadProgressBar, { progress: sessionLoadProgress }) }),
-            sessionMemberships.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SessionMembershipPanel, { memberships: sessionMemberships }) }),
-            !isLoading && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-3 text-xs", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "Stored logs may still be available." }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2", children: [
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { value: selectedModel, onValueChange: onModelChange, children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "bg-black/25 hover:bg-white/[0.045] h-9 w-full border-0 text-xs text-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)]", 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: "order-2 min-w-0 lg:order-1", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-background/95 shadow-[0_12px_36px_rgba(0,0,0,0.18),inset_0_-1px_0_rgba(255,255,255,0.045)] sticky top-0 z-30 px-4 py-3 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 })
+                ] }),
+                onImportLogs !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "input",
+                    {
+                      ref: importInputRef,
+                      type: "file",
+                      accept: ".zip,.json,.jsonl,application/zip,application/json",
+                      className: "hidden",
+                      onChange: handleImportFileChange
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleImportClick,
+                      disabled: importing,
+                      className: "bg-white/[0.035] hover:bg-white/[0.065] inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
+                      title: "Import Agent Inspector export",
+                      children: importing ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Importing..." }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsx(Upload, { className: "size-3.5" }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Import" })
+                      ] })
+                    }
+                  )
+                ] }),
+                exportActionVisibility.redacted && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      void handleExport("redacted");
+                    },
+                    disabled: exporting !== null,
+                    className: "bg-white/[0.035] hover:bg-white/[0.065] inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors 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: "bg-white/[0.035] hover:bg-white/[0.065] inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-xs text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors 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" })
+                    ] })
+                  }
+                ),
                 onReloadSession !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
                   "button",
                   {
                     type: "button",
                     onClick: handleReloadCurrentSession,
-                    className: "bg-white/[0.045] hover:bg-white/[0.075] inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground",
+                    disabled: isLoading,
+                    className: "bg-white/[0.035] hover:bg-white/[0.065] inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
+                    title: "Reload this session from stored logs",
                     children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "size-3.5" }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Load session" })
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: cn("size-3.5", isLoading && "animate-spin") }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: reloadSessionLabel })
                     ]
                   }
                 ),
-                hideSessionFilter ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "a",
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  "button",
                   {
-                    href: "/",
-                    className: "inline-flex h-8 items-center rounded-md px-3 text-xs text-muted-foreground underline transition-colors hover:text-foreground",
-                    children: "Back to all sessions"
+                    type: "button",
+                    onClick: handleClearCurrentView,
+                    disabled: !canClearCurrentView,
+                    className: "bg-white/[0.035] hover:bg-white/[0.065] inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
+                    title: "Clear the current view. Stored logs remain reloadable.",
+                    children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "size-3.5" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Clear" })
+                    ]
                   }
-                ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+                ),
+                onDeleteCurrentView !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
                   "button",
                   {
                     type: "button",
-                    onClick: () => onSessionChange("__all__"),
-                    className: "inline-flex h-8 items-center rounded-md px-3 text-xs text-muted-foreground underline transition-colors hover:text-foreground",
-                    children: "Show all sessions"
+                    onClick: handleRequestDeleteCurrentView,
+                    disabled: !canDeleteCurrentView || deletingCurrentView,
+                    className: "bg-red-500/[0.07] hover:bg-red-500/[0.12] inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-red-200 shadow-[inset_0_0_0_1px_rgba(248,113,113,0.14)] transition-colors hover:text-red-100 disabled:cursor-not-allowed disabled:opacity-50",
+                    title: "Delete persisted history for the selected session.",
+                    children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "size-3.5" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Delete" })
+                    ]
                   }
                 )
-              ] })
-            ] })
-          ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-16 text-center text-muted-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white/[0.035] shadow-[inset_0_1px_0_rgba(255,255,255,0.045),0_18px_52px_rgba(0,0,0,0.18)] mx-auto max-w-2xl space-y-4 rounded-[8px] px-4 py-8", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm", children: "No logs loaded in the current view." }),
-            sessions.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mx-auto max-w-xl text-xs leading-relaxed text-muted-foreground", children: "Pick a session from the filter panel to load stored logs on demand." }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(CopyableCommand, { command: "ANTHROPIC_BASE_URL=http://localhost:9527/proxy <your-tool>" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(CopyableCommand, { command: "OPENAI_BASE_URL=http://localhost:9527/proxy <your-tool>" })
+              ] }),
+              pagination === void 0 && sessionLoadProgress !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 rounded-md bg-black/20 px-2 py-2 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.045)]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SessionLoadProgressBar, { progress: sessionLoadProgress }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(LogPaginationBar, { logs, pagination, embedded: true }),
+              onNotify === void 0 && 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 }),
+              onNotify === void 0 && importError !== 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: importError }),
+              onNotify === void 0 && importStatus !== null && importError === null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 rounded-md border border-cyan-400/25 bg-cyan-500/10 px-3 py-2 text-xs text-cyan-100", children: importStatus })
             ] }),
-            /* @__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",
-            {
-              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,
-                    defaultExpanded: groups.length === 1,
-                    timeDisplayFormat
-                  }
-                ) }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(LogPaginationBar, { logs, pagination }) })
-              ]
-            }
-          )
-        ] })
-      ] })
-    ] }),
+            /* @__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: "bg-white/[0.035] shadow-[inset_0_1px_0_rgba(255,255,255,0.045),0_18px_52px_rgba(0,0,0,0.18)] mx-auto max-w-xl space-y-4 rounded-[8px] px-4 py-8", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-medium", children: isLoading ? "Loading session data..." : "No logs loaded for this session" }),
+                /* @__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) }),
+                sessionLoadProgress !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mx-auto max-w-md rounded-md bg-black/20 px-2 py-2 text-left shadow-[inset_0_0_0_1px_rgba(255,255,255,0.045)]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SessionLoadProgressBar, { progress: sessionLoadProgress }) }),
+                sessionMemberships.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-left", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SessionMembershipPanel, { memberships: sessionMemberships }) }),
+                !isLoading && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-3 text-xs", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "Stored logs may still be available." }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2", children: [
+                    onReloadSession !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: handleReloadCurrentSession,
+                        className: "bg-white/[0.045] hover:bg-white/[0.075] inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] transition-colors hover:text-foreground",
+                        children: [
+                          /* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "size-3.5" }),
+                          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Load session" })
+                        ]
+                      }
+                    ),
+                    hideSessionFilter ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "a",
+                      {
+                        href: "/",
+                        className: "inline-flex h-8 items-center rounded-md px-3 text-xs text-muted-foreground underline transition-colors hover:text-foreground",
+                        children: "Back to all sessions"
+                      }
+                    ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => onSessionChange("__all__"),
+                        className: "inline-flex h-8 items-center rounded-md px-3 text-xs text-muted-foreground 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: "bg-white/[0.035] shadow-[inset_0_1px_0_rgba(255,255,255,0.045),0_18px_52px_rgba(0,0,0,0.18)] mx-auto max-w-2xl space-y-4 rounded-[8px] px-4 py-8", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm", children: "No logs loaded in the current view." }),
+                sessions.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mx-auto max-w-xl text-xs leading-relaxed text-muted-foreground", children: "Pick a session from the filter panel to load stored logs on demand." }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(CopyableCommand, { command: "ANTHROPIC_BASE_URL=http://localhost:9527/proxy <your-tool>" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(CopyableCommand, { command: "OPENAI_BASE_URL=http://localhost:9527/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",
+                {
+                  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,
+                        defaultExpanded: groups.length === 1,
+                        timeDisplayFormat
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(LogPaginationBar, { logs, pagination }) })
+                  ]
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Dialog, { open: deleteDialogOpen, onOpenChange: setDeleteDialogOpen, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogContent, { className: "border-red-500/20 bg-zinc-950 text-zinc-100 sm:max-w-md", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogHeader, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(DialogTitle, { children: "Delete current logs?" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(DialogDescription, { children: "Choose whether this only clears the UI or also deletes the stored log data for the current view." })
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogTitle, { children: [
+          "Delete ",
+          deleteTargetLabel,
+          " history?"
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(DialogDescription, { children: "Clear only hides logs from the UI. Delete removes stored history from disk." })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "flex items-start gap-3 rounded-md bg-red-500/[0.08] px-3 py-3 text-sm text-red-100 shadow-[inset_0_0_0_1px_rgba(248,113,113,0.16)]", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "input",
-          {
-            type: "checkbox",
-            className: "mt-0.5 size-4 shrink-0",
-            checked: deleteStoredData,
-            disabled: deletingCurrentView,
-            onChange: (event) => setDeleteStoredData(event.currentTarget.checked)
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block font-medium", children: "Also delete stored data" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mt-1 block text-xs text-red-200/80", children: [
-            "Removes persisted log rows, streaming chunks, and session archive entries for these",
-            " ",
-            logs.length.toString(),
-            " visible request",
-            logs.length === 1 ? "" : "s",
-            "."
-          ] })
-        ] })
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-md bg-red-500/[0.08] px-3 py-3 text-sm text-red-100 shadow-[inset_0_0_0_1px_rgba(248,113,113,0.16)]", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block font-medium", children: "This is a full history delete." }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "mt-1 block text-xs text-red-200/80", children: deleteTargetDescription })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-2", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -15139,11 +15394,11 @@ function ProxyViewer({
           Button,
           {
             type: "button",
-            variant: deleteStoredData ? "destructive" : "secondary",
+            variant: "destructive",
             size: "sm",
             disabled: deletingCurrentView,
             onClick: handleConfirmDeleteCurrentView,
-            children: deletingCurrentView ? "Deleting..." : deleteStoredData ? "Delete data" : "Clear only"
+            children: deletingCurrentView ? "Deleting..." : "Delete history"
           }
         )
       ] })
@@ -15280,6 +15535,38 @@ function fetchSessionLogsPage(sessionId, request, limit = SESSION_PAGE_LIMIT) {
     SESSION_LOGS_FETCH_TIMEOUT_MS
   );
 }
+async function collectSessionLogIds(sessionId, onProgress) {
+  const ids = /* @__PURE__ */ new Set();
+  let page = await fetchSessionLogsPage(sessionId, { kind: "oldest" }, SESSION_RELOAD_PAGE_LIMIT);
+  for (const log of page.logs) {
+    ids.add(log.id);
+  }
+  onProgress(ids.size, 1);
+  let loadedPages = 1;
+  while (page.hasNewer && page.newestLogId !== null && loadedPages < MAX_SESSION_RELOAD_PAGES) {
+    page = await fetchSessionLogsPage(
+      sessionId,
+      { kind: "newer", afterLogId: page.newestLogId },
+      SESSION_RELOAD_PAGE_LIMIT
+    );
+    for (const log of page.logs) {
+      ids.add(log.id);
+    }
+    loadedPages += 1;
+    onProgress(ids.size, loadedPages);
+  }
+  return { ids: [...ids], truncated: page.hasNewer };
+}
+async function deleteAllGroupsForFullHistoryDelete() {
+  try {
+    const result = await fetchJson("/api/groups", DeleteInspectorGroupsResponseSchema, {
+      method: "DELETE"
+    });
+    return { deleted: result.deleted, ok: true };
+  } catch {
+    return { deleted: 0, ok: false };
+  }
+}
 function mergeLogsById(previousLogs, incomingLogs) {
   if (incomingLogs.length === 0) return [...previousLogs];
   const byId = /* @__PURE__ */ new Map();
@@ -15696,43 +15983,107 @@ function ProxyViewerContainer({
     },
     [showToast]
   );
-  const handleDeleteCurrentView = reactExports.useCallback(
-    async (ids) => {
-      if (ids.length === 0) return;
-      const persistedIds = ids.filter((id) => Number.isInteger(id) && id >= 0);
+  const handleDeleteCurrentView = reactExports.useCallback(async () => {
+    const deleteRequestId = sessionPageRequestIdRef.current + 1;
+    sessionPageRequestIdRef.current = deleteRequestId;
+    setSessionPageLoading(true);
+    stopSessionLoadProgress();
+    dismissToast();
+    try {
+      if (selectedSession === "__all__") {
+        startSessionLoadProgress("Deleting stored history", deleteRequestId);
+        const result2 = await fetchJson("/api/logs", DeleteLogsResponseSchema, {
+          method: "DELETE"
+        });
+        const groupCleanup = await deleteAllGroupsForFullHistoryDelete();
+        if (sessionPageRequestIdRef.current !== deleteRequestId) return;
+        setAllLogs([]);
+        logIndexRef.current.clear();
+        setLogPage(null);
+        setKnownSessions([]);
+        setSessionMemberships([]);
+        setSessionPageLoading(false);
+        stopSessionLoadProgress();
+        const groupMessage = groupCleanup.ok ? ` Cleared ${groupCleanup.deleted.toString()} group${groupCleanup.deleted === 1 ? "" : "s"}.` : " Group cleanup failed; open Groups to retry Clear.";
+        showToast({
+          message: `Deleted ${result2.cleared.toString()} stored log${result2.cleared === 1 ? "" : "s"} across all sessions.${groupMessage}`,
+          tone: groupCleanup.ok ? "success" : "error"
+        });
+        return;
+      }
+      const sessionId = selectedSession;
+      startSessionLoadProgress("Deleting session history", deleteRequestId);
+      const collected = await collectSessionLogIds(sessionId, (logCount, pageCount) => {
+        updateSessionLoadProgress("Deleting session history", deleteRequestId, logCount, pageCount);
+      });
+      const idSet = new Set(collected.ids);
+      for (const log of allLogs) {
+        if (log.sessionId === sessionId) {
+          idSet.add(log.id);
+        }
+      }
+      const persistedIds = [...idSet].filter((id) => Number.isInteger(id) && id >= 0);
       if (persistedIds.length === 0) {
+        if (sessionPageRequestIdRef.current !== deleteRequestId) return;
+        setAllLogs((prev) => {
+          const remaining = prev.filter((log) => log.sessionId !== sessionId);
+          logIndexRef.current = buildLogIndex(remaining);
+          return remaining;
+        });
+        setLogPage(
+          (prev) => prev === null ? null : {
+            ...prev,
+            logs: prev.logs.filter((log) => log.sessionId !== sessionId)
+          }
+        );
+        setKnownSessions((prev) => prev.filter((session) => session !== sessionId));
+        setSessionPageLoading(false);
+        stopSessionLoadProgress();
         showToast({
-          message: "No persisted log records were found for this view.",
-          tone: "error"
+          message: "No stored log records were found for this session.",
+          tone: "success"
         });
         return;
       }
-      const idSet = new Set(persistedIds);
-      const removed = allLogs.filter((log) => idSet.has(log.id));
       const result = await fetchJson("/api/logs", DeleteLogsResponseSchema, {
         method: "DELETE",
         headers: { "content-type": "application/json" },
         body: JSON.stringify({ ids: persistedIds })
       });
+      if (sessionPageRequestIdRef.current !== deleteRequestId) return;
       setAllLogs((prev) => {
-        const remaining = prev.filter((log) => !idSet.has(log.id));
+        const remaining = prev.filter((log) => log.sessionId !== sessionId);
         logIndexRef.current = buildLogIndex(remaining);
         return remaining;
       });
       setLogPage(
         (prev) => prev === null ? null : {
           ...prev,
-          logs: prev.logs.filter((log) => !idSet.has(log.id))
+          logs: prev.logs.filter((log) => log.sessionId !== sessionId)
         }
       );
-      setKnownSessions((prev) => mergeSessionIds(prev, extractSessions(removed)));
+      setKnownSessions((prev) => prev.filter((session) => session !== sessionId));
+      setSessionPageLoading(false);
+      stopSessionLoadProgress();
       showToast({
-        message: `Deleted ${result.cleared.toString()} stored log${result.cleared === 1 ? "" : "s"} from the current view.`,
-        tone: "success"
+        message: `Deleted ${result.cleared.toString()} stored log${result.cleared === 1 ? "" : "s"} for this session${collected.truncated ? ". More history may remain." : "."}`,
+        tone: collected.truncated ? "error" : "success"
       });
-    },
-    [allLogs, showToast]
-  );
+    } finally {
+      if (sessionPageRequestIdRef.current === deleteRequestId) {
+        setSessionPageLoading(false);
+        stopSessionLoadProgress();
+      }
+    }
+  }, [
+    allLogs,
+    dismissToast,
+    selectedSession,
+    showToast,
+    startSessionLoadProgress,
+    stopSessionLoadProgress,
+    updateSessionLoadProgress
+  ]);
   const handleReloadSession = reactExports.useCallback(() => {
     if (initialSessionId !== void 0) {
       loadSessionPage({ kind: "newest" });