Replace sparkline with bar chart for token usage trend

web/src/components/dashboard/BarChart.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+const BarChart = ({ data = [], width = 400, height = 80, color = 'currentColor' }) => {
+  if (!data || data.length === 0) return null;
+
+  const max = Math.max(...data, 1);
+  const barCount = data.length;
+  const gap = 4;
+  const totalGap = (barCount - 1) * gap;
+  const barWidth = Math.max(8, (width - totalGap) / barCount);
+  const totalUsed = barCount * barWidth + totalGap;
+  const offsetX = (width - totalUsed) / 2;
+
+  return (
+    <svg
+      width='100%'
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+      preserveAspectRatio='none'
+    >
+      {data.map((v, i) => {
+        const barH = Math.max(2, (v / max) * (height - 4));
+        const x = offsetX + i * (barWidth + gap);
+        const y = height - barH;
+        const rx = Math.min(3, barWidth / 3);
+        return (
+          <rect
+            key={i}
+            x={x}
+            y={y}
+            width={barWidth}
+            height={barH}
+            rx={rx}
+            fill={color}
+            opacity={0.85}
+          />
+        );
+      })}
+    </svg>
+  );
+};
+
+export default BarChart;

web/src/components/dashboard/BentoTrend.jsx

@@ -19,7 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
 
 import React, { useMemo, useState, useRef, useEffect } from 'react';
 import { TrendingUp, RefreshCw, ChevronDown } from 'lucide-react';
-import Sparkline from './Sparkline';
+import BarChart from './BarChart';
 import { renderQuota } from '../../helpers';
 
 const formatMD = (d) => {
@@ -224,7 +224,7 @@ const BentoTrend = ({
       </div>
 
       <div className='flex min-h-[80px] flex-1 items-end text-blue-500'>
-        <Sparkline data={counts} width={400} height={80} />
+        <BarChart data={counts} width={400} height={80} />
       </div>
 
       <div className='flex items-center justify-between text-[11px]'>