@weiping/mbridge-page 0.4.0 → 0.5.0

package/package.json

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

package/page/app.js

@@ -6,10 +6,13 @@
 (async () => {
   const V = globalThis.MbridgeView;
   const theme = await magpie.ready;
+  let lang = "en";
   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
+      lang = "zh";
     }
+  } else if (typeof navigator !== "undefined" && (navigator.language || "").toLowerCase().startsWith("zh")) {
+    lang = "zh";
   }
 
   let opts = {};
@@ -61,10 +64,14 @@
   }
 
   function renderView(data) {
-    if (!data) {
-      fail("鹊桥 正在等待 mbridge 发布快照数据…");
+    // When mbridge is not running or not installed (empty options or no valid snapshot with a running pid):
+    // Display the setup and installation guide instead of empty dashboard!
+    const isLive = data && data.pid && (data.service ? data.service.running !== false : true);
+    if (!isLive) {
+      V.renderGuide(null, lang);
       return;
     }
+
     V.render(data);
 
     // Wire up tab switching in the rendered view
@@ -74,7 +81,6 @@
       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)));
         };
       }
@@ -99,13 +105,11 @@
 
   async function poll() {
     const snap = await readOptions();
-    if (snap) {
-      renderView(snap);
-    } else {
-      fail("鹊桥 正在等待 mbridge 发布快照数据…");
-    }
+    renderView(snap);
   }
 
+  globalThis.pollMbridge = poll;
+
   await poll();
   setInterval(poll, 5000);
 })();

package/page/style.css

@@ -85,3 +85,29 @@
   .chip.tier-balanced { border-color: var(--warn); }
   .chip.tier-performance { border-color: var(--bad); }
   .chip.differs { border-color: var(--fg); }
+
+/* Setup guide view (when mbridge is not running or not installed) */
+.setup-guide { max-width: 760px; margin: 0 auto; padding: 1rem 0; }
+.guide-card {
+  border: 1px solid var(--line); border-radius: 8px;
+  padding: 1.25rem; margin-bottom: 1.25rem; background: var(--chip);
+}
+.guide-card h2 { margin: 0 0 .5rem; font-size: 1rem; color: var(--fg); text-transform: none; letter-spacing: normal; }
+.guide-desc { color: var(--dim); margin: 0 0 1rem; font-size: .9em; }
+.guide-steps { display: flex; flex-direction: column; gap: 1rem; }
+.guide-step { display: flex; flex-direction: column; gap: .3rem; }
+.step-title { font-weight: 600; font-size: .9em; }
+.step-cmd { position: relative; display: flex; align-items: center; }
+.step-cmd pre {
+  margin: 0; padding: .6rem .8rem; background: var(--bg); border: 1px solid var(--line);
+  border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: .88em; width: 100%; overflow-x: auto; color: var(--fg);
+}
+.guide-tip { margin-top: .6rem; font-size: .85em; color: var(--dim); }
+.guide-tip a { color: var(--ok); text-decoration: none; }
+.guide-refresh {
+  display: inline-flex; align-items: center; gap: .5rem;
+  padding: .4rem .9rem; border-radius: 6px; border: 1px solid var(--line);
+  background: var(--bg); color: var(--fg); cursor: pointer; font: inherit;
+}
+.guide-refresh:hover { background: var(--chip); }

package/page/view.js

@@ -336,7 +336,114 @@ function calibrationTable(c) {
   return el("div", { class: "cal" }, [t, el("div", { class: "muted", text: foot })]);
 }
 
-function render(data) {
+
+  function detectOS() {
+    const nav = typeof navigator !== "undefined" ? navigator : {};
+    const ua = (nav.userAgent || "").toLowerCase();
+    const plat = (nav.platform || "").toLowerCase();
+    if (plat.includes("win") || ua.includes("windows")) return "windows";
+    if (plat.includes("linux") || ua.includes("linux") || ua.includes("x11")) return "linux";
+    return "darwin"; // default mac
+  }
+
+  function renderGuide(osName, lang) {
+    const isZh = String(lang || "").toLowerCase().startsWith("zh");
+    const os = osName || detectOS();
+    const root = document.getElementById("root");
+    root.textContent = "";
+
+    const box = el("div", { class: "setup-guide" });
+
+    // Header
+    const head = el("header", { class: "head" }, [
+      el("h1", {}, [el("span", { text: isZh ? "鹊桥" : "mbridge" })]),
+      el("p", { class: "sub", text: isZh ? "未检测到运行中的 mbridge 实例。请按以下步骤安装、配置并启动：" : "mbridge instance is not running or not installed. Follow the steps below to setup:" }),
+    ]);
+    box.appendChild(head);
+
+    // Guide card 1: Service Install & Start
+    const card1 = el("div", { class: "guide-card" });
+    const osTitles = { darwin: "macOS", linux: "Linux", windows: "Windows" };
+    card1.appendChild(el("h2", { text: (isZh ? "步骤一：安装与启动 · " : "Step 1: Install & Start · ") + (osTitles[os] || "macOS") }));
+    card1.appendChild(el("p", { class: "guide-desc", text: isZh ? "鹊桥 是独立于 magpie 的智能模型选档守护进程，服务跑在 127.0.0.1:3426。" : "Magpie Bridge is a per-turn model router daemon running on 127.0.0.1:3426." }));
+
+    const steps1 = el("div", { class: "guide-steps" });
+
+    // 1. Install
+    const s1 = el("div", { class: "guide-step" });
+    s1.appendChild(el("div", { class: "step-title", text: isZh ? "1. 安装 mbridge 并注册自启服务" : "1. Install mbridge & register login service" }));
+    const cmd1 = os === "windows"
+      ? "irm https://raw.githubusercontent.com/weiping/mbridge/main/install.ps1 | iex"
+      : "curl -fsSL https://raw.githubusercontent.com/weiping/mbridge/main/install.sh | sh";
+    s1.appendChild(el("div", { class: "step-cmd" }, [el("pre", { text: cmd1 })]));
+    steps1.appendChild(s1);
+
+    // 2. Init groups
+    const s2 = el("div", { class: "guide-step" });
+    s2.appendChild(el("div", { class: "step-title", text: isZh ? "2. 在 magpie 中初始化路由分组与配置" : "2. Initialize routing groups & config in magpie" }));
+    const cmd2 = "mbridge router init --preset cn --groups-only";
+    s2.appendChild(el("div", { class: "step-cmd" }, [el("pre", { text: cmd2 })]));
+    s2.appendChild(el("div", { class: "guide-tip", text: isZh ? "（也可选择 --preset frontier 或 anthropic 预设）" : "(or choose --preset frontier / anthropic)" }));
+    steps1.appendChild(s2);
+
+    // 3. Start / Verify
+    const s3 = el("div", { class: "guide-step" });
+    s3.appendChild(el("div", { class: "step-title", text: isZh ? "3. 启动与验证" : "3. Start & Verify" }));
+    const cmd3 = "# 检查服务运行状态\nmbridge status\n\n# 或手动在前台启动\nmbridge serve";
+    s3.appendChild(el("div", { class: "step-cmd" }, [el("pre", { text: cmd3 })]));
+    steps1.appendChild(s3);
+
+    card1.appendChild(steps1);
+    box.appendChild(card1);
+
+    // Guide card 2: Agent Plugins (Claude Code, Codex, Pi)
+    const card2 = el("div", { class: "guide-card" });
+    card2.appendChild(el("h2", { text: isZh ? "步骤二：安装 Agent 插件与使用" : "Step 2: Install Agent Plugins & Usage" }));
+    card2.appendChild(el("p", { class: "guide-desc", text: isZh ? "主流编码 Agent 均有一键插件支持，按需安装对应客户端：" : "Supported coding agents have dedicated plugins. Install as needed:" }));
+
+    const steps2 = el("div", { class: "guide-steps" });
+
+    // Claude Code
+    const pClaude = el("div", { class: "guide-step" });
+    pClaude.appendChild(el("div", { class: "step-title", text: "Claude Code（≥ v2.1.287）" }));
+    const cmdClaude = `# 1. 安装插件\nclaude plugin marketplace add weiping/mbridge\nclaude plugin install mbridge@mbridge\n\n# 2. 项目配置：在项目的 .claude/settings.json 中指定模型\n{\n  "model": "group/mbridge[1m]"\n}`;
+    pClaude.appendChild(el("div", { class: "step-cmd" }, [el("pre", { text: cmdClaude })]));
+    steps2.appendChild(pClaude);
+
+    // Codex
+    const pCodex = el("div", { class: "guide-step" });
+    pCodex.appendChild(el("div", { class: "step-title", text: "Codex" }));
+    const cmdCodex = `# 1. 安装插件（使用 --sparse 避免拉取庞大历史）\ncodex plugin marketplace add weiping/mbridge --sparse .agents --sparse clients/codex\ncodex plugin add mbridge@mbridge\n\n# 2. 启动使用：通过 mbridge 配置文件启动\ncodex -p mbridge\n# 或在项目的 .codex/config.toml 中指定\nmodel = "group/mbridge"`;
+    pCodex.appendChild(el("div", { class: "step-cmd" }, [el("pre", { text: cmdCodex })]));
+    steps2.appendChild(pCodex);
+
+    // Pi
+    const pPi = el("div", { class: "guide-step" });
+    pPi.appendChild(el("div", { class: "step-title", text: "Pi" }));
+    const cmdPi = `# 1. 安装扩展\npi install npm:@weiping/pi-mbridge\n\n# 2. 项目配置：在项目的 .pi/settings.json 中指定\n{\n  "defaultProvider": "magpie",\n  "defaultModel": "group/mbridge"\n}`;
+    pPi.appendChild(el("div", { class: "step-cmd" }, [el("pre", { text: cmdPi })]));
+    steps2.appendChild(pPi);
+
+    card2.appendChild(steps2);
+    box.appendChild(card2);
+
+    // Actions & Live polling indicator
+    const actions = el("div", { style: "margin: 1rem 0; display: flex; align-items: center; gap: 1rem;" });
+    const refBtn = el("button", { type: "button", class: "guide-refresh", text: isZh ? "🔄 检查服务状态" : "🔄 Check Status" });
+    refBtn.onclick = () => {
+      refBtn.textContent = isZh ? "正在刷新…" : "Refreshing…";
+      if (globalThis.pollMbridge) globalThis.pollMbridge();
+    };
+    actions.appendChild(refBtn);
+
+    const tipLink = el("span", { class: "guide-tip", text: isZh ? "mbridge 服务启动后，本页面将自动实时切换为数据监控大盘。" : "Once mbridge starts, this page will automatically display the dashboard." });
+    actions.appendChild(tipLink);
+
+    box.appendChild(actions);
+    root.appendChild(box);
+  }
+
+  function render(data) {
   const root = document.getElementById("root");
   root.textContent = "";
   const t = T();
@@ -580,5 +687,7 @@ function render(data) {
     distribution,
     calibrationTable,
     render,
+    renderGuide,
+    detectOS,
   };
 })();