codexmate 0.0.41 → 0.0.43

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

@@ -1,206 +1,206 @@
-                    <!-- Codex 配置 -->
-                    <div
-                        v-show="mainTab === 'config' && isProviderConfigMode"
-                        class="mode-content mode-cards"
-                        id="panel-config-provider"
-                        role="tabpanel"
-                        :aria-labelledby="forceCompactLayout ? 'tab-config' : ('side-tab-config-' + configMode)">
-                <div v-if="forceCompactLayout && !sessionStandalone" class="segmented-control">
-                    <button type="button" :class="['segment', { active: configMode === 'codex' }]" @click="switchConfigMode('codex')">{{ t('tab.config.codex') }}</button>
-                    <button type="button" :class="['segment', { active: configMode === 'claude' }]" @click="switchConfigMode('claude')">{{ t('tab.config.claude') }}</button>
-                    <button type="button" :class="['segment', { active: configMode === 'openclaw' }]" @click="switchConfigMode('openclaw')">{{ t('tab.config.openclaw') }}</button>
-                </div>
-                <template v-if="isCodexConfigMode && shouldShowCliInstallPlaceholder('codex')">
-                    <div class="selector-section">
-                        <div class="empty-state">
-                            <div class="empty-state-title">{{ t('cli.missing.title', { name: 'Codex' }) }}</div>
-                            <div class="empty-state-subtitle">{{ t('cli.missing.subtitle', { name: 'Codex' }) }}</div>
-                            <div class="docs-command-row">
-                                <div class="docs-command-box" role="group" :aria-label="t('cli.missing.commandAria', { name: 'Codex' })">
-                                    <code class="install-command">{{ getInstallCommand('codex', 'install') }}</code>
-                                    <button type="button" class="btn-mini docs-copy-btn" :disabled="!getInstallCommand('codex', 'install')" @click="copyInstallCommand(getInstallCommand('codex', 'install'))">{{ t('common.copy') }}</button>
-                                </div>
-                            </div>
-                            <button type="button" class="btn-tool btn-tool-compact" @click="mainTab = 'docs'; setInstallCommandAction('install')">{{ t('cli.missing.openDocs') }}</button>
-                        </div>
-                    </div>
-                </template>
-                <template v-else>
-                <section class="tool-config-write-card" :aria-label="t('toolConfig.codex.title')">
-                    <div class="tool-config-write-copy">
-                        <div class="tool-config-write-title">{{ t('toolConfig.codex.title') }}</div>
-                        <p class="tool-config-write-desc">{{ t('toolConfig.codex.desc') }}</p>
-                    </div>
-                    <label class="settings-toggle-row tool-config-write-toggle">
-                        <input
-                            type="checkbox"
-                            :checked="isToolConfigWriteAllowed('codex')"
-                            :disabled="toolConfigPermissionSaving.codex"
-                            @change="setToolConfigPermission('codex', $event.target.checked)">
-                        <span class="toggle-track">
-                            <span class="toggle-thumb"></span>
-                        </span>
-                        <span>{{ toolConfigPermissionStatusLabel('codex') }}</span>
-                    </label>
-                </section>
-
-                <div class="tool-config-write-scope" :class="{ locked: !isToolConfigWriteAllowed('codex') }">
-                    <div class="tool-config-write-body">
-                <button class="btn-add" @click="showAddProviderKey = false; showAddModal = true" v-if="!loading && !initError" :disabled="!isToolConfigWriteAllowed('codex')">
-                    <svg class="icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 4v12M4 10h12"/></svg>
-                    {{ t('config.addProvider') }}
-                </button>
-
-                <div class="selector-section" v-if="isCodexConfigMode && codexProviderTemplates.length">
-                    <div class="selector-header">
-                        <span class="selector-title">{{ t('config.providerTemplate.title') }}</span>
-                    </div>
-                    <div class="btn-group" style="flex-wrap: wrap; gap: 8px; margin-top: 0;">
-                        <button v-for="tpl in codexProviderTemplates" :key="tpl.name" type="button" class="btn-mini" @click="newProvider.name = tpl.name; newProvider.url = tpl.url; newProvider.model = tpl.model || ''; newProvider.useTransform = !!tpl.useTransform; showAddProviderKey = false; showAddModal = true">{{ tpl.label }}</button>
-                    </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 ? t('config.modelLoading') : t('config.agents.open') }}</button>
-                </div>
-
-                <div class="selector-section">
-                    <div class="selector-header">
-                        <span class="selector-title">{{ t('config.models') }}</span>
-                        <div class="selector-actions">
-                            <button class="btn-icon" @click="showModelModal = true" :aria-label="t('modal.modelAdd.title')" :title="t('modal.modelAdd.title')" v-if="modelsSource === 'legacy'">+</button>
-                            <button class="btn-icon" @click="showModelListModal = true" :aria-label="t('modal.modelManage.title')" :title="t('modal.modelManage.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="">{{ t('config.modelLoading') }}</option>
-                        <option v-else v-for="model in codexModelOptions" :key="model" :value="model">{{ model }}</option>
-                    </select>
-                    <input v-if="!codexModelsLoading && (modelsSource !== 'remote' || !modelsHasCurrent)" class="model-input" v-model="currentModel" @blur="onModelChange" @keyup.enter="onModelChange" :placeholder="activeProviderModelPlaceholder" :list="codexModelHasList ? 'codex-model-options' : null">
-                    <datalist v-if="codexModelHasList" id="codex-model-options">
-                        <option v-for="model in codexModelOptions" :key="model" :value="model"></option>
-                    </datalist>
-                    <div class="config-template-hint" v-if="modelsSource === 'unlimited'">{{ t('config.models.unlimited') }}</div>
-                    <div class="config-template-hint" v-if="modelsSource === 'error'">{{ t('config.models.error') }}</div>
-                    <div class="config-template-hint" v-if="modelsSource === 'remote' && !modelsHasCurrent">{{ isCodexConfigMode ? t('config.models.notInList.codex') : t('config.models.notInList.other') }}</div>
-                    <div class="config-template-hint" v-if="isCodexConfigMode">{{ t('config.template.editFirst') }}</div>
-                    <div class="config-template-hint" v-else-if="activeProviderBridgeHint">{{ t('config.template.bridgeCodexOnly', { hint: activeProviderBridgeHint }) }}</div>
-                    <button class="btn-tool btn-template-editor" v-if="isCodexConfigMode" @click="openConfigTemplateEditor" :disabled="loading || !!initError">{{ t('config.template.openEditor') }}</button>
-                </div>
-
-                <template v-if="isCodexConfigMode">
-                <div class="config-row">
-                    <div class="selector-section" style="flex:1">
-                        <div class="selector-header"><span class="selector-title">{{ t('config.serviceTier') }}</span></div>
-                        <select class="model-select" v-model="serviceTier" @change="onServiceTierChange">
-                            <option value="fast">{{ t('config.serviceTier.fast') }}</option>
-                            <option value="standard">{{ t('config.serviceTier.standard') }}</option>
-                        </select>
-                        <div class="config-template-hint">{{ t('config.serviceTier.hint', { field: 'service_tier' }) }}</div>
-                    </div>
-                    <div class="selector-section" style="flex:1">
-                        <div class="selector-header"><span class="selector-title">{{ t('config.reasoningEffort') }}</span></div>
-                        <select class="model-select" v-model="modelReasoningEffort" @change="onReasoningEffortChange">
-                            <option value="high">high</option>
-                            <option value="medium">{{ t('config.reasoningEffort.medium') }}</option>
-                            <option value="low">low</option>
-                            <option value="xhigh">xhigh</option>
-                        </select>
-                        <div class="config-template-hint">{{ t('config.reasoningEffort.hint') }}</div>
-                    </div>
-                </div>
-
-                <div class="selector-section">
-                    <div class="selector-header">
-                        <span class="selector-title">{{ t('config.contextBudget') }}</span>
-                        <div class="selector-actions">
-                            <button class="btn-tool btn-tool-compact" @click="resetCodexContextBudgetDefaults" :disabled="loading || !!initError || codexApplying">{{ t('config.reset') }}</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="t('config.example', { value: 190000 })" @focus="editingCodexBudgetField = 'modelContextWindowInput'" @input="sanitizePositiveIntegerDraft('modelContextWindowInput')" @blur="onModelContextWindowBlur" @keydown.enter.prevent="onModelContextWindowBlur">
-                            <div class="form-hint">{{ t('config.contextWindow.hint') }}</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="t('config.example', { value: 185000 })" @focus="editingCodexBudgetField = 'modelAutoCompactTokenLimitInput'" @input="sanitizePositiveIntegerDraft('modelAutoCompactTokenLimitInput')" @blur="onModelAutoCompactTokenLimitBlur" @keydown.enter.prevent="onModelAutoCompactTokenLimitBlur">
-                            <div class="form-hint">{{ t('config.autoCompact.hint') }}</div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="selector-section">
-                    <div class="selector-header"><span class="selector-title">{{ t('config.health.title') }}</span></div>
-                    <button class="btn-tool" @click="runHealthCheck" :disabled="healthCheckLoading || loading || !!initError">{{ healthCheckLoading ? t('config.health.running') : t('config.health.run') }}</button>
-                    <div class="config-template-hint">{{ t('config.health.hint') }}</div>
-                </div>
-                </template>
-
-                <div v-if="!loading && !initError" class="card-list">
-                    <div v-for="provider in displayProvidersList" :key="provider.name" :class="['card', { active: displayCurrentProvider === provider.name, disabled: provider.name === 'local' && isLocalProviderDisabled }]" @click="(provider.name === 'local' && isLocalProviderDisabled) ? null : switchProvider(provider.name)" @keydown.enter.self.prevent="(provider.name === 'local' && isLocalProviderDisabled) ? null : switchProvider(provider.name)" @keydown.space.self.prevent="(provider.name === 'local' && isLocalProviderDisabled) ? null : switchProvider(provider.name)" :tabindex="provider.name === 'local' && isLocalProviderDisabled ? -1 : 0" role="button" :aria-current="displayCurrentProvider === provider.name ? 'true' : null">
-                        <div class="card-leading">
-                            <div class="card-icon">{{ provider.name.charAt(0).toUpperCase() }}<span v-if="isTransformProvider(provider)" class="card-icon-dot" :title="t('config.transformProvider.title')"></span></div>
-                            <div class="card-content">
-                                <div v-if="provider.name === 'local'" class="bridge-pool-summary">
-                                    <svg class="bridge-pool-summary-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12"><circle cx="6" cy="6" r="2"/><circle cx="18" cy="6" r="2"/><circle cx="12" cy="18" r="2"/><path d="M6 8v4h6v4"/><path d="M18 8v4h-6v4"/></svg>
-                                    <span class="bridge-pool-summary-text">{{ t('config.localBridge.enabledCount', { enabled: localBridgeCandidateProviders().filter(cp => !isLocalBridgeExcluded(cp.name)).length, total: localBridgeCandidateProviders().length }) }}</span>
-                                </div>
-                                <div class="card-title">
-                                    <span>{{ provider.name }}</span>
-                                    <span v-if="provider.readOnly" class="provider-readonly-badge">{{ t('config.badge.system') }}</span>
-                                </div>
-                                <div v-if="provider.name !== 'local'" class="card-subtitle card-subtitle-model">{{ activeProviderModel(provider.name) || t('config.model.unset') }}</div>
-                                <div v-if="provider.name !== 'local'" class="card-subtitle card-subtitle-url">{{ displayProviderUrl(provider) || t('config.url.unset') }}</div>
-                            </div>
-                        </div>
-                        <div class="card-trailing">
-                            <span v-if="speedResults[provider.name]" :class="['latency', speedResults[provider.name].ok ? 'ok' : 'error']">{{ formatLatency(speedResults[provider.name]) }}</span>
-                            <span :class="['pill', providerPillConfigured(provider) ? 'configured' : 'empty']">{{ providerPillText(provider) }}</span>
-                            <div class="card-actions" @click.stop>
-                                <button v-if="provider.name === 'local'" class="card-action-btn bridge-pool-trigger" @click="showCodexBridgePoolModal = true" :aria-label="t('config.localBridge.poolSettings')" :title="t('config.localBridge.poolSettings')">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="6" cy="6" r="2"/><circle cx="18" cy="6" r="2"/><circle cx="12" cy="18" r="2"/><path d="M6 8v4h6v4"/><path d="M18 8v4h-6v4"/></svg>
-                                </button>
-                                <button class="card-action-btn" :class="{ loading: speedLoading[provider.name] }" :disabled="!!speedLoading[provider.name]" @click="runSpeedTest(provider.name, { silent: true })" :aria-label="t('config.availabilityTestAria', { name: provider.name })" :title="t('config.availabilityTest')">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
-                                </button>
-                                <button class="card-action-btn" :disabled="!shouldShowProviderEdit(provider)" @click="openEditModal(provider)" :aria-label="t('config.provider.edit.aria', { name: provider.name })" :title="shouldShowProviderEdit(provider) ? t('common.edit') : t('common.notEditable')">
-                                    <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" @click="openCloneProviderModal(provider)" :aria-label="t('config.provider.clone.aria', { name: provider.name })" :title="t('config.provider.clone')">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></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) ? t('config.shareCommand') : t('config.shareDisabled')"
-                                    :aria-label="t('config.shareCommand.aria')">
-                                    <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 delete" :class="{ disabled: !shouldShowProviderDelete(provider) }" :disabled="!shouldShowProviderDelete(provider)" @click="deleteProvider(provider.name)" :aria-label="t('config.provider.delete.aria', { name: provider.name })" :title="shouldShowProviderDelete(provider) ? t('common.delete') : t('common.notDeletable')">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                    </div>
-                    <div v-if="!isToolConfigWriteAllowed('codex')" class="tool-config-write-overlay">
-                        <div class="tool-config-write-overlay-card">
-                            <div class="tool-config-write-overlay-title">{{ t('toolConfig.codex.lockedTitle') }}</div>
-                            <p>{{ t('toolConfig.codex.lockedDesc') }}</p>
-                            <button type="button" class="btn-tool" @click="setToolConfigPermission('codex', true)" :disabled="toolConfigPermissionSaving.codex">{{ t('toolConfig.enableWrite') }}</button>
-                        </div>
-                    </div>
-                </div>
-                </template>
+                    <!-- Codex 配置 -->
+                    <div
+                        v-show="mainTab === 'config' && isProviderConfigMode"
+                        class="mode-content mode-cards"
+                        id="panel-config-provider"
+                        role="tabpanel"
+                        :aria-labelledby="forceCompactLayout ? 'tab-config' : ('side-tab-config-' + configMode)">
+                <div v-if="forceCompactLayout && !sessionStandalone" class="segmented-control">
+                    <button type="button" :class="['segment', { active: configMode === 'codex' }]" @click="switchConfigMode('codex')">{{ t('tab.config.codex') }}</button>
+                    <button type="button" :class="['segment', { active: configMode === 'claude' }]" @click="switchConfigMode('claude')">{{ t('tab.config.claude') }}</button>
+                    <button type="button" :class="['segment', { active: configMode === 'openclaw' }]" @click="switchConfigMode('openclaw')">{{ t('tab.config.openclaw') }}</button>
+                </div>
+                <template v-if="isCodexConfigMode && shouldShowCliInstallPlaceholder('codex')">
+                    <div class="selector-section">
+                        <div class="empty-state">
+                            <div class="empty-state-title">{{ t('cli.missing.title', { name: 'Codex' }) }}</div>
+                            <div class="empty-state-subtitle">{{ t('cli.missing.subtitle', { name: 'Codex' }) }}</div>
+                            <div class="docs-command-row">
+                                <div class="docs-command-box" role="group" :aria-label="t('cli.missing.commandAria', { name: 'Codex' })">
+                                    <code class="install-command">{{ getInstallCommand('codex', 'install') }}</code>
+                                    <button type="button" class="btn-mini docs-copy-btn" :disabled="!getInstallCommand('codex', 'install')" @click="copyInstallCommand(getInstallCommand('codex', 'install'))">{{ t('common.copy') }}</button>
+                                </div>
+                            </div>
+                            <button type="button" class="btn-tool btn-tool-compact" @click="mainTab = 'docs'; setInstallCommandAction('install')">{{ t('cli.missing.openDocs') }}</button>
+                        </div>
+                    </div>
+                </template>
+                <template v-else>
+                <section class="tool-config-write-card" :aria-label="t('toolConfig.codex.title')">
+                    <div class="tool-config-write-copy">
+                        <div class="tool-config-write-title">{{ t('toolConfig.codex.title') }}</div>
+                        <p class="tool-config-write-desc">{{ t('toolConfig.codex.desc') }}</p>
+                    </div>
+                    <label class="settings-toggle-row tool-config-write-toggle">
+                        <input
+                            type="checkbox"
+                            :checked="isToolConfigWriteAllowed('codex')"
+                            :disabled="toolConfigPermissionSaving.codex"
+                            @change="setToolConfigPermission('codex', $event.target.checked)">
+                        <span class="toggle-track">
+                            <span class="toggle-thumb"></span>
+                        </span>
+                        <span>{{ toolConfigPermissionStatusLabel('codex') }}</span>
+                    </label>
+                </section>
+
+                <div class="tool-config-write-scope" :class="{ locked: !isToolConfigWriteAllowed('codex') }">
+                    <div class="tool-config-write-body">
+                <button class="btn-add" @click="showAddProviderKey = false; showAddModal = true" v-if="!loading && !initError" :disabled="!isToolConfigWriteAllowed('codex')">
+                    <svg class="icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 4v12M4 10h12"/></svg>
+                    {{ t('config.addProvider') }}
+                </button>
+
+                <div class="selector-section" v-if="isCodexConfigMode && codexProviderTemplates.length">
+                    <div class="selector-header">
+                        <span class="selector-title">{{ t('config.providerTemplate.title') }}</span>
+                    </div>
+                    <div class="btn-group" style="flex-wrap: wrap; gap: 8px; margin-top: 0;">
+                        <button v-for="tpl in codexProviderTemplates" :key="tpl.name" type="button" class="btn-mini" @click="newProvider.name = tpl.name; newProvider.url = tpl.url; newProvider.model = tpl.model || ''; newProvider.useTransform = !!tpl.useTransform; showAddProviderKey = false; showAddModal = true">{{ tpl.label }}</button>
+                    </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 ? t('config.modelLoading') : t('config.agents.open') }}</button>
+                </div>
+
+                <div class="selector-section">
+                    <div class="selector-header">
+                        <span class="selector-title">{{ t('config.models') }}</span>
+                        <div class="selector-actions">
+                            <button class="btn-icon" @click="showModelModal = true" :aria-label="t('modal.modelAdd.title')" :title="t('modal.modelAdd.title')" v-if="modelsSource === 'legacy'">+</button>
+                            <button class="btn-icon" @click="showModelListModal = true" :aria-label="t('modal.modelManage.title')" :title="t('modal.modelManage.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="">{{ t('config.modelLoading') }}</option>
+                        <option v-else v-for="model in codexModelOptions" :key="model" :value="model">{{ model }}</option>
+                    </select>
+                    <input v-if="!codexModelsLoading && (modelsSource !== 'remote' || !modelsHasCurrent)" class="model-input" v-model="currentModel" @blur="onModelChange" @keyup.enter="onModelChange" :placeholder="activeProviderModelPlaceholder" :list="codexModelHasList ? 'codex-model-options' : null">
+                    <datalist v-if="codexModelHasList" id="codex-model-options">
+                        <option v-for="model in codexModelOptions" :key="model" :value="model"></option>
+                    </datalist>
+                    <div class="config-template-hint" v-if="modelsSource === 'unlimited'">{{ t('config.models.unlimited') }}</div>
+                    <div class="config-template-hint" v-if="modelsSource === 'error'">{{ t('config.models.error') }}</div>
+                    <div class="config-template-hint" v-if="modelsSource === 'remote' && !modelsHasCurrent">{{ isCodexConfigMode ? t('config.models.notInList.codex') : t('config.models.notInList.other') }}</div>
+                    <div class="config-template-hint" v-if="isCodexConfigMode">{{ t('config.template.editFirst') }}</div>
+                    <div class="config-template-hint" v-else-if="activeProviderBridgeHint">{{ t('config.template.bridgeCodexOnly', { hint: activeProviderBridgeHint }) }}</div>
+                    <button class="btn-tool btn-template-editor" v-if="isCodexConfigMode" @click="openConfigTemplateEditor" :disabled="loading || !!initError">{{ t('config.template.openEditor') }}</button>
+                </div>
+
+                <template v-if="isCodexConfigMode">
+                <div class="config-row">
+                    <div class="selector-section" style="flex:1">
+                        <div class="selector-header"><span class="selector-title">{{ t('config.serviceTier') }}</span></div>
+                        <select class="model-select" v-model="serviceTier" @change="onServiceTierChange">
+                            <option value="fast">{{ t('config.serviceTier.fast') }}</option>
+                            <option value="standard">{{ t('config.serviceTier.standard') }}</option>
+                        </select>
+                        <div class="config-template-hint">{{ t('config.serviceTier.hint', { field: 'service_tier' }) }}</div>
+                    </div>
+                    <div class="selector-section" style="flex:1">
+                        <div class="selector-header"><span class="selector-title">{{ t('config.reasoningEffort') }}</span></div>
+                        <select class="model-select" v-model="modelReasoningEffort" @change="onReasoningEffortChange">
+                            <option value="high">high</option>
+                            <option value="medium">{{ t('config.reasoningEffort.medium') }}</option>
+                            <option value="low">low</option>
+                            <option value="xhigh">xhigh</option>
+                        </select>
+                        <div class="config-template-hint">{{ t('config.reasoningEffort.hint') }}</div>
+                    </div>
+                </div>
+
+                <div class="selector-section">
+                    <div class="selector-header">
+                        <span class="selector-title">{{ t('config.contextBudget') }}</span>
+                        <div class="selector-actions">
+                            <button class="btn-tool btn-tool-compact" @click="resetCodexContextBudgetDefaults" :disabled="loading || !!initError || codexApplying">{{ t('config.reset') }}</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="t('config.example', { value: 190000 })" @focus="editingCodexBudgetField = 'modelContextWindowInput'" @input="sanitizePositiveIntegerDraft('modelContextWindowInput')" @blur="onModelContextWindowBlur" @keydown.enter.prevent="onModelContextWindowBlur">
+                            <div class="form-hint">{{ t('config.contextWindow.hint') }}</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="t('config.example', { value: 185000 })" @focus="editingCodexBudgetField = 'modelAutoCompactTokenLimitInput'" @input="sanitizePositiveIntegerDraft('modelAutoCompactTokenLimitInput')" @blur="onModelAutoCompactTokenLimitBlur" @keydown.enter.prevent="onModelAutoCompactTokenLimitBlur">
+                            <div class="form-hint">{{ t('config.autoCompact.hint') }}</div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="selector-section">
+                    <div class="selector-header"><span class="selector-title">{{ t('config.health.title') }}</span></div>
+                    <button class="btn-tool" @click="runHealthCheck" :disabled="healthCheckLoading || loading || !!initError">{{ healthCheckLoading ? t('config.health.running') : t('config.health.run') }}</button>
+                    <div class="config-template-hint">{{ t('config.health.hint') }}</div>
+                </div>
+                </template>
+
+                <div v-if="!loading && !initError" class="card-list">
+                    <div v-for="provider in displayProvidersList" :key="provider.name" :class="['card', { active: displayCurrentProvider === provider.name, disabled: provider.name === 'local' && isLocalProviderDisabled }]" @click="(provider.name === 'local' && isLocalProviderDisabled) ? null : switchProvider(provider.name)" @keydown.enter.self.prevent="(provider.name === 'local' && isLocalProviderDisabled) ? null : switchProvider(provider.name)" @keydown.space.self.prevent="(provider.name === 'local' && isLocalProviderDisabled) ? null : switchProvider(provider.name)" :tabindex="provider.name === 'local' && isLocalProviderDisabled ? -1 : 0" role="button" :aria-current="displayCurrentProvider === provider.name ? 'true' : null">
+                        <div class="card-leading">
+                            <div class="card-icon">{{ provider.name.charAt(0).toUpperCase() }}<span v-if="isTransformProvider(provider)" class="card-icon-dot" :title="t('config.transformProvider.title')"></span></div>
+                            <div class="card-content">
+                                <div v-if="provider.name === 'local'" class="bridge-pool-summary">
+                                    <svg class="bridge-pool-summary-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12"><circle cx="6" cy="6" r="2"/><circle cx="18" cy="6" r="2"/><circle cx="12" cy="18" r="2"/><path d="M6 8v4h6v4"/><path d="M18 8v4h-6v4"/></svg>
+                                    <span class="bridge-pool-summary-text">{{ t('config.localBridge.enabledCount', { enabled: localBridgeCandidateProviders().filter(cp => !isLocalBridgeExcluded(cp.name)).length, total: localBridgeCandidateProviders().length }) }}</span>
+                                </div>
+                                <div class="card-title">
+                                    <span>{{ provider.name }}</span>
+                                    <span v-if="provider.readOnly" class="provider-readonly-badge">{{ t('config.badge.system') }}</span>
+                                </div>
+                                <div v-if="provider.name !== 'local'" class="card-subtitle card-subtitle-model">{{ activeProviderModel(provider.name) || t('config.model.unset') }}</div>
+                                <div v-if="provider.name !== 'local'" class="card-subtitle card-subtitle-url">{{ displayProviderUrl(provider) || t('config.url.unset') }}</div>
+                            </div>
+                        </div>
+                        <div class="card-trailing">
+                            <span v-if="speedResults[provider.name]" :class="['latency', speedResults[provider.name].ok ? 'ok' : 'error']">{{ formatLatency(speedResults[provider.name]) }}</span>
+                            <span :class="['pill', providerPillConfigured(provider) ? 'configured' : 'empty']">{{ providerPillText(provider) }}</span>
+                            <div class="card-actions" @click.stop>
+                                <button v-if="provider.name === 'local'" class="card-action-btn bridge-pool-trigger" @click="showCodexBridgePoolModal = true" :aria-label="t('config.localBridge.poolSettings')" :title="t('config.localBridge.poolSettings')">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="6" cy="6" r="2"/><circle cx="18" cy="6" r="2"/><circle cx="12" cy="18" r="2"/><path d="M6 8v4h6v4"/><path d="M18 8v4h-6v4"/></svg>
+                                </button>
+                                <button class="card-action-btn" :class="{ loading: speedLoading[provider.name] }" :disabled="!!speedLoading[provider.name]" @click="runSpeedTest(provider.name, { silent: true })" :aria-label="t('config.availabilityTestAria', { name: provider.name })" :title="t('config.availabilityTest')">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
+                                </button>
+                                <button class="card-action-btn" :disabled="!shouldShowProviderEdit(provider)" @click="openEditModal(provider)" :aria-label="t('config.provider.edit.aria', { name: provider.name })" :title="shouldShowProviderEdit(provider) ? t('common.edit') : t('common.notEditable')">
+                                    <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" @click="openCloneProviderModal(provider)" :aria-label="t('config.provider.clone.aria', { name: provider.name })" :title="t('config.provider.clone')">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></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) ? t('config.shareCommand') : t('config.shareDisabled')"
+                                    :aria-label="t('config.shareCommand.aria')">
+                                    <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 delete" :class="{ disabled: !shouldShowProviderDelete(provider) }" :disabled="!shouldShowProviderDelete(provider)" @click="deleteProvider(provider.name)" :aria-label="t('config.provider.delete.aria', { name: provider.name })" :title="shouldShowProviderDelete(provider) ? t('common.delete') : t('common.notDeletable')">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                    </div>
+                    <div v-if="!isToolConfigWriteAllowed('codex')" class="tool-config-write-overlay">
+                        <div class="tool-config-write-overlay-card">
+                            <div class="tool-config-write-overlay-title">{{ t('toolConfig.codex.lockedTitle') }}</div>
+                            <p>{{ t('toolConfig.codex.lockedDesc') }}</p>
+                            <button type="button" class="btn-tool" @click="setToolConfigPermission('codex', true)" :disabled="toolConfigPermissionSaving.codex">{{ t('toolConfig.enableWrite') }}</button>
+                        </div>
+                    </div>
+                </div>
+                </template>
             </div>