ai-account-switch 1.5.6 → 1.6.0

package/src/ui-server.js

@@ -99,6 +99,8 @@ class UIServer {
       this.handleExportAll(req, res);
     } else if (pathname === '/api/import' && req.method === 'POST') {
       this.handleImportAccounts(req, res);
+    } else if (pathname.startsWith('/api/accounts/') && pathname.endsWith('/check') && req.method === 'POST') {
+      this.handleCheckAccount(req, res, pathname);
     } else {
       res.writeHead(404, { 'Content-Type': 'application/json' });
       res.end(JSON.stringify({ error: 'Not found' }));
@@ -247,6 +249,146 @@ class UIServer {
     });
   }
 
+  handleCheckAccount(req, res, pathname) {
+    const name = decodeURIComponent(pathname.split('/api/accounts/')[1].replace('/check', ''));
+
+    const saveCheckResult = (status, error = null) => {
+      const account = this.config.getAccount(name);
+      if (account) {
+        account.lastCheck = {
+          status,
+          error,
+          timestamp: new Date().toISOString()
+        };
+        this.config.addAccount(name, account);
+      }
+    };
+
+    try {
+      const account = this.config.getAccount(name);
+      if (!account) {
+        res.writeHead(404, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: 'Account not found' }));
+        return;
+      }
+
+      // Basic check - if API key exists, consider it potentially available
+      if (!account.apiKey) {
+        saveCheckResult('unavailable', 'No API key configured');
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({
+          success: true,
+          status: 'unavailable',
+          error: 'No API key configured'
+        }));
+        return;
+      }
+
+      // For now, just check if the configuration is complete
+      let status = 'available';
+
+      // Check if API URL is accessible (for CCR and custom endpoints)
+      if (account.apiUrl) {
+        const https = require('https');
+        const http = require('http');
+
+        try {
+          const url = new URL(account.apiUrl);
+          const client = url.protocol === 'https:' ? https : http;
+
+          const options = {
+            hostname: url.hostname,
+            port: url.port || (url.protocol === 'https:' ? 443 : 80),
+            path: '/',
+            method: 'HEAD',
+            timeout: 3000
+          };
+
+          let responded = false;
+
+          const request = client.request(options, (response) => {
+            if (responded) return;
+            responded = true;
+
+            if (response.statusCode >= 200 && response.statusCode < 500) {
+              status = 'available';
+            } else {
+              status = 'unstable';
+            }
+
+            saveCheckResult(status);
+            res.writeHead(200, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({
+              success: true,
+              status,
+              statusCode: response.statusCode
+            }));
+          });
+
+          request.on('error', (error) => {
+            if (responded) return;
+            responded = true;
+
+            // Connection refused, host not found, etc. = unavailable
+            const isUnavailable = error.code === 'ECONNREFUSED' ||
+                                  error.code === 'ENOTFOUND' ||
+                                  error.code === 'EHOSTUNREACH';
+
+            const status = isUnavailable ? 'unavailable' : 'unstable';
+            saveCheckResult(status, error.message);
+            res.writeHead(200, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({
+              success: true,
+              status,
+              error: error.message
+            }));
+          });
+
+          request.on('timeout', () => {
+            if (responded) return;
+            responded = true;
+
+            request.destroy();
+            saveCheckResult('unavailable', 'Connection timeout');
+            res.writeHead(200, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({
+              success: true,
+              status: 'unavailable',
+              error: 'Connection timeout'
+            }));
+          });
+
+          request.end();
+        } catch (e) {
+          saveCheckResult('available');
+          res.writeHead(200, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({
+            success: true,
+            status: 'available',
+            message: 'Configuration looks valid'
+          }));
+        }
+      } else {
+        // No API URL, just check if key exists
+        saveCheckResult('available');
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({
+          success: true,
+          status: 'available',
+          message: 'Configuration looks valid'
+        }));
+      }
+    } catch (error) {
+      saveCheckResult('unavailable', error.message);
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({
+        success: true,
+        status: 'unavailable',
+        error: error.message
+      }));
+    }
+  }
+
   getHTMLContent() {
     return `<!DOCTYPE html>
 <html lang="zh-CN">
@@ -482,6 +624,21 @@ class UIServer {
             color: var(--text-primary);
         }
 
+        .filter-box {
+            min-width: 150px;
+        }
+
+        .filter-box select {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid var(--input-border);
+            border-radius: 5px;
+            font-size: 14px;
+            background: var(--input-bg);
+            color: var(--text-primary);
+            cursor: pointer;
+        }
+
         .accounts-grid {
             display: grid;
             grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
@@ -497,6 +654,7 @@ class UIServer {
             display: flex;
             flex-direction: column;
             min-height: 200px;
+            border-left: 4px solid transparent;
         }
 
         .account-card:hover {
@@ -504,6 +662,26 @@ class UIServer {
             box-shadow: 0 6px 12px var(--card-shadow-hover);
         }
 
+        .account-card.type-claude {
+            border-left-color: #1976d2;
+        }
+
+        .account-card.type-codex {
+            border-left-color: #7b1fa2;
+        }
+
+        .account-card.type-droids {
+            border-left-color: #388e3c;
+        }
+
+        .account-card.type-ccr {
+            border-left-color: #ff9800;
+        }
+
+        .account-card.type-other {
+            border-left-color: #f57c00;
+        }
+
         .account-content {
             flex: 1;
         }
@@ -515,6 +693,12 @@ class UIServer {
             margin-bottom: 15px;
         }
 
+        .account-name-wrapper {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
         .account-name {
             font-size: 1.4rem;
             font-weight: 600;
@@ -527,10 +711,62 @@ class UIServer {
             border-radius: 4px;
             font-size: 12px;
             font-weight: 500;
+        }
+
+        .account-status-wrapper {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .account-status {
+            display: inline-block;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+        }
+
+        .account-status.available {
+            background: #4CAF50;
+        }
+
+        .account-status.unstable {
+            background: #FF9800;
+        }
+
+        .account-status.unavailable {
+            background: #f44336;
+        }
+
+        .account-status.unknown {
+            background: #9E9E9E;
+        }
+
+        .account-type.type-claude {
             background: #e3f2fd;
             color: #1976d2;
         }
 
+        .account-type.type-codex {
+            background: #f3e5f5;
+            color: #7b1fa2;
+        }
+
+        .account-type.type-droids {
+            background: #e8f5e9;
+            color: #388e3c;
+        }
+
+        .account-type.type-ccr {
+            background: #fff3e0;
+            color: #ff9800;
+        }
+
+        .account-type.type-other {
+            background: #fafafa;
+            color: #757575;
+        }
+
         .account-info {
             margin-bottom: 10px;
         }
@@ -807,6 +1043,16 @@ class UIServer {
             <div class="search-box">
                 <input type="text" id="searchInput" data-i18n-placeholder="searchPlaceholder" placeholder="搜索账号...">
             </div>
+            <div class="filter-box">
+                <select id="typeFilter" onchange="renderAccounts()">
+                    <option value="" data-i18n="allTypes">所有类型</option>
+                    <option value="Claude">Claude</option>
+                    <option value="Codex">Codex</option>
+                    <option value="CCR">CCR</option>
+                    <option value="Droids">Droids</option>
+                    <option value="Other" data-i18n="other">其他</option>
+                </select>
+            </div>
             <button class="btn btn-primary" onclick="showAddModal()" data-i18n="addAccount">+ 添加账号</button>
             <button class="btn btn-secondary" onclick="exportAccounts()" data-i18n="exportAll">导出全部</button>
             <button class="btn btn-secondary" onclick="document.getElementById('importFile').click()" data-i18n="import">导入</button>
@@ -832,9 +1078,11 @@ class UIServer {
                 </div>
                 <div class="form-group">
                     <label for="accountType" data-i18n="type">类型 *</label>
-                    <select id="accountType" required>
+                    <select id="accountType" required onchange="toggleModelFields()">
                         <option value="Claude">Claude</option>
                         <option value="Codex">Codex</option>
+                        <option value="CCR">CCR</option>
+                        <option value="Droids">Droids</option>
                         <option value="Other" data-i18n="other">其他</option>
                     </select>
                 </div>
@@ -854,19 +1102,50 @@ class UIServer {
                     <label for="description" data-i18n="description">描述 (可选)</label>
                     <textarea id="description" data-i18n-placeholder="descriptionPlaceholder" placeholder="用于生产环境的主账号"></textarea>
                 </div>
-                <div class="form-group">
-                    <label data-i18n="customEnv">自定义环境变量 (可选)</label>
-                    <div id="envVarsList"></div>
-                    <button type="button" class="btn btn-secondary btn-small" onclick="addEnvVar()" data-i18n="addVariable">+ 添加变量</button>
-                </div>
                 <div class="form-group">
                     <div class="advanced-toggle" onclick="toggleAdvancedSettings()">
                         <span class="advanced-toggle-icon" id="advancedToggleIcon">▶</span>
-                        <span data-i18n="advancedSettings">高级设置 - 模型组</span>
+                        <span data-i18n="advancedSettings">高级配置</span>
                     </div>
                     <div class="advanced-content" id="advancedContent">
-                        <div id="modelGroupsList" style="margin-bottom: 10px;"></div>
-                        <button type="button" class="btn btn-secondary btn-small" onclick="addModelGroupUI()" data-i18n="addModelGroup">+ 添加模型组</button>
+                        <!-- Custom Environment Variables -->
+                        <div class="form-group">
+                            <label data-i18n="customEnv">自定义环境变量</label>
+                            <div id="envVarsList"></div>
+                            <button type="button" class="btn btn-secondary btn-small" onclick="addEnvVar()" data-i18n="addVariable">+ 添加变量</button>
+                        </div>
+                        <!-- Model Configuration -->
+                        <div class="form-group">
+                            <label data-i18n="modelConfig">模型配置</label>
+                            <!-- Simple model field for Codex/Droids -->
+                            <div id="simpleModelGroup" style="display: none;">
+                                <input type="text" id="simpleModel" data-i18n-placeholder="simpleModelPlaceholder" placeholder="例如: gpt-4, droids-model-v1">
+                            </div>
+                            <!-- CCR model fields -->
+                            <div id="ccrModelGroup" style="display: none;">
+                                <div style="margin-bottom: 10px;">
+                                    <label>Provider Name</label>
+                                    <input type="text" id="ccrProviderName" placeholder="例如: Local-new-api">
+                                </div>
+                                <div style="margin-bottom: 10px;">
+                                    <label>Default Model</label>
+                                    <input type="text" id="ccrDefaultModel" placeholder="例如: gemini-2.5-flash">
+                                </div>
+                                <div style="margin-bottom: 10px;">
+                                    <label>Background Model</label>
+                                    <input type="text" id="ccrBackgroundModel" placeholder="例如: gemini-2.5-flash">
+                                </div>
+                                <div style="margin-bottom: 10px;">
+                                    <label>Think Model</label>
+                                    <input type="text" id="ccrThinkModel" placeholder="例如: gemini-2.5-pro">
+                                </div>
+                            </div>
+                            <!-- Model groups for Claude -->
+                            <div id="claudeModelGroup" style="display: none;">
+                                <div id="modelGroupsList" style="margin-bottom: 10px;"></div>
+                                <button type="button" class="btn btn-secondary btn-small" onclick="addModelGroupUI()" data-i18n="addModelGroup">+ 添加模型组</button>
+                            </div>
+                        </div>
                     </div>
                 </div>
                 <div class="form-actions">
@@ -885,6 +1164,7 @@ class UIServer {
                 subtitle: '管理你的 AI 账号配置',
                 themeLabel: '主题',
                 searchPlaceholder: '搜索账号...',
+                allTypes: '所有类型',
                 addAccount: '+ 添加账号',
                 exportAll: '导出全部',
                 import: '导入',
@@ -904,9 +1184,12 @@ class UIServer {
                 emailPlaceholder: 'user@example.com',
                 description: '描述 (可选)',
                 descriptionPlaceholder: '用于生产环境的主账号',
-                customEnv: '自定义环境变量 (可选)',
+                advancedSettings: '高级配置',
+                customEnv: '自定义环境变量',
                 addVariable: '+ 添加变量',
-                advancedSettings: '高级设置 - 模型组',
+                modelConfig: '模型配置',
+                simpleModel: '模型',
+                simpleModelPlaceholder: '例如: gpt-4, droids-model-v1',
                 addModelGroup: '+ 添加模型组',
                 modelGroupName: '模型组名称',
                 setActive: '设为激活',
@@ -937,6 +1220,7 @@ class UIServer {
                 subtitle: 'Manage your AI account configurations',
                 themeLabel: 'Theme',
                 searchPlaceholder: 'Search accounts...',
+                allTypes: 'All Types',
                 addAccount: '+ Add Account',
                 exportAll: 'Export All',
                 import: 'Import',
@@ -956,9 +1240,12 @@ class UIServer {
                 emailPlaceholder: 'user@example.com',
                 description: 'Description (optional)',
                 descriptionPlaceholder: 'Main account for production environment',
-                customEnv: 'Custom Environment Variables (optional)',
+                advancedSettings: 'Advanced Configuration',
+                customEnv: 'Custom Environment Variables',
                 addVariable: '+ Add Variable',
-                advancedSettings: 'Advanced Settings - Model Groups',
+                modelConfig: 'Model Configuration',
+                simpleModel: 'Model',
+                simpleModelPlaceholder: 'e.g., gpt-4, droids-model-v1',
                 addModelGroup: '+ Add Model Group',
                 modelGroupName: 'Model Group Name',
                 setActive: 'Set Active',
@@ -1068,11 +1355,18 @@ class UIServer {
             const container = document.getElementById('accountsContainer');
             const emptyState = document.getElementById('emptyState');
             const searchTerm = document.getElementById('searchInput').value.toLowerCase();
+            const typeFilter = document.getElementById('typeFilter').value;
 
             const filteredAccounts = Object.entries(accounts).filter(([name, data]) => {
-                return name.toLowerCase().includes(searchTerm) ||
+                // Search filter
+                const matchesSearch = name.toLowerCase().includes(searchTerm) ||
                        (data.email && data.email.toLowerCase().includes(searchTerm)) ||
                        (data.type && data.type.toLowerCase().includes(searchTerm));
+
+                // Type filter
+                const matchesType = !typeFilter || data.type === typeFilter;
+
+                return matchesSearch && matchesType;
             });
 
             if (filteredAccounts.length === 0) {
@@ -1082,12 +1376,20 @@ class UIServer {
             }
 
             emptyState.classList.add('hidden');
-            container.innerHTML = filteredAccounts.map(([name, data]) => \`
-                <div class="account-card">
+            container.innerHTML = filteredAccounts.map(([name, data]) => {
+                const typeClass = data.type ? \`type-\${data.type.toLowerCase()}\` : 'type-other';
+                return \`
+                <div class="account-card \${typeClass}">
                     <div class="account-content">
                         <div class="account-header">
-                            <div class="account-name">\${name}</div>
-                            <div class="account-type">\${data.type || 'N/A'}</div>
+                            <div class="account-name-wrapper">
+                                <div class="account-name">\${name}</div>
+                                <span class="account-type \${typeClass}">\${data.type || 'N/A'}</span>
+                            </div>
+                            <div class="account-status-wrapper">
+                                <span class="account-status \${data.lastCheck ? data.lastCheck.status : 'unknown'}" id="status_\${name}" title="\${data.lastCheck ? (data.lastCheck.status === 'available' ? '可用' : data.lastCheck.status === 'unstable' ? '不稳定' : '不可用') : '未检查'}"></span>
+                                <button class="btn btn-secondary btn-small" onclick="checkAccount('\${name}')" id="checkBtn_\${name}">状态检查</button>
+                            </div>
                         </div>
                         <div class="account-info">
                             <div class="info-label">\${t('apiKeyLabel')}</div>
@@ -1117,19 +1419,36 @@ class UIServer {
                             <div class="info-value">\${Object.keys(data.customEnv).join(', ')}</div>
                         </div>
                         \` : ''}
-                        \${data.modelGroups && Object.keys(data.modelGroups).length > 0 ? \`
+                        \${data.type === 'Claude' && data.modelGroups && Object.keys(data.modelGroups).length > 0 ? \`
                         <div class="account-info">
                             <div class="info-label">Model Groups</div>
                             <div class="info-value">\${Object.keys(data.modelGroups).join(', ')} \${data.activeModelGroup ? '(active: ' + data.activeModelGroup + ')' : ''}</div>
                         </div>
                         \` : ''}
+                        \${(data.type === 'Codex' || data.type === 'Droids') && data.model ? \`
+                        <div class="account-info">
+                            <div class="info-label">Model</div>
+                            <div class="info-value">\${data.model}</div>
+                        </div>
+                        \` : ''}
+                        \${data.type === 'CCR' && data.ccrConfig ? \`
+                        <div class="account-info">
+                            <div class="info-label">CCR Provider</div>
+                            <div class="info-value">\${data.ccrConfig.providerName}</div>
+                        </div>
+                        <div class="account-info">
+                            <div class="info-label">Models</div>
+                            <div class="info-value">default: \${data.ccrConfig.defaultModel}, background: \${data.ccrConfig.backgroundModel}, think: \${data.ccrConfig.thinkModel}</div>
+                        </div>
+                        \` : ''}
                     </div>
                     <div class="account-actions">
                         <button class="btn btn-secondary btn-small" onclick="editAccount('\${name}')">\${t('edit')}</button>
                         <button class="btn btn-danger btn-small" onclick="deleteAccount('\${name}')">\${t('delete')}</button>
                     </div>
                 </div>
-            \`).join('');
+            \`;
+            }).join('');
         }
 
         function maskApiKey(key) {
@@ -1137,6 +1456,27 @@ class UIServer {
             return key.substring(0, 4) + '****' + key.substring(key.length - 4);
         }
 
+        function toggleModelFields() {
+            const accountType = document.getElementById('accountType').value;
+            const simpleModelGroup = document.getElementById('simpleModelGroup');
+            const claudeModelGroup = document.getElementById('claudeModelGroup');
+            const ccrModelGroup = document.getElementById('ccrModelGroup');
+
+            if (accountType === 'Codex' || accountType === 'Droids') {
+                simpleModelGroup.style.display = 'block';
+                claudeModelGroup.style.display = 'none';
+                if (ccrModelGroup) ccrModelGroup.style.display = 'none';
+            } else if (accountType === 'CCR') {
+                simpleModelGroup.style.display = 'none';
+                claudeModelGroup.style.display = 'none';
+                if (ccrModelGroup) ccrModelGroup.style.display = 'block';
+            } else {
+                simpleModelGroup.style.display = 'none';
+                claudeModelGroup.style.display = 'block';
+                if (ccrModelGroup) ccrModelGroup.style.display = 'none';
+            }
+        }
+
         function showAddModal() {
             editingAccount = null;
             document.getElementById('modalTitle').textContent = t('addAccountTitle');
@@ -1148,9 +1488,13 @@ class UIServer {
             document.getElementById('modelGroupsList').innerHTML = '';
             modelGroupCount = 0;
             activeModelGroup = null;
+            // Clear simple model
+            document.getElementById('simpleModel').value = '';
             // Collapse advanced settings
             document.getElementById('advancedContent').classList.remove('expanded');
             document.getElementById('advancedToggleIcon').classList.remove('expanded');
+            // Toggle model fields based on default type (Claude)
+            toggleModelFields();
             document.getElementById('accountModal').classList.add('active');
         }
 
@@ -1176,13 +1520,44 @@ class UIServer {
                 });
             }
 
-            // Load model groups
-            document.getElementById('modelGroupsList').innerHTML = '';
-            modelGroupCount = 0;
-            activeModelGroup = null;
-
-            const hasModelGroups = account.modelGroups && Object.keys(account.modelGroups).length > 0;
-            if (hasModelGroups) {
+            // Toggle model fields based on account type
+            toggleModelFields();
+
+            // Load model configuration based on account type
+            if (account.type === 'Codex' || account.type === 'Droids') {
+                // Load simple model field
+                document.getElementById('simpleModel').value = account.model || '';
+                // Clear model groups and CCR config
+                document.getElementById('modelGroupsList').innerHTML = '';
+                modelGroupCount = 0;
+                activeModelGroup = null;
+                document.getElementById('ccrProviderName').value = '';
+                document.getElementById('ccrDefaultModel').value = '';
+                document.getElementById('ccrBackgroundModel').value = '';
+                document.getElementById('ccrThinkModel').value = '';
+            } else if (account.type === 'CCR') {
+                // Load CCR config
+                if (account.ccrConfig) {
+                    document.getElementById('ccrProviderName').value = account.ccrConfig.providerName || '';
+                    document.getElementById('ccrDefaultModel').value = account.ccrConfig.defaultModel || '';
+                    document.getElementById('ccrBackgroundModel').value = account.ccrConfig.backgroundModel || '';
+                    document.getElementById('ccrThinkModel').value = account.ccrConfig.thinkModel || '';
+                }
+                // Clear simple model and model groups
+                document.getElementById('simpleModel').value = '';
+                document.getElementById('modelGroupsList').innerHTML = '';
+                modelGroupCount = 0;
+                activeModelGroup = null;
+            } else {
+                // Load model groups for Claude
+                document.getElementById('modelGroupsList').innerHTML = '';
+                modelGroupCount = 0;
+                activeModelGroup = null;
+                // Clear simple model
+                document.getElementById('simpleModel').value = '';
+
+                const hasModelGroups = account.modelGroups && Object.keys(account.modelGroups).length > 0;
+                if (hasModelGroups) {
                 Object.entries(account.modelGroups).forEach(([groupName, groupConfig]) => {
                     const groupId = modelGroupCount++;
                     const isActive = account.activeModelGroup === groupName;
@@ -1237,13 +1612,14 @@ class UIServer {
                     container.appendChild(div);
                 });
 
-                // Expand advanced settings if model groups exist
-                document.getElementById('advancedContent').classList.add('expanded');
-                document.getElementById('advancedToggleIcon').classList.add('expanded');
-            } else {
-                // Collapse advanced settings if no model groups
-                document.getElementById('advancedContent').classList.remove('expanded');
-                document.getElementById('advancedToggleIcon').classList.remove('expanded');
+                    // Expand advanced settings if model groups exist
+                    document.getElementById('advancedContent').classList.add('expanded');
+                    document.getElementById('advancedToggleIcon').classList.add('expanded');
+                } else {
+                    // Collapse advanced settings if no model groups
+                    document.getElementById('advancedContent').classList.remove('expanded');
+                    document.getElementById('advancedToggleIcon').classList.remove('expanded');
+                }
             }
 
             document.getElementById('accountModal').classList.add('active');
@@ -1404,12 +1780,41 @@ class UIServer {
                 delete accountData.customEnv;
             }
 
-            // Collect model groups
-            accountData.modelGroups = {};
-            accountData.activeModelGroup = null;
+            // Collect model configuration based on account type
+            const accountType = document.getElementById('accountType').value;
 
-            const modelGroupsList = document.getElementById('modelGroupsList');
-            modelGroupsList.querySelectorAll('.model-group-item').forEach(item => {
+            if (accountType === 'Codex' || accountType === 'Droids') {
+                // Use simple model field
+                const simpleModel = document.getElementById('simpleModel').value.trim();
+                if (simpleModel) {
+                    accountData.model = simpleModel;
+                }
+            } else if (accountType === 'CCR') {
+                // Collect CCR config
+                const providerName = document.getElementById('ccrProviderName').value.trim();
+                const defaultModel = document.getElementById('ccrDefaultModel').value.trim();
+                const backgroundModel = document.getElementById('ccrBackgroundModel').value.trim();
+                const thinkModel = document.getElementById('ccrThinkModel').value.trim();
+
+                if (providerName && defaultModel && backgroundModel && thinkModel) {
+                    const models = [defaultModel, backgroundModel, thinkModel];
+                    const uniqueModels = [...new Set(models)];
+
+                    accountData.ccrConfig = {
+                        providerName,
+                        models: uniqueModels,
+                        defaultModel,
+                        backgroundModel,
+                        thinkModel
+                    };
+                }
+            } else {
+                // Collect model groups for Claude
+                accountData.modelGroups = {};
+                accountData.activeModelGroup = null;
+
+                const modelGroupsList = document.getElementById('modelGroupsList');
+                modelGroupsList.querySelectorAll('.model-group-item').forEach(item => {
                 const groupId = parseInt(item.id.replace('modelGroup', ''));
                 const groupName = document.getElementById(\`groupName\${groupId}\`).value;
 
@@ -1430,15 +1835,16 @@ class UIServer {
 
                 accountData.modelGroups[groupName] = groupConfig;
 
-                // Check if this is the active group
-                if (activeModelGroup === groupId) {
-                    accountData.activeModelGroup = groupName;
-                }
-            });
+                    // Check if this is the active group
+                    if (activeModelGroup === groupId) {
+                        accountData.activeModelGroup = groupName;
+                    }
+                });
 
-            if (Object.keys(accountData.modelGroups).length === 0) {
-                delete accountData.modelGroups;
-                delete accountData.activeModelGroup;
+                if (Object.keys(accountData.modelGroups).length === 0) {
+                    delete accountData.modelGroups;
+                    delete accountData.activeModelGroup;
+                }
             }
 
             try {
@@ -1551,6 +1957,47 @@ class UIServer {
             }, 3000);
         }
 
+        async function checkAccount(name) {
+            const checkBtn = document.getElementById(\`checkBtn_\${name}\`);
+            const statusBadge = document.getElementById(\`status_\${name}\`);
+
+            if (!checkBtn || !statusBadge) return;
+
+            checkBtn.disabled = true;
+            checkBtn.textContent = '检查中...';
+            statusBadge.title = '检查中...';
+            statusBadge.className = 'account-status unknown';
+
+            try {
+                const response = await fetch(\`/api/accounts/\${encodeURIComponent(name)}/check\`, {
+                    method: 'POST'
+                });
+
+                const result = await response.json();
+
+                if (result.success) {
+                    const statusMap = {
+                        'available': '可用',
+                        'unstable': '不稳定',
+                        'unavailable': '不可用'
+                    };
+
+                    statusBadge.title = statusMap[result.status] || '未知';
+                    statusBadge.className = \`account-status \${result.status}\`;
+                } else {
+                    statusBadge.title = '检查失败';
+                    statusBadge.className = 'account-status unavailable';
+                }
+            } catch (error) {
+                statusBadge.title = '检查失败';
+                statusBadge.className = 'account-status unavailable';
+                showToast('检查失败: ' + error.message, 'error');
+            } finally {
+                checkBtn.disabled = false;
+                checkBtn.textContent = '状态检查';
+            }
+        }
+
         // Event listeners
         document.getElementById('searchInput').addEventListener('input', renderAccounts);