codexmate 0.1.16 → 0.1.18

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

@@ -1000,6 +1000,12 @@ const vi = Object.freeze({
     'usage.summary.avgMessagesPerSession': 'TB tin nhắn/phiên',
     'usage.summary.busiestDay': 'Ngày bận nhất',
     'usage.summary.busiestHour': 'Giờ cao điểm',
+    'usage.kpi.tokens': 'Tổng token',
+    'usage.kpi.sessions': 'Số phiên',
+    'usage.kpi.messages': 'Số tin nhắn',
+    'usage.kpi.dailyAvg': 'Token trung bình/ngày',
+    'usage.kpi.busiestDay': 'Ngày bận nhất',
+    'usage.wave.summary': 'Tổng {total} · đỉnh {peakDay} ({peakValue})',
     'usage.currentSession.title': 'Phiên hiện tại',
     'usage.currentSession.apiDuration': 'Thời gian API',
     'usage.currentSession.totalDuration': 'Tổng thời gian',
@@ -1327,12 +1333,29 @@ const vi = Object.freeze({
     'pi.files.desc': 'Hiển thị đầy đủ và chỉnh sửa trực tiếp settings.json và models.json của Pi; kiểm tra tính hợp lệ của JSON trước khi lưu, nội dung không hợp lệ sẽ không được ghi.',
     'pi.files.settingsTitle': 'settings.json (cài đặt đang dùng)',
     'pi.files.modelsTitle': 'models.json (nhà cung cấp và mô hình)',
+    'pi.history.apply': 'Áp dụng bản ghi này',
+    'pi.history.applied': 'Đã áp dụng lịch sử',
+    'pi.history.applyFailed': 'Áp dụng lịch sử thất bại',
+    'pi.history.confirm': 'Áp dụng bản ghi lịch sử này vào tệp? Nội dung hiện tại sẽ được chụp nhanh trước.',
     'pi.providers.models.remove': 'Xóa',
     'pi.providers.models.search': 'Tìm kiếm mô hình khả dụng…',
     'pi.providers.models.remoteCount': 'Đã lấy {count} mô hình, bấm để thêm',
     'pi.providers.models.remoteLoading': 'Đang tải danh sách mô hình từ xa…',
     'pi.providers.models.remoteFailed': 'Bạn vẫn có thể nhập ID mô hình thủ công.',
     'pi.providers.models.noMatch': 'Không có mô hình phù hợp',
+    'pi.providers.models.importTitle': 'Nhập mô hình từ endpoint',
+    'pi.providers.models.addSelected': 'Thêm đã chọn ({count})',
+    'pi.providers.models.name': 'Tên',
+    'pi.providers.models.reasoning': 'Hỗ trợ suy luận',
+    'pi.providers.models.contextWindow': 'Cửa sổ ngữ cảnh',
+    'pi.providers.models.maxTokens': 'Đầu ra tối đa',
+    'pi.providers.models.catalogFill': 'Tự động điền',
+    'pi.providers.models.catalogFilling': 'Đang điền…',
+    'pi.picker.searchPlaceholder': 'Tìm kiếm nhà cung cấp…',
+    'pi.picker.group.custom': 'Endpoint tùy chỉnh',
+    'pi.picker.group.apiKey': 'Nhà cung cấp API key',
+    'pi.picker.empty': 'Không có mẫu nhà cung cấp phù hợp',
+    'pi.picker.back': 'Quay lại chọn mẫu',
     'pi.providers.delete': 'Xóa nhà cung cấp',
     'pi.providers.addModal.title': 'Thêm nhà cung cấp',
     'pi.providers.addModal.subtitle': 'Tạo nhà cung cấp Piper mới',

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

@@ -826,6 +826,12 @@ const zhTw = Object.freeze({
     'usage.summary.avgMessagesPerSession': '平均每會話消息',
     'usage.summary.busiestDay': '最忙日',
     'usage.summary.busiestHour': '高峰時段',
+    'usage.kpi.tokens': '總 Token',
+    'usage.kpi.sessions': '會話數',
+    'usage.kpi.messages': '訊息數',
+    'usage.kpi.dailyAvg': '日均 Token',
+    'usage.kpi.busiestDay': '最忙日',
+    'usage.wave.summary': '本期共 {total} · 峰值 {peakDay}（{peakValue}）',
     'usage.currentSession.title': '目前會話',
     'usage.currentSession.apiDuration': 'API時長',
     'usage.currentSession.totalDuration': '總時長',
@@ -1356,12 +1362,29 @@ const zhTw = Object.freeze({
     'pi.files.desc': '完整展示並直接編輯 Pi 的 settings.json 與 models.json；儲存前校驗 JSON 合法性，非法內容不會寫入。',
     'pi.files.settingsTitle': 'settings.json（生效設定）',
     'pi.files.modelsTitle': 'models.json（供應商與模型）',
+    'pi.history.apply': '套用此紀錄',
+    'pi.history.applied': '已套用歷史紀錄',
+    'pi.history.applyFailed': '套用歷史紀錄失敗',
+    'pi.history.confirm': '將此歷史紀錄套用到檔案？目前檔案內容會先被快照儲存。',
     '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.models.importTitle': '從端點匯入模型',
+    'pi.providers.models.addSelected': '新增選取（{count}）',
+    'pi.providers.models.name': '名稱',
+    'pi.providers.models.reasoning': '支援推理',
+    'pi.providers.models.contextWindow': '上下文視窗',
+    'pi.providers.models.maxTokens': '最大輸出',
+    'pi.providers.models.catalogFill': '自動填寫',
+    'pi.providers.models.catalogFilling': '填寫中…',
+    'pi.picker.searchPlaceholder': '搜尋供應商…',
+    'pi.picker.group.custom': '自訂端點',
+    'pi.picker.group.apiKey': 'API Key 服務商',
+    'pi.picker.empty': '沒有符合的供應商範本',
+    'pi.picker.back': '返回選擇範本',
     'pi.providers.delete': '刪除供應商',
     'pi.providers.addModal.title': '新增供應商',
     'pi.providers.addModal.subtitle': '建立新的 Piper 供應商',

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

@@ -826,6 +826,12 @@ const zh = Object.freeze({
     'usage.summary.avgMessagesPerSession': '平均每会话消息',
     'usage.summary.busiestDay': '最忙日',
     'usage.summary.busiestHour': '高峰时段',
+    'usage.kpi.tokens': '总 Token',
+    'usage.kpi.sessions': '会话数',
+    'usage.kpi.messages': '消息数',
+    'usage.kpi.dailyAvg': '日均 Token',
+    'usage.kpi.busiestDay': '最忙日',
+    'usage.wave.summary': '本期共 {total} · 峰值 {peakDay}（{peakValue}）',
     'usage.currentSession.title': '当前会话',
     'usage.currentSession.apiDuration': 'API时长',
     'usage.currentSession.totalDuration': '总时长',
@@ -1356,12 +1362,29 @@ const zh = Object.freeze({
     'pi.files.desc': '完整展示并直接编辑 Pi 的 settings.json 与 models.json；保存前校验 JSON 合法性，非法内容不会写入。',
     'pi.files.settingsTitle': 'settings.json（生效设置）',
     'pi.files.modelsTitle': 'models.json（供应商与模型）',
+    'pi.history.apply': '应用此记录',
+    'pi.history.applied': '已应用历史记录',
+    'pi.history.applyFailed': '应用历史记录失败',
+    'pi.history.confirm': '将此历史记录应用到文件？当前文件内容会先被快照保存。',
     '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.models.importTitle': '从端点导入模型',
+    'pi.providers.models.addSelected': '添加选中（{count}）',
+    'pi.providers.models.name': '名称',
+    'pi.providers.models.reasoning': '支持推理',
+    'pi.providers.models.contextWindow': '上下文窗口',
+    'pi.providers.models.maxTokens': '最大输出',
+    'pi.providers.models.catalogFill': '自动填充',
+    'pi.providers.models.catalogFilling': '填充中…',
+    'pi.picker.searchPlaceholder': '搜索供应商…',
+    'pi.picker.group.custom': '自定义端点',
+    'pi.picker.group.apiKey': 'API Key 服务商',
+    'pi.picker.empty': '没有匹配的供应商模板',
+    'pi.picker.back': '返回选择模板',
     'pi.providers.delete': '删除供应商',
     'pi.providers.addModal.title': '添加供应商',
     'pi.providers.addModal.subtitle': '创建新的 Piper 供应商',

package/web-ui/modules/pi-provider-templates.mjs

@@ -0,0 +1,26 @@
+export const PI_PROVIDER_TEMPLATE_GROUPS = [
+    {
+        id: 'custom',
+        i18nKey: 'pi.picker.group.custom',
+        templates: [
+            { id: 'custom-openai', name: 'OpenAI Compatible', baseUrl: '', api: 'openai-completions' },
+            { id: 'custom-anthropic', name: 'Anthropic Compatible', baseUrl: '', api: 'anthropic-messages' }
+        ]
+    },
+    {
+        id: 'apiKey',
+        i18nKey: 'pi.picker.group.apiKey',
+        templates: [
+            { id: 'openai', name: 'OpenAI', baseUrl: 'https://api.openai.com/v1', api: 'openai-responses' },
+            { id: 'anthropic', name: 'Anthropic', baseUrl: 'https://api.anthropic.com', api: 'anthropic-messages' },
+            { id: 'google-gemini', name: 'Google Gemini', baseUrl: 'https://generativelanguage.googleapis.com/v1beta', api: 'google-generative-ai' },
+            { id: 'deepseek', name: 'DeepSeek', baseUrl: 'https://api.deepseek.com', api: 'openai-completions' },
+            { id: 'moonshot-kimi', name: 'Moonshot Kimi', baseUrl: 'https://api.moonshot.cn/v1', api: 'openai-completions' },
+            { id: 'zhipu-glm', name: 'Zhipu GLM', baseUrl: 'https://open.bigmodel.cn/api/paas/v4', api: 'openai-completions' },
+            { id: 'openrouter', name: 'OpenRouter', baseUrl: 'https://openrouter.ai/api/v1', api: 'openai-completions' },
+            { id: 'xai-grok', name: 'xAI Grok', baseUrl: 'https://api.x.ai/v1', api: 'openai-completions' },
+            { id: 'groq', name: 'Groq', baseUrl: 'https://api.groq.com/openai/v1', api: 'openai-completions' },
+            { id: 'mistral', name: 'Mistral', baseUrl: 'https://api.mistral.ai/v1', api: 'openai-completions' }
+        ]
+    }
+];

package/web-ui/modules/skills.computed.mjs

@@ -1,10 +1,14 @@
 export function createSkillsComputed() {
     return {
         skillsTargetLabel() {
-            return this.skillsTargetApp === 'claude' ? 'Claude Code' : 'Codex';
+            if (this.skillsTargetApp === 'claude') return 'Claude Code';
+            if (this.skillsTargetApp === 'pi') return 'Pi';
+            return 'Codex';
         },
         skillsDefaultRootPath() {
-            return this.skillsTargetApp === 'claude' ? '~/.claude/skills' : '~/.codex/skills';
+            if (this.skillsTargetApp === 'claude') return '~/.claude/skills';
+            if (this.skillsTargetApp === 'pi') return '~/.pi/agent/skills';
+            return '~/.codex/skills';
         },
         filteredSkillsList() {
             const list = Array.isArray(this.skillsList) ? this.skillsList : [];

package/web-ui/modules/skills.methods.mjs

@@ -12,7 +12,7 @@ export function createSkillsMethods({ api }) {
             if (app == null) {
                 return 'codex';
             }
-            if (app === 'codex' || app === 'claude') {
+            if (app === 'codex' || app === 'claude' || app === 'pi') {
                 return app;
             }
             throw createUnsupportedSkillsTargetAppError(app);

package/web-ui/partials/index/modal-skills.html

@@ -23,6 +23,14 @@
                                 @click="setSkillsTargetApp('claude', { silent: false })">
                                 Claude Code
                             </button>
+                            <button
+                                type="button"
+                                :class="['market-target-chip', { active: skillsTargetApp === 'pi' }]"
+                                :aria-pressed="skillsTargetApp === 'pi'"
+                                :disabled="loading || !!initError || skillsMarketBusy"
+                                @click="setSkillsTargetApp('pi', { silent: false })">
+                                Pi
+                            </button>
                         </div>
                         <button class="btn-mini" @click="refreshSkillsList({ silent: false })" :disabled="skillsLoading || skillsDeleting || skillsScanningImports || skillsImporting || skillsZipImporting || skillsExporting">
                             {{ skillsLoading ? t('common.refreshing') : t('common.refresh') }}

package/web-ui/partials/index/modals-pi-provider.html

@@ -0,0 +1,96 @@
+        <!-- Pi 新增供应商模板选择模态框 -->
+        <div v-if="showAddPiProviderModal && !editingPiProvider" class="modal-overlay" @click.self="cancelAddPiProviderModal">
+            <div class="modal modal-wide" role="dialog" aria-modal="true" aria-labelledby="pi-provider-picker-modal-title">
+                <div class="modal-title" id="pi-provider-picker-modal-title">{{ t('pi.providers.addModal.title') }}</div>
+                <div class="config-template-hint">{{ t('pi.providers.addModal.subtitle') }}</div>
+                <div class="pi-picker">
+                    <input class="form-input" type="text" v-model="piProviderPickerQuery" autocomplete="off" spellcheck="false" :placeholder="t('pi.picker.searchPlaceholder')">
+                    <div class="pi-picker-group" v-for="group in piProviderTemplateGroups()" :key="group.id">
+                        <div class="pi-picker-group-title">{{ t(group.i18nKey) }}</div>
+                        <div class="pi-picker-grid">
+                            <button type="button" class="card pi-picker-card" v-for="tpl in group.templates" :key="tpl.id" @click="selectPiProviderTemplate(tpl.id)">
+                                <span class="card-icon">{{ tpl.name.charAt(0).toUpperCase() }}</span>
+                                <span class="pi-picker-card-name">{{ tpl.name }}</span>
+                                <span v-if="tpl.baseUrl" class="pi-picker-card-url">{{ tpl.baseUrl }}</span>
+                            </button>
+                        </div>
+                    </div>
+                    <p v-if="piProviderPickerQuery.trim() && !piProviderTemplateGroups().length" class="config-template-hint">{{ t('pi.picker.empty') }}</p>
+                </div>
+                <div class="btn-group">
+                    <button class="btn btn-cancel" @click="cancelAddPiProviderModal">{{ t('common.cancel') }}</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Pi 供应商编辑器模态框 -->
+        <div v-if="editingPiProvider" class="modal-overlay" @click.self="closePiProviderEditor">
+            <div class="modal modal-wide" role="dialog" aria-modal="true" aria-labelledby="pi-provider-editor-modal-title">
+                <div class="modal-title" id="pi-provider-editor-modal-title">{{ editingPiProvider.isNew ? t('pi.providers.addModal.title') : t('pi.providers.editorTitle') }}</div>
+                <div v-if="!editingPiProvider.isNew" class="form-group">
+                    <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">
+                    <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://" @change="fetchPiRemoteModels">
+                </div>
+                <div class="form-group">
+                    <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">
+                    <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-..." @change="fetchPiRemoteModels">
+                        <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 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')">
+                                <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">
+                            <div class="input-with-toggle">
+                                <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>
+                        <div class="pi-model-import-section">
+                            <span class="selector-title">{{ t('pi.providers.models.importTitle') }}</span>
+                            <div class="pi-model-import-list" v-if="!piRemoteModelsLoading && piRemoteSelectableModels().length > 0">
+                                <label class="pi-model-import-item" v-for="id in piRemoteSelectableModels()" :key="id">
+                                    <input type="checkbox" :checked="isPiRemoteChecked(id)" @change="togglePiRemoteChecked(id)" :disabled="!isToolConfigWriteAllowed('pi')">
+                                    <span class="pi-model-import-id">{{ id }}</span>
+                                </label>
+                            </div>
+                            <div class="settings-tab-actions" v-if="!piRemoteModelsLoading && piRemoteSelectableModels().length > 0">
+                                <button type="button" class="btn-tool" :disabled="!isToolConfigWriteAllowed('pi') || piCheckedRemoteCount() === 0" @click="addSelectedPiRemoteModels">{{ t('pi.providers.models.addSelected', { count: piCheckedRemoteCount() }) }}</button>
+                            </div>
+                            <p v-if="!piRemoteModelsLoading && !piRemoteModelError && piRemoteModels.length" class="config-template-hint">{{ t('pi.providers.models.remoteCount', { count: piRemoteModels.length }) }}</p>
+                            <p v-if="!piRemoteModelsLoading && !piRemoteModelError && piModelSearch.trim() && piRemoteSelectableModels().length === 0" class="config-template-hint">{{ t('pi.providers.models.noMatch') }}</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="btn-group">
+                    <button class="btn btn-cancel" @click="closePiProviderEditor">{{ t('common.cancel') }}</button>
+                    <button v-if="!editingPiProvider.isNew" class="btn btn-confirm btn-danger" @click="confirmDeletePiProvider" :disabled="!isToolConfigWriteAllowed('pi') || piSaving">{{ t('pi.providers.delete') }}</button>
+                    <button class="btn btn-confirm" @click="savePiProvider" :disabled="!isToolConfigWriteAllowed('pi') || piSaving">{{ t(piSaving ? 'common.saving' : 'common.save') }}</button>
+                </div>
+            </div>
+        </div>

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

@@ -56,128 +56,6 @@
                             <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 class="selector-section">
-                            <div class="selector-header">
-                                <span class="selector-title">{{ t('pi.providers.json.title') }}</span>
-                            </div>
-                            <p class="config-template-hint">{{ t('pi.providers.json.desc') }}</p>
-                            <label class="form-label">{{ t('pi.providers.json.previewTitle') }}</label>
-                            <pre class="config-json-preview">{{ piProviderPreviewJson() }}</pre>
-                            <label class="form-label">{{ t('pi.providers.json.editTitle') }}</label>
-                            <textarea
-                                class="template-textarea config-json-editor"
-                                v-model="editingPiProvider.form.configJsonDraft"
-                                spellcheck="false"
-                                autocomplete="off"
-                                :disabled="!isToolConfigWriteAllowed('pi')"
-                                @input="piEditorJsonDraftInput"
-                                placeholder="{}"></textarea>
-                            <p v-if="piEditorJsonError" class="config-template-hint error-text">{{ piEditorJsonError }}</p>
-                        </section>
-                        </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>
                         <section class="selector-section">
                             <div class="selector-header">
                                 <span class="selector-title">{{ t('pi.files.title') }}</span>
@@ -195,7 +73,29 @@
                             <p v-if="piSettingsJsonError" class="config-template-hint error-text">{{ piSettingsJsonError }}</p>
                             <div class="settings-tab-actions">
                                 <button type="button" class="btn-tool" @click="savePiSettingsJson" :disabled="!isToolConfigWriteAllowed('pi') || piSaving || piFileJsonSaving || !!piSettingsJsonError">{{ t('common.save') }}</button>
+                                <button type="button" class="btn-mini" @click="openPiConfigHistory('settings')" :disabled="piHistoryLoading">{{ t('common.history') }}</button>
                             </div>
+                            <details v-if="piHistoryTarget === 'settings'" class="prompt-history-panel" open>
+                                <summary class="prompt-history-summary">
+                                    <span>{{ t('common.history') }}</span>
+                                    <button type="button" class="btn-mini prompt-history-close" @click="closePiConfigHistory" :title="t('common.close')">✕</button>
+                                </summary>
+                                <div class="prompt-history-body">
+                                    <ul v-if="!piHistoryLoading && !piHistoryError && piHistoryItems.length" class="prompt-history-list">
+                                        <li v-for="item in piHistoryItems" :key="item.id" :class="['prompt-history-item', { active: piHistoryPreviewId === item.id }]" @click="viewPiConfigHistoryItem(item)">
+                                            <span class="prompt-history-time">{{ item.id }}</span>
+                                            <span class="prompt-history-size">{{ Math.round(item.size / 1024 * 10) / 10 }} KB</span>
+                                        </li>
+                                    </ul>
+                                    <div v-if="piHistoryLoading" class="state-message">{{ t('diff.generating') }}</div>
+                                    <div v-else-if="piHistoryError" class="state-message error">{{ piHistoryError }}</div>
+                                    <div v-else-if="!piHistoryItems.length" class="state-message">{{ t('toast.history.empty') }}</div>
+                                    <div v-if="piHistoryPreviewContent" class="prompt-history-preview-wrap">
+                                        <pre class="prompt-history-preview">{{ piHistoryPreviewContent }}</pre>
+                                        <button type="button" class="btn-mini btn-confirm-mini" @click="applyPiConfigHistory" :disabled="piHistoryApplying || !isToolConfigWriteAllowed('pi')">{{ t('pi.history.apply') }}</button>
+                                    </div>
+                                </div>
+                            </details>
                             <label class="form-label">{{ t('pi.files.modelsTitle') }}</label>
                             <textarea
                                 class="template-textarea config-json-editor"
@@ -208,7 +108,29 @@
                             <p v-if="piModelsJsonError" class="config-template-hint error-text">{{ piModelsJsonError }}</p>
                             <div class="settings-tab-actions">
                                 <button type="button" class="btn-tool" @click="savePiModelsJson" :disabled="!isToolConfigWriteAllowed('pi') || piSaving || piFileJsonSaving || !!piModelsJsonError">{{ t('common.save') }}</button>
+                                <button type="button" class="btn-mini" @click="openPiConfigHistory('models')" :disabled="piHistoryLoading">{{ t('common.history') }}</button>
                             </div>
+                            <details v-if="piHistoryTarget === 'models'" class="prompt-history-panel" open>
+                                <summary class="prompt-history-summary">
+                                    <span>{{ t('common.history') }}</span>
+                                    <button type="button" class="btn-mini prompt-history-close" @click="closePiConfigHistory" :title="t('common.close')">✕</button>
+                                </summary>
+                                <div class="prompt-history-body">
+                                    <ul v-if="!piHistoryLoading && !piHistoryError && piHistoryItems.length" class="prompt-history-list">
+                                        <li v-for="item in piHistoryItems" :key="item.id" :class="['prompt-history-item', { active: piHistoryPreviewId === item.id }]" @click="viewPiConfigHistoryItem(item)">
+                                            <span class="prompt-history-time">{{ item.id }}</span>
+                                            <span class="prompt-history-size">{{ Math.round(item.size / 1024 * 10) / 10 }} KB</span>
+                                        </li>
+                                    </ul>
+                                    <div v-if="piHistoryLoading" class="state-message">{{ t('diff.generating') }}</div>
+                                    <div v-else-if="piHistoryError" class="state-message error">{{ piHistoryError }}</div>
+                                    <div v-else-if="!piHistoryItems.length" class="state-message">{{ t('toast.history.empty') }}</div>
+                                    <div v-if="piHistoryPreviewContent" class="prompt-history-preview-wrap">
+                                        <pre class="prompt-history-preview">{{ piHistoryPreviewContent }}</pre>
+                                        <button type="button" class="btn-mini btn-confirm-mini" @click="applyPiConfigHistory" :disabled="piHistoryApplying || !isToolConfigWriteAllowed('pi')">{{ t('pi.history.apply') }}</button>
+                                    </div>
+                                </div>
+                            </details>
                         </section>
                         <div v-if="!isToolConfigWriteAllowed('pi')" class="tool-config-write-overlay">
                             <div class="tool-config-write-overlay-card">

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

@@ -11,14 +11,14 @@
 
                         <div class="docs-toolbar-grid">
                             <div class="docs-toolbar-card">
-                                <label class="form-label" for="docs-install-package-manager">{{ t('common.packageManager') }}</label>
-                                <select id="docs-install-package-manager" class="form-input" v-model="installPackageManager">
-                                    <option value="npm">npm</option>
-                                    <option value="pnpm">pnpm</option>
-                                    <option value="bun">bun</option>
-                                </select>
+                                <label class="form-label">{{ t('common.packageManager') }}</label>
+                                <div class="install-action-tabs">
+                                    <button type="button" class="btn-mini" :class="{ active: installPackageManager === 'npm' }" @click="installPackageManager = 'npm'">npm</button>
+                                    <button type="button" class="btn-mini" :class="{ active: installPackageManager === 'pnpm' }" @click="installPackageManager = 'pnpm'">pnpm</button>
+                                    <button type="button" class="btn-mini" :class="{ active: installPackageManager === 'bun' }" @click="installPackageManager = 'bun'">bun</button>
+                                </div>
                             </div>
-                            <div class="docs-toolbar-card docs-toolbar-card-wide">
+                            <div class="docs-toolbar-card">
                                 <label class="form-label">{{ t('common.mirror') }}</label>
                                 <div class="install-action-tabs">
                                     <button type="button" class="btn-mini" :class="{ active: installRegistryPreset === 'npmmirror' }" @click="setInstallRegistryPreset('npmmirror')">npmmirror</button>
@@ -29,7 +29,7 @@
                                 <div class="form-hint install-registry-hint" v-if="installRegistryPreview">{{ t('docs.registryHintPrefix') }} --registry={{ installRegistryPreview }}</div>
                                 <div class="form-hint install-registry-hint" v-else-if="installRegistryPreset === 'custom'">{{ t('docs.registryHintCustom') }}</div>
                             </div>
-                            <div class="docs-toolbar-card docs-toolbar-card-wide">
+                            <div class="docs-toolbar-card">
                                 <label class="form-label">{{ t('common.action') }}</label>
                                 <div class="install-action-tabs">
                                     <button type="button" class="btn-mini" :class="{ active: installCommandAction === 'install' }" @click="setInstallCommandAction('install')">{{ t('common.install') }}</button>
@@ -39,20 +39,6 @@
                             </div>
                         </div>
 
-                        <div class="docs-summary-strip">
-                            <div class="docs-summary-item">
-                                <span class="docs-summary-label">{{ t('common.targets') }}</span>
-                                <strong class="docs-summary-value">{{ installTargetCards.length }}</strong>
-                            </div>
-                            <div class="docs-summary-item">
-                                <span class="docs-summary-label">{{ t('common.currentPm') }}</span>
-                                <strong class="docs-summary-value">{{ String(installPackageManager || 'npm').toUpperCase() }}</strong>
-                            </div>
-                            <div class="docs-summary-item docs-summary-item-wide">
-                                <span class="docs-summary-label">{{ t('common.registry') }}</span>
-                                <strong class="docs-summary-value">{{ installRegistryPreview || 'npmmirror' }}</strong>
-                            </div>
-                        </div>
                     </div>
 
                     <div class="selector-section">

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

@@ -25,6 +25,14 @@
                                     @click="setSkillsTargetApp('claude', { silent: false })">
                                     Claude Code
                                 </button>
+                                <button
+                                    type="button"
+                                    :class="['skills-target-chip', { active: skillsTargetApp === 'pi' }]"
+                                    :aria-pressed="skillsTargetApp === 'pi'"
+                                    :disabled="loading || !!initError || skillsMarketBusy"
+                                    @click="setSkillsTargetApp('pi', { silent: false })">
+                                    Pi
+                                </button>
                             </div>
                         </div>
                         <div class="skills-header-actions">