zevairouter 1.0.142 → 1.0.143

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

@@ -833,14 +833,21 @@ export default function APIPageClient({ machineId }) {
   return (
     <div className="flex flex-col gap-6 lg:gap-7">
       {/* Endpoint Card */}
-      <Card>
-        <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
-          <span className="material-symbols-outlined text-primary">api</span>
-          API Endpoint
-        </h2>
+      <Card padding="none">
+        <div className="flex items-center gap-3 rounded-t-[13px] border-b border-border-subtle bg-linear-to-r from-primary/[0.07] via-primary/[0.025] to-transparent px-4 py-4 sm:px-5">
+          <span className="material-symbols-outlined flex size-11 shrink-0 items-center justify-center rounded-xl bg-primary/12 text-[22px] text-primary ring-1 ring-primary/15">
+            terminal
+          </span>
+          <div>
+            <h2 className="text-lg font-semibold leading-tight">API Endpoint</h2>
+            <p className="mt-0.5 text-xs text-text-muted">Choose how local and remote clients connect to Zevai Router.</p>
+          </div>
+        </div>
+
+        <div className="p-4 sm:p-5">
 
         {/* Endpoint rows */}
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-3">
           {/* Local */}
           <EndpointRow
             label="Local"
@@ -850,13 +857,13 @@ export default function APIPageClient({ machineId }) {
             onCopy={copy}
           />
           {/* Cloudflare Tunnel */}
-          <div className="flex items-center gap-2">
-            <span className={`text-xs font-mono px-1.5 py-0.5 rounded shrink-0 min-w-[88px] text-center ${
+          <div className="grid min-w-0 grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-2.5 rounded-xl border border-border-subtle bg-bg/55 p-3 transition-colors hover:border-primary/20 sm:flex">
+            <span className={`col-span-full inline-flex min-h-8 w-full shrink-0 items-center justify-center rounded-lg px-2.5 text-[11px] font-semibold uppercase tracking-[0.08em] sm:w-[96px] ${
               tunnelEnabled ? "bg-primary/10 text-primary" : "bg-surface-2 text-text-muted"
             }`}>Tunnel</span>
             {tunnelEnabled && !tunnelLoading && tunnelReachable ? (
               <>
-                <Input aria-label="Cloudflare Tunnel endpoint URL" value={`${tunnelPublicUrl || tunnelUrl}/v1`} readOnly className="flex-1 font-mono text-sm" />
+                <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"
@@ -942,13 +949,13 @@ export default function APIPageClient({ machineId }) {
             )}
           </div>
           {/* Tailscale */}
-          <div className="flex items-center gap-2">
-            <span className={`text-xs font-mono px-1.5 py-0.5 rounded shrink-0 min-w-[88px] text-center ${
+          <div className="grid min-w-0 grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-2.5 rounded-xl border border-border-subtle bg-bg/55 p-3 transition-colors hover:border-primary/20 sm:flex">
+            <span className={`col-span-full inline-flex min-h-8 w-full shrink-0 items-center justify-center rounded-lg px-2.5 text-[11px] font-semibold uppercase tracking-[0.08em] sm:w-[96px] ${
               tsEnabled ? "bg-primary/10 text-primary" : "bg-surface-2 text-text-muted"
             }`}>Tailscale</span>
             {tsEnabled && !tsLoading && tsReachable ? (
               <>
-                <Input aria-label="Tailscale endpoint URL" value={`${tsUrl}/v1`} readOnly className="flex-1 font-mono text-sm" />
+                <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"
@@ -1070,31 +1077,31 @@ export default function APIPageClient({ machineId }) {
               checked={tunnelDashboardAccess}
               onChange={() => handleTunnelDashboardAccess(!tunnelDashboardAccess)}
             />
-            <div className="flex items-center gap-1.5">
-              <p className="font-medium text-sm">Allow dashboard access via tunnel</p>
-              <Tooltip text="When enabled, the dashboard can be accessed through your tunnel or Tailscale URL (login still required). When disabled, dashboard access via tunnel/Tailscale is completely blocked." />
-            </div>
+            <Tooltip text="When enabled, the dashboard can be accessed through your tunnel or Tailscale URL (login still required). When disabled, dashboard access via tunnel/Tailscale is completely blocked." />
           </div>
         )}
+        </div>
       </Card>
 
       {/* Token Saver moved to its own page */}
-      <Card id="rtk">
-        <div className="flex items-center justify-between gap-4">
-          <div className="min-w-0">
-            <h2 className="text-lg font-semibold flex items-center gap-2">
-              <span className="material-symbols-outlined text-primary">bolt</span>
-              Token Saver
-            </h2>
-            <p className="text-sm text-text-muted mt-1">
-              RTK, Caveman, Ponytail, Headroom, and PXPIPE live on the Token Saver page.
-            </p>
+      <Card id="rtk" padding="none" className="relative overflow-hidden border-primary/20 bg-linear-to-br from-primary/[0.08] via-surface to-surface">
+        <div className="relative flex flex-col gap-4 p-5 sm:flex-row sm:items-center sm:justify-between">
+          <div className="flex min-w-0 items-center gap-3.5">
+            <span className="material-symbols-outlined flex size-11 shrink-0 items-center justify-center rounded-xl bg-primary text-[22px] text-white shadow-[0_10px_24px_-14px_rgba(229,106,74,0.9)]">
+              bolt
+            </span>
+            <div className="min-w-0">
+              <h2 className="text-lg font-semibold leading-tight">Token Saver</h2>
+              <p className="mt-1 text-sm text-text-muted">
+                Tune RTK, Caveman, Ponytail, Headroom, and PXPIPE in one workspace.
+              </p>
+            </div>
           </div>
           <Link
             href="/dashboard/token-saver"
-            className="shrink-0 inline-flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-sm font-medium text-text-main hover:border-primary/40 hover:text-primary transition-colors"
+            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"
           >
-            Open
+            Open workspace
             <span className="material-symbols-outlined text-[16px]">arrow_forward</span>
           </Link>
         </div>
@@ -1102,12 +1109,22 @@ export default function APIPageClient({ machineId }) {
 
       {/* API Keys */}
       <Card id="require-api-key">
-        <div className="flex items-center justify-between mb-4">
-          <h2 className="text-lg font-semibold flex items-center gap-2">
-            <span className="material-symbols-outlined text-primary">vpn_key</span>
-            API Keys
-          </h2>
-          <Button icon="add" onClick={() => setShowAddModal(true)}>
+        <div className="mb-5 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 className="material-symbols-outlined flex size-11 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-[21px] text-primary ring-1 ring-primary/15">
+              vpn_key
+            </span>
+            <div className="min-w-0">
+              <div className="flex flex-wrap items-center gap-2">
+                <h2 className="text-lg font-semibold leading-tight">API Keys</h2>
+                <span className="rounded-full bg-surface-2 px-2 py-0.5 text-[10px] font-semibold text-text-muted ring-1 ring-border-subtle">
+                  {keys.length} {keys.length === 1 ? "key" : "keys"}
+                </span>
+              </div>
+              <p className="mt-0.5 text-xs text-text-muted">Control authentication and spending per client.</p>
+            </div>
+          </div>
+          <Button icon="add" onClick={() => setShowAddModal(true)} className="w-full sm:w-auto">
             Create Key
           </Button>
         </div>
@@ -1118,18 +1135,25 @@ export default function APIPageClient({ machineId }) {
           </p>
         )}
 
-        <div className="flex flex-wrap items-center justify-between gap-3 pb-4 mb-4 border-b border-border">
-          <div>
-            <p className="font-medium">Require API key</p>
-            <p className="text-sm text-text-muted">
-              Requests without a valid key will be rejected
-            </p>
+        <div className="mb-4 flex flex-col gap-3 rounded-xl border border-primary/15 bg-primary/[0.045] p-4 sm:flex-row sm:items-center sm:justify-between">
+          <div className="flex items-start gap-3">
+            <span className="material-symbols-outlined mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg bg-surface text-[17px] text-primary ring-1 ring-border-subtle">
+              shield_lock
+            </span>
+            <div>
+              <p className="font-medium">Require API key</p>
+              <p className="mt-0.5 text-sm text-text-muted">
+                Reject requests that do not include a valid client key.
+              </p>
+            </div>
+          </div>
+          <div className="shrink-0 self-end sm:self-auto">
+            <Toggle
+              label="Require API key"
+              checked={requireApiKey}
+              onChange={() => handleRequireApiKey(!requireApiKey)}
+            />
           </div>
-          <Toggle
-            label="Require API key"
-            checked={requireApiKey}
-            onChange={() => handleRequireApiKey(!requireApiKey)}
-          />
         </div>
 
         {isRemoteHost && !requireApiKey && (
@@ -1139,7 +1163,7 @@ export default function APIPageClient({ machineId }) {
         )}
 
         {keys.length === 0 ? (
-          <div className="text-center py-12">
+          <div className="rounded-xl border border-dashed border-border bg-surface-2/25 py-12 text-center">
             <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 text-primary mb-4">
               <span className="material-symbols-outlined text-[32px]">vpn_key</span>
             </div>
@@ -1150,11 +1174,11 @@ export default function APIPageClient({ machineId }) {
             </Button>
           </div>
         ) : (
-          <div className="flex flex-col">
+          <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
             {keys.map((key) => (
               <div
                 key={key.id}
-                className={`group flex flex-wrap items-center justify-between gap-3 py-3 border-b border-black/[0.03] dark:border-white/[0.03] last:border-b-0 ${key.isActive === false ? "opacity-60" : ""}`}
+                className={`group flex min-w-0 flex-wrap items-center justify-between gap-3 rounded-xl border border-border-subtle bg-surface-2/25 p-4 transition-[border-color,box-shadow,opacity] hover:border-primary/20 hover:shadow-[0_14px_28px_-26px_rgba(15,23,42,0.65)] ${key.isActive === false ? "opacity-60" : ""}`}
               >
                 <div className="flex-1 min-w-0">
                   <p className="text-sm font-medium">{key.name}</p>
@@ -1192,7 +1216,7 @@ export default function APIPageClient({ machineId }) {
                     <p className="text-xs text-orange-500 mt-1">Paused</p>
                   )}
                   {/* Per-key budget caps (0 = unlimited) */}
-                  <div className="flex items-center gap-3 mt-2">
+                  <div className="mt-3 flex flex-wrap items-center gap-3">
                     <label className="flex items-center gap-1 text-[11px] text-text-muted">
                       Daily $
                       <input
@@ -1200,7 +1224,7 @@ export default function APIPageClient({ machineId }) {
                         disabled={keyPending === `budget:${key.id}`}
                         defaultValue={key.budgetDaily || 0}
                         onBlur={(e) => handleBudgetChange(key.id, "budgetDaily", e.target.value)}
-                        className="w-16 px-1 py-0.5 text-[11px] bg-transparent border border-border rounded"
+                        className="w-16 rounded border border-border bg-surface px-1 py-0.5 text-[11px]"
                         title="Daily budget cap in USD (0 = unlimited)"
                       />
                     </label>
@@ -1211,7 +1235,7 @@ export default function APIPageClient({ machineId }) {
                         disabled={keyPending === `budget:${key.id}`}
                         defaultValue={key.budgetMonthly || 0}
                         onBlur={(e) => handleBudgetChange(key.id, "budgetMonthly", e.target.value)}
-                        className="w-16 px-1 py-0.5 text-[11px] bg-transparent border border-border rounded"
+                        className="w-16 rounded border border-border bg-surface px-1 py-0.5 text-[11px]"
                         title="Monthly budget cap in USD (0 = unlimited)"
                       />
                     </label>
@@ -1484,14 +1508,15 @@ export default function APIPageClient({ machineId }) {
 /** Reusable endpoint row component */
 function EndpointRow({ label, url, copyId, copied, onCopy, badge, actions }) {
   return (
-    <div className="flex items-center gap-2">
-      <span className={`text-xs font-mono px-1.5 py-0.5 rounded shrink-0 min-w-[88px] text-center ${
+    <div className="grid min-w-0 grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-2.5 rounded-xl border border-border-subtle bg-bg/55 p-3 transition-colors hover:border-primary/20 sm:flex">
+      <span className={`col-span-full inline-flex min-h-8 w-full shrink-0 items-center justify-center rounded-lg px-2.5 text-[11px] font-semibold uppercase tracking-[0.08em] sm:w-[96px] ${
           (badge === "CF" || badge === "TS") ? "bg-primary/10 text-primary" : "bg-surface-2 text-text-muted"
         }`}>{label}</span>
-      <Input aria-label={`${label} endpoint URL`} value={url} readOnly className="flex-1 font-mono text-sm" />
+      <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"
+        aria-label={`Copy ${label} endpoint URL`}
       >
         <span className="material-symbols-outlined text-[18px]">{copied === copyId ? "check" : "content_copy"}</span>
       </button>
@@ -1528,7 +1553,7 @@ function Tooltip({ text }) {
   return (
     <span className="relative group inline-flex items-center">
       <span className="material-symbols-outlined text-[14px] text-text-muted cursor-help">help</span>
-      <span className="pointer-events-none absolute left-5 top-1/2 -translate-y-1/2 z-50 w-64 rounded bg-gray-900 dark:bg-gray-800 text-white text-xs px-2.5 py-1.5 opacity-0 group-hover:opacity-100 transition-opacity shadow-lg">
+      <span className="pointer-events-none absolute right-0 top-full z-50 mt-2 w-[min(16rem,calc(100vw-2rem))] rounded bg-gray-900 px-2.5 py-1.5 text-xs text-white opacity-0 shadow-lg transition-opacity group-hover:opacity-100 dark:bg-gray-800">
         {text}
       </span>
     </span>

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

@@ -218,6 +218,11 @@ export default function ProvidersPage() {
     () => connections.filter((c) => c.isActive !== false).length,
     [connections],
   );
+  const connectedProviderCount = connectionsByProvider.size;
+  const pausedConnections = Math.max(0, totalConnections - activeConnections);
+  const activePercent = totalConnections > 0
+    ? Math.round((activeConnections / totalConnections) * 100)
+    : 0;
 
   const getProviderStats = (providerId, authType) => {
     const authTypes = Array.isArray(authType) ? authType : [authType];
@@ -375,19 +380,40 @@ export default function ProvidersPage() {
     anthropicCompatibleProviders.length > 0;
 
   return (
-    <div className="flex min-w-0 flex-col gap-6 px-1 sm:px-0">
+    <div className="flex min-w-0 flex-col gap-6 px-1 sm:px-0 lg:gap-7">
       {totalConnections > 0 && (
-        <div className="flex flex-wrap items-center gap-2 rounded-xl border border-border-subtle bg-surface/60 px-4 py-2.5 text-xs text-text-muted">
-          <span className="material-symbols-outlined text-[16px] text-primary">dns</span>
-          <span>
-            <strong className="text-text-main">{totalConnections}</strong> connections loaded
-            {" · "}
-            <strong className="text-text-main">{activeConnections}</strong> active
-          </span>
+        <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>
+              </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>
+              </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>
+            <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>
+                {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>
+          </div>
           {totalConnections >= 100 && (
-            <span className="text-text-subtle">
-              Tip: open a provider → search/filter connections (paginated)
-            </span>
+            <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>
       )}
@@ -408,10 +434,11 @@ export default function ProvidersPage() {
 
       {/* Custom Providers (OpenAI/Anthropic Compatible) — dynamic */}
       <div className="flex flex-col gap-4">
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-          <h2 className="text-lg sm:text-xl font-semibold flex items-center gap-2 leading-tight">
-            Custom Providers (OpenAI/Anthropic Compatible){" "}
-          </h2>
+        <ProviderSectionHeader
+          icon="extension"
+          title="Custom Providers"
+          description="OpenAI and Anthropic-compatible endpoints"
+        >
           <div className="grid grid-cols-1 gap-2 sm:flex sm:w-auto">
             <Button
               size="sm"
@@ -431,12 +458,15 @@ export default function ProvidersPage() {
               Add OpenAI Compatible
             </Button>
           </div>
-        </div>
+        </ProviderSectionHeader>
         {compatibleProviders.length === 0 &&
         anthropicCompatibleProviders.length === 0 ? (
-          <div className="flex items-center justify-center gap-2 py-2 border border-dashed border-border rounded-xl text-text-muted text-sm">
-            <span className="material-symbols-outlined text-[18px]">extension</span>
-            <span>No custom providers — use buttons above to add OpenAI/Anthropic compatible endpoints</span>
+          <div className="flex items-center gap-3 rounded-xl border border-dashed border-border bg-surface/45 px-4 py-3 text-text-muted">
+            <span aria-hidden="true" className="material-symbols-outlined flex size-9 shrink-0 items-center justify-center rounded-lg bg-surface-2 text-[18px]">add_link</span>
+            <div>
+              <p className="text-sm font-medium text-text-main">No custom endpoints yet</p>
+              <p className="mt-0.5 text-xs">Add an OpenAI or Anthropic-compatible endpoint when you need one.</p>
+            </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">
@@ -461,10 +491,11 @@ export default function ProvidersPage() {
       {/* OAuth Providers */}
       {oauthEntries.length > 0 && (
       <div className="flex flex-col gap-4">
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-          <h2 className="text-lg sm:text-xl font-semibold flex items-center gap-2 leading-tight">
-            OAuth Providers
-          </h2>
+        <ProviderSectionHeader
+          icon="passkey"
+          title="OAuth Providers"
+          description="Connect existing provider accounts securely"
+        >
           <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center">
             <ModelAvailabilityBadge />
             <button
@@ -486,7 +517,7 @@ export default function ProvidersPage() {
               {testingMode === "oauth" ? "Testing..." : "Test All"}
             </button>
           </div>
-        </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">
           {oauthEntries.map(([key, info]) => (
             <ProviderCard
@@ -505,10 +536,11 @@ export default function ProvidersPage() {
       {/* Free Tier Providers */}
       {(freeEntries.length > 0 || freeTierEntries.length > 0) && (
       <div className="flex flex-col gap-4">
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-          <h2 className="text-lg sm:text-xl font-semibold flex items-center gap-2 leading-tight">
-            Free Tier Providers
-          </h2>
+        <ProviderSectionHeader
+          icon="savings"
+          title="Free Tier Providers"
+          description="Ready-to-use and free-tier routing options"
+        >
           <button
             onClick={() => handleBatchTest("free")}
             disabled={!!testingMode}
@@ -527,7 +559,7 @@ export default function ProvidersPage() {
             </span>
             {testingMode === "free" ? "Testing..." : "Test All"}
           </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">
           {freeEntries.map(([key, info]) => {
             const hasApiKeyMode = Array.isArray(info?.authModes) && info.authModes.includes("apikey");
@@ -560,10 +592,11 @@ export default function ProvidersPage() {
       {/* API Key Providers — fixed list */}
       {apikeyEntries.length > 0 && (
       <div className="flex flex-col gap-4">
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-          <h2 className="text-lg sm:text-xl font-semibold flex items-center gap-2 leading-tight">
-            API Key Providers{" "}
-          </h2>
+        <ProviderSectionHeader
+          icon="key"
+          title="API Key Providers"
+          description="Bring your own provider credentials"
+        >
           <button
             onClick={() => handleBatchTest("apikey")}
             disabled={!!testingMode}
@@ -582,7 +615,7 @@ export default function ProvidersPage() {
             </span>
             {testingMode === "apikey" ? "Testing..." : "Test All"}
           </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">
           {visibleApikeyEntries.map(([key, info]) => (
             <ApiKeyProviderCard
@@ -679,9 +712,34 @@ 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">
+          {icon}
+        </span>
+        <div className="min-w-0">
+          <h2 className="text-lg font-semibold leading-tight sm:text-xl">{title}</h2>
+          <p className="mt-0.5 text-xs text-text-muted">{description}</p>
+        </div>
+      </div>
+      {children}
+    </div>
+  );
+}
+
+ProviderSectionHeader.propTypes = {
+  icon: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  children: PropTypes.node,
+};
+
 function ProviderCard({ providerId, provider, stats, authType, onToggle }) {
-  const { connected, error, errorCode, errorTime, allDisabled } = stats;
+  const { connected, error, errorCode, allDisabled } = stats;
   const isNoAuth = !!provider.noAuth;
+  const isReady = !allDisabled && (connected > 0 || isNoAuth);
 
   const dotColors = {
     free: "bg-green-500",
@@ -699,22 +757,27 @@ function ProviderCard({ providerId, provider, stats, authType, onToggle }) {
   return (
     <Link href={`/dashboard/providers/${providerId}`} className="group min-w-0">
       <Card
-        padding="xs"
-        className={`h-full hover:bg-black/[0.01] dark:hover:bg-white/[0.01] transition-colors cursor-pointer ${allDisabled ? "opacity-50" : ""}`}
+        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" : ""}`}
       >
-        <div className="flex min-w-0 items-center justify-between gap-3">
+        {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="size-8 shrink-0 rounded-lg flex items-center justify-center"
+              className="flex size-10 shrink-0 items-center justify-center rounded-xl ring-1 ring-black/[0.04] dark:ring-white/[0.06]"
               style={{
                 backgroundColor: `${provider.color?.length > 7 ? provider.color : provider.color + "15"}`,
               }}
             >
               <ProviderIcon
                 src={`/providers/${provider.id}.png`}
-                alt={provider.name}
+                alt=""
                 size={30}
-                className="object-contain rounded-lg max-w-[32px] max-h-[32px]"
+                className="max-h-[32px] max-w-[32px] rounded-lg object-contain"
                 fallbackText={
                   provider.textIcon || provider.id.slice(0, 2).toUpperCase()
                 }
@@ -722,8 +785,12 @@ function ProviderCard({ providerId, provider, stats, authType, onToggle }) {
               />
             </div>
             <div className="min-w-0">
-              <h3 className="truncate font-semibold">{provider.name}</h3>
-              <div className="flex min-w-0 items-center gap-1.5 text-xs flex-wrap">
+              <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>
                 {allDisabled ? (
                   <Badge variant="default" size="sm">
                     <span className="flex items-center gap-1">
@@ -738,9 +805,6 @@ function ProviderCard({ providerId, provider, stats, authType, onToggle }) {
                 ) : (
                   <>
                     {getStatusDisplay(connected, error, errorCode)}
-                    {errorTime && (
-                      <span className="text-text-muted">{errorTime}</span>
-                    )}
                   </>
                 )}
               </div>
@@ -764,6 +828,9 @@ 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">
+              chevron_right
+            </span>
           </div>
         </div>
       </Card>
@@ -784,6 +851,8 @@ ProviderCard.propTypes = {
     error: PropTypes.number,
     errorCode: PropTypes.string,
     errorTime: PropTypes.string,
+    total: PropTypes.number,
+    allDisabled: PropTypes.bool,
   }).isRequired,
   authType: PropTypes.string,
   onToggle: PropTypes.func,
@@ -796,7 +865,8 @@ function ApiKeyProviderCard({
   authType,
   onToggle,
 }) {
-  const { connected, error, errorCode, errorTime, allDisabled } = stats;
+  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,
@@ -816,6 +886,7 @@ function ApiKeyProviderCard({
   };
 
   const getIconPath = () => {
+    if (provider.id === "featherless") return null;
     if (isCompatible)
       return provider.apiType === "responses"
         ? "/providers/oai-r.png"
@@ -827,22 +898,27 @@ function ApiKeyProviderCard({
   return (
     <Link href={`/dashboard/providers/${providerId}`} className="group min-w-0">
       <Card
-        padding="xs"
-        className={`h-full hover:bg-black/[0.01] dark:hover:bg-white/[0.01] transition-colors cursor-pointer ${allDisabled ? "opacity-50" : ""}`}
+        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" : ""}`}
       >
-        <div className="flex min-w-0 items-center justify-between gap-3">
+        {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="size-8 shrink-0 rounded-lg flex items-center justify-center"
+              className="flex size-10 shrink-0 items-center justify-center rounded-xl ring-1 ring-black/[0.04] dark:ring-white/[0.06]"
               style={{
                 backgroundColor: `${provider.color?.length > 7 ? provider.color : provider.color + "15"}`,
               }}
             >
               <ProviderIcon
                 src={getIconPath()}
-                alt={provider.name}
+                alt=""
                 size={30}
-                className="object-contain rounded-lg max-w-[30px] max-h-[30px]"
+                className="max-h-[32px] max-w-[32px] rounded-lg object-contain"
                 fallbackText={
                   provider.textIcon || provider.id.slice(0, 2).toUpperCase()
                 }
@@ -850,8 +926,12 @@ function ApiKeyProviderCard({
               />
             </div>
             <div className="min-w-0">
-              <h3 className="truncate font-semibold">{provider.name}</h3>
-              <div className="flex min-w-0 items-center gap-1.5 text-xs flex-wrap">
+              <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>
                 {allDisabled ? (
                   <Badge variant="default" size="sm">
                     <span className="flex items-center gap-1">
@@ -876,9 +956,6 @@ function ApiKeyProviderCard({
                         Messages
                       </Badge>
                     )}
-                    {errorTime && (
-                      <span className="text-text-muted">{errorTime}</span>
-                    )}
                   </>
                 )}
               </div>
@@ -902,6 +979,9 @@ 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">
+              chevron_right
+            </span>
           </div>
         </div>
       </Card>
@@ -923,6 +1003,8 @@ ApiKeyProviderCard.propTypes = {
     error: PropTypes.number,
     errorCode: PropTypes.string,
     errorTime: PropTypes.string,
+    total: PropTypes.number,
+    allDisabled: PropTypes.bool,
   }).isRequired,
   authType: PropTypes.string,
   onToggle: PropTypes.func,