zevairouter 1.0.154 → 1.0.155

package/src/app/(dashboard)/dashboard/providers/page.js

@@ -1,1518 +0,0 @@
-"use client";
-
-import { useState, useEffect, useMemo } from "react";
-import PropTypes from "prop-types";
-import {
-  Card,
-  CardSkeleton,
-  Badge,
-  Button,
-  Input,
-  Modal,
-  Select,
-  Toggle,
-  Pagination,
-} from "@/shared/components";
-import ProviderIcon from "@/shared/components/ProviderIcon";
-import { OAUTH_PROVIDERS, APIKEY_PROVIDERS } from "@/shared/constants/config";
-import {
-  FREE_PROVIDERS,
-  FREE_TIER_PROVIDERS,
-  WEB_COOKIE_PROVIDERS,
-  OPENAI_COMPATIBLE_PREFIX,
-  ANTHROPIC_COMPATIBLE_PREFIX,
-} from "@/shared/constants/providers";
-import Link from "next/link";
-import { getErrorCode, getRelativeTime } from "@/shared/utils";
-import { useNotificationStore } from "@/store/notificationStore";
-import { useHeaderSearchStore } from "@/store/headerSearchStore";
-import ModelAvailabilityBadge from "./components/ModelAvailabilityBadge";
-
-function getStatusDisplay(connected, error, errorCode) {
-  if (connected > 0) {
-    return (
-      <span className="inline-flex min-w-0 items-center gap-1.5 text-[11px] font-medium text-success">
-        <span aria-hidden="true" className="size-1.5 shrink-0 rounded-full bg-success" />
-        {connected} connected
-      </span>
-    );
-  }
-  if (error > 0) {
-    const errText = errorCode
-      ? `${error} Error (${errorCode})`
-      : `${error} Error`;
-    return (
-      <span className="inline-flex min-w-0 items-center gap-1.5 text-[11px] font-medium text-error">
-        <span aria-hidden="true" className="size-1.5 shrink-0 rounded-full bg-error" />
-        {errText}
-      </span>
-    );
-  }
-  return <span className="text-[11px] text-text-muted">No connections</span>;
-}
-
-function getConnectionErrorTag(connection) {
-  if (!connection) return null;
-
-  const explicitType = connection.lastErrorType;
-  if (explicitType === "runtime_error") return "RUNTIME";
-  if (
-    explicitType === "upstream_auth_error" ||
-    explicitType === "auth_missing" ||
-    explicitType === "token_refresh_failed" ||
-    explicitType === "token_expired"
-  )
-    return "AUTH";
-  if (explicitType === "upstream_rate_limited") return "429";
-  if (explicitType === "upstream_unavailable") return "5XX";
-  if (explicitType === "network_error") return "NET";
-
-  const numericCode = Number(connection.errorCode);
-  if (Number.isFinite(numericCode) && numericCode >= 400)
-    return String(numericCode);
-
-  const fromMessage = getErrorCode(connection.lastError);
-  if (fromMessage === "401" || fromMessage === "403") return "AUTH";
-  if (fromMessage && fromMessage !== "ERR") return fromMessage;
-
-  const msg = (connection.lastError || "").toLowerCase();
-  if (
-    msg.includes("runtime") ||
-    msg.includes("not runnable") ||
-    msg.includes("not installed")
-  )
-    return "RUNTIME";
-  if (
-    msg.includes("invalid api key") ||
-    msg.includes("token invalid") ||
-    msg.includes("revoked") ||
-    msg.includes("unauthorized")
-  )
-    return "AUTH";
-
-  return "ERR";
-}
-
-const PROVIDERS_DEFAULT_PAGE_SIZE = 20;
-const PROVIDERS_FETCH_TIMEOUT_MS = 8000;
-const PROVIDER_STATUS_FILTERS = [
-  { value: "all", label: "All" },
-  { value: "connected", label: "Connected" },
-  { value: "ready", label: "Ready" },
-  { value: "setup", label: "Needs setup" },
-];
-
-async function fetchJsonWithTimeout(url) {
-  const controller = new AbortController();
-  const timeout = window.setTimeout(() => controller.abort(), PROVIDERS_FETCH_TIMEOUT_MS);
-
-  try {
-    const response = await fetch(url, {
-      cache: "no-store",
-      signal: controller.signal,
-    });
-    let data = null;
-    try {
-      data = await response.json();
-    } catch {
-      data = null;
-    }
-    return { response, data };
-  } finally {
-    window.clearTimeout(timeout);
-  }
-}
-
-export default function ProvidersPage() {
-  const [connections, setConnections] = useState([]);
-  const [providerNodes, setProviderNodes] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [loadError, setLoadError] = useState("");
-  const [apikeyPage, setApikeyPage] = useState(1);
-  const [apikeyPageSize, setApikeyPageSize] = useState(PROVIDERS_DEFAULT_PAGE_SIZE);
-  const [showAddCompatibleModal, setShowAddCompatibleModal] = useState(false);
-  const [showAddAnthropicCompatibleModal, setShowAddAnthropicCompatibleModal] =
-    useState(false);
-  const [testingMode, setTestingMode] = useState(null);
-  const [testResults, setTestResults] = useState(null);
-  const [statusFilter, setStatusFilter] = useState("all");
-  const [collapsedSections, setCollapsedSections] = useState({
-    custom: false,
-    oauth: false,
-    free: true,
-    apikey: true,
-  });
-  const notify = useNotificationStore();
-  const searchQuery = useHeaderSearchStore((s) => s.query);
-  const registerSearch = useHeaderSearchStore((s) => s.register);
-  const unregisterSearch = useHeaderSearchStore((s) => s.unregister);
-
-  useEffect(() => {
-    registerSearch("Search providers...");
-    return () => unregisterSearch();
-  }, [registerSearch, unregisterSearch]);
-
-  useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect -- pagination reset: returns to page 1 when search query or page size changes
-    setApikeyPage(1);
-  }, [searchQuery, apikeyPageSize, statusFilter]);
-
-  const matchSearch = (name) =>
-    !searchQuery.trim() ||
-    name.toLowerCase().includes(searchQuery.trim().toLowerCase());
-
-  const sortByPriority = (entries, authType) =>
-    [...entries].sort(([ka, a], [kb, b]) => {
-      const sa = getProviderStats(ka, authType);
-      const sb = getProviderStats(kb, authType);
-      const ca = sa.connected > 0 ? 1 : 0;
-      const cb = sb.connected > 0 ? 1 : 0;
-      if (ca !== cb) return cb - ca;
-      return (a.name || "").localeCompare(b.name || "");
-    });
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        setLoadError("");
-        const [connectionsResult, nodesResult] = await Promise.allSettled([
-          fetchJsonWithTimeout("/api/providers"),
-          fetchJsonWithTimeout("/api/provider-nodes"),
-        ]);
-
-        if (connectionsResult.status === "fulfilled" && connectionsResult.value.response.ok) {
-          setConnections(connectionsResult.value.data?.connections || []);
-        } else {
-          setConnections([]);
-          setLoadError("Provider connection stats could not be loaded. The provider catalog is still available.");
-        }
-
-        if (nodesResult.status === "fulfilled" && nodesResult.value.response.ok) {
-          setProviderNodes(nodesResult.value.data?.nodes || []);
-        } else {
-          setProviderNodes([]);
-          setLoadError((current) => current || "Custom provider data could not be loaded. The provider catalog is still available.");
-        }
-      } catch (error) {
-        console.log("Error fetching data:", error);
-        setLoadError("Provider data could not be loaded. The provider catalog is still available.");
-      } finally {
-        setLoading(false);
-      }
-    };
-    fetchData();
-  }, []);
-
-  // Index connections once — 800+ rows would re-filter on every card render otherwise
-  const connectionsByProvider = useMemo(() => {
-    const map = new Map();
-    for (const connection of connections) {
-      const key = connection.provider || connection.id;
-      if (!map.has(key)) map.set(key, []);
-      map.get(key).push(connection);
-    }
-    return map;
-  }, [connections]);
-
-  const totalConnections = connections.length;
-  const activeConnections = useMemo(
-    () => connections.filter((c) => c.isActive !== false).length,
-    [connections],
-  );
-  const connectedProviderCount = connectionsByProvider.size;
-  const pausedConnections = Math.max(0, totalConnections - activeConnections);
-  const activePercent = totalConnections > 0
-    ? Math.round((activeConnections / totalConnections) * 100)
-    : 0;
-
-  const getProviderStats = (providerId, authType) => {
-    const authTypes = Array.isArray(authType) ? authType : [authType];
-    const providerConnections = (connectionsByProvider.get(providerId) || []).filter(
-      (c) => authTypes.includes(c.authType),
-    );
-
-    const getEffectiveStatus = (conn) => {
-      const isCooldown = Object.entries(conn).some(
-        ([k, v]) =>
-          k.startsWith("modelLock_") && v && new Date(v).getTime() > Date.now(),
-      );
-      return conn.testStatus === "unavailable" && !isCooldown
-        ? "active"
-        : conn.testStatus;
-    };
-
-    const errorConns = providerConnections.filter((c) => {
-      const status = getEffectiveStatus(c);
-      return (
-        status === "error" || status === "expired" || status === "unavailable"
-      );
-    });
-
-    // Any registered account counts as connected, even if its last test
-    // status was error/expired/untested. This keeps the dashboard label
-    // showing "N Connected" as long as there is at least one account, and
-    // suppresses the error badge so the label stays clean.
-    const connected = providerConnections.length > 0 ? providerConnections.length : 0;
-    const error = providerConnections.length > 0 ? 0 : errorConns.length;
-    const total = providerConnections.length;
-    const allDisabled =
-      total > 0 && providerConnections.every((c) => c.isActive === false);
-
-    const latestError = errorConns.sort(
-      (a, b) => new Date(b.lastErrorAt || 0) - new Date(a.lastErrorAt || 0),
-    )[0];
-    const errorCode = latestError ? getConnectionErrorTag(latestError) : null;
-    const errorTime = latestError?.lastErrorAt
-      ? getRelativeTime(latestError.lastErrorAt)
-      : null;
-
-    return { connected, error, total, errorCode, errorTime, allDisabled };
-  };
-
-  const matchesStatusFilter = (providerId, provider, authType) => {
-    if (statusFilter === "all") return true;
-    const stats = getProviderStats(providerId, authType);
-    if (statusFilter === "connected") return stats.connected > 0;
-    if (statusFilter === "ready") return stats.connected === 0 && provider.noAuth === true;
-    return stats.connected === 0 && provider.noAuth !== true;
-  };
-
-  const toggleSection = (section) => {
-    setCollapsedSections((current) => ({
-      ...current,
-      [section]: !current[section],
-    }));
-  };
-
-  // Toggle all connections for a provider on/off
-  const handleToggleProvider = async (providerId, authType, newActive) => {
-    const providerConns = connections.filter(
-      (c) => c.provider === providerId && c.authType === authType,
-    );
-    setConnections((prev) =>
-      prev.map((c) =>
-        c.provider === providerId && c.authType === authType
-          ? { ...c, isActive: newActive }
-          : c,
-      ),
-    );
-    await Promise.allSettled(
-      providerConns.map((c) =>
-        fetch(`/api/providers/${c.id}`, {
-          method: "PUT",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ isActive: newActive }),
-        }),
-      ),
-    );
-  };
-
-  const handleBatchTest = async (mode, providerId = null) => {
-    if (testingMode) return;
-    setTestingMode(mode === "provider" ? providerId : mode);
-    setTestResults(null);
-    try {
-      const res = await fetch("/api/providers/test-batch", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ mode, providerId }),
-      });
-      const data = await res.json();
-      setTestResults(data);
-      if (data.summary) {
-        const { passed, failed, total } = data.summary;
-        if (failed === 0) notify.success(`All ${total} tests passed`);
-        else notify.warning(`${passed}/${total} passed, ${failed} failed`);
-      }
-    } catch (error) {
-      setTestResults({ error: "Test request failed" });
-      notify.error("Provider test failed");
-    } finally {
-      setTestingMode(null);
-    }
-  };
-
-  const compatibleProviders = providerNodes
-    .filter((node) => node.type === "openai-compatible")
-    .map((node) => ({
-      id: node.id,
-      name: node.name || "OpenAI Compatible",
-      color: "#10A37F",
-      textIcon: "OC",
-      apiType: node.apiType,
-    }))
-    .filter((p) => matchSearch(p.name) && matchesStatusFilter(p.id, p, "apikey"));
-
-  const anthropicCompatibleProviders = providerNodes
-    .filter((node) => node.type === "anthropic-compatible")
-    .map((node) => ({
-      id: node.id,
-      name: node.name || "Anthropic Compatible",
-      color: "#D97757",
-      textIcon: "AC",
-    }))
-    .filter((p) => matchSearch(p.name) && matchesStatusFilter(p.id, p, "apikey"));
-
-  const oauthEntries = Object.entries(OAUTH_PROVIDERS).filter(
-    ([key, info]) => !info.hidden && matchSearch(info.name) && matchesStatusFilter(key, info, "oauth"),
-  );
-  const freeEntries = Object.entries(FREE_PROVIDERS).filter(
-    ([key, info]) => {
-      const hasApiKeyMode = Array.isArray(info?.authModes) && info.authModes.includes("apikey");
-      const authTypes = hasApiKeyMode ? ["oauth", "apikey"] : "oauth";
-      return !info.hidden && matchSearch(info.name) && matchesStatusFilter(key, info, authTypes);
-    },
-  );
-  const freeTierEntries = Object.entries(FREE_TIER_PROVIDERS).filter(
-    ([key, info]) => !info.hidden && matchSearch(info.name) && matchesStatusFilter(key, info, "apikey"),
-  );
-  const apikeyEntries = sortByPriority(
-    Object.entries(APIKEY_PROVIDERS).filter(
-      ([key, info]) =>
-        !info.hidden &&
-        (info.serviceKinds ?? ["llm"]).includes("llm") &&
-        matchSearch(info.name) &&
-        matchesStatusFilter(key, info, "apikey"),
-    ),
-    "apikey",
-  );
-  const totalApikeyPages = Math.max(1, Math.ceil(apikeyEntries.length / apikeyPageSize));
-  const activeApikeyPage = Math.min(apikeyPage, totalApikeyPages);
-  const visibleApikeyEntries = apikeyEntries.slice(
-    (activeApikeyPage - 1) * apikeyPageSize,
-    activeApikeyPage * apikeyPageSize
-  );
-
-  if (loading) {
-    return (
-      <div className="flex flex-col gap-8">
-        <CardSkeleton />
-        <CardSkeleton />
-      </div>
-    );
-  }
-
-  const hasAnyResult =
-    oauthEntries.length > 0 ||
-    freeEntries.length > 0 ||
-    freeTierEntries.length > 0 ||
-    apikeyEntries.length > 0 ||
-    compatibleProviders.length > 0 ||
-    anthropicCompatibleProviders.length > 0;
-  const showCustomSection =
-    compatibleProviders.length > 0 ||
-    anthropicCompatibleProviders.length > 0 ||
-    (statusFilter === "all" && !searchQuery.trim());
-
-  return (
-    <div className="flex min-w-0 flex-col gap-6 px-1 sm:px-0">
-      {totalConnections > 0 && (
-        <div className="overflow-hidden rounded-xl border border-border bg-surface/80 shadow-sm">
-          <div className="grid grid-cols-3 divide-x divide-y divide-border-subtle sm:grid-cols-4 sm:divide-y-0">
-            <div className="col-span-3 flex items-center gap-3 px-4 py-3 sm:col-span-1">
-              <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/[0.08] text-primary">
-                <span aria-hidden="true" className="material-symbols-outlined" style={{ fontSize: 18 }}>dns</span>
-              </span>
-              <div>
-                <p className="text-[11px] font-medium text-text-muted">Connection health</p>
-                <p className="mt-0.5 text-sm font-semibold tabular-nums text-text-main">{activePercent}% active</p>
-              </div>
-            </div>
-            <div className="px-4 py-3">
-              <p className="text-[11px] font-medium text-text-muted">Connections</p>
-              <p className="mt-0.5 text-lg font-semibold tabular-nums text-text-main">{totalConnections}</p>
-            </div>
-            <div className="px-4 py-3">
-              <p className="text-[11px] font-medium text-text-muted">Active</p>
-              <div className="mt-0.5 flex items-baseline gap-2">
-                <p className="text-lg font-semibold tabular-nums text-success">{activeConnections}</p>
-                {pausedConnections > 0 && <span className="text-[10px] text-text-muted">{pausedConnections} paused</span>}
-              </div>
-            </div>
-            <div className="px-4 py-3">
-              <p className="text-[11px] font-medium text-text-muted">Providers</p>
-              <p className="mt-0.5 text-lg font-semibold tabular-nums text-info">{connectedProviderCount}</p>
-            </div>
-          </div>
-        </div>
-      )}
-      {loadError && (
-        <div className="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-700 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-300">
-          {loadError}
-        </div>
-      )}
-
-      <div className="overflow-x-auto pb-0.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-        <div className="inline-flex min-w-full items-center gap-1.5 rounded-xl border border-border-subtle bg-surface/70 p-1.5 sm:min-w-0">
-          {PROVIDER_STATUS_FILTERS.map((option) => (
-            <button
-              key={option.value}
-              type="button"
-              onClick={() => {
-                setStatusFilter(option.value);
-                setApikeyPage(1);
-                setCollapsedSections({ custom: false, oauth: false, free: false, apikey: false });
-              }}
-              aria-pressed={statusFilter === option.value}
-              className={`flex h-11 flex-1 items-center justify-center whitespace-nowrap rounded-lg px-3 text-xs font-medium transition-colors sm:h-8 sm:flex-none sm:px-3 ${statusFilter === option.value ? "bg-primary text-white shadow-sm" : "text-text-muted hover:bg-black/5 hover:text-text-main dark:hover:bg-white/5"}`}
-            >
-              {option.label}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {!hasAnyResult && (
-        <div className="text-center py-8 border border-dashed border-border rounded-xl">
-          <span className="material-symbols-outlined text-[32px] text-text-muted mb-2">
-            search_off
-          </span>
-          <p className="text-text-muted text-sm">
-            {searchQuery.trim() ? "No providers match your search" : "No providers match this filter"}
-          </p>
-        </div>
-      )}
-
-      {/* Custom Providers (OpenAI/Anthropic Compatible) — dynamic */}
-      {showCustomSection && (
-      <div className="flex flex-col gap-4">
-        <ProviderSectionHeader
-          icon="extension"
-          title="Custom Providers"
-          description="OpenAI and Anthropic-compatible endpoints"
-          count={compatibleProviders.length + anthropicCompatibleProviders.length}
-          collapsed={collapsedSections.custom && !searchQuery.trim()}
-          onToggle={() => toggleSection("custom")}
-        >
-          <div className="grid grid-cols-1 gap-2 sm:flex sm:w-auto">
-            <Button
-              size="sm"
-              icon="add"
-              onClick={() => setShowAddAnthropicCompatibleModal(true)}
-              className="min-h-11 w-full sm:min-h-0 sm:w-auto"
-            >
-              Add Anthropic Compatible
-            </Button>
-            <Button
-              size="sm"
-              variant="secondary"
-              icon="add"
-              onClick={() => setShowAddCompatibleModal(true)}
-              className="min-h-11 w-full sm:min-h-0 sm:w-auto"
-            >
-              Add OpenAI Compatible
-            </Button>
-          </div>
-        </ProviderSectionHeader>
-        <div className={collapsedSections.custom && !searchQuery.trim() ? "hidden sm:block" : ""}>
-        {compatibleProviders.length === 0 &&
-        anthropicCompatibleProviders.length === 0 ? (
-          <div className="flex items-center gap-3 rounded-xl border border-dashed border-border bg-surface/45 px-4 py-3 text-text-muted">
-            <span aria-hidden="true" className="material-symbols-outlined flex size-9 shrink-0 items-center justify-center rounded-lg bg-surface-2 text-[18px]">add_link</span>
-            <div>
-              <p className="text-sm font-medium text-text-main">No custom endpoints yet</p>
-              <p className="mt-0.5 text-xs">Add an OpenAI or Anthropic-compatible endpoint when you need one.</p>
-            </div>
-          </div>
-        ) : (
-          <div className="grid grid-cols-1 gap-2.5 sm:grid-cols-2 sm:gap-3 lg:grid-cols-3 xl:grid-cols-4">
-            {[...compatibleProviders, ...anthropicCompatibleProviders].map(
-              (info) => (
-                <ApiKeyProviderCard
-                  key={info.id}
-                  providerId={info.id}
-                  provider={info}
-                  stats={getProviderStats(info.id, "apikey")}
-                  onToggle={(active) =>
-                    handleToggleProvider(info.id, "apikey", active)
-                  }
-                />
-              ),
-            )}
-          </div>
-        )}
-        </div>
-      </div>
-      )}
-
-      {/* OAuth Providers */}
-      {oauthEntries.length > 0 && (
-      <div className="flex flex-col gap-4">
-        <ProviderSectionHeader
-          icon="passkey"
-          title="OAuth Providers"
-          description="Connect existing provider accounts securely"
-          count={oauthEntries.length}
-          collapsed={collapsedSections.oauth && !searchQuery.trim()}
-          onToggle={() => toggleSection("oauth")}
-        >
-          <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center">
-            <ModelAvailabilityBadge />
-            <button
-              onClick={() => handleBatchTest("oauth")}
-              disabled={!!testingMode}
-              className={`flex h-11 w-full items-center justify-center gap-1.5 rounded-xl border px-3 text-xs font-medium transition-colors sm:h-8 sm:w-auto sm:rounded-lg ${
-                testingMode === "oauth"
-                  ? "bg-primary/20 border-primary/40 text-primary animate-pulse"
-                  : "bg-bg border-border text-text-muted hover:text-text-main hover:border-primary/40"
-              }`}
-              title="Test all OAuth connections"
-              aria-label="Test all OAuth connections"
-            >
-              <span
-                className={`material-symbols-outlined text-[14px]${testingMode === "oauth" ? " animate-spin" : ""}`}
-              >
-                play_arrow
-              </span>
-              {testingMode === "oauth" ? "Testing..." : "Test All"}
-            </button>
-          </div>
-        </ProviderSectionHeader>
-        <div className={`${collapsedSections.oauth && !searchQuery.trim() ? "hidden sm:grid" : "grid"} grid-cols-1 gap-2.5 sm:grid-cols-2 sm:gap-3 lg:grid-cols-3 xl:grid-cols-4`}>
-          {oauthEntries.map(([key, info]) => (
-            <ProviderCard
-              key={key}
-              providerId={key}
-              provider={info}
-              stats={getProviderStats(key, "oauth")}
-              onToggle={(active) => handleToggleProvider(key, "oauth", active)}
-            />
-          ))}
-        </div>
-      </div>
-      )}
-
-      {/* Free Tier Providers */}
-      {(freeEntries.length > 0 || freeTierEntries.length > 0) && (
-      <div className="flex flex-col gap-4">
-        <ProviderSectionHeader
-          icon="savings"
-          title="Free Tier Providers"
-          description="Ready-to-use and free-tier routing options"
-          count={freeEntries.length + freeTierEntries.length}
-          collapsed={collapsedSections.free && !searchQuery.trim()}
-          onToggle={() => toggleSection("free")}
-        >
-          <button
-            onClick={() => handleBatchTest("free")}
-            disabled={!!testingMode}
-            className={`flex h-11 w-full items-center justify-center gap-1.5 rounded-xl border px-3 text-xs font-medium transition-colors sm:h-8 sm:w-auto sm:rounded-lg ${
-              testingMode === "free"
-                ? "bg-primary/20 border-primary/40 text-primary animate-pulse"
-                : "bg-bg border-border text-text-muted hover:text-text-main hover:border-primary/40"
-            }`}
-            title="Test all Free connections"
-            aria-label="Test all Free provider connections"
-          >
-            <span
-              className={`material-symbols-outlined text-[14px]${testingMode === "free" ? " animate-spin" : ""}`}
-            >
-              play_arrow
-            </span>
-            {testingMode === "free" ? "Testing..." : "Test All"}
-          </button>
-        </ProviderSectionHeader>
-        <div className={`${collapsedSections.free && !searchQuery.trim() ? "hidden sm:grid" : "grid"} grid-cols-1 gap-2.5 sm:grid-cols-2 sm:gap-3 lg:grid-cols-3 xl:grid-cols-4`}>
-          {freeEntries.map(([key, info]) => {
-            const hasApiKeyMode = Array.isArray(info?.authModes) && info.authModes.includes("apikey");
-            const statAuthTypes = hasApiKeyMode ? ["oauth", "apikey"] : "oauth";
-            return (
-            <ProviderCard
-              key={key}
-              providerId={key}
-              provider={info}
-              stats={getProviderStats(key, statAuthTypes)}
-              onToggle={(active) => handleToggleProvider(key, hasApiKeyMode ? "apikey" : "oauth", active)}
-            />
-            );
-          })}
-          {freeTierEntries.map(([key, info]) => (
-            <ApiKeyProviderCard
-              key={key}
-              providerId={key}
-              provider={info}
-              stats={getProviderStats(key, "apikey")}
-              onToggle={(active) => handleToggleProvider(key, "apikey", active)}
-            />
-          ))}
-        </div>
-      </div>
-      )}
-
-      {/* API Key Providers — fixed list */}
-      {apikeyEntries.length > 0 && (
-      <div className="flex flex-col gap-4">
-        <ProviderSectionHeader
-          icon="key"
-          title="API Key Providers"
-          description="Bring your own provider credentials"
-          count={apikeyEntries.length}
-          collapsed={collapsedSections.apikey && !searchQuery.trim()}
-          onToggle={() => toggleSection("apikey")}
-        >
-          <button
-            onClick={() => handleBatchTest("apikey")}
-            disabled={!!testingMode}
-            className={`flex h-11 w-full items-center justify-center gap-1.5 rounded-xl border px-3 text-xs font-medium transition-colors sm:h-8 sm:w-auto sm:rounded-lg ${
-              testingMode === "apikey"
-                ? "bg-primary/20 border-primary/40 text-primary animate-pulse"
-                : "bg-bg border-border text-text-muted hover:text-text-main hover:border-primary/40"
-            }`}
-            title="Test all API Key connections"
-            aria-label="Test all API Key connections"
-          >
-            <span
-              className={`material-symbols-outlined text-[14px]${testingMode === "apikey" ? " animate-spin" : ""}`}
-            >
-              play_arrow
-            </span>
-            {testingMode === "apikey" ? "Testing..." : "Test All"}
-          </button>
-        </ProviderSectionHeader>
-        <div className={`${collapsedSections.apikey && !searchQuery.trim() ? "hidden sm:grid" : "grid"} grid-cols-1 gap-2.5 sm:grid-cols-2 sm:gap-3 lg:grid-cols-3 xl:grid-cols-4`}>
-          {visibleApikeyEntries.map(([key, info]) => (
-            <ApiKeyProviderCard
-              key={key}
-              providerId={key}
-              provider={info}
-              stats={getProviderStats(key, "apikey")}
-              onToggle={(active) => handleToggleProvider(key, "apikey", active)}
-            />
-          ))}
-        </div>
-        {apikeyEntries.length > 0 && (
-          <div className={collapsedSections.apikey && !searchQuery.trim() ? "hidden sm:block" : ""}>
-          <Pagination
-            currentPage={activeApikeyPage}
-            pageSize={apikeyPageSize}
-            totalItems={apikeyEntries.length}
-            onPageChange={setApikeyPage}
-            onPageSizeChange={(size) => {
-              setApikeyPageSize(size);
-              setApikeyPage(1);
-            }}
-          />
-          </div>
-        )}
-      </div>
-      )}
-
-      {/* Web Cookie Providers — use browser subscription cookie instead of API key */}
-      {/* <div className="flex flex-col gap-4">
-        <div className="flex items-center justify-between">
-          <h2 className="text-xl font-semibold flex items-center gap-2">
-            Web Cookie Providers{" "}
-          </h2>
-        </div>
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-          {Object.entries(WEB_COOKIE_PROVIDERS).map(([key, info]) => (
-            <ApiKeyProviderCard
-              key={key}
-              providerId={key}
-              provider={info}
-              stats={getProviderStats(key, "apikey")}
-              onToggle={(active) => handleToggleProvider(key, "apikey", active)}
-            />
-          ))}
-        </div>
-      </div> */}
-
-      <AddOpenAICompatibleModal
-        isOpen={showAddCompatibleModal}
-        onClose={() => setShowAddCompatibleModal(false)}
-        onCreated={(node) => {
-          setProviderNodes((prev) => [...prev, node]);
-          setShowAddCompatibleModal(false);
-        }}
-      />
-      <AddAnthropicCompatibleModal
-        isOpen={showAddAnthropicCompatibleModal}
-        onClose={() => setShowAddAnthropicCompatibleModal(false)}
-        onCreated={(node) => {
-          setProviderNodes((prev) => [...prev, node]);
-          setShowAddAnthropicCompatibleModal(false);
-        }}
-      />
-
-      {/* Test Results Modal */}
-      {testResults && (
-        <div
-          className="fixed inset-0 z-50 flex items-start justify-center px-3 pt-[6vh] sm:pt-[10vh]"
-          onClick={() => setTestResults(null)}
-        >
-          <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
-          <div
-            className="relative bg-surface border border-border rounded-xl w-full max-w-[600px] max-h-[86vh] sm:max-h-[80vh] overflow-y-auto shadow-2xl"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="sticky top-0 z-10 flex items-center justify-between px-5 py-3 border-b border-border bg-surface/95 backdrop-blur-sm rounded-t-xl">
-              <h3 className="font-semibold">Test Results</h3>
-              <button
-                onClick={() => setTestResults(null)}
-                className="p-1 rounded-lg hover:bg-bg text-text-muted hover:text-text-main transition-colors"
-                aria-label="Close test results"
-              >
-                <span className="material-symbols-outlined text-lg">close</span>
-              </button>
-            </div>
-            <div className="p-5">
-              <ProviderTestResultsView results={testResults} />
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function ProviderSectionHeader({
-  icon,
-  title,
-  description,
-  count,
-  collapsed,
-  onToggle,
-  children,
-}) {
-  return (
-    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-      <div className="flex w-full min-w-0 items-center gap-2.5 sm:w-auto">
-        <div className="flex min-w-0 flex-1 items-center gap-2.5 sm:flex-none">
-          <span aria-hidden="true" className="material-symbols-outlined flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary/[0.08] text-[17px] text-primary">
-            {icon}
-          </span>
-          <div className="min-w-0">
-            <div className="flex items-center gap-2">
-              <h2 className="truncate text-lg font-semibold leading-tight">{title}</h2>
-              <span className="rounded-full bg-surface-2 px-2 py-0.5 text-[10px] font-semibold tabular-nums text-text-muted">
-                {count}
-              </span>
-            </div>
-            <p className="mt-0.5 truncate text-[11px] text-text-muted sm:text-xs">{description}</p>
-          </div>
-        </div>
-        <button
-          type="button"
-          onClick={onToggle}
-          className="flex size-11 shrink-0 items-center justify-center rounded-xl border border-border text-text-muted transition-colors hover:border-primary/30 hover:text-primary sm:hidden"
-          aria-expanded={!collapsed}
-          aria-label={`${collapsed ? "Expand" : "Collapse"} ${title}`}
-        >
-          <span className="material-symbols-outlined text-[20px]">
-            {collapsed ? "expand_more" : "expand_less"}
-          </span>
-        </button>
-      </div>
-      {children && (
-        <div className={collapsed ? "hidden sm:block" : "block"}>{children}</div>
-      )}
-    </div>
-  );
-}
-
-ProviderSectionHeader.propTypes = {
-  icon: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  description: PropTypes.string.isRequired,
-  count: PropTypes.number.isRequired,
-  collapsed: PropTypes.bool.isRequired,
-  onToggle: PropTypes.func.isRequired,
-  children: PropTypes.node,
-};
-
-function ProviderCard({ providerId, provider, stats, onToggle }) {
-  const { connected, error, errorCode, allDisabled } = stats;
-  const isNoAuth = !!provider.noAuth;
-
-  return (
-    <Link href={`/dashboard/providers/${providerId}`} className="group min-w-0">
-      <Card
-        padding="none"
-        className={`relative h-[76px] min-h-[76px] cursor-pointer overflow-hidden transition-[border-color,box-shadow,opacity] group-hover:border-primary/30 group-hover:shadow-[0_10px_26px_-22px_rgba(229,106,74,0.55)] sm:h-[78px] sm:min-h-[78px] ${allDisabled ? "opacity-55" : ""}`}
-      >
-        <div className="flex h-full min-w-0 items-center justify-between gap-2.5 p-3">
-          <div className="flex min-w-0 items-center gap-2.5">
-            <div
-              className="flex size-9 shrink-0 items-center justify-center rounded-lg ring-1 ring-black/[0.04] dark:ring-white/[0.06]"
-              style={{
-                backgroundColor: `${provider.color?.length > 7 ? provider.color : provider.color + "15"}`,
-              }}
-            >
-              <ProviderIcon
-                src={`/providers/${provider.id}.png`}
-                alt=""
-                size={28}
-                className="max-h-7 max-w-7 rounded-md object-contain"
-                fallbackText={
-                  provider.textIcon || provider.id.slice(0, 2).toUpperCase()
-                }
-                fallbackColor={provider.color}
-              />
-            </div>
-            <div className="min-w-0">
-              <h3 className="truncate text-sm font-semibold text-text-main">{provider.name}</h3>
-              <div className="mt-1 flex min-w-0 items-center overflow-hidden whitespace-nowrap">
-                {allDisabled ? (
-                  <span className="inline-flex items-center gap-1 text-[11px] text-text-muted">
-                    <span aria-hidden="true" className="material-symbols-outlined text-[13px]">pause_circle</span>
-                    Disabled
-                  </span>
-                ) : isNoAuth ? (
-                  <span className="inline-flex items-center gap-1.5 text-[11px] font-medium text-success">
-                    <span aria-hidden="true" className="size-1.5 rounded-full bg-success" />
-                    Ready
-                  </span>
-                ) : (
-                  getStatusDisplay(connected, error, errorCode)
-                )}
-              </div>
-            </div>
-          </div>
-          <div className="flex shrink-0 items-center gap-2">
-            {stats.total > 0 && (
-              <div
-                className="opacity-100 transition-opacity sm:opacity-0 sm:group-hover:opacity-100"
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  onToggle(!allDisabled ? false : true);
-                }}
-              >
-                <Toggle
-                  size="sm"
-                  touchTarget
-                  checked={!allDisabled}
-                  onChange={() => {}}
-                  title={allDisabled ? "Enable provider" : "Disable provider"}
-                />
-              </div>
-            )}
-            <span aria-hidden="true" className="material-symbols-outlined text-[17px] text-text-subtle transition-[transform,color] group-hover:translate-x-0.5 group-hover:text-primary">
-              chevron_right
-            </span>
-          </div>
-        </div>
-      </Card>
-    </Link>
-  );
-}
-
-ProviderCard.propTypes = {
-  providerId: PropTypes.string.isRequired,
-  provider: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired,
-    color: PropTypes.string,
-    textIcon: PropTypes.string,
-  }).isRequired,
-  stats: PropTypes.shape({
-    connected: PropTypes.number,
-    error: PropTypes.number,
-    errorCode: PropTypes.string,
-    errorTime: PropTypes.string,
-    total: PropTypes.number,
-    allDisabled: PropTypes.bool,
-  }).isRequired,
-  onToggle: PropTypes.func,
-};
-
-function ApiKeyProviderCard({
-  providerId,
-  provider,
-  stats,
-  onToggle,
-}) {
-  const { connected, error, errorCode, allDisabled } = stats;
-  const isCompatible = providerId.startsWith(OPENAI_COMPATIBLE_PREFIX);
-  const isAnthropicCompatible = providerId.startsWith(
-    ANTHROPIC_COMPATIBLE_PREFIX,
-  );
-
-  const getIconPath = () => {
-    if (provider.id === "featherless") return null;
-    if (isCompatible)
-      return provider.apiType === "responses"
-        ? "/providers/oai-r.png"
-        : "/providers/oai-cc.png";
-    if (isAnthropicCompatible) return "/providers/anthropic-m.png";
-    return `/providers/${provider.id}.png`;
-  };
-
-  return (
-    <Link href={`/dashboard/providers/${providerId}`} className="group min-w-0">
-      <Card
-        padding="none"
-        className={`relative h-[76px] min-h-[76px] cursor-pointer overflow-hidden transition-[border-color,box-shadow,opacity] group-hover:border-primary/30 group-hover:shadow-[0_10px_26px_-22px_rgba(229,106,74,0.55)] sm:h-[78px] sm:min-h-[78px] ${allDisabled ? "opacity-55" : ""}`}
-      >
-        <div className="flex h-full min-w-0 items-center justify-between gap-2.5 p-3">
-          <div className="flex min-w-0 items-center gap-2.5">
-            <div
-              className="flex size-9 shrink-0 items-center justify-center rounded-lg ring-1 ring-black/[0.04] dark:ring-white/[0.06]"
-              style={{
-                backgroundColor: `${provider.color?.length > 7 ? provider.color : provider.color + "15"}`,
-              }}
-            >
-              <ProviderIcon
-                src={getIconPath()}
-                alt=""
-                size={28}
-                className="max-h-7 max-w-7 rounded-md object-contain"
-                fallbackText={
-                  provider.textIcon || provider.id.slice(0, 2).toUpperCase()
-                }
-                fallbackColor={provider.color}
-              />
-            </div>
-            <div className="min-w-0">
-              <h3 className="truncate text-sm font-semibold text-text-main">{provider.name}</h3>
-              <div className="mt-1 flex min-w-0 items-center gap-1.5 overflow-hidden whitespace-nowrap">
-                {allDisabled ? (
-                  <span className="inline-flex items-center gap-1 text-[11px] text-text-muted">
-                    <span aria-hidden="true" className="material-symbols-outlined text-[13px]">pause_circle</span>
-                    Disabled
-                  </span>
-                ) : (
-                  <>
-                    {getStatusDisplay(connected, error, errorCode)}
-                    {isCompatible && (
-                      <span className="text-[10px] text-text-subtle">
-                        · {provider.apiType === "responses" ? "Responses" : "Chat"}
-                      </span>
-                    )}
-                    {isAnthropicCompatible && (
-                      <span className="text-[10px] text-text-subtle">· Messages</span>
-                    )}
-                  </>
-                )}
-              </div>
-            </div>
-          </div>
-          <div className="flex shrink-0 items-center gap-2">
-            {stats.total > 0 && (
-              <div
-                className="opacity-100 transition-opacity sm:opacity-0 sm:group-hover:opacity-100"
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  onToggle(!allDisabled ? false : true);
-                }}
-              >
-                <Toggle
-                  size="sm"
-                  touchTarget
-                  checked={!allDisabled}
-                  onChange={() => {}}
-                  title={allDisabled ? "Enable provider" : "Disable provider"}
-                />
-              </div>
-            )}
-            <span aria-hidden="true" className="material-symbols-outlined text-[17px] text-text-subtle transition-[transform,color] group-hover:translate-x-0.5 group-hover:text-primary">
-              chevron_right
-            </span>
-          </div>
-        </div>
-      </Card>
-    </Link>
-  );
-}
-
-ApiKeyProviderCard.propTypes = {
-  providerId: PropTypes.string.isRequired,
-  provider: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired,
-    color: PropTypes.string,
-    textIcon: PropTypes.string,
-    apiType: PropTypes.string,
-  }).isRequired,
-  stats: PropTypes.shape({
-    connected: PropTypes.number,
-    error: PropTypes.number,
-    errorCode: PropTypes.string,
-    errorTime: PropTypes.string,
-    total: PropTypes.number,
-    allDisabled: PropTypes.bool,
-  }).isRequired,
-  onToggle: PropTypes.func,
-};
-
-function AddOpenAICompatibleModal({ isOpen, onClose, onCreated }) {
-  const [formData, setFormData] = useState({
-    name: "",
-    prefix: "",
-    apiType: "chat",
-    baseUrl: "https://api.openai.com/v1",
-  });
-  const [submitting, setSubmitting] = useState(false);
-  const [checkKey, setCheckKey] = useState("");
-  const [checkModelId, setCheckModelId] = useState("");
-  const [validating, setValidating] = useState(false);
-  const [validationResult, setValidationResult] = useState(null);
-
-  const apiTypeOptions = [
-    { value: "chat", label: "Chat Completions" },
-    { value: "responses", label: "Responses API" },
-  ];
-
-  useEffect(() => {
-    const defaultBaseUrl = "https://api.openai.com/v1";
-    // Only reset baseUrl when it was not customized — the previous effect body
-    // stomped user input on every apiType change.
-    // eslint-disable-next-line react-hooks/set-state-in-effect -- syncs baseUrl default when apiType changes; functional update bails out (returns prev) when the user customized the URL
-    setFormData((prev) => {
-      if (prev.baseUrl && prev.baseUrl !== defaultBaseUrl) return prev;
-      return { ...prev, baseUrl: defaultBaseUrl };
-    });
-  }, [formData.apiType]);
-
-  const handleSubmit = async () => {
-    if (
-      !formData.name.trim() ||
-      !formData.prefix.trim() ||
-      !formData.baseUrl.trim()
-    )
-      return;
-    setSubmitting(true);
-    try {
-      const res = await fetch("/api/provider-nodes", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          name: formData.name,
-          prefix: formData.prefix,
-          apiType: formData.apiType,
-          baseUrl: formData.baseUrl,
-          type: "openai-compatible",
-        }),
-      });
-      const data = await res.json();
-      if (res.ok) {
-        onCreated(data.node);
-        setFormData({
-          name: "",
-          prefix: "",
-          apiType: "chat",
-          baseUrl: "https://api.openai.com/v1",
-        });
-        setCheckKey("");
-        setValidationResult(null);
-      }
-    } catch (error) {
-      console.log("Error creating OpenAI Compatible node:", error);
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleValidate = async () => {
-    setValidating(true);
-    try {
-      const res = await fetch("/api/provider-nodes/validate", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          baseUrl: formData.baseUrl,
-          apiKey: checkKey,
-          type: "openai-compatible",
-          modelId: checkModelId.trim() || undefined,
-        }),
-      });
-      const data = await res.json();
-      setValidationResult(data);
-    } catch {
-      setValidationResult({ valid: false, error: "Network error" });
-    } finally {
-      setValidating(false);
-    }
-  };
-
-  // Helper to render validation result
-  const renderValidationResult = () => {
-    if (!validationResult) return null;
-    const { valid, error, method } = validationResult;
-
-    if (valid) {
-      return (
-        <>
-          <Badge variant="success">Valid</Badge>
-          {method === "chat" && (
-            <span className="text-sm text-text-muted">
-              (via inference test)
-            </span>
-          )}
-        </>
-      );
-    }
-    return (
-      <div className="flex flex-col gap-1">
-        <Badge variant="error">Invalid</Badge>
-        {error && <span className="text-sm text-red-500">{error}</span>}
-      </div>
-    );
-  };
-
-  return (
-    <Modal isOpen={isOpen} title="Add OpenAI Compatible" onClose={onClose}>
-      <div className="flex flex-col gap-4">
-        <Input
-          label="Name"
-          value={formData.name}
-          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-          placeholder="OpenAI Compatible (Prod)"
-          hint="Required. A friendly label for this node."
-        />
-        <Input
-          label="Prefix"
-          value={formData.prefix}
-          onChange={(e) => setFormData({ ...formData, prefix: e.target.value })}
-          placeholder="oc-prod"
-          hint="Required. Used as the provider prefix for model IDs."
-        />
-        <Select
-          label="API Type"
-          options={apiTypeOptions}
-          value={formData.apiType}
-          onChange={(e) =>
-            setFormData({ ...formData, apiType: e.target.value })
-          }
-        />
-        <Input
-          label="Base URL"
-          value={formData.baseUrl}
-          onChange={(e) =>
-            setFormData({ ...formData, baseUrl: e.target.value })
-          }
-          placeholder="https://api.openai.com/v1"
-          hint="Use the base URL (ending in /v1) for your OpenAI-compatible API."
-        />
-        <Input
-          label="API Key (for Check)"
-          type="password"
-          value={checkKey}
-          onChange={(e) => setCheckKey(e.target.value)}
-        />
-        <Input
-          label="Model ID (optional)"
-          value={checkModelId}
-          onChange={(e) => setCheckModelId(e.target.value)}
-          placeholder="e.g. gpt-4, claude-3-opus"
-          hint="If provider lacks /models endpoint, enter a model ID to validate via chat/completions instead."
-        />
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
-          <Button
-            onClick={handleValidate}
-            disabled={!checkKey || validating || !formData.baseUrl.trim()}
-            variant="secondary"
-            className="w-full sm:w-auto"
-          >
-            {validating ? "Checking..." : "Check"}
-          </Button>
-          {renderValidationResult()}
-        </div>
-        <div className="flex flex-col gap-2 sm:flex-row">
-          <Button
-            onClick={handleSubmit}
-            fullWidth
-            disabled={
-              !formData.name.trim() ||
-              !formData.prefix.trim() ||
-              !formData.baseUrl.trim() ||
-              submitting
-            }
-          >
-            {submitting ? "Creating..." : "Create"}
-          </Button>
-          <Button onClick={onClose} variant="ghost" fullWidth>
-            Cancel
-          </Button>
-        </div>
-      </div>
-    </Modal>
-  );
-}
-
-AddOpenAICompatibleModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
-  onCreated: PropTypes.func.isRequired,
-};
-
-function AddAnthropicCompatibleModal({ isOpen, onClose, onCreated }) {
-  const [formData, setFormData] = useState({
-    name: "",
-    prefix: "",
-    baseUrl: "https://api.anthropic.com/v1",
-  });
-  const [submitting, setSubmitting] = useState(false);
-  const [checkKey, setCheckKey] = useState("");
-  const [checkModelId, setCheckModelId] = useState("");
-  const [validating, setValidating] = useState(false);
-  const [validationResult, setValidationResult] = useState(null); // { valid, error, method }
-
-  useEffect(() => {
-    if (isOpen) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect -- reset-on-open: clears validation state each time the modal is reopened
-      setValidationResult(null);
-      setCheckKey("");
-      setCheckModelId("");
-    }
-  }, [isOpen]);
-
-  const handleSubmit = async () => {
-    if (
-      !formData.name.trim() ||
-      !formData.prefix.trim() ||
-      !formData.baseUrl.trim()
-    )
-      return;
-    setSubmitting(true);
-    try {
-      const res = await fetch("/api/provider-nodes", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          name: formData.name,
-          prefix: formData.prefix,
-          baseUrl: formData.baseUrl,
-          type: "anthropic-compatible",
-        }),
-      });
-      const data = await res.json();
-      if (res.ok) {
-        onCreated(data.node);
-        setFormData({
-          name: "",
-          prefix: "",
-          baseUrl: "https://api.anthropic.com/v1",
-        });
-        setCheckKey("");
-        setValidationResult(null);
-      }
-    } catch (error) {
-      console.log("Error creating Anthropic Compatible node:", error);
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleValidate = async () => {
-    setValidating(true);
-    try {
-      const res = await fetch("/api/provider-nodes/validate", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          baseUrl: formData.baseUrl,
-          apiKey: checkKey,
-          type: "anthropic-compatible",
-          modelId: checkModelId.trim() || undefined,
-        }),
-      });
-      const data = await res.json();
-      setValidationResult(data);
-    } catch {
-      setValidationResult({ valid: false, error: "Network error" });
-    } finally {
-      setValidating(false);
-    }
-  };
-
-  // Helper to render validation result
-  const renderValidationResult = () => {
-    if (!validationResult) return null;
-    const { valid, error, method } = validationResult;
-
-    if (valid) {
-      return (
-        <>
-          <Badge variant="success">Valid</Badge>
-          {method === "chat" && (
-            <span className="text-sm text-text-muted">
-              (via inference test)
-            </span>
-          )}
-        </>
-      );
-    }
-    return (
-      <div className="flex flex-col gap-1">
-        <Badge variant="error">Invalid</Badge>
-        {error && <span className="text-sm text-red-500">{error}</span>}
-      </div>
-    );
-  };
-
-  return (
-    <Modal isOpen={isOpen} title="Add Anthropic Compatible" onClose={onClose}>
-      <div className="flex flex-col gap-4">
-        <Input
-          label="Name"
-          value={formData.name}
-          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-          placeholder="Anthropic Compatible (Prod)"
-          hint="Required. A friendly label for this node."
-        />
-        <Input
-          label="Prefix"
-          value={formData.prefix}
-          onChange={(e) => setFormData({ ...formData, prefix: e.target.value })}
-          placeholder="ac-prod"
-          hint="Required. Used as the provider prefix for model IDs."
-        />
-        <Input
-          label="Base URL"
-          value={formData.baseUrl}
-          onChange={(e) =>
-            setFormData({ ...formData, baseUrl: e.target.value })
-          }
-          placeholder="https://api.anthropic.com/v1"
-          hint="Use the base URL (ending in /v1) for your Anthropic-compatible API. The system will append /messages."
-        />
-        <Input
-          label="API Key (for Check)"
-          type="password"
-          value={checkKey}
-          onChange={(e) => setCheckKey(e.target.value)}
-        />
-        <Input
-          label="Model ID (optional)"
-          value={checkModelId}
-          onChange={(e) => setCheckModelId(e.target.value)}
-          placeholder="e.g. claude-3-opus"
-          hint="If provider lacks /models endpoint, enter a model ID to validate via chat/completions instead."
-        />
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
-          <Button
-            onClick={handleValidate}
-            disabled={!checkKey || validating || !formData.baseUrl.trim()}
-            variant="secondary"
-            className="w-full sm:w-auto"
-          >
-            {validating ? "Checking..." : "Check"}
-          </Button>
-          {renderValidationResult()}
-        </div>
-        <div className="flex flex-col gap-2 sm:flex-row">
-          <Button
-            onClick={handleSubmit}
-            fullWidth
-            disabled={
-              !formData.name.trim() ||
-              !formData.prefix.trim() ||
-              !formData.baseUrl.trim() ||
-              submitting
-            }
-          >
-            {submitting ? "Creating..." : "Create"}
-          </Button>
-          <Button onClick={onClose} variant="ghost" fullWidth>
-            Cancel
-          </Button>
-        </div>
-      </div>
-    </Modal>
-  );
-}
-
-AddAnthropicCompatibleModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
-  onCreated: PropTypes.func.isRequired,
-};
-
-function ProviderTestResultsView({ results }) {
-  if (results.error && !results.results) {
-    return (
-      <div className="text-center py-6">
-        <span className="material-symbols-outlined text-red-500 text-[32px] mb-2 block">
-          error
-        </span>
-        <p className="text-sm text-red-400">{results.error}</p>
-      </div>
-    );
-  }
-
-  const { summary, mode } = results;
-  const items = results.results || [];
-  const modeLabel =
-    {
-      oauth: "OAuth",
-      free: "Free",
-      apikey: "API Key",
-      provider: "Provider",
-      all: "All",
-    }[mode] || mode;
-
-  return (
-    <div className="flex min-w-0 flex-col gap-3">
-      {summary && (
-        <div className="flex flex-wrap items-center gap-2 text-xs mb-1 sm:gap-3">
-          <span className="text-text-muted">{modeLabel} Test</span>
-          <span className="px-2 py-0.5 rounded bg-emerald-500/15 text-emerald-400 font-medium">
-            {summary.passed} passed
-          </span>
-          {summary.failed > 0 && (
-            <span className="px-2 py-0.5 rounded bg-red-500/15 text-red-400 font-medium">
-              {summary.failed} failed
-            </span>
-          )}
-          <span className="text-text-muted sm:ml-auto">
-            {summary.total} tested
-          </span>
-        </div>
-      )}
-      {items.map((r, i) => (
-        <div
-          key={r.connectionId || i}
-          className="flex min-w-0 flex-wrap items-center gap-2 rounded-lg bg-black/[0.03] px-3 py-2 text-xs dark:bg-white/[0.03] sm:flex-nowrap"
-        >
-          <span
-            className={`material-symbols-outlined text-[16px] ${r.valid ? "text-emerald-500" : "text-red-500"}`}
-          >
-            {r.valid ? "check_circle" : "error"}
-          </span>
-          <div className="min-w-0 flex-[1_1_160px]">
-            <span className="block truncate font-medium sm:inline">
-              {r.connectionName}
-            </span>
-            <span className="block truncate text-text-muted sm:ml-1.5 sm:inline">
-              ({r.provider})
-            </span>
-          </div>
-          {r.latencyMs !== undefined && (
-            <span className="shrink-0 text-text-muted font-mono tabular-nums">
-              {r.latencyMs}ms
-            </span>
-          )}
-          <span
-            className={`shrink-0 text-[10px] uppercase font-bold px-1.5 py-0.5 rounded ${
-              r.valid
-                ? "bg-emerald-500/15 text-emerald-400"
-                : "bg-red-500/15 text-red-400"
-            }`}
-          >
-            {r.valid ? "OK" : r.diagnosis?.type || "ERROR"}
-          </span>
-        </div>
-      ))}
-      {items.length === 0 && (
-        <div className="text-center py-4 text-text-muted text-sm">
-          No active connections found for this group.
-        </div>
-      )}
-    </div>
-  );
-}
-
-ProviderTestResultsView.propTypes = {
-  results: PropTypes.shape({
-    mode: PropTypes.string,
-    results: PropTypes.array,
-    summary: PropTypes.shape({
-      total: PropTypes.number,
-      passed: PropTypes.number,
-      failed: PropTypes.number,
-    }),
-    error: PropTypes.string,
-  }).isRequired,
-};