@weiping/mbridge-page 0.1.1 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weiping/mbridge-page",
-  "version": "0.1.1",
+  "version": "0.2.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": [

package/page/app.js

@@ -8,6 +8,21 @@
 (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;
 
@@ -24,6 +39,10 @@
     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,
   };
 
   function words() {
@@ -42,9 +61,83 @@
     });
   }
 
+  // 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 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);
@@ -98,16 +191,55 @@
     }
   }
 
-  async function load() {
+  // 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()) || {};
+      // what we write back must be what we just read: writing a stale
+      // copy would put an old snapshot back
+      opts = o;
+      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
+    }
+  }
+
+  // loadUsage reads what magpie recorded; it moves slowly.
+  async function loadUsage() {
     try {
       state.summary = await magpie.read("usage:summary", { period: state.period });
       state.error = null;
     } catch (e) {
       state.error = (e && e.message) || String(e);
     }
+  }
+
+  async function load() {
+    await readOptions();
+    await loadUsage();
     paint();
   }
 
+  // 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;
+  }
+
   // magpie takes one options write a second: a quick second click is
   // saved with the next one
   let saving = null;
@@ -116,6 +248,8 @@
     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
@@ -147,7 +281,34 @@
     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;
+  });
   words();
   await load();
-  setInterval(load, 60000);
+  // magpie's ledger moves slowly; mbridge's snapshot moves every fifteen
+  // seconds, and reading the options is free
+  setInterval(loadUsage, 60000);
+  setInterval(async () => {
+    await readOptions();
+    paintMbridge();
+  }, 5000);
 })();

package/page/index.html

@@ -47,6 +47,32 @@
     <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 class="note" data-t="disclaimer"></p>
     <p class="note">

package/page/style.css

@@ -46,3 +46,22 @@ h1 { margin: 0; font-size: 1.05em; font-weight: 600; }
 .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); 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

@@ -33,6 +33,32 @@
         "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",
@@ -58,6 +84,32 @@
         "这是 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: "还没有判档",
     },
   };
 
@@ -155,6 +207,73 @@
     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) {
+      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,
@@ -169,5 +288,6 @@
     since,
     periodLabel,
     sortLabel,
+    mbridgeView,
   };
 })();