tokengolf 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tokengolf",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Gamify your Claude Code sessions. Flow mode tracks you. Roguelike mode trains you.",
   "type": "module",
   "bin": {
@@ -8,8 +8,15 @@
   },
   "scripts": {
     "build": "esbuild src/cli.js --bundle --platform=node --format=esm --loader:.js=jsx --packages=external --outfile=dist/cli.js && chmod +x dist/cli.js",
-    "prepare": "npm run build",
+    "prepare": "npm run build && husky",
     "dev": "node --import tsx/esm src/cli.js",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint src/ hooks/",
+    "lint:fix": "eslint src/ hooks/ --fix",
+    "format": "prettier --write src/ hooks/",
+    "format:check": "prettier --check src/ hooks/",
+    "version": "git add CHANGELOG.md",
     "postversion": "git push && git push --tags"
   },
   "dependencies": {
@@ -19,7 +26,13 @@
     "react": "^18.0.0"
   },
   "devDependencies": {
-    "esbuild": "^0.25.0"
+    "@eslint/js": "^10.0.1",
+    "esbuild": "^0.25.0",
+    "eslint": "^10.0.3",
+    "eslint-config-prettier": "^10.1.8",
+    "husky": "^9.1.7",
+    "prettier": "^3.8.1",
+    "vitest": "^4.0.18"
   },
   "engines": {
     "node": ">=18.0.0"

package/src/cli.js

@@ -11,10 +11,7 @@ import { ActiveRun } from './components/ActiveRun.js';
 import { ScoreCard } from './components/ScoreCard.js';
 import { StatsView } from './components/StatsView.js';
 
-program
-  .name('tokengolf')
-  .description('⛳ Gamify your Claude Code sessions')
-  .version('0.1.0');
+program.name('tokengolf').description('⛳ Gamify your Claude Code sessions').version('0.1.0');
 
 program
   .command('start')
@@ -47,7 +44,13 @@ program
     }
     const detected = opts.spent ? null : autoDetectCost(run);
     const spent = opts.spent ? parseFloat(opts.spent) : (detected?.spent ?? run.spent);
-    const completed = { ...run, spent, status: 'won', modelBreakdown: detected?.modelBreakdown ?? run.modelBreakdown ?? null, endedAt: new Date().toISOString() };
+    const completed = {
+      ...run,
+      spent,
+      status: 'won',
+      modelBreakdown: detected?.modelBreakdown ?? run.modelBreakdown ?? null,
+      endedAt: new Date().toISOString(),
+    };
     const saved = saveRun(completed);
     clearCurrentRun();
     render(React.createElement(ScoreCard, { run: saved }));
@@ -65,7 +68,13 @@ program
     }
     const detected = opts.spent ? null : autoDetectCost(run);
     const spent = opts.spent ? parseFloat(opts.spent) : (detected?.spent ?? run.budget + 0.01);
-    const died = { ...run, spent, status: 'died', modelBreakdown: detected?.modelBreakdown ?? run.modelBreakdown ?? null, endedAt: new Date().toISOString() };
+    const died = {
+      ...run,
+      spent,
+      status: 'died',
+      modelBreakdown: detected?.modelBreakdown ?? run.modelBreakdown ?? null,
+      endedAt: new Date().toISOString(),
+    };
     const saved = saveRun(died);
     clearCurrentRun();
     render(React.createElement(ScoreCard, { run: saved }));
@@ -104,6 +113,14 @@ program
     render(React.createElement(StatsView, { stats: getStats() }));
   });
 
+program
+  .command('demo')
+  .description('Show HUD examples for all game states (great for screenshots)')
+  .action(async () => {
+    const { runDemo } = await import('./lib/demo.js');
+    runDemo();
+  });
+
 program
   .command('install')
   .description('Install Claude Code hooks into ~/.claude/settings.json')

package/src/components/ActiveRun.js

@@ -2,7 +2,14 @@ import React, { useState, useEffect } from 'react';
 import { Box, Text, useApp, useInput } from 'ink';
 import { ProgressBar } from '@inkjs/ui';
 import { getCurrentRun } from '../lib/state.js';
-import { getModelClass, getEfficiencyRating, getBudgetPct, formatCost, formatElapsed, FLOORS } from '../lib/score.js';
+import {
+  getModelClass,
+  getEfficiencyRating,
+  getBudgetPct,
+  formatCost,
+  formatElapsed,
+  FLOORS,
+} from '../lib/score.js';
 
 export function ActiveRun({ run: initialRun }) {
   const { exit } = useApp();
@@ -13,41 +20,75 @@ export function ActiveRun({ run: initialRun }) {
     const interval = setInterval(() => {
       const latest = getCurrentRun();
       if (latest) setRun(latest);
-      setTick(t => t + 1);
+      setTick((t) => t + 1);
     }, 2000);
     return () => clearInterval(interval);
   }, []);
 
-  useInput((input) => { if (input === 'q') exit(); });
+  useInput((input) => {
+    if (input === 'q') exit();
+  });
 
+  const flowMode = !run.budget;
   const mc = getModelClass(run.model);
-  const pct = getBudgetPct(run.spent, run.budget);
-  const efficiency = getEfficiencyRating(run.spent, run.budget);
-  const barColor = pct >= 80 ? 'red' : pct >= 50 ? 'yellow' : 'green';
+  const pct = flowMode ? null : getBudgetPct(run.spent, run.budget);
+  const efficiency = flowMode ? null : getEfficiencyRating(run.spent, run.budget);
+  const barColor = !pct ? 'green' : pct >= 80 ? 'red' : pct >= 50 ? 'yellow' : 'green';
 
   return (
     <Box flexDirection="column" gap={1} paddingX={1} paddingY={1}>
       <Box gap={2}>
-        <Text bold color="yellow">⛳ TokenGolf</Text>
+        <Text bold color="yellow">
+          ⛳ TokenGolf
+        </Text>
         <Text color="gray">Active Run</Text>
-        <Text color="gray" dimColor>{formatElapsed(run.startedAt)}</Text>
+        <Text color="gray" dimColor>
+          {formatElapsed(run.startedAt)}
+        </Text>
       </Box>
 
-      <Box borderStyle="round" borderColor="yellow" paddingX={1} paddingY={1} flexDirection="column" gap={1}>
-        <Text bold color="white">{run.quest}</Text>
+      <Box
+        borderStyle="round"
+        borderColor="yellow"
+        paddingX={1}
+        paddingY={1}
+        flexDirection="column"
+        gap={1}
+      >
+        <Text bold color="white">
+          {run.quest}
+        </Text>
 
         <Box gap={3}>
-          <Text>{mc.emoji} <Text color="cyan">{mc.name}</Text></Text>
-          <Text color="gray">Budget <Text color="green">${run.budget.toFixed(2)}</Text></Text>
-          <Text color="gray">Spent  <Text color={barColor}>{formatCost(run.spent)}</Text></Text>
-          <Text color={efficiency.color}>{efficiency.emoji} {efficiency.label}</Text>
+          <Text>
+            {mc.emoji} <Text color="cyan">{mc.name}</Text>
+          </Text>
+          {flowMode ? (
+            <Text color="gray">Flow Mode</Text>
+          ) : (
+            <Text color="gray">
+              Budget <Text color="green">${run.budget.toFixed(2)}</Text>
+            </Text>
+          )}
+          <Text color="gray">
+            Spent <Text color={barColor}>{formatCost(run.spent)}</Text>
+          </Text>
+          {!flowMode && (
+            <Text color={efficiency.color}>
+              {efficiency.emoji} {efficiency.label}
+            </Text>
+          )}
         </Box>
 
-        <Box gap={1} alignItems="center">
-          <Text color="gray">💰 </Text>
-          <Box width={24}><ProgressBar value={Math.min(pct, 100)} /></Box>
-          <Text color={barColor}> {pct}%</Text>
-        </Box>
+        {!flowMode && (
+          <Box gap={1} alignItems="center">
+            <Text color="gray">💰 </Text>
+            <Box width={24}>
+              <ProgressBar value={Math.min(pct, 100)} />
+            </Box>
+            <Text color={barColor}> {pct}%</Text>
+          </Box>
+        )}
 
         <Box flexDirection="column" gap={0} marginTop={1}>
           {FLOORS.map((floor, i) => {
@@ -59,7 +100,10 @@ export function ActiveRun({ run: initialRun }) {
                 <Text color={done ? 'green' : active ? 'yellow' : 'gray'}>
                   {done ? '✓' : active ? '▶' : '○'}
                 </Text>
-                <Text color={done ? 'green' : active ? 'white' : 'gray'} dimColor={!done && !active}>
+                <Text
+                  color={done ? 'green' : active ? 'white' : 'gray'}
+                  dimColor={!done && !active}
+                >
                   Floor {n}: {floor}
                 </Text>
               </Box>
@@ -68,18 +112,26 @@ export function ActiveRun({ run: initialRun }) {
         </Box>
 
         <Box gap={3} marginTop={1}>
-          <Text color="gray">Prompts <Text color="white">{run.promptCount || 0}</Text></Text>
-          <Text color="gray">Tools   <Text color="white">{run.totalToolCalls || 0}</Text></Text>
+          <Text color="gray">
+            Prompts <Text color="white">{run.promptCount || 0}</Text>
+          </Text>
+          <Text color="gray">
+            Tools <Text color="white">{run.totalToolCalls || 0}</Text>
+          </Text>
         </Box>
 
         {pct >= 80 && pct < 100 && (
           <Box borderStyle="single" borderColor="red" paddingX={1}>
-            <Text color="red" bold>⚠️  BUDGET WARNING — {formatCost(run.budget - run.spent)} left</Text>
+            <Text color="red" bold>
+              ⚠️ BUDGET WARNING — {formatCost(run.budget - run.spent)} left
+            </Text>
           </Box>
         )}
       </Box>
 
-      <Text color="gray" dimColor>tokengolf win [--spent 0.18]  ·  tokengolf bust  ·  q to close</Text>
+      <Text color="gray" dimColor>
+        tokengolf win [--spent 0.18] · tokengolf bust · q to close
+      </Text>
     </Box>
   );
 }

package/src/components/ScoreCard.js

@@ -1,12 +1,24 @@
 import React, { useEffect } from 'react';
 import { Box, Text, useApp, useInput } from 'ink';
-import { getTier, getModelClass, getEffortLevel, getEfficiencyRating, getBudgetPct, formatCost, getHaikuPct } from '../lib/score.js';
+import {
+  getTier,
+  getModelClass,
+  getEffortLevel,
+  getEfficiencyRating,
+  getBudgetPct,
+  formatCost,
+  getHaikuPct,
+  getOpusPct,
+  MODEL_CLASSES,
+} from '../lib/score.js';
 
 export function ScoreCard({ run }) {
   const { exit } = useApp();
   const won = run.status === 'won';
 
-  useInput((input) => { if (input === 'q') exit(); });
+  useInput((input) => {
+    if (input === 'q') exit();
+  });
 
   useEffect(() => {
     const t = setTimeout(() => exit(), 60000);
@@ -19,74 +31,116 @@ export function ScoreCard({ run }) {
   const efficiency = flowMode ? null : getEfficiencyRating(run.spent, run.budget);
   const pct = flowMode ? null : getBudgetPct(run.spent, run.budget);
   const haikuPct = getHaikuPct(run.modelBreakdown, run.spent);
+  const opusPct = getOpusPct(run.modelBreakdown, run.spent);
 
   return (
     <Box flexDirection="column" paddingX={1} paddingY={1} gap={1}>
-
       {/* Big status header */}
-      <Box borderStyle="double" borderColor={won ? 'yellow' : 'red'} paddingX={2} paddingY={1} flexDirection="column" gap={1}>
-        <Text bold color={won ? 'yellow' : 'red'} >
+      <Box
+        borderStyle="double"
+        borderColor={won ? 'yellow' : 'red'}
+        paddingX={2}
+        paddingY={1}
+        flexDirection="column"
+        gap={1}
+      >
+        <Text bold color={won ? 'yellow' : 'red'}>
           {won ? '🏆  SESSION COMPLETE' : '💀  BUDGET BUSTED'}
         </Text>
 
-        <Text color="white" bold>{run.quest ?? <Text color="gray">Flow Mode</Text>}</Text>
+        <Text color="white" bold>
+          {run.quest ?? <Text color="gray">Flow Mode</Text>}
+        </Text>
 
         {/* Score row */}
         <Box gap={4} flexWrap="wrap" marginTop={1}>
           <Box flexDirection="column">
-            <Text color="gray" dimColor>SPENT</Text>
-            <Text bold color={won ? 'green' : 'red'}>{formatCost(run.spent)}</Text>
+            <Text color="gray" dimColor>
+              SPENT
+            </Text>
+            <Text bold color={won ? 'green' : 'red'}>
+              {formatCost(run.spent)}
+            </Text>
           </Box>
           {!flowMode && (
             <>
               <Box flexDirection="column">
-                <Text color="gray" dimColor>BUDGET</Text>
+                <Text color="gray" dimColor>
+                  BUDGET
+                </Text>
                 <Text color="white">${run.budget.toFixed(2)}</Text>
               </Box>
               <Box flexDirection="column">
-                <Text color="gray" dimColor>USED</Text>
+                <Text color="gray" dimColor>
+                  USED
+                </Text>
                 <Text color={pct > 100 ? 'red' : pct > 80 ? 'yellow' : 'green'}>{pct}%</Text>
               </Box>
             </>
           )}
           <Box flexDirection="column">
-            <Text color="gray" dimColor>MODEL</Text>
-            <Text color="cyan">{mc.emoji} {mc.name}{[
-              run.effort && run.effort !== 'medium' ? getEffortLevel(run.effort)?.label : null,
-              run.fastMode ? 'Fast' : null,
-            ].filter(Boolean).map(s => `·${s}`).join('')}</Text>
+            <Text color="gray" dimColor>
+              MODEL
+            </Text>
+            <Text color="cyan">
+              {mc.emoji} {mc.name}
+              {[
+                run.effort && run.effort !== 'medium' ? getEffortLevel(run.effort)?.label : null,
+                run.fastMode ? 'Fast' : null,
+              ]
+                .filter(Boolean)
+                .map((s) => `·${s}`)
+                .join('')}
+            </Text>
           </Box>
           {run.effort && (
             <Box flexDirection="column">
-              <Text color="gray" dimColor>EFFORT</Text>
-              <Text color={getEffortLevel(run.effort)?.color}>{getEffortLevel(run.effort)?.emoji} {getEffortLevel(run.effort)?.label}</Text>
+              <Text color="gray" dimColor>
+                EFFORT
+              </Text>
+              <Text color={getEffortLevel(run.effort)?.color}>
+                {getEffortLevel(run.effort)?.emoji} {getEffortLevel(run.effort)?.label}
+              </Text>
             </Box>
           )}
           {run.fastMode && (
             <Box flexDirection="column">
-              <Text color="gray" dimColor>MODE</Text>
+              <Text color="gray" dimColor>
+                MODE
+              </Text>
               <Text color="yellow">↯ Fast</Text>
             </Box>
           )}
           <Box flexDirection="column">
-            <Text color="gray" dimColor>TIER</Text>
-            <Text color={tier.color}>{tier.emoji} {tier.label}</Text>
+            <Text color="gray" dimColor>
+              TIER
+            </Text>
+            <Text color={tier.color}>
+              {tier.emoji} {tier.label}
+            </Text>
           </Box>
         </Box>
 
         {/* Efficiency (roguelike mode only) */}
         {efficiency && (
           <Box gap={2}>
-            <Text bold color={efficiency.color}>{efficiency.emoji} {efficiency.label}</Text>
+            <Text bold color={efficiency.color}>
+              {efficiency.emoji} {efficiency.label}
+            </Text>
           </Box>
         )}
 
         {/* Achievements */}
         {run.achievements?.length > 0 && (
           <Box flexDirection="column" gap={0} marginTop={1}>
-            <Text color="gray" dimColor>Achievements unlocked:</Text>
+            <Text color="gray" dimColor>
+              Achievements unlocked:
+            </Text>
             {run.achievements.map((a, i) => (
-              <Text key={i} color="yellow">  {a.emoji} {a.label}</Text>
+              <Text key={i} color="yellow">
+                {' '}
+                {a.emoji} {a.label}
+              </Text>
             ))}
           </Box>
         )}
@@ -95,7 +149,9 @@ export function ScoreCard({ run }) {
         {run.thinkingInvocations > 0 && (
           <Box flexDirection="column" gap={0} marginTop={1}>
             <Box gap={3} alignItems="center">
-              <Text color="gray" dimColor>Extended thinking:</Text>
+              <Text color="gray" dimColor>
+                Extended thinking:
+              </Text>
               <Text color="magenta">🔮 {run.thinkingInvocations}× invoked</Text>
             </Box>
           </Box>
@@ -105,19 +161,34 @@ export function ScoreCard({ run }) {
         {run.modelBreakdown && Object.keys(run.modelBreakdown).length > 0 && (
           <Box flexDirection="column" gap={0} marginTop={1}>
             <Box gap={2} alignItems="center">
-              <Text color="gray" dimColor>Model usage:</Text>
+              <Text color="gray" dimColor>
+                Model usage:
+              </Text>
               {haikuPct !== null && (
                 <Text color={haikuPct >= 75 ? 'magenta' : haikuPct >= 50 ? 'cyan' : 'yellow'}>
                   🏹 {haikuPct}% Haiku
                 </Text>
               )}
+              {mc === MODEL_CLASSES.opusplan && opusPct !== null && (
+                <Text color="yellow">⚜️ {opusPct}% Opus (planning)</Text>
+              )}
             </Box>
             <Box gap={3} flexWrap="wrap">
               {Object.entries(run.modelBreakdown).map(([model, cost]) => {
-                const short = model.includes('haiku') ? 'Haiku' : model.includes('sonnet') ? 'Sonnet' : 'Opus';
+                const m = model.toLowerCase();
+                const short = m.includes('haiku')
+                  ? 'Haiku'
+                  : m.includes('sonnet')
+                    ? 'Sonnet'
+                    : m.includes('opusplan') || m.includes('paladin')
+                      ? 'Paladin'
+                      : 'Opus';
                 const pctOfTotal = Math.round((cost / run.spent) * 100);
                 return (
-                  <Text key={model} color="gray">{short} <Text color="white">{pctOfTotal}%</Text> <Text dimColor>{formatCost(cost)}</Text></Text>
+                  <Text key={model} color="gray">
+                    {short} <Text color="white">{pctOfTotal}%</Text>{' '}
+                    <Text dimColor>{formatCost(cost)}</Text>
+                  </Text>
                 );
               })}
             </Box>
@@ -127,10 +198,14 @@ export function ScoreCard({ run }) {
         {/* Tool breakdown */}
         {run.toolCalls && Object.keys(run.toolCalls).length > 0 && (
           <Box flexDirection="column" gap={0} marginTop={1}>
-            <Text color="gray" dimColor>Tool calls:</Text>
+            <Text color="gray" dimColor>
+              Tool calls:
+            </Text>
             <Box gap={2} flexWrap="wrap">
               {Object.entries(run.toolCalls).map(([tool, count]) => (
-                <Text key={tool} color="gray"><Text color="white">{tool}</Text> ×{count}</Text>
+                <Text key={tool} color="gray">
+                  <Text color="white">{tool}</Text> ×{count}
+                </Text>
               ))}
             </Box>
           </Box>
@@ -138,19 +213,39 @@ export function ScoreCard({ run }) {
 
         {/* Death tip */}
         {!won && run.budget && (
-          <Box borderStyle="single" borderColor="red" paddingX={1} marginTop={1} flexDirection="column">
-            <Text color="red" bold>Cause of death: Budget exceeded by {formatCost(run.spent - run.budget)}</Text>
-            <Text color="gray" dimColor>Tip: Use Read with line ranges instead of full file reads.</Text>
+          <Box
+            borderStyle="single"
+            borderColor="red"
+            paddingX={1}
+            marginTop={1}
+            flexDirection="column"
+          >
+            <Text color="red" bold>
+              Cause of death: Budget exceeded by {formatCost(run.spent - run.budget)}
+            </Text>
+            <Text color="gray" dimColor>
+              Tip: Use Read with line ranges instead of full file reads.
+            </Text>
           </Box>
         )}
       </Box>
 
       <Box gap={2}>
-        <Text color="gray" dimColor>tokengolf start — run again</Text>
-        <Text color="gray" dimColor>·</Text>
-        <Text color="gray" dimColor>tokengolf stats — career stats</Text>
-        <Text color="gray" dimColor>·</Text>
-        <Text color="gray" dimColor>q to exit</Text>
+        <Text color="gray" dimColor>
+          tokengolf start — run again
+        </Text>
+        <Text color="gray" dimColor>
+          ·
+        </Text>
+        <Text color="gray" dimColor>
+          tokengolf stats — career stats
+        </Text>
+        <Text color="gray" dimColor>
+          ·
+        </Text>
+        <Text color="gray" dimColor>
+          q to exit
+        </Text>
       </Box>
     </Box>
   );