feat(web): 消息渲染支持行内标签白名单（修 <b> 等标签裸露显示）

主人 2026-10-07：「她在聊天消息中插入了 html/md 标签，能否增加网页前端
对此类标签的基本渲染支持？」

实测现场（最近 12 条 assistant 消息）：<p> 96 次、<action> 34 次
（这两个前端已支持），<b> 6 次（未支持 => 裸标签直接显示给用户）；
Markdown 记号 0 个 => 她不用 Markdown，所以不引 Markdown 引擎。

- 新增 inlineMarkup.ts（纯逻辑，111 行）：把文本切成「文本 / br / 行内元素」
  的节点树；渲染与解析分离，不拼 HTML
- renderContent.tsx 沿用既有出入口，把节点树映射成 React 元素；
  既有 <p> / <action> 机制原样不动
- 白名单：b / strong / i / em / code / u / s（成对）+ br（void），
  标签名大小写不敏感；不做块级、不做 a（独立安全面）、不做 Markdown
- 安全：全程无 dangerouslySetInnerHTML（文本走 React 子节点，默认转义）；
  属性一律丢弃（节点类型里没有属性位）；白名单外 => 纯文本字面量；
  结构不平衡（未闭合/交错）=> 整段降级为原文，字符一个不丢
- 测试 76 条断言（esbuild + node，零新依赖）；含 3 条安全性质
- 无回归：改动前后 11 个消息样例过真实 SplitChatBubble 链路逐字节对照，
  7 个 SAME，4 个 DIFF 恰是含白名单标签的样例

frontend/web/src/lib/renderContent.render.test.ts

@@ -0,0 +1,268 @@
+// 行内白名单标签的渲染测试（主人 2026-10-07：「聊天消息里插入了 html/md 标签，能否
+// 增加网页前端的基本渲染支持」）。
+//
+// 为什么需要它：昔涟产出的是**少量 HTML 标签**而不是 Markdown —— 段落 `<p>`（契约
+// §4.16）、动作 `<action>`（气泡外灰斜体注记）此前都已处理，**行内**标签（实测 12 条
+// assistant 消息里有 6 个 `<b>`）没有处理 ⇒ 用户直接看到字面的 `&lt;b&gt;`。
+// 这个测试锁住「行内标签渲染」这一层，以及**它不能带来的风险**：产物是不可信文本
+// （模型生成、用户可诱导），任何把它当 HTML 注入的写法都必须在这里变红。
+//
+// 分六组：
+//   ① 白名单标签渲染成真元素（不是字面量）；
+//   ② 白名单外（`<script>` / `<img onerror>` / `<div>` / `<a>`）⇒ **纯文本字面量**，
+//      树里不出现这些元素、不出现任何来自产物的属性；
+//   ③ 未闭合 / 落单闭标签 ⇒ 整段降级为纯文本，不崩、字符一个不丢；
+//   ④ 交错标签（`<b>a<i>b</b>c</i>`）⇒ 同上，不崩、字符一个不丢；
+//   ⑤ 带属性 ⇒ 只出元素本身，属性既不进 markup 也不进 props；
+//   ⑥ 既有 `<p>` / `<action>` 行为无回归（走真实的 SplitChatBubble 链路）。
+//
+// 跑法（react-dom/server 的 CJS 构建需要 require，所以必须打成 cjs）：
+//
+//   cd frontend/web \
+//     && ./node_modules/.bin/esbuild src/lib/renderContent.render.test.ts \
+//          --bundle --platform=node --format=cjs \
+//          --banner:js='globalThis.window={localStorage:{getItem:()=>null,setItem:()=>{},removeItem:()=>{}}};' \
+//          --outfile=/tmp/cyrene-inline-markup.test.cjs \
+//     && node /tmp/cyrene-inline-markup.test.cjs
+//
+// `tsc --noEmit`（npm run build 的一部分）会对本文件做类型检查，因此它只从项目内导入、
+// 不 import node:*。
+
+import { createElement, Fragment, type ReactNode } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { renderContent } from "./renderContent";
+import { SplitChatBubble } from "../components/chat";
+import type { ChatMessage } from "./types";
+
+let checks = 0;
+
+function ok(cond: boolean, what: string): void {
+  checks += 1;
+  if (!cond) throw new Error(`FAILED: ${what}`);
+}
+
+function has(html: string, needle: string): boolean {
+  return html.includes(needle);
+}
+
+function count(html: string, needle: string): number {
+  return html.split(needle).length - 1;
+}
+
+/** 渲染一段（`<p>` 切分后的）段落文本，取静态 HTML。 */
+function markup(text: string): string {
+  return renderToStaticMarkup(createElement(Fragment, null, renderContent(text)));
+}
+
+/** 还原成「用户实际看见的字」：先剥掉**真元素**的标记（含 React 的相邻文本分隔注释），
+ *  再还原实体。顺序不能反 —— 先解码再剥标签会把降级后的字面量 `<b>` 也当成标签误删。 */
+function decode(html: string): string {
+  return html
+    .replace(/<[^>]*>/g, "")
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&quot;/g, '"')
+    .replace(/&#x27;/g, "'")
+    .replace(/&amp;/g, "&");
+}
+
+/** 渲染后**用户实际看见的字**。 */
+function seen(text: string): string {
+  return decode(markup(text));
+}
+
+interface ElInfo {
+  type: string;
+  propKeys: string[];
+}
+
+/** 走一遍 `renderContent` 产出的 React 元素树，列出「元素类型 + 非 children 的属性名」。
+ *  这是「有没有不该出现的节点 / 属性」最直接的一层断言 —— 看的是树，不是字符串。 */
+function tree(text: string): ElInfo[] {
+  const out: ElInfo[] = [];
+  const walk = (node: ReactNode): void => {
+    if (node === null || node === undefined || typeof node !== "object") return;
+    if (Array.isArray(node)) {
+      (node as ReactNode[]).forEach(walk);
+      return;
+    }
+    const el = node as unknown as { type: unknown; props?: Record<string, unknown> };
+    const kind = el.type;
+    const name =
+      typeof kind === "string"
+        ? kind
+        : ((kind as { displayName?: string; name?: string } | null)?.displayName ??
+           (kind as { name?: string } | null)?.name ??
+           "Fragment");
+    const props = el.props ?? {};
+    out.push({ type: name, propKeys: Object.keys(props).filter((k) => k !== "children") });
+    walk(props.children as ReactNode);
+  };
+  walk(renderContent(text));
+  return out;
+}
+
+function elementTypes(text: string): string[] {
+  return tree(text).map((e) => e.type);
+}
+
+/** 除最外层 span 与承载纯文本的 Fragment 之外的节点类型 —— 应当为空，即「没有造出
+ *  任何额外节点」（Fragment 是纯文本的载体，不产生 DOM）。 */
+function foreignTypes(text: string): string[] {
+  return elementTypes(text).filter((t) => t !== "span" && t !== "Fragment");
+}
+
+function render(message: ChatMessage): string {
+  return renderToStaticMarkup(createElement(SplitChatBubble, { message }));
+}
+
+const REAL_SAMPLE =
+  "<p><action>赶紧凑过来看你那边，手指在空气里划了下</action></p>\n" +
+  "<p>花溪呀——人家按贵阳花溪区算的哦，不对的话你得纠正人家♪</p>\n" +
+  "<p>今天那儿是晴，13~25℃，日落 <b>18:35</b>，比上海晚了整整一小时呢。</p>";
+
+// ── ① 白名单标签渲染成真元素 ────────────────────────────────────────────────────
+{
+  const html = markup("日落 <b>18:35</b> 了");
+  ok(has(html, "<b>18:35</b>"), "① `<b>` 渲染成粗体元素");
+  ok(!has(html, "&lt;b&gt;"), "① 不再把 `<b>` 当字面量显示");
+  ok(seen("日落 <b>18:35</b> 了") === "日落 18:35 了", "① 标签本身不作为文字出现（只剩正文）");
+
+  const tags: [string, string][] = [
+    ["<strong>粗</strong>", "<strong>粗</strong>"],
+    ["<i>斜</i>", "<i>斜</i>"],
+    ["<em>强调</em>", "<em>强调</em>"],
+    ["<u>下划</u>", "<u>下划</u>"],
+    ["<s>划掉</s>", "<s>划掉</s>"],
+  ];
+  for (const [src, want] of tags) ok(has(markup(src), want), `① ${want} 正常渲染`);
+  ok(has(markup("<code>go build</code>"), "<code"), "① `<code>` 渲染成等宽元素");
+  ok(seen("<code>go build</code>") === "go build", "① code 内文本逐字保留");
+
+  // 大小写混写：按 HTML 口径不敏感（`<B>` 就是 `<b>`）。
+  ok(has(markup("<B>大写</B>"), "<b>大写</b>"), "① `<B>` 大小写不敏感");
+  ok(has(markup("<b>x</b><BR>y"), "<br/>"), "① `<BR>` 也认（标签名大小写不敏感）");
+
+  // br 是 void 元素：`<br>` / `<br/>` / `</br>`（HTML5 等价写法）都出换行，两侧文本不丢。
+  ok(seen("上<br>下") === "上下" && has(markup("上<br/>下"), "<br/>"), "① `<br>` / `<br/>` 出换行");
+  ok(has(markup("上</br>下"), "<br/>"), "① `</br>` 按 HTML5 口径等同 `<br>`");
+
+  // 嵌套白名单标签（正常闭合）照常渲染。
+  const nested = markup("<b>外 <i>内</i></b>");
+  ok(has(nested, "<b>外 <i>内</i></b>"), "① 正常嵌套逐层渲染");
+}
+
+// ── ② 白名单外一律纯文本字面量，且不产生任何节点/属性 ──────────────────────────
+{
+  const cases: [string, string, string][] = [
+    ["<script>alert(1)</script>", "<script", "script"],
+    ["<img src=x onerror=alert(1)>", "<img", "img"],
+    ["<div>块级不做</div>", "<div", "div"],
+    ["<ul><li>列表不做</li></ul>", "<ul", "ul"],
+    ["<a href=\"javascript:alert(1)\">链接</a>", "<a ", "a"],
+    ["<iframe src=\"https://x/\"></iframe>", "<iframe", "iframe"],
+    ["<style>body{display:none}</style>", "<style", "style"],
+  ];
+  for (const [src, forbidden, name] of cases) {
+    ok(!has(markup(src), forbidden), `② 不产出 <${name}> 元素`);
+    ok(seen(src) === src, `② 白名单外的 \`${name}\` 逐字原样显示（不丢字符）`);
+  }
+  ok(
+    seen("<script>alert(1)</script>") === "<script>alert(1)</script>",
+    "② `<script>` 显示为字面量文本，不是可执行节点"
+  );
+  ok(
+    foreignTypes("<script>alert(1)</script>").length === 0,
+    "② 元素树里除最外层 span 外没有任何节点"
+  );
+
+  // 「没有可执行的 DOM 属性」：树里除 children 外**不存在**任何属性位。
+  for (const e of tree("<img src=x onerror=alert(1)>")) {
+    ok(e.propKeys.length === 0, `② 元素 ${e.type} 上没有任何属性（含 onerror）`);
+  }
+}
+
+// ── ③ 未闭合 / 落单闭标签 ⇒ 整段降级为纯文本 ────────────────────────────────────
+{
+  const broken = [
+    "<b>x",
+    "日落 <b>18:35 了",
+    "</b>孤立闭标签",
+    "<b>x <i>y</i>", // 开 b 未闭合（i 已闭合）⇒ 整段降级
+    "<b><i>x</b>", // 交错（i 未完）⇒ 整段降级
+  ];
+  for (const src of broken) {
+    const html = markup(src);
+    ok(seen(src) === src, `③ 结构不平衡时整段降级为纯文本：${src}`);
+    ok(!has(html, "<b>") && !has(html, "<i>"), `③ 降级后不产出元素：${src}`);
+    ok(foreignTypes(src).length === 0, `③ 降级后没有多余节点：${src}`);
+  }
+  ok(seen("1 < 2") === "1 < 2", "③ §4.16 护栏：`1 < 2` 不是标签");
+  ok(seen("a<b") === "a<b", "③ §4.16 护栏：`a<b`（无 `>`）不是标签");
+  ok(seen("<p2>x</p2>") === "<p2>x</p2>", "③ §4.16 护栏：`<p2>` 不是标签");
+  ok(seen("文本 <p 无尖括号") === "文本 <p 无尖括号", "③ §4.16 护栏：`<p`（无 `>`）不是标签");
+}
+
+// ── ④ 交错标签：不崩、字符一个不丢 ──────────────────────────────────────────────
+{
+  const interleaved = "<b>a<i>b</b>c</i>";
+  ok(seen(interleaved) === interleaved, "④ `<b>a<i>b</b>c</i>` 逐字保留，不崩");
+  ok(foreignTypes(interleaved).length === 0, "④ 交错时不产出元素（不猜结构）");
+
+  // 同一段里既有合法标签又有畸形标签：**整段降级**（不猜结构），因此连合法的 `<b>` 对
+  // 也一并以字面量显示 —— 代价是「这一段没有行内渲染」，换来的是「一个字符都不丢」。
+  const mixed = "日落 <b>18:35</b>，还有 <i>未闭合";
+  ok(seen(mixed) === mixed, "④ 畸形参与时整段降级为纯文本，字符不丢");
+  ok(foreignTypes(mixed).length === 0, "④ 整段降级时不产出任何元素");
+}
+
+// ── ⑤ 带属性 ⇒ 只出元素，属性不生效 ────────────────────────────────────────────
+{
+  const html = markup("<b class=x onclick=y>z</b>");
+  ok(has(html, "<b>z</b>"), "⑤ 只出粗体元素本身");
+  ok(!has(html, "onclick") && !has(html, "class="), "⑤ 属性不进入 markup");
+
+  const bEl = tree("<b class=x onclick=y>z</b>").find((e) => e.type === "b");
+  ok(Boolean(bEl), "⑤ 树里存在 b 元素");
+  ok(bEl !== undefined && bEl.propKeys.length === 0, "⑤ b 元素上没有任何属性（class/onclick 被丢弃）");
+
+  ok(seen("<b class=x onclick=y>z</b>") === "z", "⑤ 属性被丢弃，正文逐字保留");
+
+  const codeHtml = markup("<code data-x=1 style=color:red>c</code>");
+  ok(has(codeHtml, "<code") && !has(codeHtml, "data-x") && !has(codeHtml, "color:red"), "⑤ code 上只保留自己的样式类");
+
+  ok(seen("<b title=\"点我\">提示</b>") === "提示", "⑤ 引号含空格的属性同样不生效");
+}
+
+// ── ⑥ 既有 `<p>` / `<action>` 行为无回归（真实气泡链路） ────────────────────────
+{
+  const html = render({ id: "a1", role: "assistant" as const, content: REAL_SAMPLE, createdAt: 1 } as ChatMessage);
+
+  ok(has(html, "＊动作：赶紧凑过来看你那边，手指在空气里划了下＊"), "⑥ action 仍是气泡外的灰斜体注记");
+  ok(count(html, "liquid-glass-soft rounded-[var(--mu-radius-lg)] px-4 py-2.5") === 3, "⑥ 三个 <p> ⇒ 三个气泡（首段只有动作注记 ⇒ 空气泡，与改动前逐字一致）");
+  ok(has(html, "花溪呀——人家按贵阳花溪区算的哦，不对的话你得纠正人家♪"), "⑥ 第二段正文照常");
+  ok(has(html, "今天那儿是晴，13~25℃，日落 <b>18:35</b>，比上海晚了整整一小时呢。"), "⑥ 第三段正文照常，且行内 <b> 渲染为粗体");
+  ok(!has(html, "&lt;p&gt;") && !has(html, "<p>"), "⑥ `<p>` 一个都不进 DOM（段落机制不变）");
+  ok(has(html, "italic leading-tight"), "⑥ 注记样式类不变（text-[10px] italic leading-tight）");
+
+  // 纯 `<p>` 三段 ⇒ 三个气泡（首段 full、其余 compact）。
+  const three = render({ id: "a2", role: "assistant", content: "<p>第一段</p><p>第二段</p><p>第三段</p>", createdAt: 2 } as ChatMessage);
+  ok(count(three, "liquid-glass-soft rounded-[var(--mu-radius-lg)] px-4 py-2.5") === 3, "⑥ 纯 <p> 三段 ⇒ 三个气泡");
+  ok(has(three, "第一段") && has(three, "第二段") && has(three, "第三段"), "⑥ 三段正文都在");
+
+  // 🔴 `<action>` 注记**不参与**行内渲染（注记文案是原样文本）—— 既有行为一个字没改。
+  const noteWithTag = render({ id: "a3", role: "assistant", content: "<action>她 <b>笑</b> 了</action><p>正文</p>", createdAt: 3 } as ChatMessage);
+  ok(has(noteWithTag, "＊动作：她 &lt;b&gt;笑&lt;/b&gt; 了＊"), "⑥ 注记内的标签保持字面量（不改注记行为）");
+  ok(has(noteWithTag, "正文"), "⑥ 注记后的正文照常渲染");
+
+  // 空正文 + streaming：仍是「生成中…」而不是空渲染。
+  const streaming = render({ id: "a4", role: "assistant", content: "", streaming: true, createdAt: 4 } as ChatMessage);
+  ok(has(streaming, "生成中…"), "⑥ 空正文 streaming 回落到「生成中…」");
+
+  // 用户侧同理（用户气泡也走 renderContent）。
+  const user = render({ id: "u1", role: "user", content: "帮我看看 <b>这个</b> 和 <script>x</script>", createdAt: 5 } as ChatMessage);
+  ok(has(user, "<b>这个</b>"), "⑥ 用户气泡同样渲染行内标签");
+  ok(!has(user, "<script") && has(user, "&lt;script&gt;x&lt;/script&gt;"), "⑥ 用户气泡里的白名单外标签仍是字面量");
+}
+
+console.log(`inline markup render test: ${checks} checks passed`);