@arraystar/tokenscope 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/README.md +87 -0
  2. package/bun.lock +1170 -0
  3. package/components.json +25 -0
  4. package/eslint.config.js +23 -0
  5. package/index.html +13 -0
  6. package/package.json +46 -0
  7. package/public/data.json +41 -0
  8. package/public/favicon.svg +1 -0
  9. package/public/icons.svg +24 -0
  10. package/src/App.css +184 -0
  11. package/src/App.tsx +98 -0
  12. package/src/PricingContext.tsx +131 -0
  13. package/src/assets/hero.png +0 -0
  14. package/src/assets/react.svg +1 -0
  15. package/src/assets/vite.svg +1 -0
  16. package/src/cli.ts +98 -0
  17. package/src/components/Overview.tsx +468 -0
  18. package/src/components/PricingSheet.tsx +209 -0
  19. package/src/components/SessionDetail.tsx +244 -0
  20. package/src/components/ui/badge.tsx +52 -0
  21. package/src/components/ui/button.tsx +58 -0
  22. package/src/components/ui/card.tsx +103 -0
  23. package/src/components/ui/input.tsx +20 -0
  24. package/src/components/ui/separator.tsx +23 -0
  25. package/src/components/ui/sheet.tsx +138 -0
  26. package/src/components/ui/sidebar.tsx +721 -0
  27. package/src/components/ui/skeleton.tsx +13 -0
  28. package/src/components/ui/table.tsx +114 -0
  29. package/src/components/ui/tooltip.tsx +64 -0
  30. package/src/data.ts +90 -0
  31. package/src/hooks/use-mobile.ts +19 -0
  32. package/src/i18n.tsx +148 -0
  33. package/src/index.css +138 -0
  34. package/src/lib/utils.ts +6 -0
  35. package/src/main.tsx +10 -0
  36. package/src/parser/claude.ts +225 -0
  37. package/src/parser/codex.ts +181 -0
  38. package/src/parser/index.ts +83 -0
  39. package/src/parser/types.ts +35 -0
  40. package/src/pricing.ts +139 -0
  41. package/src/types.ts +56 -0
  42. package/tsconfig.app.json +30 -0
  43. package/tsconfig.json +13 -0
  44. package/tsconfig.node.json +26 -0
  45. package/vite.config.ts +13 -0
package/README.md ADDED
@@ -0,0 +1,87 @@
1
+ # TokenScope
2
+
3
+ Token usage dashboard for **Claude Code** and **Codex CLI** — visualize your AI coding costs.
4
+
5
+ ## Features
6
+
7
+ - **Multi-source**: Supports both Claude Code (`~/.claude/projects/`) and Codex CLI (`~/.codex/sessions/`)
8
+ - **Token breakdown**: Input, output, cache read/write per model
9
+ - **Cost estimation**: Configurable pricing for 20+ models (Anthropic, OpenAI, Google, Zhipu, DeepSeek)
10
+ - **Per-session detail**: Drill into individual sessions to see turn-by-turn usage
11
+ - **Skill analysis**: See which Claude Code skills consume the most tokens
12
+ - **i18n**: Chinese / English UI toggle
13
+ - **Zero config**: Auto-detects installed tools and parses all available data
14
+
15
+ ## Quick Start
16
+
17
+ ```bash
18
+ git clone https://github.com/yanxuwang/tokenscope.git
19
+ cd tokenscope
20
+
21
+ npm install
22
+
23
+ # Build & preview (ships with sample data)
24
+ npm run build && npm run preview
25
+ ```
26
+
27
+ Open `http://localhost:4173` in your browser — you'll see sample data.
28
+
29
+ **To use your own data:**
30
+
31
+ ```bash
32
+ # Parse your Claude Code + Codex CLI data (overwrites sample data.json)
33
+ npm run parse
34
+
35
+ # Rebuild & preview with your data
36
+ npm run build && npm run preview
37
+ ```
38
+
39
+ ## CLI Options
40
+
41
+ ```bash
42
+ # Parse both sources (default)
43
+ npm run parse
44
+
45
+ # Only Claude Code data
46
+ node --experimental-strip-types src/cli.ts --claude
47
+
48
+ # Only Codex CLI data
49
+ node --experimental-strip-types src/cli.ts --codex
50
+
51
+ # Export data.json only, don't serve
52
+ node --experimental-strip-types src/cli.ts --json-only
53
+ ```
54
+
55
+ ## Development
56
+
57
+ ```bash
58
+ npm run dev # Vite dev server with hot reload
59
+ npm run build # Type check + production build
60
+ npm run preview # Preview production build
61
+ npm run lint # ESLint
62
+ ```
63
+
64
+ ## How It Works
65
+
66
+ 1. **Parser** (`src/parser/`) reads raw JSONL session files from local disk
67
+ - `claude.ts` — parses `~/.claude/projects/**/*.jsonl`
68
+ - `codex.ts` — parses `~/.codex/sessions/**/*.jsonl`
69
+ 2. **Orchestrator** merges sessions into unified `public/data.json`
70
+ 3. **Dashboard** (React + Vite) reads `data.json` and renders interactive charts
71
+
72
+ ## Pricing Configuration
73
+
74
+ Click the gear icon in the dashboard header to configure model pricing. The dashboard ships with pricing for common models, but you can:
75
+
76
+ - Map detected models to known pricing entries
77
+ - Set custom pricing per model
78
+ - Switch between USD and CNY
79
+
80
+ ## Requirements
81
+
82
+ - Node.js 22+ (for `--experimental-strip-types`)
83
+ - Claude Code and/or Codex CLI installed with session history
84
+
85
+ ## License
86
+
87
+ MIT