codexmate 0.1.12 → 0.1.13

package/web-ui/modules/i18n/locales/zh-tw.mjs

@@ -13,6 +13,7 @@ const zhTw = Object.freeze({
     'common.paste': '粘貼',
     'common.edit': '編輯',
     'common.install': '安裝',
+    'common.optional': '選填',
     'common.update': '升級',
     'common.uninstall': '解除安裝',
     'common.official': '官方',
@@ -135,6 +136,7 @@ const zhTw = Object.freeze({
     'tab.config.claude': 'Claude',
     'tab.config.openclaw': 'OpenClaw',
     'tab.config.opencode': 'OpenCode',
+    'tab.config.pi': 'Pi',
     'tab.sessions': '會話',
     'tab.usage': '用量',
     'tab.market': 'Skills',
@@ -1317,6 +1319,47 @@ const zhTw = Object.freeze({
     'toolConfig.openclaw.confirmMessage': '開啟後，OpenClaw tab 內的操作會寫入 openclaw.json 及 OpenClaw 工作區檔案（AGENTS.md、SOUL.md 等）。',
     'toolConfig.openclaw.lockedTitle': 'OpenClaw 目前為唯讀',
     'toolConfig.openclaw.lockedDesc': '這裡不會寫入 OpenClaw 設定。要套用設定或編輯工作區檔案，請先開啟本 tab 的寫入開關。',
+    'side.config.pi': 'Pi',
+    'side.config.pi.meta': '設定',
+    'toolConfig.pi.title': 'Pi 設定寫入',
+    'toolConfig.pi.desc': '預設唯讀；開啟後可同步 Pi 設定。',
+    'toolConfig.pi.lockedTitle': '唯讀模式',
+    'toolConfig.pi.lockedDesc': '開啟寫入權限後可同步 Pi 設定。',
+    'toolConfig.pi.confirmMessage': '開啟後，Pi tab 內的操作會寫入 ~/.pi/config.json 或專案內的 ./.pi/config.json。',
+    'pi.status.readOnly': '唯讀',
+    'pi.config.openGlobal': '打開全域設定',
+    'pi.providers.title': 'Pi 供應商',
+    'pi.providers.subtitle': '管理 Piper 本地供應商與模型',
+    'pi.providers.empty': '未找到 Piper 供應商，點擊新增開始。',
+    'pi.providers.targetFile': 'Pi 生效設定檔：{path}',
+    'pi.providers.editorTitle': '編輯供應商',
+    'pi.providers.add': '新增供應商',
+    'pi.providers.active': '已啟用',
+    'pi.providers.setActive': '設為使用中',
+    'pi.providers.deleteTitle': '刪除 Pi 設定',
+    'pi.providers.deleteMessage': '確定刪除供應商 "{name}"？',
+    'pi.providers.fields.name': '名稱',
+    'pi.providers.fields.baseUrl': 'Base URL',
+    'pi.providers.fields.api': '介面格式',
+    'pi.providers.fields.apiKey': 'API Key',
+    'pi.providers.fields.models': '模型',
+    'pi.providers.fields.configJson': '組態 JSON',
+    'pi.providers.models.remove': '刪除',
+    'pi.providers.models.search': '搜尋可用模型…',
+    'pi.providers.models.remoteCount': '已取得 {count} 個可用模型，點擊新增',
+    'pi.providers.models.remoteLoading': '正在取得遠端模型清單…',
+    'pi.providers.models.remoteFailed': '可手動輸入模型 ID。',
+    'pi.providers.models.noMatch': '無符合模型',
+    'pi.providers.delete': '刪除供應商',
+    'pi.providers.addModal.title': '新增供應商',
+    'pi.providers.addModal.subtitle': '建立新的 Piper 供應商',
+    'pi.providers.addModal.fields.baseUrl': 'Base URL',
+    'pi.providers.addModal.fields.apiKey': 'API Key',
+    'pi.providers.addModal.api.openaiCompletions': 'OpenAI Chat Completions（最相容）',
+    'pi.providers.addModal.api.openaiResponses': 'OpenAI Responses API',
+    'pi.providers.addModal.api.anthropicMessages': 'Anthropic Messages API',
+    'pi.providers.addModal.api.googleGenerativeAi': 'Google Generative AI',
+    'pi.providers.addModal.fields.api': '介面格式',
     'kilocode.providerModel.title': 'KiloCode provider / 模型',
     'kilocode.connection.title': 'KiloCode 連線',
     'kilocode.targetFile': 'KiloCode 生效設定：{path} · {status}',

package/web-ui/modules/i18n/locales/zh.mjs

@@ -13,6 +13,7 @@ const zh = Object.freeze({
     'common.paste': '粘贴',
     'common.edit': '编辑',
     'common.install': '安装',
+    'common.optional': '选填',
     'common.update': '升级',
     'common.uninstall': '卸载',
     'common.official': '官方',
@@ -135,6 +136,7 @@ const zh = Object.freeze({
     'tab.config.claude': 'Claude',
     'tab.config.openclaw': 'OpenClaw',
     'tab.config.opencode': 'OpenCode',
+    'tab.config.pi': 'Pi',
     'tab.sessions': '会话',
     'tab.usage': '用量',
     'tab.market': 'Skills',
@@ -1317,6 +1319,47 @@ const zh = Object.freeze({
     'toolConfig.openclaw.confirmMessage': '打开后，OpenClaw tab 内的操作会写入 openclaw.json 及 OpenClaw 工作区文件（AGENTS.md、SOUL.md 等）。',
     'toolConfig.openclaw.lockedTitle': 'OpenClaw 当前为只读',
     'toolConfig.openclaw.lockedDesc': '这里不会写入 OpenClaw 配置。要应用配置或编辑工作区文件，请先打开本 tab 的写入开关。',
+    'side.config.pi': 'Pi',
+    'side.config.pi.meta': '配置',
+    'toolConfig.pi.title': 'Pi 配置写入',
+    'toolConfig.pi.desc': '默认只读；开启后可同步 Pi 配置。',
+    'toolConfig.pi.lockedTitle': '只读模式',
+    'toolConfig.pi.lockedDesc': '开启写入权限后可同步 Pi 配置。',
+    'toolConfig.pi.confirmMessage': '打开后，Pi tab 内的操作会写入 ~/.pi/config.json 或项目内的 ./.pi/config.json。',
+    'pi.status.readOnly': '只读',
+    'pi.config.openGlobal': '打开全局配置',
+    'pi.providers.title': 'Pi 供应商',
+    'pi.providers.subtitle': '管理 Piper 本地供应商与模型',
+    'pi.providers.empty': '未找到 Piper 供应商，点击添加开始。',
+    'pi.providers.targetFile': 'Pi 生效配置文件：{path}',
+    'pi.providers.editorTitle': '编辑供应商',
+    'pi.providers.add': '添加供应商',
+    'pi.providers.active': '已启用',
+    'pi.providers.setActive': '设为使用中',
+    'pi.providers.deleteTitle': '删除 Pi 配置',
+    'pi.providers.deleteMessage': '确定删除供应商 "{name}"？',
+    'pi.providers.fields.name': '名称',
+    'pi.providers.fields.baseUrl': 'Base URL',
+    'pi.providers.fields.api': '接口格式',
+    'pi.providers.fields.apiKey': 'API Key',
+    'pi.providers.fields.models': '模型',
+    'pi.providers.fields.configJson': '配置 JSON',
+    'pi.providers.models.remove': '删除',
+    'pi.providers.models.search': '搜索可用模型…',
+    'pi.providers.models.remoteCount': '已拉取 {count} 个可用模型，点击添加',
+    'pi.providers.models.remoteLoading': '正在获取远端模型列表…',
+    'pi.providers.models.remoteFailed': '可手动输入模型 ID。',
+    'pi.providers.models.noMatch': '无匹配模型',
+    'pi.providers.delete': '删除供应商',
+    'pi.providers.addModal.title': '添加供应商',
+    'pi.providers.addModal.subtitle': '创建新的 Piper 供应商',
+    'pi.providers.addModal.fields.baseUrl': 'Base URL',
+    'pi.providers.addModal.fields.apiKey': 'API Key',
+    'pi.providers.addModal.api.openaiCompletions': 'OpenAI Chat Completions（最兼容）',
+    'pi.providers.addModal.api.openaiResponses': 'OpenAI Responses API',
+    'pi.providers.addModal.api.anthropicMessages': 'Anthropic Messages API',
+    'pi.providers.addModal.api.googleGenerativeAi': 'Google Generative AI',
+    'pi.providers.addModal.fields.api': '接口格式',
     'kilocode.providerModel.title': 'KiloCode provider / model',
     'kilocode.connection.title': 'KiloCode 连接',
     'kilocode.targetFile': 'KiloCode 生效配置：{path} · {status}',

package/web-ui/partials/index/layout-header.html

@@ -258,6 +258,21 @@
                             <span>{{ t('side.config.kilocode.meta') }}</span>
                         </div>
                     </button>
+                    <button
+                        v-if="isConfigModeVisible('pi')"
+                        id="side-tab-config-pi"
+                        data-main-tab="config"
+                        data-config-mode="pi"
+                        :aria-current="mainTab === 'config' && configMode === 'pi' ? 'page' : null"
+                        :class="['side-item', 'side-item-compact', { active: isConfigModeNavActive('pi') }]"
+                        @pointerdown="onConfigTabPointerDown('pi', $event)"
+                        @click="onConfigTabClick('pi', $event)">
+                        <span class="side-item-icon" aria-hidden="true">P</span>
+                        <div class="side-item-title">{{ t('side.config.pi') }}</div>
+                        <div class="side-item-meta">
+                            <span>{{ t('side.config.pi.meta') }}</span>
+                        </div>
+                    </button>
                 </div>
 
 

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-settings.html

@@ -144,6 +144,7 @@
                                     <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>
@@ -169,6 +170,12 @@
                                             <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>