@jeffusion/bungee-core 5.3.2 → 5.4.0

package/dist/plugins/token-stats/manifest.json

@@ -166,17 +166,27 @@
       "page.title": "Token Statistics",
       "page.viewModels": "View model statistics",
       "ui.refresh": "Refresh",
+      "ui.previousInterval": "vs previous {interval}",
+      "ui.minutes": "min",
+      "ui.hours": "h",
+      "ui.newActivity": "New",
       "page.range": "Time range",
       "page.range.1h": "1 hour",
       "page.range.12h": "12 hours",
       "page.range.24h": "24 hours",
+      "page.range.1d": "Last 1 day",
+      "page.range.7d": "Last 7 days",
+      "page.range.30d": "Last 30 days",
+      "page.range.day": "Today",
+      "page.range.week": "This week",
+      "page.range.month": "This month",
       "page.updatedAt": "Updated at",
       "page.tokens": "Token",
-      "page.activity": "Activity over time",
-      "page.composition": "Token composition",
+      "page.activity": "Token Trend",
       "page.cacheRead": "Cache read",
       "page.cacheWrite": "Cache write",
       "page.sort": "Sort models",
+      "page.models": "Model usage",
       "page.sort.tokens": "Token",
       "page.sort.cost": "Cost",
       "page.searchModels": "Search models",
@@ -238,17 +248,27 @@
       "page.title": "Token 统计",
       "page.viewModels": "查看模型统计",
       "ui.refresh": "刷新",
+      "ui.previousInterval": "较上个{interval}",
+      "ui.minutes": "分钟",
+      "ui.hours": "小时",
+      "ui.newActivity": "新增",
       "page.range": "时间范围",
       "page.range.1h": "1 小时",
       "page.range.12h": "12 小时",
       "page.range.24h": "24 小时",
+      "page.range.1d": "最近1天",
+      "page.range.7d": "最近7天",
+      "page.range.30d": "最近30天",
+      "page.range.day": "本日",
+      "page.range.week": "本周",
+      "page.range.month": "本月",
       "page.updatedAt": "更新于",
       "page.tokens": "Token",
-      "page.activity": "时间活动",
-      "page.composition": "Token 构成",
+      "page.activity": "Token 趋势",
       "page.cacheRead": "缓存读取",
       "page.cacheWrite": "缓存写入",
       "page.sort": "模型排序",
+      "page.models": "模型用量",
       "page.sort.tokens": "Token",
       "page.sort.cost": "费用",
       "page.searchModels": "搜索模型",

package/dist/plugins/token-stats/ui/TokenStatsMetric.svelte

@@ -4,26 +4,33 @@
   import { _, formatCompactNumber, type TimeRange } from '@bungee/plugin-sdk';
   import { getPluginText } from '$utils/plugin-i18n';
   import { LoadingIndicator } from '$components/industrial';
+  import KpiTrendValue from '$components/industrial/KpiTrendValue.svelte';
   import type { NativeWidgetHeaderChange } from '$components/native-widgets/widget-header';
   import { estimatedTokens, formatEstimatedUsd, formatTokenCount, usagePresentation } from './labels';
   import { getStatsResource } from './stats';
   import type { StatsState, StatsResource } from './stats-resource';
+  import { overviewTrends } from './overview-trends';
 
   let { pluginName = 'token-stats', selectedRange = '24h', onHeaderChange }:
     { pluginName?: string; selectedRange?: TimeRange; onHeaderChange?: NativeWidgetHeaderChange } = $props();
   let state: StatsState = $state({ data: null, busy: false, error: '', refreshedAt: 0 });
   let resource: StatsResource | undefined = $state();
-  const t = (key: string) => $isLoading ? '' : getPluginText(key, pluginName, (id, options) => $_(id, options));
+  const t = (key: string, values?: Record<string, string>) => $isLoading ? '' : getPluginText(key, pluginName,
+    (id, options) => $_(id, { ...options, values }));
   const usage = $derived(state.data ? usagePresentation(state.data) : null);
+  const trends = $derived(overviewTrends(state.error ? null : state.data));
+  const interval = $derived(state.data?.bucketMs);
+  const comparisonCaption = $derived(interval ? t('ui.previousInterval', { interval: interval < 3_600_000
+    ? `${interval / 60_000}${t('ui.minutes')}` : `${interval / 3_600_000}${t('ui.hours')}` }) : '');
   $effect(() => {
-    const nextResource = getStatsResource(pluginName, selectedRange, 'model');
+    const nextResource = getStatsResource(pluginName, selectedRange, 'time');
     resource = nextResource;
     return nextResource.subscribe(next => { state = next; });
   });
   $effect(() => {
     const report = onHeaderChange;
     const header = { summary: selectedRange, refresh: { label: t('ui.refresh'), busy: state.busy,
-      disabled: !resource, run: () => { void resource?.refresh(); } } };
+      disabled: !resource, run: () => { void resource?.refresh(); } }, footer: trendFooter };
     untrack(() => report?.(header));
   });
   onMount(() => {
@@ -32,6 +39,19 @@
   });
 </script>
 
+{#snippet trendFooter()}
+  <div class="overview-trends w-full" data-testid="token-stats-overview-trends">
+    {#each trends as item}
+      {@const value = item.isNew ? t('ui.newActivity') : item.percent == null ? '—' : `${item.percent >= 0 ? '+' : ''}${item.percent.toFixed(1)}%`}
+      <div class="flex min-w-0 flex-wrap items-center gap-x-1.5" data-testid={`token-stats-trend-${item.metric}`}
+        aria-label={`${t(item.metric === 'cost' ? 'ui.estimatedCostUsd' : `ui.${item.metric}`)} ${value} ${comparisonCaption}`}>
+        <KpiTrendValue {value} change={item.change} direction={item.metric === 'cost' ? 'down' : 'up'} clamp />
+        {#if comparisonCaption}<span class="nx-label-sm">{comparisonCaption}</span>{/if}
+      </div>
+    {/each}
+  </div>
+{/snippet}
+
 <div class="kpi-metric-row w-full min-w-0" data-testid="token-stats-overview">
   {#if state.busy && !state.data}
     <LoadingIndicator size="sm" height="sm" label={t('ui.loading')} />
@@ -43,12 +63,12 @@
         {@const fullValue = metric === 'cost' ? formatEstimatedUsd(state.data?.estimatedCostUsd)
           : formatTokenCount(metric === 'input' ? usage?.input : usage?.output)}
         {@const value = metric === 'cost'
-          ? (state.data?.estimatedCostUsd != null && Number.isFinite(state.data.estimatedCostUsd) && state.data.estimatedCostUsd >= 1000
+          ? (state.data?.estimatedCostUsd != null && Number.isFinite(state.data.estimatedCostUsd) && state.data.estimatedCostUsd >= 0
             ? `$${formatCompactNumber(state.data.estimatedCostUsd)}` : fullValue)
           : formatCompactNumber(metric === 'input' ? usage?.input : usage?.output)}
         <div class="min-w-0" data-testid={`token-stats-metric-${metric}`}>
           <div class="nx-label mb-2">{t(metric === 'cost' ? 'ui.estimatedCostUsd' : `ui.${metric}`)}</div>
-          <div class="overview-value nx-metric truncate text-zinc-50" title={fullValue} aria-label={fullValue}>{value}</div>
+          <div class="overview-value nx-metric text-zinc-50" title={fullValue} aria-label={fullValue}>{value}</div>
           {#if metric !== 'cost' && state.data && (estimatedTokens(state.data, metric as 'input' | 'output') ?? 0) > 0}
             <p class="mt-1 text-[10px] text-zinc-400">{t('ui.includesEstimate')}</p>
           {/if}
@@ -61,13 +81,15 @@
 </div>
 
 <style>
-  .overview-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
+  .overview-metrics, .overview-trends { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
+  .overview-trends > div + div { padding-left: 16px; }
   .overview-metrics > div + div { border-left: 1px solid var(--nx-edge); padding-left: 16px; }
-  .overview-value { font-size: clamp(20px, 2.3vw, 32px); }
+  .overview-value { font-size: clamp(18px, 2vw, 28px); }
   @container (max-width: 380px) {
-    .overview-metrics { gap: 8px; }
+    .overview-metrics, .overview-trends { gap: 8px; }
+    .overview-trends > div + div { padding-left: 8px; }
     .overview-metrics > div + div { padding-left: 8px; }
-    .overview-value { font-size: 20px; }
+    .overview-value { font-size: 16px; }
   }
   @container (max-width: 220px) {
     .overview-metrics { grid-template-columns: 1fr; }

package/dist/plugins/token-stats/ui/TokenStatsPage.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
   import { isLoading, locale } from 'svelte-i18n';
   import RefreshCw from 'lucide-svelte/icons/refresh-cw';
-  import { _ } from '@bungee/plugin-sdk';
+  import { _, formatCompactNumber } from '@bungee/plugin-sdk';
   import { getPluginText } from '$utils/plugin-i18n';
-  import { KpiCard, PanelCard, MetricBar, BSegmentedControl, LoadingIndicator } from '$components/industrial';
+  import { KpiCard, PanelCard, MetricBar, BSelect, BSegmentedControl, LoadingIndicator } from '$components/industrial';
   import { Button } from '$components/ui/button';
   import { Input } from '$components/ui/input';
   import UsageTimeChart from './UsageTimeChart.svelte';
   import { getStatsResource } from './stats';
-  import { cacheDetail, formatEstimatedUsd, formatTokenCount, modelTokenTotal, tokenComposition, usagePresentation, type TokenRange } from './labels';
+  import { formatCacheInputPercentage, formatEstimatedUsd, formatTokenCount, modelTokenTotal, tokenComposition, usagePresentation, type TokenPageRange } from './labels';
   import type { StatsState, StatsResource } from './stats-resource';
 
   let { pluginName = 'token-stats' }: { pluginName?: string } = $props();
-  let range: TokenRange = $state('24h');
+  let range: TokenPageRange = $state('day');
   let sort = $state('tokens');
   let search = $state('');
   let models: StatsState = $state({ data: null, busy: false, error: '', refreshedAt: 0 });
@@ -20,9 +20,11 @@
   let modelResource: StatsResource | undefined = $state();
   let timeResource: StatsResource | undefined = $state();
   const t = (key: string) => $isLoading ? '' : getPluginText(key, pluginName, (id, options) => $_(id, options));
-  const display = (value: unknown) => formatTokenCount(value, $locale ?? undefined);
+  const display = formatCompactNumber;
+  const fullCount = (value: unknown) => formatTokenCount(value, $locale ?? undefined);
+  const displayCost = (value: unknown) => typeof value === 'number' && value >= 1000
+    ? `$${formatCompactNumber(value)}` : formatEstimatedUsd(value);
   const usage = $derived(models.data ? usagePresentation(models.data) : null);
-  const composition = $derived(tokenComposition(models.data ?? {}));
   const modelLabel = (id: string) => id === 'unknown' ? t('ui.unknownModel') : id;
   const parts = (row: Parameters<typeof tokenComposition>[0]) => {
     const c = tokenComposition(row);
@@ -33,18 +35,15 @@
       { key: 'cacheWrite', label: t('page.cacheWrite'), value: c.cacheWrite, tone: 'danger' as const },
     ];
   };
-  const knownPart = (key: string) => key === 'input' ? usage?.input !== undefined
-    : key === 'output' ? usage?.output !== undefined
-    : cacheDetail(key === 'cacheRead' ? models.data?.cacheReadTokens : models.data?.cacheWriteTokens) !== undefined;
   const rankAmount = (row: NonNullable<typeof models.data>['data'][number]) => sort === 'cost'
     ? row.estimatedCostUsd ?? -1 : modelTokenTotal(row) ?? -1;
   const rows = $derived.by(() => [...models.data?.data ?? []]
     .filter(row => modelLabel(row.dimension).toLowerCase().includes(search.trim().toLowerCase()))
     .sort((a, b) => rankAmount(b) - rankAmount(a) || a.dimension.localeCompare(b.dimension)));
-  const maxRank = $derived(Math.max(0, ...rows.map(rankAmount)));
+  const maxTokens = $derived(Math.max(0, ...rows.map(row => modelTokenTotal(row) ?? 0)));
   const busy = $derived(models.busy || time.busy);
   const refreshedAt = $derived(Math.min(models.refreshedAt, time.refreshedAt));
-  const ranges = $derived(['1h', '12h', '24h'].map(value => ({ value, label: t(`page.range.${value}`) })));
+  const ranges = $derived(['day', 'week', 'month', '1d', '7d', '30d'].map(value => ({ value, label: t(`page.range.${value}`) })));
   const sorts = $derived(['tokens', 'cost'].map(value => ({ value, label: t(`page.sort.${value}`) })));
   $effect(() => {
     const nextModel = getStatsResource(pluginName, range, 'model');
@@ -59,7 +58,8 @@
 
 <div class="min-w-0 space-y-4" data-testid="token-stats-page">
   <div class="flex flex-wrap items-center justify-between gap-3">
-    <BSegmentedControl options={ranges} value={range} onchange={value => range = value as TokenRange} ariaLabel={t('page.range')} />
+    <BSelect options={ranges} value={range} onchange={value => { if (typeof value === 'string') range = value as TokenPageRange; }}
+      ariaLabel={t('page.range')} width="w-40" size="small" />
     <div class="flex min-w-0 flex-wrap items-center gap-3">
       <span class="font-mono text-[10px] text-zinc-400" aria-live="polite">{refreshedAt ? `${t('page.updatedAt')} ${new Date(refreshedAt).toLocaleTimeString($locale ?? undefined)}` : ''}</span>
       <Button variant="ghost" size="sm" disabled={busy} onclick={refresh} aria-label={t('ui.refresh')} aria-busy={busy}>
@@ -77,10 +77,10 @@
     <LoadingIndicator label={t('ui.loading')} height="sm" />
   {:else if models.data}
     <div class="grid grid-cols-2 gap-3 xl:grid-cols-4" data-testid="token-stats-page-summary">
-      <KpiCard class="min-w-0 [container-type:inline-size]" label={t('ui.input')} value={display(usage?.input)} />
-      <KpiCard class="min-w-0 [container-type:inline-size]" label={t('ui.output')} value={display(usage?.output)} />
-      <KpiCard class="min-w-0 [container-type:inline-size]" label={t('page.tokens')} value={display(modelTokenTotal(models.data))} />
-      <KpiCard class="min-w-0 [container-type:inline-size]" label={t('ui.estimatedCostUsd')} value={formatEstimatedUsd(models.data.estimatedCostUsd)} />
+      <KpiCard class="min-w-0 [container-type:inline-size]" label={t('ui.input')} value={display(usage?.input)} valueTitle={fullCount(usage?.input)} />
+      <KpiCard class="min-w-0 [container-type:inline-size]" label={t('ui.output')} value={display(usage?.output)} valueTitle={fullCount(usage?.output)} />
+      <KpiCard class="min-w-0 [container-type:inline-size]" label={t('page.tokens')} value={display(modelTokenTotal(models.data))} valueTitle={fullCount(modelTokenTotal(models.data))} />
+      <KpiCard class="min-w-0 [container-type:inline-size]" label={t('ui.estimatedCostUsd')} value={displayCost(models.data.estimatedCostUsd)} valueTitle={formatEstimatedUsd(models.data.estimatedCostUsd)} />
     </div>
     {#if usage?.state === 'empty'}<p class="py-8 text-center text-sm text-zinc-400" data-testid="token-stats-page-empty">{t('ui.noData')}</p>{/if}
   {/if}
@@ -89,27 +89,16 @@
     <div class="h-[240px] min-w-0 sm:h-[300px]">
       {#if time.busy && !time.data}<LoadingIndicator label={t('ui.loading')} />
       {:else if time.data && usagePresentation(time.data).positive}
-        <UsageTimeChart stats={time.data} {range} refreshedAt={time.refreshedAt} {pluginName} />
+        <UsageTimeChart stats={time.data} {range} refreshedAt={time.refreshedAt} {pluginName} presentation="page" />
       {:else}<p class="flex h-full items-center justify-center text-sm text-zinc-400">{t(time.data && usagePresentation(time.data).state === 'empty' ? 'ui.noData' : 'ui.noBreakdown')}</p>{/if}
     </div>
   </PanelCard>
 
   {#if models.data}
-    <PanelCard title={t('page.composition')} tag="TOKEN">
-      <MetricBar label={t('page.tokens')} value={composition.total} max={composition.total} valueLabel={display(modelTokenTotal(models.data))}
-        segments={parts(models.data)} tone="neutral" />
-      <dl class="mt-3 grid grid-cols-2 gap-x-6 gap-y-3 sm:grid-cols-4" data-testid="token-stats-composition">
-        {#each parts(models.data) as part}
-          <div><dt class="nx-label">{part.label}</dt><dd class="mt-1 font-mono text-xs text-zinc-200">{knownPart(part.key) ? display(part.value) : '—'}
-            <span class="ml-2 text-zinc-400">{knownPart(part.key) && composition.total > 0 ? `${(part.value / composition.total * 100).toFixed(1)}%` : '—'}</span></dd></div>
-        {/each}
-      </dl>
-    </PanelCard>
-
-    <PanelCard title={t('dimension.model')} tag={`${rows.length} / ${models.data.data.length}`}>
-      <div class="mb-3 flex flex-wrap items-center justify-between gap-3">
-        <Input bind:value={search} aria-label={t('page.searchModels')} placeholder={t('page.searchModels')} class="w-full sm:w-64" />
-        <BSegmentedControl options={sorts} bind:value={sort} ariaLabel={t('page.sort')} />
+    <PanelCard title={t('page.models')} tag={`${rows.length} / ${models.data.data.length}`}>
+      <div class="mb-3 flex flex-wrap items-center gap-3">
+        <BSegmentedControl options={sorts} bind:value={sort} ariaLabel={t('page.sort')} class="shrink-0" />
+        <Input bind:value={search} aria-label={t('page.searchModels')} placeholder={t('page.searchModels')} class="min-w-[140px] flex-1 sm:max-w-64" />
       </div>
       <ol class="space-y-4" data-testid="token-stats-model-list">
         {#each rows as row (row.dimension)}
@@ -117,16 +106,15 @@
           <li class="min-w-0 border-b border-carbon-600 pb-4 last:border-0 last:pb-0" data-testid="token-stats-model-row">
             <div class="mb-1.5 flex flex-wrap items-baseline justify-between gap-2">
               <strong class="min-w-0 break-all font-mono text-xs font-normal text-zinc-200">{modelLabel(row.dimension)}</strong>
-              <span class="font-mono text-[11px] text-zinc-400">{display(total)} Token · {formatEstimatedUsd(row.estimatedCostUsd)}</span>
+              <span class="font-mono text-[11px] text-zinc-400"><span title={fullCount(total)}>{display(total)} Token</span> · <span title={formatEstimatedUsd(row.estimatedCostUsd)}>{displayCost(row.estimatedCostUsd)}</span></span>
             </div>
-            <MetricBar label={`${modelLabel(row.dimension)} · ${t(`page.sort.${sort}`)}`} value={Math.max(0, rankAmount(row))} max={maxRank}
-              valueLabel={sort === 'cost' ? formatEstimatedUsd(row.estimatedCostUsd) : display(total)}
-              tone={sort === 'tokens' ? 'neutral' : 'accent'} segments={sort === 'tokens' ? parts(row) : []} headless />
-            <dl class="mt-2 flex flex-wrap gap-x-5 gap-y-1 font-mono text-[10px] text-zinc-400">
-              <div>{t('ui.input')} <span class="text-zinc-200">{display(usagePresentation(row).input)}</span></div>
-              <div>{t('ui.output')} <span class="text-zinc-200">{display(usagePresentation(row).output)}</span></div>
-              <div>{t('page.cacheRead')} <span class="text-zinc-200">{display(row.cacheReadTokens)}</span></div>
-              <div>{t('page.cacheWrite')} <span class="text-zinc-200">{display(row.cacheWriteTokens)}</span></div>
+            <MetricBar label={`${modelLabel(row.dimension)} · ${t('page.tokens')}`} value={Math.max(0, total ?? 0)} max={maxTokens}
+              valueLabel={display(total)} tone="neutral" segments={parts(row)} headless />
+            <dl class="mt-2 flex flex-wrap gap-x-5 gap-y-1 font-mono text-[11px] text-zinc-400">
+              <div>{t('ui.input')} <span class="text-zinc-200" title={fullCount(usagePresentation(row).input)}>{display(usagePresentation(row).input)}</span></div>
+              <div>{t('ui.output')} <span class="text-zinc-200" title={fullCount(usagePresentation(row).output)}>{display(usagePresentation(row).output)}</span></div>
+              <div>{t('page.cacheRead')} <span class="text-zinc-200" title={fullCount(row.cacheReadTokens)}>{display(row.cacheReadTokens)}</span> ({formatCacheInputPercentage(row.cacheReadTokens, row)})</div>
+              <div>{t('page.cacheWrite')} <span class="text-zinc-200" title={fullCount(row.cacheWriteTokens)}>{display(row.cacheWriteTokens)}</span> ({formatCacheInputPercentage(row.cacheWriteTokens, row)})</div>
             </dl>
           </li>
         {:else}<li class="py-6 text-center text-xs text-zinc-400">{t(search ? 'page.noModels' : 'ui.noData')}</li>{/each}

package/dist/plugins/token-stats/ui/UsageTimeChart.svelte

@@ -1,24 +1,39 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
   import { isLoading, locale } from 'svelte-i18n';
   import { getPluginText } from '$utils/plugin-i18n';
   import * as Tooltip from '$components/ui/tooltip';
-  import { Bar, ChartJS, BarElement, CategoryScale, LinearScale, _, type ChartData, type ChartOptions } from '@bungee/plugin-sdk';
-  import type { Plugin } from 'chart.js';
-  import { buildTimeSeries, formatTokenCount, modelColorIndex, OTHER_MODEL, timeAxisLabels, type TimeBucket, type TokenRange } from './labels';
+  import { Bar, ChartJS, BarElement, CategoryScale, LinearScale, Tooltip as ChartTooltip, _, formatCompactNumber, type ChartData, type ChartOptions } from '@bungee/plugin-sdk';
+  import type { Plugin, TooltipModel } from 'chart.js';
+  import { buildTimeSeries, formatTokenCount, modelColorIndex, OTHER_MODEL, timeAxisLabels, type TimeBucket, type TokenStatsRange } from './labels';
   import type { StatsResponse } from './stats-resource';
 
-  ChartJS.register(BarElement, CategoryScale, LinearScale);
-  let { stats, range, refreshedAt, pluginName = 'token-stats' }:
-    { stats: StatsResponse; range: TokenRange; refreshedAt: number; pluginName?: string } = $props();
+  ChartJS.register(BarElement, CategoryScale, LinearScale, ChartTooltip);
+  let { stats, range, refreshedAt, pluginName = 'token-stats', presentation = 'dashboard' }:
+    { stats: StatsResponse; range: TokenStatsRange; refreshedAt: number; pluginName?: string; presentation?: 'dashboard' | 'page' } = $props();
+  const pageChart = $derived(presentation === 'page');
   const t = (key: string) => $isLoading ? '' : getPluginText(key, pluginName, (id, options) => $_(id, options));
-  const display = (value: unknown) => formatTokenCount(value, $locale ?? undefined);
-  const trend = $derived(buildTimeSeries(stats.data, range, stats.bucketMs ?? 0, refreshedAt));
-  const axisTicks = $derived(trend.buckets.length ? timeAxisLabels([
+  const display = formatCompactNumber;
+  const fullCount = (value: unknown) => formatTokenCount(value, $locale ?? undefined);
+  let chart = $state.raw<ChartJS<'bar'> | null>(null);
+  let bucketTriggers: HTMLDivElement | undefined = $state();
+  const trend = $derived(buildTimeSeries(stats.data, range, stats.bucketMs ?? 0, stats.asOfMs ?? refreshedAt, stats.bucketStarts));
+  const dayBuckets = $derived(['7d', '30d', 'week', 'month'].includes(range));
+  const tickStarts = $derived(trend.buckets.length ? [
     trend.buckets[0].startMs, trend.buckets[Math.floor(trend.buckets.length / 2)].startMs,
     trend.buckets[trend.buckets.length - 1].startMs,
-  ], $locale ?? undefined) : ['', '', '']);
+  ] : []);
+  const axisTicks = $derived(!tickStarts.length ? ['', '', ''] : dayBuckets
+    ? tickStarts.map(start => new Intl.DateTimeFormat($locale ?? undefined, { month: 'numeric', day: 'numeric' }).format(start))
+    : timeAxisLabels(tickStarts, $locale ?? undefined));
   const denseAxis = $derived(axisTicks.join('').length > 42);
+  let plotWidth = $state(0);
+  const pageTickLabels = $derived(dayBuckets
+    ? trend.buckets.map(bucket => new Intl.DateTimeFormat($locale ?? undefined, { month: 'numeric', day: 'numeric' }).format(bucket.startMs))
+    : timeAxisLabels(trend.buckets.map(bucket => bucket.startMs), $locale ?? undefined));
+  const tickStep = $derived(trend.buckets.length <= 7 && plotWidth / trend.buckets.length >= 40 ? 1
+    : Math.max(1, Math.ceil((trend.buckets.length - 1) / Math.max(1, Math.floor(plotWidth / (dayBuckets ? 56 : 110)) - 1))));
+  const showTick = (index: number) => index === 0 || index === trend.buckets.length - 1
+    || index % tickStep === 0 && index <= trend.buckets.length - 1 - tickStep;
   const tones = ['bg-nexus-500', 'bg-sky-400', 'bg-emerald-400', 'bg-amber-400', 'bg-red-400'] as const;
   // Match the original Tailwind palette, including carbon-500 and zinc-500.
   const palette = ['#f97316', '#38bdf8', '#34d399', '#fbbf24', '#f87171'];
@@ -38,14 +53,21 @@
       x: { stacked: true, display: false, offset: true },
       y: { stacked: true, display: false, min: 0, max: Math.max(1, trend.maxTokens) },
     },
-    plugins: { legend: { display: false }, tooltip: { enabled: false } },
+    plugins: { legend: { display: false }, tooltip: { enabled: false, external: renderTooltip } },
   });
   const chartPlugins: Plugin<'bar'>[] = [{
     id: 'token-stats-bar-style',
     beforeUpdate(chart) {
-      // Fill each time slot, keeping the same 12px gutter at every viewport width.
-      const width = Math.max(0, chart.width / Math.max(1, chart.data.labels?.length ?? 0) - 12);
-      for (const dataset of chart.data.datasets) dataset.barThickness = width;
+      // Dashboard bars retain their fixed gutter; page bars stay centered and capped.
+      const slotWidth = chart.width / Math.max(1, chart.data.labels?.length ?? 0);
+      const gap = pageChart ? Math.min(12, slotWidth / 4) : 12;
+      const width = Math.max(0, slotWidth - gap);
+      for (const dataset of chart.data.datasets) dataset.barThickness = pageChart ? Math.min(40, width) : width;
+      // A refresh can remove a model or bucket that was active in the previous snapshot.
+      if (chart.tooltip?.getActiveElements().some(({ datasetIndex, index }) =>
+        datasetIndex >= chart.data.datasets.length || index >= (chart.data.labels?.length ?? 0))) {
+        chart.tooltip.setActiveElements([], { x: 0, y: 0 });
+      }
     },
   }];
   let selectedBucketStart: number | null = $state(null);
@@ -70,10 +92,16 @@
     }).format(startMs);
   }
   function bucketDescription(bucket: TimeBucket): string {
-    return `${timeLabel(bucket.startMs, true)} · ${bucket.details.length
-      ? `${display(bucket.total)} Token · ${bucket.details.map(part => `${modelLabel(part.id)} ${display(part.tokens)}`).join(' · ')}`
+    return `${bucketLabel(bucket.startMs)} · ${bucket.details.length
+      ? `${fullCount(bucket.total)} Token · ${bucket.details.map(part => `${modelLabel(part.id)} ${fullCount(part.tokens)}`).join(' · ')}`
       : t('ui.noCountedTokens')}`;
   }
+  function bucketLabel(startMs: number): string {
+    if (!stats.bucketStarts) return timeLabel(startMs, true);
+    const index = stats.bucketStarts.indexOf(startMs);
+    const endMs = stats.bucketStarts[index + 1] ?? stats.bucketEndMs ?? stats.asOfMs ?? refreshedAt;
+    return `${timeLabel(startMs, true)} – ${timeLabel(endMs, true)}`;
+  }
 
   function cancelClose() {
     clearTimeout(closeTimer);
@@ -81,14 +109,31 @@
   }
   function closeBucket() {
     cancelClose();
+    chart?.tooltip?.setActiveElements([], { x: 0, y: 0 });
     selectedBucketStart = null;
     tooltipAnchor = null;
   }
-  function showBucket(startMs: number, element: HTMLElement, mode: 'hover' | 'focus' | 'touch') {
+  function renderTooltip({ tooltip }: { tooltip: TooltipModel<'bar'> }) {
+    const index = tooltip.opacity === 0 ? undefined : tooltip.dataPoints[0]?.dataIndex;
+    const bucket = index === undefined ? undefined : trend.buckets[index];
+    const anchor = index === undefined ? undefined : bucketTriggers?.children[index];
+    if (!bucket || !(anchor instanceof HTMLElement)) {
+      selectedBucketStart = null;
+      tooltipAnchor = null;
+      return;
+    }
+    tooltipBucket = bucket;
+    tooltipAnchor = anchor;
+    selectedBucketStart = bucket.startMs;
+  }
+  function showBucket(startMs: number, mode: 'hover' | 'focus' | 'touch') {
     cancelClose();
     tooltipMode = mode;
-    tooltipAnchor = element;
-    selectedBucketStart = startMs;
+    const index = trend.buckets.findIndex(bucket => bucket.startMs === startMs);
+    if (!chart?.tooltip || index < 0) return;
+    // Use Chart.js's programmatic API for hover, keyboard and touch alike, including empty buckets.
+    const position = chart.getDatasetMeta(0).data[index]?.getCenterPoint() ?? { x: 0, y: 0 };
+    chart.tooltip.setActiveElements(chart.data.datasets.map((_, datasetIndex) => ({ datasetIndex, index })), position);
   }
   function leaveBucket() {
     if (tooltipMode !== 'hover') return;
@@ -97,48 +142,70 @@
     closeTimer = setTimeout(closeBucket, 100);
   }
 
-  onMount(() => () => cancelClose());
+  $effect(() => {
+    // Clear the old chart selection before changing ranges or destroying its accessible triggers.
+    void range;
+    return closeBucket;
+  });
 </script>
 
-<div class="relative flex min-h-0 min-w-0 h-full flex-col overflow-hidden" data-testid="token-stats-time-chart">
-  <div class="relative min-h-0 flex-1 border-b border-carbon-500">
-    <div class="pointer-events-none absolute -left-[6px] -right-[6px] inset-y-0 z-10">
-      <Bar {data} {options} plugins={chartPlugins} aria-hidden="true" />
-    </div>
-    <div class="flex h-full items-end gap-[12px]" role="group" aria-label={t('ui.timeChart')}>
-      {#each trend.buckets as bucket, index (bucket.startMs)}
-        <button type="button" aria-pressed={selectedBucketStart === bucket.startMs}
-          aria-label={bucketDescription(bucket)} aria-describedby={selectedBucketStart === bucket.startMs ? tooltipId : undefined} data-token-stats-bucket-trigger
-          class="flex min-w-0 flex-1 self-stretch flex-col justify-end transition-colors hover:bg-carbon-700/40 focus-visible:outline focus-visible:outline-2 focus-visible:outline-nexus-500 {selectedBucketStart === bucket.startMs ? 'bg-carbon-700/40' : ''}"
-          onpointerenter={(event) => {
-            if (event.pointerType !== 'touch') showBucket(bucket.startMs, event.currentTarget, 'hover');
-          }}
-          onpointerleave={leaveBucket}
-          onfocus={(event) => showBucket(bucket.startMs, event.currentTarget, 'focus')}
-          onpointerdown={(event) => {
-            touchBucketWasOpen = event.pointerType === 'touch' && selectedBucketStart === bucket.startMs;
-          }}
-          onclick={(event) => {
-            if ('pointerType' in event && event.pointerType === 'touch') {
-              if (touchBucketWasOpen) closeBucket();
-              else showBucket(bucket.startMs, event.currentTarget, 'touch');
-            } else showBucket(bucket.startMs, event.currentTarget, event.detail === 0 ? 'focus' : 'hover');
-          }}
-          onblur={(event) => {
-            if (selectedBucketStart === bucket.startMs && !(event.relatedTarget instanceof HTMLElement && event.currentTarget.parentElement?.contains(event.relatedTarget))) closeBucket();
-          }}
-          onkeydown={(event) => {
-            if (event.key === 'Escape') closeBucket();
-            if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) {
-              event.preventDefault();
-              const nextIndex = event.key === 'Home' ? 0 : event.key === 'End' ? trend.buckets.length - 1
-                : index + (event.key === 'ArrowRight' ? 1 : -1);
-              const next = event.currentTarget.parentElement?.children[nextIndex] as HTMLElement | undefined;
-              next?.focus();
-            }
-          }}>
-        </button>
-      {/each}
+<div class="relative flex min-h-0 min-w-0 h-full flex-col overflow-hidden" data-testid="token-stats-time-chart" data-bucket-ms={stats.bucketMs} data-presentation={presentation}>
+  <div class="min-h-0 min-w-0 flex-1 flex flex-col {pageChart ? 'overflow-hidden' : ''}" bind:clientWidth={plotWidth} data-testid="token-stats-chart-viewport">
+    <div class="flex min-h-0 min-w-0 flex-1 flex-col">
+      <div class="relative min-h-0 flex-1 border-b border-carbon-500">
+        <div class="pointer-events-none absolute inset-y-0 z-10 {pageChart ? 'inset-x-0' : '-left-[6px] -right-[6px]'}">
+          <Bar {data} {options} plugins={chartPlugins} bind:chart aria-hidden="true" />
+        </div>
+        <div class="h-full {pageChart ? 'grid' : 'flex items-end gap-[12px]'}" style:grid-template-columns={pageChart ? `repeat(${trend.buckets.length}, minmax(0, 1fr))` : undefined}
+          bind:this={bucketTriggers} role="group" aria-label={t('ui.timeChart')}>
+          {#each trend.buckets as bucket, index (bucket.startMs)}
+            <button type="button" aria-pressed={selectedBucketStart === bucket.startMs}
+              aria-label={bucketDescription(bucket)} aria-describedby={selectedBucketStart === bucket.startMs ? tooltipId : undefined} data-token-stats-bucket-trigger
+              class="flex min-w-0 flex-1 self-stretch flex-col justify-end transition-colors hover:bg-carbon-700/40 focus-visible:outline focus-visible:outline-2 focus-visible:outline-nexus-500 {selectedBucketStart === bucket.startMs ? 'bg-carbon-700/40' : ''}"
+              onpointerenter={(event) => {
+                if (event.pointerType !== 'touch') showBucket(bucket.startMs, 'hover');
+              }}
+              onpointerleave={leaveBucket}
+              onfocus={() => showBucket(bucket.startMs, 'focus')}
+              onpointerdown={(event) => {
+                touchBucketWasOpen = event.pointerType === 'touch' && selectedBucketStart === bucket.startMs;
+              }}
+              onclick={(event) => {
+                if ('pointerType' in event && event.pointerType === 'touch') {
+                  if (touchBucketWasOpen) closeBucket();
+                  else showBucket(bucket.startMs, 'touch');
+                } else showBucket(bucket.startMs, event.detail === 0 ? 'focus' : 'hover');
+              }}
+              onblur={(event) => {
+                if (selectedBucketStart === bucket.startMs && !(event.relatedTarget instanceof HTMLElement && event.currentTarget.parentElement?.contains(event.relatedTarget))) closeBucket();
+              }}
+              onkeydown={(event) => {
+                if (event.key === 'Escape') closeBucket();
+                if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) {
+                  event.preventDefault();
+                  const nextIndex = event.key === 'Home' ? 0 : event.key === 'End' ? trend.buckets.length - 1
+                    : index + (event.key === 'ArrowRight' ? 1 : -1);
+                  const next = event.currentTarget.parentElement?.children[nextIndex] as HTMLElement | undefined;
+                  next?.focus();
+                }
+              }}>
+            </button>
+          {/each}
+        </div>
+      </div>
+      {#if pageChart}
+        <div class="mt-2 grid shrink-0 font-mono text-xs leading-tight text-zinc-400" style:grid-template-columns={`repeat(${trend.buckets.length}, minmax(0, 1fr))`} aria-hidden="true" data-testid="token-stats-page-axis">
+          {#each trend.buckets as bucket, index (bucket.startMs)}
+            <span class="w-max whitespace-nowrap {trend.buckets.length > 1 && index === 0 ? 'justify-self-start' : trend.buckets.length > 1 && index === trend.buckets.length - 1 ? 'justify-self-end' : 'justify-self-center'}">{showTick(index) ? pageTickLabels[index] : ''}</span>
+          {/each}
+        </div>
+      {:else}
+        <div class="mt-1 flex shrink-0 items-start justify-between gap-1 font-mono text-[10px] leading-tight text-zinc-400" aria-hidden="true">
+          <span class="shrink-0 whitespace-nowrap">{axisTicks[0]}</span>
+          <span class="min-w-0 whitespace-nowrap text-center {denseAxis ? 'hidden sm:inline' : ''}">{axisTicks[1]}</span>
+          <span class="shrink-0 whitespace-nowrap text-right">{axisTicks[2]}</span>
+        </div>
+      {/if}
     </div>
   </div>
   <Tooltip.SharedContent anchor={tooltipAnchor} open={selectedBucket !== undefined} id={tooltipId}
@@ -146,9 +213,9 @@
     class="w-72 font-mono text-[11px]"
     data-testid="token-stats-bucket-detail">
     {#if tooltipBucket}
-      <div class="border-b border-carbon-600 pb-2 text-zinc-400">{timeLabel(tooltipBucket.startMs, true)}</div>
+      <div class="border-b border-carbon-600 pb-2 text-zinc-400">{bucketLabel(tooltipBucket.startMs)}</div>
       <div class="mt-2 flex items-baseline justify-between gap-3">
-        <span>Token</span><strong class="font-display text-sm text-zinc-50">{display(tooltipBucket.total)}</strong>
+        <span>Token</span><strong class="font-display text-sm text-zinc-50" title={fullCount(tooltipBucket.total)} aria-label={fullCount(tooltipBucket.total)}>{display(tooltipBucket.total)}</strong>
       </div>
       <div class="mt-2 space-y-1.5">
         {#each tooltipBucket.details as part (part.id)}
@@ -157,7 +224,7 @@
               <span class="mt-1 h-2 w-2 shrink-0 {modelTone(part.id)}" aria-hidden="true"></span>
               <span class="break-all">{modelLabel(part.id)}</span>
             </span>
-            <strong class="shrink-0 font-normal text-zinc-50">{display(part.tokens)}</strong>
+            <strong class="shrink-0 font-normal text-zinc-50" title={fullCount(part.tokens)} aria-label={fullCount(part.tokens)}>{display(part.tokens)}</strong>
           </div>
         {:else}
           <span class="text-zinc-400">{t('ui.noCountedTokens')}</span>
@@ -165,16 +232,11 @@
       </div>
     {/if}
   </Tooltip.SharedContent>
-  <div class="mt-1 flex shrink-0 items-start justify-between gap-1 font-mono text-[10px] leading-tight text-zinc-400" aria-hidden="true">
-    <span class="shrink-0 whitespace-nowrap">{axisTicks[0]}</span>
-    <span class="min-w-0 whitespace-nowrap text-center {denseAxis ? 'hidden sm:inline' : ''}">{axisTicks[1]}</span>
-    <span class="shrink-0 whitespace-nowrap text-right">{axisTicks[2]}</span>
-  </div>
-  <div class="mt-2 flex shrink-0 flex-wrap gap-x-3 gap-y-1 font-mono text-[10px] text-zinc-300">
+  <div class="mt-2 flex shrink-0 flex-wrap gap-x-3 gap-y-1 font-mono {pageChart ? 'text-xs' : 'text-[10px]'} text-zinc-300" data-testid="token-stats-chart-legend">
     {#each trend.models as id (id)}
       <span class="inline-flex min-w-0 items-center gap-1" title={modelLabel(id)}>
         <span class="h-2 w-2 shrink-0 {modelTone(id)}" aria-hidden="true"></span>
-        <span class="max-w-28 truncate">{modelLabel(id)}</span>
+        <span class={pageChart ? 'min-w-0 break-all' : 'max-w-28 truncate'}>{modelLabel(id)}</span>
       </span>
     {/each}
   </div>