@amir83nasr/10router 0.1.0

package/src/app/(dashboard)/dashboard/providers/[id]/page.tsx

@@ -0,0 +1,1918 @@
+"use client";
+import Icon from "@/shared/components/Icon";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import { useParams, useRouter } from "next/navigation";
+import Link from "next/link";
+import Image from "next/image";
+import {
+  getInitials,
+  getProviderIconSrc,
+  guessProviderIconIdFromUrl,
+  markProviderIconMissing,
+} from "@/shared/utils/providerIcon";
+import {
+  Page,
+  PanelSkeleton,
+  OAuthModal,
+  CursorAuthModal,
+  XiaomiMimoAuthModal,
+  IFlowCookieModal,
+  GitLabAuthModal,
+  EditConnectionModal,
+  NoAuthProxyCard,
+  ConfirmModal,
+} from "@/shared/components";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import {
+  OAUTH_PROVIDERS,
+  APIKEY_PROVIDERS,
+  FREE_PROVIDERS,
+  FREE_TIER_PROVIDERS,
+  WEB_COOKIE_PROVIDERS,
+  getProviderAlias,
+  isOpenAICompatibleProvider,
+  isAnthropicCompatibleProvider,
+  AI_PROVIDERS,
+} from "@/shared/constants/providers";
+import { getModelsByProviderId, getModelKind } from "@/shared/constants/models";
+import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
+import { useModelCaps } from "@/shared/hooks/useModelCaps";
+import { translate } from "@/i18n/runtime";
+import { fetchSuggestedModels } from "@/shared/utils/providerModelsFetcher";
+import { getProviderCustomModelRows } from "@/shared/utils/providerCustomModels";
+import ModelRow from "./ModelRow";
+import { Switch } from "@/components/ui/switch";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { ArrowLeftRight, Server, Unplug } from "lucide-react";
+import PassthroughModelsSection from "./PassthroughModelsSection";
+import CompatibleModelsSection from "./CompatibleModelsSection";
+import ConnectionRow from "./ConnectionRow";
+import AddApiKeyModal from "./AddApiKeyModal";
+import EditCompatibleNodeModal from "./EditCompatibleNodeModal";
+import AddCustomModelModal from "./AddCustomModelModal";
+import BulkImportCodexModal from "./BulkImportCodexModal";
+import BulkImportGrokCliModal from "./BulkImportGrokCliModal";
+import { useOneByOneTest } from "./useOneByOneTest";
+
+const AUTO_PING_SETTINGS_KEYS = {
+  claude: "claudeAutoPing",
+  codex: "codexAutoPing",
+};
+
+export default function ProviderDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const providerId: any = (params as any).id;
+  const { getCaps } = useModelCaps();
+  const [connections, setConnections] = useState<any[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [providerNode, setProviderNode] = useState<any>(null);
+  const [proxyPools, setProxyPools] = useState<any[]>([]);
+  const [showOAuthModal, setShowOAuthModal] = useState<boolean>(false);
+  const [showXiaomiMimoModal, setShowXiaomiMimoModal] = useState<boolean>(false);
+  const [showIFlowCookieModal, setShowIFlowCookieModal] = useState<boolean>(false);
+  const [showAddApiKeyModal, setShowAddApiKeyModal] = useState<boolean>(false);
+  const [addConnectionError, setAddConnectionError] = useState<string>("");
+  const [showBulkImportCodex, setShowBulkImportCodex] = useState<boolean>(false);
+  const [showBulkImportGrokCli, setShowBulkImportGrokCli] = useState<boolean>(false);
+  const [showEditModal, setShowEditModal] = useState<boolean>(false);
+  const [showEditNodeModal, setShowEditNodeModal] = useState<boolean>(false);
+  const [showBulkProxyModal, setShowBulkProxyModal] = useState<boolean>(false);
+  const [selectedConnection, setSelectedConnection] = useState<any>(null);
+  const [modelAliases, setModelAliases] = useState<any>({});
+  const [customModels, setCustomModels] = useState<any[]>([]);
+  const [headerImgError, setHeaderImgError] = useState<boolean>(false);
+  const [modelTestResults, setModelTestResults] = useState<any>({});
+  const [modelsTestError, setModelsTestError] = useState<string>("");
+  const [testingModelIds, setTestingModelIds] = useState(() => new Set());
+  const [showAddCustomModel, setShowAddCustomModel] = useState<boolean>(false);
+  const [selectedConnectionIds, setSelectedConnectionIds] = useState<any[]>([]);
+  const [bulkUpdatingProxy, setBulkUpdatingProxy] = useState<boolean>(false);
+  const [providerStrategy, setProviderStrategy] = useState<any>(null);
+  const [providerStickyLimit, setProviderStickyLimit] = useState<string>("");
+  const [autoPing, setAutoPing] = useState({ enabled: false, connections: {} });
+  const [suggestedModels, setSuggestedModels] = useState<any[]>([]);
+  const [liveModels, setLiveModels] = useState<any[]>([]);
+  // Live-catalog fetch warning/error (surfaced for zed only; cursor behavior unchanged).
+  const [liveModelsError, setLiveModelsError] = useState<any>(null);
+  const [kiloFreeModels, setKiloFreeModels] = useState<any[]>([]);
+  const [disabledModelIds, setDisabledModelIds] = useState<any[]>([]);
+  const [confirmState, setConfirmState] = useState<any>(null);
+  const [showAgRiskModal, setShowAgRiskModal] = useState<boolean>(false);
+  const oneByOne = useOneByOneTest(connections);
+  const oneByOneRunning = oneByOne.running;
+  const oneByOneStopping = oneByOne.stopping;
+  const oneByOneCurrentConnectionId = oneByOne.currentConnectionId;
+  const oneByOneResults = oneByOne.results;
+  const oneByOneSummary = oneByOne.summary;
+  const handleRunOneByOneTest = oneByOne.run;
+  const handleStopOneByOneTest = oneByOne.stop;
+  const [importingQoderModels, setImportingQoderModels] = useState<boolean>(false);
+  const { copied, copy } = useCopyToClipboard();
+
+  const AG_RISK_STORAGE_KEY = "ag_risk_confirmed";
+
+  const openOAuthConnection = () => {
+    setShowOAuthModal(true);
+  };
+
+  const triggerOAuthConnection = () => {
+    if (providerId === "antigravity" && typeof window !== "undefined") {
+      const confirmed = window.localStorage.getItem(AG_RISK_STORAGE_KEY) === "true";
+      if (!confirmed) {
+        setShowAgRiskModal(true);
+        return;
+      }
+    }
+    // Xiaomi Desktop: auto-import local credentials first, OAuth as fallback
+    if (providerId === "xiaomi-mimo") {
+      setShowXiaomiMimoModal(true);
+      return;
+    }
+    if (isOAuth) {
+      openOAuthConnection();
+      return;
+    }
+    setAddConnectionError("");
+    setShowAddApiKeyModal(true);
+  };
+
+  const triggerApiKeyConnection = () => {
+    setAddConnectionError("");
+    setShowAddApiKeyModal(true);
+  };
+
+  const triggerAddConnection = () => {
+    if (isOAuth) {
+      triggerOAuthConnection();
+      return;
+    }
+    triggerApiKeyConnection();
+  };
+
+  const handleAgRiskConfirm = () => {
+    if (typeof window !== "undefined") {
+      window.localStorage.setItem(AG_RISK_STORAGE_KEY, "true");
+    }
+    setShowAgRiskModal(false);
+    if (isOAuth) {
+      openOAuthConnection();
+      return;
+    }
+    triggerApiKeyConnection();
+  };
+
+  const providerInfo = providerNode
+    ? {
+        id: providerNode.id,
+        name:
+          providerNode.name ||
+          (providerNode.type === "anthropic-compatible"
+            ? "Anthropic Compatible"
+            : "OpenAI Compatible"),
+        color: providerNode.type === "anthropic-compatible" ? "#D97757" : "#10A37F",
+        textIcon: providerNode.type === "anthropic-compatible" ? "AC" : "OC",
+        apiType: providerNode.apiType,
+        baseUrl: providerNode.baseUrl,
+        type: providerNode.type,
+      }
+    : OAUTH_PROVIDERS[providerId] ||
+      APIKEY_PROVIDERS[providerId] ||
+      FREE_PROVIDERS[providerId] ||
+      FREE_TIER_PROVIDERS[providerId] ||
+      WEB_COOKIE_PROVIDERS[providerId];
+  const authModes = providerInfo?.authModes || [];
+  const isOAuth =
+    !!OAUTH_PROVIDERS[providerId] || !!FREE_PROVIDERS[providerId] || authModes.includes("oauth");
+  const supportsApiKeyAuth = !!APIKEY_PROVIDERS[providerId] || authModes.includes("apikey");
+  const isFreeNoAuth = !!FREE_PROVIDERS[providerId]?.noAuth;
+  const staticModels = getModelsByProviderId(providerId);
+  const models =
+    (providerId === "cursor" || providerId === "zed") && liveModels.length > 0
+      ? liveModels
+      : staticModels;
+  const providerAlias = getProviderAlias(providerId);
+
+  const isOpenAICompatible = isOpenAICompatibleProvider(providerId);
+  const isAnthropicCompatible = isAnthropicCompatibleProvider(providerId);
+  const isCompatible = isOpenAICompatible || isAnthropicCompatible;
+  const hasDualAuthModes = !isCompatible && isOAuth && supportsApiKeyAuth;
+  const oauthConnectionLabel =
+    providerId === "xai"
+      ? "Grok Build OAuth"
+      : providerId === "grok-cli"
+        ? "Grok CLI Device Login"
+        : "OAuth";
+  const apiKeyConnectionLabel =
+    providerId === "xai" ? "xAI API Key" : providerId === "qoder" ? "PAT" : "API Key";
+  const providerStorageAlias = isCompatible ? providerId : providerAlias;
+  const providerDisplayAlias = isCompatible ? providerNode?.prefix || providerId : providerAlias;
+
+  const fetchDisabledModels = useCallback(async () => {
+    try {
+      const res = await fetch(
+        `/api/models/disabled?providerAlias=${encodeURIComponent(providerStorageAlias)}`,
+        { cache: "no-store" },
+      );
+      const data = await res.json();
+      if (res.ok) setDisabledModelIds(data.ids || []);
+    } catch (error) {
+      console.log("Error fetching disabled models:", error);
+    }
+  }, [providerStorageAlias]);
+
+  const handleDisableModel = async (modelId) => {
+    try {
+      const res = await fetch("/api/models/disabled", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ providerAlias: providerStorageAlias, ids: [modelId] }),
+      });
+      if (res.ok) await fetchDisabledModels();
+    } catch (error) {
+      console.log("Error disabling model:", error);
+    }
+  };
+
+  const handleEnableModel = async (modelId) => {
+    try {
+      const res = await fetch(
+        `/api/models/disabled?providerAlias=${encodeURIComponent(providerStorageAlias)}&id=${encodeURIComponent(modelId)}`,
+        { method: "DELETE" },
+      );
+      if (res.ok) await fetchDisabledModels();
+    } catch (error) {
+      console.log("Error enabling model:", error);
+    }
+  };
+
+  const handleDisableAll = async (ids) => {
+    if (!ids.length) return;
+    setConfirmState({
+      title: "Disable All Models",
+      message: `Disable all ${ids.length} model(s)?`,
+      onConfirm: async () => {
+        setConfirmState(null);
+        try {
+          const res = await fetch("/api/models/disabled", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ providerAlias: providerStorageAlias, ids }),
+          });
+          if (res.ok) await fetchDisabledModels();
+        } catch (error) {
+          console.log("Error disabling all models:", error);
+        }
+      },
+    });
+  };
+
+  const handleEnableAll = async () => {
+    try {
+      const res = await fetch(
+        `/api/models/disabled?providerAlias=${encodeURIComponent(providerStorageAlias)}`,
+        { method: "DELETE" },
+      );
+      if (res.ok) await fetchDisabledModels();
+    } catch (error) {
+      console.log("Error enabling all models:", error);
+    }
+  };
+
+  // Define callbacks BEFORE the useEffect that uses them
+  const fetchAliases = useCallback(async () => {
+    try {
+      const res = await fetch("/api/models/alias");
+      const data = await res.json();
+      if (res.ok) {
+        setModelAliases(data.aliases || {});
+      }
+    } catch (error) {
+      console.log("Error fetching aliases:", error);
+    }
+  }, []);
+
+  const fetchCustomModels = useCallback(async () => {
+    try {
+      const res = await fetch("/api/models/custom", { cache: "no-store" });
+      const data = await res.json();
+      if (res.ok) {
+        setCustomModels(data.models || []);
+      }
+    } catch (error) {
+      console.log("Error fetching custom models:", error);
+    }
+  }, []);
+
+  // Fetch free models from Kilo API for kilocode provider
+  useEffect(() => {
+    if (providerId !== "kilocode") return;
+    fetch("/api/providers/kilo/free-models")
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.models?.length) setKiloFreeModels(data.models);
+      })
+      .catch(() => {});
+  }, [providerId]);
+
+  const fetchConnections = useCallback(async () => {
+    try {
+      const [connectionsRes, nodesRes, proxyPoolsRes, settingsRes] = await Promise.all([
+        fetch("/api/providers", { cache: "no-store" }),
+        fetch("/api/provider-nodes", { cache: "no-store" }),
+        fetch("/api/proxy-pools?isActive=true", { cache: "no-store" }),
+        fetch("/api/settings", { cache: "no-store" }),
+      ]);
+      const connectionsData = await connectionsRes.json();
+      const nodesData = await nodesRes.json();
+      const proxyPoolsData = await proxyPoolsRes.json();
+      const settingsData = settingsRes.ok ? await settingsRes.json() : {};
+      if (connectionsRes.ok) {
+        const filtered = (connectionsData.connections || []).filter(
+          (c) => c.provider === providerId,
+        );
+        setConnections(filtered);
+      }
+      if (proxyPoolsRes.ok) {
+        setProxyPools(proxyPoolsData.proxyPools || []);
+      }
+      // Load per-provider strategy override
+      const override = (settingsData.providerStrategies || {})[providerId] || {};
+      setProviderStrategy(override.fallbackStrategy || null);
+      setProviderStickyLimit(
+        override.stickyRoundRobinLimit != null ? String(override.stickyRoundRobinLimit) : "1",
+      );
+      const autoPingSettingsKey = AUTO_PING_SETTINGS_KEYS[providerId];
+      const apCfg = autoPingSettingsKey ? settingsData[autoPingSettingsKey] || {} : {};
+      setAutoPing({ enabled: apCfg.enabled === true, connections: apCfg.connections || {} });
+      if (nodesRes.ok) {
+        let node = (nodesData.nodes || []).find((entry) => entry.id === providerId) || null;
+
+        // Newly created compatible nodes can be briefly unavailable on one worker.
+        // Retry a few times before showing "Provider not found".
+        if (!node && isCompatible) {
+          for (let attempt = 0; attempt < 3; attempt += 1) {
+            await new Promise((resolve) => setTimeout(resolve, 150));
+            const retryRes = await fetch("/api/provider-nodes", { cache: "no-store" });
+            if (!retryRes.ok) continue;
+            const retryData = await retryRes.json();
+            node = (retryData.nodes || []).find((entry) => entry.id === providerId) || null;
+            if (node) break;
+          }
+        }
+
+        setProviderNode(node);
+      }
+    } catch (error) {
+      console.log("Error fetching connections:", error);
+    } finally {
+      setLoading(false);
+    }
+  }, [providerId, isCompatible]);
+
+  const handleUpdateNode = async (formData) => {
+    try {
+      const res = await fetch(`/api/provider-nodes/${providerId}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(formData),
+      });
+      const data = await res.json();
+      if (res.ok) {
+        setProviderNode(data.node);
+        await fetchConnections();
+        setShowEditNodeModal(false);
+      }
+    } catch (error) {
+      console.log("Error updating provider node:", error);
+    }
+  };
+
+  const saveProviderStrategy = async (strategy, stickyLimit) => {
+    try {
+      const settingsRes = await fetch("/api/settings", { cache: "no-store" });
+      const settingsData = settingsRes.ok ? await settingsRes.json() : {};
+      const current = settingsData.providerStrategies || {};
+
+      // Build override: null strategy means remove override, use global
+      const override: any = {};
+      if (strategy) override.fallbackStrategy = strategy;
+      if (strategy === "round-robin" && stickyLimit !== "") {
+        override.stickyRoundRobinLimit = Number(stickyLimit) || 3;
+      }
+
+      const updated = { ...current };
+      if (Object.keys(override).length === 0) {
+        delete updated[providerId];
+      } else {
+        updated[providerId] = override;
+      }
+
+      await fetch("/api/settings", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ providerStrategies: updated }),
+      });
+    } catch (error) {
+      console.log("Error saving provider strategy:", error);
+    }
+  };
+
+  const handleRoundRobinToggle = (enabled) => {
+    const strategy = enabled ? "round-robin" : null;
+    const sticky = enabled ? providerStickyLimit || "1" : providerStickyLimit;
+    if (enabled && !providerStickyLimit) setProviderStickyLimit("1");
+    setProviderStrategy(strategy);
+    saveProviderStrategy(strategy, sticky);
+  };
+
+  const handleStickyLimitChange = (value) => {
+    setProviderStickyLimit(value);
+    saveProviderStrategy("round-robin", value);
+  };
+
+  const saveAutoPing = async (next) => {
+    const autoPingSettingsKey = AUTO_PING_SETTINGS_KEYS[providerId];
+    if (!autoPingSettingsKey) return;
+
+    setAutoPing(next);
+    try {
+      await fetch("/api/settings", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ [autoPingSettingsKey]: next }),
+      });
+    } catch (error) {
+      console.log("Error saving auto-ping config:", error);
+    }
+  };
+
+  const handleAutoPingConnection = (connectionId, on) => {
+    saveAutoPing({ ...autoPing, connections: { ...autoPing.connections, [connectionId]: on } });
+  };
+
+  useEffect(() => {
+    fetchConnections();
+    fetchAliases();
+    fetchCustomModels();
+    fetchDisabledModels();
+  }, [fetchConnections, fetchAliases, fetchCustomModels, fetchDisabledModels]);
+
+  // Live per-connection catalogs (cursor, zed): the static registry carries
+  // no usable list, so resolve from the active connection. Fires only when
+  // the provider id or connection list changes — no polling, no loop.
+  // Cursor path is statement-identical to before; zed adds error surfacing.
+  useEffect(() => {
+    const isLiveCatalog = providerId === "cursor" || providerId === "zed";
+    if (!isLiveCatalog) {
+      setLiveModels([]);
+      return;
+    }
+
+    const connection = connections.find((item) => item.isActive !== false);
+    if (!connection?.id) {
+      setLiveModels([]);
+      if (providerId === "zed") setLiveModelsError(null);
+      return;
+    }
+
+    let cancelled = false;
+    if (providerId === "zed") setLiveModelsError(null);
+    fetch(`/api/providers/${connection.id}/models`, { cache: "no-store" })
+      .then(async (res) => ({ ok: res.ok, data: await res.json().catch(() => null) }))
+      .then(({ ok, data }) => {
+        if (cancelled) return;
+        if (ok && Array.isArray(data?.models) && data.models.length > 0) {
+          setLiveModels(data.models);
+          if (providerId === "zed" && data?.warning) setLiveModelsError(data.warning);
+          return;
+        }
+        if (providerId === "zed") {
+          setLiveModels([]);
+          setLiveModelsError(data?.warning || data?.error || "Zed returned no live models.");
+        }
+      })
+      .catch(() => {
+        if (!cancelled && providerId === "zed") {
+          setLiveModels([]);
+          setLiveModelsError("Failed to reach the Zed model catalog.");
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [providerId, connections]);
+
+  // Fetch suggested models from provider's public API (if configured)
+  useEffect(() => {
+    const fetcher = (
+      OAUTH_PROVIDERS[providerId] ||
+      APIKEY_PROVIDERS[providerId] ||
+      FREE_PROVIDERS[providerId] ||
+      FREE_TIER_PROVIDERS[providerId]
+    )?.modelsFetcher;
+    if (!fetcher) return;
+    fetchSuggestedModels(fetcher).then(setSuggestedModels);
+  }, [providerId]);
+
+  const handleSetAlias = async (modelId, alias, providerAliasOverride = providerAlias) => {
+    const fullModel = `${providerAliasOverride}/${modelId}`;
+    try {
+      const res = await fetch("/api/models/alias", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ model: fullModel, alias }),
+      });
+      if (res.ok) {
+        await fetchAliases();
+      } else {
+        const data = await res.json();
+        alert(data.error || "Failed to set alias");
+      }
+    } catch (error) {
+      console.log("Error setting alias:", error);
+    }
+  };
+
+  const handleDeleteAlias = async (alias) => {
+    try {
+      const res = await fetch(`/api/models/alias?alias=${encodeURIComponent(alias)}`, {
+        method: "DELETE",
+      });
+      if (res.ok) {
+        await fetchAliases();
+      }
+    } catch (error) {
+      console.log("Error deleting alias:", error);
+    }
+  };
+
+  const handleAddCustomModel = async (
+    modelId,
+    type = "llm",
+    providerAliasOverride = providerStorageAlias,
+    caps,
+  ) => {
+    try {
+      const res = await fetch("/api/models/custom", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          providerAlias: providerAliasOverride,
+          id: modelId,
+          type,
+          ...(caps ? { caps } : {}),
+        }),
+      });
+      if (res.ok) {
+        await fetchCustomModels();
+        if (typeof window !== "undefined")
+          window.dispatchEvent(new CustomEvent("customModelChanged"));
+      } else {
+        const data = await res.json();
+        alert(data.error || "Failed to add custom model");
+      }
+    } catch (error) {
+      console.log("Error adding custom model:", error);
+    }
+  };
+
+  const handleDeleteCustomModel = async (
+    modelId,
+    type = "llm",
+    providerAliasOverride = providerStorageAlias,
+  ) => {
+    try {
+      const params = new URLSearchParams({
+        providerAlias: providerAliasOverride,
+        id: modelId,
+        type,
+      });
+      const res = await fetch(`/api/models/custom?${params}`, { method: "DELETE" });
+      if (res.ok) {
+        await fetchCustomModels();
+        if (typeof window !== "undefined")
+          window.dispatchEvent(new CustomEvent("customModelChanged"));
+      }
+    } catch (error) {
+      console.log("Error deleting custom model:", error);
+    }
+  };
+
+  // Fetch Qoder model list and automatically add to available models
+  const handleImportQoderModels = async () => {
+    if (importingQoderModels) return;
+    const activeConnection = connections.find((conn) => conn.isActive !== false);
+    if (!activeConnection) {
+      alert(translate("Please add an active Qoder connection first"));
+      return;
+    }
+
+    setImportingQoderModels(true);
+    try {
+      const res = await fetch(`/api/providers/${activeConnection.id}/models`);
+      const data = await res.json();
+      if (!res.ok) {
+        alert(data.error || translate("Failed to fetch models"));
+        return;
+      }
+      const models = data.models || [];
+      if (models.length === 0) {
+        alert(translate("No models returned"));
+        return;
+      }
+
+      let importedCount = 0;
+      for (const model of models) {
+        const modelId = model.id || model.name;
+        if (!modelId) continue;
+
+        // Qoder model ID format may be "qoder/auto" or "auto", need to remove prefix
+        const cleanModelId = modelId.replace(/^qoder\//, "");
+        const alreadyExists =
+          customModels.some(
+            (entry) =>
+              entry.providerAlias === providerStorageAlias &&
+              entry.id === cleanModelId &&
+              (entry.kind || entry.type || "llm") === "llm",
+          ) || Object.values(modelAliases).includes(`${providerStorageAlias}/${cleanModelId}`);
+        if (alreadyExists) {
+          continue;
+        }
+
+        await handleAddCustomModel(cleanModelId, "llm", providerStorageAlias);
+        importedCount += 1;
+      }
+
+      if (importedCount === 0) {
+        alert(translate("All models already exist, no new models added"));
+      } else {
+        alert(translate("Successfully added") + ` ${importedCount} ` + translate("models"));
+      }
+    } catch (error) {
+      console.log("Error importing Qoder models:", error);
+      alert(translate("Error fetching models") + ": " + error.message);
+    } finally {
+      setImportingQoderModels(false);
+    }
+  };
+
+  const handleDelete = async (id) => {
+    setConfirmState({
+      title: "Delete Connection",
+      message: "Delete this connection?",
+      onConfirm: async () => {
+        setConfirmState(null);
+        try {
+          const res = await fetch(`/api/providers/${id}`, { method: "DELETE" });
+          if (res.ok) {
+            setConnections((prev) => prev.filter((c) => c.id !== id));
+          }
+        } catch (error) {
+          console.log("Error deleting connection:", error);
+        }
+      },
+    });
+  };
+
+  const handleBulkDelete = () => {
+    const count = selectedConnectionIds.length;
+    if (count === 0) return;
+    setConfirmState({
+      title: `Delete ${count} Connection${count > 1 ? "s" : ""}`,
+      message: `Delete ${count} connection${count > 1 ? "s" : ""}? This cannot be undone.`,
+      onConfirm: async () => {
+        setConfirmState(null);
+        let failed = 0;
+        const idsToDelete = [...selectedConnectionIds];
+        for (const id of idsToDelete) {
+          try {
+            const res = await fetch(`/api/providers/${id}`, { method: "DELETE" });
+            if (!res.ok) failed += 1;
+          } catch (error) {
+            console.log("Error deleting connection:", error);
+            failed += 1;
+          }
+        }
+        setConnections((prev) => prev.filter((c) => !idsToDelete.includes(c.id)));
+        setSelectedConnectionIds([]);
+        if (failed > 0)
+          alert(`Deleted ${idsToDelete.length - failed} connection(s), ${failed} failed.`);
+      },
+    });
+  };
+
+  const handleOAuthSuccess = () => {
+    fetchConnections();
+    setShowOAuthModal(false);
+  };
+
+  const handleIFlowCookieSuccess = () => {
+    fetchConnections();
+    setShowIFlowCookieModal(false);
+  };
+
+  const handleSaveApiKey = async (formData) => {
+    setAddConnectionError("");
+    try {
+      const res = await fetch("/api/providers", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ provider: providerId, ...formData }),
+      });
+
+      let data = null;
+      try {
+        data = await res.json();
+      } catch {
+        data = null;
+      }
+
+      if (res.ok) {
+        await fetchConnections();
+        setShowAddApiKeyModal(false);
+        return;
+      }
+
+      setAddConnectionError(data?.error || "Failed to save connection");
+    } catch (error) {
+      console.log("Error saving connection:", error);
+      setAddConnectionError("Failed to save connection");
+    }
+  };
+
+  const handleUpdateConnection = async (formData) => {
+    try {
+      const res = await fetch(`/api/providers/${selectedConnection.id}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(formData),
+      });
+      if (res.ok) {
+        await fetchConnections();
+        setShowEditModal(false);
+      }
+    } catch (error) {
+      console.log("Error updating connection:", error);
+    }
+  };
+
+  const handleUpdateConnectionStatus = async (id, isActive) => {
+    try {
+      const res = await fetch(`/api/providers/${id}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ isActive }),
+      });
+      if (res.ok) {
+        setConnections((prev) => prev.map((c) => (c.id === id ? { ...c, isActive } : c)));
+      }
+    } catch (error) {
+      console.log("Error updating connection status:", error);
+    }
+  };
+
+  const handleSwapPriority = async (index1, index2) => {
+    // Optimistic update state
+    const newConnections = [...connections];
+    [newConnections[index1], newConnections[index2]] = [
+      newConnections[index2],
+      newConnections[index1],
+    ];
+    setConnections(newConnections);
+
+    try {
+      await Promise.all([
+        fetch(`/api/providers/${newConnections[index1].id}`, {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ priority: index1 }),
+        }),
+        fetch(`/api/providers/${newConnections[index2].id}`, {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ priority: index2 }),
+        }),
+      ]);
+    } catch (error) {
+      console.log("Error swapping priority:", error);
+      await fetchConnections();
+    }
+  };
+
+  const allSelected = connections.length > 0 && selectedConnectionIds.length === connections.length;
+
+  const toggleSelectConnection = (connectionId) => {
+    setSelectedConnectionIds((prev) =>
+      prev.includes(connectionId)
+        ? prev.filter((id) => id !== connectionId)
+        : [...prev, connectionId],
+    );
+  };
+
+  const toggleSelectAllConnections = () => {
+    if (allSelected) {
+      setSelectedConnectionIds([]);
+      return;
+    }
+    setSelectedConnectionIds(connections.map((conn) => conn.id));
+  };
+
+  useEffect(() => {
+    setSelectedConnectionIds((prev) =>
+      prev.filter((id) => connections.some((conn) => conn.id === id)),
+    );
+  }, [connections]);
+
+  const closeBulkProxyModal = () => {
+    if (bulkUpdatingProxy) return;
+    setShowBulkProxyModal(false);
+  };
+
+  const applyProxyAssignments = async (assignments) => {
+    setBulkUpdatingProxy(true);
+    try {
+      let failed = 0;
+      for (const { connectionId, proxyPoolId } of assignments) {
+        try {
+          const res = await fetch(`/api/providers/${connectionId}`, {
+            method: "PUT",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ proxyPoolId }),
+          });
+          if (!res.ok) failed += 1;
+        } catch (e) {
+          console.log("Error applying proxy for", connectionId, e);
+          failed += 1;
+        }
+      }
+      if (failed > 0) alert(`Updated with ${failed} failed request(s).`);
+      await fetchConnections();
+      setShowBulkProxyModal(false);
+    } finally {
+      setBulkUpdatingProxy(false);
+    }
+  };
+
+  const handleApplySinglePool = (proxyPoolId) => {
+    const targets = connections.map((c) => ({ connectionId: c.id, proxyPoolId }));
+    return applyProxyAssignments(targets);
+  };
+
+  const handleApplyOneToOne = () => {
+    const activePools = proxyPools.filter((p) => p.isActive === true);
+    if (activePools.length === 0) {
+      alert("No active proxy pools available.");
+      return;
+    }
+    const targets = connections.map((c, i) => ({
+      connectionId: c.id,
+      proxyPoolId: activePools[i % activePools.length].id,
+    }));
+    return applyProxyAssignments(targets);
+  };
+
+  const isSelected = (connectionId) => selectedConnectionIds.includes(connectionId);
+
+  const connectionsList = (
+    <div className="flex min-w-0 flex-col divide-y divide-black/[0.03] dark:divide-white/[0.03] max-h-[500px] overflow-y-auto pr-1">
+      {connections.map((conn, index) => (
+        <div key={conn.id} className="flex min-w-0 items-stretch">
+          <div className="flex shrink-0 items-center pl-1 sm:pl-2">
+            <Checkbox
+              checked={isSelected(conn.id)}
+              onCheckedChange={() => toggleSelectConnection(conn.id)}
+            />
+          </div>
+          <div className="flex-1 min-w-0">
+            <ConnectionRow
+              connection={conn}
+              proxyPools={proxyPools}
+              isOAuth={isOAuth}
+              isFirst={index === 0}
+              isLast={index === connections.length - 1}
+              onMoveUp={() => handleSwapPriority(index, index - 1)}
+              onMoveDown={() => handleSwapPriority(index, index + 1)}
+              onToggleActive={(isActive) => handleUpdateConnectionStatus(conn.id, isActive)}
+              autoPing={
+                AUTO_PING_SETTINGS_KEYS[providerId] && conn.authType === "oauth"
+                  ? {
+                      on: autoPing.connections[conn.id] === true,
+                      onToggle: (on) => handleAutoPingConnection(conn.id, on),
+                      provider: providerId,
+                    }
+                  : null
+              }
+              onUpdateProxy={async (proxyPoolId) => {
+                try {
+                  const res = await fetch(`/api/providers/${conn.id}`, {
+                    method: "PUT",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ proxyPoolId: proxyPoolId || null }),
+                  });
+                  if (res.ok) {
+                    setConnections((prev) =>
+                      prev.map((c) =>
+                        c.id === conn.id
+                          ? {
+                              ...c,
+                              providerSpecificData: {
+                                ...c.providerSpecificData,
+                                proxyPoolId: proxyPoolId || null,
+                              },
+                            }
+                          : c,
+                      ),
+                    );
+                  }
+                } catch (error) {
+                  console.log("Error updating proxy:", error);
+                }
+              }}
+              onEdit={() => {
+                setSelectedConnection(conn);
+                setShowEditModal(true);
+              }}
+              onDelete={() => handleDelete(conn.id)}
+              oneByOneStatus={oneByOneResults[conn.id] || null}
+            />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+
+  const activePools = proxyPools.filter((p) => p.isActive === true);
+
+  const bulkActionModal = (
+    <Dialog
+      open={showBulkProxyModal}
+      onOpenChange={(open) => {
+        if (!open) closeBulkProxyModal();
+      }}
+    >
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Apply Proxy ({connections.length} connections)</DialogTitle>
+        </DialogHeader>
+        <div className="flex flex-col gap-2 p-4">
+          <button
+            onClick={handleApplyOneToOne}
+            disabled={bulkUpdatingProxy || activePools.length === 0}
+            className="flex items-center gap-3 rounded-lg border border-border px-3 py-2.5 text-left transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            <ArrowLeftRight className="size-4 shrink-0 text-muted-foreground" />
+            <span className="flex min-w-0 flex-col">
+              <span className="text-sm font-medium text-foreground">One-to-one (rotate)</span>
+              <span className="text-xs text-muted-foreground">
+                Distribute connections across {activePools.length} active pool(s)
+              </span>
+            </span>
+          </button>
+          <button
+            onClick={() => handleApplySinglePool(null)}
+            disabled={bulkUpdatingProxy}
+            className="flex items-center gap-3 rounded-lg border border-border px-3 py-2.5 text-left transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            <Unplug className="size-4 shrink-0 text-muted-foreground" />
+            <span className="flex min-w-0 flex-col">
+              <span className="text-sm font-medium text-foreground">None (unbind all)</span>
+              <span className="text-xs text-muted-foreground">
+                Remove proxy from all connections
+              </span>
+            </span>
+          </button>
+          {proxyPools.map((pool) => (
+            <button
+              key={pool.id}
+              onClick={() => handleApplySinglePool(pool.id)}
+              disabled={bulkUpdatingProxy || pool.isActive !== true}
+              className="flex items-center gap-3 rounded-lg border border-border px-3 py-2.5 text-left transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              <Server className="size-4 shrink-0 text-muted-foreground" />
+              <span className="truncate text-sm font-medium text-foreground">{pool.name}</span>
+              {pool.isActive !== true && (
+                <span className="text-[10px] text-muted-foreground">(inactive)</span>
+              )}
+            </button>
+          ))}
+
+          {bulkUpdatingProxy && <p className="text-xs text-muted-foreground">Applying...</p>}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+
+  const handleTestModel = async (modelId, kind = "llm") => {
+    if (testingModelIds.has(modelId)) return;
+    setTestingModelIds((prev) => new Set(prev).add(modelId));
+    try {
+      const res = await fetch("/api/models/test", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ model: `${providerStorageAlias}/${modelId}`, kind }),
+      });
+      const data = await res.json();
+      setModelTestResults((prev) => ({ ...prev, [modelId]: data.ok ? "ok" : "error" }));
+      setModelsTestError(data.ok ? "" : data.error || "Model not reachable");
+    } catch {
+      setModelTestResults((prev) => ({ ...prev, [modelId]: "error" }));
+      setModelsTestError("Network error");
+    } finally {
+      setTestingModelIds((prev) => {
+        const n = new Set(prev);
+        n.delete(modelId);
+        return n;
+      });
+    }
+  };
+
+  const renderModelsSection = () => {
+    if (isCompatible) {
+      return (
+        <CompatibleModelsSection
+          providerStorageAlias={providerStorageAlias}
+          providerDisplayAlias={providerDisplayAlias}
+          modelAliases={modelAliases}
+          customModels={customModels}
+          copied={copied}
+          onCopy={copy}
+          onSetAlias={handleSetAlias}
+          onDeleteAlias={handleDeleteAlias}
+          onAddCustomModel={(modelId) => handleAddCustomModel(modelId, "llm", providerStorageAlias)}
+          onDeleteCustomModel={(modelId) =>
+            handleDeleteCustomModel(modelId, "llm", providerStorageAlias)
+          }
+          connections={connections}
+          isAnthropic={isAnthropicCompatible}
+        />
+      );
+    }
+    // Combine hardcoded models with Kilo free models (deduplicated)
+    // Exclude non-llm models (embedding, tts, etc.) — they have dedicated pages under media-providers
+    const allModels = [
+      ...models,
+      ...kiloFreeModels.filter((fm) => !models.some((m) => m.id === fm.id)),
+    ].filter((m) => {
+      const k = getModelKind(m);
+      return !k || k === "llm";
+    });
+    const disabledSet = new Set(disabledModelIds);
+    const displayModels = allModels.filter((m) => !disabledSet.has(m.id));
+    const disabledDisplayModels = allModels.filter((m) => disabledSet.has(m.id));
+    const customModelRows = getProviderCustomModelRows({
+      customModels,
+      modelAliases,
+      providerAlias: providerStorageAlias,
+      builtInModels: models,
+      type: "llm",
+    });
+
+    return (
+      <div className="flex flex-wrap gap-3">
+        {/* Custom models first */}
+        {customModelRows.map((model) => (
+          <ModelRow
+            key={`${model.source}-${model.fullModel}`}
+            model={{ id: model.id, name: model.name }}
+            fullModel={`${providerDisplayAlias}/${model.id}`}
+            alias={model.alias}
+            copied={copied}
+            onCopy={copy}
+            onSetAlias={() => {}}
+            onDeleteAlias={() => {
+              if (model.source === "custom") {
+                handleDeleteCustomModel(model.id, "llm", providerStorageAlias);
+              } else {
+                handleDeleteAlias(model.alias);
+              }
+            }}
+            testStatus={modelTestResults[model.id]}
+            onTest={
+              connections.length > 0 || isFreeNoAuth
+                ? () => handleTestModel(model.id, getModelKind(model, "llm"))
+                : undefined
+            }
+            isTesting={testingModelIds.has(model.id)}
+            isCustom
+            isFree={false}
+            caps={getCaps(`${providerId}/${model.id}`)}
+          />
+        ))}
+
+        {displayModels.map((model) => {
+          const fullModel = `${providerStorageAlias}/${model.id}`;
+          const oldFormatModel = `${providerId}/${model.id}`;
+          const existingAlias = Object.entries(modelAliases).find(
+            ([, m]) => m === fullModel || m === oldFormatModel,
+          )?.[0];
+          return (
+            <ModelRow
+              key={model.id}
+              model={model}
+              fullModel={`${providerDisplayAlias}/${model.id}`}
+              alias={existingAlias}
+              copied={copied}
+              onCopy={copy}
+              onSetAlias={(alias) => handleSetAlias(model.id, alias, providerStorageAlias)}
+              onDeleteAlias={() => handleDeleteAlias(existingAlias)}
+              testStatus={modelTestResults[model.id]}
+              onTest={
+                connections.length > 0 || isFreeNoAuth
+                  ? () => handleTestModel(model.id, getModelKind(model, "llm"))
+                  : undefined
+              }
+              isTesting={testingModelIds.has(model.id)}
+              isFree={model.isFree}
+              onDisable={() => handleDisableModel(model.id)}
+              caps={getCaps(`${providerId}/${model.id}`)}
+            />
+          );
+        })}
+
+        {/* Add model button — inline, same style as model chips */}
+        <button
+          onClick={() => setShowAddCustomModel(true)}
+          className="flex w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-primary/40 px-3 py-2 text-xs text-primary transition-colors hover:border-primary hover:bg-primary/5 sm:w-auto"
+        >
+          <Icon name="add" className="text-sm" />
+          Add Model
+        </button>
+
+        {/* Import Qoder models button — only show for qoder provider */}
+        {providerId === "qoder" && connections.some((conn) => conn.isActive !== false) && (
+          <button
+            onClick={handleImportQoderModels}
+            disabled={importingQoderModels}
+            className="flex w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-blue-500/40 px-3 py-2 text-xs text-blue-600 dark:text-blue-400 transition-colors hover:border-blue-500 hover:bg-blue-500/5 sm:w-auto disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <Icon
+              name={importingQoderModels ? "progress_activity" : "download"}
+              className="text-sm"
+              style={importingQoderModels ? { animation: "spin 1s linear infinite" } : undefined}
+            />
+            {importingQoderModels ? translate("Fetching...") : translate("Fetch Qoder Models")}
+          </button>
+        )}
+
+        {/* Suggested models from provider API — show only models not yet added */}
+        {suggestedModels.length > 0 &&
+          (() => {
+            const addedFullModels = new Set([
+              ...Object.values(modelAliases),
+              ...customModelRows.map((model) => model.fullModel),
+            ]);
+            const hardcodedIds = new Set(models.map((m) => m.id));
+            const notAdded = suggestedModels.filter(
+              (m) =>
+                !addedFullModels.has(`${providerStorageAlias}/${m.id}`) && !hardcodedIds.has(m.id),
+            );
+            if (notAdded.length === 0) return null;
+            return (
+              <div className="w-full mt-2">
+                <p className="text-xs text-muted-foreground mb-2">
+                  Suggested free models (≥200k context):
+                </p>
+                <div className="flex flex-wrap gap-2">
+                  {notAdded.map((m) => (
+                    <Tooltip key={m.id}>
+                      <TooltipTrigger asChild>
+                        <button
+                          onClick={async () => {
+                            await handleAddCustomModel(m.id, "llm", providerStorageAlias);
+                          }}
+                          className="flex items-center gap-1 px-2.5 py-1.5 rounded-lg border border-black/10 dark:border-white/10 text-xs text-muted-foreground hover:text-primary hover:border-primary/40 hover:bg-primary/5 transition-colors"
+                        >
+                          <Icon name="add" className="text-[13px]" />
+                          {m.id.split("/").pop()}
+                        </button>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        {`${m.name} · ${(m.contextLength / 1000).toFixed(0)}k ctx`}
+                      </TooltipContent>
+                    </Tooltip>
+                  ))}
+                </div>
+              </div>
+            );
+          })()}
+
+        {/* Disabled models — restorable */}
+        {disabledDisplayModels.length > 0 && (
+          <div className="w-full mt-2">
+            <p className="text-xs text-muted-foreground mb-2">
+              Disabled models ({disabledDisplayModels.length}):
+            </p>
+            <div className="flex flex-wrap gap-2">
+              {disabledDisplayModels.map((m) => (
+                <Tooltip key={m.id}>
+                  <TooltipTrigger asChild>
+                    <button
+                      onClick={() => handleEnableModel(m.id)}
+                      className="flex items-center gap-1 px-2.5 py-1.5 rounded-lg border border-dashed border-black/10 dark:border-white/10 text-xs text-muted-foreground hover:text-primary hover:border-primary/40 hover:bg-primary/5 transition-colors"
+                    >
+                      <Icon name="add" className="text-[13px]" />
+                      {m.id}
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>Restore model</TooltipContent>
+                </Tooltip>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  if (loading) {
+    return (
+      <Page>
+        <PanelSkeleton />
+        <PanelSkeleton />
+      </Page>
+    );
+  }
+
+  if (!providerInfo) {
+    return (
+      <div className="text-center py-20">
+        <p className="text-muted-foreground">Provider not found</p>
+        <Link href="/dashboard/providers" className="text-primary mt-4 inline-block">
+          Back to Providers
+        </Link>
+      </div>
+    );
+  }
+
+  // Determine icon path: guess a brand logo from the custom node baseUrl
+  // first (e.g. api.deepseek.com → deepseek.png), then the API family logo.
+  const getHeaderIconPath = () => {
+    if (isCompatible) {
+      const guessed = getProviderIconSrc(guessProviderIconIdFromUrl(providerNode?.baseUrl));
+      if (guessed) return guessed;
+      return isAnthropicCompatible ? "/providers/anthropic.png" : "/providers/openai.png";
+    }
+    return getProviderIconSrc(providerInfo.id);
+  };
+
+  return (
+    <>
+      <Page>
+        {/* Header */}
+        <div className="min-w-0">
+          <Button variant="outline" size="sm" asChild className="mb-4">
+            <Link href="/dashboard/providers">
+              <Icon name="arrow_back" className="text-lg" />
+              Back to Providers
+            </Link>
+          </Button>
+          <div className="flex min-w-0 items-center gap-3 sm:gap-4">
+            <div
+              className="flex size-12 shrink-0 items-center justify-center rounded-lg"
+              style={{ backgroundColor: `${providerInfo.color}15` }}
+            >
+              {headerImgError || !getHeaderIconPath() ? (
+                <span className="text-sm font-bold" style={{ color: providerInfo.color }}>
+                  {getInitials(providerInfo.name) ||
+                    providerInfo.textIcon ||
+                    providerInfo.id.slice(0, 2).toUpperCase()}
+                </span>
+              ) : (
+                <Image
+                  src={getHeaderIconPath()}
+                  alt={providerInfo.name}
+                  width={48}
+                  height={48}
+                  className="max-h-12 max-w-12 rounded-lg object-contain"
+                  sizes="48px"
+                  onError={() => {
+                    markProviderIconMissing(providerInfo.id);
+                    setHeaderImgError(true);
+                  }}
+                  loading="lazy"
+                  decoding="async"
+                />
+              )}
+            </div>
+            <div className="min-w-0">
+              <div className="flex items-center gap-3 flex-wrap">
+                <h1 className="truncate text-2xl font-semibold tracking-tight sm:text-3xl">
+                  {providerInfo.name}
+                </h1>
+                {(providerInfo.notice?.apiKeyUrl ||
+                  providerInfo.notice?.signupUrl ||
+                  providerInfo.website) && (
+                  <a
+                    href={
+                      providerInfo.notice?.apiKeyUrl ||
+                      providerInfo.notice?.signupUrl ||
+                      providerInfo.website
+                    }
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-xs text-primary hover:underline inline-flex items-center gap-1"
+                  >
+                    <Icon name="open_in_new" className="text-sm" />
+                    {providerInfo.notice?.apiKeyUrl ? "Get API Key" : "Sign up / Learn more"}
+                  </a>
+                )}
+              </div>
+              <p className="text-muted-foreground">
+                {connections.length} connection{connections.length === 1 ? "" : "s"}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {providerInfo.deprecated && (
+          <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-yellow-500/10 border border-yellow-500/30">
+            <Icon name="warning" className="text-[16px] text-yellow-500 mt-0.5 shrink-0" />
+            <p className="text-xs text-red-600 dark:text-yellow-400 leading-relaxed">
+              {providerInfo.deprecationNotice}
+            </p>
+          </div>
+        )}
+
+        {providerInfo.notice?.text && !providerInfo.deprecated && (
+          <div className="flex flex-col gap-2 rounded-lg border border-blue-500/30 bg-blue-500/10 px-3 py-2 sm:flex-row sm:items-center">
+            <Icon name="info" className="text-[16px] text-blue-500 shrink-0" />
+            <p className="min-w-0 flex-1 text-xs leading-relaxed text-blue-600 dark:text-blue-400">
+              {providerInfo.notice.text}
+            </p>
+            {providerInfo.notice.apiKeyUrl && (
+              <a
+                href={providerInfo.notice.apiKeyUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex justify-center rounded bg-blue-500 px-2 py-1 text-xs font-medium text-white transition-colors hover:bg-blue-600 sm:py-0.5"
+              >
+                Get API Key →
+              </a>
+            )}
+          </div>
+        )}
+
+        {isCompatible && providerNode && (
+          <Card>
+            <CardContent>
+              <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                <div className="min-w-0">
+                  <h2 className="text-lg font-semibold">
+                    {isAnthropicCompatible
+                      ? "Anthropic Compatible Details"
+                      : "OpenAI Compatible Details"}
+                  </h2>
+                  <p className="break-all text-sm text-muted-foreground">
+                    {isAnthropicCompatible
+                      ? "Messages API"
+                      : providerNode.apiType === "responses"
+                        ? "Responses API"
+                        : "Chat Completions"}{" "}
+                    · {(providerNode.baseUrl || "").replace(/\/$/, "")}/
+                    {isAnthropicCompatible
+                      ? "messages"
+                      : providerNode.apiType === "responses"
+                        ? "responses"
+                        : "chat/completions"}
+                  </p>
+                </div>
+                <div className="grid grid-cols-1 gap-2 sm:flex sm:items-center">
+                  <Button
+                    size="sm"
+                    onClick={() => {
+                      setAddConnectionError("");
+                      setShowAddApiKeyModal(true);
+                    }}
+                    className="w-full sm:w-auto"
+                  >
+                    <Icon name="add" />
+                    Add API Key
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="secondary"
+                    onClick={() => setShowEditNodeModal(true)}
+                    className="w-full sm:w-auto"
+                  >
+                    <Icon name="edit" />
+                    Edit
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="secondary"
+                    onClick={async () => {
+                      setConfirmState({
+                        title: "Delete Compatible Node",
+                        message: `Delete this ${isAnthropicCompatible ? "Anthropic" : "OpenAI"} Compatible node?`,
+                        onConfirm: async () => {
+                          setConfirmState(null);
+                          try {
+                            const res = await fetch(`/api/provider-nodes/${providerId}`, {
+                              method: "DELETE",
+                            });
+                            if (res.ok) {
+                              router.push("/dashboard/providers");
+                            }
+                          } catch (error) {
+                            console.log("Error deleting provider node:", error);
+                          }
+                        },
+                      });
+                    }}
+                    className="w-full sm:w-auto"
+                  >
+                    <Icon name="delete" />
+                    Delete
+                  </Button>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Connections */}
+        {isFreeNoAuth ? (
+          <NoAuthProxyCard providerId={providerId} />
+        ) : (
+          <Card>
+            <CardContent>
+              <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                <h2 className="text-lg font-semibold">Connections</h2>
+                <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4">
+                  {connections.length > 0 && proxyPools.length > 0 && (
+                    <Button
+                      size="sm"
+                      variant="secondary"
+                      onClick={() => setShowBulkProxyModal(true)}
+                    >
+                      <Icon name="lan" />
+                      Apply Proxy
+                    </Button>
+                  )}
+                  {connections.length > 0 && (
+                    <>
+                      {selectedConnectionIds.length > 0 && (
+                        <Button size="sm" variant="destructive" onClick={handleBulkDelete}>
+                          <Icon name="delete" />
+                          Delete Selected ({selectedConnectionIds.length})
+                        </Button>
+                      )}
+                      <Button
+                        size="sm"
+                        variant="secondary"
+                        onClick={handleRunOneByOneTest}
+                        disabled={oneByOneRunning}
+                      >
+                        <Icon name="sync" />
+                        {oneByOneRunning
+                          ? "Testing Connection One-by-One..."
+                          : "Test Connection One-by-One"}
+                      </Button>
+                      {oneByOneRunning && (
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={handleStopOneByOneTest}
+                          disabled={oneByOneStopping}
+                        >
+                          <Icon name="stop" />
+                          {oneByOneStopping ? "Stopping..." : "Stop"}
+                        </Button>
+                      )}
+                    </>
+                  )}
+                  {/* Round Robin toggle */}
+                  <div className="flex flex-wrap items-center gap-2">
+                    <span className="text-xs text-muted-foreground font-medium">Round Robin</span>
+                    <Switch
+                      checked={providerStrategy === "round-robin"}
+                      onCheckedChange={handleRoundRobinToggle}
+                    />
+                    {providerStrategy === "round-robin" && (
+                      <div className="flex items-center gap-1.5">
+                        <span className="text-xs text-muted-foreground">Sticky:</span>
+                        <input
+                          type="number"
+                          min={1}
+                          value={providerStickyLimit}
+                          onChange={(e: any) => handleStickyLimitChange(e.target.value)}
+                          placeholder="1"
+                          className="w-14 px-2 py-1 text-xs border border-border rounded-md bg-background focus:outline-none focus:border-primary"
+                        />
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              {connections.length === 0 ? (
+                <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                  <div className="flex items-center gap-3">
+                    <div className="inline-flex items-center justify-center w-9 h-9 rounded-full bg-primary/10 text-primary shrink-0">
+                      <Icon name={isOAuth ? "lock" : "key"} className="text-[18px]" />
+                    </div>
+                    <div className="min-w-0">
+                      <p className="text-sm text-muted-foreground">No connections yet</p>
+                      {hasDualAuthModes && (
+                        <p className="text-xs text-muted-foreground">
+                          Choose {oauthConnectionLabel} or {apiKeyConnectionLabel}.
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                  <div className="flex gap-2">
+                    {hasDualAuthModes ? (
+                      <>
+                        <Button size="sm" variant="secondary" onClick={triggerOAuthConnection}>
+                          <Icon name="lock" />
+                          {oauthConnectionLabel}
+                        </Button>
+                        <Button size="sm" onClick={triggerApiKeyConnection}>
+                          <Icon name="key" />
+                          {apiKeyConnectionLabel}
+                        </Button>
+                      </>
+                    ) : (
+                      <>
+                        {!isCompatible && providerId === "iflow" && (
+                          <Button
+                            size="sm"
+                            variant="secondary"
+                            onClick={() => setShowIFlowCookieModal(true)}
+                          >
+                            <Icon name="cookie" />
+                            Cookie
+                          </Button>
+                        )}
+                        {providerId === "codex" && (
+                          <Button
+                            size="sm"
+                            variant="secondary"
+                            onClick={() => setShowBulkImportCodex(true)}
+                          >
+                            <Icon name="playlist_add" />
+                            {translate("Bulk Add")}
+                          </Button>
+                        )}
+                        {providerId === "grok-cli" && (
+                          <Button
+                            size="sm"
+                            variant="secondary"
+                            onClick={() => setShowBulkImportGrokCli(true)}
+                          >
+                            <Icon name="playlist_add" />
+                            {translate("Bulk Add")}
+                          </Button>
+                        )}
+                        <Button size="sm" onClick={triggerAddConnection}>
+                          <Icon name="add" />
+                          {isCompatible
+                            ? "Add API Key"
+                            : providerId === "iflow"
+                              ? "OAuth"
+                              : "Add Connection"}
+                        </Button>
+                      </>
+                    )}
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {oneByOneSummary && (
+                    <div className="mb-4 rounded-lg border border-black/10 bg-black/[0.02] px-3 py-2 text-xs text-muted-foreground dark:border-white/10 dark:bg-white/[0.03]">
+                      <div className="flex flex-wrap items-center gap-3">
+                        <span>Total: {oneByOneSummary.total}</span>
+                        <span>Completed: {oneByOneSummary.completed}</span>
+                        <span>Passed: {oneByOneSummary.passed}</span>
+                        <span>Failed: {oneByOneSummary.failed}</span>
+                        {oneByOneSummary.stopped && (
+                          <span className="text-amber-600 dark:text-amber-400">Stopped</span>
+                        )}
+                        {oneByOneRunning && oneByOneCurrentConnectionId && (
+                          <span>
+                            Running:{" "}
+                            {connections.find((conn) => conn.id === oneByOneCurrentConnectionId)
+                              ?.name || oneByOneCurrentConnectionId}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  )}
+                  {connections.length > 0 && (
+                    <div className="mb-3 flex items-center gap-2 border-b border-black/[0.03] pb-2 dark:border-white/[0.03]">
+                      <label className="flex cursor-pointer items-center gap-1.5 text-xs text-muted-foreground hover:text-primary">
+                        <Checkbox
+                          checked={allSelected}
+                          onCheckedChange={toggleSelectAllConnections}
+                          className="size-3.5 [&_svg]:size-2.5"
+                        />
+                        Select All
+                      </label>
+                    </div>
+                  )}
+                  {connectionsList}
+                  {!isCompatible && (
+                    <div className="mt-4 grid grid-cols-1 gap-2 sm:flex">
+                      {providerId === "iflow" && (
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              size="sm"
+                              variant="secondary"
+                              onClick={() => setShowIFlowCookieModal(true)}
+                              className="w-full sm:w-auto"
+                            >
+                              <Icon name="cookie" />
+                              Cookie
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>Add connection using browser cookie</TooltipContent>
+                        </Tooltip>
+                      )}
+                      {providerId === "codex" && (
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              size="sm"
+                              variant="secondary"
+                              onClick={() => setShowBulkImportCodex(true)}
+                              className="w-full sm:w-auto"
+                            >
+                              <Icon name="playlist_add" />
+                              {translate("Bulk Add")}
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            {translate("Bulk import codex accounts from JSON")}
+                          </TooltipContent>
+                        </Tooltip>
+                      )}
+                      {providerId === "grok-cli" && (
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              size="sm"
+                              variant="secondary"
+                              onClick={() => setShowBulkImportGrokCli(true)}
+                              className="w-full sm:w-auto"
+                            >
+                              <Icon name="playlist_add" />
+                              {translate("Bulk Add")}
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            {translate("Bulk import Grok CLI accounts from JSON")}
+                          </TooltipContent>
+                        </Tooltip>
+                      )}
+                      {hasDualAuthModes ? (
+                        <>
+                          <Button
+                            size="sm"
+                            variant="secondary"
+                            onClick={triggerOAuthConnection}
+                            className="w-full sm:w-auto"
+                          >
+                            <Icon name="lock" />
+                            {oauthConnectionLabel}
+                          </Button>
+                          <Button
+                            size="sm"
+                            onClick={triggerApiKeyConnection}
+                            className="w-full sm:w-auto"
+                          >
+                            <Icon name="key" />
+                            {apiKeyConnectionLabel}
+                          </Button>
+                        </>
+                      ) : (
+                        <Button
+                          size="sm"
+                          onClick={triggerAddConnection}
+                          className="w-full sm:w-auto"
+                        >
+                          <Icon name="add" />
+                          Add
+                        </Button>
+                      )}
+                    </div>
+                  )}
+                </>
+              )}
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Models */}
+        <Card>
+          <CardContent>
+            <div className="mb-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+              <div className="flex items-center gap-3">
+                <h2 className="text-lg font-semibold">{"Available Models"}</h2>
+              </div>
+              {!isCompatible &&
+                (() => {
+                  const allIds = [
+                    ...models,
+                    ...kiloFreeModels.filter((fm) => !models.some((m) => m.id === fm.id)),
+                  ]
+                    .filter((m) => {
+                      const k = getModelKind(m);
+                      return !k || k === "llm";
+                    })
+                    .map((m) => m.id);
+                  const activeIds = allIds.filter((id) => !disabledModelIds.includes(id));
+                  return (
+                    <div className="flex gap-2">
+                      {disabledModelIds.length > 0 && (
+                        <Button size="sm" variant="secondary" onClick={handleEnableAll}>
+                          <Icon name="restart_alt" />
+                          Active All
+                        </Button>
+                      )}
+                      {activeIds.length > 0 && (
+                        <Button
+                          size="sm"
+                          variant="secondary"
+                          onClick={() => handleDisableAll(activeIds)}
+                        >
+                          <Icon name="block" />
+                          Disable All
+                        </Button>
+                      )}
+                    </div>
+                  );
+                })()}
+            </div>
+            {!!modelsTestError && (
+              <div className="mb-3">
+                <p className="text-xs text-red-500 break-words">{modelsTestError}</p>
+                {/RegionError|hosted in China|regionNotAllowed/i.test(modelsTestError) &&
+                  (() => {
+                    const str =
+                      typeof modelsTestError === "string"
+                        ? modelsTestError
+                        : JSON.stringify(modelsTestError);
+                    const linkMatch = str.match(/https:\/\/opencode\.ai\/workspace\/[^\s"')]+/);
+                    const wrkMatch = str.match(/wrk_[0-9A-Za-z]+/);
+                    const targetUrl = linkMatch
+                      ? linkMatch[0].endsWith("/go")
+                        ? linkMatch[0]
+                        : `${linkMatch[0]}/go`
+                      : wrkMatch
+                        ? `https://opencode.ai/workspace/${wrkMatch[0]}/go`
+                        : "https://opencode.ai";
+
+                    return (
+                      <div className="mt-1.5">
+                        <a
+                          href={targetUrl}
+                          target="_blank"
+                          rel="noreferrer"
+                          className="inline-flex items-center gap-1 rounded-md bg-amber-500/10 px-2 py-0.5 text-xs font-medium text-amber-600 hover:bg-amber-500/20 dark:text-amber-400 transition-colors"
+                        >
+                          <span>Allow China-hosted models</span>
+                          <Icon name="open_in_new" className="text-[13px]" />
+                        </a>
+                      </div>
+                    );
+                  })()}
+              </div>
+            )}
+            {providerId === "zed" && !!liveModelsError && (
+              <p className="text-xs text-red-500 mb-3 break-words">{liveModelsError}</p>
+            )}
+            {renderModelsSection()}
+          </CardContent>
+        </Card>
+
+        {bulkActionModal}
+
+        {/* Modals */}
+        {providerId === "cursor" ? (
+          <CursorAuthModal
+            isOpen={showOAuthModal}
+            onSuccess={handleOAuthSuccess}
+            onClose={() => setShowOAuthModal(false)}
+          />
+        ) : providerId === "gitlab" ? (
+          <GitLabAuthModal
+            isOpen={showOAuthModal}
+            providerInfo={providerInfo}
+            onSuccess={handleOAuthSuccess}
+            onClose={() => setShowOAuthModal(false)}
+          />
+        ) : (
+          <OAuthModal
+            isOpen={showOAuthModal}
+            provider={providerId}
+            providerInfo={providerInfo}
+            onSuccess={handleOAuthSuccess}
+            onClose={() => setShowOAuthModal(false)}
+          />
+        )}
+
+        {/* Xiaomi Desktop: auto-import local credentials modal */}
+        <XiaomiMimoAuthModal
+          isOpen={showXiaomiMimoModal}
+          onSuccess={handleOAuthSuccess}
+          onClose={() => setShowXiaomiMimoModal(false)}
+        />
+        {providerId === "iflow" && (
+          <IFlowCookieModal
+            isOpen={showIFlowCookieModal}
+            onSuccess={handleIFlowCookieSuccess}
+            onClose={() => setShowIFlowCookieModal(false)}
+          />
+        )}
+      </Page>
+      <AddApiKeyModal
+        isOpen={showAddApiKeyModal}
+        provider={providerId}
+        providerName={providerInfo.name}
+        authType={providerInfo?.authType}
+        authHint={providerInfo?.authHint}
+        website={providerInfo?.website}
+        proxyPools={proxyPools}
+        error={addConnectionError}
+        onSave={handleSaveApiKey}
+        onClose={() => {
+          setAddConnectionError("");
+          setShowAddApiKeyModal(false);
+        }}
+      />
+      <EditConnectionModal
+        isOpen={showEditModal}
+        connection={selectedConnection}
+        proxyPools={proxyPools}
+        onSave={handleUpdateConnection}
+        onClose={() => setShowEditModal(false)}
+      />
+      {isCompatible && (
+        <EditCompatibleNodeModal
+          isOpen={showEditNodeModal}
+          node={providerNode}
+          onSave={handleUpdateNode}
+          onClose={() => setShowEditNodeModal(false)}
+          isAnthropic={isAnthropicCompatible}
+        />
+      )}
+      {!isCompatible && (
+        <AddCustomModelModal
+          isOpen={showAddCustomModel}
+          providerAlias={providerStorageAlias}
+          providerDisplayAlias={providerDisplayAlias}
+          onSave={async (modelId, caps) => {
+            await handleAddCustomModel(modelId, "llm", providerStorageAlias, caps);
+            setShowAddCustomModel(false);
+          }}
+          onClose={() => setShowAddCustomModel(false)}
+        />
+      )}
+
+      {providerId === "codex" && (
+        <BulkImportCodexModal
+          isOpen={showBulkImportCodex}
+          onClose={() => setShowBulkImportCodex(false)}
+          onSuccess={fetchConnections}
+        />
+      )}
+
+      {providerId === "grok-cli" && (
+        <BulkImportGrokCliModal
+          isOpen={showBulkImportGrokCli}
+          onClose={() => setShowBulkImportGrokCli(false)}
+          onSuccess={fetchConnections}
+        />
+      )}
+
+      {/* AG Risk Confirmation Modal */}
+      <ConfirmModal
+        isOpen={showAgRiskModal}
+        onClose={() => setShowAgRiskModal(false)}
+        onConfirm={handleAgRiskConfirm}
+        title="Risk Notice"
+        message={providerInfo?.deprecationNotice}
+        confirmText="I Understand, Continue"
+        cancelText="Cancel"
+        variant="danger"
+      />
+
+      {/* Confirm Modal */}
+      <ConfirmModal
+        isOpen={!!confirmState}
+        onClose={() => setConfirmState(null)}
+        onConfirm={confirmState?.onConfirm}
+        title={confirmState?.title || "Confirm"}
+        message={confirmState?.message}
+        variant="danger"
+      />
+    </>
+  );
+}