codexmate 0.0.45 → 0.0.48

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

@@ -1,6 +1,7 @@
 const zh = Object.freeze({
     // Global
     'lang.zh': '中文',
+    'lang.zh-tw': '繁體中文',
     'lang.en': 'English',
     'lang.vi': '越南语',
     'lang.label': '语言',
@@ -65,6 +66,8 @@ const zh = Object.freeze({
     'common.none': '暂无',
     'common.configured': '已配置',
     'common.notConfigured': '未配置',
+    'common.enabled': '已启用',
+    'common.disabled': '已禁用',
     'cli.missing.title': '{name} CLI 未安装',
     'cli.missing.subtitle': '请先安装 {name} CLI 后再继续使用此页面。',
     'cli.missing.openDocs': '打开安装指南',
@@ -125,6 +128,7 @@ const zh = Object.freeze({
     'tab.config.codex': 'Codex',
     'tab.config.claude': 'Claude',
     'tab.config.openclaw': 'OpenClaw',
+    'tab.config.opencode': 'OpenCode',
     'tab.sessions': '会话',
     'tab.usage': '用量',
     'tab.orchestration': '任务',
@@ -166,6 +170,8 @@ const zh = Object.freeze({
     'side.config.claude.meta': 'Claude Settings',
     'side.config.openclaw': 'OpenClaw',
     'side.config.openclaw.meta': 'JSON5 / AGENTS',
+    'side.config.opencode': 'OpenCode',
+    'side.config.opencode.meta': '配置 / Provider',
     'side.sessions.browser': '会话浏览',
     'side.sessions.browser.meta': '浏览 / 导出 / 清理',
     'side.prompts.agents': 'AGENTS.md',
@@ -480,6 +486,7 @@ const zh = Object.freeze({
     'modal.configTemplate.mode.twoStep': '两步确认：先预览差异，再应用写入。',
     'modal.configTemplate.mode.oneStep': '一步应用：点击“应用”直接写入。',
     'diff.title.configTemplate': '差异预览（config.toml）',
+    'diff.title.claudeSettings': '差异预览（settings.json）',
     'diff.generating': '生成中...',
     'diff.failed': '生成失败',
     'diff.noChanges': '未检测到改动',
@@ -804,6 +811,39 @@ const zh = Object.freeze({
     'toolConfig.claude.lockedTitle': 'Claude 提供商当前为只读',
     'toolConfig.claude.lockedDesc': '这里不会写入 Claude 配置。要添加、应用、编辑或删除提供商，请先打开本 tab 的写入开关。',
     'toolConfig.claude.confirmMessage': '打开后，Claude tab 内的应用操作会写入 ~/.claude/settings.json 等 Claude 配置。',
+    'toolConfig.opencode.title': 'OpenCode 配置写入',
+    'toolConfig.opencode.desc': '默认只读；开启后可写入 OpenCode 配置文件。',
+    'toolConfig.opencode.lockedTitle': '只读模式',
+    'toolConfig.opencode.lockedDesc': '开启写入权限后可保存、导入或应用配置。',
+    'toolConfig.opencode.confirmMessage': '打开后，OpenCode tab 内的操作会写入 XDG OpenCode 配置文件（如 ~/.config/opencode/opencode.jsonc）或 OPENCODE_CONFIG 指定文件。',
+    'opencode.providerModel.title': 'OpenCode provider / model',
+    'opencode.writeAria': 'OpenCode 写入权限',
+    'opencode.applySelection': '应用到 OpenCode',
+    'opencode.targetFile': 'OpenCode 生效配置：{path} · {status}',
+    'opencode.providerStoreFile': 'Provider 草稿库：{path}（应用时写入 OpenCode）',
+    'opencode.field.agent': 'Agent',
+    'opencode.field.apiKeyKeep': 'API Key（留空则保留已有 key）',
+    'opencode.field.maxTokens': 'maxTokens（可选）',
+    'opencode.field.reasoningEffort': 'reasoningEffort（可选）',
+    'opencode.option.keepUnchanged': '不改动',
+    'opencode.option.reasoningLow': 'low',
+    'opencode.option.reasoningMedium': 'medium',
+    'opencode.option.reasoningHigh': 'high',
+    'opencode.applyToCoreAgents': '同步应用到所有核心 agent',
+    'opencode.enableAutoCompaction': '启用 compaction.auto',
+    'opencode.disableProvider': '禁用该 provider',
+    'opencode.configFile.title': 'OpenCode 配置文件',
+    'opencode.importParse': '导入/解析文件',
+    'opencode.saveConfig': '保存配置',
+    'opencode.parsedFile': '已解析：{file}',
+    'opencode.textarea.placeholder': '编辑 OpenCode 配置',
+    'opencode.configFile.hint': '生效配置预览；草稿保存在独立 Provider 库。',
+    'opencode.summary.title': '当前解析摘要',
+    'opencode.summary.noApiKey': '未配置 API Key',
+    'opencode.summary.noModel': '未设置 model',
+    'opencode.summary.agentType': 'agent',
+    'opencode.summary.sourceCodexMate': 'CodexMate 库',
+    'opencode.summary.sourceOpenCode': 'OpenCode 生效',
     'config.providerTemplate.title': '预设供应商',
     'config.models': '模型',
     'config.modelLoading': '加载中...',
@@ -1025,6 +1065,9 @@ const zh = Object.freeze({
     'status.claudeConfig': 'Claude 配置',
     'status.claudeModel': 'Claude 模型',
     'status.openclawConfig': 'OpenClaw 配置',
+    'status.opencodeProvider': 'OpenCode Provider',
+    'status.opencodeModel': 'OpenCode 模型',
+    'status.opencodeConfig': 'OpenCode 配置',
     'status.workspaceFile': '工作区文件',
     'status.configMode': '配置模式',
     'status.currentProvider': '当前 Provider',
@@ -1171,6 +1214,10 @@ const zh = Object.freeze({
     'claude.model': '模型',
     'claude.model.placeholder': '例如: claude-3-7-sonnet',
     'claude.model.hint': '模型修改后会自动保存并应用到当前配置。',
+    'claude.model.haiku': 'Haiku 模型',
+    'claude.model.sonnet': 'Sonnet 模型',
+    'claude.model.opus': 'Opus 模型',
+    'claude.model.sub.placeholder': '留空则跟随主模型',
     'claude.targetApi.label': '目标 API',
     'claude.targetApi.responses': 'Anthropic',
     'claude.targetApi.chatCompletions': 'OpenAI Chat Completions (/v1/chat/completions)',

package/web-ui/modules/i18n.dict.mjs

@@ -1,10 +1,12 @@
 import { zh } from './i18n/locales/zh.mjs';
+import { zhTw } from './i18n/locales/zh-tw.mjs';
 import { en } from './i18n/locales/en.mjs';
 import { ja } from './i18n/locales/ja.mjs';
 import { vi } from './i18n/locales/vi.mjs';
 
 const DICT = Object.freeze({
     zh,
+    'zh-tw': zhTw,
     en,
     ja,
     vi

package/web-ui/modules/i18n.mjs

@@ -4,6 +4,7 @@ const I18N_STORAGE_KEY = 'codexmateLang';
 
 const LANGUAGE_META = Object.freeze([
     Object.freeze({ code: 'zh', nativeName: '中文', englishName: 'Chinese', htmlLang: 'zh-CN', dir: 'ltr' }),
+    Object.freeze({ code: 'zh-tw', nativeName: '繁體中文', englishName: 'Chinese-TW', htmlLang: 'zh-TW', dir: 'ltr' }),
     Object.freeze({ code: 'en', nativeName: 'English', englishName: 'English', htmlLang: 'en', dir: 'ltr' }),
     Object.freeze({ code: 'ja', nativeName: '日本語', englishName: 'Japanese', htmlLang: 'ja', dir: 'ltr' }),
     Object.freeze({ code: 'vi', nativeName: 'Tiếng Việt', englishName: 'Vietnamese', htmlLang: 'vi', dir: 'ltr' })
@@ -102,9 +103,9 @@ export function createI18nMethods() {
         t(key, params = null) {
             const lang = normalizeLang(this.lang);
             const table = DICT[lang] || DICT.zh;
-            const fallbackEn = DICT.en;
             const fallbackZh = DICT.zh;
-            const raw = (table && table[key]) || (fallbackEn && fallbackEn[key]) || (fallbackZh && fallbackZh[key]) || key;
+            const fallbackEn = DICT.en;
+            const raw = (table && table[key]) || (fallbackZh && fallbackZh[key]) || (fallbackEn && fallbackEn[key]) || key;
             return interpolate(raw, params);
         }
     };

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

@@ -39,7 +39,7 @@
                 :data-config-mode="configMode"
                 :tabindex="mainTab === 'config' ? 0 : -1"
                 :aria-selected="mainTab === 'config'"
-                :aria-controls="configMode === 'claude' ? 'panel-config-claude' : (configMode === 'openclaw' ? 'panel-config-openclaw' : 'panel-config-provider')"
+                :aria-controls="configMode === 'claude' ? 'panel-config-claude' : (configMode === 'openclaw' ? 'panel-config-openclaw' : (configMode === 'opencode' ? 'panel-config-opencode' : 'panel-config-provider'))"
                 :class="{ active: isMainTabNavActive('config') }"
                 @pointerdown="onMainTabPointerDown('config', $event)"
                 @click="onMainTabClick('config', $event)">{{ t('tab.config') }}</button>
@@ -129,7 +129,7 @@
                     <div class="brand-head">
                         <img class="brand-logo" src="/res/logo-pack.webp" alt="Codex Mate logo">
                         <div class="brand-copy">
-                            <div class="brand-kicker">Codex Mate<span v-if="appVersion" class="brand-version"> v{{ appVersion }}</span></div>
+                            <div class="brand-kicker">Codex Mate</div>
                         </div>
                     </div>
                     <button
@@ -223,6 +223,20 @@
                             <span v-if="currentOpenclawConfig">{{ t('common.current', { value: currentOpenclawConfig }) }}</span>
                         </div>
                     </button>
+                    <button
+                        id="side-tab-config-opencode"
+                        data-main-tab="config"
+                        data-config-mode="opencode"
+                        :aria-current="mainTab === 'config' && configMode === 'opencode' ? 'page' : null"
+                        :class="['side-item', { active: isConfigModeNavActive('opencode') }]"
+                        @pointerdown="onConfigTabPointerDown('opencode', $event)"
+                        @click="onConfigTabClick('opencode', $event)">
+                        <div class="side-item-title">{{ t('side.config.opencode') }}</div>
+                        <div class="side-item-meta">
+                            <span>{{ t('side.config.opencode.meta') }}</span>
+                            <span v-if="opencodeModel">{{ t('common.current', { value: opencodeModel }) }}</span>
+                        </div>
+                    </button>
                 </div>
 
                 <div class="side-section" role="navigation" :aria-label="t('side.prompts')">
@@ -419,6 +433,20 @@
                                 <span class="value">{{ openclawWorkspaceFileName || t('common.notSelected') }}</span>
                             </div>
                         </template>
+                        <template v-else-if="configMode === 'opencode'">
+                            <div class="status-chip">
+                                <span class="label">{{ t('status.opencodeProvider') }}</span>
+                                <span class="value">{{ opencodeProvider || t('common.notSelected') }}</span>
+                            </div>
+                            <div class="status-chip">
+                                <span class="label">{{ t('status.opencodeModel') }}</span>
+                                <span class="value">{{ opencodeModel || t('common.notSelected') }}</span>
+                            </div>
+                            <div class="status-chip">
+                                <span class="label">{{ t('status.opencodeConfig') }}</span>
+                                <span class="value">{{ opencodeConfigPath || t('common.notSelected') }}</span>
+                            </div>
+                        </template>
                         <template v-else>
                             <div class="status-chip">
                                 <span class="label">{{ t('status.configMode') }}</span>

package/web-ui/partials/index/modal-config-template-agents.html

@@ -12,7 +12,7 @@
                     <div v-if="configTemplateDiffVisible" class="agents-diff-container">
                         <div class="agents-diff-header">
                             <div class="agents-diff-title">
-                                {{ t('diff.title.configTemplate') }}
+                                {{ configTemplateContext === 'claude' ? t('diff.title.claudeSettings') : t('diff.title.configTemplate') }}
                                 <span v-if="configTemplateDiffLoading" class="agents-diff-subtitle">{{ t('diff.generating') }}</span>
                                 <span v-else-if="configTemplateDiffError" class="agents-diff-subtitle">{{ t('diff.failed') }}</span>
                                 <span v-else-if="!configTemplateDiffHasChanges" class="agents-diff-subtitle">{{ t('diff.noChanges') }}</span>

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

@@ -170,12 +170,12 @@
                     </div>
                 </div>
 
-                    </div>
-                    <div v-if="!isToolConfigWriteAllowed('claude')" class="tool-config-write-overlay">
-                        <div class="tool-config-write-overlay-card">
-                            <div class="tool-config-write-overlay-title">{{ t('toolConfig.claude.lockedTitle') }}</div>
-                            <p>{{ t('toolConfig.claude.lockedDesc') }}</p>
-                            <button type="button" class="btn-tool" @click="setToolConfigPermission('claude', true)" :disabled="toolConfigPermissionSaving.claude">{{ t('toolConfig.enableWrite') }}</button>
+                        <div v-if="!isToolConfigWriteAllowed('claude')" class="tool-config-write-overlay">
+                            <div class="tool-config-write-overlay-card">
+                                <div class="tool-config-write-overlay-title">{{ t('toolConfig.claude.lockedTitle') }}</div>
+                                <p>{{ t('toolConfig.claude.lockedDesc') }}</p>
+                                <button type="button" class="btn-tool" @click="setToolConfigPermission('claude', true)" :disabled="toolConfigPermissionSaving.claude">{{ t('toolConfig.enableWrite') }}</button>
+                            </div>
                         </div>
                     </div>
                 </div>

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

@@ -189,12 +189,12 @@
                         </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 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>
                 </div>

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

@@ -0,0 +1,166 @@
+                <!-- OpenCode 配置 -->
+                <div
+                    v-show="mainTab === 'config' && configMode === 'opencode'"
+                    class="mode-content mode-cards"
+                    id="panel-config-opencode"
+                    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>
+                    </div>
+
+                    <section class="tool-config-write-card" :aria-label="t('opencode.writeAria')">
+                        <div class="tool-config-write-copy">
+                            <div class="tool-config-write-title">{{ t('toolConfig.opencode.title') }}</div>
+                            <p class="tool-config-write-desc">{{ t('toolConfig.opencode.desc') }}</p>
+                        </div>
+                        <label class="settings-toggle-row tool-config-write-toggle">
+                            <input
+                                type="checkbox"
+                                autocomplete="off"
+                                :checked="isToolConfigWriteAllowed('opencode')"
+                                :disabled="toolConfigPermissionSaving.opencode"
+                                @change="setToolConfigPermission('opencode', $event.target.checked)">
+                            <span class="toggle-track">
+                                <span class="toggle-thumb"></span>
+                            </span>
+                            <span>{{ toolConfigPermissionStatusLabel('opencode') }}</span>
+                        </label>
+                    </section>
+
+                    <div class="tool-config-write-scope" :class="{ locked: !isToolConfigWriteAllowed('opencode') }">
+                        <div class="tool-config-write-body">
+                            <section class="selector-section">
+                                <div class="selector-header">
+                                    <span class="selector-title">{{ t('opencode.providerModel.title') }}</span>
+                                    <div class="selector-actions opencode-provider-actions">
+                                        <button type="button" class="btn-tool btn-tool-compact" @click="loadOpencodeConfig({ toast: true })" :disabled="opencodeLoading">{{ opencodeLoading ? t('common.refreshing') : t('common.refresh') }}</button>
+                                        <button type="button" class="btn-tool btn-tool-compact" @click="applyOpencodeSelection" :disabled="opencodeApplying || opencodeLoading || !isToolConfigWriteAllowed('opencode')">{{ opencodeApplying ? t('common.applying') : t('opencode.applySelection') }}</button>
+                                    </div>
+                                </div>
+                                <div class="config-template-hint">{{ t('opencode.targetFile', { path: opencodeConfigPath || '~/.config/opencode/opencode.jsonc', status: opencodeConfigExists ? t('common.exists') : t('common.notExistsWillCreateOnSave') }) }}</div>
+                                <div class="config-template-hint">{{ t('opencode.providerStoreFile', { path: opencodeProviderStorePath || '~/.codexmate/opencode/providers.json' }) }}</div>
+                                <div class="codex-config-grid">
+                                    <div class="form-group codex-config-field">
+                                        <label class="form-label" for="opencode-provider">{{ t('field.provider') }}</label>
+                                        <input id="opencode-provider" class="form-input" v-model="opencodeProvider" list="opencode-provider-options" autocomplete="off" spellcheck="false" @change="fillOpencodeProvider(opencodeProvider)" @blur="fillOpencodeProvider(opencodeProvider)" placeholder="anthropic / openai / gemini">
+                                        <datalist id="opencode-provider-options">
+                                            <option v-for="provider in opencodeProviderCatalog()" :key="provider" :value="provider"></option>
+                                        </datalist>
+                                    </div>
+                                    <div class="form-group codex-config-field">
+                                        <label class="form-label" for="opencode-model">{{ t('field.model') }}</label>
+                                        <input id="opencode-model" class="form-input" v-model="opencodeModel" list="opencode-model-options" autocomplete="off" spellcheck="false" placeholder="claude-3.7-sonnet / gpt-4.1">
+                                        <datalist id="opencode-model-options">
+                                            <option v-for="model in opencodeModelCatalogForProvider(opencodeProvider)" :key="model" :value="model"></option>
+                                        </datalist>
+                                    </div>
+                                    <div class="form-group codex-config-field">
+                                        <label class="form-label" for="opencode-agent">{{ t('opencode.field.agent') }}</label>
+                                        <input id="opencode-agent" class="form-input" v-model="opencodeAgent" list="opencode-agent-options" autocomplete="off" spellcheck="false" placeholder="build">
+                                        <datalist id="opencode-agent-options">
+                                            <option value="build"></option>
+                                            <option value="plan"></option>
+                                            <option value="general"></option>
+                                            <option value="summary"></option>
+                                            <option value="compaction"></option>
+                                            <option value="title"></option>
+                                            <option v-for="agent in opencodeAgents" :key="agent.name" :value="agent.name"></option>
+                                        </datalist>
+                                    </div>
+                                    <div class="form-group codex-config-field">
+                                        <label class="form-label" for="opencode-api-key">{{ t('opencode.field.apiKeyKeep') }}</label>
+                                        <div class="input-with-toggle">
+                                            <input id="opencode-api-key" class="form-input" v-model="opencodeApiKey" :type="opencodeShowKey ? 'text' : 'password'" autocomplete="off" spellcheck="false" placeholder="sk-...">
+                                            <button type="button" class="input-toggle-btn" @click="opencodeShowKey = !opencodeShowKey" :title="opencodeShowKey ? t('common.hide') : t('common.show')">{{ opencodeShowKey ? t('common.hide') : t('common.show') }}</button>
+                                        </div>
+                                    </div>
+                                    <div class="form-group codex-config-field">
+                                        <label class="form-label" for="opencode-max-tokens">{{ t('opencode.field.maxTokens') }}</label>
+                                        <input id="opencode-max-tokens" class="form-input" v-model="opencodeMaxTokens" inputmode="numeric" autocomplete="off" placeholder="5000">
+                                    </div>
+                                    <div class="form-group codex-config-field">
+                                        <label class="form-label" for="opencode-reasoning-effort">{{ t('opencode.field.reasoningEffort') }}</label>
+                                        <select id="opencode-reasoning-effort" class="model-select" v-model="opencodeReasoningEffort">
+                                            <option value="">{{ t('opencode.option.keepUnchanged') }}</option>
+                                            <option value="low">{{ t('opencode.option.reasoningLow') }}</option>
+                                            <option value="medium">{{ t('opencode.option.reasoningMedium') }}</option>
+                                            <option value="high">{{ t('opencode.option.reasoningHigh') }}</option>
+                                        </select>
+                                    </div>
+                                </div>
+                                <label class="settings-toggle-row" style="margin-top: 12px;">
+                                    <input type="checkbox" v-model="opencodeApplyToCoreAgents">
+                                    <span class="toggle-track"><span class="toggle-thumb"></span></span>
+                                    <span>{{ t('opencode.applyToCoreAgents') }}</span>
+                                </label>
+                                <label class="settings-toggle-row" style="margin-top: 8px;">
+                                    <input type="checkbox" v-model="opencodeAutoCompact">
+                                    <span class="toggle-track"><span class="toggle-thumb"></span></span>
+                                    <span>{{ t('opencode.enableAutoCompaction') }}</span>
+                                </label>
+                                <label class="settings-toggle-row" style="margin-top: 8px;">
+                                    <input type="checkbox" v-model="opencodeProviderDisabled">
+                                    <span class="toggle-track"><span class="toggle-thumb"></span></span>
+                                    <span>{{ t('opencode.disableProvider') }}</span>
+                                </label>
+                            </section>
+
+                            <section class="selector-section">
+                                <div class="selector-header">
+                                    <span class="selector-title">{{ t('opencode.configFile.title') }}</span>
+                                    <div class="selector-actions">
+                                        <button type="button" class="btn-tool btn-tool-compact" @click="$refs.opencodeImportInput && $refs.opencodeImportInput.click()">{{ t('opencode.importParse') }}</button>
+                                        <button type="button" class="btn-tool btn-tool-compact" @click="saveOpencodeConfig" :disabled="opencodeSaving || opencodeLoading || !isToolConfigWriteAllowed('opencode')">{{ opencodeSaving ? t('common.saving') : t('opencode.saveConfig') }}</button>
+                                    </div>
+                                </div>
+                                <input ref="opencodeImportInput" class="sr-only" type="file" accept=".json,.jsonc,.opencode" @change="handleOpencodeImportChange">
+                                <div v-if="opencodeImportFileName" class="config-template-hint">{{ t('opencode.parsedFile', { file: opencodeImportFileName }) }}</div>
+                                <div v-if="opencodeError || opencodeImportError" class="config-template-hint error-text">{{ opencodeError || opencodeImportError }}</div>
+                                <textarea class="template-textarea" v-model="opencodeContent" spellcheck="false" :readonly="opencodeSaving || opencodeLoading" :placeholder="t('opencode.textarea.placeholder')"></textarea>
+                                <div class="config-template-hint">{{ t('opencode.configFile.hint') }}</div>
+                            </section>
+
+                            <section class="selector-section" v-if="opencodeProviders.length || opencodeAgents.length">
+                                <div class="selector-header"><span class="selector-title">{{ t('opencode.summary.title') }}</span></div>
+                                <div class="card-list">
+                                    <div v-for="provider in opencodeProviders" :key="provider.name" class="card">
+                                        <div class="card-leading">
+                                            <div class="card-icon">{{ provider.name.charAt(0).toUpperCase() }}</div>
+                                            <div class="card-content">
+                                                <div class="card-title">{{ provider.name }}</div>
+                                                <div class="card-subtitle">{{ provider.hasKey ? provider.apiKey : t('opencode.summary.noApiKey') }}</div>
+                                            </div>
+                                        </div>
+                                        <div class="card-trailing">
+                                            <span :class="['pill', provider.disabled ? 'empty' : 'configured']">{{ provider.disabled ? t('common.disabled') : t('common.enabled') }}</span>
+                                            <span class="pill empty">{{ provider.source === 'codexmate' ? t('opencode.summary.sourceCodexMate') : t('opencode.summary.sourceOpenCode') }}</span>
+                                        </div>
+                                    </div>
+                                    <div v-for="agent in opencodeAgents" :key="agent.name" class="card">
+                                        <div class="card-leading">
+                                            <div class="card-icon">A</div>
+                                            <div class="card-content">
+                                                <div class="card-title">{{ agent.name }}</div>
+                                                <div class="card-subtitle">{{ agent.model || t('opencode.summary.noModel') }}</div>
+                                            </div>
+                                        </div>
+                                        <div class="card-trailing">
+                                            <span class="pill configured">{{ t('opencode.summary.agentType') }}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </section>
+                            <div v-if="!isToolConfigWriteAllowed('opencode')" class="tool-config-write-overlay">
+                                <div class="tool-config-write-overlay-card">
+                                    <div class="tool-config-write-overlay-title">{{ t('toolConfig.opencode.lockedTitle') }}</div>
+                                    <p>{{ t('toolConfig.opencode.lockedDesc') }}</p>
+                                    <button type="button" class="btn-tool" @click="setToolConfigPermission('opencode', true)" :disabled="toolConfigPermissionSaving.opencode">{{ t('toolConfig.enableWrite') }}</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>