zevairouter 1.0.145 → 1.0.147

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

@@ -29,28 +29,26 @@ import { useHeaderSearchStore } from "@/store/headerSearchStore";
 import ModelAvailabilityBadge from "./components/ModelAvailabilityBadge";
 
 function getStatusDisplay(connected, error, errorCode) {
-  const parts = [];
   if (connected > 0) {
-    parts.push(
-      <Badge key="connected" variant="success" size="sm" dot>
-        {connected} Connected
-      </Badge>,
+    return (
+      <span className="inline-flex min-w-0 items-center gap-1.5 text-[11px] font-medium text-success">
+        <span aria-hidden="true" className="size-1.5 shrink-0 rounded-full bg-success" />
+        {connected} connected
+      </span>
     );
   }
   if (error > 0) {
     const errText = errorCode
       ? `${error} Error (${errorCode})`
       : `${error} Error`;
-    parts.push(
-      <Badge key="error" variant="error" size="sm" dot>
+    return (
+      <span className="inline-flex min-w-0 items-center gap-1.5 text-[11px] font-medium text-error">
+        <span aria-hidden="true" className="size-1.5 shrink-0 rounded-full bg-error" />
         {errText}
-      </Badge>,
+      </span>
     );
   }
-  if (parts.length === 0) {
-    return <span className="text-text-muted">No connections</span>;
-  }
-  return parts;
+  return <span className="text-[11px] text-text-muted">No connections</span>;
 }
 
 function getConnectionErrorTag(connection) {
@@ -97,6 +95,12 @@ function getConnectionErrorTag(connection) {
 
 const PROVIDERS_DEFAULT_PAGE_SIZE = 20;
 const PROVIDERS_FETCH_TIMEOUT_MS = 8000;
+const PROVIDER_STATUS_FILTERS = [
+  { value: "all", label: "All" },
+  { value: "connected", label: "Connected" },
+  { value: "ready", label: "Ready" },
+  { value: "setup", label: "Needs setup" },
+];
 
 async function fetchJsonWithTimeout(url) {
   const controller = new AbortController();
@@ -131,6 +135,13 @@ export default function ProvidersPage() {
     useState(false);
   const [testingMode, setTestingMode] = useState(null);
   const [testResults, setTestResults] = useState(null);
+  const [statusFilter, setStatusFilter] = useState("all");
+  const [collapsedSections, setCollapsedSections] = useState({
+    custom: false,
+    oauth: false,
+    free: true,
+    apikey: true,
+  });
   const notify = useNotificationStore();
   const searchQuery = useHeaderSearchStore((s) => s.query);
   const registerSearch = useHeaderSearchStore((s) => s.register);
@@ -144,7 +155,7 @@ export default function ProvidersPage() {
   useEffect(() => {
     // eslint-disable-next-line react-hooks/set-state-in-effect -- pagination reset: returns to page 1 when search query or page size changes
     setApikeyPage(1);
-  }, [searchQuery, apikeyPageSize]);
+  }, [searchQuery, apikeyPageSize, statusFilter]);
 
   const matchSearch = (name) =>
     !searchQuery.trim() ||
@@ -160,16 +171,6 @@ export default function ProvidersPage() {
       return (a.name || "").localeCompare(b.name || "");
     });
 
-  const sortItemsByPriority = (items, authType) =>
-    [...items].sort((a, b) => {
-      const sa = getProviderStats(a.id, authType);
-      const sb = getProviderStats(b.id, authType);
-      const ca = sa.connected > 0 ? 1 : 0;
-      const cb = sb.connected > 0 ? 1 : 0;
-      if (ca !== cb) return cb - ca;
-      return (a.name || "").localeCompare(b.name || "");
-    });
-
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -268,6 +269,21 @@ export default function ProvidersPage() {
     return { connected, error, total, errorCode, errorTime, allDisabled };
   };
 
+  const matchesStatusFilter = (providerId, provider, authType) => {
+    if (statusFilter === "all") return true;
+    const stats = getProviderStats(providerId, authType);
+    if (statusFilter === "connected") return stats.connected > 0;
+    if (statusFilter === "ready") return stats.connected === 0 && provider.noAuth === true;
+    return stats.connected === 0 && provider.noAuth !== true;
+  };
+
+  const toggleSection = (section) => {
+    setCollapsedSections((current) => ({
+      ...current,
+      [section]: !current[section],
+    }));
+  };
+
   // Toggle all connections for a provider on/off
   const handleToggleProvider = async (providerId, authType, newActive) => {
     const providerConns = connections.filter(
@@ -325,7 +341,7 @@ export default function ProvidersPage() {
       textIcon: "OC",
       apiType: node.apiType,
     }))
-    .filter((p) => matchSearch(p.name));
+    .filter((p) => matchSearch(p.name) && matchesStatusFilter(p.id, p, "apikey"));
 
   const anthropicCompatibleProviders = providerNodes
     .filter((node) => node.type === "anthropic-compatible")
@@ -335,23 +351,28 @@ export default function ProvidersPage() {
       color: "#D97757",
       textIcon: "AC",
     }))
-    .filter((p) => matchSearch(p.name));
+    .filter((p) => matchSearch(p.name) && matchesStatusFilter(p.id, p, "apikey"));
 
   const oauthEntries = Object.entries(OAUTH_PROVIDERS).filter(
-    ([, info]) => !info.hidden && matchSearch(info.name),
+    ([key, info]) => !info.hidden && matchSearch(info.name) && matchesStatusFilter(key, info, "oauth"),
   );
   const freeEntries = Object.entries(FREE_PROVIDERS).filter(
-    ([, info]) => !info.hidden && matchSearch(info.name),
+    ([key, info]) => {
+      const hasApiKeyMode = Array.isArray(info?.authModes) && info.authModes.includes("apikey");
+      const authTypes = hasApiKeyMode ? ["oauth", "apikey"] : "oauth";
+      return !info.hidden && matchSearch(info.name) && matchesStatusFilter(key, info, authTypes);
+    },
   );
   const freeTierEntries = Object.entries(FREE_TIER_PROVIDERS).filter(
-    ([, info]) => !info.hidden && matchSearch(info.name),
+    ([key, info]) => !info.hidden && matchSearch(info.name) && matchesStatusFilter(key, info, "apikey"),
   );
   const apikeyEntries = sortByPriority(
     Object.entries(APIKEY_PROVIDERS).filter(
-      ([, info]) =>
+      ([key, info]) =>
         !info.hidden &&
         (info.serviceKinds ?? ["llm"]).includes("llm") &&
-        matchSearch(info.name),
+        matchSearch(info.name) &&
+        matchesStatusFilter(key, info, "apikey"),
     ),
     "apikey",
   );
@@ -378,43 +399,41 @@ export default function ProvidersPage() {
     apikeyEntries.length > 0 ||
     compatibleProviders.length > 0 ||
     anthropicCompatibleProviders.length > 0;
+  const showCustomSection =
+    compatibleProviders.length > 0 ||
+    anthropicCompatibleProviders.length > 0 ||
+    (statusFilter === "all" && !searchQuery.trim());
 
   return (
-    <div className="flex min-w-0 flex-col gap-6 px-1 sm:px-0 lg:gap-7">
+    <div className="flex min-w-0 flex-col gap-6 px-1 sm:px-0">
       {totalConnections > 0 && (
-        <div className="overflow-hidden rounded-2xl border border-primary/15 bg-surface/85 shadow-[0_20px_45px_-38px_rgba(229,106,74,0.8)] backdrop-blur-sm">
-          <div className="grid grid-cols-2 divide-x divide-y divide-border-subtle sm:grid-cols-4 sm:divide-y-0">
-            <div className="col-span-2 flex items-center gap-3 px-4 py-3.5 sm:col-span-1">
-              <span className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary ring-1 ring-primary/15">
-                <span aria-hidden="true" className="material-symbols-outlined" style={{ fontSize: 20 }}>dns</span>
+        <div className="overflow-hidden rounded-xl border border-border bg-surface/80 shadow-sm">
+          <div className="grid grid-cols-3 divide-x divide-y divide-border-subtle sm:grid-cols-4 sm:divide-y-0">
+            <div className="col-span-3 flex items-center gap-3 px-4 py-3 sm:col-span-1">
+              <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/[0.08] text-primary">
+                <span aria-hidden="true" className="material-symbols-outlined" style={{ fontSize: 18 }}>dns</span>
               </span>
               <div>
-                <p className="text-[10px] font-bold uppercase tracking-[0.12em] text-text-muted">Connection health</p>
-                <p className="mt-0.5 text-sm font-semibold text-text-main">{activePercent}% active</p>
+                <p className="text-[11px] font-medium text-text-muted">Connection health</p>
+                <p className="mt-0.5 text-sm font-semibold tabular-nums text-text-main">{activePercent}% active</p>
               </div>
             </div>
-            <div className="px-4 py-3.5">
-              <p className="text-[10px] font-bold uppercase tracking-[0.1em] text-text-muted">Connections</p>
-              <p className="mt-1 text-xl font-bold tracking-tight text-text-main">{totalConnections}</p>
+            <div className="px-4 py-3">
+              <p className="text-[11px] font-medium text-text-muted">Connections</p>
+              <p className="mt-0.5 text-lg font-semibold tabular-nums text-text-main">{totalConnections}</p>
             </div>
-            <div className="px-4 py-3.5">
-              <p className="text-[10px] font-bold uppercase tracking-[0.1em] text-text-muted">Active</p>
-              <div className="mt-1 flex items-baseline gap-2">
-                <p className="text-xl font-bold tracking-tight text-success">{activeConnections}</p>
+            <div className="px-4 py-3">
+              <p className="text-[11px] font-medium text-text-muted">Active</p>
+              <div className="mt-0.5 flex items-baseline gap-2">
+                <p className="text-lg font-semibold tabular-nums text-success">{activeConnections}</p>
                 {pausedConnections > 0 && <span className="text-[10px] text-text-muted">{pausedConnections} paused</span>}
               </div>
             </div>
-            <div className="px-4 py-3.5">
-              <p className="text-[10px] font-bold uppercase tracking-[0.1em] text-text-muted">Providers</p>
-              <p className="mt-1 text-xl font-bold tracking-tight text-info">{connectedProviderCount}</p>
+            <div className="px-4 py-3">
+              <p className="text-[11px] font-medium text-text-muted">Providers</p>
+              <p className="mt-0.5 text-lg font-semibold tabular-nums text-info">{connectedProviderCount}</p>
             </div>
           </div>
-          {totalConnections >= 100 && (
-            <div className="flex items-center gap-2 border-t border-border-subtle bg-surface-2/35 px-4 py-2 text-[11px] text-text-muted">
-              <span aria-hidden="true" className="material-symbols-outlined text-[15px] text-primary">filter_alt</span>
-              Open a provider to search and filter its paginated connections.
-            </div>
-          )}
         </div>
       )}
       {loadError && (
@@ -423,28 +442,54 @@ export default function ProvidersPage() {
         </div>
       )}
 
+      <div className="overflow-x-auto pb-0.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+        <div className="inline-flex min-w-full items-center gap-1.5 rounded-xl border border-border-subtle bg-surface/70 p-1.5 sm:min-w-0">
+          {PROVIDER_STATUS_FILTERS.map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              onClick={() => {
+                setStatusFilter(option.value);
+                setApikeyPage(1);
+                setCollapsedSections({ custom: false, oauth: false, free: false, apikey: false });
+              }}
+              aria-pressed={statusFilter === option.value}
+              className={`flex h-11 flex-1 items-center justify-center whitespace-nowrap rounded-lg px-3 text-xs font-medium transition-colors sm:h-8 sm:flex-none sm:px-3 ${statusFilter === option.value ? "bg-primary text-white shadow-sm" : "text-text-muted hover:bg-black/5 hover:text-text-main dark:hover:bg-white/5"}`}
+            >
+              {option.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
       {!hasAnyResult && (
         <div className="text-center py-8 border border-dashed border-border rounded-xl">
           <span className="material-symbols-outlined text-[32px] text-text-muted mb-2">
             search_off
           </span>
-          <p className="text-text-muted text-sm">No providers match your search</p>
+          <p className="text-text-muted text-sm">
+            {searchQuery.trim() ? "No providers match your search" : "No providers match this filter"}
+          </p>
         </div>
       )}
 
       {/* Custom Providers (OpenAI/Anthropic Compatible) — dynamic */}
+      {showCustomSection && (
       <div className="flex flex-col gap-4">
         <ProviderSectionHeader
           icon="extension"
           title="Custom Providers"
           description="OpenAI and Anthropic-compatible endpoints"
+          count={compatibleProviders.length + anthropicCompatibleProviders.length}
+          collapsed={collapsedSections.custom && !searchQuery.trim()}
+          onToggle={() => toggleSection("custom")}
         >
           <div className="grid grid-cols-1 gap-2 sm:flex sm:w-auto">
             <Button
               size="sm"
               icon="add"
               onClick={() => setShowAddAnthropicCompatibleModal(true)}
-              className="w-full sm:w-auto"
+              className="min-h-11 w-full sm:min-h-0 sm:w-auto"
             >
               Add Anthropic Compatible
             </Button>
@@ -453,12 +498,13 @@ export default function ProvidersPage() {
               variant="secondary"
               icon="add"
               onClick={() => setShowAddCompatibleModal(true)}
-              className="w-full !bg-white !text-black hover:!bg-gray-100 sm:w-auto"
+              className="min-h-11 w-full sm:min-h-0 sm:w-auto"
             >
               Add OpenAI Compatible
             </Button>
           </div>
         </ProviderSectionHeader>
+        <div className={collapsedSections.custom && !searchQuery.trim() ? "hidden sm:block" : ""}>
         {compatibleProviders.length === 0 &&
         anthropicCompatibleProviders.length === 0 ? (
           <div className="flex items-center gap-3 rounded-xl border border-dashed border-border bg-surface/45 px-4 py-3 text-text-muted">
@@ -469,7 +515,7 @@ export default function ProvidersPage() {
             </div>
           </div>
         ) : (
-          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4 lg:grid-cols-3 xl:grid-cols-4">
+          <div className="grid grid-cols-1 gap-2.5 sm:grid-cols-2 sm:gap-3 lg:grid-cols-3 xl:grid-cols-4">
             {[...compatibleProviders, ...anthropicCompatibleProviders].map(
               (info) => (
                 <ApiKeyProviderCard
@@ -477,7 +523,6 @@ export default function ProvidersPage() {
                   providerId={info.id}
                   provider={info}
                   stats={getProviderStats(info.id, "apikey")}
-                  authType="compatible"
                   onToggle={(active) =>
                     handleToggleProvider(info.id, "apikey", active)
                   }
@@ -486,7 +531,9 @@ export default function ProvidersPage() {
             )}
           </div>
         )}
+        </div>
       </div>
+      )}
 
       {/* OAuth Providers */}
       {oauthEntries.length > 0 && (
@@ -495,13 +542,16 @@ export default function ProvidersPage() {
           icon="passkey"
           title="OAuth Providers"
           description="Connect existing provider accounts securely"
+          count={oauthEntries.length}
+          collapsed={collapsedSections.oauth && !searchQuery.trim()}
+          onToggle={() => toggleSection("oauth")}
         >
           <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center">
             <ModelAvailabilityBadge />
             <button
               onClick={() => handleBatchTest("oauth")}
               disabled={!!testingMode}
-              className={`flex w-full items-center justify-center gap-1.5 rounded-lg border px-3 py-2 text-xs font-medium transition-colors sm:w-auto sm:py-1.5 ${
+              className={`flex h-11 w-full items-center justify-center gap-1.5 rounded-xl border px-3 text-xs font-medium transition-colors sm:h-8 sm:w-auto sm:rounded-lg ${
                 testingMode === "oauth"
                   ? "bg-primary/20 border-primary/40 text-primary animate-pulse"
                   : "bg-bg border-border text-text-muted hover:text-text-main hover:border-primary/40"
@@ -518,14 +568,13 @@ export default function ProvidersPage() {
             </button>
           </div>
         </ProviderSectionHeader>
-        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4 lg:grid-cols-3 xl:grid-cols-4">
+        <div className={`${collapsedSections.oauth && !searchQuery.trim() ? "hidden sm:grid" : "grid"} grid-cols-1 gap-2.5 sm:grid-cols-2 sm:gap-3 lg:grid-cols-3 xl:grid-cols-4`}>
           {oauthEntries.map(([key, info]) => (
             <ProviderCard
               key={key}
               providerId={key}
               provider={info}
               stats={getProviderStats(key, "oauth")}
-              authType="oauth"
               onToggle={(active) => handleToggleProvider(key, "oauth", active)}
             />
           ))}
@@ -540,11 +589,14 @@ export default function ProvidersPage() {
           icon="savings"
           title="Free Tier Providers"
           description="Ready-to-use and free-tier routing options"
+          count={freeEntries.length + freeTierEntries.length}
+          collapsed={collapsedSections.free && !searchQuery.trim()}
+          onToggle={() => toggleSection("free")}
         >
           <button
             onClick={() => handleBatchTest("free")}
             disabled={!!testingMode}
-            className={`flex w-full items-center justify-center gap-1.5 rounded-lg border px-3 py-2 text-xs font-medium transition-colors sm:w-auto sm:py-1.5 ${
+            className={`flex h-11 w-full items-center justify-center gap-1.5 rounded-xl border px-3 text-xs font-medium transition-colors sm:h-8 sm:w-auto sm:rounded-lg ${
               testingMode === "free"
                 ? "bg-primary/20 border-primary/40 text-primary animate-pulse"
                 : "bg-bg border-border text-text-muted hover:text-text-main hover:border-primary/40"
@@ -560,7 +612,7 @@ export default function ProvidersPage() {
             {testingMode === "free" ? "Testing..." : "Test All"}
           </button>
         </ProviderSectionHeader>
-        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4 lg:grid-cols-3 xl:grid-cols-4">
+        <div className={`${collapsedSections.free && !searchQuery.trim() ? "hidden sm:grid" : "grid"} grid-cols-1 gap-2.5 sm:grid-cols-2 sm:gap-3 lg:grid-cols-3 xl:grid-cols-4`}>
           {freeEntries.map(([key, info]) => {
             const hasApiKeyMode = Array.isArray(info?.authModes) && info.authModes.includes("apikey");
             const statAuthTypes = hasApiKeyMode ? ["oauth", "apikey"] : "oauth";
@@ -570,7 +622,6 @@ export default function ProvidersPage() {
               providerId={key}
               provider={info}
               stats={getProviderStats(key, statAuthTypes)}
-              authType="free"
               onToggle={(active) => handleToggleProvider(key, hasApiKeyMode ? "apikey" : "oauth", active)}
             />
             );
@@ -581,7 +632,6 @@ export default function ProvidersPage() {
               providerId={key}
               provider={info}
               stats={getProviderStats(key, "apikey")}
-              authType="apikey"
               onToggle={(active) => handleToggleProvider(key, "apikey", active)}
             />
           ))}
@@ -596,11 +646,14 @@ export default function ProvidersPage() {
           icon="key"
           title="API Key Providers"
           description="Bring your own provider credentials"
+          count={apikeyEntries.length}
+          collapsed={collapsedSections.apikey && !searchQuery.trim()}
+          onToggle={() => toggleSection("apikey")}
         >
           <button
             onClick={() => handleBatchTest("apikey")}
             disabled={!!testingMode}
-            className={`flex w-full items-center justify-center gap-1.5 rounded-lg border px-3 py-2 text-xs font-medium transition-colors sm:w-auto sm:py-1.5 ${
+            className={`flex h-11 w-full items-center justify-center gap-1.5 rounded-xl border px-3 text-xs font-medium transition-colors sm:h-8 sm:w-auto sm:rounded-lg ${
               testingMode === "apikey"
                 ? "bg-primary/20 border-primary/40 text-primary animate-pulse"
                 : "bg-bg border-border text-text-muted hover:text-text-main hover:border-primary/40"
@@ -616,19 +669,19 @@ export default function ProvidersPage() {
             {testingMode === "apikey" ? "Testing..." : "Test All"}
           </button>
         </ProviderSectionHeader>
-        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4 lg:grid-cols-3 xl:grid-cols-4">
+        <div className={`${collapsedSections.apikey && !searchQuery.trim() ? "hidden sm:grid" : "grid"} grid-cols-1 gap-2.5 sm:grid-cols-2 sm:gap-3 lg:grid-cols-3 xl:grid-cols-4`}>
           {visibleApikeyEntries.map(([key, info]) => (
             <ApiKeyProviderCard
               key={key}
               providerId={key}
               provider={info}
               stats={getProviderStats(key, "apikey")}
-              authType="apikey"
               onToggle={(active) => handleToggleProvider(key, "apikey", active)}
             />
           ))}
         </div>
         {apikeyEntries.length > 0 && (
+          <div className={collapsedSections.apikey && !searchQuery.trim() ? "hidden sm:block" : ""}>
           <Pagination
             currentPage={activeApikeyPage}
             pageSize={apikeyPageSize}
@@ -639,6 +692,7 @@ export default function ProvidersPage() {
               setApikeyPage(1);
             }}
           />
+          </div>
         )}
       </div>
       )}
@@ -657,7 +711,6 @@ export default function ProvidersPage() {
               providerId={key}
               provider={info}
               stats={getProviderStats(key, "apikey")}
-              authType="apikey"
               onToggle={(active) => handleToggleProvider(key, "apikey", active)}
             />
           ))}
@@ -712,19 +765,47 @@ export default function ProvidersPage() {
   );
 }
 
-function ProviderSectionHeader({ icon, title, description, children }) {
+function ProviderSectionHeader({
+  icon,
+  title,
+  description,
+  count,
+  collapsed,
+  onToggle,
+  children,
+}) {
   return (
     <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-      <div className="flex min-w-0 items-center gap-3">
-        <span aria-hidden="true" className="material-symbols-outlined flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-[20px] text-primary ring-1 ring-primary/15">
-          {icon}
-        </span>
-        <div className="min-w-0">
-          <h2 className="text-lg font-semibold leading-tight sm:text-xl">{title}</h2>
-          <p className="mt-0.5 text-xs text-text-muted">{description}</p>
+      <div className="flex w-full min-w-0 items-center gap-2.5 sm:w-auto">
+        <div className="flex min-w-0 flex-1 items-center gap-2.5 sm:flex-none">
+          <span aria-hidden="true" className="material-symbols-outlined flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary/[0.08] text-[17px] text-primary">
+            {icon}
+          </span>
+          <div className="min-w-0">
+            <div className="flex items-center gap-2">
+              <h2 className="truncate text-lg font-semibold leading-tight">{title}</h2>
+              <span className="rounded-full bg-surface-2 px-2 py-0.5 text-[10px] font-semibold tabular-nums text-text-muted">
+                {count}
+              </span>
+            </div>
+            <p className="mt-0.5 truncate text-[11px] text-text-muted sm:text-xs">{description}</p>
+          </div>
         </div>
+        <button
+          type="button"
+          onClick={onToggle}
+          className="flex size-11 shrink-0 items-center justify-center rounded-xl border border-border text-text-muted transition-colors hover:border-primary/30 hover:text-primary sm:hidden"
+          aria-expanded={!collapsed}
+          aria-label={`${collapsed ? "Expand" : "Collapse"} ${title}`}
+        >
+          <span className="material-symbols-outlined text-[20px]">
+            {collapsed ? "expand_more" : "expand_less"}
+          </span>
+        </button>
       </div>
-      {children}
+      {children && (
+        <div className={collapsed ? "hidden sm:block" : "block"}>{children}</div>
+      )}
     </div>
   );
 }
@@ -733,42 +814,26 @@ ProviderSectionHeader.propTypes = {
   icon: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,
+  count: PropTypes.number.isRequired,
+  collapsed: PropTypes.bool.isRequired,
+  onToggle: PropTypes.func.isRequired,
   children: PropTypes.node,
 };
 
-function ProviderCard({ providerId, provider, stats, authType, onToggle }) {
+function ProviderCard({ providerId, provider, stats, onToggle }) {
   const { connected, error, errorCode, allDisabled } = stats;
   const isNoAuth = !!provider.noAuth;
-  const isReady = !allDisabled && (connected > 0 || isNoAuth);
-
-  const dotColors = {
-    free: "bg-green-500",
-    oauth: "bg-blue-500",
-    apikey: "bg-amber-500",
-    compatible: "bg-orange-500",
-  };
-  const dotLabels = {
-    free: "Free",
-    oauth: "OAuth",
-    apikey: "API Key",
-    compatible: "Compatible",
-  };
 
   return (
     <Link href={`/dashboard/providers/${providerId}`} className="group min-w-0">
       <Card
         padding="none"
-        className={`relative h-[82px] min-h-[82px] cursor-pointer overflow-hidden transition-[border-color,box-shadow,opacity] sm:h-[94px] sm:min-h-[94px] ${
-          isReady
-            ? "border-success/25 bg-linear-to-br from-success/[0.045] to-transparent"
-            : "group-hover:border-primary/25"
-        } ${allDisabled ? "opacity-55" : ""}`}
+        className={`relative h-[76px] min-h-[76px] cursor-pointer overflow-hidden transition-[border-color,box-shadow,opacity] group-hover:border-primary/30 group-hover:shadow-[0_10px_26px_-22px_rgba(229,106,74,0.55)] sm:h-[78px] sm:min-h-[78px] ${allDisabled ? "opacity-55" : ""}`}
       >
-        {isReady && <span className="absolute inset-y-3 left-0 w-0.5 rounded-r-full bg-success" />}
-        <div className="flex h-full min-w-0 items-center justify-between gap-3 p-3.5">
-          <div className="flex min-w-0 items-center gap-3">
+        <div className="flex h-full min-w-0 items-center justify-between gap-2.5 p-3">
+          <div className="flex min-w-0 items-center gap-2.5">
             <div
-              className="flex size-10 shrink-0 items-center justify-center rounded-xl ring-1 ring-black/[0.04] dark:ring-white/[0.06]"
+              className="flex size-9 shrink-0 items-center justify-center rounded-lg ring-1 ring-black/[0.04] dark:ring-white/[0.06]"
               style={{
                 backgroundColor: `${provider.color?.length > 7 ? provider.color : provider.color + "15"}`,
               }}
@@ -776,8 +841,8 @@ function ProviderCard({ providerId, provider, stats, authType, onToggle }) {
               <ProviderIcon
                 src={`/providers/${provider.id}.png`}
                 alt=""
-                size={30}
-                className="max-h-[32px] max-w-[32px] rounded-lg object-contain"
+                size={28}
+                className="max-h-7 max-w-7 rounded-md object-contain"
                 fallbackText={
                   provider.textIcon || provider.id.slice(0, 2).toUpperCase()
                 }
@@ -786,26 +851,19 @@ function ProviderCard({ providerId, provider, stats, authType, onToggle }) {
             </div>
             <div className="min-w-0">
               <h3 className="truncate text-sm font-semibold text-text-main">{provider.name}</h3>
-              <div className="mt-1 flex min-w-0 items-center gap-1.5 overflow-hidden whitespace-nowrap text-xs">
-                <span className="inline-flex items-center gap-1 text-[10px] font-medium text-text-muted">
-                  <span aria-hidden="true" className={`size-1.5 rounded-full ${dotColors[authType] || "bg-text-muted"}`} />
-                  {dotLabels[authType] || "Provider"}
-                </span>
+              <div className="mt-1 flex min-w-0 items-center overflow-hidden whitespace-nowrap">
                 {allDisabled ? (
-                  <Badge variant="default" size="sm">
-                    <span className="flex items-center gap-1">
-                      <span className="material-symbols-outlined text-[12px]">
-                        pause_circle
-                      </span>
-                      Disabled
-                    </span>
-                  </Badge>
+                  <span className="inline-flex items-center gap-1 text-[11px] text-text-muted">
+                    <span aria-hidden="true" className="material-symbols-outlined text-[13px]">pause_circle</span>
+                    Disabled
+                  </span>
                 ) : isNoAuth ? (
-                  <Badge variant="success" size="sm" dot>Ready</Badge>
+                  <span className="inline-flex items-center gap-1.5 text-[11px] font-medium text-success">
+                    <span aria-hidden="true" className="size-1.5 rounded-full bg-success" />
+                    Ready
+                  </span>
                 ) : (
-                  <>
-                    {getStatusDisplay(connected, error, errorCode)}
-                  </>
+                  getStatusDisplay(connected, error, errorCode)
                 )}
               </div>
             </div>
@@ -822,13 +880,14 @@ function ProviderCard({ providerId, provider, stats, authType, onToggle }) {
               >
                 <Toggle
                   size="sm"
+                  touchTarget
                   checked={!allDisabled}
                   onChange={() => {}}
                   title={allDisabled ? "Enable provider" : "Disable provider"}
                 />
               </div>
             )}
-            <span aria-hidden="true" className="material-symbols-outlined text-[18px] text-text-subtle transition-[transform,color] group-hover:translate-x-0.5 group-hover:text-primary">
+            <span aria-hidden="true" className="material-symbols-outlined text-[17px] text-text-subtle transition-[transform,color] group-hover:translate-x-0.5 group-hover:text-primary">
               chevron_right
             </span>
           </div>
@@ -854,7 +913,6 @@ ProviderCard.propTypes = {
     total: PropTypes.number,
     allDisabled: PropTypes.bool,
   }).isRequired,
-  authType: PropTypes.string,
   onToggle: PropTypes.func,
 };
 
@@ -862,29 +920,14 @@ function ApiKeyProviderCard({
   providerId,
   provider,
   stats,
-  authType,
   onToggle,
 }) {
   const { connected, error, errorCode, allDisabled } = stats;
-  const isReady = !allDisabled && connected > 0;
   const isCompatible = providerId.startsWith(OPENAI_COMPATIBLE_PREFIX);
   const isAnthropicCompatible = providerId.startsWith(
     ANTHROPIC_COMPATIBLE_PREFIX,
   );
 
-  const dotColors = {
-    free: "bg-green-500",
-    oauth: "bg-blue-500",
-    apikey: "bg-amber-500",
-    compatible: "bg-orange-500",
-  };
-  const dotLabels = {
-    free: "Free",
-    oauth: "OAuth",
-    apikey: "API Key",
-    compatible: "Compatible",
-  };
-
   const getIconPath = () => {
     if (provider.id === "featherless") return null;
     if (isCompatible)
@@ -899,17 +942,12 @@ function ApiKeyProviderCard({
     <Link href={`/dashboard/providers/${providerId}`} className="group min-w-0">
       <Card
         padding="none"
-        className={`relative h-[82px] min-h-[82px] cursor-pointer overflow-hidden transition-[border-color,box-shadow,opacity] sm:h-[94px] sm:min-h-[94px] ${
-          isReady
-            ? "border-success/25 bg-linear-to-br from-success/[0.045] to-transparent"
-            : "group-hover:border-primary/25"
-        } ${allDisabled ? "opacity-55" : ""}`}
+        className={`relative h-[76px] min-h-[76px] cursor-pointer overflow-hidden transition-[border-color,box-shadow,opacity] group-hover:border-primary/30 group-hover:shadow-[0_10px_26px_-22px_rgba(229,106,74,0.55)] sm:h-[78px] sm:min-h-[78px] ${allDisabled ? "opacity-55" : ""}`}
       >
-        {isReady && <span className="absolute inset-y-3 left-0 w-0.5 rounded-r-full bg-success" />}
-        <div className="flex h-full min-w-0 items-center justify-between gap-3 p-3.5">
-          <div className="flex min-w-0 items-center gap-3">
+        <div className="flex h-full min-w-0 items-center justify-between gap-2.5 p-3">
+          <div className="flex min-w-0 items-center gap-2.5">
             <div
-              className="flex size-10 shrink-0 items-center justify-center rounded-xl ring-1 ring-black/[0.04] dark:ring-white/[0.06]"
+              className="flex size-9 shrink-0 items-center justify-center rounded-lg ring-1 ring-black/[0.04] dark:ring-white/[0.06]"
               style={{
                 backgroundColor: `${provider.color?.length > 7 ? provider.color : provider.color + "15"}`,
               }}
@@ -917,8 +955,8 @@ function ApiKeyProviderCard({
               <ProviderIcon
                 src={getIconPath()}
                 alt=""
-                size={30}
-                className="max-h-[32px] max-w-[32px] rounded-lg object-contain"
+                size={28}
+                className="max-h-7 max-w-7 rounded-md object-contain"
                 fallbackText={
                   provider.textIcon || provider.id.slice(0, 2).toUpperCase()
                 }
@@ -927,34 +965,22 @@ function ApiKeyProviderCard({
             </div>
             <div className="min-w-0">
               <h3 className="truncate text-sm font-semibold text-text-main">{provider.name}</h3>
-              <div className="mt-1 flex min-w-0 items-center gap-1.5 overflow-hidden whitespace-nowrap text-xs">
-                <span className="inline-flex items-center gap-1 text-[10px] font-medium text-text-muted">
-                  <span aria-hidden="true" className={`size-1.5 rounded-full ${dotColors[authType] || "bg-text-muted"}`} />
-                  {dotLabels[authType] || "Provider"}
-                </span>
+              <div className="mt-1 flex min-w-0 items-center gap-1.5 overflow-hidden whitespace-nowrap">
                 {allDisabled ? (
-                  <Badge variant="default" size="sm">
-                    <span className="flex items-center gap-1">
-                      <span className="material-symbols-outlined text-[12px]">
-                        pause_circle
-                      </span>
-                      Disabled
-                    </span>
-                  </Badge>
+                  <span className="inline-flex items-center gap-1 text-[11px] text-text-muted">
+                    <span aria-hidden="true" className="material-symbols-outlined text-[13px]">pause_circle</span>
+                    Disabled
+                  </span>
                 ) : (
                   <>
                     {getStatusDisplay(connected, error, errorCode)}
                     {isCompatible && (
-                      <Badge variant="default" size="sm">
-                        {provider.apiType === "responses"
-                          ? "Responses"
-                          : "Chat"}
-                      </Badge>
+                      <span className="text-[10px] text-text-subtle">
+                        · {provider.apiType === "responses" ? "Responses" : "Chat"}
+                      </span>
                     )}
                     {isAnthropicCompatible && (
-                      <Badge variant="default" size="sm">
-                        Messages
-                      </Badge>
+                      <span className="text-[10px] text-text-subtle">· Messages</span>
                     )}
                   </>
                 )}
@@ -973,13 +999,14 @@ function ApiKeyProviderCard({
               >
                 <Toggle
                   size="sm"
+                  touchTarget
                   checked={!allDisabled}
                   onChange={() => {}}
                   title={allDisabled ? "Enable provider" : "Disable provider"}
                 />
               </div>
             )}
-            <span aria-hidden="true" className="material-symbols-outlined text-[18px] text-text-subtle transition-[transform,color] group-hover:translate-x-0.5 group-hover:text-primary">
+            <span aria-hidden="true" className="material-symbols-outlined text-[17px] text-text-subtle transition-[transform,color] group-hover:translate-x-0.5 group-hover:text-primary">
               chevron_right
             </span>
           </div>
@@ -1006,7 +1033,6 @@ ApiKeyProviderCard.propTypes = {
     total: PropTypes.number,
     allDisabled: PropTypes.bool,
   }).isRequired,
-  authType: PropTypes.string,
   onToggle: PropTypes.func,
 };