Fix bug

src/shared/components/Header.js

@@ -38,12 +38,14 @@ const getPageInfo = (pathname) => {
     return {
       title: "Providers",
       description: "Manage your AI provider connections",
+      icon: "dns",
       breadcrumbs: [],
     };
   if (pathname.includes("/combos"))
     return {
       title: "Combos",
       description: "Model combos with fallback",
+      icon: "layers",
       breadcrumbs: [],
     };
   if (pathname.includes("/usage"))
@@ -51,48 +53,70 @@ const getPageInfo = (pathname) => {
       title: "Usage & Analytics",
       description:
         "Monitor your API usage, token consumption, and request logs",
+      icon: "bar_chart",
+      breadcrumbs: [],
+    };
+  if (pathname.includes("/quota"))
+    return {
+      title: "Quota Tracker",
+      description: "Track and manage your API quota limits",
+      icon: "data_usage",
       breadcrumbs: [],
     };
   if (pathname.includes("/mitm"))
     return {
       title: "MITM Proxy",
       description: "Intercept CLI tool traffic and route through 9Router",
+      icon: "security",
       breadcrumbs: [],
     };
   if (pathname.includes("/cli-tools"))
     return {
       title: "CLI Tools",
       description: "Configure CLI tools",
+      icon: "terminal",
+      breadcrumbs: [],
+    };
+  if (pathname.includes("/proxy-pools"))
+    return {
+      title: "Proxy Pools",
+      description: "Manage your proxy pool configurations",
+      icon: "lan",
       breadcrumbs: [],
     };
   if (pathname.includes("/endpoint"))
     return {
       title: "Endpoint",
       description: "API endpoint configuration",
+      icon: "api",
       breadcrumbs: [],
     };
   if (pathname.includes("/profile"))
     return {
       title: "Settings",
       description: "Manage your preferences",
+      icon: "settings",
       breadcrumbs: [],
     };
   if (pathname.includes("/translator"))
     return {
       title: "Translator",
       description: "Debug translation flow between formats",
+      icon: "translate",
       breadcrumbs: [],
     };
   if (pathname.includes("/console-log"))
     return {
       title: "Console Log",
       description: "Live server console output",
+      icon: "monitor",
       breadcrumbs: [],
     };
   if (pathname === "/dashboard")
     return {
       title: "Endpoint",
       description: "API endpoint configuration",
+      icon: "api",
       breadcrumbs: [],
     };
   return { title: "", description: "", breadcrumbs: [] };
@@ -104,7 +128,7 @@ export default function Header({ onMenuClick, showMenuButton = true }) {
 
   // Memoize page info to prevent unnecessary recalculations
   const pageInfo = useMemo(() => getPageInfo(pathname), [pathname]);
-  const { title, description, breadcrumbs } = pageInfo;
+  const { title, description, icon, breadcrumbs } = pageInfo;
 
   const handleLogout = async () => {
     try {
@@ -174,9 +198,16 @@ export default function Header({ onMenuClick, showMenuButton = true }) {
           </div>
         ) : title ? (
           <div>
-            <h1 className="text-2xl font-semibold text-text-main tracking-tight">
-              {translate(title)}
-            </h1>
+            <div className="flex items-center gap-2">
+              {icon && (
+                <span className="material-symbols-outlined text-primary text-2xl">
+                  {icon}
+                </span>
+              )}
+              <h1 className="text-2xl font-semibold tracking-tight">
+                {translate(title)}
+              </h1>
+            </div>
             {description && (
               <p className="text-sm text-text-muted">
                 {translate(description)}

src/shared/components/UsageStats.js

@@ -191,6 +191,7 @@ export default function UsageStats() {
   const [loading, setLoading] = useState(true);
   const [fetching, setFetching] = useState(false);
   const [tableView, setTableView] = useState("model");
+  const [viewMode, setViewMode] = useState("costs");
   const [providers, setProviders] = useState([]);
   const [period, setPeriod] = useState("7d");
 
@@ -236,14 +237,14 @@ export default function UsageStats() {
     es.onmessage = (e) => {
       try {
         const data = JSON.parse(e.data);
-        // Only update real-time fields from SSE, keep filtered stats intact
-        setStats((prev) => prev ? {
-          ...prev,
+        // Always merge only real-time fields, never overwrite full stats from REST
+        setStats((prev) => ({
+          ...(prev || {}),
           activeRequests: data.activeRequests,
           recentRequests: data.recentRequests,
           errorProvider: data.errorProvider,
           pending: data.pending,
-        } : data);
+        }));
         setLoading(false);
       } catch (err) {
         console.error("[SSE CLIENT] parse error:", err);
@@ -443,6 +444,20 @@ export default function UsageStats() {
               <option key={opt.value} value={opt.value}>{opt.label}</option>
             ))}
           </select>
+          <div className="flex items-center gap-1 bg-bg-subtle rounded-lg p-1 border border-border">
+            <button
+              onClick={() => setViewMode("costs")}
+              className={`px-3 py-1 rounded-md text-sm font-medium transition-colors ${viewMode === "costs" ? "bg-primary text-white shadow-sm" : "text-text-muted hover:text-text hover:bg-bg-hover"}`}
+            >
+              Costs
+            </button>
+            <button
+              onClick={() => setViewMode("tokens")}
+              className={`px-3 py-1 rounded-md text-sm font-medium transition-colors ${viewMode === "tokens" ? "bg-primary text-white shadow-sm" : "text-text-muted hover:text-text hover:bg-bg-hover"}`}
+            >
+              Tokens
+            </button>
+          </div>
         </div>
         {loading ? spinner : activeTableConfig && (
           <UsageTable
@@ -453,6 +468,7 @@ export default function UsageStats() {
             sortBy={sortBy}
             sortOrder={sortOrder}
             onToggleSort={toggleSort}
+            viewMode={viewMode}
             storageKey={activeTableConfig.storageKey}
             renderSummaryCells={activeTableConfig.renderSummaryCells}
             renderDetailCells={activeTableConfig.renderDetailCells}