codexmate 0.0.19 → 0.0.21

package/web-ui/partials/index/modals-basic.html

@@ -0,0 +1,156 @@
+        <!-- 添加提供商模态框 -->
+        <div v-if="showAddModal" class="modal-overlay" @click.self="closeAddModal">
+            <div class="modal" role="dialog" aria-modal="true" aria-labelledby="add-provider-modal-title">
+                <div class="modal-title" id="add-provider-modal-title">添加提供商</div>
+
+                <div class="form-group">
+                    <label class="form-label">名称</label>
+                    <input
+                        v-model="newProvider.name"
+                        :class="['form-input', { invalid: !!providerFieldError('add', 'name') }]"
+                        placeholder="例如: myapi"
+                        autocomplete="off"
+                        spellcheck="false"
+                        @blur="normalizeProviderDraft('add')">
+                    <div v-if="providerFieldError('add', 'name')" class="form-hint form-error">{{ providerFieldError('add', 'name') }}</div>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">API 端点</label>
+                    <input
+                        v-model="newProvider.url"
+                        :class="['form-input', { invalid: !!providerFieldError('add', 'url') }]"
+                        placeholder="https://api.example.com/v1"
+                        autocomplete="off"
+                        spellcheck="false"
+                        @blur="normalizeProviderDraft('add')">
+                    <div v-if="providerFieldError('add', 'url')" class="form-hint form-error">{{ providerFieldError('add', 'url') }}</div>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">认证密钥</label>
+                    <input v-model="newProvider.key" class="form-input" type="password" placeholder="sk-...">
+                </div>
+
+                <div class="btn-group">
+                    <button class="btn btn-cancel" @click="closeAddModal">取消</button>
+                    <button class="btn btn-confirm" @click="addProvider" :disabled="!canSubmitProvider('add')">添加</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- 编辑提供商模态框 -->
+        <div v-if="showEditModal" class="modal-overlay" @click.self="closeEditModal">
+            <div class="modal" role="dialog" aria-modal="true" aria-labelledby="edit-provider-modal-title">
+                <div class="modal-title" id="edit-provider-modal-title">编辑提供商</div>
+
+                <div class="form-group">
+                    <label class="form-label">名称</label>
+                    <input v-model="editingProvider.name" class="form-input" placeholder="提供商名称" readonly>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">API 端点</label>
+                    <input
+                        v-model="editingProvider.url"
+                        :class="['form-input', { invalid: !!providerFieldError('edit', 'url') }]"
+                        placeholder="https://api.example.com/v1"
+                        autocomplete="off"
+                        spellcheck="false"
+                        @blur="normalizeProviderDraft('edit')">
+                    <div v-if="providerFieldError('edit', 'url')" class="form-hint form-error">{{ providerFieldError('edit', 'url') }}</div>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">认证密钥</label>
+                    <input v-model="editingProvider.key" class="form-input" type="password" placeholder="留空则保持不变">
+                    <div class="form-hint">留空表示不修改密钥</div>
+                </div>
+
+                <div class="btn-group">
+                    <button class="btn btn-cancel" @click="closeEditModal">取消</button>
+                    <button class="btn btn-confirm" @click="updateProvider" :disabled="!canSubmitProvider('edit')">保存</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- 添加模型模态框 -->
+        <div v-if="showModelModal" class="modal-overlay" @click.self="closeModelModal">
+            <div class="modal" role="dialog" aria-modal="true" aria-labelledby="add-model-modal-title">
+                <div class="modal-title" id="add-model-modal-title">添加模型</div>
+
+                <div class="form-group">
+                    <label class="form-label">模型名称</label>
+                    <input v-model="newModelName" class="form-input" placeholder="例如: gpt-5">
+                </div>
+
+                <div class="btn-group">
+                    <button class="btn btn-cancel" @click="closeModelModal">取消</button>
+                    <button class="btn btn-confirm" @click="addModel">添加</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- 模型列表模态框 -->
+        <div v-if="showModelListModal" class="modal-overlay" @click.self="showModelListModal = false">
+            <div class="modal" role="dialog" aria-modal="true" aria-labelledby="manage-models-modal-title">
+                <div class="modal-title" id="manage-models-modal-title">管理模型</div>
+
+                <div class="model-list">
+                    <div v-for="model in models" :key="model" class="model-item">
+                        <span>{{ model }}</span>
+                        <button type="button" class="btn-remove-model" @click="removeModel(model)">删除</button>
+                    </div>
+                </div>
+
+                <div class="btn-group">
+                    <button class="btn btn-confirm" @click="showModelListModal = false">关闭</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- 添加Claude配置模态框 -->
+        <div v-if="showClaudeConfigModal" class="modal-overlay" @click.self="closeClaudeConfigModal">
+            <div class="modal" role="dialog" aria-modal="true" aria-labelledby="add-claude-config-modal-title">
+                <div class="modal-title" id="add-claude-config-modal-title">添加 Claude Code 配置</div>
+
+                <div class="form-group">
+                    <label class="form-label">配置名称</label>
+                    <input v-model="newClaudeConfig.name" class="form-input" placeholder="例如: 智谱GLM">
+                </div>
+                <div class="form-group">
+                    <label class="form-label">API Key</label>
+                    <input v-model="newClaudeConfig.apiKey" class="form-input" type="password" autocomplete="off" spellcheck="false" placeholder="sk-ant-...">
+                </div>
+                <div class="form-group">
+                    <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="btn-group">
+                    <button class="btn btn-cancel" @click="closeClaudeConfigModal">取消</button>
+                    <button class="btn btn-confirm" @click="addClaudeConfig">添加</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- 编辑Claude配置模态框 -->
+        <div v-if="showEditConfigModal" class="modal-overlay" @click.self="closeEditConfigModal">
+            <div class="modal" role="dialog" aria-modal="true" aria-labelledby="edit-claude-config-modal-title">
+                <div class="modal-title" id="edit-claude-config-modal-title">编辑 Claude Code 配置</div>
+
+                <div class="form-group">
+                    <label class="form-label">配置名称</label>
+                    <input v-model="editingConfig.name" class="form-input" placeholder="配置名称" readonly>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">API Key</label>
+                    <input v-model="editingConfig.apiKey" class="form-input" type="password" autocomplete="off" spellcheck="false" placeholder="sk-ant-...">
+                </div>
+                <div class="form-group">
+                    <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>

package/web-ui/partials/index/panel-config-claude.html

@@ -0,0 +1,126 @@
+                <!-- Claude Code 配置模式 -->
+                <div
+                    v-show="mainTab === 'config' && configMode === 'claude'"
+                    class="mode-content mode-cards"
+                    id="panel-config-claude"
+                    role="tabpanel"
+                    :aria-labelledby="'tab-config-claude'">
+                <!-- 添加提供商按钮 -->
+                <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>。
+                </div>
+
+                <div class="selector-section">
+                    <div class="selector-header">
+                        <span class="selector-title">预设供应商</span>
+                    </div>
+                    <div class="btn-group" style="flex-wrap: wrap; gap: 8px;">
+                        <button type="button" class="btn-mini" @click="closeClaudeConfigModal(); showClaudeConfigModal = true">自定义配置</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'Claude Official'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://api.anthropic.com'; newClaudeConfig.model = 'claude-sonnet-4'; showClaudeConfigModal = true">Claude Official</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'DeepSeek'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://api.deepseek.com/anthropic'; newClaudeConfig.model = 'DeepSeek-V3.2'; showClaudeConfigModal = true">DeepSeek</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'Zhipu GLM'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://open.bigmodel.cn/api/anthropic'; newClaudeConfig.model = 'glm-5'; showClaudeConfigModal = true">Zhipu GLM</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'Z.ai GLM'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://api.z.ai/api/anthropic'; newClaudeConfig.model = 'glm-5'; showClaudeConfigModal = true">Z.ai GLM</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'Qwen Coder'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://coding.dashscope.aliyuncs.com/apps/anthropic'; newClaudeConfig.model = 'qwen3-coder'; showClaudeConfigModal = true">Qwen Coder</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'Kimi k2'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://api.moonshot.cn/anthropic'; newClaudeConfig.model = 'kimi-k2.5'; showClaudeConfigModal = true">Kimi k2</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'Kimi For Coding'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://api.kimi.com/coding/'; newClaudeConfig.model = 'kimi-k2.5'; showClaudeConfigModal = true">Kimi For Coding</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'KAT-Coder'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://vanchin.streamlake.ai/api/gateway/v1/endpoints/${ENDPOINT_ID}/claude-code-proxy'; newClaudeConfig.model = 'KAT-Coder-Pro V1'; showClaudeConfigModal = true">KAT-Coder</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'Longcat'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://api.longcat.chat/anthropic'; newClaudeConfig.model = 'LongCat-Flash-Chat'; showClaudeConfigModal = true">Longcat</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'MiniMax'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://api.minimaxi.com/anthropic'; newClaudeConfig.model = 'MiniMax-M2.7'; showClaudeConfigModal = true">MiniMax</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'MiniMax en'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://api.minimax.io/anthropic'; newClaudeConfig.model = 'MiniMax-M2.7'; showClaudeConfigModal = true">MiniMax en</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'DouBaoSeed'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://ark.cn-beijing.volces.com/api/coding'; newClaudeConfig.model = 'doubao-seed-2-0-code-preview-latest'; showClaudeConfigModal = true">DouBaoSeed</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'BaiLing'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://api.tbox.cn/api/anthropic'; newClaudeConfig.model = 'Ling-2.5-1T'; showClaudeConfigModal = true">BaiLing</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'ModelScope'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://api-inference.modelscope.cn'; newClaudeConfig.model = 'ZhipuAI/GLM-5'; showClaudeConfigModal = true">ModelScope</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'AiHubMix'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://aihubmix.com'; newClaudeConfig.model = 'glm-4.7'; showClaudeConfigModal = true">AiHubMix</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'DMXAPI'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://www.dmxapi.cn'; newClaudeConfig.model = 'glm-4.7'; showClaudeConfigModal = true">DMXAPI</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'PackyCode'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://www.packyapi.com'; newClaudeConfig.model = 'glm-4.7'; showClaudeConfigModal = true">PackyCode</button>
+                    </div>
+                </div>
+
+                <div class="selector-section">
+                    <div class="selector-header">
+                        <span class="selector-title">模型</span>
+                    </div>
+                    <select
+                        v-if="claudeModelHasList"
+                        class="model-select"
+                        v-model="currentClaudeModel"
+                        @change="onClaudeModelChange"
+                    >
+                        <option v-for="model in claudeModelOptions" :key="model" :value="model">{{ model }}</option>
+                    </select>
+                    <input
+                        v-else
+                        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="selector-section">
+                    <div class="selector-header">
+                        <span class="selector-title">配置健康检查</span>
+                    </div>
+                    <button class="btn-tool" @click="runHealthCheck" :disabled="healthCheckLoading || loading || !!initError">
+                        {{ healthCheckLoading ? '检查中...' : '运行检查' }}
+                    </button>
+                </div>
+
+                <div class="card-list">
+                    <div v-for="(config, name) in claudeConfigs" :key="name"
+                         :class="['card', { active: currentClaudeConfig === name }]"
+                         @click="applyClaudeConfig(name)"
+                         @keydown.enter.self.prevent="applyClaudeConfig(name)"
+                         @keydown.space.self.prevent="applyClaudeConfig(name)"
+                         tabindex="0"
+                         role="button"
+                         :aria-current="currentClaudeConfig === name ? 'true' : null">
+                        <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">{{ config.model || '未设置模型' }}</div>
+                            </div>
+                        </div>
+                        <div class="card-trailing">
+                            <span :class="['pill', config.hasKey ? 'configured' : 'empty']">
+                                {{ config.hasKey ? '已配置' : '未配置' }}
+                            </span>
+                            <span v-if="claudeSpeedResults[name]" :class="['latency', claudeSpeedResults[name].ok ? 'ok' : 'error']">
+                                {{ formatLatency(claudeSpeedResults[name]) }}
+                            </span>
+                            <div class="card-actions" @click.stop>
+                                <button class="card-action-btn" @click="openEditConfigModal(name)" :aria-label="`Edit Claude config ${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" :class="{ loading: claudeShareLoading[name] }" @click="copyClaudeShareCommand(name)" disabled title="分享导入命令（暂时禁用）" aria-label="Share import command">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7"/>
+                                        <path d="M16 6l-4-4-4 4"/>
+                                        <path d="M12 2v14"/>
+                                    </svg>
+                                </button>
+                                <button class="card-action-btn delete" @click="deleteClaudeConfig(name)" :aria-label="`Delete Claude config ${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>

package/web-ui/partials/index/panel-config-codex.html

@@ -0,0 +1,237 @@
+                    <!-- Provider 配置模式（Codex） -->
+                    <div
+                        v-show="mainTab === 'config' && isProviderConfigMode"
+                        class="mode-content mode-cards"
+                        id="panel-config-provider"
+                        role="tabpanel"
+                        :aria-labelledby="'tab-config-' + configMode">
+                <!-- 添加提供商按钮 -->
+                <button class="btn-add" @click="showAddModal = true" 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="selector-section">
+                    <div class="selector-header">
+                        <span class="selector-title">模型</span>
+                        <div class="selector-actions">
+                            <button class="btn-icon" @click="showModelModal = true" aria-label="Add model" title="添加模型" v-if="modelsSource === 'legacy'">+</button>
+                            <button class="btn-icon" @click="showModelListModal = true" aria-label="Manage models" title="管理模型" v-if="modelsSource === 'legacy'">≡</button>
+                        </div>
+                    </div>
+                    <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="activeProviderModelPlaceholder"
+                    >
+                    <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">
+                        {{ isCodexConfigMode ? '当前模型不在列表，可手填或改模板。' : '当前模型不在列表，可手填。' }}
+                    </div>
+                    <div class="config-template-hint" v-if="isCodexConfigMode">
+                        先改模板，再应用。
+                    </div>
+                    <div class="config-template-hint" v-else-if="activeProviderBridgeHint">
+                        {{ activeProviderBridgeHint }} 模板仅限 Codex 编辑。
+                    </div>
+                    <button class="btn-tool btn-template-editor" v-if="isCodexConfigMode" @click="openConfigTemplateEditor" :disabled="loading || !!initError">
+                        打开模板编辑器
+                    </button>
+                </div>
+
+                <template v-if="isCodexConfigMode">
+                <div class="selector-section">
+                    <div class="selector-header">
+                        <span class="selector-title">服务档</span>
+                    </div>
+                    <select class="model-select" v-model="serviceTier" @change="onServiceTierChange">
+                        <option value="fast">fast（默认）</option>
+                        <option value="standard">standard</option>
+                    </select>
+                    <div class="config-template-hint">
+                        仅 fast 写入 <code>service_tier</code>。
+                    </div>
+                </div>
+
+                <div class="selector-section">
+                    <div class="selector-header">
+                        <span class="selector-title">推理强度</span>
+                    </div>
+                    <select class="model-select" v-model="modelReasoningEffort" @change="onReasoningEffortChange">
+                        <option value="high">high</option>
+                        <option value="medium">medium（默认）</option>
+                        <option value="low">low</option>
+                        <option value="xhigh">xhigh</option>
+                    </select>
+                    <div class="config-template-hint">
+                        控制推理深度；high 更深。
+                    </div>
+                </div>
+
+                <div class="selector-section">
+                    <div class="selector-header">
+                        <span class="selector-title">压缩阈值</span>
+                        <div class="selector-actions">
+                            <button
+                                class="btn-tool btn-tool-compact"
+                                @click="resetCodexContextBudgetDefaults"
+                                :disabled="loading || !!initError || codexApplying">
+                                重置
+                            </button>
+                        </div>
+                    </div>
+                    <div class="codex-config-grid">
+                        <div class="form-group codex-config-field">
+                            <label class="form-label" for="codex-model-context-window">model_context_window</label>
+                            <input
+                                id="codex-model-context-window"
+                                v-model="modelContextWindowInput"
+                                class="form-input"
+                                inputmode="numeric"
+                                autocomplete="off"
+                                placeholder="例如: 190000"
+                                @focus="editingCodexBudgetField = 'modelContextWindowInput'"
+                                @input="sanitizePositiveIntegerDraft('modelContextWindowInput')"
+                                @blur="onModelContextWindowBlur"
+                                @keydown.enter.prevent="onModelContextWindowBlur">
+                            <div class="form-hint">上下文上限，默认 190000。</div>
+                        </div>
+                        <div class="form-group codex-config-field">
+                            <label class="form-label" for="codex-model-auto-compact-token-limit">model_auto_compact_token_limit</label>
+                            <input
+                                id="codex-model-auto-compact-token-limit"
+                                v-model="modelAutoCompactTokenLimitInput"
+                                class="form-input"
+                                inputmode="numeric"
+                                autocomplete="off"
+                                placeholder="例如: 185000"
+                                @focus="editingCodexBudgetField = 'modelAutoCompactTokenLimitInput'"
+                                @input="sanitizePositiveIntegerDraft('modelAutoCompactTokenLimitInput')"
+                                @blur="onModelAutoCompactTokenLimitBlur"
+                                @keydown.enter.prevent="onModelAutoCompactTokenLimitBlur">
+                            <div class="form-hint">自动压缩阈值，默认 185000。</div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="selector-section">
+                    <div class="selector-header">
+                        <span class="selector-title">AGENTS.md</span>
+                    </div>
+                    <button class="btn-tool" @click="openAgentsEditor" :disabled="loading || !!initError || agentsLoading">
+                        {{ agentsLoading ? '加载中...' : '打开 AGENTS.md' }}
+                    </button>
+                </div>
+
+                </template>
+
+                <div class="selector-section">
+                    <div class="selector-header">
+                        <span class="selector-title">健康检测</span>
+                    </div>
+                    <button class="btn-tool" @click="openHealthCheckDialog()" :disabled="loading || !!initError">
+                        检测对话
+                    </button>
+                </div>
+
+                <div v-if="!loading && !initError" class="card-list">
+                    <div v-for="provider in displayProvidersList" :key="provider.name"
+                         :class="['card', { active: displayCurrentProvider === provider.name }]"
+                         @click="switchProvider(provider.name)"
+                         @keydown.enter.self.prevent="switchProvider(provider.name)"
+                         @keydown.space.self.prevent="switchProvider(provider.name)"
+                         tabindex="0"
+                         role="button"
+                         :aria-current="displayCurrentProvider === provider.name ? 'true' : null">
+                        <div class="card-leading">
+                            <div class="card-icon">{{ provider.name.charAt(0).toUpperCase() }}</div>
+                            <div class="card-content">
+                                <div class="card-title">
+                                    <span>{{ provider.name }}</span>
+                                    <span v-if="provider.readOnly" class="provider-readonly-badge">系统</span>
+                                </div>
+                                <div class="card-subtitle">
+                                    {{ provider.url || '未设 URL' }}
+                                </div>
+                            </div>
+                        </div>
+                        <div class="card-trailing">
+                            <span :class="['pill', providerPillConfigured(provider) ? 'configured' : 'empty']">
+                                {{ providerPillText(provider) }}
+                            </span>
+                            <span v-if="speedResults[provider.name]" :class="['latency', speedResults[provider.name].ok ? 'ok' : 'error']">
+                                {{ formatLatency(speedResults[provider.name]) }}
+                            </span>
+                            <div class="card-actions" @click.stop>
+                                <button class="card-action-btn" @click="openHealthCheckDialog({ providerName: provider.name, locked: true })" :aria-label="`Open health dialog for ${provider.name}`" title="检测对话">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+                                        <path d="M8 9h8"/>
+                                        <path d="M8 13h5"/>
+                                    </svg>
+                                </button>
+                                <button
+                                    v-if="!provider.readOnly"
+                                    class="card-action-btn"
+                                    :class="{ loading: providerShareLoading[provider.name], disabled: !shouldAllowProviderShare(provider) }"
+                                    :disabled="providerShareLoading[provider.name] || !shouldAllowProviderShare(provider)"
+                                    @click="copyProviderShareCommand(provider)"
+                                    :title="shouldAllowProviderShare(provider) ? '分享命令' : '不可分享'"
+                                    aria-label="Share import command">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7"/>
+                                        <path d="M16 6l-4-4-4 4"/>
+                                        <path d="M12 2v14"/>
+                                    </svg>
+                                </button>
+                                <button
+                                    v-if="!provider.readOnly"
+                                    class="card-action-btn"
+                                    :class="{ disabled: !shouldShowProviderEdit(provider) }"
+                                    :disabled="!shouldShowProviderEdit(provider)"
+                                    @click="openEditModal(provider)"
+                                    :aria-label="`Edit provider ${provider.name}`"
+                                    :title="shouldShowProviderEdit(provider) ? '编辑' : '不可编辑'">
+                                    <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
+                                    v-if="!provider.readOnly"
+                                    class="card-action-btn delete"
+                                    :class="{ disabled: !shouldShowProviderDelete(provider) }"
+                                    :disabled="!shouldShowProviderDelete(provider)"
+                                    @click="deleteProvider(provider.name)"
+                                    :aria-label="`Delete provider ${provider.name}`"
+                                    :title="shouldShowProviderDelete(provider) ? '删除' : '不可删除'">
+                                    <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>

package/web-ui/partials/index/panel-config-openclaw.html

@@ -0,0 +1,78 @@
+                <!-- OpenClaw 配置模式 -->
+                <div
+                    v-show="mainTab === 'config' && configMode === 'openclaw'"
+                    class="mode-content mode-cards"
+                    id="panel-config-openclaw"
+                    role="tabpanel"
+                    :aria-labelledby="'tab-config-openclaw'">
+                <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">
+                        读写 Workspace 的 <code>AGENTS.md</code>，默认路径 <code>~/.openclaw/workspace/AGENTS.md</code>。
+                    </div>
+                    <button class="btn-tool" @click="openOpenclawAgentsEditor" :disabled="loading || !!initError || agentsLoading">
+                        {{ agentsLoading ? '加载中...' : '打开 AGENTS.md' }}
+                    </button>
+                </div>
+
+                <div class="selector-section">
+                    <div class="selector-header">
+                        <label class="selector-title" for="openclaw-workspace-file">工作区文件</label>
+                    </div>
+                    <input
+                        id="openclaw-workspace-file"
+                        class="form-input"
+                        v-model="openclawWorkspaceFileName"
+                        placeholder="例如: SOUL.md">
+                    <div class="config-template-hint">
+                        仅限 Workspace 内的 <code>.md</code> 文件。
+                    </div>
+                    <button class="btn-tool" @click="openOpenclawWorkspaceEditor" :disabled="loading || !!initError || agentsLoading">
+                        {{ agentsLoading ? '加载中...' : '打开工作区文件' }}
+                    </button>
+                </div>
+
+                <div class="card-list">
+                    <div v-for="(config, name) in openclawConfigs" :key="name"
+                         :class="['card', { active: currentOpenclawConfig === name }]"
+                         @click="applyOpenclawConfig(name)"
+                         @keydown.enter.self.prevent="applyOpenclawConfig(name)"
+                         @keydown.space.self.prevent="applyOpenclawConfig(name)"
+                         tabindex="0"
+                         role="button"
+                         :aria-current="currentOpenclawConfig === name ? 'true' : null">
+                        <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)" :aria-label="`Edit OpenClaw config ${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 v-if="name !== '默认配置'" class="card-action-btn delete" @click="deleteOpenclawConfig(name)" :aria-label="`Delete OpenClaw config ${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>