@tonyclaw/agent-inspector 4.0.1 → 4.0.3

package/src/components/providers/ProvidersPanel.tsx

@@ -1,714 +0,0 @@
-import { type JSX, useState, useEffect, useCallback, useMemo, useRef } from "react";
-import { z } from "zod";
-import { Button } from "../ui/button";
-import { Plus, AlertCircle, Copy, Check, Download, Upload, Scan } from "lucide-react";
-import { ImportWizardDialog } from "./ImportWizardDialog";
-import { ConfirmDialog } from "../ui/confirm-dialog";
-import { ProviderCard } from "./ProviderCard";
-import { ProviderForm } from "./ProviderForm";
-import {
-  ApiTimeoutError,
-  fetchJsonWithTimeout,
-  fetchWithTimeout,
-  parseJsonResponse,
-  readApiError,
-} from "../../lib/apiClient";
-import { copyTextToClipboard } from "../../lib/clipboard";
-import {
-  RedactedProviderDtoSchema,
-  type ProviderConfig,
-  type ProviderModelMetadata,
-} from "../../lib/providerContract";
-import {
-  createFailedProviderTestResults,
-  createPendingProviderTestResults,
-  ProviderTestResultsSchema,
-  type ProviderTestResults as TestResults,
-} from "../../lib/providerTestContract";
-import { useStripConfig } from "../../lib/useStripConfig";
-
-export type { ProviderTestResults as TestResults } from "../../lib/providerTestContract";
-
-const ConfigPathsResponseSchema = z.object({
-  providerConfig: z.string(),
-});
-
-const ImportResponseSchema = z.object({
-  success: z.boolean().optional(),
-  imported: z.number().optional(),
-  message: z.string().optional(),
-  errors: z.array(z.string()).optional(),
-});
-
-const ModelMetadataRefreshResponseSchema = z.object({
-  provider: RedactedProviderDtoSchema,
-  imported: z.number(),
-  matchedModels: z.array(z.string()),
-  missingModels: z.array(z.string()),
-  sourceUrl: z.string(),
-});
-
-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;
-  apiKey: string;
-  models: string[];
-  anthropicBaseUrl?: string;
-  openaiBaseUrl?: string;
-  openaiResponsesBaseUrl?: string;
-  apiDocsUrl?: string;
-  modelMetadataUrl?: string;
-  modelMetadata?: ProviderModelMetadata[];
-  source?: "company" | "personal";
-};
-
-function endpointPayloadValue(
-  value: string | undefined,
-  preserveEmptyEndpoints: boolean,
-): string | undefined {
-  if ((value?.length ?? 0) > 0) return value;
-  return preserveEmptyEndpoints && value !== undefined ? "" : undefined;
-}
-
-function createProviderPayload(data: ProviderFormData, preserveEmptyEndpoints = false) {
-  return {
-    name: data.name,
-    ...(data.apiKey.trim() === "" ? {} : { apiKey: data.apiKey }),
-    models: data.models,
-    anthropicBaseUrl: endpointPayloadValue(data.anthropicBaseUrl, preserveEmptyEndpoints),
-    openaiBaseUrl: endpointPayloadValue(data.openaiBaseUrl, preserveEmptyEndpoints),
-    openaiResponsesBaseUrl: endpointPayloadValue(
-      data.openaiResponsesBaseUrl,
-      preserveEmptyEndpoints,
-    ),
-    apiDocsUrl: (data.apiDocsUrl?.length ?? 0) > 0 ? data.apiDocsUrl : undefined,
-    modelMetadataUrl: (data.modelMetadataUrl?.length ?? 0) > 0 ? data.modelMetadataUrl : undefined,
-    modelMetadata: data.modelMetadata,
-    source: data.source,
-  };
-}
-
-function getProviderTestTimeoutSeconds(
-  provider: ProviderConfig | undefined,
-  timeoutSecondsPerModel: number,
-): number {
-  const modelCount =
-    provider?.models?.map((model) => model.trim()).filter((model) => model !== "").length ?? 0;
-  return Math.max(1, modelCount) * timeoutSecondsPerModel;
-}
-
-async function persistProviderTestLog(providerId: string, results: TestResults): Promise<void> {
-  if (results.models === undefined) {
-    return;
-  }
-  try {
-    await fetchWithTimeout(`/api/providers/${providerId}/test/log`, PROVIDER_TEST_LOG_TIMEOUT_MS, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(results),
-    });
-  } catch {
-    // Provider connection status is primary; log persistence is best-effort.
-  }
-}
-
-type ProvidersPanelProps = {
-  externalProviders?: ProviderConfig[];
-  isLoading?: boolean;
-  externalTestResults?: Record<string, TestResults>;
-  externalTestingProviders?: Set<string>;
-  externalTestingTimeLeft?: Record<string, number>;
-  onProvidersMutate?: () => Promise<unknown>;
-  onTestResultsChange?: (providerId: string, results: TestResults) => void;
-  onTestingProvidersChange?: (providerId: string, isTesting: boolean) => void;
-  onTestingTimeLeftChange?: (providerId: string, seconds: number | undefined) => void;
-};
-
-export function ProvidersPanel({
-  externalProviders,
-  isLoading = false,
-  externalTestResults,
-  externalTestingProviders,
-  externalTestingTimeLeft,
-  onProvidersMutate,
-  onTestResultsChange,
-  onTestingProvidersChange,
-  onTestingTimeLeftChange,
-}: ProvidersPanelProps): JSX.Element {
-  const [showForm, setShowForm] = useState(false);
-  const [editingProvider, setEditingProvider] = useState<ProviderConfig | undefined>();
-  const [error, setError] = useState<string | null>(null);
-  const [internalTestResults, setInternalTestResults] = useState<Record<string, TestResults>>({});
-  const [internalTestingProviders, setInternalTestingProviders] = useState<Set<string>>(new Set());
-  const [internalTestingTimeLeft, setInternalTestingTimeLeft] = useState<Record<string, number>>(
-    {},
-  );
-  const [configPath, setConfigPath] = useState<string | null>(null);
-  const [configPathCopied, setConfigPathCopied] = useState(false);
-  const [highlightedProviderId, setHighlightedProviderId] = useState<string | null>(null);
-  const [showImportWizard, setShowImportWizard] = useState(false);
-  const [confirmOpen, setConfirmOpen] = useState(false);
-  const [deletingProviderId, setDeletingProviderId] = useState<string | null>(null);
-  const [sourceFilter, setSourceFilter] = useState<"all" | "personal" | "company">("all");
-  const [refreshingMetadataProviders, setRefreshingMetadataProviders] = useState<Set<string>>(
-    new Set(),
-  );
-  const { providerTestTimeoutSeconds } = useStripConfig();
-  const listScrollRef = useRef<HTMLDivElement>(null);
-  const highlightTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  // Use external state if provided (from SWR), otherwise use internal state
-  const providers = externalProviders ?? [];
-  const filteredProviders = useMemo(() => {
-    const filtered =
-      sourceFilter === "all" ? providers : providers.filter((p) => p.source === sourceFilter);
-    if (sourceFilter === "all") {
-      return [...filtered].sort((a, b) => {
-        const order: Record<string, number> = { personal: 0, company: 1 };
-        return (order[a.source ?? ""] ?? 2) - (order[b.source ?? ""] ?? 2);
-      });
-    }
-    return filtered;
-  }, [providers, sourceFilter]);
-  const testResults = externalTestResults ?? internalTestResults;
-  const testingProviders = externalTestingProviders ?? internalTestingProviders;
-  const testingTimeLeft = externalTestingTimeLeft ?? internalTestingTimeLeft;
-  const setTestingTimeLeft = onTestingTimeLeftChange
-    ? (id: string, seconds: number | undefined) => onTestingTimeLeftChange(id, seconds)
-    : (id: string, seconds: number | undefined) => {
-        if (seconds === undefined) {
-          setInternalTestingTimeLeft((prev) => {
-            const next = { ...prev };
-            delete next[id];
-            return next;
-          });
-        } else {
-          setInternalTestingTimeLeft((prev) => ({ ...prev, [id]: seconds }));
-        }
-      };
-
-  useEffect(() => {
-    void (async () => {
-      try {
-        const data = await fetchJsonWithTimeout(
-          "/api/config/paths",
-          ConfigPathsResponseSchema,
-          CONFIG_PATH_FETCH_TIMEOUT_MS,
-        );
-        setConfigPath(data.providerConfig);
-      } catch {
-        // Ignore
-      }
-    })();
-  }, []);
-
-  const triggerHighlight = useCallback((providerId: string) => {
-    // Cancel any existing highlight timeout
-    if (highlightTimeoutRef.current !== null) {
-      clearTimeout(highlightTimeoutRef.current);
-    }
-    setHighlightedProviderId(providerId);
-    // Scroll the list to bring the card into view
-    listScrollRef.current?.scrollTo({
-      top: listScrollRef.current.scrollHeight,
-      behavior: "smooth",
-    });
-    // Clear highlight after 2 seconds
-    highlightTimeoutRef.current = setTimeout(() => {
-      setHighlightedProviderId(null);
-      highlightTimeoutRef.current = null;
-    }, 2000);
-  }, []);
-
-  useEffect(
-    () => () => {
-      if (highlightTimeoutRef.current !== null) {
-        clearTimeout(highlightTimeoutRef.current);
-      }
-    },
-    [],
-  );
-
-  const refreshProviders = useCallback((): void => {
-    onProvidersMutate?.().catch(() => {});
-  }, [onProvidersMutate]);
-
-  const updateTestResults = useCallback(
-    (providerId: string, results: TestResults): void => {
-      if (onTestResultsChange) {
-        onTestResultsChange(providerId, results);
-      } else {
-        setInternalTestResults((prev) => ({ ...prev, [providerId]: results }));
-      }
-    },
-    [onTestResultsChange],
-  );
-
-  const updateTestingState = useCallback(
-    (providerId: string, isTesting: boolean): void => {
-      if (onTestingProvidersChange) {
-        onTestingProvidersChange(providerId, isTesting);
-        return;
-      }
-      setInternalTestingProviders((prev) => {
-        const next = new Set(prev);
-        if (isTesting) next.add(providerId);
-        else next.delete(providerId);
-        return next;
-      });
-    },
-    [onTestingProvidersChange],
-  );
-
-  const runTest = useCallback(
-    async (providerId: string): Promise<void> => {
-      // Clear previous test results when starting a new test
-      updateTestResults(providerId, createPendingProviderTestResults());
-      updateTestingState(providerId, true);
-
-      // Create abort controller for this test request
-      const controller = new AbortController();
-      const provider = providers.find((candidate) => candidate.id === providerId);
-      const timeoutSeconds = getProviderTestTimeoutSeconds(provider, providerTestTimeoutSeconds);
-
-      // Start countdown
-      let remaining = timeoutSeconds;
-      setTestingTimeLeft(providerId, remaining);
-      const intervalId = setInterval(() => {
-        remaining--;
-        setTestingTimeLeft(providerId, remaining);
-        if (remaining <= 0) {
-          clearInterval(intervalId);
-          // Abort the fetch request when time runs out
-          controller.abort();
-        }
-      }, 1000);
-
-      try {
-        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";
-        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"),
-          );
-        }
-      } finally {
-        // Always clear the countdown and testing state, even if an error occurs
-        clearInterval(intervalId);
-        setTestingTimeLeft(providerId, undefined);
-        updateTestingState(providerId, false);
-      }
-    },
-    [
-      providerTestTimeoutSeconds,
-      providers,
-      setTestingTimeLeft,
-      updateTestResults,
-      updateTestingState,
-    ],
-  );
-
-  const refreshProviderMetadata = useCallback(
-    async (providerId: string, url?: string, showError = true): Promise<boolean> => {
-      setRefreshingMetadataProviders((prev) => {
-        const next = new Set(prev);
-        next.add(providerId);
-        return next;
-      });
-      try {
-        const payload = url !== undefined && url.trim() !== "" ? { url } : {};
-        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 {
-          setError(null);
-        }
-        triggerHighlight(data.provider.id);
-        refreshProviders();
-        return data.imported > 0;
-      } catch (err) {
-        if (showError) {
-          setError(err instanceof Error ? err.message : NETWORK_ERROR_MESSAGE);
-        }
-        return false;
-      } finally {
-        setRefreshingMetadataProviders((prev) => {
-          const next = new Set(prev);
-          next.delete(providerId);
-          return next;
-        });
-      }
-    },
-    [refreshProviders, triggerHighlight],
-  );
-
-  function handleAddProvider(data: ProviderFormData): void {
-    void (async () => {
-      try {
-        const newProvider = await fetchJsonWithTimeout(
-          "/api/providers",
-          RedactedProviderDtoSchema,
-          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() !== "") {
-          await refreshProviderMetadata(newProvider.id, data.modelMetadataUrl, false);
-        }
-        refreshProviders();
-        await runTest(newProvider.id);
-      } catch (err) {
-        setError(err instanceof Error ? err.message : NETWORK_ERROR_MESSAGE);
-      }
-    })();
-  }
-
-  function handleUpdateProvider(data: ProviderFormData): void {
-    if (!editingProvider) return;
-    void (async () => {
-      try {
-        const updated = await fetchJsonWithTimeout(
-          `/api/providers/${editingProvider.id}`,
-          RedactedProviderDtoSchema,
-          PROVIDER_WRITE_TIMEOUT_MS,
-          {
-            method: "PUT",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify(createProviderPayload(data, true)),
-          },
-          () => "Failed to update provider",
-        );
-        setEditingProvider(undefined);
-        triggerHighlight(updated.id);
-        if (data.modelMetadataUrl !== undefined && data.modelMetadataUrl.trim() !== "") {
-          await refreshProviderMetadata(updated.id, data.modelMetadataUrl, false);
-        }
-        refreshProviders();
-        // Only run connection test when critical fields (apiKey, model, base URLs) changed
-        const criticalFieldsChanged =
-          data.apiKey.trim() !== "" ||
-          JSON.stringify(data.models) !== JSON.stringify(editingProvider.models) ||
-          (data.anthropicBaseUrl ?? "") !== (editingProvider.anthropicBaseUrl ?? "") ||
-          (data.openaiBaseUrl ?? "") !== (editingProvider.openaiBaseUrl ?? "") ||
-          (data.openaiResponsesBaseUrl ?? "") !== (editingProvider.openaiResponsesBaseUrl ?? "");
-        if (criticalFieldsChanged) {
-          await runTest(updated.id);
-        }
-      } catch (err) {
-        setError(err instanceof Error ? err.message : NETWORK_ERROR_MESSAGE);
-      }
-    })();
-  }
-
-  function handleDeleteProvider(providerId: string): void {
-    setDeletingProviderId(providerId);
-    setConfirmOpen(true);
-  }
-
-  function executeDelete(): void {
-    const providerId = deletingProviderId;
-    if (providerId === null) return;
-    void (async () => {
-      let res: Response;
-      try {
-        res = await fetchWithTimeout(`/api/providers/${providerId}`, PROVIDER_DELETE_TIMEOUT_MS, {
-          method: "DELETE",
-        });
-      } catch {
-        setError(NETWORK_ERROR_MESSAGE);
-        return;
-      }
-      if (!res.ok) {
-        setError(await readApiError(res, "Failed to delete provider"));
-        return;
-      }
-      refreshProviders();
-    })();
-  }
-
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  function handleExport(includeKeys: boolean): void {
-    const url = `/api/providers/export${includeKeys ? "?includeKeys=true" : ""}`;
-    void (async () => {
-      try {
-        const res = await fetchWithTimeout(url, PROVIDER_EXPORT_TIMEOUT_MS);
-        if (!res.ok) {
-          setError("Failed to export providers");
-          return;
-        }
-        const blob = await res.blob();
-        const downloadUrl = URL.createObjectURL(blob);
-        const a = document.createElement("a");
-        a.href = downloadUrl;
-        a.download =
-          res.headers.get("Content-Disposition")?.match(/filename="(.+)"/)?.[1] ?? "providers.json";
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-        URL.revokeObjectURL(downloadUrl);
-      } catch {
-        setError("Failed to export providers");
-      }
-    })();
-  }
-
-  function handleImportClick(): void {
-    fileInputRef.current?.click();
-  }
-
-  function handleFileChange(e: React.ChangeEvent<HTMLInputElement>): void {
-    const file = e.target.files?.[0];
-    if (!file) return;
-
-    void (async () => {
-      try {
-        const text = await file.text();
-        const res = await fetchWithTimeout("/api/providers/import", PROVIDER_IMPORT_TIMEOUT_MS, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(text),
-        });
-        const data = await parseJsonResponse(res, ImportResponseSchema);
-        if (res.ok && data.imported !== undefined && data.imported > 0) {
-          refreshProviders();
-          // Show success message via error state temporarily
-          setError(null);
-          // Use a ref or state to show success - for now just refresh list
-        } else if (data.errors && data.errors.length > 0) {
-          setError(data.errors.join("; "));
-        } else {
-          setError(data.message ?? "Import failed");
-        }
-      } catch {
-        setError("Failed to import providers");
-      }
-      // Reset file input
-      e.target.value = "";
-    })();
-  }
-
-  // Only show loading if we are actually loading (prevents flashing when reopening Settings during test)
-  if (isLoading) {
-    return (
-      <div className="flex items-center justify-center py-8">
-        <p className="text-sm text-muted-foreground">Loading providers...</p>
-      </div>
-    );
-  }
-
-  if (showForm || editingProvider) {
-    return (
-      <div className="space-y-4">
-        <div className="sticky top-0 z-10 flex items-center justify-between gap-3 rounded-[8px] bg-background/95 px-1 py-1 backdrop-blur">
-          <h3 className="text-lg font-medium">
-            {editingProvider ? "Edit Provider" : "Add New Provider"}
-          </h3>
-        </div>
-        <ProviderForm
-          provider={editingProvider}
-          onSubmit={editingProvider ? handleUpdateProvider : handleAddProvider}
-          onCancel={() => {
-            setShowForm(false);
-            setEditingProvider(undefined);
-          }}
-        />
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-4">
-      <div
-        data-provider-toolbar="true"
-        className="sticky top-0 z-10 flex min-w-0 flex-wrap items-center justify-start gap-2 rounded-[8px] bg-background/95 px-1 py-1 backdrop-blur sm:justify-end"
-      >
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => handleExport(false)}
-          className="gap-1 hover:bg-muted"
-        >
-          <Download className="size-3" />
-          Export
-        </Button>
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={handleImportClick}
-          className="gap-1 hover:bg-muted"
-        >
-          <Upload className="size-3" />
-          Import
-        </Button>
-        <input
-          type="file"
-          ref={fileInputRef}
-          accept=".json"
-          onChange={handleFileChange}
-          style={{ display: "none" }}
-        />
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => setShowImportWizard(true)}
-          className="gap-1"
-        >
-          <Scan className="size-3" />
-          Scan
-        </Button>
-        <Button onClick={() => setShowForm(true)} size="sm" className="gap-1">
-          <Plus className="size-4" />
-          Add Provider
-        </Button>
-      </div>
-
-      {configPath !== null && (
-        <div className="flex items-center gap-2 rounded-[8px] bg-muted/15 px-3 py-2 text-xs text-muted-foreground">
-          <span className="font-mono truncate" title={configPath}>
-            {configPath}
-          </span>
-          <button
-            type="button"
-            onClick={() => {
-              void copyTextToClipboard(configPath).then((success) => {
-                if (!success) return;
-                setConfigPathCopied(true);
-                setTimeout(() => setConfigPathCopied(false), 2000);
-              });
-            }}
-            className="ml-auto shrink-0 text-muted-foreground transition-colors hover:text-foreground"
-            aria-label={configPathCopied ? "Copied config file path" : "Copy config file path"}
-          >
-            {configPathCopied ? (
-              <Check className="size-3 text-status-success" />
-            ) : (
-              <Copy className="size-3" />
-            )}
-          </button>
-        </div>
-      )}
-
-      {error !== null && (
-        <div className="border border-border bg-card shadow-sm flex items-center gap-2 rounded-[8px] px-3 py-2 text-sm text-destructive">
-          <AlertCircle className="size-4 shrink-0" />
-          {error}
-        </div>
-      )}
-
-      {providers.length === 0 ? (
-        <div className="border border-border bg-card shadow-sm space-y-3 rounded-[8px] py-12 text-center">
-          <p className="text-sm text-muted-foreground">No providers configured yet.</p>
-          <Button onClick={() => setShowForm(true)} variant="outline" size="sm">
-            <Plus className="size-4" />
-            Add Your First Provider
-          </Button>
-        </div>
-      ) : (
-        <div className="space-y-3">
-          <div className="inline-flex w-fit gap-1 rounded-[8px] bg-muted/20 p-1">
-            {(["all", "personal", "company"] as const).map((tab) => (
-              <button
-                key={tab}
-                type="button"
-                onClick={() => setSourceFilter(tab)}
-                className={`rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${
-                  sourceFilter === tab
-                    ? "bg-background text-foreground shadow-sm"
-                    : "text-muted-foreground hover:text-foreground"
-                }`}
-              >
-                {tab === "all" ? "All" : tab === "personal" ? "Personal" : "Company"}
-              </button>
-            ))}
-          </div>
-          <div ref={listScrollRef} className="space-y-3">
-            {filteredProviders.map((provider) => (
-              <ProviderCard
-                key={provider.id}
-                provider={provider}
-                testResults={testResults[provider.id]}
-                isTesting={testingProviders.has(provider.id)}
-                testingTimeLeft={testingTimeLeft[provider.id]}
-                isHighlighted={provider.id === highlightedProviderId}
-                onEdit={(p) => setEditingProvider(p)}
-                onDelete={handleDeleteProvider}
-                onRefreshMetadata={(id) => {
-                  void refreshProviderMetadata(id);
-                }}
-                isRefreshingMetadata={refreshingMetadataProviders.has(provider.id)}
-                onTest={(id: string) => {
-                  void runTest(id);
-                }}
-              />
-            ))}
-          </div>
-        </div>
-      )}
-
-      <ImportWizardDialog
-        open={showImportWizard}
-        onOpenChange={setShowImportWizard}
-        onImportComplete={() => {
-          if (onProvidersMutate !== undefined) {
-            void onProvidersMutate();
-          }
-        }}
-      />
-
-      <ConfirmDialog
-        open={confirmOpen}
-        onOpenChange={setConfirmOpen}
-        title="Delete Provider"
-        description="Are you sure you want to delete this provider? This action cannot be undone."
-        confirmLabel="Delete"
-        variant="destructive"
-        onConfirm={executeDelete}
-      />
-    </div>
-  );
-}