@notenkidev/claude-token-dashboard 0.1.2

package/README.md

@@ -0,0 +1,58 @@
+# Claude Token Dashboard
+
+> Visualize your [Claude Code](https://claude.ai/code) token usage by project and date — built with Next.js + Tailwind.
+
+![Summary cards and daily chart](screenshot-1.jpg)
+
+![Project breakdown table](screenshot-2.jpg)
+
+## What it shows
+
+| Section | Details |
+|---|---|
+| **Summary cards** | Output tokens · Input tokens · Effective input · Cache read ratio · Project count · Session count |
+| **Daily chart** | Input / output tokens per day (bar chart) |
+| **Project table** | Per-project breakdown sorted by total usage, with inline bar |
+
+Cache read tokens from prompt caching are tracked separately — you can see at a glance how much of your effective input Claude is serving from cache (typically 90%+).
+
+## Quick start
+
+```bash
+npx @notenkidev/claude-token-dashboard
+```
+
+Open [http://localhost:3000](http://localhost:3000).
+
+On first run, dependencies are installed automatically (~30s). After that it starts instantly.
+
+**Custom port:**
+
+```bash
+npx @notenkidev/claude-token-dashboard -p 4000
+```
+
+Reads `~/.claude/projects/**/*.jsonl` directly — no config, no API key needed.
+
+## How it works
+
+Claude Code writes every conversation turn to JSONL files under `~/.claude/projects/`. Each assistant message includes a `usage` object with `input_tokens`, `output_tokens`, `cache_creation_input_tokens`, and `cache_read_input_tokens`.
+
+This app:
+1. Scans all JSONL files at request time (server-side, no API key needed)
+2. Deduplicates by `message.id` (the same message can appear in multiple entries)
+3. Groups by project (`cwd` field) and by date (`timestamp` field)
+4. Renders everything as a dark-mode dashboard
+
+Hit **Refresh** to re-read the files without restarting the server.
+
+## Tech stack
+
+- [Next.js 16](https://nextjs.org) — App Router, Server Components
+- [Tailwind CSS](https://tailwindcss.com) — dark mode, utility-first
+- [Recharts](https://recharts.org) — daily bar chart
+- [shadcn/ui](https://ui.shadcn.com) — Card, Badge components
+
+## Why I built this
+
+I had no idea how many tokens I was burning per project in Claude Code. Turns out all the data is sitting in `~/.claude/projects/` as JSONL files — one file per session, one JSON line per turn. Parsing it took about 100 lines of Python to confirm, and a weekend to turn into something worth looking at.

package/app/globals.css

@@ -0,0 +1,130 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, monospace;
+  --font-heading: var(--font-sans);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}

package/app/layout.tsx

@@ -0,0 +1,24 @@
+import type { Metadata } from "next"
+import { Geist, Geist_Mono } from "next/font/google"
+import "./globals.css"
+
+const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"] })
+const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"] })
+
+export const metadata: Metadata = {
+  title: "Claude Token Dashboard",
+  description: "Token usage report for Claude Code sessions",
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html
+      lang="ja"
+      className={`dark ${geistSans.variable} ${geistMono.variable}`}
+    >
+      <body className="min-h-screen bg-background text-foreground antialiased">
+        {children}
+      </body>
+    </html>
+  )
+}

package/app/page.tsx

@@ -0,0 +1,74 @@
+import { collect } from "@/lib/collect"
+import SummaryCards from "@/components/SummaryCards"
+import ProjectTable from "@/components/ProjectTable"
+import DailyChart from "@/components/DailyChart"
+import RefreshButton from "@/components/RefreshButton"
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
+
+export const dynamic = "force-dynamic"
+
+export default function Page() {
+  const { byProject, byDay, totalFiles, totalEntries, skippedDup } = collect()
+
+  const dayData = Object.entries(byDay)
+    .filter(([date]) => date !== "unknown")
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([date, stats]) => ({ date, ...stats }))
+
+  const generatedAt = new Date().toLocaleString("ja-JP", {
+    timeZone: "Asia/Tokyo",
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+  })
+
+  return (
+    <main className="mx-auto max-w-screen-xl px-4 py-8 space-y-8">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight">Claude Token Dashboard</h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            ~/.claude/projects/ &nbsp;·&nbsp; {generatedAt} JST
+          </p>
+        </div>
+        <RefreshButton />
+      </div>
+
+      {/* Summary cards */}
+      <SummaryCards
+        byProject={byProject}
+        byDay={byDay}
+        totalFiles={totalFiles}
+        totalEntries={totalEntries}
+        skippedDup={skippedDup}
+      />
+
+      {/* Daily chart */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base font-semibold text-foreground">
+            日別トークン消費
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <DailyChart data={dayData} />
+        </CardContent>
+      </Card>
+
+      {/* Project table */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base font-semibold text-foreground">
+            プロジェクト別トークン消費
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="p-0">
+          <ProjectTable byProject={byProject} />
+        </CardContent>
+      </Card>
+    </main>
+  )
+}

package/bin/cli.js

@@ -0,0 +1,26 @@
+#!/usr/bin/env node
+
+const { execSync, spawn } = require('child_process')
+const { existsSync } = require('fs')
+const { join } = require('path')
+
+const root = join(__dirname, '..')
+const args = process.argv.slice(2)
+
+// Install dependencies on first run (node_modules not included in npm package)
+if (!existsSync(join(root, 'node_modules', 'next'))) {
+  console.log('📦 Installing dependencies (first run, this takes ~30s)...')
+  execSync('npm install', { cwd: root, stdio: 'inherit' })
+}
+
+console.log('🚀 Starting Claude Token Dashboard → http://localhost:3000\n')
+
+const nextBin = join(root, 'node_modules', '.bin', 'next')
+const child = spawn(process.execPath, [nextBin, 'dev', ...args], {
+  cwd: root,
+  stdio: 'inherit',
+})
+
+child.on('exit', (code) => process.exit(code ?? 0))
+process.on('SIGINT', () => child.kill('SIGINT'))
+process.on('SIGTERM', () => child.kill('SIGTERM'))

package/components/DailyChart.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from "recharts"
+
+interface DayEntry {
+  date: string
+  input: number
+  output: number
+  cacheRead: number
+  cacheCreate: number
+}
+
+interface Props {
+  data: DayEntry[]
+}
+
+function fmt(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`
+  return String(n)
+}
+
+export default function DailyChart({ data }: Props) {
+  const chartData = data.map((d) => ({
+    ...d,
+    label: d.date.slice(5), // "MM-DD"
+  }))
+
+  return (
+    <ResponsiveContainer width="100%" height={300}>
+      <BarChart data={chartData} margin={{ top: 4, right: 16, left: 0, bottom: 4 }}>
+        <CartesianGrid strokeDasharray="3 3" stroke="oklch(1 0 0 / 8%)" />
+        <XAxis
+          dataKey="label"
+          tick={{ fontSize: 11, fill: "oklch(0.708 0 0)" }}
+          tickLine={false}
+          axisLine={false}
+        />
+        <YAxis
+          tickFormatter={fmt}
+          tick={{ fontSize: 11, fill: "oklch(0.708 0 0)" }}
+          tickLine={false}
+          axisLine={false}
+          width={48}
+        />
+        <Tooltip
+          contentStyle={{
+            background: "oklch(0.205 0 0)",
+            border: "1px solid oklch(1 0 0 / 10%)",
+            borderRadius: "8px",
+            fontSize: 12,
+          }}
+          labelStyle={{ color: "oklch(0.985 0 0)", marginBottom: 4 }}
+          formatter={(value, name) => [
+            typeof value === "number" ? value.toLocaleString() : value,
+            name,
+          ]}
+        />
+        <Legend
+          wrapperStyle={{ fontSize: 12, color: "oklch(0.708 0 0)" }}
+          iconType="square"
+        />
+        <Bar dataKey="input" name="input" fill="oklch(0.6 0.15 250)" radius={[2, 2, 0, 0]} />
+        <Bar dataKey="output" name="output" fill="oklch(0.6 0.18 290)" radius={[2, 2, 0, 0]} />
+      </BarChart>
+    </ResponsiveContainer>
+  )
+}

package/components/ProjectTable.tsx

@@ -0,0 +1,69 @@
+import type { TokenStats } from "@/lib/collect"
+
+interface Props {
+  byProject: Record<string, TokenStats>
+}
+
+function fmt(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`
+  return n.toLocaleString()
+}
+
+export default function ProjectTable({ byProject }: Props) {
+  const rows = Object.entries(byProject)
+    .map(([project, stats]) => ({ project, ...stats, total: stats.input + stats.output }))
+    .sort((a, b) => b.total - a.total)
+
+  const maxTotal = rows[0]?.total ?? 1
+
+  return (
+    <div className="overflow-x-auto rounded-xl border border-border">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="border-b border-border bg-muted/40">
+            <th className="px-4 py-3 text-left font-medium text-muted-foreground">Project</th>
+            <th className="px-4 py-3 text-right font-medium text-muted-foreground">Output</th>
+            <th className="px-4 py-3 text-right font-medium text-muted-foreground">Input</th>
+            <th className="px-4 py-3 text-right font-medium text-muted-foreground hidden md:table-cell">Cache Read</th>
+            <th className="px-4 py-3 text-right font-medium text-muted-foreground hidden lg:table-cell">Cache Create</th>
+            <th className="px-4 py-3 text-right font-medium text-muted-foreground">Total</th>
+            <th className="px-4 py-3 w-32 hidden sm:table-cell"></th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, i) => {
+            const pct = (row.total / maxTotal) * 100
+            return (
+              <tr
+                key={row.project}
+                className={`border-b border-border last:border-0 hover:bg-muted/20 transition-colors ${i === 0 ? "bg-muted/10" : ""}`}
+              >
+                <td className="px-4 py-3 font-mono text-xs max-w-[200px] truncate" title={row.project}>
+                  {row.project}
+                </td>
+                <td className="px-4 py-3 text-right font-mono text-xs text-violet-400">{fmt(row.output)}</td>
+                <td className="px-4 py-3 text-right font-mono text-xs text-blue-400">{fmt(row.input)}</td>
+                <td className="px-4 py-3 text-right font-mono text-xs text-muted-foreground hidden md:table-cell">
+                  {fmt(row.cacheRead)}
+                </td>
+                <td className="px-4 py-3 text-right font-mono text-xs text-muted-foreground hidden lg:table-cell">
+                  {fmt(row.cacheCreate)}
+                </td>
+                <td className="px-4 py-3 text-right font-mono text-xs font-semibold">{fmt(row.total)}</td>
+                <td className="px-4 py-3 hidden sm:table-cell">
+                  <div className="h-1.5 w-full rounded-full bg-muted overflow-hidden">
+                    <div
+                      className="h-full rounded-full bg-violet-500/70"
+                      style={{ width: `${pct}%` }}
+                    />
+                  </div>
+                </td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+    </div>
+  )
+}

package/components/RefreshButton.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import { useRouter } from "next/navigation"
+import { useTransition } from "react"
+
+export default function RefreshButton() {
+  const router = useRouter()
+  const [isPending, startTransition] = useTransition()
+
+  return (
+    <button
+      onClick={() => startTransition(() => router.refresh())}
+      disabled={isPending}
+      className="flex items-center gap-2 rounded-lg border border-border bg-secondary px-3 py-1.5 text-xs font-medium text-secondary-foreground hover:bg-secondary/80 transition-colors disabled:opacity-50"
+    >
+      <span className={isPending ? "animate-spin" : ""}>↻</span>
+      {isPending ? "Refreshing…" : "Refresh"}
+    </button>
+  )
+}

package/components/SummaryCards.tsx

@@ -0,0 +1,52 @@
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
+import type { TokenStats } from "@/lib/collect"
+
+interface Props {
+  byProject: Record<string, TokenStats>
+  byDay: Record<string, TokenStats>
+  totalFiles: number
+  totalEntries: number
+  skippedDup: number
+}
+
+function fmtBig(n: number): string {
+  if (n >= 1_000_000_000) return `${(n / 1_000_000_000).toFixed(2)}B`
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(2)}M`
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`
+  return n.toLocaleString()
+}
+
+export default function SummaryCards({ byProject, totalFiles, totalEntries, skippedDup }: Props) {
+  const allStats = Object.values(byProject)
+  const totalInput = allStats.reduce((s, v) => s + v.input, 0)
+  const totalOutput = allStats.reduce((s, v) => s + v.output, 0)
+  const totalCacheRead = allStats.reduce((s, v) => s + v.cacheRead, 0)
+  const totalCacheCreate = allStats.reduce((s, v) => s + v.cacheCreate, 0)
+  const effectiveInput = totalInput + totalCacheRead + totalCacheCreate
+  const cacheRatio = effectiveInput > 0 ? (totalCacheRead / effectiveInput) * 100 : 0
+
+  const cards = [
+    { title: "Output Tokens", value: fmtBig(totalOutput), sub: "generated" },
+    { title: "Input Tokens", value: fmtBig(totalInput), sub: "sent" },
+    { title: "Effective Input", value: fmtBig(effectiveInput), sub: "input + cache" },
+    { title: "Cache Read Ratio", value: `${cacheRatio.toFixed(1)}%`, sub: "of effective input" },
+    { title: "Projects", value: String(Object.keys(byProject).length), sub: "unique" },
+    { title: "Sessions", value: fmtBig(totalFiles), sub: `${fmtBig(totalEntries)} entries · ${fmtBig(skippedDup)} deduped` },
+  ]
+
+  return (
+    <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
+      {cards.map((c) => (
+        <Card key={c.title}>
+          <CardHeader className="pb-2">
+            <CardTitle>{c.title}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-2xl font-bold font-mono tracking-tight">{c.value}</p>
+            <p className="mt-1 text-xs text-muted-foreground">{c.sub}</p>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  )
+}

package/components/ui/badge.tsx

@@ -0,0 +1,20 @@
+import { cn } from "@/lib/utils"
+
+interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: "default" | "secondary" | "outline"
+}
+
+export function Badge({ className, variant = "default", ...props }: BadgeProps) {
+  return (
+    <div
+      className={cn(
+        "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors",
+        variant === "default" && "bg-primary text-primary-foreground",
+        variant === "secondary" && "bg-secondary text-secondary-foreground",
+        variant === "outline" && "border border-border text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}

package/components/ui/button.tsx

@@ -0,0 +1,58 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/components/ui/card.tsx

@@ -0,0 +1,22 @@
+import { cn } from "@/lib/utils"
+
+export function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("rounded-xl border border-border bg-card text-card-foreground shadow-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+}
+
+export function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return <h3 className={cn("text-sm font-medium text-muted-foreground", className)} {...props} />
+}
+
+export function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("p-6 pt-0", className)} {...props} />
+}

package/components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

package/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

package/lib/collect.ts

@@ -0,0 +1,125 @@
+import fs from "fs"
+import path from "path"
+import os from "os"
+
+export interface TokenStats {
+  input: number
+  output: number
+  cacheCreate: number
+  cacheRead: number
+}
+
+export interface DashboardData {
+  byProject: Record<string, TokenStats>
+  byDay: Record<string, TokenStats>
+  totalFiles: number
+  totalEntries: number
+  skippedDup: number
+}
+
+const BASE = path.join(os.homedir(), ".claude", "projects")
+
+function projectLabelFromCwd(cwd: string): string {
+  const home = os.homedir()
+  if (cwd.startsWith(home)) {
+    cwd = cwd.slice(home.length).replace(/^\//, "")
+  }
+  if (cwd.startsWith("works/")) cwd = cwd.slice(6)
+  return cwd || "(home)"
+}
+
+function projectLabelFromDir(dirName: string): string {
+  const parts = dirName.replace(/^-/, "").split("-")
+  const idx = parts.indexOf("watanabehiroya")
+  const remainder = idx >= 0 ? parts.slice(idx + 1) : parts
+  const trimmed =
+    remainder.length > 0 && (remainder[0] === "works" || remainder[0] === "Library")
+      ? remainder.slice(1)
+      : remainder
+  return trimmed.length > 0 ? trimmed.join("/") : dirName
+}
+
+function emptyStats(): TokenStats {
+  return { input: 0, output: 0, cacheCreate: 0, cacheRead: 0 }
+}
+
+function addStats(target: TokenStats, input: number, output: number, cacheCreate: number, cacheRead: number) {
+  target.input += input
+  target.output += output
+  target.cacheCreate += cacheCreate
+  target.cacheRead += cacheRead
+}
+
+export function collect(): DashboardData {
+  const byProject: Record<string, TokenStats> = {}
+  const byDay: Record<string, TokenStats> = {}
+  const seenMessageIds = new Set<string>()
+  let totalFiles = 0
+  let totalEntries = 0
+  let skippedDup = 0
+
+  if (!fs.existsSync(BASE)) return { byProject, byDay, totalFiles, totalEntries, skippedDup }
+
+  const projectDirs = fs.readdirSync(BASE).sort()
+
+  for (const dirName of projectDirs) {
+    const projectDir = path.join(BASE, dirName)
+    if (!fs.statSync(projectDir).isDirectory()) continue
+
+    const fallbackLabel = projectLabelFromDir(dirName)
+
+    const jsonlFiles = fs
+      .readdirSync(projectDir)
+      .filter((f) => f.endsWith(".jsonl"))
+
+    for (const file of jsonlFiles) {
+      totalFiles++
+      const content = fs.readFileSync(path.join(projectDir, file), "utf-8")
+      const lines = content.split("\n")
+
+      for (const line of lines) {
+        const trimmed = line.trim()
+        if (!trimmed) continue
+
+        let d: Record<string, unknown>
+        try {
+          d = JSON.parse(trimmed)
+        } catch {
+          continue
+        }
+
+        const message = d.message as Record<string, unknown> | undefined
+        const usage = message?.usage as Record<string, number> | undefined
+        if (!usage) continue
+
+        const msgId = (message?.id as string) || ""
+        if (msgId && seenMessageIds.has(msgId)) {
+          skippedDup++
+          continue
+        }
+        if (msgId) seenMessageIds.add(msgId)
+
+        const cwd = (d.cwd as string) || ""
+        const label = cwd ? projectLabelFromCwd(cwd) : fallbackLabel
+
+        const ts = (d.timestamp as string) || ""
+        let date = "unknown"
+        const datePart = ts.slice(0, 10)
+        if (/^\d{4}-\d{2}-\d{2}$/.test(datePart)) date = datePart
+
+        const input = (usage.input_tokens || 0)
+        const output = (usage.output_tokens || 0)
+        const cacheCreate = (usage.cache_creation_input_tokens || 0)
+        const cacheRead = (usage.cache_read_input_tokens || 0)
+
+        if (!byProject[label]) byProject[label] = emptyStats()
+        if (!byDay[date]) byDay[date] = emptyStats()
+        addStats(byProject[label], input, output, cacheCreate, cacheRead)
+        addStats(byDay[date], input, output, cacheCreate, cacheRead)
+        totalEntries++
+      }
+    }
+  }
+
+  return { byProject, byDay, totalFiles, totalEntries, skippedDup }
+}

package/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@notenkidev/claude-token-dashboard",
+  "version": "0.1.2",
+  "description": "Visualize your Claude Code token usage by project and date",
+  "bin": {
+    "claude-token-dashboard": "./bin/cli.js"
+  },
+  "files": [
+    "app",
+    "components",
+    "lib",
+    "public",
+    "bin",
+    "next.config.ts",
+    "postcss.config.mjs",
+    "tsconfig.json",
+    "components.json",
+    "eslint.config.mjs",
+    "next-env.d.ts",
+    "screenshot-1.jpg",
+    "screenshot-2.jpg"
+  ],
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.5.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.17.0",
+    "next": "16.2.7",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "recharts": "^3.8.1",
+    "shadcn": "^4.10.0",
+    "tailwind-merge": "^3.6.0",
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.2.7",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

package/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

package/public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

package/public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

package/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

package/public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

package/public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

package/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}