                <!-- Usage 统计 -->
                <div
                    v-show="mainTab === 'usage'"
                    class="mode-content"
                    id="panel-usage"
                    role="tabpanel"
                    :aria-labelledby="'tab-usage'">
                    <div class="usage-toolbar">
                        <span class="usage-toolbar-title">{{ t('usage.overview') }}</span>
                        <div class="usage-range-group" role="group" :aria-label="t('usage.range.aria')">
                            <button type="button" class="usage-range-btn" :class="{ active: sessionsUsageTimeRange === '7d' }" @click="setSessionsUsageTimeRange('7d')">{{ t('usage.range.7d') }}</button>
                            <button type="button" class="usage-range-btn" :class="{ active: sessionsUsageTimeRange === '30d' }" @click="setSessionsUsageTimeRange('30d')">{{ t('usage.range.30d') }}</button>
                            <button type="button" class="usage-range-btn" :class="{ active: sessionsUsageTimeRange === 'all' }" @click="setSessionsUsageTimeRange('all')">{{ t('usage.range.all') }}</button>
                            <button type="button" class="usage-range-btn usage-range-btn-compare" :class="{ active: sessionsUsageCompareEnabled }" @click="toggleSessionsUsageCompare" :disabled="sessionsUsageTimeRange === 'all'">{{ t('usage.compare.toggle') }}</button>
                            <button type="button" class="usage-range-btn usage-range-btn-icon" @click="loadSessionsUsage({ forceRefresh: true, range: sessionsUsageTimeRange })" :disabled="sessionsUsageLoading" :title="t('usage.refresh')">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="btn-icon-sm"><path d="M21 2v6h-6M3 12a9 9 0 0 1 15-6.7L21 8M3 22v-6h6M21 12a9 9 0 0 1-15 6.7L3 16"/></svg>
                            </button>
                        </div>
                    </div>

                    <div v-if="sessionsUsageLoading && !sessionsUsageList.length" class="session-empty">{{ t('usage.loading') }}</div>
                    <div v-else-if="sessionsUsageError && !sessionsUsageList.length" class="usage-empty">{{ sessionsUsageError }}</div>
                    <div v-else-if="!sessionsUsageList.length" class="usage-empty">{{ t('usage.empty') }}</div>
                    <template v-else>
                        <div class="usage-content" :class="{ 'usage-content-loading': sessionsUsageLoading }">
                            <div v-if="sessionsUsageLoading" class="usage-content-overlay" aria-live="polite">
                                <span class="usage-spinner" aria-hidden="true"></span>
                            </div>

                            <div v-if="usageCurrentSessionStats" class="usage-current-session-bar">
                                <span class="usage-current-session-dot"></span>
                                <span class="usage-current-session-label">{{ usageCurrentSessionStats.label }}</span>
                                <span class="usage-current-session-stat">{{ usageCurrentSessionStats.tokenLabel }} tokens</span>
                                <span class="usage-current-session-stat">{{ usageCurrentSessionStats.apiDurationLabel }} API</span>
                                <span class="usage-current-session-stat">{{ usageCurrentSessionStats.totalDurationLabel }} total</span>
                            </div>

                            <div class="usage-summary-grid">
                                <div v-for="card in sessionUsageSummaryCards" :key="card.key" class="usage-summary-card" :title="card.title || ''">
                                    <div class="usage-summary-card-value">{{ card.value }}</div>
                                    <div class="usage-summary-card-label">{{ card.label }}</div>
                                </div>
                            </div>

                            <section v-if="sessionUsageDaily && sessionUsageDaily.rows.length" class="usage-card">
                                <div class="usage-card-head">
                                    <div class="usage-card-title">{{ t('usage.daily.title') }}</div>
                                    <div class="usage-card-subtitle">{{ t('usage.daily.subtitle') }}</div>
                                </div>
                                <div class="usage-daily-chart">
                                    <div v-for="day in sessionUsageDaily.rows" :key="day.key" class="usage-daily-bar-group" @click="selectSessionsUsageDay(day.key)" :class="{ active: sessionsUsageSelectedDay === day.key }">
                                        <div class="usage-daily-bar-stack">
                                            <div class="usage-daily-bar-fill" :style="{ height: day.tokenPercent + '%' }"></div>
                                            <div v-if="day.compareEnabled" class="usage-daily-bar-prev" :style="{ height: day.prevTokenPercent + '%' }"></div>
                                        </div>
                                        <div class="usage-daily-bar-label">{{ day.label }}</div>
                                    </div>
                                </div>
                                <div class="usage-daily-legend">
                                    <span class="usage-daily-legend-item"><span class="usage-daily-legend-swatch current"></span>{{ t('usage.legend.current') }}</span>
                                    <span v-if="sessionsUsageCompareEnabled" class="usage-daily-legend-item"><span class="usage-daily-legend-swatch prev"></span>{{ t('usage.compare.prev') }}</span>
                                </div>
                                <template v-if="sessionsUsageSelectedDaySummary">
                                    <div class="usage-daydetail">
                                        <div class="usage-daydetail-header">
                                            <span class="usage-daydetail-date">{{ sessionsUsageSelectedDaySummary.dayKey }}</span>
                                            <span class="usage-daydetail-stats">{{ sessionsUsageSelectedDaySummary.sessionCount }} sessions · {{ sessionsUsageSelectedDaySummary.tokenLabel }} tokens</span>
                                        </div>
                                        <div v-if="sessionsUsageSelectedDaySummary.compareEnabled" class="usage-daydetail-compare">
                                            {{ t('usage.compare.prev') }} {{ sessionsUsageSelectedDaySummary.prevTokenLabel }} tokens · {{ t('usage.compare.delta') }} {{ sessionsUsageSelectedDaySummary.deltaTokenLabel }}
                                        </div>
                                    </div>
                                </template>
                            </section>

                            <div class="usage-chart-grid">
                                <section class="usage-card usage-card-hourly-heatmap">
                                    <div class="usage-card-title">{{ t('usage.hourlyHeatmap.title') }}</div>
                                    <div class="hourly-heatmap-wrapper">
                                        <div class="hourly-heatmap-header">
                                            <div class="hourly-heatmap-corner"></div>
                                            <div v-for="h in 24" :key="'hdr-' + h" class="hourly-heatmap-hour-label">{{ h - 1 }}</div>
                                        </div>
                                        <div v-for="row in sessionUsageHeatmap.rows" :key="row.weekday" class="hourly-heatmap-row">
                                            <div class="hourly-heatmap-weekday-label">{{ row.weekday }}</div>
                                            <div v-for="cell in row.cells" :key="'cell-' + row.weekday + '-' + cell.hour" :class="['hourly-heatmap-cell', 'level-' + cell.level]" :title="cell.tooltip"></div>
                                        </div>
                                    </div>
                                    <div class="hourly-heatmap-legend">
                                        <span class="hourly-heatmap-legend-label">{{ t('usage.hourlyHeatmap.legend.less') }}</span>
                                        <span class="hourly-heatmap-cell level-0"></span>
                                        <span class="hourly-heatmap-cell level-1"></span>
                                        <span class="hourly-heatmap-cell level-2"></span>
                                        <span class="hourly-heatmap-cell level-3"></span>
                                        <span class="hourly-heatmap-cell level-4"></span>
                                        <span class="hourly-heatmap-legend-label">{{ t('usage.hourlyHeatmap.legend.more') }}</span>
                                    </div>
                                </section>

                                <section class="usage-card">
                                    <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">
                                        <div v-for="item in sessionUsageCharts.topPaths" :key="item.path" class="usage-list-row">
                                            <div class="usage-list-path" :title="item.path">{{ item.path }}</div>
                                            <div class="usage-list-stat">{{ item.count }}</div>
                                            <div class="usage-progress"><div class="usage-progress-fill" :style="{ width: ((item.count / Math.max((sessionUsageCharts.topPaths.length ? sessionUsageCharts.topPaths[0].count : 1), 1)) * 100) + '%' }"></div></div>
                                        </div>
                                    </div>
                                </section>

                                <section class="usage-card">
                                    <div class="usage-card-title">{{ t('usage.sessions.topDensity') }}</div>
                                    <div v-if="!sessionUsageCharts.topSessionsByMessages.length" class="usage-list-value">{{ t('usage.sessions.empty') }}</div>
                                    <div v-else class="usage-list">
                                        <div v-for="item in sessionUsageCharts.topSessionsByMessages" :key="item.key + '-dense'" class="usage-list-row">
                                            <div class="usage-list-title" :title="item.title">{{ item.title }}</div>
                                            <div class="usage-list-stat">{{ item.messageCount }}</div>
                                            <div class="usage-list-meta">{{ item.sourceLabel }} · {{ item.updatedAtLabel }}</div>
                                        </div>
                                    </div>
                                </section>

                                <section class="usage-card">
                                    <div class="usage-card-title">{{ t('usage.recent.title') }}</div>
                                    <div v-if="!sessionUsageCharts.recentSessions.length" class="usage-list-value">{{ t('usage.sessions.empty') }}</div>
                                    <div v-else class="usage-list">
                                        <div v-for="item in sessionUsageCharts.recentSessions" :key="item.key" class="usage-list-row">
                                            <div class="usage-list-title" :title="item.title">{{ item.title }}</div>
                                            <span :class="['pill', item.source === 'codex' ? 'configured' : 'empty']">{{ item.sourceLabel }}</span>
                                            <div class="usage-list-meta">{{ item.messageCount }} msgs · {{ item.updatedAtLabel }}</div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </div>
                    </template>
                </div>