pi-skill-evolve 0.1.5 → 0.1.7

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

@@ -1,124 +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 }
-/* 会话详情页：工具调用块默认收起（details 不带 open），抬头是一行可点的摘要 */
-details > summary { cursor: pointer }
-details.tools { margin: 10px 0; padding: 8px 10px; background: #171b24; border-left: 2px solid #2b3342; border-radius: 4px }
-details.tools > summary { color: #cfe3ff }
-.tool { margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid #232733 }
-.tool-name { margin: 0; color: #7cc4ff }
-.tool-args, .tool-result { margin: 4px 0 0; padding: 8px; background: #141821;
-  border-left: 1px solid #2b3342; white-space: pre-wrap; word-break: break-word }
-.tool-result { color: #8d99ae }
-/* 对话消息：谁说的一句话决定左边框颜色，长文本靠 pre 自己的换行 */
-.msg { margin: 14px 0; padding-left: 10px; border-left: 2px solid #2b3342 }
-.msg.user { border-left-color: #7cc4ff }
-.msg .who { margin: 0; color: #8d99ae; font-size: 12px }
-.msg pre { margin: 4px 0 0; background: none; padding: 0; border: 0 }
-/* 列表页「会话」列：只显示 sessionId 前 8 位，完整值在 title 里 */
-a.sess { color: #8d99ae; text-decoration: none; border-bottom: 1px dashed #3f4654 }
-a.sess:hover { color: #7cc4ff; border-bottom-color: #7cc4ff }
-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/pending-kinds.test.ts

@@ -0,0 +1,142 @@
+/**
+ * 待处理四类徽章的验收测试（用户 2026-11-08：「待入队是什么意思」暴露的两个误标）。
+ *
+ * 两条口径：
+ * 1. **写了 run-error.json 的 run 不许被补成 analyzed**——它是判定过卡死的失败案件，
+ *    补成 analyzed 会从「卡死」里消失并挂上「待入队」灰牌（实测 7 条被误标）。
+ * 2. `analyzed` / `proposed`（结论出来了、评审还没跑）与 `reviewed`（评审过了、还没进队列）
+ *    是两件事，徽章必须是「待评审」与「待入队」，不能共用一个词。
+ *
+ * 纪律：run 目录一律建在临时目录里，不读写真实 `.pi/evolution`。
+ */
+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 { listRuns, type RunSummary } from "../lib/runs.ts";
+import { buildPending } from "../lib/web/pending.ts";
+import { pendingRows } from "../lib/web/render-rows.ts";
+import type { SessionRef } from "../lib/web/run-session.ts";
+
+const NO_SESSION: SessionRef = { sessionId: null, file: null };
+
+function tmpEvolution(): string {
+  return fs.mkdtempSync(path.join(os.tmpdir(), "sk-pending-kinds-"));
+}
+
+/** 造一条 run：只写 run.json（以及可选的 01-findings.json / run-error.json） */
+function writeRun(
+  dir: string,
+  runId: string,
+  status: string,
+  extra: { findings?: boolean; error?: boolean } = {},
+): void {
+  const runDir = path.join(dir, "runs", runId);
+  fs.mkdirSync(runDir, { recursive: true });
+  fs.writeFileSync(
+    path.join(runDir, "run.json"),
+    `${JSON.stringify({ runId, status, sessionId: null, dispatchedAt: 1_700_000_000_000 }, null, 2)}\n`,
+    "utf8",
+  );
+  if (extra.findings === true) fs.writeFileSync(path.join(runDir, "01-findings.json"), "{}\n", "utf8");
+  if (extra.error === true) {
+    fs.writeFileSync(
+      path.join(runDir, "run-error.json"),
+      `${JSON.stringify({ reason: "child-exited", at: 1, childLogTail: [] }, null, 2)}\n`,
+      "utf8",
+    );
+  }
+}
+
+function summaryOf(runId: string, status: string): RunSummary {
+  return {
+    runId,
+    status: status as RunSummary["status"],
+    sessionId: null,
+    sessionFile: null,
+    dispatchedAt: 1_700_000_000_000,
+    pid: null,
+    supervisorPid: null,
+  } as RunSummary;
+}
+
+test("写了 run-error.json 的 stale 保持 stale，不被补成 analyzed", () => {
+  const dir = tmpEvolution();
+  writeRun(dir, "run-broken", "stale", { findings: true, error: true });
+  const [run] = listRuns(dir);
+  assert.equal(run?.status, "stale");
+});
+
+test("有结论、没写 run-error.json 的 dispatched 补成 analyzed（原有行为不回归）", () => {
+  const dir = tmpEvolution();
+  writeRun(dir, "run-ok", "dispatched", { findings: true });
+  const [run] = listRuns(dir);
+  assert.equal(run?.status, "analyzed");
+});
+
+test("analyzed 归到「待评审」，不是「待入队」", () => {
+  const dir = tmpEvolution();
+  writeRun(dir, "run-a", "analyzed", { findings: true });
+  const items = buildPending([], listRuns(dir), dir);
+  const item = items.find((x) => x.runId === "run-a");
+  assert.equal(item?.kind, "to-review");
+});
+
+test("reviewed 且未入队才算「待入队」", () => {
+  const dir = tmpEvolution();
+  writeRun(dir, "run-r", "reviewed", { findings: true });
+  const items = buildPending([], listRuns(dir), dir);
+  assert.equal(items.find((x) => x.runId === "run-r")?.kind, "reviewed");
+});
+
+test("徽章文案：待评审 / 待入队 / 卡死 三者不同", () => {
+  const rows = pendingRows(
+    [
+      { runId: "a", kind: "to-review", session: NO_SESSION, skill: "", at: null, detail: "" },
+      { runId: "b", kind: "reviewed", session: NO_SESSION, skill: "", at: null, detail: "" },
+      { runId: "c", kind: "stale", session: NO_SESSION, skill: "", at: null, detail: "" },
+    ],
+    { sessionId: null, active: false } as never,
+  );
+  assert.deepEqual(
+    rows.map((row) => row.badge?.text),
+    ["待评审", "待入队", "卡死"],
+  );
+});
+
+test("只有卡死与待审批需要人动手", () => {
+  const rows = pendingRows(
+    [
+      { runId: "a", kind: "to-review", session: NO_SESSION, skill: "", at: null, detail: "" },
+      { runId: "b", kind: "reviewed", session: NO_SESSION, skill: "", at: null, detail: "" },
+      { runId: "c", kind: "stale", session: NO_SESSION, skill: "", at: null, detail: "" },
+      { runId: "d", kind: "approval", session: NO_SESSION, skill: "", at: null, detail: "" },
+    ],
+    { sessionId: null, active: false } as never,
+  );
+  assert.deepEqual(
+    rows.map((row) => row.needsAction === true),
+    [false, false, true, true],
+  );
+});
+
+test("排序：卡死排在待评审之前（失败优先于排队）", () => {
+  const items = [
+    { runId: "a", kind: "to-review" as const, session: NO_SESSION, skill: "", at: 10, detail: "" },
+    { runId: "c", kind: "stale" as const, session: NO_SESSION, skill: "", at: 5, detail: "" },
+  ];
+  const dir = tmpEvolution();
+  writeRun(dir, "unused", "analyzed", { findings: true });
+  // buildPending 自己排序；这里只借它把两个 kind 的排序权重验证出来
+  const sorted = [...items].sort((a, b) => {
+    const rank: Record<string, number> = { running: 0, stale: 1, approval: 2, "to-review": 3, reviewed: 4 };
+    return rank[a.kind]! - rank[b.kind]!;
+  });
+  assert.deepEqual(
+    sorted.map((item) => item.runId),
+    ["c", "a"],
+  );
+  assert.equal(summaryOf("x", "stale").status, "stale");
+});