@tokscale/cli 1.0.14 → 1.0.16

package/src/tui/App.tsx

@@ -1,4 +1,4 @@
-import { createSignal, Switch, Match, onCleanup } from "solid-js";
+import { createEffect, createSignal, Switch, Match, onCleanup } from "solid-js";
 import { useKeyboard, useTerminalDimensions, useRenderer } from "@opentui/solid";
 import clipboardy from "clipboardy";
 import { Header } from "./components/Header.js";
@@ -39,7 +39,7 @@ export function App(props: AppProps) {
   const [enabledSources, setEnabledSources] = createSignal<Set<SourceType>>(
     new Set(props.enabledSources ?? ALL_SOURCES)
   );
-  const [sortBy, setSortBy] = createSignal<SortType>(props.sortBy ?? "cost");
+  const [sortBy, setSortBy] = createSignal<SortType>(props.sortBy ?? "tokens");
   const [sortDesc, setSortDesc] = createSignal(props.sortDesc ?? true);
   const [selectedIndex, setSelectedIndex] = createSignal(0);
   const [scrollOffset, setScrollOffset] = createSignal(0);
@@ -61,6 +61,8 @@ export function App(props: AppProps) {
 
   const [statusMessage, setStatusMessage] = createSignal<string | null>(null);
   let statusTimeout: ReturnType<typeof setTimeout> | null = null;
+  const [autoRefreshEnabled, setAutoRefreshEnabled] = createSignal(settings.autoRefreshEnabled ?? false);
+  const [autoRefreshMs, setAutoRefreshMs] = createSignal(settings.autoRefreshMs ?? 60000);
 
   const showStatus = (msg: string, duration = 2000) => {
     if (statusTimeout) clearTimeout(statusTimeout);
@@ -72,6 +74,68 @@ export function App(props: AppProps) {
     if (statusTimeout) clearTimeout(statusTimeout);
   });
 
+  const MIN_AUTO_REFRESH_MS = 30000;
+  const MAX_AUTO_REFRESH_MS = 3600000;
+  const AUTO_REFRESH_STEPS_MS = [
+    30000,
+    60000,
+    120000,
+    300000,
+    600000,
+  ];
+  const AUTO_REFRESH_AFTER_MAX_STEP_MS = 600000;
+
+  const clampAutoRefresh = (value: number) =>
+    Math.min(MAX_AUTO_REFRESH_MS, Math.max(MIN_AUTO_REFRESH_MS, value));
+
+  const formatIntervalSeconds = (ms: number) => {
+    const seconds = Math.round(ms / 1000);
+    if (seconds < 60) return `${seconds}s`;
+    const minutes = Math.round(seconds / 60);
+    return `${minutes}m`;
+  };
+
+  const getAutoRefreshIntervalStep = (current: number, direction: "up" | "down") => {
+    const value = clampAutoRefresh(current);
+    const cappedSteps = AUTO_REFRESH_STEPS_MS;
+    const maxStep = cappedSteps[cappedSteps.length - 1];
+
+    if (value > maxStep) {
+      const delta = direction === "up" ? AUTO_REFRESH_AFTER_MAX_STEP_MS : -AUTO_REFRESH_AFTER_MAX_STEP_MS;
+      return clampAutoRefresh(value + delta);
+    }
+
+    if (value === maxStep && direction === "up") {
+      return clampAutoRefresh(value + AUTO_REFRESH_AFTER_MAX_STEP_MS);
+    }
+
+    if (value === maxStep && direction === "down") {
+      return cappedSteps[cappedSteps.length - 2];
+    }
+
+    let idx = cappedSteps.findIndex((step) => step >= value);
+    if (idx === -1) idx = cappedSteps.length - 1;
+
+    if (direction === "up") {
+      const nextIndex = value === cappedSteps[idx] ? idx + 1 : idx;
+      return clampAutoRefresh(cappedSteps[Math.min(nextIndex, cappedSteps.length - 1)]);
+    }
+
+    const prevIndex = value === cappedSteps[idx] ? idx - 1 : idx - 1;
+    return clampAutoRefresh(cappedSteps[Math.max(prevIndex, 0)]);
+  };
+
+  createEffect(() => {
+    if (!autoRefreshEnabled()) return;
+    const ms = autoRefreshMs();
+    const interval = setInterval(() => {
+      if (!loading() && !isRefreshing()) {
+        refresh();
+      }
+    }, ms);
+    onCleanup(() => clearInterval(interval));
+  });
+
   const contentHeight = () => Math.max(rows() - 4, 12);
   const overviewChartHeight = () => Math.max(5, Math.floor(contentHeight() * 0.35));
   const overviewListHeight = () => Math.max(4, contentHeight() - overviewChartHeight() - 4);
@@ -108,6 +172,30 @@ export function App(props: AppProps) {
       return;
     }
 
+    if (key.name === "r" && key.shift) {
+      const next = !autoRefreshEnabled();
+      setAutoRefreshEnabled(next);
+      saveSettings({ autoRefreshEnabled: next });
+      showStatus(`Auto update: ${next ? "ON" : "OFF"} (${formatIntervalSeconds(autoRefreshMs())})`);
+      return;
+    }
+
+    if ((key.name === "+") || (key.name === "=" && key.shift)) {
+      const next = getAutoRefreshIntervalStep(autoRefreshMs(), "up");
+      setAutoRefreshMs(next);
+      saveSettings({ autoRefreshMs: next });
+      showStatus(`Auto update interval: ${formatIntervalSeconds(next)}`);
+      return;
+    }
+
+    if (key.name === "-" || key.name === "_") {
+      const next = getAutoRefreshIntervalStep(autoRefreshMs(), "down");
+      setAutoRefreshMs(next);
+      saveSettings({ autoRefreshMs: next });
+      showStatus(`Auto update interval: ${formatIntervalSeconds(next)}`);
+      return;
+    }
+
     if (key.name === "r") {
       refresh();
       return;
@@ -307,6 +395,7 @@ export function App(props: AppProps) {
                   colorPalette={colorPalette()}
                   width={columns()}
                   selectedDate={selectedDate()}
+                  sortBy={sortBy()}
                 />
               </Match>
             </Switch>
@@ -328,6 +417,8 @@ export function App(props: AppProps) {
         isRefreshing={isRefreshing()}
         loadingPhase={loadingPhase()}
         cacheTimestamp={cacheTimestamp()}
+        autoRefreshEnabled={autoRefreshEnabled()}
+        autoRefreshMs={autoRefreshMs()}
         width={columns()}
         onSourceToggle={handleSourceToggle}
         onSortChange={handleSortChange}

package/src/tui/components/Footer.tsx

@@ -1,5 +1,16 @@
-import { Show, createSignal, createMemo, onMount, onCleanup } from "solid-js";
-import type { SourceType, SortType, TabType, LoadingPhase } from "../types/index.js";
+import {
+  Show,
+  createSignal,
+  createEffect,
+  onMount,
+  onCleanup,
+} from "solid-js";
+import type {
+  SourceType,
+  SortType,
+  TabType,
+  LoadingPhase,
+} from "../types/index.js";
 import type { ColorPaletteName } from "../config/themes.js";
 import type { TotalBreakdown } from "../hooks/useData.js";
 import { getPalette } from "../config/themes.js";
@@ -20,6 +31,8 @@ interface FooterProps {
   isRefreshing?: boolean;
   loadingPhase?: LoadingPhase;
   cacheTimestamp?: number | null;
+  autoRefreshEnabled?: boolean;
+  autoRefreshMs?: number;
   width?: number;
   onSourceToggle?: (source: SourceType) => void;
   onSortChange?: (sort: SortType) => void;
@@ -27,8 +40,8 @@ interface FooterProps {
   onRefresh?: () => void;
 }
 
-function formatTimeAgo(timestamp: number): string {
-  const seconds = Math.floor((Date.now() - timestamp) / 1000);
+function formatTimeAgo(timestamp: number, now: number): string {
+  const seconds = Math.max(Math.floor((now - timestamp) / 1000), 0);
   if (seconds < 60) return `${seconds}s ago`;
   const minutes = Math.floor(seconds / 60);
   if (minutes < 60) return `${minutes}m ago`;
@@ -38,35 +51,106 @@ function formatTimeAgo(timestamp: number): string {
   return `${days}d ago`;
 }
 
+function formatIntervalSeconds(ms: number | undefined): string {
+  if (!ms || ms <= 0) return "0s";
+  const seconds = Math.round(ms / 1000);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.round(seconds / 60);
+  return `${minutes}m`;
+}
+
 export function Footer(props: FooterProps) {
   const palette = () => getPalette(props.colorPalette);
   const isVeryNarrowTerminal = () => isVeryNarrow(props.width);
-  
-  const showScrollInfo = () => 
-    props.activeTab === "overview" && 
-    props.totalItems && 
-    props.scrollStart !== undefined && 
+  const [now, setNow] = createSignal(Date.now());
+  let nowInterval: ReturnType<typeof setInterval> | null = null;
+
+  createEffect(() => {
+    if (props.cacheTimestamp) {
+      if (!nowInterval) {
+        nowInterval = setInterval(() => setNow(Date.now()), 1000);
+      }
+    } else if (nowInterval) {
+      clearInterval(nowInterval);
+      nowInterval = null;
+    }
+  });
+
+  onCleanup(() => {
+    if (nowInterval) clearInterval(nowInterval);
+  });
+
+  const showScrollInfo = () =>
+    props.activeTab === "overview" &&
+    props.totalItems &&
+    props.scrollStart !== undefined &&
     props.scrollEnd !== undefined;
 
-  const totals = () => props.totals || { input: 0, output: 0, cacheRead: 0, cacheWrite: 0, reasoning: 0, total: 0, cost: 0 };
+  const totals = () =>
+    props.totals || {
+      input: 0,
+      output: 0,
+      cacheRead: 0,
+      cacheWrite: 0,
+      reasoning: 0,
+      total: 0,
+      cost: 0,
+    };
 
   return (
     <box flexDirection="column" paddingX={1}>
       <box flexDirection="row" justifyContent="space-between">
         <box flexDirection="row" gap={1}>
-          <SourceBadge name={isVeryNarrowTerminal() ? "1" : "1:OC"} source="opencode" enabled={props.enabledSources.has("opencode")} onToggle={props.onSourceToggle} />
-          <SourceBadge name={isVeryNarrowTerminal() ? "2" : "2:CC"} source="claude" enabled={props.enabledSources.has("claude")} onToggle={props.onSourceToggle} />
-          <SourceBadge name={isVeryNarrowTerminal() ? "3" : "3:CX"} source="codex" enabled={props.enabledSources.has("codex")} onToggle={props.onSourceToggle} />
-          <SourceBadge name={isVeryNarrowTerminal() ? "4" : "4:CR"} source="cursor" enabled={props.enabledSources.has("cursor")} onToggle={props.onSourceToggle} />
-          <SourceBadge name={isVeryNarrowTerminal() ? "5" : "5:GM"} source="gemini" enabled={props.enabledSources.has("gemini")} onToggle={props.onSourceToggle} />
+          <SourceBadge
+            name={isVeryNarrowTerminal() ? "1" : "1:OC"}
+            source="opencode"
+            enabled={props.enabledSources.has("opencode")}
+            onToggle={props.onSourceToggle}
+          />
+          <SourceBadge
+            name={isVeryNarrowTerminal() ? "2" : "2:CC"}
+            source="claude"
+            enabled={props.enabledSources.has("claude")}
+            onToggle={props.onSourceToggle}
+          />
+          <SourceBadge
+            name={isVeryNarrowTerminal() ? "3" : "3:CX"}
+            source="codex"
+            enabled={props.enabledSources.has("codex")}
+            onToggle={props.onSourceToggle}
+          />
+          <SourceBadge
+            name={isVeryNarrowTerminal() ? "4" : "4:CR"}
+            source="cursor"
+            enabled={props.enabledSources.has("cursor")}
+            onToggle={props.onSourceToggle}
+          />
+          <SourceBadge
+            name={isVeryNarrowTerminal() ? "5" : "5:GM"}
+            source="gemini"
+            enabled={props.enabledSources.has("gemini")}
+            onToggle={props.onSourceToggle}
+          />
           <Show when={!isVeryNarrowTerminal()}>
             <text dim>|</text>
-            <SortButton label="Cost" sortType="cost" active={props.sortBy === "cost"} onClick={props.onSortChange} />
-            <SortButton label="Tokens" sortType="tokens" active={props.sortBy === "tokens"} onClick={props.onSortChange} />
+            <SortButton
+              label="Cost"
+              sortType="cost"
+              active={props.sortBy === "cost"}
+              onClick={props.onSortChange}
+            />
+            <SortButton
+              label="Tokens"
+              sortType="tokens"
+              active={props.sortBy === "tokens"}
+              onClick={props.onSortChange}
+            />
           </Show>
           <Show when={showScrollInfo() && !isVeryNarrowTerminal()}>
             <text dim>|</text>
-            <text dim>{`↓ ${props.scrollStart! + 1}-${props.scrollEnd} of ${props.totalItems}`}</text>
+            <text
+              dim
+            >{`↓ ${props.scrollStart! + 1}-${props.scrollEnd} of ${props.totalItems}`}</text>
           </Show>
         </box>
         <box flexDirection="row" gap={1}>
@@ -80,38 +164,61 @@ export function Footer(props: FooterProps) {
         </box>
       </box>
       <box flexDirection="row" gap={1}>
-        <Show when={props.statusMessage} fallback={
-          <Show when={isVeryNarrowTerminal()} fallback={
-            <>
-              <text dim>↑↓ scroll • ←→/tab view • y copy •</text>
+        <Show
+          when={props.statusMessage}
+          fallback={
+            <Show
+              when={isVeryNarrowTerminal()}
+              fallback={
+                <>
+                  <text dim>↑↓ scroll • ←→/tab view • y copy •</text>
+                  <box onMouseDown={props.onPaletteChange}>
+                    <text fg="magenta">{`[p:${palette().name}]`}</text>
+                  </box>
+                  <text fg={props.autoRefreshEnabled ? "green" : "gray"}>
+                    {`[Shift+R:auto update ${formatIntervalSeconds(props.autoRefreshMs)}]`}
+                  </text>
+                  <text dim>[-/+ interval]•</text>
+                  <box onMouseDown={props.onRefresh}>
+                    <text fg="yellow">[r:refresh]</text>
+                  </box>
+                  <text dim>• e export • q quit</text>
+                </>
+              }
+            >
+              <text dim>↑↓•←→•y•</text>
               <box onMouseDown={props.onPaletteChange}>
-                <text fg="magenta">{`[p:${palette().name}]`}</text>
+                <text fg="magenta">[p]</text>
               </box>
+              <text fg={props.autoRefreshEnabled ? "green" : "gray"}>
+                {`[Shift+R:auto update ${formatIntervalSeconds(props.autoRefreshMs)}]`}
+              </text>
+              <text dim>-+•</text>
               <box onMouseDown={props.onRefresh}>
-                <text fg="yellow">[r:refresh]</text>
+                <text fg="yellow">[r]</text>
               </box>
-              <text dim>• e export • q quit</text>
-            </>
-          }>
-            <text dim>↑↓•←→•y•</text>
-            <box onMouseDown={props.onPaletteChange}>
-              <text fg="magenta">[p]</text>
-            </box>
-            <box onMouseDown={props.onRefresh}>
-              <text fg="yellow">[r]</text>
-            </box>
-            <text dim>•e•q</text>
-          </Show>
-        }>
-          <text fg="green" bold>{props.statusMessage}</text>
+              <text dim>•e•q</text>
+            </Show>
+          }
+        >
+          <text fg="green" bold>
+            {props.statusMessage}
+          </text>
         </Show>
       </box>
       <Show when={props.isRefreshing}>
         <LoadingStatusLine phase={props.loadingPhase} />
       </Show>
       <Show when={!props.isRefreshing && props.cacheTimestamp}>
-        <box flexDirection="row">
-          <text dim>{`Last updated: ${formatTimeAgo(props.cacheTimestamp!)}`}</text>
+        <box flexDirection="row" gap={1}>
+          <text
+            dim
+          >{`Last updated: ${formatTimeAgo(props.cacheTimestamp!, now())}`}</text>
+          <Show when={props.autoRefreshEnabled}>
+            <text
+              dim
+            >{`• Auto: ${formatIntervalSeconds(props.autoRefreshMs)}`}</text>
+          </Show>
         </box>
       </Show>
     </box>
@@ -156,7 +263,14 @@ function SortButton(props: SortButtonProps) {
   );
 }
 
-const SPINNER_COLORS = ["#00FFFF", "#00D7D7", "#00AFAF", "#008787", "#666666", "#666666"];
+const SPINNER_COLORS = [
+  "#00FFFF",
+  "#00D7D7",
+  "#00AFAF",
+  "#008787",
+  "#666666",
+  "#666666",
+];
 const SPINNER_WIDTH = 6;
 const SPINNER_HOLD_START = 20;
 const SPINNER_HOLD_END = 6;
@@ -164,12 +278,12 @@ const SPINNER_TRAIL = 3;
 const SPINNER_INTERVAL = 40;
 
 const PHASE_MESSAGES: Record<LoadingPhase, string> = {
-  "idle": "Initializing...",
+  idle: "Initializing...",
   "loading-pricing": "Loading pricing data...",
   "syncing-cursor": "Syncing Cursor data...",
   "parsing-sources": "Parsing session files...",
   "finalizing-report": "Finalizing report...",
-  "complete": "Complete",
+  complete: "Complete",
 };
 
 interface LoadingStatusLineProps {
@@ -180,14 +294,15 @@ function LoadingStatusLine(props: LoadingStatusLineProps) {
   const [frame, setFrame] = createSignal(0);
 
   onMount(() => {
-    const id = setInterval(() => setFrame(f => f + 1), SPINNER_INTERVAL);
+    const id = setInterval(() => setFrame((f) => f + 1), SPINNER_INTERVAL);
     onCleanup(() => clearInterval(id));
   });
 
   const getSpinnerState = () => {
     const forwardFrames = SPINNER_WIDTH;
     const backwardFrames = SPINNER_WIDTH - 1;
-    const totalCycle = forwardFrames + SPINNER_HOLD_END + backwardFrames + SPINNER_HOLD_START;
+    const totalCycle =
+      forwardFrames + SPINNER_HOLD_END + backwardFrames + SPINNER_HOLD_START;
     const normalized = frame() % totalCycle;
 
     if (normalized < forwardFrames) {
@@ -195,7 +310,11 @@ function LoadingStatusLine(props: LoadingStatusLineProps) {
     } else if (normalized < forwardFrames + SPINNER_HOLD_END) {
       return { position: SPINNER_WIDTH - 1, forward: true };
     } else if (normalized < forwardFrames + SPINNER_HOLD_END + backwardFrames) {
-      return { position: SPINNER_WIDTH - 2 - (normalized - forwardFrames - SPINNER_HOLD_END), forward: false };
+      return {
+        position:
+          SPINNER_WIDTH - 2 - (normalized - forwardFrames - SPINNER_HOLD_END),
+        forward: false,
+      };
     }
     return { position: 0, forward: false };
   };
@@ -209,7 +328,8 @@ function LoadingStatusLine(props: LoadingStatusLineProps) {
     return { char: "⬝", color: "#444444" };
   };
 
-  const message = () => props.phase ? PHASE_MESSAGES[props.phase] : "Refreshing...";
+  const message = () =>
+    props.phase ? PHASE_MESSAGES[props.phase] : "Refreshing...";
 
   return (
     <box flexDirection="row" gap={1}>

package/src/tui/components/StatsView.tsx

@@ -1,6 +1,7 @@
 import { For, Show, createMemo, createSignal } from "solid-js";
 import type { TUIData } from "../hooks/useData.js";
 import type { ColorPaletteName } from "../config/themes.js";
+import type { SortType, GridCell } from "../types/index.js";
 import { getPalette, getGradeColor } from "../config/themes.js";
 import { getModelColor } from "../utils/colors.js";
 import { formatTokens } from "../utils/format.js";
@@ -13,6 +14,7 @@ interface StatsViewProps {
   colorPalette: ColorPaletteName;
   width?: number;
   selectedDate?: string | null;
+  sortBy?: SortType;
 }
 
 const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
@@ -27,8 +29,30 @@ interface MonthLabel {
 export function StatsView(props: StatsViewProps) {
   const palette = () => getPalette(props.colorPalette);
   const isNarrowTerminal = () => isNarrow(props.width);
-  const grid = () => props.data.contributionGrid;
+  const metric = () => props.sortBy ?? "tokens";
   const cellWidth = 2;
+
+  const grid = createMemo((): GridCell[][] => {
+    const contributions = props.data.contributions;
+    const baseGrid = props.data.contributionGrid;
+    
+    const values = contributions.map(c => metric() === "tokens" ? c.tokens : c.cost);
+    const maxValue = Math.max(1, ...values);
+    
+    const levelMap = new Map<string, number>();
+    for (const c of contributions) {
+      const value = metric() === "tokens" ? c.tokens : c.cost;
+      const level = value === 0 ? 0 : Math.min(4, Math.ceil((value / maxValue) * 4));
+      levelMap.set(c.date, level);
+    }
+    
+    return baseGrid.map(row => 
+      row.map(cell => ({
+        date: cell.date,
+        level: cell.date ? (levelMap.get(cell.date) ?? 0) : 0,
+      }))
+    );
+  });
   
   const [clickedCell, setClickedCell] = createSignal<string | null>(null);
   

package/src/tui/config/settings.ts

@@ -9,9 +9,36 @@ const CONFIG_FILE = join(CONFIG_DIR, "tui-settings.json");
 const CACHE_FILE = join(CACHE_DIR, "tui-data-cache.json");
 
 const CACHE_STALE_THRESHOLD_MS = 60 * 1000;
+const MIN_AUTO_REFRESH_MS = 30000;
+const MAX_AUTO_REFRESH_MS = 3600000;
+const DEFAULT_AUTO_REFRESH_MS = 60000;
 
 interface TUISettings {
   colorPalette: string;
+  autoRefreshEnabled?: boolean;
+  autoRefreshMs?: number;
+}
+
+function validateSettings(raw: unknown): TUISettings {
+  const defaults: TUISettings = { 
+    colorPalette: "blue", 
+    autoRefreshEnabled: false, 
+    autoRefreshMs: DEFAULT_AUTO_REFRESH_MS 
+  };
+  
+  if (!raw || typeof raw !== "object") return defaults;
+  
+  const obj = raw as Record<string, unknown>;
+  
+  const colorPalette = typeof obj.colorPalette === "string" ? obj.colorPalette : defaults.colorPalette;
+  const autoRefreshEnabled = typeof obj.autoRefreshEnabled === "boolean" ? obj.autoRefreshEnabled : defaults.autoRefreshEnabled;
+  
+  let autoRefreshMs = defaults.autoRefreshMs;
+  if (typeof obj.autoRefreshMs === "number" && Number.isFinite(obj.autoRefreshMs)) {
+    autoRefreshMs = Math.min(MAX_AUTO_REFRESH_MS, Math.max(MIN_AUTO_REFRESH_MS, obj.autoRefreshMs));
+  }
+  
+  return { colorPalette, autoRefreshEnabled, autoRefreshMs };
 }
 
 interface CachedTUIData {
@@ -25,18 +52,24 @@ interface CachedTUIData {
 export function loadSettings(): TUISettings {
   try {
     if (existsSync(CONFIG_FILE)) {
-      return JSON.parse(readFileSync(CONFIG_FILE, "utf-8"));
+      const raw = JSON.parse(readFileSync(CONFIG_FILE, "utf-8"));
+      return validateSettings(raw);
     }
   } catch {
   }
-  return { colorPalette: "green" };
+  return { colorPalette: "blue", autoRefreshEnabled: false, autoRefreshMs: DEFAULT_AUTO_REFRESH_MS };
 }
 
-export function saveSettings(settings: TUISettings): void {
-  if (!existsSync(CONFIG_DIR)) {
-    mkdirSync(CONFIG_DIR, { recursive: true });
+export function saveSettings(updates: Partial<TUISettings>): void {
+  try {
+    if (!existsSync(CONFIG_DIR)) {
+      mkdirSync(CONFIG_DIR, { recursive: true });
+    }
+    const current = loadSettings();
+    const merged = { ...current, ...updates };
+    writeFileSync(CONFIG_FILE, JSON.stringify(merged, null, 2));
+  } catch {
   }
-  writeFileSync(CONFIG_FILE, JSON.stringify(settings, null, 2));
 }
 
 function sourcesMatch(enabledSources: Set<string>, cachedSources: string[]): boolean {

package/src/tui/hooks/useData.ts

@@ -245,9 +245,14 @@ async function loadData(enabledSources: Set<SourceType>, dateFilters?: DateFilte
   for (const d of dailyEntries) {
     if (d.cost > maxCost) maxCost = d.cost;
   }
+  let maxTokens = 1;
+  for (const d of dailyEntries) {
+    if (d.total > maxTokens) maxTokens = d.total;
+  }
   const contributions: ContributionDay[] = dailyEntries.map(d => ({
     date: d.date,
     cost: d.cost,
+    tokens: d.total,
     level: d.cost === 0 ? 0 : (Math.min(4, Math.ceil((d.cost / maxCost) * 4)) as 0 | 1 | 2 | 3 | 4),
   }));
 
@@ -452,13 +457,21 @@ export function useData(enabledSources: Accessor<Set<SourceType>>, dateFilters?:
   const [isRefreshing, setIsRefreshing] = createSignal(initialCachedData ? initialCacheIsStale : false);
 
   const [forceRefresh, setForceRefresh] = createSignal(false);
+  let pendingRefresh = false;
+  let currentRequestId = 0;
 
   const refresh = () => {
+    if (isRefreshing() || loading()) {
+      pendingRefresh = true;
+      return;
+    }
+    setIsRefreshing(true);
     setForceRefresh(true);
     setRefreshTrigger(prev => prev + 1);
   };
 
   const doLoad = (sources: Set<SourceType>, skipCacheCheck = false) => {
+    ++currentRequestId; // Invalidate any in-flight requests immediately
     const shouldSkipCache = skipCacheCheck || forceRefresh();
     
     if (!shouldSkipCache) {
@@ -488,17 +501,27 @@ export function useData(enabledSources: Accessor<Set<SourceType>>, dateFilters?:
       setForceRefresh(false);
     }
     
+    const requestId = currentRequestId;
     setError(null);
     loadData(sources, dateFilters)
       .then((freshData) => {
+        if (requestId !== currentRequestId) return;
         setData(freshData);
         saveCachedData(freshData, sources);
       })
-      .catch((e) => setError(e.message))
+      .catch((e: unknown) => {
+        if (requestId !== currentRequestId) return;
+        setError(e instanceof Error ? e.message : String(e));
+      })
       .finally(() => {
+        if (requestId !== currentRequestId) return;
         setLoading(false);
         setIsRefreshing(false);
         setLoadingPhase("complete");
+        if (pendingRefresh) {
+          pendingRefresh = false;
+          refresh();
+        }
       });
   };
 

package/src/tui/types/index.ts

@@ -31,6 +31,7 @@ export interface DailyEntry {
 export interface ContributionDay {
   date: string;
   cost: number;
+  tokens: number;
   level: number;
 }
 

package/src/wrapped.ts

@@ -11,6 +11,7 @@ import {
 } from "./native.js";
 import { PricingFetcher } from "./pricing.js";
 import { syncCursorCache, loadCursorCredentials } from "./cursor.js";
+import { loadCredentials } from "./credentials.js";
 import type { SourceType } from "./graph-types.js";
 
 interface WrappedData {
@@ -640,9 +641,19 @@ async function generateWrappedImage(data: WrappedData, options: { short?: boolea
 
   let yPos = PADDING + 24 * SCALE;
 
-  ctx.fillStyle = COLORS.textSecondary;
-  ctx.font = `${24 * SCALE}px Figtree, sans-serif`;
-  ctx.fillText(`Tracking since ${formatDate(data.firstDay)}`, PADDING, yPos);
+  const credentials = loadCredentials();
+  const MAX_USERNAME_LENGTH = 30; // GitHub max is 39, but leave room for layout
+  const displayUsername = credentials?.username
+    ? credentials.username.length > MAX_USERNAME_LENGTH
+      ? credentials.username.substring(0, MAX_USERNAME_LENGTH - 1) + '…'
+      : credentials.username
+    : null;
+  const titleText = displayUsername
+    ? `@${displayUsername}'s Wrapped ${data.year}`
+    : `My Wrapped ${data.year}`;
+  ctx.fillStyle = COLORS.textPrimary;
+  ctx.font = `bold ${28 * SCALE}px Figtree, sans-serif`;
+  ctx.fillText(titleText, PADDING, yPos);
   yPos += 60 * SCALE;
 
   ctx.fillStyle = COLORS.textSecondary;