Added Usage page.

src/app/(dashboard)/dashboard/cli-tools/components/ClaudeToolCard.js

@@ -185,8 +185,8 @@ export default function ClaudeToolCard({
     <Card className="overflow-hidden">
       <div className="flex items-center justify-between hover:cursor-pointer" onClick={onToggle}>
         <div className="flex items-center gap-4">
-          <div className="size-12 rounded-xl flex items-center justify-center" style={{ backgroundColor: `${tool.color}15` }}>
-            <Image src="/providers/claude.png" alt={tool.name} width={32} height={32} className="size-8 object-contain rounded-lg" onError={(e) => { e.target.style.display = "none"; }} />
+          <div className="size-12 flex items-center justify-center">
+            <Image src="/providers/claude.png" alt={tool.name} width={40} height={40} className="size-12 object-contain rounded-xl" onError={(e) => { e.target.style.display = "none"; }} />
           </div>
           <div>
             <div className="flex items-center gap-2">

src/app/(dashboard)/dashboard/cli-tools/components/CodexToolCard.js

@@ -158,8 +158,8 @@ wire_api = "responses"
     <Card className="overflow-hidden">
       <div className="flex items-center justify-between hover:cursor-pointer" onClick={onToggle}>
         <div className="flex items-center gap-4">
-          <div className="size-12 rounded-xl flex items-center justify-center" style={{ backgroundColor: `${tool.color}15` }}>
-            <Image src="/providers/codex.png" alt={tool.name} width={32} height={32} className="size-8 object-contain rounded-lg" onError={(e) => { e.target.style.display = "none"; }} />
+          <div className="size-12 flex items-center justify-center">
+            <Image src="/providers/codex.png" alt={tool.name} width={40} height={40} className="size-12 object-contain rounded-xl" onError={(e) => { e.target.style.display = "none"; }} />
           </div>
           <div>
             <div className="flex items-center gap-2">

src/app/(dashboard)/dashboard/cli-tools/components/DefaultToolCard.js

@@ -227,23 +227,23 @@ export default function DefaultToolCard({ toolId, tool, isExpanded, onToggle, ba
         <Image 
           src={tool.image} 
           alt={tool.name} 
-          width={32} 
-          height={32} 
-          className="size-8 object-contain rounded-lg" 
+          width={40} 
+          height={40} 
+          className="size-12 object-contain rounded-xl bg-gray-500" 
           onError={(e) => { e.target.style.display = "none"; }} 
         />
       );
     }
     if (tool.icon) {
-      return <span className="material-symbols-outlined text-2xl" style={{ color: tool.color }}>{tool.icon}</span>;
+      return <span className="material-symbols-outlined text-3xl" style={{ color: tool.color }}>{tool.icon}</span>;
     }
     return (
       <Image 
         src={`/providers/${toolId}.png`} 
         alt={tool.name} 
-        width={32} 
-        height={32} 
-        className="size-8 object-contain rounded-lg" 
+        width={40} 
+        height={40} 
+        className="size-10 object-contain rounded-xl" 
         onError={(e) => { e.target.style.display = "none"; }} 
       />
     );
@@ -253,7 +253,7 @@ export default function DefaultToolCard({ toolId, tool, isExpanded, onToggle, ba
     <Card className="overflow-hidden">
       <div className="flex items-center justify-between hover:cursor-pointer" onClick={onToggle}>
         <div className="flex items-center gap-4">
-          <div className="size-12 rounded-xl flex items-center justify-center" style={{ backgroundColor: `${tool.color}15` }}>
+          <div className="size-12 rounded-xl flex items-center justify-center">
             {renderIcon()}
           </div>
           <div>

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

@@ -1,14 +1,12 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { Card, CardSkeleton, Badge, UsageStats, RequestLogger } from "@/shared/components";
+import { Card, CardSkeleton, Badge } from "@/shared/components";
 import { OAUTH_PROVIDERS, APIKEY_PROVIDERS } from "@/shared/constants/config";
 import Link from "next/link";
 import { getErrorCode, getRelativeTime } from "@/shared/utils";
 
 export default function ProvidersPage() {
-  const [activeTab, setActiveTab] = useState("connections");
-  const [usageSubTab, setUsageSubTab] = useState("overview");
   const [connections, setConnections] = useState([]);
   const [loading, setLoading] = useState(true);
 
@@ -73,85 +71,35 @@ export default function ProvidersPage() {
 
   return (
     <div className="flex flex-col gap-6">
-      {/* Tabs */}
-      <div className="flex border-b border-border">
-        <button
-          onClick={() => setActiveTab("connections")}
-          className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
-            activeTab === "connections"
-              ? "border-primary text-primary"
-              : "border-transparent text-text-muted hover:text-text-primary"
-          }`}
-        >
-          Connections
-        </button>
-        <button
-          onClick={() => setActiveTab("usage")}
-          className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
-            activeTab === "usage"
-              ? "border-primary text-primary"
-              : "border-transparent text-text-muted hover:text-text-primary"
-          }`}
-        >
-          Usage
-        </button>
+      {/* OAuth Providers */}
+      <div className="flex flex-col gap-4">
+        <h2 className="text-xl font-semibold">OAuth Providers</h2>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+          {Object.entries(OAUTH_PROVIDERS).map(([key, info]) => (
+            <ProviderCard
+              key={key}
+              providerId={key}
+              provider={info}
+              stats={getProviderStats(key, "oauth")}
+            />
+          ))}
+        </div>
       </div>
 
-      {activeTab === "usage" ? (
-        <div className="flex flex-col gap-6">
-          <div className="flex gap-4">
-            <button
-              onClick={() => setUsageSubTab("overview")}
-              className={`text-sm font-semibold transition-colors ${
-                usageSubTab === "overview" ? "text-primary" : "text-text-muted hover:text-text-primary"
-              }`}
-            >
-              Overview
-            </button>
-            <button
-              onClick={() => setUsageSubTab("logs")}
-              className={`text-sm font-semibold transition-colors ${
-                usageSubTab === "logs" ? "text-primary" : "text-text-muted hover:text-text-primary"
-              }`}
-            >
-              Logger
-            </button>
-          </div>
-          {usageSubTab === "overview" ? <UsageStats /> : <RequestLogger />}
+      {/* API Key Providers */}
+      <div className="flex flex-col gap-4">
+        <h2 className="text-xl font-semibold">API Key Providers</h2>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+          {Object.entries(APIKEY_PROVIDERS).map(([key, info]) => (
+            <ApiKeyProviderCard
+              key={key}
+              providerId={key}
+              provider={info}
+              stats={getProviderStats(key, "apikey")}
+            />
+          ))}
         </div>
-      ) : (
-        <>
-          {/* OAuth Providers */}
-          <div className="flex flex-col gap-4">
-            <h2 className="text-xl font-semibold">OAuth Providers</h2>
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-              {Object.entries(OAUTH_PROVIDERS).map(([key, info]) => (
-                <ProviderCard
-                  key={key}
-                  providerId={key}
-                  provider={info}
-                  stats={getProviderStats(key, "oauth")}
-                />
-              ))}
-            </div>
-          </div>
-
-          {/* API Key Providers */}
-          <div className="flex flex-col gap-4">
-            <h2 className="text-xl font-semibold">API Key Providers</h2>
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-              {Object.entries(APIKEY_PROVIDERS).map(([key, info]) => (
-                <ApiKeyProviderCard
-                  key={key}
-                  providerId={key}
-                  provider={info}
-                  stats={getProviderStats(key, "apikey")}
-                />
-              ))}
-            </div>
-          </div>
-        </>
-      )}
+      </div>
     </div>
   );
 }

src/app/(dashboard)/dashboard/usage/page.js

@@ -0,0 +1,39 @@
+"use client";
+
+import { useState } from "react";
+import { UsageStats, RequestLogger } from "@/shared/components";
+
+export default function UsagePage() {
+  const [activeTab, setActiveTab] = useState("overview");
+
+  return (
+    <div className="flex flex-col gap-6">
+      {/* Tabs */}
+      <div className="flex border-b border-border">
+        <button
+          onClick={() => setActiveTab("overview")}
+          className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+            activeTab === "overview"
+              ? "border-primary text-primary"
+              : "border-transparent text-text-muted hover:text-text-primary"
+          }`}
+        >
+          Overview
+        </button>
+        <button
+          onClick={() => setActiveTab("logs")}
+          className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+            activeTab === "logs"
+              ? "border-primary text-primary"
+              : "border-transparent text-text-muted hover:text-text-primary"
+          }`}
+        >
+          Logger
+        </button>
+      </div>
+
+      {/* Content */}
+      {activeTab === "overview" ? <UsageStats /> : <RequestLogger />}
+    </div>
+  );
+}