zevairouter 1.0.146 → 1.0.148

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"}

package/src/app/(dashboard)/dashboard/usage/components/ProviderLimits/QuotaTable.js

@@ -89,6 +89,8 @@ export default function QuotaTable({
   compact = false,
   sortMode = "default",
   showSortLabel = false,
+  paginate = true,
+  totalCount,
 }) {
   const [page, setPage] = useState(1);
 
@@ -106,7 +108,9 @@ export default function QuotaTable({
     [normalizedQuotas, sortMode],
   );
 
-  const totalPages = Math.max(1, Math.ceil(sortedQuotas.length / PAGE_SIZE));
+  const totalPages = paginate
+    ? Math.max(1, Math.ceil(sortedQuotas.length / PAGE_SIZE))
+    : 1;
 
   useEffect(() => {
     // eslint-disable-next-line react-hooks/set-state-in-effect -- pagination reset: returns to page 1 when sort mode or data changes
@@ -122,12 +126,14 @@ export default function QuotaTable({
     return null;
   }
 
-  const currentPageRows = sortedQuotas.slice(
-    (page - 1) * PAGE_SIZE,
-    page * PAGE_SIZE,
-  );
+  const currentPageRows = paginate
+    ? sortedQuotas.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE)
+    : sortedQuotas;
   const pageStart = sortedQuotas.length === 0 ? 0 : (page - 1) * PAGE_SIZE + 1;
-  const pageEnd = Math.min(page * PAGE_SIZE, sortedQuotas.length);
+  const pageEnd = paginate
+    ? Math.min(page * PAGE_SIZE, sortedQuotas.length)
+    : sortedQuotas.length;
+  const displayedTotal = Number.isFinite(totalCount) ? totalCount : sortedQuotas.length;
 
   const cellPad = compact ? "py-1 px-1.5" : "py-2 px-3";
   const nameText = compact ? "text-[11px]" : "text-sm";
@@ -139,7 +145,7 @@ export default function QuotaTable({
     <div className="space-y-2">
       <div className="flex items-center justify-between gap-2">
         <div className="text-[10px] text-text-muted">
-          {sortedQuotas.length} quota{sortedQuotas.length > 1 ? "s" : ""}
+          {displayedTotal} quota{displayedTotal > 1 ? "s" : ""}
         </div>
         {showSortLabel && (
           <div className="rounded-md border border-black/10 bg-black/[0.02] px-2 py-1 text-[10px] text-text-muted dark:border-white/10 dark:bg-white/[0.03]">
@@ -243,7 +249,7 @@ export default function QuotaTable({
               type="button"
               onClick={() => setPage((currentPage) => Math.max(1, currentPage - 1))}
               disabled={page === 1}
-              className="flex h-6 items-center rounded-md border border-black/10 px-2 text-[10px] text-text-primary transition-colors hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-40 dark:border-white/10 dark:hover:bg-white/5"
+              className="flex h-11 items-center rounded-lg border border-black/10 px-3 text-xs text-text-primary transition-colors hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-40 dark:border-white/10 dark:hover:bg-white/5 sm:h-7 sm:rounded-md sm:px-2 sm:text-[10px]"
             >
               Prev
             </button>
@@ -251,7 +257,7 @@ export default function QuotaTable({
               type="button"
               onClick={() => setPage((currentPage) => Math.min(totalPages, currentPage + 1))}
               disabled={page === totalPages}
-              className="flex h-6 items-center rounded-md border border-black/10 px-2 text-[10px] text-text-primary transition-colors hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-40 dark:border-white/10 dark:hover:bg-white/5"
+              className="flex h-11 items-center rounded-lg border border-black/10 px-3 text-xs text-text-primary transition-colors hover:bg-black/5 disabled:cursor-not-allowed disabled:opacity-40 dark:border-white/10 dark:hover:bg-white/5 sm:h-7 sm:rounded-md sm:px-2 sm:text-[10px]"
             >
               Next
             </button>