codexmate 0.0.4 → 0.0.5

package/web-ui.html

@@ -523,6 +523,101 @@
             gap: var(--spacing-xs);
         }
 
+        .recent-list {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            margin-top: 8px;
+        }
+
+        .recent-item {
+            border: 1px solid var(--color-border-soft);
+            background: var(--color-surface-elevated);
+            border-radius: var(--radius-md);
+            padding: 10px 12px;
+            min-width: 170px;
+            text-align: left;
+            cursor: pointer;
+            transition: all var(--transition-fast) var(--ease-spring);
+            box-shadow: 0 2px 6px rgba(27, 23, 20, 0.06);
+        }
+
+        .recent-item:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(27, 23, 20, 0.12);
+            border-color: var(--color-border);
+        }
+
+        .recent-item:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+
+        .recent-provider {
+            font-size: var(--font-size-body);
+            font-weight: var(--font-weight-secondary);
+            color: var(--color-text-primary);
+            margin-bottom: 4px;
+        }
+
+        .recent-model {
+            font-size: var(--font-size-caption);
+            color: var(--color-text-tertiary);
+            line-height: 1.4;
+        }
+
+        .recent-empty {
+            font-size: var(--font-size-caption);
+            color: var(--color-text-tertiary);
+        }
+
+        .health-report {
+            margin-top: 10px;
+            padding: 10px 12px;
+            border-radius: var(--radius-md);
+            border: 1px solid var(--color-border-soft);
+            background: var(--color-surface-alt);
+            display: grid;
+            gap: 8px;
+        }
+
+        .health-remote-toggle {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            font-size: var(--font-size-caption);
+            color: var(--color-text-secondary);
+        }
+
+        .health-remote-toggle input {
+            accent-color: var(--color-brand);
+        }
+
+        .health-ok {
+            color: var(--color-success);
+            font-weight: var(--font-weight-secondary);
+        }
+
+        .health-issue {
+            background: #fff6f5;
+            border-left: 3px solid var(--color-error);
+            padding: 8px 10px;
+            border-radius: 10px;
+        }
+
+        .health-issue-title {
+            font-size: var(--font-size-caption);
+            font-weight: var(--font-weight-secondary);
+            color: var(--color-text-primary);
+            margin-bottom: 4px;
+        }
+
+        .health-issue-suggestion {
+            font-size: var(--font-size-caption);
+            color: var(--color-text-secondary);
+            line-height: 1.4;
+        }
+
         .btn-icon {
             width: 28px;
             height: 28px;
@@ -580,6 +675,31 @@
             box-shadow: var(--shadow-input-focus);
         }
 
+        .model-input {
+            width: 100%;
+            padding: 12px var(--spacing-sm);
+            border: 1px solid var(--color-border-soft);
+            border-radius: var(--radius-sm);
+            font-size: var(--font-size-body);
+            font-weight: var(--font-weight-body);
+            background-color: var(--color-surface-alt);
+            color: var(--color-text-primary);
+            outline: none;
+            transition: all var(--transition-fast) var(--ease-smooth);
+            box-shadow: inset 0 1px 2px rgba(31, 26, 23, 0.04);
+        }
+
+        .model-input:hover {
+            border-color: var(--color-border-strong);
+            background-color: var(--color-surface);
+        }
+
+        .model-input:focus {
+            background-color: var(--color-surface);
+            border-color: var(--color-brand);
+            box-shadow: var(--shadow-input-focus);
+        }
+
         .config-template-hint {
             margin-top: 8px;
             margin-bottom: 10px;
@@ -1280,6 +1400,37 @@
             }
         }
 
+        @media (max-width: 520px) {
+            .session-item-header {
+                flex-direction: column;
+                align-items: stretch;
+            }
+
+            .session-item-actions {
+                justify-content: flex-end;
+            }
+
+            .session-actions {
+                width: 100%;
+                flex-direction: column;
+                align-items: stretch;
+            }
+
+            .btn-session-refresh,
+            .btn-session-export {
+                width: 100%;
+            }
+
+            .session-toolbar-group.session-toolbar-actions {
+                flex-direction: column;
+                align-items: stretch;
+            }
+
+            .session-toolbar-group.session-toolbar-actions .btn-tool {
+                width: 100%;
+            }
+        }
+
         .btn[disabled] {
             opacity: 0.5;
             cursor: not-allowed;
@@ -1666,23 +1817,23 @@
             Codex<br>
             <span class="accent">Mate.</span>
         </h1>
-        <p class="subtitle">本地配置中枢，统一管理 Codex / Claude Code / OpenClaw / 会话。</p>
+        <p class="subtitle">本地配置中枢，统一管理 Codex / Claude Code / OpenClaw / 会话。</p>
 
         <!-- 模式切换器 -->
-        <div class="segmented-control">
-            <button :class="['segment', { active: configMode === 'codex' }]" @click="switchConfigMode('codex')">
-                Codex 配置
-            </button>
-            <button :class="['segment', { active: configMode === 'claude' }]" @click="switchConfigMode('claude')">
-                Claude Code 配置
-            </button>
-            <button :class="['segment', { active: configMode === 'openclaw' }]" @click="switchConfigMode('openclaw')">
-                OpenClaw 配置
-            </button>
-            <button :class="['segment', { active: configMode === 'sessions' }]" @click="switchConfigMode('sessions')">
-                会话浏览
-            </button>
-        </div>
+        <div class="segmented-control">
+            <button :class="['segment', { active: configMode === 'codex' }]" @click="switchConfigMode('codex')">
+                Codex 配置
+            </button>
+            <button :class="['segment', { active: configMode === 'claude' }]" @click="switchConfigMode('claude')">
+                Claude Code 配置
+            </button>
+            <button :class="['segment', { active: configMode === 'openclaw' }]" @click="switchConfigMode('openclaw')">
+                OpenClaw 配置
+            </button>
+            <button :class="['segment', { active: configMode === 'sessions' }]" @click="switchConfigMode('sessions')">
+                会话浏览
+            </button>
+        </div>
 
         <!-- 内容包裹器 - 稳定布局 -->
         <div class="content-wrapper">
@@ -1701,33 +1852,107 @@
                     <div class="selector-header">
                         <span class="selector-title">模型</span>
                         <div class="selector-actions">
-                            <button class="btn-icon" @click="showModelModal = true" title="添加模型">+</button>
-                            <button class="btn-icon" @click="showModelListModal = true" title="管理模型">≡</button>
+                            <button class="btn-icon" @click="showModelModal = true" title="添加模型" v-if="modelsSource === 'legacy'">+</button>
+                            <button class="btn-icon" @click="showModelListModal = true" title="管理模型" v-if="modelsSource === 'legacy'">≡</button>
                         </div>
                     </div>
-                    <select class="model-select" v-model="currentModel" @change="onModelChange">
-                        <option v-for="model in models" :key="model" :value="model">{{ model }}</option>
+                    <select
+                        v-if="codexModelsLoading || modelsSource === 'remote'"
+                        class="model-select"
+                        v-model="currentModel"
+                        @change="onModelChange"
+                        :disabled="codexModelsLoading"
+                    >
+                        <option v-if="codexModelsLoading" value="">加载中...</option>
+                        <option v-else v-for="model in models" :key="model" :value="model">{{ model }}</option>
                     </select>
+                    <input
+                        v-if="!codexModelsLoading && (modelsSource !== 'remote' || !modelsHasCurrent)"
+                        class="model-input"
+                        v-model="currentModel"
+                        @blur="onModelChange"
+                        placeholder="例如: gpt-5.3-codex"
+                    >
+                    <div class="config-template-hint" v-if="modelsSource === 'unlimited'">
+                        当前提供商未提供模型列表，视为不限；模型可手动输入。
+                    </div>
+                    <div class="config-template-hint" v-if="modelsSource === 'error'">
+                        模型列表获取失败，请检查接口或手动输入。
+                    </div>
+                    <div class="config-template-hint" v-if="modelsSource === 'remote' && !modelsHasCurrent">
+                        当前模型不在接口列表中，请手动输入或在模板中调整。
+                    </div>
                     <div class="config-template-hint">
-                        Codex 配置改动采用模板确认模式：请先编辑模板，再手动确认应用。
+                        Codex 配置需先改模板，再手动应用。
                     </div>
                     <button class="btn-tool btn-template-editor" @click="openConfigTemplateEditor" :disabled="loading || !!initError">
                         打开 Config 模板编辑器
                     </button>
                 </div>
 
+                <div class="selector-section">
+                    <div class="selector-header">
+                        <span class="selector-title">最近使用</span>
+                        <span v-if="recentLoading" class="selector-title">加载中...</span>
+                    </div>
+                    <div v-if="recentConfigs.length === 0" class="recent-empty">
+                        暂无记录
+                    </div>
+                    <div v-else class="recent-list">
+                        <button
+                            v-for="item in recentConfigs"
+                            :key="item.provider + '::' + item.model + '::' + (item.usedAt || '')"
+                            class="recent-item"
+                            @click="applyRecentConfig(item)"
+                            :disabled="loading || !!initError">
+                            <div class="recent-provider">{{ item.provider }}</div>
+                            <div class="recent-model">{{ item.model }}</div>
+                        </button>
+                    </div>
+                </div>
+
                 <div class="selector-section">
                     <div class="selector-header">
                         <span class="selector-title">AGENTS.md</span>
                     </div>
                     <div class="config-template-hint">
-                        管理 Codex 指令文件，默认读写 <code>~/.codex/AGENTS.md</code>（与 <code>config.toml</code> 同级）。
+                        Codex 指令：<code>~/.codex/AGENTS.md</code>（同级 <code>config.toml</code>）。
                     </div>
                     <button class="btn-tool" @click="openAgentsEditor" :disabled="loading || !!initError || agentsLoading">
                         {{ agentsLoading ? '加载中...' : '打开 AGENTS.md 编辑器' }}
                     </button>
                 </div>
 
+                <div class="selector-section">
+                    <div class="selector-header">
+                        <span class="selector-title">配置健康检查</span>
+                    </div>
+                    <div class="config-template-hint">
+                        检测 base_url、API Key 与模型可用性（可选远程探测会发起真实请求，可能产生费用）。
+                    </div>
+                    <div class="config-template-hint">
+                        <label class="health-remote-toggle">
+                            <input type="checkbox" v-model="healthCheckRemote">
+                            启用远程探测（请求 base_url 与 /v1/models）
+                        </label>
+                    </div>
+                    <button class="btn-tool" @click="runHealthCheck" :disabled="healthCheckLoading || loading || !!initError">
+                        {{ healthCheckLoading ? '检查中...' : '运行检查' }}
+                    </button>
+                    <div v-if="healthCheckResult" class="health-report">
+                        <div v-if="healthCheckResult.ok" class="health-ok">未发现问题</div>
+                        <div v-else>
+                            <div
+                                v-for="(issue, index) in healthCheckResult.issues"
+                                :key="(issue.code || 'issue') + index"
+                                class="health-issue">
+                                <div class="health-issue-title">{{ issue.message }}</div>
+                                <div v-if="issue.suggestion" class="health-issue-suggestion">{{ issue.suggestion }}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
                 <div v-if="!loading && !initError" class="card-list">
                     <div v-for="provider in providersList" :key="provider.name"
                          :class="['card', { active: currentProvider === provider.name }]"
@@ -1770,17 +1995,33 @@
                 </div>
             </div>
 
-            <!-- Claude Code 配置模式 -->
-            <div v-show="configMode === 'claude'" class="mode-content">
-                <!-- 添加提供商按钮 -->
-                <button class="btn-add" @click="showClaudeConfigModal = true" v-if="!loading && !initError">
+            <!-- Claude Code 配置模式 -->
+            <div v-show="configMode === 'claude'" class="mode-content">
+                <!-- 添加提供商按钮 -->
+                <button class="btn-add" @click="openClaudeConfigModal" v-if="!loading && !initError">
                     <svg class="icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2">
                         <path d="M10 4v12M4 10h12"/>
                     </svg>
                     添加提供商
                 </button>
                 <div class="config-template-hint">
-                    默认应用到 <code>~/.claude/settings.json</code>；编辑弹窗中可使用兼容模式写入系统环境变量。
+                    默认应用到 <code>~/.claude/settings.json</code>。
+                </div>
+
+                <div class="selector-section">
+                    <div class="selector-header">
+                        <span class="selector-title">模型</span>
+                    </div>
+                    <input
+                        class="model-input"
+                        v-model="currentClaudeModel"
+                        @blur="onClaudeModelChange"
+                        @keyup.enter="onClaudeModelChange"
+                        placeholder="例如: claude-3-7-sonnet"
+                    >
+                    <div class="config-template-hint">
+                        模型修改后会自动保存并应用到当前配置。
+                    </div>
                 </div>
 
                 <div class="card-list">
@@ -1814,69 +2055,69 @@
                             </div>
                         </div>
                     </div>
-                </div>
-            </div>
-
-            <!-- OpenClaw 配置模式 -->
-            <div v-show="configMode === 'openclaw'" class="mode-content">
-                <button class="btn-add" @click="openOpenclawAddModal" v-if="!loading && !initError">
-                    <svg class="icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2">
-                        <path d="M10 4v12M4 10h12"/>
-                    </svg>
-                    添加 OpenClaw 配置
-                </button>
-                <div class="config-template-hint">
-                    默认应用到 <code>~/.openclaw/openclaw.json</code>；支持 JSON5（注释/尾逗号）。
-                </div>
-
-                <div class="selector-section">
-                    <div class="selector-header">
-                        <span class="selector-title">AGENTS.md</span>
-                    </div>
-                    <div class="config-template-hint">
-                        管理 OpenClaw Workspace 指令文件，默认读写 <code>~/.openclaw/workspace/AGENTS.md</code>。
-                    </div>
-                    <button class="btn-tool" @click="openOpenclawAgentsEditor" :disabled="loading || !!initError || agentsLoading">
-                        {{ agentsLoading ? '加载中...' : '打开 AGENTS.md 编辑器' }}
-                    </button>
-                </div>
-
-                <div class="card-list">
-                    <div v-for="(config, name) in openclawConfigs" :key="name"
-                         :class="['card', { active: currentOpenclawConfig === name }]"
-                         @click="applyOpenclawConfig(name)">
-                        <div class="card-leading">
-                            <div class="card-icon">{{ name.charAt(0).toUpperCase() }}</div>
-                            <div class="card-content">
-                                <div class="card-title">{{ name }}</div>
-                                <div class="card-subtitle">{{ openclawSubtitle(config) }}</div>
-                            </div>
-                        </div>
-                        <div class="card-trailing">
-                            <span :class="['pill', openclawHasContent(config) ? 'configured' : 'empty']">
-                                {{ openclawHasContent(config) ? '已配置' : '未配置' }}
-                            </span>
-                            <div class="card-actions" @click.stop>
-                                <button class="card-action-btn" @click="openOpenclawEditModal(name)" title="编辑">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
-                                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
-                                    </svg>
-                                </button>
-                                <button class="card-action-btn delete" @click="deleteOpenclawConfig(name)" title="删除">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                        <path d="M3 6h18"/>
-                                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
-                                    </svg>
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- 会话浏览模式 -->
-            <div v-show="configMode === 'sessions'" class="mode-content">
+                </div>
+            </div>
+
+            <!-- OpenClaw 配置模式 -->
+            <div v-show="configMode === 'openclaw'" class="mode-content">
+                <button class="btn-add" @click="openOpenclawAddModal" v-if="!loading && !initError">
+                    <svg class="icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M10 4v12M4 10h12"/>
+                    </svg>
+                    添加 OpenClaw 配置
+                </button>
+                <div class="config-template-hint">
+                    默认应用到 <code>~/.openclaw/openclaw.json</code>；支持 JSON5（注释/尾逗号）。
+                </div>
+
+                <div class="selector-section">
+                    <div class="selector-header">
+                        <span class="selector-title">AGENTS.md</span>
+                    </div>
+                    <div class="config-template-hint">
+                        管理 OpenClaw Workspace 指令文件，默认读写 <code>~/.openclaw/workspace/AGENTS.md</code>。
+                    </div>
+                    <button class="btn-tool" @click="openOpenclawAgentsEditor" :disabled="loading || !!initError || agentsLoading">
+                        {{ agentsLoading ? '加载中...' : '打开 AGENTS.md 编辑器' }}
+                    </button>
+                </div>
+
+                <div class="card-list">
+                    <div v-for="(config, name) in openclawConfigs" :key="name"
+                         :class="['card', { active: currentOpenclawConfig === name }]"
+                         @click="applyOpenclawConfig(name)">
+                        <div class="card-leading">
+                            <div class="card-icon">{{ name.charAt(0).toUpperCase() }}</div>
+                            <div class="card-content">
+                                <div class="card-title">{{ name }}</div>
+                                <div class="card-subtitle">{{ openclawSubtitle(config) }}</div>
+                            </div>
+                        </div>
+                        <div class="card-trailing">
+                            <span :class="['pill', openclawHasContent(config) ? 'configured' : 'empty']">
+                                {{ openclawHasContent(config) ? '已配置' : '未配置' }}
+                            </span>
+                            <div class="card-actions" @click.stop>
+                                <button class="card-action-btn" @click="openOpenclawEditModal(name)" title="编辑">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
+                                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+                                    </svg>
+                                </button>
+                                <button class="card-action-btn delete" @click="deleteOpenclawConfig(name)" title="删除">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M3 6h18"/>
+                                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+                                    </svg>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 会话浏览模式 -->
+            <div v-show="configMode === 'sessions'" class="mode-content">
                 <div class="selector-section">
                     <div class="selector-header">
                         <span class="selector-title">会话来源</span>
@@ -1937,7 +2178,8 @@
                         </div>
                     </div>
                     <div class="session-hint">
-                        关键词检索与角色/时间筛选暂时停用；当前仅支持来源与路径筛选会话列表。右侧预览区仅支持查看与导出。
+                        关键词/角色/时间筛选暂不可用；<br>
+                        仅支持来源与路径筛选，右侧仅查看/导出。
                     </div>
                 </div>
 
@@ -2172,10 +2414,6 @@
                     <label class="form-label">Base URL</label>
                     <input v-model="newClaudeConfig.baseUrl" class="form-input" placeholder="https://open.bigmodel.cn/api/anthropic">
                 </div>
-                <div class="form-group">
-                    <label class="form-label">模型</label>
-                    <input v-model="newClaudeConfig.model" class="form-input" placeholder="例如: claude-sonnet-4-20250514">
-                </div>
 
                 <div class="btn-group">
                     <button class="btn btn-cancel" @click="closeClaudeConfigModal">取消</button>
@@ -2185,9 +2423,9 @@
         </div>
 
         <!-- 编辑Claude配置模态框 -->
-        <div v-if="showEditConfigModal" class="modal-overlay" @click.self="closeEditConfigModal">
-            <div class="modal">
-                <div class="modal-title">编辑 Claude Code 配置</div>
+        <div v-if="showEditConfigModal" class="modal-overlay" @click.self="closeEditConfigModal">
+            <div class="modal">
+                <div class="modal-title">编辑 Claude Code 配置</div>
 
                 <div class="form-group">
                     <label class="form-label">配置名称</label>
@@ -2201,71 +2439,65 @@
                     <label class="form-label">Base URL</label>
                     <input v-model="editingConfig.baseUrl" class="form-input" placeholder="https://open.bigmodel.cn/api/anthropic">
                 </div>
+
+                <div class="btn-group">
+                    <button class="btn btn-cancel" @click="closeEditConfigModal">取消</button>
+                    <button class="btn btn-confirm" @click="saveAndApplyConfig">保存并应用</button>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="showOpenclawConfigModal" class="modal-overlay" @click.self="closeOpenclawConfigModal">
+            <div class="modal modal-wide">
+                <div class="modal-title">{{ openclawEditorTitle }}</div>
+
                 <div class="form-group">
-                    <label class="form-label">模型</label>
-                    <input v-model="editingConfig.model" class="form-input" placeholder="例如: claude-sonnet-4-20250514">
+                    <label class="form-label">配置名称</label>
+                    <input v-model="openclawEditing.name" class="form-input" :readonly="openclawEditing.lockName" placeholder="例如: 默认配置">
+                </div>
+
+                <div class="form-group">
+                    <label class="form-label">目标文件</label>
+                    <div class="form-hint">
+                        {{ openclawConfigPath || '未加载' }}
+                        <span v-if="openclawConfigPath">
+                            （{{ openclawConfigExists ? '已存在' : '不存在，将在应用时创建' }}）
+                        </span>
+                    </div>
+                    <div class="btn-group" style="justify-content:flex-start;">
+                        <button class="btn btn-confirm secondary" @click="loadOpenclawConfigFromFile" :disabled="openclawFileLoading">
+                            {{ openclawFileLoading ? '加载中...' : '加载当前配置' }}
+                        </button>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label class="form-label">OpenClaw 配置（JSON5）</label>
+                    <textarea
+                        v-model="openclawEditing.content"
+                        class="form-input template-editor"
+                        spellcheck="false"
+                        placeholder="在这里编辑 OpenClaw 配置（JSON5）"></textarea>
+                    <div class="template-editor-warning">
+                        保存仅写入本地配置库；点击“保存并应用”后会写入 openclaw.json。
+                    </div>
                 </div>
 
                 <div class="btn-group">
-                    <button class="btn btn-cancel" @click="closeEditConfigModal">取消</button>
-                    <button class="btn btn-confirm" @click="updateConfig">保存</button>
-                    <button class="btn btn-confirm secondary" @click="saveAndApplyConfig">保存并应用到 Claude 配置</button>
-                    <button class="btn btn-confirm secondary" @click="saveAndApplyEnvCompat">兼容模式应用到环境变量</button>
-                </div>
-            </div>
-        </div>
-
-        <div v-if="showOpenclawConfigModal" class="modal-overlay" @click.self="closeOpenclawConfigModal">
-            <div class="modal modal-wide">
-                <div class="modal-title">{{ openclawEditorTitle }}</div>
-
-                <div class="form-group">
-                    <label class="form-label">配置名称</label>
-                    <input v-model="openclawEditing.name" class="form-input" :readonly="openclawEditing.lockName" placeholder="例如: 默认配置">
-                </div>
-
-                <div class="form-group">
-                    <label class="form-label">目标文件</label>
-                    <div class="form-hint">
-                        {{ openclawConfigPath || '未加载' }}
-                        <span v-if="openclawConfigPath">
-                            （{{ openclawConfigExists ? '已存在' : '不存在，将在应用时创建' }}）
-                        </span>
-                    </div>
-                    <div class="btn-group" style="justify-content:flex-start;">
-                        <button class="btn btn-confirm secondary" @click="loadOpenclawConfigFromFile" :disabled="openclawFileLoading">
-                            {{ openclawFileLoading ? '加载中...' : '加载当前配置' }}
-                        </button>
-                    </div>
-                </div>
-
-                <div class="form-group">
-                    <label class="form-label">OpenClaw 配置（JSON5）</label>
-                    <textarea
-                        v-model="openclawEditing.content"
-                        class="form-input template-editor"
-                        spellcheck="false"
-                        placeholder="在这里编辑 OpenClaw 配置（JSON5）"></textarea>
-                    <div class="template-editor-warning">
-                        保存仅写入本地配置库；点击“保存并应用”后会写入 openclaw.json。
-                    </div>
-                </div>
-
-                <div class="btn-group">
-                    <button class="btn btn-cancel" @click="closeOpenclawConfigModal">取消</button>
-                    <button class="btn btn-confirm" @click="saveOpenclawConfig" :disabled="openclawSaving">
-                        {{ openclawSaving ? '保存中...' : '保存' }}
-                    </button>
-                    <button class="btn btn-confirm secondary" @click="saveAndApplyOpenclawConfig" :disabled="openclawApplying">
-                        {{ openclawApplying ? '应用中...' : '保存并应用' }}
-                    </button>
-                </div>
-            </div>
-        </div>
-
-        <div v-if="showConfigTemplateModal" class="modal-overlay" @click.self="closeConfigTemplateModal">
-            <div class="modal modal-wide">
-                <div class="modal-title">Config 模板编辑器（手动确认应用）</div>
+                    <button class="btn btn-cancel" @click="closeOpenclawConfigModal">取消</button>
+                    <button class="btn btn-confirm" @click="saveOpenclawConfig" :disabled="openclawSaving">
+                        {{ openclawSaving ? '保存中...' : '保存' }}
+                    </button>
+                    <button class="btn btn-confirm secondary" @click="saveAndApplyOpenclawConfig" :disabled="openclawApplying">
+                        {{ openclawApplying ? '应用中...' : '保存并应用' }}
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="showConfigTemplateModal" class="modal-overlay" @click.self="closeConfigTemplateModal">
+            <div class="modal modal-wide">
+                <div class="modal-title">Config 模板编辑器（手动确认应用）</div>
 
                 <div class="form-group">
                     <label class="form-label">config.toml 模板</label>
@@ -2288,9 +2520,9 @@
             </div>
         </div>
 
-        <div v-if="showAgentsModal" class="modal-overlay" @click.self="closeAgentsModal">
-            <div class="modal modal-wide">
-                <div class="modal-title">{{ agentsModalTitle }}</div>
+        <div v-if="showAgentsModal" class="modal-overlay" @click.self="closeAgentsModal">
+            <div class="modal modal-wide">
+                <div class="modal-title">{{ agentsModalTitle }}</div>
 
                 <div class="form-group">
                     <label class="form-label">目标文件</label>
@@ -2304,16 +2536,16 @@
 
                 <div class="form-group">
                     <label class="form-label">AGENTS.md 内容</label>
-                    <textarea
-                        v-model="agentsContent"
-                        class="form-input template-editor"
-                        spellcheck="false"
-                        :readonly="agentsLoading"
-                        placeholder="在这里编辑 AGENTS.md 内容"></textarea>
-                    <div class="template-editor-warning">
-                        {{ agentsModalHint }}
-                    </div>
-                </div>
+                    <textarea
+                        v-model="agentsContent"
+                        class="form-input template-editor"
+                        spellcheck="false"
+                        :readonly="agentsLoading"
+                        placeholder="在这里编辑 AGENTS.md 内容"></textarea>
+                    <div class="template-editor-warning">
+                        {{ agentsModalHint }}
+                    </div>
+                </div>
 
                 <div class="btn-group">
                     <button class="btn btn-cancel" @click="closeAgentsModal">取消</button>
@@ -2330,22 +2562,22 @@
         <div v-if="message" :class="['toast', messageType]">{{ message }}</div>
     </div>
 
-    <script>
-        const { createApp } = Vue;
-        const API_BASE = 'http://localhost:3737';
-        const DEFAULT_OPENCLAW_TEMPLATE = `{
-  // OpenClaw config (JSON5)
-  agent: {
-    model: "gpt-4.1"
-  },
-  agents: {
-    defaults: {
-      workspace: "~/.openclaw/workspace"
-    }
-  }
-}`;
-
-        async function api(action, params = {}) {
+    <script>
+        const { createApp } = Vue;
+        const API_BASE = 'http://localhost:3737';
+        const DEFAULT_OPENCLAW_TEMPLATE = `{
+  // OpenClaw config (JSON5)
+  agent: {
+    model: "gpt-4.1"
+  },
+  agents: {
+    defaults: {
+      workspace: "~/.openclaw/workspace"
+    }
+  }
+}`;
+
+        async function api(action, params = {}) {
             const res = await fetch(`${API_BASE}/api`, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
@@ -2362,6 +2594,13 @@
                     currentModel: '',
                     providersList: [],
                     models: [],
+                    codexModelsLoading: false,
+                    modelsSource: 'remote',
+                    modelsHasCurrent: true,
+                    claudeModels: [],
+                    claudeModelsSource: 'idle',
+                    claudeModelsHasCurrent: true,
+                    claudeModelsLoading: false,
                     loading: true,
                     initError: '',
                     message: '',
@@ -2370,23 +2609,23 @@
                     showEditModal: false,
                     showModelModal: false,
                     showModelListModal: false,
-                    showClaudeConfigModal: false,
-                    showEditConfigModal: false,
-                    showOpenclawConfigModal: false,
-                    showConfigTemplateModal: false,
-                    showAgentsModal: false,
-                    configTemplateContent: '',
-                    configTemplateApplying: false,
-                    agentsContent: '',
-                    agentsPath: '',
-                    agentsExists: false,
-                    agentsLineEnding: '\n',
-                    agentsLoading: false,
-                    agentsSaving: false,
-                    agentsContext: 'codex',
-                    agentsModalTitle: 'AGENTS.md 编辑器',
-                    agentsModalHint: '保存后会写入目标 AGENTS.md（与 config.toml 同级）。',
-                    sessionsList: [],
+                    showClaudeConfigModal: false,
+                    showEditConfigModal: false,
+                    showOpenclawConfigModal: false,
+                    showConfigTemplateModal: false,
+                    showAgentsModal: false,
+                    configTemplateContent: '',
+                    configTemplateApplying: false,
+                    agentsContent: '',
+                    agentsPath: '',
+                    agentsExists: false,
+                    agentsLineEnding: '\n',
+                    agentsLoading: false,
+                    agentsSaving: false,
+                    agentsContext: 'codex',
+                    agentsModalTitle: 'AGENTS.md 编辑器',
+                    agentsModalHint: '保存后会写入目标 AGENTS.md（与 config.toml 同级）。',
+                    sessionsList: [],
                     sessionsLoading: false,
                     sessionFilterSource: 'all',
                     sessionPathFilter: '',
@@ -2417,10 +2656,11 @@
                     speedLoading: {},
                     newProvider: { name: '', url: '', key: '' },
                     editingProvider: { name: '', url: '', key: '' },
-                    newModelName: '',
-                    currentClaudeConfig: '',
-                    editingConfig: { name: '', apiKey: '', baseUrl: '', model: '' },
-                    claudeConfigs: {
+                    newModelName: '',
+                    currentClaudeConfig: '',
+                    currentClaudeModel: '',
+                    editingConfig: { name: '', apiKey: '', baseUrl: '', model: '' },
+                    claudeConfigs: {
                         '智谱GLM': {
                             apiKey: '',
                             baseUrl: 'https://open.bigmodel.cn/api/anthropic',
@@ -2428,33 +2668,38 @@
                             hasKey: false
                         }
                     },
-                    newClaudeConfig: {
-                        name: '',
-                        apiKey: '',
-                        baseUrl: 'https://open.bigmodel.cn/api/anthropic',
-                        model: 'glm-4.7'
-                    },
-                    currentOpenclawConfig: '',
-                    openclawConfigs: {
-                        '默认配置': {
-                            content: DEFAULT_OPENCLAW_TEMPLATE
-                        }
-                    },
-                    openclawEditing: { name: '', content: '', lockName: false },
-                    openclawEditorTitle: '添加 OpenClaw 配置',
-                    openclawConfigPath: '',
-                    openclawConfigExists: false,
-                    openclawLineEnding: '\n',
-                    openclawFileLoading: false,
-                    openclawSaving: false,
-                    openclawApplying: false
-                }
-            },
-            mounted() {
-                const savedConfigs = localStorage.getItem('claudeConfigs');
-                if (savedConfigs) {
-                    try {
-                        this.claudeConfigs = JSON.parse(savedConfigs);
+                    newClaudeConfig: {
+                        name: '',
+                        apiKey: '',
+                        baseUrl: 'https://open.bigmodel.cn/api/anthropic',
+                        model: 'glm-4.7'
+                    },
+                    currentOpenclawConfig: '',
+                    openclawConfigs: {
+                        '默认配置': {
+                            content: DEFAULT_OPENCLAW_TEMPLATE
+                        }
+                    },
+                    openclawEditing: { name: '', content: '', lockName: false },
+                    openclawEditorTitle: '添加 OpenClaw 配置',
+                    openclawConfigPath: '',
+                    openclawConfigExists: false,
+                    openclawLineEnding: '\n',
+                    openclawFileLoading: false,
+                    openclawSaving: false,
+                    openclawApplying: false,
+                    recentConfigs: [],
+                    recentLoading: false,
+                    healthCheckLoading: false,
+                    healthCheckResult: null,
+                    healthCheckRemote: false
+                }
+            },
+            mounted() {
+                const savedConfigs = localStorage.getItem('claudeConfigs');
+                if (savedConfigs) {
+                    try {
+                        this.claudeConfigs = JSON.parse(savedConfigs);
                         for (const [name, config] of Object.entries(this.claudeConfigs)) {
                             if (config.apiKey && config.apiKey.includes('****')) {
                                 config.apiKey = '';
@@ -2469,37 +2714,41 @@
                         }
                     } catch (e) {
                         console.error('加载 Claude 配置失败:', e);
-                    }
-                }
-                const savedOpenclawConfigs = localStorage.getItem('openclawConfigs');
-                if (savedOpenclawConfigs) {
-                    try {
-                        this.openclawConfigs = JSON.parse(savedOpenclawConfigs);
-                        const configNames = Object.keys(this.openclawConfigs);
-                        if (configNames.length > 0) {
-                            this.currentOpenclawConfig = configNames[0];
-                        }
-                    } catch (e) {
-                        console.error('加载 OpenClaw 配置失败:', e);
-                    }
-                } else {
-                    const configNames = Object.keys(this.openclawConfigs);
-                    if (configNames.length > 0) {
-                        this.currentOpenclawConfig = configNames[0];
-                    }
-                }
-                this.loadAll();
-            },
+                    }
+                }
+                if (!this.currentClaudeConfig) {
+                    const configNames = Object.keys(this.claudeConfigs);
+                    if (configNames.length > 0) {
+                        this.currentClaudeConfig = configNames[0];
+                    }
+                }
+                this.syncClaudeModelFromConfig();
+                const savedOpenclawConfigs = localStorage.getItem('openclawConfigs');
+                if (savedOpenclawConfigs) {
+                    try {
+                        this.openclawConfigs = JSON.parse(savedOpenclawConfigs);
+                        const configNames = Object.keys(this.openclawConfigs);
+                        if (configNames.length > 0) {
+                            this.currentOpenclawConfig = configNames[0];
+                        }
+                    } catch (e) {
+                        console.error('加载 OpenClaw 配置失败:', e);
+                    }
+                } else {
+                    const configNames = Object.keys(this.openclawConfigs);
+                    if (configNames.length > 0) {
+                        this.currentOpenclawConfig = configNames[0];
+                    }
+                }
+                this.loadAll();
+            },
             methods: {
                 async loadAll() {
                     this.loading = true;
                     this.initError = '';
                     try {
-                        const [statusRes, listRes, modelsRes] = await Promise.all([
-                            api('status'),
-                            api('list'),
-                            api('models')
-                        ]);
+                        const statusRes = await api('status');
+                        const listRes = await api('list');
 
                         if (statusRes.error) {
                             this.initError = statusRes.error;
@@ -2507,14 +2756,16 @@
                             this.currentProvider = statusRes.provider;
                             this.currentModel = statusRes.model;
                             this.providersList = listRes.providers;
-                            this.models = modelsRes.models;
+                            await this.loadModelsForProvider(this.currentProvider);
                             if (statusRes.configReady === false) {
                                 this.showMessage(statusRes.configNotice || '未检测到 config.toml，已加载默认模板；请在模板编辑器确认后创建。', 'info');
                             }
                             if (statusRes.initNotice) {
                                 this.showMessage(statusRes.initNotice, 'info');
                             }
+                            this.maybeShowStarPrompt();
                         }
+                        await this.loadRecentConfigs();
                     } catch (e) {
                         this.initError = '连接失败: ' + e.message;
                     } finally {
@@ -2522,8 +2773,129 @@
                     }
                 },
 
+                async loadModelsForProvider(providerName) {
+                    this.codexModelsLoading = true;
+                    if (!providerName) {
+                        this.models = [];
+                        this.modelsSource = 'unlimited';
+                        this.modelsHasCurrent = true;
+                        this.codexModelsLoading = false;
+                        return;
+                    }
+                    try {
+                        const res = await api('models', { provider: providerName });
+                        if (res.unlimited) {
+                            this.models = [];
+                            this.modelsSource = 'unlimited';
+                            this.modelsHasCurrent = true;
+                            return;
+                        }
+                        if (res.error) {
+                            this.showMessage('模型列表获取失败: ' + res.error, 'error');
+                            this.models = [];
+                            this.modelsSource = 'error';
+                            this.modelsHasCurrent = true;
+                            return;
+                        }
+                        const list = Array.isArray(res.models) ? res.models : [];
+                        this.models = list;
+                        this.modelsSource = res.source || 'remote';
+                        this.modelsHasCurrent = !!this.currentModel && list.includes(this.currentModel);
+                    } catch (e) {
+                        this.showMessage('模型列表获取失败: ' + e.message, 'error');
+                        this.models = [];
+                        this.modelsSource = 'error';
+                        this.modelsHasCurrent = true;
+                    } finally {
+                        this.codexModelsLoading = false;
+                    }
+                },
+
+                getCurrentClaudeConfig() {
+                    if (!this.currentClaudeConfig) return null;
+                    return this.claudeConfigs[this.currentClaudeConfig] || null;
+                },
+
+                syncClaudeModelFromConfig() {
+                    const config = this.getCurrentClaudeConfig();
+                    this.currentClaudeModel = config && config.model ? config.model : '';
+                },
+
+                refreshClaudeModelContext() {
+                    this.syncClaudeModelFromConfig();
+                    this.loadClaudeModels();
+                },
+
+                resetClaudeModelsState() {
+                    this.claudeModels = [];
+                    this.claudeModelsSource = 'idle';
+                    this.claudeModelsHasCurrent = true;
+                    this.claudeModelsLoading = false;
+                },
+
+                updateClaudeModelsCurrent() {
+                    const currentModel = (this.currentClaudeModel || '').trim();
+                    this.claudeModelsHasCurrent = !!currentModel && this.claudeModels.includes(currentModel);
+                },
+
+                async loadClaudeModels() {
+                    const config = this.getCurrentClaudeConfig();
+                    const baseUrl = (config.baseUrl || '').trim();
+                    const apiKey = (config.apiKey || '').trim();
+
+                    if (!baseUrl) {
+                        this.resetClaudeModelsState();
+                        return;
+                    }
+
+                    this.claudeModelsLoading = true;
+                    try {
+                        const res = await api('models-by-url', { baseUrl, apiKey });
+                        if (res.unlimited) {
+                            this.claudeModels = [];
+                            this.claudeModelsSource = 'unlimited';
+                            this.claudeModelsHasCurrent = true;
+                            return;
+                        }
+                        if (res.error) {
+                            this.showMessage('模型列表获取失败: ' + res.error, 'error');
+                            this.claudeModels = [];
+                            this.claudeModelsSource = 'error';
+                            this.claudeModelsHasCurrent = true;
+                            return;
+                        }
+                        const list = Array.isArray(res.models) ? res.models : [];
+                        this.claudeModels = list;
+                        this.claudeModelsSource = res.source || 'remote';
+                        this.updateClaudeModelsCurrent();
+                    } catch (e) {
+                        this.showMessage('模型列表获取失败: ' + e.message, 'error');
+                        this.claudeModels = [];
+                        this.claudeModelsSource = 'error';
+                        this.claudeModelsHasCurrent = true;
+                    } finally {
+                        this.claudeModelsLoading = false;
+                    }
+                },
+
+                openClaudeConfigModal() {
+                    this.showClaudeConfigModal = true;
+                },
+
+                maybeShowStarPrompt() {
+                    const storageKey = 'codexmateStarPrompted';
+                    if (localStorage.getItem(storageKey)) {
+                        return;
+                    }
+                    this.showMessage('如果 Codex Mate 对你有帮助，欢迎到 GitHub 点个 Star。', 'info');
+                    localStorage.setItem(storageKey, '1');
+                },
+
                 switchConfigMode(mode) {
                     this.configMode = mode;
+                    if (mode === 'claude') {
+                        this.refreshClaudeModelContext();
+                    }
                     if (mode === 'sessions' && this.sessionsList.length === 0) {
                         this.loadSessions();
                     }
@@ -2915,6 +3287,7 @@
 
                 async switchProvider(name) {
                     this.currentProvider = name;
+                    await this.loadModelsForProvider(name);
                     await this.openConfigTemplateEditor();
                 },
 
@@ -2922,6 +3295,60 @@
                     await this.openConfigTemplateEditor();
                 },
 
+                async loadRecentConfigs() {
+                    this.recentLoading = true;
+                    try {
+                        const res = await api('get-recent-configs');
+                        if (res && Array.isArray(res.items)) {
+                            this.recentConfigs = res.items;
+                        } else {
+                            this.recentConfigs = [];
+                        }
+                    } catch (e) {
+                        this.recentConfigs = [];
+                    } finally {
+                        this.recentLoading = false;
+                    }
+                },
+
+                async applyRecentConfig(item) {
+                    if (!item || !item.provider || !item.model) {
+                        this.showMessage('最近配置无效，无法应用', 'error');
+                        return;
+                    }
+                    this.currentProvider = item.provider;
+                    this.currentModel = item.model;
+                    await this.openConfigTemplateEditor({
+                        appendHint: '最近使用配置，确认后将写入 config.toml'
+                    });
+                },
+
+                async runHealthCheck() {
+                    this.healthCheckLoading = true;
+                    this.healthCheckResult = null;
+                    try {
+                        const res = await api('config-health-check', {
+                            remote: this.healthCheckRemote
+                        });
+                        if (res && typeof res === 'object') {
+                            this.healthCheckResult = res;
+                            if (res.ok) {
+                                this.showMessage('健康检查通过', 'success');
+                            } else {
+                                this.showMessage('发现配置问题，请查看详情', 'error');
+                            }
+                        } else {
+                            this.healthCheckResult = null;
+                            this.showMessage('健康检查失败：返回数据异常', 'error');
+                        }
+                    } catch (e) {
+                        this.healthCheckResult = null;
+                        this.showMessage('健康检查失败: ' + e.message, 'error');
+                    } finally {
+                        this.healthCheckLoading = false;
+                    }
+                },
+
                 escapeTomlString(value) {
                     return String(value || '')
                         .replace(/\\/g, '\\\\')
@@ -2984,84 +3411,84 @@
                     }
                 },
 
-                async openAgentsEditor() {
-                    this.setAgentsModalContext('codex');
-                    this.agentsLoading = true;
-                    try {
-                        const res = await api('get-agents-file');
-                        if (res.error) {
-                            this.showMessage(res.error, 'error');
+                async openAgentsEditor() {
+                    this.setAgentsModalContext('codex');
+                    this.agentsLoading = true;
+                    try {
+                        const res = await api('get-agents-file');
+                        if (res.error) {
+                            this.showMessage(res.error, 'error');
+                            return;
+                        }
+                        this.agentsContent = res.content || '';
+                        this.agentsPath = res.path || '';
+                        this.agentsExists = !!res.exists;
+                        this.agentsLineEnding = res.lineEnding === '\r\n' ? '\r\n' : '\n';
+                        this.showAgentsModal = true;
+                    } catch (e) {
+                        this.showMessage('加载 AGENTS.md 失败: ' + e.message, 'error');
+                    } finally {
+                        this.agentsLoading = false;
+                    }
+                },
+
+                async openOpenclawAgentsEditor() {
+                    this.setAgentsModalContext('openclaw');
+                    this.agentsLoading = true;
+                    try {
+                        const res = await api('get-openclaw-agents-file');
+                        if (res.error) {
+                            this.showMessage(res.error, 'error');
                             return;
                         }
+                        if (res.configError) {
+                            this.showMessage(`OpenClaw 配置解析失败，已使用默认 Workspace：${res.configError}`, 'error');
+                        }
                         this.agentsContent = res.content || '';
                         this.agentsPath = res.path || '';
                         this.agentsExists = !!res.exists;
-                        this.agentsLineEnding = res.lineEnding === '\r\n' ? '\r\n' : '\n';
-                        this.showAgentsModal = true;
-                    } catch (e) {
-                        this.showMessage('加载 AGENTS.md 失败: ' + e.message, 'error');
-                    } finally {
-                        this.agentsLoading = false;
-                    }
-                },
-
-                async openOpenclawAgentsEditor() {
-                    this.setAgentsModalContext('openclaw');
-                    this.agentsLoading = true;
-                    try {
-                        const res = await api('get-openclaw-agents-file');
-                        if (res.error) {
-                            this.showMessage(res.error, 'error');
-                            return;
-                        }
-                        if (res.configError) {
-                            this.showMessage(`OpenClaw 配置解析失败，已使用默认 Workspace：${res.configError}`, 'error');
-                        }
-                        this.agentsContent = res.content || '';
-                        this.agentsPath = res.path || '';
-                        this.agentsExists = !!res.exists;
-                        this.agentsLineEnding = res.lineEnding === '\r\n' ? '\r\n' : '\n';
-                        this.showAgentsModal = true;
-                    } catch (e) {
-                        this.showMessage('加载 OpenClaw AGENTS.md 失败: ' + e.message, 'error');
-                    } finally {
-                        this.agentsLoading = false;
-                    }
-                },
-
-                setAgentsModalContext(context) {
-                    this.agentsContext = context === 'openclaw' ? 'openclaw' : 'codex';
-                    if (this.agentsContext === 'openclaw') {
-                        this.agentsModalTitle = 'OpenClaw AGENTS.md 编辑器';
-                        this.agentsModalHint = '保存后会写入 OpenClaw Workspace 下的 AGENTS.md。';
-                    } else {
-                        this.agentsModalTitle = 'AGENTS.md 编辑器';
-                        this.agentsModalHint = '保存后会写入目标 AGENTS.md（与 config.toml 同级）。';
-                    }
-                },
-
-                closeAgentsModal() {
-                    this.showAgentsModal = false;
-                    this.agentsContent = '';
-                    this.agentsPath = '';
-                    this.agentsExists = false;
-                    this.agentsLineEnding = '\n';
-                    this.agentsSaving = false;
-                    this.setAgentsModalContext('codex');
-                },
-
-                async applyAgentsContent() {
-                    this.agentsSaving = true;
-                    try {
-                        const action = this.agentsContext === 'openclaw'
-                            ? 'apply-openclaw-agents-file'
-                            : 'apply-agents-file';
-                        const res = await api(action, {
-                            content: this.agentsContent,
-                            lineEnding: this.agentsLineEnding
-                        });
-                        if (res.error) {
-                            this.showMessage(res.error, 'error');
+                        this.agentsLineEnding = res.lineEnding === '\r\n' ? '\r\n' : '\n';
+                        this.showAgentsModal = true;
+                    } catch (e) {
+                        this.showMessage('加载 OpenClaw AGENTS.md 失败: ' + e.message, 'error');
+                    } finally {
+                        this.agentsLoading = false;
+                    }
+                },
+
+                setAgentsModalContext(context) {
+                    this.agentsContext = context === 'openclaw' ? 'openclaw' : 'codex';
+                    if (this.agentsContext === 'openclaw') {
+                        this.agentsModalTitle = 'OpenClaw AGENTS.md 编辑器';
+                        this.agentsModalHint = '保存后会写入 OpenClaw Workspace 下的 AGENTS.md。';
+                    } else {
+                        this.agentsModalTitle = 'AGENTS.md 编辑器';
+                        this.agentsModalHint = '保存后会写入目标 AGENTS.md（与 config.toml 同级）。';
+                    }
+                },
+
+                closeAgentsModal() {
+                    this.showAgentsModal = false;
+                    this.agentsContent = '';
+                    this.agentsPath = '';
+                    this.agentsExists = false;
+                    this.agentsLineEnding = '\n';
+                    this.agentsSaving = false;
+                    this.setAgentsModalContext('codex');
+                },
+
+                async applyAgentsContent() {
+                    this.agentsSaving = true;
+                    try {
+                        const action = this.agentsContext === 'openclaw'
+                            ? 'apply-openclaw-agents-file'
+                            : 'apply-agents-file';
+                        const res = await api(action, {
+                            content: this.agentsContent,
+                            lineEnding: this.agentsLineEnding
+                        });
+                        if (res.error) {
+                            this.showMessage(res.error, 'error');
                             return;
                         }
                         this.showMessage('AGENTS.md 已保存', 'success');
@@ -3186,6 +3613,35 @@
 
                 switchClaudeConfig(name) {
                     this.currentClaudeConfig = name;
+                    this.refreshClaudeModelContext();
+                },
+
+                onClaudeModelChange() {
+                    const name = this.currentClaudeConfig;
+                    if (!name) {
+                        this.showMessage('请先选择配置', 'error');
+                        return;
+                    }
+                    const model = (this.currentClaudeModel || '').trim();
+                    if (!model) {
+                        this.showMessage('请输入模型', 'error');
+                        return;
+                    }
+                    const existing = this.claudeConfigs[name] || {};
+                    this.currentClaudeModel = model;
+                    this.claudeConfigs[name] = {
+                        apiKey: existing.apiKey || '',
+                        baseUrl: existing.baseUrl || '',
+                        model: model,
+                        hasKey: !!existing.apiKey
+                    };
+                    this.saveClaudeConfigs();
+                    this.updateClaudeModelsCurrent();
+                    if (!this.claudeConfigs[name].apiKey) {
+                        this.showMessage('该配置未设置 API Key，请先编辑', 'error');
+                        return;
+                    }
+                    this.applyClaudeConfig(name);
                 },
 
                 saveClaudeConfigs() {
@@ -3214,6 +3670,9 @@
                     this.saveClaudeConfigs();
                     this.showMessage('配置已更新', 'success');
                     this.closeEditConfigModal();
+                    if (name === this.currentClaudeConfig) {
+                        this.refreshClaudeModelContext();
+                    }
                 },
 
                 closeEditConfigModal() {
@@ -3233,7 +3692,12 @@
 
                     const config = this.claudeConfigs[name];
                     if (!config.apiKey) {
-                        return this.showMessage('请先输入 API Key', 'error');
+                        this.showMessage('已保存，未应用：请先输入 API Key', 'info');
+                        this.closeEditConfigModal();
+                        if (name === this.currentClaudeConfig) {
+                            this.refreshClaudeModelContext();
+                        }
+                        return;
                     }
 
                     const res = await api('apply-claude-config', { config });
@@ -3243,30 +3707,9 @@
                         const targetTip = res.targetPath ? `（${res.targetPath}）` : '';
                         this.showMessage(`已保存并应用到 Claude 配置${targetTip}`, 'success');
                         this.closeEditConfigModal();
-                    }
-                },
-
-                async saveAndApplyEnvCompat() {
-                    const name = this.editingConfig.name;
-                    this.claudeConfigs[name] = {
-                        apiKey: this.editingConfig.apiKey,
-                        baseUrl: this.editingConfig.baseUrl,
-                        model: this.editingConfig.model,
-                        hasKey: !!this.editingConfig.apiKey
-                    };
-                    this.saveClaudeConfigs();
-
-                    const config = this.claudeConfigs[name];
-                    if (!config.apiKey) {
-                        return this.showMessage('请先输入 API Key', 'error');
-                    }
-
-                    const res = await api('apply-env', { config });
-                    if (res.error || res.success === false) {
-                        this.showMessage(res.error || '应用环境变量失败', 'error');
-                    } else {
-                        this.showMessage('已保存并应用到系统环境变量（兼容模式）', 'success');
-                        this.closeEditConfigModal();
+                        if (name === this.currentClaudeConfig) {
+                            this.refreshClaudeModelContext();
+                        }
                     }
                 },
 
@@ -3290,6 +3733,7 @@
                     this.saveClaudeConfigs();
                     this.showMessage('配置已添加', 'success');
                     this.closeClaudeConfigModal();
+                    this.refreshClaudeModelContext();
                 },
 
                 deleteClaudeConfig(name) {
@@ -3305,10 +3749,12 @@
                     }
                     this.saveClaudeConfigs();
                     this.showMessage('配置已删除', 'success');
+                    this.refreshClaudeModelContext();
                 },
 
                 async applyClaudeConfig(name) {
                     this.currentClaudeConfig = name;
+                    this.refreshClaudeModelContext();
                     const config = this.claudeConfigs[name];
 
                     if (!config.apiKey) {
@@ -3324,187 +3770,187 @@
                     }
                 },
 
-                closeClaudeConfigModal() {
-                    this.showClaudeConfigModal = false;
-                    this.newClaudeConfig = {
-                        name: '',
-                        apiKey: '',
-                        baseUrl: 'https://open.bigmodel.cn/api/anthropic',
-                        model: 'glm-4.7'
-                    };
-                },
-
-                openclawHasContent(config) {
-                    return !!(config && typeof config.content === 'string' && config.content.trim());
-                },
-
-                openclawSubtitle(config) {
-                    if (!this.openclawHasContent(config)) {
-                        return '未设置配置';
-                    }
-                    const length = config.content.trim().length;
-                    return `已保存 ${length} 字符`;
-                },
-
-                saveOpenclawConfigs() {
-                    localStorage.setItem('openclawConfigs', JSON.stringify(this.openclawConfigs));
-                },
-
-                openOpenclawAddModal() {
-                    this.openclawEditorTitle = '添加 OpenClaw 配置';
-                    this.openclawEditing = {
-                        name: '',
-                        content: DEFAULT_OPENCLAW_TEMPLATE,
-                        lockName: false
-                    };
-                    this.openclawConfigPath = '';
-                    this.openclawConfigExists = false;
-                    this.openclawLineEnding = '\n';
-                    this.showOpenclawConfigModal = true;
-                },
-
-                openOpenclawEditModal(name) {
-                    const config = this.openclawConfigs[name];
-                    this.openclawEditorTitle = `编辑 OpenClaw 配置: ${name}`;
-                    this.openclawEditing = {
-                        name,
-                        content: (config && config.content) ? config.content : '',
-                        lockName: true
-                    };
-                    this.showOpenclawConfigModal = true;
-                },
-
-                closeOpenclawConfigModal() {
-                    this.showOpenclawConfigModal = false;
-                    this.openclawEditing = { name: '', content: '', lockName: false };
-                    this.openclawSaving = false;
-                    this.openclawApplying = false;
-                },
-
-                async loadOpenclawConfigFromFile() {
-                    this.openclawFileLoading = true;
-                    try {
-                        const res = await api('get-openclaw-config');
-                        if (res.error) {
-                            this.showMessage(res.error, 'error');
-                            return;
-                        }
-                        this.openclawConfigPath = res.path || '';
-                        this.openclawConfigExists = !!res.exists;
-                        this.openclawLineEnding = res.lineEnding === '\r\n' ? '\r\n' : '\n';
-                        if (res.content && res.content.trim()) {
-                            this.openclawEditing.content = res.content;
-                        } else if (!this.openclawEditing.content) {
-                            this.openclawEditing.content = DEFAULT_OPENCLAW_TEMPLATE;
-                        }
-                        this.showMessage('已加载当前 OpenClaw 配置', 'success');
-                    } catch (e) {
-                        this.showMessage('加载 OpenClaw 配置失败: ' + e.message, 'error');
-                    } finally {
-                        this.openclawFileLoading = false;
-                    }
-                },
-
-                persistOpenclawConfig({ closeModal = true } = {}) {
-                    if (!this.openclawEditing.name || !this.openclawEditing.name.trim()) {
-                        this.showMessage('请输入配置名称', 'error');
-                        return '';
-                    }
-                    const name = this.openclawEditing.name.trim();
-                    if (!this.openclawEditing.lockName && this.openclawConfigs[name]) {
-                        this.showMessage('配置名称已存在', 'error');
-                        return '';
-                    }
-                    if (!this.openclawEditing.content || !this.openclawEditing.content.trim()) {
-                        this.showMessage('配置内容不能为空', 'error');
-                        return '';
-                    }
-
-                    this.openclawConfigs[name] = {
-                        content: this.openclawEditing.content
-                    };
-                    this.currentOpenclawConfig = name;
-                    this.saveOpenclawConfigs();
-                    if (closeModal) {
-                        this.closeOpenclawConfigModal();
-                    }
-                    return name;
-                },
-
-                async saveOpenclawConfig() {
-                    this.openclawSaving = true;
-                    try {
-                        const name = this.persistOpenclawConfig();
-                        if (!name) return;
-                        this.showMessage('OpenClaw 配置已保存', 'success');
-                    } finally {
-                        this.openclawSaving = false;
-                    }
-                },
-
-                async saveAndApplyOpenclawConfig() {
-                    this.openclawApplying = true;
-                    try {
-                        const name = this.persistOpenclawConfig({ closeModal: false });
-                        if (!name) return;
-                        const config = this.openclawConfigs[name];
-                        const res = await api('apply-openclaw-config', {
-                            content: config.content,
-                            lineEnding: this.openclawLineEnding
-                        });
-                        if (res.error || res.success === false) {
-                            this.showMessage(res.error || '应用 OpenClaw 配置失败', 'error');
-                            return;
-                        }
-                        this.openclawConfigPath = res.targetPath || this.openclawConfigPath;
-                        this.openclawConfigExists = true;
-                        const targetTip = res.targetPath ? `（${res.targetPath}）` : '';
-                        this.showMessage(`已保存并应用 OpenClaw 配置${targetTip}`, 'success');
-                        this.closeOpenclawConfigModal();
-                    } catch (e) {
-                        this.showMessage('应用 OpenClaw 配置失败: ' + e.message, 'error');
-                    } finally {
-                        this.openclawApplying = false;
-                    }
-                },
-
-                deleteOpenclawConfig(name) {
-                    if (Object.keys(this.openclawConfigs).length <= 1) {
-                        return this.showMessage('至少保留一个配置', 'error');
-                    }
-                    if (!confirm(`确定删除配置 "${name}"?`)) return;
-                    delete this.openclawConfigs[name];
-                    if (this.currentOpenclawConfig === name) {
-                        this.currentOpenclawConfig = Object.keys(this.openclawConfigs)[0];
-                    }
-                    this.saveOpenclawConfigs();
-                    this.showMessage('OpenClaw 配置已删除', 'success');
-                },
-
-                async applyOpenclawConfig(name) {
-                    this.currentOpenclawConfig = name;
-                    const config = this.openclawConfigs[name];
-                    if (!this.openclawHasContent(config)) {
-                        return this.showMessage('该配置为空，请先编辑', 'error');
-                    }
-                    const res = await api('apply-openclaw-config', {
-                        content: config.content,
-                        lineEnding: this.openclawLineEnding
-                    });
-                    if (res.error || res.success === false) {
-                        this.showMessage(res.error || '应用 OpenClaw 配置失败', 'error');
-                    } else {
-                        this.openclawConfigPath = res.targetPath || this.openclawConfigPath;
-                        this.openclawConfigExists = true;
-                        const targetTip = res.targetPath ? `（${res.targetPath}）` : '';
-                        this.showMessage(`已应用 OpenClaw 配置: ${name}${targetTip}`, 'success');
-                    }
-                },
-
-                formatLatency(result) {
-                    if (!result) return '';
-                    if (!result.ok) return result.status ? `ERR ${result.status}` : 'ERR';
-                    const ms = typeof result.durationMs === 'number' ? result.durationMs : 0;
+                closeClaudeConfigModal() {
+                    this.showClaudeConfigModal = false;
+                    this.newClaudeConfig = {
+                        name: '',
+                        apiKey: '',
+                        baseUrl: 'https://open.bigmodel.cn/api/anthropic',
+                        model: 'glm-4.7'
+                    };
+                },
+
+                openclawHasContent(config) {
+                    return !!(config && typeof config.content === 'string' && config.content.trim());
+                },
+
+                openclawSubtitle(config) {
+                    if (!this.openclawHasContent(config)) {
+                        return '未设置配置';
+                    }
+                    const length = config.content.trim().length;
+                    return `已保存 ${length} 字符`;
+                },
+
+                saveOpenclawConfigs() {
+                    localStorage.setItem('openclawConfigs', JSON.stringify(this.openclawConfigs));
+                },
+
+                openOpenclawAddModal() {
+                    this.openclawEditorTitle = '添加 OpenClaw 配置';
+                    this.openclawEditing = {
+                        name: '',
+                        content: DEFAULT_OPENCLAW_TEMPLATE,
+                        lockName: false
+                    };
+                    this.openclawConfigPath = '';
+                    this.openclawConfigExists = false;
+                    this.openclawLineEnding = '\n';
+                    this.showOpenclawConfigModal = true;
+                },
+
+                openOpenclawEditModal(name) {
+                    const config = this.openclawConfigs[name];
+                    this.openclawEditorTitle = `编辑 OpenClaw 配置: ${name}`;
+                    this.openclawEditing = {
+                        name,
+                        content: (config && config.content) ? config.content : '',
+                        lockName: true
+                    };
+                    this.showOpenclawConfigModal = true;
+                },
+
+                closeOpenclawConfigModal() {
+                    this.showOpenclawConfigModal = false;
+                    this.openclawEditing = { name: '', content: '', lockName: false };
+                    this.openclawSaving = false;
+                    this.openclawApplying = false;
+                },
+
+                async loadOpenclawConfigFromFile() {
+                    this.openclawFileLoading = true;
+                    try {
+                        const res = await api('get-openclaw-config');
+                        if (res.error) {
+                            this.showMessage(res.error, 'error');
+                            return;
+                        }
+                        this.openclawConfigPath = res.path || '';
+                        this.openclawConfigExists = !!res.exists;
+                        this.openclawLineEnding = res.lineEnding === '\r\n' ? '\r\n' : '\n';
+                        if (res.content && res.content.trim()) {
+                            this.openclawEditing.content = res.content;
+                        } else if (!this.openclawEditing.content) {
+                            this.openclawEditing.content = DEFAULT_OPENCLAW_TEMPLATE;
+                        }
+                        this.showMessage('已加载当前 OpenClaw 配置', 'success');
+                    } catch (e) {
+                        this.showMessage('加载 OpenClaw 配置失败: ' + e.message, 'error');
+                    } finally {
+                        this.openclawFileLoading = false;
+                    }
+                },
+
+                persistOpenclawConfig({ closeModal = true } = {}) {
+                    if (!this.openclawEditing.name || !this.openclawEditing.name.trim()) {
+                        this.showMessage('请输入配置名称', 'error');
+                        return '';
+                    }
+                    const name = this.openclawEditing.name.trim();
+                    if (!this.openclawEditing.lockName && this.openclawConfigs[name]) {
+                        this.showMessage('配置名称已存在', 'error');
+                        return '';
+                    }
+                    if (!this.openclawEditing.content || !this.openclawEditing.content.trim()) {
+                        this.showMessage('配置内容不能为空', 'error');
+                        return '';
+                    }
+
+                    this.openclawConfigs[name] = {
+                        content: this.openclawEditing.content
+                    };
+                    this.currentOpenclawConfig = name;
+                    this.saveOpenclawConfigs();
+                    if (closeModal) {
+                        this.closeOpenclawConfigModal();
+                    }
+                    return name;
+                },
+
+                async saveOpenclawConfig() {
+                    this.openclawSaving = true;
+                    try {
+                        const name = this.persistOpenclawConfig();
+                        if (!name) return;
+                        this.showMessage('OpenClaw 配置已保存', 'success');
+                    } finally {
+                        this.openclawSaving = false;
+                    }
+                },
+
+                async saveAndApplyOpenclawConfig() {
+                    this.openclawApplying = true;
+                    try {
+                        const name = this.persistOpenclawConfig({ closeModal: false });
+                        if (!name) return;
+                        const config = this.openclawConfigs[name];
+                        const res = await api('apply-openclaw-config', {
+                            content: config.content,
+                            lineEnding: this.openclawLineEnding
+                        });
+                        if (res.error || res.success === false) {
+                            this.showMessage(res.error || '应用 OpenClaw 配置失败', 'error');
+                            return;
+                        }
+                        this.openclawConfigPath = res.targetPath || this.openclawConfigPath;
+                        this.openclawConfigExists = true;
+                        const targetTip = res.targetPath ? `（${res.targetPath}）` : '';
+                        this.showMessage(`已保存并应用 OpenClaw 配置${targetTip}`, 'success');
+                        this.closeOpenclawConfigModal();
+                    } catch (e) {
+                        this.showMessage('应用 OpenClaw 配置失败: ' + e.message, 'error');
+                    } finally {
+                        this.openclawApplying = false;
+                    }
+                },
+
+                deleteOpenclawConfig(name) {
+                    if (Object.keys(this.openclawConfigs).length <= 1) {
+                        return this.showMessage('至少保留一个配置', 'error');
+                    }
+                    if (!confirm(`确定删除配置 "${name}"?`)) return;
+                    delete this.openclawConfigs[name];
+                    if (this.currentOpenclawConfig === name) {
+                        this.currentOpenclawConfig = Object.keys(this.openclawConfigs)[0];
+                    }
+                    this.saveOpenclawConfigs();
+                    this.showMessage('OpenClaw 配置已删除', 'success');
+                },
+
+                async applyOpenclawConfig(name) {
+                    this.currentOpenclawConfig = name;
+                    const config = this.openclawConfigs[name];
+                    if (!this.openclawHasContent(config)) {
+                        return this.showMessage('该配置为空，请先编辑', 'error');
+                    }
+                    const res = await api('apply-openclaw-config', {
+                        content: config.content,
+                        lineEnding: this.openclawLineEnding
+                    });
+                    if (res.error || res.success === false) {
+                        this.showMessage(res.error || '应用 OpenClaw 配置失败', 'error');
+                    } else {
+                        this.openclawConfigPath = res.targetPath || this.openclawConfigPath;
+                        this.openclawConfigExists = true;
+                        const targetTip = res.targetPath ? `（${res.targetPath}）` : '';
+                        this.showMessage(`已应用 OpenClaw 配置: ${name}${targetTip}`, 'success');
+                    }
+                },
+
+                formatLatency(result) {
+                    if (!result) return '';
+                    if (!result.ok) return result.status ? `ERR ${result.status}` : 'ERR';
+                    const ms = typeof result.durationMs === 'number' ? result.durationMs : 0;
                     return `${ms}ms`;
                 },
 
@@ -3537,10 +3983,3 @@
     </script>
 </body>
 </html>
-
-
-
-
-
-
-