zevairouter 1.0.145 → 1.0.146

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

@@ -29,28 +29,26 @@ import { useHeaderSearchStore } from "@/store/headerSearchStore";
 import ModelAvailabilityBadge from "./components/ModelAvailabilityBadge";
 
 function getStatusDisplay(connected, error, errorCode) {
-  const parts = [];
   if (connected > 0) {
-    parts.push(
-      <Badge key="connected" variant="success" size="sm" dot>
-        {connected} Connected
-      </Badge>,
+    return (
+      <span className="inline-flex min-w-0 items-center gap-1.5 text-[11px] font-medium text-success">
+        <span aria-hidden="true" className="size-1.5 shrink-0 rounded-full bg-success" />
+        {connected} connected
+      </span>
     );
   }
   if (error > 0) {
     const errText = errorCode
       ? `${error} Error (${errorCode})`
       : `${error} Error`;
-    parts.push(
-      <Badge key="error" variant="error" size="sm" dot>
+    return (
+      <span className="inline-flex min-w-0 items-center gap-1.5 text-[11px] font-medium text-error">
+        <span aria-hidden="true" className="size-1.5 shrink-0 rounded-full bg-error" />
         {errText}
-      </Badge>,
+      </span>
     );
   }
-  if (parts.length === 0) {
-    return <span className="text-text-muted">No connections</span>;
-  }
-  return parts;
+  return <span className="text-[11px] text-text-muted">No connections</span>;
 }
 
 function getConnectionErrorTag(connection) {
@@ -380,41 +378,35 @@ export default function ProvidersPage() {
     anthropicCompatibleProviders.length > 0;
 
   return (
-    <div className="flex min-w-0 flex-col gap-6 px-1 sm:px-0 lg:gap-7">
+    <div className="flex min-w-0 flex-col gap-6 px-1 sm:px-0">
       {totalConnections > 0 && (
-        <div className="overflow-hidden rounded-2xl border border-primary/15 bg-surface/85 shadow-[0_20px_45px_-38px_rgba(229,106,74,0.8)] backdrop-blur-sm">
-          <div className="grid grid-cols-2 divide-x divide-y divide-border-subtle sm:grid-cols-4 sm:divide-y-0">
-            <div className="col-span-2 flex items-center gap-3 px-4 py-3.5 sm:col-span-1">
-              <span className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary ring-1 ring-primary/15">
-                <span aria-hidden="true" className="material-symbols-outlined" style={{ fontSize: 20 }}>dns</span>
+        <div className="overflow-hidden rounded-xl border border-border bg-surface/80 shadow-sm">
+          <div className="grid grid-cols-3 divide-x divide-y divide-border-subtle sm:grid-cols-4 sm:divide-y-0">
+            <div className="col-span-3 flex items-center gap-3 px-4 py-3 sm:col-span-1">
+              <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/[0.08] text-primary">
+                <span aria-hidden="true" className="material-symbols-outlined" style={{ fontSize: 18 }}>dns</span>
               </span>
               <div>
-                <p className="text-[10px] font-bold uppercase tracking-[0.12em] text-text-muted">Connection health</p>
-                <p className="mt-0.5 text-sm font-semibold text-text-main">{activePercent}% active</p>
+                <p className="text-[11px] font-medium text-text-muted">Connection health</p>
+                <p className="mt-0.5 text-sm font-semibold tabular-nums text-text-main">{activePercent}% active</p>
               </div>
             </div>
-            <div className="px-4 py-3.5">
-              <p className="text-[10px] font-bold uppercase tracking-[0.1em] text-text-muted">Connections</p>
-              <p className="mt-1 text-xl font-bold tracking-tight text-text-main">{totalConnections}</p>
+            <div className="px-4 py-3">
+              <p className="text-[11px] font-medium text-text-muted">Connections</p>
+              <p className="mt-0.5 text-lg font-semibold tabular-nums text-text-main">{totalConnections}</p>
             </div>
-            <div className="px-4 py-3.5">
-              <p className="text-[10px] font-bold uppercase tracking-[0.1em] text-text-muted">Active</p>
-              <div className="mt-1 flex items-baseline gap-2">
-                <p className="text-xl font-bold tracking-tight text-success">{activeConnections}</p>
+            <div className="px-4 py-3">
+              <p className="text-[11px] font-medium text-text-muted">Active</p>
+              <div className="mt-0.5 flex items-baseline gap-2">
+                <p className="text-lg font-semibold tabular-nums text-success">{activeConnections}</p>
                 {pausedConnections > 0 && <span className="text-[10px] text-text-muted">{pausedConnections} paused</span>}
               </div>
             </div>
-            <div className="px-4 py-3.5">
-              <p className="text-[10px] font-bold uppercase tracking-[0.1em] text-text-muted">Providers</p>
-              <p className="mt-1 text-xl font-bold tracking-tight text-info">{connectedProviderCount}</p>
+            <div className="px-4 py-3">
+              <p className="text-[11px] font-medium text-text-muted">Providers</p>
+              <p className="mt-0.5 text-lg font-semibold tabular-nums text-info">{connectedProviderCount}</p>
             </div>
           </div>
-          {totalConnections >= 100 && (
-            <div className="flex items-center gap-2 border-t border-border-subtle bg-surface-2/35 px-4 py-2 text-[11px] text-text-muted">
-              <span aria-hidden="true" className="material-symbols-outlined text-[15px] text-primary">filter_alt</span>
-              Open a provider to search and filter its paginated connections.
-            </div>
-          )}
         </div>
       )}
       {loadError && (
@@ -453,7 +445,7 @@ export default function ProvidersPage() {
               variant="secondary"
               icon="add"
               onClick={() => setShowAddCompatibleModal(true)}
-              className="w-full !bg-white !text-black hover:!bg-gray-100 sm:w-auto"
+              className="w-full sm:w-auto"
             >
               Add OpenAI Compatible
             </Button>
@@ -469,7 +461,7 @@ export default function ProvidersPage() {
             </div>
           </div>
         ) : (
-          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4 lg:grid-cols-3 xl:grid-cols-4">
+          <div className="grid grid-cols-1 gap-2.5 sm:grid-cols-2 sm:gap-3 lg:grid-cols-3 xl:grid-cols-4">
             {[...compatibleProviders, ...anthropicCompatibleProviders].map(
               (info) => (
                 <ApiKeyProviderCard
@@ -477,7 +469,6 @@ export default function ProvidersPage() {
                   providerId={info.id}
                   provider={info}
                   stats={getProviderStats(info.id, "apikey")}
-                  authType="compatible"
                   onToggle={(active) =>
                     handleToggleProvider(info.id, "apikey", active)
                   }
@@ -518,14 +509,13 @@ export default function ProvidersPage() {
             </button>
           </div>
         </ProviderSectionHeader>
-        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4 lg:grid-cols-3 xl:grid-cols-4">
+        <div className="grid grid-cols-1 gap-2.5 sm:grid-cols-2 sm:gap-3 lg:grid-cols-3 xl:grid-cols-4">
           {oauthEntries.map(([key, info]) => (
             <ProviderCard
               key={key}
               providerId={key}
               provider={info}
               stats={getProviderStats(key, "oauth")}
-              authType="oauth"
               onToggle={(active) => handleToggleProvider(key, "oauth", active)}
             />
           ))}
@@ -560,7 +550,7 @@ export default function ProvidersPage() {
             {testingMode === "free" ? "Testing..." : "Test All"}
           </button>
         </ProviderSectionHeader>
-        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4 lg:grid-cols-3 xl:grid-cols-4">
+        <div className="grid grid-cols-1 gap-2.5 sm:grid-cols-2 sm:gap-3 lg:grid-cols-3 xl:grid-cols-4">
           {freeEntries.map(([key, info]) => {
             const hasApiKeyMode = Array.isArray(info?.authModes) && info.authModes.includes("apikey");
             const statAuthTypes = hasApiKeyMode ? ["oauth", "apikey"] : "oauth";
@@ -570,7 +560,6 @@ export default function ProvidersPage() {
               providerId={key}
               provider={info}
               stats={getProviderStats(key, statAuthTypes)}
-              authType="free"
               onToggle={(active) => handleToggleProvider(key, hasApiKeyMode ? "apikey" : "oauth", active)}
             />
             );
@@ -581,7 +570,6 @@ export default function ProvidersPage() {
               providerId={key}
               provider={info}
               stats={getProviderStats(key, "apikey")}
-              authType="apikey"
               onToggle={(active) => handleToggleProvider(key, "apikey", active)}
             />
           ))}
@@ -616,14 +604,13 @@ export default function ProvidersPage() {
             {testingMode === "apikey" ? "Testing..." : "Test All"}
           </button>
         </ProviderSectionHeader>
-        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4 lg:grid-cols-3 xl:grid-cols-4">
+        <div className="grid grid-cols-1 gap-2.5 sm:grid-cols-2 sm:gap-3 lg:grid-cols-3 xl:grid-cols-4">
           {visibleApikeyEntries.map(([key, info]) => (
             <ApiKeyProviderCard
               key={key}
               providerId={key}
               provider={info}
               stats={getProviderStats(key, "apikey")}
-              authType="apikey"
               onToggle={(active) => handleToggleProvider(key, "apikey", active)}
             />
           ))}
@@ -657,7 +644,6 @@ export default function ProvidersPage() {
               providerId={key}
               provider={info}
               stats={getProviderStats(key, "apikey")}
-              authType="apikey"
               onToggle={(active) => handleToggleProvider(key, "apikey", active)}
             />
           ))}
@@ -715,13 +701,13 @@ export default function ProvidersPage() {
 function ProviderSectionHeader({ icon, title, description, children }) {
   return (
     <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-      <div className="flex min-w-0 items-center gap-3">
-        <span aria-hidden="true" className="material-symbols-outlined flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-[20px] text-primary ring-1 ring-primary/15">
+      <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 sm:text-xl">{title}</h2>
-          <p className="mt-0.5 text-xs text-text-muted">{description}</p>
+          <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>
       </div>
       {children}
@@ -736,39 +722,20 @@ ProviderSectionHeader.propTypes = {
   children: PropTypes.node,
 };
 
-function ProviderCard({ providerId, provider, stats, authType, onToggle }) {
+function ProviderCard({ providerId, provider, stats, onToggle }) {
   const { connected, error, errorCode, allDisabled } = stats;
   const isNoAuth = !!provider.noAuth;
-  const isReady = !allDisabled && (connected > 0 || isNoAuth);
-
-  const dotColors = {
-    free: "bg-green-500",
-    oauth: "bg-blue-500",
-    apikey: "bg-amber-500",
-    compatible: "bg-orange-500",
-  };
-  const dotLabels = {
-    free: "Free",
-    oauth: "OAuth",
-    apikey: "API Key",
-    compatible: "Compatible",
-  };
 
   return (
     <Link href={`/dashboard/providers/${providerId}`} className="group min-w-0">
       <Card
         padding="none"
-        className={`relative h-[82px] min-h-[82px] cursor-pointer overflow-hidden transition-[border-color,box-shadow,opacity] sm:h-[94px] sm:min-h-[94px] ${
-          isReady
-            ? "border-success/25 bg-linear-to-br from-success/[0.045] to-transparent"
-            : "group-hover:border-primary/25"
-        } ${allDisabled ? "opacity-55" : ""}`}
+        className={`relative h-[76px] min-h-[76px] cursor-pointer overflow-hidden transition-[border-color,box-shadow,opacity] group-hover:border-primary/30 group-hover:shadow-[0_10px_26px_-22px_rgba(229,106,74,0.55)] sm:h-[78px] sm:min-h-[78px] ${allDisabled ? "opacity-55" : ""}`}
       >
-        {isReady && <span className="absolute inset-y-3 left-0 w-0.5 rounded-r-full bg-success" />}
-        <div className="flex h-full min-w-0 items-center justify-between gap-3 p-3.5">
-          <div className="flex min-w-0 items-center gap-3">
+        <div className="flex h-full min-w-0 items-center justify-between gap-2.5 p-3">
+          <div className="flex min-w-0 items-center gap-2.5">
             <div
-              className="flex size-10 shrink-0 items-center justify-center rounded-xl ring-1 ring-black/[0.04] dark:ring-white/[0.06]"
+              className="flex size-9 shrink-0 items-center justify-center rounded-lg ring-1 ring-black/[0.04] dark:ring-white/[0.06]"
               style={{
                 backgroundColor: `${provider.color?.length > 7 ? provider.color : provider.color + "15"}`,
               }}
@@ -776,8 +743,8 @@ function ProviderCard({ providerId, provider, stats, authType, onToggle }) {
               <ProviderIcon
                 src={`/providers/${provider.id}.png`}
                 alt=""
-                size={30}
-                className="max-h-[32px] max-w-[32px] rounded-lg object-contain"
+                size={28}
+                className="max-h-7 max-w-7 rounded-md object-contain"
                 fallbackText={
                   provider.textIcon || provider.id.slice(0, 2).toUpperCase()
                 }
@@ -786,26 +753,19 @@ function ProviderCard({ providerId, provider, stats, authType, onToggle }) {
             </div>
             <div className="min-w-0">
               <h3 className="truncate text-sm font-semibold text-text-main">{provider.name}</h3>
-              <div className="mt-1 flex min-w-0 items-center gap-1.5 overflow-hidden whitespace-nowrap text-xs">
-                <span className="inline-flex items-center gap-1 text-[10px] font-medium text-text-muted">
-                  <span aria-hidden="true" className={`size-1.5 rounded-full ${dotColors[authType] || "bg-text-muted"}`} />
-                  {dotLabels[authType] || "Provider"}
-                </span>
+              <div className="mt-1 flex min-w-0 items-center overflow-hidden whitespace-nowrap">
                 {allDisabled ? (
-                  <Badge variant="default" size="sm">
-                    <span className="flex items-center gap-1">
-                      <span className="material-symbols-outlined text-[12px]">
-                        pause_circle
-                      </span>
-                      Disabled
-                    </span>
-                  </Badge>
+                  <span className="inline-flex items-center gap-1 text-[11px] text-text-muted">
+                    <span aria-hidden="true" className="material-symbols-outlined text-[13px]">pause_circle</span>
+                    Disabled
+                  </span>
                 ) : isNoAuth ? (
-                  <Badge variant="success" size="sm" dot>Ready</Badge>
+                  <span className="inline-flex items-center gap-1.5 text-[11px] font-medium text-success">
+                    <span aria-hidden="true" className="size-1.5 rounded-full bg-success" />
+                    Ready
+                  </span>
                 ) : (
-                  <>
-                    {getStatusDisplay(connected, error, errorCode)}
-                  </>
+                  getStatusDisplay(connected, error, errorCode)
                 )}
               </div>
             </div>
@@ -828,7 +788,7 @@ function ProviderCard({ providerId, provider, stats, authType, onToggle }) {
                 />
               </div>
             )}
-            <span aria-hidden="true" className="material-symbols-outlined text-[18px] text-text-subtle transition-[transform,color] group-hover:translate-x-0.5 group-hover:text-primary">
+            <span aria-hidden="true" className="material-symbols-outlined text-[17px] text-text-subtle transition-[transform,color] group-hover:translate-x-0.5 group-hover:text-primary">
               chevron_right
             </span>
           </div>
@@ -854,7 +814,6 @@ ProviderCard.propTypes = {
     total: PropTypes.number,
     allDisabled: PropTypes.bool,
   }).isRequired,
-  authType: PropTypes.string,
   onToggle: PropTypes.func,
 };
 
@@ -862,29 +821,14 @@ function ApiKeyProviderCard({
   providerId,
   provider,
   stats,
-  authType,
   onToggle,
 }) {
   const { connected, error, errorCode, allDisabled } = stats;
-  const isReady = !allDisabled && connected > 0;
   const isCompatible = providerId.startsWith(OPENAI_COMPATIBLE_PREFIX);
   const isAnthropicCompatible = providerId.startsWith(
     ANTHROPIC_COMPATIBLE_PREFIX,
   );
 
-  const dotColors = {
-    free: "bg-green-500",
-    oauth: "bg-blue-500",
-    apikey: "bg-amber-500",
-    compatible: "bg-orange-500",
-  };
-  const dotLabels = {
-    free: "Free",
-    oauth: "OAuth",
-    apikey: "API Key",
-    compatible: "Compatible",
-  };
-
   const getIconPath = () => {
     if (provider.id === "featherless") return null;
     if (isCompatible)
@@ -899,17 +843,12 @@ function ApiKeyProviderCard({
     <Link href={`/dashboard/providers/${providerId}`} className="group min-w-0">
       <Card
         padding="none"
-        className={`relative h-[82px] min-h-[82px] cursor-pointer overflow-hidden transition-[border-color,box-shadow,opacity] sm:h-[94px] sm:min-h-[94px] ${
-          isReady
-            ? "border-success/25 bg-linear-to-br from-success/[0.045] to-transparent"
-            : "group-hover:border-primary/25"
-        } ${allDisabled ? "opacity-55" : ""}`}
+        className={`relative h-[76px] min-h-[76px] cursor-pointer overflow-hidden transition-[border-color,box-shadow,opacity] group-hover:border-primary/30 group-hover:shadow-[0_10px_26px_-22px_rgba(229,106,74,0.55)] sm:h-[78px] sm:min-h-[78px] ${allDisabled ? "opacity-55" : ""}`}
       >
-        {isReady && <span className="absolute inset-y-3 left-0 w-0.5 rounded-r-full bg-success" />}
-        <div className="flex h-full min-w-0 items-center justify-between gap-3 p-3.5">
-          <div className="flex min-w-0 items-center gap-3">
+        <div className="flex h-full min-w-0 items-center justify-between gap-2.5 p-3">
+          <div className="flex min-w-0 items-center gap-2.5">
             <div
-              className="flex size-10 shrink-0 items-center justify-center rounded-xl ring-1 ring-black/[0.04] dark:ring-white/[0.06]"
+              className="flex size-9 shrink-0 items-center justify-center rounded-lg ring-1 ring-black/[0.04] dark:ring-white/[0.06]"
               style={{
                 backgroundColor: `${provider.color?.length > 7 ? provider.color : provider.color + "15"}`,
               }}
@@ -917,8 +856,8 @@ function ApiKeyProviderCard({
               <ProviderIcon
                 src={getIconPath()}
                 alt=""
-                size={30}
-                className="max-h-[32px] max-w-[32px] rounded-lg object-contain"
+                size={28}
+                className="max-h-7 max-w-7 rounded-md object-contain"
                 fallbackText={
                   provider.textIcon || provider.id.slice(0, 2).toUpperCase()
                 }
@@ -927,34 +866,22 @@ function ApiKeyProviderCard({
             </div>
             <div className="min-w-0">
               <h3 className="truncate text-sm font-semibold text-text-main">{provider.name}</h3>
-              <div className="mt-1 flex min-w-0 items-center gap-1.5 overflow-hidden whitespace-nowrap text-xs">
-                <span className="inline-flex items-center gap-1 text-[10px] font-medium text-text-muted">
-                  <span aria-hidden="true" className={`size-1.5 rounded-full ${dotColors[authType] || "bg-text-muted"}`} />
-                  {dotLabels[authType] || "Provider"}
-                </span>
+              <div className="mt-1 flex min-w-0 items-center gap-1.5 overflow-hidden whitespace-nowrap">
                 {allDisabled ? (
-                  <Badge variant="default" size="sm">
-                    <span className="flex items-center gap-1">
-                      <span className="material-symbols-outlined text-[12px]">
-                        pause_circle
-                      </span>
-                      Disabled
-                    </span>
-                  </Badge>
+                  <span className="inline-flex items-center gap-1 text-[11px] text-text-muted">
+                    <span aria-hidden="true" className="material-symbols-outlined text-[13px]">pause_circle</span>
+                    Disabled
+                  </span>
                 ) : (
                   <>
                     {getStatusDisplay(connected, error, errorCode)}
                     {isCompatible && (
-                      <Badge variant="default" size="sm">
-                        {provider.apiType === "responses"
-                          ? "Responses"
-                          : "Chat"}
-                      </Badge>
+                      <span className="text-[10px] text-text-subtle">
+                        · {provider.apiType === "responses" ? "Responses" : "Chat"}
+                      </span>
                     )}
                     {isAnthropicCompatible && (
-                      <Badge variant="default" size="sm">
-                        Messages
-                      </Badge>
+                      <span className="text-[10px] text-text-subtle">· Messages</span>
                     )}
                   </>
                 )}
@@ -979,7 +906,7 @@ function ApiKeyProviderCard({
                 />
               </div>
             )}
-            <span aria-hidden="true" className="material-symbols-outlined text-[18px] text-text-subtle transition-[transform,color] group-hover:translate-x-0.5 group-hover:text-primary">
+            <span aria-hidden="true" className="material-symbols-outlined text-[17px] text-text-subtle transition-[transform,color] group-hover:translate-x-0.5 group-hover:text-primary">
               chevron_right
             </span>
           </div>
@@ -1006,7 +933,6 @@ ApiKeyProviderCard.propTypes = {
     total: PropTypes.number,
     allDisabled: PropTypes.bool,
   }).isRequired,
-  authType: PropTypes.string,
   onToggle: PropTypes.func,
 };
 

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/ProviderTopology.js

@@ -15,7 +15,7 @@ import { AI_PROVIDERS } from "@/shared/constants/providers";
 // Force-stop FE animation if a provider stays active longer than this
 const FE_ACTIVE_TIMEOUT_MS = 60000;
 const FE_ACTIVE_TICK_MS = 1000;
-const FIT_OPTS = { padding: 0.2, duration: 200 };
+const FIT_OPTS = { padding: 0.14, duration: 200 };
 
 function getProviderConfig(providerId) {
   return AI_PROVIDERS[providerId] || { color: "#6b7280", name: providerId };
@@ -32,11 +32,11 @@ function ProviderNode({ data }) {
   const [imgError, setImgError] = useState(false);
   return (
     <div
-      className="flex items-center gap-2.5 px-4 py-2.5 rounded-lg border-2 transition-all duration-300 bg-bg"
+      className="flex items-center gap-2 rounded-lg border bg-surface px-3 py-2 transition-all duration-300"
       style={{
         borderColor: active ? color : "var(--color-border)",
-        boxShadow: active ? `0 0 16px ${color}40` : "none",
-        minWidth: "150px",
+        boxShadow: active ? `0 0 12px ${color}30` : "none",
+        minWidth: "140px",
       }}
     >
       <Handle type="target" position={Position.Top} id="top" className="!bg-transparent !border-0 !w-0 !h-0" />
@@ -46,19 +46,19 @@ function ProviderNode({ data }) {
 
       {/* Provider icon */}
       <div
-        className="w-8 h-8 rounded-md flex items-center justify-center shrink-0"
+        className="flex size-7 shrink-0 items-center justify-center rounded-md"
         style={{ backgroundColor: `${color}15` }}
       >
         {!imgError ? (
-          <img src={imageUrl} alt={label} className="w-6 h-6 rounded-sm object-contain" onError={() => setImgError(true)} />
+          <img src={imageUrl} alt={label} className="size-5 rounded-sm object-contain" onError={() => setImgError(true)} />
         ) : (
-          <span className="text-sm font-bold" style={{ color }}>{textIcon}</span>
+          <span className="text-xs font-bold" style={{ color }}>{textIcon}</span>
         )}
       </div>
 
       {/* Provider name */}
       <span
-        className="text-base font-medium truncate"
+        className="truncate text-sm font-medium"
         style={{ color: active ? color : "var(--color-text)" }}
       >
         {label}
@@ -82,16 +82,16 @@ ProviderNode.propTypes = {
 // Center ZevaiRouter node
 function RouterNode({ data }) {
   return (
-    <div className="flex items-center justify-center px-5 py-3 rounded-xl border-2 border-primary bg-primary/5 shadow-md min-w-[130px]">
+    <div className="flex min-w-[118px] items-center justify-center rounded-lg border border-primary bg-primary/[0.06] px-4 py-2.5 shadow-sm">
       <Handle type="source" position={Position.Top} id="top" className="!bg-transparent !border-0 !w-0 !h-0" />
       <Handle type="source" position={Position.Bottom} id="bottom" className="!bg-transparent !border-0 !w-0 !h-0" />
       <Handle type="source" position={Position.Left} id="left" className="!bg-transparent !border-0 !w-0 !h-0" />
       <Handle type="source" position={Position.Right} id="right" className="!bg-transparent !border-0 !w-0 !h-0" />
 
-      <img src="/favicon.svg" alt="ZevaiRouter" className="w-6 h-6 mr-2" />
-      <span className="text-sm font-bold text-primary">ZevaiRouter</span>
+      <img src="/favicon.svg" alt="ZevaiRouter" className="mr-2 size-5" />
+      <span className="text-xs font-semibold text-primary">ZevaiRouter</span>
       {data.activeCount > 0 && (
-        <span className="ml-2 px-1.5 py-0.5 rounded-full bg-primary text-white text-xs font-bold">
+        <span className="ml-2 rounded-full bg-primary px-1.5 py-0.5 text-[10px] font-semibold text-white">
           {data.activeCount}
         </span>
       )}
@@ -107,18 +107,18 @@ const nodeTypes = { provider: ProviderNode, router: RouterNode };
 
 // Place N nodes evenly along an ellipse around the router center.
 function buildLayout(providers, activeSet, lastSet, errorSet) {
-  const nodeW = 180;
-  const nodeH = 30;
-  const routerW = 120;
-  const routerH = 44;
-  const nodeGap = 24;
+  const nodeW = 160;
+  const nodeH = 44;
+  const routerW = 118;
+  const routerH = 40;
+  const nodeGap = 20;
 
   const count = providers.length;
 
   // Compute rx so arc spacing between nodes >= nodeW + nodeGap
   const minRx = ((nodeW + nodeGap) * count) / (2 * Math.PI);
-  const rx = Math.max(320, minRx);
-  const ry = Math.max(200, rx * 0.55); // ellipse ratio ~0.55
+  const rx = Math.max(270, minRx);
+  const ry = Math.max(150, rx * 0.52);
   if (count === 0) {
     return {
       nodes: [{ id: "router", type: "router", position: { x: 0, y: 0 }, data: { activeCount: 0 }, draggable: false }],
@@ -283,13 +283,13 @@ export default function ProviderTopology({ providers = [], activeRequests = [],
   }, [nodes.length]);
 
   return (
-    <div ref={containerRef} className="flex h-[360px] w-full min-w-0 flex-col overflow-hidden rounded-[14px] border border-border-subtle bg-surface/94 shadow-[0_14px_34px_-26px_rgba(15,23,42,0.28)] sm:h-[480px]">
+    <div ref={containerRef} className="flex h-[340px] w-full min-w-0 flex-col overflow-hidden rounded-[14px] border border-border-subtle bg-surface/94 shadow-[0_14px_34px_-26px_rgba(15,23,42,0.28)] sm:h-[440px]">
       <div className="flex shrink-0 items-center justify-between border-b border-border-subtle bg-surface/75 px-4 py-3.5">
         <div className="flex items-center gap-2">
           <span className="material-symbols-outlined text-[17px] text-primary">route</span>
-          <span className="text-xs font-bold uppercase tracking-[0.08em] text-text-muted">Routing Map</span>
+          <span className="text-xs font-semibold text-text-main">Routing map</span>
         </div>
-        <span className="rounded-full bg-primary/[0.08] px-2 py-1 text-[10px] font-semibold text-primary ring-1 ring-primary/15">
+        <span className="text-[11px] font-medium text-text-muted">
           {providers.length} {providers.length === 1 ? "provider" : "providers"}
         </span>
       </div>