@notenkidev/claude-token-dashboard 0.1.6 → 0.1.9

package/README.md

@@ -2,14 +2,15 @@
 
 > 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)
+![Summary cards and daily chart](screenshot.v2-1.png)
 
-![Project breakdown table](screenshot-2.jpg)
+![Project breakdown table](screenshot.v2-2.png)
 
 ## Quick Start (No Install)
 
 ```bash
-npx @notenkidev/claude-token-dashboard
+npm install -g @notenkidev/claude-token-dashboard
+claude-token-dashboard
 ```
 
 Open http://localhost:3000
@@ -18,26 +19,34 @@ Open http://localhost:3000
 
 | Section | Details |
 |---|---|
-| **Summary cards** | Output tokens · Input tokens · Effective input · Cache read ratio · Project count · Session count |
+| **Summary cards** | Estimated total cost · Output tokens · Input tokens · Effective input · Cache read ratio · Session count |
 | **Daily chart** | Input / output tokens per day (bar chart) |
-| **Project table** | Per-project breakdown sorted by total usage, with inline bar |
+| **Project table** | Per-project breakdown sorted by cost, 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%+).
 
+## Features
+
+- Token usage per project (output / input / cache read / cache create)
+- Daily usage chart
+- Cache read ratio
+- Estimated cost in USD per project (claude-sonnet-4-6 pricing)
+- Cost share % with warning for projects over 20% of total spend
+- Total estimated cost since first session
+
 ## Quick start
 
 ```bash
-npx @notenkidev/claude-token-dashboard
+npm install -g @notenkidev/claude-token-dashboard
+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
+claude-token-dashboard -p 4000
 ```
 
 Reads `~/.claude/projects/**/*.jsonl` directly — no config, no API key needed.

package/components/ProjectTable.tsx

@@ -1,4 +1,5 @@
 import type { TokenStats } from "@/lib/collect"
+import { calcCost, fmtCost } from "@/lib/pricing"
 
 interface Props {
   byProject: Record<string, TokenStats>
@@ -12,10 +13,17 @@ function fmt(n: number): string {
 
 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)
+    .map(([project, stats]) => ({
+      project,
+      ...stats,
+      total: stats.input + stats.output,
+      cost: calcCost(stats),
+    }))
+    .sort((a, b) => b.cost - a.cost)
 
-  const maxTotal = rows[0]?.total ?? 1
+  const maxTotal = Math.max(...rows.map((r) => r.total), 1)
+  const totalCost = rows.reduce((s, r) => s + r.cost, 0)
+  const WARNING_THRESHOLD = 0.20
 
   return (
     <div className="overflow-x-auto rounded-xl border border-border">
@@ -23,24 +31,47 @@ export default function ProjectTable({ byProject }: Props) {
         <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">Cost</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>
+            <th className="px-4 py-3 text-right font-medium text-muted-foreground">Tokens</th>
+            <th className="px-4 py-3 w-28 hidden sm:table-cell"></th>
           </tr>
         </thead>
         <tbody>
           {rows.map((row, i) => {
             const pct = (row.total / maxTotal) * 100
+            const costShare = totalCost > 0 ? row.cost / totalCost : 0
+            const isHighCost = costShare >= WARNING_THRESHOLD
+
             return (
               <tr
                 key={row.project}
-                className={`border-b border-border last:border-0 hover:bg-muted/20 transition-colors ${i === 0 ? "bg-muted/10" : ""}`}
+                className={`border-b border-border last:border-0 hover:bg-muted/20 transition-colors ${
+                  isHighCost ? "bg-amber-950/10" : 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 className="px-4 py-3 font-mono text-xs max-w-[180px]">
+                  <div className="flex items-center gap-1.5 truncate" title={row.project}>
+                    {isHighCost && (
+                      <span className="shrink-0 text-amber-400" title={`${(costShare * 100).toFixed(1)}% of total cost`}>
+                        ⚠
+                      </span>
+                    )}
+                    <span className="truncate">{row.project}</span>
+                  </div>
+                </td>
+                <td className="px-4 py-3 text-right font-mono text-xs">
+                  <span className={isHighCost ? "text-amber-400 font-semibold" : "text-emerald-400"}>
+                    {fmtCost(row.cost)}
+                  </span>
+                  {totalCost > 0 && (
+                    <span className="ml-1 text-muted-foreground text-[10px]">
+                      {(costShare * 100).toFixed(1)}%
+                    </span>
+                  )}
                 </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>
@@ -50,11 +81,11 @@ export default function ProjectTable({ byProject }: Props) {
                 <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 text-right font-mono text-xs text-muted-foreground">{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"
+                      className={`h-full rounded-full ${isHighCost ? "bg-amber-500/70" : "bg-violet-500/70"}`}
                       style={{ width: `${pct}%` }}
                     />
                   </div>
@@ -63,6 +94,15 @@ export default function ProjectTable({ byProject }: Props) {
             )
           })}
         </tbody>
+        <tfoot>
+          <tr className="border-t border-border bg-muted/20">
+            <td className="px-4 py-2 text-xs font-medium text-muted-foreground">TOTAL</td>
+            <td className="px-4 py-2 text-right font-mono text-xs font-semibold text-emerald-400">
+              {fmtCost(totalCost)}
+            </td>
+            <td colSpan={6} />
+          </tr>
+        </tfoot>
       </table>
     </div>
   )

package/components/SummaryCards.tsx

@@ -1,5 +1,6 @@
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
 import type { TokenStats } from "@/lib/collect"
+import { calcCost, fmtCost } from "@/lib/pricing"
 
 interface Props {
   byProject: Record<string, TokenStats>
@@ -25,24 +26,33 @@ export default function SummaryCards({ byProject, totalFiles, totalEntries, skip
   const effectiveInput = totalInput + totalCacheRead + totalCacheCreate
   const cacheRatio = effectiveInput > 0 ? (totalCacheRead / effectiveInput) * 100 : 0
 
+  const totalCost = allStats.reduce((s, v) => s + calcCost(v), 0)
+
   const cards = [
+    {
+      title: "Estimated Cost",
+      value: fmtCost(totalCost),
+      sub: "claude-sonnet-4-6",
+      highlight: true,
+    },
     { 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}>
+        <Card key={c.title} className={c.highlight ? "border-emerald-500/40 bg-emerald-950/20" : ""}>
           <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={`text-2xl font-bold font-mono tracking-tight ${c.highlight ? "text-emerald-400" : ""}`}>
+              {c.value}
+            </p>
             <p className="mt-1 text-xs text-muted-foreground">{c.sub}</p>
           </CardContent>
         </Card>

package/lib/pricing.ts

@@ -0,0 +1,26 @@
+import type { TokenStats } from "./collect"
+
+// claude-sonnet-4-6 pricing (USD per token)
+export const PRICING = {
+  input:       3.00  / 1_000_000,
+  output:      15.00 / 1_000_000,
+  cacheRead:   0.30  / 1_000_000,
+  cacheCreate: 3.75  / 1_000_000,
+} as const
+
+export function calcCost(stats: TokenStats): number {
+  return (
+    stats.input       * PRICING.input +
+    stats.output      * PRICING.output +
+    stats.cacheRead   * PRICING.cacheRead +
+    stats.cacheCreate * PRICING.cacheCreate
+  )
+}
+
+export function fmtCost(usd: number): string {
+  if (usd >= 1000) return `$${(usd / 1000).toFixed(1)}K`
+  if (usd >= 100)  return `$${usd.toFixed(0)}`
+  if (usd >= 1)    return `$${usd.toFixed(2)}`
+  if (usd >= 0.01) return `$${usd.toFixed(3)}`
+  return "<$0.01"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@notenkidev/claude-token-dashboard",
-  "version": "0.1.6",
+  "version": "0.1.9",
   "description": "Visualize your Claude Code token usage by project and date",
   "bin": {
     "claude-token-dashboard": "bin/cli.js"