diff --git a/src/components/ai-elements/html-code-preview.test.tsx b/src/components/ai-elements/html-code-preview.test.tsx
new file mode 100644
index 0000000000..1f803ab107
--- /dev/null
+++ b/src/components/ai-elements/html-code-preview.test.tsx
@@ -0,0 +1,132 @@
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react"
+import { NextIntlClientProvider } from "next-intl"
+import type { ComponentType, ReactNode } from "react"
+import { beforeEach, describe, expect, it } from "vitest"
+import enMessages from "@/i18n/messages/en.json"
+import { resetHtmlPreviewCachesForTests } from "./html-code-preview"
+import { messageBlockComponents, JsonRenderScope } from "./json-render-pre"
+import { MessageResponse } from "./message"
+
+const Pre = messageBlockComponents.pre as ComponentType<{
+  children?: ReactNode
+}>
+
+beforeEach(() => {
+  localStorage.clear()
+  localStorage.setItem("workspace:chat-html-rendering", "true")
+  resetHtmlPreviewCachesForTests()
+})
+
+function reply(source: string, language = "html") {
+  return (
+    <NextIntlClientProvider locale="en" messages={enMessages}>
+      <JsonRenderScope>
+        <Pre>
+          <code className={`language-${language}`}>{source}</code>
+        </Pre>
+      </JsonRenderScope>
+    </NextIntlClientProvider>
+  )
+}
+
+describe("HTML code preview", () => {
+  it("offers preview for an HTML fence rendered by Streamdown", async () => {
+    render(
+      <NextIntlClientProvider locale="en" messages={enMessages}>
+        <JsonRenderScope>
+          <MessageResponse>{"```html\n<h1>Hello</h1>\n```"}</MessageResponse>
+        </JsonRenderScope>
+      </NextIntlClientProvider>
+    )
+    expect(
+      (await screen.findByTitle("HTML preview")).getAttribute("srcdoc")
+    ).toContain("<h1>Hello</h1>")
+  })
+
+  it("shows preview by default and unmounts the frame when returning to code", async () => {
+    const { container } = render(reply("<h1>Hello</h1>"))
+    const frame = await screen.findByTitle("HTML preview")
+    expect(frame).toHaveAttribute("sandbox", "allow-scripts")
+    expect(frame.getAttribute("srcdoc")).toContain("<h1>Hello</h1>")
+    expect(frame.getAttribute("srcdoc")).toContain("Content-Security-Policy")
+    expect(frame).toHaveAttribute("referrerpolicy", "no-referrer")
+    fireEvent.click(screen.getByRole("button", { name: "Code" }))
+    expect(container.querySelector("iframe")).toBeNull()
+    expect(screen.getByText("<h1>Hello</h1>")).toBeInTheDocument()
+  })
+
+  it("updates the open preview when its source changes", async () => {
+    const { rerender } = render(reply("<p>First</p>"))
+    await screen.findByTitle("HTML preview")
+    rerender(reply("<p>Second</p>"))
+    await waitFor(() =>
+      expect(
+        screen.getByTitle("HTML preview").getAttribute("srcdoc")
+      ).toContain("<p>Second</p>")
+    )
+  })
+
+  it("leaves non-HTML fences unchanged", () => {
+    render(reply("const x = 1", "javascript"))
+    expect(screen.queryByRole("button", { name: "Preview" })).toBeNull()
+    expect(screen.getByText("const x = 1")).toHaveAttribute(
+      "data-block",
+      "true"
+    )
+  })
+
+  it("does not offer preview outside assistant replies", () => {
+    render(
+      <Pre>
+        <code className="language-html">{"<p>User content</p>"}</code>
+      </Pre>
+    )
+    expect(screen.queryByRole("button", { name: "Preview" })).toBeNull()
+  })
+
+  it.each(["HTML", "htm"])("supports the %s language label", (language) => {
+    render(reply("<p>Hello</p>", language))
+    expect(screen.getByRole("button", { name: "Preview" })).toBeInTheDocument()
+  })
+
+  it("keeps the view switch clear of the code block's own buttons", async () => {
+    render(reply("<h1>Hello</h1>"))
+    await screen.findByTitle("HTML preview")
+    const toolbar = screen.getByRole("button", { name: "Code" }).parentElement
+    // Over the frame, its corner is free.
+    expect(toolbar).toHaveClass("end-1")
+    fireEvent.click(screen.getByRole("button", { name: "Code" }))
+    // Over code, Streamdown's copy and download buttons hold that corner.
+    expect(toolbar).toHaveClass("end-18")
+    expect(toolbar).not.toHaveClass("end-1")
+  })
+
+  it("keeps showing a preview it mounted from the cache after the cache moves on", async () => {
+    const first = render(reply("<p>Kept</p>"))
+    await screen.findByTitle("HTML preview")
+    first.unmount()
+    // Mounted again from the cache, as when a reply stops streaming.
+    render(reply("<p>Kept</p>"))
+    const frame = screen.getByTitle("HTML preview") as HTMLIFrameElement
+    // Enough other previews to push its entry out of the cache.
+    for (let i = 0; i < 40; i++) {
+      const other = render(reply(`<p>Other ${i}</p>`))
+      await waitFor(() =>
+        expect(other.container.querySelector("iframe")).not.toBeNull()
+      )
+      other.unmount()
+    }
+    act(() =>
+      window.dispatchEvent(
+        new MessageEvent("message", {
+          source: frame.contentWindow,
+          data: { type: "codeg-visualize:size", height: 200 },
+        })
+      )
+    )
+    expect(screen.queryByRole("status")).toBeNull()
+    expect(screen.getByTitle("HTML preview").getAttribute("srcdoc")).toContain(
+      "<p>Kept</p>"
+    )
+  })
+})
diff --git a/src/components/ai-elements/html-code-preview.tsx b/src/components/ai-elements/html-code-preview.tsx
new file mode 100644
index 0000000000..914eb34631
--- /dev/null
+++ b/src/components/ai-elements/html-code-preview.tsx
@@ -0,0 +1,219 @@
+"use client"
+
+import { useEffect, useRef, useState, type ReactNode } from "react"
+import { useTranslations } from "next-intl"
+import { useTheme } from "next-themes"
+import { Button } from "@/components/ui/button"
+import { buildChatHtmlDocument } from "@/lib/chat-html-document"
+import {
+  HTML_PREVIEW_SIZE_MESSAGE_TYPE,
+  readHtmlPreviewTheme,
+} from "@/lib/html-preview-frame"
+import { cn, randomUUID } from "@/lib/utils"
+
+interface FrameEntry {
+  /** `null` when the build failed: the fence stays code. */
+  doc: string | null
+  /** The theme tokens it was built with; other tokens rebuild it. */
+  theme: string
+  /** What the frame last reported, while it reported anything. */
+  height?: number
+}
+
+interface View {
+  preview: boolean
+  expanded: boolean
+}
+
+const DEFAULT_VIEW: View = { preview: true, expanded: false }
+
+/**
+ * The documents previews built, by theme and source, the height each
+ * measured, and the view the reader picked, by source. Streamdown draws a
+ * finished reply as a new tree, so every preview in a reply mounts again the
+ * moment it stops streaming; these bring it back as it was, instead of
+ * "Generating", then growing from the default height, back in its first view.
+ */
+const frames = new Map<string, FrameEntry>()
+const views = new Map<string, View>()
+/** Previews on screen, by `frames` key: their entries are never evicted. */
+const pins = new Map<string, number>()
+const CACHE_LIMIT = 32
+
+function remember<T>(cache: Map<string, T>, key: string, value: T) {
+  cache.delete(key)
+  cache.set(key, value)
+  for (const oldest of cache.keys()) {
+    if (cache.size <= CACHE_LIMIT) break
+    if (cache !== frames || !pins.has(oldest)) cache.delete(oldest)
+  }
+}
+
+/** Tests only. */
+export function resetHtmlPreviewCachesForTests(): void {
+  frames.clear()
+  views.clear()
+}
+
+export function HtmlCodePending() {
+  const t = useTranslations("HtmlCodePreview")
+  return (
+    <div
+      role="status"
+      className="my-2 rounded-lg border border-dashed px-4 py-3 text-xs text-muted-foreground"
+    >
+      {t("generating")}
+    </div>
+  )
+}
+
+export function HtmlCodePreview({
+  source,
+  children,
+}: {
+  source: string
+  children: ReactNode
+}) {
+  const t = useTranslations("HtmlCodePreview")
+  const { resolvedTheme } = useTheme()
+  const dark = resolvedTheme === "dark"
+  const [view, setView] = useState(() => views.get(source) ?? DEFAULT_VIEW)
+  const { preview, expanded } = view
+  const changeView = (change: Partial<View>) => {
+    const next = { ...view, ...change }
+    remember(views, source, next)
+    setView(next)
+  }
+  const frameRef = useRef<HTMLIFrameElement>(null)
+  const key = `${dark}\0${source}`
+  const [loaded, setLoaded] = useState<{
+    key: string
+    doc: string | null
+  } | null>(null)
+  const [measured, setMeasured] = useState<{
+    key: string
+    height: number
+  } | null>(null)
+
+  // What is on screen stays in the cache.
+  useEffect(() => {
+    pins.set(key, (pins.get(key) ?? 0) + 1)
+    return () => {
+      const count = (pins.get(key) ?? 1) - 1
+      if (count > 0) pins.set(key, count)
+      else pins.delete(key)
+    }
+  }, [key])
+
+  useEffect(() => {
+    const theme = readHtmlPreviewTheme()
+    if (frames.get(key)?.theme === theme) return
+    let active = true
+    buildChatHtmlDocument(source, { nonce: randomUUID(), dark, theme }).then(
+      (doc) => {
+        remember(frames, key, {
+          doc,
+          theme,
+          height: frames.get(key)?.height,
+        })
+        if (active) setLoaded({ key, doc })
+      },
+      () => {
+        remember(frames, key, { doc: null, theme })
+        if (active) setLoaded({ key, doc: null })
+      }
+    )
+    return () => {
+      active = false
+    }
+  }, [source, dark, key])
+
+  useEffect(() => {
+    const onMessage = (event: MessageEvent) => {
+      if (!frameRef.current || event.source !== frameRef.current.contentWindow)
+        return
+      const data = event.data as { type?: unknown; height?: unknown } | null
+      if (
+        !data ||
+        data.type !== HTML_PREVIEW_SIZE_MESSAGE_TYPE ||
+        typeof data.height !== "number" ||
+        !Number.isFinite(data.height)
+      )
+        return
+      const height = Math.min(12000, Math.max(96, Math.ceil(data.height)))
+      const entry = frames.get(key)
+      if (entry) entry.height = height
+      setMeasured((prev) =>
+        prev?.key === key && prev.height === height ? prev : { key, height }
+      )
+    }
+    window.addEventListener("message", onMessage)
+    return () => window.removeEventListener("message", onMessage)
+  }, [key])
+
+  const cached = frames.get(key)
+  const current = cached ?? (loaded?.key === key ? loaded : null)
+  const height =
+    measured?.key === key ? measured.height : (cached?.height ?? 160)
+  const overflows = height > 640
+  const framed = preview && Boolean(current?.doc)
+  const waiting = preview && current === null
+
+  return (
+    <section
+      className="not-prose group/html relative my-2 min-w-0"
+      dir="ltr"
+      data-chat-html
+    >
+      <div
+        className={cn(
+          "absolute top-1 z-10 flex items-center gap-1 rounded-lg border bg-background/90 px-1 py-0.5 opacity-0 shadow-sm backdrop-blur transition-opacity group-hover/html:opacity-100 group-focus-within/html:opacity-100 max-sm:opacity-100",
+          // Over code, keep clear of the code block's own copy and download
+          // buttons in the same corner.
+          framed || waiting ? "end-1" : "end-18"
+        )}
+      >
+        <Button
+          size="sm"
+          variant={preview ? "ghost" : "secondary"}
+          aria-pressed={!preview}
+          onClick={() => changeView({ preview: false })}
+        >
+          {t("code")}
+        </Button>
+        <Button
+          size="sm"
+          variant={preview ? "secondary" : "ghost"}
+          aria-pressed={preview}
+          onClick={() => changeView({ preview: true })}
+        >
+          {t("preview")}
+        </Button>
+      </div>
+      {framed && current?.doc ? (
+        <iframe
+          ref={frameRef}
+          title={t("title")}
+          className="block w-full border-0 bg-transparent transition-[height] duration-150"
+          style={{ height: expanded || !overflows ? height : 640 }}
+          sandbox="allow-scripts"
+          referrerPolicy="no-referrer"
+          srcDoc={current.doc}
+        />
+      ) : waiting ? (
+        <HtmlCodePending />
+      ) : (
+        children
+      )}
+      {framed && overflows ? (
+        <button
+          type="button"
+          className="w-full py-1 text-xs text-muted-foreground hover:text-foreground"
+          onClick={() => changeView({ expanded: !expanded })}
+        >
+          {expanded ? t("collapse") : t("expand")}
+        </button>
+      ) : null}
+    </section>
+  )
+}
diff --git a/src/components/ai-elements/json-render-pre.tsx b/src/components/ai-elements/json-render-pre.tsx
index 2a8c36cd71..f63a4cd736 100644
--- a/src/components/ai-elements/json-render-pre.tsx
+++ b/src/components/ai-elements/json-render-pre.tsx
@@ -1,13 +1,14 @@
 "use client"
 
 /**
- * The `pre` override `MessageResponse` installs: Mermaid's, plus json-render.
+ * `MessageResponse` 的代码块分发入口：图表、json-render 和 HTML 预览。
  *
  * A ```spec fence in an assistant reply renders as a json-render card
  * (`components/message/json-render-block.tsx`, loaded the first time one
  * appears). No switch gates it: an agent writes the fence once it has the
  * `ui-render` skill, which is what the user enables per agent (Settings >
- * Skill Packs > UI), and a card it drew stays a card after that. Every other
+ * Skill Packs > UI), and a card it drew stays a card after that. HTML fences
+ * in assistant replies offer an explicit code/preview switch. Every other
  * fence — and a spec fence anywhere else: a user message, a tool's output —
  * goes on to `MermaidAwarePre` exactly as before.
  *
@@ -19,6 +20,7 @@
 
 import {
   Component,
+  cloneElement,
   createContext,
   isValidElement,
   lazy,
@@ -26,9 +28,11 @@ import {
   useContext,
   type ReactNode,
 } from "react"
-import type { Components } from "streamdown"
+import { StreamdownContext, type Components } from "streamdown"
 
 import { MermaidAwarePre } from "./mermaid-block"
+import { HtmlCodePending, HtmlCodePreview } from "./html-code-preview"
+import { useChatHtmlEnabled } from "@/lib/chat-html-prefs"
 
 const JsonRenderBlock = lazy(
   () => import("@/components/message/json-render-block")
@@ -36,6 +40,10 @@ const JsonRenderBlock = lazy(
 
 const AssistantReplyContext = createContext(false)
 
+export function useAssistantReply(): boolean {
+  return useContext(AssistantReplyContext)
+}
+
 /** Marks the Markdown below it as an assistant reply's text — the one place
  *  a spec fence becomes a card, as in json-render's own chat examples. */
 export function JsonRenderScope({ children }: { children: ReactNode }) {
@@ -118,6 +126,38 @@ function SpecFence({
 }
 
 function JsonRenderAwarePre({ children }: { children?: ReactNode }) {
+  const inReply = useContext(AssistantReplyContext)
+  const htmlEnabled = useChatHtmlEnabled()
+  const { mode } = useContext(StreamdownContext)
+  if (
+    inReply &&
+    htmlEnabled &&
+    isValidElement<{ className?: string; children?: unknown }>(children) &&
+    /(?:^|\s)language-(?:html?|codeg-html(?:-pending|-source)?)(?:\s|$)/i.test(
+      children.props.className ?? ""
+    ) &&
+    typeof children.props.children === "string"
+  ) {
+    const className = children.props.className ?? ""
+    // Only a reply still streaming has HTML on its way; in a finished one the
+    // same fence (an agent can write one too) is just code.
+    const pending = className.includes("language-codeg-html-pending")
+    if (pending && mode === "streaming") return <HtmlCodePending />
+    const code = (
+      <MermaidAwarePre>
+        {cloneElement(children, {
+          className: className.replace(
+            /language-(?:html?|codeg-html(?:-pending|-source)?)(?=\s|$)/i,
+            "language-html"
+          ),
+        })}
+      </MermaidAwarePre>
+    )
+    if (pending || className.includes("language-codeg-html-source")) return code
+    return (
+      <HtmlCodePreview source={children.props.children}>{code}</HtmlCodePreview>
+    )
+  }
   const source = specSourceFromPre(children)
   if (source === null) return <MermaidAwarePre>{children}</MermaidAwarePre>
   return <SpecFence source={source}>{children}</SpecFence>
diff --git a/src/components/ai-elements/message.tsx b/src/components/ai-elements/message.tsx
index 18a8b2c69b..a9039aff2b 100644
--- a/src/components/ai-elements/message.tsx
+++ b/src/components/ai-elements/message.tsx
@@ -29,7 +29,9 @@ import {
   defaultRemarkPlugins,
 } from "streamdown"
 import { markdownLinkComponents } from "./markdown-link"
-import { messageBlockComponents } from "./json-render-pre"
+import { messageBlockComponents, useAssistantReply } from "./json-render-pre"
+import { useChatHtmlEnabled } from "@/lib/chat-html-prefs"
+import { createChatHtmlProcessor } from "@/lib/chat-html-markdown"
 import { scrollportComponents } from "./markdown-scrollport"
 import { maskLiteralSpans } from "./markdown-mask"
 import { rehypePluginsAllowingCodeg } from "./rehype-allow-codeg"
@@ -549,12 +551,17 @@ function MessageResponseImpl({
   remend,
   ...props
 }: MessageResponseProps) {
+  const inReply = useAssistantReply()
+  const htmlEnabled = useChatHtmlEnabled() && inReply
+  const processHtml = useMemo(() => createChatHtmlProcessor(), [])
   const normalized = useMemo(
     () =>
       typeof children === "string"
-        ? normalizeMathDelimiters(children)
+        ? htmlEnabled
+          ? processHtml(children, mode === "streaming", normalizeMathDelimiters)
+          : normalizeMathDelimiters(children)
         : children,
-    [children]
+    [children, htmlEnabled, mode, processHtml]
   )
   const plugins = useStreamdownPlugins(
     typeof normalized === "string" ? normalized : undefined
diff --git a/src/components/ai-elements/rich-html.test.tsx b/src/components/ai-elements/rich-html.test.tsx
new file mode 100644
index 0000000000..c4f2c57cef
--- /dev/null
+++ b/src/components/ai-elements/rich-html.test.tsx
@@ -0,0 +1,255 @@
+import { act, fireEvent, render, screen } from "@testing-library/react"
+import { NextIntlClientProvider } from "next-intl"
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+import enMessages from "@/i18n/messages/en.json"
+import { resetHtmlPreviewCachesForTests } from "./html-code-preview"
+import { JsonRenderScope } from "./json-render-pre"
+import { MessageResponse } from "./message"
+
+vi.mock("next-themes", () => ({
+  useTheme: () => ({ resolvedTheme: "light" }),
+}))
+
+// Links route through link safety, which reads app settings; not under test.
+vi.mock("@/components/ai-elements/link-safety", () => ({
+  useStreamdownLinkSafety: () => ({ enabled: false }),
+}))
+
+function reply(text: string, streaming = false, assistant = true) {
+  const content = (
+    <MessageResponse
+      mode={streaming ? "streaming" : "static"}
+      parseIncompleteMarkdown={streaming}
+    >
+      {text}
+    </MessageResponse>
+  )
+  return (
+    <NextIntlClientProvider locale="en" messages={enMessages}>
+      {assistant ? <JsonRenderScope>{content}</JsonRenderScope> : content}
+    </NextIntlClientProvider>
+  )
+}
+
+beforeEach(() => {
+  localStorage.clear()
+  localStorage.setItem("workspace:chat-html-rendering", "true")
+  resetHtmlPreviewCachesForTests()
+})
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+})
+
+function reportHeight(frame: HTMLElement, height: number) {
+  act(() =>
+    window.dispatchEvent(
+      new MessageEvent("message", {
+        source: (frame as HTMLIFrameElement).contentWindow,
+        data: { type: "codeg-visualize:size", height },
+      })
+    )
+  )
+}
+
+describe("rich HTML in assistant replies", () => {
+  it("renders styled HTML between Markdown paragraphs without injecting it into the host", async () => {
+    const html =
+      '<style>.cards{display:grid;grid-template-columns:1fr 1fr}</style>\n<div class="cards"><div>A</div><div>B</div></div>'
+    const { container } = render(
+      reply(`Before **card**.\n\n${html}\n\nAfter card.`)
+    )
+    expect(screen.getByText("card")).toBeInTheDocument()
+    expect(screen.getByText("After card.")).toBeInTheDocument()
+    const frame = await screen.findByTitle("HTML preview")
+    expect(frame.getAttribute("srcdoc")).toContain(
+      "grid-template-columns:1fr 1fr"
+    )
+    expect(frame.getAttribute("srcdoc")).toContain('class="cards"')
+    expect(container.querySelector(".cards")).toBeNull()
+  })
+
+  it("shows HTML fences directly while preserving their source view", async () => {
+    render(reply("```html\n<div>Card</div>\n```"))
+    expect(await screen.findByTitle("HTML preview")).toBeInTheDocument()
+    fireEvent.click(screen.getByRole("button", { name: "Code" }))
+    expect(screen.queryByTitle("HTML preview")).toBeNull()
+    expect(screen.getByText("<div>Card</div>")).toBeInTheDocument()
+    expect(screen.queryByText("codeg-html")).toBeNull()
+  })
+
+  it("leaves HTML fences as code when the setting is disabled", () => {
+    localStorage.setItem("workspace:chat-html-rendering", "false")
+    render(reply("```html\n<div>Card</div>\n```"))
+    expect(screen.queryByTitle("HTML preview")).toBeNull()
+    expect(screen.queryByRole("button", { name: "Preview" })).toBeNull()
+  })
+
+  it("does not enable rich HTML for user messages", () => {
+    render(reply("```html\n<div>User content</div>\n```", false, false))
+    expect(screen.queryByTitle("HTML preview")).toBeNull()
+  })
+
+  it("waits for a complete fragment and keeps its frame when later prose arrives", async () => {
+    const { rerender } = render(
+      reply('<div style="display:flex"><p>First</p>', true)
+    )
+    expect(screen.queryByTitle("HTML preview")).toBeNull()
+    expect(screen.getByRole("status")).toBeInTheDocument()
+    const complete = '<div style="display:flex"><p>First</p></div>'
+    // Until the next block shows, another root could still join it.
+    rerender(reply(complete, true))
+    expect(screen.queryByTitle("HTML preview")).toBeNull()
+    rerender(reply(complete + "\n\nFollowing", true))
+    const frame = await screen.findByTitle("HTML preview")
+    const document = frame.getAttribute("srcdoc")
+    rerender(reply(complete + "\n\nFollowing **prose**.", true))
+    expect(screen.getByTitle("HTML preview")).toBe(frame)
+    expect(frame.getAttribute("srcdoc")).toBe(document)
+  })
+
+  it("brings a preview back as it was when the reply stops streaming", async () => {
+    const text = '<div style="display:flex"><p>First</p></div>\n\nAfter.'
+    const { rerender } = render(reply(text, true))
+    const frame = await screen.findByTitle("HTML preview")
+    const document = frame.getAttribute("srcdoc")
+    reportHeight(frame, 240)
+    fireEvent.click(screen.getByRole("button", { name: "Code" }))
+    fireEvent.click(screen.getByRole("button", { name: "Preview" }))
+    // A finished reply is a new tree: the preview mounts again, at once and
+    // at the height it measured — no "Generating", no default height.
+    rerender(reply(text))
+    expect(screen.queryByRole("status")).toBeNull()
+    const finished = screen.getByTitle("HTML preview")
+    expect(finished.getAttribute("srcdoc")).toBe(document)
+    expect(finished.style.height).toBe("240px")
+  })
+
+  it("keeps the reader's choice of view when the reply stops streaming", async () => {
+    const text = "<div>Card</div>\n\nAfter."
+    const { rerender } = render(reply(text, true))
+    await screen.findByTitle("HTML preview")
+    fireEvent.click(screen.getByRole("button", { name: "Code" }))
+    rerender(reply(text))
+    expect(screen.queryByTitle("HTML preview")).toBeNull()
+    expect(screen.getByRole("button", { name: "Code" })).toHaveAttribute(
+      "aria-pressed",
+      "true"
+    )
+  })
+
+  it("draws a finished reply the way it does without the setting", async () => {
+    const markdown = [
+      "مرحبا بكم في المشروع.",
+      "",
+      "Hello there.",
+      "",
+      "- عنصر أول",
+      "- عنصر ثان",
+      "",
+      "مرحبا `code here` بكم",
+      "",
+      "See [the docs][1].",
+      "",
+      "[1]: https://example.com/docs",
+    ].join("\n")
+    for (const enabled of ["false", "true"]) {
+      localStorage.setItem("workspace:chat-html-rendering", enabled)
+      const { container, unmount } = render(reply(markdown))
+      const dirOf = (start: string) =>
+        Array.from(container.querySelectorAll("p"))
+          .find((p) => p.textContent?.startsWith(start))
+          ?.getAttribute("dir")
+      expect(dirOf("مرحبا بكم")).toBe("rtl")
+      expect(dirOf("Hello")).toBe("ltr")
+      expect(container.querySelector("li")).toHaveAttribute("dir", "rtl")
+      expect(screen.getByText("code here")).toHaveAttribute("dir", "ltr")
+      expect(dirOf("See")).toBe("ltr")
+      expect(
+        Array.from(container.querySelectorAll("p")).some(
+          (p) => p.textContent === "See the docs."
+        )
+      ).toBe(true)
+      unmount()
+    }
+  })
+
+  it("leaves Markdown wrapped in HTML tags to Markdown", () => {
+    const { container } = render(
+      reply(
+        "Intro.\n\n<details>\n<summary>More</summary>\n\n- item **one**\n- item two\n\n</details>\n\nAfter."
+      )
+    )
+    expect(screen.queryByTitle("HTML preview")).toBeNull()
+    expect(container.querySelector("details summary")).toHaveTextContent("More")
+    const item = Array.from(container.querySelectorAll("li")).find((li) =>
+      li.textContent?.includes("one")
+    )
+    // Rendered as Markdown: bold, not literal asterisks.
+    expect(item?.textContent).toBe("item one")
+  })
+
+  it("previews where crypto.randomUUID is missing (plain-HTTP origins)", async () => {
+    const { getRandomValues } = globalThis.crypto
+    vi.stubGlobal("crypto", {
+      getRandomValues: getRandomValues.bind(globalThis.crypto),
+    })
+    render(reply("<div>Card</div>"))
+    const frame = await screen.findByTitle("HTML preview")
+    expect(frame.getAttribute("srcdoc")).toMatch(/script-src 'nonce-[\w-]+'/)
+  })
+
+  it("shows an agent's own codeg-html-pending fence as code once the reply is done", () => {
+    render(reply("```codeg-html-pending\n<div>x</div>\n```\n\nDone."))
+    expect(screen.queryByRole("status")).toBeNull()
+    expect(screen.getByText("<div>x</div>")).toBeInTheDocument()
+  })
+
+  it("does not activate incomplete HTML fences during streaming", () => {
+    render(reply("```html\n<div>Complete markup</div>", true))
+    expect(screen.queryByTitle("HTML preview")).toBeNull()
+    expect(screen.getByRole("status")).toBeInTheDocument()
+  })
+
+  it("executes only the host height reporter, never model scripts", async () => {
+    render(
+      reply(
+        '<div onclick="alert(1)"><script>window.MODEL_SCRIPT=1</script><style>.x{color:red}</style><p>Safe</p></div>'
+      )
+    )
+    const frame = await screen.findByTitle("HTML preview")
+    const doc = frame.getAttribute("srcdoc")!
+    expect(doc).not.toContain("MODEL_SCRIPT")
+    expect(doc).not.toContain("onclick")
+    expect(doc).toContain("script-src 'nonce-")
+    expect(doc).not.toContain("'unsafe-eval'")
+    expect(frame).toHaveAttribute("sandbox", "allow-scripts")
+    expect(frame).toHaveAttribute("referrerpolicy", "no-referrer")
+  })
+
+  it("ignores spoofed height messages and uses reports from its own frame", async () => {
+    render(reply("<div>Card</div>"))
+    const frame = (await screen.findByTitle(
+      "HTML preview"
+    )) as HTMLIFrameElement
+    const initialHeight = frame.style.height
+    act(() =>
+      window.dispatchEvent(
+        new MessageEvent("message", {
+          source: window,
+          data: { type: "codeg-visualize:size", height: 1000 },
+        })
+      )
+    )
+    expect(frame.style.height).toBe(initialHeight)
+    act(() =>
+      window.dispatchEvent(
+        new MessageEvent("message", {
+          source: frame.contentWindow,
+          data: { type: "codeg-visualize:size", height: 240 },
+        })
+      )
+    )
+    expect(frame.style.height).toBe("240px")
+  })
+})
diff --git a/src/components/message/codex-visualize-card.tsx b/src/components/message/codex-visualize-card.tsx
index 22d185d79d..d0addd7e88 100644
--- a/src/components/message/codex-visualize-card.tsx
+++ b/src/components/message/codex-visualize-card.tsx
@@ -37,6 +37,11 @@ import {
   type CodexVisualizeMode,
 } from "@/lib/codex-visualize"
 import { cn } from "@/lib/utils"
+import {
+  HTML_PREVIEW_SIZE_MESSAGE_TYPE as SIZE_MESSAGE_TYPE,
+  HTML_PREVIEW_SIZE_REPORTER as SIZE_REPORTER,
+  readHtmlPreviewTheme as readThemeOverrides,
+} from "@/lib/html-preview-frame"
 
 /**
  * One inline visualization from Codex's `visualize` skill: the referenced
@@ -79,7 +84,6 @@ const STATIC_DOCUMENT_HEIGHT = 480
 const COLLAPSED_MAX_HEIGHT = 640
 /** Backstop for "Show all": past this the frame scrolls instead of growing. */
 const MAX_FRAME_HEIGHT = 12000
-const SIZE_MESSAGE_TYPE = "codeg-visualize:size"
 
 const RESOURCE_SOURCES = [
   "blob:",
@@ -117,28 +121,6 @@ const FRAME_CSP = [
  */
 const FRAME_BASE = `<base href="about:srcdoc">`
 
-/** Names shared by the skill's contract and codeg's theme tokens. */
-const THEME_TOKENS = [
-  "background",
-  "foreground",
-  "card",
-  "card-foreground",
-  "popover",
-  "popover-foreground",
-  "primary",
-  "primary-foreground",
-  "secondary",
-  "secondary-foreground",
-  "muted",
-  "muted-foreground",
-  "accent",
-  "accent-foreground",
-  "destructive",
-  "border",
-  "input",
-  "ring",
-] as const
-
 /**
  * Used only when the Codex plugin's own stylesheet cannot be found. Supplies
  * the variable contract and the few utilities fragments lean on most; it does
@@ -214,32 +196,6 @@ const FRAME_PADDING = "1rem 1.25rem"
 const TRANSPARENT_CANVAS_CSS =
   ":root,body{background:transparent !important;background-color:transparent !important}"
 
-/**
- * Reports the content's height to the parent whenever it changes.
- *
- * Measured off the content boxes — the root's box (which holds `<body>`'s
- * margins, collapsed ones included) and `<body>`'s own overflow — never off
- * the root's `scrollHeight`, which does not drop below the frame's current
- * height and so could only ever grow the card. Nothing is reported before
- * there is a layout to measure. Content whose height follows the viewport
- * (`100vh` layouts) grows by exactly as much as the frame does; once a resize
- * shows that, the reporter falls silent and the frame keeps the height it last
- * asked for (the content scrolls), or every step of "Show all" would ask for
- * another — and chasing a mid-transition viewport would never settle either.
- */
-const SIZE_REPORTER = `<script>(()=>{
-const type=${JSON.stringify(SIZE_MESSAGE_TYPE)};
-let lastHeight=0,lastViewport=innerHeight,sent=0,coupled=false,queued=false;
-const measure=()=>{const d=document.documentElement,b=document.body;if(!b)return 0;const root=d.getBoundingClientRect().height,box=b.getBoundingClientRect().height;if(root===0&&box===0)return 0;const s=getComputedStyle(b);return Math.ceil(Math.max(root,Math.max(b.scrollHeight,box)+(parseFloat(s.marginTop)||0)+(parseFloat(s.marginBottom)||0)))};
-const send=(h)=>{if(!coupled&&h>0&&h!==sent){sent=h;parent.postMessage({type,height:h},"*")}};
-const update=()=>{queued=false;lastHeight=measure();lastViewport=innerHeight;send(lastHeight)};
-const schedule=()=>{if(!queued){queued=true;requestAnimationFrame(update)}};
-addEventListener("resize",()=>{const h=measure(),v=innerHeight;if(lastHeight>0&&lastViewport>0&&v>lastViewport&&h>v&&Math.abs(h-lastHeight-(v-lastViewport))<=1)coupled=true;lastHeight=h;lastViewport=v;send(h)});
-const ro=new ResizeObserver(schedule);ro.observe(document.documentElement);if(document.body)ro.observe(document.body);
-new MutationObserver(schedule).observe(document.documentElement,{subtree:true,childList:true,attributes:true,characterData:true});
-addEventListener("load",update);
-})();</script>`
-
 /**
  * The skill tells fragments to keep their state through `window.openai`
  * (`widgetState` / `setWidgetState`, `sendFollowUpMessage`…), so a fragment
@@ -336,23 +292,6 @@ export function resetCodexVisualizeAssetsForTests(): void {
   assetsPromise = null
 }
 
-/** Copy codeg's current theme tokens into the frame's variable contract. */
-function readThemeOverrides(): string {
-  if (typeof document === "undefined") return ""
-  const style = getComputedStyle(document.documentElement)
-  const decls: string[] = []
-  for (const token of THEME_TOKENS) {
-    const value = style.getPropertyValue(`--${token}`).trim()
-    if (value) decls.push(`--${token}:${value}`)
-  }
-  // The skill aliases its first chart series to `--primary`. codeg's primary
-  // is near-black on the neutral presets, which turned every series-1 bar
-  // and line black; keep the skill's own blue for charts while controls
-  // still follow codeg's primary.
-  decls.push("--viz-series-1:var(--blue)")
-  return `:root{${decls.join(";")}}`
-}
-
 function escapeClosingScript(source: string): string {
   return source.replace(/<\/script/gi, "<\\/script")
 }
diff --git a/src/components/settings/appearance-settings.tsx b/src/components/settings/appearance-settings.tsx
index 405409c3e0..add0a1ef76 100644
--- a/src/components/settings/appearance-settings.tsx
+++ b/src/components/settings/appearance-settings.tsx
@@ -48,6 +48,7 @@ import { PetManagerSection } from "./pet-manager-section"
 import { FontSettingsSection } from "./font-settings-section"
 import { WorkspaceBackgroundSection } from "./workspace-background-section"
 import { CustomStyleSection } from "./custom-style-section"
+import { ChatHtmlSettingsSection } from "./chat-html-settings"
 
 /**
  * 屏幕可用宽度（CSS px），用作聊天宽度滑块上限的依据——主窗口铺满屏幕时聊天列
@@ -295,6 +296,8 @@ export function AppearanceSettings() {
           </label>
         </section>
 
+        <ChatHtmlSettingsSection />
+
         {/* ===== Chat content width ===== */}
         <section className="rounded-xl border bg-card p-4 space-y-4">
           <div className="flex items-center gap-2">
diff --git a/src/components/settings/chat-html-settings.test.tsx b/src/components/settings/chat-html-settings.test.tsx
new file mode 100644
index 0000000000..26ce64ac70
--- /dev/null
+++ b/src/components/settings/chat-html-settings.test.tsx
@@ -0,0 +1,55 @@
+import { act, fireEvent, render, screen } from "@testing-library/react"
+import { NextIntlClientProvider } from "next-intl"
+import { beforeEach, describe, expect, it } from "vitest"
+import enMessages from "@/i18n/messages/en.json"
+import { resetHtmlPreviewCachesForTests } from "@/components/ai-elements/html-code-preview"
+import { JsonRenderScope } from "@/components/ai-elements/json-render-pre"
+import { MessageResponse } from "@/components/ai-elements/message"
+import { ChatHtmlSettingsSection } from "./chat-html-settings"
+
+beforeEach(() => {
+  localStorage.clear()
+  resetHtmlPreviewCachesForTests()
+})
+
+describe("聊天 HTML 设置联动", () => {
+  it("无需刷新就能开启和关闭当前聊天中的 HTML 渲染", async () => {
+    render(
+      <NextIntlClientProvider locale="en" messages={enMessages}>
+        <ChatHtmlSettingsSection />
+        <JsonRenderScope>
+          <MessageResponse>{"```html\n<div>Card</div>\n```"}</MessageResponse>
+        </JsonRenderScope>
+      </NextIntlClientProvider>
+    )
+    const toggle = screen.getByRole("switch", {
+      name: "Enable rich HTML rendering",
+    })
+    expect(toggle).not.toBeChecked()
+    expect(screen.queryByTitle("HTML preview")).toBeNull()
+    fireEvent.click(toggle)
+    expect(await screen.findByTitle("HTML preview")).toBeInTheDocument()
+    expect(toggle).toBeChecked()
+    fireEvent.click(toggle)
+    expect(screen.queryByTitle("HTML preview")).toBeNull()
+  })
+
+  it("其他窗口关闭开关后，当前预览立即卸载", async () => {
+    localStorage.setItem("workspace:chat-html-rendering", "true")
+    render(
+      <NextIntlClientProvider locale="en" messages={enMessages}>
+        <JsonRenderScope>
+          <MessageResponse>{"<div>Card</div>"}</MessageResponse>
+        </JsonRenderScope>
+      </NextIntlClientProvider>
+    )
+    await screen.findByTitle("HTML preview")
+    act(() => {
+      localStorage.setItem("workspace:chat-html-rendering", "false")
+      window.dispatchEvent(
+        new StorageEvent("storage", { key: "workspace:chat-html-rendering" })
+      )
+    })
+    expect(screen.queryByTitle("HTML preview")).toBeNull()
+  })
+})
diff --git a/src/components/settings/chat-html-settings.tsx b/src/components/settings/chat-html-settings.tsx
new file mode 100644
index 0000000000..965b513bbe
--- /dev/null
+++ b/src/components/settings/chat-html-settings.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import { CodeXml } from "lucide-react"
+import { useTranslations } from "next-intl"
+import { Switch } from "@/components/ui/switch"
+import { saveChatHtmlEnabled, useChatHtmlEnabled } from "@/lib/chat-html-prefs"
+
+export function ChatHtmlSettingsSection() {
+  const t = useTranslations("HtmlCodePreview")
+  const enabled = useChatHtmlEnabled()
+  return (
+    <section className="space-y-4 rounded-xl border bg-card p-4">
+      <div className="flex items-center gap-2">
+        <CodeXml className="h-4 w-4 text-muted-foreground" />
+        <h2 className="text-sm font-semibold">{t("settingsTitle")}</h2>
+      </div>
+      <p
+        id="chat-html-description"
+        className="text-xs leading-5 text-muted-foreground"
+      >
+        {t("settingsDescription")}
+      </p>
+      <label className="flex items-center gap-2">
+        <Switch
+          checked={enabled}
+          onCheckedChange={saveChatHtmlEnabled}
+          aria-describedby="chat-html-description"
+        />
+        <span className="text-xs text-muted-foreground">
+          {t("settingsEnable")}
+        </span>
+      </label>
+    </section>
+  )
+}
diff --git a/src/i18n/messages/ar.json b/src/i18n/messages/ar.json
index f806fbaa75..9c867e049e 100644
--- a/src/i18n/messages/ar.json
+++ b/src/i18n/messages/ar.json
@@ -1,4 +1,15 @@
 {
+  "HtmlCodePreview": {
+    "code": "الكود",
+    "preview": "معاينة",
+    "title": "معاينة HTML",
+    "generating": "جارٍ إنشاء HTML…",
+    "expand": "عرض الكل",
+    "collapse": "طي",
+    "settingsTitle": "عرض HTML في المحادثة",
+    "settingsDescription": "عرض بطاقات ومخططات HTML/CSS مكتفية ذاتياً ضمن ردود الذكاء الاصطناعي. تُحظر نصوص النموذج والموارد الخارجية.",
+    "settingsEnable": "تفعيل عرض HTML المنسق"
+  },
   "Language": {
     "followSystem": "اتباع النظام",
     "english": "الإنجليزية",
diff --git a/src/i18n/messages/de.json b/src/i18n/messages/de.json
index d51121cda1..0437750db0 100644
--- a/src/i18n/messages/de.json
+++ b/src/i18n/messages/de.json
@@ -1,4 +1,15 @@
 {
+  "HtmlCodePreview": {
+    "code": "Code",
+    "preview": "Vorschau",
+    "title": "HTML-Vorschau",
+    "generating": "HTML wird erstellt…",
+    "expand": "Alles anzeigen",
+    "collapse": "Einklappen",
+    "settingsTitle": "HTML-Darstellung im Chat",
+    "settingsDescription": "Eigenständige HTML/CSS-Karten und Diagramme direkt in KI-Antworten anzeigen. Modellskripte und externe Ressourcen werden blockiert.",
+    "settingsEnable": "Erweiterte HTML-Darstellung aktivieren"
+  },
   "Language": {
     "followSystem": "Systemsprache verwenden",
     "english": "Englisch",
diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json
index e7ccfdc4b8..c42ee39d61 100644
--- a/src/i18n/messages/en.json
+++ b/src/i18n/messages/en.json
@@ -1,4 +1,15 @@
 {
+  "HtmlCodePreview": {
+    "code": "Code",
+    "preview": "Preview",
+    "title": "HTML preview",
+    "generating": "Generating HTML…",
+    "expand": "Show all",
+    "collapse": "Collapse",
+    "settingsTitle": "Chat HTML rendering",
+    "settingsDescription": "Display self-contained HTML/CSS cards and diagrams directly in AI replies. Model scripts and external resources are blocked.",
+    "settingsEnable": "Enable rich HTML rendering"
+  },
   "Language": {
     "followSystem": "Follow System",
     "english": "English",
diff --git a/src/i18n/messages/es.json b/src/i18n/messages/es.json
index 48381e1edd..a42cbd5c69 100644
--- a/src/i18n/messages/es.json
+++ b/src/i18n/messages/es.json
@@ -1,4 +1,15 @@
 {
+  "HtmlCodePreview": {
+    "code": "Código",
+    "preview": "Vista previa",
+    "title": "Vista previa de HTML",
+    "generating": "Generando HTML…",
+    "expand": "Mostrar todo",
+    "collapse": "Contraer",
+    "settingsTitle": "Renderizado HTML en el chat",
+    "settingsDescription": "Muestra tarjetas y diagramas HTML/CSS autocontenidos en las respuestas de la IA. Se bloquean los scripts del modelo y los recursos externos.",
+    "settingsEnable": "Activar renderizado HTML enriquecido"
+  },
   "Language": {
     "followSystem": "Seguir el sistema",
     "english": "Inglés",
diff --git a/src/i18n/messages/fr.json b/src/i18n/messages/fr.json
index f3127c88ae..8d21720537 100644
--- a/src/i18n/messages/fr.json
+++ b/src/i18n/messages/fr.json
@@ -1,4 +1,15 @@
 {
+  "HtmlCodePreview": {
+    "code": "Code",
+    "preview": "Aperçu",
+    "title": "Aperçu HTML",
+    "generating": "Génération HTML…",
+    "expand": "Tout afficher",
+    "collapse": "Réduire",
+    "settingsTitle": "Rendu HTML dans le chat",
+    "settingsDescription": "Afficher des cartes et diagrammes HTML/CSS autonomes dans les réponses de l’IA. Les scripts du modèle et les ressources externes sont bloqués.",
+    "settingsEnable": "Activer le rendu HTML enrichi"
+  },
   "Language": {
     "followSystem": "Suivre le système",
     "english": "Anglais",
diff --git a/src/i18n/messages/ja.json b/src/i18n/messages/ja.json
index fa8151e5fe..3d6b19ede5 100644
--- a/src/i18n/messages/ja.json
+++ b/src/i18n/messages/ja.json
@@ -1,4 +1,15 @@
 {
+  "HtmlCodePreview": {
+    "code": "コード",
+    "preview": "プレビュー",
+    "title": "HTML プレビュー",
+    "generating": "HTML を生成中…",
+    "expand": "すべて表示",
+    "collapse": "折りたたむ",
+    "settingsTitle": "チャットの HTML 表示",
+    "settingsDescription": "AI の返信内に自己完結した HTML/CSS カードや図を表示します。モデルのスクリプトと外部リソースはブロックされます。",
+    "settingsEnable": "リッチ HTML 表示を有効化"
+  },
   "Language": {
     "followSystem": "システムに従う",
     "english": "英語",
diff --git a/src/i18n/messages/ko.json b/src/i18n/messages/ko.json
index fdfc6ed8d3..2b00d1677a 100644
--- a/src/i18n/messages/ko.json
+++ b/src/i18n/messages/ko.json
@@ -1,4 +1,15 @@
 {
+  "HtmlCodePreview": {
+    "code": "코드",
+    "preview": "미리 보기",
+    "title": "HTML 미리 보기",
+    "generating": "HTML 생성 중…",
+    "expand": "모두 표시",
+    "collapse": "접기",
+    "settingsTitle": "채팅 HTML 렌더링",
+    "settingsDescription": "AI 응답에 자체 포함된 HTML/CSS 카드와 도표를 표시합니다. 모델 스크립트와 외부 리소스는 차단됩니다.",
+    "settingsEnable": "리치 HTML 렌더링 사용"
+  },
   "Language": {
     "followSystem": "시스템 설정 따름",
     "english": "영어",
diff --git a/src/i18n/messages/pt.json b/src/i18n/messages/pt.json
index 1ff46cdc23..6d0164a15e 100644
--- a/src/i18n/messages/pt.json
+++ b/src/i18n/messages/pt.json
@@ -1,4 +1,15 @@
 {
+  "HtmlCodePreview": {
+    "code": "Código",
+    "preview": "Prévia",
+    "title": "Prévia de HTML",
+    "generating": "Gerando HTML…",
+    "expand": "Mostrar tudo",
+    "collapse": "Recolher",
+    "settingsTitle": "Renderização HTML no chat",
+    "settingsDescription": "Mostra cartões e diagramas HTML/CSS autocontidos nas respostas da IA. Scripts do modelo e recursos externos são bloqueados.",
+    "settingsEnable": "Ativar renderização HTML avançada"
+  },
   "Language": {
     "followSystem": "Seguir o sistema",
     "english": "Inglês",
diff --git a/src/i18n/messages/zh-CN.json b/src/i18n/messages/zh-CN.json
index f22148e57a..212b0e7ebc 100644
--- a/src/i18n/messages/zh-CN.json
+++ b/src/i18n/messages/zh-CN.json
@@ -1,4 +1,15 @@
 {
+  "HtmlCodePreview": {
+    "code": "代码",
+    "preview": "预览",
+    "title": "HTML 预览",
+    "generating": "正在生成 HTML…",
+    "expand": "展开全部",
+    "collapse": "收起",
+    "settingsTitle": "聊天 HTML 渲染",
+    "settingsDescription": "在 AI 回复正文中直接展示自包含的 HTML/CSS 卡片和图表，不运行模型脚本或加载外部资源。",
+    "settingsEnable": "启用富 HTML 渲染"
+  },
   "Language": {
     "followSystem": "跟随系统",
     "english": "英语",
diff --git a/src/i18n/messages/zh-TW.json b/src/i18n/messages/zh-TW.json
index 328bf86a0f..882cba413d 100644
--- a/src/i18n/messages/zh-TW.json
+++ b/src/i18n/messages/zh-TW.json
@@ -1,4 +1,15 @@
 {
+  "HtmlCodePreview": {
+    "code": "程式碼",
+    "preview": "預覽",
+    "title": "HTML 預覽",
+    "generating": "正在產生 HTML…",
+    "expand": "展開全部",
+    "collapse": "收合",
+    "settingsTitle": "聊天 HTML 算繪",
+    "settingsDescription": "在 AI 回覆中直接顯示自包含的 HTML/CSS 卡片與圖表，不執行模型腳本或載入外部資源。",
+    "settingsEnable": "啟用豐富 HTML 算繪"
+  },
   "Language": {
     "followSystem": "跟隨系統",
     "english": "英文",
diff --git a/src/lib/chat-html-document.test.ts b/src/lib/chat-html-document.test.ts
new file mode 100644
index 0000000000..2a927473fa
--- /dev/null
+++ b/src/lib/chat-html-document.test.ts
@@ -0,0 +1,54 @@
+import { describe, expect, it } from "vitest"
+import { buildChatHtmlDocument } from "./chat-html-document"
+
+const options = {
+  nonce: "test-nonce",
+  dark: true,
+  theme: ":root{--foreground:#eee}",
+}
+
+describe("聊天 HTML 文档隔离", () => {
+  it("保留 CSS、SVG 和文档属性，剥离脚本、事件、嵌入和跳转", async () => {
+    const doc = await buildChatHtmlDocument(
+      '<html lang="zh" class="theme"><head><meta http-equiv="refresh" content="0;url=https://example.com"><base href="https://example.com"><style>.x{display:flex}</style></head><body class="cards" onload="attack()"><div onclick="attack()"><script>attack()</script><iframe srcdoc="attack"></iframe><a href="javascript:attack()">A</a><svg><path d="M0 0" /></svg></div></body></html>',
+      options
+    )
+    expect(doc).toContain('lang="zh"')
+    expect(doc).toContain('class="cards"')
+    expect(doc).toContain(".x{display:flex}")
+    expect(doc).toContain("<svg>")
+    expect(doc).not.toContain("attack")
+    expect(doc).not.toContain("https://example.com")
+    expect(doc.match(/<script/g)).toHaveLength(1)
+    expect(doc).toContain("script-src 'nonce-test-nonce'")
+    expect(doc).toContain('nonce="test-nonce"')
+    expect(doc).not.toContain("'unsafe-eval'")
+  })
+
+  it("把主题默认值放在作者 CSS 之前，且不被 CSS 中的伪结束标签误导", async () => {
+    const doc = await buildChatHtmlDocument(
+      '<div><style>.x::before{content:"</head></body>"}body{margin:20px}</style><p>A</p></div>',
+      options
+    )
+    const template = document.createElement("template")
+    template.innerHTML = doc
+    const styles = [...template.content.querySelectorAll("style")]
+    expect(styles[0].textContent).toContain("--foreground:#eee")
+    expect(styles[1].textContent).toContain('content:"</head></body>"')
+    expect(
+      template.content.querySelector("script")?.getAttribute("nonce")
+    ).toBe("test-nonce")
+  })
+
+  it("剥离 SVG 的 xlink:href 和用动画写入的链接，保留指向文档自身的引用", async () => {
+    const doc = await buildChatHtmlDocument(
+      '<svg xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="g"/><path id="p" d="M0 0"/></defs><a xlink:href="https://attack.example/x"><text>A</text></a><a><set attributeName="href" to="https://attack.example/y"/><animate attributeName="xlink:href" values="https://attack.example/z"/><text>B</text></a><use href="#p"/><use xlink:href="#p"/><rect fill="url(#g)"/></svg><a href="#top">Top</a>',
+      options
+    )
+    expect(doc).not.toContain("attack.example")
+    expect(doc).not.toMatch(/<set|<animate/)
+    expect(doc).toContain('<use href="#p">')
+    expect(doc).toContain('<use xlink:href="#p">')
+    expect(doc).toContain('<a href="#top">')
+  })
+})
diff --git a/src/lib/chat-html-document.ts b/src/lib/chat-html-document.ts
new file mode 100644
index 0000000000..c2945c96be
--- /dev/null
+++ b/src/lib/chat-html-document.ts
@@ -0,0 +1,36 @@
+import {
+  inlineHtmlResources,
+  withHtmlPreviewHead,
+  withSandboxCsp,
+} from "./html-preview-inline"
+import { htmlPreviewSizeReporter } from "./html-preview-frame"
+
+/** 复用文件预览的惰性解析与 CSP；模型脚本被移除，只有带随机 nonce 的高度桥接可执行。 */
+export async function buildChatHtmlDocument(
+  source: string,
+  { nonce, dark, theme }: { nonce: string; dark: boolean; theme: string }
+): Promise<string> {
+  const html = await inlineHtmlResources(source, {
+    fileDir: "",
+    folderPath: "",
+    maxInlineBytes: 0,
+    stripActiveContent: true,
+    readFileBase64: async () => {
+      throw new Error("聊天 HTML 不读取本地资源")
+    },
+  })
+  const themed = withHtmlPreviewHead(
+    html,
+    `<style>
+:root{color-scheme:${dark ? "dark" : "light"}}
+html,body{margin:0;background:transparent;color:var(--foreground,${dark ? "#fafafa" : "#1a1c1f"});font:14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
+*,*::before,*::after{box-sizing:border-box}
+${theme}
+</style>`
+  )
+  const withCsp = withSandboxCsp(themed, { reporterNonce: nonce })
+  const end = withCsp.lastIndexOf("</body>")
+  return (
+    withCsp.slice(0, end) + htmlPreviewSizeReporter(nonce) + withCsp.slice(end)
+  )
+}
diff --git a/src/lib/chat-html-markdown.test.ts b/src/lib/chat-html-markdown.test.ts
new file mode 100644
index 0000000000..746189689c
--- /dev/null
+++ b/src/lib/chat-html-markdown.test.ts
@@ -0,0 +1,229 @@
+import { describe, expect, it } from "vitest"
+import { normalizeMathDelimiters } from "@/components/ai-elements/message"
+import { createChatHtmlProcessor } from "./chat-html-markdown"
+
+describe("聊天 HTML 片段识别", () => {
+  it("按顶层 Markdown AST 识别 HTML，保留前后正文和内部空行", () => {
+    const source =
+      'Before.\n\n<div style="display:grid">\n\n<p>A</p>\n\n</div>\n\nAfter.'
+    const result = createChatHtmlProcessor()(source, false)
+    expect(result).toContain("Before.")
+    expect(result).toContain("After.")
+    expect(result).toContain("```codeg-html\n<div")
+    expect(result).toContain("\n\n<p>A</p>\n\n</div>")
+  })
+
+  it("将前置 style 与其后的根元素放在同一个片段", () => {
+    const result = createChatHtmlProcessor()(
+      '<style>.x { color:red }</style>\n\n<div class="x">A</div>',
+      false
+    )
+    expect(result.match(/```codeg-html\n/g)).toHaveLength(1)
+    expect(result).toContain(
+      '<style>.x { color:red }</style>\n\n<div class="x">A</div>'
+    )
+  })
+
+  it.each([
+    "```text\n<div>Example</div>\n```",
+    "An inline `<div>Example</div>`.",
+    "Some <span>inline HTML</span> text.",
+    "    <div>Indented code</div>",
+  ])("不重写普通代码和行内 HTML：%s", (source) => {
+    expect(createChatHtmlProcessor()(source, false)).toBe(source)
+  })
+
+  it("正确跳过注释、属性中的尖括号和 CSS 原始文本", () => {
+    const source =
+      '<!-- <div> -->\n<style>.x::before{content:"</div>"}</style>\n<div title="a > b"><svg><path d="M0 0" /></svg><br>A</div>'
+    const result = createChatHtmlProcessor()(source, false)
+    expect(result).toContain("```codeg-html\n")
+    expect(result).toContain(source)
+  })
+
+  it("流式内容不完整时使用等待状态，结束后保留源码", () => {
+    const source = '<div class="card"><p>Partial</p>'
+    const process = createChatHtmlProcessor()
+    expect(process(source, true)).toContain("```codeg-html-pending\n")
+    expect(process(source, false)).toContain("```codeg-html-source\n")
+  })
+
+  it("完整前缀不受后续 HTML 和 Markdown 追加影响，编辑历史内容时重置缓存", () => {
+    const process = createChatHtmlProcessor()
+    const first = process("<div>First</div>\n\nTail", true)
+    expect(first).toContain("```codeg-html\n<div>First</div>\n```")
+    expect(process("<div>First</div>\n\nTail.", true)).toBe(first + ".")
+    const changed = process("<div>Changed</div>", false)
+    expect(changed).toContain("Changed")
+    expect(changed).not.toContain("First")
+  })
+
+  it("片段在其后出现内容前仍可能接上同一 HTML 块的根元素，因此保持等待", () => {
+    const process = createChatHtmlProcessor()
+    const style = "<style>.c{color:red}</style>\n"
+    expect(process(style + '<div class="c">A</div>', true)).toContain(
+      "```codeg-html-pending\n"
+    )
+    expect(process(style + '<div class="c">A</div>\n', true)).toContain(
+      "```codeg-html-pending\n"
+    )
+    const whole = style + '<div class="c">A</div>\n<div class="c">B</div>'
+    const result = process(whole + "\n\nAfter.", true)
+    expect(result.match(/```codeg-html\n/g)).toHaveLength(1)
+    expect(result).toContain("```codeg-html\n" + whole + "\n```")
+  })
+
+  it("使用足够长的围栏，HTML 内部的反引号不会逃逸成主页面内容", () => {
+    const result = createChatHtmlProcessor()(
+      "<div>```\n<script>no()</script></div>",
+      false
+    )
+    expect(result).toContain("````codeg-html\n")
+    expect(result.trimEnd().endsWith("````")).toBe(true)
+  })
+
+  it("完整页面也作为单个 HTML 片段处理", () => {
+    const source =
+      "<!doctype html>\n<html><head><style>body{color:red}</style></head><body><p>A</p></body></html>"
+    expect(createChatHtmlProcessor()(source, false)).toContain(
+      "```codeg-html\n" + source
+    )
+  })
+
+  it("同一原始 HTML 块中的相邻根元素都被保留在预览内", () => {
+    const html =
+      '<style>.x{color:red}</style>\n<div class="x">A</div>\n<div class="x">B</div>'
+    const result = createChatHtmlProcessor()(html, false)
+    expect(result).toContain('class="x">B</div>\n```')
+    expect(result.match(/```codeg-html\n/g)).toHaveLength(1)
+  })
+
+  it("单独的 style 不吞掉其后的 Markdown 正文", () => {
+    const result = createChatHtmlProcessor()(
+      "<style>.x{color:red}</style>\n\nNormal **prose**.",
+      false
+    )
+    expect(result).toContain("</style>\n```\n\nNormal **prose**.")
+  })
+
+  it("同一 HTML 块中第二个根元素未闭合时不提前渲染", () => {
+    const result = createChatHtmlProcessor()("<div>A</div>\n<div>B", true)
+    expect(result).toContain("```codeg-html-pending\n")
+  })
+
+  it("Markdown 预处理只影响正文，不改写 HTML 的原始字节", () => {
+    const html = '<div title="literal">```\\(inside\\)</div>'
+    const result = createChatHtmlProcessor()(
+      "Outside\\(x\\)\n\n" + html,
+      false,
+      (text) => text.split("\\(").join("$")
+    )
+    expect(result).toContain("Outside$x\\)")
+    expect(result).toContain(html)
+  })
+
+  it.each([
+    [
+      "Markdown 包在标签里（<details> 里的列表）",
+      "Intro.\n\n<details>\n<summary>More</summary>\n\n- item **one**\n- item two\n\n</details>\n\nAfter.",
+    ],
+    [
+      "根元素一直没有闭合，后面是 Markdown",
+      '<div align="center">\n\n**Title**\n\n- a\n- b\n\n## Heading\n\nMore text.',
+    ],
+    [
+      "同一块中第二个根元素没有闭合，后面是 Markdown",
+      "<div>A</div>\n<p>B\n\nMore **markdown** here.\n\n## Heading",
+    ],
+    [
+      "闭合标签落在段落中间",
+      "<div>\nstart\n\nsome *md* paragraph </div> trailing words\n\nNext para",
+    ],
+  ])("标签跨过 Markdown 才闭合时不当作片段：%s", (_, source) => {
+    for (const streaming of [true, false])
+      expect(createChatHtmlProcessor()(source, streaming)).toBe(source)
+  })
+
+  it("块内空行后缩进四格的 HTML 仍属同一片段", () => {
+    const html =
+      '<div class="grid">\n    <div class="card">A</div>\n\n    <div class="card">B</div>\n</div>'
+    const result = createChatHtmlProcessor()(html + "\n\nAfter.", false)
+    expect(result).toBe("```codeg-html\n" + html + "\n```\n\nAfter.")
+  })
+
+  it("闭合的 HTML 围栏即使不是单个根元素也直接预览，流式中不再显示等待", () => {
+    const source = "```html\nHello <b>x</b>\n```\n\nMore prose"
+    for (const streaming of [true, false])
+      expect(createChatHtmlProcessor()(source, streaming)).toBe(
+        "```codeg-html\nHello <b>x</b>\n```\n\nMore prose"
+      )
+  })
+
+  it("围栏的闭合行写完之前仍在等待；被截断的围栏只在有完整根元素时预览", () => {
+    const process = createChatHtmlProcessor()
+    expect(process("```html\n<p>x</p>\n```", true)).toContain(
+      "codeg-html-pending"
+    )
+    expect(process("```html\n<p>x</p>\n```\n", true)).toContain(
+      "```codeg-html\n<p>x</p>\n```"
+    )
+    expect(createChatHtmlProcessor()("```html\nHello <b", false)).toContain(
+      "codeg-html-source"
+    )
+  })
+
+  it("先到的等待片段不会被后面完成的片段一起封存", () => {
+    const source =
+      "```html\nHello<br>world\n```\n\n```html\n<div>Complete</div>\n```"
+    const process = createChatHtmlProcessor()
+    for (let i = 1; i <= source.length; i++) process(source.slice(0, i), true)
+    const done = process(source, false)
+    expect(done).not.toContain("codeg-html-pending")
+    expect(done.match(/```codeg-html\n/g)).toHaveLength(2)
+  })
+
+  it("CRLF 换行的围栏在流式中也能闭合", () => {
+    const process = createChatHtmlProcessor()
+    process("```html\r\n<p>x</p>\r\n", true)
+    expect(process("```html\r\n<p>x</p>\r\n```\r\n\r\nNext", true)).toContain(
+      "```codeg-html\n"
+    )
+  })
+
+  it("逐字流式的结果在结束时与一次性处理完全相同", () => {
+    const documents = [
+      'Intro **text** with `Map<string, T>`.\n\n<style>.c{color:red}</style>\n<div class="c">A</div>\n<div class="c">B</div>\n\nMiddle \\(a+b\\) here.\n\n```html\n<p>Fence</p>\n```\n\n<details>\n<summary>S</summary>\n\n- item\n\n</details>\n\n```tsx\n<Button />\n  <div>x</div>\n```\n\nEnd \\[c\\].',
+      '<div align="center">\n\n**Title**\n\n</div>\n\nText <b>x</b>\n\n<table><tr><td>1</td></tr></table>\n',
+      "```html\nHello<br>world\n```\n\n```html\n<div>Complete</div>\n```",
+      '<div class="grid">\n    <div class="card">A</div>\n\n    <div class="card">B</div>\n</div>\n\n<section>\n<p>one</p>\n\n<p>two</p>\n</section>',
+      // Display math across a blank line: the Markdown between fragments is
+      // transformed a whole stretch at a time, however it arrived.
+      "\\[\nx\n<a\n\nb\n\\]\n\nAfter.",
+    ]
+    for (const document of documents) {
+      for (const transform of [undefined, normalizeMathDelimiters]) {
+        const process = createChatHtmlProcessor()
+        for (let i = 1; i <= document.length; i++)
+          process(document.slice(0, i), true, transform)
+        expect(process(document, false, transform)).toBe(
+          createChatHtmlProcessor()(document, false, transform)
+        )
+      }
+    }
+  })
+
+  it("文本被改写（不是追加）时重新处理，不沿用旧的结论", () => {
+    const process = createChatHtmlProcessor()
+    process("<div>\n<p>Card</p>\n\nold", true)
+    const edited = "<div>\n<p>Card</p>\n\n</div>"
+    expect(process(edited, false)).toBe(
+      createChatHtmlProcessor()(edited, false)
+    )
+    expect(process(edited, false)).toContain("```codeg-html\n<div>")
+
+    process("Intro\n\n```html\n<div>", true)
+    expect(process("Intro\n\nPlain prose now.", true)).toBe(
+      "Intro\n\nPlain prose now."
+    )
+  })
+})
diff --git a/src/lib/chat-html-markdown.ts b/src/lib/chat-html-markdown.ts
new file mode 100644
index 0000000000..68c8e7d0b3
--- /dev/null
+++ b/src/lib/chat-html-markdown.ts
@@ -0,0 +1,385 @@
+import type { RootContent } from "mdast"
+import { fromMarkdown, type Options } from "mdast-util-from-markdown"
+
+const BLOCK_START =
+  /^(?:\s|<!--[\s\S]*?-->|<!doctype[^>]*>)*<(?:html|style|div|section|article|aside|main|header|footer|nav|figure|details|table|ul|ol|dl|blockquote|pre|svg|p|h[1-6])(?:\s|>)/i
+const LONE_STYLE = /^(?:\s|<!--[\s\S]*?-->)*<style(?:\s|>)/i
+const VOID = new Set(
+  "area base br col embed hr img input link meta param source track wbr".split(
+    " "
+  )
+)
+const RAW = new Set(
+  "style script textarea title xmp iframe noembed noframes".split(" ")
+)
+
+/**
+ * A line that can open a top-level HTML block (at most three spaces, then `<`)
+ * or an HTML fence. Text without one holds nothing this file rewrites, so it
+ * skips the Markdown parse — run on every streamed delta of a long reply, that
+ * parse is what the rewrite costs (a `Map<string, T>` in prose or code is
+ * enough to need it otherwise).
+ */
+const CANDIDATE_LINE = /(?:^|\n) {0,3}(?:<[!a-z]|(?:`{3,}|~{3,})[ \t]*htm)/i
+
+/**
+ * Block structure only. Which top-level blocks are HTML or code, and where
+ * they start and end, is settled before CommonMark looks at any inline content,
+ * so the inline constructs — most of the parse — can stay off.
+ */
+const BLOCKS_ONLY: Options = {
+  extensions: [
+    {
+      disable: {
+        null: [
+          "attention",
+          "autolink",
+          "characterEscape",
+          "characterReference",
+          "codeText",
+          "hardBreakEscape",
+          "htmlText",
+          "labelEnd",
+          "labelStartImage",
+          "labelStartLink",
+        ],
+      },
+    },
+  ],
+}
+
+const FENCE_OPEN = /^ {0,3}(`{3,}|~{3,})/
+const LINE_DONE = /[ \t]*\r?\n/y
+const NON_SPACE = /\S/g
+
+const LANGUAGE = {
+  complete: "codeg-html",
+  pending: "codeg-html-pending",
+  source: "codeg-html-source",
+} as const
+
+/** What CommonMark makes of a line indented four spaces after a blank line —
+ *  inside an HTML element written that way, still part of the element. */
+function isIndentedCode(block: RootContent, text: string): boolean {
+  const start = block.position?.start.offset
+  return (
+    block.type === "code" &&
+    start !== undefined &&
+    !FENCE_OPEN.test(text.slice(start, start + 8))
+  )
+}
+
+/** Whether the line `at` is on has ended: while streaming it may still grow. */
+function lineDone(text: string, at: number): boolean {
+  LINE_DONE.lastIndex = at
+  return LINE_DONE.test(text)
+}
+
+/**
+ * Whether the text after `at` already shows the block that comes next. While
+ * streaming, a line still arriving that opens with `<` may yet turn out to be
+ * HTML and belong with what precedes it; anything else shows it does not.
+ */
+function shownAfter(text: string, at: number, streaming: boolean): boolean {
+  NON_SPACE.lastIndex = at
+  const next = NON_SPACE.exec(text)
+  if (!next) return false
+  return !streaming || next[0] !== "<" || text.includes("\n", next.index)
+}
+
+/** A fence's content so far: everything after its opening line. */
+function fenceBody(text: string): string {
+  const lineEnd = text.indexOf("\n")
+  return lineEnd === -1 ? "" : text.slice(lineEnd + 1)
+}
+
+/** A line that closes a fence opened with `marker`. */
+function fenceCloser(marker: string): RegExp {
+  return new RegExp(
+    `\\n {0,3}${marker[0]}{${marker.length},}[ \\t]*\\r?(?:\\n|$)`
+  )
+}
+
+/**
+ * 找到一个完整根元素的末尾。引号、注释和原始文本元素中的尖括号不参与配对。
+ * 前置 style 属于紧随其后的可视化根元素；不把半个流式元素交给浏览器自动补全。
+ */
+function htmlEnd(source: string, start: number): number | null {
+  const stack: string[] = []
+  let visual = false
+  let cursor = start
+  while (cursor < source.length) {
+    const lt = source.indexOf("<", cursor)
+    if (lt === -1) return null
+    if (stack.length === 0 && source.slice(cursor, lt).trim()) return null
+    if (source.startsWith("<!--", lt)) {
+      const end = source.indexOf("-->", lt + 4)
+      if (end === -1) return null
+      cursor = end + 3
+      continue
+    }
+    const tag = /^<(\/)?([a-z][a-z0-9:-]*)(?=[\s/>])/i.exec(source.slice(lt))
+    if (!tag) {
+      if (/^<!doctype\b/i.test(source.slice(lt))) {
+        const end = source.indexOf(">", lt)
+        if (end === -1) return null
+        cursor = end + 1
+      } else {
+        cursor = lt + 1
+      }
+      continue
+    }
+    const name = tag[2].toLowerCase()
+    let end = lt + tag[0].length
+    let quote = ""
+    for (; end < source.length; end++) {
+      const char = source[end]
+      if (quote) {
+        if (char === quote) quote = ""
+      } else if (char === '"' || char === "'") {
+        quote = char
+      } else if (char === ">") break
+    }
+    if (end === source.length) return null
+    cursor = end + 1
+    if (tag[1]) {
+      const index = stack.lastIndexOf(name)
+      if (index === -1) return null
+      stack.length = index
+      if (visual && stack.length === 0) return cursor
+    } else {
+      if (stack.length === 0 && name !== "style" && name !== "script")
+        visual = true
+      if (VOID.has(name) || /\/\s*>$/.test(source.slice(lt, cursor))) {
+        if (visual && stack.length === 0) return cursor
+        continue
+      }
+      stack.push(name)
+      if (RAW.has(name)) {
+        const close = new RegExp(`</${name}(?=[\\s/>])`, "i").exec(
+          source.slice(cursor)
+        )
+        if (!close) return null
+        cursor += close.index
+      }
+    }
+  }
+  return null
+}
+
+function fence(source: string, language: string): string {
+  let longest = 2
+  for (const match of source.matchAll(/`+/g))
+    longest = Math.max(longest, match[0].length)
+  const marker = "`".repeat(longest + 1)
+  return `${marker}${language}\n${source}\n${marker}`
+}
+
+/**
+ * 每条回复各用一个处理器。流式追加时，已经定稿的结构——完整的 HTML 片段、仍在生成的
+ * 片段之前的内容，以及最后一个顶层块之前的全部内容——不再重新解析，只解析其后的尾部；
+ * 尾部若只是一个尚未闭合的代码围栏，就只留意它的闭合行。正文的 `transform` 仍按片段
+ * 之间的整段执行（与一次性处理相同），所以只缓存到最后一个定稿片段为止的输出。
+ */
+export function createChatHtmlProcessor() {
+  // The whole text of the last call: anything but an append starts over.
+  let previous = ""
+  // How much of the text is settled, and its output up to the end of the last
+  // settled fragment. The settled text after that fragment, `sealedProse`, is
+  // kept raw: the Markdown around fragments is transformed a whole stretch at
+  // a time, and that stretch is still open.
+  let sealedSource = ""
+  let sealedOutput = ""
+  let sealedProse = ""
+  // The unsettled text is one fence still open: until a line that could close
+  // it arrives, nothing in it can change how it parses.
+  let openFence: { closer: RegExp; html: boolean } | null = null
+  return (
+    source: string,
+    streaming: boolean,
+    transform: (markdown: string) => string = (text) => text
+  ): string => {
+    if (!source.startsWith(previous)) {
+      sealedSource = ""
+      sealedOutput = ""
+      sealedProse = ""
+      openFence = null
+    }
+    previous = source
+    const tail = source.slice(sealedSource.length)
+    if (openFence && streaming && !openFence.closer.test(tail)) {
+      return openFence.html
+        ? sealedOutput +
+            transform(sealedProse) +
+            fence(fenceBody(tail), LANGUAGE.pending)
+        : sealedOutput + transform(sealedProse + tail)
+    }
+    openFence = null
+    if (!CANDIDATE_LINE.test(tail))
+      return sealedOutput + transform(sealedProse + tail)
+    const blocks = fromMarkdown(tail, BLOCKS_ONLY).children
+    let result = sealedOutput
+    // The Markdown since the last fragment, not yet transformed.
+    let prose = sealedProse
+    let cursor = 0
+    // What this call settles: up to `sealedEnd` in `tail`.
+    let sealedEnd = 0
+    let nextOutput = sealedOutput
+    let nextProse = sealedProse
+    for (let index = 0; index < blocks.length; index++) {
+      const node = blocks[index]
+      const start = node.position?.start.offset
+      const nodeEnd = node.position?.end.offset
+      if (start === undefined || nodeEnd === undefined || start < cursor)
+        continue
+      const raw = node.type === "html" && BLOCK_START.test(tail.slice(start))
+      const code = node.type === "code" && /^html?$/i.test(node.lang ?? "")
+      if (!raw && !code) continue
+      let end: number
+      let html: string
+      let state: keyof typeof LANGUAGE
+      // Whether later text can no longer change this fragment.
+      let final: boolean
+      if (code) {
+        html = node.value
+        end = nodeEnd
+        const original = tail.slice(start, end)
+        const marker = FENCE_OPEN.exec(original)?.[1]
+        const closed =
+          marker !== undefined &&
+          new RegExp(`\\n[ \\t]*${marker[0]}{${marker.length},}[ \\t]*$`).test(
+            original
+          )
+        // Closed, and its closing line ended: until then it may still grow.
+        final = closed && lineDone(tail, end)
+        const htmlStart = html.search(/\S/)
+        // A closed fence is what its author meant to show. One cut off
+        // unclosed (the reply ended) shows only once a whole root is in it.
+        state =
+          streaming && !final
+            ? "pending"
+            : htmlStart !== -1 && (closed || htmlEnd(html, htmlStart) !== null)
+              ? "complete"
+              : "source"
+      } else {
+        // A fragment is the HTML blocks in a row this one starts (with the
+        // indented-code blocks blank lines make of its indented lines): its
+        // root has to close inside them. Tags that close only across Markdown
+        // wrap Markdown — a <details> around a list — and are not a fragment.
+        let last = index
+        while (
+          last + 1 < blocks.length &&
+          (blocks[last + 1].type === "html" ||
+            isIndentedCode(blocks[last + 1], tail))
+        )
+          last++
+        const run = blocks.slice(index, last + 1)
+        const runEnd = run[run.length - 1].position?.end.offset ?? nodeEnd
+        const scope = tail.slice(0, runEnd)
+        // Where the block holding `at` ends.
+        const reach = (at: number) => {
+          let limit = nodeEnd
+          for (const block of run) {
+            if ((block.position?.start.offset ?? Infinity) < at)
+              limit = Math.max(limit, block.position?.end.offset ?? 0)
+          }
+          return limit
+        }
+        let found = htmlEnd(scope, start)
+        end = found ?? tail.length
+        // style 和可视化根元素可能分属两个 AST 节点；把同一 HTML 块的相邻根元素一起交给预览。
+        while (found !== null) {
+          const limit = reach(end)
+          if (end >= limit) break
+          const next =
+            end + (/^\s*/.exec(tail.slice(end, limit))?.[0].length ?? 0)
+          if (next >= limit || !BLOCK_START.test(tail.slice(next))) {
+            end = limit
+            break
+          }
+          found = htmlEnd(scope, next)
+          if (found !== null) end = found
+        }
+        // The next block, once known, means the block a fragment ends in has
+        // ended; until then another root may still join the fragment, and a
+        // root that has not closed may still close.
+        final = shownAfter(
+          tail,
+          found === null ? runEnd : reach(end),
+          streaming
+        )
+        if (found !== null && (final || !streaming)) {
+          state = "complete"
+        } else if (!final) {
+          // The fragment ends the text so far: still arriving, or cut off.
+          state = streaming ? "pending" : "source"
+          end = tail.length
+        } else if (
+          LONE_STYLE.test(tail.slice(start)) &&
+          !BLOCK_START.test(tail.slice(nodeEnd))
+        ) {
+          state = "source"
+          end = nodeEnd
+        } else {
+          continue
+        }
+        html = tail.slice(start, end)
+      }
+      prose += tail.slice(cursor, start)
+      if (state === "pending" && start > sealedEnd) {
+        // What comes before a fragment still arriving is settled.
+        sealedEnd = start
+        nextProse = prose
+      }
+      result += transform(prose) + fence(html, LANGUAGE[state])
+      // A closing fence must end its line, or it does not close.
+      if (end < tail.length && tail[end] !== "\n") result += "\n"
+      prose = ""
+      cursor = end
+      if (final) {
+        sealedEnd = end
+        nextOutput = result
+        nextProse = ""
+      }
+    }
+    // Text can change only the last top-level block — extend a paragraph or a
+    // list, close a fence — so everything before it is settled as well. Except
+    // while that block's first line is still arriving with a `<`: it may yet
+    // be HTML, and the HTML blocks right before it belong with it then.
+    const lastBlock = blocks[blocks.length - 1]
+    const lastStart = lastBlock?.position?.start.offset
+    let stable = blocks.length - 1
+    if (
+      streaming &&
+      lastStart !== undefined &&
+      !shownAfter(tail, lastStart, streaming)
+    ) {
+      while (
+        stable > 0 &&
+        (blocks[stable - 1].type === "html" ||
+          isIndentedCode(blocks[stable - 1], tail))
+      )
+        stable--
+    }
+    const stableStart = blocks[stable]?.position?.start.offset
+    if (stableStart !== undefined && stableStart > cursor) {
+      sealedEnd = stableStart
+      nextProse = prose + tail.slice(cursor, stableStart)
+    }
+    if (streaming && lastBlock?.type === "code" && lastStart === sealedEnd) {
+      const fenceText = tail.slice(sealedEnd)
+      const marker = FENCE_OPEN.exec(fenceText)?.[1]
+      const closer = marker === undefined ? null : fenceCloser(marker)
+      if (closer && !closer.test(fenceText)) {
+        openFence = { closer, html: /^html?$/i.test(lastBlock.lang ?? "") }
+      }
+    }
+    result += transform(prose + tail.slice(cursor))
+    if (sealedEnd > 0) {
+      sealedOutput = nextOutput
+      sealedProse = nextProse
+      sealedSource = source.slice(0, sealedSource.length + sealedEnd)
+    }
+    return result
+  }
+}
diff --git a/src/lib/chat-html-prefs.test.tsx b/src/lib/chat-html-prefs.test.tsx
new file mode 100644
index 0000000000..4337a89b27
--- /dev/null
+++ b/src/lib/chat-html-prefs.test.tsx
@@ -0,0 +1,33 @@
+import { act, renderHook } from "@testing-library/react"
+import { beforeEach, describe, expect, it } from "vitest"
+import { saveChatHtmlEnabled, useChatHtmlEnabled } from "./chat-html-prefs"
+
+beforeEach(() => localStorage.clear())
+
+describe("聊天 HTML 渲染设置", () => {
+  it("默认关闭，修改后持久保存并通知同一窗口的读者", () => {
+    const first = renderHook(useChatHtmlEnabled)
+    const second = renderHook(useChatHtmlEnabled)
+    expect(first.result.current).toBe(false)
+    act(() => saveChatHtmlEnabled(true))
+    expect(first.result.current).toBe(true)
+    expect(second.result.current).toBe(true)
+    expect(localStorage.getItem("workspace:chat-html-rendering")).toBe("true")
+  })
+
+  it("响应其他窗口的设置修改和清空存储", () => {
+    const { result } = renderHook(useChatHtmlEnabled)
+    act(() => {
+      localStorage.setItem("workspace:chat-html-rendering", "true")
+      window.dispatchEvent(
+        new StorageEvent("storage", { key: "workspace:chat-html-rendering" })
+      )
+    })
+    expect(result.current).toBe(true)
+    act(() => {
+      localStorage.clear()
+      window.dispatchEvent(new StorageEvent("storage", { key: null }))
+    })
+    expect(result.current).toBe(false)
+  })
+})
diff --git a/src/lib/chat-html-prefs.ts b/src/lib/chat-html-prefs.ts
new file mode 100644
index 0000000000..84abc05ebc
--- /dev/null
+++ b/src/lib/chat-html-prefs.ts
@@ -0,0 +1,51 @@
+"use client"
+
+import { useSyncExternalStore } from "react"
+
+const KEY = "workspace:chat-html-rendering"
+const listeners = new Set<() => void>()
+let unstored: boolean | undefined
+
+function read(): boolean {
+  if (unstored !== undefined) return unstored
+  if (typeof window === "undefined") return false
+  try {
+    return localStorage.getItem(KEY) === "true"
+  } catch {
+    return false
+  }
+}
+
+function notify() {
+  for (const listener of listeners) listener()
+}
+
+function onStorage(event: StorageEvent) {
+  if (event.key !== null && event.key !== KEY) return
+  unstored = undefined
+  notify()
+}
+
+function subscribe(listener: () => void) {
+  if (listeners.size === 0) window.addEventListener("storage", onStorage)
+  listeners.add(listener)
+  return () => {
+    listeners.delete(listener)
+    if (listeners.size === 0) window.removeEventListener("storage", onStorage)
+  }
+}
+
+/** 修改立即通知本窗口；其他设置窗口通过 storage 事件同步。 */
+export function saveChatHtmlEnabled(enabled: boolean) {
+  try {
+    localStorage.setItem(KEY, String(enabled))
+    unstored = undefined
+  } catch {
+    unstored = enabled
+  }
+  notify()
+}
+
+export function useChatHtmlEnabled(): boolean {
+  return useSyncExternalStore(subscribe, read, () => false)
+}
diff --git a/src/lib/html-preview-frame.ts b/src/lib/html-preview-frame.ts
new file mode 100644
index 0000000000..6efd70cb61
--- /dev/null
+++ b/src/lib/html-preview-frame.ts
@@ -0,0 +1,74 @@
+export const HTML_PREVIEW_SIZE_MESSAGE_TYPE = "codeg-visualize:size"
+
+/** Theme tokens codeg shares with the Codex visualize skill's contract. */
+const THEME_TOKENS = [
+  "background",
+  "foreground",
+  "card",
+  "card-foreground",
+  "popover",
+  "popover-foreground",
+  "primary",
+  "primary-foreground",
+  "secondary",
+  "secondary-foreground",
+  "muted",
+  "muted-foreground",
+  "accent",
+  "accent-foreground",
+  "destructive",
+  "border",
+  "input",
+  "ring",
+] as const
+
+/**
+ * Reports the content's height to the parent whenever it changes.
+ *
+ * Measured off the content boxes — the root's box (which holds `<body>`'s
+ * margins, collapsed ones included) and `<body>`'s own overflow — never off
+ * the root's `scrollHeight`, which does not drop below the frame's current
+ * height and so could only ever grow the card. Nothing is reported before
+ * there is a layout to measure. Content whose height follows the viewport
+ * (`100vh` layouts) grows by exactly as much as the frame does; once a resize
+ * shows that, the reporter falls silent and the frame keeps the height it last
+ * asked for (the content scrolls), or every step of "Show all" would ask for
+ * another — and chasing a mid-transition viewport would never settle either.
+ */
+export const HTML_PREVIEW_SIZE_REPORTER = `<script>(()=>{
+const type=${JSON.stringify(HTML_PREVIEW_SIZE_MESSAGE_TYPE)};
+let lastHeight=0,lastViewport=innerHeight,sent=0,coupled=false,queued=false;
+const measure=()=>{const d=document.documentElement,b=document.body;if(!b)return 0;const root=d.getBoundingClientRect().height,box=b.getBoundingClientRect().height;if(root===0&&box===0)return 0;const s=getComputedStyle(b);return Math.ceil(Math.max(root,Math.max(b.scrollHeight,box)+(parseFloat(s.marginTop)||0)+(parseFloat(s.marginBottom)||0)))};
+const send=(h)=>{if(!coupled&&h>0&&h!==sent){sent=h;parent.postMessage({type,height:h},"*")}};
+const update=()=>{queued=false;lastHeight=measure();lastViewport=innerHeight;send(lastHeight)};
+const schedule=()=>{if(!queued){queued=true;requestAnimationFrame(update)}};
+addEventListener("resize",()=>{const h=measure(),v=innerHeight;if(lastHeight>0&&lastViewport>0&&v>lastViewport&&h>v&&Math.abs(h-lastHeight-(v-lastViewport))<=1)coupled=true;lastHeight=h;lastViewport=v;send(h)});
+const ro=new ResizeObserver(schedule);ro.observe(document.documentElement);if(document.body)ro.observe(document.body);
+new MutationObserver(schedule).observe(document.documentElement,{subtree:true,childList:true,attributes:true,characterData:true});
+addEventListener("load",update);
+})();</script>`
+
+/** Copy codeg's current theme tokens into the frame's variable contract. */
+export function readHtmlPreviewTheme(): string {
+  if (typeof document === "undefined") return ""
+  const style = getComputedStyle(document.documentElement)
+  const decls: string[] = []
+  for (const token of THEME_TOKENS) {
+    const value = style.getPropertyValue(`--${token}`).trim()
+    if (value) decls.push(`--${token}:${value}`)
+  }
+  // The skill aliases its first chart series to `--primary`. codeg's primary
+  // is near-black on the neutral presets, which turned every series-1 bar
+  // and line black; keep the skill's own blue for charts while controls
+  // still follow codeg's primary.
+  decls.push("--viz-series-1:var(--blue)")
+  return `:root{${decls.join(";")}}`
+}
+
+/** The reporter for a frame whose CSP admits only scripts carrying `nonce`. */
+export function htmlPreviewSizeReporter(nonce: string): string {
+  return HTML_PREVIEW_SIZE_REPORTER.replace(
+    "<script>",
+    `<script nonce="${nonce}">`
+  )
+}
diff --git a/src/lib/html-preview-inline.ts b/src/lib/html-preview-inline.ts
index 6372954d78..f09fb53ce5 100644
--- a/src/lib/html-preview-inline.ts
+++ b/src/lib/html-preview-inline.ts
@@ -28,6 +28,8 @@
 export type Base64Reader = (absPath: string) => Promise<string>
 
 export interface InlineOptions {
+  /** 聊天静态片段：移除作者脚本、事件、嵌入和跳转入口，不影响文件预览默认行为。 */
+  stripActiveContent?: boolean
   /** Absolute directory of the HTML file (resolves "./" and "../" refs). */
   fileDir: string
   /** Absolute workspace root — refs resolving outside it are skipped. */
@@ -570,6 +572,7 @@ export async function inlineHtmlResources(
     readFileBase64,
     maxInlineBytes = DEFAULT_MAX_INLINE_BYTES,
     concurrency = defaultConcurrency(),
+    stripActiveContent = false,
   }: InlineOptions
 ): Promise<string> {
   const ctx: InlineContext = {
@@ -592,11 +595,43 @@ export async function inlineHtmlResources(
     return t
   }
 
+  // A link target under any name — `href`, SVG's `xlink:href` — counts: a
+  // click on it would navigate the frame itself to another page, which CSP
+  // does not govern. One into the document itself (`#id`: an SVG `<use>`, a
+  // gradient, an in-page anchor) stays; the frame's `about:srcdoc` base keeps
+  // it there.
+  const isLinkTarget = (name: string) => /(?:^|:)href$/i.test(name)
+  const isOwnFragment = (url: string) => url.trimStart().startsWith("#")
+  const stripActiveAttributes = (el: Element) => {
+    for (const attr of Array.from(el.attributes)) {
+      if (
+        /^on/i.test(attr.name) ||
+        (isLinkTarget(attr.name) && !isOwnFragment(attr.value)) ||
+        ["action", "formaction", "nonce", "srcdoc"].includes(
+          attr.name.toLowerCase()
+        )
+      ) {
+        el.removeAttributeNode(attr)
+      }
+    }
+  }
+
   // Queue every resource-rewriting job for one parsed fragment (shared ctx, so
   // the read budget/gate span all fragments).
   const queueRewrites = (root: DocumentFragment) => {
     const ownerDoc = root.ownerDocument ?? document
 
+    if (stripActiveContent) {
+      root
+        .querySelectorAll("script, iframe, object, embed, link, template")
+        .forEach((el) => el.remove())
+      // SVG animation can set a link target the attribute pass never sees.
+      root.querySelectorAll("set, animate").forEach((el) => {
+        if (isLinkTarget(el.getAttribute("attributeName") ?? "")) el.remove()
+      })
+      root.querySelectorAll("*").forEach(stripActiveAttributes)
+    }
+
     // Drop author policy/redirect elements: a CSP <meta> could relax the policy
     // we inject; a meta-refresh or <base> could redirect to an external origin.
     root.querySelectorAll("meta[http-equiv]").forEach((el) => {
@@ -717,6 +752,22 @@ export async function inlineHtmlResources(
   // event-handler attributes (e.g. body onload) stay inert in the default
   // no-scripts sandbox.
   const wrap = extractWrapperAttrs(html)
+  if (stripActiveContent) {
+    for (const name of ["html", "head", "body"]) {
+      const el = parseInert(`<div${wrap[name]}></div>`).content
+        .firstElementChild
+      if (!el) {
+        wrap[name] = ""
+        continue
+      }
+      stripActiveAttributes(el)
+      wrap[name] = Array.from(
+        el.attributes,
+        (attr) =>
+          ` ${attr.name}="${attr.value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;")}"`
+      ).join("")
+    }
+  }
   return `<!DOCTYPE html>\n<html${wrap.html}>\n<head${wrap.head}>${headTpl.innerHTML}</head>\n<body${wrap.body}>${bodyTpl.innerHTML}</body>\n</html>`
 }
 
@@ -778,12 +829,22 @@ const SANDBOX_BASE = `<base href="about:srcdoc">`
  */
 export function withSandboxCsp(
   html: string,
-  options?: { trusted?: boolean }
+  options?: { trusted?: boolean; reporterNonce?: string }
 ): string {
-  const csp = options?.trusted ? CSP_TRUSTED : CSP_STRICT
+  const nonce = options?.reporterNonce
+  const csp = options?.trusted
+    ? CSP_TRUSTED
+    : nonce && /^[a-zA-Z0-9_-]+$/.test(nonce)
+      ? CSP_STRICT.replace("script-src 'none'", `script-src 'nonce-${nonce}'`)
+      : CSP_STRICT
   // CSP meta FIRST so the policy is active when the browser parses the <base>
   // and enforces its `base-uri` check against it.
   const head = `<meta http-equiv="Content-Security-Policy" content="${csp}">${SANDBOX_BASE}`
+  return withHtmlPreviewHead(html, head)
+}
+
+/** 在真正的 head 开头插入受信内容，不匹配注释、属性或样式中的伪标签。 */
+export function withHtmlPreviewHead(html: string, head: string): string {
   const headEnd = realStartTagEnd(html, "head")
   if (headEnd != null) {
     return html.slice(0, headEnd) + head + html.slice(headEnd)