codexmate 0.1.25 → 0.1.28

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

@@ -97,9 +97,6 @@
                             <button class="btn-tool btn-tool-compact" type="button" @click="switchMainTab('dashboard')" :title="t('dashboard.doctor.title')">
                                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="btn-icon-sm"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
                             </button>
-                            <button class="btn-tool btn-tool-compact" type="button" @click="copySessionsFilterShareUrl" :disabled="sessionsLoading">
-                                {{ t('sessions.filters.copyLink') }}
-                            </button>
                             <button class="btn-tool btn-tool-compact" type="button" @click="clearSessionFilters" :disabled="sessionsLoading">
                                 {{ t('common.resetFilters') }}
                             </button>
@@ -108,8 +105,8 @@
                                 <span>{{ t('sessions.batch.select') }}</span>
                             </button>
                             <template v-else>
-                                <button class="btn-tool btn-tool-compact" type="button" @click="toggleSelectAllVisibleForBatch" :disabled="sessionsLoading" :title="isAllVisibleBatchSelected() ? t('sessions.batch.unselectAll') : t('sessions.batch.selectAll')">
-                                    {{ isAllVisibleBatchSelected() ? t('sessions.batch.unselectAll') : t('sessions.batch.selectAll') }}
+                                <button class="btn-tool btn-tool-compact" type="button" @click="toggleSelectAllVisibleForBatch" :disabled="sessionsLoading" :title="isAllVisibleBatchSelected() ? t('sessions.batch.unselectAll') : t('sessions.batch.selectAllVisibleN', { count: getVisibleBatchSelectableCount() })">
+                                    {{ isAllVisibleBatchSelected() ? t('sessions.batch.unselectAll') : t('sessions.batch.selectAllVisibleN', { count: getVisibleBatchSelectableCount() }) }}
                                 </button>
                                 <button class="btn-tool btn-tool-compact btn-tool-batch-delete" type="button" @click="deleteSelectedSessions" :disabled="sessionsLoading || sessionDeletingSelected || getSelectedBatchCount() === 0" :title="getSelectedBatchCount() > 0 ? t('sessions.batch.deleteSelectedN', { count: getSelectedBatchCount() }) : t('sessions.batch.emptySelection')">
                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M7 6V4a2 2 0 012-2h6a2 2 0 012 2v2M10 11v6M14 11v6"/><path d="M5 6l1 14a2 2 0 002 2h8a2 2 0 002-2l1-14"/></svg>
@@ -409,7 +406,7 @@
                                                     <span class="session-msg-time">{{ msg.timestamp || '' }}</span>
                                                 </div>
                                             </div>
-                                            <div class="session-msg-content" v-html="highlightQueryText(msg.text) || ''"></div>
+                                            <div class="session-msg-content" v-html="msg.text || ''"></div>
                                             <button
                                                 v-if="msg.normalizedRole === 'user'"
                                                 type="button"
@@ -432,6 +429,24 @@
                                     </div>
                                 </div>
                             </div>
+                            <div class="session-preview-jump">
+                                <button
+                                    type="button"
+                                    class="session-match-nav-btn"
+                                    @click="scrollSessionPreviewToTop"
+                                    :title="t('sessions.preview.scrollTop')"
+                                    :aria-label="t('sessions.preview.scrollTop')">
+                                    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 10 8 5 13 10"/></svg>
+                                </button>
+                                <button
+                                    type="button"
+                                    class="session-match-nav-btn"
+                                    @click="scrollSessionPreviewToBottom"
+                                    :title="t('sessions.preview.scrollBottom')"
+                                    :aria-label="t('sessions.preview.scrollBottom')">
+                                    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 8 11 13 6"/></svg>
+                                </button>
+                            </div>
                             <aside v-if="sessionPreviewRenderEnabled && sessionTimelineNodes.length" :class="['session-timeline', 'session-timeline-' + sessionTimelineStyle]" :aria-label="t('sessions.timeline.aria')">
                                 <!-- 点状模式 -->
                                 <template v-if="sessionTimelineStyle === 'dots'">

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

@@ -61,6 +61,30 @@
                                 </div>
                             </section>
 
+                            <section class="settings-card" :aria-label="t('settings.theme.title')">
+                                <div class="settings-card-main">
+                                    <div class="settings-card-content">
+                                        <div class="settings-card-title">{{ t('settings.theme.title') }}</div>
+                                        <p class="settings-card-desc">{{ t('settings.theme.meta') }}</p>
+                                        <div class="settings-toggle-group">
+                                            <button
+                                                type="button"
+                                                :class="['toggle-btn', { active: theme === 'light' }]"
+                                                @click="setTheme('light')">
+                                                {{ t('settings.theme.light') }}
+                                            </button>
+                                            <button
+                                                type="button"
+                                                :class="['toggle-btn', { active: theme === 'dark' }]"
+                                                @click="setTheme('dark')">
+                                                {{ t('settings.theme.dark') }}
+                                            </button>
+                                        </div>
+                                        <p class="settings-card-hint">{{ t('settings.theme.hint') }}</p>
+                                    </div>
+                                </div>
+                            </section>
+
                             <section class="settings-card" :aria-label="t('settings.sharePrefix.title')">
                                 <div class="settings-card-main">
                                     <div class="settings-card-content">

package/web-ui/res/web-ui-render.precompiled.js

@@ -412,7 +412,7 @@ return function render(_ctx, _cache) {
                   _createElementVNode("div", { class: "side-item-title" }, _toDisplayString(_ctx.t('side.sessions.browser')), 1 /* TEXT */),
                   _createElementVNode("div", { class: "side-item-meta" }, [
                     _createElementVNode("span", null, _toDisplayString(_ctx.t('side.sessions.browser.meta')), 1 /* TEXT */),
-                    _createElementVNode("span", null, _toDisplayString(_ctx.t('sessions.sourceLabel', { value: (_ctx.sessionFilterSource === 'all' ? _ctx.t('sessions.source.all') : (_ctx.sessionFilterSource === 'claude' ? 'Claude Code' : (_ctx.sessionFilterSource === 'gemini' ? 'Gemini CLI' : (_ctx.sessionFilterSource === 'codebuddy' ? 'CodeBuddy Code' : 'Codex')))) })), 1 /* TEXT */)
+                    _createElementVNode("span", null, _toDisplayString(_ctx.t('sessions.sourceLabel', { value: (_ctx.sessionFilterSource === 'all' ? _ctx.t('sessions.source.all') : (_ctx.sessionFilterSource === 'claude' ? 'Claude Code' : (_ctx.sessionFilterSource === 'gemini' ? 'Gemini CLI' : (_ctx.sessionFilterSource === 'codebuddy' ? 'CodeBuddy Code' : (_ctx.sessionFilterSource === 'workbuddy' ? 'WorkBuddy AI' : 'Codex'))))) })), 1 /* TEXT */)
                   ])
                 ], 42 /* CLASS, PROPS, NEED_HYDRATION */, ["aria-current", "onPointerdown", "onClick"]),
                 _createElementVNode("button", {
@@ -727,7 +727,9 @@ return function render(_ctx, _cache) {
                                                 ? _ctx.t('sessions.source.gemini')
                                                 : (_ctx.sessionFilterSource === 'codebuddy'
                                                     ? _ctx.t('sessions.source.codebuddy')
-                                                    : _ctx.t('sessions.source.codex')))))), 1 /* TEXT */)
+                                                    : (_ctx.sessionFilterSource === 'workbuddy'
+                                                        ? _ctx.t('sessions.source.workbuddy')
+                                                        : _ctx.t('sessions.source.codex'))))))), 1 /* TEXT */)
                   ]),
                   _createElementVNode("div", { class: "status-chip" }, [
                     _createElementVNode("span", { class: "label" }, _toDisplayString(_ctx.t('status.sessionCount')), 1 /* TEXT */),
@@ -4017,12 +4019,6 @@ return function render(_ctx, _cache) {
                             _createElementVNode("path", { d: "M22 12h-4l-3 9L9 3l-3 9H2" })
                           ]))
                         ], 8 /* PROPS */, ["onClick", "title"]),
-                        _createElementVNode("button", {
-                          class: "btn-tool btn-tool-compact",
-                          type: "button",
-                          onClick: _ctx.copySessionsFilterShareUrl,
-                          disabled: _ctx.sessionsLoading
-                        }, _toDisplayString(_ctx.t('sessions.filters.copyLink')), 9 /* TEXT, PROPS */, ["onClick", "disabled"]),
                         _createElementVNode("button", {
                           class: "btn-tool btn-tool-compact",
                           type: "button",
@@ -4056,8 +4052,8 @@ return function render(_ctx, _cache) {
                                 type: "button",
                                 onClick: _ctx.toggleSelectAllVisibleForBatch,
                                 disabled: _ctx.sessionsLoading,
-                                title: _ctx.isAllVisibleBatchSelected() ? _ctx.t('sessions.batch.unselectAll') : _ctx.t('sessions.batch.selectAll')
-                              }, _toDisplayString(_ctx.isAllVisibleBatchSelected() ? _ctx.t('sessions.batch.unselectAll') : _ctx.t('sessions.batch.selectAll')), 9 /* TEXT, PROPS */, ["onClick", "disabled", "title"]),
+                                title: _ctx.isAllVisibleBatchSelected() ? _ctx.t('sessions.batch.unselectAll') : _ctx.t('sessions.batch.selectAllVisibleN', { count: _ctx.getVisibleBatchSelectableCount() })
+                              }, _toDisplayString(_ctx.isAllVisibleBatchSelected() ? _ctx.t('sessions.batch.unselectAll') : _ctx.t('sessions.batch.selectAllVisibleN', { count: _ctx.getVisibleBatchSelectableCount() })), 9 /* TEXT, PROPS */, ["onClick", "disabled", "title"]),
                               _createElementVNode("button", {
                                 class: "btn-tool btn-tool-compact btn-tool-batch-delete",
                                 type: "button",
@@ -4647,7 +4643,7 @@ return function render(_ctx, _cache) {
                                                         ]),
                                                         _createElementVNode("div", {
                                                           class: "session-msg-content",
-                                                          innerHTML: _ctx.highlightQueryText(msg.text) || ''
+                                                          innerHTML: msg.text || ''
                                                         }, null, 8 /* PROPS */, ["innerHTML"]),
                                                         (msg.normalizedRole === 'user')
                                                           ? (_openBlock(), _createElementBlock("button", {
@@ -4696,6 +4692,44 @@ return function render(_ctx, _cache) {
                                                   ])
                                                 ]))
                                   ], 40 /* PROPS, NEED_HYDRATION */, ["onScroll"]),
+                                  _createElementVNode("div", { class: "session-preview-jump" }, [
+                                    _createElementVNode("button", {
+                                      type: "button",
+                                      class: "session-match-nav-btn",
+                                      onClick: _ctx.scrollSessionPreviewToTop,
+                                      title: _ctx.t('sessions.preview.scrollTop'),
+                                      "aria-label": _ctx.t('sessions.preview.scrollTop')
+                                    }, [
+                                      (_openBlock(), _createElementBlock("svg", {
+                                        viewBox: "0 0 16 16",
+                                        fill: "none",
+                                        stroke: "currentColor",
+                                        "stroke-width": "1.8",
+                                        "stroke-linecap": "round",
+                                        "stroke-linejoin": "round"
+                                      }, [
+                                        _createElementVNode("polyline", { points: "3 10 8 5 13 10" })
+                                      ]))
+                                    ], 8 /* PROPS */, ["onClick", "title", "aria-label"]),
+                                    _createElementVNode("button", {
+                                      type: "button",
+                                      class: "session-match-nav-btn",
+                                      onClick: _ctx.scrollSessionPreviewToBottom,
+                                      title: _ctx.t('sessions.preview.scrollBottom'),
+                                      "aria-label": _ctx.t('sessions.preview.scrollBottom')
+                                    }, [
+                                      (_openBlock(), _createElementBlock("svg", {
+                                        viewBox: "0 0 16 16",
+                                        fill: "none",
+                                        stroke: "currentColor",
+                                        "stroke-width": "1.8",
+                                        "stroke-linecap": "round",
+                                        "stroke-linejoin": "round"
+                                      }, [
+                                        _createElementVNode("polyline", { points: "3 6 8 11 13 6" })
+                                      ]))
+                                    ], 8 /* PROPS */, ["onClick", "title", "aria-label"])
+                                  ]),
                                   (_ctx.sessionPreviewRenderEnabled && _ctx.sessionTimelineNodes.length)
                                     ? (_openBlock(), _createElementBlock("aside", {
                                         key: 0,
@@ -5501,6 +5535,30 @@ return function render(_ctx, _cache) {
                     ])
                   ])
                 ], 8 /* PROPS */, ["aria-label"]),
+                _createElementVNode("section", {
+                  class: "settings-card",
+                  "aria-label": _ctx.t('settings.theme.title')
+                }, [
+                  _createElementVNode("div", { class: "settings-card-main" }, [
+                    _createElementVNode("div", { class: "settings-card-content" }, [
+                      _createElementVNode("div", { class: "settings-card-title" }, _toDisplayString(_ctx.t('settings.theme.title')), 1 /* TEXT */),
+                      _createElementVNode("p", { class: "settings-card-desc" }, _toDisplayString(_ctx.t('settings.theme.meta')), 1 /* TEXT */),
+                      _createElementVNode("div", { class: "settings-toggle-group" }, [
+                        _createElementVNode("button", {
+                          type: "button",
+                          class: _normalizeClass(['toggle-btn', { active: _ctx.theme === 'light' }]),
+                          onClick: $event => (_ctx.setTheme('light'))
+                        }, _toDisplayString(_ctx.t('settings.theme.light')), 11 /* TEXT, CLASS, PROPS */, ["onClick"]),
+                        _createElementVNode("button", {
+                          type: "button",
+                          class: _normalizeClass(['toggle-btn', { active: _ctx.theme === 'dark' }]),
+                          onClick: $event => (_ctx.setTheme('dark'))
+                        }, _toDisplayString(_ctx.t('settings.theme.dark')), 11 /* TEXT, CLASS, PROPS */, ["onClick"])
+                      ]),
+                      _createElementVNode("p", { class: "settings-card-hint" }, _toDisplayString(_ctx.t('settings.theme.hint')), 1 /* TEXT */)
+                    ])
+                  ])
+                ], 8 /* PROPS */, ["aria-label"]),
                 _createElementVNode("section", {
                   class: "settings-card",
                   "aria-label": _ctx.t('settings.sharePrefix.title')
@@ -7034,6 +7092,12 @@ return function render(_ctx, _cache) {
                           _createTextVNode(_toDisplayString(_ctx.agentsPath || _ctx.t('common.notLoaded')) + " ", 1 /* TEXT */),
                           (_ctx.agentsPath)
                             ? (_openBlock(), _createElementBlock("span", { key: 0 }, " （" + _toDisplayString(_ctx.agentsExists ? _ctx.t('common.exists') : _ctx.t('common.notExistsWillCreateOnSave')) + "） ", 1 /* TEXT */))
+                            : _createCommentVNode("v-if", true),
+                          (_ctx.agentsPath)
+                            ? (_openBlock(), _createElementBlock("span", {
+                                key: 1,
+                                class: "prompts-token-hint"
+                              }, "· " + _toDisplayString(_ctx.t('prompts.tokenCount.hint', { count: _ctx.agentsTokenCount })), 1 /* TEXT */))
                             : _createCommentVNode("v-if", true)
                         ]),
                         _createElementVNode("div", { class: "prompts-editor-actions" }, [
@@ -7352,9 +7416,20 @@ return function render(_ctx, _cache) {
                       _createElementVNode("div", { class: "form-group" }, [
                         (_ctx.agentsDiffVisible)
                           ? (_openBlock(), _createElementBlock("div", { key: 0 }, [
-                              (!_ctx.agentsDiffLoading && !_ctx.agentsDiffError && !_ctx.agentsDiffTruncated && (_ctx.agentsDiffStats.added || _ctx.agentsDiffStats.removed))
+                              (!_ctx.agentsDiffLoading && !_ctx.agentsDiffError)
                                 ? (_openBlock(), _createElementBlock("div", {
                                     key: 0,
+                                    class: "agents-diff-token-summary"
+                                  }, [
+                                    _createElementVNode("span", { class: "agents-diff-token-label" }, _toDisplayString(_ctx.t('prompts.tokenCount.diff', { before: _ctx.agentsDiffTokenStats.before, current: _ctx.agentsDiffTokenStats.current })), 1 /* TEXT */),
+                                    _createElementVNode("span", {
+                                      class: _normalizeClass(['agents-diff-token-delta', 'agents-diff-token-delta--' + _ctx.agentsDiffTokenStats.deltaKind])
+                                    }, _toDisplayString(_ctx.agentsDiffTokenStats.deltaLabel), 3 /* TEXT, CLASS */)
+                                  ]))
+                                : _createCommentVNode("v-if", true),
+                              (!_ctx.agentsDiffLoading && !_ctx.agentsDiffError && !_ctx.agentsDiffTruncated && (_ctx.agentsDiffStats.added || _ctx.agentsDiffStats.removed))
+                                ? (_openBlock(), _createElementBlock("div", {
+                                    key: 1,
                                     class: "agents-diff-summary"
                                   }, [
                                     _createElementVNode("span", { class: "agents-diff-stat add" }, "+" + _toDisplayString(_ctx.agentsDiffStats.added), 1 /* TEXT */),
@@ -7363,26 +7438,26 @@ return function render(_ctx, _cache) {
                                 : _createCommentVNode("v-if", true),
                               (_ctx.agentsDiffLoading)
                                 ? (_openBlock(), _createElementBlock("div", {
-                                    key: 1,
+                                    key: 2,
                                     class: "state-message"
                                   }, _toDisplayString(_ctx.t('diff.generating')), 1 /* TEXT */))
                                 : (_ctx.agentsDiffError)
                                   ? (_openBlock(), _createElementBlock("div", {
-                                      key: 2,
+                                      key: 3,
                                       class: "state-message error"
                                     }, _toDisplayString(_ctx.agentsDiffError), 1 /* TEXT */))
                                   : (_ctx.agentsDiffTruncated)
                                     ? (_openBlock(), _createElementBlock("div", {
-                                        key: 3,
+                                        key: 4,
                                         class: "agents-diff-empty"
                                       }, _toDisplayString(_ctx.t('diff.tooLargeSkip')), 1 /* TEXT */))
                                     : (!_ctx.agentsDiffHasChanges)
                                       ? (_openBlock(), _createElementBlock("div", {
-                                          key: 4,
+                                          key: 5,
                                           class: "agents-diff-empty"
                                         }, _toDisplayString(_ctx.t('diff.noChanges')), 1 /* TEXT */))
                                       : (_openBlock(), _createElementBlock("div", {
-                                          key: 5,
+                                          key: 6,
                                           class: "prompts-diff-frame"
                                         }, [
                                           (_ctx.agentsChangeAxis.ticks.length)
@@ -7569,6 +7644,12 @@ return function render(_ctx, _cache) {
                             _createTextVNode(_toDisplayString(_ctx.sysPromptPath || _ctx.t('common.notLoaded')) + " ", 1 /* TEXT */),
                             (_ctx.sysPromptPath)
                               ? (_openBlock(), _createElementBlock("span", { key: 0 }, " （" + _toDisplayString(_ctx.sysPromptExists ? _ctx.t('common.exists') : _ctx.t('common.notExistsWillCreateOnSave')) + "） ", 1 /* TEXT */))
+                              : _createCommentVNode("v-if", true),
+                            (_ctx.sysPromptPath)
+                              ? (_openBlock(), _createElementBlock("span", {
+                                  key: 1,
+                                  class: "prompts-token-hint"
+                                }, "· " + _toDisplayString(_ctx.t('prompts.tokenCount.hint', { count: _ctx.sysPromptTokenCount })), 1 /* TEXT */))
                               : _createCommentVNode("v-if", true)
                           ]),
                           _createElementVNode("div", { class: "prompts-editor-actions" }, [
@@ -7793,9 +7874,20 @@ return function render(_ctx, _cache) {
                         _createElementVNode("div", { class: "form-group" }, [
                           (_ctx.sysPromptDiffVisible)
                             ? (_openBlock(), _createElementBlock("div", { key: 0 }, [
-                                (!_ctx.sysPromptDiffLoading && !_ctx.sysPromptDiffError && !_ctx.sysPromptDiffTruncated && (_ctx.sysPromptDiffStats.added || _ctx.sysPromptDiffStats.removed))
+                                (!_ctx.sysPromptDiffLoading && !_ctx.sysPromptDiffError)
                                   ? (_openBlock(), _createElementBlock("div", {
                                       key: 0,
+                                      class: "agents-diff-token-summary"
+                                    }, [
+                                      _createElementVNode("span", { class: "agents-diff-token-label" }, _toDisplayString(_ctx.t('prompts.tokenCount.diff', { before: _ctx.sysPromptDiffTokenStats.before, current: _ctx.sysPromptDiffTokenStats.current })), 1 /* TEXT */),
+                                      _createElementVNode("span", {
+                                        class: _normalizeClass(['agents-diff-token-delta', 'agents-diff-token-delta--' + _ctx.sysPromptDiffTokenStats.deltaKind])
+                                      }, _toDisplayString(_ctx.sysPromptDiffTokenStats.deltaLabel), 3 /* TEXT, CLASS */)
+                                    ]))
+                                  : _createCommentVNode("v-if", true),
+                                (!_ctx.sysPromptDiffLoading && !_ctx.sysPromptDiffError && !_ctx.sysPromptDiffTruncated && (_ctx.sysPromptDiffStats.added || _ctx.sysPromptDiffStats.removed))
+                                  ? (_openBlock(), _createElementBlock("div", {
+                                      key: 1,
                                       class: "agents-diff-summary"
                                     }, [
                                       _createElementVNode("span", { class: "agents-diff-stat add" }, "+" + _toDisplayString(_ctx.sysPromptDiffStats.added), 1 /* TEXT */),
@@ -7804,26 +7896,26 @@ return function render(_ctx, _cache) {
                                   : _createCommentVNode("v-if", true),
                                 (_ctx.sysPromptDiffLoading)
                                   ? (_openBlock(), _createElementBlock("div", {
-                                      key: 1,
+                                      key: 2,
                                       class: "state-message"
                                     }, _toDisplayString(_ctx.t('diff.generating')), 1 /* TEXT */))
                                   : (_ctx.sysPromptDiffError)
                                     ? (_openBlock(), _createElementBlock("div", {
-                                        key: 2,
+                                        key: 3,
                                         class: "state-message error"
                                       }, _toDisplayString(_ctx.sysPromptDiffError), 1 /* TEXT */))
                                     : (_ctx.sysPromptDiffTruncated)
                                       ? (_openBlock(), _createElementBlock("div", {
-                                          key: 3,
+                                          key: 4,
                                           class: "agents-diff-empty"
                                         }, _toDisplayString(_ctx.t('diff.tooLargeSkip')), 1 /* TEXT */))
                                       : (!_ctx.sysPromptDiffHasChangesValue)
                                         ? (_openBlock(), _createElementBlock("div", {
-                                            key: 4,
+                                            key: 5,
                                             class: "agents-diff-empty"
                                           }, _toDisplayString(_ctx.t('diff.noChanges')), 1 /* TEXT */))
                                         : (_openBlock(), _createElementBlock("div", {
-                                            key: 5,
+                                            key: 6,
                                             class: "prompts-diff-frame"
                                           }, [
                                             (_ctx.sysChangeAxis.ticks.length)

package/web-ui/session-helpers.mjs

@@ -383,7 +383,7 @@ export async function loadActiveSessionDetail(api, options = {}) {
             sessionId: this.activeSession.sessionId,
             filePath: this.activeSession.filePath,
             messageLimit,
-            preview
+            preview,
         });
 
         if (requestSeq !== this.sessionDetailRequestSeq) {

package/web-ui/styles/base-theme.css

@@ -15,6 +15,7 @@
     --color-surface-alt: #F7EFE8;
     --color-surface-elevated: #FFFFFF;
     --color-surface-tint: rgba(255, 253, 250, 0.86);
+    --color-surface-chip: rgba(255, 255, 255, 0.76);
     --color-text-primary: #241F1C;
     --color-text-secondary: #5A504A;
     --color-text-tertiary: #82746A;
@@ -289,3 +290,27 @@ body::before {
         radial-gradient(circle at 86% 18%, rgba(255, 232, 206, 0.36), rgba(255, 232, 206, 0) 30%);
     z-index: 0;
 }
+
+/* Site-wide custom scrollbars (class-scoped scrollbar-width:none rules keep priority via specificity) */
+* {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(137, 111, 94, 0.35) transparent;
+}
+
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgba(137, 111, 94, 0.35);
+    border-radius: 999px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(137, 111, 94, 0.55);
+}

package/web-ui/styles/controls-forms.css

@@ -157,7 +157,7 @@
     line-height: 1 !important;
     border-radius: var(--radius-sm) !important;
     border: 1px solid var(--color-border-soft) !important;
-    background: rgba(255, 255, 255, 0.76) !important;
+    background: var(--color-surface-chip) !important;
     font-size: 12px !important;
     font-weight: var(--font-weight-secondary) !important;
     color: var(--color-text-secondary) !important;

package/web-ui/styles/modals-core.css

@@ -456,6 +456,54 @@
     font-weight: var(--font-weight-secondary);
 }
 
+.agents-diff-token-summary {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+    font-size: var(--font-size-caption);
+    color: var(--color-text-tertiary);
+}
+
+.agents-diff-token-label {
+    display: inline-flex;
+    align-items: center;
+}
+
+.agents-diff-token-delta {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 8px;
+    border-radius: 999px;
+    border: 1px solid transparent;
+    font-weight: var(--font-weight-secondary);
+    font-variant-numeric: tabular-nums;
+}
+
+.agents-diff-token-delta--add {
+    color: #2b6a3b;
+    background: rgba(57, 181, 97, 0.12);
+    border-color: rgba(57, 181, 97, 0.2);
+}
+
+.agents-diff-token-delta--del {
+    color: #8a2f36;
+    background: rgba(220, 95, 108, 0.12);
+    border-color: rgba(220, 95, 108, 0.2);
+}
+
+.agents-diff-token-delta--same {
+    color: var(--color-text-tertiary);
+    background: rgba(127, 127, 127, 0.1);
+    border-color: rgba(127, 127, 127, 0.2);
+}
+
+.prompts-token-hint {
+    margin-left: 4px;
+    color: var(--color-text-tertiary);
+    font-variant-numeric: tabular-nums;
+}
+
 .agents-diff-summary {
     display: flex;
     align-items: center;

package/web-ui/styles/sessions-list.css

@@ -375,7 +375,7 @@
     grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
     gap: var(--spacing-md);
     align-items: start;
-    height: min(72vh, 760px);
+    height: min(760px, calc(100dvh - 340px));
     min-height: 360px;
 }
 

package/web-ui/styles/sessions-preview.css

@@ -632,13 +632,6 @@
 
     .session-source-pills {
         max-width: 100%;
-        overflow-x: auto;
-        flex-wrap: nowrap;
-        scrollbar-width: none;
-    }
-
-    .session-source-pills::-webkit-scrollbar {
-        display: none;
     }
 
     .session-path-select,
@@ -709,3 +702,59 @@
     transform: none;
     box-shadow: none;
 }
+
+
+.session-match-nav-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.12));
+    border-radius: var(--radius-sm, 6px);
+    background: transparent;
+    color: var(--text-secondary, inherit);
+    cursor: pointer;
+}
+
+.session-match-nav-btn svg {
+    width: 14px;
+    height: 14px;
+}
+
+.session-match-nav-btn:hover {
+    background: var(--bg-hover, rgba(0, 0, 0, 0.06));
+}
+
+.session-match-nav-btn[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Session preview jump buttons (floating bottom-right, persistent top/bottom pair) */
+.session-preview-jump {
+    position: fixed;
+    right: 12px;
+    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
+    z-index: 5;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    pointer-events: none;
+}
+
+.session-preview-jump .session-match-nav-btn {
+    pointer-events: auto;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background: var(--color-surface-elevated, rgba(255, 255, 255, 0.92));
+    box-shadow: var(--shadow-float, 0 4px 16px rgba(0, 0, 0, 0.16));
+}
+
+.session-preview-jump .session-match-nav-btn svg {
+    width: 14px;
+    height: 14px;
+}

package/web-ui/styles/sessions-toolbar-trash.css

@@ -151,6 +151,7 @@
 
 .session-source-pills {
     display: flex;
+    flex-wrap: wrap;
     gap: 3px;
     padding: 2px;
     border-radius: var(--radius-md);
@@ -178,7 +179,7 @@
     -webkit-tap-highlight-color: transparent;
 }
 
-.session-source-pill:hover:not(:disabled) {
+.session-source-pill:hover:not(:disabled):not(.active) {
     color: var(--color-text-secondary);
     background: var(--color-surface);
 }
@@ -611,10 +612,3 @@
     max-width: 100%;
 }
 
-/* ===== Session preview match highlight ===== */
-.session-msg-content mark {
-    background: rgba(200, 121, 99, 0.18);
-    color: var(--color-brand-dark);
-    border-radius: 2px;
-    padding: 0 1px;
-}

package/web-ui/styles/sessions-usage.css

@@ -46,7 +46,7 @@
     -webkit-tap-highlight-color: transparent;
 }
 
-.usage-range-btn:hover:not(:disabled) {
+.usage-range-btn:hover:not(:disabled):not(.active) {
     color: var(--color-text-secondary);
     background: rgba(200, 121, 99, 0.08);
 }

package/web-ui/styles/settings-panel.css

@@ -171,7 +171,7 @@
     left: 3px;
     width: 20px;
     height: 20px;
-    background: white;
+    background: #fff;
     border-radius: 50%;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
     transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
@@ -229,7 +229,7 @@
     flex: 1;
 }
 
-.settings-toggle-group .toggle-btn:hover:not(:disabled) {
+.settings-toggle-group .toggle-btn:hover:not(:disabled):not(.active) {
     color: var(--color-text-secondary);
     background: var(--color-surface);
 }