From 69444006b0e21f6e17f4a1c9be40156bfdf18d0b Mon Sep 17 00:00:00 2001
From: fylorn <249551762+fylorn@users.noreply.github.com>
Date: Sat, 24 Oct 2026 21:01:18 +0800
Subject: [PATCH] Traffic: render model-written Markdown in answers, thinking
 and system prompts

Answers in a request's Content tab and in a session's conversation now show
headings, bold, lists, tables and code blocks instead of the raw `**` and `#`.
What the user typed is still shown as-is.

marked only tokenizes; the tree is drawn as React elements, so HTML in the
model's text stays text, links are not clickable (they would navigate the app
window) and images are not fetched. Security hits are still highlighted, and
while an answer streams only its last block re-renders, with the caret at the
end of the last line.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 package.json                  |   1 +
 pnpm-lock.yaml                |  10 ++
 src/traffic/Conversation.tsx  |  43 ++++---
 src/traffic/Markdown.test.tsx |  50 ++++++++
 src/traffic/Markdown.tsx      | 234 ++++++++++++++++++++++++++++++++++
 src/traffic/drawer/Parsed.tsx |  13 +-
 6 files changed, 329 insertions(+), 22 deletions(-)
 create mode 100644 src/traffic/Markdown.test.tsx
 create mode 100644 src/traffic/Markdown.tsx

diff --git a/package.json b/package.json
index e3457f33..eb072dd0 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "lucide-react": "^1.45.0",
+    "marked": "^18.1.1",
     "radix-ui": "^1.6.7",
     "react": "^19.2.0",
     "react-day-picker": "^10.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 678d4d7d..6fab7dc4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -47,6 +47,9 @@ importers:
       lucide-react:
         specifier: ^1.45.0
         version: 1.45.0(react@19.2.8)
+      marked:
+        specifier: ^18.1.1
+        version: 18.1.1
       radix-ui:
         specifier: ^1.6.7
         version: 1.6.7(@types/react-dom@19.2.7(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -2538,6 +2541,11 @@ packages:
   magic-string@1.4.3:
     resolution: {integrity: sha512-z12OxmaPGE0F4xlpGdjuAUckipLpQlTAuAmyGhNoD7ODpYUzvDfvtxUbjM/jwznyP178oju/KDdyi220wNJ0RQ==}
 
+  marked@18.1.1:
+    resolution: {integrity: sha512-zEGgrtUG8crk+TrMacJSVABU4DYDDkS8uqgU3ohrn/2fW9C2AEfUrO3m6IhpIpQpl7YcVpiXXC9cSMWDANT3dg==}
+    engines: {node: '>= 20'}
+    hasBin: true
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -5529,6 +5537,8 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.6.0
 
+  marked@18.1.1: {}
+
   math-intrinsics@1.1.0: {}
 
   media-typer@1.1.1: {}
diff --git a/src/traffic/Conversation.tsx b/src/traffic/Conversation.tsx
index e7424f4c..2c7250fd 100644
--- a/src/traffic/Conversation.tsx
+++ b/src/traffic/Conversation.tsx
@@ -19,6 +19,7 @@ import { cn } from "@/lib/utils";
 import { useHitTone, useMarker, type Mark } from "@/security/Highlight";
 import { prettyJson } from "@/prettyJson";
 import { BodyText } from "./drawer/Payload";
+import { Markdown } from "./Markdown";
 import type {
   RequestRow,
   Transcript,
@@ -687,7 +688,8 @@ export function BlockLine({ b }: { b: Block }) {
   const t = useText(conversationText);
   return (
     <Line label={b.kind === "said" ? roleLabel(b.role, t) : undefined}>
-      <Parts parts={b.parts} />
+      {/* 用户自己打的字原样显示，模型写的按 Markdown 排 */}
+      <Parts parts={b.parts} plain={b.kind === "said" && b.role === "user"} />
     </Line>
   );
 }
@@ -731,7 +733,7 @@ function EarlierBlocks({ messages }: { messages: readonly TranscriptMessage[] })
 }
 
 /** 一块里的几段，上下排。相邻的图片和附件排成一行 */
-export function Parts({ parts }: { parts: readonly TranscriptPart[] }) {
+export function Parts({ parts, plain = false }: { parts: readonly TranscriptPart[]; plain?: boolean }) {
   const runs: (TranscriptPart | TranscriptPart[])[] = [];
   for (const p of parts) {
     const chip = p.kind === "image" || p.kind === "other";
@@ -749,17 +751,17 @@ export function Parts({ parts }: { parts: readonly TranscriptPart[] }) {
             ))}
           </div>
         ) : (
-          <Part key={i} p={x} />
+          <Part key={i} p={x} plain={plain} />
         ),
       )}
     </div>
   );
 }
 
-function Part({ p }: { p: TranscriptPart }) {
+function Part({ p, plain }: { p: TranscriptPart; plain: boolean }) {
   switch (p.kind) {
     case "text":
-      return <Prose text={p.text} />;
+      return <Prose text={p.text} plain={plain} />;
     case "thinking":
       return <Thinking text={p.text} />;
     case "tool_call":
@@ -773,27 +775,34 @@ function Part({ p }: { p: TranscriptPart }) {
 }
 
 /**
- * 说的话：原样的空白和换行，不当 Markdown 解析（模型写的 `**` 和 `#` 就是那几个字符）。
- * 长的先显示开头，「展开全部」看整段。
+ * 说的话：模型写的（回答、思考、系统提示）按 Markdown 排（`Markdown`）；`plain` 的（用户打的字）
+ * 原样的空白和换行。长的先显示开头，「展开全部」看整段。
  */
-export function Prose({ text, muted = false }: { text: string; muted?: boolean }) {
+export function Prose({ text, muted = false, plain = false }: { text: string; muted?: boolean; plain?: boolean }) {
   const t = useText(conversationText);
   const [all, setAll] = useState(false);
   const head = useMemo(() => clip(text, PROSE), [text]);
   const cut = head !== null && !all;
   const mark = useMarker();
+  const ellipsis = <span className="text-muted-foreground"> …</span>;
   return (
     <div>
       {/* 上边 2px：一行字的中线和左边标签的中线对齐（标签那一格 24px 高，字的行高 19.5px） */}
-      <p
-        className={cn(
-          "pt-0.5 whitespace-pre-wrap wrap-break-word",
-          muted ? "text-muted-foreground" : "text-foreground",
-        )}
-      >
-        {mark(cut ? head : text)}
-        {cut && <span className="text-muted-foreground"> …</span>}
-      </p>
+      {plain ? (
+        <p
+          className={cn(
+            "pt-0.5 whitespace-pre-wrap wrap-break-word",
+            muted ? "text-muted-foreground" : "text-foreground",
+          )}
+        >
+          {mark(cut ? head : text)}
+          {cut && ellipsis}
+        </p>
+      ) : (
+        <div className={cn("pt-0.5", muted ? "text-muted-foreground" : "text-foreground")}>
+          <Markdown text={cut ? head : text} tail={cut ? ellipsis : undefined} />
+        </div>
+      )}
       {head !== null && (
         <Button
           variant="ghost"
diff --git a/src/traffic/Markdown.test.tsx b/src/traffic/Markdown.test.tsx
new file mode 100644
index 00000000..693520f6
--- /dev/null
+++ b/src/traffic/Markdown.test.tsx
@@ -0,0 +1,50 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { HitNeedles } from "@/security/Highlight";
+import { Markdown } from "./Markdown";
+
+const html = (text: string) => renderToStaticMarkup(<Markdown text={text} />);
+
+describe("Markdown", () => {
+  it("排出粗体、列表、表格和代码块", () => {
+    const out = html("共 **499 个**文件：\n\n- 业务代码\n- 测试代码\n\n| a | b |\n|-|-:|\n| 1 | 2 |\n\n```ts\nconst a = 1;\n```");
+    expect(out).toContain("<strong");
+    expect(out).toContain(">499 个</strong>");
+    expect(out).toMatch(/<ul[^>]*><li[^>]*><div[^>]*><span>业务代码<\/span>/);
+    expect(out).toContain("<table");
+    expect(out).toMatch(/<td class="[^"]*text-right[^"]*">2<\/td>/);
+    expect(out).toContain("const a = 1;</pre>");
+    expect(out).not.toContain("**");
+  });
+
+  it("单个换行就是换行", () => {
+    expect(html("第一行\n第二行")).toBe(`<div class="flex flex-col gap-2 wrap-break-word"><p>第一行<br/>第二行</p></div>`);
+  });
+
+  it("模型写的 HTML 原样显示成字，不变成元素", () => {
+    const out = html('<script>alert(1)</script>\n\n文字 <img src="https://x/y.png"> ![图](https://x/z.png)');
+    expect(out).not.toMatch(/<script|<img/);
+    expect(out).toContain("&lt;script&gt;alert(1)&lt;/script&gt;");
+    expect(out).toContain("&lt;img src=");
+  });
+
+  it("链接只显示文字，不是能点的链接", () => {
+    const out = html("[文档](https://example.com/a) 和 https://example.com/b");
+    expect(out).not.toContain("<a ");
+    expect(out).toContain('title="https://example.com/a"');
+  });
+
+  it("安全命中在格式里照样标出来", () => {
+    const out = renderToStaticMarkup(
+      <HitNeedles.Provider value={[{ text: "sk-secret", tone: "bad" }]}>
+        <Markdown text={"密钥 **sk-secret** 和 `sk-secret`"} />
+      </HitNeedles.Provider>,
+    );
+    expect(out.match(/<mark/g)).toHaveLength(2);
+  });
+
+  it("尾巴接在最后一段的行尾", () => {
+    const out = renderToStaticMarkup(<Markdown text={"- a\n\n结尾"} tail={<i>|</i>} />);
+    expect(out).toContain("<p>结尾<i>|</i></p>");
+  });
+});
diff --git a/src/traffic/Markdown.tsx b/src/traffic/Markdown.tsx
new file mode 100644
index 00000000..4a059270
--- /dev/null
+++ b/src/traffic/Markdown.tsx
@@ -0,0 +1,234 @@
+import { memo, useMemo, type ReactNode } from "react";
+import { lexer, type Token, type Tokens } from "marked";
+import { cn } from "@/lib/utils";
+import { useMarker } from "@/security/Highlight";
+
+/**
+ * 模型写的 Markdown 排出来：标题、粗体、列表、表格、代码块。`marked` 只用来切出语法树，画成
+ * React 元素，**不经过 HTML**：模型写的 `<script>`、`<img>` 原样显示成字，不会被网页执行或去拉图。
+ *
+ * - 叶子上的字都过一遍 `useMarker`，安全命中照样标出来（跨了粗体等格式的命中只在折叠行上有点）
+ * - 单个换行就是换行（`breaks`）：模型的回答按行写，不该并成一段
+ * - 链接只显示文字、悬停看地址，不能点：点了会把应用的窗口导航走；图片只显示替代文字
+ * - 顶层每一块按原文 `memo`：回答在长时只有最后一块重画
+ */
+export function Markdown({ text, tail }: { text: string; tail?: ReactNode }) {
+  const blocks = useMemo(() => lexer(text, { gfm: true, breaks: true }).filter((b) => b.type !== "space"), [text]);
+  return (
+    <div className="flex flex-col gap-2 wrap-break-word">
+      {blocks.map((b, i) => {
+        const last = i === blocks.length - 1;
+        return <Block key={i} token={b} raw={b.raw} tail={last ? tail : undefined} />;
+      })}
+      {blocks.length === 0 && tail}
+    </div>
+  );
+}
+
+/** `raw` 单独传：`memo` 比的是它，同一段原文切出来的对象每次都是新的 */
+const Block = memo(
+  function Block({ token, tail }: { token: Token; raw: string; tail?: ReactNode }) {
+    return <BlockToken t={token} tail={tail} />;
+  },
+  (a, b) => a.raw === b.raw && a.tail === b.tail,
+);
+
+/** 字可以跟在末尾的块（段落、标题）把 `tail`（光标、省略号）接在行尾，其余的另起一行 */
+function BlockToken({ t, tail }: { t: Token; tail?: ReactNode }) {
+  const own = <BlockBody t={t} tail={tail} />;
+  return t.type === "paragraph" || t.type === "heading" || t.type === "text" ? (
+    own
+  ) : (
+    <>
+      {own}
+      {tail}
+    </>
+  );
+}
+
+function BlockBody({ t, tail }: { t: Token; tail?: ReactNode }) {
+  const mark = useMarker();
+  const tok = t as Tokens.Generic;
+  switch (t.type) {
+    case "paragraph":
+      return (
+        <p>
+          <Inline tokens={tok.tokens} />
+          {tail}
+        </p>
+      );
+    case "text":
+      // 紧凑列表项里的字：不包段落
+      return (
+        <span>
+          {tok.tokens ? <Inline tokens={tok.tokens} /> : mark(tok.text)}
+          {tail}
+        </span>
+      );
+    case "heading":
+      return (
+        <p className={cn("font-semibold text-foreground", tok.depth === 1 ? "tw-title" : "tw-head")}>
+          <Inline tokens={tok.tokens} />
+          {tail}
+        </p>
+      );
+    case "code":
+      return (
+        <pre className="overflow-x-auto rounded-md border border-border bg-surface px-2.5 py-2 font-mono tw-label leading-relaxed whitespace-pre text-foreground">
+          {mark((t as Tokens.Code).text)}
+        </pre>
+      );
+    case "blockquote":
+      return (
+        <div className="flex flex-col gap-2 border-l-2 border-border pl-3 text-muted-foreground">
+          <Blocks tokens={(t as Tokens.Blockquote).tokens} />
+        </div>
+      );
+    case "list":
+      return <List t={t as Tokens.List} />;
+    case "table":
+      return <Table t={t as Tokens.Table} />;
+    case "hr":
+      return <hr className="border-border" />;
+    case "html":
+    case "def":
+    default:
+      // 模型写的 HTML、认不出的块：原样的字
+      return <p className="whitespace-pre-wrap">{mark(t.raw.replace(/\n+$/, ""))}</p>;
+  }
+}
+
+function Blocks({ tokens }: { tokens: Token[] }) {
+  return tokens.filter((b) => b.type !== "space").map((b, i) => <BlockToken key={i} t={b} />);
+}
+
+function List({ t }: { t: Tokens.List }) {
+  const Tag = t.ordered ? "ol" : "ul";
+  return (
+    <Tag
+      start={t.ordered && t.start !== "" && t.start !== 1 ? Number(t.start) : undefined}
+      className={cn(
+        "flex flex-col pl-5 marker:text-muted-foreground",
+        t.ordered ? "list-decimal" : "list-disc [&_ul]:list-[circle]",
+        t.loose ? "gap-2" : "gap-0.5",
+      )}
+    >
+      {t.items.map((item, i) => (
+        <li key={i} className={cn("pl-0.5", item.task && "list-none -ml-5")}>
+          <div className="flex flex-col gap-1">
+            <ItemBody item={item} />
+          </div>
+        </li>
+      ))}
+    </Tag>
+  );
+}
+
+/** 任务项（`- [x]`）：一个勾或一个空框代替圆点，不能点 */
+function ItemBody({ item }: { item: Tokens.ListItem }) {
+  const tokens = item.tokens.filter((b) => b.type !== "checkbox" && b.type !== "space");
+  if (!item.task) return <Blocks tokens={tokens} />;
+  return (
+    <div className="flex gap-1.5">
+      <span aria-hidden className="w-3.5 shrink-0 text-muted-foreground">
+        {item.checked ? "☑" : "☐"}
+      </span>
+      <div className="flex min-w-0 flex-col gap-1">
+        <Blocks tokens={tokens} />
+      </div>
+    </div>
+  );
+}
+
+const ALIGN = { left: "text-left", center: "text-center", right: "text-right" } as const;
+
+function Table({ t }: { t: Tokens.Table }) {
+  const cell = (c: Tokens.TableCell, i: number, head: boolean) => {
+    const Tag = head ? "th" : "td";
+    return (
+      <Tag
+        key={i}
+        className={cn(
+          "border border-border px-2 py-1 align-top",
+          head && "bg-surface font-medium",
+          c.align ? ALIGN[c.align] : "text-left",
+        )}
+      >
+        <Inline tokens={c.tokens} />
+      </Tag>
+    );
+  };
+  return (
+    <div className="max-w-full overflow-x-auto">
+      <table className="border-collapse">
+        <thead>
+          <tr>{t.header.map((c, i) => cell(c, i, true))}</tr>
+        </thead>
+        <tbody>
+          {t.rows.map((row, r) => (
+            <tr key={r}>{row.map((c, i) => cell(c, i, false))}</tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function Inline({ tokens }: { tokens: Token[] | undefined }) {
+  if (!tokens) return null;
+  return tokens.map((t, i) => <InlineToken key={i} t={t} />);
+}
+
+function InlineToken({ t }: { t: Token }) {
+  const mark = useMarker();
+  const tok = t as Tokens.Generic;
+  switch (t.type) {
+    case "text":
+      return tok.tokens ? <Inline tokens={tok.tokens} /> : mark(tok.text);
+    case "escape":
+      return mark(tok.text);
+    case "strong":
+      return (
+        <strong className="font-semibold">
+          <Inline tokens={tok.tokens} />
+        </strong>
+      );
+    case "em":
+      return (
+        <em>
+          <Inline tokens={tok.tokens} />
+        </em>
+      );
+    case "del":
+      return (
+        <del className="text-muted-foreground">
+          <Inline tokens={tok.tokens} />
+        </del>
+      );
+    case "codespan":
+      return (
+        <code className="rounded bg-surface px-1 font-mono text-[0.92em] wrap-anywhere">{mark(tok.text)}</code>
+      );
+    case "br":
+      return <br />;
+    case "link": {
+      const l = t as Tokens.Link;
+      return (
+        <span title={l.href} className="underline decoration-muted-foreground/50 underline-offset-2">
+          <Inline tokens={l.tokens} />
+        </span>
+      );
+    }
+    case "image": {
+      const img = t as Tokens.Image;
+      return (
+        <span title={img.href} className="text-muted-foreground">
+          {mark(img.text ? `[${img.text}]` : t.raw)}
+        </span>
+      );
+    }
+    default:
+      // 行内的 HTML 标签和认不出的：原样的字
+      return mark(t.raw);
+  }
+}
diff --git a/src/traffic/drawer/Parsed.tsx b/src/traffic/drawer/Parsed.tsx
index eb5be6f4..d10ab960 100644
--- a/src/traffic/drawer/Parsed.tsx
+++ b/src/traffic/drawer/Parsed.tsx
@@ -22,6 +22,7 @@ import {
   TextFold,
 } from "../Conversation";
 import { conversationText } from "../Conversation.i18n";
+import { Markdown } from "../Markdown";
 import { argsPreview, blocksOf, clip, splitRestart, type ToolCall } from "../transcript";
 import { contentText } from "./Content.i18n";
 import { AnswerReader, readRequest, type ClientDialect } from "./dialect";
@@ -367,7 +368,7 @@ function Growing({ text, live }: { text: string; live: boolean }) {
 }
 
 /**
- * 回答的正文：原样的空白和换行，不当 Markdown。**收到时就在看的，不收起**：读到一半折回开头
+ * 回答的正文：按 Markdown 排（`Markdown`），在长时光标跟在最后一行后面。**收到时就在看的，不收起**：读到一半折回开头
  * 没有道理；之后点开的长回答照常先显示开头
  */
 function AnswerText({ text, live, streaming }: { text: string; live: boolean; streaming: boolean }) {
@@ -378,10 +379,12 @@ function AnswerText({ text, live, streaming }: { text: string; live: boolean; st
   const cut = head !== null && !all;
   return (
     <div>
-      <p className="pt-0.5 whitespace-pre-wrap wrap-break-word text-foreground">
-        <Growing text={cut ? head : text} live={live} />
-        {cut && <span className="text-muted-foreground"> …</span>}
-      </p>
+      <div className="pt-0.5 text-foreground">
+        <Markdown
+          text={cut ? head : text}
+          tail={live ? <Caret /> : cut ? <span className="text-muted-foreground"> …</span> : undefined}
+        />
+      </div>
       {head !== null && (
         <Button variant="ghost" size="xs" className="mt-0.5 -ml-2 text-muted-foreground" onClick={() => setAll((a) => !a)}>
           {all ? c.collapse : c.showAll}