feat(usage): add token type breakdown stacked chart

src/pages/UsagePage.tsx

@@ -25,6 +25,7 @@ import {
   ModelStatsCard,
   PriceSettingsCard,
   CredentialStatsCard,
+  TokenBreakdownChart,
   useUsageData,
   useSparklines,
   useChartData
@@ -357,6 +358,15 @@ export function UsagePage() {
         />
       </div>
 
+      {/* Token Breakdown Chart */}
+      <TokenBreakdownChart
+        usage={filteredUsage}
+        loading={loading}
+        isDark={isDark}
+        isMobile={isMobile}
+        hourWindowHours={hourWindowHours}
+      />
+
       {/* Details Grid */}
       <div className={styles.detailsGrid}>
         <ApiDetailsCard apiStats={apiStats} loading={loading} hasPrices={hasPrices} />