zevairouter 1.0.145 → 1.0.147

package/src/app/(dashboard)/dashboard/usage/components/OverviewCards.js

@@ -18,8 +18,7 @@ export default function OverviewCards({ stats }) {
       value: fmt(stats.totalRequests),
       icon: "send",
       valueClass: "text-text-main",
-      iconClass: "bg-primary/10 text-primary ring-primary/15",
-      accentClass: "from-primary via-primary/70 to-transparent",
+      iconClass: "bg-primary/[0.08] text-primary",
       detail: "All routed calls",
     },
     {
@@ -27,8 +26,7 @@ export default function OverviewCards({ stats }) {
       value: fmt(stats.totalPromptTokens),
       icon: "input",
       valueClass: "text-primary",
-      iconClass: "bg-primary/10 text-primary ring-primary/15",
-      accentClass: "from-primary via-primary/70 to-transparent",
+      iconClass: "bg-primary/[0.08] text-primary",
       detail: "Prompt and context",
     },
     {
@@ -36,17 +34,15 @@ export default function OverviewCards({ stats }) {
       value: fmt(cached),
       icon: "database",
       valueClass: "text-info",
-      iconClass: "bg-info/10 text-info ring-info/15",
-      accentClass: "from-info via-info/70 to-transparent",
-      detail: cached > 0 ? `${hitRate.toFixed(1)}% of input · cache rate` : "No cache hits yet",
+      iconClass: "bg-info/[0.08] text-info",
+      detail: cached > 0 ? `${hitRate.toFixed(1)}% cache rate` : "No cache hits yet",
     },
     {
       label: "Output Tokens",
       value: fmt(stats.totalCompletionTokens),
       icon: "output",
       valueClass: "text-success",
-      iconClass: "bg-success/10 text-success ring-success/15",
-      accentClass: "from-success via-success/70 to-transparent",
+      iconClass: "bg-success/[0.08] text-success",
       detail: "Generated responses",
     },
     {
@@ -54,8 +50,7 @@ export default function OverviewCards({ stats }) {
       value: `~${fmtCost(stats.totalCost)}`,
       icon: "payments",
       valueClass: "text-warning",
-      iconClass: "bg-warning/10 text-warning ring-warning/15",
-      accentClass: "from-warning via-warning/70 to-transparent",
+      iconClass: "bg-warning/[0.08] text-warning",
       detail: "Estimated, not billing",
       className: "col-span-2 sm:col-span-1",
     },
@@ -67,21 +62,20 @@ export default function OverviewCards({ stats }) {
         <Card
           key={metric.label}
           padding="none"
-          className={`group relative flex min-h-[118px] min-w-0 flex-col overflow-hidden p-3.5 transition-[border-color,box-shadow,transform] duration-200 hover:border-primary/20 sm:min-h-[130px] sm:p-4 ${metric.className || ""}`}
+          className={`relative flex min-h-[104px] min-w-0 flex-col overflow-hidden p-3.5 sm:min-h-[112px] sm:p-4 ${metric.className || ""}`}
         >
-          <span className={`absolute inset-x-0 top-0 h-0.5 bg-linear-to-r ${metric.accentClass}`} aria-hidden="true" />
           <div className="flex items-start justify-between gap-2">
-            <span className="pt-0.5 text-[11px] font-bold uppercase tracking-[0.09em] text-text-muted">
+            <span className="pt-0.5 text-xs font-semibold text-text-muted">
               {metric.label}
             </span>
-            <span className={`material-symbols-outlined flex size-7 shrink-0 items-center justify-center rounded-lg text-[16px] ring-1 transition-transform duration-300 group-hover:scale-105 ${metric.iconClass}`}>
+            <span className={`material-symbols-outlined flex size-7 shrink-0 items-center justify-center rounded-md text-[16px] ${metric.iconClass}`}>
               {metric.icon}
             </span>
           </div>
-          <span className={`mt-1.5 truncate text-[22px] font-bold tracking-[-0.02em] sm:text-2xl xl:text-[25px] ${metric.valueClass}`}>
+          <span className={`mt-1 truncate text-[22px] font-semibold tracking-[-0.02em] sm:text-2xl ${metric.valueClass}`}>
             {metric.value}
           </span>
-          <span className="mt-auto min-h-[30px] text-[11px] leading-[1.35] text-text-muted">{metric.detail}</span>
+          <span className="mt-auto text-[11px] leading-[1.3] text-text-muted">{metric.detail}</span>
         </Card>
       ))}
     </div>

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>

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

@@ -4,7 +4,11 @@ import { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import ProviderIcon from "@/shared/components/ProviderIcon";
 import QuotaTable from "./QuotaTable";
 import Toggle from "@/shared/components/Toggle";
-import { parseQuotaData, calculatePercentage } from "./utils";
+import {
+  parseQuotaData,
+  calculatePercentage,
+  getRemainingPercentage,
+} from "./utils";
 import Card from "@/shared/components/Card";
 import { EditConnectionModal } from "@/shared/components";
 import {
@@ -82,6 +86,22 @@ function getProviderDisplayName(provider) {
   return AI_PROVIDERS[provider]?.name || provider;
 }
 
+function getUrgentQuotaRows(quotas, limit = 3) {
+  return quotas
+    .map((quota, index) => ({ quota, index }))
+    .sort((a, b) => {
+      const remainingDiff = getRemainingPercentage(a.quota) - getRemainingPercentage(b.quota);
+      if (remainingDiff !== 0) return remainingDiff;
+
+      const resetA = a.quota.resetAt ? new Date(a.quota.resetAt).getTime() : Number.POSITIVE_INFINITY;
+      const resetB = b.quota.resetAt ? new Date(b.quota.resetAt).getTime() : Number.POSITIVE_INFINITY;
+      if (resetA !== resetB) return resetA - resetB;
+      return a.index - b.index;
+    })
+    .slice(0, limit)
+    .map(({ quota }) => quota);
+}
+
 function buildProviderAggregateCard(provider, providerConnections, quotaData, loading, errors) {
   if (!providerConnections.length) return null;
   const allQuotas = [];
@@ -363,6 +383,8 @@ export default function ProviderLimits() {
   const [quotaSortMode, setQuotaSortMode] = useState("default");
   const [expiringFirst, setExpiringFirst] = useState(false);
   const [providerMenuOpen, setProviderMenuOpen] = useState(false);
+  const [mobileActionsOpen, setMobileActionsOpen] = useState(false);
+  const [expandedQuotaCards, setExpandedQuotaCards] = useState({});
   const [bulkToggling, setBulkToggling] = useState(false);
   const [serverAggregateData, setServerAggregateData] = useState({});
   const [serverAggregateLoading, setServerAggregateLoading] = useState({});
@@ -965,13 +987,13 @@ export default function ProviderLimits() {
   return (
     <div className="space-y-6">
       {/* Header Controls */}
-      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-end">
-        <div className="flex flex-wrap items-center gap-1.5">
-          <div className="relative">
+      <div className="flex justify-end">
+        <div className="grid w-full grid-cols-[minmax(0,1fr)_minmax(0,1fr)_2.75rem] gap-2 sm:flex sm:w-auto sm:flex-wrap sm:items-center sm:gap-1.5">
+          <div className="relative min-w-0">
             <button
               type="button"
               onClick={() => setProviderMenuOpen((prev) => !prev)}
-              className="flex h-8 items-center justify-between gap-1 rounded-lg border border-black/10 bg-black/[0.02] px-2 text-xs text-text-primary transition-colors hover:bg-black/5 dark:border-white/10 dark:bg-white/[0.03] dark:hover:bg-white/10"
+              className="flex h-11 w-full min-w-0 items-center justify-between gap-1 rounded-xl border border-black/10 bg-black/[0.02] px-3 text-xs text-text-primary transition-colors hover:bg-black/5 dark:border-white/10 dark:bg-white/[0.03] dark:hover:bg-white/10 sm:h-8 sm:w-auto sm:rounded-lg sm:px-2"
               aria-haspopup="menu"
               aria-expanded={providerMenuOpen}
               title="Filter quota providers"
@@ -990,7 +1012,7 @@ export default function ProviderLimits() {
                     fallbackText={providerFilter.slice(0, 2).toUpperCase()}
                   />
                 )}
-                <span className="truncate capitalize hidden lg:inline">
+                <span className="truncate capitalize">
                   {selectedProviderLabel}
                 </span>
               </span>
@@ -1066,23 +1088,7 @@ export default function ProviderLimits() {
               </>
             )}
           </div>
-          <div className="inline-flex h-8 overflow-hidden rounded-lg border border-black/10 bg-black/[0.02] dark:border-white/10 dark:bg-white/[0.03]">
-            {QUOTA_DISPLAY_MODE_OPTIONS.map((option) => (
-              <button
-                key={option.value}
-                type="button"
-                onClick={() => setDisplayMode(option.value)}
-                aria-pressed={displayMode === option.value}
-                className={`flex h-full items-center gap-1.5 px-2 text-xs transition-colors ${displayMode === option.value ? "bg-primary text-white" : "text-text-primary hover:bg-black/5 dark:hover:bg-white/10"}`}
-                title={`Show quota in ${option.label} mode`}
-              >
-                <span className="material-symbols-outlined text-[14px]">
-                  {option.icon}
-                </span>
-                <span className="hidden sm:inline">{option.label}</span>
-              </button>
-            ))}
-          </div>
+
           <select
             value={accountFilter}
             onChange={(event) => {
@@ -1092,7 +1098,7 @@ export default function ProviderLimits() {
               }
               setAccountFilter(nextValue);
             }}
-            className="h-8 rounded-lg border border-black/10 bg-black/[0.02] px-2 text-xs text-text-primary outline-none transition-colors hover:bg-black/5 dark:border-white/10 dark:bg-white/[0.03] dark:hover:bg-white/10"
+            className="h-11 min-w-0 rounded-xl border border-black/10 bg-black/[0.02] px-3 text-xs text-text-primary outline-none transition-colors hover:bg-black/5 dark:border-white/10 dark:bg-white/[0.03] dark:hover:bg-white/10 sm:h-8 sm:rounded-lg sm:px-2"
             aria-label="Filter accounts by status"
           >
             {ACCOUNT_FILTER_OPTIONS.map((option) => (
@@ -1102,97 +1108,119 @@ export default function ProviderLimits() {
             ))}
           </select>
 
-          {providerFilter === "codex" && (
-            <select
-              value={quotaSortMode}
-              onChange={(event) => setQuotaSortMode(event.target.value)}
-              className="h-8 rounded-lg border border-black/10 bg-black/[0.02] px-2 text-xs text-text-primary outline-none transition-colors hover:bg-black/5 dark:border-white/10 dark:bg-white/[0.03] dark:hover:bg-white/10"
-              aria-label="Sort Codex quotas by remaining"
-            >
-              {QUOTA_SORT_OPTIONS.map((option) => (
-                <option key={option.value} value={option.value}>
-                  {option.label}
-                </option>
-              ))}
-            </select>
-          )}
-
           <button
             type="button"
-            onClick={() => setExpiringFirst((prev) => !prev)}
-            aria-pressed={expiringFirst}
-            className={`flex h-8 shrink-0 items-center gap-1 rounded-lg border px-2 text-xs transition-colors ${expiringFirst ? "border-amber-500/40 bg-amber-500/10 text-amber-500" : "border-black/10 text-text-primary hover:bg-black/5 dark:border-white/10 dark:hover:bg-white/5"}`}
-            title="Sort accounts by earliest quota reset time"
+            onClick={refreshAll}
+            disabled={refreshingAll}
+            className="flex size-11 shrink-0 items-center justify-center rounded-xl border border-black/10 text-xs text-text-primary transition-colors hover:bg-black/5 disabled:opacity-50 dark:border-white/10 dark:hover:bg-white/5 sm:size-8 sm:rounded-lg"
+            title="Refresh all"
+            aria-label="Refresh all quotas"
           >
-            <span className="material-symbols-outlined text-[14px]">
-              hourglass_top
+            <span
+              className={`material-symbols-outlined text-[18px] sm:text-[14px] ${refreshingAll ? "animate-spin" : ""}`}
+            >
+              refresh
             </span>
-            <span className="hidden sm:inline">Expiring first</span>
           </button>
 
-          {/* Bulk: disable depleted */}
+          <div className="col-span-2 inline-flex min-h-11 min-w-0 overflow-hidden rounded-xl border border-black/10 bg-black/[0.02] dark:border-white/10 dark:bg-white/[0.03] sm:h-8 sm:min-h-0 sm:rounded-lg">
+            {QUOTA_DISPLAY_MODE_OPTIONS.map((option) => (
+              <button
+                key={option.value}
+                type="button"
+                onClick={() => setDisplayMode(option.value)}
+                aria-pressed={displayMode === option.value}
+                className={`flex min-h-11 flex-1 items-center justify-center gap-1.5 px-3 text-xs font-medium transition-colors sm:min-h-0 sm:flex-none sm:justify-start sm:px-2 sm:font-normal ${displayMode === option.value ? "bg-primary text-white" : "text-text-primary hover:bg-black/5 dark:hover:bg-white/10"}`}
+                title={`Show quota in ${option.label} mode`}
+              >
+                <span className="material-symbols-outlined text-[17px] sm:text-[14px]">
+                  {option.icon}
+                </span>
+                <span>{option.label}</span>
+              </button>
+            ))}
+          </div>
           <button
             type="button"
-            onClick={handleDisableDepleted}
-            disabled={bulkToggling}
-            className="flex h-8 shrink-0 items-center gap-1 rounded-lg border border-red-500/30 px-2 text-xs text-red-500 transition-colors hover:bg-red-500/10 disabled:opacity-50"
-            title="Disable connections with depleted quota on the current page"
+            onClick={() => setMobileActionsOpen((prev) => !prev)}
+            aria-expanded={mobileActionsOpen}
+            className={`flex size-11 items-center justify-center rounded-xl border text-text-primary transition-colors sm:hidden ${mobileActionsOpen ? "border-primary/30 bg-primary/10 text-primary" : "border-black/10 hover:bg-black/5 dark:border-white/10 dark:hover:bg-white/5"}`}
+            aria-label={mobileActionsOpen ? "Hide more actions" : "Show more actions"}
           >
-            <span className="material-symbols-outlined text-[14px]">block</span>
-            <span className="hidden sm:inline">Turn off Empty</span>
+            <span className="material-symbols-outlined text-[20px]">tune</span>
           </button>
 
-          {/* Bulk: enable available */}
-          <button
-            type="button"
-            onClick={handleEnableAvailable}
-            disabled={bulkToggling}
-            className="flex h-8 shrink-0 items-center gap-1 rounded-lg border border-emerald-500/30 px-2 text-xs text-emerald-500 transition-colors hover:bg-emerald-500/10 disabled:opacity-50"
-            title="Enable connections that still have quota on the current page"
-          >
-            <span className="material-symbols-outlined text-[14px]">
-              check_circle
-            </span>
-            <span className="hidden sm:inline">Turn on Available</span>
-          </button>
+          <div className={`${mobileActionsOpen ? "flex" : "hidden"} col-span-3 flex-col gap-2 rounded-2xl border border-black/10 bg-black/[0.02] p-3 dark:border-white/10 dark:bg-white/[0.03] sm:contents`}>
+            {providerFilter === "codex" && (
+              <select
+                value={quotaSortMode}
+                onChange={(event) => setQuotaSortMode(event.target.value)}
+                className="h-11 w-full rounded-xl border border-black/10 bg-surface px-3 text-xs text-text-primary outline-none transition-colors hover:bg-black/5 dark:border-white/10 dark:hover:bg-white/10 sm:h-8 sm:w-auto sm:rounded-lg sm:bg-black/[0.02] sm:px-2 dark:sm:bg-white/[0.03]"
+                aria-label="Sort Codex quotas by remaining"
+              >
+                {QUOTA_SORT_OPTIONS.map((option) => (
+                  <option key={option.value} value={option.value}>
+                    {option.label}
+                  </option>
+                ))}
+              </select>
+            )}
 
-          {/* Auto-refresh toggle */}
-          <button
-            onClick={() => setAutoRefresh((prev) => !prev)}
-            className="flex h-8 shrink-0 items-center gap-1 rounded-lg border border-black/10 px-2 text-xs transition-colors hover:bg-black/5 dark:border-white/10 dark:hover:bg-white/5"
-            title={autoRefresh ? "Disable auto-refresh" : "Enable auto-refresh"}
-          >
-            <span
-              className={`material-symbols-outlined text-[14px] ${
-                autoRefresh ? "text-primary" : "text-text-muted"
-              }`}
+            <button
+              type="button"
+              onClick={() => setExpiringFirst((prev) => !prev)}
+              aria-pressed={expiringFirst}
+              className={`flex h-11 w-full shrink-0 items-center justify-between gap-2 rounded-xl border px-3 text-xs transition-colors sm:h-8 sm:w-auto sm:justify-start sm:rounded-lg sm:px-2 ${expiringFirst ? "border-amber-500/40 bg-amber-500/10 text-amber-600 dark:text-amber-400" : "border-black/10 bg-surface text-text-primary hover:bg-black/5 dark:border-white/10 dark:bg-transparent dark:hover:bg-white/5"}`}
+              title="Sort accounts by earliest quota reset time"
             >
-              {autoRefresh ? "toggle_on" : "toggle_off"}
-            </span>
-            <span className="hidden text-text-primary sm:inline">
-              Auto-refresh
-            </span>
-            {autoRefresh && (
-              <span className="text-[10px] text-text-muted tabular-nums">
-                ({countdown}s)
+              <span className="flex items-center gap-2">
+                <span className="material-symbols-outlined text-[18px] sm:text-[14px]">hourglass_top</span>
+                <span>Expiring first</span>
               </span>
-            )}
-          </button>
+              <span className="material-symbols-outlined text-[18px] sm:hidden">
+                {expiringFirst ? "check_circle" : "circle"}
+              </span>
+            </button>
 
-          {/* Refresh all button */}
-          <button
-            type="button"
-            onClick={refreshAll}
-            disabled={refreshingAll}
-            className="flex h-8 shrink-0 items-center gap-1 rounded-lg border border-black/10 px-2 text-xs text-text-primary transition-colors hover:bg-black/5 dark:border-white/10 dark:hover:bg-white/5 disabled:opacity-50"
-            title="Refresh all"
-          >
-            <span
-              className={`material-symbols-outlined text-[14px] ${refreshingAll ? "animate-spin" : ""}`}
+            <button
+              type="button"
+              onClick={handleDisableDepleted}
+              disabled={bulkToggling}
+              className="flex h-11 w-full shrink-0 items-center gap-2 rounded-xl border border-red-500/30 bg-surface px-3 text-xs text-red-500 transition-colors hover:bg-red-500/10 disabled:opacity-50 dark:bg-transparent sm:h-8 sm:w-auto sm:rounded-lg sm:px-2"
+              title="Disable connections with depleted quota on the current page"
             >
-              refresh
-            </span>
-          </button>
+              <span className="material-symbols-outlined text-[18px] sm:text-[14px]">block</span>
+              <span>Turn off Empty</span>
+            </button>
+
+            <button
+              type="button"
+              onClick={handleEnableAvailable}
+              disabled={bulkToggling}
+              className="flex h-11 w-full shrink-0 items-center gap-2 rounded-xl border border-emerald-500/30 bg-surface px-3 text-xs text-emerald-600 transition-colors hover:bg-emerald-500/10 disabled:opacity-50 dark:bg-transparent dark:text-emerald-400 sm:h-8 sm:w-auto sm:rounded-lg sm:px-2"
+              title="Enable connections that still have quota on the current page"
+            >
+              <span className="material-symbols-outlined text-[18px] sm:text-[14px]">check_circle</span>
+              <span>Turn on Available</span>
+            </button>
+
+            <button
+              type="button"
+              onClick={() => setAutoRefresh((prev) => !prev)}
+              className="flex h-11 w-full shrink-0 items-center justify-between gap-2 rounded-xl border border-black/10 bg-surface px-3 text-xs transition-colors hover:bg-black/5 dark:border-white/10 dark:bg-transparent dark:hover:bg-white/5 sm:h-8 sm:w-auto sm:justify-start sm:rounded-lg sm:px-2"
+              title={autoRefresh ? "Disable auto-refresh" : "Enable auto-refresh"}
+            >
+              <span className="flex items-center gap-2 text-text-primary">
+                <span className={`material-symbols-outlined text-[18px] sm:text-[14px] ${autoRefresh ? "text-primary" : "text-text-muted"}`}>
+                  {autoRefresh ? "toggle_on" : "toggle_off"}
+                </span>
+                <span>Auto-refresh</span>
+              </span>
+              {autoRefresh && (
+                <span className="text-[10px] text-text-muted tabular-nums">({countdown}s)</span>
+              )}
+            </button>
+          </div>
         </div>
       </div>
 
@@ -1210,6 +1238,11 @@ export default function ProviderLimits() {
           const quota = isAggregate ? conn.quota : quotaData[conn.id];
           const isLoading = isAggregate ? conn.isLoading : loading[conn.id];
           const error = isAggregate ? conn.error : errors[conn.id];
+          const quotaRows = quota?.quotas || [];
+          const quotaExpanded = expandedQuotaCards[conn.id] === true;
+          const mobileQuotaRows = quotaExpanded
+            ? quotaRows
+            : getUrgentQuotaRows(quotaRows);
 
           // Use table layout for all providers
           const isInactive = conn.isActive === false;
@@ -1221,7 +1254,7 @@ export default function ProviderLimits() {
               padding="none"
               className={`min-w-0 ${isInactive ? "opacity-60" : ""}`}
             >
-              <div className="px-3 py-2 border-b border-black/10 dark:border-white/10">
+              <div className="border-b border-black/10 px-3 py-2 dark:border-white/10">
                 <div className="flex items-center justify-between gap-2">
                   <div className="flex items-center gap-2 min-w-0">
                     <div className="w-8 h-8 shrink-0 rounded-md flex items-center justify-center overflow-hidden">
@@ -1247,7 +1280,7 @@ export default function ProviderLimits() {
                     </div>
                   </div>
 
-                  <div className="flex items-center gap-1 shrink-0">
+                  <div className="flex shrink-0 items-center gap-0.5 sm:gap-1">
                     <button
                       type="button"
                       onClick={() => (
@@ -1257,7 +1290,7 @@ export default function ProviderLimits() {
                       )}
                       disabled={isLoading || rowBusy}
                       aria-label="Refresh quota"
-                      className="p-1.5 rounded-lg hover:bg-black/5 dark:hover:bg-white/5 transition-colors disabled:opacity-50"
+                      className="flex size-11 items-center justify-center rounded-xl transition-colors hover:bg-black/5 disabled:opacity-50 dark:hover:bg-white/5 sm:size-8 sm:rounded-lg"
                       title="Refresh quota"
                     >
                       <span
@@ -1276,7 +1309,7 @@ export default function ProviderLimits() {
                           }}
                           disabled={rowBusy}
                           aria-label="Edit connection"
-                          className="p-1.5 rounded-lg hover:bg-black/5 dark:hover:bg-white/5 text-text-muted hover:text-primary transition-colors disabled:opacity-50"
+                          className="flex size-11 items-center justify-center rounded-xl text-text-muted transition-colors hover:bg-black/5 hover:text-primary disabled:opacity-50 dark:hover:bg-white/5 sm:size-8 sm:rounded-lg"
                           title="Edit connection"
                         >
                           <span className="material-symbols-outlined text-[18px]">
@@ -1288,7 +1321,7 @@ export default function ProviderLimits() {
                           onClick={() => handleDeleteConnection(conn.id)}
                           disabled={rowBusy}
                           aria-label="Delete connection"
-                          className="p-1.5 rounded-lg hover:bg-red-500/10 text-red-500 transition-colors disabled:opacity-50"
+                          className="flex size-11 items-center justify-center rounded-xl text-red-500 transition-colors hover:bg-red-500/10 disabled:opacity-50 sm:size-8 sm:rounded-lg"
                           title="Delete connection"
                         >
                           <span
@@ -1298,7 +1331,7 @@ export default function ProviderLimits() {
                           </span>
                         </button>
                         <div
-                          className="inline-flex items-center pl-0.5"
+                          className="inline-flex size-11 items-center justify-center sm:h-8 sm:w-auto sm:pl-0.5"
                           title={
                             (conn.isActive ?? true)
                               ? "Disable connection"
@@ -1307,6 +1340,7 @@ export default function ProviderLimits() {
                         >
                           <Toggle
                             size="sm"
+                            touchTarget
                             checked={conn.isActive ?? true}
                             disabled={rowBusy}
                             onChange={(nextActive) =>
@@ -1334,16 +1368,50 @@ export default function ProviderLimits() {
                     </span>
                     <p className="mt-1.5 text-xs text-text-muted">{error}</p>
                   </div>
-                ) : (quota?.quotas?.length > 0) ? (
+                ) : quotaRows.length > 0 ? (
                   <div className="space-y-2">
-                    <QuotaTable
-                      quotas={quota.quotas}
-                      compact
-                      sortMode="default"
-                      showSortLabel={
-                        conn.provider === "codex" && quotaSortMode !== "default"
-                      }
-                    />
+                    <div className="sm:hidden">
+                      <QuotaTable
+                        quotas={mobileQuotaRows}
+                        totalCount={quotaRows.length}
+                        paginate={false}
+                        compact
+                        sortMode="default"
+                        showSortLabel={
+                          conn.provider === "codex" && quotaSortMode !== "default"
+                        }
+                      />
+                      {quotaRows.length > 3 && (
+                        <button
+                          type="button"
+                          onClick={() => setExpandedQuotaCards((current) => ({
+                            ...current,
+                            [conn.id]: !quotaExpanded,
+                          }))}
+                          className="mt-2 flex h-11 w-full items-center justify-center gap-1.5 rounded-xl border border-black/10 bg-black/[0.02] text-xs font-medium text-text-primary transition-colors hover:bg-black/5 dark:border-white/10 dark:bg-white/[0.03] dark:hover:bg-white/5"
+                          aria-expanded={quotaExpanded}
+                        >
+                          <span>
+                            {quotaExpanded
+                              ? "Show less"
+                              : `Show ${quotaRows.length - mobileQuotaRows.length} more`}
+                          </span>
+                          <span className="material-symbols-outlined text-[18px]">
+                            {quotaExpanded ? "expand_less" : "expand_more"}
+                          </span>
+                        </button>
+                      )}
+                    </div>
+                    <div className="hidden sm:block">
+                      <QuotaTable
+                        quotas={quotaRows}
+                        compact
+                        sortMode="default"
+                        showSortLabel={
+                          conn.provider === "codex" && quotaSortMode !== "default"
+                        }
+                      />
+                    </div>
                     {quota?.message ? (
                       <p className="px-1 text-[10px] text-text-muted">{quota.message}</p>
                     ) : null}
@@ -1379,7 +1447,7 @@ export default function ProviderLimits() {
                     setCustomPageSizeInput(String(nextPageSize));
                   }
                 }}
-                className="h-8 rounded-lg border border-black/10 bg-black/[0.02] px-2 text-xs text-text-primary outline-none transition-colors hover:bg-black/5 dark:border-white/10 dark:bg-white/[0.03] dark:hover:bg-white/10"
+                className="h-11 rounded-xl border border-black/10 bg-black/[0.02] px-3 text-xs text-text-primary outline-none transition-colors hover:bg-black/5 dark:border-white/10 dark:bg-white/[0.03] dark:hover:bg-white/10 sm:h-8 sm:rounded-lg sm:px-2"
                 aria-label="Accounts per page"
               >
                 {ACCOUNT_PAGE_SIZE_OPTIONS.map((option) => (
@@ -1419,7 +1487,7 @@ export default function ProviderLimits() {
                   setPageSize(nextPageSize);
                   setCustomPageSizeInput(String(nextPageSize));
                 }}
-                className="h-8 w-20 rounded-lg border border-black/10 bg-black/[0.02] px-2 text-xs text-text-primary outline-none transition-colors hover:bg-black/5 dark:border-white/10 dark:bg-white/[0.03] dark:hover:bg-white/10"
+                className="h-11 w-24 rounded-xl border border-black/10 bg-black/[0.02] px-3 text-xs text-text-primary outline-none transition-colors hover:bg-black/5 dark:border-white/10 dark:bg-white/[0.03] dark:hover:bg-white/10 sm:h-8 sm:w-20 sm:rounded-lg sm:px-2"
                 aria-label="Custom accounts per page"
                 placeholder="Custom"
               />
@@ -1432,7 +1500,7 @@ export default function ProviderLimits() {
                 disabled={
                   pagination.page <= 1 || connectionsLoading || refreshingAll
                 }
-                className="flex h-8 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"
+                className="flex h-11 items-center rounded-xl 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-8 sm:rounded-lg"
               >
                 First Page
               </button>
@@ -1444,7 +1512,7 @@ export default function ProviderLimits() {
                 disabled={
                   pagination.page <= 1 || connectionsLoading || refreshingAll
                 }
-                className="flex h-8 w-8 items-center justify-center rounded-lg border border-black/10 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 size-11 items-center justify-center rounded-xl border border-black/10 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:size-8 sm:rounded-lg"
                 aria-label="Previous accounts page"
               >
                 <span className="material-symbols-outlined text-[16px]">
@@ -1463,7 +1531,7 @@ export default function ProviderLimits() {
                   connectionsLoading ||
                   refreshingAll
                 }
-                className="flex h-8 w-8 items-center justify-center rounded-lg border border-black/10 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 size-11 items-center justify-center rounded-xl border border-black/10 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:size-8 sm:rounded-lg"
                 aria-label="Next accounts page"
               >
                 <span className="material-symbols-outlined text-[16px]">
@@ -1478,7 +1546,7 @@ export default function ProviderLimits() {
                   connectionsLoading ||
                   refreshingAll
                 }
-                className="flex h-8 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"
+                className="flex h-11 items-center rounded-xl 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-8 sm:rounded-lg"
               >
                 Last Page
               </button>