codexmate 0.0.24 → 0.0.25

package/web-ui/modules/app.methods.install.mjs

@@ -104,6 +104,16 @@ export function createInstallMethods() {
                     update: '',
                     uninstall: ''
                 },
+                codebuddy: {
+                    install: '',
+                    update: '',
+                    uninstall: ''
+                },
+                gemini: {
+                    install: '',
+                    update: '',
+                    uninstall: ''
+                },
                 codex: {
                     install: '',
                     update: '',
@@ -114,6 +124,12 @@ export function createInstallMethods() {
                 matrix.claude.install = 'pnpm add -g @anthropic-ai/claude-code';
                 matrix.claude.update = 'pnpm up -g @anthropic-ai/claude-code';
                 matrix.claude.uninstall = 'pnpm remove -g @anthropic-ai/claude-code';
+                matrix.codebuddy.install = 'pnpm add -g @tencent-ai/codebuddy-code';
+                matrix.codebuddy.update = 'pnpm up -g @tencent-ai/codebuddy-code';
+                matrix.codebuddy.uninstall = 'pnpm remove -g @tencent-ai/codebuddy-code';
+                matrix.gemini.install = 'pnpm add -g @google/gemini-cli';
+                matrix.gemini.update = 'pnpm up -g @google/gemini-cli';
+                matrix.gemini.uninstall = 'pnpm remove -g @google/gemini-cli';
                 matrix.codex.install = `pnpm add -g ${codexInstallPackage}`;
                 matrix.codex.update = `pnpm up -g ${codexPackage}`;
                 matrix.codex.uninstall = `pnpm remove -g ${codexPackage}`;
@@ -123,6 +139,12 @@ export function createInstallMethods() {
                 matrix.claude.install = 'bun add -g @anthropic-ai/claude-code';
                 matrix.claude.update = 'bun update -g @anthropic-ai/claude-code';
                 matrix.claude.uninstall = 'bun remove -g @anthropic-ai/claude-code';
+                matrix.codebuddy.install = 'bun add -g @tencent-ai/codebuddy-code';
+                matrix.codebuddy.update = 'bun update -g @tencent-ai/codebuddy-code';
+                matrix.codebuddy.uninstall = 'bun remove -g @tencent-ai/codebuddy-code';
+                matrix.gemini.install = 'bun add -g @google/gemini-cli';
+                matrix.gemini.update = 'bun update -g @google/gemini-cli';
+                matrix.gemini.uninstall = 'bun remove -g @google/gemini-cli';
                 matrix.codex.install = `bun add -g ${codexInstallPackage}`;
                 matrix.codex.update = `bun update -g ${codexPackage}`;
                 matrix.codex.uninstall = `bun remove -g ${codexPackage}`;
@@ -131,6 +153,12 @@ export function createInstallMethods() {
             matrix.claude.install = 'npm install -g @anthropic-ai/claude-code';
             matrix.claude.update = 'npm update -g @anthropic-ai/claude-code';
             matrix.claude.uninstall = 'npm uninstall -g @anthropic-ai/claude-code';
+            matrix.codebuddy.install = 'npm install -g @tencent-ai/codebuddy-code';
+            matrix.codebuddy.update = 'npm update -g @tencent-ai/codebuddy-code';
+            matrix.codebuddy.uninstall = 'npm uninstall -g @tencent-ai/codebuddy-code';
+            matrix.gemini.install = 'npm install -g @google/gemini-cli';
+            matrix.gemini.update = 'npm update -g @google/gemini-cli';
+            matrix.gemini.uninstall = 'npm uninstall -g @google/gemini-cli';
             matrix.codex.install = `npm install -g ${codexInstallPackage}`;
             matrix.codex.update = platform === 'termux'
                 ? `npm install -g ${codexInstallPackage}`

package/web-ui/modules/app.methods.session-actions.mjs

@@ -117,7 +117,7 @@ export function createSessionActionMethods(options = {}) {
             if (!session) return false;
             const source = String(session.source || '').trim().toLowerCase();
             const sessionId = typeof session.sessionId === 'string' ? session.sessionId.trim() : '';
-            return source === 'codex' && !!sessionId;
+            return (source === 'codex' || source === 'codebuddy' || source === 'gemini') && !!sessionId;
         },
 
         isCloneAvailable(session) {
@@ -138,8 +138,15 @@ export function createSessionActionMethods(options = {}) {
         },
 
         buildResumeCommand(session) {
+            const source = session && session.source ? String(session.source).trim().toLowerCase() : '';
             const sessionId = session && session.sessionId ? String(session.sessionId).trim() : '';
             const arg = this.quoteResumeArg(sessionId);
+            if (source === 'codebuddy') {
+                return `codebuddy -r ${arg}`;
+            }
+            if (source === 'gemini') {
+                return `gemini -r ${arg}`;
+            }
             if (this.sessionResumeWithYolo) {
                 return `codex --yolo resume ${arg}`;
             }

package/web-ui/modules/app.methods.session-browser.mjs

@@ -127,7 +127,9 @@ export function createSessionBrowserMethods(options = {}) {
         },
 
         syncSessionPathOptionsForSource(source, nextOptions, mergeWithExisting = false) {
-            const targetSource = source === 'claude' ? 'claude' : (source === 'all' ? 'all' : 'codex');
+            const targetSource = source === 'claude'
+                ? 'claude'
+                : (source === 'gemini' ? 'gemini' : (source === 'all' ? 'all' : 'codex'));
             const current = Array.isArray(this.sessionPathOptionsMap[targetSource])
                 ? this.sessionPathOptionsMap[targetSource]
                 : [];
@@ -142,7 +144,9 @@ export function createSessionBrowserMethods(options = {}) {
         },
 
         refreshSessionPathOptions(source) {
-            const targetSource = source === 'claude' ? 'claude' : (source === 'all' ? 'all' : 'codex');
+            const targetSource = source === 'claude'
+                ? 'claude'
+                : (source === 'gemini' ? 'gemini' : (source === 'all' ? 'all' : 'codex'));
             const base = Array.isArray(this.sessionPathOptionsMap[targetSource])
                 ? [...this.sessionPathOptionsMap[targetSource]]
                 : [];
@@ -164,7 +168,9 @@ export function createSessionBrowserMethods(options = {}) {
         },
 
         async loadSessionPathOptions(options = {}) {
-            const source = options.source === 'claude' ? 'claude' : (options.source === 'all' ? 'all' : 'codex');
+            const source = options.source === 'claude'
+                ? 'claude'
+                : (options.source === 'gemini' ? 'gemini' : (options.source === 'all' ? 'all' : 'codex'));
             const forceRefresh = !!options.forceRefresh;
             const loaded = !!this.sessionPathOptionsLoadedMap[source];
             if (!forceRefresh && loaded) {
@@ -252,6 +258,9 @@ export function createSessionBrowserMethods(options = {}) {
             const urlState = readSessionsFilterUrlState();
             if (urlState) {
                 applySessionsFilterUrlState(this, urlState);
+                if (this.mainTab === 'sessions' && typeof this.loadSessions === 'function') {
+                    void this.loadSessions();
+                }
                 return;
             }
             const sourceCache = localStorage.getItem('codexmateSessionFilterSource');
@@ -266,6 +275,16 @@ export function createSessionBrowserMethods(options = {}) {
             this.sessionRoleFilter = normalizeSessionRoleFilter(roleCache);
             this.sessionTimePreset = normalizeSessionTimePreset(timeCache);
             this.refreshSessionPathOptions(this.sessionFilterSource);
+            if (this.mainTab === 'sessions' && typeof this.loadSessions === 'function') {
+                const shouldReload = cached.source !== 'all'
+                    || !!cached.pathFilter
+                    || !!(this.sessionQuery && isSessionQueryEnabled(cached.source))
+                    || (this.sessionRoleFilter && this.sessionRoleFilter !== 'all')
+                    || (this.sessionTimePreset && this.sessionTimePreset !== 'all');
+                if (shouldReload) {
+                    void this.loadSessions();
+                }
+            }
         },
 
         persistSessionFilterCache() {
@@ -412,7 +431,12 @@ export function createSessionBrowserMethods(options = {}) {
             this.persistSessionPinnedMap();
         },
 
-        async onSessionSourceChange() {
+        async onSessionSourceChange(event) {
+            const rawValue = event && event.target && typeof event.target.value === 'string'
+                ? event.target.value
+                : this.sessionFilterSource;
+            const cached = buildSessionFilterCacheState(rawValue, this.sessionPathFilter);
+            this.sessionFilterSource = cached.source;
             this.refreshSessionPathOptions(this.sessionFilterSource);
             this.persistSessionFilterCache();
             syncSessionsFilterUrl(this);

package/web-ui/modules/app.methods.session-trash.mjs

@@ -10,13 +10,15 @@ export function createSessionTrashMethods(options = {}) {
             const deletedAt = typeof result.deletedAt === 'string' && result.deletedAt
                 ? result.deletedAt
                 : new Date().toISOString();
-            const source = session && session.source === 'claude' ? 'claude' : 'codex';
+            const source = session && (session.source === 'claude' || session.source === 'gemini')
+                ? session.source
+                : 'codex';
             return {
                 trashId: typeof result.trashId === 'string' ? result.trashId : '',
                 source,
                 sourceLabel: session && typeof session.sourceLabel === 'string' && session.sourceLabel
                     ? session.sourceLabel
-                    : (source === 'claude' ? 'Claude Code' : 'Codex'),
+                    : (source === 'claude' ? 'Claude Code' : (source === 'gemini' ? 'Gemini CLI' : 'Codex')),
                 sessionId: session && typeof session.sessionId === 'string' ? session.sessionId : '',
                 title: session && typeof session.title === 'string' && session.title
                     ? session.title

package/web-ui/modules/i18n.dict.mjs

@@ -257,6 +257,8 @@ const DICT = Object.freeze({
         'dashboard.message.none': '暂无提示',
         'dashboard.sessionSource.codex': 'Codex',
         'dashboard.sessionSource.claude': 'Claude Code',
+        'dashboard.sessionSource.gemini': 'Gemini CLI',
+        'dashboard.sessionSource.codebuddy': 'CodeBuddy Code',
         'dashboard.sessionSource.all': '全部',
         'dashboard.sessionPath.all': '全部路径',
         'dashboard.sessionQuery.unsupported': '当前来源不支持',
@@ -502,7 +504,7 @@ const DICT = Object.freeze({
 
         // Docs panel
         'docs.title': 'CLI 安装文档',
-        'docs.subtitle': '查看 Claude Code / Codex CLI 命令。',
+        'docs.subtitle': '查看 Claude Code / Gemini CLI / CodeBuddy Code / Codex CLI 命令。',
         'docs.section.commands': '安装命令',
         'docs.section.commandsNote': '命令可直接复制。',
         'docs.section.faq': '常见问题',
@@ -518,10 +520,10 @@ const DICT = Object.freeze({
         'docs.rule.2': '自定义镜像仅用于安装与升级。'
         ,
         'docs.tip.win.1': 'PowerShell 报权限不足（EACCES/EPERM）时，请以管理员身份执行安装命令。',
-        'docs.tip.win.2': '安装后若仍提示找不到命令，重开终端并执行：where codex / where claude。',
+        'docs.tip.win.2': '安装后若仍提示找不到命令，重开终端并执行：where codex / where claude / where gemini / where codebuddy。',
         'docs.tip.win.3': '公司网络受限时，可先切换镜像源快捷项（npmmirror / 腾讯云 / 自定义）。',
         'docs.tip.unix.1': '出现 EACCES 权限错误时，优先修复 Node 全局目录权限，不建议直接 sudo npm。',
-        'docs.tip.unix.2': '安装后若命令未生效，重开终端并执行：which codex / which claude。',
+        'docs.tip.unix.2': '安装后若命令未生效，重开终端并执行：which codex / which claude / which gemini / which codebuddy。',
         'docs.tip.unix.3': '公司网络受限时，可先切换镜像源快捷项（npmmirror / 腾讯云 / 自定义）。'
         ,
 
@@ -533,10 +535,12 @@ const DICT = Object.freeze({
         'sessions.allPaths': '全部路径',
         'sessions.source.codex': 'Codex',
         'sessions.source.claudeCode': 'Claude Code',
+        'sessions.source.gemini': 'Gemini CLI',
+        'sessions.source.codebuddy': 'CodeBuddy Code',
         'sessions.loadingList': '会话加载中...',
         'sessions.empty': '暂无可用会话记录',
         'sessions.unknownTime': '未知时间',
-        'sessions.query.placeholder.enabled': '关键词检索（支持 Codex/Claude，例：claude code）',
+        'sessions.query.placeholder.enabled': '关键词检索（支持 Codex/Claude/Gemini/CodeBuddy，例：claude code）',
         'sessions.query.placeholder.disabled': '当前来源暂不支持关键词检索',
         'sessions.pin': '置顶',
         'sessions.unpin': '取消置顶',
@@ -634,6 +638,10 @@ const DICT = Object.freeze({
         'usage.summary.avgMessagesPerSession': '平均每会话消息',
         'usage.summary.busiestDay': '最忙日',
         'usage.summary.busiestHour': '高峰时段',
+        'usage.currentSession.title': '当前会话',
+        'usage.currentSession.apiDuration': 'API时长',
+        'usage.currentSession.totalDuration': '总时长',
+        'usage.currentSession.tokens': 'Token',
         'usage.range.kicker.all': '全部',
         'usage.range.kicker.30d': '近 30 天',
         'usage.range.kicker.7d': '近 7 天',
@@ -1274,6 +1282,8 @@ const DICT = Object.freeze({
         'dashboard.message.none': 'No messages',
         'dashboard.sessionSource.codex': 'Codex',
         'dashboard.sessionSource.claude': 'Claude Code',
+        'dashboard.sessionSource.gemini': 'Gemini CLI',
+        'dashboard.sessionSource.codebuddy': 'CodeBuddy Code',
         'dashboard.sessionSource.all': 'All',
         'dashboard.sessionPath.all': 'All paths',
         'dashboard.sessionQuery.unsupported': 'Unsupported source',
@@ -1519,7 +1529,7 @@ const DICT = Object.freeze({
 
         // Docs panel
         'docs.title': 'CLI Install',
-        'docs.subtitle': 'Install commands for Claude Code / Codex CLI.',
+        'docs.subtitle': 'Install commands for Claude Code / Gemini CLI / CodeBuddy Code / Codex CLI.',
         'docs.section.commands': 'Commands',
         'docs.section.commandsNote': 'Copy and run directly.',
         'docs.section.faq': 'FAQ',
@@ -1535,10 +1545,10 @@ const DICT = Object.freeze({
         'docs.rule.2': 'Custom registry is used for install/update only.'
         ,
         'docs.tip.win.1': 'If PowerShell reports permission errors (EACCES/EPERM), run the install command as Administrator.',
-        'docs.tip.win.2': 'If the command is still not found after install, reopen the terminal and run: where codex / where claude.',
+        'docs.tip.win.2': 'If the command is still not found after install, reopen the terminal and run: where codex / where claude / where gemini / where codebuddy.',
         'docs.tip.win.3': 'If your network blocks npm, try switching registry presets (npmmirror / Tencent / Custom).',
         'docs.tip.unix.1': 'If you hit EACCES, fix your global Node directory permissions instead of using sudo npm.',
-        'docs.tip.unix.2': 'If the command is not available after install, reopen the terminal and run: which codex / which claude.',
+        'docs.tip.unix.2': 'If the command is not available after install, reopen the terminal and run: which codex / which claude / which gemini / which codebuddy.',
         'docs.tip.unix.3': 'If your network blocks npm, try switching registry presets (npmmirror / Tencent / Custom).'
         ,
 
@@ -1550,10 +1560,12 @@ const DICT = Object.freeze({
         'sessions.allPaths': 'All paths',
         'sessions.source.codex': 'Codex',
         'sessions.source.claudeCode': 'Claude Code',
+        'sessions.source.gemini': 'Gemini CLI',
+        'sessions.source.codebuddy': 'CodeBuddy Code',
         'sessions.loadingList': 'Loading sessions...',
         'sessions.empty': 'No sessions found',
         'sessions.unknownTime': 'unknown time',
-        'sessions.query.placeholder.enabled': 'Search keywords (Codex/Claude, e.g. claude code)',
+        'sessions.query.placeholder.enabled': 'Search keywords (Codex/Claude/Gemini/CodeBuddy, e.g. claude code)',
         'sessions.query.placeholder.disabled': 'Keyword search is not available for this source',
         'sessions.pin': 'Pin',
         'sessions.unpin': 'Unpin',
@@ -1651,6 +1663,10 @@ const DICT = Object.freeze({
         'usage.summary.avgMessagesPerSession': 'Avg messages/session',
         'usage.summary.busiestDay': 'Busiest day',
         'usage.summary.busiestHour': 'Peak hour',
+        'usage.currentSession.title': 'Current session',
+        'usage.currentSession.apiDuration': 'API duration',
+        'usage.currentSession.totalDuration': 'Total duration',
+        'usage.currentSession.tokens': 'Tokens',
         'usage.range.kicker.all': 'All',
         'usage.range.kicker.30d': 'Last 30 days',
         'usage.range.kicker.7d': 'Last 7 days',

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

@@ -214,7 +214,7 @@
                         <div class="side-item-title">{{ t('side.sessions.browser') }}</div>
                         <div class="side-item-meta">
                             <span>{{ t('side.sessions.browser.meta') }}</span>
-                            <span>{{ t('sessions.sourceLabel', { value: (sessionFilterSource === 'all' ? t('sessions.source.all') : (sessionFilterSource === 'codex' ? 'Codex' : 'Claude')) }) }}</span>
+                            <span>{{ t('sessions.sourceLabel', { value: (sessionFilterSource === 'all' ? t('sessions.source.all') : (sessionFilterSource === 'claude' ? 'Claude Code' : (sessionFilterSource === 'gemini' ? 'Gemini CLI' : (sessionFilterSource === 'codebuddy' ? 'CodeBuddy Code' : 'Codex')))) }) }}</span>
                         </div>
                     </button>
                     <button
@@ -369,7 +369,17 @@
                         <div class="status-chip">
                             <span class="label">{{ t('status.currentSource') }}</span>
                             <span class="value">
-                                {{ sessionFilterSource === 'all' ? t('sessions.source.all') : (sessionFilterSource === 'claude' ? 'Claude Code' : 'Codex') }}
+                                {{ sessionFilterSource === 'all'
+                                    ? t('sessions.source.all')
+                                    : (sessionFilterSource === 'codex'
+                                        ? t('sessions.source.codex')
+                                        : (sessionFilterSource === 'claude'
+                                            ? t('sessions.source.claudeCode')
+                                            : (sessionFilterSource === 'gemini'
+                                                ? t('sessions.source.gemini')
+                                                : (sessionFilterSource === 'codebuddy'
+                                                    ? t('sessions.source.codebuddy')
+                                                    : t('sessions.source.codex'))))) }}
                             </span>
                         </div>
                         <div class="status-chip">

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

@@ -24,7 +24,7 @@
                 <div class="selector-section">
                     <div class="selector-header">
                         <span class="selector-title">{{ t('sessions.sourceTitle') }}</span>
-                        <div class="selector-actions">
+                        <div class="selector-actions sessions-header-actions">
                             <button class="btn-tool btn-tool-compact" @click="loadSessions({ forceRefresh: true })" :disabled="sessionsLoading">
                                 {{ sessionsLoading ? t('sessions.refreshing') : t('sessions.refresh') }}
                             </button>
@@ -35,10 +35,12 @@
                     </div>
                     <div class="session-toolbar">
                         <div class="session-toolbar-group session-toolbar-primary">
-                            <select class="session-source-select" v-model="sessionFilterSource" @change="onSessionSourceChange" :disabled="sessionsLoading">
+                            <select class="session-source-select" v-model="sessionFilterSource" @change="onSessionSourceChange($event)" :disabled="sessionsLoading">
                                 <option value="all">{{ t('common.all') }}</option>
                                 <option value="codex">{{ t('sessions.source.codex') }}</option>
                                 <option value="claude">{{ t('sessions.source.claudeCode') }}</option>
+                                <option value="gemini">{{ t('sessions.source.gemini') }}</option>
+                                <option value="codebuddy">{{ t('sessions.source.codebuddy') }}</option>
                             </select>
                             <select
                                 class="session-path-select"

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

@@ -42,6 +42,13 @@
                                 {{ t('usage.refreshOverlay') }}
                             </div>
 
+                            <div v-if="usageCurrentSessionStats" class="usage-current-session-bar">
+                                <span class="usage-current-session-label">{{ usageCurrentSessionStats.label }}</span>
+                                <span class="usage-current-session-item">{{ usageCurrentSessionStats.apiDurationText }} <strong>{{ usageCurrentSessionStats.apiDurationLabel }}</strong></span>
+                                <span class="usage-current-session-item">{{ usageCurrentSessionStats.totalDurationText }} <strong>{{ usageCurrentSessionStats.totalDurationLabel }}</strong></span>
+                                <span class="usage-current-session-item">{{ usageCurrentSessionStats.tokenText }} <strong>{{ usageCurrentSessionStats.tokenLabel }}</strong></span>
+                            </div>
+
                             <div class="usage-summary-grid">
                                 <div
                                     v-for="card in sessionUsageSummaryCards"

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

@@ -18,6 +18,8 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    flex-wrap: nowrap;
+    gap: 10px;
     margin-bottom: 2px;
 }
 
@@ -81,12 +83,57 @@
     text-transform: none;
     letter-spacing: 0.03em;
     opacity: 0.85;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .selector-actions {
-    display: flex;
-    gap: var(--spacing-xs);
+    display: inline-grid;
+    grid-auto-flow: column;
+    grid-auto-columns: max-content;
+    column-gap: var(--spacing-xs);
     align-items: center;
+    justify-content: end;
+    white-space: nowrap;
+    flex: 0 0 auto;
+}
+
+.selector-actions > .btn-tool,
+.selector-actions > .btn-tool-compact {
+    flex: 0 0 auto;
+}
+
+.sessions-header-actions {
+    display: flex !important;
+    flex-direction: row !important;
+    flex-wrap: nowrap !important;
+    align-items: center !important;
+    gap: 8px !important;
+    white-space: nowrap;
+}
+
+.sessions-header-actions > .btn-tool,
+.sessions-header-actions > .btn-tool-compact {
+    display: inline-flex !important;
+    width: auto !important;
+    margin: 0 !important;
+    white-space: nowrap;
+    flex: 0 0 auto;
+    height: 28px !important;
+    min-height: 28px !important;
+    padding: 0 10px !important;
+    line-height: 1 !important;
+    border-radius: 8px !important;
+    border: 1px solid var(--color-border-soft) !important;
+    background: rgba(255, 255, 255, 0.72) !important;
+    font-size: 12px !important;
+    font-weight: var(--font-weight-secondary) !important;
+    color: var(--color-text-secondary) !important;
+    box-shadow: none !important;
+    letter-spacing: -0.01em !important;
+    justify-content: center !important;
 }
 
 .health-report {

package/web-ui/styles/layout-shell.css

@@ -347,6 +347,7 @@ body::after {
     border-radius: 0 2px 2px 0;
     background: transparent;
     transition: background-color var(--transition-fast) var(--ease-smooth);
+    display: none;
 }
 
 .side-item:hover {

package/web-ui/styles/responsive.css

@@ -268,8 +268,6 @@ textarea:focus-visible {
     }
 
     .session-item-title {
-        -webkit-line-clamp: 1;
-        max-height: none;
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;

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

@@ -280,11 +280,9 @@
     font-weight: var(--font-weight-secondary);
     color: var(--color-text-primary);
     line-height: 1.4;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    white-space: normal;
+    white-space: nowrap;
     overflow: hidden;
+    text-overflow: ellipsis;
     flex: 1;
     max-width: none;
 }

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

@@ -2,7 +2,7 @@
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: var(--spacing-xs);
-    margin-bottom: var(--spacing-sm);
+    margin-bottom: var(--spacing-xs);
     align-items: end;
 }
 
@@ -31,9 +31,9 @@
     align-items: center;
     justify-content: flex-end;
     gap: var(--spacing-xs);
-    margin-top: -2px;
-    padding-top: 6px;
-    margin-bottom: 12px;
+    margin-top: -1px;
+    padding-top: 4px;
+    margin-bottom: var(--spacing-xs);
     border-top: 1px dashed var(--color-border-soft);
 }
 

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

@@ -44,6 +44,30 @@
     margin-bottom: 16px;
 }
 
+.usage-current-session-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 12px;
+    margin: 0 0 14px;
+    border-radius: 12px;
+    border: 1px solid var(--color-border-soft);
+    background: var(--color-surface-alt);
+    font-size: 12px;
+    color: var(--color-text-secondary);
+}
+
+.usage-current-session-label {
+    font-weight: 700;
+    color: var(--color-text-primary);
+}
+
+.usage-current-session-item strong {
+    font-weight: 700;
+    color: var(--color-text-primary);
+}
+
 .usage-range-group {
     display: flex;
     gap: 8px;