codexmate 0.0.20 → 0.0.21

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.
Files changed (102) hide show
  1. package/README.en.md +349 -259
  2. package/README.md +284 -252
  3. package/cli/agents-files.js +162 -0
  4. package/cli/archive-helpers.js +446 -0
  5. package/cli/auth-profiles.js +359 -0
  6. package/cli/builtin-proxy.js +580 -0
  7. package/cli/claude-proxy.js +998 -0
  8. package/cli/config-bootstrap.js +384 -0
  9. package/cli/config-health.js +338 -338
  10. package/cli/openclaw-config.js +629 -0
  11. package/cli/skills.js +1141 -0
  12. package/cli/zip-commands.js +510 -0
  13. package/cli.js +13101 -13497
  14. package/lib/cli-file-utils.js +151 -151
  15. package/lib/cli-models-utils.js +419 -311
  16. package/lib/cli-network-utils.js +164 -164
  17. package/lib/cli-path-utils.js +69 -0
  18. package/lib/cli-session-utils.js +121 -121
  19. package/lib/cli-sessions.js +386 -0
  20. package/lib/cli-utils.js +155 -155
  21. package/lib/download-artifacts.js +77 -0
  22. package/lib/mcp-stdio.js +440 -440
  23. package/lib/task-orchestrator.js +869 -0
  24. package/lib/text-diff.js +303 -303
  25. package/lib/workflow-engine.js +340 -340
  26. package/package.json +74 -70
  27. package/res/json5.min.js +1 -1
  28. package/res/vue.global.prod.js +13 -0
  29. package/web-ui/app.js +530 -397
  30. package/web-ui/index.html +33 -30
  31. package/web-ui/logic.agents-diff.mjs +386 -386
  32. package/web-ui/logic.claude.mjs +168 -108
  33. package/web-ui/logic.mjs +5 -5
  34. package/web-ui/logic.runtime.mjs +124 -124
  35. package/web-ui/logic.sessions.mjs +581 -263
  36. package/web-ui/modules/api.mjs +90 -69
  37. package/web-ui/modules/app.computed.dashboard.mjs +113 -113
  38. package/web-ui/modules/app.computed.index.mjs +15 -13
  39. package/web-ui/modules/app.computed.main-tabs.mjs +195 -0
  40. package/web-ui/modules/app.computed.session.mjs +507 -141
  41. package/web-ui/modules/app.constants.mjs +15 -15
  42. package/web-ui/modules/app.methods.agents.mjs +493 -493
  43. package/web-ui/modules/app.methods.claude-config.mjs +174 -174
  44. package/web-ui/modules/app.methods.codex-config.mjs +640 -640
  45. package/web-ui/modules/app.methods.index.mjs +88 -86
  46. package/web-ui/modules/app.methods.install.mjs +149 -157
  47. package/web-ui/modules/app.methods.navigation.mjs +619 -478
  48. package/web-ui/modules/app.methods.openclaw-core.mjs +814 -514
  49. package/web-ui/modules/app.methods.openclaw-editing.mjs +372 -337
  50. package/web-ui/modules/app.methods.openclaw-persist.mjs +369 -251
  51. package/web-ui/modules/app.methods.providers.mjs +363 -265
  52. package/web-ui/modules/app.methods.runtime.mjs +323 -323
  53. package/web-ui/modules/app.methods.session-actions.mjs +520 -457
  54. package/web-ui/modules/app.methods.session-browser.mjs +626 -435
  55. package/web-ui/modules/app.methods.session-timeline.mjs +448 -441
  56. package/web-ui/modules/app.methods.session-trash.mjs +422 -419
  57. package/web-ui/modules/app.methods.startup-claude.mjs +412 -406
  58. package/web-ui/modules/app.methods.task-orchestration.mjs +471 -0
  59. package/web-ui/modules/config-mode.computed.mjs +126 -124
  60. package/web-ui/modules/skills.computed.mjs +107 -107
  61. package/web-ui/modules/skills.methods.mjs +481 -481
  62. package/web-ui/partials/index/layout-footer.html +13 -69
  63. package/web-ui/partials/index/layout-header.html +402 -337
  64. package/web-ui/partials/index/modal-config-template-agents.html +125 -125
  65. package/web-ui/partials/index/modal-confirm-toast.html +32 -32
  66. package/web-ui/partials/index/modal-health-check.html +72 -72
  67. package/web-ui/partials/index/modal-openclaw-config.html +280 -275
  68. package/web-ui/partials/index/modal-skills.html +184 -184
  69. package/web-ui/partials/index/modals-basic.html +156 -196
  70. package/web-ui/partials/index/panel-config-claude.html +126 -100
  71. package/web-ui/partials/index/panel-config-codex.html +237 -237
  72. package/web-ui/partials/index/panel-config-openclaw.html +78 -84
  73. package/web-ui/partials/index/panel-docs.html +130 -0
  74. package/web-ui/partials/index/panel-market.html +174 -174
  75. package/web-ui/partials/index/panel-orchestration.html +397 -0
  76. package/web-ui/partials/index/panel-sessions.html +292 -387
  77. package/web-ui/partials/index/panel-settings.html +190 -166
  78. package/web-ui/partials/index/panel-usage.html +213 -0
  79. package/web-ui/session-helpers.mjs +559 -362
  80. package/web-ui/source-bundle.cjs +233 -233
  81. package/web-ui/styles/base-theme.css +271 -373
  82. package/web-ui/styles/controls-forms.css +360 -354
  83. package/web-ui/styles/docs-panel.css +182 -0
  84. package/web-ui/styles/feedback.css +108 -108
  85. package/web-ui/styles/health-check-dialog.css +144 -144
  86. package/web-ui/styles/layout-shell.css +376 -330
  87. package/web-ui/styles/modals-core.css +464 -449
  88. package/web-ui/styles/navigation-panels.css +348 -381
  89. package/web-ui/styles/openclaw-structured.css +266 -266
  90. package/web-ui/styles/responsive.css +450 -416
  91. package/web-ui/styles/sessions-list.css +400 -414
  92. package/web-ui/styles/sessions-preview.css +411 -405
  93. package/web-ui/styles/sessions-toolbar-trash.css +243 -243
  94. package/web-ui/styles/sessions-usage.css +628 -276
  95. package/web-ui/styles/skills-list.css +296 -298
  96. package/web-ui/styles/skills-market.css +335 -335
  97. package/web-ui/styles/task-orchestration.css +776 -0
  98. package/web-ui/styles/titles-cards.css +408 -407
  99. package/web-ui/styles.css +18 -16
  100. package/web-ui.html +17 -17
  101. package/res/screenshot.png +0 -0
  102. package/res/vue.global.js +0 -18552
package/web-ui/partials/index/panel-settings.html CHANGED
@@ -1,166 +1,190 @@
1
- <!-- 设置面板 -->
2
- <div
3
- v-show="mainTab === 'settings'"
4
- class="mode-content"
5
- id="panel-settings"
6
- role="tabpanel"
7
- :aria-labelledby="'tab-settings'">
8
- <div class="config-subtabs settings-subtabs" role="tablist" aria-label="设置子标签">
9
- <button
10
- id="settings-tab-backup"
11
- role="tab"
12
- aria-controls="settings-panel-backup"
13
- :aria-selected="settingsTab === 'backup'"
14
- :tabindex="settingsTab === 'backup' ? 0 : -1"
15
- :class="['config-subtab', { active: settingsTab === 'backup' }]"
16
- @click="onSettingsTabClick('backup')">
17
- 备份与导入
18
- </button>
19
- <button
20
- id="settings-tab-trash"
21
- role="tab"
22
- aria-controls="settings-panel-trash"
23
- :aria-selected="settingsTab === 'trash'"
24
- :tabindex="settingsTab === 'trash' ? 0 : -1"
25
- :class="['config-subtab', { active: settingsTab === 'trash' }]"
26
- @click="onSettingsTabClick('trash')">
27
- 回收站
28
- <span class="settings-tab-badge">{{ sessionTrashCount }}</span>
29
- </button>
30
- <button
31
- id="settings-tab-device"
32
- role="tab"
33
- aria-controls="settings-panel-device"
34
- :aria-selected="settingsTab === 'device'"
35
- :tabindex="settingsTab === 'device' ? 0 : -1"
36
- :class="['config-subtab', { active: settingsTab === 'device' }]"
37
- @click="onSettingsTabClick('device')">
38
- 设备
39
- </button>
40
- </div>
41
-
42
- <div
43
- v-show="settingsTab === 'backup'"
44
- id="settings-panel-backup"
45
- role="tabpanel"
46
- aria-labelledby="settings-tab-backup">
47
- <div class="selector-section">
48
- <div class="selector-header">
49
- <span class="selector-title">Claude 配置</span>
50
- </div>
51
- <button class="btn-tool" @click="downloadClaudeDirectory" :disabled="claudeDownloadLoading">
52
- {{ claudeDownloadLoading ? ('备份中 ' + claudeDownloadProgress + '%') : '一键备份 ~/.claude' }}
53
- </button>
54
- <button class="btn-tool" @click="triggerClaudeImport" :disabled="claudeImportLoading">
55
- {{ claudeImportLoading ? '导入中...' : '导入 ~/.claude 备份' }}
56
- </button>
57
- <input
58
- ref="claudeImportInput"
59
- class="sr-only"
60
- type="file"
61
- accept=".zip"
62
- @change="handleClaudeImportChange">
63
- </div>
64
- <div class="selector-section">
65
- <div class="selector-header">
66
- <span class="selector-title">Codex 配置</span>
67
- </div>
68
- <button class="btn-tool" @click="downloadCodexDirectory" :disabled="codexDownloadLoading">
69
- {{ codexDownloadLoading ? ('备份中 ' + codexDownloadProgress + '%') : '一键备份 ~/.codex' }}
70
- </button>
71
- <button class="btn-tool" @click="triggerCodexImport" :disabled="codexImportLoading">
72
- {{ codexImportLoading ? '导入中...' : '导入 ~/.codex 备份' }}
73
- </button>
74
- <input
75
- ref="codexImportInput"
76
- class="sr-only"
77
- type="file"
78
- accept=".zip"
79
- @change="handleCodexImportChange">
80
- </div>
81
- </div>
82
-
83
- <div
84
- v-show="settingsTab === 'trash'"
85
- id="settings-panel-trash"
86
- role="tabpanel"
87
- aria-labelledby="settings-tab-trash">
88
- <div class="selector-section">
89
- <div class="selector-header settings-tab-header">
90
- <div class="settings-tab-actions trash-header-actions">
91
- <button class="btn-tool btn-tool-compact" @click="loadSessionTrash({ forceRefresh: true })" :disabled="sessionTrashLoading || sessionTrashClearing">
92
- {{ sessionTrashLoading ? '刷新中...' : '刷新列表' }}
93
- </button>
94
- <button class="btn-tool btn-tool-compact" @click="clearSessionTrash" :disabled="sessionTrashClearing || sessionTrashLoading || !(Number(sessionTrashCount) > 0)">
95
- {{ sessionTrashClearing ? '清空中...' : '清空回收站' }}
96
- </button>
97
- </div>
98
- </div>
99
-
100
- <div v-if="getSessionTrashViewState() === 'loading'" class="session-empty">
101
- 正在加载回收站...
102
- </div>
103
- <div v-else-if="getSessionTrashViewState() === 'empty'" class="session-empty">
104
- 回收站为空
105
- </div>
106
- <div v-else-if="getSessionTrashViewState() === 'retry'" class="session-empty">
107
- 回收站列表加载失败，请刷新重试
108
- </div>
109
- <div v-else class="trash-list">
110
- <div v-for="item in visibleSessionTrashItems" :key="item.trashId" class="trash-item session-item session-card">
111
- <div class="trash-item-header session-item-header">
112
- <div class="trash-item-main">
113
- <div class="trash-item-mainline">
114
- <div class="trash-item-title">{{ item.title || item.sessionId }}</div>
115
- <span class="session-count-badge">{{ item.messageCount ?? 0 }}</span>
116
- </div>
117
- <div class="trash-item-meta session-item-meta">
118
- <span class="session-source">{{ item.sourceLabel }}</span>
119
- </div>
120
- </div>
121
- <div class="trash-item-side">
122
- <div class="trash-item-actions session-item-actions">
123
- <button class="btn-mini" @click="restoreSessionTrash(item)" :disabled="sessionTrashLoading || sessionTrashClearing || isSessionTrashActionBusy(item)">
124
- {{ sessionTrashRestoring[getSessionTrashActionKey(item)] ? '恢复中...' : '恢复' }}
125
- </button>
126
- <button class="btn-mini delete" @click="purgeSessionTrash(item)" :disabled="sessionTrashLoading || sessionTrashClearing || isSessionTrashActionBusy(item)">
127
- {{ sessionTrashPurging[getSessionTrashActionKey(item)] ? '删除中...' : '彻底删除' }}
128
- </button>
129
- </div>
130
- <div class="trash-item-time session-item-time">{{ item.deletedAt || item.updatedAt || 'unknown time' }}</div>
131
- </div>
132
- </div>
133
- <div v-if="item.cwd" class="trash-item-path session-item-sub session-item-wrap">
134
- <span class="trash-item-label">工作区</span>
135
- <span>{{ item.cwd }}</span>
136
- </div>
137
- <div class="trash-item-path session-item-sub session-item-wrap">
138
- <span class="trash-item-label">原文件</span>
139
- <span>{{ item.originalFilePath }}</span>
140
- </div>
141
- </div>
142
- <div v-if="sessionTrashHasMoreItems" class="trash-list-footer">
143
- <button class="btn-tool btn-tool-compact" @click="loadMoreSessionTrashItems" :disabled="sessionTrashLoading || sessionTrashClearing">
144
- 加载更多（剩余 {{ sessionTrashHiddenCount }} 项）
145
- </button>
146
- </div>
147
- </div>
148
- </div>
149
- </div>
150
-
151
- <div
152
- v-show="settingsTab === 'device'"
153
- id="settings-panel-device"
154
- role="tabpanel"
155
- aria-labelledby="settings-tab-device">
156
- <div class="selector-section">
157
- <div class="selector-header">
158
- <span class="selector-title">配置重置</span>
159
- </div>
160
- <div class="config-template-hint">先备份 config.toml，再写默认配置。</div>
161
- <button class="btn-tool" @click="resetConfig" :disabled="resetConfigLoading || loading || !!initError">
162
- {{ resetConfigLoading ? '重装中...' : '重装配置' }}
163
- </button>
164
- </div>
165
- </div>
166
- </div>
1
+ <!-- 设置面板 -->
2
+ <div
3
+ v-show="mainTab === 'settings'"
4
+ class="mode-content"
5
+ id="panel-settings"
6
+ role="tabpanel"
7
+ :aria-labelledby="'tab-settings'">
8
+ <div class="config-subtabs settings-subtabs" role="tablist" aria-label="设置子标签">
9
+ <button
10
+ id="settings-tab-backup"
11
+ role="tab"
12
+ aria-controls="settings-panel-backup"
13
+ :aria-selected="settingsTab === 'backup'"
14
+ :tabindex="settingsTab === 'backup' ? 0 : -1"
15
+ :class="['config-subtab', { active: settingsTab === 'backup' }]"
16
+ @click="onSettingsTabClick('backup')">
17
+ 备份与导入
18
+ </button>
19
+ <button
20
+ id="settings-tab-trash"
21
+ role="tab"
22
+ aria-controls="settings-panel-trash"
23
+ :aria-selected="settingsTab === 'trash'"
24
+ :tabindex="settingsTab === 'trash' ? 0 : -1"
25
+ :class="['config-subtab', { active: settingsTab === 'trash' }]"
26
+ @click="onSettingsTabClick('trash')">
27
+ 回收站
28
+ <span class="settings-tab-badge">{{ sessionTrashCount }}</span>
29
+ </button>
30
+ <button
31
+ id="settings-tab-device"
32
+ role="tab"
33
+ aria-controls="settings-panel-device"
34
+ :aria-selected="settingsTab === 'device'"
35
+ :tabindex="settingsTab === 'device' ? 0 : -1"
36
+ :class="['config-subtab', { active: settingsTab === 'device' }]"
37
+ @click="onSettingsTabClick('device')">
38
+ 设备
39
+ </button>
40
+ </div>
41
+
42
+ <div
43
+ v-show="settingsTab === 'backup'"
44
+ id="settings-panel-backup"
45
+ role="tabpanel"
46
+ aria-labelledby="settings-tab-backup">
47
+ <div class="selector-section">
48
+ <div class="selector-header">
49
+ <span class="selector-title">分享命令前缀</span>
50
+ </div>
51
+ <select class="model-select" :value="shareCommandPrefix" @change="setShareCommandPrefix($event.target.value)">
52
+ <option value="npm start">npm start</option>
53
+ <option value="codexmate">codexmate</option>
54
+ </select>
55
+ <div class="config-template-hint">
56
+ 默认走项目内 <code>npm start</code>，也可切到全局 <code>codexmate</code>。该设置会缓存到浏览器本地。
57
+ </div>
58
+ </div>
59
+ <div class="selector-section">
60
+ <div class="selector-header">
61
+ <span class="selector-title">Claude 配置</span>
62
+ </div>
63
+ <button class="btn-tool" @click="downloadClaudeDirectory" :disabled="claudeDownloadLoading">
64
+ {{ claudeDownloadLoading ? ('备份中 ' + claudeDownloadProgress + '%') : '一键备份 ~/.claude' }}
65
+ </button>
66
+ <button class="btn-tool" @click="triggerClaudeImport" :disabled="claudeImportLoading">
67
+ {{ claudeImportLoading ? '导入中...' : '导入 ~/.claude 备份' }}
68
+ </button>
69
+ <input
70
+ ref="claudeImportInput"
71
+ class="sr-only"
72
+ type="file"
73
+ accept=".zip"
74
+ @change="handleClaudeImportChange">
75
+ </div>
76
+ <div class="selector-section">
77
+ <div class="selector-header">
78
+ <span class="selector-title">Codex 配置</span>
79
+ </div>
80
+ <button class="btn-tool" @click="downloadCodexDirectory" :disabled="codexDownloadLoading">
81
+ {{ codexDownloadLoading ? ('备份中 ' + codexDownloadProgress + '%') : '一键备份 ~/.codex' }}
82
+ </button>
83
+ <button class="btn-tool" @click="triggerCodexImport" :disabled="codexImportLoading">
84
+ {{ codexImportLoading ? '导入中...' : '导入 ~/.codex 备份' }}
85
+ </button>
86
+ <input
87
+ ref="codexImportInput"
88
+ class="sr-only"
89
+ type="file"
90
+ accept=".zip"
91
+ @change="handleCodexImportChange">
92
+ </div>
93
+ </div>
94
+
95
+ <div
96
+ v-show="settingsTab === 'trash'"
97
+ id="settings-panel-trash"
98
+ role="tabpanel"
99
+ aria-labelledby="settings-tab-trash">
100
+ <div class="selector-section">
101
+ <div class="selector-header">
102
+ <span class="selector-title">会话删除行为</span>
103
+ </div>
104
+ <label class="health-remote-toggle">
105
+ <input type="checkbox" :checked="sessionTrashEnabled" @change="setSessionTrashEnabled($event.target.checked)">
106
+ <span>删除会话时先移入回收站</span>
107
+ </label>
108
+ <div class="config-template-hint">
109
+ 默认开启。关闭后，会话浏览里的删除会直接永久删除，不再进入回收站。
110
+ </div>
111
+ </div>
112
+ <div class="selector-section">
113
+ <div class="selector-header settings-tab-header">
114
+ <div class="settings-tab-actions trash-header-actions">
115
+ <button class="btn-tool btn-tool-compact" @click="loadSessionTrash({ forceRefresh: true })" :disabled="sessionTrashLoading || sessionTrashClearing">
116
+ {{ sessionTrashLoading ? '刷新中...' : '刷新列表' }}
117
+ </button>
118
+ <button class="btn-tool btn-tool-compact" @click="clearSessionTrash" :disabled="sessionTrashClearing || sessionTrashLoading || !(Number(sessionTrashCount) > 0)">
119
+ {{ sessionTrashClearing ? '清空中...' : '清空回收站' }}
120
+ </button>
121
+ </div>
122
+ </div>
123
+
124
+ <div v-if="getSessionTrashViewState() === 'loading'" class="session-empty">
125
+ 正在加载回收站...
126
+ </div>
127
+ <div v-else-if="getSessionTrashViewState() === 'empty'" class="session-empty">
128
+ 回收站为空
129
+ </div>
130
+ <div v-else-if="getSessionTrashViewState() === 'retry'" class="session-empty">
131
+ 回收站列表加载失败，请刷新重试
132
+ </div>
133
+ <div v-else class="trash-list">
134
+ <div v-for="item in visibleSessionTrashItems" :key="item.trashId" class="trash-item session-item session-card">
135
+ <div class="trash-item-header session-item-header">
136
+ <div class="trash-item-main">
137
+ <div class="trash-item-mainline">
138
+ <div class="trash-item-title">{{ item.title || item.sessionId }}</div>
139
+ <span class="session-count-badge">{{ item.messageCount ?? 0 }}</span>
140
+ </div>
141
+ <div class="trash-item-meta session-item-meta">
142
+ <span class="session-source">{{ item.sourceLabel }}</span>
143
+ </div>
144
+ </div>
145
+ <div class="trash-item-side">
146
+ <div class="trash-item-actions session-item-actions">
147
+ <button class="btn-mini" @click="restoreSessionTrash(item)" :disabled="sessionTrashLoading || sessionTrashClearing || isSessionTrashActionBusy(item)">
148
+ {{ sessionTrashRestoring[getSessionTrashActionKey(item)] ? '恢复中...' : '恢复' }}
149
+ </button>
150
+ <button class="btn-mini delete" @click="purgeSessionTrash(item)" :disabled="sessionTrashLoading || sessionTrashClearing || isSessionTrashActionBusy(item)">
151
+ {{ sessionTrashPurging[getSessionTrashActionKey(item)] ? '删除中...' : '彻底删除' }}
152
+ </button>
153
+ </div>
154
+ <div class="trash-item-time session-item-time">{{ item.deletedAt || item.updatedAt || 'unknown time' }}</div>
155
+ </div>
156
+ </div>
157
+ <div v-if="item.cwd" class="trash-item-path session-item-sub session-item-wrap">
158
+ <span class="trash-item-label">工作区</span>
159
+ <span>{{ item.cwd }}</span>
160
+ </div>
161
+ <div class="trash-item-path session-item-sub session-item-wrap">
162
+ <span class="trash-item-label">原文件</span>
163
+ <span>{{ item.originalFilePath }}</span>
164
+ </div>
165
+ </div>
166
+ <div v-if="sessionTrashHasMoreItems" class="trash-list-footer">
167
+ <button class="btn-tool btn-tool-compact" @click="loadMoreSessionTrashItems" :disabled="sessionTrashLoading || sessionTrashClearing">
168
+ 加载更多（剩余 {{ sessionTrashHiddenCount }} 项）
169
+ </button>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </div>
174
+
175
+ <div
176
+ v-show="settingsTab === 'device'"
177
+ id="settings-panel-device"
178
+ role="tabpanel"
179
+ aria-labelledby="settings-tab-device">
180
+ <div class="selector-section">
181
+ <div class="selector-header">
182
+ <span class="selector-title">配置重置</span>
183
+ </div>
184
+ <div class="config-template-hint">先备份 config.toml，再写默认配置。</div>
185
+ <button class="btn-tool" @click="resetConfig" :disabled="resetConfigLoading || loading || !!initError">
186
+ {{ resetConfigLoading ? '重装中...' : '重装配置' }}
187
+ </button>
188
+ </div>
189
+ </div>
190
+ </div>
package/web-ui/partials/index/panel-usage.html ADDED
@@ -0,0 +1,213 @@
1
+ <!-- Usage 统计 -->
2
+ <div
3
+ v-show="mainTab === 'usage'"
4
+ class="mode-content"
5
+ id="panel-usage"
6
+ role="tabpanel"
7
+ :aria-labelledby="'tab-usage'">
8
+ <div class="usage-toolbar">
9
+ <div class="selector-header" style="padding:0;border:0;background:none;">
10
+ <span class="selector-title">Usage 概览</span>
11
+ </div>
12
+ <div class="usage-range-group" role="group" aria-label="Usage 时间范围">
13
+ <button type="button" class="usage-range-btn" :class="{ active: sessionsUsageTimeRange === '7d' }" @click="sessionsUsageTimeRange = '7d'">近 7 天</button>
14
+ <button type="button" class="usage-range-btn" :class="{ active: sessionsUsageTimeRange === '30d' }" @click="sessionsUsageTimeRange = '30d'">近 30 天</button>
15
+ <button type="button" class="usage-range-btn" :class="{ active: sessionsUsageTimeRange === 'all' }" @click="sessionsUsageTimeRange = 'all'">全部</button>
16
+ <button type="button" class="usage-range-btn" @click="loadSessionsUsage({ forceRefresh: true })" :disabled="sessionsUsageLoading">{{ sessionsUsageLoading ? '刷新中...' : '刷新统计' }}</button>
17
+ </div>
18
+ </div>
19
+
20
+ <div v-if="sessionsUsageLoading && !sessionsUsageList.length" class="session-empty">正在加载 Usage 统计...</div>
21
+ <div v-else-if="sessionsUsageError && !sessionsUsageList.length" class="usage-empty">{{ sessionsUsageError }}</div>
22
+ <div v-else-if="!sessionsUsageList.length" class="usage-empty">暂无可用于统计的会话数据</div>
23
+ <template v-else>
24
+ <div class="usage-summary-grid">
25
+ <div v-for="card in sessionUsageSummaryCards" :key="card.key" class="usage-summary-card">
26
+ <div class="usage-summary-label">{{ card.label }}</div>
27
+ <div class="usage-summary-value" :title="card.title || null">{{ card.value }}</div>
28
+ <div v-if="card.note" class="usage-summary-note">{{ card.note }}</div>
29
+ </div>
30
+ </div>
31
+
32
+ <div class="usage-chart-grid">
33
+ <section class="usage-card">
34
+ <div class="usage-card-title">会话趋势</div>
35
+ <div class="usage-legend">
36
+ <span><span class="usage-legend-dot" style="background:#4f8cff"></span>Codex</span>
37
+ <span><span class="usage-legend-dot" style="background:#b277ff"></span>Claude</span>
38
+ </div>
39
+ <div class="usage-bars">
40
+ <div v-for="bucket in sessionUsageCharts.buckets" :key="bucket.key" class="usage-bar-group">
41
+ <div class="usage-bar-stack">
42
+ <div class="usage-bar codex" :style="{ height: ((bucket.codex / Math.max(sessionUsageCharts.maxSessionBucket, 1)) * 100) + '%' }" :title="`Codex ${bucket.codex}`"></div>
43
+ <div class="usage-bar claude" :style="{ height: ((bucket.claude / Math.max(sessionUsageCharts.maxSessionBucket, 1)) * 100) + '%' }" :title="`Claude ${bucket.claude}`"></div>
44
+ </div>
45
+ <div class="usage-bar-label">{{ bucket.label }}</div>
46
+ </div>
47
+ </div>
48
+ </section>
49
+
50
+ <section class="usage-card">
51
+ <div class="usage-card-title">消息趋势</div>
52
+ <div class="usage-bars">
53
+ <div v-for="bucket in sessionUsageCharts.buckets" :key="bucket.key + '-messages'" class="usage-bar-group">
54
+ <div class="usage-bar-stack">
55
+ <div class="usage-bar codex" style="width:100%" :style="{ height: ((bucket.totalMessages / Math.max(sessionUsageCharts.maxMessageBucket, 1)) * 100) + '%' }" :title="`${bucket.totalMessages} messages`"></div>
56
+ </div>
57
+ <div class="usage-bar-label">{{ bucket.label }}</div>
58
+ </div>
59
+ </div>
60
+ </section>
61
+
62
+ <section class="usage-card">
63
+ <div class="usage-card-title">活跃时段</div>
64
+ <div class="usage-mini-bars">
65
+ <div v-for="item in sessionUsageCharts.hourActivity" :key="item.key" class="usage-mini-bar-group">
66
+ <div class="usage-mini-bar-track" :title="`${item.label}:00 · ${item.count} 次会话`">
67
+ <div class="usage-mini-bar-fill" :style="{ height: item.percent + '%' }"></div>
68
+ </div>
69
+ <div class="usage-mini-bar-label">{{ item.label }}</div>
70
+ </div>
71
+ </div>
72
+ </section>
73
+
74
+ <section class="usage-card">
75
+ <div class="usage-card-title">来源洞察</div>
76
+ <div class="usage-list">
77
+ <div v-for="item in sessionUsageCharts.sourceShare" :key="item.key" class="usage-list-row">
78
+ <div class="usage-list-label">{{ item.label }}</div>
79
+ <div class="usage-progress"><div class="usage-progress-fill" :style="{ width: item.percent + '%' }"></div></div>
80
+ <div class="usage-list-value">{{ item.percent }}%</div>
81
+ <div class="usage-list-subvalue">{{ item.value }} 会话 · {{ item.messageTotal }} 消息 · 均值 {{ item.avgMessages }}</div>
82
+ </div>
83
+ </div>
84
+ </section>
85
+
86
+ <section class="usage-card usage-card-models">
87
+ <div class="usage-card-head">
88
+ <div>
89
+ <div class="usage-card-title">使用模型</div>
90
+ <div class="usage-card-subtitle">只列真实落盘的 model 名。</div>
91
+ </div>
92
+ <div class="usage-card-kicker">已识别 {{ sessionUsageCharts.modelCoverage.modeledSessions }}/{{ sessionUsageCharts.modelCoverage.totalSessions }}</div>
93
+ </div>
94
+ <div class="usage-model-coverage-strip">
95
+ <div class="usage-model-coverage-item">
96
+ <strong>{{ sessionUsageCharts.usedModels.length }}</strong>
97
+ <span>模型数</span>
98
+ </div>
99
+ <div class="usage-model-coverage-item">
100
+ <strong>{{ sessionUsageCharts.modelCoverage.coveragePercent }}%</strong>
101
+ <span>会话覆盖率</span>
102
+ </div>
103
+ <div class="usage-model-coverage-item">
104
+ <strong>{{ sessionUsageCharts.modelCoverage.missingModelSessions }}</strong>
105
+ <span>缺 model</span>
106
+ </div>
107
+ </div>
108
+ <div v-if="!sessionUsageCharts.usedModels.length" class="usage-diagnostic-empty">
109
+ <div class="usage-diagnostic-title">当前范围没读到模型名</div>
110
+ <div class="usage-diagnostic-copy">
111
+ 已扫描 {{ sessionUsageCharts.modelCoverage.totalSessions }} 个会话，但原始记录里没有可识别的 model 字段。
112
+ </div>
113
+ <div v-if="sessionUsageCharts.modelCoverage.providerOnlySessions > 0" class="usage-diagnostic-meta">
114
+ 其中 {{ sessionUsageCharts.modelCoverage.providerOnlySessions }} 个旧会话只写了 provider。
115
+ </div>
116
+ </div>
117
+ <template v-else>
118
+ <div v-if="sessionUsageCharts.modelCoverage.providerOnlySessions > 0" class="usage-inline-note">
119
+ 另有 {{ sessionUsageCharts.modelCoverage.missingModelSessions }} 个会话没写模型名，未计入列表。
120
+ </div>
121
+ <div v-else-if="sessionUsageCharts.modelCoverage.missingModelSessions > 0" class="usage-inline-note">
122
+ 另有 {{ sessionUsageCharts.modelCoverage.missingModelSessions }} 个会话缺少 model，未计入列表。
123
+ </div>
124
+ <div v-if="sessionUsageCharts.modelCoverage.missingModelSessionsPreview.length" class="usage-diagnostic-list">
125
+ <div class="usage-diagnostic-list-title">仍缺模型名的会话</div>
126
+ <div
127
+ v-for="item in sessionUsageCharts.modelCoverage.missingModelSessionsPreview"
128
+ :key="item.key"
129
+ class="usage-diagnostic-row">
130
+ <div class="usage-diagnostic-row-main">
131
+ <div class="usage-diagnostic-row-title">{{ item.title }}</div>
132
+ <div class="usage-diagnostic-row-meta">
133
+ <span v-if="item.sessionId">{{ item.sessionId }}</span>
134
+ <span v-else-if="item.updatedAtLabel">{{ item.updatedAtLabel }}</span>
135
+ </div>
136
+ </div>
137
+ <div class="usage-diagnostic-row-side">
138
+ <span v-if="item.provider" class="usage-inline-tag">{{ item.provider }}</span>
139
+ <span class="usage-inline-stat">{{ item.reasonLabel }}</span>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ <div class="usage-model-list">
144
+ <div v-for="item in sessionUsageCharts.usedModels" :key="item.key" class="usage-model-chip" :title="`${item.model} · ${item.count} 会话 · ${item.messageTotal} 消息${item.tokenTotal ? ` · ${item.tokenTotal} token` : ''}`">
145
+ <div class="usage-model-name">{{ item.model }}</div>
146
+ <div class="usage-model-meta">{{ item.count }} 会话 · {{ item.messageTotal }} 消息<span v-if="item.tokenTotal"> · {{ item.tokenTotal.toLocaleString('en-US') }} token</span></div>
147
+ </div>
148
+ </div>
149
+ </template>
150
+ </section>
151
+
152
+ <section class="usage-card">
153
+ <div class="usage-card-title">工作日分布</div>
154
+ <div class="usage-list">
155
+ <div v-for="item in sessionUsageCharts.weekdayActivity" :key="item.key" class="usage-list-row usage-list-row-compact">
156
+ <div class="usage-list-label">{{ item.label }}</div>
157
+ <div class="usage-progress"><div class="usage-progress-fill" :style="{ width: item.percent + '%' }"></div></div>
158
+ <div class="usage-list-value">{{ item.count }}</div>
159
+ </div>
160
+ </div>
161
+ </section>
162
+
163
+ <section class="usage-card">
164
+ <div class="usage-card-title">高频路径</div>
165
+ <div v-if="!sessionUsageCharts.topPaths.length" class="usage-list-value">暂无路径数据</div>
166
+ <div v-else class="usage-list">
167
+ <div v-for="item in sessionUsageCharts.topPaths" :key="item.path" class="usage-list-row">
168
+ <div class="usage-list-label">{{ item.count }} 次</div>
169
+ <div class="usage-progress"><div class="usage-progress-fill" :style="{ width: ((item.count / Math.max((sessionUsageCharts.topPaths.length ? sessionUsageCharts.topPaths[0].count : 1), 1)) * 100) + '%' }"></div></div>
170
+ <div class="usage-list-value" :title="item.path">{{ item.path }}</div>
171
+ <div class="usage-list-subvalue">{{ item.messageTotal }} 消息<span v-if="item.updatedAtLabel"> · 最近 {{ item.updatedAtLabel }}</span></div>
172
+ </div>
173
+ </div>
174
+ </section>
175
+
176
+ <section class="usage-card">
177
+ <div class="usage-card-title">近期活跃会话</div>
178
+ <div v-if="!sessionUsageCharts.recentSessions.length" class="usage-list-value">暂无会话数据</div>
179
+ <div v-else class="usage-session-list">
180
+ <div v-for="item in sessionUsageCharts.recentSessions" :key="item.key" class="usage-session-item">
181
+ <div class="usage-session-row">
182
+ <div class="usage-session-title" :title="item.title">{{ item.title }}</div>
183
+ <span :class="['pill', item.source === 'codex' ? 'configured' : 'empty']">{{ item.sourceLabel }}</span>
184
+ </div>
185
+ <div class="usage-session-meta">
186
+ <span>{{ item.messageCount }} 消息</span>
187
+ <span v-if="item.updatedAtLabel">{{ item.updatedAtLabel }}</span>
188
+ </div>
189
+ <div v-if="item.cwd" class="usage-session-path" :title="item.cwd">{{ item.cwd }}</div>
190
+ </div>
191
+ </div>
192
+ </section>
193
+
194
+ <section class="usage-card">
195
+ <div class="usage-card-title">消息密度最高</div>
196
+ <div v-if="!sessionUsageCharts.topSessionsByMessages.length" class="usage-list-value">暂无会话数据</div>
197
+ <div v-else class="usage-session-list">
198
+ <div v-for="item in sessionUsageCharts.topSessionsByMessages" :key="item.key + '-messages'" class="usage-session-item">
199
+ <div class="usage-session-row">
200
+ <div class="usage-session-title" :title="item.title">{{ item.title }}</div>
201
+ <div class="usage-inline-stat">{{ item.messageCount }} 消息</div>
202
+ </div>
203
+ <div class="usage-session-meta">
204
+ <span>{{ item.sourceLabel }}</span>
205
+ <span v-if="item.updatedAtLabel">{{ item.updatedAtLabel }}</span>
206
+ </div>
207
+ <div v-if="item.cwd" class="usage-session-path" :title="item.cwd">{{ item.cwd }}</div>
208
+ </div>
209
+ </div>
210
+ </section>
211
+ </div>
212
+ </template>
213
+ </div>