feat: bar chart for projects, enhanced donut for models

app/overview-client.tsx

@@ -6,7 +6,7 @@ import Link from "next/link";
 import { BarChart3, PieChart } from "lucide-react";
 import { UsageOverTimeChart } from "@/components/overview/usage-over-time-chart";
 import { ModelBreakdownDonut } from "@/components/overview/model-breakdown-donut";
-import { ProjectActivityDonut } from "@/components/overview/project-activity-donut";
+import { ProjectActivityChart } from "@/components/overview/project-activity-chart";
 import { PeakHoursChart } from "@/components/overview/peak-hours-chart";
 import { OverviewConversationTable } from "@/components/overview/conversation-table";
 import { formatTokens, formatBytes } from "@/lib/decode";
@@ -283,7 +283,7 @@ export function OverviewClient() {
           icon={<PieChart className="w-4 h-4" />}
           title="Project activity distribution"
         >
-          <ProjectActivityDonut projects={projects} />
+          <ProjectActivityChart projects={projects} />
         </ChartCard>
       </div>
 

components/overview/model-breakdown-donut.tsx

@@ -47,18 +47,17 @@ function CustomTooltip({ active, payload }: any) {
 }
 
 export function ModelBreakdownDonut({ modelUsage }: Props) {
+  // I/O tokens only — cache tokens are a different dimension and inflate Opus disproportionately
   const data = Object.entries(modelUsage)
     .map(([model, usage]) => ({
       name: shortModelName(model),
-      value:
-        (usage.inputTokens ?? 0) +
-        (usage.outputTokens ?? 0) +
-        (usage.cacheReadInputTokens ?? 0) +
-        (usage.cacheCreationInputTokens ?? 0),
+      value: (usage.inputTokens ?? 0) + (usage.outputTokens ?? 0),
     }))
     .filter((d) => d.value > 0)
     .sort((a, b) => b.value - a.value);
 
+  const total = data.reduce((s, d) => s + d.value, 0);
+
   if (data.length === 0) {
     return (
       <div className="flex items-center justify-center h-48 text-muted-foreground text-sm">
@@ -90,11 +89,17 @@ export function ModelBreakdownDonut({ modelUsage }: Props) {
             iconType="circle"
             iconSize={8}
             wrapperStyle={{ fontSize: 12 }}
-            formatter={(value) => (
-              <span style={{ color: "var(--muted-foreground)", fontSize: 12 }}>
-                {value}
-              </span>
-            )}
+            formatter={(value: string, _entry: unknown, index: number) => {
+              const pct =
+                total > 0 ? Math.round((data[index].value / total) * 100) : 0;
+              return (
+                <span
+                  style={{ color: "var(--muted-foreground)", fontSize: 12 }}
+                >
+                  {value} ({pct}%)
+                </span>
+              );
+            }}
           />
         </PieChart>
       </ResponsiveContainer>

components/overview/project-activity-chart.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+  CartesianGrid,
+} from "recharts";
+import type { ProjectSummary } from "@/types/claude";
+import { formatTokens } from "@/lib/decode";
+
+interface Props {
+  projects: ProjectSummary[];
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function CustomTooltip({ active, payload, label }: any) {
+  if (!active || !payload?.length) return null;
+  return (
+    <div className="bg-card border border-border rounded px-3 py-2 text-[13px]">
+      <p className="text-muted-foreground font-bold">{label}</p>
+      <p style={{ color: "var(--chart-1)" }}>
+        {formatTokens(payload[0].value)} tokens
+      </p>
+      {payload[0].payload.sessions != null && (
+        <p className="text-muted-foreground">
+          {payload[0].payload.sessions} sessions
+        </p>
+      )}
+    </div>
+  );
+}
+
+export function ProjectActivityChart({ projects }: Props) {
+  const data = projects
+    .slice(0, 8)
+    .map((p) => ({
+      name:
+        p.display_name.length > 20
+          ? p.display_name.slice(0, 18) + "..."
+          : p.display_name,
+      fullName: p.display_name,
+      value: (p.input_tokens ?? 0) + (p.output_tokens ?? 0),
+      sessions: p.session_count ?? 0,
+    }))
+    .filter((d) => d.value > 0);
+
+  if (data.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-48 text-muted-foreground text-sm">
+        no project data
+      </div>
+    );
+  }
+
+  return (
+    <div role="img" aria-label="Project activity chart">
+      <ResponsiveContainer
+        width="100%"
+        height={Math.max(160, data.length * 32)}
+      >
+        <BarChart
+          data={data}
+          layout="vertical"
+          margin={{ top: 4, right: 8, left: 4, bottom: 4 }}
+        >
+          <CartesianGrid
+            strokeDasharray="3 3"
+            stroke="var(--border)"
+            horizontal={false}
+          />
+          <XAxis
+            type="number"
+            tick={{ fontSize: 11, fill: "var(--muted-foreground)" }}
+            tickLine={false}
+            axisLine={false}
+            tickFormatter={(v) => formatTokens(v)}
+          />
+          <YAxis
+            type="category"
+            dataKey="name"
+            tick={{ fontSize: 11, fill: "var(--muted-foreground)" }}
+            tickLine={false}
+            axisLine={false}
+            width={110}
+          />
+          <Tooltip content={<CustomTooltip />} />
+          <Bar
+            dataKey="value"
+            fill="var(--chart-1)"
+            radius={[0, 3, 3, 0]}
+            maxBarSize={20}
+          />
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}