feat(webui): refactor settings architecture and achieve full i18n coverage

public/css/style.css

@@ -157,3 +157,75 @@
 .standard-table tbody tr {
     @apply hover:bg-white/5 transition-colors border-b border-space-border/30 last:border-0;
 }
+
+/* Custom Range Slider */
+.custom-range {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    height: 6px;
+    background: var(--color-space-800);
+    border-radius: 999px;
+    outline: none;
+    cursor: pointer;
+    position: relative;
+    background-image: linear-gradient(to right, var(--range-color) 0%, var(--range-color) 100%);
+    background-repeat: no-repeat;
+    background-size: 0% 100%;
+}
+
+.custom-range::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: #ffffff;
+    box-shadow: 0 0 10px var(--range-color-glow);
+    cursor: pointer;
+    margin-top: -6px;
+    transition: transform 0.1s ease, box-shadow 0.2s ease;
+}
+
+.custom-range::-webkit-slider-thumb:hover {
+    transform: scale(1.1);
+    box-shadow: 0 0 15px var(--range-color-glow);
+}
+
+.custom-range::-moz-range-thumb {
+    width: 18px;
+    height: 18px;
+    border: none;
+    border-radius: 50%;
+    background: #ffffff;
+    box-shadow: 0 0 10px var(--range-color-glow);
+    cursor: pointer;
+    transition: transform 0.1s ease, box-shadow 0.2s ease;
+}
+
+.custom-range::-moz-range-thumb:hover {
+    transform: scale(1.1);
+    box-shadow: 0 0 15px var(--range-color-glow);
+}
+
+/* Color Variants */
+.custom-range-purple {
+    --range-color: var(--color-neon-purple);
+    --range-color-glow: rgba(168, 85, 247, 0.5);
+}
+.custom-range-green {
+    --range-color: var(--color-neon-green);
+    --range-color-glow: rgba(34, 197, 94, 0.5);
+}
+.custom-range-cyan {
+    --range-color: var(--color-neon-cyan);
+    --range-color-glow: rgba(6, 182, 212, 0.5);
+}
+.custom-range-yellow {
+    --range-color: var(--color-neon-yellow);
+    --range-color-glow: rgba(234, 179, 8, 0.5);
+}
+.custom-range-accent {
+    --range-color: var(--color-neon-cyan); /* Default accent to cyan if needed, or match DaisyUI */
+    --range-color-glow: rgba(6, 182, 212, 0.5);
+}

public/index.html

@@ -298,6 +298,8 @@
     <script src="js/components/account-manager.js"></script>
     <script src="js/components/claude-config.js"></script>
     <script src="js/components/logs-viewer.js"></script>
+    <script src="js/components/server-config.js"></script>
+    <script src="js/components/model-manager.js"></script>
     <!-- 4. App (registers Alpine components from window.Components) -->
     <script src="app.js"></script>
 </body>

public/js/components/dashboard.js

@@ -573,18 +573,19 @@ window.Components.dashboard = () => ({
 
             const familyColor = familyColors[family] || familyColors['unknown'];
 
-            // Get translation keys if available, otherwise capitalize
+            // Get translation keys
-            const familyName = family.charAt(0).toUpperCase() + family.slice(1);
             const store = Alpine.store('global');
+            const familyKey = 'family' + family.charAt(0).toUpperCase() + family.slice(1);
+            const familyName = store.t(familyKey);
 
             // Labels using translations if possible
             const activeLabel = family === 'claude' ? store.t('claudeActive') :
                               family === 'gemini' ? store.t('geminiActive') :
-                              `${familyName} Active`;
+                              `${familyName} ${store.t('activeSuffix')}`;
 
             const depletedLabel = family === 'claude' ? store.t('claudeEmpty') :
                                 family === 'gemini' ? store.t('geminiEmpty') :
-                                `${familyName} Depleted`;
+                                `${familyName} ${store.t('depleted')}`;
 
             // Active segment
             data.push(activeVal);

public/js/components/model-manager.js

@@ -0,0 +1,43 @@
+/**
+ * Model Manager Component
+ * Handles model configuration (pinning, hiding, aliasing, mapping)
+ * Registers itself to window.Components for Alpine.js to consume
+ */
+window.Components = window.Components || {};
+
+window.Components.modelManager = () => ({
+    init() {
+        // Component is ready
+    },
+
+    /**
+     * Update model configuration with authentication
+     * @param {string} modelId - The model ID to update
+     * @param {object} configUpdates - Configuration updates (pinned, hidden, alias, mapping)
+     */
+    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');
+        }
+    }
+});

public/js/components/server-config.js

@@ -0,0 +1,229 @@
+/**
+ * Server Config Component
+ * Registers itself to window.Components for Alpine.js to consume
+ */
+window.Components = window.Components || {};
+
+window.Components.serverConfig = () => ({
+    serverConfig: {},
+    loading: false,
+    advancedExpanded: false,
+    debounceTimers: {}, // Store debounce timers for each config field
+
+    init() {
+        // Initial fetch if this is the active sub-tab
+        if (this.activeTab === 'server') {
+            this.fetchServerConfig();
+        }
+
+        // Watch local activeTab (from parent settings scope)
+        this.$watch('activeTab', (tab) => {
+            if (tab === 'server') {
+                this.fetchServerConfig();
+            }
+        });
+    },
+
+    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);
+        }
+    },
+
+
+
+    // Password management
+    passwordDialog: {
+        show: false,
+        oldPassword: '',
+        newPassword: '',
+        confirmPassword: ''
+    },
+
+    showPasswordDialog() {
+        this.passwordDialog = {
+            show: true,
+            oldPassword: '',
+            newPassword: '',
+            confirmPassword: ''
+        };
+    },
+
+    hidePasswordDialog() {
+        this.passwordDialog = {
+            show: false,
+            oldPassword: '',
+            newPassword: '',
+            confirmPassword: ''
+        };
+    },
+
+    async changePassword() {
+        const store = Alpine.store('global');
+        const { oldPassword, newPassword, confirmPassword } = this.passwordDialog;
+
+        if (newPassword !== confirmPassword) {
+            store.showToast(store.t('passwordsNotMatch'), 'error');
+            return;
+        }
+        if (newPassword.length < 6) {
+            store.showToast(store.t('passwordTooShort'), 'error');
+            return;
+        }
+
+        try {
+            const { response } = await window.utils.request('/api/config/password', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ oldPassword, 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 = newPassword;
+            store.showToast('Password changed successfully', 'success');
+            this.hidePasswordDialog();
+        } catch (e) {
+            store.showToast('Failed to change password: ' + e.message, 'error');
+        }
+    },
+
+    // Toggle Debug Mode with instant save
+    async toggleDebug(enabled) {
+        const store = Alpine.store('global');
+
+        // Optimistic update
+        const previousValue = this.serverConfig.debug;
+        this.serverConfig.debug = enabled;
+
+        try {
+            const { response, newPassword } = await window.utils.request('/api/config', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ debug: enabled })
+            }, store.webuiPassword);
+
+            if (newPassword) store.webuiPassword = newPassword;
+
+            const data = await response.json();
+            if (data.status === 'ok') {
+                const status = enabled ? 'enabled' : 'disabled';
+                store.showToast(`Debug mode ${status}`, 'success');
+                await this.fetchServerConfig(); // Confirm server state
+            } else {
+                throw new Error(data.error || 'Failed to update debug mode');
+            }
+        } catch (e) {
+            // Rollback on error
+            this.serverConfig.debug = previousValue;
+            store.showToast('Failed to update debug mode: ' + e.message, 'error');
+        }
+    },
+
+    // Toggle Token Cache with instant save
+    async toggleTokenCache(enabled) {
+        const store = Alpine.store('global');
+
+        // Optimistic update
+        const previousValue = this.serverConfig.persistTokenCache;
+        this.serverConfig.persistTokenCache = enabled;
+
+        try {
+            const { response, newPassword } = await window.utils.request('/api/config', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ persistTokenCache: enabled })
+            }, store.webuiPassword);
+
+            if (newPassword) store.webuiPassword = newPassword;
+
+            const data = await response.json();
+            if (data.status === 'ok') {
+                const status = enabled ? 'enabled' : 'disabled';
+                store.showToast(`Token cache ${status}`, 'success');
+                await this.fetchServerConfig(); // Confirm server state
+            } else {
+                throw new Error(data.error || 'Failed to update token cache');
+            }
+        } catch (e) {
+            // Rollback on error
+            this.serverConfig.persistTokenCache = previousValue;
+            store.showToast('Failed to update token cache: ' + e.message, 'error');
+        }
+    },
+
+    // Generic debounced save method for numeric configs
+    async saveConfigField(fieldName, value, displayName) {
+        const store = Alpine.store('global');
+
+        // Clear existing timer for this field
+        if (this.debounceTimers[fieldName]) {
+            clearTimeout(this.debounceTimers[fieldName]);
+        }
+
+        // Optimistic update
+        const previousValue = this.serverConfig[fieldName];
+        this.serverConfig[fieldName] = parseInt(value);
+
+        // Set new timer
+        this.debounceTimers[fieldName] = setTimeout(async () => {
+            try {
+                const payload = {};
+                payload[fieldName] = parseInt(value);
+
+                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;
+
+                const data = await response.json();
+                if (data.status === 'ok') {
+                    store.showToast(`${displayName} updated to ${value}`, 'success');
+                    await this.fetchServerConfig(); // Confirm server state
+                } else {
+                    throw new Error(data.error || `Failed to update ${displayName}`);
+                }
+            } catch (e) {
+                // Rollback on error
+                this.serverConfig[fieldName] = previousValue;
+                store.showToast(`Failed to update ${displayName}: ` + e.message, 'error');
+            }
+        }, 500); // 500ms debounce
+    },
+
+    // Individual toggle methods for each Advanced Tuning field
+    toggleMaxRetries(value) {
+        this.saveConfigField('maxRetries', value, 'Max Retries');
+    },
+
+    toggleRetryBaseMs(value) {
+        this.saveConfigField('retryBaseMs', value, 'Retry Base Delay');
+    },
+
+    toggleRetryMaxMs(value) {
+        this.saveConfigField('retryMaxMs', value, 'Retry Max Delay');
+    },
+
+    toggleDefaultCooldownMs(value) {
+        this.saveConfigField('defaultCooldownMs', value, 'Default Cooldown');
+    },
+
+    toggleMaxWaitBeforeErrorMs(value) {
+        this.saveConfigField('maxWaitBeforeErrorMs', value, 'Max Wait Threshold');
+    }
+});

public/js/store.js

@@ -167,6 +167,9 @@ document.addEventListener('alpine:init', () => {
                 configSaved: "Configuration Saved",
                 enterPassword: "Enter Web UI Password:",
                 ready: "READY",
+                depleted: "Depleted",
+                timeH: "H",
+                timeM: "M",
                 familyClaude: "Claude",
                 familyGemini: "Gemini",
                 familyOther: "Other",
@@ -176,6 +179,43 @@ document.addEventListener('alpine:init', () => {
                 logLevelSuccess: "SUCCESS",
                 logLevelWarn: "WARN",
                 logLevelError: "ERR",
+                totalColon: "Total:",
+                todayColon: "Today:",
+                hour1Colon: "1H:",
+                smart: "Smart",
+                smartTitle: "Select Top 5 most used models (24h)",
+                activeCount: "{count} Active",
+                allCaps: "ALL",
+                claudeCaps: "CLAUDE",
+                geminiCaps: "GEMINI",
+                modelMapping: "Mapping (Target Model ID)",
+                systemInfo: "System Information",
+                refresh: "Refresh",
+                runtimeConfig: "Runtime Configuration",
+                debugDesc: "Enable detailed logging (See Logs tab)",
+                networkRetry: "Network Retry Settings",
+                maxRetries: "Max Retries",
+                retryBaseDelay: "Retry Base Delay (ms)",
+                retryMaxDelay: "Retry Max Delay (ms)",
+                persistTokenCache: "Persist Token Cache",
+                persistTokenDesc: "Save OAuth tokens to disk for faster restarts",
+                rateLimiting: "Account Rate Limiting & Timeouts",
+                defaultCooldown: "Default Cooldown Time",
+                maxWaitThreshold: "Max Wait Threshold (Sticky)",
+                maxWaitDesc: "Maximum time to wait for a sticky account to reset before failing or switching.",
+                saveConfigServer: "Save Configuration",
+                serverRestartAlert: "Some changes may require server restart. Config is saved to {path}",
+                changePassword: "Change WebUI Password",
+                changePasswordDesc: "Update the password for accessing this dashboard",
+                currentPassword: "Current Password",
+                newPassword: "New Password",
+                confirmNewPassword: "Confirm New Password",
+                passwordEmptyDesc: "Leave empty if no password set",
+                passwordLengthDesc: "At least 6 characters",
+                passwordConfirmDesc: "Re-enter new password",
+                cancel: "Cancel",
+                passwordsNotMatch: "Passwords do not match",
+                passwordTooShort: "Password must be at least 6 characters",
             },
             zh: {
                 dashboard: "仪表盘",
@@ -332,6 +372,9 @@ document.addEventListener('alpine:init', () => {
                 configSaved: "配置已保存",
                 enterPassword: "请输入 Web UI 密码：",
                 ready: "就绪",
+                depleted: "已耗尽",
+                timeH: "时",
+                timeM: "分",
                 familyClaude: "Claude 系列",
                 familyGemini: "Gemini 系列",
                 familyOther: "其他系列",
@@ -341,6 +384,43 @@ document.addEventListener('alpine:init', () => {
                 logLevelSuccess: "成功",
                 logLevelWarn: "警告",
                 logLevelError: "错误",
+                totalColon: "总计:",
+                todayColon: "今日:",
+                hour1Colon: "1小时:",
+                smart: "智能选择",
+                smartTitle: "自动选择过去 24 小时最常用的 5 个模型",
+                activeCount: "{count} 活跃",
+                allCaps: "全部",
+                claudeCaps: "CLAUDE",
+                geminiCaps: "GEMINI",
+                modelMapping: "映射 (目标模型 ID)",
+                systemInfo: "系统信息",
+                refresh: "刷新",
+                runtimeConfig: "运行时配置",
+                debugDesc: "启用详细日志记录 (见运行日志)",
+                networkRetry: "网络重试设置",
+                maxRetries: "最大重试次数",
+                retryBaseDelay: "重试基础延迟 (毫秒)",
+                retryMaxDelay: "重试最大延迟 (毫秒)",
+                persistTokenCache: "持久化令牌缓存",
+                persistTokenDesc: "将 OAuth 令牌保存到磁盘以实现快速重启",
+                rateLimiting: "账号限流与超时",
+                defaultCooldown: "默认冷却时间",
+                maxWaitThreshold: "最大等待阈值 (粘性会话)",
+                maxWaitDesc: "粘性账号在失败或切换前等待重置的最长时间。",
+                saveConfigServer: "保存配置",
+                serverRestartAlert: "部分更改可能需要重启服务器。配置已保存至 {path}",
+                changePassword: "修改 WebUI 密码",
+                changePasswordDesc: "更新访问此仪表盘的密码",
+                currentPassword: "当前密码",
+                newPassword: "新密码",
+                confirmNewPassword: "确认新密码",
+                passwordEmptyDesc: "如果未设置密码请留空",
+                passwordLengthDesc: "至少 6 个字符",
+                passwordConfirmDesc: "请再次输入新密码",
+                cancel: "取消",
+                passwordsNotMatch: "密码不匹配",
+                passwordTooShort: "密码至少需要 6 个字符",
             }
         },
 

public/js/utils.js

@@ -37,8 +37,12 @@ window.utils = {
         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`;
+        const hSuffix = store ? store.t('timeH') : 'H';
+        const mSuffix = store ? store.t('timeM') : 'M';
+
+        if (hrs > 0) return `${hrs}${hSuffix} ${mins % 60}${mSuffix}`;
+        return `${mins}${mSuffix}`;
     },
 
     getThemeColor(name) {

public/views/accounts.html

@@ -9,6 +9,14 @@
                 Manage OAuth tokens and session states
             </p>
         </div>
+        <div class="flex items-center gap-2">
+            <button class="btn btn-sm btn-outline border-space-border text-gray-400 hover:text-white hover:border-white transition-all gap-2"
+                @click="reloadAccounts()">
+                <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="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>
+                <span x-text="$store.global.t('reload')">Reload</span>
+            </button>
             <button class="btn bg-neon-purple hover:bg-purple-600 border-none text-white btn-sm gap-2 shadow-lg shadow-neon-purple/20"
                 onclick="document.getElementById('add_account_modal').showModal()">
                 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -17,6 +25,7 @@
                 <span x-text="$store.global.t('addNode')">Add Node</span>
             </button>
         </div>
+    </div>
 
     <!-- Table Container -->
     <div class="bg-space-900/40 border border-space-border/30 rounded-xl overflow-hidden backdrop-blur-sm">

public/views/dashboard.html

@@ -74,14 +74,14 @@
                         <div class="flex items-center gap-1.5 truncate">
                             <div class="w-1.5 h-1.5 rounded-full bg-neon-purple shadow-[0_0_4px_rgba(168,85,247,0.4)] flex-shrink-0">
                             </div>
-                            <span class="truncate">Claude</span>
+                            <span class="truncate" x-text="$store.global.t('familyClaude')">Claude</span>
                         </div>
                     </div>
                     <div class="flex items-center justify-between text-[10px] text-gray-400">
                         <div class="flex items-center gap-1.5 truncate">
                             <div class="w-1.5 h-1.5 rounded-full bg-neon-green shadow-[0_0_4px_rgba(34,197,94,0.4)] flex-shrink-0">
                             </div>
-                            <span class="truncate">Gemini</span>
+                            <span class="truncate" x-text="$store.global.t('familyGemini')">Gemini</span>
                         </div>
                     </div>
                 </div>
@@ -111,15 +111,15 @@
                 <!-- Usage Stats Pills -->
                 <div class="flex flex-wrap gap-2 text-[10px] font-mono">
                     <div class="px-2 py-1 rounded bg-space-800 border border-space-border/50 whitespace-nowrap">
-                        <span class="text-gray-500">Total:</span>
+                        <span class="text-gray-500" x-text="$store.global.t('totalColon')">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 whitespace-nowrap">
-                        <span class="text-gray-500">Today:</span>
+                        <span class="text-gray-500" x-text="$store.global.t('todayColon')">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 whitespace-nowrap">
-                        <span class="text-gray-500">1H:</span>
+                        <span class="text-gray-500" x-text="$store.global.t('hour1Colon')">1H:</span>
                         <span class="text-neon-green ml-1" x-text="usageStats.thisHour"></span>
                     </div>
                 </div>
@@ -148,7 +148,7 @@
                             <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>
+                        <span x-text="$store.global.t('filter') + ' (' + getSelectedCount() + ')'">Filter (0/0)</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" />
@@ -170,12 +170,7 @@
                                 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)">
+                                    :title="$store.global.t('smartTitle')" x-text="$store.global.t('smart')">
-                                    <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>
@@ -199,8 +194,8 @@
                                             @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"
+                                        <span class="text-xs text-gray-300 font-medium group-hover:text-white"
-                                            x-text="family"></span>
+                                            x-text="$store.global.t('family' + family.charAt(0).toUpperCase() + family.slice(1))"></span>
                                         <span class="text-[10px] text-gray-600 ml-auto"
                                             x-text="'(' + (modelTree[family] || []).length + ')'"></span>
                                     </label>
@@ -210,7 +205,7 @@
                                         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>
+                                        <span x-text="$store.global.t('family' + family.charAt(0).toUpperCase() + family.slice(1))"></span>
                                     </div>
 
                                     <!-- Models in Family -->
@@ -254,7 +249,7 @@
                 <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>
+                        <span class="text-gray-400" x-text="$store.global.t('family' + family.charAt(0).toUpperCase() + family.slice(1))"></span>
                     </div>
                 </template>
             </template>
@@ -319,15 +314,15 @@
                 <button
                     class="join-item btn btn-sm h-full flex-1 md:flex-none px-4 md:px-6 border-space-border bg-space-800 text-gray-400 hover:text-white hover:bg-space-700 hover:border-space-600 transition-all font-medium text-xs tracking-wide whitespace-nowrap"
                     :class="{'bg-neon-purple text-white border-neon-purple hover:bg-purple-600 hover:border-purple-500': $store.data.filters.family === 'all'}"
-                    @click="$store.data.filters.family = 'all'; $store.data.computeQuotaRows()">ALL</button>
+                    @click="$store.data.filters.family = 'all'; $store.data.computeQuotaRows()" x-text="$store.global.t('allCaps')">ALL</button>
                 <button
                     class="join-item btn btn-sm h-full flex-1 md:flex-none px-4 md:px-6 border-space-border bg-space-800 text-gray-400 hover:text-white hover:bg-space-700 hover:border-space-600 transition-all font-medium text-xs tracking-wide whitespace-nowrap"
                     :class="{'bg-neon-purple text-white border-neon-purple hover:bg-purple-600 hover:border-purple-500': $store.data.filters.family === 'claude'}"
-                    @click="$store.data.filters.family = 'claude'; $store.data.computeQuotaRows()">CLAUDE</button>
+                    @click="$store.data.filters.family = 'claude'; $store.data.computeQuotaRows()" x-text="$store.global.t('claudeCaps')">CLAUDE</button>
                 <button
                     class="join-item btn btn-sm h-full flex-1 md:flex-none px-4 md:px-6 border-space-border bg-space-800 text-gray-400 hover:text-white hover:bg-space-700 hover:border-space-600 transition-all font-medium text-xs tracking-wide whitespace-nowrap"
                     :class="{'bg-neon-purple text-white border-neon-purple hover:bg-purple-600 hover:border-purple-500': $store.data.filters.family === 'gemini'}"
-                    @click="$store.data.filters.family = 'gemini'; $store.data.computeQuotaRows()">GEMINI</button>
+                    @click="$store.data.filters.family = 'gemini'; $store.data.computeQuotaRows()" x-text="$store.global.t('geminiCaps')">GEMINI</button>
             </div>
         </div>
 
@@ -370,7 +365,8 @@
                         <td>
                             <div class="font-bold text-gray-200 group-hover:text-neon-purple transition-colors"
                                 x-text="row.modelId"></div>
-                            <div class="text-[10px] font-mono text-gray-500 uppercase" x-text="row.family">
+                            <div class="text-[10px] font-mono text-gray-500 uppercase"
+                                x-text="$store.global.t('family' + row.family.charAt(0).toUpperCase() + row.family.slice(1))">
                             </div>
                         </td>
                         <td>
@@ -392,7 +388,7 @@
                             <div class="flex items-center justify-end gap-3 pr-4">
                                 <div
                                     class="text-[10px] font-mono text-gray-500 hidden xl:block text-right leading-tight opacity-70">
-                                    <div x-text="row.quotaInfo.filter(q => q.pct > 0).length + ' Active'"></div>
+                                    <div x-text="$store.global.t('activeCount', {count: row.quotaInfo.filter(q => q.pct > 0).length})"></div>
                                 </div>
                                 <div class="flex flex-wrap gap-1 justify-end max-w-[200px]">
                                     <template x-for="q in row.quotaInfo" :key="q.fullEmail">

public/views/settings.html

@@ -1,31 +1,5 @@
 <div x-data="{
-    activeTab: 'ui',
+    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="glass-panel rounded-xl border border-space-border flex flex-col overflow-hidden">
@@ -64,7 +38,7 @@
             <button @click="activeTab = 'server'"
                 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>
+                <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 v4a2 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</span>
             </button>
         </div>
@@ -101,8 +75,9 @@
                         <span class="label-text-alt font-mono text-neon-purple"
                             x-text="$store.settings.refreshInterval + 's'"></span>
                     </label>
-                    <input type="range" min="10" max="300" class="range range-xs range-primary"
+                    <input type="range" min="10" max="300" class="custom-range custom-range-purple"
                         x-model="$store.settings.refreshInterval"
+                        :style="`background-size: ${($store.settings.refreshInterval - 10) / 2.9}% 100%`"
                         @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>
@@ -117,8 +92,9 @@
                         <span class="label-text-alt font-mono text-neon-purple"
                             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"
+                    <input type="range" min="500" max="5000" step="500" class="custom-range custom-range-purple"
                         x-model="$store.settings.logLimit"
+                        :style="`background-size: ${($store.settings.logLimit - 500) / 45}% 100%`"
                         @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>
@@ -131,37 +107,43 @@
 
             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <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="form-control bg-space-900/50 p-4 rounded-lg border transition-all duration-300 hover:border-neon-purple/50"
-                    :class="$store.settings.showExhausted ? 'border-neon-purple/50 bg-neon-purple/5 shadow-[0_0_15px_rgba(168,85,247,0.1)]' : 'border-space-border/50'"
+                    :class="$store.settings.showExhausted ? 'border-neon-purple/50 bg-neon-purple/5 shadow-[0_0_15px_rgba(168,85,247,0.1)]' : 'border-space-border/50'">
-                    @click="$store.settings.showExhausted = !$store.settings.showExhausted; $store.settings.saveSettings(true)">
+                    <div class="flex items-center justify-between">
-                    <label class="label cursor-pointer pointer-events-none"> <!-- pointer-events-none to prevent double toggle -->
                         <div class="flex flex-col gap-1">
                             <span class="label-text font-medium transition-colors"
                                 :class="$store.settings.showExhausted ? 'text-neon-purple' : 'text-gray-300'"
                                 x-text="$store.global.t('showExhausted')">Show Exhausted Models</span>
                             <span class="text-xs text-gray-500" x-text="$store.global.t('showExhaustedDesc')">Display models even if they have 0% remaining quota.</span>
                         </div>
-                        <input type="checkbox" class="toggle toggle-primary" x-model="$store.settings.showExhausted">
+                        <label class="relative inline-flex items-center cursor-pointer">
+                            <input type="checkbox" class="sr-only peer"
+                                :checked="$store.settings.showExhausted === true"
+                                @change="$store.settings.showExhausted = $event.target.checked; $store.settings.saveSettings(true)">
+                            <div class="w-9 h-5 bg-space-800 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-gray-600 after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-neon-purple peer-checked:after:bg-white"></div>
                         </label>
                     </div>
+                </div>
 
                 <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="form-control bg-space-900/50 p-4 rounded-lg border transition-all duration-300 hover:border-neon-green/50"
-                    :class="$store.settings.compact ? 'border-neon-green/50 bg-neon-green/5 shadow-[0_0_15px_rgba(34,197,94,0.1)]' : 'border-space-border/50'"
+                    :class="$store.settings.compact ? 'border-neon-green/50 bg-neon-green/5 shadow-[0_0_15px_rgba(34,197,94,0.1)]' : 'border-space-border/50'">
-                    @click="$store.settings.compact = !$store.settings.compact; $store.settings.saveSettings(true)">
+                    <div class="flex items-center justify-between">
-                    <label class="label cursor-pointer pointer-events-none">
                         <div class="flex flex-col gap-1">
                             <span class="label-text font-medium transition-colors"
                                 :class="$store.settings.compact ? 'text-neon-green' : 'text-gray-300'"
                                 x-text="$store.global.t('compactMode')">Compact Mode</span>
                             <span class="text-xs text-gray-500" x-text="$store.global.t('compactModeDesc')">Reduce padding in tables for higher information density.</span>
                         </div>
-                        <input type="checkbox" class="toggle toggle-secondary" x-model="$store.settings.compact">
+                        <label class="relative inline-flex items-center cursor-pointer">
+                            <input type="checkbox" class="sr-only peer"
+                                :checked="$store.settings.compact === true"
+                                @change="$store.settings.compact = $event.target.checked; $store.settings.saveSettings(true)">
+                            <div class="w-9 h-5 bg-space-800 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-gray-600 after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-neon-green peer-checked:after:bg-white"></div>
                         </label>
                     </div>
                 </div>
-
+            </div>
-            <!-- Save button removed (Auto-save enabled) -->
         </div>
 
         <!-- Tab 2: Claude CLI Configuration -->
@@ -363,14 +345,17 @@
             </div>
         </div>
 
-        <!-- Tab 2.5: Models Configuration -->
+        <!-- Tab 3: Models Configuration -->
-        <div x-show="activeTab === 'models'" class="space-y-6 max-w-3xl animate-fade-in">
+        <div x-show="activeTab === 'models'" x-data="window.Components.modelManager()" class="space-y-6 max-w-3xl animate-fade-in">
             <div class="flex items-center justify-between">
                 <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">
+                <div class="flex items-center gap-2">
-                    <label class="label cursor-pointer gap-2">
+                    <span class="text-xs text-gray-500" x-text="$store.global.t('showHidden')">Show Hidden Models</span>
-                        <span class="label-text text-xs text-gray-500" x-text="$store.global.t('showHidden')">Show Hidden Models</span>
+                    <label class="relative inline-flex items-center cursor-pointer">
-                        <input type="checkbox" class="toggle toggle-xs toggle-primary" x-model="$store.settings.showHiddenModels" @change="$store.settings.saveSettings(true)">
+                        <input type="checkbox" class="sr-only peer"
+                            :checked="$store.settings.showHiddenModels === true"
+                            @change="$store.settings.showHiddenModels = $event.target.checked; $store.settings.saveSettings(true)">
+                        <div class="w-8 h-[18px] bg-space-800 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-gray-600 after:rounded-full after:h-3.5 after:w-3.5 after:transition-all peer-checked:bg-neon-purple peer-checked:after:bg-white"></div>
                     </label>
                 </div>
             </div>
@@ -382,7 +367,7 @@
                         <tr>
                             <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 x-text="$store.global.t('modelMapping')">Mapping (Target Model ID)</th>
                             <th class="text-right pr-4" x-text="$store.global.t('actions')">Actions</th>
                         </tr>
                     </thead>
@@ -394,12 +379,10 @@
                                     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 },
                                     get isHidden() {
                                         if (this.config.hidden !== undefined) return this.config.hidden;
-                                        // Smart default: unknown models are hidden by default
                                         const family = $store.data.getModelFamily(modelId);
                                         return (family === 'other' || family === 'unknown');
                                     }
@@ -415,17 +398,10 @@
                                     <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-24"
-                                            @keydown.enter="
+                                            @keydown.enter="await updateModelConfig(modelId, { alias: newAlias }); isEditingAlias = false"
-                                                await updateModelConfig(modelId, { alias: newAlias });
+                                            @keydown.escape="newAlias = config.alias || ''; isEditingAlias = false">
-                                                isEditingAlias = false;
+                                        <button class="btn btn-xs btn-ghost btn-square text-green-500" @click="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="newAlias = config.alias || ''; 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>
-                                            @keydown.escape="isEditingAlias = false"
-                                        >
-                                        <button class="btn btn-xs btn-ghost btn-square text-green-500" @click="
-                                            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="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>
@@ -437,17 +413,10 @@
                                         <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="
+                                            @keydown.enter="await updateModelConfig(modelId, { mapping: newMapping }); isEditingMapping = false"
-                                                await updateModelConfig(modelId, { mapping: newMapping });
+                                            @keydown.escape="newMapping = config.mapping || ''; isEditingMapping = false">
-                                                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="newMapping = config.mapping || ''; 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>
-                                            @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">
@@ -457,11 +426,9 @@
                                             :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="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" />
                                             </svg>
-                                            <!-- Outline Icon when Unpinned -->
                                             <svg x-show="!isPinned" xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
                                             </svg>
@@ -484,9 +451,8 @@
                                 </td>
                             </tr>
                         </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" x-text="$store.global.t('noModels')">
+                            <td colspan="4" class="text-center py-8 text-gray-600 text-xs font-mono" x-text="$store.global.t('noModels')">
                                 NO MODELS DETECTED
                             </td>
                         </tr>
@@ -495,302 +461,219 @@
             </div>
         </div>
 
-        <!-- Tab 3: Server Info & Configuration -->
+        <!-- Tab 4: Server Configuration -->
-        <div x-show="activeTab === 'server'" x-data="{
+        <div x-show="activeTab === 'server'" x-data="window.Components.serverConfig()" class="space-y-6 max-w-2xl animate-fade-in pb-10">
-            serverConfig: {},
+            <!-- 🔐 Security Section -->
-            loading: false,
+            <div class="glass-panel p-6 border border-neon-yellow/20 bg-neon-yellow/5">
-            async fetchServerConfig() {
+                <div class="flex items-center justify-between">
-                const password = Alpine.store('global').webuiPassword;
+                    <div class="flex items-center gap-4">
-                try {
+                        <div class="w-10 h-10 rounded-lg bg-neon-yellow/10 flex items-center justify-center text-neon-yellow">
-                    const { response, newPassword } = await window.utils.request('/api/config', {}, password);
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    if (newPassword) Alpine.store('global').webuiPassword = newPassword;
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-                    if (!response.ok) throw new Error('Failed to fetch config');
+                            </svg>
-                    const data = await response.json();
+                        </div>
-                    this.serverConfig = data.config || {};
+                        <div>
-                } catch (e) {
+                            <h4 class="text-sm font-bold text-white mb-0.5" x-text="$store.global.t('changePassword')">WebUI Password</h4>
-                    console.error('Failed to fetch server config:', e);
+                            <p class="text-xs text-gray-500" x-text="$store.global.t('changePasswordDesc')">Authentication for accessing this dashboard</p>
-                }
+                        </div>
-            },
+                    </div>
-            async saveServerConfig() {
+                    <button class="btn btn-sm border-neon-yellow/30 bg-transparent text-neon-yellow hover:bg-neon-yellow hover:text-black transition-all gap-2"
-                this.loading = true;
+                        @click="showPasswordDialog()">
-                const store = Alpine.store('global');
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                // Ensure all numeric fields are properly typed
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
-                const payload = {
+                        </svg>
-                    debug: !!this.serverConfig.debug,
+                        <span x-text="$store.global.t('changePassword')">Change Password</span>
-                    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" 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" 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="divider border-space-border/50 text-xs uppercase text-gray-500 font-semibold">Runtime Configuration</div>
+            <!-- ⚡ Common Settings -->
+            <div class="space-y-3">
+                <div class="flex items-center gap-2 mb-1 px-1">
+                    <span class="text-[10px] uppercase text-gray-500 font-bold tracking-widest" x-text="$store.global.t('runtimeConfig')">Common Settings</span>
+                    <div class="h-px flex-1 bg-space-border/30"></div>
+                </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"
+                <div class="form-control glass-panel p-4 border border-space-border/50 hover:border-neon-purple/50 transition-all">
-                    :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'"
+                    <div class="flex items-center justify-between">
-                    @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"
+                            <span class="text-sm font-medium text-gray-200" :class="serverConfig.debug ? 'text-neon-purple' : ''" x-text="$store.global.t('debugMode')">Debug Mode</span>
-                                :class="serverConfig.debug ? 'text-neon-purple' : 'text-gray-300'">Debug Mode</span>
+                            <span class="text-[11px] text-gray-500" x-text="$store.global.t('debugDesc')">Detailed logging in the Logs tab</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 class="relative inline-flex items-center cursor-pointer">
+                            <input type="checkbox" class="sr-only peer"
+                                :checked="serverConfig.debug === true"
+                                @change="toggleDebug($el.checked)">
+                            <div class="w-9 h-5 bg-space-800 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-gray-600 after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-neon-purple peer-checked:after:bg-white"></div>
                         </label>
                     </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 -->
+                <!-- Token Cache -->
-                        <div class="form-control">
+                <div class="form-control glass-panel p-4 border border-space-border/50 hover:border-neon-green/50 transition-all">
-                            <label class="label">
+                    <div class="flex items-center justify-between">
-                                <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"
+                            <span class="text-sm font-medium text-gray-200" :class="serverConfig.persistTokenCache ? 'text-neon-green' : ''" x-text="$store.global.t('persistTokenCache')">Persist Token Cache</span>
-                                :class="serverConfig.persistTokenCache ? 'text-neon-green' : 'text-gray-300'">Persist Token Cache</span>
+                            <span class="text-[11px] text-gray-500" x-text="$store.global.t('persistTokenDesc')">Save OAuth tokens to disk for faster restarts</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 class="relative inline-flex items-center cursor-pointer">
+                            <input type="checkbox" class="sr-only peer"
+                                :checked="serverConfig.persistTokenCache === true"
+                                @change="toggleTokenCache($el.checked)">
+                            <div class="w-9 h-5 bg-space-800 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-gray-600 after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-neon-green peer-checked:after:bg-white"></div>
                         </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">
+            <!-- ▼ Advanced Tuning (Fixed Logic) -->
-                            <label class="label">
+            <div class="glass-panel border border-space-border/50 overflow-hidden">
-                                <span class="label-text text-gray-300">Max Wait Threshold (Sticky)</span>
+                <div class="flex items-center justify-between p-4 cursor-pointer hover:bg-white/5 transition-colors"
-                                <span class="label-text-alt font-mono text-neon-purple" x-text="Math.round((serverConfig.maxWaitBeforeErrorMs || 120000) / 1000) + 's'"></span>
+                    @click="advancedExpanded = !advancedExpanded">
-                            </label>
+                    <div class="flex items-center gap-3">
-                            <input type="range" min="0" max="600000" step="10000" class="range range-xs range-primary"
+                        <div class="w-8 h-8 rounded bg-space-800 flex items-center justify-center text-neon-cyan">
-                                x-model="serverConfig.maxWaitBeforeErrorMs">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <div class="w-full flex justify-between text-xs px-2 mt-2 text-gray-600 font-mono">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
-                                <span>0s</span>
+                            </svg>
-                                <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">
-                    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>
-
-            <!-- Security & Advanced -->
-            <div class="pt-6 border-t border-space-border/30">
-                <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>
+                            <span class="text-sm font-semibold text-gray-200" x-text="$store.global.t('dangerZone')">Advanced Tuning</span>
-                            <div class="text-xs text-gray-500">Update the password for accessing this dashboard</div>
+                            <span class="text-[10px] text-gray-600 block" x-text="$store.global.t('serverReadOnly')">Experienced users only</span>
+                        </div>
+                    </div>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-600 transition-transform duration-300"
+                        :class="advancedExpanded ? 'rotate-180' : ''" 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>
+                </div>
+
+                <div x-show="advancedExpanded" x-cloak class="p-5 pt-0 space-y-6">
+                    <div class="h-px bg-space-border/20 mb-4"></div>
+
+                    <!-- Network Retry Settings -->
+                    <div class="space-y-4">
+                        <div class="flex items-center gap-2 mb-2">
+                            <span class="text-[10px] text-gray-500 font-bold uppercase tracking-widest" x-text="$store.global.t('networkRetry')">Network Retry Settings</span>
+                        </div>
+
+                        <div class="form-control">
+                            <label class="label pt-0">
+                                <span class="label-text text-gray-400 text-xs" x-text="$store.global.t('maxRetries')">Max Retries</span>
+                                <span class="label-text-alt font-mono text-neon-purple text-xs font-semibold" x-text="serverConfig.maxRetries || 5"></span>
+                            </label>
+                            <input type="range" min="1" max="20" class="custom-range custom-range-purple"
+                                :value="serverConfig.maxRetries || 5"
+                                :style="`background-size: ${((serverConfig.maxRetries || 5) - 1) / 19 * 100}% 100%`"
+                                @input="toggleMaxRetries($event.target.value)">
+                        </div>
+
+                        <div class="grid grid-cols-2 gap-4">
+                            <div class="form-control">
+                                <label class="label pt-0">
+                                    <span class="label-text text-gray-400 text-xs" x-text="$store.global.t('retryBaseDelay')">Base Delay</span>
+                                    <span class="label-text-alt font-mono text-neon-green text-xs font-semibold"
+                                        x-text="((serverConfig.retryBaseMs || 1000) < 10000 ? (serverConfig.retryBaseMs || 1000) + 'ms' : Math.round((serverConfig.retryBaseMs || 1000) / 1000) + 's')"></span>
+                                </label>
+                                <input type="range" min="100" max="10000" step="100" class="custom-range custom-range-green"
+                                    :value="serverConfig.retryBaseMs || 1000"
+                                    :style="`background-size: ${((serverConfig.retryBaseMs || 1000) - 100) / 99}% 100%`"
+                                    @input="toggleRetryBaseMs($event.target.value)">
+                            </div>
+                            <div class="form-control">
+                                <label class="label pt-0">
+                                    <span class="label-text text-gray-400 text-xs" x-text="$store.global.t('retryMaxDelay')">Max Delay</span>
+                                    <span class="label-text-alt font-mono text-neon-green text-xs font-semibold"
+                                        x-text="Math.round((serverConfig.retryMaxMs || 30000) / 1000) + 's'"></span>
+                                </label>
+                                <input type="range" min="1000" max="120000" step="1000" class="custom-range custom-range-green"
+                                    :value="serverConfig.retryMaxMs || 30000"
+                                    :style="`background-size: ${((serverConfig.retryMaxMs || 30000) - 1000) / 1190}% 100%`"
+                                    @input="toggleRetryMaxMs($event.target.value)">
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Account Rate Limiting -->
+                    <div class="space-y-4 pt-2 border-t border-space-border/10">
+                        <div class="flex items-center gap-2 mb-2">
+                            <span class="text-[10px] text-gray-500 font-bold uppercase tracking-widest" x-text="$store.global.t('rateLimiting')">Rate Limiting & Timeouts</span>
+                        </div>
+
+                        <div class="form-control">
+                            <label class="label pt-0">
+                                <span class="label-text text-gray-400 text-xs" x-text="$store.global.t('defaultCooldown')">Default Cooldown</span>
+                                <span class="label-text-alt font-mono text-neon-cyan text-xs font-semibold"
+                                    x-text="Math.round((serverConfig.defaultCooldownMs || 60000) / 1000) + 's'"></span>
+                            </label>
+                            <input type="range" min="1000" max="300000" step="1000" class="custom-range custom-range-cyan"
+                                :value="serverConfig.defaultCooldownMs || 60000"
+                                :style="`background-size: ${((serverConfig.defaultCooldownMs || 60000) - 1000) / 2990}% 100%`"
+                                @input="toggleDefaultCooldownMs($event.target.value)">
+                        </div>
+
+                        <div class="form-control">
+                            <label class="label pt-0">
+                                <span class="label-text text-gray-400 text-xs" x-text="$store.global.t('maxWaitThreshold')">Max Wait (Sticky)</span>
+                                <span class="label-text-alt font-mono text-neon-cyan text-xs font-semibold"
+                                    x-text="((serverConfig.maxWaitBeforeErrorMs || 120000) >= 60000 ? Math.round((serverConfig.maxWaitBeforeErrorMs || 120000) / 60000) + 'm' : Math.round((serverConfig.maxWaitBeforeErrorMs || 120000) / 1000) + 's')"></span>
+                            </label>
+                            <input type="range" min="0" max="600000" step="10000" class="custom-range custom-range-cyan"
+                                :value="serverConfig.maxWaitBeforeErrorMs || 120000"
+                                :style="`background-size: ${(serverConfig.maxWaitBeforeErrorMs || 120000) / 6000}% 100%`"
+                                @input="toggleMaxWaitBeforeErrorMs($event.target.value)">
+                            <p class="text-[9px] text-gray-600 mt-1 leading-tight" x-text="$store.global.t('maxWaitDesc')">Maximum time to wait for a sticky account to reset before switching.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- ℹ️ Info Notice -->
+            <div class="flex items-center gap-3 text-xs text-gray-600 italic pt-2">
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <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" />
+                </svg>
+                <span x-text="$store.global.t('serverRestartAlert', {path: '~/.config/antigravity-proxy/config.json'})">All changes are saved automatically. Some settings may require server restart.</span>
             </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 x-show="passwordDialog.show" class="fixed inset-0 bg-black/50 flex items-center justify-center z-[9999]" @click.self="hidePasswordDialog()" x-cloak>
                 <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>
+                    <h3 class="text-lg font-bold text-white mb-4" x-text="$store.global.t('changePassword')">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>
+                                <span class="label-text text-gray-300" x-text="$store.global.t('currentPassword')">Current Password</span>
                             </label>
-                                        <input type="password" x-model="oldPassword"
+                            <input type="password" x-model="passwordDialog.oldPassword"
                                 class="input input-sm input-bordered bg-space-800 border-space-border text-white w-full"
-                                            placeholder="Leave empty if no password set">
+                                :placeholder="$store.global.t('passwordEmptyDesc')">
                         </div>
 
                         <div class="form-control">
                             <label class="label">
-                                            <span class="label-text text-gray-300">New Password</span>
+                                <span class="label-text text-gray-300" x-text="$store.global.t('newPassword')">New Password</span>
                             </label>
-                                        <input type="password" x-model="newPassword"
+                            <input type="password" x-model="passwordDialog.newPassword"
                                 class="input input-sm input-bordered bg-space-800 border-space-border text-white w-full"
-                                            placeholder="At least 6 characters">
+                                :placeholder="$store.global.t('passwordLengthDesc')">
                         </div>
 
                         <div class="form-control">
                             <label class="label">
-                                            <span class="label-text text-gray-300">Confirm New Password</span>
+                                <span class="label-text text-gray-300" x-text="$store.global.t('confirmNewPassword')">Confirm New Password</span>
                             </label>
-                                        <input type="password" x-model="confirmPassword"
+                            <input type="password" x-model="passwordDialog.confirmPassword"
                                 class="input input-sm input-bordered bg-space-800 border-space-border text-white w-full"
-                                            placeholder="Re-enter new password"
+                                :placeholder="$store.global.t('passwordConfirmDesc')"
                                 @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 btn-ghost text-gray-400" @click="hidePasswordDialog()" x-text="$store.global.t('cancel')">Cancel</button>
-                                    <button class="btn btn-sm bg-neon-purple hover:bg-purple-600 border-none text-white" @click="changePassword()">
+                        <button class="btn btn-sm bg-neon-purple hover:bg-purple-600 border-none text-white" @click="changePassword()" x-text="$store.global.t('changePassword')">
                             Change Password
                         </button>
                     </div>
@@ -798,36 +681,5 @@
             </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>
-                </div>
-            </div>
-        </div>
-
     </div>
 </div>