@oharness/server 0.7.0 → 0.8.0

package/dist/page/client/usage.js

@@ -0,0 +1,954 @@
+/**
+ * What was spent and what was decided: the audit trail, the date range
+ * picker both pages share, and the usage chart.
+ *
+ * One part of the client script; see ./index.ts for how the parts join.
+ */
+export const USAGE = String.raw `
+const AUDIT_PREVIEW = 12;
+
+/** How many lines the page draws at once, and adds each time it is asked for more. */
+const AUDIT_PAGE = 200;
+
+/**
+ * Decisions newest first, each carrying the answer that closed it.
+ *
+ * A decision and its answer are one event to anybody reading this, and were
+ * two lines on disk because that is when each was known. Keyed by session as
+ * well as id: ids are unique within the file they were written in, and the
+ * page reads every file at once.
+ */
+function auditRows(entries) {
+  const list = entries || [];
+  const key = (entry) => (entry.session || "") + "/" + entry.id;
+  const answers = new Map();
+  for (const entry of list) if (entry.kind === "answer") answers.set(key(entry), entry);
+  return list
+    .filter((entry) => entry.kind === "decision")
+    .map((entry) => ({ entry, answer: answers.get(key(entry)) || null }))
+    .sort((a, b) => b.entry.at - a.entry.at);
+}
+
+/**
+ * How a decision ended.
+ *
+ * The answer replaces the behaviour it answered rather than following it:
+ * "ask → allowed" is one fact, and printing both reads as two.
+ */
+function auditOutcome(row) {
+  return row.answer ? row.answer.outcome : row.entry.behavior;
+}
+
+/** Which of the page's filters a row belongs to. */
+function auditKind(row) {
+  if (row.entry.behavior === "ask" && !row.answer) return "unanswered";
+  const outcome = auditOutcome(row);
+  if (outcome === "denied" || outcome === "deny" || outcome === "unavailable") return "denied";
+  return "allowed";
+}
+
+/**
+ * The trail as lines, newest first.
+ *
+ * withDate, because the two readers ask over different spans: within one
+ * session the time of day places an entry, and across every session on disk
+ * it does not place anything at all.
+ */
+function auditList(rows, withDate) {
+  const list = el("div", "audit-list");
+  let day = "";
+  for (const row of rows) {
+    const entry = row.entry;
+    const at = new Date(entry.at);
+    // Across sessions the date is a heading rather than a column: the same
+    // "Sep 15" forty times over is noise that pushes the tool off the line.
+    if (withDate) {
+      const label = at.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" });
+      if (label !== day) {
+        day = label;
+        list.appendChild(el("div", "audit-day", label));
+      }
+    }
+    const kind = auditKind(row);
+    const line = el("div", "trail-line audit-row " + kind);
+    line.appendChild(el("span", "audit-time", at.toLocaleTimeString()));
+    line.appendChild(el("span", "audit-pill " + kind, auditOutcome(row)));
+
+    // "Edit(/a/b/c.md)" reads as a tool and what it touched; drawn as one
+    // string the path is as loud as the verb.
+    const label = entry.principal || entry.tool;
+    const what = el("span", "audit-what");
+    const open = label.indexOf("(");
+    if (open > 0 && label.endsWith(")")) {
+      what.appendChild(el("span", "audit-tool", label.slice(0, open)));
+      const arg = el("span", "audit-arg", label.slice(open + 1, -1));
+      arg.title = label.slice(open + 1, -1);
+      what.appendChild(arg);
+    } else {
+      what.appendChild(el("span", "audit-tool", label));
+    }
+    line.appendChild(what);
+
+    const notes = el("span", "audit-notes");
+    if (entry.rule) notes.appendChild(el("span", "audit-tag", entry.rule));
+    if (row.answer && row.answer.remembered) {
+      notes.appendChild(el("span", "audit-tag remembered", "remembered " + row.answer.remembered));
+    }
+    // An ask with no answer: the process stopped while the question was up.
+    if (entry.behavior === "ask" && !row.answer) notes.appendChild(el("span", "audit-tag unanswered", "unanswered"));
+    line.appendChild(notes);
+    list.appendChild(line);
+  }
+  return list;
+}
+
+/**
+ * The two downloads, for whichever scope is on screen.
+ *
+ * Plain links rather than buttons that fetch and build a blob: the server
+ * already names the file and hands it over, and a download the page assembles
+ * in memory is one the browser cannot resume, cannot stream, and shows in no
+ * download list.
+ */
+function auditExports(session) {
+  const exports = el("div", "row-actions");
+  for (const scope of ["session", "all"]) {
+    const link = el("a", "ghost", t("settings.auditExport" + (scope === "all" ? "All" : "")));
+    link.href = q("/audit/export?session=" + encodeURIComponent(scope === "all" ? "all" : session));
+    // The server names it; this only tells the browser to save rather than
+    // to navigate, which it would otherwise do with a JSON content type.
+    link.setAttribute("download", "");
+    exports.appendChild(link);
+  }
+  return exports;
+}
+
+/** Which slice of the trail the page is showing, for this page load. */
+let auditScope = "session";
+let auditFilter = "all";
+
+/**
+ * Every permission decision, one page of them at a time.
+ *
+ * Its own page for the same reason usage has one: what it holds outgrew the
+ * row it was reached from. The scope is the part that could not live there at
+ * all — the row reads the session it is in, and "when did I ever allow this"
+ * is a question about the others.
+ */
+async function showAudit() {
+  const scope = auditScope;
+  const body = await getJson(
+    "/audit" + (scope === "all" ? "?session=all" : activeId ? "?session=" + encodeURIComponent(activeId) : ""),
+  );
+  if (shownPanel !== "audit") return;
+  panelBody.replaceChildren();
+  if (body.error) return void panelBody.appendChild(panelError(body.error));
+
+  const panel = el("div", "panel audit");
+  const head = el("div", "row-head");
+  head.appendChild(el("h2", null, t("settings.audit")));
+  // Back to where this was opened from: the sidebar row it lit is already
+  // showing as active, so without this the only exit is a click that looks
+  // like a no-op.
+  const back = el("button", "ghost", t("usage.back"));
+  back.type = "button";
+  back.addEventListener("click", () => {
+    setNav("nav-settings");
+    void showSettings();
+  });
+  head.appendChild(back);
+  panel.appendChild(head);
+
+  /*
+   * Two segmented controls, and they are not the same kind of control.
+   *
+   * The scope reloads, because it is a different read; the filter does not,
+   * because everything it can show is already here. Keeping them side by side
+   * anyway: which decisions and whose are one question asked in two halves,
+   * and splitting them across the page would hide that changing one changes
+   * what the other is choosing from.
+   */
+  const controls = el("div", "audit-controls");
+  // chosen is read at click time, not closed over: the filter changes this
+  // control in place, and a guard against the value it was built with would
+  // refuse to go back to the one it opened on.
+  const seg = (options, chosen, onPick) => {
+    const box = el("div", "seg");
+    for (const option of options) {
+      const button = el("button", "seg-item" + (option.id === chosen() ? " on" : ""));
+      if (option.color) {
+        const dot = el("span", "seg-dot");
+        dot.style.background = option.color;
+        button.appendChild(dot);
+      }
+      button.appendChild(document.createTextNode(option.label));
+      if (option.count !== undefined) button.appendChild(el("span", "seg-count", String(option.count)));
+      button.type = "button";
+      button.addEventListener("click", () => {
+        if (option.id === chosen()) return;
+        onPick(option.id);
+      });
+      box.appendChild(button);
+    }
+    return box;
+  };
+  controls.appendChild(seg(
+    [
+      { id: "session", label: t("audit.scope.session") },
+      { id: "all", label: t("audit.scope.all") },
+    ],
+    () => scope,
+    (id) => { auditScope = id; void showAudit(); },
+  ));
+  const filters = ["all", "allowed", "denied", "unanswered"];
+  const rows = auditRows(body.entries);
+  const tally = { all: rows.length, allowed: 0, denied: 0, unanswered: 0 };
+  for (const row of rows) tally[auditKind(row)] += 1;
+  const dots = { allowed: "var(--ok)", denied: "var(--err)", unanswered: "var(--warn)" };
+  const filterSeg = seg(
+    filters.map((id) => ({
+      id, label: t("audit.filter." + id), count: tally[id],
+      ...(dots[id] ? { color: dots[id] } : {}),
+    })),
+    () => auditFilter,
+    (id) => {
+      auditFilter = id;
+      // Back to the top of the list: a filter changed under a list someone
+      // had paged five hundred lines into is a different list.
+      shown = AUDIT_PAGE;
+      paint();
+    },
+  );
+  controls.appendChild(filterSeg);
+  panel.appendChild(controls);
+
+  const count = el("div", "muted small");
+  panel.appendChild(count);
+  const listBox = el("div");
+  panel.appendChild(listBox);
+  const foot = el("div");
+  panel.appendChild(foot);
+
+  // Said out loud rather than left to a total that quietly stops short: a
+  // machine with more sessions than one read returns is one where "nothing
+  // was ever denied" would otherwise be a claim this page cannot make.
+  if (body.more) panel.appendChild(el("div", "muted small", t("audit.capped")));
+  panel.appendChild(auditExports(scope === "all" ? "all" : activeId));
+  panelBody.appendChild(panel);
+
+  // How far down the list has been asked to go. Reset by a repaint rather
+  // than kept across one: a filter that changed under a list scrolled to its
+  // five-hundredth line is a different list.
+  let shown = AUDIT_PAGE;
+  paint();
+
+  function paint() {
+    const picked = auditFilter === "all" ? rows : rows.filter((row) => auditKind(row) === auditFilter);
+    // Only the filter is repainted in place; changing the scope is a reload,
+    // and the control comes back with it.
+    filterSeg.querySelectorAll(".seg-item").forEach((button, index) => {
+      button.classList.toggle("on", filters[index] === auditFilter);
+    });
+
+    count.textContent = [
+      picked.length === 1 ? t("audit.countOne") : t("audit.count", { n: picked.length }),
+      scope === "all" && body.sessions ? t("audit.acrossSessions", { n: body.sessions }) : "",
+    ].filter(Boolean).join("   ·   ");
+
+    listBox.replaceChildren();
+    foot.replaceChildren();
+    if (!rows.length) {
+      return void listBox.appendChild(el("div", "muted small",
+        t(scope === "all" ? "audit.noneAll" : "settings.auditEmpty")));
+    }
+    if (!picked.length) {
+      return void listBox.appendChild(el("div", "muted small", t("audit.noMatch")));
+    }
+    listBox.appendChild(auditList(picked.slice(0, shown), scope === "all"));
+    if (picked.length > shown) {
+      const more = el("button", "ghost", t("audit.showMore"));
+      more.type = "button";
+      more.addEventListener("click", () => {
+        shown += AUDIT_PAGE;
+        paint();
+      });
+      foot.appendChild(more);
+    }
+  }
+}
+
+/** The window the usage page is asking about, for this page load. */
+let usageRange = "30d";
+/**
+ * The first and last day of a picked window, once one has been picked.
+ *
+ * Kept as UTC day keys rather than as a pair of timestamps: they are what the
+ * server is asked for, what it echoes back, and what the calendar below reads
+ * — and a window that means one thing on the wire and another on screen is
+ * the single failure a date picker cannot recover from.
+ */
+let usageFrom = null;
+let usageTo = null;
+
+const DAY_MS = 86400000;
+/**
+ * The longest window that may be picked, matching the site's own picker.
+ *
+ * A year of daily columns is already hairs wide; past it the walk is every
+ * session on disk for a curve that says nothing the presets do not.
+ */
+const MAX_CUSTOM_DAYS = 366;
+const dayKey = (ms) => new Date(ms).toISOString().slice(0, 10);
+const dayMs = (key) => Date.parse(key + "T00:00:00Z");
+/** The first UTC day of the month holding ms. */
+const monthOf = (ms) => Date.UTC(new Date(ms).getUTCFullYear(), new Date(ms).getUTCMonth(), 1);
+const shiftMonth = (first, by) =>
+  Date.UTC(new Date(first).getUTCFullYear(), new Date(first).getUTCMonth() + by, 1);
+
+/**
+ * A range of UTC days, picked on a calendar of our own.
+ *
+ * The same component the site's usage page uses, down to the class names —
+ * not the browser's date field, which looks different in every browser,
+ * cannot show a range, and draws an outlined box that belongs to no design
+ * here. Click a first day, then a last one; while the second is being chosen
+ * the range follows the pointer. Days after max cannot be picked, nor a
+ * second day more than maxDays from the first.
+ *
+ * Nothing is applied until Apply: closing the panel, clicking away from it or
+ * pressing Escape leaves the page showing the window it was already showing,
+ * because the days inside it are a draft until then.
+ */
+function dateRangePicker(options) {
+  const root = el("span", "drp");
+  const maxMs = dayMs(options.max);
+  const maxDays = options.maxDays;
+
+  let start = dayMs(options.from);
+  let end = dayMs(options.to);
+  let hover = null;
+  let month = monthOf(dayMs(options.to));
+  let open = false;
+  let pop = null;
+
+  const reset = () => {
+    start = dayMs(options.from);
+    end = dayMs(options.to);
+    hover = null;
+    month = monthOf(dayMs(options.to));
+  };
+
+  const monthName = new Intl.DateTimeFormat(LOCALE, { month: "long", year: "numeric", timeZone: "UTC" });
+  const short = new Intl.DateTimeFormat(LOCALE, { month: "short", day: "numeric", timeZone: "UTC" });
+  const shortYear = new Intl.DateTimeFormat(LOCALE, {
+    month: "short", day: "numeric", year: "numeric", timeZone: "UTC",
+  });
+  // Sunday-first where the reader's language puts it there, Monday-first
+  // everywhere else.
+  const firstWeekday = /^(en|ja|ko)$/.test(LOCALE) ? 0 : 1;
+  const weekdayName = new Intl.DateTimeFormat(LOCALE, { weekday: "narrow", timeZone: "UTC" });
+  // 2023-01-01 was a Sunday.
+  const weekdays = Array.from({ length: 7 }, (_, index) =>
+    weekdayName.format(Date.UTC(2023, 0, 1 + ((firstWeekday + index) % 7))));
+
+  const span = (a, b) => {
+    const n = Math.round((b - a) / DAY_MS) + 1;
+    return n === 1 ? t("usage.range.oneDay") : t("usage.range.days", { n });
+  };
+  const rangeText = (a, b) =>
+    a === b ? shortYear.format(a)
+      : new Date(a).getUTCFullYear() === new Date(b).getUTCFullYear()
+        ? short.format(a) + " – " + shortYear.format(b)
+        : shortYear.format(a) + " – " + shortYear.format(b);
+
+  const trigger = el("button", "drp-trigger");
+  trigger.type = "button";
+  trigger.setAttribute("aria-haspopup", "dialog");
+  const paintTrigger = () => {
+    trigger.replaceChildren(svgIcon("calendar"));
+    trigger.appendChild(document.createTextNode(options.active
+      ? rangeText(dayMs(options.from), dayMs(options.to))
+      : t("usage.range.custom")));
+    trigger.setAttribute("aria-pressed", options.active ? "true" : "false");
+    trigger.setAttribute("aria-expanded", open ? "true" : "false");
+    trigger.classList.toggle("on", Boolean(options.active));
+  };
+  root.appendChild(trigger);
+
+  /*
+   * The cells, kept so a hover can repaint the range without rebuilding them.
+   *
+   * The structure is built once per month shown; choosing and hovering only
+   * toggle classes on what is already there. Rebuilding the grid on every
+   * mouseenter replaced the button under the pointer, which fired mouseenter
+   * on its replacement — a rebuild loop that swallowed the click meant to
+   * close the range, so picking a second day never took.
+   */
+  let cells = [];
+  let foot = null;
+
+  const pick = (day) => {
+    if (end === null) {
+      const first = Math.min(day, start);
+      const last = Math.max(day, start);
+      start = first;
+      end = last;
+      hover = null;
+    } else {
+      start = day;
+      end = null;
+    }
+    paintRange();
+  };
+
+  const disabled = (day) =>
+    day > maxMs || (end === null && Math.abs(day - start) > (maxDays - 1) * DAY_MS);
+
+  /** The chosen range, and what the footer says about it. Classes only. */
+  function paintRange() {
+    // While the second day is being chosen, the range runs to the pointer.
+    const lastShown = end === null ? hover : end;
+    const low = lastShown === null ? start : Math.min(start, lastShown);
+    const high = lastShown === null ? start : Math.max(start, lastShown);
+    for (const cell of cells) {
+      const at = cell.at;
+      const edgeStart = at === low;
+      const edgeEnd = at === high;
+      cell.button.classList.toggle("is-inside", at > low && at < high);
+      cell.button.classList.toggle("is-edge", edgeStart || edgeEnd);
+      cell.button.classList.toggle("is-start", edgeStart && high > low);
+      cell.button.classList.toggle("is-end", edgeEnd && high > low);
+      cell.button.disabled = disabled(at);
+      if (edgeStart || edgeEnd) cell.button.setAttribute("aria-current", "date");
+      else cell.button.removeAttribute("aria-current");
+    }
+    if (!foot) return;
+    foot.replaceChildren();
+    const summary = el("span", "drp-summary");
+    if (end === null) summary.appendChild(document.createTextNode(t("usage.range.pickEnd")));
+    else {
+      summary.appendChild(el("strong", null, rangeText(start, end)));
+      summary.appendChild(el("span", "muted", " · " + span(start, end)));
+    }
+    foot.appendChild(summary);
+
+    const actions = el("span", "drp-actions");
+    const cancel = el("button", "drp-cancel", t("usage.range.cancel"));
+    cancel.type = "button";
+    cancel.addEventListener("click", () => close());
+    const apply = el("button", "drp-apply", t("usage.range.apply"));
+    apply.type = "button";
+    if (end === null) apply.disabled = true;
+    else {
+      apply.addEventListener("click", () => {
+        const from = dayKey(start);
+        const to = dayKey(end);
+        close();
+        options.onApply(from, to);
+      });
+    }
+    actions.appendChild(cancel);
+    actions.appendChild(apply);
+    foot.appendChild(actions);
+  }
+
+  const renderMonth = (first, className) => {
+    const box = el("div", "drp-month " + className);
+    box.appendChild(el("div", "drp-month-name", monthName.format(first)));
+    const grid = el("div", "drp-grid");
+    grid.setAttribute("role", "grid");
+    for (const name of weekdays) {
+      const cell = el("span", "drp-weekday", name);
+      cell.setAttribute("aria-hidden", "true");
+      grid.appendChild(cell);
+    }
+    const date = new Date(first);
+    const year = date.getUTCFullYear();
+    const index = date.getUTCMonth();
+    const length = new Date(Date.UTC(year, index + 1, 0)).getUTCDate();
+    const lead = (date.getUTCDay() - firstWeekday + 7) % 7;
+    for (let i = 0; i < lead; i += 1) grid.appendChild(el("span"));
+    for (let day = 1; day <= length; day += 1) {
+      const at = Date.UTC(year, index, day);
+      const button = el("button", "drp-day" + (at === maxMs ? " is-today" : ""));
+      button.type = "button";
+      button.appendChild(el("span", null, String(day)));
+      button.setAttribute("aria-label", shortYear.format(at));
+      button.addEventListener("click", () => { if (!button.disabled) pick(at); });
+      button.addEventListener("mouseenter", () => {
+        if (end !== null || button.disabled) return;
+        hover = at;
+        paintRange();
+      });
+      cells.push({ at, button });
+      grid.appendChild(button);
+    }
+    box.appendChild(grid);
+    return box;
+  };
+
+  function paintPop() {
+    if (!pop) return;
+    pop.replaceChildren();
+    cells = [];
+    const nav = el("div", "drp-nav");
+    const back = el("button", "drp-arrow");
+    back.type = "button";
+    back.appendChild(svgIcon("chevronLeft"));
+    back.setAttribute("aria-label", t("usage.range.previous"));
+    back.addEventListener("click", () => { month = shiftMonth(month, -1); paintPop(); });
+    const forward = el("button", "drp-arrow");
+    forward.type = "button";
+    forward.appendChild(svgIcon("chevronRight"));
+    forward.setAttribute("aria-label", t("usage.range.next"));
+    if (month >= monthOf(maxMs)) forward.disabled = true;
+    else forward.addEventListener("click", () => { month = shiftMonth(month, 1); paintPop(); });
+    nav.appendChild(back);
+    nav.appendChild(forward);
+    pop.appendChild(nav);
+
+    const months = el("div", "drp-months");
+    months.appendChild(renderMonth(shiftMonth(month, -1), "is-first"));
+    months.appendChild(renderMonth(month, "is-second"));
+    pop.appendChild(months);
+
+    foot = el("div", "drp-foot");
+    pop.appendChild(foot);
+    paintRange();
+  }
+
+  /*
+   * Kept inside the window.
+   *
+   * The trigger sits near the left of a panel that can be narrower than two
+   * months, and the pop is anchored to it — so on a window this app is
+   * routinely used at, Apply was past the right edge of the screen and the
+   * calendar had no way to say yes. Measured rather than guessed at: the
+   * width depends on the locale's month names.
+   */
+  function fit() {
+    // The narrow layout centres the panel on the screen, so there is nothing
+    // to nudge; a measured offset there would drag it back off the edge.
+    if (!pop || matchMedia("(max-width:640px)").matches) return;
+    pop.style.left = "0px";
+    const box = pop.getBoundingClientRect();
+    const over = box.right - (document.documentElement.clientWidth - 12);
+    if (over > 0) pop.style.left = -Math.min(over, Math.max(box.left - 12, 0)) + "px";
+  }
+
+  // Bound while the panel is up and taken down with it: a click-away handler
+  // that outlives its panel is a page that reacts to clicks on nothing.
+  const away = (event) => { if (!root.contains(event.target)) close(); };
+  const escape = (event) => { if (event.key === "Escape") close(); };
+
+  function close() {
+    if (!open) return;
+    open = false;
+    document.removeEventListener("pointerdown", away);
+    document.removeEventListener("keydown", escape);
+    if (pop) pop.remove();
+    pop = null;
+    // Back to the window the page is showing, so reopening does not resume a
+    // half-made choice that was abandoned.
+    reset();
+    paintTrigger();
+  }
+
+  trigger.addEventListener("click", () => {
+    if (open) return void close();
+    open = true;
+    reset();
+    pop = el("div", "drp-pop");
+    pop.setAttribute("role", "dialog");
+    pop.setAttribute("aria-label", t("usage.range.custom"));
+    root.appendChild(pop);
+    paintPop();
+    fit();
+    paintTrigger();
+    document.addEventListener("pointerdown", away);
+    document.addEventListener("keydown", escape);
+  });
+
+  paintTrigger();
+  return root;
+}
+
+/**
+ * What was spent over time, one line per model.
+ *
+ * Drawn by hand in SVG for the same reason every icon here is: the page
+ * carries no external scripts, and a chart library would be the first
+ * exception for something that is forty lines of arithmetic.
+ *
+ * Bars rather than lines, because a day's spend is an interval total and not
+ * a sample of something continuous. There is no value between Tuesday and
+ * Wednesday, but a line segment drawn between them asserts one — and on a day
+ * with no work it draws a V that reads as a dip in a trajectory rather than
+ * as what it is, which is a day nobody worked. A missing bar cannot be
+ * misread.
+ *
+ * Stacked by model, which is the thing stacked *areas* are bad at and stacked
+ * bars are not: every column starts from the same baseline, so the reading
+ * that matters — how tall is this day against that one — is unaffected by
+ * what is underneath. The exact per-model numbers live in the readout under
+ * the pointer and in the list below, which is a better place to compare them
+ * than any chart.
+ *
+ * The models drawn are the ones with a share worth a band; the rest are
+ * summed into one so the columns still add up to the total above them.
+ */
+function usageChart(body, models) {
+  const series = body.series || {};
+  const buckets = series.buckets || [];
+  const card = el("div", "row-card chart-card");
+  if (buckets.length < 2) return card;
+
+  // Five, then everything else together: past that the legend is longer than
+  // the chart and the lines are indistinguishable anyway.
+  const named = models.slice(0, 5).map((entry) => entry.model);
+  const others = models.slice(5).map((entry) => entry.model);
+  const lines = named.map((model) => ({
+    model,
+    points: buckets.map((bucket) => bucket.models[model] || 0),
+  }));
+  if (others.length) {
+    lines.push({
+      model: t("usage.otherModels", { n: others.length }),
+      points: buckets.map((bucket) =>
+        others.reduce((sum, model) => sum + (bucket.models[model] || 0), 0)),
+    });
+  }
+
+  const peak = Math.max(...buckets.map((bucket) => bucket.costUsd), 0.0001);
+  const W = 640;
+  const H = 150;
+  // A column per bucket, with a hair between them — and no gap at all once
+  // there are enough buckets that the gap would be wider than the bar.
+  const slot = W / buckets.length;
+  const gap = buckets.length > 60 ? 0 : Math.min(2, slot * 0.25);
+  const bw = Math.max(slot - gap, 0.5);
+  const bx = (i) => i * slot + gap / 2;
+  const height = (value) => (value / peak) * H;
+
+  const NS = "http://www.w3.org/2000/svg";
+  const svg = document.createElementNS(NS, "svg");
+  svg.setAttribute("viewBox", "0 -6 " + W + " " + (H + 12));
+  svg.setAttribute("class", "chart");
+  svg.setAttribute("preserveAspectRatio", "none");
+
+  // A line at the peak and one at the floor, so a curve has something to be
+  // high against. Nothing between them: gridlines on a chart this short are
+  // texture, not information.
+  for (const at of [0, H]) {
+    const rule = document.createElementNS(NS, "line");
+    rule.setAttribute("x1", "0");
+    rule.setAttribute("x2", String(W));
+    rule.setAttribute("y1", String(at));
+    rule.setAttribute("y2", String(at));
+    rule.setAttribute("class", "chart-rule");
+    svg.appendChild(rule);
+  }
+
+  // Behind the columns, so the one under the pointer is picked out without
+  // anything being drawn over it.
+  const highlight = document.createElementNS(NS, "rect");
+  highlight.setAttribute("y", "0");
+  highlight.setAttribute("height", String(H));
+  highlight.setAttribute("width", String(slot));
+  highlight.setAttribute("class", "chart-hover");
+  highlight.setAttribute("opacity", "0");
+  svg.appendChild(highlight);
+
+  buckets.forEach((bucket, i) => {
+    let top = H;
+    // Drawn from the bottom up in the legend's order, so a model keeps the
+    // same place in every column and the eye can follow one band across.
+    lines.forEach((line, index) => {
+      const value = line.points[i] || 0;
+      if (!value) return;
+      const h = height(value);
+      top -= h;
+      const bar = document.createElementNS(NS, "rect");
+      bar.setAttribute("x", String(bx(i)));
+      bar.setAttribute("y", String(top));
+      bar.setAttribute("width", String(bw));
+      bar.setAttribute("height", String(Math.max(h, 0.75)));
+      bar.setAttribute("class", "chart-bar s" + (index % 6));
+      svg.appendChild(bar);
+    });
+  });
+  card.appendChild(svg);
+
+  // What the chart is worth reading against: the tallest column, and the two
+  // ends of the window. Rendered as text beside the plot rather than as axis
+  // ticks, which at this size would be four numbers fighting for two pixels.
+  const scale = el("div", "chart-scale");
+  const reading = el("span", null, "$" + peak.toFixed(2));
+  scale.appendChild(reading);
+  scale.appendChild(el("span", "muted", t(series.step === "week" ? "usage.perWeek" : "usage.perDay")));
+  card.appendChild(scale);
+
+  /*
+   * What the column under the pointer says.
+   *
+   * Six lines and no readout is a picture of a shape, not a number: the spike
+   * is visible and unattributable. Rather than a floating tooltip — which
+   * needs placement, an edge case at both ends, and something to dismiss it —
+   * the line that was already showing the peak shows the hovered column
+   * instead, and goes back to the peak when the pointer leaves.
+   */
+  svg.addEventListener("mousemove", (e) => {
+    const box = svg.getBoundingClientRect();
+    const raw = Math.floor(((e.clientX - box.left) / box.width) * buckets.length);
+    const at = Math.max(0, Math.min(buckets.length - 1, raw));
+    const bucket = buckets[at];
+    highlight.setAttribute("x", String(at * slot));
+    highlight.setAttribute("opacity", "1");
+    // The model that carried the column, when one of them did: on a day with
+    // one model it is the whole answer, and on a mixed one it is the part
+    // worth reading before the legend.
+    const top = lines
+      .map((line) => ({ model: line.model, cost: line.points[at] || 0 }))
+      .sort((a, b) => b.cost - a.cost)[0];
+    const on = new Date(bucket.at).toLocaleDateString();
+    reading.textContent = bucket.costUsd
+      ? on + "  ·  $" + bucket.costUsd.toFixed(2) + (top && top.cost ? "  ·  " + top.model : "")
+      : on + "  ·  " + t("usage.nothing");
+  });
+  svg.addEventListener("mouseleave", () => {
+    highlight.setAttribute("opacity", "0");
+    reading.textContent = "$" + peak.toFixed(2);
+  });
+
+  const span = el("div", "chart-span muted small");
+  span.appendChild(el("span", null, new Date(buckets[0].at).toLocaleDateString()));
+  span.appendChild(el("span", null, new Date(buckets[buckets.length - 1].at).toLocaleDateString()));
+  card.appendChild(span);
+
+  const legend = el("div", "chart-legend");
+  lines.forEach((line, index) => {
+    const entry = el("span", "legend-item");
+    entry.appendChild(el("span", "swatch s" + (index % 6)));
+    entry.appendChild(el("span", null, line.model));
+    legend.appendChild(entry);
+  });
+  card.appendChild(legend);
+  return card;
+}
+
+async function showUsage() {
+  // The days ride along only when they are the window being asked for; the
+  // server ignores them otherwise, and a preset request that carried a stale
+  // pair would be one keystroke from answering for the wrong fortnight.
+  const asked = usageRange === "custom" && usageFrom && usageTo
+    ? "/usage?range=custom&from=" + encodeURIComponent(usageFrom) + "&to=" + encodeURIComponent(usageTo)
+    : "/usage?range=" + encodeURIComponent(usageRange);
+  const body = await getJson(asked);
+  panelBody.replaceChildren();
+  if (body.error) return void panelBody.appendChild(panelError(body.error));
+
+  const panel = el("div", "panel usage");
+  const head = el("div", "row-head");
+  head.appendChild(el("h2", null, t("usage.title")));
+  // Back to where this was opened from, because it was opened from a row in
+  // Settings and the sidebar row it lit is already showing as active — with
+  // no way out, the only exit is a sidebar click that looks like a no-op.
+  const back = el("button", "ghost", t("usage.back"));
+  back.type = "button";
+  back.addEventListener("click", () => {
+    setNav("nav-settings");
+    void showSettings();
+  });
+  head.appendChild(back);
+  panel.appendChild(head);
+
+  /*
+   * How far back the page is asking about.
+   *
+   * A segmented control rather than a dropdown: there are four answers, they
+   * are read left to right as increasing time, and a menu would hide three of
+   * them behind the one that happens to be chosen. It reloads rather than
+   * filtering what is already here — the totals, the models and the sessions
+   * all answer for the window, and a page where the chart moved and the
+   * figures above it did not would be lying about one of them.
+   */
+  const picked = body.range || "30d";
+  // What the server says the window is, which is not always what was asked
+  // for: a picked range is clamped to today and to a year, and the calendar
+  // has to open on the days the figures beside it are actually counting.
+  const today = new Date().toISOString().slice(0, 10);
+  const shownFrom = body.from || today;
+  const shownTo = body.to || today;
+  const windowRow = el("div", "usage-window");
+  const ranges = el("div", "seg");
+  for (const id of ["7d", "30d", "90d", "all"]) {
+    const button = el("button", "seg-item" + (id === picked ? " on" : ""), t("usage.range." + id));
+    button.type = "button";
+    button.addEventListener("click", () => {
+      if (id === picked) return;
+      usageRange = id;
+      void showUsage();
+    });
+    ranges.appendChild(button);
+  }
+  windowRow.appendChild(ranges);
+  /*
+   * A window the presets cannot express.
+   *
+   * Beside them rather than as a fifth item on the same control: the presets
+   * are one click each and this one opens a calendar, and a segmented control
+   * whose last segment behaves differently from the other four is a control
+   * that has to be learned. It shows the days it is showing once it is the
+   * chosen window, so the page never has a range on it that nothing on screen
+   * names.
+   */
+  windowRow.appendChild(dateRangePicker({
+    from: shownFrom,
+    to: shownTo,
+    max: today,
+    maxDays: MAX_CUSTOM_DAYS,
+    active: picked === "custom",
+    onApply: (from, to) => {
+      usageRange = "custom";
+      usageFrom = from;
+      usageTo = to;
+      void showUsage();
+    },
+  }));
+  panel.appendChild(windowRow);
+
+  // Prompt tokens only. The cache share is a share of what was sent, and
+  // nothing that was generated could have come from a cache.
+  const sent = (row) => (row.input || 0) + (row.cacheRead || 0) + (row.cacheWrite || 0);
+  const moved = (row) => sent(row) + (row.output || 0);
+  // Null unless something actually came back out of the cache. A provider
+  // without a prompt cache reports no cache tokens at all, and "0% cached"
+  // against its name reads as a cache that keeps missing rather than one that
+  // was never there.
+  const cachePct = (row) =>
+    row.cacheRead ? Math.round((row.cacheRead / sent(row)) * 100) : null;
+
+  // Two strings rather than "1 session(s)": every other count on this page is
+  // read as a sentence, and one that cannot decide its own plural reads as a
+  // machine talking.
+  const overSessions = (n) =>
+    n === 1 ? t("usage.overSession") : t("usage.overSessions", { n });
+
+  const totals = body.totals || {};
+  const figures = el("div", "row-card figures");
+  const figure = (label, value, sub) => {
+    const box = el("div", "figure");
+    box.appendChild(el("div", "figure-label", label));
+    box.appendChild(el("div", "figure-value", value));
+    if (sub) box.appendChild(el("div", "muted small", sub));
+    figures.appendChild(box);
+  };
+  // Two decimals, not four. This is a bill, and a bill is read in cents; the
+  // fourth decimal belongs on the line under the composer, where the number
+  // being watched is what one more message adds.
+  figure(
+    t("usage.spend"),
+    "$" + (totals.costUsd || 0).toFixed(2),
+    overSessions(totals.sessions || 0),
+  );
+  figure(
+    t("usage.tokensLabel"),
+    formatTokens(moved(totals)),
+    t("usage.inOut", {
+      in: formatTokens(sent(totals)),
+      out: formatTokens(totals.output || 0),
+    }),
+  );
+  // An em dash, not 0%: a provider without a prompt cache reports no cache
+  // tokens at all, and "0% cached" would read as a cache that keeps missing.
+  const pct = cachePct(totals);
+  figure(
+    t("usage.cacheLabel"),
+    pct === null ? "—" : pct + "%",
+    t("usage.cacheSplit", {
+      read: formatTokens(totals.cacheRead || 0),
+      written: formatTokens(totals.cacheWrite || 0),
+    }),
+  );
+  panel.appendChild(figures);
+
+  const models = body.models || [];
+  if (models.length) panel.appendChild(usageChart(body, models));
+
+  if (models.length) {
+    panel.appendChild(el("h3", "section-title", t("usage.byModel")));
+    for (const entry of models) {
+      const row = el("div", "row-card");
+      const line = el("div", "row-head");
+      line.appendChild(el("span", "row-title", entry.model));
+      line.appendChild(el("span", "muted small", "$" + (entry.costUsd || 0).toFixed(2)));
+      row.appendChild(line);
+      const bits = [
+        t("usage.tokens", { n: formatTokens(moved(entry)) }),
+        overSessions(entry.sessions),
+      ];
+      const share = cachePct(entry);
+      if (share !== null) bits.push(t("usage.cached", { pct: share }));
+      row.appendChild(el("div", "muted small", bits.join("  ·  ")));
+      panel.appendChild(row);
+    }
+  }
+
+  const sessions = body.sessions || [];
+  if (sessions.length) {
+    panel.appendChild(el("h3", "section-title", t("usage.bySession")));
+    for (const entry of sessions) {
+      const row = el("div", "row-card");
+      const line = el("div", "row-head");
+      line.appendChild(el("span", "row-title", entry.title || t("session.untitled")));
+      if (entry.current) line.appendChild(el("span", "tag", t("usage.thisSession")));
+      line.appendChild(el("span", "muted small", "$" + (entry.costUsd || 0).toFixed(4)));
+      row.appendChild(line);
+      const detail = [
+        ago(entry.updatedAt),
+        entry.model,
+        t("usage.tokens", { n: formatTokens(moved(entry)) }),
+      ];
+      // The reason one session cost what it did is usually here: two runs of
+      // the same length differ by what the cache carried, and per-session is
+      // the only place that comparison can be made.
+      const hit = cachePct(entry);
+      if (hit !== null) detail.push(t("usage.cached", { pct: hit }));
+      row.appendChild(el("div", "muted small", detail.join("  ·  ")));
+      panel.appendChild(row);
+    }
+  }
+
+  if (!models.length) panel.appendChild(el("p", "muted", t("usage.none")));
+
+  // What the numbers cover, said in the place where someone would otherwise
+  // assume they cover everything.
+  panel.appendChild(el("p", "muted small",
+    body.truncated
+      ? t("usage.scopeCapped", { n: body.scanned })
+      : t("usage.scope")));
+  panelBody.appendChild(panel);
+}
+
+/**
+ * Every artifact this machine has made, in one place, with a way to find one.
+ *
+ * The transcript card that announced an artifact is still its index, and for
+ * one or two that is enough. It stops being enough at three: the shelf shows
+ * one artifact at a time and deliberately carries no list of its own, so
+ * getting back to the first one meant scrolling the conversation until the
+ * card came past. This is that list, and it is the only place in the app that
+ * has one.
+ *
+ * It used to show only what the process had loaded — the open tabs — because
+ * that is where the artifacts live in memory. That made the answer depend on
+ * which tabs happened to be open: a chart from last week was simply absent,
+ * and the note at the bottom explaining why did not make it findable. The
+ * server folds the revision logs now, so what is listed is what exists.
+ *
+ * Which is also why there is a search box. A list of everything is only a
+ * better answer than a list of some things if you can get to the one you
+ * want, and by the second week that means typing part of its name rather than
+ * scrolling a page of sessions.
+ */`;
+//# sourceMappingURL=usage.js.map