        <div v-if="showOpenclawConfigModal" class="modal-overlay" @click.self="!(openclawSaving || openclawApplying) && closeOpenclawConfigModal()">
            <div class="modal modal-wide" role="dialog" aria-modal="true" aria-labelledby="openclaw-config-modal-title">
                <div class="modal-title" id="openclaw-config-modal-title">{{ openclawEditorTitle }}</div>

                <div class="form-group">
                    <label class="form-label">{{ t('field.configName') }}</label>
                    <input v-model="openclawEditing.name" class="form-input" :readonly="openclawEditing.lockName" :placeholder="t('placeholder.openclawConfigNameExample')">
                </div>

                <div class="form-group">
                    <label class="form-label">{{ t('field.targetFile') }}</label>
                    <div class="form-hint">
                        {{ openclawConfigPath || t('common.notLoaded') }}
                        <span v-if="openclawConfigPath">
                            （{{ openclawConfigExists ? t('common.exists') : t('common.notExistsWillCreateOnApply') }}）
                        </span>
                    </div>
                    <div class="btn-group" style="justify-content:flex-start;">
                        <button class="btn btn-confirm secondary" @click="loadOpenclawConfigFromFile" :disabled="openclawFileLoading">
                            {{ openclawFileLoading ? t('common.loading') : t('modal.openclaw.loadCurrent') }}
                        </button>
                    </div>
                </div>

                <div class="quick-section">
                    <div class="quick-header">
                        <div>
                            <div class="quick-title">{{ t('modal.openclaw.quick.title') }}</div>
                            <div class="form-hint">{{ t('modal.openclaw.quick.subtitle') }}</div>
                        </div>
                        <div class="quick-actions">
                            <button class="btn-mini" @click="syncOpenclawQuickFromText">{{ t('modal.openclaw.quick.readFromEditor') }}</button>
                            <button class="btn-mini" @click="resetOpenclawQuick">{{ t('common.clear') }}</button>
                        </div>
                    </div>
                    <div class="quick-steps">
                        <div class="quick-step"><span class="step-badge">1</span><span>{{ t('modal.openclaw.quick.step1') }}</span></div>
                        <div class="quick-step"><span class="step-badge">2</span><span>{{ t('modal.openclaw.quick.step2') }}</span></div>
                        <div class="quick-step"><span class="step-badge">3</span><span>{{ t('modal.openclaw.quick.step3') }}</span></div>
                    </div>
                    <div class="quick-grid">
                        <div class="quick-card">
                            <div class="structured-card-title">Provider</div>
                            <div class="form-group">
                                <label class="form-label">{{ t('field.providerName') }}</label>
                                <input v-model="openclawQuick.providerName" class="form-input" placeholder="例如: custom-myapi">
                                <div class="form-hint">{{ t('modal.openclaw.quick.providerHint') }}</div>
                            </div>
                            <div class="form-group">
                                <label class="form-label">{{ t('field.baseUrl') }}</label>
                                <input v-model="openclawQuick.baseUrl" class="form-input" placeholder="https://api.example.com/v1" :readonly="openclawQuick.baseUrlReadOnly">
                                <div v-if="openclawQuick.baseUrlDisplayKind === 'builtin-default'" class="form-hint">{{ t('modal.openclaw.quick.baseUrlHintDefault') }}</div>
                                <div v-else-if="openclawQuick.baseUrlReadOnly" class="form-hint">{{ t('modal.openclaw.quick.baseUrlHintReadonly') }}</div>
                            </div>
                            <div class="form-group">
                                <label class="form-label">API Key</label>
                                <div class="list-row">
                                    <input v-model="openclawQuick.apiKey" class="form-input" :readonly="openclawQuick.apiKeyReadOnly" :type="(openclawQuick.apiKeyReadOnly || openclawQuick.showKey) ? 'text' : 'password'" placeholder="sk-...">
                                    <button v-if="!openclawQuick.apiKeyReadOnly" class="btn-mini" @click="toggleOpenclawQuickKey">
                                        {{ openclawQuick.showKey ? t('common.hide') : t('common.show') }}
                                    </button>
                                </div>
                                <div v-if="openclawQuick.apiKeyDisplayKind === 'auth-profile-value'" class="form-hint">{{ t('modal.openclaw.quick.apiKeyHintFromAuth') }}</div>
                                <div v-else-if="openclawQuick.apiKeyReadOnly" class="form-hint">{{ t('modal.openclaw.quick.apiKeyHintReadonly') }}</div>
                                <div v-else class="form-hint">{{ t('modal.openclaw.quick.apiKeyHintKeep') }}</div>
                            </div>
                            <div class="form-group">
                                <label class="form-label">{{ t('field.apiType') }}</label>
                                <input v-model="openclawQuick.apiType" class="form-input" list="openclawApiTypeList" :placeholder="t('placeholder.apiTypeExample')">
                                <datalist id="openclawApiTypeList">
                                    <option value="openai-responses"></option>
                                    <option value="openai-chat"></option>
                                    <option value="anthropic"></option>
                                    <option value="custom"></option>
                                </datalist>
                            </div>
                        </div>

                        <div class="quick-card">
                            <div class="structured-card-title">{{ t('modal.openclaw.quick.modelTitle') }}</div>
                            <div class="form-group">
                                <label class="form-label">{{ t('field.modelId') }}</label>
                                <input v-model="openclawQuick.modelId" class="form-input" :placeholder="t('placeholder.modelIdExample')">
                            </div>
                            <div class="form-group">
                                <label class="form-label">{{ t('field.displayName') }}</label>
                                <input v-model="openclawQuick.modelName" class="form-input" :placeholder="t('placeholder.modelNameOptional')">
                            </div>
                            <div class="form-group">
                                <label class="form-label">{{ t('field.contextAndMaxOutput') }}</label>
                                <div class="list-row">
                                    <input v-model="openclawQuick.contextWindow" class="form-input" :placeholder="t('field.contextWindow')">
                                    <input v-model="openclawQuick.maxTokens" class="form-input" :placeholder="t('field.maxOutput')">
                                </div>
                                <div class="form-hint">{{ t('hint.emptyNoChange') }}</div>
                            </div>
                        </div>

                        <div class="quick-card">
                            <div class="structured-card-title">{{ t('modal.openclaw.quick.optionsTitle') }}</div>
                            <label class="quick-option">
                                <input type="checkbox" v-model="openclawQuick.setPrimary">
                                {{ t('modal.openclaw.quick.setPrimary') }}
                            </label>
                            <label class="quick-option">
                                <input type="checkbox" v-model="openclawQuick.overrideProvider">
                                {{ t('modal.openclaw.quick.overrideProvider') }}
                            </label>
                            <label class="quick-option">
                                <input type="checkbox" v-model="openclawQuick.overrideModels">
                                {{ t('modal.openclaw.quick.overrideModels') }}
                            </label>
                            <div class="form-hint">{{ t('modal.openclaw.quick.optionsHint') }}</div>
                        </div>
                    </div>
                    <div class="btn-group">
                        <button class="btn btn-confirm" @click="applyOpenclawQuickToText">{{ t('modal.openclaw.quick.writeToEditor') }}</button>
                    </div>
                </div>

                <div class="structured-section">
                    <div class="structured-header">
                        <span class="structured-title">结构化配置（高级）</span>
                        <span class="form-hint">{{ t('modal.openclaw.structured.writeHint') }}</span>
                    </div>
                    <div class="structured-grid">
                        <div class="structured-card">
                            <div class="structured-card-title">Agents Defaults</div>
                            <div class="form-group">
                                <label class="form-label">主模型</label>
                                <input v-model="openclawStructured.agentPrimary" class="form-input" placeholder="例如: provider/model">
                            </div>
                            <div class="form-group">
                                <label class="form-label">备选模型</label>
                                <div class="list-row" v-for="(item, index) in openclawStructured.agentFallbacks" :key="'fallback-' + index">
                                    <input v-model="openclawStructured.agentFallbacks[index]" class="form-input" placeholder="例如: provider/model">
                                    <button class="btn-mini delete" @click="removeOpenclawFallback(index)">删除</button>
                                </div>
                                <button class="btn-mini" @click="addOpenclawFallback">添加备选</button>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Workspace</label>
                                <input v-model="openclawStructured.workspace" class="form-input" placeholder="例如: ~/.openclaw/workspace">
                            </div>
                            <div class="form-group">
                                <label class="form-label">Timeout(s)</label>
                                <input v-model="openclawStructured.timeout" class="form-input" placeholder="例如: 600">
                            </div>
                            <div class="form-group">
                                <label class="form-label">Context Tokens</label>
                                <input v-model="openclawStructured.contextTokens" class="form-input" placeholder="例如: 4096">
                            </div>
                            <div class="form-group">
                                <label class="form-label">Max Concurrent</label>
                                <input v-model="openclawStructured.maxConcurrent" class="form-input" placeholder="例如: 2">
                            </div>
                        </div>

                        <div class="structured-card">
                            <div class="structured-card-title">Env</div>
                            <div class="form-group">
                                <label class="form-label">环境变量</label>
                                <div class="list-row" v-for="(item, index) in openclawStructured.envItems" :key="'env-' + index">
                                    <input v-model="item.key" class="form-input" placeholder="KEY">
                                    <input v-model="item.value" class="form-input" :type="item.show ? 'text' : 'password'" placeholder="VALUE">
                                    <button class="btn-mini" @click="toggleOpenclawEnvItem(index)">
                                        {{ item.show ? '隐藏' : '显示' }}
                                    </button>
                                    <button class="btn-mini delete" @click="removeOpenclawEnvItem(index)">删除</button>
                                </div>
                                <button class="btn-mini" @click="addOpenclawEnvItem">添加变量</button>
                            </div>
                        </div>

                        <div class="structured-card">
                            <div class="structured-card-title">Tools</div>
                            <div class="form-group">
                                <label class="form-label">Profile</label>
                                <select v-model="openclawStructured.toolsProfile" class="form-input">
                                    <option value="default">default</option>
                                    <option value="strict">strict</option>
                                    <option value="permissive">permissive</option>
                                    <option value="custom">custom</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Allow</label>
                                <div class="list-row" v-for="(item, index) in openclawStructured.toolsAllow" :key="'allow-' + index">
                                    <input v-model="openclawStructured.toolsAllow[index]" class="form-input" placeholder="例如: fs.read*">
                                    <button class="btn-mini delete" @click="removeOpenclawToolsAllow(index)">删除</button>
                                </div>
                                <button class="btn-mini" @click="addOpenclawToolsAllow">添加 allow</button>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Deny</label>
                                <div class="list-row" v-for="(item, index) in openclawStructured.toolsDeny" :key="'deny-' + index">
                                    <input v-model="openclawStructured.toolsDeny[index]" class="form-input" placeholder="例如: net.*">
                                    <button class="btn-mini delete" @click="removeOpenclawToolsDeny(index)">删除</button>
                                </div>
                                <button class="btn-mini" @click="addOpenclawToolsDeny">添加 deny</button>
                            </div>
                        </div>

                        <div class="structured-card">
                            <div class="structured-card-title">Providers（只读）</div>
                            <div v-if="openclawProviders.length === 0" class="form-hint">
                                未发现 providers 配置（可能使用环境变量或外部配置）。
                            </div>
                            <div v-else class="provider-list">
                                <div class="provider-item" v-for="(provider, index) in openclawProviders" :key="provider.key + '-' + provider.source + '-' + index">
                                    <div class="provider-header">
                                        <span class="provider-name">{{ provider.key }}</span>
                                        <span class="provider-source">来源: {{ provider.source }}</span>
                                        <span v-if="provider.isActive" class="pill configured">使用中</span>
                                    </div>
                                    <div v-if="provider.fields.length === 0" class="form-hint">未配置字段</div>
                                    <div v-else class="provider-fields">
                                        <div class="provider-field" v-for="field in provider.fields" :key="provider.key + '-' + field.key">
                                            <span class="provider-field-key">{{ field.key }}</span>
                                            <span class="provider-field-value">{{ field.value }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-if="openclawMissingProviders.length" class="form-hint">
                                使用中的 provider 未在配置中显示：{{ openclawMissingProviders.join(', ') }}。
                            </div>
                        </div>

                        <div class="structured-card">
                            <div class="structured-card-title">Agents（只读）</div>
                            <div v-if="openclawAgentsList.length === 0" class="form-hint">
                                未发现 agents.list 配置。
                            </div>
                            <div v-else class="agent-list">
                                <div class="agent-item" v-for="(agent, index) in openclawAgentsList" :key="agent.key + '-' + index">
                                    <div class="agent-header">
                                        <span class="agent-name">{{ agent.name }}</span>
                                        <span class="agent-id">ID: {{ agent.id }}</span>
                                    </div>
                                    <div class="agent-meta" v-if="agent.theme || agent.emoji || agent.avatar">
                                        <span v-if="agent.theme">主题: {{ agent.theme }}</span>
                                        <span v-if="agent.emoji">表情: {{ agent.emoji }}</span>
                                        <span v-if="agent.avatar">头像: {{ agent.avatar }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="btn-group">
                        <button class="btn btn-confirm secondary" @click="syncOpenclawStructuredFromText">从文本刷新</button>
                        <button class="btn btn-confirm" @click="applyOpenclawStructuredToText">{{ t('common.writeToEditor') }}</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"
                        :readonly="openclawSaving || openclawApplying"
                        placeholder="在这里编辑 OpenClaw 配置（JSON5）"></textarea>
                    <div class="template-editor-warning">
                        <span v-if="openclawEditing.lockName && openclawEditing.name === '默认配置'">默认配置始终映射当前 openclaw.json，请直接使用“保存并应用”。</span>
                        <span v-else>保存仅写入本地配置库。点击“保存并应用”后会写入 openclaw.json。</span>
                    </div>
                </div>

                <div class="btn-group">
                    <button class="btn btn-cancel" @click="closeOpenclawConfigModal" :disabled="openclawSaving || openclawApplying">取消</button>
                    <button class="btn btn-confirm" @click="saveOpenclawConfig" :disabled="openclawSaving || openclawApplying || (openclawEditing.lockName && openclawEditing.name === '默认配置')">
                        {{ openclawSaving ? '保存中...' : '保存' }}
                    </button>
                    <button class="btn btn-confirm secondary" @click="saveAndApplyOpenclawConfig" :disabled="openclawSaving || openclawApplying">
                        {{ openclawApplying ? '应用中...' : '保存并应用' }}
                    </button>
                </div>
            </div>
        </div>
