pi-skill-evolve 0.1.4 → 0.1.6

package/extensions/skill-evolve/lib/web/shell.ts

@@ -4,6 +4,9 @@
  * 为什么抽出来：run 详情页与技能详情页也要状态栏、六个 tab、内联样式，
  * 各自复制一遍必然出现「点进详情页 tab 高亮错页、状态栏数字少算一个」。
  * 这里只拼字符串：不读盘、不发请求、不引外部资源 —— 数据由调用方读好传进来。
+ *
+ * 顶部是**粘性区**（`position: sticky`）：列表滚到第 30 行时，
+ * 「现在有几条要处理、我在哪个 tab、四个开关什么状态」仍然看得见 —— 这三样是这一页的全部决策输入。
  */
 import type { WebState, WebView } from "./data.ts";
 import { STYLE } from "./style.ts";
@@ -21,29 +24,50 @@ export const VIEW_LABEL: Record<TabView, string> = {
   skills: "技能管理",
 };
 
+/** 每个 tab 的计数徽章；`skills` 没有计数（它不是「条数」） */
+export type TabCounts = Partial<Record<TabView, number>>;
+
 /**
  * 当前高亮的 tab。详情页传 `null`：它们不在导航里（要 runId / 技能名才能进来），
  * 硬highlight 某个 tab 等于骗人 —— 点那个 tab 回不到这一页。
  */
 export type ActiveTab = WebView | "skills" | null;
 
-/** 导航：`<a href>` 只用枚举值拼，绝不把 query 原样回显 */
-export function tabs(active: ActiveTab): string {
+/** 计数从状态里取：tab 上的数字与列表里的条数必须是同一份数据，不能各算一遍 */
+export function tabCounts(state: WebState): TabCounts {
+  return {
+    pending: state.pending.length,
+    approvals: state.approvals.length,
+    // 已采纳用 summary 的累计值：列表本身有上限（50 条），拿它当总数会永远显示 50
+    applied: state.summary.appliedTotal,
+    done: state.done.length,
+    reports: state.reports.length,
+  };
+}
+
+/**
+ * 导航：`<a href>` 只用枚举值拼，绝不把 query 原样回显。
+ * 不给 counts 时只出标签（详情页与单测用），给了就在标签后面挂一个计数徽章（`.cnt`）。
+ */
+export function tabs(active: ActiveTab, counts: TabCounts = {}): string {
   return TAB_ORDER.map((item) => {
     const className = item === active ? ' class="active"' : "";
-    return `<a href="/?view=${item}"${className}>${VIEW_LABEL[item]}</a>`;
+    const count = counts[item];
+    const badge = count === undefined ? "" : `<span class="cnt">${count}</span>`;
+    return `<a href="/?view=${item}"${className}>${VIEW_LABEL[item]}${badge}</a>`;
   }).join("\n");
 }
 
-/** 状态栏：全是数字，安全；「待批 N」「已采纳 N」都直接链到对应页（用户就是点那个数字的） */
+/**
+ * 摘要行：四个数字。「待批」与「已采纳」直接链到对应页 —— 用户就是点那个数字的。
+ * 回滚率不在这里：它是周报口径的比率，挤进一行数字里只会让人以为「26% 也要现在处理」。
+ */
 export function statusBar(state: WebState): string {
-  const percent = (state.summary.rollbackRate * 100).toFixed(0);
   return [
     `复盘中 ${state.summary.reviewing}`,
     `卡死 ${state.summary.stale}`,
     `待批 <a href="/?view=approvals">${state.summary.pendingApprovals}</a>`,
     `已采纳 <a href="/?view=applied">${state.summary.appliedTotal}</a>`,
-    `回滚率 ${percent}%`,
   ].join(" · ");
 }
 
@@ -52,10 +76,12 @@ export interface ShellInput {
   /** 页面标题：进 `<title>`，页面上不再重复一遍 */
   title: string;
   active: ActiveTab;
-  /** `<head>` 里的额外标签（目前只有待处理页的 5 秒自刷新） */
+  /** `<head>` 里的额外标签（目前只有 `&live=1` 时的 5 秒自刷新） */
   head?: string;
-  /** 导航上方的「控制条 + 横幅」 */
+  /** 粘性区里、tabs 下面的那一行（列表页的四个开关与横幅） */
   top?: string;
+  /** 摘要行尾部的小字（列表页的「更新于 … · 刷新」） */
+  meta?: string;
   /** `<main>` 内容 */
   body: string;
   /** 页脚内容（列表页传「最近操作 + 只读说明」） */
@@ -63,6 +89,7 @@ export interface ShellInput {
 }
 
 export function shellPage(input: ShellInput): string {
+  const meta = input.meta === undefined || input.meta.length === 0 ? "" : ` · ${input.meta}`;
   return `<!doctype html>
 <html lang="zh-CN">
 <head>
@@ -72,15 +99,19 @@ ${input.head ?? ""}<title>技能进化 · ${input.title}</title>
 <style>${STYLE}</style>
 </head>
 <body>
+<div class="wrap" id="top">
+<header class="hd">
 <h1>技能进化面板</h1>
-<p class="bar">${statusBar(input.state)}</p>
-${input.top ?? ""}<nav>
-${tabs(input.active)}
+<p class="sum">${statusBar(input.state)}${meta}</p>
+<nav class="tabs">
+${tabs(input.active, tabCounts(input.state))}
 </nav>
+${input.top ?? ""}</header>
 ${input.body}
 <footer>
 ${input.foot ?? ""}
 </footer>
+</div>
 </body>
 </html>
 `;

package/extensions/skill-evolve/lib/web/style.ts

@@ -1,107 +1,189 @@
 /**
- * 面板的内联样式：单文件放着是因为只有一处消费（render.ts），拆出来只是为了把 render.ts 压在 300 行内。
- * 不引外部 CSS：面板必须离线可用，一条网络请求都不发。
+ * 面板的全部样式：一份内联 CSS，不引外部资源（面板要离线可用，一条网络请求都不发）。
+ *
+ * 三块约定（改样式先看这三行，别各自发明）：
+ * 1. **颜色只从 `:root` 的令牌里取**：同一个概念（蓝=要看、绿=已落地、黄=在跑、红=卡死）全站一色；
+ * 2. **字号只有 12 / 13 / 14 / 20 四档，间距只用 4 / 8 / 12 / 16 / 24** —— 随手写 15px / 7px 是页面显得毛糙的根源；
+ * 3. **列表行是表格、不是卡片**：一行一条，扫读靠列对齐；操作是小号链接，不是每行两个大按钮。
  */
 export const STYLE = `
-:root { color-scheme: dark }
+:root {
+  color-scheme: dark;
+  --bg: #0f1115; --panel: #161a21; --line: #252b36; --fg: #dfe3ea; --muted: #8b95a7;
+  --blue: #3884ff; --green: #2ea043; --red: #d1435b; --yellow: #c69026;
+}
 * { box-sizing: border-box }
-body { margin: 0; padding: 24px; background: #0f1115; color: #d7dce5;
-  font: 14px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace }
-h1 { margin: 0 0 4px; font-size: 18px; font-weight: 600 }
-.bar { margin: 0 0 16px; color: #8d99ae }
-.bar a { color: #7cc4ff; text-decoration: none }
-.notice { margin: 0 0 12px; padding: 8px 12px; border-left: 2px solid #3f9d5a; background: #131a17; color: #b6e2c4 }
-.notice.err { border-left-color: #c05c5c; background: #1a1313; color: #f0bdbd }
-nav { display: flex; gap: 12px; margin-bottom: 16px; border-bottom: 1px solid #232733; padding-bottom: 8px }
-nav a { color: #8d99ae; text-decoration: none; padding: 2px 8px; border-radius: 4px }
-nav a:hover { background: #1a1f29 }
-nav a.active { color: #0f1115; background: #7cc4ff }
-ul { list-style: none; margin: 0; padding: 0 }
-li.row { border-bottom: 1px solid #1c202a; padding: 8px 0 }
-summary.head { cursor: pointer; color: #cfe3ff }
-span.head { color: #cfe3ff }
-pre { margin: 8px 0 0; padding: 12px; background: #141821; border-left: 2px solid #2b3342;
-  white-space: pre-wrap; word-break: break-word; color: #aeb7c4 }
-.empty { color: #6f7a8c; padding: 24px 0 }
-.acts { display: flex; gap: 8px; margin-top: 8px }
-.acts form { display: inline; margin: 0 }
-button { font: inherit; color: #0f1115; background: #7cc4ff; border: 0; border-radius: 4px; padding: 2px 12px; cursor: pointer }
-button.reject { background: #6f7a8c; color: #0f1115 }
-button.danger { background: #c05c5c; color: #fff }
+body { margin: 0; background: var(--bg); color: var(--fg);
+  font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace }
+.wrap { max-width: 980px; margin: 0 auto; padding: 0 16px 24px }
+a { color: var(--blue); text-decoration: none }
+a:hover { text-decoration: underline }
+code { font: inherit; color: #c8d3e6 }
+h1 { margin: 0; font-size: 20px; font-weight: 600 }
+h2 { margin: 20px 0 8px; font-size: 14px; font-weight: 600; color: #c8d3e6 }
+h3, h4 { margin: 12px 0 4px; font-size: 14px; font-weight: 600; color: #c8d3e6 }
+/* 顶部粘性区：标题 + 一行摘要 + tabs + 四个开关，滚动时永远看得到「现在有几条要处理」 */
+.hd { position: sticky; top: 0; z-index: 10; padding: 12px 0 8px; background: var(--bg);
+  border-bottom: 1px solid var(--line) }
+.sum { margin: 4px 0 8px; color: var(--muted); font-size: 12px }
+.sum a { color: #c8d3e6 }
+.tabs { display: flex; gap: 4px; flex-wrap: wrap }
+.tabs a { color: var(--muted); padding: 2px 8px; border-radius: 4px; white-space: nowrap }
+.tabs a:hover { background: var(--panel); text-decoration: none }
+.tabs a.active { color: #fff; background: #1c2740 }
+.tabs .cnt { margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: 11px;
+  background: var(--line); color: var(--fg) }
+.tabs a.active .cnt { background: var(--blue); color: #fff }
+/* 控制条：四个开关与「立即复盘」挤在一行，超宽就横向滚动 —— 换行会把列表挤到屏幕外 */
+.ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0 }
+.ctl form { display: inline-flex; margin: 0 }
+.ctl .sw { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px;
+  border: 1px solid var(--line); background: var(--panel); font-size: 12px }
+.ctl .state.on { color: var(--green) }
+.ctl .state.off { color: var(--muted) }
+.notice { margin: 12px 0 0; padding: 8px 12px; border-left: 2px solid var(--green); background: #12221a; color: #b6e2c4 }
+.notice.err { border-left-color: var(--red); background: #221316; color: #f0bdbd }
+.warn { margin: 8px 0 0; padding: 4px 8px; border-left: 2px solid var(--yellow); background: #231d11; color: #e8d9a8; font-size: 12px }
+/* 筛选：零 JS 的 GET 表单，选中项必须能在刷新后留住 */
+.filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0; padding: 8px 12px;
+  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; font-size: 12px }
+.filter label { color: var(--muted) }
+.filter input, .filter select { font: inherit; color: var(--fg); background: var(--bg);
+  border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px }
+button { font: inherit; color: #fff; background: var(--blue); border: 0; border-radius: 4px; padding: 2px 10px; cursor: pointer }
 button:hover { filter: brightness(1.1) }
-/* 顶部控制条：开关状态、切换/立即复盘按钮、最后活动 */
-.ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
-  margin: 0 0 16px; padding: 8px 12px; background: #141821; border: 1px solid #232733; border-radius: 6px }
-.ctl form { display: inline; margin: 0 }
-.ctl .state { padding: 1px 8px; border-radius: 4px }
-.ctl .state.on { background: #16301f; color: #b6e2c4 }
-.ctl .state.off { background: #2a1f1f; color: #e6b0b0 }
-.ctl .act { color: #8d99ae }
-/* 单个开关：状态 + 后果说明 + 按钮竖排，两个开关之间靠 .ctl 的 gap 分隔 */
-.ctl .sw { display: inline-flex; align-items: center; gap: 6px }
-.ctl .hint { color: #8d99ae; font-size: 12px }
-.warn { margin: 6px 0 0; padding: 6px 10px; border-left: 3px solid #b58900;
-  background: #2a2418; color: #e8d9a8 }
-/* 筛选表单与翻页：零 JS，样式也要看得出它们是一组 */
-.filter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
-  margin: 0 0 12px; padding: 8px 12px; background: #141821; border: 1px solid #232733; border-radius: 6px }
-.filter label { color: #8d99ae }
-.filter input, .filter select { font: inherit; color: #d7dce5; background: #0f1115;
-  border: 1px solid #2b3342; border-radius: 4px; padding: 1px 6px }
-.page { display: flex; gap: 12px; align-items: center; margin: 12px 0 0; color: #8d99ae }
-.page a { color: #7cc4ff; text-decoration: none }
-.page .count { color: #6f7a8c }
-.off { color: #3f4654 }
-a.btn { color: #7cc4ff; text-decoration: none; padding: 2px 10px; border: 1px solid #2b3342; border-radius: 4px }
-a.btn:hover { background: #1a1f29 }
-/* 最近操作：结果分三色，ok / partial / error 扫一眼就能分开 */
-.audit { margin-top: 24px; padding-top: 12px; border-top: 1px solid #232733 }
-.audit h2 { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: #8d99ae }
-.audit li { padding: 2px 0; color: #aeb7c4 }
-.audit .when { color: #6f7a8c }
-.audit code { font: inherit; color: #cfe3ff }
+button.reject { background: #3a4453 }
+button.danger { background: var(--red) }
+a.btn { display: inline-block; color: var(--blue); padding: 1px 8px; border: 1px solid var(--line); border-radius: 4px }
+/* 列表：真表格。一行等于一条 run，列对齐才扫得动；行尾是链接不是按钮 */
+.rows { width: 100%; border-collapse: collapse; table-layout: fixed }
+.rows th { padding: 4px 10px; color: var(--muted); font-size: 12px; font-weight: 600; text-align: left;
+  border-bottom: 1px solid var(--line) }
+.rows td { padding: 8px 10px; border-bottom: 1px solid #1b2029; white-space: nowrap; vertical-align: middle }
+.rows tbody tr:hover { background: #1b2029 }
+.rows .status { width: 112px }
+/* 单条会话的 run 不进组，会话名就写在状态格里一行小字（窄屏也不隐藏） */
+.rows .sk-sess { display: block; margin-top: 2px; font-size: 12px }
+.rows .sk-sess a, .rows .sk-sess { color: var(--muted) }
+.rows .time { width: 108px; color: var(--muted); font-size: 12px }
+.rows .skill { max-width: 220px; overflow: hidden; text-overflow: ellipsis; font-size: 12px }
+.rows .delta { width: 92px; color: var(--muted); font-size: 12px }
+.rows .ops { text-align: right; font-size: 12px }
+.rows .ops a, .rows .ops button { color: var(--blue); background: none; border: 0; padding: 0; font-size: 12px; cursor: pointer }
+.rows .ops a:hover, .rows .ops button:hover { text-decoration: underline }
+.rows .ops form { display: inline; margin: 0 }
+.rows .ops .rid { color: var(--muted) }
+/* 同一会话的多条 run 收进一个 details：抬头一行说清「哪个会话、几条、最近什么时候、几条要处理」 */
+.grp { margin: 12px 0; border: 1px solid var(--line); border-radius: 6px; background: #12151b }
+.grp > summary { padding: 8px 12px; color: #c8d3e6; cursor: pointer }
+.grp .rows th { border-bottom: 1px solid var(--line) }
+.badge { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 12px; border: 1px solid currentColor }
+.badge.gray { color: var(--muted) }
+.badge.blue { color: var(--blue) }
+.badge.green { color: var(--green) }
+.badge.red { color: var(--red) }
+.badge.yellow { color: var(--yellow) }
+.badge.darkred { color: #8f2f3d }
+.badge.faint { color: #5d6675 }
+.empty { color: var(--muted); padding: 24px 0; text-align: center }
+.empty code { color: #c8d3e6 }
+.next { color: var(--muted); text-align: center; font-size: 12px; margin: 0 0 24px }
+.page { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 16px 0 0;
+  color: var(--muted); font-size: 12px }
+.page .count { color: var(--muted) }
+.off { color: #45505f }
+.hint { color: var(--muted); font-size: 12px }
+.muted { color: var(--muted) }
+/* 统计 / 明细表：评审 blocking、五闸、技能管理、发现共用（别每处各写一套颜色） */
+.tbl { border-collapse: collapse; width: 100%; margin: 8px 0 0; font-size: 12px }
+.tbl th, .tbl td { border-bottom: 1px solid #1b2029; padding: 4px 8px; text-align: left; vertical-align: top }
+.tbl th { color: var(--muted); font-weight: 600 }
+.tag { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--panel); color: var(--muted); font-size: 12px }
+.tag.warn { background: #231d11; color: #e8d9a8 }
+.tag.fail { background: #221316; color: #f0bdbd }
 .ok { color: #7fc78f }
 .partial { color: #d6b25e }
 .fail { color: #e08585 }
-/* 表格：评审 blocking / 五闸 / 发现 / 技能管理都用同一套，避免每处各写一份颜色 */
-.tbl { border-collapse: collapse; width: 100%; margin: 8px 0 0; font-size: 13px }
-.tbl th, .tbl td { border-bottom: 1px solid #1c202a; padding: 4px 8px; text-align: left; vertical-align: top }
-.tbl th { color: #8d99ae; font-weight: 600 }
-.tbl a { color: #7cc4ff; text-decoration: none }
-/* 状态标签：三个标签三色，合成一个就分不出该去批、去改还是去补 stub */
-.tag { display: inline-block; padding: 0 6px; border-radius: 4px; background: #1a1f29; color: #aeb7c4; font-size: 12px }
-.tag.warn { background: #2a2418; color: #e8d9a8 }
-.tag.fail { background: #2a1616; color: #f0bdbd }
-.hint { color: #8d99ae; font-size: 12px }
-.days { margin: 0 0 8px; color: #8d99ae }
-.days a { color: #7cc4ff; text-decoration: none }
-.days .on { color: #d7dce5; padding: 0 6px; background: #1a1f29; border-radius: 4px }
-/* run 详情页的概要：左标签右值，两列对齐才好扫 */
+.days { margin: 0 0 8px; color: var(--muted); font-size: 12px }
+.days a { margin-right: 8px }
+.days .on { color: var(--fg); background: var(--panel); border-radius: 4px; padding: 0 6px }
+/* run / 技能详情页的键值区：左标签右值，两列对齐才好扫 */
 .kv { display: grid; grid-template-columns: 6em 1fr; gap: 2px 12px; margin: 8px 0 0 }
 .kv-row { display: contents }
-.kv .k { color: #8d99ae }
-.kv .v { color: #d7dce5 }
+.kv .k { color: var(--muted); font-size: 12px }
+.kv .v { color: var(--fg) }
 .kv-line { margin: 4px 0 }
-.kv .v code { font: inherit; color: #cfe3ff }
-a.run { color: #cfe3ff; text-decoration: none; border-bottom: 1px dashed #3f4654 }
-a.run:hover { border-bottom-color: #7cc4ff }
-h2 { margin: 20px 0 6px; font-size: 15px; font-weight: 600; color: #cfe3ff }
-/* diff：文件头灰底、hunk 灰字、+ 绿底、- 红底；行号两列宽固定，不随内容抹动 */
-.diff { margin: 8px 0 0; padding: 8px 0; background: #0c0e12; border: 1px solid #232733; border-radius: 6px;
-  overflow-x: auto; white-space: pre; font-size: 12.5px; line-height: 1.5 }
-.diff .dl { display: block; padding: 0 8px }
-/* 长行必须横向滚动而不是被裁掉：技能 description 动辄两三百字，截断等于看不见改了什么 */
-.diff { overflow-x: auto }
-.diff .dl { min-width: max-content }
+a.run { color: #c8d3e6; border-bottom: 1px dashed #45505f }
+a.run:hover { border-bottom-color: var(--blue); text-decoration: none }
+a.sess { color: var(--muted); border-bottom: 1px dashed #45505f }
+a.sess:hover { color: var(--blue); text-decoration: none }
+/* diff：文件头灰底、hunk 灰字、+ 绿底、- 红底；行号定宽，长行横向滚动而不是被裁 */
+.diff { margin: 8px 0 0; padding: 8px 0; background: #0c0e12; border: 1px solid var(--line); border-radius: 6px;
+  overflow-x: auto; white-space: pre; font-size: 12px; line-height: 1.5 }
+.diff .dl { display: block; padding: 0 8px; min-width: max-content }
 .diff .ln { display: inline-block; width: 4.5em; color: #4a5364; text-align: right; padding-right: 8px; user-select: none }
 .diff .tx { white-space: pre }
 .diff .file { background: #22262f; color: #b8c1d1 }
-.diff .hunk { color: #8d99ae }
+.diff .hunk { color: var(--muted) }
 .diff .add { background: #12281a; color: #b7e7c5 }
-.diff .del { background: #2a1616; color: #f0bdbd }
+.diff .del { background: #221316; color: #f0bdbd }
 .diff .meta { color: #6f7a8c }
-/* 改后全文：长文件限高内部滚动，别把后面的评审/五闸顶到屏幕外 */
 .candidate { max-height: 480px; overflow: auto }
-footer { margin-top: 24px; padding-top: 12px; border-top: 1px solid #232733; color: #6f7a8c }
-footer a { color: #7cc4ff }
+pre { margin: 8px 0 0; padding: 12px; background: #12151b; border-left: 2px solid var(--line);
+  white-space: pre-wrap; word-break: break-word; color: #aeb7c4; font-size: 12px }
+/* 最近操作：结果三色，ok / partial / error 扫一眼分开 */
+.audit { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--line) }
+.audit ul { list-style: none; margin: 0; padding: 0 }
+.audit li { padding: 2px 0; color: #aeb7c4; font-size: 12px }
+.audit .when { color: var(--muted) }
+/* 会话页：顶部一行（返回 / 会话 / 原文件）+ 概览 + 左侧目录 + 消息流 */
+.ses-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 16px 0 8px }
+.ses-top .ses-id { color: #c8d3e6 }
+.ses-top .to-end { margin-left: auto; font-size: 12px }
+.ses-file { margin: 0; color: var(--muted); font-size: 12px; min-width: 0; word-break: break-all }
+.ses-file code { user-select: all }
+.ov { margin: 8px 0 16px; padding: 8px 12px; background: var(--panel); border: 1px solid var(--line);
+  border-radius: 6px; color: var(--muted); font-size: 12px }
+.ov .ov-link { margin-left: 12px }
+.ses-wrap { display: flex; gap: 24px; align-items: flex-start }
+.toc { display: none }
+.m { scroll-margin-top: 80px }
+/* 消息块：一条一块，抬头上是角色徽章与时刻 */
+.msg { margin: 16px 0; padding: 0 0 0 12px; border-left: 3px solid transparent }
+.msg .mhead { display: flex; align-items: center; gap: 8px; margin-bottom: 4px }
+.msg .at { color: var(--muted); font-size: 12px }
+.msg.user { border-left-color: var(--blue); background: rgba(56, 132, 255, .08); padding: 8px 12px; border-radius: 4px }
+.msg-body { font-size: 14px; line-height: 1.6 }
+.msg-body p { margin: 4px 0 }
+.msg-body ul { margin: 4px 0; padding-left: 20px }
+.msg-body pre.code { margin: 8px 0; border: 1px solid var(--line) }
+details.tools { margin: 12px 0; padding: 8px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px }
+details.tools > summary { cursor: pointer; color: #c8d3e6; font-size: 12px }
+.tool { margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid var(--line) }
+.tool-name { margin: 0; color: var(--blue); font-size: 12px }
+.tool-args, .tool-result { margin: 4px 0 0; padding: 8px; background: var(--bg); border-left: 1px solid var(--line) }
+.tool-result { color: var(--muted) }
+.to-top { display: block; margin: 24px 0 0; text-align: right; font-size: 12px }
+footer { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px }
+/* 窄屏：只保证不溢出，不做响应式框架。时间/提案列让位给内容，操作列可以换行 */
+@media (max-width: 900px) {
+  .wrap { padding: 0 8px 16px }
+  .rows .time, .rows .delta { display: none }
+  .rows .status { width: 72px }
+  .rows td, .rows th { padding: 6px }
+  .rows .ops { white-space: normal }
+}
+/* 宽屏才给左侧常驻目录：窄屏用顶部折叠目录兜底（在 render-session.ts 里） */
+@media (min-width: 1200px) {
+  .ses-wrap { flex-direction: row }
+  .toc { display: block; position: sticky; top: 0; align-self: flex-start; width: 260px;
+    max-height: calc(100vh - 80px); overflow: auto; font-size: 12px }
+  .toc a { display: block; padding: 2px 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+  .toc a:hover { color: var(--blue); text-decoration: none }
+  .ses-body { flex: 1; min-width: 0 }
+}
+details.toc-fold { display: block; margin: 0 0 12px; font-size: 12px }
+details.toc-fold > summary { cursor: pointer; color: var(--muted) }
+details.toc-fold .toc-list { padding: 8px 0 0 8px }
+@media (min-width: 1200px) { details.toc-fold { display: none } }
 `.trim();

package/extensions/skill-evolve/lib/web/text.ts

@@ -43,6 +43,63 @@ export function shortRunId(runId: string): string {
   return runId.length > 16 && runId.includes("-") ? `${runId.slice(0, 8)}…${runId.slice(-4)}` : runId;
 }
 
+/**
+ * 列表「操作」列里的 runId：只留末 8 位（真实数据的 9 条 run 前 8 位完全相同，
+ * 保留前缀等于没显示）。完整 id 交给链接的 `title`。
+ */
+export function tailRunId(runId: string): string {
+  return runId.length > 8 ? `…${runId.slice(-8)}` : runId;
+}
+
+/** 同一个本地日期（列表「今天只写时分」的判据） */
+function sameDay(a: Date, b: Date): boolean {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+
+const pad2 = (value: number): string => String(value).padStart(2, "0");
+
+/** `HH:mm`：会话页每条消息的时钟 */
+export function formatTime(ts: number): string {
+  const date = new Date(ts);
+  return `${pad2(date.getHours())}:${pad2(date.getMinutes())}`;
+}
+
+/** `HH:mm:ss`：消息流抬头用（同一分钟内的多条要能分先后） */
+export function formatTimeSeconds(ts: number | null): string {
+  if (ts === null || !Number.isFinite(ts)) return "—";
+  const date = new Date(ts);
+  return `${pad2(date.getHours())}:${pad2(date.getMinutes())}:${pad2(date.getSeconds())}`;
+}
+
+/**
+ * 列表「时间」列：今天只写 `19:35`，更早的写 `11-07 18:24`。
+ * 一列里全是完整日期时，今天那几条反而最难扫（要对比年月日才知道是刚才还是前天）。
+ */
+export function formatClock(ts: number | null, now: number): string {
+  if (ts === null || !Number.isFinite(ts)) return "—";
+  const date = new Date(ts);
+  const clock = `${pad2(date.getHours())}:${pad2(date.getMinutes())}`;
+  if (sameDay(date, new Date(now))) return clock;
+  return `${pad2(date.getMonth() + 1)}-${pad2(date.getDate())} ${clock}`;
+}
+
+/** 完整时刻放 `title`：悬停要能看到可复制、可跨天比对的绝对时间 */
+export function formatIso(ts: number | null): string {
+  if (ts === null || !Number.isFinite(ts)) return "—";
+  return new Date(ts).toISOString();
+}
+
+/** 会话页概要里的时间段：同一天写 `10:32 → 11:52`，跨天把日期带上 */
+export function formatSpan(start: number | null, end: number | null): string {
+  if (start === null || end === null) return "—";
+  const first = new Date(start);
+  const last = new Date(end);
+  const clock = (date: Date): string => `${pad2(date.getHours())}:${pad2(date.getMinutes())}`;
+  if (sameDay(first, last)) return `${clock(first)} → ${clock(last)}`;
+  const day = (date: Date): string => `${pad2(date.getMonth() + 1)}-${pad2(date.getDate())} ${clock(date)}`;
+  return `${day(first)} → ${day(last)}`;
+}
+
 /**
  * 详情第一行永远是完整 runId：列表上显示的是缩写，复制要靠这一行。
  * 文案里带 `runId：` 前缀是因为详情区是纯文本，没有别的办法标出这一行是什么。

package/extensions/skill-evolve/test/aggregate-dispatch.test.ts

@@ -0,0 +1,165 @@
+/**
+ * 同会话聚合检测：**接线**的单测（派发器与退出前补发真的走到并入分支）。
+ *
+ * 这里断言的是「没建新 run、没起进程」这类后果 —— 只看返回值会漏掉「返回说并入了，其实又派了一个」。
+ * 场景与用户现场一致：同一会话连着几轮结算，第二轮起只并轮数。
+ */
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import * as fs from "node:fs";
+import * as os from "node:os";
+import * as path from "node:path";
+
+import { DEFAULT_CONFIG } from "../lib/config.ts";
+import { patchRunRecordSync } from "../lib/runs.ts";
+import { flushPendingSync } from "../lib/shutdown-dispatch.ts";
+import { type SpawnedChild } from "../lib/spawn-plan.ts";
+import { type TelemetryEvent } from "../lib/telemetry.ts";
+import { FakeChild, NOW, TEMPLATE, harness, readRun, settleAsync } from "./aggregate-harness.ts";
+
+test("派发：同会话第二条不再派新 run，而是并入（不起进程、轮数与 merged 累加）", async () => {
+  const h = harness("merge");
+  const first = await h.dispatch({ sessionId: "s1", skills: ["a"] });
+  assert.equal(first.status, "dispatched");
+  if (first.status !== "dispatched") return;
+  const runId = first.run.runId;
+  const spawns = h.calls.length;
+
+  // 去抖窗口已过：这一轮会真的走到派发逻辑，聚合检测在单飞闸之前
+  h.tick(DEFAULT_CONFIG.idleMs + 1_000);
+  const second = await h.dispatch({ sessionId: "s1", skills: ["b"] });
+  assert.deepEqual(second, { status: "merged", runId, rounds: 2 });
+  assert.equal(h.calls.length, spawns, "并入的轮次不许再起子进程");
+  assert.equal(fs.readdirSync(path.join(h.evolutionDir, "runs")).length, 1, "也不许再建 run 目录");
+
+  const record = readRun(h, runId);
+  const coverage = record.coverage as Record<string, unknown>;
+  assert.deepEqual([coverage.rounds, coverage.merged, coverage.lastAt], [2, 1, NOW + DEFAULT_CONFIG.idleMs + 1_000]);
+  // run 原有的状态与 skills 不被并入操作改写：本轮并进去的是「覆盖轮数」，不是新一轮技能清单
+  assert.deepEqual([record.status, record.trigger], ["dispatched", "auto"]);
+
+  const merged = h.events.filter((event) => event.kind === "merged");
+  assert.equal(merged.length, 1);
+  assert.deepEqual([merged[0]?.sessionId, merged[0]?.runId, merged[0]?.rounds], ["s1", runId, 2]);
+  assert.equal(h.logs.some((line) => line.includes(`同会话已有在途复盘 ${runId}，本轮并入（共 2 轮），不再派生`)), true);
+});
+
+test("派发：连续并入时 rounds 递增、merged 累计；被去抖挡下的轮次也算进总数", async () => {
+  const h = harness("merge-twice");
+  const first = await h.dispatch({ sessionId: "s1", skills: ["a"] });
+  assert.equal(first.status, "dispatched");
+  if (first.status !== "dispatched") return;
+
+  // 窗口内又结算一轮：走老路记 pending（superseded），不是并入
+  const superseded = await h.dispatch({ sessionId: "s1", skills: ["a"] });
+  assert.deepEqual(superseded, { status: "superseded", rounds: 1 });
+
+  // 窗口过后这一轮：pending 里的那轮 + 这一轮一起并进去
+  h.tick(DEFAULT_CONFIG.idleMs + 1_000);
+  const merged = await h.dispatch({ sessionId: "s1", skills: ["a"] });
+  // 派发时覆盖 1 轮 + pending 里 1 轮 + 这一轮 = 3 轮
+  assert.deepEqual(merged, { status: "merged", runId: first.run.runId, rounds: 3 });
+
+  h.tick(DEFAULT_CONFIG.idleMs + 1_000);
+  const third = await h.dispatch({ sessionId: "s1", skills: ["a"] });
+  assert.deepEqual(third, { status: "merged", runId: first.run.runId, rounds: 4 });
+
+  const coverage = readRun(h, first.run.runId).coverage as Record<string, unknown>;
+  assert.deepEqual([coverage.rounds, coverage.merged], [4, 2]);
+  assert.equal(h.events.filter((event) => event.kind === "merged").length, 2);
+});
+
+test("派发：在途 run 的子进程已死 → 不并入，另开新 run（尸体交给 stale 逻辑）", async () => {
+  const h = harness("dead");
+  const first = await h.dispatch({ sessionId: "s1", skills: ["a"] });
+  assert.equal(first.status, "dispatched");
+  if (first.status !== "dispatched") return;
+
+  // 子进程退出（收尸会放锁并把这条 run 记成 abandoned），pid 判死：它不再是在途复盘
+  h.children[0].emit("exit", 1);
+  await settleAsync();
+  h.setAlive(false);
+  h.tick(DEFAULT_CONFIG.idleMs + 1_000);
+
+  const second = await h.dispatch({ sessionId: "s1", skills: ["a"] });
+  assert.equal(second.status, "dispatched");
+  if (second.status !== "dispatched") return;
+  assert.notEqual(second.run.runId, first.run.runId, "死 run 不许被并入，必须另开一条");
+  assert.equal(h.calls.length, 2);
+  // 聚合检测不擅自改别人的 run.json：这次并入失败，那条老 run 的 coverage 一个字都没动
+  assert.equal(readRun(h, first.run.runId).coverage, undefined);
+  assert.equal(h.events.filter((event) => event.kind === "merged").length, 0);
+});
+
+test("派发：同会话那条 run 已 analyzed（复盘确实跑完）→ 允许另开新 run", async () => {
+  const h = harness("analyzed");
+  const first = await h.dispatch({ sessionId: "s1", skills: ["a"] });
+  assert.equal(first.status, "dispatched");
+  if (first.status !== "dispatched") return;
+  // 复盘跑完 = 子进程已退出：先收尸放锁，再把状态写成 analyzed（复盘确实读到了产出）
+  h.children[0].emit("exit", 0);
+  await settleAsync();
+  h.setAlive(false);
+  assert.equal(patchRunRecordSync(first.run.runDir, { status: "analyzed" }), true);
+  h.tick(DEFAULT_CONFIG.idleMs + 1_000);
+
+  const second = await h.dispatch({ sessionId: "s1", skills: ["a"] });
+  assert.equal(second.status, "dispatched");
+  if (second.status !== "dispatched") return;
+  assert.notEqual(second.run.runId, first.run.runId);
+});
+
+test("派发：不同 sessionId 互不影响（各自照常派发）", async () => {
+  const h = harness("other-session");
+  const a = await h.dispatch({ sessionId: "s1", skills: ["a"] });
+  // s1 的子进程跑完退出（别让全局单飞闸挡住 s2 —— 它本来就该挡，这里测的是聚合不跨会话误判）
+  h.children[0].emit("exit", 0);
+  await settleAsync();
+  h.setAlive(false);
+  h.tick(DEFAULT_CONFIG.idleMs + 1_000);
+  const b = await h.dispatch({ sessionId: "s2", skills: ["a"] });
+  assert.equal(a.status, "dispatched");
+  assert.equal(b.status, "dispatched");
+  if (a.status !== "dispatched" || b.status !== "dispatched") return;
+  assert.notEqual(a.run.runId, b.run.runId);
+  assert.equal(h.calls.length, 2);
+  assert.equal(h.events.filter((event) => event.kind === "merged").length, 0);
+});
+
+test("退出补发：同样先过聚合检查，命中就只并轮次 + 写 merged 遥测", async () => {
+  const h = harness("shutdown");
+  const first = await h.dispatch({ sessionId: "s1", skills: ["a"] });
+  assert.equal(first.status, "dispatched");
+  if (first.status !== "dispatched") return;
+  const spawns = h.calls.length;
+
+  const result = flushPendingSync(
+    { sessionId: "s1", since: NOW - 1000, rounds: 2, skills: ["a"] },
+    {
+      evolutionDir: h.evolutionDir,
+      cwd: os.tmpdir(),
+      promptTemplatePath: TEMPLATE,
+      maxRuntimeMs: 20 * 60_000,
+      telemetry: { append: () => {}, appendSync: (event) => { h.events.push({ ...event, ts: NOW, iso: "" } as TelemetryEvent); }, flush: async () => undefined },
+      env: {},
+      spawnFn: (command, args, options) => {
+        h.calls.push({ command, args, options });
+        const child = new FakeChild(95_001 + h.children.length);
+        h.children.push(child);
+        return child as unknown as SpawnedChild;
+      },
+      autoReview: false,
+      alive: () => true,
+      log: (msg) => h.logs.push(msg),
+    },
+    NOW + 5_000,
+  );
+
+  assert.equal(result, "merged");
+  assert.equal(h.calls.length, spawns, "补发并入时不许再起子进程");
+  const coverage = readRun(h, first.run.runId).coverage as Record<string, unknown>;
+  // 在途 run 派发时覆盖 1 轮，补发这 2 轮并进去 → 3 轮
+  assert.deepEqual([coverage.rounds, coverage.merged], [3, 1]);
+  const merged = h.events.filter((event) => event.kind === "merged");
+  assert.deepEqual([merged[0]?.sessionId, merged[0]?.rounds], ["s1", 3]);
+});