@weiping/mbridge-page 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weiping/mbridge-page",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "mbridge's usage at a glance inside magpie: what magpie's ledger recorded, and where mbridge's own status page is.",
   "license": "MIT",
   "keywords": [
@@ -33,6 +33,12 @@
       "file": "page/index.html",
       "icon": "page/icon.svg"
     },
-    "permissions": ["usage:summary"]
+    "permissions": [
+      "usage:summary"
+    ],
+    "options": {
+      "period": "7d",
+      "sort": "tokens"
+    }
   }
 }

package/page/app.js

@@ -1,161 +1,153 @@
-/* app.js reads magpie's ledger and draws it. It never reaches mbridge:
-   the sandbox a magpie page runs in has no network at all, and the only
-   thing this page needs is what magpie already recorded (SP14 §2). */
-
-import { tiles, rows, periods, sorts, header } from "./view.js";
-
-const REFRESH_MS = 60000; // magpie's ledger moves slowly enough
-const STATUS_URL = "http://127.0.0.1:3426/status";
-const OPTIONS_KEY = "mbridge-page"; // magpie options keep the period and the sort
-
-const state = { period: "7d", sort: "tokens", summary: null, error: null, lang: "en" };
-
-function $(id) {
-  return document.getElementById(id);
-}
-
-function segment(container, items, current, onPick) {
-  container.textContent = "";
-  for (const item of items) {
-    const b = document.createElement("button");
-    b.type = "button";
-    b.className = "seg" + (item.key === current ? " seg-on" : "");
-    b.textContent = item.label;
-    b.addEventListener("click", () => onPick(item.key));
-    container.appendChild(b);
+// app.js reads magpie's ledger and draws it. It never reaches mbridge:
+// the sandbox a magpie page runs in has no network at all (connect-src
+// 'none'), and the only thing this page needs is what magpie already
+// recorded (SP14 §2).
+//
+// A classic script, like the community's usage page: it reads the view
+// from globalThis.
+(async () => {
+  const V = globalThis.MbridgeView;
+  const $ = (id) => document.getElementById(id);
+  const theme = await magpie.ready;
+  let lang = theme.lang;
+
+  // the period and the sort live in this plugin's own options, so the
+  // page opens where it was left
+  let opts = {};
+  try {
+    opts = (await magpie.options.get()) || {};
+  } catch {
+    // no options yet: the defaults in package.json stand
+  }
+  const state = {
+    period: V.PERIODS.includes(opts.period) ? opts.period : "7d",
+    sort: V.SORTS.includes(opts.sort) ? opts.sort : "tokens",
+    summary: null,
+    error: null,
+  };
+
+  function words() {
+    const t = V.text(lang);
+    document.querySelectorAll("[data-t]").forEach((e) => {
+      e.textContent = t[e.dataset.t];
+    });
+    $("status").textContent = t.status;
+    $("restart").textContent = t.restart;
+    $("cmd").textContent = "mbridge service restart";
   }
-}
-
-function render() {
-  const t = header(state.summary, state.lang);
-  $("title").textContent = t.title;
-  $("subtitle").textContent = state.summary ? t.subtitle : "";
-  if (t.since) $("subtitle").textContent += " · " + t.since;
 
-  segment($("periods"), periods(state.lang), state.period, (k) => {
-    if (k === state.period) return;
-    state.period = k;
-    save();
-    load();
-  });
-  segment($("sorts"), sorts(state.lang), state.sort, (k) => {
-    state.sort = k;
-    save();
-    render();
-  });
+  function pick(group, attr, value) {
+    $(group).querySelectorAll("button").forEach((b) => {
+      b.setAttribute("aria-selected", String(b.dataset[attr] === value));
+    });
+  }
 
-  const box = $("tiles");
-  box.textContent = "";
-  for (const tile of tiles(state.summary, state.lang)) {
-    const cell = document.createElement("div");
-    cell.className = "tile";
-    const label = document.createElement("div");
-    label.className = "tile-label";
-    label.textContent = tile.label;
-    const value = document.createElement("div");
-    value.className = "tile-value";
-    value.textContent = tile.value;
-    cell.appendChild(label);
-    cell.appendChild(value);
-    if (tile.sub) {
-      const sub = document.createElement("div");
-      sub.className = "tile-sub";
-      sub.textContent = tile.sub;
-      cell.appendChild(sub);
+  function paint() {
+    pick("periods", "period", state.period);
+    pick("sorts", "sort", state.sort);
+    const s = state.summary;
+    if (!s) return;
+    $("since").textContent = V.since(s, lang);
+
+    $("tiles").replaceChildren(
+      ...V.tiles(s, lang).map((tile) => {
+        const cell = document.createElement("div");
+        cell.className = "tile";
+        for (const [cls, value] of [["k", tile.label], ["v", tile.value], ["s", tile.sub]]) {
+          if (value === undefined) continue;
+          const e = document.createElement("div");
+          e.className = cls;
+          e.textContent = value;
+          cell.append(e);
+        }
+        return cell;
+      })
+    );
+
+    const rows = V.rows(s, state.sort, lang);
+    $("rows").replaceChildren(
+      ...rows.map((r) => {
+        const tr = document.createElement("tr");
+        const name = document.createElement("td");
+        name.className = "model";
+        name.textContent = r.model;
+        const bar = document.createElement("span");
+        bar.className = "bar";
+        const fill = document.createElement("i");
+        fill.style.width = Math.max(2, Math.round(r.shareValue * 100)) + "%";
+        bar.append(fill);
+        name.append(bar);
+        const calls = document.createElement("td");
+        calls.className = "num";
+        calls.textContent = r.calls;
+        const tokens = document.createElement("td");
+        tokens.className = "num";
+        tokens.textContent = r.tokens;
+        const cost = document.createElement("td");
+        cost.className = "num";
+        cost.textContent = r.cost;
+        tr.append(name, calls, tokens, cost);
+        return tr;
+      })
+    );
+    $("empty").hidden = rows.length > 0;
+    $("empty").textContent = V.text(lang).empty;
+    $("error").hidden = !state.error;
+    if (state.error) {
+      $("error").textContent = V.text(lang).failed + ": " + state.error + " · " + V.text(lang).retry;
     }
-    box.appendChild(cell);
   }
 
-  const r = rows(state.summary, state.sort, state.lang);
-  $("models-label").textContent = r.label;
-  $("models-sort").textContent = r.sortLabel;
-  $("th-model").textContent = viewText("model");
-  $("th-calls").textContent = viewText("calls");
-  $("th-tokens").textContent = viewText("tokens");
-  $("th-cost").textContent = viewText("cost");
-
-  const body = $("rows");
-  body.textContent = "";
-  for (const item of r.items) {
-    const tr = document.createElement("tr");
-    const name = document.createElement("td");
-    name.className = "model";
-    name.textContent = item.model;
-    const bar = document.createElement("span");
-    bar.className = "bar";
-    const fill = document.createElement("i");
-    fill.style.width = Math.round(item.shareValue * 100) + "%";
-    bar.appendChild(fill);
-    name.appendChild(bar);
-    tr.appendChild(name);
-    for (const key of ["calls", "tokens", "cost"]) {
-      const td = document.createElement("td");
-      td.className = "num";
-      td.textContent = item[key];
-      tr.appendChild(td);
+  async function load() {
+    try {
+      state.summary = await magpie.read("usage:summary", { period: state.period });
+      state.error = null;
+    } catch (e) {
+      state.error = (e && e.message) || String(e);
     }
-    body.appendChild(tr);
+    paint();
   }
-  $("empty").textContent = r.items.length ? "" : t.emptyText;
 
-  $("disclaimer").textContent = t.disclaimer;
-  $("status-label").textContent = t.status + " ";
-  // the address is selectable text, not a link: the sandbox can navigate
-  // itself, but that is a one-way ticket (SP14 §2)
-  $("status-addr").textContent = t.statusWhere + " " + STATUS_URL;
-  $("restart-label").textContent = " · " + t.restart + " ";
-  $("error").textContent = state.error ? state.error + " · " + t.retry : "";
-}
+  // magpie takes one options write a second: a quick second click is
+  // saved with the next one
+  let saving = null;
+  function save() {
+    if (saving) return;
+    saving = setTimeout(async () => {
+      saving = null;
+      try {
+        opts = (await magpie.options.set({ ...opts, period: state.period, sort: state.sort })) || opts;
+      } catch {
+        // not remembering is not worth an error on the page
+      }
+    }, 1100);
+  }
 
-// viewText is one word from the page's vocabulary.
-function viewText(key) {
-  const v = globalThis.MbridgeView;
-  const l = state.lang === "zh" ? "zh" : "en";
-  return v.TEXT[l][key] || key;
-}
+  $("periods").addEventListener("click", (e) => {
+    const b = e.target.closest("button[data-period]");
+    if (!b || b.dataset.period === state.period) return;
+    state.period = b.dataset.period;
+    save();
+    load();
+  });
 
-async function load() {
-  try {
-    state.summary = await magpie.read("usage:summary", { period: state.period });
-    state.error = null;
-  } catch (err) {
-    state.error = (err && err.message) || String(err);
-  }
-  render();
-}
+  $("sorts").addEventListener("click", (e) => {
+    const b = e.target.closest("button[data-sort]");
+    if (!b || b.dataset.sort === state.sort) return;
+    state.sort = b.dataset.sort;
+    save();
+    paint();
+  });
 
-// save remembers the period and the sort in magpie's own options, so the
-// page comes back the way it was left. magpie takes one write a second.
-async function save() {
-  try {
-    const opts = (await magpie.options.get()) || {};
-    opts[OPTIONS_KEY] = { period: state.period, sort: state.sort };
-    await magpie.options.set(opts);
-  } catch {
-    // not being able to remember is not worth an error on the page
+  // the period and sort buttons carry their own words
+  for (const b of $("periods").querySelectorAll("button[data-period]")) {
+    b.textContent = V.periodLabel(b.dataset.period, lang);
   }
-}
-
-async function restore() {
-  try {
-    const opts = (await magpie.options.get()) || {};
-    const mine = opts[OPTIONS_KEY];
-    if (mine && mine.period) state.period = mine.period;
-    if (mine && mine.sort) state.sort = mine.sort;
-  } catch {
-    // the defaults stand
+  for (const b of $("sorts").querySelectorAll("button[data-sort]")) {
+    b.textContent = V.sortLabel(b.dataset.sort, lang);
   }
-}
-
-(async function start() {
-  await magpie.ready;
-  const theme = magpie.theme || {};
-  if ((theme.lang || "").toLowerCase().startsWith("zh")) state.lang = "zh";
-  if (magpie.onTheme) magpie.onTheme((t) => {
-    if ((t && t.lang || "").toLowerCase().startsWith("zh")) state.lang = "zh";
-    render();
-  });
-  await restore();
+  $("addr").textContent = V.STATUS_URL;
+  words();
   await load();
-  setInterval(load, REFRESH_MS);
-})();
+  setInterval(load, 60000);
+})();

package/page/index.html

@@ -9,50 +9,56 @@
 <script src="view.js"></script>
 </head>
 <body>
-<main id="root" class="root">
+<main class="root">
   <header class="head">
-    <h1 id="title" class="title">mbridge</h1>
-    <p id="subtitle" class="subtitle"></p>
+    <h1 data-t="title">mbridge</h1>
+    <p class="subtitle" data-t="subtitle"></p>
+    <p class="since" id="since"></p>
   </header>
 
   <div class="bar">
-    <div id="periods" class="segmented"></div>
-    <div id="sorts" class="segmented"></div>
+    <div class="segmented" id="periods">
+      <button type="button" data-period="today" aria-selected="false"></button>
+      <button type="button" data-period="7d" aria-selected="false"></button>
+      <button type="button" data-period="30d" aria-selected="false"></button>
+    </div>
+    <div class="segmented" id="sorts">
+      <button type="button" data-sort="tokens" aria-selected="false"></button>
+      <button type="button" data-sort="calls" aria-selected="false"></button>
+      <button type="button" data-sort="cost" aria-selected="false"></button>
+    </div>
   </div>
 
-  <section id="tiles" class="tiles"></section>
+  <section class="tiles" id="tiles"></section>
 
   <section class="models">
-    <div class="models-head">
-      <h2 id="models-label" class="label"></h2>
-      <span id="models-sort" class="muted"></span>
-    </div>
+    <h2 data-t="models">by model</h2>
     <table class="table">
       <thead>
         <tr>
-          <th id="th-model"></th>
-          <th class="num" id="th-calls"></th>
-          <th class="num" id="th-tokens"></th>
-          <th class="num" id="th-cost"></th>
+          <th data-t="model">model</th>
+          <th class="num" data-t="calls">calls</th>
+          <th class="num" data-t="tokens">tokens</th>
+          <th class="num" data-t="cost">cost</th>
         </tr>
       </thead>
       <tbody id="rows"></tbody>
     </table>
-    <p id="empty" class="muted empty"></p>
+    <p class="muted empty" id="empty" hidden></p>
   </section>
 
   <section class="notes">
-    <p id="disclaimer" class="note"></p>
+    <p class="note" data-t="disclaimer"></p>
     <p class="note">
-      <span id="status-label"></span>
-      <span id="status-addr" class="addr" title="select and copy it"></span>
-      <span id="restart-label"></span>
-      <code class="cmd">mbridge service restart</code>
+      <span id="status"></span>
+      <span class="addr" id="addr" title="select and copy it"></span>
+      <span id="restart"></span>
+      <code class="cmd" id="cmd"></code>
     </p>
   </section>
 
-  <p id="error" class="error"></p>
+  <p class="error" id="error" hidden></p>
 </main>
 <script src="app.js" defer></script>
 </body>
-</html>
+</html>

package/page/style.css

@@ -1,5 +1,5 @@
-/* Only magpie's own variables, so the page follows the window's theme
-   in both light and dark without knowing either. */
+/* Only magpie's own variables, so the page follows the window's theme in
+   both light and dark without knowing either. */
 .root {
   --pad: 12px;
   padding: var(--pad);
@@ -7,30 +7,31 @@
   color: var(--magpie-fg, #1a1a1a);
   background: var(--magpie-bg, transparent);
 }
-.title { margin: 0; font-size: 1.05em; font-weight: 600; }
-.subtitle { margin: 2px 0 10px; color: var(--magpie-fg-muted, #6b6b6b); }
+h1 { margin: 0; font-size: 1.05em; font-weight: 600; }
+.subtitle { margin: 2px 0 0; color: var(--magpie-fg-muted, #6b6b6b); }
+.since { margin: 0 0 8px; color: var(--magpie-fg-muted, #6b6b6b); font-size: .9em; }
 .bar { display: flex; gap: 8px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px; }
 .segmented { display: flex; gap: 2px; }
-.seg {
-  font: inherit; color: inherit; cursor: pointer;
-  padding: 2px 8px; border-radius: 5px;
+.segmented button {
+  font: inherit; color: inherit; cursor: pointer; padding: 2px 8px; border-radius: 5px;
   border: 1px solid var(--magpie-border, #d8d8d8);
   background: var(--magpie-bg-subtle, transparent);
 }
-.seg-on { background: var(--magpie-accent, #2f6feb); border-color: transparent; color: #fff; }
+.segmented button[aria-selected="true"] {
+  background: var(--magpie-accent, #2f6feb); border-color: transparent; color: #fff;
+}
 .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 14px; }
 .tile {
   padding: 6px 8px; border-radius: 6px;
   border: 1px solid var(--magpie-border, #e3e3e3);
   background: var(--magpie-bg-subtle, transparent);
 }
-.tile-label { color: var(--magpie-fg-muted, #6b6b6b); }
-.tile-value { font-size: 1.15em; font-weight: 600; font-variant-numeric: tabular-nums; }
-.tile-sub { color: var(--magpie-fg-muted, #6b6b6b); }
-.label { margin: 0; font-size: 1em; font-weight: 600; }
-.models-head { display: flex; justify-content: space-between; align-items: baseline; }
+.tile .k { color: var(--magpie-fg-muted, #6b6b6b); }
+.tile .v { font-size: 1.15em; font-weight: 600; font-variant-numeric: tabular-nums; }
+.tile .s { color: var(--magpie-fg-muted, #6b6b6b); }
+.models h2 { margin: 0 0 4px; font-size: 1em; font-weight: 600; }
 .muted { color: var(--magpie-fg-muted, #6b6b6b); }
-.table { width: 100%; border-collapse: collapse; margin-top: 4px; }
+.table { width: 100%; border-collapse: collapse; }
 .table th, .table td { text-align: left; padding: 3px 4px; border-bottom: 1px solid var(--magpie-border, #e3e3e3); }
 .table .num { text-align: right; font-variant-numeric: tabular-nums; }
 .table th.num { text-align: right; color: var(--magpie-fg-muted, #6b6b6b); font-weight: 500; }
@@ -40,7 +41,8 @@
 .empty { margin: 6px 0; }
 .notes { margin-top: 14px; }
 .note { margin: 4px 0; color: var(--magpie-fg-muted, #6b6b6b); }
-/* the address is selectable text, not a link */
+/* the address is selectable text, not a link: the sandbox may navigate
+   itself, but that is a one-way ticket (SP14 §2) */
 .addr { user-select: all; color: var(--magpie-fg, inherit); }
 .cmd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--magpie-fg, inherit); }
-.error { color: var(--magpie-danger, #b42318); min-height: 1em; margin: 8px 0 0; }
+.error { color: var(--magpie-danger, #b42318); margin: 8px 0 0; }

package/page/view.js

@@ -1,178 +1,173 @@
-// view.js is mbridge's magpie page: the words and the arithmetic, with
-// no DOM in it, so the page and the tests can both use it.
+// view.js is what the page shows, worked out from usage:summary without
+// the DOM, so a test can check it.
 //
-// The numbers come from magpie's own ledger (`magpie.read("usage:summary")`),
-// never from mbridge: the page runs in a sandbox that cannot reach mbridge
-// at all (SP14 §2). Nothing here knows about tiers — magpie records the
-// model that answered, and mbridge's group is not in there.
+// It is a classic script, not a module: a magpie page runs in a sandbox
+// whose CSP serves the plugin's own files, and the community's usage
+// page does it this way too (globalThis.UsageView). A module script
+// would be a different thing to load, and the test below loads this file
+// the same way the page does.
 
-const TEXT = {
-  en: {
-    title: "mbridge",
-    subtitle: "what magpie's ledger recorded",
-    calls: "calls",
-    errors: "errors",
-    errorShare: "of the calls",
-    tokens: "tokens",
-    cost: "cost",
-    models: "by model",
-    model: "model",
-    period: { today: "today", "7d": "7 days", "30d": "30 days" },
-    sort: { tokens: "tokens", calls: "calls", cost: "cost" },
-    empty: "no calls in this period",
-    error: "magpie's usage could not be read",
-    retry: "try again in a minute",
-    since: "since",
-    total: "total",
-    disclaimer:
-      "This is everything magpie recorded. It is mbridge's usage only when every client goes through mbridge; whatever you use magpie for directly is in here too.",
-    status: "mbridge's own status",
-    statusWhere: "mbridge's status page:",
-    restart: "restart it with",
-  },
-  zh: {
-    title: "mbridge",
-    subtitle: "magpie 记下的全部用量",
-    calls: "调用",
-    errors: "错误",
-    errorShare: "占调用",
-    tokens: "Token",
-    cost: "费用",
-    models: "按模型",
-    model: "模型",
-    period: { today: "今天", "7d": "7 天", "30d": "30 天" },
-    sort: { tokens: "Token", calls: "调用", cost: "费用" },
-    empty: "这个区间没有调用",
-    error: "读不到 magpie 的用量",
-    retry: "一分钟后自动重试",
-    since: "起",
-    total: "合计",
-    disclaimer:
-      "这是 magpie 记下的全部用量。客户端都走 mbridge 时它才等于 mbridge 的用量；你直接用 magpie 的那部分也在里面。",
-    status: "mbridge 自己的状态",
-    statusWhere: "mbridge 的状态页：",
-    restart: "重启用",
-  },
-};
+(() => {
+  const TEXT = {
+    en: {
+      title: "mbridge",
+      subtitle: "what magpie's ledger recorded",
+      calls: "calls",
+      errors: "errors",
+      errorShare: "of the calls",
+      tokens: "tokens",
+      cost: "cost",
+      models: "by model",
+      model: "model",
+      today: "today",
+      "7d": "7 days",
+      "30d": "30 days",
+      sortTokens: "tokens",
+      sortCalls: "calls",
+      sortCost: "cost",
+      empty: "no calls in this period",
+      failed: "couldn't read usage",
+      retry: "try again in a minute",
+      since: "since",
+      disclaimer:
+        "This is everything magpie recorded. It is mbridge's usage only when every client goes through mbridge; whatever you use magpie for directly is in here too.",
+      status: "mbridge's own status:",
+      restart: "restart it with",
+    },
+    zh: {
+      title: "mbridge",
+      subtitle: "magpie 记下的全部用量",
+      calls: "调用",
+      errors: "错误",
+      errorShare: "占调用",
+      tokens: "Token",
+      cost: "费用",
+      models: "按模型",
+      model: "模型",
+      today: "今天",
+      "7d": "7 天",
+      "30d": "30 天",
+      sortTokens: "Token",
+      sortCalls: "调用",
+      sortCost: "费用",
+      empty: "这个区间没有调用",
+      failed: "读不到 magpie 的用量",
+      retry: "一分钟后自动重试",
+      since: "起",
+      disclaimer:
+        "这是 magpie 记下的全部用量。客户端都走 mbridge 时它才等于 mbridge 的用量；你直接用 magpie 的那部分也在里面。",
+      status: "mbridge 自己的状态：",
+      restart: "重启用",
+    },
+  };
 
-/** count is a number a person reads: 1,234 or 1.23M. */
-export function count(n) {
-  const v = Number(n) || 0;
-  if (Math.abs(v) >= 1e9) return (v / 1e9).toFixed(2) + "B";
-  if (Math.abs(v) >= 1e6) return (v / 1e6).toFixed(2) + "M";
-  if (Math.abs(v) >= 1e3) return v.toLocaleString("en-US");
-  return String(v);
-}
+  const PERIODS = ["today", "7d", "30d"];
+  const SORTS = ["tokens", "calls", "cost"];
+  const STATUS_URL = "http://127.0.0.1:3426/status";
 
-/** money is a price, never NaN, and never "$0.00" for something real. */
-export function money(n) {
-  const v = Number(n);
-  if (!isFinite(v)) return "$0";
-  if (v === 0) return "$0";
-  if (v > 0 && v < 0.01) return "<$0.01";
-  if (v < 10) return "$" + v.toFixed(4).replace(/0+$/, "").replace(/\.$/, "");
-  if (v < 1000) return "$" + v.toFixed(2);
-  return "$" + v.toFixed(0);
-}
+  // text is the words for a language: zh for anything that starts with zh.
+  function text(lang) {
+    return String(lang || "").toLowerCase().startsWith("zh") ? TEXT.zh : TEXT.en;
+  }
 
-/** share is a percentage, and never NaN. */
-export function pct(part, whole) {
-  const p = Number(part) || 0;
-  const w = Number(whole) || 0;
-  if (w <= 0) return "0%";
-  const v = (100 * p) / w;
-  if (!isFinite(v)) return "0%";
-  return (Math.round(v * 10) / 10).toString() + "%";
-}
+  // count is a number a person reads: 1,234 or 1.23M.
+  function count(n) {
+    n = Number(n) || 0;
+    const a = Math.abs(n);
+    if (a >= 1e9) return (n / 1e9).toFixed(2) + "B";
+    if (a >= 1e6) return (n / 1e6).toFixed(2) + "M";
+    if (a >= 1e3) return n.toLocaleString("en-US");
+    return String(n);
+  }
 
-function lang(l) {
-  return l === "zh" ? "zh" : "en";
-}
+  // money is a price, never NaN, and never "$0.00" for something real.
+  function money(n) {
+    n = Number(n);
+    if (!isFinite(n)) return "$0";
+    if (n === 0) return "$0";
+    if (n > 0 && n < 0.01) return "<$0.01";
+    if (n < 10) return "$" + n.toFixed(4).replace(/0+$/, "").replace(/\.$/, "");
+    if (n < 1000) return "$" + n.toFixed(2);
+    return "$" + n.toFixed(0);
+  }
 
-/** tiles are the four numbers at the top: calls, errors, tokens, cost. */
-export function tiles(summary, l = "en") {
-  const t = TEXT[lang(l)];
-  const s = summary || {};
-  return [
-    { key: "calls", label: t.calls, value: count(s.calls) },
-    {
-      key: "errors",
-      label: t.errors,
-      value: count(s.errors),
-      sub: t.errorShare + " " + pct(s.errors, s.calls),
-    },
-    { key: "tokens", label: t.tokens, value: count((s.input || 0) + (s.output || 0)) },
-    { key: "cost", label: t.cost, value: money(s.cost) },
-  ];
-}
+  // share is a percentage, and never NaN.
+  function pct(part, whole) {
+    const p = Number(part) || 0;
+    const w = Number(whole) || 0;
+    if (w <= 0) return "0%";
+    const v = (100 * p) / w;
+    if (!isFinite(v)) return "0%";
+    return (Math.round(v * 10) / 10).toString() + "%";
+  }
 
-/** rows are the model table, sorted by tokens, calls or cost, with each
- * model's share of the total. */
-export function rows(summary, sort = "tokens", l = "en") {
-  const t = TEXT[lang(l)];
-  const s = summary || {};
-  const models = Array.isArray(s.models) ? s.models : [];
-  const key = sort === "calls" ? "calls" : sort === "cost" ? "cost" : "tokens";
-  const value = (m) =>
-    key === "tokens" ? (m.input || 0) + (m.output || 0) : m[key] || 0;
-  const sorted = models.slice().sort((a, b) => value(b) - value(a));
-  const total = sorted.reduce((a, m) => a + value(m), 0);
-  const labels = t.sort;
-  return {
-    sort: key,
-    label: t.models,
-    sortLabel: labels[key] || key,
-    total,
-    items: sorted.map((m) => ({
+  // tiles are the four numbers at the top: calls, errors, tokens, cost.
+  function tiles(summary, lang) {
+    const t = text(lang);
+    const s = summary || {};
+    return [
+      { key: "calls", label: t.calls, value: count(s.calls) },
+      {
+        key: "errors",
+        label: t.errors,
+        value: count(s.errors),
+        sub: t.errorShare + " " + pct(s.errors, s.calls),
+      },
+      { key: "tokens", label: t.tokens, value: count((s.input || 0) + (s.output || 0)) },
+      { key: "cost", label: t.cost, value: money(s.cost) },
+    ];
+  }
+
+  // rows are the model table, sorted by tokens, calls or cost, with each
+  // model's share of the total.
+  function rows(summary, sort, lang) {
+    const s = summary || {};
+    const models = Array.isArray(s.models) ? s.models : [];
+    const key = sort === "calls" ? "calls" : sort === "cost" ? "cost" : "tokens";
+    const value = (m) => (key === "tokens" ? (m.input || 0) + (m.output || 0) : m[key] || 0);
+    const sorted = models.slice().sort((a, b) => value(b) - value(a));
+    const total = sorted.reduce((a, m) => a + value(m), 0);
+    return sorted.map((m) => ({
       model: m.model || "?",
       calls: count(m.calls),
       tokens: count((m.input || 0) + (m.output || 0)),
       cost: money(m.cost),
       share: pct(value(m), total),
       shareValue: total > 0 ? value(m) / total : 0,
-    })),
-  };
-}
+    }));
+  }
 
-/** period labels, in the order magpie offers them. */
-export function periods(l = "en") {
-  const t = TEXT[lang(l)];
-  return ["today", "7d", "30d"].map((k) => ({ key: k, label: t.period[k] }));
-}
+  // since is when the period started.
+  function since(summary, lang) {
+    const t = text(lang);
+    const s = summary || {};
+    return s.since ? t.since + " " + s.since : "";
+  }
 
-/** sorts, in the order the page offers them. */
-export function sorts(l = "en") {
-  const t = TEXT[lang(l)];
-  return ["tokens", "calls", "cost"].map((k) => ({ key: k, label: t.sort[k] }));
-}
+  // periodLabel is the name of a period.
+  function periodLabel(period, lang) {
+    return text(lang)[period] || period;
+  }
 
-/** header is what the page says above the numbers. */
-export function header(summary, l = "en") {
-  const t = TEXT[lang(l)];
-  const s = summary || {};
-  return {
-    title: t.title,
-    subtitle: t.subtitle,
-    since: s.since ? t.since + " " + s.since : "",
-    empty: !s.calls,
-    emptyText: t.empty,
-    error: t.error,
-    retry: t.retry,
-    disclaimer: t.disclaimer,
-    status: t.status,
-    statusWhere: t.statusWhere,
-    restart: t.restart,
-  };
-}
+  // sortLabel is the name of a sort.
+  function sortLabel(sort, lang) {
+    const t = text(lang);
+    return t["sort" + sort.charAt(0).toUpperCase() + sort.slice(1)] || sort;
+  }
 
-globalThis.MbridgeView = {
-  TEXT,
-  count,
-  money,
-  pct,
-  tiles,
-  rows,
-  periods,
-  sorts,
-  header,
-};
+  globalThis.MbridgeView = {
+    TEXT,
+    PERIODS,
+    SORTS,
+    STATUS_URL,
+    text,
+    count,
+    money,
+    pct,
+    tiles,
+    rows,
+    since,
+    periodLabel,
+    sortLabel,
+  };
+})();