pi-skill-evolve 0.1.5 → 0.1.7

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;

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

@@ -0,0 +1,203 @@
+/**
+ * 会话正文的渲染测试（node --test）：Markdown-lite（粗体 / 行内代码 / 标题 / 列表 / 代码块）、
+ * 注入防护、工具块折叠抬头、正文与目录截断。
+ *
+ * 纪律：只用本文件现造的 JSONL 片段解析，不读真实 `~/.pi/agent/sessions`。
+ */
+import { test } from "node:test";
+import assert from "node:assert/strict";
+
+import { renderTranscript, renderToc, TOOL_PREVIEW, TOC_TEXT } from "../lib/web/session-render.ts";
+import { parseSessionText } from "../lib/web/session-view.ts";
+
+function line(record: unknown): string {
+  return `${JSON.stringify(record)}\n`;
+}
+
+function user(text: string, at?: number): string {
+  const record = { type: "message", message: { role: "user", content: [{ type: "text", text }] } };
+  return line(at === undefined ? record : { ...record, timestamp: new Date(at).toISOString() });
+}
+
+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 }] },
+  });
+}
+
+test("消息块：用户蓝徽章 + 时刻 + 用户底色 class，助手绿徽章", () => {
+  const at = new Date(2026, 10, 8, 19, 35, 12).getTime();
+  const view = renderTranscript(parseSessionText(user("你好", at) + assistant("你好，有什么要看的？")));
+  assert.match(view.body, /<div class="msg user m" id="m-1">\n<div class="mhead"><span class="badge blue">用户<\/span><span class="at">19:35:12<\/span><\/div>/);
+  assert.match(view.body, /<div class="msg assistant m" id="m-2">\n<div class="mhead"><span class="badge green">助手<\/span>/);
+});
+
+test("Markdown-lite：粗体与行内代码（不再把星号原样念给人听）", () => {
+  const view = renderTranscript(parseSessionText(assistant("这是 **重点**，路径是 `lib/web/render.ts`。")));
+  assert.match(view.body, /<strong>重点<\/strong>/);
+  assert.match(view.body, /<code>lib\/web\/render\.ts<\/code>/);
+  assert.equal(view.body.includes("**重点**"), false);
+});
+
+test("Markdown-lite：# / ## 出标题（h3 / h4，不用 h1 抢页面标题）", () => {
+  const view = renderTranscript(parseSessionText(assistant("# 结论\n\n## 细节")));
+  assert.match(view.body, /<h3 class="md-h">结论<\/h3>/);
+  assert.match(view.body, /<h4 class="md-h">细节<\/h4>/);
+  assert.equal(/<h1/.test(view.body), false);
+});
+
+test("Markdown-lite：`- ` 列表与 ``` 代码块", () => {
+  const view = renderTranscript(parseSessionText(assistant("- 第一行\n- 第二行\n\n```ts\nconst a = 1;\n```")));
+  assert.match(view.body, /<ul class="md-ul"><li>第一行<\/li><li>第二行<\/li><\/ul>/);
+  assert.match(view.body, /<pre class="code"><code>const a = 1;<\/code><\/pre>/);
+});
+
+test("注入防护：<script> 被转义，[x](javascript:...) 只留文字不留链接", () => {
+  const view = renderTranscript(parseSessionText(user("<script>alert(1)</script> 看 [点我](javascript:alert(1))")));
+  assert.equal(/<script/i.test(view.body), false);
+  assert.match(view.body, /&lt;script&gt;alert\(1\)&lt;\/script&gt;/);
+  assert.equal(view.body.includes("javascript:"), false, "URL 整段丢弃，不能变成可点的洞");
+  assert.match(view.body, /看 点我/);
+});
+
+test("工具块：默认收起（不带 open），抬头是「▸ 工具名 ×次数 · 首个参数摘要」", () => {
+  const raw =
+    assistant("", [
+      { id: "c1", name: "read", arguments: { path: "a.ts" } },
+      { id: "c2", name: "read", arguments: { path: "b.ts" } },
+      { id: "c3", name: "bash", arguments: { command: "ls" } },
+    ]) +
+    result("c1", "A") +
+    result("c2", "B") +
+    result("c3", "C");
+  const view = renderTranscript(parseSessionText(raw));
+  assert.match(view.body, /<details class="tools"><summary>▸ read ×2、bash ×1 · <span class="muted">/);
+  assert.equal(/<details[^>]*\sopen/.test(view.body), false, "默认收起");
+  assert.match(view.body, /<p class="tool-name">read<\/p>/);
+  assert.match(view.body, /<pre class="tool-args">\{&quot;path&quot;:&quot;a\.ts&quot;\}<\/pre>/);
+  assert.match(view.body, /<pre class="tool-result">A<\/pre>/);
+});
+
+/** 取工具块抬头里那句摘要（没有摘要就是空串） */
+function muted(view: { body: string }): string {
+  return /<span class="muted">([^<]*)<\/span>/.exec(view.body)?.[1] ?? "";
+}
+
+test("工具抬头：bash 只取 command 第一行（\\n 还原成空格、首尾引号去掉）", () => {
+  // 两种情况：真换行只留第一行；字面量 \n 还原成空格。首尾引号一律去掉
+  const realNewline = '"T0=$(date +%s%N)\\nD=$((1 + 1))"'.replace("\\n", "\n");
+  const literal = '"T0=$(date +%s%N)\\nD=$((1 + 1))"';
+  const head = (command: string): string =>
+    muted(
+      renderTranscript(
+        parseSessionText(assistant("", [{ id: "c1", name: "bash", arguments: { command } }]) + result("c1", "ok")),
+      ),
+    );
+  assert.equal(head(realNewline), "T0=$(date +%s%N)", "真换行只留第一行");
+  assert.equal(head(literal), "T0=$(date +%s%N) D=$((1 + 1))", "字面量 \\n 还原成空格");
+});
+
+test("工具抬头：read / write / edit 取文件名，rg / grep 取 pattern，其它工具取第一个字符串参数", () => {
+  const cases: { name: string; args: Record<string, unknown>; expect: string }[] = [
+    { name: "read", args: { path: "/home/suveng/lib/web/a.ts" }, expect: "a.ts" },
+    { name: "write", args: { path: "docs/README.md", content: "很长" }, expect: "README.md" },
+    { name: "edit", args: { path: "/tmp/x/y.json" }, expect: "y.json" },
+    { name: "rg", args: { pattern: "renderPage|escapeHtml", path: "lib" }, expect: "renderPage|escapeHtml" },
+    { name: "grep", args: { pattern: "renderPage" }, expect: "renderPage" },
+    { name: "custom_tool", args: { runId: "run-1", path: "p" }, expect: "run-1" },
+  ];
+  for (const item of cases) {
+    const view = renderTranscript(
+      parseSessionText(
+        assistant("", [{ id: "c1", name: item.name, arguments: item.args }]) + result("c1", "ok"),
+      ),
+    );
+    assert.equal(muted(view), item.expect, `${item.name} 的摘要`);
+  }
+});
+
+test("工具抬头：compress 不给摘要，只显示 ×N；取不到参数时也只有 ×N", () => {
+  const compress = renderTranscript(
+    parseSessionText(
+      assistant("", [{ id: "c1", name: "compress", arguments: { ranges: ["m1-m5"], note: "很长" } }]) + result("c1", "ok"),
+    ),
+  );
+  assert.match(compress.body, /<summary>▸ compress ×1<\/summary>/, "compress 抬头不带参数");
+  assert.equal(compress.body.includes('class="muted"'), false);
+
+  const empty = renderTranscript(parseSessionText(assistant("", [{ id: "c1", name: "write", arguments: {} }]) + result("c1", "ok")));
+  assert.match(empty.body, /<summary>▸ write ×1<\/summary>/);
+});
+
+test("工具抬头摘要里不出现原始 JSON 片段（花括号引号、转义引号、参数名）", () => {
+  const args = { command: `bash -lc "curl -d '{"cmd": "x"}'" && echo \\n done`, pattern: "a", path: "b" };
+  const view = renderTranscript(parseSessionText(assistant("", [{ id: "c1", name: "bash", arguments: args }]) + result("c1", "ok")));
+  const summary = muted(view);
+  assert.equal(summary.includes('{"'), false, "摘要里不许出现 {\"");
+  assert.equal(summary.includes('\\"'), false, "摘要里不许出现转义引号");
+  assert.equal(summary.includes('"command"'), false, "摘要里不许出现参数名");
+});
+
+test("工具抬头：摘要超过 60 字要截断并转义", () => {
+  const command = `<b>${"x".repeat(TOOL_PREVIEW + 20)}</b>`;
+  const view = renderTranscript(
+    parseSessionText(assistant("", [{ id: "c1", name: "bash", arguments: { command } }]) + result("c1", "ok")),
+  );
+  const summary = muted(view);
+  assert.equal(summary.endsWith("…"), true, "截断要看得出来");
+  assert.equal(summary.includes("x".repeat(TOOL_PREVIEW)), false, `摘要按 ${TOOL_PREVIEW} 字截断`);
+  assert.equal(summary.includes("<b>"), false, "摘要里的标签必须转义");
+  assert.equal(summary.includes("&lt;b&gt;"), true);
+});
+
+test("正文截断：用户 2000 字、助手 4000 字，超了加省略号", () => {
+  const view = renderTranscript(parseSessionText(user("u".repeat(2500)) + assistant("a".repeat(4500))));
+  assert.equal(view.body.includes(`${"u".repeat(2000)}…`), true);
+  assert.equal(view.body.includes("u".repeat(2001)), false);
+  assert.equal(view.body.includes(`${"a".repeat(4000)}…`), true);
+  assert.equal(view.body.includes("a".repeat(4001)), false);
+});
+
+test("只有工具调用的助手消息不产出空块（shown 不计它）", () => {
+  const view = renderTranscript(parseSessionText(user("看一下") + assistant("", [{ id: "c1", name: "read", arguments: {} }]) + result("c1", "ok")));
+  assert.equal(view.shown, 2, "一条用户消息 + 一个工具块");
+  assert.equal(view.toc.length, 1);
+});
+
+test("只看对话：工具块换成一行「省略 N 次调用（看全部）」", () => {
+  const raw =
+    user("看一下") +
+    assistant("", [
+      { id: "c1", name: "read", arguments: { path: "a" } },
+      { id: "c2", name: "read", arguments: { path: "b" } },
+    ]) +
+    result("c1", "A") +
+    result("c2", "B");
+  const view = renderTranscript(parseSessionText(raw), { onlyUser: true, expandHref: "/?view=session&sessionId=x" });
+  assert.equal(view.body.includes('<details class="tools">'), false);
+  assert.match(view.body, /<p class="hint">… 本轮省略 2 次工具调用（<a href="[^"]+">看全部<\/a>）<\/p>/);
+});
+
+test("目录：只收用户消息，条目写「时刻 · 前 40 字」，换行压成空格并转义", () => {
+  const at = new Date(2026, 10, 8, 19, 35, 12).getTime();
+  const long = `${"很".repeat(TOC_TEXT + 10)}\n第二行 <b>粗</b>`;
+  const view = renderTranscript(parseSessionText(user(long, at) + assistant("回复")));
+  assert.equal(view.toc.length, 1);
+  assert.equal(view.toc[0]?.id, "m-1");
+  const toc = renderToc(view.toc);
+  assert.match(toc, /<a href="#m-1">19:35 · 很{40}…<\/a>/);
+  assert.equal(toc.includes("\n第二行"), false);
+  assert.equal(toc.includes("<b>"), false, "目录文本必须转义");
+});
+
+test("目录没有用户消息时给一句人话（不留空栏）", () => {
+  assert.match(renderToc([]), /这段会话里没有用户消息/);
+});

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

@@ -1,40 +1,45 @@
 /**
- * 会话详情页的纯函数单测（node --test）：
- * JSONL 解析（只认 message、跳过 system / thinking、工具调用回连结果、连续工具聚块）、
- * 渲染（默认收起、全转义、单条与总输出截断、只留最后 200 条）。
+ * 会话详情的解析单测（node --test）：JSONL 只认 message、跳过 system / thinking、
+ * 工具调用回连结果、连续调用聚块、条数与长度上限。
  *
- * 纪律：不读真实 `~/.pi/agent/sessions`、不读真实 run 目录 —— 所有输入都是本文件里现造的 JSONL 片段，
- * 这样用例既快又不受本机会话文件变动影响。
+ * 渲染部分（Markdown-lite、折叠抬头、目录、总输出上限）在 ./session-render.test.ts 与 ./session-nav.test.ts 里，
+ * 因为解析与渲染已经是两个文件，测试也各盯一处，失败时不用先猜是哪一半。
+ *
+ * 纪律：不读真实 `~/.pi/agent/sessions`、不读真实 run 目录 —— 所有输入都是本文件里现造的 JSONL 片段。
  */
 import { test } from "node:test";
 import assert from "node:assert/strict";
 
-import {
-  MAX_MESSAGES,
-  MAX_OUTPUT,
-  parseSessionText,
-  renderSessionBody,
-  type SessionTranscript,
-} from "../lib/web/session-view.ts";
+import { MAX_MESSAGES, MAX_OUTPUT, parseSessionText, type SessionTranscript } from "../lib/web/session-view.ts";
+import { renderTranscript } from "../lib/web/session-render.ts";
 
-/** 一行 JSONL（pi 的真实形态：顶层 type + message） */
+/** 一行 JSONL（pi 的真实形态：顶层 type + message，可选 timestamp） */
 function line(record: unknown): string {
   return `${JSON.stringify(record)}\n`;
 }
 
-function userMessage(text: string): string {
-  return line({ type: "message", message: { role: "user", content: [{ type: "text", text }] } });
+function userMessage(text: string, at?: number): string {
+  const record = { type: "message", message: { role: "user", content: [{ type: "text", text }] } };
+  return line(at === undefined ? record : { ...record, timestamp: new Date(at).toISOString() });
 }
 
-function assistantMessage(text: string, calls: { id: string; name: string; arguments?: unknown }[] = []): string {
+function assistantMessage(
+  text: string,
+  calls: { id: string; name: string; arguments?: unknown }[] = [],
+  at?: number,
+): 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 } });
+  const record = { type: "message", message: { role: "assistant", content } };
+  return line(at === undefined ? record : { ...record, timestamp: new Date(at).toISOString() });
 }
 
 function toolResult(toolCallId: string, text: string): string {
-  return line({ type: "message", message: { role: "toolResult", toolCallId, toolName: "read", content: [{ type: "text", text }] } });
+  return line({
+    type: "message",
+    message: { role: "toolResult", toolCallId, toolName: "read", content: [{ type: "text", text }] },
+  });
 }
 
 test("解析：只认顶层 type=message，session / model_change / custom 全跳过", () => {
@@ -46,15 +51,33 @@ test("解析：只认顶层 type=message，session / model_change / custom 全
     "这不是 JSON\n";
   const transcript = parseSessionText(raw);
   assert.equal(transcript.messages, 1);
-  assert.deepEqual(transcript.entries, [{ kind: "user", text: "你好" }]);
+  assert.deepEqual(transcript.entries, [{ kind: "user", text: "你好", at: null }]);
 });
 
 test("解析：system 提示词与 thinking 块都不渲染（它们不是对话）", () => {
   const raw =
     line({ type: "message", message: { role: "system", content: [{ type: "text", text: "你是复盘助手" }] } }) +
-    line({ type: "message", message: { role: "assistant", content: [{ type: "thinking", thinking: "先看看 diff" }, { type: "text", text: "结论：没问题" }] } });
+    line({
+      type: "message",
+      message: {
+        role: "assistant",
+        content: [{ type: "thinking", thinking: "先看看 diff" }, { type: "text", text: "结论：没问题" }],
+      },
+    });
   const transcript = parseSessionText(raw);
-  assert.deepEqual(transcript.entries, [{ kind: "assistant", text: "结论：没问题" }]);
+  assert.deepEqual(transcript.entries, [{ kind: "assistant", text: "结论：没问题", at: null }]);
+});
+
+test("解析：顶层 timestamp 记进 at，首末时刻写进 firstAt / lastAt（概览要用）", () => {
+  const early = new Date(2026, 10, 8, 10, 32).getTime();
+  const late = new Date(2026, 10, 8, 11, 52).getTime();
+  const transcript = parseSessionText(userMessage("开始", early) + assistantMessage("结束", [], late));
+  assert.deepEqual(
+    transcript.entries.map((entry) => entry.at),
+    [early, late],
+  );
+  assert.equal(transcript.firstAt, early);
+  assert.equal(transcript.lastAt, late);
 });
 
 test("解析：工具调用按 toolCallId 回连结果，连续调用聚成一个块", () => {
@@ -68,7 +91,10 @@ test("解析：工具调用按 toolCallId 回连结果，连续调用聚成一
     toolResult("c2", "文件 b 的内容") +
     assistantMessage("看完了");
   const transcript = parseSessionText(raw);
-  assert.deepEqual(transcript.entries.map((entry) => entry.kind), ["user", "tools", "assistant"]);
+  assert.deepEqual(
+    transcript.entries.map((entry) => entry.kind),
+    ["user", "tools", "assistant"],
+  );
   const tools = transcript.entries[1];
   assert.equal(tools.kind, "tools");
   if (tools.kind !== "tools") return;
@@ -90,8 +116,10 @@ test("解析：两次 assistant 消息之间的调用（中间只隔 toolResult
     assistantMessage("", [{ id: "c2", name: "bash", arguments: { command: "ls" } }]) +
     toolResult("c2", "ok");
   const transcript = parseSessionText(raw);
-  // 文本在前、工具在后：中间那两次调用仍属同一段连续工具调用
-  assert.deepEqual(transcript.entries.map((entry) => entry.kind), ["assistant", "tools"]);
+  assert.deepEqual(
+    transcript.entries.map((entry) => entry.kind),
+    ["assistant", "tools"],
+  );
   const tools = transcript.entries[1];
   assert.equal(tools.kind === "tools" ? tools.calls.length : 0, 2);
 });
@@ -102,65 +130,21 @@ test("解析：没有结果的调用写「（没有结果）」（子进程被 k
   assert.equal(tools.kind === "tools" ? tools.calls[0]?.result : "", "（没有结果）");
 });
 
-test("渲染：用户与助手各一段，抬头写明是谁", () => {
-  const html = renderSessionBody(parseSessionText(userMessage("你好") + assistantMessage("你好，有什么要看的？")));
-  assert.match(html, /<div class="msg user">\s*<p class="who">用户<\/p>\s*<pre>你好<\/pre>/);
-  assert.match(html, /<div class="msg assistant">\s*<p class="who">助手<\/p>/);
-});
-
-test("渲染：工具块默认收起（details 不带 open），抬头是「工具名 ×次数（点击展开）」", () => {
+test("解析：工具参数截到 400 字、结果截到 200 字", () => {
   const raw =
-    assistantMessage("", [
-      { id: "c1", name: "read", arguments: { path: "a" } },
-      { id: "c2", name: "read", arguments: { path: "b" } },
-      { id: "c3", name: "bash", arguments: { command: "ls" } },
-    ]) +
-    toolResult("c1", "A") +
-    toolResult("c2", "B") +
-    toolResult("c3", "C");
-  const html = renderSessionBody(parseSessionText(raw));
-  assert.match(html, /<details class="tools"><summary>工具调用：read ×2、bash ×1（点击展开）<\/summary>/);
-  assert.equal(/<details[^>]*\sopen/.test(html), false, "默认收起：不许出现 open 属性");
-  // 每次调用的三段都在：名字 / 参数 / 结果
-  assert.match(html, /<p class="tool-name">read<\/p>/);
-  assert.match(html, /<pre class="tool-args">\{&quot;path&quot;:&quot;a&quot;\}<\/pre>/);
-  assert.match(html, /<pre class="tool-result">A<\/pre>/);
+    assistantMessage("", [{ id: "c1", name: "read", arguments: "p".repeat(600) }]) + toolResult("c1", "r".repeat(400));
+  const calls = parseSessionText(raw).entries[0];
+  assert.equal(calls.kind, "tools");
+  if (calls.kind !== "tools") return;
+  assert.equal(calls.calls[0]?.args, `${"p".repeat(400)}…`);
+  assert.equal(calls.calls[0]?.result, `${"r".repeat(200)}…`);
 });
 
-test("渲染：消息里的 HTML 一律转义，页面不出现裸 <script>", () => {
-  const raw =
-    userMessage("<script>alert(1)</script>") +
-    assistantMessage("引用 <b>粗体</b>") +
-    assistantMessage("", [{ id: "c1", name: "read", arguments: { path: "<img src=x>" } }]) +
-    toolResult("c1", "<script>x()</script>");
-  const html = renderSessionBody(parseSessionText(raw));
-  assert.equal(/<script/i.test(html), false);
-  assert.equal(/<img/i.test(html), false);
-  assert.match(html, /&lt;script&gt;alert\(1\)&lt;\/script&gt;/);
-  assert.match(html, /&lt;b&gt;粗体&lt;\/b&gt;/);
-  assert.match(html, /&lt;img src=x&gt;/);
-});
-
-test("渲染：用户原文超 2000 字截断并加省略号，助手正文超 4000 字同理", () => {
-  const longUser = "u".repeat(2500);
-  const longAssistant = "a".repeat(4500);
-  const transcript = parseSessionText(userMessage(longUser) + assistantMessage(longAssistant));
-  const html = renderSessionBody(transcript);
-  assert.equal(html.includes("u".repeat(2000) + "…"), true);
-  assert.equal(html.includes("u".repeat(2001)), false);
-  assert.equal(html.includes("a".repeat(4000) + "…"), true);
-  assert.equal(html.includes("a".repeat(4001)), false);
-});
-
-test("渲染：工具参数截到 400 字、结果截到 200 字", () => {
-  const raw =
-    assistantMessage("", [{ id: "c1", name: "read", arguments: "p".repeat(600) }]) +
-    toolResult("c1", "r".repeat(400));
-  const html = renderSessionBody(parseSessionText(raw));
-  assert.equal(html.includes("p".repeat(400) + "…"), true);
-  assert.equal(html.includes("p".repeat(401)), false);
-  assert.equal(html.includes("r".repeat(200) + "…"), true);
-  assert.equal(html.includes("r".repeat(201)), false);
+test("解析：消息正文不在解析层截断（截断归渲染：用户 2000 / 助手 4000）", () => {
+  const transcript = parseSessionText(userMessage("u".repeat(2500)) + assistantMessage("a".repeat(4500)));
+  const [user, assistant] = transcript.entries;
+  assert.equal(user.kind === "user" ? user.text.length : 0, 2500);
+  assert.equal(assistant.kind === "assistant" ? assistant.text.length : 0, 4500);
 });
 
 test("解析：超过 200 条只留最后 200 条，dropped 记下丢掉多少", () => {
@@ -171,8 +155,8 @@ test("解析：超过 200 条只留最后 200 条，dropped 记下丢掉多少",
   assert.equal(transcript.dropped, 5);
   assert.equal(transcript.entries[0]?.kind === "user" ? transcript.entries[0].text : "", "第 5 条");
   // 丢掉的要说明，否则用户以为会话只有 200 条
-  const html = renderSessionBody(transcript, { dropped: transcript.dropped });
-  assert.match(html, /只渲染最后 200 条消息，前面还有 5 条未显示/);
+  const view = renderTranscript(transcript, { dropped: transcript.dropped });
+  assert.match(view.body, /只渲染最后 200 条消息，前面还有 5 条未显示/);
 });
 
 test("渲染：总输出超 2MB 就停手并指路原文件", () => {
@@ -180,13 +164,17 @@ test("渲染：总输出超 2MB 就停手并指路原文件", () => {
   const entries: SessionTranscript["entries"] = Array.from({ length: MAX_MESSAGES }, () => ({
     kind: "assistant",
     text: '"'.repeat(4000),
+    at: null,
   }));
-  const html = renderSessionBody({ entries, messages: entries.length, toolCalls: 0, dropped: 0 });
-  assert.equal(html.length > MAX_OUTPUT, false, "输出必须被截在上限以内");
-  assert.match(html, /已达页面输出上限（2048KB），后面还有内容未渲染/);
-  assert.match(html, /继续看请用 rg\/read 打开原文件/);
+  const view = renderTranscript({ entries, messages: entries.length, toolCalls: 0, dropped: 0, firstAt: null, lastAt: null });
+  assert.equal(view.body.length > MAX_OUTPUT, false, "输出必须被截在上限以内");
+  assert.equal(view.truncated, true);
+  assert.match(view.body, /已达页面输出上限（2048KB），后面还有内容未渲染/);
+  assert.match(view.body, /继续看请用 rg\/read 打开原文件/);
 });
 
 test("渲染：空会话给一句空态，不留白页", () => {
-  assert.match(renderSessionBody({ entries: [], messages: 0, toolCalls: 0, dropped: 0 }), /没有可渲染的对话/);
+  const view = renderTranscript({ entries: [], messages: 0, toolCalls: 0, dropped: 0, firstAt: null, lastAt: null });
+  assert.match(view.body, /没有可渲染的对话/);
+  assert.equal(view.shown, 0);
 });