@arraystar/tokenscope 0.1.0

package/src/assets/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="77" height="47" fill="none" aria-labelledby="vite-logo-title" viewBox="0 0 77 47"><title id="vite-logo-title">Vite</title><style>.parenthesis{fill:#000}@media (prefers-color-scheme:dark){.parenthesis{fill:#fff}}</style><path fill="#9135ff" d="M40.151 45.71c-.663.844-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.493c-.92 0-1.457-1.04-.92-1.788l7.479-10.471c1.07-1.498 0-3.578-1.842-3.578H15.443c-.92 0-1.456-1.04-.92-1.788l9.696-13.576c.213-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.472c-1.07 1.497 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.087.89 1.83L40.153 45.712z"/><mask id="a" width="48" height="47" x="14" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M40.047 45.71c-.663.843-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.389c-.92 0-1.457-1.04-.92-1.788l7.479-10.472c1.07-1.497 0-3.578-1.842-3.578H15.34c-.92 0-1.456-1.04-.92-1.788l9.696-13.575c.213-.297.556-.474.92-.474H53.93c.92 0 1.456 1.04.92 1.788L47.37 13.03c-1.07 1.498 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.088.89 1.831L40.049 45.712z"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#eee6ff" rx="5.508" ry="14.704" transform="rotate(269.814 20.96 11.29)scale(-1 1)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#eee6ff" rx="10.399" ry="29.851" transform="rotate(89.814 -16.902 -8.275)scale(1 -1)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#8900ff" rx="5.508" ry="30.487" transform="rotate(89.814 -19.197 -7.127)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.928 4.177)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.738 5.52)scale(1 -1)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#eee6ff" rx="14.072" ry="22.078" transform="rotate(93.35 31.245 55.578)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx="14.592" cy="9.743" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(39.51 14.592 9.743)"/></g><g filter="url(#k)"><ellipse cx="61.728" cy="-5.321" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 61.728 -5.32)"/></g><g filter="url(#l)"><ellipse cx="55.618" cy="7.104" fill="#00c2ff" rx="5.971" ry="9.665" transform="rotate(37.892 55.618 7.104)"/></g><g filter="url(#m)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#n)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#o)"><ellipse cx="49.857" cy="30.678" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 49.857 30.678)"/></g><g filter="url(#p)"><ellipse cx="52.623" cy="33.171" fill="#00c2ff" rx="5.971" ry="15.297" transform="rotate(37.892 52.623 33.17)"/></g></g><path d="M6.919 0c-9.198 13.166-9.252 33.575 0 46.789h6.215c-9.25-13.214-9.196-33.623 0-46.789zm62.424 0h-6.215c9.198 13.166 9.252 33.575 0 46.789h6.215c9.25-13.214 9.196-33.623 0-46.789" class="parenthesis"/><defs><filter id="b" width="60.045" height="41.654" x="-5.564" y="16.92" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-40.407" y="-6.762" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-35.435" y="2.801" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-30.84" y="20.8" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-29.307" y="21.949" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="29.961" y="-17.13" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-13.43" y="-22.082" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="34.321" y="-37.644" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="38.847" y="-10.552" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="22.45" y="-1.645" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="32.919" y="11.36" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter></defs></svg>

package/src/cli.ts

@@ -0,0 +1,98 @@
+#!/usr/bin/env node
+import * as fs from "fs";
+import * as path from "path";
+import { parseAllSessions, buildDashboardData } from "./parser/index.ts";
+import type { ParseOptions } from "./parser/index.ts";
+
+const args = process.argv.slice(2);
+const options: ParseOptions = {};
+
+for (const arg of args) {
+  if (arg === "--claude") options.codex = true; // only claude
+  else if (arg === "--codex") options.claude = true; // only codex
+  else if (arg === "--json-only") options.jsonOnly = true;
+  else if (arg === "--help" || arg === "-h") {
+    printHelp();
+    process.exit(0);
+  }
+}
+
+function printHelp() {
+  console.log(`token-dashboard — Token usage visualization for Claude Code & Codex CLI
+
+Usage:
+  npx token-dashboard [options]
+
+Options:
+  --claude      Only parse Claude Code sessions
+  --codex       Only parse Codex CLI sessions
+  --json-only   Output data.json only, don't serve dashboard
+  -h, --help    Show this help
+
+By default, both Claude Code (~/.claude/projects) and Codex CLI (~/.codex/sessions)
+data sources are auto-detected and parsed.`);
+}
+
+const sessions = parseAllSessions(options);
+const data = buildDashboardData(sessions);
+
+// Find output directory: package root / public
+const thisDir = path.dirname(new URL(import.meta.url).pathname);
+const distDir = path.resolve(thisDir, "..");
+const publicDir = path.join(distDir, "public");
+
+// Write data.json
+const outPath = path.join(publicDir, "data.json");
+if (!fs.existsSync(publicDir)) fs.mkdirSync(publicDir, { recursive: true });
+fs.writeFileSync(outPath, JSON.stringify(data, null, 2));
+
+const claudeCount = sessions.filter((s) => s.source === "claude").length;
+const codexCount = sessions.filter((s) => s.source === "codex").length;
+console.log(
+  `Parsed ${sessions.length} sessions (${claudeCount} Claude, ${codexCount} Codex) → ${outPath}`
+);
+console.log(
+  `Grand total: ${(data.grand_total.total / 1_000_000).toFixed(1)}M tokens, $${data.grand_total.cost.toFixed(2)}`
+);
+
+// @ts-ignore — runtime-only flag
+if (!options.jsonOnly) {
+  // Try to serve the built dashboard
+  const serve = async () => {
+    const { createServer } = await import("http");
+    const handler = (req: any, res: any) => {
+      let filePath = path.join(distDir, new URL(req.url, "http://localhost").pathname.slice(1));
+      if (!fs.existsSync(filePath) || fs.statSync(filePath).isDirectory()) {
+        filePath = path.join(distDir, "index.html");
+      }
+      const ext = path.extname(filePath);
+      const mimeTypes: Record<string, string> = {
+        ".html": "text/html",
+        ".js": "application/javascript",
+        ".css": "text/css",
+        ".json": "application/json",
+        ".png": "image/png",
+        ".svg": "image/svg+xml",
+        ".woff2": "font/woff2",
+      };
+      const contentType = mimeTypes[ext] || "application/octet-stream";
+      try {
+        const content = fs.readFileSync(filePath);
+        res.writeHead(200, { "Content-Type": contentType });
+        res.end(content);
+      } catch {
+        res.writeHead(404);
+        res.end("Not found");
+      }
+    };
+    const server = createServer(handler);
+    const port = 3141;
+    server.listen(port, () => {
+      console.log(`\nDashboard: http://localhost:${port}`);
+      console.log("Press Ctrl+C to stop.");
+    });
+  };
+  serve().catch(() => {
+    console.log("Run 'npm run build' first, then use --json-only to just export data.");
+  });
+}

package/src/components/Overview.tsx

@@ -0,0 +1,468 @@
+import { useNavigate } from "react-router-dom";
+import { useState } from "react";
+import {
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+  PieChart,
+  Pie,
+  Cell,
+  AreaChart,
+  Area,
+} from "recharts";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "./ui/card";
+import { Badge } from "./ui/badge";
+import { fmt, fmtCost, getAllSessions, getSkillStats } from "../data";
+import { useRecalculatedData, usePricingConfig } from "../PricingContext";
+import { useLang, useTranslations } from "../i18n";
+import {
+  MessageSquare,
+  Coins,
+  Database,
+  TrendingUp,
+  ArrowUpRight,
+  ArrowDownRight,
+} from "lucide-react";
+
+const COLORS = [
+  "hsl(220, 70%, 55%)",
+  "hsl(160, 65%, 45%)",
+  "hsl(30, 85%, 55%)",
+  "hsl(280, 60%, 55%)",
+  "hsl(0, 70%, 55%)",
+  "hsl(190, 70%, 45%)",
+  "hsl(45, 85%, 50%)",
+  "hsl(330, 60%, 50%)",
+];
+
+export default function Overview() {
+  const data = useRecalculatedData();
+  const { currencySymbol } = usePricingConfig();
+  const navigate = useNavigate();
+  const { lang } = useLang();
+  const tr = useTranslations(lang);
+  const [sourceFilter, setSourceFilter] = useState<"all" | "claude" | "codex">("all");
+  const allSessions = getAllSessions(data);
+  const sources = data.sources ?? [];
+
+  // Filter by source
+  const sessions = sourceFilter === "all"
+    ? allSessions
+    : allSessions.filter((s) => s.source === sourceFilter);
+
+  const gt = data.grand_total;
+
+  // Group sessions by project (filtered)
+  const projectMap: Record<string, { total: number; cost: number; sessions: number }> = {};
+  for (const s of sessions) {
+    const p = s.project;
+    if (!projectMap[p]) projectMap[p] = { total: 0, cost: 0, sessions: 0 };
+    projectMap[p].total += s.stats.total;
+    projectMap[p].cost += s.stats.cost;
+    projectMap[p].sessions += 1;
+  }
+  const treemapData = Object.entries(projectMap)
+    .sort((a, b) => b[1].total - a[1].total)
+    .map(([name, v], i) => ({
+      name: name.split("/").pop() || name,
+      fullName: name,
+      size: v.total,
+      cost: v.cost,
+      sessions: v.sessions,
+      color: COLORS[i % COLORS.length],
+    }));
+
+  // Token breakdown pie
+  const pieData = [
+    { name: tr.input, value: gt.input, color: COLORS[0] },
+    { name: tr.output, value: gt.output, color: COLORS[1] },
+    { name: tr.cacheReadLabel, value: gt.cache_read, color: COLORS[2] },
+    { name: tr.cacheWriteLabel, value: gt.cache_write, color: COLORS[3] },
+  ];
+
+  // Top sessions
+  const topSessions = sessions.slice(0, 12).map((s) => ({
+    name: `${s.project.split("/").pop()}/${s.sid}`,
+    fullName: `${s.project} (${s.date})`,
+    total: s.stats.total,
+    cost: s.stats.cost,
+    sessionKey: s.sessionKey,
+    msgs: s.stats.msgs,
+  }));
+
+  // Daily trend
+  const dayMap: Record<string, number> = {};
+  for (const s of sessions) {
+    const day = s.date;
+    dayMap[day] = (dayMap[day] || 0) + s.stats.total;
+  }
+  const trendData = Object.entries(dayMap)
+    .sort((a, b) => a[0].localeCompare(b[0]))
+    .map(([date, total]) => ({ date: date.slice(5), total }));
+
+  // Compute trend direction (last 2 days)
+  const lastTwo = trendData.slice(-2);
+  const trendPct =
+    lastTwo.length === 2
+      ? ((lastTwo[1].total - lastTwo[0].total) / lastTwo[0].total) * 100
+      : 0;
+  const trendUp = trendPct >= 0;
+
+  // Token by Skill
+  const skillStats = getSkillStats(data);
+  const skillTotal = skillStats.reduce((s, sk) => s + sk.total, 0);
+
+  return (
+    <div className="flex flex-1 flex-col">
+      <div className="@container/main flex flex-1 flex-col gap-2">
+        <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
+          {/* Source Filter */}
+          {sources.length > 1 && (
+            <div className="flex items-center gap-2 px-4 lg:px-6">
+              <span className="text-xs text-muted-foreground">{tr.sourceFilter}:</span>
+              {(["all", "claude", "codex"] as const).map((src) => {
+                if (src !== "all" && !sources.includes(src)) return null;
+                const label = src === "all" ? tr.allSources : src === "claude" ? tr.claudeCode : tr.codexCli;
+                return (
+                  <button
+                    key={src}
+                    onClick={() => setSourceFilter(src)}
+                    className={`px-2.5 py-1 rounded-full text-xs font-medium transition-colors ${
+                      sourceFilter === src
+                        ? "bg-primary text-primary-foreground"
+                        : "bg-muted text-muted-foreground hover:bg-accent"
+                    }`}
+                  >
+                    {label}
+                  </button>
+                );
+              })}
+            </div>
+          )}
+
+          {/* Section Cards */}
+          <div className="grid grid-cols-1 gap-4 px-4 lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
+            <Card className="@container/card">
+              <CardHeader>
+                <CardDescription>{tr.totalTokens}</CardDescription>
+                <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
+                  {fmt(gt.total)}
+                </CardTitle>
+                <CardAction>
+                  <Badge variant="outline">
+                    {trendUp ? (
+                      <ArrowUpRight className="size-3" />
+                    ) : (
+                      <ArrowDownRight className="size-3" />
+                    )}
+                    {trendUp ? "+" : ""}
+                    {trendPct.toFixed(1)}%
+                  </Badge>
+                </CardAction>
+              </CardHeader>
+            </Card>
+
+            <Card className="@container/card">
+              <CardHeader>
+                <CardDescription>{tr.cacheRead}</CardDescription>
+                <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
+                  {fmt(gt.cache_read)}
+                </CardTitle>
+                <CardAction>
+                  <Badge variant="outline">
+                    <Database className="size-3" />
+                    {((gt.cache_read / gt.total) * 100).toFixed(0)}%
+                  </Badge>
+                </CardAction>
+              </CardHeader>
+            </Card>
+
+            <Card className="@container/card">
+              <CardHeader>
+                <CardDescription>{tr.sessions}</CardDescription>
+                <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
+                  {sessions.length}
+                </CardTitle>
+                <CardAction>
+                  <Badge variant="outline">
+                    <MessageSquare className="size-3" />
+                    {Object.keys(projectMap).length} {tr.projects}
+                  </Badge>
+                </CardAction>
+              </CardHeader>
+            </Card>
+
+            <Card className="@container/card">
+              <CardHeader>
+                <CardDescription>{tr.estCost}</CardDescription>
+                <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
+                  {fmtCost(gt.cost, currencySymbol)}
+                </CardTitle>
+                <CardAction>
+                  <Badge variant="outline">
+                    <Coins className="size-3" />
+                    {tr.basedOnPricing}
+                  </Badge>
+                </CardAction>
+              </CardHeader>
+            </Card>
+          </div>
+
+          {/* Charts Row */}
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 px-4 lg:px-6">
+            {/* Project Treemap */}
+            <Card className="lg:col-span-2">
+              <CardHeader className="pb-2">
+                <CardTitle className="text-sm font-medium flex items-center gap-2">
+                  <TrendingUp className="w-4 h-4" />
+                  {tr.tokenByProject}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="flex flex-wrap gap-1.5 h-[280px] items-stretch">
+                  {treemapData.map((item) => {
+                    const pct = (item.size / gt.total) * 100;
+                    return (
+                      <button
+                        key={item.fullName}
+                        onClick={() => {
+                          const sessionsOfProject = allSessions.filter(
+                            (s) => s.project === item.fullName
+                          );
+                          if (sessionsOfProject.length > 0) {
+                            navigate(
+                              `/session/${encodeURIComponent(sessionsOfProject[0].sessionKey)}`
+                            );
+                          }
+                        }}
+                        className="relative rounded-md flex flex-col items-center justify-center p-2 overflow-hidden transition-all hover:opacity-80 hover:scale-105 cursor-pointer"
+                        style={{
+                          backgroundColor: item.color,
+                          minWidth: `${Math.max(pct * 3.5, 60)}px`,
+                          flex: `${Math.max(pct / 20, 0.5)} 1 0`,
+                        }}
+                      >
+                        <span className="text-white text-xs font-medium truncate w-full text-center">
+                          {item.name}
+                        </span>
+                        <span className="text-white/80 text-[10px]">
+                          {fmt(item.size)}
+                        </span>
+                      </button>
+                    );
+                  })}
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Token Breakdown Pie */}
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="text-sm font-medium">
+                  {tr.tokenBreakdown}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <ResponsiveContainer width="100%" height={260}>
+                  <PieChart>
+                    <Pie
+                      data={pieData}
+                      cx="50%"
+                      cy="50%"
+                      innerRadius={55}
+                      outerRadius={95}
+                      paddingAngle={2}
+                      dataKey="value"
+                      nameKey="name"
+                    >
+                      {pieData.map((entry, i) => (
+                        <Cell key={i} fill={entry.color} stroke="none" />
+                      ))}
+                    </Pie>
+                    <Tooltip
+                      content={({ active, payload }) => {
+                        if (!active || !payload?.length) return null;
+                        const d = payload[0].payload;
+                        return (
+                          <div className="bg-popover border border-border rounded-lg px-3 py-2 shadow-lg text-sm">
+                            <p className="font-medium">{d.name}</p>
+                            <p className="text-muted-foreground">{fmt(d.value)}</p>
+                          </div>
+                        );
+                      }}
+                    />
+                  </PieChart>
+                </ResponsiveContainer>
+                <div className="flex flex-wrap gap-3 justify-center mt-2">
+                  {pieData.map((d) => (
+                    <div key={d.name} className="flex items-center gap-1.5 text-xs">
+                      <div
+                        className="w-2.5 h-2.5 rounded-full"
+                        style={{ backgroundColor: d.color }}
+                      />
+                      <span className="text-muted-foreground">
+                        {d.name}: {fmt(d.value)}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Daily Trend */}
+          <div className="px-4 lg:px-6">
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="text-sm font-medium">
+                  {tr.dailyUsage}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <ResponsiveContainer width="100%" height={220}>
+                  <AreaChart data={trendData}>
+                    <defs>
+                      <linearGradient id="fillTokens" x1="0" y1="0" x2="0" y2="1">
+                        <stop
+                          offset="5%"
+                          stopColor="hsl(220, 70%, 55%)"
+                          stopOpacity={0.8}
+                        />
+                        <stop
+                          offset="95%"
+                          stopColor="hsl(220, 70%, 55%)"
+                          stopOpacity={0.1}
+                        />
+                      </linearGradient>
+                    </defs>
+                    <XAxis dataKey="date" tick={{ fontSize: 11 }} />
+                    <YAxis
+                      tickFormatter={(v: number) => fmt(v)}
+                      tick={{ fontSize: 11 }}
+                    />
+                    <Tooltip
+                      content={({ active, payload }) => {
+                        if (!active || !payload?.length) return null;
+                        const d = payload[0].payload;
+                        return (
+                          <div className="bg-popover border border-border rounded-lg px-3 py-2 shadow-lg text-sm">
+                            <p className="font-medium">{d.date}</p>
+                            <p>{fmt(d.total)}</p>
+                          </div>
+                        );
+                      }}
+                    />
+                    <Area
+                      type="monotone"
+                      dataKey="total"
+                      stroke="hsl(220, 70%, 55%)"
+                      fill="url(#fillTokens)"
+                      strokeWidth={2}
+                    />
+                  </AreaChart>
+                </ResponsiveContainer>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Token by Skill */}
+          {skillStats.length > 0 && (
+            <div className="px-4 lg:px-6">
+              <Card>
+                <CardHeader className="pb-2">
+                  <CardTitle className="text-sm font-medium">
+                    {tr.tokenBySkill}
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-2">
+                    {skillStats.slice(0, 15).map((sk) => {
+                      const pct = (sk.total / skillTotal) * 100;
+                      return (
+                        <div key={sk.name} className="flex items-center gap-3">
+                          <span className="text-xs font-medium w-32 truncate shrink-0" title={sk.name}>
+                            {sk.name}
+                          </span>
+                          <div className="flex-1 h-5 bg-muted rounded-sm overflow-hidden">
+                            <div
+                              className="h-full rounded-sm transition-all"
+                              style={{
+                                width: `${Math.max(pct, 1)}%`,
+                                backgroundColor: sk.color,
+                              }}
+                            />
+                          </div>
+                          <span className="text-xs text-muted-foreground w-16 text-right tabular-nums shrink-0">
+                            {fmt(sk.total)}
+                          </span>
+                          <span className="text-[10px] text-muted-foreground w-12 text-right shrink-0">
+                            {pct.toFixed(1)}%
+                          </span>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          )}
+
+          {/* Top Sessions Table */}
+          <div className="px-4 lg:px-6">
+            <Card>
+              <CardHeader className="pb-2">
+                <CardTitle className="text-sm font-medium">
+                  {tr.topSessions}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-1">
+                  {topSessions.map((s, i) => (
+                    <button
+                      key={s.sessionKey}
+                      onClick={() =>
+                        navigate(
+                          `/session/${encodeURIComponent(s.sessionKey)}`
+                        )
+                      }
+                      className="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-accent transition-colors text-left group"
+                    >
+                      <span className="text-xs text-muted-foreground w-6">
+                        {i + 1}
+                      </span>
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium truncate">
+                          {s.fullName}
+                        </p>
+                        <p className="text-xs text-muted-foreground">
+                          {s.msgs} {tr.msgs}
+                        </p>
+                      </div>
+                      <div className="text-right shrink-0">
+                        <p className="text-sm font-semibold">{fmt(s.total)}</p>
+                        <p className="text-xs text-muted-foreground">
+                          {fmtCost(s.cost, currencySymbol)}
+                        </p>
+                      </div>
+                      <Badge variant="secondary" className="text-[10px] shrink-0">
+                        #{i + 1}
+                      </Badge>
+                    </button>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}