${codeHtml}${escapeHtml(token.text || token.raw || "")}`;
+ }
+ try {
+ const html = window.marked.parser([token]);
+ return window.DOMPurify ? window.DOMPurify.sanitize(html) : html;
+ } catch (e) {
+ console.warn("live token render failed:", e);
+ return escapeHtml(token.raw || "");
+ }
+}
+
+/**
+ * 块投影增量更新：body 结构 = [span.msg-assistant-mark, div.md-stream]
+ * div.md-stream = [div.md-block(稳定块，缓存不动)]* + div.md-block.live(每 delta 重渲染)
+ * state（挂在消息节点上）：{ stableCount, container, live, rawText }
+ * 无 marked.lexer / 分词异常 → 返回 false，调用方回退纯文本追加。
+ */
+renderer.streamProject = function (body, text, state) {
+ if (!window.marked || typeof window.marked.lexer !== "function" || typeof window.marked.parser !== "function") {
+ return false;
+ }
+ ensureConfigured();
+ try {
+ state.rawText = text;
+ // 首次进入流式：重建 body（mark span 元素 + md-stream 容器）
+ if (!state.container) {
+ body.innerHTML = "";
+ body.appendChild(el("span", { class: "msg-assistant-mark" }, "✦ "));
+ state.container = el("div", { class: "md-stream" });
+ body.appendChild(state.container);
+ }
+ const tokens = window.marked.lexer(text);
+ const stable = tokens.slice(0, -1);
+ const live = tokens[tokens.length - 1] || null;
+ // 结构收缩（如尾随换行改变分词）→ 整体重投影，防错位
+ if (stable.length < state.stableCount) {
+ state.container.innerHTML = "";
+ state.live = null;
+ state.stableCount = 0;
+ }
+ // 旧 live 内容已被完整稳定块取代 → 清空待重建（保持 live 始终是最后一个子节点）
+ if (state.live && state.stableCount < stable.length) {
+ state.live.innerHTML = "";
+ }
+ // 只渲染新增的稳定块（缓存不动 → 不打断选中/复制、不闪烁）
+ for (let i = state.stableCount; i < stable.length; i++) {
+ const block = el("div", { class: "md-block" });
+ block.innerHTML = renderStableToken(stable[i]);
+ if (state.live) state.container.insertBefore(block, state.live);
+ else state.container.appendChild(block);
+ }
+ state.stableCount = stable.length;
+ // 尾部 live 块
+ if (live) {
+ if (!state.live) {
+ state.live = el("div", { class: "md-block live" });
+ state.container.appendChild(state.live);
+ }
+ state.live.innerHTML = renderLiveToken(live);
+ } else if (state.live) {
+ state.live.remove();
+ state.live = null;
+ }
+ return true;
+ } catch (e) {
+ console.warn("streamProject failed:", e);
+ return false;
+ }
+};
+
+/**
+ * done 收尾：live 块转 full（一次性校正）。
+ * 与既有 done 渲染同源（renderMarkdown 全量渲染），仅容器结构保留 mark span。
+ */
+renderer.streamFinalize = async function (body, text) {
+ const html = await renderer.renderMarkdown(text);
+ const container = body.querySelector ? body.querySelector(".md-stream") : null;
+ if (container) {
+ container.innerHTML = html;
+ } else {
+ // 兜底：整段替换（重建 mark span + 容器）
+ body.innerHTML = "";
+ body.appendChild(el("span", { class: "msg-assistant-mark" }, "✦ "));
+ const c = el("div", { class: "md-stream" });
+ c.innerHTML = html;
+ body.appendChild(c);
+ }
+};
+
function escapeHtml(s) {
return String(s).replace(/&/g, "&").replace(//g, ">");
}
diff --git a/emrg/gui/test/renderer.smoke.test.js b/emrg/gui/test/renderer.smoke.test.js
index 03c17e0..a3cc644 100644
--- a/emrg/gui/test/renderer.smoke.test.js
+++ b/emrg/gui/test/renderer.smoke.test.js
@@ -363,6 +363,164 @@ test("rant 14:11：首条消息后欢迎屏立即隐藏（append 同步 updateEm
assert.strictEqual(r.emptyHidden, true, "有消息时欢迎屏应隐藏（欢迎屏不得叠在消息区上方）");
});
+test("rant 21:00:28：块投影——流式中标题即时渲染，稳定块缓存不重建", async () => {
+ const { ctx } = makeSandbox();
+ await tick();
+ const r = await vm.runInContext(`(async function() {
+ App.state.sessionId = "s1";
+ App.state.ownStreamRequestId = "rid-1";
+ // 假 marked：空行分隔块，heading 行 → heading token，其余合并 paragraph
+ window.marked = {
+ use: () => {},
+ parser: (tokens) => tokens.map((t) => t.type === "heading" ? "" + t.text + "
").join(""), + parse: async (t) => "正文段落
"); + // 稳定块缓存：再追加增量，首个稳定块节点身份不变（不重建 → 不闪烁/不打断选中） + EMRG_Chat.handleDelta([{ request_id: "rid-1", content: " 追加" }]); + const stableSame = (stream.children[0] === stable); + return { h2WhileStreaming, firstIsHeading, liveIsParagraph, stableSame }; + })()`, ctx); + assert.strictEqual(r.h2WhileStreaming, true, "流式过程中标题应即时渲染为 h2"); + assert.strictEqual(r.firstIsHeading, true, "稳定块应完整渲染标题"); + assert.strictEqual(r.liveIsParagraph, true, "live 块应渲染段落"); + assert.strictEqual(r.stableSame, true, "稳定块 DOM 应缓存复用（不重建）"); +}); + +test("rant 21:00:28：代码块围栏未闭合纯文本不高亮，闭合后转完整渲染", async () => { + const { ctx } = makeSandbox(); + await tick(); + const r = await vm.runInContext(`(function() { + App.state.sessionId = "s1"; + App.state.ownStreamRequestId = "rid-1"; + // 假 marked：整个输入视为一个 code token（raw 含未闭合/闭合围栏由内容决定） + window.marked = { + use: () => {}, + parser: (tokens) => tokens.map((t) => "" + t.text + "").join(""), + parse: async (t) => "
") && !liveDiv.innerHTML.includes("hljs");
+ EMRG_Chat.handleDelta([{ request_id: "rid-1", content: "\\n\\\`\\\`\\\`" }]);
+ const liveDiv2 = live.children[live.children.length - 1];
+ const closedHighlight = liveDiv2.className.includes("live") && liveDiv2.innerHTML.includes("hljs") && !liveDiv2.innerHTML.includes("stream-code");
+ return { unclosedPlain, closedHighlight };
+ })()`, ctx);
+ assert.strictEqual(r.unclosedPlain, true, "围栏未闭合 → 纯文本不高亮（TUI fence_count%2 启发式一致）");
+ assert.strictEqual(r.closedHighlight, true, "围栏闭合 → 转完整渲染（高亮）");
+});
+
+test("rant 21:00:28：done 收尾 live 块转 full（mark span 保留，typing 移除）", async () => {
+ const { ctx } = makeSandbox();
+ await tick();
+ const r = await vm.runInContext(`(async function() {
+ App.state.sessionId = "s1";
+ App.state.ownStreamRequestId = "rid-1";
+ window.marked = {
+ use: () => {},
+ parser: (tokens) => tokens.map((t) => "" + t.text + "
").join(""),
+ parse: async (t) => "" + t + "",
+ lexer: (text) => [{ type: "paragraph", raw: text, text }],
+ };
+ EMRG_Chat.handleDelta([{ request_id: "rid-1", content: "部分" }]);
+ const node = $("chat-view").children[0];
+ const body = node.querySelector(".msg-body");
+ EMRG_Chat.handleDone({ request_id: "rid-1" });
+ await new Promise((res) => setTimeout(res, 10)); // 等 streamFinalize microtask
+ const stream = body.querySelector(".md-stream");
+ const fullRendered = stream.innerHTML.includes("class=\\"full\\"");
+ const markKept = (body.children[0].className || "").includes("msg-assistant-mark");
+ const typingAfter = body.classList.contains("typing");
+ return { fullRendered, markKept, typingAfter };
+ })()`, ctx);
+ assert.strictEqual(r.fullRendered, true, "done 后容器应整体渲染（live 转 full 校正）");
+ assert.strictEqual(r.markKept, true, "✦ mark span 应保留为元素（块语法不被前缀破坏）");
+ assert.strictEqual(r.typingAfter, false, "done 后 typing 光标应移除");
+});
+
+test("rant 21:00:28：真实 marked 集成——块投影与真实分词一致（未闭合围栏纯文本→闭合高亮→done full）", async () => {
+ const markedReal = require(path.join(__dirname, "..", "vendor", "marked.min.js")).marked;
+ const { ctx } = makeSandbox();
+ await tick();
+ ctx.marked = markedReal; // 注入真实 marked 到 vm 全局（window.marked）
+ const r = await vm.runInContext(`(async function() {
+ App.state.sessionId = "s1";
+ App.state.ownStreamRequestId = "rid-1";
+ const bodyOf = () => $("chat-view").children[0].querySelector(".msg-body");
+ const liveOf = (b) => {
+ const s = b.querySelector(".md-stream");
+ return s.children[s.children.length - 1]; // 尾部 live 块（单类选择器 mock 限制）
+ };
+ const streamOf = (b) => b.querySelector(".md-stream");
+ // 1. 流式标题即时渲染
+ EMRG_Chat.handleDelta([{ request_id: "rid-1", content: "# 标题" }]);
+ const b1 = bodyOf();
+ const liveHeading = liveOf(b1).innerHTML; // 应为 标题
（单个 #）
+ // 2. 追加段落 → 标题变稳定块，live 变段落
+ EMRG_Chat.handleDelta([{ request_id: "rid-1", content: "\\n\\n正文段落" }]);
+ const s2 = streamOf(b1);
+ const stableHeading = s2.children[0].innerHTML;
+ const livePara = s2.children[s2.children.length - 1].innerHTML;
+ // 3. 未闭合代码围栏 → 纯文本不高亮
+ EMRG_Chat.handleDelta([{ request_id: "rid-1", content: "\\n\\n\\\`\\\`\\\`python\\nprint(1)" }]);
+ const s3 = streamOf(b1);
+ const liveUnclosed = s3.children[s3.children.length - 1].innerHTML;
+ // 4. 闭合围栏 → 完整渲染（codeRenderer 容器 code-block）
+ EMRG_Chat.handleDelta([{ request_id: "rid-1", content: "\\n\\\`\\\`\\\`" }]);
+ const s4 = streamOf(b1);
+ const liveClosed = s4.children[s4.children.length - 1].innerHTML;
+ // 5. done → full 渲染（同源 renderMarkdown）
+ EMRG_Chat.handleDone({ request_id: "rid-1" });
+ await new Promise((res) => setTimeout(res, 20));
+ const s5 = streamOf(b1);
+ return {
+ liveHeading,
+ stableHeading,
+ livePara,
+ liveUnclosed,
+ liveClosed,
+ fullHtml: s5.innerHTML,
+ markKept: (b1.children[0].className || "").includes("msg-assistant-mark"),
+ };
+ })()`, ctx);
+ assert.strictEqual(r.liveHeading, "标题
\n", "流式中标题应即时渲染为 h1（真实 marked）");
+ assert.strictEqual(r.stableHeading, "标题
\n", "追加后标题应转稳定块完整渲染");
+ assert.strictEqual(r.livePara, "正文段落
\n", "live 块应渲染段落");
+ assert.ok(r.liveUnclosed.includes("stream-code"), `未闭合围栏应纯文本，实际 ${r.liveUnclosed}`);
+ assert.ok(!r.liveUnclosed.includes("code-block"), "未闭合围栏不得出现 code-block（不高亮）");
+ assert.ok(r.liveClosed.includes("code-block"), `闭合围栏应转完整渲染（codeRenderer），实际 ${r.liveClosed}`);
+ assert.ok(!r.liveClosed.includes("stream-code"), "闭合后不得再走纯文本路径");
+ assert.ok(r.fullHtml.includes("标题
"), "done 后 full 渲染应含标题");
+ assert.ok(r.fullHtml.includes("code-block"), "done 后 full 渲染应含代码块");
+ assert.strictEqual(r.markKept, true, "done 后 mark span 应保留");
+});
+
test("rant 14:11：done 后残留 delta 被丢弃，不建孤儿节点", async () => {
const { ctx } = makeSandbox();
await tick();