Added Usage page.

open-sse/config/providerModels.js

@@ -39,7 +39,6 @@ export const PROVIDER_MODELS = {
     { id: "deepseek-v3.2-chat", name: "DeepSeek V3.2 Chat" },
     { id: "deepseek-v3.2-reasoner", name: "DeepSeek V3.2 Reasoner" },
     { id: "minimax-m2", name: "MiniMax M2" },
-    { id: "glm-4.6", name: "GLM 4.6" },
     { id: "glm-4.7", name: "GLM 4.7" },
   ],
   ag: [  // Antigravity - special case: models call different backends
@@ -70,7 +69,7 @@ export const PROVIDER_MODELS = {
     { id: "grok-code-fast-1", name: "Grok Code Fast 1" },
   ],
   kr: [  // Kiro AI
-    { id: "claude-opus-4.5", name: "Claude Opus 4.5" },
+    // { id: "claude-opus-4.5", name: "Claude Opus 4.5" },
     { id: "claude-sonnet-4.5", name: "Claude Sonnet 4.5" },
     { id: "claude-haiku-4.5", name: "Claude Haiku 4.5" },
   ],
@@ -99,7 +98,6 @@ export const PROVIDER_MODELS = {
   ],
   glm: [
     { id: "glm-4.7", name: "GLM 4.7" },
-    { id: "glm-4.6", name: "GLM 4.6" },
     { id: "glm-4.6v", name: "GLM 4.6V (Vision)" },
   ],
   kimi: [

open-sse/translator/index.js

@@ -8,6 +8,9 @@ import { normalizeThinkingConfig } from "../services/provider.js";
 const requestRegistry = new Map();
 const responseRegistry = new Map();
 
+// Track initialization state
+let initialized = false;
+
 // Register translator
 export function register(from, to, requestFn, responseFn) {
   const key = `${from}:${to}`;
@@ -19,8 +22,30 @@ export function register(from, to, requestFn, responseFn) {
   }
 }
 
+// Lazy load translators (called once on first use)
+function ensureInitialized() {
+  if (initialized) return;
+  initialized = true;
+  
+  // Request translators - sync require pattern for bundler
+  require("./request/claude-to-openai.js");
+  require("./request/openai-to-claude.js");
+  require("./request/gemini-to-openai.js");
+  require("./request/openai-to-gemini.js");
+  require("./request/openai-responses.js");
+  require("./request/openai-to-kiro.js");
+  
+  // Response translators
+  require("./response/claude-to-openai.js");
+  require("./response/openai-to-claude.js");
+  require("./response/gemini-to-openai.js");
+  require("./response/openai-responses.js");
+  require("./response/kiro-to-openai.js");
+}
+
 // Translate request: source -> openai -> target
 export function translateRequest(sourceFormat, targetFormat, model, body, stream = true, credentials = null, provider = null) {
+  ensureInitialized();
   let result = body;
 
   // Normalize thinking config: remove if lastMessage is not user
@@ -66,6 +91,7 @@ export function translateRequest(sourceFormat, targetFormat, model, body, stream
 
 // Translate response chunk: target -> openai -> source
 export function translateResponse(targetFormat, sourceFormat, chunk, state) {
+  ensureInitialized();
   // If same format, return as-is
   if (sourceFormat === targetFormat) {
     return [chunk];
@@ -155,20 +181,7 @@ export function initState(sourceFormat) {
   return base;
 }
 
-// Initialize all translators
-export async function initTranslators() {
-  // Request translators
-  await import("./request/claude-to-openai.js");
-  await import("./request/openai-to-claude.js");
-  await import("./request/gemini-to-openai.js");
-  await import("./request/openai-to-gemini.js");
-  await import("./request/openai-responses.js");
-  await import("./request/openai-to-kiro.js");
-  
-  // Response translators
-  await import("./response/claude-to-openai.js");
-  await import("./response/openai-to-claude.js");
-  await import("./response/gemini-to-openai.js");
-  await import("./response/openai-responses.js");
-  await import("./response/kiro-to-openai.js");
+// Initialize all translators (kept for backward compatibility)
+export function initTranslators() {
+  ensureInitialized();
 }

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>
+  );
+}

src/shared/components/Header.js

@@ -28,6 +28,7 @@ const getPageInfo = (pathname) => {
   
   if (pathname.includes("/providers")) return { title: "Providers", description: "Manage your AI provider connections", breadcrumbs: [] };
   if (pathname.includes("/combos")) return { title: "Combos", description: "Model combos with fallback", breadcrumbs: [] };
+  if (pathname.includes("/usage")) return { title: "Usage & Analytics", description: "Monitor your API usage, token consumption, and request logs", breadcrumbs: [] };
   if (pathname.includes("/cli-tools")) return { title: "CLI Tools", description: "Configure CLI tools", breadcrumbs: [] };
   if (pathname.includes("/endpoint")) return { title: "Endpoint", description: "API endpoint configuration", breadcrumbs: [] };
   if (pathname.includes("/profile")) return { title: "Settings", description: "Manage your preferences", breadcrumbs: [] };

src/shared/components/ModelSelectModal.js

@@ -1,9 +1,15 @@
 "use client";
 
-import { useState, useMemo } from "react";
+import { useState, useMemo, useEffect } from "react";
 import Modal from "./Modal";
 import { getModelsByProviderId, PROVIDER_ID_TO_ALIAS } from "@/shared/constants/models";
-import { AI_PROVIDERS } from "@/shared/constants/providers";
+import { OAUTH_PROVIDERS, APIKEY_PROVIDERS } from "@/shared/constants/providers";
+
+// Provider order: OAuth first, then API Key (matches dashboard/providers)
+const PROVIDER_ORDER = [
+  ...Object.keys(OAUTH_PROVIDERS),
+  ...Object.keys(APIKEY_PROVIDERS),
+];
 
 export default function ModelSelectModal({
   isOpen,
@@ -15,19 +21,39 @@ export default function ModelSelectModal({
   modelAliases = {},
 }) {
   const [searchQuery, setSearchQuery] = useState("");
+  const [combos, setCombos] = useState([]);
 
-  // Group models by provider
+  // Fetch combos when modal opens
+  useEffect(() => {
+    if (isOpen) {
+      fetch("/api/combos")
+        .then(res => res.json())
+        .then(data => setCombos(data.combos || []))
+        .catch(() => setCombos([]));
+    }
+  }, [isOpen]);
+
+  const allProviders = { ...OAUTH_PROVIDERS, ...APIKEY_PROVIDERS };
+
+  // Group models by provider with priority order
   const groupedModels = useMemo(() => {
     const groups = {};
     
     // Get active provider IDs
     const activeProviderIds = activeProviders.length > 0 
       ? activeProviders.map(p => p.provider)
-      : Object.keys(AI_PROVIDERS);
+      : PROVIDER_ORDER;
 
-    activeProviderIds.forEach((providerId) => {
+    // Sort by PROVIDER_ORDER
+    const sortedProviderIds = [...activeProviderIds].sort((a, b) => {
+      const indexA = PROVIDER_ORDER.indexOf(a);
+      const indexB = PROVIDER_ORDER.indexOf(b);
+      return (indexA === -1 ? 999 : indexA) - (indexB === -1 ? 999 : indexB);
+    });
+
+    sortedProviderIds.forEach((providerId) => {
       const alias = PROVIDER_ID_TO_ALIAS[providerId] || providerId;
-      const providerInfo = AI_PROVIDERS[providerId] || { name: providerId, color: "#666" };
+      const providerInfo = allProviders[providerId] || { name: providerId, color: "#666" };
       
       // For passthrough providers, get models from aliases
       if (providerInfo.passthroughModels) {
@@ -65,7 +91,14 @@ export default function ModelSelectModal({
     });
 
     return groups;
-  }, [activeProviders, modelAliases]);
+  }, [activeProviders, modelAliases, allProviders]);
+
+  // Filter combos by search query
+  const filteredCombos = useMemo(() => {
+    if (!searchQuery.trim()) return combos;
+    const query = searchQuery.toLowerCase();
+    return combos.filter(c => c.name.toLowerCase().includes(query));
+  }, [combos, searchQuery]);
 
   // Filter models by search query
   const filteredGroups = useMemo(() => {
@@ -128,6 +161,38 @@ export default function ModelSelectModal({
 
       {/* Models grouped by provider - compact */}
       <div className="max-h-[300px] overflow-y-auto space-y-3">
+        {/* Combos section - always first */}
+        {filteredCombos.length > 0 && (
+          <div>
+            <div className="flex items-center gap-1.5 mb-1.5 sticky top-0 bg-surface py-0.5">
+              <span className="material-symbols-outlined text-primary text-[14px]">layers</span>
+              <span className="text-xs font-medium text-primary">Combos</span>
+              <span className="text-[10px] text-text-muted">({filteredCombos.length})</span>
+            </div>
+            <div className="flex flex-wrap gap-1.5">
+              {filteredCombos.map((combo) => {
+                const isSelected = selectedModel === combo.name;
+                return (
+                  <button
+                    key={combo.id}
+                    onClick={() => handleSelect({ id: combo.name, name: combo.name, value: combo.name })}
+                    className={`
+                      px-2 py-1 rounded-xl text-xs font-medium transition-all border hover:cursor-pointer
+                      ${isSelected 
+                        ? "bg-primary text-white border-primary" 
+                        : "bg-surface border-border text-text-main hover:border-primary/50 hover:bg-primary/5"
+                      }
+                    `}
+                  >
+                    {combo.name}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        {/* Provider models */}
         {Object.entries(filteredGroups).map(([providerId, group]) => (
           <div key={providerId}>
             {/* Provider header */}
@@ -168,7 +233,7 @@ export default function ModelSelectModal({
           </div>
         ))}
 
-        {Object.keys(filteredGroups).length === 0 && (
+        {Object.keys(filteredGroups).length === 0 && filteredCombos.length === 0 && (
           <div className="text-center py-4 text-text-muted">
             <span className="material-symbols-outlined text-2xl mb-1 block">
               search_off

src/shared/components/Sidebar.js

@@ -12,6 +12,7 @@ const navItems = [
   { href: "/dashboard/endpoint", label: "Endpoint", icon: "api" },
   { href: "/dashboard/providers", label: "Providers", icon: "dns" },
   { href: "/dashboard/combos", label: "Combos", icon: "layers" },
+  { href: "/dashboard/usage", label: "Usage", icon: "bar_chart" },
   { href: "/dashboard/cli-tools", label: "CLI Tools", icon: "terminal" },
 ];
 

src/shared/components/UsageStats.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect, useMemo, useCallback } from "react";
 import { useSearchParams, useRouter } from "next/navigation";
 import Card from "./Card";
 import Badge from "./Badge";
@@ -38,6 +38,8 @@ export default function UsageStats() {
   const [loading, setLoading] = useState(true);
   const [autoRefresh, setAutoRefresh] = useState(true);
   const [viewMode, setViewMode] = useState("tokens"); // 'tokens' or 'costs'
+  const [refreshInterval, setRefreshInterval] = useState(5000); // Start with 5s
+  const [prevTotalRequests, setPrevTotalRequests] = useState(0);
 
   const toggleSort = (field) => {
     const params = new URLSearchParams(searchParams.toString());
@@ -114,34 +116,66 @@ export default function UsageStats() {
     return sortData(stats?.byAccount, accountPendingMap);
   }, [stats?.byAccount, stats?.pending?.byAccount, sortBy, sortOrder]);
 
-  useEffect(() => {
-    fetchStats();
-  }, []);
-
-  useEffect(() => {
-    let interval;
-    if (autoRefresh) {
-      interval = setInterval(() => {
-        fetchStats(false); // fetch without loading skeleton
-      }, 1000);
-    }
-    return () => clearInterval(interval);
-  }, [autoRefresh]);
-
-  const fetchStats = async (showLoading = true) => {
+  const fetchStats = useCallback(async (showLoading = true) => {
     if (showLoading) setLoading(true);
     try {
       const res = await fetch("/api/usage/history");
       if (res.ok) {
         const data = await res.json();
         setStats(data);
+
+        // Smart polling: adjust interval based on activity
+        const currentTotal = data.totalRequests || 0;
+        if (currentTotal > prevTotalRequests) {
+          // New requests detected - reset to fast polling
+          setRefreshInterval(5000);
+        } else {
+          // No change - increase interval (exponential backoff)
+          setRefreshInterval((prev) => Math.min(prev * 2, 60000)); // Max 60s
+        }
+        setPrevTotalRequests(currentTotal);
       }
     } catch (error) {
       console.error("Failed to fetch usage stats:", error);
     } finally {
       if (showLoading) setLoading(false);
     }
-  };
+  }, [prevTotalRequests]);
+
+  useEffect(() => {
+    fetchStats();
+  }, [fetchStats]);
+
+  useEffect(() => {
+    let intervalId;
+    let isPageVisible = true;
+
+    // Page Visibility API - pause when tab is hidden
+    const handleVisibilityChange = () => {
+      isPageVisible = !document.hidden;
+      if (isPageVisible && autoRefresh) {
+        fetchStats(false); // Fetch immediately when tab becomes visible
+      }
+    };
+
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+
+    if (autoRefresh) {
+      // Clear any existing interval first
+      if (intervalId) clearInterval(intervalId);
+      
+      intervalId = setInterval(() => {
+        if (isPageVisible) {
+          fetchStats(false); // fetch without loading skeleton
+        }
+      }, refreshInterval);
+    }
+
+    return () => {
+      if (intervalId) clearInterval(intervalId);
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [autoRefresh, refreshInterval, fetchStats]);
 
   if (loading) return <CardSkeleton />;
 
@@ -202,7 +236,7 @@ export default function UsageStats() {
 
           {/* Auto Refresh Toggle */}
           <label className="text-sm font-medium text-text-muted flex items-center gap-2 cursor-pointer">
-            <span>Auto Refresh (1s)</span>
+            <span>Auto Refresh ({refreshInterval / 1000}s)</span>
             <div
               onClick={() => setAutoRefresh(!autoRefresh)}
               className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none ${
@@ -291,7 +325,7 @@ export default function UsageStats() {
           <div className="flex justify-between items-start gap-4">
             <div className="flex flex-col gap-1 flex-1">
               <span className="text-text-muted text-sm uppercase font-semibold">
-                Total Output Tokens
+                Output Tokens
               </span>
               <span className="text-2xl font-bold text-success">
                 {fmt(stats.totalCompletionTokens)}

src/shared/constants/cliTools.js

@@ -53,7 +53,7 @@ export const CLI_TOOLS = {
   },
   cline: {
     id: "cline",
-    name: "CLINE",
+    name: "Cline",
     image: "/providers/cline.png",
     color: "#00D1B2",
     description: "CLINE AI Assistant",