magic-agent 2.4.3 → 2.6.0

package/client-ui-mobile/reqshot.js

@@ -0,0 +1,505 @@
+/* 需求页「页面完成情况」截图与标注（移动端专用子页面模块）。
+ *
+ * 需求（2026-10-25 用户）：「需求文档整理时 如果设计页面改造 调用内置浏览器mcp
+ * 对完成情况截图标注并放在文档中」。
+ *
+ * ── 链路（谁做什么；2026-10-25 MCP 改基 agent-browser）──
+ *   1. 需求页功能点行上出「相机徽标」（有 page_url 才有；归纳时从对话里提取的页面地址）。
+ *      点徽标 → 本模块开一张抽屉：页面地址（可改）+ 标注说明（可改）。
+ *   2. 「打开页面并截图」→ 两步走：
+ *      a) **强制走桌面端中转**（/b/）把页面开进手机浏览器：给用户看、滚到完成状态。
+ *         中转里注入的 relay 只负责「远程鼠标」（触控镜像），**不再承担截图**。
+ *      b) **服务端 agent-browser**（真实 Chromium）按页面地址重新打开并截**全页图**：
+ *         POST /desk/requirements/shot-remote {"url":…} → {data:"/desk/uploads/…png"}。
+ *         服务端没装 agent-browser 时端点回 501 + 安装提示（诚实报错，不假装能截）。
+ *   3. 拿到图片 → 开**标注浮层**（矩形 / 文字 / 三色 / 撤销 / 清除）。
+ *   4. 「完成」→ canvas.toBlob('image/png') → POST /desk/requirements/shots（**原始字节**
+ *      不是 multipart）→ core 落盘并把这一行追加进该功能点文档的「页面完成情况」段 →
+ *      刷新需求清单。
+ *
+ * ── 已知边界 ──
+ *   · 服务端截的是 agent-browser 独立 profile 里的 page_url：需要登录的页面截出来
+ *     可能是登录页（不共享中转 cookie jar）；截的是页面加载完的初始状态，不是
+ *     手机 iframe 里滚到的位置。
+ *   · 标注只有矩形与文字（没有箭头 / 马赛克 / 裁剪）。
+ *
+ * 与宿主（index.html）的边界：只通过 mount(host) 注入的能力交互 ——
+ *   getBase / getToken、toast、hEl / elSpan、openSheet / closeSheet、
+ *   openBrowseProxy / proxyURL、setRelayOn、setShotBtn、refreshReqs。
+ * 截图链路的形状见 CLIENT-CONTRACT.md §3.4.1（shot-remote / shots 端点）与「浏览器 MCP」段。
+ */
+(function () {
+  'use strict';
+
+  var H = null;             // 宿主（index.html 注入）
+  var TASK = null;          // 当前截图任务 {ws, module, name, caption, url}
+  var SHOTTING = false;     // 服务端截图进行中
+  var ANNO = null;          // 标注浮层句柄
+  var SHOT_WAIT = 90000;    // 服务端截图的上限（开页 + 冷启动 daemon 可能十几秒）
+  var RELAY_WAS = null;     // 进来时中转开关的状态（结束时还原）
+
+  /* 标注颜色（三色：红/黄/绿）。深色底上的图也要看得清，所以文字额外描一圈深边。 */
+  var COLORS = ['#e5484d', '#f5a524', '#2ea043'];
+
+  function hEl(tag, cls, text) { return H.hEl(tag, cls, text); }
+  function elSpan(cls, text) { return H.elSpan(cls, text); }
+  function toast(msg) { return H.toast(msg); }
+
+  /* ── 抽屉：页面地址 + 标注说明 ──
+     URL 与说明都可改：归纳出来的页面地址可能提错或漏提（用户 2026-10-25 的原话
+     就是「涉及页面改造」—— 具体哪个页面人来定更准）。 */
+  function openSheet(task) {
+    TASK = task;
+    H.openSheet('页面完成情况截图', function (body) {
+      var hint = hEl('div', 'reqshot__hint',
+        '点「打开页面并截图」：手机端开页面供你查看，同时服务端浏览器对页面截一张全页图，再由你标注。');
+      body.appendChild(hint);
+
+      var f1 = hEl('div', 'field');
+      var l1 = document.createElement('label');
+      l1.textContent = '页面地址';
+      f1.appendChild(l1);
+      var inpUrl = document.createElement('input');
+      inpUrl.type = 'text';
+      inpUrl.value = task.url || '';
+      inpUrl.placeholder = 'https://example.com/app';
+      inpUrl.setAttribute('autocapitalize', 'off');
+      inpUrl.setAttribute('autocorrect', 'off');
+      inpUrl.setAttribute('spellcheck', 'false');
+      f1.appendChild(inpUrl);
+      body.appendChild(f1);
+
+      var f2 = hEl('div', 'field');
+      var l2 = document.createElement('label');
+      l2.textContent = '标注说明（写进需求文档）';
+      f2.appendChild(l2);
+      var inpCap = document.createElement('input');
+      inpCap.type = 'text';
+      inpCap.value = task.caption || '';
+      inpCap.placeholder = '例如：双列布局已生效';
+      inpCap.setAttribute('autocapitalize', 'off');
+      inpCap.setAttribute('autocorrect', 'off');
+      inpCap.setAttribute('spellcheck', 'false');
+      f2.appendChild(inpCap);
+      body.appendChild(f2);
+
+      var err = hEl('div', 'field__err');
+      err.hidden = true;
+      body.appendChild(err);
+
+      var ok = hEl('button', 'btn btn--filled', '打开页面并截图');
+      ok.type = 'button';
+      body.appendChild(ok);
+
+      function fail(msg) { err.textContent = msg; err.hidden = false; }
+      function go() {
+        var u = String(inpUrl.value || '').trim();
+        if (!u) { fail('页面地址不能为空'); inpUrl.focus(); return; }
+        if (!/^https?:\/\//i.test(u)) { fail('页面地址要以 http:// 或 https:// 开头'); inpUrl.focus(); return; }
+        TASK.url = u;
+        TASK.caption = String(inpCap.value || '').trim();
+        H.closeSheet();
+        start(u);
+      }
+      ok.onclick = go;
+      inpUrl.onkeydown = function (e) { if (e.key === 'Enter') { e.preventDefault(); go(); } };
+      setTimeout(function () { try { inpUrl.focus(); inpUrl.select(); } catch (e) {} }, 30);
+    });
+  }
+
+  /* ── 打开页面 + 服务端截图 ──
+     手机端走中转开页面（给用户看 + 触控）；截图由服务端 agent-browser 完成。 */
+  function start(url) {
+    if (!H.getBase() || !H.getToken()) {
+      toast('未配对桌面端，截图不可用');
+      return;
+    }
+    /* 中转开关被我们强开（让用户能看着页面）—— 记下原值，流程结束时还原。 */
+    if (RELAY_WAS === null) RELAY_WAS = !!H.relayOn();
+    H.setRelayOn(true);
+    H.openBrowseProxy(H.proxyURL(url));
+    toast('页面已打开，服务端截图中…');
+    capture();
+  }
+
+  /* ── 发起截图（服务端 agent-browser）──
+     抽屉的「打开页面并截图」直接走这里；浏览器工具栏的「截图」按钮同样。 */
+  function capture() {
+    if (!TASK || !TASK.url) { toast('先从需求页点功能点上的相机徽标'); return; }
+    if (SHOTTING) { toast('正在截图，请稍候'); return; }
+    var base = String(H.getBase() || '');
+    if (!base) { toast('未配对桌面端，截图不可用'); return; }
+    SHOTTING = true;
+    var hdr = { 'Content-Type': 'application/json' };
+    if (H.getToken()) hdr['X-Magic-Token'] = H.getToken();
+    fetch(base + '/desk/requirements/shot-remote', {
+      method: 'POST', headers: hdr,
+      body: JSON.stringify({ url: TASK.url, full_page: true })
+    })
+      .then(function (r) {
+        return r.text().then(function (t) {
+          var d = {};
+          try { d = JSON.parse(t); } catch (e) {}
+          if (!r.ok) throw new Error(d.error || ('HTTP ' + r.status));
+          return d;
+        });
+      })
+      .then(function (d) {
+        SHOTTING = false;
+        var rel = String(d.data || '');
+        if (!rel) { toast('截图失败：服务端没有回传图片地址'); return; }
+        openAnno(rel);
+      })
+      .catch(function (e) {
+        SHOTTING = false;
+        toast('截图失败：' + ((e && e.message) || e));
+      });
+    /* 兜底超时：服务端卡住时不至于永远转圈。 */
+    setTimeout(function () {
+      if (SHOTTING) {
+        SHOTTING = false;
+        toast('截图超时（服务端浏览器打开页面太慢）');
+      }
+    }, SHOT_WAIT);
+  }
+
+  /* ── 标注浮层 ── */
+  function openAnno(relURL) {
+    closeAnno();
+    var base = String(H.getBase() || '');
+    var tok = String(H.getToken() || '');
+    var imgURL = base + relURL + (relURL.indexOf('?') >= 0 ? '&' : '?') +
+      'token=' + encodeURIComponent(tok);
+
+    var ov = hEl('div', 'reqshot-anno');
+    var bar = hEl('div', 'reqshot-anno__bar');
+    var stage = hEl('div', 'reqshot-anno__stage');
+    var cv = document.createElement('canvas');
+    cv.className = 'reqshot-anno__cv';
+    stage.appendChild(cv);
+    var hint = hEl('div', 'reqshot-anno__hint', '加载截图…');
+    stage.appendChild(hint);
+
+    var tool = 'rect';
+    var color = COLORS[0];
+
+    function mkBtn(cls, label, onClick) {
+      var b = hEl('button', cls, label);
+      b.type = 'button';
+      b.onclick = onClick;
+      return b;
+    }
+    var bRect = mkBtn('reqshot-anno__tbtn', '矩形', function () { setTool('rect'); });
+    var bText = mkBtn('reqshot-anno__tbtn', '文字', function () { setTool('text'); });
+    var bUndo = mkBtn('reqshot-anno__tbtn', '撤销', function () { undo(); });
+    var bClear = mkBtn('reqshot-anno__tbtn', '清除', function () { ANNO.ops = []; draw(); });
+    bar.appendChild(bRect);
+    bar.appendChild(bText);
+    bar.appendChild(bUndo);
+    bar.appendChild(bClear);
+
+    var colors = hEl('div', 'reqshot-anno__colors');
+    var cBtns = [];
+    COLORS.forEach(function (c) {
+      var b = hEl('button', 'reqshot-anno__c');
+      b.type = 'button';
+      b.style.background = c;
+      b.onclick = function () { color = c; paintC(); };
+      colors.appendChild(b);
+      cBtns.push(b);
+    });
+    bar.appendChild(colors);
+
+    var acts = hEl('div', 'reqshot-anno__acts');
+    var bCancel = mkBtn('reqshot-anno__tbtn reqshot-anno__tbtn--mute', '取消', function () { closeAnno(); });
+    var bDone = mkBtn('reqshot-anno__tbtn reqshot-anno__tbtn--ok', '完成', function () { done(); });
+    bDone.disabled = true;
+    acts.appendChild(bCancel);
+    acts.appendChild(bDone);
+    bar.appendChild(acts);
+
+    ov.appendChild(bar);
+    ov.appendChild(stage);
+    document.body.appendChild(ov);
+
+    var ctx = cv.getContext('2d');
+    ANNO = {
+      ov: ov, cv: cv, ctx: ctx, stage: stage, hint: hint,
+      base: null, ops: [], pending: null, tool: tool, color: color,
+      textInput: null
+    };
+
+    function setTool(t) {
+      tool = t;
+      ANNO.tool = t;
+      bRect.classList.toggle('is-on', t === 'rect');
+      bText.classList.toggle('is-on', t === 'text');
+    }
+    function paintC() {
+      cBtns.forEach(function (b, i) { b.classList.toggle('is-on', COLORS[i] === color); });
+    }
+    setTool('rect');
+    paintC();
+
+    /* 图片加载：relay 上传到 staging 的那张图（可能很大，等一会儿）。 */
+    var img = new Image();
+    img.onload = function () {
+      if (!ANNO || ANNO.cv !== cv) return;
+      cv.width = img.naturalWidth || img.width || 1;
+      cv.height = img.naturalHeight || img.height || 1;
+      ANNO.base = img;
+      hint.hidden = true;
+      bDone.disabled = false;
+      draw();
+    };
+    img.onerror = function () {
+      if (!ANNO || ANNO.cv !== cv) return;
+      hint.hidden = false;
+      hint.textContent = '截图读不出来（可能已过期），请重新截一张';
+    };
+    img.src = imgURL;
+
+    /* ── 绘制 ── */
+    function drawOp(ctx2, op) {
+      ctx2.save();
+      if (op.type === 'rect') {
+        ctx2.strokeStyle = op.color;
+        ctx2.lineWidth = op.lw;
+        ctx2.strokeRect(op.x, op.y, op.w, op.h);
+      } else if (op.type === 'text') {
+        ctx2.font = '600 ' + op.size + 'px system-ui, -apple-system, sans-serif';
+        ctx2.textBaseline = 'top';
+        ctx2.lineWidth = Math.max(2, op.size / 8);
+        ctx2.strokeStyle = 'rgba(0,0,0,.6)';
+        ctx2.strokeText(op.text, op.x, op.y);
+        ctx2.fillStyle = op.color;
+        ctx2.fillText(op.text, op.x, op.y);
+      }
+      ctx2.restore();
+    }
+    function draw() {
+      if (!ANNO) return;
+      var c = ANNO.ctx;
+      c.clearRect(0, 0, ANNO.cv.width, ANNO.cv.height);
+      if (ANNO.base) c.drawImage(ANNO.base, 0, 0);
+      ANNO.ops.forEach(function (op) { drawOp(c, op); });
+      if (ANNO.pending) drawOp(c, ANNO.pending);
+    }
+    function undo() {
+      if (!ANNO || !ANNO.ops.length) return;
+      ANNO.ops.pop();
+      draw();
+    }
+
+    /* 屏幕坐标 → 画布坐标（画布按原图分辨率，显示时缩放过）。 */
+    function toCanvas(clientX, clientY) {
+      var r = cv.getBoundingClientRect();
+      var k = r.width > 0 ? cv.width / r.width : 1;
+      return { x: (clientX - r.left) * k, y: (clientY - r.top) * k };
+    }
+    function strokeWidth() {
+      return Math.max(3, Math.round(cv.width / 300));
+    }
+    function fontSize() {
+      return Math.max(16, Math.round(cv.width / 28));
+    }
+
+    /* ── 手势 ── */
+    var dragging = false;
+    var startPt = null;
+
+    cv.addEventListener('pointerdown', function (e) {
+      if (!ANNO || !ANNO.base) return;
+      e.preventDefault();
+      if (ANNO.tool === 'text') {
+        openTextInput(toCanvas(e.clientX, e.clientY));
+        return;
+      }
+      dragging = true;
+      startPt = toCanvas(e.clientX, e.clientY);
+      ANNO.pending = { type: 'rect', x: startPt.x, y: startPt.y, w: 0, h: 0, color: color, lw: strokeWidth() };
+      try { cv.setPointerCapture(e.pointerId); } catch (err) {}
+    });
+    cv.addEventListener('pointermove', function (e) {
+      if (!dragging || !ANNO || !ANNO.pending) return;
+      e.preventDefault();
+      var p = toCanvas(e.clientX, e.clientY);
+      var x = Math.min(startPt.x, p.x), y = Math.min(startPt.y, p.y);
+      ANNO.pending.x = x;
+      ANNO.pending.y = y;
+      ANNO.pending.w = Math.abs(p.x - startPt.x);
+      ANNO.pending.h = Math.abs(p.y - startPt.y);
+      draw();
+    });
+    function endDrag(e) {
+      if (!dragging || !ANNO || !ANNO.pending) return;
+      dragging = false;
+      var op = ANNO.pending;
+      ANNO.pending = null;
+      /* 太小的框按误触处理：丢掉，不往文档里塞一个看不见的标记。 */
+      if (op.w > 4 && op.h > 4) ANNO.ops.push(op);
+      draw();
+    }
+    cv.addEventListener('pointerup', endDrag);
+    cv.addEventListener('pointercancel', endDrag);
+
+    /* 文字工具：**不用 window.prompt** —— Android WebView 与 Electron 小窗都没实现它，
+       调用只会静默返回 null（表现是「点了没反应」）。这里自己放一个真输入框。 */
+    function openTextInput(pt) {
+      if (ANNO.textInput) return;
+      var box = hEl('div', 'reqshot-anno__textbox');
+      var inp = document.createElement('input');
+      inp.type = 'text';
+      inp.placeholder = '写点什么';
+      inp.setAttribute('autocapitalize', 'off');
+      inp.setAttribute('autocorrect', 'off');
+      inp.setAttribute('spellcheck', 'false');
+      var okBtn = hEl('button', 'reqshot-anno__tbtn reqshot-anno__tbtn--ok', '落字');
+      okBtn.type = 'button';
+      box.appendChild(inp);
+      box.appendChild(okBtn);
+      ANNO.ov.appendChild(box);
+      ANNO.textInput = box;
+      setTimeout(function () { try { inp.focus(); } catch (e) {} }, 20);
+
+      function commit() {
+        var t = String(inp.value || '').trim();
+        ANNO.textInput = null;
+        if (box.parentNode) box.parentNode.removeChild(box);
+        if (t) {
+          ANNO.ops.push({ type: 'text', x: pt.x, y: pt.y, text: t, color: color, size: fontSize() });
+          draw();
+        }
+      }
+      okBtn.onclick = commit;
+      inp.onkeydown = function (e) {
+        if (e.key === 'Enter') { e.preventDefault(); commit(); }
+        if (e.key === 'Escape') { e.preventDefault(); ANNO.textInput = null; if (box.parentNode) box.parentNode.removeChild(box); }
+      };
+    }
+
+    /* ── 完成：把画布导成 PNG 交给 core ── */
+    function done() {
+      if (!ANNO || !ANNO.base) return;
+      bDone.disabled = true;
+      try {
+        ANNO.cv.toBlob(function (b) {
+          if (!b) { bDone.disabled = false; toast('导出截图失败'); return; }
+          save(b);
+        }, 'image/png');
+      } catch (e) {
+        bDone.disabled = false;
+        toast('导出截图失败：' + ((e && e.message) || e));
+      }
+    }
+
+    function save(blob) {
+      if (!TASK) { toast('没有目标功能点'); return; }
+      var q = '?ws=' + encodeURIComponent(TASK.ws || '') +
+        '&module=' + encodeURIComponent(TASK.module || '') +
+        '&name=' + encodeURIComponent(TASK.name || '') +
+        '&caption=' + encodeURIComponent(TASK.caption || '');
+      var hdr = { 'Content-Type': 'image/png' };
+      if (H.getToken()) hdr['X-Magic-Token'] = H.getToken();
+      bDone.disabled = true;
+      fetch(H.getBase() + '/desk/requirements/shots' + q, { method: 'POST', headers: hdr, body: blob })
+        .then(function (r) {
+          return r.text().then(function (t) {
+            var d = {};
+            try { d = JSON.parse(t); } catch (e) {}
+            if (!r.ok) throw new Error(d.error || ('HTTP ' + r.status));
+            return d;
+          });
+        })
+        .then(function (d) {
+          var name = TASK ? TASK.name : '';
+          closeAnno();
+          H.setShotBtn(false);
+          /* 任务清掉：这次流程结束了。不清的话再点一次「截图」
+             会把上一张再存一遍（同一个功能点里出现两张一样的图）。 */
+          TASK = null;
+          toast('已写入需求文档：' + (name || '') + '（第 ' + (d.shots || 1) + ' 张）');
+          if (H.refreshReqs) H.refreshReqs();
+        })
+        .catch(function (e) {
+          bDone.disabled = false;
+          toast('保存截图失败：' + ((e && e.message) || e));
+        });
+    }
+  }
+
+  function closeAnno() {
+    if (ANNO && ANNO.ov && ANNO.ov.parentNode) ANNO.ov.parentNode.removeChild(ANNO.ov);
+    ANNO = null;
+  }
+
+  /* ── 需求文档里的截图：markdown 源码预处理 ──
+     core 把截图写成 `![说明](<C:/…/1.png>)`（路径含空格/括号时用 <> 包）。
+     但 **DOMPurify 的协议白名单会把这张图的 src 一起摘掉**（默认只放行
+     http/https/mailto/tel/cid/xmpp）—— 落进 DOM 的就是一枚没有地址的 <img>，
+     界面上只剩一个破图占位（shared/conv/10-markdown-render.js 的注释里自证了这一点：
+     它对链接用 data-local 绕开，图片同理）。
+     所以这里在**送进 marked 之前**把本机绝对路径的图片改写成
+     `<img data-reqshot="绝对路径" alt="说明">`：data-* 属性消毒默认放行，
+     渲染完再由宿主把 src 补成回读地址（/desk/media?path=…&w=480）。 */
+  var shotImgAngle = /!\[([^\]]*)\]\(\s*<([^>]+)>\s*\)/g;
+  /* 不带尖括号的本机路径：`X:/…`（Windows 盘符）或 `/…`（POSIX 根）。
+     ⚠️ `//host/path`（协议相对）**不能**算本机路径 —— 它是网页上的图。 */
+  var shotImgPlain = /!\[([^\]]*)\]\(\s*([A-Za-z]:\/[^\s)]+|\/(?!\/)[^\s)]+)\s*\)/g;
+
+  function isLocalPath(p) {
+    var s = String(p || '');
+    /* 本机绝对路径：Windows 盘符（D:/…）或 unix 根目录（/…）。
+       http(s) 那些是网页上的图，不归我们管（也不该改成 data-reqshot）。 */
+    if (/^[A-Za-z]:\//.test(s)) return true;
+    if (s.indexOf('//') === 0) return false;   // 协议相对地址 = 网页上的图
+    return s.charAt(0) === '/';
+  }
+
+  function rewriteShotImages(md) {
+    var src = String(md == null ? '' : md);
+    if (!src) return '';
+    src = src.replace(shotImgAngle, function (all, alt, path) {
+      if (!isLocalPath(path)) return all;
+      return '<img data-reqshot="' + String(path).replace(/"/g, '%22') +
+        '" alt="' + String(alt || '').replace(/"/g, '%22') + '">';
+    });
+    src = src.replace(shotImgPlain, function (all, alt, path) {
+      if (!isLocalPath(path)) return all;
+      return '<img data-reqshot="' + String(path).replace(/"/g, '%22') +
+        '" alt="' + String(alt || '').replace(/"/g, '%22') + '">';
+    });
+    return src;
+  }
+
+  /* 浏览器被关掉时收尾：别留一个半途的截图任务。
+     也把中转开关还原回用户自己的选择（我们是为了看页面才强开的）。 */
+  function reset() {
+    SHOTTING = false;
+    H.setShotBtn(false);
+    if (RELAY_WAS !== null) {
+      H.setRelayOn(RELAY_WAS);
+      RELAY_WAS = null;
+    }
+    TASK = null;
+  }
+
+  /* 挂载：index.html 在 DOM 就绪后调用一次。
+     host 里的 getter 必须保持为函数 —— 切环境后 BASE/TOKEN 会变。 */
+  function mount(host) {
+    H = host;
+  }
+
+  window.MagicReqShot = {
+    mount: mount,
+    open: openSheet,
+    capture: capture,
+    /* 需求页用：判断当前有没有待办任务（给徽标/按钮用）。 */
+    active: function () { return !!TASK; },
+    /* 浏览器被关掉时收尾：别留一个半开的截图通道。 */
+    reset: reset,
+    /* 需求文档的 markdown 预处理：把本机截图改写成 data-reqshot（见上面的注释）。 */
+    rewriteShotImages: rewriteShotImages,
+    isLocalPath: isLocalPath
+  };
+})();

package/client-ui-mobile/scripts.css

@@ -0,0 +1,21 @@
+/* ══════════ 脚本页（「发现 → 脚本」子页面）══════════
+   从 index.html 拆出：选择器只服务这一页（别的页面不引用）。
+   一级清单（脚本 + 状态徽标）、二级详情（启停 + 日志区）。
+   CSS 变量（--ink / --muted / --faint / --border / --subtle / --primary-action /
+   --success / --warning / --fail / --stop / --tint-*）仍由 index.html 的 :root 统一提供。
+   ⚠️ 本页**不定义任何颜色令牌** —— 颜色全走 var()，
+      否则 tests/check-ui-spec.mjs 的 ZCode 金标比对会红。 */
+
+/* 状态徽标：四个状态四套色，语义与仓库既有状态色一致 ——
+   运行中=绿（--running/--tint-run 一族）、已结束=绿（--tint-done）、
+   已停止=石褐（--stop/--tint-stop，不是故障）、
+   失败=红（--fail/--tint-fail，要人看一眼）。
+   ⚠️ 「已停止」不能用「已结束」的绿 —— 那是「正常跑完」，两件事不能同色。 */
+.pbadge--run{color:var(--running);background:var(--tint-run)}
+.pbadge--done{color:var(--success);background:var(--tint-done)}
+.pbadge--stop{color:var(--stop);background:var(--tint-stop)}
+.pbadge--fail{color:var(--fail);background:var(--tint-fail)}
+
+/* 详情页的日志区：比插件页那条略高一点 —— 脚本日志是要盯着看的，
+   170px 只够三四行，看不出「在动」。 */
+.pd__log--script{max-height:260px}