feat(webui): Enhance dashboard, global styles, and settings module

## Dashboard Enhancements
- Add Request Volume trend chart with Chart.js line graph
- Support Family/Model display modes for aggregation levels
- Show Total/Today/1H usage statistics
- Hierarchical filter dropdown with Smart select (Top 5 by 24h usage)
- Persist chart preferences to localStorage
- Improve account health detection logic
- Core models (sonnet/opus/pro/flash) require >5% quota to be healthy
- Dynamic quota ring chart supporting any model family
- Unify table styles with standard-table class

## Global Style Refactoring
- Add CSS variable system for theming
- Space color scale (950/900/850/800/border)
- Neon accent colors (purple/green/cyan/yellow/red)
- Text hierarchy (main/dim/muted/bright)
- Chart palette (16 colors)
- Add unified component classes
- .view-container for consistent page layouts
- .section-header/.section-title/.section-desc
- .standard-table for table styling
- Update scrollbar, nav-item, progress-bar to use theme variables

## Settings Module Extensions
- Add model mapping column in Models tab
- Enhance model selectors with family color indicators
- Support horizontal scroll for tabs on narrow screens
- Add defaultCooldownMs and maxWaitBeforeErrorMs config options

## New Module
- Add src/modules/usage-stats.js for request tracking
- Track /v1/messages and /v1/chat/completions endpoints
- Hierarchical storage: { hour: { family: { model: count } } }
- Auto-save every minute, 30-day retention
- GET /api/stats/history endpoint for dashboard chart

## Backend Changes
- Add direct account manipulation helpers (bypass AccountManager)
- Add POST /api/config/password endpoint for WebUI password change
- Auto-reload AccountManager after account operations
- Use CSS variables in OAuth callback pages

## Other
- Update .gitignore for runtime data directory
- Add i18n keys for new UI elements (EN/zh_CN)

Co-Authored-By: Claude <noreply@anthropic.com>

.gitignore

@@ -16,6 +16,10 @@ log.txt
 
 # Local config (may contain tokens)
 .claude/
+.deepvcode/
+
+# Runtime data
+data/
 
 # Test artifacts
 tests/utils/*.png

package-lock.json

@@ -1,14 +1,15 @@
 {
   "name": "antigravity-claude-proxy",
-  "version": "1.0.2",
+  "version": "1.2.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "antigravity-claude-proxy",
-      "version": "1.0.2",
+      "version": "1.2.6",
       "license": "MIT",
       "dependencies": {
+        "async-mutex": "^0.5.0",
         "better-sqlite3": "^12.5.0",
         "cors": "^2.8.5",
         "express": "^4.18.2"
@@ -39,6 +40,15 @@
       "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
       "license": "MIT"
     },
+    "node_modules/async-mutex": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/async-mutex/-/async-mutex-0.5.0.tgz",
+      "integrity": "sha512-1A94B18jkJ3DYq284ohPxoXbfTA5HsQ7/Mf4DEhcyLx3Bz27Rh59iScbB6EPiP+B+joue6YCxcMXSbFC1tZKwA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -1304,6 +1314,12 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/tunnel-agent": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",

public/app.js

@@ -63,8 +63,8 @@ document.addEventListener('alpine:init', () => {
 
             // Chart Defaults
             if (typeof Chart !== 'undefined') {
-                Chart.defaults.color = '#71717a';
-                Chart.defaults.borderColor = '#27272a';
+                Chart.defaults.color = window.utils.getThemeColor('--color-text-dim');
+                Chart.defaults.borderColor = window.utils.getThemeColor('--color-space-border');
                 Chart.defaults.font.family = '"JetBrains Mono", monospace';
             }
 
@@ -111,8 +111,12 @@ document.addEventListener('alpine:init', () => {
 
                     const messageHandler = (event) => {
                         if (event.data?.type === 'oauth-success') {
-                            const action = reAuthEmail ? 're-authenticated' : 'added';
-                            Alpine.store('global').showToast(`Account ${event.data.email} ${action} successfully`, 'success');
+                            const actionKey = reAuthEmail ? 'reauthenticated' : 'added';
+                            const action = Alpine.store('global').t(actionKey);
+                            const successfully = Alpine.store('global').t('successfully');
+                            const msg = `${Alpine.store('global').t('accounts')} ${event.data.email} ${action} ${successfully}`;
+
+                            Alpine.store('global').showToast(msg, 'success');
                             Alpine.store('data').fetchData();
                             document.getElementById('add_account_modal')?.close();
                         }
@@ -120,10 +124,10 @@ document.addEventListener('alpine:init', () => {
                     window.addEventListener('message', messageHandler);
                     setTimeout(() => window.removeEventListener('message', messageHandler), 300000);
                 } else {
-                    Alpine.store('global').showToast(data.error || 'Failed to get auth URL', 'error');
+                    Alpine.store('global').showToast(data.error || Alpine.store('global').t('failedToGetAuthUrl'), 'error');
                 }
             } catch (e) {
-                Alpine.store('global').showToast('Failed to start OAuth flow: ' + e.message, 'error');
+                Alpine.store('global').showToast(Alpine.store('global').t('failedToStartOAuth') + ': ' + e.message, 'error');
             }
         }
     }));

public/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="black" class="dark">
+<html lang="en" data-theme="antigravity" class="dark">
 
 <head>
     <meta charset="UTF-8">
@@ -26,18 +26,36 @@
                     colors: {
                         // Deep Space Palette
                         space: {
-                            950: '#050505', // Almost black
-                            900: '#0a0a0a',
-                            800: '#171717',
-                            border: '#27272a'
+                            950: 'var(--color-space-950)', // Deep background
+                            900: 'var(--color-space-900)', // Panel background
+                            850: 'var(--color-space-850)', // Hover states
+                            800: 'var(--color-space-800)', // UI elements
+                            border: 'var(--color-space-border)'
                         },
                         neon: {
-                            purple: '#a855f7',
-                            cyan: '#06b6d4',
-                            green: '#22c55e'
+                            purple: 'var(--color-neon-purple)',
+                            cyan: 'var(--color-neon-cyan)',
+                            green: 'var(--color-neon-green)',
+                            yellow: 'var(--color-neon-yellow)',
+                            red: 'var(--color-neon-red)'
                         }
                     }
                 }
+            },
+            daisyui: {
+                themes: [{
+                    antigravity: {
+                        "primary": "var(--color-neon-purple)",   // Neon Purple
+                        "secondary": "var(--color-neon-green)", // Neon Green
+                        "accent": "var(--color-neon-cyan)",    // Neon Cyan
+                        "neutral": "var(--color-space-800)",   // space-800
+                        "base-100": "var(--color-space-950)",  // space-950
+                        "info": "var(--color-neon-cyan)",
+                        "success": "var(--color-neon-green)",
+                        "warning": "var(--color-neon-yellow)",
+                        "error": "var(--color-neon-red)",
+                    }
+                }]
             }
         }
     </script>
@@ -96,8 +114,8 @@
                 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>
             <div class="flex flex-col">
-                <span class="text-sm font-bold tracking-wide text-white">ANTIGRAVITY</span>
-                <span class="text-[10px] text-gray-500 font-mono tracking-wider">CLAUDE PROXY SYSTEM</span>
+                <span class="text-sm font-bold tracking-wide text-white" x-text="$store.global.t('systemName')">ANTIGRAVITY</span>
+                <span class="text-[10px] text-gray-500 font-mono tracking-wider" x-text="$store.global.t('systemDesc')">CLAUDE PROXY SYSTEM</span>
             </div>
         </div>
 
@@ -111,14 +129,14 @@
                     :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="connectionStatus === 'connected' ? 'ONLINE' : (connectionStatus === 'disconnected' ? 'OFFLINE' : 'CONNECTING')"></span>
+                    x-text="$store.global.connectionStatus === 'connected' ? $store.global.t('online') : ($store.global.connectionStatus === 'disconnected' ? $store.global.t('offline') : $store.global.t('connecting'))"></span>
             </div>
 
             <div class="h-4 w-px bg-space-border"></div>
 
             <!-- Refresh Button -->
             <button class="btn btn-ghost btn-xs btn-square text-gray-400 hover:text-white hover:bg-white/5"
-                @click="fetchData" :disabled="loading" title="Refresh Data">
+                @click="fetchData" :disabled="loading" :title="$store.global.t('refreshData')">
                 <svg class="w-4 h-4" :class="{'animate-spin': loading}" fill="none" stroke="currentColor"
                     viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -133,7 +151,7 @@
 
         <!-- 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">Main</div>
+            <div class="px-4 mb-2 text-xs font-bold text-gray-600 uppercase tracking-widest" 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"
@@ -157,7 +175,7 @@
                 </button>
             </nav>
 
-            <div class="px-4 mt-8 mb-2 text-xs font-bold text-gray-600 uppercase tracking-widest">System</div>
+            <div class="px-4 mt-8 mb-2 text-xs font-bold text-gray-600 uppercase tracking-widest" x-text="$store.global.t('system')">System</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"
@@ -193,7 +211,7 @@
         </div>
 
         <!-- Main Content -->
-        <div class="flex-1 overflow-auto bg-space-950 p-6 relative">
+        <div class="flex-1 overflow-auto bg-space-950 relative">
 
             <!-- Views Container -->
             <!-- Dashboard -->
@@ -220,37 +238,33 @@
     <!-- Add Account Modal -->
     <dialog id="add_account_modal" class="modal backdrop-blur-sm">
         <div class="modal-box bg-space-900 border border-space-border text-gray-300 shadow-[0_0_50px_rgba(0,0,0,0.5)]">
-            <h3 class="font-bold text-lg text-white" x-text="t('addNode')">Add New Account</h3>
+            <h3 class="font-bold text-lg text-white" x-text="$store.global.t('addNode')">Add New Account</h3>
 
             <div class="py-6 flex flex-col gap-4">
-                <p class="text-sm text-gray-400">Connect a Google Workspace account to increase your API quota limit.
+                <p class="text-sm text-gray-400" x-text="$store.global.t('connectGoogleDesc')">Connect a Google Workspace account to increase your API quota limit.
                     The account will be used to proxy Claude requests via Antigravity.</p>
 
                 <button
-                    class="btn btn-primary bg-white text-black hover:bg-gray-200 border-none flex items-center justify-center gap-3 h-12"
+                    class="btn btn-primary flex items-center justify-center gap-3 h-12"
                     @click="addAccountWeb">
-                    <svg class="w-5 h-5" viewBox="0 0 24 24">
+                    <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
                         <path
-                            d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-                            fill="#4285F4"></path>
+                            d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"></path>
                         <path
-                            d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-                            fill="#34A853"></path>
+                            d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"></path>
                         <path
-                            d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
-                            fill="#FBBC05"></path>
+                            d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"></path>
                         <path
-                            d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-                            fill="#EA4335"></path>
+                            d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"></path>
                     </svg>
-                    <span x-text="t('connectGoogle')">Connect Google Account</span>
+                    <span x-text="$store.global.t('connectGoogle')">Connect Google Account</span>
                 </button>
 
-                <div class="divider text-xs text-gray-600">OR</div>
+                <div class="divider text-xs text-gray-600 uppercase" x-text="$store.global.t('or')">OR</div>
 
                 <div class="collapse collapse-arrow bg-space-800 border border-space-border/50">
                     <input type="checkbox" />
-                    <div class="collapse-title text-sm font-medium text-gray-400">
+                    <div class="collapse-title text-sm font-medium text-gray-400" x-text="$store.global.t('useCliCommand')">
                         Use CLI Command
                     </div>
                     <div class="collapse-content">
@@ -263,12 +277,12 @@
 
             <div class="modal-action">
                 <form method="dialog">
-                    <button class="btn btn-ghost hover:bg-white/10">Close</button>
+                    <button class="btn btn-ghost hover:bg-white/10" x-text="$store.global.t('close')">Close</button>
                 </form>
             </div>
         </div>
         <form method="dialog" class="modal-backdrop">
-            <button>close</button>
+            <button x-text="$store.global.t('close')">close</button>
         </form>
     </dialog>
 

public/js/app-init.js

@@ -25,8 +25,8 @@ document.addEventListener('alpine:init', () => {
 
             // Chart Defaults
             if (typeof Chart !== 'undefined') {
-                Chart.defaults.color = '#71717a';
-                Chart.defaults.borderColor = '#27272a';
+                Chart.defaults.color = window.utils.getThemeColor('--color-text-dim');
+                Chart.defaults.borderColor = window.utils.getThemeColor('--color-space-border');
                 Chart.defaults.font.family = '"JetBrains Mono", monospace';
             }
 

public/js/components/account-manager.js

@@ -6,99 +6,105 @@ window.Components = window.Components || {};
 
 window.Components.accountManager = () => ({
     async refreshAccount(email) {
-        Alpine.store('global').showToast(`Refreshing ${email}...`, 'info');
-        const password = Alpine.store('global').webuiPassword;
+        const store = Alpine.store('global');
+        store.showToast(store.t('refreshingAccount', { email }), 'info');
+        const password = store.webuiPassword;
         try {
             const { response, newPassword } = await window.utils.request(`/api/accounts/${encodeURIComponent(email)}/refresh`, { method: 'POST' }, password);
-            if (newPassword) Alpine.store('global').webuiPassword = newPassword;
+            if (newPassword) store.webuiPassword = newPassword;
 
             const data = await response.json();
             if (data.status === 'ok') {
-                Alpine.store('global').showToast(`Refreshed ${email}`, 'success');
+                store.showToast(store.t('refreshedAccount', { email }), 'success');
                 Alpine.store('data').fetchData();
             } else {
-                Alpine.store('global').showToast(data.error || 'Refresh failed', 'error');
+                store.showToast(data.error || store.t('refreshFailed'), 'error');
             }
         } catch (e) {
-            Alpine.store('global').showToast('Refresh failed: ' + e.message, 'error');
+            store.showToast(store.t('refreshFailed') + ': ' + e.message, 'error');
         }
     },
 
     async toggleAccount(email, enabled) {
-        const password = Alpine.store('global').webuiPassword;
+        const store = Alpine.store('global');
+        const password = store.webuiPassword;
         try {
             const { response, newPassword } = await window.utils.request(`/api/accounts/${encodeURIComponent(email)}/toggle`, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ enabled })
             }, password);
-            if (newPassword) Alpine.store('global').webuiPassword = newPassword;
+            if (newPassword) store.webuiPassword = newPassword;
 
             const data = await response.json();
             if (data.status === 'ok') {
-                Alpine.store('global').showToast(`Account ${email} ${enabled ? 'enabled' : 'disabled'}`, 'success');
+                const status = enabled ? store.t('enabledStatus') : store.t('disabledStatus');
+                store.showToast(store.t('accountToggled', { email, status }), 'success');
                 Alpine.store('data').fetchData();
             } else {
-                Alpine.store('global').showToast(data.error || 'Toggle failed', 'error');
+                store.showToast(data.error || store.t('toggleFailed'), 'error');
             }
         } catch (e) {
-            Alpine.store('global').showToast('Toggle failed: ' + e.message, 'error');
+            store.showToast(store.t('toggleFailed') + ': ' + e.message, 'error');
         }
     },
 
     async fixAccount(email) {
-        Alpine.store('global').showToast(`Re-authenticating ${email}...`, 'info');
-        const password = Alpine.store('global').webuiPassword;
+        const store = Alpine.store('global');
+        store.showToast(store.t('reauthenticating', { email }), 'info');
+        const password = store.webuiPassword;
         try {
             const urlPath = `/api/auth/url?email=${encodeURIComponent(email)}`;
             const { response, newPassword } = await window.utils.request(urlPath, {}, password);
-            if (newPassword) Alpine.store('global').webuiPassword = newPassword;
+            if (newPassword) store.webuiPassword = newPassword;
 
             const data = await response.json();
             if (data.status === 'ok') {
                 window.open(data.url, 'google_oauth', 'width=600,height=700,scrollbars=yes');
             } else {
-                Alpine.store('global').showToast(data.error || 'Failed to get auth URL', 'error');
+                store.showToast(data.error || store.t('authUrlFailed'), 'error');
             }
         } catch (e) {
-            Alpine.store('global').showToast('Failed: ' + e.message, 'error');
+            store.showToast(store.t('authUrlFailed') + ': ' + e.message, 'error');
         }
     },
 
     async deleteAccount(email) {
-        if (!confirm(Alpine.store('global').t('confirmDelete'))) return;
-        const password = Alpine.store('global').webuiPassword;
+        const store = Alpine.store('global');
+        if (!confirm(store.t('confirmDelete'))) return;
+        const password = store.webuiPassword;
         try {
             const { response, newPassword } = await window.utils.request(`/api/accounts/${encodeURIComponent(email)}`, { method: 'DELETE' }, password);
-            if (newPassword) Alpine.store('global').webuiPassword = newPassword;
+            if (newPassword) store.webuiPassword = newPassword;
 
             const data = await response.json();
             if (data.status === 'ok') {
-                Alpine.store('global').showToast(`Deleted ${email}`, 'success');
+                store.showToast(store.t('deletedAccount', { email }), 'success');
                 Alpine.store('data').fetchData();
             } else {
-                Alpine.store('global').showToast(data.error || 'Delete failed', 'error');
+                store.showToast(data.error || store.t('deleteFailed'), 'error');
             }
         } catch (e) {
-            Alpine.store('global').showToast('Delete failed: ' + e.message, 'error');
+            store.showToast(store.t('deleteFailed') + ': ' + e.message, 'error');
         }
     },
 
     async reloadAccounts() {
-        const password = Alpine.store('global').webuiPassword;
+        const store = Alpine.store('global');
+        const password = store.webuiPassword;
         try {
             const { response, newPassword } = await window.utils.request('/api/accounts/reload', { method: 'POST' }, password);
-            if (newPassword) Alpine.store('global').webuiPassword = newPassword;
+            if (newPassword) store.webuiPassword = newPassword;
 
             const data = await response.json();
             if (data.status === 'ok') {
-                Alpine.store('global').showToast('Accounts reloaded', 'success');
+                store.showToast(store.t('accountsReloaded'), 'success');
                 Alpine.store('data').fetchData();
             } else {
-                Alpine.store('global').showToast(data.error || 'Reload failed', 'error');
+                store.showToast(data.error || store.t('reloadFailed'), 'error');
             }
         } catch (e) {
-            Alpine.store('global').showToast('Reload failed: ' + e.message, 'error');
+            store.showToast(store.t('reloadFailed') + ': ' + e.message, 'error');
         }
     }
 });

public/js/components/claude-config.js

@@ -44,9 +44,9 @@ window.Components.claudeConfig = () => ({
             if (newPassword) Alpine.store('global').webuiPassword = newPassword;
 
             if (!response.ok) throw new Error(`HTTP ${response.status}`);
-            Alpine.store('global').showToast('Claude config saved!', 'success');
+            Alpine.store('global').showToast(Alpine.store('global').t('claudeConfigSaved'), 'success');
         } catch (e) {
-            Alpine.store('global').showToast('Failed to save config: ' + e.message, 'error');
+            Alpine.store('global').showToast(Alpine.store('global').t('saveConfigFailed') + ': ' + e.message, 'error');
         } finally {
             this.loading = false;
         }

public/js/components/dashboard.js

@@ -4,17 +4,50 @@
  */
 window.Components = window.Components || {};
 
+// Helper to get CSS variable values (alias to window.utils.getThemeColor)
+const getThemeColor = (name) => window.utils.getThemeColor(name);
+
+// Color palette for different families and models
+const FAMILY_COLORS = {
+    get claude() { return getThemeColor('--color-neon-purple'); },
+    get gemini() { return getThemeColor('--color-neon-green'); },
+    get other() { return getThemeColor('--color-neon-cyan'); }
+};
+
+const MODEL_COLORS = Array.from({ length: 16 }, (_, i) => getThemeColor(`--color-chart-${i + 1}`));
+
 window.Components.dashboard = () => ({
-    stats: { total: 0, active: 0, limited: 0, overallHealth: 0 },
-    charts: { quotaDistribution: null },
+    stats: { total: 0, active: 0, limited: 0, overallHealth: 0, hasTrendData: false },
+    charts: { quotaDistribution: null, usageTrend: null },
+
+    // Usage stats
+    usageStats: { total: 0, today: 0, thisHour: 0 },
+    historyData: {},
+
+    // Hierarchical model tree: { claude: ['opus-4-5', 'sonnet-4-5'], gemini: ['3-flash'] }
+    modelTree: {},
+    families: [],  // ['claude', 'gemini']
+
+    // Display mode: 'family' or 'model'
+    displayMode: 'model',
+
+    // Selection state
+    selectedFamilies: [],
+    selectedModels: {},  // { claude: ['opus-4-5'], gemini: ['3-flash'] }
+
+    showModelFilter: false,
 
     init() {
+        // Load saved preferences from localStorage
+        this.loadPreferences();
+
         // Update stats when dashboard becomes active
         this.$watch('$store.global.activeTab', (val) => {
             if (val === 'dashboard') {
                 this.$nextTick(() => {
                     this.updateStats();
                     this.updateCharts();
+                    this.fetchHistory();
                 });
             }
         });
@@ -32,22 +65,456 @@ window.Components.dashboard = () => ({
             this.$nextTick(() => {
                 this.updateStats();
                 this.updateCharts();
+                this.fetchHistory();
             });
         }
+
+        // Refresh history every 5 minutes
+        setInterval(() => {
+            if (this.$store.global.activeTab === 'dashboard') {
+                this.fetchHistory();
+            }
+        }, 300000);
+    },
+
+    loadPreferences() {
+        try {
+            const saved = localStorage.getItem('dashboard_chart_prefs');
+            if (saved) {
+                const prefs = JSON.parse(saved);
+                this.displayMode = prefs.displayMode || 'model';
+                this.selectedFamilies = prefs.selectedFamilies || [];
+                this.selectedModels = prefs.selectedModels || {};
+            }
+        } catch (e) {
+            console.error('Failed to load dashboard preferences:', e);
+        }
+    },
+
+    savePreferences() {
+        try {
+            localStorage.setItem('dashboard_chart_prefs', JSON.stringify({
+                displayMode: this.displayMode,
+                selectedFamilies: this.selectedFamilies,
+                selectedModels: this.selectedModels
+            }));
+        } catch (e) {
+            console.error('Failed to save dashboard preferences:', e);
+        }
+    },
+
+    async fetchHistory() {
+        try {
+            const password = Alpine.store('global').webuiPassword;
+            const { response, newPassword } = await window.utils.request('/api/stats/history', {}, password);
+            if (newPassword) Alpine.store('global').webuiPassword = newPassword;
+
+            if (response.ok) {
+                const history = await response.json();
+                this.historyData = history;
+                this.processHistory(history);
+                this.stats.hasTrendData = true;
+            }
+        } catch (error) {
+            console.error('Failed to fetch usage history:', error);
+            this.stats.hasTrendData = true;
+        }
+    },
+
+    processHistory(history) {
+        // Build model tree from hierarchical data
+        const tree = {};
+        let total = 0, today = 0, thisHour = 0;
+
+        const now = new Date();
+        const todayStart = new Date(now);
+        todayStart.setHours(0, 0, 0, 0);
+        const currentHour = new Date(now);
+        currentHour.setMinutes(0, 0, 0);
+
+        Object.entries(history).forEach(([iso, hourData]) => {
+            const timestamp = new Date(iso);
+
+            // Process each family in the hour data
+            Object.entries(hourData).forEach(([key, value]) => {
+                // Skip metadata keys
+                if (key === '_total' || key === 'total') return;
+
+                // Handle hierarchical format: { claude: { "opus-4-5": 10, "_subtotal": 10 } }
+                if (typeof value === 'object' && value !== null) {
+                    if (!tree[key]) tree[key] = new Set();
+
+                    Object.keys(value).forEach(modelName => {
+                        if (modelName !== '_subtotal') {
+                            tree[key].add(modelName);
+                        }
+                    });
+                }
+                // Skip old flat format keys (claude, gemini as numbers)
+            });
+
+            // Calculate totals
+            const hourTotal = hourData._total || hourData.total || 0;
+            total += hourTotal;
+
+            if (timestamp >= todayStart) {
+                today += hourTotal;
+            }
+            if (timestamp.getTime() === currentHour.getTime()) {
+                thisHour = hourTotal;
+            }
+        });
+
+        this.usageStats = { total, today, thisHour };
+
+        // Convert Sets to sorted arrays
+        this.modelTree = {};
+        Object.entries(tree).forEach(([family, models]) => {
+            this.modelTree[family] = Array.from(models).sort();
+        });
+        this.families = Object.keys(this.modelTree).sort();
+
+        // Auto-select new families/models that haven't been configured
+        this.autoSelectNew();
+
+        this.updateTrendChart();
+    },
+
+    autoSelectNew() {
+        // If no preferences saved, select all
+        if (this.selectedFamilies.length === 0 && Object.keys(this.selectedModels).length === 0) {
+            this.selectedFamilies = [...this.families];
+            this.families.forEach(family => {
+                this.selectedModels[family] = [...(this.modelTree[family] || [])];
+            });
+            this.savePreferences();
+            return;
+        }
+
+        // Add new families/models that appeared
+        this.families.forEach(family => {
+            if (!this.selectedFamilies.includes(family)) {
+                this.selectedFamilies.push(family);
+            }
+            if (!this.selectedModels[family]) {
+                this.selectedModels[family] = [];
+            }
+            (this.modelTree[family] || []).forEach(model => {
+                if (!this.selectedModels[family].includes(model)) {
+                    this.selectedModels[family].push(model);
+                }
+            });
+        });
+    },
+
+    autoSelectTopN(n = 5) {
+        // Calculate usage for each model over past 24 hours
+        const usage = {};
+        const now = Date.now();
+        const dayAgo = now - 24 * 60 * 60 * 1000;
+
+        Object.entries(this.historyData).forEach(([iso, hourData]) => {
+            const timestamp = new Date(iso).getTime();
+            if (timestamp < dayAgo) return;
+
+            Object.entries(hourData).forEach(([family, familyData]) => {
+                if (typeof familyData === 'object' && family !== '_total') {
+                    Object.entries(familyData).forEach(([model, count]) => {
+                        if (model !== '_subtotal') {
+                            const key = `${family}:${model}`;
+                            usage[key] = (usage[key] || 0) + count;
+                        }
+                    });
+                }
+            });
+        });
+
+        // Sort by usage and take top N
+        const sorted = Object.entries(usage)
+            .sort((a, b) => b[1] - a[1])
+            .slice(0, n);
+
+        // Clear current selection
+        this.selectedFamilies = [];
+        this.selectedModels = {};
+
+        // Select top N models
+        sorted.forEach(([key]) => {
+            const [family, model] = key.split(':');
+            if (!this.selectedFamilies.includes(family)) {
+                this.selectedFamilies.push(family);
+            }
+            if (!this.selectedModels[family]) {
+                this.selectedModels[family] = [];
+            }
+            this.selectedModels[family].push(model);
+        });
+
+        this.savePreferences();
+        this.refreshChart();
+    },
+
+    // Toggle display mode between family and model level
+    setDisplayMode(mode) {
+        this.displayMode = mode;
+        this.savePreferences();
+        this.updateTrendChart();
+    },
+
+    // Toggle family selection
+    toggleFamily(family) {
+        const index = this.selectedFamilies.indexOf(family);
+        if (index > -1) {
+            this.selectedFamilies.splice(index, 1);
+        } else {
+            this.selectedFamilies.push(family);
+        }
+        this.savePreferences();
+        this.updateTrendChart();
+    },
+
+    // Toggle model selection within a family
+    toggleModel(family, model) {
+        if (!this.selectedModels[family]) {
+            this.selectedModels[family] = [];
+        }
+        const index = this.selectedModels[family].indexOf(model);
+        if (index > -1) {
+            this.selectedModels[family].splice(index, 1);
+        } else {
+            this.selectedModels[family].push(model);
+        }
+        this.savePreferences();
+        this.updateTrendChart();
+    },
+
+    // Check if family is selected
+    isFamilySelected(family) {
+        return this.selectedFamilies.includes(family);
+    },
+
+    // Check if model is selected
+    isModelSelected(family, model) {
+        return this.selectedModels[family]?.includes(model) || false;
+    },
+
+    // Select all families and models
+    selectAll() {
+        this.selectedFamilies = [...this.families];
+        this.families.forEach(family => {
+            this.selectedModels[family] = [...(this.modelTree[family] || [])];
+        });
+        this.savePreferences();
+        this.updateTrendChart();
+    },
+
+    // Deselect all
+    deselectAll() {
+        this.selectedFamilies = [];
+        this.selectedModels = {};
+        this.savePreferences();
+        this.updateTrendChart();
+    },
+
+    // Get color for family
+    getFamilyColor(family) {
+        return FAMILY_COLORS[family] || FAMILY_COLORS.other;
+    },
+
+    // Get color for model (with index for variation within family)
+    getModelColor(family, modelIndex) {
+        const baseIndex = family === 'claude' ? 0 : (family === 'gemini' ? 4 : 8);
+        return MODEL_COLORS[(baseIndex + modelIndex) % MODEL_COLORS.length];
+    },
+
+    // Get count of selected items for display
+    getSelectedCount() {
+        if (this.displayMode === 'family') {
+            return `${this.selectedFamilies.length}/${this.families.length}`;
+        }
+        let selected = 0, total = 0;
+        this.families.forEach(family => {
+            const models = this.modelTree[family] || [];
+            total += models.length;
+            selected += (this.selectedModels[family] || []).length;
+        });
+        return `${selected}/${total}`;
+    },
+
+    updateTrendChart() {
+        const ctx = document.getElementById('usageTrendChart');
+        if (!ctx || typeof Chart === 'undefined') return;
+
+        if (this.charts.usageTrend) {
+            this.charts.usageTrend.destroy();
+        }
+
+        const history = this.historyData;
+        const labels = [];
+        const datasets = [];
+
+        if (this.displayMode === 'family') {
+            // Aggregate by family
+            const dataByFamily = {};
+            this.selectedFamilies.forEach(family => {
+                dataByFamily[family] = [];
+            });
+
+            Object.entries(history).forEach(([iso, hourData]) => {
+                const date = new Date(iso);
+                labels.push(date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
+
+                this.selectedFamilies.forEach(family => {
+                    const familyData = hourData[family];
+                    const count = familyData?._subtotal || 0;
+                    dataByFamily[family].push(count);
+                });
+            });
+
+            // Build datasets for families
+            this.selectedFamilies.forEach(family => {
+                const color = this.getFamilyColor(family);
+                const familyKey = 'family' + family.charAt(0).toUpperCase() + family.slice(1);
+                const label = Alpine.store('global').t(familyKey);
+                datasets.push(this.createDataset(
+                    label,
+                    dataByFamily[family],
+                    color,
+                    ctx
+                ));
+            });
+        } else {
+            // Show individual models
+            const dataByModel = {};
+
+            // Initialize data arrays
+            this.families.forEach(family => {
+                (this.selectedModels[family] || []).forEach(model => {
+                    const key = `${family}:${model}`;
+                    dataByModel[key] = [];
+                });
+            });
+
+            Object.entries(history).forEach(([iso, hourData]) => {
+                const date = new Date(iso);
+                labels.push(date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
+
+                this.families.forEach(family => {
+                    const familyData = hourData[family] || {};
+                    (this.selectedModels[family] || []).forEach(model => {
+                        const key = `${family}:${model}`;
+                        dataByModel[key].push(familyData[model] || 0);
+                    });
+                });
+            });
+
+            // Build datasets for models
+            this.families.forEach(family => {
+                (this.selectedModels[family] || []).forEach((model, modelIndex) => {
+                    const key = `${family}:${model}`;
+                    const color = this.getModelColor(family, modelIndex);
+                    datasets.push(this.createDataset(model, dataByModel[key], color, ctx));
+                });
+            });
+        }
+
+        this.charts.usageTrend = new Chart(ctx, {
+            type: 'line',
+            data: { labels, datasets },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                interaction: {
+                    mode: 'index',
+                    intersect: false,
+                },
+                plugins: {
+                    legend: { display: false },
+                    tooltip: {
+                        backgroundColor: getThemeColor('--color-space-950') || 'rgba(24, 24, 27, 0.9)',
+                        titleColor: getThemeColor('--color-text-main'),
+                        bodyColor: getThemeColor('--color-text-bright'),
+                        borderColor: getThemeColor('--color-space-border'),
+                        borderWidth: 1,
+                        padding: 10,
+                        displayColors: true,
+                        callbacks: {
+                            label: function(context) {
+                                return context.dataset.label + ': ' + context.parsed.y;
+                            }
+                        }
+                    }
+                },
+                scales: {
+                    x: {
+                        display: true,
+                        grid: { display: false },
+                        ticks: { color: getThemeColor('--color-text-muted'), font: { size: 10 } }
+                    },
+                    y: {
+                        display: true,
+                        beginAtZero: true,
+                        grid: { display: true, color: getThemeColor('--color-space-border') + '1a' || 'rgba(255,255,255,0.05)' },
+                        ticks: { color: getThemeColor('--color-text-muted'), font: { size: 10 } }
+                    }
+                }
+            }
+        });
+    },
+
+    createDataset(label, data, color, ctx) {
+        const gradient = ctx.getContext('2d').createLinearGradient(0, 0, 0, 200);
+        gradient.addColorStop(0, this.hexToRgba(color, 0.3));
+        gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
+
+        return {
+            label,
+            data,
+            borderColor: color,
+            backgroundColor: gradient,
+            borderWidth: 2,
+            tension: 0.4,
+            fill: true,
+            pointRadius: 3,
+            pointHoverRadius: 5,
+            pointBackgroundColor: color
+        };
+    },
+
+    hexToRgba(hex, alpha) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        if (result) {
+            return `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`;
+        }
+        return hex;
     },
 
     updateStats() {
         const accounts = Alpine.store('data').accounts;
         let active = 0, limited = 0;
+
+        const isCore = (id) => /sonnet|opus|pro|flash/i.test(id);
+
         accounts.forEach(acc => {
             if (acc.status === 'ok') {
-                const hasQuota = Object.values(acc.limits || {}).some(l => l && l.remainingFraction > 0);
-                if (hasQuota) active++; else limited++;
+                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 (hasActiveCore) active++; else limited++;
             } else {
                 limited++;
             }
         });
-        this.stats = { total: accounts.length, active, limited };
+        this.stats.total = accounts.length;
+        this.stats.active = active;
+        this.stats.limited = limited;
     },
 
     updateCharts() {
@@ -59,32 +526,70 @@ window.Components.dashboard = () => ({
         }
 
         const rows = Alpine.store('data').quotaRows;
-        const familyStats = { claude: { sum: 0, count: 0 }, gemini: { sum: 0, count: 0 }, other: { sum: 0, count: 0 } };
-
-        // Calculate overall system health
-        let totalHealthSum = 0;
-        let totalModelCount = 0;
 
+        // Dynamic family aggregation (supports any model family)
+        const familyStats = {};
         rows.forEach(row => {
-            const f = familyStats[row.family] ? row.family : 'other';
-            // Use avgQuota if available (new logic), fallback to minQuota (old logic compatibility)
-            const quota = row.avgQuota !== undefined ? row.avgQuota : row.minQuota;
+            if (!familyStats[row.family]) {
+                familyStats[row.family] = { used: 0, total: 0 };
+            }
+            row.quotaInfo.forEach(info => {
+                familyStats[row.family].used += info.pct;
+                familyStats[row.family].total += 100;
+            });
+        });
 
-            familyStats[f].sum += quota;
-            familyStats[f].count++;
+        // Calculate global health
+        const globalTotal = Object.values(familyStats).reduce((sum, f) => sum + f.total, 0);
+        const globalUsed = Object.values(familyStats).reduce((sum, f) => sum + f.used, 0);
+        this.stats.overallHealth = globalTotal > 0 ? Math.round((globalUsed / globalTotal) * 100) : 0;
 
-            totalHealthSum += quota;
-            totalModelCount++;
-        });
+        // Generate chart data dynamically
+        const familyColors = {
+            'claude': getThemeColor('--color-neon-purple'),
+            'gemini': getThemeColor('--color-neon-green'),
+            'other': getThemeColor('--color-neon-cyan'),
+            'unknown': '#666666'
+        };
+
+        const families = Object.keys(familyStats).sort();
+        const segmentSize = families.length > 0 ? 100 / families.length : 100;
+
+        const data = [];
+        const colors = [];
+        const labels = [];
 
-        this.stats.overallHealth = totalModelCount > 0 ? Math.round(totalHealthSum / totalModelCount) : 0;
+        families.forEach(family => {
+            const stats = familyStats[family];
+            const health = stats.total > 0 ? Math.round((stats.used / stats.total) * 100) : 0;
+            const activeVal = (health / 100) * segmentSize;
+            const inactiveVal = segmentSize - activeVal;
 
-        const labels = ['Claude', 'Gemini', 'Other'];
-        const data = [
-            familyStats.claude.count ? Math.round(familyStats.claude.sum / familyStats.claude.count) : 0,
-            familyStats.gemini.count ? Math.round(familyStats.gemini.sum / familyStats.gemini.count) : 0,
-            familyStats.other.count ? Math.round(familyStats.other.sum / familyStats.other.count) : 0,
-        ];
+            const familyColor = familyColors[family] || familyColors['unknown'];
+
+            // Get translation keys if available, otherwise capitalize
+            const familyName = family.charAt(0).toUpperCase() + family.slice(1);
+            const store = Alpine.store('global');
+
+            // Labels using translations if possible
+            const activeLabel = family === 'claude' ? store.t('claudeActive') :
+                              family === 'gemini' ? store.t('geminiActive') :
+                              `${familyName} Active`;
+
+            const depletedLabel = family === 'claude' ? store.t('claudeEmpty') :
+                                family === 'gemini' ? store.t('geminiEmpty') :
+                                `${familyName} Depleted`;
+
+            // Active segment
+            data.push(activeVal);
+            colors.push(familyColor);
+            labels.push(activeLabel);
+
+            // Inactive segment
+            data.push(inactiveVal);
+            colors.push(this.hexToRgba(familyColor, 0.1));
+            labels.push(depletedLabel);
+        });
 
         this.charts.quotaDistribution = new Chart(ctx, {
             type: 'doughnut',
@@ -92,24 +597,22 @@ window.Components.dashboard = () => ({
                 labels: labels,
                 datasets: [{
                     data: data,
-                    backgroundColor: ['#a855f7', '#22c55e', '#52525b'],
-                    borderColor: '#09090b', // Matches bg-space-900 roughly
+                    backgroundColor: colors,
+                    borderColor: getThemeColor('--color-space-950'),
                     borderWidth: 2,
                     hoverOffset: 0,
-                    borderRadius: 2
+                    borderRadius: 0
                 }]
             },
             options: {
                 responsive: true,
                 maintainAspectRatio: false,
-                cutout: '85%', // Thinner ring
+                cutout: '85%',
+                rotation: -90,
+                circumference: 360,
                 plugins: {
-                    legend: {
-                        display: false // Hide default legend
-                    },
-                    tooltip: {
-                        enabled: false // Disable tooltip for cleaner look, or style it? Let's keep it simple.
-                    },
+                    legend: { display: false },
+                    tooltip: { enabled: false },
                     title: { display: false }
                 },
                 animation: {

public/js/data-store.js

@@ -59,7 +59,8 @@ document.addEventListener('alpine:init', () => {
             } catch (error) {
                 console.error('Fetch error:', error);
                 this.connectionStatus = 'disconnected';
-                Alpine.store('global').showToast('Connection Lost', 'error');
+                const store = Alpine.store('global');
+                store.showToast(store.t('connectionLost'), 'error');
             } finally {
                 this.loading = false;
             }

public/js/settings-store.js

@@ -44,7 +44,8 @@ document.addEventListener('alpine:init', () => {
             localStorage.setItem('antigravity_settings', JSON.stringify(toSave));
 
             if (!silent) {
-                Alpine.store('global').showToast('Configuration Saved', 'success');
+                const store = Alpine.store('global');
+                store.showToast(store.t('configSaved'), 'success');
             }
 
             // Trigger updates

public/js/store.js

@@ -56,7 +56,14 @@ document.addEventListener('alpine:init', () => {
                 delete: "Delete",
                 confirmDelete: "Are you sure you want to remove this account?",
                 connectGoogle: "Connect Google Account",
-                manualReload: "Reload from Disk",
+                reauthenticated: "re-authenticated",
+                added: "added",
+                successfully: "successfully",
+                failedToGetAuthUrl: "Failed to get auth URL",
+                failedToStartOAuth: "Failed to start OAuth flow",
+                family: "Family",
+                model: "Model",
+                activeSuffix: "Active",
                 // Tabs
                 tabInterface: "Interface",
                 tabClaude: "Claude CLI",
@@ -104,6 +111,68 @@ document.addEventListener('alpine:init', () => {
                 authToken: "Auth Token",
                 saveConfig: "Save to ~/.claude/settings.json",
                 envVar: "Env",
+                // New Keys
+                systemName: "ANTIGRAVITY",
+                systemDesc: "CLAUDE PROXY SYSTEM",
+                connectGoogleDesc: "Connect a Google Workspace account to increase your API quota limit. The account will be used to proxy Claude requests via Antigravity.",
+                useCliCommand: "Use CLI Command",
+                close: "Close",
+                requestVolume: "Request Volume",
+                filter: "Filter",
+                all: "All",
+                none: "None",
+                noDataTracked: "No data tracked yet",
+                selectFamilies: "Select families to display",
+                selectModels: "Select models to display",
+                noLogsMatch: "No logs match filter",
+                connecting: "CONNECTING",
+                main: "Main",
+                system: "System",
+                refreshData: "Refresh Data",
+                connectionLost: "Connection Lost",
+                lastUpdated: "Last Updated",
+                grepLogs: "grep logs...",
+                noMatchingModels: "No matching models",
+                typeToSearch: "Type to search or select...",
+                or: "OR",
+                refreshingAccount: "Refreshing {email}...",
+                refreshedAccount: "Refreshed {email}",
+                refreshFailed: "Refresh failed",
+                accountToggled: "Account {email} {status}",
+                toggleFailed: "Toggle failed",
+                reauthenticating: "Re-authenticating {email}...",
+                authUrlFailed: "Failed to get auth URL",
+                deletedAccount: "Deleted {email}",
+                deleteFailed: "Delete failed",
+                accountsReloaded: "Accounts reloaded",
+                reloadFailed: "Reload failed",
+                claudeConfigSaved: "Claude configuration saved",
+                saveConfigFailed: "Failed to save configuration",
+                claudeActive: "Claude Active",
+                claudeEmpty: "Claude Empty",
+                geminiActive: "Gemini Active",
+                geminiEmpty: "Gemini Empty",
+                fix: "FIX",
+                synced: "SYNCED",
+                syncing: "SYNCING...",
+                // Additional
+                reloading: "Reloading...",
+                reloaded: "Reloaded",
+                lines: "lines",
+                enabledSeeLogs: "Enabled (See Logs)",
+                production: "Production",
+                configSaved: "Configuration Saved",
+                enterPassword: "Enter Web UI Password:",
+                ready: "READY",
+                familyClaude: "Claude",
+                familyGemini: "Gemini",
+                familyOther: "Other",
+                enabledStatus: "enabled",
+                disabledStatus: "disabled",
+                logLevelInfo: "INFO",
+                logLevelSuccess: "SUCCESS",
+                logLevelWarn: "WARN",
+                logLevelError: "ERR",
             },
             zh: {
                 dashboard: "仪表盘",
@@ -148,6 +217,14 @@ document.addEventListener('alpine:init', () => {
                 delete: "删除",
                 confirmDelete: "确定要移除此账号吗？",
                 connectGoogle: "连接 Google 账号",
+                reauthenticated: "已重新认证",
+                added: "已添加",
+                successfully: "成功",
+                failedToGetAuthUrl: "获取认证链接失败",
+                failedToStartOAuth: "启动 OAuth 流程失败",
+                family: "系列",
+                model: "模型",
+                activeSuffix: "活跃",
                 manualReload: "重新加载配置",
                 // Tabs
                 tabInterface: "界面设置",
@@ -196,14 +273,82 @@ document.addEventListener('alpine:init', () => {
                 authToken: "认证令牌",
                 saveConfig: "保存到 ~/.claude/settings.json",
                 envVar: "环境变量",
+                // New Keys
+                systemName: "ANTIGRAVITY",
+                systemDesc: "CLAUDE 代理系��",
+                connectGoogleDesc: "连接 Google Workspace 账号以增加 API 配额。该账号将用于通过 Antigravity 代理 Claude 请求。",
+                useCliCommand: "使用命令行",
+                close: "关闭",
+                requestVolume: "请求量",
+                filter: "筛选",
+                all: "全选",
+                none: "清空",
+                noDataTracked: "暂无追踪数据",
+                selectFamilies: "选择要显示的系列",
+                selectModels: "选择要显示的模型",
+                noLogsMatch: "没有符合过滤条件的日志",
+                connecting: "正在连接",
+                main: "主菜单",
+                system: "系统",
+                refreshData: "刷新数据",
+                connectionLost: "连接已断开",
+                lastUpdated: "最后更新",
+                grepLogs: "过滤日志...",
+                noMatchingModels: "没有匹配的模型",
+                typeToSearch: "输入以搜索或选择...",
+                or: "或",
+                refreshingAccount: "正在刷新 {email}...",
+                refreshedAccount: "已完成刷新 {email}",
+                refreshFailed: "刷新失败",
+                accountToggled: "账号 {email} 已{status}",
+                toggleFailed: "切换失败",
+                reauthenticating: "正在重新认证 {email}...",
+                authUrlFailed: "获取认证链接失败",
+                deletedAccount: "已删除 {email}",
+                deleteFailed: "删除失败",
+                accountsReloaded: "账号配置已重载",
+                reloadFailed: "重载失败",
+                claudeConfigSaved: "Claude 配置已保存",
+                saveConfigFailed: "保存配置失败",
+                claudeActive: "Claude 活跃",
+                claudeEmpty: "Claude 耗尽",
+                geminiActive: "Gemini 活跃",
+                geminiEmpty: "Gemini 耗尽",
+                fix: "修复",
+                synced: "已同步",
+                syncing: "正在同步...",
+                // Additional
+                reloading: "正在重载...",
+                reloaded: "已重载",
+                lines: "行",
+                enabledSeeLogs: "已启用 (见日志)",
+                production: "生产环境",
+                configSaved: "配置已保存",
+                enterPassword: "请输入 Web UI 密码：",
+                ready: "就绪",
+                familyClaude: "Claude 系列",
+                familyGemini: "Gemini 系列",
+                familyOther: "其他系列",
+                enabledStatus: "已启用",
+                disabledStatus: "已禁用",
+                logLevelInfo: "信息",
+                logLevelSuccess: "成功",
+                logLevelWarn: "警告",
+                logLevelError: "错误",
             }
         },
 
         // Toast Messages
         toast: null,
 
-        t(key) {
-            return this.translations[this.lang][key] || key;
+        t(key, params = {}) {
+            let str = this.translations[this.lang][key] || key;
+            if (typeof str === 'string') {
+                Object.keys(params).forEach(p => {
+                    str = str.replace(`{${p}}`, params[p]);
+                });
+            }
+            return str;
         },
 
         setLang(l) {

public/js/utils.js

@@ -13,7 +13,8 @@ window.utils = {
         let response = await fetch(url, options);
 
         if (response.status === 401) {
-            const password = prompt('Enter Web UI Password:');
+            const store = Alpine.store('global');
+            const password = prompt(store ? store.t('enterPassword') : 'Enter Web UI Password:');
             if (password) {
                 // Return new password so caller can update state
                 // This implies we need a way to propagate the new password back
@@ -31,11 +32,16 @@ window.utils = {
     },
 
     formatTimeUntil(isoTime) {
+        const store = Alpine.store('global');
         const diff = new Date(isoTime) - new Date();
-        if (diff <= 0) return 'READY';
+        if (diff <= 0) return store ? store.t('ready') : 'READY';
         const mins = Math.floor(diff / 60000);
         const hrs = Math.floor(mins / 60);
         if (hrs > 0) return `${hrs}H ${mins % 60}M`;
         return `${mins}M`;
+    },
+
+    getThemeColor(name) {
+        return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
     }
 };

public/views/accounts.html

@@ -1,14 +1,14 @@
-<div x-data="accountManager" class="max-w-4xl mx-auto space-y-6">
-    <div class="flex justify-between items-center">
+<div x-data="accountManager" class="view-container">
+    <div class="section-header">
         <div>
-            <h2 class="text-2xl font-bold text-white tracking-tight" x-text="$store.global.t('accessCredentials')">
-                Access
-                Credentials</h2>
-            <p class="text-gray-500 text-sm" x-text="$store.global.t('manageTokens')">Manage OAuth tokens
-                and session
-                states</p>
+            <h2 class="section-title" x-text="$store.global.t('accessCredentials')">
+                Access Credentials
+            </h2>
+            <p class="section-desc" x-text="$store.global.t('manageTokens')">
+                Manage OAuth tokens and session states
+            </p>
         </div>
-        <button class="btn btn-sm bg-neon-purple hover:bg-purple-600 text-white border-none gap-2"
+        <button class="btn btn-primary btn-sm gap-2"
             onclick="document.getElementById('add_account_modal').showModal()">
             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
@@ -18,8 +18,8 @@
     </div>
 
     <div class="glass-panel rounded-xl overflow-hidden">
-        <table class="table w-full">
-            <thead class="bg-space-900/50 text-gray-500 font-mono text-xs uppercase border-b border-space-border">
+        <table class="standard-table">
+            <thead>
                 <tr>
                     <th class="pl-6 w-24" x-text="$store.global.t('enabled')">Enabled</th>
                     <th x-text="$store.global.t('identity')">Identity (Email)</th>
@@ -28,17 +28,14 @@
                     <th class="text-right pr-6" x-text="$store.global.t('operations')">Operations</th>
                 </tr>
             </thead>
-            <tbody class="divide-y divide-space-border/50">
+            <tbody>
                 <template x-for="acc in $store.data.accounts" :key="acc.email">
-                    <tr class="hover:bg-white/5 transition-colors">
+                    <tr>
                         <td class="pl-6">
-                            <label class="relative inline-flex items-center cursor-pointer">
-                                <input type="checkbox" class="sr-only peer" :checked="acc.enabled !== false"
-                                    @change="toggleAccount(acc.email, $el.checked)">
-                                <div
-                                    class="w-9 h-5 bg-space-800 border border-space-border peer-focus:outline-none peer-focus:ring-1 peer-focus:ring-neon-purple rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-gray-400 after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-neon-green/20 peer-checked:border-neon-green peer-checked:after:bg-neon-green peer-checked:after:shadow-[0_0_8px_rgba(34,197,94,0.8)]">
-                                </div>
-                            </label>
+                            <input type="checkbox"
+                                class="toggle toggle-success toggle-sm"
+                                :checked="acc.enabled !== false"
+                                @change="toggleAccount(acc.email, $el.checked)">
                         </td>
                         <td class="font-medium text-gray-200" x-text="acc.email"></td>
                         <td class="font-mono text-xs text-gray-400" x-text="acc.projectId || '-'"></td>
@@ -52,11 +49,12 @@
                                 <!-- Fix Button -->
                                 <button x-show="acc.status === 'invalid'"
                                     class="btn btn-xs bg-yellow-500/10 text-yellow-500 hover:bg-yellow-500/20 border-none mr-1 px-2 font-mono"
-                                    @click="fixAccount(acc.email)">
+                                    @click="fixAccount(acc.email)"
+                                    x-text="$store.global.t('fix')">
                                     FIX
                                 </button>
                                 <button class="btn btn-xs btn-square btn-ghost text-gray-400 hover:text-white"
-                                    @click="refreshAccount(acc.email)" title="Refresh Token">
+                                    @click="refreshAccount(acc.email)" :title="$store.global.t('refreshData')">
                                     <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                             d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />

public/views/dashboard.html

@@ -1,4 +1,4 @@
-<div x-data="dashboard" class="space-y-6 animate-fade-in">
+<div x-data="dashboard" class="view-container">
     <!-- Stats Grid -->
     <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
         <div
@@ -14,7 +14,7 @@
             <div class="stat-title text-gray-500 font-mono text-xs uppercase tracking-wider"
                 x-text="$store.global.t('totalAccounts')"></div>
             <div class="stat-value text-white font-mono text-3xl" x-text="stats.total"></div>
-            <div class="stat-desc text-gray-600 text-[10px] mt-1">Registered Nodes</div>
+            <div class="stat-desc text-gray-600 text-[10px] mt-1" x-text="$store.global.t('registeredNodes')">Registered Nodes</div>
         </div>
 
         <div
@@ -61,8 +61,7 @@
             <!-- Legend / Info -->
             <div class="flex flex-col justify-center gap-2 flex-grow min-w-0 z-10">
                 <div class="flex items-center justify-between">
-                     <span class="text-[10px] text-gray-500 uppercase tracking-wider font-mono">Global Quota</span>
-                     <!-- <span class="text-xs font-bold text-neon-purple" x-text="stats.overallHealth + '%'"></span> -->
+                     <span class="text-[10px] text-gray-500 uppercase tracking-wider font-mono" x-text="$store.global.t('globalQuota')">Global Quota</span>
                 </div>
 
                 <!-- Custom Legend -->
@@ -72,7 +71,6 @@
                             <div class="w-1.5 h-1.5 rounded-full bg-neon-purple shadow-[0_0_4px_rgba(168,85,247,0.4)]"></div>
                             <span>Claude</span>
                         </div>
-                        <!-- <span class="font-mono text-gray-600">--</span> -->
                     </div>
                     <div class="flex items-center justify-between text-[10px] text-gray-400">
                         <div class="flex items-center gap-1.5">
@@ -88,6 +86,180 @@
         </div>
     </div>
 
+    <!-- Usage Trend Chart -->
+    <div class="glass-panel p-4 rounded-lg">
+        <!-- Header with Stats and Filter -->
+        <div class="flex items-center justify-between mb-3">
+            <div class="flex items-center gap-4">
+                <div class="flex items-center gap-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-neon-purple">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
+                    </svg>
+                    <h3 class="text-xs font-mono text-gray-400 uppercase tracking-widest" x-text="$store.global.t('requestVolume')">Request Volume</h3>
+                </div>
+
+                <!-- Usage Stats Pills -->
+                <div class="flex gap-2 text-[10px] font-mono">
+                    <div class="px-2 py-1 rounded bg-space-800 border border-space-border/50">
+                        <span class="text-gray-500">Total:</span>
+                        <span class="text-white ml-1" x-text="usageStats.total"></span>
+                    </div>
+                    <div class="px-2 py-1 rounded bg-space-800 border border-space-border/50">
+                        <span class="text-gray-500">Today:</span>
+                        <span class="text-neon-cyan ml-1" x-text="usageStats.today"></span>
+                    </div>
+                    <div class="px-2 py-1 rounded bg-space-800 border border-space-border/50">
+                        <span class="text-gray-500">1H:</span>
+                        <span class="text-neon-green ml-1" x-text="usageStats.thisHour"></span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Display Mode Toggle -->
+            <div class="join">
+                <button @click="setDisplayMode('family')"
+                    class="join-item btn btn-xs px-3 border-space-border/50 bg-space-800 text-gray-400 hover:text-white transition-all"
+                    :class="{'bg-neon-purple/20 text-neon-purple border-neon-purple/50': displayMode === 'family'}"
+                    x-text="$store.global.t('family')">
+                </button>
+                <button @click="setDisplayMode('model')"
+                    class="join-item btn btn-xs px-3 border-space-border/50 bg-space-800 text-gray-400 hover:text-white transition-all"
+                    :class="{'bg-neon-purple/20 text-neon-purple border-neon-purple/50': displayMode === 'model'}"
+                    x-text="$store.global.t('model')">
+                </button>
+            </div>
+
+            <!-- Filter Dropdown -->
+            <div class="relative">
+                <button @click="showModelFilter = !showModelFilter"
+                    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">
+                    <svg class="w-3 h-3" 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>
+                    <span>Filter (<span x-text="getSelectedCount()"></span>)</span>
+                    <svg class="w-3 h-3 transition-transform" :class="{'rotate-180': showModelFilter}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                    </svg>
+                </button>
+
+                <!-- Dropdown Menu -->
+                <div x-show="showModelFilter" @click.outside="showModelFilter = false"
+                    x-transition:enter="transition ease-out duration-100"
+                    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-72 bg-space-900 border border-space-border rounded-lg shadow-xl z-50 overflow-hidden"
+                    style="display: none;">
+
+                    <!-- Header -->
+                    <div class="flex items-center justify-between px-3 py-2 border-b border-space-border/50 bg-space-800/50">
+                        <span class="text-[10px] font-mono text-gray-500 uppercase" x-text="displayMode === 'family' ? $store.global.t('selectFamilies') : $store.global.t('selectModels')"></span>
+                        <div class="flex gap-1">
+                            <button @click="autoSelectTopN(5)" class="text-[10px] text-neon-purple hover:underline" title="Select Top 5 most used models (24h)">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
+                                Smart
+                            </button>
+                            <span class="text-gray-600">|</span>
+                            <button @click="selectAll()" class="text-[10px] text-neon-cyan hover:underline" x-text="$store.global.t('all')">All</button>
+                            <span class="text-gray-600">|</span>
+                            <button @click="deselectAll()" class="text-[10px] text-gray-500 hover:underline" x-text="$store.global.t('none')">None</button>
+                        </div>
+                    </div>
+
+                    <!-- Hierarchical List -->
+                    <div class="max-h-64 overflow-y-auto p-2 space-y-2">
+                        <template x-for="family in families" :key="family">
+                            <div class="space-y-1">
+                                <!-- Family Header -->
+                                <label class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-white/5 cursor-pointer group"
+                                    x-show="displayMode === 'family'">
+                                    <input type="checkbox"
+                                        :checked="isFamilySelected(family)"
+                                        @change="toggleFamily(family)"
+                                        class="checkbox checkbox-xs checkbox-primary">
+                                    <div class="w-2 h-2 rounded-full flex-shrink-0" :style="'background-color:' + getFamilyColor(family)"></div>
+                                    <span class="text-xs text-gray-300 font-medium capitalize group-hover:text-white" x-text="family"></span>
+                                    <span class="text-[10px] text-gray-600 ml-auto" x-text="'(' + (modelTree[family] || []).length + ')'"></span>
+                                </label>
+
+                                <!-- Family Section Header (Model Mode) -->
+                                <div class="flex items-center gap-2 px-2 py-1 text-[10px] text-gray-500 uppercase font-bold"
+                                    x-show="displayMode === 'model'">
+                                    <div class="w-1.5 h-1.5 rounded-full" :style="'background-color:' + getFamilyColor(family)"></div>
+                                    <span x-text="family"></span>
+                                </div>
+
+                                <!-- Models in Family -->
+                                <template x-if="displayMode === 'model'">
+                                    <div class="ml-4 space-y-0.5">
+                                        <template x-for="(model, modelIndex) in (modelTree[family] || [])" :key="family + ':' + model">
+                                            <label class="flex items-center gap-2 px-2 py-1 rounded hover:bg-white/5 cursor-pointer group">
+                                                <input type="checkbox"
+                                                    :checked="isModelSelected(family, model)"
+                                                    @change="toggleModel(family, model)"
+                                                    class="checkbox checkbox-xs checkbox-primary">
+                                                <div class="w-2 h-2 rounded-full flex-shrink-0" :style="'background-color:' + getModelColor(family, modelIndex)"></div>
+                                                <span class="text-xs text-gray-400 truncate group-hover:text-white" x-text="model"></span>
+                                            </label>
+                                        </template>
+                                    </div>
+                                </template>
+                            </div>
+                        </template>
+
+                        <!-- Empty State -->
+                        <div x-show="families.length === 0" class="text-center py-4 text-gray-600 text-xs" x-text="$store.global.t('noDataTracked')">
+                            No data tracked yet
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Dynamic Legend -->
+        <div class="flex flex-wrap gap-3 mb-3" x-show="displayMode === 'family' ? selectedFamilies.length > 0 : Object.values(selectedModels).flat().length > 0">
+            <!-- Family Mode Legend -->
+            <template x-if="displayMode === 'family'">
+                <template x-for="family in selectedFamilies" :key="family">
+                    <div class="flex items-center gap-1.5 text-[10px] font-mono">
+                        <div class="w-2 h-2 rounded-full" :style="'background-color:' + getFamilyColor(family)"></div>
+                        <span class="text-gray-400 capitalize" x-text="family"></span>
+                    </div>
+                </template>
+            </template>
+            <!-- Model Mode Legend -->
+            <template x-if="displayMode === 'model'">
+                <template x-for="family in families" :key="'legend-' + family">
+                    <template x-for="(model, modelIndex) in (selectedModels[family] || [])" :key="family + ':' + model">
+                        <div class="flex items-center gap-1.5 text-[10px] font-mono">
+                            <div class="w-2 h-2 rounded-full" :style="'background-color:' + getModelColor(family, modelIndex)"></div>
+                            <span class="text-gray-400" x-text="model"></span>
+                        </div>
+                    </template>
+                </template>
+            </template>
+        </div>
+
+        <!-- Chart -->
+        <div class="h-48 w-full relative">
+            <canvas id="usageTrendChart"></canvas>
+            <!-- Loading/Empty State -->
+            <div x-show="!stats.hasTrendData" class="absolute inset-0 flex items-center justify-center bg-space-900/50 backdrop-blur-sm z-10" style="display: none;">
+                <div class="text-xs font-mono text-gray-500 flex items-center gap-2">
+                    <span class="loading loading-spinner loading-xs"></span>
+                    <span x-text="$store.global.t('syncing')">SYNCING...</span>
+                </div>
+            </div>
+            <!-- No Selection -->
+            <div x-show="stats.hasTrendData && (displayMode === 'family' ? selectedFamilies.length === 0 : Object.values(selectedModels).flat().length === 0)"
+                class="absolute inset-0 flex items-center justify-center bg-space-900/30 z-10">
+                <div class="text-xs font-mono text-gray-500" x-text="displayMode === 'family' ? $store.global.t('selectFamilies') : $store.global.t('selectModels')"></div>
+            </div>
+        </div>
+    </div>
+
     <!-- Controls -->
     <div class="flex items-center justify-between gap-4 glass-panel p-2 rounded-lg h-16">
         <div class="flex items-center gap-4 h-full">
@@ -141,9 +313,8 @@
 
     <!-- Main Table -->
     <div class="glass-panel rounded-xl overflow-hidden min-h-[400px]">
-        <table class="table w-full" :class="{'table-xs': $store.settings.compact, 'table-sm': !$store.settings.compact}">
-            <thead
-                class="bg-space-900/50 text-gray-500 font-mono text-xs uppercase tracking-wider border-b border-space-border">
+        <table class="standard-table" :class="{'table-xs': $store.settings.compact, 'table-sm': !$store.settings.compact}">
+            <thead>
                 <tr>
                     <th class="w-8 py-3 pl-4" x-text="$store.global.t('stat')">Stat</th>
                     <th class="py-3" x-text="$store.global.t('modelIdentity')">Model Identity</th>
@@ -153,9 +324,9 @@
                         Distribution</th>
                 </tr>
             </thead>
-            <tbody class="divide-y divide-space-border/50 text-sm">
+            <tbody class="text-sm">
                 <template x-for="row in $store.data.quotaRows" :key="row.modelId">
-                    <tr class="hover:bg-white/5 transition-colors group">
+                    <tr class="group">
                         <td class="pl-4">
                             <div class="w-2 h-2 rounded-full transition-all duration-500"
                                 :class="row.avgQuota > 0 ? 'bg-neon-green shadow-[0_0_8px_rgba(34,197,94,0.6)]' : 'bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.6)]'">
@@ -204,14 +375,14 @@
                     <td colspan="5" class="h-64 text-center">
                         <div class="flex flex-col items-center justify-center gap-3">
                             <span class="loading loading-bars loading-md text-neon-purple"></span>
-                            <span class="text-xs font-mono text-gray-600 animate-pulse">ESTABLISHING
+                            <span class="text-xs font-mono text-gray-600 animate-pulse" x-text="$store.global.t('establishingUplink')">ESTABLISHING
                                 UPLINK...</span>
                         </div>
                     </td>
                 </tr>
                 <!-- Empty -->
                 <tr x-show="!$store.data.loading && $store.data.quotaRows.length === 0">
-                    <td colspan="5" class="h-64 text-center text-gray-600 font-mono text-xs">
+                    <td colspan="5" class="h-64 text-center text-gray-600 font-mono text-xs" x-text="$store.global.t('noSignal')">
                         NO SIGNAL DETECTED
                     </td>
                 </tr>

public/views/logs.html

@@ -1,6 +1,7 @@
-<div x-data="logsViewer" class="h-full flex flex-col glass-panel rounded-xl overflow-hidden border-space-border">
-    <!-- Toolbar -->
-    <div class="bg-space-900 flex flex-wrap gap-y-2 justify-between items-center p-2 px-4 border-b border-space-border select-none min-h-[48px]">
+<div x-data="logsViewer" class="view-container h-full flex flex-col">
+    <div class="glass-panel rounded-xl overflow-hidden border-space-border flex flex-col flex-1 min-h-0">
+        <!-- Toolbar -->
+        <div class="bg-space-900 flex flex-wrap gap-y-2 justify-between items-center p-2 px-4 border-b border-space-border select-none min-h-[48px] shrink-0">
 
         <!-- Left: Decor & Title -->
         <div class="flex items-center gap-3 shrink-0">
@@ -21,23 +22,23 @@
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                     </svg>
                 </div>
-                <input type="text" x-model="searchQuery" placeholder="grep logs..."
+                <input type="text" x-model="searchQuery" :placeholder="$store.global.t('grepLogs')"
                     class="w-full h-7 bg-space-950 border border-space-border rounded text-xs font-mono pl-7 pr-2 focus:border-neon-purple focus:outline-none transition-colors placeholder-gray-700 text-gray-300">
             </div>
 
             <!-- Filters -->
             <div class="hidden md:flex gap-3 text-[10px] font-mono font-bold uppercase select-none">
                  <label class="flex items-center gap-1.5 cursor-pointer text-blue-400 opacity-50 hover:opacity-100 transition-opacity" :class="{'opacity-100': filters.INFO}">
-                     <input type="checkbox" class="checkbox checkbox-xs checkbox-info rounded-[2px] w-3 h-3 border-blue-400/50" x-model="filters.INFO"> INFO
+                     <input type="checkbox" class="checkbox checkbox-xs checkbox-info rounded-[2px] w-3 h-3 border-blue-400/50" x-model="filters.INFO"> <span x-text="$store.global.t('logLevelInfo')">INFO</span>
                  </label>
                  <label class="flex items-center gap-1.5 cursor-pointer text-neon-green opacity-50 hover:opacity-100 transition-opacity" :class="{'opacity-100': filters.SUCCESS}">
-                     <input type="checkbox" class="checkbox checkbox-xs checkbox-success rounded-[2px] w-3 h-3 border-neon-green/50" x-model="filters.SUCCESS"> SUCCESS
+                     <input type="checkbox" class="checkbox checkbox-xs checkbox-success rounded-[2px] w-3 h-3 border-neon-green/50" x-model="filters.SUCCESS"> <span x-text="$store.global.t('logLevelSuccess')">SUCCESS</span>
                  </label>
                  <label class="flex items-center gap-1.5 cursor-pointer text-yellow-400 opacity-50 hover:opacity-100 transition-opacity" :class="{'opacity-100': filters.WARN}">
-                     <input type="checkbox" class="checkbox checkbox-xs checkbox-warning rounded-[2px] w-3 h-3 border-yellow-400/50" x-model="filters.WARN"> WARN
+                     <input type="checkbox" class="checkbox checkbox-xs checkbox-warning rounded-[2px] w-3 h-3 border-yellow-400/50" x-model="filters.WARN"> <span x-text="$store.global.t('logLevelWarn')">WARN</span>
                  </label>
                  <label class="flex items-center gap-1.5 cursor-pointer text-red-500 opacity-50 hover:opacity-100 transition-opacity" :class="{'opacity-100': filters.ERROR}">
-                     <input type="checkbox" class="checkbox checkbox-xs checkbox-error rounded-[2px] w-3 h-3 border-red-500/50" x-model="filters.ERROR"> ERR
+                     <input type="checkbox" class="checkbox checkbox-xs checkbox-error rounded-[2px] w-3 h-3 border-red-500/50" x-model="filters.ERROR"> <span x-text="$store.global.t('logLevelError')">ERR</span>
                  </label>
             </div>
         </div>
@@ -61,7 +62,7 @@
     </div>
 
     <!-- Log Content -->
-    <div id="logs-container" class="flex-1 overflow-auto p-4 font-mono text-xs space-y-0.5 bg-[#050505]">
+    <div id="logs-container" class="flex-1 overflow-auto p-4 font-mono text-xs space-y-0.5 bg-space-950">
         <template x-for="(log, idx) in filteredLogs" :key="idx">
             <div class="hover:bg-white/5 rounded px-2 py-0.5 -mx-2 break-words leading-tight flex gap-3 group">
                 <span class="text-gray-600 w-16 shrink-0 select-none group-hover:text-gray-500"
@@ -78,8 +79,10 @@
         </template>
         <!-- Blinking Cursor -->
         <div class="h-4 w-2 bg-gray-500 animate-pulse mt-1 inline-block" x-show="filteredLogs.length === logs.length && !searchQuery"></div>
-        <div x-show="filteredLogs.length === 0 && logs.length > 0" class="text-gray-600 italic mt-4 text-center">
+        <div x-show="filteredLogs.length === 0 && logs.length > 0" class="text-gray-600 italic mt-4 text-center"
+            x-text="$store.global.t('noLogsMatch')">
             No logs match filter
         </div>
     </div>
+    </div>
 </div>

public/views/settings.html

@@ -1,7 +1,36 @@
-<div x-data="{ activeTab: 'ui' }" class="glass-panel rounded-xl border border-space-border flex flex-col h-[calc(100vh-140px)] overflow-hidden">
+<div x-data="{
+    activeTab: 'ui',
+    // Helper function to update model config with authentication
+    async updateModelConfig(modelId, configUpdates) {
+        const store = Alpine.store('global');
+        try {
+            const { response, newPassword } = await window.utils.request('/api/models/config', {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({ modelId, config: configUpdates })
+            }, store.webuiPassword);
+
+            if (newPassword) store.webuiPassword = newPassword;
+
+            if (!response.ok) {
+                throw new Error('Failed to update model config');
+            }
+
+            // Optimistic update
+            Alpine.store('data').modelConfig[modelId] = {
+                ...Alpine.store('data').modelConfig[modelId],
+                ...configUpdates
+            };
+            Alpine.store('data').computeQuotaRows();
+        } catch (e) {
+            store.showToast('Failed to update model config: ' + e.message, 'error');
+        }
+    }
+}" class="view-container">
     <!-- Header & Tabs -->
-    <div class="bg-space-900/50 border-b border-space-border px-8 pt-8 pb-0 shrink-0">
-        <div class="flex items-center justify-between mb-6">
+    <div class="glass-panel rounded-xl border border-space-border flex flex-col overflow-hidden">
+        <div class="bg-space-900/50 border-b border-space-border px-8 pt-8 pb-0 shrink-0">
+            <div class="flex items-center justify-between mb-6">
             <h3 class="text-xl font-bold text-white flex items-center gap-2">
                 <svg class="w-5 h-5 text-neon-purple" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -13,30 +42,30 @@
             </h3>
         </div>
 
-        <div class="flex gap-6">
+        <div class="flex gap-6 overflow-x-auto">
             <button @click="activeTab = 'ui'"
-                class="pb-3 border-b-2 transition-colors font-medium text-sm flex items-center gap-2"
+                class="pb-3 border-b-2 transition-colors font-medium text-sm flex items-center gap-2 whitespace-nowrap"
                 :class="activeTab === 'ui' ? 'border-neon-purple text-white' : 'border-transparent text-gray-500 hover:text-gray-300'">
                 <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" /></svg>
                 <span x-text="$store.global.t('tabInterface')">Interface</span>
             </button>
             <button @click="activeTab = 'claude'"
-                class="pb-3 border-b-2 transition-colors font-medium text-sm flex items-center gap-2"
+                class="pb-3 border-b-2 transition-colors font-medium text-sm flex items-center gap-2 whitespace-nowrap"
                 :class="activeTab === 'claude' ? 'border-neon-purple text-white' : 'border-transparent text-gray-500 hover:text-gray-300'">
                 <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
                 <span x-text="$store.global.t('tabClaude')">Claude CLI</span>
             </button>
             <button @click="activeTab = 'models'"
-                class="pb-3 border-b-2 transition-colors font-medium text-sm flex items-center gap-2"
+                class="pb-3 border-b-2 transition-colors font-medium text-sm flex items-center gap-2 whitespace-nowrap"
                 :class="activeTab === 'models' ? 'border-neon-purple text-white' : 'border-transparent text-gray-500 hover:text-gray-300'">
                 <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" /></svg>
                 <span x-text="$store.global.t('tabModels')">Models</span>
             </button>
             <button @click="activeTab = 'server'"
-                class="pb-3 border-b-2 transition-colors font-medium text-sm flex items-center gap-2"
+                class="pb-3 border-b-2 transition-colors font-medium text-sm flex items-center gap-2 whitespace-nowrap"
                 :class="activeTab === 'server' ? 'border-neon-purple text-white' : 'border-transparent text-gray-500 hover:text-gray-300'">
                 <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" /></svg>
-                <span x-text="$store.global.t('tabServer')">Server Info</span>
+                <span x-text="$store.global.t('tabServer')">Server</span>
             </button>
         </div>
     </div>
@@ -74,8 +103,7 @@
                     </label>
                     <input type="range" min="10" max="300" class="range range-xs range-primary"
                         x-model="$store.settings.refreshInterval"
-                        @change="$store.settings.saveSettings(true)"
-                        style="--range-shdw: #a855f7">
+                        @change="$store.settings.saveSettings(true)">
                     <div class="w-full flex justify-between text-xs px-2 mt-2 text-gray-600 font-mono">
                         <span>10s</span>
                         <span>300s</span>
@@ -87,12 +115,11 @@
                     <label class="label">
                         <span class="label-text text-gray-300" x-text="$store.global.t('logBufferSize')">Log Buffer Size</span>
                         <span class="label-text-alt font-mono text-neon-purple"
-                            x-text="$store.settings.logLimit + ' lines'"></span>
+                            x-text="$store.settings.logLimit + ' ' + $store.global.t('lines')"></span>
                     </label>
                     <input type="range" min="500" max="5000" step="500" class="range range-xs range-secondary"
                         x-model="$store.settings.logLimit"
-                        @change="$store.settings.saveSettings(true)"
-                        style="--range-shdw: #22c55e">
+                        @change="$store.settings.saveSettings(true)">
                     <div class="w-full flex justify-between text-xs px-2 mt-2 text-gray-600 font-mono">
                         <span>500</span>
                         <span>5000</span>
@@ -141,12 +168,12 @@
         <div x-show="activeTab === 'claude'" x-data="claudeConfig" class="space-y-6 max-w-3xl animate-fade-in">
             <div class="alert bg-space-900/50 border-space-border text-sm shadow-none">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
-                <span class="text-gray-400">Settings below directly modify <code class="text-neon-cyan font-mono">~/.claude/settings.json</code>. Restart Claude CLI to apply.</span>
+                <span class="text-gray-400" x-text="$store.global.t('claudeSettingsAlert')">Settings below directly modify <code class="text-neon-cyan font-mono">~/.claude/settings.json</code>. Restart Claude CLI to apply.</span>
             </div>
 
             <!-- Base URL -->
             <div class="card bg-space-900/30 border border-space-border/50 p-5">
-                <label class="label text-xs uppercase text-gray-500 font-semibold mb-2">Proxy Connection</label>
+                <label class="label text-xs uppercase text-gray-500 font-semibold mb-2" x-text="$store.global.t('proxyConnection')">Proxy Connection</label>
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                     <div>
                         <div class="text-[11px] text-gray-400 mb-1 font-mono">ANTHROPIC_BASE_URL</div>
@@ -163,18 +190,18 @@
 
             <!-- Models Selection -->
             <div class="card bg-space-900/30 border border-space-border/50 p-5">
-                <label class="label text-xs uppercase text-gray-500 font-semibold mb-2">Model Selection</label>
+                <label class="label text-xs uppercase text-gray-500 font-semibold mb-2" x-text="$store.global.t('modelSelection')">Model Selection</label>
 
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                     <!-- Primary -->
                     <div class="form-control">
-                        <label class="label pt-0 pb-1 text-[11px] text-gray-400 font-bold tracking-wider">Primary Model</label>
+                        <label class="label pt-0 pb-1 text-[11px] text-gray-400 font-bold tracking-wider" x-text="$store.global.t('primaryModel')">Primary Model</label>
                         <div class="relative w-full" x-data="{ open: false }">
                             <input type="text" x-model="config.env.ANTHROPIC_MODEL"
                                 @focus="open = true"
                                 @click.away="open = false"
                                 class="input input-sm w-full font-mono text-xs bg-space-800/50 border-space-border text-white focus:bg-space-800 focus:border-neon-cyan pr-8 placeholder-gray-600"
-                                placeholder="Type to search or select...">
+                                :placeholder="$store.global.t('typeToSearch')">
                             <div class="absolute right-2 top-1.5 cursor-pointer text-gray-500 hover:text-white transition-colors" @click="open = !open; if(open) $el.previousElementSibling.focus()" @mousedown.prevent>▼</div>
 
                             <ul x-show="open"
@@ -185,14 +212,15 @@
                                 <template x-for="modelId in $store.data.models.filter(m => m.toLowerCase().includes(config.env.ANTHROPIC_MODEL?.toLowerCase() || ''))" :key="modelId">
                                     <li>
                                         <a @mousedown.prevent="config.env.ANTHROPIC_MODEL = modelId; open = false"
-                                           class="font-mono text-xs py-2 hover:bg-space-800 hover:text-neon-cyan border-b border-space-border/30 last:border-0"
+                                           class="font-mono text-xs py-2 hover:bg-space-800 border-b border-space-border/30 last:border-0 flex items-center gap-2"
                                            :class="config.env.ANTHROPIC_MODEL === modelId ? 'text-neon-cyan bg-space-800/50' : 'text-gray-300'">
+                                            <span class="w-1.5 h-1.5 rounded-full" :class="$store.data.getModelFamily(modelId) === 'claude' ? 'bg-neon-purple shadow-[0_0_5px_rgba(168,85,247,0.5)]' : ($store.data.getModelFamily(modelId) === 'gemini' ? 'bg-neon-green shadow-[0_0_5px_rgba(34,197,94,0.5)]' : 'bg-gray-600')"></span>
                                             <span x-text="modelId"></span>
                                         </a>
                                     </li>
                                 </template>
                                 <li x-show="$store.data.models.filter(m => m.toLowerCase().includes(config.env.ANTHROPIC_MODEL?.toLowerCase() || '')).length === 0">
-                                    <span class="text-xs text-gray-500 italic py-2">No matching models</span>
+                                    <span class="text-xs text-gray-500 italic py-2" x-text="$store.global.t('noMatchingModels')">No matching models</span>
                                 </li>
                             </ul>
                         </div>
@@ -201,13 +229,13 @@
 
                     <!-- Sub-agent -->
                     <div class="form-control">
-                        <label class="label pt-0 pb-1 text-[11px] text-gray-400 font-bold tracking-wider">Sub-agent Model</label>
+                        <label class="label pt-0 pb-1 text-[11px] text-gray-400 font-bold tracking-wider" x-text="$store.global.t('subAgentModel')">Sub-agent Model</label>
                         <div class="relative w-full" x-data="{ open: false }">
                             <input type="text" x-model="config.env.CLAUDE_CODE_SUBAGENT_MODEL"
                                 @focus="open = true"
                                 @click.away="open = false"
                                 class="input input-sm w-full font-mono text-xs bg-space-800/50 border-space-border text-white focus:bg-space-800 focus:border-neon-purple pr-8 placeholder-gray-600"
-                                placeholder="Type to search or select...">
+                                :placeholder="$store.global.t('typeToSearch')">
                             <div class="absolute right-2 top-1.5 cursor-pointer text-gray-500 hover:text-white transition-colors" @click="open = !open; if(open) $el.previousElementSibling.focus()" @mousedown.prevent>▼</div>
 
                             <ul x-show="open"
@@ -218,14 +246,15 @@
                                 <template x-for="modelId in $store.data.models.filter(m => m.toLowerCase().includes(config.env.CLAUDE_CODE_SUBAGENT_MODEL?.toLowerCase() || ''))" :key="modelId">
                                     <li>
                                         <a @mousedown.prevent="config.env.CLAUDE_CODE_SUBAGENT_MODEL = modelId; open = false"
-                                           class="font-mono text-xs py-2 hover:bg-space-800 hover:text-neon-purple border-b border-space-border/30 last:border-0"
+                                           class="font-mono text-xs py-2 hover:bg-space-800 border-b border-space-border/30 last:border-0 flex items-center gap-2"
                                            :class="config.env.CLAUDE_CODE_SUBAGENT_MODEL === modelId ? 'text-neon-purple bg-space-800/50' : 'text-gray-300'">
+                                            <span class="w-1.5 h-1.5 rounded-full" :class="$store.data.getModelFamily(modelId) === 'claude' ? 'bg-neon-purple shadow-[0_0_5px_rgba(168,85,247,0.5)]' : ($store.data.getModelFamily(modelId) === 'gemini' ? 'bg-neon-green shadow-[0_0_5px_rgba(34,197,94,0.5)]' : 'bg-gray-600')"></span>
                                             <span x-text="modelId"></span>
                                         </a>
                                     </li>
                                 </template>
                                 <li x-show="$store.data.models.filter(m => m.toLowerCase().includes(config.env.CLAUDE_CODE_SUBAGENT_MODEL?.toLowerCase() || '')).length === 0">
-                                    <span class="text-xs text-gray-500 italic py-2">No matching models</span>
+                                    <span class="text-xs text-gray-500 italic py-2" x-text="$store.global.t('noMatchingModels')">No matching models</span>
                                 </li>
                             </ul>
                         </div>
@@ -233,19 +262,19 @@
                     </div>
                 </div>
 
-                <div class="divider text-xs font-mono text-gray-600 my-2">ALIAS OVERRIDES</div>
+                <div class="divider text-xs font-mono text-gray-600 my-2" x-text="$store.global.t('aliasOverrides')">ALIAS OVERRIDES</div>
 
                 <!-- Overrides -->
                 <div class="space-y-4">
                      <!-- Opus -->
                      <div class="form-control">
-                        <label class="label pt-0 pb-1 text-[10px] text-gray-500 uppercase font-bold">Opus Alias</label>
+                        <label class="label pt-0 pb-1 text-[10px] text-gray-500 uppercase font-bold" x-text="$store.global.t('opusAlias')">Opus Alias</label>
                         <div class="relative w-full" x-data="{ open: false }">
                             <input type="text" x-model="config.env.ANTHROPIC_DEFAULT_OPUS_MODEL"
                                 @focus="open = true"
                                 @click.away="open = false"
                                 class="input input-sm w-full font-mono text-xs bg-space-800/50 border-space-border text-gray-300 focus:bg-space-800 focus:border-neon-cyan pr-8 placeholder-gray-600"
-                                placeholder="Search...">
+                                :placeholder="$store.global.t('searchPlaceholder')">
                             <div class="absolute right-2 top-1.5 cursor-pointer text-gray-500 hover:text-white transition-colors" @click="open = !open; if(open) $el.previousElementSibling.focus()" @mousedown.prevent>▼</div>
                              <ul x-show="open"
                                 x-transition:enter="transition ease-out duration-100"
@@ -255,8 +284,9 @@
                                 <template x-for="modelId in $store.data.models.filter(m => m.toLowerCase().includes(config.env.ANTHROPIC_DEFAULT_OPUS_MODEL?.toLowerCase() || ''))" :key="modelId">
                                     <li>
                                         <a @mousedown.prevent="config.env.ANTHROPIC_DEFAULT_OPUS_MODEL = modelId; open = false"
-                                           class="font-mono text-xs py-1 hover:bg-space-800 hover:text-white border-b border-space-border/30 last:border-0"
+                                           class="font-mono text-xs py-1 hover:bg-space-800 border-b border-space-border/30 last:border-0 flex items-center gap-2"
                                            :class="config.env.ANTHROPIC_DEFAULT_OPUS_MODEL === modelId ? 'text-neon-cyan bg-space-800/50' : 'text-gray-300'">
+                                            <span class="w-1.5 h-1.5 rounded-full" :class="$store.data.getModelFamily(modelId) === 'claude' ? 'bg-neon-purple shadow-[0_0_5px_rgba(168,85,247,0.5)]' : ($store.data.getModelFamily(modelId) === 'gemini' ? 'bg-neon-green shadow-[0_0_5px_rgba(34,197,94,0.5)]' : 'bg-gray-600')"></span>
                                             <span x-text="modelId"></span>
                                         </a>
                                     </li>
@@ -266,13 +296,13 @@
                     </div>
                     <!-- Sonnet -->
                      <div class="form-control">
-                        <label class="label pt-0 pb-1 text-[10px] text-gray-500 uppercase font-bold">Sonnet Alias</label>
+                        <label class="label pt-0 pb-1 text-[10px] text-gray-500 uppercase font-bold" x-text="$store.global.t('sonnetAlias')">Sonnet Alias</label>
                         <div class="relative w-full" x-data="{ open: false }">
                             <input type="text" x-model="config.env.ANTHROPIC_DEFAULT_SONNET_MODEL"
                                 @focus="open = true"
                                 @click.away="open = false"
                                 class="input input-sm w-full font-mono text-xs bg-space-800/50 border-space-border text-gray-300 focus:bg-space-800 focus:border-neon-cyan pr-8 placeholder-gray-600"
-                                placeholder="Search...">
+                                :placeholder="$store.global.t('searchPlaceholder')">
                             <div class="absolute right-2 top-1.5 cursor-pointer text-gray-500 hover:text-white transition-colors" @click="open = !open; if(open) $el.previousElementSibling.focus()" @mousedown.prevent>▼</div>
                              <ul x-show="open"
                                 x-transition:enter="transition ease-out duration-100"
@@ -282,8 +312,9 @@
                                 <template x-for="modelId in $store.data.models.filter(m => m.toLowerCase().includes(config.env.ANTHROPIC_DEFAULT_SONNET_MODEL?.toLowerCase() || ''))" :key="modelId">
                                     <li>
                                         <a @mousedown.prevent="config.env.ANTHROPIC_DEFAULT_SONNET_MODEL = modelId; open = false"
-                                           class="font-mono text-xs py-1 hover:bg-space-800 hover:text-white border-b border-space-border/30 last:border-0"
+                                           class="font-mono text-xs py-1 hover:bg-space-800 border-b border-space-border/30 last:border-0 flex items-center gap-2"
                                            :class="config.env.ANTHROPIC_DEFAULT_SONNET_MODEL === modelId ? 'text-neon-cyan bg-space-800/50' : 'text-gray-300'">
+                                            <span class="w-1.5 h-1.5 rounded-full" :class="$store.data.getModelFamily(modelId) === 'claude' ? 'bg-neon-purple shadow-[0_0_5px_rgba(168,85,247,0.5)]' : ($store.data.getModelFamily(modelId) === 'gemini' ? 'bg-neon-green shadow-[0_0_5px_rgba(34,197,94,0.5)]' : 'bg-gray-600')"></span>
                                             <span x-text="modelId"></span>
                                         </a>
                                     </li>
@@ -293,13 +324,13 @@
                     </div>
                     <!-- Haiku -->
                      <div class="form-control">
-                        <label class="label pt-0 pb-1 text-[10px] text-gray-500 uppercase font-bold">Haiku Alias</label>
+                        <label class="label pt-0 pb-1 text-[10px] text-gray-500 uppercase font-bold" x-text="$store.global.t('haikuAlias')">Haiku Alias</label>
                          <div class="relative w-full" x-data="{ open: false }">
                             <input type="text" x-model="config.env.ANTHROPIC_DEFAULT_HAIKU_MODEL"
                                 @focus="open = true"
                                 @click.away="open = false"
                                 class="input input-sm w-full font-mono text-xs bg-space-800/50 border-space-border text-gray-300 focus:bg-space-800 focus:border-neon-cyan pr-8 placeholder-gray-600"
-                                placeholder="Search...">
+                                :placeholder="$store.global.t('searchPlaceholder')">
                             <div class="absolute right-2 top-1.5 cursor-pointer text-gray-500 hover:text-white transition-colors" @click="open = !open; if(open) $el.previousElementSibling.focus()" @mousedown.prevent>▼</div>
                              <ul x-show="open"
                                 x-transition:enter="transition ease-out duration-100"
@@ -309,8 +340,9 @@
                                 <template x-for="modelId in $store.data.models.filter(m => m.toLowerCase().includes(config.env.ANTHROPIC_DEFAULT_HAIKU_MODEL?.toLowerCase() || ''))" :key="modelId">
                                     <li>
                                         <a @mousedown.prevent="config.env.ANTHROPIC_DEFAULT_HAIKU_MODEL = modelId; open = false"
-                                           class="font-mono text-xs py-1 hover:bg-space-800 hover:text-white border-b border-space-border/30 last:border-0"
+                                           class="font-mono text-xs py-1 hover:bg-space-800 border-b border-space-border/30 last:border-0 flex items-center gap-2"
                                            :class="config.env.ANTHROPIC_DEFAULT_HAIKU_MODEL === modelId ? 'text-neon-cyan bg-space-800/50' : 'text-gray-300'">
+                                            <span class="w-1.5 h-1.5 rounded-full" :class="$store.data.getModelFamily(modelId) === 'claude' ? 'bg-neon-purple shadow-[0_0_5px_rgba(168,85,247,0.5)]' : ($store.data.getModelFamily(modelId) === 'gemini' ? 'bg-neon-green shadow-[0_0_5px_rgba(34,197,94,0.5)]' : 'bg-gray-600')"></span>
                                             <span x-text="modelId"></span>
                                         </a>
                                     </li>
@@ -325,7 +357,7 @@
                 <button class="btn btn-sm bg-neon-purple hover:bg-purple-600 border-none text-white px-6 gap-2"
                     @click="saveClaudeConfig" :disabled="loading">
                     <svg x-show="!loading" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" /></svg>
-                    <span x-show="!loading">Write to Config</span>
+                    <span x-show="!loading" x-text="$store.global.t('writeToConfig')">Write to Config</span>
                     <span x-show="loading" class="loading loading-spinner loading-xs"></span>
                 </button>
             </div>
@@ -334,31 +366,34 @@
         <!-- Tab 2.5: Models Configuration -->
         <div x-show="activeTab === 'models'" class="space-y-6 max-w-3xl animate-fade-in">
             <div class="flex items-center justify-between">
-                <div class="text-sm text-gray-400">Manage visibility and ordering of models in the dashboard.</div>
+                <div class="text-sm text-gray-400" x-text="$store.global.t('modelsDesc')">Manage visibility and ordering of models in the dashboard.</div>
                 <div class="form-control">
                     <label class="label cursor-pointer gap-2">
-                        <span class="label-text text-xs text-gray-500">Show Hidden Models</span>
+                        <span class="label-text text-xs text-gray-500" x-text="$store.global.t('showHidden')">Show Hidden Models</span>
                         <input type="checkbox" class="toggle toggle-xs toggle-primary" x-model="$store.settings.showHiddenModels" @change="$store.settings.saveSettings(true)">
                     </label>
                 </div>
             </div>
 
             <!-- Models List -->
-            <div class="bg-space-900/30 border border-space-border/50 rounded-lg overflow-hidden">
-                <table class="table table-sm w-full">
-                    <thead class="bg-space-900/50 text-gray-500 font-mono text-xs uppercase tracking-wider border-b border-space-border/50">
+            <div class="glass-panel rounded-lg overflow-hidden">
+                <table class="standard-table">
+                    <thead>
                         <tr>
-                            <th class="pl-4">Model ID</th>
-                            <th>Alias</th>
-                            <th class="text-right pr-4">Actions</th>
+                            <th class="pl-4" x-text="$store.global.t('modelId')">Model ID</th>
+                            <th x-text="$store.global.t('alias')">Alias</th>
+                            <th>Mapping (Target Model ID)</th>
+                            <th class="text-right pr-4" x-text="$store.global.t('actions')">Actions</th>
                         </tr>
                     </thead>
-                    <tbody class="divide-y divide-space-border/30">
+                    <tbody>
                         <template x-for="modelId in $store.data.models" :key="modelId">
                             <tr class="hover:bg-white/5 transition-colors group"
                                 x-data="{
-                                    isEditing: false,
+                                    isEditingAlias: false,
+                                    isEditingMapping: false,
                                     newAlias: '',
+                                    newMapping: '',
                                     // Use getters for reactivity - accessing store directly ensures updates are reflected immediately
                                     get config() { return $store.data.modelConfig[modelId] || {} },
                                     get isPinned() { return !!this.config.pinned },
@@ -369,40 +404,50 @@
                                         return (family === 'other' || family === 'unknown');
                                     }
                                 }"
-                                x-init="newAlias = config.alias || ''"
+                                x-init="newAlias = config.alias || ''; newMapping = config.mapping || ''"
                             >
                                 <td class="pl-4 font-mono text-xs text-gray-300" x-text="modelId"></td>
                                 <td>
-                                    <div x-show="!isEditing" class="flex items-center gap-2 group-hover:text-white transition-colors cursor-pointer" @click="isEditing = true; newAlias = config.alias || ''">
+                                    <div x-show="!isEditingAlias" class="flex items-center gap-2 group-hover:text-white transition-colors cursor-pointer" @click="isEditingAlias = true; newAlias = config.alias || ''">
                                         <span x-text="config.alias || '-'" :class="{'text-gray-600 italic': !config.alias}"></span>
                                         <svg class="w-3 h-3 text-gray-600 opacity-0 group-hover:opacity-100 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" /></svg>
                                     </div>
-                                    <div x-show="isEditing" class="flex items-center gap-1">
+                                    <div x-show="isEditingAlias" class="flex items-center gap-1">
                                         <input type="text" x-model="newAlias"
-                                            class="input input-xs bg-space-800 border-space-border text-white focus:outline-none focus:border-neon-purple w-32"
+                                            class="input input-xs bg-space-800 border-space-border text-white focus:outline-none focus:border-neon-purple w-24"
                                             @keydown.enter="
-                                                $store.data.modelConfig[modelId] = { ...config, alias: newAlias };
-                                                fetch('/api/models/config', {
-                                                    method: 'POST',
-                                                    headers: {'Content-Type': 'application/json'},
-                                                    body: JSON.stringify({ modelId, config: { alias: newAlias } })
-                                                });
-                                                isEditing = false;
-                                                $store.data.computeQuotaRows();
+                                                await updateModelConfig(modelId, { alias: newAlias });
+                                                isEditingAlias = false;
                                             "
-                                            @keydown.escape="isEditing = false"
+                                            @keydown.escape="isEditingAlias = false"
                                         >
                                         <button class="btn btn-xs btn-ghost btn-square text-green-500" @click="
-                                            $store.data.modelConfig[modelId] = { ...config, alias: newAlias };
-                                            fetch('/api/models/config', {
-                                                method: 'POST',
-                                                headers: {'Content-Type': 'application/json'},
-                                                body: JSON.stringify({ modelId, config: { alias: newAlias } })
-                                            });
-                                            isEditing = false;
-                                            $store.data.computeQuotaRows();
+                                            await updateModelConfig(modelId, { alias: newAlias });
+                                            isEditingAlias = false;
                                         "><svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg></button>
-                                        <button class="btn btn-xs btn-ghost btn-square text-gray-500" @click="isEditing = false"><svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.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>
+                                        <button class="btn btn-xs btn-ghost btn-square text-gray-500" @click="isEditingAlias = false"><svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.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>
+                                </td>
+                                <td>
+                                    <div x-show="!isEditingMapping" class="flex items-center gap-2 group-hover:text-white transition-colors cursor-pointer" @click="isEditingMapping = true; newMapping = config.mapping || ''">
+                                        <span x-text="config.mapping || '-'" :class="{'text-gray-600 italic': !config.mapping}"></span>
+                                        <svg class="w-3 h-3 text-gray-600 opacity-0 group-hover:opacity-100 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" /></svg>
+                                    </div>
+                                    <div x-show="isEditingMapping" class="flex items-center gap-1">
+                                        <input type="text" x-model="newMapping"
+                                            class="input input-xs bg-space-800 border-space-border text-white focus:outline-none focus:border-neon-cyan w-32"
+                                            placeholder="e.g. claude-3-opus-20240229"
+                                            @keydown.enter="
+                                                await updateModelConfig(modelId, { mapping: newMapping });
+                                                isEditingMapping = false;
+                                            "
+                                            @keydown.escape="isEditingMapping = false"
+                                        >
+                                        <button class="btn btn-xs btn-ghost btn-square text-green-500" @click="
+                                            await updateModelConfig(modelId, { mapping: newMapping });
+                                            isEditingMapping = false;
+                                        "><svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg></button>
+                                        <button class="btn btn-xs btn-ghost btn-square text-gray-500" @click="isEditingMapping = false"><svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.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>
                                 </td>
                                 <td class="text-right pr-4">
@@ -410,18 +455,8 @@
                                         <!-- Pin Toggle -->
                                         <button class="btn btn-xs btn-circle transition-colors"
                                             :class="isPinned ? 'bg-neon-purple/20 text-neon-purple border-neon-purple/50 hover:bg-neon-purple/30' : 'btn-ghost text-gray-600 hover:text-gray-300'"
-                                            @click="
-                                                const newVal = !isPinned;
-                                                // Optimistic update
-                                                $store.data.modelConfig[modelId] = { ...config, pinned: newVal };
-                                                fetch('/api/models/config', {
-                                                    method: 'POST',
-                                                    headers: {'Content-Type': 'application/json'},
-                                                    body: JSON.stringify({ modelId, config: { pinned: newVal } })
-                                                });
-                                                $store.data.computeQuotaRows();
-                                            "
-                                            title="Pin to top">
+                                            @click="await updateModelConfig(modelId, { pinned: !isPinned })"
+                                            :title="$store.global.t('pinToTop')">
                                             <!-- Solid Icon when Pinned -->
                                             <svg x-show="isPinned" xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor">
                                                 <path d="M5 4a2 2 0 012-2h6a2 2 0 012 2v14l-5-2.5L5 18V4z" />
@@ -435,19 +470,8 @@
                                         <!-- Hide Toggle -->
                                         <button class="btn btn-xs btn-circle transition-colors"
                                             :class="isHidden ? 'bg-red-500/20 text-red-400 border-red-500/50 hover:bg-red-500/30' : 'btn-ghost text-gray-400 hover:text-white'"
-                                            @click="
-                                                const currentHidden = isHidden;
-                                                const newVal = !currentHidden;
-                                                // Optimistic update
-                                                $store.data.modelConfig[modelId] = { ...config, hidden: newVal };
-                                                fetch('/api/models/config', {
-                                                    method: 'POST',
-                                                    headers: {'Content-Type': 'application/json'},
-                                                    body: JSON.stringify({ modelId, config: { hidden: newVal } })
-                                                });
-                                                $store.data.computeQuotaRows();
-                                            "
-                                            title="Toggle Visibility">
+                                            @click="await updateModelConfig(modelId, { hidden: !isHidden })"
+                                            :title="$store.global.t('toggleVisibility')">
                                             <svg x-show="!isHidden" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
@@ -462,7 +486,7 @@
                         </template>
                         <!-- Empty State -->
                          <tr x-show="!$store.data.models.length">
-                            <td colspan="3" class="text-center py-8 text-gray-600 text-xs font-mono">
+                            <td colspan="3" class="text-center py-8 text-gray-600 text-xs font-mono" x-text="$store.global.t('noModels')">
                                 NO MODELS DETECTED
                             </td>
                         </tr>
@@ -471,46 +495,336 @@
             </div>
         </div>
 
-        <!-- Tab 3: Server Info -->
-        <div x-show="activeTab === 'server'" class="space-y-6 max-w-2xl animate-fade-in">
-             <div class="grid grid-cols-2 gap-4 bg-space-900/30 p-6 rounded-lg border border-space-border/50">
+        <!-- Tab 3: Server Info & Configuration -->
+        <div x-show="activeTab === 'server'" x-data="{
+            serverConfig: {},
+            loading: false,
+            async fetchServerConfig() {
+                const password = Alpine.store('global').webuiPassword;
+                try {
+                    const { response, newPassword } = await window.utils.request('/api/config', {}, password);
+                    if (newPassword) Alpine.store('global').webuiPassword = newPassword;
+                    if (!response.ok) throw new Error('Failed to fetch config');
+                    const data = await response.json();
+                    this.serverConfig = data.config || {};
+                } catch (e) {
+                    console.error('Failed to fetch server config:', e);
+                }
+            },
+            async saveServerConfig() {
+                this.loading = true;
+                const store = Alpine.store('global');
+                // Ensure all numeric fields are properly typed
+                const payload = {
+                    debug: !!this.serverConfig.debug,
+                    maxRetries: parseInt(this.serverConfig.maxRetries || 5),
+                    retryBaseMs: parseInt(this.serverConfig.retryBaseMs || 1000),
+                    retryMaxMs: parseInt(this.serverConfig.retryMaxMs || 30000),
+                    persistTokenCache: !!this.serverConfig.persistTokenCache,
+                    defaultCooldownMs: parseInt(this.serverConfig.defaultCooldownMs || 60000),
+                    maxWaitBeforeErrorMs: parseInt(this.serverConfig.maxWaitBeforeErrorMs || 120000)
+                };
+
+                try {
+                    const { response, newPassword } = await window.utils.request('/api/config', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(payload)
+                    }, store.webuiPassword);
+                    if (newPassword) store.webuiPassword = newPassword;
+
+                    if (!response.ok) throw new Error('Failed to save config');
+                    store.showToast(store.t('configSaved'), 'success');
+                    await this.fetchServerConfig();
+                } catch (e) {
+                    store.showToast('Failed to save config: ' + e.message, 'error');
+                } finally {
+                    this.loading = false;
+                }
+            }
+        }" x-init="$watch('activeTab', value => { if(value === 'server') fetchServerConfig() }); fetchServerConfig()" class="space-y-6 max-w-2xl animate-fade-in">
+
+            <!-- Read-Only Info & System Status -->
+            <div class="flex items-center justify-between mb-2">
+                <div class="text-xs uppercase text-gray-500 font-bold tracking-wider">System Information</div>
+                <button @click="fetchServerConfig()" class="btn btn-xs btn-ghost text-neon-cyan gap-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
+                    Refresh
+                </button>
+            </div>
+            <div class="grid grid-cols-2 gap-4 bg-space-900/30 p-6 rounded-lg border border-space-border/50">
                 <div>
-                    <div class="text-xs text-gray-500 mb-1">Port</div>
+                    <div class="text-xs text-gray-500 mb-1" x-text="$store.global.t('port')">Port</div>
                     <div class="text-sm font-mono text-neon-cyan" x-text="$store.settings.port || '-'"></div>
                 </div>
                 <div>
-                    <div class="text-xs text-gray-500 mb-1">UI Version</div>
+                    <div class="text-xs text-gray-500 mb-1" x-text="$store.global.t('uiVersion')">UI Version</div>
                     <div class="text-sm font-mono text-neon-cyan" x-text="$store.global.version"></div>
                 </div>
-                <div>
-                    <div class="text-xs text-gray-500 mb-1">Debug Mode</div>
-                    <div class="text-sm text-gray-300">Enabled (See Logs)</div>
+            </div>
+
+            <div class="divider border-space-border/50 text-xs uppercase text-gray-500 font-semibold">Runtime Configuration</div>
+
+            <!-- Editable Configuration -->
+            <div class="space-y-6">
+                <!-- Debug Mode -->
+                <div class="form-control bg-space-900/50 p-4 rounded-lg border transition-all duration-300 hover:border-space-border cursor-pointer group"
+                    :class="serverConfig.debug ? 'border-neon-purple/50 bg-neon-purple/5 shadow-[0_0_15px_rgba(168,85,247,0.1)]' : 'border-space-border/50'"
+                    @click="serverConfig.debug = !serverConfig.debug">
+                    <label class="label cursor-pointer pointer-events-none">
+                        <div class="flex flex-col gap-1">
+                            <span class="label-text font-medium transition-colors"
+                                :class="serverConfig.debug ? 'text-neon-purple' : 'text-gray-300'">Debug Mode</span>
+                            <span class="text-xs text-gray-500">Enable detailed logging (See Logs tab)</span>
+                        </div>
+                        <input type="checkbox" class="toggle toggle-primary" x-model="serverConfig.debug">
+                    </label>
                 </div>
-                <div>
-                    <div class="text-xs text-gray-500 mb-1">Environment</div>
-                    <div class="text-sm font-mono text-gray-300">Production</div>
+
+                <!-- Retry Configuration -->
+                <div class="card bg-space-900/30 border border-space-border/50 p-5">
+                    <label class="label text-xs uppercase text-gray-500 font-semibold mb-3">Network Retry Settings</label>
+
+                    <div class="space-y-4">
+                        <!-- Max Retries -->
+                        <div class="form-control">
+                            <label class="label">
+                                <span class="label-text text-gray-300">Max Retries</span>
+                                <span class="label-text-alt font-mono text-neon-purple" x-text="serverConfig.maxRetries || 5"></span>
+                            </label>
+                            <input type="range" min="1" max="20" class="range range-xs range-primary"
+                                x-model="serverConfig.maxRetries">
+                            <div class="w-full flex justify-between text-xs px-2 mt-2 text-gray-600 font-mono">
+                                <span>1</span>
+                                <span>20</span>
+                            </div>
+                        </div>
+
+                        <!-- Retry Base Ms -->
+                        <div class="form-control">
+                            <label class="label">
+                                <span class="label-text text-gray-300">Retry Base Delay (ms)</span>
+                                <span class="label-text-alt font-mono text-neon-cyan" x-text="(serverConfig.retryBaseMs || 1000) + 'ms'"></span>
+                            </label>
+                            <input type="range" min="100" max="10000" step="100" class="range range-xs range-secondary"
+                                x-model="serverConfig.retryBaseMs">
+                            <div class="w-full flex justify-between text-xs px-2 mt-2 text-gray-600 font-mono">
+                                <span>100ms</span>
+                                <span>10s</span>
+                            </div>
+                        </div>
+
+                        <!-- Retry Max Ms -->
+                        <div class="form-control">
+                            <label class="label">
+                                <span class="label-text text-gray-300">Retry Max Delay (ms)</span>
+                                <span class="label-text-alt font-mono text-neon-green" x-text="(serverConfig.retryMaxMs || 30000) + 'ms'"></span>
+                            </label>
+                            <input type="range" min="1000" max="120000" step="1000" class="range range-xs range-accent"
+                                x-model="serverConfig.retryMaxMs">
+                            <div class="w-full flex justify-between text-xs px-2 mt-2 text-gray-600 font-mono">
+                                <span>1s</span>
+                                <span>120s</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Token Cache Persistence -->
+                <div class="form-control bg-space-900/50 p-4 rounded-lg border transition-all duration-300 hover:border-space-border cursor-pointer group"
+                    :class="serverConfig.persistTokenCache ? 'border-neon-green/50 bg-neon-green/5 shadow-[0_0_15px_rgba(34,197,94,0.1)]' : 'border-space-border/50'"
+                    @click="serverConfig.persistTokenCache = !serverConfig.persistTokenCache">
+                    <label class="label cursor-pointer pointer-events-none">
+                        <div class="flex flex-col gap-1">
+                            <span class="label-text font-medium transition-colors"
+                                :class="serverConfig.persistTokenCache ? 'text-neon-green' : 'text-gray-300'">Persist Token Cache</span>
+                            <span class="text-xs text-gray-500">Save OAuth tokens to disk for faster restarts</span>
+                        </div>
+                        <input type="checkbox" class="toggle toggle-secondary" x-model="serverConfig.persistTokenCache">
+                    </label>
+                </div>
+
+                <!-- Account Cooldown & Limits -->
+                <div class="card bg-space-900/30 border border-space-border/50 p-5">
+                    <label class="label text-xs uppercase text-gray-500 font-semibold mb-3">Account Rate Limiting & Timeouts</label>
+                    <div class="space-y-6">
+                        <div class="form-control">
+                            <label class="label">
+                                <span class="label-text text-gray-300">Default Cooldown Time</span>
+                                <span class="label-text-alt font-mono text-neon-cyan" x-text="Math.round((serverConfig.defaultCooldownMs || 60000) / 1000) + 's'"></span>
+                            </label>
+                            <input type="range" min="1000" max="300000" step="1000" class="range range-xs range-accent"
+                                x-model="serverConfig.defaultCooldownMs">
+                            <div class="w-full flex justify-between text-xs px-2 mt-2 text-gray-600 font-mono">
+                                <span>1s</span>
+                                <span>5min</span>
+                            </div>
+                        </div>
+
+                        <div class="form-control">
+                            <label class="label">
+                                <span class="label-text text-gray-300">Max Wait Threshold (Sticky)</span>
+                                <span class="label-text-alt font-mono text-neon-purple" x-text="Math.round((serverConfig.maxWaitBeforeErrorMs || 120000) / 1000) + 's'"></span>
+                            </label>
+                            <input type="range" min="0" max="600000" step="10000" class="range range-xs range-primary"
+                                x-model="serverConfig.maxWaitBeforeErrorMs">
+                            <div class="w-full flex justify-between text-xs px-2 mt-2 text-gray-600 font-mono">
+                                <span>0s</span>
+                                <span>10min</span>
+                            </div>
+                            <p class="text-[10px] text-gray-600 mt-2">Maximum time to wait for a sticky account to reset before failing or switching.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Save Button -->
+                <div class="flex justify-end pt-2">
+                    <button class="btn btn-sm bg-neon-purple hover:bg-purple-600 border-none text-white px-6 gap-2"
+                        @click="saveServerConfig()" :disabled="loading">
+                        <svg x-show="!loading" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" /></svg>
+                        <span x-show="!loading">Save Configuration</span>
+                        <span x-show="loading" class="loading loading-spinner loading-xs"></span>
+                    </button>
                 </div>
             </div>
 
             <div class="alert bg-blue-500/10 border-blue-500/20 text-xs">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-blue-400 shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                 <div class="text-blue-200">
-                    Server settings are read-only. Modify <code class="font-mono bg-blue-500/20 px-1 rounded">config.json</code> or <code class="font-mono bg-blue-500/20 px-1 rounded">.env</code> and restart the server to change.
+                    Some changes may require server restart. Config is saved to <code class="font-mono bg-blue-500/20 px-1 rounded">~/.config/antigravity-proxy/config.json</code>
                 </div>
             </div>
 
-            <!-- Manual Reload -->
+            <!-- Security & Advanced -->
             <div class="pt-6 border-t border-space-border/30">
-                <h4 class="text-sm font-bold text-white mb-4">Danger Zone / Advanced</h4>
-                <div class="flex items-center justify-between p-4 border border-space-border/50 rounded-lg bg-space-900/20">
-                    <div>
-                        <div class="font-medium text-gray-300 text-sm">Reload Account Config</div>
-                        <div class="text-xs text-gray-500">Force reload accounts.json from disk</div>
+                <h4 class="text-sm font-bold text-white mb-4" x-text="$store.global.t('dangerZone')">Danger Zone / Advanced</h4>
+
+                <div class="space-y-4">
+                    <!-- Change Password -->
+                    <div class="flex items-center justify-between p-4 border border-space-border/50 rounded-lg bg-space-900/20"
+                        x-data="{
+                            showPasswordDialog: false,
+                            oldPassword: '',
+                            newPassword: '',
+                            confirmPassword: '',
+                            async changePassword() {
+                                const store = Alpine.store('global');
+                                if (this.newPassword !== this.confirmPassword) {
+                                    store.showToast('Passwords do not match', 'error');
+                                    return;
+                                }
+                                if (this.newPassword.length < 6) {
+                                    store.showToast('Password must be at least 6 characters', 'error');
+                                    return;
+                                }
+                                try {
+                                    const { response, newPassword: updatedPassword } = await window.utils.request('/api/config/password', {
+                                        method: 'POST',
+                                        headers: { 'Content-Type': 'application/json' },
+                                        body: JSON.stringify({
+                                            oldPassword: this.oldPassword,
+                                            newPassword: this.newPassword
+                                        })
+                                    }, store.webuiPassword);
+
+                                    if (!response.ok) {
+                                        const data = await response.json();
+                                        throw new Error(data.error || 'Failed to change password');
+                                    }
+
+                                    // Update stored password
+                                    store.webuiPassword = this.newPassword;
+                                    store.showToast('Password changed successfully', 'success');
+                                    this.showPasswordDialog = false;
+                                    this.oldPassword = '';
+                                    this.newPassword = '';
+                                    this.confirmPassword = '';
+                                } catch (e) {
+                                    store.showToast('Failed to change password: ' + e.message, 'error');
+                                }
+                            }
+                        }">
+                        <div>
+                            <div class="font-medium text-gray-300 text-sm">Change WebUI Password</div>
+                            <div class="text-xs text-gray-500">Update the password for accessing this dashboard</div>
+                        </div>
+                        <button class="btn btn-sm btn-outline border-space-border hover:bg-yellow-500 hover:text-black hover:border-yellow-500 text-gray-400"
+                            @click="showPasswordDialog = true">
+                            Change Password
+                        </button>
+
+                        <!-- Password Dialog -->
+                        <div x-show="showPasswordDialog" class="fixed inset-0 bg-black/50 flex items-center justify-center z-[9999]" @click.self="showPasswordDialog = false">
+                            <div class="bg-space-900 border border-space-border rounded-lg p-6 max-w-md w-full mx-4" @click.stop>
+                                <h3 class="text-lg font-bold text-white mb-4">Change WebUI Password</h3>
+
+                                <div class="space-y-4">
+                                    <div class="form-control">
+                                        <label class="label">
+                                            <span class="label-text text-gray-300">Current Password</span>
+                                        </label>
+                                        <input type="password" x-model="oldPassword"
+                                            class="input input-sm input-bordered bg-space-800 border-space-border text-white w-full"
+                                            placeholder="Leave empty if no password set">
+                                    </div>
+
+                                    <div class="form-control">
+                                        <label class="label">
+                                            <span class="label-text text-gray-300">New Password</span>
+                                        </label>
+                                        <input type="password" x-model="newPassword"
+                                            class="input input-sm input-bordered bg-space-800 border-space-border text-white w-full"
+                                            placeholder="At least 6 characters">
+                                    </div>
+
+                                    <div class="form-control">
+                                        <label class="label">
+                                            <span class="label-text text-gray-300">Confirm New Password</span>
+                                        </label>
+                                        <input type="password" x-model="confirmPassword"
+                                            class="input input-sm input-bordered bg-space-800 border-space-border text-white w-full"
+                                            placeholder="Re-enter new password"
+                                            @keydown.enter="changePassword()">
+                                    </div>
+                                </div>
+
+                                <div class="flex justify-end gap-2 mt-6">
+                                    <button class="btn btn-sm btn-ghost text-gray-400" @click="showPasswordDialog = false; oldPassword = ''; newPassword = ''; confirmPassword = ''">Cancel</button>
+                                    <button class="btn btn-sm bg-neon-purple hover:bg-purple-600 border-none text-white" @click="changePassword()">
+                                        Change Password
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Reload Config -->
+                    <div class="flex items-center justify-between p-4 border border-space-border/50 rounded-lg bg-space-900/20">
+                        <div>
+                            <div class="font-medium text-gray-300 text-sm" x-text="$store.global.t('reloadConfigTitle')">Reload Account Config</div>
+                            <div class="text-xs text-gray-500" x-text="$store.global.t('reloadConfigDesc')">Force reload accounts.json from disk</div>
+                        </div>
+                        <button class="btn btn-sm btn-outline border-space-border hover:bg-white hover:text-black hover:border-white text-gray-400"
+                            @click="async () => {
+                                const store = Alpine.store('global');
+                                store.showToast(store.t('reloading'), 'info');
+                                try {
+                                    const { response, newPassword } = await window.utils.request('/api/accounts/reload', { method: 'POST' }, store.webuiPassword);
+                                    if (newPassword) store.webuiPassword = newPassword;
+                                    if (response.ok) {
+                                        store.showToast(store.t('reloaded'), 'success');
+                                        Alpine.store('data').fetchData();
+                                    } else {
+                                        throw new Error('Failed to reload');
+                                    }
+                                } catch (e) {
+                                    store.showToast(store.t('reloadFailed') + ': ' + e.message, 'error');
+                                }
+                            }"
+                            x-text="$store.global.t('reload')">
+                            Reload
+                        </button>
                     </div>
-                    <button class="btn btn-sm btn-outline border-space-border hover:bg-white hover:text-black hover:border-white text-gray-400"
-                        @click="Alpine.store('global').showToast('Reloading...', 'info'); fetch('/api/accounts/reload', {method: 'POST'}).then(() => Alpine.store('global').showToast('Reloaded', 'success'))">
-                        Reload
-                    </button>
                 </div>
             </div>
         </div>

src/account-manager/rate-limits.js

@@ -39,6 +39,9 @@ export function getAvailableAccounts(accounts, modelId = null) {
     return accounts.filter(acc => {
         if (acc.isInvalid) return false;
 
+        // WebUI: Skip disabled accounts
+        if (acc.enabled === false) return false;
+
         if (modelId && acc.modelRateLimits && acc.modelRateLimits[modelId]) {
             const limit = acc.modelRateLimits[modelId];
             if (limit.isRateLimited && limit.resetTime > Date.now()) {

src/account-manager/selection.js

@@ -19,6 +19,9 @@ import { clearExpiredLimits, getAvailableAccounts } from './rate-limits.js';
 function isAccountUsable(account, modelId) {
     if (!account || account.isInvalid) return false;
 
+    // WebUI: Skip disabled accounts
+    if (account.enabled === false) return false;
+
     if (modelId && account.modelRateLimits && account.modelRateLimits[modelId]) {
         const limit = account.modelRateLimits[modelId];
         if (limit.isRateLimited && limit.resetTime > Date.now()) {

src/account-manager/storage.js

@@ -27,6 +27,7 @@ export async function loadAccounts(configPath = ACCOUNT_CONFIG_PATH) {
         const accounts = (config.accounts || []).map(acc => ({
             ...acc,
             lastUsed: acc.lastUsed || null,
+            enabled: acc.enabled !== false, // Default to true if not specified
             // Reset invalid flag on startup - give accounts a fresh chance to refresh
             isInvalid: false,
             invalidReason: null,
@@ -107,6 +108,7 @@ export async function saveAccounts(configPath, accounts, settings, activeIndex)
             accounts: accounts.map(acc => ({
                 email: acc.email,
                 source: acc.source,
+                enabled: acc.enabled !== false, // Persist enabled state
                 dbPath: acc.dbPath || null,
                 refreshToken: acc.source === 'oauth' ? acc.refreshToken : undefined,
                 apiKey: acc.source === 'manual' ? acc.apiKey : undefined,

src/config.js

@@ -12,6 +12,8 @@ const DEFAULT_CONFIG = {
     retryBaseMs: 1000,
     retryMaxMs: 30000,
     persistTokenCache: false,
+    defaultCooldownMs: 60000,  // 1 minute
+    maxWaitBeforeErrorMs: 120000, // 2 minutes
     modelMapping: {}
 };
 

src/modules/usage-stats.js

@@ -0,0 +1,175 @@
+import fs from 'fs';
+import path from 'path';
+
+// Persistence path
+const DATA_DIR = path.join(process.cwd(), 'data');
+const HISTORY_FILE = path.join(DATA_DIR, 'usage-history.json');
+
+// In-memory storage
+// Structure: { "YYYY-MM-DDTHH:00:00.000Z": { "claude": { "model-name": count, "_subtotal": count }, "_total": count } }
+let history = {};
+let isDirty = false;
+
+/**
+ * Extract model family from model ID
+ * @param {string} modelId - The model identifier (e.g., "claude-opus-4-5-thinking")
+ * @returns {string} The family name (claude, gemini, or other)
+ */
+function getFamily(modelId) {
+    const lower = (modelId || '').toLowerCase();
+    if (lower.includes('claude')) return 'claude';
+    if (lower.includes('gemini')) return 'gemini';
+    return 'other';
+}
+
+/**
+ * Extract short model name (without family prefix)
+ * @param {string} modelId - The model identifier
+ * @param {string} family - The model family
+ * @returns {string} Short model name
+ */
+function getShortName(modelId, family) {
+    if (family === 'other') return modelId;
+    // Remove family prefix (e.g., "claude-opus-4-5" -> "opus-4-5")
+    return modelId.replace(new RegExp(`^${family}-`, 'i'), '');
+}
+
+/**
+ * Ensure data directory exists and load history
+ */
+function load() {
+    try {
+        if (!fs.existsSync(DATA_DIR)) {
+            fs.mkdirSync(DATA_DIR, { recursive: true });
+        }
+        if (fs.existsSync(HISTORY_FILE)) {
+            const data = fs.readFileSync(HISTORY_FILE, 'utf8');
+            history = JSON.parse(data);
+        }
+    } catch (err) {
+        console.error('[UsageStats] Failed to load history:', err);
+        history = {};
+    }
+}
+
+/**
+ * Save history to disk
+ */
+function save() {
+    if (!isDirty) return;
+    try {
+        fs.writeFileSync(HISTORY_FILE, JSON.stringify(history, null, 2));
+        isDirty = false;
+    } catch (err) {
+        console.error('[UsageStats] Failed to save history:', err);
+    }
+}
+
+/**
+ * Prune old data (keep last 30 days)
+ */
+function prune() {
+    const now = new Date();
+    const cutoff = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
+
+    let pruned = false;
+    Object.keys(history).forEach(key => {
+        if (new Date(key) < cutoff) {
+            delete history[key];
+            pruned = true;
+        }
+    });
+
+    if (pruned) isDirty = true;
+}
+
+/**
+ * Track a request by model ID using hierarchical structure
+ * @param {string} modelId - The specific model identifier
+ */
+function track(modelId) {
+    const now = new Date();
+    // Round down to nearest hour
+    now.setMinutes(0, 0, 0);
+    const key = now.toISOString();
+
+    if (!history[key]) {
+        history[key] = { _total: 0 };
+    }
+
+    const hourData = history[key];
+    const family = getFamily(modelId);
+    const shortName = getShortName(modelId, family);
+
+    // Initialize family object if needed
+    if (!hourData[family]) {
+        hourData[family] = { _subtotal: 0 };
+    }
+
+    // Increment model-specific count
+    hourData[family][shortName] = (hourData[family][shortName] || 0) + 1;
+
+    // Increment family subtotal
+    hourData[family]._subtotal = (hourData[family]._subtotal || 0) + 1;
+
+    // Increment global total
+    hourData._total = (hourData._total || 0) + 1;
+
+    isDirty = true;
+}
+
+/**
+ * Setup Express Middleware
+ * @param {import('express').Application} app
+ */
+function setupMiddleware(app) {
+    load();
+
+    // Auto-save every minute
+    setInterval(() => {
+        save();
+        prune();
+    }, 60 * 1000);
+
+    // Save on exit
+    process.on('SIGINT', () => { save(); process.exit(); });
+    process.on('SIGTERM', () => { save(); process.exit(); });
+
+    // Request interceptor
+    // Track both Anthropic (/v1/messages) and OpenAI compatible (/v1/chat/completions) endpoints
+    const TRACKED_PATHS = ['/v1/messages', '/v1/chat/completions'];
+
+    app.use((req, res, next) => {
+        if (req.method === 'POST' && TRACKED_PATHS.includes(req.path)) {
+            const model = req.body?.model;
+            if (model) {
+                track(model);
+            }
+        }
+        next();
+    });
+}
+
+/**
+ * Setup API Routes
+ * @param {import('express').Application} app
+ */
+function setupRoutes(app) {
+    app.get('/api/stats/history', (req, res) => {
+        // Sort keys to ensure chronological order
+        const sortedKeys = Object.keys(history).sort();
+        const sortedData = {};
+        sortedKeys.forEach(key => {
+            sortedData[key] = history[key];
+        });
+        res.json(sortedData);
+    });
+}
+
+export default {
+    setupMiddleware,
+    setupRoutes,
+    track,
+    getFamily,
+    getShortName
+};

src/server.js

@@ -10,6 +10,7 @@ import path from 'path';
 import { fileURLToPath } from 'url';
 import { sendMessage, sendMessageStream, listModels, getModelQuotas } from './cloudcode/index.js';
 import { mountWebUI } from './webui/index.js';
+import { config } from './config.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -18,6 +19,7 @@ import { REQUEST_BODY_LIMIT } from './constants.js';
 import { AccountManager } from './account-manager/index.js';
 import { formatDuration } from './utils/helpers.js';
 import { logger } from './utils/logger.js';
+import usageStats from './modules/usage-stats.js';
 
 // Parse fallback flag directly from command line args to avoid circular dependency
 const args = process.argv.slice(2);
@@ -63,6 +65,9 @@ async function ensureInitialized() {
 app.use(cors());
 app.use(express.json({ limit: REQUEST_BODY_LIMIT }));
 
+// Setup usage statistics middleware
+usageStats.setupMiddleware(app);
+
 // Mount WebUI (optional web interface for account management)
 mountWebUI(app, __dirname, accountManager);
 
@@ -132,11 +137,11 @@ app.get('/health', async (req, res) => {
     try {
         await ensureInitialized();
         const start = Date.now();
-        
+
         // Get high-level status first
         const status = accountManager.getStatus();
         const allAccounts = accountManager.getAllAccounts();
-        
+
         // Fetch quotas for each account in parallel to get detailed model info
         const accountDetails = await Promise.allSettled(
             allAccounts.map(async (account) => {
@@ -423,6 +428,7 @@ app.get('/account-limits', async (req, res) => {
             timestamp: new Date().toLocaleString(),
             totalAccounts: allAccounts.length,
             models: sortedModels,
+            modelConfig: config.modelMapping || {},
             accounts: accountLimits.map(acc => ({
                 email: acc.email,
                 status: acc.status,
@@ -535,23 +541,19 @@ app.post('/v1/messages', async (req, res) => {
         await ensureInitialized();
 
 
-        const {
-            model,
-            messages,
-            max_tokens,
-            stream,
-            system,
-            tools,
-            tool_choice,
-            thinking,
-            top_p,
-            top_k,
-            temperature
-        } = req.body;
+        // Resolve model mapping if configured
+        let requestedModel = model || 'claude-3-5-sonnet-20241022';
+        const modelMapping = config.modelMapping || {};
+        if (modelMapping[requestedModel] && modelMapping[requestedModel].mapping) {
+            const targetModel = modelMapping[requestedModel].mapping;
+            logger.info(`[Server] Mapping model ${requestedModel} -> ${targetModel}`);
+            requestedModel = targetModel;
+        }
+
+        const modelId = requestedModel;
 
         // Optimistic Retry: If ALL accounts are rate-limited for this model, reset them to force a fresh check.
         // If we have some available accounts, we try them first.
-        const modelId = model || 'claude-3-5-sonnet-20241022';
         if (accountManager.isAllRateLimited(modelId)) {
             logger.warn(`[Server] All accounts rate-limited for ${modelId}. Resetting state for optimistic retry.`);
             accountManager.resetAllRateLimits();
@@ -570,7 +572,7 @@ app.post('/v1/messages', async (req, res) => {
 
         // Build the request object
         const request = {
-            model: model || 'claude-3-5-sonnet-20241022',
+            model: modelId,
             messages,
             max_tokens: max_tokens || 4096,
             stream,
@@ -676,6 +678,8 @@ app.post('/v1/messages', async (req, res) => {
 /**
  * Catch-all for unsupported endpoints
  */
+usageStats.setupRoutes(app);
+
 app.use('*', (req, res) => {
     if (logger.isDebugEnabled) {
         logger.debug(`[API] 404 Not Found: ${req.method} ${req.originalUrl}`);

src/webui/index.js

@@ -15,14 +15,87 @@
 import path from 'path';
 import express from 'express';
 import { getPublicConfig, saveConfig, config } from '../config.js';
-import { DEFAULT_PORT } from '../constants.js';
+import { DEFAULT_PORT, ACCOUNT_CONFIG_PATH } from '../constants.js';
 import { readClaudeConfig, updateClaudeConfig, getClaudeConfigPath } from '../utils/claude-config.js';
 import { logger } from '../utils/logger.js';
 import { getAuthorizationUrl, completeOAuthFlow } from '../auth/oauth.js';
+import { loadAccounts, saveAccounts } from '../account-manager/storage.js';
 
 // OAuth state storage (state -> { verifier, timestamp })
 const pendingOAuthStates = new Map();
 
+/**
+ * WebUI Helper Functions - Direct account manipulation
+ * These functions work around AccountManager's limited API by directly
+ * manipulating the accounts.json config file (non-invasive approach for PR)
+ */
+
+/**
+ * Set account enabled/disabled state
+ */
+async function setAccountEnabled(email, enabled) {
+    const { accounts, settings, activeIndex } = await loadAccounts(ACCOUNT_CONFIG_PATH);
+    const account = accounts.find(a => a.email === email);
+    if (!account) {
+        throw new Error(`Account ${email} not found`);
+    }
+    account.enabled = enabled;
+    await saveAccounts(ACCOUNT_CONFIG_PATH, accounts, settings, activeIndex);
+    logger.info(`[WebUI] Account ${email} ${enabled ? 'enabled' : 'disabled'}`);
+}
+
+/**
+ * Remove account from config
+ */
+async function removeAccount(email) {
+    const { accounts, settings, activeIndex } = await loadAccounts(ACCOUNT_CONFIG_PATH);
+    const index = accounts.findIndex(a => a.email === email);
+    if (index === -1) {
+        throw new Error(`Account ${email} not found`);
+    }
+    accounts.splice(index, 1);
+    // Adjust activeIndex if needed
+    const newActiveIndex = activeIndex >= accounts.length ? Math.max(0, accounts.length - 1) : activeIndex;
+    await saveAccounts(ACCOUNT_CONFIG_PATH, accounts, settings, newActiveIndex);
+    logger.info(`[WebUI] Account ${email} removed`);
+}
+
+/**
+ * Add new account to config
+ */
+async function addAccount(accountData) {
+    const { accounts, settings, activeIndex } = await loadAccounts(ACCOUNT_CONFIG_PATH);
+
+    // Check if account already exists
+    const existingIndex = accounts.findIndex(a => a.email === accountData.email);
+    if (existingIndex !== -1) {
+        // Update existing account
+        accounts[existingIndex] = {
+            ...accounts[existingIndex],
+            ...accountData,
+            enabled: true,
+            isInvalid: false,
+            invalidReason: null,
+            addedAt: accounts[existingIndex].addedAt || new Date().toISOString()
+        };
+        logger.info(`[WebUI] Account ${accountData.email} updated`);
+    } else {
+        // Add new account
+        accounts.push({
+            ...accountData,
+            enabled: true,
+            isInvalid: false,
+            invalidReason: null,
+            modelRateLimits: {},
+            lastUsed: null,
+            addedAt: new Date().toISOString()
+        });
+        logger.info(`[WebUI] Account ${accountData.email} added`);
+    }
+
+    await saveAccounts(ACCOUNT_CONFIG_PATH, accounts, settings, activeIndex);
+}
+
 /**
  * Auth Middleware - Optional password protection for WebUI
  * Password can be set via WEBUI_PASSWORD env var or config.json
@@ -114,7 +187,11 @@ export function mountWebUI(app, dirname, accountManager) {
                 return res.status(400).json({ status: 'error', error: 'enabled must be a boolean' });
             }
 
-            accountManager.setAccountEnabled(email, enabled);
+            await setAccountEnabled(email, enabled);
+
+            // Reload AccountManager to pick up changes
+            await accountManager.initialize();
+
             res.json({
                 status: 'ok',
                 message: `Account ${email} ${enabled ? 'enabled' : 'disabled'}`
@@ -130,7 +207,11 @@ export function mountWebUI(app, dirname, accountManager) {
     app.delete('/api/accounts/:email', async (req, res) => {
         try {
             const { email } = req.params;
-            accountManager.removeAccount(email);
+            await removeAccount(email);
+
+            // Reload AccountManager to pick up changes
+            await accountManager.initialize();
+
             res.json({
                 status: 'ok',
                 message: `Account ${email} removed`
@@ -145,7 +226,9 @@ export function mountWebUI(app, dirname, accountManager) {
      */
     app.post('/api/accounts/reload', async (req, res) => {
         try {
-            await accountManager.reloadAccounts();
+            // Reload AccountManager from disk
+            await accountManager.initialize();
+
             const status = accountManager.getStatus();
             res.json({
                 status: 'ok',
@@ -183,7 +266,7 @@ export function mountWebUI(app, dirname, accountManager) {
      */
     app.post('/api/config', (req, res) => {
         try {
-            const { debug, logLevel, maxRetries, retryBaseMs, retryMaxMs, persistTokenCache } = req.body;
+            const { debug, logLevel, maxRetries, retryBaseMs, retryMaxMs, persistTokenCache, defaultCooldownMs, maxWaitBeforeErrorMs } = req.body;
 
             // Only allow updating specific fields (security)
             const updates = {};
@@ -203,6 +286,12 @@ export function mountWebUI(app, dirname, accountManager) {
             if (typeof persistTokenCache === 'boolean') {
                 updates.persistTokenCache = persistTokenCache;
             }
+            if (typeof defaultCooldownMs === 'number' && defaultCooldownMs >= 1000 && defaultCooldownMs <= 300000) {
+                updates.defaultCooldownMs = defaultCooldownMs;
+            }
+            if (typeof maxWaitBeforeErrorMs === 'number' && maxWaitBeforeErrorMs >= 0 && maxWaitBeforeErrorMs <= 600000) {
+                updates.maxWaitBeforeErrorMs = maxWaitBeforeErrorMs;
+            }
 
             if (Object.keys(updates).length === 0) {
                 return res.status(400).json({
@@ -232,6 +321,48 @@ export function mountWebUI(app, dirname, accountManager) {
         }
     });
 
+    /**
+     * POST /api/config/password - Change WebUI password
+     */
+    app.post('/api/config/password', (req, res) => {
+        try {
+            const { oldPassword, newPassword } = req.body;
+
+            // Validate input
+            if (!newPassword || typeof newPassword !== 'string') {
+                return res.status(400).json({
+                    status: 'error',
+                    error: 'New password is required'
+                });
+            }
+
+            // If current password exists, verify old password
+            if (config.webuiPassword && config.webuiPassword !== oldPassword) {
+                return res.status(403).json({
+                    status: 'error',
+                    error: 'Invalid current password'
+                });
+            }
+
+            // Save new password
+            const success = saveConfig({ webuiPassword: newPassword });
+
+            if (success) {
+                // Update in-memory config
+                config.webuiPassword = newPassword;
+                res.json({
+                    status: 'ok',
+                    message: 'Password changed successfully'
+                });
+            } else {
+                throw new Error('Failed to save password to config file');
+            }
+        } catch (error) {
+            logger.error('[WebUI] Error changing password:', error);
+            res.status(500).json({ status: 'error', error: error.message });
+        }
+    });
+
     /**
      * GET /api/settings - Get runtime settings
      */
@@ -427,24 +558,28 @@ export function mountWebUI(app, dirname, accountManager) {
             const accountData = await completeOAuthFlow(code, storedState.verifier);
 
             // Add or update the account
-            accountManager.addAccount({
+            await addAccount({
                 email: accountData.email,
                 refreshToken: accountData.refreshToken,
                 projectId: accountData.projectId,
                 source: 'oauth'
             });
 
+            // Reload AccountManager to pick up the new account
+            await accountManager.initialize();
+
             // Return a simple HTML page that closes itself or redirects
             res.send(`
                 <!DOCTYPE html>
                 <html>
                 <head>
                     <title>Authentication Successful</title>
+                    <link rel="stylesheet" href="/css/style.css">
                     <style>
                         body {
-                            font-family: system-ui, -apple-system, sans-serif;
-                            background: #09090b;
-                            color: #e4e4e7;
+                            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+                            background-color: var(--color-space-950);
+                            color: var(--color-text-main);
                             display: flex;
                             justify-content: center;
                             align-items: center;
@@ -452,7 +587,7 @@ export function mountWebUI(app, dirname, accountManager) {
                             margin: 0;
                             flex-direction: column;
                         }
-                        h1 { color: #22c55e; }
+                        h1 { color: var(--color-neon-green); }
                     </style>
                 </head>
                 <body>
@@ -479,14 +614,16 @@ export function mountWebUI(app, dirname, accountManager) {
                 <html>
                 <head>
                     <title>Authentication Failed</title>
+                    <link rel="stylesheet" href="/css/style.css">
                     <style>
                         body {
-                            font-family: system-ui, -apple-system, sans-serif;
-                            background: #09090b;
-                            color: #ef4444;
+                            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+                            background-color: var(--color-space-950);
+                            color: var(--color-text-main);
                             text-align: center;
                             padding: 50px;
                         }
+                        h1 { color: var(--color-neon-red); }
                     </style>
                 </head>
                 <body>