token-larper 1.8.1 → 1.10.0

package/README.md

@@ -21,11 +21,11 @@ Token Larper passively reads session files, SQLite databases, and telemetry logs
 It consolidates all sessions into a real-time, interactive local dashboard running on [`http://localhost:4269`](http://localhost:4269) on **Windows, macOS, and Linux**. On Windows, it also lives quietly in your notification area as a lightweight, DPI-aware system tray icon.
 
 * **Powered by `ccusage`**: Uses `ccusage` v20+ for cross-platform log parsing, token counting, and verified frontier model pricing.
-* **100% Private & Offline**: No API keys required, no external proxies to configure, and zero analytics or telemetry sent to the cloud. The one outbound request is an optional update check that asks npm for the latest version number; turn it off in **Settings → Updates**.
+* **100% Private & Offline**: No API keys required, no external proxies to configure, and zero analytics or telemetry sent to the cloud. The only outbound requests are two optional ones that send nothing about your usage: an update check that asks npm for the latest version number (turn it off in **Settings → Updates**), and a once-a-day download of OpenRouter's public model price list for cost estimates (set `TOKEN_LARPER_OFFLINE=1` to skip it).
 * **Cross-Platform Core**: The telemetry engine, 18 harness scrapers, and React dashboard run identically across Windows, macOS (Apple Silicon & Intel), and Linux.
 * **Gamified Hall of Larp**: Track your lifetime token burn, unlock 14 achievements, climb an 11-tier ranking ladder past rival personas, and export a shareable 1200×630 flex badge.
 * **Six Styles, Your Colors**: Grove, Terminal, Paper, Brutal, Soft, and Mono each change fonts, corner radius, spacing, borders, and shadows, not just colors. Pick a base color that tints backgrounds, borders, and text, and an accent for highlights, from presets or any custom color. Or import a tweakcn/shadcn CSS theme on top.
-* **Subscription-Aware**: Distinguishes between strict verified API billing and estimated **"LARP Value"** (the theoretical API cost of tokens consumed through flat-rate subscriptions like Claude Pro/Max, Copilot, or Antigravity).
+* **Subscription-Aware**: Distinguishes between strict verified API billing and estimated **"LARP Value"** (the theoretical API cost of tokens consumed through flat-rate subscriptions like Claude Pro/Max, Copilot, or Antigravity). Estimates use [OpenRouter's](https://openrouter.ai/models) current list prices, so new models are priced without waiting for an update.
 
 ---
 
@@ -247,6 +247,11 @@ Set `TOKEN_LARPER_DATA_DIR` to use another folder. Versions before 1.5.0 kept th
 ### Updates
 When a new version is on npm, the dashboard shows a banner. **Update now** starts `bunx token-larper@latest` in the background; the new version replaces the running one on the same port and the dashboard reloads. You can also check from **Settings → Updates**, or turn automatic checks off there. A copy cloned from git updates with `git pull`.
 
+### Estimated Prices
+When ccusage has no price for a model (a brand-new one, or usage through a flat-rate subscription), Token Larper estimates the cost from list prices. It downloads OpenRouter's public model price list once a day, keeps it in the data folder as `openrouter-pricing.json`, and prices any model on that list from it. Other models use rates built into the app. Only the price list is downloaded; nothing about your usage is sent, and if the download fails the last saved list is used.
+
+Estimates do not include OpenRouter's long-context surcharges, and a model name that OpenRouter spells differently may fall back to the built-in rates. Verified costs from ccusage are never changed. Set `TOKEN_LARPER_OFFLINE=1` to skip the download and use only the saved list (if any) and the built-in rates.
+
 ### Headless Server Mode
 If running on a remote headless server or Docker container, you can explicitly disable the tray icon (automatically disabled on macOS/Linux):
 ```bash

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "token-larper",
-  "version": "1.8.1",
+  "version": "1.10.0",
   "description": "Token Larper — Multi-Harness AI Coding Usage & Cost Telemetry Dashboard powered by ccusage",
   "type": "module",
   "license": "MIT",

package/src/ccusage.ts

@@ -14,6 +14,7 @@ import type {
 import { isoWeek, localDateKey } from "./client/utils.ts";
 import { opencodeSessionUpdated, resolveSessionProject, saveSessionProjects } from "./projects.ts";
 import { APP_ROOT, DATA_DIR } from "./paths.ts";
+import { pricing, type Rates } from "./pricing.ts";
 
 const ROOT_DIR = APP_ROOT;
 const CACHE_DIR = DATA_DIR;
@@ -260,12 +261,6 @@ function resolveCcusageBinary(): { cmd: string[]; version: string } {
   return { cmd: ["bunx", "ccusage"], version };
 }
 
-/**
- * Estimates realistic frontier API cost in USD when ccusage reports missingPricing: true or 0 cost
- * (e.g. for bleeding-edge models like claude-opus-5-5, gpt-6-sol, minimax-m3-free, etc.).
- */
-type Rates = [input: number, output: number, cacheWrite: number, cacheRead: number];
-
 /**
  * Anthropic list prices per 1M tokens, by family and version. Opus dropped from $15/$75
  * at 4.5, so a single "opus" rate overstated newer models about threefold. Names come in
@@ -295,6 +290,11 @@ export function claudeRates(model: string): Rates | null {
   return [0.25, 1.25, 0.3, 0.03];
 }
 
+/**
+ * Estimates realistic frontier API cost in USD when ccusage reports missingPricing: true or 0 cost
+ * (e.g. for bleeding-edge models like claude-opus-5-5, gpt-6-sol, minimax-m3-free, etc.).
+ * Rates come from OpenRouter's price list when it lists the model, otherwise the built-in ones below.
+ */
 export function estimateFrontierCost(params: {
   modelName: string;
   inputTokens: number;
@@ -309,9 +309,9 @@ export function estimateFrontierCost(params: {
   // Pricing in USD per 1M tokens: [input, output, cacheWrite, cacheRead]
   let rates: Rates = [2.0, 8.0, 2.5, 0.2];
 
-  const claude = claudeRates(m);
-  if (claude) {
-    rates = claude;
+  const known = pricing.lookup(m) ?? claudeRates(m);
+  if (known) {
+    rates = known;
   } else if (m.includes("gpt-6") || m.includes("gpt-5") || m.includes("o3") || m.includes("o4")) {
     rates = [2.5, 10.0, 2.5, 0.25];
   } else if (m.includes("gemini") && m.includes("pro")) {
@@ -583,6 +583,10 @@ async function syncAntigravityInBackground(): Promise<void> {
 async function runHarnessRefresh(options?: { forceDeepScan?: boolean }): Promise<DashboardPayload> {
   mkdirSync(CACHE_DIR, { recursive: true });
 
+  // Starts now so the price download overlaps the ccusage runs below; estimates are
+  // built after they finish, and ensure() never throws or blocks for long.
+  const pricesReady = pricing.ensure();
+
   // Seed antigravity from disk cache immediately if available
   const diskAg = loadAntigravityFromDiskCache();
   if (diskAg && !inMemoryHarnessStore.has("antigravity")) {
@@ -624,6 +628,7 @@ async function runHarnessRefresh(options?: { forceDeepScan?: boolean }): Promise
     }
   }
 
+  await pricesReady;
   cachedDashboardPayload = buildDashboardPayloadFromStore();
   try {
     writeFileSync(DASHBOARD_CACHE_FILE, JSON.stringify(cachedDashboardPayload), "utf8");

package/src/client/App.tsx

@@ -1,9 +1,10 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { AlertTriangle, Heart, Moon, Power, RefreshCw, Search, Settings, Sun } from "lucide-react";
+import { AlertTriangle, Moon, Power, RefreshCw, Search, Settings, Sun } from "lucide-react";
 import type { DashboardPayload, HarnessId, StartupConfig } from "../types.ts";
 import { OTHER_SERIES, SERIES_SLOTS, seriesColor, type SeriesInfo } from "./charts.tsx";
 import { DashboardProvider, type Dashboard } from "./context.tsx";
 import { DateRangePicker } from "./components/DateRangePicker.tsx";
+import { AppFooter } from "./components/AppFooter.tsx";
 import { Logo } from "./components/Logo.tsx";
 import { RankChip } from "./components/RankChip.tsx";
 import { SettingsDialog } from "./components/SettingsDialog.tsx";
@@ -553,14 +554,7 @@ export function App() {
           {view.id === "rank" && <Rank />}
         </main>
 
-        <footer className="credit">
-          <span>
-            Made with <Heart size={12} aria-label="love" className="credit-heart" /> by{" "}
-            <a href="https://github.com/YarooqH" target="_blank" rel="noreferrer">qray</a>
-          </span>
-          <span aria-hidden="true">·</span>
-          <a href="https://github.com/YarooqH/token-larper" target="_blank" rel="noreferrer">Source on GitHub</a>
-        </footer>
+        <AppFooter />
 
         {showSettings && (
           <SettingsDialog

package/src/client/components/AppFooter.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+
+const JOKES = [
+  "Tokens were harmed in the making.",
+  "The context window remembers.",
+  "One more prompt. Famous last words.",
+  "Your cache misses have been noted.",
+  "The bill has entered the chat.",
+  "This footer also cost tokens.",
+  "The tokens know what they did.",
+] as const;
+
+const LAST_JOKE_KEY = "token-larper-last-footer-joke";
+
+function pickJoke(): string {
+  let previous = -1;
+  try {
+    const saved = sessionStorage.getItem(LAST_JOKE_KEY);
+    if (saved !== null) previous = Number(saved);
+  } catch {
+    // The footer still works when storage is unavailable.
+  }
+
+  const choices = JOKES.map((_, index) => index).filter((index) => index !== previous);
+  const index = choices[Math.floor(Math.random() * choices.length)]!;
+  try { sessionStorage.setItem(LAST_JOKE_KEY, String(index)); } catch {}
+  return JOKES[index];
+}
+
+const joke = pickJoke();
+
+export function AppFooter() {
+  return (
+    <footer className="app-footer">
+      <span>Made by <a href="https://github.com/YarooqH" target="_blank" rel="noopener noreferrer">qray</a></span>
+      <span className="footer-separator" aria-hidden="true">·</span>
+      <span>{joke}</span>
+      <span className="footer-separator" aria-hidden="true">·</span>
+      <a className="footer-source" href="https://github.com/YarooqH/token-larper" target="_blank" rel="noopener noreferrer">
+        <svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+          <path 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.23.48-2.69-1.08-2.69-1.08-.36-.92-.89-1.16-.89-1.16-.73-.5.06-.49.06-.49.81.06 1.24.83 1.24.83.72 1.23 1.88.88 2.34.67.07-.52.28-.88.51-1.08-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-.22 2.2.82a7.65 7.65 0 0 1 4.01 0c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.28.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.08-.01 1.95-.01 2.21 0 .21.15.46.55.38A8.02 8.02 0 0 0 16 8c0-4.42-3.58-8-8-8Z" />
+        </svg>
+        <span>Source on GitHub</span>
+      </a>
+    </footer>
+  );
+}

package/src/client/styles.css

@@ -310,9 +310,32 @@ img { display: block; }
 
 .app {
   max-width: 1240px;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
   margin: 0 auto;
-  padding: 0 32px 72px;
+  padding: 0 32px 24px;
+}
+
+.app-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  column-gap: 8px;
+  row-gap: 4px;
+  margin-top: auto;
+  padding-top: 64px;
+  color: var(--text-3);
+  font-size: 11px;
+  line-height: 1.5;
+  text-align: center;
 }
+.app-footer a { color: var(--text-2); text-decoration: none; }
+.app-footer a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
+.app-footer a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
+.footer-source { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
+.footer-separator { color: var(--text-3); }
 
 .topbar {
   display: flex;
@@ -1161,10 +1184,6 @@ html[data-theme="dark"] .toggle.on .toggle-knob { background: var(--accent-ink);
 
 /* ---------- Credit ---------- */
 
-.credit { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 48px; color: var(--text-3); font-size: 12px; }
-.credit a { color: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
-.credit a:hover { color: var(--text); text-decoration-color: currentColor; }
-.credit-heart { vertical-align: -1px; color: var(--accent); fill: currentColor; }
 
 /* ---------- Splash screens ---------- */
 
@@ -1329,7 +1348,8 @@ html[data-theme="dark"] .toggle.on .toggle-knob { background: var(--accent-ink);
 @media (max-width: 700px) {
   .update-banner { flex-wrap: wrap; }
   .update-banner-actions { width: 100%; justify-content: flex-end; }
-  .app { padding: 0 16px 48px; }
+  .app { padding: 0 16px 24px; }
+  .app-footer { padding-top: 48px; }
   .topbar { margin: 0 -16px; padding: 12px 16px; }
   .updated { display: none; }
   .filters { margin: 0 -16px 16px; padding: 8px 16px 10px; }

package/src/pricing.ts

@@ -0,0 +1,210 @@
+import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { dirname } from "node:path";
+import { dataPath } from "./paths.ts";
+
+// Model prices for the estimated cost. OpenRouter publishes a public price list that
+// tracks new models faster than a table kept in this repo. The one request goes to its
+// models endpoint (no key, no usage data sent) at most once a day; the result is cached
+// in the data folder and the built-in rates in ccusage.ts cover whatever it does not list.
+// Set TOKEN_LARPER_OFFLINE=1 to skip the request and use only the cache and built-in rates.
+
+/** USD per 1M tokens: input, output, cache write, cache read. */
+export type Rates = [input: number, output: number, cacheWrite: number, cacheRead: number];
+
+export type PriceTable = Map<string, Rates>;
+
+export interface OpenRouterModel {
+  id: string;
+  pricing?: Record<string, unknown>;
+}
+
+const MODELS_URL = "https://openrouter.ai/api/v1/models";
+const REFRESH_MS = 24 * 60 * 60 * 1000;
+const RETRY_MS = 15 * 60 * 1000;
+const TIMEOUT_MS = 8000;
+
+/**
+ * Reduces a model name to the form both ccusage and OpenRouter can be compared in:
+ * lower case, without the harness tag ("[pi] "), provider ("anthropic/") or variant
+ * (":free"), and with dashed versions dotted ("4-5" becomes "4.5").
+ */
+export function normalizeModelName(name: string): string {
+  const slug = name
+    .toLowerCase()
+    .trim()
+    .replace(/^\[[^\]]*\]\s*/, "")
+    .replace(/^.*\//, "")
+    .replace(/:.*$/, "");
+
+  const parts = slug.split("-");
+  const out: string[] = [];
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i]!;
+    const next = parts[i + 1];
+    // A pair of short numbers is a version ("opus-4-5"), unless it follows a year
+    // ("2024-11-20" is a date).
+    const followsYear = /^\d{4}$/.test(parts[i - 1] ?? "");
+    if (next !== undefined && !followsYear && /^\d{1,2}$/.test(part) && /^\d{1,2}$/.test(next)) {
+      out.push(`${part}.${next}`);
+      i++;
+    } else {
+      out.push(part);
+    }
+  }
+  return out.join("-");
+}
+
+// Multiplying a per-token price by 1e6 leaves float noise (0.0000002 * 1e6 is
+// 0.19999999999999998).
+const perMillion = (perToken: number) => Number((perToken * 1e6).toPrecision(10));
+
+/** Absent or invalid is undefined; zero is a real price. */
+function cachePrice(value: unknown): number | undefined {
+  if (value === undefined || value === null || value === "") return undefined;
+  const n = Number(value);
+  return Number.isFinite(n) && n >= 0 ? n : undefined;
+}
+
+/**
+ * Builds the rate table from OpenRouter's model list. Variants (":free" is $0, ":batch"
+ * is half price) and "~...-latest" aliases would misprice a model, and a price of 0 or
+ * -1 means free or variable, so none of those are kept. When two ids normalize to the
+ * same name, the first listed wins.
+ */
+export function buildPriceTable(models: readonly OpenRouterModel[]): PriceTable {
+  const table: PriceTable = new Map();
+  for (const model of models) {
+    if (typeof model?.id !== "string" || model.id.startsWith("~") || model.id.includes(":")) continue;
+    const input = Number(model.pricing?.prompt);
+    const output = Number(model.pricing?.completion);
+    if (!(input > 0) || !(output > 0)) continue;
+
+    const key = normalizeModelName(model.id);
+    if (!key || table.has(key)) continue;
+
+    // Anthropic bills cache writes at 1.25x input and reads at 0.1x. Elsewhere a missing
+    // cache price means no discount is known, so cached tokens cost the input price.
+    const anthropic = model.id.startsWith("anthropic/");
+    const cacheWrite = cachePrice(model.pricing?.input_cache_write) ?? (anthropic ? input * 1.25 : input);
+    const cacheRead = cachePrice(model.pricing?.input_cache_read) ?? (anthropic ? input * 0.1 : input);
+    table.set(key, [perMillion(input), perMillion(output), perMillion(cacheWrite), perMillion(cacheRead)]);
+  }
+  return table;
+}
+
+/**
+ * The rates for a model name, or null if the table has none. An exact match wins;
+ * otherwise the longest listed name that prefixes it at a dash ("gpt-5.5-codex" finds
+ * "gpt-5.5", and "claude-opus-4-20250514" finds "claude-opus-4"). A prefix must end at
+ * a dash so "claude-opus-4.9" never borrows the price of "claude-opus-4".
+ */
+export function lookupRates(modelName: string, table: PriceTable): Rates | null {
+  const key = normalizeModelName(modelName);
+  if (!key) return null;
+
+  const exact = table.get(key);
+  if (exact) return exact;
+
+  let best: string | undefined;
+  for (const listed of table.keys()) {
+    if (key.startsWith(`${listed}-`) && (!best || listed.length > best.length)) best = listed;
+  }
+  return best ? table.get(best)! : null;
+}
+
+const isRates = (value: unknown): value is Rates =>
+  Array.isArray(value) && value.length === 4 && value.every((n) => typeof n === "number" && Number.isFinite(n) && n >= 0);
+
+export interface PricingOptions {
+  cacheFile?: string;
+  fetchImpl?: (url: string, init?: RequestInit) => Promise<Response>;
+  now?: () => number;
+}
+
+export function createPricing(options: PricingOptions = {}) {
+  const cacheFile = options.cacheFile ?? dataPath("openrouter-pricing.json");
+  const doFetch = options.fetchImpl ?? fetch;
+  const now = options.now ?? Date.now;
+
+  let table: PriceTable = new Map();
+  // The same few model names repeat across every daily row, and an unlisted name scans
+  // the whole table, so answers are remembered until the table changes.
+  let answers = new Map<string, Rates | null>();
+  let fetchedAt = 0;
+  let nextAttempt = 0;
+  let cacheRead = false;
+  let inFlight: Promise<void> | null = null;
+
+  function setTable(next: PriceTable): void {
+    table = next;
+    answers = new Map();
+  }
+
+  function readCache(): void {
+    try {
+      const stored = JSON.parse(readFileSync(cacheFile, "utf8")) as { fetchedAt?: unknown; rates?: Record<string, unknown> };
+      const rates: PriceTable = new Map();
+      for (const [key, value] of Object.entries(stored.rates ?? {})) if (isRates(value)) rates.set(key, value);
+      if (typeof stored.fetchedAt === "number" && rates.size > 0) {
+        setTable(rates);
+        fetchedAt = stored.fetchedAt;
+      }
+    } catch {
+      // No cache yet, or it is unreadable; the next download replaces it.
+    }
+  }
+
+  async function download(): Promise<void> {
+    try {
+      const res = await doFetch(MODELS_URL, { signal: AbortSignal.timeout(TIMEOUT_MS), headers: { Accept: "application/json" } });
+      if (!res.ok) throw new Error(`OpenRouter responded ${res.status}`);
+      const body = (await res.json()) as { data?: unknown };
+      if (!Array.isArray(body.data)) throw new Error("OpenRouter response had no model list");
+
+      const fresh = buildPriceTable(body.data);
+      // An empty list would wipe good prices, so treat it as a failed download.
+      if (fresh.size === 0) throw new Error("OpenRouter response had no usable prices");
+
+      setTable(fresh);
+      fetchedAt = now();
+      try {
+        mkdirSync(dirname(cacheFile), { recursive: true });
+        writeFileSync(cacheFile, JSON.stringify({ fetchedAt, rates: Object.fromEntries(fresh) }), "utf8");
+      } catch {
+        // The in-memory prices still work when the disk is not writable.
+      }
+    } catch {
+      // Offline or the endpoint changed: keep what we have and try again later.
+      nextAttempt = now() + RETRY_MS;
+    }
+  }
+
+  return {
+    /** Rates from the OpenRouter table, or null when it has no price for this model. */
+    lookup(modelName: string): Rates | null {
+      let rates = answers.get(modelName);
+      if (rates === undefined) {
+        rates = lookupRates(modelName, table);
+        answers.set(modelName, rates);
+      }
+      return rates;
+    },
+
+    /** Replaces the in-memory table. */
+    use: setTable,
+
+    /** Loads the cached table, and downloads a new one if it is over a day old. Never throws. */
+    async ensure(): Promise<void> {
+      if (!cacheRead) {
+        cacheRead = true;
+        readCache();
+      }
+      if (process.env.TOKEN_LARPER_OFFLINE === "1") return;
+      if (now() - fetchedAt < REFRESH_MS || now() < nextAttempt) return;
+      inFlight ??= download().finally(() => (inFlight = null));
+      await inFlight;
+    },
+  };
+}
+
+export const pricing = createPricing();