@tonyclaw/agent-inspector 2.1.12 → 2.1.14

package/src/components/providers/ProviderForm.tsx

@@ -6,6 +6,7 @@ import { Eye, EyeOff, Copy, Check, ChevronDown } from "lucide-react";
 import type { ProviderConfig, ProviderModelMetadata } from "../../lib/providerContract";
 import { copyTextToClipboard } from "../../lib/clipboard";
 import { maskApiKey } from "../../lib/mask";
+import { buildUpstreamUrl } from "../../lib/upstreamUrl";
 import { formatContextWindowInput, parseContextWindowTokensInput } from "../../lib/utils";
 
 const ZHIPU_PROVIDER_KEYWORDS = ["zhipu", "zhipuai", "bigmodel", "z.ai", "zai", "glm"];
@@ -16,17 +17,27 @@ const ZHIPU_CODING_PROVIDER_KEYWORDS = [
   "z.ai coding",
   "zai coding",
 ];
+const ANTHROPIC_MESSAGES_ENDPOINT = "/v1/messages";
+const OPENAI_CHAT_COMPLETIONS_ENDPOINT = "/v1/chat/completions";
+const OPENAI_RESPONSES_ENDPOINT = "/v1/responses";
 
 // Known provider presets - maps provider name keywords to their API URLs
 const KNOWN_PROVIDER_PRESETS: Record<
   string,
-  { anthropicBaseUrl?: string; openaiBaseUrl?: string; apiDocsUrl?: string }
+  {
+    anthropicBaseUrl?: string;
+    openaiBaseUrl?: string;
+    openaiResponsesBaseUrl?: string;
+    apiDocsUrl?: string;
+  }
 > = {
   deepseek: {
     openaiBaseUrl: "https://api.deepseek.com",
   },
   minimax: {
     anthropicBaseUrl: "https://api.minimaxi.com/anthropic",
+    openaiBaseUrl: "https://api.minimaxi.com",
+    openaiResponsesBaseUrl: "https://api.minimaxi.com",
     apiDocsUrl: "https://platform.minimaxi.com/docs/api-reference/api-overview",
   },
   "zhipu coding": {
@@ -122,6 +133,7 @@ type ProviderFormProps = {
     models: string[];
     anthropicBaseUrl?: string;
     openaiBaseUrl?: string;
+    openaiResponsesBaseUrl?: string;
     apiDocsUrl?: string;
     modelMetadataUrl?: string;
     modelMetadata?: ProviderModelMetadata[];
@@ -254,6 +266,38 @@ function readPositiveIntegerInput(value: string): number | null {
   return parsed;
 }
 
+function stripEndpointSuffix(value: string | undefined, endpoint: string): string {
+  if (value === undefined) return "";
+  const trimmed = value.trim();
+  const normalized = trimmed.replace(/\/+$/, "");
+  return normalized.endsWith(endpoint)
+    ? normalized.slice(0, -endpoint.length).replace(/\/+$/, "")
+    : trimmed;
+}
+
+function previewEndpointUrl(baseUrl: string, endpoint: string): string | null {
+  const trimmed = baseUrl.trim();
+  return trimmed === "" ? null : buildUpstreamUrl(trimmed, endpoint);
+}
+
+function EndpointUrlPreview({
+  baseUrl,
+  endpoint,
+}: {
+  baseUrl: string;
+  endpoint: string;
+}): JSX.Element | null {
+  const finalUrl = previewEndpointUrl(baseUrl, endpoint);
+  if (finalUrl === null) return null;
+
+  return (
+    <div className="rounded-md border border-border/70 bg-muted/35 px-3 py-2 text-xs">
+      <div className="text-muted-foreground">Final URL</div>
+      <div className="break-all font-mono text-foreground">{finalUrl}</div>
+    </div>
+  );
+}
+
 export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps): JSX.Element {
   const [name, setName] = useState(provider?.name ?? "");
   const [apiKey, setApiKey] = useState(provider?.apiKey ?? "");
@@ -270,8 +314,15 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
     ),
   );
   const [activeTab, setActiveTab] = useState<"anthropic" | "openai">("anthropic");
-  const [anthropicBaseUrl, setAnthropicBaseUrl] = useState(provider?.anthropicBaseUrl ?? "");
-  const [openaiBaseUrl, setOpenaiBaseUrl] = useState(provider?.openaiBaseUrl ?? "");
+  const [anthropicBaseUrl, setAnthropicBaseUrl] = useState(
+    stripEndpointSuffix(provider?.anthropicBaseUrl, ANTHROPIC_MESSAGES_ENDPOINT),
+  );
+  const [openaiBaseUrl, setOpenaiBaseUrl] = useState(
+    stripEndpointSuffix(provider?.openaiBaseUrl, OPENAI_CHAT_COMPLETIONS_ENDPOINT),
+  );
+  const [openaiResponsesBaseUrl, setOpenaiResponsesBaseUrl] = useState(
+    stripEndpointSuffix(provider?.openaiResponsesBaseUrl, OPENAI_RESPONSES_ENDPOINT),
+  );
   const [apiDocsUrl, setApiDocsUrl] = useState(provider?.apiDocsUrl ?? "");
   const [modelMetadataUrl, setModelMetadataUrl] = useState(provider?.modelMetadataUrl ?? "");
   const [source, setSource] = useState<"company" | "personal" | undefined>(provider?.source);
@@ -298,6 +349,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
   // Track if URL fields have been manually edited (to avoid overriding user edits)
   const [manualAnthropicUrlOverride, setManualAnthropicUrlOverride] = useState(false);
   const [manualOpenaiUrlOverride, setManualOpenaiUrlOverride] = useState(false);
+  const [manualOpenaiResponsesUrlOverride, setManualOpenaiResponsesUrlOverride] = useState(false);
 
   // Check if MiniMax is detected
   const isMiniMax = name.toLowerCase().includes("minimax");
@@ -331,13 +383,21 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
       const nextModels = (provider.models?.length ?? 0) > 0 ? provider.models : [""];
       setModels(nextModels);
       setModelMetadataDrafts(createMetadataDrafts(provider, nextModels));
-      setAnthropicBaseUrl(provider.anthropicBaseUrl ?? "");
-      setOpenaiBaseUrl(provider.openaiBaseUrl ?? "");
+      setAnthropicBaseUrl(
+        stripEndpointSuffix(provider.anthropicBaseUrl, ANTHROPIC_MESSAGES_ENDPOINT),
+      );
+      setOpenaiBaseUrl(
+        stripEndpointSuffix(provider.openaiBaseUrl, OPENAI_CHAT_COMPLETIONS_ENDPOINT),
+      );
+      setOpenaiResponsesBaseUrl(
+        stripEndpointSuffix(provider.openaiResponsesBaseUrl, OPENAI_RESPONSES_ENDPOINT),
+      );
       setApiDocsUrl(provider.apiDocsUrl ?? "");
       setModelMetadataUrl(provider.modelMetadataUrl ?? "");
       setSource(provider.source);
       setManualAnthropicUrlOverride(false);
       setManualOpenaiUrlOverride(false);
+      setManualOpenaiResponsesUrlOverride(false);
     }
   }, [provider]);
 
@@ -352,6 +412,9 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
         if (preset.openaiBaseUrl !== undefined && !manualOpenaiUrlOverride) {
           setOpenaiBaseUrl(preset.openaiBaseUrl);
         }
+        if (preset.openaiResponsesBaseUrl !== undefined && !manualOpenaiResponsesUrlOverride) {
+          setOpenaiResponsesBaseUrl(preset.openaiResponsesBaseUrl);
+        }
         if (preset.apiDocsUrl !== undefined && !apiDocsUrl) {
           setApiDocsUrl(preset.apiDocsUrl);
         }
@@ -394,6 +457,9 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
     if (openaiBaseUrl.trim() && !isValidUrl(openaiBaseUrl.trim())) {
       newErrors.openaiBaseUrl = "Invalid URL format";
     }
+    if (openaiResponsesBaseUrl.trim() && !isValidUrl(openaiResponsesBaseUrl.trim())) {
+      newErrors.openaiResponsesBaseUrl = "Invalid URL format";
+    }
     if (modelMetadataUrl.trim() && !isValidUrl(modelMetadataUrl.trim())) {
       newErrors.modelMetadataUrl = "Invalid URL format";
     }
@@ -412,7 +478,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
           "Output limit should not exceed context window";
       }
     });
-    if (!anthropicBaseUrl.trim() && !openaiBaseUrl.trim()) {
+    if (!anthropicBaseUrl.trim() && !openaiBaseUrl.trim() && !openaiResponsesBaseUrl.trim()) {
       newErrors.format = "At least one format URL (Anthropic or OpenAI) is required";
     }
     setErrors(newErrors);
@@ -546,6 +612,7 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
         models: models.map((m) => m.trim()).filter((m) => m !== ""),
         anthropicBaseUrl: anthropicBaseUrl.trim() || undefined,
         openaiBaseUrl: openaiBaseUrl.trim() || undefined,
+        openaiResponsesBaseUrl: openaiResponsesBaseUrl.trim() || undefined,
         apiDocsUrl: apiDocsUrl.trim() || undefined,
         modelMetadataUrl: modelMetadataUrl.trim() || undefined,
         modelMetadata: buildModelMetadata(),
@@ -878,50 +945,99 @@ export function ProviderForm({ provider, onSubmit, onCancel }: ProviderFormProps
           <label htmlFor="provider-anthropic-base-url" className="text-sm font-medium">
             Anthropic Base URL
           </label>
-          <input
-            id="provider-anthropic-base-url"
-            type="text"
-            value={anthropicBaseUrl}
-            onChange={(e) => {
-              setManualAnthropicUrlOverride(true);
-              setAnthropicBaseUrl(e.target.value);
-            }}
-            placeholder="https://api.anthropic.com"
-            className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
-          />
+          <div className="flex min-w-0 overflow-hidden rounded-md border border-input bg-background ring-offset-background focus-within:border-ring focus-within:outline-ring focus-within:ring-[3px]">
+            <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-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+            />
+            <span className="shrink-0 select-none border-l bg-muted px-3 py-2 font-mono text-xs text-muted-foreground">
+              {ANTHROPIC_MESSAGES_ENDPOINT}
+            </span>
+          </div>
           {errors.anthropicBaseUrl !== undefined && (
             <p className="text-xs text-destructive">{errors.anthropicBaseUrl}</p>
           )}
+          <EndpointUrlPreview baseUrl={anthropicBaseUrl} endpoint={ANTHROPIC_MESSAGES_ENDPOINT} />
           <p className="text-xs text-muted-foreground">
-            Anthropic-compatible endpoint URL. Leave empty if this provider does not support
-            Anthropic format.
+            Anthropic-compatible base URL. Leave empty if this provider does not support Anthropic
+            format.
           </p>
         </div>
       )}
 
       {activeTab === "openai" && (
-        <div className="space-y-2">
-          <label htmlFor="provider-openai-base-url" className="text-sm font-medium">
-            OpenAI Base URL
-          </label>
-          <input
-            id="provider-openai-base-url"
-            type="text"
-            value={openaiBaseUrl}
-            onChange={(e) => {
-              setManualOpenaiUrlOverride(true);
-              setOpenaiBaseUrl(e.target.value);
-            }}
-            placeholder="https://api.openai.com/v1"
-            className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
-          />
-          {errors.openaiBaseUrl !== undefined && (
-            <p className="text-xs text-destructive">{errors.openaiBaseUrl}</p>
-          )}
-          <p className="text-xs text-muted-foreground">
-            OpenAI-compatible endpoint URL. Leave empty if this provider does not support OpenAI
-            format.
-          </p>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <label htmlFor="provider-openai-base-url" className="text-sm font-medium">
+              OpenAI Chat Base URL
+            </label>
+            <div className="flex min-w-0 overflow-hidden rounded-md border border-input bg-background ring-offset-background focus-within:border-ring focus-within:outline-ring focus-within:ring-[3px]">
+              <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-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+              />
+              <span className="shrink-0 select-none border-l bg-muted px-3 py-2 font-mono text-xs text-muted-foreground">
+                {OPENAI_CHAT_COMPLETIONS_ENDPOINT}
+              </span>
+            </div>
+            {errors.openaiBaseUrl !== undefined && (
+              <p className="text-xs text-destructive">{errors.openaiBaseUrl}</p>
+            )}
+            <EndpointUrlPreview
+              baseUrl={openaiBaseUrl}
+              endpoint={OPENAI_CHAT_COMPLETIONS_ENDPOINT}
+            />
+            <p className="text-xs text-muted-foreground">
+              OpenAI Chat Completions-compatible base URL. Leave empty if this provider only
+              supports the Responses API.
+            </p>
+          </div>
+          <div className="space-y-2">
+            <label htmlFor="provider-openai-responses-base-url" className="text-sm font-medium">
+              OpenAI Responses Base URL
+            </label>
+            <div className="flex min-w-0 overflow-hidden rounded-md border border-input bg-background ring-offset-background focus-within:border-ring focus-within:outline-ring focus-within:ring-[3px]">
+              <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-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+              />
+              <span className="shrink-0 select-none border-l bg-muted px-3 py-2 font-mono text-xs text-muted-foreground">
+                {OPENAI_RESPONSES_ENDPOINT}
+              </span>
+            </div>
+            {errors.openaiResponsesBaseUrl !== undefined && (
+              <p className="text-xs text-destructive">{errors.openaiResponsesBaseUrl}</p>
+            )}
+            <EndpointUrlPreview
+              baseUrl={openaiResponsesBaseUrl}
+              endpoint={OPENAI_RESPONSES_ENDPOINT}
+            />
+            <p className="text-xs text-muted-foreground">
+              Optional Responses-compatible base URL. Set only when the provider supports the
+              Responses API.
+            </p>
+          </div>
         </div>
       )}
 

package/src/components/providers/ProvidersPanel.tsx

@@ -51,6 +51,7 @@ type ProviderFormData = {
   models: string[];
   anthropicBaseUrl?: string;
   openaiBaseUrl?: string;
+  openaiResponsesBaseUrl?: string;
   apiDocsUrl?: string;
   modelMetadataUrl?: string;
   modelMetadata?: ProviderModelMetadata[];
@@ -64,6 +65,8 @@ function createProviderPayload(data: ProviderFormData) {
     models: data.models,
     anthropicBaseUrl: (data.anthropicBaseUrl?.length ?? 0) > 0 ? data.anthropicBaseUrl : undefined,
     openaiBaseUrl: (data.openaiBaseUrl?.length ?? 0) > 0 ? data.openaiBaseUrl : undefined,
+    openaiResponsesBaseUrl:
+      (data.openaiResponsesBaseUrl?.length ?? 0) > 0 ? data.openaiResponsesBaseUrl : undefined,
     apiDocsUrl: (data.apiDocsUrl?.length ?? 0) > 0 ? data.apiDocsUrl : undefined,
     modelMetadataUrl: (data.modelMetadataUrl?.length ?? 0) > 0 ? data.modelMetadataUrl : undefined,
     modelMetadata: data.modelMetadata,
@@ -407,7 +410,8 @@ export function ProvidersPanel({
           (data.apiKey ?? "") !== (editingProvider.apiKey ?? "") ||
           JSON.stringify(data.models) !== JSON.stringify(editingProvider.models) ||
           (data.anthropicBaseUrl ?? "") !== (editingProvider.anthropicBaseUrl ?? "") ||
-          (data.openaiBaseUrl ?? "") !== (editingProvider.openaiBaseUrl ?? "");
+          (data.openaiBaseUrl ?? "") !== (editingProvider.openaiBaseUrl ?? "") ||
+          (data.openaiResponsesBaseUrl ?? "") !== (editingProvider.openaiResponsesBaseUrl ?? "");
         if (criticalFieldsChanged) {
           await runTest(updated.id);
         }

package/src/components/proxy-viewer/AnswerMarkdown.tsx

@@ -1,5 +1,6 @@
-import type { JSX } from "react";
-import ReactMarkdown from "react-markdown";
+import { lazy, Suspense, type JSX } from "react";
+
+const LazyReactMarkdown = lazy(() => import("react-markdown"));
 
 const ANSWER_MARKDOWN_CLASS =
   "prose prose-sm dark:prose-invert max-w-none text-[13px] leading-[1.65] " +
@@ -10,7 +11,11 @@ const ANSWER_MARKDOWN_CLASS =
 export function AnswerMarkdown({ text }: { text: string }): JSX.Element {
   return (
     <div className={ANSWER_MARKDOWN_CLASS}>
-      <ReactMarkdown>{text}</ReactMarkdown>
+      <Suspense
+        fallback={<span className="text-xs text-muted-foreground">Loading Markdown...</span>}
+      >
+        <LazyReactMarkdown>{text}</LazyReactMarkdown>
+      </Suspense>
     </div>
   );
 }

package/src/components/proxy-viewer/CompareDrawer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { Suspense, useEffect, useMemo, useRef, useState } from "react";
 import type { JSX } from "react";
 import {
   Check,
@@ -23,9 +23,9 @@ import {
   previewNode,
 } from "./requestDiff";
 import { getConversationId } from "./ConversationHeader";
-import { JsonViewerFromString } from "../ui/json-viewer";
 import { Badge } from "../ui/badge";
 import { getLogFormatAdapter, resolveLogFormat } from "./log-formats";
+import { LazyJsonViewerFromString } from "./lazy";
 
 export type CompareDrawerProps = {
   /** Log selected first (shown on the left). */
@@ -65,6 +65,20 @@ function nodeToJsonValue(node: JsonNode): unknown {
   }
 }
 
+function LazyJsonStringView({
+  text,
+  defaultExpandDepth,
+}: {
+  text: string;
+  defaultExpandDepth: number;
+}): JSX.Element {
+  return (
+    <Suspense fallback={<div className="text-xs text-muted-foreground">Loading JSON...</div>}>
+      <LazyJsonViewerFromString text={text} defaultExpandDepth={defaultExpandDepth} />
+    </Suspense>
+  );
+}
+
 /** The parent path of a JSON path string. E.g. `messages[3].content` →
  *  `messages[3]`, `messages[3]` → `messages`, `messages` → `""`. */
 function parentPath(path: string): string {
@@ -222,7 +236,7 @@ function EqualRunRow({
           {ops.map((op) => (
             <div key={op.path} className="border border-border/50 rounded p-2 bg-muted/20">
               <div className="font-mono text-xs text-muted-foreground mb-1">{op.path}</div>
-              <JsonViewerFromString text={nodeToJsonString(op.value)} defaultExpandDepth={0} />
+              <LazyJsonStringView text={nodeToJsonString(op.value)} defaultExpandDepth={0} />
             </div>
           ))}
         </div>
@@ -393,7 +407,7 @@ function ExpandedSubtree({ op }: { op: AddedOp | RemovedOp | ChangedOp }): JSX.E
   if (op.kind === "added" || op.kind === "removed") {
     return (
       <div className="pl-5 mt-2 border border-border/50 rounded p-2 bg-muted/20">
-        <JsonViewerFromString text={nodeToJsonString(op.value)} defaultExpandDepth={0} />
+        <LazyJsonStringView text={nodeToJsonString(op.value)} defaultExpandDepth={0} />
       </div>
     );
   }
@@ -411,11 +425,11 @@ function ExpandedSubtree({ op }: { op: AddedOp | RemovedOp | ChangedOp }): JSX.E
     <div className="pl-5 mt-2 grid grid-cols-1 md:grid-cols-2 gap-2">
       <div className="border border-rose-500/30 rounded p-2 bg-rose-500/5">
         <div className="text-[10px] uppercase tracking-wider text-rose-500 mb-1">Old</div>
-        <JsonViewerFromString text={nodeToJsonString(op.left)} defaultExpandDepth={0} />
+        <LazyJsonStringView text={nodeToJsonString(op.left)} defaultExpandDepth={0} />
       </div>
       <div className="border border-emerald-500/30 rounded p-2 bg-emerald-500/5">
         <div className="text-[10px] uppercase tracking-wider text-emerald-500 mb-1">New</div>
-        <JsonViewerFromString text={nodeToJsonString(op.right)} defaultExpandDepth={0} />
+        <LazyJsonStringView text={nodeToJsonString(op.right)} defaultExpandDepth={0} />
       </div>
     </div>
   );

package/src/components/proxy-viewer/ConversationGroup.tsx

@@ -4,7 +4,7 @@ import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
 import type { CapturedLog } from "../../contracts";
 import { ConversationHeader, type ConversationGroupData } from "./ConversationHeader";
 import { detectProvider } from "../providers/ProviderLogo";
-import { TurnGroup } from "./TurnGroup";
+import { TurnGroupList } from "./TurnGroupList";
 import { AgentTraceSummary } from "./AgentTraceSummary";
 import type { CacheTrendEntry } from "./cacheTrend";
 import { LOG_FOCUS_REQUEST_EVENT, readLogFocusRequest } from "./logFocus";
@@ -180,20 +180,16 @@ export const ConversationGroup = memo(function ({
             showRollupMetrics={showTraceRollupMetrics}
             timeDisplayFormat={timeDisplayFormat}
           />
-          {turnGroups.map((tg) => (
-            <TurnGroup
-              key={tg.turnIndex}
-              entries={tg.entries}
-              viewMode={viewMode}
-              strip={strip}
-              slowResponseThresholdSeconds={slowResponseThresholdSeconds}
-              timeDisplayFormat={timeDisplayFormat}
-              cacheTrends={cacheTrends}
-              onCompareWithPrevious={onCompareWithPrevious}
-              comparisonPredecessors={comparisonPredecessors}
-              turnIndex={tg.turnIndex}
-            />
-          ))}
+          <TurnGroupList
+            turnGroups={turnGroups}
+            viewMode={viewMode}
+            strip={strip}
+            slowResponseThresholdSeconds={slowResponseThresholdSeconds}
+            timeDisplayFormat={timeDisplayFormat}
+            cacheTrends={cacheTrends}
+            onCompareWithPrevious={onCompareWithPrevious}
+            comparisonPredecessors={comparisonPredecessors}
+          />
         </div>
       )}
     </div>

package/src/components/proxy-viewer/LogEntry.tsx

@@ -75,7 +75,7 @@ const BODY_CHUNK_BYTES = 256 * 1024;
 const CHUNKED_BODY_THRESHOLD_BYTES = 1024 * 1024;
 
 const TAB_TRIGGER_CLASS =
-  "h-9 flex-none rounded-none border-0 border-b-2 border-transparent bg-transparent px-3 text-xs font-semibold text-muted-foreground shadow-none hover:bg-cyan-400/[0.04] hover:text-foreground data-[state=active]:border-cyan-300 data-[state=active]:bg-transparent data-[state=active]:text-cyan-100 data-[state=active]:shadow-none";
+  "h-9 flex-none rounded-none border-0 border-b-2 border-transparent bg-transparent px-3 text-xs font-semibold text-muted-foreground shadow-none transition-colors hover:bg-cyan-400/[0.05] hover:text-foreground data-[state=active]:border-cyan-300 data-[state=active]:bg-cyan-300/[0.04] data-[state=active]:text-cyan-100 data-[state=active]:shadow-none";
 
 function createEmptyBodyPreviewState(totalBytes: number | null = null): BodyPreviewState {
   return {
@@ -140,7 +140,7 @@ function ExpandedPanel({
   return (
     <div
       className={cn(
-        "inspector-scrollbar mx-3 mb-3 max-h-[72vh] overflow-auto rounded-md border border-white/10 bg-[#06080b] p-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]",
+        "inspector-scrollbar mx-3 mb-3 max-h-[72vh] overflow-auto rounded-md border border-cyan-300/10 bg-[#05070a] p-3 shadow-[0_16px_45px_rgba(0,0,0,0.24),inset_0_1px_0_rgba(255,255,255,0.05)]",
         className,
       )}
     >
@@ -384,6 +384,7 @@ export const LogEntry = memo(function ({
   );
   const requestJsonRef = useRef<HTMLDivElement | null>(null);
   const logIdRef = useRef(log.id);
+  const bodyHydrationInFlightRef = useRef(false);
   const displayLog = hydratedLog ?? log;
   const useChunkedBody = hydratedLog === null && shouldUseChunkedBodyLoading(log);
   const requestPreviewBody = bodyPreviewTextForView(useChunkedBody, requestPreview);
@@ -421,10 +422,10 @@ export const LogEntry = memo(function ({
     requestPreviewShouldParse ? displayedRequestBody : null,
   );
   const rawRequestExpansion = useJsonBulkExpansion(
-    requestPreviewShouldParse ? rawRequestBodyForView : null,
+    activeTab === "raw-request" && requestPreviewShouldParse ? rawRequestBodyForView : null,
   );
   const responseExpansion = useJsonBulkExpansion(
-    responsePreviewShouldParse ? responseTextForView : null,
+    activeTab === "raw" && responsePreviewShouldParse ? responseTextForView : null,
   );
 
   // Headers are rendered as a flat list, so we copy them as pretty-printed JSON.
@@ -634,6 +635,7 @@ export const LogEntry = memo(function ({
 
   useEffect(() => {
     logIdRef.current = log.id;
+    bodyHydrationInFlightRef.current = false;
     setHydratedLog(null);
     setBodyHydrationState("idle");
     setRequestPreview(createEmptyBodyPreviewState(log.rawRequestBodyBytes ?? null));
@@ -643,9 +645,10 @@ export const LogEntry = memo(function ({
   useEffect(() => {
     if (!expanded) return;
     if (!shouldHydrateLogBody(log)) return;
-    if (hydratedLog !== null || bodyHydrationState !== "idle") return;
+    if (hydratedLog !== null || bodyHydrationInFlightRef.current) return;
 
     let cancelled = false;
+    bodyHydrationInFlightRef.current = true;
     setBodyHydrationState("loading");
     void fetchJsonWithTimeout(
       `/api/logs/${String(log.id)}`,
@@ -654,19 +657,21 @@ export const LogEntry = memo(function ({
     )
       .then((fullLog) => {
         if (cancelled) return;
+        bodyHydrationInFlightRef.current = false;
         setHydratedLog(fullLog);
         setBodyHydrationState("idle");
       })
       .catch(() => {
         if (cancelled) return;
+        bodyHydrationInFlightRef.current = false;
         setBodyHydrationState("failed");
       });
 
     return () => {
       cancelled = true;
+      bodyHydrationInFlightRef.current = false;
     };
   }, [
-    bodyHydrationState,
     expanded,
     hydratedLog,
     log.bodyContentMode,
@@ -710,12 +715,23 @@ export const LogEntry = memo(function ({
     <TooltipProvider>
       <div
         className={cn(
-          "mb-2 overflow-hidden rounded-md border bg-[#090a0d] transition-[background-color,border-color,box-shadow]",
+          "relative mb-2 overflow-hidden rounded-lg border bg-[#07090d] transition-[background-color,border-color,box-shadow]",
           expanded
-            ? "border-cyan-300/20 shadow-[0_18px_60px_rgba(0,0,0,0.28),inset_0_1px_0_rgba(255,255,255,0.05)]"
-            : "border-border/70 hover:border-border",
+            ? "border-cyan-300/25 shadow-[0_24px_80px_rgba(0,0,0,0.34),0_0_0_1px_rgba(103,232,249,0.04),inset_0_1px_0_rgba(255,255,255,0.06)]"
+            : "border-white/10 shadow-[0_6px_24px_rgba(0,0,0,0.16)] hover:border-cyan-300/15",
         )}
       >
+        <div
+          className={cn(
+            "pointer-events-none absolute inset-y-3 left-1 w-px rounded-full",
+            expanded ? "bg-cyan-300/45 shadow-[0_0_20px_rgba(103,232,249,0.28)]" : "bg-white/10",
+          )}
+          aria-hidden="true"
+        />
+        <div
+          className="pointer-events-none absolute inset-x-3 top-0 h-px bg-gradient-to-r from-transparent via-white/15 to-transparent"
+          aria-hidden="true"
+        />
         <LogEntryHeader
           log={displayLog}
           messageCount={requestAnalysis.messageCount}
@@ -738,14 +754,18 @@ export const LogEntry = memo(function ({
 
         {expanded && (
           <div
-            className="border-t border-white/10 bg-[#050607]/80 pt-2"
+            className="relative border-t border-cyan-300/10 bg-[linear-gradient(180deg,#06090d_0%,#040506_100%)] pt-2"
             onClick={(e) => e.stopPropagation()}
             onKeyDown={(e) => e.stopPropagation()}
           >
+            <div
+              className="pointer-events-none absolute inset-x-0 top-0 h-12 bg-gradient-to-b from-cyan-300/[0.035] to-transparent"
+              aria-hidden="true"
+            />
             <Tabs value={activeTab} onValueChange={setActiveTab} className="gap-2">
               <TabsList
                 variant="line"
-                className="inspector-scrollbar mx-3 h-auto w-[calc(100%-1.5rem)] justify-start overflow-x-auto rounded-none border-b border-white/10 bg-transparent p-0"
+                className="inspector-scrollbar relative mx-3 h-auto w-[calc(100%-1.5rem)] justify-start overflow-x-auto rounded-none border-b border-cyan-300/10 bg-black/10 p-0"
               >
                 {viewMode === "full" && (
                   <TabsTrigger className={TAB_TRIGGER_CLASS} value="raw-headers">