codexmate 0.1.15 → 0.1.17

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',
@@ -1128,6 +1134,10 @@ const vi = Object.freeze({
     'status.openclawConfig': 'Cấu hình OpenClaw',
     'status.workspaceFile': 'File không gian làm việc',
     'status.configMode': 'Chế độ cấu hình',
+    'status.kilocodeProvider': 'Nhà cung cấp Kilocode',
+    'status.kilocodeModel': 'Mô hình Kilocode',
+    'status.piProvider': 'Nhà cung cấp Pi',
+    'status.piModel': 'Mô hình Pi',
     'status.currentProvider': 'Nhà cung cấp hiện tại',
     'status.currentModel': 'Model hiện tại',
     'status.quickSwitchProvider': 'Chuyển nhanh nhà cung cấp',
@@ -1319,6 +1329,14 @@ const vi = Object.freeze({
     'pi.providers.json.desc': 'Xem trước bản ghi cuối từ thay đổi biểu mẫu; các chỉnh sửa được gộp vào models.json khi lưu.',
     'pi.providers.json.previewTitle': 'Xem trước',
     'pi.providers.json.editTitle': 'Chỉnh sửa JSON',
+    'pi.files.title': 'JSON tập tin',
+    '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',

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': '總時長',
@@ -1029,6 +1035,10 @@ const zhTw = Object.freeze({
     'status.opencodeConfig': 'OpenCode 設定',
     'status.workspaceFile': '工作區文件',
     'status.configMode': '設定模式',
+    'status.kilocodeProvider': 'Kilocode 供應商',
+    'status.kilocodeModel': 'Kilocode 模型',
+    'status.piProvider': 'Pi 供應商',
+    'status.piModel': 'Pi 模型',
     'status.currentProvider': '目前 Provider',
     'status.currentModel': '目前模型',
     'status.quickSwitchProvider': '快速切換提供商',
@@ -1348,6 +1358,14 @@ const zhTw = Object.freeze({
     'pi.providers.json.desc': '即時預覽表單異動合併後的最終紀錄；儲存時併入 models.json。',
     'pi.providers.json.previewTitle': '預覽',
     'pi.providers.json.editTitle': '編輯 JSON',
+    'pi.files.title': '檔案 JSON',
+    '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} 個可用模型，點擊新增',

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': '总时长',
@@ -1029,6 +1035,10 @@ const zh = Object.freeze({
     'status.opencodeConfig': 'OpenCode 配置',
     'status.workspaceFile': '工作区文件',
     'status.configMode': '配置模式',
+    'status.kilocodeProvider': 'Kilocode 提供商',
+    'status.kilocodeModel': 'Kilocode 模型',
+    'status.piProvider': 'Pi 提供商',
+    'status.piModel': 'Pi 模型',
     'status.currentProvider': '当前 Provider',
     'status.currentModel': '当前模型',
     'status.quickSwitchProvider': '快速切换提供商',
@@ -1348,6 +1358,14 @@ const zh = Object.freeze({
     'pi.providers.json.desc': '实时预览表单改动合并后的最终记录；保存时并入 models.json。',
     'pi.providers.json.previewTitle': '预览',
     'pi.providers.json.editTitle': '编辑 JSON',
+    'pi.files.title': '文件 JSON',
+    '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} 个可用模型，点击添加',

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/layout-header.html

@@ -471,6 +471,26 @@
                                 <span class="value">{{ opencodeConfigPath || t('common.notSelected') }}</span>
                             </div>
                         </template>
+                        <template v-else-if="configMode === 'kilocode'">
+                            <div class="status-chip">
+                                <span class="label">{{ t('status.kilocodeProvider') }}</span>
+                                <span class="value">{{ kilocodeProvider || t('common.notSelected') }}</span>
+                            </div>
+                            <div class="status-chip">
+                                <span class="label">{{ t('status.kilocodeModel') }}</span>
+                                <span class="value">{{ kilocodeModel || t('common.notSelected') }}</span>
+                            </div>
+                        </template>
+                        <template v-else-if="configMode === 'pi'">
+                            <div class="status-chip">
+                                <span class="label">{{ t('status.piProvider') }}</span>
+                                <span class="value">{{ piActiveProvider || t('common.notSelected') }}</span>
+                            </div>
+                            <div class="status-chip">
+                                <span class="label">{{ t('status.piModel') }}</span>
+                                <span class="value">{{ piActiveModel || t('common.notSelected') }}</span>
+                            </div>
+                        </template>
                         <template v-else>
                             <div class="status-chip">
                                 <span class="label">{{ t('status.configMode') }}</span>

package/web-ui/partials/index/modal-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/panel-config-pi.html

@@ -178,6 +178,82 @@
                                 </div>
                             </div>
                         </section>
+                        <section class="selector-section">
+                            <div class="selector-header">
+                                <span class="selector-title">{{ t('pi.files.title') }}</span>
+                            </div>
+                            <div class="config-template-hint">{{ t('pi.files.desc') }}</div>
+                            <label class="form-label">{{ t('pi.files.settingsTitle') }}</label>
+                            <textarea
+                                class="template-textarea config-json-editor"
+                                v-model="piSettingsJsonDraft"
+                                spellcheck="false"
+                                autocomplete="off"
+                                :disabled="!isToolConfigWriteAllowed('pi')"
+                                @input="piSettingsJsonInput"
+                                placeholder="{}"></textarea>
+                            <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"
+                                v-model="piModelsJsonDraft"
+                                spellcheck="false"
+                                autocomplete="off"
+                                :disabled="!isToolConfigWriteAllowed('pi')"
+                                @input="piModelsJsonInput"
+                                placeholder="{}"></textarea>
+                            <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">
                                 <div class="tool-config-write-overlay-title">{{ t('toolConfig.pi.lockedTitle') }}</div>

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">

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

@@ -4,8 +4,8 @@
                     id="panel-plugins"
                     role="tabpanel"
                     aria-labelledby="tab-plugins">
-                    <div class="plugins-layout">
-                        <aside class="plugins-sidebar" :aria-label="t('plugins.sidebar.ariaList')">
+                    <div :class="['plugins-layout', { 'plugins-layout-single': !pluginsSidebarVisible }]">
+                        <aside v-if="pluginsSidebarVisible" class="plugins-sidebar" :aria-label="t('plugins.sidebar.ariaList')">
                             <div class="selector-header plugins-sidebar-header">
                                 <div>
                                     <span class="selector-title">{{ t('plugins.sidebar.title') }}</span>
@@ -44,8 +44,15 @@
                             </div>
                             <div v-else-if="pluginsActiveId === 'prompt-templates'" class="plugins-panel">
                                 <div class="plugins-panel-head">
-                                    <div class="plugins-panel-title">{{ t('plugins.promptTemplates.title') }}</div>
-                                    <div v-if="pluginsActiveAttribution" class="plugins-panel-note">{{ pluginsActiveAttribution }}</div>
+                                    <div>
+                                        <div class="plugins-panel-title">{{ t('plugins.promptTemplates.title') }}</div>
+                                        <div v-if="pluginsActiveAttribution" class="plugins-panel-note">{{ pluginsActiveAttribution }}</div>
+                                    </div>
+                                    <div v-if="!pluginsSidebarVisible" class="settings-tab-actions">
+                                        <button type="button" class="btn-tool btn-tool-compact" @click="loadPluginsOverview({ forceRefresh: true, silent: false })" :disabled="loading || !!initError || pluginsLoading">
+                                            {{ pluginsLoading ? t('plugins.refreshing') : t('plugins.refresh') }}
+                                        </button>
+                                    </div>
                                 </div>
 
                                 <div class="prompt-templates-modebar" role="tablist" :aria-label="t('plugins.promptTemplates.mode.aria')">
@@ -65,14 +72,7 @@
 
                                 <div v-if="promptTemplatesMode === 'compose'" class="prompt-compose">
                                     <div class="prompt-compose-workspace">
-                                        <div class="prompt-compose-selected">
-                                            <div class="prompt-compose-selected-title">{{ (promptComposerActiveTemplate && promptComposerActiveTemplate.name) ? promptComposerActiveTemplate.name : t('plugins.promptTemplates.compose.chooseTemplate') }}</div>
-                                            <div class="prompt-compose-selected-meta">{{ (promptComposerActiveTemplate && promptComposerActiveTemplate.description) ? promptComposerActiveTemplate.description : t('plugins.promptTemplates.compose.chooseTemplateHint') }}</div>
-                                            <div v-if="promptComposerActiveTemplate && promptComposerActiveTemplate.isBuiltin && (promptComposerActiveTemplate.createdBy || (promptComposerActiveTemplate.maintainers && promptComposerActiveTemplate.maintainers.length))" class="plugins-panel-note">
-                                                {{ t('plugins.meta.attribution', { createdBy: promptComposerActiveTemplate.createdBy || '', maintainers: (promptComposerActiveTemplate.maintainers || []).join(', ') }) }}
-                                            </div>
-                                        </div>
-
+                                        <div class="prompt-compose-main">
                                         <div class="prompt-compose-form">
                                             <label class="form-label">{{ t('plugins.promptTemplates.compose.selectTemplate') }}</label>
                                             <select
@@ -86,7 +86,7 @@
                                             </select>
 
                                             <div v-if="!promptComposerActiveTemplate" class="plugins-panel-note">{{ t('plugins.promptTemplates.compose.empty') }}</div>
-                                            <div v-else-if="!promptComposerActiveTemplate.isBuiltin" class="plugins-panel-note">{{ t('plugins.promptTemplates.compose.varsHint') }}</div>
+                                            <div v-else-if="promptComposerActiveTemplate.description" class="plugins-panel-note">{{ promptComposerActiveTemplate.description }}</div>
                                             <div v-if="promptComposerActiveTemplate && !promptComposerActiveTemplate.isBuiltin" class="prompt-compose-actions">
                                                 <button
                                                     type="button"
@@ -121,6 +121,7 @@
                                             </div>
                                         </div>
 
+                                        </div>
                                         <div class="prompt-preview-block prompt-compose-preview">
                                             <div class="prompt-vars-head">
                                                 <div>

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

@@ -50,30 +50,29 @@
                                 <span class="usage-spinner" aria-hidden="true"></span>
                             </div>
 
-                            <!-- Hero 区域：合并当前会话条 + 主要指标 -->
-                            <div class="usage-hero">
-                                <div v-if="usageCurrentSessionStats" class="usage-hero-active">
-                                    <span class="usage-hero-active-dot"></span>
-                                    <span class="usage-hero-active-label">{{ usageCurrentSessionStats.label }}</span>
-                                    <span class="usage-hero-active-stat">{{ usageCurrentSessionStats.tokenLabel }} tokens</span>
-                                    <span class="usage-hero-active-stat">{{ usageCurrentSessionStats.apiDurationLabel }} API</span>
-                                    <span class="usage-hero-active-stat">{{ usageCurrentSessionStats.totalDurationLabel }} total</span>
-                                </div>
+                            <div v-if="usageCurrentSessionStats" class="usage-active-strip" role="status">
+                                <span class="usage-hero-active-dot"></span>
+                                <span class="usage-hero-active-label">{{ usageCurrentSessionStats.label }}</span>
+                                <span class="usage-hero-active-stat">{{ usageCurrentSessionStats.tokenLabel }} tokens</span>
+                                <span class="usage-hero-active-stat">{{ usageCurrentSessionStats.apiDurationLabel }} API</span>
+                                <span class="usage-hero-active-stat">{{ usageCurrentSessionStats.totalDurationLabel }} total</span>
+                            </div>
 
-                                <div class="usage-hero-metrics">
-                                    <div class="usage-hero-main">{{ usageHeroMainValue }}</div>
-                                    <div class="usage-hero-sub">
-                                        <span>{{ usageHeroSubLabel }}</span>
-                                        <span v-if="usageHeroDelta" :class="['usage-hero-delta', usageHeroDeltaClass]">
-                                            {{ usageHeroDelta }}
-                                        </span>
-                                    </div>
+                            <!-- KPI 指标卡片行 -->
+                            <div class="usage-kpi-grid">
+                                <div v-for="card in usageKpiCards" :key="card.key" class="usage-kpi-card">
+                                    <div class="usage-kpi-label">{{ card.label }}</div>
+                                    <div class="usage-kpi-value" :title="card.title || card.value">{{ card.value }}</div>
+                                    <span v-if="card.delta" :class="['usage-hero-delta', card.deltaClass]">{{ card.delta }}</span>
                                 </div>
                             </div>
 
                             <!-- 波浪图 -->
                             <section v-if="sessionUsageWave.points && sessionUsageWave.points.length" class="usage-wave-section">
-                                <div class="usage-card-title">{{ t('usage.daily.title') }}</div>
+                                <div class="usage-card-title usage-wave-title">
+                                    <span>{{ t('usage.daily.title') }}</span>
+                                    <span v-if="usageWaveHeaderSummary" class="usage-wave-summary">{{ usageWaveHeaderSummary }}</span>
+                                </div>
                                 <div class="usage-wave-container">
                                     <div class="usage-wave-yaxis">
                                         <span v-for="tick in sessionUsageWave.yTicks" :key="tick.value"
@@ -150,13 +149,14 @@
                                 <!-- Top Sessions -->
                                 <section class="usage-card">
                                     <div class="usage-card-title">{{ t('usage.sessions.topDensity') }}</div>
-                                    <div v-if="!sessionUsageCharts.topSessionsByMessages.length" class="usage-list-value">{{ t('usage.sessions.empty') }}</div>
+                                    <div v-if="!usageRankedLists.topSessions.length" class="usage-list-value">{{ t('usage.sessions.empty') }}</div>
                                     <div v-else class="usage-list-compact">
-                                        <div v-for="item in sessionUsageCharts.topSessionsByMessages" :key="item.key + '-dense'" class="usage-list-compact-item" @click="selectSession(item)" :title="item.title">
+                                        <div v-for="item in usageRankedLists.topSessions" :key="item.key + '-dense'" class="usage-list-compact-item" @click="selectSession(item)" :title="item.title">
                                             <span class="usage-list-bullet">·</span>
                                             <div class="usage-list-compact-content">
                                                 <div class="usage-list-title">{{ item.title }}</div>
                                                 <div class="usage-list-meta">{{ item.messageCount }} msgs · {{ item.sourceLabel }} · {{ item.updatedAtLabel }}</div>
+                                                <div class="usage-list-bar" aria-hidden="true"><span class="usage-list-bar-fill" :style="{ width: item.barPercent + '%' }"></span></div>
                                             </div>
                                         </div>
                                     </div>
@@ -165,13 +165,14 @@
                                 <!-- Recent Activity -->
                                 <section class="usage-card">
                                     <div class="usage-card-title">{{ t('usage.recent.title') }}</div>
-                                    <div v-if="!sessionUsageCharts.recentSessions.length" class="usage-list-value">{{ t('usage.sessions.empty') }}</div>
+                                    <div v-if="!usageRankedLists.recentSessions.length" class="usage-list-value">{{ t('usage.sessions.empty') }}</div>
                                     <div v-else class="usage-list-compact">
-                                        <div v-for="item in sessionUsageCharts.recentSessions" :key="item.key" class="usage-list-compact-item" @click="selectSession(item)">
+                                        <div v-for="item in usageRankedLists.recentSessions" :key="item.key" class="usage-list-compact-item" @click="selectSession(item)">
                                             <span class="usage-list-bullet">·</span>
                                             <div class="usage-list-compact-content">
                                                 <div class="usage-list-title">{{ item.title }}</div>
                                                 <div class="usage-list-meta">{{ item.messageCount }} msgs · {{ item.sourceLabel }} · {{ item.updatedAtLabel }}</div>
+                                                <div class="usage-list-bar" aria-hidden="true"><span class="usage-list-bar-fill" :style="{ width: item.barPercent + '%' }"></span></div>
                                             </div>
                                         </div>
                                     </div>
@@ -180,14 +181,15 @@
                                 <!-- Top Paths -->
                                 <section class="usage-paths-section">
                                     <div class="usage-card-title">{{ t('usage.paths.title') }}</div>
-                                    <div v-if="!sessionUsageCharts.topPaths.length" class="usage-list-value">{{ t('usage.paths.empty') }}</div>
+                                    <div v-if="!usageRankedLists.topPaths.length" class="usage-list-value">{{ t('usage.paths.empty') }}</div>
                                     <div v-else class="usage-list-paths">
-                                        <div v-for="(item, index) in sessionUsageCharts.topPaths" :key="item.path" class="usage-list-path-row">
+                                        <div v-for="(item, index) in usageRankedLists.topPaths" :key="item.path" class="usage-list-path-row">
                                             <span class="usage-list-path-rank">{{ index + 1 }}</span>
                                             <div class="usage-list-path-content">
                                                 <div class="usage-list-path" :title="item.path">{{ item.path }}</div>
-                                                <div class="usage-list-path-stat">{{ item.count }}</div>
+                                                <div class="usage-list-bar" aria-hidden="true"><span class="usage-list-bar-fill" :style="{ width: item.barPercent + '%' }"></span></div>
                                             </div>
+                                            <div class="usage-list-path-stat">{{ item.count }}</div>
                                         </div>
                                     </div>
                                 </section>