@weiping/mbridge-page 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weiping/mbridge-page",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "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,300 @@
-/* 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";
+// 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);
+  // el makes an element with text and class
+  function el(tag, attrs, kids) {
+    const n = document.createElement(tag);
+    for (const [k, v] of Object.entries(attrs || {})) {
+      if (v === undefined || v === null) continue;
+      if (k === "text") n.textContent = v;
+      else if (k === "class") n.className = v;
+      else n.setAttribute(k, v);
+    }
+    for (const kid of [].concat(kids || [])) {
+      if (kid === undefined || kid === null) continue;
+      n.appendChild(typeof kid === "object" ? kid : document.createTextNode(String(kid)));
+    }
+    return n;
+  }
+  const theme = await magpie.ready;
+  let lang = theme.lang;
 
-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
+  // 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,
+    // what mbridge published into the options (SP14 §7)
+    mbridge: null,
+    // the sequence number of the last command the page sent
+    cmdSeq: 0,
+  };
 
-const state = { period: "7d", sort: "tokens", summary: null, error: null, lang: "en" };
+  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 $(id) {
-  return document.getElementById(id);
-}
+  function pick(group, attr, value) {
+    $(group).querySelectorAll("button").forEach((b) => {
+      b.setAttribute("aria-selected", String(b.dataset[attr] === value));
+    });
+  }
 
-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);
+  // paintMbridge draws what mbridge published: its numbers, the sessions
+  // running now, and the decisions it made.
+  function paintMbridge() {
+    const t = V.text(lang);
+    const v = V.mbridgeView(state.mbridge, lang);
+    $("mbridge-age").textContent = v.none ? "" : (t.mbridgeAge + " " + v.ageText);
+    $("mbridge-empty").textContent = v.none ? v.text : (v.noDecisions ? t.noDecisions : "");
+    $("mbridge-empty").hidden = !(v.none || v.noDecisions);
+    const stats = $("mbridge-stats");
+    stats.textContent = "";
+    if (!v.none) {
+      const items = [
+        [String(v.turnCount), t.mbridgeTurns],
+        [v.coverage, t.mbridgeCoverage],
+        [String(v.failures), t.mbridgeFailures],
+        [v.topReason || "—", t.reason],
+      ];
+      for (const [value, label] of items) {
+        const cell = document.createElement("div");
+        cell.className = "stat";
+        const b = document.createElement("b");
+        b.textContent = value;
+        const s2 = document.createElement("span");
+        s2.textContent = label;
+        cell.append(b, s2);
+        stats.append(cell);
+      }
+    }
+    const live = $("mbridge-live");
+    live.textContent = "";
+    if (v.none) {
+      live.append(el("div", { class: "muted", text: t.mbridgeNone }));
+    } else if (v.emptyLive) {
+      live.append(el("div", { class: "muted", text: t.mbridgeNoLive }));
+    } else {
+      for (const c of v.live) {
+        const bits = [];
+        if (c.reason) bits.push(c.reason);
+        if (c.conf !== undefined && c.conf !== null) bits.push("conf " + c.conf.toFixed(2));
+        if (c.tools !== null && c.tools !== undefined) bits.push(t.tools + " " + c.tools);
+        live.append(el("div", { class: "card" }, [
+          el("div", { class: "row1" }, [
+            el("span", { text: c.harness + " · " + c.agent }),
+            el("span", { text: c.tier + (c.group ? " → " + c.group : "") }),
+          ]),
+          el("div", { class: "row2", text: c.session + " · " + bits.join(" · ") }),
+        ]));
+      }
+    }
+    const body = $("mbridge-decisions");
+    body.textContent = "";
+    for (const d of v.decisions || []) {
+      const tr = document.createElement("tr");
+      const cells = [
+        [d.clock, "muted"],
+        [d.harness, ""],
+        [d.agent, ""],
+        [d.tier, ""],
+        [d.advised, d.differs ? "differs" : "muted"],
+        [d.reason, "muted"],
+        [d.conf === undefined || d.conf === null ? "—" : d.conf.toFixed(2), "num"],
+      ];
+      for (const [text, cls] of cells) {
+        const td = document.createElement("td");
+        if (cls) td.className = cls;
+        td.textContent = text;
+        tr.append(td);
+      }
+      body.append(tr);
+    }
   }
-}
 
-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;
+  function paint() {
+    pick("periods", "period", state.period);
+    pick("sorts", "sort", state.sort);
+    // mbridge's part does not depend on magpie's usage
+    paintMbridge();
+    const s = state.summary;
+    if (!s) return;
+    $("since").textContent = V.since(s, lang);
 
-  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();
-  });
+    $("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 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);
+    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);
+  // readOptions reads the plugin's options: the page's period and sort,
+  // and what mbridge published there.
+  async function readOptions() {
+    try {
+      const o = (await magpie.options.get()) || {};
+      if (V.PERIODS.includes(o.period)) state.period = o.period;
+      if (V.SORTS.includes(o.sort)) state.sort = o.sort;
+      state.mbridge = o.mbridge || null;
+    } catch {
+      // the options are not readable: keep what we have
     }
-    body.appendChild(tr);
   }
-  $("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 : "";
-}
 
-// 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;
-}
-
-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);
+  async function load() {
+    await readOptions();
+    try {
+      state.summary = await magpie.read("usage:summary", { period: state.period });
+      state.error = null;
+    } catch (e) {
+      state.error = (e && e.message) || String(e);
+    }
+    paint();
   }
-  render();
-}
 
-// 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
+  // command asks mbridge to do something. The sequence number makes it
+  // one-shot: the page repeats it until mbridge answers, and mbridge
+  // runs it once.
+  async function command(id) {
+    state.cmdSeq += 1;
+    const cmd = { id: id, seq: state.cmdSeq };
+    try {
+      const o = (await magpie.options.get()) || {};
+      o.cmd = cmd;
+      await magpie.options.set(o);
+    } catch (e) {
+      // mbridge will not hear it; the page says so
+      return false;
+    }
+    return true;
   }
-}
 
-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
+  // 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 {
+        // the whole object is replaced: mbridge's key goes with it, and
+        // mbridge puts its snapshot back on its next round
+        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);
   }
-}
 
-(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();
+  $("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();
+  });
+
+  $("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();
+  });
+
+  // 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);
+  }
+  for (const b of $("sorts").querySelectorAll("button[data-sort]")) {
+    b.textContent = V.sortLabel(b.dataset.sort, lang);
+  }
+  $("addr").textContent = V.STATUS_URL;
+  $("mbridge-ask").textContent = V.text(lang).mbridgeAsk;
+  $("mbridge-restart").textContent = V.text(lang).mbridgeRestart;
+  $("mbridge-ask").addEventListener("click", async () => {
+    const b = $("mbridge-ask");
+    const t = V.text(lang);
+    b.disabled = true;
+    b.textContent = t.mbridgeAsking;
+    const ok = await command("refresh");
+    if (!ok) { b.disabled = false; b.textContent = t.mbridgeAsk; }
+    // mbridge publishes and the next poll picks it up
+    setTimeout(() => { b.disabled = false; b.textContent = t.mbridgeAsk; load(); }, 3000);
+  });
+  $("mbridge-restart").addEventListener("click", async () => {
+    const b = $("mbridge-restart");
+    const t = V.text(lang);
+    b.disabled = true;
+    b.textContent = t.mbridgeRestarting;
+    const ok = await command("restart");
+    if (!ok) { b.disabled = false; b.textContent = t.mbridgeRestart; return; }
+    b.textContent = t.mbridgeRestartAsked;
   });
-  await restore();
+  words();
   await load();
-  setInterval(load, REFRESH_MS);
-})();
+  setInterval(load, 60000);
+})();

package/page/index.html

@@ -9,50 +9,82 @@
 <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="mbridge">
+    <div class="mbridge-head">
+      <h2 data-t="mbridge">mbridge</h2>
+      <span id="mbridge-age" class="muted"></span>
+    </div>
+    <div id="mbridge-stats" class="stats"></div>
+    <h3 data-t="mbridgeLive">sessions running now</h3>
+    <div id="mbridge-live" class="cards"></div>
+    <h3 data-t="mbridgeDecisions">recent decisions</h3>
+    <table class="table mbridge-table">
+      <thead>
+        <tr>
+          <th></th><th data-t="harness">harness</th><th data-t="agent">agent</th>
+          <th data-t="tier">tier</th><th data-t="advised">advised</th>
+          <th data-t="reason">reason</th><th class="num" data-t="conf">confidence</th>
+        </tr>
+      </thead>
+      <tbody id="mbridge-decisions"></tbody>
+    </table>
+    <p id="mbridge-empty" class="muted"></p>
+    <div class="mbridge-actions">
+      <button type="button" id="mbridge-ask" class="btn"></button>
+      <button type="button" id="mbridge-restart" class="btn"></button>
+    </div>
   </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,27 @@
 .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; }
+
+/* the mbridge section: what mbridge published into the options */
+.mbridge { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--magpie-border, #e3e3e3); }
+.mbridge-head { display: flex; justify-content: space-between; align-items: baseline; }
+.mbridge-head h2 { margin: 0 0 4px; font-size: 1em; font-weight: 600; }
+.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 6px 0 10px; }
+.stat { padding: 5px 7px; border: 1px solid var(--magpie-border, #e3e3e3); border-radius: 6px; }
+.stat b { display: block; font-size: 1.1em; font-variant-numeric: tabular-nums; }
+.stat span { color: var(--magpie-fg-muted, #6b6b6b); font-size: .85em; }
+.cards { display: grid; gap: 5px; margin-bottom: 10px; }
+.card { padding: 5px 7px; border: 1px solid var(--magpie-border, #e3e3e3); border-radius: 6px; }
+.card .row1 { display: flex; justify-content: space-between; gap: .5rem; }
+.card .row2 { color: var(--magpie-fg-muted, #6b6b6b); font-size: .85em; }
+.mbridge-table td { padding: 2px 4px; }
+.mbridge-table td.differs { font-weight: 600; }
+.mbridge-actions { display: flex; gap: 6px; margin-top: 8px; }
+.btn { font: inherit; padding: 2px 9px; border-radius: 5px; cursor: pointer;
+       border: 1px solid var(--magpie-border, #d8d8d8); background: var(--magpie-bg-subtle, transparent); color: inherit; }
+.btn[disabled] { opacity: .6; cursor: default; }

package/page/view.js

@@ -1,178 +1,293 @@
-// 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",
+      mbridge: "mbridge",
+      mbridgeNone: "mbridge has not published anything yet",
+      mbridgeAge: "published",
+      mbridgeLive: "sessions running now",
+      mbridgeNoLive: "no session is going through mbridge right now",
+      mbridgeDecisions: "recent decisions",
+      mbridgeWindow: "the last",
+      mbridgeTurns: "turns",
+      mbridgeCoverage: "asked the classifier",
+      mbridgeFailures: "failures",
+      mbridgeAsk: "ask for fresh numbers",
+      mbridgeAsking: "asking…",
+      mbridgeRestart: "restart mbridge",
+      mbridgeRestarting: "restarting…",
+      mbridgeRestartAsked: "restart asked for",
+      mbridgeRestartRefused: "refused",
+      tier: "tier",
+      advised: "advised",
+      reason: "reason",
+      conf: "confidence",
+      unknown: "unknown",
+      running: "running",
+      notRunning: "installed, not running",
+      notInstalled: "not installed",
+      tools: "tools",
+      noDecisions: "no decision yet",
+    },
+    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: "重启用",
+      mbridge: "mbridge",
+      mbridgeNone: "mbridge 还没有发布过任何东西",
+      mbridgeAge: "发布于",
+      mbridgeLive: "正在选档的会话",
+      mbridgeNoLive: "现在没有会话在走 mbridge",
+      mbridgeDecisions: "最近判档",
+      mbridgeWindow: "最近",
+      mbridgeTurns: "轮",
+      mbridgeCoverage: "问了分类器",
+      mbridgeFailures: "失败",
+      mbridgeAsk: "要最新数字",
+      mbridgeAsking: "正在要…",
+      mbridgeRestart: "重启 mbridge",
+      mbridgeRestarting: "正在重启…",
+      mbridgeRestartAsked: "已发出重启指令",
+      mbridgeRestartRefused: "被拒绝",
+      tier: "档",
+      advised: "建议",
+      reason: "reason",
+      conf: "置信度",
+      unknown: "未知",
+      running: "在跑",
+      notRunning: "装了，没在跑",
+      notInstalled: "没装",
+      tools: "工具",
+      noDecisions: "还没有判档",
+    },
+  };
 
-/** 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() + "%";
+  }
+
+  // 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. */
-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) => ({
+  // 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,
-};
+  // mbridgeView is what the page shows of mbridge, from the snapshot
+  // mbridge published into the plugin's options (SP14 §7).
+  function mbridgeView(snapshot, lang) {
+    const t = text(lang);
+    if (!snapshot) {
+      return { none: true, text: t.mbridgeNone };
+    }
+    const s = snapshot;
+    const cov = s.window && s.window.coverage ? s.window.coverage : { asked: 0, total: 0 };
+    const tiers = (s.window && s.window.tiers) || {};
+    const reasons = (s.window && s.window.reasons) || {};
+    const turnCount = Object.keys(tiers).reduce((a, k) => a + tiers[k], 0);
+    const topReason = Object.keys(reasons).sort((a, b) => reasons[b] - reasons[a])[0] || "";
+    const live = s.live || [];
+    // the decisions this process made are in memory (a restart empties
+    // them): the window's turns are the fallback
+    const decisions = (s.decisions && s.decisions.length)
+      ? s.decisions
+      : ((s.window && s.window.turns) || []);
+    const at = s.at ? new Date(s.at) : null;
+    const age = at && !isNaN(at)
+      ? Math.max(0, Math.round((Date.now() - at.getTime()) / 1000))
+      : null;
+    return {
+      none: false,
+      version: s.version || "",
+      pid: s.pid || 0,
+      uptime: s.uptime_s || 0,
+      listen: s.listen || "",
+      service: (s.service && s.service.running) ? t.running : ((s.service && s.service.installed) ? t.notRunning : t.notInstalled),
+      magpie: s.magpie_ok ? (s.magpie_version || "") : "—",
+      turnCount: turnCount,
+      coverage: cov.total ? Math.round((100 * cov.asked) / cov.total) + "%" : "—",
+      failures: (s.window && s.window.classify && s.window.classify.failures) || 0,
+      topReason: topReason,
+      age: age,
+      ageText: age === null ? "" : (age < 60 ? age + "s" : (age < 3600 ? Math.round(age / 60) + "m" : Math.round(age / 3600) + "h")),
+      live: live.map((c) => ({
+        session: (c.session || "").slice(0, 8),
+        harness: c.harness || t.unknown,
+        agent: c.agent || "",
+        tier: c.tier || "",
+        group: c.group || "",
+        reason: c.reason || "",
+        conf: c.tier_confidence,
+        turns: c.turns || 0,
+        tools: c.agent === "gateway" ? (c.tools || 0) + "/" + (c.tool_failures || 0) : null,
+        last: c.last_at || "",
+      })),
+      decisions: decisions.slice(0, 12).map((ev) => ({
+        time: ev.t || "",
+        clock: ev.t ? ev.t.slice(11, 19) : "",
+        harness: ev.harness || t.unknown,
+        agent: ev.agent || "",
+        tier: ev.tier || "",
+        advised: ev.classified_tier || "",
+        differs: !!(ev.classified_tier && ev.classified_tier !== ev.tier),
+        reason: ev.reason || "",
+        source: ev.classifier || ev.source || "",
+        conf: ev.tier_confidence,
+        ms: ev.latency_ms || 0,
+      })),
+      emptyLive: live.length === 0,
+      noDecisions: decisions.length === 0,
+    };
+  }
+
+  globalThis.MbridgeView = {
+    TEXT,
+    PERIODS,
+    SORTS,
+    STATUS_URL,
+    text,
+    count,
+    money,
+    pct,
+    tiles,
+    rows,
+    since,
+    periodLabel,
+    sortLabel,
+    mbridgeView,
+  };
+})();