portable-agent-layer 0.70.0 → 0.72.0

package/src/tools/token-cost.ts

@@ -9,389 +9,29 @@
  */
 
 import { spawnSync } from "node:child_process";
-import { existsSync, readdirSync, readFileSync } from "node:fs";
 import { homedir } from "node:os";
 import { resolve } from "node:path";
 import { parseArgs } from "node:util";
-import { costOfUsage } from "../hooks/lib/models";
 import { palHome } from "../hooks/lib/paths";
 import { findBinaryOnPath } from "../hooks/lib/which";
+import { parseRtkSummary, type RtkGain, usageLines } from "./lib/token-report";
+import { readClaudeCode, readPalInference } from "./lib/usage-buckets";
 
-// ── Types ──
-
-interface Bucket {
-  input: number;
-  output: number;
-  cacheWrite5m: number;
-  cacheWrite1h: number;
-  cacheRead: number;
-  cost: number;
-  calls: number;
-}
-
-function emptyBucket(): Bucket {
-  return {
-    input: 0,
-    output: 0,
-    cacheWrite5m: 0,
-    cacheWrite1h: 0,
-    cacheRead: 0,
-    cost: 0,
-    calls: 0,
-  };
-}
-
-interface TimeBuckets {
-  today: Bucket;
-  week: Bucket;
-  month: Bucket;
-  total: Bucket;
-}
-
-function emptyTimeBuckets(): TimeBuckets {
-  return {
-    today: emptyBucket(),
-    week: emptyBucket(),
-    month: emptyBucket(),
-    total: emptyBucket(),
-  };
-}
-
-// ── Helpers ──
-
-function addToBucket(
-  bucket: Bucket,
-  model: string,
-  input: number,
-  output: number,
-  cacheWrite5m: number,
-  cacheWrite1h: number,
-  cacheRead: number
-): void {
-  bucket.input += input;
-  bucket.output += output;
-  bucket.cacheWrite5m += cacheWrite5m;
-  bucket.cacheWrite1h += cacheWrite1h;
-  bucket.cacheRead += cacheRead;
-  bucket.cost += costOfUsage(model, {
-    input,
-    output,
-    cacheWrite5m,
-    cacheWrite1h,
-    cacheRead,
-  });
-  bucket.calls++;
-}
-
-// ── Formatting ──
-
-function fmt(n: number): string {
-  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
-  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;
-  return n.toLocaleString("en-US");
-}
-
-function fmtCost(n: number): string {
-  if (n >= 1) return `$${n.toFixed(2)}`;
-  return `$${n.toFixed(4)}`;
-}
-
-function printRow(label: string, b: Bucket, labelWidth = 14): void {
-  const tokens = b.input + b.output + b.cacheWrite5m + b.cacheWrite1h + b.cacheRead;
-  console.log(
-    `  ${label.padEnd(labelWidth)} ${fmt(tokens).padStart(8)} tok  ${fmt(b.calls).padStart(5)} calls  ${fmtCost(b.cost).padStart(8)}`
-  );
-}
-
-function printDetailed(label: string, b: Bucket, labelWidth = 14): void {
-  console.log(
-    `  ${label.padEnd(labelWidth)} ${fmt(b.input).padStart(8)} in  ${fmt(b.output).padStart(8)} out  ${fmt(b.cacheWrite5m).padStart(7)} cw5m  ${fmt(b.cacheWrite1h).padStart(7)} cw1h  ${fmt(b.cacheRead).padStart(8)} cr  ${fmtCost(b.cost).padStart(8)}`
-  );
-}
-
-// ── Claude Code transcripts ──
-
-function addToTimeBuckets(
-  tb: TimeBuckets,
-  ts: string,
-  model: string,
-  input: number,
-  output: number,
-  cacheWrite5m: number,
-  cacheWrite1h: number,
-  cacheRead: number,
-  todayPrefix: string,
-  weekAgo: string,
-  monthAgo: string
-): void {
-  addToBucket(tb.total, model, input, output, cacheWrite5m, cacheWrite1h, cacheRead);
-  if (ts >= monthAgo)
-    addToBucket(tb.month, model, input, output, cacheWrite5m, cacheWrite1h, cacheRead);
-  if (ts >= weekAgo)
-    addToBucket(tb.week, model, input, output, cacheWrite5m, cacheWrite1h, cacheRead);
-  if (ts.startsWith(todayPrefix))
-    addToBucket(tb.today, model, input, output, cacheWrite5m, cacheWrite1h, cacheRead);
-}
-
-function readClaudeCode(projectFilter?: string): {
-  buckets: TimeBuckets;
-  byModel: Record<string, Bucket>;
-  byProject: Record<string, TimeBuckets>;
-} {
-  const now = new Date();
-  const todayPrefix = now.toISOString().slice(0, 10);
-  const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000).toISOString();
-  const monthAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000).toISOString();
-
-  const buckets = emptyTimeBuckets();
-  const byModel: Record<string, Bucket> = {};
-  const byProject: Record<string, TimeBuckets> = {};
-
-  const claudeDir = resolve(homedir(), ".claude", "projects");
-  if (!existsSync(claudeDir)) return { buckets, byModel, byProject };
-
-  const projectDirs = readdirSync(claudeDir, { withFileTypes: true })
-    .filter((d) => d.isDirectory())
-    .map((d) => d.name);
-
-  for (const projDir of projectDirs) {
-    const projPath = resolve(claudeDir, projDir);
-    const segments = projDir.replace(/^-/, "").split("-");
-    const projName = segments.length > 1 ? segments.slice(-1)[0] : projDir;
-
-    if (typeof projectFilter === "string" && !projName.includes(projectFilter)) continue;
-
-    const jsonlFiles: string[] = [];
-
-    for (const entry of readdirSync(projPath, { withFileTypes: true })) {
-      if (entry.isFile() && entry.name.endsWith(".jsonl")) {
-        jsonlFiles.push(resolve(projPath, entry.name));
-      } else if (entry.isDirectory()) {
-        const subagentsDir = resolve(projPath, entry.name, "subagents");
-        try {
-          for (const sub of readdirSync(subagentsDir)) {
-            if (sub.endsWith(".jsonl")) {
-              jsonlFiles.push(resolve(subagentsDir, sub));
-            }
-          }
-        } catch {
-          /* no subagents dir */
-        }
-      }
-    }
-
-    for (const filepath of jsonlFiles) {
-      let content: string;
-      try {
-        content = readFileSync(filepath, "utf-8");
-      } catch {
-        continue;
-      }
-
-      for (const line of content.split("\n")) {
-        if (!line.includes('"usage"')) continue;
-        try {
-          const d = JSON.parse(line) as {
-            type?: string;
-            timestamp?: string;
-            message?: {
-              model?: string;
-              usage?: {
-                input_tokens?: number;
-                output_tokens?: number;
-                cache_creation_input_tokens?: number;
-                cache_read_input_tokens?: number;
-                cache_creation?: {
-                  ephemeral_5m_input_tokens?: number;
-                  ephemeral_1h_input_tokens?: number;
-                };
-              };
-            };
-          };
-          if (d.type !== "assistant") continue;
-          const usage = d.message?.usage;
-          const model = d.message?.model;
-          const ts = d.timestamp;
-          if (!usage || !model || !ts) continue;
-
-          const input = usage.input_tokens ?? 0;
-          const output = usage.output_tokens ?? 0;
-          const cr = usage.cache_read_input_tokens ?? 0;
-          const cw5m = usage.cache_creation?.ephemeral_5m_input_tokens;
-          const cw1h = usage.cache_creation?.ephemeral_1h_input_tokens;
-          // Older transcripts only have the summed cache_creation_input_tokens — bill as 5m.
-          const hasBreakdown = cw5m !== undefined || cw1h !== undefined;
-          const cacheWrite5m = hasBreakdown
-            ? (cw5m ?? 0)
-            : (usage.cache_creation_input_tokens ?? 0);
-          const cacheWrite1h = cw1h ?? 0;
-
-          addToTimeBuckets(
-            buckets,
-            ts,
-            model,
-            input,
-            output,
-            cacheWrite5m,
-            cacheWrite1h,
-            cr,
-            todayPrefix,
-            weekAgo,
-            monthAgo
-          );
-
-          byModel[model] ??= emptyBucket();
-          addToBucket(
-            byModel[model],
-            model,
-            input,
-            output,
-            cacheWrite5m,
-            cacheWrite1h,
-            cr
-          );
-
-          byProject[projName] ??= emptyTimeBuckets();
-          addToTimeBuckets(
-            byProject[projName],
-            ts,
-            model,
-            input,
-            output,
-            cacheWrite5m,
-            cacheWrite1h,
-            cr,
-            todayPrefix,
-            weekAgo,
-            monthAgo
-          );
-        } catch {
-          /* skip */
-        }
-      }
-    }
-  }
-
-  return { buckets, byModel, byProject };
-}
-
-// ── PAL inference ──
-
-function readPalInference(): {
-  buckets: TimeBuckets;
-  byModel: Record<string, TimeBuckets>;
-  byCaller: Record<string, Bucket>;
-} {
-  const now = new Date();
-  const todayPrefix = now.toISOString().slice(0, 10);
-  const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000).toISOString();
-  const monthAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000).toISOString();
-
-  const buckets = emptyTimeBuckets();
-  const byModel: Record<string, TimeBuckets> = {};
-  const byCaller: Record<string, Bucket> = {};
-
-  const filepath = resolve(palHome(), "memory", "signals", "token-usage.jsonl");
-  if (!existsSync(filepath)) return { buckets, byModel, byCaller };
-
-  const content = readFileSync(filepath, "utf-8").trim();
-  if (!content) return { buckets, byModel, byCaller };
-
-  for (const line of content.split("\n")) {
-    try {
-      const e = JSON.parse(line) as {
-        ts: string;
-        caller: string;
-        model: string;
-        inputTokens: number;
-        outputTokens: number;
-      };
-      addToTimeBuckets(
-        buckets,
-        e.ts,
-        e.model,
-        e.inputTokens,
-        e.outputTokens,
-        0,
-        0,
-        0,
-        todayPrefix,
-        weekAgo,
-        monthAgo
-      );
-      byModel[e.model] ??= emptyTimeBuckets();
-      addToTimeBuckets(
-        byModel[e.model],
-        e.ts,
-        e.model,
-        e.inputTokens,
-        e.outputTokens,
-        0,
-        0,
-        0,
-        todayPrefix,
-        weekAgo,
-        monthAgo
-      );
-      byCaller[e.caller] ??= emptyBucket();
-      addToBucket(byCaller[e.caller], e.model, e.inputTokens, e.outputTokens, 0, 0, 0);
-    } catch {
-      /* skip */
-    }
-  }
-
-  return { buckets, byModel, byCaller };
-}
-
-// ── rtk compression savings ──
-
-interface RtkSummary {
-  total_commands: number;
-  total_saved: number;
-  avg_savings_pct: number;
-}
-
-/**
- * Query rtk's own savings ledger. `installed: false` means rtk isn't on PATH;
- * `summary: null` with `installed: true` means rtk is present but has no data
- * (or errored) — the two cases print differently in the usage report.
- */
-function readRtkGain(): { installed: boolean; summary: RtkSummary | null } {
+function rtkGain(): RtkGain {
   const rtk = findBinaryOnPath("rtk");
   if (!rtk) return { installed: false, summary: null };
-  try {
-    const r = spawnSync(rtk, ["gain", "--format", "json"], {
-      encoding: "utf8",
-      stdio: ["ignore", "pipe", "ignore"],
-    });
-    if (r.status !== 0 || !r.stdout) return { installed: true, summary: null };
-    const parsed = JSON.parse(r.stdout) as { summary?: RtkSummary };
-    return { installed: true, summary: parsed.summary ?? null };
-  } catch {
-    return { installed: true, summary: null };
-  }
-}
-
-function printRtkGain(): void {
-  const { installed, summary } = readRtkGain();
-  console.log("\n  rtk Compression\n");
-  if (!installed) {
-    console.log("  rtk not installed");
-    return;
-  }
-  if (!summary || summary.total_commands === 0) {
-    console.log("  rtk installed — no savings recorded yet");
-    return;
-  }
-  console.log(
-    `  Tokens saved   ${fmt(summary.total_saved).padStart(8)} tok  ${summary.avg_savings_pct.toFixed(1)}% avg  across ${fmt(summary.total_commands)} commands`
-  );
+  const result = spawnSync(rtk, ["gain", "--format", "json"], {
+    encoding: "utf8",
+    stdio: ["ignore", "pipe", "ignore"],
+  });
+  return {
+    installed: true,
+    summary: parseRtkSummary(result.status, result.stdout ?? ""),
+  };
 }
 
-// ── CLI ──
-
 export function usage() {
-  parseArgs({
+  const { values } = parseArgs({
     options: {
       today: { type: "boolean", default: false },
       week: { type: "boolean", default: false },
@@ -402,62 +42,12 @@ export function usage() {
     strict: false,
   });
 
-  const cc = readClaudeCode();
-  const pal = readPalInference();
-
-  console.log("\n  Claude Code Usage\n");
-  printRow("Today", cc.buckets.today);
-  printRow("7d", cc.buckets.week);
-  printRow("30d", cc.buckets.month);
-  printRow("Total", cc.buckets.total);
-
-  if (Object.keys(cc.byModel).length > 0) {
-    console.log("\n  By Model (all time)\n");
-    const sorted = Object.entries(cc.byModel).sort((a, b) => b[1].cost - a[1].cost);
-    const modelNames = sorted.map(([m]) => m.replace("claude-", ""));
-    const modelWidth = Math.max(14, ...modelNames.map((n) => n.length + 2));
-    for (let i = 0; i < sorted.length; i++) {
-      printDetailed(modelNames[i], sorted[i][1], modelWidth);
-    }
-  }
-
-  if (Object.keys(cc.byProject).length > 1) {
-    console.log("\n  By Project (all time)\n");
-    const sorted = Object.entries(cc.byProject).sort(
-      (a, b) => b[1].total.cost - a[1].total.cost
-    );
-    for (const [proj, tb] of sorted) {
-      printRow(proj, tb.total);
-    }
-  }
-
-  for (const [model, tb] of Object.entries(pal.byModel)) {
-    if (tb.total.calls === 0) continue;
-    let label: string;
-    if (model.includes("haiku")) label = "Haiku";
-    else if (model.includes("sonnet")) label = "Sonnet";
-    else label = model.replace("claude-", "");
-    console.log(`\n  PAL Inference (${label})\n`);
-    printRow("Today", tb.today);
-    printRow("7d", tb.week);
-    printRow("30d", tb.month);
-    printRow("Total", tb.total);
-  }
-
-  printRtkGain();
-
-  const grand = emptyBucket();
-  for (const b of [cc.buckets.total, pal.buckets.total]) {
-    grand.input += b.input;
-    grand.output += b.output;
-    grand.cacheWrite5m += b.cacheWrite5m;
-    grand.cacheWrite1h += b.cacheWrite1h;
-    grand.cacheRead += b.cacheRead;
-    grand.cost += b.cost;
-    grand.calls += b.calls;
-  }
-
-  console.log(`\n  Grand Total: ${fmtCost(grand.cost)}\n`);
+  const lines = usageLines(
+    readClaudeCode(resolve(homedir(), ".claude", "projects"), values.project as string),
+    readPalInference(resolve(palHome(), "memory", "signals", "token-usage.jsonl")),
+    rtkGain()
+  );
+  for (const line of lines) console.log(line);
 }
 
 if (import.meta.main) usage();

package/assets/templates/ledger-page.html

@@ -1,213 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Action Ledger</title>
-<style>
-  :root {
-    --bg: #eef0f2;
-    --panel: #ffffff;
-    --ink: #1b2026;
-    --muted: #6b7480;
-    --line: #d5dae0;
-    --accent: #0f6e6e;
-    --accent-ink: #ffffff;
-    --block: #b4471c;
-    --block-bg: #fbf0ea;
-    --ok: #2f7a3e;
-    --ok-bg: #edf6ee;
-    --pending: #8a6d00;
-    --pending-bg: #fbf5df;
-    --agent: #4a3fa3;
-    --agent-bg: #efedf9;
-    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
-    --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-  }
-  * { box-sizing: border-box; }
-  html, body { height: 100%; }
-  body { margin: 0; background: var(--bg); color: var(--ink); font: 13px/1.45 var(--sans); }
-  header {
-    display: flex; align-items: center; justify-content: space-between;
-    padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line);
-  }
-  header h1 { font-size: 14px; margin: 0; font-weight: 600; letter-spacing: .01em; }
-  header .model { font-family: var(--mono); font-size: 11px; color: var(--muted); }
-  header .who { font-size: 12px; color: var(--muted); }
-  header .who b { color: var(--ink); font-weight: 600; }
-
-  main { background: var(--panel); min-height: calc(100% - 45px); }
-  h2 {
-    font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
-    margin: 0; padding: 12px 14px 8px; font-weight: 600;
-  }
-
-  .filters { display: flex; gap: 10px; padding: 0 14px 12px; flex-wrap: wrap; align-items: end; }
-  .filters label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
-  select, input { font: inherit; padding: 4px 6px; border: 1px solid var(--line); border-radius: 3px; }
-
-  .stats { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
-  .stat { background: var(--panel); padding: 12px 14px; }
-  .stat label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
-  .stat .n { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
-  .stat.headline { background: var(--block-bg); }
-  .stat.headline .n { font-size: 40px; color: var(--block); }
-  .stat.applied .n { color: var(--ok); }
-  .stat.failed .n { color: var(--pending); }
-  .stat.denied .n, .stat.blocked .n { color: var(--block); }
-  .st { font-size: 11px; color: var(--muted); }
-
-  table { width: 100%; border-collapse: collapse; }
-  td, th { text-align: left; padding: 7px 14px; border-top: 1px solid var(--line); vertical-align: top; font-variant-numeric: tabular-nums; }
-  th { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-top: 0; font-weight: 600; }
-  td.ts { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
-  td.target { font-family: var(--mono); font-size: 11px; word-break: break-all; }
-  td.diff { font-family: var(--mono); font-size: 11px; }
-  .actor { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 11px; }
-  .actor.human { background: #eef0f2; }
-  .actor.agent { background: var(--agent-bg); color: var(--agent); }
-  .out { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 11px; font-weight: 600; }
-  .out.applied { background: var(--ok-bg); color: var(--ok); }
-  .out.failed { background: var(--pending-bg); color: var(--pending); }
-  .out.denied { background: var(--block-bg); color: var(--block); }
-  .out.blocked { background: var(--block-bg); color: var(--block); }
-  footer { font-family: var(--mono); font-size: 10.5px; color: var(--muted); padding: 10px 14px; border-top: 1px solid var(--line); }
-</style>
-</head>
-<body>
-<header>
-  <h1>Action Ledger</h1>
-  <span class="model" id="modelLine"></span>
-  <span class="who" id="who"></span>
-</header>
-
-<main>
-  <h2>Window</h2>
-  <div class="filters">
-    <div><label for="project">Project</label><select id="project"><option value="">all projects</option></select></div>
-    <div><label for="since">From</label><input type="date" id="since"></div>
-    <div><label for="until">To</label><input type="date" id="until"></div>
-  </div>
-
-  <div class="stats" id="stats"></div>
-
-  <h2>Action log</h2>
-  <table>
-    <thead><tr><th>When</th><th>Actor</th><th>Action</th><th>Target</th><th>Change</th><th>Outcome</th></tr></thead>
-    <tbody id="log"></tbody>
-  </table>
-  <footer id="footer">Every row is one action an agent tried to make. The ledger saw each from both sides, before and after. Nothing here was written by hand.</footer>
-</main>
-
-<script>
-const $ = id => document.getElementById(id);
-const OUTCOMES = ['applied', 'failed', 'denied', 'blocked'];
-let ledgerFiles = 0;
-
-function el(tag, cls, text) {
-  const node = document.createElement(tag);
-  if (cls) node.className = cls;
-  if (text !== undefined) node.textContent = text;
-  return node;
-}
-
-const pad = n => String(n).padStart(2, '0');
-function when(ts) {
-  const d = new Date(ts);
-  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
-}
-
-const authorityWord = key => key === 'user' ? 'human' : key;
-function tally(counts, word = k => k) {
-  const parts = Object.entries(counts).sort((a, b) => b[1] - a[1]).map(([k, v]) => `${word(k)} ${v}`);
-  return parts.length ? parts.join(' · ') : '—';
-}
-
-function query() {
-  const p = new URLSearchParams();
-  if ($('project').value) p.set('project', $('project').value);
-  if ($('since').value) p.set('since', $('since').value);
-  if ($('until').value) p.set('until', `${$('until').value}T23:59:59.999Z`);
-  return p.toString();
-}
-
-function windowText() {
-  const from = $('since').value, to = $('until').value;
-  if (!from && !to) return 'all time';
-  return `${from || 'start'} → ${to || 'now'}`;
-}
-
-function renderStats(s) {
-  const strip = $('stats');
-  strip.replaceChildren();
-  const headline = el('div', 'stat headline');
-  headline.append(el('label', '', 'Refusals'), el('div', 'n', String(s.refusals)),
-    el('div', 'st', `denied ${s.outcomes.denied.total} · blocked ${s.outcomes.blocked.total}`));
-  strip.append(headline);
-  for (const key of OUTCOMES) {
-    const o = s.outcomes[key];
-    const card = el('div', `stat ${key}`);
-    card.append(el('label', '', key), el('div', 'n', String(o.total)),
-      el('div', 'st', tally(o.byAuthority, authorityWord)), el('div', 'st', tally(o.byRuntime)));
-    strip.append(card);
-  }
-}
-
-function actorCell(r) {
-  const td = el('td');
-  const agent = r.authority === 'agent';
-  td.append(el('span', `actor ${agent ? 'agent' : 'human'}`, agent ? `agent · ${r.runtime}` : r.actor));
-  td.append(el('div', 'st', agent ? `on behalf of ${r.actor}` : `via ${r.runtime}`));
-  return td;
-}
-
-function changeCell(r) {
-  const td = el('td', 'diff');
-  td.append(r.reason ? el('span', 'st', r.reason) : document.createTextNode(r.change));
-  return td;
-}
-
-function renderRows(rows) {
-  const body = $('log');
-  body.replaceChildren();
-  if (!rows.length) {
-    const td = el('td', 'st', 'No actions in this window.');
-    td.colSpan = 6;
-    const tr = el('tr'); tr.append(td); body.append(tr);
-    return;
-  }
-  for (const r of rows) {
-    const tr = el('tr');
-    const outcome = el('td'); outcome.append(el('span', `out ${r.outcome}`, r.outcome));
-    tr.append(el('td', 'ts', when(r.ts)), actorCell(r), el('td', '', r.tool), el('td', 'target', r.target), changeCell(r), outcome);
-    body.append(tr);
-  }
-}
-
-async function load() {
-  const res = await fetch(`/api/ledger?${query()}`);
-  const body = await res.json();
-  if (!res.ok) { $('modelLine').textContent = body.error; return; }
-  renderStats(body.stats);
-  renderRows(body.rows);
-  $('modelLine').textContent = `${body.stats.total} actions · ${windowText()} · ${ledgerFiles} ledger file(s)`;
-}
-
-async function loadProjects() {
-  const list = await (await fetch('/api/projects')).json();
-  for (const { slug } of list) {
-    const o = el('option', '', slug); o.value = slug; $('project').append(o);
-  }
-}
-
-async function loadStatus() {
-  const s = await (await fetch('/api/status')).json();
-  ledgerFiles = s.ledgerFiles;
-  $('who').replaceChildren('machine ', Object.assign(el('b', '', s.machine)));
-}
-
-for (const id of ['project', 'since', 'until']) $(id).addEventListener('change', load);
-Promise.all([loadProjects(), loadStatus()]).then(load);
-</script>
-</body>
-</html>