codexmate 0.0.19 → 0.0.20

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

@@ -0,0 +1,196 @@
+        <!-- 添加提供商模态框 -->
+        <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" placeholder="例如: myapi">
+                </div>
+                <div class="form-group">
+                    <label class="form-label">API 端点</label>
+                    <input v-model="newProvider.url" class="form-input" placeholder="https://api.example.com/v1">
+                </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">添加</button>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="showInstallModal" class="modal-overlay" @click.self="closeInstallModal">
+            <div class="modal" role="dialog" aria-modal="true" aria-labelledby="install-cli-modal-title">
+                <div class="modal-header">
+                    <div class="modal-title" id="install-cli-modal-title">CLI 安装</div>
+                </div>
+
+                <div class="list-row">
+                    <label class="form-label">包管理器</label>
+                    <select class="form-input" v-model="installPackageManager">
+                        <option value="npm">npm</option>
+                        <option value="pnpm">pnpm</option>
+                        <option value="bun">bun</option>
+                    </select>
+                    <label class="form-label">镜像源</label>
+                    <div class="install-action-tabs">
+                        <button class="btn-mini" :class="{ active: installRegistryPreset === 'default' }" @click="setInstallRegistryPreset('default')">官方</button>
+                        <button class="btn-mini" :class="{ active: installRegistryPreset === 'npmmirror' }" @click="setInstallRegistryPreset('npmmirror')">npmmirror</button>
+                        <button class="btn-mini" :class="{ active: installRegistryPreset === 'tencent' }" @click="setInstallRegistryPreset('tencent')">腾讯云</button>
+                        <button class="btn-mini" :class="{ active: installRegistryPreset === 'custom' }" @click="setInstallRegistryPreset('custom')">自定义</button>
+                    </div>
+                    <input
+                        v-if="installRegistryPreset === 'custom'"
+                        v-model="installRegistryCustom"
+                        class="form-input install-registry-input"
+                        placeholder="https://registry.example.com">
+                    <div class="form-hint install-registry-hint" v-if="installRegistryPreview">
+                        命令将附加：--registry={{ installRegistryPreview }}
+                    </div>
+                    <div class="form-hint install-registry-hint" v-else-if="installRegistryPreset === 'custom'">
+                        请输入完整 URL（含 http/https），将自动附加到命令。
+                    </div>
+                    <label class="form-label">操作</label>
+                    <div class="install-action-tabs">
+                        <button class="btn-mini" :class="{ active: installCommandAction === 'install' }" @click="setInstallCommandAction('install')">安装</button>
+                        <button class="btn-mini" :class="{ active: installCommandAction === 'update' }" @click="setInstallCommandAction('update')">升级</button>
+                        <button class="btn-mini" :class="{ active: installCommandAction === 'uninstall' }" @click="setInstallCommandAction('uninstall')">卸载</button>
+                    </div>
+                </div>
+
+                <div class="install-list">
+                    <div
+                        class="install-row"
+                        v-for="target in installTargetCards"
+                        :key="'install-command-' + target.id + '-' + installCommandAction">
+                        <div class="install-row-main">
+                            <div class="install-row-title">{{ target.name }}</div>
+                            <code class="install-command">{{ target.command }}</code>
+                        </div>
+                        <button class="btn-mini" :disabled="!target.command" @click="copyInstallCommand(target.command)">复制</button>
+                    </div>
+                </div>
+
+                <div class="install-help">
+                    <div class="form-label">常见问题</div>
+                    <ul class="install-help-list">
+                        <li v-for="tip in installTroubleshootingTips" :key="tip">{{ tip }}</li>
+                    </ul>
+                </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" placeholder="https://api.example.com/v1">
+                </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">保存</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,100 @@
+                <!-- 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>
+                    <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
+                                    @click="copyProviderShareCommand(provider)"
+                                    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
+                                    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,84 @@
+                <!-- OpenClaw 配置模式 -->
+                <div
+                    v-show="mainTab === 'config' && configMode === 'openclaw'"
+                    class="mode-content mode-cards"
+                    id="panel-config-openclaw"
+                    role="tabpanel"
+                    :aria-labelledby="'tab-config-openclaw'">
+                <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">
+                        读写 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 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>