@tonyclaw/agent-inspector 3.0.7 → 3.0.8

package/src/components/providers/ImportWizardDialog.tsx

@@ -1,66 +1,12 @@
-import { type JSX, useState, useCallback, useEffect } from "react";
+import { type JSX, useState, useCallback, useEffect, useRef } from "react";
 import { z } from "zod";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog";
 import { Button } from "../ui/button";
+import { fetchJsonWithTimeout } from "../../lib/apiClient";
+import { ClientLogo } from "../clients/ClientLogo";
 
 import { Loader2, Download, AlertCircle } from "lucide-react";
 
-function ClaudeCodeIcon(): JSX.Element {
-  return (
-    <svg
-      fill="currentColor"
-      fillRule="evenodd"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      className="size-6 shrink-0"
-    >
-      <title>Claude Code</title>
-      <path
-        clipRule="evenodd"
-        d="M20.998 10.949H24v3.102h-3v3.028h-1.487V20H18v-2.921h-1.487V20H15v-2.921H9V20H7.488v-2.921H6V20H4.487v-2.921H3V14.05H0V10.95h3V5h17.998v5.949zM6 10.949h1.488V8.102H6v2.847zm10.51 0H18V8.102h-1.49v2.847z"
-      />
-    </svg>
-  );
-}
-
-function OpenCodeIcon(): JSX.Element {
-  return (
-    <svg
-      fill="currentColor"
-      fillRule="evenodd"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      className="size-6 shrink-0"
-    >
-      <title>OpenCode</title>
-      <path d="M16 6H8v12h8V6zm4 16H4V2h16v20z" />
-    </svg>
-  );
-}
-
-function MiMoCodeIcon(): JSX.Element {
-  return (
-    <svg
-      fill="currentColor"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      className="size-6 shrink-0"
-    >
-      <title>MiMo Code</title>
-      <text
-        x="12"
-        y="18"
-        textAnchor="middle"
-        fontSize="16"
-        fontWeight="800"
-        fontFamily="system-ui, sans-serif"
-      >
-        M
-      </text>
-    </svg>
-  );
-}
-
 const ExternalProviderSchema = z.object({
   name: z.string(),
   apiKey: z.string(),
@@ -85,11 +31,7 @@ const ImportResponseSchema = z.object({
   errors: z.array(z.string()).optional(),
 });
 
-const sourceLogoMap: Record<string, () => JSX.Element> = {
-  "claude-code": ClaudeCodeIcon,
-  opencode: OpenCodeIcon,
-  "mimo-code": MiMoCodeIcon,
-};
+const PROVIDER_IMPORT_TIMEOUT_MS = 20_000;
 
 type ImportWizardDialogProps = {
   open: boolean;
@@ -110,8 +52,12 @@ export function ImportWizardDialog({
   const [importing, setImporting] = useState(false);
   const [importResult, setImportResult] = useState<string | null>(null);
   const [importError, setImportError] = useState<string | null>(null);
+  const scanRequestIdRef = useRef(0);
+  const importRequestIdRef = useRef(0);
 
   const scan = useCallback(() => {
+    const requestId = scanRequestIdRef.current + 1;
+    scanRequestIdRef.current = requestId;
     setScanning(true);
     setScanError(null);
     setWarnings([]);
@@ -120,33 +66,29 @@ export function ImportWizardDialog({
     setImportResult(null);
     setImportError(null);
 
-    fetch("/api/providers/scan")
-      .then((res) => {
-        if (!res.ok) {
-          return res.text().then((text) => {
-            setScanError(`Scan failed (${res.status}): ${text}`);
-          });
-        }
-        return res.json().then((data: unknown) => {
-          const parsed = ScanResponseSchema.safeParse(data);
-          if (!parsed.success) {
-            setScanError(`Invalid response: ${parsed.error.message}`);
-            return;
-          }
-          setProviders(parsed.data.providers);
-          setWarnings(parsed.data.warnings ?? []);
-          // Pre-select non-existing providers
-          const indices = new Set<number>();
-          parsed.data.providers.forEach((p, i) => {
-            if (!p.alreadyExists) indices.add(i);
-          });
-          setSelected(indices);
+    void fetchJsonWithTimeout(
+      "/api/providers/scan",
+      ScanResponseSchema,
+      PROVIDER_IMPORT_TIMEOUT_MS,
+      undefined,
+      (response) => `Scan failed (${String(response.status)})`,
+    )
+      .then((data) => {
+        if (scanRequestIdRef.current !== requestId) return;
+        setProviders(data.providers);
+        setWarnings(data.warnings ?? []);
+        const indices = new Set<number>();
+        data.providers.forEach((provider, index) => {
+          if (!provider.alreadyExists) indices.add(index);
         });
+        setSelected(indices);
       })
       .catch((err: unknown) => {
+        if (scanRequestIdRef.current !== requestId) return;
         setScanError(err instanceof Error ? err.message : String(err));
       })
       .finally(() => {
+        if (scanRequestIdRef.current !== requestId) return;
         setScanning(false);
       });
   }, []);
@@ -158,6 +100,14 @@ export function ImportWizardDialog({
     }
   }, [open, scan]);
 
+  useEffect(() => {
+    if (open) return;
+    scanRequestIdRef.current += 1;
+    importRequestIdRef.current += 1;
+    setScanning(false);
+    setImporting(false);
+  }, [open]);
+
   const toggleProvider = useCallback((index: number) => {
     setSelected((prev) => {
       const next = new Set(prev);
@@ -174,6 +124,8 @@ export function ImportWizardDialog({
     const toImport = providers.filter((_, i) => selected.has(i));
     if (toImport.length === 0) return;
 
+    const requestId = importRequestIdRef.current + 1;
+    importRequestIdRef.current = requestId;
     setImporting(true);
     setImportError(null);
     setImportResult(null);
@@ -193,19 +145,19 @@ export function ImportWizardDialog({
       updatedAt: now,
     }));
 
-    fetch("/api/providers/import", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ providers: providersPayload }),
-    })
-      .then((res) => res.json())
-      .then((data: unknown) => {
-        const parsed = ImportResponseSchema.safeParse(data);
-        if (!parsed.success) {
-          setImportError(`Invalid response: ${parsed.error.message}`);
-          return;
-        }
-        const result = parsed.data;
+    void fetchJsonWithTimeout(
+      "/api/providers/import",
+      ImportResponseSchema,
+      PROVIDER_IMPORT_TIMEOUT_MS,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ providers: providersPayload }),
+      },
+      (response) => `Import failed (${String(response.status)})`,
+    )
+      .then((result) => {
+        if (importRequestIdRef.current !== requestId) return;
         // Mark imported providers as already existing so they can't be re-selected
         setProviders((prev) =>
           prev.map((p, i) => (selected.has(i) ? { ...p, alreadyExists: true } : p)),
@@ -224,9 +176,11 @@ export function ImportWizardDialog({
         onImportComplete();
       })
       .catch((err: unknown) => {
+        if (importRequestIdRef.current !== requestId) return;
         setImportError(err instanceof Error ? err.message : String(err));
       })
       .finally(() => {
+        if (importRequestIdRef.current !== requestId) return;
         setImporting(false);
       });
   }, [providers, selected, onImportComplete]);
@@ -286,11 +240,7 @@ export function ImportWizardDialog({
                 )}
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center justify-between">
-                    {(() => {
-                      const LogoComponent = sourceLogoMap[p.sourceTool];
-                      if (LogoComponent === undefined) return null;
-                      return <LogoComponent />;
-                    })()}
+                    <ClientLogo client={p.sourceTool} className="size-7 rounded-[8px]" />
                     {p.alreadyExists && (
                       <span className="text-[10px] text-muted-foreground">Already added</span>
                     )}

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,