npm - token-larper - Versions diffs - 1.0.0 - Mend

token-larper 1.0.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.

Files changed (42) hide show

package/README.md +334 -0
package/Start-TokenLarper.vbs +5 -0
package/bin/cli.js +34 -0
package/llms.txt +59 -0
package/package.json +61 -0
package/scripts/docs-demo-server.ts +141 -0
package/scripts/launch-on-default-desktop.ps1 +42 -0
package/scripts/launch-silent.vbs +6 -0
package/scripts/run-server.ps1 +59 -0
package/scripts/tray-host.ps1 +181 -0
package/src/ccusage.ts +1075 -0
package/src/client/App.tsx +560 -0
package/src/client/charts.tsx +341 -0
package/src/client/components/Calendar.tsx +207 -0
package/src/client/components/DateRangePicker.tsx +131 -0
package/src/client/components/KpiCards.tsx +122 -0
package/src/client/components/RankChip.tsx +22 -0
package/src/client/components/SelectMenu.tsx +116 -0
package/src/client/components/SettingsDialog.tsx +207 -0
package/src/client/components/ThemeSettings.tsx +131 -0
package/src/client/context.tsx +60 -0
package/src/client/index.html +54 -0
package/src/client/lib/aggregate.ts +266 -0
package/src/client/lib/range.ts +87 -0
package/src/client/lib/rank.ts +323 -0
package/src/client/lib/shareCard.ts +139 -0
package/src/client/logo.svg +8 -0
package/src/client/main.tsx +12 -0
package/src/client/styles.css +1113 -0
package/src/client/themes.ts +268 -0
package/src/client/utils.ts +61 -0
package/src/client/views/Models.tsx +71 -0
package/src/client/views/Overview.tsx +280 -0
package/src/client/views/Projects.tsx +88 -0
package/src/client/views/Rank.tsx +255 -0
package/src/client/views/Sessions.tsx +108 -0
package/src/client/views/Tools.tsx +114 -0
package/src/projects.ts +214 -0
package/src/server.ts +173 -0
package/src/startup.ts +110 -0
package/src/tray.ts +293 -0
package/src/types.ts +155 -0

package/src/client/index.html ADDED Viewed

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script>
+      // An explicit choice wins; otherwise follow the OS setting.
+      var stored = null;
+      try { stored = localStorage.getItem("token-larper-theme"); } catch {}
+      document.documentElement.dataset.theme =
+        stored === "dark" || stored === "light"
+          ? stored
+          : matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      var savedPalette = null;
+      try { savedPalette = localStorage.getItem("token-larper-palette"); } catch {}
+      var palettes = ["pine", "slate", "ocean", "iris", "clay", "rose", "custom"];
+      var palette = palettes.includes(savedPalette) ? savedPalette : "pine";
+      document.documentElement.dataset.palette = palette;
+      if (palette === "custom") {
+        try {
+          var imported = JSON.parse(localStorage.getItem("token-larper-imported-theme") || "null");
+          var tokens = imported && imported[document.documentElement.dataset.theme];
+          var properties = [
+            "--bg", "--surface", "--surface-2", "--surface-3", "--border", "--border-strong",
+            "--text", "--text-2", "--text-3", "--accent", "--accent-ink", "--accent-soft", "--gold", "--focus",
+            "--warning-bg", "--warning-border", "--warning-text", "--error-bg", "--error-border", "--error-text",
+            "--series-1", "--series-2", "--series-3", "--series-4", "--series-5", "--series-6", "--series-7",
+            "--series-other", "--heat-0", "--heat-1", "--heat-2", "--heat-3", "--heat-4",
+          ];
+          properties.forEach(function (property) {
+            var value = tokens && tokens[property];
+            if (typeof value === "string" && value.length <= 180 && !/[;{}]|\bvar\s*\(|url\s*\(/i.test(value) && CSS.supports("color", value)) {
+              document.documentElement.style.setProperty(property, value);
+            }
+          });
+          ["--radius", "--radius-sm"].forEach(function (property) {
+            var radius = tokens && tokens[property];
+            if (typeof radius === "string" && /^\d+(?:\.\d+)?(?:px|rem|em)$/.test(radius)) {
+              document.documentElement.style.setProperty(property, radius);
+            }
+          });
+        } catch {}
+      }
+    </script>
+    <meta name="theme-color" content="#f8f9f7" />
+    <title>Token Larper — Usage overview</title>
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
+    <link rel="stylesheet" href="/styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/app.js"></script>
+  </body>
+</html>

package/src/client/lib/aggregate.ts ADDED Viewed

@@ -0,0 +1,266 @@
+import type {
+  HarnessId,
+  ModelMetric,
+  PeriodHarnessBreakdown,
+  SessionEntry,
+  TimePeriodRow,
+} from "../../types.ts";
+import { isoWeek } from "../utils.ts";
+import { eachDay, parseDay } from "./range.ts";
+// Everything the dashboard shows is derived here from the server's daily rows and session
+// list, so a date range or tool filter narrows every number on the page the same way.
+export type HarnessFilter = HarnessId | "all";
+export type Bucket = "daily" | "weekly" | "monthly";
+export interface TokenCounts {
+  inputTokens: number;
+  outputTokens: number;
+  cacheCreationTokens: number;
+  cacheReadTokens: number;
+  reasoningOutputTokens: number;
+  totalTokens: number;
+  verifiedCost: number;
+  estimatedCost: number;
+}
+const COUNT_KEYS: (keyof TokenCounts)[] = [
+  "inputTokens",
+  "outputTokens",
+  "cacheCreationTokens",
+  "cacheReadTokens",
+  "reasoningOutputTokens",
+  "totalTokens",
+  "verifiedCost",
+  "estimatedCost",
+];
+export function zeroCounts(): TokenCounts {
+  return {
+    inputTokens: 0,
+    outputTokens: 0,
+    cacheCreationTokens: 0,
+    cacheReadTokens: 0,
+    reasoningOutputTokens: 0,
+    totalTokens: 0,
+    verifiedCost: 0,
+    estimatedCost: 0,
+  };
+}
+export function addCounts<T extends TokenCounts>(target: T, source: TokenCounts): T {
+  for (const key of COUNT_KEYS) target[key] += source[key];
+  return target;
+}
+/** Share of prompt-side tokens served from cache. */
+export function cacheReadRate(c: TokenCounts): number {
+  const prompt = c.inputTokens + c.cacheReadTokens + c.cacheCreationTokens;
+  return prompt > 0 ? (c.cacheReadTokens / prompt) * 100 : 0;
+}
+export function emptyPeriod(period: string, label = period): TimePeriodRow {
+  return { period, label, ...zeroCounts(), byHarness: {}, modelsUsed: [] };
+}
+function mergeModels(into: ModelMetric[], from: ModelMetric[]): void {
+  for (const m of from) {
+    const existing = into.find((x) => x.modelName === m.modelName);
+    if (existing) {
+      addCounts(existing, m);
+      existing.missingPricing ||= m.missingPricing;
+    } else into.push({ ...m });
+  }
+}
+function mergeRow(target: TimePeriodRow, source: TimePeriodRow): void {
+  addCounts(target, source);
+  for (const [id, hb] of Object.entries(source.byHarness)) {
+    const existing = target.byHarness[id];
+    if (existing) {
+      addCounts(existing, hb);
+      mergeModels(existing.models, hb.models);
+    } else {
+      target.byHarness[id] = { ...hb, models: hb.models.map((m) => ({ ...m })) };
+    }
+  }
+  for (const m of source.modelsUsed) if (!target.modelsUsed.includes(m)) target.modelsUsed.push(m);
+}
+/** Narrow one day to one harness (or keep it whole for "all"). */
+function projectDay(row: TimePeriodRow, harness: HarnessFilter): TimePeriodRow | null {
+  if (harness === "all") return row;
+  const hb = row.byHarness[harness];
+  if (!hb) return null;
+  const { harness: _id, models, ...counts } = hb;
+  return {
+    period: row.period,
+    label: row.label,
+    ...counts,
+    byHarness: { [harness]: hb },
+    modelsUsed: models.map((m) => m.modelName),
+  };
+}
+/** Days with usage inside [start, end] for the selected harness, oldest first. */
+export function daysInRange(daily: TimePeriodRow[], harness: HarnessFilter, start: string, end: string): TimePeriodRow[] {
+  const out: TimePeriodRow[] = [];
+  for (const row of daily) {
+    if (row.period < start || row.period > end) continue;
+    const projected = projectDay(row, harness);
+    if (projected && projected.totalTokens > 0) out.push(projected);
+  }
+  return out;
+}
+export interface RangeTotals extends TokenCounts {
+  activeDays: number;
+  cacheHitRate: number;
+  busiestDay: TimePeriodRow | null;
+}
+export function summarize(days: TimePeriodRow[]): RangeTotals {
+  const totals = zeroCounts();
+  let busiest: TimePeriodRow | null = null;
+  for (const d of days) {
+    addCounts(totals, d);
+    if (!busiest || d.totalTokens > busiest.totalTokens) busiest = d;
+  }
+  return { ...totals, activeDays: days.length, cacheHitRate: cacheReadRate(totals), busiestDay: busiest };
+}
+function bucketKey(day: string, bucket: Bucket): { key: string; label: string } {
+  if (bucket === "daily") return { key: day, label: day };
+  if (bucket === "monthly") {
+    const d = parseDay(day);
+    return { key: day.slice(0, 7), label: d.toLocaleDateString("en-US", { month: "short", year: "numeric" }) };
+  }
+  const d = parseDay(day);
+  return isoWeek(d.getFullYear(), d.getMonth() + 1, d.getDate());
+}
+/**
+ * Every bucket in the range, idle ones included, so a gap in usage shows as a gap.
+ * Weeks and months at the edges are clipped to the range rather than padded out.
+ */
+export function bucketize(days: TimePeriodRow[], bucket: Bucket, start: string, end: string): TimePeriodRow[] {
+  const buckets = new Map<string, TimePeriodRow>();
+  for (const day of eachDay(start, end)) {
+    const { key, label } = bucketKey(day, bucket);
+    if (!buckets.has(key)) buckets.set(key, emptyPeriod(key, label));
+  }
+  for (const d of days) {
+    const target = buckets.get(bucketKey(d.period, bucket).key);
+    if (target) mergeRow(target, d);
+  }
+  return [...buckets.values()];
+}
+export interface HarnessRangeSummary extends TokenCounts {
+  harness: HarnessId;
+  activeDays: number;
+  cacheHitRate: number;
+  lastActive: string | null;
+  models: ModelMetric[];
+}
+export function harnessTotals(days: TimePeriodRow[]): HarnessRangeSummary[] {
+  const map = new Map<HarnessId, HarnessRangeSummary>();
+  for (const d of days) {
+    for (const hb of Object.values(d.byHarness) as PeriodHarnessBreakdown[]) {
+      let entry = map.get(hb.harness);
+      if (!entry) {
+        entry = { harness: hb.harness, ...zeroCounts(), activeDays: 0, cacheHitRate: 0, lastActive: null, models: [] };
+        map.set(hb.harness, entry);
+      }
+      addCounts(entry, hb);
+      mergeModels(entry.models, hb.models);
+      entry.activeDays += 1;
+      if (!entry.lastActive || d.period > entry.lastActive) entry.lastActive = d.period;
+    }
+  }
+  const list = [...map.values()];
+  for (const h of list) {
+    h.cacheHitRate = cacheReadRate(h);
+    h.models.sort((a, b) => b.totalTokens - a.totalTokens);
+  }
+  return list.sort((a, b) => b.totalTokens - a.totalTokens);
+}
+export function modelTotals(days: TimePeriodRow[]): ModelMetric[] {
+  const map = new Map<string, ModelMetric>();
+  for (const d of days) {
+    for (const hb of Object.values(d.byHarness)) {
+      for (const m of hb.models) {
+        const key = `${m.harness}::${m.modelName}`;
+        const existing = map.get(key);
+        if (existing) {
+          addCounts(existing, m);
+          existing.missingPricing ||= m.missingPricing;
+        } else map.set(key, { ...m });
+      }
+    }
+  }
+  return [...map.values()].sort((a, b) => b.totalTokens - a.totalTokens);
+}
+/** Sessions count toward the day they last had activity. */
+export function sessionsInRange(sessions: SessionEntry[], harness: HarnessFilter, start: string, end: string): SessionEntry[] {
+  return sessions.filter(
+    (s) => (harness === "all" || s.harness === harness) && s.date >= start && s.date <= end
+  );
+}
+export interface ProjectSummary extends TokenCounts {
+  key: string;
+  name: string;
+  root: string | null;
+  harnesses: HarnessId[];
+  sessions: SessionEntry[];
+  lastActivity: string;
+}
+export function groupProjects(sessions: SessionEntry[]): ProjectSummary[] {
+  const map = new Map<string, ProjectSummary>();
+  for (const s of sessions) {
+    const key = s.projectRoot ?? `unattributed:${s.harness}`;
+    let p = map.get(key);
+    if (!p) {
+      p = {
+        key,
+        name: s.projectName ?? "No project recorded",
+        root: s.projectRoot ?? null,
+        harnesses: [],
+        sessions: [],
+        lastActivity: "",
+        ...zeroCounts(),
+      };
+      map.set(key, p);
+    }
+    addCounts(p, s);
+    p.sessions.push(s);
+    if (!p.harnesses.includes(s.harness)) p.harnesses.push(s.harness);
+    const when = s.lastActivity ?? s.date;
+    if (when > p.lastActivity) p.lastActivity = when;
+  }
+  return [...map.values()].sort((a, b) => b.totalTokens - a.totalTokens);
+}
+/**
+ * A fixed number of evenly sized buckets across the range for a stat-tile sparkline;
+ * long ranges are summed into wider buckets instead of drawing hundreds of points.
+ */
+export function sparkline(days: TimePeriodRow[], start: string, end: string, pick: (d: TokenCounts) => number, points = 24): number[] {
+  const all = eachDay(start, end);
+  const n = Math.min(points, all.length);
+  if (n <= 1) return [];
+  const byDay = new Map(days.map((d) => [d.period, d]));
+  const values = new Array<number>(n).fill(0);
+  all.forEach((day, i) => {
+    const d = byDay.get(day);
+    if (d) values[Math.min(n - 1, Math.floor((i * n) / all.length))]! += pick(d);
+  });
+  return values;
+}

package/src/client/lib/range.ts ADDED Viewed

@@ -0,0 +1,87 @@
+import { localDateKey } from "../utils.ts";
+export type RangePreset = "7d" | "30d" | "90d" | "month" | "last-month" | "year" | "all" | "custom";
+/** An inclusive span of local calendar days, as YYYY-MM-DD keys. */
+export interface DateRange {
+  preset: RangePreset;
+  start: string;
+  end: string;
+}
+export const RANGE_PRESETS: { id: Exclude<RangePreset, "custom">; label: string }[] = [
+  { id: "7d", label: "Last 7 days" },
+  { id: "30d", label: "Last 30 days" },
+  { id: "90d", label: "Last 90 days" },
+  { id: "month", label: "This month" },
+  { id: "last-month", label: "Last month" },
+  { id: "year", label: "This year" },
+  { id: "all", label: "All time" },
+];
+export function parseDay(key: string): Date {
+  return new Date(`${key}T00:00:00`);
+}
+export function addDays(key: string, n: number): string {
+  const d = parseDay(key);
+  d.setDate(d.getDate() + n);
+  return localDateKey(d);
+}
+export function daysInRange(start: string, end: string): number {
+  return Math.round((parseDay(end).getTime() - parseDay(start).getTime()) / 86_400_000) + 1;
+}
+export function eachDay(start: string, end: string): string[] {
+  const days: string[] = [];
+  for (let key = start; key <= end; key = addDays(key, 1)) days.push(key);
+  return days;
+}
+export function todayKey(): string {
+  return localDateKey(new Date());
+}
+/** Resolve a preset against today. "All time" starts at the first day with any usage. */
+export function presetRange(preset: Exclude<RangePreset, "custom">, firstDay: string | undefined): DateRange {
+  const end = todayKey();
+  const today = parseDay(end);
+  let start = end;
+  let last = end;
+  if (preset === "7d") start = addDays(end, -6);
+  else if (preset === "30d") start = addDays(end, -29);
+  else if (preset === "90d") start = addDays(end, -89);
+  else if (preset === "month") start = localDateKey(new Date(today.getFullYear(), today.getMonth(), 1));
+  else if (preset === "last-month") {
+    start = localDateKey(new Date(today.getFullYear(), today.getMonth() - 1, 1));
+    last = localDateKey(new Date(today.getFullYear(), today.getMonth(), 0));
+  } else if (preset === "year") start = `${today.getFullYear()}-01-01`;
+  else start = firstDay && firstDay < end ? firstDay : end;
+  return { preset, start, end: last };
+}
+/** The span of equal length immediately before this one, for period-over-period deltas. */
+export function previousRange(range: DateRange): { start: string; end: string; days: number } | null {
+  if (range.preset === "all") return null;
+  const days = daysInRange(range.start, range.end);
+  return { start: addDays(range.start, -days), end: addDays(range.start, -1), days };
+}
+export function rangeLabel(range: DateRange): string {
+  return RANGE_PRESETS.find((p) => p.id === range.preset)?.label ?? "Custom range";
+}
+export function formatDay(key: string, withYear = false): string {
+  return parseDay(key).toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    ...(withYear ? { year: "numeric" } : {}),
+  });
+}
+export function formatSpan(start: string, end: string): string {
+  if (start === end) return formatDay(start, true);
+  const sameYear = start.slice(0, 4) === end.slice(0, 4);
+  return `${formatDay(start, !sameYear)} – ${formatDay(end, true)}`;
+}