@tokscale/cli 1.0.11 → 1.0.13

package/src/cli.ts

@@ -13,6 +13,7 @@ const pkg = require("../package.json") as { version: string };
 import pc from "picocolors";
 import { login, logout, whoami } from "./auth.js";
 import { submit } from "./submit.js";
+import { generateWrapped } from "./wrapped.js";
 import { PricingFetcher } from "./pricing.js";
 import {
   loadCursorCredentials,
@@ -203,7 +204,7 @@ async function main() {
 
   program
     .name("tokscale")
-    .description("Token Usage Leaderboard CLI - Track AI coding costs across OpenCode, Claude Code, Codex, Gemini, and Cursor")
+    .description("Tokscale - Track AI coding costs across OpenCode, Claude Code, Codex, Gemini, and Cursor")
     .version(pkg.version);
 
   program
@@ -292,9 +293,21 @@ async function main() {
       await handleGraphCommand(options);
     });
 
-  // =========================================================================
-  // Authentication Commands
-  // =========================================================================
+  program
+    .command("wrapped")
+    .description("Generate 2025 Wrapped shareable image")
+    .option("--output <file>", "Output file path (default: tokscale-2025-wrapped.png)")
+    .option("--year <year>", "Year to generate wrapped for (default: current year)")
+    .option("--opencode", "Include only OpenCode data")
+    .option("--claude", "Include only Claude Code data")
+    .option("--codex", "Include only Codex CLI data")
+    .option("--gemini", "Include only Gemini CLI data")
+    .option("--cursor", "Include only Cursor IDE data")
+    .option("--no-spinner", "Disable loading spinner (for scripting)")
+    .option("--short", "Display total tokens in abbreviated format (e.g., 7.14B)")
+    .action(async (options) => {
+      await handleWrappedCommand(options);
+    });
 
   program
     .command("login")
@@ -410,7 +423,7 @@ async function main() {
   // Global flags should go to main program
   const isGlobalFlag = ['--help', '-h', '--version', '-V'].includes(firstArg);
   const hasSubcommand = args.length > 0 && !firstArg.startsWith('-');
-  const knownCommands = ['monthly', 'models', 'graph', 'login', 'logout', 'whoami', 'submit', 'cursor', 'tui', 'help'];
+  const knownCommands = ['monthly', 'models', 'graph', 'wrapped', 'login', 'logout', 'whoami', 'submit', 'cursor', 'tui', 'help'];
   const isKnownCommand = hasSubcommand && knownCommands.includes(firstArg);
 
   if (isKnownCommand || isGlobalFlag) {
@@ -908,6 +921,43 @@ async function handleGraphCommand(options: GraphCommandOptions) {
   }
 }
 
+interface WrappedCommandOptions extends FilterOptions {
+  output?: string;
+  year?: string;
+  spinner?: boolean; // --no-spinner sets this to false
+  short?: boolean;
+}
+
+async function handleWrappedCommand(options: WrappedCommandOptions) {
+  const useSpinner = options.spinner !== false;
+  const spinner = useSpinner ? createSpinner({ color: "cyan" }) : null;
+  spinner?.start(pc.gray("Generating your 2025 Wrapped..."));
+
+  try {
+    const enabledSources = getEnabledSources(options);
+    const outputPath = await generateWrapped({
+      output: options.output,
+      year: options.year || "2025",
+      sources: enabledSources,
+      short: options.short,
+    });
+
+    spinner?.stop();
+    console.log(pc.green(`\n  ✓ Your Tokscale Wrapped image is ready!`));
+    console.log(pc.white(`  ${outputPath}`));
+    console.log();
+    console.log(pc.gray("  Share it on Twitter/X with #TokscaleWrapped"));
+    console.log();
+  } catch (error) {
+    if (spinner) {
+      spinner.error(`Failed to generate wrapped: ${(error as Error).message}`);
+    } else {
+      console.error(pc.red(`Failed to generate wrapped: ${(error as Error).message}`));
+    }
+    process.exit(1);
+  }
+}
+
 function getSourceLabel(source: string): string {
   switch (source) {
     case "opencode":

package/src/tui/components/BarChart.tsx

@@ -54,9 +54,16 @@ export function BarChart(props: BarChartProps) {
   });
 
   const chartWidth = () => Math.max(width() - 8, 20);
-  const barWidth = () => Math.max(1, Math.floor(chartWidth() / Math.min(data().length, 52)));
-  const visibleBars = () => Math.min(data().length, Math.floor(chartWidth() / barWidth()));
-  const visibleData = createMemo(() => data().slice(-visibleBars()));
+  
+  const getBarWidth = (index: number, total: number) => {
+    const cw = chartWidth();
+    if (total === 0) return 1;
+    const start = Math.floor((index * cw) / total);
+    const end = Math.floor(((index + 1) * cw) / total);
+    return Math.max(1, end - start);
+  };
+  
+  const visibleData = () => data();
 
   const sortedModelsMap = createMemo(() => {
     const vd = visibleData();
@@ -99,7 +106,7 @@ export function BarChart(props: BarChartProps) {
     return labels;
   });
 
-  const axisWidth = () => Math.min(chartWidth(), visibleBars() * barWidth());
+  const axisWidth = () => chartWidth();
   const labelPadding = () => {
     const labels = dateLabels();
     return labels.length > 0 ? Math.floor(axisWidth() / labels.length) : 0;
@@ -107,13 +114,13 @@ export function BarChart(props: BarChartProps) {
 
   const chartTitle = () => isVeryNarrowTerminal() ? "Tokens" : "Tokens per Day";
 
-  const getBarContent = (point: ChartDataPoint, row: number): { char: string; color: string } => {
+  const getBarContent = (point: ChartDataPoint, row: number, barIndex: number): { char: string; color: string } => {
     const mt = maxTotal();
     const sh = safeHeight();
     const rowThreshold = ((row + 1) / sh) * mt;
     const prevThreshold = (row / sh) * mt;
     const thresholdDiff = rowThreshold - prevThreshold;
-    const bw = barWidth();
+    const bw = getBarWidth(barIndex, visibleData().length);
 
     if (point.total <= prevThreshold) {
       return { char: getRepeatedString(" ", bw), color: "dim" };
@@ -169,8 +176,8 @@ export function BarChart(props: BarChartProps) {
               <box flexDirection="row">
                 <text dim>{yLabel}│</text>
                 <For each={visibleData()}>
-                  {(point) => {
-                    const bar = getBarContent(point, row);
+                  {(point, barIndex) => {
+                    const bar = getBarContent(point, row, barIndex());
                     return bar.color === "dim" 
                       ? <text dim>{bar.char}</text>
                       : <text fg={bar.color}>{bar.char}</text>;

package/src/tui/components/OverviewView.tsx

@@ -6,7 +6,13 @@ import type { TUIData, SortType } from "../hooks/useData.js";
 import { formatCost } from "../utils/format.js";
 import { isNarrow, isVeryNarrow } from "../utils/responsive.js";
 
-const CHART_MAX_DAYS = 90;
+const CHART_MAX_DAYS = 60;
+
+function getDateDaysAgo(days: number): string {
+  const date = new Date();
+  date.setDate(date.getDate() - days);
+  return date.toISOString().split("T")[0];
+}
 
 interface OverviewViewProps {
   data: TUIData;
@@ -27,7 +33,10 @@ export function OverviewView(props: OverviewViewProps) {
   const isNarrowTerminal = () => isNarrow(props.width);
   const isVeryNarrowTerminal = () => isVeryNarrow(props.width);
 
-  const recentChartData = createMemo(() => props.data.chartData.slice(-CHART_MAX_DAYS));
+  const recentChartData = createMemo(() => {
+    const cutoffDate = getDateDaysAgo(CHART_MAX_DAYS);
+    return props.data.chartData.filter(d => d.date >= cutoffDate);
+  });
 
   const legendModelLimit = () => isVeryNarrowTerminal() ? 3 : 5;
   const topModelsForLegend = () => props.data.topModels.slice(0, legendModelLimit()).map(m => m.modelId);
@@ -66,7 +75,7 @@ export function OverviewView(props: OverviewViewProps) {
   return (
     <box flexDirection="column" gap={1}>
       <box flexDirection="column">
-        <BarChart data={recentChartData()} width={props.width - 4} height={chartHeight()} />
+        <BarChart data={recentChartData()} width={props.width - 2} height={chartHeight()} />
         <Legend models={topModelsForLegend()} width={props.width} />
       </box>
 

package/src/tui/config/themes.ts

@@ -95,7 +95,7 @@ export const colorPalettes: Record<ColorPaletteName, GraphColorPalette> = {
   },
 };
 
-export const DEFAULT_PALETTE: ColorPaletteName = "green";
+export const DEFAULT_PALETTE: ColorPaletteName = "blue";
 
 export const getPaletteNames = (): ColorPaletteName[] =>
   Object.keys(colorPalettes) as ColorPaletteName[];