token-larper 1.0.0

package/src/client/views/Sessions.tsx

@@ -0,0 +1,108 @@
+import React, { useMemo, useState } from "react";
+import type { SessionEntry } from "../../types.ts";
+import { ToolTag, useDashboard } from "../context.tsx";
+import { formatDay } from "../lib/range.ts";
+import { cleanProjectPath, formatCompactNumber, formatCurrency } from "../utils.ts";
+
+const PAGE = 100;
+
+export function sessionWhen(s: SessionEntry): string {
+  if (s.lastActivity) {
+    return new Date(s.lastActivity).toLocaleString("en-US", { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" });
+  }
+  return s.date === "Unknown" ? "Unknown" : formatDay(s.date, true);
+}
+
+export function matchesSession(s: SessionEntry, q: string): boolean {
+  return (
+    (s.projectRoot ?? s.projectPath).toLowerCase().includes(q) ||
+    s.modelsUsed.some((m) => m.toLowerCase().includes(q)) ||
+    s.harness.includes(q)
+  );
+}
+
+export function SessionTable({ sessions, showProject = true }: { sessions: SessionEntry[]; showProject?: boolean }) {
+  const { costOf, estimated } = useDashboard();
+  const [limit, setLimit] = useState(PAGE);
+  const shown = sessions.slice(0, limit);
+
+  return (
+    <>
+      <div className="table-scroll">
+        <table className="table">
+          <thead>
+            <tr>
+              <th>Last active</th>
+              <th>Tool</th>
+              {showProject && <th>Project</th>}
+              <th>Models</th>
+              <th className="num">Input</th>
+              <th className="num">Output</th>
+              <th className="num">Cache read</th>
+              <th className="num">Total</th>
+              <th className="num">{estimated ? "Est. value" : "Cost"}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {shown.map((s) => (
+              <tr key={s.id}>
+                <td className="nowrap">{sessionWhen(s)}</td>
+                <td><ToolTag id={s.harness} /></td>
+                {showProject && (
+                  <td className="project-cell" title={s.cwd ?? s.projectPath}>
+                    {s.projectName ? (
+                      <>
+                        <strong>{s.projectName}</strong>
+                        <span className="cell-note">{s.projectRoot}</span>
+                      </>
+                    ) : (
+                      <span className="muted">{cleanProjectPath(s.projectPath)}</span>
+                    )}
+                  </td>
+                )}
+                <td>
+                  <div className="tag-row">
+                    {s.modelsUsed.slice(0, 3).map((m) => <code key={m} className="model-name">{m}</code>)}
+                    {s.modelsUsed.length > 3 && <span className="muted">+{s.modelsUsed.length - 3}</span>}
+                  </div>
+                </td>
+                <td className="num">{formatCompactNumber(s.inputTokens)}</td>
+                <td className="num">{formatCompactNumber(s.outputTokens)}</td>
+                <td className="num">{formatCompactNumber(s.cacheReadTokens)}</td>
+                <td className="num strong">{formatCompactNumber(s.totalTokens)}</td>
+                <td className="num">{formatCurrency(costOf(s))}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      {sessions.length > limit && (
+        <div className="table-more">
+          <span className="muted">Showing {limit} of {sessions.length}</span>
+          <button className="btn" onClick={() => setLimit((n) => n + PAGE)}>Show {Math.min(PAGE, sessions.length - limit)} more</button>
+        </div>
+      )}
+    </>
+  );
+}
+
+export function Sessions() {
+  const { sessions, search } = useDashboard();
+  const q = search.trim().toLowerCase();
+  const list = useMemo(() => (q ? sessions.filter((s) => matchesSession(s, q)) : sessions), [sessions, q]);
+
+  return (
+    <section className="panel">
+      <header className="panel-head">
+        <div>
+          <h2>Sessions</h2>
+          <p>
+            {list.length} {list.length === 1 ? "session" : "sessions"}
+            {q ? ` matching “${search.trim()}”` : ""}, newest first. A session counts toward the day it was last active.
+          </p>
+        </div>
+      </header>
+      {list.length === 0 ? <p className="muted">No sessions in this range.</p> : <SessionTable key={q} sessions={list} />}
+    </section>
+  );
+}

package/src/client/views/Tools.tsx

@@ -0,0 +1,114 @@
+import React, { useMemo, useState } from "react";
+import { ShareBar, ToolTag, pct, useDashboard } from "../context.tsx";
+import { harnessTotals, summarize } from "../lib/aggregate.ts";
+import { formatDay } from "../lib/range.ts";
+import { formatCompactNumber, formatCurrency } from "../utils.ts";
+
+export function Tools() {
+  const { data, days, harness, setHarness, costOf, estimated, seriesOf } = useDashboard();
+  const [showAll, setShowAll] = useState(false);
+  const tools = useMemo(() => harnessTotals(days), [days]);
+  const total = useMemo(() => summarize(days).totalTokens, [days]);
+  const withUsage = new Set(tools.map((t) => t.harness));
+  const idle = data.harnesses.filter((h) => !withUsage.has(h.meta.id) && (showAll || h.meta.installed || h.meta.hasUsage));
+  const maxTokens = tools[0]?.totalTokens ?? 0;
+
+  return (
+    <>
+      <section className="panel">
+        <header className="panel-head">
+          <div>
+            <h2>Tools with usage</h2>
+            <p>Select a tool to filter the whole dashboard to it.</p>
+          </div>
+        </header>
+        {tools.length === 0 ? (
+          <p className="muted">No tool recorded usage in this range.</p>
+        ) : (
+          <div className="table-scroll">
+            <table className="table">
+              <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>
+                  <th className="num">Active days</th>
+                  <th className="num">Cache read</th>
+                  <th>Top model</th>
+                  <th>Last active</th>
+                </tr>
+              </thead>
+              <tbody>
+                {tools.map((t) => {
+                  const meta = data.harnesses.find((h) => h.meta.id === t.harness)?.meta;
+                  return (
+                    <tr
+                      key={t.harness}
+                      className={`row-button ${harness === t.harness ? "is-selected" : ""}`}
+                      onClick={() => setHarness(harness === t.harness ? "all" : t.harness)}
+                    >
+                      <td>
+                        <button type="button" className="cell-button" aria-pressed={harness === t.harness}>
+                          <ToolTag id={t.harness} />
+                        </button>
+                        <span className="cell-note">{meta?.vendor}</span>
+                      </td>
+                      <td className="bar-col"><ShareBar value={t.totalTokens} max={maxTokens} color={seriesOf(t.harness).color} /></td>
+                      <td className="num strong">{formatCompactNumber(t.totalTokens)}</td>
+                      <td className="num muted">{pct(t.totalTokens, total)}</td>
+                      <td className="num">{formatCurrency(costOf(t))}</td>
+                      <td className="num">{t.activeDays}</td>
+                      <td className="num">{t.cacheHitRate.toFixed(1)}%</td>
+                      <td><code className="model-name">{t.models[0]?.modelName ?? "—"}</code></td>
+                      <td className="nowrap muted">{t.lastActive ? formatDay(t.lastActive, true) : "—"}</td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </section>
+
+      <section className="panel">
+        <header className="panel-head">
+          <div>
+            <h2>No usage in this range</h2>
+            <p>
+              {showAll
+                ? `All ${data.totals.totalHarnesses} tools Token Larper can read.`
+                : "Tools found on this computer that were idle in the selected range."}
+            </p>
+          </div>
+          <button className="btn" onClick={() => setShowAll((v) => !v)}>
+            {showAll ? "Only installed tools" : `Show all ${data.totals.totalHarnesses} supported tools`}
+          </button>
+        </header>
+        {idle.length === 0 ? (
+          <p className="muted">Every installed tool has usage in this range.</p>
+        ) : (
+          <ul className="idle-list">
+            {idle.map((h) => (
+              <li key={h.meta.id}>
+                <div>
+                  <strong>{h.meta.name}</strong>
+                  <span className="muted">{h.meta.vendor}</span>
+                </div>
+                <code>{h.meta.configPathHint}</code>
+                <span className={`status ${h.meta.installed ? "status-installed" : "status-missing"}`}>
+                  {h.meta.installed
+                    ? h.lastActiveDate
+                      ? `Installed · last used ${formatDay(h.lastActiveDate, true)}`
+                      : "Installed · never used"
+                    : "Not detected"}
+                </span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+    </>
+  );
+}

package/src/projects.ts

@@ -0,0 +1,214 @@
+import { Database } from "bun:sqlite";
+import { closeSync, existsSync, mkdirSync, openSync, readdirSync, readFileSync, readSync, writeFileSync } from "node:fs";
+import { homedir } from "node:os";
+import { basename, dirname, join, resolve } from "node:path";
+import type { HarnessId } from "./types.ts";
+
+// ccusage reports a usable project for only some harnesses, so the working directory is
+// read from each harness's own session files. A session's cwd never changes, so found
+// directories are also saved to disk; misses are retried once per process.
+
+const HOME = homedir();
+const cwdCache = new Map<string, string | null>();
+const repoCache = new Map<string, string | null>();
+const CACHE_FILE = join(resolve(import.meta.dir, ".."), ".cache", "session-projects.json");
+let diskLoaded = false;
+let dirty = false;
+let opencodeDirs: Map<string, { directory: string; updated: number }> | null = null;
+
+export interface SessionProject {
+  cwd: string;
+  root: string;
+  name: string;
+}
+
+function readHead(path: string, bytes = 64 * 1024): string {
+  const fd = openSync(path, "r");
+  try {
+    const buf = Buffer.alloc(bytes);
+    const n = readSync(fd, buf, 0, bytes, 0);
+    return buf.toString("utf8", 0, n);
+  } finally {
+    closeSync(fd);
+  }
+}
+
+function firstCwd(path: string): string | null {
+  if (!existsSync(path)) return null;
+  const match = readHead(path).match(/"cwd"\s*:\s*"((?:[^"\\]|\\.)*)"/);
+  return match ? (JSON.parse(`"${match[1]}"`) as string) : null;
+}
+
+function loadOpencode(): Map<string, { directory: string; updated: number }> {
+  if (opencodeDirs) return opencodeDirs;
+  opencodeDirs = new Map();
+  const dbPath = join(HOME, ".local", "share", "opencode", "opencode.db");
+  if (!existsSync(dbPath)) return opencodeDirs;
+  try {
+    const db = new Database(dbPath, { readonly: true });
+    const rows = db.query("select id, directory, time_updated from session").all() as {
+      id: string;
+      directory: string | null;
+      time_updated: number | null;
+    }[];
+    for (const r of rows) {
+      if (r.directory) opencodeDirs.set(r.id, { directory: r.directory, updated: r.time_updated ?? 0 });
+    }
+    db.close();
+  } catch {
+    // An older OpenCode without the SQLite store, or a locked file: leave unattributed.
+  }
+  return opencodeDirs;
+}
+
+/** OpenCode sessions carry no timestamps in ccusage output; its own store has them. */
+export function opencodeSessionUpdated(sessionId: string): number | null {
+  return loadOpencode().get(sessionId)?.updated || null;
+}
+
+// The IDE, the CLI and older installs each keep their own store.
+const ANTIGRAVITY_DIRS = ["antigravity", "antigravity-ide", "antigravity-cli"].map((d) => join(HOME, ".gemini", d));
+let antigravityWorkspaces: Map<string, string> | null = null;
+
+function fileUriToPath(uri: string): string | null {
+  try {
+    const path = decodeURIComponent(uri.replace(/^file:\/\/\//, ""));
+    return /^[a-zA-Z]:\//.test(path) ? path : `/${path}`;
+  } catch {
+    return null;
+  }
+}
+
+/** Antigravity lists workspaces for some conversations in its summary table. */
+function loadAntigravityWorkspaces(): Map<string, string> {
+  if (antigravityWorkspaces) return antigravityWorkspaces;
+  antigravityWorkspaces = new Map();
+  for (const dir of ANTIGRAVITY_DIRS) {
+    const dbPath = join(dir, "conversation_summaries.db");
+    if (!existsSync(dbPath)) continue;
+    try {
+      const db = new Database(dbPath, { readonly: true });
+      const rows = db.query("select conversation_id, workspace_uris from conversation_summaries").all() as {
+        conversation_id: string;
+        workspace_uris: string;
+      }[];
+      for (const r of rows) {
+        const first = (JSON.parse(r.workspace_uris || "[]") as string[])[0];
+        const path = first ? fileUriToPath(first) : null;
+        if (path) antigravityWorkspaces.set(r.conversation_id, path);
+      }
+      db.close();
+    } catch {
+      // Unknown schema: fall back to scanning the conversation itself.
+    }
+  }
+  return antigravityWorkspaces;
+}
+
+/** Otherwise the conversation store mentions the files it touched; the most-referenced git repo wins. */
+function scanAntigravityConversation(id: string): string | null {
+  const file = ANTIGRAVITY_DIRS.flatMap((dir) => [".db", ".pb"].map((ext) => join(dir, "conversations", `${id}${ext}`))).find(existsSync);
+  if (!file) return null;
+  const dirCounts = new Map<string, number>();
+  for (const [uri] of readHead(file, 4 * 1024 * 1024).matchAll(/file:\/\/\/[A-Za-z0-9%:/_.\-]+/g)) {
+    const path = fileUriToPath(uri);
+    if (!path || /\/\.gemini\//i.test(path)) continue;
+    const dir = dirname(path);
+    dirCounts.set(dir, (dirCounts.get(dir) ?? 0) + 1);
+  }
+  const counts = new Map<string, number>();
+  for (const [dir, n] of dirCounts) {
+    const repo = repoFor(dir);
+    if (repo) counts.set(repo, (counts.get(repo) ?? 0) + n);
+  }
+  return [...counts.entries()].sort((a, b) => b[1] - a[1])[0]?.[0] ?? null;
+}
+
+function lookupCwd(harness: HarnessId, sessionId: string, projectPath: string): string | null {
+  switch (harness) {
+    case "codex":
+      return firstCwd(join(HOME, ".codex", "sessions", `${sessionId}.jsonl`));
+    case "claude":
+      return firstCwd(join(HOME, ".claude", "projects", projectPath, `${sessionId}.jsonl`));
+    case "pi": {
+      const dir = join(HOME, ".pi", "agent", "sessions", projectPath);
+      if (!existsSync(dir)) return null;
+      const file = readdirSync(dir).find((f) => f.endsWith(`_${sessionId}.jsonl`));
+      return file ? firstCwd(join(dir, file)) : null;
+    }
+    case "opencode":
+      return loadOpencode().get(sessionId)?.directory ?? null;
+    case "antigravity":
+      return loadAntigravityWorkspaces().get(sessionId) ?? scanAntigravityConversation(sessionId);
+    default:
+      return null;
+  }
+}
+
+function normalize(path: string): string {
+  const p = path.replace(/\\/g, "/").replace(/\/+$/, "");
+  return /^[a-z]:/.test(p) ? p[0]!.toUpperCase() + p.slice(1) : p;
+}
+
+/** The nearest ancestor holding a .git folder. Every folder visited is memoized, so a
+ *  directory tree is only probed once however many files point into it. */
+function repoFor(dir: string, depth = 0): string | null {
+  const key = dir.toLowerCase();
+  const cached = repoCache.get(key);
+  if (cached !== undefined) return cached;
+  let repo: string | null = null;
+  if (existsSync(join(dir, ".git"))) repo = dir;
+  else {
+    const parent = dirname(dir);
+    if (parent !== dir && depth < 12) repo = repoFor(parent, depth + 1);
+  }
+  repoCache.set(key, repo);
+  return repo;
+}
+
+function loadDiskCache(): void {
+  if (diskLoaded) return;
+  diskLoaded = true;
+  try {
+    const saved = JSON.parse(readFileSync(CACHE_FILE, "utf8")) as Record<string, string>;
+    for (const [key, cwd] of Object.entries(saved)) cwdCache.set(key, cwd);
+  } catch {
+    // First run or a damaged file: everything is looked up again.
+  }
+}
+
+/** Persist newly found directories; called after each dashboard rebuild. */
+export function saveSessionProjects(): void {
+  if (!dirty) return;
+  dirty = false;
+  const found = Object.fromEntries([...cwdCache].filter((entry): entry is [string, string] => entry[1] !== null));
+  try {
+    mkdirSync(dirname(CACHE_FILE), { recursive: true });
+    writeFileSync(CACHE_FILE, JSON.stringify(found), "utf8");
+  } catch {
+    // The cache is only an optimization.
+  }
+}
+
+export function resolveSessionProject(
+  harness: HarnessId,
+  sessionId: string,
+  projectPath: string
+): SessionProject | null {
+  loadDiskCache();
+  const key = `${harness}:${sessionId}`;
+  let cwd = cwdCache.get(key);
+  if (cwd === undefined) {
+    try {
+      cwd = lookupCwd(harness, sessionId, projectPath);
+    } catch {
+      cwd = null;
+    }
+    cwdCache.set(key, cwd);
+    if (cwd) dirty = true;
+  }
+  if (!cwd) return null;
+  // Group sessions by repository, falling back to the working directory itself.
+  const root = normalize(repoFor(cwd) ?? cwd);
+  return { cwd: normalize(cwd), root, name: basename(root) || root };
+}

package/src/server.ts

@@ -0,0 +1,173 @@
+import { join, resolve } from "node:path";
+import { getDashboardData } from "./ccusage.ts";
+import { getStartupStatus, setStartupStatus } from "./startup.ts";
+import { startSystemTray, stopSystemTray } from "./tray.ts";
+import { formatCompactNumber, formatCurrency } from "./client/utils.ts";
+
+const ROOT_DIR = resolve(import.meta.dir, "..");
+const CLIENT_DIR = join(ROOT_DIR, "src", "client");
+const PORT = Number(process.env.PORT || 4269);
+
+async function buildClientBundle(): Promise<string> {
+  const result = await Bun.build({
+    entrypoints: [join(CLIENT_DIR, "main.tsx")],
+    target: "browser",
+    format: "esm",
+    minify: true,
+    define: {
+      "process.env.NODE_ENV": JSON.stringify("production"),
+    },
+  });
+
+  if (!result.success || result.outputs.length === 0) {
+    const logs = result.logs.map((l) => l.message).join("\n");
+    throw new Error(`Client bundle build failed:\n${logs}`);
+  }
+
+  return await result.outputs[0]!.text();
+}
+
+const clientBundle = buildClientBundle();
+
+// Only this machine's own dashboard may talk to the server. Checking Host blocks
+// DNS-rebinding reads; checking Origin + Content-Type blocks cross-site POSTs.
+function isAllowedHost(host: string | null, port: number): boolean {
+  return host === `127.0.0.1:${port}` || host === `localhost:${port}`;
+}
+
+function isAllowedMutation(req: Request, port: number): boolean {
+  const origin = req.headers.get("origin");
+  if (origin) {
+    try {
+      if (!isAllowedHost(new URL(origin).host, port)) return false;
+    } catch {
+      return false;
+    }
+  }
+  // The tray (PowerShell) sends no Origin; a JSON content type still can't be sent cross-site without a preflight.
+  return (req.headers.get("content-type") || "").toLowerCase().startsWith("application/json");
+}
+
+// Warm cached usage before the first dashboard request.
+void getDashboardData();
+
+const server = Bun.serve({
+  port: PORT,
+  hostname: "127.0.0.1",
+  idleTimeout: 120,
+  async fetch(req) {
+    const url = new URL(req.url);
+    const port = server.port ?? PORT;
+
+    if (!isAllowedHost(req.headers.get("host"), port)) {
+      return new Response("Forbidden", { status: 403 });
+    }
+    if (req.method !== "GET" && req.method !== "HEAD" && !isAllowedMutation(req, port)) {
+      return new Response("Forbidden", { status: 403 });
+    }
+
+    if (url.pathname === "/" || url.pathname === "/index.html") {
+      return new Response(Bun.file(join(CLIENT_DIR, "index.html")), {
+        headers: { "Content-Type": "text/html; charset=utf-8" },
+      });
+    }
+
+    if (url.pathname === "/styles.css") {
+      return new Response(Bun.file(join(CLIENT_DIR, "styles.css")), {
+        headers: { "Content-Type": "text/css; charset=utf-8", "Cache-Control": "no-cache" },
+      });
+    }
+
+    if (url.pathname === "/logo.svg") {
+      return new Response(Bun.file(join(CLIENT_DIR, "logo.svg")), {
+        headers: { "Content-Type": "image/svg+xml; charset=utf-8" },
+      });
+    }
+
+    if (url.pathname === "/app.js") {
+      const code = process.env.NODE_ENV === "production" ? await clientBundle : await buildClientBundle();
+      return new Response(code, {
+        headers: { "Content-Type": "application/javascript; charset=utf-8", "Cache-Control": "no-cache" },
+      });
+    }
+
+    if (url.pathname === "/api/usage" && req.method === "GET") {
+      const refresh = url.searchParams.get("refresh") === "1";
+      const forceDeepScan = url.searchParams.get("deep") === "1";
+      const data = await getDashboardData({ refresh, forceDeepScan });
+      return Response.json(data);
+    }
+
+    if (url.pathname === "/api/tray-status" && req.method === "GET") {
+      const [data, startup] = await Promise.all([
+        getDashboardData({ refresh: false }),
+        getStartupStatus(PORT),
+      ]);
+      const tokStr = formatCompactNumber(data.totals.totalTokens);
+      const verStr = formatCurrency(data.totals.verifiedCost);
+      const estStr = formatCurrency(data.totals.estimatedCost);
+      return Response.json({
+        summaryText: `${tokStr} tokens · ${verStr} (${estStr} LARP) · ${data.totals.activeHarnesses} harnesses`,
+        shortTooltip: `${tokStr} tok · ${estStr} LARP`,
+        bootEnabled: startup.enabled,
+        openBrowserOnBoot: startup.openBrowserOnBoot,
+      });
+    }
+
+    if (url.pathname === "/api/startup" && req.method === "GET") {
+      const status = await getStartupStatus(PORT);
+      return Response.json(status);
+    }
+
+    if (url.pathname === "/api/startup" && req.method === "POST") {
+      let body: unknown;
+      try {
+        body = await req.json();
+      } catch {
+        return Response.json({ error: "Invalid JSON body" }, { status: 400 });
+      }
+      if (!body || typeof body !== "object" || Array.isArray(body)) {
+        return Response.json({ error: "Startup settings must be an object" }, { status: 400 });
+      }
+      const input = body as { enabled?: unknown; openBrowserOnBoot?: unknown };
+      if (typeof input.enabled !== "boolean" ||
+          (input.openBrowserOnBoot !== undefined && typeof input.openBrowserOnBoot !== "boolean")) {
+        return Response.json({ error: "Startup settings must use boolean values" }, { status: 400 });
+      }
+      try {
+        const status = await setStartupStatus({
+          enabled: input.enabled,
+          openBrowserOnBoot: input.openBrowserOnBoot as boolean | undefined,
+          port: PORT,
+        });
+        return Response.json(status);
+      } catch (error) {
+        return Response.json({ error: error instanceof Error ? error.message : "Could not update startup" }, { status: 500 });
+      }
+    }
+
+    if (url.pathname === "/api/shutdown" && req.method === "POST") {
+      setTimeout(() => {
+        stopSystemTray();
+        server.stop(true);
+        process.exit(0);
+      }, 150);
+      return Response.json({ ok: true, message: "Shutting down Token Larper..." });
+    }
+
+    return new Response("Not Found", { status: 404 });
+  },
+});
+
+startSystemTray(server.port ?? PORT);
+
+process.on("SIGINT", () => {
+  stopSystemTray();
+  process.exit(0);
+});
+process.on("SIGTERM", () => {
+  stopSystemTray();
+  process.exit(0);
+});
+
+console.log(`🔥 Token Larper running at http://localhost:${server.port} (System Tray Icon Active)`);