@tonyclaw/agent-inspector 3.0.7 → 3.0.9

package/src/components/providers/ProvidersPanel.tsx

@@ -7,7 +7,13 @@ import { ImportWizardDialog } from "./ImportWizardDialog";
 import { ConfirmDialog } from "../ui/confirm-dialog";
 import { ProviderCard } from "./ProviderCard";
 import { ProviderForm } from "./ProviderForm";
-import { parseJsonResponse, readApiError } from "../../lib/apiClient";
+import {
+  ApiTimeoutError,
+  fetchJsonWithTimeout,
+  fetchWithTimeout,
+  parseJsonResponse,
+  readApiError,
+} from "../../lib/apiClient";
 import { copyTextToClipboard } from "../../lib/clipboard";
 import {
   ProviderConfigSchema,
@@ -44,6 +50,13 @@ const ModelMetadataRefreshResponseSchema = z.object({
 });
 
 const NETWORK_ERROR_MESSAGE = "Network error: could not reach the server. Is the proxy running?";
+const CONFIG_PATH_FETCH_TIMEOUT_MS = 5_000;
+const PROVIDER_TEST_LOG_TIMEOUT_MS = 5_000;
+const PROVIDER_WRITE_TIMEOUT_MS = 15_000;
+const PROVIDER_DELETE_TIMEOUT_MS = 10_000;
+const PROVIDER_EXPORT_TIMEOUT_MS = 20_000;
+const PROVIDER_IMPORT_TIMEOUT_MS = 20_000;
+const PROVIDER_METADATA_TIMEOUT_MS = 30_000;
 
 type ProviderFormData = {
   name: string;
@@ -88,7 +101,7 @@ async function persistProviderTestLog(providerId: string, results: TestResults):
     return;
   }
   try {
-    await fetch(`/api/providers/${providerId}/test/log`, {
+    await fetchWithTimeout(`/api/providers/${providerId}/test/log`, PROVIDER_TEST_LOG_TIMEOUT_MS, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify(results),
@@ -176,11 +189,12 @@ export function ProvidersPanel({
   useEffect(() => {
     void (async () => {
       try {
-        const res = await fetch("/api/config/paths");
-        if (res.ok) {
-          const data = await parseJsonResponse(res, ConfigPathsResponseSchema);
-          setConfigPath(data.providerConfig);
-        }
+        const data = await fetchJsonWithTimeout(
+          "/api/config/paths",
+          ConfigPathsResponseSchema,
+          CONFIG_PATH_FETCH_TIMEOUT_MS,
+        );
+        setConfigPath(data.providerConfig);
       } catch {
         // Ignore
       }
@@ -270,34 +284,33 @@ export function ProvidersPanel({
       }, 1000);
 
       try {
-        const res = await fetch(`/api/providers/${providerId}/test`, {
-          method: "POST",
-          signal: controller.signal,
-        });
-        if (res.ok) {
-          const results = await parseJsonResponse(res, ProviderTestResultsSchema);
-          updateTestResults(providerId, results);
-          await persistProviderTestLog(providerId, results);
-        } else {
-          updateTestResults(
-            providerId,
-            createFailedProviderTestResults(
-              `HTTP ${res.status}: ${res.statusText}`,
-              "server_error",
-            ),
-          );
-        }
+        const results = await fetchJsonWithTimeout(
+          `/api/providers/${providerId}/test`,
+          ProviderTestResultsSchema,
+          timeoutSeconds * 1000 + 1000,
+          {
+            method: "POST",
+            signal: controller.signal,
+          },
+          (response) => `HTTP ${response.status}: ${response.statusText}`,
+        );
+        updateTestResults(providerId, results);
+        await persistProviderTestLog(providerId, results);
       } catch (err) {
         // Check if this was an abort (timeout)
         const isAbort = err instanceof Error && err.name === "AbortError";
-        if (isAbort) {
+        const isTimeout = err instanceof ApiTimeoutError;
+        if (isAbort || isTimeout) {
           updateTestResults(
             providerId,
             createFailedProviderTestResults("Request timed out", "timeout"),
           );
+        } else if (err instanceof Error) {
+          updateTestResults(
+            providerId,
+            createFailedProviderTestResults(err.message, "server_error"),
+          );
         }
-        // If it's not an abort error, the test results won't be updated
-        // which means the previous results will persist (or it will show "Not configured" reset state)
       } finally {
         // Always clear the countdown and testing state, even if an error occurs
         clearInterval(intervalId);
@@ -323,18 +336,17 @@ export function ProvidersPanel({
       });
       try {
         const payload = url !== undefined && url.trim() !== "" ? { url } : {};
-        const res = await fetch(`/api/providers/${providerId}/model-metadata`, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(payload),
-        });
-        if (!res.ok) {
-          if (showError) {
-            setError(await readApiError(res, "Failed to refresh model metadata"));
-          }
-          return false;
-        }
-        const data = await parseJsonResponse(res, ModelMetadataRefreshResponseSchema);
+        const data = await fetchJsonWithTimeout(
+          `/api/providers/${providerId}/model-metadata`,
+          ModelMetadataRefreshResponseSchema,
+          PROVIDER_METADATA_TIMEOUT_MS,
+          {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(payload),
+          },
+          () => "Failed to refresh model metadata",
+        );
         if (data.imported === 0 && showError) {
           setError("No matching model metadata found for this provider.");
         } else {
@@ -343,9 +355,9 @@ export function ProvidersPanel({
         triggerHighlight(data.provider.id);
         refreshProviders();
         return data.imported > 0;
-      } catch {
+      } catch (err) {
         if (showError) {
-          setError(NETWORK_ERROR_MESSAGE);
+          setError(err instanceof Error ? err.message : NETWORK_ERROR_MESSAGE);
         }
         return false;
       } finally {
@@ -362,16 +374,17 @@ export function ProvidersPanel({
   function handleAddProvider(data: ProviderFormData): void {
     void (async () => {
       try {
-        const res = await fetch("/api/providers", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(createProviderPayload(data)),
-        });
-        if (!res.ok) {
-          setError(await readApiError(res, "Failed to add provider"));
-          return;
-        }
-        const newProvider = await parseJsonResponse(res, ProviderConfigSchema);
+        const newProvider = await fetchJsonWithTimeout(
+          "/api/providers",
+          ProviderConfigSchema,
+          PROVIDER_WRITE_TIMEOUT_MS,
+          {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(createProviderPayload(data)),
+          },
+          () => "Failed to add provider",
+        );
         setShowForm(false);
         triggerHighlight(newProvider.id);
         if (data.modelMetadataUrl !== undefined && data.modelMetadataUrl.trim() !== "") {
@@ -379,8 +392,8 @@ export function ProvidersPanel({
         }
         refreshProviders();
         await runTest(newProvider.id);
-      } catch {
-        setError(NETWORK_ERROR_MESSAGE);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : NETWORK_ERROR_MESSAGE);
       }
     })();
   }
@@ -389,16 +402,17 @@ export function ProvidersPanel({
     if (!editingProvider) return;
     void (async () => {
       try {
-        const res = await fetch(`/api/providers/${editingProvider.id}`, {
-          method: "PUT",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(createProviderPayload(data)),
-        });
-        if (!res.ok) {
-          setError(await readApiError(res, "Failed to update provider"));
-          return;
-        }
-        const updated = await parseJsonResponse(res, ProviderConfigSchema);
+        const updated = await fetchJsonWithTimeout(
+          `/api/providers/${editingProvider.id}`,
+          ProviderConfigSchema,
+          PROVIDER_WRITE_TIMEOUT_MS,
+          {
+            method: "PUT",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(createProviderPayload(data)),
+          },
+          () => "Failed to update provider",
+        );
         setEditingProvider(undefined);
         triggerHighlight(updated.id);
         if (data.modelMetadataUrl !== undefined && data.modelMetadataUrl.trim() !== "") {
@@ -415,8 +429,8 @@ export function ProvidersPanel({
         if (criticalFieldsChanged) {
           await runTest(updated.id);
         }
-      } catch {
-        setError(NETWORK_ERROR_MESSAGE);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : NETWORK_ERROR_MESSAGE);
       }
     })();
   }
@@ -432,7 +446,7 @@ export function ProvidersPanel({
     void (async () => {
       let res: Response;
       try {
-        res = await fetch(`/api/providers/${providerId}`, {
+        res = await fetchWithTimeout(`/api/providers/${providerId}`, PROVIDER_DELETE_TIMEOUT_MS, {
           method: "DELETE",
         });
       } catch {
@@ -453,7 +467,7 @@ export function ProvidersPanel({
     const url = `/api/providers/export${includeKeys ? "?includeKeys=true" : ""}`;
     void (async () => {
       try {
-        const res = await fetch(url);
+        const res = await fetchWithTimeout(url, PROVIDER_EXPORT_TIMEOUT_MS);
         if (!res.ok) {
           setError("Failed to export providers");
           return;
@@ -485,7 +499,7 @@ export function ProvidersPanel({
     void (async () => {
       try {
         const text = await file.text();
-        const res = await fetch("/api/providers/import", {
+        const res = await fetchWithTimeout("/api/providers/import", PROVIDER_IMPORT_TIMEOUT_MS, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify(text),

package/src/components/providers/SettingsDialog.tsx

@@ -9,6 +9,7 @@ import { ProvidersPanel } from "./ProvidersPanel";
 import { useProviders } from "../../lib/useProviders";
 import { useStripConfig } from "../../lib/useStripConfig";
 import { copyTextToClipboard } from "../../lib/clipboard";
+import { fetchJsonWithTimeout } from "../../lib/apiClient";
 import {
   MAX_PROVIDER_TEST_TIMEOUT_SECONDS,
   MAX_SLOW_RESPONSE_THRESHOLD_SECONDS,
@@ -148,6 +149,8 @@ const LogStorageStatsSchema = z.object({
   sessionArchiveBytes: z.number(),
 });
 
+const STORAGE_STATS_FETCH_TIMEOUT_MS = 10_000;
+
 function formatBytes(bytes: number): string {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KiB`;
@@ -165,18 +168,14 @@ function StorageSettingsTab(): JSX.Element {
     setLoading(true);
     setError(null);
     try {
-      const response = await fetch("/api/logs?stats=1");
-      if (!response.ok) {
-        setError(`Failed to load storage stats: HTTP ${String(response.status)}`);
-        return;
-      }
-      const data: unknown = await response.json();
-      const parsed = LogStorageStatsSchema.safeParse(data);
-      if (!parsed.success) {
-        setError("Storage stats response was not valid.");
-        return;
-      }
-      setStats(parsed.data);
+      const data = await fetchJsonWithTimeout(
+        "/api/logs?stats=1",
+        LogStorageStatsSchema,
+        STORAGE_STATS_FETCH_TIMEOUT_MS,
+        undefined,
+        (response) => `Failed to load storage stats: HTTP ${String(response.status)}`,
+      );
+      setStats(data);
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err));
     } finally {

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

@@ -23,7 +23,7 @@ import { z } from "zod";
 import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
 import { formatTimestampRange } from "../../lib/timeDisplay";
 import { cn, formatTokens } from "../../lib/utils";
-import { parseJsonResponse, readApiError } from "../../lib/apiClient";
+import { fetchJsonWithTimeout, fetchWithTimeout } from "../../lib/apiClient";
 import {
   KnowledgeCandidateSchema,
   type KnowledgeCandidate,
@@ -64,6 +64,10 @@ type CandidateLoadState =
   | { status: "ready"; error: null }
   | { status: "failed"; error: string };
 
+const CANDIDATE_GENERATE_TIMEOUT_MS = 30_000;
+const CANDIDATE_PROMOTE_TIMEOUT_MS = 15_000;
+const CANDIDATE_UPDATE_TIMEOUT_MS = 15_000;
+
 type TraceInsightKind = "session" | "tool" | "slow" | "failure" | "candidate";
 
 type TraceInsight = {
@@ -655,19 +659,13 @@ export function AgentTraceSummary({
     setCandidateState({ status: "loading", error: null });
     void (async () => {
       try {
-        const response = await fetch(
+        const parsed = await fetchJsonWithTimeout(
           `/api/knowledge/sessions/${encodeURIComponent(scopeId)}/candidates`,
+          CandidateResponseSchema,
+          CANDIDATE_GENERATE_TIMEOUT_MS,
           { method: "POST" },
+          (response) => `Candidate generation failed with ${String(response.status)}`,
         );
-        if (!response.ok) {
-          const message = await readApiError(
-            response,
-            `Candidate generation failed with ${String(response.status)}`,
-          );
-          setCandidateState({ status: "failed", error: message });
-          return;
-        }
-        const parsed = await parseJsonResponse(response, CandidateResponseSchema);
         setCandidates(parsed.candidates);
         setCandidatesExpanded(parsed.candidates.length > 0);
         setCandidateState(
@@ -694,8 +692,9 @@ export function AgentTraceSummary({
 
     void (async () => {
       try {
-        const response = await fetch(
+        const response = await fetchWithTimeout(
           `/api/knowledge/candidates/${encodeURIComponent(candidateId)}/promote`,
+          CANDIDATE_PROMOTE_TIMEOUT_MS,
           { method: "POST" },
         );
         const raw: unknown = await response.json().catch(() => null);
@@ -749,24 +748,17 @@ export function AgentTraceSummary({
       });
 
       try {
-        const response = await fetch(
+        const parsed = await fetchJsonWithTimeout(
           `/api/knowledge/candidates/${encodeURIComponent(candidateId)}`,
+          CandidateUpdateResponseSchema,
+          CANDIDATE_UPDATE_TIMEOUT_MS,
           {
             method: "PATCH",
             headers: { "Content-Type": "application/json" },
             body: JSON.stringify(update),
           },
+          (response) => `Candidate update failed with ${String(response.status)}`,
         );
-        if (!response.ok) {
-          const message = await readApiError(
-            response,
-            `Candidate update failed with ${String(response.status)}`,
-          );
-          setCandidateState({ status: "failed", error: message });
-          return false;
-        }
-
-        const parsed = await parseJsonResponse(response, CandidateUpdateResponseSchema);
         setCandidates((current) =>
           current.map((candidate) =>
             candidate.id === parsed.candidate.id ? parsed.candidate : candidate,

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

@@ -1,6 +1,6 @@
 import { Braces, Minimize2, RotateCcw } from "lucide-react";
 import type { JSX } from "react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { z } from "zod";
 import { useProviders } from "../../lib/useProviders";
 import { Button } from "../ui/button";
@@ -9,6 +9,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
 import { ResponseView } from "./ResponseView";
 import { CapturedLogSchema, type CapturedLog } from "../../contracts";
+import { ApiTimeoutError, fetchJsonWithTimeout } from "../../lib/apiClient";
 import { dispatchLogFocusRequest } from "./logFocus";
 import {
   buildReplayComparisons,
@@ -53,6 +54,9 @@ const ReplayHistorySchema = z.object({
   total: z.number(),
 });
 
+const REPLAY_TIMEOUT_MS = 60_000;
+const REPLAY_HISTORY_TIMEOUT_MS = 10_000;
+
 function formatJsonForEdit(value: string): string {
   try {
     const parsed: unknown = JSON.parse(value);
@@ -175,17 +179,26 @@ export function ReplayDialog({
   const [replayHistory, setReplayHistory] = useState<CapturedLog[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const replayAbortRef = useRef<AbortController | null>(null);
+  const replayRequestIdRef = useRef(0);
   const jsonEditState = useMemo(() => readJsonEditState(modifiedBody), [modifiedBody]);
 
+  const cancelReplay = useCallback(() => {
+    replayRequestIdRef.current += 1;
+    replayAbortRef.current?.abort();
+    replayAbortRef.current = null;
+    setLoading(false);
+  }, []);
+
   const refreshReplayHistory = useCallback(async (): Promise<void> => {
     if (!open) return;
     try {
-      const response = await fetch(`/api/logs?replayOf=${String(log.id)}`);
-      if (!response.ok) return;
-      const data: unknown = await response.json();
-      const parsed = ReplayHistorySchema.safeParse(data);
-      if (!parsed.success) return;
-      setReplayHistory(parsed.data.logs);
+      const data = await fetchJsonWithTimeout(
+        `/api/logs?replayOf=${String(log.id)}`,
+        ReplayHistorySchema,
+        REPLAY_HISTORY_TIMEOUT_MS,
+      );
+      setReplayHistory(data.logs);
     } catch {
       // Replay history is helpful context, not required for replay itself.
     }
@@ -195,44 +208,74 @@ export function ReplayDialog({
     void refreshReplayHistory();
   }, [refreshReplayHistory]);
 
+  useEffect(() => {
+    if (open) return undefined;
+    cancelReplay();
+    return undefined;
+  }, [cancelReplay, open]);
+
+  useEffect(() => {
+    return () => {
+      replayRequestIdRef.current += 1;
+      replayAbortRef.current?.abort();
+      replayAbortRef.current = null;
+    };
+  }, []);
+
   async function handleReplay() {
     if (!jsonEditState.valid) {
       setError("Request body must be valid JSON before replay.");
       return;
     }
 
+    replayAbortRef.current?.abort();
+    const requestId = replayRequestIdRef.current + 1;
+    replayRequestIdRef.current = requestId;
+    const controller = new AbortController();
+    replayAbortRef.current = controller;
+
     setLoading(true);
     setError(null);
     setReplayResult(null);
 
     try {
-      const res = await fetch(`/api/logs/${log.id}/replay`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ modifiedBody }),
-      });
-
-      const json: unknown = await res.json();
-      const parsed = ReplayResultSchema.safeParse(json);
-      if (!parsed.success) {
-        setError("Invalid response from server");
-        setLoading(false);
-        return;
-      }
-      const data = parsed.data;
+      const data = await fetchJsonWithTimeout(
+        `/api/logs/${log.id}/replay`,
+        ReplayResultSchema,
+        REPLAY_TIMEOUT_MS,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ modifiedBody }),
+          signal: controller.signal,
+        },
+      );
+      if (replayRequestIdRef.current !== requestId) return;
       setReplayResult(data);
       await refreshReplayHistory();
       if (!data.success) {
         setError(data.error ?? "Replay failed");
       }
     } catch (err) {
+      if (replayRequestIdRef.current !== requestId) return;
+      if (
+        err instanceof ApiTimeoutError ||
+        (err instanceof DOMException && err.name === "AbortError")
+      ) {
+        setError("Replay timed out or was canceled.");
+        return;
+      }
       setError(err instanceof Error ? err.message : "Network error");
     } finally {
-      setLoading(false);
+      if (replayRequestIdRef.current === requestId) {
+        replayAbortRef.current = null;
+        setLoading(false);
+      }
     }
   }
 
   function handleClose() {
+    cancelReplay();
     setReplayResult(null);
     setError(null);
     onOpenChange(false);

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

@@ -1,8 +1,10 @@
-import { memo, Suspense, useState, useEffect, useMemo, type JSX } from "react";
+import { memo, Suspense, useState, useEffect, useMemo, useRef, type JSX } from "react";
 import { ChevronDown, ChevronRight, Loader2 } from "lucide-react";
+import { z } from "zod";
 import { Badge } from "../ui/badge";
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
-import type { StreamingChunk } from "../../contracts";
+import { StreamingChunkSchema, type StreamingChunk } from "../../contracts";
+import { fetchJsonWithTimeout } from "../../lib/apiClient";
 import { LazyJsonViewer } from "./lazy";
 
 export type StreamingChunkSequenceProps = {
@@ -21,6 +23,13 @@ type ChunkGroup = {
   chunks: StreamingChunk[];
 };
 
+const StreamingChunksResponseSchema = z.object({
+  chunks: z.array(StreamingChunkSchema),
+  truncated: z.boolean().optional(),
+});
+
+const CHUNK_FETCH_TIMEOUT_MS = 10_000;
+
 export const StreamingChunkSequence = memo(function StreamingChunkSequence({
   logId,
   truncated,
@@ -28,33 +37,37 @@ export const StreamingChunkSequence = memo(function StreamingChunkSequence({
   const [containerExpanded, setContainerExpanded] = useState(false);
   const [chunkState, setChunkState] = useState<ChunkState>({ status: "idle" });
   const [expandedIndices, setExpandedIndices] = useState<Set<number>>(new Set());
+  const loadedLogIdRef = useRef<number | null>(null);
 
   useEffect(() => {
-    if (!containerExpanded || chunkState.status !== "idle") return;
+    if (!containerExpanded) return;
+    if (loadedLogIdRef.current === logId) return;
 
-    let cancelled = false;
+    const controller = new AbortController();
     setChunkState({ status: "loading" });
 
-    fetch(`/api/logs/${logId}/chunks`)
-      .then((res) => {
-        if (!res.ok) {
-          return Promise.reject(new Error("Chunks not found"));
-        }
-        return res.json();
-      })
-      .then((data: { chunks: StreamingChunk[]; truncated?: boolean }) => {
-        if (!cancelled) {
-          setChunkState({ status: "success", chunks: data.chunks });
-        }
+    void fetchJsonWithTimeout(
+      `/api/logs/${logId}/chunks`,
+      StreamingChunksResponseSchema,
+      CHUNK_FETCH_TIMEOUT_MS,
+      { signal: controller.signal },
+      () => "Chunks not found",
+    )
+      .then((data) => {
+        loadedLogIdRef.current = logId;
+        setChunkState({ status: "success", chunks: data.chunks });
       })
-      .catch(() => {
-        if (!cancelled) {
-          setChunkState({ status: "error", message: "Chunk data unavailable" });
-        }
+      .catch((error: unknown) => {
+        if (error instanceof DOMException && error.name === "AbortError") return;
+        loadedLogIdRef.current = null;
+        setChunkState({
+          status: "error",
+          message: error instanceof Error ? error.message : "Chunk data unavailable",
+        });
       });
 
     return () => {
-      cancelled = true;
+      controller.abort();
     };
   }, [containerExpanded, logId]);
 

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

@@ -217,13 +217,6 @@ export const TurnGroup = memo(function TurnGroup({
             }
           }}
         >
-          {/* Turn number */}
-          <div className="w-5 shrink-0 flex items-start pt-1.5">
-            <span className="text-[10px] text-muted-foreground/50 font-mono tabular-nums leading-none select-none">
-              {turnIndex + 1}
-            </span>
-          </div>
-
           <div className="w-6 shrink-0 flex flex-col items-center pt-1.5 pb-1.5">
             <div className="flex justify-center h-[calc(0.75rem-8px)]" />
             <CollapsedCrab
@@ -344,15 +337,6 @@ export const TurnGroup = memo(function TurnGroup({
 
           return (
             <div key={log.id} className="flex items-stretch">
-              {isTurnStart ? (
-                <div className="w-5 shrink-0 flex items-start pt-1.5">
-                  <span className="text-[10px] text-muted-foreground/50 font-mono tabular-nums leading-none select-none">
-                    {turnIndex + 1}
-                  </span>
-                </div>
-              ) : (
-                <div className="w-5 shrink-0" />
-              )}
               <ThreadConnector
                 stopReason={reason}
                 isPending={log.responseStatus === null}

package/src/components/proxy-viewer/log-formats/anthropic.ts

@@ -1,6 +1,7 @@
 import { AnthropicRequestSchema, AnthropicResponseSchema } from "../../../contracts/anthropic";
 import type { AnatomySegment } from "../anatomy/types";
 import { countCharacters, estimateTokens } from "../anatomy/tokenEstimate";
+import { parseRequestTools } from "../requestTools";
 import type { LogFormatAdapter } from "./types";
 import { emptyRequestAnalysis, EMPTY_RESPONSE_ANALYSIS } from "./types";
 
@@ -113,16 +114,15 @@ export const anthropicLogFormatAdapter: LogFormatAdapter = {
   analyzeRequest(rawBody) {
     if (rawBody === null) return emptyRequestAnalysis(rawBody);
     try {
-      const result = AnthropicRequestSchema.safeParse(JSON.parse(rawBody));
+      const parsedBody: unknown = JSON.parse(rawBody);
+      const toolCount = parseRequestTools(parsedBody)?.tools.length ?? null;
+      const result = AnthropicRequestSchema.safeParse(parsedBody);
       if (!result.success) return emptyRequestAnalysis(rawBody);
       return {
         parsed: result.data,
         comparisonValue: result.data,
         messageCount: result.data.messages.length,
-        toolCount:
-          result.data.tools !== undefined && result.data.tools.length > 0
-            ? result.data.tools.length
-            : null,
+        toolCount,
       };
     } catch {
       return emptyRequestAnalysis(rawBody);