@weiping/mbridge-page 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weiping/mbridge-page",
-  "version": "0.3.0",
+  "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,12 +23,12 @@
   ],
   "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"

package/page/app.js

@@ -1,191 +1,111 @@
-// 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.
+// 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)));
+  const theme = await magpie.ready;
+  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
     }
-    return n;
   }
-  const theme = await magpie.ready;
-  let lang = theme.lang;
 
-  // 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: mbridge publishes them
-  }
-  const state = {
-    mbridge: null,
-    cmdSeq: 0,
-  };
+  const current = { window: "7d" };
 
-  // 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) => {
-      e.textContent = t[e.dataset.t];
-    });
-    $("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 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 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() {
+  async function command(id) {
     try {
-      opts = (await magpie.options.get()) || {};
-      state.mbridge = opts.mbridge || null;
+      const o = (await magpie.options.get()) || {};
+      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;
     }
   }
 
-  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);
+  async function setWindow(kind) {
+    current.window = kind;
+    try {
+      const o = (await magpie.options.get()) || {};
+      o.period = kind;
+      await magpie.options.set(o);
+      // Ask mbridge to immediately publish the updated window
+      await command("refresh");
+    } catch {}
+  }
+
+  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;
       }
+      return opts.mbridge || null;
+    } catch (e) {
+      return null;
     }
-    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(" · ") }),
-        ]));
-      }
+  }
+
+  function renderView(data) {
+    if (!data) {
+      fail("鹊桥 正在等待 mbridge 发布快照数据…");
+      return;
     }
-    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);
+    V.render(data);
+
+    // 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)));
+        };
       }
-      body.append(tr);
-    }
-  }
+    });
 
-  function paint() {
-    paintMbridge();
+    // 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;
+        }
+      };
+    }
   }
 
-  // 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 {
-      // mbridge will not hear it; the page says so
-      return false;
+  async function poll() {
+    const snap = await readOptions();
+    if (snap) {
+      renderView(snap);
+    } else {
+      fail("鹊桥 正在等待 mbridge 发布快照数据…");
     }
-    return true;
   }
 
-  $("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 readOptions();
-  paint();
-  // mbridge's snapshot moves every fifteen seconds, and reading the
-  // options is free
-  setInterval(async () => {
-    await readOptions();
-    paint();
-  }, 5000);
+  await poll();
+  setInterval(poll, 5000);
 })();

package/page/index.html

@@ -3,55 +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"></p>
-  </header>
-
-  <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">
-      <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>

package/page/style.css

@@ -1,67 +1,87 @@
-/* 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);
-  font: 12px/1.5 var(--magpie-font, system-ui, -apple-system, "Segoe UI", sans-serif);
-  color: var(--magpie-fg, #1a1a1a);
-  background: var(--magpie-bg, transparent);
-}
-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; }
-.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);
-}
-.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 .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; }
-.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; }
-.model { width: 55%; overflow-wrap: anywhere; }
-.bar { display: block; height: 2px; margin-top: 2px; background: var(--magpie-border, #e3e3e3); border-radius: 1px; overflow: hidden; }
-.bar > i { display: block; height: 100%; background: var(--magpie-accent, #2f6feb); }
-.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 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); margin: 8px 0 0; }
+:root {
+    color-scheme: light dark;
+    --bg: var(--magpie-bg, #ffffff); --fg: var(--magpie-fg, #1a1a1a); --dim: var(--magpie-fg-muted, #6b6b6b); --line: var(--magpie-border, #e3e3e3);
+    --ok: #1a7f37; --warn: #9a6700; --bad: #b42318; --chip: var(--magpie-bg-subtle, #f2f2f2);
+  }
+  @media (prefers-color-scheme: dark) {
+    :root { --bg: #17181a; --fg: #e8e8e8; --dim: #9a9a9a; --line: #2e2f33;
+            --ok: #57ab5a; --warn: #d0a44a; --bad: #e5534b; --chip: #232427; }
+  }
+  * { box-sizing: border-box; }
+  body { margin: 0; padding: 1.25rem; background: var(--bg); color: var(--fg);
+         font: 13px/1.5 var(--magpie-font, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif); }
+  h1 { font-size: 1.1rem; margin: 0 0 .2rem; }
+  h2 { font-size: .85rem; margin: 1.4rem 0 .5rem; text-transform: uppercase;
+       letter-spacing: .06em; color: var(--dim); }
+  .sub { color: var(--dim); margin: 0 0 1rem; }
+  .banner { padding: .5rem .7rem; border-radius: 6px; margin: .6rem 0;
+            background: color-mix(in srgb, var(--warn) 14%, transparent);
+            border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); }
+  .banner.bad { background: color-mix(in srgb, var(--bad) 12%, transparent);
+                border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
+  table { border-collapse: collapse; width: 100%; }
+  th, td { text-align: left; padding: .3rem .5rem; border-bottom: 1px solid var(--line);
+           vertical-align: top; }
+  th { color: var(--dim); font-weight: 500; white-space: nowrap; }
+  td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
+  .cards { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
+  .card { border: 1px solid var(--line); border-radius: 8px; padding: .6rem .7rem; background: var(--chip); }
+  .card .row1 { display: flex; justify-content: space-between; gap: .5rem; font-weight: 600; }
+  .card .row2 { color: var(--dim); font-size: .85em; margin-top: .15rem;
+                overflow-wrap: anywhere; }
+  .card .row3 { margin-top: .3rem; }
+  .card.off { opacity: .5; }
+  .chip { display: inline-block; padding: .05rem .4rem; border-radius: 4px;
+          background: var(--chip); border: 1px solid var(--line); font-size: .85em; }
+  .chip.tier-fast { border-color: var(--ok); }
+  .chip.tier-balanced { border-color: var(--warn); }
+  .chip.tier-performance { border-color: var(--bad); }
+  .muted { color: var(--dim); }
+  .off { color: var(--dim); }
+  .bar { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
+  .bar > i { display: block; height: 100%; background: var(--fg); }
+  .err { color: var(--bad); }
+  .tabs { display: flex; gap: .3rem; margin: 0 0 .8rem; }
+  .tabs button { font: inherit; padding: .2rem .55rem; border-radius: 5px; cursor: pointer;
+                 border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
+  .tabs button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
+  .kv { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .8rem; }
+  .kv > :nth-child(odd) { color: var(--dim); }
+  .foot { margin-top: 2rem; color: var(--dim); font-size: .85em; }
+  .foot ul { margin: .3rem 0; padding-left: 1.1rem; }
 
-/* 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; }
+  .head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
+  h1 { font-size: 1.15rem; margin: 0; }
+  h1 .version { color: var(--dim); font-weight: 400; font-size: .8em; }
+  h3 { font-size: .8rem; margin: .8rem 0 .3rem; color: var(--dim); font-weight: 500; }
+  .pulse { display: flex; gap: 1.4rem; align-items: baseline; flex-wrap: wrap;
+           margin: .2rem 0 .9rem; padding: .55rem .7rem; border-radius: 8px;
+           border: 1px solid var(--line); background: var(--chip); }
+  .pulse .stat { display: flex; flex-direction: column; }
+  .pulse .stat b { font-size: 1.25em; font-weight: 600; font-variant-numeric: tabular-nums; }
+  .pulse .stat span { color: var(--dim); font-size: .8em; }
+  .pulse .tabs { margin-left: auto; }
+  .procline { display: flex; gap: 1rem; flex-wrap: wrap; color: var(--dim);
+              font-size: .85em; margin-bottom: .4rem; }
+  .procline span { white-space: nowrap; }
+  .dists { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
+  .distrow { display: grid; grid-template-columns: 8rem 1fr auto; gap: .5rem;
+             align-items: center; padding: 1px 0; }
+  .distname { overflow-wrap: anywhere; font-size: .9em; }
+  .distnum { font-variant-numeric: tabular-nums; font-size: .85em; color: var(--dim); }
+  .fixes { margin: .3rem 0 .6rem; padding-left: 1.2rem; color: var(--dim); }
+  .cal { margin: .5rem 0; }
+  .cfg { margin-top: 1.2rem; border-top: 1px solid var(--line); padding-top: .6rem; }
+  .cfg summary { cursor: pointer; color: var(--dim); }
+  .restartrow { margin-top: 1rem; }
+  .restart { font: inherit; padding: .3rem .8rem; border-radius: 6px; cursor: pointer;
+             border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
+  .restart[disabled] { opacity: .6; cursor: default; }
+  table.wide { font-size: .92em; }
+  table.wide td { padding: .2rem .45rem; }
+  td.reason { color: var(--dim); }
+  td.differs { color: var(--fg); font-weight: 600; }
+  .chip.tier-fast { border-color: var(--ok); }
+  .chip.tier-balanced { border-color: var(--warn); }
+  .chip.tier-performance { border-color: var(--bad); }
+  .chip.differs { border-color: var(--fg); }