@weiping/mbridge-page 0.2.1 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weiping/mbridge-page",
-  "version": "0.2.1",
+  "version": "0.4.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": [
@@ -23,19 +23,17 @@
   ],
   "magpie": {
     "page": {
-      "title": "mbridge",
+      "title": "鹊桥",
       "titles": {
-        "zh": "mbridge",
-        "zh-TW": "mbridge",
-        "ja": "mbridge",
-        "de": "mbridge"
+        "zh": "鹊桥",
+        "zh-TW": "鵲橋",
+        "ja": "鵲橋",
+        "de": "Magpie Bridge"
       },
       "file": "page/index.html",
       "icon": "page/icon.svg"
     },
-    "permissions": [
-      "usage:summary"
-    ],
+    "permissions": [],
     "options": {
       "period": "7d",
       "sort": "tokens"

package/page/app.js

@@ -1,314 +1,111 @@
-// 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.
+// app.js powers the 鹊桥 plugin page inside magpie's window.
+// It reads the snapshot mbridge published into magpie.options,
+// renders the full dashboard, and dispatches user actions (window tabs,
+// restart, and refresh).
+
 (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;
-
-  // 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,
-  };
-
-  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 pick(group, attr, value) {
-    $(group).querySelectorAll("button").forEach((b) => {
-      b.setAttribute("aria-selected", String(b.dataset[attr] === value));
-    });
-  }
-
-  // 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);
+  if (theme && theme.lang) {
+    if (theme.lang.toLowerCase().startsWith("zh")) {
+      // view.js defines lang globally inside its IIFE, but we can also set navigator/locale
     }
   }
 
-  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;
-      })
-    );
+  let opts = {};
+  const current = { window: "7d" };
 
-    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;
-    }
+  function fail(message) {
+    const root = document.getElementById("root");
+    root.textContent = "";
+    const h1 = document.createElement("h1");
+    h1.textContent = "鹊桥";
+    const banner = document.createElement("div");
+    banner.className = "banner bad err";
+    banner.textContent = message;
+    root.append(h1, banner);
   }
 
-  // readOptions reads the plugin's options: the page's period and sort,
-  // and what mbridge published there.
-  async function readOptions() {
+  async function command(id) {
     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;
+      o.cmd = { id: id, seq: Date.now() };
+      await magpie.options.set(o);
+      return true;
     } catch {
-      // the options are not readable: keep what we have
+      return false;
     }
   }
 
-  // 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 };
+  async function setWindow(kind) {
+    current.window = kind;
     try {
       const o = (await magpie.options.get()) || {};
-      o.cmd = cmd;
+      o.period = kind;
       await magpie.options.set(o);
-    } catch (e) {
-      // mbridge will not hear it; the page says so
-      return false;
-    }
-    return true;
+      // Ask mbridge to immediately publish the updated window
+      await command("refresh");
+    } catch {}
   }
 
-  // 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
+  async function readOptions() {
+    try {
+      opts = (await magpie.options.get()) || {};
+      if (opts.period && (opts.period === "1d" || opts.period === "7d" || opts.period === "30d")) {
+        current.window = opts.period;
       }
-    }, 1100);
+      return opts.mbridge || null;
+    } catch (e) {
+      return null;
+    }
   }
 
-  $("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();
-  });
+  function renderView(data) {
+    if (!data) {
+      fail("鹊桥 正在等待 mbridge 发布快照数据…");
+      return;
+    }
+    V.render(data);
 
-  $("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();
-  });
+    // Wire up tab switching in the rendered view
+    const tabButtons = document.querySelectorAll(".tabs button");
+    tabButtons.forEach((btn) => {
+      const kind = btn.textContent.trim();
+      if (kind === "1d" || kind === "7d" || kind === "30d") {
+        btn.onclick = async () => {
+          await setWindow(kind);
+          // optimistically update tab highlight
+          tabButtons.forEach((b) => b.setAttribute("aria-pressed", String(b.textContent.trim() === kind)));
+        };
+      }
+    });
 
-  // 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);
+    // Wire up the restart button in the rendered view
+    const restartBtn = document.querySelector(".restart");
+    if (restartBtn) {
+      restartBtn.onclick = async () => {
+        restartBtn.disabled = true;
+        restartBtn.textContent = "正在重启…";
+        const ok = await command("restart");
+        if (ok) {
+          restartBtn.textContent = "已发出重启指令";
+        } else {
+          restartBtn.textContent = "指令发送失败";
+          restartBtn.disabled = false;
+        }
+      };
+    }
   }
-  for (const b of $("sorts").querySelectorAll("button[data-sort]")) {
-    b.textContent = V.sortLabel(b.dataset.sort, lang);
+
+  async function poll() {
+    const snap = await readOptions();
+    if (snap) {
+      renderView(snap);
+    } else {
+      fail("鹊桥 正在等待 mbridge 发布快照数据…");
+    }
   }
-  $("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();
-  // 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);
+
+  await poll();
+  setInterval(poll, 5000);
 })();

package/page/index.html

@@ -3,88 +3,13 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>mbridge</title>
+<title>鹊桥</title>
 <link rel="stylesheet" href="style.css">
 <script src="_magpie/bridge.js"></script>
 <script src="view.js"></script>
 </head>
 <body>
-<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>
-  </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>
-      <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">
-      <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 class="error" id="error" hidden></p>
-</main>
+<main id="root"></main>
 <script src="app.js" defer></script>
 </body>
 </html>