token-larper 1.0.0

package/src/client/views/Overview.tsx

@@ -0,0 +1,280 @@
+import React, { useMemo, useState } from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import type { TimePeriodRow } from "../../types.ts";
+import { ActivityCalendar, TOKEN_TYPE_SERIES, UsageBarChart, formatPeriodLabel, type ChartMode } from "../charts.tsx";
+import { ShareBar, ToolTag, pct, useDashboard } from "../context.tsx";
+import { KpiCards } from "../components/KpiCards.tsx";
+import { bucketize, daysInRange, harnessTotals, summarize, type Bucket } from "../lib/aggregate.ts";
+import { formatCompactNumber, formatCurrency } from "../utils.ts";
+
+const BUCKETS: { id: Bucket; label: string }[] = [
+  { id: "daily", label: "Daily" },
+  { id: "weekly", label: "Weekly" },
+  { id: "monthly", label: "Monthly" },
+];
+
+const MODES: { id: ChartMode; label: string }[] = [
+  { id: "tokens-by-harness", label: "Tokens by tool" },
+  { id: "cost-by-harness", label: "Cost" },
+  { id: "token-types", label: "Token mix" },
+];
+
+function Segmented<T extends string>({ label, value, options, onChange }: {
+  label: string;
+  value: T;
+  options: { id: T; label: string }[];
+  onChange: (v: T) => void;
+}) {
+  return (
+    <div className="segmented" role="group" aria-label={label}>
+      {options.map((o) => (
+        <button key={o.id} type="button" aria-pressed={value === o.id} onClick={() => onChange(o.id)}>
+          {o.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export function Overview({ bucket, setBucket }: { bucket: Bucket; setBucket: (b: Bucket) => void }) {
+  const { data, days, range, harness, setHarness, costOf, estimated, series, seriesOf } = useDashboard();
+  const [mode, setMode] = useState<ChartMode>("tokens-by-harness");
+  const [expanded, setExpanded] = useState<Record<string, boolean>>({});
+
+  const rows = useMemo(() => bucketize(days, bucket, range.start, range.end), [days, bucket, range.start, range.end]);
+  const activeRows = useMemo(() => rows.filter((r) => r.totalTokens > 0), [rows]);
+  const totals = useMemo(() => summarize(days), [days]);
+  const tools = useMemo(() => harnessTotals(days), [days]);
+  // The calendar keeps its own 26-week window and shades the selected range inside it.
+  const calendarDays = useMemo(() => daysInRange(data.daily, harness, "0000-00-00", "9999-99-99"), [data.daily, harness]);
+
+  const legend = useMemo(() => {
+    if (mode === "token-types") return TOKEN_TYPE_SERIES;
+    const present = new Set(tools.map((t) => seriesOf(t.harness).key));
+    return series.filter((s) => present.has(s.key));
+  }, [mode, tools, series, seriesOf]);
+
+  function openPeriod(row: TimePeriodRow) {
+    if (row.totalTokens <= 0) return;
+    setExpanded((prev) => ({ ...prev, [row.period]: true }));
+    requestAnimationFrame(() =>
+      document.getElementById(`period-${row.period}`)?.scrollIntoView({ behavior: "smooth", block: "center" })
+    );
+  }
+
+  const toggle = (period: string) => setExpanded((prev) => ({ ...prev, [period]: !prev[period] }));
+  const maxTool = tools[0]?.totalTokens ?? 0;
+  const mix = [
+    { ...TOKEN_TYPE_SERIES[0]!, value: totals.cacheReadTokens },
+    { ...TOKEN_TYPE_SERIES[1]!, value: totals.inputTokens },
+    { ...TOKEN_TYPE_SERIES[2]!, value: totals.outputTokens },
+    { ...TOKEN_TYPE_SERIES[3]!, value: totals.cacheCreationTokens },
+  ];
+  const bucketNoun = { daily: "days", weekly: "weeks", monthly: "months" }[bucket];
+
+  return (
+    <>
+      <KpiCards />
+
+      <section className="panel">
+        <header className="panel-head">
+          <div>
+            <h2>Usage over time</h2>
+            <p>
+              {rows.length} {bucketNoun}, {activeRows.length} with usage. Hover for a breakdown, click a bar to see its models.
+            </p>
+          </div>
+          <div className="panel-controls">
+            <Segmented label="Group by" value={bucket} options={BUCKETS} onChange={setBucket} />
+            <Segmented label="Chart shows" value={mode} options={MODES} onChange={setMode} />
+          </div>
+        </header>
+        <UsageBarChart
+          rows={rows}
+          mode={mode}
+          granularity={bucket}
+          costOf={costOf}
+          series={series}
+          seriesOf={seriesOf}
+          onSelect={openPeriod}
+        />
+        <div className="legend">
+          {legend.map((s) => (
+            <span key={s.key} className="legend-item">
+              <i style={{ background: s.color }} aria-hidden="true" /> {s.name}
+            </span>
+          ))}
+        </div>
+      </section>
+
+      <div className="split overview-split">
+        <section className="panel">
+          <header className="panel-head">
+            <div>
+              <h2>Usage by tool</h2>
+              <p>{harness === "all" ? "Select a tool to filter the whole dashboard." : "Select again to show all tools."}</p>
+            </div>
+          </header>
+          {tools.length === 0 ? (
+            <p className="muted">No usage in this range.</p>
+          ) : (
+            <div className="table-scroll">
+              <table className="table table-compact">
+                <thead>
+                  <tr>
+                    <th>Tool</th>
+                    <th className="bar-col"><span className="sr-only">Share</span></th>
+                    <th className="num">Tokens</th>
+                    <th className="num">Share</th>
+                    <th className="num">{estimated ? "Est. value" : "Cost"}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {tools.map((t) => (
+                    <tr
+                      key={t.harness}
+                      className={`row-button ${harness === t.harness ? "is-selected" : ""}`}
+                      onClick={() => setHarness(harness === t.harness ? "all" : t.harness)}
+                    >
+                      <td>
+                        {/* The row handles the click; the button gives it a keyboard and screen-reader target. */}
+                        <button type="button" className="cell-button" aria-pressed={harness === t.harness}>
+                          <ToolTag id={t.harness} />
+                        </button>
+                        <span className="cell-note">{t.models[0]?.modelName ?? ""}</span>
+                      </td>
+                      <td className="bar-col"><ShareBar value={t.totalTokens} max={maxTool} color={seriesOf(t.harness).color} /></td>
+                      <td className="num">{formatCompactNumber(t.totalTokens)}</td>
+                      <td className="num muted">{pct(t.totalTokens, totals.totalTokens)}</td>
+                      <td className="num">{formatCurrency(costOf(t))}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </section>
+
+        <section className="panel">
+          <header className="panel-head">
+            <div>
+              <h2>Token mix</h2>
+              <p>Where the {formatCompactNumber(totals.totalTokens)} tokens in this range went.</p>
+            </div>
+          </header>
+          <div className="mix-bar" aria-hidden="true">
+            {mix.filter((m) => m.value > 0).map((m) => (
+              <span key={m.key} style={{ flexGrow: m.value, background: m.color }} />
+            ))}
+          </div>
+          <dl className="mix-list">
+            {mix.map((m) => (
+              <div key={m.key}>
+                <dt><i style={{ background: m.color }} aria-hidden="true" />{m.name}</dt>
+                <dd>
+                  <strong>{formatCompactNumber(m.value)}</strong>
+                  <span>{pct(m.value, totals.totalTokens)}</span>
+                </dd>
+              </div>
+            ))}
+            <div>
+              <dt><i className="swatch-none" aria-hidden="true" />Reasoning (within output)</dt>
+              <dd><strong>{formatCompactNumber(totals.reasoningOutputTokens)}</strong><span /></dd>
+            </div>
+          </dl>
+        </section>
+      </div>
+
+      <section className="panel" aria-labelledby="daily-activity-heading">
+        <header className="panel-head">
+          <div>
+            <h2 id="daily-activity-heading">Daily activity</h2>
+          </div>
+        </header>
+        <ActivityCalendar days={calendarDays} costOf={costOf} rangeStart={range.start} rangeEnd={range.end} />
+      </section>
+
+      <section className="panel">
+        <header className="panel-head">
+          <div>
+            <h2>Period details</h2>
+            <p>{activeRows.length} {bucketNoun} with usage. Expand a row for its tools and models.</p>
+          </div>
+        </header>
+        <div className="table-scroll">
+          <table className="table">
+            <thead>
+              <tr>
+                <th>Period</th>
+                <th>Tools</th>
+                <th className="num">Input</th>
+                <th className="num">Output</th>
+                <th className="num">Cache read</th>
+                <th className="num">Cache write</th>
+                <th className="num">Total</th>
+                <th className="num">{estimated ? "Est. value" : "Cost"}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {[...activeRows].reverse().map((row) => {
+                const open = Boolean(expanded[row.period]);
+                const entries = Object.values(row.byHarness).sort((a, b) => b.totalTokens - a.totalTokens);
+                return (
+                  <React.Fragment key={row.period}>
+                    <tr
+                      id={`period-${row.period}`}
+                      className={`row-button ${open ? "is-open" : ""}`}
+                      onClick={() => toggle(row.period)}
+                    >
+                      <td className="nowrap">
+                        <button type="button" className="cell-button" aria-expanded={open}>
+                          {open ? <ChevronDown size={14} aria-hidden="true" /> : <ChevronRight size={14} aria-hidden="true" />}
+                          <strong>{formatPeriodLabel(row, bucket)}</strong>
+                        </button>
+                      </td>
+                      <td>
+                        <div className="tag-row">{entries.map((hb) => <ToolTag key={hb.harness} id={hb.harness} />)}</div>
+                      </td>
+                      <td className="num">{formatCompactNumber(row.inputTokens)}</td>
+                      <td className="num">{formatCompactNumber(row.outputTokens)}</td>
+                      <td className="num">{formatCompactNumber(row.cacheReadTokens)}</td>
+                      <td className="num">{formatCompactNumber(row.cacheCreationTokens)}</td>
+                      <td className="num strong">{formatCompactNumber(row.totalTokens)}</td>
+                      <td className="num strong">{formatCurrency(costOf(row))}</td>
+                    </tr>
+                    {open && (
+                      <tr className="detail-row">
+                        <td colSpan={8}>
+                          <div className="detail-grid">
+                            {entries.map((hb) => (
+                              <div key={hb.harness} className="detail-card">
+                                <div className="detail-head">
+                                  <ToolTag id={hb.harness} />
+                                  <span>{formatCompactNumber(hb.totalTokens)} tokens</span>
+                                  <span>{formatCurrency(costOf(hb))}</span>
+                                </div>
+                                <ul>
+                                  {[...hb.models].sort((a, b) => b.totalTokens - a.totalTokens).map((m) => (
+                                    <li key={m.modelName}>
+                                      <code>{m.modelName}</code>
+                                      <span>{formatCompactNumber(m.totalTokens)}</span>
+                                      <span>{formatCurrency(costOf(m))}</span>
+                                    </li>
+                                  ))}
+                                </ul>
+                              </div>
+                            ))}
+                          </div>
+                        </td>
+                      </tr>
+                    )}
+                  </React.Fragment>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </>
+  );
+}

package/src/client/views/Projects.tsx

@@ -0,0 +1,88 @@
+import React, { useMemo, useState } from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { ShareBar, ToolTag, pct, useDashboard } from "../context.tsx";
+import { groupProjects } from "../lib/aggregate.ts";
+import { formatCompactNumber, formatCurrency } from "../utils.ts";
+import { SessionTable, matchesSession, sessionWhen } from "./Sessions.tsx";
+
+export function Projects() {
+  const { sessions, search, costOf, estimated, nameOf } = useDashboard();
+  const [open, setOpen] = useState<string | null>(null);
+  const q = search.trim().toLowerCase();
+  const all = useMemo(() => groupProjects(sessions), [sessions]);
+  const projects = useMemo(
+    () => (q ? all.filter((p) => p.name.toLowerCase().includes(q) || p.sessions.some((s) => matchesSession(s, q))) : all),
+    [all, q]
+  );
+  const total = all.reduce((acc, p) => acc + p.totalTokens, 0);
+  const attributed = all.filter((p) => p.root).reduce((acc, p) => acc + p.totalTokens, 0);
+  const max = all[0]?.totalTokens ?? 0;
+
+  return (
+    <section className="panel">
+      <header className="panel-head">
+        <div>
+          <h2>Projects</h2>
+          <p>
+            Sessions grouped by repository. {pct(attributed, total, 0)} of tokens in this range are tied to a project;
+            tools that don't record a working directory are listed separately.
+          </p>
+        </div>
+      </header>
+      {projects.length === 0 ? (
+        <p className="muted">No sessions in this range.</p>
+      ) : (
+        <div className="table-scroll">
+          <table className="table">
+            <thead>
+              <tr>
+                <th>Project</th>
+                <th>Tools</th>
+                <th className="bar-col"><span className="sr-only">Share</span></th>
+                <th className="num">Sessions</th>
+                <th className="num">Tokens</th>
+                <th className="num">Share</th>
+                <th className="num">{estimated ? "Est. value" : "Cost"}</th>
+                <th>Last active</th>
+              </tr>
+            </thead>
+            <tbody>
+              {projects.map((p) => {
+                const isOpen = open === p.key;
+                return (
+                  <React.Fragment key={p.key}>
+                    <tr className={`row-button ${isOpen ? "is-open" : ""}`} onClick={() => setOpen(isOpen ? null : p.key)}>
+                      <td className="project-cell">
+                        <button type="button" className="cell-button" aria-expanded={isOpen}>
+                          {isOpen ? <ChevronDown size={14} aria-hidden="true" /> : <ChevronRight size={14} aria-hidden="true" />}
+                          <strong className={p.root ? "" : "muted"}>
+                            {p.root ? p.name : `No project recorded · ${nameOf(p.harnesses[0]!)}`}
+                          </strong>
+                        </button>
+                        {p.root && <span className="cell-note" title={p.root}>{p.root}</span>}
+                      </td>
+                      <td><div className="tag-row">{p.harnesses.map((h) => <ToolTag key={h} id={h} />)}</div></td>
+                      <td className="bar-col"><ShareBar value={p.totalTokens} max={max} /></td>
+                      <td className="num">{p.sessions.length}</td>
+                      <td className="num strong">{formatCompactNumber(p.totalTokens)}</td>
+                      <td className="num muted">{pct(p.totalTokens, total)}</td>
+                      <td className="num">{formatCurrency(costOf(p))}</td>
+                      <td className="nowrap muted">{sessionWhen(p.sessions[0]!)}</td>
+                    </tr>
+                    {isOpen && (
+                      <tr className="detail-row">
+                        <td colSpan={8}>
+                          <SessionTable sessions={p.sessions} showProject={false} />
+                        </td>
+                      </tr>
+                    )}
+                  </React.Fragment>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </section>
+  );
+}

package/src/client/views/Rank.tsx

@@ -0,0 +1,255 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import {
+  Banknote,
+  Boxes,
+  CalendarDays,
+  Coins,
+  Copy,
+  Database,
+  Download,
+  Fish,
+  Flame,
+  FolderGit2,
+  Heart,
+  Languages,
+  Moon,
+  Share2,
+  Shield,
+  Sparkles,
+  Trophy,
+  Waves,
+  X,
+  type LucideIcon,
+} from "lucide-react";
+import { useDashboard } from "../context.tsx";
+import { achievements, lastDefeated, lifetimeStats, nextRival, rankFor, TIERS } from "../lib/rank.ts";
+import { cardPng, shareCardSvg, svgDataUrl, themeCardColors } from "../lib/shareCard.ts";
+import { formatCompactNumber, formatCurrency } from "../utils.ts";
+
+const TROPHY_ICONS: Record<string, LucideIcon> = {
+  billion: Trophy,
+  "ten-billion": Sparkles,
+  "streak-7": Flame,
+  "streak-30": Shield,
+  "night-owl": Moon,
+  polyglot: Languages,
+  whale: Fish,
+  leviathan: Waves,
+  "big-spender": Banknote,
+  "free-lunch": Coins,
+  weekend: CalendarDays,
+  "cache-goblin": Database,
+  hopper: FolderGit2,
+  collector: Boxes,
+  loyalist: Heart,
+};
+
+function ShareDialog({ svg, showCost, setShowCost, onClose }: {
+  svg: string;
+  showCost: boolean;
+  setShowCost: (v: boolean) => void;
+  onClose: () => void;
+}) {
+  const [status, setStatus] = useState("");
+  const closeRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    const previous = document.activeElement as HTMLElement | null;
+    closeRef.current?.focus();
+    const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose();
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      previous?.focus();
+    };
+  }, [onClose]);
+
+  async function download() {
+    try {
+      const url = URL.createObjectURL(await cardPng(svg));
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `token-larper-rank-${new Date().toISOString().slice(0, 10)}.png`;
+      a.click();
+      setTimeout(() => URL.revokeObjectURL(url), 1000);
+      setStatus("Saved to your downloads.");
+    } catch {
+      setStatus("Couldn't create the image.");
+    }
+  }
+
+  async function copy() {
+    try {
+      await navigator.clipboard.write([new ClipboardItem({ "image/png": await cardPng(svg) })]);
+      setStatus("Copied. Paste it anywhere.");
+    } catch {
+      setStatus("Your browser blocked copying. Download it instead.");
+    }
+  }
+
+  return (
+    <div className="modal-backdrop" onClick={onClose}>
+      <div className="modal share-dialog" role="dialog" aria-modal="true" aria-labelledby="share-title" onClick={(e) => e.stopPropagation()}>
+        <header className="modal-header">
+          <div>
+            <h3 id="share-title">Share your rank</h3>
+            <p>A 1200 × 630 image. It never includes project names or file paths.</p>
+          </div>
+          <button ref={closeRef} className="icon-btn" aria-label="Close" onClick={onClose}>
+            <X size={17} />
+          </button>
+        </header>
+        <div className="share-body">
+          <img className="share-preview" src={svgDataUrl(svg)} alt="Preview of your share card" />
+        </div>
+        <footer className="share-actions">
+          <label className="check">
+            <input type="checkbox" checked={showCost} onChange={(e) => setShowCost(e.target.checked)} />
+            Include verified cost
+          </label>
+          <span className="share-status" role="status">{status}</span>
+          <button className="btn" onClick={() => void copy()}>
+            <Copy size={14} aria-hidden="true" /> Copy
+          </button>
+          <button className="btn btn-primary" onClick={() => void download()}>
+            <Download size={14} aria-hidden="true" /> Download PNG
+          </button>
+        </footer>
+      </div>
+    </div>
+  );
+}
+
+export function Rank() {
+  const { data, nameOf } = useDashboard();
+  const stats = useMemo(() => lifetimeStats(data), [data]);
+  const rank = rankFor(stats.tokens);
+  const badges = useMemo(() => achievements(data, stats), [data, stats]);
+  const earned = badges.filter((b) => b.earned).length;
+  // Earned first, then locked by how close they are, so the row reads left to right.
+  const ordered = useMemo(
+    () =>
+      [...badges].sort((a, b) =>
+        a.earned !== b.earned ? (a.earned ? -1 : 1) : b.progress.current / b.progress.target - a.progress.current / a.progress.target
+      ),
+    [badges]
+  );
+  const closest = ordered.find((b) => !b.earned) ?? null;
+  const rival = nextRival(stats.tokens);
+  const floor = lastDefeated(stats.tokens)?.tokens ?? 0;
+  const rivalPct = rival ? Math.min(100, ((stats.tokens - floor) / (rival.tokens - floor)) * 100) : 100;
+
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [sharing, setSharing] = useState(false);
+  const [showCost, setShowCost] = useState(false);
+  const closeShare = React.useCallback(() => setSharing(false), []);
+  const selected = badges.find((b) => b.id === selectedId) ?? closest;
+
+  // Read the theme when the dialog opens, so the card matches the active palette and mode.
+  const svg = useMemo(
+    () =>
+      sharing
+        ? shareCardSvg(
+            stats,
+            {
+              showCost,
+              earnedBadges: earned,
+              totalBadges: badges.length,
+              topToolName: stats.topTool ? nameOf(stats.topTool.id) : null,
+            },
+            themeCardColors()
+          )
+        : "",
+    [sharing, stats, showCost, earned, badges.length, nameOf]
+  );
+
+  const numbers = [
+    { label: "Tokens", value: formatCompactNumber(stats.tokens) },
+    { label: "Best streak", value: `${stats.longestStreak?.days ?? 0} days` },
+    { label: "Tools", value: String(stats.toolCount) },
+    { label: "Spent", value: formatCurrency(stats.verifiedCost, 0) },
+  ];
+
+  return (
+    <article className="sheet" aria-labelledby="sheet-title">
+      <header className="sheet-head">
+        <div className="sheet-level" aria-label={`Level ${rank.tier.level} of ${TIERS.length}`}>
+          <span aria-hidden="true">Lv</span>
+          <strong aria-hidden="true">{rank.tier.level}</strong>
+        </div>
+        <div className="sheet-identity">
+          <h2 id="sheet-title">{rank.tier.title}</h2>
+          <span
+            className="xp-bar"
+            role="meter"
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={Math.round(rank.progress)}
+            aria-label={rank.next ? `Progress to ${rank.next.title}` : "Maximum level"}
+          >
+            <span style={{ width: `${rank.progress}%` }} />
+          </span>
+          <span className="xp-label">
+            {rank.next ? `${formatCompactNumber(rank.toNext)} to ${rank.next.title}` : "Maximum level"}
+          </span>
+        </div>
+        <button className="icon-btn sheet-share" onClick={() => setSharing(true)} aria-label="Share your rank" title="Share">
+          <Share2 size={16} />
+        </button>
+      </header>
+
+      <dl className="sheet-numbers">
+        {numbers.map((n) => (
+          <div key={n.label}>
+            <dt>{n.label}</dt>
+            <dd>{n.value}</dd>
+          </div>
+        ))}
+      </dl>
+
+      {rival && (
+        <section className="sheet-row" aria-label="Next rival">
+          <span className="sheet-row-label">Next rival</span>
+          <div className="sheet-rival">
+            <strong>{rival.name}</strong>
+            <span className="rival-bar" aria-hidden="true"><span style={{ width: `${rivalPct}%` }} /></span>
+          </div>
+          <span className="sheet-row-value">{formatCompactNumber(rival.tokens - stats.tokens)} to go</span>
+        </section>
+      )}
+
+      <section className="sheet-row sheet-badges" aria-label="Badges">
+        <span className="sheet-row-label">Badges <span>{earned}/{badges.length}</span></span>
+        <div>
+          <ul className="seals">
+            {ordered.map((b) => {
+              const Icon = TROPHY_ICONS[b.id] ?? Trophy;
+              return (
+                <li key={b.id}>
+                  <button
+                    type="button"
+                    className={`seal ${b.earned ? "is-earned" : ""}`}
+                    aria-pressed={selected?.id === b.id}
+                    aria-label={`${b.name}, ${b.earned ? "earned" : `locked, ${b.progress.label}`}`}
+                    title={b.name}
+                    onClick={() => setSelectedId(b.id)}
+                  >
+                    <Icon size={16} aria-hidden="true" />
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
+          {selected && (
+            <p className="seal-detail" aria-live="polite">
+              <strong>{selected.name}</strong> {selected.requirement}{" "}
+              <span>{selected.earned ? selected.detail : selected.progress.label}</span>
+            </p>
+          )}
+        </div>
+      </section>
+
+      {sharing && <ShareDialog svg={svg} showCost={showCost} setShowCost={setShowCost} onClose={closeShare} />}
+    </article>
+  );
+}