Merge pull request #101 from jgor20/overall-enhancements-to-web-ui

feat(webui): Comprehensive UI enhancements, responsive design, and routing improvements
2026-01-12 12:12:57 +05:30
parent 1045ebe097 9231cbc60a
commit 08b332b694
16 changed files with 706 additions and 260 deletions
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -95,6 +95,9 @@ src/
 ├── webui/                      # Web Management Interface
 │   └── index.js                # Express router and API endpoints
 │
+├── modules/                    # Feature modules
+│   └── usage-stats.js          # Request tracking and history persistence
+│
 ├── cli/                        # CLI tools
 │   └── accounts.js             # Account management CLI
 │
@@ -124,6 +127,8 @@ public/
 │       └── input.css           # Tailwind source with @apply directives
 ├── js/
 │   ├── app.js                  # Main application logic (Alpine.js)
+│   ├── config/                 # Application configuration
+│   │   └── constants.js        # Centralized UI constants and limits
 │   ├── store.js                # Global state management
 │   ├── data-store.js           # Shared data store (accounts, models, quotas)
 │   ├── settings-store.js       # Settings management store
@@ -161,6 +166,7 @@ public/
 - **src/auth/**: Authentication including Google OAuth, token extraction, database access, and auto-rebuild of native modules
 - **src/format/**: Format conversion between Anthropic and Google Generative AI formats
 - **src/constants.js**: API endpoints, model mappings, fallback config, OAuth config, and all configuration values
+- **src/modules/usage-stats.js**: Tracks request volume by model/family, persists 30-day history to JSON, and auto-prunes old data.
 - **src/fallback-config.js**: Model fallback mappings (`getFallbackModel()`, `hasFallback()`)
 - **src/errors.js**: Custom error classes (`RateLimitError`, `AuthError`, `ApiError`, etc.)

@@ -294,6 +300,7 @@ Each account object in `accounts.json` contains:
 - `/api/config/*` - Server configuration (read/write)
 - `/api/claude/config` - Claude CLI settings
 - `/api/logs/stream` - SSE endpoint for real-time logs
+- `/api/stats/history` - Retrieve 30-day request history (sorted chronologically)
 - `/api/auth/url` - Generate Google OAuth URL
 - `/account-limits` - Fetch account quotas and subscription data
  - Returns: `{ accounts: [{ email, subscription: { tier, projectId }, limits: {...} }], models: [...] }`
@@ -339,6 +346,14 @@ async myOperation() {
 - Shows error toast on failure
 - Always resets loading state in `finally` block

+### Frontend Configuration
+
+**Constants**:
+All frontend magic numbers and configuration values are centralized in `public/js/config/constants.js`. Use `window.AppConstants` to access:
+- `INTERVALS`: Refresh rates and timeouts
+- `LIMITS`: Data quotas and display limits
+- `UI`: Animation durations and delay settings
+
 ### Account Operations Service Layer

 Use `window.AccountActions` for account operations instead of direct API calls:
@@ -384,7 +399,8 @@ Dashboard is split into three modules for maintainability:
   - `getInitialState()` - Default filter values
   - `loadPreferences(component)` - Load from localStorage
   - `savePreferences(component)` - Save to localStorage
-   - Filter types: time range, display mode, family/model selection
+   - `autoSelectTopN(component)` - Smart select top 5 active models
+   - Filter types: time range (1h/6h/24h/7d/all), display mode, family/model selection

 Each module is well-documented with JSDoc comments.

--- a/README.md
+++ b/README.md
@@ -317,6 +317,9 @@ The proxy includes a built-in, modern web interface for real-time monitoring and
 - **Visual Model Quota**: Track per-model usage and next reset times with color-coded progress indicators.
 - **Account Management**: Add/remove Google accounts via OAuth, view subscription tiers (Free/Pro/Ultra) and quota status at a glance.
 - **Claude CLI Configuration**: Edit your `~/.claude/settings.json` directly from the browser.
+- **Persistent History**: Tracks request volume by model family for 30 days, persisting across server restarts.
+- **Time Range Filtering**: Analyze usage trends over 1H, 6H, 24H, 7D, or All Time periods.
+- **Smart Analysis**: Auto-select top 5 most used models or toggle between Family/Model views.
 - **Live Logs**: Stream server logs with level-based filtering and search.
 - **Advanced Tuning**: Configure retries, timeouts, and debug mode on the fly.
 - **Bilingual Interface**: Full support for English and Chinese (switch via Settings).
--- a/package-lock.json
+++ b/package-lock.json
@@ -395,6 +395,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "baseline-browser-mapping": "^2.9.0",
        "caniuse-lite": "^1.0.30001759",
@@ -1415,6 +1416,7 @@
      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "bin": {
        "jiti": "bin/jiti.js"
      }
@@ -1791,6 +1793,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "nanoid": "^3.3.11",
        "picocolors": "^1.1.1",
@@ -2608,6 +2611,7 @@
      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@alloc/quick-lru": "^5.2.0",
        "arg": "^5.0.2",
@@ -2732,6 +2736,7 @@
      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=12"
      },
--- a/public/app.js
+++ b/public/app.js
@@ -57,9 +57,39 @@ document.addEventListener('alpine:init', () => {
            return Alpine.store('data')?.loading || false;
        },

+        sidebarOpen: window.innerWidth >= 1024,
+        toggleSidebar() {
+            this.sidebarOpen = !this.sidebarOpen;
+        },
+
        init() {
            console.log('App controller initialized');

+            // Handle responsive sidebar transitions
+            let lastWidth = window.innerWidth;
+            let resizeTimeout = null;
+            
+            window.addEventListener('resize', () => {
+                if (resizeTimeout) clearTimeout(resizeTimeout);
+                
+                resizeTimeout = setTimeout(() => {
+                    const currentWidth = window.innerWidth;
+                    const lgBreakpoint = 1024;
+                    
+                    // Desktop -> Mobile: Auto-close sidebar to prevent overlay blocking screen
+                    if (lastWidth >= lgBreakpoint && currentWidth < lgBreakpoint) {
+                        this.sidebarOpen = false;
+                    }
+                    
+                    // Mobile -> Desktop: Auto-open sidebar (restore standard desktop layout)
+                    if (lastWidth < lgBreakpoint && currentWidth >= lgBreakpoint) {
+                        this.sidebarOpen = true;
+                    }
+                    
+                    lastWidth = currentWidth;
+                }, 150);
+            });
+
            // Theme setup
            document.documentElement.setAttribute('data-theme', 'black');
            document.documentElement.classList.add('dark');
--- a/public/css/src/input.css
+++ b/public/css/src/input.css
@@ -366,6 +366,25 @@
 /* Refactored UI Components (Phase 1.2)                                       */
 /* -------------------------------------------------------------------------- */

+/* Phase 1.2 additions ... */
+
+/* Filter Controls */
+.filter-control {
+    @apply flex items-center justify-center gap-2 px-3 py-1.5 lg:px-4 lg:py-2 
+           text-[10px] lg:text-xs font-mono font-medium text-gray-400 
+           bg-space-800 lg:bg-transparent border border-space-border/50 lg:border-transparent 
+           rounded lg:rounded-md hover:text-white lg:hover:bg-space-800 
+           transition-all duration-200 whitespace-nowrap w-full sm:w-auto;
+}
+
+.filter-control:hover {
+    @apply border-neon-cyan/50 lg:border-neon-cyan/30 lg:shadow-lg lg:shadow-neon-cyan/10;
+}
+
+.filter-control-item {
+    @apply block w-full px-3 py-1.5 text-left text-[10px] font-mono hover:bg-white/5 transition-colors;
+}
+
 /* Action Buttons */
 .btn-action-ghost {
  @apply btn btn-xs btn-ghost text-gray-400 hover:text-white transition-colors;
@@ -489,3 +508,12 @@
 .skeleton-table-row {
  @apply skeleton h-12 w-full mb-2;
 }
+
+/* Desktop Sidebar Collapsed State */
+@media (min-width: 1024px) {
+  body .sidebar-collapsed {
+    width: 0;
+    padding: 0;
+    border: none;
+  }
+}
--- a/public/css/style.css
+++ b/public/css/style.css
--- a/public/index.html
+++ b/public/index.html
@@ -62,8 +62,15 @@

    <!-- Navbar -->
    <div
-        class="h-14 border-b border-space-border flex items-center px-6 justify-between bg-space-900/50 backdrop-blur-md z-50">
+        class="h-14 border-b border-space-border flex items-center px-4 lg:px-6 justify-between bg-space-900/50 backdrop-blur-md z-50 relative">
        <div class="flex items-center gap-3">
+            <!-- Mobile Menu Button -->
+            <button @click="toggleSidebar()" class="text-gray-400 hover:text-white focus:outline-none p-1 transition-colors">
+                <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                </svg>
+            </button>
+
            <div
                class="w-8 h-8 rounded bg-gradient-to-br from-neon-purple to-blue-600 flex items-center justify-center text-white font-bold shadow-[0_0_15px_rgba(168,85,247,0.4)]">
                AG</div>
@@ -82,10 +89,10 @@
                    ? 'bg-neon-green/10 border-neon-green/20 text-neon-green'
                    : (connectionStatus === 'connecting' ? 'bg-yellow-500/10 border-yellow-500/20 text-yellow-500' : 'bg-red-500/10 border-red-500/20 text-red-500')">
                <div class="w-1.5 h-1.5 rounded-full"
-                    :class="$store.data.connectionStatus === 'connected' ? 'bg-neon-green shadow-[0_0_8px_rgba(34,197,94,0.6)]' : ($store.data.connectionStatus === 'connecting' ? 'bg-yellow-500 animate-pulse' : 'bg-red-500')">
+                    :class="connectionStatus === 'connected' ? 'bg-neon-green shadow-[0_0_8px_rgba(34,197,94,0.6)]' : (connectionStatus === 'connecting' ? 'bg-yellow-500 animate-pulse' : 'bg-red-500')">
                </div>
                <span
-                    x-text="$store.data.connectionStatus === 'connected' ? $store.global.t('online') : ($store.data.connectionStatus === 'connecting' ? $store.global.t('connecting') : $store.global.t('offline'))"></span>
+                    x-text="connectionStatus === 'connected' ? $store.global.t('online') : (connectionStatus === 'disconnected' ? $store.global.t('offline') : $store.global.t('connecting'))"></span>
            </div>

            <div class="h-4 w-px bg-space-border"></div>
@@ -103,12 +110,47 @@
    </div>

    <!-- Layout -->
-    <div class="flex h-[calc(100vh-56px)]">
+    <div class="flex h-[calc(100vh-56px)] relative">
+
+        <!-- Mobile Sidebar Overlay -->
+        <div x-show="sidebarOpen" 
+             x-transition:enter="transition-opacity ease-linear duration-300"
+             x-transition:enter-start="opacity-0"
+             x-transition:enter-end="opacity-100"
+             x-transition:leave="transition-opacity ease-linear duration-300"
+             x-transition:leave-start="opacity-100"
+             x-transition:leave-end="opacity-0"
+             @click="sidebarOpen = false"
+             class="fixed inset-0 bg-black/50 z-40 lg:hidden"
+             style="display: none;"></div>

        <!-- Sidebar -->
-        <div class="w-64 bg-space-900 border-r border-space-border flex flex-col pt-6 pb-4">
-            <div class="px-4 mb-2 text-xs font-bold text-gray-600 uppercase tracking-widest"
+        <div class="fixed top-14 bottom-0 left-0 z-40 bg-space-900 border-r border-space-border transition-all duration-300 shadow-2xl overflow-hidden lg:static lg:h-auto lg:shadow-none lg:flex-shrink-0"
+             :class="{
+                 'translate-x-0': sidebarOpen,
+                 '-translate-x-full': !sidebarOpen,
+                 'w-64': sidebarOpen,
+                 'lg:translate-x-0': sidebarOpen,
+                 'lg:w-64': sidebarOpen,
+                 'sidebar-collapsed': !sidebarOpen
+             }">
+             
+            <!-- Inner Sidebar Content (Fixed Width to prevent squashing) -->
+            <div class="w-64 flex flex-col h-full pt-6 pb-4 flex-shrink-0">
+                <!-- Mobile Menu Header -->
+                <div class="flex items-center justify-between px-4 mb-6 lg:hidden">
+                    <span class="text-sm font-bold text-white">Menu</span>
+                    <button @click="sidebarOpen = false" class="text-gray-400 hover:text-white">
+                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
+                </div>
+
+                <!-- Desktop Header (Main) -->
+                <div class="px-4 mb-2 text-xs font-bold text-gray-600 uppercase tracking-widest hidden lg:block"
                    x-text="$store.global.t('main')">Main</div>
+                
                <nav class="flex flex-col gap-1">
                    <button
                        class="nav-item flex items-center gap-3 px-6 py-3 text-sm font-medium text-gray-400 hover:text-white hover:bg-white/5"
@@ -177,6 +219,7 @@
                    </div>
                </div>
            </div>
+        </div>

        <!-- Main Content -->
        <div class="flex-1 overflow-auto bg-space-950 relative custom-scrollbar">
--- a/public/js/components/account-manager.js
+++ b/public/js/components/account-manager.js
@@ -182,30 +182,56 @@ window.Components.accountManager = () => ({
     */
    getMainModelQuota(account) {
        const limits = account.limits || {};
-        const modelIds = Object.keys(limits);
        
-        if (modelIds.length === 0) {
-            return { percent: null, model: '-' };
-        }
+        const getQuotaVal = (id) => {
+             const l = limits[id];
+             if (!l) return -1;
+             if (l.remainingFraction !== null) return l.remainingFraction;
+             if (l.resetTime) return 0; // Rate limited
+             return -1; // Unknown
+        };

-        // Priority: opus > sonnet > flash > others
-        const priorityModels = [
-            modelIds.find(m => m.toLowerCase().includes('opus')),
-            modelIds.find(m => m.toLowerCase().includes('sonnet')),
-            modelIds.find(m => m.toLowerCase().includes('flash')),
-            modelIds[0] // Fallback to first model
+        const validIds = Object.keys(limits).filter(id => getQuotaVal(id) >= 0);
+        
+        if (validIds.length === 0) return { percent: null, model: '-' };
+
+        const DEAD_THRESHOLD = 0.01;
+        
+        const MODEL_TIERS = [
+            { pattern: /\bopus\b/, aliveScore: 100, deadScore: 60 },
+            { pattern: /\bsonnet\b/, aliveScore: 90, deadScore: 55 },
+            // Gemini 3 Pro / Ultra
+            { pattern: /\bgemini-3\b/, extraCheck: (l) => /\bpro\b/.test(l) || /\bultra\b/.test(l), aliveScore: 80, deadScore: 50 },
+            { pattern: /\bpro\b/, aliveScore: 75, deadScore: 45 },
+            // Mid/Low Tier
+            { pattern: /\bhaiku\b/, aliveScore: 30, deadScore: 15 },
+            { pattern: /\bflash\b/, aliveScore: 20, deadScore: 10 }
        ];

-        const selectedModel = priorityModels.find(m => m) || modelIds[0];
-        const quota = limits[selectedModel];
+        const getPriority = (id) => {
+            const lower = id.toLowerCase();
+            const val = getQuotaVal(id);
+            const isAlive = val > DEAD_THRESHOLD;
            
-        if (!quota || quota.remainingFraction === null) {
-            return { percent: null, model: selectedModel };
+            for (const tier of MODEL_TIERS) {
+                if (tier.pattern.test(lower)) {
+                    if (tier.extraCheck && !tier.extraCheck(lower)) continue;
+                    return isAlive ? tier.aliveScore : tier.deadScore;
+                }
            }
            
+            return isAlive ? 5 : 0;
+        };
+
+        // Sort by priority desc
+        validIds.sort((a, b) => getPriority(b) - getPriority(a));
+
+        const bestModel = validIds[0];
+        const val = getQuotaVal(bestModel);
+        
        return {
-            percent: Math.round(quota.remainingFraction * 100),
-            model: selectedModel
+            percent: Math.round(val * 100),
+            model: bestModel
        };
    }
 });
--- a/public/js/components/dashboard.js
+++ b/public/js/components/dashboard.js
@@ -45,13 +45,24 @@ window.Components.dashboard = () => ({
        this.$watch('$store.data.accounts', () => {
            if (this.$store.global.activeTab === 'dashboard') {
                this.updateStats();
-                this.$nextTick(() => this.updateCharts());
+                // Debounce chart updates to prevent rapid flickering
+                if (this._debouncedUpdateCharts) {
+                    this._debouncedUpdateCharts();
+                } else {
+                    this._debouncedUpdateCharts = window.utils.debounce(() => this.updateCharts(), 100);
+                    this._debouncedUpdateCharts();
+                }
            }
        });

        // Watch for history updates from data-store (automatically loaded with account data)
        this.$watch('$store.data.usageHistory', (newHistory) => {
            if (this.$store.global.activeTab === 'dashboard' && newHistory && Object.keys(newHistory).length > 0) {
+                // Optimization: Skip if data hasn't changed (prevents double render on load)
+                if (this.historyData && JSON.stringify(newHistory) === JSON.stringify(this.historyData)) {
+                    return;
+                }
+
                this.historyData = newHistory;
                this.processHistory(newHistory);
                this.stats.hasTrendData = true;
@@ -59,18 +70,23 @@ window.Components.dashboard = () => ({
        });

        // Initial update if already on dashboard
+        // Note: Alpine.store('data') may already have data from cache if initialized before this component
        if (this.$store.global.activeTab === 'dashboard') {
            this.$nextTick(() => {
                this.updateStats();
                this.updateCharts();

-                // Load history if already in store
+                // Optimization: Only process history if it hasn't been processed yet
+                // The usageHistory watcher above will handle updates if data changes
                const history = Alpine.store('data').usageHistory;
                if (history && Object.keys(history).length > 0) {
+                    // Check if we already have this data to avoid redundant chart update
+                    if (!this.historyData || JSON.stringify(history) !== JSON.stringify(this.historyData)) {
                        this.historyData = history;
                        this.processHistory(history);
                        this.stats.hasTrendData = true;
                    }
+                }
            });
        }
    },
--- a/public/js/components/dashboard/charts.js
+++ b/public/js/components/dashboard/charts.js
@@ -135,16 +135,6 @@ window.DashboardCharts.createDataset = function (label, data, color, canvas) {
 * @param {object} component - Dashboard component instance
 */
 window.DashboardCharts.updateCharts = function (component) {
-  // Safely destroy existing chart instance FIRST
-  if (component.charts.quotaDistribution) {
-    try {
-      component.charts.quotaDistribution.destroy();
-    } catch (e) {
-      console.error("Failed to destroy quota chart:", e);
-    }
-    component.charts.quotaDistribution = null;
-  }
-
  const canvas = document.getElementById("quotaChart");

  // Safety checks
@@ -152,6 +142,33 @@ window.DashboardCharts.updateCharts = function (component) {
    console.debug("quotaChart canvas not found");
    return;
  }
+
+  // FORCE DESTROY: Check for existing chart on the canvas element property
+  // This handles cases where Component state is lost but DOM persists
+  if (canvas._chartInstance) {
+    console.debug("Destroying existing quota chart from canvas property");
+    try {
+        canvas._chartInstance.destroy();
+    } catch(e) { console.warn(e); }
+    canvas._chartInstance = null;
+  }
+  
+  // Also check component state as backup
+  if (component.charts.quotaDistribution) {
+     try {
+         component.charts.quotaDistribution.destroy();
+     } catch(e) { }
+     component.charts.quotaDistribution = null;
+  }
+  
+  // Also try Chart.js registry
+  if (typeof Chart !== "undefined" && Chart.getChart) {
+      const regChart = Chart.getChart(canvas);
+      if (regChart) {
+          try { regChart.destroy(); } catch(e) {}
+      }
+  }
+
  if (typeof Chart === "undefined") {
    console.warn("Chart.js not loaded");
    return;
@@ -178,13 +195,17 @@ window.DashboardCharts.updateCharts = function (component) {
    // Calculate average health from quotaInfo (each entry has { pct })
    // Health = average of all account quotas for this model
    const quotaInfo = row.quotaInfo || [];
+    let avgHealth = 0;
+
    if (quotaInfo.length > 0) {
-      const avgHealth = quotaInfo.reduce((sum, q) => sum + (q.pct || 0), 0) / quotaInfo.length;
+      avgHealth = quotaInfo.reduce((sum, q) => sum + (q.pct || 0), 0) / quotaInfo.length;
+    }
+    // If quotaInfo is empty, avgHealth remains 0 (depleted/unknown)
+
    healthByFamily[family].total++;
    healthByFamily[family].weighted += avgHealth;
    totalHealthSum += avgHealth;
    totalModelCount++;
-    }
  });

  // Update overall health for dashboard display
@@ -193,9 +214,9 @@ window.DashboardCharts.updateCharts = function (component) {
    : 0;

  const familyColors = {
-    claude: getThemeColor("--color-neon-purple"),
-    gemini: getThemeColor("--color-neon-green"),
-    unknown: getThemeColor("--color-neon-cyan"),
+    claude: getThemeColor("--color-neon-purple") || "#a855f7",
+    gemini: getThemeColor("--color-neon-green") || "#22c55e",
+    unknown: getThemeColor("--color-neon-cyan") || "#06b6d4",
  };

  const data = [];
@@ -240,12 +261,16 @@ window.DashboardCharts.updateCharts = function (component) {

    // Inactive segment
    data.push(inactiveVal);
-    colors.push(window.DashboardCharts.hexToRgba(familyColor, 0.1));
+    // Use higher opacity (0.6) to ensure the ring color matches the legend more closely
+    // while still differentiating "depleted" from "active" (1.0 opacity)
+    colors.push(window.DashboardCharts.hexToRgba(familyColor, 0.6));
    labels.push(depletedLabel);
  });

+  // Create Chart
  try {
-    component.charts.quotaDistribution = new Chart(canvas, {
+    const newChart = new Chart(canvas, {
+       // ... config
       type: "doughnut",
       data: {
         labels: labels,
@@ -254,7 +279,7 @@ window.DashboardCharts.updateCharts = function (component) {
             data: data,
             backgroundColor: colors,
             borderColor: getThemeColor("--color-space-950"),
-            borderWidth: 2,
+             borderWidth: 0,
             hoverOffset: 0,
             borderRadius: 0,
           },
@@ -272,11 +297,16 @@ window.DashboardCharts.updateCharts = function (component) {
           title: { display: false },
         },
         animation: {
-          animateScale: true,
-          animateRotate: true,
+           // Disable animation for quota chart to prevent "double refresh" visual glitch
+           duration: 0
         },
       },
    });
+    
+    // SAVE INSTANCE TO CANVAS AND COMPONENT
+    canvas._chartInstance = newChart;
+    component.charts.quotaDistribution = newChart;
+    
  } catch (e) {
    console.error("Failed to create quota chart:", e);
  }
@@ -296,28 +326,46 @@ window.DashboardCharts.updateTrendChart = function (component) {

  console.log("[updateTrendChart] Starting update...");

-  // Safely destroy existing chart instance FIRST
-  if (component.charts.usageTrend) {
-    console.log("[updateTrendChart] Destroying existing chart");
+  const canvas = document.getElementById("usageTrendChart");
+  
+  // FORCE DESTROY: Check for existing chart on the canvas element property
+  if (canvas) {
+      if (canvas._chartInstance) {
+        console.debug("Destroying existing trend chart from canvas property");
        try {
-      // Stop all animations before destroying to prevent null context errors
-      component.charts.usageTrend.stop();
-      component.charts.usageTrend.destroy();
-    } catch (e) {
-      console.error("[updateTrendChart] Failed to destroy chart:", e);
-    }
-    component.charts.usageTrend = null;
+            canvas._chartInstance.stop();
+            canvas._chartInstance.destroy();
+        } catch(e) { console.warn(e); }
+        canvas._chartInstance = null;
      }
      
-  const canvas = document.getElementById("usageTrendChart");
+      // Also try Chart.js registry
+      if (typeof Chart !== "undefined" && Chart.getChart) {
+          const regChart = Chart.getChart(canvas);
+          if (regChart) {
+              try { regChart.stop(); regChart.destroy(); } catch(e) {}
+          }
+      }
+  }
+
+  // Also check component state
+  if (component.charts.usageTrend) {
+    try {
+      component.charts.usageTrend.stop();
+      component.charts.usageTrend.destroy();
+    } catch (e) { }
+    component.charts.usageTrend = null;
+  }

  // Safety checks
  if (!canvas) {
    console.error("[updateTrendChart] Canvas not found in DOM!");
+    _trendChartUpdateLock = false; // Release lock!
    return;
  }
  if (typeof Chart === "undefined") {
    console.error("[updateTrendChart] Chart.js not loaded");
+    _trendChartUpdateLock = false; // Release lock!
    return;
  }

@@ -470,7 +518,7 @@ window.DashboardCharts.updateTrendChart = function (component) {
  }

  try {
-    component.charts.usageTrend = new Chart(canvas, {
+    const newChart = new Chart(canvas, {
      type: "line",
      data: { labels, datasets },
      options: {
@@ -527,6 +575,11 @@ window.DashboardCharts.updateTrendChart = function (component) {
        },
      },
    });
+    
+    // SAVE INSTANCE
+    canvas._chartInstance = newChart;
+    component.charts.usageTrend = newChart;
+
  } catch (e) {
    console.error("Failed to create trend chart:", e);
  } finally {
--- a/public/js/components/dashboard/stats.js
+++ b/public/js/components/dashboard/stats.js
@@ -21,9 +21,10 @@ window.DashboardStats = window.DashboardStats || {};
 *
 * 统计逻辑：
 *   1. 仅统计启用的账号（enabled !== false）
- *   2. 优先统计核心模型（Sonnet/Opus/Pro/Flash）的配额
- *   3. 配额 > 5% 视为 active，否则为 limited
- *   4. 状态非 'ok' 的账号归为 limited
+ *   2. 检查账号下所有追踪模型的配额
+ *   3. 如果任一追踪模型配额 <= 5%，则标记为 limited (Rate Limited Cooldown)
+ *   4. 如果所有追踪模型配额 > 5%，则标记为 active
+ *   5. 状态非 'ok' 的账号归为 limited
 *
 * @param {object} component - Dashboard 组件实例（Alpine.js 上下文）
 * @param {object} component.stats - 统计数据对象（会被修改）
@@ -37,24 +38,32 @@ window.DashboardStats.updateStats = function(component) {
    const accounts = Alpine.store('data').accounts;
    let active = 0, limited = 0;

-    const isCore = (id) => /sonnet|opus|pro|flash/i.test(id);
-
    // Only count enabled accounts in statistics
    const enabledAccounts = accounts.filter(acc => acc.enabled !== false);

    enabledAccounts.forEach(acc => {
        if (acc.status === 'ok') {
            const limits = Object.entries(acc.limits || {});
-            let hasActiveCore = limits.some(([id, l]) => l && l.remainingFraction > 0.05 && isCore(id));

-            if (!hasActiveCore) {
-                const hasAnyCore = limits.some(([id]) => isCore(id));
-                if (!hasAnyCore) {
-                    hasActiveCore = limits.some(([_, l]) => l && l.remainingFraction > 0.05);
-                }
+            if (limits.length === 0) {
+                // No limit data available, consider limited to be safe
+                limited++;
+                return;
            }

-            if (hasActiveCore) active++; else limited++;
+            // Check if ANY tracked model is rate limited (<= 5%)
+            // We consider all models in the limits object as "tracked"
+            const hasRateLimitedModel = limits.some(([_, l]) => {
+                // Treat null/undefined fraction as 0 (limited)
+                if (!l || l.remainingFraction === null || l.remainingFraction === undefined) return true;
+                return l.remainingFraction <= 0.05;
+            });
+
+            if (hasRateLimitedModel) {
+                limited++;
+            } else {
+                active++;
+            }
        } else {
            limited++;
        }
@@ -66,6 +75,25 @@ window.DashboardStats.updateStats = function(component) {
    component.stats.active = active;
    component.stats.limited = limited;

+    // Calculate model usage for rate limit details
+    let totalLimitedModels = 0;
+    let totalTrackedModels = 0;
+
+    enabledAccounts.forEach(acc => {
+         const limits = Object.entries(acc.limits || {});
+         limits.forEach(([id, l]) => {
+             totalTrackedModels++;
+             if (!l || l.remainingFraction == null || l.remainingFraction <= 0.05) {
+                 totalLimitedModels++;
+             }
+         });
+    });
+    
+    component.stats.modelUsage = {
+        limited: totalLimitedModels,
+        total: totalTrackedModels
+    };
+
    // Calculate subscription tier distribution
    const subscription = { ultra: 0, pro: 0, free: 0 };
    enabledAccounts.forEach(acc => {
--- a/public/js/data-store.js
+++ b/public/js/data-store.js
@@ -23,7 +23,9 @@ document.addEventListener('alpine:init', () => {
        filters: {
            account: 'all',
            family: 'all',
-            search: ''
+            search: '',
+            sortCol: 'avgQuota',
+            sortAsc: true
        },

        // Settings for calculation
@@ -32,12 +34,66 @@ document.addEventListener('alpine:init', () => {
        // For simplicity, let's keep relevant filters here.

        init() {
+            // Restore from cache first for instant render
+            this.loadFromCache();
+
+            // Watch filters to recompute
+            // Alpine stores don't have $watch automatically unless inside a component?
+            // We can manually call compute when filters change.
+            
            // Start health check monitoring
            this.startHealthCheck();
        },

+        loadFromCache() {
+            try {
+                const cached = localStorage.getItem('ag_data_cache');
+                if (cached) {
+                    const data = JSON.parse(cached);
+                    const CACHE_TTL = 24 * 60 * 60 * 1000; // 24 hours
+
+                    // Check TTL
+                    if (data.timestamp && (Date.now() - data.timestamp > CACHE_TTL)) {
+                        console.log('Cache expired, skipping restoration');
+                        localStorage.removeItem('ag_data_cache');
+                        return;
+                    }
+
+                    // Basic validity check
+                    if (data.accounts && data.models) {
+                        this.accounts = data.accounts;
+                        this.models = data.models;
+                        this.modelConfig = data.modelConfig || {};
+                        this.usageHistory = data.usageHistory || {};
+                        
+                        // Don't show loading on initial load if we have cache
+                        this.initialLoad = false;
+                        this.computeQuotaRows();
+                        console.log('Restored data from cache');
+                    }
+                }
+            } catch (e) {
+                console.warn('Failed to load cache', e);
+            }
+        },
+
+        saveToCache() {
+            try {
+                const cacheData = {
+                    accounts: this.accounts,
+                    models: this.models,
+                    modelConfig: this.modelConfig,
+                    usageHistory: this.usageHistory,
+                    timestamp: Date.now()
+                };
+                localStorage.setItem('ag_data_cache', JSON.stringify(cacheData));
+            } catch (e) {
+                console.warn('Failed to save cache', e);
+            }
+        },
+
        async fetchData() {
-            // Only show skeleton on initial load, not on refresh
+            // Only show skeleton on initial load if we didn't restore from cache
            if (this.initialLoad) {
                this.loading = true;
            }
@@ -65,6 +121,7 @@ document.addEventListener('alpine:init', () => {
                    this.usageHistory = data.history;
                }

+                this.saveToCache(); // Save fresh data
                this.computeQuotaRows();

                this.lastUpdated = new Date().toLocaleTimeString();
@@ -236,20 +293,52 @@ document.addEventListener('alpine:init', () => {
                    resetIn: minResetTime ? window.utils.formatTimeUntil(minResetTime) : '-',
                    quotaInfo,
                    pinned: !!config.pinned,
-                    hidden: !!isHidden // Use computed visibility
+                    hidden: !!isHidden, // Use computed visibility
+                    activeCount: quotaInfo.filter(q => q.pct > 0).length
                });
            });

-            // Sort: Pinned first, then by avgQuota (descending)
+            // Sort: Pinned first, then by selected column
+            const sortCol = this.filters.sortCol;
+            const sortAsc = this.filters.sortAsc;
+
            this.quotaRows = rows.sort((a, b) => {
                if (a.pinned !== b.pinned) return a.pinned ? -1 : 1;
-                return b.avgQuota - a.avgQuota;
+                
+                let valA = a[sortCol];
+                let valB = b[sortCol];
+
+                // Handle nulls (always push to bottom)
+                if (valA === valB) return 0;
+                if (valA === null || valA === undefined) return 1;
+                if (valB === null || valB === undefined) return -1;
+
+                if (typeof valA === 'string' && typeof valB === 'string') {
+                    return sortAsc ? valA.localeCompare(valB) : valB.localeCompare(valA);
+                }
+
+                return sortAsc ? valA - valB : valB - valA;
            });

            // Trigger Dashboard Update if active
            // Ideally dashboard watches this store.
        },

+        setSort(col) {
+            if (this.filters.sortCol === col) {
+                this.filters.sortAsc = !this.filters.sortAsc;
+            } else {
+                this.filters.sortCol = col;
+                // Default sort direction: Descending for numbers/stats, Ascending for text/time
+                if (['avgQuota', 'activeCount'].includes(col)) {
+                    this.filters.sortAsc = false;
+                } else {
+                    this.filters.sortAsc = true;
+                }
+            }
+            this.computeQuotaRows();
+        },
+
        getModelFamily(modelId) {
            const lower = modelId.toLowerCase();
            if (lower.includes('claude')) return 'claude';
@@ -286,8 +375,7 @@ document.addEventListener('alpine:init', () => {
                    quotaInfo.push({ pct });
                });

-                if (quotaInfo.length === 0) return;
-
+                // treat missing quotaInfo as 0%/unknown; still include row
                rows.push({ modelId, family, quotaInfo });
            });

--- a/public/js/store.js
+++ b/public/js/store.js
@@ -5,6 +5,33 @@

 document.addEventListener('alpine:init', () => {
    Alpine.store('global', {
+        init() {
+            // Hash-based routing
+            const validTabs = ['dashboard', 'models', 'accounts', 'logs', 'settings'];
+            const getHash = () => window.location.hash.substring(1);
+
+            // 1. Initial load from hash
+            const initialHash = getHash();
+            if (validTabs.includes(initialHash)) {
+                this.activeTab = initialHash;
+            }
+
+            // 2. Sync State -> URL
+            Alpine.effect(() => {
+                if (validTabs.includes(this.activeTab) && getHash() !== this.activeTab) {
+                    window.location.hash = this.activeTab;
+                }
+            });
+
+            // 3. Sync URL -> State (Back/Forward buttons)
+            window.addEventListener('hashchange', () => {
+                const hash = getHash();
+                if (validTabs.includes(hash) && this.activeTab !== hash) {
+                    this.activeTab = hash;
+                }
+            });
+        },
+
        // App State
        version: '1.0.0',
        activeTab: 'dashboard',
@@ -25,6 +52,9 @@ document.addEventListener('alpine:init', () => {
                active: "ACTIVE",
                operational: "Operational",
                rateLimited: "RATE LIMITED",
+                quotasDepleted: "{count}/{total} Quotas Depleted",
+                quotasDepletedTitle: "QUOTAS DEPLETED",
+                outOfTracked: "Out of {total} Tracked",
                cooldown: "Cooldown",
                searchPlaceholder: "Search models...",
                allAccounts: "All Accounts",
@@ -279,6 +309,9 @@ document.addEventListener('alpine:init', () => {
                active: "活跃状态",
                operational: "运行中",
                rateLimited: "受限状态",
+                quotasDepleted: "{count}/{total} 配额耗尽",
+                quotasDepletedTitle: "配额耗尽数",
+                outOfTracked: "共追踪 {total} 个",
                cooldown: "冷却中",
                searchPlaceholder: "搜索模型...",
                allAccounts: "所有账号",
--- a/public/views/accounts.html
+++ b/public/views/accounts.html
@@ -2,15 +2,17 @@
    <!-- Compact Header -->
    <div class="flex items-center justify-between gap-4 mb-6">
        <!-- Title with inline subtitle -->
-        <div class="flex items-baseline gap-3">
+        <div class="flex flex-wrap items-center gap-4">
            <h1 class="text-2xl font-bold text-white tracking-tight" x-text="$store.global.t('accountManagement')">
                Account Management
            </h1>
-            <span class="text-[10px] font-mono text-gray-600 uppercase tracking-[0.15em]"
+            <div class="flex items-center h-6 px-3 rounded-full bg-space-800/80 border border-space-border/50 shadow-sm backdrop-blur-sm">
+                <span class="text-[10px] font-mono text-gray-400 uppercase tracking-wider"
                      x-text="$store.global.t('manageTokens')">
                    Manage Google Account tokens and authorization states
                </span>
            </div>
+        </div>

        <!-- Action Buttons -->
        <div class="flex items-center gap-2">
--- a/public/views/dashboard.html
+++ b/public/views/dashboard.html
@@ -2,18 +2,20 @@
    <!-- Compact Header -->
    <div class="flex items-center justify-between gap-4 mb-6">
        <!-- Title with inline subtitle -->
-        <div class="flex items-baseline gap-3">
+        <div class="flex flex-wrap items-center gap-4">
            <h1 class="text-2xl font-bold text-white tracking-tight" x-text="$store.global.t('dashboard')">
                Dashboard
            </h1>
-            <span class="text-[10px] font-mono text-gray-600 uppercase tracking-[0.15em]"
+            <div class="flex items-center h-6 px-3 rounded-full bg-space-800/80 border border-space-border/50 shadow-sm backdrop-blur-sm">
+                <span class="text-[10px] font-mono text-gray-400 uppercase tracking-wider"
                      x-text="$store.global.t('systemDesc')">
                    CLAUDE PROXY SYSTEM
                </span>
            </div>
+        </div>

        <!-- Compact Status Indicator -->
-        <div class="flex items-center gap-2 px-2.5 py-1.5 rounded-lg bg-space-900/60 border border-space-border/40">
+        <div class="flex items-center gap-2 px-2.5 py-1.5 rounded-lg bg-space-900/60 border border-space-border/40 whitespace-nowrap flex-shrink-0">
            <div class="relative flex items-center justify-center">
                <span class="absolute w-1.5 h-1.5 bg-neon-green rounded-full animate-ping opacity-75"></span>
                <span class="relative w-1.5 h-1.5 bg-neon-green rounded-full"></span>
@@ -29,11 +31,12 @@
    <!-- Skeleton Loading (仅在首次加载时显示) -->
    <div x-show="$store.data.initialLoad" class="space-y-6">
        <!-- Skeleton Stats Grid -->
-        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+        <div class="grid grid-cols-2 sm:grid-cols-5 gap-3">
            <div class="skeleton-stat-card"></div>
            <div class="skeleton-stat-card"></div>
            <div class="skeleton-stat-card"></div>
            <div class="skeleton-stat-card"></div>
+            <div class="skeleton-stat-card col-span-2 sm:col-span-1"></div>
        </div>

        <!-- Skeleton Charts -->
@@ -46,31 +49,33 @@
    <!-- Actual Content (首次加载完成后显示) -->
    <div x-show="!$store.data.initialLoad" class="space-y-6">
        <!-- Stats Grid -->
-        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+        <div class="grid grid-cols-2 sm:grid-cols-5 gap-2 lg:gap-3">
        <div
-            class="stat bg-space-900/40 border border-space-border/30 rounded-xl p-6 hover:border-cyan-500/30 hover:bg-cyan-500/5 transition-all duration-300 group relative cursor-pointer"
+            class="stat bg-space-900/40 border border-space-border/30 rounded-xl p-3 lg:p-4 hover:border-cyan-500/30 hover:bg-cyan-500/5 transition-all duration-300 group relative cursor-pointer min-w-0"
            @click="$store.global.activeTab = 'accounts'"
            :title="$store.global.t('clickToViewAllAccounts')">
-            <!-- Icon 移到右上角，缩小并变灰 -->
+            <!-- Icon -->
            <div class="absolute top-3 right-3 text-gray-700/40 group-hover:text-cyan-400/70 transition-colors">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-5 h-5 stroke-current">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 sm:w-5 sm:h-5 stroke-current">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0z">
                    </path>
                </svg>
            </div>
-            <!-- 数字放大为主角 -->
-            <div class="stat-value text-white font-mono text-4xl font-bold mb-1" x-text="stats.total"></div>
-            <div class="stat-title text-gray-500 font-mono text-xs uppercase tracking-wider truncate"
+            <!-- Value -->
+            <div class="stat-value text-white font-mono text-2xl lg:text-3xl font-bold mb-1 truncate" x-text="stats.total"></div>
+            <!-- Title -->
+            <div class="stat-title text-gray-500 font-mono text-[10px] uppercase tracking-wider truncate"
                x-text="$store.global.t('totalAccounts')"></div>
+            <!-- Desc -->
            <div class="stat-desc text-cyan-400/60 text-[10px] truncate flex items-center gap-1">
-                <span x-text="$store.global.t('linkedAccounts')"></span>
-                <svg class="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <span x-text="$store.global.t('linkedAccounts')" class="truncate"></span>
+                <svg class="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
            </div>
-            <!-- Subscription Tier Distribution -->
-            <div class="flex items-center gap-2 mt-2 text-[10px] font-mono" x-show="stats.subscription">
+            <!-- Tiers -->
+            <div class="flex items-center gap-1 mt-2 text-[10px] font-mono flex-wrap" x-show="stats.subscription">
                <template x-if="stats.subscription?.ultra > 0">
                    <span class="px-1.5 py-0.5 rounded bg-yellow-500/10 text-yellow-400 border border-yellow-500/30">
                        <span x-text="stats.subscription.ultra"></span> Ultra
@@ -90,42 +95,63 @@
        </div>

        <div
-            class="stat bg-space-900/40 border border-space-border/30 rounded-xl p-6 hover:border-green-500/30 hover:bg-green-500/5 transition-all duration-300 group relative cursor-pointer"
+            class="stat bg-space-900/40 border border-space-border/30 rounded-xl p-3 lg:p-4 hover:border-green-500/30 hover:bg-green-500/5 transition-all duration-300 group relative cursor-pointer min-w-0"
            @click="$store.global.activeTab = 'models'"
            :title="$store.global.t('clickToViewModels')">
            <div class="absolute top-3 right-3 text-gray-700/40 group-hover:text-green-400/70 transition-colors">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-5 h-5 stroke-current">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 sm:w-5 sm:h-5 stroke-current">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>
-            <div class="stat-value text-white font-mono text-4xl font-bold mb-1" x-text="stats.active"></div>
-            <div class="stat-title text-gray-500 font-mono text-xs uppercase tracking-wider truncate"
+            <div class="stat-value text-white font-mono text-2xl lg:text-3xl font-bold mb-1 truncate" x-text="stats.active"></div>
+            <div class="stat-title text-gray-500 font-mono text-[10px] uppercase tracking-wider truncate"
                x-text="$store.global.t('active')"></div>
            <div class="stat-desc text-green-400/60 text-[10px] truncate flex items-center gap-1">
-                <span x-text="$store.global.t('operational')"></span>
-                <svg class="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <span x-text="$store.global.t('operational')" class="truncate"></span>
+                <svg class="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
            </div>
        </div>

        <div
-            class="stat bg-space-900/40 border border-space-border/30 rounded-xl p-6 hover:border-red-500/30 hover:bg-red-500/5 transition-all duration-300 group relative cursor-pointer"
+            class="stat bg-space-900/40 border border-space-border/30 rounded-xl p-3 lg:p-4 hover:border-red-500/30 hover:bg-red-500/5 transition-all duration-300 group relative cursor-pointer min-w-0"
            @click="$store.global.activeTab = 'accounts'"
            :title="$store.global.t('clickToViewLimitedAccounts')">
            <div class="absolute top-3 right-3 text-gray-700/40 group-hover:text-red-500/70 transition-colors">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-5 h-5 stroke-current">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 sm:w-5 sm:h-5 stroke-current">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>
-            <div class="stat-value text-white font-mono text-4xl font-bold mb-1" x-text="stats.limited"></div>
-            <div class="stat-title text-gray-500 font-mono text-xs uppercase tracking-wider truncate"
+            <div class="stat-value text-white font-mono text-2xl lg:text-3xl font-bold mb-1 truncate" x-text="stats.limited"></div>
+            <div class="stat-title text-gray-500 font-mono text-[10px] uppercase tracking-wider truncate"
                x-text="$store.global.t('rateLimited')"></div>
            <div class="stat-desc text-red-500/60 text-[10px] truncate flex items-center gap-1">
-                <span x-text="$store.global.t('cooldown')"></span>
-                <svg class="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <span x-text="$store.global.t('cooldown')" class="truncate"></span>
+                <svg class="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                </svg>
+            </div>
+        </div>
+
+        <div
+            class="stat bg-space-900/40 border border-space-border/30 rounded-xl p-3 lg:p-4 hover:border-orange-500/30 hover:bg-orange-500/5 transition-all duration-300 group relative cursor-pointer min-w-0"
+            @click="$store.global.activeTab = 'models'"
+            :title="$store.global.t('clickToViewModels')">
+            <div class="absolute top-3 right-3 text-gray-700/40 group-hover:text-orange-500/70 transition-colors">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 sm:w-5 sm:h-5 stroke-current">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
+                </svg>
+            </div>
+            <div class="stat-value text-white font-mono text-2xl lg:text-3xl font-bold mb-1 truncate" x-text="stats.modelUsage ? stats.modelUsage.limited : 0"></div>
+            <div class="stat-title text-gray-500 font-mono text-[10px] lg:text-xs uppercase tracking-wider truncate"
+                x-text="$store.global.t('quotasDepletedTitle')"></div>
+            <div class="stat-desc text-orange-500/60 text-[10px] truncate flex items-center gap-1">
+                <span x-text="$store.global.t('outOfTracked', {total: stats.modelUsage ? stats.modelUsage.total : 0})" class="truncate"></span>
+                <svg class="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
            </div>
@@ -133,9 +159,9 @@

        <!-- Global Quota Chart -->
        <div
-            class="stat bg-space-900/40 border border-space-border/30 rounded-xl p-6 col-span-1 lg:col-start-4 lg:row-start-1 h-full flex items-center justify-between gap-3 overflow-hidden relative group hover:border-space-border/60 transition-colors">
+            class="stat bg-space-900/40 border border-space-border/30 rounded-xl p-3 xl:p-4 h-full flex flex-row sm:flex-col items-center justify-between gap-2 overflow-hidden relative group hover:border-space-border/60 transition-colors col-span-2 sm:col-span-1 min-w-0">
            <!-- Chart Container -->
-            <div class="h-14 w-14 lg:h-16 lg:w-16 relative flex-shrink-0">
+            <div class="h-14 w-14 xl:h-16 xl:w-16 relative flex-shrink-0 self-center">
                <canvas id="quotaChart"></canvas>
                <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
                    <div class="text-[10px] font-bold text-white font-mono" x-text="stats.overallHealth + '%'">%</div>
@@ -143,32 +169,34 @@
            </div>

            <!-- Legend / Info -->
-            <div class="flex flex-col justify-center gap-2 flex-grow min-w-0">
-                <div class="flex items-center justify-between">
-                    <span class="text-[10px] text-gray-500 uppercase tracking-wider font-mono truncate"
+            <div class="flex flex-col justify-center gap-1 flex-grow min-w-0 w-full sm:text-center">
+                <div class="flex items-center justify-between sm:justify-center h-full">
+                    <span class="text-[10px] text-gray-500 uppercase font-mono leading-tight whitespace-normal sm:px-1"
                        x-text="$store.global.t('globalQuota')">Global Quota</span>
                </div>

                <!-- Custom Legend -->
-                <div class="space-y-1">
-                    <div class="flex items-center justify-between text-[10px] text-gray-400 cursor-pointer hover:text-neon-purple transition-colors group/legend"
+                <div class="space-y-0.5 sm:flex sm:flex-col sm:items-center w-full">
+                    <div class="flex items-center justify-between sm:justify-center sm:gap-2 text-[10px] text-gray-400 cursor-pointer hover:text-neon-purple transition-colors group/legend w-full sm:w-auto"
                        @click="$store.global.activeTab = 'models'; $nextTick(() => { $store.data.filters.family = 'claude'; $store.data.computeQuotaRows(); })"
                        :title="$store.global.t('clickToFilterClaude')">
-                        <div class="flex items-center gap-1.5 truncate">
+                        <div class="flex items-center gap-1.5">
                            <div class="w-1.5 h-1.5 rounded-full bg-neon-purple flex-shrink-0"></div>
                            <span class="truncate" x-text="$store.global.t('familyClaude')">Claude</span>
-                            <svg class="w-2.5 h-2.5 opacity-0 group-hover/legend:opacity-100 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <!-- Hidden arrow on desktop/stacked view to save space -->
+                            <svg class="w-2.5 h-2.5 opacity-0 group-hover/legend:opacity-100 transition-opacity flex-shrink-0 sm:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                            </svg>
                        </div>
                    </div>
-                    <div class="flex items-center justify-between text-[10px] text-gray-400 cursor-pointer hover:text-neon-green transition-colors group/legend"
+                    <div class="flex items-center justify-between sm:justify-center sm:gap-2 text-[10px] text-gray-400 cursor-pointer hover:text-neon-green transition-colors group/legend w-full sm:w-auto"
                        @click="$store.global.activeTab = 'models'; $nextTick(() => { $store.data.filters.family = 'gemini'; $store.data.computeQuotaRows(); })"
                        :title="$store.global.t('clickToFilterGemini')">
-                        <div class="flex items-center gap-1.5 truncate">
+                        <div class="flex items-center gap-1.5">
                            <div class="w-1.5 h-1.5 rounded-full bg-neon-green flex-shrink-0"></div>
                            <span class="truncate" x-text="$store.global.t('familyGemini')">Gemini</span>
-                            <svg class="w-2.5 h-2.5 opacity-0 group-hover/legend:opacity-100 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <!-- Hidden arrow on desktop/stacked view to save space -->
+                            <svg class="w-2.5 h-2.5 opacity-0 group-hover/legend:opacity-100 transition-opacity flex-shrink-0 sm:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                            </svg>
                        </div>
@@ -177,11 +205,10 @@
            </div>
        </div>
    </div>
-
    <!-- Usage Trend Chart -->
    <div class="view-card">
        <!-- Header with Stats and Filter -->
-        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-6 mb-8">
+        <div class="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-6 mb-8">
            <div class="flex flex-wrap items-center gap-5">
                <div class="flex items-center gap-2.5">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
@@ -210,12 +237,12 @@
                </div>
            </div>

-            <div class="flex items-center gap-3 w-full sm:w-auto justify-end flex-wrap">
+            <div class="flex items-center gap-2 sm:gap-3 w-full sm:w-auto justify-start sm:justify-end flex-wrap lg:flex-nowrap lg:gap-4 lg:bg-space-900/40 lg:p-1.5 lg:rounded-lg lg:border lg:border-space-border/30 lg:whitespace-nowrap lg:flex-shrink-0">
                <!-- Time Range Dropdown -->
-                <div class="relative">
+                <div class="relative flex-1 sm:flex-none">
                    <button @click="showTimeRangeDropdown = !showTimeRangeDropdown; showDisplayModeDropdown = false; showModelFilter = false"
-                        class="flex items-center gap-2 px-3 py-1.5 text-[10px] font-mono text-gray-400 bg-space-800 border border-space-border/50 rounded hover:border-neon-cyan/50 transition-colors whitespace-nowrap">
-                        <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        class="filter-control">
+                        <svg class="w-3.5 h-3.5 lg:w-4 lg:h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
@@ -230,31 +257,31 @@
                        x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
                        x-transition:leave="transition ease-in duration-75"
                        x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
-                        class="absolute right-0 mt-1 w-36 bg-space-900 border border-space-border rounded-lg shadow-xl z-50 overflow-hidden py-1"
+                        class="absolute right-0 mt-1 w-36 bg-space-900 border border-space-border rounded-lg shadow-xl z-50 py-1"
                        style="display: none;">
-                        <button @click="setTimeRange('1h')" class="w-full px-3 py-1.5 text-left text-[10px] font-mono hover:bg-white/5 transition-colors"
+                        <button @click="setTimeRange('1h')" class="filter-control-item"
                            :class="timeRange === '1h' ? 'text-neon-cyan' : 'text-gray-400'"
                            x-text="$store.global.t('last1Hour')"></button>
-                        <button @click="setTimeRange('6h')" class="w-full px-3 py-1.5 text-left text-[10px] font-mono hover:bg-white/5 transition-colors"
+                        <button @click="setTimeRange('6h')" class="filter-control-item"
                            :class="timeRange === '6h' ? 'text-neon-cyan' : 'text-gray-400'"
                            x-text="$store.global.t('last6Hours')"></button>
-                        <button @click="setTimeRange('24h')" class="w-full px-3 py-1.5 text-left text-[10px] font-mono hover:bg-white/5 transition-colors"
+                        <button @click="setTimeRange('24h')" class="filter-control-item"
                            :class="timeRange === '24h' ? 'text-neon-cyan' : 'text-gray-400'"
                            x-text="$store.global.t('last24Hours')"></button>
-                        <button @click="setTimeRange('7d')" class="w-full px-3 py-1.5 text-left text-[10px] font-mono hover:bg-white/5 transition-colors"
+                        <button @click="setTimeRange('7d')" class="filter-control-item"
                            :class="timeRange === '7d' ? 'text-neon-cyan' : 'text-gray-400'"
                            x-text="$store.global.t('last7Days')"></button>
-                        <button @click="setTimeRange('all')" class="w-full px-3 py-1.5 text-left text-[10px] font-mono hover:bg-white/5 transition-colors"
+                        <button @click="setTimeRange('all')" class="filter-control-item"
                            :class="timeRange === 'all' ? 'text-neon-cyan' : 'text-gray-400'"
                            x-text="$store.global.t('allTime')"></button>
                    </div>
                </div>

                <!-- Display Mode Dropdown -->
-                <div class="relative">
+                <div class="relative flex-1 sm:flex-none">
                    <button @click="showDisplayModeDropdown = !showDisplayModeDropdown; showTimeRangeDropdown = false; showModelFilter = false"
-                        class="flex items-center gap-2 px-3 py-1.5 text-[10px] font-mono text-gray-400 bg-space-800 border border-space-border/50 rounded hover:border-neon-purple/50 transition-colors whitespace-nowrap">
-                        <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        class="flex items-center justify-center gap-2 px-3 py-1.5 lg:px-4 lg:py-2 text-[10px] lg:text-xs font-mono font-medium text-gray-400 bg-space-800 lg:bg-transparent border border-space-border/50 lg:border-transparent rounded lg:rounded-md hover:text-white lg:hover:bg-space-800 hover:border-neon-purple/50 lg:hover:border-neon-purple/30 lg:hover:shadow-lg lg:hover:shadow-neon-purple/10 transition-all duration-200 whitespace-nowrap w-full sm:w-auto">
+                        <svg class="w-3 h-3 lg:w-4 lg:h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                        </svg>
@@ -269,22 +296,22 @@
                        x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
                        x-transition:leave="transition ease-in duration-75"
                        x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
-                        class="absolute right-0 mt-1 w-32 bg-space-900 border border-space-border rounded-lg shadow-xl z-50 overflow-hidden py-1"
+                        class="absolute right-0 mt-1 w-32 bg-space-900 border border-space-border rounded-lg shadow-xl z-50 py-1"
                        style="display: none;">
-                        <button @click="setDisplayMode('family')" class="w-full px-3 py-1.5 text-left text-[10px] font-mono hover:bg-white/5 transition-colors"
+                        <button @click="setDisplayMode('family')" class="filter-control-item"
                            :class="displayMode === 'family' ? 'text-neon-purple' : 'text-gray-400'"
                            x-text="$store.global.t('family')"></button>
-                        <button @click="setDisplayMode('model')" class="w-full px-3 py-1.5 text-left text-[10px] font-mono hover:bg-white/5 transition-colors"
+                        <button @click="setDisplayMode('model')" class="filter-control-item"
                            :class="displayMode === 'model' ? 'text-neon-purple' : 'text-gray-400'"
                            x-text="$store.global.t('model')"></button>
                    </div>
                </div>

                <!-- Filter Dropdown -->
-                <div class="relative">
+                <div class="relative flex-1 sm:flex-none min-w-[120px]">
                    <button @click="showModelFilter = !showModelFilter; showTimeRangeDropdown = false; showDisplayModeDropdown = false"
-                        class="flex items-center gap-2 px-3 py-1.5 text-[10px] font-mono text-gray-400 bg-space-800 border border-space-border/50 rounded hover:border-neon-purple/50 transition-colors whitespace-nowrap">
-                        <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        class="flex items-center justify-center gap-2 px-3 py-1.5 lg:px-4 lg:py-2 text-[10px] lg:text-xs font-mono font-medium text-gray-400 bg-space-800 lg:bg-transparent border border-space-border/50 lg:border-transparent rounded lg:rounded-md hover:text-white lg:hover:bg-space-800 hover:border-neon-purple/50 lg:hover:border-neon-purple/30 lg:hover:shadow-lg lg:hover:shadow-neon-purple/10 transition-all duration-200 whitespace-nowrap w-full sm:w-auto">
+                        <svg class="w-3 h-3 lg:w-4 lg:h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
                        </svg>
--- a/public/views/models.html
+++ b/public/views/models.html
@@ -2,15 +2,17 @@
    <!-- Compact Header -->
    <div class="flex items-center justify-between gap-4 mb-6">
        <!-- Title with inline subtitle -->
-        <div class="flex items-baseline gap-3">
+        <div class="flex flex-wrap items-center gap-4">
            <h1 class="text-2xl font-bold text-white tracking-tight" x-text="$store.global.t('models')">
                Models
            </h1>
-            <span class="text-[10px] font-mono text-gray-600 uppercase tracking-[0.15em]"
+            <div class="flex items-center h-6 px-3 rounded-full bg-space-800/80 border border-space-border/50 shadow-sm backdrop-blur-sm">
+                <span class="text-[10px] font-mono text-gray-400 uppercase tracking-wider"
                      x-text="$store.global.t('modelsPageDesc')">
                    Real-time quota and status for all available models.
                </span>
            </div>
+        </div>

        <!-- Search Bar -->
        <div class="relative w-72 h-9">
@@ -94,14 +96,60 @@
                :class="{'table-xs': $store.settings.compact, 'table-sm': !$store.settings.compact}">
            <thead>
                <tr>
-                    <th class="w-14 py-3 pl-4 whitespace-nowrap" x-text="$store.global.t('stat')">Stat</th>
-                    <th class="py-3 whitespace-nowrap" x-text="$store.global.t('modelIdentity')">Model Identity</th>
-                    <th class="min-w-[12rem] py-3 whitespace-nowrap" x-text="$store.global.t('globalQuota')">Global
-                        Quota</th>
-                    <th class="min-w-[8rem] py-3 whitespace-nowrap" x-text="$store.global.t('nextReset')">Next Reset
+                    <th class="w-14 py-3 pl-4 whitespace-nowrap cursor-pointer hover:text-white transition-colors select-none group"
+                        @click="$store.data.setSort('avgQuota')">
+                        <div class="flex items-center justify-center">
+                            <span x-text="$store.global.t('stat')">Stat</span>
+                        </div>
+                    </th>
+                    <th class="py-3 whitespace-nowrap cursor-pointer hover:text-white transition-colors select-none group"
+                        @click="$store.data.setSort('modelId')">
+                        <div class="flex items-center gap-1">
+                            <span x-text="$store.global.t('modelIdentity')">Model Identity</span>
+                            <svg class="w-3 h-3 transition-colors"
+                                :class="$store.data.filters.sortCol === 'modelId' ? 'text-neon-purple' : 'text-gray-700 opacity-0 group-hover:opacity-100'"
+                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    :d="$store.data.filters.sortCol === 'modelId' ? ($store.data.filters.sortAsc ? 'M5 15l7-7 7 7' : 'M19 9l-7 7-7-7') : 'M8 9l4-4 4 4m0 6l-4 4-4-4'" />
+                            </svg>
+                        </div>
+                    </th>
+                    <th class="min-w-[12rem] py-3 whitespace-nowrap cursor-pointer hover:text-white transition-colors select-none group"
+                        @click="$store.data.setSort('avgQuota')">
+                        <div class="flex items-center gap-1">
+                            <span x-text="$store.global.t('globalQuota')">Global Quota</span>
+                            <svg class="w-3 h-3 transition-colors"
+                                :class="$store.data.filters.sortCol === 'avgQuota' ? 'text-neon-purple' : 'text-gray-700 opacity-0 group-hover:opacity-100'"
+                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    :d="$store.data.filters.sortCol === 'avgQuota' ? ($store.data.filters.sortAsc ? 'M5 15l7-7 7 7' : 'M19 9l-7 7-7-7') : 'M8 9l4-4 4 4m0 6l-4 4-4-4'" />
+                            </svg>
+                        </div>
+                    </th>
+                    <th class="min-w-[8rem] py-3 whitespace-nowrap cursor-pointer hover:text-white transition-colors select-none group"
+                        @click="$store.data.setSort('minResetTime')">
+                        <div class="flex items-center gap-1">
+                            <span x-text="$store.global.t('nextReset')">Next Reset</span>
+                            <svg class="w-3 h-3 transition-colors"
+                                :class="$store.data.filters.sortCol === 'minResetTime' ? 'text-neon-purple' : 'text-gray-700 opacity-0 group-hover:opacity-100'"
+                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    :d="$store.data.filters.sortCol === 'minResetTime' ? ($store.data.filters.sortAsc ? 'M5 15l7-7 7 7' : 'M19 9l-7 7-7-7') : 'M8 9l4-4 4 4m0 6l-4 4-4-4'" />
+                            </svg>
+                        </div>
+                    </th>
+                    <th class="py-3 whitespace-nowrap cursor-pointer hover:text-white transition-colors select-none group"
+                        @click="$store.data.setSort('activeCount')">
+                        <div class="flex items-center gap-1 justify-start">
+                            <span x-text="$store.global.t('distribution')">Account Distribution</span>
+                            <svg class="w-3 h-3 transition-colors"
+                                :class="$store.data.filters.sortCol === 'activeCount' ? 'text-neon-purple' : 'text-gray-700 opacity-0 group-hover:opacity-100'"
+                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    :d="$store.data.filters.sortCol === 'activeCount' ? ($store.data.filters.sortAsc ? 'M5 15l7-7 7 7' : 'M19 9l-7 7-7-7') : 'M8 9l4-4 4 4m0 6l-4 4-4-4'" />
+                            </svg>
+                        </div>
                    </th>
-                    <th class="py-3 whitespace-nowrap" x-text="$store.global.t('distribution')">Account
-                        Distribution</th>
                    <th class="w-20 py-3 pr-4 text-right whitespace-nowrap" x-text="$store.global.t('actions')">Actions
                    </th>
                </tr>
@@ -143,20 +191,20 @@
                            </div>
                        </td>
                        <td>
-                            <div class="flex items-center justify-end gap-3">
+                            <div class="flex items-center justify-start gap-3">
                                <div
-                                    class="text-[10px] font-mono text-gray-500 hidden xl:block text-right leading-tight opacity-70">
+                                    class="text-[10px] font-mono text-gray-500 hidden xl:block text-left leading-tight opacity-70">
                                    <div
                                        x-text="$store.global.t('activeCount', {count: row.quotaInfo?.filter(q => q.pct > 0).length || 0})">
                                    </div>
                                </div>
                                <!-- Account Status Indicators -->
-                                <div class="flex flex-wrap gap-1 justify-end max-w-[200px]" x-data="{ maxVisible: 12 }">
+                                <div class="flex flex-wrap gap-1 justify-start max-w-[200px]" x-data="{ maxVisible: 12 }">
                                    <template x-if="!row.quotaInfo || row.quotaInfo.length === 0">
                                        <div class="text-[10px] text-gray-600 italic">No data</div>
                                    </template>
                                    <template x-if="row.quotaInfo && row.quotaInfo.length > 0">
-                                        <div class="flex flex-wrap gap-1 justify-end">
+                                        <div class="flex flex-wrap gap-1 justify-start">
                                            <!-- Visible accounts (limited to maxVisible) -->
                                            <template x-for="(q, idx) in row.quotaInfo.slice(0, maxVisible)" :key="q.fullEmail">
                                                <div class="tooltip tooltip-left" :data-tip="`${q.fullEmail} (${q.pct}%)`">