pi-skill-evolve 0.1.5 → 0.1.6

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/session-nav.test.ts

@@ -0,0 +1,162 @@
+/**
+ * 会话页快速导航（用户 2026-11-08：「会话缺少快速导航，一直往下滚动太累了」）的验收测试。
+ *
+ * 口径：目录与锚点由**服务端一次遍历**产出（不引 JS，不做滚动高亮）；
+ * 宽屏左侧常驻、窄屏顶部折叠是同一份 HTML 的两种 CSS，所以两处内容必须一模一样。
+ *
+ * 纪律：`SessionSource` 一律由本文件现造的 JSONL 解析而来，不读真实 sessions 目录。
+ */
+import { test } from "node:test";
+import assert from "node:assert/strict";
+
+import type { WebState } from "../lib/web/data.ts";
+import { renderSessionPage } from "../lib/web/render-session.ts";
+import { parseSessionText } from "../lib/web/session-view.ts";
+import type { SessionSource } from "../lib/web/session-file.ts";
+
+const SID = "01a1b90f-08c3-722c-871d-d024b083770a";
+const FILE = `/tmp/${SID}.jsonl`;
+
+function line(record: unknown): string {
+  return `${JSON.stringify(record)}\n`;
+}
+
+function user(text: string, at: number): string {
+  return line({
+    type: "message",
+    timestamp: new Date(at).toISOString(),
+    message: { role: "user", content: [{ type: "text", text }] },
+  });
+}
+
+function assistant(text: string, calls: { id: string; name: string; arguments?: unknown }[] = []): string {
+  const content: unknown[] = [];
+  if (text.length > 0) content.push({ type: "text", text });
+  for (const call of calls) content.push({ type: "toolCall", id: call.id, name: call.name, arguments: call.arguments ?? {} });
+  return line({ type: "message", message: { role: "assistant", content } });
+}
+
+function result(toolCallId: string, text: string): string {
+  return line({
+    type: "message",
+    message: { role: "toolResult", toolCallId, toolName: "read", content: [{ type: "text", text }] },
+  });
+}
+
+/** 三条用户消息 + 两段工具调用（够测导航、锚点与「只看对话」） */
+function jsonl(): string {
+  const t = (hour: number, minute: number) => new Date(2026, 10, 8, hour, minute).getTime();
+  return (
+    user("第一段：先看列表页", t(10, 32)) +
+    assistant("", [{ id: "c1", name: "read", arguments: { path: "render.ts" } }]) +
+    result("c1", "ok") +
+    user("第二段：再改样式", t(11, 5)) +
+    assistant("", [
+      { id: "c2", name: "bash", arguments: { command: "npm test" } },
+      { id: "c3", name: "bash", arguments: { command: "npm run lint" } },
+    ]) +
+    result("c2", "ok") +
+    result("c3", "ok") +
+    user("第三段：收尾", t(11, 52)) +
+    assistant("好了")
+  );
+}
+
+function emptyState(): WebState {
+  return {
+    pending: [],
+    approvals: [],
+    applied: [],
+    done: [],
+    reports: [],
+    summary: { reviewing: 0, stale: 0, pendingApprovals: 0, appliedTotal: 0, rollbackRate: 0 },
+  };
+}
+
+function source(raw = jsonl()): SessionSource {
+  return { sessionId: SID, file: FILE, sizeBytes: Buffer.byteLength(raw, "utf8"), transcript: parseSessionText(raw) };
+}
+
+function page(options: { onlyUser?: boolean } = {}): string {
+  return renderSessionPage(source(), { state: emptyState(), onlyUser: options.onlyUser === true });
+}
+
+/** 取 aside 里的目录链接（宽屏那份） */
+function tocLinks(html: string): string[] {
+  const aside = /<aside class="toc">([\s\S]*?)<\/aside>/.exec(html)?.[1] ?? "";
+  return [...aside.matchAll(/<a href="#(m-\d+)">/g)].map((match) => match[1] ?? "");
+}
+
+test("目录条目数等于渲染出的用户消息数（用户消息就是天然章节）", () => {
+  const html = page();
+  assert.equal(tocLinks(html).length, 3);
+  assert.match(html, /<a href="#m-1">10:32 · 第一段：先看列表页<\/a>/);
+});
+
+test("锚点与目录一一对应：id 唯一、href 全都能落到实处", () => {
+  const html = page();
+  const ids = [...html.matchAll(/<div class="msg user m" id="(m-\d+)">/g)].map((match) => match[1]);
+  assert.deepEqual(ids, ["m-1", "m-3", "m-5"], "三条用户消息的块号（工具块不占 msg 块号）");
+  assert.deepEqual(new Set(ids).size, ids.length, "id 不许重复");
+  assert.deepEqual(tocLinks(html), ids, "目录指向的正是这三块");
+});
+
+test("窄屏折叠目录：同一份内容放在顶部 <details> 里（宽屏由 CSS 隐藏）", () => {
+  const html = page();
+  assert.match(html, /<details class="toc-fold"><summary>目录（3 条用户消息）<\/summary>/);
+  const fold = /<div class="toc-list">([\s\S]*?)<\/div>/.exec(html)?.[1] ?? "";
+  assert.deepEqual([...fold.matchAll(/<a href="#(m-\d+)">/g)].map((match) => match[1]), tocLinks(html));
+});
+
+test("目录文本：转义且截到 40 字（长标题不把侧栏撑成两行）", () => {
+  const long = `${"很".repeat(60)}<b>x</b>`;
+  const html = renderSessionPage(
+    { sessionId: SID, file: FILE, sizeBytes: 10, transcript: parseSessionText(user(long, new Date(2026, 10, 8, 9, 0).getTime())) },
+    { state: emptyState() },
+  );
+  const aside = /<aside class="toc">([\s\S]*?)<\/aside>/.exec(html)?.[1] ?? "";
+  assert.match(aside, new RegExp(`09:00 · 很{40}…`));
+  assert.equal(aside.includes("<b>"), false, "目录文本必须转义");
+});
+
+test("只看对话：工具块全部省略成一行，且给「看全部」的回头路", () => {
+  const html = page({ onlyUser: true });
+  assert.equal(html.includes('<details class="tools">'), false);
+  assert.match(html, /<p class="hint">… 本轮省略 1 次工具调用/);
+  assert.match(html, /<p class="hint">… 本轮省略 2 次工具调用（<a href="[^"]+">看全部<\/a>）<\/p>/);
+  const back = /<a href="([^"]+)">看全部<\/a>/.exec(html)?.[1] ?? "";
+  assert.ok(back.includes(`sessionId=${SID}`), "回头路必须还在这个会话");
+  assert.equal(back.includes("only=user"), false, "看全部 = 去掉 only=user");
+});
+
+test("看全部 ⇄ 只看对话：切换链接都带着 sessionId 与原文件路径", () => {
+  const all = page();
+  const toOnly = /<a href="([^"]+)">只看对话<\/a>/.exec(all)?.[1] ?? "";
+  assert.ok(toOnly.includes("only=user"));
+  assert.ok(toOnly.includes(encodeURIComponent(FILE)), "换机器时 file 参数是找回原文的关键");
+  const only = page({ onlyUser: true });
+  assert.match(only, /<span class="ov-link"><a href="[^"]*">看全部<\/a>（当前只看对话）<\/span>/);
+});
+
+test("两个跳转：顶部「跳到最新 ↓」指向最后一块，底部「↑ 回到顶部」指回 #top", () => {
+  const html = page();
+  // 最后一块是收尾的助手消息（m-6）：跳转要落在它身上，不能落在工具块上
+  assert.match(html, /<a class="to-end" href="#m-6">跳到最新 ↓<\/a>/);
+  assert.match(html, /<a class="to-top" href="#top">↑ 回到顶部<\/a>/);
+  assert.match(html, /<div class="wrap" id="top">/);
+});
+
+test("没有用户消息时目录给一句人话；没有任何块时也不给「跳到最新」", () => {
+  const onlyAssistant = renderSessionPage(
+    { sessionId: SID, file: FILE, sizeBytes: 10, transcript: parseSessionText(assistant("只有助手在自言自语")) },
+    { state: emptyState() },
+  );
+  assert.match(onlyAssistant, /这段会话里没有用户消息/);
+
+  const nothing = renderSessionPage(
+    { sessionId: SID, file: FILE, sizeBytes: 0, transcript: parseSessionText("") },
+    { state: emptyState() },
+  );
+  assert.equal(nothing.includes('class="to-end"'), false, "没有块可跳就不给「跳到最新」");
+  assert.match(nothing, /没有可渲染的对话/);
+});

package/extensions/skill-evolve/test/session-page.test.ts

@@ -148,14 +148,19 @@ test("readSessionSource：非法 sessionId 直接返回空，不扫盘", () => {
   assert.deepEqual([source.file, source.transcript], [null, null]);
 });
 
-test("renderSessionPage：顶部给完整 sessionId 与文件路径，底部给原文件统计，工具块默认收起", () => {
+test("renderSessionPage：顶部一行给返回入口 / 会话短 id / 原文件，概览与出口给统计，工具块默认收起", () => {
   const { home, file } = fakeHome();
   const evolutionDir = fakeEvolution("run-1", { sessionId: SESSION_ID, sessionFile: file, status: "rejected" });
   const source = readSessionSource({ evolutionDir, sessionId: SESSION_ID, home });
   const html = renderSessionPage(source, { state: emptyState() });
-  assert.match(html, new RegExp(`<code>${SESSION_ID}</code>`));
-  assert.match(html, /<code>.*2026-11-08T00-00-00-000Z_.*\.jsonl<\/code>/);
-  assert.match(html, /原文件 <code>.*\.jsonl<\/code>（3 条消息 \/ 1 次工具调用 \/ \d+B）/);
+  // 顶部一行：回来有路、会话只显示前 8 位（完整 id 在 title 里，9 条 run 的前缀全一样）
+  assert.match(html, /<a href="\/\?view=pending&amp;range=all">← 返回待处理<\/a>/);
+  assert.match(html, /<span class="ses-id">会话 <code>01a1b90f<\/code><\/span>/);
+  assert.match(html, /原文件 <code title="[^"]*2026-11-08T00-00-00-000Z_.*\.jsonl">/);
+  // 概览：消息 / 工具调用 / 大小（时间跨度只在这段会话有 timestamp 时才出现）
+  assert.match(html, /<p class="ov">消息 3 · 工具调用 1 · \d+B/);
+  // 出口：渲染了多少条、原文件在哪
+  assert.match(html, /已渲染全部 3 条消息（原文件 <code>.*\.jsonl<\/code>）/);
   assert.equal(/<details[^>]*\sopen/.test(html), false, "工具块默认收起");
   assert.match(html, /看一下这个文件/);
 });
@@ -184,8 +189,9 @@ test("HTTP 路由：GET /?view=session&sessionId= 接对了（HOME 指到临时
     assert.equal(response.status, 200);
     assert.match(response.headers.get("content-type") ?? "", /text\/html/);
     const html = await response.text();
-    assert.match(html, /工具调用：read ×1（点击展开）/);
+    assert.match(html, /<details class="tools"><summary>▸ read ×1 · <span class="muted">/);
     assert.equal(/<details[^>]*\sopen/.test(html), false);
+    assert.match(html, /← 返回待处理/);
   } finally {
     await result.panel.close();
     if (original === undefined) delete process.env.HOME;