feat(usage): add token type breakdown stacked chart

src/components/usage/TokenBreakdownChart.tsx

@@ -0,0 +1,146 @@
+import { useState, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Line } from 'react-chartjs-2';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import {
+  buildHourlyTokenBreakdown,
+  buildDailyTokenBreakdown,
+  type TokenCategory,
+} from '@/utils/usage';
+import { buildChartOptions, getHourChartMinWidth } from '@/utils/usage/chartConfig';
+import type { UsagePayload } from './hooks/useUsageData';
+import styles from '@/pages/UsagePage.module.scss';
+
+const TOKEN_COLORS: Record<TokenCategory, { border: string; bg: string }> = {
+  input:     { border: '#3b82f6', bg: 'rgba(59, 130, 246, 0.25)' },
+  output:    { border: '#22c55e', bg: 'rgba(34, 197, 94, 0.25)' },
+  cached:    { border: '#f59e0b', bg: 'rgba(245, 158, 11, 0.25)' },
+  reasoning: { border: '#8b5cf6', bg: 'rgba(139, 92, 246, 0.25)' },
+};
+
+const CATEGORIES: TokenCategory[] = ['input', 'output', 'cached', 'reasoning'];
+
+export interface TokenBreakdownChartProps {
+  usage: UsagePayload | null;
+  loading: boolean;
+  isDark: boolean;
+  isMobile: boolean;
+  hourWindowHours?: number;
+}
+
+export function TokenBreakdownChart({
+  usage,
+  loading,
+  isDark,
+  isMobile,
+  hourWindowHours,
+}: TokenBreakdownChartProps) {
+  const { t } = useTranslation();
+  const [period, setPeriod] = useState<'hour' | 'day'>('hour');
+
+  const CATEGORY_LABELS: Record<TokenCategory, string> = {
+    input: t('usage_stats.input_tokens'),
+    output: t('usage_stats.output_tokens'),
+    cached: t('usage_stats.cached_tokens'),
+    reasoning: t('usage_stats.reasoning_tokens'),
+  };
+
+  const { chartData, chartOptions } = useMemo(() => {
+    const series =
+      period === 'hour'
+        ? buildHourlyTokenBreakdown(usage, hourWindowHours)
+        : buildDailyTokenBreakdown(usage);
+
+    const data = {
+      labels: series.labels,
+      datasets: CATEGORIES.map((cat) => ({
+        label: CATEGORY_LABELS[cat],
+        data: series.dataByCategory[cat],
+        borderColor: TOKEN_COLORS[cat].border,
+        backgroundColor: TOKEN_COLORS[cat].bg,
+        pointBackgroundColor: TOKEN_COLORS[cat].border,
+        pointBorderColor: TOKEN_COLORS[cat].border,
+        fill: true,
+        tension: 0.35,
+      })),
+    };
+
+    const options = {
+      ...buildChartOptions({ period, labels: series.labels, isDark, isMobile }),
+      scales: {
+        ...buildChartOptions({ period, labels: series.labels, isDark, isMobile }).scales,
+        y: {
+          ...buildChartOptions({ period, labels: series.labels, isDark, isMobile }).scales?.y,
+          stacked: true,
+        },
+        x: {
+          ...buildChartOptions({ period, labels: series.labels, isDark, isMobile }).scales?.x,
+          stacked: true,
+        },
+      },
+    };
+
+    return { chartData: data, chartOptions: options, hasData: series.hasData };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [usage, period, isDark, isMobile, hourWindowHours]);
+
+  return (
+    <Card
+      title={t('usage_stats.token_breakdown')}
+      extra={
+        <div className={styles.periodButtons}>
+          <Button
+            variant={period === 'hour' ? 'primary' : 'secondary'}
+            size="sm"
+            onClick={() => setPeriod('hour')}
+          >
+            {t('usage_stats.by_hour')}
+          </Button>
+          <Button
+            variant={period === 'day' ? 'primary' : 'secondary'}
+            size="sm"
+            onClick={() => setPeriod('day')}
+          >
+            {t('usage_stats.by_day')}
+          </Button>
+        </div>
+      }
+    >
+      {loading ? (
+        <div className={styles.hint}>{t('common.loading')}</div>
+      ) : chartData.labels.length > 0 ? (
+        <div className={styles.chartWrapper}>
+          <div className={styles.chartLegend} aria-label="Chart legend">
+            {chartData.datasets.map((dataset, index) => (
+              <div
+                key={`${dataset.label}-${index}`}
+                className={styles.legendItem}
+                title={dataset.label}
+              >
+                <span className={styles.legendDot} style={{ backgroundColor: dataset.borderColor }} />
+                <span className={styles.legendLabel}>{dataset.label}</span>
+              </div>
+            ))}
+          </div>
+          <div className={styles.chartArea}>
+            <div className={styles.chartScroller}>
+              <div
+                className={styles.chartCanvas}
+                style={
+                  period === 'hour'
+                    ? { minWidth: getHourChartMinWidth(chartData.labels.length, isMobile) }
+                    : undefined
+                }
+              >
+                <Line data={chartData} options={chartOptions} />
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className={styles.hint}>{t('usage_stats.no_data')}</div>
+      )}
+    </Card>
+  );
+}