@weiping/mbridge-page 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weiping/mbridge-page",
-  "version": "0.2.0",
+  "version": "0.3.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,9 +33,7 @@
       "file": "page/index.html",
       "icon": "page/icon.svg"
     },
-    "permissions": [
-      "usage:summary"
-    ],
+    "permissions": [],
     "options": {
       "period": "7d",
       "sort": "tokens"

package/page/app.js

@@ -1,7 +1,7 @@
-// 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).
+// app.js reads what mbridge published into the plugin's options, and
+// draws it. It never reaches mbridge: the sandbox a magpie page runs in
+// has no network at all (connect-src 'none'), so mbridge pushes its
+// state into the options and the page reads them in-process (SP14 §7).
 //
 // A classic script, like the community's usage page: it reads the view
 // from globalThis.
@@ -26,25 +26,21 @@
   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
+  // the page's own keys in the options (kept so mbridge's key survives
+  // a write)
   let opts = {};
   try {
     opts = (await magpie.options.get()) || {};
   } catch {
-    // no options yet: the defaults in package.json stand
+    // no options yet: mbridge publishes them
   }
   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,
   };
 
+  // the address of mbridge's own page: selectable text, not a link (the
+  // sandbox may navigate itself, but that is a one-way ticket, SP14 §2)
   function words() {
     const t = V.text(lang);
     document.querySelectorAll("[data-t]").forEach((e) => {
@@ -53,16 +49,23 @@
     $("status").textContent = t.status;
     $("restart").textContent = t.restart;
     $("cmd").textContent = "mbridge service restart";
+    $("addr").textContent = V.STATUS_URL;
+    $("mbridge-ask").textContent = t.mbridgeAsk;
+    $("mbridge-restart").textContent = t.mbridgeRestart;
   }
 
-  function pick(group, attr, value) {
-    $(group).querySelectorAll("button").forEach((b) => {
-      b.setAttribute("aria-selected", String(b.dataset[attr] === value));
-    });
+  // readOptions reads the options: what mbridge published. What we write
+  // back must be what we just read, so mbridge's snapshot is not put back
+  // stale.
+  async function readOptions() {
+    try {
+      opts = (await magpie.options.get()) || {};
+      state.mbridge = opts.mbridge || null;
+    } catch {
+      // the options are not readable: keep what we have
+    }
   }
 
-  // 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);
@@ -134,85 +137,7 @@
   }
 
   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);
-
-    $("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;
-    }
-  }
-
-  // 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
-    }
-  }
-
-  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();
   }
 
   // command asks mbridge to do something. The sequence number makes it
@@ -225,54 +150,13 @@
       const o = (await magpie.options.get()) || {};
       o.cmd = cmd;
       await magpie.options.set(o);
-    } catch (e) {
+    } catch {
       // mbridge will not hear it; the page says so
       return false;
     }
     return true;
   }
 
-  // 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);
-  }
-
-  $("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 () => {
@@ -294,7 +178,14 @@
     if (!ok) { b.disabled = false; b.textContent = t.mbridgeRestart; return; }
     b.textContent = t.mbridgeRestartAsked;
   });
+
   words();
-  await load();
-  setInterval(load, 60000);
+  await readOptions();
+  paint();
+  // mbridge's snapshot moves every fifteen seconds, and reading the
+  // options is free
+  setInterval(async () => {
+    await readOptions();
+    paint();
+  }, 5000);
 })();

package/page/index.html

@@ -12,41 +12,9 @@
 <main class="root">
   <header class="head">
     <h1 data-t="title">mbridge</h1>
-    <p class="subtitle" data-t="subtitle"></p>
-    <p class="since" id="since"></p>
+    <p class="subtitle"></p>
   </header>
 
-  <div class="bar">
-    <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 class="tiles" id="tiles"></section>
-
-  <section class="models">
-    <h2 data-t="models">by model</h2>
-    <table class="table">
-      <thead>
-        <tr>
-          <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 class="muted empty" id="empty" hidden></p>
-  </section>
-
   <section class="mbridge">
     <div class="mbridge-head">
       <h2 data-t="mbridge">mbridge</h2>
@@ -74,7 +42,6 @@
   </section>
 
   <section class="notes">
-    <p class="note" data-t="disclaimer"></p>
     <p class="note">
       <span id="status"></span>
       <span class="addr" id="addr" title="select and copy it"></span>

package/page/view.js

@@ -12,25 +12,9 @@
     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",
@@ -63,25 +47,9 @@
     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",
@@ -113,8 +81,6 @@
     },
   };
 
-  const PERIODS = ["today", "7d", "30d"];
-  const SORTS = ["tokens", "calls", "cost"];
   const STATUS_URL = "http://127.0.0.1:3426/status";
 
   // text is the words for a language: zh for anything that starts with zh.
@@ -153,65 +119,13 @@
     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.
-  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,
-    }));
-  }
-
-  // since is when the period started.
-  function since(summary, lang) {
-    const t = text(lang);
-    const s = summary || {};
-    return s.since ? t.since + " " + s.since : "";
-  }
-
-  // periodLabel is the name of a period.
-  function periodLabel(period, lang) {
-    return text(lang)[period] || period;
-  }
-
-  // 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;
-  }
-
   // 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) {
+    // nothing published, or an object that is not a snapshot: an empty
+    // options object is not a snapshot, it is no snapshot
+    if (!snapshot || (!snapshot.seq && !snapshot.version)) {
       return { none: true, text: t.mbridgeNone };
     }
     const s = snapshot;
@@ -276,18 +190,8 @@
 
   globalThis.MbridgeView = {
     TEXT,
-    PERIODS,
-    SORTS,
     STATUS_URL,
     text,
-    count,
-    money,
-    pct,
-    tiles,
-    rows,
-    since,
-    periodLabel,
-    sortLabel,
     mbridgeView,
   };
 })();