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}