@tonyclaw/agent-inspector 3.0.25 → 3.0.26

package/.output/server/_ssr/{ProxyViewerContainer-By-I0tJv.mjs → ProxyViewerContainer-CMC7Vsbw.mjs}

@@ -1,5 +1,5 @@
 import { r as reactExports, j as jsxRuntimeExports, R as React } from "../_libs/react.mjs";
-import { C as CapturedLogSchema, z 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, i as applyUiScalePreference, w as extractStopReason, p as packageJson, P as ProviderConfigSchema, U as UI_SCALE_STORAGE_KEY, j as normalizeUiScalePreference, q as apiFormatForPath, B as GroupEvidenceExportResultSchema, E as DeleteInspectorGroupResponseSchema, $ as PiAgentResponseSchema, v as isTurnBoundary, r as readStoredThemeMode, e as applyThemeMode, f as persistThemeMode, a2 as formatUiScale, x as AlertSummarySchema, y 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, T as THEME_MODE_STORAGE_KEY, n as normalizeThemeMode, H as maskApiKey, M as PATH_V1_MESSAGES, N as PATH_V1_CHAT_COMPLETIONS, Q as PATH_V1_RESPONSES, F as providerHasContextMetadata, l as parseOpenAIResponse, m as parseOpenAIResponsesResponse, O as OpenAIRequestSchema, o as OpenAIResponsesRequestSchema, A as AnthropicResponseSchema$1, k as AnthropicRequestSchema, s as safeGetOwnProperty, a0 as resolveProviderContextWindow, t as getSessionPath, J as findProviderModelMetadata, S as previewUpstreamUrl, K as KnowledgeCandidateSchema, a1 as isPlainRecord, u as stripClaudeCodeBillingHeader, L as LogBodyChunkSchema } from "./router-bofP-Ekl.mjs";
+import { C as CapturedLogSchema, z 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, i as applyUiScalePreference, w as extractStopReason, p as packageJson, P as ProviderConfigSchema, U as UI_SCALE_STORAGE_KEY, j as normalizeUiScalePreference, q as apiFormatForPath, B as GroupEvidenceExportResultSchema, E as DeleteInspectorGroupResponseSchema, $ as PiAgentResponseSchema, v as isTurnBoundary, r as readStoredThemeMode, e as applyThemeMode, f as persistThemeMode, a2 as formatUiScale, x as AlertSummarySchema, y 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, 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 maskApiKey, F as providerHasContextMetadata, l as parseOpenAIResponse, m as parseOpenAIResponsesResponse, O as OpenAIRequestSchema, o as OpenAIResponsesRequestSchema, A as AnthropicResponseSchema$1, k as AnthropicRequestSchema, s as safeGetOwnProperty, a0 as resolveProviderContextWindow, t as getSessionPath, J as findProviderModelMetadata, S as previewUpstreamUrl, K as KnowledgeCandidateSchema, a1 as isPlainRecord, u as stripClaudeCodeBillingHeader, L as LogBodyChunkSchema } from "./router-CZe_R31M.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";
@@ -7,6 +7,8 @@ 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 { 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 Cpu, a0 as FolderOpen, a1 as Bell, a2 as Clock3, a3 as ShieldAlert, a4 as EyeOff, a5 as ExternalLink, a6 as Clock, a7 as RotateCw, a8 as Pencil, a9 as MessageSquare, aa as Zap, ab as Wrench, ac as Brain, ad as CircleCheckBig, ae as Minus, af as CircleX, ag as ShieldCheck, ah as Save, ai as FileSearch, aj as CloudUpload, ak as CircleQuestionMark, al as Server, am as Lock, an as Wifi, ao as WifiOff, ap as OctagonAlert, aq as Radio, ar as Globe, as as FileTerminal, at as ChevronsUp, au as ChevronsDown, av as FileDiff, aw as RotateCcw, ax as GitCompareArrows, ay as ArrowUp, az as ArrowDown, aA as Ellipsis, aB as CodeXml, 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 { 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";
@@ -2525,27 +2527,27 @@ function useCopyFeedback(text) {
   return { copied, copy };
 }
 const LazyCompareDrawer = reactExports.lazy(
-  () => import("./CompareDrawer-aH59Ab6x.mjs").then((m) => ({ default: m.CompareDrawer }))
+  () => import("./CompareDrawer-CqNzIeMR.mjs").then((m) => ({ default: m.CompareDrawer }))
 );
 const LazyReplayDialog = reactExports.lazy(
-  () => import("./ReplayDialog-BO4Vy0et.mjs").then((m) => ({ default: m.ReplayDialog }))
+  () => import("./ReplayDialog-D9p_LaTr.mjs").then((m) => ({ default: m.ReplayDialog }))
 );
 const LazyRequestAnatomy = reactExports.lazy(
-  () => import("./RequestAnatomy-FtOr7vSS.mjs").then((m) => ({ default: m.RequestAnatomy }))
+  () => import("./RequestAnatomy-B4ge3qNZ.mjs").then((m) => ({ default: m.RequestAnatomy }))
 );
 const LazyResponseView = reactExports.lazy(
-  () => import("./ResponseView-cvw6ajue.mjs").then((m) => ({ default: m.ResponseView }))
+  () => import("./ResponseView-BCqMKApI.mjs").then((m) => ({ default: m.ResponseView }))
 );
 const LazyStreamingChunkSequence = reactExports.lazy(
-  () => import("./StreamingChunkSequence-Oc8S2kD6.mjs").then((m) => ({
+  () => import("./StreamingChunkSequence-BA4zTLE4.mjs").then((m) => ({
     default: m.StreamingChunkSequence
   }))
 );
 const LazyJsonViewer = reactExports.lazy(
-  () => import("./json-viewer-Cd6trhQr.mjs").then((m) => ({ default: m.JsonViewer }))
+  () => import("./json-viewer-B3qV6iEJ.mjs").then((m) => ({ default: m.JsonViewer }))
 );
 const LazyJsonViewerFromString = reactExports.lazy(
-  () => import("./json-viewer-Cd6trhQr.mjs").then((m) => ({ default: m.JsonViewerFromString }))
+  () => import("./json-viewer-B3qV6iEJ.mjs").then((m) => ({ default: m.JsonViewerFromString }))
 );
 const HIGHLIGHT_DURATION_MS = 1200;
 const MAX_HIGHLIGHT_ATTEMPTS = 12;
@@ -8935,7 +8937,7 @@ function ProviderTestPill({
   testResults,
   isTesting
 }) {
-  const hasEndpoint = providerHasEndpoint$1(provider.anthropicBaseUrl) || providerHasEndpoint$1(provider.openaiBaseUrl) || providerHasEndpoint$1(provider.openaiResponsesBaseUrl);
+  const hasEndpoint2 = providerHasEndpoint$1(provider.anthropicBaseUrl) || providerHasEndpoint$1(provider.openaiBaseUrl) || providerHasEndpoint$1(provider.openaiResponsesBaseUrl);
   const summary = summarizeProviderTestResults(provider, testResults);
   if (isTesting) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1 rounded border border-cyan-300/25 bg-cyan-300/[0.08] px-2 py-1 text-xs text-cyan-100", children: [
@@ -8943,7 +8945,7 @@ function ProviderTestPill({
       "Testing"
     ] });
   }
-  if (!hasEndpoint) {
+  if (!hasEndpoint2) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "rounded border border-border/70 bg-muted/20 px-2 py-1 text-xs text-muted-foreground", children: "No endpoint" });
   }
   if (testResults === void 0 || summary.total === 0) {
@@ -9254,6 +9256,25 @@ function ProviderCard({
     }
   );
 }
+function hasEndpoint(value) {
+  return value !== void 0 && value.trim() !== "";
+}
+function deriveProviderCapabilities(provider) {
+  const anthropic = hasEndpoint(provider?.anthropicBaseUrl);
+  const openaiChat = hasEndpoint(provider?.openaiBaseUrl);
+  const openaiResponses = hasEndpoint(provider?.openaiResponsesBaseUrl);
+  return {
+    anthropic,
+    openai: openaiChat || openaiResponses,
+    openaiChat,
+    openaiResponses
+  };
+}
+function endpointForCapability(enabled, value, clearWhenDisabled) {
+  if (!enabled) return clearWhenDisabled ? "" : void 0;
+  const trimmed = value.trim();
+  return trimmed === "" ? void 0 : trimmed;
+}
 const ZHIPU_PROVIDER_KEYWORDS = ["zhipu", "zhipuai", "bigmodel", "z.ai", "zai", "glm"];
 const ZHIPU_CODING_PROVIDER_KEYWORDS = [
   "zhipu coding",
@@ -9477,6 +9498,7 @@ function EndpointUrlPreview({
   ] });
 }
 function ProviderForm({ provider, onSubmit, onCancel }) {
+  const initialCapabilities = deriveProviderCapabilities(provider);
   const [name, setName] = reactExports.useState(provider?.name ?? "");
   const [apiKey, setApiKey] = reactExports.useState(provider?.apiKey ?? "");
   const [showApiKey, setShowApiKey] = reactExports.useState(false);
@@ -9491,7 +9513,12 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
       initialModels !== void 0 && initialModels.length > 0 ? initialModels : [""]
     )
   );
-  const [activeTab, setActiveTab] = reactExports.useState("anthropic");
+  const [supportsAnthropic, setSupportsAnthropic] = reactExports.useState(initialCapabilities.anthropic);
+  const [supportsOpenai, setSupportsOpenai] = reactExports.useState(initialCapabilities.openai);
+  const [supportsOpenaiChat, setSupportsOpenaiChat] = reactExports.useState(initialCapabilities.openaiChat);
+  const [supportsOpenaiResponses, setSupportsOpenaiResponses] = reactExports.useState(
+    initialCapabilities.openaiResponses
+  );
   const [anthropicBaseUrl, setAnthropicBaseUrl] = reactExports.useState(
     stripEndpointSuffix(provider?.anthropicBaseUrl, ANTHROPIC_MESSAGES_ENDPOINT)
   );
@@ -9545,6 +9572,11 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
       const nextModels = (provider.models?.length ?? 0) > 0 ? provider.models : [""];
       setModels(nextModels);
       setModelMetadataDrafts(createMetadataDrafts(provider, nextModels));
+      const nextCapabilities = deriveProviderCapabilities(provider);
+      setSupportsAnthropic(nextCapabilities.anthropic);
+      setSupportsOpenai(nextCapabilities.openai);
+      setSupportsOpenaiChat(nextCapabilities.openaiChat);
+      setSupportsOpenaiResponses(nextCapabilities.openaiResponses);
       setAnthropicBaseUrl(
         stripEndpointSuffix(provider.anthropicBaseUrl, ANTHROPIC_MESSAGES_ENDPOINT)
       );
@@ -9602,14 +9634,32 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
     if (models.length === 0 || models.every((m) => !m.trim())) {
       newErrors.models = "At least one model is required";
     }
-    if (anthropicBaseUrl.trim() && !isValidUrl(anthropicBaseUrl.trim())) {
-      newErrors.anthropicBaseUrl = "Invalid URL format";
+    if (!supportsAnthropic && !supportsOpenai) {
+      newErrors.capabilities = "Select at least one API capability";
+    }
+    if (supportsOpenai && !supportsOpenaiChat && !supportsOpenaiResponses) {
+      newErrors.openaiCapabilities = "Select Chat Completions, Responses, or both";
     }
-    if (openaiBaseUrl.trim() && !isValidUrl(openaiBaseUrl.trim())) {
-      newErrors.openaiBaseUrl = "Invalid URL format";
+    if (supportsAnthropic) {
+      if (anthropicBaseUrl.trim() === "") {
+        newErrors.anthropicBaseUrl = "Anthropic base URL is required";
+      } else if (!isValidUrl(anthropicBaseUrl.trim())) {
+        newErrors.anthropicBaseUrl = "Invalid URL format";
+      }
+    }
+    if (supportsOpenai && supportsOpenaiChat) {
+      if (openaiBaseUrl.trim() === "") {
+        newErrors.openaiBaseUrl = "OpenAI Chat base URL is required";
+      } else if (!isValidUrl(openaiBaseUrl.trim())) {
+        newErrors.openaiBaseUrl = "Invalid URL format";
+      }
     }
-    if (openaiResponsesBaseUrl.trim() && !isValidUrl(openaiResponsesBaseUrl.trim())) {
-      newErrors.openaiResponsesBaseUrl = "Invalid URL format";
+    if (supportsOpenai && supportsOpenaiResponses) {
+      if (openaiResponsesBaseUrl.trim() === "") {
+        newErrors.openaiResponsesBaseUrl = "OpenAI Responses base URL is required";
+      } else if (!isValidUrl(openaiResponsesBaseUrl.trim())) {
+        newErrors.openaiResponsesBaseUrl = "Invalid URL format";
+      }
     }
     if (modelMetadataUrl.trim() && !isValidUrl(modelMetadataUrl.trim())) {
       newErrors.modelMetadataUrl = "Invalid URL format";
@@ -9627,9 +9677,6 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
         newErrors[`modelMetadata.${index}.outputLimit`] = "Output limit should not exceed context window";
       }
     });
-    if (!anthropicBaseUrl.trim() && !openaiBaseUrl.trim() && !openaiResponsesBaseUrl.trim()) {
-      newErrors.format = "At least one format URL (Anthropic or OpenAI) is required";
-    }
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
   }
@@ -9736,14 +9783,27 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
     e.preventDefault();
     if (!validate()) return;
     setIsSubmitting(true);
+    const clearDisabledEndpoints = provider !== void 0;
     try {
       onSubmit({
         name: name.trim(),
         apiKey: apiKey.trim(),
         models: models.map((m) => m.trim()).filter((m) => m !== ""),
-        anthropicBaseUrl: anthropicBaseUrl.trim() || void 0,
-        openaiBaseUrl: openaiBaseUrl.trim() || void 0,
-        openaiResponsesBaseUrl: openaiResponsesBaseUrl.trim() || void 0,
+        anthropicBaseUrl: endpointForCapability(
+          supportsAnthropic,
+          anthropicBaseUrl,
+          clearDisabledEndpoints
+        ),
+        openaiBaseUrl: endpointForCapability(
+          supportsOpenai && supportsOpenaiChat,
+          openaiBaseUrl,
+          clearDisabledEndpoints
+        ),
+        openaiResponsesBaseUrl: endpointForCapability(
+          supportsOpenai && supportsOpenaiResponses,
+          openaiResponsesBaseUrl,
+          clearDisabledEndpoints
+        ),
         apiDocsUrl: apiDocsUrl.trim() || void 0,
         modelMetadataUrl: modelMetadataUrl.trim() || void 0,
         modelMetadata: buildModelMetadata(),
@@ -9772,6 +9832,205 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
       ),
       errors.name !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-destructive", children: errors.name })
     ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("fieldset", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("legend", { className: "text-sm font-medium", children: [
+        "Capabilities ",
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-destructive", children: "*" })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "divide-y divide-border overflow-hidden rounded-md border border-border", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: supportsOpenai ? "bg-primary/[0.04] px-3 py-3" : "px-3 py-3", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "label",
+            {
+              htmlFor: "provider-capability-openai",
+              className: "flex cursor-pointer items-start gap-3",
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "input",
+                  {
+                    id: "provider-capability-openai",
+                    type: "checkbox",
+                    checked: supportsOpenai,
+                    onChange: (event) => setSupportsOpenai(event.target.checked),
+                    className: "mt-0.5 size-4 shrink-0 accent-primary"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block text-sm font-medium", children: "OpenAI" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block text-xs text-muted-foreground", children: "Chat Completions and Responses" })
+                ] })
+              ]
+            }
+          ),
+          supportsOpenai && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ml-7 mt-3 flex flex-wrap gap-x-5 gap-y-2 border-t border-border/70 pt-3", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "label",
+              {
+                htmlFor: "provider-capability-openai-chat",
+                className: "flex cursor-pointer items-center gap-2 text-sm",
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "input",
+                    {
+                      id: "provider-capability-openai-chat",
+                      type: "checkbox",
+                      checked: supportsOpenaiChat,
+                      onChange: (event) => setSupportsOpenaiChat(event.target.checked),
+                      className: "size-4 shrink-0 accent-primary"
+                    }
+                  ),
+                  "Chat Completions"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "label",
+              {
+                htmlFor: "provider-capability-openai-responses",
+                className: "flex cursor-pointer items-center gap-2 text-sm",
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "input",
+                    {
+                      id: "provider-capability-openai-responses",
+                      type: "checkbox",
+                      checked: supportsOpenaiResponses,
+                      onChange: (event) => setSupportsOpenaiResponses(event.target.checked),
+                      className: "size-4 shrink-0 accent-primary"
+                    }
+                  ),
+                  "Responses"
+                ]
+              }
+            )
+          ] }),
+          errors.openaiCapabilities !== void 0 && supportsOpenai && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "ml-7 mt-2 text-xs text-destructive", children: errors.openaiCapabilities })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "label",
+          {
+            htmlFor: "provider-capability-anthropic",
+            className: `flex cursor-pointer items-start gap-3 px-3 py-3 ${supportsAnthropic ? "bg-primary/[0.04]" : ""}`,
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "input",
+                {
+                  id: "provider-capability-anthropic",
+                  type: "checkbox",
+                  checked: supportsAnthropic,
+                  onChange: (event) => setSupportsAnthropic(event.target.checked),
+                  className: "mt-0.5 size-4 shrink-0 accent-primary"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block text-sm font-medium", children: "Anthropic" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block text-xs text-muted-foreground", children: "Messages" })
+              ] })
+            ]
+          }
+        )
+      ] }),
+      errors.capabilities !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-destructive", children: errors.capabilities })
+    ] }),
+    (supportsAnthropic || supportsOpenai && (supportsOpenaiChat || supportsOpenaiResponses)) && /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "space-y-5 border-l border-border pl-4", "aria-label": "API endpoints", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-medium", children: "Endpoint Configuration" }),
+      supportsAnthropic && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: "provider-anthropic-base-url", className: "text-sm font-medium", children: [
+          "Anthropic Messages Base URL ",
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-destructive", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground flex min-w-0 overflow-hidden rounded-md focus-within:border-ring focus-within:outline-ring focus-within:ring-[3px]", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "input",
+            {
+              id: "provider-anthropic-base-url",
+              type: "text",
+              value: anthropicBaseUrl,
+              onChange: (event) => {
+                setManualAnthropicUrlOverride(true);
+                setAnthropicBaseUrl(event.target.value);
+              },
+              placeholder: "https://api.anthropic.com",
+              className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "shrink-0 select-none border-l border-white/10 bg-white/[0.04] px-3 py-2 font-mono text-xs text-muted-foreground", children: ANTHROPIC_MESSAGES_ENDPOINT })
+        ] }),
+        errors.anthropicBaseUrl !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-destructive", children: errors.anthropicBaseUrl }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          EndpointUrlPreview,
+          {
+            baseUrl: anthropicBaseUrl,
+            endpoint: ANTHROPIC_MESSAGES_ENDPOINT,
+            providerName: name
+          }
+        )
+      ] }),
+      supportsOpenai && supportsOpenaiChat && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: "provider-openai-base-url", className: "text-sm font-medium", children: [
+          "OpenAI Chat Base URL ",
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-destructive", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground flex min-w-0 overflow-hidden rounded-md focus-within:border-ring focus-within:outline-ring focus-within:ring-[3px]", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "input",
+            {
+              id: "provider-openai-base-url",
+              type: "text",
+              value: openaiBaseUrl,
+              onChange: (event) => {
+                setManualOpenaiUrlOverride(true);
+                setOpenaiBaseUrl(event.target.value);
+              },
+              placeholder: "https://api.openai.com",
+              className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "shrink-0 select-none border-l border-white/10 bg-white/[0.04] px-3 py-2 font-mono text-xs text-muted-foreground", children: OPENAI_CHAT_COMPLETIONS_ENDPOINT })
+        ] }),
+        errors.openaiBaseUrl !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-destructive", children: errors.openaiBaseUrl }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          EndpointUrlPreview,
+          {
+            baseUrl: openaiBaseUrl,
+            endpoint: OPENAI_CHAT_COMPLETIONS_ENDPOINT,
+            providerName: name
+          }
+        )
+      ] }),
+      supportsOpenai && supportsOpenaiResponses && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: "provider-openai-responses-base-url", className: "text-sm font-medium", children: [
+          "OpenAI Responses Base URL ",
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-destructive", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground flex min-w-0 overflow-hidden rounded-md focus-within:border-ring focus-within:outline-ring focus-within:ring-[3px]", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "input",
+            {
+              id: "provider-openai-responses-base-url",
+              type: "text",
+              value: openaiResponsesBaseUrl,
+              onChange: (event) => {
+                setManualOpenaiResponsesUrlOverride(true);
+                setOpenaiResponsesBaseUrl(event.target.value);
+              },
+              placeholder: "https://api.openai.com",
+              className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "shrink-0 select-none border-l border-white/10 bg-white/[0.04] px-3 py-2 font-mono text-xs text-muted-foreground", children: OPENAI_RESPONSES_ENDPOINT })
+        ] }),
+        errors.openaiResponsesBaseUrl !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-destructive", children: errors.openaiResponsesBaseUrl }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          EndpointUrlPreview,
+          {
+            baseUrl: openaiResponsesBaseUrl,
+            endpoint: OPENAI_RESPONSES_ENDPOINT,
+            providerName: name
+          }
+        )
+      ] })
+    ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "provider-source", className: "text-sm font-medium", children: "Token Source" }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -10025,127 +10284,6 @@ function ProviderForm({ provider, onSubmit, onCancel }) {
       ),
       errors.models !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-destructive", children: errors.models })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border bg-muted/40 flex gap-1 rounded-[8px] p-1", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => setActiveTab("anthropic"),
-              className: `px-3 py-2 text-sm font-medium border-b-2 transition-colors ${activeTab === "anthropic" ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground"}`,
-              children: "Anthropic Format"
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Anthropic Messages API format" })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => setActiveTab("openai"),
-              className: `px-3 py-2 text-sm font-medium border-b-2 transition-colors ${activeTab === "openai" ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground"}`,
-              children: "OpenAI Format"
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "OpenAI Chat Completions API format" })
-        ] }) })
-      ] }),
-      errors.format !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-destructive", children: errors.format })
-    ] }),
-    activeTab === "anthropic" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "provider-anthropic-base-url", className: "text-sm font-medium", children: "Anthropic Base URL" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground flex min-w-0 overflow-hidden rounded-md focus-within:border-ring focus-within:outline-ring focus-within:ring-[3px]", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "input",
-          {
-            id: "provider-anthropic-base-url",
-            type: "text",
-            value: anthropicBaseUrl,
-            onChange: (e) => {
-              setManualAnthropicUrlOverride(true);
-              setAnthropicBaseUrl(e.target.value);
-            },
-            placeholder: "https://api.anthropic.com",
-            className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "shrink-0 select-none border-l border-white/10 bg-white/[0.04] px-3 py-2 font-mono text-xs text-muted-foreground", children: ANTHROPIC_MESSAGES_ENDPOINT })
-      ] }),
-      errors.anthropicBaseUrl !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-destructive", children: errors.anthropicBaseUrl }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        EndpointUrlPreview,
-        {
-          baseUrl: anthropicBaseUrl,
-          endpoint: ANTHROPIC_MESSAGES_ENDPOINT,
-          providerName: name
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "Anthropic-compatible base URL. Leave empty if this provider does not support Anthropic format." })
-    ] }),
-    activeTab === "openai" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "provider-openai-base-url", className: "text-sm font-medium", children: "OpenAI Chat Base URL" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground flex min-w-0 overflow-hidden rounded-md focus-within:border-ring focus-within:outline-ring focus-within:ring-[3px]", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "input",
-            {
-              id: "provider-openai-base-url",
-              type: "text",
-              value: openaiBaseUrl,
-              onChange: (e) => {
-                setManualOpenaiUrlOverride(true);
-                setOpenaiBaseUrl(e.target.value);
-              },
-              placeholder: "https://api.openai.com",
-              className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "shrink-0 select-none border-l border-white/10 bg-white/[0.04] px-3 py-2 font-mono text-xs text-muted-foreground", children: OPENAI_CHAT_COMPLETIONS_ENDPOINT })
-        ] }),
-        errors.openaiBaseUrl !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-destructive", children: errors.openaiBaseUrl }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          EndpointUrlPreview,
-          {
-            baseUrl: openaiBaseUrl,
-            endpoint: OPENAI_CHAT_COMPLETIONS_ENDPOINT,
-            providerName: name
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "OpenAI Chat Completions-compatible base URL. Leave empty if this provider only supports the Responses API." })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "provider-openai-responses-base-url", className: "text-sm font-medium", children: "OpenAI Responses Base URL" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground flex min-w-0 overflow-hidden rounded-md focus-within:border-ring focus-within:outline-ring focus-within:ring-[3px]", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "input",
-            {
-              id: "provider-openai-responses-base-url",
-              type: "text",
-              value: openaiResponsesBaseUrl,
-              onChange: (e) => {
-                setManualOpenaiResponsesUrlOverride(true);
-                setOpenaiResponsesBaseUrl(e.target.value);
-              },
-              placeholder: "https://api.openai.com",
-              className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "shrink-0 select-none border-l border-white/10 bg-white/[0.04] px-3 py-2 font-mono text-xs text-muted-foreground", children: OPENAI_RESPONSES_ENDPOINT })
-        ] }),
-        errors.openaiResponsesBaseUrl !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-destructive", children: errors.openaiResponsesBaseUrl }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          EndpointUrlPreview,
-          {
-            baseUrl: openaiResponsesBaseUrl,
-            endpoint: OPENAI_RESPONSES_ENDPOINT,
-            providerName: name
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "Optional Responses-compatible base URL. Set only when the provider supports the Responses API." })
-      ] })
-    ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "provider-api-docs-url", className: "text-sm font-medium", children: "API Docs URL" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -10191,14 +10329,21 @@ const PROVIDER_DELETE_TIMEOUT_MS = 1e4;
 const PROVIDER_EXPORT_TIMEOUT_MS = 2e4;
 const PROVIDER_IMPORT_TIMEOUT_MS = 2e4;
 const PROVIDER_METADATA_TIMEOUT_MS = 3e4;
-function createProviderPayload(data) {
+function endpointPayloadValue(value, preserveEmptyEndpoints) {
+  if ((value?.length ?? 0) > 0) return value;
+  return preserveEmptyEndpoints && value !== void 0 ? "" : void 0;
+}
+function createProviderPayload(data, preserveEmptyEndpoints = false) {
   return {
     name: data.name,
     apiKey: data.apiKey,
     models: data.models,
-    anthropicBaseUrl: (data.anthropicBaseUrl?.length ?? 0) > 0 ? data.anthropicBaseUrl : void 0,
-    openaiBaseUrl: (data.openaiBaseUrl?.length ?? 0) > 0 ? data.openaiBaseUrl : void 0,
-    openaiResponsesBaseUrl: (data.openaiResponsesBaseUrl?.length ?? 0) > 0 ? data.openaiResponsesBaseUrl : void 0,
+    anthropicBaseUrl: endpointPayloadValue(data.anthropicBaseUrl, preserveEmptyEndpoints),
+    openaiBaseUrl: endpointPayloadValue(data.openaiBaseUrl, preserveEmptyEndpoints),
+    openaiResponsesBaseUrl: endpointPayloadValue(
+      data.openaiResponsesBaseUrl,
+      preserveEmptyEndpoints
+    ),
     apiDocsUrl: (data.apiDocsUrl?.length ?? 0) > 0 ? data.apiDocsUrl : void 0,
     modelMetadataUrl: (data.modelMetadataUrl?.length ?? 0) > 0 ? data.modelMetadataUrl : void 0,
     modelMetadata: data.modelMetadata,
@@ -10481,7 +10626,7 @@ function ProvidersPanel({
           {
             method: "PUT",
             headers: { "Content-Type": "application/json" },
-            body: JSON.stringify(createProviderPayload(data))
+            body: JSON.stringify(createProviderPayload(data, true))
           },
           () => "Failed to update provider"
         );
@@ -12134,11 +12279,11 @@ function AgentLabDialog({ currentSessionId, logCount }) {
     ] })
   ] });
 }
-const INSPECTOR_PET_SIZE = 56;
+const INSPECTOR_PET_SIZE = 112;
 const INSPECTOR_PET_MARGIN = 14;
-const INSPECTOR_PET_EDGE_PEEK = 18;
-const INSPECTOR_PET_MIN_STEP = 72;
-const INSPECTOR_PET_MAX_STEP = 156;
+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;
@@ -12155,33 +12300,27 @@ function clampUnit(value) {
   return Math.min(Math.max(value, 0), 1);
 }
 function maximumPetX(viewport) {
-  const edgePeek = scaledMetric(INSPECTOR_PET_EDGE_PEEK, viewport);
-  return Math.max(
-    -edgePeek,
-    viewport.width - scaledMetric(INSPECTOR_PET_SIZE, viewport) + edgePeek
-  );
+  const edgeGap = scaledMetric(INSPECTOR_PET_EDGE_GAP, viewport);
+  return Math.max(edgeGap, viewport.width - scaledMetric(INSPECTOR_PET_SIZE, viewport) - edgeGap);
 }
 function maximumPetY(viewport) {
-  const edgePeek = scaledMetric(INSPECTOR_PET_EDGE_PEEK, viewport);
-  return Math.max(
-    -edgePeek,
-    viewport.height - scaledMetric(INSPECTOR_PET_SIZE, viewport) + edgePeek
-  );
+  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 edgePeek = scaledMetric(INSPECTOR_PET_EDGE_PEEK, viewport);
+  const edgeGap = scaledMetric(INSPECTOR_PET_EDGE_GAP, viewport);
   return {
-    x: Math.min(Math.max(position.x, -edgePeek), maximumPetX(viewport)),
-    y: Math.min(Math.max(position.y, -edgePeek), maximumPetY(viewport))
+    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 edgePeek = scaledMetric(INSPECTOR_PET_EDGE_PEEK, viewport);
+  const edgeGap = scaledMetric(INSPECTOR_PET_EDGE_GAP, viewport);
   const distances = [
-    { edge: "left", distance: clamped.x + edgePeek },
+    { edge: "left", distance: clamped.x - edgeGap },
     { edge: "right", distance: maximumPetX(viewport) - clamped.x },
-    { edge: "top", distance: clamped.y + INSPECTOR_PET_EDGE_PEEK },
+    { 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;
@@ -12189,33 +12328,26 @@ function nearestInspectorPetEdge(position, viewport) {
 function snapInspectorPetToEdge(position, viewport) {
   const clamped = clampInspectorPetPosition(position, viewport);
   const edge = nearestInspectorPetEdge(clamped, viewport);
-  const edgePeek = scaledMetric(INSPECTOR_PET_EDGE_PEEK, viewport);
+  const edgeGap = scaledMetric(INSPECTOR_PET_EDGE_GAP, viewport);
   switch (edge) {
     case "left":
-      return { x: -edgePeek, y: clamped.y };
+      return { x: edgeGap, y: clamped.y };
     case "right":
       return { x: maximumPetX(viewport), y: clamped.y };
     case "top":
-      return { x: clamped.x, y: -edgePeek };
+      return { x: clamped.x, y: edgeGap };
     case "bottom":
       return { x: clamped.x, y: maximumPetY(viewport) };
   }
 }
-function randomInspectorPetEdgePosition(viewport, edgeSample, ySample) {
+function randomInspectorPetEdgePosition(viewport, positionSample) {
   const maxX = maximumPetX(viewport);
   const maxY = maximumPetY(viewport);
-  const edgePeek = scaledMetric(INSPECTOR_PET_EDGE_PEEK, viewport);
-  const minimumSafeY = Math.min(scaledMetric(INSPECTOR_PET_VERTICAL_SAFE_MARGIN, viewport), maxY);
-  const randomY = minimumSafeY + clampUnit(ySample) * (maxY - minimumSafeY);
-  const edgeIndex = Math.min(1, Math.floor(clampUnit(edgeSample) * 2));
-  switch (edgeIndex) {
-    case 0:
-      return { x: -edgePeek, y: randomY };
-    case 1:
-      return { x: maxX, y: randomY };
-    default:
-      return { x: maxX, y: maxY };
-  }
+  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);
@@ -12224,12 +12356,12 @@ function nextInspectorPetWalkingPosition(position, viewport, stepSample, directi
   const edge = nearestInspectorPetEdge(clamped, viewport);
   const maxX = maximumPetX(viewport);
   const maxY = maximumPetY(viewport);
-  const edgePeek = scaledMetric(INSPECTOR_PET_EDGE_PEEK, 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: -edgePeek,
+        x: edgeGap,
         y: Math.min(Math.max(clamped.y + step * direction, minimumSafeY), maxY)
       };
     case "right":
@@ -12239,12 +12371,12 @@ function nextInspectorPetWalkingPosition(position, viewport, stepSample, directi
       };
     case "top":
       return {
-        x: Math.min(Math.max(clamped.x + step * direction, -edgePeek), maxX),
-        y: -edgePeek
+        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, -edgePeek), maxX),
+        x: Math.min(Math.max(clamped.x + step * direction, edgeGap), maxX),
         y: maxY
       };
   }
@@ -12333,12 +12465,344 @@ function resolveInspectorPetStatus(logs, nowMs) {
     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",
+      {
+        ref: canvasRef,
+        className: renderFailed ? "hidden" : "block size-full bg-transparent",
+        "data-inspector-pet-canvas": "true"
+      }
+    ),
+    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_DRIFT_MS = 5200;
-const INSPECTOR_PET_DRIFT_WINDOW_MS = 2400;
+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");
@@ -12383,13 +12847,14 @@ function moodMotionClass(mood) {
   }
 }
 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 [motionTick, setMotionTick] = reactExports.useState(0);
+  const [scuttling, setScuttling] = reactExports.useState(false);
   const [panelTick, setPanelTick] = reactExports.useState(0);
   const [panelVisible, setPanelVisible] = reactExports.useState(false);
   const [reactionTick, setReactionTick] = reactExports.useState(0);
@@ -12404,10 +12869,11 @@ function InspectorPet({ logs }) {
     () => inspectorPetPanelPosition(position, viewport),
     [position, viewport]
   );
+  reactExports.useEffect(() => setPortalHost(document.body), []);
   reactExports.useEffect(() => {
     const nextViewport = readViewport();
     setViewport(nextViewport);
-    setPosition(randomInspectorPetEdgePosition(nextViewport, Math.random(), Math.random()));
+    setPosition(randomInspectorPetEdgePosition(nextViewport, Math.random()));
   }, []);
   reactExports.useEffect(() => {
     const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
@@ -12428,25 +12894,31 @@ function InspectorPet({ logs }) {
   }, [roaming]);
   reactExports.useEffect(() => {
     if (!roaming || dragging || reduceMotion) return void 0;
-    let timeoutId = null;
-    const scheduleDrift = () => {
-      const delay = INSPECTOR_PET_MIN_DRIFT_MS + Math.random() * INSPECTOR_PET_DRIFT_WINDOW_MS;
-      timeoutId = window.setTimeout(() => {
-        setMotionTick((current) => current + 1);
+    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())
         );
-        scheduleDrift();
+        scuttleTimeoutId = window.setTimeout(() => {
+          setScuttling(false);
+          scheduleScuttle();
+        }, INSPECTOR_PET_SCUTTLE_MS);
       }, delay);
     };
-    scheduleDrift();
+    scheduleScuttle();
     return () => {
-      if (timeoutId !== null) window.clearTimeout(timeoutId);
+      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));
     };
@@ -12489,6 +12961,7 @@ function InspectorPet({ logs }) {
       moved: false
     };
     event.currentTarget.setPointerCapture(event.pointerId);
+    setScuttling(false);
     setPanelVisible(false);
     setDragging(true);
   }, []);
@@ -12533,135 +13006,136 @@ function InspectorPet({ logs }) {
     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) rotate(${motionTick % 2 === 0 ? "-4deg" : "5deg"}) scale(${dragging ? "1.08" : "1"})`,
-      transition: dragging ? "none" : "transform 4800ms cubic-bezier(0.33, 1, 0.68, 1)",
+      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, motionTick, position.x, position.y]
+    [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";
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "button",
+  if (portalHost === null) return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
+  return reactDomExports.createPortal(
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
       {
-        type: "button",
-        className: cn(
-          "fixed left-0 top-0 z-30 flex size-14 items-center justify-center bg-transparent text-foreground outline-none transition-[filter,opacity] duration-200 hover:opacity-95 hover:drop-shadow-[0_0_24px_rgba(245,158,11,0.36)] focus-visible:drop-shadow-[0_0_12px_rgba(251,191,36,0.72)]",
-          dragging ? "cursor-grabbing" : "cursor-grab"
-        ),
-        style: petStyle,
-        "data-pet-mood": status.mood,
-        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 flex size-12 items-center justify-center",
-              reactionVisible && "inspector-pet-patted"
-            ),
-            "aria-hidden": "true",
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
+        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 flex size-12 items-center justify-center",
-                    moodMotionClass(status.mood)
+                    "relative z-10 flex size-24 items-center justify-center",
+                    reactionVisible && "inspector-pet-patted"
                   ),
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                    "span",
-                    {
-                      className: cn(
-                        "relative flex size-12 items-center justify-center",
-                        !dragging && "floating-crab-body"
-                      ),
-                      children: [
-                        /* @__PURE__ */ jsxRuntimeExports.jsx(CrabLogo, { className: "relative z-10 size-11 text-amber-500 drop-shadow-[0_0_15px_rgba(245,158,11,0.30)]" }),
-                        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "pointer-events-none absolute inset-x-0 bottom-0 z-0 flex items-end justify-center gap-1 text-amber-400/80", children: [0, 1, 2, 3, 4, 5].map((leg) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-                          "span",
+                  "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,
                           {
-                            className: cn(
-                              "floating-crab-leg h-2 w-0.5 rounded-full bg-current shadow-[0_0_7px_rgba(245,158,11,0.24)]",
-                              leg < 3 ? "floating-crab-leg-left" : "floating-crab-leg-right",
-                              dragging && "animate-none"
-                            ),
-                            style: { animationDelay: `${String(leg % 2 === 0 ? 0 : 180)}ms` }
-                          },
-                          leg
-                        )) })
-                      ]
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "span",
-                {
-                  className: cn(
-                    "absolute right-0 top-1 size-2 rounded-full border border-background/90",
-                    moodDotClass(status.mood),
-                    status.mood === "active" && !reduceMotion && "animate-pulse"
-                  )
+                            mood: status.mood,
+                            moving: scuttling && !dragging,
+                            reduceMotion
+                          }
+                        ) })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "absolute right-0 top-2 size-3 rounded-full border border-background/90",
+                          moodDotClass(status.mood),
+                          status.mood === "active" && !reduceMotion && "animate-pulse"
+                        )
+                      }
+                    ),
+                    reactionVisible && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Heart,
+                      {
+                        className: "inspector-pet-heart absolute -right-2 -top-3 size-5 fill-amber-400 text-amber-400"
+                      },
+                      reactionTick
+                    )
+                  ]
                 }
-              ),
-              reactionVisible && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                Heart,
-                {
-                  className: "inspector-pet-heart absolute -right-1 -top-2 size-3.5 fill-amber-400 text-amber-400"
-                },
-                reactionTick
               )
-            ]
-          }
-        )
-      }
-    ),
-    panelVisible && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "div",
-      {
-        className: "fixed z-50 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: () => setRoaming((current) => !current),
-                "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` : roaming ? "Roaming" : "Resting" })
-          ] })
+            }
+          ),
+          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) {