codexmate 0.1.2 → 0.1.3

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,9 +619,12 @@ const zh = Object.freeze({
 
     // Docs panel
     'docs.title': 'CLI 安装文档',
-    'docs.subtitle': '查看 Claude Code / Gemini CLI / CodeBuddy Code / Codex CLI 命令。',
+    'docs.subtitle': '查看 Claude Code / Gemini CLI / CodeBuddy Code / Codex CLI / KiloCode CLI 命令。',
     'docs.section.commands': '安装命令',
     'docs.section.commandsNote': '命令可直接复制。',
+    'docs.installed.title': '当前已安装命令',
+    'docs.installed.count': '已安装 {count} 个',
+    'docs.installed.empty': '未检测到已安装命令',
     'docs.section.faq': '常见问题',
     'docs.section.faqNote': '常见问题见下。',
     'docs.command.aria': '{name} 命令',
@@ -1530,6 +1534,31 @@ 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。',
+    '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-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

@@ -54,6 +54,22 @@
                                 <strong class="docs-summary-value">{{ installRegistryPreview || 'npmmirror' }}</strong>
                             </div>
                         </div>
+
+                        <div class="docs-installed-card">
+                            <div class="docs-installed-head">
+                                <span class="docs-installed-title">{{ t('docs.installed.title') }}</span>
+                                <span class="docs-installed-count">{{ currentInstalledCommandCards.length ? t('docs.installed.count', { count: currentInstalledCommandCards.length }) : t('docs.installed.empty') }}</span>
+                            </div>
+                            <div v-if="currentInstalledCommandCards.length" class="docs-installed-list">
+                                <div v-for="target in currentInstalledCommandCards" :key="'docs-installed-' + target.id" class="docs-installed-item">
+                                    <div class="docs-installed-main">
+                                        <span class="docs-installed-name">{{ target.name }}</span>
+                                        <span class="docs-installed-version">{{ target.version || '—' }}</span>
+                                    </div>
+                                    <code class="docs-installed-command">{{ target.commandPath || target.bin }}</code>
+                                </div>
+                            </div>
+                        </div>
                     </div>
 
                     <div class="selector-section">
@@ -111,4 +127,4 @@
                             </div>
                         </div>
                     </div>
-                </div>
+                </div>