codexmate 0.1.16 → 0.1.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cli/skills.js +18 -1
- package/cli.js +46 -1
- package/package.json +1 -1
- package/plugins/prompt-templates/computed.mjs +5 -0
- package/web-ui/app.js +7 -0
- package/web-ui/modules/app.computed.session.mjs +83 -12
- package/web-ui/modules/app.methods.navigation.mjs +1 -1
- package/web-ui/modules/app.methods.pi-config.mjs +80 -0
- package/web-ui/modules/app.methods.web-ui-preferences.mjs +3 -3
- package/web-ui/modules/i18n/locales/en.mjs +10 -0
- package/web-ui/modules/i18n/locales/ja.mjs +10 -0
- package/web-ui/modules/i18n/locales/vi.mjs +10 -0
- package/web-ui/modules/i18n/locales/zh-tw.mjs +10 -0
- package/web-ui/modules/i18n/locales/zh.mjs +10 -0
- package/web-ui/modules/skills.computed.mjs +6 -2
- package/web-ui/modules/skills.methods.mjs +1 -1
- package/web-ui/partials/index/modal-skills.html +8 -0
- package/web-ui/partials/index/panel-config-pi.html +44 -0
- package/web-ui/partials/index/panel-docs.html +8 -22
- package/web-ui/partials/index/panel-market.html +8 -0
- package/web-ui/partials/index/panel-plugins.html +14 -13
- package/web-ui/partials/index/panel-usage.html +27 -25
- package/web-ui/res/web-ui-render.precompiled.js +432 -231
- package/web-ui/styles/docs-panel.css +9 -56
- package/web-ui/styles/plugins-panel.css +18 -18
- package/web-ui/styles/sessions-usage.css +104 -91
|
@@ -11,14 +11,14 @@
|
|
|
11
11
|
|
|
12
12
|
<div class="docs-toolbar-grid">
|
|
13
13
|
<div class="docs-toolbar-card">
|
|
14
|
-
<label class="form-label"
|
|
15
|
-
<
|
|
16
|
-
<
|
|
17
|
-
<
|
|
18
|
-
<
|
|
19
|
-
</
|
|
14
|
+
<label class="form-label">{{ t('common.packageManager') }}</label>
|
|
15
|
+
<div class="install-action-tabs">
|
|
16
|
+
<button type="button" class="btn-mini" :class="{ active: installPackageManager === 'npm' }" @click="installPackageManager = 'npm'">npm</button>
|
|
17
|
+
<button type="button" class="btn-mini" :class="{ active: installPackageManager === 'pnpm' }" @click="installPackageManager = 'pnpm'">pnpm</button>
|
|
18
|
+
<button type="button" class="btn-mini" :class="{ active: installPackageManager === 'bun' }" @click="installPackageManager = 'bun'">bun</button>
|
|
19
|
+
</div>
|
|
20
20
|
</div>
|
|
21
|
-
<div class="docs-toolbar-card
|
|
21
|
+
<div class="docs-toolbar-card">
|
|
22
22
|
<label class="form-label">{{ t('common.mirror') }}</label>
|
|
23
23
|
<div class="install-action-tabs">
|
|
24
24
|
<button type="button" class="btn-mini" :class="{ active: installRegistryPreset === 'npmmirror' }" @click="setInstallRegistryPreset('npmmirror')">npmmirror</button>
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
<div class="form-hint install-registry-hint" v-if="installRegistryPreview">{{ t('docs.registryHintPrefix') }} --registry={{ installRegistryPreview }}</div>
|
|
30
30
|
<div class="form-hint install-registry-hint" v-else-if="installRegistryPreset === 'custom'">{{ t('docs.registryHintCustom') }}</div>
|
|
31
31
|
</div>
|
|
32
|
-
<div class="docs-toolbar-card
|
|
32
|
+
<div class="docs-toolbar-card">
|
|
33
33
|
<label class="form-label">{{ t('common.action') }}</label>
|
|
34
34
|
<div class="install-action-tabs">
|
|
35
35
|
<button type="button" class="btn-mini" :class="{ active: installCommandAction === 'install' }" @click="setInstallCommandAction('install')">{{ t('common.install') }}</button>
|
|
@@ -39,20 +39,6 @@
|
|
|
39
39
|
</div>
|
|
40
40
|
</div>
|
|
41
41
|
|
|
42
|
-
<div class="docs-summary-strip">
|
|
43
|
-
<div class="docs-summary-item">
|
|
44
|
-
<span class="docs-summary-label">{{ t('common.targets') }}</span>
|
|
45
|
-
<strong class="docs-summary-value">{{ installTargetCards.length }}</strong>
|
|
46
|
-
</div>
|
|
47
|
-
<div class="docs-summary-item">
|
|
48
|
-
<span class="docs-summary-label">{{ t('common.currentPm') }}</span>
|
|
49
|
-
<strong class="docs-summary-value">{{ String(installPackageManager || 'npm').toUpperCase() }}</strong>
|
|
50
|
-
</div>
|
|
51
|
-
<div class="docs-summary-item docs-summary-item-wide">
|
|
52
|
-
<span class="docs-summary-label">{{ t('common.registry') }}</span>
|
|
53
|
-
<strong class="docs-summary-value">{{ installRegistryPreview || 'npmmirror' }}</strong>
|
|
54
|
-
</div>
|
|
55
|
-
</div>
|
|
56
42
|
</div>
|
|
57
43
|
|
|
58
44
|
<div class="selector-section">
|
|
@@ -25,6 +25,14 @@
|
|
|
25
25
|
@click="setSkillsTargetApp('claude', { silent: false })">
|
|
26
26
|
Claude Code
|
|
27
27
|
</button>
|
|
28
|
+
<button
|
|
29
|
+
type="button"
|
|
30
|
+
:class="['skills-target-chip', { active: skillsTargetApp === 'pi' }]"
|
|
31
|
+
:aria-pressed="skillsTargetApp === 'pi'"
|
|
32
|
+
:disabled="loading || !!initError || skillsMarketBusy"
|
|
33
|
+
@click="setSkillsTargetApp('pi', { silent: false })">
|
|
34
|
+
Pi
|
|
35
|
+
</button>
|
|
28
36
|
</div>
|
|
29
37
|
</div>
|
|
30
38
|
<div class="skills-header-actions">
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
id="panel-plugins"
|
|
5
5
|
role="tabpanel"
|
|
6
6
|
aria-labelledby="tab-plugins">
|
|
7
|
-
<div class="plugins-layout">
|
|
8
|
-
<aside class="plugins-sidebar" :aria-label="t('plugins.sidebar.ariaList')">
|
|
7
|
+
<div :class="['plugins-layout', { 'plugins-layout-single': !pluginsSidebarVisible }]">
|
|
8
|
+
<aside v-if="pluginsSidebarVisible" class="plugins-sidebar" :aria-label="t('plugins.sidebar.ariaList')">
|
|
9
9
|
<div class="selector-header plugins-sidebar-header">
|
|
10
10
|
<div>
|
|
11
11
|
<span class="selector-title">{{ t('plugins.sidebar.title') }}</span>
|
|
@@ -44,8 +44,15 @@
|
|
|
44
44
|
</div>
|
|
45
45
|
<div v-else-if="pluginsActiveId === 'prompt-templates'" class="plugins-panel">
|
|
46
46
|
<div class="plugins-panel-head">
|
|
47
|
-
<div
|
|
48
|
-
|
|
47
|
+
<div>
|
|
48
|
+
<div class="plugins-panel-title">{{ t('plugins.promptTemplates.title') }}</div>
|
|
49
|
+
<div v-if="pluginsActiveAttribution" class="plugins-panel-note">{{ pluginsActiveAttribution }}</div>
|
|
50
|
+
</div>
|
|
51
|
+
<div v-if="!pluginsSidebarVisible" class="settings-tab-actions">
|
|
52
|
+
<button type="button" class="btn-tool btn-tool-compact" @click="loadPluginsOverview({ forceRefresh: true, silent: false })" :disabled="loading || !!initError || pluginsLoading">
|
|
53
|
+
{{ pluginsLoading ? t('plugins.refreshing') : t('plugins.refresh') }}
|
|
54
|
+
</button>
|
|
55
|
+
</div>
|
|
49
56
|
</div>
|
|
50
57
|
|
|
51
58
|
<div class="prompt-templates-modebar" role="tablist" :aria-label="t('plugins.promptTemplates.mode.aria')">
|
|
@@ -65,14 +72,7 @@
|
|
|
65
72
|
|
|
66
73
|
<div v-if="promptTemplatesMode === 'compose'" class="prompt-compose">
|
|
67
74
|
<div class="prompt-compose-workspace">
|
|
68
|
-
<div class="prompt-compose-
|
|
69
|
-
<div class="prompt-compose-selected-title">{{ (promptComposerActiveTemplate && promptComposerActiveTemplate.name) ? promptComposerActiveTemplate.name : t('plugins.promptTemplates.compose.chooseTemplate') }}</div>
|
|
70
|
-
<div class="prompt-compose-selected-meta">{{ (promptComposerActiveTemplate && promptComposerActiveTemplate.description) ? promptComposerActiveTemplate.description : t('plugins.promptTemplates.compose.chooseTemplateHint') }}</div>
|
|
71
|
-
<div v-if="promptComposerActiveTemplate && promptComposerActiveTemplate.isBuiltin && (promptComposerActiveTemplate.createdBy || (promptComposerActiveTemplate.maintainers && promptComposerActiveTemplate.maintainers.length))" class="plugins-panel-note">
|
|
72
|
-
{{ t('plugins.meta.attribution', { createdBy: promptComposerActiveTemplate.createdBy || '', maintainers: (promptComposerActiveTemplate.maintainers || []).join(', ') }) }}
|
|
73
|
-
</div>
|
|
74
|
-
</div>
|
|
75
|
-
|
|
75
|
+
<div class="prompt-compose-main">
|
|
76
76
|
<div class="prompt-compose-form">
|
|
77
77
|
<label class="form-label">{{ t('plugins.promptTemplates.compose.selectTemplate') }}</label>
|
|
78
78
|
<select
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
</select>
|
|
87
87
|
|
|
88
88
|
<div v-if="!promptComposerActiveTemplate" class="plugins-panel-note">{{ t('plugins.promptTemplates.compose.empty') }}</div>
|
|
89
|
-
<div v-else-if="
|
|
89
|
+
<div v-else-if="promptComposerActiveTemplate.description" class="plugins-panel-note">{{ promptComposerActiveTemplate.description }}</div>
|
|
90
90
|
<div v-if="promptComposerActiveTemplate && !promptComposerActiveTemplate.isBuiltin" class="prompt-compose-actions">
|
|
91
91
|
<button
|
|
92
92
|
type="button"
|
|
@@ -121,6 +121,7 @@
|
|
|
121
121
|
</div>
|
|
122
122
|
</div>
|
|
123
123
|
|
|
124
|
+
</div>
|
|
124
125
|
<div class="prompt-preview-block prompt-compose-preview">
|
|
125
126
|
<div class="prompt-vars-head">
|
|
126
127
|
<div>
|
|
@@ -50,30 +50,29 @@
|
|
|
50
50
|
<span class="usage-spinner" aria-hidden="true"></span>
|
|
51
51
|
</div>
|
|
52
52
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
<
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
<span class="usage-hero-active-stat">{{ usageCurrentSessionStats.totalDurationLabel }} total</span>
|
|
61
|
-
</div>
|
|
53
|
+
<div v-if="usageCurrentSessionStats" class="usage-active-strip" role="status">
|
|
54
|
+
<span class="usage-hero-active-dot"></span>
|
|
55
|
+
<span class="usage-hero-active-label">{{ usageCurrentSessionStats.label }}</span>
|
|
56
|
+
<span class="usage-hero-active-stat">{{ usageCurrentSessionStats.tokenLabel }} tokens</span>
|
|
57
|
+
<span class="usage-hero-active-stat">{{ usageCurrentSessionStats.apiDurationLabel }} API</span>
|
|
58
|
+
<span class="usage-hero-active-stat">{{ usageCurrentSessionStats.totalDurationLabel }} total</span>
|
|
59
|
+
</div>
|
|
62
60
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
</span>
|
|
70
|
-
</div>
|
|
61
|
+
<!-- KPI 指标卡片行 -->
|
|
62
|
+
<div class="usage-kpi-grid">
|
|
63
|
+
<div v-for="card in usageKpiCards" :key="card.key" class="usage-kpi-card">
|
|
64
|
+
<div class="usage-kpi-label">{{ card.label }}</div>
|
|
65
|
+
<div class="usage-kpi-value" :title="card.title || card.value">{{ card.value }}</div>
|
|
66
|
+
<span v-if="card.delta" :class="['usage-hero-delta', card.deltaClass]">{{ card.delta }}</span>
|
|
71
67
|
</div>
|
|
72
68
|
</div>
|
|
73
69
|
|
|
74
70
|
<!-- 波浪图 -->
|
|
75
71
|
<section v-if="sessionUsageWave.points && sessionUsageWave.points.length" class="usage-wave-section">
|
|
76
|
-
<div class="usage-card-title
|
|
72
|
+
<div class="usage-card-title usage-wave-title">
|
|
73
|
+
<span>{{ t('usage.daily.title') }}</span>
|
|
74
|
+
<span v-if="usageWaveHeaderSummary" class="usage-wave-summary">{{ usageWaveHeaderSummary }}</span>
|
|
75
|
+
</div>
|
|
77
76
|
<div class="usage-wave-container">
|
|
78
77
|
<div class="usage-wave-yaxis">
|
|
79
78
|
<span v-for="tick in sessionUsageWave.yTicks" :key="tick.value"
|
|
@@ -150,13 +149,14 @@
|
|
|
150
149
|
<!-- Top Sessions -->
|
|
151
150
|
<section class="usage-card">
|
|
152
151
|
<div class="usage-card-title">{{ t('usage.sessions.topDensity') }}</div>
|
|
153
|
-
<div v-if="!
|
|
152
|
+
<div v-if="!usageRankedLists.topSessions.length" class="usage-list-value">{{ t('usage.sessions.empty') }}</div>
|
|
154
153
|
<div v-else class="usage-list-compact">
|
|
155
|
-
<div v-for="item in
|
|
154
|
+
<div v-for="item in usageRankedLists.topSessions" :key="item.key + '-dense'" class="usage-list-compact-item" @click="selectSession(item)" :title="item.title">
|
|
156
155
|
<span class="usage-list-bullet">·</span>
|
|
157
156
|
<div class="usage-list-compact-content">
|
|
158
157
|
<div class="usage-list-title">{{ item.title }}</div>
|
|
159
158
|
<div class="usage-list-meta">{{ item.messageCount }} msgs · {{ item.sourceLabel }} · {{ item.updatedAtLabel }}</div>
|
|
159
|
+
<div class="usage-list-bar" aria-hidden="true"><span class="usage-list-bar-fill" :style="{ width: item.barPercent + '%' }"></span></div>
|
|
160
160
|
</div>
|
|
161
161
|
</div>
|
|
162
162
|
</div>
|
|
@@ -165,13 +165,14 @@
|
|
|
165
165
|
<!-- Recent Activity -->
|
|
166
166
|
<section class="usage-card">
|
|
167
167
|
<div class="usage-card-title">{{ t('usage.recent.title') }}</div>
|
|
168
|
-
<div v-if="!
|
|
168
|
+
<div v-if="!usageRankedLists.recentSessions.length" class="usage-list-value">{{ t('usage.sessions.empty') }}</div>
|
|
169
169
|
<div v-else class="usage-list-compact">
|
|
170
|
-
<div v-for="item in
|
|
170
|
+
<div v-for="item in usageRankedLists.recentSessions" :key="item.key" class="usage-list-compact-item" @click="selectSession(item)">
|
|
171
171
|
<span class="usage-list-bullet">·</span>
|
|
172
172
|
<div class="usage-list-compact-content">
|
|
173
173
|
<div class="usage-list-title">{{ item.title }}</div>
|
|
174
174
|
<div class="usage-list-meta">{{ item.messageCount }} msgs · {{ item.sourceLabel }} · {{ item.updatedAtLabel }}</div>
|
|
175
|
+
<div class="usage-list-bar" aria-hidden="true"><span class="usage-list-bar-fill" :style="{ width: item.barPercent + '%' }"></span></div>
|
|
175
176
|
</div>
|
|
176
177
|
</div>
|
|
177
178
|
</div>
|
|
@@ -180,14 +181,15 @@
|
|
|
180
181
|
<!-- Top Paths -->
|
|
181
182
|
<section class="usage-paths-section">
|
|
182
183
|
<div class="usage-card-title">{{ t('usage.paths.title') }}</div>
|
|
183
|
-
<div v-if="!
|
|
184
|
+
<div v-if="!usageRankedLists.topPaths.length" class="usage-list-value">{{ t('usage.paths.empty') }}</div>
|
|
184
185
|
<div v-else class="usage-list-paths">
|
|
185
|
-
<div v-for="(item, index) in
|
|
186
|
+
<div v-for="(item, index) in usageRankedLists.topPaths" :key="item.path" class="usage-list-path-row">
|
|
186
187
|
<span class="usage-list-path-rank">{{ index + 1 }}</span>
|
|
187
188
|
<div class="usage-list-path-content">
|
|
188
189
|
<div class="usage-list-path" :title="item.path">{{ item.path }}</div>
|
|
189
|
-
<div class="usage-list-
|
|
190
|
+
<div class="usage-list-bar" aria-hidden="true"><span class="usage-list-bar-fill" :style="{ width: item.barPercent + '%' }"></span></div>
|
|
190
191
|
</div>
|
|
192
|
+
<div class="usage-list-path-stat">{{ item.count }}</div>
|
|
191
193
|
</div>
|
|
192
194
|
</div>
|
|
193
195
|
</section>
|