codexmate 0.1.10 → 0.1.13

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

@@ -6,11 +6,11 @@
                     role="tabpanel"
                     :aria-labelledby="forceCompactLayout ? 'tab-config' : 'side-tab-config-opencode'">
                     <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>
-                        <button type="button" :class="['segment', { active: configMode === 'opencode' }]" @click="switchConfigMode('opencode')">{{ t('tab.config.opencode') }}</button>
-                        <button type="button" :class="['segment', { active: configMode === 'kilocode' }]" @click="switchConfigMode('kilocode')">{{ t('tab.config.kilocode') }}</button>
+                        <button v-if="isConfigModeVisible('codex')" type="button" :class="['segment', { active: configMode === 'codex' }]" @click="switchConfigMode('codex')">{{ t('tab.config.codex') }}</button>
+                        <button v-if="isConfigModeVisible('claude')" type="button" :class="['segment', { active: configMode === 'claude' }]" @click="switchConfigMode('claude')">{{ t('tab.config.claude') }}</button>
+                        <button v-if="isConfigModeVisible('openclaw')" type="button" :class="['segment', { active: configMode === 'openclaw' }]" @click="switchConfigMode('openclaw')">{{ t('tab.config.openclaw') }}</button>
+                        <button v-if="isConfigModeVisible('opencode')" type="button" :class="['segment', { active: configMode === 'opencode' }]" @click="switchConfigMode('opencode')">{{ t('tab.config.opencode') }}</button>
+                        <button v-if="isConfigModeVisible('kilocode')" type="button" :class="['segment', { active: configMode === 'kilocode' }]" @click="switchConfigMode('kilocode')">{{ t('tab.config.kilocode') }}</button>
                     </div>
 
                     <section class="tool-config-write-card" :aria-label="t('opencode.writeAria')">

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

@@ -0,0 +1,171 @@
+<!-- Pi 配置 -->
+                <div
+                    v-show="mainTab === 'config' && configMode === 'pi'"
+                    class="mode-content mode-cards"
+                    id="panel-config-pi"
+                    role="tabpanel"
+                    :aria-labelledby="forceCompactLayout ? 'tab-config' : 'side-tab-config-pi'">
+                <div v-if="forceCompactLayout && !sessionStandalone" class="segmented-control">
+                    <button v-if="isConfigModeVisible('codex')" type="button" :class="['segment', { active: configMode === 'codex' }]" @click="switchConfigMode('codex')">{{ t('tab.config.codex') }}</button>
+                    <button v-if="isConfigModeVisible('claude')" type="button" :class="['segment', { active: configMode === 'claude' }]" @click="switchConfigMode('claude')">{{ t('tab.config.claude') }}</button>
+                    <button v-if="isConfigModeVisible('openclaw')" type="button" :class="['segment', { active: configMode === 'openclaw' }]" @click="switchConfigMode('openclaw')">{{ t('tab.config.openclaw') }}</button>
+                    <button v-if="isConfigModeVisible('opencode')" type="button" :class="['segment', { active: configMode === 'opencode' }]" @click="switchConfigMode('opencode')">{{ t('tab.config.opencode') }}</button>
+                    <button v-if="isConfigModeVisible('kilocode')" type="button" :class="['segment', { active: configMode === 'kilocode' }]" @click="switchConfigMode('kilocode')">{{ t('tab.config.kilocode') }}</button>
+                    <button v-if="isConfigModeVisible('pi')" type="button" :class="['segment', { active: configMode === 'pi' }]" @click="switchConfigMode('pi')">{{ t('tab.config.pi') }}</button>
+                </div>
+                <section class="tool-config-write-card" :aria-label="t('toolConfig.pi.title')">
+                    <div class="tool-config-write-copy">
+                        <div class="tool-config-write-title">{{ t('toolConfig.pi.title') }}</div>
+                        <p class="tool-config-write-desc">{{ t('toolConfig.pi.desc') }}</p>
+                    </div>
+                    <label class="settings-toggle-row tool-config-write-toggle">
+                        <input
+                            type="checkbox"
+                            autocomplete="off"
+                            :checked="isToolConfigWriteAllowed('pi')"
+                            :disabled="toolConfigPermissionSaving.pi"
+                            @change="setToolConfigPermission('pi', $event.target.checked)">
+                        <span class="toggle-track"><span class="toggle-thumb"></span></span>
+                        <span>{{ toolConfigPermissionStatusLabel('pi') }}</span>
+                    </label>
+                </section>
+
+                <div class="tool-config-write-scope" :class="{ locked: !isToolConfigWriteAllowed('pi') }">
+                    <div class="tool-config-write-body">
+                        <section class="selector-section">
+                            <div class="selector-header">
+                                <span class="selector-title">{{ t('pi.providers.title') }}</span>
+                                <button type="button" class="btn-tool" @click="startAddPiProvider" :disabled="!isToolConfigWriteAllowed('pi') || piSaving">{{ t('pi.providers.add') }}</button>
+                            </div>
+                            <div class="config-template-hint">{{ t('pi.providers.targetFile', { path: '~/.pi/agent/models.json' }) }}</div>
+                            <div class="card-list" v-if="piProviderIds.length">
+                                <div v-for="providerId in piProviderIds" :key="providerId" class="card" role="button" tabindex="0" @click="openEditPiProvider(providerId)">
+                                    <div class="card-leading">
+                                        <div class="card-icon">{{ piProviderName(providerId).charAt(0).toUpperCase() }}</div>
+                                        <div class="card-content">
+                                            <div class="card-title">{{ piProviderName(providerId) }}</div>
+                                            <div class="card-subtitle">{{ piProviderSummary(providerId) }}</div>
+                                        </div>
+                                    </div>
+                                    <div class="card-trailing">
+                                        <span v-if="piActiveProvider === providerId" class="pill configured">{{ t('pi.providers.active') }}</span>
+                                        <button v-else type="button" class="btn-tool" @click.stop="switchPiActiveProvider(providerId)" :disabled="!isToolConfigWriteAllowed('pi') || piSaving">{{ t('pi.providers.setActive') }}</button>
+                                    </div>
+                                </div>
+                            </div>
+                            <div v-if="!piProviderIds.length" class="config-template-hint">{{ t('pi.providers.empty') }}</div>
+                        </section>
+
+                        <section class="selector-section" v-if="editingPiProvider">
+                            <div class="selector-header">
+                                <span class="selector-title">{{ t('pi.providers.editorTitle') }}</span>
+                                <div class="settings-tab-actions">
+                                    <button type="button" class="btn-tool" @click="savePiProvider" :disabled="!isToolConfigWriteAllowed('pi') || piSaving">{{ t('common.save') }}</button>
+                                </div>
+                            </div>
+                            <div class="codex-config-grid">
+                                <div class="form-group codex-config-field">
+                                    <label class="form-label">{{ t('pi.providers.fields.name') }}</label>
+                                    <input class="form-input" type="text" :value="piProviderName(editingPiProvider.id)" readonly>
+                                </div>
+                                <div class="form-group codex-config-field">
+                                    <label class="form-label">{{ t('pi.providers.fields.baseUrl') }}</label>
+                                    <input class="form-input" type="url" v-model="editingPiProvider.form.baseUrl" autocomplete="off" spellcheck="false" placeholder="https://">
+                                </div>
+                                <div class="form-group codex-config-field">
+                                    <label class="form-label">{{ t('pi.providers.fields.api') }}</label>
+                                    <select class="form-input" v-model="editingPiProvider.form.api" :disabled="!isToolConfigWriteAllowed('pi')">
+                                        <option value="openai-completions">openai-completions — {{ t('pi.providers.addModal.api.openaiCompletions') }}</option>
+                                        <option value="openai-responses">openai-responses — {{ t('pi.providers.addModal.api.openaiResponses') }}</option>
+                                        <option value="anthropic-messages">anthropic-messages — {{ t('pi.providers.addModal.api.anthropicMessages') }}</option>
+                                        <option value="google-generative-ai">google-generative-ai — {{ t('pi.providers.addModal.api.googleGenerativeAi') }}</option>
+                                        <option v-if="!['openai-completions', 'openai-responses', 'anthropic-messages', 'google-generative-ai'].includes(editingPiProvider.form.api)" :value="editingPiProvider.form.api">{{ editingPiProvider.form.api || '—' }}</option>
+                                    </select>
+                                </div>
+                                <div class="form-group codex-config-field">
+                                    <label class="form-label">{{ t('pi.providers.fields.apiKey') }}</label>
+                                    <div class="input-with-toggle">
+                                        <input class="form-input" v-model="editingPiProvider.form.apiKey" :type="piShowKey ? 'text' : 'password'" autocomplete="off" spellcheck="false" placeholder="sk-...">
+                                        <button type="button" class="input-toggle-btn" @mousedown.prevent @click="piShowKey = !piShowKey" :title="piShowKey ? t('common.hide') : t('common.show')" :aria-label="piShowKey ? t('common.hide') : t('common.show')">
+                                            <svg v-if="!piShowKey" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16"><path d="M10 4C5 4 1.73 8.11 1 10c.73 1.89 4 6 9 6s8.27-4.11 9-6c-.73-1.89-4-6-9-6z"/><circle cx="10" cy="10" r="3"/></svg>
+                                            <svg v-else viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16"><path d="M2 2l16 16M8.2 4.2A9.9 9.9 0 0 1 10 4c5 0 8.27 4.11 9 6-.44.94-1.5 2.7-3.2 4.2M14.5 14.5A5.9 5.9 0 0 1 10 16c-5 0-8.27-4.11-9-6 .76-1.66 2.2-3.6 4.3-5"/></svg>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">{{ t('pi.providers.fields.models') }}</label>
+                                <p v-if="piRemoteModelsLoading" class="config-template-hint">{{ t('pi.providers.models.remoteLoading') }}</p>
+                                <p v-else-if="piRemoteModelError" class="config-template-hint">{{ piRemoteModelError }} · {{ t('pi.providers.models.remoteFailed') }}</p>
+                                <div class="card-list">
+                                    <div class="card" v-for="(model, index) in editingPiProvider.form.models" :key="index">
+                                        <div class="input-with-toggle">
+                                            <input class="form-input" type="text" v-model="model.id" autocomplete="off" spellcheck="false" placeholder="claude-sonnet-4" :disabled="!isToolConfigWriteAllowed('pi')" @input="piModelSearch = model.id">
+                                            <button type="button" class="btn-tool input-toggle-btn" @click="editingPiProvider.form.models.splice(index, 1)" :disabled="!isToolConfigWriteAllowed('pi')">{{ t('pi.providers.models.remove') }}</button>
+                                        </div>
+                                    </div>
+                                    <div class="card" v-if="editingPiProvider.form.models.length === 0">
+                                        <input class="form-input" type="text" v-model="piModelSearch" autocomplete="off" spellcheck="false" :placeholder="t('pi.providers.models.search')" @keydown.enter.prevent="addPiRemoteModel(piModelSearch.trim())">
+                                    </div>
+                                    <div class="card" v-if="!piRemoteModelsLoading && !piRemoteModelError && piModelSearch.trim() && piFilteredRemoteModels().length > 0">
+                                        <button type="button" class="btn-tool" style="width: 100%; text-align: left; justify-content: flex-start;" v-for="id in piFilteredRemoteModels()" :key="id" @click="addPiRemoteModel(id)">{{ id }}</button>
+                                        <p class="config-template-hint">{{ t('pi.providers.models.remoteCount', { count: piRemoteModels.length }) }}</p>
+                                    </div>
+                                    <p v-if="!piRemoteModelsLoading && !piRemoteModelError && piModelSearch.trim() && piFilteredRemoteModels().length === 0" class="config-template-hint">{{ t('pi.providers.models.noMatch') }}</p>
+                                </div>
+                            </div>
+                            <div class="settings-tab-actions">
+                                <button type="button" class="btn-tool" @click="confirmDeletePiProvider" :disabled="!isToolConfigWriteAllowed('pi') || piSaving">{{ t('pi.providers.delete') }}</button>
+                            </div>
+                        </section>
+
+                        <section class="selector-section" v-if="showAddPiProviderModal">
+                            <div class="selector-header">
+                                <span class="selector-title">{{ t('pi.providers.addModal.title') }}</span>
+                                <div class="settings-tab-actions">
+                                    <button type="button" class="btn-tool" @click="addPiProviderFromModal" :disabled="!isToolConfigWriteAllowed('pi') || piSaving">{{ t('common.save') }}</button>
+                                    <button type="button" class="btn-tool" @click="cancelAddPiProviderModal">{{ t('common.cancel') }}</button>
+                                </div>
+                            </div>
+                            <div class="config-template-hint">{{ t('pi.providers.addModal.subtitle') }}</div>
+                            <div class="codex-config-grid">
+                                <div class="form-group codex-config-field">
+                                    <label class="form-label">{{ t('pi.providers.addModal.fields.baseUrl') }}</label>
+                                    <input class="form-input" type="url" v-model="addingPiProviderBaseUrl" autocomplete="off" spellcheck="false" placeholder="https://" @input="onAddingPiEndpointChange">
+                                </div>
+                                <div class="form-group codex-config-field">
+                                    <label class="form-label">{{ t('pi.providers.addModal.fields.api') }}</label>
+                                    <select class="form-input" v-model="addingPiProviderApi">
+                                        <option value="openai-completions">openai-completions — {{ t('pi.providers.addModal.api.openaiCompletions') }}</option>
+                                        <option value="openai-responses">openai-responses — {{ t('pi.providers.addModal.api.openaiResponses') }}</option>
+                                        <option value="anthropic-messages">anthropic-messages — {{ t('pi.providers.addModal.api.anthropicMessages') }}</option>
+                                        <option value="google-generative-ai">google-generative-ai — {{ t('pi.providers.addModal.api.googleGenerativeAi') }}</option>
+                                    </select>
+                                </div>
+                                <div class="form-group codex-config-field">
+                                    <label class="form-label">{{ t('pi.providers.addModal.fields.apiKey') }}</label>
+                                    <input class="form-input" type="password" v-model="addingPiProviderApiKey" autocomplete="off" spellcheck="false" :placeholder="t('common.optional')" @input="onAddingPiEndpointChange">
+                                </div>
+                                <div class="form-group codex-config-field">
+                                    <label class="form-label">{{ t('pi.providers.fields.models') }}</label>
+                                    <p v-if="addingPiRemoteLoading" class="config-template-hint">{{ t('pi.providers.models.remoteLoading') }}</p>
+                                    <p v-else-if="addingPiRemoteError" class="config-template-hint">{{ addingPiRemoteError }} · {{ t('pi.providers.models.remoteFailed') }}</p>
+                                    <input class="form-input" type="text" v-model="addingPiProviderModel" autocomplete="off" spellcheck="false" :placeholder="addingPiRemoteModels.length ? t('pi.providers.models.search') : 'claude-sonnet-4'">
+                                    <template v-if="!addingPiRemoteLoading && addingPiProviderModel.trim() && piFilteredAddingRemoteModels().length > 0">
+                                        <button type="button" class="btn-tool" style="width: 100%; text-align: left; justify-content: flex-start; margin-top: 8px;" v-for="id in piFilteredAddingRemoteModels()" :key="id" @click="addingPiProviderModel = id">{{ id }}</button>
+                                        <p class="config-template-hint">{{ t('pi.providers.models.remoteCount', { count: addingPiRemoteModels.length }) }}</p>
+                                    </template>
+                                    <p v-else-if="!addingPiRemoteLoading && !addingPiRemoteError && addingPiProviderModel.trim() && addingPiRemoteModels.length > 0" class="config-template-hint">{{ t('pi.providers.models.noMatch') }}</p>
+                                </div>
+                            </div>
+                        </section>
+                        <div v-if="!isToolConfigWriteAllowed('pi')" class="tool-config-write-overlay">
+                            <div class="tool-config-write-overlay-card">
+                                <div class="tool-config-write-overlay-title">{{ t('toolConfig.pi.lockedTitle') }}</div>
+                                <p>{{ t('toolConfig.pi.lockedDesc') }}</p>
+                                <button type="button" class="btn-tool" @click="setToolConfigPermission('pi', true)" :disabled="toolConfigPermissionSaving.pi">{{ t('toolConfig.enableWrite') }}</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>

package/web-ui/partials/index/panel-prompts.html

@@ -65,6 +65,13 @@
                                     :title="t('common.paste')">
                                     <svg class="btn-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="8" y="2" width="8" height="4" rx="1"/><path d="M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2"/></svg>
                                 </button>
+                                <button
+                                    class="btn-mini"
+                                    @click="openPromptHistory"
+                                    :disabled="agentsSaving || agentsDiffVisible"
+                                    :title="t('common.history')">
+                                    <svg class="btn-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 8v4l3 2"/><path d="M3 12a9 9 0 1 0 9-9 9 9 0 0 0-7.5 4M3 4v4h4"/></svg>
+                                </button>
                             </div>
                             <div class="prompts-editor-group prompts-editor-group--workflow">
                                 <button class="btn-mini" @click="loadPromptsContent" :disabled="agentsSaving || agentsDiffLoading" :title="t('common.cancel')">
@@ -85,6 +92,27 @@
                             </div>
                         </div>
                     </div>
+                    <details v-if="promptHistoryVisible" class="prompt-history-panel" open>
+                        <summary class="prompt-history-summary">
+                            <span>{{ t('common.history') }}</span>
+                            <button type="button" class="btn-mini prompt-history-close" @click="closePromptHistory" :title="t('common.close')">✕</button>
+                        </summary>
+                        <div class="prompt-history-body">
+                            <ul v-if="!promptHistoryLoading && !promptHistoryError && promptHistoryItems.length" class="prompt-history-list">
+                                <li v-for="item in promptHistoryItems" :key="item.id" :class="['prompt-history-item', { active: promptHistoryPreviewId === item.id }]" @click="viewPromptHistoryItem(item)">
+                                    <span class="prompt-history-time">{{ item.id }}</span>
+                                    <span class="prompt-history-size">{{ Math.round(item.size / 1024 * 10) / 10 }} KB</span>
+                                </li>
+                            </ul>
+                            <div v-if="promptHistoryLoading" class="state-message">{{ t('diff.generating') }}</div>
+                            <div v-else-if="promptHistoryError" class="state-message error">{{ promptHistoryError }}</div>
+                            <div v-else-if="!promptHistoryItems.length" class="state-message">{{ t('toast.history.empty') }}</div>
+                            <div v-if="promptHistoryPreviewContent" class="prompt-history-preview-wrap">
+                                <pre class="prompt-history-preview">{{ promptHistoryPreviewContent }}</pre>
+                                <button type="button" class="btn-mini btn-confirm-mini" @click="applyPromptHistoryToEditor" :disabled="agentsSaving || agentsDiffVisible">{{ t('common.restoreToEditor') }}</button>
+                            </div>
+                        </div>
+                    </details>
                     <div class="prompt-presets-inline-row">
                         <div class="prompt-presets-inline-group">
                             <label class="prompt-presets-inline-label">{{ t('prompts.presets.title') }}</label>
@@ -228,6 +256,9 @@
                                     <button class="btn-mini" @click="pasteSysPromptContent" :disabled="sysPromptLoading || sysPromptSaving || sysPromptDiffVisible" :title="t('common.paste')">
                                         <svg class="btn-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="8" y="2" width="8" height="4" rx="1"/><path d="M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2"/></svg>
                                     </button>
+                                    <button class="btn-mini" @click="openSysHistory" :disabled="sysPromptSaving || sysPromptDiffVisible" :title="t('common.history')">
+                                        <svg class="btn-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 8v4l3 2"/><path d="M3 12a9 9 0 1 0 9-9 9 9 0 0 0-7.5 4M3 4v4h4"/></svg>
+                                    </button>
                                 </div>
                                 <div class="prompts-editor-group prompts-editor-group--workflow">
                                     <button class="btn-mini" @click="cancelSysPromptEdit" :disabled="sysPromptSaving || sysPromptDiffLoading" :title="t('common.cancel')">
@@ -243,6 +274,27 @@
                                 </div>
                             </div>
                         </div>
+                        <details v-if="sysHistoryVisible" class="prompt-history-panel" open>
+                            <summary class="prompt-history-summary">
+                                <span>{{ t('common.history') }}</span>
+                                <button type="button" class="btn-mini prompt-history-close" @click="closeSysHistory" :title="t('common.close')">✕</button>
+                            </summary>
+                            <div class="prompt-history-body">
+                                <ul v-if="!sysHistoryLoading && !sysHistoryError && sysHistoryItems.length" class="prompt-history-list">
+                                    <li v-for="item in sysHistoryItems" :key="item.id" :class="['prompt-history-item', { active: sysHistoryPreviewId === item.id }]" @click="viewSysHistoryItem(item)">
+                                        <span class="prompt-history-time">{{ item.id }}</span>
+                                        <span class="prompt-history-size">{{ Math.round(item.size / 1024 * 10) / 10 }} KB</span>
+                                    </li>
+                                </ul>
+                                <div v-if="sysHistoryLoading" class="state-message">{{ t('diff.generating') }}</div>
+                                <div v-else-if="sysHistoryError" class="state-message error">{{ sysHistoryError }}</div>
+                                <div v-else-if="!sysHistoryItems.length" class="state-message">{{ t('toast.history.empty') }}</div>
+                                <div v-if="sysHistoryPreviewContent" class="prompt-history-preview-wrap">
+                                    <pre class="prompt-history-preview">{{ sysHistoryPreviewContent }}</pre>
+                                    <button type="button" class="btn-mini btn-confirm-mini" @click="applySysHistoryToEditor" :disabled="sysPromptSaving || sysPromptDiffVisible">{{ t('common.restoreToEditor') }}</button>
+                                </div>
+                            </div>
+                        </details>
                         <div class="form-group">
                             <div v-if="sysPromptDiffVisible">
                                 <div

package/web-ui/partials/index/panel-sessions.html

@@ -410,6 +410,18 @@
                                                 </div>
                                             </div>
                                             <div class="session-msg-content" v-html="highlightQueryText(msg.text) || ''"></div>
+                                            <button
+                                                v-if="msg.normalizedRole === 'user'"
+                                                type="button"
+                                                class="session-msg-copy"
+                                                @click="copySessionMessage(msg)"
+                                                :aria-label="t('sessions.preview.copyMessage')"
+                                                :title="t('sessions.preview.copyMessage')">
+                                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                    <rect x="8" y="8" width="12" height="12" rx="2"></rect>
+                                                    <path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"></path>
+                                                </svg>
+                                            </button>
                                         </div>
                                         <div v-if="canLoadMoreSessionMessages" class="session-preview-load-more">
                                             <span>{{ t('sessions.preview.shownCount', { shown: activeSessionVisibleMessages.length, total: activeSessionMessages.length }) }}</span>

package/web-ui/partials/index/panel-settings.html

@@ -138,6 +138,48 @@
                                     </div>
                                 </div>
                             </section>
+
+                            <section class="settings-card" :aria-label="t('settings.configTabs.title')">
+                                <div class="settings-card-main">
+                                    <div class="settings-card-content">
+                                        <div class="settings-card-title">{{ t('settings.configTabs.title') }}</div>
+                                        <p class="settings-card-desc">{{ t('settings.configTabs.meta') }}</p>
+                                        <div class="settings-toggle-grid">
+                                        <label class="settings-toggle-row">
+                                            <input type="checkbox" :checked="configModeVisibility.codex" @change="setConfigModeVisibility('codex', $event.target.checked)">
+                                            <span class="toggle-track"><span class="toggle-thumb"></span></span>
+                                            <span>{{ t('tab.config.codex') }}</span>
+                                        </label>
+                                        <label class="settings-toggle-row">
+                                            <input type="checkbox" :checked="configModeVisibility.claude" @change="setConfigModeVisibility('claude', $event.target.checked)">
+                                            <span class="toggle-track"><span class="toggle-thumb"></span></span>
+                                            <span>{{ t('tab.config.claude') }}</span>
+                                        </label>
+                                        <label class="settings-toggle-row">
+                                            <input type="checkbox" :checked="configModeVisibility.openclaw" @change="setConfigModeVisibility('openclaw', $event.target.checked)">
+                                            <span class="toggle-track"><span class="toggle-thumb"></span></span>
+                                            <span>{{ t('tab.config.openclaw') }}</span>
+                                        </label>
+                                        <label class="settings-toggle-row">
+                                            <input type="checkbox" :checked="configModeVisibility.opencode" @change="setConfigModeVisibility('opencode', $event.target.checked)">
+                                            <span class="toggle-track"><span class="toggle-thumb"></span></span>
+                                            <span>{{ t('tab.config.opencode') }}</span>
+                                        </label>
+                                        <label class="settings-toggle-row">
+                                            <input type="checkbox" :checked="configModeVisibility.kilocode" @change="setConfigModeVisibility('kilocode', $event.target.checked)">
+                                            <span class="toggle-track"><span class="toggle-thumb"></span></span>
+                                            <span>{{ t('tab.config.kilocode') }}</span>
+                                        </label>
+                                        <label class="settings-toggle-row">
+                                            <input type="checkbox" :checked="configModeVisibility.pi" @change="setConfigModeVisibility('pi', $event.target.checked)">
+                                            <span class="toggle-track"><span class="toggle-thumb"></span></span>
+                                            <span>{{ t('tab.config.pi') }}</span>
+                                        </label>
+                                        </div>
+                                        <p class="settings-card-hint">{{ t('settings.configTabs.hint') }}</p>
+                                    </div>
+                                </div>
+                            </section>
                         </div>
                     </div>