zevairouter 1.0.146 → 1.0.147

package/src/app/(dashboard)/dashboard/endpoint/EndpointPageClient.js

@@ -866,13 +866,13 @@ export default function APIPageClient({ machineId }) {
                 <Input aria-label="Cloudflare Tunnel endpoint URL" value={`${tunnelPublicUrl || tunnelUrl}/v1`} readOnly className="w-full min-w-0 font-mono text-sm sm:flex-1" />
                 <button
                   onClick={() => copy(`${tunnelPublicUrl || tunnelUrl}/v1`, "tunnel_url")}
-                  className="p-2 hover:bg-black/5 dark:hover:bg-white/5 rounded text-text-muted hover:text-primary transition-colors shrink-0"
+                  className="flex size-11 shrink-0 items-center justify-center rounded-xl text-text-muted transition-colors hover:bg-black/5 hover:text-primary dark:hover:bg-white/5 sm:size-9 sm:rounded-lg"
                 >
                   <span className="material-symbols-outlined text-[18px]">{copied === "tunnel_url" ? "check" : "content_copy"}</span>
                 </button>
                 <button
                   onClick={() => setShowDisableTunnelModal(true)}
-                  className="p-2 hover:bg-red-500/10 rounded text-red-500 transition-colors shrink-0"
+                  className="flex size-11 shrink-0 items-center justify-center rounded-xl text-red-500 transition-colors hover:bg-red-500/10 sm:size-9 sm:rounded-lg"
                   title="Disable Tunnel"
                 >
                   <span className="material-symbols-outlined text-[18px]">power_settings_new</span>
@@ -886,7 +886,7 @@ export default function APIPageClient({ machineId }) {
                 </div>
                 <button
                   onClick={() => setShowDisableTunnelModal(true)}
-                  className="p-2 hover:bg-red-500/10 rounded text-red-500 transition-colors shrink-0"
+                  className="flex size-11 shrink-0 items-center justify-center rounded-xl text-red-500 transition-colors hover:bg-red-500/10 sm:size-9 sm:rounded-lg"
                   title="Disable Tunnel"
                 >
                   <span className="material-symbols-outlined text-[18px]">power_settings_new</span>
@@ -900,7 +900,7 @@ export default function APIPageClient({ machineId }) {
                 </div>
                 <button
                   onClick={() => { setTunnelLoading(false); setTunnelProgress(""); }}
-                  className="p-2 hover:bg-red-500/10 rounded text-red-500 transition-colors shrink-0"
+                  className="flex size-11 shrink-0 items-center justify-center rounded-xl text-red-500 transition-colors hover:bg-red-500/10 sm:size-9 sm:rounded-lg"
                   title="Stop"
                 >
                   <span className="material-symbols-outlined text-[18px]">power_settings_new</span>
@@ -912,7 +912,7 @@ export default function APIPageClient({ machineId }) {
                   <span className="material-symbols-outlined text-sm">error</span>
                   {tunnelStatus.message}
                 </div>
-                <Button size="sm" icon="cloud_upload" onClick={() => setShowEnableTunnelModal(true)}>Enable</Button>
+                <Button size="sm" icon="cloud_upload" className="min-h-11 sm:min-h-8" onClick={() => setShowEnableTunnelModal(true)}>Enable</Button>
               </>
             ) : tunnelChecking ? (
               <>
@@ -922,7 +922,7 @@ export default function APIPageClient({ machineId }) {
                 </div>
                 <button
                   onClick={() => setTunnelChecking(false)}
-                  className="p-2 hover:bg-red-500/10 rounded text-red-500 transition-colors shrink-0"
+                  className="flex size-11 shrink-0 items-center justify-center rounded-xl text-red-500 transition-colors hover:bg-red-500/10 sm:size-9 sm:rounded-lg"
                   title="Stop"
                 >
                   <span className="material-symbols-outlined text-[18px]">power_settings_new</span>
@@ -932,6 +932,7 @@ export default function APIPageClient({ machineId }) {
               <Button
                 size="sm"
                 icon="cloud_upload"
+                className="min-h-11 sm:min-h-8"
                 onClick={() => {
                   if (isLoginUnsafe) {
                     setTunnelStatus({ type: "error", message: `Security required: ${unsafeReason}` });
@@ -958,13 +959,13 @@ export default function APIPageClient({ machineId }) {
                 <Input aria-label="Tailscale endpoint URL" value={`${tsUrl}/v1`} readOnly className="w-full min-w-0 font-mono text-sm sm:flex-1" />
                 <button
                   onClick={() => copy(`${tsUrl}/v1`, "ts_url")}
-                  className="p-2 hover:bg-black/5 dark:hover:bg-white/5 rounded text-text-muted hover:text-primary transition-colors shrink-0"
+                  className="flex size-11 shrink-0 items-center justify-center rounded-xl text-text-muted transition-colors hover:bg-black/5 hover:text-primary dark:hover:bg-white/5 sm:size-9 sm:rounded-lg"
                 >
                   <span className="material-symbols-outlined text-[18px]">{copied === "ts_url" ? "check" : "content_copy"}</span>
                 </button>
                 <button
                   onClick={() => setShowDisableTsModal(true)}
-                  className="p-2 hover:bg-red-500/10 rounded text-red-500 transition-colors shrink-0"
+                  className="flex size-11 shrink-0 items-center justify-center rounded-xl text-red-500 transition-colors hover:bg-red-500/10 sm:size-9 sm:rounded-lg"
                   title="Disable Tailscale"
                 >
                   <span className="material-symbols-outlined text-[18px]">power_settings_new</span>
@@ -978,7 +979,7 @@ export default function APIPageClient({ machineId }) {
                 </div>
                 <button
                   onClick={() => setShowDisableTsModal(true)}
-                  className="p-2 hover:bg-red-500/10 rounded text-red-500 transition-colors shrink-0"
+                  className="flex size-11 shrink-0 items-center justify-center rounded-xl text-red-500 transition-colors hover:bg-red-500/10 sm:size-9 sm:rounded-lg"
                   title="Disable Tailscale"
                 >
                   <span className="material-symbols-outlined text-[18px]">power_settings_new</span>
@@ -1001,7 +1002,7 @@ export default function APIPageClient({ machineId }) {
                 )}
                 <button
                   onClick={() => { setTsLoading(false); setTsConnecting(false); setTsProgress(""); clearUserAuth(); }}
-                  className="p-2 hover:bg-red-500/10 rounded text-red-500 transition-colors shrink-0"
+                  className="flex size-11 shrink-0 items-center justify-center rounded-xl text-red-500 transition-colors hover:bg-red-500/10 sm:size-9 sm:rounded-lg"
                   title="Stop"
                 >
                   <span className="material-symbols-outlined text-[18px]">power_settings_new</span>
@@ -1013,7 +1014,7 @@ export default function APIPageClient({ machineId }) {
                   <span className="material-symbols-outlined text-sm">error</span>
                   {tsStatus.message}
                 </div>
-                <Button size="sm" icon="vpn_lock" onClick={handleOpenTsModal}>Enable</Button>
+                <Button size="sm" icon="vpn_lock" className="min-h-11 sm:min-h-8" onClick={handleOpenTsModal}>Enable</Button>
               </>
             ) : (
               <Button
@@ -1026,7 +1027,7 @@ export default function APIPageClient({ machineId }) {
                   }
                   handleOpenTsModal();
                 }}
-                className="bg-linear-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 text-white!"
+                className="min-h-11 sm:min-h-8"
               >
                 Enable
               </Button>
@@ -1073,6 +1074,7 @@ export default function APIPageClient({ machineId }) {
         {(tunnelEnabled || tsEnabled) && (
           <div className="mt-4 pt-4 border-t border-border flex items-center gap-3">
             <Toggle
+              touchTarget
               label="Allow dashboard access via tunnel"
               checked={tunnelDashboardAccess}
               onChange={() => handleTunnelDashboardAccess(!tunnelDashboardAccess)}
@@ -1099,7 +1101,7 @@ export default function APIPageClient({ machineId }) {
           </div>
           <Link
             href="/dashboard/token-saver"
-            className="inline-flex w-full shrink-0 items-center justify-center gap-1.5 rounded-lg border border-primary/25 bg-surface/80 px-3.5 py-2 text-sm font-semibold text-text-main shadow-sm transition-[border-color,color,transform] hover:translate-x-0.5 hover:border-primary/50 hover:text-primary sm:w-auto"
+            className="inline-flex min-h-11 w-full shrink-0 items-center justify-center gap-1.5 rounded-xl border border-primary/25 bg-surface/80 px-3.5 py-2 text-sm font-semibold text-text-main shadow-sm transition-[border-color,color,transform] hover:translate-x-0.5 hover:border-primary/50 hover:text-primary sm:min-h-0 sm:w-auto sm:rounded-lg"
           >
             Open workspace
             <span className="material-symbols-outlined text-[16px]">arrow_forward</span>
@@ -1149,6 +1151,7 @@ export default function APIPageClient({ machineId }) {
           </div>
           <div className="shrink-0 self-end sm:self-auto">
             <Toggle
+              touchTarget
               label="Require API key"
               checked={requireApiKey}
               onChange={() => handleRequireApiKey(!requireApiKey)}
@@ -1189,7 +1192,7 @@ export default function APIPageClient({ machineId }) {
                     <button
                       type="button"
                       onClick={() => toggleKeyVisibility(key.id)}
-                      className="p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded text-text-muted hover:text-primary opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all shrink-0"
+                      className="flex size-11 shrink-0 items-center justify-center rounded-xl text-text-muted opacity-100 transition-all hover:bg-black/5 hover:text-primary dark:hover:bg-white/5 sm:size-7 sm:rounded-lg sm:opacity-0 sm:group-hover:opacity-100"
                       title={visibleKeys.has(key.id) ? "Hide key" : "Show key"}
                       aria-label={visibleKeys.has(key.id) ? "Hide API key" : "Show API key"}
                     >
@@ -1200,7 +1203,7 @@ export default function APIPageClient({ machineId }) {
                     <button
                       type="button"
                       onClick={() => handleCopyKey(key.id)}
-                      className="p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded text-text-muted hover:text-primary opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all shrink-0"
+                      className="flex size-11 shrink-0 items-center justify-center rounded-xl text-text-muted opacity-100 transition-all hover:bg-black/5 hover:text-primary dark:hover:bg-white/5 sm:size-7 sm:rounded-lg sm:opacity-0 sm:group-hover:opacity-100"
                       title="Copy key"
                       aria-label="Copy API key"
                     >
@@ -1242,30 +1245,34 @@ export default function APIPageClient({ machineId }) {
                   </div>
                 </div>
                 <div className="flex items-center gap-2">
-                  <Toggle
-                    size="sm"
-                    disabled={keyPending === `toggle:${key.id}`}
-                    checked={key.isActive ?? true}
-                    onChange={(checked) => {
-                      if (key.isActive && !checked) {
-                        setConfirmState({
-                          title: "Pause API Key",
-                          message: `Pause API key "${key.name}"?\n\nThis key will stop working immediately but can be resumed later.`,
-                          onConfirm: async () => {
-                            setConfirmState(null);
-                            handleToggleKey(key.id, checked);
-                          }
-                        });
-                      } else {
-                        handleToggleKey(key.id, checked);
-                      }
-                    }}
-                    title={key.isActive ? "Pause key" : "Resume key"}
-                  />
+                  <div className="flex size-11 items-center justify-center sm:size-auto">
+                    <Toggle
+                      size="sm"
+                      touchTarget
+                      disabled={keyPending === `toggle:${key.id}`}
+                      checked={key.isActive ?? true}
+                      onChange={(checked) => {
+                        if (key.isActive && !checked) {
+                          setConfirmState({
+                            title: "Pause API Key",
+                            message: `Pause API key "${key.name}"?\n\nThis key will stop working immediately but can be resumed later.`,
+                            onConfirm: async () => {
+                              setConfirmState(null);
+                              handleToggleKey(key.id, checked);
+                            }
+                          });
+                        } else {
+                          handleToggleKey(key.id, checked);
+                        }
+                      }}
+                      title={key.isActive ? "Pause key" : "Resume key"}
+                    />
+                  </div>
                   <button
                     disabled={keyPending === `delete:${key.id}`}
                     onClick={() => handleDeleteKey(key.id)}
-                    className="p-2 hover:bg-red-500/10 rounded text-red-500 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all"
+                    className="flex size-11 items-center justify-center rounded-xl text-red-500 opacity-100 transition-all hover:bg-red-500/10 sm:size-9 sm:rounded-lg sm:opacity-0 sm:group-hover:opacity-100"
+                    aria-label={`Delete ${key.name}`}
                   >
                     <span className="material-symbols-outlined text-[18px]">delete</span>
                   </button>
@@ -1515,7 +1522,7 @@ function EndpointRow({ label, url, copyId, copied, onCopy, badge, actions }) {
       <Input aria-label={`${label} endpoint URL`} value={url} readOnly className="w-full min-w-0 font-mono text-sm sm:flex-1" />
       <button
         onClick={() => onCopy(url, copyId)}
-        className="p-2 hover:bg-black/5 dark:hover:bg-white/5 rounded text-text-muted hover:text-primary transition-colors shrink-0"
+        className="flex size-11 shrink-0 items-center justify-center rounded-xl text-text-muted transition-colors hover:bg-black/5 hover:text-primary dark:hover:bg-white/5 sm:size-9 sm:rounded-lg"
         aria-label={`Copy ${label} endpoint URL`}
       >
         <span className="material-symbols-outlined text-[18px]">{copied === copyId ? "check" : "content_copy"}</span>
@@ -1569,7 +1576,7 @@ function SecurityWarning({ message, action }) {
       {action && (
         <a
           href={action.href}
-          className="text-xs font-medium underline shrink-0 hover:opacity-80"
+          className="inline-flex min-h-11 shrink-0 items-center text-xs font-medium underline hover:opacity-80 sm:min-h-0"
           onClick={action.href.startsWith("#") ? (e) => {
             e.preventDefault();
             document.getElementById(action.href.slice(1))?.scrollIntoView({ behavior: "smooth" });

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

@@ -95,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();
@@ -129,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);
@@ -142,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() ||
@@ -158,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 {
@@ -266,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(
@@ -323,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")
@@ -333,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",
   );
@@ -376,6 +399,10 @@ 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">
@@ -415,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>
@@ -445,12 +498,13 @@ export default function ProvidersPage() {
               variant="secondary"
               icon="add"
               onClick={() => setShowAddCompatibleModal(true)}
-              className="w-full 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">
@@ -477,7 +531,9 @@ export default function ProvidersPage() {
             )}
           </div>
         )}
+        </div>
       </div>
+      )}
 
       {/* OAuth Providers */}
       {oauthEntries.length > 0 && (
@@ -486,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"
@@ -509,7 +568,7 @@ export default function ProvidersPage() {
             </button>
           </div>
         </ProviderSectionHeader>
-        <div className="grid grid-cols-1 gap-2.5 sm:grid-cols-2 sm:gap-3 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}
@@ -530,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"
@@ -550,7 +612,7 @@ export default function ProvidersPage() {
             {testingMode === "free" ? "Testing..." : "Test All"}
           </button>
         </ProviderSectionHeader>
-        <div className="grid grid-cols-1 gap-2.5 sm:grid-cols-2 sm:gap-3 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";
@@ -584,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"
@@ -604,7 +669,7 @@ export default function ProvidersPage() {
             {testingMode === "apikey" ? "Testing..." : "Test All"}
           </button>
         </ProviderSectionHeader>
-        <div className="grid grid-cols-1 gap-2.5 sm:grid-cols-2 sm:gap-3 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}
@@ -616,6 +681,7 @@ export default function ProvidersPage() {
           ))}
         </div>
         {apikeyEntries.length > 0 && (
+          <div className={collapsedSections.apikey && !searchQuery.trim() ? "hidden sm:block" : ""}>
           <Pagination
             currentPage={activeApikeyPage}
             pageSize={apikeyPageSize}
@@ -626,6 +692,7 @@ export default function ProvidersPage() {
               setApikeyPage(1);
             }}
           />
+          </div>
         )}
       </div>
       )}
@@ -698,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-2.5">
-        <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">
-          <h2 className="text-lg font-semibold leading-tight">{title}</h2>
-          <p className="mt-0.5 text-[11px] text-text-muted sm:text-xs">{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>
   );
 }
@@ -719,6 +814,9 @@ 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,
 };
 
@@ -782,6 +880,7 @@ function ProviderCard({ providerId, provider, stats, onToggle }) {
               >
                 <Toggle
                   size="sm"
+                  touchTarget
                   checked={!allDisabled}
                   onChange={() => {}}
                   title={allDisabled ? "Enable provider" : "Disable provider"}
@@ -900,6 +999,7 @@ function ApiKeyProviderCard({
               >
                 <Toggle
                   size="sm"
+                  touchTarget
                   checked={!allDisabled}
                   onChange={() => {}}
                   title={allDisabled ? "Enable provider" : "Disable provider"}