codexmate 0.0.36 → 0.0.38

package/README.md

@@ -15,6 +15,7 @@
 [![Version](https://img.shields.io/npm/v/codexmate?style=flat-square&color=A179FF)](https://www.npmjs.com/package/codexmate)
 [![Build](https://img.shields.io/github/actions/workflow/status/SakuraByteCore/codexmate/release.yml?style=flat-square&color=44cc11)](https://github.com/SakuraByteCore/codexmate/actions/workflows/release.yml)
 [![Downloads](https://img.shields.io/npm/dt/codexmate?style=flat-square)](https://www.npmjs.com/package/codexmate)
+[![Install](https://img.shields.io/badge/install-brew%20%7C%20curl%20%7C%20npm-0A0?style=flat-square)](#install-via-homebrew-macos--linux)
 [![Platform](https://img.shields.io/badge/platform-Termux%20%7C%20Linux%20%7C%20macOS%20%7C%20Windows-555?style=flat-square)](#quick-start)
 [![Node](https://img.shields.io/node/v/codexmate?style=flat-square&logo=node.js&logoColor=white)](https://nodejs.org/)
 [![License](https://img.shields.io/npm/l/codexmate?style=flat-square)](LICENSE)
@@ -70,11 +71,19 @@ Unlike simple wrappers, Codex Mate acts as a **Local Agent Bridge**:
 
 ## Quick Start
 
+### Install via Homebrew (macOS / Linux)
+
+```bash
+brew tap SakuraByteCore/codexmate
+brew install codexmate
+```
+
+Requires [Node.js](https://nodejs.org/) (`brew install node` if not present).
+
 ### Install via npm
 
 ```bash
 npm install -g codexmate
-codexmate setup
 codexmate run
 ```
 
@@ -102,7 +111,7 @@ flowchart TD
     CLI[CLI]
     WebUI[Web UI]
     MCP[MCP Server]
-    
+
     subgraph Mate [Codex Mate Core]
         API[HTTP API]
         Config[Config Engine]
@@ -110,7 +119,7 @@ flowchart TD
         Skills[Skills Market]
         Tasks[Task Runner]
     end
-    
+
     subgraph Local [Local Filesystem]
         CodexDir[~/.codex]
         ClaudeDir[~/.claude]
@@ -120,9 +129,9 @@ flowchart TD
 
     User --> CLI & WebUI & MCP
     CLI & WebUI & MCP --> API
-    
+
     API --> Config & Session & Skills & Tasks
-    
+
     Config --> CodexDir & ClaudeDir & ClawDir
     Session --> State
     Skills --> Local

package/README.zh.md

@@ -15,6 +15,7 @@
 [![Version](https://img.shields.io/npm/v/codexmate?style=flat-square&color=A179FF)](https://www.npmjs.com/package/codexmate)
 [![Build](https://img.shields.io/github/actions/workflow/status/SakuraByteCore/codexmate/release.yml?style=flat-square&color=44cc11)](https://github.com/SakuraByteCore/codexmate/actions/workflows/release.yml)
 [![Downloads](https://img.shields.io/npm/dt/codexmate?style=flat-square)](https://www.npmjs.com/package/codexmate)
+[![Install](https://img.shields.io/badge/install-brew%20%7C%20curl%20%7C%20npm-0A0?style=flat-square)](#homebrew-安装macos--linux)
 [![Platform](https://img.shields.io/badge/platform-Termux%20%7C%20Linux%20%7C%20macOS%20%7C%20Windows-555?style=flat-square)](#快速开始)
 [![Node](https://img.shields.io/node/v/codexmate?style=flat-square&logo=node.js&logoColor=white)](https://nodejs.org/)
 [![License](https://img.shields.io/npm/l/codexmate?style=flat-square)](LICENSE)
@@ -70,11 +71,19 @@
 
 ## 快速开始
 
+### Homebrew 安装（macOS / Linux）
+
+```bash
+brew tap SakuraByteCore/codexmate
+brew install codexmate
+```
+
+需要 [Node.js](https://nodejs.org/)（如未安装可执行 `brew install node`）。
+
 ### 通过 npm 安装
 
 ```bash
 npm install -g codexmate
-codexmate setup
 codexmate run
 ```
 
@@ -102,7 +111,7 @@ flowchart TD
     CLI[CLI 命令]
     WebUI[Web 界面]
     MCP[MCP 服务]
-    
+
     subgraph Mate [Codex Mate 核心]
         API[HTTP API]
         Config[配置引擎]
@@ -110,7 +119,7 @@ flowchart TD
         Skills[Skills 市场]
         Tasks[任务运行器]
     end
-    
+
     subgraph Local [本地文件系统]
         CodexDir[~/.codex]
         ClaudeDir[~/.claude]
@@ -120,9 +129,9 @@ flowchart TD
 
     User --> CLI & WebUI & MCP
     CLI & WebUI & MCP --> API
-    
+
     API --> Config & Session & Skills & Tasks
-    
+
     Config --> CodexDir & ClaudeDir & ClawDir
     Session --> State
     Skills --> Local

package/cli/analytics-export-args.js

@@ -0,0 +1,68 @@
+function parseAnalyticsExportArgs(args = []) {
+    const options = {
+        format: 'csv',
+        source: 'all',
+        output: ''
+    };
+    const errors = [];
+    for (let index = 0; index < args.length; index += 1) {
+        const token = String(args[index] || '');
+        const readValue = (flag) => {
+            if (token.startsWith(`${flag}=`)) {
+                return token.slice(flag.length + 1);
+            }
+            const value = args[index + 1];
+            index += 1;
+            return value;
+        };
+        if (token === '--format' || token.startsWith('--format=')) {
+            options.format = String(readValue('--format') || '').trim().toLowerCase();
+            continue;
+        }
+        if (token === '--from' || token.startsWith('--from=')) {
+            options.from = String(readValue('--from') || '').trim();
+            continue;
+        }
+        if (token === '--to' || token.startsWith('--to=')) {
+            options.to = String(readValue('--to') || '').trim();
+            continue;
+        }
+        if (token === '--model' || token.startsWith('--model=')) {
+            options.model = String(readValue('--model') || '').trim();
+            continue;
+        }
+        if (token === '--source' || token.startsWith('--source=')) {
+            options.source = String(readValue('--source') || '').trim().toLowerCase();
+            continue;
+        }
+        if (token === '--output' || token === '-o' || token.startsWith('--output=')) {
+            options.output = String(readValue(token === '-o' ? '-o' : '--output') || '').trim();
+            continue;
+        }
+        if (token === '--force-refresh') {
+            options.forceRefresh = true;
+            continue;
+        }
+        if (token === '--help' || token === '-h') {
+            options.help = true;
+            continue;
+        }
+        if (token) {
+            errors.push(`未知参数 ${token}`);
+        }
+    }
+    if (options.format !== 'csv' && options.format !== 'json') {
+        errors.push('--format 必须是 csv 或 json');
+    }
+    if (options.source && !['codex', 'claude', 'gemini', 'codebuddy', 'all'].includes(options.source)) {
+        errors.push('--source 必须是 codex、claude、gemini、codebuddy 或 all');
+    }
+    return {
+        options,
+        error: errors.join('；')
+    };
+}
+
+module.exports = {
+    parseAnalyticsExportArgs
+};

package/cli/session-usage.js

@@ -113,6 +113,192 @@ async function listSessionUsageCore(params = {}, deps = {}) {
     return normalizedSessions.filter(Boolean);
 }
 
+function readNonNegativeInteger(value) {
+    const numeric = Number(value);
+    if (!Number.isFinite(numeric) || numeric < 0) {
+        return 0;
+    }
+    return Math.floor(numeric);
+}
+
+function parseUsageExportDate(value, boundary) {
+    if (value === undefined || value === null || value === '') {
+        return null;
+    }
+    if (value instanceof Date) {
+        const time = value.getTime();
+        return Number.isFinite(time) ? time : NaN;
+    }
+    const raw = String(value).trim();
+    if (!raw) {
+        return null;
+    }
+    const dateOnly = raw.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+    if (dateOnly) {
+        const year = Number(dateOnly[1]);
+        const month = Number(dateOnly[2]) - 1;
+        const day = Number(dateOnly[3]);
+        const start = Date.UTC(year, month, day);
+        const normalized = new Date(start);
+        if (!Number.isFinite(start)
+            || normalized.getUTCFullYear() !== year
+            || normalized.getUTCMonth() !== month
+            || normalized.getUTCDate() !== day) {
+            return NaN;
+        }
+        return boundary === 'end' ? start + 24 * 60 * 60 * 1000 : start;
+    }
+    const parsed = Date.parse(raw);
+    return Number.isFinite(parsed) ? parsed : NaN;
+}
+
+function formatUsageExportDay(timestamp) {
+    return new Date(timestamp).toISOString().slice(0, 10);
+}
+
+function normalizeUsageExportFormat(value) {
+    const normalized = typeof value === 'string' ? value.trim().toLowerCase() : '';
+    return normalized === 'json' ? 'json' : 'csv';
+}
+
+function normalizeUsageExportModelFilters(params = {}) {
+    const raw = [];
+    const push = (value) => {
+        if (Array.isArray(value)) {
+            value.forEach(push);
+            return;
+        }
+        if (typeof value !== 'string') {
+            return;
+        }
+        value.split(',').forEach((item) => {
+            const normalized = item.trim().toLowerCase();
+            if (normalized) raw.push(normalized);
+        });
+    };
+    push(params.model);
+    push(params.models);
+    // API-facing alias: callers may pass modelType when they reuse usage filters
+    // outside the CLI flag surface.
+    push(params.modelType);
+    return [...new Set(raw)];
+}
+
+function sessionMatchesUsageExportModelFilters(session, filters) {
+    if (!filters.length) {
+        return true;
+    }
+    const models = [];
+    if (typeof session.model === 'string') models.push(session.model);
+    if (Array.isArray(session.models)) models.push(...session.models.filter(item => typeof item === 'string'));
+    const normalizedModels = models.map(item => item.trim().toLowerCase()).filter(Boolean);
+    return filters.some(filter => normalizedModels.some(model => model === filter || model.includes(filter)));
+}
+
+function escapeUsageCsvCell(value) {
+    const raw = value === undefined || value === null ? '' : String(value);
+    if (!/[",\n\r]/.test(raw)) {
+        return raw;
+    }
+    return `"${raw.replace(/"/g, '""')}"`;
+}
+
+function serializeUsageExportRowsToCsv(rows) {
+    const columns = ['date', 'model', 'tokens', 'sessions'];
+    const lines = [columns.join(',')];
+    for (const row of rows) {
+        lines.push(columns.map(column => escapeUsageCsvCell(row[column])).join(','));
+    }
+    return lines.join('\r\n') + '\r\n';
+}
+
+function buildUsageExportRows(sessions = [], params = {}) {
+    const fromTime = parseUsageExportDate(params.from ?? params.startDate, 'start');
+    const toTime = parseUsageExportDate(params.to ?? params.endDate, 'end');
+    if (Number.isNaN(fromTime)) {
+        return { error: 'Invalid from date' };
+    }
+    if (Number.isNaN(toTime)) {
+        return { error: 'Invalid to date' };
+    }
+    if (fromTime !== null && toTime !== null && fromTime >= toTime) {
+        return { error: 'from date must be before to date' };
+    }
+
+    const modelFilters = normalizeUsageExportModelFilters(params);
+    const groups = new Map();
+    for (const session of Array.isArray(sessions) ? sessions : []) {
+        if (!session || typeof session !== 'object' || Array.isArray(session)) {
+            continue;
+        }
+        if (!sessionMatchesUsageExportModelFilters(session, modelFilters)) {
+            continue;
+        }
+        const timestamp = Date.parse(session.updatedAt || session.createdAt || '');
+        if (!Number.isFinite(timestamp)) {
+            continue;
+        }
+        if (fromTime !== null && timestamp < fromTime) {
+            continue;
+        }
+        if (toTime !== null && timestamp >= toTime) {
+            continue;
+        }
+        const model = typeof session.model === 'string' && session.model.trim()
+            ? session.model.trim()
+            : (Array.isArray(session.models) && typeof session.models[0] === 'string' ? session.models[0].trim() : 'unknown');
+        if (!model) {
+            continue;
+        }
+        const date = formatUsageExportDay(timestamp);
+        const key = `${date}\u0000${model}`;
+        const current = groups.get(key) || { date, model, tokens: 0, sessions: 0 };
+        current.tokens += readNonNegativeInteger(session.totalTokens ?? session.tokens);
+        current.sessions += 1;
+        groups.set(key, current);
+    }
+
+    const rows = [...groups.values()].sort((a, b) => {
+        const dateCompare = a.date.localeCompare(b.date);
+        if (dateCompare !== 0) return dateCompare;
+        return a.model.localeCompare(b.model);
+    });
+    return { rows };
+}
+
+async function exportSessionUsageCore(params = {}, deps = {}) {
+    const listSessionUsage = typeof deps.listSessionUsage === 'function'
+        ? deps.listSessionUsage
+        : (options) => listSessionUsageCore(options, deps);
+    const sessions = Array.isArray(params.sessions)
+        ? params.sessions
+        : await listSessionUsage({
+            source: params.source,
+            limit: params.limit,
+            forceRefresh: !!params.forceRefresh
+        });
+    const built = buildUsageExportRows(sessions, params);
+    if (built.error) {
+        return { error: built.error };
+    }
+    const format = normalizeUsageExportFormat(params.format);
+    const rows = built.rows;
+    const content = format === 'json'
+        ? JSON.stringify({ rows }, null, 2) + '\n'
+        : serializeUsageExportRowsToCsv(rows);
+    const extension = format === 'json' ? 'json' : 'csv';
+    return {
+        format,
+        mimeType: format === 'json' ? 'application/json' : 'text/csv',
+        fileName: `usage-export.${extension}`,
+        rows,
+        content
+    };
+}
+
 module.exports = {
-    listSessionUsageCore
+    listSessionUsageCore,
+    buildUsageExportRows,
+    exportSessionUsageCore,
+    serializeUsageExportRowsToCsv
 };

package/cli.js

@@ -162,7 +162,8 @@ const {
     extractSessionDetailPreviewFromTailText,
     extractSessionDetailPreviewFromFileFast
 } = require('./lib/cli-sessions');
-const { listSessionUsageCore } = require('./cli/session-usage');
+const { listSessionUsageCore, exportSessionUsageCore } = require('./cli/session-usage');
+const { parseAnalyticsExportArgs } = require('./cli/analytics-export-args');
 const {
     readBundledWebUiCss,
     readBundledWebUiHtml,
@@ -5204,6 +5205,12 @@ async function listSessionUsage(params = {}) {
     });
 }
 
+async function exportSessionUsage(params = {}) {
+    return exportSessionUsageCore(params, {
+        listSessionUsage
+    });
+}
+
 function listSessionPaths(params = {}) {
     const source = typeof params.source === 'string' ? params.source.trim().toLowerCase() : '';
     if (source && source !== 'codex' && source !== 'claude' && source !== 'gemini' && source !== 'codebuddy' && source !== 'all') {
@@ -9796,6 +9803,47 @@ async function cmdExportSession(args = []) {
     console.log();
 }
 
+function printAnalyticsUsage() {
+    console.log('\n用法:');
+    console.log('  codexmate analytics export [--format csv|json] [--from YYYY-MM-DD] [--to YYYY-MM-DD] [--model <MODEL>] [--source <codex|claude|gemini|codebuddy|all>] [--output <PATH|->] [-o <PATH|->]');
+    console.log('');
+}
+
+async function cmdAnalytics(args = []) {
+    const subcommand = args[0];
+    if (subcommand !== 'export') {
+        printAnalyticsUsage();
+        process.exit(subcommand ? 1 : 0);
+    }
+    const parsed = parseAnalyticsExportArgs(args.slice(1));
+    if (parsed.options.help) {
+        printAnalyticsUsage();
+        process.exit(0);
+    }
+    if (parsed.error) {
+        console.error('错误:', parsed.error);
+        printAnalyticsUsage();
+        process.exit(1);
+    }
+
+    const result = await exportSessionUsage(parsed.options);
+    if (result && result.error) {
+        console.error('导出失败:', result.error);
+        process.exit(1);
+    }
+    const output = parsed.options.output || (result && result.fileName) || `usage-export.${parsed.options.format}`;
+    if (output === '-') {
+        process.stdout.write(result && result.content ? result.content : '');
+        return;
+    }
+    const outputPath = path.resolve(process.cwd(), output);
+    ensureDir(path.dirname(outputPath));
+    fs.writeFileSync(outputPath, result && result.content ? result.content : '', 'utf-8');
+    console.log(`\n✓ Usage 已导出: ${outputPath}`);
+    console.log(`  格式: ${result.format}; rows: ${Array.isArray(result.rows) ? result.rows.length : 0}`);
+    console.log();
+}
+
 function parseStartOptions(args = []) {
     const options = { host: '', noBrowser: false };
     if (!Array.isArray(args)) {
@@ -11077,6 +11125,20 @@ function createWebServer({ htmlPath, assetsDir, webDir, host, port, openBrowser
                                 }
                             }
                             break;
+                        case 'export-sessions-usage':
+                            {
+                                const usageParams = isPlainObject(params) ? params : {};
+                                const source = typeof usageParams.source === 'string' ? usageParams.source.trim().toLowerCase() : '';
+                                if (source && source !== 'codex' && source !== 'claude' && source !== 'gemini' && source !== 'codebuddy' && source !== 'all') {
+                                    result = { error: 'Invalid source. Must be codex, claude, gemini, codebuddy, or all' };
+                                } else {
+                                    result = await exportSessionUsage({
+                                        ...usageParams,
+                                        source: source || 'all'
+                                    });
+                                }
+                            }
+                            break;
                         case 'list-session-paths':
                             {
                                 const source = typeof params.source === 'string' ? params.source.trim().toLowerCase() : '';
@@ -15960,6 +16022,7 @@ function printMainHelp() {
     console.log('  codexmate delete-model <模型> 删除模型');
     console.log('  codexmate workflow <list|get|validate|run|runs>  MCP 工作流中心');
     console.log('  codexmate task <plan|run|runs|queue|retry|cancel|logs>  本地任务编排');
+    console.log('  codexmate analytics export [--format csv|json] [--from YYYY-MM-DD] [--to YYYY-MM-DD] [--model <MODEL>] [--output <PATH|->] [-o <PATH|->]  导出 Usage 数据');
     console.log('  codexmate run [--host <HOST>] [--no-browser]    启动 Web 界面');
     console.log('  codexmate update [--check] 检查并快速更新工具');
     console.log('  codexmate codex [参数...] [--follow-up <文本>|--queued-follow-up <文本> 可重复]  等同于 codex --yolo');
@@ -16052,6 +16115,7 @@ async function main() {
         case 'proxy': await cmdProxy(args.slice(1)); break;
         case 'workflow': await cmdWorkflow(args.slice(1)); break;
         case 'task': await cmdTask(args.slice(1)); break;
+        case 'analytics': await cmdAnalytics(args.slice(1)); break;
         case 'run': cmdStart(parseStartOptions(args.slice(1))); break;
         case 'update': await cmdToolUpdate(args.slice(1)); break;
         case 'start':

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codexmate",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "description": "Codex/Claude Code/OpenClaw 配置、会话与任务编排 CLI + Web 工具",
   "main": "cli.js",
   "bin": {

package/web-ui/app.js

@@ -31,7 +31,6 @@ document.addEventListener('DOMContentLoaded', () => {
     const appOptions = {
         data() {
             return {
-                brandHovered: false,
                 lang: 'zh',
                 appVersion: '',
                 mainTab: 'dashboard',

package/web-ui/modules/skills.methods.mjs

@@ -491,7 +491,7 @@ export function createSkillsMethods({ api }) {
             try {
                 const res = await api('import-skills', {
                     targetApp: this.skillsTargetApp,
-                    imports: [skill]
+                    items: [skill]
                 });
                 if (res && res.error) {
                     this.showMessage(res.error, 'error');

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

@@ -118,11 +118,11 @@
 
         <div :class="['app-shell', { standalone: sessionStandalone }]">
             <aside class="side-rail" v-if="!sessionStandalone">
-                <div class="brand-block" tabindex="0" @mouseenter="brandHovered = true" @mouseleave="brandHovered = false" @focus="brandHovered = true" @blur="brandHovered = false">
+                <div class="brand-block">
                     <div class="brand-head">
                         <img class="brand-logo" src="/res/logo-pack.webp" alt="Codex Mate logo">
                         <div class="brand-copy">
-                            <div class="brand-kicker">Codex Mate<transition name="brand-version-fade"><span v-if="appVersion && brandHovered" class="brand-version"> v{{ appVersion }}</span></transition></div>
+                            <div class="brand-kicker">Codex Mate<span v-if="appVersion" class="brand-version"> v{{ appVersion }}</span></div>
                         </div>
                     </div>
                 </div>
@@ -315,6 +315,10 @@
                         </div>
                     </button>
                 </div>
+                <div id="side-tab-new" class="side-item side-item-ghost" tabindex="-1" aria-hidden="true">
+                    <div class="side-item-title">New Tab</div>
+                    <div class="side-item-meta"><span>&nbsp;</span></div>
+                </div>
                 </div>
 
                 <div class="side-rail-lang" role="group" :aria-label="t('lang.label')">

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

@@ -1,4 +1,4 @@
-                <!-- Usage 统计 - 时光之河设计 -->
+                <!-- Usage 统计 - 流光设计 -->
                 <div
                     v-show="mainTab === 'usage'"
                     class="mode-content"
@@ -71,24 +71,20 @@
                                 </div>
                             </div>
 
-                            <!-- 波浪图：替换柱状图 -->
-                            <section v-if="sessionUsageWave.points && sessionUsageWave.points.length" class="usage-card usage-wave-section">
+                            <!-- 波浪图 -->
+                            <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.3"/>
+                                                <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.4" class="usage-wave-hover-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">
@@ -112,8 +108,8 @@
                             </section>
 
                             <div class="usage-chart-grid">
-                                <!-- 热力图：垂直活动条 -->
-                                <section class="usage-card usage-hourly-heatmap">
+                                <!-- 热力图 -->
+                                <section class="usage-card-hourly-heatmap">
                                     <div class="usage-card-title">{{ t('usage.hourlyHeatmap.title') }}</div>
                                     <div class="hourly-heatmap-wrapper">
                                         <div class="hourly-heatmap-header">
@@ -166,7 +162,7 @@
                                 </section>
 
                                 <!-- Top Paths -->
-                                <section class="usage-card usage-paths-section">
+                                <section class="usage-paths-section">
                                     <div class="usage-card-title">{{ t('usage.paths.title') }}</div>
                                     <div v-if="!sessionUsageCharts.topPaths.length" class="usage-list-value">{{ t('usage.paths.empty') }}</div>
                                     <div v-else class="usage-list-paths">