zevairouter 1.0.154 → 1.0.156

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

@@ -1,2170 +0,0 @@
-"use client";
-
-import { useState, useEffect, useCallback, useMemo, useRef } from "react";
-import { useParams, useRouter } from "next/navigation";
-import Link from "next/link";
-import Image from "next/image";
-import { Card, Button, Badge, Input, Modal, CardSkeleton, OAuthModal, KiroOAuthWrapper, CursorAuthModal, IFlowCookieModal, CodeBuddyQuotaCookieModal, GitLabAuthModal, Toggle, Select, EditConnectionModal, NoAuthProxyCard, ConfirmModal, Pagination } from "@/shared/components";
-import { OAUTH_PROVIDERS, APIKEY_PROVIDERS, FREE_PROVIDERS, FREE_TIER_PROVIDERS, WEB_COOKIE_PROVIDERS, getProviderAlias, isOpenAICompatibleProvider, isAnthropicCompatibleProvider, AI_PROVIDERS, THINKING_CONFIG, THINKING_LEVEL_PICKER_OPTIONS } from "@/shared/constants/providers";
-import { isAutomationProvider, automationHref } from "@/shared/constants/automationProviders";
-import { getModelsByProviderId } from "@/shared/constants/models";
-import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
-import { translate } from "@/i18n/runtime";
-import { fetchSuggestedModels } from "@/shared/utils/providerModelsFetcher";
-import { classifyConnectionStatus, CONNECTION_STATUS_FILTERS, filterConnectionByStatus } from "@/shared/utils/connectionStatus";
-import { startAsyncPolling } from "@/shared/utils/asyncPolling";
-import ModelRow from "./ModelRow";
-import PassthroughModelsSection from "./PassthroughModelsSection";
-import CompatibleModelsSection from "./CompatibleModelsSection";
-import ConnectionRow from "./ConnectionRow";
-import AddApiKeyModal from "./AddApiKeyModal";
-import EditCompatibleNodeModal from "./EditCompatibleNodeModal";
-import AddCustomModelModal from "./AddCustomModelModal";
-
-const ONE_BY_ONE_DELAY_MS = 1000;
-const KIRO_BULK_JOB_STORAGE_KEY = "kiro-bulk-import-active-job";
-const KIRO_BULK_JOB_EXPIRED_MESSAGE = "Bulk import progress expired or was cleared.";
-const CONNECTIONS_DEFAULT_PAGE_SIZE = 20;
-const MODELS_DEFAULT_PAGE_SIZE = 20;
-const PROVIDER_DETAIL_FETCH_TIMEOUT_MS = 8000;
-
-function sleep(ms) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
-function isBulkJobTerminal(status) {
-  return ["completed", "cancelled", "failed"].includes(status);
-}
-
-function isBulkJobActive(status) {
-  return ["queued", "running", "needs_manual"].includes(status);
-}
-
-async function fetchBulkJobById(jobId) {
-  if (!jobId) return null;
-  const res = await fetch(`/api/oauth/kiro/bulk-import/${jobId}`, { cache: "no-store" });
-  const data = await res.json();
-  return { res, data };
-}
-
-async function fetchLatestBulkJob(scope = "active") {
-  const res = await fetch(`/api/oauth/kiro/bulk-import/latest?scope=${encodeURIComponent(scope)}`, { cache: "no-store" });
-  const data = await res.json();
-  return { res, data };
-}
-
-async function fetchJsonWithTimeout(url) {
-  const controller = new AbortController();
-  const timeout = window.setTimeout(() => controller.abort(), PROVIDER_DETAIL_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 ProviderDetailPage() {
-  const params = useParams();
-  const router = useRouter();
-  const providerId = params.id;
-  const [connections, setConnections] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [providerNode, setProviderNode] = useState(null);
-  const [proxyPools, setProxyPools] = useState([]);
-  const [showOAuthModal, setShowOAuthModal] = useState(false);
-  const [showIFlowCookieModal, setShowIFlowCookieModal] = useState(false);
-  const [showCodeBuddyQuotaCookieModal, setShowCodeBuddyQuotaCookieModal] = useState(false);
-  const [showAddApiKeyModal, setShowAddApiKeyModal] = useState(false);
-  const [addConnectionError, setAddConnectionError] = useState("");
-  const [showEditModal, setShowEditModal] = useState(false);
-  const [showEditNodeModal, setShowEditNodeModal] = useState(false);
-  const [showBulkProxyModal, setShowBulkProxyModal] = useState(false);
-  const [selectedConnection, setSelectedConnection] = useState(null);
-  const [modelAliases, setModelAliases] = useState({});
-  const [headerImgError, setHeaderImgError] = useState(false);
-  const [modelTestResults, setModelTestResults] = useState({});
-  const [modelsTestError, setModelsTestError] = useState("");
-  const [testingModelId, setTestingModelId] = useState(null);
-  const [showAddCustomModel, setShowAddCustomModel] = useState(false);
-  const [selectedConnectionIds, setSelectedConnectionIds] = useState([]);
-  const [bulkProxyPoolId, setBulkProxyPoolId] = useState("__none__");
-  const [bulkUpdatingProxy, setBulkUpdatingProxy] = useState(false);
-  const [providerStrategy, setProviderStrategy] = useState(null);
-  const [providerStickyLimit, setProviderStickyLimit] = useState("");
-  const [thinkingMode, setThinkingMode] = useState("auto");
-  const [suggestedModels, setSuggestedModels] = useState([]);
-  const [kiloFreeModels, setKiloFreeModels] = useState([]);
-  const [disabledModelIds, setDisabledModelIds] = useState([]);
-  const [confirmState, setConfirmState] = useState(null);
-  const [showAgRiskModal, setShowAgRiskModal] = useState(false);
-  const [oneByOneRunning, setOneByOneRunning] = useState(false);
-  const [oneByOneStopping, setOneByOneStopping] = useState(false);
-  const [oneByOneCurrentConnectionId, setOneByOneCurrentConnectionId] = useState(null);
-  const [oneByOneResults, setOneByOneResults] = useState({});
-  const [oneByOneSummary, setOneByOneSummary] = useState(null);
-  const stopOneByOneRef = useRef(false);
-  const [importingQoderModels, setImportingQoderModels] = useState(false);
-  const [kiroBulkJob, setKiroBulkJob] = useState(null);
-  const [kiroBulkNotice, setKiroBulkNotice] = useState("");
-  const [connectionsPage, setConnectionsPage] = useState(1);
-  const [connectionsPageSize, setConnectionsPageSize] = useState(CONNECTIONS_DEFAULT_PAGE_SIZE);
-  const [connectionStatusFilter, setConnectionStatusFilter] = useState("all");
-  const [connectionQuery, setConnectionQuery] = useState("");
-  const [modelsPage, setModelsPage] = useState(1);
-  const [modelsPageSize, setModelsPageSize] = useState(MODELS_DEFAULT_PAGE_SIZE);
-  const { copied, copy } = useCopyToClipboard();
-  const kiroBulkSuccessRef = useRef(0);
-
-  const AG_RISK_STORAGE_KEY = "ag_risk_confirmed";
-
-  const clearKiroBulkProgress = useCallback(() => {
-    setKiroBulkJob(null);
-    setKiroBulkNotice("");
-    kiroBulkSuccessRef.current = 0;
-
-    if (typeof window !== "undefined") {
-      window.localStorage.removeItem(KIRO_BULK_JOB_STORAGE_KEY);
-    }
-  }, []);
-
-  const openOAuthConnection = () => {
-    setShowOAuthModal(true);
-  };
-
-  const openProviderAutomation = () => {
-    if (providerId === "kiro" && kiroBulkJob?.jobId && isBulkJobTerminal(kiroBulkJob.status)) {
-      clearKiroBulkProgress();
-    }
-    router.push(automationHref(providerId));
-  };
-
-  const triggerOAuthConnection = () => {
-    // Bulk / device-flow automation hubs (Kiro, AG, Grok CLI, CodeBuddy, …)
-    if (isAutomationProvider(providerId)) {
-      if (providerId === "antigravity" && typeof window !== "undefined") {
-        const confirmed = window.localStorage.getItem(AG_RISK_STORAGE_KEY) === "true";
-        if (!confirmed) {
-          setShowAgRiskModal(true);
-          return;
-        }
-      }
-      openProviderAutomation();
-      return;
-    }
-    if (providerId === "antigravity" && typeof window !== "undefined") {
-      const confirmed = window.localStorage.getItem(AG_RISK_STORAGE_KEY) === "true";
-      if (!confirmed) {
-        setShowAgRiskModal(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);
-    // AG primary add path is bulk automation hub (same as other bulk providers).
-    if (isAutomationProvider("antigravity")) {
-      router.push(automationHref("antigravity"));
-      return;
-    }
-    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 models = getModelsByProviderId(providerId);
-  const providerAlias = getProviderAlias(providerId);
-  
-  const isOpenAICompatible = isOpenAICompatibleProvider(providerId);
-  const isAnthropicCompatible = isAnthropicCompatibleProvider(providerId);
-  const isCompatible = isOpenAICompatible || isAnthropicCompatible;
-  const hasDualAuthModes = !isCompatible && isOAuth && supportsApiKeyAuth;
-  // Match /dashboard/automation panels: kiro, codebuddy, codebuddy-cn, qoder, antigravity, autoclaw, grok-cli
-  const usesAutomationLogin = isAutomationProvider(providerId);
-  const oauthConnectionLabel = providerId === "xai" ? "Grok Build OAuth" : "OAuth";
-  const apiKeyConnectionLabel = providerId === "xai" ? "xAI API Key" : "API Key";
-  const thinkingConfig = AI_PROVIDERS[providerId]?.thinkingConfig || THINKING_CONFIG.extended;
-  
-  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);
-    }
-  }, []);
-
-  // 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 [connectionsResult, nodesResult, proxyPoolsResult, settingsResult] = await Promise.allSettled([
-        fetchJsonWithTimeout("/api/providers"),
-        fetchJsonWithTimeout("/api/provider-nodes"),
-        fetchJsonWithTimeout("/api/proxy-pools?isActive=true"),
-        fetchJsonWithTimeout("/api/settings"),
-      ]);
-
-      const connectionsRes = connectionsResult.status === "fulfilled" ? connectionsResult.value.response : null;
-      const connectionsData = connectionsResult.status === "fulfilled" ? connectionsResult.value.data : {};
-      const nodesRes = nodesResult.status === "fulfilled" ? nodesResult.value.response : null;
-      const nodesData = nodesResult.status === "fulfilled" ? nodesResult.value.data : {};
-      const proxyPoolsRes = proxyPoolsResult.status === "fulfilled" ? proxyPoolsResult.value.response : null;
-      const proxyPoolsData = proxyPoolsResult.status === "fulfilled" ? proxyPoolsResult.value.data : {};
-      const settingsRes = settingsResult.status === "fulfilled" ? settingsResult.value.response : null;
-      const settingsData = settingsRes?.ok ? (settingsResult.value.data || {}) : {};
-
-      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");
-      // Load per-provider thinking config
-      const thinkingCfg = (settingsData.providerThinking || {})[providerId] || {};
-      setThinkingMode(thinkingCfg.mode || "auto");
-      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 { response: retryRes, data: retryData } = await fetchJsonWithTimeout("/api/provider-nodes");
-            if (!retryRes.ok) continue;
-            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 = {};
-      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 saveThinkingConfig = async (mode) => {
-    try {
-      const settingsRes = await fetch("/api/settings", { cache: "no-store" });
-      const settingsData = settingsRes.ok ? await settingsRes.json() : {};
-      const current = settingsData.providerThinking || {};
-      const updated = { ...current };
-      if (!mode || mode === "auto") {
-        delete updated[providerId];
-      } else {
-        updated[providerId] = { mode };
-      }
-      await fetch("/api/settings", {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ providerThinking: updated }),
-      });
-    } catch (error) {
-      console.log("Error saving thinking config:", error);
-    }
-  };
-
-  const handleThinkingModeChange = (mode) => {
-    setThinkingMode(mode);
-    saveThinkingConfig(mode);
-  };
-
-  useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect -- mount data fetch; these set state only after await, which the rule flags conservatively
-    fetchConnections();
-    fetchAliases();
-    fetchDisabledModels();
-  }, [fetchConnections, fetchAliases, fetchDisabledModels]);
-
-  useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect -- reset-on-prop-change: clears paging/filters when switching provider pages
-    setConnectionsPage(1);
-    setModelsPage(1);
-    setConnectionStatusFilter("all");
-    setConnectionQuery("");
-  }, [providerId]);
-
-  useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect -- pagination reset: returns to page 1 when filters/page size change
-    setConnectionsPage(1);
-  }, [connectionStatusFilter, connectionsPageSize, connectionQuery]);
-
-  useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect -- pagination reset: returns to page 1 when the model lists change
-    setModelsPage(1);
-  }, [modelsPageSize, disabledModelIds.length, models.length, kiloFreeModels.length]);
-
-  useEffect(() => {
-    if (providerId !== "kiro" || typeof window === "undefined") return;
-    const storedJobId = window.localStorage.getItem(KIRO_BULK_JOB_STORAGE_KEY);
-
-    let cancelled = false;
-
-    const restoreJob = async () => {
-      try {
-        setKiroBulkNotice("");
-
-        if (kiroBulkJob?.jobId) return;
-
-        const latest = await fetchLatestBulkJob();
-        if (!cancelled && latest.res.ok && latest.data?.job) {
-          setKiroBulkJob(latest.data.job);
-          kiroBulkSuccessRef.current = latest.data.job.summary?.success || 0;
-          window.localStorage.setItem(KIRO_BULK_JOB_STORAGE_KEY, latest.data.job.jobId);
-          return;
-        }
-
-        if (storedJobId) {
-          const direct = await fetchBulkJobById(storedJobId);
-          if (!cancelled && direct?.res.ok && direct.data?.job && isBulkJobActive(direct.data.job.status)) {
-            setKiroBulkJob(direct.data.job);
-            kiroBulkSuccessRef.current = direct.data.job.summary?.success || 0;
-            return;
-          }
-
-          clearKiroBulkProgress();
-          setKiroBulkNotice(KIRO_BULK_JOB_EXPIRED_MESSAGE);
-        }
-      } catch {
-        if (!cancelled) {
-          setKiroBulkNotice(KIRO_BULK_JOB_EXPIRED_MESSAGE);
-        }
-      }
-    };
-
-    void restoreJob();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [clearKiroBulkProgress, kiroBulkJob?.jobId, providerId]);
-
-  useEffect(() => {
-    if (providerId !== "kiro" || !kiroBulkJob?.jobId || isBulkJobTerminal(kiroBulkJob.status)) return undefined;
-
-    return startAsyncPolling(async (isCancelled) => {
-      const current = await fetchBulkJobById(kiroBulkJob.jobId);
-      if (isCancelled()) return;
-      if (current?.res.ok && current.data?.job) {
-        const nextSuccessCount = current.data.job.summary?.success || 0;
-        if (nextSuccessCount > kiroBulkSuccessRef.current) {
-          kiroBulkSuccessRef.current = nextSuccessCount;
-          await fetchConnections();
-          if (isCancelled()) return;
-        }
-
-        setKiroBulkNotice("");
-        setKiroBulkJob(current.data.job);
-        return;
-      }
-
-      if (current?.res.status === 404) {
-        const latest = await fetchLatestBulkJob();
-        if (isCancelled()) return;
-        if (latest.res.ok && latest.data?.job) {
-          const nextSuccessCount = latest.data.job.summary?.success || 0;
-          if (nextSuccessCount > kiroBulkSuccessRef.current) {
-            kiroBulkSuccessRef.current = nextSuccessCount;
-            await fetchConnections();
-            if (isCancelled()) return;
-          }
-
-          setKiroBulkNotice("");
-          setKiroBulkJob(latest.data.job);
-          if (typeof window !== "undefined") {
-            window.localStorage.setItem(KIRO_BULK_JOB_STORAGE_KEY, latest.data.job.jobId);
-          }
-          return;
-        }
-
-        clearKiroBulkProgress();
-        setKiroBulkNotice(KIRO_BULK_JOB_EXPIRED_MESSAGE);
-      }
-    }, 2000);
-  }, [clearKiroBulkProgress, fetchConnections, kiroBulkJob?.jobId, kiroBulkJob?.status, providerId]);
-
-  // 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);
-    }
-  };
-
-  // 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 fullModel = `${providerStorageAlias}/${cleanModelId}`;
-        
-        // Check if already exists
-        if (Object.values(modelAliases).includes(fullModel)) {
-          continue;
-        }
-        
-        // Use model ID as alias
-        const alias = cleanModelId;
-        if (modelAliases[alias]) {
-          continue;
-        }
-        
-        await handleSetAlias(cleanModelId, alias, 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 handleRunOneByOneTest = async () => {
-    if (oneByOneRunning || connections.length === 0) return;
-
-    const queuedState = Object.fromEntries(
-      connections.map((connection) => [connection.id, { state: "queued", error: null }]),
-    );
-
-    stopOneByOneRef.current = false;
-    setOneByOneRunning(true);
-    setOneByOneStopping(false);
-    setOneByOneCurrentConnectionId(null);
-    setOneByOneResults(queuedState);
-    setOneByOneSummary({ total: connections.length, completed: 0, passed: 0, failed: 0, stopped: false });
-
-    let passed = 0;
-    let failed = 0;
-
-    try {
-      for (let index = 0; index < connections.length; index += 1) {
-        if (stopOneByOneRef.current) {
-          setOneByOneSummary({
-            total: connections.length,
-            completed: index,
-            passed,
-            failed,
-            stopped: true,
-          });
-          break;
-        }
-
-        const connection = connections[index];
-        setOneByOneCurrentConnectionId(connection.id);
-        setOneByOneResults((prev) => ({
-          ...prev,
-          [connection.id]: { state: "testing", error: null },
-        }));
-
-        try {
-          const res = await fetch(`/api/providers/${connection.id}/test`, { method: "POST" });
-          const data = await res.json();
-          const valid = !!data.valid;
-
-          if (valid) {
-            passed += 1;
-          } else {
-            failed += 1;
-          }
-
-          setOneByOneResults((prev) => ({
-            ...prev,
-            [connection.id]: {
-              state: valid ? "success" : "failed",
-              error: valid ? null : (data.error || null),
-            },
-          }));
-        } catch (error) {
-          failed += 1;
-          setOneByOneResults((prev) => ({
-            ...prev,
-            [connection.id]: {
-              state: "failed",
-              error: error.message || "Test failed",
-            },
-          }));
-        }
-
-        setOneByOneSummary({
-          total: connections.length,
-          completed: index + 1,
-          passed,
-          failed,
-          stopped: false,
-        });
-
-        if (index < connections.length - 1) {
-          await sleep(ONE_BY_ONE_DELAY_MS);
-        }
-      }
-    } finally {
-      setOneByOneCurrentConnectionId(null);
-      setOneByOneRunning(false);
-      setOneByOneStopping(false);
-      stopOneByOneRef.current = false;
-    }
-  };
-
-  const handleStopOneByOneTest = () => {
-    if (!oneByOneRunning) return;
-    stopOneByOneRef.current = true;
-    setOneByOneStopping(true);
-  };
-
-  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(connections.filter(c => c.id !== id));
-          }
-        } catch (error) {
-          console.log("Error deleting connection:", error);
-        }
-      }
-    });
-  };
-
-  const handleOAuthSuccess = () => {
-    fetchConnections();
-    setShowOAuthModal(false);
-  };
-
-  const handleKiroBulkJobChange = useCallback((job) => {
-    setKiroBulkJob(job);
-    setKiroBulkNotice("");
-
-    if (typeof window === "undefined") return;
-
-    if (!job?.jobId) {
-      clearKiroBulkProgress();
-      return;
-    }
-
-    window.localStorage.setItem(KIRO_BULK_JOB_STORAGE_KEY, job.jobId);
-    kiroBulkSuccessRef.current = Math.max(
-      kiroBulkSuccessRef.current,
-      job.summary?.success || 0,
-    );
-  }, [clearKiroBulkProgress]);
-
-  const handleIFlowCookieSuccess = () => {
-    fetchConnections();
-    setShowIFlowCookieModal(false);
-  };
-
-  const handleCodeBuddyQuotaCookieSuccess = () => {
-    fetchConnections();
-    setShowCodeBuddyQuotaCookieModal(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 + 1 }),
-        }),
-        fetch(`/api/providers/${newConnections[index2].id}`, {
-          method: "PUT",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ priority: index2 + 1 }),
-        }),
-      ]);
-    } catch (error) {
-      console.log("Error swapping priority:", error);
-      await fetchConnections();
-    }
-  };
-
-  const filteredConnections = useMemo(() => {
-    const q = connectionQuery.trim().toLowerCase();
-    return connections.filter((conn) => {
-      if (!filterConnectionByStatus(conn, connectionStatusFilter)) return false;
-      if (!q) return true;
-      const hay = [
-        conn.name,
-        conn.email,
-        conn.id,
-        conn.account,
-        conn.username,
-        conn.label,
-        conn.authType,
-        conn.notes,
-        conn.proxyPoolId,
-      ]
-        .filter(Boolean)
-        .join(" ")
-        .toLowerCase();
-      return hay.includes(q);
-    });
-  }, [connections, connectionStatusFilter, connectionQuery]);
-
-  const connectionStatusCounts = useMemo(() => (
-    CONNECTION_STATUS_FILTERS.reduce((acc, filter) => {
-      acc[filter.id] = filter.id === "all"
-        ? connections.length
-        : connections.filter((conn) => filterConnectionByStatus(conn, filter.id)).length;
-      return acc;
-    }, {})
-  ), [connections]);
-  const effectiveSelectedConnectionIds = selectedConnectionIds.filter((id) => connections.some((conn) => conn.id === id));
-  const selectedConnections = connections.filter((conn) => effectiveSelectedConnectionIds.includes(conn.id));
-  const codeBuddyQuotaCookieConnectionIds = providerId === "codebuddy"
-    ? (selectedConnections.length > 0 ? selectedConnections : connections).map((conn) => conn.id)
-    : [];
-  const allSelected = filteredConnections.length > 0 && filteredConnections.every((conn) => effectiveSelectedConnectionIds.includes(conn.id));
-
-  const openCodeBuddyQuotaCookieModal = () => {
-    if (connections.length > 1 && selectedConnections.length === 0) {
-      alert("Select the CodeBuddy connection(s) that should use this quota cookie first.");
-      return;
-    }
-    setShowCodeBuddyQuotaCookieModal(true);
-  };
-
-  const toggleSelectConnection = (connectionId) => {
-    setSelectedConnectionIds((prev) => (
-      prev.includes(connectionId)
-        ? prev.filter((id) => id !== connectionId)
-        : [...prev, connectionId]
-    ));
-  };
-
-  const toggleSelectAllConnections = () => {
-    if (allSelected) {
-      setSelectedConnectionIds((prev) => prev.filter((id) => !filteredConnections.some((conn) => conn.id === id)));
-      return;
-    }
-    setSelectedConnectionIds((prev) => Array.from(new Set([...prev, ...filteredConnections.map((conn) => conn.id)])));
-  };
-
-  const clearSelection = () => {
-    setSelectedConnectionIds([]);
-    setBulkProxyPoolId("__none__");
-  };
-
-  const selectedProxySummary = (() => {
-    if (selectedConnections.length === 0) return "";
-    const poolIds = new Set(selectedConnections.map((conn) => conn.providerSpecificData?.proxyPoolId || "__none__"));
-    if (poolIds.size === 1) {
-      const onlyId = [...poolIds][0];
-      if (onlyId === "__none__") return "All selected currently unbound";
-      const pool = proxyPools.find((p) => p.id === onlyId);
-      return `All selected currently bound to ${pool?.name || onlyId}`;
-    }
-    return "Selected connections have mixed proxy bindings";
-  })();
-
-  const openBulkProxyModal = () => {
-    if (selectedConnections.length === 0) return;
-    const uniquePoolIds = [...new Set(selectedConnections.map((conn) => conn.providerSpecificData?.proxyPoolId || "__none__"))];
-    setBulkProxyPoolId(uniquePoolIds.length === 1 ? uniquePoolIds[0] : "__none__");
-    setShowBulkProxyModal(true);
-  };
-
-  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 = selectedConnections.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 = selectedConnections.map((c, i) => ({
-      connectionId: c.id,
-      proxyPoolId: activePools[i % activePools.length].id,
-    }));
-    return applyProxyAssignments(targets);
-  };
-
-  const handleDeleteSelectedConnections = () => {
-    if (selectedConnections.length === 0) return;
-    setConfirmState({
-      title: "Delete Selected Connections",
-      message: `Delete ${selectedConnections.length} selected connection(s)? This permanently removes the selected accounts.`,
-      onConfirm: async () => {
-        setConfirmState(null);
-        for (const conn of selectedConnections) {
-          try {
-            await fetch(`/api/providers/${conn.id}`, { method: "DELETE" });
-          } catch (error) {
-            console.log("Error deleting selected connection:", error);
-          }
-        }
-        setSelectedConnectionIds((prev) => prev.filter((id) => !selectedConnections.some((conn) => conn.id === id)));
-        await fetchConnections();
-      },
-    });
-  };
-
-  const handleBulkDeleteByEmail = (emailFilter) => {
-    const label = emailFilter === "gsuite" ? "GSuite (non-Gmail)" : "Gmail (@gmail.com)";
-    setConfirmState({
-      title: `Delete ${label}`,
-      message: `Delete ALL ${label} accounts for this provider? This cannot be undone.`,
-      onConfirm: async () => {
-        setConfirmState(null);
-        try {
-          const res = await fetch("/api/providers/bulk-delete", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ provider: providerInfo?.id || providerId, emailFilter }),
-          });
-          if (res.ok) {
-            setSelectedConnectionIds([]);
-            await fetchConnections();
-          }
-        } catch (e) { console.error("bulk delete error:", e); }
-      },
-    });
-  };
-
-  const isSelected = (connectionId) => effectiveSelectedConnectionIds.includes(connectionId);
-
-  const totalConnectionPages = Math.max(1, Math.ceil(filteredConnections.length / connectionsPageSize));
-  const activeConnectionsPage = Math.min(connectionsPage, totalConnectionPages);
-  const paginatedConnections = filteredConnections.slice(
-    (activeConnectionsPage - 1) * connectionsPageSize,
-    activeConnectionsPage * connectionsPageSize
-  );
-  const totalKiroPages = totalConnectionPages;
-  const activeKiroConnectionsPage = activeConnectionsPage;
-  const kiroConnectionsPage = activeConnectionsPage;
-  const KIRO_CONNECTIONS_PER_PAGE = connectionsPageSize;
-  const setKiroConnectionsPage = setConnectionsPage;
-
-  const connectionsList = (
-    <div className="flex min-w-0 flex-col divide-y divide-black/[0.03] dark:divide-white/[0.03]">
-      {paginatedConnections
-        .map((conn, index) => {
-          const globalIndex = connections.findIndex((item) => item.id === conn.id);
-          return (
-          <div key={conn.id} className="flex min-w-0 items-stretch">
-            <label className="flex w-8 shrink-0 items-center justify-center">
-              <input
-                type="checkbox"
-                checked={isSelected(conn.id)}
-                onChange={() => toggleSelectConnection(conn.id)}
-                className="size-4 rounded border-black/20 dark:border-white/20"
-                aria-label={`Select ${conn.name || conn.email || conn.id}`}
-              />
-            </label>
-            <div className="flex-1 min-w-0">
-              <ConnectionRow
-                connection={conn}
-                proxyPools={proxyPools}
-                isOAuth={isOAuth}
-                isFirst={globalIndex === 0}
-                isLast={globalIndex === connections.length - 1}
-                onMoveUp={() => handleSwapPriority(globalIndex, globalIndex - 1)}
-                onMoveDown={() => handleSwapPriority(globalIndex, globalIndex + 1)}
-                onToggleActive={(isActive) => handleUpdateConnectionStatus(conn.id, isActive)}
-                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 = (
-    <Modal
-      isOpen={showBulkProxyModal}
-      onClose={closeBulkProxyModal}
-      title={`Apply Proxy (${selectedConnections.length} selected)`}
-    >
-      <div className="flex flex-col gap-3">
-        <div className="flex flex-col">
-          <button
-            onClick={handleApplyOneToOne}
-            disabled={bulkUpdatingProxy || activePools.length === 0}
-            className="flex items-center gap-2 rounded-lg px-3 py-2 text-left transition-colors hover:bg-black/[0.04] dark:hover:bg-white/[0.04] disabled:cursor-not-allowed disabled:opacity-50"
-          >
-            <span className="material-symbols-outlined text-text-muted text-[18px]">sync_alt</span>
-            <span className="text-sm text-text-main">One-to-one (rotate)</span>
-          </button>
-          <button
-            onClick={() => handleApplySinglePool(null)}
-            disabled={bulkUpdatingProxy}
-            className="flex items-center gap-2 rounded-lg px-3 py-2 text-left transition-colors hover:bg-black/[0.04] dark:hover:bg-white/[0.04] disabled:cursor-not-allowed disabled:opacity-50"
-          >
-            <span className="material-symbols-outlined text-text-muted text-[18px]">link_off</span>
-            <span className="text-sm text-text-main">None (unbind all)</span>
-          </button>
-          {proxyPools.map((pool) => (
-            <button
-              key={pool.id}
-              onClick={() => handleApplySinglePool(pool.id)}
-              disabled={bulkUpdatingProxy || pool.isActive !== true}
-              className="flex items-center gap-2 rounded-lg px-3 py-2 text-left transition-colors hover:bg-black/[0.04] dark:hover:bg-white/[0.04] disabled:cursor-not-allowed disabled:opacity-50"
-            >
-              <span className="material-symbols-outlined text-text-muted text-[18px]">lan</span>
-              <span className="truncate text-sm text-text-main">{pool.name}</span>
-              {pool.isActive !== true && (
-                <span className="text-[10px] text-text-muted">(inactive)</span>
-              )}
-            </button>
-          ))}
-        </div>
-
-        {bulkUpdatingProxy && <p className="text-xs text-text-muted">Applying...</p>}
-
-        <Button onClick={closeBulkProxyModal} variant="ghost" fullWidth disabled={bulkUpdatingProxy}>
-          Cancel
-        </Button>
-      </div>
-    </Modal>
-  );
-
-  const handleTestModel = async (modelId) => {
-    if (testingModelId) return;
-    setTestingModelId(modelId);
-    try {
-      const res = await fetch("/api/models/test", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ model: `${providerStorageAlias}/${modelId}` }),
-      });
-      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 {
-      setTestingModelId(null);
-    }
-  };
-
-  const renderModelsSection = () => {
-    if (isCompatible) {
-      return (
-        <CompatibleModelsSection
-          providerStorageAlias={providerStorageAlias}
-          providerDisplayAlias={providerDisplayAlias}
-          modelAliases={modelAliases}
-          copied={copied}
-          onCopy={copy}
-          onSetAlias={handleSetAlias}
-          onDeleteAlias={handleDeleteAlias}
-          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) => !m.type || m.type === "llm");
-    const disabledSet = new Set(disabledModelIds);
-    const displayModels = allModels.filter((m) => !disabledSet.has(m.id));
-    const disabledDisplayModels = allModels.filter((m) => disabledSet.has(m.id));
-    // Custom models added by user (stored as aliases: modelId → providerAlias/modelId)
-    const customModels = Object.entries(modelAliases)
-      .filter(([alias, fullModel]) => {
-        const prefix = `${providerStorageAlias}/`;
-        if (!fullModel.startsWith(prefix)) return false;
-        const modelId = fullModel.slice(prefix.length);
-        // Only show if not already in hardcoded list
-        // For passthroughModels, include all aliases (model IDs may contain slashes like "anthropic/claude-3")
-        if (providerInfo.passthroughModels) return !models.some((m) => m.id === modelId);
-        return !models.some((m) => m.id === modelId) && alias === modelId;
-      })
-      .map(([alias, fullModel]) => ({
-        id: fullModel.slice(`${providerStorageAlias}/`.length),
-        alias,
-        fullModel,
-      }));
-    const totalModelPages = Math.max(1, Math.ceil(displayModels.length / modelsPageSize));
-    const activeModelsPage = Math.min(modelsPage, totalModelPages);
-    const paginatedDisplayModels = displayModels.slice(
-      (activeModelsPage - 1) * modelsPageSize,
-      activeModelsPage * modelsPageSize
-    );
-
-    return (
-      <div className="flex flex-wrap gap-3">
-        {/* Custom models first */}
-        {customModels.map((model) => (
-          <ModelRow
-            key={model.id}
-            model={{ id: model.id }}
-            fullModel={`${providerDisplayAlias}/${model.id}`}
-            alias={model.alias}
-            copied={copied}
-            onCopy={copy}
-            onSetAlias={() => {}}
-            onDeleteAlias={() => handleDeleteAlias(model.alias)}
-            testStatus={modelTestResults[model.id]}
-            onTest={connections.length > 0 || isFreeNoAuth ? () => handleTestModel(model.id) : undefined}
-            isTesting={testingModelId === model.id}
-            isCustom
-            isFree={false}
-            thinkingSuffix={thinkingMode && thinkingMode !== "auto" && thinkingMode !== "off" && thinkingMode !== "none" ? thinkingMode : null}
-          />
-        ))}
-
-        {paginatedDisplayModels.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) : undefined}
-              isTesting={testingModelId === model.id}
-              isFree={model.isFree}
-              onDisable={() => handleDisableModel(model.id)}
-              thinkingSuffix={thinkingMode && thinkingMode !== "auto" && thinkingMode !== "off" && thinkingMode !== "none" ? thinkingMode : null}
-            />
-          );
-        })}
-
-        {/* Add model button — inline, same style as model chips */}
-        {displayModels.length > modelsPageSize && (
-          <div className="w-full">
-            <Pagination
-              currentPage={activeModelsPage}
-              pageSize={modelsPageSize}
-              totalItems={displayModels.length}
-              onPageChange={setModelsPage}
-              onPageSizeChange={(size) => {
-                setModelsPageSize(size);
-                setModelsPage(1);
-              }}
-            />
-          </div>
-        )}
-
-        <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"
-        >
-          <span className="material-symbols-outlined text-sm">add</span>
-          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"
-          >
-            <span className="material-symbols-outlined text-sm" style={importingQoderModels ? { animation: "spin 1s linear infinite" } : undefined}>
-              {importingQoderModels ? "progress_activity" : "download"}
-            </span>
-            {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));
-          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-text-muted mb-2">Suggested free models (≥200k context):</p>
-              <div className="flex flex-wrap gap-2">
-                {notAdded.map((m) => (
-                  <button
-                    key={m.id}
-                    onClick={async () => {
-                      const alias = m.id.split("/").pop();
-                      await handleSetAlias(m.id, alias, 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-text-muted hover:text-primary hover:border-primary/40 hover:bg-primary/5 transition-colors"
-                    title={`${m.name} · ${(m.contextLength / 1000).toFixed(0)}k ctx`}
-                  >
-                    <span className="material-symbols-outlined text-[13px]">add</span>
-                    {m.id.split("/").pop()}
-                  </button>
-                ))}
-              </div>
-            </div>
-          );
-        })()}
-
-        {/* Disabled models — restorable */}
-        {disabledDisplayModels.length > 0 && (
-          <div className="w-full mt-2">
-            <p className="text-xs text-text-muted mb-2">Disabled models ({disabledDisplayModels.length}):</p>
-            <div className="flex flex-wrap gap-2">
-              {disabledDisplayModels.map((m) => (
-                <button
-                  key={m.id}
-                  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-text-muted hover:text-primary hover:border-primary/40 hover:bg-primary/5 transition-colors"
-                  title="Restore model"
-                >
-                  <span className="material-symbols-outlined text-[13px]">add</span>
-                  {m.id}
-                </button>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-    );
-  };
-
-  if (loading) {
-    return (
-      <div className="flex flex-col gap-8">
-        <CardSkeleton />
-        <CardSkeleton />
-      </div>
-    );
-}
-
-  if (!providerInfo) {
-    return (
-      <div className="text-center py-20">
-        <p className="text-text-muted">Provider not found</p>
-        <Link href="/dashboard/providers" className="text-primary mt-4 inline-block">
-          Back to Providers
-        </Link>
-      </div>
-    );
-  }
-
-  // Determine icon path: OpenAI Compatible providers use specialized icons
-  const getHeaderIconPath = () => {
-    if (isOpenAICompatible && providerInfo.apiType) {
-      return providerInfo.apiType === "responses" ? "/providers/oai-r.png" : "/providers/oai-cc.png";
-    }
-    if (isAnthropicCompatible) {
-      return "/providers/anthropic-m.png";
-    }
-    return `/providers/${providerInfo.id}.png`;
-  };
-
-  return (
-    <div className="flex min-w-0 flex-col gap-6 px-1 sm:gap-8 sm:px-0">
-      {/* Header */}
-      <div className="min-w-0">
-        <Link
-          href="/dashboard/providers"
-          className="inline-flex items-center gap-1 text-sm text-text-muted hover:text-primary transition-colors mb-4"
-        >
-          <span className="material-symbols-outlined text-lg">arrow_back</span>
-          Back to Providers
-        </Link>
-        <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 ? (
-              <span className="text-sm font-bold" style={{ color: providerInfo.color }}>
-                {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={() => setHeaderImgError(true)}
-              />
-            )}
-          </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"
-                >
-                  <span className="material-symbols-outlined text-sm">open_in_new</span>
-                  {providerInfo.notice?.apiKeyUrl ? "Get API Key" : "Sign up / Learn more"}
-                </a>
-              )}
-            </div>
-            <p className="text-text-muted">
-              {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">
-          <span className="material-symbols-outlined text-[16px] text-yellow-500 mt-0.5 shrink-0">warning</span>
-          <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">
-          <span className="material-symbols-outlined text-[16px] text-blue-500 shrink-0">info</span>
-          <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>
-          <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-text-muted">
-                {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"
-                icon="add"
-                onClick={() => {
-                  setAddConnectionError("");
-                  setShowAddApiKeyModal(true);
-                }}
-                className="w-full sm:w-auto"
-              >
-                Add API Key
-              </Button>
-              <Button
-                size="sm"
-                variant="secondary"
-                icon="edit"
-                onClick={() => setShowEditNodeModal(true)}
-                className="w-full sm:w-auto"
-              >
-                Edit
-              </Button>
-              <Button
-                size="sm"
-                variant="secondary"
-                icon="delete"
-                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"
-              >
-                Delete
-              </Button>
-            </div>
-          </div>
-        </Card>
-      )}
-
-      {/* Connections */}
-      {isFreeNoAuth ? (
-        <NoAuthProxyCard providerId={providerId} />
-      ) : (
-        <Card>
-          <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"
-                  icon="lan"
-                  onClick={openBulkProxyModal}
-                  disabled={selectedConnections.length === 0}
-                >
-                  Apply Proxy
-                </Button>
-              )}
-              {connections.length > 0 && (
-                <>
-                  <Button
-                    size="sm"
-                    variant="secondary"
-                    icon="sync"
-                    onClick={handleRunOneByOneTest}
-                    disabled={oneByOneRunning}
-                  >
-                    {oneByOneRunning ? "Testing Connection One-by-One..." : "Test Connection One-by-One"}
-                  </Button>
-                  {oneByOneRunning && (
-                    <Button
-                      size="sm"
-                      variant="ghost"
-                      icon="stop"
-                      onClick={handleStopOneByOneTest}
-                      disabled={oneByOneStopping}
-                    >
-                      {oneByOneStopping ? "Stopping..." : "Stop"}
-                    </Button>
-                  )}
-                </>
-              )}
-              {/* Thinking level picker — injects providerThinking + suffixes model copy as model(level) */}
-              <div className="flex items-center gap-2">
-                <span className="text-xs text-text-muted font-medium">Thinking</span>
-                <select
-                  value={thinkingMode}
-                  onChange={(e) => handleThinkingModeChange(e.target.value)}
-                  className="text-xs px-2 py-1 border border-border rounded-md bg-background focus:outline-none focus:border-primary"
-                  title="Forces reasoning_effort on requests; model chips copy as alias/model(level)"
-                >
-                  {(thinkingConfig?.options || THINKING_LEVEL_PICKER_OPTIONS).map((opt) => (
-                    <option key={opt} value={opt}>{opt.charAt(0).toUpperCase() + opt.slice(1)}</option>
-                  ))}
-                </select>
-              </div>
-              {/* Round Robin toggle */}
-              <div className="flex flex-wrap items-center gap-2">
-                <span className="text-xs text-text-muted font-medium">Round Robin</span>
-                <Toggle
-                  checked={providerStrategy === "round-robin"}
-                  onChange={handleRoundRobinToggle}
-                />
-                {providerStrategy === "round-robin" && (
-                  <div className="flex items-center gap-1.5">
-                    <span className="text-xs text-text-muted">Sticky:</span>
-                    <input
-                      type="number"
-                      min={1}
-                      value={providerStickyLimit}
-                      onChange={(e) => 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="mb-4 flex flex-col gap-3 rounded-lg border border-black/5 bg-black/[0.02] p-3 dark:border-white/5 dark:bg-white/[0.02]">
-              <div className="flex flex-wrap items-center gap-2">
-                <label className="flex items-center gap-1.5 text-xs text-text-muted">
-                  <input
-                    type="checkbox"
-                    checked={allSelected}
-                    onChange={toggleSelectAllConnections}
-                    className="size-4 rounded border-black/20 dark:border-white/20"
-                  />
-                  {allSelected ? "Unselect visible" : "Select visible"}
-                </label>
-                <Badge variant="default">{filteredConnections.length} visible</Badge>
-                {selectedConnections.length > 0 && (
-                  <Badge variant="default">{selectedConnections.length} selected</Badge>
-                )}
-                {selectedProxySummary && (
-                  <span className="text-xs text-text-muted">{selectedProxySummary}</span>
-                )}
-                {selectedConnections.length > 0 && (
-                  <Button size="sm" variant="ghost" onClick={clearSelection}>
-                    Clear
-                  </Button>
-                )}
-                {selectedConnections.length > 0 && (
-                  <>
-                    <Button
-                      size="sm"
-                      variant="secondary"
-                      icon="delete"
-                      onClick={handleDeleteSelectedConnections}
-                    >
-                      Delete Selected ({selectedConnections.length})
-                    </Button>
-                    <Button
-                      size="sm"
-                      variant="secondary"
-                      icon="domain"
-                      onClick={() => handleBulkDeleteByEmail("gsuite")}
-                    >
-                      Delete GSuite
-                    </Button>
-                    <Button
-                      size="sm"
-                      variant="secondary"
-                      icon="mail"
-                      onClick={() => handleBulkDeleteByEmail("gmail")}
-                    >
-                      Delete Gmail
-                    </Button>
-                  </>
-                )}
-              </div>
-              <div className="flex flex-wrap gap-1.5">
-                {CONNECTION_STATUS_FILTERS.map((filter) => (
-                  <button
-                    key={filter.id}
-                    type="button"
-                    onClick={() => setConnectionStatusFilter(filter.id)}
-                    className={`rounded-full border px-2.5 py-1 text-xs transition-colors ${
-                      connectionStatusFilter === filter.id
-                        ? "border-primary/50 bg-primary/10 text-primary"
-                        : "border-border text-text-muted hover:border-primary/30 hover:text-text-main"
-                    }`}
-                  >
-                    {filter.label}
-                    <span className="ml-1 text-[10px] opacity-70">{connectionStatusCounts[filter.id] || 0}</span>
-                  </button>
-                ))}
-              </div>
-              {connections.length >= 20 && (
-                <div className="relative">
-                  <span className="material-symbols-outlined pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-[16px] text-text-subtle">
-                    search
-                  </span>
-                  <input
-                    type="search"
-                    value={connectionQuery}
-                    onChange={(e) => setConnectionQuery(e.target.value)}
-                    placeholder={`Search ${connections.length} connections (email, name, id)…`}
-                    className="w-full rounded-lg border border-border bg-background py-2 pl-8 pr-3 text-xs text-text-main outline-none placeholder:text-text-subtle focus:border-primary/40"
-                  />
-                </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">
-                    <span className="material-symbols-outlined text-[18px]">{isOAuth ? "lock" : "key"}</span>
-                  </div>
-                  <div className="min-w-0">
-                    <p className="text-sm text-text-muted">No connections yet</p>
-                    {hasDualAuthModes && (
-                      <p className="text-xs text-text-muted">
-                        Choose {oauthConnectionLabel} or {apiKeyConnectionLabel}.
-                      </p>
-                    )}
-                  </div>
-                </div>
-                <div className="flex gap-2">
-                  {usesAutomationLogin && (
-                    <Button size="sm" icon="automation" onClick={openProviderAutomation}>
-                      Open Automation
-                    </Button>
-                  )}
-                  {hasDualAuthModes ? (
-                    <>
-                      <Button size="sm" icon="lock" variant="secondary" onClick={openOAuthConnection}>
-                        {oauthConnectionLabel}
-                      </Button>
-                      <Button size="sm" icon="key" onClick={triggerApiKeyConnection}>
-                        {apiKeyConnectionLabel}
-                      </Button>
-                    </>
-                  ) : !usesAutomationLogin ? (
-                    <>
-                      {!isCompatible && providerId === "iflow" && (
-                        <Button size="sm" icon="cookie" variant="secondary" onClick={() => setShowIFlowCookieModal(true)}>
-                          Cookie
-                        </Button>
-                      )}
-                      <Button
-                        size="sm"
-                        icon="add"
-                        onClick={triggerAddConnection}
-                      >
-                      {isCompatible ? "Add API Key" : (providerId === "iflow" ? "OAuth" : "Add Connection")}
-                      </Button>
-                    </>
-                  ) : null}
-                </div>
-              </div>
-              {providerId === "kiro" && kiroBulkJob?.jobId && (
-                <div className="mt-4 flex flex-col gap-3 rounded-lg border border-primary/20 bg-primary/[0.06] px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
-                  <div>
-                    <p className="text-sm font-semibold text-text-main">Bulk import progress is still available</p>
-                    <p className="text-xs text-text-muted">
-                      Status: {kiroBulkJob.status} | Success: {kiroBulkJob.summary?.success || 0} | Running: {kiroBulkJob.summary?.running || 0} | Queued: {kiroBulkJob.summary?.queued || 0}
-                    </p>
-                  </div>
-                  <div className="flex gap-2">
-                    <Button
-                      size="sm"
-                      icon="monitoring"
-                      variant="secondary"
-                      onClick={() => router.push(automationHref("kiro"))}
-                    >
-                      Resume Bulk Progress
-                    </Button>
-                    {isBulkJobTerminal(kiroBulkJob.status) && (
-                      <Button
-                        size="sm"
-                        variant="ghost"
-                        icon="close"
-                        onClick={clearKiroBulkProgress}
-                      >
-                        Clear
-                      </Button>
-                    )}
-                  </div>
-                </div>
-              )}
-              {providerId === "kiro" && !kiroBulkJob?.jobId && kiroBulkNotice && (
-                <div className="mt-4 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">
-                  {kiroBulkNotice}
-                </div>
-              )}
-            </>
-          ) : (
-            <>
-              {oneByOneSummary && (
-                <div className="mb-4 rounded-lg border border-black/10 bg-black/[0.02] px-3 py-2 text-xs text-text-muted 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>
-              )}
-              {providerId === "kiro" && kiroBulkJob?.jobId && (
-                <div className="mb-4 flex flex-col gap-3 rounded-lg border border-primary/20 bg-primary/[0.06] px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
-                  <div>
-                    <p className="text-sm font-semibold text-text-main">Bulk import progress is still available</p>
-                    <p className="text-xs text-text-muted">
-                      Status: {kiroBulkJob.status} | Success: {kiroBulkJob.summary?.success || 0} | Running: {kiroBulkJob.summary?.running || 0} | Queued: {kiroBulkJob.summary?.queued || 0}
-                    </p>
-                  </div>
-                  <div className="flex gap-2">
-                    <Button
-                      size="sm"
-                      icon="monitoring"
-                      variant="secondary"
-                      onClick={() => router.push(automationHref("kiro"))}
-                    >
-                      Resume Bulk Progress
-                    </Button>
-                    {isBulkJobTerminal(kiroBulkJob.status) && (
-                      <Button
-                        size="sm"
-                        variant="ghost"
-                        icon="close"
-                        onClick={clearKiroBulkProgress}
-                      >
-                        Clear
-                      </Button>
-                    )}
-                  </div>
-                </div>
-              )}
-              {providerId === "kiro" && !kiroBulkJob?.jobId && kiroBulkNotice && (
-                <div className="mb-4 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">
-                  {kiroBulkNotice}
-                </div>
-              )}
-              {connectionsList}
-              {providerId === "kiro" && totalKiroPages > 1 && (
-                <div className="mt-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-                  <p className="text-sm text-text-muted">
-                    Page {kiroConnectionsPage} of {totalKiroPages} • Showing {(kiroConnectionsPage - 1) * KIRO_CONNECTIONS_PER_PAGE + 1}-
-                    {Math.min(kiroConnectionsPage * KIRO_CONNECTIONS_PER_PAGE, filteredConnections.length)} of {filteredConnections.length} connections
-                  </p>
-                  <div className="flex gap-2">
-                    <Button
-                      size="sm"
-                      variant="secondary"
-                      disabled={activeKiroConnectionsPage <= 1}
-                      onClick={() => setKiroConnectionsPage((prev) => Math.max(1, prev - 1))}
-                    >
-                      Previous
-                    </Button>
-                    <Button
-                      size="sm"
-                      variant="secondary"
-                      disabled={activeKiroConnectionsPage >= totalKiroPages}
-                      onClick={() => setKiroConnectionsPage((prev) => Math.min(totalKiroPages, prev + 1))}
-                    >
-                      Next
-                    </Button>
-                  </div>
-                </div>
-              )}
-              {providerId !== "kiro" && filteredConnections.length > 0 && (
-                <Pagination
-                  currentPage={activeConnectionsPage}
-                  pageSize={connectionsPageSize}
-                  totalItems={filteredConnections.length}
-                  onPageChange={setConnectionsPage}
-                  onPageSizeChange={(size) => {
-                    setConnectionsPageSize(size);
-                    setConnectionsPage(1);
-                  }}
-                  className="mt-2"
-                />
-              )}
-              {connections.length > 0 && filteredConnections.length === 0 && (
-                <div className="py-8 text-center text-sm text-text-muted">
-                  No connections match this status filter.
-                </div>
-              )}
-              {!isCompatible && (
-                <div className="mt-4 grid grid-cols-1 gap-2 sm:flex">
-                  {providerId === "iflow" && (
-                    <Button
-                      size="sm"
-                      icon="cookie"
-                      variant="secondary"
-                      onClick={() => setShowIFlowCookieModal(true)}
-                      title="Add connection using browser cookie"
-                      className="w-full sm:w-auto"
-                    >
-                      Cookie
-                    </Button>
-                  )}
-                  {providerId === "codebuddy" && (
-                    <Button
-                      size="sm"
-                      icon="cookie"
-                      variant="secondary"
-                      onClick={openCodeBuddyQuotaCookieModal}
-                      title="Attach CodeBuddy web cookie for quota tracking"
-                      className="w-full sm:w-auto"
-                    >
-                      Quota Cookie
-                    </Button>
-                  )}
-                  {usesAutomationLogin && (
-                    <Button
-                      size="sm"
-                      icon="automation"
-                      onClick={openProviderAutomation}
-                      className="w-full sm:w-auto"
-                    >
-                      Open Automation
-                    </Button>
-                  )}
-                  {hasDualAuthModes ? (
-                    <>
-                      <Button
-                        size="sm"
-                        icon="lock"
-                        variant="secondary"
-                        onClick={openOAuthConnection}
-                        className="w-full sm:w-auto"
-                      >
-                        {oauthConnectionLabel}
-                      </Button>
-                      <Button
-                        size="sm"
-                        icon="key"
-                        onClick={triggerApiKeyConnection}
-                        className="w-full sm:w-auto"
-                      >
-                        {apiKeyConnectionLabel}
-                      </Button>
-                    </>
-                  ) : !usesAutomationLogin ? (
-                    <Button
-                      size="sm"
-                      icon="add"
-                      onClick={triggerAddConnection}
-                      className="w-full sm:w-auto"
-                    >
-                      Add
-                    </Button>
-                  ) : null}
-                </div>
-              )}
-            </>
-          )}
-        </Card>
-      )}
-
-      {/* Models */}
-      <Card>
-        <div className="mb-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-          <h2 className="text-lg font-semibold">
-            {"Available Models"}
-          </h2>
-          {!isCompatible && (() => {
-            const allIds = [
-              ...models,
-              ...kiloFreeModels.filter((fm) => !models.some((m) => m.id === fm.id)),
-            ].filter((m) => !m.type || m.type === "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" icon="restart_alt" onClick={handleEnableAll}>
-                    Active All
-                  </Button>
-                )}
-                {activeIds.length > 0 && (
-                  <Button size="sm" variant="secondary" icon="block" onClick={() => handleDisableAll(activeIds)}>
-                    Disable All
-                  </Button>
-                )}
-              </div>
-            );
-          })()}
-        </div>
-        {!!modelsTestError && (
-          <p className="text-xs text-red-500 mb-3 break-words">{modelsTestError}</p>
-        )}
-        {renderModelsSection()}
-      </Card>
-
-      {bulkActionModal}
-
-      {/* Modals */}
-      {providerId === "kiro" ? (
-        <KiroOAuthWrapper
-          isOpen={showOAuthModal}
-          providerInfo={providerInfo}
-          onSuccess={handleOAuthSuccess}
-          onRefresh={fetchConnections}
-          initialBulkJobId={kiroBulkJob?.jobId || null}
-          onBulkJobChange={handleKiroBulkJobChange}
-          onClose={() => setShowOAuthModal(false)}
-        />
-      ) : 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)}
-        />
-      )}
-      {providerId === "iflow" && (
-        <IFlowCookieModal
-          isOpen={showIFlowCookieModal}
-          onSuccess={handleIFlowCookieSuccess}
-          onClose={() => setShowIFlowCookieModal(false)}
-        />
-      )}
-      {providerId === "codebuddy" && (
-        <CodeBuddyQuotaCookieModal
-          isOpen={showCodeBuddyQuotaCookieModal}
-          connectionIds={codeBuddyQuotaCookieConnectionIds}
-          onSuccess={handleCodeBuddyQuotaCookieSuccess}
-          onClose={() => setShowCodeBuddyQuotaCookieModal(false)}
-        />
-      )}
-      <AddApiKeyModal
-        isOpen={showAddApiKeyModal}
-        provider={providerId}
-        providerName={providerInfo.name}
-        isCompatible={isCompatible}
-        isAnthropic={isAnthropicCompatible}
-        authType={providerInfo?.authType}
-        authHint={providerInfo?.authHint}
-        website={providerInfo?.website}
-        proxyPools={proxyPools}
-        error={addConnectionError}
-        onSave={handleSaveApiKey}
-        onBulkDone={fetchConnections}
-        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) => {
-            // For passthrough providers (OpenRouter), use last segment as alias to avoid slash conflicts
-            const alias = providerInfo?.passthroughModels
-              ? modelId.split("/").pop()
-              : modelId;
-            await handleSetAlias(modelId, alias, providerStorageAlias);
-            setShowAddCustomModel(false);
-          }}
-          onClose={() => setShowAddCustomModel(false)}
-        />
-      )}
-
-      {/* 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"
-      />
-    </div>
-  );
-}