tokengolf 0.3.0 → 0.4.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.
- package/.husky/pre-commit +4 -0
- package/.prettierignore +2 -0
- package/.prettierrc +6 -0
- package/.vscode/settings.json +15 -0
- package/CHANGELOG.md +254 -0
- package/CLAUDE.md +136 -10
- package/README.md +89 -47
- package/assets/demo-hud.png +0 -0
- package/assets/scorecard.png +0 -0
- package/dist/cli.js +790 -103
- package/docs/assets/demo-hud.png +0 -0
- package/docs/assets/scorecard.png +0 -0
- package/docs/assets/tokengolf-bg-min.jpg +0 -0
- package/docs/index.html +1080 -0
- package/eslint.config.js +39 -0
- package/hooks/post-tool-use-failure.js +27 -0
- package/hooks/post-tool-use.js +11 -7
- package/hooks/pre-compact.js +9 -3
- package/hooks/session-end.js +168 -42
- package/hooks/session-start.js +31 -11
- package/hooks/session-stop.js +6 -2
- package/hooks/statusline.sh +16 -7
- package/hooks/stop.js +27 -0
- package/hooks/subagent-start.js +27 -0
- package/hooks/user-prompt-submit.js +8 -6
- package/package.json +16 -3
- package/src/cli.js +23 -6
- package/src/components/ActiveRun.js +76 -24
- package/src/components/ScoreCard.js +132 -37
- package/src/components/StartRun.js +156 -53
- package/src/components/StatsView.js +89 -37
- package/src/lib/__tests__/score.test.js +596 -0
- package/src/lib/cost.js +84 -21
- package/src/lib/demo.js +186 -0
- package/src/lib/install.js +92 -62
- package/src/lib/score.js +433 -136
- package/src/lib/store.js +11 -11
- package/.claude/settings.local.json +0 -36
package/docs/index.html
ADDED
|
@@ -0,0 +1,1080 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>TokenGolf — Every token matters.</title>
|
|
7
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
8
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
9
|
+
<link
|
|
10
|
+
href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@700&display=swap"
|
|
11
|
+
rel="stylesheet"
|
|
12
|
+
/>
|
|
13
|
+
<meta
|
|
14
|
+
name="description"
|
|
15
|
+
content="TokenGolf turns Claude Code sessions into a game. Track token efficiency, earn achievements, and level up your prompting skills."
|
|
16
|
+
/>
|
|
17
|
+
|
|
18
|
+
<!-- Open Graph -->
|
|
19
|
+
<meta property="og:type" content="website" />
|
|
20
|
+
<meta property="og:url" content="https://josheche.github.io/tokengolf/" />
|
|
21
|
+
<meta property="og:title" content="TokenGolf — Every token matters." />
|
|
22
|
+
<meta property="og:description" content="TokenGolf turns Claude Code sessions into a game. Track token efficiency, earn achievements, and level up your prompting skills." />
|
|
23
|
+
<meta property="og:image" content="https://josheche.github.io/tokengolf/assets/tokengolf-bg-min.jpg" />
|
|
24
|
+
|
|
25
|
+
<!-- Twitter Card -->
|
|
26
|
+
<meta name="twitter:card" content="summary_large_image" />
|
|
27
|
+
<meta name="twitter:title" content="TokenGolf — Every token matters." />
|
|
28
|
+
<meta name="twitter:description" content="TokenGolf turns Claude Code sessions into a game. Track token efficiency, earn achievements, and level up your prompting skills." />
|
|
29
|
+
<meta name="twitter:image" content="https://josheche.github.io/tokengolf/assets/tokengolf-bg-min.jpg" />
|
|
30
|
+
|
|
31
|
+
<!-- Structured Data -->
|
|
32
|
+
<script type="application/ld+json">
|
|
33
|
+
{
|
|
34
|
+
"@context": "https://schema.org",
|
|
35
|
+
"@type": "SoftwareApplication",
|
|
36
|
+
"name": "TokenGolf",
|
|
37
|
+
"url": "https://josheche.github.io/tokengolf/",
|
|
38
|
+
"applicationCategory": "DeveloperApplication",
|
|
39
|
+
"operatingSystem": "macOS, Linux",
|
|
40
|
+
"description": "A CLI game that wraps Claude Code sessions with game mechanics — quests, budgets, efficiency ratings, and 60+ achievements. Flow mode tracks you passively. Roguelike mode trains deliberate prompting.",
|
|
41
|
+
"offers": {
|
|
42
|
+
"@type": "Offer",
|
|
43
|
+
"price": "0",
|
|
44
|
+
"priceCurrency": "USD"
|
|
45
|
+
},
|
|
46
|
+
"downloadUrl": "https://github.com/josheche/tokengolf",
|
|
47
|
+
"author": {
|
|
48
|
+
"@type": "Person",
|
|
49
|
+
"name": "josheche"
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
</script>
|
|
53
|
+
|
|
54
|
+
<style>
|
|
55
|
+
*,
|
|
56
|
+
*::before,
|
|
57
|
+
*::after {
|
|
58
|
+
box-sizing: border-box;
|
|
59
|
+
margin: 0;
|
|
60
|
+
padding: 0;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
:root {
|
|
64
|
+
--bg: #0d1117;
|
|
65
|
+
--card: #161b22;
|
|
66
|
+
--border: #30363d;
|
|
67
|
+
--text: #e6edf3;
|
|
68
|
+
--muted: #8b949e;
|
|
69
|
+
--green: #3fb950;
|
|
70
|
+
--green-dim: #238636;
|
|
71
|
+
--cyan: #79c0ff;
|
|
72
|
+
--magenta: #d2a8ff;
|
|
73
|
+
--yellow: #e3b341;
|
|
74
|
+
--red: #f85149;
|
|
75
|
+
--orange: #ffa657;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
body {
|
|
79
|
+
background: var(--bg);
|
|
80
|
+
color: var(--text);
|
|
81
|
+
font-family:
|
|
82
|
+
-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
|
83
|
+
line-height: 1.6;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
a {
|
|
87
|
+
color: var(--cyan);
|
|
88
|
+
text-decoration: none;
|
|
89
|
+
}
|
|
90
|
+
a:hover {
|
|
91
|
+
text-decoration: underline;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
code,
|
|
95
|
+
.mono {
|
|
96
|
+
font-family:
|
|
97
|
+
"SF Mono", "Cascadia Mono", "Fira Code", "Consolas", monospace;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/* ── Hero ── */
|
|
101
|
+
.hero {
|
|
102
|
+
position: relative;
|
|
103
|
+
min-height: 100vh;
|
|
104
|
+
display: flex;
|
|
105
|
+
flex-direction: column;
|
|
106
|
+
align-items: center;
|
|
107
|
+
justify-content: flex-start;
|
|
108
|
+
padding-top: clamp(1.5rem, 6vh, 4rem);
|
|
109
|
+
text-align: center;
|
|
110
|
+
padding-left: 1.5rem;
|
|
111
|
+
padding-right: 1.5rem;
|
|
112
|
+
padding-bottom: 4rem;
|
|
113
|
+
background-image: url("assets/tokengolf-bg-min.jpg");
|
|
114
|
+
background-size: cover;
|
|
115
|
+
background-position: center 30%;
|
|
116
|
+
background-repeat: no-repeat;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.hero::before {
|
|
120
|
+
content: "";
|
|
121
|
+
position: absolute;
|
|
122
|
+
inset: 0;
|
|
123
|
+
background: linear-gradient(
|
|
124
|
+
to bottom,
|
|
125
|
+
rgba(0, 0, 0, 0.55) 0%,
|
|
126
|
+
rgba(0, 0, 0, 0.45) 40%,
|
|
127
|
+
rgba(13, 17, 23, 0.95) 100%
|
|
128
|
+
);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.hero > * {
|
|
132
|
+
position: relative;
|
|
133
|
+
z-index: 1;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.hero-eyebrow {
|
|
137
|
+
font-family: "SF Mono", "Cascadia Mono", monospace;
|
|
138
|
+
color: #6ee87a;
|
|
139
|
+
font-size: 2.5rem;
|
|
140
|
+
letter-spacing: 0.1em;
|
|
141
|
+
text-transform: uppercase;
|
|
142
|
+
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.hero h1 {
|
|
146
|
+
font-family: "Libre Baskerville", Georgia, serif;
|
|
147
|
+
font-size: clamp(3rem, 10vw, 6rem);
|
|
148
|
+
font-weight: 700;
|
|
149
|
+
letter-spacing: 0.02em;
|
|
150
|
+
line-height: 1;
|
|
151
|
+
margin-bottom: 1rem;
|
|
152
|
+
text-shadow:
|
|
153
|
+
0 2px 16px rgba(0, 0, 0, 0.7),
|
|
154
|
+
0 1px 3px rgba(0, 0, 0, 0.5);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.hero h1 span {
|
|
158
|
+
color: #ffffff;
|
|
159
|
+
-webkit-text-fill-color: #ffffff;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.hero-tagline {
|
|
163
|
+
font-size: clamp(1rem, 3vw, 1.4rem);
|
|
164
|
+
color: rgba(255, 255, 255, 0.92);
|
|
165
|
+
font-style: italic;
|
|
166
|
+
margin-bottom: 1.25rem;
|
|
167
|
+
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.hero-sub {
|
|
171
|
+
font-size: 1.05rem;
|
|
172
|
+
color: rgba(255, 255, 255, 0.85);
|
|
173
|
+
max-width: 540px;
|
|
174
|
+
margin-bottom: 2.5rem;
|
|
175
|
+
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
/* Install box */
|
|
179
|
+
.install-box {
|
|
180
|
+
display: flex;
|
|
181
|
+
align-items: center;
|
|
182
|
+
gap: 0;
|
|
183
|
+
background: rgba(13, 17, 23, 0.45);
|
|
184
|
+
backdrop-filter: blur(12px) saturate(1.2);
|
|
185
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.2);
|
|
186
|
+
border: 1px solid rgba(255, 255, 255, 0.18);
|
|
187
|
+
border-radius: 9999px;
|
|
188
|
+
padding: 0.4rem 0.4rem 0.4rem 1.25rem;
|
|
189
|
+
max-width: 420px;
|
|
190
|
+
width: 100%;
|
|
191
|
+
margin: 0 auto 1.5rem;
|
|
192
|
+
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.install-cmd {
|
|
196
|
+
flex: 1;
|
|
197
|
+
font-family: "SF Mono", "Cascadia Mono", monospace;
|
|
198
|
+
font-size: 0.95rem;
|
|
199
|
+
color: var(--green);
|
|
200
|
+
white-space: nowrap;
|
|
201
|
+
overflow: hidden;
|
|
202
|
+
text-overflow: ellipsis;
|
|
203
|
+
background: transparent;
|
|
204
|
+
border: none;
|
|
205
|
+
outline: none;
|
|
206
|
+
cursor: text;
|
|
207
|
+
user-select: all;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.copy-btn {
|
|
211
|
+
background: var(--green);
|
|
212
|
+
color: #0d1117;
|
|
213
|
+
border: none;
|
|
214
|
+
border-radius: 9999px;
|
|
215
|
+
padding: 0.45rem 1rem;
|
|
216
|
+
font-size: 0.85rem;
|
|
217
|
+
font-weight: 600;
|
|
218
|
+
cursor: pointer;
|
|
219
|
+
transition:
|
|
220
|
+
background 0.15s,
|
|
221
|
+
transform 0.1s;
|
|
222
|
+
white-space: nowrap;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.copy-btn:hover {
|
|
226
|
+
background: #52d765;
|
|
227
|
+
}
|
|
228
|
+
.copy-btn:active {
|
|
229
|
+
transform: scale(0.97);
|
|
230
|
+
}
|
|
231
|
+
.copy-btn.copied {
|
|
232
|
+
background: var(--green-dim);
|
|
233
|
+
color: #e6edf3;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.hero-links {
|
|
237
|
+
display: flex;
|
|
238
|
+
gap: 1.5rem;
|
|
239
|
+
justify-content: center;
|
|
240
|
+
color: var(--muted);
|
|
241
|
+
font-size: 0.95rem;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.hero-links a {
|
|
245
|
+
color: rgba(255, 255, 255, 0.9);
|
|
246
|
+
display: flex;
|
|
247
|
+
align-items: center;
|
|
248
|
+
gap: 0.4rem;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
.hero-links a:hover {
|
|
252
|
+
color: var(--text);
|
|
253
|
+
text-decoration: none;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
/* ── Sections ── */
|
|
257
|
+
section {
|
|
258
|
+
max-width: 960px;
|
|
259
|
+
margin: 0 auto;
|
|
260
|
+
padding: 5rem 1.5rem;
|
|
261
|
+
border-top: 1px solid var(--border);
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
section h2 {
|
|
265
|
+
font-size: 1.75rem;
|
|
266
|
+
font-weight: 700;
|
|
267
|
+
margin-bottom: 2rem;
|
|
268
|
+
letter-spacing: -0.02em;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
section h2 span {
|
|
272
|
+
margin-right: 0.5rem;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
/* ── Two Modes ── */
|
|
276
|
+
.modes-grid {
|
|
277
|
+
display: grid;
|
|
278
|
+
grid-template-columns: 1fr 1fr;
|
|
279
|
+
gap: 1.5rem;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
@media (max-width: 600px) {
|
|
283
|
+
.modes-grid {
|
|
284
|
+
grid-template-columns: 1fr;
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.mode-card {
|
|
289
|
+
background: var(--card);
|
|
290
|
+
border: 1px solid var(--border);
|
|
291
|
+
border-radius: 12px;
|
|
292
|
+
padding: 1.75rem;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
.mode-card h3 {
|
|
296
|
+
font-size: 1.15rem;
|
|
297
|
+
font-weight: 700;
|
|
298
|
+
margin-bottom: 0.75rem;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
.mode-card p {
|
|
302
|
+
color: var(--muted);
|
|
303
|
+
font-size: 0.95rem;
|
|
304
|
+
line-height: 1.65;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.mode-card ul {
|
|
308
|
+
margin-top: 0.75rem;
|
|
309
|
+
padding-left: 1.25rem;
|
|
310
|
+
color: var(--muted);
|
|
311
|
+
font-size: 0.92rem;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
.mode-card ul li {
|
|
315
|
+
margin-bottom: 0.35rem;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
.mode-badge {
|
|
319
|
+
display: inline-block;
|
|
320
|
+
font-size: 0.75rem;
|
|
321
|
+
font-weight: 600;
|
|
322
|
+
letter-spacing: 0.06em;
|
|
323
|
+
text-transform: uppercase;
|
|
324
|
+
padding: 0.2rem 0.6rem;
|
|
325
|
+
border-radius: 4px;
|
|
326
|
+
margin-bottom: 0.75rem;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
.badge-flow {
|
|
330
|
+
background: #1f3a2a;
|
|
331
|
+
color: var(--green);
|
|
332
|
+
}
|
|
333
|
+
.badge-rogue {
|
|
334
|
+
background: #2d1b30;
|
|
335
|
+
color: var(--magenta);
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
/* ── Classes table ── */
|
|
339
|
+
.classes-table {
|
|
340
|
+
width: 100%;
|
|
341
|
+
border-collapse: collapse;
|
|
342
|
+
font-size: 0.95rem;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
.classes-table th {
|
|
346
|
+
text-align: left;
|
|
347
|
+
color: var(--muted);
|
|
348
|
+
font-weight: 600;
|
|
349
|
+
font-size: 0.8rem;
|
|
350
|
+
letter-spacing: 0.06em;
|
|
351
|
+
text-transform: uppercase;
|
|
352
|
+
padding: 0.6rem 1rem;
|
|
353
|
+
border-bottom: 1px solid var(--border);
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
.classes-table td {
|
|
357
|
+
padding: 1rem;
|
|
358
|
+
border-bottom: 1px solid var(--border);
|
|
359
|
+
vertical-align: middle;
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
.classes-table tr:last-child td {
|
|
363
|
+
border-bottom: none;
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
.classes-table tbody tr:hover td {
|
|
367
|
+
background: var(--card);
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
.class-emoji {
|
|
371
|
+
font-size: 1.4rem;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
.difficulty-hard {
|
|
375
|
+
color: var(--red);
|
|
376
|
+
font-weight: 600;
|
|
377
|
+
}
|
|
378
|
+
.difficulty-normal {
|
|
379
|
+
color: var(--yellow);
|
|
380
|
+
font-weight: 600;
|
|
381
|
+
}
|
|
382
|
+
.difficulty-easy {
|
|
383
|
+
color: var(--green);
|
|
384
|
+
font-weight: 600;
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
/* ── Achievements grid ── */
|
|
388
|
+
.achievements-grid {
|
|
389
|
+
display: grid;
|
|
390
|
+
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
|
391
|
+
gap: 1rem;
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
.achievement-card {
|
|
395
|
+
background: var(--card);
|
|
396
|
+
border: 1px solid var(--border);
|
|
397
|
+
border-radius: 10px;
|
|
398
|
+
padding: 1.1rem 1.25rem;
|
|
399
|
+
display: flex;
|
|
400
|
+
align-items: flex-start;
|
|
401
|
+
gap: 0.85rem;
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
.achievement-emoji {
|
|
405
|
+
font-size: 1.5rem;
|
|
406
|
+
flex-shrink: 0;
|
|
407
|
+
margin-top: 0.1rem;
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
.achievement-info h4 {
|
|
411
|
+
font-size: 0.9rem;
|
|
412
|
+
font-weight: 700;
|
|
413
|
+
margin-bottom: 0.2rem;
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
.achievement-info p {
|
|
417
|
+
font-size: 0.82rem;
|
|
418
|
+
color: var(--muted);
|
|
419
|
+
line-height: 1.5;
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
/* ── CLI Commands ── */
|
|
423
|
+
.cli-block {
|
|
424
|
+
background: var(--card);
|
|
425
|
+
border: 1px solid var(--border);
|
|
426
|
+
border-radius: 10px;
|
|
427
|
+
overflow: hidden;
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
.cli-block-header {
|
|
431
|
+
background: #1c2128;
|
|
432
|
+
padding: 0.6rem 1rem;
|
|
433
|
+
font-size: 0.78rem;
|
|
434
|
+
color: var(--muted);
|
|
435
|
+
font-family: "SF Mono", monospace;
|
|
436
|
+
border-bottom: 1px solid var(--border);
|
|
437
|
+
display: flex;
|
|
438
|
+
align-items: center;
|
|
439
|
+
gap: 0.5rem;
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
.cli-block-header::before {
|
|
443
|
+
content: "● ● ●";
|
|
444
|
+
color: #30363d;
|
|
445
|
+
font-size: 0.65rem;
|
|
446
|
+
letter-spacing: 0.2em;
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
.cli-block pre {
|
|
450
|
+
padding: 1.5rem;
|
|
451
|
+
overflow-x: auto;
|
|
452
|
+
font-family:
|
|
453
|
+
"SF Mono", "Cascadia Mono", "Fira Code", "Consolas", monospace;
|
|
454
|
+
font-size: 0.88rem;
|
|
455
|
+
line-height: 1.8;
|
|
456
|
+
}
|
|
457
|
+
|
|
458
|
+
.cli-block .cmd {
|
|
459
|
+
color: var(--cyan);
|
|
460
|
+
}
|
|
461
|
+
.cli-block .comment {
|
|
462
|
+
color: var(--muted);
|
|
463
|
+
}
|
|
464
|
+
.cli-block .dollar {
|
|
465
|
+
color: var(--green);
|
|
466
|
+
user-select: none;
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
/* ── Tiers ── */
|
|
470
|
+
.tiers-grid {
|
|
471
|
+
display: grid;
|
|
472
|
+
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
|
473
|
+
gap: 1rem;
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
.tier-card {
|
|
477
|
+
background: var(--card);
|
|
478
|
+
border: 1px solid var(--border);
|
|
479
|
+
border-radius: 10px;
|
|
480
|
+
padding: 1.25rem 1rem;
|
|
481
|
+
text-align: center;
|
|
482
|
+
}
|
|
483
|
+
|
|
484
|
+
.tier-emoji {
|
|
485
|
+
font-size: 2rem;
|
|
486
|
+
display: block;
|
|
487
|
+
margin-bottom: 0.5rem;
|
|
488
|
+
}
|
|
489
|
+
.tier-name {
|
|
490
|
+
font-weight: 700;
|
|
491
|
+
font-size: 0.9rem;
|
|
492
|
+
margin-bottom: 0.25rem;
|
|
493
|
+
}
|
|
494
|
+
.tier-amount {
|
|
495
|
+
color: var(--muted);
|
|
496
|
+
font-size: 0.82rem;
|
|
497
|
+
font-family: monospace;
|
|
498
|
+
}
|
|
499
|
+
|
|
500
|
+
/* ── Achievement category headers ── */
|
|
501
|
+
.achievement-category {
|
|
502
|
+
grid-column: 1 / -1;
|
|
503
|
+
font-size: 0.75rem;
|
|
504
|
+
font-weight: 700;
|
|
505
|
+
letter-spacing: 0.08em;
|
|
506
|
+
text-transform: uppercase;
|
|
507
|
+
color: var(--muted);
|
|
508
|
+
padding-top: 1rem;
|
|
509
|
+
border-top: 1px solid var(--border);
|
|
510
|
+
margin-top: 0.5rem;
|
|
511
|
+
}
|
|
512
|
+
.achievement-category:first-child {
|
|
513
|
+
border-top: none;
|
|
514
|
+
padding-top: 0;
|
|
515
|
+
margin-top: 0;
|
|
516
|
+
}
|
|
517
|
+
.achievement-card.death {
|
|
518
|
+
border-color: #3d1f1f;
|
|
519
|
+
}
|
|
520
|
+
|
|
521
|
+
/* ── Screenshots ── */
|
|
522
|
+
.screenshots-grid {
|
|
523
|
+
display: grid;
|
|
524
|
+
grid-template-columns: 1fr 1fr;
|
|
525
|
+
gap: 2rem;
|
|
526
|
+
align-items: start;
|
|
527
|
+
}
|
|
528
|
+
|
|
529
|
+
@media (max-width: 768px) {
|
|
530
|
+
.screenshots-grid {
|
|
531
|
+
grid-template-columns: 1fr;
|
|
532
|
+
}
|
|
533
|
+
}
|
|
534
|
+
|
|
535
|
+
.screenshot-item {
|
|
536
|
+
display: flex;
|
|
537
|
+
flex-direction: column;
|
|
538
|
+
gap: 0.75rem;
|
|
539
|
+
}
|
|
540
|
+
|
|
541
|
+
.screenshot-item img {
|
|
542
|
+
width: 100%;
|
|
543
|
+
border-radius: 10px;
|
|
544
|
+
border: 1px solid var(--border);
|
|
545
|
+
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
|
|
546
|
+
}
|
|
547
|
+
|
|
548
|
+
.screenshot-label {
|
|
549
|
+
font-size: 0.85rem;
|
|
550
|
+
color: var(--muted);
|
|
551
|
+
line-height: 1.5;
|
|
552
|
+
}
|
|
553
|
+
|
|
554
|
+
.screenshot-label strong {
|
|
555
|
+
color: var(--text);
|
|
556
|
+
}
|
|
557
|
+
|
|
558
|
+
/* ── Footer ── */
|
|
559
|
+
footer {
|
|
560
|
+
border-top: 1px solid var(--border);
|
|
561
|
+
text-align: center;
|
|
562
|
+
padding: 2.5rem 1.5rem;
|
|
563
|
+
color: var(--muted);
|
|
564
|
+
font-size: 0.88rem;
|
|
565
|
+
}
|
|
566
|
+
|
|
567
|
+
footer a {
|
|
568
|
+
color: var(--muted);
|
|
569
|
+
}
|
|
570
|
+
footer a:hover {
|
|
571
|
+
color: var(--text);
|
|
572
|
+
}
|
|
573
|
+
footer .footer-links {
|
|
574
|
+
display: flex;
|
|
575
|
+
gap: 1.5rem;
|
|
576
|
+
justify-content: center;
|
|
577
|
+
margin-top: 0.75rem;
|
|
578
|
+
}
|
|
579
|
+
</style>
|
|
580
|
+
</head>
|
|
581
|
+
<body>
|
|
582
|
+
<!-- ── Hero ── -->
|
|
583
|
+
<div class="hero">
|
|
584
|
+
<div class="hero-eyebrow">⛳</div>
|
|
585
|
+
<h1>Token<span>Golf</span></h1>
|
|
586
|
+
<p class="hero-tagline">Every token counts.</p>
|
|
587
|
+
|
|
588
|
+
<div class="install-box">
|
|
589
|
+
<input
|
|
590
|
+
class="install-cmd mono"
|
|
591
|
+
id="install-cmd"
|
|
592
|
+
value="npm install -g tokengolf"
|
|
593
|
+
readonly
|
|
594
|
+
/>
|
|
595
|
+
<button class="copy-btn" id="copy-btn" onclick="copyInstall()">
|
|
596
|
+
Copy
|
|
597
|
+
</button>
|
|
598
|
+
</div>
|
|
599
|
+
|
|
600
|
+
<div class="hero-links">
|
|
601
|
+
<a href="https://github.com/josheche/tokengolf" target="_blank">
|
|
602
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
|
603
|
+
<path
|
|
604
|
+
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
|
|
605
|
+
/>
|
|
606
|
+
</svg>
|
|
607
|
+
GitHub
|
|
608
|
+
</a>
|
|
609
|
+
<a href="https://www.npmjs.com/package/tokengolf" target="_blank">
|
|
610
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
|
611
|
+
<path
|
|
612
|
+
d="M0 0v16h16V0H0zm4.5 12.5H2v-9h12v9h-4.5v-7H8v7H4.5v-5.5H6v5.5z"
|
|
613
|
+
/>
|
|
614
|
+
</svg>
|
|
615
|
+
npm
|
|
616
|
+
</a>
|
|
617
|
+
</div>
|
|
618
|
+
</div>
|
|
619
|
+
|
|
620
|
+
<!-- ── Why TokenGolf ── -->
|
|
621
|
+
<section>
|
|
622
|
+
<h2><span>⛳</span>Why "TokenGolf"?</h2>
|
|
623
|
+
<p style="color:var(--muted);font-size:1rem;line-height:1.75;max-width:680px;">
|
|
624
|
+
<a href="https://en.wikipedia.org/wiki/Code_golf" target="_blank">Code golf</a> is the engineering practice of solving a problem in as few characters as possible. The constraint isn't the point — <em>the discipline the constraint creates</em> is the point. Writing the shortest solution forces you to understand the problem deeply and use your tools precisely.
|
|
625
|
+
</p>
|
|
626
|
+
<p style="color:var(--muted);font-size:1rem;line-height:1.75;max-width:680px;margin-top:1rem;">
|
|
627
|
+
Token golf is the same idea applied to AI sessions. Your budget is par. Every unnecessary prompt, every redundant context dump, every "can you also…" tacked onto a request is a stroke over par. The game doesn't literally resemble golf — it borrows the concept: <strong style="color:var(--text);">optimize under constraint, measure your score, improve your game.</strong>
|
|
628
|
+
</p>
|
|
629
|
+
</section>
|
|
630
|
+
|
|
631
|
+
<!-- ── Two Modes ── -->
|
|
632
|
+
<section>
|
|
633
|
+
<h2><span>🎮</span>Two Modes</h2>
|
|
634
|
+
<div class="modes-grid">
|
|
635
|
+
<div class="mode-card">
|
|
636
|
+
<div class="mode-badge badge-flow">Flow Mode</div>
|
|
637
|
+
<h3>Passive tracking, zero friction</h3>
|
|
638
|
+
<p>
|
|
639
|
+
Just work normally. TokenGolf runs in the background via Claude Code
|
|
640
|
+
hooks.
|
|
641
|
+
</p>
|
|
642
|
+
<ul>
|
|
643
|
+
<li>Auto-starts on every Claude Code session</li>
|
|
644
|
+
<li>Scorecard appears on <code>/exit</code></li>
|
|
645
|
+
<li>No pre-configuration required</li>
|
|
646
|
+
<li>Perfect when you're in a flow state</li>
|
|
647
|
+
</ul>
|
|
648
|
+
</div>
|
|
649
|
+
<div class="mode-card">
|
|
650
|
+
<div class="mode-badge badge-rogue">Roguelike Mode</div>
|
|
651
|
+
<h3>Pre-commit. Stakes. Permadeath.</h3>
|
|
652
|
+
<p>
|
|
653
|
+
Declare your quest, pick a budget, choose your class. Bust the
|
|
654
|
+
budget = the run dies.
|
|
655
|
+
</p>
|
|
656
|
+
<ul>
|
|
657
|
+
<li>5-floor structure (Write → Test → Fix → Review → PR)</li>
|
|
658
|
+
<li>Budget bust = permadeath, logged as a death</li>
|
|
659
|
+
<li>Trains deliberate, efficient prompting</li>
|
|
660
|
+
<li>Roguelike practice makes Flow sessions better</li>
|
|
661
|
+
</ul>
|
|
662
|
+
</div>
|
|
663
|
+
</div>
|
|
664
|
+
</section>
|
|
665
|
+
|
|
666
|
+
<!-- ── Screenshots ── -->
|
|
667
|
+
<section>
|
|
668
|
+
<h2><span>📸</span>In Action</h2>
|
|
669
|
+
<div class="screenshots-grid">
|
|
670
|
+
<div class="screenshot-item">
|
|
671
|
+
<img src="assets/demo-hud.png" alt="TokenGolf HUD — all game states" />
|
|
672
|
+
<div class="screenshot-label">
|
|
673
|
+
<strong>Live HUD</strong> — appears in every Claude Code session. Shows quest, cost, efficiency rating, context pressure, and model class. Run <code>tokengolf demo</code> to preview all states.
|
|
674
|
+
</div>
|
|
675
|
+
</div>
|
|
676
|
+
<div class="screenshot-item">
|
|
677
|
+
<img src="assets/scorecard.png" alt="TokenGolf scorecard — session complete" />
|
|
678
|
+
<div class="screenshot-label">
|
|
679
|
+
<strong>Auto Scorecard</strong> — appears on <code>/exit</code>. Real scorecard from building TokenGolf itself: $40 flow session, 27 ultrathink invocations, Class Defection for declaring Sonnet but spending 89% on Opus.
|
|
680
|
+
</div>
|
|
681
|
+
</div>
|
|
682
|
+
</div>
|
|
683
|
+
</section>
|
|
684
|
+
|
|
685
|
+
<!-- ── Character Classes ── -->
|
|
686
|
+
<section>
|
|
687
|
+
<h2><span>⚔️</span>Character Classes</h2>
|
|
688
|
+
<table class="classes-table">
|
|
689
|
+
<thead>
|
|
690
|
+
<tr>
|
|
691
|
+
<th>Class</th>
|
|
692
|
+
<th>Model</th>
|
|
693
|
+
<th>Difficulty</th>
|
|
694
|
+
<th>Feel</th>
|
|
695
|
+
</tr>
|
|
696
|
+
</thead>
|
|
697
|
+
<tbody>
|
|
698
|
+
<tr>
|
|
699
|
+
<td><span class="class-emoji">🏹</span> <strong>Rogue</strong></td>
|
|
700
|
+
<td class="mono">claude-haiku-4-5</td>
|
|
701
|
+
<td class="difficulty-hard">Hard</td>
|
|
702
|
+
<td>Glass cannon. Must prompt precisely.</td>
|
|
703
|
+
</tr>
|
|
704
|
+
<tr>
|
|
705
|
+
<td>
|
|
706
|
+
<span class="class-emoji">⚔️</span> <strong>Fighter</strong>
|
|
707
|
+
</td>
|
|
708
|
+
<td class="mono">claude-sonnet-4-6</td>
|
|
709
|
+
<td class="difficulty-normal">Normal</td>
|
|
710
|
+
<td>Balanced. The default run.</td>
|
|
711
|
+
</tr>
|
|
712
|
+
<tr>
|
|
713
|
+
<td>
|
|
714
|
+
<span class="class-emoji">🧙</span> <strong>Warlock</strong>
|
|
715
|
+
</td>
|
|
716
|
+
<td class="mono">claude-opus-4-6</td>
|
|
717
|
+
<td class="difficulty-easy">Easy</td>
|
|
718
|
+
<td>Powerful but expensive.</td>
|
|
719
|
+
</tr>
|
|
720
|
+
</tbody>
|
|
721
|
+
</table>
|
|
722
|
+
</section>
|
|
723
|
+
|
|
724
|
+
<!-- ── Budget Tiers ── -->
|
|
725
|
+
<section>
|
|
726
|
+
<h2><span>💰</span>Budget Tiers</h2>
|
|
727
|
+
<div class="tiers-grid">
|
|
728
|
+
<div class="tier-card">
|
|
729
|
+
<span class="tier-emoji">💎</span>
|
|
730
|
+
<div class="tier-name">Diamond</div>
|
|
731
|
+
<div class="tier-amount">under $0.10</div>
|
|
732
|
+
</div>
|
|
733
|
+
<div class="tier-card">
|
|
734
|
+
<span class="tier-emoji">🥇</span>
|
|
735
|
+
<div class="tier-name">Gold</div>
|
|
736
|
+
<div class="tier-amount">under $0.30</div>
|
|
737
|
+
</div>
|
|
738
|
+
<div class="tier-card">
|
|
739
|
+
<span class="tier-emoji">🥈</span>
|
|
740
|
+
<div class="tier-name">Silver</div>
|
|
741
|
+
<div class="tier-amount">under $1.00</div>
|
|
742
|
+
</div>
|
|
743
|
+
<div class="tier-card">
|
|
744
|
+
<span class="tier-emoji">🥉</span>
|
|
745
|
+
<div class="tier-name">Bronze</div>
|
|
746
|
+
<div class="tier-amount">under $3.00</div>
|
|
747
|
+
</div>
|
|
748
|
+
<div class="tier-card">
|
|
749
|
+
<span class="tier-emoji">💸</span>
|
|
750
|
+
<div class="tier-name">Reckless</div>
|
|
751
|
+
<div class="tier-amount">over $3.00</div>
|
|
752
|
+
</div>
|
|
753
|
+
</div>
|
|
754
|
+
</section>
|
|
755
|
+
|
|
756
|
+
<!-- ── Meta Loop ── -->
|
|
757
|
+
<section>
|
|
758
|
+
<h2><span>🔄</span>The Meta Loop</h2>
|
|
759
|
+
<p style="color:var(--muted);font-size:1rem;line-height:1.75;max-width:680px;margin-bottom:1.5rem;">
|
|
760
|
+
The dungeon crawl framing maps directly to real session behaviors. These aren't just flavor — they're patterns you already have, named so you can recognize and improve them.
|
|
761
|
+
</p>
|
|
762
|
+
<div class="modes-grid" style="grid-template-columns:repeat(auto-fill,minmax(280px,1fr));">
|
|
763
|
+
<div class="mode-card">
|
|
764
|
+
<h3>📦 Overencumbered</h3>
|
|
765
|
+
<p>Context bloat slowing you down. The model is carrying too much history to reason cleanly.</p>
|
|
766
|
+
</div>
|
|
767
|
+
<div class="mode-card">
|
|
768
|
+
<h3>🏕️ Made Camp</h3>
|
|
769
|
+
<p>Hit usage limits mid-run. Came back next session and kept going.</p>
|
|
770
|
+
</div>
|
|
771
|
+
<div class="mode-card">
|
|
772
|
+
<h3>🥷 Ghost Run</h3>
|
|
773
|
+
<p>Surgical context management. You compacted at 30% and still had plenty of room for the boss.</p>
|
|
774
|
+
</div>
|
|
775
|
+
<div class="mode-card">
|
|
776
|
+
<h3>🤦 Hubris</h3>
|
|
777
|
+
<p>Reached for ultrathink on a tight budget and paid for it. The spell didn't save you.</p>
|
|
778
|
+
</div>
|
|
779
|
+
<div class="mode-card">
|
|
780
|
+
<h3>🤫 Silent Run</h3>
|
|
781
|
+
<p>Solved it with pure prompting discipline. No extended thinking needed.</p>
|
|
782
|
+
</div>
|
|
783
|
+
<div class="mode-card">
|
|
784
|
+
<h3>🐺 Lone Wolf</h3>
|
|
785
|
+
<p>No subagents. You held the whole problem in one context and saw it through.</p>
|
|
786
|
+
</div>
|
|
787
|
+
</div>
|
|
788
|
+
<p style="color:var(--muted);font-size:0.95rem;line-height:1.75;max-width:680px;margin-top:1.5rem;">
|
|
789
|
+
Roguelike mode surfaces these patterns with stakes. Flow mode lets them compound over time. <strong style="color:var(--text);">Roguelike practice makes Flow sessions better. Better Flow = lower daily spend = better scores without even trying.</strong>
|
|
790
|
+
</p>
|
|
791
|
+
</section>
|
|
792
|
+
|
|
793
|
+
<!-- ── Achievements ── -->
|
|
794
|
+
<section>
|
|
795
|
+
<h2><span>🏆</span>Achievements</h2>
|
|
796
|
+
<div class="achievements-grid">
|
|
797
|
+
<div class="achievement-category">Class</div>
|
|
798
|
+
<div class="achievement-card">
|
|
799
|
+
<div class="achievement-emoji">💎</div>
|
|
800
|
+
<div class="achievement-info"><h4>Diamond</h4><p>Haiku run under $0.10</p></div>
|
|
801
|
+
</div>
|
|
802
|
+
<div class="achievement-card">
|
|
803
|
+
<div class="achievement-emoji">🥇</div>
|
|
804
|
+
<div class="achievement-info"><h4>Gold</h4><p>Completed with Haiku</p></div>
|
|
805
|
+
</div>
|
|
806
|
+
<div class="achievement-card">
|
|
807
|
+
<div class="achievement-emoji">🥈</div>
|
|
808
|
+
<div class="achievement-info"><h4>Silver</h4><p>Completed with Sonnet</p></div>
|
|
809
|
+
</div>
|
|
810
|
+
<div class="achievement-card">
|
|
811
|
+
<div class="achievement-emoji">🥉</div>
|
|
812
|
+
<div class="achievement-info"><h4>Bronze</h4><p>Completed with Opus</p></div>
|
|
813
|
+
</div>
|
|
814
|
+
|
|
815
|
+
<div class="achievement-category">Efficiency</div>
|
|
816
|
+
<div class="achievement-card">
|
|
817
|
+
<div class="achievement-emoji">🎯</div>
|
|
818
|
+
<div class="achievement-info"><h4>Sniper</h4><p>Under 25% of budget used</p></div>
|
|
819
|
+
</div>
|
|
820
|
+
<div class="achievement-card">
|
|
821
|
+
<div class="achievement-emoji">⚡</div>
|
|
822
|
+
<div class="achievement-info"><h4>Efficient</h4><p>Under 50% of budget used</p></div>
|
|
823
|
+
</div>
|
|
824
|
+
<div class="achievement-card">
|
|
825
|
+
<div class="achievement-emoji">🪙</div>
|
|
826
|
+
<div class="achievement-info"><h4>Penny Pincher</h4><p>Total spend under $0.10</p></div>
|
|
827
|
+
</div>
|
|
828
|
+
<div class="achievement-card">
|
|
829
|
+
<div class="achievement-emoji">💲</div>
|
|
830
|
+
<div class="achievement-info"><h4>Cheap Shots</h4><p>Under $0.01 per prompt (≥3 prompts)</p></div>
|
|
831
|
+
</div>
|
|
832
|
+
<div class="achievement-card">
|
|
833
|
+
<div class="achievement-emoji">🍷</div>
|
|
834
|
+
<div class="achievement-info"><h4>Expensive Taste</h4><p>Over $0.50 per prompt — won or died</p></div>
|
|
835
|
+
</div>
|
|
836
|
+
|
|
837
|
+
<div class="achievement-category">Prompting Skill</div>
|
|
838
|
+
<div class="achievement-card">
|
|
839
|
+
<div class="achievement-emoji">🥊</div>
|
|
840
|
+
<div class="achievement-info"><h4>One Shot</h4><p>Completed in a single prompt</p></div>
|
|
841
|
+
</div>
|
|
842
|
+
<div class="achievement-card">
|
|
843
|
+
<div class="achievement-emoji">💬</div>
|
|
844
|
+
<div class="achievement-info"><h4>Conversationalist</h4><p>20+ prompts in one run</p></div>
|
|
845
|
+
</div>
|
|
846
|
+
<div class="achievement-card">
|
|
847
|
+
<div class="achievement-emoji">🤐</div>
|
|
848
|
+
<div class="achievement-info"><h4>Terse</h4><p>≤3 prompts, ≥10 tool calls</p></div>
|
|
849
|
+
</div>
|
|
850
|
+
<div class="achievement-card">
|
|
851
|
+
<div class="achievement-emoji">🪑</div>
|
|
852
|
+
<div class="achievement-info"><h4>Backseat Driver</h4><p>15+ prompts, less than 1 tool call per prompt</p></div>
|
|
853
|
+
</div>
|
|
854
|
+
<div class="achievement-card">
|
|
855
|
+
<div class="achievement-emoji">🏗️</div>
|
|
856
|
+
<div class="achievement-info"><h4>High Leverage</h4><p>5+ tool calls per prompt (≥2 prompts)</p></div>
|
|
857
|
+
</div>
|
|
858
|
+
|
|
859
|
+
<div class="achievement-category">Tool Mastery</div>
|
|
860
|
+
<div class="achievement-card">
|
|
861
|
+
<div class="achievement-emoji">👁️</div>
|
|
862
|
+
<div class="achievement-info"><h4>Read Only</h4><p>Won with no Edit or Write calls</p></div>
|
|
863
|
+
</div>
|
|
864
|
+
<div class="achievement-card">
|
|
865
|
+
<div class="achievement-emoji">✏️</div>
|
|
866
|
+
<div class="achievement-info"><h4>Editor</h4><p>10+ Edit calls in one run</p></div>
|
|
867
|
+
</div>
|
|
868
|
+
<div class="achievement-card">
|
|
869
|
+
<div class="achievement-emoji">🐚</div>
|
|
870
|
+
<div class="achievement-info"><h4>Bash Warrior</h4><p>10+ Bash calls comprising ≥50% of tools</p></div>
|
|
871
|
+
</div>
|
|
872
|
+
<div class="achievement-card">
|
|
873
|
+
<div class="achievement-emoji">🔍</div>
|
|
874
|
+
<div class="achievement-info"><h4>Scout</h4><p>≥60% of tool calls were Reads (≥5 total)</p></div>
|
|
875
|
+
</div>
|
|
876
|
+
<div class="achievement-card">
|
|
877
|
+
<div class="achievement-emoji">🔪</div>
|
|
878
|
+
<div class="achievement-info"><h4>Surgeon</h4><p>1–3 Edit calls, completed under budget</p></div>
|
|
879
|
+
</div>
|
|
880
|
+
<div class="achievement-card">
|
|
881
|
+
<div class="achievement-emoji">🧰</div>
|
|
882
|
+
<div class="achievement-info"><h4>Toolbox</h4><p>5+ distinct tools used in one run</p></div>
|
|
883
|
+
</div>
|
|
884
|
+
|
|
885
|
+
<div class="achievement-category">Time</div>
|
|
886
|
+
<div class="achievement-card">
|
|
887
|
+
<div class="achievement-emoji">⏱️</div>
|
|
888
|
+
<div class="achievement-info"><h4>Speedrun</h4><p>Completed in under 5 minutes</p></div>
|
|
889
|
+
</div>
|
|
890
|
+
<div class="achievement-card">
|
|
891
|
+
<div class="achievement-emoji">🏃</div>
|
|
892
|
+
<div class="achievement-info"><h4>Marathon</h4><p>Session over 60 minutes</p></div>
|
|
893
|
+
</div>
|
|
894
|
+
<div class="achievement-card">
|
|
895
|
+
<div class="achievement-emoji">🫠</div>
|
|
896
|
+
<div class="achievement-info"><h4>Endurance</h4><p>Session over 3 hours</p></div>
|
|
897
|
+
</div>
|
|
898
|
+
|
|
899
|
+
<div class="achievement-category">Extended Thinking</div>
|
|
900
|
+
<div class="achievement-card">
|
|
901
|
+
<div class="achievement-emoji">🔮</div>
|
|
902
|
+
<div class="achievement-info"><h4>Spell Cast</h4><p>Used extended thinking in a won run</p></div>
|
|
903
|
+
</div>
|
|
904
|
+
<div class="achievement-card">
|
|
905
|
+
<div class="achievement-emoji">🧮</div>
|
|
906
|
+
<div class="achievement-info"><h4>Calculated Risk</h4><p>Extended thinking + LEGENDARY efficiency</p></div>
|
|
907
|
+
</div>
|
|
908
|
+
<div class="achievement-card">
|
|
909
|
+
<div class="achievement-emoji">🌀</div>
|
|
910
|
+
<div class="achievement-info"><h4>Deep Thinker</h4><p>3+ thinking invocations, completed under budget</p></div>
|
|
911
|
+
</div>
|
|
912
|
+
<div class="achievement-card">
|
|
913
|
+
<div class="achievement-emoji">🤫</div>
|
|
914
|
+
<div class="achievement-info"><h4>Silent Run</h4><p>No extended thinking, SOLID or better</p></div>
|
|
915
|
+
</div>
|
|
916
|
+
|
|
917
|
+
<div class="achievement-category">Multi-Model</div>
|
|
918
|
+
<div class="achievement-card">
|
|
919
|
+
<div class="achievement-emoji">🏹</div>
|
|
920
|
+
<div class="achievement-info"><h4>Frugal</h4><p>Haiku handled ≥50% of session cost</p></div>
|
|
921
|
+
</div>
|
|
922
|
+
<div class="achievement-card">
|
|
923
|
+
<div class="achievement-emoji">🎲</div>
|
|
924
|
+
<div class="achievement-info"><h4>Rogue Run</h4><p>Haiku handled ≥75% of session cost</p></div>
|
|
925
|
+
</div>
|
|
926
|
+
|
|
927
|
+
<div class="achievement-category">Rest & Recovery</div>
|
|
928
|
+
<div class="achievement-card">
|
|
929
|
+
<div class="achievement-emoji">🔥</div>
|
|
930
|
+
<div class="achievement-info"><h4>No Rest for the Wicked</h4><p>Completed in one session</p></div>
|
|
931
|
+
</div>
|
|
932
|
+
<div class="achievement-card">
|
|
933
|
+
<div class="achievement-emoji">🏕️</div>
|
|
934
|
+
<div class="achievement-info"><h4>Made Camp</h4><p>Completed across multiple sessions</p></div>
|
|
935
|
+
</div>
|
|
936
|
+
<div class="achievement-card">
|
|
937
|
+
<div class="achievement-emoji">🧟</div>
|
|
938
|
+
<div class="achievement-info"><h4>Came Back</h4><p>Fainted (hit usage limits) and finished anyway</p></div>
|
|
939
|
+
</div>
|
|
940
|
+
|
|
941
|
+
<div class="achievement-category">Context Management</div>
|
|
942
|
+
<div class="achievement-card">
|
|
943
|
+
<div class="achievement-emoji">📦</div>
|
|
944
|
+
<div class="achievement-info"><h4>Overencumbered</h4><p>Context auto-compacted during a won run</p></div>
|
|
945
|
+
</div>
|
|
946
|
+
<div class="achievement-card">
|
|
947
|
+
<div class="achievement-emoji">🎒</div>
|
|
948
|
+
<div class="achievement-info"><h4>Traveling Light</h4><p>Manual compact at ≤50% context</p></div>
|
|
949
|
+
</div>
|
|
950
|
+
<div class="achievement-card">
|
|
951
|
+
<div class="achievement-emoji">🪶</div>
|
|
952
|
+
<div class="achievement-info"><h4>Ultralight</h4><p>Manual compact at ≤40% context</p></div>
|
|
953
|
+
</div>
|
|
954
|
+
<div class="achievement-card">
|
|
955
|
+
<div class="achievement-emoji">🥷</div>
|
|
956
|
+
<div class="achievement-info"><h4>Ghost Run</h4><p>Manual compact at ≤30% context</p></div>
|
|
957
|
+
</div>
|
|
958
|
+
|
|
959
|
+
<div class="achievement-category">Tool Reliability</div>
|
|
960
|
+
<div class="achievement-card">
|
|
961
|
+
<div class="achievement-emoji">✅</div>
|
|
962
|
+
<div class="achievement-info"><h4>Clean Run</h4><p>Zero failed tool calls (≥5 tool calls total)</p></div>
|
|
963
|
+
</div>
|
|
964
|
+
<div class="achievement-card">
|
|
965
|
+
<div class="achievement-emoji">🐂</div>
|
|
966
|
+
<div class="achievement-info"><h4>Stubborn</h4><p>10+ failed tool calls and still won</p></div>
|
|
967
|
+
</div>
|
|
968
|
+
|
|
969
|
+
<div class="achievement-category">Subagents</div>
|
|
970
|
+
<div class="achievement-card">
|
|
971
|
+
<div class="achievement-emoji">🐺</div>
|
|
972
|
+
<div class="achievement-info"><h4>Lone Wolf</h4><p>Completed with no subagents spawned</p></div>
|
|
973
|
+
</div>
|
|
974
|
+
<div class="achievement-card">
|
|
975
|
+
<div class="achievement-emoji">📡</div>
|
|
976
|
+
<div class="achievement-info"><h4>Summoner</h4><p>5+ subagents spawned in one run</p></div>
|
|
977
|
+
</div>
|
|
978
|
+
<div class="achievement-card">
|
|
979
|
+
<div class="achievement-emoji">🪖</div>
|
|
980
|
+
<div class="achievement-info"><h4>Army of One</h4><p>10+ subagents spawned, under 50% budget used</p></div>
|
|
981
|
+
</div>
|
|
982
|
+
|
|
983
|
+
<div class="achievement-category">Turn Discipline</div>
|
|
984
|
+
<div class="achievement-card">
|
|
985
|
+
<div class="achievement-emoji">🤖</div>
|
|
986
|
+
<div class="achievement-info"><h4>Agentic</h4><p>3+ Claude turns per user prompt</p></div>
|
|
987
|
+
</div>
|
|
988
|
+
<div class="achievement-card">
|
|
989
|
+
<div class="achievement-emoji">🐕</div>
|
|
990
|
+
<div class="achievement-info"><h4>Obedient</h4><p>Exactly one turn per prompt (≥3 prompts)</p></div>
|
|
991
|
+
</div>
|
|
992
|
+
|
|
993
|
+
<div class="achievement-category" style="color:var(--red);">Death Marks</div>
|
|
994
|
+
<div class="achievement-card death">
|
|
995
|
+
<div class="achievement-emoji">🤦</div>
|
|
996
|
+
<div class="achievement-info"><h4>Hubris</h4><p>Used extended thinking, busted anyway</p></div>
|
|
997
|
+
</div>
|
|
998
|
+
<div class="achievement-card death">
|
|
999
|
+
<div class="achievement-emoji">💥</div>
|
|
1000
|
+
<div class="achievement-info"><h4>Blowout</h4><p>Spent 2× your committed budget</p></div>
|
|
1001
|
+
</div>
|
|
1002
|
+
<div class="achievement-card death">
|
|
1003
|
+
<div class="achievement-emoji">😭</div>
|
|
1004
|
+
<div class="achievement-info"><h4>So Close</h4><p>Died within 10% of budget</p></div>
|
|
1005
|
+
</div>
|
|
1006
|
+
<div class="achievement-card death">
|
|
1007
|
+
<div class="achievement-emoji">🔨</div>
|
|
1008
|
+
<div class="achievement-info"><h4>Tool Happy</h4><p>Died with 30+ tool calls</p></div>
|
|
1009
|
+
</div>
|
|
1010
|
+
<div class="achievement-card death">
|
|
1011
|
+
<div class="achievement-emoji">🪦</div>
|
|
1012
|
+
<div class="achievement-info"><h4>Silent Death</h4><p>Died with ≤2 prompts</p></div>
|
|
1013
|
+
</div>
|
|
1014
|
+
<div class="achievement-card death">
|
|
1015
|
+
<div class="achievement-emoji">🤡</div>
|
|
1016
|
+
<div class="achievement-info"><h4>Fumble</h4><p>Died with 5+ failed tool calls</p></div>
|
|
1017
|
+
</div>
|
|
1018
|
+
</div>
|
|
1019
|
+
</section>
|
|
1020
|
+
|
|
1021
|
+
<!-- ── CLI Commands ── -->
|
|
1022
|
+
<section>
|
|
1023
|
+
<h2><span>⌨️</span>CLI Commands</h2>
|
|
1024
|
+
<div class="cli-block">
|
|
1025
|
+
<div class="cli-block-header">terminal</div>
|
|
1026
|
+
<pre>
|
|
1027
|
+
<span class="comment"># Install</span>
|
|
1028
|
+
<span class="dollar">$</span> <span class="cmd">npm install -g tokengolf</span>
|
|
1029
|
+
<span class="dollar">$</span> <span class="cmd">tokengolf install</span> <span class="comment"># patches ~/.claude/settings.json with hooks</span>
|
|
1030
|
+
|
|
1031
|
+
<span class="comment"># Roguelike — declare before you start</span>
|
|
1032
|
+
<span class="dollar">$</span> <span class="cmd">tokengolf start</span> <span class="comment"># quest wizard: model + budget</span>
|
|
1033
|
+
<span class="dollar">$</span> <span class="cmd">tokengolf status</span> <span class="comment"># live run state</span>
|
|
1034
|
+
<span class="dollar">$</span> <span class="cmd">tokengolf win</span> <span class="comment"># complete run, show scorecard</span>
|
|
1035
|
+
<span class="dollar">$</span> <span class="cmd">tokengolf bust</span> <span class="comment"># permadeath — budget busted</span>
|
|
1036
|
+
|
|
1037
|
+
<span class="comment"># Flow — just /exit Claude Code, scorecard auto-appears</span>
|
|
1038
|
+
<span class="dollar">$</span> <span class="cmd">tokengolf scorecard</span> <span class="comment"># show last run's results</span>
|
|
1039
|
+
<span class="dollar">$</span> <span class="cmd">tokengolf stats</span> <span class="comment"># career dashboard</span></pre>
|
|
1040
|
+
</div>
|
|
1041
|
+
</section>
|
|
1042
|
+
|
|
1043
|
+
<!-- ── Footer ── -->
|
|
1044
|
+
<footer>
|
|
1045
|
+
<div>
|
|
1046
|
+
Built for Claude Code power users who want to play the long game.
|
|
1047
|
+
</div>
|
|
1048
|
+
<div class="footer-links">
|
|
1049
|
+
<a href="https://github.com/josheche/tokengolf" target="_blank"
|
|
1050
|
+
>GitHub</a
|
|
1051
|
+
>
|
|
1052
|
+
<a href="https://www.npmjs.com/package/tokengolf" target="_blank"
|
|
1053
|
+
>npm</a
|
|
1054
|
+
>
|
|
1055
|
+
<span>MIT License</span>
|
|
1056
|
+
</div>
|
|
1057
|
+
</footer>
|
|
1058
|
+
|
|
1059
|
+
<script>
|
|
1060
|
+
function copyInstall() {
|
|
1061
|
+
const cmd = document.getElementById("install-cmd").value;
|
|
1062
|
+
const btn = document.getElementById("copy-btn");
|
|
1063
|
+
navigator.clipboard
|
|
1064
|
+
.writeText(cmd)
|
|
1065
|
+
.then(() => {
|
|
1066
|
+
btn.textContent = "Copied!";
|
|
1067
|
+
btn.classList.add("copied");
|
|
1068
|
+
setTimeout(() => {
|
|
1069
|
+
btn.textContent = "Copy";
|
|
1070
|
+
btn.classList.remove("copied");
|
|
1071
|
+
}, 2000);
|
|
1072
|
+
})
|
|
1073
|
+
.catch(() => {
|
|
1074
|
+
// Fallback: select the text
|
|
1075
|
+
document.getElementById("install-cmd").select();
|
|
1076
|
+
});
|
|
1077
|
+
}
|
|
1078
|
+
</script>
|
|
1079
|
+
</body>
|
|
1080
|
+
</html>
|