codexmate 0.1.2 → 0.1.4

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

@@ -142,8 +142,9 @@ const zh = Object.freeze({
     'side.docs': '文档',
     'side.config': '配置',
     'side.sessions': '会话',
-    'side.prompts': 'Prompts',
-    'side.prompts.meta': 'Prompt 文件与预设',
+    'side.workspace': '工作区',
+    'side.prompts': '提示词',
+    'side.prompts.meta': '提示词文件与预设',
     'side.plugins': '插件',
     'side.system': '系统',
     'side.orchestration': '任务',
@@ -168,13 +169,13 @@ const zh = Object.freeze({
     'side.update.currentOnly': '当前 v{current}',
     'side.update.retry': '重试版本检查',
     'side.config.codex': 'Codex',
-    'side.config.codex.meta': 'Provider · Model',
+    'side.config.codex.meta': '提供商 · 模型',
     'side.config.claude': 'Claude Code',
-    'side.config.claude.meta': 'Settings',
+    'side.config.claude.meta': '设置',
     'side.config.openclaw': 'OpenClaw',
-    'side.config.openclaw.meta': 'JSON5 · AGENTS',
+    'side.config.openclaw.meta': '配置',
     'side.config.opencode': 'OpenCode',
-    'side.config.opencode.meta': 'Provider',
+    'side.config.opencode.meta': '提供商',
     'side.sessions.browser': '会话浏览',
     'side.sessions.browser.meta': '浏览 / 导出 / 清理',
     'side.prompts.agents': 'AGENTS.md',
@@ -618,11 +619,8 @@ const zh = Object.freeze({
 
     // Docs panel
     'docs.title': 'CLI 安装文档',
-    'docs.subtitle': '查看 Claude Code / Gemini CLI / CodeBuddy Code / Codex CLI 命令。',
     'docs.section.commands': '安装命令',
-    'docs.section.commandsNote': '命令可直接复制。',
     'docs.section.faq': '常见问题',
-    'docs.section.faqNote': '常见问题见下。',
     'docs.command.aria': '{name} 命令',
     'docs.registryHintPrefix': '命令将附加：',
     'docs.registryHintCustom': '请输入完整 URL（含 http/https），将自动附加到命令。',
@@ -630,8 +628,6 @@ const zh = Object.freeze({
     'docs.meta.bin': 'bin: {bin}',
     'docs.termuxLabel': 'Termux',
     'docs.termuxAria': 'Termux Codex CLI command',
-    'docs.rule.1': '命令按当前包管理器、镜像与操作生成。',
-    'docs.rule.2': '自定义镜像仅用于安装与升级。',
     'docs.tip.win.1': 'PowerShell 报权限不足（EACCES/EPERM）时，请以管理员身份执行安装命令。',
     'docs.tip.win.2': '安装后若仍提示找不到命令，重开终端并执行：where codex / where claude / where gemini / where codebuddy。',
     'docs.tip.win.3': '公司网络受限时，可先切换镜像源快捷项（npmmirror / 腾讯云 / 自定义）。',
@@ -1530,6 +1526,36 @@ const zh = Object.freeze({
     'openclaw.action.applyAria': '应用 OpenClaw 配置：{name}',
     'openclaw.action.editAria': '编辑 OpenClaw 配置：{name}',
     'openclaw.action.deleteAria': '删除 OpenClaw 配置：{name}'
+,
+
+    'tab.config.kilocode': 'KiloCode',
+    'side.config.kilocode': 'KiloCode',
+    'side.config.kilocode.meta': '提供商',
+    'toolConfig.kilocode.title': 'KiloCode 配置写入与启动',
+    'toolConfig.kilocode.desc': '默认只读；开启后可写入 KiloCode 配置并从 Web 启动。',
+    'toolConfig.kilocode.lockedTitle': '只读模式',
+    'toolConfig.kilocode.lockedDesc': '开启写入权限后可保存配置或启动 KiloCode。',
+    'toolConfig.kilocode.confirmMessage': '打开后，KiloCode tab 内的操作会写入 ~/.config/kilo/kilo.jsonc 或已存在的 kilo.json，并可启动本机 KiloCode。',
+    'toolConfig.openclaw.title': 'OpenClaw 配置写入',
+    'toolConfig.openclaw.desc': '默认只读；开启后可应用 OpenClaw 配置、写入 AGENTS.md 与其他工作区文件。',
+    'toolConfig.openclaw.confirmMessage': '打开后，OpenClaw tab 内的操作会写入 openclaw.json 及 OpenClaw 工作区文件（AGENTS.md、SOUL.md 等）。',
+    'toolConfig.openclaw.lockedTitle': 'OpenClaw 当前为只读',
+    'toolConfig.openclaw.lockedDesc': '这里不会写入 OpenClaw 配置。要应用配置或编辑工作区文件，请先打开本 tab 的写入开关。',
+    'kilocode.providerModel.title': 'KiloCode provider / model',
+    'kilocode.connection.title': 'KiloCode 连接',
+    'kilocode.targetFile': 'KiloCode 生效配置：{path} · {status}',
+    'kilocode.saveConfig': '保存配置',
+    'kilocode.start': '启动 KiloCode',
+    'kilocode.starting': '启动中',
+    'kilocode.saveAndStart': '保存并启动',
+    'kilocode.summary.title': '当前 KiloCode provider',
+    'kilocode.configPreview.title': 'KiloCode 配置预览',
+    'kilocode.configPreview.hint': 'API Key 已脱敏；保存会写入真实 key。',
+    'kilocode.saveFailed': '保存 KiloCode 配置失败',
+    'kilocode.fillRequired': '请填写 KiloCode URL 和 API Key',
+    'kilocode.writeRequired': '请先打开 KiloCode 写入开关',
+    'kilocode.saved': 'KiloCode 配置已保存',
+    'kilocode.autoSaved': 'KiloCode 配置已同步',
 });
 
 export { zh };

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' : (configMode === 'opencode' ? 'panel-config-opencode' : 'panel-config-provider'))"
+                :aria-controls="configMode === 'claude' ? 'panel-config-claude' : (configMode === 'openclaw' ? 'panel-config-openclaw' : (configMode === 'opencode' ? 'panel-config-opencode' : (configMode === 'kilocode' ? 'panel-config-kilocode' : 'panel-config-provider')))"
                 :class="{ active: isMainTabNavActive('config') }"
                 @pointerdown="onMainTabPointerDown('config', $event)"
                 @click="onMainTabClick('config', $event)">{{ t('tab.config') }}</button>
@@ -196,14 +196,13 @@
                         data-main-tab="config"
                         data-config-mode="codex"
                         :aria-current="mainTab === 'config' && configMode === 'codex' ? 'page' : null"
-                        :class="['side-item', { active: isConfigModeNavActive('codex') }]"
+                        :class="['side-item', 'side-item-compact', { active: isConfigModeNavActive('codex') }]"
                         @pointerdown="onConfigTabPointerDown('codex', $event)"
                         @click="onConfigTabClick('codex', $event)">
                         <span class="side-item-icon" aria-hidden="true">C</span>
                         <div class="side-item-title">{{ t('side.config.codex') }}</div>
                         <div class="side-item-meta">
                             <span>{{ t('side.config.codex.meta') }}</span>
-                            <span v-if="currentProvider">{{ t('common.current', { value: currentProvider }) }}</span>
                         </div>
                     </button>
                     <button
@@ -211,14 +210,13 @@
                         data-main-tab="config"
                         data-config-mode="claude"
                         :aria-current="mainTab === 'config' && configMode === 'claude' ? 'page' : null"
-                        :class="['side-item', { active: isConfigModeNavActive('claude') }]"
+                        :class="['side-item', 'side-item-compact', { active: isConfigModeNavActive('claude') }]"
                         @pointerdown="onConfigTabPointerDown('claude', $event)"
                         @click="onConfigTabClick('claude', $event)">
                         <span class="side-item-icon" aria-hidden="true">A</span>
                         <div class="side-item-title">{{ t('side.config.claude') }}</div>
                         <div class="side-item-meta">
                             <span>{{ t('side.config.claude.meta') }}</span>
-                            <span v-if="currentClaudeConfig">{{ t('common.current', { value: currentClaudeConfig }) }}</span>
                         </div>
                     </button>
                     <button
@@ -226,14 +224,13 @@
                         data-main-tab="config"
                         data-config-mode="openclaw"
                         :aria-current="mainTab === 'config' && configMode === 'openclaw' ? 'page' : null"
-                        :class="['side-item', { active: isConfigModeNavActive('openclaw') }]"
+                        :class="['side-item', 'side-item-compact', { active: isConfigModeNavActive('openclaw') }]"
                         @pointerdown="onConfigTabPointerDown('openclaw', $event)"
                         @click="onConfigTabClick('openclaw', $event)">
                         <span class="side-item-icon" aria-hidden="true">O</span>
                         <div class="side-item-title">{{ t('side.config.openclaw') }}</div>
                         <div class="side-item-meta">
                             <span>{{ t('side.config.openclaw.meta') }}</span>
-                            <span v-if="currentOpenclawConfig">{{ t('common.current', { value: currentOpenclawConfig }) }}</span>
                         </div>
                     </button>
                     <button
@@ -241,35 +238,35 @@
                         data-main-tab="config"
                         data-config-mode="opencode"
                         :aria-current="mainTab === 'config' && configMode === 'opencode' ? 'page' : null"
-                        :class="['side-item', { active: isConfigModeNavActive('opencode') }]"
+                        :class="['side-item', 'side-item-compact', { active: isConfigModeNavActive('opencode') }]"
                         @pointerdown="onConfigTabPointerDown('opencode', $event)"
                         @click="onConfigTabClick('opencode', $event)">
                         <span class="side-item-icon" aria-hidden="true">N</span>
                         <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>
+
                     <button
-                        id="side-tab-prompts"
-                        data-main-tab="prompts"
-                        :aria-current="mainTab === 'prompts' ? 'page' : null"
-                        :class="['side-item', { active: isMainTabNavActive('prompts') }]"
-                        @pointerdown="onMainTabPointerDown('prompts', $event)"
-                        @click="onMainTabClick('prompts', $event)">
-                        <span class="side-item-icon" aria-hidden="true">P</span>
-                        <div class="side-item-title">{{ t('side.prompts') }}</div>
+                        id="side-tab-config-kilocode"
+                        data-main-tab="config"
+                        data-config-mode="kilocode"
+                        :aria-current="mainTab === 'config' && configMode === 'kilocode' ? 'page' : null"
+                        :class="['side-item', 'side-item-compact', { active: isConfigModeNavActive('kilocode') }]"
+                        @pointerdown="onConfigTabPointerDown('kilocode', $event)"
+                        @click="onConfigTabClick('kilocode', $event)">
+                        <span class="side-item-icon" aria-hidden="true">K</span>
+                        <div class="side-item-title">{{ t('side.config.kilocode') }}</div>
                         <div class="side-item-meta">
-                            <span>{{ t('side.prompts.meta') }}</span>
+                            <span>{{ t('side.config.kilocode.meta') }}</span>
                         </div>
                     </button>
-
                 </div>
 
 
-                <div class="side-section" role="navigation" :aria-label="t('side.sessions')">
-                    <div class="side-section-title">{{ t('side.sessions') }}</div>
+                <div class="side-section" role="navigation" :aria-label="t('side.workspace')">
+                    <div class="side-section-title">{{ t('side.workspace') }}</div>
                     <button
                         id="side-tab-sessions"
                         data-main-tab="sessions"
@@ -284,6 +281,20 @@
                             <span>{{ t('sessions.sourceLabel', { value: (sessionFilterSource === 'all' ? t('sessions.source.all') : (sessionFilterSource === 'claude' ? 'Claude Code' : (sessionFilterSource === 'gemini' ? 'Gemini CLI' : (sessionFilterSource === 'codebuddy' ? 'CodeBuddy Code' : 'Codex')))) }) }}</span>
                         </div>
                     </button>
+                    <button
+                        id="side-tab-prompts"
+                        data-main-tab="prompts"
+                        :aria-current="mainTab === 'prompts' ? 'page' : null"
+                        :class="['side-item', { active: isMainTabNavActive('prompts') }]"
+                        @pointerdown="onMainTabPointerDown('prompts', $event)"
+                        @click="onMainTabClick('prompts', $event)">
+                        <span class="side-item-icon" aria-hidden="true">P</span>
+                        <div class="side-item-title">{{ t('side.prompts') }}</div>
+                        <div class="side-item-meta">
+                            <span>{{ t('side.prompts.meta') }}</span>
+                        </div>
+                    </button>
+
                     <button
                         id="side-tab-usage"
                         data-main-tab="usage"

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

@@ -0,0 +1,101 @@
+                <!-- KiloCode 配置 -->
+                <div
+                    v-show="mainTab === 'config' && configMode === 'kilocode'"
+                    class="mode-content mode-cards"
+                    id="panel-config-kilocode"
+                    role="tabpanel"
+                    :aria-labelledby="forceCompactLayout ? 'tab-config' : 'side-tab-config-kilocode'">
+                    <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>
+                    </div>
+
+                    <section class="tool-config-write-card" :aria-label="t('toolConfig.kilocode.title')">
+                        <div class="tool-config-write-copy">
+                            <div class="tool-config-write-title">{{ t('toolConfig.kilocode.title') }}</div>
+                            <p class="tool-config-write-desc">{{ t('toolConfig.kilocode.desc') }}</p>
+                        </div>
+                        <label class="settings-toggle-row tool-config-write-toggle">
+                            <input
+                                type="checkbox"
+                                autocomplete="off"
+                                :checked="isToolConfigWriteAllowed('kilocode')"
+                                :disabled="toolConfigPermissionSaving.kilocode"
+                                @change="setToolConfigPermission('kilocode', $event.target.checked)">
+                            <span class="toggle-track"><span class="toggle-thumb"></span></span>
+                            <span>{{ toolConfigPermissionStatusLabel('kilocode') }}</span>
+                        </label>
+                    </section>
+
+                    <div class="tool-config-write-scope" :class="{ locked: !isToolConfigWriteAllowed('kilocode') }">
+                        <div class="tool-config-write-body">
+                            <section class="selector-section">
+                                <div class="selector-header">
+                                    <span class="selector-title">{{ t('kilocode.providerModel.title') }}</span>
+                                </div>
+                                <div class="config-template-hint">{{ t('kilocode.targetFile', { path: kilocodeConfigPath || '~/.config/kilo/kilo.jsonc', status: kilocodeConfigExists ? t('common.exists') : t('common.notExistsWillCreateOnSave') }) }}</div>
+                                <div class="codex-config-grid">
+                                    <div class="form-group codex-config-field">
+                                        <label class="form-label" for="kilocode-provider">{{ t('field.provider') }}</label>
+                                        <input id="kilocode-provider" class="form-input" v-model="kilocodeProvider" autocomplete="off" spellcheck="false" placeholder="codexmate" @blur="autoSaveKilocodeConfig">
+                                    </div>
+                                    <div class="form-group codex-config-field">
+                                        <label class="form-label" for="kilocode-base-url">{{ t('field.url') }}</label>
+                                        <input id="kilocode-base-url" class="form-input" v-model="kilocodeBaseUrl" autocomplete="off" spellcheck="false" placeholder="https://api.example.com/v1" @blur="autoSaveKilocodeConfig">
+                                    </div>
+                                    <div class="form-group codex-config-field">
+                                        <label class="form-label" for="kilocode-model">{{ t('field.model') }}</label>
+                                        <input id="kilocode-model" class="form-input" v-model="kilocodeModel" autocomplete="off" spellcheck="false" placeholder="gpt-5.3" @blur="autoSaveKilocodeConfig">
+                                    </div>
+                                    <div class="form-group codex-config-field">
+                                        <label class="form-label" for="kilocode-api-key">{{ t('opencode.field.apiKeyKeep') }}</label>
+                                        <div class="input-with-toggle">
+                                            <input id="kilocode-api-key" class="form-input" v-model="kilocodeApiKey" :type="kilocodeShowKey ? 'text' : 'password'" autocomplete="off" spellcheck="false" placeholder="sk-..." @blur="autoSaveKilocodeConfig">
+                                            <button type="button" class="input-toggle-btn" @mousedown.prevent @click="kilocodeShowKey = !kilocodeShowKey" :title="kilocodeShowKey ? t('common.hide') : t('common.show')" :aria-label="kilocodeShowKey ? t('common.hide') : t('common.show')">
+                                                <svg v-if="!kilocodeShowKey" 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 v-if="kilocodeError" class="config-template-hint error-text">{{ kilocodeError }}</div>
+                            </section>
+
+                            <section class="selector-section" v-if="kilocodeProviders.length">
+                                <div class="selector-header"><span class="selector-title">{{ t('kilocode.summary.title') }}</span></div>
+                                <div class="card-list">
+                                    <div v-for="provider in kilocodeProviders" :key="provider.name" :class="['card', { active: normalizeKilocodeProviderNameForUi(provider.name) === normalizeKilocodeProviderNameForUi(kilocodeProvider) }]" @dblclick="selectKilocodeProvider(provider)" @keydown.enter.self.prevent="selectKilocodeProvider(provider)" tabindex="0" role="button" :aria-current="normalizeKilocodeProviderNameForUi(provider.name) === normalizeKilocodeProviderNameForUi(kilocodeProvider) ? 'true' : null">
+                                        <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.baseURL || provider.api || t('config.url.unset') }}</div>
+                                                <div class="card-subtitle">{{ (provider.models || []).join(', ') || t('opencode.summary.noModel') }}</div>
+                                            </div>
+                                        </div>
+                                        <div class="card-trailing">
+                                            <span :class="['pill', provider.hasKey ? 'configured' : 'empty']">{{ provider.hasKey ? t('common.configured') : t('common.notConfigured') }}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </section>
+
+                            <section class="selector-section">
+                                <div class="selector-header"><span class="selector-title">{{ t('kilocode.configPreview.title') }}</span></div>
+                                <textarea class="template-textarea" :value="kilocodeContent" spellcheck="false" readonly aria-readonly="true"></textarea>
+                                <div class="config-template-hint">{{ t('kilocode.configPreview.hint') }}</div>
+                            </section>
+
+                            <div v-if="!isToolConfigWriteAllowed('kilocode')" class="tool-config-write-overlay">
+                                <div class="tool-config-write-overlay-card">
+                                    <div class="tool-config-write-overlay-title">{{ t('toolConfig.kilocode.lockedTitle') }}</div>
+                                    <p>{{ t('toolConfig.kilocode.lockedDesc') }}</p>
+                                    <button type="button" class="btn-tool" @click="setToolConfigPermission('kilocode', true)" :disabled="toolConfigPermissionSaving.kilocode">{{ t('toolConfig.enableWrite') }}</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>

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

@@ -11,6 +11,23 @@
                     <button type="button" :class="['segment', { active: configMode === 'openclaw' }]" @click="switchConfigMode('openclaw')">{{ t('tab.config.openclaw') }}</button>
                 </div>
                 <div class="openclaw-layout">
+                    <section class="tool-config-write-card" :aria-label="t('toolConfig.openclaw.title')">
+                        <div class="tool-config-write-copy">
+                            <div class="tool-config-write-title">{{ t('toolConfig.openclaw.title') }}</div>
+                            <p class="tool-config-write-desc">{{ t('toolConfig.openclaw.desc') }}</p>
+                        </div>
+                        <label class="settings-toggle-row tool-config-write-toggle">
+                            <input
+                                type="checkbox"
+                                autocomplete="off"
+                                :checked="isToolConfigWriteAllowed('openclaw')"
+                                :disabled="toolConfigPermissionSaving.openclaw"
+                                @change="setToolConfigPermission('openclaw', $event.target.checked)">
+                            <span class="toggle-track"><span class="toggle-thumb"></span></span>
+                            <span>{{ toolConfigPermissionStatusLabel('openclaw') }}</span>
+                        </label>
+                    </section>
+
                     <section class="settings-card settings-card--wide openclaw-summary-card" aria-label="OpenClaw 当前摘要">
                         <div class="settings-card-body">
                             <div class="openclaw-summary-header">
@@ -32,10 +49,12 @@
                         </div>
                     </section>
 
+                    <div class="tool-config-write-scope" :class="{ locked: !isToolConfigWriteAllowed('openclaw') }">
+                        <div class="tool-config-write-body">
                     <section class="settings-card settings-card--wide openclaw-workspace-card">
                         <div class="settings-card-body">
                             <div class="openclaw-tools-grid">
-                                <button class="openclaw-tool-btn" @click="openOpenclawAgentsEditor" :disabled="loading || !!initError || agentsLoading">
+                                <button class="openclaw-tool-btn" @click="openOpenclawAgentsEditor" :disabled="loading || !!initError || agentsLoading || !isToolConfigWriteAllowed('openclaw')">
                                     <div class="tool-icon">📄</div>
                                     <div class="tool-content">
                                         <div class="tool-title">AGENTS.md</div>
@@ -52,7 +71,7 @@
                                     type="button"
                                     class="openclaw-tool-btn"
                                     @click="openOpenclawQuickWorkspaceFile(fileName)"
-                                    :disabled="loading || !!initError || agentsLoading">
+                                    :disabled="loading || !!initError || agentsLoading || !isToolConfigWriteAllowed('openclaw')">
                                     <div class="tool-icon">📄</div>
                                     <div class="tool-content">
                                         <div class="tool-title">{{ fileName }}</div>
@@ -70,13 +89,14 @@
                         <div class="settings-card-body">
                             <div class="card-list openclaw-card-list">
                                 <div v-for="(config, name) in openclawConfigs" :key="name"
-                                     :class="['card', { active: currentOpenclawConfig === name }]"
-                                     @click="applyOpenclawConfig(name)"
-                                     @keydown.enter.self.prevent="applyOpenclawConfig(name)"
-                                     @keydown.space.self.prevent="applyOpenclawConfig(name)"
-                                     tabindex="0"
+                                     :class="['card', { active: currentOpenclawConfig === name, disabled: !isToolConfigWriteAllowed('openclaw') }]"
+                                     @click="isToolConfigWriteAllowed('openclaw') && applyOpenclawConfig(name)"
+                                     @keydown.enter.self.prevent="isToolConfigWriteAllowed('openclaw') && applyOpenclawConfig(name)"
+                                     @keydown.space.self.prevent="isToolConfigWriteAllowed('openclaw') && applyOpenclawConfig(name)"
+                                     :tabindex="isToolConfigWriteAllowed('openclaw') ? 0 : -1"
                                      role="button"
                                      :aria-label="t('openclaw.action.applyAria', { name })"
+                                     :aria-disabled="!isToolConfigWriteAllowed('openclaw') ? 'true' : null"
                                      :aria-current="currentOpenclawConfig === name ? 'true' : null">
                                     <div class="card-leading">
                                         <div class="card-icon">{{ name.charAt(0).toUpperCase() }}</div>
@@ -95,7 +115,7 @@
                                             {{ openclawHasContent(config) ? t('openclaw.configured') : t('openclaw.notConfigured') }}
                                         </span>
                                         <div class="card-actions" @click.stop>
-                                            <button class="card-action-btn" @click="openOpenclawEditModal(name)" :aria-label="t('openclaw.action.editAria', { name })" :title="t('openclaw.action.edit')">
+                                            <button class="card-action-btn" @click="openOpenclawEditModal(name)" :disabled="!isToolConfigWriteAllowed('openclaw')" :aria-label="t('openclaw.action.editAria', { name })" :title="t('openclaw.action.edit')">
                                                 <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"/>
@@ -113,5 +133,14 @@
                             </div>
                         </div>
                     </section>
+                        <div v-if="!isToolConfigWriteAllowed('openclaw')" class="tool-config-write-overlay">
+                            <div class="tool-config-write-overlay-card">
+                                <div class="tool-config-write-overlay-title">{{ t('toolConfig.openclaw.lockedTitle') }}</div>
+                                <p>{{ t('toolConfig.openclaw.lockedDesc') }}</p>
+                                <button type="button" class="btn-tool" @click="setToolConfigPermission('openclaw', true)" :disabled="toolConfigPermissionSaving.openclaw">{{ t('toolConfig.enableWrite') }}</button>
+                            </div>
+                        </div>
+                        </div>
+                    </div>
                 </div>
             </div>

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

@@ -10,6 +10,7 @@
                         <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>
                     </div>
 
                     <section class="tool-config-write-card" :aria-label="t('opencode.writeAria')">

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

@@ -7,7 +7,6 @@
                     <div class="selector-section">
                         <div class="selector-header">
                             <span class="selector-title">{{ t('docs.title') }}</span>
-                            <div class="skills-panel-note docs-section-note">{{ t('docs.subtitle') }}</div>
                         </div>
 
                         <div class="docs-toolbar-grid">
@@ -59,7 +58,6 @@
                     <div class="selector-section">
                         <div class="selector-header">
                             <span class="selector-title">{{ t('docs.section.commands') }}</span>
-                            <div class="skills-panel-note docs-section-note">{{ t('docs.section.commandsNote') }}</div>
                         </div>
 
                         <div class="install-list docs-install-list">
@@ -92,7 +90,6 @@
                     <div class="selector-section">
                         <div class="selector-header">
                             <span class="selector-title">{{ t('docs.section.faq') }}</span>
-                            <div class="skills-panel-note docs-section-note">{{ t('docs.section.faqNote') }}</div>
                         </div>
 
                         <div class="docs-help-grid">
@@ -102,13 +99,6 @@
                                     <li v-for="tip in installTroubleshootingTips" :key="tip">{{ tip }}</li>
                                 </ul>
                             </div>
-                            <div class="docs-note-card">
-                                <div class="docs-note-title">{{ t('common.rules') }}</div>
-                                <ul class="docs-static-list">
-                                    <li>{{ t('docs.rule.1') }}</li>
-                                    <li>{{ t('docs.rule.2') }}</li>
-                                </ul>
-                            </div>
                         </div>
                     </div>
-                </div>
+                </div>