dsh-llm-workbuddy 0.1.13 → 0.1.14

package/CHANGELOG.md

@@ -4,6 +4,19 @@
 每次发版请同步 `package.json` 的 `version` 并打一个 `git tag`（如 `v0.1.13`），
 在 GitHub 创建 Release 时本文件即为更新说明来源。
 
+## [0.1.14] - 2026-08-28
+
+### Changed
+- 状态胶囊精简：外面只保留一个 **⚙️ 设置** 按钮，点击展开菜单显示原来的
+  四个操作（🔍 诊断 / 📊 用量 / 🎁 签到 / 🔄 刷新模型），每个都带明确 title。
+- 浮层（诊断 / 用量）统一加 **右上角 ✕ 关闭按钮**，并支持**点击浮层外区域**与
+  **按 Esc** 关闭，不再只能"再点一次菜单项"才收起。
+- 菜单交互修复（与本次功能一并发布）：
+  - 点击设置按钮可正常展开/收起（解决 `render()` 重建 DOM 触发外部点击误关的问题，
+    给设置按钮加 `stopPropagation()`）。
+  - 点击菜单项后立即收起菜单（此前只改状态不重渲染，要等下次轮询才消失）。
+  - 点击页面空白处亦可收起。
+
 ## [0.1.13] - 2026-08-28
 
 ### Added
@@ -37,6 +50,7 @@
 ---
 
 <!-- 历史版本锚点（便于生成 Release 时对比区间） -->
+[0.1.14]: https://github.com/zdk119746/dsh-llm-workbuddy/compare/v0.1.13...v0.1.14
 [0.1.13]: https://github.com/zdk119746/dsh-llm-workbuddy/compare/v0.1.12...v0.1.13
 [0.1.12]: https://github.com/zdk119746/dsh-llm-workbuddy/compare/v0.1.11...v0.1.12
 [0.1.11]: https://github.com/zdk119746/dsh-llm-workbuddy/releases/tag/v0.1.11

package/README.md

@@ -213,13 +213,17 @@ Web 登录后终端脚本也读得到同一份会话。
 - 启动时在 `document.body` 末尾挂一个 `position:fixed` 的胶囊（右下角）。
 - 每 **5 秒** `GET /api/workbuddy/status`；点「登录」后加快到每 **2 秒**轮询、
   最多 30 次，直到 `authenticated:true`。
-- 胶囊里有个 **🔍 诊断** 按钮：点它 `POST /api/workbuddy/diagnose`，弹出一个面板
+- 胶囊外面只显示一个 **⚙️ 设置** 按钮（带 title「WorkBuddy 设置」）。点击展开菜单，
+  内含四个带明确 title 的操作：**🔍 诊断 / 📊 用量 / 🎁 签到 / 🔄 刷新模型**；
+  点击页面空白或选中某项后菜单自动收起。
+- **🔍 诊断**：点它 `POST /api/workbuddy/diagnose`，弹出一个面板
   显示**真实健康状态**（登录、会话文件、代理进程、登录令牌、模型能否出字），
   发现问题时附带**可复制的重启命令**（一键复制到终端执行）。
-- 胶囊里有个 **📊 用量** 按钮：点它 `GET /api/workbuddy/usage`，弹出一个面板
+- **📊 用量**：点它 `GET /api/workbuddy/usage`，弹出一个面板
   显示**今日/累计 token 用量**、**积分消耗**（上游每次返回的 `credit` 累加）与
   **按模型明细**（数据来自本地台账 `$DSH_HOME/llm-workbuddy/usage.jsonl`）。
   注：代理不暴露余额/剩余积分接口，只能统计**已消耗**积分，无法显示账户剩余。
+- 诊断 / 用量浮层**右上角都有 ✕ 关闭按钮**，也可点击浮层外区域或按 Esc 关闭。
 - 状态映射：
   - `authenticated && proxyUp` → 🟢 绿，显示 `WorkBuddy · <昵称>`
   - 否则 → 🔴 红，显示「登录」按钮；`proxyUp` 为 false 时额外提示 `代理未运行`

package/lib/client.js

@@ -73,13 +73,34 @@ function runWidget() {
     ".wb-btn{margin-left:4px;border:0;border-radius:6px;background:#2563eb;color:#fff;" +
     "padding:3px 8px;cursor:pointer;font:inherit;}" +
     ".wb-btn:disabled{opacity:.6;cursor:default;}" +
-    ".wb-warn{margin-left:6px;color:#f59e0b;font-size:11px;}";
+    ".wb-warn{margin-left:6px;color:#f59e0b;font-size:11px;}" +
+    ".wb-settle{position:relative;}" +
+    ".wb-setbtn{margin-left:4px;border:0;border-radius:6px;background:#374151;color:#e5e7eb;" +
+    "padding:3px 8px;cursor:pointer;font:inherit;}" +
+    ".wb-menu{position:absolute;right:0;bottom:38px;display:flex;flex-direction:column;gap:4px;" +
+    "background:#0f172a;border:1px solid #334155;border-radius:8px;padding:6px;min-width:148px;" +
+    "box-shadow:0 6px 20px rgba(0,0,0,.5);}" +
+    ".wb-menu .wb-item{display:flex;align-items:center;gap:6px;width:100%;text-align:left;" +
+    "border:0;border-radius:6px;background:#1e293b;color:#e2e8f0;padding:6px 8px;cursor:pointer;" +
+    "font:inherit;white-space:nowrap;}" +
+    ".wb-menu .wb-item:hover{background:#334155;}" +
+    ".wb-menu .wb-item .wb-ico{font-size:13px;}" +
+    ".wb-menu .wb-item:disabled{opacity:.6;cursor:default;}" +
+    ".wb-panel{position:fixed;right:12px;bottom:44px;z-index:2147483647;width:340px;max-height:340px;overflow:auto;" +
+    "background:#0f172a;color:#e2e8f0;border:1px solid #334155;border-radius:8px;padding:10px;" +
+    "font:12px/1.5 system-ui,sans-serif;box-shadow:0 6px 20px rgba(0,0,0,.5);}" +
+    ".wb-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}" +
+    ".wb-panel-head .wb-ttl{font-weight:700;}" +
+    ".wb-panel .wb-close{border:0;background:transparent;color:#94a3b8;cursor:pointer;" +
+    "font-size:14px;line-height:1;padding:2px 6px;border-radius:4px;}" +
+    ".wb-panel .wb-close:hover{background:#1e293b;color:#e2e8f0;}";
   document.head.appendChild(style);
   document.body.appendChild(host);
 
   var status = null;
   var busy = false;
   var timer = null;
+  var menuOpen = false;
 
   function fmtExpiry(expiresAt) {
     if (!expiresAt) return "";
@@ -105,35 +126,60 @@ function runWidget() {
       html += '<button class="wb-btn" id="wb-login"' + disabled + ">" +
         (busy ? "登录中…" : "登录") + "</button>";
     }
-    // 诊断按钮始终显示，便于随时自查真实健康状态。
-    html += '<button class="wb-btn wb-diagnose" id="wb-diagnose" title="一键诊断">🔍</button>';
-    // 用量按钮：查看今日/累计 token 用量与模型明细。
-    html += '<button class="wb-btn wb-usage" id="wb-usage" title="用量统计">📊</button>';
-    // 签到按钮：✅ 今日已处理 / 🎁 今日未处理（点击立即领取；10 点后也会自动领取）。
-    var ck = status.checkin;
-    if (ck) {
-      var ckMsg = ck.lastResult && ck.lastResult.message ? "\n" + ck.lastResult.message : "";
-      var ckTitle = ck.handledToday ? "今日已处理签到" + ckMsg : "今日还没签到（每天 10 点后自动领取）\n点击立即领取";
-      var ckIcon = ck.handledToday && ck.lastResult && ck.lastResult.ok ? "✅" : "🎁";
-      html += '<button class="wb-btn wb-checkin" id="wb-checkin" title="' + esc(ckTitle) + '">' + ckIcon + "</button>";
+    // 只外显一个设置按钮：点击展开诊断/用量/签到/刷新模型四个操作。
+    html += '<span class="wb-settle">' +
+      '<button class="wb-setbtn" id="wb-settings" title="WorkBuddy 设置（诊断 / 用量 / 签到 / 刷新模型）">⚙️</button>';
+    if (menuOpen) {
+      // 签到按钮：✅ 今日已处理 / 🎁 今日未处理（点击立即领取；10 点后也会自动领取）。
+      var ck = status.checkin;
+      var ckTitle = "今日还没签到（每天 10 点后自动领取）\n点击立即领取";
+      var ckIcon = "🎁";
+      var ckDisabled = "";
+      if (ck) {
+        var ckMsg = ck.lastResult && ck.lastResult.message ? "\n" + ck.lastResult.message : "";
+        ckTitle = ck.handledToday ? "今日已处理签到" + ckMsg : ckTitle;
+        ckIcon = ck.handledToday && ck.lastResult && ck.lastResult.ok ? "✅" : "🎁";
+        ckDisabled = ck.handledToday ? " disabled" : "";
+      }
+      html += '<span class="wb-menu">' +
+        '<button class="wb-item" id="wb-diagnose" title="一键诊断：真实探测登录、代理、令牌与模型出字状态">🔍 诊断</button>' +
+        '<button class="wb-item" id="wb-usage" title="用量统计：查看今日/累计 token 与积分消耗、按模型明细">📊 用量</button>' +
+        '<button class="wb-item" id="wb-checkin" title="' + esc(ckTitle) + '"' + ckDisabled + '>' + ckIcon + " 签到</button>" +
+        '<button class="wb-item" id="wb-models" title="刷新模型列表：从代理重读模型并让模型选择器立即重载">🔄 刷新模型</button>' +
+        "</span>";
     }
-    // 刷新模型按钮：从代理重读模型列表（跟随 WorkBuddy 应用更新）并让模型选择器立即重载。
-    html += '<button class="wb-btn wb-models" id="wb-models" title="刷新模型列表">🔄</button>';
+    html += "</span>";
     if (!status.proxyUp) html += '<span class="wb-warn">代理未运行</span>';
     html += "</div>";
     host.innerHTML = html;
     var btn = host.querySelector("#wb-login");
     if (btn) btn.addEventListener("click", onLogin);
+    var setBtn = host.querySelector("#wb-settings");
+    if (setBtn) setBtn.addEventListener("click", function (e) {
+      // 阻止冒泡：render() 会重建 host 的 DOM，被点按钮随即脱离文档，
+      // 否则 document 的外部点击监听器会误判为"点在外面"而立刻关掉菜单。
+      e.stopPropagation();
+      menuOpen = !menuOpen;
+      render();
+    });
     var dg = host.querySelector("#wb-diagnose");
-    if (dg) dg.addEventListener("click", onDiagnose);
+    if (dg) dg.addEventListener("click", function () { menuOpen = false; render(); onDiagnose(); });
     var us = host.querySelector("#wb-usage");
-    if (us) us.addEventListener("click", onUsage);
+    if (us) us.addEventListener("click", function () { menuOpen = false; render(); onUsage(); });
     var ckBtn = host.querySelector("#wb-checkin");
-    if (ckBtn) ckBtn.addEventListener("click", onCheckin);
+    if (ckBtn) ckBtn.addEventListener("click", function () { menuOpen = false; render(); onCheckin(); });
     var mdBtn = host.querySelector("#wb-models");
-    if (mdBtn) mdBtn.addEventListener("click", onRefreshModels);
+    if (mdBtn) mdBtn.addEventListener("click", function () { menuOpen = false; render(); onRefreshModels(); });
   }
 
+  // 点击页面其它位置关闭设置菜单。
+  document.addEventListener("click", function (e) {
+    if (!menuOpen) return;
+    if (host.contains(e.target)) return;
+    menuOpen = false;
+    render();
+  });
+
   function refresh() {
     return fetch("/api/workbuddy/status")
       .then(function (r) { return r.ok ? r.json() : null; })
@@ -177,15 +223,7 @@ function runWidget() {
   function onDiagnose() {
     var panel = document.getElementById("wb-diagnose-panel");
     if (panel) { panel.remove(); return; }
-    var el = document.createElement("div");
-    el.id = "wb-diagnose-panel";
-    el.style.cssText =
-      "position:fixed;right:12px;bottom:44px;z-index:2147483647;width:340px;max-height:340px;overflow:auto;" +
-      "background:#0f172a;color:#e2e8f0;border:1px solid #334155;border-radius:8px;" +
-      "padding:10px;font:12px/1.5 system-ui,sans-serif;box-shadow:0 6px 20px rgba(0,0,0,.5);";
-    el.innerHTML = '<div class="wb-dg-title" style="font-weight:700;margin-bottom:6px">WorkBuddy 诊断中…</div>' +
-      '<div class="wb-dg-body" style="white-space:pre-wrap;word-break:break-word;color:#94a3b8">正在探测…</div>';
-    document.body.appendChild(el);
+    var el = makePanel("wb-diagnose-panel", "WorkBuddy 诊断");
 
     fetch("/api/workbuddy/diagnose", { method: "POST" })
       .then(function (r) { return r.json(); })
@@ -199,18 +237,20 @@ function runWidget() {
         lines.push("登录令牌: " + (d.health && d.health.tokenValid ? "有效" : "无效"));
         lines.push("模型出字: " + (d.chat && d.chat.chatWorking ? "正常" : "失败"));
         if (d.chat && d.chat.chatError) lines.push("出字错误: " + d.chat.chatError);
-        var html = '<div class="wb-dg-title" style="font-weight:700;margin-bottom:6px">' + title + '</div>' +
-          '<div class="wb-dg-body" style="white-space:pre-wrap;word-break:break-word">' + lines.map(esc).join("\n") + "</div>";
+        var body = el.querySelector(".wb-panel-body");
+        var html = '<div style="font-weight:700;margin-bottom:4px">' + esc(title) + '</div>' +
+          '<div>' + lines.map(esc).join("\n") + "</div>";
         if (!d.ok && d.restartCommand) {
           html += '<div style="margin-top:8px;font-weight:700">重启命令（复制到终端执行）：</div>' +
             '<pre style="background:#1e293b;border-radius:6px;padding:8px;font-size:11px;overflow:auto;white-space:pre-wrap">' +
             esc(d.restartCommand) + "</pre>" +
             '<button class="wb-btn" id="wb-copy-cmd">复制重启命令</button>';
         }
-        el.innerHTML = html;
+        body.innerHTML = html;
         var copy = document.getElementById("wb-copy-cmd");
         if (copy) {
-          copy.addEventListener("click", function () {
+          copy.addEventListener("click", function (e) {
+            e.stopPropagation();
             navigator.clipboard.writeText(d.restartCommand).then(function () {
               copy.textContent = "已复制 ✓";
               setTimeout(function () { copy.textContent = "复制重启命令"; }, 1500);
@@ -219,8 +259,8 @@ function runWidget() {
         }
       })
       .catch(function (err) {
-        el.innerHTML = '<div class="wb-dg-title" style="font-weight:700;color:#f87171">诊断失败</div>' +
-          '<div class="wb-dg-body">' + esc(String(err && err.message || err)) + "</div>";
+        el.querySelector(".wb-panel-body").innerHTML =
+          '<div style="font-weight:700;color:#f87171">诊断失败</div><div>' + esc(String(err && err.message || err)) + "</div>";
       });
   }
 
@@ -228,15 +268,7 @@ function runWidget() {
   function onUsage() {
     var panel = document.getElementById("wb-usage-panel");
     if (panel) { panel.remove(); return; }
-    var el = document.createElement("div");
-    el.id = "wb-usage-panel";
-    el.style.cssText =
-      "position:fixed;right:12px;bottom:44px;z-index:2147483647;width:340px;max-height:340px;overflow:auto;" +
-      "background:#0f172a;color:#e2e8f0;border:1px solid #334155;border-radius:8px;" +
-      "padding:10px;font:12px/1.5 system-ui,sans-serif;box-shadow:0 6px 20px rgba(0,0,0,.5);";
-    el.innerHTML = '<div class="wb-usage-title" style="font-weight:700;margin-bottom:6px">WorkBuddy 用量统计</div>' +
-      '<div class="wb-usage-body" style="color:#94a3b8">加载中…</div>';
-    document.body.appendChild(el);
+    var el = makePanel("wb-usage-panel", "WorkBuddy 用量统计");
 
     fetch("/api/workbuddy/usage")
       .then(function (r) { return r.ok ? r.json() : null; })
@@ -260,13 +292,12 @@ function runWidget() {
         var note = hasCredit
           ? "数据来源：本地用量台账（含上游每次返回的积分消耗；代理不暴露余额接口，无法显示剩余积分）"
           : "数据来源：本地 token 用量台账（" + d.total.requests + " 次累计）；当前模型为免费/折扣档，上游回报积分为 0";
-        el.innerHTML = '<div class="wb-usage-title" style="font-weight:700;margin-bottom:6px">WorkBuddy 用量统计</div>' +
-          '<div class="wb-usage-body" style="white-space:pre-wrap;word-break:break-word">' + esc(lines.join("\n")) + "</div>" +
-          '<div style="margin-top:8px;color:#64748b;font-size:11px">' + esc(note) + "</div>";
+        el.querySelector(".wb-panel-body").innerHTML =
+          esc(lines.join("\n")) + '<div style="margin-top:8px;color:#64748b;font-size:11px">' + esc(note) + "</div>";
       })
       .catch(function (err) {
-        el.innerHTML = '<div class="wb-usage-title" style="font-weight:700;color:#f87171">用量加载失败</div>' +
-          '<div class="wb-usage-body">' + esc(String(err && err.message || err)) + "</div>";
+        el.querySelector(".wb-panel-body").innerHTML =
+          '<div style="font-weight:700;color:#f87171">用量加载失败</div><div>' + esc(String(err && err.message || err)) + "</div>";
       });
   }
 
@@ -282,6 +313,35 @@ function runWidget() {
     return (Math.round(v * 100) / 100).toString();
   }
 
+  /**
+   * 创建一个可关闭的浮层（诊断/用量面板共用）。右上角带 ❌，点击浮层外区域或按
+   * Esc 均可关闭。返回的 el 由调用方填充内容；再次点击对应菜单项也可关闭
+   * （调用方已对 getElementById(id) 做了存在即 remove 的处理）。
+   * @param {string} id  浮层 DOM id（如 "wb-usage-panel"）
+   * @param {string} title 标题文字
+   * @returns {HTMLElement}
+   */
+  function makePanel(id, title) {
+    var el = document.createElement("div");
+    el.id = id;
+    el.className = "wb-panel";
+    el.innerHTML =
+      '<div class="wb-panel-head"><span class="wb-ttl">' + esc(title) + "</span>" +
+      '<button class="wb-close" title="关闭">✕</button></div>' +
+      '<div class="wb-panel-body" style="white-space:pre-wrap;word-break:break-word;color:#94a3b8">加载中…</div>';
+    document.body.appendChild(el);
+    var close = function () { el.remove(); document.removeEventListener("click", onDocClick, true); document.removeEventListener("keydown", onKey); };
+    el.querySelector(".wb-close").addEventListener("click", close);
+    var onDocClick = function (e) { if (!el.contains(e.target)) close(); };
+    var onKey = function (e) { if (e.key === "Escape") close(); };
+    // 用捕获阶段，避免被状态胶囊的 document 点击监听（菜单外部关闭）提前吞掉。
+    setTimeout(function () {
+      document.addEventListener("click", onDocClick, true);
+      document.addEventListener("keydown", onKey);
+    }, 0);
+    return el;
+  }
+
   /** 手动领取今日签到（幂等：官方对已签到返回业务拒绝，不会出错）。 */
   function onCheckin() {
     var btn = host.querySelector("#wb-checkin");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-llm-workbuddy",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "description": "WorkBuddy (via the local workbuddy2api proxy) LLM provider adapter for DeepSeek Harness, with a Web login-status widget",
   "type": "module",
   "main": "lib/index.js",