paseo-req-kit 1.14.0 → 1.15.0-beta.1

package/engine/src/review-assets/code.js

@@ -1,16 +1,19 @@
-// The code review page (1.14). Plain script, no framework: the server serves it next to its JSON
-// API (api/info, api/draft, api/submit). Everything shown is set with textContent.
+// The code review page (1.14; design system 1.15). Plain script, no framework: the server serves it
+// next to its JSON API (api/info, api/draft, api/submit). Everything shown is set with textContent.
 (function () {
   "use strict";
   var state = { info: null, comments: [], decisions: {}, reviewer: "", reviewers: "", note: "", saveTimer: null, busy: false, open: null };
   var $ = function (id) {
     return document.getElementById(id);
   };
+  var icon = function (name, cls) {
+    return window.RkIcon ? window.RkIcon(name, cls) : null;
+  };
 
   function el(tag, attrs, children) {
     var node = document.createElement(tag);
     Object.keys(attrs || {}).forEach(function (k) {
-      if (attrs[k] === null || attrs[k] === undefined) return;
+      if (attrs[k] === null || attrs[k] === undefined || attrs[k] === false) return;
       if (k === "text") node.textContent = attrs[k];
       else if (k === "className") node.className = attrs[k];
       else if (k.indexOf("on") === 0) node.addEventListener(k.slice(2), attrs[k]);
@@ -22,6 +25,10 @@
     return node;
   }
 
+  function badge(kind, iconName, text) {
+    return el("span", { className: "rk-badge rk-badge--" + kind }, [iconName ? icon(iconName) : null, text]);
+  }
+
   function toast(text) {
     var t = $("toast");
     t.textContent = text;
@@ -50,11 +57,22 @@
       .filter(Boolean);
   }
 
+  function hhmm() {
+    var d = new Date();
+    return (d.getHours() < 10 ? "0" : "") + d.getHours() + ":" + (d.getMinutes() < 10 ? "0" : "") + d.getMinutes();
+  }
+
   function save() {
     if (state.info.readOnly) return;
     clearTimeout(state.saveTimer);
     state.saveTimer = setTimeout(function () {
-      api("api/draft", "PUT", { comments: state.comments, decisions: state.decisions, reviewer: state.reviewer, reviewers: state.reviewers, note: state.note }).catch(function () {});
+      api("api/draft", "PUT", { comments: state.comments, decisions: state.decisions, reviewer: state.reviewer, reviewers: state.reviewers, note: state.note })
+        .then(function () {
+          $("saved").textContent = "已自动保存 " + hhmm();
+        })
+        .catch(function () {
+          $("saved").textContent = "没保存上，网络恢复后再改一下会重试";
+        });
     }, 600);
     count();
   }
@@ -75,19 +93,28 @@
     }).length;
     var fix = fixes().length;
     var total = comments + fix + (state.note.trim() ? 1 : 0);
-    $("count").textContent = "代码行上的意见 " + comments + " 条，AI 意见标为要改 " + fix + " 条";
+    $("count").textContent = total ? total + " 条修改意见" : "还没有修改意见";
+    $("countsub").textContent = state.info.readOnly
+      ? "这是只读链接，只能查看"
+      : state.info.running
+        ? "流水线正在运行，结束后才能提交评审"
+        : "代码行上的意见 " + comments + " 条，AI 意见标为要改 " + fix + " 条";
     var blocked = state.info.readOnly || state.info.running || state.busy;
     $("changes").disabled = blocked || total === 0;
-    $("changes").textContent = total ? "退回修改（" + total + " 条意见）" : "退回修改";
+    $("changes").title = total === 0 ? "写一条意见，或把 AI 意见标为要改，才能退回修改" : "";
+    $("changes").lastChild.textContent = total ? "退回修改（" + total + " 条）" : "退回修改";
     $("approve").disabled = blocked;
   }
 
-  var SEVERITY_CLASS = { "阻塞": "danger", "重要": "warn", "建议": "", "待核实": "" };
-  var STATUS_TEXT = { fixed: "已修复", rejected: "修复时判为不成立", wontfix: "决定不修复", open: "未处理" };
+  var SEVERITY = { "阻塞": ["failed", "octagon-alert"], "重要": ["warning", "triangle-alert"], "建议": ["muted", null], "待核实": ["ai", "circle-dashed"] };
+  var STATUS = { fixed: ["success", "circle-check", "已修复"], rejected: ["outline", null, "修复时判为不成立"], wontfix: ["outline", null, "决定不修复"], open: ["outline", null, "还开着"] };
 
-  function findingNode(f, compact) {
+  function findingNode(f, inline) {
     var d = state.decisions[f.id] || {};
-    var note = el("input", { className: "note-input", placeholder: "补充一句（可不填）", value: d.note || "", hidden: d.mark === "fix" ? null : "" });
+    var sev = SEVERITY[f.severity] || ["muted", null];
+    var st = STATUS[f.status] || STATUS.open;
+    var note = el("input", { className: "rk-input", placeholder: "补充一句（可不填）", value: d.note || "", "aria-label": "补充说明", hidden: d.mark === "fix" ? null : "" });
+    note.style.flex = "1 1 200px";
     note.addEventListener("input", function (e) {
       state.decisions[f.id] = { mark: "fix", note: e.target.value };
       save();
@@ -102,43 +129,47 @@
       };
     }
     var where = f.file ? f.file + (f.line ? ":" + f.line : "") : "";
-    return el("div", { className: "finding " + (SEVERITY_CLASS[f.severity] || "") + (d.mark ? " decided-" + d.mark : "") }, [
-      el("div", { className: "finding-head" }, [
-        el("span", { className: "badge " + (SEVERITY_CLASS[f.severity] || ""), text: "AI · " + f.severity }),
-        el("b", { text: f.id }),
-        f.status !== "open" ? el("span", { className: "badge " + (f.status === "fixed" ? "ok" : ""), text: STATUS_TEXT[f.status] }) : null,
-        !compact && where ? el("a", { href: "#", className: "where", text: where, onclick: function (e) {
-          e.preventDefault();
-          jump(f.file, f.line);
-        } }) : null,
+    return el("div", { className: "rk-finding rk-finding--ai" + (d.mark === "ok" ? " is-ok" : "") }, [
+      el("div", { className: "rk-finding__head" }, [
+        el("span", { className: "rk-finding__who" }, [icon("sparkles", "ic ic-sm"), "AI 评审"]),
+        el("span", { className: "rk-finding__id", text: f.id + (f.round ? " · 第 " + f.round + " 轮" : "") }),
+        badge(sev[0], sev[1], f.severity),
+        badge(st[0], st[1], st[2]),
+        !inline && where
+          ? el("a", { href: "#", className: "rk-finding__where", text: where, onclick: function (e) {
+              e.preventDefault();
+              jump(f.file, f.line);
+            } })
+          : null,
       ]),
-      el("div", { className: "finding-text", text: f.title }),
-      f.suggestion ? el("div", { className: "muted small", text: "建议：" + f.suggestion }) : null,
+      el("div", { className: "rk-finding__body", text: f.title }),
+      f.suggestion ? el("div", { className: "rk-finding__fix", text: "建议：" + f.suggestion }) : null,
       state.info.readOnly
         ? null
-        : el("div", { className: "marks" }, [
-            el("button", { className: "btn small" + (d.mark === "fix" ? " on-fix" : ""), text: "要改", onclick: mark("fix") }),
-            el("button", { className: "btn small" + (d.mark === "ok" ? " on-ok" : ""), text: "不用改", onclick: mark("ok") }),
+        : el("div", { className: "rk-finding__acts" }, [
+            el("div", { className: "rk-seg", role: "group", "aria-label": "这条意见要不要改" }, [
+              el("button", { type: "button", className: "is-fix", "aria-pressed": String(d.mark === "fix"), text: "要改", onclick: mark("fix") }),
+              el("button", { type: "button", className: "is-ok", "aria-pressed": String(d.mark === "ok"), text: "不用改", onclick: mark("ok") }),
+            ]),
+            note,
           ]),
-      note,
     ]);
   }
 
   function jump(file, line) {
     var target = document.querySelector('[data-file="' + CSS.escape(file) + '"]' + (line ? '[data-n="' + line + '"]' : ""));
     if (!target) target = document.querySelector('[data-file-head="' + CSS.escape(file) + '"]');
-    if (target) {
-      var box = target.closest(".file");
-      if (box && box.classList.contains("folded")) box.classList.remove("folded");
-      target.scrollIntoView({ block: "center", behavior: "smooth" });
-      target.classList.add("flash");
-      setTimeout(function () {
-        target.classList.remove("flash");
-      }, 1600);
-    }
+    if (!target) return;
+    var box = target.closest(".rk-diff");
+    if (box && box.classList.contains("folded")) box.classList.remove("folded");
+    target.scrollIntoView({ block: "center", behavior: "smooth" });
+    target.classList.add("rk-flash");
+    setTimeout(function () {
+      target.classList.remove("rk-flash");
+    }, 1600);
   }
 
-  function commentBox(file, line) {
+  function commentRow(file, line) {
     var existing = state.comments.find(function (c) {
       return c.file === file && c.line === line;
     });
@@ -146,38 +177,58 @@
       existing = { file: file, line: line, text: "" };
       state.comments.push(existing);
     }
-    var ta = el("textarea", { rows: "2", placeholder: "这一行哪里不对、应该怎么改" });
+    var ta = el("textarea", { className: "rk-input", rows: "2", placeholder: "这一行哪里不对、应该怎么改", "aria-label": "你的意见" });
     ta.value = existing.text;
+    ta.disabled = !!state.info.readOnly;
     ta.addEventListener("input", function (e) {
       existing.text = e.target.value;
       save();
     });
-    var remove = el("button", { className: "btn small", text: "删除", onclick: function () {
+    var remove = el("button", { type: "button", className: "rk-btn rk-btn--ghost rk-btn--sm", onclick: function () {
       state.comments = state.comments.filter(function (c) {
         return c !== existing;
       });
       state.open = null;
       render();
       save();
-    } });
-    return el("tr", { className: "comment-row" }, [el("td", { colspan: "3" }, [el("div", { className: "comment" }, [el("div", { className: "muted small", text: "你的意见（" + file + ":" + line + "）" }), ta, state.info.readOnly ? null : remove])])]);
+    } }, [icon("trash-2", "ic ic-sm"), "删除"]);
+    var card = el("div", { className: "rk-finding rk-finding--you" }, [
+      el("div", { className: "rk-finding__head" }, [el("span", { className: "rk-finding__who" }, [icon("message-square-plus", "ic ic-sm"), "你的意见"]), el("span", { className: "rk-finding__where", text: file + ":" + line }), state.info.readOnly ? null : remove]),
+      ta,
+    ]);
+    if (state.open === file + ":" + line && !existing.text) setTimeout(function () {
+      ta.focus();
+    });
+    return el("tr", { className: "note" }, [el("td", { colspan: "3" }, [card])]);
   }
 
+  var FILE_STATUS = { added: "新增", deleted: "删除", modified: "修改", renamed: "改名" };
+
   function renderFile(f, findingsByFile) {
     var mine = findingsByFile[f.path] || [];
     var owners = (state.info.reviewers.byFile || {})[f.path] || [];
-    var head = el("div", { className: "file-head", "data-file-head": f.path, onclick: function () {
-      box.classList.toggle("folded");
-    } }, [
-      el("span", { className: "path", text: f.path + (f.oldPath ? "（原 " + f.oldPath + "）" : "") }),
-      el("span", { className: "badge", text: { added: "新增", deleted: "删除", modified: "修改", renamed: "改名" }[f.status] }),
-      el("span", { className: "plus", text: "+" + f.additions }),
-      el("span", { className: "minus", text: "−" + f.deletions }),
-      f.doc ? el("span", { className: "badge", text: "需求文档" }) : null,
-      mine.length ? el("span", { className: "badge warn", text: "AI 意见 " + mine.length }) : null,
-      owners.length ? el("span", { className: "muted small", text: "负责人 " + owners.join(" ") }) : null,
+    var box;
+    var head = el("div", { className: "rk-diff__head", role: "button", tabindex: "0", "aria-label": "展开或折叠 " + f.path, "data-file-head": f.path }, [
+      icon("chevron-down"),
+      el("span", { className: "rk-diff__path", text: f.path + (f.oldPath ? "（原 " + f.oldPath + "）" : "") }),
+      el("span", { className: "rk-diff__n" }, [el("span", { className: "a", text: "+" + f.additions }), " ", el("span", { className: "r", text: "−" + f.deletions })]),
+      badge("muted", null, FILE_STATUS[f.status] || f.status),
+      f.doc ? badge("muted", "file-text", "需求文档") : null,
+      mine.length ? badge("ai", "sparkles", "AI 意见 " + mine.length) : null,
+      el("span", { className: "rk-top__spacer" }),
+      owners.length ? el("span", { className: "rk-cap", text: "审核人 " + owners.join(" ") }) : null,
     ]);
-    var body = el("div", { className: "file-body" });
+    function toggle() {
+      box.classList.toggle("folded");
+    }
+    head.addEventListener("click", toggle);
+    head.addEventListener("keydown", function (e) {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        toggle();
+      }
+    });
+    var body = el("div", { className: "rk-diff__body" });
     var unplaced = mine.filter(function (x) {
       return !x.line || !f.hunks.some(function (h) {
         return h.lines.some(function (l) {
@@ -185,19 +236,23 @@
         });
       });
     });
-    unplaced.forEach(function (x) {
-      body.appendChild(findingNode(x, true));
-    });
-    if (f.binary) body.appendChild(el("div", { className: "muted pad", text: "二进制文件，不显示内容。" }));
+    if (unplaced.length) {
+      var wrap = el("div", { className: "rk-col", style: "padding:12px 16px" });
+      unplaced.forEach(function (x) {
+        wrap.appendChild(findingNode(x, true));
+      });
+      body.appendChild(wrap);
+    }
+    if (f.binary) body.appendChild(el("div", { className: "rk-cap", style: "padding:12px 16px", text: "二进制文件，不显示内容。" }));
     f.hunks.forEach(function (h) {
-      var table = el("table", { className: "diff" });
-      table.appendChild(el("tr", { className: "hunk" }, [el("td", { colspan: "3", text: h.header })]));
+      var table = el("table");
+      table.appendChild(el("tr", { className: "hunk" }, [el("td", { className: "n" }), el("td", { className: "n" }), el("td", { text: h.header })]));
       h.lines.forEach(function (l) {
         var line = l.n || l.o;
-        var row = el("tr", { className: "line " + (l.t === "+" ? "add" : l.t === "-" ? "del" : ""), "data-file": f.path, "data-n": l.n || "", title: state.info.readOnly ? "" : "点这一行写意见" }, [
-          el("td", { className: "num", text: l.o === null ? "" : String(l.o) }),
-          el("td", { className: "num", text: l.n === null ? "" : String(l.n) }),
-          el("td", { className: "code", text: (l.t === " " ? " " : l.t) + " " + l.s }),
+        var row = el("tr", { className: "line " + (l.t === "+" ? "add" : l.t === "-" ? "del" : "ctx"), "data-file": f.path, "data-n": l.n || "", title: state.info.readOnly ? "" : "点这一行写意见" }, [
+          el("td", { className: "n", text: l.o === null ? "" : String(l.o) }),
+          el("td", { className: "n", text: l.n === null ? "" : String(l.n) }),
+          el("td", { className: "s", text: l.s }),
         ]);
         if (!state.info.readOnly) {
           row.addEventListener("click", function () {
@@ -211,20 +266,27 @@
             return x.line && l.n === x.line;
           })
           .forEach(function (x) {
-            table.appendChild(el("tr", { className: "finding-row" }, [el("td", { colspan: "3" }, [findingNode(x, true)])]));
+            table.appendChild(el("tr", { className: "note" }, [el("td", { colspan: "3" }, [findingNode(x, true)])]));
           });
         var hasComment = state.comments.some(function (c) {
           return c.file === f.path && c.line === line;
         });
-        if (hasComment || state.open === f.path + ":" + line) table.appendChild(commentBox(f.path, line));
+        if (hasComment || state.open === f.path + ":" + line) table.appendChild(commentRow(f.path, line));
       });
       body.appendChild(table);
     });
-    if (f.truncated) body.appendChild(el("div", { className: "muted pad", text: "改动太多，只显示了一部分。完整改动请在开发工具里看。" }));
-    var box = el("section", { className: "file" + (f.doc && !mine.length ? " folded" : ""), id: "file-" + f.path }, [head, body]);
+    if (f.truncated) body.appendChild(el("div", { className: "rk-cap", style: "padding:12px 16px", text: "改动太多，只显示了一部分。完整改动请在开发工具里看。" }));
+    box = el("section", { className: "rk-diff" + (f.doc && !mine.length ? " folded" : ""), id: "file-" + f.path }, [head, body]);
     return box;
   }
 
+  function navLink(label, iconName, n, cls, onclick) {
+    return el("a", { href: "#", className: cls || "", onclick: function (e) {
+      e.preventDefault();
+      onclick();
+    } }, [icon(iconName), el("span", { text: label }), n ? el("span", { className: "cr-files-n" + (/^AI/.test(n) ? " has-ai" : ""), text: n }) : null]);
+  }
+
   function render() {
     var info = state.info;
     var byFile = {};
@@ -234,48 +296,74 @@
       })) (byFile[x.file] = byFile[x.file] || []).push(x);
     });
     var folded = {};
-    document.querySelectorAll(".file").forEach(function (n) {
+    document.querySelectorAll("#diffs .rk-diff").forEach(function (n) {
       folded[n.id] = n.classList.contains("folded");
     });
     var diffs = $("diffs");
     var y = window.scrollY;
     diffs.textContent = "";
-    if (!info.files.length) diffs.appendChild(el("div", { className: "card muted", text: info.base.commit ? "没有找到改动。" : "找不到这个需求是从哪个提交开始的，没法列出改动。" }));
+    if (!info.files.length) {
+      diffs.appendChild(el("div", { className: "rk-card rk-card--sm" }, [el("div", { className: "rk-empty" }, [icon("git-branch", "ic ic-xl"), el("h3", { text: info.base.commit ? "没有改动" : "找不到改动的起点" }), el("p", { text: info.base.commit ? "这个需求的分支和它分出来的地方一样。" : "找不到这个需求是从哪个提交开始的，没法列出改动。" })])]));
+    }
     info.files.forEach(function (f) {
       var node = renderFile(f, byFile);
       if (node.id in folded) node.classList.toggle("folded", folded[node.id]);
       diffs.appendChild(node);
     });
-    // The AI findings not on a changed file: listed at the top.
+
+    // AI findings: a summary card; the ones not on a changed line, and the serious ones, listed here too.
     var ai = $("ai");
     ai.textContent = "";
     var elsewhere = info.findings.filter(function (x) {
       return !byFile[x.file] || byFile[x.file].indexOf(x) < 0;
     });
-    if (info.findings.length) {
+    if (info.findings.length || info.rounds.length) {
       ai.hidden = false;
       var open = info.findings.filter(function (x) {
         return x.status === "open";
       }).length;
-      ai.appendChild(el("h2", { text: "AI 评审意见（" + info.findings.length + " 条，未处理 " + open + " 条）" }));
-      ai.appendChild(el("p", { className: "muted small", text: "在代码旁边也能看到。阻塞、重要的未处理意见建议标为要改；拿不准的请开发同事看一下。" }));
+      var fixed = info.findings.filter(function (x) {
+        return x.status === "fixed";
+      }).length;
+      var last = info.rounds.length ? info.rounds[info.rounds.length - 1] : null;
+      ai.appendChild(
+        el("div", { className: "rk-row", style: "justify-content:space-between" }, [
+          el("span", { className: "rk-card__label rk-card__label--ai" }, [icon("sparkles", "ic ic-sm"), "AI 评审 · " + info.rounds.length + " 轮"]),
+          el("span", { className: "rk-row", style: "gap:8px" }, [fixed ? badge("success", "circle-check", "已修复 " + fixed) : null, open ? badge("outline", null, "还开着 " + open) : null, last ? badge(last.verdict === "pass" ? "ai" : "warning", last.verdict === "pass" ? "sparkles" : "triangle-alert", last.verdict === "pass" ? "最后一轮：可以合并" : "最后一轮：需要修改") : null]),
+        ]),
+      );
+      ai.appendChild(el("p", { text: info.findings.length ? "意见放在下面对应的代码行旁边。阻塞、重要的未处理意见建议标为要改；拿不准的请开发同事看一下。" : "AI 评审没有留下结构化的意见，详细内容见 code-review.md。" }));
       info.findings.forEach(function (x) {
-        if (elsewhere.indexOf(x) >= 0 || x.severity === "阻塞" || x.severity === "重要") ai.appendChild(findingNode(x, false));
+        if (elsewhere.indexOf(x) >= 0 || ((x.severity === "阻塞" || x.severity === "重要") && x.status === "open")) ai.appendChild(findingNode(x, false));
       });
-    } else if (info.rounds.length) {
-      ai.hidden = false;
-      ai.appendChild(el("h2", { text: "AI 评审" }));
-      ai.appendChild(el("p", { className: "muted", text: "AI 评审没有留下结构化的意见，详细内容见 code-review.md。" }));
     }
+
     var nav = $("files");
     nav.textContent = "";
-    nav.appendChild(el("div", { className: "nav-title", text: "改动的文件（" + info.files.length + "）" }));
-    info.files.forEach(function (f) {
-      nav.appendChild(el("a", { href: "#", className: f.doc ? "doc" : "", onclick: function (e) {
-        e.preventDefault();
-        jump(f.path, null);
-      } }, [el("span", { text: f.path }), (byFile[f.path] || []).length ? el("span", { className: "badge warn", text: String(byFile[f.path].length) }) : null]));
+    nav.appendChild(el("div", { className: "rk-side__group", text: "概要" }));
+    if (!$("summary").hidden) nav.appendChild(navLink("这次改了什么", "list-checks", null, "", function () {
+      $("summary").scrollIntoView({ block: "start", behavior: "smooth" });
+    }));
+    if (!ai.hidden) nav.appendChild(navLink("AI 评审意见", "sparkles", info.findings.length ? String(info.findings.length) : null, "", function () {
+      ai.scrollIntoView({ block: "start", behavior: "smooth" });
+    }));
+    var code = info.files.filter(function (f) {
+      return !f.doc;
+    });
+    var docs = info.files.filter(function (f) {
+      return f.doc;
+    });
+    [["代码 · " + code.length + " 个文件", code, "file-code"], ["需求文档 · " + docs.length + " 个", docs, "file-text"]].forEach(function (g) {
+      if (!g[1].length) return;
+      nav.appendChild(el("div", { className: "rk-side__group", text: g[0] }));
+      g[1].forEach(function (f) {
+        var n = (byFile[f.path] || []).length;
+        nav.appendChild(navLink(f.doc ? f.path.split("/").pop() : f.path.split("/").slice(-2).join("/"), g[2], n ? "AI " + n : "+" + f.additions, f.doc ? "is-doc" : "", function () {
+          jump(f.path, null);
+        }));
+      });
     });
+    window.RkFill && window.RkFill();
     window.scrollTo(0, y);
     count();
   }
@@ -309,11 +397,23 @@
       });
   }
 
+  function setBanner(kind, iconName, text) {
+    var banner = $("status");
+    banner.hidden = false;
+    banner.className = "rk-banner rk-banner--" + kind;
+    banner.textContent = "";
+    banner.appendChild(icon(iconName));
+    banner.appendChild(el("span", { text: text }));
+  }
+
   function load() {
     return api("api/info").then(function (info) {
       state.info = info;
+      document.title = "代码审查 · " + info.title;
+      $("title").textContent = info.title;
       $("project").textContent = info.featureDir;
-      $("title").textContent = "代码审查：" + info.title;
+      $("project").hidden = false;
+      $("readonly").hidden = !info.readOnly;
       var adds = 0,
         dels = 0;
       info.files.forEach(function (f) {
@@ -322,39 +422,34 @@
           dels += f.deletions;
         }
       });
-      var last = info.rounds.length ? info.rounds[info.rounds.length - 1] : null;
       $("sub").textContent =
         (info.branch ? "分支 " + info.branch : "") +
         (info.base.ref ? "，相对 " + info.base.ref : "") +
-        "：改了 " + info.files.filter(function (f) {
+        "：改了 " +
+        info.files.filter(function (f) {
           return !f.doc;
-        }).length + " 个代码文件（+" + adds + " −" + dels + "）" +
-        (last ? "；AI 评审 " + info.rounds.length + " 轮，最后一轮" + (last.verdict === "pass" ? "通过" : "需要修改") : "");
-      var banner = $("status");
-      banner.hidden = true;
-      banner.className = "banner";
+        }).length +
+        " 个代码文件（+" + adds + " −" + dels + "）。";
+      $("status").hidden = true;
       if (info.running) {
-        banner.hidden = false;
-        banner.textContent = "流水线正在运行，改动还会变化。可以先看，结束后再提交评审。";
+        setBanner("run", "loader-circle", "流水线正在运行，改动还会变化。可以先看，结束后再提交评审。");
       } else if (info.human) {
-        banner.hidden = false;
         var h = info.human;
         if (h.status === "approved") {
-          banner.className = "banner " + (h.stale ? "warn" : "ok");
-          banner.textContent = (h.stale ? "评审通过后代码又有改动，需要重新评审。" : "已评审通过") + "（" + h.reviewer + "，" + h.at.slice(0, 10) + (h.reviewers.length ? "，审核人 " + h.reviewers.join(" ") : "") + "）";
+          setBanner(h.stale ? "warn" : "ok", h.stale ? "triangle-alert" : "circle-check", (h.stale ? "评审通过后代码又有改动，需要重新评审。" : "已评审通过") + "（" + h.reviewer + "，" + h.at.slice(0, 10) + (h.reviewers.length ? "，审核人 " + h.reviewers.join(" ") : "") + "）");
         } else {
-          banner.className = "banner warn";
-          banner.textContent = "上次退回了 " + h.items.length + " 条意见（" + h.reviewer + "，" + h.at.slice(0, 10) + "）" + (h.consumedAttempt ? "，第 " + h.consumedAttempt + " 次尝试在处理" : "，还没开始修改");
+          setBanner("warn", "undo-2", "上次退回了 " + h.items.length + " 条意见（" + h.reviewer + "，" + h.at.slice(0, 10) + "）" + (h.consumedAttempt ? "，第 " + h.consumedAttempt + " 次尝试在处理" : "，还没开始修改"));
         }
       }
       var sum = $("summary");
       sum.textContent = "";
+      sum.hidden = !info.summary.length;
       if (info.summary.length) {
-        sum.hidden = false;
-        sum.appendChild(el("h2", { text: "这次改了什么（来自提测说明）" }));
-        info.summary.forEach(function (l) {
-          sum.appendChild(el("div", { text: l.replace(/^\s*[-*]\s+/, "• ") }));
-        });
+        sum.appendChild(el("span", { className: "rk-card__label" }, [icon("list-checks", "ic ic-sm"), "提测说明"]));
+        sum.appendChild(el("h3", { style: "font-size:17px;line-height:26px", text: "这次改了什么" }));
+        sum.appendChild(el("ul", { className: "cr-summary" }, info.summary.map(function (l) {
+          return el("li", { text: l.replace(/^\s*[-*]\s+/, "") });
+        })));
       }
       var d = info.draft || {};
       state.comments = Array.isArray(d.comments) ? d.comments : [];

package/engine/src/review-assets/rk-icons.js

@@ -0,0 +1,98 @@
+/* Copied from design/examples/icons.js by scripts/tokens-build.mjs. Do not edit here. */
+// Lucide icons (stroke 1.75 via the .ic class) used by the req-kit examples: <svg class="ic" data-i="sparkles"></svg>.
+// Inline so the pages open offline (the review pages load a copy as rk-icons.js; see scripts/tokens-build.mjs).
+(() => {
+  const I = {
+    check: '<path d="M20 6 9 17l-5-5"/>',
+    sparkles: '<path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/>',
+    "circle-check": '<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>',
+    "circle-x": '<circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/>',
+    "circle-dashed": '<path d="M10.1 2.182a10 10 0 0 1 3.8 0"/><path d="M13.9 21.818a10 10 0 0 1-3.8 0"/><path d="M17.609 3.721a10 10 0 0 1 2.69 2.7"/><path d="M2.182 13.9a10 10 0 0 1 0-3.8"/><path d="M20.279 17.609a10 10 0 0 1-2.7 2.69"/><path d="M21.818 10.1a10 10 0 0 1 0 3.8"/><path d="M3.721 6.391a10 10 0 0 1 2.7-2.69"/><path d="M6.391 20.279a10 10 0 0 1-2.69-2.7"/>',
+    "circle-dot": '<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="1"/>',
+    "loader-circle": '<path d="M21 12a9 9 0 1 1-6.219-8.56"/>',
+    "file-text": '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/>',
+    "file-code": '<path d="M10 12.5 8 15l2 2.5"/><path d="m14 12.5 2 2.5-2 2.5"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"/>',
+    "messages-square": '<path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2z"/><path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"/>',
+    "message-square-plus": '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M12 7v6"/><path d="M9 10h6"/>',
+    "pen-tool": '<path d="M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z"/><path d="m18 13-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18"/><path d="m2.3 2.3 7.286 7.286"/><circle cx="11" cy="11" r="2"/>',
+    workflow: '<rect width="8" height="8" x="3" y="3" rx="2"/><path d="M7 11v4a2 2 0 0 0 2 2h4"/><rect width="8" height="8" x="13" y="13" rx="2"/>',
+    "shield-check": '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/>',
+    "git-pull-request": '<circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><path d="M13 6h3a2 2 0 0 1 2 2v7"/><line x1="6" x2="6" y1="9" y2="21"/>',
+    "git-branch": '<line x1="6" x2="6" y1="3" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/>',
+    "clipboard-check": '<rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="m9 14 2 2 4-4"/>',
+    play: '<polygon points="6 3 20 12 6 21 6 3"/>',
+    inbox: '<polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>',
+    "undo-2": '<path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"/>',
+    "octagon-alert": '<path d="M12 16h.01"/><path d="M12 8v4"/><path d="M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z"/>',
+    "triangle-alert": '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
+    "chart-column": '<path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/>',
+    "chevron-down": '<path d="m6 9 6 6 6-6"/>',
+    "chevron-right": '<path d="m9 18 6-6-6-6"/>',
+    "arrow-right": '<path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>',
+    copy: '<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>',
+    sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/>',
+    lightbulb: '<path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/>',
+    info: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
+    clock: '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>',
+    user: '<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',
+    users: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
+    search: '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',
+    terminal: '<polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/>',
+    lock: '<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
+    "list-checks": '<path d="m3 17 2 2 4-4"/><path d="m3 7 2 2 4-4"/><path d="M13 6h8"/><path d="M13 12h8"/><path d="M13 18h8"/>',
+    "mouse-pointer-click": '<path d="M14 4.1 12 6"/><path d="m5.1 8-2.9-.8"/><path d="m6 12-1.9 2"/><path d="M7.2 2.2 8 5.1"/><path d="M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z"/>',
+    history: '<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l4 2"/>',
+    "trash-2": '<path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/>',
+    moon: '<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>',
+    "external-link": '<path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>',
+    folder: '<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>',
+  };
+  // The req-kit mark: <svg data-logo></svg> (brand-edge: lime on dark grounds, the deeper lime on light ones; the hollow nodes take --rk-canvas or the element's --ground).
+  const LOGO = '<path d="M16 54 L40 77 L82 30" fill="none" stroke="var(--rk-brand-edge)" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/><g fill="var(--ground, var(--rk-canvas))" stroke="var(--rk-brand-edge)" stroke-width="6"><circle cx="16" cy="54" r="7"/><circle cx="40" cy="77" r="7"/></g><circle cx="82" cy="30" r="12" fill="var(--rk-brand-edge)"/><circle cx="82" cy="30" r="19" fill="none" stroke="var(--rk-brand-edge)" stroke-width="2" opacity=".45"/>';
+  const fill = () => {
+    for (const el of document.querySelectorAll("svg[data-logo]")) {
+      el.setAttribute("viewBox", "0 0 100 100");
+      el.setAttribute("aria-hidden", "true");
+      el.innerHTML = LOGO;
+    }
+    for (const el of document.querySelectorAll("svg[data-i]")) {
+      const p = I[el.dataset.i];
+      if (!p) continue;
+      el.setAttribute("viewBox", "0 0 24 24");
+      el.setAttribute("aria-hidden", "true");
+      el.innerHTML = p;
+    }
+  };
+  // For pages that build their DOM in script: RkIcon("sparkles", "ic ic-sm") returns an <svg>.
+  window.RkIcon = (name, cls) => {
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("class", cls || "ic");
+    svg.setAttribute("viewBox", "0 0 24 24");
+    svg.setAttribute("aria-hidden", "true");
+    svg.innerHTML = I[name] || "";
+    return svg;
+  };
+  window.RkFill = fill;
+  // A button with data-rk-theme switches between dark and light and remembers the choice.
+  const KEY = "rk-theme";
+  try {
+    const saved = localStorage.getItem(KEY);
+    if (saved === "dark" || saved === "light") document.documentElement.dataset.theme = saved;
+  } catch {
+    /* no storage: follow the system */
+  }
+  document.addEventListener("click", (e) => {
+    const b = e.target.closest && e.target.closest("[data-rk-theme]");
+    if (!b) return;
+    const r = document.documentElement;
+    const dark = r.dataset.theme ? r.dataset.theme === "dark" : !matchMedia("(prefers-color-scheme: light)").matches;
+    r.dataset.theme = dark ? "light" : "dark";
+    try {
+      localStorage.setItem(KEY, r.dataset.theme);
+    } catch {
+      /* not remembered */
+    }
+  });
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", fill);
+  else fill();
+})();