codexmate 0.0.44 → 0.0.45

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

@@ -49,6 +49,8 @@ const zh = Object.freeze({
     'common.apply': '应用',
     'common.applying': '应用中...',
     'common.confirming': '确认中...',
+    'common.preview': '预览',
+    'common.previewing': '预览中...',
     'common.refreshFromText': '从文本刷新',
     'common.backToEdit': '返回编辑',
     'common.selectAll': '全选',
@@ -129,12 +131,14 @@ const zh = Object.freeze({
     'tab.market': 'Skills',
     'tab.plugins': '插件',
     'tab.settings': '设置',
+    'tab.prompts': 'Prompts',
 
     // Side rail section titles
     'side.overview': '概览',
     'side.docs': '文档',
     'side.config': '配置',
     'side.sessions': '会话',
+    'side.prompts': 'Prompts',
     'side.plugins': '插件',
     'side.system': '系统',
     'side.orchestration': '任务',
@@ -164,6 +168,10 @@ const zh = Object.freeze({
     'side.config.openclaw.meta': 'JSON5 / AGENTS',
     'side.sessions.browser': '会话浏览',
     'side.sessions.browser.meta': '浏览 / 导出 / 清理',
+    'side.prompts.agents': 'AGENTS.md',
+    'side.prompts.agents.meta': 'Codex 指令文件',
+    'side.prompts.claude': 'CLAUDE.md',
+    'side.prompts.claude.meta': 'Claude 指令文件',
     'side.plugins.tools': '提示词工具',
     'side.plugins.tools.meta': '模板 / 变量',
     'side.plugins.templatesCount': '{count} 个模板',
@@ -182,6 +190,7 @@ const zh = Object.freeze({
     'kicker.docs': 'Docs',
     'kicker.trash': '回收站',
     'kicker.settings': 'Settings',
+    'kicker.prompts': 'Prompts',
 
     'title.dashboard': 'Dashboard / Doctor',
     'title.config': '本地配置控制台',
@@ -192,6 +201,7 @@ const zh = Object.freeze({
     'title.plugins': '插件与模板',
     'title.docs': 'CLI 安装与文档',
     'title.settings': '系统与数据设置',
+    'title.prompts': '指令文件编辑器',
 
     'subtitle.dashboard': '聚合状态与诊断入口。',
     'subtitle.config': '管理本地配置与模型。',
@@ -202,6 +212,9 @@ const zh = Object.freeze({
     'subtitle.plugins': '管理模板化 prompt 与可复用插件。',
     'subtitle.docs': '查看 CLI 安装命令与排障。',
     'subtitle.settings': '管理下载、目录与回收站。',
+    'subtitle.prompts': '编辑 AGENTS.md 与 CLAUDE.md。',
+    'prompts.subTab.codex': 'AGENTS.md (Codex)',
+    'prompts.subTab.claude': 'CLAUDE.md (Claude)',
     'dashboard.doctor.title': 'Doctor',
     'dashboard.doctor.runChecks': '运行检查',
     'dashboard.doctor.checking': '检查中...',
@@ -378,8 +391,13 @@ const zh = Object.freeze({
     'toast.copy.empty': '没有可复制内容',
     'toast.copy.ok': '已复制',
     'toast.copy.fail': '复制失败',
+    'toast.link.fail': '无法生成链接',
     'toast.save.ok': '已保存',
     'toast.save.fail': '保存失败',
+    'toast.agents.saved.agents': 'AGENTS.md 已保存',
+    'toast.agents.saved.claudeMd': 'CLAUDE.md 已保存',
+    'toast.agents.saved.openclaw': 'OpenClaw AGENTS.md 已保存',
+    'toast.agents.saved.workspace': '工作区文件已保存: {name}',
     'toast.delete.ok': '已删除',
     'toast.delete.fail': '删除失败',
     'toast.export.empty': '没有可导出内容',
@@ -468,7 +486,7 @@ const zh = Object.freeze({
     'diff.hint.busy': '正在生成差异或应用中，操作暂不可用。',
     'diff.hint.failedBack': '差异预览失败，请返回编辑后重试。',
     'diff.hint.noChangesBack': '未检测到改动，可返回编辑继续修改或取消退出。',
-    'diff.hint.previewMode': '当前为预览模式，可点击“应用”写入或“返回编辑”继续修改。',
+    'diff.hint.previewMode': '当前为预览模式，可点击”保存”写入或”返回编辑”继续修改。',
 
     'modal.agents.export': '导出',
     'modal.agents.copy': '复制',
@@ -477,13 +495,13 @@ const zh = Object.freeze({
     'modal.agents.targetFile': '目标文件',
     'modal.agents.contentLabel': 'AGENTS.md 内容',
     'modal.agents.placeholder': '在这里编辑 AGENTS.md 内容',
-    'modal.agents.unsaved.previewModeHint': '预览模式：当前改动尚未保存，只有点击“应用”后才会写入文件。',
+    'modal.agents.unsaved.previewModeHint': '预览模式：当前改动尚未保存，只有点击”保存”后才会写入文件。',
     'modal.agents.unsaved.detectedHint': '检测到未保存改动：关闭页面或应用前请先保存。',
     'modal.agents.hint.shortcuts': '快捷键：Esc（差异预览时返回编辑，编辑时关闭窗口）。',
-    'modal.agents.hint.twoStepSave': '保存需两步：先点击“确认”预览差异，再点击“应用”保存。',
+    'modal.agents.hint.twoStepSave': '保存需两步：先点击”预览”查看差异，再点击”保存”写入。',
     'diff.tooLargeSkip': '内容过大，已跳过逐行差异预览',
-    'diff.viewHint.preview': '当前为预览模式，可点击“应用”保存或“返回编辑”继续修改。',
-    'diff.viewHint.truncated': '内容过大，已跳过预览，可点击“应用”保存或“返回编辑”继续修改。',
+    'diff.viewHint.preview': '当前为预览模式，可点击”保存”写入或”返回编辑”继续修改。',
+    'diff.viewHint.truncated': '内容过大，已跳过预览，可点击”保存”写入或”返回编辑”继续修改。',
 
     // Skills modal
     'modal.skills.title': 'Skills 管理',
@@ -623,6 +641,7 @@ const zh = Object.freeze({
     'sessions.preview.importNative.failedWithReason': '导入原生目录失败：{reason}',
     'sessions.preview.copyLink': '复制链接',
     'sessions.preview.copyPath': '复制路径',
+    'sessions.preview.openLink': '打开链接',
     'sessions.preview.loadingBody': '正在加载会话内容...',
     'sessions.preview.emptyMsgs': '当前会话暂无可展示消息',
     'sessions.preview.rendering': '正在渲染会话内容...',

package/web-ui/partials/index/layout-footer.html

@@ -1,5 +1,5 @@
             <!-- 加载状态 -->
-            <div v-if="loading" class="state-message">
+            <div v-if="loading && mainTab !== 'usage'" class="state-message">
                 {{ t('app.loadingConfig') }}
             </div>
 

package/web-ui/partials/index/layout-header.html

@@ -93,6 +93,16 @@
                 :class="{ active: isMainTabNavActive('plugins') }"
                 @pointerdown="onMainTabPointerDown('plugins', $event)"
                 @click="onMainTabClick('plugins', $event)">{{ t('tab.plugins') }}</button>
+            <button type="button" class="top-tab"
+                id="tab-prompts"
+                role="tab"
+                data-main-tab="prompts"
+                :tabindex="mainTab === 'prompts' ? 0 : -1"
+                :aria-selected="mainTab === 'prompts'"
+                aria-controls="panel-prompts"
+                :class="{ active: isMainTabNavActive('prompts') }"
+                @pointerdown="onMainTabPointerDown('prompts', $event)"
+                @click="onMainTabClick('prompts', $event)">{{ t('tab.prompts') }}</button>
             <button type="button" class="top-tab"
                 id="tab-settings"
                 role="tab"
@@ -215,6 +225,36 @@
                     </button>
                 </div>
 
+                <div class="side-section" role="navigation" :aria-label="t('side.prompts')">
+                    <div class="side-section-title">{{ t('side.prompts') }}</div>
+                    <button
+                        id="side-tab-prompts-agents"
+                        data-main-tab="prompts"
+                        data-prompts-sub-tab="codex"
+                        :aria-current="mainTab === 'prompts' && promptsSubTab === 'codex' ? 'page' : null"
+                        :class="['side-item', { active: isMainTabNavActive('prompts') && promptsSubTab === 'codex' }]"
+                        @pointerdown="onMainTabPointerDown('prompts', $event)"
+                        @click="switchPromptsSubTab('codex'); onMainTabClick('prompts')">
+                        <div class="side-item-title">{{ t('side.prompts.agents') }}</div>
+                        <div class="side-item-meta">
+                            <span>{{ t('side.prompts.agents.meta') }}</span>
+                        </div>
+                    </button>
+                    <button
+                        id="side-tab-prompts-claude"
+                        data-main-tab="prompts"
+                        data-prompts-sub-tab="claude-md"
+                        :aria-current="mainTab === 'prompts' && promptsSubTab === 'claude-md' ? 'page' : null"
+                        :class="['side-item', { active: isMainTabNavActive('prompts') && promptsSubTab === 'claude-md' }]"
+                        @pointerdown="onMainTabPointerDown('prompts', $event)"
+                        @click="switchPromptsSubTab('claude-md'); onMainTabClick('prompts')">
+                        <div class="side-item-title">{{ t('side.prompts.claude') }}</div>
+                        <div class="side-item-meta">
+                            <span>{{ t('side.prompts.claude.meta') }}</span>
+                        </div>
+                    </button>
+                </div>
+
                 <div class="side-section" role="navigation" :aria-label="t('side.sessions')">
                     <div class="side-section-title">{{ t('side.sessions') }}</div>
                     <button

package/web-ui/partials/index/modal-config-template-agents.html

@@ -102,6 +102,18 @@
                             :disabled="agentsLoading || agentsSaving || agentsDiffVisible">
                             {{ t('common.paste') }}
                         </button>
+                        <span class="prompts-editor-actions-sep"></span>
+                        <button class="btn-mini" @click="closeAgentsModal" :disabled="agentsSaving || agentsDiffLoading">{{ t('common.cancel') }}</button>
+                        <button
+                            v-if="agentsDiffVisible"
+                            class="btn-mini"
+                            @click="resetAgentsDiffState"
+                            :disabled="agentsSaving || agentsDiffLoading">
+                            {{ t('common.backToEdit') }}
+                        </button>
+                        <button class="btn-mini btn-confirm-mini" @click="applyAgentsContent" :disabled="agentsSaving || agentsLoading || agentsDiffLoading || (agentsDiffVisible && !agentsDiffHasChanges)">
+                            {{ agentsSaving ? (agentsDiffVisible ? t('common.saving') : t('common.previewing')) : (agentsDiffVisible ? t('common.save') : t('common.preview')) }}
+                        </button>
                     </div>
                 </div>
 
@@ -168,18 +180,5 @@
 
                 </div>
 
-                <div class="btn-group modal-editor-footer">
-                    <button class="btn btn-cancel" @click="closeAgentsModal" :disabled="agentsSaving || agentsDiffLoading">{{ t('common.cancel') }}</button>
-                    <button
-                        v-if="agentsDiffVisible"
-                        class="btn"
-                        @click="resetAgentsDiffState"
-                        :disabled="agentsSaving || agentsDiffLoading">
-                        {{ t('common.backToEdit') }}
-                    </button>
-                    <button class="btn btn-confirm" @click="applyAgentsContent" :disabled="agentsSaving || agentsLoading || agentsDiffLoading || (agentsDiffVisible && !agentsDiffHasChanges)">
-                        {{ agentsSaving ? (agentsDiffVisible ? t('common.applying') : t('common.confirming')) : (agentsDiffVisible ? t('common.apply') : t('common.confirm')) }}
-                    </button>
-                </div>
             </div>
         </div>

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

@@ -108,12 +108,6 @@
                     <button class="btn-tool btn-template-editor" @click="openClaudeConfigTemplateEditor" :disabled="loading || !!initError">{{ t('config.template.openEditor') }}</button>
                 </div>
 
-                <div class="selector-section">
-                    <div class="selector-header"><span class="selector-title">CLAUDE.md</span></div>
-                    <button class="btn-tool" @click="openClaudeMdEditor" :disabled="loading || !!initError || agentsLoading">{{ agentsLoading ? t('config.modelLoading') : t('claude.md.open') }}</button>
-                    <div class="config-template-hint">{{ t('claude.md.hint') }}</div>
-                </div>
-
                 <div class="selector-section">
                     <div class="selector-header"><span class="selector-title">{{ t('config.health.title') }}</span></div>
                     <button class="btn-tool" @click="runHealthCheck" :disabled="healthCheckLoading || loading || !!initError">{{ healthCheckLoading ? t('config.health.running') : t('config.health.run') }}</button>

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

@@ -61,11 +61,6 @@
                     </div>
                 </div>
 
-                <div class="selector-section">
-                    <div class="selector-header"><span class="selector-title">AGENTS.md</span></div>
-                    <button class="btn-tool" @click="openAgentsEditor" :disabled="loading || !!initError || agentsLoading">{{ agentsLoading ? t('config.modelLoading') : t('config.agents.open') }}</button>
-                </div>
-
                 <div class="selector-section">
                     <div class="selector-header">
                         <span class="selector-title">{{ t('config.models') }}</span>

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

@@ -0,0 +1,100 @@
+                <!-- Prompts editor -->
+                <div
+                    v-if="mainTab === 'prompts'"
+                    class="mode-content mode-cards"
+                    id="panel-prompts"
+                    role="tabpanel"
+                    aria-labelledby="tab-prompts">
+                <div class="segmented-control">
+                    <button type="button" :class="['segment', { active: promptsSubTab === 'codex' }]" @click="switchPromptsSubTab('codex')">{{ t('prompts.subTab.codex') }}</button>
+                    <button type="button" :class="['segment', { active: promptsSubTab === 'claude-md' }]" @click="switchPromptsSubTab('claude-md')">{{ t('prompts.subTab.claude') }}</button>
+                </div>
+
+                <div class="prompts-editor">
+                    <div class="prompts-editor-toolbar">
+                        <div class="form-hint">
+                            {{ agentsPath || t('common.notLoaded') }}
+                            <span v-if="agentsPath">
+                                （{{ agentsExists ? t('common.exists') : t('common.notExistsWillCreateOnSave') }}）
+                            </span>
+                        </div>
+                        <div class="prompts-editor-actions">
+                            <div class="prompts-editor-group prompts-editor-group--secondary">
+                                <button
+                                    class="btn-mini"
+                                    @click="exportAgentsContent"
+                                    :disabled="agentsLoading">
+                                    {{ t('modal.agents.export') }}
+                                </button>
+                                <button
+                                    class="btn-mini"
+                                    @click="copyAgentsContent"
+                                    :disabled="agentsLoading">
+                                    {{ t('modal.agents.copy') }}
+                                </button>
+                                <button
+                                    class="btn-mini"
+                                    @click="pasteAgentsContent"
+                                    :disabled="agentsLoading || agentsSaving || agentsDiffVisible">
+                                    {{ t('common.paste') }}
+                                </button>
+                            </div>
+                            <div class="prompts-editor-group prompts-editor-group--workflow">
+                                <button class="btn-mini" @click="loadPromptsContent" :disabled="agentsSaving || agentsDiffLoading">{{ t('common.cancel') }}</button>
+                                <button
+                                    v-if="agentsDiffVisible"
+                                    class="btn-mini"
+                                    @click="resetAgentsDiffState"
+                                    :disabled="agentsSaving || agentsDiffLoading">
+                                    {{ t('common.backToEdit') }}
+                                </button>
+                                <button class="btn-mini btn-confirm-mini" @click="applyAgentsContent" :disabled="agentsSaving || agentsLoading || agentsDiffLoading || (!agentsDiffVisible && !hasAgentsContentChanged()) || (agentsDiffVisible && !agentsDiffHasChanges)">
+                                    {{ agentsSaving ? (agentsDiffVisible ? t('common.saving') : t('common.previewing')) : (agentsDiffVisible ? t('common.save') : t('common.preview')) }}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <div v-if="agentsDiffVisible">
+                            <div
+                                v-if="!agentsDiffLoading && !agentsDiffError && !agentsDiffTruncated && (agentsDiffStats.added || agentsDiffStats.removed)"
+                                class="agents-diff-summary">
+                                <span class="agents-diff-stat add">+{{ agentsDiffStats.added }}</span>
+                                <span class="agents-diff-stat del">-{{ agentsDiffStats.removed }}</span>
+                            </div>
+                            <div v-if="agentsDiffLoading" class="state-message">{{ t('diff.generating') }}</div>
+                            <div v-else-if="agentsDiffError" class="state-message error">{{ agentsDiffError }}</div>
+                            <div v-else-if="agentsDiffTruncated" class="agents-diff-empty">{{ t('diff.tooLargeSkip') }}</div>
+                            <div v-else-if="!agentsDiffHasChanges" class="agents-diff-empty">{{ t('diff.noChanges') }}</div>
+                            <div v-else class="agents-diff-view agents-diff-editor">
+                                <div
+                                    v-for="(line, index) in agentsDiffLines"
+                                    :key="line.key || (line.type + '-' + index)"
+                                    :class="['agents-diff-line', line.type]">
+                                    <span class="agents-diff-line-sign">
+                                        {{ line.type === 'add' ? '+' : (line.type === 'del' ? '-' : ' ') }}
+                                    </span>
+                                    <span class="agents-diff-line-text">{{ line.value }}</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div :class="['editor-frame', { 'editor-frame--loading': agentsLoading }]">
+                            <div v-if="agentsLoading" class="editor-skeleton">
+                                <div class="skeleton-line" v-for="i in 6" :key="i"></div>
+                            </div>
+                            <textarea
+                                v-model="agentsContent"
+                                class="form-input template-editor"
+                                spellcheck="false"
+                                :readonly="agentsLoading || agentsSaving || agentsDiffVisible"
+                                @input="onAgentsContentInput"
+                                :placeholder="t(promptsSubTab === 'claude-md' ? 'modal.agents.placeholder.claudeMd' : 'modal.agents.placeholder')"></textarea>
+                        </div>
+                        <div v-if="promptsContextHint" :class="['prompts-context-hint', { 'prompts-context-hint--warn': promptsContextHint.warn }]">
+                            {{ promptsContextHint.text }}
+                        </div>
+                    </div>
+
+                </div>
+                </div>

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

@@ -219,33 +219,53 @@
                                         </div>
                                     </div>
                                     <div class="session-actions">
-                                        <button class="btn-session-refresh" @click="loadActiveSessionDetail" :disabled="sessionDetailLoading || !activeSession">
-                                            {{ sessionDetailLoading ? t('sessions.preview.loading') : t('sessions.preview.refresh') }}
+                                        <button class="btn-session-refresh" @click="loadActiveSessionDetail" :disabled="sessionDetailLoading || !activeSession"
+                                            :title="sessionDetailLoading ? t('sessions.preview.loading') : t('sessions.preview.refresh')"
+                                            :aria-label="sessionDetailLoading ? t('sessions.preview.loading') : t('sessions.preview.refresh')">
+                                            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 8a5.5 5.5 0 0 1 9.4-3.8"/><path d="M13.5 8a5.5 5.5 0 0 1-9.4 3.8"/><polyline points="2.5 2 2.5 5 5.5 5"/><polyline points="13.5 14 13.5 11 10.5 11"/></svg>
                                         </button>
                                         <button
                                             v-if="isDeleteAvailable(activeSession)"
                                             class="btn-session-delete"
                                             @click="deleteSession(activeSession)"
-                                            :disabled="!activeSession || sessionsLoading || sessionDeleting[getSessionExportKey(activeSession)]">
-                                            {{ (activeSession && sessionDeleting[getSessionExportKey(activeSession)]) ? (sessionTrashEnabled === false ? t('sessions.preview.deleting') : t('sessions.preview.moving')) : (sessionTrashEnabled === false ? t('sessions.preview.deleteHard') : t('sessions.preview.moveToTrash')) }}
+                                            :disabled="!activeSession || sessionsLoading || sessionDeleting[getSessionExportKey(activeSession)]"
+                                            :title="(activeSession && sessionDeleting[getSessionExportKey(activeSession)]) ? (sessionTrashEnabled === false ? t('sessions.preview.deleting') : t('sessions.preview.moving')) : (sessionTrashEnabled === false ? t('sessions.preview.deleteHard') : t('sessions.preview.moveToTrash'))"
+                                            :aria-label="(activeSession && sessionDeleting[getSessionExportKey(activeSession)]) ? (sessionTrashEnabled === false ? t('sessions.preview.deleting') : t('sessions.preview.moving')) : (sessionTrashEnabled === false ? t('sessions.preview.deleteHard') : t('sessions.preview.moveToTrash'))">
+                                            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 4 4 4 13 4"/><path d="M5.5 4V2.5a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1V4"/><path d="M12 4v9.5a1.5 1.5 0 0 1-1.5 1.5h-5A1.5 1.5 0 0 1 4 13.5V4"/></svg>
                                         </button>
                                         <button
                                             class="btn-session-export"
                                             @click="exportSession(activeSession)"
-                                            :disabled="!activeSession || sessionExporting[getSessionExportKey(activeSession)]">
-                                            {{ (activeSession && sessionExporting[getSessionExportKey(activeSession)]) ? t('sessions.preview.exporting') : t('sessions.preview.export') }}
+                                            :disabled="!activeSession || sessionExporting[getSessionExportKey(activeSession)]"
+                                            :title="(activeSession && sessionExporting[getSessionExportKey(activeSession)]) ? t('sessions.preview.exporting') : t('sessions.preview.export')"
+                                            :aria-label="(activeSession && sessionExporting[getSessionExportKey(activeSession)]) ? t('sessions.preview.exporting') : t('sessions.preview.export')">
+                                            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v8"/><polyline points="4 7 8 10.5 12 7"/><path d="M2.5 12v1.5a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V12"/></svg>
                                         </button>
+                                        <div class="session-link-group">
                                         <button
                                             class="btn-session-open"
                                             @click="copySessionLink(activeSession)"
-                                            :disabled="!activeSession">
-                                            {{ t('sessions.preview.copyLink') }}
+                                            :disabled="!activeSession || !canBuildStandaloneUrl(activeSession)"
+                                            :title="t('sessions.preview.copyLink')"
+                                            :aria-label="t('sessions.preview.copyLink')">
+                                            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="2.5" width="4" height="2" rx="1"/><path d="M4.5 4h7a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5"/><line x1="6" y1="7.5" x2="10" y2="7.5"/><line x1="6" y1="10" x2="10" y2="10"/></svg>
                                         </button>
+                                        <button
+                                            class="btn-session-open"
+                                            @click="openSessionLink(activeSession)"
+                                            :disabled="!activeSession || !canBuildStandaloneUrl(activeSession)"
+                                            :title="t('sessions.preview.openLink')"
+                                            :aria-label="t('sessions.preview.openLink')">
+                                            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2h-8.5A1.5 1.5 0 0 0 2 3.5v8A1.5 1.5 0 0 0 3.5 13h8a1.5 1.5 0 0 0 1.5-1.5v-3"/><path d="M13 2v4h-4"/><path d="M13 2L7 8"/></svg>
+                                        </button>
+                                        </div>
                                         <button
                                             class="btn-session-open"
                                             @click="copySessionPath(activeSession)"
-                                            :disabled="!activeSession || !getSessionFilePath(activeSession)">
-                                            {{ t('sessions.preview.copyPath') }}
+                                            :disabled="!activeSession || !getSessionFilePath(activeSession)"
+                                            :title="t('sessions.preview.copyPath')"
+                                            :aria-label="t('sessions.preview.copyPath')">
+                                            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="2.5" width="4" height="2" rx="1"/><path d="M4.5 4h7a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5"/><line x1="6" y1="7.5" x2="10" y2="7.5"/><line x1="6" y1="10" x2="10" y2="10"/></svg>
                                         </button>
                                     </div>
                                 </div>

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

@@ -75,26 +75,42 @@
                             <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-wave-container">
-                                    <svg class="usage-wave-chart" viewBox="0 0 800 140" preserveAspectRatio="none">
-                                        <defs>
-                                            <linearGradient :id="'wave-gradient-' + sessionsUsageTimeRange" x1="0" y1="0" x2="0" y2="1">
-                                                <stop offset="0%" :stop-color="'var(--color-brand)'" stop-opacity="0.35"/>
-                                                <stop offset="100%" :stop-color="'var(--color-brand)'" stop-opacity="0"/>
-                                            </linearGradient>
-                                        </defs>
-                                        <path :d="sessionUsageWave.areaPath" :fill="'url(#wave-gradient-' + sessionsUsageTimeRange + ')'" class="usage-wave-area"/>
-                                        <path :d="sessionUsageWave.linePath" fill="none" :stroke="'var(--color-brand)'" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="usage-wave-line"/>
-                                        <line v-if="sessionsUsageSelectedDay" x1="0" :x2="sessionUsageWave.width" :y1="sessionUsageWave.hoverY" :y2="sessionUsageWave.hoverY" stroke="currentColor" stroke-width="1" stroke-dasharray="4 4" opacity="0.5" class="usage-wave-hover-line"/>
-                                        <circle v-if="sessionsUsageSelectedDay" :cx="sessionUsageWave.hoverX" :cy="sessionUsageWave.hoverY" r="5" :fill="'var(--color-surface)'" :stroke="'var(--color-brand)'" stroke-width="2.5" class="usage-wave-hover-point"/>
-                                    </svg>
-                                    <div class="usage-wave-labels">
-                                        <span v-for="label in sessionUsageWave.labels" :key="label.key"
-                                              class="usage-wave-label"
-                                              :class="{ active: sessionsUsageSelectedDay === label.key }"
-                                              @click="selectSessionsUsageDay(label.key)">
-                                            {{ label.text }}
+                                    <div class="usage-wave-yaxis">
+                                        <span v-for="tick in sessionUsageWave.yTicks" :key="tick.value"
+                                              class="usage-wave-ytick"
+                                              :style="{ bottom: tick.percent + '%' }">
+                                            {{ tick.label }}
                                         </span>
                                     </div>
+                                    <div class="usage-wave-chart-area">
+                                        <svg class="usage-wave-chart" viewBox="0 0 800 140" preserveAspectRatio="none">
+                                            <defs>
+                                                <linearGradient :id="'wave-gradient-' + sessionsUsageTimeRange" x1="0" y1="0" x2="0" y2="1">
+                                                    <stop offset="0%" :stop-color="'var(--color-brand)'" stop-opacity="0.35"/>
+                                                    <stop offset="100%" :stop-color="'var(--color-brand)'" stop-opacity="0"/>
+                                                </linearGradient>
+                                            </defs>
+                                            <line v-for="tick in sessionUsageWave.yTicks" :key="'g-' + tick.value"
+                                                  x1="0" :x2="sessionUsageWave.width"
+                                                  :y1="tick.y" :y2="tick.y"
+                                                  stroke="currentColor" stroke-width="0.5" opacity="0.12"
+                                                  class="usage-wave-gridline"/>
+                                            <path :d="sessionUsageWave.areaPath" :fill="'url(#wave-gradient-' + sessionsUsageTimeRange + ')'" class="usage-wave-area"/>
+                                            <path :d="sessionUsageWave.linePath" fill="none" :stroke="'var(--color-brand)'" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="usage-wave-line"/>
+                                            <line v-if="sessionsUsageSelectedDay" x1="0" :x2="sessionUsageWave.width" :y1="sessionUsageWave.hoverY" :y2="sessionUsageWave.hoverY" stroke="currentColor" stroke-width="1" stroke-dasharray="4 4" opacity="0.5" class="usage-wave-hover-line"/>
+                                            <circle v-if="sessionsUsageSelectedDay" :cx="sessionUsageWave.hoverX" :cy="sessionUsageWave.hoverY" r="5" :fill="'var(--color-surface)'" :stroke="'var(--color-brand)'" stroke-width="2.5" class="usage-wave-hover-point"/>
+                                        </svg>
+                                        <div class="usage-wave-labels">
+                                            <button v-for="label in sessionUsageWave.labels" :key="label.key"
+                                                  type="button"
+                                                  class="usage-wave-label"
+                                                  :class="{ active: sessionsUsageSelectedDay === label.key }"
+                                                  :aria-pressed="sessionsUsageSelectedDay === label.key"
+                                                  @click="selectSessionsUsageDay(label.key)">
+                                                {{ label.text }}
+                                            </button>
+                                        </div>
+                                    </div>
                                 </div>
                                 <div v-if="sessionsUsageSelectedDaySummary" class="usage-daydetail">
                                     <div class="usage-daydetail-header">