pi-skill-evolve 0.1.4 → 0.1.6

package/extensions/skill-evolve/test/web-redesign.test.ts

@@ -0,0 +1,264 @@
+/**
+ * 列表页重做的验收测试（node --test）：分组、表格五列、时间与提案格式、徽章、空态、分页，
+ * 以及用户现场报过的「待处理一直帮我收起」（默认不自动刷新、分组默认展开、`open=none` 才收起）。
+ *
+ * 纪律：全部走 `renderPage` 的纯字符串渲染 + 本文件现造的 state，不读真实 `.pi/evolution`。
+ */
+import { test } from "node:test";
+import assert from "node:assert/strict";
+
+import type { DoneItem, PendingItem, WebState } from "../lib/web/data.ts";
+import { renderPage } from "../lib/web/render.ts";
+import { STYLE } from "../lib/web/style.ts";
+import { formatClock, formatIso } from "../lib/web/text.ts";
+
+const NOW = new Date(2026, 10, 8, 21, 57, 3).getTime();
+const T_LATE = new Date(2026, 10, 8, 19, 35).getTime();
+const T_EARLY = new Date(2026, 10, 7, 18, 24).getTime();
+const SID = "01a1b90f-08c3-722c-871d-d024b083770a";
+const SESSION = { sessionId: SID, sessionFile: "/tmp/demo.jsonl" };
+const NO_SESSION = { sessionId: null, sessionFile: null };
+
+function emptyState(): WebState {
+  return {
+    pending: [],
+    approvals: [],
+    applied: [],
+    done: [],
+    reports: [],
+    summary: { reviewing: 0, stale: 0, pendingApprovals: 0, appliedTotal: 0, rollbackRate: 0 },
+  };
+}
+
+function pending(runId: string, at: number, parts: Partial<PendingItem> = {}): PendingItem {
+  return { runId, kind: "approval", session: SESSION, skill: "demo", at, detail: "", ...parts };
+}
+
+function doneItem(runId: string, status: string, at: number): DoneItem {
+  return { runId, status, source: "run", level: "-", skill: "demo", at, detail: "", session: NO_SESSION };
+}
+
+function withPending(items: PendingItem[]): WebState {
+  const state = emptyState();
+  state.pending = items;
+  return state;
+}
+
+test("分组：同一会话的多条 run 合成一个 <details open>，标题写「条数 · 最近 · 几条要处理」", () => {
+  const html = renderPage(withPending([pending("run-1", T_EARLY), pending("run-2", T_LATE)]), "pending", { now: NOW });
+  assert.match(html, /<details class="grp" open>\n<summary><a class="sess" [^>]*>会话 01a1b90f<\/a> · 2 条 · 最近 19:35 · 2 条需要处理<\/summary>/);
+});
+
+test("分组标题：全部已处理时写「无待办」，不写「0 条需要处理」", () => {
+  const html = renderPage(
+    withPending([pending("run-1", T_EARLY, { kind: "reviewed" }), pending("run-2", T_LATE, { kind: "reviewed" })]),
+    "pending",
+    { now: NOW },
+  );
+  assert.match(html, /· 2 条 · 最近 19:35 · 无待办<\/summary>/);
+});
+
+test("单条会话的 run 不进组：直接一行表格，会话名写在状态格里", () => {
+  const html = renderPage(withPending([pending("run-1", T_LATE)]), "pending", { now: NOW });
+  assert.equal(html.includes('<details class="grp"'), false, "一条没必要折叠");
+  assert.match(html, /<span class="sk-sess"><a class="sess" href="[^"]+" title="01a1b90f[^"]*">会话 01a1b90f<\/a><\/span>/);
+});
+
+test("操作列只写「详情 · 日志」，runId 只在链接 title 与详情页里", () => {
+  const runId = "354df7db-1794133942";
+  const html = renderPage(withPending([pending(runId, T_LATE)]), "pending", { now: NOW });
+  assert.match(html, new RegExp(`<a class="rid" href="/\\?view=run&amp;runId=${runId}" title="${runId}">详情</a>`));
+  // 「详情 …94133942」这种半截 runId 不再出现在页面上（只读面板没有重跑，操作就是 详情 · 日志）
+  assert.equal(html.includes(`…${runId.slice(-8)}`), false, "操作列不再显示 runId 尾巴");
+  const cells = html.slice(html.indexOf('<td class="status">'), html.indexOf('<td class="ops">'));
+  assert.equal(cells.includes(runId.slice(0, 8)), false, "runId 前缀不该占着行首");
+});
+
+test("操作列文案：只读「详情 · 日志」，可写「详情 · 重跑 · 日志」", () => {
+  const readonly = renderPage(withPending([pending("run-ops", T_LATE)]), "pending", { now: NOW });
+  assert.match(readonly, /<td class="ops"><a class="rid"[^>]*>详情<\/a> · <a href="\/log\?runId=run-ops">日志<\/a><\/td>/);
+  const writable = renderPage(withPending([pending("run-ops", T_LATE)]), "pending", {
+    now: NOW,
+    canWrite: true,
+    csrf: "t",
+  });
+  assert.match(
+    writable,
+    /<td class="ops"><a class="rid"[^>]*>详情<\/a> · <form[\s\S]*?value="rerun"[\s\S]*?<\/form> · <a href="\/log\?runId=run-ops">日志<\/a><\/td>/,
+  );
+});
+
+test("tab 计数是 .cnt 徽章，当前 tab 的计数用 --blue 底", () => {
+  const html = renderPage(withPending([pending("run-1", T_LATE), pending("run-2", T_EARLY)]), "pending", { now: NOW });
+  assert.match(html, /<a href="\/\?view=pending" class="active">待处理<span class="cnt">2<\/span><\/a>/);
+  assert.match(html, /<a href="\/\?view=done">已处理<span class="cnt">0<\/span><\/a>/);
+  assert.match(html, /\.tabs \.cnt \{[^}]*border-radius: 999px[^}]*\}/);
+  assert.match(html, /\.tabs a\.active \.cnt \{ background: var\(--blue\)/);
+});
+
+test("时间：今天写 HH:mm，更早写 MM-DD HH:mm，title 一律是完整 ISO", () => {
+  const state = emptyState();
+  state.done = [doneItem("run-today", "applied", T_LATE), doneItem("run-old", "applied", T_EARLY)];
+  const html = renderPage(state, "done", { now: NOW });
+  const today = formatClock(T_LATE, NOW);
+  const early = formatClock(T_EARLY, NOW);
+  assert.equal(today.length, 5, "今天只给时分");
+  assert.match(today, /^\d\d:\d\d$/);
+  assert.match(early, /^\d\d-\d\d \d\d:\d\d$/);
+  assert.match(html, new RegExp(`<td class="time" title="${formatIso(T_LATE)}">${today}</td>`));
+  assert.match(html, new RegExp(`<td class="time" title="${formatIso(T_EARLY)}">${early}</td>`));
+});
+
+test("提案列：有增删写「+3 / -1」，没有就写占位符（不是空白）", () => {
+  const state = emptyState();
+  state.applied = [
+    {
+      runId: "run-a",
+      session: NO_SESSION,
+      level: "auto",
+      skill: "demo",
+      type: "improve",
+      added: 3,
+      removed: 1,
+      appliedAt: T_LATE,
+      gates: [],
+      gatesOk: null,
+    },
+  ];
+  assert.match(renderPage(state, "applied", { now: NOW }), /<td class="delta">\+3 \/ -1<\/td>/);
+  // 待处理行没有提案数字（还没生成或还没采纳）
+  assert.match(renderPage(withPending([pending("run-p", T_LATE)]), "pending", { now: NOW }), /<td class="delta"><span class="off">—<\/span><\/td>/);
+});
+
+test("徽章：七种状态各一色（待入队灰 / 待审批蓝 / 复盘中黄 / 已采纳绿 / 卡死红 / 已拒绝暗红 / 已回滚淡）", () => {
+  const pendingCase = (kind: PendingItem["kind"], detail: string): string =>
+    renderPage(withPending([pending("r1", T_LATE, { kind, detail })]), "pending", { now: NOW });
+  const doneCase = (status: string): string => {
+    const state = emptyState();
+    state.done = [doneItem("r1", status, T_LATE)];
+    return renderPage(state, "done", { now: NOW });
+  };
+  assert.match(pendingCase("reviewed", "详情"), /<span class="badge gray" title="详情">待入队<\/span>/);
+  assert.match(pendingCase("approval", "详情"), /<span class="badge blue" title="详情">待审批<\/span>/);
+  assert.match(pendingCase("running", "阶段：复盘产出中"), /<span class="badge yellow" title="阶段：复盘产出中">复盘中<\/span>/);
+  assert.match(pendingCase("stale", "跑了 10 小时"), /<span class="badge red" title="跑了 10 小时">卡死<\/span>/);
+  assert.match(doneCase("applied"), /<span class="badge green" title="">已采纳<\/span>/);
+  assert.match(doneCase("rejected"), /<span class="badge darkred" title="">已拒绝<\/span>/);
+  assert.match(doneCase("rolledback"), /<span class="badge faint" title="">已回滚<\/span>/);
+  assert.match(doneCase("failed"), /<span class="badge red" title="">失败<\/span>/);
+});
+
+test("表格：五列固定表头，行是 <tr> 而不是卡片", () => {
+  const html = renderPage(withPending([pending("run-1", T_LATE)]), "pending", { now: NOW });
+  assert.match(html, /<table class="rows">/);
+  assert.match(html, /<thead><tr><th class="status">状态<\/th><th class="time">时间<\/th><th class="skill">技能<\/th><th class="delta">提案<\/th><th class="ops">操作<\/th><\/tr><\/thead>/);
+  assert.match(html, /<th class="ops">操作<\/th>/);
+});
+
+test("操作列：只读实例给「详情 · 日志」两个链接（不再是每行两个大按钮）", () => {
+  const html = renderPage(withPending([pending("run-1", T_LATE)]), "pending", { now: NOW });
+  assert.match(html, /<\/a> · <a href="[^"]*">日志<\/a>/);
+  assert.equal(html.includes('name="name" value="rerun"'), false, "只读实例不该出现重跑表单");
+});
+
+test("操作列：可写实例才给「重跑」，卡死的才给「清理」", () => {
+  const html = renderPage(withPending([pending("run-1", T_LATE)]), "pending", {
+    now: NOW,
+    canWrite: true,
+    csrf: "tok",
+  });
+  assert.match(html, /name="name" value="rerun"/);
+  assert.equal(html.includes('value="cleanup"'), false, "没卡死就不给清理");
+
+  const staleHtml = renderPage(withPending([pending("run-1", T_LATE, { kind: "stale", detail: "跑了 10 小时" })]), "pending", {
+    now: NOW,
+    canWrite: true,
+    csrf: "tok",
+  });
+  assert.match(staleHtml, /name="name" value="cleanup"/);
+});
+
+test("空态：一句话说清为什么空，再给一句下一步（带具体命令）", () => {
+  const html = renderPage(emptyState(), "pending", { now: NOW });
+  assert.match(html, /<p class="empty">暂无待处理：所有复盘都已完成，也没有待人批的改动。<\/p>/);
+  assert.match(html, /<p class="next">.*\/skill-evolve dispatch on/);
+});
+
+test("分页：写「第 1 / 2 页 · 共 23 条」，下一页链接保留筛选参数", () => {
+  const items = Array.from({ length: 23 }, (_, index) => pending(`run-${index}`, T_LATE - index * 1000));
+  const state = withPending(items);
+  const filter = { skill: "demo", status: "", range: "7d" as const, page: 1 };
+  const html = renderPage(state, "pending", { now: NOW, filter });
+  assert.match(html, /<p class="page"><span class="off">← 上一页<\/span> <span class="count">第 1 \/ 2 页 · 共 23 条<\/span> <a href="[^"]*">下一页 →<\/a><\/p>/);
+  const next = /<a href="([^"]*)">下一页 →<\/a>/.exec(html)?.[1] ?? "";
+  assert.ok(next.includes("skill=demo"), "技能筛选要留住");
+  assert.ok(next.includes("range=7d"), "时间范围要留住");
+  assert.ok(next.includes("page=2"), "翻到第 2 页");
+});
+
+test("默认不自动刷新：没有 meta refresh，只有「更新于 … · 刷新」", () => {
+  const html = renderPage(withPending([pending("run-1", T_LATE)]), "pending", { now: NOW });
+  assert.equal(html.includes('http-equiv="refresh"'), false, "默认整页重载会把展开态清掉");
+  assert.match(html, /更新于 21:57:03 · <a href="[^"]+">刷新<\/a>/);
+});
+
+test("&live=1 才 5 秒重载，并在页头写清代价 + 给「关掉」", () => {
+  const html = renderPage(withPending([pending("run-1", T_LATE)]), "pending", {
+    now: NOW,
+    extras: { live: true, open: "all", only: null },
+  });
+  assert.match(html, /<meta http-equiv="refresh" content="5; url=\/\?view=pending/);
+  assert.match(html, /自动刷新中（每 5 秒整页重载，展开态会重置）· <a href="[^"]*">关掉<\/a>/);
+  const off = /自动刷新中[^<]*· <a href="([^"]*)">关掉<\/a>/.exec(html)?.[1] ?? "";
+  assert.equal(off.includes("live=1"), false, "关掉链接不能还带着 live=1");
+});
+
+test("live=1 只对待处理页生效：其它视图给了也忽略（数据不会自己变）", () => {
+  const html = renderPage(emptyState(), "done", { now: NOW, extras: { live: true, open: "all", only: null } });
+  assert.equal(html.includes('http-equiv="refresh"'), false);
+  assert.equal(html.includes("自动刷新中"), false);
+});
+
+test("open=none 时分组不带 open 属性（用户点过「收起」，就靠 URL 记住）", () => {
+  const items = [pending("run-1", T_EARLY), pending("run-2", T_LATE)];
+  const open = renderPage(withPending(items), "pending", { now: NOW });
+  assert.match(open, /<details class="grp" open>/);
+  const closed = renderPage(withPending(items), "pending", { now: NOW, extras: { live: false, open: "none", only: null } });
+  assert.match(closed, /<details class="grp">/);
+  assert.equal(closed.includes('<details class="grp" open>'), false);
+});
+
+test("刷新链接保留原始 query：页码、时间范围、技能筛选一个都不丢", () => {
+  const items = Array.from({ length: 23 }, (_, index) => pending(`run-${index}`, T_LATE - index * 1000));
+  const filter = { skill: "demo", status: "", range: "30d" as const, page: 2 };
+  const html = renderPage(withPending(items), "pending", { now: NOW, filter });
+  const refresh = /更新于 [^·]*· <a href="([^"]+)">刷新<\/a>/.exec(html)?.[1] ?? "";
+  assert.ok(refresh.includes("page=2"), "刷新不能把人弹回第 1 页");
+  assert.ok(refresh.includes("range=30d"));
+  assert.ok(refresh.includes("skill=demo"));
+});
+
+test("分组开关：有组才给「收起全部分组」，没有组不给点了没反应的链接", () => {
+  const grouped = renderPage(withPending([pending("run-1", T_EARLY), pending("run-2", T_LATE)]), "pending", { now: NOW });
+  assert.match(grouped, /<a href="[^"]*open=none">收起全部分组<\/a>/);
+  const single = renderPage(withPending([pending("run-1", T_LATE)]), "pending", { now: NOW });
+  assert.equal(single.includes("收起全部分组"), false);
+});
+
+test("顶部粘性区：摘要行四个数字 + 每个 tab 带计数徽章", () => {
+  const state = withPending([pending("run-1", T_LATE), pending("run-2", T_EARLY)]);
+  state.summary = { reviewing: 2, stale: 1, pendingApprovals: 0, appliedTotal: 5, rollbackRate: 0.2 };
+  const html = renderPage(state, "pending", { now: NOW });
+  assert.match(html, /<p class="sum">复盘中 2 · 卡死 1 · 待批 <a href="\/\?view=approvals">0<\/a> · 已采纳 <a href="\/\?view=applied">5<\/a>/);
+  assert.match(html, /<a href="\/\?view=pending" class="active">待处理<span class="cnt">2<\/span><\/a>/);
+});
+
+test("窄屏靠 CSS 让位：≤900px 隐藏时间/提案列，宽屏才给左侧目录", () => {
+  assert.match(STYLE, /\.hd \{ position: sticky; top: 0/);
+  assert.ok(STYLE.includes("@media (max-width: 900px)"), "要有窄屏断点");
+  assert.ok(STYLE.includes(".rows .time, .rows .delta { display: none }"), "窄屏让时间/提案列让位");
+  assert.match(STYLE, /@media \(min-width: 1200px\)/);
+  const html = renderPage(emptyState(), "pending", { now: NOW });
+  assert.match(html, /<meta name="viewport" content="width=device-width, initial-scale=1">/);
+  assert.match(html, /max-width: 980px/);
+});

package/extensions/skill-evolve/test/web-render.test.ts

@@ -4,10 +4,14 @@ import test from "node:test";
 import type { WebState } from "../lib/web/data.ts";
 import { escapeHtml, formatStamp, parseView, renderPage } from "../lib/web/render.ts";
 
+const NOW = new Date(2026, 10, 8, 12).getTime();
+const NO_SESSION = { sessionId: null, sessionFile: null };
+
 function withApproval(): WebState {
   const state = emptyState();
   state.approvals.push({
     runId: "run-a",
+    session: NO_SESSION,
     skill: "demo",
     level: "approval",
     targets: [".pi/skills/demo/SKILL.md"],
@@ -32,7 +36,7 @@ function emptyState(): WebState {
 
 function withPending(head: string, detail: string): WebState {
   const state = emptyState();
-  state.pending.push({ runId: "run-x", kind: "approval", skill: head, at: 0, detail });
+  state.pending.push({ runId: "run-x", kind: "approval", skill: head, at: 0, detail, session: NO_SESSION });
   return state;
 }
 
@@ -49,51 +53,55 @@ test("渲染：技能名与详情里的 <script> 一律转义，页面里没有
   assert.match(html, /&lt;script&gt;x\(\)&lt;\/script&gt;/);
 });
 
-test("渲染：findings 里的 HTML 也被转义（报告页同样不可注入）", () => {
+test("渲染：报告页的徽章 title 也被转义（summary 里能塞任意文本）", () => {
   const state = emptyState();
   state.reports.push({
     runId: "run-1",
     status: "applied",
     trigger: "auto",
+    session: NO_SESSION,
     startedAt: 0,
     findings: { total: 1, rows: [{ skill: "<img src=x onerror=alert(1)>", kind: "未加载", reason: "<b>没读</b>" }] },
     proposal: { type: "improve", skill: "demo", added: 3, removed: 1 },
     review: { status: "reviewed", verdict: "pass", blocking: 0 },
     decision: { status: "applied", approver: "auto", at: 0, detail: "<script>d</script>" },
     verify: { status: "applied", at: 0, gates: [{ gate: "gate0", name: "授权核对", ok: true }] },
+    failure: "<img src=x onerror=alert(1)>",
   });
   const html = renderPage(state, "reports");
-  assert.equal(/<img/i.test(html), false);
+  assert.equal(/<img/i.test(html), false, "徽章 title 里的标签必须转义");
   assert.equal(/<script/i.test(html), false);
-  assert.match(html, /&lt;img src=x onerror=alert\(1\)&gt;/);
+  assert.match(html, /&lt;img src=x onerror=alert\(1\)&gt;/, "转义后的原文仍在，便于核对");
 });
 
 test("四个视图：标题、active 标签与列表内容各就各位", () => {
   const state = withPending("demo", "详情");
   const pending = renderPage(state, "pending");
   assert.match(pending, /<title>技能进化 · 待处理<\/title>/);
-  assert.match(pending, /<a href="\/\?view=pending" class="active">待处理<\/a>/);
-  assert.match(pending, /\[待批\] run-x · demo/);
+  assert.match(pending, /<a href="\/\?view=pending" class="active">待处理<span class="cnt">1<\/span><\/a>/);
+  // 列表里不再有「[待批] run-x · demo」这种行头：状态是徽章、runId 只在操作列
+  assert.match(pending, /<span class="badge blue" title="详情">待审批<\/span>/);
+  assert.match(pending, /<td class="skill"><code>demo<\/code><\/td>/);
 
   const approvals = renderPage(withApproval(), "approvals");
   assert.match(approvals, /<title>技能进化 · 待审批<\/title>/);
-  assert.match(approvals, /<a href="\/\?view=approvals" class="active">待审批<\/a>/);
+  assert.match(approvals, /<a href="\/\?view=approvals" class="active">待审批<span class="cnt">1<\/span><\/a>/);
   assert.equal(approvals.includes("run-x"), false, "待审批页只收 approvals，不串待处理条目");
 
   const done = renderPage(state, "done");
   assert.match(done, /<title>技能进化 · 已处理<\/title>/);
-  assert.match(done, /<a href="\/\?view=done" class="active">已处理<\/a>/);
-  assert.equal(done.includes("[待批] run-x"), false, "别的视图不能串内容");
+  assert.match(done, /<a href="\/\?view=done" class="active">已处理<span class="cnt">0<\/span><\/a>/);
+  assert.equal(done.includes("run-x"), false, "别的视图不能串内容");
 
   const reports = renderPage(state, "reports");
   assert.match(reports, /<title>技能进化 · 复盘报告<\/title>/);
-  assert.match(reports, /<a href="\/\?view=reports" class="active">复盘报告<\/a>/);
+  assert.match(reports, /<a href="\/\?view=reports" class="active">复盘报告<span class="cnt">0<\/span><\/a>/);
 });
 
 test("六个视图：tab 顺序是 待处理 / 待审批 / 已采纳 / 已处理 / 复盘报告 / 技能管理", () => {
   const html = renderPage(emptyState(), "pending");
   // 只扫 nav：状态栏与页脚里也有 /?view=approvals 链接，整页扫会把它们算进来
-  const nav = html.slice(html.indexOf("<nav>"), html.indexOf("</nav>"));
+  const nav = html.slice(html.indexOf('<nav class="tabs">'), html.indexOf("</nav>"));
   const order = [...nav.matchAll(/<a href="\/\?view=(\w+)"/g)].map((match) => match[1]);
   assert.deepEqual(order, ["pending", "approvals", "applied", "done", "reports", "skills"]);
 });
@@ -112,13 +120,13 @@ test("空态：每个列表视图各有一句人话", () => {
   }
 });
 
-test("状态栏：五个数字按顺序，回滚率取整百分比，待批数字链到待审批页", () => {
+test("摘要行：四个数字按顺序，待批数字链到待审批页（回滚率不在这一行）", () => {
   const state = emptyState();
   state.summary = { reviewing: 2, stale: 1, pendingApprovals: 3, appliedTotal: 4, rollbackRate: 0.256 };
-  const html = renderPage(state, "pending");
+  const html = renderPage(state, "pending", { now: new Date(2026, 10, 8, 21, 57, 3).getTime() });
   assert.match(
     html,
-    /复盘中 2 · 卡死 1 · 待批 <a href="\/\?view=approvals">3<\/a> · 已采纳 <a href="\/\?view=applied">4<\/a> · 回滚率 26%/,
+    /<p class="sum">复盘中 2 · 卡死 1 · 待批 <a href="\/\?view=approvals">3<\/a> · 已采纳 <a href="\/\?view=applied">4<\/a> · 更新于 21:57:03 · <a href="[^"]+">刷新<\/a><\/p>/,
   );
 });
 
@@ -128,6 +136,7 @@ test("报告详情：findings 条数、提案增删行、五闸对错都在展
     runId: "run-2",
     status: "applied",
     trigger: "manual",
+    session: NO_SESSION,
     startedAt: 0,
     findings: { total: 7, rows: [{ skill: "demo", kind: "未加载", reason: "B frontmatter 坏" }] },
     proposal: { type: "improve", skill: "demo", added: 5, removed: 2 },
@@ -143,19 +152,20 @@ test("报告详情：findings 条数、提案增删行、五闸对错都在展
     },
   });
   const html = renderPage(state, "reports");
-  assert.match(html, /findings：7 条/);
-  assert.match(html, /…另有 6 条（见 01-findings\.json）/);
-  assert.match(html, /提案：improve demo \+5\/-2/);
-  assert.match(html, /blocking 1 条/);
-  assert.match(html, /决策：未采纳（没有 04-decision\.json）/);
-  assert.match(html, /gate0✓ gate3✗/);
+  // 列表行只放五个字段：findings / 评审 / 五闸这类细节进徽章 title 与 run 详情页
+  assert.match(html, /<span class="badge green" title="[^"]*findings：7 条[^"]*">已采纳<\/span>/);
+  assert.match(html, /<td class="skill"><code>demo<\/code><\/td>/);
+  assert.match(html, /<td class="delta">\+5 \/ -2<\/td>/);
+  assert.match(html, /<a class="rid" href="\/\?view=run&amp;runId=run-2" title="run-2">详情<\/a>/);
 });
 
-test("页脚写清只读与采纳入口", () => {
+test("页脚是本机面板口径：只绑 127.0.0.1、无鉴权、机器可读副本见 /api/state", () => {
   const html = renderPage(emptyState(), "pending");
-  assert.match(html, /只读面板/);
-  assert.match(html, /\/skill-evolve approve &lt;runId&gt;/);
-  assert.match(html, /href="\/api\/state"/);
+  assert.match(html, /本机面板 · 只绑 127\.0\.0\.1 · 无鉴权/);
+  assert.match(html, /机器可读副本见 <a href="\/api\/state">\/api\/state<\/a>/);
+  // 面板已能开关 / 重跑 / 清理 / 批准，再说「只读、不能在这里点批准」就是过时文案
+  assert.equal(html.includes("只读面板"), false);
+  assert.equal(html.includes("不能在这里点批准"), false);
 });
 
 test("parseView：认 approvals / done / reports，其余回落待处理", () => {
@@ -172,18 +182,23 @@ test("formatStamp：null 给破折号，时间按本地 YYYY-MM-DD HH:mm", () =>
   assert.equal(formatStamp(new Date(2026, 10, 8, 9, 5).getTime()), "2026-11-08 09:05");
 });
 
-test("待处理页：5 秒自刷新只加在这一页，且刷完还在待处理", () => {
+test("自动刷新默认关闭：只有显式 &live=1 的待处理页才 5 秒重载", () => {
   const state = emptyState();
-  assert.match(renderPage(state, "pending"), /<meta http-equiv="refresh" content="5; url=\?view=pending">/);
-  assert.equal(renderPage(state, "done").includes('http-equiv="refresh"'), false, "看档案时刷新会把页面跳回去");
-  assert.equal(renderPage(state, "reports").includes('http-equiv="refresh"'), false);
+  assert.equal(renderPage(state, "pending").includes('http-equiv="refresh"'), false, "默认不刷新（刷新会丢展开态）");
+  assert.match(renderPage(state, "pending", { extras: { live: true, open: "all", only: null } }), /http-equiv="refresh" content="5; url=\/\?view=pending/);
+  // live 只对待处理页有意义：别的页给了也忽略
+  assert.equal(
+    renderPage(state, "done", { extras: { live: true, open: "all", only: null } }).includes('http-equiv="refresh"'),
+    false,
+    "看档案时刷新会把页面跳回去",
+  );
 });
 
 test("待处理页：运行中的条目有自己的徽章，不是只给个数字", () => {
   const state = emptyState();
-  state.pending.push({ runId: "run-live", kind: "running", skill: "", at: 0, detail: "阶段：复盘产出中" });
+  state.pending.push({ runId: "run-live", kind: "running", skill: "", at: 0, detail: "阶段：复盘产出中", session: NO_SESSION });
   const html = renderPage(state, "pending");
-  assert.match(html, /\[进行中\] run-live/);
+  assert.match(html, /<span class="badge yellow" title="阶段：复盘产出中">复盘中<\/span>/);
 });
 
 test("复盘报告：卡死的 run 行首标 [卡死]，detail 里带失败原因", () => {
@@ -192,6 +207,7 @@ test("复盘报告：卡死的 run 行首标 [卡死]，detail 里带失败原
     runId: "run-dead",
     status: "stale",
     trigger: "auto",
+    session: NO_SESSION,
     startedAt: 0,
     findings: { total: 0, rows: [] },
     proposal: null,
@@ -200,19 +216,19 @@ test("复盘报告：卡死的 run 行首标 [卡死]，detail 里带失败原
     verify: null,
     failure: "原因：子进程已退出\n日志末行：Error: 模板缺失",
   });
-  const html = renderPage(state, "reports");
-  assert.match(html, /\[卡死\] <a class="run" href="\/\?view=run&amp;runId=run-dead">run-dead<\/a>/);
+  const html = renderPage(state, "reports", { canWrite: true, csrf: "t", now: NOW });
+  assert.match(html, /<span class="badge red" title="[^"]*">卡死<\/span>/);
   assert.match(html, /原因：子进程已退出/);
   assert.match(html, /日志末行：Error: 模板缺失/);
+  // 卡死的 run 才有「清理」（移到 runs/.trash/，不删数据）
+  assert.match(html, /name="name" value="cleanup"/);
 });
 
 test("待审批页：条目上是 targets / 提案增删行 / verdict 与 blocking 条数", () => {
   const html = renderPage(withApproval(), "approvals");
-  assert.match(html, /\[approval\] run-a · demo · improve \+3\/-1 · pass\/blocking 0/);
-  assert.match(html, /目标：\.pi\/skills\/demo\/SKILL\.md/);
-  assert.match(html, /提案：improve \+3\/-1 行/);
-  assert.match(html, /评审：verdict=pass · blocking 0 条/);
-  assert.match(html, /runId：run-a/, "详情第一行是完整 runId");
+  assert.match(html, /<span class="badge blue" title="approval 级（必须人批） · 目标：\.pi\/skills\/demo\/SKILL\.md · 评审：verdict=pass · blocking 0 条">待审批<\/span>/);
+  assert.match(html, /<td class="delta">\+3 \/ -1<\/td>/);
+  assert.match(html, /<a class="rid" href="\/\?view=run&amp;runId=run-a" title="run-a">详情<\/a>/);
 });
 
 test("待审批页：注入回调 + csrf 时渲染批准与拒绝表单，csrf 与 runId 都是 hidden", () => {
@@ -244,10 +260,10 @@ test("待审批页脚：批准走同一套五道闸，拒绝不动任何技能
   assert.match(html, /「拒绝」只改队列状态，不动任何技能文件/);
 });
 
-test("待处理页脚：保留只读口径，并指向待审批页", () => {
-  const html = renderPage(emptyState(), "pending");
-  assert.match(html, /只读面板/);
-  assert.match(html, /去<a href="\/\?view=approvals">待审批页<\/a>直接批/);
+test("待审批页脚仍然写清「批准」等价于哪条 TUI 命令", () => {
+  const html = renderPage(withApproval(), "approvals", { canWrite: true, csrf: "t" });
+  assert.match(html, /在 TUI 敲 <code>\/skill-evolve approve &lt;runId&gt;<\/code>/);
+  assert.match(html, /机器可读副本：<a href="\/api\/state">/);
 });
 
 test("动作结果横幅：msg 与 err 都渲染且转义", () => {

package/extensions/skill-evolve/test/web-server.test.ts

@@ -58,7 +58,10 @@ test("GET /：真监听 127.0.0.1，返回四个 tab 与队列里的待批条目
     assert.match(html, /待审批/);
     assert.match(html, /已处理/);
     assert.match(html, /复盘报告/);
-    assert.match(html, /\[待批\] run-web · demo/);
+    // 列表页重做后行内不再有「[待批] run-web · demo」：状态是徽章，runId 在操作列
+    assert.match(html, /<span class="badge blue"[^>]*>待审批<\/span>/);
+    assert.match(html, /<td class="skill"><code>demo<\/code><\/td>/);
+    assert.match(html, /<a class="rid" href="\/\?view=run&amp;runId=run-web"[^>]*>详情<\/a>/);
   } finally {
     await panel.close();
   }

package/extensions/skill-evolve/test/web-session-column.test.ts

@@ -0,0 +1,139 @@
+/**
+ * 列表页的「会话」标识：五个视图（待处理 / 待审批 / 已采纳 / 已处理 / 复盘报告）都必须能看出这条 run 属于哪段对话，
+ * 且文案一致 —— 显示 sessionId 前 8 位，完整 id 放 title，点进 `?view=session`。
+ *
+ * 为什么必须每页都有（用户 2026-11-08）：「面板展示的也应该是 pi sessionId 否则我都不知道怎么看对应会话」。
+ * 重做列表页后会话不再是一列：同一会话的多条 run 归到组标题（`<details>` 的 summary）里，
+ * 单条会话的 run 把会话名写在状态格的小字里 —— 两处都由 render-rows.ts 产出，本文件把这条约定钉住。
+ */
+import assert from "node:assert/strict";
+import test from "node:test";
+import type { AppliedItem } from "../lib/web/applied.ts";
+import type { ApprovalItem } from "../lib/web/approvals.ts";
+import type { DoneItem, PendingItem, WebState } from "../lib/web/data.ts";
+import type { RunReport } from "../lib/web/reports.ts";
+import { renderPage } from "../lib/web/render.ts";
+import type { SessionRef } from "../lib/web/run-session.ts";
+
+const NOW = new Date(2026, 10, 8, 12).getTime();
+const SESSION_ID = "01a1b90f-08c3-722c-871d-d024b083770a";
+const SESSION: SessionRef = { sessionId: SESSION_ID, sessionFile: `/tmp/${SESSION_ID}.jsonl` };
+const NO_SESSION: SessionRef = { sessionId: null, sessionFile: null };
+
+function state(parts: Partial<WebState> = {}): WebState {
+  return {
+    pending: [],
+    approvals: [],
+    applied: [],
+    done: [],
+    reports: [],
+    summary: { reviewing: 0, stale: 0, pendingApprovals: 0, appliedTotal: 0, rollbackRate: 0 },
+    ...parts,
+  };
+}
+
+function pendingItem(session: SessionRef): PendingItem {
+  return { runId: "run-p-1794133942", kind: "reviewed", skill: "demo", at: NOW, detail: "", session };
+}
+
+function approvalItem(session: SessionRef): ApprovalItem {
+  return {
+    runId: "run-b-1794133942",
+    session,
+    skill: "demo",
+    level: "approval",
+    targets: [".pi/skills/demo/SKILL.md"],
+    createdAt: NOW,
+    proposal: { type: "improve", added: 3, removed: 1 },
+    review: { verdict: "pass", blocking: 0 },
+    detail: "",
+  };
+}
+
+function appliedItem(session: SessionRef): AppliedItem {
+  return {
+    runId: "run-a-1794133942",
+    session,
+    level: "approval",
+    skill: "demo",
+    type: "improve",
+    added: 3,
+    removed: 1,
+    appliedAt: NOW,
+    gates: [],
+    gatesOk: null,
+  };
+}
+
+function doneItem(session: SessionRef): DoneItem {
+  return { runId: "run-d-1794133942", status: "rejected", source: "run", level: "-", skill: "demo", at: NOW, detail: "", session };
+}
+
+function reportItem(session: SessionRef): RunReport {
+  return {
+    runId: "run-r-1794133942",
+    status: "reviewed",
+    trigger: "auto",
+    session,
+    startedAt: NOW,
+    findings: { total: 0, rows: [] },
+    proposal: null,
+    review: null,
+    decision: null,
+    verify: null,
+  };
+}
+
+/** 五个视图各塞一条带会话的行，返回整页 HTML */
+function pageWithSession(): Record<string, string> {
+  const current = state({
+    pending: [pendingItem(SESSION)],
+    approvals: [approvalItem(SESSION)],
+    applied: [appliedItem(SESSION)],
+    done: [doneItem(SESSION)],
+    reports: [reportItem(SESSION)],
+  });
+  return {
+    pending: renderPage(current, "pending", { now: NOW }),
+    approvals: renderPage(current, "approvals", { now: NOW }),
+    applied: renderPage(current, "applied", { now: NOW }),
+    done: renderPage(current, "done", { now: NOW }),
+    reports: renderPage(current, "reports", { now: NOW }),
+  };
+}
+
+test("五个视图都能看到会话：链接指向 ?view=session，文案是 sessionId 前 8 位，title 是完整 id", () => {
+  const pages = pageWithSession();
+  const href = `/?view=session&amp;sessionId=${SESSION_ID}`;
+  for (const [view, html] of Object.entries(pages)) {
+    assert.equal(html.includes(href), true, `${view} 页缺会话链接`);
+    assert.match(html, /会话 01a1b90f/, `${view} 页要显示会话前 8 位`);
+    assert.equal(html.includes(`title="${SESSION_ID}"`), true, `${view} 页 title 要放完整 sessionId`);
+  }
+});
+
+test("单条会话的 run 不进组：会话名写在状态格的小字里，runId 只出现在操作列", () => {
+  const html = renderPage(state({ pending: [pendingItem(SESSION)] }), "pending", { now: NOW });
+  assert.match(html, /<span class="sk-sess"><a class="sess"/, "会话名应在状态格的小字里");
+  assert.equal(html.includes('<details class="grp"'), false, "只有一条 run 时不该出现会话分组");
+  // runId 不再是主标识：只在操作列，显示末 8 位，title 放完整值
+  assert.match(html, /<td class="ops">.*title="run-p-1794133942"/);
+});
+
+test("没有 sessionId 的老 run：写「会话 —」占位，不造空链接、不报错", () => {
+  const html = renderPage(state({ pending: [pendingItem(NO_SESSION)], done: [doneItem(NO_SESSION)] }), "pending", {
+    now: NOW,
+  });
+  assert.match(html, /<span class="sk-sess">会话 —<\/span>/);
+  assert.equal(html.includes("view=session"), false, "缺 id 时不许出现会话链接");
+});
+
+test("会话链接带 file 参数：页面可直接打开声明过的会话文件，不必再反查", () => {
+  const html = renderPage(state({ pending: [pendingItem(SESSION)] }), "pending", { now: NOW });
+  assert.match(html, new RegExp(`file=%2Ftmp%2F${SESSION_ID}\\.jsonl`));
+});
+
+test("同一会话的多条 run 归到组标题：会话名出现在 details 的 summary 里", () => {
+  const html = renderPage(state({ pending: [pendingItem(SESSION), pendingItem(SESSION)] }), "pending", { now: NOW });
+  assert.match(html, /<details class="grp" open>\n<summary><a class="sess" href="\/\?view=session&amp;sessionId=/);
+});