llm-usage-dashboard 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 (20) hide show
  1. package/README.md +117 -0
  2. package/assets/genicon.js +90 -0
  3. package/assets/icon.ico +0 -0
  4. package/assets/icon.png +0 -0
  5. package/assets/pricing.json.example +7 -0
  6. package/assets/tray.png +0 -0
  7. package/bin/cli.js +23 -0
  8. package/package.json +74 -0
  9. package/src/main/aggregate.js +160 -0
  10. package/src/main/collectors/claude.js +67 -0
  11. package/src/main/collectors/codex.js +73 -0
  12. package/src/main/collectors/jsonl.js +44 -0
  13. package/src/main/main.js +216 -0
  14. package/src/main/paths.js +50 -0
  15. package/src/main/pricing.js +72 -0
  16. package/src/main/probe.js +44 -0
  17. package/src/preload.js +19 -0
  18. package/src/renderer/app.js +186 -0
  19. package/src/renderer/index.html +78 -0
  20. package/src/renderer/styles.css +94 -0
package/src/renderer/styles.css ADDED
@@ -0,0 +1,94 @@
1
+ :root {
2
+ --bg: #0f1117;
3
+ --panel: #171a22;
4
+ --panel2: #1d212b;
5
+ --line: #272c38;
6
+ --text: #e6e8ee;
7
+ --muted: #8b93a7;
8
+ --codex: #34d399;
9
+ --claude: #fb923c;
10
+ --blue: #60a5fa;
11
+ --danger: #f87171;
12
+ --warn: #fbbf24;
13
+ }
14
+ * { box-sizing: border-box; }
15
+ html, body { margin: 0; height: 100%; }
16
+ body {
17
+ background: var(--bg);
18
+ color: var(--text);
19
+ font: 14px/1.5 "Segoe UI", "Microsoft JhengHei", system-ui, sans-serif;
20
+ }
21
+ .topbar {
22
+ display: flex; align-items: center; justify-content: space-between;
23
+ padding: 14px 22px; border-bottom: 1px solid var(--line);
24
+ position: sticky; top: 0; background: rgba(15,17,23,.92); backdrop-filter: blur(6px); z-index: 5;
25
+ }
26
+ .brand { display: flex; align-items: center; gap: 12px; }
27
+ .brand h1 { font-size: 17px; margin: 0; font-weight: 650; letter-spacing: .2px; }
28
+ .logo {
29
+ width: 22px; height: 22px; border-radius: 50%;
30
+ background: conic-gradient(from -210deg, var(--codex) 0 33%, var(--claude) 33% 66%, transparent 66%);
31
+ position: relative;
32
+ }
33
+ .logo::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--blue); }
34
+ .actions { display: flex; align-items: center; gap: 16px; }
35
+ .updated { color: var(--muted); font-size: 12px; }
36
+ .toggle { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; cursor: pointer; }
37
+ .btn {
38
+ background: var(--panel2); color: var(--text); border: 1px solid var(--line);
39
+ padding: 7px 14px; border-radius: 8px; cursor: pointer; font-size: 13px;
40
+ }
41
+ .btn:hover { border-color: var(--blue); }
42
+ main { padding: 20px 22px 40px; max-width: 1200px; margin: 0 auto; }
43
+
44
+ .totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
45
+ .total-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
46
+ .t-label { color: var(--muted); font-size: 12px; }
47
+ .t-value { font-size: 26px; font-weight: 700; margin-top: 4px; }
48
+
49
+ .providers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
50
+ .card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin-bottom: 18px; }
51
+ .card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
52
+ .card-head h2 { font-size: 16px; margin: 0; }
53
+ .card-head .sub { color: var(--muted); font-weight: 400; font-size: 13px; }
54
+ .badge { font-size: 11px; padding: 3px 9px; border-radius: 20px; text-transform: uppercase; font-weight: 700; letter-spacing: .5px; }
55
+ .badge-codex { background: rgba(52,211,153,.15); color: var(--codex); }
56
+ .badge-claude { background: rgba(251,146,60,.15); color: var(--claude); }
57
+
58
+ .limits { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
59
+ .limit { }
60
+ .limit-top { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; }
61
+ .limit-top .l-name { color: var(--muted); }
62
+ .limit-top .l-reset { color: var(--muted); }
63
+ .limit-top .l-pct { font-weight: 700; }
64
+ .bar { height: 9px; border-radius: 6px; background: var(--panel2); overflow: hidden; }
65
+ .bar > span { display: block; height: 100%; border-radius: 6px; transition: width .4s ease; }
66
+ .bar.codex > span { background: linear-gradient(90deg, var(--codex), #10b981); }
67
+ .bar.claude > span { background: linear-gradient(90deg, var(--claude), #f97316); }
68
+ .bar.hot > span { background: linear-gradient(90deg, var(--warn), var(--danger)) !important; }
69
+
70
+ .stat-row { display: flex; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; }
71
+ .stat { flex: 1; display: flex; flex-direction: column; }
72
+ .s-label { color: var(--muted); font-size: 11px; }
73
+ .s-val { font-size: 17px; font-weight: 650; margin-top: 2px; }
74
+ .note { color: var(--muted); font-size: 11px; margin-top: 12px; }
75
+
76
+ .chart-card .chart { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding-top: 8px; }
77
+ .chart .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; height: 100%; }
78
+ .chart .stack { width: 70%; display: flex; flex-direction: column-reverse; border-radius: 4px 4px 0 0; overflow: hidden; min-height: 2px; }
79
+ .chart .seg-codex { background: var(--codex); }
80
+ .chart .seg-claude { background: var(--claude); }
81
+ .chart .x { color: var(--muted); font-size: 10px; margin-top: 4px; }
82
+ .legend { color: var(--muted); font-size: 12px; }
83
+ .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 4px 0 10px; vertical-align: middle; }
84
+ .dot-codex { background: var(--codex); } .dot-claude { background: var(--claude); }
85
+
86
+ table.projects { width: 100%; border-collapse: collapse; font-size: 13px; }
87
+ table.projects th { text-align: left; color: var(--muted); font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 12px; }
88
+ table.projects td { padding: 9px 10px; border-bottom: 1px solid var(--panel2); }
89
+ table.projects tr:hover td { background: var(--panel2); }
90
+ .num { text-align: right; }
91
+ .src-tag { font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-right: 4px; }
92
+ .src-codex { background: rgba(52,211,153,.15); color: var(--codex); }
93
+ .src-claude { background: rgba(251,146,60,.15); color: var(--claude); }
94
+ .hint, .updated { font-size: 12px; color: var(--muted); }