@tonyclaw/agent-inspector 3.0.29 → 3.0.30

package/.output/server/_ssr/{ProxyViewerContainer-DUgxRNbj.mjs → ProxyViewerContainer-CvsUmbJ3.mjs}

@@ -1,26 +1,31 @@
 import { r as reactExports, j as jsxRuntimeExports, R as React } from "../_libs/react.mjs";
-import { C as CapturedLogSchema, B 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, g as readStoredUiScalePreference, h as persistUiScalePreference, j as applyUiScalePreference, x as extractStopReason, p as packageJson, P as ProviderConfigSchema, U as UI_SCALE_STORAGE_KEY, k as normalizeUiScalePreference, t as apiFormatForPath, E as GroupEvidenceExportResultSchema, F as DeleteInspectorGroupResponseSchema, $ as PiAgentResponseSchema, w as isTurnBoundary, r as readStoredThemeMode, e as applyThemeMode, f as persistThemeMode, a2 as formatUiScale, y as AlertSummarySchema, z as AlertListResponseSchema, I as InspectorGroupsListResponseSchema, G as GroupEvidenceReadResponseSchema, V as createPendingProviderTestResults, W as ProviderTestResultsSchema, X as createFailedProviderTestResults, Y as MAX_SLOW_RESPONSE_THRESHOLD_SECONDS, Z as MAX_PROVIDER_TEST_TIMEOUT_SECONDS, _ as TimeDisplayFormatSchema, i as isRecord, T as THEME_MODE_STORAGE_KEY, n as normalizeThemeMode, M as PATH_V1_MESSAGES, N as PATH_V1_CHAT_COMPLETIONS, Q as PATH_V1_RESPONSES, H as providerHasContextMetadata, m as parseOpenAIResponse, o as parseOpenAIResponsesResponse, O as OpenAIRequestSchema, q as OpenAIResponsesRequestSchema, A as AnthropicResponseSchema$1, l as AnthropicRequestSchema, s as safeGetOwnProperty, a0 as resolveProviderContextWindow, u as getSessionPath, J as findProviderModelMetadata, S as previewUpstreamUrl, K as KnowledgeCandidateSchema, a1 as isPlainRecord, v as stripClaudeCodeBillingHeader, L as LogBodyChunkSchema } from "./router-BYlePDj8.mjs";
+import { C as CapturedLogSchema, P 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, m as cn, F as LazyFeatureBoundary, x as formatTokens, B as Button, d as RuntimeConfigSchema, g as readStoredUiScalePreference, h as persistUiScalePreference, j as applyUiScalePreference, H as extractStopReason, af as CrabLogo, p as packageJson, k as normalizeUiScalePreference, Q as GroupEvidenceExportResultSchema, V as DeleteInspectorGroupResponseSchema, y as copyTextToClipboard, l as RedactedProviderDtoSchema, U as UI_SCALE_STORAGE_KEY, v as apiFormatForPath, a4 as createPendingProviderTestResults, a5 as ProviderTestResultsSchema, a6 as createFailedProviderTestResults, a7 as MAX_SLOW_RESPONSE_THRESHOLD_SECONDS, a8 as MAX_PROVIDER_TEST_TIMEOUT_SECONDS, a9 as TimeDisplayFormatSchema, I as AlertSummarySchema, J as AlertListResponseSchema, r as readStoredThemeMode, e as applyThemeMode, f as persistThemeMode, ai as formatUiScale, N as InspectorGroupsListResponseSchema, M as GroupEvidenceReadResponseSchema, aa as EcosystemPackagesResponseSchema, ab as EcosystemTaskResponseSchema, ac as EcosystemTasksResponseSchema, ae as PiAgentResponseSchema, G as isTurnBoundary, _ as PATH_V1_MESSAGES, $ as PATH_V1_CHAT_COMPLETIONS, a0 as PATH_V1_RESPONSES, X as providerHasContextMetadata, W as ProviderScanResponseSchema, T as THEME_MODE_STORAGE_KEY, n as normalizeThemeMode, ad as EcosystemExecutionConfirmationResponseSchema, i as isRecord, a1 as formatContextWindowInput, Y as findProviderModelMetadata, Z as formatContextWindowTokens, w as getSessionPath, q as parseOpenAIResponse, t as parseOpenAIResponsesResponse, O as OpenAIRequestSchema, u as OpenAIResponsesRequestSchema, A as AnthropicResponseSchema$1, o as AnthropicRequestSchema, s as safeGetOwnProperty, ag as resolveProviderContextWindow, a2 as parseContextWindowTokensInput, a3 as previewUpstreamUrl, K as KnowledgeCandidateSchema, ah as isPlainRecord, E as stripClaudeCodeBillingHeader, L as LogBodyChunkSchema, z as getStatusCategory } from "./router-GKvrwifJ.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 { u as useWindowVirtualizer, a as useVirtualizer } from "../_libs/tanstack__react-virtual.mjs";
+import { c as cva } from "../_libs/class-variance-authority.mjs";
 import { d as diffJson, a as diffLines } from "../_libs/diff.mjs";
-import { r as reactDomExports } from "../_libs/react-dom.mjs";
-import { W as WebGLRenderer, S as SRGBColorSpace, A as ACESFilmicToneMapping, a as Scene, O as OrthographicCamera, M as MeshPhysicalMaterial, C as Color, G as Group, b as Mesh, c as CircleGeometry, d as MeshBasicMaterial, e as SphereGeometry, f as AmbientLight, H as HemisphereLight, D as DirectionalLight, P as PointLight, V as Vector3, g as CylinderGeometry } from "../_libs/three.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, H as Heart, e as Pause, f as Play, g as Plus, B as BrainCircuit, L as LoaderCircle, h as Send, A as ArrowLeft, i as ChevronUp, j as Copy, k as ChevronsLeft, l as ChevronLeft, m as ChevronRight, n as ChevronsRight, o as Clapperboard, p as Flag, q as Siren, r as Timer, G as Gauge, s as Sun, E as Eye, M as Moon, t as ALargeSmall, u as Layers, v as FlaskConical, w as Sparkles, x as Activity, y as Beaker, N as Network, z as Terminal, J as Settings, K as Monitor, O as Rocket, Q as PackageCheck, V as History, W as Scan, Y as CircleAlert, Z as ArrowUpRight, _ as ArrowDownRight, $ as CodeXml, a0 as Cpu, a1 as FolderOpen, a2 as Bell, a3 as Clock3, a4 as ShieldAlert, a5 as EyeOff, a6 as ExternalLink, a7 as Clock, a8 as RotateCw, a9 as CircleCheckBig, aa as Pencil, ab as MessageSquare, ac as Zap, ad as Wrench, ae as Brain, af as Minus, ag as CircleX, ah as ShieldCheck, ai as Save, aj as FileSearch, ak as CloudUpload, al as CircleQuestionMark, am as Server, an as Lock, ao as Wifi, ap as WifiOff, aq as OctagonAlert, ar as Radio, as as Globe, at as FileTerminal, au as ChevronsUp, av as ChevronsDown, aw as FileDiff, ax as RotateCcw, ay as GitCompareArrows, az as ArrowUp, aA as ArrowDown, aB as Ellipsis, aC as Blocks, aD as MousePointerClick, aE as FileText, aF as Rows3, aG as Columns2 } from "../_libs/lucide-react.mjs";
-import { u as union, o as object, e as array, l as literal, n as number, d as boolean, b as string, _ as _enum } from "../_libs/zod.mjs";
+import { T as TriangleAlert, C as CircleCheck, X, P as PanelRightOpen, a as PanelRightClose, S as Search, U as Upload, D as Download, F as FileBraces, R as RefreshCw, b as Trash2, I as Info, c as ChevronDown, d as Check, e as Settings, f as Siren, L as LoaderCircle, g as Sun, E as Eye, M as Moon, A as ALargeSmall, h as Layers, i as FlaskConical, j as Sparkles, k as Activity, B as Beaker, N as Network, l as Copy, m as Terminal, n as BrainCircuit, o as Send, p as ArrowLeft, q as ChevronUp, r as ChevronsLeft, s as ChevronLeft, t as ChevronRight, u as ChevronsRight, v as CircleStop, w as Clapperboard, x as Flag, y as Timer, G as Gauge, z as Scan, H as Plus, J as CircleAlert, K as Rocket, O as PackageCheck, Q as History, V as Monitor, W as EyeOff, Y as ExternalLink, Z as Clock, _ as RotateCw, $ as CircleCheckBig, a0 as Pencil, a1 as Bell, a2 as Clock3, a3 as ShieldAlert, a4 as ArrowUpRight, a5 as ArrowDownRight, a6 as CodeXml, a7 as Cpu, a8 as FolderOpen, a9 as MessageSquare, aa as Zap, ab as Wrench, ac as Brain, ad as Minus, ae as CircleQuestionMark, af as Server, ag as Lock, ah as Wifi, ai as WifiOff, aj as CircleX, ak as ShieldCheck, al as Save, am as FileSearch, an as CloudUpload, ao as OctagonAlert, ap as Radio, aq as Globe, ar as FileTerminal, as as ChevronsUp, at as ChevronsDown, au as FileDiff, av as RotateCcw, aw as GitCompareArrows, ax as ArrowUp, ay as ArrowDown, az as Ellipsis, aA as Blocks, aB as MousePointerClick, aC as FileText, aD as Rows3, aE as Columns2 } from "../_libs/lucide-react.mjs";
+import { u as union, o as object, e as array, l as literal, n as number, d as boolean, b as string } from "../_libs/zod.mjs";
 import { S as Select$1, a as SelectTrigger$1, b as SelectIcon, c as SelectValue$1, d as SelectPortal, e as SelectContent$1, f as SelectViewport, g as SelectItem$1, h as SelectItemIndicator, i as SelectItemText, j as SelectScrollUpButton$1, k as SelectScrollDownButton$1 } from "../_libs/radix-ui__react-select.mjs";
-import { D as Dialog$1, a as DialogContent$1, b as DialogClose, c as DialogTitle$1, d as DialogDescription$1, e as DialogPortal$1, f as DialogOverlay$1, g as DialogTrigger$1 } from "../_libs/radix-ui__react-dialog.mjs";
+import { D as Dialog$1, a as DialogContent$1, b as DialogClose, c as DialogTitle$1, d as DialogDescription$1, e as DialogTrigger$1, f as DialogPortal$1, g as DialogOverlay$1 } from "../_libs/radix-ui__react-dialog.mjs";
+import { R as Root2, C as Content, L as List, T as Trigger } from "../_libs/radix-ui__react-tabs.mjs";
 import { S as Slot } from "../_libs/radix-ui__react-slot.mjs";
-import { R as Root2, L as List, T as Trigger, C as Content } from "../_libs/radix-ui__react-tabs.mjs";
 import { P as Provider, R as Root3, T as Trigger$1, a as Portal, C as Content2, A as Arrow2 } from "../_libs/radix-ui__react-tooltip.mjs";
 import { R as Root, C as CollapsibleContent$1, a as CollapsibleTrigger$1 } from "../_libs/radix-ui__react-collapsible.mjs";
 import { R as Root$1, V as Viewport, C as Corner, S as ScrollAreaScrollbar, a as ScrollAreaThumb } from "../_libs/radix-ui__react-scroll-area.mjs";
 const ApiErrorSchema = object({
   error: string()
 });
+const MUTATION_METHODS = /* @__PURE__ */ new Set(["POST", "PUT", "PATCH", "DELETE"]);
+function withBrowserMutationProof(init) {
+  const method = init?.method?.toUpperCase();
+  if (method === void 0 || !MUTATION_METHODS.has(method)) return init;
+  const headers = new Headers(init?.headers);
+  if (!headers.has("x-agent-inspector-csrf")) {
+    headers.set("x-agent-inspector-csrf", "1");
+  }
+  return { ...init, headers };
+}
 async function parseJsonResponse$1(response, schema) {
   const data = await response.json();
   return schema.parse(data);
@@ -35,7 +40,7 @@ async function readApiError(response, fallback) {
   }
 }
 async function fetchJson(input, schema, init, errorFallback) {
-  const response = await fetch(input, init);
+  const response = await fetch(input, withBrowserMutationProof(init));
   if (!response.ok) {
     const fallback = errorFallback?.(response) ?? `Request failed with status ${response.status}`;
     throw new Error(await readApiError(response, fallback));
@@ -69,7 +74,10 @@ async function fetchWithTimeout(input, timeoutMs, init) {
     }
   }
   try {
-    return await fetch(input, { ...init, signal: controller.signal });
+    return await fetch(input, {
+      ...withBrowserMutationProof(init),
+      signal: controller.signal
+    });
   } catch (error) {
     if (timedOut && error instanceof DOMException && error.name === "AbortError") {
       throw new ApiTimeoutError(timeoutMs);
@@ -248,22 +256,23 @@ function useOnboarding() {
     markSeen
   };
 }
-function OnboardingBanner() {
-  const { hasSeenOnboarding, isLoading, markSeen } = useOnboarding();
-  const [expanded, setExpanded] = reactExports.useState(false);
-  if (isLoading || hasSeenOnboarding) return null;
+function OnboardingTip({
+  expanded,
+  onToggle,
+  onDismiss
+}) {
   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 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)]",
+      className: "mx-3 mt-2 mb-1 rounded-md border border-warning/30 bg-warning/10 px-3 py-2 text-sm shadow-sm sm:mx-4",
       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.jsx(Info, { className: "mt-0.5 size-4 shrink-0 text-warning", "aria-hidden": "true" }),
         /* @__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-medium text-amber-200", children: "Inspector ready" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-foreground", 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." }),
@@ -290,8 +299,8 @@ function OnboardingBanner() {
           "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",
+            onClick: onToggle,
+            className: "inline-flex h-8 shrink-0 items-center gap-1 rounded-md border border-warning/35 px-2 text-xs font-medium text-foreground transition-colors hover:bg-warning/15 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none sm:hidden",
             "aria-expanded": expanded,
             "aria-label": expanded ? "Hide onboarding details" : "Show onboarding details",
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -306,10 +315,8 @@ function OnboardingBanner() {
           "button",
           {
             type: "button",
-            onClick: () => {
-              void markSeen();
-            },
-            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",
+            onClick: onDismiss,
+            className: "hidden h-8 shrink-0 items-center gap-1.5 rounded-md border border-warning/40 px-3 text-xs font-medium text-foreground transition-colors hover:bg-warning/15 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none sm:inline-flex",
             "aria-label": "Dismiss onboarding tip",
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3.5" }),
@@ -321,10 +328,8 @@ function OnboardingBanner() {
           "button",
           {
             type: "button",
-            onClick: () => {
-              void markSeen();
-            },
-            className: "-m-1 shrink-0 p-1 text-muted-foreground transition-colors hover:text-foreground",
+            onClick: onDismiss,
+            className: "-m-1 shrink-0 rounded-sm p-1 text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
             "aria-label": "Dismiss",
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "size-3.5" })
           }
@@ -333,6 +338,21 @@ function OnboardingBanner() {
     }
   );
 }
+function OnboardingBanner() {
+  const { hasSeenOnboarding, isLoading, markSeen } = useOnboarding();
+  const [expanded, setExpanded] = reactExports.useState(false);
+  if (isLoading || hasSeenOnboarding) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    OnboardingTip,
+    {
+      expanded,
+      onToggle: () => setExpanded((value) => !value),
+      onDismiss: () => {
+        void markSeen();
+      }
+    }
+  );
+}
 const REDACTED = "[REDACTED]";
 const SECRET_KEY_PATTERN = /(^|[-_])(api[-_]?key|authorization|cookie|token|secret|password|access[-_]?token|refresh[-_]?token)([-_]|$)/i;
 const SECRET_TEXT_PATTERNS = [
@@ -446,6 +466,9 @@ async function exportLogsAsZip(logs, mode = "redacted", options = {}) {
   if (initialCancel !== null) return initialCancel;
   const limitMessage = exportLimitMessage(logs);
   if (limitMessage !== null) return { ok: false, message: limitMessage };
+  const { default: JSZip } = await import("../_libs/jszip.mjs").then(function(n) {
+    return n.i;
+  });
   const zip = new JSZip();
   const suffix = mode === "redacted" ? "redacted" : "raw";
   const streamingLogs = logs.filter((log) => log.streaming).slice(0, MAX_STREAMING_CHUNK_EXPORTS);
@@ -492,61 +515,6 @@ async function exportLogsAsZip(logs, mode = "redacted", options = {}) {
   URL.revokeObjectURL(url);
   return { ok: true };
 }
-function restoreSelection(selection, ranges) {
-  if (selection === null) return;
-  selection.removeAllRanges();
-  for (const range of ranges) {
-    selection.addRange(range);
-  }
-}
-function readSelectionRanges(selection) {
-  if (selection === null) return [];
-  const ranges = [];
-  for (let index = 0; index < selection.rangeCount; index++) {
-    ranges.push(selection.getRangeAt(index));
-  }
-  return ranges;
-}
-function copyWithTextareaFallback(text) {
-  if (typeof document === "undefined") return false;
-  const activeElement = document.activeElement;
-  const selection = document.getSelection();
-  const ranges = readSelectionRanges(selection);
-  const textarea = document.createElement("textarea");
-  textarea.value = text;
-  textarea.setAttribute("readonly", "");
-  textarea.style.position = "fixed";
-  textarea.style.top = "0";
-  textarea.style.left = "-9999px";
-  textarea.style.opacity = "0";
-  document.body.appendChild(textarea);
-  textarea.focus();
-  textarea.select();
-  textarea.setSelectionRange(0, text.length);
-  let copied = false;
-  try {
-    copied = document.execCommand("copy");
-  } catch {
-  } finally {
-    document.body.removeChild(textarea);
-    restoreSelection(selection, ranges);
-    if (typeof HTMLElement !== "undefined" && activeElement instanceof HTMLElement) {
-      activeElement.focus({ preventScroll: true });
-    }
-  }
-  return copied;
-}
-async function copyTextToClipboard(text) {
-  const clipboard = globalThis.navigator?.clipboard;
-  if (clipboard !== void 0) {
-    try {
-      await clipboard.writeText(text);
-      return true;
-    } catch {
-    }
-  }
-  return copyWithTextareaFallback(text);
-}
 function formatTimestamp$2(iso, format) {
   switch (format) {
     case "full":
@@ -562,72 +530,6 @@ function formatTimestamp$2(iso, format) {
 function formatTimestampRange(startedAt, endedAt, format) {
   return `${formatTimestamp$2(startedAt, format)} - ${formatTimestamp$2(endedAt, format)}`;
 }
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-function formatTokens(count) {
-  const absoluteCount = Math.abs(count);
-  if (absoluteCount < 1e3) return String(count);
-  if (absoluteCount >= 1e6) {
-    return (count / 1e6).toFixed(1).replace(/\.0$/, "") + "M";
-  }
-  return (count / 1e3).toFixed(1).replace(/\.0$/, "") + "K";
-}
-function formatContextWindowTokens(count) {
-  if (count >= 1024 * 1024) {
-    return (count / (1024 * 1024)).toFixed(1).replace(/\.0$/, "") + "M";
-  }
-  return (count / 1024).toFixed(1).replace(/\.0$/, "") + "K";
-}
-function formatExactContextUnit(count, multiplier, unit) {
-  const tenths = count * 10;
-  if (!Number.isSafeInteger(tenths) || tenths % multiplier !== 0) return null;
-  return (tenths / multiplier / 10).toFixed(1).replace(/\.0$/, "") + unit;
-}
-function formatContextWindowInput(count) {
-  if (!Number.isSafeInteger(count) || count <= 0) return count.toString();
-  if (count >= 1024 * 1024) {
-    const megaValue = formatExactContextUnit(count, 1024 * 1024, "M");
-    if (megaValue !== null) return megaValue;
-  }
-  const kiloValue = formatExactContextUnit(count, 1024, "K");
-  if (kiloValue !== null) return kiloValue;
-  return count.toString();
-}
-function contextWindowUnitMultiplier(unit) {
-  if (unit === void 0 || unit === "") return 1;
-  switch (unit.toLowerCase()) {
-    case "k":
-      return 1024;
-    case "m":
-      return 1024 * 1024;
-    default:
-      return null;
-  }
-}
-function parseContextWindowTokensInput(value) {
-  const trimmed = value.trim().replaceAll(",", "");
-  if (trimmed === "") return null;
-  const match = /^(\d+(?:\.\d+)?)\s*([kKmM])?$/.exec(trimmed);
-  if (match === null) return null;
-  const amountText = match[1];
-  if (amountText === void 0) return null;
-  const amount = Number(amountText);
-  const unit = match[2];
-  const multiplier = contextWindowUnitMultiplier(unit);
-  if (!Number.isFinite(amount) || amount <= 0 || multiplier === null) return null;
-  if ((unit === void 0 || unit === "") && !Number.isInteger(amount)) return null;
-  const tokens = Math.round(amount * multiplier);
-  if (!Number.isSafeInteger(tokens) || tokens <= 0) return null;
-  return tokens;
-}
-function getStatusCategory(status) {
-  if (status === null) return "pending";
-  if (status >= 200 && status < 300) return "success";
-  if (status >= 400 && status < 500) return "client_error";
-  if (status >= 500) return "server_error";
-  return "pending";
-}
 function useThemeMode() {
   const [themeMode, setThemeModeState] = reactExports.useState(readStoredThemeMode);
   const setThemeMode = reactExports.useCallback((nextThemeMode) => {
@@ -684,7 +586,7 @@ function useUiScale() {
 async function fetcher(url) {
   return fetchJson(
     url,
-    ProviderConfigSchema.array(),
+    RedactedProviderDtoSchema.array(),
     void 0,
     (response) => `Failed to fetch ${url}: ${response.status}`
   );
@@ -799,46 +701,6 @@ function DialogDescription({
     }
   );
 }
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-white hover:bg-destructive/90",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "size-9"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-function Button({
-  className,
-  variant,
-  size,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "button",
-    {
-      "data-slot": "button",
-      className: cn(buttonVariants({ variant, size, className })),
-      ...props
-    }
-  );
-}
 function ConfirmDialog({
   open,
   onOpenChange,
@@ -1009,7 +871,7 @@ const OpenAILogoSvg = "data:image/svg+xml,%3csvg%20height='2500'%20viewBox='-1%2
 const DeepSeekLogoSvg = "data:image/svg+xml,%3csvg%20fill='none'%20height='1320'%20viewBox='3.771%206.973%2023.993%2017.652'%20width='2500'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m27.501%208.469c-.252-.123-.36.111-.508.23-.05.04-.093.09-.135.135-.368.395-.797.652-1.358.621-.821-.045-1.521.213-2.14.842-.132-.776-.57-1.238-1.235-1.535-.349-.155-.701-.309-.944-.645-.171-.238-.217-.504-.303-.765-.054-.159-.108-.32-.29-.348-.197-.031-.274.135-.352.273-.31.567-.43%201.192-.419%201.825.028%201.421.628%202.554%201.82%203.36.136.093.17.186.128.321-.081.278-.178.547-.264.824-.054.178-.135.217-.324.14a5.448%205.448%200%200%201%20-1.719-1.169c-.848-.82-1.614-1.726-2.57-2.435-.225-.166-.449-.32-.681-.467-.976-.95.128-1.729.383-1.82.267-.096.093-.428-.77-.424s-1.653.293-2.659.677a2.782%202.782%200%200%201%20-.46.135%209.554%209.554%200%200%200%20-2.853-.1c-1.866.21-3.356%201.092-4.452%202.6-1.315%201.81-1.625%203.87-1.246%206.018.399%202.261%201.552%204.136%203.326%205.601%201.837%201.518%203.955%202.262%206.37%202.12%201.466-.085%203.1-.282%204.942-1.842.465.23.952.322%201.762.392.623.059%201.223-.031%201.687-.127.728-.154.677-.828.414-.953-2.132-.994-1.665-.59-2.09-.916%201.084-1.285%202.717-2.619%203.356-6.94.05-.343.007-.558%200-.837-.004-.168.034-.235.228-.254a4.084%204.084%200%200%200%201.529-.47c1.382-.757%201.938-1.997%202.07-3.485.02-.227-.004-.463-.243-.582zm-12.041%2013.391c-2.067-1.627-3.07-2.162-3.483-2.138-.387.021-.318.465-.233.754.089.285.205.482.368.732.113.166.19.414-.112.598-.666.414-1.823-.139-1.878-.166-1.347-.793-2.473-1.842-3.267-3.276-.765-1.38-1.21-2.861-1.284-4.441-.02-.383.093-.518.472-.586a4.692%204.692%200%200%201%201.514-.04c2.109.31%203.905%201.255%205.41%202.749.86.853%201.51%201.871%202.18%202.865.711%201.057%201.478%202.063%202.454%202.887.343.289.619.51.881.672-.792.088-2.117.107-3.022-.61zm.99-6.38a.304.304%200%201%201%20.609%200c0%20.17-.136.304-.306.304a.3.3%200%200%201%20-.303-.305zm3.077%201.581c-.197.08-.394.15-.584.159a1.246%201.246%200%200%201%20-.79-.252c-.27-.227-.463-.354-.546-.752a1.752%201.752%200%200%201%20.016-.582c.07-.324-.008-.531-.235-.72-.187-.155-.422-.196-.682-.196a.551.551%200%200%201%20-.252-.078c-.108-.055-.197-.19-.112-.356.027-.053.159-.183.19-.207.352-.201.758-.135%201.134.016.349.142.611.404.99.773.388.448.457.573.678.906.174.264.333.534.441.842.066.192-.02.35-.248.448z'%20fill='%234d6bfe'/%3e%3c/svg%3e";
 const MiniMaxLogoSvg = "/assets/minimax-BPMzvuL-.jpeg";
 const AlibabaLogoSvg = "/assets/alibaba-TTwafVwX.svg";
-const QwenLogoSvg = "/assets/qwen-CONDcHqt.png";
+const QwenLogoSvg = "/assets/qwen-mMn3f5ul.webp";
 const ZhipuAILogoSvg = "/assets/zhipuai-BPNAnxo-.svg";
 const PROVIDER_MAP = {
   "claude-": "anthropic",
@@ -2521,9 +2383,9 @@ function TabsTrigger({
     {
       "data-slot": "tabs-trigger",
       className: cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-muted-foreground hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+        "data-[state=active]:border-border data-[state=active]:bg-background data-[state=active]:text-foreground",
         "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
         className
       ),
@@ -2569,27 +2431,30 @@ function useCopyFeedback(text) {
   return { copied, copy };
 }
 const LazyCompareDrawer = reactExports.lazy(
-  () => import("./CompareDrawer-R_P1-VNr.mjs").then((m) => ({ default: m.CompareDrawer }))
+  () => import("./CompareDrawer-CqUmGHal.mjs").then((m) => ({ default: m.CompareDrawer }))
+);
+const LazyInspectorPet = reactExports.lazy(
+  () => import("./InspectorPet-DI0UJd01.mjs").then((m) => ({ default: m.InspectorPet }))
 );
 const LazyReplayDialog = reactExports.lazy(
-  () => import("./ReplayDialog-De9wKKzS.mjs").then((m) => ({ default: m.ReplayDialog }))
+  () => import("./ReplayDialog-DS48dpFG.mjs").then((m) => ({ default: m.ReplayDialog }))
 );
 const LazyRequestAnatomy = reactExports.lazy(
-  () => import("./RequestAnatomy-Db4MxUYo.mjs").then((m) => ({ default: m.RequestAnatomy }))
+  () => import("./RequestAnatomy-DxYVQU1C.mjs").then((m) => ({ default: m.RequestAnatomy }))
 );
 const LazyResponseView = reactExports.lazy(
-  () => import("./ResponseView-8rDXOiNB.mjs").then((m) => ({ default: m.ResponseView }))
+  () => import("./ResponseView-BLXW73eq.mjs").then((m) => ({ default: m.ResponseView }))
 );
 const LazyStreamingChunkSequence = reactExports.lazy(
-  () => import("./StreamingChunkSequence-N9teZHkA.mjs").then((m) => ({
+  () => import("./StreamingChunkSequence-DD0iFuy0.mjs").then((m) => ({
     default: m.StreamingChunkSequence
   }))
 );
 const LazyJsonViewer = reactExports.lazy(
-  () => import("./json-viewer-BjoHRbjS.mjs").then((m) => ({ default: m.JsonViewer }))
+  () => import("./json-viewer-LDu2XBaK.mjs").then((m) => ({ default: m.JsonViewer }))
 );
 const LazyJsonViewerFromString = reactExports.lazy(
-  () => import("./json-viewer-BjoHRbjS.mjs").then((m) => ({ default: m.JsonViewerFromString }))
+  () => import("./json-viewer-LDu2XBaK.mjs").then((m) => ({ default: m.JsonViewerFromString }))
 );
 const HIGHLIGHT_DURATION_MS = 1200;
 const MAX_HIGHLIGHT_ATTEMPTS = 12;
@@ -4397,7 +4262,7 @@ const LogEntry = reactExports.memo(function({
                     "aria-hidden": "true"
                   }
                 ),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, className: "gap-2", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(LazyFeatureBoundary, { feature: "Log details", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, className: "gap-2", children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsxs(
                     TabsList,
                     {
@@ -4533,7 +4398,13 @@ const LogEntry = reactExports.memo(function({
                         headers: displayLog.headers,
                         emptyLabel: "No transformation applied; raw and processed headers are identical."
                       }
-                    ) : /* @__PURE__ */ jsxRuntimeExports.jsx(HeaderRows, { headers: displayLog.headers, emptyLabel: "No headers captured" })
+                    ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      HeaderRows,
+                      {
+                        headers: displayLog.headers,
+                        emptyLabel: "No headers captured"
+                      }
+                    )
                   ] }) }),
                   shouldShowRawHeadersTab(
                     viewMode,
@@ -4618,14 +4489,14 @@ const LogEntry = reactExports.memo(function({
                       }
                     ) })
                   ] }) })
-                ] })
+                ] }) })
               ]
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsxRuntimeExports.jsx(LazyFeatureBoundary, { feature: "Replay", children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       LazyReplayDialog,
       {
         log: displayLog,
@@ -4633,7 +4504,7 @@ const LogEntry = reactExports.memo(function({
         open: replayOpen,
         onOpenChange: setReplayOpen
       }
-    ) })
+    ) }) })
   ] });
 });
 function boundaryTitle(stopReason) {
@@ -4658,6 +4529,7 @@ function ThreadConnector({
   isFirst,
   isTurnStart,
   isOnlyEntry = false,
+  isOpenTurnTail = false,
   crabIndex = 0,
   collapsible = false,
   onToggle
@@ -4741,8 +4613,23 @@ function ThreadConnector({
           }
         )
       }
+    ) : isOpenTurnTail ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "span",
+      {
+        title: isPending ? "Current end of open turn (processing)" : "Current end of open turn",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Crab,
+          {
+            className: cn(
+              "size-3.5 text-cyan-300/85",
+              isRunning ? "animate-crab-crawl" : "animate-crab-appear",
+              "drop-shadow-[0_0_4px_rgba(103,232,249,0.4)]"
+            )
+          }
+        )
+      }
     ) : isRunning ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { title: "Processing", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Crab, { className: cn("size-3.5 text-amber-300/80", "animate-crab-crawl") }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { title: "Request in turn", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Crab, { className: "size-3.5 text-muted-foreground/40" }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 flex justify-center min-h-0", children: !isBoundary && /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 flex justify-center min-h-0", children: !isBoundary && !isOpenTurnTail && /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
         className: cn(
@@ -4767,8 +4654,8 @@ function responseMayContainToolTrace(log, format) {
       return false;
   }
 }
-function isTurnCollapsible(entryCount, isComplete, isPending) {
-  return entryCount > 1 && isComplete && !isPending;
+function isTurnCollapsible(entryCount) {
+  return entryCount > 1;
 }
 function buildTurnGroups(logs) {
   const groups = [];
@@ -5019,7 +4906,7 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
   const isComplete = lastStop !== null ? isTurnBoundary(lastStop) : false;
   const isPending = entries[lastIdx]?.log.responseStatus === null;
   const isSingleLog = entries.length === 1;
-  const collapsible = isTurnCollapsible(entries.length, isComplete, isPending);
+  const collapsible = isTurnCollapsible(entries.length);
   const [collapsed, setCollapsed] = reactExports.useState(false);
   const prevCompleteRef = reactExports.useRef(false);
   reactExports.useEffect(() => {
@@ -5162,7 +5049,7 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
                 }
               ),
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 flex justify-center min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-px bg-muted-foreground/14 h-full" }) }),
-              isComplete && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              isComplete ? /* @__PURE__ */ jsxRuntimeExports.jsx(
                 CollapsedCrab,
                 {
                   className: cn(
@@ -5170,7 +5057,16 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
                     "drop-shadow-[0_0_4px_rgba(251,191,36,0.45)]"
                   )
                 }
-              )
+              ) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { title: "Current end of open turn", "aria-label": "Current end of open turn", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                CollapsedCrab,
+                {
+                  className: cn(
+                    "size-3.5 text-cyan-300/85",
+                    isPending ? "animate-crab-crawl" : "animate-crab-appear",
+                    "drop-shadow-[0_0_4px_rgba(103,232,249,0.4)]"
+                  )
+                }
+              ) })
             ] }),
             entries.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
               "div",
@@ -5263,6 +5159,7 @@ const TurnGroup = reactExports.memo(function TurnGroup2({
                 isFirst: visibleIdx === 0,
                 isTurnStart,
                 isOnlyEntry: isSingleLog,
+                isOpenTurnTail: visibleIdx === lastIdx && !isComplete,
                 crabIndex: log.id % 12,
                 collapsible: collapsible && isTurnStart,
                 onToggle: toggleCollapse
@@ -6266,9 +6163,14 @@ const ConversationGroup = reactExports.memo(function({
     ] })
   ] });
 });
+const COPYABLE_COMMAND_CONTAINER_CLASS_NAME = "flex w-full min-w-0 items-center gap-2 rounded-md border border-border/70 bg-muted/35 px-3 py-2 sm:w-auto sm:max-w-full";
+const COPYABLE_COMMAND_TEXT_CLASS_NAME = "m-0 min-w-0 flex-1 overflow-x-auto font-mono text-xs text-foreground sm:text-sm";
 function shouldShowRawExport(captureMode) {
   return captureMode === "full";
 }
+function exportRequiresConfirmation(mode) {
+  return mode === "raw";
+}
 function getExportActionVisibility(captureMode, logCount) {
   const hasLogs = logCount > 0;
   return {
@@ -6565,46 +6467,6 @@ function formatPaginationStatus({
   }
   return `Showing ${logs.length} of ${pagination.total} logs (${range})`;
 }
-function CrabLogo({ className }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "svg",
-    {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      className: cn("inline-block size-5", className),
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 13 C5 9 8 7 12 7 C16 7 19 9 19 13 C19 16 16 18 12 18 C8 18 5 16 5 13 Z" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "7", x2: "9.5", y2: "5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "7", x2: "14.5", y2: "5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "9.5", cy: "4.5", r: "0.9", fill: "currentColor", stroke: "none" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "14.5", cy: "4.5", r: "0.9", fill: "currentColor", stroke: "none" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "6.5", y1: "16", x2: "4.5", y2: "19.5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "9", y1: "17.5", x2: "8", y2: "20.5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "15", y1: "17.5", x2: "16", y2: "20.5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "17.5", y1: "16", x2: "19.5", y2: "19.5" })
-      ]
-    }
-  );
-}
-const McpLogoPng = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAD6CAQAAAAi5ZK2AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfpCxsJDCnsge2KAAAM2ElEQVR42u2de3AW1RnGnyQQDARDwiUFpHIVMHIpYgFRB2nLxQrC0FIDiCKDWNqBUqBlai8wvciIpaRTWh3QDqCDIIjKDL0IaBC5SKlysWJArgqh3BMICYFs/wgpGUi+8579dr89e/Z5zp/59j2755fn3d2z5wJQFEVRFEVRoVQSm+AG1UFrtEdT1EcjNEA5SlCMIhxDAQoJ3S4lIwf9cD+6ozXq1vKbYuzHNmxEPo6xwcKtungIS3EajkYpwLPoyqYLp3KwACe1cFcvezATmWzEMOk+rMBV18CrSjHy0IqNGQb1wMa4cV8vZfgzGrNRTVYm8nDFQ+SV5QymIIWNa6ZGaz6y6ZR/I4cNbJrSkOcb8MpyCVPYzCapKz71GXllWY5b2dhm6EGcTwhyBw52oyUbPHgNx6WEIXfg4CDuYKMHq0kevI/rlhP4Ghs+OE1ERcKRO3BwEh3Z+NFC7sDBATQngMRrcoDIHTj4iE/yUXJ5VVlhYsMkWezy+a6urgRbsAP7cRincQGpqI+maI+O6IMuSHYRbwIW0X/mJvZTeAH9ah1CATTCaKxBmWbUi7iTOMxEXoCncIsodgvM1ezo2cFPMebdy89qfyHL0vxSN5FQzHL5ajRxVU8v7NO4cWQRjCnIy/DDOOq6FcvENS0gGjMS+wUMjvvdZ5awrsv4KvEE7/Iz+Lontc4Q1vc8AQXt8rO4x7Oa54hqLOLI2aBdfrenHVyviWqdQUx2uLxS6fhMUO8ugrLD5VXqLfpmfxdh2eHyKi0S1P5b4rLF5ZVqiiJl/Z8SmD0ur9TzgnNoQWi2uLxSt+Gy8ixGEpvZLs9AN3RGqsYRa5Xn8SeCM9XlDfFT7Ll2bDnWYYRwOMZjyjP5kOjMdPkDOHpTjPX4iuDILOWL2znCMxH5IyitMc4+ZAuO3q08nyYEaFpiHxbjYWyDIMm/qDyje4kwPMgdOBihjDBNeU7fJcQwIXewTnBzUJ3Vk8Rozr18mOAtuxT1FFH6KmNMJkhTkH+7lse3G0s7RZyuygjPEGVYEntV6aSIlKOM8CvCDEtirywVyFDE6q2M8WPiDJPLJcMgBiljPEWg4XG5AwfTlfEmKWPkEml4XO7gCBooI85TRvlm8I1ax3CX68w8PYeB2KGFfEWM6Yo3qgy5uKj8VU/lLz5HG2QjHRlIA1CCIhTjBI6ggg43LbGXYYggZj3lgkYVtbwaluITvIlf4gHhNEomdheJXfpeXoX8EVHUAR4sY1CKfEyN5gibMCIHXvJsBYur2IDxSCNy05HXx1mPFy/5L2ZFZb6rGR2uusiByb6sWlOMZ5FOl5vocqAuDvm2XNExjLV5t52wuhyY7vM6Ve+jA11uksuB5glYcLgIY+hyc1yeJBj87E35q6BXkC5PAHJgdgKXI9xlzzt8eF0OjE/wypQH7Li7h9nl4wJYjPQ4utPlwSF/LKD1Z8+gC10eLeQOHHyJ1nR54pGPCniVadmcGyK3xOVVZYvWnNpqb5hBIv+L1hCJAdiuhXyVcpT6dV3GSLylhXyxy7YrxHYU4CBO4yKABmiCNuiIe9DMVbT5mMp7eWJc/rgLl1dgC6bE2NelM6Zim4uoDzOxm5nYS/GicNOuznhJc0X5k2HprIkS8gos1cTSSrgYodFbhkQ5sR/F/a7aqD8Oa9TSny43x+UblDNialcmVovr2WP2qOYoIV8V57tREuaK6/o+E7sJid2bO+00Ya0HTPV6lFy+3LNWmymsMZfIg+1w9fZ5ep6ozp3mjaKjy90rGetF9d5H5Ha4vFLZOB62zYGIPH6NEk2NqEvk4U/s1V/f8gX1DyJye5ADQC/BGfyRyO1I7Nf1rvIcPiZye1xeqaGCua6ZNiMf7sOSAolD3h+v4otrH2RewYPCo1JxWnkmQ4jcROTZNcyGWSMcN7PQ5KUJw4zc33t5G+xHzfu3S7655wqmPRG5ccgPxxjkqN7DvbnyfDYRuVmJvY1iYMQEQYxCxRkVEnlYXF5ZdguibFLEKI/6S9pQg1x+Ow4IYrZSxlmqjJFGl4fF5dLVJBcoYzQl8jDcy3XestV7tbcl8vC43IGD3spo6gEVtxF5mJCXCu7H6u6ZRlFE/nAoE7sDB8sEEd9URqkTfuT2P7FXlSuiZQb2KKKU0OXhcbmDGYKYdZWrTO8l8nDcyx04mCeKqh5IsYaJPRyJ3cEfhHFnePTPQ+ShQQ68r4z1NJEHkdj9Q95KcN7didwmlwOzBC2dTOT2uByoj5PBPcbR5UEgly0tPo3I7XE5kI1zgoVOWhO5PS4HXhHE/IDI7XE5MFIU9QdEbo/LO6NIEPWS98Mn/F04pD+R16oWOCiK+4LXyMf4irwnin1ErrtWzGtGIW+MXcJvdB4v/H87LvqIvL1yWG90XZ6J7UHNpVvoI/KGKPDxS5q/Lm/ry5e06i7/SBi5HHd5izxVI/nqIpcM6aXL1WW+1z7v6SPyJ0I7RMJvl+sgP+H9uLihviFvp5FDmNhrL096/34+2Jf3cgBYw8TuAfI3/OiHu8MXl+tsMM97ee3lKBr7AT1JuVuwG+Sp2EvkcSMvR1+/PqbO9Bw5MIn38rgTu69rP6fFeJd2hzwFn/OJPU6XO5gNX5VTy6iNk66QA4+KLqoCY5nYay0L4bs6YedN1e5EJ5fRdogu60dM7DE+/SZk+lIqxmMzrl5br2wzxrvbCA5Ad9FlraTLay2vJ3YV2DS0Rds4VzuYI7isQ1q9TNG6l79uzsK/8ldAyffhYRoRwz0qJgLIgT6CC/uHMcjpck/0c8Gl9aHLbUIO/FN5aflEbhfyOoJBfrlEbhNyydf5C0jnvdwm5MAY5eWtInK7kAOzlRc4mYndLuTAq8pL7KGMMTzUXTGGdrj6qc2KS7yq7O27E1fYxx4ufaK4yCOK41M0ofg7dYHIRVIh2xr3gyBdbpxUW8+8ozh+PV0ePqkmSK1RJPdLhrj890Qu1ynFxa6PeXRTQ76X871cS6rPqh/GPDrLiJc0ulxTqgVtj8U8OglneS8Pn9RrHjaMefwbvJeHT4vj/JY+iMjDJ/UQip8oIqyNcewyJnYT9T3lpf9NEaEJPqvlyEV0uZnqKpjVkqWIkV3DTuKlmusfE3kClYwzygaYIIiSi03XxuA7OIF5aE7kJuttZRPsQpIoUga64W601l75mF0xCZdkYdvBPtZP5AGom6Ahtvu2brnfiZ3IXfbKye7rdHmo9AtBc5zyYftIujxAtRONcduIFLrcJm3wpdmDdfm/iDy2BgqbZnpoXE7kSiUJOy8qMNWD2nJwlC43QY+Km+i5OF/fHhD0ARJ5grpjt4qbaT1auM4oU1DGxG6Oev2/71xdCpEr7Jqtro5YpwWELk+AXtZqsHz01ojdDHM1PU7kCVEznNDEko8RuEXQ0bsAJZqRiTxhGqQ5FdGBg3NYgsfRpoZoDTEIv8N/tCNGDnlSwPU/hxkujyzCPhzBOZQiBY3QFB3i6Lidp7lhZSbe0VorcyVGoZwer1JdbHHlTC8LE3vC1US8CLg/xf+XtDqEfLPa4BiRR0/dBXsGhzOxE3kMdcGXCUc+h8iDT/IFCQR+BROJ3ARlaw5DcF8uYAiRm6J6yHPRXaNb9mhvUknkPmuocuGC+MoS1Cdy89QSK3wCvg8PaZ8NkSdM/YT7hsvLRcwSfKwh8kBVB08LN/JSlxIscNUzT+QBKBlDsC1O4OeR53LkDZEHqN7Ic9VRW4a3kav92EbkxigF38BcbEO5CMBhLME45Tz3yCJPChn8dPRBF7RHB3RARrVtvC6hGIewHwUowBYcirMW/e/lubhCZybunyALmR7/6zKxR05ETuRETuRETuRsNCKniJwicorIKSKniJwicorIKSKniJyqGfnHmvsyE3nIlRJzHxi63ErlEXnUNI6JPWrKUO7rTJdbp98QedSUjWIm9qjpGSKPnrYysUdNzYRLEBO5RRrLxF6p5AhB7yz4zUqMtn+CUpSgZyt/sZpz0mzTWuXU5sbRaIgoOT1T8fdCnCZ026RC2lJzQ25CD4EKFX9PwWLUI/RoQQe+hbdcrEBFGazRovf0tdFwe1SUJVyx5u90u03aKOx7J3aLNEP8lY1J3ho10hg3Q7dbo59pjJwhdkvUAMeJPXr6jtY2Ary3W6Jfaw2CptutUJLmJgLEboXSsUkLO5O8JQ9079LtxE7sxE7sxE7sFqkhH+mIXV1WhG43DMoD7OPZZNHD/gWnPUUR+4BwX2wyeQMAijEYH4h/fS+hRw97c0K3B/tAvCf6ZRmh26OLGCpy+wE2VfQe6XLYTFHD/h6bKGrYy9CDDWQr9vwakV/FE2wce5WGl29CfgrD2TC2qy+W4/w14Hsxy5aVKvjFSN1CLVAPp1DEpqAoiqIoyiz9D9lYMumhgrvLAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDI1LTExLTI3VDA5OjEyOjQxKzAwOjAwvIZCxQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyNS0xMS0yN1QwOToxMjo0MSswMDowMM3b+nkAAAAASUVORK5CYII=";
-function McpLogo({ className }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "img",
-    {
-      src: McpLogoPng,
-      alt: "Model Context Protocol",
-      "aria-hidden": "true",
-      className: cn("inline-block size-8 object-contain invert", className)
-    }
-  );
-}
 function Select({
   ...props
 }) {
@@ -6650,7 +6512,7 @@ function SelectContent({
     {
       "data-slot": "select-content",
       className: cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 motion-reduce:data-[state=open]:animate-none motion-reduce:data-[state=closed]:animate-none relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
         position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
       ),
@@ -7360,7 +7222,7 @@ function TransientToast({
               "button",
               {
                 type: "button",
-                className: "inline-flex size-6 shrink-0 items-center justify-center rounded-md text-current/70 transition-colors hover:bg-white/10 hover:text-current",
+                className: "inline-flex size-6 shrink-0 items-center justify-center rounded-md text-current/70 transition-colors hover:bg-white/10 hover:text-current focus-visible:ring-1 focus-visible:ring-current focus-visible:outline-none",
                 "aria-label": "Dismiss notification",
                 onClick: onDismiss,
                 children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "size-3.5" })
@@ -8357,21 +8219,6 @@ function MemberMetadata({ entries }) {
     }) })
   ] });
 }
-const ExternalProviderSchema = object({
-  name: string(),
-  apiKey: string(),
-  format: _enum(["anthropic", "openai"]),
-  anthropicBaseUrl: string(),
-  openaiBaseUrl: string(),
-  openaiResponsesBaseUrl: string().optional().default(""),
-  models: array(string()),
-  sourceTool: _enum(["claude-code", "opencode", "mimo-code"]),
-  alreadyExists: boolean()
-});
-const ScanResponseSchema = object({
-  providers: array(ExternalProviderSchema),
-  warnings: array(string()).optional()
-});
 const ImportResponseSchema$1 = object({
   success: boolean().optional(),
   imported: number().optional(),
@@ -8386,6 +8233,7 @@ function ImportWizardDialog({
 }) {
   const [scanning, setScanning] = reactExports.useState(false);
   const [scanError, setScanError] = reactExports.useState(null);
+  const [scanId, setScanId] = reactExports.useState(null);
   const [providers, setProviders] = reactExports.useState([]);
   const [warnings, setWarnings] = reactExports.useState([]);
   const [selected, setSelected] = reactExports.useState(/* @__PURE__ */ new Set());
@@ -8400,18 +8248,20 @@ function ImportWizardDialog({
     setScanning(true);
     setScanError(null);
     setWarnings([]);
+    setScanId(null);
     setProviders([]);
     setSelected(/* @__PURE__ */ new Set());
     setImportResult(null);
     setImportError(null);
     void fetchJsonWithTimeout(
       "/api/providers/scan",
-      ScanResponseSchema,
+      ProviderScanResponseSchema,
       PROVIDER_IMPORT_TIMEOUT_MS$1,
-      void 0,
+      { method: "POST" },
       (response) => `Scan failed (${String(response.status)})`
     ).then((data) => {
       if (scanRequestIdRef.current !== requestId) return;
+      setScanId(data.scanId);
       setProviders(data.providers);
       setWarnings(data.warnings ?? []);
       const indices = /* @__PURE__ */ new Set();
@@ -8452,25 +8302,12 @@ function ImportWizardDialog({
   }, []);
   const importSelected = reactExports.useCallback(() => {
     const toImport = providers.filter((_, i) => selected.has(i));
-    if (toImport.length === 0) return;
+    if (toImport.length === 0 || scanId === null) return;
     const requestId = importRequestIdRef.current + 1;
     importRequestIdRef.current = requestId;
     setImporting(true);
     setImportError(null);
     setImportResult(null);
-    const now = (/* @__PURE__ */ new Date()).toISOString();
-    const providersPayload = toImport.map((p) => ({
-      id: window.crypto.randomUUID(),
-      name: p.name,
-      apiKey: p.apiKey,
-      format: p.format,
-      anthropicBaseUrl: p.anthropicBaseUrl,
-      openaiBaseUrl: p.openaiBaseUrl,
-      openaiResponsesBaseUrl: p.openaiResponsesBaseUrl,
-      models: p.models,
-      createdAt: now,
-      updatedAt: now
-    }));
     void fetchJsonWithTimeout(
       "/api/providers/import",
       ImportResponseSchema$1,
@@ -8478,7 +8315,10 @@ function ImportWizardDialog({
       {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ providers: providersPayload })
+        body: JSON.stringify({
+          scanId,
+          selectionIds: toImport.map((provider) => provider.selectionId)
+        })
       },
       (response) => `Import failed (${String(response.status)})`
     ).then((result) => {
@@ -8500,7 +8340,7 @@ function ImportWizardDialog({
       if (importRequestIdRef.current !== requestId) return;
       setImporting(false);
     });
-  }, [providers, selected, onImportComplete]);
+  }, [providers, scanId, selected, onImportComplete]);
   const hasSelectable = providers.some((p) => !p.alreadyExists);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogContent, { className: "max-w-xl max-h-[80vh] overflow-hidden flex flex-col", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogHeader, { children: [
@@ -8546,11 +8386,11 @@ function ImportWizardDialog({
                 p.models.length > 4 ? ` +${p.models.length - 4} more` : ""
               ] }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-muted-foreground mt-0.5 truncate", children: p.format === "anthropic" ? p.anthropicBaseUrl : p.openaiResponsesBaseUrl !== "" ? p.openaiResponsesBaseUrl : p.openaiBaseUrl }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-muted-foreground mt-0.5 font-mono", children: p.apiKey.length > 8 ? `${p.apiKey.slice(0, 4)}••••${p.apiKey.slice(-4)}` : "••••" })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-muted-foreground mt-0.5 font-mono", children: p.apiKeyHint })
             ] })
           ]
         },
-        `${p.sourceTool}-${p.name}`
+        p.selectionId
       )),
       warnings.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-muted-foreground space-y-1 border-t pt-2", children: warnings.map((w, i) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { className: "size-3" }),
@@ -10327,7 +10167,7 @@ const ImportResponseSchema = object({
   errors: array(string()).optional()
 });
 const ModelMetadataRefreshResponseSchema = object({
-  provider: ProviderConfigSchema,
+  provider: RedactedProviderDtoSchema,
   imported: number(),
   matchedModels: array(string()),
   missingModels: array(string()),
@@ -10606,7 +10446,7 @@ function ProvidersPanel({
       try {
         const newProvider = await fetchJsonWithTimeout(
           "/api/providers",
-          ProviderConfigSchema,
+          RedactedProviderDtoSchema,
           PROVIDER_WRITE_TIMEOUT_MS,
           {
             method: "POST",
@@ -10633,7 +10473,7 @@ function ProvidersPanel({
       try {
         const updated = await fetchJsonWithTimeout(
           `/api/providers/${editingProvider.id}`,
-          ProviderConfigSchema,
+          RedactedProviderDtoSchema,
           PROVIDER_WRITE_TIMEOUT_MS,
           {
             method: "PUT",
@@ -10754,61 +10594,68 @@ function ProvidersPanel({
     ] });
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sticky top-0 z-10 flex items-center justify-end gap-2 rounded-[8px] bg-background/95 px-1 py-1 backdrop-blur", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        Button,
-        {
-          variant: "outline",
-          size: "sm",
-          onClick: () => handleExport(),
-          className: "gap-1 hover:bg-muted",
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Download, { className: "size-3" }),
-            "Export"
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        Button,
-        {
-          variant: "outline",
-          size: "sm",
-          onClick: handleImportClick,
-          className: "gap-1 hover:bg-muted",
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Upload, { className: "size-3" }),
-            "Import"
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "input",
-        {
-          type: "file",
-          ref: fileInputRef,
-          accept: ".json",
-          onChange: handleFileChange,
-          style: { display: "none" }
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        Button,
-        {
-          variant: "outline",
-          size: "sm",
-          onClick: () => setShowImportWizard(true),
-          className: "gap-1",
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Scan, { className: "size-3" }),
-            "Scan"
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { onClick: () => setShowForm(true), size: "sm", className: "gap-1", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "size-4" }),
-        "Add Provider"
-      ] })
-    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        "data-provider-toolbar": "true",
+        className: "sticky top-0 z-10 flex min-w-0 flex-wrap items-center justify-start gap-2 rounded-[8px] bg-background/95 px-1 py-1 backdrop-blur sm:justify-end",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => handleExport(),
+              className: "gap-1 hover:bg-muted",
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Download, { className: "size-3" }),
+                "Export"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: handleImportClick,
+              className: "gap-1 hover:bg-muted",
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Upload, { className: "size-3" }),
+                "Import"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "input",
+            {
+              type: "file",
+              ref: fileInputRef,
+              accept: ".json",
+              onChange: handleFileChange,
+              style: { display: "none" }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => setShowImportWizard(true),
+              className: "gap-1",
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Scan, { className: "size-3" }),
+                "Scan"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { onClick: () => setShowForm(true), size: "sm", className: "gap-1", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "size-4" }),
+            "Add Provider"
+          ] })
+        ]
+      }
+    ),
     configPath !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 rounded-[8px] bg-muted/15 px-3 py-2 text-xs text-muted-foreground", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono truncate", title: configPath, children: configPath }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -10896,6 +10743,23 @@ function ProvidersPanel({
     )
   ] });
 }
+const SETTINGS_SECTIONS = [
+  { value: "providers", label: "Providers" },
+  { value: "proxy", label: "Proxy" },
+  { value: "storage", label: "Storage" },
+  { value: "mcp", label: "MCP" },
+  { value: "onboarding", label: "Onboarding" }
+];
+function ResponsiveSettingsTabs() {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    TabsList,
+    {
+      "aria-label": "Settings sections",
+      className: "grid w-full grid-cols-3 justify-stretch gap-1 bg-muted/35 p-1 group-data-[orientation=horizontal]/tabs:h-auto sm:grid-cols-5",
+      children: SETTINGS_SECTIONS.map((section) => /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: section.value, className: "min-w-0 w-full", children: section.label }, section.value))
+    }
+  );
+}
 function SettingsDialog() {
   const [open, setOpen] = reactExports.useState(false);
   const [activeTab, setActiveTab] = reactExports.useState("providers");
@@ -10948,39 +10812,41 @@ function SettingsDialog() {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogContent, { className: "flex max-h-[80vh] max-w-2xl flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogContent, { className: "flex max-h-[calc(100vh-1rem)] w-[calc(100%-1rem)] max-w-2xl flex-col overflow-hidden p-4 sm:max-h-[80vh] sm:p-6", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(DialogTitle, { children: "Settings" }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, className: "flex-1 overflow-hidden", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList, { className: "w-full justify-start bg-muted/35", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "providers", children: "Providers" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "proxy", children: "Proxy" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "storage", children: "Storage" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "mcp", children: "MCP" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "onboarding", children: "Onboarding" })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4 flex-1 overflow-x-hidden overflow-y-auto pr-2", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "providers", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            ProvidersPanel,
-            {
-              externalProviders: providers,
-              isLoading,
-              externalTestResults: testResults,
-              externalTestingProviders: testingProviders,
-              externalTestingTimeLeft: testingTimeLeft,
-              onProvidersMutate: () => {
-                return mutate();
-              },
-              onTestResultsChange: handleTestResultsChange,
-              onTestingProvidersChange: handleTestingProvidersChange,
-              onTestingTimeLeftChange: handleTestingTimeLeftChange
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "proxy", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ProxySettingsTab, {}) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "storage", children: /* @__PURE__ */ jsxRuntimeExports.jsx(StorageSettingsTab, {}) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "mcp", children: /* @__PURE__ */ jsxRuntimeExports.jsx(McpSettingsTab, {}) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "onboarding", children: /* @__PURE__ */ jsxRuntimeExports.jsx(OnboardingSettingsTab, {}) })
-        ] })
-      ] })
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        Tabs,
+        {
+          value: activeTab,
+          onValueChange: setActiveTab,
+          className: "min-h-0 min-w-0 flex-1 overflow-hidden",
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ResponsiveSettingsTabs, {}),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4 min-w-0 flex-1 overflow-x-hidden overflow-y-auto pr-1 sm:pr-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "providers", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                ProvidersPanel,
+                {
+                  externalProviders: providers,
+                  isLoading,
+                  externalTestResults: testResults,
+                  externalTestingProviders: testingProviders,
+                  externalTestingTimeLeft: testingTimeLeft,
+                  onProvidersMutate: () => {
+                    return mutate();
+                  },
+                  onTestResultsChange: handleTestResultsChange,
+                  onTestingProvidersChange: handleTestingProvidersChange,
+                  onTestingTimeLeftChange: handleTestingTimeLeftChange
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "proxy", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ProxySettingsTab, {}) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "storage", children: /* @__PURE__ */ jsxRuntimeExports.jsx(StorageSettingsTab, {}) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "mcp", children: /* @__PURE__ */ jsxRuntimeExports.jsx(McpSettingsTab, {}) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "onboarding", children: /* @__PURE__ */ jsxRuntimeExports.jsx(OnboardingSettingsTab, {}) })
+            ] })
+          ]
+        }
+      )
     ] })
   ] });
 }
@@ -11122,7 +10988,7 @@ function CopyableSetupValue({
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0 rounded-md border border-border/45 bg-muted/15 px-3 py-2 transition-colors hover:bg-muted/25", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-1 text-xs font-medium text-muted-foreground", children: label }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: "min-w-0 flex-1 truncate font-mono text-xs text-foreground", children: value }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: "min-w-0 flex-1 truncate font-mono text-xs text-foreground", title: value, children: value }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         Button,
         {
@@ -11593,83 +11459,6 @@ function ProxySettingsTab() {
     ] })
   ] });
 }
-const EcosystemPackageStateSchema = _enum([
-  "installed",
-  "update-available",
-  "available",
-  "planned",
-  "unknown"
-]);
-const EcosystemPackageSchema = object({
-  id: string(),
-  name: string(),
-  npmName: string(),
-  capability: string(),
-  description: string(),
-  workflow: string(),
-  installCommand: string(),
-  state: EcosystemPackageStateSchema,
-  installedVersion: string().nullable(),
-  latestVersion: string().nullable(),
-  primary: boolean()
-});
-const EcosystemRunnerPresetSchema = object({
-  id: string(),
-  name: string(),
-  validatedVersion: string(),
-  binary: string(),
-  modelFlag: string(),
-  variantFlag: string().nullable(),
-  tools: array(string()),
-  logDir: string(),
-  skillsDir: string(),
-  agentsDir: string()
-});
-const EcosystemRecipeSchema = object({
-  id: string(),
-  title: string(),
-  stage: string(),
-  packageId: string(),
-  description: string(),
-  command: string(),
-  requiresSession: boolean(),
-  runnable: boolean()
-});
-const EcosystemPackagesResponseSchema = object({
-  checkedAt: string(),
-  packages: array(EcosystemPackageSchema),
-  runnerPresets: array(EcosystemRunnerPresetSchema),
-  recipes: array(EcosystemRecipeSchema)
-});
-const EcosystemTaskActionSchema = _enum([
-  "install",
-  "upgrade",
-  "help",
-  "runner-presets",
-  "recipe"
-]);
-const EcosystemTaskStatusSchema = _enum(["queued", "running", "succeeded", "failed"]);
-const EcosystemTaskSchema = object({
-  id: string(),
-  packageId: string(),
-  npmName: string(),
-  recipeId: string().nullable().default(null),
-  action: EcosystemTaskActionSchema,
-  status: EcosystemTaskStatusSchema,
-  command: string(),
-  output: string(),
-  createdAt: string(),
-  startedAt: string().nullable(),
-  finishedAt: string().nullable(),
-  exitCode: number().nullable(),
-  error: string().nullable()
-});
-const EcosystemTaskResponseSchema = object({
-  task: EcosystemTaskSchema
-});
-const EcosystemTasksResponseSchema = object({
-  tasks: array(EcosystemTaskSchema)
-});
 const WORKFLOWS = [
   {
     id: "observe",
@@ -11728,24 +11517,51 @@ async function fetchEcosystemTasks(url) {
     (response) => `Failed to load ecosystem tasks: ${String(response.status)}`
   );
 }
-async function startEcosystemTask(packageId, action) {
+async function prepareEcosystemTask(packageId, action) {
+  const endpoint = `/api/ecosystem/packages/${encodeURIComponent(packageId)}/${action}`;
   const response = await fetchJson(
-    `/api/ecosystem/packages/${encodeURIComponent(packageId)}/${action}`,
-    EcosystemTaskResponseSchema,
-    { method: "POST" },
-    (result) => `Failed to start ecosystem task: ${String(result.status)}`
+    endpoint,
+    EcosystemExecutionConfirmationResponseSchema,
+    {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ intent: "prepare" })
+    },
+    (result) => `Failed to prepare ecosystem task: ${String(result.status)}`
   );
-  return response.task;
+  return { endpoint, confirmation: response.confirmation };
 }
-async function startEcosystemRecipe(recipeId) {
+async function prepareEcosystemRecipe(recipeId) {
+  const endpoint = `/api/ecosystem/recipes/${encodeURIComponent(recipeId)}/run`;
   const response = await fetchJson(
-    `/api/ecosystem/recipes/${encodeURIComponent(recipeId)}/run`,
-    EcosystemTaskResponseSchema,
-    { method: "POST" },
-    (result) => `Failed to start ecosystem recipe: ${String(result.status)}`
-  );
-  return response.task;
-}
+    endpoint,
+    EcosystemExecutionConfirmationResponseSchema,
+    {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ intent: "prepare" })
+    },
+    (result) => `Failed to prepare ecosystem recipe: ${String(result.status)}`
+  );
+  return { endpoint, confirmation: response.confirmation };
+}
+async function confirmEcosystemExecution(pending) {
+  const response = await fetchJson(
+    pending.endpoint,
+    EcosystemTaskResponseSchema,
+    {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({
+        intent: "confirm",
+        nonce: pending.confirmation.nonce,
+        confirmation: pending.confirmation.phrase
+      })
+    },
+    (result) => `Failed to start ecosystem task: ${String(result.status)}`
+  );
+  return response.task;
+}
 function stateLabel(state) {
   switch (state) {
     case "installed":
@@ -12049,6 +11865,76 @@ function RecentTaskRow({
     )
   ] });
 }
+function ExecutionConfirmationDialog({
+  pending,
+  busy,
+  onOpenChange,
+  onConfirm
+}) {
+  const plan = pending?.confirmation.plan ?? null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Dialog, { open: pending !== null, onOpenChange, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogContent, { className: "max-w-xl", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(DialogTitle, { children: "Confirm local command" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(DialogDescription, { children: "Review the exact allowlisted action Agent Inspector will run on this machine." })
+    ] }),
+    plan !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid gap-2 text-xs sm:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-md border bg-muted/30 p-3", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-muted-foreground", children: "Source" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1 break-words font-medium", children: plan.source })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-md border bg-muted/30 p-3", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-muted-foreground", children: "Timeout" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-1 font-medium", children: [
+            String(plan.timeoutMs / 1e3),
+            " seconds"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-md border bg-muted/30 p-3 sm:col-span-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-muted-foreground", children: "Affected scope" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1 font-medium", children: plan.scope })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-1 text-xs font-medium", children: "Resolved command" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "max-h-32 overflow-auto whitespace-pre-wrap break-all rounded-md bg-black/80 p-3 font-mono text-xs leading-5 text-white/80", children: plan.command })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-muted-foreground", children: [
+        "Confirmation phrase: ",
+        /* @__PURE__ */ jsxRuntimeExports.jsx("code", { children: pending?.confirmation.phrase }),
+        ". The one-time confirmation expires at",
+        " ",
+        new Date(pending?.confirmation.expiresAt ?? "").toLocaleTimeString(),
+        "."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          disabled: busy,
+          onClick: () => onOpenChange(false),
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "secondary",
+          disabled: busy || plan === null,
+          onClick: onConfirm,
+          children: [
+            busy ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Terminal, { className: "size-3.5" }),
+            busy ? "Starting" : "Confirm & Run"
+          ]
+        }
+      )
+    ] })
+  ] }) });
+}
 function AgentLabDialog({ currentSessionId, logCount }) {
   const [open, setOpen] = reactExports.useState(false);
   const [copied, setCopied] = reactExports.useState(false);
@@ -12056,6 +11942,8 @@ function AgentLabDialog({ currentSessionId, logCount }) {
   const [copiedRecipeId, setCopiedRecipeId] = reactExports.useState(null);
   const [activeTaskId, setActiveTaskId] = reactExports.useState(null);
   const [taskError, setTaskError] = reactExports.useState(null);
+  const [pendingExecution, setPendingExecution] = reactExports.useState(null);
+  const [confirmationBusy, setConfirmationBusy] = reactExports.useState(false);
   const response = useSWR("/api/ecosystem/packages", fetchEcosystemPackages, {
     revalidateOnFocus: false,
     revalidateIfStale: false
@@ -12105,12 +11993,10 @@ function AgentLabDialog({ currentSessionId, logCount }) {
   };
   const runRecipe = (recipe) => {
     setTaskError(null);
-    void startEcosystemRecipe(recipe.id).then((task) => {
-      setActiveTaskId(task.id);
-      void activeTaskResponse.mutate({ task }, { revalidate: true });
-      void tasksResponse.mutate();
+    void prepareEcosystemRecipe(recipe.id).then((pending) => {
+      setPendingExecution(pending);
     }).catch((error) => {
-      setTaskError(error instanceof Error ? error.message : "Failed to start ecosystem recipe");
+      setTaskError(error instanceof Error ? error.message : "Failed to prepare ecosystem recipe");
     });
   };
   const activeTask = activeTaskResponse.data?.task ?? null;
@@ -12122,12 +12008,25 @@ function AgentLabDialog({ currentSessionId, logCount }) {
   }, [activeTask, response, tasksResponse]);
   const handleStartTask = (packageId, action) => {
     setTaskError(null);
-    void startEcosystemTask(packageId, action).then((task) => {
+    void prepareEcosystemTask(packageId, action).then((pending) => {
+      setPendingExecution(pending);
+    }).catch((error) => {
+      setTaskError(error instanceof Error ? error.message : "Failed to prepare ecosystem task");
+    });
+  };
+  const confirmPendingExecution = () => {
+    if (pendingExecution === null) return;
+    setTaskError(null);
+    setConfirmationBusy(true);
+    void confirmEcosystemExecution(pendingExecution).then((task) => {
       setActiveTaskId(task.id);
+      setPendingExecution(null);
       void activeTaskResponse.mutate({ task }, { revalidate: true });
       void tasksResponse.mutate();
     }).catch((error) => {
       setTaskError(error instanceof Error ? error.message : "Failed to start ecosystem task");
+    }).finally(() => {
+      setConfirmationBusy(false);
     });
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Dialog, { open, onOpenChange: setOpen, children: [
@@ -12288,857 +12187,20 @@ function AgentLabDialog({ currentSessionId, logCount }) {
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(TaskConsole, { task: activeTask })
       ] })
-    ] })
-  ] });
-}
-const INSPECTOR_PET_SIZE = 112;
-const INSPECTOR_PET_MARGIN = 14;
-const INSPECTOR_PET_EDGE_GAP = 20;
-const INSPECTOR_PET_MIN_STEP = 36;
-const INSPECTOR_PET_MAX_STEP = 92;
-const INSPECTOR_PET_SLEEP_AFTER_MS = 45e3;
-const INSPECTOR_PET_PANEL_WIDTH = 192;
-const INSPECTOR_PET_PANEL_HEIGHT = 68;
-const INSPECTOR_PET_PANEL_GAP = 10;
-const INSPECTOR_PET_VERTICAL_SAFE_MARGIN = 78;
-function viewportScale(viewport) {
-  const scale = viewport.scale ?? 1;
-  return Number.isFinite(scale) && scale > 0 ? scale : 1;
-}
-function scaledMetric(value, viewport) {
-  return value * viewportScale(viewport);
-}
-function clampUnit(value) {
-  return Math.min(Math.max(value, 0), 1);
-}
-function maximumPetX(viewport) {
-  const edgeGap = scaledMetric(INSPECTOR_PET_EDGE_GAP, viewport);
-  return Math.max(edgeGap, viewport.width - scaledMetric(INSPECTOR_PET_SIZE, viewport) - edgeGap);
-}
-function maximumPetY(viewport) {
-  const edgeGap = scaledMetric(INSPECTOR_PET_EDGE_GAP, viewport);
-  return Math.max(edgeGap, viewport.height - scaledMetric(INSPECTOR_PET_SIZE, viewport) - edgeGap);
-}
-function clampInspectorPetPosition(position, viewport) {
-  const edgeGap = scaledMetric(INSPECTOR_PET_EDGE_GAP, viewport);
-  return {
-    x: Math.min(Math.max(position.x, edgeGap), maximumPetX(viewport)),
-    y: Math.min(Math.max(position.y, edgeGap), maximumPetY(viewport))
-  };
-}
-function nearestInspectorPetEdge(position, viewport) {
-  const clamped = clampInspectorPetPosition(position, viewport);
-  const edgeGap = scaledMetric(INSPECTOR_PET_EDGE_GAP, viewport);
-  const distances = [
-    { edge: "left", distance: clamped.x - edgeGap },
-    { edge: "right", distance: maximumPetX(viewport) - clamped.x },
-    { edge: "top", distance: clamped.y - edgeGap },
-    { edge: "bottom", distance: maximumPetY(viewport) - clamped.y }
-  ];
-  return distances.reduce((best, current) => current.distance < best.distance ? current : best).edge;
-}
-function snapInspectorPetToEdge(position, viewport) {
-  const clamped = clampInspectorPetPosition(position, viewport);
-  const edge = nearestInspectorPetEdge(clamped, viewport);
-  const edgeGap = scaledMetric(INSPECTOR_PET_EDGE_GAP, viewport);
-  switch (edge) {
-    case "left":
-      return { x: edgeGap, y: clamped.y };
-    case "right":
-      return { x: maximumPetX(viewport), y: clamped.y };
-    case "top":
-      return { x: clamped.x, y: edgeGap };
-    case "bottom":
-      return { x: clamped.x, y: maximumPetY(viewport) };
-  }
-}
-function randomInspectorPetEdgePosition(viewport, positionSample) {
-  const maxX = maximumPetX(viewport);
-  const maxY = maximumPetY(viewport);
-  const edgeGap = scaledMetric(INSPECTOR_PET_EDGE_GAP, viewport);
-  return {
-    x: edgeGap + clampUnit(positionSample) * (maxX - edgeGap),
-    y: maxY
-  };
-}
-function nextInspectorPetWalkingPosition(position, viewport, stepSample, directionSample) {
-  const clamped = snapInspectorPetToEdge(position, viewport);
-  const step = scaledMetric(INSPECTOR_PET_MIN_STEP, viewport) + clampUnit(stepSample) * scaledMetric(INSPECTOR_PET_MAX_STEP - INSPECTOR_PET_MIN_STEP, viewport);
-  const direction = directionSample >= 0.5 ? 1 : -1;
-  const edge = nearestInspectorPetEdge(clamped, viewport);
-  const maxX = maximumPetX(viewport);
-  const maxY = maximumPetY(viewport);
-  const edgeGap = scaledMetric(INSPECTOR_PET_EDGE_GAP, viewport);
-  const minimumSafeY = Math.min(scaledMetric(INSPECTOR_PET_VERTICAL_SAFE_MARGIN, viewport), maxY);
-  switch (edge) {
-    case "left":
-      return {
-        x: edgeGap,
-        y: Math.min(Math.max(clamped.y + step * direction, minimumSafeY), maxY)
-      };
-    case "right":
-      return {
-        x: maxX,
-        y: Math.min(Math.max(clamped.y + step * direction, minimumSafeY), maxY)
-      };
-    case "top":
-      return {
-        x: Math.min(Math.max(clamped.x + step * direction, edgeGap), maxX),
-        y: edgeGap
-      };
-    case "bottom":
-      return {
-        x: Math.min(Math.max(clamped.x + step * direction, edgeGap), maxX),
-        y: maxY
-      };
-  }
-}
-function inspectorPetPanelPosition(position, viewport) {
-  const edge = nearestInspectorPetEdge(position, viewport);
-  const petSize = scaledMetric(INSPECTOR_PET_SIZE, viewport);
-  const panelWidth = scaledMetric(INSPECTOR_PET_PANEL_WIDTH, viewport);
-  const panelHeight = scaledMetric(INSPECTOR_PET_PANEL_HEIGHT, viewport);
-  const panelGap = scaledMetric(INSPECTOR_PET_PANEL_GAP, viewport);
-  const margin = scaledMetric(INSPECTOR_PET_MARGIN, viewport);
-  let x = position.x + petSize / 2 - panelWidth / 2;
-  let y = position.y + petSize / 2 - panelHeight / 2;
-  switch (edge) {
-    case "left":
-      x = position.x + petSize + panelGap;
-      break;
-    case "right":
-      x = position.x - panelWidth - panelGap;
-      break;
-    case "top":
-      y = position.y + petSize + panelGap;
-      break;
-    case "bottom":
-      y = position.y - panelHeight - panelGap;
-      break;
-  }
-  return {
-    x: Math.min(Math.max(x, margin), Math.max(margin, viewport.width - panelWidth - margin)),
-    y: Math.min(Math.max(y, margin), Math.max(margin, viewport.height - panelHeight - margin))
-  };
-}
-function latestCapturedLog(logs) {
-  let latest = null;
-  for (const log of logs) {
-    if (latest === null || log.id > latest.id) latest = log;
-  }
-  return latest;
-}
-function logNeedsAttention(log) {
-  const hasHttpError = log.responseStatus !== null && log.responseStatus >= 400;
-  const hasStreamError = log.error !== null && log.error !== void 0 && log.error !== "";
-  return hasHttpError || hasStreamError;
-}
-function resolveInspectorPetStatus(logs, nowMs) {
-  const pendingCount = logs.filter((log) => log.responseStatus === null).length;
-  const capturedCount = logs.length;
-  if (pendingCount > 0) {
-    return {
-      mood: "active",
-      label: `${String(pendingCount)} request${pendingCount === 1 ? "" : "s"} in flight`,
-      pendingCount,
-      capturedCount
-    };
-  }
-  const latest = latestCapturedLog(logs);
-  if (latest !== null && logNeedsAttention(latest)) {
-    return {
-      mood: "attention",
-      label: "Latest request needs attention",
-      pendingCount,
-      capturedCount
-    };
-  }
-  if (latest === null) {
-    return {
-      mood: "idle",
-      label: "Waiting for traffic",
-      pendingCount,
-      capturedCount
-    };
-  }
-  const latestTimestamp2 = Date.parse(latest.timestamp);
-  if (Number.isFinite(latestTimestamp2) && nowMs - latestTimestamp2 >= INSPECTOR_PET_SLEEP_AFTER_MS) {
-    return {
-      mood: "sleeping",
-      label: "All quiet",
-      pendingCount,
-      capturedCount
-    };
-  }
-  return {
-    mood: "idle",
-    label: "Watching the session",
-    pendingCount,
-    capturedCount
-  };
-}
-function createRod(start, end, radius, material) {
-  const direction = end.clone().sub(start);
-  const length = direction.length();
-  const rod = new Mesh(new CylinderGeometry(radius, radius * 0.9, length, 12), material);
-  rod.position.copy(start.clone().add(end).multiplyScalar(0.5));
-  rod.quaternion.setFromUnitVectors(new Vector3(0, 1, 0), direction.normalize());
-  return rod;
-}
-function addClaw(root, side, shellMaterial, accentMaterial) {
-  const clawScale = side < 0 ? 1.5 : 0.68;
-  const clawGroup = new Group();
-  const pincers = [];
-  root.add(clawGroup);
-  const shoulder = new Vector3(side * 1.2, 0.25, -0.05);
-  const wrist = new Vector3(side * (1.65 + clawScale * 0.18), 0.5, 0);
-  const arm = createRod(shoulder, wrist, 0.16 * clawScale, accentMaterial);
-  clawGroup.add(arm);
-  const palm = new Mesh(new SphereGeometry(0.55, 24, 16), shellMaterial);
-  palm.position.set(side * (1.95 + clawScale * 0.16), 0.62, 0.05);
-  palm.scale.set(1.05 * clawScale, 0.72 * clawScale, 0.55 * clawScale);
-  clawGroup.add(palm);
-  for (const pincerDirection of [-1, 1]) {
-    const pincer = new Mesh(new SphereGeometry(0.36, 20, 14), accentMaterial);
-    pincer.position.set(
-      side * (2.22 + clawScale * 0.26),
-      0.62 + pincerDirection * 0.24 * clawScale,
-      0.08
-    );
-    pincer.scale.set(1.05 * clawScale, 0.34 * clawScale, 0.42 * clawScale);
-    pincer.rotation.z = pincerDirection * side * 0.42;
-    clawGroup.add(pincer);
-    pincers.push({
-      direction: pincerDirection,
-      mesh: pincer,
-      restRotationZ: pincer.rotation.z,
-      restY: pincer.position.y
-    });
-  }
-  return { group: clawGroup, pincers, scale: clawScale };
-}
-function pinchPulse(cycleTime, start, duration) {
-  const progress = (cycleTime - start) / duration;
-  if (progress <= 0 || progress >= 1) return 0;
-  return Math.sin(progress * Math.PI);
-}
-function dominantClawGrip(elapsed) {
-  const cycleTime = elapsed % 6.8;
-  return Math.max(pinchPulse(cycleTime, 0.72, 0.82), pinchPulse(cycleTime, 1.72, 0.68));
-}
-function addEyes(root, shellMaterial, eyeMaterial) {
-  const eyes = [];
-  for (const side of [-1, 1]) {
-    const stalkStart = new Vector3(side * 0.48, 0.68, 0.05);
-    const stalkEnd = new Vector3(side * 0.1, 0.82, 0.07);
-    const eyeGroup = new Group();
-    eyeGroup.position.copy(stalkStart);
-    eyeGroup.add(createRod(new Vector3(0, 0, 0), stalkEnd, 0.1, shellMaterial));
-    const eye = new Mesh(new SphereGeometry(0.24, 20, 16), eyeMaterial);
-    eye.position.copy(stalkEnd);
-    eye.scale.set(1, 1, 0.85);
-    eyeGroup.add(eye);
-    const pupil = new Mesh(
-      new SphereGeometry(0.105, 16, 12),
-      new MeshPhysicalMaterial({ color: 1120295, roughness: 0.25 })
-    );
-    const pupilRest = new Vector3(stalkEnd.x, stalkEnd.y, stalkEnd.z + 0.2);
-    pupil.position.copy(pupilRest);
-    eyeGroup.add(pupil);
-    root.add(eyeGroup);
-    eyes.push({
-      group: eyeGroup,
-      phase: side < 0 ? 0 : Math.PI / 3,
-      pupil,
-      pupilRest
-    });
-  }
-  return eyes;
-}
-function addLegs(root, legMaterial) {
-  const legs = [];
-  for (const side of [-1, 1]) {
-    for (let index = 0; index < 4; index += 1) {
-      const leg = new Group();
-      const baseY = -0.3 - index * 0.22;
-      leg.position.set(side * (0.8 + index * 0.12), baseY, -0.18);
-      leg.add(
-        createRod(
-          new Vector3(0, 0, 0),
-          new Vector3(side * (0.62 + index * 0.06), -0.34, 0),
-          0.095,
-          legMaterial
-        )
-      );
-      leg.add(
-        createRod(
-          new Vector3(side * (0.58 + index * 0.06), -0.31, 0),
-          new Vector3(side * (1.02 + index * 0.08), -0.88 + index * 0.07, 0.04),
-          0.075,
-          legMaterial
-        )
-      );
-      root.add(leg);
-      legs.push({ group: leg, phase: index * Math.PI + (side > 0 ? Math.PI / 2 : 0), side });
-    }
-  }
-  return legs;
-}
-function createCrabScene(scene) {
-  const shellMaterial = new MeshPhysicalMaterial({
-    color: 16096779,
-    roughness: 0.34,
-    metalness: 0.04,
-    clearcoat: 0.78,
-    clearcoatRoughness: 0.18,
-    emissive: new Color(0),
-    emissiveIntensity: 0
-  });
-  const accentMaterial = new MeshPhysicalMaterial({
-    color: 16486972,
-    roughness: 0.42,
-    metalness: 0.02,
-    clearcoat: 0.52,
-    clearcoatRoughness: 0.28
-  });
-  const legMaterial = new MeshPhysicalMaterial({
-    color: 14251782,
-    roughness: 0.48,
-    clearcoat: 0.35,
-    clearcoatRoughness: 0.35
-  });
-  const eyeMaterial = new MeshPhysicalMaterial({
-    color: 16776171,
-    roughness: 0.22,
-    clearcoat: 0.8,
-    clearcoatRoughness: 0.12
-  });
-  const root = new Group();
-  root.rotation.x = -0.12;
-  root.rotation.y = -0.08;
-  root.scale.setScalar(1.08);
-  scene.add(root);
-  const shadow = new Mesh(
-    new CircleGeometry(1.65, 40),
-    new MeshBasicMaterial({ color: 1120295, transparent: true, opacity: 0.16, depthWrite: false })
-  );
-  shadow.position.set(0, -1.33, -0.65);
-  shadow.scale.set(1.4, 0.34, 1);
-  root.add(shadow);
-  const body = new Mesh(new SphereGeometry(1, 36, 24), shellMaterial);
-  body.position.set(0, 0.02, 0);
-  body.scale.set(1.58, 0.92, 0.68);
-  root.add(body);
-  const lowerShell = new Mesh(new SphereGeometry(0.92, 28, 20), accentMaterial);
-  lowerShell.position.set(0, -0.48, 0.22);
-  lowerShell.scale.set(1.28, 0.42, 0.56);
-  root.add(lowerShell);
-  const dominantClaw = addClaw(root, -1, shellMaterial, accentMaterial);
-  addClaw(root, 1, shellMaterial, accentMaterial);
-  const eyes = addEyes(root, shellMaterial, eyeMaterial);
-  const legs = addLegs(root, legMaterial);
-  scene.add(new AmbientLight(16775149, 1.65));
-  scene.add(new HemisphereLight(16775149, 1515571, 2.15));
-  const keyLight = new DirectionalLight(16777215, 3.6);
-  keyLight.position.set(3.5, 4.5, 6);
-  scene.add(keyLight);
-  const fillLight = new DirectionalLight(16498468, 1.35);
-  fillLight.position.set(-4, 1.5, 4);
-  scene.add(fillLight);
-  const rimLight = new PointLight(16096779, 1.8, 12, 2);
-  rimLight.position.set(0, 1.8, 4.5);
-  scene.add(rimLight);
-  return { bodyMaterial: shellMaterial, dominantClaw, eyes, legs, rimLight, root };
-}
-function moodColor(mood) {
-  switch (mood) {
-    case "active":
-      return 2282478;
-    case "attention":
-      return 15680580;
-    case "idle":
-      return 16096779;
-    case "sleeping":
-      return 9741240;
-  }
-}
-function isDisposableMesh(object2) {
-  return object2 instanceof Mesh;
-}
-function disposeScene(scene) {
-  const materials = /* @__PURE__ */ new Set();
-  scene.traverse((object2) => {
-    if (!isDisposableMesh(object2)) return;
-    object2.geometry.dispose();
-    const material = object2.material;
-    if (Array.isArray(material)) {
-      for (const item of material) materials.add(item);
-      return;
-    }
-    materials.add(material);
-  });
-  for (const material of materials) material.dispose();
-}
-function InspectorPetCrab3D({
-  mood,
-  moving,
-  reduceMotion
-}) {
-  const canvasRef = reactExports.useRef(null);
-  const moodRef = reactExports.useRef(mood);
-  const movingRef = reactExports.useRef(moving);
-  const reduceMotionRef = reactExports.useRef(reduceMotion);
-  const [renderFailed, setRenderFailed] = reactExports.useState(false);
-  reactExports.useEffect(() => {
-    moodRef.current = mood;
-  }, [mood]);
-  reactExports.useEffect(() => {
-    movingRef.current = moving;
-  }, [moving]);
-  reactExports.useEffect(() => {
-    reduceMotionRef.current = reduceMotion;
-  }, [reduceMotion]);
-  reactExports.useEffect(() => {
-    const canvas = canvasRef.current;
-    if (canvas === null) return void 0;
-    let renderer;
-    try {
-      renderer = new WebGLRenderer({
-        alpha: true,
-        antialias: true,
-        canvas,
-        powerPreference: "low-power",
-        preserveDrawingBuffer: true
-      });
-    } catch {
-      setRenderFailed(true);
-      return void 0;
-    }
-    renderer.setClearColor(0, 0);
-    renderer.outputColorSpace = SRGBColorSpace;
-    renderer.toneMapping = ACESFilmicToneMapping;
-    renderer.toneMappingExposure = 1.18;
-    const scene = new Scene();
-    const camera = new OrthographicCamera(-3.65, 3.65, 3.65, -3.65, 0.1, 20);
-    camera.position.set(0, 0.05, 8);
-    camera.lookAt(0, 0, 0);
-    const parts = createCrabScene(scene);
-    const startedAt = window.performance.now();
-    let lastFrameAt = 0;
-    const renderFrame = (timestamp) => {
-      if (timestamp - lastFrameAt < 32) return;
-      lastFrameAt = timestamp;
-      const elapsed = (timestamp - startedAt) / 1e3;
-      const motionAllowed = !reduceMotionRef.current;
-      const gait = movingRef.current ? 1 : moodRef.current === "active" ? 0.42 : 0;
-      const idleMotion = motionAllowed ? Math.sin(elapsed * 0.85) : 0;
-      const stepMotion = motionAllowed ? Math.sin(elapsed * 3.4) : 0;
-      const clawGrip = motionAllowed ? dominantClawGrip(elapsed) : 0;
-      parts.root.position.y = idleMotion * 0.035 + Math.abs(stepMotion) * 0.055 * gait;
-      parts.root.rotation.y = -0.08 + idleMotion * 0.055;
-      parts.root.rotation.z = stepMotion * 0.028 * gait;
-      parts.dominantClaw.group.rotation.z = -clawGrip * 0.035;
-      for (const pincer of parts.dominantClaw.pincers) {
-        pincer.mesh.position.y = pincer.restY - pincer.direction * parts.dominantClaw.scale * 0.16 * clawGrip;
-        pincer.mesh.rotation.z = pincer.restRotationZ * (1 - clawGrip * 0.72);
-      }
-      for (const leg of parts.legs) {
-        leg.group.rotation.z = motionAllowed && gait > 0 ? Math.sin(elapsed * 4.25 + leg.phase) * 0.2 * leg.side * gait : 0;
-        leg.group.rotation.x = motionAllowed && gait > 0 ? stepMotion * 0.045 * gait : 0;
-      }
-      for (const eye of parts.eyes) {
-        const gaze = motionAllowed ? Math.sin(elapsed * 0.72 + eye.phase) : 0;
-        const lift = motionAllowed ? Math.cos(elapsed * 0.9 + eye.phase) : 0;
-        eye.group.rotation.z = gaze * 0.075;
-        eye.group.rotation.x = lift * 0.025;
-        eye.pupil.position.set(
-          eye.pupilRest.x + gaze * 0.055,
-          eye.pupilRest.y + lift * 0.025,
-          eye.pupilRest.z
-        );
-      }
-      const color = moodColor(moodRef.current);
-      parts.rimLight.color.setHex(color);
-      parts.rimLight.intensity = moodRef.current === "attention" ? 3.2 : 1.8;
-      parts.bodyMaterial.emissive.setHex(color);
-      parts.bodyMaterial.emissiveIntensity = moodRef.current === "active" ? 0.12 : 0.035;
-      renderer.render(scene, camera);
-    };
-    const resize = () => {
-      const width = Math.max(canvas.clientWidth, 1);
-      const height = Math.max(canvas.clientHeight, 1);
-      renderer.setDrawingBufferSize(width, height, Math.min(window.devicePixelRatio, 2));
-      renderer.render(scene, camera);
-    };
-    const resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(resize);
-    if (resizeObserver === null) {
-      window.addEventListener("resize", resize);
-    } else {
-      resizeObserver.observe(canvas);
-    }
-    resize();
-    const handleContextLost = (event) => {
-      event.preventDefault();
-      setRenderFailed(true);
-    };
-    canvas.addEventListener("webglcontextlost", handleContextLost);
-    renderer.setAnimationLoop(renderFrame);
-    return () => {
-      renderer.setAnimationLoop(null);
-      if (resizeObserver === null) {
-        window.removeEventListener("resize", resize);
-      } else {
-        resizeObserver.disconnect();
-      }
-      canvas.removeEventListener("webglcontextlost", handleContextLost);
-      disposeScene(scene);
-      renderer.dispose();
-    };
-  }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "relative flex size-24 items-center justify-center", "aria-hidden": "true", children: [
+    ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "canvas",
+      ExecutionConfirmationDialog,
       {
-        ref: canvasRef,
-        className: renderFailed ? "hidden" : "block size-full bg-transparent",
-        "data-inspector-pet-canvas": "true"
+        pending: pendingExecution,
+        busy: confirmationBusy,
+        onOpenChange: (confirmationOpen) => {
+          if (!confirmationOpen && !confirmationBusy) setPendingExecution(null);
+        },
+        onConfirm: confirmPendingExecution
       }
-    ),
-    renderFailed && /* @__PURE__ */ jsxRuntimeExports.jsx(CrabLogo, { className: "size-22 text-amber-500 drop-shadow-[0_0_18px_rgba(245,158,11,0.28)]" })
+    )
   ] });
 }
-const INSPECTOR_PET_ROAMING_STORAGE_KEY = "agent-inspector.pet.roaming";
-const INSPECTOR_PET_MIN_PAUSE_MS = 11e3;
-const INSPECTOR_PET_PAUSE_WINDOW_MS = 9e3;
-const INSPECTOR_PET_SCUTTLE_MS = 7200;
-const INSPECTOR_PET_PANEL_DISMISS_MS = 6e3;
-const INSPECTOR_PET_REACTION_MS = 760;
-const INSPECTOR_PET_DRAG_THRESHOLD = 4;
-const INSPECTOR_PET_TOP_LAYER_Z_INDEX = 2147483647;
-function readViewport() {
-  if (typeof window === "undefined") return { width: 1280, height: 720, scale: 1 };
-  const rawScale = window.getComputedStyle(document.documentElement).getPropertyValue("--inspector-ui-scale");
-  const parsedScale = Number.parseFloat(rawScale);
-  const scale = Number.isFinite(parsedScale) && parsedScale > 0 ? parsedScale : 1;
-  return {
-    width: Math.max(window.innerWidth, INSPECTOR_PET_MARGIN * 2),
-    height: Math.max(window.innerHeight, INSPECTOR_PET_MARGIN * 2),
-    scale
-  };
-}
-function readStoredRoaming() {
-  if (typeof window === "undefined") return true;
-  try {
-    return window.localStorage.getItem(INSPECTOR_PET_ROAMING_STORAGE_KEY) !== "0";
-  } catch {
-    return true;
-  }
-}
-function moodDotClass(mood) {
-  switch (mood) {
-    case "active":
-      return "bg-cyan-400 shadow-[0_0_9px_rgba(34,211,238,0.65)]";
-    case "attention":
-      return "bg-red-500 shadow-[0_0_9px_rgba(239,68,68,0.55)]";
-    case "idle":
-      return "bg-amber-400 shadow-[0_0_8px_rgba(251,191,36,0.45)]";
-    case "sleeping":
-      return "bg-muted-foreground/45";
-  }
-}
-function moodMotionClass(mood) {
-  switch (mood) {
-    case "active":
-      return "inspector-pet-active";
-    case "attention":
-      return "inspector-pet-attention";
-    case "idle":
-      return "";
-    case "sleeping":
-      return "inspector-pet-sleeping";
-  }
-}
-function InspectorPet({ logs }) {
-  const [portalHost, setPortalHost] = reactExports.useState(null);
-  const [viewport, setViewport] = reactExports.useState(readViewport);
-  const [position, setPosition] = reactExports.useState({
-    x: INSPECTOR_PET_MARGIN,
-    y: INSPECTOR_PET_MARGIN
-  });
-  const [clockMs, setClockMs] = reactExports.useState(() => Date.now());
-  const [scuttling, setScuttling] = reactExports.useState(false);
-  const [panelTick, setPanelTick] = reactExports.useState(0);
-  const [panelVisible, setPanelVisible] = reactExports.useState(false);
-  const [reactionTick, setReactionTick] = reactExports.useState(0);
-  const [reactionVisible, setReactionVisible] = reactExports.useState(false);
-  const [dragging, setDragging] = reactExports.useState(false);
-  const [roaming, setRoaming] = reactExports.useState(readStoredRoaming);
-  const [reduceMotion, setReduceMotion] = reactExports.useState(false);
-  const dragStateRef = reactExports.useRef(null);
-  const dragOccurredRef = reactExports.useRef(false);
-  const status = reactExports.useMemo(() => resolveInspectorPetStatus(logs, clockMs), [clockMs, logs]);
-  const panelPosition = reactExports.useMemo(
-    () => inspectorPetPanelPosition(position, viewport),
-    [position, viewport]
-  );
-  reactExports.useEffect(() => setPortalHost(document.body), []);
-  reactExports.useEffect(() => {
-    const nextViewport = readViewport();
-    setViewport(nextViewport);
-    setPosition(randomInspectorPetEdgePosition(nextViewport, Math.random()));
-  }, []);
-  reactExports.useEffect(() => {
-    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
-    const handleChange = (event) => setReduceMotion(event.matches);
-    setReduceMotion(mediaQuery.matches);
-    mediaQuery.addEventListener("change", handleChange);
-    return () => mediaQuery.removeEventListener("change", handleChange);
-  }, []);
-  reactExports.useEffect(() => {
-    const intervalId = window.setInterval(() => setClockMs(Date.now()), 15e3);
-    return () => window.clearInterval(intervalId);
-  }, []);
-  reactExports.useEffect(() => {
-    try {
-      window.localStorage.setItem(INSPECTOR_PET_ROAMING_STORAGE_KEY, roaming ? "1" : "0");
-    } catch {
-    }
-  }, [roaming]);
-  reactExports.useEffect(() => {
-    if (!roaming || dragging || reduceMotion) return void 0;
-    let pauseTimeoutId = null;
-    let scuttleTimeoutId = null;
-    const scheduleScuttle = () => {
-      const delay = INSPECTOR_PET_MIN_PAUSE_MS + Math.random() * INSPECTOR_PET_PAUSE_WINDOW_MS;
-      pauseTimeoutId = window.setTimeout(() => {
-        setScuttling(true);
-        setPosition(
-          (current) => nextInspectorPetWalkingPosition(current, viewport, Math.random(), Math.random())
-        );
-        scuttleTimeoutId = window.setTimeout(() => {
-          setScuttling(false);
-          scheduleScuttle();
-        }, INSPECTOR_PET_SCUTTLE_MS);
-      }, delay);
-    };
-    scheduleScuttle();
-    return () => {
-      if (pauseTimeoutId !== null) window.clearTimeout(pauseTimeoutId);
-      if (scuttleTimeoutId !== null) window.clearTimeout(scuttleTimeoutId);
-    };
-  }, [dragging, reduceMotion, roaming, viewport]);
-  reactExports.useEffect(() => {
-    const handleResize = () => {
-      const nextViewport = readViewport();
-      setScuttling(false);
-      setViewport(nextViewport);
-      setPosition((current) => snapInspectorPetToEdge(current, nextViewport));
-    };
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
-  reactExports.useEffect(() => {
-    if (!panelVisible) return void 0;
-    const timeoutId = window.setTimeout(
-      () => setPanelVisible(false),
-      INSPECTOR_PET_PANEL_DISMISS_MS
-    );
-    return () => window.clearTimeout(timeoutId);
-  }, [panelTick, panelVisible]);
-  reactExports.useEffect(() => {
-    if (!reactionVisible) return void 0;
-    const timeoutId = window.setTimeout(() => setReactionVisible(false), INSPECTOR_PET_REACTION_MS);
-    return () => window.clearTimeout(timeoutId);
-  }, [reactionTick, reactionVisible]);
-  const handlePet = reactExports.useCallback(() => {
-    if (dragOccurredRef.current) {
-      dragOccurredRef.current = false;
-      return;
-    }
-    setClockMs(Date.now());
-    setPanelTick((current) => current + 1);
-    setPanelVisible(true);
-    setReactionTick((current) => current + 1);
-    setReactionVisible(true);
-  }, []);
-  const handlePointerDown = reactExports.useCallback((event) => {
-    const rect = event.currentTarget.getBoundingClientRect();
-    dragOccurredRef.current = false;
-    dragStateRef.current = {
-      pointerId: event.pointerId,
-      offsetX: event.clientX - rect.left,
-      offsetY: event.clientY - rect.top,
-      startX: event.clientX,
-      startY: event.clientY,
-      moved: false
-    };
-    event.currentTarget.setPointerCapture(event.pointerId);
-    setScuttling(false);
-    setPanelVisible(false);
-    setDragging(true);
-  }, []);
-  const handlePointerMove = reactExports.useCallback(
-    (event) => {
-      const dragState = dragStateRef.current;
-      if (dragState === null || dragState.pointerId !== event.pointerId) return;
-      const moved = dragState.moved || Math.abs(event.clientX - dragState.startX) >= INSPECTOR_PET_DRAG_THRESHOLD || Math.abs(event.clientY - dragState.startY) >= INSPECTOR_PET_DRAG_THRESHOLD;
-      dragState.moved = moved;
-      dragOccurredRef.current = moved;
-      setPosition(
-        clampInspectorPetPosition(
-          {
-            x: event.clientX - dragState.offsetX,
-            y: event.clientY - dragState.offsetY
-          },
-          viewport
-        )
-      );
-    },
-    [viewport]
-  );
-  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);
-      }
-      dragOccurredRef.current = dragState.moved;
-      dragStateRef.current = null;
-      setDragging(false);
-      setPosition((current) => snapInspectorPetToEdge(current, viewport));
-    },
-    [viewport]
-  );
-  const handlePointerCancel = reactExports.useCallback((event) => {
-    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
-      event.currentTarget.releasePointerCapture(event.pointerId);
-    }
-    dragStateRef.current = null;
-    dragOccurredRef.current = false;
-    setDragging(false);
-  }, []);
-  const handleToggleRoaming = reactExports.useCallback(() => {
-    setScuttling(false);
-    setRoaming((current) => !current);
-  }, []);
-  const petStyle = reactExports.useMemo(
-    () => ({
-      transform: `translate3d(${String(position.x)}px, ${String(position.y)}px, 0) scale(${dragging ? "1.04" : "1"})`,
-      transition: dragging ? "none" : scuttling ? `transform ${String(INSPECTOR_PET_SCUTTLE_MS)}ms cubic-bezier(0.22, 0.72, 0.32, 1)` : "transform 900ms cubic-bezier(0.22, 0.72, 0.32, 1)",
-      touchAction: "none"
-    }),
-    [dragging, position.x, position.y, scuttling]
-  );
-  const panelStyle = reactExports.useMemo(
-    () => ({ left: panelPosition.x, top: panelPosition.y }),
-    [panelPosition.x, panelPosition.y]
-  );
-  const roamingLabel = roaming ? "Pause pet roaming" : "Resume pet roaming";
-  if (portalHost === null) return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
-  return reactDomExports.createPortal(
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "div",
-      {
-        className: "pointer-events-none fixed inset-0 isolate",
-        style: { zIndex: INSPECTOR_PET_TOP_LAYER_Z_INDEX },
-        "data-inspector-pet-layer": "true",
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "button",
-            {
-              type: "button",
-              className: cn(
-                "pointer-events-auto fixed left-0 top-0 z-10 flex size-28 items-center justify-center bg-transparent text-foreground outline-none transition-[filter,opacity] duration-200 hover:opacity-95 hover:drop-shadow-[0_0_28px_rgba(245,158,11,0.32)] focus-visible:drop-shadow-[0_0_14px_rgba(251,191,36,0.72)]",
-                dragging ? "cursor-grabbing" : "cursor-grab"
-              ),
-              style: petStyle,
-              "data-pet-mood": status.mood,
-              "data-pet-moving": scuttling ? "true" : "false",
-              onClick: handlePet,
-              onPointerDown: handlePointerDown,
-              onPointerMove: handlePointerMove,
-              onPointerUp: handlePointerUp,
-              onPointerCancel: handlePointerCancel,
-              "aria-label": `Inspector pet: ${status.label}`,
-              title: status.label,
-              children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                "span",
-                {
-                  className: cn(
-                    "relative z-10 flex size-24 items-center justify-center",
-                    reactionVisible && "inspector-pet-patted"
-                  ),
-                  "aria-hidden": "true",
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      "span",
-                      {
-                        className: cn(
-                          "relative flex size-24 items-center justify-center",
-                          moodMotionClass(status.mood)
-                        ),
-                        children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "relative flex size-24 items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                          InspectorPetCrab3D,
-                          {
-                            mood: status.mood,
-                            moving: scuttling && !dragging,
-                            reduceMotion
-                          }
-                        ) })
-                      }
-                    ),
-                    reactionVisible && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      Heart,
-                      {
-                        className: "inspector-pet-heart absolute -right-2 -top-3 size-5 fill-amber-400 text-amber-400"
-                      },
-                      reactionTick
-                    )
-                  ]
-                }
-              )
-            }
-          ),
-          panelVisible && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "div",
-            {
-              className: "pointer-events-auto fixed z-20 w-48 rounded-md border border-border/80 bg-popover/95 px-3 py-2 text-popover-foreground shadow-[0_14px_34px_rgba(0,0,0,0.28)] backdrop-blur",
-              style: panelStyle,
-              role: "status",
-              "aria-live": "polite",
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: cn("size-2 shrink-0 rounded-full", moodDotClass(status.mood)) }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "min-w-0 flex-1 truncate text-xs font-medium", children: status.label }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "button",
-                    {
-                      type: "button",
-                      className: "inline-flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
-                      onClick: handleToggleRoaming,
-                      "aria-label": roamingLabel,
-                      title: roamingLabel,
-                      children: roaming ? /* @__PURE__ */ jsxRuntimeExports.jsx(Pause, { className: "size-3.5" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Play, { className: "size-3.5" })
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-1 flex items-center justify-between gap-3 font-mono text-[10px] text-muted-foreground", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
-                    String(status.capturedCount),
-                    " captured"
-                  ] }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: status.pendingCount > 0 ? `${String(status.pendingCount)} active` : scuttling ? "Scuttling" : roaming ? "Resting" : "Paused" })
-                ] })
-              ]
-            }
-          )
-        ]
-      }
-    ),
-    portalHost
-  );
-}
 const DEFAULT_QUESTION = "Analyze the current Inspector session. What looks abnormal, slow, or likely to hang?";
 function providerSupportsPiAgent(provider) {
   return provider.openaiResponsesBaseUrl !== void 0 || provider.openaiBaseUrl !== void 0 || provider.anthropicBaseUrl !== void 0;
@@ -13196,7 +12258,10 @@ function PiAgentPanel({ currentSessionId, logCount }) {
     };
     void fetch("/api/pi-agent", {
       method: "POST",
-      headers: { "content-type": "application/json" },
+      headers: {
+        "content-type": "application/json",
+        "x-agent-inspector-csrf": "1"
+      },
       body: JSON.stringify(body)
     }).then(async (response) => {
       const raw = await response.text();
@@ -13264,44 +12329,421 @@ function PiAgentPanel({ currentSessionId, logCount }) {
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "button",
       {
-        type: "button",
-        onClick: askPiAgent,
-        disabled: !canAsk,
-        className: "mt-2 inline-flex h-8 w-full items-center justify-center gap-2 rounded-md bg-cyan-400/12 px-3 text-xs font-medium text-cyan-100 shadow-[inset_0_0_0_1px_rgba(103,232,249,0.18)] transition-colors hover:bg-cyan-400/18 disabled:cursor-not-allowed disabled:opacity-50",
-        children: [
-          loading ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Send, { className: "size-3.5" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: loading ? "Thinking..." : "Ask Pi" })
-        ]
+        type: "button",
+        onClick: askPiAgent,
+        disabled: !canAsk,
+        className: "mt-2 inline-flex h-8 w-full items-center justify-center gap-2 rounded-md bg-cyan-400/12 px-3 text-xs font-medium text-cyan-100 shadow-[inset_0_0_0_1px_rgba(103,232,249,0.18)] transition-colors hover:bg-cyan-400/18 disabled:cursor-not-allowed disabled:opacity-50",
+        children: [
+          loading ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Send, { className: "size-3.5" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: loading ? "Thinking..." : "Ask Pi" })
+        ]
+      }
+    ),
+    piProviders.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-2 text-[11px] leading-5 text-muted-foreground", children: "Configure a Provider with Responses, Chat, or Anthropic URL to enable Pi Agent." }),
+    status !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-2 break-words font-mono text-[10px] text-cyan-100/70", children: status }),
+    answer !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-3 max-h-64 overflow-y-auto whitespace-pre-wrap rounded-md bg-black/25 p-3 text-xs leading-5 text-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.05)]", children: answer }),
+    logCount === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-2 text-[11px] leading-5 text-muted-foreground", children: "No logs are visible in this scope yet; Pi Agent can still answer Provider setup questions." })
+  ] });
+}
+function computeCacheTrends(groups) {
+  const result = /* @__PURE__ */ new Map();
+  for (const group of groups) {
+    const logs = group.logs;
+    for (let i = 1; i < logs.length; i++) {
+      const prev = logs[i - 1];
+      const curr = logs[i];
+      if (prev === void 0 || curr === void 0) continue;
+      result.set(curr.id, {
+        creation: compareField(prev.cacheCreationInputTokens, curr.cacheCreationInputTokens),
+        read: compareField(prev.cacheReadInputTokens, curr.cacheReadInputTokens)
+      });
+    }
+  }
+  return result;
+}
+function compareField(previous, current) {
+  if (current === null) return null;
+  if (previous === null) return null;
+  if (current > previous) return { direction: "up", delta: current - previous };
+  if (current < previous) return { direction: "down", delta: previous - current };
+  return null;
+}
+function formatLastSuccess(lastSuccessAt) {
+  if (lastSuccessAt === null) return null;
+  return new Date(lastSuccessAt).toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+}
+function buildDescription(state, message, hasLogs) {
+  const lastSuccess = formatLastSuccess(state.lastSuccessAt);
+  const retry = state.retryCount > 0 ? ` Retry ${state.retryCount.toString()}.` : "";
+  const retained = hasLogs ? " Captured logs remain visible." : "";
+  const lastUpdate = lastSuccess === null ? "" : ` Last update ${lastSuccess}.`;
+  return `${message}${lastUpdate}${retry}${retained}`;
+}
+function presentationForStatus(status, state, hasLogs) {
+  switch (status) {
+    case "connecting":
+      return {
+        label: "Connecting",
+        description: buildDescription(state, "Waiting for the first live update.", hasLogs),
+        toneClass: "border-cyan-400/20 bg-cyan-500/8 text-cyan-100",
+        dotClass: "bg-cyan-300 animate-pulse motion-reduce:animate-none",
+        canRetry: false,
+        canStop: false
+      };
+    case "live":
+      return {
+        label: "Live",
+        description: buildDescription(state, "Live updates are current.", hasLogs),
+        toneClass: "border-emerald-400/20 bg-emerald-500/8 text-emerald-100",
+        dotClass: "bg-emerald-300",
+        canRetry: false,
+        canStop: false
+      };
+    case "reconnecting":
+      return {
+        label: "Reconnecting",
+        description: buildDescription(state, "Live updates were interrupted.", hasLogs),
+        toneClass: "border-amber-400/20 bg-amber-500/8 text-amber-100",
+        dotClass: "bg-amber-300 animate-pulse motion-reduce:animate-none",
+        canRetry: true,
+        canStop: true
+      };
+    case "stale":
+      return {
+        label: "Stale data",
+        description: buildDescription(state, "Live updates have not resumed.", hasLogs),
+        toneClass: "border-orange-400/25 bg-orange-500/10 text-orange-100",
+        dotClass: "bg-orange-300",
+        canRetry: true,
+        canStop: true
+      };
+    case "offline":
+      return {
+        label: "Offline",
+        description: buildDescription(
+          state,
+          state.errorMessage ?? "Live updates are paused.",
+          hasLogs
+        ),
+        toneClass: "border-slate-400/20 bg-slate-500/10 text-slate-200",
+        dotClass: "bg-slate-400",
+        canRetry: true,
+        canStop: false
+      };
+    case "error":
+      return {
+        label: "Connection error",
+        description: buildDescription(
+          state,
+          state.errorMessage ?? "The live stream reported a recoverable error.",
+          hasLogs
+        ),
+        toneClass: "border-red-400/25 bg-red-500/10 text-red-100",
+        dotClass: "bg-red-300",
+        canRetry: true,
+        canStop: true
+      };
+  }
+}
+function LiveConnectionBadge({ state }) {
+  const presentation = presentationForStatus(state.status, state, false);
+  const lastSuccess = formatLastSuccess(state.lastSuccessAt);
+  const retryLabel = state.retryCount > 0 ? `Retry ${state.retryCount.toString()}` : null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "span",
+    {
+      role: "status",
+      "aria-label": presentation.description,
+      "data-connection-state": state.status,
+      className: cn(
+        "inline-flex h-7 max-w-full items-center gap-1.5 rounded-full border px-2.5 text-xs font-medium",
+        presentation.toneClass
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: cn("size-1.5 shrink-0 rounded-full", presentation.dotClass) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "shrink-0", children: presentation.label }),
+        retryLabel !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "hidden truncate text-current/70 sm:inline", children: retryLabel }),
+        lastSuccess !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "hidden truncate font-mono text-[10px] text-current/65 md:inline", children: [
+          "Last ",
+          lastSuccess
+        ] })
+      ]
+    }
+  );
+}
+function LiveConnectionStatus({
+  state,
+  hasLogs,
+  onRetry,
+  onStop
+}) {
+  const presentation = presentationForStatus(state.status, state, hasLogs);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      "data-connection-state": state.status,
+      className: cn(
+        "mt-2 flex flex-wrap items-center gap-x-3 gap-y-2 rounded-md border px-3 py-2 text-xs",
+        presentation.toneClass
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: cn("size-2 shrink-0 rounded-full", presentation.dotClass) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "shrink-0 font-semibold", children: presentation.label }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "min-w-0 text-current/75", children: presentation.description })
+        ] }),
+        (presentation.canRetry || presentation.canStop) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [
+          presentation.canRetry && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onRetry,
+              className: "inline-flex h-7 items-center gap-1 rounded-md bg-black/15 px-2 font-medium transition-colors hover:bg-black/25 focus-visible:ring-1 focus-visible:ring-current focus-visible:outline-none",
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "size-3" }),
+                "Retry now"
+              ]
+            }
+          ),
+          presentation.canStop && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onStop,
+              className: "inline-flex h-7 items-center gap-1 rounded-md px-2 text-current/70 transition-colors hover:bg-black/15 hover:text-current focus-visible:ring-1 focus-visible:ring-current focus-visible:outline-none",
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(CircleStop, { className: "size-3" }),
+                "Stop retrying"
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function ApplicationBar({
+  liveConnection,
+  alertsAction,
+  settingsAction
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "header",
+    {
+      "data-application-bar": "true",
+      className: "border-border/70 bg-background/95 sticky top-0 z-50 shrink-0 border-b px-3 py-2 shadow-[0_10px_30px_rgba(0,0,0,0.14)] backdrop-blur lg:px-4",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-2 sm:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)]", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "a",
+          {
+            href: "/",
+            "aria-label": "Agent Inspector home",
+            className: "flex min-w-0 items-center gap-2 rounded-md focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(CrabLogo, { className: "size-7 shrink-0 text-amber-500" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block truncate text-sm font-bold leading-4", children: "Agent Inspector" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "hidden truncate text-[10px] font-medium text-muted-foreground md:block", children: "Local First. Evidence First." })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "hidden shrink-0 font-mono text-[10px] text-muted-foreground lg:inline", children: [
+                "v",
+                packageJson.version
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "order-3 col-span-2 flex min-w-0 justify-start sm:order-2 sm:col-span-1 sm:justify-center", children: liveConnection === void 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "span",
+          {
+            "data-connection-state": "stored",
+            className: "border-border/70 bg-muted/50 inline-flex h-7 max-w-full items-center gap-1.5 rounded-full border px-2.5 text-xs font-medium text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "size-1.5 shrink-0 rounded-full bg-slate-400" }),
+              "Stored session"
+            ]
+          }
+        ) : /* @__PURE__ */ jsxRuntimeExports.jsx(LiveConnectionBadge, { state: liveConnection }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "nav",
+          {
+            "aria-label": "Application actions",
+            className: "order-2 flex shrink-0 items-center justify-end gap-1 sm:order-3",
+            children: [
+              alertsAction,
+              settingsAction
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+function formatDurationSeconds(ms) {
+  return `${Math.max(0, Math.ceil(ms / 1e3)).toString()}s`;
+}
+function SessionLoadProgressBar({
+  progress
+}) {
+  const elapsedRatio = Math.min(1, progress.elapsedMs / progress.timeoutMs);
+  const percent = Math.max(4, Math.round(elapsedRatio * 100));
+  const remainingMs = Math.max(0, progress.timeoutMs - progress.elapsedMs);
+  const nearTimeout = elapsedRatio >= 0.75;
+  const details = [
+    progress.loadedLogs > 0 ? `${progress.loadedLogs.toString()} logs` : null,
+    progress.loadedPages > 0 ? `${progress.loadedPages.toString()} page${progress.loadedPages === 1 ? "" : "s"}` : null,
+    `${formatDurationSeconds(remainingMs)} before timeout`
+  ].filter((item) => item !== null);
+  const valueText = `${progress.label}: ${details.join(", ")}`;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0 space-y-1 px-1 pb-1", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 items-center justify-between gap-3 font-mono text-[10px] text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "min-w-0 truncate", children: progress.label }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: cn("shrink-0 tabular-nums", nearTimeout && "text-amber-300"), children: details.join(" / ") })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        role: "progressbar",
+        "aria-label": progress.label,
+        "aria-valuemin": 0,
+        "aria-valuemax": progress.timeoutMs,
+        "aria-valuenow": Math.min(progress.elapsedMs, progress.timeoutMs),
+        "aria-valuetext": valueText,
+        className: "h-1.5 overflow-hidden rounded-full bg-white/[0.06]",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: cn(
+              "h-full rounded-full transition-all duration-300 motion-reduce:transition-none",
+              nearTimeout ? "bg-amber-300/80" : "bg-cyan-300/70"
+            ),
+            style: { width: `${percent.toString()}%` }
+          }
+        )
       }
-    ),
-    piProviders.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-2 text-[11px] leading-5 text-muted-foreground", children: "Configure a Provider with Responses, Chat, or Anthropic URL to enable Pi Agent." }),
-    status !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-2 break-words font-mono text-[10px] text-cyan-100/70", children: status }),
-    answer !== "" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-3 max-h-64 overflow-y-auto whitespace-pre-wrap rounded-md bg-black/25 p-3 text-xs leading-5 text-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.05)]", children: answer }),
-    logCount === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-2 text-[11px] leading-5 text-muted-foreground", children: "No logs are visible in this scope yet; Pi Agent can still answer Provider setup questions." })
+    )
   ] });
 }
-function computeCacheTrends(groups) {
-  const result = /* @__PURE__ */ new Map();
-  for (const group of groups) {
-    const logs = group.logs;
-    for (let i = 1; i < logs.length; i++) {
-      const prev = logs[i - 1];
-      const curr = logs[i];
-      if (prev === void 0 || curr === void 0) continue;
-      result.set(curr.id, {
-        creation: compareField(prev.cacheCreationInputTokens, curr.cacheCreationInputTokens),
-        read: compareField(prev.cacheReadInputTokens, curr.cacheReadInputTokens)
-      });
+function preferredScrollBehavior(reducedMotion) {
+  return reducedMotion ? "auto" : "smooth";
+}
+function browserPrefersReducedMotion() {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function createInitialLiveConnectionState() {
+  return {
+    status: "connecting",
+    lastSuccessAt: null,
+    retryCount: 0,
+    errorMessage: null
+  };
+}
+function reduceLiveConnectionState(state, event) {
+  switch (event.type) {
+    case "connect-requested":
+      return {
+        ...state,
+        status: state.lastSuccessAt === null ? "connecting" : state.status === "stale" ? "stale" : "reconnecting",
+        errorMessage: null
+      };
+    case "message-received":
+      return {
+        status: "live",
+        lastSuccessAt: event.at,
+        retryCount: 0,
+        errorMessage: null
+      };
+    case "connection-lost": {
+      const retryCount = state.retryCount + 1;
+      if (!event.online) {
+        return {
+          ...state,
+          status: "offline",
+          retryCount,
+          errorMessage: "Browser is offline."
+        };
+      }
+      return {
+        ...state,
+        status: state.lastSuccessAt === null ? "error" : "reconnecting",
+        retryCount,
+        errorMessage: event.message
+      };
     }
+    case "stale-timeout":
+      if (state.lastSuccessAt === null || state.status === "live" || state.status === "offline") {
+        return state;
+      }
+      return { ...state, status: "stale" };
+    case "browser-offline":
+      return {
+        ...state,
+        status: "offline",
+        errorMessage: "Browser is offline."
+      };
+    case "stop-retrying":
+      return {
+        ...state,
+        status: "offline",
+        errorMessage: "Automatic live updates are paused."
+      };
+    case "recoverable-error":
+      return {
+        ...state,
+        status: "error",
+        errorMessage: event.message
+      };
   }
-  return result;
 }
-function compareField(previous, current) {
-  if (current === null) return null;
-  if (previous === null) return null;
-  if (current > previous) return { direction: "up", delta: current - previous };
-  if (current < previous) return { direction: "down", delta: previous - current };
-  return null;
+function resolveLiveEmptyState(state) {
+  if (state === void 0 || state.status === "live") return "empty";
+  return state.status;
+}
+function getLiveEmptyStateCopy(state) {
+  switch (state) {
+    case "connecting":
+      return {
+        title: "Connecting to the live stream...",
+        description: "Waiting for the first successful initialization before checking for logs.",
+        showConnectionCommands: false
+      };
+    case "empty":
+      return {
+        title: "No logs captured yet.",
+        description: "Connect an AI coding tool to capture its first request.",
+        showConnectionCommands: true
+      };
+    case "reconnecting":
+      return {
+        title: "Reconnecting to live updates...",
+        description: "The stream was interrupted. Agent Inspector is retrying automatically.",
+        showConnectionCommands: false
+      };
+    case "stale":
+      return {
+        title: "Live data is stale.",
+        description: "No logs are hidden; retry the connection to resume live updates.",
+        showConnectionCommands: false
+      };
+    case "offline":
+      return {
+        title: "Live updates are offline.",
+        description: "Check the browser and Inspector connection, then retry.",
+        showConnectionCommands: false
+      };
+    case "error":
+      return {
+        title: "Live updates could not initialize.",
+        description: "The error is recoverable. Retry without reloading the page.",
+        showConnectionCommands: false
+      };
+  }
 }
 const COLLAPSED_CLIENTS_STORAGE_KEY = "agent-inspector.hierarchy.collapsedClients";
 const COLLAPSED_PROCESSES_STORAGE_KEY = "agent-inspector.hierarchy.collapsedProcesses";
@@ -13782,6 +13224,61 @@ function ProcessGroupSection({
     )) })
   ] });
 }
+const RAW_EXPORT_DIALOG_CLASS_NAME = "w-[calc(100%-1rem)] border-warning/30 bg-popover text-popover-foreground sm:max-w-lg";
+const RAW_EXPORT_RISK_ITEMS = [
+  {
+    label: "Headers",
+    detail: "request and response headers, including authorization or cookie values"
+  },
+  {
+    label: "Prompts",
+    detail: "system instructions, user prompts, model responses, and conversation history"
+  },
+  {
+    label: "Source content",
+    detail: "source code, file contents, tool inputs, and tool output"
+  },
+  {
+    label: "Secrets",
+    detail: "API keys, access tokens, credentials, and other sensitive values"
+  }
+];
+function RawExportWarning({
+  onCancel,
+  onExportRedacted,
+  onConfirmRaw
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(DialogTitle, { children: "Export unredacted logs?" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(DialogDescription, { children: "Raw exports bypass Agent Inspector redaction and may expose sensitive captured data." })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        role: "alert",
+        className: "rounded-md border border-warning/35 bg-warning/10 px-3 py-3 text-sm text-foreground",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "font-medium", children: "The raw archive may include:" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "mt-2 list-disc space-y-1 pl-5 text-xs leading-relaxed text-muted-foreground", children: RAW_EXPORT_RISK_ITEMS.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-semibold text-foreground", children: [
+              item.label,
+              ":"
+            ] }),
+            " ",
+            item.detail
+          ] }, item.label)) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-3 text-xs leading-relaxed text-muted-foreground", children: "Only continue if you trust where this file will be stored and everyone it may be shared with." })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onExportRedacted, children: "Export redacted instead" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "button", variant: "destructive", size: "sm", onClick: onConfirmRaw, children: "Export raw data" })
+    ] })
+  ] });
+}
 const NAV_ATTR = "data-nav-id";
 const NAV_ACTION_ATTR = "data-nav-action";
 function findNavItems(container) {
@@ -15209,7 +14706,7 @@ function LogPaginationButton({
       type: "button",
       onClick,
       disabled,
-      className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-xs text-muted-foreground transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-45",
+      className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-xs text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-45",
       title,
       children: [
         icon,
@@ -15218,36 +14715,6 @@ function LogPaginationButton({
     }
   );
 }
-function formatDurationSeconds(ms) {
-  return `${Math.max(0, Math.ceil(ms / 1e3)).toString()}s`;
-}
-function SessionLoadProgressBar({ progress }) {
-  const elapsedRatio = Math.min(1, progress.elapsedMs / progress.timeoutMs);
-  const percent = Math.max(4, Math.round(elapsedRatio * 100));
-  const remainingMs = Math.max(0, progress.timeoutMs - progress.elapsedMs);
-  const nearTimeout = elapsedRatio >= 0.75;
-  const details = [
-    progress.loadedLogs > 0 ? `${progress.loadedLogs.toString()} logs` : null,
-    progress.loadedPages > 0 ? `${progress.loadedPages.toString()} page${progress.loadedPages === 1 ? "" : "s"}` : null,
-    `${formatDurationSeconds(remainingMs)} before timeout`
-  ].filter((item) => item !== null);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0 space-y-1 px-1 pb-1", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 items-center justify-between gap-3 font-mono text-[10px] text-muted-foreground", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "min-w-0 truncate", children: progress.label }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: cn("shrink-0 tabular-nums", nearTimeout && "text-amber-300"), children: details.join(" / ") })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-1.5 overflow-hidden rounded-full bg-white/[0.06]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "div",
-      {
-        className: cn(
-          "h-full rounded-full transition-all duration-300",
-          nearTimeout ? "bg-amber-300/80" : "bg-cyan-300/70"
-        ),
-        style: { width: `${percent.toString()}%` }
-      }
-    ) })
-  ] });
-}
 function LogPaginationBar({
   logs,
   pagination,
@@ -15256,16 +14723,19 @@ function LogPaginationBar({
   if (pagination === void 0) return null;
   const disabled = pagination.isLoading;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "div",
+    "nav",
     {
+      "aria-label": "Session log pagination",
       className: cn(
         "flex min-h-9 flex-col gap-2 px-1 py-1 sm:flex-row sm:items-center",
         embedded ? "border-t border-white/10 pt-2" : "border border-border bg-card shadow-sm mb-3 rounded-[8px] 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", { role: "status", "aria-live": "polite", "aria-atomic": "true", children: [
+            formatPaginationStatus({ logs, pagination }),
+            pagination.isLoading && logs.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-2", children: "Loading..." })
+          ] }),
           pagination.loadProgress !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(SessionLoadProgressBar, { progress: pagination.loadProgress })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center gap-1 overflow-x-auto sm:w-auto", children: [
@@ -15363,7 +14833,10 @@ function highlightLogTarget(target) {
 function focusLogTarget(logId) {
   const target = document.getElementById(`log-${String(logId)}`);
   if (!(target instanceof HTMLElement)) return false;
-  target.scrollIntoView({ block: "center", behavior: "smooth" });
+  target.scrollIntoView({
+    block: "center",
+    behavior: preferredScrollBehavior(browserPrefersReducedMotion())
+  });
   target.focus({ preventScroll: true });
   highlightLogTarget(target);
   return true;
@@ -15390,14 +14863,14 @@ function CopyableCommand({ command }) {
       setTimeout(() => setCopied(false), 2e3);
     });
   }, [command]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-black/20 inline-flex max-w-full items-center gap-2 rounded-md px-3 py-2 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.055)]", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "m-0 overflow-x-auto font-mono text-sm text-cyan-200", children: command }),
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-command-example": "true", className: COPYABLE_COMMAND_CONTAINER_CLASS_NAME, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: COPYABLE_COMMAND_TEXT_CLASS_NAME, children: command }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
       {
         type: "button",
         onClick: handleCopy,
-        className: "shrink-0 cursor-pointer text-muted-foreground transition-colors hover:text-foreground",
+        className: "shrink-0 cursor-pointer rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
         "aria-label": "Copy command",
         children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-4" })
       }
@@ -15429,46 +14902,6 @@ function SidebarMetric({ label, value }) {
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-0.5 truncate font-mono text-[10px] uppercase tracking-[0.12em] text-white/35", children: label })
   ] });
 }
-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-14 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 ThemeModeToggle() {
   const { themeMode, setThemeMode } = useThemeMode();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -15484,7 +14917,7 @@ function ThemeModeToggle() {
             type: "button",
             onClick: () => setThemeMode("light"),
             className: cn(
-              "inline-flex size-7 items-center justify-center rounded-[6px] text-muted-foreground transition-colors hover:text-foreground",
+              "inline-flex size-7 items-center justify-center rounded-[6px] text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
               themeMode === "light" && "bg-background text-foreground shadow-sm"
             ),
             "aria-label": "Use light mode",
@@ -15499,7 +14932,7 @@ function ThemeModeToggle() {
             type: "button",
             onClick: () => setThemeMode("eye-care"),
             className: cn(
-              "inline-flex size-7 items-center justify-center rounded-[6px] text-muted-foreground transition-colors hover:text-foreground",
+              "inline-flex size-7 items-center justify-center rounded-[6px] text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
               themeMode === "eye-care" && "bg-background text-foreground shadow-sm"
             ),
             "aria-label": "Use eye care mode",
@@ -15514,7 +14947,7 @@ function ThemeModeToggle() {
             type: "button",
             onClick: () => setThemeMode("dark"),
             className: cn(
-              "inline-flex size-7 items-center justify-center rounded-[6px] text-muted-foreground transition-colors hover:text-foreground",
+              "inline-flex size-7 items-center justify-center rounded-[6px] text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
               themeMode === "dark" && "bg-background text-foreground shadow-sm"
             ),
             "aria-label": "Use dark mode",
@@ -15583,81 +15016,6 @@ function UiScaleControl({
     }
   );
 }
-function BrandHeader({
-  compact,
-  crabEntrancePhase,
-  currentSessionId,
-  logCount,
-  uiScalePreference,
-  resolvedUiScale,
-  onUiScaleChange
-}) {
-  if (compact) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-white/[0.035] shadow-[inset_0_1px_0_rgba(255,255,255,0.045),0_16px_44px_rgba(0,0,0,0.18)] rounded-[8px] p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-fit items-start gap-3", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CrabFamily, { compact: true, entrancePhase: crabEntrancePhase }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-fit", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-fit flex-wrap items-baseline gap-x-2 gap-y-0.5", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "whitespace-nowrap text-base font-bold", children: "Agent 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(ThemeModeToggle, {}),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          UiScaleControl,
-          {
-            preference: uiScalePreference,
-            resolvedScale: resolvedUiScale,
-            onChange: onUiScaleChange
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(AlertsDialog, {}),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(GroupsDialog, {}),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(AgentLabDialog, { currentSessionId, logCount }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsDialog, {})
-      ] })
-    ] }) });
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-start justify-between gap-x-4 gap-y-3 pb-6", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-w-10 flex-1", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("h1", { className: "flex min-w-fit flex-col items-center gap-2 text-center", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex max-w-full flex-wrap items-end justify-center gap-x-2 gap-y-1", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CrabFamily, { compact: false, entrancePhase: crabEntrancePhase }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex min-w-fit flex-wrap items-baseline justify-center gap-x-2 gap-y-0.5 pl-1", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "whitespace-nowrap 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-full text-sm font-semibold text-muted-foreground", children: "Local First. Evidence First." })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-1 justify-end gap-1", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeModeToggle, {}),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        UiScaleControl,
-        {
-          preference: uiScalePreference,
-          resolvedScale: resolvedUiScale,
-          onChange: onUiScaleChange
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(AlertsDialog, {}),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(GroupsDialog, {}),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(AgentLabDialog, { currentSessionId, logCount }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsDialog, {})
-    ] })
-  ] });
-}
 const DETAILS_PANEL_COLLAPSED_STORAGE_KEY = "agent-inspector.detailsPanelCollapsed";
 const INSPECTOR_PET_VISIBLE_STORAGE_KEY = "agent-inspector.pet.visible";
 function readStoredDetailsPanelCollapsed() {
@@ -15981,8 +15339,12 @@ function ProxyViewer({
   slowResponseThresholdSeconds,
   timeDisplayFormat,
   isLoading = false,
+  liveConnection,
+  onRetryLiveConnection,
+  onStopLiveConnection,
   pagination,
   sessionLoadProgress,
+  sessionLoadError,
   sessionMemberships = [],
   hideSessionFilter = false,
   pinnedSessionId
@@ -15992,6 +15354,7 @@ function ProxyViewer({
   const { uiScalePreference, resolvedUiScale, setUiScalePreference } = useUiScale();
   const [exporting, setExporting] = reactExports.useState(null);
   const [exportError, setExportError] = reactExports.useState(null);
+  const [rawExportDialogOpen, setRawExportDialogOpen] = reactExports.useState(false);
   const [importing, setImporting] = reactExports.useState(false);
   const [importStatus, setImportStatus] = reactExports.useState(null);
   const [importError, setImportError] = reactExports.useState(null);
@@ -16002,9 +15365,6 @@ function ProxyViewer({
   const [petVisible, setPetVisible] = reactExports.useState(true);
   const [petVisibilityStorageLoaded, setPetVisibilityStorageLoaded] = reactExports.useState(false);
   const [comparePair, setComparePair] = reactExports.useState(null);
-  const [crabEntrancePhase, setCrabEntrancePhase] = reactExports.useState(
-    "hidden"
-  );
   const logListRef = reactExports.useRef(null);
   const logListWrapperRef = reactExports.useRef(null);
   const importInputRef = reactExports.useRef(null);
@@ -16026,17 +15386,6 @@ function ProxyViewer({
     },
     []
   );
-  reactExports.useEffect(() => {
-    const perCrabDuration = 400;
-    const startDelay = 50;
-    const playingDone = startDelay + crabVariants.length * perCrabDuration;
-    const t1 = setTimeout(() => setCrabEntrancePhase("playing"), startDelay);
-    const t2 = setTimeout(() => setCrabEntrancePhase("done"), playingDone);
-    return () => {
-      clearTimeout(t1);
-      clearTimeout(t2);
-    };
-  }, []);
   reactExports.useEffect(() => {
     setDetailsPanelCollapsed(readStoredDetailsPanelCollapsed());
     setDetailsPanelStorageLoaded(true);
@@ -16096,6 +15445,24 @@ function ProxyViewer({
     },
     [logs, onNotify]
   );
+  const handleExportRequest = reactExports.useCallback(
+    (mode) => {
+      if (exportRequiresConfirmation(mode)) {
+        setRawExportDialogOpen(true);
+        return;
+      }
+      void handleExport(mode);
+    },
+    [handleExport]
+  );
+  const handleExportRedactedInstead = reactExports.useCallback(() => {
+    setRawExportDialogOpen(false);
+    void handleExport("redacted");
+  }, [handleExport]);
+  const handleConfirmRawExport = reactExports.useCallback(() => {
+    setRawExportDialogOpen(false);
+    void handleExport("raw");
+  }, [handleExport]);
   const handleImportClick = reactExports.useCallback(() => {
     importInputRef.current?.click();
   }, []);
@@ -16207,6 +15574,8 @@ function ProxyViewer({
   const sessionInputValue = selectedSession === "__all__" ? "" : selectedSession;
   const sessionSelectValue = selectedSession === "__all__" || sessions.includes(selectedSession) ? selectedSession : "__typed__";
   const activeScopeLabel = hasSessionContext && sessionContextScope !== null ? truncateSessionId(sessionContextScope.label) : selectedSession === "__all__" ? "All sessions" : truncateSessionId(selectedSession);
+  const liveEmptyState = resolveLiveEmptyState(liveConnection);
+  const liveEmptyStateCopy = getLiveEmptyStateCopy(liveEmptyState);
   const slateStats = reactExports.useMemo(
     () => buildSessionSlateStats({
       logs,
@@ -16239,14 +15608,22 @@ function ProxyViewer({
     [onSessionChange]
   );
   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 lg:h-screen lg:flex lg:flex-col lg:overflow-hidden", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-background min-h-screen w-full overflow-x-clip text-foreground lg:h-screen lg:flex lg:flex-col lg:overflow-hidden", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ApplicationBar,
+      {
+        liveConnection,
+        alertsAction: /* @__PURE__ */ jsxRuntimeExports.jsx(AlertsDialog, {}),
+        settingsAction: /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsDialog, {})
+      }
+    ),
     /* @__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",
+          "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 motion-reduce:transition-none 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-[calc(21.25rem-0.875rem)] xl:right-[calc(22.5rem-0.875rem)]"
         ),
         "aria-label": detailsPanelCollapsed ? "Show details panel" : "Hide details panel",
@@ -16257,7 +15634,7 @@ function ProxyViewer({
         ]
       }
     ),
-    petVisibilityStorageLoaded && petVisible && /* @__PURE__ */ jsxRuntimeExports.jsx(InspectorPet, { logs }),
+    petVisibilityStorageLoaded && petVisible && /* @__PURE__ */ jsxRuntimeExports.jsx(LazyFeatureBoundary, { feature: "Inspector Pet", children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntimeExports.jsx(LazyInspectorPet, { logs }) }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
@@ -16267,18 +15644,19 @@ function ProxyViewer({
         ),
         children: [
           !detailsPanelCollapsed && /* @__PURE__ */ jsxRuntimeExports.jsx("aside", { className: "bg-background/95 order-1 border-b border-white/[0.045] lg:order-2 lg:h-full lg:overflow-y-auto lg:border-b-0 lg:border-l lg:border-white/[0.055] inspector-scrollbar", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 p-4", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              BrandHeader,
-              {
-                compact: true,
-                crabEntrancePhase,
-                currentSessionId: labSessionId,
-                logCount: logs.length,
-                uiScalePreference,
-                resolvedUiScale,
-                onUiScaleChange: setUiScalePreference
-              }
-            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(SidebarPanel, { label: "Tools", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeModeToggle, {}),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                UiScaleControl,
+                {
+                  preference: uiScalePreference,
+                  resolvedScale: resolvedUiScale,
+                  onChange: setUiScalePreference
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(GroupsDialog, {}),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(AgentLabDialog, { currentSessionId: labSessionId, logCount: logs.length })
+            ] }) }),
             /* @__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 }),
@@ -16346,7 +15724,7 @@ function ProxyViewer({
                     {
                       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",
+                      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 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
                       "aria-label": "Clear session filter",
                       title: "Clear session filter",
                       children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "size-3.5" })
@@ -16354,7 +15732,14 @@ function ProxyViewer({
                   )
                 ] }),
                 /* @__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.jsx(
+                    SelectTrigger,
+                    {
+                      "aria-label": "Select a session",
+                      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: [
@@ -16366,7 +15751,14 @@ function ProxyViewer({
                 ] })
               ] }),
               /* @__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.jsx(
+                  SelectTrigger,
+                  {
+                    "aria-label": "Select a model",
+                    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))
@@ -16399,7 +15791,7 @@ function ProxyViewer({
                       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",
+                      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 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none 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" }),
@@ -16413,10 +15805,10 @@ function ProxyViewer({
                   {
                     type: "button",
                     onClick: () => {
-                      void handleExport("redacted");
+                      handleExportRequest("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",
+                    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 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none 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" }),
@@ -16429,10 +15821,10 @@ function ProxyViewer({
                   {
                     type: "button",
                     onClick: () => {
-                      void handleExport("raw");
+                      handleExportRequest("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",
+                    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 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none 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" }),
@@ -16446,10 +15838,18 @@ function ProxyViewer({
                     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",
+                    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 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none 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(
+                        RefreshCw,
+                        {
+                          className: cn(
+                            "size-3.5",
+                            isLoading && "animate-spin motion-reduce:animate-none"
+                          )
+                        }
+                      ),
                       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: reloadSessionLabel })
                     ]
                   }
@@ -16460,7 +15860,7 @@ function ProxyViewer({
                     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",
+                    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 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none 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" }),
@@ -16474,7 +15874,7 @@ function ProxyViewer({
                     type: "button",
                     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",
+                    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 focus-visible:ring-1 focus-visible:ring-red-300 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
                     title: "Delete persisted history for the selected session.",
                     children: [
                       /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "size-3.5" }),
@@ -16484,15 +15884,50 @@ function ProxyViewer({
                 )
               ] }),
               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 }) }),
+              sessionLoadError !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "div",
+                {
+                  role: "alert",
+                  className: "mt-2 flex flex-wrap items-center gap-2 rounded-md border border-red-400/25 bg-red-500/10 px-3 py-2 text-xs text-red-100",
+                  children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "min-w-0 flex-1", children: [
+                      "Session logs could not be loaded. ",
+                      sessionLoadError,
+                      " Existing logs remain visible."
+                    ] }),
+                    onReloadSession !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: handleReloadCurrentSession,
+                        className: "inline-flex h-7 items-center gap-1 rounded-md bg-black/15 px-2 font-medium transition-colors hover:bg-black/25 focus-visible:ring-1 focus-visible:ring-current focus-visible:outline-none",
+                        children: [
+                          /* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "size-3" }),
+                          "Retry"
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
               /* @__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 })
+              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 }),
+              liveConnection !== void 0 && liveConnection.status !== "live" && onRetryLiveConnection !== void 0 && onStopLiveConnection !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                LiveConnectionStatus,
+                {
+                  state: liveConnection,
+                  hasLogs: logs.length > 0,
+                  onRetry: onRetryLiveConnection,
+                  onStop: onStopLiveConnection
+                }
+              )
             ] }),
             /* @__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: "text-sm font-medium", children: isLoading ? "Loading session data..." : sessionLoadError === void 0 ? "No logs loaded for this session" : "Session logs could not be loaded" }),
                 /* @__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 }) }),
@@ -16504,7 +15939,7 @@ function ProxyViewer({
                       {
                         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",
+                        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 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
                         children: [
                           /* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "size-3.5" }),
                           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Load session" })
@@ -16515,7 +15950,7 @@ function ProxyViewer({
                       "a",
                       {
                         href: "/",
-                        className: "inline-flex h-8 items-center rounded-md px-3 text-xs text-muted-foreground underline transition-colors hover:text-foreground",
+                        className: "inline-flex h-8 items-center rounded-md px-3 text-xs text-muted-foreground underline transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
                         children: "Back to all sessions"
                       }
                     ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -16523,26 +15958,30 @@ function ProxyViewer({
                       {
                         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",
+                        className: "inline-flex h-8 items-center rounded-md px-3 text-xs text-muted-foreground underline transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
                         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.jsx("p", { className: "text-sm font-medium", children: liveEmptyStateCopy.title }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mx-auto max-w-xl text-xs leading-relaxed text-muted-foreground", children: liveEmptyStateCopy.description }),
+                liveEmptyState === "empty" && 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." }),
+                liveEmptyStateCopy.showConnectionCommands && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                  /* @__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",
+                  "aria-label": "Captured logs",
+                  className: "flex flex-col gap-2 rounded-md focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none",
                   children: [
                     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: logListRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                       ConversationGroupList,
@@ -16568,6 +16007,14 @@ function ProxyViewer({
         ]
       }
     ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Dialog, { open: rawExportDialogOpen, onOpenChange: setRawExportDialogOpen, children: /* @__PURE__ */ jsxRuntimeExports.jsx(DialogContent, { className: RAW_EXPORT_DIALOG_CLASS_NAME, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      RawExportWarning,
+      {
+        onCancel: () => setRawExportDialogOpen(false),
+        onExportRedacted: handleExportRedactedInstead,
+        onConfirmRaw: handleConfirmRawExport
+      }
+    ) }) }),
     /* @__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.jsxs(DialogTitle, { children: [
@@ -16606,7 +16053,7 @@ function ProxyViewer({
         )
       ] })
     ] }) }),
-    comparePair !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    comparePair !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(LazyFeatureBoundary, { feature: "Compare", children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       LazyCompareDrawer,
       {
         left: comparePair[0],
@@ -16615,7 +16062,7 @@ function ProxyViewer({
         rightDisplayNumber: displayNumberForLog(comparePair[1], displayNumberByLogId),
         onClose: closeCompare
       }
-    ) })
+    ) }) })
   ] });
 }
 function filterLogs(logs, selectedSession, selectedModel) {
@@ -16712,11 +16159,12 @@ const SESSION_RELOAD_PAGE_LIMIT = 500;
 const MAX_SESSION_RELOAD_PAGES = 200;
 const SESSION_LOGS_FETCH_TIMEOUT_MS = 2e4;
 const SESSION_MEMBERSHIP_FETCH_TIMEOUT_MS = 1e4;
+const SSE_RECONNECT_DELAY_MS = 3e3;
+const SSE_STALE_AFTER_MS = 1e4;
 function buildLogsStreamUrl(sessionId) {
-  const params = new URLSearchParams();
+  const params = new URLSearchParams({ compact: "1" });
   if (sessionId !== void 0) {
     params.set("sessionId", sessionId);
-    params.set("compact", "1");
   }
   const query = params.toString();
   return query.length > 0 ? `/api/logs/stream?${query}` : "/api/logs/stream";
@@ -16796,9 +16244,10 @@ function ProxyViewerContainer({
   const [selectedModel, setSelectedModel] = reactExports.useState("__all__");
   const [knownSessions, setKnownSessions] = reactExports.useState([]);
   const { notice, showToast, dismissToast } = useTransientToast();
-  const [streamInitialized, setStreamInitialized] = reactExports.useState(initialSessionId === void 0);
+  const [liveConnection, setLiveConnection] = reactExports.useState(createInitialLiveConnectionState);
   const [logPage, setLogPage] = reactExports.useState(null);
   const [sessionPageLoading, setSessionPageLoading] = reactExports.useState(initialSessionId !== void 0);
+  const [sessionLoadError, setSessionLoadError] = reactExports.useState(null);
   const [sessionLoadProgress, setSessionLoadProgress] = reactExports.useState(
     void 0
   );
@@ -16806,6 +16255,8 @@ function ProxyViewerContainer({
   const [, startLogTransition] = reactExports.useTransition();
   const eventSourceRef = reactExports.useRef(null);
   const reconnectTimeoutRef = reactExports.useRef(null);
+  const staleTimeoutRef = reactExports.useRef(null);
+  const automaticRetryEnabledRef = reactExports.useRef(true);
   const handledHashRef = reactExports.useRef(null);
   const sessionPageRequestIdRef = reactExports.useRef(0);
   const sessionLoadStartedAtRef = reactExports.useRef(null);
@@ -16904,7 +16355,11 @@ function ProxyViewerContainer({
     if (eventSourceRef.current) {
       eventSourceRef.current.close();
     }
-    setStreamInitialized(false);
+    if (reconnectTimeoutRef.current !== null) {
+      clearTimeout(reconnectTimeoutRef.current);
+      reconnectTimeoutRef.current = null;
+    }
+    setLiveConnection((state) => reduceLiveConnectionState(state, { type: "connect-requested" }));
     const es = new EventSource(buildLogsStreamUrl(initialSessionId));
     eventSourceRef.current = es;
     es.onmessage = (event) => {
@@ -16913,6 +16368,12 @@ function ProxyViewerContainer({
         const parsed = JSON.parse(rawData);
         const updateResult = SSEUpdateSchema.safeParse(parsed);
         if (!updateResult.success) {
+          setLiveConnection(
+            (state) => reduceLiveConnectionState(state, {
+              type: "recoverable-error",
+              message: "The live stream returned invalid data."
+            })
+          );
           showErrorToast("Failed to parse SSE data");
           return;
         }
@@ -16929,7 +16390,13 @@ function ProxyViewerContainer({
             return nextLogs;
           });
           setKnownSessions((prev) => mergeSessionIds(prev, extractSessions(update.logs)));
-          setStreamInitialized(true);
+          if (staleTimeoutRef.current !== null) {
+            clearTimeout(staleTimeoutRef.current);
+            staleTimeoutRef.current = null;
+          }
+          setLiveConnection(
+            (state) => reduceLiveConnectionState(state, { type: "message-received", at: Date.now() })
+          );
           dismissToast();
         } else if (update.type === "update") {
           setKnownSessions((prev) => {
@@ -16937,27 +16404,73 @@ function ProxyViewerContainer({
             return mergeSessionIds(prev, [update.log.sessionId]);
           });
           scheduleUpdate(update.log);
+          if (staleTimeoutRef.current !== null) {
+            clearTimeout(staleTimeoutRef.current);
+            staleTimeoutRef.current = null;
+          }
+          setLiveConnection(
+            (state) => reduceLiveConnectionState(state, { type: "message-received", at: Date.now() })
+          );
         }
       } catch {
+        setLiveConnection(
+          (state) => reduceLiveConnectionState(state, {
+            type: "recoverable-error",
+            message: "The live stream returned malformed JSON."
+          })
+        );
         showErrorToast("Failed to parse SSE data");
       }
     };
     es.onerror = () => {
-      showErrorToast("SSE connection lost, reconnecting...");
-      setStreamInitialized(true);
+      const online = navigator.onLine;
+      setLiveConnection(
+        (state) => reduceLiveConnectionState(state, {
+          type: "connection-lost",
+          online,
+          message: "The live stream disconnected."
+        })
+      );
       es.close();
-      if (reconnectTimeoutRef.current !== null) {
-        clearTimeout(reconnectTimeoutRef.current);
+      if (!online || !automaticRetryEnabledRef.current) return;
+      if (staleTimeoutRef.current === null) {
+        staleTimeoutRef.current = setTimeout(() => {
+          staleTimeoutRef.current = null;
+          setLiveConnection((state) => reduceLiveConnectionState(state, { type: "stale-timeout" }));
+        }, SSE_STALE_AFTER_MS);
       }
-      reconnectTimeoutRef.current = setTimeout(connectSSE, 3e3);
+      reconnectTimeoutRef.current = setTimeout(connectSSE, SSE_RECONNECT_DELAY_MS);
     };
   }, [dismissToast, initialSessionId, scheduleUpdate, showErrorToast]);
+  const retryLiveConnection = reactExports.useCallback(() => {
+    automaticRetryEnabledRef.current = true;
+    if (reconnectTimeoutRef.current !== null) {
+      clearTimeout(reconnectTimeoutRef.current);
+      reconnectTimeoutRef.current = null;
+    }
+    connectSSE();
+  }, [connectSSE]);
+  const stopLiveConnection = reactExports.useCallback(() => {
+    automaticRetryEnabledRef.current = false;
+    eventSourceRef.current?.close();
+    eventSourceRef.current = null;
+    if (reconnectTimeoutRef.current !== null) {
+      clearTimeout(reconnectTimeoutRef.current);
+      reconnectTimeoutRef.current = null;
+    }
+    if (staleTimeoutRef.current !== null) {
+      clearTimeout(staleTimeoutRef.current);
+      staleTimeoutRef.current = null;
+    }
+    setLiveConnection((state) => reduceLiveConnectionState(state, { type: "stop-retrying" }));
+  }, []);
   const loadSessionPage = reactExports.useCallback(
     (request) => {
       if (initialSessionId === void 0) return;
       const requestId = sessionPageRequestIdRef.current + 1;
       sessionPageRequestIdRef.current = requestId;
       setSessionPageLoading(true);
+      setSessionLoadError(null);
       startSessionLoadProgress("Loading session logs", requestId);
       dismissToast();
       void fetchSessionLogsPage(initialSessionId, request).then((page) => {
@@ -16968,15 +16481,16 @@ function ProxyViewerContainer({
         setLogPage(page);
         setSelectedSession(initialSessionId);
         setSessionPageLoading(false);
+        setSessionLoadError(null);
         stopSessionLoadProgress();
         dismissToast();
       }).catch((err) => {
         if (sessionPageRequestIdRef.current !== requestId) return;
-        setAllLogs([]);
-        setLogPage(null);
         setSessionPageLoading(false);
         stopSessionLoadProgress();
-        showErrorToast(err instanceof Error ? err.message : "Failed to load session logs");
+        const message = err instanceof Error ? err.message : "Failed to load session logs";
+        setSessionLoadError(message);
+        showErrorToast(message);
       });
     },
     [
@@ -16992,6 +16506,7 @@ function ProxyViewerContainer({
       const requestId = sessionPageRequestIdRef.current + 1;
       sessionPageRequestIdRef.current = requestId;
       setSessionPageLoading(true);
+      setSessionLoadError(null);
       startSessionLoadProgress("Reloading full session", requestId);
       dismissToast();
       void (async () => {
@@ -17027,6 +16542,7 @@ function ProxyViewerContainer({
         });
         setKnownSessions((prev) => mergeSessionIds(prev, [sessionId]));
         setSessionPageLoading(false);
+        setSessionLoadError(null);
         stopSessionLoadProgress();
         if (page.hasNewer) {
           showToast({
@@ -17040,7 +16556,9 @@ function ProxyViewerContainer({
         if (sessionPageRequestIdRef.current !== requestId) return;
         setSessionPageLoading(false);
         stopSessionLoadProgress();
-        showErrorToast(err instanceof Error ? err.message : "Failed to reload session logs");
+        const message = err instanceof Error ? err.message : "Failed to reload session logs";
+        setSessionLoadError(message);
+        showErrorToast(message);
       });
     },
     [
@@ -17092,7 +16610,28 @@ function ProxyViewerContainer({
   reactExports.useEffect(() => {
     if (initialSessionId !== void 0) return void 0;
     connectSSE();
+    const handleOffline = () => {
+      eventSourceRef.current?.close();
+      eventSourceRef.current = null;
+      if (reconnectTimeoutRef.current !== null) {
+        clearTimeout(reconnectTimeoutRef.current);
+        reconnectTimeoutRef.current = null;
+      }
+      if (staleTimeoutRef.current !== null) {
+        clearTimeout(staleTimeoutRef.current);
+        staleTimeoutRef.current = null;
+      }
+      setLiveConnection((state) => reduceLiveConnectionState(state, { type: "browser-offline" }));
+    };
+    const handleOnline = () => {
+      if (!automaticRetryEnabledRef.current) return;
+      connectSSE();
+    };
+    window.addEventListener("offline", handleOffline);
+    window.addEventListener("online", handleOnline);
     return () => {
+      window.removeEventListener("offline", handleOffline);
+      window.removeEventListener("online", handleOnline);
       if (eventSourceRef.current) {
         eventSourceRef.current.close();
         eventSourceRef.current = null;
@@ -17101,6 +16640,10 @@ function ProxyViewerContainer({
         clearTimeout(reconnectTimeoutRef.current);
         reconnectTimeoutRef.current = null;
       }
+      if (staleTimeoutRef.current !== null) {
+        clearTimeout(staleTimeoutRef.current);
+        staleTimeoutRef.current = null;
+      }
       if (flushTimerRef.current !== null) {
         clearTimeout(flushTimerRef.current);
         flushTimerRef.current = null;
@@ -17125,7 +16668,10 @@ function ProxyViewerContainer({
       const target = document.getElementById(targetId);
       if (target !== null) {
         handledHashRef.current = hash;
-        target.scrollIntoView({ block: "center", behavior: "smooth" });
+        target.scrollIntoView({
+          block: "center",
+          behavior: preferredScrollBehavior(browserPrefersReducedMotion())
+        });
         if (target instanceof HTMLElement) {
           highlightedTarget = target;
           target.setAttribute("data-deep-link-highlight", "true");
@@ -17385,9 +16931,13 @@ function ProxyViewerContainer({
         onClearGroup: handleClearGroup,
         onNotify: showToast,
         onImportLogs: initialSessionId === void 0 ? handleImportLogs : void 0,
-        isLoading: initialSessionId === void 0 ? !streamInitialized || sessionPageLoading : sessionPageLoading,
+        isLoading: initialSessionId === void 0 ? liveConnection.status === "connecting" && liveConnection.lastSuccessAt === null || sessionPageLoading : sessionPageLoading,
+        liveConnection: initialSessionId === void 0 ? liveConnection : void 0,
+        onRetryLiveConnection: retryLiveConnection,
+        onStopLiveConnection: stopLiveConnection,
         pagination,
         sessionLoadProgress,
+        sessionLoadError: sessionLoadError ?? void 0,
         sessionMemberships,
         viewMode,
         captureMode,
@@ -17405,40 +16955,34 @@ export {
   Badge as B,
   CONTEXT_USAGE_THRESHOLDS as C,
   Dialog as D,
-  CollapsibleContent as E,
-  ScrollArea as F,
-  LazyJsonViewer as G,
-  safeJsonValue as H,
-  parseJsonText as I,
   LazyJsonViewerFromString as L,
   ProxyViewerContainer as P,
   ROLE_COLOR_CLASSES as R,
   SegmentBar as S,
   Tabs as T,
   getConversationId as a,
-  copyTextToClipboard as b,
-  cn as c,
-  fetchJsonWithTimeout as d,
-  DialogContent as e,
-  formatTokens as f,
+  DialogContent as b,
+  DialogHeader as c,
+  DialogTitle as d,
+  TabsList as e,
+  fetchJsonWithTimeout as f,
   getLogFormatAdapter as g,
-  DialogHeader as h,
-  DialogTitle as i,
-  TabsList as j,
-  TabsTrigger as k,
-  TabsContent as l,
-  Button as m,
-  TooltipProvider as n,
-  Tooltip as o,
-  TooltipTrigger as p,
-  TooltipContent as q,
+  TabsTrigger as h,
+  TabsContent as i,
+  TooltipProvider as j,
+  Tooltip as k,
+  TooltipTrigger as l,
+  TooltipContent as m,
+  dispatchLogFocusRequest as n,
+  analyzeContextIntelligence as o,
+  ANATOMY_ROLE_LABELS as p,
+  Collapsible as q,
   resolveLogFormat as r,
-  dispatchLogFocusRequest as s,
-  analyzeContextIntelligence as t,
+  CollapsibleTrigger as s,
+  CollapsibleContent as t,
   useProviders as u,
-  ANATOMY_ROLE_LABELS as v,
-  formatContextWindowTokens as w,
-  getStatusCategory as x,
-  Collapsible as y,
-  CollapsibleTrigger as z
+  ScrollArea as v,
+  LazyJsonViewer as w,
+  safeJsonValue as x,
+  parseJsonText as y
 };