@oharness/server 0.9.0 → 0.9.2

package/dist/page/client/usage.js

@@ -597,7 +597,11 @@ function dateRangePicker(options) {
  * 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) {
+function usageChart(body, models, opts) {
+  // How a column is read out, and what its date is: dollars by the day for
+  // this machine's transcripts, credits by the day or hour for the account.
+  const money = (opts && opts.money) || ((value) => "$" + value.toFixed(2));
+  const when = (opts && opts.when) || ((at) => new Date(at).toLocaleDateString());
   const series = body.series || {};
   const buckets = series.buckets || [];
   const card = el("div", "row-card chart-card");
@@ -683,9 +687,10 @@ function usageChart(body, models) {
   // 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));
+  const reading = el("span", null, money(peak));
   scale.appendChild(reading);
-  scale.appendChild(el("span", "muted", t(series.step === "week" ? "usage.perWeek" : "usage.perDay")));
+  scale.appendChild(el("span", "muted",
+    t(series.step === "week" ? "usage.perWeek" : series.step === "hour" ? "usage.perHour" : "usage.perDay")));
   card.appendChild(scale);
 
   /*
@@ -710,21 +715,24 @@ function usageChart(body, models) {
     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();
+    const on = when(bucket.at);
     reading.textContent = bucket.costUsd
-      ? on + "  ·  $" + bucket.costUsd.toFixed(2) + (top && top.cost ? "  ·  " + top.model : "")
+      ? on + "  ·  " + money(bucket.costUsd) + (top && top.cost ? "  ·  " + top.model : "")
       : on + "  ·  " + t("usage.nothing");
   });
   svg.addEventListener("mouseleave", () => {
     highlight.setAttribute("opacity", "0");
-    reading.textContent = "$" + peak.toFixed(2);
+    reading.textContent = money(peak);
   });
 
   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()));
+  span.appendChild(el("span", null, when(buckets[0].at)));
+  span.appendChild(el("span", null, when(buckets[buckets.length - 1].at)));
   card.appendChild(span);
 
+  // One band is its own caption: the model is already named in the list
+  // under the chart and in the readout above, and a legend of one is noise.
+  if (lines.length < 2) return card;
   const legend = el("div", "chart-legend");
   lines.forEach((line, index) => {
     const entry = el("span", "legend-item");
@@ -736,18 +744,34 @@ function usageChart(body, models) {
   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));
+/**
+ * Whose figures the page shows: the account's ledger, or this machine's
+ * transcripts. Null until someone picks, which means the account when there
+ * is one — that is where every charge is, and this machine's transcripts are
+ * only the chat that happened on it.
+ */
+let usageSource = null;
+/** Whether the last look found an account, so this machine's view can offer the other. */
+let usageSignedIn = false;
+/** Which kind of spend the account view is narrowed to. */
+let usageKind = "all";
+const USAGE_KINDS = ["all", "text", "image", "video", "audio"];
 
-  const panel = el("div", "panel usage");
+/**
+ * The window being asked about, as a query on path.
+ *
+ * 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.
+ */
+function usageQuery(path) {
+  return usageRange === "custom" && usageFrom && usageTo
+    ? path + "?range=custom&from=" + encodeURIComponent(usageFrom) + "&to=" + encodeURIComponent(usageTo)
+    : path + "?range=" + encodeURIComponent(usageRange);
+}
+
+/** The page's heading, its way back, and — for an account — whose figures these are. */
+function usageHead(panel) {
   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
@@ -759,29 +783,45 @@ async function showUsage() {
     setNav("nav-settings");
     void showSettings();
   });
-  head.appendChild(back);
-  panel.appendChild(head);
-
   /*
-   * How far back the page is asking about.
+   * Whose figures these are, as a small switch in the heading rather than a
+   * third row of tabs.
    *
-   * 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.
+   * The account is the answer almost every visit wants; this machine's
+   * transcripts are the second look, for chat on a key someone brought. A
+   * switch as loud as the window and the kind would ask to be read first.
    */
+  const actions = el("span", "usage-head-actions");
+  if (usageSignedIn) {
+    const chosen = usageSource || "account";
+    const box = el("div", "seg usage-source");
+    for (const id of ["account", "device"]) {
+      const button = el("button", "seg-item" + (id === chosen ? " on" : ""), t("usage.source." + id));
+      button.type = "button";
+      button.addEventListener("click", () => {
+        if (id === chosen) return;
+        usageSource = id;
+        void showUsage();
+      });
+      box.appendChild(button);
+    }
+    actions.appendChild(box);
+  }
+  actions.appendChild(back);
+  head.appendChild(actions);
+  panel.appendChild(head);
+}
+
+/** The window presets and the calendar, reloading the page on a change. */
+function usageWindowRow(body, presets) {
   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 row = el("div", "usage-window");
   const ranges = el("div", "seg");
-  for (const id of ["7d", "30d", "90d", "all"]) {
+  for (const id of presets) {
     const button = el("button", "seg-item" + (id === picked ? " on" : ""), t("usage.range." + id));
     button.type = "button";
     button.addEventListener("click", () => {
@@ -791,20 +831,10 @@ async function 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,
+  row.appendChild(ranges);
+  row.appendChild(dateRangePicker({
+    from: body.from || today,
+    to: body.to || today,
     max: today,
     maxDays: MAX_CUSTOM_DAYS,
     active: picked === "custom",
@@ -815,7 +845,374 @@ async function showUsage() {
       void showUsage();
     },
   }));
-  panel.appendChild(windowRow);
+  return row;
+}
+
+/** Credits as a bill reads them: at most two decimals, and no trailing zeros. */
+const usageCredits = (micro) => t("usage.credits", { n: creditsOf(micro) });
+const usageCalls = (n) => (n === 1 ? t("usage.callOne") : t("usage.calls", { n: n.toLocaleString(LOCALE) }));
+const usageSeconds = (n) => t("usage.seconds", { n: Math.round(n).toLocaleString(LOCALE) });
+
+/**
+ * The account's spend: chat from every device, and every image, video and
+ * clip of audio, from the same ledger the site's usage page reads.
+ *
+ * Split by kind the way the site splits it, because a credit spent on a video
+ * and one spent on a chat are the same money bought very differently — and
+ * the question someone opening this after a week of generating is asking is
+ * "what did the pictures cost", which a list of forty models does not answer.
+ */
+function showAccountUsage(body) {
+  panelBody.replaceChildren();
+  const panel = el("div", "panel usage");
+  usageHead(panel);
+
+  if (body.unavailable) {
+    panel.appendChild(el("p", "muted",
+      t(body.unavailable === "outdated" ? "usage.accountOutdated" : "usage.accountUnreachable")));
+    if (body.error) panel.appendChild(el("p", "muted small", body.error));
+    panelBody.appendChild(panel);
+    return;
+  }
+
+  panel.appendChild(usageWindowRow(body, ["24h", "7d", "30d", "90d"]));
+  const summary = body.summary || {};
+  const byKind = summary.byKind || {};
+  const kind = body.kind || "all";
+
+  /*
+   * The kinds, as the figures themselves.
+   *
+   * Each card is what that kind cost and how often it ran, and choosing one is
+   * the filter — so the split is read before anything is chosen, and there is
+   * no row of tabs repeating the numbers under it. What the chosen kind was
+   * counted in (tokens, pictures, seconds) is the line under the cards; the
+   * others are not known until they are chosen, because the ledger is read
+   * for one kind at a time.
+   */
+  const cards = el("div", "usage-kinds");
+  const total = Object.values(byKind).reduce((sum, each) => sum + (each.spentMicro || 0), 0);
+  const allCalls = Object.values(byKind).reduce((sum, each) => sum + (each.calls || 0), 0);
+  for (const id of USAGE_KINDS) {
+    const each = id === "all" ? { spentMicro: total, calls: allCalls } : byKind[id] || {};
+    const card = el("button", "usage-kind" + (id === kind ? " on" : "") + (each.spentMicro || each.calls ? "" : " empty"));
+    card.type = "button";
+    card.setAttribute("aria-pressed", id === kind ? "true" : "false");
+    card.appendChild(el("span", "usage-kind-label", t("usage.kind." + id)));
+    card.appendChild(el("span", "usage-kind-value", creditsOf(each.spentMicro || 0)));
+    card.appendChild(el("span", "usage-kind-sub", usageCalls(each.calls || 0)));
+    card.addEventListener("click", () => {
+      if (id === kind) return;
+      usageKind = id;
+      void showUsage();
+    });
+    cards.appendChild(card);
+  }
+  panel.appendChild(cards);
+
+  const media = summary.media || {};
+  const tokens = (summary.inputTokens || 0) + (summary.outputTokens || 0);
+  const counted = [];
+  if (tokens) {
+    counted.push(t("usage.tokens", { n: formatTokens(tokens) }) + "  (" + t("usage.inOut", {
+      in: formatTokens(summary.inputTokens || 0),
+      out: formatTokens(summary.outputTokens || 0),
+    }) + ")");
+  }
+  if (media.images) counted.push(t("usage.images", { n: media.images.toLocaleString(LOCALE) }));
+  if (media.videoSeconds) counted.push(t("usage.videoSeconds", { n: usageSeconds(media.videoSeconds) }));
+  if (media.audioSeconds) counted.push(t("usage.audioSeconds", { n: usageSeconds(media.audioSeconds) }));
+  if (media.characters) counted.push(t("usage.characters", { n: media.characters.toLocaleString(LOCALE) }));
+  if (counted.length) panel.appendChild(el("div", "muted small usage-counted", counted.join("   ·   ")));
+
+  const series = summary.series || [];
+  if (series.length) {
+    const hourly = (summary.days || []).some((day) => day.at.length > 10);
+    const chartBody = {
+      series: {
+        step: hourly ? "hour" : "day",
+        buckets: (summary.days || []).map((day) => ({
+          at: day.at,
+          costUsd: (day.spentMicro || 0) / 1000000,
+          models: Object.fromEntries(Object.entries(day.byKey || {}).map(([key, value]) => [key, value / 1000000])),
+        })),
+      },
+    };
+    panel.appendChild(usageChart(chartBody, series.map((entry) => ({ model: entry.key })), {
+      money: (value) => usageCredits(value * 1000000),
+      // The ledger's buckets are UTC days and hours, and are read as such: a
+      // day drawn in local time would put yesterday's evening under today.
+      when: (at) => at.length > 10
+        ? new Date(at + ":00:00Z").toLocaleString(LOCALE, { month: "short", day: "numeric", hour: "numeric" })
+        : new Date(at + "T00:00:00Z").toLocaleDateString(LOCALE, { timeZone: "UTC" }),
+    }));
+
+    // By model, and under "all" by kind first: forty models in one list is a
+    // list nobody reads, and the kind is the first thing anyone looks for.
+    const groups = kind === "all" ? USAGE_KINDS.slice(1) : [kind];
+    for (const group of groups) {
+      const rows = series.filter((entry) => entry.kind === group);
+      if (!rows.length) continue;
+      const title = el("h3", "section-title usage-kind-title");
+      title.appendChild(el("span", null, kind === "all" ? t("usage.kind." + group) : t("usage.byModel")));
+      title.appendChild(el("span", "muted small",
+        usageCredits(rows.reduce((sum, entry) => sum + (entry.spentMicro || 0), 0))));
+      panel.appendChild(title);
+      const groupTotal = rows.reduce((sum, entry) => sum + (entry.spentMicro || 0), 0);
+      panel.appendChild(usageScrollList(rows, (entry) => usageModelRow(
+        entry.key,
+        usageCredits(entry.spentMicro || 0),
+        groupTotal ? (entry.spentMicro || 0) / groupTotal : 0,
+        usageSeriesFacts(entry),
+      )));
+    }
+  } else {
+    panel.appendChild(el("p", "muted", t(kind === "all" ? "usage.none" : "usage.kindNone")));
+  }
+
+  // What the numbers cover, and where the full ledger lives.
+  panel.appendChild(el("p", "muted small", t(body.team ? "usage.teamScope" : "usage.accountScope")));
+  if (body.site) {
+    const open = el("button", "ghost", t("usage.openSite"));
+    open.type = "button";
+    open.addEventListener("click", () =>
+      window.open(body.site + "/" + LOCALE + "/dashboard/usage", "_blank", "noopener"));
+    panel.appendChild(open);
+  }
+  panelBody.appendChild(panel);
+}
+
+/** Sessions per request on the sessions page. */
+const USAGE_SESSIONS_PAGE = 50;
+
+/** Prompt tokens sent, and everything moved, for a session row. */
+const usageSent = (row) => (row.input || 0) + (row.cacheRead || 0) + (row.cacheWrite || 0);
+const usageMoved = (row) => usageSent(row) + (row.output || 0);
+
+/**
+ * One session: what it cost, when, on what, and how much of it the cache
+ * carried — and a way back into it, which is what someone scanning a list of
+ * what they spent usually wants next.
+ */
+function usageSessionRow(entry) {
+  const row = el("div", "row-card usage-session");
+  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 usage-amount", "$" + (entry.costUsd || 0).toFixed(4)));
+  row.appendChild(line);
+  const detail = [ago(entry.updatedAt), entry.model, t("usage.tokens", { n: formatTokens(usageMoved(entry)) })];
+  // The reason one session cost what it did is usually here: two runs of the
+  // same length differ by what the cache carried.
+  if (entry.cacheRead) detail.push(t("usage.cached", { pct: Math.round((entry.cacheRead / usageSent(entry)) * 100) }));
+  row.appendChild(el("div", "muted small", detail.join("  ·  ")));
+  row.tabIndex = 0;
+  row.setAttribute("role", "button");
+  const open = () => {
+    setNav(null);
+    if (panes.has(entry.id)) void focusTab(entry.id);
+    else void openSession(entry.id, entry.cwd);
+  };
+  row.addEventListener("click", open);
+  row.addEventListener("keydown", (event) => { if (event.key === "Enter") open(); });
+  return row;
+}
+
+/**
+ * One model: its name with what it cost at the top right, then a bar for its
+ * share of the list's spend with what it moved written across it. The bar is
+ * what makes a list of forty readable — the two that carried the bill stand
+ * out before a number is read.
+ */
+function usageModelRow(name, amount, share, details) {
+  const row = el("div", "row-card usage-model");
+  const line = el("div", "row-head");
+  line.appendChild(el("span", "row-title", name));
+  line.appendChild(el("span", "muted small usage-amount", amount));
+  row.appendChild(line);
+  const track = el("div", "usage-share");
+  const fill = el("span", "usage-share-fill");
+  // A sliver for anything that cost something, so it does not read as zero.
+  fill.style.width = (share > 0 ? Math.max(share * 100, 0.8) : 0).toFixed(2) + "%";
+  track.appendChild(fill);
+  const pct = share >= 0.995 ? "100%" : share >= 0.01 ? Math.round(share * 100) + "%" : share > 0 ? "<1%" : "0%";
+  const label = el("span", "usage-share-label");
+  label.appendChild(el("span", "usage-model-pct", pct));
+  if (details.length) label.appendChild(el("span", "usage-share-facts", details.join("  ·  ")));
+  track.appendChild(label);
+  row.appendChild(track);
+  return row;
+}
+
+/** What an account row moved: its tokens, or the media it made. */
+function usageSeriesFacts(entry) {
+  const facts = [];
+  const tokens = (entry.inputTokens || 0) + (entry.outputTokens || 0);
+  if (tokens) facts.push(t("usage.tokens", { n: formatTokens(tokens) }));
+  const media = entry.media || {};
+  if (media.images) facts.push(t("usage.images", { n: media.images.toLocaleString(LOCALE) }));
+  if (media.videoSeconds) facts.push(t("usage.videoSeconds", { n: usageSeconds(media.videoSeconds) }));
+  if (media.audioSeconds) facts.push(t("usage.audioSeconds", { n: usageSeconds(media.audioSeconds) }));
+  if (media.characters) facts.push(t("usage.characters", { n: media.characters.toLocaleString(LOCALE) }));
+  return facts;
+}
+
+/** How many rows a model list draws at a time. */
+const USAGE_LIST_PAGE = 20;
+
+/**
+ * A list of models in a box of its own height.
+ *
+ * A heavy month on OpenRouter is a hundred models, and drawn in full they
+ * pushed the sessions and the scope note a dozen screens down. The box keeps
+ * the page's shape and scrolls on its own; rows are drawn a page at a time as
+ * its bottom comes near, because most visits read the top few.
+ */
+function usageScrollList(entries, render) {
+  const box = el("div", "usage-list");
+  let shown = 0;
+  function more() {
+    for (const entry of entries.slice(shown, shown + USAGE_LIST_PAGE)) box.appendChild(render(entry));
+    shown = Math.min(entries.length, shown + USAGE_LIST_PAGE);
+    if (shown >= entries.length) box.removeEventListener("scroll", near);
+  }
+  // Read off the scroll position rather than an observer on a sentinel: a
+  // sentinel that stays in view after a page lands never re-enters it, and
+  // the list stopped at the second page.
+  function near() {
+    if (box.scrollTop + box.clientHeight >= box.scrollHeight - 160) more();
+  }
+  more();
+  if (shown < entries.length) box.addEventListener("scroll", near, { passive: true });
+  return box;
+}
+
+/** What the sessions page is searching for, kept while the page is open. */
+let usageSessionsQuery = "";
+
+/**
+ * Every session that spent something on this machine, newest first — the
+ * Sessions page in the sidebar.
+ *
+ * Read a page at a time and drawn as the list is scrolled, because a machine
+ * used daily has thousands and the first screen is the one almost always
+ * wanted. The search runs on the server, so it finds sessions that have not
+ * been loaded yet rather than filtering the ones that have.
+ */
+async function showUsageSessions() {
+  panelBody.replaceChildren();
+  const panel = el("div", "panel usage");
+  const head = el("div", "row-head");
+  head.appendChild(el("h2", null, t("usage.allSessions")));
+  panel.appendChild(head);
+
+  const search = el("input", "art-search");
+  search.type = "search";
+  search.placeholder = t("usage.searchSessions");
+  search.spellcheck = false;
+  search.autocomplete = "off";
+  search.value = usageSessionsQuery;
+  panel.appendChild(search);
+
+  const count = el("div", "muted small usage-sessions-count");
+  panel.appendChild(count);
+  const list = el("div", "usage-sessions");
+  panel.appendChild(list);
+  const foot = el("div", "muted small usage-sessions-foot");
+  panel.appendChild(foot);
+  panelBody.appendChild(panel);
+
+  // Which search the rows on screen belong to. A reply to an older search
+  // that lands after a newer one started is dropped, not appended.
+  let generation = 0;
+  let offset = 0;
+  let more = true;
+  let loading = false;
+
+  async function load() {
+    if (loading || !more) return;
+    loading = true;
+    const asked = generation;
+    foot.textContent = t("usage.loading");
+    const body = await getJson("/usage/sessions?limit=" + USAGE_SESSIONS_PAGE + "&offset=" + offset +
+      (usageSessionsQuery ? "&q=" + encodeURIComponent(usageSessionsQuery) : ""));
+    loading = false;
+    if (asked !== generation || shownPanel !== "nav-sessions") return;
+    if (body.error) {
+      foot.textContent = body.error;
+      return;
+    }
+    for (const entry of body.sessions || []) list.appendChild(usageSessionRow(entry));
+    offset += (body.sessions || []).length;
+    more = Boolean(body.more);
+    count.textContent = body.total === 1 ? t("usage.sessionsOne") : t("usage.sessionsCount", { n: body.total || 0 });
+    foot.textContent = !body.total
+      ? t(usageSessionsQuery ? "usage.sessionsNoMatch" : "usage.none")
+      : more ? "" : body.truncated ? t("usage.sessionsCapped") : t("usage.sessionsEnd");
+    // A first page shorter than the window leaves nothing to scroll, so the
+    // observer below would never fire; ask again until the list fills it.
+    if (more && sentinel.getBoundingClientRect().top < panelView.clientHeight + 400) void load();
+  }
+
+  function restart() {
+    generation += 1;
+    offset = 0;
+    more = true;
+    loading = false;
+    list.replaceChildren();
+    void load();
+  }
+
+  // Loads the next page as the bottom of the list comes near, not when it is
+  // reached, so scrolling does not stop at a spinner.
+  const sentinel = el("div", "usage-sessions-sentinel");
+  panel.appendChild(sentinel);
+  const observer = new IntersectionObserver((entries) => {
+    if (shownPanel !== "nav-sessions") return void observer.disconnect();
+    if (entries.some((entry) => entry.isIntersecting)) void load();
+  }, { root: panelView, rootMargin: "0px 0px 400px 0px" });
+  observer.observe(sentinel);
+
+  let typing = null;
+  search.addEventListener("input", () => {
+    clearTimeout(typing);
+    typing = setTimeout(() => {
+      usageSessionsQuery = search.value.trim();
+      restart();
+    }, 250);
+  });
+  restart();
+  search.focus();
+}
+
+async function showUsage() {
+  if (usageSource !== "device") {
+    const account = await getJson(
+      usageQuery("/usage/account") + (usageKind !== "all" ? "&kind=" + encodeURIComponent(usageKind) : ""),
+    );
+    if (shownPanel !== "usage") return;
+    usageSignedIn = Boolean(account.signedIn);
+    if (account.signedIn) return void showAccountUsage(account);
+  }
+  const body = await getJson(usageQuery("/usage"));
+  if (shownPanel !== "usage") return;
+  panelBody.replaceChildren();
+  if (body.error) return void panelBody.appendChild(panelError(body.error));
+
+  const panel = el("div", "panel usage");
+  usageHead(panel);
+
+  /*
+   * 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.
+   */
+  panel.appendChild(usageWindowRow(body, ["7d", "30d", "90d", "all"]));
 
   // Prompt tokens only. The cache share is a share of what was sent, and
   // nothing that was generated could have come from a cache.
@@ -877,46 +1274,11 @@ async function showUsage() {
 
   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);
-    }
+    const spent = totals.costUsd || 0;
+    panel.appendChild(usageScrollList(models, (entry) => {
+      return usageModelRow(entry.model, "$" + (entry.costUsd || 0).toFixed(2), spent ? (entry.costUsd || 0) / spent : 0,
+        [t("usage.tokens", { n: formatTokens(moved(entry)) })]);
+    }));
   }
 
   if (!models.length) panel.appendChild(el("p", "muted", t("usage.none")));

package/dist/page/client/usage.js.map

@@ -1 +1 @@
-{"version":3,"file":"usage.js","sourceRoot":"","sources":["../../../src/page/client/usage.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAk7B3B,CAAC"}
+{"version":3,"file":"usage.js","sourceRoot":"","sources":["../../../src/page/client/usage.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4xC3B,CAAC"}